/* Evolved Gorillas — Console direction.
   Homepage only. css/site.css still drives every project page and 404, and is
   untouched, so nothing here can regress them. */
:root{
  --ground:#08090B;
  --raise:#0F1115;
  --raise-2:#14171C;
  --line:#242028;
  --line-soft:#1B1822;
  --ink:#E9ECEF;
  --ink-2:#A8A3B5;
  --mute:#7D768A;
  --accent:#A98CF5;
  --accent-deep:#6D4FB8;
  --ok:#5FC48F;
  --wait:#D6A44F;
  /* the production gradient, carried over from css/site.css — one gradient
     for the whole site, used by .g and the primary button */
  --grad:linear-gradient(100deg,#F05EC2,#8B5CF6 50%,#38BDF8);
  --maxw:1160px;
  --gut:clamp(18px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ---- touch behaviour ----
   Holding a finger down drives the field, so iOS must not answer that hold
   with a selection highlight and a Copy callout. `manipulation` drops the
   double-tap zoom without touching pinch zoom, so the page can still be
   enlarged. Selection is switched back on for the legal documents below —
   that is text a reader may genuinely want to copy. */
body{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.container,.container *{
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  user-select:text;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;-webkit-user-drag:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--mute)}
.num{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---- the field ---- */
#field{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
.layer{position:relative;z-index:1}
#stage{
  position:fixed;left:var(--gut);bottom:20px;z-index:30;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  display:flex;align-items:center;gap:9px;
  background:rgba(8,9,11,.72);backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);border-radius:100px;padding:6px 13px 6px 11px;
}
#stage .tick{width:34px;height:2px;border-radius:2px;background:var(--line);position:relative;overflow:hidden;flex:none}
#stage .tick b{position:absolute;inset:0 auto 0 0;background:var(--accent);width:0;display:block}
#stage .no{color:var(--accent);font-variant-numeric:tabular-nums}
@media(max-width:560px){#stage{display:none}}

/* ---- nav ---- */
.nav{border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:40;background:rgba(8,9,11,.9);backdrop-filter:blur(14px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.brand{display:flex;align-items:center;gap:11px}

/* the mark, with a slow sheen travelling across it — the glow from the DUA
   intro, rebuilt so it costs one element and respects reduced motion */
.mark{position:relative;height:42px;width:auto;flex:none;display:block}
.mark img{height:42px;width:auto;display:block}
.mark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* masked to the mark itself, so the light travels across the gorilla
     and never streaks over the empty box around it */
  -webkit-mask:url("/assets/eg-face.png") center / contain no-repeat;
          mask:url("/assets/eg-face.png") center / contain no-repeat;
  background:linear-gradient(102deg,
    transparent 42%,
    rgba(255,255,255,.32) 47%,
    rgba(236,220,255,.95) 50%,
    rgba(199,125,255,.62) 53%,
    transparent 58%);
  background-size:300% 100%;
  background-position:130% 0;
  mix-blend-mode:screen;
  animation:sheen 6.5s ease-in-out 1.2s infinite;
}
@keyframes sheen{0%{background-position:130% 0}26%,100%{background-position:-130% 0}}
@keyframes sheen-slide{0%{transform:translateX(-140%)}26%,100%{transform:translateX(140%)}}
@media(prefers-reduced-motion:reduce){.mark::after{animation:none;opacity:0}}

.wm{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.74rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;display:flex;gap:.55em;white-space:nowrap}
.wm b{background:linear-gradient(96deg,#C77DFF,#8B5CF6 48%,#5B6BF0);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wm i{font-style:normal;color:#FFFFFF}
.nav-l{display:flex;gap:22px;align-items:center}
.nav-l a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.nav-l a:hover{color:var(--ink)}
@media(max-width:760px){.nav-l a.hidesm{display:none}.nav-l{gap:14px}}
@media(max-width:420px){.wm{font-size:.62rem;letter-spacing:.13em}.mark,.mark img{height:34px}}

/* ---- hero ---- */
.hero{padding:clamp(60px,9vw,120px) 0 clamp(38px,5vw,60px)}
h1{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(1.95rem,4.4vw,3.15rem);
  line-height:1.05;letter-spacing:-.035em;font-weight:700;max-width:21ch;text-wrap:balance;margin-top:16px}
/* the homepage statement outranks every page title, so it gets its own size.
   Scoped to .hero: .page-hero h1 on the product and lab pages is unchanged. */
.hero h1{font-size:clamp(2.2rem,6vw,4.4rem)}
.hero p{color:var(--ink-2);max-width:56ch;margin-top:18px}
.hero p.k{max-width:none;margin-top:0}   /* the eyebrow is a label, not prose */
.cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.btn{font-family:'Space Grotesk',system-ui,sans-serif;border-radius:999px;padding:12px 24px;font-size:.9rem;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.btn-main{background:var(--grad);color:#fff;box-shadow:0 6px 26px rgba(139,92,246,.32)}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 10px 34px rgba(240,94,194,.4)}
.btn-flat{border:1px solid var(--line);color:var(--ink);background:rgba(15,17,21,.6)}
.btn-flat:hover{border-color:var(--accent-deep);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---- status board ---- */
.board{border:1px solid var(--line);border-radius:12px;background:var(--raise);overflow:hidden}
.board-h{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--line-soft);background:var(--raise-2)}
.brow{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:16px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.brow:last-child{border-bottom:0}
.brow .nm{font-weight:600;font-size:.98rem}
.brow .nm small{display:block;color:var(--mute);font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;margin-top:4px;font-weight:400}
.brow .cell{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.79rem;color:var(--ink-2)}
.brow .cell b{display:block;color:var(--mute);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400;margin-bottom:3px}
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:100px;padding:5px 12px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.65rem;letter-spacing:.11em;
  text-transform:uppercase;border:1px solid var(--line);white-space:nowrap}
.chip i{width:6px;height:6px;border-radius:50%;display:block;background:currentColor}
.chip.ok{color:var(--ok);border-color:rgba(95,196,143,.32);background:rgba(95,196,143,.08)}
.chip.ok i{animation:blip 2.6s ease-in-out infinite}
.chip.wait{color:var(--wait);border-color:rgba(214,164,79,.3);background:rgba(214,164,79,.07)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.chip.ok i{animation:none}}
@media(max-width:820px){.brow{grid-template-columns:1fr 1fr;row-gap:14px}.brow .nm{grid-column:1/-1}}

/* ---- sections ---- */
.sec{padding:clamp(62px,9vw,116px) 0}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line)}
h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(1.3rem,2.5vw,1.8rem);letter-spacing:-.028em;font-weight:700}
/* a section intro that sits on the page rather than inside a grid panel */
.sec-lede{color:var(--ink-2);margin:-4px 0 24px}

/* ---- product panels ---- */
.pd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:start;
  padding:clamp(22px,3vw,32px);border:1px solid var(--line-soft);border-radius:12px;background:var(--raise)}
.pd + .pd{margin-top:16px}
.pd h3{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.35rem;letter-spacing:-.03em;font-weight:700}
.pd > div > p{color:var(--ink-2);margin-top:12px;font-size:.95rem}
/* a one-line claim standing above a longer description. Both contexts need
   naming explicitly: .pd > div > p and .cell3 p both outrank a lone .claim */
.pd > div > p.claim,
.cell-lead p.claim,
.page-hero p.claim{color:var(--ink);font-weight:600;font-size:1.06rem}
.page-hero p.claim{margin-top:14px;font-size:1.15rem}
.page-hero p.facts{margin-top:16px}
.pd > div > p.claim{margin-top:10px}
.cell-lead p.claim{margin-bottom:10px}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 22px;margin-top:22px;border-top:1px solid var(--line-soft)}
.spec div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.83rem}
.spec dt{color:var(--mute);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.67rem;letter-spacing:.11em;text-transform:uppercase}
.spec dd{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;text-align:right;font-variant-numeric:tabular-nums}
.pd .btn{margin-top:22px}
@media(max-width:760px){.pd{grid-template-columns:1fr}}

/* ---- homepage product card ----
   The icon, the name and the one-line claim form a header; the description and
   the buttons sit under it. Desktop is unchanged — the icon still spans the
   full height on the left. On a phone the card keeps two columns so the name
   sits beside the icon, instead of leaving a square of dead space next to it. */
.pd-card{row-gap:0}
.pd-card .appicon{grid-column:1;grid-row:1/span 2}
.pd-card .pd-id{grid-column:2;grid-row:1}
.pd-card .pd-body{grid-column:2;grid-row:2}
.pd-card .pd-id h3{margin-bottom:2px}
@media(max-width:760px){
  .pd-card{grid-template-columns:auto minmax(0,1fr);column-gap:16px}
  .pd-card .appicon{grid-row:1;align-self:center}
  .pd-card .pd-body{grid-column:1/-1;grid-row:2;margin-top:14px}
}

/* ---- app icon, standing in for a device shot on the homepage ----
   The artwork is a full-bleed square, so the rounding lives here. */
.appicon{
  position:relative;width:104px;height:104px;flex:none;display:block;
  /* a percentage, so the corners keep their proportion at every size */
  border-radius:28%;overflow:hidden;
  padding:1px;                    /* the rim the light travels along */
  background:var(--line);         /* the rim at rest */
  box-shadow:0 16px 34px -14px rgba(0,0,0,.85),   /* it sits on the page */
             0 0 26px -4px rgba(169,140,245,.34); /* and gives off a little light */
}
/* A light that travels around the border, rather than across the face like
   the sheen on .mark and .dev. A conic gradient turning behind the artwork
   reads as one bright point orbiting the rim; the square is oversized so the
   cone still covers the corners at every angle. */
.appicon::before{
  content:"";position:absolute;top:50%;left:50%;width:150%;height:150%;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,
    transparent 0 60%,
    rgba(199,125,255,.5) 73%,
    rgba(255,255,255,.95) 80%,
    rgba(91,107,240,.5) 87%,
    transparent 97%);
  animation:rim 5.5s linear infinite;
}
.appicon img{position:relative;width:100%;height:100%;display:block;border-radius:27.5%}
/* the two icons orbit out of phase, so the page never pulses in unison */
.pd + .pd .appicon::before{animation-delay:-2.75s}
@keyframes rim{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.appicon::before{animation:none;opacity:0}}
@media(max-width:760px){.appicon{width:82px;height:82px}}

/* the essentials line that replaced the spec table — not .k, because that
   uppercases and would print "IOS 17+" */
.facts{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.09em;color:var(--mute);margin-top:20px}

/* ---- device frame holding a real capture ---- */
.dev{
  width:168px;flex:none;aspect-ratio:9/19.5;border-radius:26px;padding:5px;
  background:#151119;border:1px solid #2A2333;
  box-shadow:0 22px 48px -16px rgba(0,0,0,.85);
  position:relative;overflow:hidden;
}
.dev img,.dev video{width:100%;height:100%;object-fit:cover;border-radius:22px;display:block;background:#000}
/* the same sheen, slower, reading as light moving over the glass */
.dev::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:26px;
  background:linear-gradient(102deg,transparent 40%,rgba(255,255,255,.10) 48%,rgba(199,125,255,.16) 52%,transparent 60%);
  transform:translateX(-140%);
  animation:sheen-slide 9s ease-in-out 2.4s infinite;
}
@media(prefers-reduced-motion:reduce){.dev::after{animation:none;opacity:0}}
@media(max-width:760px){.dev{width:186px}}

/* ---- screenshot viewer inside the phone frame ----
   Screenshots are the default state and the first one is marked .on in the
   markup, so the frame still works with no JavaScript. The intro video is
   layered over them only while it is actually playing. */
/* a fixed width, not min(): inside .pd's auto track a percentage has no
   definite size to resolve against and the frame collapses.
   155px gives a ~336px frame. */
.viewer{width:155px;max-width:100%;flex:none}
/* No fixed ratio: the first screenshot stays in flow and gives the frame its
   height, so the bezel matches the artwork exactly at any image size. */
.viewer .dev{width:100%;aspect-ratio:auto}
.viewer .dev .shot:first-of-type{position:relative;top:auto;left:auto;width:100%;height:auto}
/* .viewer .dev … outranks the older `.dev img{width:100%}`. Without that the
   width wins over `right`, the box is over-constrained, and the picture
   overhangs the right and bottom edges of the frame. */
/* Explicit size, not inset + auto. For a replaced element `width:auto` means
   its intrinsic width, so `right` is dropped as over-constrained and the
   picture hangs off the right edge of the frame. */
.viewer .dev .shot,.viewer .dev .intro{
  position:absolute;top:5px;left:5px;
  width:calc(100% - 10px);height:calc(100% - 10px);
  border-radius:22px;background:#000;
  opacity:0;transition:opacity .3s ease;
}
/* screenshots share the frame's ratio, so contain shows them whole; the intro
   is 16:9 and would letterbox into a band, so it fills instead */
.viewer .dev .shot{object-fit:contain}
.viewer .dev .intro{object-fit:cover}
.viewer .dev .shot.on{opacity:1}
.viewer.playing .dev .intro{opacity:1;z-index:2}
/* page indicator: the current screen is a bar, the rest are dots */
.dots{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:16px}
.dots button{width:6px;height:6px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:var(--line);transition:width .25s ease,background .25s ease}
.dots button:hover{background:var(--accent-deep)}
.dots button.on{width:20px;background:var(--accent)}
@media(prefers-reduced-motion:reduce){.dots button{transition:none}}
.replay{display:block;margin:13px auto 0;background:none;border:0;cursor:pointer;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);transition:color .2s}
.replay:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.dev .shot,.dev .intro{transition:none}}

