/* ================= shared kit (sliced from programme.py / programme_min.py) ================= */
  .g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  [id] { scroll-margin-top: 80px; }
  /* 01 hero band */
  /* FULL BLEED (v2): the level colour runs to the top edge behind the header and fills the first screen;
     the product bar sits exactly at the fold. */
  .p-hero { border-radius: 0; border: 0; box-shadow: none; margin-top: 0; min-height: calc(100svh - 64px);
            display: flex; align-items: center; padding-block: var(--s-10) var(--s-9); }
  .p-hero > .wrap { width: min(var(--wrap), calc(100% - 48px)); }
  @media (max-width: 860px) { .p-hero > .wrap { width: min(var(--wrap), calc(100% - 40px)); } }   /* R8: the phone gutter matches brand.css .wrap */
  body.hdr-dark .top { position: absolute; left: 0; right: 0; top: 0; z-index: 60; }
  body.hdr-dark .bar .menu > li > a, body.hdr-dark .bar .menu > li > button { color: var(--on-dark); }
  body.hdr-dark .bar .menu > li > a:hover, body.hdr-dark .bar .menu > li > button:hover, body.hdr-dark .bar .menu > li > button[aria-expanded="true"] { background: rgba(255,255,255,.1); }
  body.hdr-dark .ll-logo { color: #F8EFEC; }
  body.hdr-dark .menu-btn { color: var(--on-dark); }
  body.hdr-dark .ll-pause { color: var(--on-dark-2); }
  body.hdr-dark .ll-pause:hover { background: rgba(255,255,255,.1); color: var(--on-dark); }
  body.hdr-dark .bar .apply { background: var(--on-dark); color: #1C1A17; }
  body.hdr-dark .bar .signin { color: var(--on-dark); } body.hdr-dark .bar .signin:hover { background: rgba(255,255,255,.1); }
  body.hdr-dark .bar .apply:hover { background: #fff; }
  body.hdr-dark .bar :focus-visible { outline-color: var(--red-on-dark); }
  .p-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 90% at 85% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
  .p-hero .wrap { position: relative; z-index: 1; align-items: center; }
  .p-intro { grid-column: 1 / 7; }
  .p-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) 14px; font-size: var(--t-small); color: var(--on-dark-2); margin: 0; }
  .p-open { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--accent); }
  .p-open i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .p-hero h1 { font-family: var(--serif-display); font-weight: 400; color: var(--on-dark); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.06; letter-spacing: -0.02em; margin: var(--s-5) 0 0; text-wrap: balance; }
  .p-hero .p-promise { font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.375rem); line-height: 1.45; color: var(--on-dark-2); margin: 40px 0 0; max-width: 26em; text-wrap: pretty; }
  .p-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: 40px; }
/* 02 product bar */
  .p-bar { position: sticky; top: 0; z-index: 40; background: rgba(245,243,238,.94); border-bottom: 1px solid var(--line); }
  @supports (backdrop-filter: blur(1px)) { .p-bar { background: rgba(245,243,238,.8); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } }
  .p-bar .wrap { height: 64px; align-items: center; }
  .p-bar .nm { grid-column: 1 / 5; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.125rem; }
  .p-bar nav { grid-column: 5 / 11; display: flex; gap: var(--s-1); }
  .p-bar nav a { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 10px var(--s-3); border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; }
  .p-bar nav a:hover { color: var(--ink); background: rgba(28,26,23,.05); }
  .p-bar nav a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); border-radius: 0; }
  .p-bar .btn { grid-column: 11 / 13; justify-self: end; }
  .p-bar nav a { white-space: nowrap; }  /* 2.1.3: one line per link; tighter between 961 and 1179px, where five links wrapped to two lines */
  @media (max-width: 1179px) { .p-bar nav a { padding-inline: 10px; } }
  @media (max-width: 1023px) { .p-bar nav a { padding-inline: 8px; } }
