/* Cantic inner pages: the layouts the inner pages share, on top of css/cantic.css (load it after).
   Platform, Plans, Compliance, For IT providers and contractors, the food overview, and the
   generated segment and machines pages use these classes; any inner page may. Everything reads the
   theme tokens of css/cantic.css (--bg, --fg, --fg-2, --surface, --line, --outline, --alert), so
   each class works on dark, light and paper sections alike, and the fluid sizes stay in step with
   the type roles there. A flex heading (.lrow__head, a summary) keeps its words in one span, so they
   wrap as text; a hyphenated compound that must not break sits in span.nw.

   Classes, by component (markup sketches; "+" means "put both on the element"):

   Hero
     .page-hero                 the inner page's first section; its own padding clears the fixed
                                header. Use it with .sec (section.sec.page-hero) and the horizon edge
                                after it works as for any .sec; alone it still lays out (generated
                                pages). Children: .eyebrow, then
     .page-hero__title          the h1, Display size (64 at 1440); --xl for Display XL (80), for a
                                short name ("Eclipse", "Dairy"); --node puts an eclipse node before it
                                (svg.node, then the words in a span)
     .page-hero__lead           the grey line under the title, Lead size
     .page-hero__sub            a smaller line under the lead
     .page-hero__actions        + .btns: the button and the text link
     .page-hero__fine           small print under the actions (the track record's, or a .stamp)
     .page-hero__split          title block (.page-hero__head) on the left, a short paragraph
                                (.page-hero__aside) on the right, level at the foot, from 992
     .page-hero--media          a hero over a picture: section[data-nav-overlay] with
                                .page-hero__media (a <picture>, aria-hidden, under a scrim), the copy
                                in .page-hero__copy and a mono .page-hero__tag ("Illustration") at
                                the bottom right, above the horizon edge; on phones the copy sits at
                                the top and the picture shows below it

   Section heads
     .sec-head                  + .ehead: eyebrow and h2 with the space below them before the
                                section's content; .sec-head__lead is the grey lead under the h2, and
                                a .stamp may follow it; .sec-head--row puts a .go link at the right
                                end, level with the foot of the heading block

   Columns, rows and grids
     .cols                      columns of .col blocks, stacked below 992, then 3 (--2 for two);
                                --stack keeps them stacked at every width (beside a heading).
                                .col (add data-rule for the growing rule) holds .col__title,
                                .col__text, .col__list (li > svg.node + span) and a .source
     .split                     12 columns: .split__main (1 to 5) and .split__side (7 to 12) from
                                992, stacked below
     .lrows / .lrow             hairline list rows: .lrow__head (an optional svg.node, then the
                                words in one span) on the left, .lrow__text on the right;
                                .lrows--dates makes the head a mono date (p.lrow__head > time)
     .points / .point           a grid of points with a line icon: svg.icon.point__icon,
                                .point__title, .point__text (optional); 1, 2 then 3 columns
                                (--4: 4 from 1200)
     .figs / .fig               large mono figures with their label and source: .fig__num,
                                .fig__label, .source; 2 columns from 768
     .tiles                     a grid of .lcard tiles (the segment tiles), their .lcard__text
                                unclamped: 2 columns from 768; --4 for four from 1440; an
     .lcard__list--stack        a link card's mono tags one per line (for a plan's features)
     .steps--4                  four .step-card in .steps: two by two from 768, four in a row from
                                1200, titles and texts level across a row
     .ticks                     a list with a check mark before each line (li > svg.icon + span)
     .stages / .stage           three moments on one line (24 hours, 72 hours, one month):
                                .stage__when (mono, large), .stage__what, .stage__text

   Text pieces
     .note                      a paragraph in grey, Body size, at reading width; links underlined
     .stamp                     a mono date stamp with a dot ("Checked on 3 November 2026")
     .nw                        keeps a compound (step-by-step) or a figure and its unit together
     .measure                   a reading width for a block of small print
     .gap-top, .gap-top-sm      the space above a block: 96 and 48 at 1440 (32 and 16 on phones)

   Platform devices
     .lit                       a statement whose words light up as it scrolls through the screen:
                                [data-scrub] on it (js/cantic.js sets --p), each word a span with
                                --i (its index) and --n (the count) on the element; without the
                                script, and under reduced motion, every word is lit
     .chapters                  a console with chapter tabs: figure.console.console--wide with an id
                                and data-step="0", chapters in .cv__chapter[data-chapter="0|1|2"],
                                then .tabs.chapters__tabs[data-steps="<the figure's id>"] holding
                                button.tab.step (the first also .is-on); js/cantic.js lights one tab
                                at a time (is-on) and sets the figure's data-step; data-every on the
                                tabs is the pace in ms, and --every the same in CSS (the fill)
     .cv                        the console's inside: .cv__rail (from 992: .cv__scope with
                                small.cv__sub, .cv__label, then .cv__door rows, each a node, the
                                words with a small address, and .cv__states holding
                                .cv__state[data-on="0 1"] shown in those chapters; .cv__foot), and
                                .cv__main with the chapters: .cv__head (node, words, a .cv__tag with
                                .cv__push), an optional .cv__title, .cv__line rows that rise in turn
                                (--i: .cv__time, .cv__what with a small address, .cv__tag) and a
                                .cv__end status line. .cv__tag--live (signal red), --done (bright),
                                --way (the red bracket). Every value is synthetic demo data
     .console--wide             the console body: 540 px high from 768, 16:9 from 1200, taller on
                                phones (500 px)
     .screen                    a static console screen beside text (the finding screen):
                                .screen__body, .screen__label, .screen__row (--two for two cells),
                                .screen__k, .screen__v

   Plans and the NIS2 checker
     .plans / .plan             plan cards in three columns from 992: .plan__head (an .eyebrow for
                                the cadence and .plan__name), .plan__lead, .ticks, .plan__foot (small
                                print, then the button, at the bottom); data-theme="dark" on a .plan
                                inverts it on a light page
     .checker                   the NIS2 checker (js/compliance.js): .checker__form with fieldsets
                                .ask (legend.ask__q, .ask__hint, .ask__opts of label.opt > input +
                                span), and .checker__result with [data-result] blocks
                                (.checker__verdict, .checker__text) and .checker__foot with the
                                .checker__reset button; sticky beside the form from 992

   The closing bar
     .free-test                 the section that closes a page (dark, or light): .free-test__inner
                                (+ .wrap) with .free-test__title, .free-test__line, then a .btn or
                                .btns, and an optional .free-test__fine; the generated pages use the
                                same markup (site-src/templates/parts/free-test.html)

   Breakpoints follow css/cantic.css: phone below 768, tablet 768 to 991, desktop from 992. */

