/* Molina product page. A deep green field with light on it: one history, every world it can reach, and the one that broke.
   Scale says what matters and nothing else is loud. Flat: no gradients, no glass, no shadows, no cards, corners of 3 px.
   Two greens alternate down the page (band-ink is the deepest, band-paper the lifted one). Every component reads the band's
   tokens (--ground, --text, --dim, --fail, --fail-stroke, --line), so one rule is right on both. Coral is for what failed.
   Two scales run the whole page and nothing is sized outside them:
   - type: five sizes, named once below (display, headline, lede, body, caption). A rule that sets a font size names one of them.
   - space: one unit of 4 px (--u) and its multiples (--s2 is 8 px, --s4 is 16 px, --s8 is 32 px). A rule that sets a gap, a margin or a padding names one of them.
   No framework. Newsreader and Hanken Grotesk are self-hosted (SIL OFL, see /molina/fonts). */

@font-face{font-family:"Newsreader";font-weight:200 800;font-style:normal;font-display:swap;src:url(/molina/fonts/newsreader-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:100 900;font-style:normal;font-display:swap;src:url(/molina/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}

:root{
  --deep:#0a201a;            /* the deepest green, the ground of most of the page */
  --lift:#11302a;            /* the lifted green that alternates with it */
  --leaf:#dcebe2;            /* the light: 14 to 1 on the deep green */
  --leaf-dim:#a3bdb0;        /* quiet text: 8.5 to 1 on the deep green and 7.1 to 1 on the lifted one */
  --coral:#ff7f60;           /* what failed, drawn: 6.9 to 1 on the deep green */
  --coral-text:#ff9c82;      /* what failed, written in a label: 8.3 to 1 on the deep green, because small text needs 7 to 1 */
  --trace:#a3bdb0;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* space: one unit and its multiples */
  --u:.25rem;                /* 4 px */
  --s1:var(--u);
  --s2:calc(var(--u) * 2);
  --s3:calc(var(--u) * 3);
  --s4:calc(var(--u) * 4);
  --s5:calc(var(--u) * 5);
  --s6:calc(var(--u) * 6);
  --s8:calc(var(--u) * 8);
  --s10:calc(var(--u) * 10);
  --s12:calc(var(--u) * 12);
  --s14:calc(var(--u) * 14);
  --s16:calc(var(--u) * 16);
  --s18:calc(var(--u) * 18);
  --s24:calc(var(--u) * 24);

  /* type: the five sizes, with the line height each one is set at. Phone first; a tablet and a desktop set their own below. */
  --fs-display:2.5rem;       /* the page's headline, and nothing else: every other size is at most 0.65 of it */
  --fs-headline:1.5rem;      /* a band's statement, whatever it says */
  --fs-lede:1.25rem;         /* the sentence the headline leads into, the name of a block, the wordmark */
  --fs-body:1.125rem;        /* running text, buttons and lists */
  --fs-caption:1rem;         /* labels, figure notes, the footer */
  --lh-display:1.08;
  --lh-headline:1.12;
  --lh-lede:1.4;
  --lh-body:1.55;
  --lh-caption:1.5;

  --edge:1600px;             /* the widest the content gets: one centred container holds the bar, the hero's words and tree, every band and the foot */
  --gut:var(--s5);           /* the page's side margin */
  --side:max(var(--gut),(100% - var(--edge)) / 2);   /* from the window's edge to the container's: the side margin, or the room a wide window leaves on each side */
  --gap:var(--s2);           /* between grid columns */
  --cols-gap:var(--s6);      /* the one gap between the columns of every two-column section, so the second column starts at the same place in all of them */
  --bar:64px;
  --band:var(--s12);         /* a band's space above and below */
  --band-tight:var(--s6);    /* the same when a band follows another band of the same ground, so two of them read as one field */
  --row:var(--s6);           /* between a statement and what sits under it */
  --measure:36rem;           /* the widest a line of running text gets: about 60 characters at body size */
  --col-text:36rem;          /* the hero's text column */
  --tw:2.2;                  /* line weight multiplier for the hero tree: a phone draws it small */
  --tick-length:8px;         /* a mark on the margin rail, which reads as progress down the page */
  --rail-gap:52px;           /* from the end of a rail mark to the first letter of any text: 48 px at the least */
}
@media (min-width:600px){
  :root{
    --leaf-dim:#b4cbbf;
    --fs-display:3rem;
    --fs-headline:1.875rem;
    --fs-lede:1.375rem;
    --fs-body:1.1875rem;
    --fs-caption:1.0625rem;
  }
}
@media (min-width:700px){:root{--gut:var(--s10);--gap:var(--s4);--cols-gap:var(--s10);--band:var(--s16);--band-tight:var(--s8);--row:var(--s8)}}
@media (min-width:1100px){
  :root{
    --leaf-dim:#a3bdb0;
    --fs-display:3.5rem;
    --fs-headline:2.25rem;
    --fs-lede:1.375rem;
    --fs-body:1.125rem;
    --fs-caption:1rem;
    --gut:var(--s18);
    --gap:var(--s6);
    --cols-gap:var(--s14);
    --band:var(--s24);
    --band-tight:var(--s12);
  }
}
@media (max-width:599px){:root{--leaf-dim:#b4cbbf}}
@media (min-width:1000px){:root{--tw:1}}

/* The band tokens. The deep green is the page's default ground, so a page that sets no band (a record page) is deep.
   --fail is the colour of a failure said in words and --fail-stroke the colour of one drawn: both coral. */
:root,.band-ink,.bar,.foot{
  --ground:var(--deep);
  --text:var(--leaf);
  --dim:var(--leaf-dim);
  --fail:var(--coral);
  --fail-stroke:var(--coral);
  --line:rgba(220,235,226,.3);
  --flip-ground:var(--leaf);
  --flip-text:var(--deep);
  --flip-dim:#35574b;
}
.band-paper{
  --ground:var(--lift);
  --text:var(--leaf);
  --dim:var(--leaf-dim);
  --fail:var(--coral);
  --fail-stroke:var(--coral);
  --line:rgba(220,235,226,.3);
  --flip-ground:var(--leaf);
  --flip-text:var(--deep);
  --flip-dim:#35574b;
}
.band-paper,.band-ink,.bar,.foot{background:var(--ground);color:var(--text)}
@media (max-width:1099px){:root,.band-ink,.band-paper,.bar,.foot{--fail:#ff8f73}}

*{box-sizing:border-box}
html{background:var(--deep);scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + var(--s4));-webkit-text-size-adjust:100%}
body{margin:0;color:var(--leaf);background:var(--deep);font:400 var(--fs-body)/var(--lh-body) var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--text);color:var(--ground)}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
main p,main li,main dd{max-width:var(--measure);text-wrap:pretty}
/* a word too long for its line breaks, and a block shrinks to its column: nothing on the page is wider than the window, whatever its words */
:where(main h1,main h2,main h3,main p,main li,main dd,main figure,main div){overflow-wrap:anywhere;min-width:0}
.wrap{width:min(var(--edge),100% - 2*var(--gut));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--leaf);color:var(--deep);padding:var(--s2) var(--s4);z-index:99}
.skip::before{content:attr(data-label)}
.skip:focus{left:var(--s2);top:var(--s2)}
:focus-visible{outline:3px solid var(--text);outline-offset:3px}

/* ---- type: a calm serif for what is said, a plain sans for the rest; size is what says what matters ------------- */
h1,h2,h3,.statement,.result-name{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-synthesis:none;font-optical-sizing:auto}
h1{font-size:var(--fs-display);line-height:var(--lh-display);text-wrap:balance}
/* the headline is two sentences, a question and its answer: each starts its own line, so the answer never begins at the end of the question's line */
.h1-line{display:block}
h2,.statement{font-size:var(--fs-headline);line-height:var(--lh-headline);text-wrap:balance}
h3{font-size:var(--fs-lede);line-height:var(--lh-lede)}
.aside,.gloss,.kicker{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--dim)}
.kicker,.gloss{margin:0}

/* links: underlined, the weight of the line grows on hover */
a{color:inherit}
.inline-link{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--text);text-underline-offset:.2em;transition:text-decoration-thickness .12s}
.inline-link:hover{text-decoration-thickness:3px}
.record-link .inline-link,.more-results .inline-link,.sample-line .inline-link,.see-more .inline-link{display:inline-flex;align-items:center;min-height:44px}

/* ---- the bar: always ink, so the bands pass under it ---------------------------------------------------------- */
.bar{position:sticky;top:0;z-index:40;height:var(--bar)}
.bar-in{height:100%;display:flex;align-items:center;gap:var(--s6)}
a.mark{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;text-decoration:none;font:500 var(--fs-lede)/1 var(--serif);letter-spacing:-.01em;color:var(--text)}
a.mark svg{flex:none}
a.mark svg circle~circle{fill:var(--fail-stroke)}   /* the logo's broken-branch dot takes the failure colour; the markup still says white */
.nav{display:none;margin-left:auto;gap:var(--s8)}
.nav a{display:inline-flex;align-items:center;min-height:48px;white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.35em;color:var(--dim);font:500 var(--fs-caption)/1 var(--font);transition:color .12s,text-decoration-color .12s}
.nav a:hover{color:var(--text);text-decoration-color:var(--text)}
.account{margin-left:auto;display:flex;align-items:center}
@media (min-width:900px){.nav{display:flex}.nav~.account{margin-left:0}.bar-in{gap:var(--s10)}}

/* ---- buttons: plain rectangles, the weight of a stamp --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--s14);padding:0 var(--s8);font:600 var(--fs-body)/1.1 var(--font);text-decoration:none;color:var(--text);background:transparent;border:1px solid var(--text);border-radius:3px;cursor:pointer;transition:background-color .12s,color .12s}
.btn:hover{background:var(--text);color:var(--ground)}
.btn-solid{background:var(--text);color:var(--ground)}
.btn-solid:hover{background:var(--ground);color:var(--text)}
.btn-small{min-height:var(--s12);padding:0 var(--s5);font-size:var(--fs-caption);white-space:nowrap}
.btn:disabled{opacity:.5;cursor:wait}

/* ---- bands ---------------------------------------------------------------------------------------------------- */
.band-paper,.band-ink{padding-block:var(--band)}
/* the last bands are all ink, one after another: they read as one black field, so each takes a smaller share of space */
.band-ink+.band-ink{padding-top:var(--band-tight)}
.band-ink:has(+.band-ink){padding-bottom:var(--band-tight)}

/* A band's wrap is a twelve column grid, left aligned. Everything spans the grid unless it says otherwise; the :where keeps
   those defaults from outranking the one-class placements below. */
:where(main section>.wrap){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--row);align-content:start}
:where(main section>.wrap)>*{grid-column:1/-1}
.statement,h2{margin:0}
/* a statement that is also the way to its record: underlined once, thicker when pointed at */
.statement a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em;text-decoration-color:var(--line);transition:text-decoration-color .12s}
.statement a:hover{text-decoration-color:var(--text)}
@media (min-width:1100px){.statement{max-width:28em}}
/* the number a statement turns on reads first by weight and by the failure's colour, not by size: the statement stays a statement in the page's rhythm */
.statement .figure{font-weight:700;color:var(--coral-text)}
/* the claim's limit is the second line of its heading: lede size and quiet, so the claim stays the biggest thing in the band */
.claim-limit{display:block;margin-top:var(--s3);font-family:var(--font);font-size:var(--fs-lede);line-height:var(--lh-lede);letter-spacing:0;color:var(--dim)}
/* the small quiet text sits directly under its statement, on the left edge it starts from, and never wider than a comfortable line */
.aside{grid-column:1/-1}

