/* Hallmark · redesign: full · theme: locked docs/DESIGN.md · genre: modern-minimal · hero: Stage · signature: real product demonstration · modes: light+dark · v2.0.0 */
/* Critique: place the real demo beside the decision, give the workflow a typographic rhythm. */
/* waive 7b: black is required by docs/DESIGN.md. waive 24b: retained video controls use their existing optical spacing. */
/* waive 39b: the video play target intentionally covers the video. waive 72: closed details hide their content by native disclosure behavior. */
/* waive 77: pricing has an API error state in static preview; the closing action is intentionally a compact band. */
/* Product-led landing page. Same Outfit, neutral surfaces and purple token. */
:root{
 --demo-paper:#f2f2f2;--demo-ink:#000;--demo-white:#fff;
 --demo-clear:transparent;--demo-scrim:rgba(0,0,0,.92);--demo-mobile-scrim:#0003;
 --demo-duration-paper:#ffffff20;--demo-duration-rule:#ffffff30;
 --demo-play-shadow:0 2px 12px #0002;
}
.landing-page .product-nav{position:relative;border-bottom:1px solid var(--border);padding-block:20px;gap:24px}
.landing-page .nav-signin{font-size:14px;text-decoration:none;padding:10px 8px;white-space:nowrap}
.landing-page .marketing-actions{gap:12px}.landing-page .marketing-actions .primary{display:flex;gap:16px;text-decoration:none}
.skip-link{position:fixed;inset-inline-start:16px;top:8px;transform:translateY(-160%);z-index:100;padding:12px 20px;background:var(--card);border:2px solid var(--accent);border-radius:6px}
.skip-link:focus{transform:none}
.landing-page .marketing-main{max-width:1280px;padding:0 40px}
.product-hero{padding-block:72px 64px}
.product-hero-copy{max-width:880px;margin-inline:auto;text-align:center}
.product-hero-copy>.eyebrow{display:inline-flex;align-items:center;gap:8px;letter-spacing:normal;font-size:11px;color:var(--muted-foreground)}
.hero-status-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;flex:none}
.product-hero h1{font-size:clamp(48px,6.4vw,80px);line-height:1.04;letter-spacing:-.045em;font-weight:600;margin:24px 0}
.product-hero h1 em{color:inherit;font:inherit}
.product-hero-copy>p{font-size:18px;line-height:1.65;color:var(--muted-foreground);max-width:620px;margin:0 auto}
.product-hero .hero-actions{justify-content:center;margin-top:28px;gap:12px}
.product-hero .hero-actions>a{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;padding:14px 22px;min-height:48px}
.hero-watch svg{width:20px;height:20px;flex:none}
.product-hero-copy>.hero-availability{margin-top:16px;font-size:12px;line-height:1.6}
.hero-availability>span{padding-inline:8px;color:var(--accent)}
.product-demo{margin:48px auto 0;max-width:1140px;scroll-margin-top:24px}
.demo-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-card)}
.demo-frame video{display:block;width:100%;height:100%;object-fit:contain;background:var(--demo-paper)}
.demo-cover{position:absolute;inset:0;width:100%;display:flex;align-items:flex-end;gap:16px;padding:28px;color:var(--demo-white);text-align:start;background:linear-gradient(var(--demo-clear) 45%,var(--demo-scrim) 84%);border:0;border-radius:inherit}
.demo-cover[hidden]{display:none}
.demo-cover:focus-visible{outline:4px solid var(--accent);outline-offset:-5px}
.demo-play-icon{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--demo-white);color:var(--demo-ink);box-shadow:var(--demo-play-shadow)}
.demo-play-icon svg{width:24px;height:24px;margin-inline-start:3px}
.demo-play-copy{display:grid;gap:4px;padding-block:3px}
.demo-play-copy strong{font-size:18px;font-weight:500;line-height:1.3}.demo-play-copy>span{font-size:12px;line-height:1.5;opacity:.8}
.demo-duration{margin-inline-start:auto;align-self:flex-end;padding:7px 12px;background:var(--demo-duration-paper);border:1px solid var(--demo-duration-rule);border-radius:6px;font-size:12px;font-variant-numeric:tabular-nums}
.demo-caption{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px}
.demo-caption .eyebrow{font-size:12px;color:var(--muted-foreground);letter-spacing:normal}
.demo-caption h2{font-size:20px;font-weight:500;line-height:1.3;margin:8px 0 0;letter-spacing:-.02em}
.demo-caption p{font-size:11px;line-height:1.6;color:var(--muted-foreground);margin:0;text-align:end}
.demo-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.demo-chapters button{display:flex;align-items:center;gap:16px;padding:20px;color:var(--foreground);background:transparent;text-align:start;min-width:0}
.demo-chapters button+button{border-inline-start:1px solid var(--border)}
.demo-chapters button:hover,.demo-chapters button[aria-pressed=true]{background:var(--muted)}
.demo-chapters button>span:first-child{font-size:11px;font-variant-numeric:tabular-nums;color:var(--accent)}
.demo-chapters strong{display:block;font-size:13px;line-height:1.5;font-weight:500}.demo-chapters small{display:block;font-size:10px;line-height:1.6;color:var(--muted-foreground);margin-top:2px}
.chapter-arrow{margin-inline-start:auto;font-size:18px;color:var(--muted-foreground)}
.demo-status{font-size:12px;color:var(--muted-foreground);margin:12px 0 0;line-height:1.6}.demo-status:empty{display:none}
.landing-page .section{padding-block:56px;border-top:1px solid var(--border)}
.landing-page .section-heading{align-items:flex-start;gap:48px;margin-bottom:28px}
.landing-page .section-heading h2{font-size:30px;font-weight:500;line-height:1.2;max-width:420px;letter-spacing:-.025em}
.landing-page .section-heading p{font-size:14px;line-height:1.7;max-width:440px}
.landing-page .marketing-card{padding:28px;box-shadow:none;transition:border-color .2s,background .2s}
.landing-page .marketing-card:hover{transform:none!important;box-shadow:none;border-color:var(--border);background:var(--muted)}
.landing-page .marketing-card h3{font-size:18px;font-weight:500}.landing-page .marketing-card p{font-size:14px;line-height:1.7}
.landing-page .lp-step{gap:16px}.landing-page .lp-num{font-size:11px}.landing-page .lp-step ul{gap:6px}.landing-page .lp-step li{font-size:10px}
.landing-page .lp-step.featured{background:var(--card);color:var(--foreground);border-color:var(--accent)}
.landing-page .lp-step.featured p{color:var(--muted-foreground)}.landing-page .lp-step.featured li{background:var(--muted)}
.landing-page .lp-tile .icon{font-size:22px;transform:none!important}
.landing-page .faq{max-width:none}.landing-page .faq summary{font-size:14px}.landing-page .faq p{font-size:14px;max-width:760px;line-height:1.7}
.landing-page .price-card .price{font-size:40px}.landing-page .price-card ul{font-size:13px;line-height:1.8}
.landing-page .marketing-cta h2{font-size:28px;line-height:1.2}.landing-page .marketing-cta p{font-size:14px;line-height:1.6}
.landing-page .marketing-cta>a{flex:none;text-decoration:none}
.landing-page .marketing-footer{max-width:1280px;font-size:12px;line-height:1.7}
[dir=rtl] .chapter-arrow{transform:scaleX(-1)}
@media(max-width:1000px){.landing-page .product-nav{padding-inline:24px}.landing-page .marketing-links{gap:16px}.landing-page .marketing-actions .theme-toggle{font-size:0;width:36px}.landing-page .theme-toggle:after{content:'◐';font-size:18px}.product-hero{padding-top:56px}.landing-page .marketing-main{padding-inline:28px}.demo-chapters button{padding:16px;gap:12px}.demo-chapters small{font-size:10px}.landing-page .section-heading{gap:28px}}
@media(max-width:800px){.landing-page .product-nav{padding:16px 20px;gap:12px}.landing-page .nav-signin{display:none}.landing-page .marketing-actions{gap:8px}.landing-page .marketing-actions>.primary{padding:12px;gap:8px}.landing-page .marketing-main{padding-inline:20px}.product-hero{padding-block:40px}.product-hero h1{font-size:clamp(44px,8vw,64px);margin:20px 0}.product-hero-copy>p{font-size:16px;line-height:1.7;max-width:560px}.product-hero-copy>.eyebrow{font-size:12px;letter-spacing:normal}.product-demo{margin-top:32px}.demo-frame{border-radius:12px}.demo-cover{padding:16px;gap:12px}.demo-play-icon{width:44px;height:44px}.demo-play-copy strong{font-size:14px}.demo-play-copy>span{font-size:12px}.demo-duration{font-size:12px;padding:4px 8px}.demo-caption{margin-top:20px;align-items:flex-start}.demo-caption h2{font-size:17px}.demo-caption p{font-size:12px;max-width:180px}.demo-chapters{margin-top:20px}.demo-chapters button{padding:12px;gap:8px;align-items:flex-start}.demo-chapters strong{font-size:14px}.demo-chapters small{display:none}.chapter-arrow{display:none}.landing-page .section{padding-block:36px}.landing-page .section-heading{display:block}.landing-page .section-heading h2{font-size:27px;max-width:600px}.landing-page .section-heading p{margin-top:16px;max-width:600px}.landing-page .marketing-card{padding:24px}.landing-page .marketing-cta h2{font-size:25px}.landing-page .marketing-cta>a{display:inline-flex;margin-top:20px}.landing-page .marketing-footer{padding-inline:20px}}
@media(max-width:480px){.landing-page .brand-mark{width:36px;height:36px}.landing-page .brand-light{font-size:9px}.landing-page .brand{gap:8px;font-size:18px}.landing-page .product-nav{padding-inline:16px}.landing-page .marketing-main{padding-inline:16px}.product-hero .hero-actions{display:grid;grid-template-columns:1fr}.product-hero .hero-actions>a{font-size:14px}.product-hero-copy>.hero-availability{font-size:10px}.demo-cover{padding:12px;align-items:center;justify-content:center;background:var(--demo-mobile-scrim)}.demo-play-icon{width:48px;height:48px}.demo-play-copy,.demo-duration{display:none}.demo-caption{display:block}.demo-caption p{text-align:start;max-width:none;margin-top:10px}.demo-caption p br{display:none}.demo-chapters button{display:block;padding:12px 10px}.demo-chapters button>span:first-child{display:block;margin-bottom:5px}.demo-chapters strong{font-size:10px}.landing-page .section-heading h2{font-size:25px}}
/* The demonstration is the hero material, with its real controls and disclosure. */
.landing-page .product-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;min-height:650px;padding-block:64px}
.landing-page .product-hero-copy{text-align:start;margin:0;max-width:none}
.landing-page .product-hero h1{font-size:clamp(44px,4.7vw,64px);line-height:1.06;letter-spacing:-.045em;margin:0 0 24px;overflow-wrap:break-word;min-width:0}
.landing-page .product-hero-copy>p{font-size:17px;line-height:1.7;margin:0;max-width:42ch}
.landing-page .product-hero h1 strong{font-weight:700;color:var(--foreground)}
.landing-page .product-hero-copy>p>strong{display:block;margin-block-end:12px;color:var(--foreground);font-weight:700}
.landing-page .hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:32px}
.landing-page .product-demo{margin:0;min-width:0;width:100%}
.landing-page .demo-frame{border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.landing-page .demo-caption{gap:16px;margin-top:20px;display:block}
.landing-page .demo-caption .eyebrow{display:none}
.landing-page .demo-caption h2{font-size:16px;line-height:1.5;margin:0}
.landing-page .demo-caption p{text-align:start;font-size:12px;margin-top:8px}
.landing-page .demo-caption p br{display:none}
.landing-page .demo-chapters{border:0;border-top:1px solid var(--border);border-radius:0;margin-top:20px}
.landing-page .demo-chapters button{padding:16px 8px;gap:8px;align-items:flex-start}
.landing-page .demo-chapters strong{font-size:14px}
.landing-page .demo-chapters small,.landing-page .chapter-arrow{display:none}
.landing-page .section{padding-block:80px}
.landing-page .section-heading h2{font-size:clamp(28px,3vw,40px);line-height:1.15;max-width:520px}
.landing-page .section-heading p{font-size:16px;max-width:40ch}
.landing-page .lp-steps{gap:0;border-block:1px solid var(--border)}
.landing-page .lp-step,.landing-page .lp-step.featured{border:0;border-radius:0;background:transparent;padding:32px;box-shadow:none}
.landing-page .lp-step+.lp-step{border-inline-start:1px solid var(--border)}
.landing-page .lp-num{font-size:32px;line-height:1.2;letter-spacing:-.03em;font-weight:400;color:var(--muted-foreground)}
.landing-page .lp-step h3{font-size:24px;color:var(--foreground)}
.landing-page .lp-step li{border-radius:var(--radius-control);font-size:14px}
.landing-page .lp-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.landing-page .lp-tile,.landing-page .lp-tile.wide{grid-column:auto;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:32px}
.landing-page .lp-tile:first-child{grid-column:1/-1;background:var(--muted);border-radius:var(--radius-card)}
.landing-page .lp-tile .icon{display:none}
.landing-page .lp-tile h3{font-size:22px}
.landing-page .lp-tile p{max-width:65ch}
.landing-page .marketing-card{transform:none!important;animation:none}
.landing-page .marketing-card:hover{background:transparent;box-shadow:none}
.landing-page .faq details{padding-block:24px}
.landing-page .faq summary{font-size:17px}
.landing-page .faq p{font-size:16px}
.landing-page :is(h1,h2,h3){text-wrap:balance}
.landing-page .card-grid .icon{display:none}
.landing-page .eyebrow{font-size:12px;letter-spacing:normal;text-transform:none}
.landing-page .price{font-variant-numeric:tabular-nums}
.landing-page .demo-play-copy{background:var(--demo-ink);padding:8px;border-radius:var(--radius-control)}
.landing-page .lp-step ul{display:grid;justify-items:start}
.landing-page :is(a,button,summary):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.landing-page :is(a,button):active{transform:translateY(1px)}
.landing-page button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:960px){.landing-page .product-hero{grid-template-columns:minmax(0,1fr);gap:40px;min-height:0;padding-block:48px}.landing-page .product-hero-copy{max-width:650px}.landing-page .product-hero h1{font-size:56px}.landing-page .product-demo{max-width:760px}.landing-page .section{padding-block:56px}}
@media(max-width:600px){.landing-page .product-hero h1{font-size:44px}.landing-page .lp-steps,.landing-page .lp-bento{grid-template-columns:minmax(0,1fr)}.landing-page .lp-step+.lp-step{border-inline-start:0;border-top:1px solid var(--border)}.landing-page .lp-step,.landing-page .lp-tile{padding:24px 0}.landing-page .lp-tile:first-child{padding:24px}.landing-page .hero-actions{display:flex}.landing-page .hero-actions>a{flex:1}.landing-page .section{padding-block:40px}}
.landing-page .community-badge{display:inline-flex;align-items:center;gap:var(--space-8);max-width:100%;margin-block-end:var(--space-16);padding:var(--space-8) var(--space-12);border:1px solid var(--border);border-radius:var(--radius-control);color:var(--muted-foreground);font-size:var(--text-caption)}
.community-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:community-pulse 2.4s ease-in-out infinite}
@keyframes community-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.landing-page *{animation:none!important;transition:none!important}}