/* Live-preview hero on the platform home page (sites/hero_live.py).
   Loaded only when the hero style is "live". Uses platform_home.html's Cobalt
   tokens (--accent, --fg, --bg, --rule…). Everything is prefixed hl-. */

.hero-live{padding:clamp(36px,6vw,84px) 0 clamp(48px,6vw,88px)}
.hl-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px);align-items:center}
@media (min-width:1040px){.hl-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.hero-live h1.display{font-size:clamp(46px,6.2vw,96px);line-height:.94}
.hero-live h1 .accent{color:var(--accent-ink);background:var(--accent);padding:0 .18em;display:inline-block;line-height:.95}
.hero-live h1 em{font-style:italic;color:var(--fg)}
.hl-lede{margin-top:18px;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--fg-soft);max-width:44ch}

.hl-maker{margin-top:30px;max-width:520px}
.hl-label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.hl-name{width:100%;height:58px;padding:0 18px;font:inherit;font-size:20px;color:var(--fg);background:#FBFAF7;border:1px solid var(--rule-strong);border-radius:0;outline:none;transition:border-color .15s,box-shadow .15s}
.hl-name::placeholder{color:var(--fg-faint)}
.hl-name:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(36,71,242,.15)}
.hl-types{border:0;margin:22px 0 0;padding:0;min-width:0}
.hl-types legend{padding:0;font-size:14px;font-weight:500;margin-bottom:10px}
.hl-chips{display:flex;flex-wrap:wrap;gap:8px}
.hl-chip{position:relative}
.hl-chip input{position:absolute;opacity:0;pointer-events:none}
.hl-chip span{display:inline-flex;align-items:center;height:38px;padding:0 14px;font-size:14px;border:1px solid var(--rule-strong);cursor:pointer;transition:background .15s,color .15s,border-color .15s;user-select:none}
.hl-chip span:hover{border-color:var(--fg)}
.hl-chip input:checked + span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hl-chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.hl-go{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hl-go .btn{height:54px;padding:0 28px;font-size:16px;cursor:pointer}
.hl-go small{font-size:13px;color:var(--fg-soft);line-height:1.5}
.hl-dfy{flex-basis:100%;font-size:14px;color:var(--fg-soft);text-decoration:underline;text-underline-offset:3px}
.hl-dfy:hover{color:var(--fg)}

/* Phones and tablets: the preview sits right under the name box, so people
   see their site change while they type. */
@media (max-width:1039px){
  .hl-grid{gap:0}
  .hl-left,.hl-maker{display:contents}
  .hl-left > h1{order:1}
  .hl-left > .hl-lede{order:2}
  .hl-maker .hl-label{order:3;margin-top:26px}
  .hl-maker .hl-name{order:4}
  .hl-stage{order:5;margin-top:16px}
  .hl-maker .hl-types{order:6}
  .hl-maker .hl-go{order:7}
}

/* ── Preview frame ── */
.hl-stage{min-width:0}
.hl-frame{background:#fff;border:1px solid var(--rule);box-shadow:0 40px 80px -40px rgba(10,18,48,.35),0 2px 6px rgba(10,18,48,.06);overflow:hidden}
.hl-bar{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;background:#ECEBE6;border-bottom:1px solid var(--rule)}
.hl-dots{display:flex;gap:6px;flex:0 0 auto}
.hl-dots i{width:10px;height:10px;border-radius:50%;background:#CFCDC5}
.hl-url{flex:1;min-width:0;display:flex;align-items:center;height:28px;padding:0 12px;background:#fff;border:1px solid var(--rule);font:500 13px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--fg-soft);white-space:nowrap;overflow:hidden}
.hl-url svg{margin-right:8px;flex:0 0 auto;color:#1f8a4c}
.hl-url b{color:var(--fg);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.hl-caret{display:none;width:1.5px;height:15px;background:var(--accent);margin:0 1px;animation:hl-blink 1s steps(1) infinite;flex:0 0 auto}
.hl-frame.is-typing .hl-caret{display:inline-block}
@keyframes hl-blink{50%{opacity:0}}
.hl-viewport{position:relative;height:540px;overflow:hidden;container-type:inline-size;background:#F4F3EF}
.hl-viewport > img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media (max-width:640px){.hl-viewport{height:430px}}

.hl-looks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;min-height:34px}
.hl-looks-label{font-size:13px;color:var(--fg-soft);margin-right:4px}
.hl-look{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 8px;border:1px solid var(--rule);background:#FBFAF7;font-size:13px;color:var(--fg);cursor:pointer}
.hl-look:hover{border-color:var(--fg)}
.hl-look[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.hl-look .sw{display:flex}
.hl-look .sw i{width:14px;height:14px;border-radius:50%;margin-left:-4px;border:1.5px solid #FBFAF7}
.hl-look .sw i:first-child{margin-left:0}
.hl-caption{margin-top:12px;font-size:13px;color:var(--fg-soft);min-height:1.5em}

/* ── The preview site ── */
.ms{position:absolute;inset:0;background:var(--s-bg);color:var(--s-fg);font-family:'Geist',Arial,sans-serif;display:flex;flex-direction:column;animation:hl-in .45s ease both}
.ms.is-same{animation:none}
@keyframes hl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ms.head-serif{--s-head:'Instrument Serif',Georgia,serif;--s-head-w:400;--s-head-ls:-.01em}
.ms.head-sans{--s-head:'Geist',Arial,sans-serif;--s-head-w:600;--s-head-ls:-.01em}
.ms.head-bold{--s-head:'Archivo',Arial,sans-serif;--s-head-w:800;--s-head-ls:-.02em}
.ms-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 26px;border-bottom:1px solid color-mix(in srgb,var(--s-fg) 12%,transparent)}
.ms-brand{font-family:var(--s-head);font-size:22px;font-weight:var(--s-head-w);letter-spacing:var(--s-head-ls);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ms-links{display:flex;gap:18px;font-size:12px;opacity:.75;white-space:nowrap}
.ms-pill{font-size:12px;font-weight:600;padding:8px 14px;background:var(--s-accent);color:var(--s-on);white-space:nowrap}
.ms-hero{flex:1;display:grid;grid-template-columns:1.05fr .95fr;min-height:0}
.ms-copy{padding:34px 26px 24px;display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.ms-eye{font-size:11px;letter-spacing:.08em;opacity:.7}
.ms-h{font-family:var(--s-head);font-weight:var(--s-head-w);letter-spacing:var(--s-head-ls);font-size:clamp(30px,6.4cqi,52px);line-height:.98;margin:0}
.ms-h em{font-style:italic;color:var(--s-accent)}
.ms-p{font-size:13px;line-height:1.55;opacity:.78;max-width:36ch;margin:0}
.ms-ctas{display:flex;gap:8px;flex-wrap:wrap}
.ms-cta{display:inline-flex;align-items:center;height:38px;padding:0 16px;font-size:13px;font-weight:600;background:var(--s-accent);color:var(--s-on)}
.ms-ghost{display:inline-flex;align-items:center;height:38px;padding:0 14px;font-size:13px;border:1px solid color-mix(in srgb,var(--s-fg) 35%,transparent)}
.ms-img{background:var(--s-alt) center/cover no-repeat;min-height:0}
.ms-items{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid color-mix(in srgb,var(--s-fg) 12%,transparent)}
.ms-item{padding:14px 18px;border-left:1px solid color-mix(in srgb,var(--s-fg) 12%,transparent);min-width:0}
.ms-item:first-child{border-left:0}
.ms-item b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-item span{font-size:12px;opacity:.7}

.ms.overlay .ms-hero{grid-template-columns:1fr;position:relative}
.ms.overlay .ms-img{position:absolute;inset:0}
.ms.overlay .ms-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--s-bg) 92%,transparent) 0%,color-mix(in srgb,var(--s-bg) 55%,transparent) 60%,transparent)}
.ms.overlay .ms-copy{position:relative;z-index:1;max-width:62%}
.ms.centered .ms-hero{grid-template-columns:1fr;text-align:center}
.ms.centered .ms-copy{align-items:center}
.ms.centered .ms-img{order:-1;width:clamp(90px,20cqi,130px);aspect-ratio:1;border-radius:50%;margin:26px auto 0}
.ms.centered .ms-p{margin:0 auto}

@container (max-width:560px){
  .ms{overflow:hidden}
  .ms-links,.ms-p{display:none}
  .ms-hero{flex:none;grid-template-columns:1fr}
  .ms:not(.overlay):not(.centered) .ms-img{order:-1;height:150px}
  .ms.overlay .ms-hero{min-height:300px}
  .ms.overlay .ms-copy{max-width:100%}
  .ms.overlay .ms-img::after{background:linear-gradient(0deg,color-mix(in srgb,var(--s-bg) 94%,transparent) 30%,color-mix(in srgb,var(--s-bg) 40%,transparent))}
  .ms-copy{padding:22px 20px 18px;gap:11px}
  .ms-h{font-size:clamp(28px,9.5cqi,40px)}
  .ms-items{grid-template-columns:1fr}
  .ms-item{border-left:0;border-top:1px solid color-mix(in srgb,var(--s-fg) 12%,transparent);display:flex;justify-content:space-between;gap:12px;padding:10px 20px}
  .ms-item:first-child{border-top:0}
  .ms-nav{padding:14px 20px}
}

/* ── The three steps, below the hero ── */
.hl-steps{border-top:1px solid var(--rule);padding:clamp(28px,4vw,44px) 0}
.hl-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hl-steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;color:var(--fg-soft);line-height:1.5}
.hl-steps .n{grid-row:span 2;font-family:'Instrument Serif',serif;font-size:34px;line-height:1;color:var(--accent)}
.hl-steps b{color:var(--fg);font-weight:600}
@media (max-width:760px){.hl-steps ol{grid-template-columns:1fr;gap:18px}}

@media (prefers-reduced-motion:reduce){
  .ms{animation:none}
  .hl-caret{animation:none}
}