/* The site look (DESIGN.md, the d1 design Christian chose 10/31), shared by every page except the home page:
   how it works, your data, about, security, contact, terms, privacy policy and the 404. Loaded right after /style.css,
   which still gives the markup its bones (nav, buttons, fields, FAQ rows, footer). The home page keeps its own copy of
   these values inline and does not load this file. 11/1 Christian: "you need to update the whole website not just the
   home page". A port to the locked spec, not an exploration.

   A white page, Newsreader headlines with one italic word, Instrument Sans body, ink text, Ramp's hairlines, warm-grey
   tiles with no border (never a grid of bordered boxes), one dot-grid canvas per page at most, one dark band that
   closes the page, and no grey explaining text. */

:root{
  /* ================= LIME: the one accent. Every lime on these pages reads one of the role tokens below, so how
     strongly lime is used is set here, for the whole site, and nowhere else.
       --accent-action  the main action's fill: every "Join the waitlist" button (.btn-lime)
       --accent-mark    what Riley did and where you are: the number underline (.lime-ul), the highlighter (.lime-mark),
                        the swipe on each headline's italic key word, the scroll-progress line under the nav
       --accent-glow    the waitlist button's breathing glow
       --accent-field   the lime field that closes the page (.band), and the ink button's text on it
     11/1 Christian ("L1 + L4's motion", DESIGN.md "Lime"): the same lime language as the home page. The motion is
     /lime.js (loaded by /site.js). To quiet lime, point a role at something else, e.g. --accent-mark:transparent or
     --accent-field:#111113. Lime is a FILL, a field, a line or a glow: never text on white, never inside an app frame. */
  --lime-h:73.7; --lime-s:87.6%; --lime-l:58.8%;   /* = #C8F23A */
  --glow:1;                                         /* the glow's colour strength (its layer breathes in opacity) */
  --lime:hsl(var(--lime-h) var(--lime-s) var(--lime-l));
  --lime-hi:hsl(var(--lime-h) var(--lime-s) calc(var(--lime-l) + 5%));
  --lime-glow:hsl(var(--lime-h) var(--lime-s) var(--lime-l) / var(--glow));
  --on-lime:#0B0C0A;
  --accent-action:var(--lime); --accent-action-hi:var(--lime-hi);
  --accent-mark:var(--lime);
  --accent-glow:var(--lime-glow);
  --accent-field:var(--lime);
  /* the motion's tuning, the same values as the home page's (index.html, the LIME block) */
  --hl-top:.48em; --hl-bot:.06em; --hl-pad:.08em; --hl-tilt:-.8deg;
  --kw-dur:.9s; --kw-delay:.35s; --kw-ease:cubic-bezier(.65,.05,.25,1);
  --field-dur:1.05s; --field-ease:cubic-bezier(.7,0,.2,1); --field-r:28px;
  --glow-cycle:2.4s; --glow-rest:.38; --glow-peak:.9;

  /* the rest of the home page's tokens (DESIGN.md section 2) */
  --ink:#111113; --text:#111113; --bg:#fff;
  --canvas:#F4F2EF; --surface:var(--canvas);
  --dot:rgba(33,33,33,.17); --dot-gap:16px;
  --grey:rgba(17,17,19,.60);                /* the footer only (4.9:1 on white) */
  --line:rgba(33,33,33,.10); --line-2:rgba(33,33,33,.16);
  --h1-phone:44px; --h1-desk:clamp(52px,5.2vw,76px);
  --h2-phone:34px; --h2-desk:clamp(40px,3.9vw,56px);
  --sec-pad-phone:72px; --sec-pad-desk:112px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* no grey explaining text (Christian 10/29, 10/31): style.css's quieter inks all read as ink here */
  --ink-2:#111113; --muted:#111113; --dim:#111113; --faded:#111113; --i2:#111113;
  --soft:#fff;
}
html,body{background:var(--bg)}
body{color:var(--text);font:400 16px/1.5 var(--sans)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- LIME, every use (see the role tokens above) ---------- */
.btn-lime{background:var(--accent-action);color:var(--on-lime);border:0}
.btn-lime:hover{background:var(--accent-action-hi)}
.btn-lime:active{transform:scale(.98)}
.lime-ul{padding:0 3px;background:linear-gradient(var(--accent-mark),var(--accent-mark)) no-repeat 0 86%/100% 26%}
.lime-mark{color:inherit;background:var(--accent-mark);border-radius:2px;padding:0 2px;margin:0 -2px}
/* the key word's highlighter (the home page's, L1's look): a marker band under the italic word's glyphs. It swipes in
   left to right as its headline comes into view (/lime.js adds .lime-in); white on the lime field. */
main h1 em,main h2 em{position:relative;display:inline-block;isolation:isolate;padding:0 var(--hl-pad);margin:0 calc(var(--hl-pad) * -1);white-space:nowrap}
main h1 em::before,main h2 em::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:var(--hl-top);bottom:var(--hl-bot);border-radius:.05em;background:var(--accent-mark);
  transform-origin:0 50%;transform:rotate(var(--hl-tilt));transition:transform var(--kw-dur) var(--kw-ease) var(--kw-delay)}
