/* glass.css: MHF liquid-glass shell, ported from design round 4c.
   Generated by salocin/Team/jobs/2026-09-15-mhf-website-liquid-glass-deploy/tools/build-glass-css.mjs
   from r4c/shared, in cascade order:
   tokens.css sha256 ccb40e3b0f1036785feaef93c77197540b71b2e546366c2224040e9b914c95c5
   site.css sha256 54a583fc26ee126ab8f79c8650c46c26b4fa086aef9d4bd31dccca641a5eeaa9
   guide.css sha256 e5854977b91b9d9119bf4d709a039c38e4b02b0daa15f94bc6df5ae3c5f0eed8
   app.css sha256 9b20b76ad5a6304b2e743672855e97993132599e8504a933eab0c69518fd394b
   pillars.css sha256 bc51ab875069499a76db2c567321691f663d4038548da812992f768be6218ef3
   Generated until 72b90db. From job 2026-09-17-mhf-website-marketer-round, hand-maintained: the generator
   reads design-round sources that job did not change, so regenerating would erase it. Edits go in the
   dated anchor blocks at the end of the file. The background is one token: --bg-image. */

/* tokens.css */
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/plex-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/plex-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/plex-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
:root { --ground:        #f1f1f1; --ink:           #202020; --ink-soft:      #4a4a4a; --hairline:      rgba(32, 32, 32, .16); --blue:          #02478e; --green:         #244f1a; --wine:          #6e022e; --eyebrow-green-bg: #cce8b5; --eyebrow-blue-bg:  #bee7ff; --tag-on-blue:   #b7e1fb; --tag-on-green:  #b6d4a0; --tag-on-wine:   #ffdce2; --tag-grey:      #d1d1d1; --tint-blue:     #e2ecf6; --footer-grey:   #d8d8d8; --r-pill:   999px; --r-card:   20px; --r-glass:  28px; --r-form:   32px; --r-label:  12px; --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-hero-r3: clamp(2.35rem, 7.6vw, 5rem); --fs-hero:    min(max(calc(1.5 * var(--fs-hero-r3)), 7.7vw), 10rem); --fs-h2:      calc(1.3 * clamp(1.6rem, 4.4vw, 3rem)); --fs-h3:      clamp(1rem, 2vw, 1.4rem); --fs-body:    clamp(.875rem, 1.55vw, 1.0625rem); --fs-small:   clamp(.72rem, 1.2vw, .8125rem); --fs-eyebrow: clamp(.72rem, 1.25vw, .9rem); --lh-tight:   1.02; --lh-body:    1.55; --edge:       clamp(12px, 2.2vw, 28px); --gutter:     var(--edge); --pill-h:     clamp(40px, 5.4vh, 54px); --card-pad:   clamp(18px, 2.4vw, 34px); --nav-h:      clamp(52px, 8vh, 68px); --glass-bg:      rgba(255, 255, 255, .58); --glass-blur:    28px; --glass-sat:     1.5; --glass-border:  rgba(255, 255, 255, .62); --glass-shadow:  0 18px 50px rgba(2, 71, 142, .10), 0 2px 6px rgba(32, 32, 32, .04); --scrim:         .46; --logo-opacity:  .72; --bg-image:url('/assets/img/bg-placeholder.webp'); --bg-scale:1.42222; --bg-ratio:640 / 544; }

/* site.css */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-logo { position: absolute; top: 50%; left: 50%; width: calc(min(190vw, 1500px) * var(--bg-scale)); aspect-ratio: var(--bg-ratio); transform: translate(-50%, -50%); background: var(--bg-image) center / 100% 100% no-repeat; opacity: 1; }
.bg-scrim { position: absolute; inset: 0; background: var(--ground); opacity: var(--scrim); }
.nav { position: fixed; z-index: 40; top: clamp(8px, 1.4vh, 16px); left: var(--gutter); right: var(--gutter); height: var(--nav-h); display: flex; align-items: center; gap: clamp(8px, 1.5vw, 28px); padding: 0 clamp(8px, 1vw, 14px) 0 clamp(10px, 1.2vw, 18px); border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.nav-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.nav-logo img { height: clamp(24px, 3.4vh, 38px); width: auto; }
.nav-wordmark { font-size: clamp(.5rem, .95vw, .62rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 420px) {
  .nav-wordmark { display: none; }
}
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.9vw, 34px); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link { appearance: none; background: none; border: 0; padding: 6px 2px; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; color: var(--ink); cursor: pointer; border-radius: 6px; }
.nav-link:hover { opacity: .65; }
.nav-link:focus-visible, .btn:focus-visible, .tab:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav-link[aria-current='true'] { font-weight: 600; }
.nav-link[aria-disabled='true'] { opacity: .38; cursor: not-allowed; }
.nav-link[aria-disabled='true']::after { content: '·'; margin-left: 5px; font-weight: 700; }
.nav-dd { position: relative; }
.nav-dd-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 150px; padding: 8px; display: none; flex-direction: column; gap: 2px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.nav-dd[data-open='true'] .nav-dd-panel { display: flex; }
.nav-dd-panel .nav-link { padding: 7px 12px; text-align: center; }
.nav-caret { display: inline-block; margin-left: 5px; font-size: .7em; }
.nav-primary { display: none; flex: 0 0 auto; align-items: center; gap: clamp(6px, 2vw, 14px); }
.nav-primary .nav-link { padding: 6px 0; }
.nav-toggle { display: none; flex: 0 0 auto; appearance: none; cursor: pointer; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--ink); font-size: 1rem; line-height: 1; }
.nav-cta { flex: 0 0 auto; appearance: none; cursor: pointer; padding: clamp(6px, 1vh, 10px) clamp(11px, 1.5vw, 20px); border-radius: var(--r-pill); border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.nav-cta:hover { background: var(--ink); color: var(--ground); }
@media (max-width: 860px) {
  .nav-toggle { display: grid; place-items: center; }
  .nav-primary { display: flex; }
  .nav-links .nav-link[data-primary='true'] { display: none; }
  .nav-links { position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); overflow: visible; }
  .nav[data-open='false'] .nav-links { display: none; }
  .nav-links .nav-link { padding: 10px 12px; text-align: left; font-size: var(--fs-body); }
  .nav-dd { width: 100%; }
  .nav-dd-panel { position: static; transform: none; box-shadow: none; border: 0; background: transparent; padding: 2px 0 6px 14px; }
  .nav-dd-panel .nav-link { text-align: left; }
  .nav-caret { display: inline-block; transition: transform .18s ease; }
  .nav-dd[data-open='true'] .nav-caret { transform: rotate(180deg); }
}
.deck { position: relative; z-index: 10; height: 100dvh; width: 100%; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.page { min-height: 100dvh; width: 100%; display: grid; place-items: center; padding: calc(var(--nav-h) + clamp(18px, 3vh, 34px)) var(--gutter)
           clamp(58px, 9vh, 82px); }
.glass { position: relative; width: min(1180px, 100%); min-height: calc(100dvh - var(--nav-h) - clamp(76px, 12vh, 116px)); max-height: calc(100dvh - var(--nav-h) - clamp(76px, 12vh, 116px)); display: flex; flex-direction: column; justify-content: safe center; overflow: hidden; padding: clamp(18px, 3.4vh, 46px) clamp(16px, 3vw, 52px); border-radius: var(--r-glass); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); scrollbar-width: thin; }
.glass[data-ground='blue'] { background: var(--blue); border-color: rgba(255,255,255,.22); color: #fff; }
.glass[data-ground='green'] { background: var(--green); border-color: rgba(255,255,255,.22); color: #fff; }
.glass[data-ground='wine'] { background: var(--wine); border-color: rgba(255,255,255,.22); color: #fff; }
.glass[data-ground] .eyebrow { color: var(--ink); }
.eyebrow { display: inline-block; margin: 0 0 clamp(10px, 1.6vh, 20px); padding: .45em 1.15em; border-radius: var(--r-pill); font-size: var(--fs-eyebrow); font-weight: 600; }
.eyebrow[data-tone='green'] { background: var(--eyebrow-green-bg); color: var(--green); }
.eyebrow[data-tone='blue'] { background: var(--eyebrow-blue-bg); color: var(--blue); }
.eyebrow-caps { display: block; margin: 0 0 clamp(8px, 1.2vh, 14px); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.012em; }
p { margin: 0; }
.lede { font-size: var(--fs-body); color: var(--ink-soft); max-width: 62ch; }
.glass[data-ground] .lede, .glass[data-ground] p { color: rgba(255,255,255,.88); }
.glass[data-ground] .news-card p, .glass[data-ground] .news-card .news-title { color: var(--ink); }
.glass[data-ground] .news-card .news-date { color: var(--ink-soft); }
.glass[data-ground] .news-card .news-more { color: var(--ink); }
.center { text-align: center; display: grid; justify-items: center; gap: clamp(10px, 1.8vh, 22px); }
.actions { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.2vw, 14px); align-items: center; justify-content: center; }
.btn { appearance: none; cursor: pointer; border: 1px solid transparent; padding: clamp(9px, 1.5vh, 15px) clamp(16px, 2.2vw, 30px); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.btn[data-style='filled-blue'] { background: var(--blue); color: #fff; }
.btn[data-style='filled-green'] { background: var(--green); color: #fff; }
.btn[data-style='outline-arrow'], .btn[data-style='outline'] { background: transparent; color: inherit; border-color: currentColor; opacity: .92; }
.btn:hover { filter: brightness(1.08); }
.btn-arrow { appearance: none; cursor: pointer; width: clamp(26px, 3.4vh, 42px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 1rem; }
.cards { display: grid; gap: clamp(10px, 1.6vw, 22px); width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: clamp(12px, 2.2vh, 28px); }
.card { display: flex; flex-direction: column; gap: clamp(7px, 1vh, 12px); padding: clamp(14px, 2.2vh, 26px); border-radius: var(--r-card); text-align: left; }
.card-tag { align-self: flex-start; padding: .32em .9em; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; }
.card-body { font-size: var(--fs-small); line-height: 1.5; }
.card-link { margin-top: auto; padding-top: clamp(8px, 1.4vh, 16px); display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: var(--fs-small); font-weight: 500; }
.cards[data-treatment='outline'] .card { border: 1px solid var(--hairline); background: transparent; }
.cards[data-treatment='outline'] .card-tag { background: var(--tag-grey); color: var(--ink); }
.cards[data-treatment='outline'] .card-body { color: var(--ink-soft); }
.cards[data-treatment='filled'] .card { color: #fff; }
.cards[data-treatment='filled'] .card:nth-child(1) { background: var(--blue); }
.cards[data-treatment='filled'] .card:nth-child(2) { background: var(--green); }
.cards[data-treatment='filled'] .card:nth-child(3) { background: var(--wine); }
.cards[data-single='true'] { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
.cards[data-single='true'] .card { padding: clamp(18px, 3vh, 34px); gap: clamp(9px, 1.4vh, 15px); }
.cards[data-single='true'] .card-body { font-size: var(--fs-body); line-height: 1.55; }
.cards[data-single='true'] h3 { font-size: clamp(1.15rem, 2.6vw, 1.6rem); }
.cards[data-treatment='filled'][data-single='true'] .card[data-index='0'] { background: var(--blue); }
.cards[data-treatment='filled'][data-single='true'] .card[data-index='1'] { background: var(--green); }
.cards[data-treatment='filled'][data-single='true'] .card[data-index='2'] { background: var(--wine); }
.cards[data-treatment='filled'][data-single='true'] .card[data-index='0'] .card-tag { background: var(--tag-on-blue); color: var(--blue); }
.cards[data-treatment='filled'][data-single='true'] .card[data-index='1'] .card-tag { background: var(--tag-on-green); color: var(--green); }
.cards[data-treatment='filled'][data-single='true'] .card[data-index='2'] .card-tag { background: var(--tag-on-wine); color: var(--wine); }
.cards[data-treatment='filled'] .card:nth-child(1) .card-tag { background: var(--tag-on-blue); color: var(--blue); }
.cards[data-treatment='filled'] .card:nth-child(2) .card-tag { background: var(--tag-on-green); color: var(--green); }
.cards[data-treatment='filled'] .card:nth-child(3) .card-tag { background: var(--tag-on-wine); color: var(--wine); }
.stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 5vw, 70px); justify-content: center; margin-top: clamp(10px, 2vh, 24px); }
.stat { display: grid; justify-items: center; gap: clamp(6px, 1vh, 12px); }
.digits { display: flex; gap: clamp(4px, .7vw, 9px); }
.digit { display: grid; place-items: center; min-width: clamp(38px, 6.5vh, 74px); padding: clamp(6px, 1.4vh, 16px) clamp(4px, .8vw, 10px); border-radius: var(--r-card); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .5); font-size: clamp(1.7rem, 5vh, 3.4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat[data-colour='blue']  .digit { color: var(--blue); }
.stat[data-colour='green'] .digit { color: var(--green); }
.stat-label { font-size: var(--fs-small); color: var(--ink-soft); }
.strip { display: flex; gap: 8px; width: 100%; margin-top: clamp(10px, 1.8vh, 22px); }
.glass[data-ground] .strip-frame { border-color: rgba(255, 255, 255, .30); background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .78); }
.strip-frame { flex: 1 1 0; min-width: 0; aspect-ratio: 16 / 10; border-radius: var(--r-card); border: 1px solid var(--hairline); background: linear-gradient(135deg, rgba(2,71,142,.10), rgba(36,79,26,.10)); display: grid; place-items: center; font-size: var(--fs-small); color: var(--ink-soft); }
.news-grid { display: grid; gap: clamp(8px, 1.1vw, 14px); width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); margin-top: clamp(12px, 2vh, 26px); }
.news-grid[data-single='true'] { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
.news-grid[data-single='true'] .news-thumb { aspect-ratio: 16 / 9; }
.news-grid[data-single='true'] .news-title { font-size: clamp(1rem, 2.4vw, 1.35rem); line-height: 1.26; }
.news-grid[data-single='true'] .news-date, .news-grid[data-single='true'] .news-more { font-size: var(--fs-small); }
.news-grid[data-single='true'] .news-cat { font-size: var(--fs-small); }
.news-grid[data-single='true'] .news-meta { padding: clamp(14px, 2.2vh, 22px); gap: 9px; }
.news-card { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: #fff; color: var(--ink); }
.news-thumb { aspect-ratio: 16 / 10; background: linear-gradient(135deg, rgba(2,71,142,.16), rgba(110,2,46,.12)); }
.news-meta { display: flex; flex-direction: column; gap: 6px; padding: clamp(9px, 1.4vh, 14px); flex: 1; }
.news-cat { align-self: flex-start; padding: .24em .7em; border-radius: var(--r-pill); font-size: clamp(.6rem, 1vw, .7rem); font-weight: 500; color: #fff; }
.news-cat[data-cat='Schools & parenting'] { background: var(--green); }
.news-cat[data-cat='Research'] { background: var(--blue); }
.news-cat[data-cat='Chatbot safety'] { background: var(--wine); }
.news-cat[data-cat='Wellbeing'] { background: #5a8f4a; }
.news-title { font-size: clamp(.7rem, 1.15vw, .83rem); font-weight: 600; line-height: 1.32; }
.news-date { font-size: clamp(.62rem, 1vw, .72rem); color: var(--ink-soft); }
.news-more { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: clamp(.62rem, 1vw, .72rem); }
.delivery { display: grid; gap: clamp(10px, 1.6vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); width: 100%; margin-top: clamp(10px, 1.8vh, 22px); }
.delivery-card { display: flex; flex-direction: column; gap: clamp(6px, .9vh, 11px); padding: clamp(14px, 2.2vh, 26px); border-radius: var(--r-card); border: 1px solid var(--hairline); text-align: left; }
.delivery-card[data-new='true'] { border-color: rgba(2,71,142,.34); background: rgba(190,231,255,.24); }
.delivery-card .card-tag { background: var(--eyebrow-blue-bg); color: var(--blue); }
.delivery-sub { font-size: var(--fs-small); font-style: italic; color: var(--ink-soft); }
.delivery-card ul { margin: 0; padding-left: 1.15em; font-size: var(--fs-small); color: var(--ink-soft); }
.delivery-card li { margin: .18em 0; }
.tabbar { position: fixed; z-index: 35; left: var(--gutter); right: var(--gutter); bottom: clamp(8px, 1.4vh, 16px); display: none; align-items: stretch; border-radius: var(--r-pill); overflow: hidden; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.tabbar[data-visible='true'] { display: flex; }
.tabbar-inner { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabbar-inner::-webkit-scrollbar { display: none; }
.tab { appearance: none; cursor: pointer; flex: 1 0 auto; padding: clamp(8px, 1.3vh, 14px) clamp(10px, 1.5vw, 20px); border: 0; border-right: 1px solid var(--hairline); background: transparent; color: var(--ink); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.tab:last-child { border-right: 0; }
.tab[aria-selected='true'] { background: var(--blue); color: #fff; font-weight: 600; border-radius: var(--r-pill); }
.section-label { align-self: flex-start; padding: clamp(9px, 1.5vh, 17px) clamp(16px, 2.4vw, 32px); border-radius: var(--r-label); background: var(--blue); color: #fff; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; box-shadow: 0 4px 14px rgba(2,71,142,.22); }
.prose { display: grid; gap: clamp(8px, 1.3vh, 16px); margin-top: clamp(10px, 1.6vh, 20px); }
.prose p { color: var(--ink-soft); max-width: 72ch; }
.subcards { display: grid; gap: clamp(9px, 1.3vw, 16px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: clamp(10px, 1.7vh, 22px); }
.subcard { display: flex; flex-direction: column; gap: 7px; padding: clamp(12px, 2vh, 22px); border-radius: var(--r-card); background: var(--tint-blue); text-align: left; }
.subcard-icon { width: 26px; height: 26px; color: var(--blue); }
.subcard .card-body { color: var(--ink-soft); }
.form-layout { display: grid; gap: clamp(14px, 2.6vw, 44px); grid-template-columns: 1fr; width: 100%; align-items: center; }
@media (min-width: 860px) {
  .form-layout { grid-template-columns: 1fr 1fr; }
}
.form-intro { display: grid; gap: clamp(8px, 1.4vh, 16px); justify-items: start; }
.form-intro > .strip-frame { max-height: min(34vh, 300px); }
.form-rule { width: 96px; height: 3px; border-radius: 2px; }
.form-card { display: grid; gap: clamp(7px, 1.1vh, 13px); padding: clamp(16px, 2.6vh, 34px); border-radius: var(--r-form); color: #fff; }
.form-card[data-colour='blue'] { background: var(--blue); }
.form-card[data-colour='green'] { background: var(--green); }
.field { display: grid; gap: 5px; }
.field label { font-size: var(--fs-small); font-weight: 600; letter-spacing: .09em; }
.field input, .field textarea { width: 100%; padding: clamp(8px, 1.3vh, 13px) clamp(12px, 1.6vw, 18px); border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-size: var(--fs-small); }
.field textarea { border-radius: 18px; resize: vertical; min-height: 3.4em; }
.field ::placeholder { color: rgba(255,255,255,.62); font-style: italic; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.form-submit { justify-self: start; margin-top: 4px; appearance: none; cursor: pointer; border: 0; padding: clamp(9px, 1.4vh, 14px) clamp(20px, 2.6vw, 34px); border-radius: var(--r-pill); background: #fff; font-weight: 600; font-size: var(--fs-small); }
.form-card[data-colour='blue']  .form-submit { color: var(--blue); }
.form-card[data-colour='green'] .form-submit { color: var(--green); }
.newsletter { display: grid; gap: clamp(10px, 1.6vh, 18px); align-items: center; grid-template-columns: 1fr; padding: clamp(16px, 2.6vh, 32px); border-radius: var(--r-card); background: var(--blue); color: #fff; width: 100%; }
@media (min-width: 760px) {
  .newsletter { grid-template-columns: 1.1fr 1fr; }
}
.newsletter h2 { font-size: clamp(1.4rem, 3.4vw, 2.3rem); }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-form input { flex: 1 1 160px; padding: clamp(8px, 1.3vh, 13px) clamp(12px, 1.6vw, 18px); border-radius: var(--r-pill); border: 0; background: #fff; color: var(--ink); font-size: var(--fs-small); }
.newsletter-form button { appearance: none; cursor: pointer; border: 0; padding: clamp(8px, 1.3vh, 13px) clamp(16px, 2.2vw, 28px); border-radius: var(--r-pill); background: #fff; color: var(--blue); font-weight: 600; font-size: var(--fs-small); }
.footer { width: 100%; margin-top: clamp(12px, 2vh, 22px); padding: clamp(14px, 2.2vh, 26px); border-radius: var(--r-card); background: var(--footer-grey); color: var(--ink); }
.footer-top { display: grid; gap: clamp(12px, 2vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.footer-org { font-size: var(--fs-small); font-weight: 600; }
.footer-org span { display: block; font-weight: 400; color: var(--ink-soft); }
.footer-col h3 { font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; }
.footer-col a, .footer-col span { display: block; font-size: var(--fs-small); color: var(--ink-soft); text-decoration: none; margin: 3px 0; }
.footer-social { display: flex; gap: 8px; margin-top: 10px; }
.footer-social span { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; font-size: .62rem; }
.footer-notice { font-size: clamp(.58rem, .95vw, .68rem); color: var(--ink-soft); line-height: 1.45; margin-top: clamp(10px, 1.6vh, 18px); padding-top: clamp(8px, 1.3vh, 14px); border-top: 1px solid var(--hairline); }
.footer-notice b { color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: clamp(.58rem, .95vw, .68rem); color: var(--ink-soft); margin-top: 8px; }
.footer-base div { display: flex; gap: 16px; }
@media (max-width: 520px), (max-height: 560px) {
  .page { padding: calc(var(--nav-h) + 14px) var(--gutter) 52px; }
  .glass { padding: 16px 14px; border-radius: 22px; }
  .form-intro > .strip-frame { max-height: 26vh; }
  .footer-social span { width: 26px; height: 26px; }
  .strip-frame { font-size: var(--fs-small); }
  .delivery-card { padding: 12px 14px; gap: 5px; }
  .subcard { padding: 12px 14px; gap: 5px; }
  .subcards, .delivery, .cards { gap: 8px; }
  .field { gap: 4px; }
  .form-card { gap: 7px; padding: 16px 14px; }
  .footer { padding: 14px; }
  .footer-top { gap: 12px; }
  .footer-notice { margin-top: 10px; padding-top: 8px; }
  .prose { gap: 8px; margin-top: 8px; }
  .center { gap: 10px; }
  .card-body[data-trim='pillar-body'] { display: none; }
  .section-label { padding: 8px 14px; font-size: var(--fs-body); border-radius: 10px; }
  .subcard-icon { width: 20px; height: 20px; }
  .form-intro h1 { font-size: clamp(1.75rem, 8.2vw, 2.35rem); }
  .form-rule { width: 64px; height: 2px; }
  .footer-notice { line-height: 1.34; }
  .footer-base { margin-top: 6px; }
}
@media (max-width: 520px) and (max-height: 720px), (max-height: 430px) {
  :root { --nav-h: 46px; }
  .page { padding: calc(var(--nav-h) + 10px) 12px 44px; }
  .glass { padding: 13px 12px; }
  .footer-top { gap: 9px; }
  .footer-col h3 { margin-bottom: 3px; }
  .footer-col a, .footer-col span { margin: 2px 0; }
  .footer-social { margin-top: 7px; }
  .form-card { gap: 6px; }
  .field input, .field textarea { padding: 7px 12px; }
  .subcards { gap: 7px; }
  .subcard { padding: 10px 12px; }
}
@media (max-height: 700px) {
  .news-grid[data-single='true'] .news-thumb { aspect-ratio: 21 / 9; }
}
@media (max-height: 480px) {
  .news-grid[data-single='true'] .news-thumb { display: none; }
}
@media (max-height: 660px) and (min-width: 521px) {
  .page { padding: calc(var(--nav-h) + 12px) var(--gutter) 46px; }
  .glass { padding: 16px clamp(16px, 3vw, 40px); }
  .news-grid[data-single='true'] .news-meta { padding: 12px; }
  .form-card { gap: 8px; padding: 16px; }
  .field input, .field textarea { padding: 8px 14px; }
  .delivery { margin-top: 8px; }
  .delivery-card { padding: 12px 16px; gap: 5px; }
}
.rotate-overlay { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right))
             env(safe-area-inset-bottom) max(var(--gutter), env(safe-area-inset-left)); background: var(--ground); color: var(--ink); }
  body > :not(.rotate-overlay) { visibility: hidden; }
}
.rotate-icon { color: var(--blue); margin-bottom: 6px; }
.rotate-icon svg { display: block; }
.rotate-phone { transform-box: fill-box; transform-origin: center; animation: rotate-upright 2.4s ease-in-out infinite; }
@keyframes rotate-upright {0%, 25% { transform: rotate(-90deg); } 55%, 100% { transform: rotate(0deg); }}
@media (prefers-reduced-motion: reduce) {
  .rotate-phone { animation: none !important; transform: rotate(-90deg); }
}
.rotate-title { margin: 0; font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-tight); }
.rotate-sub { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.cue { margin-top: clamp(10px, 2vh, 26px); font-size: 1.2rem; opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .deck { scroll-snap-type: none !important; scroll-behavior: auto !important; }
  .page { scroll-snap-align: none !important; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
.bg-logo { transform: translate(-50%, -50%) translateZ(0); }
.glass, .nav, .tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
.deck { scroll-snap-type: y mandatory; }
.page { scroll-snap-align: start; scroll-snap-stop: always; transform: translateZ(0); }
.bg-logo { transform: translate(-50%, -50%) translateZ(0); }
.glass, .nav, .tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
.deck { scroll-snap-type: y mandatory; }
.page { scroll-snap-align: start; scroll-snap-stop: always; transform: translateZ(0); }
.glass:not([data-ground]) { background: none; border-color: transparent; box-shadow: none; border-radius: 0; padding-left: 0; padding-right: 0; }
:root { --sbw: 0px; }
.nav { top: var(--edge); left: var(--edge); right: calc(var(--edge) + var(--sbw)); }
.page { position: relative; padding: calc(var(--edge) + var(--nav-h) + var(--edge)) var(--edge) var(--edge); }
.glass { width: 100%; min-height: calc(100dvh - 3 * var(--edge) - var(--nav-h)); max-height: calc(100dvh - 3 * var(--edge) - var(--nav-h)); }
.glass:not([data-ground]) { padding-top: 0; padding-bottom: 0; border-width: 0; }
.glass[data-ground] { padding: clamp(18px, 3.4vh, 46px) clamp(16px, 3.4vw, 56px); }
#home-hero h1 { text-wrap: balance; letter-spacing: -.03em; }
h2 { text-wrap: balance; }
.btn { height: var(--pill-h); padding-block: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.actions .btn-arrow, .cta-row .btn-arrow { width: var(--pill-h); height: var(--pill-h); flex: 0 0 auto; font-size: 1.05rem; text-decoration: none; }
#home-hero > .cue { position: absolute; left: 50%; bottom: var(--edge); transform: translateX(-50%); margin: 0; line-height: 1; font-size: clamp(1.4rem, 3.4vh, 2rem); opacity: .7; }
.cta-row { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.2vw, 14px); flex-wrap: wrap; }
.inspo { display: grid; align-items: center; justify-content: center; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.2vh, 24px); width: 100%; }
.inspo-figure { display: grid; justify-items: center; text-align: center; gap: 4px; }
.inspo-figure .strip-frame { width: min(300px, 26vw); max-height: none; aspect-ratio: 3 / 4; flex: none; }
.inspo-caption { font-weight: 600; font-size: var(--fs-h3); margin-top: 8px !important; }
.inspo-dates { font-size: var(--fs-body); }
.inspo-text { display: grid; gap: clamp(10px, 1.6vh, 18px); max-width: 600px; }
.inspo-quote { font-weight: 600; font-size: calc(1.2 * var(--fs-h3)); line-height: 1.3; }
.inspo-body { font-size: calc(1.08 * var(--fs-body)); }
.inspo-credit { font-weight: 600; }
@media (min-width: 761px) {
  .inspo { grid-template-columns: auto minmax(0, 600px); gap: clamp(28px, 4vw, 64px); }
}
@media (max-width: 760px) {
  .inspo-figure .strip-frame { width: auto; height: clamp(110px, 21vh, 220px); }
  .inspo-text { text-align: center; justify-items: center; }
  .inspo-caption { font-size: var(--fs-body); margin-top: 4px !important; }
  .inspo-quote { font-size: var(--fs-h3); }
  .inspo-body { font-size: var(--fs-body); }
}
.pillar { --fill: var(--blue); --tag-on: var(--tag-on-blue); position: relative; cursor: pointer; display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); padding: var(--card-pad); border-radius: var(--r-card); border: 1px solid var(--hairline); background: transparent; color: var(--ink); text-align: left; transition: background-color .32s ease, color .32s ease, border-color .32s ease; }
.pillar[data-index='1'] { --fill: var(--green); --tag-on: var(--tag-on-green); }
.pillar[data-index='2'] { --fill: var(--wine); --tag-on: var(--tag-on-wine); }
.pillar .card-tag { padding: .6em 1.15em; line-height: 1; text-box: trim-both cap alphabetic; background: var(--tag-grey); color: var(--ink); transition: inherit; }
.pillar .card-body { color: var(--ink-soft); transition: inherit; }
.pillar .card-link { padding-top: clamp(6px, 1vh, 12px); }
.pillar:focus-visible { outline: 2px solid var(--fill); outline-offset: 3px; }
@media (hover: hover) {
  .pillar:hover { background: var(--fill); border-color: var(--fill); color: #fff; }
}
.pillar[data-active='true'], .pillar:focus-visible { background: var(--fill); border-color: var(--fill); color: #fff; }
@media (hover: hover) {
  .pillar:hover .card-tag { background: var(--tag-on); color: var(--fill); }
  .pillar:hover .card-body { color: rgba(255,255,255,.9); }
}
.pillar[data-active='true'] .card-tag, .pillar:focus-visible .card-tag { background: var(--tag-on); color: var(--fill); }
.pillar[data-active='true'] .card-body, .pillar:focus-visible .card-body { color: rgba(255,255,255,.9); }
@media (max-width: 520px), (max-height: 560px) {
  .pillar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'tag link' 'title title'; align-items: center; gap: 8px 10px; }
  .pillar .card-tag { grid-area: tag; justify-self: start; }
  .pillar h3 { grid-area: title; }
  .pillar .card-link { grid-area: link; margin: 0; padding: 0; }
  .pillar .card-link .btn-arrow { width: 30px; height: 30px; }
}
.digit { font-size: clamp(2.8rem, 11.5vh, 7.2rem); min-width: 0; width: .86em; height: 1.3em; padding: 0; overflow: hidden; position: relative; }
/* H-9: the reels (.digit-window, .digit-reel and their C14 part-B timing) are gone. The
   figure now counts up as text inside each .digit card, so there is nothing here to animate
   and nothing for reduced motion to switch off: glass.js paints the truth at once there. */
.stat-label { font-size: var(--fs-body); }
.news-five { display: grid; gap: clamp(8px, 1vw, 14px); width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(10px, 2vh, 26px) 0; }
.news-five .news-card { text-align: left; }
.news-five .news-thumb { aspect-ratio: 16 / 11; }
.news-five .news-meta { padding: clamp(9px, 1.2vw, 14px); gap: 6px; }
.news-five .news-title { font-size: clamp(.78rem, 1.05vw, .92rem); }
.news-five .news-top { display: contents; }
.news-five .news-title { order: 1; }
.news-five .news-more { order: 2; }
@media (max-height: 819px) {
  .news-five .news-thumb { display: none; }
}
@media (max-height: 660px) and (min-width: 900px) {
  #home-news h2 { font-size: calc(1.1 * clamp(1.6rem, 4.4vw, 3rem)); }
  .news-five .news-title { font-size: .8rem; }
  .news-five .news-meta { padding: 8px 10px; gap: 4px; }
}
@media (max-width: 899px) {
  .news-five { max-width: 640px; margin-inline: auto; }
  .news-five { grid-template-columns: 1fr; gap: 6px; margin-block: 10px; }
  .news-five .news-thumb { display: none; }
  .news-five .news-meta { padding: 8px 12px; gap: 3px; }
  .news-five .news-top { display: flex; align-items: center; gap: 8px; }
  .news-five .news-more { margin: 0 0 0 auto; }
  .news-five .news-more .btn-arrow { width: 22px; height: 22px; font-size: .7rem; }
  .news-five .news-title { font-size: .84rem; line-height: 1.28; }
  .news-five .news-cat, .news-five .news-date, .news-five .news-more { font-size: .68rem; }
}
.glass > .take-action { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: clamp(16px, 3vh, 36px); }
.take-action .center { margin-block: auto; }
.take-action .newsletter { flex: 0 0 auto; }
.site-footer { scroll-snap-align: end; margin: 0 var(--edge); padding: clamp(28px, 4.2vw, 60px) clamp(22px, 4.2vw, 64px) clamp(22px, 3vw, 40px); border-radius: var(--r-glass) var(--r-glass) 0 0; background: var(--footer-grey); }
.site-footer .footer { margin: 0; padding: 0; background: none; border-radius: 0; }
.site-footer .footer-top { gap: clamp(18px, 3vw, 44px); }
.site-footer .footer-col a, .site-footer .footer-col span { margin: 6px 0; }
.site-footer .footer-notice { margin-top: clamp(18px, 3vh, 32px); padding-top: clamp(14px, 2vh, 22px); line-height: 1.55; font-size: clamp(.64rem, 1vw, .74rem); }
.site-footer .footer-base { margin-top: clamp(12px, 2vh, 20px); }
.newsletter { padding: clamp(18px, 3vh, 36px) clamp(18px, 3vw, 40px); }
@media (max-width: 520px) {
  .site-footer .footer-top { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-top > :first-child, .site-footer .footer-col:last-child { grid-column: 1 / -1; }
}
.page-flow { display: block; place-items: normal; min-height: 100dvh; scroll-snap-align: start; scroll-snap-stop: normal; padding-bottom: 0; }
.detail-cap { position: sticky; top: 0; z-index: 30; margin: calc(-1 * (2 * var(--edge) + var(--nav-h))) calc(-1 * var(--edge)) 0; padding: calc(2 * var(--edge) + var(--nav-h)) var(--edge) var(--edge); transition: background-color .2s ease; }
.detail-cap[data-stuck='true'] { background: color-mix(in srgb, var(--ground) 94%, transparent); }
.page-flow .tabbar { position: static; display: flex; left: auto; right: auto; bottom: auto; }
.tabpanel { padding: clamp(18px, 3vh, 36px) 0; min-height: 40dvh; }
.tabpanel[hidden] { display: none; }
.tabpanel .prose p { font-size: calc(1.06 * var(--fs-body)); }
.page-flow .newsletter { margin-top: clamp(18px, 3vh, 40px); }
.page-flow .site-footer { margin: var(--edge) calc(-1 * var(--edge) + var(--edge)) 0; }
.enquire { display: grid; justify-items: center; gap: clamp(14px, 2.4vh, 26px); text-align: center; padding: clamp(12px, 4vh, 48px) 0; }
.forms-deck .form-layout { height: 100%; align-content: center; }
a.nav-link, a.nav-cta, a.btn { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
a.btn[data-style='filled-blue'], a.btn[data-style='filled-green'] { color: #fff; }
.nav-dd-panel a.nav-link { justify-content: center; }
@media (max-width: 860px) {
  .nav-dd-panel a.nav-link { justify-content: flex-start; }
  .nav-links a.nav-link { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar, .pillar .card-tag, .pillar .card-body, .detail-cap { transition: none !important; }
}
.nav-logo { color: var(--ink); text-decoration: none; }
/* dvh for the same reason as --frame-h below: a vh ceiling is measured against
   mobile Safari's large viewport, which is not the page the reader has. */
#home-impact .strip-frame { max-height: 22dvh; }
.form-intro h1 { font-size: var(--fs-hero-r3); }
@media (max-width: 520px) and (max-height: 720px) {
  .news-five { gap: 5px; margin-block: 8px; }
  .news-five .news-meta { padding: 6px 11px; gap: 2px; }
  #home-news .glass, .glass[data-ground] { padding-block: 14px; }
}
@media (max-height: 660px) and (min-width: 521px) {
  #home-hero .center { gap: 10px; }
  #home-hero .lede { line-height: 1.42; max-width: 76ch; }
}
:root { --news-pad: clamp(13px, 1.5vw, 22px); }
#home-news > .glass[data-ground] { padding: clamp(8px, 2.2vh, 30px) clamp(8px, 1.8vw, 30px); }
.news-five .news-meta { padding: var(--news-pad) !important; }
@media (max-width: 899px) {
  .news-five .news-meta { gap: 6px !important; }
}
@media (max-width: 520px) and (max-height: 720px) {
  #home-news > .glass[data-ground] { padding: 6px 8px; }
  .news-five { gap: 4px; margin-block: 6px; }
  #home-news .center { gap: 6px; }
  .news-five .news-meta { gap: 4px !important; }
  .news-five .news-more .btn-arrow { width: 20px; height: 20px; }
}
.site-footer { border-radius: var(--r-glass); margin-bottom: var(--edge); scroll-margin-bottom: var(--edge); }
.page-flow .site-footer { margin-bottom: var(--edge); }

/* guide.css */
.guide-hero .center { gap: clamp(10px, 1.8vh, 20px); }
.guide-hero h1 { font-size: var(--fs-hero); text-wrap: balance; letter-spacing: -.03em; max-width: 14ch; }
.guide-hero .standfirst { font-size: calc(1.12 * var(--fs-body)); color: var(--ink); max-width: 60ch; line-height: 1.5; }
.guide-hero .byline { font-size: var(--fs-small); color: var(--ink-soft); max-width: 70ch; line-height: 1.55; }
.guide-hero .byline a { color: var(--blue); }
@media (max-width: 520px), (max-height: 700px) {
  .guide-hero .byline { font-size: .72rem; line-height: 1.45; }
  .guide-hero .standfirst { font-size: var(--fs-body); }
}
#guide-hero > .cue { position: absolute; left: 50%; bottom: var(--edge); transform: translateX(-50%); margin: 0; line-height: 1; font-size: clamp(1.4rem, 3.4vh, 2rem); opacity: .7; }
.guide { font-size: calc(1.04 * var(--fs-body)); line-height: 1.62; color: var(--ink); padding-top: 0; }
.guide > * { margin-inline: auto; }
.guide :where(p, ul, ol) { margin: 0 0 .9em; }
.guide a { color: var(--blue); text-underline-offset: 2px; }
.guide [id], .guide section, .guide .alert, .guide .toc { scroll-margin-top: calc(2 * var(--edge) + var(--nav-h)); }
.guide .lbl, .guide .kicker, .guide .caption, .guide .toc h2, .guide .alert h2, .guide .when { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.guide > .toc, .guide > .part, .guide > .closing, .guide .alert > *, .guide .stance > * { max-width: 760px; margin-inline: auto; }
.guide .alert, .guide .stance { width: 100%; border-radius: var(--r-glass); color: #fff; padding: clamp(22px, 4vh, 48px) clamp(18px, 3.4vw, 56px); margin: 0 0 var(--edge); }
.guide .alert { background: var(--wine); }
.guide .stance { background: var(--blue); margin-bottom: clamp(28px, 5vh, 60px); }
.guide .alert h2 { color: rgba(255,255,255,.82); margin-bottom: .7em; }
.guide .alert p, .guide .stance p { color: rgba(255,255,255,.92); }
.guide .alert a, .guide .stance a { color: #fff; }
.guide .hotline { display: flex; flex-wrap: wrap; gap: .25em .8em; align-items: baseline; padding: .75em 0; border-top: 1px solid rgba(255,255,255,.22); }
.guide .hotline:last-of-type { border-bottom: 1px solid rgba(255,255,255,.22); margin-bottom: .9em; }
.guide .hotline .num { font-weight: 700; font-size: calc(1.3 * var(--fs-body)); color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.guide .hotline .who { font-weight: 500; }
.guide .hotline .note { color: rgba(255,255,255,.75); font-size: var(--fs-small); }
.guide .stance .lbl { color: rgba(255,255,255,.78); margin-bottom: .6em; }
.guide .stance h2 { font-size: var(--fs-h2); color: #fff; margin-block: 0 .5em; text-wrap: balance; }
.guide .stance .demand { font-size: calc(1.2 * var(--fs-body)); font-weight: 500; line-height: 1.5; color: #fff; }
.guide .stance .then { border-top: 1px solid rgba(255,255,255,.3); padding-top: 1em; margin-top: 1.2em; }
.guide .toc { padding: clamp(18px, 3vh, 32px) 0; margin-bottom: clamp(18px, 3vh, 36px); }
.guide .toc h2 { color: var(--blue); margin-bottom: .8em; }
.guide .toc ol { list-style: none; padding: 0; display: grid; gap: 6px; }
.guide .toc a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-card); color: var(--ink); text-decoration: none; font-weight: 500; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.guide .toc a:hover { border-color: var(--blue); }
.guide .tocnum { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--eyebrow-blue-bg); color: var(--blue); font-size: var(--fs-small); font-weight: 700; }
.guide .part { padding: clamp(24px, 5vh, 56px) 0 clamp(10px, 2vh, 24px); }
.guide .parthead { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(16px, 2.6vh, 28px); }
.guide .badge { display: grid; place-items: center; flex: 0 0 auto; width: clamp(48px, 6vw, 64px); aspect-ratio: 1; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: calc(1.15 * var(--fs-body)); font-variant-numeric: tabular-nums; }
.guide .badge.b-green { background: var(--green); }
.guide .badge.b-maroon { background: var(--wine); }
.guide .badge.b-navy-deep { background: var(--ink); }
.guide .kicker { color: var(--blue); margin: 0 0 .2em; }
.guide .parttitle { font-size: var(--fs-h2); margin: 0; text-wrap: balance; }
.guide h3 { font-size: var(--fs-h3); margin: 1.6em 0 .5em; }
.guide h4 { font-size: calc(1.05 * var(--fs-body)); font-weight: 600; margin: 0 0 .3em; }
.guide .short { padding: clamp(14px, 2.2vh, 22px) clamp(16px, 2.4vw, 26px); border-radius: var(--r-card); background: var(--tint-blue); margin: 0 0 1.4em; border-left: 4px solid var(--blue); }
.guide .short .lbl { color: var(--blue); margin-bottom: .4em; }
.guide .short.risk { background: #f6e7ec; border-left-color: var(--wine); }
.guide .short.risk .lbl { color: var(--wine); }
.guide .short.watch { background: #e5eedf; border-left-color: var(--green); }
.guide .short.watch .lbl { color: var(--green); }
.guide .short > :last-child, .guide .eg > :last-child { margin-bottom: 0; }
.guide .eg { padding: clamp(14px, 2.2vh, 22px) clamp(16px, 2.4vw, 26px); border-radius: var(--r-card); background: rgba(255,255,255,.72); border: 1px solid var(--hairline); margin: .6em 0 1.4em; }
.guide .eg .lbl { color: var(--green); margin-bottom: .5em; }
.guide .who { font-weight: 600; }
.guide em { font-style: italic; }
.guide ul.plain { list-style: none; padding: 0; display: grid; gap: .7em; }
.guide ul.plain > li { position: relative; padding-left: 1.3em; }
.guide ul.plain > li::before { content: ''; position: absolute; left: 0; top: .6em; width: .5em; height: .5em; border-radius: 50%; background: var(--blue); }
.guide ul.plain.g > li::before { background: var(--green); }
.guide ul.plain.m > li::before { background: var(--wine); }
.guide i.ex { display: block; color: var(--ink-soft); margin-top: .15em; }
.guide ol.steps { list-style: none; counter-reset: s; padding: 0; display: grid; gap: .9em; }
.guide ol.steps > li { counter-increment: s; display: flex; gap: .8em; }
.guide ol.steps > li::before { content: counter(s); flex: 0 0 auto; width: 1.8em; height: 1.8em; margin-top: .05em; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; font-size: .85em; }
.guide .tricks { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); }
.guide .trick { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 10px 8px; border-radius: var(--r-card); border: 1px solid rgba(2,71,142,.34); background: rgba(190,231,255,.3); }
.guide .trick .n { font-size: .68rem; font-weight: 600; letter-spacing: .11em; color: var(--ink-soft); }
.guide .trick .t { font-weight: 600; color: var(--blue); line-height: 1.25; }
.guide .trick.flag { border-color: rgba(110,2,46,.4); background: #f6e7ec; }
.guide .trick.flag .t, .guide .trick.flag .n { color: var(--wine); }
.guide .chat { display: grid; gap: 8px; padding: clamp(14px, 2.2vh, 22px); border-radius: var(--r-glass); background: rgba(255,255,255,.66); border: 1px solid var(--hairline); margin: 1.2em 0 1.6em; }
.guide .chat .caption { color: var(--ink-soft); margin: 0 0 .3em; }
.guide .msg { max-width: 86%; padding: 9px 14px; border-radius: 18px; }
.guide .msg .sp { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.guide .msg p { margin: 0; line-height: 1.5; }
.guide .msg.bot { justify-self: start; background: var(--tint-blue); border-bottom-left-radius: 6px; }
.guide .msg.bot .sp { color: var(--blue); }
.guide .msg.child { justify-self: end; background: #fff; border: 1px solid var(--hairline); border-bottom-right-radius: 6px; }
.guide .msg.child .sp { color: var(--ink-soft); }
.guide .chat .note { margin: .4em 0 0; padding: 12px 14px; border-radius: var(--r-card); background: #f6e7ec; }
.guide .chat .note b { display: block; font-size: var(--fs-eyebrow); letter-spacing: .13em; text-transform: uppercase; color: var(--wine); margin-bottom: .3em; }
.guide .moment { padding-left: 16px; border-left: 3px solid var(--blue); margin: 1.4em 0; }
.guide .exline { font-style: italic; color: var(--ink-soft); }
.guide .trap, .guide .keeper { padding: clamp(16px, 2.6vh, 26px) clamp(18px, 2.6vw, 30px); border-radius: var(--r-card); margin: 1.4em 0; }
.guide .trap { background: #f6e7ec; }
.guide .keeper { background: var(--blue); color: #fff; }
.guide .keeper .lbl { color: rgba(255,255,255,.78); margin-bottom: .4em; }
.guide .keeper p { color: #fff; font-size: calc(1.15 * var(--fs-body)); font-weight: 500; line-height: 1.45; margin: 0; }
.guide .closer { font-size: calc(1.1 * var(--fs-body)); margin: 1.4em 0; }
.guide .timeline { display: grid; gap: 8px; margin: 1.2em 0 1.6em; }
.guide .tl { padding: 12px 16px; border-radius: var(--r-card); background: rgba(255,255,255,.7); border-left: 4px solid var(--green); }
.guide .tl.warn { border-left-color: var(--wine); background: #fbf1f4; }
.guide .when { display: block; color: var(--green); margin-bottom: .2em; }
.guide .tl.warn .when { color: var(--wine); }
.guide .said { font-style: italic; margin: .3em 0 0; }
.guide .script { display: grid; gap: 8px; margin: 1.2em 0 1.6em; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .guide .script { grid-template-columns: 1fr 1fr; }
}
.guide .script > div { padding: 14px 16px; border-radius: var(--r-card); }
.guide .script .yes { background: #e5eedf; }
.guide .script .no { background: #f6e7ec; }
.guide .script .yes .lbl { color: var(--green); }
.guide .script .no .lbl { color: var(--wine); }
.guide .script p:last-child { margin-bottom: 0; }
.guide .lane { padding: 16px 20px; border-radius: var(--r-card); margin: 0 0 1.2em; }
.guide .lane.do { background: #e5eedf; }
.guide .lane.dont { background: #f6e7ec; }
.guide .lane h3 { margin-top: 0; font-size: var(--fs-eyebrow); letter-spacing: .13em; text-transform: uppercase; }
.guide .lane.do h3 { color: var(--green); }
.guide .lane.dont h3 { color: var(--wine); }
.guide .sub { color: var(--blue); }
.guide .helpgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: 1.2em; }
.guide .helpcard { padding: 14px 16px; border-radius: var(--r-card); background: rgba(255,255,255,.72); border: 1px solid var(--hairline); }
.guide .helpcard .h { margin: 0 0 .25em; }
.guide .helpcard .n { white-space: nowrap; color: var(--blue); margin-left: .3em; font-variant-numeric: tabular-nums; }
.guide .helpcard .d { color: var(--ink-soft); margin: 0; overflow-wrap: anywhere; }
.guide details { border-top: 1px solid var(--hairline); }
.guide details:last-of-type { border-bottom: 1px solid var(--hairline); margin-bottom: 1em; }
.guide summary { list-style: none; cursor: pointer; position: relative; padding: 14px 44px 14px 0; font-weight: 600; color: var(--ink); }
.guide summary::-webkit-details-marker { display: none; }
.guide summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-weight: 500; line-height: 1; }
.guide details[open] > summary::after { content: '–'; }
.guide summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.guide .dbody { padding: 0 0 1.2em; }
.guide .dbody > :last-child { margin-bottom: 0; }
.guide .srcs { font-size: var(--fs-small); }
.guide .srcs ul { list-style: none; padding: 0; display: grid; gap: .6em; }
.guide .srcs li { position: relative; padding-left: 1.2em; overflow-wrap: anywhere; }
.guide .srcs li::before { content: ''; position: absolute; left: 0; top: .6em; width: .45em; height: .45em; border-radius: 50%; background: var(--hairline); }
.guide .backtop { font-weight: 600; }
.guide .closing { font-size: var(--fs-small); color: var(--ink-soft); border-top: 1px solid var(--hairline); padding: 1.2em 0 clamp(18px, 3vh, 36px); margin-top: 1.4em; }
.guide .closing .fine { font-size: .92em; }
.news-page-head { max-width: 900px; margin: 0 auto; padding: clamp(18px, 4vh, 48px) 0 clamp(18px, 3vh, 34px); text-align: center; display: grid; justify-items: center; gap: clamp(10px, 1.8vh, 20px); }
.news-stories { display: grid; gap: var(--edge); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-story { border-radius: var(--r-glass); overflow: hidden; background: #fff; display: flex; flex-direction: column; color: var(--ink); }
.news-story:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; }
.news-story .news-thumb { aspect-ratio: 16 / 9; }
.news-story:first-child .news-thumb { aspect-ratio: auto; min-height: 280px; height: 100%; }
.news-story .news-meta { padding: clamp(16px, 2.6vh, 30px); gap: 10px; display: flex; flex-direction: column; flex: 1; }
.news-story .news-cat { font-size: var(--fs-small); }
.news-story .news-title { font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.25; font-weight: 600; margin: 0; }
.news-story:first-child .news-title { font-size: clamp(1.3rem, 2.8vw, 2.1rem); }
.news-story .news-date { font-size: var(--fs-small); color: var(--ink-soft); }
.news-story .news-more { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 10px; font-size: var(--fs-small); }
@media (max-width: 760px) {
  .news-stories { grid-template-columns: 1fr; }
  .news-story:first-child { grid-template-columns: 1fr; }
  .news-story:first-child .news-thumb { min-height: 0; aspect-ratio: 16 / 9; }
}
.nav-link[aria-current='page'] { font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .guide *, .guide *::before, .guide *::after { transition: none !important; }
}
.news-page-head { max-width: none; }
.news-page-head h1 { text-wrap: balance; }
.news-stories .news-story:not(:first-child) .news-thumb { aspect-ratio: 16 / 7; }
@media (max-height: 660px) and (min-width: 521px) {
  .guide-hero .center { gap: 8px; }
  .guide-hero .standfirst { line-height: 1.4; }
}
.join-section { padding-bottom: var(--edge); }
.join-layout { display: grid; gap: var(--edge); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .join-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.join-intro { padding: clamp(8px, 2vh, 24px) 0; }
.join-intro h3 { font-size: var(--fs-h2); margin: 0 0 .4em; letter-spacing: -.022em; }
.join-intro p { color: var(--ink-soft); max-width: 52ch; }
.join-intro .opt-list { margin: 1em 0 0; padding-left: 1.2em; display: grid; gap: .45em; color: var(--ink); }
.join-form.form-card { display: block; padding: var(--card-pad); border-radius: var(--r-form); }
.join-form h2 { font-size: var(--fs-h2); margin: 0 0 .2em; color: #fff; }
.join-form h3 { font-size: var(--fs-h3); margin: 1.2em 0 .6em; color: #fff; }
.join-form .jf-sub { color: rgba(255,255,255,.85); margin: 0 0 1em; }
.jf-grid { display: grid; gap: 10px 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .jf-grid { grid-template-columns: 1fr 1fr; }
  .jf-grid .field--full { grid-column: 1 / -1; }
}
.jf-survey { display: grid; gap: 10px; }
.join-form .field label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-small); color: #fff; }
.join-form .opt-note { font-weight: 400; opacity: .78; }
.join-form select { width: 100%; appearance: none; padding: clamp(8px, 1.3vh, 13px) 40px clamp(8px, 1.3vh, 13px) clamp(12px, 1.6vw, 18px); border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.5); color: #fff; font-size: var(--fs-small); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; }
.join-form select option { color: var(--ink); }
.join-form input[type='file'] { width: 100%; font-size: var(--fs-small); color: rgba(255,255,255,.9); }
.join-form input[type='file']::file-selector-button { margin-right: 12px; padding: 8px 16px; border-radius: var(--r-pill); border: 0; background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; }
.jf-pledge { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin: 1.2em 0 0; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.12); }
.jf-pledge input { width: 22px; height: 22px; margin-top: 2px; accent-color: #fff; }
.jf-pledge label p { margin: 0 0 .5em; font-weight: 600; color: #fff; }
.pledge-list { margin: 0; padding-left: 1.1em; display: grid; gap: .35em; color: rgba(255,255,255,.9); font-size: var(--fs-small); }
.join-form .btn-submit { margin-top: 1.2em; height: var(--pill-h); padding: 0 28px; border: 0; border-radius: var(--r-pill); background: #fff; font-weight: 600; font-size: var(--fs-small); cursor: pointer; }
.join-form[data-colour='blue'] .btn-submit { color: var(--blue); }
.join-form[data-colour='green'] .btn-submit { color: var(--green); }
.join-form [hidden] { display: none; }
@media (max-width: 520px), (max-height: 560px) {
  .form-card { padding: 15px !important; }
}
@media (max-width: 860px) {
  .nav-links .nav-dd[data-primary='true'] { display: none; }
  .nav-primary { gap: clamp(10px, 3vw, 16px); }
  .nav-primary .nav-dd { position: relative; width: auto; }
  .nav-primary .nav-dd > .nav-link { padding: 6px 0; font-size: var(--fs-small); display: inline-flex; align-items: center; }
  .nav-primary .nav-dd-panel { position: absolute; top: calc(100% + 14px); left: -12px; transform: none; min-width: 190px; display: none; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
  .nav-primary .nav-dd[data-open='true'] .nav-dd-panel { display: flex; }
  .nav-primary .nav-dd-panel .nav-link { padding: 10px 12px; font-size: var(--fs-body); justify-content: flex-start; }
}
.gate { gap: clamp(20px, 4.5vh, 56px); width: 100%; }
.gate-q { font-size: var(--fs-hero); letter-spacing: -.035em; line-height: .98; text-wrap: balance; max-width: 12ch; }
.gate-choices { display: grid; gap: var(--edge); grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(980px, 100%); }
.gate-choice { display: block; padding: 7px; border-radius: 34px; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.6); opacity: 0; transform: translateY(26px); transition: transform .9s cubic-bezier(.32,.72,0,1), opacity .7s cubic-bezier(.32,.72,0,1); }
.gate-choice:nth-child(2) { transition-delay: .09s; }
.page[data-seen='true'] .gate-choice, .gate[data-seen='true'] .gate-choice { opacity: 1; transform: none; }
.gate-core { position: relative; display: grid; justify-items: start; gap: 10px; text-align: left; padding: clamp(20px, 3.4vw, 40px); border-radius: 27px; background: rgba(255,255,255,.78); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 24px 60px -30px rgba(2,71,142,.35); transition: background-color .5s cubic-bezier(.32,.72,0,1), color .5s cubic-bezier(.32,.72,0,1); }
.gate-glyph { width: clamp(40px, 5vw, 60px); color: var(--blue); transition: color .5s cubic-bezier(.32,.72,0,1); }
.gate-choice[data-tone='green'] .gate-glyph { color: var(--green); }
.gate-label { font-size: clamp(1.8rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.gate-forms { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--ink-soft); transition: color .5s cubic-bezier(.32,.72,0,1); }
.gate-go { position: absolute; top: clamp(16px, 2.6vw, 30px); right: clamp(16px, 2.6vw, 30px); width: var(--pill-h); height: var(--pill-h); border-radius: 50%; display: grid; place-items: center; background: rgba(2,71,142,.08); color: var(--blue); font-size: 1.1rem; transition: transform .6s cubic-bezier(.34,1.56,.64,1), background-color .5s, color .5s; }
.gate-choice:hover .gate-core, .gate-choice:focus-visible .gate-core { background: var(--blue); color: #fff; }
.gate-choice[data-tone='green']:hover .gate-core, .gate-choice[data-tone='green']:focus-visible .gate-core { background: var(--green); }
.gate-choice:hover .gate-glyph, .gate-choice:hover .gate-forms, .gate-choice:focus-visible .gate-glyph, .gate-choice:focus-visible .gate-forms { color: rgba(255,255,255,.88); }
.gate-choice:hover .gate-go, .gate-choice:focus-visible .gate-go { background: #fff; color: var(--ink); transform: translate(3px, -3px) scale(1.06); }
.gate-choice:active { transform: scale(.985); }
.gate-choice:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (max-width: 640px) {
  .gate-choices { grid-template-columns: 1fr; }
  .gate-core { padding: 18px 20px; gap: 6px; }
  .gate-glyph { width: 34px; }
  .gate-label { font-size: 2rem; }
}
@media (max-width: 520px) and (max-height: 720px) {
  .gate { gap: 14px; }
  .gate-q { font-size: calc(1.2 * var(--fs-hero-r3)); }
  .gate-core { padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-choice { opacity: 1; transform: none; transition: none; }
  .gate-core, .gate-go, .gate-glyph, .gate-forms { transition: none; }
}
@media (max-height: 660px) and (min-width: 521px) {
  .gate { gap: 16px; }
  .gate-q { font-size: calc(1.15 * var(--fs-hero-r3)); }
  .gate-core { padding: 18px 26px; gap: 6px; }
  .gate-glyph { width: 36px; }
}

/* app.css */
:root { --spring: cubic-bezier(.32, .72, 0, 1); --pop: cubic-bezier(.34, 1.56, .64, 1); --dev-h: clamp(300px, 62vh, 620px); }
.app-split { width: 100%; height: 100%; display: grid; align-items: center; gap: clamp(20px, 5vw, 96px); grid-template-columns: minmax(0, 1.05fr) auto; }
.app-split[data-flip='true'] { grid-template-columns: auto minmax(0, 1fr); }
.app-split[data-flip='true'] .app-words { order: 2; }
.app-words { display: grid; gap: clamp(12px, 2vh, 22px); justify-items: start; text-align: left; max-width: 640px; }
.app-words h1 { font-size: var(--fs-hero); letter-spacing: -.035em; line-height: .96; margin: 0; }
.app-words .app-lead { font-size: calc(1.18 * var(--fs-body)); line-height: 1.5; color: var(--ink); max-width: 34ch; margin: 0; }
.app-words h2 { font-size: var(--fs-h2); letter-spacing: -.025em; margin: 0; }
.device { --r: calc(var(--dev-h) * .135); position: relative; height: var(--dev-h); aspect-ratio: 9 / 19.2; padding: calc(var(--dev-h) * .018); border-radius: var(--r); background: linear-gradient(145deg, #eef0f3, #c9ced6 45%, #f4f5f7 70%, #b9bfc8); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 40px 80px -30px rgba(2,71,142,.35), 0 18px 40px -20px rgba(32,32,32,.25); transform: translateY(24px) rotate(var(--tilt, 0deg)); opacity: 0; transition: transform 1.1s var(--spring), opacity .9s var(--spring); }
.device-glass { position: relative; height: 100%; border-radius: calc(var(--r) - var(--dev-h) * .018); padding: calc(var(--dev-h) * .012); background: #0d0f12; }
.device-screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--r) - var(--dev-h) * .03); background: #FBF9F5; font-size: calc(var(--dev-h) * .026); color: var(--ink); }
.device-screen::before { content: ''; position: absolute; z-index: 5; top: 1.6%; left: 50%; transform: translateX(-50%); width: 30%; height: 3.4%; border-radius: 999px; background: #0d0f12; }
.page[data-seen='true'] .device { transform: translateY(0) rotate(var(--tilt, 0deg)); opacity: 1; }
.state { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .55s var(--spring), transform .7s var(--spring); pointer-events: none; }
.state[data-on='true'] { opacity: 1; transform: none; }
.wall { position: absolute; inset: 0; background: #FBF9F5; overflow: hidden; }
.wall::before { content: ''; position: absolute; inset: -20%; background: var(--art) center / 120% no-repeat; filter: blur(18px) saturate(1.2); opacity: .55; }
.wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,249,245,.1), rgba(251,249,245,.55)); }
.home { position: absolute; inset: 0; display: grid; place-items: center; }
.app-icon { display: grid; justify-items: center; gap: .5em; transform: scale(.4); opacity: 0; transition: transform .9s var(--pop) .35s, opacity .4s var(--spring) .35s; }
.state[data-on='true'] .app-icon, .page[data-seen='true'] .hero-device .app-icon { transform: none; opacity: 1; }
.app-icon .tile { position: relative; width: 5.6em; aspect-ratio: 1; border-radius: 23%; background: #FBF9F5 var(--icon) center / 88% no-repeat; box-shadow: 0 .4em 1.2em rgba(2,71,142,.22), 0 0 0 1px rgba(32,32,32,.06); }
.app-icon .tile::after { content: ''; position: absolute; top: -.35em; right: -.35em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 .18em #FBF9F5; transform: scale(0); transition: transform .6s var(--pop) 1.1s; }
.page[data-seen='true'] .app-icon .tile::after { transform: scale(1); }
.app-icon .name { font-size: 1.05em; font-weight: 600; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.tap-ring { position: absolute; inset: -18%; border-radius: 30%; border: .18em solid var(--blue); opacity: 0; }
.state[data-on='true'] .tap-ring { animation: tap 1.8s var(--spring) .8s infinite; }
@keyframes tap {0% { transform: scale(.7); opacity: .8; } 70%, 100% { transform: scale(1.25); opacity: 0; }}
.page-skel { position: absolute; inset: 12% 8% 16%; display: grid; align-content: start; gap: .7em; }
.page-skel .mark { width: 38%; aspect-ratio: 1; background: var(--icon) center / contain no-repeat; margin: 1em auto 1.4em; }
.skel { height: .7em; border-radius: 999px; background: rgba(32,32,32,.1); }
.skel.w80 { width: 80%; }
.skel.w60 { width: 60%; }
.skel.w90 { width: 90%; }
.bar-top { position: absolute; top: 6.5%; left: 6%; right: 6%; height: 7%; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; gap: .5em; font-size: .92em; color: var(--ink-soft); }
.bar-top .kebab { position: absolute; right: .9em; font-weight: 700; color: var(--ink); letter-spacing: -.1em; }
.bar-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 11%; background: rgba(255,255,255,.94); border-top: 1px solid rgba(32,32,32,.08); display: flex; align-items: center; justify-content: space-around; }
.glyph { width: 1.8em; height: 1.8em; color: var(--ink-soft); }
.glyph.hot { color: var(--blue); }
.hot-pulse { position: relative; }
.state[data-on='true'] .hot-pulse::after { content: ''; position: absolute; inset: -.6em; border-radius: 50%; border: .15em solid var(--blue); animation: tap 1.8s var(--spring) .5s infinite; }
.sheet { position: absolute; left: 3%; right: 3%; bottom: 2%; padding: 1em; border-radius: 1.6em; background: rgba(246,246,248,.97); box-shadow: 0 -1em 3em rgba(0,0,0,.12); transform: translateY(40%); transition: transform .8s var(--spring); }
.state[data-on='true'] .sheet { transform: none; }
.menu { position: absolute; top: 14%; right: 5%; width: 66%; padding: .6em; border-radius: 1em; background: #fff; box-shadow: 0 1em 3em rgba(0,0,0,.18); transform-origin: top right; transform: scale(.8); opacity: 0; transition: transform .7s var(--pop), opacity .35s var(--spring); }
.state[data-on='true'] .menu { transform: none; opacity: 1; }
.row { display: flex; align-items: center; gap: .7em; padding: .75em .8em; border-radius: .8em; font-size: 1em; }
.row + .row { margin-top: .25em; }
.row .skel { flex: 1; height: .6em; }
.row.live { background: var(--tint-blue); color: var(--blue); font-weight: 600; }
.row .glyph { width: 1.5em; height: 1.5em; }
.page-switch { position: absolute; left: 8%; right: 8%; top: 44%; padding: 1em 1.1em; border-radius: 1.2em; background: #fff; box-shadow: 0 .6em 2em rgba(2,71,142,.12); display: flex; align-items: center; justify-content: space-between; }
.mini-toggle { width: 3.4em; height: 2em; border-radius: 999px; background: var(--tag-grey); position: relative; transition: background-color .4s var(--spring) .5s; }
.mini-toggle::after { content: ''; position: absolute; top: .2em; left: .2em; width: 1.6em; height: 1.6em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .6s var(--pop) .5s; }
.state[data-on='true'] .mini-toggle { background: var(--green); }
.state[data-on='true'] .mini-toggle::after { transform: translateX(1.4em); }
.banner { position: absolute; top: 12%; left: 5%; right: 5%; padding: .9em; border-radius: 1.3em; background: rgba(255,255,255,.88); box-shadow: 0 .8em 2.4em rgba(0,0,0,.14); display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: center; transform: translateY(-160%); transition: transform .9s var(--pop); }
.banner .tile { width: 2.8em; aspect-ratio: 1; border-radius: 24%; background: #FBF9F5 var(--icon) center / 88% no-repeat; }
.banner b { display: block; font-size: .95em; margin-bottom: .35em; }
.banner .skel + .skel { margin-top: .35em; }
.notif-device[data-banner='true'] .banner { transform: none; }
.lock-time { position: absolute; top: 30%; left: 0; right: 0; display: grid; justify-items: center; gap: .4em; color: var(--ink); }
.lock-time .big { width: 46%; height: 2.8em; border-radius: .6em; background: rgba(32,32,32,.08); }
.app-card .app-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: clamp(6px, 1.2vh, 12px); max-width: 520px; }
.app-steps li { counter-increment: s; position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: clamp(9px, 1.4vh, 14px) clamp(12px, 1.6vw, 18px); border-radius: 18px; cursor: pointer; background: rgba(255,255,255,.38); border: 1px solid rgba(255,255,255,.55); font-size: calc(1.04 * var(--fs-body)); line-height: 1.42; color: var(--ink-soft); transition: background-color .5s var(--spring), color .5s var(--spring), transform .6s var(--spring), box-shadow .6s var(--spring); }
.app-steps li::before { content: counter(s); display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; font-weight: 700; font-size: .9em; background: rgba(2,71,142,.1); color: var(--blue); transition: background-color .5s var(--spring), color .5s var(--spring), transform .6s var(--pop); }
.app-steps li[data-on='true'] { background: #fff; color: var(--ink); transform: translateX(6px); box-shadow: 0 12px 30px -16px rgba(2,71,142,.45); }
.app-steps li[data-on='true']::before { background: var(--blue); color: #fff; transform: scale(1.08); }
.app-steps li:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.app-split[data-flip='true'] .app-steps li[data-on='true'] { transform: translateX(-6px); }
.app-card { display: grid; gap: clamp(10px, 1.8vh, 20px); justify-items: start; }
.app-card .app-hint { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--tint-blue); font-size: var(--fs-small); max-width: 520px; }
.notif-stage { display: grid; gap: clamp(14px, 2.4vh, 26px); justify-items: start; }
.notif-stage .notif-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.notif-stage .toggle { appearance: none; border: 0; cursor: pointer; position: relative; flex: 0 0 auto; width: clamp(92px, 11vw, 132px); height: clamp(52px, 6.2vw, 74px); border-radius: 999px; background: var(--tag-grey); transition: background-color .5s var(--spring); box-shadow: inset 0 2px 6px rgba(0,0,0,.12); }
.notif-stage .toggle::after { content: ''; position: absolute; top: 6%; left: 5%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.22); transition: transform .7s var(--pop); }
.notif-stage .toggle[aria-checked='true'] { background: var(--green); }
.notif-stage .toggle[aria-checked='true']::after { transform: translateX(118%); }
.notif-stage .toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.notif-stage .notif-status { font-size: calc(1.1 * var(--fs-body)); color: var(--ink); }
.notif-stage .btn-ghost { height: var(--pill-h); padding: 0 26px; border-radius: var(--r-pill); border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: var(--fs-small); font-weight: 500; cursor: pointer; transition: transform .4s var(--spring), background-color .4s var(--spring), color .4s var(--spring); }
.notif-stage .btn-ghost:hover { background: var(--ink); color: var(--ground); }
.notif-stage .btn-ghost:active { transform: scale(.98); }
.app-words > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--spring), transform 1s var(--spring); }
.page[data-seen='true'] .app-words > * { opacity: 1; transform: none; }
.page[data-seen='true'] .app-words > :nth-child(2) { transition-delay: .08s; }
.page[data-seen='true'] .app-words > :nth-child(3) { transition-delay: .16s; }
.page[data-seen='true'] .app-words > :nth-child(4) { transition-delay: .24s; }
.page[data-seen='true'] .app-words > :nth-child(n+5) { transition-delay: .32s; }
@media (max-width: 860px) {
  :root { --dev-h: clamp(170px, 30vh, 300px); }
  .app-split, .app-split[data-flip='true'] { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: clamp(14px, 2.6vh, 28px); }
  .app-split[data-flip='true'] .app-words { order: 0; }
  .app-split .device { order: -1; }
  .app-words { justify-items: center; text-align: center; }
  .app-words .app-lead { max-width: 38ch; }
  .app-card { justify-items: center; }
  .app-steps li { text-align: left; }
  .app-steps li[data-on='true'], .app-split[data-flip='true'] .app-steps li[data-on='true'] { transform: none; }
  .notif-stage { justify-items: center; }
  .notif-stage .notif-row { justify-content: center; }
}
@media (max-width: 860px) and (max-height: 720px) {
  #app-ios .device, #app-android .device { display: none; }
  #app-hero .device { --dev-h: clamp(150px, 27vh, 220px); }
  #app-notifications .device { --dev-h: clamp(140px, 24vh, 200px); }
  .app-steps li { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .device, .app-words > *, .state, .app-icon, .app-icon .tile::after, .sheet, .menu, .mini-toggle, .mini-toggle::after, .banner, .app-steps li, .app-steps li::before, .notif-stage .toggle::after { transition: none !important; animation: none !important; }
  .device, .app-words > * { opacity: 1 !important; transform: rotate(var(--tilt, 0deg)) !important; }
  .app-words > * { transform: none !important; }
  .app-icon { opacity: 1 !important; transform: none !important; }
  .tap-ring, .hot-pulse::after { display: none !important; }
}
#app-hero > .glass, #app-ios > .glass, #app-android > .glass, #app-notifications > .glass { overflow: visible; }
.app-split { max-width: 1180px; margin-inline: auto; justify-content: center; }
@media (min-width: 861px) {
  .app-split .device { margin-inline: clamp(12px, 3vw, 48px); }
}
.wall::before { filter: blur(7px) saturate(1.15); opacity: .8; inset: -8%; background-size: 135%; }
.wall::after { background: linear-gradient(180deg, rgba(251,249,245,.15), rgba(251,249,245,.62)); }
.app-icon .tile { width: 7.2em; }
.app-icon .name { font-size: 1.25em; }
.page-skel .mark { background-color: #FBF9F5; border-radius: 22%; width: 34%; box-shadow: 0 .3em 1em rgba(2,71,142,.15); background-size: 88%; }
@media (min-width: 861px) {
  #app-hero .app-words h1 { white-space: nowrap; }
}
.bar-top { padding: 0 2.2em; }
#app-end { min-height: 0; }
.row.live { white-space: nowrap; font-size: .9em; }
.menu { width: 84%; right: 3%; }
.sheet { left: 2.5%; right: 2.5%; }

/* pillars.css */
:root { --spring: cubic-bezier(.32, .72, 0, 1); --pop: cubic-bezier(.34, 1.56, .64, 1); }
.pillar a.card-link { color: inherit; text-decoration: none; border-radius: 999px; }
.pillar a.card-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.pillar a.card-link:hover .btn-arrow { transform: translate(2px, -2px); }
.pillar a.card-link .btn-arrow { transition: transform .5s var(--pop); }
.pillar-page { --fill: var(--blue); --tint: var(--tag-on-blue); }
.pillar-page[data-pillar='2'] { --fill: var(--green); --tint: var(--tag-on-green); }
.pillar-page[data-pillar='3'] { --fill: var(--wine); --tint: var(--tag-on-wine); }
.pillar-hero { position: relative; overflow: hidden; min-height: calc(100dvh - 3 * var(--edge) - var(--nav-h)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(16px, 4vw, 64px); padding: clamp(24px, 5vh, 72px) clamp(20px, 5vw, 88px); border-radius: var(--r-glass); background: var(--fill); color: #fff; margin-bottom: var(--edge); }
.pillar-hero-words { display: grid; gap: clamp(14px, 2.4vh, 26px); justify-items: start; position: relative; z-index: 2; }
.pillar-tag.card-tag { font-size: var(--fs-body); padding: .6em 1.2em; line-height: 1; text-box: trim-both cap alphabetic; background: var(--tint); color: var(--fill); }
.pillar-title { font-size: var(--fs-hero); letter-spacing: -.035em; line-height: .98; text-wrap: balance; margin: 0; color: #fff; }
.pillar-brush { position: relative; justify-self: center; width: 100%; max-width: 560px; aspect-ratio: 1.3; }
.pillar-brush::before { content: ''; position: absolute; inset: 0; background: var(--tint); -webkit-mask: var(--brush) center / contain no-repeat; mask: var(--brush) center / contain no-repeat; opacity: .95; }
.pillar-page[data-pillar='1'] .pillar-brush::before { transform: rotate(-8deg) scale(1.08); }
.pillar-page[data-pillar='2'] .pillar-brush::before { transform: rotate(6deg); }
.pillar-page[data-pillar='3'] .pillar-brush::before { transform: rotate(-4deg) scale(1.1); }
.pillar-brush-wipe { position: absolute; inset: -6% -60% -6% -6%; background: var(--fill); transform: translateX(0); transition: transform 1.5s var(--spring) .15s; }
.pillar-hero[data-seen='true'] .pillar-brush-wipe { transform: translateX(120%); }
:where(html.js) .pillar-hero-words > * { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--spring), transform 1s var(--spring); }
.pillar-hero[data-seen='true'] .pillar-hero-words > * { opacity: 1; transform: none; }
.pillar-hero[data-seen='true'] .pillar-hero-words > :nth-child(2) { transition-delay: .1s; }
.pillar-hero .cue { position: absolute; left: 50%; bottom: var(--edge); transform: translateX(-50%); margin: 0; line-height: 1; font-size: clamp(1.4rem, 3.4vh, 2rem); opacity: .75; color: #fff; }
.pillar-section { padding: clamp(28px, 6vh, 80px) 0; }
:where(html.js) .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--spring), transform 1.1s var(--spring); }
.reveal[data-in='true'] { opacity: 1; transform: none; }
.pillar-prose { max-width: 1000px; margin: 0 auto; display: grid; gap: clamp(14px, 2vw, 22px); }
.pillar-prose > p:first-child { font-size: clamp(1.35rem, 2.9vw, 2.35rem); line-height: 1.28; letter-spacing: -.015em; font-weight: 500; color: var(--ink); max-width: 30ch; margin: 0 auto clamp(8px, 2vh, 24px); text-align: center; text-wrap: balance; }
.pillar-prose.p1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pillar-prose.p1 > p:first-child { grid-column: 1 / -1; }
.pillar-prose > p:has(> :is(strong, b):first-child) { position: relative; margin: 0; padding: var(--card-pad) var(--card-pad) var(--card-pad) calc(var(--card-pad) + 44px); border-radius: var(--r-card); background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 24px 50px -34px rgba(2,71,142,.45); font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
.pillar-prose > p:has(> :is(strong, b):first-child)::before { content: ''; position: absolute; left: var(--card-pad); top: calc(var(--card-pad) + 2px); width: 30px; height: 24px; background: var(--fill); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.pillar-prose > p:has(> :is(strong, b):first-child) > :is(strong, b):first-child { display: block; font-size: var(--fs-h3); color: var(--ink); margin-bottom: .35em; letter-spacing: -.01em; }
.pillar-prose.p2, .pillar-prose.p3 { gap: 0; }
.pillar-list-sec:has(> .pillar-list:empty) { display: none; }
.pillar-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; }
.pillar-list.p2 { display: grid; gap: var(--edge); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar-list.p2 li { position: relative; display: grid; align-content: end; min-height: clamp(120px, 18vh, 190px); padding: var(--card-pad); border-radius: var(--r-card); overflow: hidden; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.8); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; color: var(--ink); transition: transform .6s var(--spring), background-color .5s var(--spring), color .5s var(--spring); }
.pillar-list.p2 li::before { content: ''; position: absolute; top: var(--card-pad); left: var(--card-pad); width: 46px; height: 46px; background: var(--fill); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; transition: background-color .5s var(--spring); }
@media (hover: hover) {
  .pillar-list.p2 li:hover { background: var(--fill); color: #fff; transform: translateY(-4px); }
  .pillar-list.p2 li:hover::before { background: var(--tint); }
}
.reveal[data-in='true'] .pillar-list.p2 li { animation: rise .9s var(--spring) both; }
.reveal[data-in='true'] .pillar-list.p2 li:nth-child(2) { animation-delay: .06s; }
.reveal[data-in='true'] .pillar-list.p2 li:nth-child(3) { animation-delay: .12s; }
.reveal[data-in='true'] .pillar-list.p2 li:nth-child(4) { animation-delay: .18s; }
.reveal[data-in='true'] .pillar-list.p2 li:nth-child(5) { animation-delay: .24s; }
.reveal[data-in='true'] .pillar-list.p2 li:nth-child(6) { animation-delay: .30s; }
@keyframes rise {from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; }}
.pillar-list.p3 { counter-reset: step; display: grid; gap: var(--edge); grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.pillar-list.p3::before { content: ''; position: absolute; top: 30px; left: 8%; right: 8%; height: 2px; background: var(--fill); opacity: .35; transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--spring) .2s; }
.pillar-list-sec[data-in='true'] .pillar-list.p3::before { transform: scaleX(1); }
.pillar-list.p3 li { counter-increment: step; position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); }
.pillar-list.p3 li::before { content: counter(step); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--fill); color: #fff; font-weight: 700; font-size: 1.3rem; position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--ground), 0 18px 34px -16px rgba(110,2,46,.55); }
.pillar-photos { margin: 0 auto; padding: clamp(24px, 5vh, 64px) 0; max-width: 1180px; display: grid; justify-items: center; gap: 18px; }
.pillar-photo-stack { position: relative; width: 100%; aspect-ratio: 2.3; }
.pillar-photo { position: absolute; width: 46%; height: auto; aspect-ratio: 1600 / 1060; object-fit: cover; border-radius: 18px; border: 8px solid #fff; background: #fff; box-shadow: 0 30px 60px -30px rgba(32,32,32,.45); transition: transform 1.2s var(--spring); }
.pillar-photo[data-i='0'] { left: 0; top: 8%; transform: rotate(-4deg); z-index: 2; }
.pillar-photo[data-i='1'] { left: 27%; top: 0; transform: rotate(2.5deg); z-index: 3; }
.pillar-photo[data-i='2'] { left: 54%; top: 12%; transform: rotate(-2deg); z-index: 1; }
.pillar-photo[data-i='3'] { right: 0; top: 30%; transform: rotate(4deg); z-index: 4; width: 40%; }
:where(html.js) .pillar-photos:not([data-in='true']) .pillar-photo { transform: translateY(40px) rotate(0deg); }
.pillar-credit { font-size: var(--fs-small); color: var(--ink-soft); letter-spacing: .02em; }
.pillar-pager { display: grid; justify-items: center; gap: clamp(12px, 2vh, 20px); padding: clamp(28px, 6vh, 80px) 0; text-align: center; }
.pillar-pager-heading { font-size: var(--fs-h2); margin: 0; text-wrap: balance; }
.pillar-pager-cards { display: grid; gap: var(--edge); grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: clamp(6px, 1.4vh, 16px); }
.pillar-pager-card { --c: var(--blue); --t: var(--tag-on-blue); position: relative; display: grid; justify-items: start; align-content: start; gap: 12px; text-align: left; padding: var(--card-pad); border-radius: var(--r-card); min-height: clamp(130px, 18vh, 190px); background: transparent; border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; transition: background-color .5s var(--spring), color .5s var(--spring), border-color .5s var(--spring), transform .6s var(--spring); }
.pillar-pager-card[data-index='1'] { --c: var(--green); --t: var(--tag-on-green); }
.pillar-pager-card[data-index='2'] { --c: var(--wine); --t: var(--tag-on-wine); }
.pillar-pager-card .card-tag { padding: .55em 1.1em; line-height: 1; text-box: trim-both cap alphabetic; background: var(--tag-grey); color: var(--ink); }
.pillar-pager-title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.pillar-pager-card .btn-arrow { position: absolute; right: var(--card-pad); bottom: var(--card-pad); width: 36px; height: 36px; transition: transform .5s var(--pop); }
.pillar-pager-card[aria-current='page'], a.pillar-pager-card:hover, a.pillar-pager-card:focus-visible { background: var(--c); border-color: var(--c); color: #fff; }
.pillar-pager-card[aria-current='page'] .card-tag, a.pillar-pager-card:hover .card-tag, a.pillar-pager-card:focus-visible .card-tag { background: var(--t); color: var(--c); }
a.pillar-pager-card:hover { transform: translateY(-4px); }
a.pillar-pager-card:hover .btn-arrow { transform: translate(3px, -3px); }
a.pillar-pager-card:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
@media (max-width: 860px) {
  .pillar-hero { grid-template-columns: 1fr; align-content: center; justify-items: center; text-align: center; padding: 28px 20px 64px; }
  .pillar-hero-words { justify-items: center; }
  .pillar-brush { order: -1; max-width: 300px; }
  .pillar-prose.p1 { grid-template-columns: 1fr; }
  .pillar-list.p2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar-list.p3 { grid-template-columns: 1fr; gap: 22px; }
  .pillar-list.p3::before { top: 30px; bottom: 30px; left: 29px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(0); }
  .pillar-list-sec[data-in='true'] .pillar-list.p3::before { transform: scaleY(1); }
  .pillar-list.p3 li { grid-template-columns: 60px 1fr; justify-items: start; align-items: center; text-align: left; }
  .pillar-photo-stack { aspect-ratio: .95; }
  .pillar-photo { width: 72%; }
  .pillar-photo[data-i='0'] { left: 0; top: 0; }
  .pillar-photo[data-i='1'] { left: 26%; top: 18%; }
  .pillar-photo[data-i='2'] { left: 2%; top: 44%; }
  .pillar-photo[data-i='3'] { left: auto; right: 0; top: 62%; width: 66%; }
  .pillar-pager-cards { grid-template-columns: 1fr; }
  .pillar-pager-card { min-height: 0; padding-right: calc(var(--card-pad) + 44px); }
}
@media (max-width: 520px) {
  .pillar-list.p2 { grid-template-columns: 1fr; }
  .pillar-list.p2 li { min-height: 0; align-content: center; padding-left: calc(var(--card-pad) + 58px); }
  .pillar-list.p2 li::before { top: 50%; transform: translateY(-50%); }
  .pillar-prose > p:has(> :is(strong, b):first-child) { padding-left: var(--card-pad); padding-top: calc(var(--card-pad) + 34px); }
  .pillar-prose > p:has(> :is(strong, b):first-child)::before { top: var(--card-pad); }
  .pillar-brush { max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-brush-wipe { display: none; }
  :where(html.js) .pillar-hero-words > *, :where(html.js) .reveal, .pillar-photo, .pillar-list.p3::before, .pillar-pager-card, .pillar-list.p2 li { transition: none !important; animation: none !important; }
  :where(html.js) .pillar-hero-words > *, :where(html.js) .reveal { opacity: 1 !important; transform: none !important; }
  .pillar-list.p3::before { transform: none !important; }
  .pillars-photos .pillar-photo { transform: none; }
}
@media (min-width: 861px) {
  .pillar-prose.p1 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .pillar-prose.p1 > p:has(> :is(strong, b):first-child):nth-child(3) { grid-row: span 2; }
  .pillar-prose.p1 > p:has(> :is(strong, b):first-child):nth-child(5) { grid-column: 1 / -1; }
}
.pillar-list.p3 li { align-content: start; }
.pillar-list.p2 li::before { width: 34px; height: 34px; opacity: .9; }
@media (max-width: 520px) {
  .pillar-list.p2 li { padding-left: calc(var(--card-pad) + 46px); }
}
@media (max-width: 860px) {
  .pillar-list.p3 { padding-left: 10px; }
  .pillar-list.p3::before { left: 39px; }
  .pillar-list.p3 li { font-size: calc(1.06 * var(--fs-body)); }
}
/* port: the pillar pages' brush marks, the site's own strokes as CSS masks (were inline styles set by the prototype's renderer) */
.pillar-page[data-pillar='1'] { --brush: url('/assets/img/strokes/bullet-blue.svg'); --mark: url('/assets/img/strokes/bullet-blue.svg'); }
.pillar-page[data-pillar='2'] { --brush: url('/assets/img/strokes/bullet-green.svg'); --mark: url('/assets/img/strokes/bullet-green.svg'); }
.pillar-page[data-pillar='3'] { --brush: url('/assets/img/strokes/bullet-purple.svg'); --mark: url('/assets/img/strokes/bullet-purple.svg'); }

/* port: app device wallpaper and icon, set inline by the prototype's renderer */
.device-screen { --art: url('/assets/img/logo-artwork.png'); --icon: url('/assets/img/icon-512.png'); }
/* port: the live form wiring the prototype removed (engineering.md §4.5, §5.4). An empty status takes no space, so fit is unchanged. */
.footer-notice strong { color: var(--ink); }
/* port: the live skip link (styles.css .skip-link, brand blue as the glass token) */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--blue); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
.h-captcha:empty { display: none; }
/* port: RULING pillars-desktop-overflow (a): above 520px the pillars page is a flow page (as Program detail and the guide); phones keep the H-1 box */
@media (min-width: 521px) { .page[data-flow-above='520'] { display: block; place-items: normal; min-height: 100dvh; scroll-snap-stop: normal; } .page[data-flow-above='520'] > .glass { max-height: none; min-height: 0; overflow: visible; } }
a.card-link { color: inherit; text-decoration: none; }
/* port: editable Impact numbers (engineering.md §4.3 C15 findings (2)): the field shows the number without JS and is visually hidden once glass.js has built the reel from it */
.stat-value { font-size: clamp(2.8rem, 11.5vh, 7.2rem); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat[data-colour='blue'] .stat-value { color: var(--blue); }
.stat[data-colour='green'] .stat-value { color: var(--green); }
/* C14 / P-3 (RULING stats-wrong-until-rolled). THE CLIP BINDS TO THE ROLLED
   STATE, NOT TO THE PRESENCE OF JAVASCRIPT, and the difference is the whole fix.
   This rule used to be `html.js .stat-value`, which hid the true figure the
   instant glass.js added the js class - while the true figure only APPEARS once
   the observer sets data-rolled and the reels transition to --to. Between those
   two events every reel sits parked at its --from digit, so the section read
   "08564" where the numbers are 714 and 15. Any path where the observer never
   fires left that on screen permanently, with a clean console: it degraded to
   misinformation rather than to nothing, which is worse than a blank.
   Both elements are placed in the SAME grid cell so the swap cannot move the
   layout, and the reels are invisible until rolled so a parked --from digit is
   never the thing being read. The reels still animate: visibility is flipped in
   the same frame the transform changes, and a visibility:hidden element is laid
   out, so the transition runs and is seen from its first frame.
   No-JS keeps the field with no clip at all, which is unchanged. */
html.js .stat-value, html.js .digits { grid-area: 1 / 1; }
html.js .stats:not([data-rolled='true']) .digits { visibility: hidden; }
html.js .stats[data-rolled='true'] .stat-value { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.digits:empty { display: none; }
.digit-static { width: auto; min-width: .35em; line-height: 1.3; }
/* port: Mathias's photographs in the Portrait and Impact frames (rulings 2026-09-15 20:2xZ): lazy <img>, cover, no distortion */
.strip-frame[data-photo] { position: relative; overflow: hidden; }
.strip-frame > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* port: the home news box shows live posts (D4): the fifth topic 4c never drew, and headlines clamped to two lines so real lengths keep the box fitting (R7) */
.news-cat[data-cat='Policy & regulation'] { background: #2b0047; }
#home-news .news-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#home-news .news-more a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
/* port: RULING pillar-text-extent (20:11:08Z): live pillar lists in the 4c card; an empty list (p1) takes no space; H-1 trims list with body on phones */
.pillar .card-list { margin: 0; padding-left: 1.1em; display: grid; gap: .3em; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); transition: inherit; }
.pillar .card-list:empty { display: none; }
.pillar .card-body > p { margin: 0 0 .5em; }
.pillar .card-body > p:last-child { margin-bottom: 0; }
@media (hover: hover) { .pillar:hover .card-list { color: rgba(255,255,255,.9); } }
.pillar[data-active='true'] .card-list, .pillar:focus-visible .card-list { color: rgba(255,255,255,.9); }
@media (max-width: 520px), (max-height: 560px) { .card-list[data-trim='pillar-body'] { display: none; } }
/* port: visually hidden, for a heading kept for structure that the design does not draw (join h1, D-B14) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* port: the live app page's state classes (app.html inline style), and a platform-hidden install card hides its whole snap page */
.app-hidden { display: none !important; }
.toggle[disabled] { opacity: .5; cursor: not-allowed; }
.page:has(#ios-card.app-hidden), .page:has(#android-card.app-hidden) { display: none; }
.form-status:empty { display: none; }
.form-status { margin: 10px 0 0; font-size: var(--fs-small); }
.newsletter-form { position: relative; }
.newsletter-form .form-status { flex: 1 0 100%; margin: 0; color: #fff; }
/* port: the live newsletter consent line (RULING D-B20 keep) */
.newsletter-form .nb-fine { flex: 1 0 100%; margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,.85); }
.newsletter-form .nb-fine a { color: #fff; text-decoration: underline; }
.form-card .form-status, .join-form .form-status { color: #fff; }


/* ── marketer round W-1 ── */
/* Row 2: the menu text one step larger (desktop list, and the phone bar). Row 3: the About Us caret is drawn in
   CSS at a larger size and centred on the label by the button's own flex line; the glyph stays in the DOM,
   aria-hidden, and the ≤860px open state still rotates the box. */
@media (min-width: 861px) { .nav-links .nav-link { font-size: calc(1.1 * var(--fs-small)); } }
.nav-primary .nav-link { font-size: calc(1.1 * var(--fs-small)); }
.nav-dd > button.nav-link { display: inline-flex; align-items: center; }
.nav-caret { position: relative; font-size: inherit; width: .95em; height: .95em; margin-left: .35em; overflow: hidden; color: transparent; line-height: 0; flex: none; }
.nav-caret::before { content: ''; position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: translate(-50%, -70%) rotate(45deg); }
/* Row 1 (C9, RULING O-6 "Full logo, smaller"): the original lockup, mark and name in one image, replaces mark and
   wordmark at every width. Desktop and tablet keep the old mark's height; on phones the nav's own spacing is
   tightened first (no text shrinks) and the lockup takes the largest height that leaves the bar clear. */
.nav-logo img { width: auto; }
@media (max-width: 520px) {
  .nav { gap: 6px; padding-inline: 8px 6px; }
  .nav-primary { gap: 8px; }
  .nav-cta { padding-inline: 10px; }
  .nav-logo img { height: var(--logo-h-phone, 24px); }
}
/* ── end W-1 ── */


/* ── marketer round W-2 ── */
/* Row 5: the sub-sentence on two lines at desktop widths. Row 6: both hero actions and their text larger,
   scoped to the hero, since --pill-h is shared by every page. */
@media (min-width: 1100px) { #home-hero .lede { max-width: 100ch; text-wrap: balance; } }
#home-hero .actions { --pill-h: calc(1.18 * clamp(40px, 5.4vh, 54px)); }
#home-hero .actions .btn { font-size: calc(1.16 * var(--fs-small)); }
/* Row 4 (C9): the supplied gradient on the first section only, rendered from the brand SVG. The middle stop paints
   until the image arrives; index.html preloads it. It sits on a layer behind the hero's content and fades out over its
   last 18%, because a hard bottom edge showed as a seam against the page ground while scrolling to the next section. */
#home-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #a6bed7 url('/assets/img/hero-gradient.webp') center / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
/* The lede's --ink-soft measured 4.10-4.19:1 on the gradient (bar 4.5). The gradient is light, so the fix is darker
   ink, not white: --ink, on the hero lede only. Everything else on the hero clears its bar as it is. */
#home-hero .lede { color: var(--ink); }
/* ── end W-2 ── */


/* ── marketer round W-3 ── */
/* Row 7: the inspiration text one step larger on the two-column layout. Row 8: the photo's top and bottom
   edges meet the text's; the text column stretches to the photo and spreads its lines over that height;
   more air between them; the figure column is exactly the photo's width, so the pair centres evenly. */
@media (min-width: 761px) {
  #home-inspiration { --inspo-grow: 1.1; --frame-h: min(56vh, 470px); }
  #home-inspiration .inspo-text h2 { font-size: calc(var(--inspo-grow) * var(--fs-h2)); }
  #home-inspiration .inspo-quote { font-size: calc(var(--inspo-grow) * 1.2 * var(--fs-h3)); }
  #home-inspiration .inspo-body { font-size: calc(var(--inspo-grow) * 1.08 * var(--fs-body)); }
  #home-inspiration .inspo-credit, #home-inspiration .inspo-dates { font-size: calc(var(--inspo-grow) * var(--fs-body)); }
  #home-inspiration .inspo-caption { font-size: calc(var(--inspo-grow) * var(--fs-h3)); }
  #home-inspiration .inspo { align-items: start; gap: calc(1.65 * clamp(28px, 4vw, 64px)); }
  #home-inspiration .inspo-figure { width: calc(.75 * var(--frame-h)); }
  #home-inspiration .inspo-figure .strip-frame { width: 100%; height: var(--frame-h); }
  #home-inspiration .inspo-text { min-height: var(--frame-h); align-content: space-between; }
}
/* Short landscape screens (1024x600 and the like) have no height to spend: the photo steps down, the type stays. */
@media (min-width: 761px) and (max-height: 700px) { #home-inspiration { --inspo-grow: 1; --frame-h: min(50vh, 470px); } }
/* ── end W-3 ── */


/* ── marketer round W-4 ── */
/* Learn more, D-4 without JS: each card carries a page link and a merged-page link; exactly one shows. */
.pillar .card-link[data-route='merged'] { display: none; }
@media (min-width: 521px) {
  .pillar .card-link[data-route='page'] { display: none; }
  .pillar .card-link[data-route='merged'] { display: flex; }
}
/* Row 9: the intro across moderate margins, two or three lines on a desktop. Row 15: above 520px the section
   is still a flow page (it never clips) but centres in the screen when it fits. */
@media (min-width: 1100px) { #home-pillars .lede { max-width: none; width: min(100%, 72vw); } }
@media (min-width: 521px) { #home-pillars.page[data-flow-above='520'] { display: grid; align-content: center; } }
/* ── end W-4 ── */


/* ── marketer round W-5 ── */
/* The merged pillars page: the three shipped pillar blocks stacked; a deep link lands clear of the nav. */
.pillars-page > .pillar-page { scroll-margin-top: calc(2 * var(--edge) + var(--nav-h)); }
/* ── end W-5 ── */


/* ── marketer round W-6 ── */
/* Row 16: the three Impact photographs become a carousel, one 4:3 frame at a time, arrows either side.
   The frame height is capped by the space the page has left; its width follows at 4/3. */
#home-impact .carousel { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.4vw, 18px); width: 100%; margin-top: clamp(10px, 1.8vh, 22px); }
#home-impact .carousel-track {
  /* ⚠ dvh, NOT vh, and that is the phone bug rather than a tidy-up. The deck and
     .glass are sized in 100dvh; mobile Safari's vh is the LARGE viewport - the one
     that includes the strip behind the toolbar. A vh-derived cap is therefore
     measured against a taller page than the reader actually has, so the frame asks
     for more room than .glass owns and an `overflow: hidden` card clips whatever
     will not fit. Chromium cannot show this: there vh and dvh are equal, which is
     why every figure recorded for this chunk is a floor the instrument can hold
     and not a description of what an iPhone does. */
  --frame-h: min(26dvh, calc((100vw - 2 * var(--gutter) - 180px) * .75));
  position: relative; display: flex; flex: none; height: var(--frame-h); aspect-ratio: 4 / 3;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; border-radius: var(--r-card);
}
#home-impact .carousel-track::-webkit-scrollbar { display: none; }
#home-impact .carousel-track:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
#home-impact .carousel-track > .strip-frame { flex: 0 0 100%; width: 100%; height: 100%; max-height: none; aspect-ratio: 4 / 3; scroll-snap-align: start; scroll-snap-stop: always; }
#home-impact .carousel .btn-arrow { width: var(--pill-h); height: var(--pill-h); flex: 0 0 auto; font-size: 1.05rem; }
#home-impact .carousel .btn-arrow:disabled { opacity: .35; cursor: default; }
/* A-3 (§10b.1), Nicolas 04:46:43Z "Desktop only": above the phone breakpoint the
   strip shows THREE photographs at once, the other two reached by the arrows and
   by swipe. The phone keeps its one large photograph, untouched.
   The track stops being a single 4:3 frame here and becomes a row of them: it
   takes the width it is given, each slide takes a third of it minus the gaps, and
   the height follows from 4:3 rather than being set. --frame-h stays the ceiling,
   so the section still cannot outgrow the card. Nothing in the JS is told "3" -
   it counts what fits, which is what keeps the phone and the desktop one code
   path instead of two. */
@media (min-width: 521px) {
  #home-impact .carousel-track {
    --slide-gap: clamp(6px, 1vw, 14px);
    /* ⚠ THE SLIDE IS SIZED BY BOTH CONSTRAINTS, AND THE FIRST DRAFT USED ONLY ONE.
       Giving each slide a third of the track and capping the track with max-height
       let the height be clipped while the width kept its third, so 4:3 came out as
       1.93:1 at 1440 and the aspect arm went red. The width is therefore the
       smaller of what the height allows and what the row allows, and the track is
       then sized to exactly three of them - which also keeps the JS's "count what
       fits" honest, since a track wider than its content would count four. */
    --slide-w: min(calc(var(--frame-h) * 4 / 3), calc((min(100vw - 2 * var(--gutter), 1180px) - 180px - 2 * var(--slide-gap)) / 3));
    aspect-ratio: auto; gap: var(--slide-gap);
    /* ⚠ min-width AND A DEFINITE WIDTH, both load-bearing, both learned the hard
       way. `width: min(100%, …)` resolves against .carousel, whose own width comes
       from its content - so the percentage was circular, the track's 3572px of
       slides inflated .carousel to 3705px, and `justify-content: center` then
       centred the strip at x=1399 in a 1440 viewport: off-screen, unreachable by
       touch, and invisible to elementFromPoint. A flex item with a scroll
       container inside it also needs min-width: 0 or its intrinsic content width
       becomes the floor. The width below therefore names no percentage at all.
       The symptom was the touch arm going red on three desktop sizes; the cause
       was nothing to do with touch. */
    flex: 0 0 auto; min-width: 0;
    width: calc(3 * var(--slide-w) + 2 * var(--slide-gap));
    height: calc(var(--slide-w) * 3 / 4);
  }
  #home-impact .carousel-track > .strip-frame { flex: 0 0 var(--slide-w); width: var(--slide-w); }
}
/* ⚠ THE 17vh CAP THAT USED TO LIVE HERE IS GONE, and removing it IS the fix.
   C7 (5f201f3) added it to make the section fit at 375x667, and it did - by
   squeezing the photograph to 151px wide, below the 171px the round had already
   measured. Rows 16 and 17 both stayed green throughout, because row 16 pinned
   aspect, arrows, wrap, keyboard, touch, reduced motion and fit, and never a
   minimum size. The calc() arm is width-derived and already lands on exactly
   171x128 at 375x667, so the cap was the only thing holding the frame under its
   floor. The 7px that freeing it costs is taken from the gap below, never from
   the photograph. */
@media (max-width: 520px) and (max-height: 720px) { #home-impact .center { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { #home-impact .carousel-track { scroll-behavior: auto; } }
/* Row 17: the statistics are the most prominent element on the page.
   ⚠ .stat-value IS IN THIS RULE, and leaving it out was the defect underneath
   the defect. The enlargement was scoped to the digit cards alone, so the field
   kept the generic 11.5vh size - invisible while the field was clipped away, and
   the moment C14 made the field what a reader sees before the roll, row 17's own
   floor went red at all five sizes: 103.5 against a required 118.16 at 1440.
   Fixing only the wrong number would have traded it for a too-small one, which
   is why the arm measures the element actually on screen rather than .digit. */
#home-impact .digit, #home-impact .stat-value { font-size: clamp(3.2rem, 14dvh, 9rem); }
/* ── end W-6 ── */


/* ── marketer round W-7 ── */
/* Row 18: each home news box shows its post's photograph (latest-news.js puts the img in the thumb). The thumb
   now shows at every desktop height that still fits, and on upright tablets as a small image beside the text;
   phones keep text-only rows (O-2). */
.news-five .news-thumb { position: relative; overflow: hidden; }
.news-five .news-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) and (min-height: 700px) { .news-five .news-thumb { display: block; } }
@media (min-width: 900px) and (min-height: 700px) and (max-height: 859px) { .news-five .news-thumb { aspect-ratio: 2 / 1; } }
@media (min-width: 521px) and (max-width: 899px) and (min-height: 900px) {
  .news-five .news-card { flex-direction: row; align-items: stretch; }
  .news-five .news-thumb { display: block; flex: 0 0 clamp(96px, 18vw, 150px); aspect-ratio: auto; }
  .news-five .news-meta { flex: 1 1 auto; min-width: 0; }
}
/* ── end W-7 ── */


/* ── marketer round W-8 ── */
/* ── end W-8 ── */


/* ── marketer round W-9 ── */
/* Row 21: the standfirst is one thought, so it reads as two lines on a desktop, not three.
   60ch measured 3 lines at both 1440 and 1280; 84ch is 2 at both, and at 820 and below the
   column is narrower than 84ch anyway, so the phone and tablet counts are untouched. */
body[data-page="guide"] .guide-hero .standfirst { max-width: 84ch; text-wrap: balance; }

/* Row 24: the straps kept their text in the 760px column every other child of .guide uses,
   inside a box that ran the full width, so 312px of wine and blue sat past the words at 1440.
   The box now hugs that column: content exactly 760, one --strap-gap of colour each side,
   centred on the page like the .toc it lines up with. The text column itself does not move,
   so the wrapping is the one shipped. Below 820 the box stays full width, because 760 plus
   two gaps no longer fits and the phone rule is that the strap must not grow. */
@media (min-width: 820px) {
  body[data-page="guide"] .guide .alert,
  body[data-page="guide"] .guide .stance {
    --strap-gap: 18px;
    width: calc(760px + 2 * var(--strap-gap));
    margin-inline: calc(50% - 380px - var(--strap-gap));
    padding-inline: var(--strap-gap);
  }
}
/* ── end W-9 ── */


/* ── marketer round W-10 ── */
/* Program hero, rows 25 and 26 (D-7). The hero type is restated one step larger through the
   tokens, so every string in the box grows together, and the two delivery cards stop reading as
   letterboxes. Both are bounded by the one-screen box: the growth bands are keyed to viewport
   HEIGHT because that is what the box has to spend. */
body[data-page='program'] #program-hero > .glass {
  --hero-grow: 1;
  --fs-eyebrow: calc(var(--hero-grow) * clamp(.72rem, 1.25vw, .9rem));
  --fs-body:    calc(var(--hero-grow) * clamp(.875rem, 1.55vw, 1.0625rem));
  --fs-small:   calc(var(--hero-grow) * clamp(.72rem, 1.2vw, .8125rem));
  --fs-h3:      calc(var(--hero-grow) * clamp(1rem, 2vw, 1.4rem));
  --fs-h2:      calc(var(--hero-grow) * 1.3 * clamp(1.6rem, 4.4vw, 3rem));
}
@media (min-width: 521px) and (min-height: 700px) {
  body[data-page='program'] #program-hero > .glass { --hero-grow: 1.06; }
}
@media (min-height: 780px) {
  body[data-page='program'] #program-hero > .glass { --hero-grow: 1.12; }
}
@media (min-width: 1360px) and (min-height: 860px) {
  body[data-page='program'] #program-hero > .glass { --hero-grow: 1.26; }
}
/* Tablet held upright is the tallest box on the bar and the emptiest, so it takes the most type. */
@media (min-width: 521px) and (max-width: 1100px) and (min-height: 1000px) {
  body[data-page='program'] #program-hero > .glass { --hero-grow: 1.5; }
}
@media (max-width: 520px) {
  body[data-page='program'] #program-hero > .glass { --hero-grow: 1.12; }
}
@media (max-width: 520px) and (min-height: 780px) {
  body[data-page='program'] #program-hero > .glass { --hero-grow: 1.4; }
}

/* Two cards as wide as the whole hero read as bands, not cards. Held to a card width they wrap
   their own text and stand up, centred under the buttons. Only where the box has the height to
   spend: shorter than this the hero needs every line it can save to stay on one screen, and a
   narrower card is a taller card. Phones keep the full-width single column they already have.
   The added term is .delivery's own column gap, restated. */
@media (min-width: 521px) and (min-height: 780px) {
  body[data-page='program'] .delivery {
    --delivery-w: clamp(280px, 24vw, 420px);
    max-width: min(100%, calc(2 * var(--delivery-w) + clamp(10px, 1.6vw, 20px)));
    margin-inline: auto;
  }
}
@media (min-width: 521px) and (max-width: 1100px) and (min-height: 1000px) {
  body[data-page='program'] .delivery { --delivery-w: clamp(280px, 40vw, 420px); }
}
/* ── end W-10 ── */


/* ── marketer round W-11 ── */
/* Program detail, rows 27 to 29. Everything under the tab bar hangs off the tab bar's own text
   edge instead of the page edge, so the label, the prose and the subcards line up with the word
   "Overview" above them; the same inset on the right takes the subcard row off the two edges.
   --tab-indent restates .tab's padding-inline plus the tab bar's 1px border, which is exactly the
   distance from the bar's box to its first letter: if that padding ever changes, change it here. */
body[data-page='program'] {
  --tab-indent: calc(1px + clamp(10px, 1.5vw, 20px));
}
/* The panel's own top padding, restated, plus the air the tab bar needs under it so the bar reads
   as a bar and not as the first line of the panel. */
body[data-page='program'] .tabpanel {
  padding-inline: var(--tab-indent);
  padding-top: calc(clamp(18px, 3vh, 36px) + clamp(16px, 4vh, 48px));
}
@media (min-width: 1200px) {
  /* Desktop subcards were letterboxes three or two to a full-width row. Capped to a card width,
     they wrap and stand up, and the row stops running edge to edge. */
  body[data-page='program'] .subcards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), clamp(240px, 20vw, 300px)));
    justify-content: start;
  }
}
/* ── end W-11 ── */


/* ── marketer round W-12 ── */
/* Row 30: the two join layouts sit inside a gutter of at least 6% of the viewport, equal
   on both sides, instead of running to the page edge padding.
   Row 31: on desktop the application card is a fixed share of the viewport rather than
   the wider half of the grid, so the fields keep a readable measure. Font sizes untouched. */
@media (min-width: 560px) {
  body[data-page='join'] .join-section .join-layout { max-width: 86vw; margin-inline: auto; }
}
@media (min-width: 900px) {
  body[data-page='join'] .join-section .join-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 40vw); }
}
/* ── end W-12 ── */


/* ════════════════════════════════════════════════════════════════════════════
   MARKETER ROUND 2 — job 2026-09-23-mhf-website-marketer-round-2
   engineering.md §6.3. One block per workstream, appended in this order, with
   two blank lines between them so edits in different blocks never touch
   adjacent lines and two chunks can never conflict on a shared hunk.
   A chunk writes ONLY between its own pair of markers. Every rule here is an
   OVERRIDE — the generated body above is not edited, and this file is appended
   to, never regenerated.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── marketer round 2 W-1 nav · H-1, H-2 ── */
/* H-1. Mission and Our Team are inert items until those pages exist.
   ⚠ EVERY LAYOUT RULE FOR A NAV ITEM IS ANCHOR-SCOPED (:416, :418, :420, :421),
   so a bare <span class="nav-link"> falls back to display:inline, its
   padding:7px 12px (:47) stops reserving height, and below 860px it never
   becomes flex — it reads as a short misaligned inline run at exactly the
   widths Nicolas checks on his phone. These four rules are the span-side twins
   of those four anchor-scoped ones, and nothing else.
   NOT [aria-disabled]: :42-43 styles that as a DISABLED CONTROL — opacity .38
   and a middle dot appended via ::after. An inert menu item is not a disabled
   control and takes no ARIA.
   Measured: inside .nav-dd-panel (display:flex) these are flex items, so
   inline-flex BLOCKIFIES to flex — which is exactly what the shipped anchors
   compute, at every width. */
.nav-link--inert { display: inline-flex; align-items: center; cursor: default; color: inherit; }
.nav-dd-panel .nav-link--inert { justify-content: center; }
@media (max-width: 860px) {
  .nav-links .nav-link--inert { display: flex; }
  .nav-dd-panel .nav-link--inert { justify-content: flex-start; }
}
/* ── end W-1 ── */

/* ── marketer round 2 W-3 home Our Inspiration · H-4, H-5, H-6 ── */
/* H-6 variation A, ported from the picked round file v/h6-a.html.
   TOP-ALIGNED: the text column's first line sits on the photograph's top edge
   and the pair stays centred in the page. `text-box: trim-both cap alphabetic`
   is already the site's idiom for this (glass.css:852 .pillar-tag, :326
   .pillar .card-tag) — it removes the h2's leading so the CAP HEIGHT aligns
   with the photo edge rather than the em box. Aligning the em box instead
   leaves the heading visibly low.
   Single breakpoint, 761px: below it the section is one column and unchanged.

   ⚠ ONE RULE OF THE PICKED BLOCK IS DELIBERATELY NOT PORTED —
   `.inspo-body { font-size: calc(1.08 * var(--fs-body)); }`. It carries the
   same stale 1.08 that §4.2 already corrected. Traced through the cascade:
   at >=761px it is INERT, because :1086 is `#home-inspiration .inspo-body`
   and an ID beats it; at <=760px it WINS on source order over :321's
   `var(--fs-body)` (media queries add no specificity and this block is at the
   end of the file), taking the phone body from 12.25 to 13.23. So it does
   nothing where H-6 applies and it changes the phone — which contradicts
   H-6's own binding that below 761px the section is unchanged, and turns H-5
   red. H-5 is satisfied structurally instead: H-4 puts the new paragraph in
   p.2's slot, which IS .inspo-body. */
@media (min-width: 761px) {
  .inspo { align-items: start; }
  .inspo-text { text-align: left; justify-items: start; padding-top: 0; }
  .inspo-text > h2 { margin-block: 0; text-box: trim-both cap alphabetic; }
  .inspo-figure { align-self: start; }
}
/* ── end W-3 ── */

/* ── marketer round 2 W-4 home Pillars · H-7, H-8 ── */
/* H-8 variation B, ported from v/h8-b.html.
   THE THREE-UP IS PINNED, and that is the defect nobody priced. glass.css:97
   is `repeat(auto-fit, minmax(min(100%,230px),1fr))` — there is no 3 in it.
   Three-up today is an emergent property of the row being wide enough for
   three 230px tracks (~726px with gaps); narrowing the row to two thirds drops
   it under that at mid widths and auto-fit silently collapses to 2+1.
   Never rely on auto-fit once the row is constrained.
   ⚠ glass.css:227 (.card-body[data-trim='pillar-body']) is NOT touched — it is
   declared in content.mjs's TRIMS table (:31) and asserted at :77. */
#home-pillars .cards.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: auto; }
@media (min-width: 761px) { #home-pillars .cards.pillars { width: min(100%, 66.7vw); } }
@media (max-width: 760px) { #home-pillars .cards.pillars { grid-template-columns: 1fr; width: 100%; } }
/* ── end W-4 ── */

/* ── marketer round 2 W-5 home Our Impact · H-9, H-12 ── */
/* H-12 — 4-up instead of 3-up. glass.js needs NO edit: :294-299 states its own
   contract, that neither number is written down there, and visible() measures
   round((clientWidth + gap) / stride) with build(visible()) deriving the clone
   count. The literal 3 lives only here.
   Desktop only, inheriting RULING carousel-three-up's scope — the phone branch
   below 521px keeps its one large photograph and is untouched.
   ⚠ THE TWO 4/3s IN THE SHIPPED RULE ARE THE ASPECT, NOT THE COUNT:
   `var(--frame-h) * 4 / 3` and `var(--slide-w) * 3 / 4` stay exactly as they
   are. Only the trailing divisor and the two multipliers move: / 3 -> / 4,
   3 * -> 4 *, 2 * -> 3 *.
   Arithmetic, stated because strategy.md flags it: at 1440 --slide-w is about
   245px and the height about 184px, five real slides, one frame to scroll to.
   Built as asked; more photographs are a follow-up, not a blocker. */
@media (min-width: 521px) {
  #home-impact .carousel-track {
    --slide-w: min(calc(var(--frame-h) * 4 / 3), calc((min(100vw - 2 * var(--gutter), 1180px) - 180px - 3 * var(--slide-gap)) / 4));
    width: calc(4 * var(--slide-w) + 3 * var(--slide-gap));
  }
}
/* ── end W-5 ── */

/* ── marketer round 2 W-7 footer · F-1..F-5 ── */
/* F-1. The stubs were <span>s and the marks are <a>s, so :205's circle
   treatment and its 26px twin at :214 no longer reach them. Restated for the
   anchor here rather than widening :205 to `span, a`, so the change is a
   decision visible in this block instead of a side effect of a tag swap.
   The marks inherit `color`, which is what keeps them monochrome. */
.footer-social a {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  color: var(--ink-soft); text-decoration: none;
}
.footer-social a svg { display: block; }
@media (max-width: 520px), (max-height: 560px) {
  .footer-social a { width: 26px; height: 26px; }
}
/* ── end W-7 ── */

/* ── marketer round 2 W-8 join · J-1, J-2 ── */
/* J-1 (design.md, v/j1-b.html, variation B): the two applications in one row,
   each description set as its card's standfirst. The pair collapses at 900px,
   not 761: two forms need more room than two paragraphs. The page's own <h1>
   is now visible, so the card titles step down to calc(1.5 * --fs-h3), a size
   inside the shipped scale. #join-friend is an empty anchor inside the friend
   card: the section merge left one section, and 24 links target #join-friend. */
.join-head { display: grid; justify-items: center; text-align: center; gap: clamp(6px, 1vh, 12px); margin-bottom: clamp(14px, 2.4vh, 30px); }
.join-h1 { font-size: var(--fs-h2); letter-spacing: -.025em; margin: 0; }
.join-pair { display: grid; gap: var(--edge); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; width: 100%; }
@media (max-width: 900px) { .join-pair { grid-template-columns: 1fr; } }
.join-pair .form-card { align-content: start; }
.join-pair .form-card > h2 { font-size: calc(1.5 * var(--fs-h3)); letter-spacing: -.02em; line-height: 1.12; margin: 0; }
.join-anchor { display: block; height: 0; scroll-margin-top: var(--nav-h, 72px); }
.jf-brief { margin: 0 0 clamp(8px, 1.4vh, 14px); padding: 0 0 clamp(10px, 1.6vh, 16px); border-bottom: 1px solid rgba(255,255,255,.35); }
.jf-brief p { margin: 0; color: rgba(255,255,255,.86); font-size: var(--fs-small); line-height: 1.55; }
.jf-brief .opt-list { margin: .6em 0 0; padding-left: 1.05em; display: grid; gap: .3em; color: rgba(255,255,255,.86); font-size: var(--fs-small); }
.jf-brief .opt-list li::marker { color: rgba(255,255,255,.5); }
/* ── end W-8 ── */

/* ── marketer round 2 W-9 forms · J-3, J-4 ── */
/* J-3 (design.md, v/j3-a.html, variation A): the two school forms side by side,
   each keeping its shipped header block. The section takes page-flow, declared
   in decisions.md: locked, it clipped +712px at 375x667 (measured in the round). */
.forms-section { padding-bottom: var(--edge); }
.forms-pair { display: grid; gap: var(--edge); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; width: 100%; }
@media (max-width: 900px) { .forms-pair { grid-template-columns: 1fr; } }
.forms-col { display: grid; gap: clamp(10px, 1.8vh, 20px); align-content: start; }
.forms-col .form-intro h1 { font-size: calc(1.15 * var(--fs-h2)); letter-spacing: -.03em; line-height: 1.02; margin: 0; }
.forms-col .form-intro .lede { margin: .6em 0 0; }
.forms-col .form-intro .form-rule { margin-top: clamp(8px, 1.4vh, 14px); }
/* J-4: Country and City share one row. The wrapper is inert: each control keeps
   its own .field, or fieldOf() drops its validation error silently. */
.field-pair { display: grid; gap: 10px 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .field-pair { grid-template-columns: 1fr; } }
/* RE-SCOPE, not restyle (engineering.md §4.10): glass.css:643-644 give the
   <select> treatment to .join-form only, so /forms/'s new Country dropdown was
   the raw UA control on a blue card. .join-form IS a .form-card, so widening the
   selector changes nothing on /join.html. Declarations copied verbatim. The
   white text and chevron assume a coloured card: re-check against C-1's
   light-grey contact card at C9 before any <select> lands there. */
.form-card select { width: 100%; appearance: none; padding: clamp(8px, 1.3vh, 13px) 40px clamp(8px, 1.3vh, 13px) clamp(12px, 1.6vw, 18px); border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.5); color: #fff; font-size: var(--fs-small); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; }
.form-card select option { color: var(--ink); }
/* ── end W-9 ── */

/* ── marketer round 2 W-11 pillars page · P-1..P-10 ── */
/* P-3 · the nth-child trap (engineering.md 4.6). The 2-column rule above gives grid-row: span 2 to
   child 3 and full width to child 5. After the reorder child 3 is Awareness (short) and Support,
   the longest, is child 4, so the span follows Support. It is also pinned to column 2 from row 2:
   with span 2 alone Support lands in column 1 of rows 3-4 and, because Collaboration (child 5) is
   full width and cannot sit beside it, column 2 of those rows stays empty. Pinned, the layout keeps
   the shape it had before the reorder: Measurement over Awareness on the left, Support tall on the
   right, Collaboration across the foot. Overrides the rule above rather than editing it. */
@media (min-width: 861px) {
  .pillar-prose.p1 > p:has(> :is(strong, b):first-child):nth-child(3) { grid-row: auto; }
  .pillar-prose.p1 > p:has(> :is(strong, b):first-child):nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
}

/* P-1 · the merged page only: three pillars, three columns, each one tall card in its pillar colour
   (design v/p1-b.html). Every colour is an existing token: --fill and --tint are aliased per pillar on
   .pillar-page from --blue / --green / --wine. The three standalone pages carry no .pillars-cols and
   are untouched. Columns are deliberately ragged at the bottom; do not equalise them. */
.pillars-cols { display: grid; gap: var(--edge); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; width: 100%; }
.pillars-cols > .pillar-page { scroll-margin-top: calc(2 * var(--edge) + var(--nav-h)); display: grid; align-content: start; background: var(--fill); border-radius: var(--r-glass); padding: 0 clamp(14px, 1.6vw, 24px) clamp(18px, 2.6vh, 30px); overflow: hidden; color: #fff; }
/* .pillar-hero's min-height: calc(100dvh - ...) is scoped out here, not changed at source: three
   columns cannot each be a viewport tall, and the standalone pages keep their full-height hero. The
   hero keeps its own --fill paint, the same colour as the column, so it reads as one card. */
.pillars-cols .pillar-hero { position: relative; min-height: 0; margin-bottom: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.6vh, 18px); padding: clamp(18px, 2.6vh, 32px) 0; }
.pillars-cols .pillar-title { font-size: calc(1.5 * var(--fs-h3)); line-height: 1.06; letter-spacing: -.025em; }
.pillars-cols .pillar-tag.card-tag { font-size: var(--fs-small); }
.pillars-cols .pillar-hero .cue { display: none; }
/* The brush becomes texture behind the words: .pillar-brush-wipe paints over it until data-seen
   fires, and at column scale it cannot sit beside them. */
.pillars-cols .pillar-brush { position: absolute; inset: auto -18% -30% auto; width: 62%; max-width: none; opacity: .22; pointer-events: none; }
.pillars-cols .pillar-section { padding: clamp(12px, 2vh, 24px) 0 0; }
.pillars-cols .pillar-list-sec { padding-top: clamp(10px, 1.6vh, 18px); }
.pillars-cols .pillar-prose { max-width: none; }
.pillars-cols .pillar-prose.p1 { grid-template-columns: minmax(0, 1fr); }
.pillars-cols .pillar-prose > p:first-child { font-size: calc(1.15 * var(--fs-body)); max-width: none; text-align: left; margin-inline: 0; color: rgba(255,255,255,.92); }
/* One column inside a column: the full-width rule has nothing to span, and Support keeps its span 2
   without the column-2 anchor above, which here would open an implicit second track. */
.pillars-cols .pillar-prose.p1 > p:has(> :is(strong, b):first-child):nth-child(n) { grid-column: auto; }
.pillars-cols .pillar-prose.p1 > p:has(> :is(strong, b):first-child):nth-child(4) { grid-row: span 2; }
/* The shipped white cards on the coloured ground: the .pillar-hero relationship, not a new one. */
.pillars-cols .pillar-prose > p:has(> :is(strong, b):first-child) { background: rgba(255,255,255,.92); }
.pillars-cols .pillar-list.p2 { grid-template-columns: minmax(0, 1fr); }
.pillars-cols .pillar-list.p2 li { min-height: 0; padding: clamp(12px, 1.8vh, 20px); padding-left: calc(clamp(12px, 1.8vh, 20px) + 34px); font-size: var(--fs-body); align-content: start; background: rgba(255,255,255,.92); }
.pillars-cols .pillar-list.p2 li::before { width: 26px; height: 26px; top: clamp(12px, 1.8vh, 20px); left: clamp(12px, 1.8vh, 20px); transform: none; }
/* P-2 · the photographs sit beneath all three columns. Their twin on
   /pillars/practices-connection/ is that page's own content and does not move. */
.pillars-photos-below { margin-top: clamp(20px, 4vh, 48px); }
@media (max-width: 900px) { .pillars-cols { grid-template-columns: 1fr; } }
/* ── end W-11 ── */

/* ── marketer round 2 W-13 program · G-1..G-9 ── */
/* Scoped to the Program page throughout: .timeline already names a guides component (.guide
   .timeline), and none of this may reach another page. */
/* G-2 (design.md G-2): the lecture icon takes the slot the .card-tag holds on the Portal card, so
   the two cards' first lines start together. .delivery-card stays flex-direction: column, which is
   why the icon is a flex item aligned to the start rather than a row of its own. Sized to the tag's
   own box: one fs-small line plus the tag's .32em padding above and below. */
body[data-page='program'] .delivery-card .card-icon { display: block; align-self: flex-start; font-size: var(--fs-small); height: calc(var(--lh-body) * 1em + .64em); width: auto; aspect-ratio: 1; }

/* G-8: more air between each section title and its subtext. .section-label is a <span> with no
   display, so its vertical padding never pushed the line box and the old .prose margin was mostly
   hidden under it (engineering.md §4.7). Made a block of its own width first, so the margin that
   follows is real distance, then the margin itself is raised, with the compact twin raised too. */
body[data-page='program'] .section-label { display: block; width: fit-content; }
body[data-page='program'] .tabpanel .prose { margin-top: clamp(20px, 3.2vh, 36px); }
@media (max-width: 520px), (max-height: 560px) {
  body[data-page='program'] .tabpanel .prose { margin-top: 16px; }
}
body[data-page='program'] .prose .track-summary { color: var(--ink); font-weight: 600; }

/* G-9 (design.md, v/g9-b.html): the section bar is a <nav> of in-page links, fixed beneath the menu
   pill for the whole of the document. Its top is the nav's height plus twice the nav's own top
   offset, which on this site is var(--edge) (the .nav { top: var(--edge) } rule, not the older
   clamp the mockup quoted), so the bar sits one edge below the pill and never under it. The cap
   no longer pulls itself up under the nav with a negative margin. */
body[data-page='program'] {
  --secnav-top: calc(2 * var(--edge) + var(--nav-h));
  --secnav-h: calc(2 * clamp(8px, 1.3vh, 14px) + var(--lh-body) * var(--fs-small) + 2px);
}
body[data-page='program'] .detail-cap { position: sticky; top: var(--secnav-top); z-index: 30; margin: 0 0 clamp(14px, 2.4vh, 28px); padding: 0; }
body[data-page='program'] .detail-cap[data-stuck='true'] { background: transparent; }
/* The old cap reached up under the nav with its padding, so once content moved under it the whole
   band from the top of the deck to just below the bar shaded (data-stuck, glass.js). The cap no
   longer has that padding, so the same band is painted by a pseudo-element instead, and the text
   never shows through the gap between the menu pill and the bar. */
body[data-page='program'] .detail-cap::before { content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--secnav-top)); bottom: calc(-1 * var(--edge)); left: calc(-1 * var(--edge)); right: calc(-1 * var(--edge));
  background: color-mix(in srgb, var(--ground) 94%, transparent); opacity: 0; transition: opacity .2s ease; }
body[data-page='program'] .detail-cap[data-stuck='true']::before { opacity: 1; }
body[data-page='program'] .secnav { display: flex; width: 100%; border-radius: var(--r-card); background: color-mix(in srgb, var(--ground) 82%, transparent);
  border: 1px solid var(--hairline); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); }
body[data-page='program'] .secnav-inner { position: relative; display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
body[data-page='program'] .secnav-inner::-webkit-scrollbar { display: none; }
body[data-page='program'] .secnav a { flex: 1 0 auto; text-align: center; text-decoration: none; white-space: nowrap;
  padding: clamp(8px, 1.3vh, 14px) clamp(10px, 1.5vw, 20px); font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); transition: color .3s ease; }
body[data-page='program'] .secnav a:hover { color: var(--ink); }
/* One indicator, slid by the scroll-spy (glass.js sets --ind-x / --ind-w on .secnav). No filled
   pill: the bar states where the reader is rather than offering six buttons. */
body[data-page='program'] .secnav a[data-on] { color: var(--blue); font-weight: 600; }
body[data-page='program'] .secnav a:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: var(--r-label); }
body[data-page='program'] .secnav-inner::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--ind-w, 0px); transform: translateX(var(--ind-x, 0px));
  background: var(--blue); border-radius: 2px; transition: transform .45s cubic-bezier(.32,.72,0,1), width .45s cubic-bezier(.32,.72,0,1); }
/* All six panels show: none is hidden, none is sized to a screen, and a jump to one clears the nav
   AND the bar (plus the gap below the bar). */
body[data-page='program'] .tabpanel { min-height: 0; scroll-margin-top: calc(var(--secnav-top) + var(--secnav-h) + clamp(8px, 1.4vh, 16px)); }
body[data-page='program'] .tabpanel[hidden] { display: block; }

/* G-4 / G-5: the student and teacher timelines. The technique is .pillar-list.p3's, copied rather
   than re-pointed (engineering.md §4.7): a CSS counter in numbered circles, a ::before rail that
   draws in when the list scrolls into view, a vertical rail below the breakpoint. The track count
   is PINNED per list: .subcards' auto-fit would wrap the fifth box under the rail, which reads as
   broken. The rail ends in an arrow (::after). The add-on box sits outside the list, unnumbered. */
body[data-page='program'] .timeline { --n: 5; list-style: none; counter-reset: step; position: relative; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin: clamp(16px, 2.6vh, 30px) 0 0; padding: 0; }
body[data-page='program'] .timeline[data-steps='4'] { --n: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-page='program'] .timeline::before { content: ''; position: absolute; top: 21px; left: calc(50% / var(--n)); right: 11px; height: 2px;
  background: var(--blue); opacity: .35; transform-origin: left; transform: scaleX(1); transition: transform 1.4s var(--spring) .2s; }
body[data-page='program'] .timeline::after { content: ''; position: absolute; top: 16px; right: 0; width: 0; height: 0;
  border-left: 11px solid var(--blue); border-top: 6px solid transparent; border-bottom: 6px solid transparent; opacity: .35; transition: opacity .4s ease 1.4s; }
:where(html.js) body[data-page='program'] .timeline:not([data-in='true'])::before { transform: scaleX(0); }
:where(html.js) body[data-page='program'] .timeline:not([data-in='true'])::after { opacity: 0; transition-delay: 0s; }
body[data-page='program'] .timeline-step { counter-increment: step; position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 14px; min-width: 0; }
body[data-page='program'] .timeline-step::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 1.05rem; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--ground), 0 14px 28px -14px rgba(2,71,142,.55); }
body[data-page='program'] .step-card { justify-self: stretch; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: clamp(12px, 1.8vh, 20px) clamp(12px, 1.2vw, 18px); border-radius: var(--r-card); background: var(--tint-blue); text-align: left; overflow-wrap: break-word; }
body[data-page='program'] .step-meta { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--blue); }
body[data-page='program'] .step-card .card-body, body[data-page='program'] .addon-card .card-body { margin: 0; color: var(--ink-soft); font-size: calc(.96 * var(--fs-body)); }
body[data-page='program'] .addon-card { display: flex; flex-direction: column; gap: 6px; max-width: 640px; margin-top: clamp(16px, 2.6vh, 30px);
  padding: clamp(14px, 2.2vh, 24px) clamp(14px, 1.6vw, 24px); border-radius: var(--r-card); border: 1.5px dashed rgba(2,71,142,.45); text-align: left; }
@media (max-width: 760px) {
  body[data-page='program'] .timeline, body[data-page='program'] .timeline[data-steps='4'] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body[data-page='program'] .timeline::before { top: 22px; bottom: 11px; left: 21px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(1); }
  body[data-page='program'] .timeline::after { top: auto; bottom: 0; right: auto; left: 16px; border: 0; border-top: 11px solid var(--blue); border-left: 6px solid transparent; border-right: 6px solid transparent; }
  :where(html.js) body[data-page='program'] .timeline:not([data-in='true'])::before { transform: scaleY(0); }
  body[data-page='program'] .timeline-step { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: none; justify-items: stretch; align-items: start; column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page='program'] .secnav a, body[data-page='program'] .secnav-inner::after, body[data-page='program'] .detail-cap::before, body[data-page='program'] .timeline::before, body[data-page='program'] .timeline::after { transition: none !important; }
  body[data-page='program'] .timeline::before { transform: none !important; }
  body[data-page='program'] .timeline::after { opacity: .35 !important; }
}
/* ── end W-13 ── */

/* ── marketer round 2 W-14 app · A-1, A-2 ── */
/* A-2 (design.md, v/a2-b.html): #app-ios and #app-android are one #app-install. Three columns:
   iPhone steps · the one phone · Android steps. The two lists are different lengths, so they share
   a top edge and the phone is centred against them. */
#app-install > .glass { overflow: visible; }
#app-install .app-trio { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(16px, 3vw, 54px);
  width: 100%; max-width: 1180px; margin-inline: auto; }
#app-install .device-col { align-self: center; display: grid; justify-items: center; }
#app-install .app-card { justify-items: stretch; }
#app-install .app-steps { max-width: none; }
#app-install .app-card h2 { font-size: calc(1.35 * var(--fs-h3)); letter-spacing: -.02em; margin: 0; }
/* The right-hand list leans toward the phone, mirroring .app-split[data-flip] rather than
   inventing a second motion. */
#app-install .app-col--android .app-steps li[data-on='true'] { transform: translateX(-6px); }
#app-install .device { --tilt: 0deg; }

/* ⚠ The two platform cards must BOTH show. app-page.js no longer hides either, and the page-collapse
   rule (.page:has(#ios-card.app-hidden) …) is neutralised for this page by naming the two cards,
   never the class: #ios-standalone-hint uses .app-hidden too and is conditional UI that must keep
   hiding. */
#app-install.page:has(#ios-card.app-hidden), #app-install.page:has(#android-card.app-hidden) { display: grid; }
#app-install #ios-card.app-hidden, #app-install #android-card.app-hidden { display: grid !important; }

/* ⚠ DECISION, not a rename side effect (design.md A-2; decisions.md). The old rule
   `#app-ios .device, #app-android .device { display: none }` under (max-width: 860px) and
   (max-height: 720px) stopped matching when the sections merged. It is restated here for
   #app-install, and what it now says is that on a small phone the ONE phone STAYS, smaller, with
   the two lists stacked beneath it: the phone is the subject of this section and small phones are
   the readers it is for. */
@media (max-width: 860px) and (max-height: 720px) {
  #app-install .device { display: block; --dev-h: clamp(150px, 27vh, 220px); }
}
@media (max-width: 900px) {
  /* Stacked, the phone plus seven steps is taller than one screen on a phone. The section grows
     rather than hiding a list (A-2 wants both) or spilling under the next page: its glass drops
     the one-screen ceiling and keeps the one-screen floor. */
  #app-install > .glass { max-height: none; }
  #app-install .app-trio { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(14px, 2.6vh, 28px); }
  #app-install .device-col { order: -1; }
  #app-install .app-card { justify-items: center; }
  #app-install .app-steps li[data-on='true'] { transform: none; }
}

/* The phone is one CSS construction for both platforms, and the Android frame is exactly three
   changes: a centred round punch-hole for the pill notch, a bottom gesture bar, a tighter radius. */
#app-install .device[data-platform='android'] { --r: calc(var(--dev-h) * .105); }
#app-install .device[data-platform='android'] .device-screen::before { width: auto; height: 2.2%; aspect-ratio: 1; border-radius: 50%; top: 1.5%; }
#app-install .device[data-platform='android'] .device-screen::after { content: ''; position: absolute; z-index: 5; bottom: 1.1%; left: 50%; transform: translateX(-50%);
  width: 34%; height: .7%; border-radius: 999px; background: rgba(13,15,18,.55); }
#app-install .device, #app-install .device-screen::before { transition: transform 1.1s var(--spring), opacity .9s var(--spring), border-radius .4s var(--spring); }

/* The platform switch above the phone, the site's own pill-and-fill: the phone is never ambiguous
   about which platform it shows, and the other list steps back to .55. The dimming is on the list
   and its heading themselves (the reveal forces opacity on .app-words children, !important under
   reduced motion, so it is restated at that weight). */
#app-install .plat-switch { display: inline-flex; margin: 0 auto clamp(10px, 1.6vh, 18px); padding: 3px; border-radius: var(--r-pill);
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
#app-install .plat-switch button { appearance: none; cursor: pointer; border: 0; background: transparent; padding: clamp(6px, 1vh, 10px) clamp(14px, 1.8vw, 22px);
  border-radius: var(--r-pill); font: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--ink); transition: background-color .3s ease, color .3s ease; }
#app-install .plat-switch button[aria-pressed='true'] { background: var(--blue); color: #fff; font-weight: 600; }
#app-install .plat-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#app-install[data-seen='true'][data-platform='ios'] .app-col--android .app-card > :is(h2, .app-steps),
#app-install[data-seen='true'][data-platform='android'] .app-col--ios .app-card > :is(h2, .app-steps) { opacity: .55 !important; }
#app-install .app-card > :is(h2, .app-steps) { transition: opacity .45s var(--spring), transform 1s var(--spring); }
@media (prefers-reduced-motion: reduce) {
  #app-install .plat-switch button, #app-install .app-card > :is(h2, .app-steps) { transition: none !important; }
}
/* RULING app-install-flow-below-900-C (2026-09-23): at <=900px #app-install is taller
   than one screen (958px on 390x844, measured), so it is DECLARED a flow page there by
   data-flow-below="900" rather than left a snap box that silently overflows. fit.mjs
   records it as flow at those widths and glass.js isFlow hands PageDown to the browser;
   above 900px it stays a box that fit checks. Only the snap stop changes here, so the
   layout C8 built is untouched. */
@media (max-width: 900px) { .page[data-flow-below='900'] { scroll-snap-stop: normal; } }
/* ── end W-14 ── */

/* ── marketer round 2 W-15 contact · C-1 ── */
/* C-1 (design.md, v/c1-b.html, PICK B): one centred contact form, 720px, First
   and Last on one row folding at 520px, the section in page-flow. "Light grey"
   is --footer-grey, the site's own neutral; the card keeps every .form-card
   behaviour and only inverts its ink. The fit measurement taken in the round
   was of the LOCKED-BOX variant and is NOT fit coverage for this page-flow
   page (RULING contact-fit-coverage-must-be-STATED-not-dropped). The card
   carries no <select>, so W-9's white select rule never reaches it. */
.contact-wrap { display: grid; justify-items: center; gap: clamp(12px, 2.2vh, 26px); width: 100%; }
.contact-head { display: grid; justify-items: center; text-align: center; gap: clamp(6px, 1vh, 12px); }
.contact-head h1 { font-size: var(--fs-h2); letter-spacing: -.028em; margin: 0; }
.contact-head .lede { margin: 0; max-width: 48ch; }
.contact-card { width: min(720px, 100%); }
.contact-card textarea { min-height: 7em; }
.form-card[data-colour='grey'] { background: var(--footer-grey); color: var(--ink); }
.form-card[data-colour='grey'] .field label { color: var(--ink-soft); }
.form-card[data-colour='grey'] .field input,
.form-card[data-colour='grey'] .field textarea { background: #fff; border-color: var(--hairline); color: var(--ink); }
.form-card[data-colour='grey'] .field ::placeholder { color: var(--ink-soft); opacity: .75; }
.form-card[data-colour='grey'] .field input:focus-visible,
.form-card[data-colour='grey'] .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.form-card[data-colour='grey'] .form-submit { background: var(--blue); color: #fff; border: 0; }
.form-card[data-colour='grey'] .form-status { color: var(--ink-soft); }
/* ── end W-15 ── */

/* ── pdf-link job (2026-09-25) program ── */
/* The Program overview's PDF link takes the eyebrow blue, and the "Two ways" eyebrow on this page
   turns ink. Scoped to the Program page AND to a class: the page has two .eyebrow-caps and
   "OUR PROGRAM" stays blue (engineering.md O-1). */
body[data-page='program'] .overview-pdf a { color: var(--blue); font-weight: 600; text-underline-offset: 2px; }
body[data-page='program'] .overview-pdf a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
body[data-page='program'] .eyebrow-caps.eyebrow-ink { color: var(--ink); }
/* ── end pdf-link ── */