/* Hero */

.page-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + var(--sp-96)) var(--sp-96);
  background: var(--bg);
  color: var(--fg);
}

.page-hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
}

.page-hero__title {
  margin-top: var(--sp-8);
  max-width: 15em;
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.page-hero__title:first-child {
  margin-top: 0;
}

.page-hero__title--xl {
  font-size: var(--fs-display-xl);
  line-height: 1;
  letter-spacing: -.035em;
}

.page-hero__title--node {
  display: flex;
  align-items: center;
  gap: .22em;
}

.page-hero__title--node .node {
  width: .72em;
  height: .72em;
}

.page-hero__lead {
  margin-top: var(--sp-24);
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--fg-2);
  text-wrap: pretty;
}

.page-hero__sub {
  margin-top: var(--sp-16);
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.page-hero__actions {
  margin-top: var(--sp-48);
}

.page-hero__fine {
  margin-top: var(--sp-24);
  max-width: 36em;
}

/* Title block on the left, a short paragraph on the right, both on one baseline at the foot */
.page-hero__split {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-24);
  align-items: end;
}

.page-hero__split > * {
  grid-column: 1 / -1;
}

.page-hero__aside {
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* A hero over a picture: the picture fills the section under a scrim that darkens the left,
   where the copy sits, and the foot, where the header's gradient ends. */
.page-hero--media {
  display: grid;
  align-content: center;
  min-height: max(560px, 86svh);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--black);
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .82) 44%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .3) 72%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 32%);
}

