/* The landing's styles, shared by the home page and the topic pages
   beside it (exams, news, speaking, teachers). One file, so a token
   moved here moves on every page at once. The legal pages keep their
   own glass sheet in legal.css. */
/* ============================================================
   LANGVIE - landing
   Extends the app's committed world: same ink, same pop yellow,
   same grain, same tracking. Archivo carries the display voice.
   Every screenshot is the real app; every cover is the one the
   app itself hangs on that film.
   ============================================================ */


:root{
  /* The greys carry the app's blue bias. A pure neutral beside the
     yellow read as soot; biasing the dark side cool makes the accent
     read warm without touching the accent itself. */
  --ink:#070A11; --stage:#111726; --riser:#182034; --riser-2:#212B44;
  --edge:#262F47; --edge-hi:#38445F;
  --pop:#FFD84D; --pop-d:#E0B92F; --salt:#F6F5F1;
  --dim:#8B8B93; --dimmer:#5E5E66;
  --know:#6EE7A0; --know-bg:#102C1E; --miss:#FF6B5A; --miss-bg:#35150F;

  --salt-2:#C9C7C0;
  --faint:#85858D;   /* smallest text: 5.4:1 on ink, 4.9:1 on stage */

  /* Light in the room. Two lamps, one warm and one cool, spilling at two
     strengths each. A wash spread over everything reads as a tint and
     disappears; a contained circle reads as a light that is somewhere. */
  --lift:rgba(150,190,255,.10);   /* where a raised surface meets the light */
  --bloom:rgba(255,216,77,.42);   /* the yellow, spilling */
  --bloom-lo:rgba(255,216,77,.20);
  --azure:rgba(74,124,255,.34);   /* the blue, spilling */
  --azure-lo:rgba(74,124,255,.16);
  --hair:rgba(200,212,235,.085);  /* a divider that is not a drawn rule */

  --display:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --grain: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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gap:clamp(84px, 11vw, 152px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scrollbar-color:var(--edge-hi) var(--ink); -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ink); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; color:var(--salt);
  /* Lamps hung down the length of the page, alternating sides, so the
     light arrives and leaves as you scroll rather than sitting pinned to
     the viewport. Positions are `at x% y%` inside each circle, which
     measures against this box; a background-position percentage would
     invert once the circle grew wider than the page. */
  background-color:var(--ink);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1100px 620px at 78% 1%,  rgba(255,216,77,.055), transparent 66%),
    radial-gradient(1000px 700px at 8%  6%,  rgba(74,124,255,.075), transparent 68%),
    radial-gradient(900px  640px at 96% 19%, rgba(74,124,255,.055), transparent 66%),
    radial-gradient(880px  560px at 4%  34%, rgba(255,216,77,.045), transparent 66%),
    radial-gradient(1000px 700px at 92% 47%, rgba(74,124,255,.06),  transparent 68%),
    radial-gradient(900px  620px at 6%  63%, rgba(255,216,77,.04),  transparent 66%),
    radial-gradient(1000px 660px at 88% 79%, rgba(74,124,255,.055), transparent 68%),
    radial-gradient(980px  600px at 14% 95%, rgba(255,216,77,.05),  transparent 68%);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; caret-color:var(--pop);
}
body::after{
  content:""; position:fixed; inset:0; background-image:var(--grain);
  opacity:.03; pointer-events:none; z-index:200;
}

::selection{ background:var(--pop); color:var(--ink); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--edge-hi); border-radius:99px; border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--dimmer); }
:focus-visible{ outline:2px solid var(--pop); outline-offset:3px; border-radius:4px; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
img,svg{ display:block; max-width:100%; }

h1,h2,h3{ font-family:var(--display); margin:0; text-wrap:balance; }
h1{ font-size:clamp(40px, 6.4vw, 78px); font-weight:800; font-stretch:104%; letter-spacing:-.045em; line-height:.97; }
h2{ font-size:clamp(28px, 4.1vw, 50px); font-weight:700; font-stretch:102%; letter-spacing:-.036em; line-height:1.04; }
h3{ font-size:20px; font-weight:680; letter-spacing:-.025em; line-height:1.25; }

p{ margin:0; }
.lead{ font-size:clamp(17px, 1.5vw, 20px); line-height:1.55; color:var(--salt-2); max-width:58ch; }
.body{ color:var(--dim); max-width:62ch; line-height:1.62; }
.body strong{ color:var(--salt-2); font-weight:600; }
.de{ font-style:italic; color:var(--salt); }
.data{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px, 4vw, 40px); }
section{ padding-block:var(--gap); position:relative; }
.rule{ height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, var(--edge) 18%, var(--edge) 82%, transparent); }

