@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --blue: #2335F1;
  --blue-bright: #010CFE;
  --blue-mid: #5C69F3;
  --blue-soft: #9EA6F9;
  --blue-pale: #D1D3F0;
  --navy: #212B9F;
  --ink: #252525;
  --ink-deep: #1D1D1D;
  --ink-black: #141414;
  --grey: #6A6A6A;
  --grey-mid: #A6A6A6;
  --grey-line: #CDCDCD;
  --grey-soft: #DBDAD7;
  --paper: #F3F2EE;
  --paper-warm: #F7F6F1;
  --card: #FAF8F4;
  --white: #FEFEFE;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --dots: radial-gradient(circle, var(--grey-mid) 1.3px, transparent 1.6px);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 450; letter-spacing: -0.035em; line-height: 1.02; }
.label { font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey); }
.centre { text-align: center; }
.fine { font-size: 14px; color: var(--grey); }
.fine a { text-underline-offset: 3px; }
.inline-pick { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; font: 500 14px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border: 1px solid transparent; border-radius: 10px; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; }
.button::after { content: "→"; font-family: var(--sans); }
.button.small { padding: 9px 14px; font-size: 12px; border-radius: 8px; }
.button.small::after { display: none; }
.button.solid { background: var(--ink); color: var(--paper); }
.button.solid:hover { background: var(--blue); }
.button.accent { background: var(--blue); color: var(--white); }
.button.accent:hover { background: var(--blue-bright); }
.button.line { border-color: var(--ink); color: var(--ink); }
.button.line:hover { background: var(--ink); color: var(--paper); }
.button.onblue { background: var(--paper); color: var(--ink); }
.button.onblue:hover { background: var(--white); }
button.button { cursor: pointer; }
button.button:disabled { opacity: 0.55; cursor: default; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--grey-line); cursor: pointer; text-align: left; font-size: 15px; }
.linkish:hover { color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.bar { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--grey-line) 60%, transparent); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; text-decoration: none; letter-spacing: -0.02em; }
.brand img { border-radius: 7px; }
.brand-mark { position: relative; width: 28px; height: 28px; border-radius: 6.3px; overflow: hidden; background: url("assets/tile.png") center / cover; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.14); flex: none; }
.brand-mark img { display: block; width: 100%; height: 100%; border-radius: 0; animation: peek 0.72s cubic-bezier(0.3, 1.3, 0.5, 1) 0.28s backwards; }
@keyframes peek { from { transform: translateX(100%); } }
.bar-links { display: flex; gap: 28px; }
.bar-links a { font-size: 14px; text-decoration: none; color: var(--grey); }
.bar-links a:hover { color: var(--ink); }
.buy { justify-self: end; }