/* a plain raised panel, for prose that should sit on a surface */
.panel{background:var(--raise);border:1px solid var(--line-soft);border-radius:12px;
  padding:clamp(22px,3vw,32px)}

/* ---- practice grid ---- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.cell3{background:var(--raise);padding:24px 22px}
.cell3 h4{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1rem;font-weight:600;margin-bottom:9px}
.cell3 p{color:var(--ink-2);font-size:.88rem}
.cell3 .k{margin-bottom:14px;display:block}
.cell3 a{color:var(--accent)}
/* a full-width cell at the top of the grid, so a section intro sits on the
   same panel as the cards it introduces rather than floating above them */
.cell-lead{grid-column:1/-1}
.cell-lead p{font-size:.95rem}
/* spanning to line -1 needs a known track count: auto-fit cannot collapse a
   track the lead cell occupies, and would leave an empty column beside the
   three cards */
#lab .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){#lab .grid3{grid-template-columns:1fr}}
#build .grid3{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){#build .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#build .grid3{grid-template-columns:1fr}}

/* ---- contact / footer ---- */
.end{border-top:1px solid var(--line-soft);padding:clamp(62px,10vw,124px) 0}
.end-in{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.end h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.035em;max-width:17ch}
.end .biz{color:var(--mute);font-size:.85rem;margin-top:14px}
.end-cta{display:flex;gap:11px;flex-wrap:wrap}
.end .biz a{color:var(--ink-2);border-bottom:1px solid var(--line)}
footer{padding:24px 0 46px}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a:hover{color:var(--ink)}

