/* The Lineage homepage (spec docs/superpowers/specs/2026-10-26-homepage-lineage-design.md).
   Loaded by index.html and de/index.html only, after marketing.css, which it never edits: every
   block here is `ln-` prefixed and scoped to the homepage's <body class="mkt ln">. Kept components
   (.frag, .glance, .st, .mk, .filecheck*, .pc, .faq, .mbar …) keep their own rules.
   Light ground only. Nothing here moves on its own: no keyframes, no transition on load. */

.ln{
  /* the .wrap's own inline padding (core.css), so the thread can line up with the wrap's box */
  --ln-pad:clamp(1.2rem,4vw,2.5rem);
  /* the hero's columns on a wide screen: copy, the lane the chromosome pair stands in, the photo */
  --ln-copy:50%;
  --ln-lane:136px;
  /* the gutter the thread runs in when the hero is one column */
  --ln-gutter:44px;
  --ln-hero-pt:clamp(1.4rem,4.4vw,4rem);
  /* the lines' middle lane on a wide screen, centred in the wrap like the thread that runs in it */
  --ln-mid:96px;
  /* the pale ground of the drawn chromosomes (the mock's ring and Y) */
  --ln-tint:#d6e4f7;
  /* what a photo's box shows before it loads: on the paper ground, and on a flag-blue band */
  --ln-ph:#dfe7f2;
  --ln-ph-blue:#123a73;
}

/* ── hero: the headline, the live lede, the file check, the price line; a photograph of two
   people; chromosome 1's pair between them. No finding sits in this section (spec §2). ── */
.ln-hero{position:relative;background:var(--bg);padding-block:var(--ln-hero-pt) clamp(3rem,6vw,6rem);overflow-x:clip}
.ln-hero>.wrap{position:relative;z-index:1}
.ln-hero h1{
  font-size:clamp(2.4rem,9.5vw + .5rem,4.5rem);line-height:.9;font-weight:820;
  font-variation-settings:"wdth" 72;letter-spacing:-.024em;word-spacing:.1em;
  color:var(--ink);margin:0 0 1.1rem;max-width:none;text-wrap:balance}
.ln-hero h1 .l{display:block}
.ln-hero h1 .l:last-child{color:var(--brand)}
.ln-lede{font-size:clamp(1.02rem,.35vw + .92rem,1.19rem);line-height:1.55;color:var(--ink-soft);max-width:34em;margin:0}
.ln-lede b{color:var(--ink);font-weight:600}
.ln-hero .hero__price b{color:var(--brand)}
.ln-hero__photo{margin:0}
/* 80 % centres the two faces in the portrait frames from 1024 up (the narrowest, 376 x 544 at 1024,
   still shows both whole with room either side) and gives their gaze room on the left on a phone. */
.ln-hero__photo img{display:block;width:100%;height:clamp(13.75rem,62vw,26rem);object-fit:cover;object-position:80% 50%;background:var(--ln-ph)}

/* ── The thread (spec §5, HOMEPAGE_DECO): one line of chromosome 1 from the hero's pair to the
   end-piece above the footer. Every section carries a lane (.ln-thr: aria-hidden, never clickable,
   painted under the section's .wrap) at the x that section's layout keeps free of words: below
   1024 the gutter every wrap leaves on its left; from 1024 the hero's middle lane, then the lines'
   middle lane, then, from the ancestry band to the end, the left 8 % of the wrap. The lane box is
   the wrap's content box, so a lane's x is the same share of the wrap its column is.
   The spine is the chr1 tile (scripts/build_home_thread.py, its versioned URL handed over by the
   page as --ln-tile), repeated down the lane; on a flag-blue band, the light tile. Where the lane
   above stands at another x, a curved run (the thr macro, _home_parts.html) carries the thread
   across at the top of the lower section, between the two lanes, so its ends land on them at every
   width. Below 1024 every lane is the gutter and no run is drawn: the straight spine shows.
   It draws as the reader scrolls (initThread, redesign.js): --draw is the share drawn, 1 here, so
   with no script, after an error or with reduced motion the thread is whole from the first paint.
   Drawing moves no box: the spine is clipped from its foot (100cqh is the lane's height, so its
   tip is where the lane's --draw says), and the run's mask is dashed along its length. ── */
.ln{--ln-sw:10px;--ln-th:900px}
.ln-thr{position:absolute;top:0;bottom:0;left:0;width:var(--ln-gutter);pointer-events:none;z-index:0;container-type:size;--ln-x:50%}
.ln-thr,.ln-run__svg{--draw:1}
/* a section with a rule on top: its lane starts on the rule, so the thread does not break there */
.ln-parts>.ln-thr,.ln-how>.ln-thr,.ln-fr>.ln-thr,.ln-price>.ln-thr{top:-1px}
.ln-spine{position:absolute;top:var(--ln-sp-top,0px);bottom:0;left:var(--ln-x);width:var(--ln-sw);margin-left:calc(var(--ln-sw) / -2);background:var(--ln-tile) repeat-y 0 0 / var(--ln-sw) var(--ln-th);clip-path:inset(0 0 calc((1 - var(--draw, 1)) * 100cqh) 0)}
.ln-on-blue .ln-spine{background-image:var(--ln-tile-light)}
/* A run: the visible strokes keep their width however the run is stretched, and carry the bands
   as dashes; the mask's path (pathLength 100 = --len) is what draws. --len is a length, as the
   offset must be one: Firefox drops a unitless calc() for stroke-dashoffset. */
