/* ============================================================================
   native-dev.com: the home page, /legal and the 404.

   Structure after apple.com: full-width product sections stacked with a 12px
   gap, centred type, two buttons each, the product underneath; then a grid of
   tiles two to a row. Visuals after the apps: each section is drawn in its own
   app's world and set in its own app's typeface.

     NativeScan  Paper #F7F4EE / Chamber #151217, ink #1C1A17, indigo #4A54D6
                 for action, violet #7E5BDD for AI, serif voice (New York).
     Mirror      key art from the App Store listing, ink #24 2B45, palette
                 ice/blue/lime/pink, CTA gradient #5069CC to #E01059,
                 Parkinsans.

   Product fields are static colours: they do not flip with the page scheme,
   so their inks are static too. Only the page, the studio strip and the
   document pages follow light and dark.
   ========================================================================= */

:root{
  --page:#FFFFFF;
  --ink:#1D1D1F;
  --ink-2:#6E6E73;          /* 4.6:1 on white, Apple's secondary grey */
  --line:#D2D2D7;
  --link:#0066CC;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sys-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* NativeScan (NATIVESCAN_DESIGN_LANGUAGE.md) */
  --ns-paper:#F7F4EE;
  --ns-chamber:#151217;
  --ns-ink:#1C1A17;
  --ns-ink-2:#625C53;       /* 5.7:1 on paper */
  --ns-soft:#8A847A;        /* large serif only: 3.4:1 on paper */
  --ns-indigo:#4A54D6;      /* white on it: 6.4:1 */
  --ns-indigo-text:#3B44C4; /* 6.6:1 on paper */
  --ns-violet-text:#5B3FB0; /* 7.6:1 on paper */
  --ns-paper-white:#F3EFE7;
  --ns-violet-soft:#A78BFA;
  --ns-serif:ui-serif,"New York","Iowan Old Style","Apple Garamond",Georgia,"Times New Roman",serif;

  /* Mirror (MirrorColor.swift) */
  --mi-ink:#242B45;
  --mi-ink-2:#3A4160;
  --mi-cta:linear-gradient(90deg,#5069CC 0%,#E01059 100%);
  --mi-pink-soft:#F994B8;
  --mi-face:"Parkinsans",-apple-system,BlinkMacSystemFont,sans-serif;

  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{ --page:#000000; --ink:#F5F5F7; --ink-2:#A1A1A6; --line:#424245; --link:#2997FF }
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{
  margin:0; background:var(--page); color:var(--ink);
  font:400 17px/1.47 var(--sys); letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; height:auto }
a{ color:var(--link) }
a:focus-visible,.btn:focus-visible{ outline:2px solid #0071E3; outline-offset:3px; border-radius:999px }
h1,h2,h3,p{ margin:0 }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

.skip{
  position:absolute; left:12px; top:-80px; z-index:100;
  padding:10px 16px; border-radius:10px;
  background:var(--ink); color:var(--page); font-weight:600; text-decoration:none;
}
.skip:focus{ top:12px }

/* ── Buttons, Apple's two-pill pattern in each app's colours ─────────────── */
.cta-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; margin-top:22px }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 22px; border-radius:999px;
  font:500 17px/1 var(--sys); letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  transition:filter .2s var(--ease-out), background-color .2s var(--ease-out);
}
.btn--sm{ min-height:38px; padding:0 18px; font-size:15px }
.btn:hover{ filter:brightness(1.06) }
.btn--ns{ background:var(--ns-indigo); color:#fff }
.btn--ns-ghost{ color:var(--ns-indigo-text); box-shadow:inset 0 0 0 1.5px var(--ns-indigo) }
.btn--mi{ background:var(--mi-cta); color:#fff }
.btn--mi-ghost{ color:var(--mi-ink); box-shadow:inset 0 0 0 1.5px var(--mi-ink) }
.btn--light{ background:#EAF0FA; color:#0E153C }

/* ── Product sections ────────────────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; text-align:center }
.hero + .hero{ margin-top:12px }
.hero__copy{ position:relative; z-index:2; padding:clamp(44px,6vw,64px) 20px 0 }
.app-icon{
  width:72px; height:72px; margin:0 auto 18px; border-radius:16px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 8px 20px -8px rgba(0,0,0,.28);
}
.hero__name{
  font:600 clamp(2.5rem,1.6rem + 3vw,3.5rem)/1.07 var(--sys-display);
  letter-spacing:-.005em;
}
.hero__line{ margin:6px auto 0; max-width:22ch; text-wrap:balance }
.hero__fine{ margin-top:16px; font-size:14px; letter-spacing:-.01em }

/* NativeScan's Paper world, washed the way its App Store art is. */
.hero--ns{
  background:
    radial-gradient(58% 48% at 16% 14%,rgba(180,166,238,.42),transparent 70%),
    radial-gradient(50% 42% at 88% 26%,rgba(247,205,184,.42),transparent 70%),
    var(--ns-paper);
  color:var(--ns-ink);
}
.ns-voice{ font-family:var(--ns-serif); font-weight:400; letter-spacing:-.01em }
.hero--ns .hero__line{ font-size:clamp(1.65rem,1.05rem + 2vw,2.6rem); line-height:1.1 }
.ns-voice .soft{ color:var(--ns-soft) }
.hero--ns .hero__fine{ color:var(--ns-ink-2) }

.hero__art--ns{
  position:relative; height:clamp(330px,40vw,560px); margin-top:clamp(28px,3.4vw,44px);
  --w:clamp(176px,21vw,292px);
}
.ph{
  position:absolute; top:0; left:50%;
  width:var(--w); aspect-ratio:600 / 1301;
  border:calc(var(--w) * .03) solid #1C1A17; border-radius:calc(var(--w) * .155);
  overflow:hidden; background:#000;
  box-shadow:0 34px 60px -28px rgba(28,26,23,.55);
}
.ph img{ width:100%; height:100% }
.ph--front{ transform:translateX(-50%); z-index:2 }
.ph--side{ width:calc(var(--w) * .86); top:calc(var(--w) * .2); z-index:1 }
.ph--side{ border-width:calc(var(--w) * .86 * .03); border-radius:calc(var(--w) * .86 * .155) }
.ph--left{ transform:translateX(calc(-50% - var(--w) * .74)) }
.ph--right{ transform:translateX(calc(-50% + var(--w) * .74)) }

/* Mirror, on the stage from its App Store listing. The copy sits on the
   key art's own top edge colours, and the art fades up into them. */
.hero--mi{
  background:linear-gradient(90deg,#B597BD 0%,#C7A6CF 28%,#D2B3DE 50%,#BDA7DA 72%,#A19FD4 100%);
  color:var(--mi-ink);
}
.hero__name--mi{ display:flex; justify-content:center }
.mi-wordmark{ width:auto; height:clamp(46px,4.6vw,60px) }
.mi-voice{ font-family:var(--mi-face); font-weight:800; letter-spacing:-.02em }
.hero--mi .hero__line{ font-size:clamp(1.5rem,1rem + 1.8vw,2.3rem); line-height:1.12; margin-top:14px }
.hero--mi .hero__fine{ color:var(--mi-ink-2) }
/* The whole stage, never a crop of Mira: she is never cut off. Its top and
   sides fade into the section colour so there is no seam. */
.hero__art--mi{ width:min(100%,880px); margin:clamp(-36px,-2vw,-8px) auto 0; aspect-ratio:1536 / 1024 }
.hero__art--mi img{
  width:100%; height:100%; object-fit:cover;
  transform:translateX(13%);   /* Mira stands left of centre in the key art; centre her under the type */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,transparent 0,#000 16%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-composite:intersect;
}
@media (max-width:40rem){ .hero__art--mi{ width:140%; margin-left:-20% } }
.mi-voice .soft{ color:var(--mi-ink-2) }

/* ── The two apps, side by side on the first screen ──────────────────────
   Wide screens: two equal panels filling the first screen, each its own app
   world, art anchored to the bottom. Narrow screens: stacked, with the first
   panel kept short so Mirror starts on the first screen too. */
.duo{ display:grid; gap:12px }
.duo .hero + .hero{ margin-top:0 }
@media (max-width:59.99rem){
  .duo .hero__copy{ padding-top:30px }
  .duo .app-icon{ width:56px; height:56px; border-radius:13px; margin-bottom:12px }
  .duo .hero__name{ font-size:clamp(2.1rem,1.6rem + 2vw,2.8rem) }
  .duo .hero--ns .hero__line{ font-size:clamp(1.45rem,1.1rem + 1.4vw,2rem) }
  .duo .hero--mi .hero__line{ font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem); margin-top:10px }
  .duo .cta-row{ margin-top:18px }
  .duo .hero__fine{ margin-top:12px }
  .duo .hero__art--ns{ height:clamp(190px,40vw,320px); margin-top:24px; --w:clamp(150px,30vw,230px) }
}
@media (min-width:60rem){
  .duo{ grid-template-columns:1fr 1fr; padding:12px 12px 0 }
  .duo .hero{ display:flex; flex-direction:column; min-height:min(880px,calc(100svh - 70px)) }
  .duo .hero__copy{ padding:clamp(48px,4.2vw,64px) 28px 28px }
  .duo .hero__name{ font-size:clamp(2.5rem,1.6rem + 1.5vw,3.2rem) }
  .duo .hero--ns .hero__line{ font-size:clamp(1.55rem,1rem + 1vw,2.15rem) }
  .duo .hero--mi .hero__line{ font-size:clamp(1.4rem,.9rem + .95vw,1.95rem) }
  .duo .hero__art{ margin-top:auto }
  /* The phones take whatever height Mirror's panel sets, start under the copy
     and run off the bottom edge, so neither panel has dead space. */
  .duo .hero__art--ns{ flex:1 0 auto; height:auto; min-height:300px; margin-top:0; --w:clamp(178px,18.5vw,330px) }
  .duo .hero__art--mi{ width:100%; margin-bottom:0 }
}

/* ── The grid ────────────────────────────────────────────────────────────── */
.grid{
  display:grid; grid-template-columns:1fr; gap:12px;
  padding:12px 0;
}
@media (min-width:52rem){ .grid{ grid-template-columns:1fr 1fr; padding:12px } }
.tile{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; text-align:center;
  min-height:clamp(500px,46vw,640px);
}
.tile__copy{ position:relative; z-index:2; padding:clamp(40px,4.4vw,52px) 22px 0 }
.tile__app{ font:600 14px/1.2 var(--sys); letter-spacing:0 }
.tile__name{
  margin-top:6px;
  font:600 clamp(2rem,1.55rem + 1.4vw,2.5rem)/1.08 var(--sys-display); letter-spacing:-.005em;
}
.tile__name.mi-voice{ font-family:var(--mi-face); font-weight:800; letter-spacing:-.02em }
.tile__line{ margin:8px auto 0; max-width:26ch; font-size:clamp(1.05rem,.95rem + .4vw,1.3rem); line-height:1.3; text-wrap:balance }
.tile__line.ns-voice{ font-size:clamp(1.3rem,1.05rem + .8vw,1.65rem); line-height:1.16 }
.tile__fine{ margin-top:8px; font-size:14px }
.tile .cta-row{ margin-top:20px }
.tile__art{ position:relative; flex:1 1 auto; margin-top:clamp(24px,3vw,36px); min-height:240px }

.tile__art--phone .ph{ --w:clamp(176px,17vw,236px); transform:translateX(-50%) }

/* NativeScan's Chamber: warm near-black, violet for the AI. */
.tile--chamber{
  background:radial-gradient(60% 46% at 50% 92%,rgba(126,91,221,.38),transparent 72%),var(--ns-chamber);
  color:var(--ns-paper-white);
}
.tile--chamber .tile__app{ color:var(--ns-violet-soft) }
.tile--chamber .tile__line{ color:rgba(243,239,231,.86) }
.tile--chamber .ph{ border-color:#2A2530; box-shadow:0 30px 70px -20px rgba(126,91,221,.45) }

/* NativeScan's Paper, two washes. */
.tile--paper,.tile--paper2{ color:var(--ns-ink) }
.tile--paper{ background:radial-gradient(70% 50% at 50% 100%,rgba(180,166,238,.40),transparent 70%),var(--ns-paper) }
.tile--paper2{ background:radial-gradient(70% 55% at 50% 100%,rgba(247,205,184,.50),transparent 70%),var(--ns-paper) }
.tile--paper .tile__app,.tile--paper2 .tile__app{ color:var(--ns-violet-text) }
.tile--paper .tile__fine{ color:var(--ns-ink-2) }

/* Mirror's privacy key art: the navy stage. */
.tile--dome{ background:#0E153C; color:#EAF0FA }
.tile--dome .tile__app{ color:var(--mi-pink-soft) }
.tile--dome .tile__line{ color:#C3CCE4 }
.tile__art--bleed{ margin-top:8px }
.tile__art--bleed img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 70%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 30%);
}

/* Mira with the streak flame, on the black of her widget renders. */
.tile--flame{ background:#000; color:#F7F2EA }
.tile--flame .tile__app{ color:var(--mi-pink-soft) }
.tile--flame .tile__line{ color:rgba(247,242,234,.82) }
.tile__art--flame{ display:flex; justify-content:center; align-items:flex-start; margin-top:12px }
.tile__art--flame img{ width:clamp(230px,22vw,300px); height:auto; margin-bottom:-18% }

/* NativeScan guides: sheets of paper, titles in the app's serif. */
.tile__art--sheets{ display:flex; justify-content:center }
.sheet{
  position:absolute; top:10px; left:50%;
  width:clamp(168px,15vw,206px); aspect-ratio:3 / 4;
  padding:18px 16px; border-radius:6px;
  background:#FFFFFF; color:var(--ns-ink); text-align:left;
  box-shadow:0 1px 0 rgba(28,26,23,.06),0 18px 36px -18px rgba(28,26,23,.35);
  display:flex; flex-direction:column; gap:9px;
}
.sheet__k{ font:600 11px/1 var(--sys); color:var(--ns-violet-text); letter-spacing:.02em }
.sheet b{ font:400 17px/1.18 var(--ns-serif); letter-spacing:-.01em }
.sheet i{ display:block; height:5px; border-radius:3px; background:#ECE7DD }
.sheet i:nth-of-type(2){ width:82% } .sheet i:nth-of-type(3){ width:64% }
.sheet--0{ transform:translateX(calc(-50% - 74%)) rotate(-7deg); top:34px }
.sheet--1{ transform:translateX(-50%); z-index:2 }
.sheet--2{ transform:translateX(calc(-50% + 74%)) rotate(6deg); top:30px }
@media (max-width:40rem){
  .sheet{ width:150px; padding:14px 12px }
  .sheet b{ font-size:14px }
  .sheet--0{ transform:translateX(calc(-50% - 62%)) rotate(-7deg) }
  .sheet--2{ transform:translateX(calc(-50% + 62%)) rotate(6deg) }
}

/* Mirror's reading side: the objects the app ships, on its ice-to-pink field. */
.tile--objects{
  background:linear-gradient(155deg,#DAF5F9 0%,#E9EEFB 48%,#FFD1E4 100%);
  color:var(--mi-ink);
}
.tile--objects .tile__app{ color:#B5164E }
.tile--objects .tile__line{ color:var(--mi-ink-2) }
.tile__art--objects .o{ position:absolute; height:auto; filter:drop-shadow(0 16px 22px rgba(36,43,69,.18)) }
.o--sun{ width:clamp(108px,11vw,150px); left:50%; top:4%; transform:translateX(-50%) }
.o--flask{ width:clamp(70px,7vw,96px); left:18%; top:30% }
.o--droplet{ width:clamp(66px,6.6vw,90px); right:18%; top:28% }
.o--molecule{ width:clamp(150px,15vw,210px); left:50%; bottom:12%; transform:translateX(-50%) }
.o--sparkle{ width:clamp(56px,5.4vw,74px); right:30%; top:4% }

/* One quiet entrance: the hero products rise once, on load. */
@media (prefers-reduced-motion:no-preference){
  .hero__art--ns .ph,.hero__art--mi img{ animation:rise 1s var(--ease-out) both }
  .hero__art--ns .ph--side{ animation-delay:.08s }
}
@keyframes rise{ from{ opacity:0; translate:0 26px } }

/* ── The studio, last and short ──────────────────────────────────────────── */
.studio{ text-align:center; padding:clamp(48px,6vw,72px) 22px clamp(52px,6vw,80px) }
.studio .st-mark{ height:26px; width:auto; margin:0 auto 14px }
.studio h2{
  font:600 clamp(1.125rem,1.05rem + .35vw,1.375rem)/1.3 var(--sys-display); letter-spacing:-.005em;
  max-width:32ch; margin:0 auto; text-wrap:balance;
}
.studio p{ margin:6px auto 0; max-width:58ch; color:var(--ink-2); font-size:15px; overflow-wrap:anywhere }

/* ── /legal and /404 ─────────────────────────────────────────────────────── */
.doc{ padding:clamp(40px,7vw,96px) 0 clamp(64px,9vw,120px) }
.h-wrap{ max-width:1024px; margin:0 auto; padding:0 22px }
.doc__in{ max-width:920px }
.doc h1{ font:600 clamp(2.25rem,1.5rem + 3vw,3.5rem)/1.06 var(--sys-display); letter-spacing:-.005em }
.doc h2{ font:600 1.3rem/1.2 var(--sys-display); margin-bottom:12px }
.doc__lead{ margin-top:14px; font-size:clamp(1.1rem,1rem + .4vw,1.3rem); color:var(--ink-2); max-width:52ch }
.doc__cols{ margin-top:clamp(32px,5vw,56px); display:grid; gap:36px }
@media (min-width:48rem){ .doc__cols{ grid-template-columns:1fr 1fr; gap:48px } }
.doc__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.doc__list li{ border-bottom:1px solid var(--line) }
.doc__list a{ display:flex; align-items:center; min-height:50px; color:var(--ink); font-weight:500; text-decoration:none }
.doc__list a:hover{ text-decoration:underline }
.doc__list--plain{ margin-top:28px; max-width:560px }
.doc__list--plain li{ padding:14px 0 }
.doc__list--plain a{ display:inline; min-height:0; color:var(--link); text-decoration:underline }
.doc__notice{ margin-top:clamp(40px,6vw,64px); padding-top:clamp(28px,4vw,40px); border-top:1px solid var(--line); max-width:68ch }
.doc__notice p{ color:var(--ink-2); margin-top:12px }
.doc__notice p:first-of-type{ margin-top:0 }
.doc__aside{ margin-top:12px; color:var(--ink-2); font-size:15px }