/* ══════════════════════════════════════════════════════════════════════
   pb.css — shared design system for the PrivateByte frontend.

   index.html, migrate.html and security.html still carry their own inline
   copies of this (they were built before it existed). Everything from here
   on links this file instead. Consolidating those three is a follow-up —
   worth doing, but not worth destabilising three working pages to do it.
   ══════════════════════════════════════════════════════════════════════ */
:root{--ink-0:#fafafa;--ink-1:#e7e6e4;--ink-2:#c4c4c6;--ink-3:#a8a29e;--ink-4:#8a8a8c;
 --ink-5:#78716c;--ink-6:#525048;--ink-7:#3a3a3c;--ink-8:#2a2a2e;--ink-9:#1a1a1c;
 --ground:#060608;--card:#0c0c0e;--line:rgba(255,255,255,.07);--line-mid:rgba(255,255,255,.12);
 --line-hi:rgba(255,255,255,.2);
 --display:'Instrument Sans',-apple-system,sans-serif;--sans:'Instrument Sans',-apple-system,sans-serif;
 --mono:'Geist Mono','SF Mono',ui-monospace,Menlo,monospace;--pad:clamp(20px,5vw,40px);
 --ease:cubic-bezier(.32,.72,0,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overscroll-behavior-y:none}
body{overscroll-behavior-y:none}
body{background:var(--ground);color:var(--ink-0);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}

/* ── nav ── */
nav{position:sticky;top:0;z-index:50;background:rgba(6,6,8,.82);backdrop-filter:blur(14px);
 border-bottom:1px solid transparent;transition:border-color .3s}
nav.stuck{border-bottom-color:var(--line)}
/* three columns rather than a flex row: the logo and the CTA cluster take equal
   fixed shares, so the links sit optically centred in the viewport regardless of
   how wide either side happens to be. A flex row with margin-left:auto centres
   nothing — it just pushes. */
.nav-in{max-width:1200px;margin:0 auto;padding:18px var(--pad);display:grid;
 grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.logo{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:.36em;
 margin-right:-.36em;color:var(--ink-0);text-decoration:none;flex-shrink:0}
/* Logo hover: the tracking opens slowly and closes even more slowly. The two
   durations are deliberately different — the rule on :hover governs entering,
   the rule on the base governs leaving, so the return is the longer of the two.
   margin-right must track letter-spacing exactly, otherwise the trailing space
   grows the element's box and nudges everything beside it. */
/* Letter-spacing only ever pushes right, so the word would drift rightward from
   a fixed left edge. margin-left pulls back by half the total growth, keeping the
   optical centre still and making it open in both directions.
   Growth = (.52 - .36)em x 10 gaps = 1.6em, so half is .8em. */
.logo{display:inline-block;justify-self:start;margin-left:0;
 transition:letter-spacing 1.7s var(--ease),margin-right 1.7s var(--ease),margin-left 1.7s var(--ease)}
.logo:hover{letter-spacing:.52em;margin-right:-.52em;margin-left:-.8em;
 transition:letter-spacing .95s var(--ease),margin-right .95s var(--ease),margin-left .95s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .logo,.logo:hover{transition:none;letter-spacing:.36em;margin-right:-.36em;margin-left:0}}

.nav-links{display:flex;gap:28px;justify-content:center}
.nav-links a{font-size:14px;color:var(--ink-4);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink-0)}
.nav-cta{display:flex;align-items:center;justify-content:flex-end;gap:18px}

/* segmented nav action — one joined control divided by a hairline, matching the
   stats mosaic and the provider tiles rather than sitting apart from them */
/* overflow:hidden is deliberately NOT set here. It used to clip the children
   into the pill shape, but it also clipped any outer glow, so the Deploy hover
   could only ever be #fafafa -> #fff: a five-value change on one channel, i.e.
   invisible. The children now carry their own corner radii instead, so the
   segment still reads as one pill and the primary half can lift and cast like
   every other primary button.
   Inner radius is 7px, not 8px: the container's own 1px border sits outside
   them, and matching the outer value leaves a visible sliver at each corner.
   Keep in sync with the copy in index.html, which carries its own inline CSS. */
.seg{display:inline-flex;border:1px solid var(--line-mid);border-radius:8px}
.seg a{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:11px 18px;
 text-decoration:none;white-space:nowrap;
 transition:background .55s var(--ease),color .55s var(--ease),
            box-shadow .78s var(--ease),transform .62s var(--ease)}
.seg .a1{color:var(--ink-3);border-right:1px solid var(--line-mid);border-radius:7px 0 0 7px}
.seg .a1:hover{background:rgba(255,255,255,.05);color:var(--ink-0)}
.seg .a2{background:var(--ink-0);color:#08080a;border-radius:0 7px 7px 0}
/* Same lift and cast as .btn-primary — a white control cannot get brighter, so
   hover is expressed as elevation. z-index keeps the lifted half above the
   divider rule, which would otherwise show through the shadow. */
.seg .a2:hover{background:#fff;transform:translateY(-2px);z-index:1;
 box-shadow:0 12px 28px -14px rgba(250,250,250,.5),0 2px 6px rgba(0,0,0,.5)}
.seg .a2:active{transform:translateY(0) scale(.985);background:var(--ink-1);
 box-shadow:0 1px 0 rgba(0,0,0,.4);transition-duration:.12s}
@media(prefers-reduced-motion:reduce){
  .seg a{transition:background .2s,color .2s}
  .seg .a2:hover,.seg .a2:active{transform:none}}
.seg a:focus-visible{outline:2px solid var(--ink-0);outline-offset:-2px;z-index:1}
.nav-cta .sign{font-size:14px;color:var(--ink-4);text-decoration:none;transition:color .2s}
.nav-cta .sign:hover{color:var(--ink-0)}

/* ── type ── */
h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,6.4vw,76px);letter-spacing:-.042em;line-height:1.02}
h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,4vw,46px);letter-spacing:-.034em;line-height:1.05}
h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.3}
.slede{color:var(--ink-4);font-size:16.5px;line-height:1.66;margin-top:20px;max-width:80ch}
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--ink-6);margin-bottom:20px}
.chk{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-5)}
.fine{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--ink-6);line-height:1.7;margin-top:20px}
section{padding:clamp(64px,9vw,116px) 0}
section+section{border-top:1px solid var(--line)}
.hero{padding-top:clamp(56px,8vw,96px)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;font-family:var(--sans);font-size:14.5px;font-weight:600;
 padding:14px 26px;border-radius:7px;border:1px solid transparent;text-decoration:none;cursor:pointer;
 transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease),
            transform .62s var(--ease),box-shadow .78s var(--ease)}