.ln-run__svg{display:none}
.ln-run{fill:none;stroke:#fff;stroke-width:26;--len:100px;stroke-dasharray:var(--len);stroke-dashoffset:calc((1 - var(--draw, 1)) * var(--len))}
.ln-run__base,.ln-run__bands path{fill:none;stroke-width:var(--ln-sw);stroke-linecap:butt;vector-effect:non-scaling-stroke}
.ln-run__base{stroke:var(--ln-tint)}
.ln-run__bands{stroke:var(--brand);opacity:.6}
.ln-on-blue .ln-run__base{stroke:#fff;stroke-opacity:.3}
.ln-on-blue .ln-run__bands{stroke:#fff;opacity:.9}

/* The chromosome pair: the thread's start, its stem the spine's width at 1024 and up. The spine
   below it starts at its foot (the drawing is 120 x 545). */
.ln-hero>.ln-thr{--ln-pair-w:32px;--ln-pair-top:calc(var(--ln-hero-pt) + .4rem);--ln-sp-top:calc(var(--ln-pair-top) + var(--ln-pair-w) * 545 / 120)}
.ln-pair{position:absolute;top:var(--ln-pair-top);left:50%;transform:translateX(-50%);width:var(--ln-pair-w)}
.ln-pair__svg{display:block;width:100%;height:auto}
.ln-pair__lbl{display:none}

/* One column (phones and small tablets): the thread takes a fixed gutter on the left, and the
   order is headline, photo, check, then the lede and the price line (the mock's phone order). */
@media (max-width:1023px){
  .ln-hero>.wrap{padding-left:var(--ln-gutter);display:flex;flex-direction:column}
  .ln-hero__copy{display:contents}
  .ln-hero h1{order:1}
  .ln-hero__photo{order:2;margin-bottom:.2rem}
  .ln-hero .hero__slot{order:3}
  .ln-hero .ln-lede{order:4;margin-top:1.6rem}
  .ln-hero .hero__price{order:5}
  .ln-hero .note-sm{order:6;margin-top:.4rem}
}
@media (max-width:640px){
  /* The phone fold: the file control must end inside the first screen (390 x 664), and it needs
     its own 234 px under a ~3-line headline, so the photo (which could be capped to no more than
     ~60 px here) follows the check instead of leading it. */
  .ln-hero h1{order:1}
  .ln-hero .hero__slot{order:2}
  .ln-hero__photo{order:3;margin-top:1.4rem}
  .ln{--ln-gutter:36px;--ln-sw:7px;--ln-th:600px}
  .ln-hero>.ln-thr{--ln-pair-w:26px}
}

/* Once a file is checked the photo steps aside (initHeroCheck in redesign.js toggles the class), so no
   face sits beside a verdict. A plain class, no transition. */
.ln-hero--checked .ln-hero__photo{display:none}

/* Wide: copy | lane | photo. The photo bleeds to the right edge and up to the header; the pair
   stands in the lane, its label read down its left side. */
@media (min-width:1024px){
  .ln-hero>.wrap{display:grid;grid-template-columns:var(--ln-copy) var(--ln-lane) minmax(0,1fr);grid-template-areas:"copy lane photo";align-items:start}
  .ln-hero__copy{grid-area:copy;padding:.4rem 1.5rem 0 0}
  .ln-hero h1{font-size:clamp(3.4rem,5.4vw,4.6rem);margin-bottom:1.6rem}
  .ln-hero__photo{grid-area:photo;margin-top:calc(-1 * var(--ln-hero-pt));margin-right:calc(-1 * (max(0px, (100vw - var(--maxw)) / 2) + var(--ln-pad)))}
  .ln-hero__photo img{height:clamp(34rem,52vw,47.5rem)}
  .ln-thr{left:50%;width:calc(min(var(--maxw),100%) - 2 * var(--ln-pad));transform:translateX(-50%);--ln-x:4%}
  .ln-hero>.ln-thr{--ln-x:calc(var(--ln-copy) + var(--ln-lane) / 2);--ln-pair-w:120px;--ln-pair-top:calc(var(--ln-hero-pt) + .9rem)}
  /* Photo gone: the pair recentres on the page's own centre line, where the next lane carries on. */
  .ln-hero--checked>.wrap{grid-template-columns:calc(50% - var(--ln-lane) / 2) var(--ln-lane) minmax(0,1fr)}
  .ln-hero--checked>.ln-thr{--ln-x:50%}
  .ln-lines>.ln-thr{--ln-x:50%;--ln-sp-top:112px}
  .ln-anc>.ln-thr{--ln-sp-top:88px}
  /* The two runs, each between the lanes it joins, at their viewBoxes' sizes (the thr macro). The
     ancestry run is drawn 470 wide and stretched to 46 % of the wrap: 434 px at 1024, 506 from 1180. */
  .ln-run__svg{display:block;position:absolute;top:0;overflow:visible}
  .ln-run__svg--lines{left:50%;width:calc(var(--ln-lane) / 2);height:112px}
  .ln-run__svg--anc{left:4%;width:46%;height:88px}
  .ln-pair{left:var(--ln-x)}
  .ln-pair__lbl{display:block;position:absolute;left:4px;top:0;transform-origin:0 0;transform:rotate(90deg) translate(0,-100%);white-space:nowrap;font:400 .75rem/1 var(--font-mono);color:var(--ink-faint)}
}

/* ── The maternal and paternal lines: the mother's mother's line (mitochondrial DNA, the ring) and
   the father's father's (chrY, the ideogram), each beside two generations; the thread's lane runs
   between them. An amber .ln-mark sits in that lane level with each printed haplogroup, a hairline
   joining the two. The marks are content and render with HOMEPAGE_DECO off. ── */
.ln-lines{position:relative;background:var(--bg);padding-block:clamp(1.6rem,3vw,2.5rem) clamp(4.5rem,9vw,8.75rem)}
.ln-lines>.wrap{position:relative;z-index:1}
/* The section kicker, a short rule before it (every Lineage section that has one). */
.ln-lines__k,.ln-anc__copy>.k,.ln-cpl__copy>.k,.ln-parts__t>.k,.ln-how__hd>.k,.ln-fr__copy>.k,.ln-data__copy>.k,.ln-attr__copy>.k,.ln-re .stat__copy>.k,.ln-price__hd .k{display:flex;align-items:center;gap:.75rem;margin:0 0 1.4rem;color:var(--brand);font-variation-settings:"wdth" 125;letter-spacing:.14em}
.ln-lines__k::before,.ln-anc__copy>.k::before,.ln-cpl__copy>.k::before,.ln-parts__t>.k::before,.ln-how__hd>.k::before,.ln-fr__copy>.k::before,.ln-data__copy>.k::before,.ln-attr__copy>.k::before,.ln-re .stat__copy>.k::before,.ln-price__hd .k::before{content:"";flex:none;width:22px;height:2px;background:currentColor}
.ln-lines__h{margin:0;font-size:clamp(2.6rem,9vw + .9rem,3.25rem);line-height:.88;font-weight:820;font-variation-settings:"wdth" 68;letter-spacing:-.026em;word-spacing:.06em;color:var(--brand)}
.ln-lines__h>span{display:block}
.ln-lines__h small{display:block;margin-top:.85rem;font:500 .94rem/1.3 var(--font-mono);font-variation-settings:normal;letter-spacing:0;word-spacing:0;color:var(--ink-faint)}
.ln-side{position:relative;min-width:0}
.ln-side__photo{margin:0}
.ln-side__photo img{display:block;width:100%;height:auto;background:var(--ln-ph)}
.ln-side__body{margin:1.4rem 0 0;max-width:31em;color:var(--ink-soft)}

.ln-hap{position:relative;display:flex;align-items:center;gap:1.3rem;margin-top:2.1rem}
.ln-hap__txt{display:flex;align-items:center;gap:1.3rem;min-width:0;margin:0}
.ln-side--p .ln-hap__txt{flex-direction:row-reverse}
.ln-hap__id{min-width:0;font:500 clamp(2.75rem,4.6vw,4.5rem)/1 var(--font-mono);letter-spacing:-.02em;color:var(--brand);overflow-wrap:anywhere}
.ln-hap__lbl{font:400 .8rem/1.45 var(--font-mono);color:var(--ink-faint)}
.ln-hap__lbl b{display:block;font:650 .94rem/1.4 var(--font-sans);color:var(--ink)}
.ln-mtring{display:block;flex:none;width:clamp(96px,9vw,120px);height:clamp(96px,9vw,120px)}
.ln-mtring__base{stroke:var(--ln-tint)}
.ln-mtring__ticks{stroke:var(--brand);stroke-opacity:.55}
.ln-ideo{display:block;flex:none;width:30px;height:auto}
.ln-ideo__base{fill:var(--ln-tint)}
.ln-ideo__bands{fill:var(--brand)}
.ln-ideo__lit{fill:var(--seal)}
.ln-mark{position:absolute;top:50%;width:18px;height:6px;margin-top:-3px;background:var(--seal);pointer-events:none}
.ln-mark::after{content:"";position:absolute;top:2.5px;height:1px;background:var(--seal)}

.ln-lines__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.94rem;color:var(--ink-soft)}
.ln-lines__foot p{margin:0}
.ln-lines .lnk{color:var(--brand);font-weight:600;border-bottom:1.5px solid currentColor}
.ln-reads{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0}
.ln-reads>div{display:flex;align-items:center;gap:.45rem}
.ln-reads dt{font-weight:650;color:var(--ink)}
.ln-reads dd{margin:0}

/* One column: the lane is the hero's left gutter, so the marks sit in it. Each haplogroup row is
   its drawing, then the haplogroup over its label, so a long label or a German one never widens
   a 320 px page. The DOM keeps label, then haplogroup: that is the order a screen reader says. The
   mark stays at the row's middle (top:50%), where the haplogroup stands. */
@media (max-width:1023px){
  .ln-lines>.wrap{padding-left:var(--ln-gutter)}
  .ln-lines__hp{margin-top:1.6rem}
  .ln-side--m{padding-top:1.5rem}
  .ln-side--p{padding-top:1.5rem}
  .ln-hap{gap:1rem}
  .ln-side--m .ln-hap{flex-direction:row-reverse;justify-content:flex-end}
  /* the haplogroup in the middle row, its label under it and an empty row as tall above it, so the
     haplogroup stands at the row's middle, level with the drawing's middle and with the mark */
  .ln-hap__txt,.ln-side--p .ln-hap__txt{display:grid;grid-template-rows:1fr auto 1fr;justify-items:start;gap:.35rem}
  .ln-hap__id{grid-row:2;font-size:2.75rem}
  .ln-hap__lbl{grid-row:3}
  .ln-mtring{width:84px;height:84px}
  .ln-side--p .ln-hap{margin:0 0 1.5rem}
  .ln-mark{left:calc(-1 * var(--ln-gutter) / 2 - 7px);width:14px;height:5px;margin-top:-2.5px}
  .ln-mark::after{left:14px;top:2px;width:calc(var(--ln-gutter) / 2 - 7px)}
}
/* Where a grid can share its rows with its children, each half of the heading stands over its own
   side, as in the mock; elsewhere the heading stays whole above both sides. */
@supports (grid-template-rows:subgrid){
  @media (max-width:1023px){
    .ln-lines>.wrap{display:grid;grid-template-columns:minmax(0,1fr)}
    /* placed by row alone, the mother's side would dodge the heading's rows into a new column */
    .ln-lines>.wrap>*{grid-column:1}
    .ln-lines__k{grid-row:1}
    .ln-lines__h{grid-row:2/5;display:grid;grid-template-rows:subgrid}
    .ln-lines__hm{grid-row:1}
    .ln-lines__hp{grid-row:3;margin-top:3.5rem}
    .ln-side--m{grid-row:3}
    .ln-side--p{grid-row:5}
    .ln-lines__foot{grid-row:6}
  }
}

/* Wide: mother's side | the lane | father's side. The two halves of the heading stagger, the
   father's lower, and each haplogroup row faces the lane, its mark on the thread. No text crosses
   the lane: the kicker and the reads line keep to the mother's column (German runs long). */
@media (min-width:1024px){
  .ln-lines>.wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--ln-mid) minmax(0,1fr);align-items:start}
  .ln-lines__k{grid-column:1}
  .ln-lines__h{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) var(--ln-mid) minmax(0,1fr);font-size:clamp(3.2rem,5.2vw,4.6rem)}
  .ln-lines__hm{grid-column:1;grid-row:1;text-align:right}
  .ln-lines__hp{grid-column:3;grid-row:1;align-self:end;margin-top:7.5rem}
  .ln-side--m{grid-column:1;grid-row:3;padding-top:2.5rem}
  .ln-side--p{grid-column:3;grid-row:3;padding-top:1.25rem}
  .ln-side--m .ln-side__photo{width:88%;margin-left:auto}
  .ln-side--p .ln-side__photo{width:92%}
  .ln-side--m .ln-hap{justify-content:flex-end}
  .ln-side--m .ln-side__body{margin-left:auto;text-align:right}
  .ln-side--p .ln-hap{margin:0 0 2.1rem}
  .ln-side--m .ln-mark{right:calc(-1 * var(--ln-mid) / 2 - 9px)}
  .ln-side--m .ln-mark::after{right:18px;width:calc(var(--ln-mid) / 2 - 9px)}
  .ln-side--p .ln-mark{left:calc(-1 * var(--ln-mid) / 2 - 9px)}
  .ln-side--p .ln-mark::after{left:18px;width:calc(var(--ln-mid) / 2 - 9px)}
  .ln-lines__foot{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) var(--ln-mid) minmax(0,1fr);align-items:start;margin-top:5rem}
  .ln-lines__foot p{grid-column:3;justify-self:end}
}

