/* Hero 3a draft (2026-11-13): dark grid Hero, from the Claude Design board
   "MeshLite Hero 3a" (1440x900, 1280x640, 375x812). Departures from the
   accepted Signature Hero are listed in drafts/hero-3a/README.md. */
html[data-hero=grid]{
 --hg-ink:#25231C;--hg-ink-2:#2D2B24;--hg-line:#3B3830;--hg-grid:rgba(250,248,243,.055);
 --hg-paper:#FAF8F3;--hg-muted:#B9B4A9;--hg-blue:#7CA2F6;--hg-blue-hover:#9DBAF8;
 --hg-rail:1180px;--hg-gutter:clamp(16px,5vw,64px);
}
/* One continuous dark ground behind the navigation and the Hero. */
html[data-hero=grid] body .site-shell{background:var(--paper)}
html[data-hero=grid] body .site-shell .site-nav{
 position:relative!important;inset:auto!important;z-index:50;max-width:none;
 padding:18px max(var(--hg-gutter),calc((100% - var(--hg-rail)) / 2))!important;
 background-color:var(--hg-ink);
 background-image:linear-gradient(var(--hg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hg-grid) 1px,transparent 1px);
 background-size:44px 44px;background-position:-1px -1px;
 border-bottom:1px solid var(--hg-line);color:var(--hg-paper);
}
html[data-hero=grid] body .site-shell .site-nav .toda-brand-word{color:var(--hg-paper)!important}
html[data-hero=grid] body .site-shell .site-nav .toda-brand img{content:url("/assets/orbit-mark-dark.svg")}
html[data-hero=grid] body .site-shell .site-nav .site-company-endorsement{color:var(--hg-muted)}
html[data-hero=grid] body .site-shell .site-nav .site-company-endorsement:hover{color:var(--hg-blue)}
html[data-hero=grid] body .site-shell .site-nav .site-navlink,
html[data-hero=grid] body .site-shell .site-nav .site-signin{color:var(--hg-paper)!important;font-weight:500}
html[data-hero=grid] body .site-shell .site-nav .site-navlink:hover,
html[data-hero=grid] body .site-shell .site-nav .site-signin:hover{color:var(--hg-blue)!important}
html[data-hero=grid] body .site-shell .site-nav .site-signup{background:var(--hg-blue)!important;color:var(--hg-ink)!important;border-radius:2px;font-weight:600}
@media(hover:hover) and (pointer:fine){html[data-hero=grid] body .site-shell .site-nav .site-signup:hover{background:var(--hg-blue-hover)!important;color:var(--hg-ink)!important}}
html[data-hero=grid] body .site-shell .site-nav details.site-language{background:transparent!important}
html[data-hero=grid] body .site-shell .site-nav .site-language-toggle,
html[data-hero=grid] body .site-shell .site-nav .site-mobile-menu-toggle{background:transparent!important;color:var(--hg-paper)!important;border-color:var(--hg-line)!important;box-shadow:inset 0 0 0 1px var(--hg-line)!important}

