/* niellmedia waitlist. Same tokens and rules as the app (app/public/css/tokens.css, app/DESIGN.md):
   light only, Outfit + Urbanist, stone greys, one red accent, white hairline panels, near-black pill buttons. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: local("Outfit"), url("/fonts/Outfit-wght.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap; src: local("Urbanist"), url("/fonts/Urbanist-wght.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 100 900; font-display: swap; src: local("Urbanist Italic"), url("/fonts/Urbanist-Italic-wght.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #fff; --wash: #fafaf9; --wash-2: #f5f5f4;
  --ink: #1c1917; --body: #44403c; --muted: #6b6560; --faint: #a8a29e;
  --line: #efedeb; --line-2: #e7e5e4; --line-3: #d6d3d1;
  --accent: #d91a2a; --accent-hover: #b81523; --accent-ink: #c01727; --accent-soft: rgba(217,26,42,.07); --accent-line: rgba(217,26,42,.24);
  --text: "Urbanist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --display: "Outfit", "Urbanist", ui-sans-serif, system-ui, sans-serif;
  --sh-1: 0 1px 2px rgba(28,25,23,.04), 0 4px 12px rgba(28,25,23,.04);
  --sh-dock: 0 1px 2px rgba(28,25,23,.05), 0 18px 40px -12px rgba(28,25,23,.22);
  --ring: 0 0 0 3px rgba(217,26,42,.28);
  --e: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--body); font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
/* the one texture: a fine dot grid, strongest at the top, fading down */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(28,25,23,.16) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; letter-spacing: -.02em; line-height: 1.15; }
h1 em { font-style: italic; color: var(--accent); }
p { margin: 0; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 100; text-decoration: none; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.mark { width: 30px; height: 30px; display: block; flex: none; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font: 600 16px/1 var(--display); border-radius: 999px; text-decoration: none; transition: transform .2s var(--e), background .15s; }
.btn-dark { background: var(--ink); color: #fff; height: 56px; padding: 0 28px; box-shadow: 0 1px 2px rgba(28,25,23,.12), 0 4px 10px -4px rgba(28,25,23,.24); }
.btn-dark:hover { background: #292524; color: #fff; transform: translateY(-1px); }
.btn-sm { height: 42px; padding: 0 20px; font-size: 15px; }
.gen { border: 0; cursor: pointer; font: 600 16px/1 var(--display); height: 48px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: #fff; white-space: nowrap; transition: transform .2s var(--e), background .15s, opacity .15s; box-shadow: 0 1px 2px rgba(28,25,23,.12), 0 4px 10px -4px rgba(28,25,23,.24); }
.gen:hover { background: #292524; transform: translateY(-1px); }
.gen[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---- hero: one screen, centred ---- */
.hero { min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); display: grid; align-items: center; padding: 48px 24px 72px; text-align: center; }
.hero-in { max-width: 760px; margin: 0 auto; width: 100%; }
.hero h1 { font-size: clamp(42px, 8vw, 72px); line-height: 1.04; letter-spacing: -.03em; margin-bottom: 20px; font-weight: 700; }
.hero-sub { font-size: clamp(17px, 2.4vw, 20px); color: var(--muted); max-width: 540px; margin: 0 auto 36px; }
.join { max-width: 640px; margin: 0 auto; text-align: left; }
.box { background: #fff; border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--sh-dock); padding: 16px 16px 14px; transition: box-shadow .2s, border-color .2s; }
.box:focus-within { border-color: var(--accent-line); box-shadow: var(--sh-dock), 0 0 0 4px var(--accent-soft); }
.box textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; font: 500 18px/1.5 var(--text); color: var(--ink); background: transparent; padding: 6px 6px 10px; min-height: 72px; }
.box textarea::placeholder, .box input::placeholder { color: var(--faint); }
.email-row { border-top: 1px solid var(--line); padding: 12px 6px 6px; }
.email-row label { display: block; font: 600 14px/1.2 var(--display); color: var(--ink); margin-bottom: 8px; }
.email-row input { width: 100%; height: 48px; border: 1px solid var(--line-3); border-radius: 12px; padding: 0 14px; font: 500 16px/1 var(--text); color: var(--ink); background: #fff; outline: 0; }
.email-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,26,42,.14); }
.box-foot { display: flex; justify-content: flex-end; padding: 8px 4px 0; }
.msg { font-size: 14px; color: var(--accent-ink); padding: 0 6px; }
.msg:not(:empty) { padding-top: 10px; }
.trust { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }

/* the success card */
.joined { background: #fff; border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--sh-dock); padding: 28px 24px; text-align: center; }
.joined h2 { font-size: 28px; margin-bottom: 6px; }
.joined .big { font: 700 56px/1 var(--display); color: var(--accent); letter-spacing: -.03em; margin: 10px 0 4px; }
.joined .small { font-size: 14px; color: var(--muted); }
.joined .invite { margin-top: 18px; }
.share { display: flex; gap: 8px; margin: 14px auto 0; max-width: 520px; }
.share input { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--line-3); border-radius: 12px; padding: 0 14px; font: 500 14px/1 var(--text); color: var(--ink); background: var(--wash); }
.joined .leave { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ---- sections ---- */
.sec { padding: 80px 24px; border-top: 1px solid var(--line); }
.wrap { max-width: 1100px; margin: 0 auto; }
.wrap.narrow { max-width: 720px; }
.kicker { font: 700 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; text-align: center; }
.sec h2 { font-size: clamp(30px, 5vw, 42px); letter-spacing: -.025em; text-align: center; margin-bottom: 40px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: #fff; border: 1px solid var(--line-2); border-radius: 16px; padding: 24px; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--muted); }

/* ---- how it works: five steps on the left, a stage that acts each one out on the right ----
   Every animated thing rests in its FINISHED state. The animation only plays under .live (set while the section
   is on screen), so with no JavaScript, or reduced motion, the stage simply shows the finished picture. */
.flow { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; align-items: start; }
.rail { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding-left: 0; }
.step::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -6px; width: 2px; background: var(--line-2); border-radius: 2px; }
.step:last-child::before { display: none; }
.step.passed::before { background: var(--accent); }
.step-btn { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px 6px 0; cursor: pointer; font: inherit; color: inherit; border-radius: 12px; }
.step-btn:hover .st b { color: var(--accent-ink); }
.n { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line-3); color: var(--muted); font: 700 16px/1 var(--display); transition: background .25s, border-color .25s, color .25s; }
.step.passed .n { border-color: var(--accent); color: var(--accent-ink); }
.step.on .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.live .step.on .n::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ring 1.8s ease-out infinite; }
.st { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 18px; min-width: 0; }
.st b { font: 700 18px/1.2 var(--display); color: var(--ink); }
.st span { font-size: 15px; color: var(--muted); display: none; }
.step.on .st span { display: block; }
.bar { display: none; height: 3px; margin: -10px 0 14px 58px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.step.on .bar { display: block; }
.bar::after { content: ""; display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(1); }
.live .step.on .bar::after { transform: scaleX(0); animation: fill 5.5s linear forwards; }

.stage { background: #fff; border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--sh-1); padding: 20px; min-height: 380px; }
.stage-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.chip { background: var(--wash-2); color: var(--muted); border-radius: 999px; padding: 4px 10px; font: 700 12px/1 var(--text); }
.stage-t { font: 600 13px/1 var(--text); color: var(--muted); }
.pane { display: none; }
.pane.on { display: block; }
.cap, .legend { font: 600 13px/1.2 var(--text); color: var(--muted); }
.cap { margin-bottom: 14px; }
.who { font: 600 13px/1 var(--text); color: var(--muted); }
.trk { position: relative; display: block; height: 12px; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.b { display: block; height: 100%; border-radius: 999px; background: var(--line-3); transform-origin: left; }
.w25 { width: 25%; } .w28 { width: 28%; } .w31 { width: 31%; } .w34 { width: 34%; } .w40 { width: 40%; } .w62 { width: 62%; } .w96 { width: 96%; } .w100 { width: 100%; }
.pill { background: var(--accent); color: #fff; border-radius: 999px; padding: 4px 10px; font: 700 13px/1 var(--display); display: inline-block; }
.tag { display: inline-block; background: var(--wash-2); color: var(--body); border-radius: 999px; padding: 5px 11px; font: 600 12px/1 var(--text); white-space: nowrap; }
.tag.ok { background: #f0fdf4; color: #15803d; box-shadow: inset 0 0 0 1px #bbf7d0; }

/* 1 Ask */
.ask { border: 1px solid var(--line-3); border-radius: 14px; padding: 18px 16px; margin-bottom: 18px; font: 500 18px/1.3 var(--text); color: var(--ink); }
.type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 26ch; max-width: 100%; border-right: 2px solid var(--accent); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: var(--wash); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; font: 600 14px/1 var(--text); color: var(--body); }
.live .pane.on .type { width: 0; animation: type 1.3s steps(26, end) .3s forwards, caret .8s step-end infinite; }
.live .pane.on .chips li { animation: rise .5s var(--e) backwards; }
.live .pane.on .chips li:nth-child(1) { animation-delay: 1.8s; }
.live .pane.on .chips li:nth-child(2) { animation-delay: 2.2s; }
.live .pane.on .chips li:nth-child(3) { animation-delay: 2.6s; }

/* 2 Research */
.scan { display: grid; gap: 14px; position: relative; }
.scan-row { display: grid; grid-template-columns: 80px 1fr 56px; gap: 12px; align-items: center; }
.scan-row .trk::after { content: ""; position: absolute; left: 30%; top: -2px; bottom: -2px; border-left: 2px dashed var(--faint); }
.scan-row.hit .b { background: var(--accent); }
.legend { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
.legend i { width: 0; height: 14px; border-left: 2px dashed var(--faint); display: inline-block; }
.live .pane.on .scan-row .b { animation: grow .9s var(--e) backwards; }
.live .pane.on .scan-row:nth-child(1) .b { animation-delay: .1s; }
.live .pane.on .scan-row:nth-child(2) .b { animation-delay: .35s; }
.live .pane.on .scan-row:nth-child(3) .b { animation-delay: .6s; animation-duration: 1.3s; }
.live .pane.on .scan-row:nth-child(4) .b { animation-delay: .85s; }
.live .pane.on .scan-row:nth-child(5) .b { animation-delay: 1.1s; }
.live .pane.on .scan-row.hit .pill { animation: pop .5s var(--e-spring, cubic-bezier(.34,1.56,.64,1)) 1.8s backwards; }

/* 3 Ideas */
.ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.idea { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; font: 600 16px/1.3 var(--display); color: var(--ink); background: #fff; }
.idea small { display: block; font: 500 13px/1.3 var(--text); color: var(--muted); margin-top: 4px; }
.idea.cut { opacity: .45; }
.idea.cut .t { position: relative; }
.idea.cut .t::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; border-top: 2px solid var(--ink); transform-origin: left; }
.idea.keep { border-color: #bbf7d0; box-shadow: 0 0 0 3px #f0fdf4; }
.live .pane.on .idea { animation: rise .5s var(--e) backwards; }
.live .pane.on .idea:nth-child(1) { animation-delay: .1s; }
.live .pane.on .idea:nth-child(2) { animation-delay: .25s; }
.live .pane.on .idea:nth-child(3) { animation-delay: .4s; }
.live .pane.on .idea:nth-child(4) { animation-delay: .55s; }
.live .pane.on .idea.cut { animation: rise .5s var(--e) backwards, dim .5s ease 1.6s backwards; }
.live .pane.on .idea.cut:nth-child(1) { animation-delay: .1s, 1.6s; }
.live .pane.on .idea.cut:nth-child(3) { animation-delay: .4s, 2s; }
.live .pane.on .idea.cut:nth-child(4) { animation-delay: .55s, 2.4s; }
.live .pane.on .idea.cut .t::after { animation: grow .45s var(--e) backwards; }
.live .pane.on .idea.cut:nth-child(1) .t::after { animation-delay: 1.6s; }
.live .pane.on .idea.cut:nth-child(3) .t::after { animation-delay: 2s; }
.live .pane.on .idea.cut:nth-child(4) .t::after { animation-delay: 2.4s; }
.live .pane.on .idea.keep { animation: rise .5s var(--e) .25s backwards, keep .6s ease 2.9s backwards; }

/* 4 Package */
.titles { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.title { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px; font: 600 15px/1.3 var(--display); color: var(--ink); }
.radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-3); position: relative; }
.title.pick { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.title.pick .radio { border-color: var(--accent); }
.title.pick .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.fc { background: var(--wash); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.fc-top { display: flex; justify-content: space-between; align-items: baseline; font: 600 13px/1 var(--text); color: var(--muted); }
.fc-top b { font: 700 26px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.range { position: relative; height: 10px; border-radius: 999px; background: var(--line); margin: 16px 4px 10px; }
.range-fill { position: absolute; left: 18%; right: 26%; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-line); transform-origin: 44% 50%; }
.range-pin { position: absolute; left: 44%; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(28,25,23,.3); }
.fc-ends { display: flex; justify-content: space-between; font: 600 12px/1 var(--text); color: var(--muted); }
.live .pane.on .title { animation: rise .5s var(--e) backwards; }
.live .pane.on .title:nth-child(2) { animation-delay: .15s; }
.live .pane.on .title:nth-child(3) { animation-delay: .3s; }
.live .pane.on .title.pick { animation: rise .5s var(--e) .15s backwards, keepred .6s ease 1.1s backwards; }
.live .pane.on .fc { animation: rise .5s var(--e) 1.5s backwards; }
.live .pane.on .range-fill { animation: spread .9s var(--e) 1.8s backwards; }
.live .pane.on .range-pin { animation: pop .5s cubic-bezier(.34,1.56,.64,1) 2.3s backwards; }

/* 5 Track sales */
.cash { display: grid; gap: 14px; margin-bottom: 18px; }
.cash-row { display: grid; grid-template-columns: 64px 1fr 56px; gap: 12px; align-items: center; }
.cash-row .b { background: var(--accent); }
.amt { font: 700 15px/1 var(--display); color: var(--ink); text-align: right; }
.stage .tile { background: var(--wash); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; align-items: baseline; justify-content: space-between; }
.stage .tile .lab { font: 600 13px/1 var(--text); color: var(--muted); }
.stage .tile b { font: 700 32px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.live .pane.on .cash-row .b { animation: grow .9s var(--e) backwards; }
.live .pane.on .cash-row:nth-child(1) .b { animation-delay: .1s; }
.live .pane.on .cash-row:nth-child(2) .b { animation-delay: .35s; }
.live .pane.on .cash-row:nth-child(3) .b { animation-delay: .6s; }
.live .pane.on .amt { animation: rise .4s var(--e) backwards; }
.live .pane.on .cash-row:nth-child(1) .amt { animation-delay: .7s; }
.live .pane.on .cash-row:nth-child(2) .amt { animation-delay: .95s; }
.live .pane.on .cash-row:nth-child(3) .amt { animation-delay: 1.2s; }
.live .pane.on .tile { animation: rise .5s var(--e) 1.5s backwards; }

/* hovering or focusing the section holds the step timer (the progress bar) so you can read; the picture still finishes drawing */
.flow.hold .bar::after { animation-play-state: paused !important; }

@keyframes fill { to { transform: scaleX(1); } }
@keyframes ring { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes spread { from { transform: scaleX(0); opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
@keyframes type { from { width: 0; } to { width: 26ch; } }
@keyframes caret { 50% { border-right-color: transparent; } }
@keyframes dim { from { opacity: 1; } }
@keyframes keep { 0% { box-shadow: 0 0 0 0 rgba(21,128,61,.35); } 100% { box-shadow: 0 0 0 3px #f0fdf4; } }
@keyframes keepred { 0% { box-shadow: 0 0 0 0 rgba(217,26,42,.35); } 100% { box-shadow: 0 0 0 3px var(--accent-soft); } }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font: 600 18px/1.3 var(--display); color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--text); color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 40px 22px 0; color: var(--muted); }

/* ---- footer: one quiet block ---- */
.foot { border-top: 1px solid var(--line-2); background: var(--wash); }
.foot-in { max-width: 1100px; margin: 0 auto; padding: 48px 24px 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.foot-tag { color: var(--muted); }
.foot-links { display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.foot-links a { color: var(--body); text-decoration: none; font-size: 15px; }
.foot-links a:hover { color: var(--accent-ink); text-decoration: underline; }
.foot-end { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---- plain pages (legal, contact, leave, 404) ---- */
.page { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.page h1 { font-size: clamp(32px, 5vw, 44px); letter-spacing: -.025em; margin-bottom: 8px; }
.page .meta { color: var(--muted); margin-bottom: 36px; }
.prose h2 { font-size: 22px; margin: 36px 0 10px; }
.prose p, .prose li { color: var(--body); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.prose th { font: 600 13px/1.2 var(--display); color: var(--ink); background: var(--wash); }
.panel { background: #fff; border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--sh-1); padding: 28px; }
.panel .gen { margin-top: 16px; }
.contact-list { display: grid; gap: 12px; margin-top: 8px; }
.contact-list a { display: block; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 16px; text-decoration: none; background: #fff; color: var(--ink); font: 600 17px/1.3 var(--display); }
.contact-list a span { display: block; font: 400 14px/1.4 var(--text); color: var(--muted); margin-top: 4px; }
.contact-list a:hover { border-color: var(--line-3); box-shadow: var(--sh-1); }

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 20px; }
  .stage { min-height: 0; }
}
@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .sec { padding: 56px 20px; }
}
@media (max-width: 560px) {
  .hero { padding: 32px 16px 48px; }
  .box-foot .gen { width: 100%; }
  .share { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .bar::after { transform: scaleX(1) !important; }
}