/* ── The flag-blue bands (.ln-on-blue): the ancestry band and the re-reading stat (#current). Text on
   the blue is --on-brand (white, 12.9:1 on --brand) or --on-brand-2 (8.5:1), both past WCAG AA.
   A white card inside keeps its own ink; the focus ring takes the lighter amber, which clears
   3:1 on the blue where --seal-ink does not. ── */
.ln-on-blue{background:var(--brand);color:var(--on-brand)}
.ln-on-blue p.k,.ln-anc__copy>.k,.ln-re .stat__copy>.k{color:var(--on-brand-2)}
.ln-on-blue .h2{color:var(--on-brand)}
.ln-on-blue .sub{color:var(--on-brand-2)}
.ln-on-blue .lnk{color:var(--on-brand);font-weight:600;border-bottom:1.5px solid currentColor}
.ln-on-blue .lnk:hover{border-bottom-color:var(--on-brand-2)}
.ln-on-blue .frag{color:var(--ink)}
.ln-on-blue :focus-visible{outline-color:var(--seal)}
/* the "EN" badge on a German link to an English page takes the link's colour here, as on .band */
html[lang="de"] .ln-on-blue a[hreflang="en"]:not(.lang-switch):not(.brand):not([lang="en"] a)::after{color:inherit}

/* The two sections' headings and paragraphs, in the mock's type: heavy, narrow, tight. */
.ln-anc .h2,.ln-cpl .h2{max-width:none;margin:0 0 1.4rem;font-weight:780;font-variation-settings:"wdth" 78;line-height:.98;letter-spacing:-.018em;word-spacing:.05em;overflow-wrap:break-word}
.ln-anc .h2{font-size:clamp(1.9rem,3.4vw + .2rem,2.9rem)}
.ln-cpl .h2{font-size:clamp(2.1rem,4.6vw + .3rem,4rem)}
.ln-anc .sub,.ln-cpl .sub{margin:0;max-width:34em;font-size:clamp(1.02rem,.35vw + .92rem,1.19rem);line-height:1.55}

