/* ============================================================
   ZZPass — quiet theme (direction 09).
   Loaded LAST on every page, after each page's own stylesheet.

   Principles: near-monochrome, soft layered depth, small
   confident type, one accent used sparingly. Restraint is the
   whole statement — colour is spent only where it means
   something (links, a status, a single primary action).
   ============================================================ */

:root{
  --bg:#FAFAFA;--bg-soft:#F4F4F5;--bg-warm:#EFEFF1;
  --ink:#171717;--ink-2:#525252;--ink-mute:#6B6B70;
  --rule:#EAEAEA;--rule-2:#DCDCDE;--hair:#EAEAEA;
  --accent:#1B4DD1;--accent-deep:#123AA6;--accent-soft:#EEF2FD;--accent-glow:rgba(27,77,209,.10);
  --night:#171717;--night-2:#212121;
  /* --ink-mute is tuned for the light body (5.15:1 on #FAFAFA) and measures only
     3.38:1 on --night. Anything muted on a dark surface needs this instead. */
  --ink-mute-dark:#B9B9BE;
  --sh-sm:0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05);
  --sh-btn:0 1px 2px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.06);
}

/* ---------- Typography ---------- */
body{font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;font-size:16px;line-height:1.6;letter-spacing:-.008em;background:var(--bg);color:var(--ink)}
h1,h2,h3,h4,.hero h1,.sec-head h2,.faq-item summary,.pc-head h3,.pc-amt,
.ek-hero h1,.ea-hero h1,.sec-hero h1,.maker-inner h2,.footer-cta h2,.escrow-copy h3,.ea-related h3{
  font-family:'Instrument Sans',-apple-system,sans-serif;font-weight:600;letter-spacing:-.028em}
.hero h1,.ek-hero h1,.ea-hero h1,.sec-hero h1{font-size:clamp(34px,3.7vw,52px);line-height:1.1;letter-spacing:-.032em}
.sec-head h2,.maker-inner h2,.footer-cta h2,h2{font-size:clamp(26px,2.9vw,38px);line-height:1.15;margin:12px 0 18px}
/* the italic-serif accent was the strongest template signal — remove it everywhere */
h1 em,h2 em,h3 em{font-style:normal;font-weight:600;color:inherit}
.sec-head p,.lede{font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:58ch}
.sec-head{margin-bottom:48px}
.section{padding:92px 0}

/* Serif-scale headings were sized for a display face. As a 600-weight sans
   they need to come down — `body` prefix outranks the per-page class rules. */
body .hero h1,body .sec-hero h1,body .ek-hero h1,body .ea-hero h1{
  font-size:clamp(34px,3.7vw,52px);line-height:1.1;letter-spacing:-.032em;font-weight:600}
body .sec-head h2,body .mk-copy h2,body .ve-head h2,body .security-copy h2,
body .autofill-copy h2,body .sharing-copy h2,body .sync-copy h2,body .footer-cta h2,
body .dualcopy-copy h2,body .trio-copy h2,body .upgrade-copy h2,body .std-side h2,
body .tc-copy h2,body .celebrate h2,body .ea-footer-cta h2,body .pp-start-copy h2,
body .maker-inner h2,body .ea-related h3,body .escrow-copy h3{
  font-size:clamp(26px,2.9vw,38px);line-height:1.16;letter-spacing:-.028em;font-weight:600;margin:12px 0 18px}
body .step-card h3,body .how-card h3,body .clip-card h3,body .step4-card h3,
body .principle h3,body .layer-body h3,body .secret-key-card h3,body .mode h3,body .step h3{
  font-size:20px;line-height:1.2;letter-spacing:-.02em;font-weight:600}
body .trust-card h4,body .rail-item h4,body .use h4,body .deep-row h4{
  font-size:17px;line-height:1.25;letter-spacing:-.018em;font-weight:600}