/* ---------- masthead ---------- */
.mast{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(7,10,17,.72);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.mast.stuck{
  border-bottom-color:var(--edge); background:rgba(7,10,17,.86);
  box-shadow:inset 0 1px 0 var(--lift), 0 18px 40px -30px rgba(0,0,0,.9);
}
.mast .wrap{ display:flex; align-items:center; gap:14px; height:62px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mk{ width:26px; height:26px; border-radius:7px; flex:none; filter:drop-shadow(0 0 10px var(--bloom-lo)); }
.brand .wd{ font-family:var(--display); font-weight:750; font-stretch:98%; font-size:17px; letter-spacing:-.035em; }
.mast .sp{ flex:1; }
.mlink{ font-size:13.5px; color:var(--dim); padding:8px 4px; transition:color .2s var(--ease); }
.mlink:hover{ color:var(--salt); }
@media (max-width:680px){ .mlink{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 24px; border-radius:var(--r-md);
  font-weight:640; font-size:15.5px; letter-spacing:-.012em;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .3s var(--ease);
}
.btn svg{ flex:none; }
.btn.pop{
  background:var(--pop); color:var(--ink);
  box-shadow:0 2px 0 var(--pop-d), 0 14px 26px -14px rgba(0,0,0,.9), 0 0 40px -6px var(--bloom-lo);
}
.btn.pop:hover{
  background:#FFE07A; transform:translateY(-2px);
  box-shadow:0 4px 0 var(--pop-d), 0 22px 34px -16px rgba(0,0,0,.95), 0 0 56px -4px var(--bloom);
}
.btn.pop:active{ transform:translateY(0); box-shadow:0 1px 0 var(--pop-d), 0 0 30px -8px var(--bloom-lo); }
.btn.ghost{ background:var(--riser); color:var(--salt); border:1px solid var(--edge); }
.btn.ghost:hover{ background:var(--riser-2); border-color:var(--edge-hi); transform:translateY(-2px); }
.btn.ghost:active{ transform:translateY(0); }

/* ---------- the phone ---------- */
.phone{
  position:relative; flex:none;
  width:min(300px, 78vw); aspect-ratio:393/852;
  border-radius:46px; padding:9px;
  background:linear-gradient(158deg, #3C3C43 0%, #1B1B1F 34%, #0E0E11 100%);
  box-shadow:
    0 60px 110px -46px rgba(0,0,0,.96),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 1px 0 rgba(255,255,255,.10) inset;
}
/* A lit screen spills onto whatever it is held against. Cool at the top
   where the card ground is, warm at the bottom where the yellow button
   sits, which is where the light in these shots actually comes from. */
.phone::before{
  content:""; position:absolute; z-index:-1; inset:-16% -44%;
  pointer-events:none;
  background:
    radial-gradient(44% 32% at 50% 27%, rgba(74,124,255,.30), transparent 74%),
    radial-gradient(52% 38% at 50% 79%, rgba(255,216,77,.24), transparent 78%);
  filter:blur(54px);
}
/* A phone that already fills most of the screen has no room either side
   to spill into, and the spread would push the page wider than it is. */
@media (max-width:700px){
  .phone::before{ inset:-11% -11%; filter:blur(40px); }
}
.phone img{ width:100%; height:100%; object-fit:cover; border-radius:38px; background:var(--ink); }
.phone.sm{ width:min(268px, 72vw); border-radius:42px; }
.phone.sm img{ border-radius:34px; }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(44px, 6vw, 76px); padding-bottom:clamp(60px, 8vw, 100px); overflow:hidden; }

/* a wall of the covers the app itself hangs, thrown far out of focus */
.wall{
  position:absolute; inset:-14% -6% auto -6%; height:132%;
  display:grid; grid-template-columns:repeat(8, 1fr); gap:14px;
  transform:rotate(-7deg) scale(1.16); transform-origin:50% 30%;
  filter:blur(13px) saturate(.95) brightness(.82);
  opacity:.58; pointer-events:none;
  -webkit-mask-image:radial-gradient(88% 74% at 62% 26%, #000 8%, transparent 74%);
          mask-image:radial-gradient(88% 74% at 62% 26%, #000 8%, transparent 74%);
}
.wall img{ width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; }
.wall .col{ display:grid; gap:14px; }
.wall .col:nth-child(even){ transform:translateY(-9%); }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 520px at 63% 26%, rgba(255,216,77,.14), transparent 68%),
    radial-gradient(880px 640px at 14% 62%, rgba(74,124,255,.13), transparent 70%),
    radial-gradient(520px 380px at 92% 8%,  rgba(74,124,255,.10), transparent 68%),
    linear-gradient(90deg, rgba(7,10,17,.95) 0%, rgba(7,10,17,.88) 34%, rgba(7,10,17,.52) 66%, rgba(7,10,17,.34) 100%),
    linear-gradient(180deg, rgba(7,10,17,.30) 0%, rgba(7,10,17,.62) 58%, var(--ink) 100%);
}
.hero .wrap{ position:relative; z-index:2; }

.hero-grid{ display:grid; gap:clamp(44px, 6vw, 72px); align-items:center; }
@media (min-width:940px){ .hero-grid{ grid-template-columns:minmax(0,1fr) auto; } }

.hero h1{ max-width:14ch; }
.hero .lead{ margin-top:24px; }
.cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center; }
.cta-note{ margin-top:16px; font-size:13.5px; color:var(--faint); }
.cta-note b{ color:var(--dim); font-weight:500; }
.hero-phone{ display:flex; justify-content:center; }

/* ---------- a lamp per section ----------
   The page lamps on <body> are a slow wash across the whole length. These
   are the near lights: one to a section, on the side the section's own
   content leaves empty, so the room changes as you go down rather than
   holding one gradient for eight thousand pixels. */
section{ position:relative; }
section > .wrap{ position:relative; z-index:1; }
#features::before, .sched::before, #films::before, #faq::before, .install::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
}
#features::before{
  background:
    radial-gradient(760px 620px at 88% 12%, rgba(255,216,77,.055), transparent 68%),
    radial-gradient(820px 700px at 6%  56%, rgba(74,124,255,.075), transparent 70%),
    radial-gradient(700px 560px at 94% 88%, rgba(74,124,255,.05),  transparent 68%);
}
.sched::before{
  background:
    radial-gradient(900px 520px at 84% 46%, rgba(255,216,77,.075), transparent 68%),
    radial-gradient(700px 520px at 4%  10%, rgba(74,124,255,.06),  transparent 70%);
}
#films::before{
  background:
    radial-gradient(880px 620px at 12% 8%,  rgba(74,124,255,.075), transparent 70%),
    radial-gradient(760px 600px at 92% 62%, rgba(255,216,77,.05),  transparent 68%);
}
#faq::before{
  background:radial-gradient(820px 620px at 86% 30%, rgba(74,124,255,.07), transparent 70%);
}
.install::before{
  background:
    radial-gradient(820px 640px at 50% 46%, rgba(255,216,77,.075), transparent 68%),
    radial-gradient(760px 620px at 6%  84%, rgba(74,124,255,.06),  transparent 70%);
}