/* a block of paragraphs under a statement: body text at a comfortable measure, one paragraph a step from the next */
.body-text{display:grid;gap:var(--s4);max-width:var(--measure)}
/* the call's action: the button and the written way to ask, left aligned with the paragraphs above */
.call-action{display:grid;gap:var(--s4);justify-items:start}
.scene-limit{margin-top:calc(var(--row) * -.5)}
/* the small link after a statement or a line: the site's link style at caption size, close under what it belongs to */
.see-more{margin-top:calc(var(--row) * -.75);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.see-more .inline-link{font-size:var(--fs-caption)}

/* ---- the hero: the headline, the story, one button and the tree of worlds, which has a column of its own ---------- */
.hero{position:relative;overflow:clip;display:flex;flex-direction:column;padding-block:var(--s10) 0}
.hero-in{position:relative;z-index:1;width:min(var(--edge),100% - 2*var(--gut));margin-inline:auto}
/* the text is blocks with a gap between them: the headline, the story, the call, what comes back, and who is speaking */
.hero-text{display:grid;row-gap:var(--s8);max-width:var(--col-text)}
.story,.cta{display:grid;align-content:start}
.story{row-gap:var(--s4)}
.problem{font-size:var(--fs-lede);line-height:var(--lh-lede)}
.cta{justify-items:start}
.hero .btn{min-height:var(--s14)}
/* the tree is its own block below the words on a phone and a tablet, as wide as the page, with the empty sky above its canopy cut off */
.hero-art{--tree:min(100vw,44rem);order:2;position:relative;height:calc(var(--tree) * .86);overflow:hidden;margin-top:var(--s8)}
.tree{width:100%;height:var(--tree);margin-top:calc(var(--tree) * -.14)}
/* From 1100 px the tree stands in a column of its own: it starts where the text column ends and a gap after it and runs to the container's right edge, which is inside the window,
   so no word is ever drawn over a branch and no branch is cut by the window. */
@media (min-width:1100px){
  .hero{display:block;min-height:calc(100svh - var(--bar));padding-block:var(--s12)}
  /* on a tall window the text stands at the middle of the hero, level with the tree's trunk and not under its crown */
  .hero-in{display:grid;align-content:center;min-height:calc(100svh - var(--bar) - var(--s24))}
  .hero-text{--col-text:clamp(28rem,47vw,38rem)}
  .hero-art{
    order:0;position:absolute;top:0;bottom:0;height:auto;margin:0;overflow:visible;
    left:calc(var(--side) + clamp(28rem,47vw,38rem) + var(--cols-gap));
    right:var(--side);
  }
  .tree{height:100%;margin:0}
}

/* the tree draws itself once, then rests: ink on paper, the broken branch in signal */
.tree .orbit{stroke:var(--line);stroke-opacity:.45;stroke-width:calc(1px * var(--tw));stroke-dasharray:2 7}
.tree .tick{stroke:var(--line);stroke-opacity:.5;stroke-width:calc(1px * var(--tw))}
.tree .tick.major{stroke-opacity:.9}
.tree .trunk,.tree .b{fill:none;stroke:var(--text);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.7s cubic-bezier(.3,.6,.2,1) var(--t,0s) forwards}
.tree .trunk{stroke-width:calc(4.2px * var(--tw));animation-duration:1.1s}
.tree .b.d0{stroke-width:calc(3.2px * var(--tw))}
.tree .b.d1{stroke-width:calc(2.5px * var(--tw))}
.tree .b.d2{stroke-width:calc(1.9px * var(--tw))}
.tree .b.d3{stroke-width:calc(1.5px * var(--tw))}
.tree .b.d4{stroke-width:calc(1.2px * var(--tw))}
.tree .b.d5{stroke-width:calc(1px * var(--tw))}
.tree .b.hit-path{stroke:var(--fail-stroke);stroke-width:calc(4.6px * var(--tw));stroke-opacity:1}
.tree .end{fill:var(--text);fill-opacity:0;animation:fade .8s ease 3s forwards}
.tree .mark{opacity:0;animation:appear .8s ease 3.5s forwards}
.tree .mark-dot{fill:var(--fail-stroke);fill-opacity:1}
.tree .mark-ring{fill:none;stroke:var(--fail-stroke);stroke-width:calc(2px * var(--tw))}
.tree .save-dot{fill:var(--text)}
.tree .save-halo{fill:none;stroke:var(--text);stroke-width:calc(1.4px * var(--tw))}
/* The words in the drawing would be drawn smaller than the page's smallest text at this size, so the drawing carries no words: its title and description say what it is. */
.tree .cap{display:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{fill-opacity:.5}}
@keyframes appear{to{opacity:1}}

/* ---- the replay: the same program run three times, on the host and in a world -------------------------------- */
.det-panels{display:grid;grid-template-columns:1fr;gap:var(--s12) var(--cols-gap)}
.det-panel{border-top:1px solid var(--line);padding-top:var(--s4);display:grid;gap:var(--s2);align-content:start}
.det-panel-world{border-top:2px solid var(--text)}
.det-fig-title{font-family:var(--serif);font-weight:400;font-size:var(--fs-lede);line-height:var(--lh-lede);letter-spacing:-.02em}
.det-fig-note{color:var(--dim);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.det-drawing{width:100%;max-width:34rem;height:auto;margin-top:var(--s1);overflow:visible}
.det-drawing .run-line,.det-drawing .run-event,.det-drawing .run-failed,.det-drawing .run-finished{fill:none;stroke-linecap:round}
.det-drawing .run-line{stroke:var(--text);stroke-width:2.2}
.det-drawing .run-event{stroke:var(--text);stroke-width:2.2}
.det-drawing .run-failed{stroke:var(--fail-stroke);stroke-width:3}
.det-drawing .run-finished{stroke:var(--text);stroke-width:1.8}
.det-drawing .run-guide{stroke:var(--line);stroke-opacity:.7;stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round}
.run-start{fill:var(--text)}
.run-start-halo{fill:none;stroke:var(--line);stroke-width:1.2}
.det-fig-caption{margin-top:var(--s3);color:var(--dim);font:400 var(--fs-caption)/var(--lh-caption) var(--font);max-width:34rem}
.det-proof{display:grid;grid-template-columns:1fr;gap:var(--s10) var(--cols-gap)}
/* the record link sits at the bottom of its block, so two blocks side by side end on one line whatever their length */
.det-result{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.det-result>.inline-link{margin-top:auto}
.det-label{font:600 var(--fs-body)/var(--lh-body) var(--font);color:var(--text)}
.det-result>.inline-link{display:flex;align-items:center;width:fit-content;min-height:44px}
/* a link that stands alone in its own line is a control, so it is as tall as one; a link inside a sentence stays a sentence */
.fit h3 .inline-link,.offer-limit .inline-link,.foot-in .inline-link{display:inline-flex;align-items:center;min-height:44px}
/* the small print's link is a phrase inside a sentence, so it flows with the sentence and stays at line height, the one kind of target the accessibility rule leaves there */
.cta-note .inline-link{display:inline;min-height:0;font-size:inherit}
@media (min-width:900px){
  .det-panels,.det-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* side by side, the two panels share their rows (title, note, mark, drawing), so the drawings start at one height whatever the notes' length */
  .det-panels{row-gap:0}
  .det-panel{grid-row:span 4;grid-template-rows:subgrid}
}

/* ---- the footnote of the experiment: the way to every result and the date of the figures, quiet lines at the content's left edge --------- */
.proof-foot{display:grid;row-gap:var(--s1);color:var(--dim);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.more-results{font:500 var(--fs-caption)/var(--lh-caption) var(--font);color:var(--dim)}
.proof-note{color:var(--dim);font-size:var(--fs-caption)}
#facts-exported{font:400 var(--fs-caption)/var(--lh-caption) var(--font);color:var(--dim)}
.refusal{color:var(--fail)}
.refusal-detail{font:400 var(--fs-caption)/var(--lh-caption) var(--font);color:var(--dim);overflow-wrap:anywhere}

/* the lost commits as one picture: told-done squares in order, a power cut partway along, filled before it and struck out after it */
/* a small diagram of the sentence above it, not a banner: about a third of the width the squares had, on a phone the whole column */
.prefix{max-width:100%}
@media (min-width:600px){.prefix{max-width:21rem}}
.prefix-drawing{--sq-gap:var(--s1);--cut-w:var(--s6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) var(--cut-w) repeat(9,minmax(0,1fr));column-gap:var(--sq-gap);row-gap:var(--s3);align-items:center}
.prefix-squares{display:contents}
.prefix-sq{grid-row:2;aspect-ratio:1;box-sizing:border-box;position:relative;border:2px solid var(--text);background:var(--text)}
.prefix-squares.kept .prefix-sq{animation:prefix-in .35s ease backwards}
.prefix-squares.kept .prefix-sq:nth-child(2){animation-delay:.12s}
.prefix-squares.kept .prefix-sq:nth-child(3){animation-delay:.24s}
.prefix-squares.gone .prefix-sq{border:2px dashed var(--fail-stroke);background:transparent;animation:prefix-lost .7s ease 1.1s backwards}
.prefix-squares.gone .prefix-sq::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--fail-stroke) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));animation:prefix-in .7s ease 1.1s backwards}
.prefix-cut{grid-row:2;grid-column:4;align-self:stretch;position:relative;animation:prefix-flash .6s ease .55s backwards}
.prefix-bolt{position:absolute;left:0;top:-.6rem;width:100%;height:calc(100% + 1.2rem);overflow:visible}
.prefix-bolt-line{fill:none;stroke:var(--fail-stroke);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.prefix-label{font:500 var(--fs-caption)/1.2 var(--font);color:var(--dim);text-align:center}
.prefix-cut-label{grid-row:1;grid-column:4;justify-self:center;display:flex;justify-content:center;width:0;white-space:nowrap;color:var(--coral-text)}
.prefix-kept-label{grid-row:3;grid-column:1/4}
.prefix-gone-label{grid-row:3;grid-column:5/14;color:var(--coral-text)}
.prefix-told{grid-row:4;grid-column:1/-1;display:grid;justify-items:center;gap:var(--s1);font:500 var(--fs-caption)/1.2 var(--font);color:var(--dim)}
.prefix-told::before{content:"";justify-self:stretch;height:var(--s2);border:2px solid var(--dim);border-top:0}
.prefix-caption{margin-top:var(--s3);color:var(--dim);font-size:var(--fs-caption);line-height:var(--lh-caption)}
@keyframes prefix-in{from{opacity:0}}
@keyframes prefix-flash{0%{opacity:0}20%,50%{opacity:1}35%{opacity:.3}}
@keyframes prefix-lost{from{background:var(--text);border-color:var(--text);border-style:solid}}

/* ---- who it is for, and the offers ---------------------------------------------------------------------------- */
.fit-grid{display:grid;grid-template-columns:1fr;gap:var(--s12) var(--cols-gap)}
.fit-grid h3{display:flex;align-items:center;min-height:44px;margin-bottom:var(--s2)}
.fit-grid li{padding:var(--s1) 0}
@media (min-width:900px){.fit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- the work and the call ------------------------------------------------------------------------------------ */
.engage-note{margin-top:0;color:var(--dim)}
.sample-line{margin-top:calc(var(--s2) * -1)}
/* From 1100 px the work and the call are two columns: the statement on the left, its paragraphs on the right, in the second column the replay figure and the fit list start in. */
@media (min-width:1100px){
  .split>.wrap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--cols-gap);align-items:start}
  .split>.wrap>.statement{grid-column:1;grid-row:1 / span 3}
  .split>.wrap>.body-text,.split>.wrap>.call-action{grid-column:2}
}

