/* W1 Wings (MONO-1722). "Someone has your back."
   The look of the world: cream sky, feather-white enamel, warm gold. Every token is prefixed --w1-, every class
   .w1- (page parts) or .o1- (the object pair: the wing token and the Pass it lands on), so this file can be loaded
   by the studio shell (index.html) without touching the shell's own look. NOTES.md lists every component. */

:root {
  /* grounds */
  --w1-sky: #F6F2E8;          /* cream, the page */
  --w1-cloud: #FFFDF8;        /* feather white, cards */
  --w1-mist: #EEE9DC;         /* a band, a well */
  --w1-dawn: #F4E5CB;         /* the warm light behind the object */
  --w1-night: #12201B;        /* the pilot's dark (Maximizer surfaces) */
  --w1-night-2: #1B2E27;
  /* ink */
  --w1-ink: #1D2A25;
  --w1-soft: #56635D;
  --w1-faint: #8A938D;
  --w1-line: rgb(29 42 37 / .11);
  --w1-hair: rgb(29 42 37 / .07);
  /* pass the year greens (A-001 button and enamel) */
  --w1-forest: #2B6550;
  --w1-forest-top: #4F8A6C;
  --w1-deep: #163A2D;
  --w1-mint: #9ED8BE;
  --w1-mint-soft: #E3F2EA;
  /* metals */
  --w1-silver-hi: #F4F6F5;
  --w1-silver: #C3CAC8;
  --w1-silver-lo: #87918E;
  --w1-gold-hi: #F8E7AE;
  --w1-gold: #D6AE55;
  --w1-gold-mid: #B88A33;
  --w1-gold-lo: #7E5A1C;
  --w1-gold-ink: #5E4312;
  /* the one warm accent: scarcity, live */
  --w1-pop: oklch(.63 .2 25);
  /* type */
  --w1-display: Guton, Inter, system-ui, sans-serif;
  --w1-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --w1-serif: "Source Serif 4", Georgia, serif;
  --w1-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* motion */
  --w1-ease: cubic-bezier(.2, .8, .2, 1);
  --w1-pop-ease: cubic-bezier(.34, 1.56, .64, 1);
  --w1-inout: cubic-bezier(.65, 0, .35, 1);
  /* shadow */
  --w1-shadow: 0 1px 2px rgb(29 42 37 / .05), 0 24px 60px -28px rgb(60 50 20 / .30);
  --w1-shadow-lift: 0 2px 3px rgb(29 42 37 / .06), 0 40px 70px -30px rgb(60 50 20 / .42);
  --w1-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[hidden] { display: none !important; }

/* ============================================================ the object: the wing token (O1) ============ */
.o1 { position: relative; width: 100%; aspect-ratio: 400 / 240; user-select: none; -webkit-user-select: none; }
.o1 > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.o1-shadow { position: absolute; left: 26%; right: 26%; bottom: 22%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(70 55 25 / .32), rgb(70 55 25 / 0)); filter: blur(5px);
  transform: translateY(var(--o1-sy, 0px)) scale(var(--o1-ss, 1)); opacity: var(--o1-so, 1); transition: transform .8s var(--w1-ease), opacity .8s; }
.o1 .o1-body { transform-box: view-box; transform-origin: 0 0; }
/* the idle sway moves the svg box, never the filtered group inside it: the GPU moves a cached layer instead of repainting the drop shadow each frame */
.o1 > svg, .o1-shadow { will-change: transform; }
.o1.is-idle > svg { animation: o1-sway 8.5s ease-in-out infinite; }
.o1.is-idle .o1-shadow { animation: o1-shadow 8.5s ease-in-out infinite; }
@keyframes o1-sway { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-2.9%) rotate(1.4deg); } }
@keyframes o1-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .7; } }
/* a wing folds and unfolds about its hinge */
.o1 .o1-w { transform-box: fill-box; transition: transform .7s var(--w1-ease); }
.o1 .o1-wr { transform-origin: 0% 60%; }
.o1 .o1-wl { transform-origin: 100% 60%; }
.o1.is-folded .o1-w { transform: scaleX(.42) rotate(var(--o1-fold, 6deg)); }
.o1.is-folded .o1-wl { --o1-fold: -6deg; }
/* the signature: one flutter, then it settles */
.o1.is-flutter .o1-wr { animation: o1-flap-r 1.05s var(--w1-inout) 1; }
.o1.is-flutter .o1-wl { animation: o1-flap-l 1.05s var(--w1-inout) 1; }
.o1.is-flutter .o1-body { animation: o1-lift 1.25s var(--w1-ease) 1; }
@keyframes o1-flap-r { 0% { transform: none; } 18% { transform: scaleX(.38) rotate(-14deg); } 38% { transform: scaleX(1.04) rotate(4deg); }
  58% { transform: scaleX(.62) rotate(-8deg); } 80% { transform: scaleX(1.02) rotate(1deg); } 100% { transform: none; } }