/* ---------- trust strip ---------- */
.trust{ border-block:1px solid var(--edge); background:var(--stage); padding-block:0; }
.trust .wrap{
  display:grid; gap:1px; grid-template-columns:repeat(2, 1fr);
  background:var(--edge); border-inline:1px solid var(--edge);
  padding:0; max-width:1180px;
}
/* Six items divide evenly: two columns on phones, three from tablet up,
   so no row is left with a straggler at any width. */
@media (min-width:820px){ .trust .wrap{ grid-template-columns:repeat(3, 1fr); } }
.tr{
  background:
    radial-gradient(130% 100% at 14% 0%, rgba(74,124,255,.075), transparent 72%),
    radial-gradient(120% 96% at 88% 0%, rgba(255,216,77,.055), transparent 74%),
    var(--stage);
  box-shadow:inset 0 1px 0 var(--lift);
  padding:26px clamp(18px, 2.4vw, 28px);
  display:flex; gap:13px; align-items:flex-start;
}
.tr .ic{ filter:drop-shadow(0 0 9px var(--bloom-lo)); }
.tr .ic{ color:var(--pop); flex:none; margin-top:1px; }
.tr b{ display:block; font-size:14.5px; font-weight:660; letter-spacing:-.015em; }
.tr span{ display:block; margin-top:3px; font-size:13px; color:var(--dim); line-height:1.45; }

