/* Red Ember — the public pages.
 *
 * Shared by / and /colorado/. Extracted 11 Sep from the home page build, which
 * was concatenating the Colorado page's inline <style> with a Python string
 * literal in scratchpad/build-alt2.py. Both pages now link this instead, so
 * the rules exist once, cache once, and are edited in one place.
 *
 * The app has its own stylesheet (/assets/hearth.css) and does not use this.
 */

body{background:radial-gradient(1100px 640px at 50% -14%,#fff 0%,var(--paper) 60%)}
.wrap{max-width:1060px;padding-top:0}
.nav{display:flex;align-items:center;gap:12px;padding:20px 0 0}
.nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  font-family:Literata,serif;font-weight:700;font-size:19px;letter-spacing:-.01em}
.nav .logo svg{width:30px;height:30px;flex:none}
.nav .sp{margin-left:auto}
/* 13 Oct: the trial is the header's button; Sign in is a quiet link. */
.nav .navin{font-size:14px;font-weight:600;color:var(--ink-70);text-decoration:none;padding:8px 2px;white-space:nowrap}
.nav .navin:hover{color:var(--ink);text-decoration:underline}
.nav .btn.p.navcta{padding:9px 16px;font-size:14px;text-decoration:none;white-space:nowrap}
.nav .logo{white-space:nowrap}
@media (max-width:420px){
  .nav{gap:10px}
  .nav .btn.p.navcta{padding:8px 13px;font-size:13.5px}
  .nav .navin{font-size:13.5px}
}

.hero{text-align:center;padding:50px 0 6px}
.hero h1 .brand{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ember);
  margin:0 0 14px;font-weight:500;line-height:1}
.hero h1{font-size:clamp(32px,5.8vw,50px);line-height:1.07;margin:0 0 16px}
.hero .lede{font-size:clamp(17px,2.3vw,19.5px);color:var(--ink-70);max-width:640px;
  margin:0 auto 26px;line-height:1.55}
.hero .btn.p{padding:13px 30px;font-size:15.5px;text-decoration:none;display:inline-block}
.fine{text-align:center;font-size:12.5px;color:var(--ink-45);margin:12px 0 0;font-style:italic}

.quote{font-family:Literata,serif;font-size:clamp(19px,3vw,25px);line-height:1.42;
  text-align:center;max-width:680px;margin:56px auto 0;letter-spacing:-.01em}
.quote span{color:var(--ember)}

h2.sec{font-family:Literata,serif;font-size:clamp(23px,3.6vw,29px);letter-spacing:-.015em;
  margin:64px 0 8px;text-align:center}
p.secsub{text-align:center;color:var(--ink-70);max-width:640px;margin:0 auto;font-size:15px;
  line-height:1.6}

/* Two-column feature block, same shape as the home page's so the two read as
   one site. Alternating sides are deliberate: the eye zig-zags down instead
   of running straight down one gutter. */
.showcase{display:grid;gap:22px;margin-top:30px;align-items:center}
/* Resets, not decoration. hearth.css styles h3 as a small uppercase mono card
   label with a rule under it — correct inside a card, wrong for a section
   heading on a marketing page. */
.showcase h3{font-family:Literata,serif;font-size:clamp(20px,3vw,26px);letter-spacing:-.015em;
  margin:0 0 10px;line-height:1.2;text-transform:none;color:var(--ink);
  border-bottom:0;padding-bottom:0;font-weight:700}

/* ── inbox → tasks ────────────────────────────────────────────────────
   A stack of anonymous rows, four of them marked, next to the real screen
   that results. The rows are empty on purpose — see the markup. */
/* FULL WIDTH, not a column of a two-up block. Measured: inside .showcase's
   1.15fr column the co-attention shot rendered at 334px against a capture
   that holds 860 CSS pixels of app — 0.39x, which is not a small screenshot,
   it is texture. On the page whose one job is to show the app, the block
   Andy called "the win" was the least legible thing on it.
   Given the whole 1,060px the same shot gets ~690px, or 0.80x, which is the
   difference between seeing that there is a list and reading what is on it.
   The cost is the heading and sentence move above the diagram instead of
   beside it; that is the cheaper half. */