/* ================= product pages ================= */
.page-hero{padding:clamp(26px,4vw,44px) 0 clamp(30px,4vw,52px)}
.back{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:22px;padding:8px 15px 8px 12px;border-radius:100px;
  border:1px solid var(--line);background:var(--raise);
  transition:border-color .2s,transform .2s,color .2s;
}
.back .arw{font-size:1rem;line-height:1;transition:transform .2s}
.back:hover{border-color:var(--accent-deep);color:var(--ink)}
.back:hover .arw{transform:translateX(-3px)}
@media(prefers-reduced-motion:reduce){.back,.back .arw{transition:none}.back:hover .arw{transform:none}}
.page-hero h1{max-width:none}   /* a product name should not be broken across lines */
.page-hero p.lede{color:var(--ink-2);max-width:62ch;margin-top:16px}
.hero-links{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:26px}

/* Headline figures under a lab hero. These were a panel of four large cells
   that ate most of a phone screen for four short facts. As pills they carry
   the same numbers in one or two lines, and match the .facts chips. */
.figs{display:flex;flex-wrap:wrap;gap:5px;margin-top:20px}
/* child selector, not descendant: .v and .l are divs too, and a bare
   `.figs div` gave every pill a second pill inside it */
.figs > div{background:var(--raise);border:1px solid var(--line);border-radius:100px;
  padding:3px 11px;display:flex;align-items:baseline;gap:6px}