/* ---------- features ---------- */
.feat{ display:grid; gap:clamp(36px, 5vw, 72px); align-items:center; }
@media (min-width:900px){
  .feat{ grid-template-columns:minmax(0,1fr) auto; }
  .feat.flip .feat-txt{ order:2; }
  .feat.flip .feat-img{ order:1; }
}
.feat + .feat{ margin-top:var(--gap); }
.feat-img{ display:flex; justify-content:center; position:relative; }
.feat-img::before{
  content:""; position:absolute; inset:-4% -8%;
  background:
    radial-gradient(70% 44% at 50% 30%, rgba(74,124,255,.10), transparent 72%),
    radial-gradient(76% 48% at 50% 72%, rgba(255,216,77,.11), transparent 74%);
  pointer-events:none;
}
.feat-txt h2{ max-width:15ch; }
.feat-txt .body{ margin-top:20px; }
.flist{ margin:24px 0 0; padding:0; list-style:none; display:grid; gap:12px; }
.flist li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--dim); line-height:1.5; }
.flist li .ic{ color:var(--pop); flex:none; margin-top:3px; }
.flist li b{ color:var(--salt-2); font-weight:620; }

/* ---------- the ladder ---------- */
.rail{ margin-top:clamp(44px, 6vw, 72px); }
.rail-track{
  --railgap:clamp(10px, 1.6vw, 20px);
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:var(--railgap); position:relative;
}
.stop{ position:relative; padding-top:34px; }
/* the connector runs node centre to node centre, across the grid gap */
.stop::before{
  content:""; position:absolute; top:11px;
  left:6px; right:calc(-1 * (var(--railgap) + 6px)); height:1px; background:var(--edge);
}
.stop:last-child::before{ display:none; }
.stop .node{
  position:absolute; top:5px; left:0;
  width:13px; height:13px; border-radius:99px;
  background:var(--ink); border:2px solid var(--edge-hi);
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.rail.lit .stop .node{ border-color:var(--pop); box-shadow:0 0 13px -2px var(--bloom-lo); }
.rail.lit .stop.reset .node{ border-color:var(--miss); box-shadow:0 0 13px -2px rgba(255,107,90,.34); }
.rail.lit .stop:last-child .node{ background:var(--pop); border-color:var(--pop); box-shadow:0 0 22px 0 var(--bloom); }
.stop.reset .d{ color:var(--miss); }
.stop .d{ font-family:var(--display); font-size:clamp(26px, 3.4vw, 40px); font-weight:750; font-stretch:100%; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.stop .u{ margin-top:6px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.stop.forever .d{ color:var(--pop); text-shadow:0 0 30px var(--bloom-lo); }
@media (max-width:560px){
  .rail-track{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:28px; }
  .stop:nth-child(3n)::before{ display:none; }
  .stop .d{ font-size:22px; } .stop .u{ font-size:8.5px; letter-spacing:.08em; }
}
.rail-note{ margin-top:36px; }

/* ---------- covers ---------- */
.covers{
  margin-top:clamp(40px, 5.5vw, 64px);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px, 1.8vw, 22px);
}
@media (min-width:560px){ .covers{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:900px){ .covers{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
/* A grid item stretches to its row by default, and the row was measured
   short of what .shot's 2/3 aspect actually draws. So every tile was held
   115px under its own content, and the name and level sat outside the tile:
   hidden behind the next row of posters on every row but the last, and
   running down into the margin above the band on that one. Sized from its
   own content instead. */
.covers .film{ align-self:start; }
.film .shot{
  position:relative; aspect-ratio:2/3; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--edge); background:var(--riser);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.film .shot img{ width:100%; height:100%; object-fit:cover; }
.film:hover .shot{ transform:translateY(-6px); border-color:var(--edge-hi); box-shadow:0 26px 44px -26px rgba(0,0,0,.95), 0 0 44px -14px var(--azure); }
.film .shot::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.05; pointer-events:none; }
.film .nm{ margin-top:11px; font-size:14px; font-weight:620; letter-spacing:-.02em; line-height:1.3; }
.film .sub-l{ margin-top:3px; display:flex; gap:8px; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--faint); }
.film .sub-l .lv{ color:var(--pop); }

/* ---------- faq ---------- */
.faq{ margin-top:clamp(36px, 5vw, 56px); max-width:820px; border-top:1px solid var(--edge); }
.qa{ border-bottom:1px solid var(--edge); }
.qa summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:17px; font-weight:640; letter-spacing:-.02em; color:var(--salt);
  transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--pop); }
.qa summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:1.8px solid var(--dim); border-bottom:1.8px solid var(--dim);
  transform:rotate(45deg); transition:transform .3s var(--ease), border-color .2s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; border-color:var(--pop); }
