/* The fonts are ours and are served from our own origin: reading this page
         sends no request to Google, which is one fewer party in the privacy
         notice and one fewer thing that can be slow. */
      /* Generated once from the Google Fonts CSS, then committed — the fonts are
   served from our own origin so no visitor request reaches Google. The files
   are the variable fonts: one per family and subset, 400-800 in each.
   BRD-TYP-001 — Heebo carries the Hebrew, Plus Jakarta Sans the Latin. */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/heebo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

      /* ------------------------------------------------------------------ tokens
         Values are the ones in packages/ui/src/palette.ts. This page does not
         invent a colour; brand-guidelines §7.3 is the source and palette.test.ts
         is what checks the pairings. */
      :root {
        --bg: #eff3f1;
        --card: #ffffff;
        --inset: #f2f6f4;
        --ink: #0f1a16;
        --ink-2: #46554f;
        --ink-3: #5a6b64; /* 5.04:1 on the ground, 5.64:1 on white */
        --line: #dbe3df;
        /* 3.19:1 on the ground, 3.57:1 on white: control boundaries, WCAG 1.4.11.
           --line is a divider between areas and is allowed to be quiet; the edge
           of a thing you type into is not a divider, and at 1.17:1 it was not
           visible to anyone who needs it to be. Same job as --on-deep-line, on
           the light surfaces. */
        --field-line: #748d83;
        --brand: #0a7d4c;
        --brand-ink: #075c38;
        --bright: #3ddc93;
        --tint: #e4f2ea;
        --amber: #8f5a0a;
        --amber-tint: #fbf0da;
        --red: #b7241f;
        --red-tint: #fadedc;

        --deep: #08211a;
        --deep-2: #0d2f24;
        --on-deep: #eaf3ee;
        --on-deep-2: #a4bdb1;
        --on-deep-line: #457a64; /* 3.4:1 on --deep: control boundaries, WCAG 1.4.11 */

        /* The mark's three colours, in one place. The checkmark-grid sheet
           proposed #22C55E / #94A3B8 / #0F172A; those are a different palette
           from the product's (BRD-COL-004 — no grey, every neutral rotated to
           hue 160) and #22C55E is 2.3:1 on white, which will not carry the
           "Shift" in the wordmark. So the form is the sheet's and the values
           are the product's. Swapping them back is these three lines. */
        --mark-on: var(--brand);
        --mark-idle: #93a89f; /* 2.5:1 on white — the weight the sheet's #94A3B8 has */
        --mark-tick: #ffffff;

        --sh-1: 0 1px 2px rgba(15, 26, 22, 0.05), 0 10px 24px -10px rgba(15, 26, 22, 0.14);
        --sh-2: 0 2px 6px rgba(15, 26, 22, 0.06), 0 26px 56px -22px rgba(15, 26, 22, 0.28);

        --r-sm: 12px;
        --r-md: 18px;
        --r-lg: 26px;

        --s-1: 8px;
        --s-2: 16px;
        --s-3: 24px;
        --s-4: 32px;
        --s-5: 48px;
        --s-6: 64px;
        --s-7: 80px;

        --shell: 1200px;
        --nav-h: 68px;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--nav-h) + 20px);
        /* The parts we did not draw still belong to the page. */
        scrollbar-color: #c2d0ca transparent;
        scrollbar-width: thin;
        accent-color: var(--brand);
        caret-color: var(--brand);
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
      }

      ::selection {
        background: var(--tint);
        color: var(--brand-ink);
      }
      .band-deep ::selection,
      footer ::selection {
        background: rgba(61, 220, 147, 0.26);
        color: var(--on-deep);
      }

      ::-webkit-scrollbar {
        width: 12px;
        height: 10px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: #c2d0ca;
        border-radius: 999px;
        border: 3px solid var(--bg);
      }
      ::-webkit-scrollbar-thumb:hover {
        background: var(--ink-3);
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: 'Heebo', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
        font-size: 17px;
        line-height: 1.6;
        font-weight: 500;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        /* Times, hours and counts sit in running copy all over this page; they
           should not jitter between a 1 and a 4. */
        font-variant-numeric: tabular-nums;
      }

      /* Tracking tightens as the type grows — one setting for every size is
         loose at 62px and cramped at 19px. */
      :where(h1, h2, h3, h4) {
        margin: 0;
        font-weight: 800;
        line-height: 1.08;
        text-wrap: balance;
      }
      p {
        margin: 0;
        text-wrap: pretty;
      }
      img,
      svg {
        max-width: 100%;
      }

      :where(a, button, summary, details):focus-visible {
        outline: 3px solid var(--brand);
        outline-offset: 3px;
        border-radius: 6px;
      }
      .on-deep :where(a):focus-visible {
        outline-color: var(--bright);
      }

      /* The page is Hebrew, so the exception is the other way round now: the
         English headline, the wordmark and anything else marked lang="en". */
      [lang='en'] {
        font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
      }

      .skip {
        position: absolute;
        inset-inline-start: -9999px;
        top: 0;
        z-index: 100;
        background: var(--brand);
        color: #fff;
        padding: 12px 18px;
        border-end-end-radius: var(--r-sm);
        font-weight: 700;
      }
      .skip:focus {
        inset-inline-start: 0;
      }

      /* ------------------------------------------------------------------ layout */
      .shell {
        width: 100%;
        max-width: var(--shell);
        margin: 0 auto;
        padding: 0 24px;
      }

      section {
        padding: var(--s-7) 0;
      }
      @media (max-width: 720px) {
        section {
          padding: var(--s-6) 0;
        }
      }

      .band-deep {
        background: var(--deep);
        color: var(--on-deep);
      }
      .band-card {
        background: var(--card);
      }
      .band-tint {
        background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%);
      }

      /* Tracking no longer tightens as the type grows, because Hebrew does not
         take negative tracking — there are no ascenders and no descenders to
         hang a tight line off, and Heebo's counters close before the setting
         reads tighter. Leading goes the other way for the same reason: a
         Hebrew line is a solid band, so it wants a little more air than the
         Latin setting these numbers were chosen for. BRD-TYP-005. */
      h1 {
        font-size: clamp(38px, 6vw, 62px);
        letter-spacing: normal;
        line-height: 1.12;
      }
      h2 {
        font-size: clamp(29px, 3.9vw, 43px);
        letter-spacing: normal;
        line-height: 1.16;
      }
      h3 {
        font-size: clamp(19px, 2.1vw, 23px);
        letter-spacing: normal;
        line-height: 1.3;
      }

      .lead {
        font-size: clamp(17.5px, 1.9vw, 20px);
        line-height: 1.55;
        color: var(--ink-2);
        font-weight: 500;
      }
      .on-deep .lead {
        color: var(--on-deep-2);
      }
      .measure {
        max-width: 58ch;
      }

      /* Heading to its own lead is a tight pair; the pair to the content below
         it is a separation. */
      .head {
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
        margin-bottom: var(--s-6);
      }
      /* When the head carries the whole section (#thursday: the question and
         its picture), the section's own padding is the separation. */
      .head:last-child {
        margin-bottom: 0;
      }
      .head h2 {
        max-width: 19ch;
      }
      /* A heading that sets its own break needs room for the longer half; the
         19ch measure would wrap it a second time. */
      .head h2.h2-break {
        max-width: 24ch;
      }
      .head .lead {
        max-width: 56ch;
      }

      .muted {
        color: var(--ink-2);
      }
      .on-deep .muted {
        color: var(--on-deep-2);
      }
      .small {
        font-size: 15px;
        line-height: 1.5;
      }
      .tiny {
        font-size: 13.5px;
        line-height: 1.5;
      }

      /* ------------------------------------------------------------------ buttons */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 52px;
        padding: 0 26px;
        border-radius: 999px;
        font-size: 17px;
        font-weight: 700;
        /* A label is one line. Broken in two, a pill reads as two stacked words
           in a green blob, not as a button. */
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition:
          background-color 0.18s ease,
          border-color 0.18s ease,
          color 0.18s ease,
          transform 0.18s ease;
      }
      .btn-primary {
        background: var(--brand);
        color: #fff;
      }
      .btn-primary:hover {
        background: var(--brand-ink);
      }
      .btn-ghost {
        border-color: var(--line);
        color: var(--ink);
        background: transparent;
      }
      .btn-ghost:hover {
        border-color: var(--brand);
        color: var(--brand-ink);
        background: var(--tint);
      }
      .on-deep .btn-primary {
        background: var(--bright);
        color: #06251a;
      }
      .on-deep .btn-primary:hover {
        background: #7fe9b3;
      }
      .on-deep .btn-ghost {
        border-color: var(--on-deep-line);
        color: var(--on-deep);
      }
      .on-deep .btn-ghost:hover {
        border-color: var(--bright);
        color: var(--bright);
        background: rgba(61, 220, 147, 0.08);
      }
      .btn-sm {
        min-height: 44px;
        padding: 0 20px;
        font-size: 15.5px;
      }
      @media (prefers-reduced-motion: no-preference) {
        .btn:active {
          transform: translateY(1px);
        }
      }

      /* --------------------------------------------------------------- the mark
         The checkmark grid: four shifts, three still open, one confirmed. The
         filled cell sits bottom-right, so the mark has handedness — BRD-MRK-005
         test 3 wants that drawn deliberately rather than left to chance, and
         `.mark-rtl` is the mirrored form for right-to-left surfaces. */
      /* BRD-MRK-002 — the wordmark stays Latin inside Hebrew, RTL screens, and
         it keeps its own family and its own tracking with it. The lockup is an
         asset, not a run of page text. */
      .wordmark {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        text-decoration: none;
        color: var(--ink);
        font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.035em;
      }
      .wordmark .shift {
        color: var(--brand);
      }
      /* BRD-MRK-007 — the symbol is never drawn below 16px. A flex row that runs
         out of room squeezes an SVG first, so neither the lockup nor the symbol
         inside it is allowed to give way. */
      .wordmark,
      .wordmark .mark {
        flex-shrink: 0;
      }
      .on-deep .wordmark,
      footer .wordmark {
        color: var(--on-deep);
      }
      .on-deep .wordmark .shift,
      footer .wordmark .shift {
        color: var(--bright);
      }
      .mark .cell {
        fill: var(--mark-idle);
      }
      .mark .cell-on {
        fill: var(--mark-on);
      }
      .mark .tick {
        stroke: var(--mark-tick);
      }
      .mark-rtl {
        transform: scaleX(-1);
      }
      footer .mark {
        --mark-on: var(--bright);
        --mark-idle: #3a6656;
        --mark-tick: #06251a;
      }

      /* ------------------------------------------------------------------ nav */
      /* At the top of the page the bar has no business drawing a line under
         itself; it earns one once there is content behind it. */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        height: var(--nav-h);
        background: rgba(239, 243, 241, 0.82);
        backdrop-filter: saturate(1.5) blur(14px);
        border-bottom: 1px solid transparent;
        transition:
          border-color 0.25s ease,
          box-shadow 0.25s ease,
          background-color 0.25s ease;
      }
      #nav-top {
        height: 1px;
      }
      .nav[data-stuck] {
        background: rgba(239, 243, 241, 0.9);
        border-bottom-color: var(--line);
        box-shadow: 0 1px 3px rgba(15, 26, 22, 0.05);
      }
      .nav-in {
        height: 100%;
        display: flex;
        align-items: center;
        gap: var(--s-3);
      }
      .nav-links {
        display: flex;
        gap: 4px;
        margin-inline-start: auto;
      }
      .nav-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px;
        border-radius: 999px;
        text-decoration: none;
        color: var(--ink-2);
        font-size: 15.5px;
        font-weight: 600;
        white-space: nowrap;
        transition:
          background-color 0.18s ease,
          color 0.18s ease;
      }
      .nav-links a:hover {
        background: var(--tint);
        color: var(--brand-ink);
      }
      /* Ten thousand pixels of page: saying where you are is not decoration. */
      .nav-links a[aria-current] {
        color: var(--ink);
      }
      .nav-links a[aria-current]::after {
        content: '';
        position: absolute;
        inset-inline: 14px;
        bottom: 2px;
        height: 2px;
        border-radius: 999px;
        background: var(--brand);
      }
      .nav-links a {
        position: relative;
      }
      .nav .btn {
        margin-inline-start: 4px;
        flex-shrink: 0;
      }
      /* Seven links on one line need ~950px of bar. Below that they used to
         wrap "איך זה עובד" onto two lines and, once #compare added a seventh,
         push the button off the screen, so the links go before they collide. */
      @media (max-width: 980px) {
        .nav-links {
          display: none;
        }
        .nav .btn {
          margin-inline-start: auto;
        }
      }
      /* On a phone the bar holds two things, and at 360px they were 4px too wide
         for one row. The gap stays above BRD-MRK-006's clear space (the cap
         height of the S, ~14px at 20px) and the wordmark above its 80px floor. */
      @media (max-width: 420px) {
        .nav-in {
          gap: var(--s-2);
        }
        .nav .btn {
          padding: 0 16px;
          font-size: 15px;
        }
      }
      @media (max-width: 359px) {
        .nav-in {
          padding-inline: var(--s-2);
        }
        .nav .wordmark {
          gap: 8px;
          font-size: 18px;
        }
        .nav .btn {
          padding: 0 14px;
        }
      }

      /* ------------------------------------------------------------------ hero
         Centred, with the week's answers scattered behind it. The arrangement is
         the product's own sentence in one image: the team answers, and the week
         comes out of it — BRD-COL-002, the hero image is a week going green, and
         BRD-MSG-007, pillar 1 is never shown without pillar 3.

         No kicker over the headline. That was a craft decision the last pass
         made deliberately (README) and the reference this was drawn from puts
         one there; the headline still does not need help. */
      .hero {
        position: relative;
        padding: var(--s-5) 0 var(--s-5);
        overflow: hidden;
      }
      /* Light behind the phones rather than a panel under them. Tint, bright and
         brand only — BRD-COL-004, this page does not invent a colour, so the
         warm-to-cool wash of the reference becomes one green. */
      .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
          radial-gradient(62% 52% at 50% 46%, rgba(228, 242, 234, 0.92) 0%, rgba(228, 242, 234, 0) 72%),
          radial-gradient(34% 38% at 10% 16%, rgba(61, 220, 147, 0.11) 0%, rgba(61, 220, 147, 0) 70%),
          radial-gradient(34% 38% at 90% 22%, rgba(10, 125, 76, 0.07) 0%, rgba(10, 125, 76, 0) 70%);
      }

      .hero-in {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
      }
      .hero h1 {
        max-width: 18ch;
      }
      /* No second line under the headline. The six-word line (§4.3) used to
         sit here and said "סידור" a third time before the button; it lives in
         the footer and the <title>, and the hero is headline, one sentence,
         two buttons. */
      .hero-in .lead {
        max-width: 52ch;
      }
      .hero-cta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--s-2);
        margin-top: var(--s-1);
      }

      /* Three long lines centred would rag on both edges and read as a poster.
         The block is centred; the lines inside it are not. */
      .facts {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-top: var(--s-1);
        padding-top: var(--s-3);
        border-top: 1px solid var(--line);
        max-width: 62ch;
        margin-inline: auto;
        text-align: start;
        align-self: center;
      }
      .fact {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 15px;
        line-height: 1.45;
        color: var(--ink-2);
        font-weight: 600;
      }
      .fact svg {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--brand);
      }

      .hero-stage {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: var(--s-2);
        /* The front phone is pushed down 26px and rotated 2.2deg, and both are
           transforms — they move the pixels without moving the layout box. The
           section clips, so without the extra room here the bottom of the
           screen is shaved off. 40px covers the offset plus what the rotation
           adds across a 292px width. */
        padding-bottom: calc(var(--s-4) + 40px);
      }

      /* ------------------------------------------------- the answers, floating
         Every one of these is a real answer state from the rating screen, drawn
         with the artboard's own tile shape, palette and glyph — BRD-MRK-012, the
         product is the imagery, so the decoration is the product or it is not
         there. Positioned in the margins the copy does not use: the centre
         column stays clear at every width, which is checked rather than eyed. */
      .hero-field {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
      }
      .sig {
        position: absolute;
        inset-inline-start: var(--x);
        top: var(--y);
        width: var(--d);
        height: var(--d);
        /* The app's tile is 16px on 56px. Keeping the ratio keeps the family. */
        border-radius: calc(var(--d) * 0.29);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        transform: rotate(var(--r, 0deg));
        box-shadow:
          0 1px 2px rgba(15, 26, 22, 0.05),
          0 16px 30px -16px rgba(15, 26, 22, 0.3);
      }
      .sig svg {
        width: 46%;
        height: 46%;
      }
      .sig.want {
        background: var(--brand);
        color: #fff;
      }
      .sig.can {
        background: var(--tint);
        color: var(--brand-ink);
      }
      .sig.not-keen {
        background: var(--amber-tint);
        color: var(--amber);
      }
      .sig.unsure {
        background: var(--card);
        border: 1.5px dashed var(--field-line);
        color: var(--ink-3);
      }
      .sig.no {
        background: var(--red-tint);
        color: var(--red);
      }
      .sig.blank {
        background: var(--card);
        color: var(--ink-3);
      }
      /* They thin out rather than pile up: the margins that hold them are the
         first thing a narrower window takes away, and below 1080 there is no
         margin left — the headline and the two-phone stage have the width. A
         tile behind the copy is worse than no tile, so the field goes rather
         than crowding. */
      @media (max-width: 1240px) {
        .sig[data-tier='2'] {
          display: none;
        }
      }
      @media (max-width: 1080px) {
        .hero-field {
          display: none;
        }
      }
      .hero-stage .phone:first-child {
        --tilt: rotate(-2.2deg);
        --rest-y: 26px;
        transform: translateY(var(--rest-y)) var(--tilt);
        z-index: 1;
        margin-inline-end: -46px;
      }
      .hero-stage .phone:last-child {
        --tilt: rotate(1.4deg);
        transform: var(--tilt);
        z-index: 2;
      }
      /* Below this the pair no longer fits side by side, so it stacks rather than
         dropping one — the rating grid going green is the image that explains the
         product without being read, and it is the one that must survive. */
      @media (max-width: 620px) {
        .hero-stage {
          flex-direction: column;
          align-items: center;
          gap: var(--s-3);
          padding-bottom: var(--s-2);
        }
        .hero-stage .phone:first-child,
        .hero-stage .phone:last-child {
          --tilt: ;
          --rest-y: 0px;
          transform: none;
          margin-inline-end: 0;
        }
      }

      /* --------------------------------------------------------- artboard framing
         .dc is a fixed box; .dc-art is the untouched artboard, scaled into it.
         --dc-w / --dc-h come from the artboard's own preview size, and --dc-crop-t /
         --dc-crop-b from the crop on the screen token. All four are set at build
         time; scale is the only thing this stylesheet decides. */
      .dc {
        --dc-s: 0.72;
        --dc-crop-t: 0;
        --dc-crop-b: 0;
        width: calc(var(--dc-w) * var(--dc-s) * 1px);
        height: calc((var(--dc-h) - var(--dc-crop-t) - var(--dc-crop-b)) * var(--dc-s) * 1px);
        overflow: hidden;
        flex-shrink: 0;
      }
      .dc-art {
        transform: scale(var(--dc-s)) translateY(calc(var(--dc-crop-t) * -1px));
        transform-origin: 0 0;
        /* The frame is the artboard's width TIMES the scale, so the unscaled
           board inside it is always wider than the box it sits in — 390 in 281
           — and it is the transform that brings it back. That makes the
           overflow load-bearing, and an over-wide block is placed by the
           direction it inherits: at the left edge in LTR, at the RIGHT edge in
           RTL, hanging off the left. With the origin pinned to 0 0, scaling
           then shrinks it toward a corner that is already outside the frame,
           and every screen on this page lost 85px off its right-hand side.
           Each artboard sets its own direction on .root, so this decides where
           that box lands and nothing about what is inside it. */
        direction: ltr;
        /* An artboard renders as drawn. The page's tabular figures are the
           page's decision, not the product's. */
        font-variant-numeric: normal;
      }

      /* A bezel, not a rounded div: a hairline frame with its own gradient, the
         screen inset inside it, and a three-stop shadow so the thing has mass
         on the ground it sits on. */
      .phone {
        --bezel: 5px;
        padding: var(--bezel);
        border-radius: 42px;
        background: linear-gradient(160deg, #ffffff 0%, #e8eeeb 52%, #d3ddd8 100%);
        /* A device is defined by elevation; the bezel gradient is its edge. */
        box-shadow:
          0 2px 3px rgba(15, 26, 22, 0.06),
          0 14px 26px -12px rgba(15, 26, 22, 0.22),
          0 48px 76px -34px rgba(15, 26, 22, 0.38);
      }
      .phone .dc {
        border-radius: calc(42px - var(--bezel));
        box-shadow: inset 0 0 0 1px rgba(15, 26, 22, 0.07);
      }
      .band-deep .phone {
        background: linear-gradient(160deg, #2c4b3f 0%, #16342a 55%, #0d2318 100%);
        box-shadow:
          0 0 0 1px rgba(234, 243, 238, 0.1),
          0 20px 34px -16px rgba(0, 0, 0, 0.55),
          0 60px 90px -40px rgba(0, 0, 0, 0.6);
      }
      .phone .dc {
        --dc-s: 0.72;
      }
      /* A step down from every other phone on the page. The hero's job is to get
         both screens into the first view; elsewhere the screen is the subject and
         gets its full size. */
      .hero-stage .phone .dc {
        --dc-s: 0.64;
      }
      .phone.sm .dc {
        --dc-s: 0.62;
      }
      @media (max-width: 620px) {
        .phone .dc,
        .phone.sm .dc {
          --dc-s: 0.68;
        }
      }

      /* OpeningV2 closes with a note written for the design review — it compares
         the screen to the old spine. Every other screen used here is product
         only. The note is the artboard's last block, and this is the one place
         the site edits what it shows rather than cropping it. */
      .dc-OpeningV2RTL .root > *:last-child {
        display: none;
      }

      .board {
        border-radius: var(--r-lg);
        /* The board's own ground, so the drawing reaches the card's edge instead
           of stopping 30px short of it in a white strip. */
        background: var(--bg);
        /* A card on a white band is defined by its edge, not by a glow
           underneath it. One or the other, never both. */
        border: 1px solid var(--line);
        overflow-x: auto;
        overflow-y: hidden;
      }
      /* A wide board is 1120px of drawing. Scale it down in steps while it still
         fits the column, then stop shrinking and let it scroll inside its own box.
         The page itself never scrolls sideways, and the diagram stays legible.
         Auto margins centre it while it fits and collapse to zero once it
         scrolls, so nothing is cut off at the start. */
      .board .dc {
        --dc-s: 1;
        margin-inline: auto;
      }
      @media (max-width: 1247px) {
        .board .dc {
          --dc-s: 0.9;
        }
      }
      @media (max-width: 1120px) {
        .board .dc {
          --dc-s: 0.82;
        }
      }
      @media (max-width: 1023px) {
        .board .dc {
          --dc-s: 0.74;
        }
      }
      @media (max-width: 720px) {
        .board .dc {
          --dc-s: 0.62;
        }
      }

      figure {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
      }
      figcaption {
        font-size: 14.5px;
        line-height: 1.5;
        color: var(--ink-2);
        font-weight: 600;
        max-width: 40ch;
      }
      figcaption b {
        color: var(--ink);
        font-weight: 800;
      }
      .on-deep figcaption {
        color: var(--on-deep-2);
      }
      .on-deep figcaption b {
        color: var(--on-deep);
      }
      figure > .board {
        align-self: stretch;
      }
      .board-fig figcaption {
        max-width: 76ch;
      }

      /* The wide board scrolls sideways and holds nothing focusable, so it
         carries tabindex="0" and a name — otherwise a keyboard user cannot reach
         the part that is off-screen (WCAG 2.1.1). */
      .board:focus-visible {
        outline: 3px solid var(--brand);
        outline-offset: 3px;
      }

      /* ------------------------------------------------------------ screen cards
         Three parallel proofs, so three equal objects. The comparison block's
         note — that boxing an argument with a direction flattens it — does not
         apply here: these three hold at once and none of them answers another.

         A grid, not the scrolling rail this replaced. Nothing was ever
         off-screen at desktop, so the rail was a column count expressed as a
         scrollbar, and it had to carry a tabindex and a group name so a keyboard
         could reach what the scroll hid. Wrapping to two and then one retires
         all three.

         The screen is cropped rather than shrunk. Three 296px columns left the
         phone at 0.62, which renders a 13px string at eight pixels — present,
         unreadable, and no longer evidence of anything. Bigger and cut at the
         waist, the part still on the card is the part that carries the claim:
         the title, the state, the first rows. The caption says the rest, and the
         figure's own label says all of it to a screen reader. */
      /* The count is not set by hand, because the thing that has to fit is a
         fixed-width screen and the constraint is therefore the COLUMN, not the
         viewport. Three columns declared at a viewport breakpoint gives its
         narrowest column one pixel above that breakpoint — 302px at 1001, for a
         card that needs 356 — and the phone hangs out of its own frame. Naming
         the width the card actually needs and letting auto-fit decide how many
         fit removes the class of bug rather than the instance.

         min(360px, 100%) so the track can still shrink below its own minimum on
         a phone; a bare minmax(360px, …) overflows every viewport narrower than
         360.

         The max has to stay 1fr. auto-fit counts how many tracks fit using the
         MAX sizing function when that max is definite, so a 520px ceiling here
         quietly capped the row at two columns on a 1440px screen — the tracks
         had room for three and the count did not know it. The ceiling belongs on
         the card, which is where the intent actually was: stop a lone card
         stretching the full shell with a 300px screen adrift in a lake of
         tint. */
      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
        gap: var(--s-3);
      }

      /* An edge, not an elevation. These sit on the plain ground in #changes and
         on the white band in #rules, and a hairline reads on both. */
      .pcard {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        overflow: hidden;
      }
      .pcard-shot {
        position: relative;
        display: flex;
        justify-content: center;
        height: 300px;
        padding: var(--s-3) var(--s-3) 0;
        background: var(--inset);
        box-sizing: border-box;
        overflow: hidden;
      }
      /* The screen runs out rather than stopping. The end colour is --inset
         written out, because a gradient to `transparent` interpolates through
         transparent BLACK and lays a grey bloom across the fade. */
      .pcard-shot::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 96px;
        background: linear-gradient(rgba(242, 246, 244, 0), #f2f6f4);
      }
      .pcard .phone .dc {
        --dc-s: 0.74;
      }
      @media (max-width: 680px) {
        .pcard-shot {
          height: 264px;
        }
      }
      /* One column and a narrow one: the card's own padding is most of the width
         by then, so the screen steps down to keep its bezel inside the card. */
      @media (max-width: 420px) {
        .pcard-shot {
          padding-inline: var(--s-2);
        }
        .pcard .phone .dc {
          --dc-s: 0.62;
        }
      }
      @media (max-width: 359px) {
        .pcard .phone .dc {
          --dc-s: 0.54;
        }
      }
      .pcard figcaption {
        padding: var(--s-3);
        max-width: none;
        font-size: 15px;
        line-height: 1.6;
        font-weight: 500;
      }
      /* The lead phrase was a bold run inside a paragraph, which made it the
         loudest thing in a sentence rather than the title of one. It is the
         claim; give it the line. */
      .pcard figcaption b {
        display: block;
        margin-bottom: 6px;
        font-size: 17.5px;
        line-height: 1.32;
        font-weight: 800;
        color: var(--ink);
      }

      /* ------------------------------------------------------------------ blocks */
      .split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-6);
        align-items: center;
      }
      @media (max-width: 1080px) {
        .split {
          grid-template-columns: 1fr;
          gap: var(--s-4);
        }
      }
      .stage {
        display: flex;
        gap: var(--s-3);
        align-items: flex-start;
        flex-wrap: wrap;
      }
      /* Same reason as the rails: without a width the figure sizes to its
         caption's max-content and eats the text column beside it. */
      .stage > figure {
        width: 262px;
      }
      @media (max-width: 620px) {
        .stage > figure {
          width: min(296px, calc(100vw - 48px));
        }
      }
      .prose {
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
      }
      .prose h2 + .lead {
        margin-top: -4px;
      }

      /* Three failures answered three times. Rules and weight carry the
         comparison; boxing each one would make three equal objects out of an
         argument that has a direction. */
      /* ------------------------------------------------ what Thursday costs
         The section asks how long the week takes, and answers with what fills
         the evening rather than with a number: the same Thursday twice, once
         as five separate jobs and once as one.

         Drawn the way this product draws everything, as rated tiles, and in
         the app's own marks (RatingTile.tsx), so the manager's evening is rated
         in the same language they will ask their team to rate a week in:

           · Today is five prefer_not tiles, the wave on amber. Five of them is
             the argument: the evening is ask, chase, build, check, explain.
           · The end nobody can promise is not_sure, the dashed ring on an
             unfilled tile. Time that may or may not be spent.
           · With SmartShift is one preferred tile, the star on solid brand, and
             the rest of the evening turns available: the tick on the brand
             tint. The week going green (BRD-COL-002), said about their Thursday.
             That remainder is the payoff, so it carries the largest type.

         There is no axis. The widths are relative weight, not minutes, so no
         tile states a duration the copy does not have.

         Contrast. In the app the mark, not the fill, tells the ratings apart
         (DES-A11Y-001), and it does here: every tile has its mark and its
         word, so the tints are free to stay soft and the edges only have to
         shape the tile, not carry it. Text: --amber on its tint 5.1, white on
         --brand 5.2, --brand-ink on --tint 7.0.

         Its motion — the jobs piling in, the evening opening back up — is a
         scroll-driven moment under "scroll-driven moments" below; the resting
         state here is the final state. */
      .cost {
        margin: var(--s-5) 0 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
      }
      .cost-row {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .cost-lab {
        font-size: 15px;
        font-weight: 700;
        color: var(--ink-3);
      }
      .cost-row.is-now .cost-lab {
        color: var(--brand-ink);
      }
      .cost-rail {
        display: flex;
        align-items: stretch;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      /* Basis 0, so each tile's width is its --g share of the rail and not the
         length of its label. Mark at the top, word at the foot: the way a block
         sits in a calendar, which is what an evening of jobs is. */
      .cost-rail > li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        flex: var(--g, 1) 1 0;
        min-height: 96px;
        padding: 15px 16px 14px;
        border: 1px solid transparent;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
      }
      .cost-mark {
        width: 20px;
        height: 20px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cost-mark.is-filled {
        fill: currentColor;
        stroke: none;
      }
      /* prefer_not. The edge is the amber at a quarter, enough to shape a tile
         on white without drawing a box round every job. */
      .cost-rail > .cost-step {
        background: var(--amber-tint);
        border-color: color-mix(in srgb, var(--amber) 24%, transparent);
        color: var(--amber);
      }
      /* not_sure — no fill, a dashed edge. Quieter than the jobs, because it
         is the part that may not happen. */
      .cost-rail > .cost-tail {
        border: 1.5px dashed color-mix(in srgb, var(--amber) 55%, transparent);
        color: var(--amber);
        font-weight: 500;
      }
      /* preferred — solid brand, the way a wanted shift is drawn, and the only
         tile with elevation: the one you would have chosen. The label never
         wraps, so the tile is never narrower than its one job. */
      .cost-rail > .cost-step.is-now {
        background: var(--brand);
        color: #fff;
        white-space: nowrap;
        box-shadow:
          0 1px 2px rgba(7, 92, 56, 0.2),
          0 12px 24px -12px rgba(7, 92, 56, 0.55);
      }
      /* available — the evening handed back. */
      .cost-rail > .cost-free {
        background: var(--tint);
        color: var(--brand-ink);
        font-size: clamp(17px, 1.6vw, 20px);
        font-weight: 800;
        line-height: 1.25;
      }
      /* Six tiles across a phone would leave each one a word wide. Below 700px
         the jobs size to their labels and wrap, which still reads as a crowded
         evening; the tail stays, it is the sentence the dashed edge makes. */
      @media (max-width: 700px) {
        .cost {
          gap: var(--s-4);
        }
        .cost-rail {
          flex-wrap: wrap;
        }
        .cost-rail > li {
          flex-basis: auto;
          min-height: 80px;
          padding: 13px 14px 12px;
          gap: 10px;
          white-space: nowrap;
        }
        .cost-rail > .cost-free {
          white-space: normal;
        }
      }
      /* The note the chart is answering, kept with it rather than left to float
         under the section as a stray paragraph. */
      .cost figcaption {
        margin-top: var(--s-2);
        max-width: 54ch;
        font-size: 16px;
        line-height: 1.6;
        font-weight: 500;
        color: var(--ink-2);
      }

      /* ---------------------------------------------------------------- pain
         Three problems, each opening the section that answers it: requests
         that scroll away open #week, the puzzle opens the rules, "why did I get
         Friday again?" opens #why. They used to sit together under the
         Thursday picture, which made that section answer its question twice —
         once in the picture and again in three cards, with claims the page
         only proves three sections later. Here each pain is met by its proof.

         Drawn as the Thursday rail in miniature: the problem on an amber
         prefer_not tile with the wave, the answer on the green available tile
         with the tick. The reader learns that pairing once, in the picture,
         and meets it again every time a section turns a today into a with
         SmartShift. Side by side, because the claim is only worth anything as
         a contrast (DESIGN_CRAFT §19); stacked on a phone.

         On the deep bands the product's own dark pairs take over: amber 400 on
         the dark warning tint, brand bright on brand deep. Both tints are 1.2
         against --deep, so there the tiles carry a faint edge in their own hue.
         Text: --ink-2 on the amber tint 7.0, --brand-ink on --tint 7.0; dark,
         amber 400 on its tint 7.6, bright on brand deep 8.1. */
      .pain {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
        margin-bottom: var(--s-6);
      }
      /* In #rules the section is already the page's densest — the openings
         grid, three screens and the layer table — so the pain takes no band of
         its own. It sits in the text column beside the grid, in the space the
         lead leaves under it, with its two tiles stacked. */
      .pain.is-stacked {
        grid-template-columns: minmax(0, 1fr);
        margin: var(--s-2) 0 0;
      }
      .pain.is-stacked .pain-was,
      .pain.is-stacked .pain-now {
        padding: 20px 22px;
      }
      .pain.is-stacked h3 {
        font-size: 18px;
      }
      .pain.is-stacked .pain-now dd {
        font-size: 16px;
      }
      .pain-was,
      .pain-now {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: var(--s-3) 28px;
        border: 1px solid transparent;
        border-radius: 18px;
      }
      .pain-was {
        background: var(--amber-tint);
        border-color: color-mix(in srgb, var(--amber) 22%, transparent);
      }
      .pain-now {
        justify-content: center;
        background: var(--tint);
      }
      .pain h3 {
        font-size: 19.5px;
      }
      .pain dl {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .pain dt {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--amber);
      }
      .pain dt .cost-mark {
        width: 18px;
        height: 18px;
      }
      .pain dd {
        margin: 0;
        font-size: 15.5px;
        line-height: 1.6;
        color: var(--ink-2);
        text-wrap: pretty;
      }
      .pain-now dt {
        color: var(--brand-ink);
      }
      .pain-now dd {
        font-size: 17px;
        line-height: 1.5;
        font-weight: 700;
        color: var(--ink);
      }

      .on-deep .pain-was {
        background: #3a2c10;
        border-color: rgba(240, 185, 92, 0.24);
      }
      .on-deep .pain-now {
        background: #12301f;
        border-color: rgba(61, 220, 147, 0.22);
      }
      .on-deep .pain h3,
      .on-deep .pain-now dd {
        color: var(--on-deep);
      }
      .on-deep .pain dd {
        color: var(--on-deep-2);
      }
      .on-deep .pain dt {
        color: #f0b95c;
      }
      .on-deep .pain-now dt {
        color: var(--bright);
      }

      @media (max-width: 639px) {
        .pain {
          grid-template-columns: minmax(0, 1fr);
        }
        .pain-was,
        .pain-now {
          padding: 20px 22px;
        }
      }

      /* Four steps, four columns, and each column holds its OWN screen.
         Before this the section told the story twice: four steps across the top,
         three phones in a rail underneath, and nothing saying which phone
         belonged to which step — the reader had to work out that the second
         phone was the third step. Four against three, in two layouts, with the
         step text and the caption explaining the same thing in different words.

         One column per step fixes the correspondence by construction. The step
         with no screen is the engine, and its slot says so rather than leaving
         a hole (§19 — fix the shapes).

         Explicit column counts, not auto-fit: four auto-fitting cards land on
         three-plus-one at common widths, and a sequence that wraps with one
         orphan reads as broken. The 1200px break is where four 252px screens
         plus their gutters stop fitting the shell. */
      .steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--s-5) var(--s-3);
      }
      @media (max-width: 1199px) {
        .steps {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 700px) {
        .steps {
          grid-template-columns: minmax(0, 1fr);
        }
      }
      /* Every screen is the same 390×844 artboard at the same scale, so letting
         the paragraph absorb the slack aligns the tops AND the bottoms of all
         four slots at once. */
      .step > p {
        flex: 1;
      }
      /* The bezel is padding around a fixed-width artboard, so a stretched
         .phone puts 5px on one side and 23px on the other and the screen sits
         off-centre in its own frame. Flex makes it shrink-wrap; start-aligned so
         every screen shares a left edge with the text above it. */
      .step .shot {
        margin-top: 14px;
        display: flex;
        justify-content: flex-start;
      }
      /* The step you are not present for. A panel the size of a phone, so the
         row keeps its rhythm, saying the one thing the engine guarantees —
         ADR-0001, no model anywhere in the scheduling path. */
      .engine {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 14px;
        width: 252px;
        height: 533px;
        max-width: 100%;
        padding: var(--s-3);
        border-radius: 26px;
        background: var(--deep);
        color: var(--on-deep);
      }
      .engine b {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.35;
      }
      .engine span {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--on-deep-2);
      }
      .engine .rule {
        width: 34px;
        height: 3px;
        border-radius: 2px;
        background: var(--bright);
      }
      @media (max-width: 700px) {
        .engine {
          height: auto;
          padding: var(--s-4) var(--s-3);
          /* Stacked one per row, the panel and the phones share a left edge, so
             a different right edge is visible. 275px is the phone at its mobile
             scale — 390 * 0.68 plus the two 5px bezels. */
          width: auto;
          align-self: stretch;
          max-width: 275px;
        }
      }
      .step {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      /* The section's claim is "three of them happen without you", and that was
         only ever said, never shown. The node says it: hollow where the week
         moves on its own, filled where it needs you. Same two states as the
         mark — a shift still open, a shift confirmed — so the rail reads the
         way the logo does. */
      .step .node {
        position: relative;
        display: block;
        height: 2px;
        margin-bottom: 6px;
        background: var(--line);
        border-radius: 2px;
      }
      .step .node::before {
        content: '';
        position: absolute;
        inset-block-start: -5px;
        inset-inline-start: 0;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: var(--card);
        border: 2px solid var(--mark-idle);
      }
      .step.is-yours .node {
        background: var(--brand);
      }
      .step.is-yours .node::before {
        inset-block-start: -7px;
        width: 16px;
        height: 16px;
        background: var(--brand);
        border-color: var(--brand);
      }
      /* The one step that is yours carries the weight; the other three are
         dialled down rather than this one dialled up — DESIGN_CRAFT §19. */
      .step.is-yours .when {
        background: var(--brand);
        color: #fff;
      }
      /* BRD-TYP-005 — Hebrew has no capitals, so uppercase is a no-op here and
         the letterspacing that went with it is actively wrong: tracked-out
         Hebrew pulls the word apart into letters. Size and weight carry the
         label instead. */
      .step .when {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        height: 26px;
        padding: 0 12px;
        border-radius: 999px;
        background: var(--tint);
        color: var(--brand-ink);
        font-size: 13px;
        font-weight: 800;
      }


      .keys {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--s-3);
      }
      .key {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-top: 14px;
        border-top: 2px solid var(--line);
      }
      .key .k {
        font-size: 17px;
        font-weight: 800;
      }
      .key .v {
        font-size: 15px;
        line-height: 1.5;
        color: var(--ink-2);
      }
      .on-deep .key {
        border-color: var(--on-deep-line);
      }
      .on-deep .key .k {
        color: var(--on-deep);
      }
      .on-deep .key .v {
        color: var(--on-deep-2);
      }

      /* ------------------------------------------------------- the guarantees
         Four promises that were three loose keys in a two-column grid — which
         orphaned the third — plus a fourth buried in a paragraph underneath that
         nobody would reach. Loose text with a rule over it is not a component;
         it is prose wearing a border.

         One bounded object instead, because these four ARE one thing: the terms
         the build is offered on. Giving them an edge, a label and a shared
         rhythm turns "some more paragraphs" into something you can take in
         without reading every word.

         Ticks, not numbers. DESIGN_CRAFT §4 — order implies sequence, and these
         four hold simultaneously; numbering them would claim an order that does
         not exist. */
      .terms {
        border: 1px solid var(--on-deep-line);
        border-radius: var(--r-md);
        background: var(--deep-2);
        padding: var(--s-2) var(--s-3);
      }
      /* BRD-TYP-005 — see .step .when. */
      .terms-label {
        font-size: 13px;
        font-weight: 800;
        color: var(--bright);
        padding: 10px 0;
      }
      .term {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 3px 12px;
        padding: 14px 0;
        border-top: 1px solid var(--on-deep-line);
      }
      .term svg {
        grid-row: 1 / span 2;
        margin-top: 3px;
        color: var(--bright);
      }
      .term b {
        font-size: 16.5px;
        font-weight: 800;
        color: var(--on-deep);
      }
      .term span {
        font-size: 15px;
        line-height: 1.5;
        color: var(--on-deep-2);
      }
      /* The one sentence that decides whether any of the four can be believed,
         given the room to be read on its own. */
      .terms-note {
        margin-top: var(--s-3);
        font-size: 15.5px;
        line-height: 1.55;
        font-weight: 600;
        color: var(--on-deep);
      }
      /* The column used to be centred against two tall phones, which pushed it
         down and left a hole under the lead. Both columns start together. */
      #why .split {
        align-items: start;
      }

      /* ------------------------------------------------------- the openings
         Bars measure, boxes contain, and neither of them is what this section is
         about. The argument here is "cannot", so the drawing has to be one: a
         worker's week as a grid of shifts, twelve of which the build may use and
         nine of which it may not.

         Drawn in the app's own three signs rather than in three fills, because
         the app already has a word for each of these states:

           · open    tint and a dot — the build may put somebody here
           · policy  a DASHED edge, the same not_sure the rating screen gives an
                     answer that is not fixed. You closed it; you can open it
           · law     a solid edge and a PADLOCK, which is the sign OpeningV2 and
                     CapBlock already use when the reason is the statute

         What this replaced said all three with diagonal hatching in three
         colours, plus a cross over the red — which at cell size is not a
         drawing, it is noise. "Never colour alone" still holds and now holds on
         a shape you can name: a dot, a dashed edge, a lock.

         The legend and the count were two elements saying the same three things
         in different words, and the legend sat BELOW the note explaining the
         colours it was there to explain. They are one list now, and its swatch
         is the cell itself — a key that redraws the thing in some other shape is
         a second thing to learn. */
      /* The screens below are a new group, so the split owns its separation
         from them rather than borrowing it from whichever column runs longer. */
      .ow-split {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: var(--s-6);
        align-items: start;
        margin-bottom: var(--s-6);
      }
      @media (max-width: 1000px) {
        .ow-split {
          grid-template-columns: minmax(0, 1fr);
          gap: var(--s-4);
        }
      }
      /* The cell is meant to read as a shift, and a shift is not 120 pixels
         wide and 54 tall. Once the split collapses the figure has the whole
         shell to stretch into, so it is given a measure instead. */
      .openings {
        display: block;
        margin: 0;
        max-width: 42rem;
      }
      .ow {
        display: grid;
        grid-template-columns: max-content repeat(7, minmax(0, 1fr));
        gap: 7px;
      }
      .ow-day,
      .ow-row {
        font-size: 13px;
        font-weight: 700;
        color: var(--ink-3);
      }
      .ow-day {
        text-align: center;
        padding-bottom: 4px;
      }
      .ow-row {
        display: flex;
        align-items: center;
        padding-inline-end: 12px;
      }
      .ow-c {
        position: relative;
        height: 54px;
        border: 1.5px solid transparent;
        border-radius: 13px;
        box-sizing: border-box;
      }
      /* Open: the build may put somebody here. */
      .ow-c.ok {
        background: var(--tint);
      }
      .ow-c.ok::after {
        content: '';
        position: absolute;
        inset: 50% auto auto 50%;
        width: 9px;
        height: 9px;
        margin: -4.5px 0 0 -4.5px;
        border-radius: 999px;
        background: var(--brand);
      }
      /* Your policy: closed by you, and you can open it again. */
      .ow-c.pol {
        background: var(--amber-tint);
        border-color: var(--amber);
        border-style: dashed;
      }
      /* The law: not a cell the build declines to use — one it cannot reach. */
      .ow-c.law {
        background: var(--red-tint);
        border-color: var(--red);
      }
      .ow-c.law svg,
      .ow-key li.is-law svg {
        position: absolute;
        inset: 50% auto auto 50%;
        width: 17px;
        height: 17px;
        margin: -8.5px 0 0 -8.5px;
        color: var(--red);
      }

      .ow-key {
        list-style: none;
        margin: var(--s-3) 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 11px;
      }
      .ow-key li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        line-height: 1.4;
        font-weight: 600;
        color: var(--ink-2);
      }
      .ow-swatch {
        position: relative;
        flex-shrink: 0;
        width: 36px;
        height: 26px;
        border: 1.5px solid transparent;
        border-radius: 9px;
        box-sizing: border-box;
      }
      .ow-key b {
        flex-shrink: 0;
        min-width: 1.4ch;
        font-size: 19px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
      }
      .ow-key li.is-ok .ow-swatch {
        background: var(--tint);
      }
      .ow-key li.is-ok .ow-swatch::after {
        content: '';
        position: absolute;
        inset: 50% auto auto 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: 999px;
        background: var(--brand);
      }
      .ow-key li.is-ok b {
        color: var(--brand-ink);
      }
      .ow-key li.is-pol .ow-swatch {
        background: var(--amber-tint);
        border-color: var(--amber);
        border-style: dashed;
      }
      .ow-key li.is-pol b {
        color: var(--amber);
      }
      .ow-key li.is-law .ow-swatch {
        background: var(--red-tint);
        border-color: var(--red);
      }
      .ow-key li.is-law svg {
        width: 14px;
        height: 14px;
        margin: -7px 0 0 -7px;
      }
      .ow-key li.is-law b {
        color: var(--red);
      }

      .ow-note {
        margin-top: var(--s-3);
        max-width: none;
        font-size: 15.5px;
        line-height: 1.6;
        font-weight: 500;
        color: var(--ink-2);
      }
      .ow-note b {
        font-weight: 800;
        color: var(--ink);
      }

      @media (max-width: 560px) {
        .ow {
          gap: 5px;
        }
        .ow-c {
          height: 42px;
          border-radius: 10px;
        }
        .ow-c.law svg {
          width: 14px;
          height: 14px;
          margin: -7px 0 0 -7px;
        }
        .ow-day,
        .ow-row {
          font-size: 11.5px;
        }
        .ow-row {
          padding-inline-end: 7px;
        }
      }

      .nots {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      /* "We do the week. Nothing else." was drawn as six crosses and no tick —
         the sentence's second half, with the first half missing. One filled
         chip restores it, and the boundary becomes something you can see rather
         than a list you have to read to the end of. */
      .does {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        height: 42px;
        padding: 0 20px;
        border-radius: 999px;
        background: var(--bright);
        color: var(--deep);
        font-size: 15.5px;
        font-weight: 800;
      }
      .does svg {
        flex-shrink: 0;
      }
      .not {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        height: 42px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1.5px solid var(--on-deep-line);
        color: var(--on-deep-2);
        font-size: 15.5px;
        font-weight: 600;
      }
      .not svg {
        color: var(--on-deep-2);
        flex-shrink: 0;
      }

      /* -------------------------------------------------------------- compare
         Today, the other apps, and us, on the things that cost a manager time.
         The marks are the rating screen's own (RatingTile.tsx), the same three
         the Thursday chart speaks in: the tick for "works", the dashed ring of
         not_sure for "partly, or depends on the tool", the amber wave of
         prefer_not for "this is where it breaks". Shape carries the verdict and
         a hidden word says it to a screen reader — never colour alone.

         The rules belong to the rows, as in the FAQ below it. The one thing
         with a ground of its own is our column, because it is the column the
         table is read towards: right to left, the problem, today, the others,
         us. */
      .cmp-key {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 24px;
        margin: 0 0 var(--s-3);
        padding: 0;
        list-style: none;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--ink-2);
      }
      .cmp-key li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .cmp {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
      }
      .cmp .c-issue {
        width: 22%;
      }
      .cmp th,
      .cmp td {
        text-align: start;
        vertical-align: top;
        padding: 20px 20px 20px 18px;
        border-top: 1px solid var(--line);
      }
      .cmp tbody tr:last-child > * {
        border-bottom: 1px solid var(--line);
      }
      .cmp thead th {
        vertical-align: bottom;
        border-top: 0;
        padding-block: 20px 16px;
      }
      .cmp thead b {
        display: block;
        font-size: 19px;
        font-weight: 800;
        line-height: 1.25;
        color: var(--ink);
      }
      .cmp thead small {
        display: block;
        margin-top: 4px;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--ink-3);
      }
      .cmp tbody th {
        padding-inline-start: 0;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.35;
        color: var(--ink);
      }
      .cmp td {
        font-size: 15.5px;
        line-height: 1.55;
        color: var(--ink-2);
      }
      .cmp .is-us {
        background: var(--tint);
        border-top-color: color-mix(in srgb, var(--brand) 14%, transparent);
        color: var(--ink);
        font-weight: 600;
      }
      .cmp thead .is-us {
        border-start-start-radius: var(--r-md);
        border-start-end-radius: var(--r-md);
      }
      .cmp thead .is-us b {
        color: var(--brand-ink);
      }
      .cmp thead .is-us small {
        color: var(--brand-ink);
      }
      .cmp tbody tr:last-child .is-us {
        border-bottom-color: transparent;
        border-end-start-radius: var(--r-md);
        border-end-end-radius: var(--r-md);
      }
      .v {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }
      .v .cost-mark {
        margin-top: 2px;
      }
      .is-yes > .cost-mark {
        color: var(--brand);
      }
      .is-part > .cost-mark {
        color: var(--ink-3);
      }
      .is-no > .cost-mark {
        color: var(--amber);
      }
      .vh {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
      .cmp-note {
        margin-top: var(--s-3);
      }

      /* A phone has no room for four columns, so each issue becomes its own
         block: the question, then the three answers stacked, each named. The
         header row is hidden visually rather than removed, and the table keeps
         its roles in the markup, because Safari drops table semantics the
         moment a table stops being displayed as one. The name above each
         answer is generated with empty alt text, since the column header
         already says it to a screen reader. */
      @media (max-width: 760px) {
        .cmp,
        .cmp tbody,
        .cmp tr,
        .cmp th,
        .cmp td {
          display: block;
        }
        .cmp colgroup {
          display: none;
        }
        .cmp thead {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
        .cmp tbody tr {
          padding: 22px 0 18px;
          border-top: 1px solid var(--line);
        }
        .cmp tbody tr:last-child {
          border-bottom: 1px solid var(--line);
        }
        .cmp tbody th,
        .cmp td,
        .cmp tbody tr:last-child > * {
          border: 0;
          padding: 0;
        }
        .cmp tbody th {
          margin-bottom: 12px;
          font-size: 18px;
        }
        .cmp td {
          padding-block: 8px;
        }
        .cmp td::before {
          content: attr(data-col);
          content: attr(data-col) / '';
          display: block;
          margin-bottom: 4px;
          font-size: 13px;
          font-weight: 700;
          color: var(--ink-3);
        }
        .cmp td.is-us,
        .cmp tbody tr:last-child .is-us {
          margin-top: 8px;
          padding: 12px 16px 14px;
          border-radius: 14px;
        }
        .cmp td.is-us::before {
          color: var(--brand-ink);
        }
      }

      /* ------------------------------------------------------------------ faq */
      /* The rules belong to the rows, the same way they do in the comparison
         above — not to a wrapper with its children sitting on the line. */
      .faq {
        display: flex;
        flex-direction: column;
      }
      .faq details {
        border-top: 1px solid var(--line);
      }
      .faq details:last-child {
        border-bottom: 1px solid var(--line);
      }
      .faq summary {
        list-style: none;
        cursor: pointer;
        padding-block: 20px;
        padding-inline: 0 44px;
        position: relative;
        font-size: clamp(17.5px, 1.9vw, 20px);
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--ink);
      }
      .faq summary::-webkit-details-marker {
        display: none;
      }
      .faq summary::after {
        content: '';
        position: absolute;
        inset-inline-end: 12px;
        top: 50%;
        width: 11px;
        height: 11px;
        border-right: 2.5px solid var(--brand);
        border-bottom: 2.5px solid var(--brand);
        transform: translateY(-70%) rotate(45deg);
        transition: transform 0.2s ease;
      }
      .faq details[open] summary::after {
        transform: translateY(-30%) rotate(-135deg);
      }
      /* The chevron has always turned over 0.2s; the answer it points at used
         to simply be there. Both @supports conditions have to hold, so a
         browser missing either one drops the whole block and keeps exactly the
         behaviour this page shipped with — no script, no fallback to maintain.
         Opening eases out, closing eases in: the house curve run backwards
         collapses 80% of the height in the first fifth of the duration and
         then crawls, which reads as a stutter rather than a close. */
      @media (prefers-reduced-motion: no-preference) {
        @supports selector(::details-content) and (interpolate-size: allow-keywords) {
          .faq details {
            interpolate-size: allow-keywords;
          }
          .faq details::details-content {
            block-size: 0;
            opacity: 0;
            /* hidden, not clip: it establishes a block formatting context, so
               the answer's own margins cannot collapse out of the box being
               animated and leave a gap behind a closed question. */
            overflow: hidden;
            transition:
              block-size 0.2s ease-in,
              opacity 0.15s ease,
              content-visibility 0.2s allow-discrete;
          }
          .faq details[open]::details-content {
            block-size: auto;
            opacity: 1;
            transition:
              block-size 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease,
              content-visibility 0.26s allow-discrete;
          }
        }
      }
      .faq summary:hover {
        color: var(--brand-ink);
      }
      .faq .a {
        padding-block: 0 var(--s-3);
        padding-inline: 0 var(--s-5);
        color: var(--ink-2);
        font-size: 16.5px;
        line-height: 1.6;
        max-width: 70ch;
      }

      /* ------------------------------------------------------------------ close */
      .close-in {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--s-3);
      }
      .close-in h2 {
        max-width: 24ch;
      }
      .close-in .lead {
        max-width: 54ch;
      }

      footer {
        background: var(--deep);
        color: var(--on-deep-2);
        padding: var(--s-5) 0 var(--s-6);
      }
      .foot {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-3) var(--s-5);
        align-items: flex-start;
      }
      .foot a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--on-deep);
        text-decoration: underline;
        text-decoration-color: var(--on-deep-line);
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
        transition:
          color 0.18s ease,
          text-decoration-color 0.18s ease;
      }
      .foot a:hover {
        color: var(--bright);
        text-decoration-color: var(--bright);
      }
      /* The lockup is an asset, not a link in a list: no underline under it. */
      .foot a.wordmark {
        text-decoration: none;
      }
      .foot .links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-3);
        font-size: 15px;
        font-weight: 600;
        margin-inline-start: auto;
      }
      .foot .brandline {
        font-size: 16px;
        font-weight: 700;
        color: var(--on-deep);
        margin-bottom: 10px;
      }
      .foot .legalese {
        font-size: 13.5px;
        line-height: 1.6;
        max-width: 44ch;
        color: var(--on-deep-2);
      }

      /* -------------------------------------------------------------- waitlist
         LEG-MSG-002 — joining is an email the person sends themselves, which is
         the explicit, recorded opt-in. The form's styles are parked with it in
         src/waitlist-form.parked.html. */
      .wl {
        max-width: 30rem;
        margin: var(--s-4) auto 0;
        text-align: start;
      }
      .wl .btn {
        width: 100%;
        margin-top: var(--s-3);
      }
      .wl-alt {
        margin-top: var(--s-2);
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-2);
      }
      .wl-alt a {
        color: var(--brand-ink);
        font-weight: 600;
      }
      /* LEG-PRV-001 🔴 — the notice sits at the point of collection, under the
         button, not behind a link. Small, because it is not the pitch; present,
         because it is the law. */
      .wl-notice {
        margin-top: var(--s-2);
        font-size: 14px;
        line-height: 1.55;
        color: var(--ink-3);
      }
      .close-note {
        max-width: 52ch;
        margin-top: var(--s-4);
      }

      /* A link inside running copy. Left to the browser it was #0000ee, the one
         colour on the page that is not the product's. */
      a.inline {
        color: var(--brand-ink);
        font-weight: 700;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: rgba(7, 92, 56, 0.35);
        text-underline-offset: 4px;
        transition: text-decoration-color 0.18s ease;
      }
      a.inline:hover {
        text-decoration-color: currentColor;
      }

      /* A clock range, a date range, an address: an LTR island in an RTL
         paragraph. Without the isolate the bidi algorithm resolves the dash
         between two numbers to the paragraph's direction and swaps the ends,
         so 07:00–15:00 renders as 15:00–07:00. Same rule the artboards carry. */
      .ltr {
        direction: ltr;
        unicode-bidi: isolate;
      }

      /* ------------------------------------------------------------------ motion
         Every motion on the page is the product's own material and says what
         the thing it moves means (README, "Motion is the product's own
         material"). Here, the hero: the two phones settle in the order the
         product works — the week is answered, then the week is built.
         Everything is written as the final state and animated only when
         `html.motion` is set, so the page renders complete with no script,
         under reduced motion, and with no chance of content that never
         arrives. */
      @keyframes settle {
        from {
          opacity: 0;
          transform: translateY(var(--rest-y, 0px)) translateY(26px) scale(0.965) var(--tilt, );
          filter: blur(7px);
        }
        to {
          opacity: 1;
          transform: translateY(var(--rest-y, 0px)) scale(1) var(--tilt, );
          filter: blur(0);
        }
      }
      .motion .hero-stage .phone {
        animation: settle 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
      }
      .motion .hero-stage .phone:first-child {
        animation-delay: 0.06s;
      }
      .motion .hero-stage .phone:last-child {
        animation-delay: 0.24s;
      }
      .motion .hero-stage .phone:last-child {
        animation-duration: 1.15s;
      }
      /* The answers arrive after the screens they belong to, and then stop. A
         perpetual drift would be decoration that means nothing; the moving
         field below the hero is the week being answered, not a drift. Written
         as the final state, animated only under .motion. */
      @keyframes sigIn {
        from {
          opacity: 0;
          transform: rotate(var(--r, 0deg)) scale(0.55);
        }
        to {
          opacity: 1;
          transform: rotate(var(--r, 0deg)) scale(1);
        }
      }
      .motion .sig {
        animation: sigIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: var(--delay, 0s);
      }

      /* ------------------------------------------------------------------ field
         The surface behind the page below the hero: a regular grid of the
         rating tile's shape in hairline, at very low contrast, only in the
         clearings around content, and a soft brand-tint light that follows a
         fine pointer. It replaced a field of coloured answer tiles that read as
         confetti — the page's own tiles are the only ones that say anything.
         Drawn by the script at the end of the page on one viewport-sized
         canvas; this only places it.

         Stacking: the canvas is fixed at z 0 and first in <body>, sections are
         not positioned, so it paints over each band's colour and under every
         .shell, which is lifted to z 1. The hero is positioned and comes later,
         so it covers the field — the hero has its own answers. */
      .field {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }
      main > section > .shell,
      footer > .shell {
        position: relative;
        z-index: 1;
      }

      /* ------------------------------------------------ scroll-driven moments
         Three, each telling what its own figure means, never a generic reveal.
         Scroll-driven because in each the scroll IS the story: the evening
         filling up, the week being closed cell by cell, the four steps passed.
         Scrubbed, so they run backwards when you scroll back up.

         Guarded twice. Only under .motion (script ran, no reduced-motion), and
         only where view timelines exist — anywhere else the figures sit in
         their final state, exactly as before. Nothing is hidden that a failed
         timeline could leave hidden: an unsupported browser never matches. */
      @keyframes landIn {
        from {
          opacity: 0;
          transform: translateY(18px) scale(0.9);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes greenIn {
        from {
          opacity: 0;
          transform: scale(0.82);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      /* The evening handed back opens out of the green tile: in RTL the tile
         is on the right, so the remainder is uncovered from its right edge. */
      @keyframes openOut {
        from {
          clip-path: inset(0 0 0 100% round 14px);
        }
        to {
          clip-path: inset(0 0 0 0 round 14px);
        }
      }
      @keyframes lockIn {
        from {
          opacity: 0;
          transform: scale(1.18);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes railFill {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }
      @supports (animation-timeline: view()) {
        /* Thursday: five jobs pile into the evening one after another, the
           dashed maybe trails after them; then the one green tile lands and
           the rest of the evening opens out beside it. */
        .motion .cost {
          view-timeline: --cost block;
        }
        .motion .cost-row:first-child .cost-rail > li {
          animation: landIn linear both;
          animation-timeline: --cost;
          animation-range: cover calc(6% + var(--i, 0) * 3.5%) cover calc(18% + var(--i, 0) * 3.5%);
        }
        .cost-rail > li:nth-child(2) {
          --i: 1;
        }
        .cost-rail > li:nth-child(3) {
          --i: 2;
        }
        .cost-rail > li:nth-child(4) {
          --i: 3;
        }
        .cost-rail > li:nth-child(5) {
          --i: 4;
        }
        .cost-rail > li:nth-child(6) {
          --i: 5;
        }
        .motion .cost-row.is-now .cost-step {
          animation: greenIn linear both;
          animation-timeline: --cost;
          animation-range: cover 30% cover 38%;
        }
        .motion .cost-row.is-now .cost-free {
          animation: openOut linear both;
          animation-timeline: --cost;
          animation-range: cover 35% cover 50%;
        }

        /* The rules: the open slots settle first, reading from Sunday; then
           your own policy closes its four; then the law locks its five. */
        .motion .openings {
          view-timeline: --ow block;
        }
        .motion .ow-c {
          animation: landIn linear both;
          animation-timeline: --ow;
          animation-range: cover calc(6% + var(--c, 0) * 2.2%) cover calc(16% + var(--c, 0) * 2.2%);
        }
        .motion .ow-c.pol {
          animation-range: cover calc(22% + var(--c, 0) * 1.6%) cover calc(30% + var(--c, 0) * 1.6%);
        }
        .motion .ow-c.law {
          animation-name: lockIn;
          animation-range: cover calc(32% + var(--c, 0) * 1.6%) cover calc(38% + var(--c, 0) * 1.6%);
        }
        .ow-c:nth-child(8n + 3) {
          --c: 1;
        }
        .ow-c:nth-child(8n + 4) {
          --c: 2;
        }
        .ow-c:nth-child(8n + 5) {
          --c: 3;
        }
        .ow-c:nth-child(8n + 6) {
          --c: 4;
        }
        .ow-c:nth-child(8n + 7) {
          --c: 5;
        }
        .ow-c:nth-child(8n) {
          --c: 6;
        }

        /* The week: the rail fills step to step as you read across it. The
           nodes keep their meaning — hollow where the week moves on its own,
           filled where it needs you — only the line between them is drawn. */
        .motion .steps {
          view-timeline: --steps block;
        }
        .motion .step .node::after {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 2px;
          background: var(--brand);
          transform-origin: 100% 50%;
          animation: railFill linear both;
          animation-timeline: --steps;
          animation-range: cover calc(12% + var(--k, 0) * 7%) cover calc(19% + var(--k, 0) * 7%);
        }
        .motion .step .node::before {
          z-index: 1;
        }
        .step:nth-child(2) {
          --k: 1;
        }
        .step:nth-child(3) {
          --k: 2;
        }
        .step:nth-child(4) {
          --k: 3;
        }

        /* Same scroll, a different figure. A percentage of `cover` is a
           percentage of the viewport plus the figure, so when the figure wraps
           and grows taller than the phone it is on, every band lands earlier in
           screen terms: on a 390×844 phone the whole Thursday sequence used to
           run between 94% and 66% of the screen height — it was over before the
           figure reached the middle, where it is actually read. The bands below
           are the same movements, moved later, so each one starts around 82% of
           the screen and finishes near 55%, which is where they land on a
           desktop. Measured, not guessed: at cover p the top of a subject sits
           at viewport − p × (viewport + figure) + its own offset. */
        @media (max-width: 720px) {
          .motion .cost-row:first-child .cost-rail > li {
            animation-range: cover calc(13.5% + var(--i, 0) * 2.4%) cover
              calc(29.5% + var(--i, 0) * 2.4%);
          }
          .motion .cost-row.is-now .cost-step {
            animation-range: cover 38% cover 50%;
          }
          .motion .cost-row.is-now .cost-free {
            animation-range: cover 44% cover 58%;
          }
          .motion .ow-c {
            animation-range: cover calc(16% + var(--c, 0) * 2.2%) cover calc(32% + var(--c, 0) * 2.2%);
          }
          .motion .ow-c.pol {
            animation-range: cover calc(32% + var(--c, 0) * 1.6%) cover calc(42% + var(--c, 0) * 1.6%);
          }
          .motion .ow-c.law {
            animation-range: cover calc(42% + var(--c, 0) * 1.6%) cover calc(50% + var(--c, 0) * 1.6%);
          }
          /* The four steps are a row you read across on a desktop and a column
             three screens tall on a phone, so one timeline for the whole rail
             cannot time them: the last three used to fill while they were still
             below the fold, and arrived already drawn. Each step keeps its own
             timeline here and fills as it comes up the screen. */
          .motion .step {
            view-timeline: --step block;
          }
          .motion .step .node::after {
            animation-timeline: --step;
            animation-range: entry 30% entry 80%;
          }
        }
      }

      /* ------------------------------------------------------------- the instrument
   "Build a week" sits on the deep band and is drawn as an instrument rather
   than a page section: precise, tabular, one saturated colour. Green means yes
   in here exactly as it does in the product, because this is the product's
   idea, not a decoration of it. */

.demo {
  --d-line: #1d4535;
  --d-line-soft: #143128;
  --d-surface: #0c2a20;
  --d-surface-2: #10352a;
  --d-yes: #3ddc93;
  --d-yes-ink: #06251a;
  --d-yes-soft: #17402f;
  --d-yes-soft-ink: #7fe9b3;
  --d-amber: #f0b95c;
  --d-amber-soft: #3a2c10;
  --d-red: #f1645f;
  --d-red-soft: #3b1c1a;
  --d-tile: 46px;

  border: 1px solid var(--d-line);
  border-radius: var(--r-lg);
  background: var(--d-surface);
  overflow: hidden;
}

/* --- the matrix ---------------------------------------------------------- */

.demo-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s-3);
  align-items: baseline;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--d-line);
}
.demo-head h3 {
  font-size: 19px;
  color: var(--on-deep);
}
.demo-head p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-deep-2);
  flex: 1;
  min-width: 22ch;
}

.demo-scroll {
  overflow-x: auto;
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.demo-scroll:focus-visible {
  outline: 3px solid var(--d-yes);
  outline-offset: -3px;
}

.demo-table {
  border-collapse: separate;
  border-spacing: 6px;
  margin: -6px;
}
.demo-table th {
  font-weight: 700;
  text-align: start;
  vertical-align: bottom;
}
.demo-corner {
  width: 1px;
}
.demo-corner,
.demo-sh-day {
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-deep-2);
}
.demo-sh {
  padding-bottom: 4px;
}
.demo-sh span {
  display: block;
  white-space: nowrap;
}
.demo-sh-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--on-deep);
  margin-top: 2px;
}
.demo-sh-time {
  font-size: 11.5px;
  font-weight: 600;
  color: #83a294;
  margin-top: 1px;
}
/* A clock range is an LTR island. Left to the bidi algorithm inside an RTL
   paragraph the dash between two numbers takes the paragraph's direction and
   swaps the ends, so 07:00–15:00 renders as 15:00–07:00. Isolating the run is
   the same fix the RTL artboards carry, under the same class name. */