/* ── Ancestry: the live row as a flag-blue band. Copy, the photo, the sample's fragment, then the
   dot field, one per reference person behind its receipt (aria-hidden; the caption says it). One
   column below 1024 in the thread's gutter; above, photo and dots on the left, copy and card on
   the right, and the left 8 % kept for the thread. ── */
.ln-anc{position:relative;padding-block:clamp(4.5rem,9vw,9.4rem) clamp(4.75rem,8.5vw,8.75rem)}
.ln-anc>.wrap{position:relative;z-index:1;display:flex;flex-direction:column}
.ln-anc__photo{margin:1.9rem 0 0}
.ln-anc__photo img{display:block;width:100%;height:auto;background:var(--ln-ph-blue)}
.ln-anc .frag--ancestry{margin-top:1.5rem}
.ln-anc__dots{margin:2.25rem 0 0}
.ln-dots{display:block;width:100%;height:auto;fill:var(--on-brand)}
.ln-anc__dots figcaption{margin-top:1.1rem;max-width:34em;font-size:.94rem;line-height:1.5;color:var(--on-brand-2)}

/* ── For couples: a photograph across the page, then /family-planning's own words: the kicker,
   heading and paragraph with the two ways on, and four facts. No gene, table or price. ── */
.ln-cpl{position:relative;background:var(--bg)}
.ln-cpl__photo{margin:0;height:clamp(18.75rem,46vw,40rem)}
/* 24 % from the top keeps the two hats in the 1920 x 640 band, where half the photo's height shows */
.ln-cpl__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 24%;background:var(--ln-ph)}
.ln-cpl>.wrap{position:relative;z-index:1;padding-block:clamp(3.5rem,6.7vw,6rem) clamp(5rem,9vw,8.1rem)}
.ln-cpl__go{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.75rem;margin:1.9rem 0 0}
.ln-cpl .lnk{color:var(--brand);font-weight:600;border-bottom:1.5px solid currentColor}
.ln-cpl__facts{list-style:none;margin:2.6rem 0 0;padding:0}
.ln-cpl__facts li{padding:1rem 0 1.1rem;border-top:1px solid var(--line)}
.ln-cpl__facts b{display:block;margin-bottom:.25rem;font-size:1rem;font-weight:650;color:var(--ink)}
.ln-cpl__facts p{margin:0;max-width:34em;font-size:.97rem;line-height:1.5;color:var(--ink-soft)}

@media (max-width:1023px){
  .ln-anc>.wrap,.ln-cpl>.wrap,.ln-parts>.wrap{padding-left:var(--ln-gutter)}
}
@media (min-width:1024px){
  .ln-anc>.wrap{display:grid;grid-template-columns:8% 40% 6% 46%;align-items:start}
  .ln-anc__copy{grid-column:4;grid-row:1}
  .ln-anc__photo{grid-column:2;grid-row:1;margin:.5rem 0 0}
  .ln-anc .frag--ancestry{grid-column:4;grid-row:2;margin-top:2.5rem}
  .ln-anc__dots{grid-column:2;grid-row:2;align-self:end;margin-top:3.5rem}
  .ln-cpl>.wrap{display:grid;grid-template-columns:8% 50% 6% 36%;align-items:start}
  .ln-cpl__copy{grid-column:2}
  .ln-cpl__facts{grid-column:4;margin:0;padding-top:3.25rem}
}

/* ── What's in your report (#modules): the live heading, the nine parts as a numbered index table
   (source · name · description · chip / genome / reads), then the sample report's fragments and
   their addresses. On the paper ground, and no photograph: the section holds clinical and PGx
   fragments (spec §2). One column below 1024 in the thread's gutter, in the DOM order (heading,
   table, fragments); from 1024 the left 8 % is the thread's lane; from 1180 the fragments take a
   column beside the table, as in the mock. ── */
.ln-parts{position:relative;background:var(--bg);border-top:1px solid var(--line);padding-block:clamp(4.5rem,9vw,8.1rem) clamp(4.5rem,8.5vw,7.5rem)}
.ln-parts>.wrap{position:relative;z-index:1;display:flex;flex-direction:column}
.ln-parts__hd{margin:0 0 clamp(2.25rem,4.4vw,4rem)}
.ln-parts__hd .h2{max-width:none;margin:0;font-size:clamp(2.1rem,4.6vw + .3rem,4.4rem);font-weight:780;font-variation-settings:"wdth" 78;line-height:.98;letter-spacing:-.018em;word-spacing:.05em;overflow-wrap:break-word}
.ln-parts__hd .sub{margin:1.3rem 0 0;max-width:34em;font-size:clamp(1rem,.2vw + .95rem,1.06rem);line-height:1.55}

/* The index table. Each row: its number, then source, name and description, then the three marks.
   On a phone the marks are a short list under the text, each file's name beside its mark (the
   live tile's list, which keeps a long German word on one line); from 720 they are three columns
   under the key's names, and each row's dt stays for a screen reader only. */