.qa .a{ padding:0 0 24px; color:var(--dim); font-size:15px; line-height:1.62; max-width:66ch; }
.qa .a b{ color:var(--salt-2); font-weight:600; }

/* ---------- mid-page call to action ---------- */
.band{
  position:relative; overflow:hidden;
  margin-top:var(--gap);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(20px, 3vw, 44px);
  padding:clamp(26px, 3.4vw, 44px);
  border-radius:var(--r-lg); border:1px solid var(--edge);
  background:
    radial-gradient(660px 340px at 8% 0%,   rgba(255,216,77,.14), transparent 68%),
    radial-gradient(700px 400px at 96% 108%, rgba(74,124,255,.13), transparent 70%),
    var(--stage);
  box-shadow:inset 0 1px 0 var(--lift), 0 30px 60px -40px rgba(0,0,0,.9);
}
.band::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.04; pointer-events:none; }
.band .bt{ flex:1 1 320px; position:relative; }
.band h3{ font-size:clamp(21px, 2.5vw, 31px); font-weight:730; letter-spacing:-.032em; line-height:1.1; }
.band p{ margin-top:11px; color:var(--dim); font-size:15px; line-height:1.55; max-width:50ch; }
.band .ba{ position:relative; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- get it ---------- */
.grab{ margin-top:clamp(32px, 4vw, 46px); display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px, 3vw, 40px); }
.btn.big{ min-height:62px; padding:0 32px; font-size:17.5px; border-radius:16px; }
.btn[aria-disabled="true"]{
  background:var(--riser); color:var(--dim);
  border:1px solid var(--edge); box-shadow:none; cursor:not-allowed;
}
.btn[aria-disabled="true"]:hover{ background:var(--riser); transform:none; box-shadow:none; }
.grab-how{ font-size:14.5px; line-height:1.85; color:var(--dim); flex:1 1 320px; }
.grab-how b{ color:var(--salt); font-weight:640; }

/* Three columns: the promise on the left, the phone in the middle with
   its switch under it, and the steps on the right. The panel and its
   wrapper are display:contents so the phone and the steps land in their
   own columns rather than inside one box. [hidden] still wins, because
   .panel[hidden] outranks .panel. */
.ins-grid{ display:grid; gap:clamp(30px, 3.4vw, 52px); align-items:start; align-content:start; }
@media (min-width:1080px){
  /* The middle track is fixed rather than auto: an SVG sized width:100%
     inside an auto track resolves cyclically and the column ballooned. */
  /* Scoped to .ins-grid so these outrank the plain .demo-wrap and
     .stepdemo rules further down, rather than depending on order. */
  .ins-grid{ grid-template-columns:minmax(0,1fr) 212px minmax(0,1fr); }
  /* The left column spans both rows, so its height cannot push the
     switch away from the phone it belongs to. */
  .ins-grid .ins-say{ grid-column:1; grid-row:1 / 3; }
  .ins-grid .panel, .ins-grid .demo-wrap{ display:contents; }
  .ins-grid .stepdemo{ grid-column:2; grid-row:1; width:212px; max-width:none; }
  .ins-grid .demo-steps{ grid-column:3; grid-row:1; align-self:center; max-width:32ch; }
  /* justify-self, not auto margins, which grid placement was dropping */
  .ins-grid .switch{ grid-column:2; grid-row:2; justify-self:center; margin:clamp(18px, 2vw, 26px) 0 0; }
}

/* Stacked, the switch would land under the steps it controls. Put it
   above the walkthrough, where a choice belongs. */
@media (max-width:1079px){
  .ins-grid .ins-say{ order:1; }
  .ins-grid .switch{ order:2; margin:0 auto; }
  .ins-grid .panel{ order:3; }
}

.ins-say h2 + .lead{ margin-top:18px; }
.ins-say .btn{ margin-top:clamp(26px, 3vw, 36px); }
.get-note{ margin-top:14px; font-size:13.5px; color:var(--faint); }

.qr-img{
  margin-top:clamp(28px, 3.2vw, 38px);
  width:110px; height:110px; border-radius:12px;
  padding:8px; background:var(--salt);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.95);
}
/* Pointless on the device it would be telling you to point. */
@media (max-width:640px){ .qr-img{ display:none; } }