.clock {
  direction: ltr;
  unicode-bidi: isolate;
}
/* Both of those containers set their children to display:block, and a block
   whose own direction is ltr aligns its text to the left — which would leave
   the clock hanging off the wrong edge of an otherwise right-aligned column.
   The isolate does its work inline; it does not need a line of its own. */
.demo-sh .clock,
.demo-row-when .clock {
  display: inline;
}

.demo-who {
  padding-inline-end: var(--s-2);
}
.demo-who-short {
  display: none;
}
.demo-who-name {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--on-deep);
  white-space: nowrap;
}
.demo-who-meta {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #83a294;
  white-space: nowrap;
  margin-top: 1px;
}

.demo-tile {
  width: var(--d-tile);
  height: var(--d-tile);
  border-radius: 14px;
  border: 1.5px solid transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  background: var(--d-surface-2);
  color: var(--on-deep-2);
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}
.demo-tile svg {
  width: 22px;
  height: 22px;
}
.demo-tile:hover {
  border-color: var(--d-yes);
}
.demo-tile:focus-visible {
  outline: 3px solid var(--d-yes);
  outline-offset: 2px;
}
.demo-tile.is-want {
  background: var(--d-yes);
  color: var(--d-yes-ink);
}
.demo-tile.is-can {
  background: var(--d-yes-soft);
  color: var(--d-yes-soft-ink);
}
.demo-tile.is-not_keen {
  background: var(--d-amber-soft);
  color: var(--d-amber);
}
.demo-tile.is-no {
  background: var(--d-red-soft);
  color: var(--d-red);
}
.demo-tile.is-blank {
  background: transparent;
  border: 1.5px dashed var(--d-line);
  color: #6e8d7f;
}

