/* The /demo page around the walkthrough: the headline, try it yourself, and the founding ask.
   The walkthrough itself is a component (_partials/walkthrough.html, assets/css/walkthrough.css). */

/* Hero */
.dm-hero{position:relative;isolation:isolate;padding:calc(var(--nav-h) + clamp(28px,6vh,72px)) 0 clamp(26px,4vh,40px);text-align:center}
.dm-hero::before{content:"";position:absolute;z-index:-1;left:50%;top:-460px;width:1300px;height:1000px;translate:-50% 0;background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none}
.dm-hero-in{display:flex;flex-direction:column;align-items:center}
.dm-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);box-shadow:var(--shadow-sm),inset 0 1px 0 var(--hi);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 .875rem/1.2 var(--f-body);color:var(--ink-2)}
.dm-lamps{display:inline-flex;gap:4px}
.dm-lamps .lt{width:9px;height:9px;border-width:1.5px;box-shadow:none}
.dm-h1{margin-top:22px;font-size:clamp(2.6rem,5vw,4.5rem);text-wrap:balance}
.dm-lede{margin:20px auto 0;max-width:38em}
.dm-meta{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:.9375rem;color:var(--muted)}
.dm-meta a{color:var(--ink);font-weight:500;text-decoration-color:var(--line-2)}
.dm-meta a:hover{text-decoration-color:var(--acc)}
.anim .dm-hero-in>*{opacity:0}

.dm-tour{padding:0 0 clamp(64px,8vw,112px)}

/* Try it yourself */
.sec.dm-try{padding:clamp(72px,9vw,120px) 0;background:var(--bg-alt);border-block:1px solid var(--line)}
.dm-head{max-width:720px;margin:0 auto clamp(32px,4vw,52px);text-align:center}
.dm-head h2{margin:0 auto}
.dm-head .intro{margin-left:auto;margin-right:auto}
.dm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1040px;margin:0 auto}
.dm-card{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-md),inset 0 1px 0 var(--hi);overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.dm-card:hover{border-color:color-mix(in srgb,var(--acc) 35%,var(--line-2));box-shadow:var(--shadow-lg)}
.dm-art{position:relative;height:204px;padding:22px 24px 0;overflow:hidden;background:linear-gradient(180deg,var(--acc-soft),transparent);border-bottom:1px solid var(--line)}
.dm-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(180deg,transparent,var(--surface));pointer-events:none}
.dm-mini{border-radius:16px 16px 0 0;background:var(--surface);border:1px solid var(--line-2);border-bottom:0;box-shadow:var(--shadow-md);overflow:hidden}
.dm-mini-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);color:var(--muted)}
.dm-mini-bar .win-dots i{width:8px;height:8px}
.dm-mini-bar .ico{width:12px;height:12px;flex:none}
.dm-mini-url{min-width:0;font:400 .75rem/1.2 var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-mini-rows{list-style:none;margin:0;padding:2px 14px}
.dm-mini-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 0;font-size:.8125rem}
.dm-mini-rows li+li{border-top:1px solid var(--line)}
.dm-mini-name{display:grid;min-width:0;line-height:1.3}
.dm-mini-name b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-mini-name small{font-size:.6875rem;color:var(--muted)}
.dm-lights{display:inline-flex;gap:4px}
.dm-lights .lt{width:9px;height:9px;border-width:1.5px;box-shadow:none}
.dm-mini-rows em{font-style:normal;font-size:.75rem;color:var(--muted);white-space:nowrap}
.dm-mini-t{padding:14px 16px 0;font:740 1.05rem/1.12 var(--f-display);letter-spacing:-.025em;max-width:26ch}
.dm-mini-lane{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0;padding:14px 16px 18px}
.dm-mini-lane .tr-lamp{--ls:32px}
.dm-mini-count{margin-left:auto;font-size:.8125rem;font-weight:500;color:var(--muted)}
.dm-mini-count b{color:var(--ink);font-weight:700}
.dm-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;padding:22px 24px 24px}
.dm-kicker{font:600 .75rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc-text)}
.dm-card h3{font-size:1.3rem}
.dm-card-body>p:not(.dm-kicker){color:var(--muted);max-width:46ch}
.dm-card-body>p:last-of-type{margin-bottom:14px}
.dm-card-body .btn{margin-top:auto}
.dm-card .btn .ico{width:16px;height:16px}
@media (max-width:760px){.dm-cards{grid-template-columns:minmax(0,1fr)}.dm-mini-rows .tr-live{display:none}}

/* The ask */
.sec.dm-ask{padding:clamp(72px,9vw,128px) 0 clamp(72px,9vw,120px)}
.dm-offer{justify-content:center;gap:14px}
.dm-offer h2{margin-top:8px;font-size:clamp(2.3rem,4vw,3.4rem)}
.dm-offer-sub{color:var(--muted);font-size:1.0625rem;max-width:34ch}
.dm-offer-links{font-size:.9375rem}
.dm-offer-links a,.dm-questions a{color:var(--ink);font-weight:500}
.dm-questions{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--muted)}
.dm-questions a{overflow-wrap:anywhere}
.rf-need{margin-top:-6px;font-size:.875rem;color:var(--muted)}
.rf-need[hidden]{display:none}