.figs .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;
  font-size:.72rem;letter-spacing:-.01em;color:var(--accent);font-variant-numeric:tabular-nums}
.figs .l{font-size:.64rem;color:var(--mute)}

/* prose */
.case{padding:clamp(44px,6vw,76px) 0 0}
.case h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.35rem;letter-spacing:-.025em;
  font-weight:700;margin-bottom:16px;display:flex;align-items:baseline;gap:12px}
.case h2 .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;color:var(--accent);letter-spacing:.1em}
.case p{color:var(--ink-2);margin-bottom:14px}
.case strong{color:var(--ink);font-weight:600}
.case ul{color:var(--ink-2);margin:0 0 16px 20px}
.case li{margin-bottom:8px}
.case a{color:var(--accent)}

/* screenshot strip */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:28px 20px;margin-top:8px}
.shots figure{margin:0}
.shots img{width:100%;display:block;border-radius:18px;border:1px solid var(--line);background:#000}
.shots figcaption{font-size:.8rem;color:var(--mute);margin-top:12px;line-height:1.45}
.shots figcaption b{display:block;color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;font-size:.9rem;margin-bottom:3px}
.shots-hint{display:none}
@media(max-width:640px){
  .shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 14px;
    scrollbar-width:none;-ms-overflow-style:none}
  .shots::-webkit-scrollbar{display:none}
  .shots figure{flex:0 0 200px;scroll-snap-align:center}
  .shots-hint{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
}

/* support */
.faq{display:grid;gap:20px;margin-top:8px}
.faq .q{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:1rem;color:var(--ink);margin:0 0 6px}
.faq .a{margin:0;color:var(--ink-2);max-width:68ch}
.support-card{border:1px solid var(--line);background:var(--raise);border-radius:12px;padding:22px 22px;margin-top:6px}
.support-card .lbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.65rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.support-card .big{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:1.08rem;word-break:break-word}
.support-card a{color:var(--ink);border-bottom:1px solid var(--accent-deep)}

/* ================= legal documents =================
   Kept on the same URLs Apple has on file. Styling only; the class names come
   from the original documents so the text stays exactly where it was. */
.container{max-width:820px;margin:0 auto;padding:clamp(28px,5vw,56px) var(--gut) clamp(60px,9vw,110px)}
.container h1{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(1.5rem,3.4vw,2.1rem);
  letter-spacing:-.03em;font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--accent-deep);margin-bottom:6px}
