/* sealb.in: the whole design system, ported from the Claude Design file
   `sealb.in Home v4.dc.html`. Tokens first. Dark is the default (set on
   <html data-theme> by the inline script in <head>); the toggle stores the
   choice. With no data-theme the system preference decides.

   Colours        light      dark
     --paper      #EDEFF1    #07080B   page
     --ink        #15181D    #E7E9EC   text
     --muted      #5A616B    #9AA1AB   secondary text
     --rule       #C9CED5    #1F232C   hairlines
     --wax        #2E3BC9    #8C98FF   links, the one button, the seal
     --term-key   #9AA5FF              the #key fragment in terminals
   Accent gradient: #3B4BFF → #8F5CFF → #2FC3EE. */

:root {
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body: 'Geist', system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, monospace;
  --paper: #EDEFF1; --ink: #15181D; --muted: #5A616B; --rule: #C9CED5;
  --wax: #2E3BC9; --on-wax: #FFFFFF; --seal: #2E3BC9; --field: #FFFFFF;
  --term: #15181D; --term-ink: #D9DCE1; --term-dim: #8E96A1; --term-key: #9AA5FF; --term-rule: #2C313A;
  --grad: linear-gradient(135deg, #3B4BFF, #8F5CFF 40%, #2FC3EE 75%, #3B4BFF);
  --grad-line: linear-gradient(90deg, transparent, #3B4BFF 18%, #8F5CFF 50%, #2FC3EE 82%, transparent);
  --wax-fill: radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 38%), conic-gradient(from 210deg, #2E3BC9, #7A5CFF, #2FC3EE, #3B4BFF, #2E3BC9);
  --pad: clamp(20px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #07080B; --ink: #E7E9EC; --muted: #9AA1AB; --rule: #1F232C; --wax: #8C98FF; --on-wax: #0F1114; --seal: #3A4AE0; --field: #0E1016; --term: #0B0D12; color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #07080B; --ink: #E7E9EC; --muted: #9AA1AB; --rule: #1F232C; --wax: #8C98FF; --on-wax: #0F1114; --seal: #3A4AE0; --field: #0E1016; --term: #0B0D12; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
body { font-size: 17px; line-height: 1.55; overflow-x: hidden; }
a { color: var(--wax); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--wax); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--wax); color: var(--on-wax); }
code { font-family: var(--f-mono); font-size: 15px; color: var(--ink); }
button { font: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; background: var(--ink); color: var(--paper); }
.skip:focus { top: 1rem; }

@keyframes sb-blink { 0% { opacity: 1 } 50% { opacity: 0 } }
@keyframes sb-spin { to { transform: rotate(360deg) } }
@keyframes sb-shine { 0%, 30% { background-position: 120% 0 } 70%, 100% { background-position: -20% 0 } }
@keyframes sb-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-.35px) } }
@keyframes fT-move { 0%, 6% { left: 0; transform: scale(1); opacity: 1 } 70%, 88% { left: calc(100% - 16px); transform: scale(1.5); opacity: 1 } 94%, 100% { left: calc(100% - 16px); transform: scale(1.5); opacity: 0 } }
@keyframes fT-s1 { 0%, 17% { opacity: 0 } 19%, 90% { opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes fT-s2 { 0%, 37% { opacity: 0 } 39%, 90% { opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes fT-s3 { 0%, 57% { opacity: 0 } 59%, 90% { opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes fT-res { 0%, 70% { opacity: 0 } 74%, 90% { opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes fS-tile { 0%, 6% { opacity: 1; transform: scale(1) } 12%, 100% { opacity: 0; transform: scale(.4) } }
@keyframes fS-move { 0%, 7% { left: 0; transform: scale(0) } 11% { left: 0; transform: scale(1.3) } 14% { left: 0; transform: scale(1) } 58%, 100% { left: calc(100% - 20px); transform: scale(1) } }
@keyframes fS-l { 0%, 60% { transform: none; opacity: 1 } 67% { transform: translate(-7px, 5px) rotate(-26deg); opacity: 1 } 80%, 100% { transform: translate(-9px, 7px) rotate(-30deg); opacity: 0 } }
@keyframes fS-r { 0%, 60% { transform: none; opacity: 1 } 67% { transform: translate(7px, 7px) rotate(22deg); opacity: 1 } 80%, 100% { transform: translate(9px, 9px) rotate(26deg); opacity: 0 } }
@keyframes fS-open { 0%, 63% { opacity: 0 } 68%, 90% { opacity: 1 } 96%, 100% { opacity: 0 } }

/* ---------- header ---------- */
.hd {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  background: color-mix(in oklab, var(--paper) 72%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  padding: 14px max(var(--pad), calc((100% - 1080px) / 2));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand { color: var(--ink); text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.brand:hover { color: var(--ink); }
.brand__mark { display: flex; width: 46px; height: 34px; }
.nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); flex-wrap: wrap; font-size: 15px; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--wax); }
.pill { font-size: 14px; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; }
.pill--muted { color: var(--muted); padding: 5px 14px; }

/* ---------- the pixel seal mark ---------- */
.mark { overflow: visible; display: block; width: 100%; height: 100%; }
.mark g { transform-box: fill-box; transform-origin: center; transition: transform 380ms cubic-bezier(.2,.9,.25,1) var(--d, 0ms); }
.mark rect { animation: sb-bob 2.6s ease-in-out var(--b, 0s) infinite; }
.mark:hover g { transform: translate(calc(var(--dx) * .14px), calc(var(--dy) * .14px)); }
.mark:hover rect { animation-duration: 1s; }

/* ---------- hero ---------- */
.hero-wrap { position: relative; overflow: hidden; isolation: isolate; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hero {
  position: relative; max-width: 1160px; margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--pad) clamp(40px, 6vw, 72px);
  min-height: min(820px, calc(100svh - 64px));
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero > div { min-width: 0; }
.hero h1 {
  background: linear-gradient(100deg, var(--ink) 0 42%, #C9CFFF 48%, #9FE6FF 52%, var(--ink) 58% 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sb-shine 7s ease-in-out infinite;
  margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(42px, 6.2vw, 76px); line-height: .98; letter-spacing: -.045em; text-wrap: balance;
}
.lede { margin: 18px 0 0; max-width: 34rem; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.join { margin-top: 32px; max-width: 32rem; }
.join label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.join__row { display: flex; flex-wrap: wrap; gap: 10px; }
.join input { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 17px; color: var(--ink); background: var(--field); border: 1px solid var(--rule); border-radius: 999px; padding: 12px 18px; }
.join input[aria-invalid="true"] { border-color: var(--wax); }
.btn-wax {
  flex: 0 0 auto; font-size: 17px; font-weight: 700; color: var(--on-wax); background: var(--wax); border: 0; border-radius: 999px; padding: 12px 22px;
  box-shadow: 0 0 0 1px rgba(143,92,255,.6), 0 8px 28px -10px rgba(59,75,255,.8); transition: box-shadow .25s, transform .25s;
}
.btn-wax:hover { box-shadow: 0 0 0 1px #8F5CFF, 0 10px 30px -6px rgba(143,92,255,.65); transform: translateY(-1px); }
.btn-wax[disabled] { opacity: .65; cursor: progress; }
.join__err { margin: 10px 0 0; font-size: 15px; color: var(--wax); }
.captcha:empty { display: none; }
.captcha { margin-top: 10px; }
.joined { margin: 32px 0 0; max-width: 32rem; font-size: 17px; font-weight: 500; }
.joined b { word-break: break-all; }
.status { margin: 16px 0 0; font-size: 15px; color: var(--muted); max-width: 32rem; }

/* hero terminal */
.demo { position: relative; }
.glow { position: absolute; inset: -14% -10%; z-index: 0; pointer-events: none; filter: blur(70px); opacity: .45; border-radius: 50%; background: conic-gradient(from 0deg, #3B4BFF, #8F5CFF, #2FC3EE, #3B4BFF); animation: sb-spin 22s linear infinite; }
.card {
  position: relative; background: linear-gradient(var(--term), var(--term)) padding-box, var(--grad) border-box;
  color: var(--term-ink); border: 1px solid transparent; border-radius: 12px; box-shadow: 0 24px 60px -30px rgba(59,75,255,.45);
}
.demo .card { backdrop-filter: blur(2px); font-family: var(--f-mono); font-size: 14px; line-height: 1.7; }
.term-body { padding: 24px 22px 26px; min-height: 312px; position: relative; }
.t-who { color: var(--term-dim); }
.t-who + .t-cmd { word-break: break-word; }
.t-cmd { font-size: 15px; }
.t-cmd--pad { padding-right: 104px; }
.t-p { color: var(--term-dim); }
.t-link { margin-top: 12px; font-size: 15px; word-break: break-all; padding-right: 104px; }
.t-key { color: var(--term-key); border-bottom: 1px dashed var(--term-key); }
.t-note { margin-top: 4px; font-family: var(--f-body); font-size: 13px; color: var(--term-key); }
.t-codex { margin-top: 26px; }
.t-gone { color: var(--term-key); font-weight: 500; }
.caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--term-ink); margin-left: 2px; animation: sb-blink 1s steps(1) infinite; }
.demo [hidden] { display: none !important; }

.seal { position: absolute; right: 16px; top: 58px; width: 96px; height: 96px; pointer-events: none; }
.seal__half { position: absolute; inset: 0; transition: transform 650ms cubic-bezier(.2,.9,.25,1), opacity 700ms ease 400ms; }
.seal__half--l { clip-path: polygon(0 0, 53% 0, 46% 21%, 57% 40%, 44% 61%, 55% 79%, 47% 100%, 0 100%); }
.seal__half--r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 47% 100%, 55% 79%, 44% 61%, 57% 40%, 46% 21%); }
.wax { position: absolute; inset: 0; background: var(--wax-fill); border-radius: 47% 53% 51% 49% / 53% 47% 53% 47%; box-shadow: inset 0 0 0 5px rgba(0,0,0,.14), inset 0 -8px 16px rgba(0,0,0,.25), 0 10px 30px -8px rgba(59,75,255,.6); display: grid; place-items: center; }
.wax::before { content: ''; position: absolute; inset: 13px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 50%; }
.wax__mark { display: flex; width: 50px; height: 36px; position: relative; }
.seal[data-state="hidden"] .seal__half { transform: scale(.6); opacity: 0; }
.seal[data-state="cracked"] .seal__half--l, .seal[data-state="burned"] .seal__half--l { transform: translate(-18px, 12px) rotate(-17deg); }
.seal[data-state="cracked"] .seal__half--r, .seal[data-state="burned"] .seal__half--r { transform: translate(16px, 18px) rotate(13deg); }
.seal[data-state="burned"] .seal__half { opacity: .28; }
.replay { margin-top: 10px; display: flex; justify-content: flex-end; }

/* ---------- today vs sealb.in ---------- */
.flow { max-width: 1160px; margin: 0 auto; padding: 0 var(--pad) clamp(56px, 8vw, 96px); }
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 14px; }
.lane { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px 14px; background: color-mix(in oklab, var(--paper) 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lane__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.lane__head span:first-child { font-size: 14px; font-weight: 700; }
.lane__res { font-size: 13px; font-weight: 700; opacity: 0; }
.lane__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.node { padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--field); font-size: 13px; font-weight: 700; white-space: nowrap; }
.track { position: relative; height: 76px; }
.track__dash { position: absolute; top: 50%; left: 0; right: 0; border-top: 1.5px dashed var(--rule); }
.track__line { position: absolute; top: calc(50% - 1px); left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #3B4BFF, #8F5CFF, #2FC3EE); opacity: .7; }
.st { position: absolute; top: calc(50% - 15px); transform: translateX(-50%); width: 48px; height: 30px; }
.st__box, .st__hit { position: absolute; inset: 0; border-radius: 6px; display: grid; place-items: center; font-size: 11px; background: var(--paper); }
.st__box { border: 1px dashed var(--rule); color: var(--muted); }
.st__hit { border: 1.5px solid var(--ink); font-weight: 700; color: var(--ink); opacity: 0; }
.st__hit i { position: absolute; top: -5px; right: -5px; width: 10px; height: 8px; background: var(--muted); border-radius: 1.5px; box-shadow: 0 0 0 2px var(--paper); }
.st__tag { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; opacity: 0; }
.pkt { position: absolute; top: 50%; margin-top: -8px; width: 16px; height: 16px; border-radius: 2px; background: var(--muted); z-index: 2; box-shadow: 0 0 0 2px var(--paper); left: 0; animation: fT-move 8s linear infinite; }
.trk-url { position: absolute; top: calc(50% + 14px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; font-family: var(--f-mono); }
.tile { position: absolute; top: 50%; left: 0; margin-top: -8px; width: 16px; height: 16px; border-radius: 2px; background: var(--muted); animation: fS-tile 8s linear infinite; }
.mover { position: absolute; top: 50%; margin-top: -10px; width: 20px; height: 20px; z-index: 2; left: 0; animation: fS-move 8s linear infinite; }
.mover i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), rgba(255,255,255,0) 45%), conic-gradient(from 210deg, #2E3BC9, #7A5CFF, #2FC3EE, #3B4BFF, #2E3BC9); }
.mover i:first-child { clip-path: polygon(0 0, 54% 0, 44% 30%, 58% 55%, 46% 100%, 0 100%); animation: fS-l 8s linear infinite; }
.mover i:last-child { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%, 58% 55%, 44% 30%); animation: fS-r 8s linear infinite; }
.opened { position: absolute; right: 0; bottom: calc(50% + 14px); font-size: 11px; font-weight: 700; color: var(--wax); white-space: nowrap; opacity: 0; animation: fS-open 8s linear infinite; }
.a-s1 { animation: fT-s1 8s linear infinite; } .a-s2 { animation: fT-s2 8s linear infinite; } .a-s3 { animation: fT-s3 8s linear infinite; }
.a-res { animation: fT-res 8s linear infinite; } .a-open { animation: fS-open 8s linear infinite; }

/* ---------- sections ---------- */
.sec { border-top: 1px solid transparent; border-image: var(--grad-line) 1; }
.sec__in { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--pad); }
.sec__in--narrow { max-width: 880px; }
.h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.sub { margin: 14px 0 0; max-width: 42rem; color: var(--muted); text-wrap: pretty; }
.sub + .sub { margin-top: 12px; }
.small { font-size: 15px; color: var(--muted); }
h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.muted { color: var(--muted); }
p.muted { margin: 0; max-width: 60ch; text-wrap: pretty; }

/* tabs */
.tabs { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.tab { font-size: 15px; font-weight: 500; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; }
.tab[aria-selected="true"] { font-weight: 700; color: var(--on-wax); background: var(--wax); }
.install { margin-top: 16px; }
.install__row { display: flex; align-items: center; gap: 16px; padding: 20px 16px 20px 22px; flex-wrap: wrap; }
.install__cmd { flex: 1 1 16rem; min-width: 0; font-family: var(--f-mono); font-size: 16px; line-height: 1.6; word-break: break-word; }
.install__copy { flex: 0 0 auto; font-family: var(--f-body); font-size: 15px; font-weight: 700; color: var(--term); background: var(--term-key); border: 0; border-radius: 6px; padding: 8px 16px; }
.install__note { padding: 14px 22px 18px; border-top: 1px solid var(--term-rule); font-size: 15px; color: var(--term-dim); text-wrap: pretty; }

/* guides */
.gtabs { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 10px; }
.gtab { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--field); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; text-align: left; transition: border-color .2s, background .2s; }
.gtab[aria-selected="true"] { background: color-mix(in oklab, var(--wax) 14%, var(--field)); border-color: var(--wax); }
.gtab__icon { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1; border-radius: 5px; background: var(--ink); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.gtab__icon--glyph { background: transparent; -webkit-mask: none; mask: none; }
.gpanel { margin-top: 20px; display: grid; gap: 14px; }
.gpanel > *, .grid2 > *, .install { min-width: 0; }
.linkbtn { font-size: 15px; color: var(--wax); background: transparent; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* code cards */
.cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px 10px 22px; border-bottom: 1px solid var(--term-rule); font-size: 14px; color: var(--term-dim); }
figcaption.cap { padding: 12px 16px 12px 22px; }
.copy { font-size: 13px; color: var(--term-ink); background: transparent; border: 1px solid var(--term-rule); border-radius: 6px; padding: 4px 10px; }
.copy:hover, .install__copy:hover { filter: brightness(1.15); }
pre.code { margin: 0; padding: 18px 22px 22px; font-family: var(--f-mono); font-size: 14px; line-height: 1.7; overflow-x: auto; white-space: pre; }
.gpanel pre.code { padding: 16px 22px 18px; }
.k { color: var(--term-key); }
.d { color: var(--term-dim); }
figure.card { margin: 0; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 24px; }

/* steps */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 36px 32px; }
.steps li { border-top: 2px solid var(--ink); padding-top: 18px; }
.steps li:last-child { border-top-color: var(--wax); }
.steps .n { font-family: var(--f-mono); font-size: 14px; color: var(--muted); }
.steps li:last-child .n { color: var(--wax); }
.steps h3 { margin: 6px 0 8px; }
.steps p { margin: 0; color: var(--muted); font-size: 16px; text-wrap: pretty; }

/* gains */
.gains { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 36px 48px; }
.gains > div { min-width: 0; }
.gains h3 { margin-bottom: 8px; }

/* ruled rows */
.rows { display: grid; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 8px 40px; padding: 24px 0; border-top: 1px solid var(--rule); }
.row:last-child { border-bottom: 1px solid var(--rule); }
.rows--tight .row { gap: 6px 40px; padding: 18px 0; }
.rows--tight h3 { font-size: 19px; }
.row > div { min-width: 0; }
.row code.cmd { display: block; margin-top: 6px; font-size: 14px; word-break: break-word; }

/* conversations */
.conv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 32px 48px; align-items: center; }
.conv > div { min-width: 0; }
.chat { padding: 16px 22px 18px; font-family: var(--f-mono); font-size: 14px; line-height: 1.7; display: grid; gap: 4px; }
.chat > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; }
.chat > div > span:first-child { color: var(--term-dim); }
.chat > div > span:last-child { word-break: break-word; }
.chat hr { height: 1px; border: 0; background: var(--term-rule); margin: 6px 0; }

/* skill */
.skill { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 24px 40px; align-items: start; }
.skill > div { min-width: 0; }
.skill p.muted { margin-top: 10px; }

/* pricing */
.plans { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 36px 28px; }
.plans > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 36px 28px; }
.plan { padding: 20px 0 0; border-top: 2px solid var(--ink); }
.plan--pro { border-top-color: var(--wax); }
.price { margin-top: 8px; font-family: var(--f-display); font-size: clamp(32px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.price span { font-size: 17px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan p { margin: 8px 0 16px; font-size: 15px; color: var(--muted); }
.plan ul { margin: 0; padding: 0 0 0 18px; font-size: 16px; display: grid; gap: 6px; }

/* security FAQ */
.faq { margin-top: 28px; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 19px; font-weight: 700; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: 0 0 auto; font-weight: 400; color: var(--wax); transition: transform .2s; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq .a { padding: 0 0 22px; max-width: 64ch; color: var(--muted); }
.faq .a p { margin: 0; }
.faq .a p + p { margin-top: 10px; }

/* footer */
.ft { border-top: 1px solid transparent; border-image: var(--grad-line) 1; }
.ft__in { max-width: 1160px; margin: 0 auto; padding: 28px var(--pad) 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.ft nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* 404 */
.lost { max-width: 1160px; margin: 0 auto; padding: clamp(64px, 12vw, 128px) var(--pad); }
.lost code { display: block; margin-bottom: 14px; color: var(--wax); font-size: 16px; }
.lost h1 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(42px, 6.2vw, 76px); line-height: .98; letter-spacing: -.045em; max-width: 14ch; }
.lost p { margin: 18px 0 32px; max-width: 34rem; color: var(--muted); font-size: 19px; }

/* Reduced motion: every animation stops on its final, informative frame. */
@media (prefers-reduced-motion: reduce) {
  .hero h1, .glow, .mark rect, .caret { animation: none !important; }
  .mark g, .seal__half { transition: none !important; }
  .mark:hover g { transform: none; }
  .st__hit, .st__tag, .lane__res, .opened { animation: none !important; opacity: 1; }
  .pkt { animation: none; left: calc(100% - 16px); transform: scale(1.5); }
  .tile { animation: none; opacity: 0; }
  .mover { animation: none; left: calc(100% - 20px); }
  .mover i { animation: none !important; opacity: .25; }
  .mover i:first-child { transform: translate(-8px, 6px) rotate(-28deg); }
  .mover i:last-child { transform: translate(8px, 8px) rotate(24deg); }
}