html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.zoom { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.art .grey { fill: var(--grey-mid); }
.art .soft { fill: var(--blue-soft); }
.art .blue { fill: var(--blue); }
.viewport-frame { position: absolute; width: 100%; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
.world { position: absolute; left: 0; top: 0; width: 1720em; height: 1046em; font-size: 1px; transform-origin: 0 0; }
.shadow { position: absolute; left: 18em; right: 18em; top: 1026em; height: 24em; border-radius: 50%; background: radial-gradient(ellipse, rgb(20 20 20 / 0.26), rgb(20 20 20 / 0.1) 48%, transparent 72%); filter: blur(5em); }
.feet { position: absolute; left: 115em; right: 115em; top: 1032em; height: 13em; }
.feet::before, .feet::after { content: ""; position: absolute; width: 104em; height: 13em; border-radius: 0 0 17em 17em / 0 0 10em 10em; background: linear-gradient(#111213, #2a2a2b 60%, #0a0a0b); }
.feet::before { left: 0; }
.feet::after { right: 0; }
.hinge { position: absolute; left: 118em; top: 970em; width: 1484em; height: 20em; background: linear-gradient(180deg, #050506, #2a2a2b 55%, #080809); }
.base { position: absolute; z-index: 2; left: 0; top: 982em; width: 1720em; height: 55em; border-radius: 5em 5em 30em 30em / 5em 5em 22em 22em;
  background: linear-gradient(90deg, #76797f 0%, #d6d8dc 0.6%, #f9fafb 1%, #a2a5aa 1.7%, transparent 3.2%, transparent 96.8%, #a3a6ac 98.3%, #f5f6f7 99%, #c2c5c9 99.5%, #73767c),
    linear-gradient(180deg, #f8f9fa 0%, #e6e8eb 3%, #c4c7cc 9%, #d2d5d9 32%, #dcdee2 60%, #b9bcc1 86%, #8d9096); }
.base::before { content: ""; position: absolute; left: 50%; top: 0; width: 292em; height: 22em; transform: translateX(-50%); border-radius: 0 0 16em 16em / 0 0 18em 18em;
  background: linear-gradient(90deg, #72767c, #c3c6cb 5%, transparent 12%, transparent 88%, #b8bcc2 96%, #6f7379), linear-gradient(180deg, #959aa0, #d1d4d9 65%, #e5e7ea 86%, #a8acb3); }
.base::after { content: ""; position: absolute; left: 35em; right: 35em; bottom: 5em; height: 1.5em; background: linear-gradient(90deg, transparent, #8a8e95 8%, #d2d5da 48%, #898d94 92%, transparent); }
.lid { position: absolute; left: 104em; top: 0; width: 1512em; height: 982em; padding: 4em; border-radius: 43em 43em 8em 8em;
  background: linear-gradient(100deg, #8e9094, #f1f2f3 1%, #b8babf 3%, #d9dbdf 48%, #9fa1a6 97%, #e6e8ea 99%, #8d8f93);
  box-shadow: 0 0 0 1.5em #8a8c90, inset 0 2em 1em #f9fafb, inset 0 -2em 1em #707277; }
.lid::after { content: ""; position: absolute; inset: 3em; border-radius: 40em 40em 6em 6em; pointer-events: none; border: 1em solid rgb(255 255 255 / 0.13); }
.bezel { position: relative; height: 100%; padding: 14em 14em 20em; border-radius: 39em 39em 5em 5em; background: #050506; box-shadow: inset 0 0 0 1em #171819; }
.display { position: relative; width: 100%; height: 100%; border-radius: 20em 20em 3em 3em; overflow: hidden; background: var(--paper); }
.wallpaper { position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 100%, rgb(209 211 240 / 0.55), transparent 55%), radial-gradient(90% 70% at 100% 0%, rgb(255 255 255 / 0.9), transparent 60%), linear-gradient(180deg, #fbfaf7, #efeee9); }
.notch { position: absolute; z-index: 3; left: 50%; top: 0; width: 200em; height: 32em; transform: translateX(-50%); }
.notch svg { display: block; width: 100%; height: 100%; fill: #050506; }
.notch i { position: absolute; left: 50%; top: 12em; width: 8em; height: 8em; margin-left: -4em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3f46 0 22%, #121418 45%, #0b0b0c 70%); }
.menubar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 32em; display: flex; align-items: center; justify-content: space-between; padding: 0 16em; background: rgb(255 255 255 / 0.7); backdrop-filter: blur(20em); color: #1d1d1f; }
.menubar span { font: 13em/1 var(--sans); white-space: nowrap; }
.menubar .l, .menubar .r { display: flex; align-items: center; gap: 18em; }
.menubar b { font-weight: 700; }
.menubar .apple { font-size: 1em; width: 13em; height: 15em; background: #1d1d1f; border-radius: 45% 45% 50% 50% / 55% 55% 45% 45%; }
.macdock { position: absolute; left: 50%; bottom: 7em; transform: translateX(-50%); display: flex; align-items: center; gap: 6em; padding: 6em 8em; border-radius: 22em; background: rgb(255 255 255 / 0.55); box-shadow: inset 0 0 0 1em rgb(255 255 255 / 0.8), 0 0 0 0.5em rgb(0 0 0 / 0.08), 0 10em 30em -10em rgb(0 0 0 / 0.2); backdrop-filter: blur(24em); }
.macdock .t, .macdock img { position: relative; width: 54em; height: 54em; border-radius: 12.5em; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 0.5em rgb(0 0 0 / 0.06), 0 1em 2em rgb(0 0 0 / 0.12); }
.macdock img { box-shadow: none; border-radius: 0; width: 60em; height: 60em; margin: -3em; }
.macdock .folder { background: linear-gradient(180deg, #6fb6ff, #2f7fe8); }
.macdock .folder i { width: 34em; height: 25em; border-radius: 4em; background: linear-gradient(180deg, #bfe0ff, #8cc4ff); box-shadow: 0 -6em 0 -2em #a8d2ff; margin-top: 8em; }
.macdock .globe { background: radial-gradient(circle at 35% 30%, #ffffff, #e8ecf2); }
.macdock .globe i { width: 38em; height: 38em; border-radius: 50%; border: 3em solid var(--blue); background: radial-gradient(ellipse 30% 100% at center, transparent 60%, var(--blue) 62% 70%, transparent 72%), linear-gradient(transparent 46%, var(--blue) 46% 54%, transparent 54%); }
.macdock .mail { background: linear-gradient(180deg, #5aa9ff, #1e6fe0); }
.macdock .mail i { width: 36em; height: 24em; border-radius: 3em; background: #fff; position: relative; }
.macdock .mail i::after { content: ""; position: absolute; left: 4em; right: 4em; top: 2em; height: 13em; border-left: 3em solid #9ec7ff; border-bottom: 3em solid #9ec7ff; transform: rotate(-45deg) skew(10deg, 10deg); transform-origin: center; width: 14em; margin: 0 auto; }
.macdock .cal { background: #fff; display: block; }
.macdock .cal b { position: absolute; left: 0; right: 0; top: 7px; font-size: 9px; line-height: 1; font-weight: 700; color: #e8453c; letter-spacing: 0.04em; text-align: center; }
.macdock .cal em { position: absolute; left: 0; right: 0; top: 17px; font-size: 30px; line-height: 1; font-weight: 300; font-style: normal; color: #1d1d1f; letter-spacing: -0.03em; text-align: center; }
.macdock .notes { background: linear-gradient(180deg, #fff7c7 0 22%, #fffdf3 22%); }
.macdock .notes i { position: absolute; inset: 20em 9em 9em; background: repeating-linear-gradient(180deg, transparent 0 7em, #e7dfb8 7em 8em); }
.macdock .sep { width: 1em; height: 40em; background: rgb(0 0 0 / 0.18); margin: 0 4em; }
.macdock .run { position: absolute; right: 33em; bottom: 1em; width: 5em; height: 5em; border-radius: 50%; background: rgb(0 0 0 / 0.55); }

.appwin { position: absolute; left: 396px; top: 60px; width: 1030px; height: 681px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.35) inset, 0 22px 70px -12px rgb(20 20 20 / 0.38); }
.vibrancy { position: absolute; inset: 0; background: rgb(236 235 232 / 0.9); backdrop-filter: blur(30px) saturate(1.4); }
.frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame .blurred { filter: blur(var(--dof, 0px)); opacity: var(--dim, 1); }
.frame .sharp { clip-path: var(--clip, inset(0)); opacity: var(--lift, 0); }
.appwin[data-frame="0"] .frame[data-frame="0"], .appwin[data-frame="1"] .frame[data-frame="1"], .appwin[data-frame="2"] .frame[data-frame="2"],
.appwin[data-frame="3"] .frame[data-frame="3"], .appwin[data-frame="4"] .frame[data-frame="4"], .appwin[data-frame="5"] .frame[data-frame="5"] { opacity: 1; }
.lights { position: absolute; left: 15px; top: 15px; display: flex; gap: 6.6px; z-index: 2; }
.lights i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.18); }
.lights i:nth-child(1) { background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.hero-copy, .stop, .outro { position: absolute; will-change: opacity, transform, filter; }
.hero-copy { left: var(--gutter); top: 50%; width: min(42vw, 620px); transform: translateY(-50%); display: grid; gap: 22px; z-index: 2; }
.hero-copy h1 { font-size: clamp(40px, 4.6vw, 76px); }
.hint { position: absolute; left: var(--gutter); bottom: 28px; }
.hint::before { content: "↓ "; }
.caption-shade { position: absolute; inset: 0 auto 0 0; width: min(52vw, 760px); z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 62%, rgb(243 242 238 / 0.85) 78%, transparent 100%); }
.stop { left: var(--gutter); top: 50%; width: min(38vw, 540px); opacity: 0; visibility: hidden; pointer-events: none; display: grid; gap: 16px; z-index: 2; }
.stop .label { color: var(--blue); }
.stop h2 { font-size: clamp(32px, 3.6vw, 54px); text-wrap: balance; }
.stop p:last-child { font-size: clamp(16px, 1.2vw, 18px); color: var(--grey); max-width: 26em; text-wrap: pretty; }
.outro { left: 0; right: 0; top: 12%; text-align: center; opacity: 0; padding: 0 16px; }
.outro h2 { font-size: clamp(30px, 3.6vw, 54px); text-wrap: balance; }
.static { display: none; }
.reduced .zoom { height: auto !important; }
.reduced .stage { position: relative; }
.reduced .stop, .reduced .outro, .reduced .hint { display: none; }
.reduced .static { display: grid; gap: 40px; grid-template-columns: repeat(3, 1fr); padding: 0 var(--gutter) 64px; }
.static h3 { font-size: 24px; font-weight: 450; letter-spacing: -0.02em; margin-bottom: 8px; }
.static p { color: var(--grey); }


.backdrop { padding: clamp(40px, 7vw, 96px) var(--gutter); margin-top: clamp(64px, 9vw, 120px); }
.backdrop.dark { background: var(--ink-deep); }
.backdrop.blue { background: var(--blue); }
.panel { max-width: 1500px; margin: 0 auto; padding: clamp(28px, 4vw, 64px); background: var(--paper); border-radius: 14px; }
.section-title { font-size: clamp(36px, 4.4vw, 64px); }
.cards { display: grid; gap: 2px; margin-top: clamp(28px, 4vw, 56px); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card { display: grid; grid-template-rows: auto auto 1fr; gap: 28px; padding: 22px; min-height: 380px; background: var(--card); }
.card h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 450; letter-spacing: -0.03em; line-height: 1.1; max-width: 9em; min-height: 2.2em; }
.card p { font-size: 15px; color: var(--grey); max-width: 28em; }
.well { display: grid; place-items: center; height: 150px; border-radius: 999px; background: #EFEDE8; }
.card:hover .well { background: var(--blue); }
.card:hover .well .icon { color: var(--white); }
.strip { max-width: 1500px; margin: 0 auto; padding: 22px clamp(28px, 4vw, 64px); background: var(--blue); color: var(--blue-pale); border-radius: 0 0 14px 14px; display: flex; gap: 14px; align-items: center; line-height: 20px; }
.strip-lead { color: var(--blue-soft); }
.rotator { position: relative; display: block; height: 20px; line-height: 20px; overflow: hidden; color: var(--white); min-width: 18em; }
.rotator span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(100%); filter: blur(4px); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s, filter 0.6s; }
.rotator span.on { opacity: 1; transform: none; filter: none; }
.rotator span.out { opacity: 0; transform: translateY(-100%); filter: blur(4px); }
.backdrop.dark .panel { border-radius: 14px 14px 0 0; }

.icon { --s: 7px; --n: 9; display: inline-grid; grid-template-columns: repeat(var(--n), var(--s)); grid-auto-rows: var(--s); gap: 4px; color: var(--ink); }
.icon i { border-radius: 50%; background: currentColor; }
.icon i.o { background: transparent; }
.icon.small { --s: 4px; gap: 2px; color: var(--blue); }

.privacy { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); padding: clamp(64px, 9vw, 128px) var(--gutter); max-width: 1500px; margin: 0 auto; }
.privacy-head { display: grid; gap: 20px; align-content: start; }
.privacy-head p { color: var(--grey); max-width: 28em; }
.facts { display: grid; grid-template-columns: 1fr; border-top: 2px dotted var(--grey-mid); align-content: start; }
.facts article { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; row-gap: 6px; align-items: start; padding: 24px 0; border-bottom: 2px dotted var(--grey-mid); }
.facts article .icon { grid-row: span 2; margin-top: 4px; }
.facts h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.facts p { color: var(--grey); font-size: 15px; }

.faq { padding: 0 var(--gutter) clamp(64px, 9vw, 120px); max-width: 1500px; margin: 0 auto; }
.qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 48px; margin-top: 44px; }
.qa h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.qa p { font-size: 15px; color: var(--grey); }

.backdrop.blue { margin-top: 0; }
.price-title { text-align: center; font-size: clamp(36px, 4.4vw, 64px); margin: 20px auto clamp(32px, 4vw, 56px); max-width: 14em; }
.price-body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 72px); align-items: end; border-top: 2px solid var(--ink); padding-top: 28px; }
.figure { font-size: clamp(80px, 11vw, 176px); font-weight: 500; letter-spacing: -0.06em; line-height: 0.85; }
.figure small { font-size: 0.28em; letter-spacing: -0.02em; margin-right: 0.15em; vertical-align: 0.9em; color: var(--grey); }
.price-side { display: grid; gap: 22px; }
.includes { list-style: none; margin: 0; padding: 0; }
.includes li { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--grey-line); font-size: 15px; }
.includes li span { color: var(--grey); }
.includes li:first-child { border-top: 1px solid var(--grey-line); }

.closing { background: var(--ink); color: var(--paper); padding: clamp(56px, 8vw, 112px) var(--gutter) 0; display: grid; gap: 32px; }
.wordmark { font-size: clamp(88px, 17vw, 280px); font-weight: 500; letter-spacing: -0.06em; line-height: 0.8; text-align: center; white-space: nowrap; }
.closing .button.accent:hover { background: var(--blue-bright); }
.outline { grid-column: 1 / -1; margin-top: 24px; height: 260px; border: 3px dotted var(--grey-mid); border-bottom: 0; border-radius: 40px 40px 0 0; display: flex; justify-content: center; align-items: center; gap: clamp(28px, 6vw, 80px); }
.outline .icon { --s: 6px; gap: 3px; color: var(--paper); }

.foot { display: grid; grid-template-columns: 1fr auto; gap: 32px; padding: 48px var(--gutter); background: var(--ink); color: var(--paper); border-top: 1px solid #333; }
.foot nav { display: flex; gap: 64px; }
.foot nav div { display: grid; gap: 10px; align-content: start; }
.foot nav a { text-decoration: none; color: var(--grey-line); font-size: 15px; }
.foot nav a:hover { color: var(--white); }
.foot .label { color: var(--grey-mid); margin-bottom: 6px; }
.foot .fine { grid-column: 1 / -1; color: var(--grey-mid); }

@media (max-width: 1100px) {
  .bar-links { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .qa { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero-copy { top: 84px; left: var(--gutter); right: var(--gutter); width: auto; transform: none; gap: 14px; }
  .hero-copy h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero-copy .lead { font-size: 15px; }
  .hint { display: none; }
  .caption-shade { display: block; position: absolute; inset: auto 0 0 0; width: auto; height: calc(var(--caption, 200px) + 110px); background: linear-gradient(to bottom, rgb(243 242 238 / 0), var(--paper) 56px); opacity: 0; pointer-events: none; z-index: 1; }
  .stop { top: auto; bottom: 0; left: 0; right: 0; width: auto; padding: 0 var(--gutter) 32px; gap: 10px; }
  .stop h2 { font-size: clamp(26px, 7vw, 34px); }
  .stop p:last-child { font-size: 15px; }
  .reduced .static { grid-template-columns: 1fr; }
  .outline { height: 180px; gap: 22px; flex-wrap: wrap; border-radius: 28px 28px 0 0; }
  .outline .icon { --s: 4px; gap: 2px; }
  .cards.three, .privacy, .facts, .price-body { grid-template-columns: 1fr; }
  .facts article:nth-child(even) { padding-left: 0; border-left: 0; }
  .qa { grid-template-columns: 1fr; }
  .closing { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .foot nav { gap: 40px; }
  .card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.thanks-main { min-height: 100vh; display: grid; place-items: center; padding: 96px var(--gutter) 48px; }
.thanks-panel { max-width: 720px; display: grid; gap: 22px; }
.thanks-panel h1 { font-size: clamp(36px, 5vw, 60px); }
.next { list-style: none; margin: 0; padding: 0; border-top: 2px dotted var(--grey-mid); }
.next li { display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; border-bottom: 2px dotted var(--grey-mid); }
.next .num { font: 500 13px var(--mono); color: var(--blue); padding-top: 3px; }
[hidden] { display: none !important; }

.panel-head { display: grid; grid-template-columns: 1fr minmax(0, 30em); gap: 32px; align-items: end; }
.panel-head p { color: var(--grey); font-size: 16px; }
@media (max-width: 860px) { .panel-head { grid-template-columns: 1fr; } }