.demo-na {
  text-align: center;
}
.demo-na-mark {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--d-line);
}

/* --- the rules and the button -------------------------------------------- */

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--d-line);
  background: #0a251c;
}
.demo-rule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demo-rule > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-deep-2);
}
.demo-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
}
.demo-opt {
  position: relative;
}
.demo-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.demo-opt span {
  display: block;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--on-deep-2);
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.demo-opt.is-on span {
  background: var(--d-yes);
  color: var(--d-yes-ink);
}
.demo-opt input:focus-visible + span {
  outline: 3px solid var(--d-yes);
  outline-offset: 2px;
}
.demo-rule small {
  font-size: 12.5px;
  color: #83a294;
}

.demo-go {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.demo-reset {
  background: none;
  border: 0;
  padding: 0 4px;
  min-height: 44px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--on-deep-2);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--on-deep-line);
  text-underline-offset: 4px;
}
.demo-reset:hover {
  color: var(--d-yes);
  text-decoration-color: var(--d-yes);
}

/* --- the built week ------------------------------------------------------ */

.demo-out:empty {
  display: none;
}
.demo-out {
  padding: var(--s-4);
  border-top: 1px solid var(--d-line);
}

.demo-cover {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--s-3);
}
.demo-cover-n {
  font-size: 15px;
  color: var(--on-deep-2);
}
.demo-cover-n strong {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--on-deep);
  margin-inline-end: 6px;
}
.demo-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--d-line-soft);
  overflow: hidden;
}
.demo-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--d-yes);
  /* scaleX, not width: the meter runs on the compositor instead of laying the
     page out on every frame of a 600ms transition. transform-origin is
     physical, so the end the meter grows from has to be named per direction —
     a meter that fills away from the side you read from reads as draining. */
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir='rtl'] .demo-bar-fill {
  transform-origin: right center;
}

.demo-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.demo-row {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s-2) var(--s-3);
  padding: 16px 0;
  border-top: 1px solid var(--d-line-soft);
}
.demo-row:last-child {
  border-bottom: 1px solid var(--d-line-soft);
}
.demo-row-when span {
  display: block;
}
.demo-row-day {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-deep-2);
}
.demo-row-time {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-deep);
  margin-top: 2px;
}
.demo-row-role {
  font-size: 12.5px;
  font-weight: 600;
  color: #83a294;
  margin-top: 1px;
}

.demo-row-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}
.demo-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-deep);
}
.demo-was {
  font-size: 15px;
  font-weight: 600;
  color: #83a294;
}
.demo-arrow {
  color: var(--d-yes);
  font-weight: 800;
}
.demo-hours {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-yes-soft-ink);
  background: var(--d-yes-soft);
  border-radius: 999px;
  padding: 3px 9px;
}
.demo-why {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--on-deep-2);
  margin-top: 4px;
  max-width: 62ch;
}
.demo-row.is-open .demo-name {
  color: var(--d-red);
}