/* A white button on near-black cannot get brighter, so hover is expressed as
   lift and a soft cast rather than a colour change — a colour shift on white
   reads as the button going grey, i.e. disabled. Active presses it back down. */
.btn-primary{background:var(--ink-0);color:#08080a;box-shadow:0 1px 0 rgba(0,0,0,.4)}
.btn-primary:hover{background:#fff;transform:translateY(-2px);
 box-shadow:0 12px 28px -14px rgba(250,250,250,.5),0 2px 6px rgba(0,0,0,.5)}
.btn-primary:active{transform:translateY(0) scale(.985);background:var(--ink-1);
 box-shadow:0 1px 0 rgba(0,0,0,.4);transition-duration:.12s}
.btn-line{border-color:var(--line-mid);color:var(--ink-2);background:none}
.btn-line:hover{border-color:var(--line-hi);color:var(--ink-0);
 background:rgba(255,255,255,.045);transform:translateY(-2px)}
.btn-line:active{transform:translateY(0) scale(.985);transition-duration:.12s}
.btn:focus-visible{outline:2px solid var(--ink-0);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .btn{transition:background .2s,color .2s,border-color .2s}
  .btn:hover,.btn:active{transform:none}}
.btn-lg{font-size:15.5px;padding:16px 30px}
.acts{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ── joined mosaic (stats, cells) ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:56px;
 border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.cell{padding:clamp(26px,3vw,34px) clamp(22px,2.4vw,28px);border-right:1px solid var(--line);
 transition:background .28s}
.cell:last-child{border-right:0}
.cell:hover{background:rgba(255,255,255,.028)}
.cell .no{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-6)}
.cell .v{font-family:var(--display);font-weight:600;font-size:clamp(36px,4.2vw,50px);
 letter-spacing:-.05em;line-height:1;margin-top:16px}
.cell .v small{font-size:.34em;font-weight:600;color:var(--ink-4);letter-spacing:0;margin-left:.22em}
.cell .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--ink-5);margin-top:16px;line-height:1.75}
.cell p{color:var(--ink-4);font-size:14px;line-height:1.62;margin-top:14px}

