/* 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:rgba(250,248,243,.18);--hg-line-soft:rgba(250,248,243,.12);--hg-grid:rgba(250,248,243,.05);
 --hg-paper:#FAF8F3;--hg-muted:#C9C5BA;--hg-blue:#7CA2F6;--hg-blue-hover:#9DBAF8;
 /* Board 3a, 1440x900: 56px margins (content capped at 1328px on wider screens). */
 --hg-rail:1328px;--hg-gutter:56px;
 /* Orbit grid (Michele, 2026-11-13): the Orbit Mark construction grid (50-unit cell,
    2.6-unit lines, offset 25 across and 33 down), at 48px desktop and 32px phone. */
 --hg-grid-line:2.5px;--hg-grid-cell:48px;--hg-grid-pos:24px 31.7px;
 --hg-grid-image:linear-gradient(var(--hg-grid) var(--hg-grid-line),transparent var(--hg-grid-line)),linear-gradient(90deg,var(--hg-grid) var(--hg-grid-line),transparent var(--hg-grid-line));
}
@media (max-width:767.98px){html[data-hero=grid]{--hg-grid-line:1.66px;--hg-grid-cell:32px;--hg-grid-pos:16px 21.1px}}
/* 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;
 background-color:var(--hg-ink);
 background-image:var(--hg-grid-image);
 background-size:var(--hg-grid-cell) var(--hg-grid-cell);background-position:var(--hg-grid-pos);
 border-bottom:1px solid rgba(250,248,243,.1);color:var(--hg-paper);
}
/* Board 3a navigation: 76px bar, content on the same 56px margins as the Hero
   (outranks the homepage polish rule html[data-direction] ... .site-nav.site-nav). */
html[data-hero=grid][data-hero] body .site-shell .site-nav.site-nav{min-height:76px;padding:0 max(var(--hg-gutter),calc((100% - var(--hg-rail)) / 2))!important;border-bottom:1px solid rgba(250,248,243,.1)}
/* Board 3a: page links in the middle of the bar (36px apart), Sign in and Get started at the right. */
@media (min-width:901px){
 html[data-hero=grid] body .site-shell .site-nav .toda-navlinks{flex:1;display:flex;align-items:center;gap:20px!important;margin-left:24px}
 html[data-hero=grid] body .site-shell .site-nav .toda-navlinks>:is(.site-navlink,.site-signin){font:500 15px/1 Archivo,sans-serif!important;color:var(--hg-paper)!important;text-decoration:none!important;letter-spacing:0!important;text-transform:none!important}
 html[data-hero=grid] body .site-shell .site-nav .toda-navlinks>.site-navlink+.site-navlink{margin-left:16px}
 html[data-hero=grid] body .site-shell .site-nav .toda-navlinks>.site-navlink:first-of-type{margin-left:auto}
 html[data-hero=grid] body .site-shell .site-nav .toda-navlinks>.site-signin{margin-left:auto}
 html[data-hero=grid] body .site-shell .site-nav .toda-navlinks>.site-signup{min-height:44px!important;padding:0 18px!important;font:600 15px/1 Archivo,sans-serif!important;display:inline-flex;align-items:center}
}
@media (min-width:901px) and (max-width:1359px),(max-height:780px) and (min-width:901px){
 html[data-hero=grid] body .site-shell .site-nav .toda-navlinks>.site-navlink+.site-navlink{margin-left:12px}
}
/* Board brand: 22px mark, "MeshLite" 20px bold (19px laptop, 18px phone). */
html[data-hero=grid] body .site-shell .site-nav .toda-brand{gap:10px!important}
html[data-hero=grid] body .site-shell .site-nav .toda-brand img{width:22px!important;height:22px!important}
html[data-hero=grid] body .site-shell .site-nav .toda-brand-word{font:700 20px/1 Archivo,sans-serif!important;letter-spacing:0!important}
@media (max-width:1359px),(max-height:780px) and (min-width:901px){
 html[data-hero=grid] body .site-shell .site-nav .toda-brand img{width:21px!important;height:21px!important}
 html[data-hero=grid] body .site-shell .site-nav .toda-brand-word{font-size:19px!important}
}
@media (max-width:900px){
 html[data-hero=grid] body .site-shell .site-nav .toda-brand{gap:8px!important}
 html[data-hero=grid] body .site-shell .site-nav .toda-brand img{width:20px!important;height:20px!important}
 html[data-hero=grid] body .site-shell .site-nav .toda-brand-word{font-size:18px!important}
 /* Board phone bar: logo and menu only (Get started is the first button under the window). */
 html[data-hero=grid] body .site-shell .site-nav .toda-navlinks>.site-signup{display:none!important}
}
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 ----------------------------------------------------------------
   Values follow the Claude Design board "MeshLite Hero" 3a (Headline A):
   1440x900 here, 1280x640 for laptops, 375x812 for phones. */