.ln-tbl{min-width:0}
.ln-tbl__key{display:flex;justify-content:space-between;align-items:flex-end;gap:.6rem 1.5rem;padding-bottom:.8rem;border-bottom:2px solid var(--ink)}
.ln-tbl__legend{margin:0;font-size:.86rem;line-height:1.45;color:var(--ink-faint)}
.ln-tbl__legend .mk__check{color:var(--brand);margin:-.2em .3em 0 0}
.ln-tbl__cols{display:none}
.ln-row{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:0 .7rem;padding:1.2rem 0 1.35rem;border-bottom:1px solid var(--line)}
.ln-row__n{font:500 .875rem/1.65 var(--font-mono);color:var(--ink-faint)}
.ln-row__txt{min-width:0}
.ln-row__txt p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.ln-row__txt .ln-row__src{margin:0 0 .4rem;font-weight:600;font-size:.75rem;line-height:1.3;font-variation-settings:"wdth" 125;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.ln-row h3{margin:0 0 .4rem;font-size:clamp(1.3rem,.5vw + 1.2rem,1.5rem);line-height:1.1;font-weight:720;font-variation-settings:"wdth" 88;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word;hyphens:auto}
.ln-row__txt .ln-row__more{margin-top:.45rem}
.ln-row__more a{color:var(--brand);font-weight:600;text-underline-offset:.2em}
.ln-tbl .avail{grid-column:2;gap:.3rem;margin:.85rem 0 0;padding-top:.65rem;border-top:1px solid var(--line)}
.ln-tbl .avail dt{flex:none;font-size:.8rem;font-weight:600;white-space:nowrap;color:var(--ink-faint)}
.ln-tbl .avail dd{text-align:right;text-wrap:balance}
.ln-tbl .mk{white-space:normal}
/* the firewall: a dashed rule each side of its line, directly above the Frontier row, which keeps
   the exploratory tier's dashed shape in its own rule */
.ln-row:has(+ .ln-tbl__fire){border-bottom-color:transparent}
.ln-tbl__fire{display:flex;align-items:center;gap:.9rem;margin:0;padding:.9rem 0;font-size:.86rem;line-height:1.4;text-align:center;color:var(--ink-faint)}
.ln-tbl__fire::before,.ln-tbl__fire::after{content:"";flex:1 0 1.25rem;border-top:1.5px dashed var(--line-2)}
.ln-row--frontier{border-bottom:1.5px dashed var(--line-2)}
.ln-tbl__more{margin:1.75rem 0 0}
.ln-tbl__more a{color:var(--brand);font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}

/* The fragments, on paper: a hairline frame for the shadow the blue band needed. Three across
   where they fit, under the table; from 1180 one column beside it. */
.ln-parts__side{min-width:0;margin-top:clamp(3rem,6vw,4.5rem)}
.ln-parts .frags{max-width:none;margin:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start}
.ln-parts .frags .frag:nth-child(n){margin-left:0}
.ln-parts .frag{box-shadow:none;border:1px solid var(--line)}
.ln-parts .frags__cap{grid-column:1/-1;margin:0}

/* Every finding has an address: one row per sample fragment, its chromosome to scale with the lit
   band. Level with that band, the amber mark reaches out to the thread and the coordinate stands
   to the drawing's right, so the line from the thread meets the drawing at the band it names. The
   level is the empty .ln-addr__drop SVG the macro sizes to the band's centre, which holds only
   while the drawing keeps its own size (24 px wide, 1 px a unit): never scale .ln-addr .ln-ideo. */
.ln-addr{margin:clamp(2rem,4vw,2.6rem) 0 0;padding-top:1rem;border-top:2px solid var(--ink)}
.ln-addr__h{margin:0 0 1.2rem;font-size:1.375rem;line-height:1.1;font-weight:720;font-variation-settings:"wdth" 88;color:var(--ink)}
.ln-addr__list{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.ln-addr__locus{position:relative}
.ln-addr .ln-ideo{width:24px}
.ln-addr__lvl{position:absolute;top:0;left:0;right:0;pointer-events:none}
.ln-addr__drop{display:block}
.ln-addr__at{position:relative;display:block;height:0}
.ln-addr .ln-mark{top:0}
.ln-addr__txt{position:absolute;top:0;left:calc(24px + 1rem);transform:translateY(-50%);white-space:nowrap;font:400 .8rem/1.35 var(--font-mono);color:var(--ink-faint)}
.ln-addr__txt .mono{color:var(--brand)}
.ln-addr figcaption{margin-top:1.2rem;max-width:34em;font-size:.86rem;line-height:1.45;color:var(--ink-faint)}

@media (min-width:720px){
  .ln-tbl__cols{display:grid;flex:none;grid-template-columns:repeat(3,5.75rem);margin:0;text-align:right;font-weight:600;font-size:.72rem;line-height:1.25;font-variation-settings:"wdth" 110;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
  .ln-tbl__cols span{padding-left:.5rem}
  .ln-row{grid-template-columns:2.75rem minmax(0,1fr) 17.25rem;gap:0 1.1rem}
  .ln-tbl .avail{grid-column:3;grid-template-columns:repeat(3,5.75rem);gap:0;margin:0;padding:.3rem 0 0;border:0;align-items:start}
  .ln-tbl .avail>div{display:block;padding-left:.5rem}
  .ln-tbl .avail dt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .ln-tbl .avail dd{display:flex;justify-content:flex-end;font-size:.86rem;line-height:1.3}
}
@media (min-width:1024px){
  /* the wrap is the unit the thread's lane is measured in (cqw), as in the mock */
  .ln-parts>.wrap{display:grid;grid-template-columns:8% minmax(0,1fr);align-items:start;container-type:inline-size}
  .ln-parts__hd,.ln-tbl,.ln-parts__side{grid-column:2}
  .ln-addr .ln-mark{left:calc(-4cqw - 9px)}
  .ln-addr .ln-mark::after{left:18px;width:calc(4cqw - 9px)}
}
@media (min-width:1180px){
  .ln-parts>.wrap{grid-template-columns:8% 30% 4% 58%}
  .ln-parts__hd{grid-column:2/5;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) 36%;gap:0 5%;align-items:end}
  .ln-parts__hd .sub{margin:0;font-size:1.03rem}
  .ln-tbl{grid-column:4;grid-row:2}
  .ln-parts__side{grid-column:2;grid-row:2;margin:0}
  .ln-parts .frags{grid-template-columns:minmax(0,1fr)}
}

/* ── How it works (#how): the live heading and four steps, step 1 naming the three kinds of file.
   A rule across the top, a large flag-blue numeral over each step, a hairline between them. One
   column below 720 in the thread's gutter, two to 1023, four from 1024 with the left 8 % as the
   thread's lane. Static: nothing here moves. ── */
.ln-how{position:relative;background:var(--paper-2,var(--bg));border-top:1px solid var(--line);padding-block:clamp(4.5rem,9vw,7.5rem)}
.ln-how>.wrap{position:relative;z-index:1;padding-left:var(--ln-gutter)}
.ln-how__hd{margin:0 0 clamp(2rem,4vw,3.5rem)}
.ln-how__hd .h2{max-width:14em;margin:0;font-size:clamp(2.1rem,4.6vw + .3rem,4.4rem);font-weight:780;font-variation-settings:"wdth" 78;line-height:.98;letter-spacing:-.018em;word-spacing:.05em;overflow-wrap:break-word}
.ln-how__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--ink)}
.ln-how__steps li{display:block;min-width:0;padding:1.4rem 0 1.5rem;border-bottom:1px solid var(--line)}
.ln-how__n{display:block;margin-bottom:.8rem;font:820 3.5rem/1 var(--font-sans);font-stretch:70%;font-variation-settings:"wdth" 70;color:var(--brand)}
.ln-how__steps h3{margin:0 0 .4rem;font-size:1.2rem;font-weight:700;color:var(--ink)}
.ln-how__steps p{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink-soft)}
.ln-how__steps .ln-how__when{margin-top:.8rem;padding-top:.65rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-faint)}
.ln-how__when a{color:var(--brand);font-weight:600;border-bottom:1.5px solid currentColor}
@media (min-width:720px){
  .ln-how__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ln-how__steps li{padding-right:1.75rem}
  .ln-how__steps li:nth-child(even){padding-left:1.75rem;padding-right:0;border-left:1px solid var(--line)}
}
@media (min-width:1024px){
  .ln-how>.wrap{display:grid;grid-template-columns:8% minmax(0,1fr);padding-left:var(--ln-pad)}
  .ln-how__hd,.ln-how__steps{grid-column:2}
  .ln-how__steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ln-how__steps li{padding:1.5rem 1.5rem 0 0;border-bottom:0}
  .ln-how__steps li+li,.ln-how__steps li:nth-child(even){padding-left:1.5rem;border-left:1px solid var(--line)}
  .ln-how__steps li:nth-child(even){padding-right:1.5rem}
  .ln-how__n{font-size:4.5rem}
}

