/* The design system of coachaiofficial.com (the home page redesign approved
   2026-10-15): Ink, Bone and one Signal red; headlines in Montserrat
   ExtraBold caps, labels in JetBrains Mono, body in Montserrat; Caveat (bold)
   only for the handwritten notes; photos in black and white with a light
   grain (tooling/site_assets.py makes them).

   A page that uses it links, in this order:
     /site.css      tokens, type, buttons, surfaces, the page top (hero and intro), cards, phone frame, reveal
     /<page>.css    what only that page has (the home page: /home.css)
     /footer.css    the shared header, footer and store buttons (every page)
   and carries in <head>  <script>document.documentElement.classList.add('js')</script>
   so the reveal and the scroll effects only hide things when a script is
   there to show them again. Without a script every page reads top to bottom
   in its final state. The shared script (i18n:sitescript) does the smooth
   wheel scroll and the reveal on scroll. */

@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-400.woff2?v=edfa0c9ba0") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-500.woff2?v=7e4d9f395e") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-600.woff2?v=1c10ed94ba") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-700.woff2?v=dc58d0ca6a") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-800.woff2?v=2fa15d50ef") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-400.woff2?v=804f0fadfa") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-600.woff2?v=c9e543d9ff") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-700.woff2?v=8b9ba2bcf9") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat";src:url("/assets/fonts/caveat-700.woff2?v=6455d2133f") format("woff2");font-weight:700;font-display:swap}
/* Fallbacks shaped like the web fonts (size and line metrics measured from our woff2 files
   against Arial / Courier New), so the swap to the real font moves nothing on the page. */
@font-face{font-family:"Montserrat Fallback";src:local("Arial");font-weight:400;size-adjust:109.40%;ascent-override:88.48%;descent-override:22.94%;line-gap-override:0.00%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial");font-weight:500;size-adjust:110.78%;ascent-override:87.38%;descent-override:22.66%;line-gap-override:0.00%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial");font-weight:600;size-adjust:112.33%;ascent-override:86.17%;descent-override:22.34%;line-gap-override:0.00%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial Bold");font-weight:700;size-adjust:109.15%;ascent-override:88.68%;descent-override:23.00%;line-gap-override:0.00%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial Bold");font-weight:800;size-adjust:110.87%;ascent-override:87.31%;descent-override:22.64%;line-gap-override:0.00%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New");font-weight:400;size-adjust:99.98%;ascent-override:102.02%;descent-override:30.00%;line-gap-override:0.00%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New Bold");font-weight:600;size-adjust:99.98%;ascent-override:102.02%;descent-override:30.00%;line-gap-override:0.00%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New Bold");font-weight:700;size-adjust:99.98%;ascent-override:102.02%;descent-override:30.00%;line-gap-override:0.00%}