/* ---- Hero ---------------------------------------------------------------- */
#top.hero-grid{
 position:relative;isolation:isolate;margin:0;color:var(--hg-paper);
 padding:clamp(40px,5.5vh,64px) max(var(--hg-gutter),calc((100% - var(--hg-rail)) / 2)) clamp(48px,7vh,80px);
 background-color:var(--hg-ink);
 background-image:linear-gradient(var(--hg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hg-grid) 1px,transparent 1px);
 background-size:44px 44px;background-position:-1px -1px;
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,484px);grid-template-areas:"title side" "stage stage";
 column-gap:clamp(32px,5vw,72px);row-gap:clamp(28px,4.5vh,40px);align-items:center;
}
#top.hero-grid .hg-title{
 grid-area:title;margin:0;max-width:13.4em;
 font:700 clamp(40px,4.6vw,66px)/1.02 Archivo,sans-serif;letter-spacing:-.04em;color:var(--hg-paper);text-wrap:balance;
}
#top.hero-grid .hg-side{grid-area:side;display:flex;flex-direction:column;gap:22px;min-width:0}
#top.hero-grid .hg-lede{margin:0;font:400 18px/1.45 Archivo,sans-serif;color:#E9E5DC;text-wrap:pretty}
#top.hero-grid .hg-actions{display:flex;flex-wrap:wrap;gap:10px}
#top.hero-grid .hg-btn{
 display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:2px;
 font:600 16px/1 Archivo,sans-serif;text-decoration:none;white-space:nowrap;
 border:1px solid var(--hg-blue);background:transparent;color:var(--hg-blue);
}
#top.hero-grid .hg-btn-primary{background:var(--hg-blue);color:var(--hg-ink)}
@media(hover:hover) and (pointer:fine){
 #top.hero-grid .hg-btn:hover{border-color:var(--hg-blue-hover);color:var(--hg-blue-hover)}
 #top.hero-grid .hg-btn-primary:hover{background:var(--hg-blue-hover);color:var(--hg-ink)}
}
#top.hero-grid :is(.hg-btn,.hg-price a,.hg-talk):focus-visible{outline:2px solid var(--hg-paper);outline-offset:3px}
#top.hero-grid .hg-price{
 margin:0;padding-top:16px;border-top:1px solid var(--hg-line);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:8px;
 font:400 15px/1.4 Archivo,sans-serif;color:var(--hg-muted);
}
#top.hero-grid .hg-price strong{font-size:19px;font-weight:700;color:var(--hg-paper)}
#top.hero-grid .hg-price a{margin-left:10px;color:var(--hg-blue);font-weight:500;text-decoration:underline;text-underline-offset:3px}
#top.hero-grid .hg-price a:hover{color:var(--hg-blue-hover)}