@keyframes o1-flap-l { 0% { transform: none; } 18% { transform: scaleX(.38) rotate(14deg); } 38% { transform: scaleX(1.04) rotate(-4deg); }
  58% { transform: scaleX(.62) rotate(8deg); } 80% { transform: scaleX(1.02) rotate(-1deg); } 100% { transform: none; } }
@keyframes o1-lift { 0% { transform: none; } 30% { transform: translateY(-16px); } 70% { transform: translateY(-4px); } 86% { transform: translateY(2px) scale(1.01, .985); } 100% { transform: none; } }
.o1.is-landed .o1-glint { animation: o1-glint 1.1s var(--w1-ease) 1; }
.o1 .o1-glint { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes o1-glint { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
@media (hover: hover) { .o1.is-tilt { transition: transform .6s var(--w1-ease); } }

/* ============================================================ the Pass the token lands on =============== */
.o1-pass { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 100 / 62; }
/* a Pass with data-tilt leans toward the pointer: a degree or two and 1.5px, plain ease-out (W1.tilt sets --tx, --ty, --lift) */
.o1-pass[data-tilt] { --base: none; transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) var(--base); transition: transform .45s ease-out; will-change: transform; }
.o1-pass[data-tilt] .o1-pass-face { transition: box-shadow .45s ease-out; }
.o1-pass[data-tilt].is-near .o1-pass-face { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 -1px 0 rgb(120 100 60 / .08), 0 2px 3px rgb(29 42 37 / .07), 0 34px 60px -26px rgb(70 55 25 / .5); }
.o1-pass-face { position: absolute; inset: 0; border-radius: 5cqi; overflow: hidden; color: var(--w1-ink);
  background: linear-gradient(162deg, #FFFFFF 0%, #FBF8F0 46%, #F1ECE0 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 -1px 0 rgb(120 100 60 / .08), 0 1px 1px rgb(29 42 37 / .06), 0 26px 50px -24px rgb(70 55 25 / .45);
  -webkit-mask: radial-gradient(3.4cqi at 0 58%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(3.4cqi at 100% 58%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(3.4cqi at 0 58%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(3.4cqi at 100% 58%, #0000 98%, #000) right / 51% 100% no-repeat; }
.o1-pass-face::before { content: ""; position: absolute; inset: 0; background-image: var(--w1-grain); background-size: 200px; opacity: .35; mix-blend-mode: multiply; pointer-events: none; }
.o1-pass-face::after { content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / .55) 50%, transparent 58%); animation: o1-sheen 9s ease-in-out infinite; will-change: transform; }
@keyframes o1-sheen { 0%, 100% { transform: translateX(-28%); } 50% { transform: translateX(28%); } }
.o1-pass-perf { position: absolute; left: 4.6cqi; right: 4.6cqi; top: 58%; border-top: .45cqi dotted rgb(29 42 37 / .22); }
.o1-pass-logo { position: absolute; left: 6cqi; top: 6cqi; height: 3.6cqi; width: auto; }
.o1-pass-code { position: absolute; right: 6cqi; top: 6.2cqi; font: 600 2.6cqi/1 var(--w1-mono); letter-spacing: .14em; color: var(--w1-soft); }
.o1-pass-kind { position: absolute; left: 6cqi; top: 21cqi; font: 600 9.4cqi/1 var(--w1-display); letter-spacing: -.035em; }
.o1-pass-exam { position: absolute; left: 6.2cqi; top: 32.5cqi; right: 30cqi; font: 500 3.4cqi/1.2 var(--w1-body); color: var(--w1-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o1-pass-row { position: absolute; left: 6cqi; right: 6cqi; bottom: 5.4cqi; display: flex; gap: 7cqi; }
.o1-pass-row span { display: grid; gap: 1.2cqi; }
.o1-pass-row i { font: 600 2.1cqi/1 var(--w1-body); letter-spacing: .1em; text-transform: uppercase; font-style: normal; opacity: .55; }
.o1-pass-row b { font: 600 4.1cqi/1 var(--w1-display); letter-spacing: -.02em; }
.o1-pass .o1 { position: absolute; width: 46cqi; right: 2cqi; top: -13cqi; z-index: 3; }
/* the Maximizer's Pass: night with gold foil */
.o1-pass[data-kind="max"] .o1-pass-face { color: #F3EBD6;
  background: radial-gradient(90% 120% at 18% 0%, #2A3F36 0%, var(--w1-night-2) 42%, var(--w1-night) 100%);
  box-shadow: inset 0 0 0 1px rgb(248 231 174 / .16), inset 0 1px 0 rgb(255 255 255 / .1), 0 30px 54px -24px rgb(10 20 16 / .7); }
.o1-pass[data-kind="max"] .o1-pass-face::before { background-image: var(--w1-grain); opacity: .5; mix-blend-mode: screen; filter: invert(1); }
.o1-pass[data-kind="max"] .o1-pass-face::after { background: linear-gradient(115deg, transparent 42%, rgb(248 231 174 / .16) 50%, transparent 58%); }
.o1-pass[data-kind="max"] .o1-pass-perf { border-color: rgb(248 231 174 / .28); }
.o1-pass[data-kind="max"] .o1-pass-kind { color: transparent; background: linear-gradient(100deg, var(--w1-gold-mid) 0%, var(--w1-gold-hi) 38%, var(--w1-gold) 60%, var(--w1-gold-hi) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: w1-foil 6s ease-in-out infinite; }
.o1-pass[data-kind="max"] .o1-pass-code, .o1-pass[data-kind="max"] .o1-pass-exam { color: rgb(243 235 214 / .7); }
@keyframes w1-foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }

/* ============================================================ the chooser stage (S1, S2 hero) ============= */
.o1-stage { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 343 / 300; }
.o1-stage::before { content: ""; position: absolute; inset: -18% -12% -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 246 222 / .95), rgb(244 229 203 / .55) 55%, rgb(244 229 203 / 0));
  animation: w1-breathe 9s ease-in-out infinite; will-change: transform, opacity; }
@keyframes w1-breathe { 0%, 100% { transform: scale(1) translateY(0); opacity: 1; } 50% { transform: scale(1.06) translateY(-2%); opacity: .82; } }
.o1-stage .o1-pass { position: absolute; left: 7%; width: 86%; top: 36%; transition: opacity .7s var(--w1-ease), transform .9s var(--w1-ease); transform: perspective(900px) rotateX(8deg) rotate(-2deg); }
.o1-stage[data-state="choose"] .o1-pass { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(24deg); pointer-events: none; }
.o1-stage .o1-tok { position: absolute; width: 48%; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(var(--s, 1)); z-index: 4;
  transition: left .95s var(--w1-ease), top .95s var(--w1-ease), transform .95s var(--w1-ease), opacity .6s; cursor: pointer; background: none; border: 0; padding: 0; }
.o1-stage .o1-tok:focus-visible { outline: 2px solid var(--w1-forest); outline-offset: 6px; border-radius: 20px; }
.o1-stage[data-state="choose"] .o1-tok[data-k-tok="life"] { --x: 26%; --y: 42%; --s: .98; }
.o1-stage[data-state="choose"] .o1-tok[data-k-tok="max"] { --x: 74%; --y: 42%; --s: .98; }
/* picked: the chosen token sits on the Pass, the other folds into the corner */
.o1-stage[data-state="picked"] .o1-tok.is-chosen { --x: 61%; --y: 27%; --s: 1.18; }
.o1-stage[data-state="picked"] .o1-tok:not(.is-chosen) { --x: 87%; --y: 9%; --s: .42; opacity: .62; }
.o1-stage[data-state="picked"] .o1-tok:not(.is-chosen):hover { opacity: 1; }
.o1-stage[data-state="picked"] .o1-tok[data-k-tok="life"]:not(.is-chosen) { --x: 13%; }
.o1-stage .o1-tok-say { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); white-space: nowrap; font: 600 12px/1 var(--w1-body); color: var(--w1-soft);
  opacity: 0; transition: opacity .4s; }
.o1-stage[data-state="picked"] .o1-tok:not(.is-chosen) .o1-tok-say { opacity: 1; font-size: 26px; transform: translate(-50%, 8px); }

/* ============================================================ pages (surfaces) =========================== */
body.w1 { margin: 0; background: var(--w1-sky); color: var(--w1-ink); font: 17px/1.58 var(--w1-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.w1::before { content: ""; position: fixed; inset: 0; background-image: var(--w1-grain); background-size: 200px; opacity: .28; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }
body.w1 > section, body.w1 > header, body.w1 > footer, body.w1 > main { position: relative; z-index: 1; }
body.w1 * { box-sizing: border-box; }
body.w1 a:not([class]) { color: inherit; }
body.w1 img { max-width: 100%; }
.w1-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .w1-wrap { padding: 0 32px; } }
.w1 h1, .w1 h2, .w1 h3 { font-family: var(--w1-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; margin: 0; text-wrap: balance; }
.w1-h1 { font-size: clamp(40px, 8.4vw, 76px); }
.w1-h2 { font-size: clamp(31px, 5vw, 52px); }
.w1-h3 { font-size: 22px; letter-spacing: -.015em; }
.w1-lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--w1-soft); margin: 14px 0 0; text-wrap: pretty; }
.w1-serif { font-family: var(--w1-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
.w1-muted { color: var(--w1-soft); }
.w1-fine { font-size: 13px; color: var(--w1-faint); margin: 10px 0 0; }
.w1-sec { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.w1-sec + .w1-sec { border-top: 1px solid var(--w1-hair); }
.w1-sec.band { background: linear-gradient(180deg, rgb(255 253 248 / .7), rgb(255 253 248 / 0)); }
.w1-head { max-width: 680px; margin: 0 0 clamp(30px, 5vw, 52px); }
.w1-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* top bar */
.w1-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.w1-top img { height: 19px; width: auto; display: block; }
.w1-clock { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--w1-body); color: var(--w1-soft);
  background: rgb(255 253 248 / .8); border: 1px solid var(--w1-line); border-radius: 999px; padding: 7px 11px 7px 9px; white-space: nowrap; }
.w1-clock b { font: 600 14px/1 var(--w1-display); color: var(--w1-ink); }
.w1-clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--w1-pop); box-shadow: 0 0 0 4px rgb(220 80 50 / .13); animation: w1-live 2.4s ease-in-out infinite; }
@keyframes w1-live { 50% { box-shadow: 0 0 0 7px rgb(220 80 50 / 0); } }

/* hero: the chooser */
.w1-hero { padding: 10px 0 clamp(16px, 4vw, 72px); overflow-x: clip; }
.w1-ask { text-align: center; margin: 18px auto 4px; font-size: clamp(28px, 5.4vw, 46px); }
.w1-ask-sub { text-align: center; margin: 8px auto 0; color: var(--w1-soft); font-size: 15px; }
.w1-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 560px; margin: 6px auto 0; }
.w1-opt { all: unset; box-sizing: border-box; cursor: pointer; position: relative; padding: 13px 14px 14px; border-radius: 18px; background: rgb(255 253 248 / .72);
  border: 1px solid var(--w1-line); transition: background .3s, border-color .3s, box-shadow .3s, transform .3s var(--w1-ease); min-height: 92px; display: grid; align-content: start; gap: 6px; }
.w1-opt:hover { transform: translateY(-2px); background: var(--w1-cloud); }
.w1-opt:focus-visible { outline: 2px solid var(--w1-forest); outline-offset: 3px; }
.w1-opt b { font: 600 17px/1.1 var(--w1-display); letter-spacing: -.015em; }
.w1-opt span { font-size: 13.5px; line-height: 1.35; color: var(--w1-soft); }
.w1-opt[aria-pressed="true"] { background: var(--w1-cloud); border-color: rgb(43 101 80 / .45); box-shadow: 0 0 0 3px rgb(43 101 80 / .10), var(--w1-shadow); }
.w1-opt[aria-pressed="true"]::after { content: ""; position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--w1-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.w1-max .w1-opt[aria-pressed="true"] { border-color: rgb(184 138 51 / .6); box-shadow: 0 0 0 3px rgb(214 174 85 / .16), var(--w1-shadow); }
.w1-max .w1-opt[aria-pressed="true"]::after { background-color: var(--w1-gold-mid); }
.w1-opt[aria-pressed="false"] b { color: var(--w1-soft); }

.w1-answer { display: grid; gap: 34px; margin-top: 34px; align-items: start; }
.w1-answer > * { min-width: 0; }
.w1-answer .w1-h1 { max-width: 13ch; }
.w1-promise { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; margin: 14px 0 0; max-width: 34ch; }
.w1-reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--w1-ease), transform .9s var(--w1-ease); }
.is-picked .w1-reveal, .w1-reveal.in { opacity: 1; transform: none; }
.w1-reveal.d1 { transition-delay: .08s; } .w1-reveal.d2 { transition-delay: .16s; } .w1-reveal.d3 { transition-delay: .24s; }

/* exam picker */
.w1-exams { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 6px; margin: 18px -16px 0; scroll-snap-type: x proximity; }
.w1-exams::-webkit-scrollbar { display: none; }
.w1-exam { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 auto; scroll-snap-align: start; padding: 9px 12px 10px; border-radius: 14px; border: 1px solid var(--w1-line);
  background: rgb(255 253 248 / .7); display: grid; gap: 4px; min-width: 92px; transition: border-color .25s, background .25s, box-shadow .25s; }
.w1-exam i { font: 600 11px/1 var(--w1-mono); letter-spacing: .1em; font-style: normal; color: var(--w1-faint); }
.w1-exam b { font: 600 15px/1 var(--w1-display); letter-spacing: -.01em; }
.w1-exam[aria-pressed="true"] { background: var(--w1-cloud); border-color: rgb(43 101 80 / .5); box-shadow: inset 0 0 0 1px rgb(43 101 80 / .35); }
.w1-max .w1-exam[aria-pressed="true"] { border-color: rgb(184 138 51 / .6); box-shadow: inset 0 0 0 1px rgb(184 138 51 / .4); }
.w1-exam[aria-pressed="true"] i { color: var(--w1-forest); }
.w1-max .w1-exam[aria-pressed="true"] i { color: var(--w1-gold-mid); }
.w1-exam-now { margin: 12px 0 0; font-size: 14.5px; color: var(--w1-soft); }
.w1-exam-now b { color: var(--w1-ink); font-weight: 600; }

/* the offer card */
.w1-offer { margin-top: 22px; padding: 18px; border-radius: 22px; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-hair), var(--w1-shadow); }
.w1-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.w1-price .amt { font: 600 44px/1 var(--w1-display); letter-spacing: -.04em; }
.w1-price .per { font-size: 14.5px; color: var(--w1-soft); }
.w1-price .was { font: 500 22px/1 var(--w1-display); letter-spacing: -.02em; color: var(--w1-faint); text-decoration-thickness: 1.5px; }
.w1-member { font-size: 14px; color: var(--w1-soft); margin: 6px 0 0; }
.w1-member b { color: var(--w1-ink); }
.w1-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin-top: 16px;
  border-radius: 12px; font: 600 17px/1 var(--w1-body); color: #fff; text-align: center;
  background: linear-gradient(180deg, var(--w1-forest-top), var(--w1-forest)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 22px -10px rgb(43 101 80 / .75);
  transition: transform .12s ease, filter .12s ease, box-shadow .2s; }
.w1-btn:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 14px 28px -12px rgb(43 101 80 / .8); }
.w1-btn:active { transform: translateY(1px) scale(.99); filter: brightness(.95); }
.w1-btn:focus-visible { outline: 2px solid var(--w1-forest); outline-offset: 3px; }
.w1-btn::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9h10M10 5l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9h10M10 5l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.w1-btn.gold { color: var(--w1-gold-hi); background: linear-gradient(180deg, #2F4038, var(--w1-night)); box-shadow: inset 0 1px 0 rgb(248 231 174 / .22), inset 0 0 0 1px rgb(248 231 174 / .18), 0 12px 24px -12px rgb(18 32 27 / .8); }
.w1-btn.quiet { color: var(--w1-ink); background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-line); }
.w1-btn.quiet::after { display: none; }

/* spots: ten feathers, the taken ones filled */
.w1-spots { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; color: var(--w1-soft); flex-wrap: wrap; }
.w1-spots-row { display: flex; gap: 4px; }
.w1-spots-row i { width: 11px; height: 17px; border-radius: 11px 11px 11px 2px; transform: rotate(18deg); background: var(--w1-mist); box-shadow: inset 0 0 0 1px var(--w1-line); }
.w1-spots-row i.taken { background: linear-gradient(170deg, #C9D3CE, #9DAAA4); box-shadow: none; }
.w1-max .w1-spots-row i.taken { background: linear-gradient(170deg, var(--w1-gold-hi), var(--w1-gold-mid)); }
.w1-spots-row i.open { background: var(--w1-cloud); box-shadow: inset 0 0 0 1.5px var(--w1-pop); animation: w1-open 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .18s); }
@keyframes w1-open { 50% { transform: rotate(18deg) translateY(-2px); } }
.w1-spots b { color: var(--w1-ink); }

/* the safety net chip */
.w1-net-chip { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--w1-mint-soft); font-size: 14px; line-height: 1.4; }
.w1-net-chip svg { flex: 0 0 22px; margin-top: 1px; }
.w1-net-chip.off { background: var(--w1-mist); }
.w1-max .w1-net-chip { background: rgb(248 231 174 / .32); }

/* the feeling */
.w1-feel { display: grid; gap: 28px; }
.w1-feel blockquote { margin: 0; font-size: clamp(25px, 3.8vw, 40px); line-height: 1.2; color: var(--w1-ink); }
.w1-feel ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.w1-feel li { padding: 16px 18px; border-radius: 18px; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-hair); font-size: 16px; line-height: 1.45; }
.w1-feel li b { display: block; font: 600 18px/1.2 var(--w1-display); letter-spacing: -.01em; margin-bottom: 4px; }

/* the days unfold: feathers along a flight line */
.w1-days { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.w1-days::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, var(--w1-line) 0 6px, transparent 6px 12px); }
.w1-day { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  transform-origin: 22px 22px; }
@supports (animation-timeline: view()) {
  /* armed only once the reader scrolls (world.js adds .w1-scrolled), so screenshots and frames show everything */
  .w1-scrolled .w1-day { animation: w1-unfold linear both; animation-timeline: view(); animation-range: entry 5% entry 85%; }
  .w1-scrolled .w1-net svg.net path { animation: w1-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  .w1-scrolled :is(.w1-steps li, .w1-quote, .w1-feel li) { animation: w1-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
@keyframes w1-unfold { from { opacity: 0; transform: rotate(-10deg) scale(.9) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes w1-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes w1-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.w1-day-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-line), var(--w1-shadow);
  font: 600 17px/1 var(--w1-display); }
.w1-day-card { padding: 15px 17px 16px; border-radius: 18px; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-hair), var(--w1-shadow); }
.w1-day-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.w1-day-top b { font: 600 19px/1.15 var(--w1-display); letter-spacing: -.015em; }
.w1-day-top small { font: 600 11px/1 var(--w1-mono); letter-spacing: .08em; color: var(--w1-faint); white-space: nowrap; }
.w1-day-card p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--w1-soft); }
.w1-day.day-coach .w1-day-dot { background: linear-gradient(180deg, var(--w1-forest-top), var(--w1-forest)); color: #fff; box-shadow: 0 8px 18px -8px rgb(43 101 80 / .7); }
.w1-max .w1-day.day-coach .w1-day-dot { background: linear-gradient(180deg, var(--w1-gold-hi), var(--w1-gold-mid)); color: var(--w1-gold-ink); box-shadow: 0 8px 18px -8px rgb(126 90 28 / .7); }
.w1-day.day-host .w1-day-dot { background: var(--w1-mint-soft); }
.w1-day.day-exam .w1-day-dot { background: var(--w1-ink); color: #fff; }
.w1-day.day-exam .w1-day-card { background: transparent; box-shadow: inset 0 0 0 1.5px var(--w1-ink); }
.w1-days-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.w1-days-sum span { font-size: 13.5px; padding: 7px 11px; border-radius: 999px; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-line); }

/* people: guardian and Host */
.w1-people { display: grid; gap: 14px; }
.w1-person { position: relative; padding: 20px; border-radius: 22px; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-hair), var(--w1-shadow); display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.w1-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 600 26px/1 var(--w1-display); color: #fff;
  background: radial-gradient(circle at 34% 28%, #5A9A7F, var(--w1-forest) 55%, var(--w1-deep)); box-shadow: inset 0 0 0 3px var(--w1-silver), inset 0 0 0 4px rgb(255 255 255 / .6), 0 10px 20px -10px rgb(22 58 45 / .6); }
.w1-badge.host { background: radial-gradient(circle at 34% 28%, #FFFFFF, #EEEAE0 60%, #D9D3C5); color: var(--w1-forest); }
.w1-max .w1-badge:not(.host) { box-shadow: inset 0 0 0 3px var(--w1-gold), inset 0 0 0 4px rgb(255 255 255 / .5), 0 10px 20px -10px rgb(22 58 45 / .6); }
.w1-person h3 { font-size: 23px; }
.w1-person .role { font: 600 12px/1 var(--w1-body); letter-spacing: .1em; text-transform: uppercase; color: var(--w1-faint); display: block; margin-bottom: 7px; }
.w1-person p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--w1-soft); }
.w1-grade { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 10px; padding: 6px 10px; border-radius: 10px; background: var(--w1-mint-soft); font-size: 13.5px; }
.w1-grade b { font: 600 18px/1 var(--w1-display); }
.w1-max .w1-grade { background: rgb(248 231 174 / .35); }

/* the safety net (guarantee on) and what holds you (off) */
.w1-net { position: relative; border-radius: 28px; overflow: hidden; padding: clamp(24px, 4vw, 44px); background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-hair), var(--w1-shadow-lift); }
.w1-net svg.net { display: block; width: 100%; height: auto; margin: 0 0 18px; }
.w1-net svg.net path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.w1-net .feather { transform-box: fill-box; transform-origin: 50% 50%; animation: w1-fall 7s ease-in-out infinite; }
@keyframes w1-fall { 0% { transform: translate(0, -40px) rotate(-18deg); opacity: 0; } 15% { opacity: 1; } 60% { transform: translate(14px, 18px) rotate(12deg); } 75%, 100% { transform: translate(6px, 26px) rotate(4deg); opacity: 1; } }
.w1-net h3 { font-size: clamp(26px, 3.6vw, 36px); }
.w1-net p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--w1-soft); max-width: 58ch; }
.w1-hold-art { width: 170px; margin: -6px 0 10px -10px; }
.w1-holds { display: grid; gap: 12px; margin-top: 22px; }
.w1-holds div { padding: 15px 16px; border-radius: 16px; background: var(--w1-sky); box-shadow: inset 0 0 0 1px var(--w1-hair); font-size: 15px; line-height: 1.45; }
.w1-holds b { display: block; font: 600 17px/1.2 var(--w1-display); margin-bottom: 3px; }

