:root {
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-wordmark:1.375rem;
  --t-signin-wordmark:40px; --t-signin-aside:18px; --t-signin-title:44px;
  --t-signin-lede:24px; --t-signin-label:20px; --t-signin-field:19px;
  --t-signin-submit:22px; --t-signin-link:18px; --t-signin-alert-title:23px;
  --t-signin-alert:19px;
  --t-start-wordmark:42px; --t-start-aside:17px; --t-start-title:64px;
  --t-start-second:45px; --t-start-lede:24px; --t-start-label:16px;
  --t-start-audience:22px; --t-start-fact:16px; --t-start-small:17.5px;
  --t-start-action:22px; --t-start-note-label:15px; --t-start-note-lead:19.5px;
  --t-start-note:16.5px; --t-start-note-way:15px; --t-start-more:19px;
  --t-code-wordmark:46px; --t-code-title:53px; --t-code-lede:24px; --t-code-eyebrow:17px;
  --t-code-turn:50px; --t-code-where:24px; --t-code-digit:34px; --t-code-action:24px;
  --t-code-note:17px; --t-code-resend:18px;
  --t-code-wordmark-narrow:28px; --t-code-title-narrow:30px; --t-code-lede-narrow:16px;
  --t-code-turn-narrow:23px; --t-code-note-narrow:14px;
  --t-setup-wordmark:40px; --t-setup-title:41px; --t-setup-lede:21px; --t-setup-label:18px;
  --t-setup-hint:15.5px; --t-setup-input:17px; --t-setup-check:16px; --t-setup-action:20px;
  --t-setup-note:16px; --t-setup-step:18px; --t-setup-step-label:17px;
  --t-admission-title:36px; --t-admission-lede:17px; --t-admission-lead:19px;
  --t-admission-note:16px;
  --h-t-id-title:48px; --h-t-id-lede:18px; --h-t-id-card-title:26px; --h-t-id-sub:17px;
  --h-t-id-label:16px; --h-t-id-input:18px; --h-t-id-action:20px; --h-t-id-email:26px;
  --h-t-id-body:17px; --h-t-id-panel-title:18px; --h-t-id-panel:16px; --h-t-id-pill:14px;
  --h-t-op-wordmark:30px; --h-t-op-badge:14px; --h-t-op-title:48px; --h-t-op-lede:21px;
  --h-t-op-card-title:28px; --h-t-op-body:17px; --h-t-op-th:13px; --h-t-op-name:19px;
  --h-t-op-queue-title:40px; --h-t-op-sub:15px;
  --h-t-op-desig-card:22px; --h-t-op-desig-body:16px; --h-t-op-desig-small:14px;
  --avatar-initials:32px;         
  --avatar-initials-small:22px;   
  --role-ground: var(--selection);
  --role-ink:    var(--accent);
  --t-arrival:2.5rem;
  --t-page:1.75rem; --t-value:1.25rem; --t-card:1.125rem; --t-lede:1rem;
  --t-body:.9375rem; --t-control:.9375rem;
  --t-nav:.875rem; --t-label:.875rem; --t-help:.8125rem; --t-eyebrow:.75rem;
  --w-normal:400; --w-medium:540; --w-semi:600; --w-strong:650;
  --w-mid:500; --w-bold:700; --w-heavy:800;
  --lh-tight:1.2; --lh-snug:1.32; --lh-normal:1.55;
  --lh-flat:1; --lh-tighter:1.1; --lh-relaxed:1.4; --lh-card:1.45;
  --lh-body:1.5; --lh-loose:1.6;
  --track-tight:-.018em; --track-snug:-.011em; --track-wide:.08em;
  --track-title:-.02em; --track-plane:-.012em;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem;
  --region-mark:56px;   
  --container:84rem;    
  --details:320px;      
  --focused:640px;      
  --settings-content:1040px; 
  --prose:72ch;         
  --field:480px;        
  --rail:21rem;
  --aside:17rem;        
  --sections:16.5rem;   
  --setting-label:230px; 
  --control-h:2.5rem;   
  --col-sm:6rem; --col-md:7rem;
  --col-xl:9rem; --col-2xl:10rem; --col-3xl:11rem;
  --bp-wide:64rem; --bp-narrow:52rem;
  --arrival-min:24rem; --card-min:360px;
  --card-gap:var(--s5);
  --console-gutter:var(--s5);
  --radius:8px;
  --radius-sm:5px;
  --hair:1px;           
  --edge:2px;           
  --ink:#12181a; --quiet:#556063; --faint:#687174;
  --rule:#e0e6e6; --rule-strong:#c6d0d0;
  --page:#fff; --raised:#f6f8f8; --sunken:#eceff0; --on-accent:#fff;
  --mark-warm:#f59300; --mark-green:#07a877; --mark-violet:#4a2ff0;
  --sky-top:#aaccf1; --sky-band:#e6dde4; --sky-foot:#8d9cbb;
  --accent:#2563eb; --accent-hover:#1d4ed8; --accent-deep:#1e40af;
  --accent-edge:#bfdbfe;
  --selection:#eff6ff;
  --caution:#8a4b00; --caution-bg:#fdf3e7; --caution-rule:#e5c9a3;
  --danger:#8f2c2c; --danger-bg:#fcf1f1; --danger-rule:#e0b8b8;
  --accent-focus:#93c5fd;
  --focus:0 0 0 2px var(--page), 0 0 0 4px var(--accent-focus),
          0 0 0 5px var(--accent);
  --ease:.12s ease;
  --h-page:        #f3f7fa;
  --h-card:        #ffffff;
  --h-line:        #e5edf3;
  --h-line-soft:   #eef3f7;
  --h-ink:         #0e1b3d;
  --h-ink-2:       #3f4d64;
  --h-muted:       #56657c;
  --h-accent:      #2563eb;
  --h-accent-hi:   #1e40af;
  --h-accent-soft: #eff6ff;
  --op-bar:        #1e1b4b;
  --op-bar-muted:  rgba(255, 255, 255, 0.78);
  --op-bar-line:   rgba(255, 255, 255, 0.22);
  --op-chip:       #4c1d95;
  --op-chip-ink:   #ddd6fe;
  --op-accent:     #a78bfa;
  --h-link:        var(--h-accent);
  --h-danger:      #c02a37;
  --h-danger-soft: #fdecee;
  --h-danger-line: #f6d3d8;
  --h-warn:        #92610f;
  --h-warn-soft:   #fef6e7;
  --h-warn-line:   #f7e3be;
  --h-fill-02:            #e2e8ef;
  --h-fill-04:            #e3f5e9;
  --h-fill-05:            #e7ecf2;
  --h-fill-06:            #e8eef7;
  --h-fill-07:            #edf1f5;
  --h-fill-08:            #eef3f8;
  --h-fill-10:            #f1f4f7;
  --h-fill-11:            #f1f5f9;
  --h-fill-12:            #f4f7fa;
  --h-fill-15:            #f7fafc;
  --h-fill-16:            #f8fafc;
  --h-fill-17:            #f8fbfd;
  --h-fill-18:            #fafcfe;
  --h-fill-19:            #fbdee2;
  --h-fill-20:            #fbfdfe;
  --type-wordmark:        22px;   
  --type-nav:             15px;   
  --type-page-title:      32px;   
  --type-section:         23px;   
  --type-card-title:      16px;   
  --type-body:            15px;   
  --type-lede:            17px;   
  --type-meta:            14px;   
  --type-meta-strong:     14px;   
  --type-meta-small:      13px;   
  --type-pill:            13px;   
  --type-figure:          30px;   
  --h-w-normal:    var(--w-normal);
  --h-w-mid:       var(--w-mid);
  --h-w-semi:      var(--w-semi);
  --h-w-bold:      var(--w-bold);
  --h-lh-flat:     var(--lh-flat);
  --h-lh-tight:    var(--lh-tighter);
  --h-lh-snug:     var(--lh-relaxed);
  --h-lh-card:     var(--lh-card);
  --h-lh-body:     var(--lh-body);
  --h-lh-prose:    var(--lh-normal);
  --h-lh-loose:    var(--lh-loose);
  --h-track-title: var(--track-title);
  --h-track-snug:  var(--track-plane);
  --h-radius:      14px;
  --h-radius-sm:   10px;
  --h-line-strong:        #d6e0e9;   
  --h-line-hover:         #c3d1de;   
  --h-line-dashed:        #cbd9e6;   
  --h-mark:               #8fa6bb;   
  --h-mark-step:          #5a718c;   
  --h-mark-row:           #7d8ea2;   
  --h-chip-ink:           #4d5f75;   
  --h-unset-ink:          #5a6b7f;   
  --h-ok:                 #14663a;   
  --h-ok-2:               #1a6b3c;   
  --h-ok-soft:            #e5f5ea;   
  --h-ok-line:            #cfe8db;   
  --h-info-ink:           #1a4fa0;   
  --h-count-ink:          #2d4f86;   
  --h-policy:             #5b3ba0;   
  --h-policy-soft:        #efe8fb;   
  --h-critical:           #a81f2d;   
  --h-critical-soft:      #fce5e8;   
  --h-danger-ink:         #8f2531;   
  --h-danger-edge:        #f0c3c9;   
  --h-danger-wash:        #fbdade;   
  --h-warn-wash:          #fdf1dc;   
  --h-warn-note:          #f9e9c9;   
  --h-warn-ink:           #7d520b;   
  --h-failed-line:        #dfe7ee;   
  --h-failed-ink:         var(--h-muted);
  --h-ok-wash:            #eef8f2;   
  --h-area-jobs: var(--h-accent); --h-area-jobs-soft: var(--h-accent-soft);
  --h-area-people: var(--accent-hover); --h-area-people-soft: var(--h-accent-soft);
  --h-area-access: var(--h-accent-hi); --h-area-access-soft: var(--h-accent-soft);
  --h-area-candidates: #4338ca; --h-area-candidates-soft: #eef0fd;
  --h-area-plan: #0e6b85; --h-area-plan-soft: #e4f3f7;
  --h-area-requirements: var(--h-ok); --h-area-requirements-soft: #e9f6ee;
  --h-area-organisation: #0f6b62; --h-area-organisation-soft: #e3f3f0;
  --h-area-billing: #9a4a07; --h-area-billing-soft: #fcf0de;
  --h-area-documents: #6b21a8; --h-area-documents-soft: #f3ebfc;
  --h-area-questions: #9d174d; --h-area-questions-soft: #fbe9f1;
  --h-area-system: #475569; --h-area-system-soft: #eef1f5;
  --role-admin:           #e8f0fe;  --role-admin-ink:           var(--accent-hover);
  --role-recruiter:       #f1ecfe;  --role-recruiter-ink:       #6d28d9;
  --role-hiring-manager:  #e6f5ec;  --role-hiring-manager-ink:  #166534;
  --role-interviewer:     var(--caution-bg);  --role-interviewer-ink:     #b4400f;
  --disc-teal:            #dcf2f4;  --disc-teal-ink:            #0f6b63;
  --disc-rose:            var(--danger-bg);  --disc-rose-ink:            #b0174f;
  --h-info-wash:          #e4edfc;   
  --h-chip:               #e8eef5;      
  --grad-ground:    linear-gradient(180deg,
                      color-mix(in srgb, var(--page) 72%, var(--raised)) 0%,
                      var(--raised) 48%,
                      color-mix(in srgb, var(--sunken) 76%, var(--raised)) 100%);
  --grad-masthead:  linear-gradient(180deg, var(--page) 0%,
                      color-mix(in srgb, var(--page) 86%, var(--raised)) 100%);
  --grad-accent:    linear-gradient(180deg,
                      color-mix(in srgb, var(--accent) 94%, var(--page)) 0%,
                      var(--accent) 54%, var(--accent-deep) 100%);
  --grad-accent-hi: linear-gradient(180deg, var(--accent-hover) 0%,
                      var(--accent-deep) 100%);
  --grad-mark:      linear-gradient(145deg,
                      color-mix(in srgb, var(--selection) 40%, var(--page)) 0%,
                      var(--selection) 56%,
                      color-mix(in srgb, var(--selection) 78%, var(--accent)) 100%);
  --grad-sheen:     linear-gradient(180deg,
                      color-mix(in srgb, var(--page) 90%, var(--selection)) 0%,
                      var(--page) 44%);
}
:root { --heading: #14204a; --not-ink: #c2474c; }
*, *::before, *::after { box-sizing: border-box; }
:root { --gutter: clamp(24px, 6vw, 88px); --lower: var(--h-fill-16); }
body {
  margin: 0;
  font: var(--t-lede)/var(--lh-normal) var(--font);
  color: var(--ink);
  background: var(--page);
  -webkit-text-size-adjust: 100%;
}
.skip {
  position: absolute; left: var(--s2); top: calc(var(--s2) * -8);
  background: var(--page); color: var(--accent);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); z-index: 10;
}
.skip:focus { top: var(--s2); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
.masthead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark anchors doors";
  align-items: center; column-gap: calc(var(--s6) + var(--s2));
  min-height: 64px; padding: 0 var(--gutter);
  background: var(--page);
  border-bottom: var(--hair) solid var(--rule);
}
.wordmark {
  grid-area: mark;
  font-size: var(--t-page); font-weight: var(--w-bold);
  letter-spacing: var(--track-title); color: var(--accent);
}
.anchors { grid-area: anchors; display: flex; align-items: center; gap: var(--s6); }
.anchor { color: var(--ink); text-decoration: none; font-size: var(--t-control); }
.anchor:hover { color: var(--accent); }
.doors { grid-area: doors; display: flex; align-items: center; gap: var(--s3); }
.door {
  display: inline-flex; align-items: center; min-height: var(--control-h);
  padding: 0 var(--s5); border-radius: var(--radius-sm);
  font: var(--w-medium) var(--t-control)/1 var(--font); text-decoration: none;
  border: var(--hair) solid transparent;
}
.door:not(.door-act) { color: var(--accent); border-color: var(--accent); background: var(--page); }
.door:not(.door-act):hover { background: var(--selection); }
.door-act { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.door-act:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.top { position: relative; isolation: isolate; overflow-x: clip; }
.top::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; right: 0; width: 60%; aspect-ratio: 1040 / 680;
  background: url("/assets/hero.ebf8803c3afb.webp") center / 100% 100% no-repeat;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 32%),
    linear-gradient(to bottom, #000 0%, #000 min(58%, 360px), transparent min(92%, 560px));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 32%),
    linear-gradient(to bottom, #000 0%, #000 min(58%, 360px), transparent min(92%, 560px));
  mask-composite: intersect;
  pointer-events: none;
}
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-areas: "copy note";
  column-gap: var(--s7);
  padding: calc(var(--s8) + var(--s4)) var(--gutter) var(--s8);
}
.hero-copy { grid-area: copy; }
.hero h1 {
  margin: 0; max-width: 14em; text-wrap: balance;
  font-size: clamp(var(--t-arrival), 2.4rem + 2.5vw, 4.25rem);
  line-height: var(--lh-tighter); letter-spacing: var(--track-title);
  font-weight: var(--w-bold); color: var(--heading);
}
.hero .lede {
  margin: var(--s5) 0 var(--s6); max-width: 38rem;
  font-size: var(--h-t-region); line-height: var(--lh-relaxed); color: var(--quiet);
}
.hero-copy > p:last-child { margin: 0; }
.act {
  display: inline-flex; align-items: center; gap: var(--s3); min-height: 48px;
  padding: 0 var(--s6); border-radius: var(--radius-sm);
  background: var(--accent); border: var(--hair) solid var(--accent); color: var(--on-accent);
  font: var(--w-semi) var(--t-control)/1 var(--font); text-decoration: none;
}
.act:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.act-icon { width: 18px; height: 18px; }
.note {
  grid-area: note; align-self: start; position: relative;
  color: var(--quiet); font-size: var(--t-body);
}
.note::before {
  content: ""; position: absolute; inset: calc(-1 * var(--s8)); z-index: -1;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--page) 45%, transparent) 55%, transparent);
  pointer-events: none;
}
.note .eyebrow { margin-bottom: var(--s2); }
.note p:last-child { margin: 0; line-height: var(--lh-relaxed); }
.note::after {
  content: ""; display: block; width: 2rem; margin-top: var(--s4);
  border-top: var(--hair) solid var(--accent);
}
.eyebrow {
  margin: 0 0 var(--s3);
  font-size: var(--t-eyebrow); font-weight: var(--w-semi);
  text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--quiet);
}
.band-values {
  padding: var(--s5) var(--gutter) var(--s7);
  border-bottom: var(--hair) solid var(--rule);
}
.values {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
}
.value-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
}
.value-icon { width: 34px; height: 34px; }
.value h2 {
  margin: var(--s4) 0 var(--s2);
  font-size: var(--h-t-plus); font-weight: var(--w-semi);
  line-height: var(--lh-snug); color: var(--heading);
}
.value p { margin: 0 auto; max-width: 18rem; color: var(--quiet); font-size: var(--t-body); line-height: var(--lh-relaxed); }
.band-tour { padding: var(--s8) var(--gutter); background: var(--lower); }
.band-tour > h2, .not h2 {
  margin: 0 0 var(--s4);
  font-size: var(--h-t-page); font-weight: var(--w-bold);
  letter-spacing: var(--track-title); line-height: var(--lh-tight); color: var(--heading);
}
.wide { margin: 0; max-width: 44rem; font-size: var(--h-t-plus); color: var(--quiet); line-height: var(--lh-relaxed); }
[id] { scroll-margin-top: var(--s5); }
.tour {
  display: grid; grid-template-columns: minmax(0, 72fr) minmax(0, 28fr);
  align-items: center; column-gap: var(--s7);
  margin-top: var(--s7);
}
.frame {
  overflow: hidden; background: var(--page);
  border: var(--hair) solid var(--accent-edge); border-radius: 12px;
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--accent-deep) 40%, transparent);
}
.track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.track::-webkit-scrollbar { width: 0; height: 0; }
.track:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .track { scroll-behavior: smooth; } }
.shot { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.shot img { display: block; width: 100%; height: auto; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; }
.step:not(:last-child) { padding-bottom: var(--s6); }
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 16px; top: 32px; bottom: 0;
  border-left: var(--hair) solid var(--h-line-hover);
}
.step-link {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s4);
  color: var(--ink); text-decoration: none;
}
.step-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--h-line-hover); color: var(--ink);
  font: var(--w-semi) var(--t-label)/1 var(--font);
}
.step h3 {
  margin: var(--s1) 0 var(--s1);
  font-size: var(--h-t-plus); font-weight: var(--w-mid);
  line-height: var(--lh-snug); color: var(--heading);
}
.step-line { display: block; font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--faint); }
.step-link:hover h3 { color: var(--accent); }
@media (min-width: 45.0625rem) {
  .step-link[aria-current="step"] .step-mark,
  html:not([data-tour]) .tour:has(#shot-2:target) .step-link[href="#shot-2"] .step-mark,
  html:not([data-tour]) .tour:has(#shot-3:target) .step-link[href="#shot-3"] .step-mark,
  html:not([data-tour]) .tour:has(#shot-4:target) .step-link[href="#shot-4"] .step-mark {
    background: var(--accent); color: var(--on-accent);
  }
  .step-link[aria-current="step"] h3,
  html:not([data-tour]) .tour:has(#shot-2:target) .step-link[href="#shot-2"] h3,
  html:not([data-tour]) .tour:has(#shot-3:target) .step-link[href="#shot-3"] h3,
  html:not([data-tour]) .tour:has(#shot-4:target) .step-link[href="#shot-4"] h3 {
    color: var(--accent);
  }
  .step-link[aria-current="step"] .step-line,
  html:not([data-tour]) .tour:has(#shot-2:target) .step-link[href="#shot-2"] .step-line,
  html:not([data-tour]) .tour:has(#shot-3:target) .step-link[href="#shot-3"] .step-line,
  html:not([data-tour]) .tour:has(#shot-4:target) .step-link[href="#shot-4"] .step-line {
    color: var(--quiet);
  }
  html:not([data-tour]) .tour:has(#shot-2:target, #shot-3:target, #shot-4:target) .step-link[href="#shot-1"] .step-mark {
    background: var(--h-line-hover); color: var(--ink);
  }
  html:not([data-tour]) .tour:has(#shot-2:target, #shot-3:target, #shot-4:target) .step-link[href="#shot-1"] h3 {
    color: var(--heading);
  }
  html:not([data-tour]) .tour:has(#shot-2:target, #shot-3:target, #shot-4:target) .step-link[href="#shot-1"] .step-line {
    color: var(--faint);
  }
}
.band-not { padding: 0 var(--gutter) var(--s8); background: var(--lower); }
.not {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center; column-gap: var(--s7);
  padding: calc(var(--s6) + var(--s2));
  background: var(--selection);
  border: var(--hair) solid var(--accent-edge); border-radius: 16px;
}
.not-copy > p:last-child { margin: 0; font-size: var(--h-t-plus); line-height: var(--lh-relaxed); color: var(--quiet); }
.points {
  list-style: none; margin: 0; padding: var(--s3) 0 var(--s3) var(--s7);
  border-left: var(--hair) solid var(--accent-edge);
}
.points li {
  --mark: 20px;
  display: grid; grid-template-columns: var(--mark) minmax(0, 1fr); align-items: start;
  column-gap: var(--s3); margin: var(--s3) 0;
  font-size: var(--t-lede); line-height: var(--lh-normal); color: var(--ink);
}
.not-mark {
  width: var(--mark); height: var(--mark); color: var(--not-ink);
  margin-top: calc((var(--lh-normal) * var(--t-lede) - var(--mark)) / 2);
}
.foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  padding: var(--s6) var(--gutter); border-top: var(--hair) solid var(--rule);
  background: var(--lower);
  color: var(--quiet); font-size: var(--h-t-body);
}
.foot p { margin: 0; }
.foot a { color: var(--quiet); text-decoration: none; }
.foot a:hover { color: var(--accent); }
@media (max-width: 75rem) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "note"; }
  .top::before { width: 52%; }
  .note { margin-top: var(--s7); max-width: 22rem; }
}
@media (max-width: 45rem) {
  .masthead {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "mark doors" "anchors anchors";
    row-gap: var(--s2); padding-top: var(--s3); padding-bottom: var(--s3);
  }
  .wordmark { font-size: var(--t-value); }
  .doors { justify-self: end; gap: var(--s2); }
  .door { padding: 0 var(--s3); }
  .anchors { gap: var(--s5); }
  .anchor { font-size: var(--t-nav); color: var(--quiet); }
  .top::before { content: none; }
  .hero { padding: var(--s7) var(--gutter) var(--s6); }
  .hero h1 { font-size: var(--t-arrival); }
  .hero .lede { font-size: var(--t-lede); margin: var(--s4) 0 var(--s5); }
  .note { margin-top: var(--s6); }
  .note::before { content: none; }
  .band-values { padding: var(--s5) var(--gutter) var(--s6); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); row-gap: var(--s6); }
  .band-tour { padding: var(--s7) var(--gutter); }
  .band-tour > h2, .not h2 { font-size: var(--t-page); }
  .wide { font-size: var(--t-lede); }
  .tour { grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s4); margin-top: var(--s6); }
  .frame, .track, .steps, .step { display: contents; }
  .step:not(:last-child)::before { content: none; }
  .step-link { grid-column: 1 / -1; position: relative; }
  .step-link::before {
    content: ""; position: absolute; left: 16px; top: 0; bottom: 0;
    border-left: var(--hair) solid var(--h-line-hover);
  }
  .step:first-child .step-link::before { top: 16px; }
  .step:last-child .step-link::before { bottom: auto; height: 16px; }
  .step-mark { position: relative; }
  .step-line { color: var(--quiet); }
  .shot { grid-column: 2; position: relative; padding: var(--s3) 0 var(--s6); }
  .shot::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--s4) - 16px);
    border-left: var(--hair) solid var(--h-line-hover);
  }
  .shot:last-child::before { content: none; }
  .shot:last-child { padding-bottom: 0; }
  .shot img {
    border: var(--hair) solid var(--accent-edge); border-radius: 12px; background: var(--page);
  }
  .band-not { padding-bottom: var(--s4); }
  .not { grid-template-columns: minmax(0, 1fr); padding: var(--s5); }
  .points {
    margin-top: var(--s5); padding: var(--s5) 0 0;
    border-left: 0; border-top: var(--hair) solid var(--accent-edge);
  }
  .foot { flex-direction: column; align-items: flex-start; gap: var(--s3); }
}
html[data-enhanced] [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .42s ease, transform .42s ease;
}
html[data-enhanced] [data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-enhanced] [data-reveal] {
    opacity: 1; transform: none; transition: none;
  }
}
.value-blue { background: #e3f0fd; color: #1f4fdc; }
.value-purple { background: #efdafe; color: #7406f0; }
.value-green { background: #dff6ef; color: #03916a; }
.value-amber { background: #feebd5; color: #cc5f04; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }