/* ============================================================
   PRIVY by northOS  .  marketing + legal site
   Minimalist, typography-first, ink on paper. One accent:
   privy orange #EB7030. Light (default) + Dark themes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap');

:root{
  /* light (default) */
  --paper:     #EBEBE6;
  --surface:   #FFFFFF;
  --ink:       #1b1a17;
  --ink-dim:   rgba(27,26,23,.66);
  --ink-faint: rgba(27,26,23,.46);
  --ink-ghost: rgba(27,26,23,.16);
  --hairline:  rgba(27,26,23,.12);
  --hairline-2:rgba(27,26,23,.06);

  --accent:    #EB7030;   /* privy orange */
  --accent-deep:#cc5a20;
  --accent-soft:rgba(235,112,48,.12);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --maxw: 1080px;
  --gutter: clamp(22px, 5vw, 72px);
}

:root[data-theme="dark"]{
  --paper:     #000000;
  --surface:   #1C1C1E;
  --ink:       #f3f1ec;
  --ink-dim:   rgba(243,241,236,.64);
  --ink-faint: rgba(243,241,236,.42);
  --ink-ghost: rgba(243,241,236,.2);
  --hairline:  rgba(243,241,236,.14);
  --hairline-2:rgba(243,241,236,.07);
  --accent:    #f0834a;
  --accent-deep:#EB7030;
  --accent-soft:rgba(235,112,48,.18);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px,10vw,140px); position:relative; }

.serif{ font-family:var(--serif); }
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 22px; display:flex; align-items:center; gap:11px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:22px; height:1px; background:var(--accent); display:inline-block; }

.disp{
  font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.012em;
  margin:0; text-wrap:balance; font-size:clamp(40px,6vw,82px);
}
.lead{ color:var(--ink-dim); font-size:clamp(19px,2vw,23px); line-height:1.55; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-bottom-color:var(--hairline); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand__fox{ width:30px; height:30px; object-fit:contain; }
.wordmark{ font-family:var(--sans); font-weight:600; font-size:18px; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em; }
.wordmark .y{ color:var(--accent); }
.nav__links{ display:flex; align-items:center; gap:32px; }
.nav__links a{ font-size:15.5px; color:var(--ink-dim); transition:color .2s; }
.nav__links a:hover{ color:var(--ink); }
.nav__right{ display:flex; align-items:center; gap:12px; }

/* lang + theme toggles */
.lang-toggle{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--hairline); border-radius:999px; padding:8px 12px;
  line-height:1; transition:color .2s, border-color .2s;
}
.lang-toggle:hover{ color:var(--ink); border-color:var(--ink-faint); }
.theme-toggle{
  all:unset; cursor:pointer; box-sizing:border-box; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; flex:none; border:1px solid var(--hairline); color:var(--ink-dim);
  transition:color .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--ink-faint); transform:translateY(-1px); }
.theme-toggle svg{ display:block; }
.theme-toggle .t-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .t-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .t-moon{ display:block; }

/* ---------- buttons + badges ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:16px; font-weight:550;
  padding:13px 22px; border-radius:12px; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform .18s, background .2s, border-color .2s, color .2s;
}
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hairline); }
.btn--ghost:hover{ border-color:var(--ink-faint); }

/* App Store badge (coming soon) */
.appstore{
  display:inline-flex; align-items:center; gap:13px; padding:12px 20px 12px 16px; border-radius:14px;
  border:1px solid var(--hairline); background:var(--surface); color:var(--ink);
  transition:border-color .2s, transform .18s;
}
.appstore:hover{ border-color:var(--ink-faint); transform:translateY(-2px); }
.appstore svg{ width:26px; height:26px; flex:none; }
.appstore__t{ display:flex; flex-direction:column; line-height:1.15; }
.appstore__s{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.appstore__m{ font-size:17px; font-weight:600; letter-spacing:-.01em; }

/* ====================================================
   HERO
   ==================================================== */
.hero{ padding-top:clamp(40px,7vw,86px); padding-bottom:clamp(50px,8vw,110px); text-align:center; }
.hero__fox{ width:clamp(78px,12vw,116px); margin:0 auto 30px; }
.hero h1{ font-size:clamp(40px,6.6vw,90px); }
.hero h1 .accent{ color:var(--accent); }
.hero__sub{ margin:28px auto 0; max-width:30ch; font-size:clamp(20px,2.3vw,27px); color:var(--ink); line-height:1.4; font-weight:450; }
.hero__support{ margin:18px auto 0; max-width:46ch; color:var(--ink-dim); font-size:18px; }
.hero__cta{ margin-top:38px; display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; }
.hero__note{ margin-top:22px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--ink-faint); }

/* ====================================================
   FEATURE ROWS  (typography-first, alternating)
   ==================================================== */
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; }
.feat + .feat{ margin-top:clamp(60px,9vw,120px); }
.feat--flip .feat__media{ order:-1; }
.feat__copy h2{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,3.8vw,52px); line-height:1.06; margin:0 0 20px; letter-spacing:-.01em; }
.feat__copy p{ color:var(--ink-dim); font-size:19px; line-height:1.6; margin:0 0 18px; max-width:40ch; }
.feat__list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.feat__list li{ display:flex; gap:13px; align-items:flex-start; color:var(--ink); font-size:17px; }
.feat__list .tick{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-top:1px; }
.feat__list .tick svg{ width:13px; height:13px; }