.page-hero__tag {
  position: absolute;
  right: var(--margin);
  bottom: var(--sp-24);
  z-index: 1;
  color: var(--fg-2);
}

/* above the horizon edge when the next section bulges up into the hero */
.page-hero--media:has(+ [data-edge]) .page-hero__tag {
  bottom: calc(var(--edge-h) + var(--sp-24));
}

/* Section heads */

.sec-head {
  margin-bottom: var(--sp-96);
}

.sec-head > h2,
.sec-head > .t-section,
.sec-head > .t-statement {
  max-width: 22em;
}

.sec-head__lead {
  margin-top: var(--sp-16);
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--fg-2);
  text-wrap: pretty;
}

.sec-head > .stamp {
  margin-top: var(--sp-16);
}

.sec-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}

.sec-head--row > .ehead {
  max-width: 44em;
}

/* Columns */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-48) var(--gutter);
}

.col {
  display: grid;
  align-content: start;
  gap: var(--sp-16);
}

.col__title {
  max-width: 16em;
  font-size: var(--fs-card);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.col__text {
  max-width: 34em;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

.col__text strong {
  font-weight: 400;
  color: var(--fg);
}

.col__list {
  display: grid;
  gap: 12px;
  max-width: 34em;
}

.col__list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--fg-2);
}

.col__list .node {
  width: 14px;
  height: 14px;
  margin-top: .3em;
  color: var(--fg);
}

.col .source {
  margin-top: var(--sp-8);
}

/* the columns stay stacked at every width (beside a heading, say) */
.cols.cols--stack {
  grid-template-columns: minmax(0, 1fr);
}

/* a link card's tags, one per line */
.lcard__list--stack {
  flex-direction: column;
  gap: 8px;
}

/* keeps a compound such as step-by-step, or a figure and its unit, on one line */
.nw {
  white-space: nowrap;
}

/* a comfortable reading width for a block of small print */
.measure {
  max-width: 48em;
}

/* Split: text and a picture, or a heading and its text */

.split {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-48);
  align-items: start;
}

.split__main,
.split__side {
  grid-column: 1 / -1;
  min-width: 0;
}

/* List rows with hairlines: a head on the left, its text on the right */

.lrows {
  border-top: 1px solid var(--line);
}

.lrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8) var(--gutter);
  padding-block: clamp(20px, 1.944vw, 37.33px);
  border-bottom: 1px solid var(--line);
}

.lrow__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.lrow__head .node {
  position: relative;
  top: .1em;
  flex: none;
  width: .7em;
  height: .7em;
}

/* the words sit in one span, so they wrap as a line of text beside the node */
.lrow__head > span {
  flex: 1 1 auto;
  min-width: 0;
}

.lrow__text {
  max-width: 36em;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.lrow__text .source {
  display: block;
  margin-top: 10px;
}

.lrows--dates .lrow__head {
  font: 400 var(--fs-label)/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
}

.lrows--dates .lrow__text {
  color: var(--fg);
}

/* Points: a grid of short points, each with a line icon */

.points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-48) var(--gutter);
}

.point {
  display: grid;
  align-content: start;
  gap: var(--sp-16);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--line);
}

.point__icon.icon {
  width: clamp(28px, 2.222vw, 42.67px);
  height: clamp(28px, 2.222vw, 42.67px);
  stroke-width: 1;
}

.point__title {
  max-width: 16em;
  font-size: var(--fs-lead);
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.point__text {
  max-width: 30em;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Figures */

.figs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gutter);
}

.fig {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-block: var(--sp-24) var(--sp-48);
  border-top: 1px solid var(--line);
}