#top.hero-grid{
 position:relative;isolation:isolate;margin:0;color:var(--hg-paper);
 padding:32px max(var(--hg-gutter),calc((100% - var(--hg-rail)) / 2)) 48px;
 background-color:var(--hg-ink);
 background-image:var(--hg-grid-image);
 background-size:var(--hg-grid-cell) var(--hg-grid-cell);background-position:var(--hg-grid-pos);
 display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"title side" "stage stage";
 grid-template-rows:auto minmax(0,1fr);column-gap:64px;row-gap:32px;align-items:end;
 /* Same height as the Signature Hero it replaces: navigation + Hero = exactly one screen.
    Nina's window takes up the difference; every other size follows the board. */
 box-sizing:border-box;min-height:calc(100svh - 76px);
}
#top.hero-grid .hg-title{
 grid-area:title;margin:0;max-width:none;
 font:700 64px/1 Archivo,sans-serif;letter-spacing:-.035em;color:var(--hg-paper);text-wrap:balance;
}
#top.hero-grid .hg-side{grid-area:side;display:flex;flex-direction:column;gap:18px;padding-bottom:4px;min-width:0}
#top.hero-grid .hg-lede{margin:0;font:400 19px/1.45 Archivo,sans-serif;color:var(--hg-muted);text-wrap:pretty;background-color:var(--hg-ink)}
#top.hero-grid .hg-actions{display:flex;flex-wrap:wrap;gap:12px}
#top.hero-grid .hg-btn{
 display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:2px;box-sizing:border-box;
 font:600 17px/1 Archivo,sans-serif;text-decoration:none;white-space:nowrap;
 border:1.5px 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:14px;border-top:1px solid rgba(250,248,243,.14);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:8px;
 font:400 16px/1.4 Archivo,sans-serif;color:var(--hg-muted);
}
#top.hero-grid .hg-price-head{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px}
#top.hero-grid .hg-price strong{font-size:20px;font-weight:700;color:var(--hg-paper)}
#top.hero-grid .hg-price a{color:var(--hg-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
#top.hero-grid .hg-price a:hover{color:var(--hg-blue-hover)}

/* Stage: avatar window + four figures in a 260px column. */
#top.hero-grid .hg-stage{
 grid-area:stage;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;min-width:0;align-self:stretch;
 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}
#top.hero-grid .hg-screen-bar{
 display:flex;align-items:center;gap:20px;min-height:40px;padding:0 16px;box-sizing:border-box;
 border-bottom:1px solid var(--hg-line-soft);background:rgba(37,35,28,.7);
 font:600 12px/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)}
#top.hero-grid .hg-screen-bar>span:not(.hg-live){color:var(--hg-muted)}
/* Live point: a solid dot with a ring that pulses outward, like a broadcast light. */
/* Board: a 7px dot whose halo pulses outward (livepulse, 1.8s). */
#top.hero-grid .hg-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hg-paper);animation:hg-livepulse 1.8s infinite}
@keyframes hg-livepulse{0%{box-shadow:0 0 0 0 rgba(250,248,243,.55)}70%{box-shadow:0 0 0 7px rgba(250,248,243,0)}100%{box-shadow:0 0 0 0 rgba(250,248,243,0)}}
#top.hero-grid .hg-view{
 position:relative;flex:1;min-height:240px;overflow:hidden;
 background:repeating-linear-gradient(135deg,#2F2C25 0 12px,#34312A 12px 24px);
 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:14px;min-height:68px;padding:0 34px 0 26px;border-radius:2px;box-sizing:border-box;
 background:var(--hg-blue);color:var(--hg-ink);font:700 21px/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:var(--hg-muted);text-align:center}
