/* heliostep.com page styles (Oct 29, 2026). Load after hs.css. Asset urls are relative to html/. */

.wl { --wl-panel: #24464C; --wl-line: rgba(242,238,230,.16); scroll-behavior: smooth; }
.wl .web-head .web-wrap { min-height: 96px; }
.wl-logo { display: inline-flex; align-items: center; min-height: 44px; }
.wl-logo img { display: block; width: 132px; height: 60px; }
.wl-headbtn { min-height: 44px; padding: 0 18px; border-radius: 22px; display: inline-flex; align-items: center; font: 700 16px/1 var(--font-body);
  color: var(--on-door); text-decoration: none; box-shadow: inset 0 0 0 2px var(--on-door-muted); }
.wl a:focus-visible, .wl button:focus-visible, .wl input:focus-visible, .wl summary:focus-visible { outline: 3px solid #F5B841; outline-offset: 3px; }

/* the form */
.wl-join { width: 100%; }
.wl-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.wl-label { font: 700 17px/1.3 var(--font-body); }
.wl-row { display: flex; gap: 10px; }
.wl-input { flex: 1 1 auto; min-width: 0; height: 56px; border: 0; border-radius: 28px; padding: 0 22px; font: 400 18px/1 var(--font-body);
  background: #FFFFFF; color: #1C2226; box-shadow: inset 0 0 0 1.5px #6E7A80; }
.wl-input::placeholder { color: #6A7377; }
.wl-input.err { box-shadow: inset 0 0 0 2.5px #1C2226; }
.wl-submit { flex: none; min-height: 56px; padding: 0 26px; font-size: 18px; cursor: pointer; }
.wl-err { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 16px; line-height: 1.45; font-weight: 600; background: #FBF7EE; color: #1C2226; }
.wl-roles { border: 0; margin: 8px 0 0; padding: 0; min-width: 0; }
.wl-roles legend { padding: 0; margin: 0 0 10px; font: 700 17px/1.3 var(--font-body); }
.wl-roles legend span { font-weight: 400; opacity: .8; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chip { appearance: none; border: 0; min-height: 44px; padding: 0 18px; border-radius: 22px; cursor: pointer; font: 600 16px/1 var(--font-body);
  background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.wl-chip.on { background: var(--paper-bright); color: #1C2226; box-shadow: inset 0 0 0 2.5px var(--amber); font-weight: 700; }
.wl-fine { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.wl-thanks { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wl-thanks h2 { margin: 0; font: 800 30px/1.15 var(--font-display); letter-spacing: -.01em; }
.wl-thanks p { margin: 0; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.wl-link { appearance: none; border: 0; background: none; padding: 0; min-height: 44px; font: 700 16px/1 var(--font-body); color: inherit;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* the video */
.wl-media > img, .wl-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-media > video { opacity: 0; transition: opacity .35s ease-out; }
.is-seen .wl-media > video, .wl-media.is-seen > video { opacity: 1; }
.wl-play { position: absolute; right: 20px; bottom: 20px; z-index: 3; appearance: none; border: 0; min-height: 44px; padding: 0 18px; border-radius: 22px;
  display: none; align-items: center; background: rgba(16,30,32,.78); color: #F2EEE6; font: 700 15px/1 var(--font-body); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.is-playing .wl-play, .is-paused .wl-play, .is-ended .wl-play { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .wl-media > video, .wl-play { display: none !important; } .wl { scroll-behavior: auto; } }

/* sections */
.wl .web-h1, .wl .web-h2, .wl-sheet h2, .wl-letter h2 { text-wrap: balance; }
.wl .web-kicker { margin: 0; }
.wl-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.wl-points li { padding: 18px 0; box-shadow: inset 0 1px 0 var(--wl-pt-line, rgba(28,34,38,.14)); }
.wl-points h3 { margin: 0 0 4px; font: 800 21px/1.3 var(--font-display); }
.wl-points p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--wl-pt-muted, var(--on-paper-muted)); }
.wl-faq { display: flex; flex-direction: column; }
.wl-faq details { box-shadow: inset 0 -1px 0 var(--wl-faq-line, rgba(28,34,38,.16)); }
.wl-faq summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0;
  font: 700 20px/1.35 var(--font-body); cursor: pointer; list-style: none; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary svg { transition: transform .2s ease-out; }
.wl-faq details[open] summary svg { transform: rotate(180deg); }
.wl-faq p { margin: 0 0 22px; max-width: 40em; font-size: 18px; line-height: 1.6; color: var(--wl-faq-muted, var(--on-paper-muted)); }
.wl-foot { padding: 40px 0 48px; }
.wl-foot nav { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.wl-foot a { min-height: 44px; display: inline-flex; align-items: center; font: 600 16px/1 var(--font-body); color: inherit; text-decoration: none; }
.wl-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .wl .web-head .web-wrap { min-height: 72px; }
  .wl-logo img { width: 110px; height: 50px; }
  .wl-headbtn { display: none; }
  .wl-row { flex-direction: column; }
  .wl-submit { width: 100%; }
  .wl-points h3 { font-size: 19px; }
  .wl-faq summary { font-size: 18px; }
  .wl-faq p { font-size: 17px; }
}

/* A · Night door */
.wl-a .wl-head { position: absolute; left: 0; right: 0; top: 0; z-index: 5; background: none; }
.wl-hero { position: relative; overflow: hidden; height: clamp(700px, 54vw, 790px); color: var(--on-door);
  background: linear-gradient(180deg, #1E2E2D 0%, #172A29 18%, #132726 37%, #112527 55%, #102427 74%, #0E2022 88%, #0F2323 100%); }
.wl-hero .wl-media { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 16 / 9; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%); mask-image: linear-gradient(90deg, transparent, #000 9%); }
.wl-hero .wl-copy { position: relative; z-index: 2; box-sizing: border-box; width: calc(max(32px, calc(50% - 568px)) + 492px);
  padding: 176px 0 0 max(32px, calc(50% - 568px)); display: flex; flex-direction: column; gap: 22px; }
.wl-hero .web-h1 { font-size: 64px; line-height: 1.04; }
.wl-hero .web-lead { font-size: 19px; color: var(--on-door-muted); }
.wl-hero .wl-join { margin-top: 10px; }
.wl-hero .wl-fine { color: var(--on-door-muted); }
.wl-a .wl-chip { color: var(--on-door); box-shadow: inset 0 0 0 1.5px rgba(242,238,230,.5); }
.wl-a .wl-chip.on { color: #1C2226; box-shadow: inset 0 0 0 2.5px var(--amber); }

/* the founders' note: a sheet on the door */
.wl-a .wl-noteband { padding: 112px 0; }
.wl-sheet { max-width: 760px; margin: 0 auto; padding: 60px 72px 56px; }
.wl-sheet h2 { margin: 0 0 22px; font: 800 38px/1.12 var(--font-display); letter-spacing: -.015em; }
.wl-sheet p { margin: 0 0 16px; font-size: 20px; line-height: 1.65; }
.wl-sheet .sig { margin: 26px 0 0; font: 700 19px/1.3 var(--font-display); }
.wl-sheet .web-btn { margin-top: 24px; }

.wl-a .wl-teach { --wl-pt-line: var(--wl-line); --wl-pt-muted: var(--on-door-muted); }
.wl-a .wl-teach .web-lead { color: var(--on-door-muted); }
@media (min-width: 761px) { .wl-a .wl-phone-l { order: -1; } }

/* privacy: four plain promises */
.wl-promises { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin: 8px 0 0; padding: 0; list-style: none; }
.wl-promises li { padding: 24px 0 26px; box-shadow: inset 0 1px 0 rgba(28,34,38,.16); }
.wl-promises h3 { margin: 0 0 6px; font: 800 24px/1.25 var(--font-display); letter-spacing: -.01em; }
.wl-promises p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-paper-muted); }
.wl-a .wl-privhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
.wl-a .wl-privhead a { color: var(--on-paper); font: 700 17px/1 var(--font-body); min-height: 44px; display: inline-flex; align-items: center;
  text-underline-offset: 4px; }

.wl-a .wl-faqband { --wl-faq-line: var(--wl-line); --wl-faq-muted: var(--on-door-muted); }
.wl-faqgrid { display: grid; grid-template-columns: 4fr 7fr; gap: 32px 64px; align-items: start; }
.wl-faqgrid .web-lead { font-size: 18px; margin-top: 14px; }
.wl-a .wl-foot { background: var(--door-deep); color: #F2EEE6; }

@media (max-width: 1140px) {
  .wl-a .wl-head { position: relative; background: #1E2E2D; }
  .wl-hero { height: auto; display: flex; flex-direction: column; }
  .wl-hero .wl-media { position: relative; order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; }
  .wl-hero .wl-media > img, .wl-hero .wl-media > video { object-position: 90% 50%; }
  .wl-hero .wl-copy { width: auto; padding: 28px 16px 56px; gap: 18px; }
  .wl-hero .web-h1 { font-size: 42px; }
  .wl-hero .web-lead { font-size: 18px; }
  .wl-play { right: 12px; bottom: 12px; }
}
@media (max-width: 760px) {
  .wl-a .wl-noteband { padding: 64px 0; }
  .wl-sheet { padding: 36px 24px 32px; }
  .wl-sheet h2 { font-size: 30px; }
  .wl-sheet p { font-size: 18px; }
  .wl-promises { grid-template-columns: 1fr; }
  .wl-promises h3 { font-size: 21px; }
  .wl-promises p { font-size: 17px; }
  .wl-faqgrid { grid-template-columns: 1fr; gap: 16px; }
  .wl .web-split .art { justify-content: center; }
}

/* site shell */
.sx { scroll-padding-top: 16px; }
.sx-skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 12px 16px; border-radius: 12px; background: #FBF7EE; color: #1C2226; font-weight: 700; }
.sx-skip:focus { top: 12px; }
.sx-head .web-wrap { flex-wrap: nowrap; }
.sx-nav { display: flex; align-items: center; gap: 4px; }
.sx-nav a { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 22px; color: inherit; font: 600 16px/1 var(--font-body); text-decoration: none; }
.sx-nav a:hover { background: rgba(255,255,255,.08); }
.sx-join { margin-left: 10px; background: var(--amber); color: var(--on-amber) !important; font-weight: 700 !important; box-shadow: var(--shadow-button); }
.sx-menu { display: none; position: relative; }
.sx-menu summary { list-style: none; min-height: 44px; padding: 0 18px; border-radius: 22px; display: inline-flex; align-items: center; font: 700 16px/1 var(--font-body);
  cursor: pointer; box-shadow: inset 0 0 0 2px currentColor; }
.sx-menu summary::-webkit-details-marker { display: none; }
.sx-menu nav { position: absolute; right: 0; top: 52px; z-index: 30; width: min(320px, calc(100vw - 32px)); padding: 10px; border-radius: 18px; background: #24464C; color: #F2EEE6;
  box-shadow: 0 18px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.sx-menu nav a { min-height: 48px; padding: 0 14px; display: flex; align-items: center; border-radius: 12px; color: inherit; font: 600 17px/1 var(--font-body); text-decoration: none; }
.sx-menu nav a.sx-menujoin { margin-top: 6px; justify-content: center; background: var(--amber); color: var(--on-amber); font-weight: 700; }
@media (max-width: 900px) { .sx-nav { display: none; } .sx-menu { display: block; } }

.sx-trust { list-style: none; margin: 18px 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; box-shadow: inset 0 1px 0 rgba(242,238,230,.16); }
.sx-trust li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.4; color: var(--on-door-muted); }
.sx-trust li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

.wl-fine a { color: inherit; text-underline-offset: 3px; }

/* the story: a sticky phone, the page scrolls normally */
.sx-story { position: relative; overflow: clip; padding: 112px 0 120px; isolation: isolate; }
.sx-storybg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sx-storybg i { position: absolute; inset: 0; transition: opacity .8s ease; }
.sx-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "intro pin" "steps pin"; column-gap: 96px; }
.sx-intro { grid-area: intro; display: flex; flex-direction: column; gap: 18px; max-width: 560px; padding-bottom: 24px; }
.sx-pin { grid-area: pin; position: sticky; top: 72px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; }
.sx-phone.m { display: none; }
.sx-steps { grid-area: steps; list-style: none; margin: 0; padding: 0; }
.sx-step { min-height: 420px; padding: 40px 0 0; max-width: 520px; opacity: .8; transition: opacity .35s ease; }
.s1 .sx-step[data-step="1"], .s2 .sx-step[data-step="2"], .s3 .sx-step[data-step="3"], .s4 .sx-step[data-step="4"], .s5 .sx-step[data-step="5"], .sx-static .sx-step { opacity: 1; }
[data-theme="day"] [data-theme="night"] .ui-panel { background: #24464C; box-shadow: none; }
[data-theme="day"] [data-theme="night"] .ui-pill { box-shadow: none; }
[data-theme="day"] [data-theme="night"] .hs-tabbar { background: #14292D; }
[data-theme="day"] [data-theme="night"].hs-door::before { opacity: 1; }
[data-theme="day"] [data-theme="night"].hs-door::after { mix-blend-mode: overlay; opacity: .45; }
[data-theme="day"] [data-theme="night"] .hs-lamp { background: radial-gradient(120% 70% at 10% -4%, rgba(255,184,100,.30), rgba(255,184,100,.10) 34%, rgba(255,184,100,0) 62%); }
[data-theme="day"] [data-theme="night"] .ui-subtabs { box-shadow: inset 0 -1px 0 rgba(242,238,230,.14); }
.sx-static .sx-step, .sx-static .sx-step:last-child { min-height: 0; padding: 36px 0 8px; }
.sx-static .sx-steps { padding-bottom: 300px; }
@media (max-width: 760px) { .sx-static .sx-steps { padding-bottom: 40px; } .sx-b .sx-static .sx-storybg .day { background: linear-gradient(180deg, #EFE4CF 0, #EFE4CF 400px, #1E3A3F 470px, #1E3A3F 100%); } }
.sx-step h3 { margin: 0 0 10px; font: 800 34px/1.12 var(--font-display); letter-spacing: -.015em; }
.sx-step p { margin: 0; font-size: 19px; line-height: 1.6; }
.sx-step .sx-time { margin: 0 0 10px; font: 700 16px/1 var(--font-body); color: var(--sx-accent, #F5B841); }
.sx-step:last-child { min-height: 360px; }

/* phone states: s0 nothing yet, s1 the card, s2 to s4 the magnets, s5 progress */
.sx-phone .st-today, .sx-phone .st-prog { position: absolute; inset: 0; }
.sx-phone .scr { position: relative; }
.sx-phone .in { position: relative; }
.st-cardwrap { position: relative; min-height: 104px; }
.st-cardslot { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 20px; border-radius: 4px; border: 2.5px dashed rgba(242,238,230,.38);
  color: #CBD5D5; font: 600 16px/1.35 var(--font-body); text-align: center; transition: opacity .3s ease; }
.st-card { opacity: 0; transform: translateY(-34px) rotate(-4deg) scale(1.03); transition: opacity .35s ease, transform .6s cubic-bezier(.2,.9,.25,1.15); }
.st-mw { position: relative; width: 56px; height: 56px; flex: none; }
.st-mw .hs-slot { position: absolute; inset: 0; transition: opacity .2s ease; }
.st-m { position: absolute; inset: 0; opacity: 0; transform: translate(10px, -26px) scale(1.4); transition: opacity .18s ease, transform .42s cubic-bezier(.3,1.7,.5,1); }
.st-a { display: none; }
.st-saved { opacity: 0; transform: translateY(10px); transition: opacity .4s ease .15s, transform .5s cubic-bezier(.2,.9,.3,1.2) .15s; }
.st-prog { opacity: 0; transform: translateX(28px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.st-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .35s; }
.s1 .st-card, .s2 .st-card, .s3 .st-card, .s4 .st-card, .s5 .st-card { opacity: 1; transform: rotate(.5deg); }
.s1 .st-cardslot, .s2 .st-cardslot, .s3 .st-cardslot, .s4 .st-cardslot, .s5 .st-cardslot { opacity: 0; }
.s2 .st-m1, .s3 .st-m1, .s4 .st-m1, .s5 .st-m1, .s3 .st-m2, .s4 .st-m2, .s5 .st-m2, .s4 .st-m3, .s5 .st-m3 { opacity: 1; transform: none; }
.s2 .st-slot1, .s3 .st-slot1, .s4 .st-slot1, .s5 .st-slot1, .s3 .st-slot2, .s4 .st-slot2, .s5 .st-slot2, .s4 .st-slot3, .s5 .st-slot3 { opacity: 0; }
.s2 .st-q1, .s3 .st-q1, .s4 .st-q1, .s5 .st-q1, .s3 .st-q2, .s4 .st-q2, .s5 .st-q2, .s4 .st-q3, .s5 .st-q3 { display: none; }
.s2 .st-a1, .s3 .st-a1, .s4 .st-a1, .s5 .st-a1, .s3 .st-a2, .s4 .st-a2, .s5 .st-a2, .s4 .st-a3, .s5 .st-a3 { display: inline; }
.s4 .st-saved, .s5 .st-saved { opacity: 1; transform: none; }
.s5 .st-prog { opacity: 1; transform: none; }
.s5 .st-line { stroke-dashoffset: 0; }

/* the two doors: parents and teachers */
.sx-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sx-door { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 48px 48px 0; display: flex; flex-direction: column; gap: 32px; min-height: 640px; }
.sx-door.home { background: var(--door); color: var(--on-door); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.6); }
.sx-door.school { background: #F3EEE4; color: #1C2226; box-shadow: inset 0 0 0 1px rgba(84,58,24,.12), 0 30px 60px -30px rgba(42,30,14,.4); }
.sx-door.home::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/assets/textures/enamel-ripple.webp) 0 0 / 512px; mix-blend-mode: soft-light; }
.sx-door .hs-lamp { z-index: -1; }
.sx-door-copy { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.sx-door-copy h3 { margin: 0; font: 800 36px/1.1 var(--font-display); letter-spacing: -.015em; }
.sx-door-copy p { margin: 0; font-size: 18px; line-height: 1.6; }
.sx-door.home .sx-door-copy p:not(.web-kicker) { color: var(--on-door-muted); }
.sx-door.school .sx-door-copy p:not(.web-kicker) { color: #4A5357; }
.sx-door.school .sx-door-copy .web-kicker { color: #5A4B39; }
.sx-door-art { margin-top: auto; display: flex; justify-content: center; }
.sx-crop { border-radius: 46px 46px 0 0; padding-bottom: 0; overflow: hidden; transform: translateY(var(--rise, 0px)); }
.sx-crop > .scr { border-radius: 36px 36px 0 0; }
.sx-arrow { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: inherit; font: 700 17px/1 var(--font-body);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* privacy statement */
.sx-priv .web-kicker { margin: 0; }
.wl .wl-statement { margin: 16px 0 0; max-width: 980px; font: 800 40px/1.2 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.sx-plain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 48px; margin: 44px 0 0; padding: 0; list-style: none; }
.sx-plain li { padding-top: 18px; font-size: 18px; line-height: 1.55; }
.sx-plain strong { display: block; margin-bottom: 4px; font: 800 21px/1.3 var(--font-display); }
.sx-plain a { color: inherit; font-weight: 700; text-underline-offset: 4px; }

/* letter on the door */
.sx-sheet { display: grid; grid-template-columns: 4fr 7fr; gap: 32px 64px; align-items: start; padding: 72px 72px 64px; }
.sx-sheet h2 { margin: 0; font: 800 48px/1.06 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.sx-sheet .body p { margin: 0 0 18px; font-size: 21px; line-height: 1.6; max-width: 640px; }
.sx-sheet .body p:first-child { font: 700 28px/1.4 var(--font-display); letter-spacing: -.01em; margin-bottom: 22px; }
.sx-sheet .body p.sig { margin: 28px 0 0; font: 700 20px/1.3 var(--font-display); }
.sx-sheet .acts { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 26px; }
.sx-sheet .acts a.sx-arrow { color: #1C2226; }

.sx-faqlink { margin-top: 18px; }

/* footer */
.sx-foot { background: #14292D; color: #F2EEE6; padding: 64px 0 56px; }
.sx-foot .web-wrap { display: grid; grid-template-columns: 1fr auto; gap: 28px 48px; align-items: start; }
.sx-foot-brand { display: flex; flex-direction: column; gap: 14px; }
.sx-foot-brand img { display: block; width: 118px; height: 54px; }
.sx-foot-brand p { margin: 0; font: 700 18px/1.3 var(--font-display); color: #CBD5D5; }
.sx-foot nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.sx-foot nav a { min-height: 44px; display: inline-flex; align-items: center; color: #F2EEE6; font: 600 16px/1 var(--font-body); text-decoration: none; }
.sx-foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sx-legal { grid-column: 1 / -1; margin: 0; padding-top: 22px; box-shadow: inset 0 1px 0 rgba(242,238,230,.14); font-size: 15px; color: #CBD5D5; }

/* depth that follows the scroll; --p is set per section from -1 to 1 */
[data-depth].hs-door::before, [data-depth] .sx-door.home::before { background-position: 0 calc(var(--p, 0) * 56px); }
[data-depth].hs-door::after { background-position: 0 calc(var(--p, 0) * 24px); }
.sx-lamp { position: absolute; inset: -20% -10%; pointer-events: none;
  background: radial-gradient(48% 42% at calc(18% + var(--p, 0) * 10%) calc(14% - var(--p, 0) * 12%), rgba(255,184,100,.28), rgba(255,184,100,.08) 42%, rgba(255,184,100,0) 70%); }

.wl a:focus-visible, .wl button:focus-visible, .wl input:focus-visible, .wl summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.sx [data-theme="day"] a:focus-visible, .sx [data-theme="day"] button:focus-visible, .sx .hs-paper a:focus-visible, .sx .sx-light a:focus-visible,
.sx .sx-light button:focus-visible, .sx .sx-light summary:focus-visible, .sx .sx-light input:focus-visible { outline-color: #172126; }

@media (max-width: 1140px) {
  .sx-story-grid { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; }
  .sx-doors { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sx-story { padding: 64px 0 40px; }
  .sx-story-grid { display: block; }
  .sx-intro { padding-bottom: 20px; }
  .sx-pin { position: sticky; top: 0; padding: 12px 0 14px; margin: 0 -16px; background: var(--sx-pinbg, #1E3A3F); }
  .sx-phone.d { display: none; }
  .sx-phone.m { display: block; }
  .sx-steps { position: relative; z-index: 1; }
  .sx-step { min-height: 360px; padding: 24px 0 0; opacity: 1; }
  .sx-step:last-child { min-height: 200px; }
  .sx-step h3 { font-size: 26px; }
  .sx-step p { font-size: 17px; }
  .sx-door { padding: 32px 22px 0; min-height: 0; border-radius: 22px; gap: 24px; }
  .sx-door-copy h3 { font-size: 28px; }
  .sx-door-copy p { font-size: 17px; }
  .wl .wl-statement { font-size: 28px; }
  .sx-plain { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .sx-sheet { grid-template-columns: 1fr; gap: 20px; padding: 36px 22px 30px; }
  .sx-sheet h2 { font-size: 32px; }
  .sx-sheet .body p { font-size: 18px; }
  .sx-sheet .body p:first-child { font-size: 21px; }
  .sx-foot .web-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 374px) {
  .sx-phone.m { zoom: .9; }
  .sx-crop { zoom: .9; }
  .wl-chip { padding: 0 14px; }
}
@media (max-width: 344px) { .sx-phone.m, .sx-crop { zoom: .8; } }
@media (prefers-reduced-motion: reduce) {
  .sx-story *, .sx-story *::before, .sx-storybg i { transition: none !important; }
  .sx-step { opacity: 1; }
}

/* A · Night door */
.sx-a { --sx-accent: #F5B841; }
.sx-a .sx-head { position: absolute; left: 0; right: 0; top: 0; z-index: 5; color: var(--on-door); }
.sx-a .wl-hero { height: auto; }
@media (min-width: 1141px) { .sx-a .wl-hero .wl-copy { width: calc(max(32px, calc(50% - 568px)) + 456px); } }
.sx-a .wl-hero .wl-media { height: clamp(700px, 54vw, 790px); bottom: auto; }
.sx-a .wl-hero .wl-copy { padding-top: 168px; min-height: clamp(700px, 54vw, 790px); }
.sx-a .sx-trustbar { position: relative; z-index: 2; }
.sx-a .sx-trustbar .sx-trust { margin: 0; padding: 22px 0 34px; gap: 8px 40px; }
.sx-a .sx-story { background: #17302F; color: var(--on-door); --sx-pinbg: #17302F; }
.sx-a .sx-storybg .day, .sx-a .sx-storybg .dusk, .sx-a .sx-storybg .night { display: none; }
.sx-a .sx-story .web-lead { color: var(--on-door-muted); }
.sx-a .sx-step p:not(.sx-time) { color: var(--on-door-muted); }
.sx-a .sx-steps { box-shadow: inset 2px 0 0 rgba(242,238,230,.12); padding-left: 32px; }
.sx-a .sx-step { position: relative; }
.sx-a .sx-step::before { content: ''; position: absolute; left: -39px; top: 46px; width: 12px; height: 12px; border-radius: 50%; background: #17302F;
  box-shadow: inset 0 0 0 2px rgba(242,238,230,.4); transition: background .3s ease, box-shadow .3s ease; }
.sx-a .s1 .sx-step[data-step="1"]::before, .sx-a .s2 .sx-step[data-step="2"]::before, .sx-a .s3 .sx-step[data-step="3"]::before, .sx-a .s4 .sx-step[data-step="4"]::before, .sx-a .s5 .sx-step[data-step="5"]::before, .sx-a .sx-static .sx-step::before { background: #F5B841; box-shadow: 0 0 0 5px rgba(245,184,65,.18); }
.sx-a .sx-doorsband { padding: 96px 0; }
.sx-a .sx-letterband { padding: 112px 0 64px; }
.sx-a .sx-priv { background: #F7F4EE; color: #1C2226; }
.sx-a .sx-priv .web-kicker { color: #4A5357; }
.sx-a .sx-priv .wl-statement span, .sx-a .sx-plain li { color: #4A5357; }
.sx-a .sx-plain li { box-shadow: inset 0 1px 0 rgba(28,34,38,.16); }
.sx-a .sx-plain strong { color: #1C2226; }
.sx-a .sx-faqband { --wl-faq-line: rgba(242,238,230,.16); --wl-faq-muted: var(--on-door-muted); }
@media (max-width: 1140px) {
  .sx-a .sx-head { position: relative; background: #1E2E2D; }
  .sx-a .wl-hero .wl-copy { padding: 24px 16px 36px; min-height: 0; }
  .sx-a .wl-hero .wl-media { height: auto; }
  .sx-a .sx-trustbar { order: 3; }
  .sx-a .sx-trustbar .sx-trust { padding: 20px 0 32px; flex-direction: column; }
  .sx-a .wl-hero .wl-media { order: 2; aspect-ratio: 16 / 9; }
  .sx-a .wl-hero .wl-media > img, .sx-a .wl-hero .wl-media > video { object-position: 50% 50%; }
}
@media (max-width: 760px) {
  .sx-a .sx-steps { padding-left: 0; box-shadow: none; }
  .sx-a .sx-step::before { display: none; }
  .sx-a .sx-doorsband, .sx-a .sx-letterband { padding: 64px 0; }
}

/* one enamel door for the whole page: the root carries the colour and the texture, sections are see-through */
.web.cm { overflow: clip; --fade: 150px; background-color: #1E3A3F; }
.cm .wl-hero, .cm .sx-story, .cm .cm-sec, .cm .sx-foot { background: transparent; }
.cm .sx-storybg, .cm .hs-lamp, .cm .sx-lamp { display: none; }
.cm-sec { position: relative; }

/* the hero: the video melts into the door on its left and bottom edges */
.cm .wl-hero .wl-media {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%), linear-gradient(180deg, #000 78%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 12%), linear-gradient(180deg, #000 78%, transparent);
  mask-composite: intersect; }
.cm .sx-trustbar .sx-trust { padding: 18px 0 0; }

/* the header sits over the video's sunny corner on desktop: its links get a solid dark backing there */
@media (min-width: 1141px) { .cm .sx-nav { padding: 4px; border-radius: 26px; background: rgba(15,35,35,.86); box-shadow: inset 0 0 0 1px rgba(242,238,230,.1); } }

/* the story */
.cm .sx-story { padding: 88px 0 72px; }
.cm .sx-static .sx-steps { padding-bottom: 0; }
.cm .sx-static .sx-step, .cm .sx-static .sx-step:last-child { padding: 28px 0 0; }

/* parents and teachers */
.cm .cm-doors { padding: 24px 0 72px; }
.cm .sx-door { min-height: 600px; }
.cm .sx-door.home { background: rgba(23,48,47,.55); box-shadow: inset 0 0 0 1px rgba(242,238,230,.12), 0 30px 60px -34px rgba(0,0,0,.55); }
.cm .sx-door.home::before { display: none; }

/* the warm beige area: in from the door, out to the door, no hard edge and no text in the fades */
.cm .cm-warm { color: #1C2226; padding: calc(var(--fade) + 40px) 0 calc(var(--fade) + 24px);
  background: linear-gradient(180deg, rgba(241,230,211,0) calc(var(--fade) * 0), rgba(241,230,211,0.1) calc(var(--fade) * 0.12), rgba(241,230,211,0.26) calc(var(--fade) * 0.25), rgba(241,230,211,0.46) calc(var(--fade) * 0.4), rgba(241,230,211,0.66) calc(var(--fade) * 0.55), rgba(241,230,211,0.82) calc(var(--fade) * 0.7), rgba(241,230,211,0.94) calc(var(--fade) * 0.85), rgba(241,230,211,1) calc(var(--fade) * 1), rgba(241,230,211,1) calc(100% - var(--fade) * 1), rgba(241,230,211,0.94) calc(100% - var(--fade) * 0.85), rgba(241,230,211,0.82) calc(100% - var(--fade) * 0.7), rgba(241,230,211,0.66) calc(100% - var(--fade) * 0.55), rgba(241,230,211,0.46) calc(100% - var(--fade) * 0.4), rgba(241,230,211,0.26) calc(100% - var(--fade) * 0.25), rgba(241,230,211,0.1) calc(100% - var(--fade) * 0.12), rgba(241,230,211,0) calc(100% - var(--fade) * 0)); }
.cm .cm-warm .web-kicker { color: #4A5357; }
.cm .cm-warm .wl-statement span, .cm .cm-warm .sx-plain li { color: #4A5357; }
.cm .cm-warm .sx-plain li { box-shadow: inset 0 1px 0 rgba(28,34,38,.16); }
.cm .cm-warm .sx-plain strong { color: #1C2226; }
.cm .cm-warm .cm-letter { margin-top: 72px; }
.cm .cm-warm .hs-lift { filter: drop-shadow(0 1px 1px rgba(84,58,24,.22)) drop-shadow(-2px 5px 8px rgba(84,58,24,.16)) drop-shadow(-6px 16px 30px rgba(84,58,24,.16)); }

/* questions and the footer stay on the same door */
.cm .cm-faq { padding: 24px 0 88px; --wl-faq-line: rgba(242,238,230,.16); --wl-faq-muted: var(--on-door-muted); }
.cm .cm-faq .web-lead { color: var(--on-door-muted); }
.cm .sx-foot { padding: 48px 0 48px; }
.cm .sx-foot .web-wrap { padding-top: 8px; }

@media (max-width: 1140px) {
  .cm .wl-hero .wl-media { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
    -webkit-mask-composite: source-over; mask-composite: add; }
  .cm .sx-head { background: transparent; }
}
@media (max-width: 760px) {
  .cm { --fade: 104px; }
  .cm .sx-story { padding: 56px 0 40px; }
  .cm .sx-pin { background: linear-gradient(180deg, #1E3A3F calc(100% - 18px), rgba(30,58,63,0)); }
  .cm .cm-doors { padding: 8px 0 48px; }
  .cm .sx-door { min-height: 0; }
  .cm .cm-warm { padding: calc(var(--fade) + 24px) 0 calc(var(--fade) + 8px); }
  .cm .cm-warm .cm-letter { margin-top: 48px; }
  .cm .cm-faq { padding: 8px 0 56px; }
  .cm .sx-foot { padding: 32px 0 40px; }
}

/* the hero video: on desktop it stays clear of the form column (40 px or more) and sits on the hero's floor */
.cm .wl-hero { --hh: clamp(700px, 54vw, 790px); --mw: min(calc(85.8vw + 118px), calc(168.3vw - 871px), calc(var(--hh) * 1.7778)); }
@media (min-width: 1141px) {
  .cm .wl-hero .wl-media { top: calc(var(--hh) - var(--mw) * .5625); right: -2%; width: var(--mw); height: calc(var(--mw) * .5625);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%), linear-gradient(180deg, transparent, #000 7%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%), linear-gradient(180deg, transparent, #000 7%, #000 78%, transparent); }
  .cm .wl-hero .wl-copy { width: calc(max(32px, calc(50% - 568px)) + 456px); min-height: var(--hh); }
}
/* phones: tighter on the staircase so the child reads clearly */
@media (max-width: 760px) {
  .cm .wl-hero .wl-media { aspect-ratio: 1.05; }
  .cm .wl-hero .wl-media > img, .cm .wl-hero .wl-media > video { object-position: 90% 50%; }
}

.sx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-inline { color: inherit; font-weight: 700; text-underline-offset: 3px; }

/* the thank-you, with Dawn holding a note */
.pg-thanks { flex-direction: row; align-items: center; gap: 18px; }
.pg-thanks > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pg-thanks h2:focus { outline: none; }
.pg-dawn-note { flex: none; width: 104px; height: auto; }

/* inner pages: the header sits on the door */
.pg-head { position: relative !important; }
.pg-intro { padding: 48px 0 72px; }
.pg-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.pg-intro.has-art .pg-intro-grid { grid-template-columns: minmax(0, 1fr) 380px; }
.pg-intro-copy { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.pg-intro .web-h1 { font-size: 64px; line-height: 1.04; text-wrap: balance; }
.pg-intro .web-lead { color: var(--on-door-muted); }
.pg-intro-art { display: flex; justify-content: center; }
.pg-intro .web-kicker { margin: 0; color: #F5B841; }
.pg-chipnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pg-chipnav a { min-height: 44px; padding: 0 18px; border-radius: 22px; display: inline-flex; align-items: center; color: var(--on-door); font: 600 16px/1 var(--font-body);
  text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(242,238,230,.5); }
.pg-chipnav a:hover { background: rgba(242,238,230,.08); }

/* cropped phones: cut at a set height with a soft fade */
.pg-crop { margin: 0; position: relative; overflow: hidden; display: flex; justify-content: center;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent); }
.pg-crop .web-phone { align-self: flex-start; }

/* the parent and teacher cards: both phones cut at the same height; they rise in, then one small action plays once */
.pg-doors .sx-doors { align-items: stretch; }
.pg-door { min-height: 0 !important; padding-bottom: 0; }
.pg-door-art { margin-top: auto; height: 500px; display: flex; justify-content: center; align-items: flex-start; }
.pg-door .pg-crop { height: 500px !important; transform: translateY(56px); opacity: 0; transition: transform .7s var(--ease-out-soft), opacity .5s ease; }
.pg-door.school .pg-crop { transition-delay: .12s; }
.dr-mw, .dr-fw { position: relative; flex: none; display: inline-block; }
.dr-mw { width: 56px; height: 56px; }
.dr-mw .hs-slot { position: absolute; inset: 0; transition: opacity .15s ease; }
.dr-m { position: absolute; inset: 0; opacity: 0; transform: translateY(-46px) scale(1.12); }
.dr-a { display: none; }
.dr-fw { width: 30px; height: 30px; display: grid; place-items: center; }
.dr-ring { position: absolute; inset: 1px; border-radius: 50%; border: 2px dashed #808C93; transition: opacity .15s ease; }
.dr-f { opacity: 0; transform: scale(.4); }
.pg-doors.is-in .pg-crop { transform: none; opacity: 1; }
.pg-doors.is-in .dr-m { opacity: 1; transform: none; transition: transform 613ms linear(0.000, 0.036, 0.129, 0.256, 0.399, 0.543, 0.678, 0.798, 0.898, 0.977, 1.036, 1.075, 1.099, 1.109, 1.109, 1.101, 1.088, 1.073, 1.057, 1.042, 1.028, 1.016, 1.006, 0.999, 0.993, 0.990, 0.988, 0.988, 1) 1s, opacity .12s ease 1s; }
.pg-doors.is-in .dr-mw .hs-slot { opacity: 0; transition-delay: 1.2s; }
.pg-doors.is-in .dr-f { opacity: 1; transform: none; transition: transform 511ms linear(0.000, 0.033, 0.116, 0.231, 0.362, 0.496, 0.623, 0.738, 0.837, 0.919, 0.983, 1.030, 1.062, 1.081, 1.090, 1.090, 1.085, 1.076, 1.065, 1.053, 1.041, 1.030, 1.020, 1.012, 1.005, 1.000, 0.996, 0.994, 1) 1.15s, opacity .12s ease 1.15s; }
.pg-doors.is-in .dr-ring { opacity: 0; transition-delay: 1.2s; }
.pg-doors.is-in .dr-q { display: none; }
.pg-doors.is-in .dr-a { display: inline; }
@supports not (transition-timing-function: linear(0, 1)) {
  .pg-doors.is-in .dr-m { transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
  .pg-doors.is-in .dr-f { transition-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
}

/* the closing waitlist section, the only extra warmth: Dawn beside the form */
.pg-end { padding: 72px 0 40px; }
.pg-end-grid { display: grid; grid-template-columns: 240px minmax(0, 600px); justify-content: center; gap: 24px 56px; align-items: center; }
.pg-end-dawn { position: relative; width: 240px; height: 230px; }
.pg-end-dawn img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s ease; }
.pg-end-dawn .n { opacity: 0; }
.pg-end-grid:has(.is-done) .pg-end-dawn .w { opacity: 0; }
.pg-end-grid:has(.is-done) .pg-end-dawn .n { opacity: 1; }
.pg-end-copy { display: flex; flex-direction: column; gap: 16px; }
.pg-end-copy .web-lead { color: var(--on-door-muted); margin-bottom: 8px; }
.pg-end-copy .wl-chip { color: var(--on-door); box-shadow: inset 0 0 0 1.5px rgba(242,238,230,.5); }
.pg-end-copy .wl-chip.on { color: #1C2226; box-shadow: inset 0 0 0 2.5px var(--amber); }
.pg-end-copy .wl-fine { color: var(--on-door-muted); }
.pg-end .pg-thanks .pg-dawn-note { display: none; }

/* how it works: one school day, in order */
.pg-day { padding: 24px 0 72px; }
.pg-day-row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px 96px; align-items: center; padding: 28px 0; }
.pg-day-row:nth-child(even) { grid-template-columns: 360px minmax(0, 1fr); }
.pg-day-row:nth-child(even) .pg-day-copy { order: 2; }
.pg-day-row + .pg-day-row { box-shadow: inset 0 1px 0 rgba(242,238,230,.12); }
.pg-day-copy { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.pg-day-copy .t { margin: 0; font: 700 16px/1 var(--font-body); color: #F5B841; }
.pg-day-copy h3 { margin: 0; font: 800 36px/1.12 var(--font-display); letter-spacing: -.015em; }
.pg-day-copy p:not(.t) { margin: 0; font-size: 19px; line-height: 1.6; color: var(--on-door-muted); }
.pg-day-art { display: flex; justify-content: center; }
.pg-split { padding: 56px 0; }
.pg-split .web-split .copy p:not(.web-kicker) { color: var(--on-door-muted); font-size: 19px; line-height: 1.6; margin: 0; }
.pg-split .web-split .copy h2 { margin: 0; }
.pg-note { margin: 28px 0 0; font-size: 16px; color: #4A5357; }

/* teachers: three steps and what you see */
.pg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 8px 0 72px; list-style: none; margin: 0; }
.pg-steps li { position: relative; border-radius: 24px; padding: 32px 28px 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  background: rgba(23,48,47,.55); box-shadow: inset 0 0 0 1px rgba(242,238,230,.12); }
.pg-steps .n { font: 800 18px/1 var(--font-display); color: #F5B841; }
.pg-steps h3 { margin: 0; font: 800 26px/1.2 var(--font-display); }
.pg-steps p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--on-door-muted); }
.pg-steps .pg-crop { margin-top: 16px; }
.pg-see { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; margin: 28px 0 0; padding: 0; list-style: none; }
.pg-see li { padding: 22px 0; box-shadow: inset 0 1px 0 rgba(28,34,38,.16); color: #4A5357; font-size: 18px; line-height: 1.55; }
.pg-see strong { display: block; color: #1C2226; font: 800 22px/1.3 var(--font-display); margin-bottom: 4px; }
.pg-faqsec { padding: 24px 0 64px; --wl-faq-line: rgba(242,238,230,.16); --wl-faq-muted: var(--on-door-muted); }

/* FAQ page */
.pg-faqgroups { padding: 8px 0 48px; --wl-faq-line: rgba(242,238,230,.16); --wl-faq-muted: var(--on-door-muted); }
.pg-faqgroup { display: grid; grid-template-columns: 4fr 7fr; gap: 16px 64px; padding: 36px 0; scroll-margin-top: 16px; }
.pg-faqgroup + .pg-faqgroup { box-shadow: inset 0 1px 0 rgba(242,238,230,.12); }
.pg-faqgroup h2 { margin: 0; font: 800 30px/1.15 var(--font-display); }

/* about */
.pg-beliefs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; margin: 0; padding: 0; list-style: none; }
.pg-beliefs li { padding: 26px 0; box-shadow: inset 0 1px 0 rgba(242,238,230,.14); color: var(--on-door-muted); font-size: 18px; line-height: 1.55; }
.pg-beliefs strong { display: block; color: var(--on-door); font: 800 24px/1.25 var(--font-display); margin-bottom: 6px; }
.pg-team { padding: 8px 0 24px; }
.pg-team p { margin: 0; max-width: 640px; font-size: 19px; line-height: 1.6; color: var(--on-door-muted); }
.pg-team a { color: var(--on-door); }

/* contact */
.pg-contact { padding: 8px 0 72px; }
.pg-contact-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.pg-card { padding: 32px; border-radius: 22px; background: #FFFDF8; color: #1C2226; box-shadow: 0 0 0 1px rgba(84,58,24,.12), 0 30px 60px -30px rgba(0,0,0,.55); }
.pg-card .wl-label, .pg-card legend { color: #1C2226; }
.pg-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.pg-field label, .pg-card legend { font: 700 17px/1.3 var(--font-body); }
.pg-field label span, .pg-card legend span { font-weight: 400; color: #4A5357; }
.pg-input { min-height: 56px; border: 0; border-radius: 14px; padding: 0 16px; font: 400 18px/1.3 var(--font-body); background: #FFFFFF; color: #1C2226; box-shadow: inset 0 0 0 1.5px #6E7A80; }
.pg-input.area { min-height: 168px; padding: 14px 16px; resize: vertical; }
.pg-input.err { box-shadow: inset 0 0 0 2.5px #1C2226; }
.pg-card .wl-chip { color: #1C2226; box-shadow: inset 0 0 0 1.5px rgba(28,34,38,.45); }
.pg-card .wl-chip.on { background: #FFF1CF; box-shadow: inset 0 0 0 2.5px var(--amber); }
.pg-card fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.pg-card legend { margin-bottom: 10px; padding: 0; }
.pg-card .web-btn { width: 100%; cursor: pointer; }
.pg-card .wl-fine { color: #4A5357; margin-top: 14px; }
.pg-card .wl-err { background: #F3EEE4; margin: -6px 0 16px; }
.pg-sent h2 { margin: 0 0 8px; font: 800 30px/1.15 var(--font-display); }
.pg-sent p { margin: 0 0 6px; font-size: 18px; line-height: 1.55; color: #4A5357; overflow-wrap: anywhere; }
.pg-aside { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.pg-aside h2 { margin: 0; font: 800 26px/1.2 var(--font-display); }
.pg-aside p { margin: 0; color: var(--on-door-muted); font-size: 18px; line-height: 1.55; }
.pg-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 16px; background: rgba(23,48,47,.7); box-shadow: inset 0 0 0 1px rgba(242,238,230,.14); }
.pg-copy code { font: 700 19px/1.2 var(--font-body); color: var(--on-door); user-select: all; }
.pg-copy button { appearance: none; border: 0; min-height: 44px; padding: 0 18px; border-radius: 22px; background: transparent; color: var(--on-door); font: 700 16px/1 var(--font-body);
  box-shadow: inset 0 0 0 2px rgba(242,238,230,.6); cursor: pointer; }

/* long reading pages: the calm light surface, contents beside the text */
.pg-doc { gap: 64px; }
.pg-doc aside { position: sticky; top: 24px; }
.pg-doc aside a { color: #1C2226; }
.pg-doc-label { margin: 0 0 6px; font: 700 15px/1 var(--font-body); color: #4A5357; }
.pg-doc article a { color: #1C2226; font-weight: 700; text-underline-offset: 3px; }
.pg-doc article p, .pg-doc article li { color: #1C2226; }
.pg-doc article h2 { scroll-margin-top: 16px; }
.cm .pg-docwarm { padding-top: calc(var(--fade) + 16px); }
@media (max-width: 960px) { .pg-doc aside { position: static; } }

/* confirm and 404 */
.pg-center { padding: 48px 0 96px; }
.pg-center-card { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.pg-center-card img { width: 180px; height: auto; }
.pg-center-card .web-h1 { font-size: 56px; text-wrap: balance; }
.pg-center-card .web-lead { color: var(--on-door-muted); }
.pg-center-card .acts { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; align-items: center; margin-top: 6px; }
.pg-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }

@media (max-width: 1140px) {
  .pg-intro.has-art .pg-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-day-row, .pg-day-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pg-day-row:nth-child(even) .pg-day-copy { order: 0; }
  .pg-steps { grid-template-columns: 1fr; }
  .pg-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pg-intro { padding: 16px 0 40px; }
  .pg-intro .web-h1 { font-size: 42px; }
  .pg-door-art, .pg-door .pg-crop { height: 420px !important; }
  .pg-end { padding: 48px 0 64px; }
  .pg-end-grid { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .pg-end-dawn { width: 150px; height: 144px; }
  .pg-thanks { align-items: flex-start; }
  .pg-dawn-note { width: 84px; }
  .pg-day { padding: 0 0 48px; }
  .pg-day-row { padding: 28px 0; }
  .pg-day-copy h3 { font-size: 28px; }
  .pg-day-copy p:not(.t) { font-size: 17px; }
  .pg-split { padding: 32px 0; }
  .pg-see, .pg-beliefs { grid-template-columns: 1fr; }
  .pg-faqgroup { grid-template-columns: 1fr; padding: 28px 0; }
  .pg-faqgroup h2 { font-size: 26px; }
  .pg-card { padding: 22px 18px; }
  .pg-center-card .web-h1 { font-size: 40px; }
  .pg-center-card img { width: 140px; }
}
@media (max-width: 374px) { .pg-crop { zoom: .9; } }
@media (prefers-reduced-motion: reduce) {
  .pg-door .pg-crop, .dr-m, .dr-f, .dr-mw .hs-slot, .dr-ring, .pg-end-dawn img { transition: none !important; }
  .pg-door .pg-crop { transform: none; opacity: 1; }
  .dr-m, .dr-f { opacity: 1; transform: none; }
  .dr-mw .hs-slot, .dr-ring { opacity: 0; }
  .dr-q { display: none; }
  .dr-a { display: inline; }
}