.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(36px, 5vw, 72px)); overflow: clip; }
.hero-bg, .phero-bg {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(60% 50% at 78% 0%, rgba(109, 77, 246, 0.13), transparent 70%),
linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 96px,
linear-gradient(90deg, var(--line) 1px, transparent 1px) 50% 0 / 96px 100%;
-webkit-mask-image: radial-gradient(90% 70% at 70% 0%, #000 0%, transparent 72%);
mask-image: radial-gradient(90% 70% at 70% 0%, #000 0%, transparent 72%);
opacity: 0.9;
}
.hero-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7) var(--s-8); align-items: end; }
.hero-head h1 { max-width: 11.5ch; }
.hero-side { padding-bottom: 0.6rem; max-width: 30rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-stage {
position: relative; margin-top: clamp(44px, 5.5vw, 80px);
height: clamp(340px, 46vw, 660px);
transform: perspective(1800px) rotateX(calc((1 - var(--p)) * 5deg)) scale(calc(0.955 + var(--p) * 0.045));
transform-origin: 50% 0;
}
.hero-layer { position: absolute; }
.hero-win { left: 0; top: 0; width: 80%; }
.hero-win .app { height: 46em; overflow: hidden; position: relative; }
.hero-win .app-main { overflow: hidden; }
.hero-win .app-main { position: relative; }
.hero-phone { right: 0; top: 13%; }
.hero-toast { right: 21%; top: -3.4em; }
.hero-att { left: 50%; top: 33em; }
.hero-att-card { width: 17em; box-shadow: var(--e-2); display: grid; gap: 0.6em; }
.hero-att-top { display: flex; align-items: baseline; justify-content: space-between; }
.hero-att-top b { font-size: 0.9375em; font-weight: 900; letter-spacing: -0.019em; }
.hero-att-top span { font-size: 0.75em; color: var(--a-text-3); }
.js .hero-layer > * { opacity: 0; transition: opacity 700ms var(--ease), transform 1200ms var(--ease); }
.js .hero-win > * { transform: translateY(56px); }
.js .hero-phone > * { transform: translate(48px, 72px) rotate(3deg); transition-delay: 260ms; }
.js .hero-toast > * { transform: translateY(-22px) scale(0.9); transition: opacity 400ms var(--ease) 900ms, transform 900ms var(--ease-spring) 900ms; }
.js .hero-att > * { transform: translateY(22px) scale(0.9); transition: opacity 400ms var(--ease) 1150ms, transform 900ms var(--ease-spring) 1150ms; }
.js .hero-stage.is-in .hero-layer > * { opacity: 1; transform: none; }
@media (max-width: 900px) {
.hero-head { grid-template-columns: 1fr; align-items: start; }
.hero-side { padding-bottom: 0; }
.hero-stage { height: clamp(360px, 84vw, 560px); }
.hero-win { width: 100%; }
.hero-win .app { grid-template-columns: 1fr; }
.hero-win .app-side { display: none; }
.hero-phone { right: -2%; top: 24%; }
.hero-toast { right: auto; left: 4%; top: -2.4em; }
.hero-att { display: none; }
}
@media (max-width: 520px) {
.hero-cta .btn { flex: 1 1 100%; }
}
.facts { position: relative; z-index: 2; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.facts-row li { padding: var(--s-6) var(--s-6) var(--s-6) 0; display: grid; gap: 4px; }
.facts-row li + li { padding-left: var(--s-6); border-left: 1px solid var(--line); }
.facts-row b { font-weight: 500; letter-spacing: -0.01em; }
.facts-row span { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; max-width: 26rem; }
@media (max-width: 760px) {
.facts-row { grid-template-columns: 1fr; }
.facts-row li, .facts-row li + li { padding: var(--s-5) 0; border-left: 0; }
.facts-row li + li { border-top: 1px solid var(--line); }
}
.converge { position: relative; }
.js .converge { height: 250vh; }
.converge-pin { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: clip; padding-block: calc(var(--nav-h) + 24px) 32px; }
.js .converge-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.converge-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.converge-swap, .converge-lede { display: grid; }
.converge-swap > * { align-self: end; }
.converge-swap > *, .converge-lede > * { grid-area: 1 / 1; transition: opacity 500ms var(--ease), transform 700ms var(--ease), filter 500ms var(--ease); }
.converge-lede { margin-top: var(--s-5); max-width: 30rem; }
.converge-b { color: var(--ink); }
.js .converge .converge-b { opacity: 0; transform: translateY(16px); filter: blur(6px); }
.js .converge.is-b .converge-b { opacity: 1; transform: none; filter: none; transition-delay: 120ms; }
.js .converge.is-b .converge-a { opacity: 0; transform: translateY(-16px); filter: blur(6px); }
html:not(.js) .converge-a { display: none; }
.converge-field { position: relative; container-type: size; height: min(72vh, 640px); --q: clamp(0, calc(var(--p) / 0.6), 1); }
.frag {
position: absolute; left: 50%; top: 50%; z-index: 1;
width: max-content; max-width: 230px; padding: 14px 16px;
background: var(--paper); border-radius: var(--r-sm); box-shadow: var(--e-2);
font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2);
transform: translate(-50%, -50%) translate(calc(var(--x) * (1 - var(--q))), calc(var(--y) * (1 - var(--q)))) rotate(calc(var(--r) * (1 - var(--q)))) scale(calc(1 - var(--q) * 0.5));
opacity: calc(1 - (var(--q) - 0.62) * 3);
will-change: transform, opacity;
}
.frag b { display: block; color: var(--ink); font-weight: 500; font-size: 0.8125rem; margin-bottom: 8px; }
.frag small { display: block; font-size: 0.6875rem; color: var(--ink-3); margin-bottom: 2px; }
.frag-bub { display: block; width: fit-content; padding: 5px 10px; margin-top: 4px; border-radius: 12px; background: var(--mist-2); }
.frag-bub.is-r { margin-left: auto; background: #dff3e4; }
.frag-mail span { display: block; }
.frag-sheet { width: 190px; }
.frag-sheet i { display: block; height: 1px; background: var(--line-strong); margin-top: 16px; position: relative; }
.frag-sheet i::before { content: ""; position: absolute; left: 0; bottom: 2px; width: calc(38% + var(--n, 0) * 9%); height: 7px; border-radius: 4px; background: var(--mist-2); }
.frag-sheet i:nth-child(3) { --n: 3; } .frag-sheet i:nth-child(4) { --n: 1; } .frag-sheet i:nth-child(5) { --n: 4; }
.frag-grid div, .frag-cal div { display: grid; gap: 2px; }
.frag-grid div { grid-template-columns: repeat(5, 30px); }
.frag-grid i { height: 12px; background: var(--mist); }
.frag-grid i:nth-child(3n) { background: #e2f3e6; } .frag-grid i:nth-child(7n) { background: #fde3e3; }
.frag-cal div { grid-template-columns: repeat(7, 20px); margin-bottom: 8px; }
.frag-cal i { height: 16px; border: 1px solid var(--line); }
.frag-note { background: #fff4b8; box-shadow: 0 10px 22px -12px rgba(80, 60, 0, 0.35); border-radius: 2px; color: #4b4320; font-style: italic; padding: 16px 18px 22px; }
.frag-call { display: flex; align-items: center; gap: 10px; }
.frag-call svg { width: 20px; height: 20px; color: var(--absent); }
.frag-call b { margin: 0; }
.hub {
position: absolute; left: 50%; top: 50%; width: 25em; font-size: clamp(11px, 0.6px + 0.95vw, 15px);
background: var(--paper); border-radius: 1.5em; box-shadow: var(--e-3); overflow: hidden;
transform: translate(-50%, -50%) scale(calc(0.84 + clamp(0, calc((var(--p) - 0.28) * 2.4), 1) * 0.16));
opacity: calc((var(--p) - 0.28) * 4.2);
}
.hub-top { display: flex; align-items: center; gap: 0.75em; padding: 1.1em 1.3em; background: var(--violet); color: #fff; }
.hub-top .app-mono { background: #fff; color: var(--violet); border-radius: 50%; }
.hub-list { padding: 0.6em; }
.hub-list li { display: flex; align-items: center; gap: 0.9em; padding: 0.7em 0.75em; border-radius: 0.9em;
opacity: clamp(0.16, calc((var(--p) - 0.52 - var(--i) * 0.055) * 16), 1);
transform: translateX(calc((1 - clamp(0, calc((var(--p) - 0.52 - var(--i) * 0.055) * 16), 1)) * 12px)); }
.hub-ico { width: 2.5em; height: 2.5em; border-radius: 0.8em; display: grid; place-items: center; background: var(--violet-wash); color: var(--violet); flex: none; }
.hub-list b { display: block; line-height: 1.25; }
.hub-list small { display: block; font-size: 0.82em; color: var(--ink-3); }
@media (max-width: 900px) {
.converge-in { grid-template-columns: 1fr; gap: var(--s-5); align-content: center; }
.converge-field { height: min(54svh, 460px); }
.frag { max-width: 170px; padding: 10px 12px; font-size: 0.6875rem; }
.frag b { font-size: 0.6875rem; margin-bottom: 4px; }
.frag-sheet { width: 140px; }
.frag-grid div { grid-template-columns: repeat(5, 20px); }
.frag-cal div { grid-template-columns: repeat(7, 14px); }
.converge .t-lede { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.js .converge { height: auto; }
.js .converge-pin { position: static; height: auto; }
.js .converge [data-scrub], .js .converge { --p: 1 !important; }
.js .converge .converge-a { display: none; }
.js .converge .converge-b { opacity: 1; transform: none; filter: none; }
}
.day { padding-block: var(--section) calc(var(--section) * 0.5); }
.day-head { margin-bottom: 0; }
.day-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.day-steps { position: relative; }
.day-step { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s-4); padding-left: var(--s-6); border-left: 1px solid var(--night-line); position: relative; transition: opacity 500ms var(--ease); }
.js .day-step { opacity: 0.4; }
.js .day-step.is-active { opacity: 1; }
.day-step::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: #a995ff; transform: scaleY(0); transform-origin: 50% 0; transition: transform 700ms var(--ease-io); }
.day-step.is-active::before, .day-step.is-done::before { transform: none; }
.day-meta { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--t-small); color: var(--on-night-2); }
.day-meta time { font-weight: 500; color: #c4b6ff; font-size: 1.0625rem; }
.day-step h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -0.028em; max-width: 18ch; }
.day-step p { max-width: 27rem; }
.day-stage-wrap { position: sticky; top: calc(var(--nav-h) + 20px); height: calc(100vh - var(--nav-h) - 40px); max-height: 780px; align-self: start; margin-block: 6vh; }
.day-stage { position: relative; height: 100%; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(90% 70% at 50% 0%, #2a2252 0%, var(--night-2) 60%); box-shadow: inset 0 0 0 1px var(--night-line); }
.day-clock { position: absolute; left: 20px; top: 18px; z-index: 5; display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--night-line); font-size: var(--t-small); font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.day-clock-dot { width: 7px; height: 7px; border-radius: 50%; background: #7ce3a8; box-shadow: 0 0 0 0 rgba(124, 227, 168, 0.6); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 9px rgba(124, 227, 168, 0); } }
.day-rail { position: absolute; left: 50%; bottom: 16px; z-index: 5; transform: translateX(-50%); display: flex; gap: 6px; }
.day-rail i { width: 18px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); transition: background-color var(--d-2) linear, width var(--d-3) var(--ease); }
.day-rail i.is-on { width: 34px; background: #a995ff; }
.day-scenes { position: absolute; inset: 0; font-size: clamp(8px, 0.4px + 0.95vw, 14.5px); }
.scene { position: absolute; inset: 64px 0 40px; display: grid; place-items: center; padding-inline: 6%; opacity: 0; visibility: hidden; transform: translateY(28px) scale(0.975); transition: opacity 380ms var(--ease), transform 700ms var(--ease), visibility 0s linear 380ms; }
.scene.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 120ms, 120ms, 0s; }
.scene-win { width: 100%; }
.scene-win .app { height: 39em; overflow: hidden; }
.scene-win .app-main { overflow: hidden; }
.scene.is-posted [data-posted] .post { animation: posted 700ms var(--ease) both; }
.scene-phone .phone { width: 20em; }
.scene-tablet { width: min(100%, 38em); }
.tablet { background: #f7f6f3; border-radius: 1.8em; overflow: hidden; box-shadow: 0 0 0 0.55em #0e0c18, 0 0 0 0.65em #3a3650, var(--e-3); }
.scene-float { position: absolute; z-index: 3; }
.scene-float-a { right: 2%; top: 1.5%; } .scene-float-b { right: 2%; bottom: 7%; width: 21em; } .scene-float-c { left: 3%; top: 40%; }
.scene [data-pop] { opacity: 0; transform: translateY(14px) scale(0.92); transition: opacity 300ms var(--ease), transform 800ms var(--ease-spring); }
.scene [data-pop].is-on { opacity: 1; transform: none; }
.scene [data-posted] { display: none; }
.scene.is-posted [data-posted] { display: contents; animation: posted 700ms var(--ease) both; }
.scene.is-posted [data-composer] { display: none; }
@keyframes posted { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
.scene [data-post-btn] { transition: transform 200ms var(--ease), background-color 200ms linear; }
.scene [data-post-btn].is-pressed { transform: scale(0.92); background: var(--violet-deep); }
.scene [data-msg] { opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: 100% 100%; transition: opacity 260ms var(--ease), transform 600ms var(--ease-spring); }
.scene [data-msg="4"] { transform-origin: 0 100%; }
.scene [data-msg].is-on { opacity: 1; transform: none; }
.sig path { transition: stroke-dashoffset 1800ms var(--ease-io); }
.sig.is-signed path { stroke-dashoffset: 0; }
.scene [data-kiosk-done] { display: none; }
.scene.is-done [data-kiosk-done] { display: grid; animation: posted 700ms var(--ease) both; }
.scene.is-done [data-kiosk-sign] { display: none; }
.scene [data-kiosk-btn] { transition: transform 200ms var(--ease), opacity 200ms linear; }
.scene [data-kiosk-btn].is-off { opacity: 0.45; }
.scene [data-kiosk-btn].is-pressed { transform: scale(0.94); }
.scene [data-markall] { transition: opacity 300ms linear, transform 200ms var(--ease); }
.scene [data-markall].is-pressed { transform: scale(0.98); }
.scene [data-markall].is-gone { display: none; }
.scene [data-att-save] { transition: transform 200ms var(--ease), background-color 300ms linear, color 300ms linear; }
.scene [data-att-save].is-pressed { transform: scale(0.985); }
.post-media { position: relative; margin: 0.875em -1.125em 0; height: 12.5em; overflow: hidden; background: var(--a-bg-2); display: grid; }
.post-media i { grid-area: 1 / 1; background: var(--c); clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-io); }
.post-media i { position: relative; min-height: 0; }
.post-media i svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.post-media i:first-child { clip-path: inset(0); opacity: 0; transition: opacity 600ms var(--ease); }
.post-media.is-on i:first-child { opacity: 1; }
.post-media.is-2 i:nth-child(2), .post-media.is-3 i:nth-child(2), .post-media.is-3 i:nth-child(3) { clip-path: inset(0); }
.post-media-count { position: absolute; right: 0.75em; top: 0.75em; padding: 0.3em 0.7em; border-radius: 99em; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.72em; font-weight: 700; }
html:not(.js) .post-media i:first-child { opacity: 1; }
.scene [data-export] { transition: transform 200ms var(--ease); }
.scene [data-export].is-pressed { transform: scale(0.92); }
@media (max-width: 900px) {
.day-grid { display: flex; flex-direction: column; gap: 0; }
.day-stage-wrap { order: -1; align-self: stretch; top: var(--nav-h); height: 50svh; max-height: none; margin: var(--s-6) calc(var(--gutter) * -1) 0; z-index: 3; }
.day-stage { border-radius: 0; }
.day-step { min-height: 56svh; padding-left: var(--s-5); justify-content: flex-start; padding-top: 6svh; }
.day-step h3 { font-size: 1.375rem; }
.day-step p { font-size: 1rem; }
.day-steps { margin-top: 0; }
.scene { inset: 58px 0 34px; padding-inline: 4%; }
.scene-win .app { grid-template-columns: 1fr; height: 31em; }
.scene-win .app-side { display: none; }
.scene-float-a { top: 2%; } .scene-float-b { top: 20%; }
.day-scenes { font-size: clamp(7.5px, 2.1vw, 11px); }
.scene-phone .phone { width: 17em; }
}
@media (prefers-reduced-motion: reduce) {
.js .day-step { opacity: 1; }
}
.pindex { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.pindex-list { border-top: 1px solid var(--line); }
.pindex-list li { border-bottom: 1px solid var(--line); }
.pindex-row { position: relative; display: grid; grid-template-columns: 44px 1fr 24px; gap: var(--s-5); align-items: start; padding: var(--s-5) 0; }
.pindex-row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--violet); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--ease-io); }
.pindex-row.is-active::before { transform: none; }
.pindex-ico { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--mist); color: var(--ink-3); transition: background-color var(--d-2) linear, color var(--d-2) linear; }
.pindex-ico svg { width: 22px; height: 22px; }
.pindex-row.is-active .pindex-ico { background: var(--violet); color: #fff; }
.pindex-text b { display: block; color: var(--ink-3); transition: color var(--d-2) linear; }
.pindex-row.is-active .pindex-text b, .pindex-row:hover .pindex-text b { color: var(--ink); }
.pindex-text .t-body { display: grid; grid-template-rows: 0fr; font-size: var(--t-small); transition: grid-template-rows 500ms var(--ease), margin 500ms var(--ease), opacity 400ms var(--ease); opacity: 0; max-width: 30rem; }
.pindex-row.is-active .pindex-text .t-body { grid-template-rows: 1fr; margin-top: 6px; opacity: 1; }
.pindex-go { margin-top: 12px; color: var(--violet); opacity: 0; transform: translateX(-8px); transition: opacity var(--d-2) linear, transform var(--d-2) var(--ease); }
.pindex-go svg { width: 20px; height: 20px; }
.pindex-row.is-active .pindex-go { opacity: 1; transform: none; }
.pindex-row:hover .pindex-go { transform: translateX(4px); }
.pindex-view { position: relative; aspect-ratio: 1800 / 1110; font-size: clamp(8px, 0.9vw, 13px); }
.pindex-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 360ms var(--ease), transform 800ms var(--ease); }
.pindex-shot.is-active { opacity: 1; transform: none; z-index: 1; }
@media (max-width: 900px) {
.pindex { grid-template-columns: 1fr; gap: var(--s-7); }
.pindex-view { order: -1; }
.pindex-text .t-body { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; display: block; }
.pindex-go { opacity: 1; transform: none; }
.pindex-text b { color: var(--ink); }
}
.pindex-text .t-body > span { display: block; min-height: 0; overflow: hidden; }
html:not(.js) .scene [data-posted] { display: contents; }
html:not(.js) .cp [data-type]::after { content: attr(data-type); } html:not(.js) .cp [data-type-body]::after { content: attr(data-type-body); } html:not(.js) .cp .ph { display: none; }
html:not(.js) .scene [data-composer] { display: none; }
#roles .tabs-list { margin-inline: auto; }
.tabs-panels { margin-top: clamp(40px, 6vw, 72px); }
.role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.role[hidden] { display: none; }
.role-h { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.role-copy .t-lede { margin-top: var(--s-4); max-width: 32rem; }
.ticks { margin-top: var(--s-6) !important; display: grid; gap: 0; border-top: 1px solid var(--line-strong); max-width: 32rem; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line-strong); font-size: var(--t-small); color: var(--ink); line-height: 1.45; }
.ticks svg { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--violet); stroke-width: 2.2; }
.role-visual { display: grid; place-items: center; min-height: clamp(380px, 44vw, 580px); }
.role-visual.is-phone img { width: auto; height: clamp(380px, 44vw, 580px); filter: drop-shadow(0 40px 50px rgba(45, 25, 140, 0.22)); }
.role-visual .ui { width: 100%; font-size: clamp(8px, 0.8vw, 12px); }
.tablet-frame { width: min(78%, 400px); border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 9px #0e0c18, 0 0 0 10px #3a3650, var(--e-3); }
.role.is-entering .role-copy > * { animation: role-in 700ms var(--ease) both; animation-delay: calc(var(--n, 0) * 60ms); }
.role.is-entering .role-copy > :nth-child(2) { --n: 1; } .role.is-entering .role-copy > :nth-child(3) { --n: 2; }
.role.is-entering .role-visual { animation: role-vis 900ms var(--ease) both; }
@keyframes role-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes role-vis { from { opacity: 0; transform: translateY(28px) scale(0.97); } }
@media (max-width: 860px) {
.role { grid-template-columns: 1fr; gap: var(--s-7); }
.role-visual { min-height: 0; }
.tabs-list { margin-inline: 0; }
}
.reach { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.reach-copy .t-lede { margin-top: var(--s-5); max-width: 33rem; }
.reach-copy .badges { margin-top: var(--s-6); }
.reach-visual { position: relative; height: clamp(420px, 42vw, 580px); font-size: clamp(10px, 0.95vw, 14px); }
.reach-app { position: absolute; right: 6%; top: 0; height: 100%; transform: translateY(calc((0.5 - var(--p)) * 40px)); }
.reach-app img { height: 100%; width: auto; filter: drop-shadow(0 40px 50px rgba(45, 25, 140, 0.2)); }
.reach-mail { position: absolute; left: 0; bottom: 8%; width: 24em; z-index: 2; transform: translateY(calc((0.5 - var(--p)) * -70px)); }
.reach-push { position: absolute; left: 12%; top: 10%; z-index: 2; transform: translateY(calc((0.5 - var(--p)) * -120px)); }
@media (max-width: 860px) {
.reach { grid-template-columns: 1fr; gap: var(--s-7); }
.reach-visual { height: 440px; }
}
.access { border-top: 1px solid var(--line-strong); }
.access-row { display: grid; grid-template-columns: minmax(0, 0.7fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding: var(--s-5) 0; border-bottom: 1px solid var(--line-strong); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); transition: background-color var(--d-2) linear; }
.access-row b { font-weight: 500; color: var(--ink); font-size: 1.0625rem; letter-spacing: -0.01em; }
.access-row.is-head { padding: var(--s-4) 0; color: var(--ink); font-weight: 500; }
.access-row.is-head span { display: inline-flex; align-items: center; gap: 8px; }
.access-row.is-head svg { width: 18px; height: 18px; color: var(--violet); }
.access-row .is-none { color: var(--ink-3); opacity: 0.7; }
@media (max-width: 760px) {
.access-row.is-head { display: none; }
.access-row { grid-template-columns: 1fr; gap: var(--s-3); }
.access-row [data-col]::before { content: attr(data-col); display: block; font-size: var(--t-label); font-weight: 500; color: var(--violet-deep); }
.access-row .is-none { display: none; }
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); counter-reset: none; }
.steps li { position: relative; display: grid; gap: var(--s-3); align-content: start; }
.steps-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--paper); position: relative; z-index: 1; }
.steps-line { position: absolute; left: 56px; right: calc(var(--s-7) * -1 + 12px); top: 22px; height: 1px; background: var(--line-strong); }
.steps li:last-child .steps-line { display: none; }
.steps h3 { margin-top: var(--s-4); }
.steps p { max-width: 24rem; font-size: var(--t-small); }
.rollout-links { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
@media (max-width: 760px) {
.steps { grid-template-columns: 1fr; gap: var(--s-6); }
.steps-line { display: none; }
.steps li { grid-template-columns: 44px 1fr; column-gap: var(--s-4); }
.steps li > :not(.steps-n) { grid-column: 2; }
.steps h3 { margin-top: 8px; }
}
.about-band { text-align: left; }
.about-quote { font-weight: 500; font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem); line-height: 1.16; letter-spacing: -0.03em; text-wrap: pretty; }
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.faq-head { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: var(--s-4); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: var(--s-6); } .faq-head { position: static; } }
.cta, .band { overflow: clip; }
.cta-glow { position: absolute; left: 50%; top: 0; width: min(1100px, 120vw); aspect-ratio: 2 / 1; transform: translate(-50%, calc(-62% + var(--p) * 12%)); background: radial-gradient(closest-side, rgba(109, 77, 246, 0.5), transparent 100%); pointer-events: none; }
.cta-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-9); align-items: center; }
.cta-copy { display: grid; gap: var(--s-5); justify-items: start; }
.cta-copy .t-lede { max-width: 30rem; }
.cta-form { background: rgba(255, 255, 255, 0.04); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); box-shadow: inset 0 0 0 1px var(--night-line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.demo-form { display: grid; gap: var(--s-4); }
.demo-form .btn { margin-top: var(--s-2); }
.demo-fine { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.on-night .demo-fine { color: rgba(244, 242, 255, 0.5); }
.demo-fine.is-sent { color: #7ce3a8; }
.field.is-invalid .input, .field.is-invalid .select { border-color: #ff8a96; box-shadow: 0 0 0 4px rgba(255, 110, 130, 0.18); }
@media (max-width: 900px) { .cta-in { grid-template-columns: 1fr; gap: var(--s-7); } }
.band-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: var(--s-7); align-items: end; }
.band-in .t-lede { margin-top: var(--s-4); max-width: 34rem; }
.band-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 860px) { .band-in { grid-template-columns: 1fr; align-items: start; } }
.phero { position: relative; padding: calc(var(--nav-h) + clamp(40px, 5.5vw, 84px)) 0 clamp(44px, 5.5vw, 80px); overflow: clip; }
.phero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6) var(--s-8); align-items: start; }
.phero-h { max-width: 15ch; }
.phero-lede { max-width: 34rem; }
.phero-side { padding-top: 0.7rem; }
@media (max-width: 900px) { .phero-side { padding-top: 0; } }
@media (max-width: 900px) { .phero-grid { grid-template-columns: 1fr; } }
.phero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.phero.is-center { text-align: center; }
.phero.is-center .phero-h, .phero.is-center .phero-lede { margin-inline: auto; }
.phero.is-center .phero-actions { justify-content: center; }
.pager { border-top: 1px solid var(--line); }
.pager-in { display: grid; grid-template-columns: 1fr 1fr; }
.pager-link { display: grid; gap: 6px; padding: var(--s-7) 0; transition: background-color var(--d-2) linear; }
.pager-link.is-next { text-align: right; justify-items: end; border-left: 1px solid var(--line); padding-left: var(--s-6); }
.pager-link b { display: inline-flex; align-items: center; gap: 12px; }
.pager-link svg { width: 20px; height: 20px; color: var(--violet); transition: transform var(--d-2) var(--ease); }
.pager-link:not(.is-next) svg { transform: rotate(180deg); }
.pager-link:not(.is-next):hover svg { transform: rotate(180deg) translateX(5px); }
.pager-link.is-next:hover svg { transform: translateX(5px); }
@media (max-width: 640px) { .pager-link b { font-size: 1rem; } .pager-link { padding: var(--s-6) 0; } }
.pv-wrap { position: relative; z-index: 1; }
.pv-frame { font-size: clamp(8px, 0.95vw, 14px); transform: translateY(calc((0.35 - var(--p)) * 50px)); }
.pv-frame .win { box-shadow: var(--e-3); }
.pv-comm { height: clamp(420px, 44vw, 620px) !important; }
.pv { position: relative; height: clamp(360px, 38vw, 540px); font-size: clamp(9.5px, 0.4px + 0.95vw, 14.5px); }
.pv > * { position: absolute; will-change: transform; }
.pv .mail { box-shadow: var(--e-3); }
.pv-comm .pv-a { left: 0; top: 0; width: min(60%, 44em); transform: translateY(calc((0.4 - var(--p)) * 40px)); }
.pv-comm .pv-b { right: 4%; top: 0; transform: translateY(calc((0.4 - var(--p)) * -90px)); z-index: 2; }
.pv-comm .pv-c { right: 0; bottom: 6%; width: min(40%, 27em); transform: translateY(calc((0.4 - var(--p)) * -40px)); }
.pv-admin .pv-a { left: 0; top: 8%; width: min(36%, 25em); transform: translateY(calc((0.4 - var(--p)) * 40px)); }
.pv-admin .pv-b { left: 50%; top: 0; width: min(40%, 28em); margin-left: max(-20%, -14em); transform: translateY(calc((0.4 - var(--p)) * -60px)); z-index: 2; }
.pv-admin .pv-c { right: 0; top: 14%; width: min(30%, 21em); transform: translateY(calc((0.4 - var(--p)) * 70px)); }
.pv-reach { height: clamp(320px, 30vw, 440px); }
.pv-reach .pv-a { left: 0; bottom: 0; width: min(80%, 29em); transform: translateY(calc((0.5 - var(--p)) * 30px)); }
.pv-reach .pv-b { right: 0; top: 4%; transform: translateY(calc((0.5 - var(--p)) * -70px)); z-index: 2; }
.pv-reach .pv-c { right: 6%; top: 32%; transform: translateY(calc((0.5 - var(--p)) * -110px)); z-index: 2; }
@media (max-width: 760px) {
.pv { height: auto; display: grid; gap: 12px; font-size: 11px; }
.pv > * { position: static; width: auto !important; margin: 0 !important; transform: none !important; }
.pv-comm .pv-b, .pv-reach .pv-c, .pv-admin .pv-c { display: none; }
}
.chapnav { position: sticky; top: var(--nav-h); z-index: 50; margin-top: clamp(56px, 7vw, 104px); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-block: 1px solid var(--line); }
.chapnav-in { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.chapnav-in::-webkit-scrollbar { display: none; }
.chapnav a { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px; font-size: 0.875rem; font-weight: 500; color: var(--ink-3); transition: color var(--d-1) linear, background-color var(--d-2) linear; }
.chapnav a:hover { color: var(--ink); }
.chapnav a.is-active { color: var(--violet-deep); background: var(--violet-wash); }
.chapter { padding-block: calc(var(--section) * 0.72); scroll-margin-top: 40px; }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.chapter.is-flip .chapter-copy { order: 2; }
.chapter.is-flip .chapter-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chapter.is-narrow .chapter-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chapter.is-narrow.is-flip .chapter-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.chapter-copy { display: grid; gap: var(--s-5); justify-items: start; align-content: start; }
.chapter-copy .t-lede { max-width: 34rem; }
.chapter-copy .ticks { margin-top: 0 !important; width: 100%; }
.chapter-visual { display: grid; place-items: center; min-width: 0; }
.chapter-visual > .ui { width: 100%; font-size: clamp(8px, 0.82vw, 12.5px); }
.chapter-visual > .pv { font-size: clamp(10.5px, 0.4px + 1vw, 15.5px); }
.page-product .phero { padding-bottom: clamp(32px, 4vw, 56px); }
.chapter-visual .pv-solo.is-wide { max-width: 36em; }
.chapter-visual .pv-solo { max-width: 30em; font-size: clamp(11px, 0.5px + 0.95vw, 15px); }
.chapter-visual .pv-solo > * { box-shadow: var(--e-3); }
.chapter-visual .pv-solo .tablet { box-shadow: 0 0 0 0.55em #0e0c18, 0 0 0 0.65em #3a3650, var(--e-3); }
.chapter-visual .pv-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; align-items: start; font-size: clamp(10px, 0.4px + 0.85vw, 13.5px); }
.chapter-visual .pv-duo > * { box-shadow: var(--e-2); }
.chapter-visual .pv-duo > :last-child { margin-top: 3em; }
.pshot { height: clamp(420px, 44vw, 600px); width: auto; filter: drop-shadow(0 40px 50px rgba(45, 25, 140, 0.2)); }
.tablet { background: #f7f6f3; border-radius: 1.8em; overflow: hidden; }
@media (max-width: 900px) {
.chapter-in, .chapter.is-flip .chapter-in, .chapter.is-narrow .chapter-in, .chapter.is-narrow.is-flip .chapter-in { grid-template-columns: 1fr; }
.chapter.is-flip .chapter-copy { order: 0; }
.chapter-visual .pv-duo { grid-template-columns: 1fr; }
.chapter-visual .pv-duo > :last-child { margin-top: 0; }
}
.pv-app { background: var(--a-bg); border-radius: 1.25em; box-shadow: var(--e-3); overflow: hidden; }
.pv .sm-card, .pv .inv-list, .pv .jc, .pv .sw-menu { box-shadow: var(--e-3); }
.jc { background: var(--a-card); border-radius: 1.25em; border: 1px solid var(--a-border); padding: 1.5em; display: grid; gap: 0.5em; }
.jc-head { display: flex; align-items: center; gap: 0.5em; color: var(--a-primary); }
.jc-head b { font-size: 1em; color: var(--a-text); }
.jc-sub { margin: 0; font-size: 0.8125em; line-height: 1.385; color: var(--a-text-3); }
.jc-row { display: flex; align-items: center; gap: 1.5em; margin-top: 0.25em; }
.jc-code { flex: 1; display: flex; justify-content: center; font-size: 1.875em; font-weight: 700; color: var(--a-primary); letter-spacing: 0.2em; }
.jc-code i { font-style: normal; display: inline-block; }
.js [data-reveal] .jc-code i { opacity: 0; transform: translateY(0.4em); transition: opacity 300ms var(--ease), transform 700ms var(--ease-spring); transition-delay: calc(var(--i) * 70ms + 350ms); }
.js [data-reveal].is-in .jc-code i { opacity: 1; transform: none; }
.jc-qr { width: 5.25em; height: 5.25em; flex: none; }
.ui .qr { width: 100%; height: 100%; fill: #000; stroke: none; }
.jc-actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.5em; }
.jc-actions span { display: inline-flex; align-items: center; gap: 0.375em; padding: 0.5em 0.75em; border-radius: 99em; background: var(--a-tint); color: var(--a-primary); font-size: 0.8125em; font-weight: 700; }
.jc-actions .lu { width: 0.875em; height: 0.875em; }
.jc-actions .is-danger, .jc-actions .is-danger .lu { color: var(--a-error); }
.sm-card { background: var(--a-card); border-radius: 1.125em; border: 1px solid var(--a-hairline); box-shadow: var(--a-e-sm); padding: 1em; display: grid; gap: 0.625em; }
.sm-hint { margin: 0; font-size: 0.8125em; line-height: 1.4; color: var(--a-text-2); }
.sm-feature { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em; border-radius: 0.75em; border: 1px solid var(--a-border); background: var(--a-bg); }
.sm-ico { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(196, 196, 196, 0.07); color: var(--a-text-4); }
.sm-ico.is-on { background: rgba(108, 76, 245, 0.08); color: var(--a-primary); }
.sm-ico .lu { width: 1em; height: 1em; }
.sm-copy { flex: 1; min-width: 0; }
.sm-copy b { display: block; font-size: 0.9375em; }
.sm-copy small { display: block; font-size: 0.8125em; line-height: 1.385; color: var(--a-text-4); margin-top: 0.15em; }
.sm-toggle { display: grid; justify-items: end; gap: 0.3em; flex: none; }
.sm-toggle em { font-style: normal; font-size: 0.75em; font-weight: 700; color: var(--a-text-3); }
.sm-toggle em.is-on { color: var(--a-success); }
.js [data-reveal]:not(.is-in) .switch.is-on { background: #d9d9e4; }
.js [data-reveal]:not(.is-in) .switch.is-on i { transform: none; }
.switch { transition: background-color 400ms var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 300ms); }
.switch i { transition-delay: inherit; }
.sm-year { display: grid; gap: 0.3em; padding: 1em; border-radius: 0.75em; border: 1px solid var(--a-border); background: var(--a-bg); }
.sm-year > div:first-child { display: flex; align-items: center; gap: 0.5em; }
.sm-year b { font-size: 0.9375em; }
.sm-year small { font-size: 0.8125em; color: var(--a-text-2); }
.sm-badge { padding: 0.2em 0.6em; border-radius: 99em; background: var(--a-success-wash); color: var(--a-success); font-size: 0.6875em; font-weight: 700; }
.sm-year-actions { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.4em; }
.sm-year-actions span { padding: 0.45em 0.75em; border-radius: 0.75em; background: var(--a-card); border: 1px solid var(--a-border); color: var(--a-primary); font-size: 0.75em; font-weight: 700; }
.inv-list { display: grid; gap: 0.625em; }
.inv { display: flex; gap: 0.75em; background: var(--a-card); border-radius: 1.125em; border: 1px solid var(--a-hairline); box-shadow: var(--a-e-sm); padding: 0.875em; }
.inv-ico { width: 2.625em; height: 2.625em; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(108, 76, 245, 0.125); color: var(--a-primary); }
.inv-ico.is-ok { background: rgba(76, 174, 79, 0.125); color: var(--a-success); }
.inv-body { flex: 1; min-width: 0; display: grid; gap: 0.12em; }
.inv-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.inv-top b { font-size: 0.9375em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-status { padding: 0.2em 0.6em; border-radius: 99em; background: rgba(108, 76, 245, 0.094); color: var(--a-primary); font-size: 0.6875em; font-weight: 700; flex: none; }
.inv-status.is-ok { background: rgba(76, 174, 79, 0.094); color: var(--a-success); }
.inv small { font-size: 0.78em; color: var(--a-text-2); }
.inv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin-top: 0.5em; }
.ui-btn.is-soft.is-danger { background: var(--a-error-wash); color: var(--a-error); }
.sw-menu { background: var(--a-card); border-radius: 1em; border: 1px solid var(--a-hairline); padding: 0.375em; box-shadow: var(--a-e-lg); }
.sw-eyebrow { font-size: 0.6875em; font-weight: 700; color: var(--a-text-3); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.7em 0.9em 0.5em; }
.sw-row { display: flex; align-items: center; gap: 0.75em; padding: 0.5em 0.625em; border-radius: 0.75em; }
.sw-row b { flex: 1; font-size: 0.9375em; }
.sw-row.is-on { background: var(--a-tint); }
.sw-row.is-on b { color: var(--a-primary-pressed); }
.sw-logo { width: 2.125em; height: 2.125em; border-radius: 0.625em; background: #fff; border: 1px solid var(--a-hairline); display: grid; place-items: center; flex: none; }
.sw-logo .app-mono { width: 1.75em; height: 1.75em; border-radius: 0.5em; font-size: 0.75em; }
.sw-check { width: 1.375em; height: 1.375em; border-radius: 50%; background: var(--a-primary); color: #fff; display: grid; place-items: center; flex: none; }
.sw-check .lu { width: 0.875em; height: 0.875em; }
.is-static [data-kiosk-done] { display: none; }
.is-static .sig path { stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms var(--ease-io) 500ms; }
.is-static.is-in .sig path, html:not(.js) .is-static .sig path { stroke-dashoffset: 0; }
.is-static .report-bar i { transform: scaleX(0); }
.is-static.is-in .report-bar i, html:not(.js) .is-static .report-bar i { transform: scaleX(var(--w)); }
.details { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-7); border-top: 1px solid var(--line-strong); }
.details.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.details > div { padding: var(--s-5) 0 var(--s-6); border-bottom: 1px solid var(--line-strong); }
.details dt { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.details dt svg { width: 18px; height: 18px; color: var(--violet); flex: none; }
.details dd { margin: 8px 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); max-width: 26rem; }
@media (max-width: 860px) { .details, .details.is-two { grid-template-columns: 1fr; } }
.terms { border-top: 1px solid var(--line-strong); }
.terms li { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 5fr) minmax(0, 4.6fr); gap: var(--s-6); align-items: baseline; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line-strong); transition: padding-left var(--d-3) var(--ease); }
.terms li:hover { padding-left: var(--s-3); }
.terms-k { font-size: var(--t-small); font-weight: 500; color: var(--violet-deep); }
.terms b { display: block; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
.terms p { max-width: 30rem; }
@media (max-width: 860px) { .terms li { grid-template-columns: 1fr; gap: var(--s-2); } .terms li:hover { padding-left: 0; } }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); border-top: 1px solid var(--line-strong); }
.principles.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-7); }
.principle { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s-5); row-gap: 8px; padding: var(--s-6) 0 var(--s-7); border-bottom: 1px solid var(--line-strong); align-content: start; }
.principles.is-three .principle { grid-template-columns: 1fr; row-gap: var(--s-3); }
.principle-ico { grid-row: span 2; width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--violet-wash); color: var(--violet); transition: transform var(--d-3) var(--ease-spring), background-color var(--d-2) linear, color var(--d-2) linear; }
.principles.is-three .principle-ico { grid-row: auto; background: var(--paper); box-shadow: var(--e-1); }
.principle-ico svg { width: 24px; height: 24px; }
.principle:hover .principle-ico { transform: rotate(-6deg) scale(1.06); background: var(--violet); color: #fff; }
.principle p { max-width: 32rem; font-size: var(--t-small); line-height: 1.6; }
@media (max-width: 860px) { .principles, .principles.is-three { grid-template-columns: 1fr; } }
.secq { text-align: center; display: grid; gap: var(--s-5); justify-items: center; }
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.about-body { display: grid; gap: var(--s-5); max-width: 44rem; }
.about-body .t-lede:first-child { color: var(--ink); }
.about-thanks { margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--ink-3); }
.contact-list { margin: var(--s-3) 0; border-top: 1px solid var(--line-strong); }
.contact-list div { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.contact-list dt { color: var(--ink-2); }
.contact-list dd { margin: 0; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.demo-page { position: relative; padding: calc(var(--nav-h) + clamp(40px, 5.5vw, 84px)) 0 clamp(48px, 6vw, 88px); overflow: clip; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.demo-copy .t-lede { margin-top: var(--s-5); max-width: 32rem; }
.demo-copy .demo-steps { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; max-width: 32rem; }
.demo-steps li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-4); padding-bottom: var(--s-5); position: relative; }
.demo-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17.5px; top: 40px; bottom: 4px; width: 1px; background: var(--line-strong); }
.demo-steps span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--paper); font-size: 0.875rem; font-weight: 500; }
.demo-steps b { font-weight: 500; letter-spacing: -0.01em; }
.demo-steps p { font-size: var(--t-small); color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
.demo-card { background: var(--paper); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); box-shadow: var(--e-3); position: sticky; top: calc(var(--nav-h) + 24px); }
.field-opt { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } .demo-card { position: static; } }
.nf { position: relative; min-height: 86vh; display: grid; align-items: center; padding: calc(var(--nav-h) + 48px) 0 var(--s-9); overflow: clip; }
.nf-code { font-size: clamp(6rem, 22vw, 15rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--violet-line); margin-bottom: var(--s-5); }
.nf .t-lede { margin-top: var(--s-5); }