.demo-more {
  margin-top: 10px;
}
.demo-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d-yes-soft-ink);
}
.demo-more summary::-webkit-details-marker {
  display: none;
}
.demo-more summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.demo-more[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.demo-alts {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.demo-alts li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.45;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--d-line);
}
.demo-alts li.is-policy {
  border-inline-start-color: var(--d-amber);
}
.demo-alts li.is-law {
  border-inline-start-color: var(--d-red);
}
.demo-alts li.is-said {
  border-inline-start-color: var(--d-line);
}
.demo-src {
  font-weight: 800;
  color: var(--on-deep-2);
}
.demo-alts li.is-policy .demo-src {
  color: var(--d-amber);
}
.demo-alts li.is-law .demo-src {
  color: var(--d-red);
}
.demo-alt-name {
  font-weight: 800;
  color: var(--on-deep);
  white-space: nowrap;
}
.demo-alt-why {
  color: #83a294;
}

.demo-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--d-line);
  background: #0a251c;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-deep-2);
  min-height: 52px;
  /* The dot carries the state: grey before a build, green after one, amber the
     moment an answer moves out from under it. Crossing between them rather
     than cutting is the difference between a state you watch change and one
     that looks like it was always that way. */
  transition: color 0.18s ease;
}
.demo-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--d-line);
  flex-shrink: 0;
  transition: background-color 0.18s ease;
}
#try-demo[data-built] .demo-status::before {
  background: var(--d-yes);
}
#try-demo[data-stale] .demo-status::before {
  background: var(--d-amber);
}
#try-demo[data-stale] .demo-status {
  color: var(--d-amber);
}

/* --- motion: interaction only, never arrival ----------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes demoTap {
    from {
      transform: scale(0.82);
    }
    to {
      transform: scale(1);
    }
  }
  .demo-tile.is-hit {
    animation: demoTap 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes demoRow {
    from {
      opacity: 0;
      transform: translateY(9px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* Arrival is for the first build only. A rebuild is not an arrival: rows the
     engine did not touch have to hold still, or a week that "did not move"
     moves anyway and the demonstration argues against its own copy. */
  .demo-out.is-first .demo-row {
    animation: demoRow 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i) * 55ms);
  }
  .demo-out.is-first .demo-cover {
    animation: demoRow 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* ...and on a rebuild, what actually moved is the only thing that moves.
     Opacity on an overlay rather than the row's own background: one composited
     property, and the row's text keeps its own colour. It holds before it
     decays — a straight ease-out fade is 80% gone in 90ms, which is a blink on
     a row the eye has not landed on yet. */
  @keyframes demoMoved {
    0%,
    45% {
      opacity: 0.16;
    }
    100% {
      opacity: 0;
    }
  }
  /* The alternates disclosure under a built row, same as the FAQ. */
  @supports selector(::details-content) and (interpolate-size: allow-keywords) {
    .demo-more {
      interpolate-size: allow-keywords;
    }
    .demo-more::details-content {
      block-size: 0;
      opacity: 0;
      overflow: hidden;
      transition:
        block-size 0.2s ease-in,
        opacity 0.15s ease,
        content-visibility 0.2s allow-discrete;
    }
    .demo-more[open]::details-content {
      block-size: auto;
      opacity: 1;
      transition:
        block-size 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.2s ease,
        content-visibility 0.26s allow-discrete;
    }
  }

  .demo-row.is-moved::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--d-amber);
    pointer-events: none;
    animation: demoMoved 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 720px) {
  .demo {
    --d-tile: 42px;
  }
  .demo-head,
  .demo-controls,
  .demo-status {
    padding-inline: var(--s-3);
  }
  .demo-scroll,
  .demo-out {
    padding-inline: var(--s-3);
  }
  .demo-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .demo-go {
    margin-inline-start: 0;
    width: 100%;
  }
  .demo-go .btn {
    flex: 1;
  }
  /* The names must not scroll away from their own row — losing track of who
     is who is the whole failure mode of a wide matrix on a narrow phone. */
  /* First name and the numbers only: the full name and the roles are in the
     built week below, and a frozen column wider than the grid helps nobody.
     The age note goes with them — it is the longest line here and it costs a
     shift column and a half on a phone, while the rule it stands for is said
     in full, in words, under Thursday's close. It is still there on a wider
     screen. */
  .demo-who-name,
  .demo-who-roles,
  .demo-who-flag {
    display: none;
  }
  .demo-who-meta {
    font-size: 11px;
  }
  /* A column is as wide as its widest line, and on a phone that line was the
     opening hours — a 42px tile in a 121px column, one and a half of six
     columns on screen, which reads as a broken table rather than a grid you
     scroll. The day and the shift's name size the column now; the hours stay
     in the accessibility tree, where the column header is read out per cell,
     and are printed in full under every name in the built week below. */
  .demo-sh {
    position: relative;
  }
  .demo-sh-name {
    font-size: 13.5px;
  }
  .demo-sh-time {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .demo-who-short {
    display: block;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--on-deep);
  }
  .demo-who {
    padding-inline-end: 12px;
  }
  .demo-who,
  .demo-corner {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    background: var(--d-surface);
    /* A table cell cannot have a margin, so the first shadow paints the
       container's own gutter solid — otherwise scrolled tiles show in it. The
       gutter and the falloff are both on the frozen column's outer side, which
       is the side the direction decides. */
    box-shadow:
      -30px 0 0 var(--d-surface),
      10px 0 10px -9px rgba(0, 0, 0, 0.7);
  }
  [dir='rtl'] .demo-who,
  [dir='rtl'] .demo-corner {
    box-shadow:
      30px 0 0 var(--d-surface),
      -10px 0 10px -9px rgba(0, 0, 0, 0.7);
  }
}

      
    
/* CapBlockRTL — design/spine-v2/CapBlockRTL.dc.html */
.dc-CapBlockRTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-CapBlockRTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; }
.dc-CapBlockRTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-CapBlockRTL .dc-btn { height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.dc-CapBlockRTL .dc-btn.dc-sec { background: var(--card); box-shadow: var(--sh); }
.dc-CapBlockRTL .dc-btn.dc-sec span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--tp); }
.dc-CapBlockRTL .dc-btn.gh span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ts); }
.dc-CapBlockRTL .dc-step { display: flex; gap: 12px; align-items: flex-start; }
.dc-CapBlockRTL .dotn { width: 22px; height: 22px; border-radius: 999px; background: var(--inset); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.dc-CapBlockRTL .dotn span { font-size: 12px; font-weight: 700; color: var(--ts); }
.dc-CapBlockRTL .stx { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ts); }
.dc-CapBlockRTL .stx b { font-weight: 700; color: var(--tp); }
/* ChangeSetRTL — design/spine-v2/ChangeSetRTL.dc.html */
.dc-ChangeSetRTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-ChangeSetRTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; }
.dc-ChangeSetRTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-ChangeSetRTL .lbl { font-size: 13px; line-height: 17px; font-weight: 700; color: var(--tt); }
.dc-ChangeSetRTL .pr { display: flex; gap: 12px; align-items: flex-start; }
.dc-ChangeSetRTL .av { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.dc-ChangeSetRTL .av span { font-size: 13px; font-weight: 800; }
.dc-ChangeSetRTL .pn { font-size: 16px; line-height: 21px; font-weight: 800; color: var(--tp); }
.dc-ChangeSetRTL .pd { margin-top: 3px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ts); }
.dc-ChangeSetRTL .pw { margin-top: 3px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tt); }
.dc-ChangeSetRTL .tag { flex-shrink: 0; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.dc-ChangeSetRTL .dc-btn { height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.dc-ChangeSetRTL .dc-btn.pri { background: var(--brand); }
.dc-ChangeSetRTL .dc-btn.pri span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ti); }
.dc-ChangeSetRTL .dc-btn.dc-sec { background: var(--card); box-shadow: var(--sh); }
.dc-ChangeSetRTL .dc-btn.dc-sec span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ts); }
/* EditPublishedRTL — design/spine-v2/EditPublishedRTL.dc.html */
.dc-EditPublishedRTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-EditPublishedRTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; }
.dc-EditPublishedRTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-EditPublishedRTL .lbl { font-size: 13px; line-height: 17px; font-weight: 700; color: var(--tt); }
.dc-EditPublishedRTL .tf { flex: 1; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.dc-EditPublishedRTL .tf span { font-size: 17px; font-weight: 800; }
.dc-EditPublishedRTL .cs { display: flex; gap: 12px; align-items: flex-start; }
.dc-EditPublishedRTL .ci { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.dc-EditPublishedRTL .cn { font-size: 15px; line-height: 21px; font-weight: 800; }
.dc-EditPublishedRTL .cx { margin-top: 3px; font-size: 13.5px; line-height: 19px; font-weight: 600; }
.dc-EditPublishedRTL .dc-btn { height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.dc-EditPublishedRTL .dc-btn.pri { background: var(--brand); }
.dc-EditPublishedRTL .dc-btn.pri span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ti); }
.dc-EditPublishedRTL .dc-btn.dc-sec { background: var(--card); box-shadow: var(--sh); }
.dc-EditPublishedRTL .dc-btn.dc-sec span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ts); }
/* OpeningV2RTL — design/spine-v2/OpeningV2RTL.dc.html */
.dc-OpeningV2RTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-OpeningV2RTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; }
.dc-OpeningV2RTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-OpeningV2RTL .lbl { font-size: 13px; line-height: 17px; font-weight: 700; }
.dc-OpeningV2RTL .av { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dc-OpeningV2RTL .av span { font-size: 14px; font-weight: 800; }
.dc-OpeningV2RTL .pn { font-size: 16px; line-height: 21px; font-weight: 800; color: var(--tp); }
.dc-OpeningV2RTL .pm { margin-top: 2px; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ts); }
.dc-OpeningV2RTL .act { flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 999px; display: flex; align-items: center; }
.dc-OpeningV2RTL .act span { font-size: 14px; font-weight: 700; }
.dc-OpeningV2RTL .tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.dc-OpeningV2RTL .grp { border-radius: 20px; padding: 15px 18px; display: flex; flex-direction: column; gap: 13px; }
/* PolicyV2RTL — design/spine-v2/PolicyV2RTL.dc.html */
.dc-PolicyV2RTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-PolicyV2RTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; }
.dc-PolicyV2RTL .row { display: flex; gap: 14px; align-items: flex-start; }
.dc-PolicyV2RTL .ic { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dc-PolicyV2RTL .rt { font-size: 16px; line-height: 21px; font-weight: 700; color: var(--tp); }
.dc-PolicyV2RTL .rs { margin-top: 3px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ts); }
.dc-PolicyV2RTL .dc-btn { height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); }
.dc-PolicyV2RTL .dc-btn span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ti); }
/* PublishConfirmRTL — design/spine-v2/PublishConfirmRTL.dc.html */
.dc-PublishConfirmRTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      --shl: 0 2px 4px rgba(15,26,22,.06), 0 18px 40px -14px rgba(15,26,22,.22);
      --scrim: rgba(8,33,26,.52);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-PublishConfirmRTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none;
      --shl: none;
      --scrim: rgba(0,0,0,.68); }
.dc-PublishConfirmRTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-PublishConfirmRTL .av { width: 32px; height: 32px; border-radius: 999px; background: var(--tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--bink); }
.dc-PublishConfirmRTL .frow { display: flex; align-items: center; gap: 11px; }
.dc-PublishConfirmRTL .fname { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--tp); }
.dc-PublishConfirmRTL .fmeta { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ts); }
/* RateLargeRTL — design/spine-v2/RateLargeRTL.dc.html */
.dc-RateLargeRTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      --shl: 0 2px 4px rgba(15,26,22,.06), 0 18px 40px -14px rgba(15,26,22,.22);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-RateLargeRTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; --shl: none; }
.dc-RateLargeRTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-RateLargeRTL .dc-ans { border-radius: 20px; background: var(--card); box-shadow: var(--sh); padding: 16px 18px; display: flex; align-items: center; gap: 15px; min-height: 68px; box-sizing: border-box; }
.dc-RateLargeRTL .dc-ans.sel { background: var(--brand); box-shadow: none; }
.dc-RateLargeRTL .anst { flex: 1; font-size: 26px; line-height: 34px; font-weight: 700; color: var(--tp); }
.dc-RateLargeRTL .dc-ans.sel .anst { color: var(--ti); font-weight: 800; }
.dc-RateLargeRTL .glyph { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; }
/* RateV2RTL — design/spine-v2/RateV2RTL.dc.html */
.dc-RateV2RTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      --shl: 0 2px 4px rgba(15,26,22,.06), 0 18px 40px -14px rgba(15,26,22,.22);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-RateV2RTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; --shl: none; }
.dc-RateV2RTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-RateV2RTL .daycard { background: var(--card); border-radius: 20px; box-shadow: var(--sh); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.dc-RateV2RTL .dh { display: flex; align-items: baseline; gap: 8px; }
.dc-RateV2RTL .dn { font-size: 18px; line-height: 23px; font-weight: 800; color: var(--tp); }
.dc-RateV2RTL .dm { flex: 1; font-size: 13px; line-height: 17px; font-weight: 700; color: var(--tt); }
.dc-RateV2RTL .srow { display: flex; align-items: center; gap: 13px; }
.dc-RateV2RTL .tile { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; cursor: crosshair; }
.dc-RateV2RTL .tile .m { display: none; }
.dc-RateV2RTL .tile.unanswered { background: var(--inset); color: var(--tt); }
.dc-RateV2RTL .tile.unanswered .m-dash { display: block; }
.dc-RateV2RTL .tile.carried { background: var(--inset); color: var(--brand); }
.dc-RateV2RTL .tile.carried .m-check { display: block; }
.dc-RateV2RTL .tile.available { background: var(--tint); color: var(--bink); }
.dc-RateV2RTL .tile.available .m-check { display: block; }
.dc-RateV2RTL .tile.preferred { background: var(--brand); color: var(--ti); }
.dc-RateV2RTL .tile.preferred .m-star { display: block; }
.dc-RateV2RTL .tile.prefer_not { background: var(--atint); color: var(--amber); }
.dc-RateV2RTL .tile.prefer_not .m-wave { display: block; }
.dc-RateV2RTL .tile.not_sure { background: transparent; border: 1.5px dashed var(--tt); color: var(--ts); }
.dc-RateV2RTL .tile.not_sure .m-ring { display: block; }
.dc-RateV2RTL .tile.absolutely_not { background: var(--rtint); color: var(--red); }
.dc-RateV2RTL .tile.absolutely_not .m-cross { display: block; }
.dc-RateV2RTL .tile.locked { background: var(--inset); border: 1.5px dashed var(--line); color: var(--tt); }
.dc-RateV2RTL .tile.locked .m-hatch { display: block; }
.dc-RateV2RTL .dc-tw { flex: 1; min-width: 0; }
.dc-RateV2RTL .dc-tl { display: flex; align-items: center; gap: 8px; }
.dc-RateV2RTL .tt { flex: 1; min-width: 0; font-size: 18px; line-height: 23px; font-weight: 800; color: var(--tp); }
.dc-RateV2RTL .ar { color: var(--tt); font-weight: 700; }
.dc-RateV2RTL .xp { flex-shrink: 0; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--atint); font-size: 12px; line-height: 15px; font-weight: 700; color: var(--amber); }
.dc-RateV2RTL .sb { margin-top: 1px; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ts); }
.dc-RateV2RTL .meter { position: relative; height: 6px; border-radius: 999px; background: var(--inset); overflow: hidden; margin-top: 7px; }
.dc-RateV2RTL .mfill { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--brand); }
.dc-RateV2RTL .mx { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--amber); }
.dc-RateV2RTL .mn { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--card); }
.dc-RateV2RTL .dc-b { flex: 1; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; opacity: .45; }
.dc-RateV2RTL .dc-b.dc-on { opacity: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px currentColor; }
.dc-RateV2RTL .tray { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-top-left-radius: 24px; border-top-right-radius: 24px; box-shadow: var(--shl); padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.dc-RateV2RTL .list { position: absolute; left: 0; right: 0; top: 240px; bottom: 112px; overflow: hidden; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
/* ReviewV2RTL — design/spine-v2/ReviewV2RTL.dc.html */
.dc-ReviewV2RTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-ReviewV2RTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; }
.dc-ReviewV2RTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-ReviewV2RTL .av { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dc-ReviewV2RTL .av span { font-size: 13px; font-weight: 800; }
.dc-ReviewV2RTL .lbl { font-size: 13px; line-height: 17px; font-weight: 700; color: var(--tt); }
.dc-ReviewV2RTL .rt { font-size: 16px; line-height: 21px; font-weight: 800; color: var(--tp); }
.dc-ReviewV2RTL .rs { margin-top: 2px; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ts); }
.dc-ReviewV2RTL .why { margin-top: 5px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tt); }
.dc-ReviewV2RTL .dc-btn { height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.dc-ReviewV2RTL .dc-btn.pri { background: var(--brand); }
.dc-ReviewV2RTL .dc-btn.pri span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ti); }
.dc-ReviewV2RTL .dc-btn.dc-sec { background: var(--card); box-shadow: var(--sh); }
.dc-ReviewV2RTL .dc-btn.dc-sec span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--tp); }
.dc-ReviewV2RTL .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tint); }
.dc-ReviewV2RTL .chip span { font-size: 13px; font-weight: 700; color: var(--bink); }
/* WhyThisShiftRTL — design/spine-v2/WhyThisShiftRTL.dc.html */
.dc-WhyThisShiftRTL .root { --bg: #eff3f1; --card: #ffffff; --inset: #f2f6f4;
      --tp: #0f1a16; --ts: #5a6b64; --tt: #8a978f; --ti: #ffffff;
      --line: #e6ece9;
      --brand: #0a7d4c; --tint: #e4f2ea; --bink: #075c38;
      --amber: #a86a09; --atint: #fbf0da;
      --red: #b7241f; --rtint: #fadedc;
      --sh: 0 1px 2px rgba(15,26,22,.05), 0 10px 24px -10px rgba(15,26,22,.14);
      font-family: "Plus Jakarta Sans", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.dc-WhyThisShiftRTL .root.dark { --bg: #0b120f; --card: #151f1a; --inset: #1d2821;
      --tp: #eef3f0; --ts: #a9b8b1; --tt: #7c8b84; --ti: #062017;
      --line: #26332c;
      --brand: #3ddc93; --tint: #12301f; --bink: #7fe9b3;
      --amber: #f0b95c; --atint: #3a2c10;
      --red: #f1645f; --rtint: #3b1c1a;
      --sh: none; }
.dc-WhyThisShiftRTL .clock { direction: ltr; unicode-bidi: isolate; }
.dc-WhyThisShiftRTL .lbl { font-size: 13px; line-height: 17px; font-weight: 700; color: var(--tt); }
.dc-WhyThisShiftRTL .ev { display: flex; gap: 13px; align-items: flex-start; }
.dc-WhyThisShiftRTL .rail { width: 26px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.dc-WhyThisShiftRTL .dot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; margin-top: 4px; }
.dc-WhyThisShiftRTL .stem { flex: 1; width: 2px; background: var(--line); margin-top: 4px; min-height: 20px; }
.dc-WhyThisShiftRTL .et { font-size: 15px; line-height: 21px; font-weight: 800; color: var(--tp); }
.dc-WhyThisShiftRTL .ed { margin-top: 2px; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ts); }
.dc-WhyThisShiftRTL .dc-btn { height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--card); box-shadow: var(--sh); }
.dc-WhyThisShiftRTL .dc-btn span { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--tp); }
/* ==========================================================================
   Variant B — only what B adds. Everything else is apps/website's stylesheet,
   read in at build time, so tokens, type and components are the same objects.
   Logical properties throughout; nothing here is physical left or right.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------- the nav
   B's labels are longer than A's ("החוק וההסכמים" where A says "הכללים"), so
   its seven links need ~1030px on one line where A's need ~950. At A's 980
   breakpoint the button was pushed off the screen until ~1000, so B's links
   hide earlier. The button's label ("לקבל הודעה כשנפתח") then pushed it
   16px past the gutter at 1041px, so the links now hide at 1080px. Measure
   `.nav-in`'s scrollWidth again if a label changes. Keep in step with
   pages.css (the menu button) and layout.html (matchMedia). */
@media (max-width: 1080px) {
  .nav-links {
    display: none;
  }
  .nav .btn {
    margin-inline-start: auto;
  }
}

/* ------------------------------------------------------------ home: the hero (base)
   Split, not centred: on an index page the hero's job is to hand over to the
   topics quickly, so the screens sit beside the words instead of under them. */
.hero-index {
  padding: var(--s-6) 0 var(--s-5);
  /* A's hero clips, because its scattered answers are painted past its edges.
     B's holds two phones whose shadow reaches ~90px below them with only 48px
     of padding under it, so the clip cut both shadows off on one straight line
     across the page. Nothing here needs clipping: the wash is a background and
     the phones sit inside the shell. */
  overflow: visible;
}
/* A's wash is three ellipses that reach zero at 72% of their radius — inside
   the box. On A that edge lands under a white band and is never seen; here the
   section below is the same ground, so the bottom of the big one drew a visible
   arc across the page. One light instead, falling straight down and reaching
   zero exactly at the hero's own edge, so there is no boundary to see: the hero
   dissolves into the ground it sits on. The green above it is centred on the
   top edge, so it too has nothing to terminate inside the frame. */
.hero-index::before {
  background:
    linear-gradient(
      180deg,
      rgba(228, 242, 234, 0.95) 0%,
      rgba(228, 242, 234, 0.45) 52%,
      rgba(228, 242, 234, 0) 100%
    ),
    radial-gradient(85% 95% at 50% 0%, rgba(61, 220, 147, 0.1) 0%, rgba(61, 220, 147, 0) 100%);
}
.hero-index-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: center;
}
.hero-index-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Both blocks are sized by their content, so a 14ch headline and a 46ch
   sentence left a 190px hole between the words and the screens on a wide
   display — the hero read as two things that happened to share a row. The
   measures fill the column they are given (56ch is still inside §21's 45–75),
   and the screens below grew to match, so the pair reads as one object without
   narrowing the hero out of line with the cards under it. */
.hero-index-copy h1 {
  max-width: 16ch;
}
.hero-index-copy .lead {
  max-width: 56ch;
}
.hero-index-copy .hero-cta {
  justify-content: flex-start;
}
/* ------------------------------------------------------- home: the new hero
   The headline and the film, as one object. The copy leads at display size;
   the film sits on a stage of its own light, and nothing else sits on it. */
.hero-v {
  padding: var(--s-6) 0 var(--s-7);
  /* The stage's light and grid reach past the frame on purpose; sideways they
     must not reach past the page. clip, not hidden, so nothing scrolls. */
  overflow-x: clip;
}
.hero-v .hero-index-in {
  gap: clamp(40px, 6vw, 96px);
}
.hero-v .hero-index-copy {
  gap: 22px;
}
.eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--line),
    0 6px 18px -10px rgba(15, 26, 22, 0.18);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
}
.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--tint);
}
.hero-v h1 {
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 800;
  line-height: 1.1;
  max-width: 14ch;
  color: var(--ink);
}
/* The approval is the green — green means yes (BRD-COL-001). */
.h1-yes {
  display: block;
  color: var(--brand);
}
.hero-v .lead {
  font-size: clamp(18px, 1.7vw, 21px);
  max-width: 50ch;
}
.btn-lg {
  min-height: 58px;
  padding: 0 32px;
  font-size: 18px;
}
.hero-v .btn-primary {
  box-shadow: 0 14px 30px -14px rgba(10, 125, 76, 0.7);
}
.hero-proof {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-proof svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex: none;
}

/* The film. A length, not min(…, 100%): in the grid's auto column a
   percentage is cyclic, and the track fell back to the video's own 720px. */
.hero-video {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: 380px;
  max-width: 100%;
}
.hero-video .stage {
  position: relative;
  width: 100%;
}
/* Its own light: a soft green bloom behind the frame, and the ground's week
   grid faintly around it — the brand's hero image, a week going green,
   drawn in the page's own tint rather than a new colour (BRD-COL-002/004). */