/* ── The rest of the page (spec §4.7–§4.13): Frontier, where your data goes, attributed, the
   re-reading stat (#current, a flag-blue band), pricing, the cheaper option, the questions and
   the closing band. One type system with the sections above: heavy narrow headings, the kicker
   with its rule, a paragraph at the lede's size. One column below 1024 in the thread's gutter, in
   the DOM order, which is every section's reading order; from 1024 the left 8 % of the wrap is the
   thread's lane and grid placement (never `order`) sets the columns. The wrap is the unit the
   lane is measured in (cqw), as in #modules. ── */
.ln-fr,.ln-data,.ln-attr,.ln-price,.ln-faq,.ln-re,.ln-cheap{position:relative}
.ln-fr>.wrap,.ln-data>.wrap,.ln-attr>.wrap,.ln-re>.wrap,.ln-price>.wrap,.ln-cheap>.wrap,.ln-faq>.wrap{position:relative;z-index:1}
.ln-fr .h2,.ln-data .h2,.ln-attr .h2,.ln-re .stat__h,.ln-price .h2,.ln-faq .h2{max-width:none;margin:0 0 1.4rem;font-weight:780;font-variation-settings:"wdth" 78;line-height:.98;letter-spacing:-.018em;word-spacing:.05em;overflow-wrap:break-word;text-wrap:balance}
.ln-fr .h2{font-size:clamp(2.1rem,4.6vw + .3rem,4rem)}
.ln-data .h2,.ln-attr .h2,.ln-re .stat__h{font-size:clamp(2rem,2.6vw + .9rem,3.25rem)}
.ln-price .h2,.ln-faq .h2{font-size:clamp(2.1rem,3vw + .7rem,3.5rem)}
.ln-fr .sub,.ln-data .sub,.ln-attr .sub,.ln-price .sub{margin:0;max-width:34em;font-size:clamp(1.02rem,.35vw + .92rem,1.19rem);line-height:1.55}
.ln-fr .lnk,.ln-data .lnk,.ln-price .lnk,.ln-faq .lnk{color:var(--brand);font-weight:600;border-bottom:1.5px solid currentColor}

/* Frontier: the words, then the sample's reading, dashed. Its amber mark sits in the reading's
   address line, level with that line's first row, and its hairline crosses the card's border and
   padding (--ln-in) to reach the coordinate. */
.ln-fr{border-top:1px solid var(--line);padding-block:clamp(5rem,9vw,8.1rem) clamp(2.5rem,4.2vw,3.75rem)}
.ln-fr .frag--frontier{--ln-in:calc(1.5px + 1.2rem);max-width:36rem;margin-top:2rem}
.ln-fr .frag__pin{position:relative}
.ln-fr .ln-mark{top:1.05rem}

/* Where your data goes: the words, the photo, then the six stops as stations on the thread, each
   a ring on the lane level with its name; the last, "Delete", filled. */
.ln-data{padding-block:clamp(3.75rem,6.2vw,5.6rem) clamp(1.9rem,4.2vw,3.75rem)}
.ln-data__photo{margin:1.9rem 0 1.75rem}
.ln-data__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;background:var(--ln-ph)}
.ln-stations{list-style:none;margin:0;padding:0}
.ln-stations li{position:relative;padding:.9rem 0 1rem;border-bottom:1px solid var(--line)}
.ln-stations li::before{content:"";position:absolute;top:calc(.9rem + .795rem - 9px);width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:var(--bg);border:2.5px solid var(--brand);pointer-events:none}
.ln-stations li:last-child::before{background:var(--brand)}
.ln-stations b{display:block;font-size:1.06rem;line-height:1.5;font-weight:650;color:var(--ink)}
.ln-stations span{display:block;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}

/* Attributed: the live ledger, its two lists as ruled columns rather than cards. */
.ln-attr{padding-block:clamp(3.75rem,6.2vw,5.6rem) clamp(5rem,9vw,8.1rem)}
.ln-attr .ledger{grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:2.25rem}
.ln-attr .ledger>div{background:none;box-shadow:none;border-radius:0;padding:0}
.ln-attr .ledger h3{margin:0;padding-bottom:.65rem;border-bottom:2px solid var(--ink);font-size:.75rem;line-height:1.2;letter-spacing:.14em;font-variation-settings:"wdth" 125}
.ln-attr .ledger li{padding:.7rem 0 .75rem 1.5rem;border-top:0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.45;overflow-wrap:break-word}
/* German compounds ("Variantenassoziationen") break at a syllable, not mid-letter, in a narrow column. */
html[lang="de"] .ln-attr .ledger li{hyphens:auto}
.ln-attr .ledger li::before{top:.7rem}

/* Why re-reading matters (#current): the measured number, large and white on the blue, its amber
   mark level with the number's middle; the live words beside it. The kept .stat loses its card. */
.ln-re{padding-block:clamp(5rem,9vw,8.1rem)}
.ln-re .stat{display:block;gap:0;background:none;box-shadow:none;border-radius:0;padding:0}
.ln-re .stat__num{position:relative;--ln-re-n:clamp(7.5rem,30vw,9.4rem)}
.ln-re .stat__big{margin:0;font-size:var(--ln-re-n);line-height:.82;font-weight:850;font-variation-settings:"wdth" 66;letter-spacing:-.04em;color:var(--on-brand);overflow-wrap:anywhere}
.ln-re .stat__cap{max-width:24em;margin-top:1.4rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--on-brand-2)}
.ln-re .stat__copy{margin-top:3rem}
.ln-re .stat__h{color:var(--on-brand)}
.ln-re .stat__copy p:not(.k){max-width:34em;margin:0 0 1rem;font-size:clamp(1rem,.2vw + .95rem,1.03rem);line-height:1.55;color:var(--on-brand-2)}
.ln-re .stat__copy p a:not(.lnk){color:var(--on-brand);text-decoration-color:currentColor}
.ln-re .stat__copy .mt-3{margin-top:1.4rem}
.ln-re .ln-mark{top:calc(var(--ln-re-n) * .41)}

/* Pricing: the live cards and their canvases untouched; only the frame. White cards with a fine
   rule, the most complete one ringed in the brand with its flag as a tab on the top edge, the
   name and the amount in the page's heavy narrow type, the strip's ground rounded. */