:root{
  --ink:#0B0B0B; --ink-2:#1A1A19; --bone:#F2EEE7; --bone-2:#E6E1D8; --white:#fff;
  /* Signal red. --sig-base is the brand red (white text on it: 4.6:1). On ink it
     reads 4.3:1 and ink text on it too, short of WCAG AA 4.5:1, so on ink and
     on red surfaces --sig is the hair lighter --sig-hi (4.9:1 both ways); small
     red text on bone is the darker --sig-lo (5.2:1 on bone, 4.6:1 on bone-2).
     Fills and big headline words use --sig, small red text uses --sig-text. */
  --sig-base:#D93A15; --sig-hi:#E9411A; --sig-lo:#B83112;
  --sig:var(--sig-base); --sig-text:var(--sig-lo);
  --muted-d:rgba(242,238,231,.62); --muted-l:#5d5a55; --text-l:#2e2c29;
  --line-l:rgba(11,11,11,.16); --line-d:rgba(242,238,231,.16);
  --gut:40px; --max:1440px;
  --head:"Montserrat","Montserrat Fallback",ui-sans-serif,system-ui,sans-serif;
  --body:"Montserrat","Montserrat Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --label:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,Menlo,Consolas,monospace;
  --mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,Menlo,Consolas,monospace;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
@media(max-width:760px){:root{--gut:16px}}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);font-weight:500;font-size:16px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased;hyphens:none;-webkit-hyphens:none}
body.on-ink{background:var(--ink);color:var(--bone);color-scheme:dark}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.shell{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr,.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;left:16px;top:12px;transform:translateY(-160%);background:var(--bone);color:var(--ink);padding:12px 18px;font-family:var(--label);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.nw{white-space:nowrap}

/* ---------- Type ---------- */
/* .hd: poster headline. Never hyphenated, never broken inside a word: long
   words (German, Polish) get a smaller clamp() on their own page instead. */
.hd{font-family:var(--head);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.025em;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:keep-all}
.hd .s,.s{color:var(--sig)}
.lb .s,.mono .s{color:var(--sig-text)}
.hand{font-family:var(--hand);font-weight:700;text-transform:uppercase;letter-spacing:.015em;line-height:1;display:inline-block;transform:rotate(-6deg);white-space:nowrap}
.lb{font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;line-height:1.2}
.mono{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lede{font-size:17px;line-height:1.5;max-width:470px}
.mark{font-family:var(--label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.mark i{font-style:normal;color:var(--sig-text)}
@media(max-width:760px){.lede{font-size:16px}}

/* ---------- Buttons: square poster buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:2px solid currentColor;font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.04em;line-height:1.15;text-transform:uppercase;text-align:center;transition:transform .2s ease,background-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn-bone{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-line-ink{color:var(--ink)}
.btn-line-bone{color:var(--bone)}
.tlink{border-bottom:2px solid var(--sig);padding-bottom:1px;transition:color .2s}
.tlink:hover{color:var(--sig-text)}
.sig-surface .tlink{border-bottom-color:currentColor}
.sig-surface .tlink:hover{color:inherit;opacity:.75}
/* promo code block (only while tooling/site_promo.py is live) */
.promo{margin-top:36px;max-width:34em;padding-top:20px;border-top:2px solid currentColor}
.promo-k{font-size:12px}
.promo-t{margin-top:10px;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:1;font-size:clamp(24px,2.4vw,34px)}
.sig-surface .promo-t .s{color:var(--bone)}
.promo-row{margin-top:18px;display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.promo-code{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;border:2px dashed currentColor;font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:.16em;line-height:1;-webkit-user-select:all;user-select:all;cursor:text}
.promo-copy{display:none;align-items:center;justify-content:center;min-height:52px;min-width:150px;padding:0 20px;border:2px solid var(--ink);background:var(--ink);color:var(--bone);font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .2s ease,background-color .2s,color .2s}
.js .promo-copy{display:inline-flex}
.promo-copy:hover{transform:translateY(-1px)}
.promo-copy.is-done{background:transparent;color:var(--ink)}
.ink .promo-copy{border-color:var(--bone);background:var(--bone);color:var(--ink)}
.promo-c,.promo-w{margin-top:12px;font-size:15px;line-height:1.5;max-width:34em}
.promo-c{font-weight:600}
.ulink{display:inline-block;font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid currentColor;padding:6px 0 2px}
.arrow{width:48px;height:48px;border:2px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s,opacity .2s}
.arrow:hover{background:var(--ink);color:var(--bone)}
.arrow:disabled{opacity:.25;cursor:default;background:transparent;color:var(--ink)}
.arrows{display:flex;gap:8px}

/* ---------- Surfaces ---------- */
section{position:relative}
.bone{background:var(--bone);color:var(--ink)}
.ink{background:var(--ink);color:var(--bone)}
.sig-surface{background:var(--sig);color:var(--ink)}
/* the signal shade follows the surface (see the tokens) */
body.on-ink,.ink,.sig-surface,.on-dark{--sig:var(--sig-hi);--sig-text:var(--sig-hi)}
.bone{--sig:var(--sig-base);--sig-text:var(--sig-lo)}
/* a red focus ring vanishes on a red surface */
.sig-surface :focus-visible{outline-color:var(--ink)}
.sec{padding:120px 0}
.sec.bone + .sec.bone{border-top:1px solid var(--line-l)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px}
.sec-head .hd{font-size:clamp(56px,6.4vw,104px)}
.sec-head .lede{margin-top:20px;color:var(--muted-l)}
.ink .sec-head .lede{color:var(--muted-d)}
.sec-tools{display:flex;align-items:center;gap:18px;flex:none}
@media(max-width:760px){
  .sec{padding:84px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:28px}
  .sec-head .hd{font-size:clamp(34px,10.6vw,60px)}
  .sec-head .arrows{display:none}
}

/* ---------- Page top: the hero and the intro every section page starts with
   (tooling/site_hero.py writes the markup; the Programs pages set the look) ---------- */
/* Headlines that always fit: .cq is the column a headline measures; --lw
   (written by the generator) is the width of the headline's longest unbreakable
   chunk in em, so the size never makes a word break or overflow, in any language. */
.cq{container-type:inline-size}
.fit{font-size:min(var(--fs,64px),calc(100cqi / var(--lw,8)));line-height:.96}
/* the B/W photo edge to edge, the H1 over its lower left */
.page-top{position:relative;background:var(--ink)}
.page-hero{position:relative;display:flex;align-items:flex-end;min-height:min(92vh,860px);min-height:min(92svh,860px);overflow:hidden;background:var(--ink);color:var(--white)}
.page-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* each page's photo carries its own object-position (the face, from tooling/data/site_photos.json) */
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(11,11,11,.78) 0%,rgba(11,11,11,.5) 38%,rgba(11,11,11,.08) 70%,rgba(11,11,11,0) 86%),linear-gradient(to bottom,rgba(11,11,11,.55) 0%,rgba(11,11,11,0) 24%),linear-gradient(to top,rgba(11,11,11,.6) 0%,rgba(11,11,11,0) 40%)}
.page-hero-text{position:relative;z-index:2;padding-top:140px;padding-bottom:76px}
.page-hero .crumbs{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 30px;padding:0;list-style:none;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.page-hero .crumbs li{display:inline-flex;align-items:center}
.page-hero .crumbs li+li::before{content:"/";margin:0 10px;color:rgba(255,255,255,.45)}
.page-hero .crumbs a{display:inline-block;padding:4px 0;margin:-4px 0;color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.page-hero .crumbs a:hover{text-decoration-color:#fff}
.page-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#fff}
.page-hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sig);flex:none}
.page-hero h1{--fs:clamp(52px,6.6vw,112px);max-width:15em;margin-top:20px;line-height:1;color:#fff}
/* the eyebrow inside the H1 (site_hero h1_lead, /app): the same line and gaps */
.page-hero-text > .crumbs + h1{margin-top:0}
.page-hero h1 > .page-hero-eyebrow{display:flex;width:fit-content;margin:0 0 20px;font-size:12px;line-height:1.2}
.page-hero-meta{margin-top:24px;color:rgba(255,255,255,.88);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
/* the Bone intro under it: the lede, and beside it whatever the page puts there
   (the program pages: their facts) */
.page-intro{padding:110px 0}
.page-intro-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:start}
.page-lede{max-width:640px;font-size:clamp(20px,1.75vw,25px);line-height:1.45;font-weight:500;color:var(--ink);text-wrap:pretty}
.page-lede-wide{max-width:980px;font-size:clamp(21px,2.1vw,30px)}
@media(max-width:1100px){.page-intro-in{grid-template-columns:minmax(0,1fr);gap:48px}}
/* with a phone (owner, 2026-10-22/23): the text a little narrower; the text
   alone sets the block's height, with a plain gap under it (--ib), and on the
   right a real screen of the app that starts --pt below the block's top and
   is clipped by its bottom edge. The phone's box takes the row's height
   (container-type:size, so the phone never stretches the block) and the
   phone is sized from it (79cqh: about 62% of the phone shows), so the
   window is the same share of the screen on every page. --sy scrolls the
   screen inside the phone (a share of its height, per screen in
   tooling/site_hero.py) so the window lands on what the page talks about. */
.page-intro.page-intro--phone{--ip:110px;--ib:84px;--pt:44px;padding:var(--ip) 0 var(--ib);overflow:hidden}
.page-intro--phone .page-intro-in{grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:96px;align-items:stretch}
.page-intro--phone .page-lede-wide{max-width:860px}
.page-intro-text{min-width:0}
/* what the phone beside the lede shows (site_hero.CAPTIONS), in grey right under it */
.page-intro-text > .page-phone-cap{margin-top:16px;max-width:36em;font-size:15px;line-height:1.5;color:var(--muted-l)}
.page-intro-text > * + *{margin-top:40px}
.page-intro-phone{position:relative;container-type:size;min-height:300px;margin:calc(var(--pt) - var(--ip)) 0 calc(-1 * var(--ib))}
/* --pw is the phone's width: the frame's padding (3.6% in /site.css .dev) is
   taken from it here, since a % padding would follow the column, not the phone */
.page-intro-phone .dev{--pw:clamp(240px,79cqh,360px);position:absolute;top:max(0px,calc(100cqh - var(--pw) * 2.04 * .85));left:50%;width:var(--pw);height:auto;padding:calc(var(--pw) * .036);aspect-ratio:300/612;transform:translateX(-50%);box-shadow:0 0 0 1.5px #2a2a28 inset,0 24px 56px rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.14)}
.page-intro-phone .scr{background:#FBFBF9}
.page-intro-phone .scr img{transform:translateY(calc(var(--sy, 0) * -100%))}
@media(max-width:760px){.page-intro-phone .scr img{transform:translateY(calc(var(--sy-m, var(--sy, 0)) * -100%))}}
/* tablets keep the two columns, with a smaller phone; one column only on phones */
@media(max-width:1100px){
  .page-intro--phone .page-intro-in{grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:48px}
  .page-intro-phone .dev{--pw:clamp(200px,79cqh,280px)}
}
@media(max-width:760px){
  .page-intro.page-intro--phone{--ip:72px;--ib:56px}
  .page-intro--phone .page-intro-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .page-intro-text > * + *{margin-top:28px}
  .page-intro-phone{height:340px;min-height:0;margin:0 0 calc(-1 * var(--ib))}
  .page-intro-phone .dev{--pw:clamp(220px,79cqh,72vw)}
}
@media(max-width:760px){
  .page-hero{min-height:86vh;min-height:86svh}
  .page-hero::after{background:linear-gradient(to bottom,rgba(11,11,11,.6) 0%,rgba(11,11,11,.25) 30%,rgba(11,11,11,.5) 58%,rgba(11,11,11,.9) 100%)}
  .page-hero-text{padding-top:110px;padding-bottom:40px}
  .page-hero .crumbs{margin-bottom:22px;font-size:11px}
  .page-hero .crumbs li[aria-current]:not(:first-child + li){display:none}
  .page-hero h1{--fs:clamp(34px,10.4vw,60px);margin-top:16px}
  .page-hero h1 > .page-hero-eyebrow{margin-bottom:16px}
  .page-hero-meta{margin-top:18px;font-size:12px}
  .page-intro{padding:72px 0}
}
/* print: a plain black heading, without the photo and the trail */
@media print{
  .page-hero .crumbs,.page-hero-eyebrow{display:none!important}
  .page-top,.page-hero,.page-intro{background:none!important;color:#000!important;border:0!important;padding:0!important;min-height:0!important}
  .page-hero{display:block;overflow:visible}
  .page-hero::after,.page-hero-img{display:none!important}
  .page-hero-text{position:static;padding:0}
  .page-hero h1{max-width:none;margin:0;color:#000;font-size:30px!important;text-shadow:none}
  .page-hero-meta{margin-top:8px;color:#333}
  .fit{font-size:22px!important}
  .page-intro-in{display:block}
  .page-intro-phone{display:none!important}
  .page-lede{max-width:none;margin-top:10px;font-size:13px;color:#000}
}

/* ---------- B/W photo card (3:4) and the row the reader moves ---------- */
.card{flex:none;scroll-snap-align:start;width:calc((min(100vw,var(--max)) - 2 * var(--gut) - 3 * 20px) / 3.3)}
.card a{display:block}
.card .ph{position:relative;overflow:hidden;background:var(--ink);aspect-ratio:3/4}
.card .ph > img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.card:hover .ph > img{transform:scale(1.04)}
.card .tag{position:absolute;z-index:2;right:12px;top:12px;background:var(--sig-base);color:var(--white);padding:6px 10px 5px}
.card-name{font-size:clamp(24px,2.4vw,36px);margin-top:16px}
.card-meta{color:var(--muted-l);margin-top:10px}
.ink .card-meta{color:var(--muted-d)}
.track{--lead:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));position:relative;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gut) 0 var(--lead);scroll-padding:0 var(--gut) 0 var(--lead);overscroll-behavior-x:contain;list-style:none;margin:0;outline:none}
.track::-webkit-scrollbar{display:none}
.js .track{cursor:grab;user-select:none;-webkit-user-select:none}
.track:focus-visible{outline:2px solid var(--sig);outline-offset:4px}
.track.dragging,.track.gliding{cursor:grabbing;scroll-snap-type:none}
.track a,.track img{-webkit-user-drag:none}
.js .track img{pointer-events:none}
@media(max-width:1100px){.card{width:calc((100vw - 2 * var(--gut) - 20px) / 2.3)}.card-name{font-size:clamp(24px,3.4vw,34px)}}
@media(max-width:760px){.track{gap:14px}.card{width:72vw}.card-name{font-size:clamp(24px,7.6vw,32px);margin-top:14px}.card-meta{margin-top:8px}}

/* ---------- Phone frame (the screen inside keeps its own colours) ---------- */
.dev{position:relative;height:100%;width:100%;padding:3.6%;background:#050505;border-radius:13% / 6.3%;box-shadow:0 0 0 1.5px #2a2a28 inset,0 30px 70px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.35)}
.dev::before{content:"";position:absolute;z-index:2;top:2.6%;left:50%;width:30%;height:3.1%;transform:translateX(-50%);background:#050505;border-radius:999px}
.dev .scr{height:100%;width:100%;border-radius:10.5% / 5.2%;overflow:hidden;background:#000}
.dev .scr img{width:100%;height:100%;object-fit:cover;object-position:top}
/* A fan of app screens (tooling/site_code_shots.py fan_html): each phone carries --x (a share of its
   width), --r (its turn) and --z; the box is as tall as a turned phone needs */
.cta-fan{position:relative;flex:none;width:clamp(300px,32vw,460px);aspect-ratio:1/1.12}
.cta-fan .fan-ph{position:absolute;top:50%;left:50%;z-index:var(--z,1);width:50%;aspect-ratio:1080/2290;transform:translate(-50%,-50%) translateX(calc(var(--x,0) * 100%)) rotate(var(--r,0deg))}
.cta-fan .dev{box-shadow:0 0 0 1.5px #2a2a28 inset,0 34px 70px rgba(11,11,11,.36),0 10px 22px rgba(11,11,11,.26)}
@media(max-width:760px){.cta-fan{width:min(340px,86vw);margin:0 auto}}

/* ---------- The closing "get the app" block, one for every section page (tooling/site_cta.py) ---------- */
.cta{padding:120px 0 130px;overflow:hidden}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:center}
.cta-copy{min-width:0;container-type:inline-size}
.cta-l{margin:0 0 20px;color:var(--ink)}
.cta-l .s,.cta h2 .s{color:var(--bone)}
/* --cta-em is the widest word in em: the headline never gets wider than its column lets that word be */
.cta h2{font-size:min(clamp(44px,4.8vw,84px),calc(100cqi / var(--cta-em,8)));max-width:13em;text-wrap:balance}
.cta-p{margin-top:24px;max-width:32em;font-size:18px;line-height:1.5;color:var(--ink)}
.cta-free{margin-top:18px;font-size:13px;font-weight:700;color:var(--ink)}
.cta .get-app{margin-top:28px}
@media(max-width:1100px){.cta-in{grid-template-columns:minmax(0,1fr);row-gap:48px}.cta-in > .cta-fan{justify-self:center}}
@media(max-width:760px){.cta{padding:84px 0 92px}.cta h2{font-size:min(clamp(34px,10.4vw,60px),calc(100cqi / var(--cta-em,8)))}.cta-p{font-size:16px;margin-top:20px}}
@media print{.cta{display:none!important}}

/* ---------- How to get the app (site_i18n.get_app): the QR on a wide screen, the store buttons on a phone
   (a QR cannot be scanned by the phone showing it), as the home hero does ---------- */
.get-qr{display:inline-flex;align-items:center;gap:20px;color:inherit;text-decoration:none}
.get-qr .qr-tile{width:132px;height:132px;flex:none;box-shadow:0 10px 30px rgba(11,11,11,.18)}
.get-qr:hover .qr-tile{transform:translateY(-2px)}
.get-qr .qr-cap{display:grid;gap:12px;max-width:220px}
.get-qr .qr-cap .mono{font-size:12px;line-height:1.45;color:var(--ink)}
.get-qr .qr-os{display:flex;gap:12px}
.get-qr .qr-os svg{width:20px;height:20px;fill:var(--ink);opacity:.75}
.get-app .get-stores{display:none}
@media(max-width:899px){.get-qr{display:none}.get-app .get-stores{display:flex}}

/* ---------- QR tile (desktop and tablet; phones get the store buttons) ---------- */
.qr-tile{display:block;width:168px;height:168px;padding:4px;background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.4);transition:transform .25s ease}
.qr-tile img{width:100%;height:100%;image-rendering:pixelated}

/* ---------- Reveal on scroll (only with the script: .js) ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}

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