.band em::before{background:#fff}
/* the scroll-progress line under the nav (/lime.js adds it): slides in from the left, a soft glowing head */
.sprog{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;overflow-x:clip;overflow-y:visible;z-index:2}
.sprog i{position:relative;display:block;height:100%;background:var(--accent-mark);transform:translateX(-100%);will-change:transform}
.sprog i::after{content:"";position:absolute;right:-7px;top:-4px;width:16px;height:11px;border-radius:50%;background:var(--accent-mark);filter:blur(4px)}
@supports (animation-timeline:scroll()){
  .sprog i{animation:sprog linear both;animation-timeline:scroll(root block)}
  .sprog i::after{animation:sphead linear both;animation-timeline:scroll(root block)}
  @keyframes sprog{from{transform:translateX(-100%)}to{transform:translateX(0)}}
  @keyframes sphead{0%{opacity:0}2%,100%{opacity:1}}
}
/* the waitlist button's glow: a blurred layer under the label that spills past the button; it breathes twice (4.8 s,
   WCAG 2.2.2) each time the button comes into view, then rests lit. On the lime field the button is ink, so is its glow. */
main a.btn-lime.cta-pass{position:relative;z-index:0}
main a.btn-lime.cta-pass::before{content:"";position:absolute;inset:-4px;border-radius:12px;background:var(--accent-glow);filter:blur(12px);z-index:-1;pointer-events:none;opacity:var(--glow-rest);will-change:opacity,transform}
.band{--glow-rest:.16;--glow-peak:.42}
.band a.btn-lime.cta-pass::before{inset:-6px;filter:blur(16px);background:var(--ink)}
@keyframes breathe{0%,100%{opacity:var(--glow-rest);transform:scale(.96)}50%{opacity:var(--glow-peak);transform:scale(1.08)}}

/* ---------- top bar: white, a hairline, the lime button ---------- */
.nav{background:#fff;border-bottom-color:var(--line)}
.nav .wrap{min-height:56px}
.brand{font-size:19px}
.links a{font-size:14px}
.nav .nav-cta{min-height:44px;padding:0 14px;border-radius:6px;font:500 14px/1 var(--sans)}

/* ---------- buttons (Ramp's shapes: 46 tall, radius 6) ---------- */
.btn{min-height:46px;border-radius:6px;font:500 16px/1 var(--sans);padding:0 20px}
.btn:hover{background:var(--canvas)}
.btn-ink:hover{background:#2A2A2E}
.btn-sm{min-height:44px;font-size:14px;padding:0 14px}
.acts{gap:10px}

/* ---------- type: Newsreader 400, negative tracking, one italic word per headline ---------- */
main h1,main h2{font-family:var(--serif);font-weight:400;text-wrap:balance}
main h1 em,main h2 em{font-style:italic;letter-spacing:-.035em}
main h1{font-size:var(--h1-phone);line-height:1.02;letter-spacing:-.028em}
.h2,.ch-h h2{font:400 var(--h2-phone)/1.04 var(--serif);letter-spacing:-.025em;max-width:18ch}
.lead{font-size:17px;line-height:1.45;color:var(--text)}

/* ---------- page heads: a centred column, like the home page's sections ---------- */
.pagehead{text-align:center;padding:56px 0 48px}
.pagehead h1{max-width:12em;margin:0 auto}
.pagehead .lead,.pagehead .status{margin:16px auto 0;max-width:36ch}
.pagehead .acts{justify-content:center;margin-top:28px}
.status{font-size:14px;color:var(--text)}

/* ---------- chapters: a centred heading and one line, then the picture ---------- */
.ch{padding:var(--sec-pad-phone) 0 0;border-top:0}
.ch-h{display:block;text-align:center;margin:0 0 32px}
.ch-h h2{margin:0 auto}
.ch-h p{margin:14px auto 0;font-size:17px;line-height:1.4;max-width:36ch;text-wrap:balance}
.ch:has(+ .band){padding-bottom:var(--sec-pad-phone)}

/* ---------- pictures: warm-grey tiles with no border (DESIGN 8, trust tiles), hairline rows inside ---------- */
figure.pic{margin:0}
.pic{display:flex;flex-direction:column;border:0;border-radius:12px;background:var(--surface);overflow:hidden;font-size:15px;line-height:1.45;container-type:inline-size;min-width:0}
.pic-h{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:20px 20px 14px;border-bottom:1px solid var(--line);background:none;margin:0}
.pic-h b{font:400 21px/1.15 var(--serif);letter-spacing:-.01em}
.pic-h>span:not(.chip):not(.ex){color:var(--text)}
.pic-b{flex:1;padding:20px}
.pic-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px;padding:12px 20px 16px;border-top:1px solid var(--line);color:var(--text);margin:0}
.pic-f a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin:-8px 0;color:var(--text);font-weight:600}
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch}
/* the one dot-grid canvas a page may have (DESIGN 5) */
.canvas{background-color:var(--canvas);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:var(--dot-gap) var(--dot-gap);background-position:8px 8px;box-shadow:inset 0 0 0 1px rgba(33,33,33,.07)}
/* state chips: words, never colour alone; amber waits, green is done (DESIGN 4.4) */
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-weight:500;font-size:13.5px;white-space:nowrap;line-height:1.5}
.chip.wait{background:var(--wait-wash);color:var(--wait-ink)}
.chip.ok{background:var(--ok-wash);color:var(--ok-ink)}
.chip.n{background:#fff;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
/* the Example mark, as on the home page's documents and app crops */
.ex{display:inline-flex;align-items:center;font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:#fff;border:1px solid rgba(33,33,33,.18);border-radius:4px;padding:4px 6px;white-space:nowrap}
/* list rows inside a tile */
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.rows li>span:first-child{display:flex;align-items:center;gap:12px;min-width:0}
.rows .ring{width:14px;height:14px;border:1.5px solid var(--ink);border-radius:50%;flex:none}
.rows .ring.ok{background:var(--ok);border-color:var(--ok)}
.card{background:var(--surface);border:0;border-radius:12px}

/* ---------- real app frames (DESIGN 7): the app-kit in same-origin srcdoc iframes, loaded by /app-frames.js ---------- */
.fr{position:relative}
.clip{position:relative;overflow:hidden;margin:0 auto;border-radius:11px;background:#fff;box-shadow:0 0 0 1px rgba(33,33,33,.08),0 20px 44px -22px rgba(30,25,15,.4)}
.fr iframe{display:block;border:0;transform-origin:0 0;background:transparent;color-scheme:light}
.clip::after{content:"Example";position:absolute;top:8px;right:8px;z-index:2;font:600 9px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:#fff;border:1px solid rgba(33,33,33,.18);border-radius:4px;padding:4px 6px;pointer-events:none}
.still{display:none;width:100%;height:auto}
html:not(.js) .fr iframe{display:none}
html:not(.js) .fr .still{display:block}
html:not(.js) .fr .clip{width:auto !important;height:auto !important}
.stage{border-radius:12px;padding:40px 16px}
/* on the canvas the Example mark sits outside the app, in the frame label (a site mark, DESIGN 7), so it never covers
   the app's own buttons */
.stage .clip::after{display:none}
.aplab{display:flex;gap:8px;align-items:center;justify-content:flex-start;margin:0 0 10px;font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.aplab i{width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}
.aplab span{margin-left:auto;font:600 9px/1 var(--sans);letter-spacing:.1em;background:#fff;border:1px solid rgba(33,33,33,.18);border-radius:4px;padding:4px 6px}
.tile-h{font:400 22px/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 20px}

/* ---------- the "More detail" folds and the FAQ: hairline rows only ---------- */
details.more{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.more>summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;min-height:48px;padding:12px 0;font:500 15px/1.35 var(--sans)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary i{width:9px;height:9px;flex:none;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:4px}
details.more[open]>summary i{transform:rotate(-135deg)}
.fd{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0 0 20px;font-size:16px;line-height:1.5}
.fd dt{font-weight:600;padding:14px 0 0;border-top:1px solid var(--line)}
.fd dd{margin:0;padding:2px 0 0}
.fd dt:first-of-type{border-top:0;padding-top:4px}
.more-b{padding:4px 0 24px;display:grid;gap:14px;font-size:16px;line-height:1.55}
.more-b>*{margin:0;max-width:62ch}
.more-b h3{font:600 17px/1.3 var(--sans);margin-top:6px}
.more-b ul{padding-left:1.2em;display:grid;gap:8px}
.more-b a{text-underline-offset:4px;overflow-wrap:anywhere}
.cta-row{border-color:var(--line)}

.sec,.sec-oat,.sec-ink{padding:var(--sec-pad-phone) 0}
.sec-oat>.wrap,.sec-ink>.wrap{padding-top:0;border-top:0}
.faq{display:block;max-width:760px;margin:0 auto}
.faq>div:first-child{text-align:center;margin-bottom:32px}
.faq>div:first-child .h2{margin:0 auto}
.faq>div:first-child .lead{margin:14px auto 0 !important;max-width:none}
.faq summary{font:400 21px/1.25 var(--serif);letter-spacing:-.01em}
.faq details{border-top-color:var(--line)} .faq details:last-child{border-bottom-color:var(--line)}
.faq details p{font-size:16px}

/* ---------- the lime field that closes the page (the home page's closing field, L1: Ramp's close). One lime panel
   with rounded bottom corners over the ink footer; it opens from a slightly smaller card to full bleed as it comes in
   (scale only, /lime.js adds .lime-in). Ink on lime (14.6:1); the button turns ink with lime text. ---------- */
.band{position:relative;z-index:1;overflow:hidden;width:auto;margin:0;padding:88px var(--gutter-x,16px) 104px;border-top:0;background:var(--accent-field);color:var(--on-lime);text-align:center;
  border-radius:0 0 var(--field-r) var(--field-r);transform-origin:50% 0;transition:transform var(--field-dur) var(--field-ease)}
.band .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;width:var(--wrap);margin:0 auto}
.band h2{font:400 40px/1 var(--serif);letter-spacing:-.03em;max-width:14ch;margin:0 auto;color:var(--on-lime)}
.band p{margin:14px auto 0;max-width:36ch;color:var(--on-lime)}
.band a:not(.btn){color:var(--on-lime)}
.band .cta1{align-items:center}
.band :focus-visible{outline-color:var(--ink)}
.band .btn-lime{min-height:46px;background:var(--ink);color:var(--accent-field)}
.band .btn-lime:hover{background:#2A2B2E}
main{display:block}
main>section.band:last-child{margin-bottom:0}
/* the ink footer runs up behind the field's rounded corners */
main:has(>section.band:last-child)+footer{margin-top:calc(var(--field-r) * -1);padding-top:calc(40px + var(--field-r))}

/* ---------- footer: the shared markup, ink under the lime field (the home page's, L1) ---------- */
footer{background:#111113;color:rgba(255,255,255,.72);border-top:0;padding:40px 0 32px;font-size:14px}
footer .brand{color:#fff;font-size:19px}
footer .top>div:first-child p{color:rgba(255,255,255,.72)}
footer .top>div:not(:first-child){border-top-color:rgba(255,255,255,.14)}
footer h3{font:600 14px/1.3 var(--sans);color:#fff}
footer ul a,footer .fl a{color:rgba(255,255,255,.72)}
footer a:hover{color:#fff}
footer .bottom{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72);font-size:13px}
footer .tm{color:rgba(255,255,255,.72);font-size:13px}
footer :focus-visible{outline-color:var(--accent-field)}

/* ================= wider screens ================= */
@media (min-width:768px){
  :root{--gutter-x:32px}
  .nav .wrap{min-height:60px}
  main h1{font-size:var(--h1-desk)}
  .h2,.ch-h h2{font-size:var(--h2-desk);max-width:24ch}
  .pagehead{padding:88px 0 64px}
  .pagehead .lead{font-size:19px;max-width:40ch}
  .ch{padding-top:var(--sec-pad-desk)}
  .ch:has(+ .band){padding-bottom:var(--sec-pad-desk)}
  .ch-h{margin-bottom:48px}
  .ch-h p{font-size:18px;max-width:44ch}
  .sec,.sec-oat,.sec-ink{padding:var(--sec-pad-desk) 0}
  .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pic-h{padding:24px 28px 16px}
  .pic-b{padding:24px 28px}
  .pic-f{padding:14px 28px 18px}
  .rows li{padding:13px 28px}
  .stage{padding:56px 32px}
  :root{--field-r:40px}
  .band{padding:132px var(--gutter-x) 152px}
  .band h2{font-size:clamp(48px,5vw,72px);max-width:16ch}
  .band p{font-size:18px}
  .band .btn-lime{min-height:52px;border-radius:8px;padding:0 24px}
}
@media (min-width:901px){
  .nav .links{margin-left:12px;gap:30px}
  .nav .nav-cta{margin-left:auto}
}
@media (min-width:1100px){ :root{--gutter-x:64px} }
@media (max-width:767.98px){
  .rows li{padding:12px 16px}
  .pic-h{padding:18px 16px 12px}
  .pic-b{padding:16px}
  .pic-f{padding:10px 16px 14px}
}
/* ================= lime motion: start states only with motion allowed. Pages whose head script sets .js hide them
   from the first paint (and /site.js sets .lime-off if /lime.js can't load); other pages get .lime-w from /lime.js on
   whatever is still below the first screen. No script or reduced motion: everything finished. ================= */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.lime-off) main :is(h1,h2):not(.lime-in) em::before,main .lime-w:not(.lime-in) em::before{transform:rotate(var(--hl-tilt)) scaleX(0)}
  html.js:not(.lime-off) main .band:not(.lime-in),main .band.lime-w:not(.lime-in){transform:scale(.94,.97)}
  main a.btn-lime.cta-pass.pulse::before{animation:breathe var(--glow-cycle) ease-in-out 2}
}
@media (prefers-reduced-motion:reduce){
  details.more>summary i{transition:none}
  main h1 em::before,main h2 em::before,.band{transition:none !important;animation:none !important}
}
@media print{
  .sprog{display:none}
  main h1 em::before,main h2 em::before{transform:rotate(var(--hl-tilt)) !important}
  .band{transform:none !important}
}

/* print: a page printed before it was scrolled shows every timeline stop finished (review 11/1) */
/* only the reveal pieces are reset, so the app frames keep their inline scale() */
@media print{
  .live .pop,.live .cap,.live .pd,.live .sub,.live .stamp,.live .files span,.live .ghost,.will .ny .chip{opacity:1 !important;translate:none !important;scale:none !important}
  .will .ny .chip{transform:none !important}
  .live .cap em::before{transform:rotate(var(--hl-tilt)) !important}
  .live .nope li::after,.will .nope li::after,.live .wall{transform:none !important}
  .live .pgone .pd{opacity:.16 !important}
  .sprog{display:none !important}
}