/* platform switch and the illustrated steps */
.switch{
  display:flex; gap:3px; padding:3px; width:max-content;
  margin:clamp(18px, 2vw, 26px) auto 0;
  border-radius:10px; background:var(--ink); border:1px solid var(--edge);
}
.switch button{
  min-height:32px; padding:0 14px; border-radius:7px;
  font-size:13px; font-weight:620; color:var(--dim);
  display:inline-flex; align-items:center; gap:7px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.switch button[aria-selected="true"]{ background:var(--riser-2); color:var(--salt); }
.switch button svg{ width:13px; height:13px; }

.panel{ margin-top:clamp(16px, 2vw, 24px); }
.panel[hidden]{ display:none; }
/* One drawing that plays the three steps, rather than three drawings
   side by side. It runs on a loop with no controls: a carousel asks the
   reader to operate it before they have decided they care. */
.demo-wrap{
  display:grid; gap:clamp(18px, 2.2vw, 26px);
  grid-template-columns:1fr; justify-items:center;
}
/* The phone is narrow enough to sit beside its steps once the column
   has the room, which stops the right side running past the left. */


.stepdemo{ width:100%; max-width:212px; height:auto; }

/* Each phase holds for 3s of a 9s loop, with a short crossfade. */
.stepdemo .ph{ opacity:0; animation:phase 5.1s infinite; }
.stepdemo .ph2{ animation-delay:1.7s; }
.stepdemo .ph3{ animation-delay:3.4s; }
@keyframes phase{
  0%   { opacity:0 }
  4%   { opacity:1 }
  33%  { opacity:1 }
  37%  { opacity:0 }
  100% { opacity:0 }
}

/* The ring pulses only while its own phase is on screen. */
/* The tap lands where the control is, and only while step two is up. */
.stepdemo .tap{ opacity:0; animation:tapIn 5.1s infinite 1.7s; }
/* Without transform-box, transform-origin:center resolves against the
   whole viewBox, so the tap scales away from the control it marks. */
.stepdemo .tap-dot{ transform-box:fill-box; transform-origin:center; animation:tapPress 5.1s infinite 1.7s; }
.stepdemo .tap-ripple{ transform-box:fill-box; transform-origin:center; animation:tapRipple 5.1s infinite 1.7s; }
@keyframes tapIn{ 0%{opacity:0} 4%{opacity:1} 30%{opacity:1} 34%,100%{opacity:0} }
@keyframes tapPress{ 0%,4%{transform:scale(1.25)} 12%{transform:scale(.8)} 24%,100%{transform:scale(1.05)} }
@keyframes tapRipple{ 0%,6%{transform:scale(.5);opacity:.9} 30%,100%{transform:scale(1.6);opacity:0} }

.demo-steps{ list-style:none; margin:0; padding:0; display:grid; gap:13px; max-width:34ch; }
.demo-steps li{
  display:flex; gap:14px; align-items:baseline;
  font-size:clamp(15px, 1.5vw, 17px); color:var(--dim);
  animation:stepOn 5.1s infinite;
}
.demo-steps .s1{ animation-delay:0s }
.demo-steps .s2{ animation-delay:1.7s }
.demo-steps .s3{ animation-delay:3.4s }
@keyframes stepOn{
  0%,3%    { color:var(--dim) }
  6%,33%   { color:var(--text) }
  38%,100% { color:var(--dim) }
}
.demo-steps .n{
  flex:none; width:26px; height:26px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:ui-monospace,monospace; font-size:12px;
  background:var(--stage); border:1px solid var(--edge); color:var(--dim);
}

/* Someone who asked for less movement gets the finished state, not a loop. */
@media (prefers-reduced-motion:reduce){
  .stepdemo .ph, .stepdemo .tap, .stepdemo .tap-dot, .stepdemo .tap-ripple, .demo-steps li{ animation:none; }
  .stepdemo .ph3{ opacity:1; }
  .stepdemo .ph3{ opacity:1 }
  .demo .ph1, .stepdemo .ph2{ opacity:0 }
}



/* the arrow that points at the control */
.aim{ animation:nudge 2.4s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(0,-5px); } }
.ring{ animation:pulse 2.4s var(--ease) infinite; transform-box:fill-box; transform-origin:center; }
@keyframes pulse{ 0%,100%{ opacity:.9; transform:scale(1); } 50%{ opacity:.45; transform:scale(1.14); } }
@media (prefers-reduced-motion:reduce){ .aim,.ring{ animation:none; } }

