/* 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:0;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}
/* The rail shares its left line with the window's blue edge; its own grey line runs top, right and bottom. */
#top.hero-grid .hg-stats{display:flex;flex-direction:column;margin:0;border:1px solid var(--hg-line);border-left:0;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}}

/* Narrow laptop (901-1023px wide, board 1280x640; v2.5 moved 1024px and up to the stacked layout): text left, window right, the four figures
   as a strip along the bottom of the window. */
@media (max-width:1023px){
 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: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: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:1024px){#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: one 1px blue edge with a slow, soft blue glow (glowpulse, 2.4s); a click anywhere on the window starts the talk.
   v2.7 A1: the edge is one layer drawn above the window's content, so it is 1px on all four sides
   (an outline with offset was 2px over the bar and 1px over the video). The glow is blur only, with
   no spread, so no second hard edge shows outside the line. */
#top.hero-grid .hg-screen{z-index:1;animation:hg-glowpulse 2.4s ease-in-out infinite}
#top.hero-grid .hg-screen::after{content:"";position:absolute;inset:0;z-index:10;border:1px solid var(--hg-blue);pointer-events:none}
#top.hero-grid .hg-view{cursor:pointer}
@keyframes hg-glowpulse{
 0%,100%{box-shadow:0 0 28px rgba(124,162,246,.16)}
 50%{box-shadow:0 0 64px rgba(124,162,246,.36)}
}
@media (prefers-reduced-motion:reduce){
 #top.hero-grid .hg-screen{animation:none;box-shadow:0 0 44px rgba(124,162,246,.26)}
}
/* Laptop and phone: the figure strip sits inside the window, so the blue edge is drawn on the
   stage, above the strip, to stay 1px all round. */
@media (max-width:1023px){
 #top.hero-grid .hg-screen::after{display:none}
 #top.hero-grid .hg-stage::after{content:"";position:absolute;inset:0;z-index:4;border:1px solid var(--hg-blue);pointer-events:none}
}
/* Laptop (board 1280x640): figure strip along the bottom; call sits above it. */
@media (max-width:1023px){
 #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}}

/* Board labels use Archivo at 75% width (assets/fonts/archivo-4.woff2). */
#top.hero-grid :is(.hg-screen-bar,.hg-stat dt,.hg-subtitle-name){font-stretch:75%}

/* ---- A7 (2026-11-14) Phones and tablets up to 900px (the stacked layout, so 768 too):
   nothing covers Nina's face ---------------------------------------------------------------
   Rule: no overlay on the face area (eyebrows to chin: about 29-58% of the window height).
   The portrait already sits with her eyes at 35% and her chin at 57%, so the framing
   stays; the overlays move into the lower third instead. The window, the figure strip
   and the Hero keep their height. */
@media (max-width:900px){
 /* Idle: the bar above already names her, so the greeting box goes. "Start talking" is a
    compact button, centred, 12px above the figure strip (52px, or 64px when its
    labels wrap; hero-grid.js reports its height). */
 #top.hero-grid .hg-subtitle{display:none}
 #top.hero-grid .hg-talk{left:50%;right:auto;bottom:calc(var(--hg-strip,52px) + 12px);transform:translateX(-50%);width:auto;min-height:44px;padding:0 20px;gap:10px;font-size:16px;white-space:nowrap}
 /* Talking: the call state reads like a subtitle low on her shoulders (15px, at most two
    lines, 12px from the bottom); stop, mic and hang up stay 44x44, in the bottom-right
    corner. Same buttons, so the same behaviour and tracking. */
 #top .hg-talking .toda-call{left:12px;right:12px;bottom:12px;width:auto;margin:0;padding:0;gap:6px;border:0;background:none;align-items:flex-end}
 #top .hg-talking .toda-call-state{flex:1;min-width:0;align-self:flex-end;padding:6px 10px;border-radius:12px;background:rgba(20,19,16,.66)}
 #top .hg-talking .toda-call-status{font:500 15px/1.3 Archivo,sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 #top .hg-talking .toda-call-button{flex:none;width:44px;height:44px}
}

/* ---- v2.8 (2026-11-14) Phone window glow ---------------------------------------------
   On phones the window fills the width, so only a 16-24px gutter shows around it and most of
   the 64px desktop glow falls off the screen: the pulse read as flat. Same blue, same 2.4s
   pulse, sized to the gutter so it shows. The live dot keeps its pulse unchanged. */
@keyframes hg-glowpulse-phone{
 0%,100%{box-shadow:0 0 6px rgba(124,162,246,.28)}
 50%{box-shadow:0 0 18px rgba(124,162,246,.72)}
}
@media (max-width:900px){#top.hero-grid .hg-screen{animation-name:hg-glowpulse-phone}}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
 #top.hero-grid .hg-screen{animation:none;box-shadow:0 0 12px rgba(124,162,246,.5)}
}

/* ---- v2.9 (2026-11-15) Signed in: "My console" takes the place of "Get started" -----
   The header's "Get started" rule (display:inline-flex above) outranked the shared
   signed-in rule, so both buttons showed, and "My console" kept the old dark-blue pill.
   Signed in, "Get started" steps aside and "My console" is the same blue button. */
html[data-hero=grid][data-console-session="in"] body .site-shell .site-nav .toda-navlinks>.site-signup{display:none!important}
html[data-hero=grid][data-console-session="in"] body .site-shell .site-nav a.site-signin.site-signin{display:inline-flex!important;align-items:center;min-height:44px!important;padding:0 18px!important;border-radius:var(--ml-radius,2px)!important;background:var(--hg-blue)!important;color:var(--hg-ink)!important;font:600 15px/1 Archivo,sans-serif!important;text-decoration:none!important}
@media(hover:hover) and (pointer:fine){html[data-hero=grid][data-console-session="in"] body .site-shell .site-nav a.site-signin.site-signin:hover{background:var(--hg-blue-hover)!important;color:var(--hg-ink)!important}}
@media(max-width:600px){html[data-hero=grid][data-console-session="in"] body .site-shell .site-nav a.site-signin.site-signin{padding:0 16px!important}}
/* Text colour, weight and size of nav links live in the site-buttons layer, which wins over unlayered !important. */
@layer site-buttons{
 html[data-hero=grid][data-console-session="in"] .site-nav a.site-signin{color:var(--hg-ink)!important;font-weight:600!important}
 @media(max-width:600px){html[data-hero=grid][data-console-session="in"] .site-nav a.site-signin{font-size:14px!important}}
}

/* ---- v2.9 (2026-11-15) Nina-hero still: her office fills the window, Nina whole ------
   Michele: the window shows Nina-hero (the console avatar) the way the console draws her
   in a wide frame: her office background across the full window, Nina centred at the
   window's full height, never cropped. A still picture for now (no idle clip yet).
   Files come from the console: the background job's wide plate and the look's cut-out. */
#top.hero-grid .hg-avatar.hg-still{inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
#top.hero-grid .hg-avatar.hg-still .hg-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#top.hero-grid .hg-avatar.hg-still .hg-figure{position:absolute;top:0;bottom:0;left:50%;right:auto;width:auto;height:100%;aspect-ratio:1/1;transform:translateX(-50%);object-fit:contain;object-position:50% 100%}