.fig__num {
  font: 400 var(--fs-display)/1 var(--mono);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fig__label {
  max-width: 24em;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Tiles: link cards in a grid (the segment tiles) */

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

.tiles .lcard {
  min-height: clamp(220px, 18vw, 340px);
}

.tiles .lcard__text {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}

/* A card that is not a link: it keeps the card's surface, and never inverts as a link card does */
.lcard--static:hover,
.lcard--static:has(:focus-visible) {
  --bg: inherit;
  --fg: inherit;
  --fg-2: inherit;
  --line: inherit;
  background: var(--surface);
}

.lcard--static > :nth-last-child(2) {
  margin-bottom: 0;
}

.lcard--static .source {
  margin-top: auto;
  padding-top: var(--sp-24);
}

/* Ticks: a list with a check mark before each line */

.ticks {
  display: grid;
  gap: 12px;
}

.ticks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  font-size: var(--fs-card-body);
  line-height: 1.45;
  text-wrap: pretty;
}

.ticks .icon {
  width: 20px;
  height: 20px;
  margin-top: .1em;
  color: var(--fg);
}

/* Stages: three moments on one line */

.stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-48) var(--gutter);
}

.stage {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: var(--sp-24);
  border-top: 1px solid var(--outline);
}

.stage::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fg);
}

.stage__when {
  font: 400 var(--fs-section)/1 var(--mono);
  letter-spacing: -.03em;
  white-space: nowrap;
}

.stage__what {
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -.015em;
}

.stage__text {
  max-width: 24em;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--fg-2);
}

/* Text pieces */

.note {
  max-width: 40em;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.note + .note {
  margin-top: 1em;
}

.note a,
.col__text a,
.lrow__text a:not(.source a),
.point__text a,
.checker__result a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.stamp::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* The statement that lights up word by word with scroll */

.lit {
  max-width: 24em;
}

.lit > span {
  opacity: clamp(.2, calc((var(--p, 1) * (var(--n, 20) + 3) - var(--i, 0)) / 3), 1);
  transition: opacity .2s linear;
}

/* The console with chapter tabs (the Platform hero) */

.chapters {
  display: grid;
  gap: var(--sp-16);
}

.console--wide .console__body {
  aspect-ratio: auto;
  min-height: 500px;
}

.chapters__tabs {
  --every: 6000ms;
}

.chapters__tabs .tab {
  flex: 1 1 0;
  justify-content: center;
}

.chapters__tabs .tab.is-on {
  border-color: var(--surface);
  background: var(--surface);
  color: var(--fg);
}

.chapters__tabs .tab.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  opacity: .14;
  transform-origin: 0 0;
  animation: chapter-fill var(--every) linear both;
}

@keyframes chapter-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* The console's inside: the doors in scope on the left, the chapter on the right */

.cv {
  position: absolute;
  inset: 0;
  right: var(--bleed, 0px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font: 400 var(--fs-label)/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.cv__rail {
  display: none;
}

.cv__main {
  position: relative;
  min-width: 0;
}

.cv__chapter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.667vw, 32px);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease-io), visibility 0s linear .4s;
}

[data-step='0'] .cv__chapter[data-chapter='0'],
[data-step='1'] .cv__chapter[data-chapter='1'],
[data-step='2'] .cv__chapter[data-chapter='2'] {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s var(--ease-io), visibility 0s;
}

.cv__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}

.cv__head .node {
  width: 12px;
  height: 12px;
}

/* the chapter's title takes the room beside the node and wraps there, not under it */
.cv__head > span:not(.cv__tag) {
  flex: 1 1 0;
  min-width: 0;
}

.cv__head > .cv__tag {
  white-space: nowrap;
}

.cv__title {
  margin-block: clamp(16px, 1.667vw, 32px) 12px;
  max-width: 26em;
  font: 400 var(--fs-card)/1.2 var(--sans);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--fg);
  text-wrap: balance;
}

.cv__line {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 16px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}

[data-step='0'] [data-chapter='0'] .cv__line,
[data-step='1'] [data-chapter='1'] .cv__line,
[data-step='2'] [data-chapter='2'] .cv__line {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 140ms + 150ms);
}

