/* (c) 2026 AISearch Global. All rights reserved. AISearch Global Intelli Voice: design, graphics and code are copyright AISearch Global. */
/* glass-panels.css: INTELLI technical spec v2 (Viv, 9 Nov 2026). Loads AFTER intelli.css; old rules are not edited, they are overridden here.
   Scope lock: Panel A (Rick/Dani chooser), Panel B (mic panel), the sage ribbons, the orb's separate shadow, plus border-radius 0 page-wide.
   No ids, copy, fonts or footer are touched. No dark-mode styling. */

:root{--gp-tint:.18;--gp-blur:18px}          /* frost knobs (spec section 7): tint alpha and blur are changed together */

/* page-wide sharp edges. The orb (it is a sphere) and the status-shape markers (circle vs square is the only difference between two states) are excluded; the ribbon is an SVG curve. */
:root{--r:0px;--r2:0px}
html:root body *:not(.orbwrap):not(.orbwrap *):not(.sw):not(.mk),
html:root body *:not(.orbwrap):not(.orbwrap *):not(.sw):not(.mk)::before,
html:root body *:not(.orbwrap):not(.orbwrap *):not(.sw):not(.mk)::after{border-radius:0!important}

/* ---------- 1. the glass material, shared by Panel A and Panel B ---------- */
/* fallback first (browsers that cannot blur) */
.app[data-mode] .voices.glass,.app .topctl.glass{
  background:rgba(255,255,255,.85)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:0!important;
  box-shadow:0 8px 32px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.5)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* the house glass recipe (pack brief G14/G16 and spec v2 section 1): LIGHT translucent white, blur 18, saturate. Nothing else on the surface: no tone colour, gradient or grain ("no inner chips, extra borders or gradients") */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .app[data-mode] .voices.glass,.app .topctl.glass{
    background:rgba(255,255,255,var(--gp-tint))!important;
    -webkit-backdrop-filter:blur(var(--gp-blur)) saturate(1.2)!important;
    backdrop-filter:blur(var(--gp-blur)) saturate(1.2)!important}
}
/* OPTION B, off by default: smoked glass for white-text legibility. Same glass, the backdrop is dimmed. Switch on with <html data-panel-contrast="smoked">
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-panel-contrast="smoked"] .app[data-mode] .voices.glass,html[data-panel-contrast="smoked"] .app .topctl.glass{
    -webkit-backdrop-filter:blur(var(--gp-blur)) saturate(1.2) brightness(.42)!important;backdrop-filter:blur(var(--gp-blur)) saturate(1.2) brightness(.42)!important}}
*/
@media (prefers-reduced-transparency:reduce){
  .app[data-mode] .voices.glass,.app .topctl.glass{background:rgba(255,255,255,.85)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* ---------- 2 and 3. etched white text and icons (exact spec values) ---------- */
.app[data-mode] .voices .vopt span,.app .topctl.glass .status{color:#FFFFFF!important;text-shadow:0 1px 0 rgba(0,0,0,.25),0 -1px 0 rgba(255,255,255,.15)!important}
.app[data-mode] .voices .vopt .vo-outline{filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(0 -1px 0 rgba(255,255,255,.15))}
.app .topctl.glass .micbtn img,.app .topctl.glass .voice-settings img,.app .topctl.glass .ibtn .ic{filter:brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(0 -1px 0 rgba(255,255,255,.15))!important}

/* ---------- Panel A: Rick | switch | Dani, one line, 8px gaps, labels centred under the icons ---------- */
.app[data-mode] .voices.glass{display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:center!important;gap:8px!important;width:auto!important;padding:6px 12px 4px!important;margin:6px auto 0!important}
.app[data-mode] .voices .vopt{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:2px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:3px 0 0!important;background:transparent!important;box-shadow:none!important;border:0!important}
.app[data-mode] .voices .vopt::before{display:none!important}
.app[data-mode] .voices .vopt .vo-outline{width:24px!important;height:24px!important;stroke:#fff!important;stroke-width:3.5!important;flex:none}
.app[data-mode] .voices .vopt span{font-size:10px!important;line-height:12px!important;text-align:center}
/* the rocker sits on the icons' centre line: icon centre = 3px + 12px = 15px from the top, rocker is 18px tall */
.app[data-mode] .voices .vswitch{align-self:flex-start!important;width:32px!important;height:18px!important;margin:6px 0 0!important;border:1px solid rgba(255,255,255,.55)!important;background:rgba(255,255,255,.22)!important;box-shadow:none!important;position:relative}
.app[data-mode] .voices .vswitch::after{content:"";position:absolute;left:-6px;right:-6px;top:-13px;bottom:-13px}   /* 44 x 44 hit area; 6px reach < the 8px gap, so no overlap with the neighbours */
.app[data-mode] .voices .vknob{width:12px!important;height:12px!important;left:2px!important;top:2px!important;background:#fff!important;box-shadow:none!important}
.app[data-mode] .voices:has([data-voice="dani"][aria-checked="true"]) .vknob{transform:translateX(14px)!important}
.app .voices :where(button):focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- Panel B: mic | speaker | waves | keyboard on one line, 8px gaps, "Ready" centred under the mic ---------- */
.app .topctl.glass{display:grid!important;grid-template-columns:repeat(4,36px)!important;grid-template-rows:36px auto!important;column-gap:8px!important;row-gap:2px!important;align-items:center!important;justify-items:center!important;width:auto!important;height:auto!important;padding:8px 10px 4px!important;right:12px!important;bottom:12px!important}
.app .topctl.glass .voice-control{display:contents!important}
.app .topctl.glass #mic{grid-column:1!important;grid-row:1!important}
.app .topctl.glass #voice-settings{grid-column:2!important;grid-row:1!important}
.app .topctl.glass #ocean{grid-column:3!important;grid-row:1!important}
.app .topctl.glass #type-toggle{grid-column:4!important;grid-row:1!important}
.app .topctl.glass .status{grid-column:1!important;grid-row:2!important;justify-self:center!important;margin:0!important;white-space:nowrap;font-size:10px!important;line-height:12px!important}
.app .topctl.glass .voice-control .micbtn,.app[data-mode] .topctl.glass .voice-control .voice-settings,.app .topctl.glass .ibtn{position:relative!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important}
.app .topctl.glass .micbtn,.app .topctl.glass .voice-settings,.app .topctl.glass .ibtn,.app[data-mode] .voices .vopt,.app[data-mode] .voices .vswitch{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}   /* the buttons had their own blur(8px): it drew faint squares inside the glass */
.app .topctl.glass .micbtn::before,.app .topctl.glass .voice-settings::before,.app .topctl.glass .ibtn::before{display:none!important}
.app .topctl.glass .micbtn img,.app .topctl.glass .voice-settings img,.app .topctl.glass .ibtn .ic{width:24px!important;height:24px!important}
.app .topctl.glass .micbtn::after,.app .topctl.glass .voice-settings::after,.app .topctl.glass .ibtn::after{content:""!important;display:block!important;position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}   /* 44px pitch (36 + 8), so the hit areas touch but never overlap */
.app .topctl.glass :where(button):focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- 5. orb: nothing about the orb changes. The old crescent on .orb-metal is put back to the approved value; the soft oval shadow is one separate pseudo-element on the wrapper ---------- */
.orb-metal{box-shadow:0 0 calc(50px + var(--lv,0) * 14px) 0 rgba(190,226,217,calc(.11 + var(--lv,0) * .09)),0 32px 44px -22px rgba(52,58,60,.10)!important}
/* an ellipse whose own fill is invisible: only its box-shadow (0 12px 24px, 12% black) shows, outside the ellipse, below the orb. Behind the orb layer (z-index -1), never over the greeting. */
.orbwrap::after{display:block!important;content:""!important;position:absolute;left:22%;width:56%;top:96%;height:3%;z-index:-1;border:0!important;border-radius:50%!important;opacity:1!important;background:transparent;animation:none!important;transform:none;pointer-events:none;box-shadow:0 12px 24px rgba(0,0,0,.12)}

/* ---------- 4. ribbon: a Blender render made with the SAME liquid-metal material and light as the metal inside the orb (v10 scene_metal_ribbon.py, assets/ribbon-metal.png).
   Placed behind the panel by ribbons-glass.js, which measures the render's own alpha so it never passes behind text or the orb. Position uses left/top, the wave uses transform only. ---------- */
.ribbons-doc{position:absolute;left:0;top:0;width:100%;height:100vh;overflow:hidden;pointer-events:none;z-index:0}
.rg-metal{position:absolute;left:0;top:0;max-width:none;height:auto;pointer-events:none;user-select:none;animation:ribbon-wave 6s ease-in-out infinite;will-change:transform}
.rg-metal[hidden]{display:none}
@keyframes ribbon-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.rg-metal{animation:none;will-change:auto}}
@media (forced-colors:active){.rg-metal,.ribbons-doc{display:none}}

/* ---------- Panel A only (Viv, 9 Nov 2026 4:45pm): smaller, no border, light shadow, frosted glass 80% transparent (fill 20% opaque), 20px lower ----------
   Added as one block at the end so it overrides the shared rules above without editing them. Panel B and everything else are untouched. Remove this block to go back. */
.app[data-mode] .voices.glass{
  background:rgba(255,255,255,.20)!important;
  border:0!important;
  box-shadow:0 4px 16px rgba(15,23,42,.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2)!important;backdrop-filter:blur(18px) saturate(1.2)!important;
  gap:8px!important;padding:4px 8px 3px!important;margin:26px auto 0!important}   /* was margin-top 6px: 20px lower */
.app[data-mode] .voices .vopt{position:relative!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;gap:1px!important;padding:2px 0 0!important}
.app[data-mode] .voices .vopt::after{content:"";position:absolute;left:-4px;right:-4px;top:-4px;bottom:-4px}   /* hit area stays 44 x 44 */
.app[data-mode] .voices .vopt .vo-outline{width:20px!important;height:20px!important}
.app[data-mode] .voices .vopt span{font-size:9px!important;line-height:11px!important}
.app[data-mode] .voices .vswitch{width:28px!important;height:16px!important;margin:4px 0 0!important}   /* icon centre = 2 + 10 = 12px; 16px rocker from 4px = centred on it */
.app[data-mode] .voices .vswitch::after{left:-4px!important;right:-4px!important;top:-14px!important;bottom:-14px!important}   /* 36 x 44; 4px + 4px reach = the 8px gap, no overlap */
.app[data-mode] .voices .vknob{width:10px!important;height:10px!important}
.app[data-mode] .voices:has([data-voice="dani"][aria-checked="true"]) .vknob{transform:translateX(12px)!important}

/* ---------- Mic moved from the bottom panel into Panel A (Viv, 9 Nov 2026): Rick | switch | Dani | divider | premium mic + status ---------- */
.app[data-mode] .voices .vgroup{display:flex;align-items:flex-start;gap:8px;align-self:flex-end}   /* labels share one bottom row with the mic's status line */
.app[data-mode] .voices .vdiv{align-self:stretch;width:1px;margin:3px 0;background:rgba(255,255,255,.55)}
.app[data-mode] .voices .vmic{display:flex;flex-direction:column;align-items:center;gap:1px;width:48px}
.app[data-mode] .voices #mic{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;
  display:flex!important;align-items:center;justify-content:center;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;
  background:linear-gradient(160deg,rgba(255,255,255,.80),rgba(255,255,255,.30))!important;
  box-shadow:0 3px 10px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(15,23,42,.06)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:box-shadow .2s,background .2s}
.app[data-mode] .voices #mic::before{display:none!important}
.app[data-mode] .voices #mic::after{content:"";display:block;position:absolute;inset:-6px;border-radius:50%}   /* 44 x 44 hit area */
.app[data-mode] .voices #mic:hover{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.42))!important}
.app[data-mode] .voices #mic:active{transform:scale(.96)!important}
.app[data-mode] .voices #mic .i-stop-m{display:none}   /* the old .voice-control rules for the two stop images no longer reach the mic */
.app[data-mode][data-state="listening"] .voices #mic .i-stop{display:none!important}
.app[data-mode][data-state="listening"] .voices #mic .i-stop-m{display:block}
.app[data-mode] .voices #mic img{width:18px!important;height:18px!important;filter:brightness(0) opacity(.78)!important}
.app[data-mode] .voices #mic[aria-pressed="true"]{box-shadow:0 0 0 2px var(--link,#047A76),0 3px 10px rgba(4,122,118,.25),inset 0 1px 0 rgba(255,255,255,.85)!important}
.app[data-mode][data-state="error"] .voices #mic{box-shadow:0 0 0 2px var(--err,#B3261E),0 3px 10px rgba(15,23,42,.14),inset 0 1px 0 rgba(255,255,255,.85)!important}
.app[data-mode] .voices .vmic .status{display:block!important;max-width:64px;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;
  font-size:9px!important;line-height:11px!important;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#FFFFFF!important;text-shadow:0 1px 0 rgba(0,0,0,.25),0 -1px 0 rgba(255,255,255,.15)!important}
.app[data-mode] .voices .vmic .status::before{display:none!important}

/* ---------- Bottom panel (Panel B) after the mic left it: three buttons, no status row ---------- */
.app .topctl.glass{grid-template-columns:repeat(3,36px)!important;grid-template-rows:36px!important;padding:8px 10px!important}
.app .topctl.glass #voice-settings{grid-column:1!important}
.app .topctl.glass #ocean{grid-column:2!important}
.app .topctl.glass #type-toggle{grid-column:3!important}

/* ---------- 6. ONE small centred panel (Viv approved this mock-up, order b: mic, status, Rick/Dani, then speaker, waves, keyboard) ----------
   Option A glass: neutral grey tint rgba(120,120,120,.18) inside the same blur(18px) saturate(1.2) frosted layer, white etched icons and labels. Option B (dark icons) = add class .icons-dark on .voices (kept, off). */
.app[data-mode] .voices.glass{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:auto!important;padding:4px 10px!important;margin:46px auto 0!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 8px 32px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.5)!important}
.app[data-mode] .voices .vmic{align-self:center!important}
.app[data-mode] .voices .vgroup{align-self:center!important}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .app[data-mode] .voices.glass{background:rgba(120,120,120,.18)!important}
}
@media (prefers-reduced-transparency:reduce){.app[data-mode] .voices.glass{background:rgba(255,255,255,.85)!important}}
.app .voices .topctl{position:static!important;right:auto!important;bottom:auto!important;display:flex!important;flex-direction:row!important;gap:8px!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.app .voices .topctl .voice-control{display:contents!important}
.app .voices .topctl .voice-settings,.app .voices .topctl .ibtn{position:relative!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.app .voices .topctl .voice-settings::before,.app .voices .topctl .ibtn::before{display:none!important}
.app .voices .topctl .sp-matte,.app .voices .topctl .ic-m{display:none!important}
.app .voices .topctl .sp-gloss,.app .voices .topctl .ic-g{display:block!important;width:20px!important;height:20px!important;filter:brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(0 -1px 0 rgba(255,255,255,.15))!important}
.app .voices .topctl .voice-settings::after,.app .voices .topctl .ibtn::after{content:""!important;display:block!important;position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.app .voices .topctl :where(button):focus-visible{outline:2px solid #fff;outline-offset:2px}
.app[data-mode] .voices .vmic .status{color:#444!important;text-shadow:none!important;font-size:10px!important;line-height:12px!important;max-width:64px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* Option B, kept and off: dark etched icons and labels. Add class "icons-dark" to the panel to use it. */
.app .voices.icons-dark .vopt span{color:#2C3A38!important;text-shadow:0 1px 0 rgba(255,255,255,.6)!important}
.app .voices.icons-dark .vopt .vo-outline{stroke:#2C3A38!important;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))!important}
.app .voices.icons-dark .topctl .sp-gloss,.app .voices.icons-dark .topctl .ic-g{filter:brightness(0) drop-shadow(0 1px 0 rgba(255,255,255,.6))!important;opacity:.78}




/* ---------- 7. white etched icons, all on one line (Viv, 9 Nov 2026: "I approved white etched icons", "all have to be aligned", "same icons etched premium"; no teal ring, no black stop) ----------
   Replaces the earlier rendered-chrome pass. Every icon is the approved render's silhouette in white engraved into the glass: dark edge above (0 -1px 0), bright edge below (0 1px 0), glyph at .86 opacity so the frost shows through. A CSS filter approximates an engraving; it is not a true inset.
   Rick and Dani get the same treatment as the speaker, waves and keyboard. One icon row: every icon box is 28px tall and starts on the same line; labels hang below. */
html body .app[data-mode] .voices.glass{align-items:flex-start!important;padding:7px 12px 5px!important;gap:8px!important}
html body .app[data-mode] .voices .vmic,html body .app[data-mode] .voices .vopt{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:2px!important;height:auto!important;min-height:0!important;width:40px!important;min-width:40px!important;padding:0!important;margin:0!important;background:transparent!important;box-shadow:none!important;border:0!important;align-self:flex-start!important}
html body .app[data-mode] .voices .vopt::before{display:none!important}
html body .app[data-mode] .voices .vgroup{align-items:flex-start!important;gap:6px!important;margin:0!important}
html body .app[data-mode] .voices .vswitch{margin:4px 0 0!important;align-self:flex-start!important}
html body .app[data-mode] .voices .topctl{align-items:flex-start!important;align-self:flex-start!important;gap:6px!important;margin:0!important}
html body .app[data-mode] .voices .topctl .voice-control{display:flex!important;align-items:flex-start!important;margin:0!important}
html body .app[data-mode] .voices #mic,html body .app[data-mode] .voices #mic:hover,html body .app[data-mode] .voices #mic[aria-pressed="true"],html body .app[data-mode][data-state="error"] .voices #mic,html body .app[data-mode] .voices .topctl .voice-settings,html body .app[data-mode] .voices .topctl .ibtn{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body .app[data-mode] .voices #mic img,html body .app[data-mode] .voices .vopt[aria-checked] .voice-person,html body .app[data-mode] .voices .topctl .sp-gloss,html body .app[data-mode] .voices .topctl .ic-g{width:24px!important;height:24px!important;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 -1px 0 rgba(20,30,28,.38)) drop-shadow(0 1px 0 rgba(255,255,255,.75))!important;opacity:.86!important}
html body .app[data-mode] .voices .vopt[aria-checked="false"] .voice-person{opacity:.62!important}
html body .app[data-mode] .voices .vopt[aria-checked] .p-matte,html body .app[data-mode] .voices .topctl .sp-matte,html body .app[data-mode] .voices .topctl .ic-m,html body .app[data-mode] .voices #mic .i-stop-m{display:none!important}
html body .app[data-mode] .voices .vopt[aria-checked] .p-gloss{display:block!important}
html body .app[data-mode] .voices #mic .i-mic{display:block!important}
html body .app[data-mode] .voices #mic .i-stop{display:none!important}
html body .app[data-mode][data-state="listening"] .voices #mic .i-mic{display:none!important}
html body .app[data-mode][data-state="listening"] .voices #mic .i-stop{display:block!important}
html body .app[data-mode] .voices .vopt[aria-checked] span,html body .app[data-mode][data-state] .voices .vmic p.status,html body .app[data-mode][data-state] .voices .vmic p.status span{color:rgba(255,255,255,.88)!important;text-shadow:0 -1px 0 rgba(20,30,28,.38),0 1px 0 rgba(255,255,255,.75)!important;font-size:9px!important;line-height:11px!important;margin:0!important;text-align:center!important}
html body .app[data-mode] .voices .vmic p.status{width:52px!important;max-width:52px!important;margin:0 -6px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body .app[data-mode] .voices :where(button):focus-visible{outline:1px solid #fff;outline-offset:2px}

/* ---------- 8. stronger frosted glass on the panel only (Viv, 9 Nov 2026: "use glassmorphism frosted glass", "for panel") ----------
   House card recipe (states README / G9): milky tint, 28px blur, bright top-left edge, soft shadow. No grain: G14 forbids it on the surface, and the earlier grain was rejected.
   Tint stays a milky grey so the white etched icons keep their contrast. Only the panel's material changes: size, position, icons and labels are untouched. */
html body .app[data-mode] .voices.glass{background:rgba(150,158,156,.30)!important;-webkit-backdrop-filter:blur(28px) saturate(1.35)!important;backdrop-filter:blur(28px) saturate(1.35)!important;border:1px solid rgba(255,255,255,.28)!important;border-top-color:rgba(255,255,255,.75)!important;border-left-color:rgba(255,255,255,.65)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.06),0 10px 30px rgba(15,23,42,.10)!important}
@media (forced-colors:active){html body .app[data-mode] .voices.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:Canvas!important;border:1px solid CanvasText!important}}
@media (prefers-reduced-transparency:reduce){html body .app[data-mode] .voices.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(150,158,156,.92)!important}}

/* ---------- 9. labels: one shadow only (no doubled lettering) and the Rick/Dani label row level with Ready (Viv, 9 Nov 2026: "still not aligned and this double font") ---------- */
html body .app[data-mode] .voices .vopt[aria-checked] span,html body .app[data-mode][data-state] .voices .vmic p.status,html body .app[data-mode][data-state] .voices .vmic p.status span{text-shadow:0 1px 1px rgba(20,30,28,.28)!important}
html body .app[data-mode] .voices .vopt[aria-checked] .voice-person{margin:2px 0!important}
html body .app[data-mode] .voices .vmic p.status,html body .app[data-mode] .voices .vopt[aria-checked] span{line-height:11px!important;height:11px!important;display:block!important;padding:0!important}
html body .app[data-mode] .voices .vswitch{margin:6px 0 0!important}   /* centre of the switch on the icon line (measured 637.1) */

/* ---------- 10. visible ink aligned (Viv, 9 Nov 2026: "has to be aligned") ----------
   The render PNGs carry different padding, so equal 24px boxes still looked uneven. Measured alpha bounds (ink height / ink centre as a fraction of the image):
   mic .887/.498, stop .891/.500, Rick .660/.463, Dani .677/.455, speaker .816/.498, waves .781/.495, keyboard .516/.497.
   Each icon is scaled so its visible height is 20px (keyboard 14px: it is a wide key chip) and moved so its ink centre sits on the row centre. Layout boxes are unchanged. */
html body .app[data-mode] .voices #mic .i-mic{transform:scale(1)!important}
html body .app[data-mode] .voices #mic .i-stop{transform:scale(1)!important}
html body .app[data-mode] .voices .vopt[data-voice="ric"] .voice-person{transform:translateY(.6px) scale(1.08)!important}
html body .app[data-mode] .voices .vopt[data-voice="dani"] .voice-person{transform:translateY(.7px) scale(1.06)!important}
html body .app[data-mode] .voices .topctl .sp-gloss{transform:scale(1.02)!important}
html body .app[data-mode] .voices .topctl #ocean .ic-g{transform:scale(1.07)!important}
html body .app[data-mode] .voices .topctl #type-toggle .ic-g{transform:scale(1.13)!important}

/* ---------- 11. etched icons keep their detail (Viv, 9 Nov 2026: "icons need reworking": no inner detail, not etched enough, size or weight) ----------
   The flat brightness(0) invert(1) silhouette threw away the render's detail (keys, stop highlight, faces, mic grille). assets/etched-*.png are white versions of the approved renders (same size and outline) whose opacity carries the render's light and dark, so the detail reads as recessed. Engraved edges stay as CSS drop-shadows (dark above, bright below). */
html body .app[data-mode] .voices #mic img,html body .app[data-mode] .voices .vopt[aria-checked] .voice-person,html body .app[data-mode] .voices .topctl .sp-gloss,html body .app[data-mode] .voices .topctl .ic-g{filter:drop-shadow(0 -1px 0 rgba(20,30,28,.45)) drop-shadow(0 1px 0 rgba(255,255,255,.8))!important;opacity:1!important}
html body .app[data-mode] .voices .vopt[aria-checked="false"] .voice-person{opacity:.7!important}

/* ---------- 12. delicate premium glass (Viv, 9 Nov 2026, with her reference crop: "this panel and icons looked premium, with blur on ribbon, look at how delicate it looks") ----------
   Reference: very light milky glass, the ribbon clearly blurred behind it, thin soft white icons, small label, and round soft glass chips behind waves and keyboard only (mic and speaker have none). 
   Replaces the heavier grey panel of section 8 and the double etch of section 11. Size, positions and alignment are unchanged. */
html body .app[data-mode] .voices.glass{background:rgba(255,255,255,.22)!important;-webkit-backdrop-filter:blur(26px) saturate(1.3)!important;backdrop-filter:blur(26px) saturate(1.3)!important;border:1px solid rgba(255,255,255,.45)!important;border-top-color:rgba(255,255,255,.85)!important;border-left-color:rgba(255,255,255,.75)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),0 8px 28px rgba(15,23,42,.07)!important}
html body .app[data-mode] .voices #mic img,html body .app[data-mode] .voices .vopt[aria-checked] .voice-person,html body .app[data-mode] .voices .topctl .sp-gloss,html body .app[data-mode] .voices .topctl .ic-g{filter:drop-shadow(0 1px 1.5px rgba(50,62,60,.38))!important;opacity:.94!important}
html body .app[data-mode] .voices .vopt[aria-checked="false"] .voice-person{opacity:.7!important}
html body .app[data-mode] .voices .vopt[aria-checked] span,html body .app[data-mode][data-state] .voices .vmic p.status,html body .app[data-mode][data-state] .voices .vmic p.status span{text-shadow:0 1px 1.5px rgba(50,62,60,.4)!important;font-weight:400!important}
html body .app[data-mode] .voices .topctl #ocean,html body .app[data-mode] .voices .topctl #type-toggle{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;margin:-2px!important;border-radius:50%!important;background:rgba(255,255,255,.2)!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 6px rgba(15,23,42,.08)!important}
@media (prefers-reduced-transparency:reduce){html body .app[data-mode] .voices.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(190,196,194,.92)!important}}
@media (forced-colors:active){html body .app[data-mode] .voices.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:Canvas!important;border:1px solid CanvasText!important}}
html body .app[data-mode] .voices .topctl #ocean,html body .app[data-mode] .voices .topctl #type-toggle{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;margin:-1px 0!important}
html body .app[data-mode] .voices .topctl #ocean .ic-g{transform:scale(.78)!important}
html body .app[data-mode] .voices .topctl #type-toggle .ic-g{transform:scale(.88)!important}

/* ---------- 13. slightly darker frost for readability (Viv, 9 Nov 2026: "slightly darker frost, no readability") ----------
   Same delicate glass as section 12 with a deeper milky grey tint and the backdrop dimmed a little (brightness .8) so the white icons and labels read. Nothing else changes. */
html body .app[data-mode] .voices.glass{background:rgba(105,114,112,.30)!important;-webkit-backdrop-filter:blur(26px) saturate(1.3) brightness(.8)!important;backdrop-filter:blur(26px) saturate(1.3) brightness(.8)!important}
html body .app[data-mode] .voices .vopt[aria-checked] span,html body .app[data-mode][data-state] .voices .vmic p.status,html body .app[data-mode][data-state] .voices .vmic p.status span{color:#fff!important;text-shadow:0 1px 2px rgba(30,40,38,.55)!important}
html body .app[data-mode] .voices .vopt[aria-checked="false"] .voice-person{opacity:.82!important}

/* ---------- 14. panel pushed down a bit more (Viv, 9 Nov 2026, after the freeze: "push it down a bit more"). Top margin 46px -> 72px. Nothing else changes. ---------- */
html body .app[data-mode] .voices.glass{margin-top:72px!important}

/* ---------- 15. shorter panel, even spacing (Viv, 9 Nov 2026: "still too long", "cluttered spacing between items") ----------
   Seven equal 34px slots, no gaps, so every icon centre is exactly 34px from the next (before, gaps of 6 and 8 and slots of 28, 30 and 40 made the rhythm uneven). Width 302px -> 258px. */
html body .app[data-mode] .voices.glass{gap:0!important;padding:7px 10px 5px!important}
html body .app[data-mode] .voices .vgroup,html body .app[data-mode] .voices .topctl{gap:0!important}
html body .app[data-mode] .voices .vmic,html body .app[data-mode] .voices .vopt{width:34px!important;min-width:34px!important}
html body .app[data-mode] .voices .vswitch{margin:4px 3px 0!important}
html body .app[data-mode] .voices .topctl .voice-settings{margin:0 3px!important}
html body .app[data-mode] .voices .topctl #ocean,html body .app[data-mode] .voices .topctl #type-toggle{margin:-1px 2px!important}
html body .app[data-mode] .voices .vmic p.status{width:44px!important;max-width:44px!important;margin:0 -5px!important}

/* ---------- 16. mic alone under the greeting, everything else in one sharp corner block (Viv, 9 Nov 2026) ----------
   "Only keep the microphone under the globe, a nice one. The rest split and put in one corner, Dani and Ric slider on top and the rest on bottom. Can be a square sharp-edged panel. Like minimal premium."
   Chosen after looking at Gemini Live (bottom pill of equal icons), Apple Music Now Playing (bottom row of equal icons) and ChatGPT voice (control bottom right): one main control by the hero, small equal icons together in a corner.
   Mic: the approved rendered chrome mic and stop (assets/mic-gloss.png, stop-gloss.png), shown as rendered, no chip, no ring, no filter. Panel: Rick, switch, Dani on top; speaker, waves, keyboard below, in the same three 34px columns. Square corners. Phone: the block sits in the page flow under the mic instead of fixed. */
html body .app[data-mode] .vmic{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;margin:44px auto 0!important;width:auto!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
html body .app[data-mode] .vmic #mic,html body .app[data-mode] .vmic #mic:hover,html body .app[data-mode] .vmic #mic[aria-pressed="true"],html body .app[data-mode][data-state="error"] .vmic #mic{width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline-offset:3px}
html body .app[data-mode] .vmic #mic::before,html body .app[data-mode] .vmic #mic::after{display:none!important}
html body .app[data-mode] .vmic #mic img{width:68px!important;height:68px!important;object-fit:contain;filter:none!important;opacity:1!important;transform:none!important}
html body .app[data-mode] .vmic #mic .i-mic{display:block!important}
html body .app[data-mode] .vmic #mic .i-stop,html body .app[data-mode] .vmic #mic .i-stop-m{display:none!important}
html body .app[data-mode][data-state="listening"] .vmic #mic .i-mic{display:none!important}
html body .app[data-mode][data-state="listening"] .vmic #mic .i-stop{display:block!important}
html body .app[data-mode] .vmic #mic:focus-visible{outline:1px solid #5C6266}
html body .app[data-mode][data-state] .vmic p.status,html body .app[data-mode][data-state] .vmic p.status span{width:auto!important;max-width:none!important;margin:0!important;color:#4D5153!important;text-shadow:none!important;font-size:12px!important;line-height:16px!important;height:auto!important;text-align:center!important;overflow:visible!important;white-space:nowrap!important}
/* the corner block */
html body .app[data-mode] .voices.glass{display:flex!important;flex-direction:column!important;align-items:center!important;position:fixed!important;right:16px!important;bottom:16px!important;left:auto!important;top:auto!important;margin:0!important;width:auto!important;gap:4px!important;padding:8px 12px 6px!important;border-radius:0!important;z-index:5}
html body .app[data-mode] .voices .vgroup,html body .app[data-mode] .voices .topctl{align-self:center!important}
@media (max-width:700px){html body .app[data-mode] .voices.glass{position:static!important;margin:22px auto 0!important}}
html body .app[data-mode] .vmic #mic{left:0!important;top:0!important;right:auto!important;bottom:auto!important}   /* an older home-mode rule shifted the button 36px right */
html body .app[data-mode][data-state] .vmic p.status{display:block!important}   /* states.css hides the status in idle home mode; Viv wants Ready shown */
/* mic directly under the globe (above the greeting), status without the old chip; mic a little smaller so the greeting stays near where it was (Viv: "only keep the microphone under the globe") */
html body .app[data-mode] .vmic{margin:-18px auto 14px!important}
html body .app[data-mode] .vmic #mic{width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important}
html body .app[data-mode] .vmic #mic img{width:56px!important;height:56px!important}
html body .app[data-mode][data-state] .vmic p.status,html body .app[data-mode][data-state] .vmic p.status span{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}

/* ---------- 17. the status text ("Ready", "Hearing: ...") moves into the corner block; the mic is centred alone under the globe (Viv, 9 Nov 2026: "centralise the mic and move text underneath to the right corner") ---------- */
html body .app[data-mode] .vmic{display:flex!important;justify-content:center!important;margin:-4px auto 0!important;padding:0!important}
html body .app[data-mode] .vmic #mic{margin:0 auto!important}
html body .app[data-mode][data-state] .voices p.status,html body .app[data-mode][data-state] .voices p.status span{display:block!important;width:102px!important;max-width:102px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;color:#fff!important;text-shadow:0 1px 1.5px rgba(50,62,60,.4)!important;font-size:11px!important;line-height:14px!important;text-align:center!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body .app[data-mode] .vmic{margin:-64px auto 4px!important;position:relative;z-index:2}   /* mic sits in the orb's shadow zone, so the greeting stays where it was and the ribbon keeps its open gap */

/* ---------- 18. very light shadow round the sides and back of the globe so the glass edge reads on the cream page (Viv, 9 Nov 2026: "a client didn't see the glass") ----------
   .orb-halo is an empty circle placed on the sphere (same box as the old ripple ring: left 7.235%, top 5.85%, 85.5%). A box-shadow is painted only outside its box, so the inside of the glass is not darkened. Two soft layers, tone is the page's deep sage-grey at about 10% and 5%. The render itself and the ground shadow below are unchanged. */
html body .orbwrap .orb-halo{position:absolute;left:7.235%;top:5.85%;width:85.5%;height:85.5%;border-radius:50%!important;pointer-events:none;z-index:0;background:transparent;box-shadow:0 0 18px 2px rgba(40,60,56,.10),0 0 54px 10px rgba(40,60,56,.05)}
@media (forced-colors:active){html body .orbwrap .orb-halo{display:none}}

/* ---------- 19. footer text to the bottom right, controls block to the top right (Viv, 9 Nov 2026: "move text underneath to the right corner", "move to right side corner") ----------
   Home screen only. Wording, links and the Acknowledgement of Country are untouched; only their position changes. In board mode and on phones the footer keeps its normal place in the page flow, and the controls block sits in the page (not fixed). */
html body .app[data-mode="home"] .voices.glass{top:16px!important;bottom:auto!important}
html body .app[data-mode="board"] .voices.glass{position:static!important;margin:12px auto 0!important}
html body .app[data-mode="home"] .foot{position:fixed;right:16px;bottom:12px;left:auto;margin:0;padding:0;max-width:340px;align-items:flex-end;text-align:right;gap:2px;z-index:4}
html body .app[data-mode="home"] .foot .ack,html body .app[data-mode="home"] .foot #credit,html body .app[data-mode="home"] .foot .foot-links,html body .app[data-mode="home"] .foot .result-notes{text-align:right;max-width:340px}
html body .app[data-mode="home"] .foot .result-notes summary{text-align:right}
@media (max-width:700px){html body .app[data-mode="home"] .foot{position:static;align-items:center;text-align:center;max-width:none;padding:8px 12px 24px;margin:20px auto 0}html body .app[data-mode="home"] .foot .ack,html body .app[data-mode="home"] .foot #credit,html body .app[data-mode="home"] .foot .foot-links,html body .app[data-mode="home"] .foot .result-notes,html body .app[data-mode="home"] .foot .result-notes summary{text-align:center}}

/* the mic button carried its own blur(8px) backdrop, which showed as a pale box behind the mic; none now (Viv: "only keep the microphone under the globe, a nice one") */
html body .app[data-mode] .vmic #mic,html body .app[data-mode] .vmic #mic::before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- 20. phone: the controls block is also a corner block, not a box in the middle of the page (Viv, 9 Nov 2026) ----------
   Fixed bottom right on phones (the top is taken by the centred title). The footer gets bottom padding so its last lines scroll clear of the block. */
@media (max-width:700px){
  html body .app[data-mode="home"] .voices.glass{position:fixed!important;top:auto!important;bottom:10px!important;right:10px!important;left:auto!important;margin:0!important}
  html body .app[data-mode="home"] .foot{padding-bottom:124px!important}
}

/* ---------- 21. nothing over the globe, nothing drifts (Viv, 9 Nov 2026: "nothing over globe ever", "nothing can move, every element fixed", "no shifting", "entire block needs to be shifted down", "spacing") ----------
   a) The mic sits a clear 24px below the sphere's lower edge. The sphere's bottom is 91.35% of the orb box (the halo box: 5.85% + 85.5%), so the gap is computed from the orb size, not guessed.
   b) The greeting follows with a 28px gap, so the whole mic-and-greeting block is lower than before.
   c) The ribbon no longer bobs (the 6s wave is off) so nothing on the home screen moves by itself.
   d) Footer lines get one even spacing. The tall link padding made the gaps uneven.
   e) Phone: the controls block is in the page flow, right-aligned under the greeting, never fixed, so it can never sit over the globe while scrolling. */
html body .app[data-mode="home"] .vmic{--ow:clamp(250px,40vh,380px);margin:calc(-10px - .0865 * var(--ow)) auto 16px!important}
@media (max-width:600px){html body .app[data-mode="home"] .vmic{--ow:min(78vw,300px)}}
html body .rg-metal{animation:none!important;will-change:auto!important}
html body .app[data-mode="home"] .foot{gap:6px!important}
html body .app[data-mode="home"] .foot .result-notes summary{min-height:0!important;padding:2px 0!important}
html body .app[data-mode="home"] .foot .foot-links a{padding:2px 0!important}
html body .app[data-mode="home"] .foot #credit,html body .app[data-mode="home"] .foot .foot-links,html body .app[data-mode="home"] .foot .ack{margin:0!important}
@media (max-width:700px){
  html body .app[data-mode="home"] .voices.glass{position:static!important;top:auto!important;bottom:auto!important;right:auto!important;left:auto!important;margin:40px 16px 0 auto!important}
  html body .app[data-mode="home"] .foot{padding-bottom:24px!important}
}

/* ---------- 22. footer text on the LEFT, controls stay RIGHT (Viv, 9 Nov 2026: "right only for controls", "left for all else", "spacing, has to look premium", "land acknowledgement as one line on desktop, 2-3 lines but centralised on phone") ----------
   Desktop home: privacy toggle, Journey link and credit sit on one row bottom-left, the acknowledgement is one line beneath them. The privacy text opens upward as an overlay (absolute), so opening it moves nothing.
   Phone: everything centred, the acknowledgement wraps to 2-3 centred lines. */
@media (min-width:701px){
  html body .app[data-mode="home"] .foot{position:fixed!important;left:24px!important;right:auto!important;bottom:18px!important;max-width:none!important;width:auto!important;display:flex!important;flex-flow:row wrap!important;align-items:baseline!important;justify-content:flex-start!important;text-align:left!important;gap:8px 28px!important;padding:0!important;margin:0!important}
  html body .app[data-mode="home"] .foot .result-notes{position:relative!important;max-width:none!important;text-align:left!important}
  html body .app[data-mode="home"] .foot .result-notes summary{text-align:left!important}
  html body .app[data-mode="home"] .foot .result-notes>p{position:absolute!important;left:0!important;bottom:calc(100% + 10px)!important;width:340px!important;margin:0!important;text-align:left!important}
  html body .app[data-mode="home"] .foot .foot-links,html body .app[data-mode="home"] .foot #credit{max-width:none!important;text-align:left!important;white-space:nowrap}
  html body .app[data-mode="home"] .foot .ack{flex:0 0 100%!important;max-width:min(560px,calc(100vw - 48px))!important;text-align:left!important;margin:0!important}
}
@media (min-width:1180px){html body .app[data-mode="home"] .foot .ack{max-width:none!important;white-space:nowrap!important}}
@media (max-width:700px){
  html body .app[data-mode="home"] .foot{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:10px!important;padding:8px 20px 28px!important}
  html body .app[data-mode="home"] .foot .ack{max-width:300px!important;text-align:center!important;margin:0 auto!important;line-height:1.55!important}
  html body .app[data-mode="home"] .foot .result-notes>p{text-align:center!important;max-width:300px;margin:8px auto 0!important}
}
@media (max-width:700px){html body .app[data-mode="home"] .foot #credit{max-width:300px!important;text-wrap:balance;margin:0 auto!important;line-height:1.5!important}}

/* ---------- 23. phone only (Viv, 9 Nov 2026: "on mobile panel should be centralised and the mic position a bit more down") ---------- */
@media (max-width:700px){
  html body .app[data-mode="home"] .voices.glass{margin:40px auto 0!important}
  html body .app[data-mode="home"] .vmic{margin:calc(6px - .0865 * var(--ow)) auto 16px!important}
}

/* ---------- 24. credit on three lines on phone (Viv, 9 Nov 2026: "Designed and built by" / "Viveka Mohan Das" next line / "AISearch Global | Sydney | Australia") ---------- */
@media (max-width:700px){html body .app[data-mode="home"] .foot #credit{max-width:none!important;white-space:normal!important;text-align:center!important}
  html body .app[data-mode="home"] .foot #credit span{display:block}}
@media (max-width:700px){html body .app[data-mode="home"] .foot #credit .cr-sep{display:none}}

/* ---------- 25. mic and greeting block well clear of the orb and its ground shadow (Viv, 9 Nov 2026: "move this entire block away from the orb") ----------
   The orb box ends 8.65% of its size below the sphere, and its ground shadow sits inside that box. The mic now starts 40px below the orb box. */
html body .app[data-mode="home"] .vmic{margin:calc(30px - .0865 * var(--ow)) auto 16px!important}
@media (max-width:600px){html body .app[data-mode="home"] .vmic{margin:calc(36px - .0865 * var(--ow)) auto 16px!important}}

/* ---------- 26. mic and greeting block further down (Viv, 9 Nov 2026: "move it further down") : +40px on every size ---------- */
html body .app[data-mode="home"] .vmic{margin:calc(70px - .0865 * var(--ow)) auto 16px!important}
@media (max-width:600px){html body .app[data-mode="home"] .vmic{margin:calc(76px - .0865 * var(--ow)) auto 16px!important}}

/* ---------- 27. mic and greeting moved down into the empty space above the footer (Viv, 9 Nov 2026: circled the gap under the greeting, "put it there") ----------
   Desktop: up to +100px on tall windows (0 on 720px-tall windows, where there is no room before the footer); phone: +60px (the page scrolls). */
html body .app[data-mode="home"] .vmic{margin:calc(70px + clamp(0px, (100vh - 780px) * .9, 100px) - .0865 * var(--ow)) auto 16px!important}
@media (max-width:600px){html body .app[data-mode="home"] .vmic{margin:calc(136px - .0865 * var(--ow)) auto 16px!important}}

/* ---------- 28. phone home fits in ONE screen (Viv, 9 Nov 2026: "should stay in one screen on mobile UI") ----------
   Order top to bottom: header, orb, mic, greeting, controls panel, footer. The orb shrinks to the height that is left (never below 170px), the mic starts 28px under the orb box (still clear of the globe and its shadow), the footer is compacted (privacy + Journey link on one row, credit 3 lines, acknowledgement 3 lines). The extra phone gaps from sections 23, 25, 26 and 27 are replaced here. */
@media (max-width:700px){
  html body .app[data-mode="home"] .orbwrap{--w:clamp(170px,min(78vw,300px,calc(100svh - 560px)),300px)!important;margin-bottom:0!important}
  html body .app[data-mode="home"] .vmic{margin:28px auto 8px!important}
  html body .app[data-mode="home"] .voices.glass{margin:14px auto 0!important}
  html body .app[data-mode="home"] .stage{padding-bottom:0!important}
  html body .app[data-mode="home"] .foot{margin:12px auto 0!important;padding:0 20px 14px!important;flex-flow:row wrap!important;justify-content:center!important;align-items:baseline!important;gap:6px 22px!important}
  html body .app[data-mode="home"] .foot #credit,html body .app[data-mode="home"] .foot .ack{flex:0 0 100%!important;margin:0 auto!important}
  html body .app[data-mode="home"] .foot #credit{margin-top:6px!important}
}
@media (max-width:700px){
  /* footer order on phone (Viv: "put data and voice privacy before land acknowledgement"): Journey link, credit, privacy, acknowledgement */
  html body .app[data-mode="home"] .foot .foot-links{order:1!important}
  html body .app[data-mode="home"] .foot #credit{order:2!important}
  html body .app[data-mode="home"] .foot .result-notes{order:3!important;flex:0 0 100%!important;text-align:center!important}
  html body .app[data-mode="home"] .foot .ack{order:4!important}
}
@media (max-width:700px){
  /* one-screen trim (Viv: "should stay in one screen on mobile UI"): less space under the footer and between footer rows, orb takes a bit less of the height */
  html body .app[data-mode="home"]{padding-bottom:6px!important}
  html body .app[data-mode="home"] .orbwrap{--w:clamp(170px,min(78vw,300px,calc(100svh - 590px)),300px)!important}
  html body .app[data-mode="home"] .foot{padding-bottom:6px!important;gap:4px 22px!important}
  html body .app[data-mode="home"] .foot #credit{margin-top:4px!important}
}

/* ---------- 30. phone footer rhythm (Viv, 9 Nov 2026: "below AISearch Global text, close gap around it", "line spacing layout should look premium not cluttered") ----------
   Order: Journey link, credit (3 lines), privacy, acknowledgement. One even rhythm: 14px under the link, 10px each side of privacy, easy line-heights. The orb gives up 15px of height to pay for it so the page still fits one screen. */
@media (max-width:700px){
  html body .app[data-mode="home"] .orbwrap{--w:clamp(170px,min(78vw,300px,calc(100svh - 605px)),300px)!important}
  html body .app[data-mode="home"] .foot{gap:10px 22px!important}
  html body .app[data-mode="home"] .foot #credit{margin:4px auto 0!important;line-height:1.5!important}
  html body .app[data-mode="home"] .foot .result-notes{margin:0!important}
  html body .app[data-mode="home"] .foot .result-notes summary{padding:0!important;line-height:1.5!important}
  html body .app[data-mode="home"] .foot .ack{line-height:1.6!important;margin:0 auto!important}
}

/* ---------- 31. orb left alone (Viv, 9 Nov 2026: "leave orb alone") : phone orb size back to the original min(78vw,300px) ---------- */
@media (max-width:700px){html body .app[data-mode="home"] .orbwrap{--w:min(78vw,300px)!important}}

/* ---------- 26. Journey website link in the top-left corner on desktop (Viv, 9 Nov 2026: "put on leftside corner", "opposite corner") ---------- */
@media (min-width:701px){
  html body .app[data-mode="home"] .foot .foot-links{position:fixed!important;left:24px!important;top:12px!important;margin:0!important;z-index:5}
}

/* ---------- 27. controls panel redone on one grid; speaker gets the same circle as waves and keyboard; Journey link clear of the title (Viv, 9 Nov 2026: "redo the panel badly laid out", "put circle around volume button too", "put on leftside corner") ----------
   Both rows use the same three 40px columns with 14px gaps, so Rick/speaker, switch/waves and Dani/keyboard share one centre line each. Equal padding on all four sides. */
html body .app[data-mode] .voices.glass{gap:8px!important;padding:12px 16px 10px!important}
html body .app[data-mode] .voices .vgroup,html body .app[data-mode] .voices .topctl{display:grid!important;grid-template-columns:repeat(3,40px)!important;column-gap:14px!important;justify-content:center!important;justify-items:center!important;align-items:start!important;width:auto!important;gap:0 14px!important}
html body .app[data-mode] .voices .vgroup .vopt{width:40px!important;min-width:40px!important}
html body .app[data-mode] .voices .vgroup .vswitch{margin:4px 0 0!important}
html body .app[data-mode] .voices .topctl{align-items:center!important}
html body .app[data-mode] .voices .topctl .voice-control{margin:0!important;display:flex!important;justify-content:center!important}
html body .app[data-mode] .voices .topctl .voice-settings,html body .app[data-mode] .voices .topctl #ocean,html body .app[data-mode] .voices .topctl #type-toggle{margin:0!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;border-radius:50%!important;background:rgba(255,255,255,.2)!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 6px rgba(15,23,42,.08)!important}
html body .app[data-mode] .voices .topctl .sp-gloss{transform:scale(.86)!important}
@media (min-width:701px){
  html body .app[data-mode="home"] .foot .foot-links{top:4px!important;line-height:16px!important;padding:0!important}
  html body .app[data-mode="home"] .foot .foot-links a{padding:0!important;line-height:16px!important}
}
html body .app[data-mode] .voices .vgroup .vswitch{margin:6.5px 0 0!important}
@media (min-width:701px){html body .app[data-mode="home"] .foot .foot-links{top:1px!important}}

/* ---------- 33. Journey website link at the BOTTOM of the right side (Viv, 9 Nov 2026: "move it to the bottom of same side") ----------
   Desktop home only. The footer spans the full width (24px each side) and the link is pinned to its right end, level with the privacy and credit row. The controls panel stays top right. */
@media (min-width:701px){
  html body .app[data-mode="home"] .foot{right:24px!important}
  html body .app[data-mode="home"] .foot .foot-links{position:absolute!important;left:auto!important;right:0!important;top:5px!important;margin:0!important;padding:0!important;width:auto!important;text-align:right!important;z-index:5}
}

/* ---------- 34. the controls panel reads as real frosted glass (Viv, 9 Nov 2026: "does not look like glass morphism frosted glass", "looks grey") ----------
   Light, not grey: a milky white sheen from the top-left, a faint sage tint (the brand sage #BEE2D9 family) so it reads as glass and not as a grey box, strong blur and saturation of what is behind, NO dimming of the backdrop, a bright hairline edge, an inner top highlight, an inner soft glow and a two-part lift shadow. Square corners, no grain, no extra elements. */
html body .app[data-mode] .voices.glass{
  /* match of Viv's reference (iOS-style menu glass, 9 Nov 2026): cool blue-grey body that lightens toward the top-left and warms slightly at the foot, heavy blur and saturation of what is behind, a faint white edge, no hard bright rim */
  background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%),linear-gradient(180deg,rgba(176,190,206,.62) 0%,rgba(140,154,172,.66) 58%,rgba(160,160,146,.64) 100%)!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.9)!important;backdrop-filter:blur(34px) saturate(1.9)!important;
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 22px rgba(255,255,255,.10),0 18px 40px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.10)!important}
@media (prefers-reduced-transparency:reduce){html body .app[data-mode] .voices.glass{background:rgba(196,222,216,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media (forced-colors:active){html body .app[data-mode] .voices.glass{background:Canvas!important;border:1px solid CanvasText!important;box-shadow:none!important}}

/* ---------- 35. match Viv's reference glass: line icons, crisp white labels, frost grain (Viv, 9 Nov 2026: "keyboard should look like a keyboard with grids", "look at the font how clear it is", "icons clean", "exactly like this") ----------
   Speaker, waves and keyboard are thin white line icons (assets/line-*.svg, 24 grid, 1.5 stroke; the keyboard has real key squares and a space bar). No filters or scaling tricks on them. Labels stay white Poppins, same size and weight, with one tight shadow so the edges stay clean. Panel body adds fine frost grain. Corners stay square. */
html body .app[data-mode] .voices .topctl .sp-gloss,html body .app[data-mode] .voices .topctl .ic-g{width:20px!important;height:20px!important;transform:none!important;opacity:1!important;filter:drop-shadow(0 1px 1px rgba(30,42,60,.30))!important}
html body .app[data-mode] .voices .topctl #type-toggle .ic-g{width:22px!important;height:22px!important}
html body .app[data-mode] .voices .vopt span,html body .app[data-mode] .voices p.status,html body .app[data-mode] .voices p.status span,html body .app[data-mode][data-state] .voices p.status span{color:#fff!important;-webkit-font-smoothing:antialiased;text-shadow:0 1px 1px rgba(30,42,60,.34)!important}
html body .app[data-mode] .voices.glass{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(150,166,186,.74) 0%,rgba(118,134,154,.78) 58%,rgba(138,138,122,.76) 100%)!important}
@media (prefers-reduced-transparency:reduce){html body .app[data-mode] .voices.glass{background:rgba(120,134,152,.96)!important}}
@media (forced-colors:active){html body .app[data-mode] .voices.glass{background:Canvas!important}}

/* ---------- 36. Rick and Dani as line icons in the same set as speaker, waves and keyboard (Viv, 9 Nov 2026: "icons are wrong for ric and dani") ----------
   assets/line-rick.svg (head above a flat-bottomed dome) and assets/line-dani.svg (the same with a bob around the face), 24 grid, 1.5 stroke. No filter tricks beyond the one tight shadow. Selected = full white, unselected = 70%. */
html body .app[data-mode] .voices .vopt .voice-person.p-gloss{width:28px!important;height:28px!important;transform:none!important;filter:drop-shadow(0 1px 1px rgba(30,42,60,.30))!important}
html body .app[data-mode] .voices .vopt[aria-checked="true"] .voice-person.p-gloss{opacity:1!important}
html body .app[data-mode] .voices .vopt[aria-checked="false"] .voice-person.p-gloss{opacity:.7!important}
/* 36b. Rick and Dani line icons at 24px so the panel keeps its 125px height (the 28px box made it 3px taller; nothing may shift) */
html body .app[data-mode] .voices .vopt .voice-person.p-gloss{width:24px!important;height:24px!important}

/* ---------- 37. one glass everywhere (Viv, 9 Nov 2026: "this panel should be consistent everywhere across dashboard") ----------
   The controls-panel material (section 35) now also on the voice stage, every card and the transcript: same blue-grey body, frost grain, 34px blur, faint white edge, same shadow. Same sharp corners. Layout, text, sizes and charts are untouched. */
html body .app[data-mode] .stage,html body .app[data-mode] article.card,html body .app[data-mode] .transcript.glass{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(150,166,186,.74) 0%,rgba(118,134,154,.78) 58%,rgba(138,138,122,.76) 100%)!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.9)!important;backdrop-filter:blur(34px) saturate(1.9)!important;
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 22px rgba(255,255,255,.10),0 18px 40px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.10)!important}
@media (prefers-reduced-transparency:reduce){html body .app[data-mode] .stage,html body .app[data-mode] article.card,html body .app[data-mode] .transcript.glass{background:rgba(120,134,152,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media (forced-colors:active){html body .app[data-mode] .stage,html body .app[data-mode] article.card,html body .app[data-mode] .transcript.glass{background:Canvas!important;border:1px solid CanvasText!important;box-shadow:none!important}}

/* ---------- 38. 60% transparent glass; selected = emerald, off = red (Viv, 9 Nov 2026: "I want 60% transparency", "when something is highlighted white font turns to emerald and red when turned off") ----------
   Body alpha is .40 everywhere the glass is used (controls panel, stage, cards, transcript), so 60% of the page shows through; blur, grain, edge and shadow unchanged. State colours: Rick/Dani selected, waves sound ON, keyboard open and speaker panel open = emerald #0B8F5F; waves sound OFF = red #D32F2F. Icons are recoloured with a mask of the same line SVG, so shape and size are identical. White-on-glass contrast falls further at this transparency (not measured). */
html body .app[data-mode] .voices.glass,html body .app[data-mode] .stage,html body .app[data-mode] article.card,html body .app[data-mode] .transcript.glass{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(150,166,186,.40) 0%,rgba(118,134,154,.40) 58%,rgba(138,138,122,.40) 100%)!important}
html body .app[data-mode] .voices .vopt[aria-checked="true"] span{color:#0B8F5F!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important}
html body .app[data-mode] .voices .vopt[data-voice="ric"][aria-checked="true"] .voice-person.p-gloss{background-color:#0B8F5F!important;-webkit-mask:url(assets/line-rick.svg) center/contain no-repeat!important;mask:url(assets/line-rick.svg) center/contain no-repeat!important;object-fit:none!important;object-position:-9999px 0!important}
html body .app[data-mode] .voices .vopt[data-voice="dani"][aria-checked="true"] .voice-person.p-gloss{background-color:#0B8F5F!important;-webkit-mask:url(assets/line-dani.svg) center/contain no-repeat!important;mask:url(assets/line-dani.svg) center/contain no-repeat!important;object-fit:none!important;object-position:-9999px 0!important}
html body .app[data-mode] .voices .topctl #ocean[aria-pressed="true"] .ic-g{background-color:#0B8F5F!important;-webkit-mask:url(assets/line-waves.svg) center/contain no-repeat!important;mask:url(assets/line-waves.svg) center/contain no-repeat!important;object-fit:none!important;object-position:-9999px 0!important}
html body .app[data-mode] .voices .topctl #ocean[aria-pressed="false"] .ic-g{background-color:#D32F2F!important;-webkit-mask:url(assets/line-waves.svg) center/contain no-repeat!important;mask:url(assets/line-waves.svg) center/contain no-repeat!important;object-fit:none!important;object-position:-9999px 0!important}
html body .app[data-mode] .voices .topctl #type-toggle[aria-expanded="true"] .ic-g{background-color:#0B8F5F!important;-webkit-mask:url(assets/line-keyboard.svg) center/contain no-repeat!important;mask:url(assets/line-keyboard.svg) center/contain no-repeat!important;object-fit:none!important;object-position:-9999px 0!important}
html body .app[data-mode] .voices .topctl #voice-settings[aria-expanded="true"] .sp-gloss{background-color:#0B8F5F!important;-webkit-mask:url(assets/line-speaker.svg) center/contain no-repeat!important;mask:url(assets/line-speaker.svg) center/contain no-repeat!important;object-fit:none!important;object-position:-9999px 0!important}

/* ---------- 39. board mode: mic clear of the orb; white text on the glass (Viv, 9 Nov 2026: "the mic needs to sit away from the orb", "cannot use black text has to be white matching rest") ----------
   The -64px pull (section 28) was meant for the home page, where the mic sits in the orb's shadow zone. In board mode it put the mic on top of the globe, so there it now starts 6px under the orb box (about 48px under the sphere) and the Rick/Dani panel moves down with it. "Questions you can ask" and its arrow are white like the rest of the glass. */
html body .app[data-mode="board"] .vmic{margin:6px auto 4px!important}
html body .app[data-mode="board"] .prompt-menu summary,html body .app[data-mode="board"] .prompt-menu summary *{color:#fff!important;text-shadow:0 1px 1px rgba(30,42,60,.34)!important}

/* ---------- 40. landing stage has NO glass (my mistake in sections 37/38: ".stage" is the whole landing page, it only becomes a panel in board mode) ----------
   Puts the home stage back exactly as before section 37: no fill, no border, no shadow, no blur. Board mode keeps the glass. */
html body .app[data-mode="home"] .stage{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- 41. silver chrome ring around the mic (Viv, 9 Nov 2026: "enclose the mic in a silver ring like this, only copy the metal ring") ----------
   Reference: a round chrome bezel, from the outside in: a thin white edge, a thin dark line, a wide chrome band with sharp light/dark reflections, a thin dark line. Only that ring is copied; the reference's white face is NOT (the mic stays as it is). Drawn on #mic::before: one conic-gradient for the chrome band, one radial-gradient overlay for the four thin lines, a radial mask so only the ring shows, one soft drop shadow. It is absolutely positioned 11px outside the 60px mic, so nothing moves. Static (no animation), so reduced motion needs nothing. */
html body .app[data-mode] .vmic #mic::before{
  content:""!important;display:block!important;position:absolute!important;inset:-11px!important;border-radius:50%!important;pointer-events:none!important;z-index:1!important;opacity:1!important;
  background:
   radial-gradient(circle closest-side,transparent 0 85.5%,rgba(18,20,22,.88) 85.5% 87.5%,transparent 87.5% 96%,rgba(18,20,22,.88) 96% 98%,rgba(255,255,255,.96) 98% 100%),
   conic-gradient(from 0deg,#f4f6f7 0deg,#b9bec1 25deg,#5d6266 55deg,#e9ecee 85deg,#8d9397 115deg,#2f3235 150deg,#cfd3d6 185deg,#fafbfb 215deg,#7a8084 245deg,#3b3f42 275deg,#bfc4c7 310deg,#f1f3f4 340deg,#f4f6f7 360deg)!important;
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 85.4%,#000 85.6% 100%)!important;mask:radial-gradient(circle closest-side,transparent 0 85.4%,#000 85.6% 100%)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  filter:drop-shadow(0 3px 5px rgba(30,40,50,.28))!important}
@media (forced-colors:active){html body .app[data-mode] .vmic #mic::before{background:none!important;-webkit-mask:none!important;mask:none!important;border:2px solid CanvasText!important;filter:none!important}}
/* 41b. ring centred on the mic by size, not inset (earlier .micbtn::before rules set top/width and pushed the ring up-left); lines a little softer */
html body .app[data-mode] .vmic #mic::before{inset:auto!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:82px!important;height:82px!important;margin:0!important;transform:translate(-50%,-50%)!important}
/* 41c. ring reads as bright silver, not gunmetal: mostly light stops with a few sharp dark reflections, thin lines at 55% */
html body .app[data-mode] .vmic #mic::before{background:
  radial-gradient(circle closest-side,transparent 0 85.5%,rgba(18,20,22,.55) 85.5% 87%,transparent 87% 96.2%,rgba(18,20,22,.5) 96.2% 97.8%,rgba(255,255,255,.98) 97.8% 100%),
  conic-gradient(from 0deg,#fbfcfc 0deg,#dfe3e5 20deg,#9aa0a4 40deg,#f7f8f9 62deg,#c9cdd0 90deg,#6e7478 112deg,#eef0f1 135deg,#fdfdfd 170deg,#b4b9bc 205deg,#5f656a 228deg,#e6e9ea 255deg,#fff 290deg,#aeb4b8 320deg,#f2f4f5 345deg,#fbfcfc 360deg)!important}

/* ---------- 42. right-hand column locked: controls panel above the Journey link, same right edge (Viv, 9 Nov 2026: "this panel has to sit above the Journey link", "fix position lock it") ----------
   Desktop home only (701px and up; phones keep their own layout). Panel: fixed 16px from the top and 16px from the right. Journey link: right edge on the same line as the panel's (footer's right inset 24px -> 16px), fixed to the bottom row by the fixed footer. Both are fixed to the viewport, so neither moves with layout or scroll. Nothing else changes. */
@media (min-width:701px){
  html body .app[data-mode="home"] .voices.glass{position:fixed!important;top:16px!important;right:16px!important;left:auto!important;bottom:auto!important;margin:0!important}
  html body .app[data-mode="home"] .foot{right:16px!important}
}

/* ---------- 43. panel sits directly ABOVE the Journey link, bottom right (Viv, 9 Nov 2026: "why is panel on top", earlier "this panel has to sit above the Journey link") ----------
   Section 42 left the panel at the top of the screen with the link far below. On desktop home it is now the same fixed right column, stacked: link on the bottom row (bottom 54px, 16px tall), 16px gap, then the panel (bottom 86px, right 16px, same right edge). Away from the globe. Phones unchanged. */
@media (min-width:701px){
  html body .app[data-mode="home"] .voices.glass{top:auto!important;bottom:86px!important}
}

/* (section 44, the clear glass panel behind the landing orb, mic and greeting, was removed at Viv's request on 9 Nov 2026: "no remove glass panel, looks bad") */

/* ---------- 45. controls panel stays clear of the approved ribbon (Viv, 9 Nov 2026: "you changed the approved ribbon element, this is wrong") ----------
   Section 43 put the panel over the ribbon, which blurred part of it. The panel's bottom now sits above the ribbon's top edge, measured at 1920x1080, 1440x900, 1280x720, 1024x768 and 900x600: bottom = max(100px, 60vh - 345px). Still the same fixed right column, still above the Journey link. */
@media (min-width:701px){
  html body .app[data-mode="home"] .voices.glass{bottom:max(100px,calc(60vh - 345px))!important}
}

/* ---------- 46. the approved ribbons are back: two glass ribbons, swaying (Viv, 9 Nov 2026: "this was the approved ribbon, two of them going across the screen bleeding out of both ends, never behind or around the orb, gently swaying") ----------
   index.html has the two assets/ribbon.png images again (.ribbon-up and .ribbon-low) with their original CSS and sway animations in intelli.css (21s and 17s, transform-only, off for reduced motion). ribbon-place.js places the upper one so both ends run off the screen and it stays clear of the text, and now also of the orb and the mic. The single metal ribbon is removed from the page. The controls panel is back at bottom 86px (section 45 kept it clear of the metal ribbon): where a glass panel covers a ribbon it blurs it, as in the approved look. */
@media (min-width:701px){
  html body .app[data-mode="home"] .voices.glass{bottom:86px!important}
}

/* ---------- 47. the APPROVED ribbons, locked, in the orb's metal (Viv, 9 Nov 2026: "approved placement for ribbons" + "ribbons have to match the metallic surface of the element inside the globe exactly") ----------
   Placement: the approved 3:34pm layout, two ribbons, one sweeping down the left side from the top-left corner, one in the bottom-right corner, both running off the screen, gently swaying (intelli.css rb-sway-a 21s / rb-sway-b 17s, transform only, off for reduced motion).
   Surface: both images are assets/ribbon-metal.png, the Blender render made with the orb interior's own liquid-metal material and light (v10/scene_metal_ribbon.py).
   How the path is kept: the metal render's centre line was fitted onto the approved glass ribbon's centre line (scale 0.97, offset -320 / -286 in the glass image's 1920 x 560 units, rms error 11 units). Each metal image is sized and placed so its curve sits on the approved curve, and turns about the SAME point (the old box centre: transform-origin 54.98% 38.90%) with the SAME rotate(58deg) scaleY(-1). Plain CSS in viewport units; no script moves them. Desktop upper ribbon uses the later approved -56vw base (intelli.css line 568, "clear of the title"), as in Viv's approved screenshot. */
@media (min-width:761px){
  html body .ribbons .ribbon-up{left:-88vw!important;top:calc(-4vh - 17.875vw)!important;width:145.5vw!important;right:auto!important;bottom:auto!important;transform-origin:54.98% 38.9%!important}
  html body .ribbons .ribbon-low{left:37vw!important;top:calc(105vh - 29.08vw)!important;width:80.025vw!important;right:auto!important;bottom:auto!important}
}
@media (max-width:760px){
  html body .ribbons .ribbon-up{left:-125.33vw!important;top:calc(2vh - 29.79vw)!important;width:242.5vw!important;right:auto!important;bottom:auto!important;transform-origin:54.98% 38.9%!important}
  html body .ribbons .ribbon-low{left:0!important;top:calc(103vh - 52.875vw)!important;width:145.5vw!important;right:auto!important;bottom:auto!important}
}

/* ---------- 48. ribbon entry below the title; rendered chrome mic ring; product name (Viv, 9 Nov 2026: "move ribbon entry further down, not under text", mic ring "looks so bad", "product name is AISearch Global Intelli Voice") ----------
   Upper ribbon (desktop): 12vw further left and 6vh lower than section 47, the smallest move found (searched in 2vw / 3vh steps) where it enters from the LEFT edge below the title and touches no title or subtitle pixel at 1024, 1166, 1280, 1440 and 1920 wide; it still runs off the bottom. Same curve, same metal, same sway.
   Mic ring: the CSS-drawn ring is replaced by assets/mic-ring.png, a Blender Cycles render of one smooth round chrome tube (torus, metallic 1, roughness .06) lit by a studio band environment, so it is a real rounded metal surface with a bright band and dark reflection edges, not drawn lines. Same size and place (82px, centred on the 60px mic); nothing moves. */
html body .app[data-mode] .vmic #mic::before{background:url(assets/mic-ring.png) center/100% 100% no-repeat!important;-webkit-mask:none!important;mask:none!important;filter:drop-shadow(0 3px 6px rgba(30,40,50,.18))!important}

/* (sections 49 and 50, light cards and side panel, were removed on Viv's instruction 9 Nov 2026: "match every panel to this", with a crop of the blue-grey frosted side panel. Every panel uses the section 35/37/38 blue-grey glass with white text again.) */

/* ---------- 51. dashboard screen only: bento layout, everything in one screen (Viv, 9 Nov 2026: "need bento box kanban card premium layout", "should be able to see all details in one snapshot", "ok this change only for dashboard screen", "and on the side panel where orb sits alone") ----------
   Board mode only, 1100px and wider (the landing screen and narrower screens are untouched). One 12-column grid with no holes: row 1 the four dials; row 2 the evening line chart (6), Toolkit score (3), Tools that named us (3); row 3 Checklist outcomes (3), Partial and failing (3), Audit runs calendar (6). The grid is exactly the screen height (min 749px), and the side panel with the orb is the same height and top, so it reads as the first bento tile; its questions link sits at the foot. Card action buttons sit in the card corner, calendar rows 25px, checklist legend in two rows. Glass, colours, rings and charts unchanged. Prototyped in a headless browser and approved before applying. */
@media (min-width:1100px){
html body .app[data-mode="board"] .board{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:minmax(0,29.4fr) minmax(0,27.2fr) minmax(0,43.4fr)!important;gap:14px!important;height:max(calc(100vh - 123px),749px)!important;align-content:stretch!important;overflow:visible}
html body .app[data-mode="board"] .board{position:relative!important}
html body .app[data-mode="board"] .boardbar{position:absolute!important;right:0!important;top:-40px!important;height:auto!important;z-index:4}
html body .app[data-mode="board"] #options{grid-column:1/-1!important;grid-row:4!important}
html body .app[data-mode="board"] #cards,html body .app[data-mode="board"] #extras,html body .app[data-mode="board"] .xgrid,html body .app[data-mode="board"] #calwrap{display:contents!important}
html body .app[data-mode="board"] .board article.card{width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;overflow:hidden!important}
html body .app[data-mode="board"] #cards>article.card:nth-child(1){grid-column:1/4!important;grid-row:1!important}
html body .app[data-mode="board"] #cards>article.card:nth-child(2){grid-column:4/7!important;grid-row:1!important}
html body .app[data-mode="board"] #cards>article.card:nth-child(3){grid-column:7/10!important;grid-row:1!important}
html body .app[data-mode="board"] #cards>article.card:nth-child(4){grid-column:10/13!important;grid-row:1!important}
html body .app[data-mode="board"] .xgrid>*:nth-child(1){grid-column:1/7!important;grid-row:2!important}
html body .app[data-mode="board"] .xgrid>*:nth-child(2){grid-column:7/10!important;grid-row:2!important}
html body .app[data-mode="board"] .xgrid>*:nth-child(5){grid-column:10/13!important;grid-row:2!important}
html body .app[data-mode="board"] .xgrid>*:nth-child(3){grid-column:1/4!important;grid-row:3!important}
html body .app[data-mode="board"] .xgrid>*:nth-child(4){grid-column:4/7!important;grid-row:3!important}
html body .app[data-mode="board"] #calwrap>*{grid-column:7/13!important;grid-row:3!important}
html body .app[data-mode="board"] .board article.card{position:relative!important}
html body .app[data-mode="board"] .board article.card .chead{position:absolute!important;top:10px!important;right:12px!important;z-index:3}
html body .app[data-mode="board"] .board .caltab tbody tr{height:25px!important}
html body .app[data-mode="board"] .board .caltab td{padding-top:0!important;padding-bottom:0!important;height:25px!important}
html body .app[data-mode="board"] .board article.card{gap:6px!important}
html body .app[data-mode="board"] .board article.card .gfx{padding:0!important}
html body .app[data-mode="board"] .board .xgrid>*:nth-child(3) ul.legend{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:0!important;font-size:10px!important;line-height:1.15!important}
html body .app[data-mode="board"] .board .cal .calhead{margin-bottom:0!important}
html body .app[data-mode="board"] .stage{height:max(calc(100vh - 123px),749px)!important;max-height:none!important;display:flex!important;flex-direction:column!important}
html body .app[data-mode="board"] .stage .prompt-menu{margin-top:auto!important}
}
@media (min-width:1100px){
  html body .app[data-mode="board"] .stage .stagetext{flex:1 1 auto!important;display:flex!important;flex-direction:column!important}
  html body .app[data-mode="board"] .stage .stagetext>.prompt-menu{margin-top:auto!important}
}

/* ---------- 52. "Questions you can ask" in its own panel below the orb panel (Viv, 9 Nov 2026: "put this into its own panel below the panel it is in now, with a few prompts shown and users can scroll through prompts in the panel") ----------
   Dashboard screen, 1100px and wider. The left column is now two bento tiles: the orb panel (orb, mic, controls) and, 14px below it, the questions panel. Together they keep the bento height, so the column still lines up with the cards. The questions panel uses the same blue-grey frosted glass; its list scrolls inside the panel (about five prompts in view). app.js opens it when the board appears (closed on the landing page); the heading still collapses it. */
@media (min-width:1100px){
  html body .app[data-mode="board"] .stage{height:calc(max(calc(100vh - 123px),749px) - 305px)!important;overflow:visible!important;position:sticky}
  html body .app[data-mode="board"] .stage .stagetext>.prompt-menu,html body .app[data-mode="board"] .stage .prompt-menu{position:absolute!important;left:0!important;right:0!important;top:calc(100% + 14px)!important;height:291px!important;margin:0!important;padding:10px 14px 12px!important;box-sizing:border-box!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(150,166,186,.40) 0%,rgba(118,134,154,.40) 58%,rgba(138,138,122,.40) 100%)!important;
    -webkit-backdrop-filter:blur(34px) saturate(1.9)!important;backdrop-filter:blur(34px) saturate(1.9)!important;border:1px solid rgba(255,255,255,.38)!important;border-radius:0!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 22px rgba(255,255,255,.10),0 18px 40px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.10)!important}
  html body .app[data-mode="board"] .stage .prompt-menu summary{min-height:36px!important;padding:6px 2px!important}
  html body .app[data-mode="board"] .stage .prompt-menu .examples{max-height:224px!important;overflow-y:auto!important;overscroll-behavior:contain;margin:4px 0 0!important;padding-right:4px!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.55) transparent}
  html body .app[data-mode="board"] .stage .prompt-menu .chipbtn{min-height:40px!important;color:#fff!important;text-shadow:0 1px 1px rgba(30,42,60,.34)!important}
}
@media (min-width:1100px) and (prefers-reduced-transparency:reduce){html body .app[data-mode="board"] .stage .prompt-menu{background:rgba(120,134,152,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* 52b. one column that scrolls, premium sharp-edged scrollbar (Viv, 9 Nov 2026: "add a scroll feature, premium, all sharp edges"): square 6px thumb on a faint square track, soft fade at the bottom edge while more prompts are below, square hover rows. */
@media (min-width:1100px){
  html body .app[data-mode="board"] .stage .prompt-menu .examples{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:2px!important;max-height:224px!important;overflow-y:auto!important;scroll-behavior:smooth;scroll-snap-type:y proximity;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);padding-bottom:18px!important}
  html body .app[data-mode="board"] .stage .prompt-menu .examples>li{flex:0 0 auto!important;width:100%!important;scroll-snap-align:start}
  html body .app[data-mode="board"] .stage .prompt-menu .chipbtn{border-radius:0!important;width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body .app[data-mode="board"] .stage .prompt-menu .chipbtn:hover,html body .app[data-mode="board"] .stage .prompt-menu .chipbtn:focus-visible{background:rgba(255,255,255,.16)!important;border-radius:0!important}
  html body .app[data-mode="board"] .stage .prompt-menu .examples::-webkit-scrollbar{width:6px}
  html body .app[data-mode="board"] .stage .prompt-menu .examples::-webkit-scrollbar-track{background:rgba(255,255,255,.14);border-radius:0}
  html body .app[data-mode="board"] .stage .prompt-menu .examples::-webkit-scrollbar-thumb{background:rgba(255,255,255,.7);border-radius:0;min-height:28px}
  html body .app[data-mode="board"] .stage .prompt-menu .examples::-webkit-scrollbar-thumb:hover{background:#fff}
  html body .app[data-mode="board"] .stage .prompt-menu .examples::-webkit-scrollbar-button{display:none;height:0}
}
@media (min-width:1100px) and (prefers-reduced-motion:reduce){html body .app[data-mode="board"] .stage .prompt-menu .examples{scroll-behavior:auto}}
/* 52c. alignment (Viv, 9 Nov 2026: "all blocks should be aligned and fit perfectly in the box, no misalignment"): no scroll snapping (it scrolled the first prompt under the heading); every card title takes the same two-line height so all visuals in a row start on one line; each visual is centred in the space left in its tile. */
@media (min-width:1100px){
  html body .app[data-mode="board"] .stage .prompt-menu .examples{scroll-snap-type:none!important}
  html body .app[data-mode="board"] .stage .prompt-menu .examples>li{scroll-snap-align:none!important}
  html body .app[data-mode="board"] .board article.card>h3{line-height:1.3!important;min-height:2.6em!important;margin:0!important}
  html body .app[data-mode="board"] .board article.card>.gfx{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:0!important}
}
/* 52d. the prompt list starts at the top (an inherited justify-content:center pushed the first prompts above the list, out of scroll reach) */
@media (min-width:1100px){html body .app[data-mode="board"] .stage .prompt-menu .examples{justify-content:flex-start!important;align-content:flex-start!important}}

/* ---------- 53. bento grid cards darker, 80% glass (Viv, 9 Nov 2026: "all panels in this grid, make panels darker, retain frost glass at transparency 80% so we can see content") ----------
   Dashboard cards only (the side panel and controls panel are unchanged). Same frosted glass recipe (grain, 34px blur, faint white edge, shadow), with a darker blue-grey tint at 80% strength so the white text, rings and charts read clearly; the page still shows faintly through. Ring tracks lightened so they stay visible on the darker glass. */
html body .app[data-mode="board"] .board article.card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(96,110,128,.80) 0%,rgba(80,94,112,.80) 58%,rgba(92,94,86,.80) 100%)!important}
html body .app[data-mode="board"] .board article.card svg circle.t{stroke:rgba(255,255,255,.16)!important}
@media (prefers-reduced-transparency:reduce){html body .app[data-mode="board"] .board article.card{background:rgba(84,97,114,.97)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* 53b. the last dark text in the grid (checklist donut number and legend counts) turns white with the same tight shadow, so it reads on the darker glass */
html body .app[data-mode="board"] .board article.card .rnum b,html body .app[data-mode="board"] .board article.card .legend .lg b{color:#fff!important;text-shadow:0 1px 1px rgba(30,42,60,.34)!important}

/* ---------- 54. fix list (Viv, 9 Nov 2026 "yes, start") ----------
   a) Questions panel gets the same darker 80% frosted glass as the grid cards (section 53); the orb panel is unchanged.
   b) Faint marks on the darker cards made visible: the dashed "not checked" legend ring and the dark plain-question diamond on the calendar turn light; shapes unchanged. */
@media (min-width:1100px){html body .app[data-mode="board"] .stage .stagetext>.prompt-menu,html body .app[data-mode="board"] .stage .prompt-menu{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(96,110,128,.80) 0%,rgba(80,94,112,.80) 58%,rgba(92,94,86,.80) 100%)!important}}
html body .app[data-mode="board"] .board article.card .lg.u .sw{border-color:rgba(255,255,255,.75)!important}
html body .app[data-mode="board"] .board article.card .k-plain{background:#e6efec!important}

/* ---------- 55. dashboard fits short laptop screens (fix list, 9 Nov 2026) ----------
   The bento needs about 870px of height. On shorter screens (1100px+ wide) the whole dashboard view is scaled as one piece, so every tile keeps its proportions and the full grid stays on screen: measured board bottom 596 of 666, 648 of 720, 699 of 768, 699 of 800. Landing page and 900px+ heights unchanged. */
@media (min-width:1100px) and (max-height:880px){html:has(.app[data-mode="board"]){zoom:.9}}
@media (min-width:1100px) and (max-height:820px){html:has(.app[data-mode="board"]){zoom:.82}}
@media (min-width:1100px) and (max-height:740px){html:has(.app[data-mode="board"]){zoom:.76}}
@media (min-width:1100px) and (max-height:690px){html:has(.app[data-mode="board"]){zoom:.7}}

/* ---------- 56. grid cards and Questions panel a step lighter (Viv, 9 Nov 2026: "that is too dark") ----------
   Same frosted glass, a lighter blue-grey tint at 66% instead of the darker one at 80%. */
html body .app[data-mode="board"] .board article.card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(122,136,154,.66) 0%,rgba(106,120,138,.66) 58%,rgba(118,120,112,.66) 100%)!important}
@media (min-width:1100px){html body .app[data-mode="board"] .stage .stagetext>.prompt-menu,html body .app[data-mode="board"] .stage .prompt-menu{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(122,136,154,.66) 0%,rgba(106,120,138,.66) 58%,rgba(118,120,112,.66) 100%)!important}}

/* ---------- 57. mic ring: the soft rounded satin-silver render (Viv, 9 Nov 2026: "yes" to the side-by-side) ----------
   assets/mic-ring-soft.png: one thick round torus, metallic, roughness .26, lit by a smooth gradient studio, so no hard white or dark edge lines. Same size and place; shadow softened to match. */
html body .app[data-mode] .vmic #mic::before{background-image:url(assets/mic-ring-soft.png)!important;filter:drop-shadow(0 3px 7px rgba(30,40,50,.16))!important}

/* ---------- 58. charts: title + visual only, minimal, animated (Viv, 9 Nov 2026: "need to show only visual, no extra text, minimalistic with animation"; approved "yessss") ----------
   Dials show their number only (AI Toolkit keeps "A+"); the full wording stays for screen readers. Line, bars: no value, axis or time labels, faint solid hairline grid.
   Checklist outcomes = one cell per check (filled pass/partial/fail, outlined not applicable/not checked). Tools that named us = five squares (filled named, outline not). The duplicate AI Toolkit card is removed (app.js); the line chart takes its place. Entrance animation in app.js (line draws in, bars rise, cells and squares appear in turn); reduced motion shows the finished charts. */
html body .app .board article.card .rnum span:not(.keep){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html body .app .board article.card .rnum span.keep{font-size:12px!important;letter-spacing:.04em;opacity:.85;margin-top:2px}
html body .app .board article.card .rnum b{font-size:38px!important;font-weight:300!important}
html body .app .board svg.gfx-svg text{display:none!important}
html body .app .board svg.gfx-svg .gridl{stroke:rgba(255,255,255,.16)!important;stroke-width:1!important;stroke-dasharray:none!important}
html body .app .board svg.gfx-svg .pline{stroke:#dff2ea!important;stroke-width:2.2!important;fill:none!important;stroke-linecap:round;stroke-linejoin:round}
html body .app .board svg.gfx-svg .pdot{r:2.6px;fill:#dff2ea!important;stroke:none!important}
html body .app .board svg.gfx-svg .pdot.last{r:5px;fill:#a6d1c0!important;stroke:rgba(255,255,255,.9)!important;stroke-width:2!important}
html body .app .board svg.bars rect.bar{fill:rgba(223,242,234,.78)!important;stroke:none!important}
html body .app .board .cal-legend,html body .app .board .xgrid .legend{display:none!important}
html body .app .board .mv{flex:1 1 auto;display:flex;align-items:center;justify-content:center;width:100%}
html body .app .board .waffle{display:grid;grid-template-columns:repeat(11,12px);gap:4px}
html body .app .board .waffle i{width:12px;height:12px;display:block;box-sizing:border-box}
html body .app .board .waffle .p{background:#a6d1c0}html body .app .board .waffle .q{background:#d9c58f}html body .app .board .waffle .f{background:#e0a19e}
html body .app .board .waffle .n,html body .app .board .waffle .u{border:1px solid rgba(255,255,255,.45)}
html body .app .board .tools5{display:flex;gap:10px}
html body .app .board .tools5 i{width:26px;height:26px;display:block;box-sizing:border-box}
html body .app .board .tools5 .y{background:#a6d1c0}html body .app .board .tools5 .n{border:1.5px solid rgba(255,255,255,.55)}html body .app .board .tools5 .u{border:1.5px dashed rgba(255,255,255,.55)}
@media (forced-colors:active){html body .app .board .waffle .p,html body .app .board .waffle .q,html body .app .board .waffle .f,html body .app .board .tools5 .y{background:CanvasText}}
/* bento positions after the duplicate card left the row: 1 line, 2 checklist, 3 bars, 4 tools */
@media (min-width:1100px){
  html body .app[data-mode="board"] .xgrid>*:nth-child(1){grid-column:1/10!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid>*:nth-child(4){grid-column:10/13!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid>*:nth-child(2){grid-column:1/4!important;grid-row:3!important}
  html body .app[data-mode="board"] .xgrid>*:nth-child(3){grid-column:4/7!important;grid-row:3!important}
}

/* ---------- 59. mic ring = option B, the fine chrome line (Viv, 9 Nov 2026: "b") ----------
   assets/mic-ring-fine.png: a thin round chrome torus in the mic's own chrome, soft gradient light, no hard edges. Same size and place. */
html body .app[data-mode] .vmic #mic::before{background-image:url(assets/mic-ring-fine.png)!important;filter:drop-shadow(0 2px 4px rgba(30,40,50,.14))!important}

/* ---------- 60. best-of board (Viv, 9 Nov 2026: "remove anything that's weak", "show only the best"; approved "Yes, build it") ----------
   The question cards (#cards) are not shown on the board: eight fixed tiles from published, dated results take their place (app.js BEST, source on each tile's tooltip and screen-reader label).
   Row 1: named in outside tests, share of voice (yours against the next brand), audit questions, AI readiness. Row 2: since day one (wide), client site health. Row 3: AI describes our client correctly, academic client. Same glass, title + visual only. */
html body .app[data-mode="board"] #cards,html body .app[data-mode="board"] #calwrap{display:none!important}
@media (min-width:1100px){
  html body .app[data-mode="board"] .board{grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(1){grid-column:1/4!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(2){grid-column:4/7!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(3){grid-column:7/10!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(4){grid-column:10/13!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(5){grid-column:1/9!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(6){grid-column:9/13!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(7){grid-column:1/7!important;grid-row:3!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(8){grid-column:7/13!important;grid-row:3!important}
}
html body .app .board .best-t .ringbox{position:relative;width:148px;height:148px;margin:0 auto}
html body .app .board .best-t .ringbox .ring{width:100%;height:100%}
html body .app .board .best-t svg.climb{width:100%;max-width:720px;height:auto;max-height:100%}
html body .app .board .pair{display:flex;align-items:flex-end;gap:18px;height:140px;border-bottom:1px solid rgba(255,255,255,.22)}
html body .app .board .pair i{display:block;width:24px;height:var(--h);border-radius:4px 4px 0 0}
html body .app .board .pair .was{background:rgba(255,255,255,.28)}
html body .app .board .pair .now{background:#a6d1c0}
html body .app .board .sov2{display:flex;flex-direction:column;gap:12px;width:78%}
html body .app .board .sov2 i{display:block;height:14px;width:var(--w);border-radius:0 4px 4px 0}
html body .app .board .sov2 .you{background:#a6d1c0}
html body .app .board .sov2 .next{background:rgba(255,255,255,.28)}
html body .app .board .tools5.six{gap:10px}
@media (forced-colors:active){html body .app .board .pair .now,html body .app .board .sov2 .you{background:CanvasText}html body .app .board .pair .was,html body .app .board .sov2 .next{background:GrayText}}
html body .app .board .sov2 i,html body .app .board .pair i{border:0!important;box-shadow:none!important;outline:0!important}

/* ---------- 62. Veritas AI citations tile (Viv, 9 Nov 2026: "Veritas show the AI citations"): bottom row now three tiles ---------- */
@media (min-width:1100px){html body .app[data-mode="board"] .xgrid.best>*:nth-child(7){grid-column:1/5!important;grid-row:3!important}html body .app[data-mode="board"] .xgrid.best>*:nth-child(8){grid-column:5/9!important;grid-row:3!important}html body .app[data-mode="board"] .xgrid.best>*:nth-child(9){grid-column:9/13!important;grid-row:3!important}}

/* ---------- 63. Veritas before and after (Viv, 9 Nov 2026: "before and after") ----------
   The two AI tiles show a Before row and an After row of squares (filled = yes, outline = no, dashed = not recorded); the bar tiles get small Before / After labels under the bars. */
html body .app .board .pairwrap{display:flex;flex-direction:column;align-items:center;gap:6px}
html body .app .board .ba{display:flex;gap:18px;font-size:10px;letter-spacing:.02em;color:rgba(255,255,255,.75)}
html body .app .board .ba span{width:24px;text-align:center;white-space:nowrap;display:flex;justify-content:center}
html body .app .board .rows2{display:flex;flex-direction:column;gap:14px}
html body .app .board .rows2 .r{display:flex;align-items:center;gap:12px}
html body .app .board .rows2 .r>span{width:40px;font-size:10px;letter-spacing:.02em;color:rgba(255,255,255,.75)}
html body .app .board .rows2 .tools5{gap:8px}
html body .app .board .rows2 .tools5 i{width:20px;height:20px}
html body .app .board .rows2 .tools5.was .y{background:rgba(255,255,255,.45)}

/* ---------- 64. Veritas AI tiles as counts: how many AI tools before, how many now (Viv, 9 Nov 2026) ---------- */
html body .app .board .cnt2{display:flex;align-items:center;gap:22px}
html body .app .board .cnt2 .c{display:flex;flex-direction:column;align-items:center;gap:2px}
html body .app .board .cnt2 b{font-size:46px;font-weight:300;line-height:1;color:#fff;text-shadow:0 1px 1px rgba(30,42,60,.34)}
html body .app .board .cnt2 .was b{color:rgba(255,255,255,.55)}
html body .app .board .cnt2 span{font-size:10px;letter-spacing:.02em;color:rgba(255,255,255,.75)}
html body .app .board .cnt2>i{display:block;width:34px;height:2px;background:#a6d1c0;position:relative;margin-bottom:14px}
html body .app .board .cnt2>i::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid #a6d1c0;border-right:0}

/* ---------- 65. Veritas AI tiles get a visual (Viv, 9 Nov 2026: "needs visual"): a row of AI squares before and now, on the same scale, with the count at the end ---------- */
html body .app .board .cnt3{display:flex;flex-direction:column;gap:16px}
html body .app .board .cnt3 .r{display:grid;grid-template-columns:44px auto 34px;align-items:center;gap:12px}
html body .app .board .cnt3 .r>span{font-size:10px;letter-spacing:.02em;color:rgba(255,255,255,.75)}
html body .app .board .cnt3 .sq{display:flex;gap:7px}
html body .app .board .cnt3 .sq i{width:22px;height:22px;display:block;box-sizing:border-box}
html body .app .board .cnt3 .now .y{background:#a6d1c0}
html body .app .board .cnt3 .was .y{background:rgba(255,255,255,.5)}
html body .app .board .cnt3 .o{border:1.5px solid rgba(255,255,255,.35)}
html body .app .board .cnt3 b{font-size:30px;font-weight:300;line-height:1;color:#fff;text-shadow:0 1px 1px rgba(30,42,60,.34)}
html body .app .board .cnt3 .was b{color:rgba(255,255,255,.6)}

/* ---------- 66. Client Zero only (Viv, 9 Nov 2026: "remove Veritas, this is the Client Zero dashboard") ----------
   Five tiles: the four headline rings on row 1, "Since day one" across the full width below, taller. */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board{grid-template-rows:minmax(0,1fr) minmax(0,1.25fr)!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(5){grid-column:1/13!important;grid-row:2!important}
}

/* ---------- 67. Client Zero board: every top stat, each its own chart form, with motion (Viv, 9 Nov 2026: "put all your top and use different graph", "great with motion", "premium") ----------
   Row 1: best AEO and GEO consultant 5/5 (five level bars), named in outside tests 19 of 27 (one cell per answer), share of voice (yours against the next brand), audit questions 89% (metal ring).
   Row 2: since day one (area chart, 19 to 100), citation position 7.0 to 1.5 (marker travels along a #1 to #10 ladder), AI tools naming us on the plain question 1 to 3 of 5 (before and now). */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board{grid-template-rows:minmax(0,1fr) minmax(0,1.1fr)!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(1){grid-column:1/4!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(2){grid-column:4/7!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(3){grid-column:7/10!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(4){grid-column:10/13!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(5){grid-column:1/7!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(6){grid-column:7/10!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.best>*:nth-child(7){grid-column:10/13!important;grid-row:2!important}
}
html body .app .board .five{display:flex;flex-direction:column;align-items:center;gap:12px}
html body .app .board .five b{font-size:40px;font-weight:300;line-height:1;color:#fff;text-shadow:0 1px 1px rgba(30,42,60,.34)}
html body .app .board .five .bars5{display:flex;align-items:flex-end;gap:8px;height:64px}
html body .app .board .five .bars5 i{display:block;width:18px;height:100%;background:#a6d1c0;border-radius:4px 4px 0 0}
html body .app .board .waf{display:grid;grid-template-columns:repeat(var(--c),14px);gap:5px}
html body .app .board .waf i{width:14px;height:14px;display:block;box-sizing:border-box;border-radius:2px}
html body .app .board .waf .y{background:#a6d1c0}
html body .app .board .waf .o{border:1px solid rgba(255,255,255,.4)}
html body .app .board svg.rank{width:100%;max-width:280px;height:auto}
html body .app .board svg.rank .tk{stroke:rgba(255,255,255,.4);stroke-width:1}
html body .app .board svg.rank .from{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5}
html body .app .board svg.rank .trail{stroke:#a6d1c0;stroke-width:2;stroke-dasharray:3 4}
html body .app .board svg.rank .to{fill:#a6d1c0;stroke:rgba(255,255,255,.9);stroke-width:2}
html body .app .board svg.gfx-svg text.rl{display:block!important;font:400 11px Poppins,sans-serif;fill:rgba(255,255,255,.8)}
html body .app .board svg.climb .parea{stroke:none}
@media (forced-colors:active){html body .app .board .five .bars5 i,html body .app .board .waf .y,html body .app .board svg.rank .to{background:CanvasText;fill:CanvasText}}
/* 67b. fit the narrow tiles: before/now rows sized to the 3-column tile (labels and count were clipped); the position ladder drawn larger */
html body .app .board .cnt3 .r{grid-template-columns:36px auto 22px!important;gap:8px!important}
html body .app .board .cnt3 .sq{gap:5px!important}
html body .app .board .cnt3 .sq i{width:17px!important;height:17px!important}
html body .app .board .cnt3 b{font-size:24px!important}
html body .app .board svg.rank{max-width:100%!important;overflow:visible}
html body .app .board svg.rank text.rl{font-size:13px!important}
/* 67c. before/now rows shrink with the tile at every screen size (Viv's crop still showed the label and the count clipped on a narrower window) */
html body .app .board .cnt3{width:100%;max-width:230px}
html body .app .board .cnt3 .r{grid-template-columns:auto minmax(0,1fr) auto!important;gap:7px!important}
html body .app .board .cnt3 .sq{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px!important}
html body .app .board .cnt3 .sq i{width:100%!important;height:auto!important;aspect-ratio:1;max-width:18px}
html body .app .board .cnt3 .r>span{font-size:9.5px}
html body .app .board .cnt3 b{font-size:22px!important;min-width:14px;text-align:right}

/* ---------- 68. service cards and the "make it yours" QR card (Viv, 9 Nov 2026) ----------
   Shown when a services question is asked: five service cards and one card with the free-call QR code, in the same glass, 3 x 2 bento on desktop. Price is the visual; one short line; a link to the page. QR on a white tile so phones can scan it. */
@media (min-width:1100px){
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(1){grid-column:1/5!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(2){grid-column:5/9!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(3){grid-column:9/13!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(4){grid-column:1/5!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(5){grid-column:5/9!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(6){grid-column:9/13!important;grid-row:2!important}
}
html body .app .board .svc-t .gfx{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:10px!important;padding:0 2px!important}
html body .app .board .svc-t .price{display:flex;align-items:baseline;gap:8px}
html body .app .board .svc-t .price b{font-size:44px;font-weight:300;line-height:1;color:#fff;text-shadow:0 1px 1px rgba(30,42,60,.34)}
html body .app .board .svc-t .price span{font-size:12px;color:rgba(255,255,255,.8)}
html body .app .board .svc-t .sd{margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.92);max-width:32ch;text-shadow:0 1px 1px rgba(30,42,60,.3)}
html body .app .board .svc-t .sd.lead{font-size:14px;color:#fff}
html body .app .board .svc-t .sl{font-size:12px;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
html body .app .board .svc-t .sl:hover,html body .app .board .svc-t .sl:focus-visible{text-decoration-color:#fff}
html body .app .board .svc-t.star .price b{color:#dff2ea}
html body .app .board .svc-t.qr .gfx{align-items:center!important;text-align:center}
html body .app .board .svc-t.qr .sd{max-width:26ch}
html body .app .board .qrbox{display:block;padding:8px;background:#fff;line-height:0}
html body .app .board .qrbox img{display:block;width:120px;height:120px}
html body .app .board .qrbox:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* 68b. service card content centred as one block (price, line and link were mixed left and centre) */
html body .app .board .svc-t .gfx{align-items:center!important;text-align:center!important}
html body .app .board .svc-t .sd{max-width:28ch}
/* 68c. what a custom Intelli Voice can do, on the "make it yours" card (Viv, 9 Nov 2026) */
html body .app .board .svc-t.qr .gfx{gap:8px!important}
html body .app .board .svc-t .caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.9);text-shadow:0 1px 1px rgba(30,42,60,.3)}
html body .app .board .svc-t .caps li::before{content:"";display:inline-block;width:6px;height:6px;background:#a6d1c0;margin:0 7px 1px 0;vertical-align:middle}
html body .app .board .svc-t.qr .qrbox img{width:100px;height:100px}
html body .app .board .svc-t.qr .sd.lead{font-size:13.5px}

/* ---------- 69. customise card (rendered swatches), buy-outright card, copyright line (Viv, 9 Nov 2026) ----------
   Services view is now 4 x 2: Toolkit, Pulse, Founder Audit, Day hire / Brand pack, Buy it outright, Your voice colours and surfaces, Make it yours (QR). */
@media (min-width:1100px){
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(1){grid-column:1/4!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(2){grid-column:4/7!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(3){grid-column:7/10!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(4){grid-column:10/13!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(5){grid-column:1/4!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(6){grid-column:4/7!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(7){grid-column:7/10!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(8){grid-column:10/13!important;grid-row:2!important}
}
html body .app .board .svc-t .price b{font-size:38px}
html body .app .board .svc-t.cust .gfx{align-items:stretch!important;text-align:left!important;gap:9px!important;justify-content:center!important}
html body .app .board .svc-t .swr{display:flex;flex-direction:column;gap:4px}
html body .app .board .svc-t .swr>span{font-size:10.5px;color:rgba(255,255,255,.8)}
html body .app .board .svc-t .sws{display:flex;flex-wrap:wrap;gap:5px}
html body .app .board .svc-t .sws img{width:26px;height:26px;display:block;object-fit:cover;outline:1px solid rgba(255,255,255,.25);outline-offset:-1px}
html body .app .board .svc-t .vv,html body .app .board .svc-t .cdots{display:flex;align-items:center;gap:6px}
html body .app .board .svc-t .vv img{width:18px;height:18px}
html body .app .board .svc-t .cdots i{width:14px;height:14px;display:block}
html body .app .board .svc-t em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.75);margin-left:2px}
html body .app .foot p.copy{margin:4px 0 0;font-size:10px;line-height:1.4;opacity:.85}
/* 69b. services view in three rows so nothing is cramped: row 1 four services; row 2 brand pack, buy outright, and the make-it-yours card wide (text left, QR right); row 3 the customise strip full width with larger rendered swatches */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board:has(.xgrid.svc){grid-template-rows:repeat(3,minmax(0,1fr))!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(5){grid-column:1/4!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(6){grid-column:4/7!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(8){grid-column:7/13!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(7){grid-column:1/13!important;grid-row:3!important}
  html body .app .board .svc-t.qr .gfx{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lead qr" "caps qr" "sd qr";align-items:center!important;justify-items:start;text-align:left!important;column-gap:18px}
  html body .app .board .svc-t.qr .lead{grid-area:lead}
  html body .app .board .svc-t.qr .caps{grid-area:caps}
  html body .app .board .svc-t.qr .qrbox{grid-area:qr}
  html body .app .board .svc-t.qr .sd:not(.lead){grid-area:sd;font-size:12px}
  html body .app .board .svc-t.cust .gfx{flex-direction:row!important;flex-wrap:wrap;align-items:flex-start!important;justify-content:space-between!important;gap:14px 22px!important}
  html body .app .board .svc-t .sws img{width:40px!important;height:40px!important}
  html body .app .board .svc-t .price b{font-size:34px}
  html body .app .board .svc-t .sd{font-size:12.5px}
}
html body .app .board .svc-t .caps{text-align:left}
/* 69c. same layout with selectors strong enough to beat section 52c (the card visual area was still forced to a centred column) */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board article.card.svc-t.qr>.gfx{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"lead qr" "caps qr" "sd qr";align-content:center!important;align-items:center!important;justify-items:start!important;text-align:left!important;column-gap:22px!important;row-gap:8px!important}
  html body .app[data-mode="board"] .board article.card.svc-t.cust>.gfx{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:space-between!important;gap:20px!important;padding:6px 4px 0!important}
  html body .app[data-mode="board"] .board article.card.svc-t.cust .swr{flex:0 0 auto}
}
/* 69d. customise strip fits on one line: voice and colours stacked in the first column, swatches 42px, everything centred in the strip */
html body .app .board .svc-t .vc{display:flex;flex-direction:column;gap:12px}
@media (min-width:1100px){
  html body .app[data-mode="board"] .board article.card.svc-t.cust>.gfx{align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:0 4px!important}
  html body .app[data-mode="board"] .board article.card.svc-t.cust .sws{gap:4px!important}
  html body .app[data-mode="board"] .board article.card.svc-t.cust .sws img{width:42px!important;height:42px!important}
}
/* 69e. bigger material swatches (Viv, 9 Nov 2026: "material swatch can be made bigger"): metal, glass and neumorphism on one line at 54px, voice and colours on the line below */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board article.card.svc-t.cust>.gfx{flex-wrap:wrap!important;align-content:center!important;justify-content:flex-start!important;column-gap:26px!important;row-gap:12px!important}
  html body .app[data-mode="board"] .board article.card.svc-t.cust .vc{order:9;flex:0 0 100%;flex-direction:row;gap:40px}
  html body .app[data-mode="board"] .board article.card.svc-t.cust .sws img{width:54px!important;height:54px!important}
}
@media (max-width:1099px){html body .app .board .svc-t .sws img{width:48px!important;height:48px!important}}
/* 69f. services as a true bento (Viv, 9 Nov 2026: "rest of cards need not be so big", "remember bento box kanban"):
   row 1 four small service cards; the material swatch tile is the big block (6 columns x 2 rows) at bottom left; brand pack and buy outright sit beside it; the QR card runs under them. */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board:has(.xgrid.svc){grid-template-rows:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr)!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(7){grid-column:1/7!important;grid-row:2/4!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(5){grid-column:7/10!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(6){grid-column:10/13!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(8){grid-column:7/13!important;grid-row:3!important}
  html body .app[data-mode="board"] .board article.card.svc-t.cust>.gfx{flex-wrap:wrap!important;align-content:center!important;justify-content:flex-start!important;column-gap:22px!important;row-gap:16px!important}
  html body .app[data-mode="board"] .board article.card.svc-t.cust .swr:nth-of-type(1){flex:0 0 100%}
  html body .app[data-mode="board"] .board article.card.svc-t.cust .sws img{width:58px!important;height:58px!important}
  html body .app[data-mode="board"] .board article.card.svc-t:not(.cust):not(.qr) .price b{font-size:30px}
  html body .app[data-mode="board"] .board article.card.svc-t:not(.cust):not(.qr)>.gfx{gap:6px!important}
}
/* 69g. fix 69f: the first div in .gfx is the voice/colours wrapper, so the Metal row is div 2. Metal full width, Glass + Neumorphism side by side, voice + colours under them. */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board article.card.svc-t.cust .swr:nth-of-type(1){flex:0 0 auto}
  html body .app[data-mode="board"] .board article.card.svc-t.cust>.gfx>.swr:nth-of-type(2){flex:0 0 100%}
}
/* 69h. Glass + Neumorphism side by side: 2 x (3 x 56 + 2 x 4) + 12 = 364px fits the 372px tile */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board article.card.svc-t.cust>.gfx{column-gap:12px!important}
  html body .app[data-mode="board"] .board article.card.svc-t.cust .sws img{width:56px!important;height:56px!important}
}
/* ---------- 70. services bento v2 (Viv, 9 Nov 2026): "too much data, just price eyebrow on name and 3-4 words", "make all cards smaller except the materials card and the qr code card",
   "the qr code can sit separately", "Intelli Dashboard features listed on a clean easy to scan card", "redesign can be a scroll through carousel premium", "put voice icons on top".
   >=1100: carousel left (6 cols, rows 1-3), features strip under it (row 4); six small service tiles top right (rows 1-2); QR card bottom right (rows 3-4). ---------- */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board:has(.xgrid.svc){grid-template-rows:minmax(0,.62fr) minmax(0,.62fr) minmax(0,1fr) minmax(0,.5fr)!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(1){grid-column:7/9!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(2){grid-column:9/11!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(3){grid-column:11/13!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(4){grid-column:7/9!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(5){grid-column:9/11!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(6){grid-column:11/13!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(7){grid-column:1/7!important;grid-row:1/4!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(8){grid-column:1/7!important;grid-row:4!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(9){grid-column:7/13!important;grid-row:3/5!important}
  /* out of tries: the QR card alone, centred */
  html body .app[data-mode="board"] .board:has(.xgrid.done){grid-template-rows:repeat(4,minmax(0,1fr))!important}
  html body .app[data-mode="board"] .xgrid.done>*{grid-column:4/10!important;grid-row:2/4!important}
}
/* service tiles: price eyebrow, name, one short line; the name link covers the tile */
html body .app .board article.card.svc-t.sv{position:relative}
html body .app .board article.card.svc-t.sv>.gfx,html body .app[data-mode="board"] .board article.card.svc-t.sv>.gfx{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;text-align:left!important;gap:4px!important;padding:0!important;height:100%}
html body .app .board article.card.svc-t.sv .pe{margin:0;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.82)}
html body .app .board article.card.svc-t.sv.star .pe{color:#d2f1ea}
html body .app .board article.card.svc-t.sv h3{margin:0!important;padding:0!important;font-size:17px!important;line-height:1.25!important;font-weight:400!important;position:static!important}
html body .app .board article.card.svc-t.sv h3 a{color:#fff;text-decoration:none}
html body .app .board article.card.svc-t.sv h3 a::after{content:"";position:absolute;inset:0}
html body .app .board article.card.svc-t.sv h3 a:focus-visible{outline:none}
html body .app .board article.card.svc-t.sv h3 a:focus-visible::after{outline:2px solid #fff;outline-offset:-4px}
html body .app .board article.card.svc-t.sv .sw{margin:0;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.78);white-space:nowrap;max-width:100%}
/* features card: one clean list, three columns with a hairline between */
html body .app .board article.card.svc-t.feat>.gfx,html body .app[data-mode="board"] .board article.card.svc-t.feat>.gfx{display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;padding:0!important}
html body .app .board .svc-t.feat .fl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
html body .app .board .svc-t.feat .fl li{font-size:13px;line-height:1.35;color:#fff;padding:2px 14px;border-left:1px solid rgba(255,255,255,.28)}
html body .app .board .svc-t.feat .fl li:first-child{border-left:0;padding-left:0}
@media (max-width:1099px){
  html body .app .board .svc-t.feat .fl{grid-template-columns:1fr}
  html body .app .board .svc-t.feat .fl li{border-left:0;padding:8px 0;border-top:1px solid rgba(255,255,255,.28)}
  html body .app .board .svc-t.feat .fl li:first-child{border-top:0}
}
/* QR card: question and scan line left, a large code right */
html body .app[data-mode="board"] .board article.card.svc-t.qr>.gfx{grid-template-areas:"lead qr" "sd qr"!important;align-content:center!important}
html body .app .board .svc-t.qr .qrbox img{width:170px!important;height:170px!important}
html body .app .board .svc-t.qr .sd.lead{font-size:16px!important;line-height:1.4}
/* materials carousel: voice on top, one surface per slide, arrows and position bars below, colours at the bottom */
html body .app .board article.card.svc-t.cust>.gfx,html body .app[data-mode="board"] .board article.card.svc-t.cust>.gfx{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important;gap:14px!important;padding:2px 0 0!important;min-height:0}
html body .app .board .svc-t .vrow,html body .app .board .svc-t .crow{display:flex;align-items:center;gap:12px}
html body .app .board .svc-t .vrow>span,html body .app .board .svc-t .crow>span{font-size:11px;color:rgba(255,255,255,.8);min-width:52px}
html body .app .board .svc-t .vrow .vv img{width:22px;height:22px}
html body .app .board .svc-t .car{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
html body .app .board .svc-t .car-track{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
html body .app .board .svc-t .car-track::-webkit-scrollbar{display:none}
html body .app .board .svc-t .car-track:focus-visible{outline:2px solid #fff;outline-offset:2px}
html body .app .board .svc-t .car-s{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;gap:12px}
html body .app .board .svc-t .car-s h4{margin:0;font-size:16px;font-weight:400;color:#fff;display:flex;align-items:baseline;gap:10px}
html body .app .board .svc-t .car-s h4 span{font-size:11px;color:rgba(255,255,255,.72)}
html body .app .board .svc-t .mats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
html body .app .board .svc-t .mats li{margin:0;min-width:0}
html body .app .board .svc-t .mats img{width:100%;height:auto;aspect-ratio:1;display:block;object-fit:cover;outline:1px solid rgba(255,255,255,.25);outline-offset:-1px}
html body .app .board .svc-t .mats span{display:block;margin-top:5px;font-size:11px;color:rgba(255,255,255,.82)}
html body .app .board .svc-t .car-nav{display:flex;align-items:center;gap:10px}
html body .app .board .svc-t .car-nav .cb{width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:0;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
html body .app .board .svc-t .car-nav .cb:disabled{opacity:.35;cursor:default}
html body .app .board .svc-t .car-nav .cb:focus-visible,html body .app .board .svc-t .car-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
html body .app .board .svc-t .car-dots{display:flex;gap:4px}
html body .app .board .svc-t .car-dots button{width:28px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
html body .app .board .svc-t .car-dots button::before{content:"";position:absolute;left:2px;right:2px;top:11px;height:2px;background:rgba(255,255,255,.35)}
html body .app .board .svc-t .car-dots button[aria-current="true"]::before{background:#fff;top:10px;height:4px}
/* questions panel: asked questions stay listed, dimmed */
html body .app .chipbtn.asked{opacity:.5}
/* 70b. the right half was too narrow for six tiles (130px, every short line overflowed). Bento v3: row 1 four small service tiles; row 2 brand pack, buy outright, features;
   rows 3-4 the two large blocks, materials carousel and QR card, side by side. */
@media (min-width:1100px){
  html body .app[data-mode="board"] .board:has(.xgrid.svc){grid-template-rows:minmax(0,.5fr) minmax(0,.5fr) minmax(0,1fr) minmax(0,1fr)!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(1){grid-column:1/4!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(2){grid-column:4/7!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(3){grid-column:7/10!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(4){grid-column:10/13!important;grid-row:1!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(5){grid-column:1/4!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(6){grid-column:4/7!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(8){grid-column:7/13!important;grid-row:2!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(7){grid-column:1/7!important;grid-row:3/5!important}
  html body .app[data-mode="board"] .xgrid.svc>*:nth-child(9){grid-column:7/13!important;grid-row:3/5!important}
}
/* 71. QR card redesign (Viv, 9 Nov 2026: "this needs to be redesigned", "so bad", "sits awkwardly on card too"):
   one left-aligned column, question then code then how to use it; round-module code (assets/qr-discovery-call-dots.svg) on a soft frosted tile instead of a stark white box. */
html body .app .board article.card.svc-t.qr>.gfx,html body .app[data-mode="board"] .board article.card.svc-t.qr>.gfx{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;gap:16px!important;grid-template-areas:none!important}
html body .app .board .svc-t.qr .sd.lead{font-size:16px!important;line-height:1.4;max-width:30ch;margin:0}
html body .app .board .svc-t.qr .qrbox{padding:18px!important;background:rgba(246,248,247,.92)!important;outline:1px solid rgba(255,255,255,.75);outline-offset:-1px;box-shadow:0 12px 30px -16px rgba(20,35,45,.5);line-height:0}
html body .app .board .svc-t.qr .qrbox img{width:150px!important;height:150px!important}
html body .app .board .svc-t.qr .qrbox:focus-visible{outline:2px solid #fff;outline-offset:3px}
html body .app .board .svc-t.qr .sd:not(.lead){font-size:12.5px!important;color:rgba(255,255,255,.85);margin:0}
@media (min-width:1100px) and (max-height:760px){html body .app .board .svc-t.qr .qrbox{padding:14px!important}html body .app .board .svc-t.qr .qrbox img{width:124px!important;height:124px!important}}
/* 72. questions panel tabs (Viv, 9 Nov 2026: "questions on the data on Client Zero and questions on AISearch Intelli Voice Dashboard", "when one is shown the other is hidden and vice versa",
   "it should look like it was designed as an Apple dashboard"): a segmented control with a sliding light thumb; corners stay sharp (standing rule). Questions wrap to two lines instead of being cut off. */
html body .app .prompt-menu .qtabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:8px 0 6px;padding:2px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);border-radius:0}
html body .app .prompt-menu .qtabs[hidden]{display:none}
html body .app .prompt-menu .qtabs::before{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(15,23,42,.18),0 3px 8px rgba(15,23,42,.08);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
html body .app .prompt-menu .qtabs[data-on="1"]::before{transform:translateX(100%)}
@media (prefers-reduced-motion:reduce){html body .app .prompt-menu .qtabs::before{transition:none}}
html body .app .prompt-menu .qtabs button{position:relative;z-index:1;height:30px;margin:0;padding:0 8px;border:0;border-radius:0;background:none;font:inherit;font-size:12.5px;letter-spacing:.01em;color:rgba(255,255,255,.88);cursor:pointer;transition:color .2s}
html body .app .prompt-menu .qtabs button[aria-selected="true"]{color:#23323B;font-weight:500}
html body .app .prompt-menu .qtabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:1100px){
  html body .app[data-mode="board"] .stage .prompt-menu .examples{max-height:184px!important}
  html body .app[data-mode="board"] .stage .prompt-menu .chipbtn{white-space:normal!important;text-overflow:clip!important;line-height:1.3!important;min-height:36px!important;padding-top:7px!important;padding-bottom:7px!important;font-size:14px!important;text-align:left!important}
}
/* 72b. the selected tab label was white on the white thumb (an older panel rule forces white text); lighter question weight for a cleaner list */
html body .app .stage .prompt-menu .qtabs button,html body .app[data-mode="board"] .stage .prompt-menu .qtabs button{color:rgba(255,255,255,.9)!important;text-shadow:none!important;font-weight:400!important}
html body .app .stage .prompt-menu .qtabs button[aria-selected="true"],html body .app[data-mode="board"] .stage .prompt-menu .qtabs button[aria-selected="true"]{color:#23323B!important;font-weight:500!important}
@media (min-width:1100px){html body .app[data-mode="board"] .stage .prompt-menu .chipbtn{font-weight:400!important;text-shadow:0 1px 1px rgba(30,42,60,.22)!important}}
/* 73. card focus while Dani reads (Viv, 9 Nov 2026: "can she pull a card into focus and read?"): the tile the answer comes from lifts slightly with a
   bright sharp edge, the others dim. Uses the separate `scale` property so it never fights the GSAP entrance transform; tiles sit clear of the globe column. */
html body .app .board .xgrid.best>article{transition:opacity .4s ease,scale .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
html body .app .board .xgrid.best.focusing>article{opacity:.38!important}
html body .app .board .xgrid.best.focusing>article.focused{opacity:1!important;scale:1.03;z-index:2;outline:1px solid rgba(255,255,255,.9);outline-offset:-1px;box-shadow:0 22px 48px -18px rgba(15,23,42,.45)!important}
@media (prefers-reduced-motion:reduce){html body .app .board .xgrid.best>article{transition:opacity .2s linear}html body .app .board .xgrid.best.focusing>article.focused{scale:1}}
/* 74. next-step cards redesigned (Viv, 9 Nov 2026: "this card is bad", "this too"): no green underlined links. White title (the title link covers a title-only card);
   links one per line in white with a small sage square, underline only on hover; same type sizes as the service tiles. */
html body .app .board #options article.card.opt{position:relative;display:flex!important;flex-direction:column!important;justify-content:space-between!important;align-items:flex-start!important;gap:10px!important}
html body .app .board #options article.card.opt h3{margin:0!important;font-size:15px!important;line-height:1.3!important;font-weight:400!important}
html body .app .board #options article.card.opt h3 a,html body .app .board #options article.card.opt h3{color:#fff!important;text-decoration:none!important}
html body .app .board #options article.card.opt:not(:has(ul)) h3 a::after{content:"";position:absolute;inset:0}
html body .app .board #options article.card.opt h3 a:focus-visible{outline:2px solid #fff;outline-offset:3px}
html body .app .board #options article.card.opt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;width:100%}
html body .app .board #options article.card.opt li{margin:0}
html body .app .board #options article.card.opt li a{display:inline-flex!important;align-items:center;gap:8px;min-height:30px;padding:4px 0!important;font-size:12.5px!important;line-height:1.3;color:rgba(255,255,255,.92)!important;text-decoration:none!important;white-space:nowrap}
html body .app .board #options article.card.opt li a::before{content:"";flex:0 0 6px;width:6px;height:6px;background:#a6d1c0}
html body .app .board #options article.card.opt li a:hover{text-decoration:underline!important;text-underline-offset:3px}
html body .app .board #options article.card.opt li a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- 75. landing footer: copyright and acknowledgement centred (Viv, 10 Nov 2026: "centralise this", with a crop of the two lines) ----------
   Landing screen only. Both lines take the full row and centre; the acknowledgement keeps its 560px measure, centred. Nothing else in the footer moves. */
html body .app[data-mode="home"] .foot p.copy,html body .app[data-mode="home"] .foot .ack{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
html body .app[data-mode="home"] .foot p.copy{flex:0 0 100%!important}

/* ---------- 76. transcript close mark (Viv, 10 Nov 2026: "add white X close on the transcript") ----------
   A thin white X at the end of the transcript strip closes it; the next answer brings the strip back. Sharp square hover, white focus ring. */
html body .app .transcript .tclose{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-4px -2px -4px 0;padding:0;border:0;border-radius:0;background:none;color:#fff!important;cursor:pointer}
html body .app .transcript .tclose:hover{background:rgba(255,255,255,.18)}
html body .app .transcript .tclose:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* ---------- 77. landing footer: credit line centred on the page (Viv, 10 Nov 2026: "also centralise", with a crop of "Designed and built by Viveka Mohan Das | AISearch Global | Sydney | Australia"; "when you centralise that will give ribbon space to go down") ----------
   900px and wider only (narrower, a centred line would run into "Data & voice privacy"). The line stays in its row; auto margins centre it in the
   space after the privacy link and a fixed 90px pull to the left puts its middle on the page's middle (measured: within 1px at 900 to 1920 wide). */
@media (min-width:900px){html body .app[data-mode="home"] .foot #credit{margin-left:auto!important;margin-right:auto!important;position:relative!important;left:-90px!important}}
/* 77b. the credit splits after "Viveka Mohan Das" (Viv, 10 Nov 2026: "you can split on one line", with a crop of "Designed and built by Viveka Mohan Das"): two centred lines, the
   separator before "AISearch Global" is hidden and that part starts the second line. Phones already split it (section at max-width 700px). */
@media (min-width:701px){
  html body .app[data-mode="home"] .foot #credit{text-align:center!important}
  html body .app[data-mode="home"] .foot #credit .cr-sep{display:none!important}
  html body .app[data-mode="home"] .foot #credit .cr-sep + span{display:block!important}
}

/* ---------- 78. phone ribbon: clear of the globe, mic and all text, and it no longer shifts (Viv, 10 Nov 2026: "ribbon shifts position on phone mobile ui touching
   the globe", "the globe and surroundings remain not touched", "shift it down so entry is from middle and steering clear of the text", "can go behind the transcript") ----------
   Phones only (700px and narrower). The ribbons scroll with the page instead of staying fixed to the screen, so they never slide over the globe while scrolling.
   The upper ribbon (same image, same metal) enters from the left edge just below the greeting, the middle of the page, sweeps across behind the glass panels and
   leaves at the right edge. Found by measurement: no pixel within 6px of any title, greeting or footer text, or within 10px of the globe or the mic, at
   320, 360, 375, 390, 412 and 430 wide (14 degrees), and 431 to 700 wide (flatter, 0 degrees). The globe, the mic, the text and the lower ribbon are not changed. */
@media (max-width:700px){
  html body .ribbons{position:absolute!important;inset:0!important}
  html body .ribbons .ribbon-up{left:-15vw!important;top:568px!important;width:120vw!important;right:auto!important;bottom:auto!important;transform-origin:54.98% 38.9%!important;transform:rotate(14deg) scaleY(-1)!important}
}
@media (min-width:431px) and (max-width:700px){
  html body .ribbons .ribbon-up{top:522px!important;transform:rotate(0deg) scaleY(-1)!important}
}
/* 78b. lower phone ribbon off the footer text (Viv, 10 Nov 2026: "Yes, move it", "move it a bit up"): same image, turned 16 degrees, in the text-free band
   between the panels and the footer; both ends run off the screen; no pixel within 6px of any text or within 10px of the globe or mic at 320 to 700 wide. */
@media (max-width:700px){
  html body .ribbons .ribbon-low{left:-5vw!important;top:480px!important;width:120vw!important;right:auto!important;bottom:auto!important;transform-origin:50% 50%!important;transform:rotate(16deg)!important}
}