.xwide{margin-top:30px}
.xform{display:grid;grid-template-columns:1fr auto 2.4fr;gap:14px;align-items:center}
@media(max-width:820px){
  /* The arrow points DOWN when the columns stack, or it points at nothing. */
  .xform{grid-template-columns:1fr;gap:10px}
  .xform .arrow{transform:rotate(90deg);justify-self:center}
  .xform .inbox{max-height:190px}
}
.inbox{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:26px 12px 12px;overflow:hidden;max-height:300px}
.inbox .ilab{position:absolute;top:8px;left:12px;font-family:"IBM Plex Mono",monospace;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.inbox i{display:block;height:7px;border-radius:3px;background:var(--grid);
  margin-bottom:7px}
/* Varied widths, because a column of identical bars reads as a loading state
   rather than as a list of different things. */
.inbox i:nth-child(3n){width:88%}
.inbox i:nth-child(3n+1){width:96%}
.inbox i:nth-child(3n+2){width:78%}
.inbox i.hit{background:var(--ember,#B0512A);opacity:.85;height:8px}
.inbox .ifade{position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(rgba(255,255,255,0),var(--card))}
.xform .arrow{font-size:22px;color:var(--ink-45);line-height:1}
.xcap{margin-top:10px;text-align:center;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}

/* ── DEVICE FRAMES ────────────────────────────────────────────────────
   Andy, 4 Sep: a frame "to help them feel connected / not floating" and to
   "communicate that this is an app/software tool".

   Both things are true and the second is the one that earns the code. A
   rounded rectangle with a drop shadow could be anything — a slide, a
   diagram, a photo of a form. A browser window with a title bar says
   software before anybody reads a word, and it does the first job as a side
   effect: the shot is now sitting IN something rather than floating on the
   page.

   Drawn in CSS, not baked into the images. Three reasons, and the third is
   the one that matters most:
     · the screenshots stay exactly what they are — re-render one and the
       frame still fits, with no image editing step in between;
     · the chrome is one colour change from matching a dark theme, where a
       baked-in light frame would be permanently wrong;
     · a frame in the pixels is a frame that has to be re-cut every time the
       display size changes, and it is the FIRST thing to go soft when an
       image is scaled. The dots and the bar are vectors here, so they are
       sharp at any size on any screen.

   The title bar carries no fake URL. A made-up address bar in a screenshot
   is a small lie that costs more credibility than the realism buys. */
.frame{background:#E7E9EE;border:1px solid #D5D9E0;border-radius:14px;
  padding:0;overflow:hidden;
  box-shadow:0 1px 2px rgba(32,36,44,.06),0 18px 40px -20px rgba(32,36,44,.34)}
.frame .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:linear-gradient(#F2F3F6,#E7E9EE);border-bottom:1px solid #D5D9E0}
.frame .bar i{width:9px;height:9px;border-radius:50%;flex:none;font-style:normal;
  background:#D3D6DD}
/* The one flourish. Traffic lights read as "a window" faster than three grey
   dots do, and they are the only saturated colour in the chrome. */
.frame .bar i:nth-child(1){background:#F0655A}
.frame .bar i:nth-child(2){background:#F2C043}
.frame .bar i:nth-child(3){background:#5FC26B}
.frame{display:block;max-width:100%}
/* <picture> is an inline wrapper by default, so without this the frame gets a
   few pixels of line-box descender under every screenshot — a thin strip of
   frame background along the bottom edge of each shot. */
.frame picture{display:block}
.frame img{display:block;width:100%;height:auto;border:0;border-radius:0;
  box-shadow:none}
/* A recording inside a window frame, same treatment as a still. <video> is
   inline like <picture>, so it needs the same descender fix; without the
   explicit block it leaves a strip of frame background under the clip. */
.frame video{display:block;width:100%;height:auto;border:0;border-radius:0;
  box-shadow:none;background:#F0F1F4}

/* ── ONE SCREENSHOT PER BREAKPOINT ────────────────────────────────────
   Every shot on this page is served twice: the desktop capture, and a
   capture of the SAME screen taken at a 400px viewport. Measured before the
   change, at a 390px phone every screenshot rendered between 0.30x and 0.52x
   of the app inside it — 356 pixels of screen cannot hold 720 CSS pixels of
   desktop layout, so the phone visitor got texture where the laptop visitor
   got the app. Given that the readers this page is written for arrive from a
   Facebook parent group, the mode that worked was the minority one.
   The app is already responsive, so the fix is a second photograph rather
   than a second stylesheet: at phone width it lays itself out for a phone,
   and a picture of that is legible at phone size. The breakpoint below is
   the same 820px the layout stacks at, so the picture and the columns always
   change together. */

/* The phone. Same idea, narrower, with a bezel instead of a title bar —
   a title bar on a phone would be wrong, and the notch is the shape that
   says "phone" with the fewest pixels. */
.frame.phone{border-radius:26px;padding:8px;background:#20242C;border-color:#20242C;
  max-width:300px;margin-inline:auto}
.frame.phone .bar{display:none}
.frame.phone .screen{position:relative;border-radius:19px;overflow:hidden;
  background:var(--paper)}
.frame.phone .screen::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:96px;height:18px;
  background:#20242C;border-radius:0 0 11px 11px;z-index:2}

.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:26px;margin-top:30px;
  box-shadow:0 1px 2px rgba(32,36,44,.05),0 10px 30px -18px rgba(32,36,44,.3)}
.panel img{width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid var(--line);margin-top:18px}
.bound{font-size:13.5px;color:var(--ink-70);line-height:1.6;margin:18px 0 0;
  padding-top:14px;border-top:1px solid var(--line)}
.bound b{color:var(--ink)}

.price{text-align:center;margin-top:26px}
.price .amt{font-family:Literata,serif;font-size:40px;letter-spacing:-.02em;display:block}
.price .amt small{font-size:15px;color:var(--ink-45);font-family:"Public Sans",sans-serif;
  letter-spacing:0}

.foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:70px 0 30px;
  padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-45)}
.foot .sp{margin-left:auto}
.foot a{color:var(--ink-70)}

/* ── the three promises, straight under the hero ───────────────────── */
.promises{display:grid;gap:16px;margin-top:34px}

/* ── the calculator → documentation diagram ────────────────────────────
   A DIAGRAM, drawn as one, for the same reason the inbox block beside it is:
   the Direct Care Plan has no screenshot yet, and dressing a mock-up as a
   captured screen is the one place a small lie costs the most. Anonymous
   shapes and the state's own vocabulary — nothing here pretends to be a
   photograph of anybody's plan. */
/* FOUR PANELS NOW, not three. Andy, 9 Sep: "Between 'Red Ember Reads it'
   and 'you Send' we need to show an image of the Red Ember magic that pulls
   in conditions and maps to the requirements based on the state." He is
   right that it was missing, and it is the step that carries the product:
   reading a spreadsheet is parsing, and producing a form is templating — the
   part nobody else does is knowing which diagnosis on THIS record answers the
   rule for THAT task, and what Colorado accepts as proof of it.

   Four across on a wide screen, one column below. No 2x2 middle state: the
   arrows are grid items, and reflowing seven children into two rows puts an
   arrow at the end of row one pointing off the edge of the diagram. */
.dcflow{display:grid;grid-template-columns:0.92fr auto 1.2fr auto 1.35fr auto 0.95fr;
  gap:9px;
  /* Panels aligned to the TOP, arrows to the middle. Centred, the shorter
     panels floated against the tall ones and the row read as four unrelated
     objects rather than one flow. */
  align-items:start}
.dcflow .arrow{align-self:center;font-size:18px}
@media(max-width:1040px){
  .dcflow{grid-template-columns:1fr;gap:12px}
  .dcflow .arrow{transform:rotate(90deg);justify-self:center}
}
.dcstep{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:25px 12px 12px;position:relative;min-width:0}
.dcstep .ilab{position:absolute;top:8px;left:12px;font-family:"IBM Plex Mono",monospace;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.dcnote{margin:11px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-45)}

.filechip,.docchip{display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;background:var(--paper)}
.docchip{margin-bottom:7px}
.docchip:last-of-type{margin-bottom:0}
.filechip .ext,.docchip .ext{font-family:"IBM Plex Mono",monospace;font-size:8.5px;
  letter-spacing:.08em;background:var(--grid);color:var(--ink-70);border-radius:4px;
  padding:4px 5px;flex:none}
.docchip .ext{background:#B0512A18;color:#B0512A}
.filechip .fn,.docchip .fn{font-size:11.5px;line-height:1.35;color:var(--ink-70);
  min-width:0;overflow-wrap:anywhere}
.docchip .fn em{font-style:normal;color:var(--ink-45);font-size:10.5px}

/* The parsed calculator, in miniature. Real block names, real shape, no
   invented child. */
.minitab{border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:var(--paper);font-size:11.5px}
.mrow{display:flex;justify-content:space-between;gap:8px;padding:5px 10px;
  border-bottom:1px solid var(--line);color:var(--ink-70);line-height:1.4}
.mrow:last-child{border-bottom:0}
.mrow.head{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45);background:var(--card)}
.mrow .r{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;flex:none}
.mgrp{padding:6px 10px 4px;font-size:10px;font-weight:600;color:var(--ink);
  background:var(--card);border-bottom:1px solid var(--line);line-height:1.3}
.mgrp em{font-style:normal;color:var(--ink-45);font-weight:400}
.mrow.doc{background:#B0512A0D;box-shadow:inset 3px 0 0 #B0512A66}
.mrow .esc{font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:500;border:1px solid #EFE0BE;background:#FBF5E7;
  color:#6B551F;border-radius:4px;padding:1px 5px;margin-left:6px;white-space:nowrap}

/* The panel's claim list. Ticks rather than bullets: each line is a thing it
   does, not an item in a set. */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.6;
  color:var(--ink-70)}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;
  border-left:2px solid var(--ember);border-bottom:2px solid var(--ember);
  transform:rotate(-45deg)}
.ticks b{color:var(--ink)}
.ticks .mono{font-family:"IBM Plex Mono",monospace;font-size:13px}

/* ── the mapping panel ───────────────────────────────────────────────
   The conditions come off the household's own record, so they are shown as
   chips in the record's own words — Hemiparesis, not the guide's "paralysis".
   The requirement column is the point: three tasks, three genuinely different
   things Colorado will accept, including the one that cannot be a form at
   all. That last row is the detail that proves the product read the guide
   rather than pattern-matched it. */
.mlab{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-45);margin:0 0 6px}
.mlab.down{margin:12px 0 6px;padding-top:10px;border-top:1px dashed var(--line);
  position:relative}
.mlab.down::before{content:"↓";position:absolute;top:-9px;left:50%;
  transform:translateX(-50%);background:var(--card);padding:0 5px;
  font-family:"Public Sans",sans-serif;font-size:12px;color:var(--ember)}

/* THE LINE THAT MAKES THE ARGUMENT, at the size it makes it. Andy: "This needs
   to be bold/bigger." It was 11px mono uppercase — a caption under a diagram,
   when it is actually the diagram's conclusion and the page's whole promise. */
.xcap.big{font-family:Literata,serif;font-size:clamp(17px,2.4vw,22px);
  letter-spacing:-.012em;text-transform:none;color:var(--ink);font-weight:700;
  line-height:1.3;margin-top:20px}

.wrap{max-width:1060px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ── THE WORDMARK ────────────────────────────────────────────────────
   RED EMBER -> REDEMBER -> REMEMBER. The space closes, then one glyph turns
   over; nothing else moves, because nothing else differs.

   THE SWAPPING LETTER HAS A FIXED WIDTH AND FLIPS. The first version scaled
   the D to zero and grew the M in its place, which leaves a window a few
   frames long where neither is drawn — and the wordmark reads "RE EMBER",
   which is the one thing it must never say. A rotateX flip keeps the box the
   same width throughout: at the midpoint both glyphs are edge-on, which reads
   as a letter turning rather than as a gap. Width is set from the wider of
   the two so neither is cramped. */
.mark{display:block;font-family:Literata,serif;font-weight:700;
  font-size:clamp(38px,8.4vw,84px);line-height:1;letter-spacing:.01em;
  color:var(--ember);margin:0 0 22px;white-space:nowrap}
.mark i{display:inline-block;font-style:normal}
.mark .sp{width:.3em;animation:sp 8s ease-in-out infinite}
.mark .sw{position:relative;width:.86em;text-align:center}
/* THE FLIP IS ON THE GLYPH, NOT ON THE BOX. It was on .sw, and a transform on
   a parent applies to its ::after too — so when the D turned edge-on the M
   turned with it and the mark read "RE EMBER", which is the one thing it must
   never say. The D lives in its own <b> so the two can turn independently;
   .sw itself never moves, which is also what holds the width steady. */
.mark .sw b{display:block;font-weight:inherit;backface-visibility:hidden;
  animation:flipd 8s ease-in-out infinite}
/* The M is drawn by CSS, not marked up, so the element's text is never
   "REDM EMBER" — which a brand checker reading this heading would see. */
.mark .sw::after{content:"M";position:absolute;left:0;right:0;top:0;
  animation:flipm 8s ease-in-out infinite;backface-visibility:hidden}
/* Space shuts first and holds, so REDEMBER is legible for a beat before the
   turn. That beat is the whole joke; without it the two changes blur into one
   effect nobody can read. */
@keyframes sp{0%,20%{width:.3em}27%,86%{width:0}94%,100%{width:.3em}}
@keyframes flipd{0%,29%{transform:rotateX(0);opacity:1}
  33%,84%{transform:rotateX(90deg);opacity:0}
  88%,100%{transform:rotateX(0);opacity:1}}
@keyframes flipm{0%,29%{transform:rotateX(-90deg);opacity:0}
  33%,84%{transform:rotateX(0);opacity:1}
  88%,100%{transform:rotateX(-90deg);opacity:0}}
@media(prefers-reduced-motion:reduce){
  /* Rests on the brand, not the pun. */
  .mark .sp,.mark .sw b,.mark .sw::after{animation:none}
  .mark .sp{width:.3em}
  .mark .sw b{transform:none;opacity:1}
  .mark .sw::after{opacity:0}
}

.hero{text-align:center;padding:38px 0 6px}
.hero h1{font-size:clamp(28px,4.6vw,44px);line-height:1.1;margin:0 0 18px;
  letter-spacing:-.015em}
.hero .lede.big{font-family:Literata,serif;font-size:clamp(17px,2.5vw,22px);
  color:var(--ink-70);max-width:620px;margin:0 auto 28px;line-height:1.45}
.hero .btn.p{padding:13px 30px;font-size:15.5px;text-decoration:none;display:inline-block}

/* ── turning X into Y ────────────────────────────────────────────────── */
h2.sec.turn span{color:var(--ember)}
.turns{display:grid;gap:54px;margin-top:38px}
.tn{display:grid;gap:24px;align-items:center}
@media(min-width:900px){.tn{grid-template-columns:0.85fr 1.15fr;gap:44px}
  .tn.wide{grid-template-columns:1fr}}
.ttx h3{font-family:Literata,serif;font-size:clamp(20px,3vw,26px);letter-spacing:-.015em;
  margin:0 0 10px;line-height:1.2;text-transform:none;color:var(--ink);
  border-bottom:0;padding-bottom:0;font-weight:700}
.ttx p{margin:0 0 10px;color:var(--ink-70);font-size:15px;line-height:1.62}
.ttx p:last-child{margin-bottom:0}
.tn.wide .ttx{text-align:center;max-width:660px;margin:0 auto}
/* The label IS the section's promise, so it is set as one rather than as a
   heading with a subtitle: two nouns and the word between them. */
.tlab{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 12px!important;color:var(--ember)}
.tlab span{color:var(--ink-45);padding:0 4px}
/* ── THE CYCLING AUDIENCE ────────────────────────────────────────────
   Andy: "This should flash between the state, insurance, healthcare
   providers, schools." The point is that the same pile of notes has four
   different audiences, which is most of why caregivers redo the work.

   inline-grid with every option in the SAME cell: the box sizes itself to the
   longest of the four and never resizes, so the words after it hold still
   while the word inside changes. Stacking them absolutely would collapse the
   box to nothing; floating them would make the line jump on every swap. */
.cyc{display:inline-grid;vertical-align:bottom;text-align:left;padding:0!important;
  color:var(--ember)!important}
.cyc i{grid-area:1/1;font-style:normal;white-space:nowrap;opacity:0;
  animation:cyc 12s ease-in-out infinite}
.cyc i:nth-child(2){animation-delay:3s}
.cyc i:nth-child(3){animation-delay:6s}
.cyc i:nth-child(4){animation-delay:9s}
@keyframes cyc{0%{opacity:0}4%,22%{opacity:1}26%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  /* Rests on the first rather than cycling; the aria-label carries the rest. */
  .cyc i{animation:none;opacity:0}
  .cyc i:first-child{opacity:1}
}
.tmeta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-45);
  line-height:1.5}
/* A marker highlight rather than bold. The page already spends bold on nouns
   in several places, so another one here would read as a fourth bit of the
   same emphasis; a wash under the words is a different gesture and survives
   sitting next to them. Sits at 62% of the line so it rides under the
   baseline the way a real marker does, and wraps with the text. */
.hl{background:linear-gradient(transparent 62%,#B0512A2E 62%);
  padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* The phone. Bezel rather than a title bar — a browser chrome around a phone
   recording would be the one dishonest frame on the page. */
.phone{background:#20242C;border-radius:34px;padding:9px;max-width:296px;
  margin-inline:auto;box-shadow:0 1px 2px rgba(32,36,44,.1),0 26px 50px -26px rgba(32,36,44,.5)}
.pscreen{position:relative;border-radius:26px;overflow:hidden;background:#fff;
  aspect-ratio:1180/2556}
.pscreen::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:88px;height:17px;background:#20242C;border-radius:0 0 11px 11px;z-index:2}
.pscreen video{width:100%;height:100%;display:block;object-fit:cover}

/* ── THE LAPTOP ──────────────────────────────────────────────────────
   Andy: "similar to how we did the brain dump at the top but with a macbook
   screen vs an iphone screen."

   Same principle as the phone: a bezel, not a browser chrome. The recording
   itself is cropped to the page — cut.sh takes 118px off the top for the
   menu bar, tab strip, address bar and bookmarks, and stops at 879 where the
   Dock begins — so this IS the only chrome in the shot, and it is honest
   about what kind of machine you are looking at.

   ── THE 748 IS NOT A ROUND NUMBER ────────────────────────────────────
   The clip is 1440 device pixels wide, so it is 1:1 at 720 CSS px and
   upscaled past that. .mbook caps at 800, the lid insets 26 either side,
   the lid pads 12: 800 - 52 - 24 = 724, which is 1.006x. Widen .mbook and
   the video starts being enlarged rather than displayed.

   The base is a sibling of the lid rather than a ::after on it, because it
   has to be WIDER than the lid — a real one overhangs — and growing a child
   past its parent means either a negative margin or a transform, both of
   which then need clipping. Two boxes inside a container sized for the
   wider one is the version that survives a phone. */
.mbook{max-width:800px;margin:0 auto}
.mlid{margin:0 26px;background:#20242C;border-radius:15px 15px 6px 6px;
  padding:13px 12px 15px;
  box-shadow:0 1px 2px rgba(32,36,44,.1),0 30px 56px -30px rgba(32,36,44,.55)}
.mlid::before{content:"";display:block;width:5px;height:5px;border-radius:50%;
  background:#3B424E;margin:0 auto 8px}
.mscreen{position:relative;aspect-ratio:1440/750;border-radius:4px;overflow:hidden;
  background:#F0F1F4}
.mscreen video{width:100%;height:100%;display:block;object-fit:cover}
.mbase{height:13px;border-radius:0 0 11px 11px;
  background:linear-gradient(#C7CBD2,#9AA0AA 58%,#767D88)}
/* The thumb notch in the front edge. */
.mbase::after{content:"";display:block;width:104px;height:6px;margin:0 auto;
  background:#767D88;border-radius:0 0 7px 7px}
/* ── ON A PHONE THE LAPTOP GOES FULL BLEED ───────────────────────────
   Measured at 390: the screen inside the frame came out 248px wide, and the
   clip is 1440 device pixels — 0.34x, which puts the app's 13px table type
   under five pixels tall in the one shot on the page that has to be read.
   The band's own 20px of side padding is the only thing between the frame
   and the edge of the phone, so it is cancelled here and the chrome is
   thinned to almost nothing: 248 becomes about 340, which is 0.47x. Still
   small — it is a laptop on a phone — but half again as legible for four
   declarations, and the numbered steps underneath carry the meaning
   regardless. */
@media(max-width:560px){
  .mbook{margin-inline:-20px}
  .mlid{margin:0 5px;padding:6px 4px 7px;border-radius:9px}
  .mlid::before{width:3px;height:3px;margin-bottom:4px}
  .mbase{height:8px;border-radius:0 0 7px 7px}
  .mbase::after{width:58px;height:4px}}

/* The four beats, as a caption rather than a diagram. The .dcflow panel that
   used to be here drew them; the recording shows them happening, and a
   drawing of a thing beside a film of the same thing is the drawing being
   redundant. The words stay because the film has no labels. */
.mflow{display:grid;gap:8px;list-style:none;margin:20px auto 0;padding:0;
  max-width:800px;counter-reset:m}
@media(min-width:760px){.mflow{grid-template-columns:repeat(4,1fr);gap:14px}}
.mflow li{counter-increment:m;position:relative;padding-left:26px;
  font-size:13px;line-height:1.5;color:var(--ink-70)}
.mflow li::before{content:counter(m);position:absolute;left:0;top:1px;
  width:18px;height:18px;border-radius:50%;background:var(--ember);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  display:grid;place-items:center}
.mflow b{color:var(--ink);font-weight:600}

/* ── the burden ──────────────────────────────────────────────────────── */
.burn{margin-top:64px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:32px 36px;max-width:760px;margin-inline:auto;
  box-shadow:0 1px 2px rgba(32,36,44,.05),0 12px 34px -22px rgba(32,36,44,.3)}
.bstat{font-family:Literata,serif;font-size:clamp(19px,2.8vw,25px);line-height:1.35;
  letter-spacing:-.012em;margin:0 0 14px;color:var(--ink)}
.bstat b{color:var(--ember);font-size:1.35em}
.burn p{font-size:15px;line-height:1.65;color:var(--ink-70);margin:0}
.burn b{color:var(--ink)}
.bsrc{font-family:"IBM Plex Mono",monospace;font-size:11px!important;
  color:var(--ink-45)!important;margin-top:16px!important;padding-top:14px;
  border-top:1px solid var(--line)}

/* ── the two guidance cards ──────────────────────────────────────────── */
.two{display:grid;gap:22px;margin-top:34px}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:26px;align-items:start}}
.gcd{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:24px 24px 22px;
  box-shadow:0 1px 2px rgba(32,36,44,.05),0 12px 34px -24px rgba(32,36,44,.32)}
.gk{font-family:Literata,serif;font-size:21px;font-weight:700;letter-spacing:-.015em;
  margin:0 0 6px;color:var(--ink)}
.gsub{font-size:13.5px;line-height:1.55;color:var(--ink-70);margin:0 0 18px}

/* ── EQUAL HEIGHT, AND WHY IT IS NOT JUST TIDINESS ───────────────────
   Andy: "can you make the length of those the same?" Two cards claiming to be
   a matched pair, at different heights, read as one finished and one not. The
   grid stretches them, each card is a column, and the media inside each grows
   to fill whatever the taller one settles at — so they stay level whatever the
   copy does later. */
.two{align-items:stretch}
.gcd{display:flex;flex-direction:column}
.chatbox,.gshot{flex:1;min-height:0}

/* ── AND THE min-width:0 THAT KEEPS IT ON A PHONE ─────────────────────
   Measured at 375: .two was 335px wide and .gcd inside it was 417 — a grid
   item 82px wider than its own track, clipped by .wrap's overflow, so the
   right edge of both cards simply vanished off a phone. Nothing in the card
   is wide; the cause is that a grid item and a flex item both default to
   min-width:auto, which resolves to MIN-CONTENT, and .ccomp span holds a
   whole placeholder sentence it never wraps (overflow:hidden + ellipsis
   shortens what is painted, it does not shorten min-content). So the
   composer's full sentence became the floor for the card, the card became
   the floor for the column, and the column blew past the viewport.

   Three declarations, because the chain has three links: the grid item, the
   flex column's children, and the one element whose text sets the floor.
   This is the same class of bug as the 236px body padding — a default that
   only shows up at a width nobody was looking at. */
.two>*{min-width:0}
.gcd>*{min-width:0}
.ccomp span{min-width:0}

/* ── THE CHAT PANEL ──────────────────────────────────────────────────
   Andy: "put the chat box around the thread of messages… that would help
   people see this is a function within the app." Three bubbles floating on a
   card look like a testimonial; the same bubbles inside a header and a
   composer look like a screen. The composer is deliberately inert — it is a
   picture of an input, not an input, so nobody types into a page that cannot
   answer. */
.chatbox{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.chead{display:flex;align-items:center;gap:8px;padding:11px 14px;
  background:linear-gradient(#fff,#FAFBFC);border-bottom:1px solid var(--line);
  font-family:Literata,serif;font-weight:700;font-size:13.5px;color:var(--ink)}
.cdot{width:8px;height:8px;border-radius:50%;background:var(--ember);flex:none;
  box-shadow:0 0 0 3px #B0512A1F}
.cwho{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:400;
  font-size:10.5px;letter-spacing:.04em;color:var(--ink-45)}
.chatbox .thread{flex:1;padding:14px;min-height:210px}
.ccomp{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;
  border-top:1px solid var(--line);background:#fff}
.ccomp span{flex:1;font-size:12.5px;color:var(--ink-45);
  font-family:"IBM Plex Mono",monospace;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ccomp b{width:26px;height:26px;border-radius:8px;background:var(--ember);color:#fff;
  display:grid;place-items:center;font-size:13px;flex:none}

/* THE THREAD. Three exchanges stacked in one box; the tallest sets the height
   so nothing jumps as they cross-fade. Inside each, the answer waits behind a
   typing indicator so the pause reads as thinking. */
.thread{position:relative;min-height:250px}
/* BOTTOM-ANCHORED, like every message thread anyone has used. Pinned to the
   top they sat under a tall empty box once the two cards were levelled; pinned
   to the bottom the empty space reads as history scrolled away, which is what
   a conversation actually looks like. */
.ex{position:absolute;left:0;right:0;bottom:0;opacity:0;
  animation:exc 21s ease-in-out infinite}
.ex2{animation-delay:7s}.ex3{animation-delay:14s}
@keyframes exc{0%{opacity:0}3%,30%{opacity:1}33%,100%{opacity:0}}
.ex .q{margin:0;background:#20242C;color:#fff;border-radius:14px 14px 14px 4px;
  padding:11px 14px;font-size:13.5px;line-height:1.5;max-width:92%}
.ex .a{margin:12px 0 0;background:var(--paper);border:1px solid var(--line);
  border-radius:14px 14px 4px 14px;padding:11px 14px;font-size:13.5px;line-height:1.55;
  color:var(--ink-70);opacity:0;animation:ans 21s ease-in-out infinite;
  animation-delay:inherit}
.ex2 .a{animation-delay:7s}.ex3 .a{animation-delay:14s}
@keyframes ans{0%,7%{opacity:0;transform:translateY(4px)}
  10%,30%{opacity:1;transform:none}33%,100%{opacity:0;transform:none}}
.ex .dots{display:flex;gap:4px;margin:12px 0 0;animation:dts 21s ease-in-out infinite}
.ex2 .dots{animation-delay:7s}.ex3 .dots{animation-delay:14s}
@keyframes dts{0%,3%{opacity:0}4%,7%{opacity:1}9%,100%{opacity:0}}
.ex .dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-45);
  animation:bob .9s ease-in-out infinite}
.ex .dots i:nth-child(2){animation-delay:.15s}
.ex .dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-3px);opacity:1}}
@media(prefers-reduced-motion:reduce){
  /* One exchange, fully visible, no cycle. */
  .thread{min-height:0}
  .ex{position:static;opacity:1;animation:none}
  .ex .a{opacity:1;animation:none}
  .ex .dots{display:none}
  .ex2,.ex3{display:none}
}

/* The guide capture is 488 CSS px wide and lands in a 488px card — 1:1, which
   is the whole reason it was re-captured at that width. It is also 990 tall,
   so the card shows the top of it behind a fade rather than scaling a long
   answer down to fit. */
.gshot{position:relative;overflow:hidden;border-radius:14px}
.gshot .frame{border-radius:14px}
.gfade{display:none}

/* ── ONE COLUMN NOW, NOT TWO ──────────────────────────────────────────
   This was text on the left and a screenshot carousel on the right, and
   the two-column split was right for a 594px still. It is wrong for the
   app tour that replaced it: the clip is 1440 device pixels wide, and in
   a 1.18fr column it renders at about 0.78x — an app being scrolled
   through, at 78% of the size the type was designed for.

   Full width puts the laptop at 724px, which is 1:1, and it matches the
   document section further up the page where the same frame already sits
   under centred text. Two laptops on one page arranged two different ways
   would read as an accident. */
.tailrow{display:block;margin-top:34px}
.tail{max-width:660px;margin:0 auto 26px;text-align:center}
.tail .lede{font-size:16px;color:var(--ink-70);line-height:1.62;margin:0 0 22px}
.tail .swap{font-family:Literata,serif;font-size:clamp(16px,2.1vw,19px);line-height:1.5;
  margin:0;color:var(--ink-70)}
.tail .swap b{color:var(--ink);display:block;font-size:1.1em;margin:6px 0}

/* ── THE SPACES ──────────────────────────────────────────────────────
   A stack of three screens in one frame, cross-fading. The images are
   absolutely positioned so the frame never resizes between them — a panel
   that grows and shrinks as it cycles is the thing that makes a carousel
   feel cheap. The aspect ratio comes from the capture, so the box is the
   right height before a single image has decoded. */
.sptabs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.sptab{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-45);
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.sptab:hover{color:var(--ink-70)}
.sptab.on{background:var(--ember);border-color:var(--ember);color:#fff}
.sptab:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.spstack{position:relative;aspect-ratio:2200/1440;background:var(--paper)}
.spstack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease}
.spstack img.on{opacity:1}
@media(prefers-reduced-motion:reduce){.spstack img{transition:none}}

.price{text-align:center;margin-top:26px}
.price .amt{font-family:Literata,serif;font-size:40px;letter-spacing:-.02em;display:block}
.price .amt small{font-size:15px;color:var(--ink-45);font-family:"Public Sans",sans-serif;
  letter-spacing:0}
.foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:70px 0 30px;
  padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-45)}
.foot .sp{margin-left:auto}.foot a{color:var(--ink-70)}

/* ═══ VERSION 2 — WEIGHT ═════════════════════════════════════════════════
   Andy's mother, and she is right: "plain and empty… doesn't seem like a
   product." Worth being precise about the cause before reaching for
   decoration, because the fix is different depending on the answer.

   It was not a shortage of ornament. It was that EVERY SECTION SAT ON THE
   SAME FLAT GREY. With one ground from top to bottom, nothing has a floor,
   no section is worth more than any other, and generous whitespace stops
   reading as chosen and starts reading as unfinished. A page like that feels
   like a document even when every component on it is well made.

   So the work here is grounds, hierarchy and depth — not stickers:

     four grounds     paper, ink, slate, sand — each section stands on one,
                      full-bleed, so the page has a rhythm you can feel while
                      scrolling past at speed
     a real scale     display sizes go up, tracking tightens, and the one
                      number on the page is set as a number
     depth            a warm bloom behind the mark, layered shadows, and the
                      phone allowed to break its own band
     texture          a grain at 3% and a dot grid at 4%. Both are meant to be
                      felt rather than seen; if you can point at either one,
                      it is turned up too far.

   Nothing below changes a word of copy or the order of anything. */

:root{
  --sand:#F7F1E8; --sand-line:#EADCC8;
  --ink-deep:#171A20; --ink-band:#20242C;
  --slate:#EDF2F6; --slate-line:#D8E3EC; --slate-ink:#2C5468;
  --ember-lo:#E08A55;
}

/* FULL-BLEED FROM INSIDE A FIXED MEASURE. The page is one 1060px column, so a
   band has to escape it and then rebuild the same measure with padding. 100vw
   would include the scrollbar and add a horizontal scrollbar of its own on
   Windows; 100% of the body plus a clip does not. */
/* BOTH, not just body. A clip on body stops the bloom being PAINTED outside
   the page, but the viewport's own scroll area is the initial containing
   block, not body — so the document still scrolled 13px sideways on a phone
   with nothing out there to scroll to. Measured after the .wrap clip came
   off: scrollWidth 403 against a clientWidth of 390, with NO element
   overflowing, because what sticks out is the hero bloom — a pseudo-element,
   which an element-by-element sweep cannot see. */
html,body{overflow-x:clip}
/* THE CLIP THAT USED TO BE HERE IS GONE, AND THAT IS THE POINT.
   .wrap had overflow-x:clip, for the hero bloom — an absolutely-positioned
   decoration is still part of its parent's scroll area, so the glow was
   widening the page. It worked, and it also silently ate the footer.

   The footer bleeds out of .wrap with margin-inline:calc(50% - 50vw) to sit
   edge to edge. A clip on .wrap makes that impossible by construction: the
   element still LAYS OUT at full window width — getBoundingClientRect
   reported 1180 of 1180, which is why a measurement pass called it
   full-bleed — but it is PAINTED only inside the wrap's 1060px box. Layout
   said yes, pixels said no, and the dark bar rendered with 60px of light
   grey down either side.

   body{overflow-x:clip} four lines up already stops the page scrolling
   sideways, and it clips at the window rather than at the content column,
   so the bloom is still contained and the footer can reach the edge. One
   clipping context, at the only level that should have one.

   Measuring rule this cost: for anything that bleeds past its parent, check
   a PIXEL, not a bounding box. */
.band{margin-inline:calc(50% - 50vw);padding-inline:max(20px,calc(50vw - 530px));
  padding-block:64px;position:relative}
.band + .band{margin-top:0}
.band.paper{background:var(--paper)}
.band.sand{background:var(--sand);border-block:1px solid var(--sand-line)}
.band.cool{background:var(--slate);border-block:1px solid var(--slate-line)}
/* ── THE DARK ONE COMES IN OFF THE EDGES ─────────────────────────────
   Andy: "Can this black box have rounded edges?" It can, but not while it is
   full-bleed — a radius that meets the edge of the screen reads as a
   rendering fault rather than a shape. So this band alone stops spanning the
   viewport and becomes a panel sitting on the page, which is what a radius
   needs to make sense. overflow:hidden is what makes the grain layer respect
   the corners; without it the noise squares them off again. */
.band.dark{margin-inline:0;border-radius:clamp(20px,2.6vw,30px);overflow:hidden;
  padding-inline:clamp(24px,5vw,56px);padding-block:clamp(44px,6vw,68px);
  margin-block:clamp(40px,6vw,64px);
  box-shadow:0 2px 4px rgba(23,26,32,.16),0 34px 60px -34px rgba(23,26,32,.6);
  background:
  radial-gradient(900px 380px at 22% 0%,#2A2018 0%,transparent 62%),
  linear-gradient(168deg,#22262E 0%,var(--ink-deep) 68%,#1C1712 100%);
  color:#C3CAD5}

/* GRAIN. An SVG turbulence, inlined, at 3%. It does for a flat fill what
   paper stock does for print: stops a large area of one color reading as a
   rendering default. */
.band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;
  background-image: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.band.dark::before{opacity:.05}
/* A dot grid on the one band that carries the product tour, so the diagrams
   sit on something rather than in nothing. */
.band.dots{background-image:radial-gradient(var(--line) 1px,transparent 1px);
  background-size:26px 26px}
.band > *{position:relative;z-index:1}

/* ── THE HERO ────────────────────────────────────────────────────────
   A bloom behind the wordmark, warm, wide and very soft. It is the only
   saturated thing above the fold and it is what makes the mark feel lit
   rather than printed. */
.hero{padding:56px 0 22px;position:relative}
.hero::before{content:"";position:absolute;left:50%;top:-90px;transform:translateX(-50%);
  width:min(900px,116%);height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,#B0512A2E 0%,#C9743F14 42%,transparent 72%)}
.hero > *{position:relative;z-index:1}
.mark{font-size:clamp(42px,9.6vw,96px);margin-bottom:26px;
  text-shadow:0 1px 0 #fff,0 14px 34px #B0512A26}
.hero h1{font-size:clamp(30px,5.2vw,50px)}
/* The promise sits on a rule rather than floating: two hairlines and a little
   air turn a stray sentence into a caption for the mark above it. */
.hero .lede.big{position:relative;padding:18px 0 0;max-width:560px}
.hero .lede.big::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:56px;height:2px;background:var(--ember);opacity:.5}
.btn.p{box-shadow:0 1px 2px rgba(18,89,75,.2),0 12px 26px -12px rgba(18,89,75,.55);
  transition:transform .16s ease,box-shadow .16s ease}
.btn.p:hover{transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(18,89,75,.24),0 16px 30px -12px rgba(18,89,75,.6)}

/* ── SECTION FURNITURE ───────────────────────────────────────────────
   A label with a rule running out of it. Cheap, and it does the thing a bare
   centered heading cannot: it tells you a new section started. */
.eyebrow{display:flex;align-items:center;gap:12px;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember);margin:0 0 6px}
.eyebrow i{height:1px;width:44px;background:currentColor;opacity:.42;display:block}
.band.cool .eyebrow{color:var(--slate-ink)}
h2.sec{margin-top:0;font-size:clamp(26px,4.2vw,36px);letter-spacing:-.022em}
p.secsub{font-size:16px;line-height:1.62}
.band.cool h2.sec,.band.cool p.secsub{color:var(--slate-ink)}
.band.cool p.secsub{opacity:.86}

/* ── THE TOUR ────────────────────────────────────────────────────────
   Each row gets a card of its own. On a shared ground three rows of text and
   pictures run together; given edges they read as three things. */
.tn{background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:30px 30px 32px;
  box-shadow:0 1px 2px rgba(32,36,44,.05),0 20px 44px -30px rgba(32,36,44,.4)}
@media(min-width:900px){.tn{padding:34px 38px 36px;gap:38px}}
.tlab{font-size:11.5px}
.tlab b{color:var(--ember)}
/* The phone leans out of its card — the one element allowed to break the grid,
   which is what stops the row looking like a slide. */
.phone{transform:translateY(10px) rotate(-1.4deg);transition:transform .3s ease}
.tn:hover .phone{transform:translateY(6px) rotate(0deg)}
@media(prefers-reduced-motion:reduce){.phone,.tn:hover .phone{transform:none}}

/* ── THE STAT ────────────────────────────────────────────────────────
   The one number on the page, set as one. On the light card it was a bold
   run inside a sentence, which is a number mentioned; at this size on ink it
   is a number stated. */
.burn{margin:0 auto;background:none;border:0;box-shadow:none;padding:0;max-width:820px;
  text-align:center}
/* SCOPED UNDER .burn, and that is not tidiness. `.burn p` is (0,1,1) and
   `.bignum` was (0,1,0), so the body-copy size won the cascade and the one
   display number on the page rendered at 15.5px — the exact opposite of the
   point. Both display rules now outrank it. */
.burn .bignum{font-family:Literata,serif;font-weight:700;color:var(--ember-lo);
  font-size:clamp(78px,16vw,168px);line-height:.86;letter-spacing:-.04em;margin:0 0 14px;
  text-shadow:0 20px 60px rgba(224,138,85,.22)}
.burn .bignum span{font-size:.44em;vertical-align:.42em;margin-left:.02em;opacity:.72}
.burn .bstat{font-family:Literata,serif;font-size:clamp(19px,2.9vw,27px);line-height:1.34;
  letter-spacing:-.014em;margin:0 auto 22px;color:#fff;max-width:620px}
.burn p{color:#B4BCC8;font-size:15.5px;line-height:1.72;max-width:660px;
  margin-inline:auto}
.burn b{color:#fff}
.bsrc{border-top:1px solid rgba(255,255,255,.12)!important;color:#7F8896!important;
  max-width:520px!important}

/* ── THE TWO CARDS ───────────────────────────────────────────────────── */
.gcd{border-radius:20px;padding:26px 26px 24px;border-color:#fff;
  box-shadow:0 1px 2px rgba(44,84,104,.08),0 22px 44px -26px rgba(44,84,104,.42)}
/* A label that says which of the two you are looking at, in the color that
   part of the app already uses: ember for Ember, slate for the guide.

   THIS USED TO BE :last-child, WHICH MEANT IT WAS ABOUT POSITION RATHER THAN
   ABOUT WHICH PRODUCT THE CARD DESCRIBES. That held only while both pages
   listed the two in the same order. The Colorado page now leads with the
   guide — correctly, since the guide is the only Colorado-gated part of the
   product — and the positional rule silently painted Ember's colour on the
   guide and the guide's on Ember: the one thing these dots exist to prevent.
   The class says which card it is, so reordering cannot break it again. */
.gk{display:flex;align-items:center;gap:9px}
.gk::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ember);
  flex:none}
.gcd.guide .gk::before{background:var(--slate-ink)}
.ex .q{background:linear-gradient(160deg,#2A2F39,#20242C);
  box-shadow:0 8px 18px -12px rgba(32,36,44,.6)}
.ex .a{background:#fff;border-color:#E3E8EE;
  box-shadow:0 6px 16px -12px rgba(32,36,44,.4)}

/* ── PRICE ───────────────────────────────────────────────────────────── */
.price .amt{font-size:clamp(44px,7vw,62px);color:var(--ink);line-height:1;
  letter-spacing:-.035em}
.price .amt small{display:block;font-size:14px;margin-top:8px;letter-spacing:.02em}
.band.sand .btn.p{box-shadow:0 1px 2px rgba(18,89,75,.22),0 14px 30px -12px rgba(18,89,75,.6)}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.foot{margin:0;background:var(--ink-deep);color:#7F8896;
  margin-inline:calc(50% - 50vw);padding:26px max(20px,calc(50vw - 530px));
  border:0;font-size:12.5px}
.foot a{color:#B4BCC8}
.foot a:hover{color:#fff}
/* ── AND THE 90 PIXELS UNDER IT ──────────────────────────────────────
   hearth.css gives .wrap 90px of bottom padding. That is invisible on every
   other page on the site, because every other footer is transparent text on
   the page's own grey. This one is a dark bar bled to the full width of the
   window, so the padding became a 90px strip of light grey BELOW the footer
   — the footer stops, and then the page keeps going. The bar supplies its
   own 26px of internal padding, so the wrap's is not needed here.
   Same specificity as hearth.css and later in the cascade, so no
   !important. */
.wrap{padding-bottom:0}

/* ── THE CROSS-LINK ───────────────────────────────────────────────────
   One line under the guidance pair on the home page, pointing at
   /colorado/. It sits inside .band.cool, so it takes that band's ink
   rather than the page's; centred and small, because it is a signpost for
   the subset of readers it applies to, not a claim the page is making. */
.costrip{margin:26px 0 0;text-align:center;font-size:14.5px;line-height:1.6;
  color:var(--slate-ink);opacity:.9}
.costrip a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);
  text-underline-offset:3px;font-weight:600}
.costrip a:hover{text-decoration-color:currentColor}

/* ── THE STATE REQUEST (home page, 30 Sep) ────────────────────────────
   Sits in .band.cool under the Colorado strip. One row on a laptop, stacked
   on a phone; the button keeps the site's pine so it reads as the action. */
.stateform{max-width:640px;margin:0 auto}
.stateform .sfrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.stateform select,.stateform input[type=email]{flex:1 1 190px;min-width:0;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:14.5px;
  font-family:inherit}
.stateform select:focus,.stateform input[type=email]:focus{outline:2px solid var(--pine);outline-offset:-1px}
.stateform .btn{flex:0 0 auto}
.stateform .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stateform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sfmsg{margin:10px 0 0;text-align:center;font-size:14px;min-height:1.4em}
.sfmsg.good{color:var(--slate-ink)}
.sfmsg.bad{color:#8C2D14}
@media (max-width:520px){ .stateform .sfrow{flex-direction:column;align-items:stretch}
  .stateform select,.stateform input[type=email]{flex:0 0 auto} }

/* ── "GOOD NEWS", after a state request is sent (6 Oct) ────────────────
   Takes the place of the question and its boxes. A card, in the green the
   live states' ticks use two lines above it, because it is an answer and the
   grey line it replaces read as a receipt. `hidden` has to win over the
   display the row is given, hence the two attribute rules. */
.stateform .sfrow[hidden],.stateform .mwask[hidden]{display:none}
.sfgood{margin:2px 0 0;padding:20px 22px 22px;border-radius:14px;background:#EAF5EE;
  border:1px solid #BFE0CB;color:var(--ink);text-align:left}
.sfgood:focus{outline:none}
.sfgood:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.sfgood p{margin:0}
.sfgk{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1F6B3D}
.sfgk::before{content:"\2713";margin-right:7px}
.sfgh{font-family:Literata,Georgia,serif;font-size:22px;line-height:1.25;font-weight:600;
  margin-top:7px !important;text-wrap:balance}
.sfgp{font-size:14.5px;line-height:1.55;color:var(--ink-70);margin-top:9px !important;max-width:52ch}
.sfga{margin-top:16px !important;display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap}
.sfga .btn.p{padding:12px 26px;font-size:15px;text-decoration:none}
.sfga span{font-size:13.5px;color:var(--ink-70)}
@media (max-width:520px){ .sfgood{padding:18px 16px 20px} .sfgh{font-size:20px}
  .sfga .btn.p{width:100%;text-align:center;padding:12px 10px;white-space:nowrap} }

/* ── THE LIBRARY FRESHNESS LINE ───────────────────────────────────────
   One quiet line under the guidance pair saying how many policy documents
   the library holds and when it was last checked. It is small on purpose:
   it is evidence for the claim in the heading above it, not a claim of its
   own, and evidence that shouts reads as boasting.

   The count and date ship in the HTML and are refreshed by
   /assets/library.js — see the note at the top of that file for why that
   order and not the other one. */
.libstat{margin:20px 0 0;text-align:center;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.05em;color:var(--ink-45);line-height:1.7}
.band.cool .libstat{color:var(--slate-ink);opacity:.62}
.libstat b{font-weight:500;color:inherit}


/* ── HEAR FROM CAREGIVERS (2 Oct) ─────────────────────────────────────
   Three quote cards, after the ones Andy designed: light, green and dark,
   each with its own highlight colour — peach on white, gold on green, ember
   on near-black. The highlight is a <mark>, so a reader skimming the section
   gets the outcome ("get my son an IEP", "recover over $8,000") without
   reading the sentence around it, and a screen reader still reads the whole
   quote in order.

   One column below 900px rather than three squeezed ones: a quote set at
   17px in a 240px column is nine words a line and reads as a list. */
.voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.voice{margin:0;border-radius:18px;padding:28px 26px 24px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  box-shadow:0 1px 2px rgba(32,36,44,.05),0 16px 36px -22px rgba(32,36,44,.3)}
.voice .qm{font-family:Literata,serif;font-weight:700;font-size:66px;line-height:.72;height:32px;
  color:var(--ember);margin:0 0 16px}
.voice blockquote{margin:0;font-family:Literata,serif;font-size:clamp(17px,1.6vw,19.5px);
  line-height:1.52;letter-spacing:-.008em}
.voice mark{background:#F3D3C0;color:var(--ink);font-weight:700;padding:1px 5px;border-radius:5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.voice figcaption{margin-top:auto;padding-top:24px;display:flex;gap:12px;align-items:flex-start;
  font-family:"Public Sans",sans-serif}
.voice figcaption::before{content:"";width:28px;height:2px;background:var(--ember);
  margin-top:10px;flex:none;opacity:.8}
.voice .who{display:block;font-weight:700;font-size:15px}
.voice .role{display:block;font-size:13px;line-height:1.45;color:var(--ink-70);margin-top:2px}

.voice.green{background:#2F6B5F;border-color:#2F6B5F;color:#fff}
.voice.green .qm{color:var(--gold)}
.voice.green mark{background:var(--gold)}
.voice.green figcaption::before{background:var(--gold)}
.voice.green .role{color:rgba(255,255,255,.84)}

.voice.dark{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.voice.dark .qm{color:var(--ember-lo)}
.voice.dark mark{background:var(--ember-lo);color:var(--ink-deep)}
.voice.dark figcaption::before{background:var(--ember-lo)}
.voice.dark .role{color:rgba(255,255,255,.8)}

/* Who is speaking, and that nothing here is a promise. Small, but ordinary
   body ink rather than the faintest grey: it is a disclosure, not a footnote
   to be missed. */
.voicenote{text-align:center;font-size:13px;line-height:1.6;color:var(--ink-70);
  max-width:620px;margin:22px auto 0}
@media(max-width:900px){
  .voices{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}


/* ══ 4 Oct: THE HOME PAGE, REORDERED FOR SOMEBODY ARRIVING FROM AN AD ═══
   Hero with the app in it, who built it, the quotes, then the features one
   at a time. Everything below is additive: /colorado/ shares this file and
   none of its markup uses these classes. */

/* The offer, under the hero button. Body ink rather than the faint italic of
   .fine — it is the price, not a footnote. */
.heroffer{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-70)}

/* ── a laptop and a phone ──
   The laptop is the page's existing .mbook. The phone overlaps its corner,
   and every measurement on it is a percentage of the group's width so the
   two stay in proportion from a 1060px column down to a 350px one. */
.hdev{position:relative;max-width:820px;margin:40px auto 0;padding:0 0 3.5%}
/* An <a> since 13 Oct (the picture links to the trial). */
a.hdev{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a.hdev:focus-visible{outline:2px solid var(--pine);outline-offset:6px;border-radius:12px}
.hdev .mbook{max-width:none;margin:0 7% 0 0}
.hdev .mscreen img{width:100%;height:100%;display:block;object-fit:cover;object-position:left top}
.hphone{position:absolute;right:0;bottom:0;width:20.5%;background:#20242C;
  border-radius:15% / 7%;padding:1.05%;
  box-shadow:0 1px 2px rgba(32,36,44,.12),0 22px 44px -18px rgba(32,36,44,.55)}
.hps{border-radius:11.5% / 5.3%;overflow:hidden;background:#fff;aspect-ratio:520/1125}
.hps img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}
@media(max-width:600px){
  .hdev{margin-top:30px;padding-bottom:6%}
  /* .mbook bleeds 20px either side on a phone everywhere else on the page;
     here it has a phone standing beside it and must not. */
  .hdev .mbook{margin:0 9% 0 0}
  .hphone{width:27%;padding:1.4%}
}

/* The way to the Colorado page, under the line about the policy library. */
.cogo{text-align:center;margin:14px 0 0}
.cogo .btn{text-decoration:none;display:inline-block}

/* ── the feature carousel ──
   A scroll-snapping row: one card to a screen, a thumb swipes it, and with
   no script at all it still scrolls. `.on` is added by the script, which
   also sets the row's height to the showing card's so a short card is not
   followed by the empty space of the tallest one. */
/* The symptom tracker's picture on the fourth card. Shown whole, with the
   same fade as the Medicaid pictures: the list carries on below. */
.symfig{margin:0 auto;min-width:0;width:100%;max-width:560px}
.symshot{display:block;position:relative;background:#fff}
.symshot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff)}
.symnote{margin:12px 2px 0;text-align:left;font-size:12.5px;line-height:1.5;color:var(--slate-ink);opacity:.72}
/* Under 600 px the picture is the phone's own layout, taken at about 300 px
   wide; it is not stretched to fill a small tablet. */
@media (max-width:599px){.symfig{max-width:340px}}
.car{margin-top:26px}
.car .turns.cartrack{display:flex;gap:18px;margin-top:0;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  align-items:flex-start;scrollbar-width:none;border-radius:22px;outline-offset:4px}
.car .cartrack::-webkit-scrollbar{display:none}
.car .cartrack>.tn{flex:0 0 100%;min-width:0;box-sizing:border-box;scroll-snap-align:center;
  scroll-snap-stop:always}
.car.on .cartrack{transition:height .28s ease}
.carnav{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 18px}
.carnav[hidden]{display:none}
.carbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0;
  box-shadow:0 1px 2px rgba(32,36,44,.06);transition:border-color .14s ease,background .14s ease}
.carbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.carbtn:hover:not(:disabled){border-color:var(--ink-45);background:var(--wash)}
.carbtn:disabled{opacity:.35;cursor:default}
.carbtn:focus-visible,.cardot:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.cardots{display:flex;gap:4px;align-items:center}
/* A 28px target around a 9px dot: big enough for a thumb, small enough to
   read as a position marker rather than four more buttons. */
.cardot{width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;
  display:grid;place-items:center}
.cardot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);
  transition:background .14s ease,transform .14s ease}
.cardot[aria-current]::before{background:var(--ember);transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.car.on .cartrack{transition:none}}

/* ── A TRIAL BUTTON PART WAY DOWN, 6 Oct ──────────────────────────────
   Andy, the day the page was reordered: "we need to add a few more 'Start
   Trial' throughout the page". Until then a laptop had the hero's and the
   price's and nothing in the 7,000 pixels between.

   Three: after the quotes, at the foot of the waiver section, and after Ask
   Ember. The SAME link and class as the hero's, for two reasons that are
   both somebody else's code: the ad measurement counts a tap by that href,
   and the phone bar hides itself while any such button is on screen, so it
   never repeats one of these. */
.midcta{text-align:center;margin:40px 0 0}
.midcta .btn.p{padding:13px 30px;font-size:15.5px;text-decoration:none;display:inline-block}
.midcta span{display:block;margin-top:11px;font-size:13.5px;line-height:1.5;color:var(--ink-70)}
.band.cool .midcta span{color:var(--slate-ink);opacity:.8}
/* The one after the quotes is a strip of its own. It cannot go inside the
   quotes' band: that block is word for word the same on /colorado/, and a
   test holds it there. As a strip of the page's paper it also parts two
   blue bands that would otherwise run together. */
.band.cta{padding-block:38px}
.band.cta .midcta{margin:0}

/* ── the button, kept in reach on a phone ── */
.stickycta{display:none}
@media(max-width:720px){
  .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;
    gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -14px rgba(32,36,44,.35)}
  .stickycta[hidden]{display:none}
  .stickycta .btn.p{flex:1 1 auto;text-align:center;text-decoration:none;padding:12px 14px;
    font-size:15px}
  .stickycta span{flex:none;font-size:12px;line-height:1.3;color:var(--ink-70);max-width:74px}
  /* Room under the footer, so the bar never sits on the last line of it. */
  body.hascta .foot{padding-bottom:86px}
}

/* ── THE WAIVER SECTION, AS A SWITCHER ───────────────────────────────────
   Home page, 5 Oct. Five names always on screen and one picture at a time
   (four at first; IEP review joined them the same day).
   NOT A CAROUSEL: a carousel shows one slide and hides the names of the
   others, so most visitors would only ever read the first. Here somebody who
   never presses anything has still read every one.

   `#waiver.on` IS SET BY THE SCRIPT THAT FOLDS THE PANELS AWAY. Anything that
   only makes sense once the others are hidden hangs off it, so the page
   without JavaScript is every picture under its own sentence, and not a row
   of pictures with their sentences missing. */
.mwgrid{display:grid;gap:22px;margin-top:34px;align-items:start}
.mwtabs{display:grid;gap:10px}
.mwtab{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  padding:16px 18px;border-radius:16px;border:1px solid transparent;background:transparent;
  color:var(--slate-ink);font:inherit;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.mwtab:hover{background:rgba(255,255,255,.5)}
.mwgrid.on .mwtab[aria-selected="true"]{background:var(--card);border-color:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(32,36,44,.05),0 14px 30px -18px rgba(32,36,44,.35)}
.mwtab:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.mwn{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;
  border:1px solid currentColor;opacity:.55;margin-top:1px}
.mwgrid.on .mwtab[aria-selected="true"] .mwn{background:var(--ink);border-color:var(--ink);
  color:#fff;opacity:1}
.mwtx{display:block;min-width:0}
.mwtx b{display:block;font-family:Literata,Georgia,serif;font-size:19px;font-weight:700;
  letter-spacing:-.012em}
.mwtx span{display:block;margin-top:3px;font-size:14px;line-height:1.5;opacity:.8}
.mwgrid.on .mwtab[aria-selected="true"] .mwtx span{color:var(--ink-70);opacity:1}
.mwshow{min-width:0;display:grid;gap:26px}
.mwgrid.on .mwshow{gap:0}
.mwpanel{min-width:0}
.mwpanel[hidden]{display:none}
.mwcap{margin:0 2px 12px;font-size:14.5px;line-height:1.5;color:var(--slate-ink)}
/* The picture is taller than the window it is shown in, and fades out at the
   bottom: a screen that carries on, not a screen cut off. */
.mwscreen{display:block;background:#fff;max-height:540px;overflow:hidden;position:relative}
.mwscreen.pad{padding:10px 18px 0}
.mwscreen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff)}
.mwnote{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--slate-ink);opacity:.72}
@media (min-width:760px){
  .mwgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px}
  /* With the names beside it, the sentence under each name is the caption. */
  .mwgrid.on .mwcap{display:none}
  .mwgrid.on .mwshow{position:sticky;top:20px}
}
@media (max-width:759px){
  /* On a phone the names become two columns of buttons, the sentence for the
     chosen one sits under them, and the picture is the phone's own layout.
     An odd one out at the end takes the whole row, so five names are two
     rows and a full-width third and not a grid with a hole in it. */
  .mwtabs{grid-template-columns:1fr 1fr;gap:8px}
  .mwtab:last-child:nth-child(odd){grid-column:1 / -1}
  .mwtab{padding:11px 12px;gap:9px;align-items:center;background:rgba(255,255,255,.4)}
  .mwn{width:22px;height:22px;font-size:11px;margin:0}
  .mwtx b{font-size:15px}
  .mwtx span{display:none}
  .mwscreen{max-height:470px}
  .mwscreen.pad{padding:8px 12px 0}
}

/* ── what a state adds (and the card Ask Ember sits in, further down) ────
   THE HEADING. It was a small capital label, "And in your state". Andy,
   5 Oct: "Say 'State-specific Medicaid guidance' and this font should be a
   bit bigger/easier to read." So it is a heading in the page's heading face,
   one step under the section's own, in the same ink. ("Medicaid" came out of
   the words later that day; the size is what this rule is about.) */
.mwstate{margin-top:50px;padding-top:38px;border-top:1px solid var(--slate-line)}
.mwh{margin:0;text-align:center;font-family:Literata,Georgia,serif;font-weight:700;
  font-size:clamp(22px,3.2vw,28px);line-height:1.25;letter-spacing:-.018em;
  color:var(--slate-ink);text-wrap:balance;
  /* hearth.css makes every h3 a small capital label with a rule under it,
     which is the thing this heading stopped being. */
  text-transform:none;padding:0;border:0}
/* .gcd is a flex column everywhere else. Here it is two columns: the words
   and, beside them, the thing the words are about. */
.gcd.mwlib{margin-top:22px;display:grid;gap:26px;align-items:start}
.mwlibtx{min-width:0}
.mwlib .gsub,.mwpara{font-size:15px;line-height:1.6;color:var(--ink-70)}
.mwpara{margin:0}
.mwstates{list-style:none;margin:2px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.mwstates li{font-size:13.5px;font-weight:600;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.mwstates li.on{background:#EAF5EE;border-color:#BFE0CB;color:#1F6B3D}
.mwstates li.on::before{content:"✓";margin-right:6px;font-weight:700}
.mwstates li.soon{border-style:dashed;color:var(--ink-70);font-weight:500;background:transparent}
.mwalso{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink-70)}
.mwlib .mwlibstat{text-align:left;margin:14px 0 0}
.mwlib .cogo{text-align:left;margin:16px 0 0}
.mwlib .mwform{max-width:none;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.mwask{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-70)}
.mwask b{color:var(--ink)}
.mwform .sfrow{justify-content:flex-start}
.mwform .sfmsg{text-align:left}
/* THE WHOLE CARD, EDGE TO EDGE. Andy on the first version, which reused the
   poster frame of a screen recording: "a little cut off almost looks zoomed
   in". This is the card itself at the width it is shown, nothing cropped and
   no window drawn round it: it has a border of its own. */
.mwlibpic{min-width:0}
.mwlibpic picture{display:block}
.mwlibpic img{display:block;width:100%;height:auto;border-radius:16px;
  box-shadow:0 1px 2px rgba(32,36,44,.06),0 18px 40px -22px rgba(32,36,44,.4)}
/* The phone stands straight here. Its lean belongs to the row it leans out
   of; inside a card it only looks crooked. */
.mwember .phone{transform:none;max-width:228px}
@media (min-width:760px){
  .gcd.mwlib{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:center}
  .gcd.mwember{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
/* On a phone "Disability Guide policy library" takes two lines, and a dot
   centred on two lines sits between them. It belongs beside the first. */
.mwlib .gk{align-items:flex-start}
.mwlib .gk::before{margin-top:.5em}
/* Ask Ember's examples, one to a line (Andy, 5 Oct). And the card under a
   section heading of its own, now that it has one. */
.mwq{margin:10px 0 0;padding-left:20px;font-size:15px;line-height:1.55;color:var(--ink-70)}
.mwq li{margin-bottom:7px;font-style:italic}
.mwq li::marker{color:var(--ember)}
h2.sec + .gcd.mwlib{margin-top:30px}