/* ── hairline rows ── */
.rows{margin-top:52px;border-top:1px solid var(--line-mid)}
.row{display:grid;grid-template-columns:150px 1fr auto;gap:clamp(16px,3vw,34px);align-items:baseline;
 padding:22px 0;border-bottom:1px solid var(--line);transition:background .22s}
.row:hover{background:rgba(255,255,255,.018)}
.row-k{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.018em}
.row-t{font-size:15px;color:var(--ink-2)}
.row-t span{display:block;color:var(--ink-5);font-size:14px;margin-top:5px;line-height:1.6}
.row-v{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-6);white-space:nowrap}

/* ── panel ── */
.panel{margin-top:48px;border:1px solid var(--line);border-radius:16px;background:var(--card);
 padding:clamp(28px,4vw,44px)}
.panel p{color:var(--ink-4);font-size:15.5px;line-height:1.68;max-width:74ch;margin-top:14px}
/* :not(.btn) — otherwise this beats .btn-primary on specificity and paints
   light text onto a white button, which reads as a disabled control. */
.panel a:not(.btn){color:var(--ink-1);text-decoration:none;border-bottom:1px solid var(--line-mid)}
.panel a:not(.btn):hover{border-bottom-color:var(--ink-1)}

/* ── plan cards ── */
/* Six plans. auto-fit gave 4+2 at 1120px — the second row stranded two cards
   against a wide gap, which reads as a rendering fault rather than a layout.
   Explicit columns instead, chosen so every row is full at every breakpoint:
   3+3 on desktop, 2+2+2 on tablet, 1 per row on a phone. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px}
@media(max-width:1040px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:28px 24px;
 position:relative;transition:border-color .26s,transform .26s var(--ease)}
.plan:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.plan.feat{border-color:var(--ink-7)}
.plan .tag{position:absolute;top:-1px;right:18px;font-family:var(--mono);font-size:9px;
 letter-spacing:.14em;text-transform:uppercase;background:var(--ink-0);color:#08080a;
 padding:3px 9px;border-radius:0 0 5px 5px}
.pn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-5)}
.pp{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-.045em;margin-top:14px}
.pp sub{font-size:.34em;font-weight:400;color:var(--ink-4);letter-spacing:0;margin-left:.2em;bottom:0}
.plan ul{list-style:none;margin-top:22px;border-top:1px solid var(--line);padding-top:6px}
.plan li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:13.5px;
 color:var(--ink-5);border-bottom:1px solid var(--line)}
.plan li:last-child{border-bottom:0}
.plan li b{font-weight:500;color:var(--ink-1);font-family:var(--mono);font-size:12.5px}
.plan .btn{margin-top:22px;width:100%;justify-content:center}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:64px 0 40px}
.f-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,4vw,48px)}
.f-col{display:flex;flex-direction:column;gap:11px}
.f-col .h{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--ink-6);margin-bottom:4px}
.f-col a{color:var(--ink-4);font-size:14.5px;text-decoration:none;transition:color .2s}
.f-col a:hover{color:var(--ink-0)}
.f-slogan{font-size:17px;color:var(--ink-1)}
.f-social{display:flex;gap:16px;margin-top:6px;align-items:center}
.f-social a{display:inline-flex;color:var(--ink-6);transition:color .2s}
.f-social a:hover{color:var(--ink-0)}
.f-social svg{width:17px;height:17px;display:block}
.f-note{color:var(--ink-6);font-size:13px;line-height:1.6}
.f-bot{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);display:flex;
 justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;
 letter-spacing:.12em;text-transform:uppercase;color:var(--ink-6)}

/* ── reveal ──
   Gated on .anim, added by JS only when the page is actually visible. CSS
   animations and transitions do not advance in a hidden tab; without this gate
   a page opened in a background tab renders every .rv element at opacity 0. */
.anim .rv{opacity:0;transform:translateY(18px);
 transition:opacity .7s var(--ease),transform .8s var(--ease)}
.anim .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.anim .rv{opacity:1;transform:none;transition:none}}

@media(max-width:900px){.nav-in{grid-template-columns:auto 1fr}.f-grid{grid-template-columns:1fr 1fr}.nav-links{display:none}}
@media(max-width:680px){
  .row{grid-template-columns:1fr auto}.row-t{grid-column:1/-1;margin-top:6px}
  .f-grid{grid-template-columns:1fr}
}