.hero-video .stage::before {
  content: '';
  position: absolute;
  inset: -14% -30% -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(61, 220, 147, 0.32), rgba(61, 220, 147, 0) 72%),
    radial-gradient(closest-side at 60% 70%, rgba(10, 125, 76, 0.18), rgba(10, 125, 76, 0) 70%);
  filter: blur(8px);
}
.hero-video .stage::after {
  content: '';
  position: absolute;
  inset: -8% -26%;
  z-index: -2;
  background-image:
    linear-gradient(rgba(10, 125, 76, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 125, 76, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.promo {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 30px;
  overflow: hidden;
  background: var(--deep);
  padding: 0;
  box-shadow:
    0 0 0 6px var(--card),
    0 0 0 7px rgba(15, 26, 22, 0.08),
    0 50px 90px -40px rgba(8, 33, 26, 0.7),
    0 24px 40px -24px rgba(8, 33, 26, 0.45);
}
.promo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo video:focus-visible {
  outline: 3px solid var(--bright);
  outline-offset: -3px;
}
/* One obvious first press: the button alone, glowing, with its label in a
   pill under it — the poster's own week stays in view around it. */
.promo-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: radial-gradient(closest-side, rgba(8, 33, 26, 0.35), rgba(8, 33, 26, 0) 70%);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.promo-play[hidden] {
  display: none;
}
.promo-play:focus-visible {
  outline: none;
}
.promo-play:focus-visible .promo-play-icon {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.promo-play-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 18px 9px;
  border-radius: 999px;
  background: rgba(8, 33, 26, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(234, 243, 238, 0.14);
}
.promo-play-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--bright);
  color: var(--deep);
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease;
}
/* A quiet pulse around the button while it waits — off for anyone who asks
   for less motion. */
.promo-play-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(61, 220, 147, 0.55);
  animation: promo-pulse 2.4s ease-out infinite;
}
@keyframes promo-pulse {
  to {
    box-shadow: 0 0 0 18px rgba(61, 220, 147, 0);
  }
}
.promo-play:hover .promo-play-icon {
  transform: scale(1.06);
}
.promo-play-icon svg {
  width: 32px;
  height: 32px;
  margin-inline-end: -4px;
}
.promo-play-meta {
  font-size: 13px;
  font-weight: 600;
  color: rgba(234, 243, 238, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .promo-play-icon::after {
    animation: none;
  }
  .promo-play-icon {
    transition: none;
  }
}

/* The description, under the film and not behind a link: WCAG 1.2.3. */
.promo-desc {
  width: 100%;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.promo-desc summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand-ink);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-desc summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.promo-desc[open] {
  padding: 0 var(--s-2) var(--s-2);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
}
.promo-desc ol {
  margin: 0;
  padding-inline-start: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 960px) {
  .hero-index-in {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .hero-v .hero-index-copy {
    align-items: center;
    text-align: center;
  }
  .hero-v h1 {
    max-width: 16ch;
  }
  .eyebrow {
    align-self: center;
  }
  .hero-index-copy .hero-cta,
  .hero-proof {
    justify-content: center;
  }
  .hero-index-stage {
    justify-self: center;
  }
}
/* On a phone the film goes under the headline and the two buttons, 9:16 like
   the phone itself. */
@media (max-width: 620px) {
  .hero-v {
    padding: var(--s-5) 0 var(--s-5);
  }
  .hero-video {
    width: min(330px, 86vw);
  }
}

/* ----------------------------------------------------------- home: the index
   Seven cards, not a table of contents. A manager scanning this page decides in
   a second whether to click, so each topic is one object with one job: a title
   that is the link, a sentence that says what is inside, and the sections of
   that page as chips underneath. The whole card is the target (the title's
   stretched overlay), and the chips sit above it so they stay their own links.

   The demo leads and spans the grid, on the deep ground: reading about a build
   is the second-best way to understand one. */
/* The hero's wash fades into the page ground, so the band under it is that
   same ground: white here put a hard horizontal seam across the page, right
   below the phones. The cards carry the structure instead of the band. */
.topics-band {
  background: var(--bg);
}
.topics-intro {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
}
.topics-title {
  font-size: clamp(24px, 2.6vw, 30px);
}
.topics-lead {
  color: var(--ink-2);
  max-width: 54ch;
}
.topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

.topic {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.topic:hover {
  border-color: var(--brand);
  box-shadow: var(--sh-1);
}
.topic:focus-within {
  border-color: var(--brand);
}
@media (prefers-reduced-motion: no-preference) {
  .topic:hover {
    transform: translateY(-2px);
  }
}

.topic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.topic-head h3 {
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.2;
}
/* The title is the link, and its overlay makes the whole card the target. The
   accessible name stays the topic, not the topic plus its sentence. */
.topic-main {
  color: var(--ink);
  text-decoration: none;
}
.topic-main::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.topic:hover .topic-main {
  color: var(--brand-ink);
}
.topic-go {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--brand-ink);
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.topic-go svg {
  width: 19px;
  height: 19px;
}
.topic:hover .topic-go {
  background: var(--brand);
  color: var(--card);
}
@media (prefers-reduced-motion: no-preference) {
  .topic:hover .topic-go {
    transform: translateX(-3px);
  }
}
.topic-blurb {
  color: var(--ink-2);
  max-width: 46ch;
}

/* The page's own sections, as targets rather than a bulleted list. Above the
   card's overlay, so each one still goes to its own anchor. */
.subtopics {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: auto 0 0;
  padding: var(--s-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.subtopics a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  background: var(--inset);
  /* A chip is a control, so its edge is --field-line's job, not --line's: the
     divider colour is 1.3:1 on white and would not be visible to everyone who
     needs to see where the target starts (WCAG 1.4.11). */
  box-shadow: inset 0 0 0 1px var(--field-line);
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.subtopics a:hover {
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* Three cards run the width of the grid: how it works, because a manager reads
   that first; the demo, because it is the thing to do next; and the questions,
   which close the grid with no half-row left hanging. */
.topic-wide,
.topic-feature {
  grid-column: 1 / -1;
}
.topic-wide .topic-head h3 {
  font-size: clamp(22px, 2.4vw, 28px);
}

.topic-feature {
  padding: var(--s-4);
  background: var(--deep);
  border-color: var(--deep);
  color: var(--on-deep);
}
.topic-feature .topic-head h3 {
  font-size: clamp(26px, 3.2vw, 36px);
}
.topic-feature .topic-main {
  color: var(--on-deep);
}
/* The card above turns white on hover; this one must not — its text is the
   light-on-dark set, and on white it is unreadable. It lifts by going one shade
   up the deep ramp instead. */
.topic-feature:hover {
  background: var(--deep-2);
  border-color: var(--bright);
}
.topic-feature:hover .topic-main {
  color: var(--on-deep);
}
.topic-feature:focus-within {
  border-color: var(--bright);
}
.topic-feature .topic-blurb {
  color: var(--on-deep-2);
  max-width: 58ch;
  font-size: 18px;
}
.topic-feature .topic-go {
  width: 48px;
  height: 48px;
  background: var(--bright);
  color: var(--deep);
}
.topic-feature:hover .topic-go {
  background: var(--bright);
  color: var(--deep);
}
.topic-feature .topic-go svg {
  width: 22px;
  height: 22px;
}
.topic-feature .subtopics a {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--on-deep-line);
  color: var(--bright);
}
/* The card's own hover is --deep-2, so a chip needs the other direction to stay
   distinguishable under the cursor: it fills bright, like the arrow. */
.topic-feature .subtopics a:hover {
  background: var(--bright);
  box-shadow: inset 0 0 0 1px var(--bright);
  color: var(--deep);
}
.topic-feature :focus-visible {
  outline-color: var(--bright);
}

@media (max-width: 860px) {
  .topics {
    grid-template-columns: 1fr;
  }
  .topic-feature {
    padding: var(--s-3);
  }
}
/* On a phone the eight cards with their section chips were four screens of
   links in the middle of the page. Each card is its topic and its sentence
   here, and the whole card is still the link; the sections are on the
   topic's own page. */
@media (max-width: 620px) {
  .topics {
    gap: 10px;
  }
  .topic {
    gap: 6px;
    padding: 18px 20px;
  }
  .topic-feature {
    padding: 22px 20px;
  }
  .topic-head h3,
  .topic-wide .topic-head h3 {
    font-size: 19px;
  }
  .topic-feature .topic-head h3 {
    font-size: 24px;
  }
  .topic-blurb {
    font-size: 15.5px;
    line-height: 1.5;
  }
  .topic-feature .topic-blurb {
    font-size: 16px;
  }
  .topic-go {
    width: 36px;
    height: 36px;
  }
  .subtopics {
    display: none;
  }
}

/* --------------------------------------------------------------- the buttons
   A's pill, with two changes B needs on a page whose hero ends in the ground
   rather than in a panel: the primary casts a green shadow so it reads as the
   thing to press, and the ghost gets the control edge (--line is 1.3:1 and
   left it looking like a disabled chip beside the primary) on the card surface
   instead of on nothing. */
/* :not(.btn-sm) throughout — these rules land after A's .btn-sm and would
   otherwise out-order it, and the 44px bar button is not the page's CTA. */
.btn:not(.btn-sm) {
  min-height: 54px;
  padding: 0 30px;
  font-size: 17.5px;
}
.btn-primary:not(.btn-sm) {
  box-shadow:
    0 1px 2px rgba(8, 33, 26, 0.1),
    0 10px 22px -10px rgba(10, 125, 76, 0.55);
}
.btn-primary:not(.btn-sm):hover {
  box-shadow:
    0 1px 2px rgba(8, 33, 26, 0.12),
    0 16px 30px -12px rgba(10, 125, 76, 0.6);
}
.btn-ghost:not(.btn-sm) {
  background: var(--card);
  border-color: var(--field-line);
  box-shadow: 0 1px 2px rgba(15, 26, 22, 0.05);
}
.btn-ghost:not(.btn-sm):hover {
  border-color: var(--brand);
  box-shadow: 0 1px 2px rgba(15, 26, 22, 0.07);
}
/* A's ghost-on-deep, restated: the rules above land after it, and a white pill
   with a light-ink label on the deep band would be the same unreadable thing
   the feature card's hover was. */
.on-deep .btn-ghost:not(.btn-sm) {
  background: transparent;
  border-color: var(--on-deep-line);
  box-shadow: none;
}
.on-deep .btn-ghost:not(.btn-sm):hover {
  background: rgba(61, 220, 147, 0.08);
  border-color: var(--bright);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:not(.btn-sm):hover,
  .btn-ghost:not(.btn-sm):hover {
    transform: translateY(-1px);
  }
  /* A press still goes down, which A's rule says and this would otherwise
     out-order. */
  .btn:active {
    transform: translateY(1px);
  }
}

/* --------------------------------------------------- home: the three pillars
   BRD-MSG-007. Three cards, each a claim, a sentence, and the real screen
   that proves it, cropped to the part that does. */
.pillars-band {
  padding: var(--s-7) 0;
  background: var(--card);
  border-block: 1px solid var(--line);
}
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: var(--s-6);
}
.section-head h2 {
  max-width: 22ch;
  font-weight: 800;
}
.kicker {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand);
}
.pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-4) var(--s-4) 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg) 0%, var(--tint) 100%);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.pillar-n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--deep);
  color: var(--bright);
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-weight: 800;
  font-size: 17px;
}
.pillar h3 {
  font-weight: 800;
  margin-top: 6px;
}
.pillar p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* The screen rises out of the card's floor, cut by it — a product surface,
   not a thumbnail. */
.pillar-shot {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex;
  justify-content: center;
}
.pillar-shot .phone {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  padding-bottom: 0;
  transform: translateY(2px);
}
.pillar-shot .phone .dc {
  --dc-s: 0.62;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.proofs {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 40px;
  font-size: 16.5px;
  color: var(--ink-2);
}
.proofs b {
  color: var(--ink);
}
@media (max-width: 1100px) {
  .pillar-shot .phone .dc {
    --dc-s: 0.5;
  }
}
@media (max-width: 860px) {
  .pillars {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
  .pillar-shot .phone .dc {
    --dc-s: 0.62;
  }
}
/* On a phone the screen takes the card's whole width instead of sitting
   inside its padding: at 0.62 a 12px label on the board rendered at 7px and
   nothing on it could be read. At 0.76 it is 9px, and the headings 12–23px. */
@media (max-width: 620px) {
  .pillar-shot {
    margin-inline: calc(8px - var(--s-4));
  }
  .pillar-shot .phone .dc {
    --dc-s: 0.76;
  }
}
@media (max-width: 370px) {
  .pillar-shot .phone .dc {
    --dc-s: 0.7;
  }
}

/* ------------------------------------------------ home: the question first
   The same week twice, as one board: a column of days, then a lane for the
   group chat and a lane for SmartShift. The chat lane is warm and a little
   crooked — bubbles tilt, messages pile up, Thursday ends at night — and the
   SmartShift lane is square and green, a row of nine people going green day
   by day, Thursday morning in the light. The bottom row answers the heading.
   Every colour is a token; the lanes' two grounds are the tints mixed with
   white so the bubbles on them still read as white surfaces. */
.pain-band {
  padding: var(--s-7) 0;
  background: var(--bg);
}
.pain-band .section-head {
  margin-bottom: var(--s-5);
}
.pain-lead {
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 18px;
  text-wrap: balance;
}
.ww {
  --ww-day: 104px;
  --ww-was: color-mix(in srgb, var(--amber-tint) 70%, var(--card));
  --ww-now: color-mix(in srgb, var(--tint) 70%, var(--card));
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 30px;
  background: var(--card);
  box-shadow:
    inset 0 0 0 1px var(--line),
    var(--sh-2);
  /* clip, not hidden: hidden would make the board a scroll container and the
     lane head could not stick under the nav. */
  overflow: clip;
}
.ww-head,
.ww-day,
.ww-total {
  display: grid;
  grid-template-columns: var(--ww-day) minmax(0, 1fr) minmax(0, 1fr);
}
.ww-days {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The lane head stays under the nav while the week scrolls past it. */
.ww-head {
  position: sticky;
  top: var(--nav-h);
  z-index: 2;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.ww-lane {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 24px;
}
.ww-lane b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.ww-lane small {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
}
.ww-lane.is-was {
  background: var(--ww-was);
}
.ww-lane.is-now {
  background: var(--ww-now);
}
.ww-lane-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
}
.is-was .ww-lane-ico {
  background: var(--card);
  color: var(--amber);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 22%, transparent);
}
.is-now .ww-lane-ico {
  background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent);
}
.ww-lane-ico svg {
  width: 22px;
  height: 22px;
}

/* The day column: a rail with the week's letters on it. */
.ww-when {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 22px 8px;
  text-align: center;
}
.ww-day .ww-when::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 1px);
  width: 2px;
  background: var(--line);
}
.ww-day:first-child .ww-when::before {
  top: 40px;
}
.ww-when b {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--field-line);
  font-size: 16px;
  font-weight: 800;
}
.ww-when span {
  position: relative;
  padding: 0 4px;
  background: var(--card);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.ww-thu .ww-when b {
  background: var(--ink);
  color: var(--card);
  box-shadow: none;
}

.ww-was,
.ww-now {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 22px 24px;
}
.ww-was {
  background: var(--ww-was);
}
.ww-now {
  background: var(--ww-now);
}
.ww-day + .ww-day > * {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.ww-day p,
.ww-total p {
  margin: 0;
}

/* --- the chat lane: a little crooked on purpose */
.bub {
  position: relative;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 18px;
  border-start-start-radius: 5px;
  background: var(--card);
  box-shadow:
    0 1px 2px rgba(15, 26, 22, 0.08),
    0 8px 16px -10px rgba(15, 26, 22, 0.3);
  font-size: 15.5px;
  line-height: 1.45;
  transform: rotate(-1deg);
}
.bub + .bub {
  margin-inline-start: 18px;
  transform: rotate(1.2deg);
}
.bub small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-3);
}
/* The manager's own message sits on the other side, in the lane's colour. */
.bub.is-me {
  align-self: flex-end;
  border-start-start-radius: 18px;
  border-start-end-radius: 5px;
  background: var(--amber-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 20%, transparent);
  transform: rotate(1deg);
}
.bub.is-lost {
  opacity: 0.5;
  transform: rotate(-2deg) scale(0.96);
  filter: blur(0.4px);
}
.ww-pile {
  position: relative;
  width: min(100%, 250px);
  height: 64px;
}
.ww-pile i {
  position: absolute;
  inset-inline-start: 0;
  width: 78%;
  height: 26px;
  border-radius: 13px;
  border-start-start-radius: 4px;
  background: var(--card);
  box-shadow: 0 4px 10px -6px rgba(15, 26, 22, 0.3);
}
.ww-pile i::after {
  content: '';
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  width: 55%;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 3px;
  background: var(--line);
}
.ww-pile i:nth-child(1) {
  top: 0;
  width: 64%;
  opacity: 0.55;
  transform: rotate(-2deg);
}
.ww-pile i:nth-child(2) {
  top: 18px;
  inset-inline-start: 22px;
  opacity: 0.75;
  transform: rotate(1.5deg);
}
.ww-pile i:nth-child(3) {
  top: 38px;
  inset-inline-start: 8px;
  width: 70%;
  transform: rotate(-1deg);
}
.ww-unread {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--amber);
}
.ww-unread b {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--card);
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 800;
  direction: ltr;
}
.ww-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 25%, transparent);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.ww-search svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--amber);
}

/* --- the SmartShift lane: square and green */
.ww-ev {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ww-ev-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--brand);
  color: var(--card);
}
.ww-ev-ico svg {
  width: 21px;
  height: 21px;
}
.ww-ev b {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
}
.ww-ev small {
  display: block;
  font-size: 14.5px;
  color: var(--ink-2);
}
.ww-count {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.ww-count b {
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}
.ww-count.is-full b {
  color: var(--brand);
}
/* Nine people, one tile each: the brand's week going green. */
.ww-tiles {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 250px);
}
.ww-tiles i {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 30%, transparent);
}
.ww-tiles i.on {
  background: var(--brand);
  box-shadow: none;
}
.ww-count.is-full + .ww-tiles i.on {
  background: var(--bright);
}
.ww-note {
  font-size: 14.5px;
  color: var(--ink-2);
}

/* --- Thursday: night on one side, morning on the other */
.ww-was.is-night {
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(61, 220, 147, 0.08), transparent 70%), var(--deep);
  color: var(--on-deep);
}
.ww-now.is-ready {
  background:
    radial-gradient(80% 100% at 15% 0%, rgba(61, 220, 147, 0.3), transparent 70%), var(--tint);
}
.ww-clock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ww-clock b {
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  direction: ltr;
}
.ww-clock svg {
  width: 26px;
  height: 26px;
  flex: none;
}
.is-night .ww-clock svg {
  color: var(--on-deep-2);
}
.is-ready .ww-clock svg {
  color: var(--brand);
}
.ww-night-t,
.ww-ready-t {
  font-size: 17px;
  font-weight: 800;
}
.ww-chores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ww-chores li {
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--on-deep-line);
  font-size: 14px;
  color: var(--on-deep-2);
}
.ww-why {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: 340px;
  padding: 12px 16px;
  border-radius: 14px;
  border-inline-start: 4px solid var(--brand);
  background: var(--card);
  box-shadow: var(--sh-1);
  font-size: 14.5px;
}
.ww-why b {
  font-size: 15.5px;
}
.ww-why span {
  color: var(--ink-2);
}

/* --- the answer to the heading */
.ww-total {
  border-top: 1px solid var(--line);
  background: var(--card);
}
.ww-total .ww-when b {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.25;
}
.ww-total .ww-was,
.ww-total .ww-now {
  gap: 10px;
  background: var(--card);
  font-size: 16px;
  color: var(--ink-2);
}
.ww-total b {
  color: var(--ink);
}
.ww-bar {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.ww-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.ww-total .ww-was .ww-bar i {
  width: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--amber) 0 7px,
    color-mix(in srgb, var(--amber) 55%, var(--card)) 7px 14px
  );
}
.ww-total .ww-now .ww-bar i {
  width: 7%;
  min-width: 14px;
  background: var(--brand);
}

/* --- entrances: the rows arrive one day at a time, and the tiles fill after
   their row has landed. Only under .rv-on (layout.html), so with reduced
   motion or no script the board is simply finished. */
.rv-on .ww-days > .rv:nth-child(2) {
  --rv-d: 0.05s;
}
.rv-on .ww-days > .rv:nth-child(3) {
  --rv-d: 0.1s;
}
.rv-on .ww-days > .rv:nth-child(4) {
  --rv-d: 0.15s;
}
.rv-on .ww-days > .rv:nth-child(5) {
  --rv-d: 0.2s;
}
.rv-on .ww-tiles i.on {
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease;
  transition-delay: calc(0.2s + var(--i) * 45ms);
}
.rv-on .ww-day:not(.is-in) .ww-tiles i.on {
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 30%, transparent);
}
.rv-on .ww-total .ww-bar i {
  transition: width 0.8s var(--ease-out) 0.15s;
}
.rv-on .ww-total:not(.is-in) .ww-bar i {
  width: 0;
  min-width: 0;
}

/* --- a phone: the day becomes a strip across both lanes, and the lanes sit
   side by side under it, so each day still reads across. */