.cv__time {
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.cv__what {
  min-width: 0;
  color: var(--fg);
}

.cv__what small {
  display: block;
  margin-top: 2px;
  font-size: inherit;
  color: var(--fg-2);
}

.cv__tag {
  justify-self: end;
  white-space: nowrap;
  color: var(--fg-2);
}

.cv__tag--live {
  color: var(--alert);
}

.cv__tag--done {
  color: var(--fg);
}

/* the way in: Cantic's red bracket, around the word */
.cv__tag--way {
  padding: 1px 6px;
  border: 1.5px solid var(--alert);
  color: var(--alert);
}

.cv__door {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}

.cv__states {
  justify-self: end;
  white-space: nowrap;
  color: var(--fg-2);
}

.cv__push {
  margin-left: auto;
}

.cv__sub {
  display: block;
  margin-top: 2px;
  font-size: inherit;
  color: var(--fg-2);
}

.cv__door .node {
  width: 12px;
  height: 12px;
  margin-top: .15em;
}

.cv__door small {
  display: block;
  margin-top: 2px;
  font-size: inherit;
  color: var(--fg-2);
}

.cv__state {
  display: none;
}

[data-step='0'] .cv__state[data-on~='0'],
[data-step='1'] .cv__state[data-on~='1'],
[data-step='2'] .cv__state[data-on~='2'] {
  display: inline;
}

.cv__scope {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}

.cv__foot {
  margin-top: auto;
  padding-top: 14px;
  color: var(--fg-2);
}

/* the chapter's status line, at the foot of the pane */
.cv__end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
}

/* A static console screen beside text (the finding screen) */

.screen .console__body {
  aspect-ratio: auto;
}

.screen__body {
  display: grid;
  gap: 0;
  padding: clamp(16px, 1.667vw, 32px);
  font: 400 var(--fs-label)/1.45 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.screen__row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 16px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
}

.screen__row--two {
  grid-template-columns: minmax(0, 1fr) auto;
}