/* Stage: avatar panel + four figures. */
#top.hero-grid .hg-stage{
 grid-area:stage;display:grid;grid-template-columns:minmax(0,1fr) 234px;min-width:0;
 border:1px solid var(--hg-line);background:var(--hg-ink);
}
#top.hero-grid .hg-screen{position:relative;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--hg-line)}
#top.hero-grid .hg-screen-bar{
 display:flex;align-items:center;gap:22px;min-height:36px;padding:0 16px;border-bottom:1px solid var(--hg-line);
 font:700 11px/1 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hg-muted);
}
#top.hero-grid .hg-live{position:relative;display:inline-flex;white-space:nowrap;flex:none;align-items:center;gap:8px;color:var(--hg-paper)}
/* Live point: a solid dot with a ring that pulses outward, like a broadcast light. */
#top.hero-grid .hg-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hg-paper);box-shadow:0 0 6px rgba(250,248,243,.55);animation:hg-live-dot 1.6s ease-in-out infinite}
#top.hero-grid .hg-live::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;border:1.5px solid var(--hg-paper);box-sizing:border-box;opacity:0;animation:hg-live-ring 1.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes hg-live-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.8);opacity:0}}
@keyframes hg-live-dot{0%,100%{opacity:1}50%{opacity:.55}}
#top.hero-grid .hg-view{
 position:relative;flex:1;min-height:clamp(300px,42vh,420px);overflow:hidden;
 background:repeating-linear-gradient(135deg,#2A2821 0 14px,#25231C 14px 28px);
 display:flex;align-items:flex-end;justify-content:center;
}
#top.hero-grid .hg-avatar{position:absolute;inset:0;margin:auto;height:100%;aspect-ratio:1/1;max-width:100%;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#top.hero-grid .hg-avatar :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
#top.hero-grid .hg-avatar video{opacity:0;transition:opacity .4s ease}
#top.hero-grid .hg-avatar[data-playing=true] video{opacity:1}
#top.hero-grid .hg-avatar::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(to bottom,transparent,rgba(37,35,28,.88))}
#top.hero-grid .hg-call{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px 26px}
#top.hero-grid .hg-talk{
 display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 26px;border-radius:2px;
 background:var(--hg-blue);color:var(--hg-ink);font:600 20px/1 Archivo,sans-serif;text-decoration:none;white-space:nowrap;
}
#top.hero-grid .hg-talk::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
@media(hover:hover) and (pointer:fine){#top.hero-grid .hg-talk:hover{background:var(--hg-blue-hover)}}
#top.hero-grid .hg-call-note{margin:0;font:400 14px/1.4 Archivo,sans-serif;color:#E9E5DC;text-align:center}
#top.hero-grid .hg-stats{display:grid;grid-template-rows:repeat(4,1fr);margin:0}
#top.hero-grid .hg-stat{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-top:1px solid var(--hg-line);min-width:0}
#top.hero-grid .hg-stat:first-child{border-top:0}
#top.hero-grid .hg-stat dt{font:700 11px/1.3 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hg-muted)}
#top.hero-grid .hg-stat dd{margin:0;font:700 30px/1.05 Archivo,sans-serif;letter-spacing:-.02em;color:var(--hg-paper)}
#top.hero-grid .hg-short{display:none}

/* Laptop and short desktop: text left, stage right, figures under the avatar. */
@media (max-width:1359px),(max-height:780px) and (min-width:901px){
 #top.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"title stage" "side stage";row-gap:24px;align-items:end}
 #top.hero-grid .hg-title{align-self:end;font-size:clamp(40px,4.3vw,56px)}
 #top.hero-grid .hg-side{align-self:start}
 #top.hero-grid .hg-stage{grid-template-columns:1fr;align-self:center}
 #top.hero-grid .hg-screen{border-right:0}
 #top.hero-grid .hg-view{min-height:clamp(260px,46vh,380px)}
 #top.hero-grid .hg-stats{grid-template-rows:none;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hg-line)}
 #top.hero-grid .hg-stat{border-top:0;border-left:1px solid var(--hg-line);padding:10px 12px;gap:4px}
 #top.hero-grid .hg-stat:first-child{border-left:0}
 #top.hero-grid .hg-stat-gpu{display:none}
 #top.hero-grid .hg-stat dt{font-size:11px}
 #top.hero-grid .hg-stat dd{font-size:16px}
 #top.hero-grid .hg-long{display:none}
 #top.hero-grid .hg-short{display:inline}
}
/* Phones and narrow tablets: one readable stack. */
@media (max-width:900px){
 #top.hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "lede" "stage" "side";row-gap:16px;padding-top:28px;padding-bottom:40px}
 #top.hero-grid .hg-title{font-size:clamp(30px,8.6vw,44px);line-height:1.04;max-width:none}
 #top.hero-grid .hg-side{display:contents}
 #top.hero-grid .hg-lede{grid-area:lede;font-size:16px}
 #top.hero-grid .hg-actions{grid-row:4;display:grid;grid-template-columns:1fr 1fr;margin-top:8px}
 #top.hero-grid .hg-price{grid-row:5;flex-direction:column;align-items:flex-start;font-size:14px}
 #top.hero-grid .hg-price-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
 #top.hero-grid .hg-price strong{font-size:17px}
 #top.hero-grid .hg-price a{margin-left:0;display:inline-flex;align-items:center;min-height:44px;margin-top:-8px}
 #top.hero-grid .hg-btn{padding:0 10px;font-size:15px}
 #top.hero-grid .hg-stage{grid-template-columns:1fr}
 #top.hero-grid .hg-screen{border-right:0}
 #top.hero-grid .hg-view{min-height:0;aspect-ratio:1/0.82}
 #top.hero-grid .hg-call{width:100%;padding:0 12px 14px}
 #top.hero-grid .hg-talk{width:100%;justify-content:center;font-size:17px;min-height:50px}
 #top.hero-grid .hg-call-note{font-size:14px}
 #top.hero-grid .hg-stats{grid-template-rows:none;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hg-line)}
 #top.hero-grid .hg-stat{border-top:0;border-left:1px solid var(--hg-line);padding:10px;gap:4px}
 #top.hero-grid .hg-stat:first-child{border-left:0}
 #top.hero-grid .hg-stat-gpu{display:none}
 #top.hero-grid .hg-stat dt{font-size:12px;letter-spacing:.06em}
 #top.hero-grid .hg-stat dd{font-size:16px}
 #top.hero-grid .hg-long{display:none}
 #top.hero-grid .hg-short{display:inline}
 #top.hero-grid .hg-screen-bar{gap:14px;font-size:12px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){#top.hero-grid .hg-avatar video{display:none}#top.hero-grid .hg-live::before,#top.hero-grid .hg-live::after{animation:none}}
@media (forced-colors:active){#top.hero-grid :is(.hg-btn,.hg-talk){border:1px solid ButtonText}}

/* ---- Call (4b) and window frame (4a blue glow), chosen 2026-11-13 ---------------------
   Nina's first line shows as a subtitle over her silent loop; the mic button starts the talk.
   The whole video window pulses with a slow blue glow and a click anywhere on it starts the talk. */
#top.hero-grid .hg-talk::before{display:none}
#top.hero-grid .hg-mic{display:block;width:20px;height:20px;flex:none}
#top.hero-grid .hg-subtitle{
 display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 6px;padding:10px 18px;max-width:100%;
 background:rgba(37,35,28,.88);text-align:center;
}
#top.hero-grid .hg-subtitle-name{font:700 11px/1.2 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hg-muted)}
#top.hero-grid .hg-subtitle-line{font:600 22px/1.25 Archivo,sans-serif;letter-spacing:-.01em;color:var(--hg-paper);text-wrap:balance}
@media (max-width:900px){#top.hero-grid .hg-subtitle-line{font-size:17px}}
#top.hero-grid .hg-screen{--hg-glow:124,162,246;z-index:1;border-right-color:transparent;animation:hg-glow 2.8s ease-in-out infinite}
#top.hero-grid .hg-view{cursor:pointer}
@keyframes hg-glow{
 0%,100%{box-shadow:0 0 0 1.5px rgb(var(--hg-glow)),0 0 10px 1px rgba(var(--hg-glow),.28)}
 50%{box-shadow:0 0 0 1.5px rgb(var(--hg-glow)),0 0 30px 6px rgba(var(--hg-glow),.5)}
}
@media (prefers-reduced-motion:reduce){
 #top.hero-grid .hg-screen{animation:none;box-shadow:0 0 0 1.5px rgb(var(--hg-glow)),0 0 18px 3px rgba(var(--hg-glow),.38)}
}

/* ---- Start talking transition (2026-11-13): flat tile wave, top to bottom -------------- */
/* Once "Start talking" is pressed, the live demo surface fills the window: Nina's portrait,
   subtitle and button step aside and the demo's own controls take over (styles shared with
   the carousel in demo-carousel.css, under #top .hg-live). */
#top.hero-grid .hg-screen:is([data-state],[data-live]) :is(.hg-subtitle,.hg-talk){visibility:hidden}
#top.hero-grid .hg-view.hg-live{cursor:auto}
#top.hero-grid .hg-view.hg-live .hg-avatar{display:none}
#top.hero-grid .hg-view.hg-live .toda-live-demo{z-index:2}
#top.hero-grid .hg-view.hg-live .hg-call{display:none}

.hg-connect{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;perspective:700px}
/* Flat tile wave: plain ink tiles cover the window, then flip away row by row, top to bottom. */
.hg-connect i{position:absolute;width:48px;height:48px;background:#25231C;box-shadow:inset 0 0 0 .5px rgba(250,248,243,.08);
 animation:hg-tile-in .18s ease-out both,hg-tile .42s var(--d) cubic-bezier(.4,0,.6,1) forwards}
@keyframes hg-tile-in{from{opacity:0}}
@keyframes hg-tile{to{transform:rotateX(90deg) scale(.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hg-connect{display:none}}