.ln-price{border-top:1px solid var(--line);padding-block:clamp(5rem,9.7vw,8.75rem) clamp(4.4rem,7.6vw,6.9rem)}
.ln-price__hd{margin:0 0 clamp(2.5rem,4vw,3.5rem)}
.ln-price__hd .h2{margin:0}
.ln-price__hd .sub{margin-top:1.2rem}
.ln-price .prices{margin:0;gap:1.75rem 1.25rem}
.ln-price .pc{--ln-pc-pad:1.6rem;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:none;padding:var(--ln-pc-pad) var(--ln-pc-pad) 1.5rem}
/* The ringed card's padding is a pixel less than the others', for its second pixel of border, so
   the words inside all three cards start level. */
.ln-price .pc--feature{overflow:visible;border:2px solid var(--brand);padding:calc(var(--ln-pc-pad) - 1px) calc(var(--ln-pc-pad) - 1px) calc(1.5rem - 1px)}
/* The flag: a tab on the ringed card's top edge, set narrow enough to keep to one line in both
   languages at every width (German measures 210 px where the narrowest card, at 1024, leaves 221).
   It hangs from its foot, so a flag that still wraps (a fallback font, a larger text size) grows
   upward, off the card's words, and its radius, half a one-line flag's height, makes a pill of one
   line and a rounded label of two. */
.ln-price .pc__flag{position:absolute;left:calc(var(--ln-pc-pad) - 1px);bottom:calc(100% - .9rem);width:max-content;max-width:calc(100% - 2 * var(--ln-pc-pad));margin:0;padding:.55rem .65rem;font-size:.75rem;line-height:1.15;letter-spacing:.05em;font-variation-settings:"wdth" 82;border-radius:calc(.55rem + .575em);background:var(--brand);color:var(--on-brand)}
.ln-price .pc__hd .k,.ln-price .pc__meta{font-size:.75rem;line-height:1.2;color:var(--ink-faint)}
.ln-price .pc__hd .k{letter-spacing:.09em}
/* the meta is a value in lower case ("~600k typed sites"): no label tracking */
.ln-price .pc__meta{letter-spacing:.01em}
.ln-price .pc--feature .pc__hd .k{color:var(--brand)}
.ln-price .pc h3{font-size:1.875rem;line-height:1.05;font-weight:760;font-variation-settings:"wdth" 84;letter-spacing:-.01em;color:var(--ink)}
.ln-price .pc__amt{font-size:clamp(3.25rem,2vw + 2.6rem,4rem);font-weight:820;font-variation-settings:"wdth" 72;letter-spacing:-.02em;line-height:1;color:var(--brand)}
/* A row that wraps between its parts: when a sale's struck price leaves no room, the cadence and the
   sale tag move together onto the second line the sale reserves, flush left and on the cadence's
   baseline, instead of "one-time" splitting at its hyphen. */
.ln-price .pc__amt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3rem}
.ln-price .pc__amt .price-was{margin-right:.35rem}
.ln-price .pc__amt small{font-size:.94rem;font-variation-settings:normal;white-space:nowrap;margin-left:0}
.ln-price .pc__amt .sale-tag,.ln-price .pc__amt .price-was{letter-spacing:0}
.ln-price .pc canvas{border-radius:12px}
.ln-price .pc__note{font-size:.94rem;line-height:1.5}
.ln-price .pc li{padding:.5rem 0 .5rem 1.1rem;font-size:.94rem;line-height:1.45}
.ln-price .pc li::before{top:1.05em}
/* A buy button whose words wrap (German, in a narrow card) reads as a tidy two-line label: lines
   balanced and centred, a radius that keeps one line a near-pill without ballooning two. */
.ln-price .pc .btn{width:100%;min-height:3.25rem;padding:.6em 1.2em;line-height:1.2;text-align:center;text-wrap:balance;border-radius:1.4rem}
.ln-price .plans__sub{margin-top:1.9rem;font-size:.97rem}

/* The cheaper option: the shared include on the cool ground. */
.ln-cheap{background:var(--paper-2);padding-block:clamp(4.4rem,7.6vw,6.9rem)}
.ln-cheap h2{max-width:20em;margin:0 0 1.25rem;font-size:clamp(1.9rem,2.4vw + .6rem,2.75rem);font-weight:760;font-variation-settings:"wdth" 84;line-height:1.05;letter-spacing:-.01em;overflow-wrap:break-word;color:var(--ink)}
.ln-cheap p{max-width:36em;margin:0 0 .9rem;font-size:clamp(1rem,.25vw + .95rem,1.06rem);line-height:1.6;color:var(--ink-soft)}
.ln-cheap p.muted{margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-faint)}

/* Common questions: the live entries, ruled, a plus that turns to a minus. */
.ln-faq{padding-block:clamp(4.4rem,7.6vw,6.9rem) clamp(5rem,9vw,8.1rem)}
.ln-faq .faq{margin:0;border-top:2px solid var(--ink)}
.ln-faq .faq summary{padding:1.15rem 0;font-size:clamp(1.06rem,.3vw + 1rem,1.19rem);font-weight:650;line-height:1.35;color:var(--ink)}
.ln-faq .faq summary::after{font-size:1.5rem;font-weight:500;color:var(--brand)}
.ln-faq .faq details>p{max-width:62ch;margin:0 0 1.4rem;font-size:1rem;line-height:1.6}
.ln-faq__all{margin:1.6rem 0 0}

/* The closing band: a couple across the page, the ribbon's line and the check's button on a white
   card. On a phone the card overlaps the photo's foot; wide, it stands in the photo's lower left,
   by the thread's lane. The card's text is ink on white and its button the brand fill. */
.ln-close{position:relative}
.ln-close__photo{margin:0;height:clamp(18.75rem,46vw,25rem)}
/* The faces are in the photo's top right: pinned to the top so no width cuts a head, and to the
   right so a phone's narrow frame keeps the man's; the card sits on the plain wall on the left. */
.ln-close__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 0;background:var(--ln-ph)}
.ln-close>.wrap{position:relative;z-index:1;padding-bottom:3rem}
.ln-close__card{position:relative;margin-top:-3.75rem;padding:1.25rem 1.25rem 1.4rem;background:var(--panel);border:1px solid var(--line);border-radius:16px}
/* The line is the band's heading (an h2 per section, spec §8), set as the paragraph it was. */
.ln-close__card h2{max-width:22em;margin:0 0 1.25rem;font-size:clamp(1.375rem,.6vw + 1.25rem,1.625rem);line-height:1.2;font-weight:700;font-variation-settings:"wdth" 94;letter-spacing:normal;word-spacing:.04em;text-wrap:wrap;color:var(--ink)}

/* The phone bar (marketing.css, redesign.js) waits below the window until it is turned on. While
   it waits it is out of the tab order, so a keyboard never lands on a link nobody can see (the
   closing card holds the same one); it hides only once it has slid out. */