/* ---- the foot ------------------------------------------------------------------------------------------------- */
.foot{padding-block:0 var(--s10);color:var(--dim);font:400 var(--fs-caption)/1.6 var(--font)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s8);justify-content:space-between}
.foot-in a{display:inline-block}

/* ---- the trace: a recorder line down the margin, drawn by molina.js. A hairline of progress along the top of the window below 1100 px;
   from 1100 px a thin line in the margin with one short mark for each section. The marks end at least 48 px before the first letter of any text:
   the rail is set from the content's own left edge, which is the same edge the bar, the hero and every band start their text on. -------------- */
.trace-rail,.trace-progress{display:none}
.trace-progress{position:fixed;top:0;left:0;z-index:60;width:100%;height:2px;background:var(--trace);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
@media (max-width:1099px){.trace-progress{display:block}}
@media (min-width:1100px){
  .trace-rail{display:block;position:fixed;z-index:30;top:calc(var(--bar) + var(--s6));bottom:var(--s6);left:calc(var(--side) - var(--rail-gap) - var(--tick-length));width:1px;pointer-events:none;background:linear-gradient(to bottom,var(--trace) calc(var(--p,0) * 100%),rgba(163,189,176,.25) calc(var(--p,0) * 100%))}
  .trace-rail::after{content:"";position:absolute;left:-3px;top:calc(var(--p,0) * 100% - 3px);width:7px;height:7px;border-radius:50%;background:var(--trace)}
  .trace-tick{position:absolute;left:0;top:calc(var(--y,0) * 100%);width:var(--tick-length);height:13px;margin-top:-6px;pointer-events:auto}
  .trace-tick::before{content:"";position:absolute;left:0;top:6px;width:100%;height:1px;background:rgba(163,189,176,.4)}
  .trace-tick.on::before{background:var(--trace)}
  .trace-tick:hover::before{height:3px;top:5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .tree .end{fill-opacity:.5}
  .tree .mark{opacity:1}
}

/* the replay demo */
/* The button, its sentence and the two seed marks that molina.js adds to the replay figure. Everything it uses is named here. */
.det-figure{
  --replay-line:var(--text);              /* the button's edge and the world's cells */
  --replay-line-bright:var(--text);       /* the focus ring and the filled world cells */
  --replay-ink:var(--ground);             /* text on a filled button */
  --replay-paper:var(--text);             /* the button's fill, and the host's filled cells */
  --replay-quiet:var(--dim);              /* the mark labels and the sentence under the button */
  --replay-button-height:56px;
  --replay-cell:16px;                     /* one cell of a seed mark, tall */
}
.replay-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s8);margin-top:var(--s12)}
.replay-button{flex:none;min-height:var(--replay-button-height);padding:0 var(--s8);border:1px solid var(--replay-line);border-radius:3px;background:var(--replay-paper);color:var(--replay-ink);font:600 var(--fs-body)/1 var(--font);cursor:pointer;transition:background-color .12s,color .12s}
@media (hover:hover){.replay-button:hover{background:var(--replay-ink);color:var(--replay-paper)}}
.replay-button:active{transform:translateY(2px)}
.replay-button:focus-visible{outline:3px solid var(--replay-line-bright);outline-offset:3px}
.replay-status{flex:1 1 18rem;max-width:var(--measure);margin:0;min-height:calc(var(--fs-caption) * 1.5);color:var(--replay-quiet);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.replay-mark{display:flex;align-items:center;gap:var(--s3);margin:0;color:var(--replay-quiet);font-size:var(--fs-caption);line-height:1}
.replay-mark-label{font-size:var(--fs-caption)}
.replay-cells{flex:none;width:calc(var(--replay-cell) * 7 - 4px);height:calc(var(--replay-cell) - 4px);overflow:visible}
.replay-cell{fill:none;stroke:var(--replay-paper);stroke-opacity:.7;stroke-width:1.2}
.replay-cell.on{fill:var(--replay-paper);fill-opacity:.9}
.det-panel-world .replay-cell{stroke:var(--replay-line)}
.det-panel-world .replay-cell.on{fill:var(--replay-line-bright);fill-opacity:1}
.det-panels .run-event,.det-panels .run-failed,.det-panels .run-finished{transform-box:fill-box;transform-origin:center}

/* ---- a phone: under 600 px, where every grid is one column and the column is all there is -------------------------------
   Every line of text and every heading runs the whole column (the columns' width limits and balanced or pretty wrapping are for a wide screen and left
   the right half of a phone empty), the call buttons fill the column, the drawings are drawn heavier, and a band keeps less empty space above and below it.
   Contrast, computed from the tokens with WCAG 2.2's formula: the quiet green is 9.9 to 1 on the deep green and 8.3 to 1 on the lifted green,
   the failure coral in words 7.6 to 1 on the deep green. Nothing here applies from 600 px up. */
@media (max-width:599px){
  main p,main li,main dd{max-width:none;text-wrap:wrap}
  h1,h2,h3,.statement{text-wrap:wrap}
  .hero-text,.body-text,.det-fig-caption,.det-drawing,.prefix,.replay-status{max-width:none}
  .call-action,.cta,.det-result{justify-items:stretch;align-items:stretch}
  main .btn{width:100%}
  main .btn,.hero .btn{padding-inline:var(--s3);text-align:center}
  .replay-controls{gap:var(--s2) var(--s8)}

  /* the drawings: the replay lines are drawn heavier so a tick still shows at a phone's scale, and the squares of the lost commits keep a side of 20 px or more */
  .det-drawing .run-line{stroke-width:3}
  .det-drawing .run-event{stroke-width:3.4}
  .det-drawing .run-failed{stroke-width:3.8}
  .det-drawing .run-finished{stroke-width:3}
  .det-drawing .run-guide{stroke-width:1.4}
  .prefix-drawing{--sq-gap:3px;--cut-w:24px}
}

/* ---- a tablet, a narrow window, a phone that asks for the desktop site: 600 to 1099 px -----------------------------------
   The wide layout starts at 1100 px. Below it the column is the page's width and the tree sits under the words, as wide as the page. A phone in
   desktop mode lays the page out at about 980 px and draws it at about 0.92 scale, so the type here is a step larger than a laptop's (the tokens at the top). Lines run
   as wide as their column up to 40 rem; headings run the whole column. */
@media (min-width:600px) and (max-width:1099px){
  main p,main li,main dd{max-width:40rem;text-wrap:wrap}
  h1,h2,h3,.statement{text-wrap:wrap}
  .det-drawing{max-width:none}
  .hero-text{max-width:none}
  .body-text{max-width:40rem}
}