.screen__k {
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.screen__v {
  min-width: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.screen__row .cv__tag--way {
  justify-self: start;
}

.screen__label {
  margin-top: clamp(20px, 1.944vw, 37.33px);
  padding-bottom: 8px;
  color: var(--fg);
}

/* Plans */

.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: clamp(20px, 1.944vw, 37.33px);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
}

.plan[data-theme='dark'] {
  background: var(--bg);
}

.plan__head {
  display: grid;
  gap: var(--sp-8);
}

.plan__name {
  font-size: var(--fs-card);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.plan__lead {
  max-width: 26em;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

.plan__foot {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: var(--sp-24);
}

.plan__foot .fine {
  max-width: 28em;
}

/* The NIS2 checker */

.checker {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-48);
}

.checker__form,
.checker__result {
  grid-column: 1 / -1;
  min-width: 0;
}

.checker__form {
  border-bottom: 1px solid var(--line);
}

.ask {
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 1.944vw, 37.33px) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* a legend that behaves like a block, so the hint and the options flow under it */
.ask__q {
  float: left;
  width: 100%;
  padding: 0;
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.ask__q + * {
  clear: both;
}

.ask__hint {
  padding-top: 10px;
  max-width: 40em;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}

.ask__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: var(--sp-16);
}

.opt {
  position: relative;
  display: inline-flex;
}

.opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opt span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
  transition: background-color .15s var(--ease-io), color .15s var(--ease-io), border-color .15s var(--ease-io);
  pointer-events: none;
}

@media (hover: hover) {
  .opt:hover span {
    border-color: var(--fg);
  }
}

.opt input:checked + span {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.opt input:focus-visible + span {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.checker__result {
  align-self: start;
  display: grid;
  gap: var(--sp-16);
  padding: clamp(20px, 1.944vw, 37.33px);
  border-radius: var(--radius);
  background: var(--surface);
}

.checker__result [data-result] {
  display: grid;
  gap: 12px;
}

.checker__verdict {
  font-size: var(--fs-card);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.checker__text {
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

.checker__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
}

.checker__reset {
  position: relative;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* the script shows one result at a time; without it, the rule in words stays */
.js .checker__result [data-result='nojs'] {
  display: none;
}

/* The closing bar */

.free-test {
  position: relative;
  padding-block: var(--sp-96);
  background: var(--bg);
  color: var(--fg);
}

.free-test__inner {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-24);
  align-items: end;
}

.free-test__inner > * {
  grid-column: 1 / -1;
}

.free-test__title {
  max-width: 16em;
  font-size: var(--fs-statement);
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.free-test__line {
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--fg-2);
  text-wrap: pretty;
}

.free-test__inner > .btn,
.free-test__inner > .btns {
  justify-self: start;
  margin-top: var(--sp-24);
}

.free-test__fine {
  max-width: 44em;
  margin-top: var(--sp-24);
}

/* Four step cards: two by two, then four in a row from 1200 */
@media (min-width: 768px) {
  .steps.steps--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* each card spans two rows of the list, its title and its text, so the texts start level */
  .steps--4 .step-card {
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

@media (min-width: 1200px) {
  .steps.steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Section rhythm helpers */

.gap-top {
  margin-top: var(--sp-96);
}

.gap-top-sm {
  margin-top: var(--sp-48);
}

/* Tablet and up */

@media (min-width: 768px) {
  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lrow {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    align-items: baseline;
  }

  .lrow__head {
    grid-column: 1 / span 3;
  }

  .lrow__text {
    grid-column: 4 / -1;
  }

  .console--wide .console__body {
    min-height: 540px;
  }
}

/* Desktop */

@media (min-width: 992px) {
  .cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split__main {
    grid-column: 1 / span 5;
  }

  .split__side {
    grid-column: 7 / -1;
  }

  .lrow__head {
    grid-column: 1 / span 5;
  }

  .lrow__text {
    grid-column: 7 / -1;
  }

  .lrows--dates .lrow__head {
    grid-column: 1 / span 3;
  }

  .lrows--dates .lrow__text {
    grid-column: 4 / -1;
  }

  .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-hero__split .page-hero__head {
    grid-column: 1 / span 7;
  }

  .page-hero__split .page-hero__aside {
    grid-column: 9 / -1;
  }

  .checker__form {
    grid-column: 1 / span 7;
  }

  .checker__result {
    grid-column: 9 / -1;
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-24));
  }

  .free-test__inner .free-test__title,
  .free-test__inner .free-test__line,
  .free-test__inner .free-test__fine {
    grid-column: 1 / span 8;
  }

  .free-test__inner > .btn,
  .free-test__inner > .btns {
    grid-column: 9 / -1;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: end;
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  .points--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* the console's 16:9 frame, once it is wide enough to hold a chapter */
  .console--wide .console__body {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

/* the doors in scope, beside the chapter, once there is room for both */
@media (min-width: 992px) {
  .cv {
    grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  }

  .cv__rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(16px, 1.667vw, 32px);
    border-right: 1px solid var(--line);
    overflow: hidden;
  }

  .cv__rail .cv__label {
    margin-top: 14px;
    padding-bottom: 6px;
    color: var(--fg-2);
  }
}

@media (min-width: 1200px) {
  .tiles--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .tiles--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Portrait screens (phones, and tablets held upright): the hero's picture is the portrait frame,
   picked by the same media query in the <picture>. The copy sits at the top on black, and the
   picture is a band below it (--media-h), held clear of the copy by the section's bottom padding,
   so however long the copy runs in either language, no word ever sits on the scan. */
@media (max-aspect-ratio: 4/5) {
  .page-hero.page-hero--media.sec {
    --media-h: calc(var(--edge-h) + 42svh);
    align-content: start;
    min-height: 0;
    padding-bottom: var(--media-h);
  }

  .page-hero__media {
    top: auto;
    height: var(--media-h);
  }

  .page-hero__media img {
    object-position: 50% 100%;
  }

  .page-hero__media::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .55) 28%, rgba(0, 0, 0, .1) 62%, rgba(0, 0, 0, .3) 100%);
  }
}

/* Phones */
@media (max-width: 767px) {
  .cv__line,
  .screen__row {
    grid-template-columns: 5.6em minmax(0, 1fr) auto;
    gap: 4px 10px;
  }

  .screen__row--two {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cv__what small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lit > span {
    opacity: 1;
  }

  .cv__line {
    opacity: 1;
    transform: none;
  }
}