@media (max-width: 720px) {
  .pain-lead {
    font-size: 16.5px;
  }
  .ww {
    border-radius: 22px;
  }
  .ww-head,
  .ww-day,
  .ww-total {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ww-corner {
    display: none;
  }
  .ww-lane {
    gap: 8px;
    padding: 12px;
  }
  .ww-lane-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .ww-lane-ico svg {
    width: 18px;
    height: 18px;
  }
  .ww-lane b {
    font-size: 15.5px;
  }
  .ww-lane small {
    font-size: 13px;
  }
  .ww-when {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--card);
  }
  .ww-day .ww-when::before {
    display: none;
  }
  .ww-when b {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .ww-day + .ww-day > * {
    border-top: 0;
  }
  .ww-day + .ww-day > .ww-when {
    border-top: 1px solid var(--line);
  }
  .ww-was,
  .ww-now {
    gap: 8px;
    padding: 14px 12px 16px;
  }
  .bub {
    padding: 8px 11px;
    font-size: 14px;
  }
  .bub + .bub {
    margin-inline-start: 8px;
  }
  .bub small {
    font-size: 13px;
  }
  .ww-pile {
    height: 54px;
  }
  .ww-pile i {
    height: 22px;
  }
  .ww-pile i:nth-child(2) {
    top: 15px;
    inset-inline-start: 12px;
  }
  .ww-pile i:nth-child(3) {
    top: 31px;
  }
  .ww-unread {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
  }
  .ww-search {
    padding: 8px 11px;
    border-radius: 14px;
    font-size: 13.5px;
    align-items: flex-start;
  }
  .ww-ev {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ww-ev-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .ww-ev b {
    font-size: 15px;
  }
  .ww-ev small,
  .ww-note {
    font-size: 13.5px;
  }
  .ww-count {
    font-size: 14px;
  }
  .ww-count b {
    font-size: 19px;
  }
  .ww-tiles {
    gap: 3px;
  }
  .ww-tiles i {
    border-radius: 4px;
  }
  .ww-clock b {
    font-size: 26px;
  }
  .ww-clock svg {
    width: 20px;
    height: 20px;
  }
  .ww-night-t,
  .ww-ready-t {
    font-size: 15px;
  }
  .ww-chores li {
    padding: 3px 9px;
    font-size: 13px;
  }
  .ww-why {
    padding: 10px 11px;
    border-inline-start-width: 3px;
    font-size: 13.5px;
  }
  .ww-why b {
    font-size: 14px;
  }
  .ww-total .ww-when b {
    font-size: 14px;
  }
  .ww-total .ww-was,
  .ww-total .ww-now {
    font-size: 14.5px;
  }
}

/* ------------------------------------------------ home: the three questions */
.home-qa {
  padding: var(--s-7) 0;
  background: var(--card);
  border-block: 1px solid var(--line);
}
.home-qa .section-head {
  margin-bottom: var(--s-5);
}
.home-qas {
  max-width: 760px;
  margin-inline: auto;
}
/* The questions page sets its cards on a tint; here the band is white. */
.home-qas details {
  background: var(--bg);
}
.home-qa-more {
  margin-top: var(--s-3);
  text-align: center;
  font-weight: 700;
}
@media (max-width: 620px) {
  .pain-band,
  .home-qa {
    padding: var(--s-6) 0;
  }
}

/* ------------------------------------------------------- home: the scope line */
.scope-strip {
  padding: var(--s-5) 0;
}
.scope-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.scope-in p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 70ch;
}
.scope-in b {
  color: var(--ink);
}
.scope-link {
  font-weight: 700;
  color: var(--brand-ink);
  white-space: nowrap;
}

/* --------------------------------------------------- home: the close, and join
   The deep ground once, at the end, with the form on a white card: the one
   thing this page asks for, where the reader already is. */
.close-band {
  position: relative;
  padding: var(--s-7) 0;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(61, 220, 147, 0.16), rgba(61, 220, 147, 0) 70%),
    radial-gradient(50% 70% at 10% 100%, rgba(10, 125, 76, 0.25), rgba(10, 125, 76, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  overflow: hidden;
  scroll-margin-top: var(--nav-h);
}
.close-band-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: var(--s-6);
  align-items: center;
}
.close-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.close-copy h2 {
  font-weight: 800;
  color: var(--on-deep);
}
.close-band .kicker {
  color: var(--bright);
}
.close-band .lead {
  color: var(--on-deep-2);
  max-width: 44ch;
}
.close-points {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16.5px;
  color: var(--on-deep);
}
.close-points li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.close-points li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bright);
  flex: none;
}
.wl-card {
  margin: 0;
  max-width: none;
  min-height: 0;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
.wl-card .btn {
  min-height: 56px;
}
@media (max-width: 900px) {
  .close-band-in {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
}
@media (max-width: 620px) {
  .close-band {
    padding: var(--s-6) 0;
  }
  .wl-card {
    padding: var(--s-3);
  }
}

/* A link on the deep ground, inside running copy. */
.inline-deep {
  color: var(--bright);
  font-weight: 700;
  text-underline-offset: 4px;
}

/* ----------------------------------------------------------- the spec card */
/* A spec card: a header band that says what the card is, one row per thing it
   lists — the name on the start edge, what it does opposite it — and a footer
   for what belongs beside the list rather than in it. Two on the site, and they
   are siblings on /rules/, so they are one component rather than two that look
   nearly alike: the five answers, and what the app refuses to send.

   A row of chips said what the marks look like; it never said what they mean,
   and the meanings are the part a manager is deciding about. "Not sure" in
   particular does not mean what it sounds like (`SS-CYC-004c`), so the sentence
   beside it is the component, not a caption on it.

   The card is capped rather than run to the shell's full width: the name column
   plus a 52ch sentence is the whole object, and the rest of the line would be
   white space with a rule drawn across it. */
.spec-card {
  margin: var(--s-5) 0 0;
  max-inline-size: 52rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.spec-card + .spec-card {
  margin-top: var(--s-4);
}
.spec-head {
  padding: var(--s-3) var(--s-4);
  background: var(--inset);
  border-bottom: 1px solid var(--line);
}
.spec-head h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
}
.spec-head p {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink-2);
}
.spec-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spec-rows li {
  display: grid;
  grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr);
  gap: 2px var(--s-4);
  align-items: baseline;
  padding: 14px var(--s-4);
  border-top: 1px solid var(--line);
}
.spec-rows li:first-child {
  border-top: 0;
}
.spec-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.spec-why {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-inline-size: 52ch;
}
/* The empty cell and the check on a submission sit under the rule, not in it:
   neither is an answer, and putting the empty cell in the list was what made
   "has not answered" read as a sixth thing a person can choose. */
.spec-foot {
  padding: 12px var(--s-4) 14px;
  border-top: 1px solid var(--line);
  background: var(--inset);
}
.spec-foot p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  max-inline-size: 64ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
}
/* A second note has no mark of its own, so it is indented to the width of one,
   and the two lines share an edge instead of stepping. */
.spec-foot p + p {
  margin-top: 8px;
  padding-inline-start: 34px;
}
.lt-sm {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}
.lt-sm svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 720px) {
  .spec-rows li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-inline: var(--s-3);
  }
  /* Under the name, not under the mark. */
  .spec-rows .spec-why {
    padding-inline-start: 42px;
  }
  .spec-head,
  .spec-foot {
    padding-inline: var(--s-3);
  }
}
.lt {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.lt svg {
  width: 17px;
  height: 17px;
}
.lt-want {
  background: var(--brand);
  color: #fff;
}
.lt-can {
  background: var(--tint);
  color: var(--brand-ink);
}
.lt-not-keen {
  background: var(--amber-tint);
  color: var(--amber);
}
/* Not amber and not red: "not sure" is not a weak yes and not a refusal, it is
   an answer the build sets aside. Neutral, and the only solid-bordered chip. */
.lt-unsure {
  background: var(--inset);
  border: 1.5px solid var(--line);
  color: var(--ink-3);
}
.lt-no {
  background: var(--red-tint);
  color: var(--red);
}
.lt-blank {
  border: 1.5px dashed var(--field-line);
  color: var(--ink-3);
}

/* ------------------------------------------------------- try: "not sure"
   A's demo has four answers, so the fifth is B's to draw. It has to read as
   neither yes nor no at a glance: the tile is the surface one step up from the
   instrument's own ground, with the line around it, and the row in "why nobody
   else" is marked in the same neutral rather than in amber or red. */
.demo-tile.is-unsure {
  background: var(--d-surface-2);
  border-color: var(--d-line);
  color: var(--on-deep-2);
}
.demo-alts li.is-unsure {
  border-inline-start-color: var(--on-deep-line);
}

/* ------------------------------------------------- try: the agreement panel */
.demo-controls-b {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: start;
}
.demo-controls-b .demo-go {
  grid-column: 1 / -1;
  justify-self: end;
}
@media (max-width: 860px) {
  /* minmax(0, …), not 1fr: a bare 1fr grows to the widest row's min-content,
     and on a phone the reset link, the number and the button on one line are
     wider than the panel, which pushed the build button off the screen. */
  .demo-controls-b {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-controls-b .demo-go {
    justify-self: stretch;
  }
}
@media (max-width: 520px) {
  /* The number and the button share the first line; starting over drops
     under them. */
  .demo-controls-b .demo-go {
    flex-wrap: wrap;
  }
  .demo-controls-b .demo-go .btn {
    flex: 1 1 auto;
  }
  .demo-controls-b .demo-reset {
    order: 1;
    flex-basis: 100%;
  }
}

/* ---------------------------------------------- try: the grid is wider here */
.demo-swipe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: calc(-1 * var(--s-2)) 0 0;
  padding: 0 var(--s-3) var(--s-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--on-deep-2);
}
.demo-swipe[hidden] {
  display: none;
}
.demo-swipe svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--d-yes);
}
/* The shifts still out of view are past the left edge (RTL): fade it. */
.demo-scroll.has-more {
  -webkit-mask-image: linear-gradient(to left, #000 80%, transparent);
  mask-image: linear-gradient(to left, #000 80%, transparent);
}
.demo-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--on-deep);
}
.demo-group-note {
  margin: 4px 0 12px;
  font-size: 13px;
  color: #83a294;
}
.demo-agree-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.demo-agree-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 2px;
  padding-inline: 14px 2px;
  border-radius: 999px;
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
}
.demo-agree-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--on-deep);
}
.demo-step {
  display: inline-flex;
  align-items: center;
}
.demo-step-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-deep);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.demo-step-btn:hover:not(:disabled) {
  background: rgba(61, 220, 147, 0.14);
}
.demo-step-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.demo-step-btn:focus-visible {
  outline: 3px solid var(--d-yes);
  outline-offset: -3px;
}
.demo-step-val {
  min-width: 62px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--d-yes);
}
.demo-law {
  padding-inline-start: var(--s-2);
  border-inline-start: 3px solid var(--d-red);
}
.demo-law .demo-group-title svg {
  color: var(--d-red);
}
.demo-law-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.demo-law-list li {
  padding: 3px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-deep-2);
}

.demo-kept {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--d-line);
}
.demo-kept-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--on-deep);
}
.demo-kept-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.demo-kept-list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
}
.demo-kept-list li.is-short .demo-alt-name {
  color: var(--d-amber);
}
.demo-kept-list li.is-short .demo-alt-why {
  color: var(--on-deep);
}
@media (max-width: 520px) {
  .demo-kept-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.try-note {
  margin-top: var(--s-3);
  max-width: 74ch;
}

/* ------------------------------------------------------------ join: the form
   A's parked form (apps/website/src/waitlist-form.parked.html), restored here
   for B only: a name, an email, the consent box, one button. A's stylesheet
   keeps .wl, .wl .btn and .wl-notice; everything the form adds is below. */
.wl-form {
  /* The success panel is a third of the form's height. Without a floor,
     submitting collapses the band and drags the footer up under the pointer. */
  min-height: 420px;
}
.wl-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.wl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wl-field label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.wl-field input {
  font: inherit;
  font-size: 17px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--field-line);
  background: var(--card);
  color: var(--ink);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
/* The address is typed left to right; its label and error stay right-aligned. */
.wl-field input[dir='ltr'] {
  text-align: left;
}
.wl-field input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--tint);
}
.wl-field input[aria-invalid='true'] {
  border-color: var(--red);
}
/* The field's own error, beside the field it belongs to. */
.wl-err {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--red);
}
.wl-err:empty {
  display: none;
}
/* LEG-MSG-002 — its own row, its own decision, never pre-checked. */
.wl-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: var(--s-2);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.wl-consent input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--brand);
}
.wl-consent input:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.wl button[disabled] {
  opacity: 0.62;
  cursor: progress;
}
/* The form's own answer, replacing it on success: no second submit, no stale
   fields underneath. */
.wl-done {
  border: 1.5px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--card);
  padding: var(--s-3);
  text-align: start;
}
.wl-done h2 {
  font-size: 21px;
  margin-bottom: 6px;
}
.wl-done p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.wl-done:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
/* The submit-level failure: the network one, not a field one. */
.wl-fail {
  margin-top: var(--s-2);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--red-tint);
  color: #8d1c18;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.wl-fail:empty {
  display: none;
}

/* ==========================================================================
   Variant B — the detail pages.

   One system for the nine pages under the home page, so they read as one site
   rather than nine documents: a hero that makes the page's claim and draws it,
   a bar that says where you are on a long page, sections that alternate text
   and real screens, and the same ending everywhere — the next topic, then the
   one thing the site asks for.

   Rules this sheet keeps, and why:
     · Values are the palette's (A's tokens, packages/ui/src/palette.ts). The
       few new ones are shadows and curves, never a colour (BRD-COL-004/005).
     · The hero pictures are diagrams drawn in the app's own marks; the real
       screens are in the body, where the claim is argued (BRD-MRK-012).
     · The deep ground is a room, not a stripe: the demo's instrument, the
       build (the one step nobody attends), and the closing card. Nowhere else.
     · Logical properties only. Nothing here says left or right.
     · Every entrance is written as the final state first. `.rv-on` is set in
       <head> only when an observer exists and motion is welcome, and it comes
       off again if the page script never runs, so nothing waits on it.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Shadows carry the ground's own hue (--deep), never plain black. */
  --sh-card: 0 1px 2px rgba(8, 33, 26, 0.05), 0 14px 34px -18px rgba(8, 33, 26, 0.24);
  --sh-lift:
    0 2px 6px rgba(8, 33, 26, 0.06), 0 24px 48px -22px rgba(8, 33, 26, 0.3),
    0 60px 90px -60px rgba(8, 33, 26, 0.35);
  --r-xl: 34px;
  --sec-y: clamp(56px, 6.5vw, 96px);
}

/* A line-drawn icon. One stroke weight for every icon on the detail pages. */
.ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ the nav
   The menu a narrow screen opens instead of the bar. The bar keeps the
   wordmark and the one button; the menu holds the topics. The breakpoint is
   variant.css's, where the bar's links hide. */
.menu-btn {
  display: none;
}
@media (max-width: 1080px) {
  .menu-btn:not([hidden]) {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    padding: 0;
    border: 1.5px solid var(--field-line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    transition:
      border-color 0.18s ease,
      background-color 0.18s ease;
  }
  .menu-btn:hover {
    border-color: var(--brand);
  }
  .nav-in {
    gap: 12px;
  }
}
.menu-btn svg {
  width: 20px;
  height: 20px;
}
.menu-btn path {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition:
    transform 0.28s var(--ease-out),
    opacity 0.18s ease;
}
.menu-btn[aria-expanded='true'] .menu-l1 {
  transform: rotate(45deg) translateY(5px);
}
.menu-btn[aria-expanded='true'] .menu-l2 {
  opacity: 0;
}
.menu-btn[aria-expanded='true'] .menu-l3 {
  transform: rotate(-45deg) translateY(-5px);
}
.menu-btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
/* Under the bar, the width of the page, and never taller than what is left
   of the screen: a long list scrolls inside itself, not the page behind it. */
.menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  background: var(--card);
  border-block: 1px solid var(--line);
  box-shadow: 0 34px 60px -30px rgba(8, 33, 26, 0.4);
}
.menu[hidden] {
  display: none;
}
.menu-list {
  list-style: none;
  margin: 0;
  padding: 14px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
.menu-list a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.16s ease;
}
.menu-list a:hover,
.menu-list a[aria-current] {
  background: var(--tint);
  color: var(--brand-ink);
}
.menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 16px 0 22px;
  border-top: 1px solid var(--line);
}
.menu-alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-weight: 700;
}
@media (max-width: 560px) {
  .menu-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu-foot .btn {
    flex: 1 1 100%;
  }
}
/* A phone has room for the wordmark and two controls, not three: the menu
   carries the same button. */
@media (max-width: 440px) {
  .nav .btn-sm {
    display: none;
  }
  .menu-btn:not([hidden]) {
    margin-inline-start: auto;
  }
}
@media (min-width: 1041px) {
  .menu {
    display: none;
  }
}

/* ------------------------------------------------------------------- the hero
   The page's claim beside its picture. The light and the week grid are the
   home hero's, so a reader who arrives from the home page does not change
   sites; the picture is the page's own diagram. */
.ph {
  position: relative;
  isolation: isolate;
  padding: clamp(36px, 5vw, 64px) 0 clamp(64px, 8vw, 112px);
  overflow-x: clip;
}
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(52% 70% at 22% 42%, rgba(61, 220, 147, 0.16), rgba(61, 220, 147, 0) 70%),
    linear-gradient(
      180deg,
      rgba(228, 242, 234, 0.95) 0%,
      rgba(228, 242, 234, 0.42) 58%,
      rgba(228, 242, 234, 0) 100%
    );
}
/* The ground's week grid, faint, behind the picture only. */
.ph::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 46%;
  inset-inline-end: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(10, 125, 76, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 125, 76, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
}
.ph-in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.ph-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.ph h1 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  max-width: 17ch;
  color: var(--ink);
}
.ph .lead {
  max-width: 54ch;
  font-size: clamp(18px, 1.55vw, 20.5px);
}
.ph-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.ph-facts {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ph-facts li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.ph-facts b {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.ph-visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 500px;
}
@media (max-width: 980px) {
  .ph-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .ph::after {
    inset-inline-start: 0;
    inset-block-start: 45%;
  }
  .ph-visual {
    max-width: 540px;
  }
}

/* Where you are, in the hero's own pill: a way home without a second row of
   chrome above the headline. */
.crumbs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding-inline: 6px 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--line),
    0 6px 18px -10px rgba(15, 26, 22, 0.18);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--brand-ink);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}
.crumbs a:hover {
  background: var(--tint);
  color: var(--brand-ink);
}
.crumbs-sep {
  color: var(--mark-idle);
  font-weight: 500;
}

/* ------------------------------------------------------ the bar under a hero
   Sticky under the nav on the pages long enough to need it, and it says which
   section you are in (the observer in layout.html). On a phone it scrolls
   sideways rather than wrapping into a second bar. */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(239, 243, 241, 0.86);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-block: 1px solid var(--line);
}
.subnav ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar {
  display: none;
}
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.subnav a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
}
.subnav .n {
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-3);
}
.subnav a[aria-current] {
  background: var(--card);
  color: var(--ink);
  box-shadow:
    0 0 0 1px var(--line),
    0 6px 14px -8px rgba(15, 26, 22, 0.25);
}
.subnav a[aria-current] .n {
  color: var(--brand);
}
/* An anchor lands below both bars, not under them. */
html:has(.subnav) {
  scroll-padding-top: calc(var(--nav-h) + 84px);
}

/* ---------------------------------------------------------------- sections */
.sec {
  padding: var(--sec-y) 0;
  /* The light behind a lone screen reaches past it on purpose; sideways it
     must not reach past the page. clip, not hidden: no scroll container, so
     the sticky parts inside a section still stick. */
  overflow-x: clip;
}
/* A section of its own ground, one step off the page's: rhythm without a
   colour the page does not already have. */
.sec-tint {
  background: linear-gradient(180deg, #e8f1ec 0%, var(--bg) 100%);
  border-top: 1px solid var(--line);
}
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.sec-head h2,
.duo-copy h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
  max-width: 20ch;
}
.sec-head .lead {
  max-width: 58ch;
}
.sec-head > p:not([class]) {
  color: var(--ink-2);
  max-width: 62ch;
}

/* A kicker that also says who and when: the step's number, and the person
   whose time it is. */
.kicker-n {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--brand);
}
.kicker-n .n {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--deep);
  color: var(--bright);
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 800;
}
.kicker-n.is-yours .n {
  background: var(--brand);
  color: #fff;
}
.kicker-n.is-law {
  color: var(--red);
}
.kicker-n.is-law .n {
  background: var(--red-tint);
  color: var(--red);
}
.kicker-n.is-them {
  color: var(--amber);
}
.kicker-n.is-them .n {
  background: var(--amber-tint);
  color: var(--amber);
}
.on-deep .kicker-n {
  color: var(--bright);
}
.on-deep .kicker-n .n {
  background: rgba(61, 220, 147, 0.14);
  color: var(--bright);
}

/* Text beside a picture. The picture takes the larger share when it holds two
   screens, the smaller when it holds one. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.duo.is-one {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.duo.is-flip > :first-child {
  order: 2;
}
/* Flipped, the picture is placed first, so the tracks swap with it: a pair of
   screens keeps the wider share on either side. */
.duo.is-flip {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
}
.duo.is-one.is-flip {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.duo-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.duo-copy > p:not([class]) {
  color: var(--ink-2);
  max-width: 58ch;
}
.duo-copy .lead {
  max-width: 54ch;
}
@media (max-width: 1040px) {
  .duo,
  .duo.is-one,
  .duo.is-flip,
  .duo.is-one.is-flip {
    grid-template-columns: minmax(0, 1fr);
  }
  .duo.is-flip > :first-child {
    order: 0;
  }
}
.h-sub {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  max-width: 22ch;
}
/* The line under an argument that the argument rests on. */
.aside-note {
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--brand);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  max-width: 54ch;
}
.on-deep .aside-note {
  border-color: var(--bright);
  color: var(--on-deep-2);
}

/* A list of claims, each opening on its own bold phrase. */
.points {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 58ch;
}
.points li {
  position: relative;
  padding-inline-start: 34px;
  color: var(--ink-2);
  line-height: 1.6;
}
.points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23075c38' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.5'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
.points b {
  color: var(--ink);
}

/* ------------------------------------------------------------- the screens
   Real screens from design/spine-v2 on a lit panel of their own, two of them
   overlapping a little and stepped, so a pair reads as one object with depth
   rather than two thumbnails in a row. On a phone the pair becomes a strip you
   swipe (it is focusable and named, so a keyboard can scroll it too). */
.shots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(28px, 3.4vw, 44px) clamp(18px, 2.4vw, 36px) clamp(36px, 4vw, 52px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(61, 220, 147, 0.18), rgba(61, 220, 147, 0) 70%),
    linear-gradient(180deg, var(--tint) 0%, #d5eadf 100%);
  box-shadow: inset 0 0 0 1px rgba(10, 125, 76, 0.1);
}
.shots:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}
/* Written by layout.html only while the pair is a strip you swipe. */
.shots-dots {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.shots-dots[hidden] {
  display: none;
}
.shots-dots button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.shots-dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 30%, transparent);
  transition:
    width 0.25s ease,
    background-color 0.25s ease;
}
.shots-dots button.is-on::before {
  width: 22px;
  background: var(--brand);
}
.shots-dots button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: -3px;
  border-radius: 999px;
}
.sec-tint .shots {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(61, 220, 147, 0.14), rgba(61, 220, 147, 0) 70%),
    linear-gradient(180deg, #ffffff 0%, var(--tint) 100%);
}
.shot {
  position: relative;
  flex: none;
  width: auto;
  align-items: center;
  gap: 16px;
}
.shots .shot:nth-child(2) {
  margin-top: 56px;
  margin-inline-start: -22px;
}
.shots .shot:nth-child(1) {
  z-index: 1;
}
.shot figcaption {
  max-width: 250px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.shot figcaption b {
  display: block;
  font-size: 15px;
}
/* A single screen stands on the page's ground with the same light behind it
   and nothing boxing it in. */
.shot-solo {
  justify-self: center;
  isolation: isolate;
}
.shot-solo::before {
  content: '';
  position: absolute;
  inset: -12% -34% 4%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(61, 220, 147, 0.26), rgba(61, 220, 147, 0) 72%);
}
.shot-solo .phone .dc {
  --dc-s: 0.7;
}
.on-deep .shot-solo::before {
  background: radial-gradient(closest-side, rgba(61, 220, 147, 0.22), rgba(61, 220, 147, 0) 72%);
}
@media (max-width: 1240px) and (min-width: 1041px) {
  .shots .phone.sm .dc {
    --dc-s: 0.56;
  }
  .shot figcaption {
    max-width: 228px;
  }
}
@media (max-width: 1040px) {
  .shots {
    max-width: 640px;
    width: 100%;
    justify-self: center;
  }
}
@media (max-width: 640px) {
  .shots {
    justify-content: flex-start;
    gap: 16px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .shots::-webkit-scrollbar {
    display: none;
  }
  .shots .shot {
    scroll-snap-align: center;
  }
  .shots .shot:nth-child(2) {
    margin: 0;
  }
  /* As large as a 375px screen allows with the strip's padding cut to 12px:
     at 0.66 the boards' labels rendered at 8px. */
  .shots {
    padding-inline: 12px;
  }
  .shots .phone.sm .dc,
  .shot-solo .phone .dc {
    --dc-s: 0.74;
  }
}
@media (max-width: 370px) {
  .shots .phone.sm .dc,
  .shot-solo .phone .dc {
    --dc-s: 0.68;
  }
}

/* A card floating off the corner of a picture, saying the one line of it that
   matters. White on the ground's light, like the home hero's three. */
.float-note {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 240px;
  padding: 13px 16px;
  border-radius: 16px;
  border-inline-start: 4px solid var(--brand);
  background: var(--card);
  box-shadow:
    0 0 0 1px rgba(15, 26, 22, 0.06),
    0 20px 40px -18px rgba(8, 33, 26, 0.45);
}
.float-note b {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.float-note small {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ before, after
   Two states of the same moment, as one card: the warm half is how it goes
   today, the green half is the same moment with SmartShift, and the round
   badge on the seam is the change between them. Amber is the rating grid's
   "would rather not" and green its "yes", so both halves speak the product's
   own marks. Stacked, the arrow points down; side by side on a wide screen it
   points from the right-hand half (read first) to the left. */
.ba {
  --ba-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 580px;
  margin-top: 8px;
  border-radius: 24px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
  overflow: clip;
}
.ba-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  margin-top: clamp(32px, 4vw, 48px);
}
.ba-was,
.ba-now {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ba-was {
  padding: 22px 24px 32px;
  background: color-mix(in srgb, var(--amber-tint) 80%, var(--card));
  color: var(--ink-2);
}
.ba-now {
  z-index: 1;
  padding: 32px 24px 24px;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(61, 220, 147, 0.16), rgba(61, 220, 147, 0) 70%),
    var(--card);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
}
/* The seam: a brand circle ringed in white, and the arrow cut out of it. */
.ba-now::before,
.ba-now::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
}
.ba-now::before {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow:
    0 0 0 5px var(--card),
    0 8px 18px -6px rgba(7, 92, 56, 0.55);
}
.ba-now::after {
  width: 20px;
  height: 20px;
  background: var(--card);
  -webkit-mask: var(--ba-arrow) center / contain no-repeat;
  mask: var(--ba-arrow) center / contain no-repeat;
}
.ba-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 14px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 22%, transparent);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--amber);
}
.ba-now .ba-tag {
  background: var(--tint);
  box-shadow: none;
  color: var(--brand-ink);
}
.ba .cost-mark {
  width: 16px;
  height: 16px;
}
.ba p:not(.ba-tag) {
  font-size: 16.5px;
  line-height: 1.55;
}
.ba-wide .ba-was {
  padding: 30px 34px 32px 44px;
}
.ba-wide .ba-now {
  padding: 30px 44px 32px 34px;
  border-top: 0;
  border-inline-start: 1px solid var(--line);
}
/* Side by side, the badge sits on the upright seam and points at the answer. */
.ba-wide .ba-now::before,
.ba-wide .ba-now::after {
  top: 50%;
  left: auto;
  right: 0;
  translate: 50% -50%;
}
.ba-wide .ba-now::after {
  rotate: 90deg;
}
.ba-wide p:not(.ba-tag) {
  font-size: 18px;
}
@media (max-width: 720px) {
  .ba-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .ba-wide .ba-was {
    padding: 22px 24px 32px;
  }
  .ba-wide .ba-now {
    padding: 32px 24px 24px;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }
  .ba-wide .ba-now::before,
  .ba-wide .ba-now::after {
    top: 0;
    left: 50%;
    right: auto;
    translate: -50% -50%;
  }
  .ba-wide .ba-now::after {
    rotate: none;
  }
  .ba-wide p:not(.ba-tag) {
    font-size: 16.5px;
  }
}

