/* ================= 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 */
  }

  /* ================= account (signed in) ================= */
  /* one red action per screen: the header Apply steps back to the outline pill (as on sign in and sign up) */
  .av { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-2);
        color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--line); }
  /* every state is in the page; <html data-state> shows one (set before the content parses: no shift) */
  .st { display: none; }
  .acc [hidden] { display: none !important; }
  /* live: nothing shows until the person's own data is in (no flash of the mockup) */
  html[data-state="loading"] .acc, html[data-state="loading"] .dock { visibility: hidden; }
  html[data-state="loading"] .acc nav { visibility: visible; }   /* the page list is not personal: it stays while the data loads */
  html[data-state="received"] .st[data-on~="received"] { display: revert; }
  html[data-state="review"] .st[data-on~="review"] { display: revert; }
  html[data-state="interview"] .st[data-on~="interview"] { display: revert; }
  html[data-state="accepted"] .st[data-on~="accepted"] { display: revert; }
  html[data-state="waitlist"] .st[data-on~="waitlist"] { display: revert; }
  html[data-state="rejected"] .st[data-on~="rejected"] { display: revert; }
  html[data-state="none"] .st[data-on~="none"] { display: revert; }
  html[data-state] .wk.st { display: none; }
  html[data-state="received"] .wk.st[data-on~="received"] { display: grid; }
  html[data-state="review"] .wk.st[data-on~="review"] { display: grid; }
  html[data-state="interview"] .wk.st[data-on~="interview"] { display: grid; }
  html[data-state="accepted"] .wk.st[data-on~="accepted"] { display: grid; }
  html[data-state="waitlist"] .wk.st[data-on~="waitlist"] { display: grid; }
  html[data-state="rejected"] .wk.st[data-on~="rejected"] { display: grid; }
  html[data-state="none"] .wk.st[data-on~="none"] { display: grid; }
  .acc { padding: 64px 0 0; }
  .acc > .wrap { align-items: start; }
  /* side: like the sidebar of the Apple Account page; each row is a page */
  .acc-side { grid-column: 1 / 4; position: sticky; top: 32px; display: grid; gap: 24px; }
  .who { display: flex; align-items: center; gap: 16px; }
  .who .av { width: 56px; height: 56px; font-size: 20px; font-family: var(--serif); font-weight: 400; }
  .who b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.3; }
  .who small { display: block; font-size: var(--t-meta); color: var(--ink-3); }
  .who .role-m, html[data-state="none"] .who .role-a { display: none; } html[data-state="none"] .who .role-m { display: inline; }   /* mock: nothing applied for yet = Member */
  .toc { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .toc a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
  .toc a:not([aria-current]):hover { background: rgba(28,26,23,.04); color: var(--ink); }
  .toc a[aria-current="page"] { color: var(--ink); font-weight: 600; }
  /* the white card behind the current page is its own element (.pill, data-i = the row), drawn under the list */
  .acc-side nav { position: relative; }
  .acc-side .pill { position: absolute; top: 0; left: 0; width: 100%; height: 44px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
  .acc-side .pill[data-i="1"] { translate: 0 calc(100% + 4px); }
  .acc-side .pill[data-i="2"] { translate: 0 calc(200% + 8px); }
  .acc-side .pill[data-i="3"] { translate: 0 calc(300% + 12px); }
  /* phone: the same four pages as a segmented control on top of the page (hidden on desktop); the nav is the track, .pill the card */
  .seg { display: none; }
  .seg ul { position: relative; list-style: none; margin: 0; padding: 2px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .seg a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px; border-radius: 10px; color: var(--ink-2); text-decoration: none;
           font-size: var(--t-meta); font-weight: 600; text-align: center; white-space: nowrap; }
  .seg a[aria-current="page"] { color: var(--ink); }
  .seg .pill { position: absolute; top: 6px; left: 6px; width: calc((100% - 18px) / 4); height: 44px; border-radius: 10px; background: var(--card);
               box-shadow: 0 1px 2px rgba(28,26,23,.08), 0 0 0 1px var(--line); pointer-events: none; }
  .seg .pill[data-i="1"] { translate: calc(100% + 2px) 0; }
  .seg .pill[data-i="2"] { translate: calc(200% + 4px) 0; }
  .seg .pill[data-i="3"] { translate: calc(300% + 6px) 0; }
  /* the account pages switch at once, with no page fade or moving card (owner, v2.7: "just direct switching") */
  @view-transition { navigation: none; }
  .acc-main { grid-column: 5 / 13; min-width: 0; }
  .acc-sec { padding-top: 96px; scroll-margin-top: 24px; }
  .acc-main > section:first-of-type { padding-top: 0; }
  .acc-sec.sub { padding-top: 64px; }
  .acc-sec > h2, .sec-h h2 { margin: 0 0 24px; font-family: var(--serif-display); font-weight: 400; font-size: 2.125rem; line-height: 1.15; letter-spacing: -0.01em; }
  .sec-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
  .sec-h h2 { margin-bottom: 0; }
  .today .eyb { margin: 0 0 8px; font-size: var(--t-small); font-weight: 600; color: var(--ink-3); }
  .acc-main h1 { margin: 0 0 48px; font-family: var(--serif-display); font-weight: 400; font-size: 3.375rem; line-height: 1.08; letter-spacing: -0.02em; }
  /* cards and inset grouped lists */
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-card); padding: 32px; }
  .ct { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.3; text-wrap: balance; }
  .ln { margin: 8px 0 0; color: var(--ink-2); }
  .acc .ln a { color: var(--ink); font-weight: 600; }   /* red is kept for the one action */
  .k { margin: 0 0 8px; font-size: var(--t-meta); font-weight: 700; color: var(--ink-3); }
  .upnext .k { display: flex; justify-content: space-between; align-items: center; color: var(--red); margin-bottom: 16px; }
  .upnext .k svg { color: var(--ink-3); }   /* the icon is not an action: red stays for the one button */
  .next-act { margin-top: 24px; }
  .upnext .is-done .btn, .upnext.is-done .next-act { display: none; }
  .btn-danger { background: var(--error); color: #fff; }
  @media (hover: hover) { .btn-danger:hover { background: color-mix(in srgb, var(--error) 85%, #000); } }
  .btn.wide { width: 100%; justify-content: center; min-height: 52px; }
  /* status tracker: four stops on a line, ink for done and current, the decision in its own status colour */
  .atrack { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .atrack li { position: relative; display: grid; align-content: start; gap: 4px; justify-items: start; padding-right: 8px; }
  .atrack { grid-template-rows: auto auto auto; row-gap: 4px; }   /* subgrid: a two-line label ("Not this time" on a phone) keeps every date on one line */
  .atrack li { grid-row: span 3; grid-template-rows: subgrid; }
  .atrack li::before { content: ""; position: absolute; left: 28px; right: 4px; top: 11px; height: 2px; border-radius: 2px; background: var(--line); }
  .atrack li:last-child::before { display: none; }
  .atrack li.done::before { background: var(--ink); }
  .atrack .mk { position: relative; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--field-border); background: var(--card); margin-bottom: 8px; }
  .atrack .mk svg { width: 14px; height: 14px; }
  .atrack .done .mk { background: var(--ink); box-shadow: none; color: var(--card); }
  .atrack .done .mk svg { stroke-width: 3; }
  .atrack .cur .mk { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
  .atrack .cur .mk svg { width: 20px; height: 20px; }
  .atrack li.ok .mk { background: var(--success); color: #fff; }
  .atrack li.wait .mk { background: var(--warning); color: #fff; }
  .atrack li.wait .mk svg, .atrack li.calm .mk svg { width: 20px; height: 20px; }
  .atrack b { font-size: var(--t-small); font-weight: 600; line-height: 1.35; }
  .atrack .later b { color: var(--ink-3); font-weight: 500; }
  .atrack small { font-size: var(--t-meta); color: var(--ink-3); }
  .say { margin: 32px 0 24px; padding: 16px 20px; border-radius: 16px; background: var(--paper); }
  .say p { margin: 0; color: var(--ink-2); max-width: 36em; }
  .say b { color: var(--ink); font-weight: 600; }
  .say.ok { background: var(--success-bg); } .say.ok b { color: var(--success); }
  .say.wait { background: var(--warning-bg); }
  .say.got { margin: 0 0 24px; }
  .facts { display: flex; gap: 48px; margin: 0 0 24px; }
  .facts div { display: grid; gap: 4px; }
  .facts dt { font-size: var(--t-meta); color: var(--ink-3); font-weight: 600; }
  .facts dd { margin: 0; font-family: var(--serif); font-size: 1.25rem; }
  /* your answers: the apply page's review sheet, read only */
  .rvw { border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin-top: 24px; }
  .rvw section { padding: 16px 24px 24px; border-top: 1px solid var(--line); }
  .rvw section:first-child { border-top: 0; }
  .rvw h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.3; }
  .rvw dl { margin: 8px 0 0; display: grid; gap: 16px; }
  .rvw dt { font-size: var(--t-meta); font-weight: 600; color: var(--ink-3); }
  .rvw dd { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
  .rvw dd.none { color: var(--ink-3); }
  @media (min-width: 961px) {   /* desktop: label left, answer right, so the answers read as one compact sheet */
    .rvw dl { gap: 12px; margin-top: 16px; }
    .rvw dl > div { display: grid; grid-template-columns: 168px 1fr; gap: 24px; align-items: baseline; }
    .rvw dt { font-size: var(--t-small); font-weight: 500; }
    .rvw dd { margin: 0; }
  }
  /* journey: the six weeks, as bars like the apply meter, then the grouped list */
  .wmeter { display: flex; gap: 6px; margin-top: 24px; }
  .wmeter i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
  .wmeter i.on { background: var(--ink); }
  .group { margin: 24px 0 0; padding: 0; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .steps { list-style: none; margin: 0; padding: 0; }
  .group.steps { margin-top: 24px; }
  .steps .row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 16px; min-height: 64px; padding: 8px 20px; position: relative; }
  .steps .row + .row::before { content: ""; position: absolute; left: 60px; right: 0; top: 0; height: 1px; background: var(--line); }
  .steps .mk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); }
  .steps .mk svg { width: 14px; height: 14px; stroke-width: 3; }
  .steps .done .mk { background: var(--ink); color: var(--card); box-shadow: none; }
  .steps .nx .mk { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
  .steps .nx .mk svg { width: 20px; height: 20px; }
  .tx b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.3; }
  .tx small { display: block; font-size: var(--t-meta); color: var(--ink-3); margin-top: 2px; }
  .steps .done .tx b { color: var(--ink-2); }
  .chip { font-size: var(--t-meta); font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); white-space: nowrap; }
  /* rows that lead somewhere (hub, certificate) */
  .hubrow { display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 16px; min-height: 72px; padding: 16px 20px; color: inherit; text-decoration: none; }
  a.hubrow:hover { background: rgba(28,26,23,.03); }
  .hubrow:focus-visible { outline-offset: -2px; border-radius: 16px; }
  .hubrow .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
  .hubrow .ch { color: var(--ink-3); display: grid; }
  .sub-h { margin: 48px 0 16px; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
  .sub-h + .group { margin-top: 0; }
  .acc .wk-main h4 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.3; margin: 0; text-wrap: balance; }
  .acc .wk { padding-block: 24px; }
  .acc .wk-cover { grid-column: 1 / 3; }
  .acc .wk-date { grid-column: 3 / 5; justify-items: start; padding-left: 8px; }
  .acc .wk-main { grid-column: 5 / 11; }
  .acc .wk-main svg { width: 16px; height: 16px; }
  .more { margin: 16px 0 0; }
  .more .tlink { margin-left: -8px; }
  /* account: label / value rows, inset grouped */
  .kv { margin-top: 0; }
  .kv .row { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; align-items: center; min-height: 56px; padding: 12px 20px; position: relative; }
  .kv.wide .row { grid-template-columns: 11em 1fr; }
  .kv .row + .row::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: 1px; background: var(--line); }
  .kv dt { color: var(--ink-3); font-size: var(--t-small); }
  .kv dd { margin: 0; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .kv dd .tlink { margin-right: -8px; }
  .acc-sec > .group:first-of-type, .acc-sec > h2 + .group { margin-top: 0; }
  .rowbtn { display: flex; width: 100%; align-items: center; min-height: 56px; padding: 0 20px; border: 0; background: none; font: 500 var(--t-body) var(--sans); color: var(--ink); cursor: pointer; text-align: left; }
  .rowbtn:hover { background: rgba(28,26,23,.03); }
  .rowbtn:focus-visible { outline-offset: -2px; border-radius: 16px; }
  .group + .group { margin-top: 16px; }
  /* email: one switch row, like Settings */
  .swrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; min-height: 72px; padding: 12px 20px; cursor: pointer; }
  .swrow .tx b { font-family: var(--sans); font-size: var(--t-body); font-weight: 500; }
  .swrow .tx small { font-size: var(--t-small); max-width: 32em; }
  .swrow input { position: absolute; opacity: 0; pointer-events: none; }
  .sw { position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--line); box-shadow: inset 0 0 0 1.5px var(--field-border); transition: background-color .2s var(--out); }
  .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,14,12,.3); transition: transform .2s var(--out); }
  .swrow input:checked + .sw { background: var(--ink); box-shadow: none; }
  .swrow input:checked + .sw::after { transform: translateX(20px); }
  .swrow input:focus-visible + .sw { outline: 2px solid var(--focus); outline-offset: 2px; }
  .swrow input:disabled + .sw { opacity: .5; }
  .acc-sec .a-alert { margin-top: 16px; }
  .quiet-del { margin: 48px 0 0; }
  .quiet-del .tlink { color: var(--error); margin-left: -8px; font-weight: 500; text-decoration: none; }
  .quiet-del .tlink:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .acc-end { height: 1px; }
  /* dialogs: one card, one decision */
  .dlg-a { width: min(480px, calc(100% - 32px)); max-height: calc(100svh - 48px); padding: 32px; border: 0; border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: 0 40px 80px -24px rgba(20,14,12,.45); }
  .dlg-a::backdrop { background: var(--scrim); }
  .dlg-a[open] { animation: dlg-in .3s var(--out); }
  @keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
  .dlg-a .form { gap: 24px; }
  .dlg-a .ct { margin-bottom: 0; }
  .dlg-a .ln { margin: -16px 0 0; }
  .dlg-a .fs { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
  .dlg-a .fs legend { font-size: var(--t-small); font-weight: 600; padding: 0; margin-bottom: 8px; }
  .dlg-a .opt { min-height: 56px; padding: 8px 16px; }
  .dlg-a .opt b { font-size: 1.0625rem; }
  .dlg-a .opt small { margin-top: 0; }
  .dlg-act { display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px; }
  select.input { appearance: auto; }
  /* phone dock (hidden on desktop) */
  .dock { display: none; }
  @media (prefers-reduced-motion: reduce) { .dlg-a[open] { animation: none; } .sw, .sw::after, .dock { transition: none !important; } }
  @media (max-width: 960px) {
    .acc { padding-top: 24px; }
    .acc-side { display: none; }
    .seg { display: block; position: relative; margin: 0 0 24px; padding: 4px; background: var(--paper-2); overflow: visible; }
    .acc-sec { padding-top: 48px; }
    .acc-sec.sub { padding-top: 40px; }
    .acc-main h1 { font-size: 2.125rem; margin-bottom: 24px; }
    .acc-sec > h2, .sec-h h2 { font-size: 1.5rem; margin-bottom: 16px; }
    .sec-h { margin-bottom: 16px; } .sec-h h2 { margin-bottom: 0; }
    .card { padding: 24px 20px; border-radius: 20px; }
    .sub-h { margin-top: 32px; }
    .atrack b { font-size: var(--t-meta); }
    .say { margin: 24px 0 20px; }
    .rvw section { padding: 16px 16px 24px; }
    .acc .wk { grid-template-columns: 72px 1fr; padding-block: 20px; }
    .acc .wk-cover { grid-column: 1; } .acc .wk-main, .acc .wk-go { grid-column: 2; }
    .kv .row, .kv.wide .row { grid-template-columns: 1fr; gap: 2px; }
    .dlg-a { padding: 24px 20px; }
    /* app-like: the one action docks to the bottom edge once the Up next card has gone, and leaves before the footer */
    .dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
            background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 -1px 0 var(--line);
            transform: translateY(110%); transition: transform .35s var(--out); visibility: hidden; }
    .dock.on { transform: none; visibility: visible; }
    html { scroll-padding-bottom: 96px; }
  }
  @media (max-width: 400px) { .dlg-act { flex-direction: column-reverse; } .dlg-act .btn { justify-content: center; } }