/* Naka AI Browser: nakaprivacy.com. Same tokens and fonts as the Naka VPN site (self-hosted in /fonts).
   No inline styles anywhere: the Content-Security-Policy forbids them. */
@font-face{font-family:'Clash Display';src:url('/fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('/fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('/fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#070B1C;--blue:#3C93F7;--blue-2:#2F7BEE;--blue-b:#5BA8FF;--cyan:#86C8FF;--green:#6FD06A;
  --text:#EDF1FB;--soft:#C4CDEA;--muted:#92A0C4;--faint:#8290B8;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.03);--maxw:1160px;--r:22px;--r-s:14px;--ease:cubic-bezier(.2,.8,.2,1);
  --app:#14193A;--app-2:#0D1128;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--bg)}
body{font-family:'Satoshi',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2{text-wrap:balance}
h1,h2,h3,h4{font-family:'Clash Display','Satoshi',sans-serif;font-weight:600;line-height:1.06;letter-spacing:-.02em;word-spacing:.08em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.bg{position:fixed;inset:0;z-index:-2;background:var(--bg)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.03;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:focus-visible{outline:2px solid var(--blue-b);outline-offset:3px;border-radius:8px}
.eyebrow{display:inline-block;font-size:.95rem;font-weight:700;color:var(--blue-b)}

/* nav */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(7,11,28,.62);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;font-family:'Clash Display';font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.brand img{width:32px;height:32px;border-radius:9px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a:not(.btn){position:relative;font-size:.92rem;font-weight:500;color:var(--muted);transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--text)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue-b),var(--blue-2));transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:700;font-size:.95rem;padding:12px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .3s,background .25s,border-color .25s}
.btn-primary{background:linear-gradient(135deg,#2E76E8,#1C56C9);color:#fff;text-shadow:0 1px 1px rgba(0,18,52,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:linear-gradient(135deg,#3A82F0,#2462D4)}
.btn-ghost{background:var(--card);border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(91,168,255,.4)}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn-sm{padding:9px 18px;font-size:.88rem}
.btn:active{transform:translateY(0)}
.badge-btn{display:inline-flex;align-items:center;gap:13px;background:#fff;color:#06122b;padding:10px 26px 10px 18px;border-radius:15px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .25s var(--ease),box-shadow .3s}
.badge-btn:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.badge-btn:active{transform:translateY(0)}
/* Not a link until the App Store listing is live: a status, not a button. */
.badge-btn.soon{cursor:default;background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line);box-shadow:none}
.badge-btn.soon:hover{transform:none;box-shadow:none}
.badge-btn.soon small{color:var(--muted)}
.badge-btn .gl{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#2E76E8,#1C56C9)}
.badge-btn .gl svg{width:19px;height:19px}
.badge-btn .t{line-height:1.1;text-align:left}
.badge-btn small{display:block;font-size:.78rem;font-weight:500;color:#4a5878}
.badge-btn b{font-family:'Clash Display';font-size:1.15rem;font-weight:600;letter-spacing:-.01em}

/* home: recordings of the app (the Dynamic Island is in them), in a frame with the iPhone 17 Pro's screen proportions (1206×2622) and corner radius */
/* --fit: the width at which a frame (screen 1206×2622, plus the nav and a caption) fits the window's height */
:root{--fit:max(230px,calc((100svh - 230px) * .46))}
/* An iPhone 17 Pro in Deep Blue, everything scaled from the body width --w: the aluminium band (1.1%), the black glass
   edge (2.6%), the screen's corner (15.4% of its width), Action and volume buttons on the left, the side button and
   Camera Control on the right */
.device{--w:min(340px,var(--fit));--band:max(1.5px,calc(var(--w) * .011));--glass:calc(var(--w) * .026);
  --sr:calc((var(--w) - 2 * (var(--band) + var(--glass))) * .154);--btn:max(1.5px,calc(var(--w) * .009));
  position:relative;width:var(--w);padding:var(--glass);border:var(--band) solid transparent;
  border-radius:calc(var(--sr) + var(--glass) + var(--band));
  background:linear-gradient(#000,#000) padding-box,linear-gradient(150deg,#7d8db3 0%,#2b3653 16%,#435173 48%,#1d2439 78%,#62729a 100%) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 50px 90px -40px rgba(0,0,0,.95)}
.device::before,.device::after{content:"";position:absolute;width:var(--btn)}
.device::before{left:calc(-1 * var(--band) - var(--btn));top:15%;height:25%;border-radius:2px 0 0 2px;
  background:linear-gradient(#3d4a6b 0 18%,transparent 18% 32%,#3d4a6b 32% 60%,transparent 60% 68%,#3d4a6b 68% 96%,transparent 96%)}
.device::after{right:calc(-1 * var(--band) - var(--btn));top:24%;height:44%;border-radius:0 2px 2px 0;
  background:linear-gradient(#3d4a6b 0 26%,transparent 26% 77%,#2a3450 77% 100%)}
.device .scr{display:block;width:100%;height:auto;aspect-ratio:1206/2622;border-radius:var(--sr);background:#0d1128}
video.scr{object-fit:cover}
.device figcaption{position:absolute;left:-12%;right:-12%;top:calc(100% + 18px);text-align:center;font-size:.875rem;line-height:1.45;font-weight:500;color:var(--muted);text-wrap:balance}

.hero{display:grid;grid-template-columns:minmax(0,34rem) auto;justify-content:center;gap:clamp(56px,10vw,150px);align-items:center;padding-top:64px;padding-bottom:40px}
.hero h1{font-size:clamp(2.75rem,5.2vw,4.5rem);line-height:1.02;margin-bottom:24px;max-width:9.5em}
.lead{font-size:1.25rem;color:var(--soft);max-width:25em;margin-bottom:34px}
.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.meta{margin-top:22px;font-size:.875rem;color:var(--muted)}
.hero-shots{display:flex;justify-content:center}

.sec{padding:clamp(72px,12vh,128px) 0}
section[id]{scroll-margin-top:72px}
/* a demo row: the phone and its copy as one centred group, the phone side alternating down the page */
.row{display:grid;grid-template-columns:auto minmax(0,27rem);justify-content:center;gap:clamp(56px,8vw,120px);align-items:center}
.row.rev{grid-template-columns:minmax(0,27rem) auto}
.copy h2{font-size:clamp(2rem,3.4vw,2.75rem);margin-bottom:18px;max-width:12em}
.copy .sub{color:var(--soft);font-size:1.125rem;max-width:30em}
.pair{display:flex;justify-content:center;gap:32px;padding-bottom:44px}
.pair .device{--w:min(270px,var(--fit))}

.facts{margin-top:26px;display:grid;gap:0;max-width:32em}
.facts div{padding:14px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-family:'Clash Display';font-weight:600;font-size:1.125rem;margin-bottom:3px}
.facts dd{color:var(--soft);line-height:1.55}
.more{margin-top:24px}
.more a,.head-l .sub a{color:var(--blue-b);text-decoration:underline;text-decoration-color:rgba(91,168,255,.4);text-underline-offset:3px}

.head-l{max-width:640px;margin-bottom:48px}
.head-l h2{font-size:clamp(2.1rem,4.2vw,3.2rem);margin-bottom:14px}
.head-l .sub{color:var(--muted);font-size:1.1rem}

/* faq */
.faq{max-width:780px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Clash Display';font-weight:500;font-size:1.16rem;letter-spacing:-.01em;transition:color .2s}
.qa summary:hover{color:var(--cyan)}
.qa summary::-webkit-details-marker{display:none}
.qa .ic{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .35s var(--ease),background .3s;color:var(--blue-b)}
.qa[open] .ic{transform:rotate(45deg);background:rgba(60,147,247,.14)}
.qa .ic svg{width:13px;height:13px}
.qa .a{padding:0 0 24px;color:var(--muted);font-size:1.02rem;max-width:62ch}
.qa .a a{color:var(--blue-b);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(91,168,255,.4)}
.qa[open] .a{animation:fadeDown .4s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}}

.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-grid .head-l{position:sticky;top:96px;margin-bottom:0}

/* closing band */
.final{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:36px 40px;border-radius:var(--r);background:#0e1430;border:1px solid var(--line-2)}
.final img{width:64px;height:64px;border-radius:16px}
.final h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:6px}
.final p{color:var(--muted)}
.final-cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.final .beta{font-size:.9rem;color:var(--blue-b);text-decoration:underline;text-decoration-color:rgba(91,168,255,.35);text-underline-offset:3px}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:112px;padding:44px 0 56px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px 28px;flex-wrap:wrap}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:.9rem;transition:color .2s}.foot-links a:hover{color:var(--text)}
.foot-copy{color:#8492b6;font-size:.84rem}
.mail{user-select:all;-webkit-user-select:all;color:inherit}a.mail:hover{color:var(--text)}

/* document pages */
.doc-wrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:220px minmax(0,780px);gap:56px;justify-content:center;padding:0 28px}
.doc-wrap .doc{margin:0;padding-left:0;padding-right:0}
.toc{position:sticky;top:96px;align-self:start;margin-top:96px;font-size:.9rem}
.toc p{font-weight:700;color:var(--text);margin-bottom:10px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line-2)}
.toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted)}
.toc a:hover{color:var(--text);border-left-color:var(--blue-b)}
.toc a[aria-current]{color:var(--text);border-left-color:var(--blue);font-weight:600}
.doc h2[id]{scroll-margin-top:84px}
.doc{max-width:780px;margin:0 auto;padding:72px 28px 0}
.doc h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:16px 0 14px}
.doc .lede{color:var(--soft);font-size:1.15rem;margin-bottom:8px}
.doc .updated{color:var(--faint);font-size:.84rem;margin-bottom:12px}
.doc h2{font-size:1.5rem;margin:52px 0 16px;padding-top:34px;border-top:1px solid var(--line)}
.doc p,.doc li{color:var(--soft);font-size:1.02rem}
.doc p{margin-bottom:14px}
.doc a{color:var(--blue-b);text-decoration:underline;text-decoration-color:rgba(91,168,255,.35);text-underline-offset:3px}
.doc a:hover{text-decoration-color:var(--blue-b)}
.doc b{color:var(--text);font-weight:700}
.doc ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.doc ul li{position:relative;padding-left:22px}
.doc ul li::before{content:"";position:absolute;left:2px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--blue-b);box-shadow:0 0 8px rgba(91,168,255,.6)}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);margin-bottom:20px;-webkit-overflow-scrolling:touch}
.table{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;font-size:.82rem;color:var(--blue-b);padding:14px 16px;border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.table td{vertical-align:top;padding:16px;border-bottom:1px solid var(--line);color:var(--soft)}
.table tr:last-child td{border-bottom:0}
.table td:first-child{color:var(--text);font-weight:700;white-space:nowrap}
.note{margin-top:48px;padding:22px 24px;border-radius:var(--r-s);background:rgba(60,147,247,.07);border:1px solid rgba(91,168,255,.25)}
.note p{margin:0}
.steps-list{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.steps-list li{counter-increment:s;display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-s);background:var(--card);border:1px solid var(--line)}
.steps-list li::before{content:counter(s);flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:'Clash Display';font-weight:600;font-size:.9rem;color:#fff;background:linear-gradient(135deg,#2E76E8,#1C56C9)}
.steps-list li span{padding-top:2px}
.doc .faq{max-width:none}
.doc .qa p{color:var(--muted);padding-bottom:22px;margin:0}
.doc .qa summary{font-size:1.06rem}

/* responsive */
@media(max-width:1000px){
  .doc-wrap{display:block;padding:0}
  .doc-wrap .doc{margin:0 auto;padding-left:28px;padding-right:28px}
  .toc{display:none}
  .hero{grid-template-columns:1fr;padding-top:48px;gap:48px}
  .row,.row.rev{grid-template-columns:1fr;gap:56px;justify-items:center}
  .row .copy{justify-self:stretch}
  .row>.device,.row>.pair{order:2}
  .faq-grid{grid-template-columns:1fr;gap:40px}
  .faq-grid .head-l{position:static}
  .final{grid-template-columns:auto 1fr}
  .final-cta{grid-column:1/-1;align-items:flex-start}
}
@media(max-width:760px){
  .nav-links a:not(.btn){display:none}
  .wrap{padding:0 20px}.nav-in{padding:12px 20px}
  .sec{padding:88px 0}
  .hero h1{font-size:clamp(2.5rem,11vw,3.3rem)}
  .lead{font-size:1.0625rem}
  :root{--fit:max(220px,calc((100svh - 170px) * .46))}
  .row .device,.pair .device,.hero-shots .device{--w:min(78vw,320px,var(--fit))}
  .pair{flex-direction:column;align-items:center;gap:96px}
  .pair.duo{flex-direction:row;gap:14px}
  .pair.duo .device{--w:min(320px,calc((100vw - 54px) / 2))}
  .pair.duo figcaption{top:calc(100% + 14px)}
  .foot{margin-top:84px}
  .foot-in{flex-direction:column;align-items:flex-start}
  .doc{padding:48px 20px 0}
  .doc-wrap .doc{padding-left:20px;padding-right:20px}
  .final{grid-template-columns:1fr;text-align:left;padding:28px 22px}
  .table-scroll{overflow:visible;border:0;background:none}
  .table{min-width:0;font-size:.95rem}
  .table thead{display:none}
  .table tr{display:block;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);padding:6px 0}
  .table td{display:block;border:0;padding:8px 16px}
  .table td:first-child{white-space:normal;font-size:1.05rem}
  .table td[data-label]::before{content:attr(data-label);display:block;font-size:.8rem;font-weight:700;color:var(--blue-b);margin-bottom:2px}
}
@media(max-width:520px){
  .brand{font-size:1rem;gap:9px}
  .badge-btn{width:100%;justify-content:center}
}
@media(max-width:360px){
  .nav-in{gap:12px}
  .brand{font-size:.92rem;gap:8px}
  .brand img{width:28px;height:28px}
  .nav .btn-sm{padding-left:14px;padding-right:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

.qa summary,.brand,.badge-btn b{word-spacing:.08em}