/* ============================================================ how it works */

/* The hero's week: four steps down a rail, the last one filled — the same two
   states as the mark and A's step nodes (open, confirmed). */
.wk {
  position: relative;
  padding: 26px 26px 22px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--sh-lift);
}
.wk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-3);
}
.wk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* The rail, behind the icons. */
.wk-list::before {
  content: '';
  position: absolute;
  inset-inline-start: 25px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--line) 0%, var(--line) 68%, var(--brand) 100%);
}
.wk-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}
.wk-ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 16px;
  background: var(--inset);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 0 0 5px var(--card);
  color: var(--ink-2);
}
.wk-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wk-txt b {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.wk-txt small {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}
.wk-list li.is-yours {
  margin-top: 6px;
  padding: 14px;
  margin-inline: -14px;
  border-radius: 20px;
  background: var(--tint);
}
.wk-list li.is-yours .wk-ico {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 5px var(--tint);
}
.wk-list li.is-yours small {
  color: var(--brand-ink);
}
.wk-tag {
  margin-inline-start: auto;
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.wk-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
@media (max-width: 420px) {
  .wk {
    padding: 20px 18px 18px;
  }
  .wk-tag {
    display: none;
  }
}

/* Two agreements: the minimum as tiles, and the same agreement's week. */
.ag {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  justify-self: center;
}
.ag-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 24px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
}
.ag-card:nth-child(2) {
  margin-inline-start: clamp(0px, 4vw, 40px);
}
.ag-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ag-av {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 14px;
  background: var(--tint);
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 800;
}
.ag-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ag-who b {
  font-size: 17px;
  font-weight: 800;
}
.ag-who small {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.ag-min {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
.ag-min b {
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
}
.ag-tiles {
  display: flex;
  gap: 8px;
}
.ag-tiles i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath d='M10 2.6l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 7.9l5-.7z'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
.ag-week {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.ag-week li {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 10px;
  background: var(--inset);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-3);
}
.ag-week li.is-must {
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
}
.ag-week li.is-off {
  background: repeating-linear-gradient(135deg, var(--inset) 0 5px, #dfe7e3 5px 7px);
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.ag-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  max-width: none;
  padding-inline: 4px;
  font-size: 13.5px;
}
.ag-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ag-key i {
  width: 16px;
  height: 16px;
  border-radius: 5px;
}
.k-must {
  box-shadow: inset 0 0 0 2px var(--brand);
}
.k-off {
  background: repeating-linear-gradient(135deg, var(--inset) 0 3px, #cbd6d1 3px 5px);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The five answers, as the marks themselves. */
.ans {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ans li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 5px;
  padding-inline: 5px 14px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px;
  font-weight: 700;
}
.ans .lt {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

/* The build, on the deep ground: the room nobody is in. */
.panel-deep {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px);
  border-radius: calc(var(--r-xl) + 6px);
  background:
    radial-gradient(60% 70% at 15% 20%, rgba(61, 220, 147, 0.14), rgba(61, 220, 147, 0) 70%),
    radial-gradient(50% 60% at 90% 100%, rgba(10, 125, 76, 0.3), rgba(10, 125, 76, 0) 70%),
    var(--deep);
  box-shadow: var(--sh-lift);
}
.panel-deep::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(234, 243, 238, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 243, 238, 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(70% 80% at 20% 40%, #000 0%, transparent 80%);
  mask-image: radial-gradient(70% 80% at 20% 40%, #000 0%, transparent 80%);
}
.panel-deep > * {
  position: relative;
  z-index: 1;
}
.panel-deep h2 {
  color: var(--on-deep);
}
/* The three sources, in the order the build applies them. */
.ord {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
.ord li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(234, 243, 238, 0.05);
  box-shadow: inset 0 0 0 1px rgba(234, 243, 238, 0.1);
}
.ord-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--bright);
  color: var(--deep);
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 800;
}
.ord b {
  display: block;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--on-deep);
}
.ord p {
  margin-top: 2px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--on-deep-2);
}
.same {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  padding-top: 8px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-deep-2);
}
.same .ico {
  margin-top: 2px;
  color: var(--bright);
}
.same b {
  color: var(--on-deep);
}

/* A's Thursday chart, given a card and a title of its own. */
.cost-card {
  width: 100%;
  max-width: 600px;
  padding: 22px 24px 20px;
  border-radius: 24px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
}
.cost-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-3);
}
.cost-card .cost {
  margin: 0;
}

/* =================================================================== try */

.ph-visual .tg {
  --t-want: var(--bright);
  --t-can: #1d5a42;
  --t-line: rgba(234, 243, 238, 0.14);
}
/* The demo's opening week, small: the brand's one picture, a week going
   green (BRD-COL-002), in the instrument's own colours. */
.tg {
  padding: 22px 22px 18px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(61, 220, 147, 0.14), rgba(61, 220, 147, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  box-shadow: var(--sh-lift);
}
.tg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tg-title {
  font-size: 15px;
  font-weight: 800;
}
.tg-days {
  display: flex;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--on-deep-2);
}
.tg-days span {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(234, 243, 238, 0.07);
}
.tg-grid {
  display: grid;
  grid-template-columns: 58px repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}
.tg-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--on-deep);
}
.tg-grid i {
  aspect-ratio: 1;
  border-radius: 11px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 46%;
}
.t-want {
  background-color: var(--bright);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2308211a'%3E%3Cpath d='M10 2.6l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 7.9l5-.7z'/%3E%3C/svg%3E");
}
.t-can {
  background-color: #1b4d3a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233ddc93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}
.t-keen {
  background-color: #3a2c10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f0b95c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 10.5c1.55-2.9 3.12-2.9 4.67 0s3.12 2.9 4.67 0 3.12-2.9 4.67 0'/%3E%3C/svg%3E");
}
.t-unsure {
  background-color: #16362b;
  box-shadow: inset 0 0 0 1.5px rgba(234, 243, 238, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a4bdb1' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M7.1 7.4a2.95 2.95 0 015.8.85c0 1.85-2.35 2.1-2.35 3.95'/%3E%3Cpath d='M10.5 16.1v.05'/%3E%3C/svg%3E");
}
.t-no {
  background-color: #4a1d1b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ff8a80' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9'/%3E%3C/svg%3E");
}
.t-blank {
  box-shadow: inset 0 0 0 1.5px rgba(234, 243, 238, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a4bdb1' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 10h8'/%3E%3C/svg%3E");
  background-size: 40%;
}
/* Not a shift in this person's role: a dot, as in the demo. */
.t-role {
  background-image: radial-gradient(circle, rgba(234, 243, 238, 0.28) 0 2.5px, transparent 3px);
  background-size: 100% 100%;
}
.tg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(234, 243, 238, 0.1);
}
.tg-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--bright);
  color: var(--deep);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 10px 24px -10px rgba(61, 220, 147, 0.7);
}
.tg-res {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bright);
}
.tg-res .ico {
  width: 18px;
  height: 18px;
}
.tg-note {
  top: -34px;
  inset-inline-end: -28px;
}
@media (max-width: 1100px) {
  .tg-note {
    inset-inline-end: -8px;
  }
}
@media (max-width: 460px) {
  .tg {
    padding: 18px 14px 14px;
  }
  .tg-grid {
    grid-template-columns: 46px repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .tg-name {
    font-size: 12.5px;
  }
  .tg-note {
    position: relative;
    top: auto;
    inset-inline-end: auto;
    margin-top: 12px;
    max-width: none;
  }
}

/* The guide: four numbered parts, the same numbers the demo carries. */
.guide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.guide li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 26px;
  border-radius: 24px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
}
.guide h3 {
  font-size: 18.5px;
  line-height: 1.35;
}
.guide p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.guide-n,
.demo-n {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--deep);
  color: var(--bright);
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 800;
}
.guide-n.is-law {
  background: var(--red-tint);
  color: var(--red);
}
@media (max-width: 1100px) {
  .guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .guide {
    grid-template-columns: minmax(0, 1fr);
  }
}
.try-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}
.try-pair .spec-card {
  margin: 0;
  max-inline-size: none;
}
.tip {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 28px;
  border-radius: 24px;
  background: var(--deep);
  color: var(--on-deep-2);
  box-shadow: var(--sh-lift);
}
.tip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--bright);
}
.tip h3 {
  font-size: 22px;
  line-height: 1.3;
  color: var(--on-deep);
}
.tip p {
  font-size: 16px;
  line-height: 1.6;
}
.tip-small {
  padding-top: 12px;
  border-top: 1px solid rgba(234, 243, 238, 0.12);
  font-size: 14.5px !important;
  color: var(--on-deep-2);
}
@media (max-width: 960px) {
  .try-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .tip {
    position: static;
  }
}

/* The instrument's room. */
.try-band {
  position: relative;
  padding: var(--sec-y) 0;
  background:
    radial-gradient(50% 40% at 80% 0%, rgba(61, 220, 147, 0.12), rgba(61, 220, 147, 0) 70%),
    radial-gradient(40% 40% at 10% 100%, rgba(10, 125, 76, 0.25), rgba(10, 125, 76, 0) 70%),
    var(--deep);
}
.try-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  text-align: center;
}
.try-head h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  color: var(--on-deep);
}
.try-head .kicker {
  color: var(--bright);
}
.try-head .lead {
  max-width: 52ch;
}
.demo-head h3,
.demo-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.demo .demo-n {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bright);
  color: var(--deep);
  font-size: 13px;
}
.demo .demo-n.is-law {
  background: var(--d-red, #ff8a80);
  color: var(--deep);
}
.demo-go {
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-reset {
  white-space: nowrap;
}
.try-note {
  margin-inline: auto;
  text-align: center;
}

/* =============================================================== reasons */

/* One shift and its reason, as a card: the sentence is the subject. */
.rc {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--sh-lift);
  overflow: hidden;
}
.rc-shift {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.rc-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 16px;
  background: var(--deep);
  color: var(--on-deep);
  line-height: 1.1;
}
.rc-day b {
  font-size: 18px;
  font-weight: 800;
}
.rc-day small {
  font-size: 12px;
  font-weight: 700;
  color: var(--bright);
}
.rc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rc-meta b {
  font-size: 16.5px;
  font-weight: 800;
}
.rc-meta small {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}
.rc-person {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 5px;
  padding-inline: 5px 14px;
  border-radius: 999px;
  background: var(--inset);
  font-size: 15px;
}
.rc-person .ag-av {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 13px;
}
.rc-why {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 22px;
  background: linear-gradient(180deg, var(--tint) 0%, #f3f9f5 100%);
}
.rc-label {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--brand);
}
.rc-sentence {
  font-size: clamp(21px, 2.1vw, 25px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.rc-ev {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rc-ev li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 5px;
  padding-inline: 5px 12px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
.rc-meter {
  display: inline-flex;
  gap: 3px;
  padding: 6px;
  border-radius: 8px;
  background: var(--inset);
}
.rc-meter i {
  width: 8px;
  height: 12px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px var(--field-line);
}
.rc-meter i.on {
  background: var(--brand);
  box-shadow: none;
}
.rc-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 16px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.rc-foot .ico {
  color: var(--brand);
  width: 20px;
  height: 20px;
}
@media (max-width: 460px) {
  .rc-shift {
    flex-wrap: wrap;
  }
  .rc-person {
    margin-inline-start: 0;
  }
}

/* The question, at the size it is asked in. */
.sec-quote {
  padding-bottom: 0;
}
.bigq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.bigq-mark {
  width: 54px;
  height: 46px;
  fill: var(--bright);
  opacity: 0.9;
}
.bigq h2 {
  font-size: clamp(40px, 6.2vw, 80px);
  line-height: 1.05;
  max-width: 16ch;
}
.bigq p {
  max-width: 52ch;
  font-size: clamp(17.5px, 1.6vw, 20px);
  color: var(--ink-2);
}

/* Five promises, not five equal boxes: the first carries its own evidence and
   spans two rows; the two the agreements add sit in their own quieter tone. */
.bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.b {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 30px;
  border-radius: 26px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
}
.b h3 {
  font-size: 22px;
}
.b p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.b-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--brand-ink);
}
.b-lg {
  grid-row: span 2;
  background:
    radial-gradient(70% 50% at 80% 0%, rgba(61, 220, 147, 0.16), rgba(61, 220, 147, 0) 70%),
    var(--deep);
  box-shadow: var(--sh-lift);
  color: var(--on-deep-2);
}
.b-lg h3 {
  font-size: 30px;
  color: var(--on-deep);
}
.b-lg p {
  color: var(--on-deep-2);
  font-size: 17px;
}
.b-lg .b-ico {
  background: rgba(61, 220, 147, 0.14);
  color: var(--bright);
}
.b-lines {
  list-style: none;
  margin: auto 0 0;
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.b-lines li {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(234, 243, 238, 0.06);
  box-shadow: inset 0 0 0 1px rgba(234, 243, 238, 0.1);
  border-inline-start: 3px solid var(--bright);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--on-deep);
}
.b-soft {
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
}
.b-soft .b-ico {
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 1000px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .b-lg {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}
@media (max-width: 620px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Rows that each open on a mark. */
.rows {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 580px;
  border-radius: 22px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.rows li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.rows li + li {
  border-top: 1px solid var(--line);
}
.rows b {
  color: var(--ink);
}
.rows .lt svg[viewBox='0 0 24 24'] {
  width: 18px;
  height: 18px;
}

/* ================================================================= rules */

/* The three sources as a stack, in the order the build applies them: each
   card steps in from the one above it. */
.st {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 24px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.st li::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: var(--st-c);
}
.st-law {
  --st-c: var(--red);
  --st-t: var(--red-tint);
}
.st-you {
  --st-c: var(--brand);
  --st-t: var(--tint);
  margin-inline-start: clamp(0px, 3vw, 28px);
}
.st-them {
  --st-c: var(--amber);
  --st-t: var(--amber-tint);
  margin-inline-start: clamp(0px, 6vw, 56px);
}
.st-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--st-t);
  color: var(--st-c);
}
.st-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.st-who {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}
.st-body p:not(.st-who):not(.st-rule) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.st-rule {
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--st-c);
}

/* The law's numbers, lifted out of their sentences. */
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px 28px;
  border-radius: 24px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute;
  inset-inline: 24px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--red);
  opacity: 0.85;
}
.stat-n {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.stat-n b {
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat-n span {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-3);
}
.stat h3 {
  font-size: 18px;
  line-height: 1.3;
}
.stat p:not(.stat-n) {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
@media (max-width: 1040px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
.src {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.src .ico {
  width: 18px;
  height: 18px;
}
.law-duo {
  margin-top: clamp(56px, 6vw, 88px);
}

.two-way {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 580px;
}
.tw {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  border-radius: 20px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
}
.tw-tag {
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--brand-ink);
  font-size: 13.5px;
  font-weight: 800;
}
.tw p:not(.tw-tag) {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 520px) {
  .two-way {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Two spec cards side by side, each reflowing to its own width. */
.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.spec-grid .spec-card {
  margin: 0;
  max-inline-size: none;
}
.spec-card {
  container-type: inline-size;
  border-radius: 24px;
  box-shadow: var(--sh-card);
}
@container (max-width: 560px) {
  .spec-rows li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .spec-rows .spec-why {
    padding-inline-start: 42px;
  }
  .spec-gate .spec-rows .spec-why {
    padding-inline-start: 0;
  }
}
@media (max-width: 1000px) {
  .spec-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================== changes */

/* A changed shift, minute by minute. */
.tl {
  width: 100%;
  margin: 0;
  display: block;
  padding: 24px 24px 12px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--sh-lift);
}
.tl-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.tl-day {
  font-size: 17px;
  font-weight: 800;
}
.tl-shift {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}
.tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-list li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0 14px;
}
.tl-list li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 72px;
  top: 30px;
  bottom: -12px;
  width: 2px;
  background: var(--line);
}
.tl-t {
  padding-top: 1px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
  direction: ltr;
  text-align: end;
}
.tl-dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 2.5px var(--mark-idle);
}
.tl-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tl-txt b {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}
.tl-txt small {
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 600;
}
.tl-list li.is-open .tl-dot {
  box-shadow: inset 0 0 0 2.5px var(--amber);
}
.tl-list li.is-open b {
  color: var(--amber);
}
.tl-list li.is-taken .tl-dot {
  background: var(--brand);
  box-shadow: none;
}
.tl-list li.is-you {
  margin-top: 4px;
  margin-inline: -12px;
  padding-inline: 12px;
  border-radius: 18px;
  background: var(--tint);
}
.tl-list li.is-you .tl-dot {
  background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  box-shadow: 0 0 0 4px rgba(10, 125, 76, 0.16);
}
.tl-list li.is-you b {
  color: var(--brand-ink);
}

/* Three cases. Each is the same shape — what happens, then what happens next —
   so the three read as one argument; the last is yours and is filled. */
.cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  counter-reset: none;
}
.case {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 26px;
  border-radius: 26px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
}
.case h3 {
  font-size: 22px;
}
.case-when {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
}
.case-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 15px;
  background: var(--tint);
  color: var(--brand-ink);
}
.case-ico.is-alert {
  background: var(--amber-tint);
  color: var(--amber);
}
.case-ico.is-you {
  background: rgba(61, 220, 147, 0.14);
  color: var(--bright);
}
.case-flow {
  list-style: none;
  margin: 10px 0 0;
  padding: 16px 0 0;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: flow;
}
.case-flow li {
  position: relative;
  padding-inline-start: 34px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  counter-increment: flow;
}
.case-flow li::before {
  content: counter(flow);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
}
.case-flow li:last-child::before {
  background: var(--brand);
  box-shadow: none;
  color: #fff;
}
.case.is-yours {
  background:
    radial-gradient(70% 50% at 80% 0%, rgba(61, 220, 147, 0.14), rgba(61, 220, 147, 0) 70%),
    var(--deep);
  box-shadow: var(--sh-lift);
}
.case.is-yours h3 {
  color: var(--on-deep);
}
.case.is-yours .case-when,
.case.is-yours .case-flow li {
  color: var(--on-deep-2);
}
.case.is-yours .case-flow {
  border-top-color: rgba(234, 243, 238, 0.14);
}
.case.is-yours .case-flow li::before {
  background: rgba(234, 243, 238, 0.08);
  box-shadow: inset 0 0 0 1px rgba(234, 243, 238, 0.14);
  color: var(--on-deep);
}
.case.is-yours .case-flow li:last-child::before {
  background: var(--bright);
  color: var(--deep);
}
.case-link {
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bright);
  font-weight: 700;
  text-underline-offset: 4px;
}
.case.is-yours :focus-visible {
  outline-color: var(--bright);
}
@media (max-width: 1000px) {
  .cases {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }
}

/* What one change moves. */
.effects {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 580px;
}
.effects li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.effects b {
  color: var(--ink);
}
.fx-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  background: var(--tint);
  color: var(--brand-ink);
}
.fx-ico .ico {
  width: 20px;
  height: 20px;
}

/* =============================================================== compare */

/* The one question, and the answer in the build's own words. */
.ask {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--sh-lift);
}
.ask-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-3);
}
.ask-label .ico {
  color: var(--brand);
}
.ask-q {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.ask-a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--deep);
  color: var(--on-deep);
}
.ask-who {
  font-size: 14px;
  font-weight: 800;
  color: var(--bright);
}
.ask-say {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
}
.ask-note {
  font-size: 14px;
  color: var(--on-deep-2);
}

/* A's table, on a card, with its header following you down it. */
.cmp-card {
  padding: clamp(18px, 2.4vw, 32px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
  overflow: clip;
}
.cmp-card .cmp-key {
  justify-content: flex-end;
}
.cmp thead th,
.cmp thead td {
  position: sticky;
  top: var(--nav-h);
  z-index: 2;
  background: var(--card);
}
.cmp thead th.is-us {
  background: var(--tint);
}
.cmp thead th.is-us::after {
  content: '';
  position: absolute;
  inset-inline: 18px;
  top: 0;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--brand);
}
.cmp tbody tr {
  transition: background-color 0.16s ease;
}
.cmp tbody tr:hover > th,
.cmp tbody tr:hover > td:not(.is-us) {
  background: #f7faf8;
}
.cmp .is-us {
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--brand) 18%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--brand) 18%, transparent);
}
.cmp-note {
  margin-top: 18px;
}
@media (max-width: 760px) {
  .cmp thead th,
  .cmp thead td {
    position: static;
  }
  .cmp-card .cmp-key {
    justify-content: flex-start;
  }
}

/* A phone: one alternative at a time. Seven topics times three stacked
   answers was 2,600px of the same three labels; with the switch each topic is
   the alternative and SmartShift, side by side, the way the page argues it.
   Only where :has() works — elsewhere the stacked table stays as it was. */
.cmp-vs {
  display: none;
}
@media (max-width: 760px) {
  @supports selector(:has(a)) {
    .cmp-vs {
      display: block;
      margin: 18px 0 6px;
      padding: 0;
      border: 0;
    }
    .cmp-vs legend {
      margin-bottom: 8px;
      padding: 0;
      font-size: 14px;
      font-weight: 800;
      color: var(--ink-3);
    }
    /* A segmented control: one track, the chosen half filled. */
    .cmp-vs-track {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      border-radius: 999px;
      background: var(--inset);
      box-shadow: inset 0 0 0 1px var(--line);
    }
    .cmp-vs label {
      position: relative;
    }
    .cmp-vs input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
    .cmp-vs span {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink-2);
      text-align: center;
    }
    .cmp-vs input:checked + span {
      background: var(--ink);
      color: var(--card);
      box-shadow: 0 4px 10px -4px rgba(15, 26, 22, 0.45);
    }
    .cmp-vs input:focus-visible + span {
      outline: 3px solid var(--brand);
      outline-offset: 2px;
    }

    .cmp tbody tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 18px 0 16px;
    }
    .cmp tbody th {
      grid-column: 1 / -1;
      margin-bottom: 2px;
    }
    .cmp td,
    .cmp td.is-us,
    .cmp tbody tr:last-child .is-us {
      margin: 0;
      padding: 12px 12px 14px;
      border-radius: 14px;
      font-size: 15px;
    }
    .cmp td:not(.is-us) {
      background: var(--inset);
    }
    /* The mark floats at the start of the sentence rather than holding a
       column of its own: in half a phone every pixel of line counts. */
    .cmp td .v {
      display: block;
      text-align: start;
    }
    .cmp td .cost-mark {
      float: inline-start;
      width: 16px;
      height: 16px;
      margin-top: 4px;
      margin-inline-end: 6px;
    }
    .cmp-card {
      padding-inline: 14px;
    }
    .cmp-card:has(.cmp-vs input[value='wa']:checked) td[data-col='אפליקציות סידור אחרות'],
    .cmp-card:has(.cmp-vs input[value='apps']:checked) td[data-col='וואטסאפ ואקסל'] {
      display: none;
    }
  }
}

/* Three questions to take into any demo. */
.asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.asks li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 30px;
  border-radius: 26px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
}
.asks-n {
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--brand);
}
.asks h3 {
  font-size: 21px;
  line-height: 1.35;
}
.asks p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
@media (max-width: 1000px) {
  .asks {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }
}