/* ---------- foot ---------- */
.foot{ padding-block:clamp(48px, 6vw, 72px) clamp(36px, 4vw, 52px); border-top:1px solid var(--edge); }
.foot-top{ display:grid; gap:clamp(28px, 4vw, 56px); }
@media (min-width:720px){ .foot-top{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } }
.foot-brand .brand{ display:inline-flex; }
.foot-say{ margin-top:14px; font-size:14px; color:var(--dim); line-height:1.6; max-width:38ch; }

.foot-nav{ display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; }
.foot-nav a{
  font-size:14px; color:var(--dim); padding:4px 0;
  transition:color .2s var(--ease);
}
.foot-nav a:hover{ color:var(--salt); }
.foot-go{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--pop) !important; font-weight:620;
  transition:gap .25s var(--ease);
}
.foot-go:hover{ gap:11px; }

.foot-legal{
  margin-top:clamp(30px, 3.6vw, 44px); padding-top:clamp(18px, 2.2vw, 26px);
  border-top:1px solid var(--edge);
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:baseline;
}
.foot-legal p{ font-size:12.5px; color:var(--faint); line-height:1.6; }
.foot-legal a{ font-size:12.5px; color:var(--faint); line-height:1.6; transition:color .2s var(--ease); }
.foot-legal a:hover{ color:var(--salt-2); }
.foot-made{ margin-left:auto; }
@media (max-width:560px){ .foot-made{ margin-left:0; } }

/* ---------- reveal ---------- */
.js .rv{ opacity:0; transform:translateY(22px); }
.js .rv.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .9s var(--ease); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js .rv{ opacity:1; transform:none; }
}

/* ---------- beyond the films ---------- */
#beyond::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(820px 640px at 90% 10%, rgba(74,124,255,.07),  transparent 70%),
    radial-gradient(760px 600px at 6%  52%, rgba(255,216,77,.05),  transparent 68%),
    radial-gradient(800px 620px at 92% 90%, rgba(74,124,255,.06),  transparent 70%);
}
.sec-head{ max-width:62ch; margin-bottom:var(--gap); }
.sec-head .lead{ margin-top:20px; }

/* A quiet link under a feature to the page that says more. Yellow only
   on the arrow: the yellow is spoken for by the buttons. */
.flink{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-size:14.5px; font-weight:620; color:var(--salt-2);
  border-bottom:1px solid var(--edge-hi); padding-bottom:3px;
  transition:color .2s var(--ease), border-color .2s var(--ease), gap .25s var(--ease);
}
.flink svg{ color:var(--pop); flex:none; }
.flink:hover{ color:var(--salt); border-color:var(--pop); gap:11px; }

/* ---------- the smaller parts ---------- */
.also{ margin-top:var(--gap); }
.also h3{ font-size:clamp(21px, 2.5vw, 31px); font-weight:730; letter-spacing:-.032em; line-height:1.1; }
.tiles{
  margin-top:clamp(26px, 3.4vw, 40px);
  display:grid; gap:1px; grid-template-columns:1fr;
  background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden;
}
@media (min-width:640px){ .tiles{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:980px){ .tiles{ grid-template-columns:repeat(3, 1fr); } }
.tile{
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(74,124,255,.06), transparent 70%),
    var(--stage);
  box-shadow:inset 0 1px 0 var(--lift);
  padding:24px clamp(18px, 2.2vw, 26px) 26px;
}
.tile .ic{ color:var(--pop); filter:drop-shadow(0 0 9px var(--bloom-lo)); }
.tile b{ display:block; margin-top:14px; font-size:15.5px; font-weight:660; letter-spacing:-.015em; }
.tile p{ margin-top:6px; font-size:14px; color:var(--dim); line-height:1.5; }
.tile a{ color:var(--salt-2); border-bottom:1px solid var(--edge-hi); }
.tile a:hover{ color:var(--salt); border-color:var(--pop); }