/* media block: phone-ish frame placeholder */
.feat__media{ display:flex; justify-content:center; }
.shot{
  width:min(300px,80%); aspect-ratio:1284/2778; border-radius:34px; overflow:hidden;
  background:var(--surface); border:1px solid var(--hairline);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.5); position:relative;
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot--ph{ display:grid; place-items:center; }
.shot--ph span{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding:0 24px; }

/* ====================================================
   PRIVACY BANNER
   ==================================================== */
.priv{ text-align:center; }
.priv .disp{ font-size:clamp(34px,5vw,68px); }
.priv__body{ margin:30px auto 0; max-width:40ch; color:var(--ink-dim); font-size:clamp(19px,2vw,23px); line-height:1.55; }
.priv__grid{ margin-top:clamp(44px,6vw,72px); display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:left; }
.priv__card{ border:1px solid var(--hairline); border-radius:18px; padding:26px 24px; background:var(--surface); }
.priv__card h3{ font-family:var(--serif); font-weight:500; font-size:23px; margin:14px 0 8px; }
.priv__card p{ color:var(--ink-dim); font-size:15.5px; line-height:1.55; margin:0; }
.priv__ic{ width:40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
.priv__ic svg{ width:22px; height:22px; }

/* ====================================================
   SCREENSHOT GALLERY
   ==================================================== */
.gal__head{ text-align:center; margin-bottom:clamp(40px,6vw,64px); }
.gal__rail{ display:flex; gap:26px; overflow-x:auto; padding:6px var(--gutter) 34px; justify-content:safe center;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gal__rail::-webkit-scrollbar{ display:none; }
.gal__rail .shot{ scroll-snap-align:center; flex:none; width:248px; }
.gal__hint{ text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-ghost); }

/* ====================================================
   CLOSING
   ==================================================== */
.close{ text-align:center; }
.close .disp{ font-size:clamp(38px,5.6vw,76px); }
.close p{ margin:26px auto 34px; max-width:34ch; color:var(--ink-dim); font-size:clamp(19px,2vw,23px); }

/* ====================================================
   FOOTER
   ==================================================== */
.foot{ border-top:1px solid var(--hairline); padding-block:54px 46px; }
.foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; align-items:start; }
.foot__brand .brand{ margin-bottom:14px; }
.foot__blurb{ color:var(--ink-dim); font-size:15px; max-width:32ch; line-height:1.6; margin:0; }
.foot__col h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; font-weight:500; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot__col a{ color:var(--ink-dim); font-size:15px; }
.foot__col a:hover{ color:var(--ink); }
.foot__base{ margin-top:48px; padding-top:24px; border-top:1px solid var(--hairline-2);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--ink-faint); }

/* ====================================================
   DOC PAGES (privacy / support)
   ==================================================== */
.doc-hero{ padding-top:clamp(54px,8vw,108px); padding-bottom:clamp(10px,3vw,28px); }
.doc-hero h1{ font-size:clamp(40px,7vw,84px); margin:0; }
.doc-hero .lead{ margin-top:24px; max-width:38ch; }
.doc-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-faint); margin-top:22px; line-height:1.7; }
.doc{ max-width:740px; }
.doc section{ padding:32px 0; border-top:1px solid var(--hairline); }
.doc section:first-child{ border-top:0; }
.doc h2{ font-family:var(--serif); font-weight:500; font-size:clamp(25px,3vw,36px); margin:0 0 16px; letter-spacing:-.01em; }
.doc h2 .n{ color:var(--accent); font-family:var(--mono); font-size:.45em; letter-spacing:.1em; margin-right:11px; vertical-align:middle; }
.doc p{ color:var(--ink-dim); font-size:18px; line-height:1.62; margin:0 0 15px; }
.doc p .hl{ color:var(--ink); }
.doc ul{ color:var(--ink-dim); font-size:18px; line-height:1.6; margin:0; padding-left:1.1em; }
.doc li{ margin-bottom:11px; }
.doc a{ color:var(--accent-deep); }
.doc-note{ margin-top:46px; padding:22px 24px; border:1px solid var(--hairline); border-radius:16px; background:var(--accent-soft); color:var(--ink-dim); font-size:15px; line-height:1.55; }

/* FAQ accordion (support) */
.faq{ max-width:760px; }
.faq details{ border-top:1px solid var(--hairline); }
.faq summary{ list-style:none; cursor:pointer; padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.3vw,26px); color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq .plus{ flex:none; width:24px; height:24px; position:relative; color:var(--ink-faint); transition:transform .25s; }
.faq .plus::before,.faq .plus::after{ content:""; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px; }
.faq .plus::before{ width:14px; height:1.6px; transform:translate(-50%,-50%); }
.faq .plus::after{ width:1.6px; height:14px; transform:translate(-50%,-50%); transition:opacity .25s; }
.faq details[open] .plus{ transform:rotate(180deg); color:var(--accent); }
.faq details[open] .plus::after{ opacity:0; }
.faq .ans{ color:var(--ink-dim); font-size:17.5px; line-height:1.62; margin:0 0 22px; padding-right:40px; }
.faq .ans a{ color:var(--accent-deep); }
.faq .ans b{ color:var(--ink); }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width:880px){
  .feat{ grid-template-columns:1fr; gap:36px; }
  .feat--flip .feat__media{ order:0; }
  .feat__copy{ text-align:center; }
  .feat__copy p{ margin-inline:auto; }
  .feat__list{ display:inline-flex; text-align:left; }
  .priv__grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .nav__links{ display:none; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* reveal (always visible; progressive enhancement only) */
.reveal{ opacity:1; transform:none; }