/* method */
.w1-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.w1-steps li { counter-increment: s; padding: 18px 18px 18px 64px; position: relative; border-radius: 18px; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-hair); font-size: 15.5px; line-height: 1.45; color: var(--w1-soft); }
.w1-steps li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 600 15px/1 var(--w1-display); color: var(--w1-forest); background: var(--w1-mint-soft); }
.w1-max .w1-steps li::before { color: var(--w1-gold-ink); background: rgb(248 231 174 / .45); }
.w1-steps b { display: block; color: var(--w1-ink); font: 600 18px/1.2 var(--w1-display); margin-bottom: 3px; }

/* proof */
.w1-quotes { display: grid; gap: 12px; }
.w1-quote { position: relative; margin: 0; padding: 22px 20px 18px; border-radius: 20px; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-hair), var(--w1-shadow); }
.w1-quote p { margin: 0; font-size: 19px; line-height: 1.4; }
.w1-quote footer { margin-top: 12px; font-size: 13.5px; color: var(--w1-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.w1-ph { display: inline-block; font: 600 10.5px/1 var(--w1-mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 5px; background: var(--w1-mist); color: var(--w1-soft); }
.w1-stat { display: flex; gap: 10px; align-items: baseline; margin-top: 18px; flex-wrap: wrap; }
.w1-stat b { font: 600 46px/1 var(--w1-display); letter-spacing: -.04em; }

/* all five exams */
.w1-list { list-style: none; margin: 0; padding: 0; border-radius: 22px; overflow: hidden; background: var(--w1-cloud); box-shadow: inset 0 0 0 1px var(--w1-hair), var(--w1-shadow); }
.w1-list li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 15px 16px; border-top: 1px solid var(--w1-hair); }
.w1-list li:first-child { border-top: 0; }
.w1-list .d { display: grid; text-align: center; line-height: 1; }
.w1-list .d b { font: 600 24px/1 var(--w1-display); letter-spacing: -.03em; }
.w1-list .d i { font: 600 10.5px/1.2 var(--w1-mono); font-style: normal; letter-spacing: .08em; color: var(--w1-faint); text-transform: uppercase; }
.w1-list .n b { display: block; font: 600 16.5px/1.2 var(--w1-display); letter-spacing: -.01em; }
.w1-list .n span { font-size: 13px; color: var(--w1-soft); }
.w1-list a { font: 600 14px/1 var(--w1-body); text-decoration: none; color: var(--w1-forest); padding: 10px 12px; border-radius: 10px; background: var(--w1-mint-soft); white-space: nowrap; }
.w1-max .w1-list a { color: var(--w1-gold-ink); background: rgb(248 231 174 / .45); }
.w1-list li.on { background: linear-gradient(90deg, rgb(158 216 190 / .16), transparent); }
.w1-max .w1-list li.on { background: linear-gradient(90deg, rgb(248 231 174 / .3), transparent); }

/* close */
.w1-close { text-align: center; }
.w1-close .o1 { width: min(300px, 76vw); margin: 0 auto 10px; }
.w1-close .w1-offer { max-width: 440px; margin: 28px auto 0; text-align: left; }

/* footer */
.w1-foot { padding-top: 34px; padding-bottom: 120px; border-top: 1px solid var(--w1-hair); font-size: 13px; color: var(--w1-faint); display: grid; gap: 6px; }
.w1-foot img { height: 17px; width: auto; opacity: .7; margin-bottom: 6px; }

/* sticky bar */
.w1-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 16px; border-radius: 18px;
  background: rgb(255 253 248 / .97); box-shadow: inset 0 0 0 1px var(--w1-line), 0 18px 40px -16px rgb(60 50 20 / .4);
  transform: translateY(140%); visibility: hidden; transition: transform .45s var(--w1-ease), visibility 0s .45s; will-change: transform; }
.w1-sticky.on { transform: none; visibility: visible; transition: transform .45s var(--w1-ease); }
.w1-sticky .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.w1-sticky .t b { font: 600 18px/1 var(--w1-display); letter-spacing: -.02em; }
.w1-sticky .t span { font-size: 12.5px; color: var(--w1-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w1-sticky .w1-btn { width: auto; height: 46px; margin: 0; padding: 0 16px; font-size: 15px; flex: 0 0 auto; }
.w1-sticky .w1-btn::after { display: none; }
@media (min-width: 900px) { .w1-sticky { left: auto; right: 24px; bottom: 24px; width: 400px; } }

/* floating feathers in the hero sky */
.w1-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.w1-sky i { position: absolute; width: 22px; height: 46px; opacity: .5; animation: w1-drift 18s linear infinite; animation-delay: var(--d); will-change: transform; left: var(--x); top: -60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 46'%3E%3Cpath d='M11 45C10 33 3 30 3 18 3 8 8 2 11 1c3 1 8 7 8 17 0 12-7 15-8 27z' fill='%23fffdf8' stroke='%23d9d2c2' stroke-width='.8'/%3E%3Cpath d='M11 45V6' stroke='%23d9d2c2' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes w1-drift { 0% { transform: translate(0, 0) rotate(-20deg); } 50% { transform: translate(30px, 52vh) rotate(25deg); } 100% { transform: translate(-10px, 110vh) rotate(-10deg); } }

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  .w1-choose { gap: 14px; }
  .w1-opt { padding: 16px 18px; }
  .w1-feel { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
  .w1-people { grid-template-columns: 1fr 1fr; }
  .w1-quotes { grid-template-columns: repeat(3, 1fr); }
  .w1-steps { grid-template-columns: repeat(3, 1fr); }
  .w1-steps li { padding: 70px 22px 22px; }
  .w1-steps li::before { top: 22px; left: 22px; }
  .w1-holds { grid-template-columns: repeat(3, 1fr); }
  .w1-list li { grid-template-columns: 72px 1fr auto auto; padding: 18px 22px; }
  .w1-list .t { font-size: 14px; color: var(--w1-soft); }
}
@media (max-width: 719px) {
  .w1-list .t { display: none; }
  .w1-list li { grid-template-columns: 48px 1fr; row-gap: 10px; }
  .w1-list li a { grid-column: 2; justify-self: start; }
}
@media (min-width: 1000px) {
  .w1-hero .o1-stage { max-width: 600px; }
  .w1-hero > .w1-wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 72px; align-items: start;
    grid-template-areas: "ask answer" "sub answer" "stage answer" "choose answer"; grid-template-rows: auto auto auto 1fr; }
  .w1-hero .w1-h1 { font-size: 68px; }
  .w1-hero .w1-ask { grid-area: ask; margin-top: 34px; } .w1-hero .w1-ask-sub { grid-area: sub; }
  .w1-hero .o1-stage { grid-area: stage; width: 100%; } .w1-hero .w1-choose { grid-area: choose; width: 100%; }
  .w1-hero .w1-answer { grid-area: answer; margin-top: 64px; gap: 0; }
  .w1-hero .w1-exams { margin: 22px 0 0; padding: 2px 0 6px; flex-wrap: nowrap; overflow: visible; gap: 6px; }
  .w1-hero .w1-exam { min-width: 0; flex: 1 1 0; padding: 9px 10px 10px; }
  .w1-hero .w1-exam b { font-size: 14px; white-space: nowrap; }
  .w1-dayswrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
  .w1-dayswrap .w1-head { position: sticky; top: 40px; }
  .w1-net { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
  .w1-net svg.net { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .o1 *, .o1-stage *, .w1 *, .o1-stage::before { animation: none !important; transition: none !important; }
  .w1-reveal, .w1-day { opacity: 1 !important; transform: none !important; }
}