/* 01 hero: full bleed, quiet; facts become an at-a-glance strip */
  .p-hero { flex-direction: column; justify-content: center; align-items: stretch; padding-block: 152px 0; }
  .p-hero > .wrap.g12 { flex: 1; align-content: center; }
  .p-intro { grid-column: 1 / 8; }
  .p-hero h1 { font-size: clamp(3.2rem, 7vw, 5.6rem); margin-top: var(--s-5); }
  .p-hero .p-promise { margin-top: var(--s-6); font-size: clamp(1.15rem, 1.7vw, 1.5rem); }
  .glance { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair-dark); }
  .glance-wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 80px auto 0; position: relative; z-index: 1; }
  .glance li { grid-column: span 3; padding: 28px 0 40px; }
  .glance b { display: block; font-family: var(--serif-display); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.05; color: var(--on-dark); }
  .glance span { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: var(--on-dark-2); }
  /* 02 product bar: hidden at first glance; slides in once the hero has scrolled away */
  .p-hero { min-height: 100svh; }
  .p-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 70; transform: translateY(-100%); visibility: hidden;
           transition: transform .35s var(--out), visibility 0s linear .35s; box-shadow: 0 8px 24px -16px rgba(28,26,23,.35); }
  .p-bar.show { transform: none; visibility: visible; transition: transform .35s var(--out), visibility 0s; }
  @media (prefers-reduced-motion: reduce) { .p-bar, .p-bar.show { transition: none; } }
  /* 10 closing: one centred moment on paper (no second dark band before the footer) */
  .p-end { padding-block: var(--s-10) 160px; text-align: center; }
  .p-end h2 { margin: 0 auto; font-family: var(--serif-display); font-weight: 400; font-size: clamp(2.375rem, 4.5vw, 3.375rem); line-height: 1.1; letter-spacing: -0.015em; max-width: 16em; text-wrap: balance; }
  .p-end div { margin-top: 40px; display: grid; justify-items: center; gap: var(--s-4); }
  .p-end p { margin: 0; font-size: var(--t-small); color: var(--ink-3); }
  main:has(> .p-end) + .footer { margin-top: 0; }
  @media (max-width: 960px) { .p-end { padding-block: var(--s-9); } }
  /* ================= v3 cohesion: matches the homepage ================= */
  .p-hero h1 { font-size: clamp(3rem, 6vw, 4.5rem) !important; line-height: 1.04; }          /* 72, same as home */
  .p-hero .p-promise { font-family: var(--sans) !important; font-size: var(--t-lede) !important; line-height: 1.6; color: var(--on-dark-2); margin-top: var(--s-5) !important; max-width: 30em; }
  .p-hero .p-terms { margin: var(--s-3) 0 0; font-size: var(--t-small); font-weight: 500; color: var(--on-dark); max-width: 36em; } .p-hero .p-terms span { white-space: nowrap; }  /* free, the prerequisite and the Cohort 2 dates (facts 1, 5, 8) */
  /* 2.1.3: no dot left hanging at a line end. The text dots between the items collapse (font-size 0, flex); each item draws its own dot
     in a 14px slot to its left, and the slot of the first item on every line falls in the clipped strip left of the text edge */
  .p-hero .p-terms { display: flex; flex-wrap: wrap; font-size: 0; max-width: calc(36 * var(--t-small) + 14px); margin-left: -14px; clip-path: inset(0 0 0 14px); }
  .p-hero .p-terms > span { font-size: var(--t-small); } .p-hero .p-terms > span::before { content: "\00B7"; display: inline-block; width: 14px; text-align: center; }  /* v2.7 (CHANGES.md W5): the items only, never a span inside one (the Cohort 2 deadline) */
  .p-hero .p-ctas { margin-top: 40px; }
  .persona-p h3 { font-family: var(--serif) !important; font-size: 2.125rem !important; line-height: 1.25 !important; }   /* 34: feature level */
  .persona-p p { font-size: var(--t-body) !important; }
  .rhythm li, .next-card .in, .comm-card { padding: var(--s-6) !important; }                         /* one card padding */
  .rhythm h3, .next-card .title, .comm-card h3 { font-family: var(--serif); font-size: 1.5rem !important; line-height: 1.3; }  /* 24: card level */
  .rhythm .s, .next-card .k, .comm-card .k { font-size: var(--t-meta); font-weight: 700; }
  .rhythm p, .next-card p, .comm-card p { font-size: var(--t-small); margin-top: var(--s-2); }
  .weeks { grid-column: auto; border-top: 1px solid var(--line); }
  .weeks details summary.g12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: var(--s-5); align-items: baseline; padding: 28px 0; }
  .weeks .n { grid-column: 1 / 2; font-family: var(--sans); font-size: var(--t-small) !important; font-weight: 700; color: var(--ink-3); }
  .weeks h3 { grid-column: 2 / 9; font-size: 1.5rem !important; }
  .weeks .lab { grid-column: 9 / 12; justify-self: start; background: none; border: 0; padding: 0; font-size: var(--t-small); font-weight: 500; color: var(--ink-2); }
  .weeks summary .chev { grid-column: 12 / 13; justify-self: end; }
  .weeks details p { margin: -12px 0 28px calc((100% - 264px) / 12 + var(--s-5)); }
  .faq-list .cmp-fold { margin-top: var(--s-6); }
  .faq-list .cmp-fold > summary { font-size: 1.25rem; padding: var(--s-5) 0; border-top: 0; }
  .faq-list .cmp { margin-top: var(--s-4); }
  @media (max-width: 960px) {
    .weeks details summary.g12 { grid-template-columns: 40px 1fr 20px !important; }
    .weeks .n { grid-column: 1; } .weeks h3 { grid-column: 2; } .weeks .lab { grid-column: 2; grid-row: 2; } .weeks summary .chev { grid-column: 3; grid-row: 1; }
    .weeks details p { margin-left: var(--s-8); }
  }
  /* ================= v5: Apple anatomy (audience cards + "+" overlays, photo break, scroll gallery, steps beside a photo) ================= */
  .aud { list-style: none; margin: 0; padding: 0; }
  .aud-c { grid-column: span 4; position: relative; border-radius: var(--r-lg); padding: 36px var(--s-6) 88px; min-height: 340px; display: grid; align-content: start; gap: var(--s-4); box-shadow: none; }
  .aud-c .k { font-size: var(--t-meta); font-weight: 700; color: var(--accent); }
  .aud-c h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.3; color: var(--on-dark); text-wrap: balance; }
  .aud-c p { margin: 0; font-size: var(--t-small); color: var(--on-dark-2); }
  .plus { position: absolute; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
          background: rgba(255,255,255,.12); color: var(--on-dark); transition: background .2s, transform .2s var(--out); }
  .plus:hover { background: rgba(255,255,255,.22); } .plus:active { transform: scale(.94); }
  .pf-line { margin: 0 0 var(--s-7); max-width: 18em; font-family: var(--serif-display); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
  .pf-pic { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 9; background: var(--paper-2); }
  .pf-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }
  @media (max-width: 960px) { .pf-pic { aspect-ratio: 4 / 3; } }
  /* photo break, framed (client: no full-bleed photos, no text over faces); same markup as before */
  .pbreak { margin-top: var(--gap); display: flex; flex-direction: column-reverse; color: var(--ink); }
  .pbreak::after { display: none; }
  .pbreak img { position: static; display: block; width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; aspect-ratio: 21 / 9; height: auto; border-radius: var(--r-lg); object-fit: cover; object-position: var(--op-219, 50% 92%); }
  .pbreak .wrap { padding-bottom: var(--s-7); }
  .pbreak p { margin: 0; max-width: 18em; font-family: var(--serif-display); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
  @media (max-width: 960px) { .pbreak img, .pf-pic { aspect-ratio: 4 / 3; } .pbreak img { object-position: var(--op-43, 50% 92%); } }
  /* R8: below 860px brand.css narrows .wrap's gutter to 20px; the glance strip and framed photo follow it so every left edge matches */
  @media (max-width: 860px) { .glance-wrap, .pbreak img { width: min(var(--wrap), calc(100% - 40px)); } }
  /* R12: three facts sit in one row of three on phones, never two plus an orphan */
  @media (max-width: 860px) { .glance[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: var(--s-4); } .glance[data-n="3"] b { font-size: 1.625rem; } }
  .gal-ctl { display: flex; gap: var(--s-3); }
  .wk-gal { list-style: none; margin: 0; display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
            padding: 0 max(var(--s-5), calc((100% - var(--wrap)) / 2)) var(--s-2); scroll-padding-inline: max(24px, calc((100% - var(--wrap)) / 2)); }
  .wk-gal::-webkit-scrollbar { display: none; }
  .wk-c { position: relative; flex: 0 0 min(384px, 78vw); scroll-snap-align: start; min-height: 320px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line);
          padding: 36px var(--s-6) 88px; display: grid; align-content: start; gap: var(--s-3); }
  .wk-c .n { font-size: var(--t-meta); font-weight: 700; color: var(--red); }
  .wk-c h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.3; text-wrap: balance; }
  .wk-c p { margin: 0; font-size: var(--t-small); color: var(--ink-2); } .wk-c p b { font-weight: 600; color: var(--ink); }
  .wk-c .plus { background: rgba(28,26,23,.07); color: var(--ink); } .wk-c .plus:hover { background: rgba(28,26,23,.14); }
  .how { align-items: center; }
  .how-pic { grid-column: 1 / 7; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
  .how-pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op-45, 50% 50%); }
  .how-txt { grid-column: 8 / 13; }
  .how-steps { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .how-steps li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
  .how-steps b { font-size: var(--t-small); font-weight: 700; color: var(--ink-3); padding-top: 6px; }
  .how-steps strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin-bottom: var(--s-1); }
  .how-steps span { color: var(--ink-2); font-size: var(--t-small); }
  .dlg { width: min(560px, calc(100% - 32px)); border: 0; border-radius: 28px; padding: var(--s-7) 40px 40px; background: var(--card); color: var(--ink); box-shadow: 0 40px 80px -24px rgba(28,26,23,.45); }
  .dlg::backdrop { background: rgba(20,14,12,.45); backdrop-filter: blur(6px); }
  .dlg[open] { animation: dlg-in .35s var(--out); }
  @keyframes dlg-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
  .dlg .k { font-size: var(--t-meta); font-weight: 700; color: var(--red); }
  .dlg h3 { margin: var(--s-3) 0 0; font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.25; }
  .dlg p { margin: var(--s-4) 0 0; color: var(--ink-2); line-height: 1.65; }
  .dlg-x { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(28,26,23,.07); display: grid; place-items: center; cursor: pointer; transform: rotate(45deg); color: var(--ink); }
  @media (max-width: 960px) {
    .aud-c { grid-column: 1 / -1; min-height: 0; }
    .how-pic, .how-txt { grid-column: 1 / -1; } .how-pic { aspect-ratio: 4 / 3; } .how-pic img { object-position: var(--op-43, 50% 50%); }
    .pbreak { height: 60svh; }
    .dlg { margin: auto auto 0; border-radius: 28px 28px 0 0; width: 100%; max-width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) { .dlg[open] { animation: none; } }
  /* v4: one idea per section */
  .head-solo { margin-bottom: 40px !important; }
  .head { align-items: baseline !important; }
  .persona-stack { margin-top: 40px !important; }
  .persona-p { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .persona-p h3 { grid-column: 1 / 9 !important; }
  .persona-p p { grid-column: 1 / 9 !important; align-self: start !important; margin-top: var(--s-4) !important; font-size: var(--t-lede) !important; color: var(--ink-2); }
  /* 03 who: a segmented control; one persona at a time; all panels share one grid cell so the height never changes */
  .seg { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border-radius: 999px; background: rgba(28,26,23,.06); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg [role="tab"] { font: 600 var(--t-small) var(--sans); color: var(--ink-2); background: transparent; border: 0; border-radius: 999px; padding: var(--s-3) 22px; min-height: 44px; cursor: pointer; white-space: nowrap; transition: color .2s, background-color .25s var(--out), box-shadow .25s var(--out); }
  .seg [role="tab"]:hover { color: var(--ink); }
  .seg [role="tab"][aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px rgba(28,26,23,.06), 0 2px 8px -2px rgba(28,26,23,.18); }
  .persona-stack { display: grid; margin-top: var(--s-7); }
  .persona-p { column-gap: var(--s-5); grid-area: 1 / 1 / 2 / -1; display: grid; grid-template-columns: subgrid; opacity: 0; transform: translateY(8px); visibility: hidden;
               transition: opacity .45s var(--out), transform .55s var(--out), visibility 0s linear .45s; }
  .persona-p.on { opacity: 1; transform: none; visibility: visible; transition-delay: .12s, .12s, 0s; }
  .persona-p h3 { grid-column: 1 / 7; margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
  .persona-p p { grid-column: 7 / 13; margin: 0; align-self: end; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.6; max-width: 32em; }
  @media (max-width: 640px) { .seg { display: flex; flex-wrap: wrap; border-radius: 22px; } .seg [role="tab"] { flex: 1 1 auto; } }
  @media (max-width: 960px) { .persona-p { grid-template-columns: 1fr; row-gap: 20px; } .persona-p h3, .persona-p p { grid-column: 1 / -1; } }
  @media (prefers-reduced-motion: reduce) { .persona-p, .persona-p.on { transition: none; transform: none; } }
  @media (max-width: 960px) { .persona-p { grid-template-columns: 1fr !important; } .persona-p h3, .persona-p p { grid-column: 1 / -1 !important; } }   /* phone: one column, full width */
  /* 05 week rhythm */
  .rhythm { list-style: none; margin: 0; padding: 0; }
  .rhythm li { grid-column: span 4; position: relative; padding: var(--s-6) 28px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
  .rhythm .s { font-size: var(--t-meta); font-weight: 700; color: var(--red); }
  .rhythm h3 { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; margin: var(--s-2) 0 0; }
  .rhythm p { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--t-small); }
/* 05 week: one line each */
  .rhythm li { padding: 28px; }
  /* 08 faq */
  .faq-side { grid-column: 1 / 5; } .faq-list { grid-column: 5 / 13; }
    .fold summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
  .fold summary::-webkit-details-marker { display: none; }
  .fold summary .chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .25s var(--out); }
  .fold[open] summary .chev { transform: rotate(180deg); }
  .fold p { margin: var(--s-1) 0 var(--s-3); color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }
  .cmp-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 28px 0; border-block: 1px solid var(--line);
                        font-family: var(--serif); font-size: 1.5rem; }
  .cmp-fold > summary::-webkit-details-marker { display: none; }
  .cmp-fold > summary .chev { width: 20px; height: 20px; color: var(--ink-3); transition: transform .25s var(--out); }
  .cmp-fold[open] > summary .chev { transform: rotate(180deg); }
  .cmp-fold[open] > summary { border-bottom-color: transparent; }   /* the opened content brings its own top rule: never two lines stacked */
  .cmp-fold .g12 { margin-top: var(--s-6); }

  .p-bar .nm i { display: none; }  /* no dot before the name */
  .persona-p { column-gap: 24px; }
  .aud { row-gap: 24px; }
  .aud.four .aud-c { grid-column: span 3; }
  .aud-c.short { min-height: 240px; padding-bottom: 36px; }
  .aud-c.short h3 { font-size: 1.375rem; }
  @media (max-width: 960px) { .aud-c.short { min-height: 0; } .aud.four .aud-c { grid-column: 1 / -1; } }  /* the subgrid otherwise drops the 24px gutter (Chrome reports gap: normal = 0) */
  .glance[data-n="3"] li { grid-column: span 4; }
  .glance[data-n="2"] li { grid-column: span 6; }
  /* the same mobile rules as programme.py / programme_min.py */
  @media (max-width: 960px) {
    .g12 { grid-template-columns: 1fr; row-gap: 24px; }
    .g12 > * { grid-column: 1 / -1 !important; }
    .p-hero { padding-block: 112px 64px; min-height: 0; }
    .p-hero { padding-top: 120px; }
    .p-bar nav { display: none; } .p-bar .wrap { display: flex; justify-content: space-between; }
    .glance li { grid-column: span 1 !important; padding: 20px 0; border-bottom: 1px solid var(--hair-dark); }
    .glance { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  }
  /* ---------- type B: the paper hero (information pages) ---------- */
  .b-hero { padding-top: 96px; }
  .b-hero > .wrap { align-items: center; }
  .b-intro { grid-column: 1 / 7; }
  .b-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--t-small); color: var(--ink-2); margin: 0 0 24px; }
  .b-eyebrow b { font-weight: 700; color: var(--red); }
  .b-hero h1 { font-family: var(--serif-display); font-weight: 400; color: var(--ink); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
  .b-hero .lede { margin: 32px 0 0; max-width: 28em; }
  .b-hero .p-ctas { margin-top: 40px; }
  .b-pic { grid-column: 7 / 13; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
  .b-pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op-43, 50% 50%); display: block; }
  /* the at-a-glance strip, ink on paper (same markup as type A) */
  .b-hero .glance-wrap { margin-top: 96px; }
  .b-hero .glance { border-top-color: var(--line); }
  .b-hero .glance li { padding-bottom: 0; }
  .b-hero .glance b { color: var(--ink); }
  .b-hero .glance span { color: var(--ink-2); }
  /* ---------- framed section card (.at): kept for pages that still use its classes ---------- */
  .at { align-items: start; }
  .at-frame { grid-column: 1 / 9; margin: 0; border-radius: 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: none; }   /* one card recipe: 24px, hairline, no shadow */
  .cmp-fold > summary svg { flex: none; }   /* the chevron keeps its size when the summary wraps */
  .at.wide .at-frame { grid-column: 1 / -1; }
  .at-frame iframe { display: block; width: 100%; border: 0; background: transparent; }
  .at-side { grid-column: 9 / 13; position: sticky; top: 104px; display: grid; gap: 16px; justify-items: start; }
  .at-side h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.3; }
  .at-side p { margin: 0; color: var(--ink-2); font-size: var(--t-small); max-width: 22em; }
  .at-side .btn { white-space: nowrap; }
  .at-open { margin-top: 24px; }
  @media (max-width: 960px) { .at-side { position: static; } }
  @media (max-width: 960px) {
    .b-hero { padding-top: 64px; }
    .b-hero > .wrap { row-gap: 48px; }
    .b-hero .glance-wrap { margin-top: 64px; }
    .b-hero .glance li { border-bottom-color: var(--line); padding-bottom: 20px; }
  }

  /* ---------- sign in / sign up ---------- */
  /* min-height keeps the footer below the fold, so a step change never moves anything on screen (CLS) */
  .auth { padding: 64px 0 128px; min-height: calc(100svh - 80px); }
  .auth .g12 { align-items: start; }
  .a-card { grid-column: 4 / 10; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-card); padding: 48px; }
  .signup .a-card { grid-column: 7 / 13; }
  /* one red action per screen: on these pages the header Apply steps back to the outline pill */
  .bar .apply, .sheet .btn-primary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(28,26,23,.45); }
  .bar .apply:hover, .sheet .btn-primary:hover { background: rgba(28,26,23,.03); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .bar .signin[aria-current="page"] { background: rgba(28,26,23,.06); }
  .a-card h1, .a-card h2 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: 2.625rem; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; outline: none; }
  .a-card .sub { margin: 12px 0 0; color: var(--ink-2); text-wrap: pretty; }   /* no one-word last line */
  .a-body { margin-top: 32px; display: grid; gap: 24px; }
  .a-step[hidden] { display: none; }
  .btn-google { width: 100%; justify-content: center; gap: 12px; min-height: 52px; background: var(--card); color: var(--ink); border: 1px solid var(--field-border); }
  .btn-google:hover { border-color: var(--ink-2); }
  .btn-google.is-loading::before { border-color: var(--ink) var(--ink) var(--ink) transparent; }
  .btn-google.is-loading .g { visibility: hidden; }
  .a-card .btn.wide { width: 100%; justify-content: center; min-height: 52px; }
  .or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; color: var(--ink-3); font-size: var(--t-meta); }
  .or::before, .or::after { content: ""; height: 1px; background: var(--line); }
  .pw { position: relative; }
  .pw .input { padding-right: 84px; }
  .pw .show { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 56px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: 600 var(--t-meta) var(--sans); color: var(--ink-2); cursor: pointer; }
  .pw .show:hover { background: rgba(28,26,23,.06); color: var(--ink); }
  .row-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -8px -8px -8px 0; }   /* the link text, not its hit area, sits on the field edge */
  /* quiet text actions keep a 44px hit area (R71) without looking bigger */
  .tlink { background: none; border: 0; padding: 0 8px; min-height: 44px; display: inline-flex; align-items: center; font: 600 var(--t-small) var(--sans); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
  .tlink:hover { text-decoration-thickness: 2px; }
  .tlink.is-loading { opacity: .5; pointer-events: none; }
  .field .check { font-weight: 400; color: var(--ink-2); }
  .field .check a { color: var(--ink); font-weight: 600; }
  .who-chip { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 8px 4px 16px; border-radius: 12px; background: var(--paper-2); font-size: var(--t-small); }
  .who-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .a-alert { margin: 0; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--error) 8%, transparent); color: var(--error); font-size: var(--t-small); font-weight: 500; }
  .a-alert[hidden] { display: none; }
  .auth .a-alert a:not(.btn) { color: inherit; font-weight: 600; }
  /* the other door sits in the first step only, so later steps never move it (and it is ink, never red: R41) */
  .switch { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; color: var(--ink-2); }
  .auth .switch a:not(.btn) { color: var(--ink); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .auth .switch a:not(.btn):hover { text-decoration-thickness: 2px; }
  .done-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); margin-bottom: 24px; }
  /* step meter: three bars, the current and finished ones in ink (red is kept for the action) */
  .meter { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: var(--t-meta); font-weight: 600; color: var(--ink-3); }
  .meter ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
  .meter li { width: 32px; height: 4px; border-radius: 4px; background: var(--line); transition: background-color .3s var(--out); }
  .meter li.on { background: var(--ink); }
  /* grouped list of options (checkbox or radio), like an inset grouped list */
  .opts { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
  .opt { display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 16px; padding: 16px 20px; min-height: 72px; cursor: pointer; border-top: 1px solid var(--line); transition: background-color .15s; }
  .opt:first-child { border-top: 0; }
  .opt:hover { background: rgba(28,26,23,.03); }
  .opt input { position: absolute; opacity: 0; pointer-events: none; }
  .opt .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
  .opt b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.3; }
  .opt small { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--ink-3); text-wrap: pretty; }
  .opt .tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--field-border); display: grid; place-items: center; color: transparent; transition: background-color .15s, border-color .15s; }
  .opt .tick svg { width: 14px; height: 14px; stroke-width: 3; }
  .opt:has(input[type=checkbox]) .tick { border-radius: 7px; }   /* choose any = a square box; choose one keeps the round mark */
  .opt:has(input:checked) .tick { background: var(--red); border-color: var(--red); color: #fff; }
  .opt:has(input:checked) .ic { color: var(--red); }
  .opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
  /* city search: hubs pinned on top, results filter as you type */
  .cq { position: relative; }
  .cq .input { padding-left: 48px; }
  .cq-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); display: grid; }
  .city-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
  .city-list .grp { padding: 12px 20px 6px; font-size: var(--t-meta); font-weight: 600; color: var(--ink-3); background: var(--paper); border-top: 1px solid var(--line); cursor: default; min-height: 0; }
  .city-list .grp:first-child { border-top: 0; }
  .city-list [role=option] { display: grid; grid-template-columns: 40px 1fr auto 24px; align-items: center; gap: 16px; padding: 12px 20px; min-height: 60px; cursor: pointer; border-top: 1px solid var(--line); }
  .city-list [role=option]:hover, .city-list [role=option].act { background: rgba(28,26,23,.04); }
  .city-list [role=option] .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
  .city-list [role=option] b { font-family: var(--serif); font-weight: 400; font-size: 1.125rem; line-height: 1.3; }
  .city-list [role=option] small { display: block; font-size: var(--t-meta); color: var(--ink-3); }
  .city-list .hub .ic { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
  .city-list .badge { font-size: var(--t-meta); font-weight: 700; color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
  .city-list .tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--field-border); display: grid; place-items: center; color: transparent; }
  .city-list .tick svg { width: 14px; height: 14px; stroke-width: 3; }
  .city-list [aria-selected=true] .tick { background: var(--red); border-color: var(--red); color: #fff; }
  .city-note { margin: 0; min-height: 24px; font-size: var(--t-small); color: var(--ink-2); }
  /* password strength: four bars in ink (red stays the action), a quiet checklist that ticks as you type */
  .pw-meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; margin-top: -12px; }
  .pw-meter i { height: 4px; border-radius: 4px; background: var(--line); transition: background-color .25s var(--out); }
  .pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--error); }
  .pw-meter[data-s="2"] i:nth-child(-n+2) { background: var(--warning, #B7791F); }
  .pw-meter[data-s="3"] i:nth-child(-n+3), .pw-meter[data-s="4"] i { background: var(--success); }
  .pw-meter span { min-width: 56px; text-align: right; font-size: var(--t-meta); font-weight: 600; color: var(--ink-3); }
  .pw-rules { list-style: none; margin: -8px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-meta); color: var(--ink-3); }
  .pw-rules li { display: flex; align-items: center; gap: 8px; }
  .pw-rules li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--field-border); flex: none; }
  .pw-rules li.ok { color: var(--ink-2); }
  .pw-rules li.ok::before { border-color: var(--success); background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
  .pw-rules li.no { color: var(--error); }
  @media (prefers-reduced-motion: reduce) { .pw-meter i { transition: none; } }
  .done-mark.mail { background: var(--paper-2); color: var(--ink); }
  .v-note { margin: 0; min-height: 22px; font-size: var(--t-small); color: var(--success); }
  .tlink:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
  .a-actions { display: grid; gap: 12px; }
  .a-actions .back { justify-self: center; }
  /* side panel (signup) */
  .a-side { grid-column: 1 / 6; position: sticky; top: 112px; }
  .a-side h1 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(2.75rem, 4.6vw, 3.375rem); line-height: 1.08; letter-spacing: -0.02em; }
  .a-side .lede { margin: 24px 0 0; max-width: 24em; }
  .a-side .ring-wrap { display: flex; align-items: center; gap: 24px; margin-top: 48px; }
  .a-side .ring-wrap p { margin: 0; font-size: var(--t-small); color: var(--ink-2); max-width: 16em; }
  .a-side .ring-wrap b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--ink); margin-bottom: 4px; }
  .a-gets { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .a-gets li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
  .a-gets svg { color: var(--ink-3); }
  .ring path { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; transition: stroke .5s var(--out); }
  .ring path.on { stroke: var(--red); }
  .ring .n { font-family: var(--serif-display); font-size: 40px; fill: var(--red); }
  .welcome { display: grid; justify-items: center; text-align: center; }
  .welcome .ring { margin: 8px 0 24px; }
  .welcome .a-actions { justify-self: stretch; margin-top: 32px; }   /* stretch, not width:100%: the phone bar bleeds 20px each side */
  @media (prefers-reduced-motion: reduce) { .ring path, .meter li, .opt, .opt .tick, .a-actions { transition: none; } }
  @media (max-width: 960px) {
    .auth { padding: 24px 0 96px; }
    .a-card { border: 0; box-shadow: none; background: transparent; padding: 0; border-radius: 0; }
    .a-card h1, .a-card h2 { font-size: 2.125rem; }
    /* phone: the card's own title is the screen title, like an onboarding screen. The side's H1 stays for screen
       readers (visually hidden), so the page still has its one H1 (v2.7, CHANGES.md F5; axe page-has-heading-one) */
    .a-side { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .a-side > :not(h1) { display: none; }
    /* app-like: the step's primary action sits on the bottom edge, above the home indicator */
    .a-actions { position: sticky; bottom: 0; margin: 0 -20px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
      background: var(--paper); transition: box-shadow .2s; }
    .a-actions.stuck { box-shadow: 0 -1px 0 var(--line); }   /* stuck over the form: a hairline, not a fade over the fields */
    html { scroll-padding-bottom: 120px; }   /* a focused field never hides under the sticky action bar */
  }