.container h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.16rem;letter-spacing:-.02em;
  font-weight:700;color:var(--ink);margin:34px 0 12px}
.container h3{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin:22px 0 8px;font-weight:500}
.container p{color:var(--ink-2);margin-bottom:12px;max-width:74ch}
.container strong{color:var(--ink);font-weight:600}
.container ul,.container ol{color:var(--ink-2);margin:0 0 14px 22px;max-width:72ch}
.container li{margin:7px 0}
.container a{color:var(--accent)}
.container .date{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem;
  color:var(--mute);font-style:normal;display:block;margin-bottom:22px}
.container .highlight,.container .warning,.container .disclaimer{
  border-radius:10px;padding:18px 20px;margin:22px 0;background:var(--raise);
  border:1px solid var(--line);border-left-width:3px;
}
.container .highlight{border-left-color:var(--wait)}
.container .warning{border-left-color:var(--wait)}
.container .disclaimer{border-left-color:#E07A6B}
.container .highlight h3{margin-top:0}
.container .good{color:var(--ok);font-weight:600}
.container .bad{color:#E07A6B;font-weight:600}
.container .footer{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-soft);
  text-align:center;color:var(--mute);font-size:.82rem}
.container .footer p{color:var(--mute);margin:0 auto 6px;max-width:60ch}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}

/* ================= slide deck (lab case studies) ================= */
.deck{position:relative;margin-top:34px}
.deck-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;border-radius:12px}
.deck-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;
  background:var(--raise);border:1px solid var(--line-soft);border-radius:12px;
  padding:clamp(28px,4vw,48px);min-height:290px;
  display:flex;flex-direction:column;justify-content:center;gap:13px}