/* ================================================================= scope */

/* The one thing in the middle, the six around it, struck through. */
.orbit {
  position: relative;
  aspect-ratio: 1.1;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
.orbit::before,
.orbit::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1.5px dashed rgba(10, 125, 76, 0.22);
}
.orbit::after {
  inset: 30%;
  border-style: solid;
  border-color: rgba(10, 125, 76, 0.12);
  background: radial-gradient(closest-side, rgba(61, 220, 147, 0.22), rgba(61, 220, 147, 0));
}
.orbit-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow:
    0 0 0 8px rgba(10, 125, 76, 0.1),
    0 24px 44px -16px rgba(10, 125, 76, 0.7);
}
.orbit-core .ico {
  width: 24px;
  height: 24px;
  stroke-width: 2.6;
}
.orbit-x {
  position: absolute;
  z-index: 1;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--line),
    0 10px 22px -14px rgba(8, 33, 26, 0.4);
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.o1 {
  top: 6%;
  left: 38%;
}
.o2 {
  top: 22%;
  left: 2%;
}
.o3 {
  top: 24%;
  right: 0;
}
.o4 {
  bottom: 22%;
  left: 6%;
}
.o5 {
  bottom: 18%;
  right: 2%;
}
.o6 {
  bottom: 3%;
  left: 34%;
}
@media (max-width: 460px) {
  .orbit-x {
    font-size: 13px;
    padding: 7px 12px;
  }
  .orbit-core {
    font-size: 20px;
    padding: 12px 22px;
  }
}

.scope-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: 16px;
  align-items: stretch;
}
.does-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px;
  border-radius: 26px;
  background:
    radial-gradient(70% 50% at 80% 0%, rgba(61, 220, 147, 0.18), rgba(61, 220, 147, 0) 70%),
    var(--deep);
  color: var(--on-deep-2);
  box-shadow: var(--sh-lift);
}
.does-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--bright);
  color: var(--deep);
}
.does-ico .ico {
  stroke-width: 2.6;
}
.does-label {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--bright);
}
.does-card h3 {
  font-size: 34px;
  color: var(--on-deep);
}
.does-card p:not(.does-label) {
  font-size: 16.5px;
  line-height: 1.6;
}
.does-link {
  margin-top: auto;
  padding-top: 12px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bright);
  font-weight: 700;
  text-underline-offset: 4px;
}
.does-card :focus-visible {
  outline-color: var(--bright);
}
.nots-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.nd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.nd-x {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border-radius: 11px;
  background: var(--red-tint);
  color: var(--red);
}
.nd-x .ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}
.nd h3 {
  font-size: 19px;
}
.nd p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 1100px) {
  .scope-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .nots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .nots-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* What the app will not do to the team. */
.vows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vows li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--card);
  box-shadow:
    var(--sh-card),
    inset 0 0 0 1px var(--line);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}
.vows b {
  color: var(--ink);
}
.vow-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--tint);
  color: var(--brand-ink);
}

/* ============================================================== questions */

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 30px 30px 26px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--sh-lift);
  color: var(--ink-2);
}
.contact-ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 17px;
  background: var(--tint);
  color: var(--brand-ink);
}
.contact-t {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
.contact-btn {
  margin-top: 6px;
  width: 100%;
}
.contact-foot {
  font-size: 15px;
}

.qa-sec {
  padding-top: clamp(24px, 3vw, 40px);
}
.qa {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.qa-nav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.qa-nav-t {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-3);
}
.qa-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-inline-start: 2px solid var(--line);
}
.qa-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-inline-start: -2px;
  padding-inline: 16px 8px;
  border-inline-start: 2px solid transparent;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}
.qa-nav a:hover {
  color: var(--brand-ink);
  border-inline-start-color: var(--brand);
}
.qa-nav a[aria-current] {
  color: var(--ink);
  border-inline-start-color: var(--brand);
}
.qa-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 56px);
}
.qa-group {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.qa-group h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: clamp(24px, 2.4vw, 30px);
}
.qa-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--tint);
  color: var(--brand-ink);
}
.qas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qas details {
  border-radius: 20px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.2s ease;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.qas details[open] {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 45%, transparent),
    var(--sh-card);
}
.qas summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-block: 18px;
  padding-inline: 24px 64px;
  list-style: none;
  cursor: pointer;
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  border-radius: 20px;
}
.qas summary::-webkit-details-marker {
  display: none;
}
/* A plus that turns into a minus: the stroke that goes is the one that makes
   it a plus. */
.qas summary::before,
.qas summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 24px;
  top: 50%;
  width: 16px;
  height: 2.5px;
  margin-top: -1.25px;
  border-radius: 2px;
  background: var(--brand);
  transition:
    transform 0.25s var(--ease-out),
    opacity 0.2s ease;
}
.qas summary::after {
  transform: rotate(90deg);
}
.qas details[open] summary::after {
  transform: rotate(0deg);
  opacity: 0;
}
.qas summary:hover {
  color: var(--brand-ink);
}
.qas summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.qas .a {
  padding-inline: 24px 64px;
  padding-block: 0 22px;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 70ch;
}
.qas .a .inline {
  margin-inline-start: 4px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) and (interpolate-size: allow-keywords) {
    .qas details {
      interpolate-size: allow-keywords;
    }
    .qas details::details-content {
      block-size: 0;
      opacity: 0;
      overflow: hidden;
      transition:
        block-size 0.2s ease-in,
        opacity 0.15s ease,
        content-visibility 0.2s allow-discrete;
    }
    .qas details[open]::details-content {
      block-size: auto;
      opacity: 1;
      transition:
        block-size 0.28s var(--ease-out),
        opacity 0.2s ease,
        content-visibility 0.28s allow-discrete;
    }
  }
}
@media (max-width: 860px) {
  .qa {
    grid-template-columns: minmax(0, 1fr);
  }
  .qa-nav {
    position: static;
  }
  .qa-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
  }
  .qa-nav a {
    margin: 0;
    padding-inline: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--field-line);
  }
}
@media (max-width: 520px) {
  .qas summary {
    padding-inline: 18px 52px;
  }
  .qas summary::before,
  .qas summary::after {
    inset-inline-end: 18px;
  }
  .qas .a {
    padding-inline: 18px;
  }
}

/* ================================================================== join */
.jn {
  position: relative;
  isolation: isolate;
  padding: clamp(36px, 5vw, 64px) 0 var(--sec-y);
  overflow-x: clip;
}
.jn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 22% 40%, rgba(61, 220, 147, 0.18), rgba(61, 220, 147, 0) 70%),
    linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%);
}
.jn-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.jn-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.jn h1 {
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.1;
  max-width: 14ch;
}
.jn .lead {
  max-width: 50ch;
}
.jn-steps {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 520px;
}
.jn-steps li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  color: var(--ink-2);
  line-height: 1.55;
}
.jn-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 17px;
  top: 38px;
  bottom: 2px;
  width: 2px;
  background: var(--line);
}
.jn-steps b {
  color: var(--ink);
}
.jn-n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--field-line);
  font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-2);
}
.jn-n.is-on {
  background: var(--brand);
  box-shadow: none;
  color: #fff;
}
.jn-trust {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.jn-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.jn-trust .ico {
  width: 18px;
  height: 18px;
  color: var(--brand);
  stroke-width: 2.6;
}
.jn-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jn .wl-card {
  box-shadow: var(--sh-lift);
}
.jn-alt {
  text-align: center;
  font-size: 15px;
  color: var(--ink-2);
}
@media (max-width: 960px) {
  .jn-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .jn-form {
    max-width: 560px;
  }
}

/* ============================================================ the endings */

/* The next topic, and the one before. Previous on the start side, next on the
   end side, the way the page reads. */
.pager {
  padding: clamp(32px, 4vw, 56px) 0 0;
}
/* Where you are, the one page to go to next, and the way back as a quiet
   link: the two equal white boxes this replaced gave "back" the same weight
   as "on", and every page ended on the plainest thing on it. */
.pager-in {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.pg-where {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
}
.pg-track {
  display: flex;
  gap: 4px;
}
.pg-track i {
  width: 18px;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
}
.pg-track i.is-done {
  background: color-mix(in srgb, var(--brand) 45%, var(--line));
}
.pg-track i.is-here {
  width: 30px;
  background: var(--brand);
}
.pg-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'dir go'
    'title go'
    'blurb go';
  align-items: center;
  column-gap: 20px;
  row-gap: 4px;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 140% at 0% 50%, rgba(61, 220, 147, 0.2), rgba(61, 220, 147, 0) 70%),
    var(--card);
  box-shadow:
    inset 0 0 0 1px var(--line),
    var(--sh-card);
  color: var(--ink);
  text-decoration: none;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s var(--ease-out);
}
.pg-next:hover {
  box-shadow:
    inset 0 0 0 1.5px var(--brand),
    var(--sh-card);
}
.pg-dir {
  grid-area: dir;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand);
}
.pg-next b {
  grid-area: title;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.2;
}
.pg-next small {
  grid-area: blurb;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.pg-go {
  grid-area: go;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--card);
  box-shadow: 0 10px 22px -10px rgba(7, 92, 56, 0.6);
  transition: transform 0.2s var(--ease-out);
}
.pg-go svg {
  width: 24px;
  height: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  .pg-next:hover {
    transform: translateY(-2px);
  }
  .pg-next:hover .pg-go {
    transform: translateX(-4px);
  }
}
.pg-prev {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.pg-prev svg {
  width: 17px;
  height: 17px;
  color: var(--ink-3);
}
.pg-prev b {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--field-line);
  text-underline-offset: 4px;
}
.pg-prev:hover b {
  text-decoration-color: var(--brand);
}
@media (max-width: 640px) {
  .pg-next {
    column-gap: 14px;
  }
  .pg-go {
    width: 46px;
    height: 46px;
  }
  .pg-track i {
    width: 12px;
  }
  .pg-track i.is-here {
    width: 22px;
  }
}

/* The closing card: the deep ground, the ask, and a week going green. */
.cta {
  padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 7vw, 104px);
}
.cta-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(36px, 5vw, 72px);
  border-radius: calc(var(--r-xl) + 6px);
  background:
    radial-gradient(55% 80% at 85% 0%, rgba(61, 220, 147, 0.2), rgba(61, 220, 147, 0) 70%),
    radial-gradient(50% 70% at 5% 100%, rgba(10, 125, 76, 0.32), rgba(10, 125, 76, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  box-shadow: var(--sh-lift);
}
.cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.cta .kicker {
  color: var(--bright);
}
.cta h2 {
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.12;
  color: var(--on-deep);
}
.cta-lead {
  max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--on-deep-2);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 8px;
}
.cta .btn-primary {
  background: var(--bright);
  color: var(--deep);
  box-shadow: 0 16px 34px -14px rgba(61, 220, 147, 0.75);
}
.cta .btn-primary:hover {
  background: #7fe9b3;
}
.cta-alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--on-deep-line);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.18s ease;
}
.cta-alt:hover {
  text-decoration-color: var(--bright);
}
.cta :focus-visible {
  outline-color: var(--bright);
}
/* Three weeks of seven, going green. */
.cta-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  justify-self: center;
  width: 100%;
  max-width: 380px;
  transform: rotate(-4deg);
}
.cta-week .t {
  aspect-ratio: 1;
  border-radius: 11px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 46%;
}
@media (max-width: 860px) {
  .cta-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .cta-week {
    max-width: 320px;
    justify-self: start;
    transform: none;
  }
}

/* ================================================================ footer */
.ft {
  padding: clamp(48px, 6vw, 80px) 0 32px;
  /* The home page closes on the same ground; a hairline says where it ends. */
  border-top: 1px solid rgba(234, 243, 238, 0.08);
  background:
    radial-gradient(40% 60% at 90% 0%, rgba(61, 220, 147, 0.07), rgba(61, 220, 147, 0) 70%),
    var(--deep);
  color: var(--on-deep-2);
}
.ft-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(234, 243, 238, 0.1);
}
.ft-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 34ch;
}
.ft .wordmark {
  color: var(--on-deep);
}
.ft .wordmark .shift {
  color: var(--bright);
}
.ft .mark {
  --mark-on: var(--bright);
  --mark-idle: #3a6656;
  --mark-tick: #06251a;
}
.ft-line {
  font-size: 17px;
  font-weight: 800;
  color: var(--on-deep);
}
.ft-about {
  font-size: 15px;
  line-height: 1.65;
}
.ft-col h2 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--on-deep);
}
.ft-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ft-col a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--on-deep-2);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.16s ease;
}
.ft-col a:hover {
  color: var(--bright);
}
.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  font-size: 14px;
}
.ft-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--on-deep-line);
  text-underline-offset: 4px;
}
.ft-mail:hover {
  color: var(--bright);
}
.ft :focus-visible {
  outline-color: var(--bright);
}
@media (max-width: 900px) {
  .ft-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ft-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .ft-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ================================================================== 404 */
.lost {
  padding: clamp(72px, 10vw, 140px) 0;
}
.lost-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.lost-tiles {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.lost-tiles i {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 46%;
}
.lost h1 {
  font-size: clamp(36px, 5vw, 60px);
}
.lost-links {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 860px;
  text-align: start;
}
.lost-links a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.18s ease;
}
.lost-links a:hover {
  box-shadow:
    inset 0 0 0 1.5px var(--brand),
    var(--sh-card);
}
.lost-links b {
  font-size: 18px;
  font-weight: 800;
}
.lost-links small {
  font-size: 14.5px;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .lost-links {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }
}

/* The rating tiles on light ground (the 404's week, the closing card's week
   on the deep ground has its own colours above). */
.lost-tiles .t-want {
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath d='M10 2.6l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 7.9l5-.7z'/%3E%3C/svg%3E");
}
.lost-tiles .t-can {
  background-color: var(--tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23075c38' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}
.lost-tiles .t-blank {
  box-shadow: inset 0 0 0 1.5px var(--field-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235a6b64' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 10h8'/%3E%3C/svg%3E");
  background-size: 40%;
}

/* ============================================================== entrances
   Written as the final state; only under `.rv-on` (layout.html) does anything
   start anywhere else. The hero rises in order on load; every block below it
   rises once as it comes on screen. */
@keyframes ss-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ss-settle {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ss-tile {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rv-on .ph-copy > *,
.rv-on .jn-copy > * {
  animation: ss-rise 0.8s var(--ease-out) both;
}
.rv-on .ph-copy > :nth-child(2),
.rv-on .jn-copy > :nth-child(2) {
  animation-delay: 0.06s;
}
.rv-on .ph-copy > :nth-child(3),
.rv-on .jn-copy > :nth-child(3) {
  animation-delay: 0.12s;
}
.rv-on .ph-copy > :nth-child(4),
.rv-on .jn-copy > :nth-child(4) {
  animation-delay: 0.18s;
}
.rv-on .ph-copy > :nth-child(n + 5),
.rv-on .jn-copy > :nth-child(n + 5) {
  animation-delay: 0.24s;
}
.rv-on .ph-visual,
.rv-on .jn-form {
  animation: ss-settle 1s var(--ease-out) 0.16s both;
}
/* The week fills a day-column at a time, in reading order. */
.rv-on .tg-grid i {
  animation: ss-tile 0.5s var(--ease-out) both;
  animation-delay: 0.45s;
}
.rv-on .tg-grid i:nth-of-type(6n + 2) {
  animation-delay: 0.52s;
}
.rv-on .tg-grid i:nth-of-type(6n + 3) {
  animation-delay: 0.59s;
}
.rv-on .tg-grid i:nth-of-type(6n + 4) {
  animation-delay: 0.66s;
}
.rv-on .tg-grid i:nth-of-type(6n + 5) {
  animation-delay: 0.73s;
}
.rv-on .tg-grid i:nth-of-type(6n) {
  animation-delay: 0.8s;
}
/* Short and early (the observer in layout.html starts it a little before
   the block is on screen): at 0.7–0.9s, begun only once a block was already
   in view, a fast scroll met empty space that filled in late, and the site
   read as slow. */
.rv-on .rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.5s var(--ease-out);
  transition-delay: var(--rv-d, 0s);
}
.rv-on .rv.is-in {
  opacity: 1;
  transform: none;
}
/* Siblings arrive a beat apart, never all at once. */
.rv-on .guide > .rv:nth-child(2),
.rv-on .bento > .rv:nth-child(2),
.rv-on .stats > .rv:nth-child(2),
.rv-on .cases > .rv:nth-child(2),
.rv-on .asks > .rv:nth-child(2),
.rv-on .nots-grid > .rv:nth-child(2) {
  --rv-d: 0.07s;
}
.rv-on .guide > .rv:nth-child(3),
.rv-on .bento > .rv:nth-child(3),
.rv-on .stats > .rv:nth-child(3),
.rv-on .cases > .rv:nth-child(3),
.rv-on .asks > .rv:nth-child(3),
.rv-on .nots-grid > .rv:nth-child(3) {
  --rv-d: 0.14s;
}
.rv-on .guide > .rv:nth-child(4),
.rv-on .bento > .rv:nth-child(4),
.rv-on .stats > .rv:nth-child(4),
.rv-on .nots-grid > .rv:nth-child(4) {
  --rv-d: 0.21s;
}
.rv-on .bento > .rv:nth-child(5),
.rv-on .nots-grid > .rv:nth-child(5) {
  --rv-d: 0.28s;
}
.rv-on .nots-grid > .rv:nth-child(6) {
  --rv-d: 0.35s;
}
.rv-on .duo > .rv + .rv,
.rv-on .spec-grid > .rv + .rv,
.rv-on .try-pair > .rv + .rv {
  --rv-d: 0.1s;
}
@media print {
  .rv-on .rv,
  .rv-on .ph-copy > *,
  .rv-on .ph-visual {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ================================================================= phones
   On a 375px screen a card with its icon on a row of its own spends a third
   of its height on the icon, and a page of six of them is two screens of
   mostly air. Below 620px the cards read as rows instead: the mark hangs
   beside the title, the sentence sits under the title, and whatever else a
   card carries (examples, a numbered flow, a link) runs the full width. */
@media (max-width: 620px) {
  .nd,
  .b,
  .case,
  .guide li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    row-gap: 4px;
    padding: 18px 18px 20px;
    border-radius: 20px;
  }
  :is(.nd, .b, .case, .guide li) > * {
    grid-column: 1 / -1;
  }
  /* Qualified by the card, so it outranks the full-width rule above. */
  :is(.nd, .b, .case, .guide li) > :is(.nd-x, .b-ico, .case-ico, .guide-n) {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  :is(.nd, .b, .case, .guide li) > h3,
  :is(.nd, .b, .case, .guide li) > h3 + * {
    grid-column: 2;
  }
  :is(.nd, .b, .case, .guide li) > h3 {
    align-self: center;
    min-height: 34px;
    display: flex;
    align-items: center;
  }
  .b-ico,
  .case-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .b h3,
  .case h3 {
    font-size: 19px;
  }
  .b-lg h3 {
    font-size: 24px;
  }
  .b p,
  .b-lg p,
  .case-when {
    font-size: 15.5px;
  }
  .guide h3 {
    font-size: 17.5px;
  }
  .guide p,
  .nd p {
    font-size: 15px;
  }
  .nd h3 {
    font-size: 18px;
  }
  .case-flow,
  .b-lines {
    margin-top: 10px;
  }

  /* The law's four limits: the number beside what it limits. */
  .stat {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    row-gap: 4px;
    padding: 20px 18px 20px;
    border-radius: 20px;
  }
  .stat::before {
    inset-inline: 18px;
  }
  .stat-n {
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .stat-n b {
    font-size: 44px;
  }
  .stat-n span {
    font-size: 14px;
  }
  .stat > :not(.stat-n) {
    grid-column: 2;
  }
  .stat h3 {
    font-size: 17px;
  }
  .stat p:not(.stat-n) {
    font-size: 14.5px;
  }

  /* The dark panel's padding and the ordered rules' own left their text 159px
     wide on a 375px screen. */
  .panel-deep {
    padding: 28px 20px;
  }
  .ord li {
    gap: 12px;
    padding: 14px;
  }

  /* "Thursday evening": six tall tiles become a wrapped row of chores, and
     the evening handed back stays the one wide tile. */
  .cost-card {
    padding: 18px 16px 16px;
  }
  .cost-card .cost {
    gap: 18px;
  }
  .cost-card .cost-row {
    gap: 10px;
  }
  .cost-card .cost-rail {
    gap: 6px;
  }
  .cost-card .cost-rail > li {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 14.5px;
  }
  .cost-card .cost-rail > .cost-free {
    flex: 1 1 100%;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 17px;
  }
  .cost-card .cost-mark {
    width: 16px;
    height: 16px;
  }

  /* The questions page's hero card: one row and the address, so the
     questions start on the first screen after the heading, not the third. */
  .contact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 14px;
    padding: 18px 18px 16px;
  }
  .contact > * {
    grid-column: 1 / -1;
  }
  .contact-ico {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 14px;
  }
  .contact-t,
  .contact-t + p {
    grid-column: 2;
  }
  .contact-t {
    font-size: 19px;
  }
  .contact-t + p {
    font-size: 15px;
  }
  .contact-btn {
    margin-top: 12px;
  }
  .contact-foot {
    margin-top: 8px;
    font-size: 14px;
  }
}

/* ------------------------------------------------ the five answers, at a glance
   Each answer's row takes its own colour — a soft ground and an edge in the
   mark's colour — and a chip that says what the answer does to the week, so
   the card can be read in two seconds before it is read in full. Only rows
   that carry a chip (the five answers; the submission card has none). */
.spec-rows li:has(> .spec-fx) {
  --r-c: var(--ink-3);
  --r-t: var(--inset);
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'name fx'
    'why why';
  align-items: center;
  row-gap: 6px;
  background: color-mix(in srgb, var(--r-t) 45%, var(--card));
}
.spec-rows li:has(> .spec-fx)::before {
  content: '';
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--r-c);
}
.spec-rows li:has(.lt-want) {
  --r-c: var(--brand);
  --r-t: var(--tint);
}
.spec-rows li:has(.lt-can) {
  --r-c: color-mix(in srgb, var(--brand) 55%, var(--card));
  --r-t: var(--tint);
}
.spec-rows li:has(.lt-not-keen) {
  --r-c: var(--amber);
  --r-t: var(--amber-tint);
}
.spec-rows li:has(.lt-no) {
  --r-c: var(--red);
  --r-t: var(--red-tint);
}
.spec-rows li:has(> .spec-fx) > .spec-name {
  grid-area: name;
}
.spec-rows li:has(> .spec-fx) > .spec-why {
  grid-area: why;
  padding-inline-start: 42px;
}
.spec-fx {
  grid-area: fx;
  justify-self: end;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r-c) 45%, transparent);
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--r-c);
}
.spec-rows li:has(.lt-want) .spec-fx {
  background: var(--brand);
  box-shadow: none;
  color: var(--card);
}
.spec-rows li:has(.lt-can) .spec-fx {
  color: var(--brand-ink);
}
@media (max-width: 620px) {
  .spec-rows li:has(> .spec-fx) > .spec-why {
    padding-inline-start: 0;
  }
  /* The law, you and the person: aligned on a phone, where the stepped edge
     of the wide layout read as a misalignment. */
  .st-you,
  .st-them {
    margin-inline-start: 0;
  }
  .st li {
    gap: 14px;
    padding: 18px;
  }
  .st-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
}

/* The scope hero on a phone: six labels scattered round two circles at 13px
   read as clutter. The week stays the one green thing, and what is not in it
   lines up under it, two by two. */
@media (max-width: 520px) {
  .orbit {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 360px;
    padding-top: 8px;
  }
  .orbit::before,
  .orbit::after {
    display: none;
  }
  .orbit-core {
    position: static;
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: 18px;
    transform: none;
    font-size: 22px;
    padding: 14px 26px;
  }
  .orbit-x {
    position: static;
    padding: 11px 12px;
    font-size: 14.5px;
    text-align: center;
  }
}

/* ------------------------------------------------------------ touch screens
   The menu bar and the section bar blur whatever scrolls under them, which
   a phone's GPU redoes on every frame of every scroll — the most expensive
   thing on the page, for an effect nobody sees at arm's length. On a touch
   screen they are simply the ground, nearly opaque. */
@media (hover: none), (max-width: 720px) {
  .nav,
  .subnav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(239, 243, 241, 0.97);
  }
}