body .capsule-title,body .cap-title,body .sg-core-name,body .role-name,body .compat-name,
body .ip-h,body .mc-h-t,body .pk-side-h,body .ve-meta-h,body .threat-col-t,body .att-cred-t,
body .fam-card-name,body .trio-grp-name,body .share-cat h3,body .type-card h3,body .case-card h3,
body .sgs-card h3,body .prob-card h3,body .sd-node-t{
  font-size:17px;line-height:1.22;letter-spacing:-.018em;font-weight:600}
body .cd-num,body .bignum,body .stat-big{font-weight:600;letter-spacing:-.035em}
body .faq-item summary{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
body .compare-row.head > div{font-size:16px;font-weight:600;letter-spacing:-.018em}

/* Eyebrow: plain label, no badge, no ornament */
.eyebrow{font-family:'Instrument Sans',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-mute);gap:0}
.eyebrow .dot{display:none}

/* ---------- Nav ---------- */
.nav{background:rgba(250,250,250,.86);border-bottom:1px solid var(--rule)}
.nav-inner{padding:13px 32px}
.brand-mark{border-radius:7px}
.nav-links a{font-size:14px}
.nav-cta{background:var(--ink);color:#fff;border-radius:8px;font-size:13.5px;font-weight:500;padding:8px 15px;box-shadow:var(--sh-btn)}
.nav-cta:hover{background:#000}
.nav-dropdown{border-radius:12px;border-color:var(--rule);box-shadow:var(--sh-md)}
.nav-sheet a.ns-cta{background:var(--ink);border-radius:8px}

/* ---------- Surfaces: white cards, hairline, whisper of depth ---------- */
.feature,.howto-step,.ws-card,.price-card,.esc-card,.oss-card,.storage-card,
.pp-start-steps li,.uc-card,.mode-card,.ea-sec-card,.trust-card,.rail-item,.sgs-card,.disc-harbor{
  background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:var(--sh-sm)}
.feature::after{display:none}
.feature-grid{gap:20px;border-top:0}
.feature{padding:26px 24px}
.feature h3{font-size:16px;font-weight:600;margin-bottom:7px}
.feature p{font-size:14.5px;line-height:1.58;color:var(--ink-2)}
.feature-accent{background:#fff;color:inherit}
.feature-accent h3,.feature-accent p{color:inherit}
.ft-ic{width:auto;height:auto;background:none;border:0;border-radius:0;color:var(--ink-mute);margin-bottom:14px}
.ft-link{color:var(--accent);font-size:13.5px;font-weight:500}
.howto-step,.ws-card{padding:24px 22px;border-top:1px solid var(--rule)}
.howto-grid{gap:18px}
.hs-n,.ws-from,.ps-h{font-size:11px;letter-spacing:.09em;color:var(--ink-mute)}
.price-strip{background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:var(--sh-sm)}
.cred-item{border-top:1px solid var(--ink)}
.cred-k{font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.shot-frame .phone-shot,.shot-frame .mac-shot,.mac-shot,.phone-shot{filter:drop-shadow(0 18px 36px rgba(0,0,0,.10))}
.shot-frame--glow::before,.hero-bloom{opacity:.45}

/* ---------- Buttons ---------- */
.pc-btn,.dl-badge.mac,.ns-cta{border-radius:8px;font-weight:500}
.pc-btn.solid,.dl-badge.mac{background:var(--ink);color:#fff;box-shadow:var(--sh-btn)}
/* --ink and --night are both #171717, so on a dark CTA the Mac badge would be
   invisible. The App Store artwork solves this with a #A6A6A6 border; match it. */
.footer-cta .dl-badge.mac,.timecapsule .dl-badge.mac{border:1px solid #A6A6A6}
/* Feature pages set these ledes with an inline color:var(--ink-2), a light-surface
   token that measures 2.3:1 on the dark CTA. Inline styles need !important. */
.footer-cta p:not(.fc-note):not(.mono),.timecapsule p:not(.fc-note):not(.mono){color:var(--ink-mute-dark) !important}
/* Same token problem for every other muted element on a dark surface. */
.footer-cta .eyebrow,.timecapsule .eyebrow,.ea-security .eyebrow,.security-dark .eyebrow,.tc-mode-dark .eyebrow,.price-card.dark .eyebrow,
.footer-cta .ft-h,.timecapsule .ft-h{color:var(--ink-mute-dark)}
.pc-btn.ghost{background:#fff;border:1px solid var(--rule-2);color:var(--ink);box-shadow:var(--sh-sm)}
/* ---------- Download badges ----------
   Lives here rather than landing.css because theme.css is the one stylesheet
   every page loads; timecapsule.html has no landing.css and previously carried
   its own private copy of this component. */
.dl-badge{display:inline-flex;align-items:center;text-decoration:none;line-height:0;transition:transform .15s ease,opacity .15s ease}
.dl-badge:hover{transform:translateY(-1px);opacity:.88}
.dl-badge img{display:block;height:44px;width:auto}
.dl-badge .dl-text,.dl-badge .apple-glyph{display:none}
.dl-badge.mac{height:44px;padding:0 20px;gap:10px;line-height:1}
.dl-badge.mac .apple-glyph{display:block;width:20px;height:20px;flex:none}
.dl-badge.mac .dl-text{display:flex;flex-direction:column;text-align:left;line-height:1.1}
.dl-badge.mac .dl-meta{font-size:10px;letter-spacing:.02em;opacity:.8}
.dl-badge.mac .dl-store{font-size:16px;font-weight:600}

/* ---------- Pricing ---------- */
.price-card{border-radius:14px}
.pc-amt{font-size:44px;letter-spacing:-.035em}
/* --ink-mute is a light-surface token: only apply it to the light card,
   never the featured dark one, which sets its own foregrounds. */
.price-card:not(.featured) .pc-per{color:var(--ink-mute)}

/* ---------- FAQ: a document, quietly ---------- */
.faq-list{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{font-size:16.5px;font-weight:600}
.faq-item summary::after{color:var(--ink-mute);font-size:18px}
.faq-body{font-size:15.5px;color:var(--ink-2)}

/* ---------- Dark blocks: neutral near-black, never blue-black ---------- */
.timecapsule,.footer-cta,.ea-security,.security-dark,.price-card.dark,.tc-mode-dark{background:var(--night)}
.footer-cta h2,.timecapsule h2{color:#fff}
.fc-note{color:#8A8A8F}

/* ---------- Footer ---------- */
.site{border-top:1px solid var(--rule);background:var(--bg)}
.ft-h{font-size:11px;letter-spacing:.1em;color:var(--ink-mute)}
.ft-col a{font-size:14px}

/* ---------- Links ---------- */
a{color:var(--accent)}
a:hover{color:var(--accent-deep)}

/* ---------- Open-source repo list (index) ---------- */
.repos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.repo{display:block;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:var(--sh-sm);padding:20px 22px;text-decoration:none;transition:box-shadow .16s ease,transform .16s ease}
.repo:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.repo-name{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px}
.repo-name svg{width:14px;height:14px;flex:none;opacity:.55}
.repo p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.repo-lic{display:block;margin-top:10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.08em;color:var(--ink-mute)}
@media (max-width:820px){.repos{grid-template-columns:1fr}}

/* Related-help links under each FAQ */
.faq-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:28px 0 0;padding-top:22px;border-top:1px solid var(--rule);font-size:14.5px}
.faq-more .mono{font-size:10.5px;letter-spacing:.1em;color:var(--ink-mute)}
.faq-more a{color:var(--accent);text-decoration:none;font-weight:500}
.faq-more a:hover{color:var(--accent-deep);text-decoration:underline}

/* Build stamp */
.build-stamp{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.build-stamp .sep{color:var(--ink-mute)}