.slide-kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.slide-big{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-.028em;
  line-height:1.14;font-size:clamp(1.35rem,3.2vw,2.05rem);max-width:26ch;overflow-wrap:break-word;text-wrap:balance}
.slide-text{color:var(--ink-2);font-size:.97rem;max-width:58ch;overflow-wrap:break-word}
.deck-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:rgba(15,17,21,.9);backdrop-filter:blur(6px);color:var(--ink);
  font-size:1rem;cursor:pointer;transition:border-color .2s;
  display:flex;align-items:center;justify-content:center}
.deck-btn:hover{border-color:var(--accent-deep)}
.deck-prev{left:12px}
.deck-next{right:12px}
.deck-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.deck-dots button{width:7px;height:7px;border-radius:50%;border:none;cursor:pointer;
  background:var(--line);transition:background .2s,transform .2s;padding:0}
.deck-dots button.active{background:var(--accent);transform:scale(1.3)}
@media(max-width:640px){.deck-btn{display:none}}
@media(prefers-reduced-motion:reduce){.deck-dots button{transition:none}}

/* gradient emphasis — the hero verb, and deck headlines on the lab pages */
.g{background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- the essentials line, as chips ----
   A run-on of "·" separators wrapped mid-phrase on a phone and read as one
   grey smear. Discrete pills wrap cleanly and stay scannable. */
.facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px;
  font-size:.6rem;letter-spacing:.04em}
.facts span{border:1px solid var(--line);border-radius:100px;padding:2px 8px;
  background:var(--raise);color:var(--mute);white-space:nowrap}

/* group labels inside a product feature list, so eight bullets read as three
   short lists rather than one wall */
.pd .grp{margin:20px 0 10px}
.pd .grp:first-of-type{margin-top:14px}
.pd ul{color:var(--ink-2);margin:0 0 0 20px}
.pd li{margin-bottom:9px}
.pd li:last-child{margin-bottom:0}

/* ================= mobile reading pass =================
   Scoped to small screens only — nothing here changes the desktop layout.
   The complaint it answers: at 390px the pages were dense walls of grey text
   with the most engaging element, the phone shot, shrunk to 155px. */
@media(max-width:640px){
  /* the eyebrow was breaking mid-phrase, e.g. "LIVE ON THE APP / STORE" */
  .k{letter-spacing:.11em}

  /* prose: slightly larger, noticeably airier, and no orphaned last lines */
  .case p,.panel p,.cell3 p{font-size:1.02rem;line-height:1.68}
  .case p{margin-bottom:17px;text-wrap:pretty}
  .case ul{margin-bottom:18px}
  .case li{margin-bottom:11px;line-height:1.6}

  /* sections floated on black with nothing marking where one ended and the
     next began; a rule under each heading gives the scroll some structure */
  .case{padding-top:38px}
  .case > .wrap > h2{padding-bottom:12px;border-bottom:1px solid var(--line-soft)}

  /* The phone shot, sized by height rather than width: these are 9:19.5
     captures, so 185px across lands the frame about 400px tall — roughly
     2.7in on a phone. Big enough to read, short enough not to own the screen. */
  .viewer{width:min(185px,48vw);margin-inline:auto}

  /* the claim carries the page's thesis, but at 1.15rem bold it was running
     to three lines and reading as a second headline */
  .page-hero p.claim{font-size:1.05rem}

  /* Vertical space is the scarcest thing on a phone. These gaps were tuned
     for a 1160px page and stacked up to a dead screenful between the hero
     and the first real content. */
  .page-hero{padding-bottom:16px}
  .hero-links{margin-top:20px}
  .figs{margin-top:16px}
  .deck{margin-top:18px}
  .slide{min-height:0;padding:24px 20px}
  .back{margin-bottom:16px}
  h1{margin-top:10px}
  .page-hero p.lede{margin-top:12px}

  /* legal documents are the longest reads on the site */
  .container p,.container li{font-size:1.02rem;line-height:1.68}
  .container li{margin:9px 0}
}