#top.hero-grid .hg-stats{display:flex;flex-direction:column;margin:0;border-left:1px solid var(--hg-line);background:rgba(37,35,28,.85)}
#top.hero-grid .hg-stat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:18px 20px;border-bottom:1px solid var(--hg-line-soft);min-width:0}
#top.hero-grid .hg-stat:last-child{border-bottom:0}
#top.hero-grid .hg-stat dt{font:600 12px/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 38px/1.05 Archivo,sans-serif;letter-spacing:-.03em;color:var(--hg-paper)}
#top.hero-grid .hg-stat:nth-child(2) dd{font-size:28px;letter-spacing:-.02em}
#top.hero-grid .hg-stat:nth-child(4) dd{font-size:30px;letter-spacing:-.02em}
#top.hero-grid .hg-short{display:none}
/* Board phone price line says "no per-minute fee"; laptop and desktop keep "avatar". */
#top.hero-grid .hg-fee-short{display:none}
@media (max-width:900px){#top.hero-grid .hg-fee-long{display:none}#top.hero-grid .hg-fee-short{display:inline}}

/* Laptop and short desktop (board 1280x640): text left, window right, the four figures
   as a strip along the bottom of the window. */
@media (max-width:1359px),(max-height:780px) and (min-width:901px){
 html[data-hero=grid][data-hero] body .site-shell .site-nav.site-nav{min-height:64px;padding:0 40px!important}
 #top.hero-grid{padding:32px 40px 40px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"title stage" "side stage";grid-template-rows:1fr 1fr;column-gap:48px;row-gap:18px;align-items:end;min-height:calc(100svh - 64px)}
 #top.hero-grid .hg-title{align-self:end;font-size:54px}
 #top.hero-grid .hg-side{align-self:start;padding-bottom:0}
 #top.hero-grid .hg-lede{font-size:18px}
 #top.hero-grid .hg-btn{min-height:50px;padding:0 22px;font-size:16px}
 #top.hero-grid .hg-price{padding-top:12px;font-size:15px}
 #top.hero-grid .hg-price strong{font-size:18px}
 #top.hero-grid .hg-stage{grid-template-columns:1fr;align-self:stretch}
 #top.hero-grid .hg-screen-bar{min-height:38px}
 #top.hero-grid .hg-view{min-height:280px}
 #top.hero-grid .hg-talk{min-height:62px;padding:0 30px 0 24px;font-size:20px}
 #top.hero-grid .hg-call{padding-bottom:84px}
 #top.hero-grid .hg-stats{position:absolute;left:0;right:0;bottom:0;z-index:3;flex-direction:row;border-left:0;border-top:1px solid var(--hg-line-soft);background:rgba(37,35,28,.88)}
 #top.hero-grid .hg-stat{gap:2px;padding:12px 16px;border-bottom:0;border-left:1px solid var(--hg-line-soft)}
 #top.hero-grid .hg-stat:first-child{border-left:0}
 #top.hero-grid .hg-stat dt{font-size:11px;letter-spacing:.1em}
 #top.hero-grid .hg-stat dd,#top.hero-grid .hg-stat:is(:nth-child(2),:nth-child(4)) dd{font-size:22px;letter-spacing:-.02em}
 #top.hero-grid .hg-long{display:none}
 #top.hero-grid .hg-short{display:inline}
}
/* Phones and narrow tablets (board 375x812): one stack; three figures along the bottom of the window. */
@media (max-width:900px){
 html[data-hero=grid][data-hero] body .site-shell .site-nav.site-nav{min-height:60px;padding:0 8px 0 16px!important}
 #top.hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "lede" "stage" "side";grid-template-rows:auto auto auto auto auto 1fr;column-gap:0;row-gap:10px;padding:18px 16px 24px;min-height:calc(100svh - 60px);align-content:start}
 #top.hero-grid .hg-title{font-size:34px;line-height:1.02;letter-spacing:-.03em;text-wrap:wrap}
 #top.hero-grid .hg-side{display:contents}
 #top.hero-grid .hg-lede{grid-area:lede;font-size:15px}
 #top.hero-grid .hg-stage{grid-template-columns:1fr;margin-top:4px;align-self:start}
 #top.hero-grid .hg-screen-bar{min-height:34px;gap:14px;padding:0 12px;font-size:11px}
 #top.hero-grid .hg-view{flex:none;height:296px;min-height:0}
 #top.hero-grid .hg-call{width:100%;box-sizing:border-box;padding:0 12px 64px}
 #top.hero-grid .hg-talk{width:100%;justify-content:center;min-height:56px;padding:0 16px;font-size:18px}
 #top.hero-grid .hg-stats{position:absolute;left:0;right:0;bottom:0;z-index:3;flex-direction:row;border-left:0;border-top:1px solid var(--hg-line-soft);background:rgba(37,35,28,.88)}
 #top.hero-grid .hg-stat{gap:1px;padding:10px 12px;border-bottom:0;border-left:1px solid var(--hg-line-soft)}
 #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:10px;letter-spacing:.1em}
 #top.hero-grid .hg-stat dd,#top.hero-grid .hg-stat:is(:nth-child(2),:nth-child(4)) dd{font-size:17px;letter-spacing:0}
 #top.hero-grid .hg-long{display:none}
 #top.hero-grid .hg-short{display:inline}
 #top.hero-grid .hg-actions{grid-row:4;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;align-self:start}
 #top.hero-grid .hg-btn{min-height:48px;padding:0 10px;font-size:16px}
 #top.hero-grid .hg-price{grid-row:5;align-self:start;margin-top:4px;padding-top:12px;flex-wrap:nowrap;justify-content:space-between;align-items:center;column-gap:8px;font-size:14px}
 #top.hero-grid .hg-price strong{font-size:16px}
 #top.hero-grid .hg-price a{display:inline-flex;align-items:center;min-height:44px}
}
/* While Nina talks, the figure strip steps aside so the call controls stay clear. */
#top.hero-grid .hg-screen[data-live] ~ .hg-stats{display:none}
@media (min-width:1360px) and (min-height:781px){#top.hero-grid .hg-screen[data-live] ~ .hg-stats{display:flex}}
@media (prefers-reduced-motion:reduce){#top.hero-grid .hg-avatar video{display:none}#top.hero-grid .hg-live::before{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}
/* Board 4b (desktop window 1068x480): subtitle 124px and button 36px above the bottom edge. */
#top.hero-grid .hg-view{align-items:stretch}
#top.hero-grid .hg-call{position:absolute;inset:0;z-index:1;display:block;padding:0;pointer-events:none}
#top.hero-grid .hg-call>*{pointer-events:auto}
#top.hero-grid .hg-mic{display:block;width:16px;height:20px;flex:none}
#top.hero-grid .hg-subtitle{
 position:absolute;left:50%;bottom:124px;transform:translateX(-50%);margin:0;box-sizing:border-box;
 width:max-content;max-width:min(640px,calc(100% - 24px));padding:12px 20px;background:rgba(37,35,28,.88);text-align:center;
}
#top.hero-grid .hg-subtitle-name{display:block;margin-bottom:4px;font:600 12px/1.2 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hg-muted)}
#top.hero-grid .hg-subtitle-line{font:500 24px/1.3 Archivo,sans-serif;color:var(--hg-paper);text-wrap:balance}
#top.hero-grid .hg-talk{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);min-height:60px;padding:0 32px 0 26px;gap:14px;font-size:19px;font-weight:700}
/* Board 4a: 2px blue edge with a slow blue glow (glowpulse, 2.4s); a click anywhere on the window starts the talk. */
#top.hero-grid .hg-screen{z-index:1;outline:2px solid var(--hg-blue);outline-offset:-1px;animation:hg-glowpulse 2.4s ease-in-out infinite}
#top.hero-grid .hg-view{cursor:pointer}
@keyframes hg-glowpulse{
 0%,100%{box-shadow:0 0 0 4px rgba(124,162,246,.16),0 0 28px rgba(124,162,246,.16)}
 50%{box-shadow:0 0 0 8px rgba(124,162,246,.28),0 0 64px rgba(124,162,246,.36)}
}
@media (prefers-reduced-motion:reduce){
 #top.hero-grid .hg-screen{animation:none;box-shadow:0 0 0 6px rgba(124,162,246,.22),0 0 44px rgba(124,162,246,.26)}
}
/* Laptop (board 1280x640): figure strip along the bottom; call sits above it. */
@media (max-width:1359px),(max-height:780px) and (min-width:901px){
 #top.hero-grid .hg-subtitle{bottom:166px;padding:10px 18px}
 #top.hero-grid .hg-subtitle-line{font-size:20px}
 #top.hero-grid .hg-talk{bottom:84px;min-height:62px;padding:0 30px 0 24px;font-size:20px}
}
/* Phone (board 375x812): 56px full-width button above the figure strip. */
@media (max-width:900px){
 #top.hero-grid .hg-subtitle{bottom:136px;padding:8px 14px}
 #top.hero-grid .hg-subtitle-name{font-size:11px}
 #top.hero-grid .hg-subtitle-line{font-size:17px}
 #top.hero-grid .hg-talk{left:12px;right:12px;bottom:64px;transform:none;width:auto;justify-content:center;min-height:56px;padding:0 16px;gap:12px;font-size:18px}
}

/* ---- 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-talking). */
#top.hero-grid .hg-screen:is([data-state],[data-live]) :is(.hg-subtitle,.hg-talk){visibility:hidden}
#top.hero-grid .hg-view.hg-talking{cursor:auto}
#top.hero-grid .hg-view.hg-talking .hg-avatar{display:none}
#top.hero-grid .hg-view.hg-talking .toda-live-demo{z-index:2}
#top.hero-grid .hg-view:not(.hg-talking) .toda-live-demo{display:none}
#top.hero-grid .hg-view.hg-talking .hg-call{display:none}
/* The window has its own "Start talking": the demo's start and restart pills and its intro never show here. */
#top.hero-grid .hg-view.hg-talking :is(#startDemo,#restartDemo,.demo-carousel-intro){display:none!important}
/* While Nina connects and talks, the window keeps her idle framing: a square as tall
   as the window, centred, its sides faded into the stripes. The cover is the same
   portrait at the same size, so the start shows no zoom. */
#top.hero-grid .hg-view.hg-talking .toda-demo-cover{left:50%;right:auto;width:var(--h);max-width:100%;transform:translateX(-50%);background:var(--demo-poster) 50% 0/cover no-repeat}
#top.hero-grid .hg-view.hg-talking :is(.toda-demo-cover,#avatar){-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}

.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}}