/* ---------- topic pages ---------- */
.topic-hero{ padding-top:clamp(44px, 6vw, 76px); padding-bottom:clamp(40px, 6vw, 80px); }
.topic-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 520px at 70% 20%, rgba(255,216,77,.10), transparent 68%),
    radial-gradient(880px 640px at 10% 60%, rgba(74,124,255,.11), transparent 70%);
}
.topic-hero h1{ max-width:16ch; font-size:clamp(36px, 5.4vw, 66px); }
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-bottom:22px; }
.crumb a:hover{ color:var(--salt-2); }
.prose{ max-width:68ch; }
.prose h2{ font-size:clamp(24px, 3vw, 36px); margin-top:clamp(44px, 5vw, 64px); }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-top:16px; color:var(--dim); line-height:1.66; }
.prose p b, .prose li b{ color:var(--salt-2); font-weight:600; }
.prose ul{ margin:16px 0 0; padding-left:20px; color:var(--dim); line-height:1.66; }
.prose li + li{ margin-top:6px; }
.table{ margin-top:22px; width:100%; border-collapse:collapse; font-size:14.5px; }
.table th, .table td{ text-align:left; padding:11px 12px 11px 0; border-bottom:1px solid var(--hair); vertical-align:top; }
.table th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); font-weight:500; }
.table td{ color:var(--dim); }
.table td:first-child{ color:var(--salt-2); font-family:var(--mono); font-size:13px; white-space:nowrap; }
.pair{ display:flex; flex-wrap:wrap; gap:clamp(18px, 3vw, 36px); justify-content:center; margin-top:clamp(40px, 5vw, 60px); }
.more-topics{ display:grid; gap:12px; margin-top:24px; }
@media (min-width:720px){ .more-topics{ grid-template-columns:repeat(3, 1fr); } }
.more-topics a{
  display:block; padding:18px 20px; border-radius:var(--r-md);
  background:var(--stage); border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 var(--lift);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.more-topics a:hover{ border-color:var(--edge-hi); transform:translateY(-2px); }
.more-topics b{ display:block; font-size:15px; font-weight:640; }
.more-topics span{ display:block; margin-top:4px; font-size:13.5px; color:var(--dim); }
/* Stacked, a pair is two screen heights before the first word of the
   page. One phone says it on a phone. */
@media (max-width:640px){ .pair .phone + .phone{ display:none; } }

/* ---------- the hero phone plays the four kinds of content ----------
   Four screens stacked in one frame, each up for 4s of a 16s loop with
   a short crossfade, and a row of labels under the phone that lights
   the one on screen. Someone who asked for less movement gets the
   first screen and all four labels at rest. */
.phone.cycle{ overflow:hidden; }
.phone.cycle img{ position:absolute; inset:9px; width:calc(100% - 18px); height:calc(100% - 18px); opacity:0; animation:cyc 16s infinite; }
.phone.cycle img:nth-child(1){ position:relative; inset:auto; width:100%; height:100%; animation-delay:0s; }
.phone.cycle img:nth-child(2){ animation-delay:4s; }
.phone.cycle img:nth-child(3){ animation-delay:8s; }
.phone.cycle img:nth-child(4){ animation-delay:12s; }
@keyframes cyc{ 0%{opacity:0} 3%{opacity:1} 25%{opacity:1} 28%{opacity:0} 100%{opacity:0} }
.hero-phone{ flex-direction:column; align-items:center; }
.cycle-tags{ list-style:none; margin:22px 0 0; padding:0; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.cycle-tags li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 10px; border-radius:99px; border:1px solid var(--hair); color:var(--faint);
  animation:tag 16s infinite;
}
.cycle-tags li:nth-child(2){ animation-delay:4s; }
.cycle-tags li:nth-child(3){ animation-delay:8s; }
.cycle-tags li:nth-child(4){ animation-delay:12s; }
@keyframes tag{
  0%,26%{ color:var(--ink); background:var(--pop); border-color:var(--pop); }
  28%,100%{ color:var(--faint); background:transparent; border-color:var(--hair); }
}
@media (prefers-reduced-motion:reduce){
  .phone.cycle img{ animation:none; }
  .phone.cycle img:nth-child(1){ opacity:1; }
  .cycle-tags li{ animation:none; }
}

/* The install walkthrough is drawn rather than shot, and it wears the
   same bezel and the same spill of light as the real screens beside it. */
.stepdemo{ filter:drop-shadow(0 40px 46px rgba(0,0,0,.85)); }
.ins-grid .stepdemo, .demo-wrap .stepdemo{ position:relative; }
.demo-wrap{ position:relative; }
.demo-wrap::before{
  content:""; position:absolute; left:50%; top:0; width:min(340px, 90vw); height:420px; transform:translateX(-50%);
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(44% 32% at 50% 27%, rgba(74,124,255,.26), transparent 74%),
    radial-gradient(52% 38% at 50% 79%, rgba(255,216,77,.20), transparent 78%);
  filter:blur(40px);
}
/* The value proposition runs to two clauses, so the hero headline is set
   a step smaller and wider than the section headings' display size. */
.hero h1{ max-width:19ch; font-size:clamp(34px, 4.9vw, 60px); line-height:1.02; }