/* Opening hero (28 Oct 2026): headline beside the live demo, then the five products with their prices under both. */
.hero-hook-hero{grid-template-areas:"head demo" "copy copy";grid-template-rows:auto auto;align-items:center;row-gap:40px;padding-top:32px}
.hero-hook-head{grid-area:head}.hero-hook-copy{grid-area:copy}.hero-hook{grid-area:demo;min-width:0}
.hero-hook-head h1{margin:0 0 18px;max-width:16ch}.hero-hook-head .label{margin-bottom:10px}
.hero-hook-card{height:420px;padding:16px;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--bg-soft);display:flex;flex-direction:column;gap:12px}
.hero-hook-card h2{font-size:22px;margin:0}
.hero-hook-tabs{display:flex;gap:4px;flex:none}
.hero-hook-tabs button{flex:1;min-height:44px;padding:8px;border:1px solid transparent;border-radius:var(--r-ctl);font:500 14px/1.3 var(--f-body);background:transparent;color:var(--ink-2);cursor:pointer}
.hero-hook-tabs [aria-selected=true]{border-color:var(--rule);background:var(--card);color:var(--ink)}
.hero-hook-panel{flex:1;min-height:0;overflow:auto;overflow-wrap:anywhere;font-size:14px;line-height:1.45;padding:3px}
.hero-hook-panel label{display:block;margin-bottom:6px;font-weight:600}
.hero-hook-row{display:flex;gap:8px}.hero-hook-row input{flex:1;min-width:0}.hero-hook-row .btn{flex:none;width:auto;padding-inline:12px;font-size:14px}
.hero-hook-call{margin:8px 0 0;text-align:center}
.hero-hook-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.hero-hook-steps li{display:flex;align-items:center;gap:10px;color:var(--ink-2)}
.hero-hook-steps li::before{content:"";width:16px;height:16px;flex:none;border:2px solid var(--rule-strong);border-radius:50%}
.hero-hook-steps .running::before{border-color:var(--accent);border-right-color:transparent;animation:hero-hook-spin .8s linear infinite}
.hero-hook-steps .done::before{content:"✓";border:0;color:var(--sem-ok);font-weight:700;text-align:center}
.hero-hook-steps.complete{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:11px}
.hero-hook-steps.complete li{align-items:start;gap:4px}
#hero-hook-result,#hero-hook-error{margin-top:14px}
.hero-hook-greeting{display:grid;margin-bottom:10px}.hero-hook-greeting>span:not(.vh){grid-area:1/1}#hero-hook-reserve{visibility:hidden}
.hero-hook-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;margin:0 0 12px;font-size:13px}
.hero-hook-facts dt{color:var(--ink-2)}.hero-hook-facts dd{margin:0}
.hero-hook-panel .btn{max-width:100%}
@keyframes hero-hook-spin{to{transform:rotate(360deg)}}
@media (max-width:959px){.hero-hook-card{height:350px}.hero-hook-hero{grid-template-areas:"head" "demo" "copy";grid-template-rows:auto;gap:16px;padding-top:20px}.hero-hook-head h1{font-size:36px;line-height:1.08;max-width:none}.hero-hook-head .label{font-size:11px;letter-spacing:0;margin-bottom:8px}}
@media (prefers-reduced-motion:reduce){.hero-hook-steps .running::before{animation:none}}
.hero-hook-idle{color:var(--ink-2);font-size:14px;line-height:1.45}.hero-hook-idle p{margin:2px 0 6px}.hero-hook-idle ol{margin:0;padding-left:20px}.hero-hook-idle li{margin:0 0 6px}
/* Five products: two labelled groups (3 owner cards, 2 developer cards), one row of five from 1024 px. */
.hero-hook-copy{display:grid;gap:28px}
.hero5 .label{margin:0 0 10px}
.hero5 ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hero5 li{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 16px;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card)}
.hero5 h2{font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:0;max-width:none}
.hero5 li>p{margin:0;max-width:none;font-size:14px;line-height:1.45;color:var(--ink-2)}
.hero5 li>.hero5-price{font:600 22px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.hero5-price span{display:block;margin-top:3px;font:400 14px/1.45 var(--f-body);letter-spacing:0;color:var(--ink-2)}
.hero5 .link-arrow{font-size:14px;align-self:start}
.hero5 .btn{margin-top:auto;width:100%;padding-inline:10px}
@media (min-width:640px){.hero5 ul{grid-template-columns:repeat(3,minmax(0,1fr))}.hero5:last-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.hero-hook-copy{grid-template-columns:3fr 2fr;gap:32px}}