.ln .mbar:not(.is-on){visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
@media (prefers-reduced-motion:reduce){.ln .mbar:not(.is-on){transition:none}}

/* The thread's end-piece (HOMEPAGE_DECO): the brand mark the thread ends in, on the lane, just
   above the footer, the last stretch of spine running into it from the closing band. Decoration:
   aria-hidden, never clickable. */
.ln-end{pointer-events:none}
.ln-end__in{display:block;width:32px;margin-left:calc(var(--ln-gutter) / 2 - 16px)}
.ln-end__in::before{content:"";display:block;width:var(--ln-sw);height:2.5rem;margin:0 auto;background:var(--ln-tile) repeat-y 0 0 / var(--ln-sw) var(--ln-th)}
.ln-end__mark{display:block;width:32px;height:32px;margin:0 0 1.25rem}

@media (max-width:1023px){
  .ln-fr>.wrap,.ln-data>.wrap,.ln-attr>.wrap,.ln-re>.wrap,.ln-price>.wrap,.ln-cheap>.wrap,.ln-faq>.wrap,.ln-close>.wrap{padding-left:var(--ln-gutter)}
  .ln-end>.wrap{padding-left:0}
  .ln-fr .ln-mark{left:calc(-1 * var(--ln-gutter) / 2 - 7px - var(--ln-in))}
  .ln-fr .ln-mark::after{width:calc(var(--ln-gutter) / 2 - 7px + var(--ln-in))}
  .ln-stations li::before{left:calc(-1 * var(--ln-gutter) / 2 - 9px)}
}
/* A phone: the cards' padding gives their words the room. */
@media (max-width:640px){
  .ln-price .pc{--ln-pc-pad:1.25rem}
}
/* Stacked cards: the ringed one keeps clear of its flag's foot. */
@media (max-width:900px){
  .ln-price .pc--feature{padding-top:calc(var(--ln-pc-pad) + .5rem)}
}
/* Two lists side by side: each heading is held to two lines' height (and its 2 px rule, the box
   being border-box) and set at its foot, so the two rules line up whether a heading wraps or not. */
@media (min-width:720px){
  .ln-attr .ledger{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem}
  .ln-attr .ledger h3{display:flex;align-items:flex-end;min-height:calc(2.4em + .65rem + 2px)}
}
/* Cards side by side (from 901 px). The cards keep the live markup byte for byte, so a card's parts
   cannot be grouped, and a grid that shared rows across the three cards (a subgrid) would share
   the description's and the list's rows too, leaving a gap in the card with the short description.
   So each card stays a flex column. The parts above the description are given heights that do not
   depend on their words, so they stand level in all three cards; the description and the list flow
   straight on; the slack collects above the button (marketing.css, margin-top:auto), which stands
   with its note at the card's foot:
   - the head: the kicker over the meta, always two rows (each a single nowrap line, marketing.css);
   - the name: sized to the card (cqi), so the longest, German "Genom-Bericht (WGS)", keeps to one
     line at every width;
   - the amount: one line; while a sale shows a struck price anywhere, every amount keeps two;
   - the strip: 120 px (marketing.css);
   - the note under the button: four lines' room, the longest (German, 901–1179 px) being four, so
     the buttons' feet stand level. */
@media (min-width:901px){
  .ln-price .pc{container-type:inline-size}
  .ln-price .pc__hd{flex-direction:column;align-items:flex-start;gap:.25rem}
  .ln-price .pc h3{font-size:min(1.875rem,10.4cqi)}
  .ln-price .prices:has(.sale-tag) .pc__amt{min-height:2lh}
  .ln-price .addon-when{min-height:4lh}
}
@media (min-width:1024px){
  .ln-fr>.wrap,.ln-data>.wrap,.ln-attr>.wrap,.ln-re>.wrap,.ln-price>.wrap,.ln-cheap>.wrap,.ln-faq>.wrap,.ln-end>.wrap{container-type:inline-size}
  .ln-fr>.wrap{display:grid;grid-template-columns:8% 42% 6% 44%;align-items:start}
  .ln-fr__copy{grid-column:4;grid-row:1;align-self:center}
  .ln-fr .frag--frontier{grid-column:2;grid-row:1;max-width:none;margin:0}
  .ln-fr .ln-mark,.ln-re .ln-mark{left:calc(-4cqw - 9px - var(--ln-in,0px))}
  .ln-fr .ln-mark::after,.ln-re .ln-mark::after{left:18px;width:calc(4cqw - 9px + var(--ln-in,0px))}

  .ln-data>.wrap{display:grid;grid-template-columns:8% 40% 8% 44%;align-items:start}
  .ln-data__copy{grid-column:4;grid-row:1}
  .ln-data__photo{grid-column:4;grid-row:2;margin:2.75rem 0 0}
  .ln-stations{grid-column:2;grid-row:1/3}
  .ln-stations li::before{left:calc(-4cqw - 9px)}

  .ln-attr>.wrap{display:grid;grid-template-columns:8% 40% 8% 44%;align-items:start}
  .ln-attr__copy{grid-column:2}
  .ln-attr .ledger{grid-column:4;grid-template-columns:minmax(0,1fr);gap:2rem;margin:0}
  .ln-attr .ledger h3{min-height:0}

  .ln-re .stat{display:grid;grid-template-columns:8% 42% 6% 44%;align-items:start}
  .ln-re .stat__num{grid-column:2;--ln-re-n:clamp(7.5rem,17cqw,15.6rem)}
  .ln-re .stat__copy{grid-column:4;margin:0}

  .ln-price>.wrap{display:grid;grid-template-columns:8% minmax(0,1fr)}
  .ln-price>.wrap>*{grid-column:2}
  .ln-price__hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4cqw;align-items:end}
  .ln-price__hd .sub{margin:0}

  .ln-cheap>.wrap{display:grid;grid-template-columns:8% 58% 34%}
  .ln-cheap__in{grid-column:2}

  .ln-faq>.wrap{display:grid;grid-template-columns:8% 30% 4% 58%;align-items:start}
  .ln-faq .h2{grid-column:2;margin:0}
  .ln-faq__list{grid-column:4}

  .ln-close{display:flex;align-items:flex-end;min-height:min(40rem,46vw)}
  .ln-close__photo{position:absolute;inset:0;height:auto}
  .ln-close>.wrap{width:100%;display:grid;grid-template-columns:8% 44% 48%;padding-block:3.5rem}
  .ln-close__card{grid-column:2;margin:0;padding:1.6rem 1.75rem 1.75rem}

  .ln-end__in{width:56px;margin-left:calc(4cqw - 28px)}
  .ln-end__in::before{height:3.5rem}
  .ln-end__mark{width:56px;height:56px;margin:0 0 1.75rem}
}
@media (min-width:1180px){
  .ln-attr .ledger{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem}
  .ln-attr .ledger h3{min-height:calc(2.4em + .65rem + 2px)}
}