/* ==========================================================================
   DeltaGBS.io — design system
   Display: Chakra Petch  |  Body: IBM Plex Sans  |  Data/mono: IBM Plex Mono
   ========================================================================== */

:root{
  /* ---- surfaces ---- */
  --bg:        #050805;
  --surface:   #0D1310;
  --surface-2: #131C17;
  --surface-3: #1A2620;
  --line:        rgba(237,239,233,.09);
  --line-strong: rgba(237,239,233,.18);

  /* ---- text ---- */
  --text:       #EDEFE9;
  --text-dim:   #93A099;
  /* was #5C6A62, which measured 3.54:1 on --bg and only 2.75:1 on
     --surface-3 — every kicker, credit and label on the site sat below the
     4.5:1 that normal-size text needs. #7F8D85 is the smallest uniform lift
     that clears AA on all four surfaces (5.80 / 5.41 / 5.02 / 4.51) while
     keeping the same hue, so the hierarchy is unchanged. */
  --text-faint: #7F8D85;

  /* ---- accents ----
     NOTE: --copper/--cyan now hold the REAL brand colors (verified by
     sampling actual pixels from the company logo), not literal copper/cyan.
     Keeping the original names rather than renaming everywhere they're
     used (~100+ places via var()) — the token VALUES are what matter for
     rendering. --copper = brand green (from the logo's recycling arrows),
     --cyan = brand blue (from the logo's globe). Do not confuse with the
     unrelated --green/--green-bright below, which is a distinct accent
     used only for the word-counter tool card. */
  --copper:        #4F9501;
  --copper-bright: #88FF05;
  --cyan:          #3B649B;
  --cyan-bright:   #7DA3D9;
  --violet:        #9B6BFF;
  --violet-bright: #C3AAFF;
  --warn:          #E2725B;
  --magenta:        #E24C9E;
  --magenta-bright: #F27EBE;
  --green:          #4CC97D;
  --green-bright:   #7EE0A3;
  --gold:           #E0B04A;
  --gold-bright:    #F2CA6E;

  /* ---- gradients ---- */
  --grad-brand: linear-gradient(115deg, var(--copper) 0%, var(--cyan) 100%);
  --grad-ai:    linear-gradient(115deg, var(--cyan) 0%, var(--violet) 100%);
  --grad-tri:   linear-gradient(90deg, var(--copper-bright), var(--cyan-bright), var(--violet-bright), var(--copper-bright));

  /* ---- type ---- */
  --f-display: 'Chakra Petch', sans-serif;
  --f-body:    'IBM Plex Sans', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --fs-hero: clamp(2.6rem, 1.1rem + 5.6vw, 5.3rem);
  --fs-h1:   clamp(2rem, 1.1rem + 3vw, 3.1rem);
  --fs-h2:   clamp(1.55rem, 1.05rem + 1.7vw, 2.25rem);
  --fs-h3:   1.2rem;

  /* ---- shape / rhythm ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --maxw: 1240px;

  --ease: cubic-bezier(.22,.9,.32,1);
}

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
/* The canvas colour. Android Chrome paints not-yet-rasterised tiles with the
   root's background-COLOR; body's radial-gradient shorthand had reset that to
   transparent, so fast scrolls flashed white. html carries the colour
   explicitly, body keeps the gradient on top, and color-scheme makes even the
   pre-CSS default canvas dark. The light theme overrides all three. */
html{ scroll-behavior:smooth; background-color:var(--bg, #05070A); color-scheme:dark; }
html[data-theme="light"]{ background-color:#F4F6F2; color-scheme:light; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 15% -10%, rgba(79,149,1,.16), transparent 55%),
    radial-gradient(ellipse 80% 60% at 105% 15%, rgba(59,100,155,.13), transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(155,107,255,.09), transparent 55%);
  animation:ambientHue 42s linear infinite;
}
@keyframes ambientHue{
  0%{ filter:hue-rotate(0deg) saturate(1); }
  50%{ filter:hue-rotate(55deg) saturate(1.2); }
  100%{ filter:hue-rotate(0deg) saturate(1); }
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; color:var(--text); }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.12; margin:0; letter-spacing:.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--cyan); color:#04120F; }
:focus-visible{ outline:2px solid var(--cyan-bright); outline-offset:3px; border-radius:4px; }

.mono{ font-family:var(--f-mono); }
.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(3.5rem,3rem + 3vw,6.5rem); }
.section-head{ max-width:640px; margin-bottom:clamp(2rem,1.6rem + 2vw,3.25rem); }
.section-label{
  display:inline-block; font-family:var(--f-mono); font-size:.76rem;
  color:var(--text-dim); letter-spacing:.14em; text-transform:uppercase; margin-bottom:.75rem;
}
.section-label::before{ content:'— '; color:var(--copper); }
h2.section-title{ font-size:var(--fs-h2); max-width:20ch; letter-spacing:-0.01em; }
.section-sub{ margin-top:.9rem; color:var(--text-dim); max-width:56ch; font-size:1.05rem; }

.text-grad{
  background:var(--grad-tri); background-size:300% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:gradientFlow 9s linear infinite;
}
.text-grad.ai{ background:var(--grad-ai); background-size:100% auto; -webkit-background-clip:text; background-clip:text; animation:none; }
@keyframes gradientFlow{ to{ background-position:-300% center; } }

/* ==========================================================================
   Reveal (single, restrained scroll-triggered fade — not per-card, per-section)
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   Ticker — removed (see chat: top banner deleted per request)
   ========================================================================== */

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem var(--gutter);
  background:rgba(5,8,5,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand svg{ height:30px; width:auto; }
.brand-mark{ flex:none; }   /* geometry: see the v11 lockup block */
.brand-word{ font-family:var(--f-display); font-size:1.05rem; letter-spacing:.01em; }
.brand-word .suffix{ color:var(--violet-bright); }

.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  font-size:.93rem; color:var(--text-dim); position:relative; padding:.25rem 0;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--grad-brand); transition:right .3s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ right:0; }
.nav-links a.active{ color:var(--text); }
.nav-links a.active::after{ right:0; }

.nav-actions{ display:flex; align-items:center; gap:.9rem; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:.4rem .55rem; }
.nav-toggle span{ display:block; width:18px; height:1.5px; background:var(--text); margin:3px 0; }

@media (max-width:880px){
  .nav-links{
    position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:flex-start;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:1.5rem var(--gutter) 2rem; gap:1.1rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:block; }
  .nav-actions .btn span.long{ display:none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.3rem; border-radius:999px; font-size:.92rem; font-weight:500;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--grad-brand); color:#08110D; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(79,149,1,.55); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--text); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan-bright); transform:translateY(-2px); }
.btn-ai{ background:var(--grad-ai); color:#0B0A14; }
.btn-ai:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(155,107,255,.55); }
.btn-sm{ padding:.5rem .95rem; font-size:.82rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:min(92vh, 880px); display:flex; align-items:center;
  padding-block:clamp(3rem,2.5rem + 4vw,5.5rem); overflow:hidden; }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:1; }
/* v9 — hero scrim deleted: the globe/matrix canvas renders unshaded */
.hero::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--cyan-bright) 45%, var(--violet-bright) 55%, transparent);
  box-shadow:0 0 16px 3px rgba(107,240,223,.5);
  animation:scanSweep 8s ease-in-out infinite;
}
@keyframes scanSweep{
  0%{ top:-2px; opacity:0; } 6%{ opacity:.65; } 48%{ opacity:.65; } 54%{ top:100%; opacity:0; } 100%{ top:100%; opacity:0; }
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:860px; margin-inline:auto; text-align:center; }
.hero h1{ font-size:var(--fs-hero); letter-spacing:-0.02em; text-shadow:0 2px 28px rgba(2,4,2,.6); }
.hero-sub{ margin-top:1.3rem; font-size:1.14rem; color:var(--text-dim); max-width:52ch; margin-inline:auto; text-shadow:0 1px 18px rgba(2,4,2,.65); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; justify-content:center; }

.hero-stats{
  position:relative; z-index:2; margin-top:clamp(2.2rem,1.8rem + 2.6vw,3.4rem);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; text-align:center;
}
.hero-stat{
  min-width:150px; padding:.85rem 1.35rem; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--line) 80%, var(--cyan-bright) 20%);
  background:color-mix(in srgb, var(--bg) 46%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-stat:hover{ transform:translateY(-4px); border-color:var(--cyan-bright); box-shadow:0 12px 34px rgba(107,240,223,.16); }
.hero-stat b{ display:block; font-family:var(--f-mono); font-size:1.5rem; color:var(--text); }
.hero-stat span{ font-size:.8rem; color:var(--text-faint); }

.page-hero{ padding-block:clamp(2.75rem,2.4rem + 2.4vw,4.5rem) clamp(2rem,1.8rem + 1vw,3rem); position:relative; overflow:hidden; }
.page-hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.4; }
#heroGlobe{ opacity:.85; }
.page-hero::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(65% 60% at 15% 10%, rgba(5,8,5,0) 0%, var(--bg) 92%); }
.page-hero::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--copper-bright) 45%, var(--cyan-bright) 55%, transparent);
  box-shadow:0 0 14px 2px rgba(136,255,5,.45);
  animation:scanSweep 9s ease-in-out infinite;
}
.page-hero.ai-tone::before{
  background:linear-gradient(90deg, transparent, var(--cyan-bright) 45%, var(--violet-bright) 55%, transparent);
  box-shadow:0 0 16px 3px rgba(195,170,255,.5);
}
.page-hero-inner{ position:relative; z-index:2; max-width:680px; }
.page-hero h1{ font-size:var(--fs-h1); letter-spacing:-0.015em; }
.page-hero p{ margin-top:1rem; color:var(--text-dim); font-size:1.06rem; max-width:54ch; }
.page-hero.ai-tone canvas{ opacity:.5; }

/* ==========================================================================
   Panel / destination cards (home — three ways in)
   ========================================================================== */
.paths{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
[data-parallax]{ will-change:transform; }
@media (max-width:880px){ .paths{ grid-template-columns:1fr; } }
.path-card{
  position:relative; padding:1.9rem 1.7rem 2.1rem; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line); overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.path-card::before{
  content:''; position:absolute; top:0; left:-65%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(107,240,223,.14) 45%, rgba(195,170,255,.2) 55%, transparent);
  transform:skewX(-16deg); transition:left .8s var(--ease); pointer-events:none;
}
.path-card:hover::before{ left:130%; }
.path-card:hover{ transform:translateY(-5px); }
.path-card .glow{
  position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(50px);
  opacity:.28; top:-90px; right:-90px; transition:opacity .35s var(--ease);
}
.path-card:hover .glow{ opacity:.48; }
.path-card.tools .glow{ background:var(--copper); }
.path-card.ai .glow{ background:var(--violet); }
.path-card.portal .glow{ background:var(--cyan); }
.path-card.tools:hover{ border-color:rgba(79,149,1,.45); }
.path-card.ai:hover{ border-color:rgba(155,107,255,.45); }
.path-card.portal:hover{ border-color:rgba(59,100,155,.45); }
.path-icon{ width:42px; height:42px; margin-bottom:1.3rem; position:relative; z-index:1; }
.path-card h3{ font-size:1.2rem; position:relative; z-index:1; }
.path-card p{ margin-top:.6rem; color:var(--text-dim); font-size:.94rem; position:relative; z-index:1; }
.path-card .tag{
  display:inline-block; margin-top:1.1rem; font-family:var(--f-mono); font-size:.72rem;
  padding:.28rem .6rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-dim); position:relative; z-index:1;
}
.path-card .go{ margin-top:1.3rem; display:flex; align-items:center; gap:.4rem; font-size:.88rem; font-weight:500; position:relative; z-index:1; }
.path-card.tools .go{ color:var(--copper-bright); }
.path-card.ai .go{ color:var(--violet-bright); }
.path-card.portal .go{ color:var(--cyan-bright); }
.path-card .go svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.path-card:hover .go svg{ transform:translateX(4px); }

/* ==========================================================================
   Sliding card rows (divisions / industries) — drag or scroll, snap
   ========================================================================== */
.slider-wrap{ position:relative; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); }
.slider{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:1rem; cursor:grab; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.slider:active{ cursor:grabbing; }
.slider::-webkit-scrollbar{ height:6px; }
.slider::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; }
.slide-card{
  position:relative; flex:0 0 auto; width:250px; scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.4rem 1.3rem; transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .45s var(--ease);
  user-select:none; overflow:hidden;
}
.slide-card::before{
  content:''; position:absolute; top:0; left:-65%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(107,240,223,.13) 45%, rgba(195,170,255,.18) 55%, transparent);
  transform:skewX(-16deg); transition:left .75s var(--ease); pointer-events:none;
}
.slide-card:hover::before{ left:130%; }
.slide-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); }
.slide-card .idx{ font-family:var(--f-mono); font-size:.72rem; color:var(--text-faint); }
.slide-card h4{ margin-top:.7rem; font-size:1.02rem; font-family:var(--f-display); font-weight:600; }
.slide-card p{ margin-top:.5rem; font-size:.85rem; color:var(--text-dim); }
.slide-card.current{ border-color:var(--cyan); box-shadow:0 0 0 1px rgba(59,100,155,.25) inset; }
.slide-card.current h4{ color:var(--cyan-bright); }
.slide-hint{ display:flex; align-items:center; gap:.5rem; margin-top:.6rem; font-size:.78rem; color:var(--text-faint); }
.slide-hint svg{ width:14px; height:14px; }

/* industry select cards (AI page) — button semantics */
.industry-card{ text-align:left; border:1px solid var(--line); background:var(--surface); }
.industry-card.active{ border-color:var(--violet); box-shadow:0 0 0 1px rgba(155,107,255,.3) inset, 0 0 22px -4px rgba(155,107,255,.5); animation:cardGlowPulse 3s ease-in-out infinite; }
@keyframes cardGlowPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(155,107,255,.3) inset, 0 0 18px -6px rgba(155,107,255,.45); }
  50%{ box-shadow:0 0 0 1px rgba(155,107,255,.4) inset, 0 0 26px -4px rgba(155,107,255,.7); }
}
.industry-card.active h4{ color:var(--violet-bright); }
.industry-card .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-faint); display:inline-block; margin-right:.4rem; }
.industry-card.active .dot{ background:var(--violet); box-shadow:0 0 8px var(--violet); }

/* ==========================================================================
   Tool workbench
   ========================================================================== */
.tools-unified-block{ background:none; border:none; padding:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.tool-tabs{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem;
  margin-bottom:2rem;
}
.tool-tab, .conv-tab{
  position:relative;
  padding:1.3rem 1rem; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--text-dim); font-size:.88rem; display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  box-shadow:0 2px 0 0 rgba(0,0,0,.3), inset 0 1px 0 0 rgba(255,255,255,.05);
}
.tool-tab svg{ width:22px; height:22px; }
.tool-tab:hover, .conv-tab:hover{
  color:var(--text); border-color:var(--cyan); transform:translateY(-3px);
  box-shadow:0 8px 24px -8px rgba(59,100,155,.4), inset 0 1px 0 0 rgba(255,255,255,.08);
}
.tool-tab:active, .conv-tab:active{ transform:translateY(0); }
.tool-tab.active, .conv-tab.active{
  background:var(--grad-brand); color:#08110D; border-color:transparent;
  box-shadow:0 8px 24px -6px rgba(79,149,1,.55), inset 0 1px 0 0 rgba(255,255,255,.25);
}
.conv-tab{ flex-direction:row; padding:.5rem .9rem; font-family:var(--f-mono); font-size:.78rem; }
.conv-tabs-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.4rem; }
.workbench{
  background:linear-gradient(180deg, rgba(20,28,20,.55), rgba(8,12,8,.65));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,1.3rem + 1.5vw,2.5rem); position:relative;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.7), inset 0 1px 0 0 rgba(255,255,255,.05);
}
.workbench-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.workbench-head h2{ font-size:1.15rem; font-family:var(--f-display); font-weight:600; }
.workbench-head .credit{ font-family:var(--f-mono); font-size:.72rem; color:var(--text-faint); }
.tool-panel{ display:none; animation:panelIn .35s var(--ease); }
.tool-panel.active{ display:block; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.field-row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; }
.field{ flex:1 1 200px; display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.78rem; color:var(--text-dim); font-family:var(--f-mono); }
.field input, .field select, .field textarea{
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:.75rem .9rem; color:var(--text); transition:border-color .25s var(--ease); font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--cyan); }
.field textarea{ min-height:90px; resize:vertical; }
.swap-btn{
  width:44px; height:44px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; flex:none; transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.swap-btn:hover{ transform:rotate(180deg); border-color:var(--cyan); }
.swap-btn svg{ width:18px; height:18px; }
.result-line{
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px dashed var(--line-strong);
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}
.result-line .val{ font-family:var(--f-mono); font-size:1.7rem; color:var(--cyan-bright); }
.result-line .lbl{ color:var(--text-faint); font-size:.85rem; }

.city-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin-top:1.5rem; }
.city-card{ position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.1rem 1.2rem; }
.city-remove{
  position:absolute; top:.5rem; right:.6rem; background:none; border:none; color:var(--text-faint);
  font-size:1.1rem; line-height:1; cursor:pointer; padding:.2rem .4rem;
}
.city-remove:hover{ color:var(--warn); }
.clock-search-status{ font-size:.8rem; color:var(--text-faint); margin:.6rem 0 1rem; min-height:1.2em; }
.city-card .city{ font-size:.92rem; color:var(--text-dim); }
.city-card .time{ font-family:var(--f-mono); font-size:1.55rem; margin-top:.4rem; color:var(--text); }
.city-card .date{ font-size:.76rem; color:var(--text-faint); margin-top:.25rem; }

.weather-search{ display:flex; gap:.7rem; margin-bottom:1.6rem; }
.weather-search input{ flex:1; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:.75rem .9rem; }
.weather-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.weather-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.3rem; }
.weather-card .place{ font-size:.92rem; color:var(--text-dim); display:flex; justify-content:space-between; }
.weather-card .temp{ font-family:var(--f-mono); font-size:2.1rem; margin-top:.5rem; }
.weather-card .cond{ font-size:.85rem; color:var(--text-dim); margin-top:.2rem; }
.weather-card .meta{ display:flex; gap:1rem; margin-top:.8rem; font-size:.76rem; color:var(--text-faint); font-family:var(--f-mono); }
.weather-icon{ width:34px; height:34px; }

.compass-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; padding:1rem 0 .5rem; }
.compass-face{ width:220px; height:220px; position:relative; }
.compass-heading{ font-family:var(--f-mono); font-size:1.7rem; }
.compass-note{ font-size:.85rem; color:var(--text-faint); text-align:center; max-width:34ch; }

.studio-toolbar{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1rem; align-items:center; }
.studio-toolbar input[type=color]{ width:38px; height:38px; border:none; background:none; padding:0; border-radius:var(--radius-sm); overflow:hidden; }
.studio-toolbar input[type=range]{ width:110px; accent-color:var(--cyan); }
.shape-btn{ width:38px; height:38px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; }
.shape-btn.active{ border-color:var(--cyan); }
.shape-btn svg{ width:17px; height:17px; }
#studioCanvas{ width:100%; aspect-ratio:16/8; background:#0A0F0C; border-radius:var(--radius-md); border:1px solid var(--line-strong); touch-action:none; }

/* ---- New tools: password, JSON, QR, color, freight, word count ---- */
.pw-row{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; }
.pw-output{
  flex:1; font-family:var(--f-mono); font-size:1.15rem; letter-spacing:.02em; padding:.9rem 1.1rem;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  color:var(--green-bright); word-break:break-all; min-height:1.4em;
}
.pw-options{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; margin-bottom:1.2rem; }
.pw-check{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--text-dim); }
.pw-check input{ accent-color:var(--cyan); width:16px; height:16px; }
.pw-slider-row{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.pw-slider-row input[type=range]{ flex:1; accent-color:var(--cyan); }
.pw-meter{ height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-top:1rem; }
.pw-meter i{ display:block; height:100%; width:0%; border-radius:99px; transition:width .3s var(--ease), background .3s var(--ease); }
.pw-meter-label{ font-size:.8rem; color:var(--text-faint); margin-top:.5rem; }

.json-io{ display:grid; gap:1rem; }
@media (min-width:760px){ .json-io{ grid-template-columns:1fr 1fr; } }
.json-io textarea, .json-io pre{
  width:100%; min-height:260px; background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:.9rem 1rem; color:var(--text); font-family:var(--f-mono);
  font-size:.85rem; line-height:1.55; resize:vertical; overflow:auto; white-space:pre-wrap; word-break:break-word;
}
.json-io textarea:focus{ border-color:var(--cyan); }
.json-actions{ display:flex; gap:.7rem; margin:1rem 0; flex-wrap:wrap; }
.json-status{ font-size:.85rem; font-family:var(--f-mono); margin-bottom:.8rem; min-height:1.2em; }
.json-status.ok{ color:var(--green-bright); }
.json-status.err{ color:var(--warn); }

.qr-layout{ display:flex; flex-wrap:wrap; gap:1.8rem; align-items:flex-start; }
.qr-form{ flex:1; min-width:240px; }
.qr-form select, .qr-form input{ width:100%; margin-top:.4rem; }
.qr-preview{
  width:210px; height:210px; border-radius:var(--radius-md); background:#fff; padding:14px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px var(--line-strong), 0 0 30px -6px rgba(107,240,223,.35);
}
.qr-preview img{ width:100%; height:100%; }
.qr-preview .empty{ font-family:var(--f-mono); font-size:.78rem; color:#6B6B6B; text-align:center; }  /* #8a8a8a measured 3.45:1 on the white QR canvas */

.color-layout{ display:flex; flex-wrap:wrap; gap:2rem; }
.color-io{ display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.color-io input[type=color]{ width:56px; height:56px; border:none; background:none; padding:0; border-radius:var(--radius-sm); cursor:pointer; }
.color-values{ display:flex; flex-direction:column; gap:.3rem; font-family:var(--f-mono); font-size:.88rem; color:var(--text-dim); }
.swatch-row{ display:flex; gap:.5rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.swatch{ width:52px; height:52px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); cursor:pointer; position:relative; }
.contrast-grid{ display:flex; gap:1rem; flex-wrap:wrap; }
.contrast-card{ flex:1; min-width:150px; border-radius:var(--radius-sm); padding:1.1rem; border:1px solid var(--line-strong); text-align:center; }
.contrast-card .ratio{ font-family:var(--f-mono); font-size:1.3rem; margin-top:.4rem; }
.contrast-card .badge{ display:inline-block; margin-top:.5rem; font-size:.75rem; font-family:var(--f-mono); padding:.2rem .6rem; border-radius:99px; }
.badge.pass{ background:rgba(76,201,125,.18); color:var(--green-bright); }
.badge.fail{ background:rgba(226,114,91,.18); color:var(--warn); }

.freight-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin-bottom:1.2rem; }
.freight-grid .field label{ font-size:.78rem; }
.freight-container-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.freight-results{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.freight-card{ background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; }
.freight-card .lbl{ font-size:.76rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
.freight-card .val{ font-family:var(--f-mono); font-size:1.35rem; color:var(--cyan-bright); margin-top:.3rem; }
.freight-note{ font-size:.8rem; color:var(--text-faint); margin-top:1.2rem; }

.count-textarea{
  width:100%; min-height:220px; background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:1rem 1.1rem; color:var(--text); font-family:var(--f-body);
  font-size:.98rem; line-height:1.6; resize:vertical; margin-bottom:1.2rem;
}
.count-textarea:focus{ border-color:var(--cyan); }
.count-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1rem; }
.count-card{ background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:1rem 1.1rem; text-align:center; }
.count-card .val{ font-family:var(--f-mono); font-size:1.5rem; color:var(--magenta-bright); }
.count-card .lbl{ font-size:.76rem; color:var(--text-faint); margin-top:.2rem; }

.hash-row{ display:flex; align-items:center; gap:.8rem; padding:.8rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.hash-row:last-child{ border-bottom:none; }
.hash-algo{ width:76px; flex-shrink:0; font-size:.78rem; color:var(--cyan-bright); }
.hash-value{ flex:1; font-size:.78rem; color:var(--text-dim); word-break:break-all; min-width:200px; }
.hash-copy{ flex-shrink:0; font-family:var(--f-mono); font-size:.72rem; padding:.35rem .75rem; border-radius:99px; background:var(--surface-3); border:1px solid var(--line-strong); color:var(--text-dim); cursor:pointer; transition:all .2s var(--ease); }
.hash-copy:hover{ color:var(--text); border-color:var(--cyan); }
.hash-empty{ color:var(--text-faint); font-size:.9rem; padding:.5rem 0; }

.pdf-textarea{
  width:100%; min-height:260px; background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:1rem 1.1rem; color:var(--text); font-family:var(--f-body);
  font-size:.98rem; line-height:1.6; resize:vertical; margin-top:.8rem;
}
.pdf-textarea:focus{ border-color:var(--cyan); }

.img-layout{ display:flex; gap:1.8rem; flex-wrap:wrap; }
.img-drop{
  flex:1; min-width:220px; aspect-ratio:4/3; border:2px dashed var(--line-strong); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;
  background:var(--surface-2); transition:border-color .25s var(--ease), background .25s var(--ease);
}
.img-drop:hover{ border-color:var(--text-dim); }
.img-drop.drag{ border-color:var(--cyan); background:rgba(59,100,155,.07); }
.img-drop img{ width:100%; height:100%; object-fit:contain; }
.img-preview-empty{ color:var(--text-faint); font-size:.9rem; text-align:center; padding:1rem; }
.img-controls{ flex:1; min-width:220px; }
.img-quality-row{ display:flex; align-items:center; gap:.8rem; margin-top:1rem; }
.img-quality-row input[type=range]{ flex:1; accent-color:var(--cyan); }
.img-size-info{ font-size:.82rem; color:var(--text-faint); margin-top:1rem; }

.style-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.1rem; }
.style-card{
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  overflow:hidden; transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.style-card:hover{ transform:translateY(-4px); border-color:var(--cyan); }
.style-swatch{ height:78px; display:flex; }
.style-swatch i{ flex:1; }
.style-card-body{ padding:1rem 1.1rem 1.2rem; }
.style-card h4{ font-family:var(--f-display); font-size:1.02rem; margin-bottom:.15rem; }
.style-era{ font-size:.72rem; color:var(--text-faint); margin-bottom:.6rem; font-family:var(--f-mono); }
.style-card p{ font-size:.86rem; color:var(--text-dim); line-height:1.5; }
.style-card .tag-row{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.8rem; }
.style-card .tag-row span{ font-family:var(--f-mono); font-size:.68rem; padding:.22rem .55rem; border-radius:99px; background:var(--surface-3); color:var(--text-dim); }

.archiver-drop{
  border:2px dashed var(--line-strong); border-radius:var(--radius-md); padding:2rem 1.5rem;
  text-align:center; color:var(--text-dim); cursor:pointer; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.archiver-drop:hover{ border-color:var(--text-dim); }
.archiver-drop.drag{ border-color:var(--cyan); background:rgba(59,100,155,.07); }
.archiver-list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.archiver-empty{ color:var(--text-faint); font-size:.88rem; }
.archiver-item{
  display:flex; align-items:center; gap:.8rem; padding:.6rem .9rem; background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:.88rem;
}
.archiver-item span:first-child{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archiver-size{ color:var(--text-faint); font-size:.78rem; }
.archiver-remove{ background:none; border:none; color:var(--text-faint); font-size:1.1rem; cursor:pointer; line-height:1; padding:.1rem .3rem; }
.archiver-remove:hover{ color:var(--warn); }
.archiver-actions{ display:flex; gap:.7rem; align-items:center; margin-top:1.2rem; flex-wrap:wrap; }
.archiver-actions input[type=text]{ flex:1; min-width:160px; }

.hash-results{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.hash-row{
  display:flex; flex-direction:column; gap:.3rem; padding:.9rem 1rem; background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
}
.hash-algo{ font-size:.74rem; color:var(--cyan-bright); text-transform:uppercase; letter-spacing:.04em; }
.hash-value{ font-size:.82rem; word-break:break-all; color:var(--text); }

/* ==========================================================================
   AI chat
   ========================================================================== */
.chat-shell{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.chat-topbar{ display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line); }
.chat-avatar{ width:34px; height:34px; border-radius:9px; background:var(--grad-ai); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; padding:2px; }
.chat-avatar img{ width:100%; height:100%; border-radius:6px; object-fit:cover; }
.chat-topbar .who{ font-size:.95rem; }
.chat-topbar .status{ font-size:.76rem; color:var(--text-faint); display:flex; align-items:center; gap:.4rem; }
.chat-topbar .status i{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan); display:inline-block; }
.chat-log{ height:min(50vh,440px); overflow-y:auto; padding:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.msg{ max-width:78%; padding:.8rem 1rem; border-radius:14px; font-size:.94rem; line-height:1.55; }
.msg.assistant{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg.user{ align-self:flex-end; background:var(--grad-ai); color:#0B0A14; border-bottom-right-radius:4px; }
.msg.error{ align-self:flex-start; background:rgba(226,114,91,.1); border:1px solid rgba(226,114,91,.4); color:var(--text); }
.typing{ align-self:flex-start; display:flex; gap:4px; padding:.9rem 1.1rem; background:var(--surface-2); border-radius:14px; border-bottom-left-radius:4px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:typing-bounce 1.1s infinite ease-in-out; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} }
.chat-input{ display:flex; gap:.7rem; padding:1rem 1.2rem; border-top:1px solid var(--line); }
.chat-input textarea{
  flex:1; resize:none; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:.75rem 1rem; color:var(--text); max-height:120px; line-height:1.5;
}
.chat-input textarea:focus{ border-color:var(--violet); }
.chat-send{ width:46px; height:46px; border-radius:var(--radius-md); background:var(--grad-ai); border:none; display:flex; align-items:center; justify-content:center; flex:none; }
.chat-send svg{ width:19px; height:19px; color:#0B0A14; }
@keyframes fabPulse{
  0%,100%{ box-shadow:0 12px 30px -8px rgba(155,107,255,.55), 0 0 0 0 rgba(155,107,255,.35); }
  50%{ box-shadow:0 12px 30px -8px rgba(155,107,255,.65), 0 0 0 9px rgba(155,107,255,0); }
}

/* ==========================================================================
   Misc content blocks (about / contact)
   ========================================================================== */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,1.5rem + 3vw,4.5rem); align-items:start; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }

.service-list{ border-top:1px solid var(--line); }
.service-row{ display:flex; justify-content:space-between; gap:1.5rem; padding:1.3rem 0; border-bottom:1px solid var(--line); }
.service-row .pkg{ font-family:var(--f-mono); font-size:.74rem; color:var(--text-faint); white-space:nowrap; padding-top:.2rem; }
.service-row h4{ font-size:1.02rem; font-weight:600; font-family:var(--f-body); }
.service-row .items{ margin-top:.4rem; color:var(--text-dim); font-size:.88rem; }

.status-row{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.status-row:first-child{ border-top:1px solid var(--line); }
.status-dot{ width:10px; height:10px; border-radius:50%; margin-top:.35rem; flex:none; }
.status-dot.live{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.status-dot.soon{ background:var(--text-faint); }
.status-row h4{ font-size:.98rem; font-family:var(--f-body); font-weight:600; }
.status-row p{ font-size:.86rem; color:var(--text-dim); margin-top:.25rem; }
.status-tag{ font-family:var(--f-mono); font-size:.7rem; padding:.2rem .55rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-faint); white-space:nowrap; }
.status-tag.live{ color:var(--cyan-bright); border-color:rgba(59,100,155,.4); }

.info-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; }
.info-row{ display:flex; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.info-row:last-child{ border-bottom:none; }
.info-row svg{ width:18px; height:18px; color:var(--copper-bright); flex:none; margin-top:.15rem; }
.info-row .lbl{ font-size:.74rem; color:var(--text-faint); font-family:var(--f-mono); }
.info-row .val{ font-size:.95rem; margin-top:.15rem; }
.social-row{ display:flex; gap:.7rem; margin-top:1.4rem; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.social-row a:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.social-row svg{ width:16px; height:16px; }

.contact-form{ display:flex; flex-direction:column; gap:1.1rem; }
.form-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.form-field{ flex:1 1 200px; display:flex; flex-direction:column; gap:.45rem; }
.form-field label{ font-size:.8rem; color:var(--text-dim); }
.form-field input, .form-field textarea, .form-field select{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:.85rem 1rem; color:var(--text);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--cyan); }
.form-note{ font-size:.8rem; color:var(--text-faint); }

.map-frame{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:1.5rem; filter:grayscale(.4) invert(.92) contrast(.9); }
.map-frame iframe{ width:100%; height:260px; border:0; display:block; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer{ border-top:1px solid var(--line); padding-block:3.5rem 2rem; margin-top:2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
@media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
/* .foot-brand .brand-mark geometry: see the v11 lockup block */
.foot-brand p{ margin-top:1rem; color:var(--text-dim); font-size:.9rem; max-width:34ch; }
.foot-col h5, .foot-col .foot-h{ font-family:var(--f-mono); font-size:.76rem; color:var(--text-faint); margin-bottom:1rem; font-weight:400; }
.foot-col a, .foot-col span{ display:block; color:var(--text-dim); font-size:.88rem; padding:.3rem 0; transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--cyan-bright); }
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--text-faint);
}
.foot-bottom .vendor{ font-family:var(--f-mono); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:600px){
  .hero-stats{ gap:1.5rem; }
  .field-row{ flex-direction:column; align-items:stretch; }
  .swap-btn{ align-self:center; transform:rotate(90deg); }
  .swap-btn:hover{ transform:rotate(270deg); }
}

/* ---- service packages (web design / logo design tiers) ---- */
.package-group-title{
  font-family:var(--f-display); font-size:1.2rem; font-weight:600; letter-spacing:-0.01em;
  margin:2.4rem 0 1.2rem; color:var(--text);
}
/* pricing generation 1 removed in B76 — see the pricing block at the end of the file */

/* ---- tools page: animated pipeline diagram ---- */
.tools-diagram{ width:100%; height:auto; margin:1.5rem 0 .5rem; }
.diag-label{ font-family:var(--f-mono); font-size:11px; fill:var(--text-faint); }
.diag-flow{ animation:diagFlow 2.2s linear infinite; }
@keyframes diagFlow{ to{ stroke-dashoffset:-40; } }
.diag-hub circle{ animation:diagPulse 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes diagPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@media (max-width:700px){ .tools-diagram{ display:none; } }

/* ---- clock widgets (analog + digital) ---- */
.clockwidget-layout{ display:flex; gap:2.2rem; flex-wrap:wrap; align-items:center; justify-content:center; padding:1rem 0; }
.clockwidget-analog{ width:220px; height:220px; flex:none; }
.clock-face-ring{ fill:var(--surface-2); stroke:var(--line-strong); stroke-width:2; }
.clock-tick{ stroke:var(--text-faint); stroke-width:2; }
.clock-tick.major{ stroke:var(--text-dim); stroke-width:3; }
.clock-hand-hour{ stroke:var(--text); stroke-width:5; stroke-linecap:round; }
.clock-hand-minute{ stroke:var(--text); stroke-width:3.5; stroke-linecap:round; }
.clock-hand-second{ stroke:var(--cyan-bright); stroke-width:1.5; stroke-linecap:round; }
.clock-pin{ fill:var(--copper-bright); }
.clockwidget-digital{ text-align:center; }
.digital-clock-display{
  font-family:var(--f-mono); font-size:2.4rem; font-weight:500; color:var(--cyan-bright);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:1rem 1.6rem; letter-spacing:.05em;
}
.digital-clock-date{ margin-top:.9rem; color:var(--text-dim); font-size:.9rem; }

/* ---- AI writing helper ---- */
.aiwrite-modes{ display:flex; gap:.6rem; flex-wrap:wrap; }
.aiwrite-mode{
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text-dim);
  padding:.5rem 1rem; border-radius:99px; font-size:.85rem; cursor:pointer; transition:all .2s var(--ease);
}
.aiwrite-mode:hover{ border-color:var(--cyan); color:var(--text); }
.aiwrite-mode.active{ background:var(--grad-ai); color:#08110D; border-color:transparent; font-weight:600; }
.aiwrite-output{ margin-top:1.2rem; }
.aiwrite-result{
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:1.2rem 1.4rem; font-size:.94rem; line-height:1.6; color:var(--text);
}

/* ---- order / request-package modal ---- */
.order-modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.order-modal.open{ display:flex; }
.order-modal-backdrop{ position:absolute; inset:0; background:rgba(2,4,2,.75); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.order-modal-panel{
  position:relative; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  padding:2rem 2rem 2.2rem; max-width:480px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.order-modal-close{
  position:absolute; top:1rem; right:1.1rem; background:none; border:none; color:var(--text-faint);
  font-size:1.6rem; line-height:1; cursor:pointer; padding:.2rem .5rem;
}
.order-modal-close:hover{ color:var(--text); }
.order-modal-panel h3{ font-family:var(--f-display); font-size:1.4rem; padding-right:1.5rem; }
.order-modal-sub{ color:var(--text-dim); font-size:.86rem; margin-top:.5rem; line-height:1.5; }
#orderPackageField{ background:var(--surface-2); color:var(--copper-bright); font-family:var(--f-mono); cursor:default; }

/* ---- auto-cycling theme borders ---- */
@keyframes autoThemeCycle{
  0%, 100%{ border-color: var(--copper); box-shadow:0 0 0 1px rgba(79,149,1,.12); }
  20%{ border-color: var(--cyan); box-shadow:0 0 0 1px rgba(59,100,155,.12); }
  40%{ border-color: var(--violet); box-shadow:0 0 0 1px rgba(155,107,255,.12); }
  60%{ border-color: var(--magenta); box-shadow:0 0 0 1px rgba(226,76,158,.12); }
  80%{ border-color: var(--gold); box-shadow:0 0 0 1px rgba(224,176,74,.12); }
}
.package-card, .service-card, .style-card, .partner-card{
  animation: autoThemeCycle 14s ease-in-out infinite;
}
.partner-grid .partner-card:nth-child(2){ animation-delay:-4.6s; }
.partner-grid .partner-card:nth-child(3){ animation-delay:-9.2s; }
.package-grid .package-card:nth-child(2){ animation-delay:-2.8s; }
.package-grid .package-card:nth-child(3){ animation-delay:-5.6s; }
.service-carousel-track .service-card:nth-child(2n){ animation-delay:-4.6s; }
.service-carousel-track .service-card:nth-child(3n){ animation-delay:-9.2s; }
.package-card.featured{ animation:none; } /* keep the "most requested" card's copper identity fixed, it's a deliberate highlight */
@media (prefers-reduced-motion: reduce){
  .package-card, .service-card, .style-card{ animation:none !important; border-color:var(--line-strong) !important; }
}

/* ---- service category carousel ("flash cards" slider) ---- */
.service-carousel{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 4%, black 96%, transparent); mask-image:linear-gradient(90deg, transparent, black 4%, black 96%, transparent); }
.service-carousel-track{
  display:flex; gap:1.3rem; width:max-content;
  animation:serviceSlide 38s linear infinite;
}
.service-carousel:hover .service-carousel-track{ animation-play-state:paused; }
@keyframes serviceSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.service-card{
  flex:none; width:280px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  padding:1.5rem 1.6rem; transition:transform .3s var(--ease);
}
.service-card:hover{ transform:translateY(-3px); }
.service-card h4{ font-family:var(--f-display); font-size:1.05rem; }
.service-card .pkg{ display:inline-block; margin-top:.5rem; font-size:.72rem; color:var(--text-faint); }
.service-card .items{ margin-top:.8rem; font-size:.84rem; color:var(--text-dim); line-height:1.55; }
@media (max-width:640px){ .service-card{ width:240px; } }

/* ---- theme toggle (Standard / Cyberpunk) ---- */
.theme-toggle{
  display:flex; align-items:center; gap:.5rem; background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text-dim); font-size:.78rem; font-family:var(--f-mono); padding:.4rem .8rem .4rem .6rem;
  border-radius:99px; cursor:pointer; transition:border-color .25s var(--ease);
}
.theme-toggle:hover{ border-color:var(--cyan); color:var(--text); }
/* The search button had no rule at all and rendered as a raw <button>: a
   white box with a black icon. Same family as the theme toggle, icon-only. */
.nav-search-btn{
  display:grid; place-items:center; width:38px; height:38px; padding:0;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:99px;
  color:var(--text-dim); cursor:pointer; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.nav-search-btn svg{ width:17px; height:17px; }
.nav-search-btn:hover, .nav-search-btn:focus-visible{ border-color:var(--cyan); color:var(--text); }
.theme-toggle-dot{ width:8px; height:8px; border-radius:50%; background:var(--copper); box-shadow:0 0 6px var(--copper); flex:none; transition:background .3s, box-shadow .3s; }
.theme-toggle[aria-pressed="true"] .theme-toggle-dot{ background:#00FFFF; box-shadow:0 0 8px #00FFFF; }

/* Cyberpunk palette — same token system, different values, so it cascades
   through every var(--copper)/var(--cyan) usage sitewide automatically. */
html[data-theme="cyberpunk"]{
  --copper: #00E5FF;
  --copper-bright: #6FF3FF;
  --cyan: #0066FF;
  --cyan-bright: #4D94FF;
}
html[data-theme="cyberpunk"] body::before{
  background:
    radial-gradient(ellipse 90% 70% at 15% -10%, rgba(0,229,255,.18), transparent 55%),
    radial-gradient(ellipse 80% 60% at 105% 15%, rgba(0,102,255,.15), transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(155,107,255,.10), transparent 55%);
}

/* ---- lightning flash (thunderstorm-style background accent) ---- */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 130% 90% at 50% -10%, rgba(0,229,255,.35), transparent 55%);
  opacity:0; mix-blend-mode:screen;
  animation:lightningFlashA 11s ease-in-out infinite;
}
@keyframes lightningFlashA{
  0%, 88%, 100%{ opacity:0; }
  89%{ opacity:.6; }
  89.5%{ opacity:.1; }
  90%{ opacity:.8; }
  91%{ opacity:0; }
}
html[data-theme="cyberpunk"] body::after{
  background:radial-gradient(ellipse 130% 90% at 50% -10%, rgba(0,255,255,.45), transparent 55%);
}
@media (prefers-reduced-motion: reduce){
  body::after{ animation:none !important; opacity:0 !important; }
}

/* ---- pricing teaser (About page) ---- */
.pricing-teaser{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  padding:2rem 2.2rem;
}
.pricing-teaser .btn{ flex:none; }
@media (max-width:600px){ .pricing-teaser{ flex-direction:column; align-items:flex-start; } }

/* ---- package comparison tables ---- */
.compare-toggle{
  display:inline-flex; align-items:center; gap:.4rem; background:none; border:none; color:var(--cyan-bright);
  font-family:var(--f-mono); font-size:.82rem; cursor:pointer; margin-top:1.3rem; padding:.3rem 0;
}
.compare-toggle:hover{ color:var(--text); }
.compare-toggle .chev{ transition:transform .25s var(--ease); }
.compare-toggle[aria-expanded="true"] .chev{ transform:rotate(90deg); }
.compare-wrap{ overflow-x:auto; margin-top:1.2rem; border:1px solid var(--line-strong); border-radius:var(--radius-lg); }
.compare-table{ width:100%; border-collapse:collapse; min-width:520px; font-size:.88rem; }
.compare-table th, .compare-table td{ padding:.85rem 1.1rem; text-align:center; border-bottom:1px solid var(--line); }
.compare-table td:first-child, .compare-table th:first-child{ text-align:left; color:var(--text-dim); font-size:.84rem; }
.compare-table thead th{ background:var(--surface-2); font-family:var(--f-display); font-weight:600; }
.compare-table thead .compare-price{ display:block; font-family:var(--f-mono); font-weight:400; font-size:.78rem; color:var(--copper-bright); margin-top:.3rem; }
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table tbody tr:hover{ background:var(--surface-2); }
.compare-yes{ color:var(--copper-bright); font-weight:600; }
.compare-no{ color:var(--text-faint); }

/* ---- AI credit pill ---- */
.credit-pill{
  font-family:var(--f-mono); font-size:.7rem; color:var(--cyan-bright);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:99px;
  padding:.3rem .7rem; flex:none; white-space:nowrap;
}

.foot-entity-link{ color:var(--text); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:2px; }
.foot-entity-link:hover{ color:var(--copper-bright); text-decoration-color:var(--copper-bright); }

/* ---- about page fact row ---- */
.about-fact-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2.2rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.about-fact-row > div{ display:flex; flex-direction:column; gap:.4rem; }
.about-fact-num{ font-family:var(--f-display); font-size:1.3rem; color:var(--copper-bright); }
.about-fact-label{ font-size:.8rem; color:var(--text-dim); line-height:1.4; }
@media (max-width:800px){ .about-fact-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .about-fact-row{ grid-template-columns:1fr; } }

.about-lead{ font-size:1.25rem; color:var(--text); line-height:1.5; min-height:3.2em; }
#toolsRotatingText, #pricingRotatingText{ min-height:2.8em; }
.about-vision{ background:var(--surface-2); border-left:2px solid var(--copper); padding:1rem 1.3rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-top:1.4rem; font-size:.92rem; line-height:1.6; min-height:5.2em; transition:opacity .6s ease; }

/* ---- partner companies ---- */
.partner-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.3rem; }
.partner-card{
  display:block; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  padding:1.6rem 1.7rem; transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.partner-card:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.partner-wordmark{ font-family:var(--f-display); font-size:1.3rem; font-weight:600; color:var(--text); }
.partner-card p{ color:var(--text-dim); font-size:.88rem; line-height:1.55; margin-top:.7rem; }
.partner-link{ display:inline-block; margin-top:1rem; font-family:var(--f-mono); font-size:.76rem; color:var(--cyan-bright); }

/* ---- voice changer effect pills ---- */
.voicechanger-effects{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.vc-effect{
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text-dim);
  padding:.5rem 1rem; border-radius:99px; font-size:.85rem; cursor:pointer; transition:all .2s var(--ease);
}
.vc-effect:hover{ border-color:var(--cyan); color:var(--text); }
.vc-effect.active{ background:var(--grad-ai); color:#08110D; border-color:transparent; font-weight:600; }

/* ---- media converter progress bar ---- */
.mc-progress-track{ height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.mc-progress-bar{ height:100%; width:0%; background:var(--grad-brand); transition:width .3s ease; }

/* ---- tech & AI headlines snapshot ---- */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.2rem; }
.news-card{
  display:block; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:1.3rem 1.4rem; transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.news-card:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.news-tag{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-bright); }
.news-card h4{ font-size:.98rem; margin-top:.6rem; line-height:1.4; }
.news-card p{ font-size:.82rem; color:var(--text-dim); margin-top:.5rem; line-height:1.5; }
.news-source{ display:block; margin-top:.8rem; font-size:.72rem; color:var(--text-faint); font-family:var(--f-mono); }
.partner-note-inline{ margin-top:1.4rem; font-size:.8rem; color:var(--text-faint); text-align:center; }

/* ==========================================================================
   v2 REDESIGN LAYER — live ticker, digital universe bg, flash cards,
   slow-mo hover cards, news wire, security layer
   ========================================================================== */

/* ---- live market ticker banner (top of every page) ---- */
:root{ --ticker-h: 36px; }
.market-ticker{
  position:sticky; top:0; z-index:45; height:var(--ticker-h);
  display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(90deg, rgba(5,8,5,.96), rgba(13,19,16,.96));
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:.74rem;
}
.market-ticker::before{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--copper-bright) 30%, var(--cyan-bright) 70%, transparent);
  opacity:.55;
}
.ticker-label{
  flex:none; display:flex; align-items:center; gap:.45rem;
  padding:0 .9rem; height:100%; position:relative; z-index:2;
  background:var(--surface-2); border-right:1px solid var(--line-strong);
  color:var(--copper-bright); letter-spacing:.08em; font-size:.68rem;
}
.ticker-label i{
  width:6px; height:6px; border-radius:50%; background:var(--copper-bright);
  animation:tickerPulse 2.4s ease-in-out infinite;
}
@keyframes tickerPulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(136,255,5,.5)} 50%{opacity:.5; box-shadow:0 0 0 5px rgba(136,255,5,0)} }
.ticker-track{ display:flex; white-space:nowrap; will-change:transform;
  /* duration is set per-render from the real track width (see setWireSpeed in
     script.js) so headlines always drift at the same calm pixels-per-second,
     however long the wire is. This value is only the pre-measure fallback. */
  animation:tickerScroll var(--ticker-dur, 320s) linear infinite; }
.market-ticker:hover .ticker-track, .market-ticker:focus-within .ticker-track{ animation-play-state:paused; }
.ticker-item{ transition:color .2s ease; }
.ticker-item:hover b, a.ticker-item:hover span{ color:var(--green-bright, #7EE0A3); }
@keyframes tickerScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item{ display:inline-flex; align-items:center; gap:.5rem; padding:0 1.3rem; color:var(--text-dim); }
.ticker-item b{ color:var(--text); font-weight:500; }
.ticker-item .up{ color:var(--green-bright); }
.ticker-item .down{ color:var(--warn); }
.ticker-item .sep{ color:var(--text-faint); }
.nav{ top:var(--ticker-h); }
@media (max-width:640px){ .market-ticker{ font-size:.68rem; } }

/* ---- digital universe background (site-wide) ---- */
#universeBg{
  position:fixed; inset:0; z-index:-2; width:100%; height:100%;
  pointer-events:none; opacity:.9;
}
body{ background-color:var(--bg, #05070A); background-image:radial-gradient(120% 90% at 70% -10%, #0A1410 0%, var(--bg) 55%); }

/* ---- flash cards (3D flip, auto-cycle + hover) ---- */
.flashcards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.1rem; perspective:1200px;
}
.flashcard{ position:relative; height:190px; cursor:default; }
.flashcard-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.2,.75,.25,1);
}
.flashcard:hover .flashcard-inner, .flashcard.flipped .flashcard-inner{ transform:rotateY(180deg); }
.flashcard-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  background:linear-gradient(145deg, var(--surface) 0%, var(--surface-2) 100%);
  padding:1.3rem; display:flex; flex-direction:column; justify-content:center; gap:.5rem;
  overflow:hidden;
}
.flashcard-face::after{
  content:''; position:absolute; top:0; left:0; right:0; height:1.5px;
  background:linear-gradient(90deg, transparent, var(--copper-bright), transparent); opacity:.5;
}
.flashcard-face.back{
  transform:rotateY(180deg);
  background:linear-gradient(145deg, var(--surface-2) 0%, var(--surface-3) 100%);
  border-color:rgba(125,163,217,.35);
}
.flashcard-face.back::after{ background:linear-gradient(90deg, transparent, var(--cyan-bright), transparent); }
.flashcard-face b{ font-family:var(--f-display); font-size:1.55rem; }
.flashcard-face b .mono{ color:var(--copper-bright); }
.flashcard-face span{ font-size:.85rem; color:var(--text-dim); line-height:1.5; }
.flashcard-face .fc-icon{ width:26px; height:26px; margin-bottom:.2rem; color:var(--cyan-bright); }

/* ---- slow-mo hovering cards: gentle idle float + long, cinematic hover ---- */
@keyframes cardFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
.path-card, .slide-card, .news-card, .flashcard{
  animation:cardFloat 9s ease-in-out infinite;
}
.path-card:nth-child(2), .slide-card:nth-child(3n+2), .flashcard:nth-child(2n){ animation-delay:-3s; }
.path-card:nth-child(3), .slide-card:nth-child(3n), .flashcard:nth-child(3n){ animation-delay:-6s; }
.path-card, .slide-card{
  transition:transform 1.05s cubic-bezier(.16,.8,.24,1), border-color 1.05s var(--ease), box-shadow 1.05s var(--ease);
}
.path-card:hover, .slide-card:hover{
  animation-play-state:paused;
  transform:translateY(-10px) scale(1.015);
  box-shadow:0 22px 55px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(136,255,5,.15);
}

/* ---- live tech news wire ---- */
.wire-meta{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.68rem; color:var(--text-faint); }
.wire-meta .pts{ color:var(--gold-bright); }

/* ---- tool guardian toast ---- */
.guardian-toast{
  position:fixed; left:50%; bottom:1.6rem; transform:translate(-50%, 20px);
  z-index:120; opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:.6rem;
  background:var(--surface-2); border:1px solid rgba(136,255,5,.35);
  border-radius:999px; padding:.55rem 1.1rem;
  font-family:var(--f-mono); font-size:.76rem; color:var(--text);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  box-shadow:0 12px 40px -10px rgba(0,0,0,.7);
}
.guardian-toast.show{ opacity:1; transform:translate(-50%,0); }
.guardian-toast i{ width:7px; height:7px; border-radius:50%; background:var(--copper-bright); animation:tickerPulse 2.4s infinite; }
.guardian-toast.err{ border-color:rgba(226,114,91,.45); }
.guardian-toast.err i{ background:var(--warn); }

/* ---- security layer ---- */
body.sec-lock{ -webkit-user-select:none; user-select:none; }
body.sec-lock input, body.sec-lock textarea, body.sec-lock [contenteditable],
body.sec-lock .tool-panel output, body.sec-lock .tool-panel .out,
body.sec-lock code, body.sec-lock pre, body.sec-lock [data-copy-ok]{
  -webkit-user-select:text; user-select:text;
}
body.sec-lock img{ -webkit-user-drag:none; user-drag:none; }

@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
  .path-card, .slide-card, .news-card, .flashcard{ animation:none; }
  .flashcard-inner{ transition:none; }
}

/* mobile menu opens below ticker + nav */
@media (max-width:880px){
  .nav-links{ inset:calc(60px + var(--ticker-h)) 0 auto 0; }
}

/* ==========================================================================
   v3 LAYER — light theme, animated headers, CAPS logo, social icons,
   free live-chat badge, matrix/circuit background support
   ========================================================================== */

/* ---- LIGHT THEME ---- */
html[data-theme="light"]{
  --bg:        #F2F5F0;
  --surface:   #FFFFFF;
  --surface-2: #E9EEE7;
  --surface-3: #DDE5DA;
  --line:        rgba(10,20,12,.10);
  --line-strong: rgba(10,20,12,.20);
  --text:       #121A14;
  --text-dim:   #45524A;
  /* the light theme's own faint token, same problem: 3.21:1 on --surface-3.
     #596862 clears AA on all four light surfaces (5.33 / 5.86 / 4.98 / 4.55). */
  --text-faint: #596862;
  --copper:        #3F7A00;
  --copper-bright: #4F9501;
  --cyan:          #2F5382;
  --cyan-bright:   #3B649B;
  --violet:        #6E42D8;
  --violet-bright: #7E55DE;
}
html[data-theme="light"] body{
  background:radial-gradient(120% 90% at 70% -10%, #E4ECE1 0%, var(--bg) 55%);
}
html[data-theme="light"] body::after{
  background:radial-gradient(ellipse 130% 90% at 50% -10%, rgba(63,122,0,.30), transparent 55%);
  mix-blend-mode:multiply;
}
html[data-theme="light"] .nav{ background:rgba(242,245,240,.82); }
html[data-theme="light"] .market-ticker{
  background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(233,238,231,.95));
}
html[data-theme="light"] #universeBg{ opacity:.55; }
/* v9 — light-theme hero scrim deleted too */
html[data-theme="light"] .path-card:hover, html[data-theme="light"] .slide-card:hover{
  box-shadow:0 22px 55px -18px rgba(20,40,20,.25), 0 0 0 1px rgba(63,122,0,.2);
}
html[data-theme="light"] .guardian-toast{ box-shadow:0 12px 40px -10px rgba(20,40,20,.3); }

/* ---- CAPS logo, auto color-cycling with theme tokens ---- */
.brand-word{
  font-family:'Orbitron', var(--f-display);
  text-transform:uppercase; letter-spacing:.035em; font-weight:700; font-size:.98rem;
  font-kerning:normal;
  background:var(--grad-tri); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:brandCycle 8s linear infinite;
}
.brand-word .suffix{ color:transparent; }
@keyframes brandCycle{ from{ background-position:0% 50%; } to{ background-position:300% 50%; } }

/* ---- animated graphical headers ---- */
h1, .section-title{ font-family:'Orbitron', var(--f-display); letter-spacing:.02em; }
.section-title{ font-weight:700; }
.text-grad{
  background:var(--grad-tri); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradFlow 6s linear infinite;
}
@keyframes gradFlow{ from{ background-position:0% 50%; } to{ background-position:250% 50%; } }
.section-title{ position:relative; }
.section-head .section-title::after{
  content:''; display:block; width:64px; height:2px; margin-top:.65rem;
  background:var(--grad-brand);
  animation:titleSweep 4s ease-in-out infinite;
}
@keyframes titleSweep{ 0%,100%{ width:64px; opacity:1; } 50%{ width:118px; opacity:.6; } }

/* ---- footer social icons ---- */
.social-row{ display:flex; gap:.7rem; }
.social-row a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:9px;
  border:1px solid var(--line-strong); color:var(--text-dim);
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.social-row a svg{ width:17px; height:17px; }
.social-row a:hover{ color:var(--copper-bright); border-color:var(--copper); transform:translateY(-3px); }

/* ---- free live-chat badge (replaces credit pill in FAB) ---- */
.free-pill{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em;
  color:var(--green-bright); border:1px solid rgba(76,201,125,.4);
  border-radius:999px; padding:.28rem .7rem; white-space:nowrap;
}
html[data-theme="light"] .free-pill{ color:#1E7A46; border-color:rgba(30,122,70,.45); }

@media (prefers-reduced-motion: reduce){
  .brand-word, .text-grad, .section-head .section-title::after{ animation:none; }
}

/* ==========================================================================
   v4 — CAD tools
   ========================================================================== */
.cad-toolbar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.9rem; }
.cad-tool-btn{
  font-family:var(--f-mono); font-size:.78rem; padding:.45rem .9rem;
  background:var(--surface-2); color:var(--text-dim);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  cursor:pointer; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.cad-tool-btn:hover{ color:var(--text); }
.cad-tool-btn.active{ color:var(--copper-bright); border-color:var(--copper); background:var(--surface-3); }
.cad-canvas{
  width:100%; height:380px; display:block; cursor:crosshair;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
}
html[data-theme="light"] .cad-canvas{ background:#FBFDFA; }
.cad-statusbar{
  display:flex; justify-content:space-between; margin-top:.5rem;
  font-size:.74rem; color:var(--text-faint);
}
.bc-layout{ display:flex; gap:1.6rem; flex-wrap:wrap; align-items:flex-start; margin-top:1.1rem; }
.bc-preview{
  width:min(300px, 100%); aspect-ratio:1; flex:none;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
}
.bc-tablewrap{ flex:1; min-width:220px; max-height:300px; overflow-y:auto; }
.coord-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
.coord-table th{
  text-align:left; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em;
  color:var(--text-faint); padding:.45rem .6rem; border-bottom:1px solid var(--line-strong);
}
.coord-table td{ padding:.4rem .6rem; border-bottom:1px solid var(--line); color:var(--text-dim); }
.coord-table tr:hover td{ color:var(--text); }

/* ==========================================================================
   v5 — Social media growth tools
   ========================================================================== */
#srDropZone{ aspect-ratio:auto; min-height:110px; width:100%; }
.img-drop .dz-label{ color:var(--text-faint); font-size:.9rem; text-align:center; padding:1rem; }
.img-drop.has-file{ border-style:solid; border-color:var(--copper); }
.img-drop.has-file .dz-label{ color:var(--text-dim); }
.sr-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:1rem; margin-top:1.2rem;
}
.sr-card{
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:.7rem; display:flex; flex-direction:column; gap:.6rem;
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.sr-card:hover{ transform:translateY(-4px); border-color:var(--copper); }
.sr-card img{ width:100%; aspect-ratio:1; object-fit:contain; background:var(--surface); border-radius:var(--radius-sm); }
.sr-meta{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--text-dim); }
.sr-meta .mono{ color:var(--text-faint); }
.utm-result-row{ display:flex; gap:.8rem; align-items:stretch; margin-top:1.1rem; flex-wrap:wrap; }
.utm-result{
  flex:1; min-width:240px; display:block; padding:.8rem 1rem; font-size:.82rem;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  color:var(--copper-bright); word-break:break-all; user-select:text;
}

/* ==========================================================================
   v6 — Global tech wire news band (sits above the footer, sitewide)
   ========================================================================== */
.news-band{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, transparent, var(--surface) 30%, var(--surface));
  padding:1.1rem 0 1.05rem; margin-top:3.5rem; position:relative; overflow:hidden;
}
.news-band-inner{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.nb-label{
  display:flex; align-items:center; gap:.55rem; flex:none;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; color:var(--text-faint);
}
.nb-label i{ width:7px; height:7px; border-radius:50%; background:var(--warn); animation:tickerPulse 2.4s infinite; flex:none; }
.nb-title{ color:var(--text-dim); }
.nb-stamp{ color:var(--text-faint); letter-spacing:.06em; }
.nb-stage{
  flex:1; min-width:260px; display:flex; align-items:baseline; gap:.9rem;
  text-decoration:none; overflow:hidden; white-space:nowrap;
}
.nb-stage.nb-in .nb-headline,
.nb-stage.nb-in .nb-source,
.nb-stage.nb-in .nb-meta{ animation:nbSlideIn .55s var(--ease) both; }
.nb-source{ font-size:.7rem; color:var(--copper-bright); flex:none; }
.nb-headline{
  font-size:.95rem; color:var(--text); font-weight:500;
  overflow:hidden; text-overflow:ellipsis;
  transition:color .3s var(--ease);
}
.nb-stage:hover .nb-headline{ color:var(--copper-bright); }
.nb-meta{ font-size:.7rem; color:var(--text-faint); flex:none; }
.nb-empty{ font-size:.85rem; color:var(--text-faint); }
.nb-progress{
  position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--line);
}
.nb-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--copper), var(--cyan)); }
@keyframes nbSlideIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:640px){
  .news-band-inner{ gap:.7rem; }
  .nb-stage{ white-space:normal; }
  .nb-headline{ font-size:.88rem; }
}

/* ==========================================================================
   v7 — Multipage specialist picker (AI Assistant page)
   ========================================================================== */
#industryGrid.spec-paged{
  display:block; overflow:hidden; scroll-snap-type:none; cursor:default;
  padding:.3rem .2rem;
}
.spec-track{
  display:flex; transition:transform .8s var(--ease); will-change:transform;
}
.spec-page{
  flex:none; width:100%;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;
  align-content:start; padding:.2rem;
}
.spec-page .industry-card{ width:auto; min-width:0; }
.spec-nav{
  display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.1rem;
}
.spec-dots{ display:flex; gap:.55rem; }
.spec-dot{
  width:9px; height:9px; border-radius:50%; border:1px solid var(--line-strong);
  background:transparent; cursor:pointer; padding:0;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.spec-dot.active{ background:var(--copper-bright); border-color:var(--copper-bright); transform:scale(1.25); }
.spec-dot:hover{ border-color:var(--copper); }
@media (max-width:900px){ .spec-page{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .spec-page{ grid-template-columns:1fr; } }

/* ==========================================================================
   v7 — On-demand specialists
   ========================================================================== */
.ondemand{ margin-top:2.6rem; }
.ondemand-head h3{ font-size:1.25rem; margin-bottom:.5rem; }
.ondemand-head p{ color:var(--text-dim); font-size:.92rem; max-width:64ch; }
.ondemand-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:1rem; margin-top:1.3rem;
}
.ondemand-card{
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:1.1rem 1.15rem;
  transition:transform .6s var(--ease), border-color .6s var(--ease);
}
.ondemand-card:hover{ transform:translateY(-5px); border-color:var(--cyan); }
.ondemand-card h4{ font-size:.98rem; margin:.55rem 0 .35rem; }
.ondemand-card p{ font-size:.82rem; color:var(--text-dim); line-height:1.55; }
.od-pill{
  display:inline-block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em;
  color:var(--cyan-bright); border:1px solid var(--cyan); border-radius:99px; padding:.22rem .6rem;
}
.ondemand-note{
  margin-top:1.4rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; border:1px dashed var(--line-strong); border-radius:var(--radius-md);
  padding:1rem 1.2rem;
}
.ondemand-note p{ font-size:.85rem; color:var(--text-dim); max-width:60ch; }
.ondemand-note b{ color:var(--warn); }

/* Offline / online choice variant of the note (AI page) */
.ondemand-note.od-offline{ border-style:solid; }
.ondemand-note.od-offline b{ color:var(--cyan-bright); }
.od-actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
@media (max-width:560px){
  .od-actions{ width:100%; }
  .od-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* ==========================================================================
   v7 — Transparent cards with auto-changing colored aurora backgrounds
   ========================================================================== */
.slide-card, .path-card, .service-card, .info-card, .count-card,
.package-card, .partner-card, .sr-card, .ondemand-card{
  position:relative; isolation:isolate; overflow:hidden;
  background:rgba(16,22,30,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
html[data-theme="light"] .slide-card, html[data-theme="light"] .path-card,
html[data-theme="light"] .service-card, html[data-theme="light"] .info-card,
html[data-theme="light"] .count-card, html[data-theme="light"] .package-card,
html[data-theme="light"] .partner-card, html[data-theme="light"] .sr-card,
html[data-theme="light"] .ondemand-card{
  background:rgba(255,255,255,.55);
}
.slide-card::after, .path-card::after, .service-card::after, .info-card::after,
.count-card::after, .package-card::after, .partner-card::after, .sr-card::after,
.ondemand-card::after, .flashcard-face::before{
  content:""; position:absolute; inset:-40%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 26%, rgba(79,149,1,.30), transparent 68%),
    radial-gradient(42% 46% at 78% 72%, rgba(59,100,155,.30), transparent 70%),
    radial-gradient(30% 34% at 66% 18%, rgba(136,255,5,.14), transparent 70%);
  animation:cardAurora 16s ease-in-out infinite alternate;
}
.flashcard-face{ isolation:isolate; }
.flashcard-face::before{ z-index:-1; }
/* stagger so neighbouring cards don't pulse in sync */
.slide-card:nth-child(2n)::after, .service-card:nth-child(2n)::after,
.ondemand-card:nth-child(2n)::after, .sr-card:nth-child(2n)::after{ animation-delay:-5s; }
.slide-card:nth-child(3n)::after, .service-card:nth-child(3n)::after,
.ondemand-card:nth-child(3n)::after{ animation-delay:-10s; }
@keyframes cardAurora{
  0%  { transform:translate(0,0) rotate(0deg);     filter:hue-rotate(0deg); }
  50% { transform:translate(7%,-6%) rotate(8deg);  filter:hue-rotate(140deg); }
  100%{ transform:translate(-6%,6%) rotate(-6deg); filter:hue-rotate(300deg); }
}
html[data-theme="light"] .slide-card::after, html[data-theme="light"] .path-card::after,
html[data-theme="light"] .service-card::after, html[data-theme="light"] .info-card::after,
html[data-theme="light"] .count-card::after, html[data-theme="light"] .package-card::after,
html[data-theme="light"] .partner-card::after, html[data-theme="light"] .sr-card::after,
html[data-theme="light"] .ondemand-card::after{ opacity:.5; }
@media (prefers-reduced-motion: reduce){
  .slide-card::after, .path-card::after, .service-card::after, .info-card::after,
  .count-card::after, .package-card::after, .partner-card::after, .sr-card::after,
  .ondemand-card::after, .flashcard-face::before{ animation:none; }
  .spec-track{ transition:none; }
}

/* ==========================================================================
   v8 — On-demand big animated sector display
   ========================================================================== */
.od-display{ margin:1.6rem 0 .6rem; text-align:center; padding:1.6rem 1rem 1.9rem; position:relative; overflow:hidden; }
.od-big{
  font-family:'Orbitron', var(--f-head); font-weight:800;
  font-size:clamp(1.9rem, 6vw, 4.2rem); letter-spacing:.02em; line-height:1.12;
  min-height:1.2em;
}
.od-big .od-ch{
  display:inline-block;
  background:linear-gradient(100deg, var(--copper-bright), var(--cyan-bright) 45%, var(--green-bright, #88FF05) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:odChIn .6s var(--ease) both, odHue 7s linear infinite;
}
.od-big .od-sp{ display:inline-block; width:.4em; }
@keyframes odChIn{
  from{ opacity:0; transform:translateY(24px) scale(.85); filter:blur(6px); }
  to  { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes odHue{
  0%{ background-position:0% 0; filter:hue-rotate(0deg); }
  50%{ background-position:100% 0; filter:hue-rotate(120deg); }
  100%{ background-position:0% 0; filter:hue-rotate(360deg); }
}
.od-sub{ margin-top:.9rem; font-size:.88rem; color:var(--text-dim); max-width:56ch; margin-left:auto; margin-right:auto; }
@media (prefers-reduced-motion: reduce){
  .od-big .od-ch{ animation:none; }
}

/* ==========================================================================
   v8 — One-row auto-scrolling specialist icon marquee
   ========================================================================== */
.industry-grid.spec-marquee{ display:block; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.spec-lane{ display:flex; gap:.7rem; width:max-content; padding:.4rem 0;
  animation:specDrift 60s linear infinite; }
.industry-grid.spec-marquee:hover .spec-lane,
.industry-grid.spec-marquee:focus-within .spec-lane{ animation-play-state:paused; }
@keyframes specDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.spec-chip{
  display:inline-flex; align-items:center; gap:.55rem; flex:0 0 auto;
  padding:.6rem 1rem; border-radius:99px; cursor:pointer;
  background:rgba(16,22,30,.5); border:1px solid var(--line);
  color:var(--text-dim); font-family:var(--f-body); font-size:.82rem; font-weight:600;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.spec-chip svg{ width:18px; height:18px; color:var(--copper-bright); flex:0 0 auto; transition:color .25s; }
.spec-chip:hover{ border-color:var(--cyan); color:var(--text); transform:translateY(-2px); }
.spec-chip.active{ border-color:var(--copper-bright); color:var(--text);
  box-shadow:0 0 18px color-mix(in srgb, var(--copper-bright) 35%, transparent), inset 0 0 12px rgba(79,149,1,.12); }
.spec-chip.active svg{ color:var(--green-bright, #88FF05); }
[data-theme="light"] .spec-chip{ background:rgba(255,255,255,.66); }
@media (prefers-reduced-motion: reduce){
  .spec-lane{ animation:none; }
  .industry-grid.spec-marquee{ overflow-x:auto; mask-image:none; -webkit-mask-image:none; }
}

/* ==========================================================================
   v8 — Font studio
   ========================================================================== */
.font-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:.9rem; margin-top:1.1rem; }
.font-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:.9rem 1rem 1.1rem;
  background:var(--surface-1); overflow:hidden; transition:border-color .25s; }
.font-card:hover{ border-color:var(--cyan); }
.font-card-head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.65rem; }
.font-name{ font-size:.72rem; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; }
.font-actions{ display:flex; gap:.4rem; }
.font-sample{ color:var(--text); line-height:1.25; word-break:break-word; min-height:1.3em; }

/* ==========================================================================
   v8 — Offline AI lab
   ========================================================================== */
.oa-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.8rem; }
.oa-cell{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.6rem; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-md); padding:.8rem .95rem; background:var(--surface-1); }
.oa-cell i{ width:10px; height:10px; border-radius:50%; grid-row:1 / 3; }
.oa-cell i.ok{ background:var(--green-bright, #88FF05); box-shadow:0 0 10px var(--green-bright, #88FF05); }
.oa-cell i.no{ background:var(--warn); box-shadow:0 0 10px var(--warn); }
.oa-cell b{ font-size:.82rem; color:var(--text); }
.oa-cell span{ grid-column:2; font-size:.72rem; color:var(--text-faint); }

/* v8 — home slider: industry icons + roaming auto-hover spotlight */
.slide-ico{ position:absolute; top:.95rem; right:1rem; color:var(--copper-bright);
  opacity:.55; transition:opacity .3s, color .3s, transform .3s; }
.slide-ico svg{ width:22px; height:22px; display:block; }
.slide-card:hover .slide-ico, .slide-card.auto-hover .slide-ico{
  opacity:1; color:var(--green-bright, #88FF05); transform:scale(1.12); }
.slide-card.auto-hover{ transform:translateY(-4px); border-color:var(--line-strong);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 22px color-mix(in srgb, var(--copper-bright) 22%, transparent); }
.slide-card.auto-hover::before{ left:130%; }

/* v8 — home industry marquee sizing */
.slider.spec-marquee{ padding:0; }
.slider.spec-marquee .spec-chip{ padding:.75rem 1.2rem; font-size:.88rem; text-decoration:none; }
.slider.spec-marquee .spec-chip svg{ width:21px; height:21px; }
.slider.spec-marquee .spec-lane{ animation-duration:52s; }

/* ==========================================================================
   v8 — About hero: two-column layout, font-morph text, Grafana board
   ========================================================================== */
.about-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.8rem; align-items:center; }
@media (max-width: 980px){ .about-hero-grid{ grid-template-columns:1fr; gap:2rem; } }

.about-morph{
  margin:1.4rem 0 1.8rem; min-height:3.4em;
  font-size:clamp(1.05rem, 2.4vw, 1.65rem); font-weight:700; line-height:1.4;
  letter-spacing:.01em; word-break:break-word;
}
.about-morph .od-ch{ animation-duration:.5s, 7s; }

.gfx-dash{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-self:center; }
.gfx-panel{
  border:1px solid var(--line); border-radius:var(--r-md, 10px);
  background:rgba(16,22,30,.55); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  padding:.7rem .85rem .8rem; min-width:0; position:relative; isolation:isolate;
}
[data-theme="light"] .gfx-panel{ background:rgba(255,255,255,.7); }
.gfx-head{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em;
  color:var(--text-faint); text-transform:uppercase; margin-bottom:.5rem;
}
.gfx-live{ width:7px; height:7px; border-radius:50%; background:var(--green-bright, #88FF05);
  box-shadow:0 0 9px var(--green-bright, #88FF05); animation:gfxBlink 1.6s ease-in-out infinite; }
@keyframes gfxBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.gfx-big{ font-size:2.05rem; font-weight:700; color:var(--green-bright, #88FF05); line-height:1;
.gfx-wide{ grid-column:1 / -1; }
  text-shadow:0 0 18px color-mix(in srgb, var(--green-bright, #88FF05) 40%, transparent); }
.gfx-foot{ font-size:.66rem; color:var(--text-faint); margin-top:.35rem; }
.gfx-panel canvas{ display:block; width:100%; height:92px; }
.gfx-panel:not(.gfx-wide) canvas{ height:74px; }
@media (prefers-reduced-motion: reduce){ .gfx-live{ animation:none; } }

/* v8 fix — about hero: full-width layout, unsqueezed board, word-safe morph */
.page-hero-inner.about-hero-grid{ max-width:none; width:100%;
  grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr); gap:3.4rem; }
@media (max-width: 1060px){
  .page-hero-inner.about-hero-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .gfx-dash{ max-width:560px; }
}
.od-w{ display:inline-block; white-space:nowrap; }
.gfx-dash{ gap:.85rem; }
.gfx-panel{ padding:.85rem 1rem .95rem; }
.gfx-head{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.65rem; }
.gfx-big{ margin:.15rem 0 .1rem; }
.gfx-panel canvas{ height:96px; }
.gfx-panel:not(.gfx-wide) canvas{ height:78px; }

/* v8 pricing block (scaled featured card, z-index:2, absolute tag) removed in B76 — the single pricing owner is the block at the end of the file */

.billing-toggle{
  display:inline-flex; gap:.3rem; padding:.3rem; margin:.4rem 0 1.4rem;
  border:1px solid var(--line-strong); border-radius:99px; background:rgba(16,22,30,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
[data-theme="light"] .billing-toggle{ background:rgba(255,255,255,.7); }
.billing-opt{
  border:0; background:transparent; color:var(--text-dim); cursor:pointer;
  font-family:var(--f-body); font-size:.82rem; font-weight:600;
  padding:.5rem 1.1rem; border-radius:99px; transition:background .25s, color .25s;
  display:inline-flex; align-items:center; gap:.5rem;
}
.billing-opt.active{ background:var(--grad-brand); color:#08110D; }
.billing-save{
  font-size:.62rem; font-family:var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  padding:.15rem .45rem; border-radius:99px;
  background:color-mix(in srgb, var(--green-bright, #88FF05) 18%, transparent);
  color:var(--green-bright, #88FF05);
}
.billing-opt.active .billing-save{ background:rgba(8,17,13,.25); color:#08110D; }
@keyframes priceFlip{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.price-flip{ animation:priceFlip .35s var(--ease); }

/* ==========================================================================
   v8 — pricing card redesign: flowed badge, icons, fold, checkmarks, layers
   ========================================================================== */
/* badge lives IN the flow now — overflow:hidden can never clip it again */
/* pricing generation 3 (static tag with order:-1, 130px circuit-dot ::before) removed in B78 — its width/height leaked into the rim ::before and drew a 130px box on every featured card */

.pkg-head{ display:flex; align-items:center; gap:.75rem; }
.pkg-head .package-tier{ flex:1; margin-top:0; }
.pkg-ico{
  width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:11px;
  background:linear-gradient(145deg, rgba(79,149,1,.16), rgba(59,100,155,.14));
  color:var(--copper-bright);
}
.pkg-ico svg{ width:21px; height:21px; }
.package-card.featured .pkg-ico{ border-color:var(--copper-bright);
  color:var(--green-bright, #88FF05);
  box-shadow:0 0 14px color-mix(in srgb, var(--copper-bright) 40%, transparent); }
/* old fold button + .folded state removed in B72 — see .pkg-drawer */
.package-card.folded{ padding-bottom:1.5rem; }

/* dot bullets -> checkmarks */
.package-features li::before{
  content:'✓'; background:none !important; box-shadow:none !important;
  width:auto; height:auto; border-radius:0; top:.05em;
  color:var(--green-bright, #88FF05); font-weight:700; font-size:.9em;
  text-shadow:0 0 8px color-mix(in srgb, var(--green-bright, #88FF05) 45%, transparent);
}
.package-card.featured .package-features li::before{ color:var(--green-bright, #88FF05); }

/* full-width, properly rendered CTAs */
.package-card .btn{ align-self:stretch; justify-content:center; text-align:center; padding-block:.7rem; }
.package-price{ margin-top:.9rem; }

/* ==========================================================================
   v8 — tools view switcher + sidebar (master-detail) layout
   ========================================================================== */
.view-switch{
  display:inline-flex; align-items:center; gap:.35rem; margin-bottom:1.3rem;
  padding:.3rem .3rem .3rem .8rem; border:1px solid var(--line-strong); border-radius:99px;
  background:rgba(16,22,30,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
[data-theme="light"] .view-switch{ background:rgba(255,255,255,.7); }
.view-switch-label{ font-size:.6rem; letter-spacing:.16em; color:var(--text-faint); margin-right:.35rem; }
.view-opt{
  display:inline-flex; align-items:center; gap:.45rem; border:0; cursor:pointer;
  background:transparent; color:var(--text-dim); font-family:var(--f-body);
  font-size:.8rem; font-weight:600; padding:.45rem .95rem; border-radius:99px;
  transition:background .25s, color .25s;
}
.view-opt svg{ width:15px; height:15px; }
.view-opt.active{ background:var(--grad-brand); color:#08110D; }

/* -------- sidebar (master-detail) mode -------- */
@media (min-width: 901px){
  .workbench.view-side{
    display:grid; grid-template-columns:264px minmax(0, 1fr);
    gap:1.6rem; align-items:start;
  }
  .workbench.view-side .tool-tabs{
    grid-column:1; grid-row:1; margin-bottom:0;
    display:flex; flex-direction:column; gap:.45rem;
    position:sticky; top:92px; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px);
    overflow-y:auto; overscroll-behavior:contain;
    padding-right:.4rem; scrollbar-width:thin;
  }
  .workbench.view-side .tool-tab{
    flex-direction:row; justify-content:flex-start; text-align:left;
    gap:.7rem; padding:.6rem .85rem; font-size:.82rem;
  }
  .workbench.view-side .tool-tab svg{ width:17px; height:17px; margin:0; flex:0 0 auto; }
  .workbench.view-side .tool-panel{ grid-column:2; grid-row:1; min-width:0; }
}
@media (max-width: 900px){
  /* sidebar mode is impractical on small screens — grid flow always */
  .workbench.view-side{ display:block; }
}

/* ==========================================================================
   v8 — tools grid: symbol launcher (equal rows & columns, cards deleted)
   32 tools ÷ 8 columns = 4 full rows; ÷ 4 columns = 8 full rows.
   Every breakpoint divides 40 exactly, so no row is ever left ragged.
   ========================================================================== */
.tool-tabs{
  grid-template-columns:repeat(8, 1fr); gap:.65rem;
}
@media (max-width: 1080px){ .tool-tabs{ grid-template-columns:repeat(4, 1fr); gap:.55rem; } }
/* v9 — Deck Builder is a normal compact tab; the NEW chip is a corner badge
   so it costs zero extra space and the panel only opens when clicked */
.tab-new{ position:absolute; top:.45rem; right:.45rem; font-size:.56rem; letter-spacing:.1em;
  padding:.14rem .42rem; border-radius:999px; line-height:1;
  background:color-mix(in srgb, #4F9501 30%, transparent); color:#8CC63F;
  border:1px solid rgba(140,198,63,.45); pointer-events:none; }
@media (max-width: 620px){ .tool-tabs{ grid-template-columns:repeat(2, 1fr); } }

.tool-tab{
  aspect-ratio:1 / 1; padding:.5rem .35rem; gap:.5rem; justify-content:center;
  font-size:.64rem; line-height:1.25; letter-spacing:.01em;
  background:transparent; border-color:transparent; overflow:hidden;
  transition:background .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.tool-tab svg{ width:24px; height:24px; transition:transform .25s var(--ease), color .25s; }
.tool-tab:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border-color:var(--line-strong); transform:translateY(-3px);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.tool-tab:hover svg{ transform:scale(1.18); color:var(--green-bright, #88FF05); }
.tool-tab.active{ aspect-ratio:1 / 1; }
.tool-tab.active svg{ transform:scale(1.12); }

/* sidebar mode keeps its list rows — squares don't apply there */
@media (min-width: 901px){
  .workbench.view-side .tool-tab{
    aspect-ratio:auto; font-size:.82rem; overflow:visible;
    background:transparent; border-color:transparent;
  }
  .workbench.view-side .tool-tab:hover{
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border-color:var(--line-strong); transform:none; box-shadow:none;
  }
  .workbench.view-side .tool-tab svg{ width:17px; height:17px; }
  .workbench.view-side .tool-tab:hover svg{ transform:none; }
}

/* ==========================================================================
   v8 — light mode parity: same digital-universe background & living layers
   as dark mode, re-colored for a light canvas.
   ========================================================================== */
/* the world behind the page — layered color washes matching dark's geography */
html[data-theme="light"] body{
  background:
    radial-gradient(90% 70% at 75% -8%, rgba(63,122,0,.14), transparent 60%),
    radial-gradient(70% 60% at 8% 30%, rgba(47,83,130,.12), transparent 62%),
    radial-gradient(60% 50% at 88% 78%, rgba(136,200,20,.10), transparent 65%),
    radial-gradient(120% 90% at 70% -10%, #E4ECE1 0%, var(--bg) 55%);
}
/* matrix universe canvas: full presence in light too */
html[data-theme="light"] #universeBg{ opacity:.9; }
/* light hero canvas rule consolidated below */

/* aurora card layers: real light-tuned colors instead of dimmed dark blobs */
html[data-theme="light"] .count-card::after, html[data-theme="light"] .package-card::after,
html[data-theme="light"] .partner-card::after, html[data-theme="light"] .sr-card::after,
html[data-theme="light"] .ondemand-card::after{
  opacity:.85;
  background:
    radial-gradient(38% 42% at 22% 26%, rgba(63,122,0,.18), transparent 68%),
    radial-gradient(42% 46% at 78% 72%, rgba(47,83,130,.16), transparent 70%),
    radial-gradient(30% 34% at 66% 18%, rgba(110,66,216,.10), transparent 70%);
}
html[data-theme="light"] .flashcard-face::before{
  opacity:.85;
  background:
    radial-gradient(38% 42% at 22% 26%, rgba(63,122,0,.18), transparent 68%),
    radial-gradient(42% 46% at 78% 72%, rgba(47,83,130,.16), transparent 70%),
    radial-gradient(30% 34% at 66% 18%, rgba(110,66,216,.10), transparent 70%);
}

/* border layers cycle in light too — deeper rings so the color walk is obvious */
@keyframes autoThemeCycleLight{
  0%, 100%{ border-color:#3F7A00; box-shadow:0 0 0 1px rgba(63,122,0,.20), 0 10px 24px -14px rgba(63,122,0,.35); }
  20%{ border-color:#2F5382; box-shadow:0 0 0 1px rgba(47,83,130,.20), 0 10px 24px -14px rgba(47,83,130,.35); }
  40%{ border-color:#6E42D8; box-shadow:0 0 0 1px rgba(110,66,216,.18), 0 10px 24px -14px rgba(110,66,216,.32); }
  60%{ border-color:#C23A85; box-shadow:0 0 0 1px rgba(194,58,133,.18), 0 10px 24px -14px rgba(194,58,133,.32); }
  80%{ border-color:#B8862E; box-shadow:0 0 0 1px rgba(184,134,46,.20), 0 10px 24px -14px rgba(184,134,46,.35); }
}
html[data-theme="light"] .package-card, html[data-theme="light"] .service-card,
html[data-theme="light"] .style-card, html[data-theme="light"] .partner-card{
  animation-name:autoThemeCycleLight;
}
html[data-theme="light"] .package-card.featured{ animation:none; }
@media (prefers-reduced-motion: reduce){
  html[data-theme="light"] .package-card, html[data-theme="light"] .service-card,
  html[data-theme="light"] .style-card, html[data-theme="light"] .partner-card{ animation:none !important; }
}

/* ==========================================================================
   v8 — AI hero: narrow left column + CAD blueprint art panel
   ========================================================================== */
.ai-hero-morph{ font-size:clamp(.95rem, 2vw, 1.35rem); min-height:2.9em; margin:1.1rem 0 1.2rem; }
.cad-art-panel{
  position:relative; border:1px solid var(--line-strong); border-radius:var(--radius-md, 12px);
  background:
    radial-gradient(80% 70% at 70% 20%, rgba(59,100,155,.10), transparent 65%),
    rgba(10,16,22,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  aspect-ratio:13 / 10; overflow:hidden; isolation:isolate;
}
[data-theme="light"] .cad-art-panel{ background:
    radial-gradient(80% 70% at 70% 20%, rgba(47,83,130,.08), transparent 65%),
    rgba(255,255,255,.6); }
.cad-art-panel canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
@media (max-width: 1060px){ .cad-art-panel{ max-width:560px; } }

/* ==========================================================================
   v8 — chat privacy line + AI connections grid
   ========================================================================== */
.chat-privacy{ padding:.55rem 1rem .8rem; margin:0; font-size:.72rem; color:var(--text-faint); text-align:center; letter-spacing:.02em; }
[data-theme="light"] .ai-conn-card{ background:rgba(255,255,255,.62); }
@keyframes connPulse{ 50%{ opacity:.45; } }
.install-app-btn{ margin-bottom:1rem; font-size:.78rem; }
.order-field .opt{ color:var(--text-faint); font-weight:400; font-size:.72rem; }

/* ==========================================================================
   v8 — engine catalog badges, offer cards, priority strip
   ========================================================================== */
.ai-badge{ font-family:var(--f-mono, monospace); font-size:.58rem; letter-spacing:.14em; padding:.18rem .5rem; border-radius:999px; border:1px solid; margin-left:auto; flex:none; }
.ai-badge.free{ color:var(--green-bright); border-color:var(--green-bright); background:rgba(136,255,5,.08); }
.ai-badge.paid{ color:var(--copper-bright); border-color:var(--copper-bright); background:rgba(79,149,1,.10); }
.ai-badge.portal{ color:var(--text-faint); border-color:var(--line-strong); }
.ai-badge.included{ color:var(--cyan-bright); border-color:var(--cyan-bright); background:rgba(59,100,155,.10); }
.ai-key-link{ font-size:.72rem; color:var(--cyan-bright); text-decoration:none; }
.ai-key-link:hover{ text-decoration:underline; }
.ai-upgrade-strip{
  margin-top:1.6rem; padding:1rem 1.2rem; border:1px solid var(--line-strong); border-radius:var(--radius-md, 12px);
  background:linear-gradient(120deg, rgba(79,149,1,.10), rgba(59,100,155,.08));
  display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; align-items:center;
}
.ai-upg-copy{ flex:1 1 340px; font-size:.82rem; color:var(--text-dim); }
.ai-upg-row{ display:flex; gap:.5rem; flex:0 1 auto; }
.ai-upg-row input{
  background:rgba(0,0,0,.25); border:1px solid var(--line-strong); border-radius:8px; color:var(--text);
  padding:.5rem .8rem; font-family:var(--f-mono, monospace); font-size:.78rem; letter-spacing:.06em; width:220px; max-width:52vw;
}
[data-theme="light"] .ai-upg-row input{ background:rgba(255,255,255,.7); }
.ai-upg-row .btn{ padding:.5rem 1rem; font-size:.78rem; }
.ai-upgrade-strip .ai-conn-note{ flex-basis:100%; margin:0; }
.ai-plan-remove{ background:none; border:none; color:var(--text-faint); font-size:.68rem; text-decoration:underline; cursor:pointer; padding:0; }

/* v8 — pricing priority note */
.priority-note{
  margin:1rem auto 0; max-width:640px; padding:.7rem 1rem; font-size:.8rem; color:var(--text-dim);
  border:1px solid var(--copper-bright); border-radius:10px; background:rgba(79,149,1,.08); text-align:center;
}

/* ==========================================================================
   v8 — HERO SPACING + CAD PANEL THEME TINT
   ========================================================================== */
.page-hero-inner.about-hero-grid{ align-items:center; gap:clamp(1.6rem, 3vw, 3.4rem); }
.about-hero-left h1{ margin-bottom:.35em; }
.about-hero-left p{ margin-top:.4rem; }
.cad-art-panel{
  border-color:var(--copper-bright);
  background:
    radial-gradient(90% 80% at 75% 15%, rgba(136,255,5,.06), transparent 60%),
    radial-gradient(80% 70% at 20% 85%, rgba(59,100,155,.10), transparent 65%),
    linear-gradient(160deg, rgba(79,149,1,.08), transparent 45%),
    rgba(8,14,10,.5);
  box-shadow:inset 0 0 40px rgba(79,149,1,.06), 0 0 30px rgba(79,149,1,.08);
}
[data-theme="light"] .cad-art-panel{
  background:
    radial-gradient(90% 80% at 75% 15%, rgba(63,122,0,.07), transparent 60%),
    radial-gradient(80% 70% at 20% 85%, rgba(47,83,130,.08), transparent 65%),
    linear-gradient(160deg, rgba(63,122,0,.06), transparent 45%),
    rgba(255,255,255,.72);
  box-shadow:inset 0 0 40px rgba(63,122,0,.05), 0 0 24px rgba(63,122,0,.08);
}

/* ==========================================================================
   v8 — LIVING BORDERS EVERYWHERE
   The color-cycling border treatment (previously only on package/service/
   style/partner cards) now breathes across the project's major panels.
   ========================================================================== */
.cad-art-panel, .chat-shell, .gfx-panel, .ai-conn-card, .ai-conn-offer,
.ai-upgrade-strip, .priority-note{
  animation: autoThemeCycle 18s ease-in-out infinite;
}
.gfx-panel:nth-child(2), .ai-conn-grid > *:nth-child(2){ animation-delay:-4s; }
.gfx-panel:nth-child(3), .ai-conn-grid > *:nth-child(3){ animation-delay:-8s; }
.gfx-panel:nth-child(4), .ai-conn-grid > *:nth-child(4){ animation-delay:-12s; }
.gfx-panel:nth-child(5), .ai-conn-grid > *:nth-child(5){ animation-delay:-15s; }
html[data-theme="light"] .cad-art-panel, html[data-theme="light"] .chat-shell,
html[data-theme="light"] .gfx-panel, html[data-theme="light"] .ai-conn-card,
html[data-theme="light"] .ai-conn-offer, html[data-theme="light"] .ai-upgrade-strip,
html[data-theme="light"] .priority-note{
  animation-name:autoThemeCycleLight;
} /* keep the ACTIVE green lock visible */

/* ==========================================================================
   v8 — GRADIENT SECTION SEAMS
   Structural separators stop being flat gray lines: they become soft
   multicolor gradients that fade at the edges, with a faint glow.
   ========================================================================== */
:root{
  --seam: linear-gradient(90deg, transparent 1%, rgba(79,149,1,.55) 22%, rgba(59,100,155,.55) 46%, rgba(155,107,255,.4) 68%, rgba(136,255,5,.4) 86%, transparent 99%);
  --seam-soft: linear-gradient(90deg, transparent 2%, rgba(79,149,1,.28) 30%, rgba(59,100,155,.26) 60%, transparent 98%);
}
html[data-theme="light"]{
  --seam: linear-gradient(90deg, transparent 1%, rgba(63,122,0,.6) 22%, rgba(47,83,130,.55) 46%, rgba(110,66,216,.4) 68%, rgba(63,122,0,.35) 86%, transparent 99%);
  --seam-soft: linear-gradient(90deg, transparent 2%, rgba(63,122,0,.3) 30%, rgba(47,83,130,.28) 60%, transparent 98%);
}
nav{ border-bottom-color:transparent; border-image:var(--seam) 1; }
.news-band{ border-top-color:transparent; border-bottom-color:transparent; border-image:var(--seam) 1; box-shadow:0 -1px 18px rgba(79,149,1,.05), 0 1px 18px rgba(59,100,155,.05); }
footer{ border-top-color:transparent; border-image:var(--seam) 1; }
.footer-bottom{ border-top-color:transparent; border-image:var(--seam-soft) 1; }
.about-fact-row{ border-top-color:transparent; border-image:var(--seam-soft) 1; }
.chat-topbar{ border-bottom-color:transparent; border-image:var(--seam-soft) 1; }
.chat-input{ border-top-color:transparent; border-image:var(--seam-soft) 1; }
.service-list{ border-top-color:transparent; border-image:var(--seam-soft) 1; }
.service-row, .status-row, .info-row, .hash-row{ border-bottom-color:transparent; border-image:var(--seam-soft) 1; }
.status-row:first-child{ border-top-color:transparent; }
.hash-row:last-child, .info-row:last-child{ border-image:none; }
@media (prefers-reduced-motion: reduce){
  .cad-art-panel, .chat-shell, .gfx-panel, .ai-conn-card, .ai-conn-offer,
  .ai-upgrade-strip, .priority-note{ animation:none; }
}

/* ==========================================================================
   v8 — MOBILE DEVICE HARDENING
   16px form controls on small screens stop iOS Safari's zoom-on-focus jump;
   touch devices get comfortable tap sizing on dense controls.
   ========================================================================== */
@media (max-width: 640px){
  input, select, textarea{ font-size:16px !important; }
  .ai-upg-row input{ width:100%; max-width:none; }
  .ai-upg-row{ flex:1 1 100%; }
  .view-opt, .billing-opt, .pkg-toggle{ min-height:42px; }
  .cad-art-panel{ max-width:none; }
}
@media (hover: none) and (pointer: coarse){
  .spec-chip{ padding-block:.65rem; }
  .tool-tab{ min-height:44px; }
}

/* ==========================================================================
   v8 — BRAND LOCKUP: wordmark sized to the logo
   ========================================================================== */
/* The clamp lives on .brand, not on .brand-word. Both children size themselves
   in em from it, so the mark and the wordmark scale together at every
   breakpoint — which is what the v11 block below always intended. When the
   clamp sat on .brand-word, the image inherited font-size from the anchor
   instead (a constant 1rem), so the wordmark grew on wide screens while the
   mark stayed put and the lockup came apart. */
.brand{ gap:.7rem; font-size:clamp(1.35rem, 1.05rem + 1.3vw, 2.15rem); }
.brand-word{ font-size:1em; line-height:1; }
.foot-brand .brand{ font-size:clamp(1.1rem, 1rem + .5vw, 1.5rem); }
.foot-brand .brand-word{ font-size:1em; }

@media (max-width: 420px){ .brand{ font-size:1.2rem; } }

/* ==========================================================================
   v8 — PARTNER SKETCH SYMBOLS
   Each partner's real logo redrawn as a living pencil sketch: round-capped
   strokes, a faint "overdraw" ghost line, dashed construction ticks, and a
   slow draw-on loop — the same drafting language as the CAD hero.
   ========================================================================== */
.partner-card{ text-align:left; }
.partner-sketch{ display:flex; margin-bottom:.9rem; }
.partner-sketch svg{ width:72px; height:72px; overflow:visible; }
.partner-sketch .skl{
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:sklDraw 7s ease-in-out infinite;
}
.partner-sketch .skl-ghost{ opacity:.35; animation-delay:.5s; }
.partner-sketch .skl-b{ animation-delay:1s; }
.partner-sketch .skl-c{ animation-delay:1.6s; }
.partner-sketch .construction{ stroke:var(--text-faint); stroke-width:1.4; opacity:.7; animation-delay:2s; }
@keyframes sklDraw{
  0%{ stroke-dashoffset:100; }
  38%{ stroke-dashoffset:0; }
  78%{ stroke-dashoffset:0; }
  92%, 100%{ stroke-dashoffset:-100; }
}
.partner-card:hover .partner-sketch svg{ transform:rotate(-2.5deg) scale(1.07); }
.partner-sketch svg{ transition:transform .45s var(--ease, ease); }
html[data-theme="light"] .partner-sketch .skl-a{ filter:saturate(1.1) brightness(.92); }
@media (prefers-reduced-motion: reduce){
  .partner-sketch .skl{ animation:none; stroke-dashoffset:0; }
}

/* ==========================================================================
   v8 — OFFICIAL MARK (recycle · gear · globe), auto-cycling colorways
   ========================================================================== */
/* Size and radius are owned by the v11 lockup block near the end of this file —
   the mark is sized in em there so it tracks the wordmark. Only the paint
   treatment lives here, so the two blocks cannot disagree about geometry. */
.brand-mark{ object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
html[data-theme="light"] .brand-mark{ filter:drop-shadow(0 2px 5px rgba(20,30,20,.25)); }

/* ==========================================================================
   v8 — ENGINE ROW (one-line catalog, brand medallions)
   All engine cards ride a single horizontal lane: six compact cells on
   desktop, a snap-scroll swipe row on smaller screens. Each provider wears
   its official symbol in a glowing medallion.
   ========================================================================== */
.ai-conn-grid{ display:flex; flex-wrap:nowrap; gap:.9rem; overflow-x:auto;
  padding:.35rem .15rem 1rem; scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.ai-logo{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); background:
  radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--green-bright) 16%, transparent), transparent 68%),
  color-mix(in srgb, var(--surface) 80%, black);
  box-shadow:0 0 14px rgba(0,0,0,.35), inset 0 0 10px rgba(255,255,255,.03);
  transition:transform .35s ease, box-shadow .35s ease; }
.ai-logo svg{ width:26px; height:26px; display:block; }
.ai-logo[data-provider="gemini"]{ box-shadow:0 0 16px rgba(123,97,255,.28); }
.ai-logo[data-provider="openrouter"]{ box-shadow:0 0 16px rgba(167,139,250,.26); }
.ai-logo[data-provider="anthropic"]{ box-shadow:0 0 16px rgba(217,119,87,.3); }
.ai-logo[data-provider="openai"]{ box-shadow:0 0 16px rgba(232,232,230,.18); }
.ai-logo[data-provider="vercel"]{ box-shadow:0 0 16px rgba(237,237,237,.18); }
html[data-theme="light"] .ai-logo{ background:
  radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--green-bright) 14%, transparent), transparent 68%),
  color-mix(in srgb, var(--surface) 88%, white); box-shadow:0 1px 8px rgba(30,40,30,.14); }
html[data-theme="light"] .ai-logo[data-provider="openai"] svg{ stroke:#1A1A18; }
html[data-theme="light"] .ai-logo[data-provider="vercel"] path{ fill:#111; }

/* ==========================================================================
   v8 — CONTACT CENTERED · CAD RESPONSIVE · INSTALL POPUP · TOOL POLISH
   ========================================================================== */
.contact-center{ max-width:680px; margin:0 auto; }
.contact-center .contact-form{ width:100%; }

.cad-canvas{ background:#0B1411; touch-action:none; }
.cad-toolbar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem; }
@media (max-width: 640px){
  .cad-canvas{ height:300px; }
  .cad-statusbar{ flex-wrap:wrap; gap:.3rem .8rem; }
}

.install-pop{ position:fixed; right:18px; bottom:18px; z-index:220; display:flex; align-items:center;
  gap:.85rem; max-width:min(400px, calc(100vw - 36px)); padding:.95rem 1.05rem;
  background:color-mix(in srgb, var(--surface) 92%, black); border:1px solid var(--line-strong);
  border-radius:16px; box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease; }
.install-pop.show{ opacity:1; transform:translateY(0); }
.install-pop-mark{ width:42px; height:42px; object-fit:contain; flex:none; }
.install-pop-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.install-pop-body strong{ font-size:.95rem; }
.install-pop-body span{ font-size:.76rem; color:var(--text-faint); line-height:1.4; }
.install-pop-actions{ display:flex; flex-direction:column; gap:.4rem; flex:none; }
html[data-theme="light"] .install-pop{ background:#fff; box-shadow:0 14px 40px rgba(30,40,30,.2); }
@media (max-width: 480px){ .install-pop{ flex-wrap:wrap; } .install-pop-actions{ flex-direction:row; width:100%; } .install-pop-actions .btn{ flex:1; } }

/* tools page rhythm: consistent card padding, headings and control spacing */
.tool-panel{ padding:clamp(1.1rem, 2.4vw, 1.8rem); }
.tool-panel h3{ font-size:clamp(1.15rem, 1rem + .8vw, 1.5rem); margin-bottom:.35rem; }
.tool-panel .tool-sub{ margin-bottom:1.1rem; }
.tool-panel label{ font-size:.8rem; }
@media (max-width: 640px){
  .tool-panel{ padding:1rem .85rem; }
  .tool-panel .btn{ width:100%; }
  .cad-toolbar .btn, .cad-toolbar .cad-tool-btn{ width:auto; flex:1 1 auto; }
}

/* ==========================================================================
   v8 — DESIGN STUDIO (editorial toolbar + full-page mode)
   ========================================================================== */
#studioCanvas{ width:100%; height:420px; display:block; cursor:crosshair; touch-action:none;
  background:#0A0F0C; border:1px solid var(--line-strong); border-radius:var(--radius-sm); }
html[data-theme="light"] #studioCanvas{ background:#FBFDFA; }
.studio-toolbar{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-bottom:.8rem; }
.studio-gap{ flex:1; }
.studio-fill{ font-size:.78rem; }
#panel-studio.studio-full{ position:fixed; inset:0; z-index:300; margin:0; border-radius:0;
  display:flex; flex-direction:column; padding:clamp(.8rem, 2vw, 1.6rem);
  background:var(--bg); overflow:auto; }
#panel-studio.studio-full #studioCanvas{ flex:1; height:auto; min-height:300px; }
body.studio-lock{ overflow:hidden; }
@media (max-width: 640px){
  #studioCanvas{ height:320px; }
  .studio-toolbar .btn{ width:auto; flex:1 1 auto; }
}

/* ==========================================================================
   v8 — LIGHT MODE REPAIR + LOGO-SYNCED SHADES
   The logo publishes its active colorway as --brandA/B/C (script). In light
   mode every white surface takes a soft shade mixed from those vars, so the
   whole page re-tints in step with the logo's auto-change. Dark mode keeps
   its own aesthetic. Also fixes the surfaces that still wore dark-theme
   paint in light mode (workbench, tool/converter tabs, accents).
   ========================================================================== */
:root{ --brandA:#2F6BD8; --brandB:#2E9C52; --brandC:#7A3FBF; }

/* accents that were unreadable on white */
html[data-theme="light"]{
  --green:        #1E7A41;
  --green-bright: #188C46;
}

/* the muddy panel: workbench wore dark glass in light mode */
html[data-theme="light"] .workbench{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--brandA) 8%, #FFFFFF),
    color-mix(in srgb, var(--brandB) 5%, #FFFFFF) 55%,
    color-mix(in srgb, var(--brandC) 8%, #FFFFFF));
  border:1px solid color-mix(in srgb, var(--brandA) 24%, rgba(10,20,12,.12));
  box-shadow:0 24px 60px -34px color-mix(in srgb, var(--brandA) 35%, rgba(20,30,20,.35)),
             inset 0 1px 0 0 rgba(255,255,255,.7);
}
html[data-theme="light"] .tool-tab, html[data-theme="light"] .conv-tab{
  background:rgba(255,255,255,.78); border-color:var(--line);
  box-shadow:0 1px 0 0 rgba(20,30,20,.08), inset 0 1px 0 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .tool-tab:hover, html[data-theme="light"] .conv-tab:hover{
  background:color-mix(in srgb, var(--brandA) 8%, #FFFFFF);
  border-color:color-mix(in srgb, var(--brandA) 40%, transparent);
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--brandA) 45%, transparent);
}
html[data-theme="light"] .workbench .tool-tab{ background:transparent; border-color:transparent; box-shadow:none; }
html[data-theme="light"] .workbench .tool-tab:hover{
  background:color-mix(in srgb, var(--brandA) 7%, #FFFFFF); border-color:var(--line-strong);
}
html[data-theme="light"] .tool-tab:hover svg{ color:var(--brandB); }

/* logo-shade washes across the big white sections */
html[data-theme="light"] body{
  background:
    radial-gradient(85% 60% at 78% -6%, color-mix(in srgb, var(--brandA) 10%, transparent), transparent 62%),
    radial-gradient(70% 55% at -8% 34%, color-mix(in srgb, var(--brandB) 9%, transparent), transparent 60%),
    radial-gradient(80% 60% at 55% 108%, color-mix(in srgb, var(--brandC) 9%, transparent), transparent 62%),
    var(--bg);
}
html[data-theme="light"] .page-hero, html[data-theme="light"] .hero{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brandA) 7%, transparent), transparent 80%);
}
html[data-theme="light"] footer{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brandC) 7%, #EDF1EB), #EDF1EB);
}
html[data-theme="light"] .news-band{
  background:color-mix(in srgb, var(--brandB) 6%, #F4F7F2);
}
html[data-theme="light"] .slide-card, html[data-theme="light"] .path-card,
html[data-theme="light"] .service-card, html[data-theme="light"] .info-card,
html[data-theme="light"] .count-card, html[data-theme="light"] .package-card,
html[data-theme="light"] .partner-card, html[data-theme="light"] .sr-card,
html[data-theme="light"] .ondemand-card, html[data-theme="light"] .gfx-panel,
html[data-theme="light"] .ai-conn-card{
  background:linear-gradient(175deg, color-mix(in srgb, var(--brandA) 6%, rgba(255,255,255,.86)), rgba(255,255,255,.72) 70%);
}
html[data-theme="light"] .package-card:nth-child(2){ background:linear-gradient(175deg, color-mix(in srgb, var(--brandB) 7%, rgba(255,255,255,.88)), rgba(255,255,255,.74) 70%); }
html[data-theme="light"] .package-card:nth-child(3){ background:linear-gradient(175deg, color-mix(in srgb, var(--brandC) 7%, rgba(255,255,255,.88)), rgba(255,255,255,.74) 70%); }
html[data-theme="light"] .chat-shell{
  background:linear-gradient(170deg, color-mix(in srgb, var(--brandA) 6%, rgba(255,255,255,.9)), rgba(255,255,255,.8) 65%);
}
html[data-theme="light"] .cad-art-panel{
  background:linear-gradient(160deg, color-mix(in srgb, var(--brandB) 7%, #FFFFFF), color-mix(in srgb, var(--brandA) 5%, #FFFFFF));
}
/* solids ease between colorways; gradients re-tint on the next paint */
html[data-theme="light"] .news-band, html[data-theme="light"] .tool-tab,
html[data-theme="light"] .conv-tab{ transition:background-color 1s ease, border-color .6s ease, box-shadow .6s ease, transform .2s var(--ease), color .2s var(--ease); }

/* ==========================================================================
   v8 — LIGHT MODE: EVERY SECTION VISIBLY MULTI-COLORED
   Sections cycle through the three live brand accents (--brandA/B/C, synced
   to the logo colorway) at readable strength, with hairline seams so each
   section reads as its own band. Canvas art & animations get real presence
   on the light canvas.
   ========================================================================== */
html[data-theme="light"] .section:nth-of-type(3n+1){
  background:linear-gradient(180deg, color-mix(in srgb, var(--brandA) 12%, transparent), color-mix(in srgb, var(--brandA) 3%, transparent) 70%, transparent);
}
html[data-theme="light"] .section:nth-of-type(3n+2){
  background:linear-gradient(180deg, color-mix(in srgb, var(--brandB) 12%, transparent), color-mix(in srgb, var(--brandB) 3%, transparent) 70%, transparent);
}
html[data-theme="light"] .section:nth-of-type(3n){
  background:linear-gradient(180deg, color-mix(in srgb, var(--brandC) 12%, transparent), color-mix(in srgb, var(--brandC) 3%, transparent) 70%, transparent);
}
html[data-theme="light"] .section{
  border-top:1px solid color-mix(in srgb, var(--brandA) 26%, rgba(10,20,12,.08));
}
html[data-theme="light"] .page-hero, html[data-theme="light"] .hero{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--brandA) 14%, transparent),
    color-mix(in srgb, var(--brandB) 8%, transparent) 55%,
    color-mix(in srgb, var(--brandC) 12%, transparent));
}
html[data-theme="light"] .news-band{ background:color-mix(in srgb, var(--brandB) 10%, #F4F7F2); }
html[data-theme="light"] footer{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brandC) 11%, #EDF1EB), color-mix(in srgb, var(--brandA) 5%, #EDF1EB));
}
html[data-theme="light"] .ai-upgrade-strip, html[data-theme="light"] .priority-note{
  background:linear-gradient(120deg, color-mix(in srgb, var(--brandB) 10%, #fff), color-mix(in srgb, var(--brandA) 6%, #fff));
}

/* CAD hero sheet: warm drafting paper so the linework pops */
html[data-theme="light"] .cad-art-panel{
  background:linear-gradient(160deg, #FDFBF2, color-mix(in srgb, var(--brandB) 6%, #F7F9F1));
  border-color:color-mix(in srgb, var(--brandA) 38%, rgba(10,20,12,.16));
}

/* animations & art earn real presence on the light canvas */
html[data-theme="light"] #universeBg{ opacity:.8; }
html[data-theme="light"] .hero canvas{ opacity:.85; } html[data-theme="light"] .page-hero canvas{ opacity:.5; }
html[data-theme="light"] .page-hero.ai-tone canvas{ opacity:.55; }

/* ==========================================================================
   v8 — ENGINE LANE PREV/NEXT ARROWS
   ========================================================================== */
.conn-lane-wrap{ position:relative; }

/* install card: per-platform hint + iOS share glyph */
.install-pop-hint{ display:block; margin-top:.45rem; font-size:.78rem; color:var(--text-faint); line-height:1.5; }
.install-pop-hint b{ color:var(--text); }
.ios-share{ display:inline-block; padding:0 .3em; border:1px solid var(--line); border-radius:5px; font-size:.85em; }

/* ==========================================================================
   v8 — LIVE MARKET TOOLS (TradingView-style chart + Grafana-style stats)
   ========================================================================== */
.mchart-toolbar{ display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:center; margin-bottom:.9rem; }
@keyframes mktPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(136,255,5,.25);} 50%{ box-shadow:0 0 12px 2px rgba(136,255,5,.12);} }
.mkt-up{ color:var(--green-bright) !important; }
.mkt-down{ color:#FF5A5A !important; }

.order-field{ margin-top:1rem; }
.order-field label{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.4rem;
}
.order-field input, .order-field select{
  width:100%; font:inherit; font-size:.92rem; color:var(--text);
  background:color-mix(in srgb, var(--bg, #060A07) 88%, #fff 4%);
  border:1px solid var(--line); border-radius:10px; padding:.6rem .75rem; outline:none;
}
.order-field input:focus, .order-field select:focus{ border-color:var(--green-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--green-bright) 22%, transparent); }
.key-hint{ font-size:.74rem; color:var(--text-faint); margin-top:.4rem; line-height:1.45; }

/* v11 — wordmark kerning + logo alignment: Orbitron has no L→T kern pair, so the
   T is pulled optically tight; the mark is sized in em so it scales with the
   wordmark at every breakpoint and stays vertically centred beside it. */
.brand-word .tk{ margin-left:-.085em; }
.brand{ align-items:center; }
.brand .brand-mark{ height:2.6em; width:2.6em; font-size:inherit; border-radius:10px;
  overflow:hidden; }
.brand-word{ line-height:1; display:inline-block; transform:translateY(.03em); }
.foot-brand .brand-mark{ height:2.2em; width:2.2em; }

/* v12 — selects can never render white-on-white again: dark base everywhere,
   explicit light-theme override. Belt-and-braces under any stale stylesheet. */
select{ background-color:color-mix(in srgb, var(--bg, #060A07) 88%, #fff 5%); border:1px solid var(--line); border-radius:8px; padding:.3rem .5rem; }
html[data-theme="light"] select{ background-color:#fff; color:#15241A; }

/* ============================================================================
   v13 — LIVING BORDERS: every major bordered surface slowly cycles its edge
   through the brand triad (green → globe blue → violet) so section borders
   feel alive instead of flat gray lines. Three staggered phases keep panels
   from pulsing in unison; reduced-motion gets a fixed brand tint.
   ============================================================================ */
@keyframes dgbsBorderCycle{
  0%   { border-color: rgba(79, 149, 1, .38); }
  33%  { border-color: rgba(59, 100, 155, .48); }
  66%  { border-color: rgba(124, 92, 214, .42); }
  100% { border-color: rgba(79, 149, 1, .38); }
}
.gfx-panel, .path-card, .slide-card, .tool-panel, .ai-conn-card,
.order-modal-panel, .markets-promo, .hero-stats > div,
.industry-card, .info-card, .city-card, .faq-item, .font-card,
.mstat-card, .mchart-wrap, .weather-card, .chat-shell, .search-results{
  animation: dgbsBorderCycle 14s linear infinite;
}
.path-card, .info-card, .mstat-card, .faq-item{ animation-delay:-4.6s; }
.slide-card, .city-card, .ai-conn-card, .hero-stats > div{ animation-delay:-9.3s; }
.tool-tab, .conv-tab, .mind-chip{ animation: dgbsBorderCycle 18s linear infinite; }
.tool-tab:nth-child(3n){ animation-delay:-6s; }
.tool-tab:nth-child(3n+1){ animation-delay:-12s; }
/* hover/active emphasis must win over the cycle */
.tool-tab:hover, .tool-tab.active, .conv-tab:hover, .conv-tab.active,
.mind-chip:hover, .mind-chip.active, .ai-conn-card:hover, .path-card:hover,
.slide-card:hover, .ai-conn-keyless{
  animation: none;
}
html[data-theme="light"] .gfx-panel, html[data-theme="light"] .path-card,
html[data-theme="light"] .slide-card, html[data-theme="light"] .tool-panel,
html[data-theme="light"] .hero-stats > div{ animation-duration:16s; }
@media (prefers-reduced-motion: reduce){
  .gfx-panel, .path-card, .slide-card, .tool-panel, .ai-conn-card,
  .order-modal-panel, .markets-promo, .hero-stats > div, .industry-card,
  .info-card, .city-card, .faq-item, .font-card, .mstat-card, .mchart-wrap,
  .weather-card, .chat-shell, .search-results, .tool-tab, .conv-tab, .mind-chip{
    animation: none; border-color: rgba(79, 149, 1, .32);
  }
}

/* ============================================================================
   v14 — PAGE LAYER SYSTEM (rebuild). Every page is stacked in fixed layers so
   the digital-universe background can never bleed through content and no two
   modules fight over z-index:
     L0 background canvas  ·  L1 page content  ·  L2 sticky chrome (wire + nav)
     L3 overlays (modals, chat)  ·  L4 toasts / search
   ============================================================================ */
:root{ --z-bg:0; --z-content:1; --z-chrome:60; --z-overlay:100; --z-toast:220; --z-search:230; }
#universeBg{ z-index:var(--z-bg); opacity:.62; }
html[data-theme="light"] #universeBg{ opacity:.42; }
.hero, .page-hero, main, footer, .news-band{ position:relative; z-index:var(--z-content); }
.market-ticker{ z-index:calc(var(--z-chrome) + 1); }
.nav{ z-index:var(--z-chrome); }
.order-modal{ z-index:var(--z-overlay); }
.install-pop, .notify-overlay{ z-index:var(--z-toast); }
.search-overlay{ z-index:var(--z-search); }
/* content surfaces are opaque enough that glyph rain never crosses text */
.section > .container, .section.container{ isolation:isolate; }
.path-card, .tool-panel, .gfx-panel, .info-card, .flashcard-face, .industry-card,
.slide-card, .faq-item, .font-card, .city-card, .weather-card, .chat-shell, .package-card, .service-card{
  background-color:color-mix(in srgb, var(--surface) 92%, transparent);
}
html:not([data-theme="light"]) .hero-inner, html:not([data-theme="light"]) .page-hero-inner{
  text-shadow:0 1px 18px rgba(5,8,5,.85);
}

/* ============================================================================
   v14 — FORM CONTROLS, ONE RULE FOR EVERY PAGE. The white-on-white selects
   came from a global rule that set text colour but never a background, so
   the browser painted its default white box. Every control now paints the
   theme surface in both themes; tool-specific rules only refine spacing.
   ============================================================================ */
select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]){
  background-color:var(--surface); color:var(--text);
  border:1px solid var(--line-strong); border-radius:8px;
  color-scheme:dark; accent-color:var(--green-bright, #6BC000);
}
select{ padding:.45rem 2rem .45rem .7rem; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B3AB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:14px; }
option, optgroup{ background:var(--surface); color:var(--text); }
select:focus, textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus{
  outline:none; border-color:var(--green-bright, #6BC000); box-shadow:0 0 0 3px rgba(79,149,1,.22);
}
input::placeholder, textarea::placeholder{ color:var(--text-faint); }
html[data-theme="light"] select, html[data-theme="light"] textarea,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]){
  background-color:#fff; color:#0B1410; color-scheme:light; border-color:rgba(11,20,16,.18);
}
html[data-theme="light"] option, html[data-theme="light"] optgroup{ background:#fff; color:#0B1410; }

.cf-industry-note{ display:flex; align-items:center; gap:.5rem; margin:0 0 .55rem; padding:.5rem .75rem; border-radius:10px;
  background:rgba(79,149,1,.1); border:1px solid rgba(79,149,1,.3); color:var(--text-dim); font-size:.86rem; }
.cf-industry-note i{ width:8px; height:8px; border-radius:50%; background:var(--green-bright, #7EE0A3); box-shadow:0 0 10px var(--green-bright, #7EE0A3); flex:none; }
.cf-industry-note b{ color:var(--text); font-weight:600; }

/* ============================================================================
   DGBS AI SPECIALIST PAGE — restored styles (B58)
   ============================================================================ */

.credit-pill.credit-empty{ color:var(--warn); border-color:var(--warn); }

.credit-honesty-note{ margin-top:1.4rem; font-size:.8rem; color:var(--text-faint); text-align:center; }

.spec-arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--text-dim); font-size:1.15rem; line-height:1;
  cursor:pointer; transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.spec-arrow:hover{ color:var(--copper-bright); border-color:var(--copper); transform:scale(1.08); }

.ai-conn-card.active{ border-color:var(--green-bright); box-shadow:0 0 0 1px var(--green-bright), 0 0 26px rgba(136,255,5,.12); }

.ai-conn-head{ display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem; }

.ai-conn-head h3{ font-size:.95rem; margin:0; }

.ai-conn-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-faint); flex:none; }

.ai-conn-card.active .ai-conn-dot{ background:var(--green-bright); box-shadow:0 0 8px var(--green-bright); animation:connPulse 2.2s infinite; }

.ai-conn-card p{ font-size:.78rem; color:var(--text-dim); margin:.2rem 0; }

.ai-conn-card code{ font-size:.72rem; }

.ai-conn-actions{ display:flex; gap:.5rem; align-items:center; margin-top:.65rem; flex-wrap:wrap; }

.ai-conn-actions .btn{ padding:.35rem .8rem; font-size:.72rem; }

.ai-conn-live{ font-family:var(--f-mono, monospace); font-size:.68rem; letter-spacing:.14em; color:var(--green-bright); }

.ai-conn-add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  min-height:150px; border:1.5px dashed var(--line-strong); border-radius:var(--radius-md, 12px);
  background:transparent; color:var(--text-dim); cursor:pointer; font:inherit; font-size:.85rem;
  transition:border-color .25s, color .25s, transform .25s, box-shadow .25s;
}

.ai-conn-add small{ font-size:.68rem; color:var(--text-faint); }

.ai-conn-plus{
  font-size:2.4rem; line-height:1; font-weight:200; color:var(--green-bright);
  transition:transform .3s;
}

.ai-conn-add:hover{ border-color:var(--green-bright); color:var(--text); transform:translateY(-3px); box-shadow:0 8px 26px rgba(136,255,5,.10); }

.ai-conn-add:hover .ai-conn-plus{ transform:rotate(90deg) scale(1.15); }
@media (prefers-reduced-motion: reduce){
 .ai-conn-card.active .ai-conn-dot{ animation:none; }
 .ai-conn-add:hover{ transform:none; }
}

.ai-conn-offer:hover{ border-color:var(--green-bright); }

.ai-conn-card.active{ animation:none; }
@media (prefers-reduced-motion: reduce){

  .cad-art-panel, .chat-shell, .gfx-panel, .ai-conn-card, .ai-conn-offer,
  .ai-upgrade-strip, .priority-note{ animation:none; }
}

.ai-conn-grid::-webkit-scrollbar{ height:8px; }

.ai-conn-grid::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; }

.ai-conn-offer h3{ font-size:1.02rem; margin:.55rem 0 .3rem; line-height:1.25; }

.ai-conn-offer p{ font-size:.8rem; line-height:1.45; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 .6rem; }

.ai-conn-offer .ai-conn-actions{ margin-top:auto; }

.ai-conn-medrow{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }

.ai-conn-offer:hover .ai-logo{ transform:translateY(-3px) scale(1.07) rotate(-4deg); }

.ai-conn-offer:hover{ transform:translateY(-4px); }

.ai-conn-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; }

.ai-conn-add .ai-logo{ width:52px; height:52px; }

.ai-conn-reset{ flex:0 0 auto !important; align-self:stretch; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3rem; padding:.7rem .9rem;
  background:transparent; border:1px dashed var(--line-strong); border-radius:14px;
  color:var(--text-faint); cursor:pointer; font:inherit; transition:border-color .3s, color .3s; }

.ai-conn-reset span{ font-size:1.4rem; line-height:1; }

.ai-conn-reset small{ font-size:.66rem; letter-spacing:.04em; text-align:center; line-height:1.35; }

.ai-conn-reset:hover{ border-color:var(--green-bright); color:var(--text); }
@media (max-width: 640px){
 .ai-conn-grid > *{ flex-basis:78vw; }
}

.conn-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  font-size:1.35rem; line-height:1; padding-bottom:3px;
  color:var(--green-bright); background:rgba(8,14,10,.82);
  border:1px solid rgba(136,255,5,.4);
  box-shadow:0 4px 18px rgba(0,0,0,.35), 0 0 12px rgba(136,255,5,.18);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.conn-lane-wrap.has-nav .conn-nav{ display:flex; }

.conn-nav:hover:not(:disabled){ transform:translateY(-50%) scale(1.12); box-shadow:0 6px 22px rgba(0,0,0,.4), 0 0 18px rgba(136,255,5,.4); }

.conn-nav:disabled{ opacity:.22; cursor:default; }

.conn-nav-prev{ left:-10px; }

.conn-nav-next{ right:-10px; }

html[data-theme="light"] .conn-nav{
  color:#0F6030; background:rgba(255,255,255,.92);
  border-color:color-mix(in srgb, var(--brandB) 55%, rgba(10,20,12,.2));
  box-shadow:0 4px 16px rgba(20,40,28,.18);
}
@media (max-width:720px){
 .conn-nav-prev{ left:-4px; }
 .conn-nav-next{ right:-4px; }
}

.markets-promo:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.3); }

.markets-promo svg{ width:30px; height:30px; flex:none; color:var(--green-bright); }

.markets-promo span{ font-size:.86rem; line-height:1.5; }

.markets-promo b{ color:var(--green-bright); letter-spacing:.03em; }

.markets-promo i{ font-style:normal; margin-left:auto; white-space:nowrap; font-family:ui-monospace, monospace; font-size:.78rem; color:var(--text-faint); }
@media (max-width:600px){
 .markets-promo{ flex-wrap:wrap; }
 .markets-promo i{ margin-left:0; }
}

.ai-conn-keyless.is-online .ai-badge{ animation:mktPulse 2.2s ease-in-out infinite; }

#aiConnSave{ margin-top:1.15rem; }
@media (prefers-reduced-motion: reduce){

  .gfx-panel, .path-card, .slide-card, .tool-panel, .ai-conn-card,
  .order-modal-panel, .markets-promo, .hero-stats > div, .industry-card,
  .info-card, .city-card, .faq-item, .font-card, .mstat-card, .mchart-wrap,
  .weather-card, .chat-shell, .search-results, .tool-tab, .conv-tab, .mind-chip{
    animation: none; border-color: rgba(79, 149, 1, .32);
  }
}

/* ---- pricing: AI credits ---- */
.credit-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.1rem; margin-top:1.4rem; }
.credit-card{ background-color:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--line); border-radius:16px; padding:1.3rem; display:flex; flex-direction:column; gap:.75rem; }
.credit-card-feature{ border-color:rgba(79,149,1,.42); box-shadow:0 0 0 1px rgba(79,149,1,.14), 0 20px 50px rgba(0,0,0,.28); }
.credit-card-head{ display:flex; align-items:center; gap:.7rem; }
.credit-card h3{ margin:0; font-size:1rem; }
.credit-price{ margin:0; font-size:2rem; font-weight:600; line-height:1; }
.credit-price span{ font-size:.8rem; font-weight:400; color:var(--text-dim); display:block; margin-top:.3rem; }
.credit-list{ margin:0; padding-left:1.05rem; display:flex; flex-direction:column; gap:.35rem; color:var(--text-dim); font-size:.9rem; }
.credit-card .btn{ margin-top:auto; align-self:flex-start; }
.credit-card .credit-pill{ margin-top:auto; align-self:flex-start; }

/* ---- nav: DGBS AI gets the live accent ---- */
.nav-links a.nav-ai{ display:inline-flex; align-items:center; gap:.4rem; }
.nav-links a.nav-ai .nav-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--green-bright, #7EE0A3);
  box-shadow:0 0 8px var(--green-bright, #7EE0A3); animation:tickerPulse 2.4s ease-in-out infinite; flex:none; }
.nav-links a.nav-ai:hover{ color:var(--green-bright, #7EE0A3); }
@media (prefers-reduced-motion: reduce){ .nav-links a.nav-ai .nav-live-dot{ animation:none; } }

/* ---- tool primitives that never had styling ---- */
.btn-row{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.tool-note{ margin:.5rem 0 0; font-size:.82rem; color:var(--text-faint); line-height:1.5; }
.output-wrap{ margin-top:.75rem; }
.tool-output{ background-color:color-mix(in srgb, var(--surface-2, var(--surface)) 90%, transparent);
  border:1px solid var(--line); border-radius:10px; padding:.75rem .85rem; font-family:var(--mono, ui-monospace, monospace);
  font-size:.85rem; color:var(--text); white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto; }
.ttv-form{ display:flex; flex-direction:column; gap:.6rem; }
.mc-unsupported{ color:var(--warn); font-size:.85rem; }

/* ---- free website evaluation: the self-assessment grid ---- */
.we-quiz{ display:grid; gap:1rem; margin:1.4rem 0 1.2rem; }
.we-area{ border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem 1.1rem;
  background:color-mix(in srgb, var(--surface) 92%, transparent); }
.we-area legend{ font-family:var(--f-head); font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--copper-bright); padding:0 .5rem; }
.we-q{ padding:.6rem 0; border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.we-q:first-of-type{ border-top:0; }
.we-q p{ margin:0 0 .5rem; font-size:.95rem; line-height:1.45; }
.we-opts{ display:flex; flex-wrap:wrap; gap:.45rem; }
.we-opt{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:.28rem .7rem;
  font-size:.82rem; color:var(--text-muted); transition:border-color .18s, color .18s, background .18s; }
.we-opt:hover{ border-color:var(--copper-bright); color:var(--text); }
.we-opt input{ accent-color:var(--copper-bright); margin:0; }
.we-opt:has(input:checked){ border-color:var(--copper-bright);
  background:color-mix(in srgb, var(--copper-bright) 14%, transparent); color:var(--text); }
@media (max-width:640px){ .we-opts{ gap:.35rem; } .we-opt{ padding:.26rem .6rem; font-size:.78rem; } }

/* ---- Launch readiness audit (tool #41) --------------------------------- */
.la-stage{ margin:1.4rem 0 0; }
.la-stage-head h3{ margin:0 0 .15rem; font-size:1rem; color:var(--accent); }
.la-stage-head span{ display:block; font-size:.84rem; color:var(--text-dim); margin-bottom:.6rem; }
.la-item{ display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  padding:.7rem .8rem; border:1px solid var(--line); border-radius:10px; margin-bottom:.5rem;
  background:var(--surface); flex-wrap:wrap; }
.la-item-main{ flex:1 1 320px; min-width:0; }
.la-label{ display:block; font-weight:600; font-size:.92rem; }
.la-blocker{ font-style:normal; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:#E5533D; border:1px solid #E5533D; border-radius:999px; padding:.05rem .4rem; margin-left:.45rem; }
.la-how{ display:block; font-size:.8rem; color:var(--text-dim); margin-top:.2rem; }
.la-tool{ display:block; font-size:.78rem; color:var(--text-dim); margin-top:.25rem; opacity:.85; }
.la-tool a{ color:var(--accent); }
.la-choices{ display:flex; gap:.3rem; flex:0 0 auto; }
.la-choice{ background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:.3rem .6rem; font-size:.8rem; color:var(--text-dim); cursor:pointer; }
.la-choice:hover{ color:var(--text); border-color:var(--accent); }
.la-choice.on{ background:var(--accent); border-color:var(--accent); color:#08110A; font-weight:600; }
.la-report{ margin-top:1.4rem; border:1px solid var(--line); border-radius:12px; padding:1rem; background:var(--surface); }
.la-verdict{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.la-verdict b{ font-size:1.15rem; }
.la-verdict span{ font-size:.85rem; color:var(--text-dim); }
.la-v-yes b{ color:var(--accent); }
.la-v-soft b{ color:#D9A441; }
.la-v-no b{ color:#E5533D; }
.la-v-none b{ color:var(--text-dim); }
.la-verdict-line{ font-size:.88rem; color:var(--text-dim); margin:.4rem 0 .9rem; }
.la-score{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.la-bar{ font-family:var(--font-mono, monospace); letter-spacing:-1px; color:var(--accent); }
.la-score-sub{ font-size:.8rem; color:var(--text-dim); }
.la-list{ margin-top:1rem; }
.la-list h4{ margin:0 0 .5rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.la-list-block h4{ color:#E5533D; }
.la-fix{ border-left:2px solid var(--line); padding:.35rem 0 .35rem .7rem; margin-bottom:.45rem; }
.la-list-block .la-fix{ border-left-color:#E5533D; }
.la-fix b{ display:block; font-size:.9rem; }
.la-fix span{ display:block; font-size:.78rem; color:var(--text-dim); }

/* ==========================================================================
   Shared rail navigation — one arrow style for every sliding row (B63)
   ========================================================================== */
.rail-wrap{ position:relative; }
.rail-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:38px; height:38px; border-radius:50%; display:none;
  place-items:center; cursor:pointer;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  border:1px solid var(--line-strong); color:var(--text);
  backdrop-filter:blur(6px); transition:background .16s, border-color .16s, opacity .16s;
}
.rail-wrap.has-rail-nav .rail-nav{ display:grid; }
.rail-nav svg{ width:18px; height:18px; }
.rail-nav-prev{ left:-6px; }
.rail-nav-next{ right:-6px; }
.rail-nav:hover:not(:disabled){ background:var(--brandB); border-color:var(--brandB); color:#08110A; }
.rail-nav:focus-visible{ outline:2px solid var(--brandB); outline-offset:2px; }
.rail-nav:disabled{ opacity:.28; cursor:default; }
@media (max-width:640px){ .rail-nav{ width:32px; height:32px; } .rail-nav-prev{ left:-2px; } .rail-nav-next{ right:-2px; } }

/* ==========================================================================
   AI engine tiles — symbols instead of paragraphs (B63)
   ========================================================================== */
.ai-tile-wrap{ position:relative; flex:0 0 auto; display:flex; flex-direction:column;
  align-items:center; gap:.3rem; width:112px; }
.ai-tile{
  width:112px; display:flex; flex-direction:column; align-items:center; gap:.45rem;
  padding:.85rem .5rem .7rem; cursor:pointer; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  color:var(--text); transition:border-color .18s, transform .18s, box-shadow .18s, background .18s;
}
.ai-tile:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--brandB) 65%, var(--line));
  box-shadow:0 10px 26px color-mix(in srgb, var(--brandB) 22%, transparent); }
.ai-tile:focus-visible{ outline:2px solid var(--brandB); outline-offset:2px; }
.ai-tile-icon{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb, var(--brandB) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--brandB) 28%, var(--line)); font-size:1.2rem; }
.ai-tile-icon svg{ width:24px; height:24px; }
.ai-tile-name{ font-size:.78rem; font-weight:600; line-height:1.25; }
.ai-tile-badge{ font-size:.56rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.1rem .4rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-dim); }
.ai-tile-badge.free{ color:var(--brandB); border-color:color-mix(in srgb, var(--brandB) 55%, var(--line)); }
.ai-tile-badge.paid{ color:#D9A441; border-color:#D9A441; }
.ai-tile-badge.portal{ color:var(--text-dim); }
.ai-tile-state{ font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.ai-tile-wrap.active .ai-tile{ border-color:var(--brandB);
  box-shadow:0 0 0 1px var(--brandB), 0 10px 26px color-mix(in srgb, var(--brandB) 26%, transparent); }
.ai-tile-wrap.active .ai-tile-state{ color:var(--brandB); font-weight:700; }
.ai-tile-link{ font-size:.66rem; color:var(--text-dim); text-decoration:none; }
a.ai-tile-link:hover{ color:var(--brandB); text-decoration:underline; }
.ai-tile-del{ position:absolute; top:-6px; right:2px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text-dim);
  font-size:.8rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s, color .15s; }
.ai-tile-wrap:hover .ai-tile-del, .ai-tile-del:focus-visible{ opacity:1; }
.ai-tile-del:hover{ color:#E5533D; border-color:#E5533D; }
.ai-tile-add .ai-tile-icon, .ai-tile-reset .ai-tile-icon{ border-style:dashed; }

/* specialist row is a lane now, not a wrapping cloud */
.industry-grid.spec-rail{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; padding-bottom:.5rem; }
.industry-grid.spec-rail .spec-chip{ flex:0 0 auto; scroll-snap-align:start; }
.industry-grid.spec-rail::-webkit-scrollbar{ height:6px; }
.industry-grid.spec-rail::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; }
@media (prefers-reduced-motion: reduce){ .ai-tile{ transition:none; } .ai-tile:hover{ transform:none; } }

/* The hidden attribute must always win. Any author display: on a class
   (display:flex on .ws-actions, for one) silently defeated it, so the scan
   tool's export bar showed after a FAILED scan. */
[hidden]{ display:none !important; }

/* ==========================================================================
   LIVE WEBSITE SCAN (tool #42) — real-time measured report cards
   ========================================================================== */
.ws-opt{ color:var(--text-faint); font-weight:400; }
.ws-status.is-ok{ color:var(--green-bright); }
.ws-status.is-err{ color:var(--warn); }
.ws-out{ margin-top:1.2rem; }

.ws-summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:1rem 1.2rem; background:var(--surface-2); margin-bottom:1.1rem;
}
.ws-overall{ display:flex; align-items:center; gap:.9rem; }
.ws-overall b{ display:block; font-size:.95rem; color:var(--text); }
.ws-overall span{ font-size:.8rem; color:var(--text-dim); word-break:break-all; }
.ws-meta{ display:flex; flex-direction:column; gap:.2rem; font-size:.75rem; color:var(--text-faint); text-align:right; }

/* score dial — conic ring, no images, prints cleanly */
.ws-donut{
  --p:0; flex:none; position:relative; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--f-mono); font-size:.9rem; font-weight:600;
  background:conic-gradient(var(--ws-tone,#4F9501) calc(var(--p) * 1%), rgba(255,255,255,.08) 0);
}
.ws-donut::after{
  content:''; position:absolute; inset:5px; border-radius:50%; background:var(--surface-2);
}
.ws-donut{ color:var(--ws-tone,#4F9501); }
.ws-donut b{ position:relative; z-index:1; font-weight:600; }
.ws-donut.is-good{ --ws-tone:var(--green-bright,#4F9501); }
.ws-donut.is-mid{  --ws-tone:#C98A16; }
.ws-donut.is-bad{  --ws-tone:var(--warn); }
.ws-donut.is-na{   --ws-tone:var(--text-faint); --p:0; }
/* the number itself sits above the inner disc */
.ws-donut{ isolation:isolate; }

.ws-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  align-items:start;
}
.ws-card{
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  background:var(--surface-1); transition:transform .25s ease, border-color .25s ease;
}
.ws-card:hover{ transform:translateY(-3px); border-color:var(--cyan); }
.ws-card.is-offsite{ border-style:dashed; }
.ws-card-head{
  display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.ws-card-head svg{ width:17px; height:17px; flex:none; color:var(--text-dim); }
.ws-card-head h4{ flex:1; font-size:.92rem; margin:0; }
.ws-card-head .ws-donut{ width:44px; height:44px; font-size:.82rem; }
.ws-card-head .ws-donut::after{ background:var(--surface-2); }

.ws-rows{ list-style:none; margin:0; padding:0; }
.ws-row{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.6rem .9rem; border-bottom:1px solid var(--line);
  font-size:.82rem;
}
.ws-row:last-child{ border-bottom:0; }
.ws-row i{
  flex:none; width:15px; height:15px; border-radius:50%; margin-top:.1rem;
  display:grid; place-items:center; font-style:normal; font-size:.6rem; color:#0B0F0C;
}
.ws-row.is-pass i{ background:var(--green-bright,#4F9501); }
.ws-row.is-pass i::after{ content:'\2713'; }
.ws-row.is-fail i{ background:var(--warn); }
.ws-row.is-fail i::after{ content:'\2715'; }
.ws-row.is-warn i{ background:#C98A16; }
.ws-row.is-warn i::after{ content:'!'; }
.ws-row.is-na i{ background:var(--text-faint); }
.ws-row.is-na i::after{ content:'\2013'; }
.ws-l{ flex:1; color:var(--text); }
.ws-v{ text-align:right; color:var(--text-dim); max-width:52%; }
.ws-v em{ display:block; font-style:normal; font-size:.72rem; color:var(--text-faint); }
.ws-foot{ padding:.65rem .9rem; font-size:.73rem; color:var(--text-faint); border-top:1px solid var(--line); }

.ws-actions{
  margin-top:1.3rem; padding:1rem 1.2rem; border:1px solid var(--line-strong);
  border-radius:var(--radius-md); background:var(--surface-2);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.ws-cta b{ display:block; font-size:.98rem; }
.ws-cta span{ font-size:.8rem; color:var(--text-dim); }

@media (max-width:560px){
  .ws-grid{ grid-template-columns:1fr; }
  .ws-meta{ text-align:left; }
  .ws-actions{ flex-direction:column; align-items:stretch; }
}
/* the report is a deliverable — make it print like one */
@media print{
  .ws-card{ break-inside:avoid; border-color:#999; }
  .ws-grid{ grid-template-columns:1fr 1fr; }
}

/* ---- Laser background studio (tool #42) ---- */
.lz-wrap{ display:flex; flex-direction:column; gap:.9rem; }
.lz-canvas{ width:100%; height:340px; border-radius:var(--radius-md); border:1px solid var(--line-strong); display:block; background:#05070a; }
.lz-controls{ display:grid; gap:.8rem 1rem; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); align-items:end; }
.lz-check{ display:flex; align-items:center; gap:.45rem; font-size:.84rem; color:var(--text-dim); }
.lz-code{ width:100%; font-family:var(--f-mono); font-size:.74rem; line-height:1.5;
  background:var(--surface-2); color:var(--text-dim); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:.7rem .8rem; resize:vertical; }
@media (max-width:560px){ .lz-canvas{ height:240px; } }

/* ---- Neural universe (#43) & Live mind map (#44) ---- */
.ns-canvas{ height:400px; cursor:grab; touch-action:none; }
.ns-canvas:active{ cursor:grabbing; }
.ns-stats{ font-family:var(--f-mono); font-size:.74rem; }
.mm-wrap{ display:grid; grid-template-columns:minmax(220px, 1fr) 2fr; gap:1rem; align-items:start; }
.mm-text{ min-height:420px; color:var(--text); }
.mm-canvas{ height:420px; touch-action:none; }
@media (max-width:760px){ .mm-wrap{ grid-template-columns:1fr; } .mm-text{ min-height:200px; } .ns-canvas,.mm-canvas{ height:300px; } }

/* ==========================================================================
   TOOL SPOTLIGHT — rotating benefit / where-to-use notes, data from registry
   ========================================================================== */
.ts-outer{ margin-top:-1.5rem; margin-bottom:2rem; }
.tool-spotlight{
  position:relative; margin:1.4rem 0 1.8rem; padding:1rem 1.2rem 1.1rem;
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--violet-bright) 14%, transparent), transparent 55%),
    var(--surface-2);
  overflow:hidden;
}
.tool-spotlight:focus-visible{ outline:2px solid var(--cyan-bright); outline-offset:3px; }
.ts-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.ts-kicker{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-bright); }
.ts-count{ font-family:var(--f-mono); font-size:.72rem; color:var(--text-faint); }
.ts-stage{ position:relative; }
.ts-card{ opacity:0; transform:translateY(8px); transition:opacity .28s ease, transform .28s ease; }
.ts-card.is-in{ opacity:1; transform:none; }
.ts-card.is-out{ opacity:0; transform:translateX(-14px); }
.ts-card.is-out-r{ opacity:0; transform:translateX(14px); }
.ts-new{
  display:inline-block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em;
  padding:.18rem .45rem; border-radius:999px; margin-right:.5rem;
  background:var(--green-bright,#4F9501); color:#0B0F0C; font-weight:700;
}
.ts-tag{ font-family:var(--f-mono); font-size:.68rem; color:var(--text-faint); letter-spacing:.06em; }
.ts-card h3{ margin:.35rem 0 .3rem; font-size:1.15rem; }
.ts-card h3 a{ color:var(--text); text-decoration:none; background:var(--grad-tri); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:brandCycle 10s linear infinite; }
.ts-benefit{ font-size:.92rem; color:var(--text); max-width:70ch; margin:0 0 .4rem; }
.ts-use{ font-size:.82rem; color:var(--text-dim); max-width:70ch; margin:0 0 .6rem; }
.ts-use b{ color:var(--copper-bright); font-weight:600; }
.ts-open{ font-size:.82rem; color:var(--cyan-bright); text-decoration:none; }
.ts-open:hover{ text-decoration:underline; }
.ts-bar{ height:2px; background:rgba(255,255,255,.08); border-radius:2px; margin:.8rem 0 .6rem; overflow:hidden; }
.ts-bar i{ display:block; height:100%; width:0; background:var(--grad-tri); background-size:300% 100%; }
.ts-nav{ display:flex; gap:.4rem; justify-content:flex-end; }
.ts-btn{
  width:34px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--surface-1);
  color:var(--text-dim); cursor:pointer; font-size:.9rem; line-height:1;
}
.ts-btn:hover{ color:var(--text); border-color:var(--cyan); }
@media (prefers-reduced-motion: reduce){
  .ts-card, .ts-card h3 a{ transition:none; animation:none; }
  .ts-bar{ display:none; }
}
@media (max-width:560px){ .ts-head{ flex-wrap:wrap; gap:.3rem; } .ts-card h3{ font-size:1.02rem; } }

/* ---- Asteroid mining summary ---- */
.am-grid{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.am-cell{ border:1px solid var(--line); border-radius:var(--radius-md); padding:.6rem .75rem; background:var(--surface-2); }
.am-cell span{ display:block; font-size:.7rem; color:var(--text-faint); font-family:var(--f-mono); letter-spacing:.06em; text-transform:uppercase; }
.am-cell b{ display:block; font-size:1.02rem; margin:.15rem 0; }
.am-cell em{ display:block; font-style:normal; font-size:.72rem; color:var(--text-dim); }

/* ---- Linked notes ---- */
.ln-wrap{ display:grid; grid-template-columns:200px 1fr 1fr; gap:.9rem; align-items:stretch; }
.ln-side{ display:flex; flex-direction:column; gap:.5rem; }
.ln-side input[type="search"]{ width:100%; }
.ln-list{ display:flex; flex-direction:column; gap:.25rem; max-height:360px; overflow:auto; }
.ln-item{ text-align:left; border:1px solid var(--line); background:var(--surface-2); color:var(--text); border-radius:8px; padding:.45rem .6rem; font-size:.84rem; cursor:pointer; }
.ln-item.is-cur, .ln-item:hover{ border-color:var(--cyan); }
.ln-main{ display:flex; flex-direction:column; gap:.5rem; }
.ln-title{ font-size:1.05rem; font-weight:600; }
.ln-body{ min-height:280px; color:var(--text); flex:1; }
.ln-chip{ display:inline-block; margin:.15rem .25rem 0 0; border:1px solid var(--line); background:var(--surface-2); color:var(--cyan-bright); border-radius:999px; padding:.15rem .55rem; font-size:.74rem; cursor:pointer; }
.ln-graph canvas{ height:100%; min-height:300px; }
@media (max-width:900px){ .ln-wrap{ grid-template-columns:1fr; } .ln-list{ max-height:160px; } }

/* ==========================================================================
   TOOLS HUB — grid of cards, one per tool, each opening its own page
   ========================================================================== */
.tool-grid{
  display:grid; gap:.8rem; margin:1.4rem 0 .6rem;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.tool-card{
  position:relative; display:flex; flex-direction:column; gap:.4rem; min-height:132px;
  padding:.9rem .95rem 1rem; text-decoration:none; color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-1);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tool-card:hover, .tool-card:focus-visible{ transform:translateY(-3px); border-color:var(--cyan); box-shadow:0 14px 34px -18px rgba(0,0,0,.6); }
.tool-card svg{ width:24px; height:24px; color:var(--cyan-bright); }
.tool-card b{ font-size:.94rem; line-height:1.25; }
.tool-card span{ font-size:.76rem; color:var(--text-dim); line-height:1.4; }
.tool-card .ts-new{ position:absolute; top:.6rem; right:.6rem; margin:0; }
.tool-back-nav{ display:flex; align-items:center; gap:.6rem; margin:0 0 1rem; }
.tool-back{ font-family:var(--f-mono); font-size:.78rem; color:var(--cyan-bright); text-decoration:none; }
.tool-back:hover{ text-decoration:underline; }
.tool-page-lead{ max-width:64ch; color:var(--text-dim); }
.tool-page-block .tool-panel{ padding-top:.4rem; }

/* spotlight: no card any more — name morphs through display faces + looks */
.tool-spotlight{ border:0; background:none; padding:.6rem 0 .2rem; margin:1rem 0 .2rem; overflow:visible; }
.ts-name{ margin:.35rem 0 .45rem; font-size:clamp(1.5rem, 1rem + 2.2vw, 2.6rem); letter-spacing:.02em; line-height:1.1; }
.ts-name a{ text-decoration:none; -webkit-background-clip:text; background-clip:text; color:transparent; background-size:300% 100%; animation:brandCycle 14s linear infinite; }
.ts-name.look-tri a{ background-image:var(--grad-tri); }
.ts-name.look-copper a{ background-image:linear-gradient(90deg,var(--copper-bright),#F3D8A8,var(--copper-bright)); }
.ts-name.look-ice a{ background-image:linear-gradient(90deg,#7DFCFF,#EDEFE9,#3DA9FF,#7DFCFF); }
.ts-name.look-violet a{ background-image:linear-gradient(90deg,#A78BFA,#F0ABFC,#7C3AED,#A78BFA); }
.ts-name.look-green a{ background-image:linear-gradient(90deg,#4F9501,#B6FF6B,#0FA958,#4F9501); }
.ts-name.look-ember a{ background-image:linear-gradient(90deg,#FF6B3D,#F5D90A,#FF2D2D,#FF6B3D); }
.ts-name .od-ch{ display:inline-block; animation:odIn .5s var(--ease) both; }
@keyframes odIn{ from{ opacity:0; transform:translateY(.4em) rotate(6deg); } to{ opacity:1; transform:none; } }
.ts-card h3 a{ animation:none; }
.ts-bar{ margin:.6rem 0 .4rem; }

/* clock faces */
.clock-num{ fill:var(--text); font-family:var(--f-mono); font-size:13px; font-weight:600; }
.clock-num.major{ font-size:15px; }
.clock-tick.minute{ stroke-width:.8; opacity:.55; }
svg[data-colour="copper"] .clock-hand-hour, svg[data-colour="copper"] .clock-hand-minute, svg[data-colour="copper"] .clock-tick.major{ stroke:var(--copper-bright); }
svg[data-colour="copper"] .clock-face-ring{ stroke:var(--copper-bright); }
svg[data-colour="cyan"] .clock-hand-hour, svg[data-colour="cyan"] .clock-hand-minute, svg[data-colour="cyan"] .clock-tick.major, svg[data-colour="cyan"] .clock-face-ring{ stroke:var(--cyan-bright); }
svg[data-colour="violet"] .clock-hand-hour, svg[data-colour="violet"] .clock-hand-minute, svg[data-colour="violet"] .clock-tick.major, svg[data-colour="violet"] .clock-face-ring{ stroke:#A78BFA; }
svg[data-colour="mono"] .clock-hand-hour, svg[data-colour="mono"] .clock-hand-minute, svg[data-colour="mono"] .clock-tick.major, svg[data-colour="mono"] .clock-face-ring, svg[data-colour="mono"] .clock-hand-second{ stroke:var(--text); }
svg[data-colour="mono"] .clock-pin{ fill:var(--text); }

/* structure pass: consistent card outlines, one radius, calmer borders */
.tool-panel, .ws-card, .am-cell, .tool-card, .package-card{ border-width:1px; }
.lz-controls .field label{ font-size:.78rem; }
.lz-controls input[type="range"]{ width:100%; accent-color:var(--cyan-bright); }
@media (max-width:560px){
  .tool-grid{ grid-template-columns:repeat(2, 1fr); gap:.6rem; }
  .tool-card{ min-height:0; padding:.75rem .8rem; }
  .tool-card span{ display:none; }         /* name + icon only on a phone */
  .ts-name{ font-size:1.35rem; }
  .lz-controls{ grid-template-columns:1fr; }
  .btn-row{ flex-wrap:wrap; }
  .btn-row .btn{ flex:1 1 46%; justify-content:center; }
  .tool-back-nav{ margin-bottom:.6rem; }
}

/* ==========================================================================
   PRICING — liquid redesign. Cards minimised, aligned, animated unfold.
   ========================================================================== */
@property --pkg-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.package-grid{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.3rem;
  align-items:stretch;
}
/* liquid: two blurred blobs drifting and morphing behind every grid */
.package-grid::before, .package-grid::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:44%; aspect-ratio:1; filter:blur(70px); opacity:.34;
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  animation:pkgLiquid 22s ease-in-out infinite alternate;
}
.package-grid::before{ left:-8%; top:-12%; background:radial-gradient(circle at 35% 35%, var(--cyan-bright), var(--violet-bright) 55%, transparent 72%); }
.package-grid::after{  right:-10%; bottom:-14%; background:radial-gradient(circle at 60% 60%, var(--copper-bright), var(--green-bright,#4F9501) 55%, transparent 72%); animation-duration:27s; animation-delay:-9s; }
@keyframes pkgLiquid{
  0%  { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; transform:translate(0,0) scale(1); }
  33% { border-radius:60% 40% 35% 65% / 55% 60% 40% 45%; transform:translate(6%, 8%) scale(1.08); }
  66% { border-radius:36% 64% 58% 42% / 62% 38% 62% 38%; transform:translate(-4%, 12%) scale(.94); }
  100%{ border-radius:55% 45% 47% 53% / 43% 57% 43% 57%; transform:translate(8%, -6%) scale(1.04); }
}

.package-card{
  position:relative; display:flex; flex-direction:column;
  padding:1.9rem 1.5rem 1.4rem;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.7);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.package-card:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:0 30px 60px -28px rgba(0,0,0,.8); }
/* liquid border: a rotating conic ring, masked to a 1px rim, shown on hover / open */
.package-card::before{
  content:''; position:absolute; inset:-1px; width:auto; height:auto; z-index:-1; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--pkg-ang), var(--cyan-bright), var(--violet-bright), var(--copper-bright), var(--green-bright,#4F9501), var(--cyan-bright));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease); animation:pkgSpin 7s linear infinite;
}
.package-card:hover::before, .package-card.is-open::before, .package-card.featured::before{ opacity:1; }
.package-card.featured::before{ opacity:.55; }
.package-card.featured:hover::before{ opacity:1; }
@keyframes pkgSpin{ to{ --pkg-ang:360deg; } }
.package-card.featured{ background:color-mix(in srgb, var(--surface-2) 88%, transparent); }

.package-tag{
  position:static; display:inline-block;
  background:var(--grad-brand); color:#08110D; font-family:var(--f-mono); font-size:.68rem; font-weight:600;
  padding:.32rem .75rem; border-radius:99px; box-shadow:0 6px 18px -8px var(--copper-bright);
}
.package-tier{ font-family:var(--f-display); font-size:1.25rem; font-weight:600; margin:0; }
.package-price{ font-family:var(--f-mono); font-size:1.7rem; line-height:1.1; color:var(--copper-bright); margin:.55rem 0 0; }
.package-price span{ display:block; font-size:.72rem; color:var(--text-faint); font-weight:400; margin-top:.25rem; letter-spacing:.02em; }
.package-tagline{ color:var(--text-dim); font-size:.88rem; margin:.7rem 0 1rem; min-height:2.5em; }
.package-card .btn{ align-self:stretch; justify-content:center; }

.pkg-toggle{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  margin:.7rem 0 0; padding:.55rem .8rem; font-size:.8rem; cursor:pointer;
  border:1px solid var(--line); border-radius:99px; background:var(--surface-2); color:var(--text-dim);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.pkg-toggle:hover, .pkg-toggle:focus-visible{ border-color:var(--cyan); color:var(--text); }
.pkg-toggle i{
  font-style:normal; font-family:var(--f-mono); font-size:1.05rem; line-height:1; color:var(--cyan-bright);
  transition:transform .45s var(--ease);
}
.package-card.is-open .pkg-toggle i{ transform:rotate(45deg); }

/* the fold: animated height via grid rows, no JS measurement needed */
.pkg-drawer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.package-card.is-open .pkg-drawer{ grid-template-rows:1fr; }
.pkg-drawer-inner{ min-height:0; overflow:hidden; }
.package-features{ list-style:none; margin:1rem 0 .4rem; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.package-features li{ font-size:.86rem; color:var(--text-dim); padding-left:1.4rem; position:relative; line-height:1.45;
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.package-card.is-open .package-features li{ opacity:1; transform:none; }
.package-card.is-open .package-features li:nth-child(n){ transition-delay:calc(.05s * var(--i, 0)); }
.package-features li::before{ content:''; position:absolute; left:0; top:.45em; width:9px; height:9px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
.package-card.featured .package-features li::before{ background:var(--copper-bright); box-shadow:0 0 6px var(--copper-bright); }

.pkg-controls{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; margin:0 0 1.2rem; }

@media (prefers-reduced-motion: reduce){
  .package-grid::before, .package-grid::after, .package-card::before{ animation:none; }
  .pkg-drawer, .package-features li, .pkg-toggle i, .package-card{ transition:none; }
}
@media (max-width:600px){
  .package-grid{ gap:1rem; }
  .package-card{ padding:1.6rem 1.2rem 1.2rem; }
  .package-grid::before, .package-grid::after{ width:70%; opacity:.28; }
}

/* B76: tag in normal flow — first row of every card, so nothing can paint over
   it and every card shares the same header height. Display-face prices. */
.package-grid{ padding-top:.2rem; overflow:visible; }
.pkg-slot{ position:relative; display:flex; min-width:0; }
.pkg-slot .package-card{ flex:1; }
.pkg-tagrow{ display:flex; align-items:center; min-height:1.5rem; margin:0 0 .75rem; }
.pkg-tagrow .package-tag{ position:static; display:inline-block; margin:0; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,.35); }
.pkg-tagrow .pkg-kind{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.package-card, .package-card.featured{ transform:none; z-index:auto; }   /* no lifting or scaling: the rim is the emphasis */
.package-card:hover{ transform:translateY(-4px); }
.package-tier{ font-family:var(--f-display); letter-spacing:.01em; }
.package-price{ font-family:var(--f-display); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.01em; }
.package-card.featured .package-price{ color:var(--green-bright,#88FF05); }
.package-price span{ font-family:var(--f-mono); }
.pkg-controls .ws-opt{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.02em; }
.pb-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.pb-form{ display:grid; gap:.6rem; }
.pb-side{ display:flex; flex-direction:column; gap:.5rem; }
@media (max-width:820px){ .pb-wrap{ grid-template-columns:1fr; } }

/* ---- Engineering AI directory ---- */
.ea-bar{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:.6rem 0 .8rem; }
.ea-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.ea-card{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-1); padding:.8rem .9rem; display:flex; flex-direction:column; gap:.4rem; }
.ea-card:hover{ border-color:var(--cyan); }
.ea-card header{ display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.ea-card header a{ font-weight:600; color:var(--text); text-decoration:none; }
.ea-card header a:hover{ color:var(--cyan-bright); }
.ea-tier{ flex:none; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:.15rem .45rem; border-radius:999px; border:1px solid var(--line); color:var(--text-faint); }
.ea-tier.is-open{ color:var(--green-bright,#4F9501); border-color:var(--green-bright,#4F9501); }
.ea-task{ font-size:.84rem; color:var(--text); margin:0; }
.ea-mech{ font-size:.78rem; color:var(--text-dim); margin:0; }
.ea-mech b{ color:var(--copper-bright); font-weight:600; }
.ea-card footer{ display:flex; justify-content:space-between; gap:.5rem; font-family:var(--f-mono); font-size:.66rem; color:var(--text-faint); margin-top:auto; padding-top:.3rem; }

/* ==========================================================================
   TOOLS HUB v2 — grouped by category, equal rows, clamped copy, wider canvas
   ========================================================================== */
.tool-grid-wrap{ max-width:min(1400px, 96vw); }
.tool-grid-group{ margin:0 0 1.6rem; }
.tool-grid-cat{
  display:flex; align-items:baseline; gap:.6rem; margin:1.4rem 0 .7rem;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
}
.tool-grid-cat span{ color:var(--text-faint); font-size:.68rem; letter-spacing:.06em; }
.tool-grid-cat::after{ content:''; flex:1; height:1px; background:var(--line); margin-left:.4rem; }
.tool-grid{
  display:grid; gap:.85rem; margin:0;
  grid-template-columns:repeat(auto-fill, minmax(212px, 1fr));
  grid-auto-rows:1fr;                                   /* every row the same height */
}
.tool-card{
  min-height:0; height:100%; padding:.95rem 1rem 1rem; gap:.45rem;
  display:grid; grid-template-rows:auto auto 1fr; align-content:start;
}
.tool-card svg{ width:22px; height:22px; margin-bottom:.15rem; }
.tool-card b{
  font-size:.95rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tool-card span:not(.ts-new){
  font-size:.77rem; line-height:1.42; color:var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;   /* word-boundary clamp, never a mid-word cut */
}
.tool-card .ts-new{ position:absolute; top:.65rem; right:.65rem; margin:0; }
@media (max-width:560px){
  .tool-grid{ grid-template-columns:repeat(2, 1fr); gap:.6rem; }
  .tool-card{ padding:.75rem .8rem; grid-template-rows:auto auto; }
  .tool-card span:not(.ts-new){ display:none; }
  .tool-grid-cat{ margin:1rem 0 .5rem; }
}

/* B78 — phones and touch devices: the liquid layer is expensive. Blurred,
   animated pseudo-elements plus backdrop-filter on nine cards plus an animated
   conic rim is more GPU work than a mid-range phone will composite while
   scrolling; Chrome drops the layers and paints a white flash. Keep the look,
   drop the cost: static blobs at lower blur, solid card surfaces, static rim. */
@media (max-width:760px), (pointer:coarse){
  .package-grid::before, .package-grid::after{ animation:none; filter:blur(36px); opacity:.2; transform:none; }
  .package-card{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface); }
  .package-card.featured{ background:var(--surface-2); }
  .package-card::before{ animation:none; }
  .package-card:hover{ transform:none; }
}

/* ==========================================================================
   TOOLS HUB v3 — one dense grid. Flex-wrap so a partial last row stretches
   to fill the width instead of leaving holes; chips filter in place.
   ========================================================================== */
.tool-filters{ display:flex; flex-direction:column; gap:.7rem; margin:1.2rem 0 1rem; }
.tool-search{ width:100%; max-width:520px; }
.tool-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tool-chip{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.38rem .7rem; border-radius:999px; border:1px solid var(--line); background:var(--surface-1);
  color:var(--text-dim); cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.tool-chip span{ color:var(--text-faint); margin-left:.25rem; }
.tool-chip:hover{ border-color:var(--cyan); color:var(--text); }
.tool-chip.is-on{ background:var(--cyan-bright); border-color:var(--cyan-bright); color:#0B0F0C; }
.tool-chip.is-on span{ color:#0B0F0C; opacity:.7; }
.tool-hub-count{ margin:0; font-family:var(--f-mono); font-size:.74rem; }

.tool-grid, nav.tool-grid{
  display:flex; flex-wrap:wrap; gap:.8rem; margin:0 0 1.2rem;
  grid-template-columns:none; grid-auto-rows:auto;
}
.tool-card{
  flex:1 1 218px; min-width:0; max-width:none; height:auto; min-height:148px;
  display:grid; grid-template-rows:auto auto 1fr auto; align-content:start;
}
.tool-card[hidden]{ display:none; }
.tool-card-cat{
  font-style:normal; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); margin-top:.5rem; align-self:end;
}
.tool-card:hover .tool-card-cat{ color:var(--cyan-bright); }
/* the old grouped layout is gone; keep its selectors inert if any page cached them */
.tool-grid-group, .tool-grid-cat{ display:none; }
@media (max-width:560px){
  .tool-card{ flex:1 1 44%; min-height:0; grid-template-rows:auto auto auto; }
  .tool-card span:not(.ts-new){ display:none; }
  .tool-card-cat{ margin-top:.3rem; }
  .tool-chips{ gap:.3rem; }
  .tool-chip{ font-size:.64rem; padding:.32rem .55rem; }
}

/* ---- voice buttons (mic + read-aloud) ---- */
.chat-voice, .chat-speak{
  flex:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text-dim); display:grid; place-items:center; cursor:pointer; margin-right:.4rem;
  transition:border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.chat-voice svg, .chat-speak svg{ width:18px; height:18px; }
.chat-voice:hover, .chat-speak:hover{ border-color:var(--cyan); color:var(--text); }
.chat-voice.is-live{ color:#0B0F0C; background:var(--green-bright,#4F9501); border-color:var(--green-bright,#4F9501); box-shadow:0 0 0 6px color-mix(in srgb, var(--green-bright,#4F9501) 25%, transparent);  }
.chat-speak.is-on{ color:var(--cyan-bright); border-color:var(--cyan-bright); }
@media (max-width:560px){  .chat-voice, .chat-speak{ width:36px; height:36px; } }

/* ---- voice panel (AI chat) ---- */
.voice-panel{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; margin:.4rem 0 .6rem; padding:.5rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); font-size:.78rem; color:var(--text-dim); }
.voice-panel label{ display:flex; align-items:center; gap:.4rem; }
.voice-panel select{ font-size:.78rem; padding:.25rem .45rem; }
.voice-status{ font-family:var(--f-mono); font-size:.7rem; color:var(--text-faint); flex-basis:100%; }

/* ==========================================================================
   TOOL SPOTLIGHT v3 — full-width hero, no frame. The copy is the animation:
   name morphs through display faces, words arrive one by one, the tool's
   own icon floats as an orb in the half of the hero that used to be empty.
   ========================================================================== */
.tool-spotlight{
  /* break out of the 1240px hero container to the wide hub width */
  width:min(1400px, 96vw); max-width:none; margin:1.2rem 0 .4rem calc(50% - min(700px, 48vw));
  border:0; background:none; padding:0; overflow:visible;
}
.ts-head{ display:flex; align-items:center; gap:1rem; margin-bottom:.2rem; }
.ts-nav{ margin-left:auto; display:flex; gap:.2rem; }
.ts-btn{
  width:auto; height:auto; padding:.3rem .55rem; border:0; background:none; border-radius:6px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}
.ts-btn:hover, .ts-btn:focus-visible{ color:var(--text); background:var(--surface-2); }
.ts-hero{
  display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(260px, .85fr); gap:2rem 3rem; align-items:center;
  min-height:clamp(320px, 42vh, 520px); padding:.6rem 0 1rem;
}
.ts-main{ min-width:0; }
.ts-meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:0 0 .5rem; }
.ts-cat{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-bright); }
.ts-name{ margin:.1rem 0 .9rem; font-size:clamp(2.3rem, 1.1rem + 4.2vw, 5rem); line-height:1.02; letter-spacing:.005em; }
.ts-name a{ display:inline-block; }
.ts-benefit{ font-size:clamp(1.05rem, .9rem + .75vw, 1.45rem); line-height:1.45; color:var(--text); max-width:36ch; margin:0 0 .9rem; }
.ts-use{ font-size:clamp(.92rem, .85rem + .35vw, 1.1rem); line-height:1.5; color:var(--text-dim); max-width:44ch; margin:0 0 1.3rem; }
.ts-use b{ display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--copper-bright); font-weight:600; margin-bottom:.25rem; }
.ts-open.btn{ font-size:.95rem; padding:.75rem 1.3rem; }
/* word-by-word reveal */
.ts-w{ display:inline-block; opacity:0; transform:translateY(.45em); filter:blur(4px);
  animation:tsWord .55s var(--ease) both; animation-delay:calc(140ms + var(--i, 0) * 38ms); }
@keyframes tsWord{ to{ opacity:1; transform:none; filter:blur(0); } }
/* the orb */
.ts-visual{ position:relative; justify-self:center; width:min(320px, 70vw); aspect-ratio:1; display:grid; place-items:center; text-decoration:none; }
.ts-orb{
  position:relative; z-index:2; width:62%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--surface-2) 70%, #fff 8%), var(--surface-1) 65%);
  border:1px solid var(--line-strong); box-shadow:0 30px 70px -30px rgba(0,0,0,.9), inset 0 0 40px rgba(255,255,255,.03);
  animation:tsFloat 7s ease-in-out infinite, tsOrbIn .9s var(--ease) both;
}
.ts-orb svg{ width:46%; height:46%; color:var(--cyan-bright); filter:drop-shadow(0 0 14px color-mix(in srgb, var(--cyan-bright) 55%, transparent)); }
.ts-orb.look-copper svg{ color:var(--copper-bright); } .ts-orb.look-green svg{ color:var(--green-bright,#88FF05); }
.ts-orb.look-violet svg{ color:#A78BFA; } .ts-orb.look-ice svg{ color:#7DFCFF; } .ts-orb.look-ember svg{ color:#FF6B3D; }
.ts-ring{ position:absolute; inset:8%; border-radius:50%; border:1px solid color-mix(in srgb, var(--cyan-bright) 35%, transparent);
  animation:tsRing 9s linear infinite; }
.ts-ring::before{ content:''; position:absolute; top:-3px; left:50%; width:6px; height:6px; border-radius:50%; background:var(--cyan-bright); box-shadow:0 0 10px var(--cyan-bright); }
.ts-ring-2{ inset:-2%; border-color:color-mix(in srgb, var(--copper-bright) 30%, transparent); animation-duration:14s; animation-direction:reverse; }
.ts-ring-2::before{ background:var(--copper-bright); box-shadow:0 0 10px var(--copper-bright); width:4px; height:4px; }
@keyframes tsFloat{ 50%{ transform:translateY(-10px); } }
@keyframes tsOrbIn{ from{ opacity:0; transform:scale(.8); } }
@keyframes tsRing{ to{ transform:rotate(360deg); } }
.ts-bar{ margin:.4rem 0 0; height:2px; }
.ts-stage{ min-height:0; }
@media (prefers-reduced-motion: reduce){
  .ts-w{ animation:none; opacity:1; transform:none; filter:none; }
  .ts-orb, .ts-ring{ animation:none; }
}
@media (max-width:820px){
  .tool-spotlight{ width:auto; margin:1rem 0 .4rem; }
  .ts-hero{ grid-template-columns:1fr; min-height:0; gap:1.2rem; }
  .ts-visual{ order:-1; width:min(220px, 55vw); justify-self:start; }
  .ts-name{ font-size:clamp(1.9rem, 1rem + 5vw, 2.8rem); }
  .ts-head{ flex-wrap:wrap; }
}

/* B88: closed cards keep their own height — an open card grows alone instead
   of stretching its neighbours into tall empty boxes */
.package-grid{ align-items:start; }
.pkg-slot{ align-self:start; }
.pkg-slot .package-card{ height:auto; }
/* voice settings: collapsed summary line, expands on tap */
.voice-panel{ margin:0; padding:0; border:0; background:none; }
.voice-panel-sum{
  display:flex; align-items:center; gap:.5rem; width:100%; padding:.4rem .9rem; font-size:.74rem;
  color:var(--text-dim); background:var(--surface-2); border:0; border-top:1px solid var(--line); cursor:pointer; text-align:left;
  font-family:var(--f-mono);
}
.voice-panel-sum b{ color:var(--text); font-weight:600; }
.voice-panel-sum i{ margin-left:auto; font-style:normal; color:var(--text-faint); transition:transform .25s var(--ease); }
.voice-panel.is-open .voice-panel-sum i{ transform:rotate(180deg); }
.voice-panel-body{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; padding:.6rem .9rem .7rem; background:var(--surface-2); font-size:.78rem; color:var(--text-dim); }
.voice-panel-body label{ display:flex; align-items:center; gap:.4rem; }
.voice-panel-body select{ font-size:.78rem; padding:.25rem .45rem; max-width:200px; }
.voice-status{ flex-basis:100%; font-family:var(--f-mono); font-size:.7rem; color:var(--text-faint); line-height:1.4; }
/* phone: a full-screen sheet, like every CRM chat app */
@media (max-width:560px){   /* the launcher hides behind the sheet */
}

/* grounded answers: citation link + related pages */
.msg .msg-link{ display:inline-block; margin-top:.35rem; color:var(--cyan-bright); text-decoration:none; font-size:.85rem; }
.msg .msg-link:hover{ text-decoration:underline; }
.msg .msg-also{ margin-top:.35rem; font-size:.74rem; color:var(--text-faint); }
.msg .msg-also a{ color:var(--text-dim); }
@keyframes stMsgIn{ from{ opacity:0; transform:translateY(6px); } }
@keyframes stAur{ 33%{ transform:translate(6%, -5%) scale(1.08); } 66%{ transform:translate(-5%, 6%) scale(.94); } }
#stAboutH{ font-family:var(--f-display); font-size:1.15rem; letter-spacing:0; text-transform:none; color:var(--text); }
/* panel answers */
.msg.assistant.panel{ max-width:100%; width:100%; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.6rem; background:none; border:0; padding:0; }
.panel-col{ border:1px solid var(--line); border-radius:12px; background:var(--surface-1); padding:.7rem .8rem; font-size:.86rem; line-height:1.5; }
.panel-h{ display:flex; align-items:center; gap:.4rem; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-bright); margin-bottom:.4rem; }
.panel-b{ white-space:pre-wrap; color:var(--text); }
/* gallery page */
.ag-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.9rem; }
.ag-card{ display:flex; flex-direction:column; gap:.5rem; padding:1.1rem; border:1px solid var(--line); border-radius:14px; background:var(--surface-1); text-decoration:none; color:var(--text); transition:transform .25s var(--ease), border-color .25s var(--ease); }
.ag-card:hover{ transform:translateY(-3px); border-color:var(--cyan); }
.ag-card h2{ font-size:1.05rem; margin:0; display:flex; align-items:center; gap:.4rem; }
.ag-card p{ font-size:.84rem; color:var(--text-dim); margin:0; line-height:1.5; flex:1; }
.ag-icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--cyan-bright) 12%, transparent); color:var(--cyan-bright); }
.ag-sci{ border-color:color-mix(in srgb, var(--copper-bright) 60%, transparent); }
.ag-sci .ag-icon{ background:color-mix(in srgb, var(--copper-bright) 14%, transparent); color:var(--copper-bright); }
.ag-open{ font-size:.78rem; color:var(--cyan-bright); }
@media (prefers-reduced-motion: reduce){ }
@media (max-width:1180px){ }
@media (max-width:820px){
}

/* ==========================================================================
   AI WORKSPACE (B91) — three columns: assistants & skills · conversation ·
   the working. Replaces the ai-studio layout entirely. Built for the same
   dark instrument-panel language as the rest of deltagbs.io: hairline rules,
   mono labels, one accent per state, motion that is slow and ambient.
   ========================================================================== */
.ai-ws{
  display:grid; grid-template-columns:clamp(250px,20vw,310px) minmax(0,1fr) clamp(280px,23vw,370px);
  gap:0; width:100%; max-width:none; margin:0; padding:0;
  height:calc(100dvh - var(--ws-top, 100px));
  /* No fixed min-height: on a 320x568 phone the chrome takes 116px, leaving
     452px, and a 520px floor pushed the composer 68px below the fold. */
  min-height:0;
  border-top:1px solid var(--line); background:var(--bg);
}
.ws-rail, .ws-ctx{
  display:flex; flex-direction:column; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface-1); scrollbar-width:thin;
}
.ws-rail{ border-right:1px solid var(--line); }
.ws-ctx{ border-left:1px solid var(--line); gap:.9rem; padding-bottom:1.2rem; }
.ws-rail-top{ display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem .6rem; background:var(--surface-1); }
.ws-brandline{ display:flex; align-items:center; gap:.45rem; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text); }
.ws-brandline b{ font-weight:600; }
.ws-dot{ width:7px; height:7px; border-radius:50%; background:var(--green-bright,#4F9501); box-shadow:0 0 10px var(--green-bright,#4F9501); animation:wsPulse 2.6s ease-in-out infinite; }
.ws-ver{ color:var(--text-faint); }
.ws-rail-close{ margin-left:auto; display:none; width:34px; height:34px; border:0; background:none; color:var(--text-dim); font-size:1.3rem; border-radius:8px; cursor:pointer; }
.ws-rail-close:hover{ background:var(--surface-2); color:var(--text); }
@keyframes wsPulse{ 50%{ opacity:.45; } }

.ws-tabs{ display:flex; gap:.2rem; padding:0 1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface-1); z-index:3; }
.ws-tab{
  flex:1; padding:.55rem .3rem .6rem; border:0; background:none; cursor:pointer; position:relative;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
}
.ws-tab i{ font-style:normal; margin-left:.3rem; color:var(--text-faint); opacity:.7; }
.ws-tab:hover{ color:var(--text-dim); }
.ws-tab.is-on{ color:var(--cyan-bright); }
.ws-tab.is-on::after{ content:''; position:absolute; left:.2rem; right:.2rem; bottom:-1px; height:2px; background:var(--cyan-bright); border-radius:2px; }
.ws-pane{ padding:.9rem 1rem 1.2rem; }
.ws-search{
  position:sticky; top:0; z-index:2; width:100%; margin:0 0 .7rem; font-size:.85rem;
  /* the pane scrolls under the tabs; without this the search box slid out of
     reach behind them */
}
.ws-pane{ scroll-padding-top:44px; }
.ws-h1{ font-size:.72rem; font-family:var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin:0 0 .6rem; font-weight:500; }
.ws-list{ display:flex; flex-direction:column; gap:.3rem; overflow:visible; }
.ws-list .spec-chip{
  display:flex; align-items:center; gap:.55rem; width:100%; text-align:left; padding:.5rem .6rem;
  border:1px solid transparent; border-radius:9px; background:none; color:var(--text-dim); cursor:pointer;
  font-size:.86rem; line-height:1.25; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  animation:wsIn .4s var(--ease) both; animation-delay:calc(var(--i,0) * 18ms);
}
.ws-list .spec-chip svg{ width:17px; height:17px; flex:none; opacity:.75; }
.ws-list .spec-chip:hover{ background:var(--surface-2); color:var(--text); }
.ws-list .spec-chip.active{ background:var(--surface-2); border-color:var(--cyan); color:var(--text); }
.ws-list .spec-chip.active svg{ opacity:1; color:var(--cyan-bright); }
.ws-list .spec-chip[hidden]{ display:none; }
.spec-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--copper-bright); margin-left:auto; flex:none; box-shadow:0 0 8px var(--copper-bright); }
@keyframes wsIn{ from{ opacity:0; transform:translateX(-6px); } }
.ws-rail-foot, .ws-skill-intro{ margin:.8rem 0 0; font-size:.74rem; line-height:1.5; color:var(--text-faint); }
.ws-skill-intro{ margin:0 0 .8rem; }
.ws-skill-intro b{ color:var(--cyan-bright); font-weight:600; }
.ws-skill-list{ display:flex; flex-direction:column; gap:.4rem; }
.ws-skill{ border:1px solid var(--line); border-radius:9px; background:var(--surface-2); overflow:hidden; }
.ws-skill-btn{ display:flex; align-items:baseline; gap:.5rem; width:100%; text-align:left; padding:.55rem .65rem; border:0; background:none; color:var(--text); cursor:pointer; font-size:.85rem; }
.ws-skill-btn small{ margin-left:auto; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.ws-skill-btn:hover{ color:var(--cyan-bright); }
.ws-skill-body{ padding:0 .65rem .6rem; font-size:.76rem; line-height:1.5; color:var(--text-dim); }
.ws-skill-eg{ display:block; width:100%; text-align:left; margin-top:.35rem; padding:.3rem .45rem; border:1px dashed var(--line-strong); border-radius:6px; background:none; color:var(--text-faint); font-family:var(--f-mono); font-size:.7rem; cursor:pointer; }
.ws-skill-eg:hover{ color:var(--cyan-bright); border-color:var(--cyan); }
.ws-skill-more{ display:inline-block; margin-top:.8rem; font-size:.78rem; color:var(--cyan-bright); text-decoration:none; }
.ws-skill-more:hover{ text-decoration:underline; }

/* position:relative is load-bearing — .ws-empty is absolute inset:0 and
   without a positioned ancestor it anchored to the page, so the empty state
   and its canvas stretched to the full document height (2363px on a phone)
   and left a huge black void below the footer. */
.ws-canvas{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg); }
.ws-head{ display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem; border-bottom:1px solid var(--line); background:var(--surface-1); }
.ws-avatar{ width:34px; height:34px; flex:none; }
.ws-head-id{ min-width:0; }
.ws-head-id .who{ font-size:.94rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-head-id .status{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em; color:var(--text-faint); display:flex; align-items:center; gap:.35rem; }
.ws-head-id .status i{ width:6px; height:6px; border-radius:50%; background:var(--green-bright,#4F9501); box-shadow:0 0 7px var(--green-bright,#4F9501); }
.ws-head .credit-pill{ margin-left:auto; }
.ws-icon-btn{ width:36px; height:36px; flex:none; display:none; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text-dim); cursor:pointer; }
.ws-icon-btn svg{ width:18px; height:18px; }
.ws-icon-btn:hover{ border-color:var(--cyan); color:var(--text); }
.ws-ctx-open{ margin-left:auto; }
.ws-chat{ flex:1; min-height:0; display:flex; flex-direction:column; border:0; border-radius:0; background:none; position:relative; }
.ws-log{ flex:1; min-height:0; height:auto; max-height:none; padding:1rem 1.1rem; }
.ws-input{ border-top:1px solid var(--line); background:var(--surface-1); }

/* the empty state: a slow particle field that is the "digital universe" of the
   rest of the site, at rest until the first question */
/* Was position:absolute; inset:0 over the WHOLE canvas column — which
   includes the composer. On a tall desktop column the centred content never
   reached it; on a 623px phone column it sat directly on top of the "Ask
   anything" box. It is a flex child now, so it occupies exactly the space
   the log will occupy and can never overlap the input at any height. */
.ws-empty{ position:relative; flex:1 1 auto; min-height:0; display:grid; place-items:center; padding:1.5rem; z-index:1; }
.ws-empty[hidden]{ display:none; }
.ws-field{ position:absolute; inset:0; opacity:.5; pointer-events:none; }
.ws-field canvas{ width:100%; height:100%; display:block; }
.ws-empty-in{ position:relative; text-align:center; max-width:56ch; }
.ws-empty-h{ font-size:clamp(1.5rem,1rem+2vw,2.4rem); margin:0 0 .6rem; line-height:1.1; }
.ws-empty-p{ font-size:.92rem; line-height:1.6; color:var(--text-dim); margin:0 0 1.1rem; }
.ws-sugg{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.ws-sugg button{
  padding:.42rem .75rem; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface-2);
  color:var(--text-dim); font-size:.79rem; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  animation:wsIn .5s var(--ease) both; animation-delay:calc(120ms + var(--i,0) * 60ms);
}
.ws-sugg button:hover{ border-color:var(--cyan); color:var(--text); transform:translateY(-1px); }

/* the working panel */
.ws-ctx-card{ margin:0 1rem; padding:.85rem .9rem; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); }
.ws-ctx-h{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); margin:0 0 .5rem; font-weight:500; }
.ws-ctx-sub, .ws-ctx-empty{ font-size:.76rem; line-height:1.55; color:var(--text-faint); margin:0 0 .6rem; }
.ws-work-title{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-bright); margin:0 0 .3rem; }
.ws-work-value{ font-size:1.05rem; line-height:1.35; color:var(--text); font-weight:600; margin:0 0 .55rem; word-break:break-word; }
.ws-work-steps{ list-style:none; margin:0 0 .5rem; padding:0; display:flex; flex-direction:column; gap:.28rem; }
.ws-work-steps li{ font-family:var(--f-mono); font-size:.71rem; line-height:1.45; color:var(--text-dim); padding-left:.8rem; position:relative; animation:wsIn .35s var(--ease) both; animation-delay:calc(var(--i,0) * 55ms); }
.ws-work-steps li::before{ content:''; position:absolute; left:0; top:.5em; width:4px; height:4px; border-radius:50%; background:var(--copper-bright); }
.ws-work-note{ font-size:.71rem; line-height:1.5; color:var(--text-faint); margin:0; padding-top:.5rem; border-top:1px solid var(--line); }
.ws-src{ display:block; font-size:.76rem; color:var(--text-dim); text-decoration:none; padding:.3rem 0; border-bottom:1px solid var(--line); }
.ws-src:last-child{ border-bottom:0; }
.ws-src:hover{ color:var(--cyan-bright); }
.ws-src b{ display:block; font-weight:600; color:var(--text); }
.ws-conn-grid{
  /* Restacks the horizontal .ai-conn-grid into a column: its nowrap and
     x-scroller must be undone or the tiles squeeze with a scrollbar on the
     wrong axis. The list then gets its OWN bounded scroller — without it a
     long model list pushes the Offline card past the viewport and the last
     engines are unreachable, which is what the screencast showed. */
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:.45rem;
  padding:.15rem .15rem .15rem 0; scroll-snap-type:none;
  max-height:min(46vh, 420px); overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
  overscroll-behavior:contain;
}
.ws-conn-grid::-webkit-scrollbar{ width:8px; }
.ws-conn-grid::-webkit-scrollbar-track{ background:transparent; }
.ws-conn-grid::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:2px solid var(--surface-2); }
.ws-conn-grid:hover::-webkit-scrollbar-thumb{ background:var(--text-faint); }
/* a soft edge so it is visibly a list that continues, not a list that ends */
.ws-conn-wrap{ position:relative; }
.ws-conn-wrap::after{
  content:''; position:absolute; left:0; right:8px; bottom:0; height:26px; pointer-events:none;
  background:linear-gradient(to top, var(--surface-2), transparent);
  opacity:1; transition:opacity .2s var(--ease);
}
.ws-conn-wrap.is-end::after{ opacity:0; }
.ws-conn-count{
  display:flex; align-items:center; gap:.3rem; margin:.5rem 0 0;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}

@media (prefers-reduced-motion: reduce){
  .ws-dot, .ws-list .spec-chip, .ws-sugg button, .ws-work-steps li{ animation:none; }
}
@media (max-width:1080px){
  .ai-ws{ grid-template-columns:clamp(230px,26vw,290px) minmax(0,1fr); }
  .ws-ctx{ position:fixed; top:0; right:0; bottom:0; width:min(370px,90vw); z-index:60; transform:translateX(100%); transition:transform .3s var(--ease); border-left:1px solid var(--line-strong); box-shadow:-20px 0 60px -30px rgba(0,0,0,.9); padding-top:0; }
  .ws-ctx.is-open{ transform:none; }
  .ws-ctx .ws-rail-close{ display:grid; place-items:center; }
  .ws-ctx-open{ display:grid; }
}
@media (max-width:760px){
  .ai-ws{ grid-template-columns:minmax(0,1fr); height:calc(100dvh - var(--ws-top, 100px)); }
  .ws-rail{ position:fixed; top:0; left:0; bottom:0; width:min(310px,88vw); z-index:60; transform:translateX(-100%); transition:transform .3s var(--ease); border-right:1px solid var(--line-strong); box-shadow:20px 0 60px -30px rgba(0,0,0,.9); }
  .ws-rail.is-open{ transform:none; }
  .ws-rail .ws-rail-close{ display:grid; place-items:center; }
  .ws-rail-open{ display:grid; }
  .ws-empty-p{ display:none; }
  .ws-log{ padding:.8rem .7rem; }
}

/* ---- /ai-skills/ — the catalogue, each card runs its own examples ---- */
.skills-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:1rem; margin:0 0 3rem; }
.skill-card{ border:1px solid var(--line); border-radius:14px; background:var(--surface-1); padding:1.1rem 1.15rem 1.2rem; animation:wsIn .5s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms); }
.skill-card-group{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--copper-bright); }
.skill-card-h{ font-size:1.3rem; margin:.25rem 0 .5rem; line-height:1.15; }
.skill-card-blurb{ font-size:.87rem; line-height:1.6; color:var(--text-dim); margin:0 0 .9rem; }
.skill-runs{ display:flex; flex-direction:column; gap:.4rem; }
.skill-run-q{ display:block; width:100%; text-align:left; padding:.42rem .6rem; border:1px dashed var(--line-strong); border-radius:8px; background:var(--surface-2); color:var(--text-dim); font-family:var(--f-mono); font-size:.74rem; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease); }
.skill-run-q::before{ content:'\203A  '; color:var(--cyan-bright); }
.skill-run-q:hover{ border-color:var(--cyan); color:var(--text); }
.skill-run-q.is-on{ border-style:solid; border-color:var(--cyan); color:var(--text); }
.skill-run-out{ padding:.55rem .7rem .6rem; border-left:2px solid var(--cyan); margin:.3rem 0 .2rem .3rem; animation:wsIn .35s var(--ease) both; }
.skill-run-out b{ display:block; font-size:1rem; color:var(--text); margin-bottom:.35rem; }
.skill-run-out ul{ list-style:none; margin:0 0 .4rem; padding:0; display:flex; flex-direction:column; gap:.22rem; }
.skill-run-out li{ font-family:var(--f-mono); font-size:.71rem; line-height:1.45; color:var(--text-faint); }
.skill-run-out small{ display:block; font-size:.71rem; line-height:1.5; color:var(--text-faint); opacity:.8; }
.skills-method, .skills-honest{ margin:0 0 2.6rem; }
.skills-method-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1.2rem 1.6rem; margin-top:1rem; }
.skills-method-grid h3{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-bright); margin:0 0 .35rem; }
.skills-method-grid p{ font-size:.86rem; line-height:1.6; color:var(--text-dim); margin:0; }
.skills-honest p{ max-width:74ch; font-size:.92rem; line-height:1.7; color:var(--text-dim); }

/* Claude Priority redemption, inside the Engines card of the working panel */
.ai-upgrade-strip{ margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line); }
.ai-upg-copy{ font-size:.74rem; line-height:1.5; color:var(--text-faint); margin-bottom:.45rem; }
.ai-upg-row{ display:flex; gap:.35rem; }
.ai-upg-row input{ flex:1; min-width:0; font-size:.78rem; padding:.4rem .55rem; }
.ai-plan-status{ margin:.45rem 0 0; font-size:.73rem; line-height:1.5; color:var(--cyan-bright); }

/* ==========================================================================
   Restored after the studio purge (B92). The B91 cleanup deleted every
   `.st-*` rule to remove the old AI studio, but three of those classes
   belonged elsewhere: the Style Transfer tool's output canvas and its input
   thumbnails, and the assistant gallery's tag list. Prefix deletion is a
   blunt instrument; these are back, and named by what they actually are.
   ========================================================================== */
.st-thumb{
  display:block; width:100%; max-height:130px; object-fit:cover; margin-top:.45rem;
  border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
  opacity:0; transform:scale(.98); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.st-thumb[src]{ opacity:1; transform:none; }
.st-out{ width:100%; border-radius:10px; background:var(--surface-2); }
.st-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.25rem; margin:.55rem 0 0; padding:0; }
.st-tags li{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .45rem; border:1px solid var(--line); border-radius:999px; color:var(--text-faint);
}

/* ==========================================================================
   CONTROLS (B92) — one behaviour for every toggle, slider, button and border
   across the AI pages and the tools. Everything moves on the same easing and
   settles; nothing loops. Focus is always visible.
   ========================================================================== */
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; background:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:99px;
  background:linear-gradient(90deg, var(--cyan-bright) 0 var(--rp,0%), var(--line-strong) var(--rp,0%) 100%);
}
input[type="range"]::-moz-range-track{ height:4px; border-radius:99px; background:var(--line-strong); }
input[type="range"]::-moz-range-progress{ height:4px; border-radius:99px; background:var(--cyan-bright); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:15px; height:15px; margin-top:-5.5px; border-radius:50%;
  background:var(--text); border:2px solid var(--cyan-bright); box-shadow:0 0 0 0 color-mix(in srgb, var(--cyan-bright) 40%, transparent);
  transition:box-shadow .2s var(--ease), transform .15s var(--ease);
}
input[type="range"]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--text); border:2px solid var(--cyan-bright);
  transition:box-shadow .2s var(--ease), transform .15s var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.12); }
input[type="range"]:active::-webkit-slider-thumb{ box-shadow:0 0 0 7px color-mix(in srgb, var(--cyan-bright) 22%, transparent); }
input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 5px color-mix(in srgb, var(--cyan-bright) 35%, transparent); }

/* checkbox / radio: a real tick that draws itself */
input[type="checkbox"], input[type="radio"]{
  -webkit-appearance:none; appearance:none; width:17px; height:17px; flex:none; vertical-align:-3px;
  border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer; position:relative;
  border-radius:5px; transition:border-color .2s var(--ease), background .2s var(--ease);
}
input[type="radio"]{ border-radius:50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover{ border-color:var(--cyan); }
input[type="checkbox"]:checked, input[type="radio"]:checked{ background:var(--cyan-bright); border-color:var(--cyan-bright); }
input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #0B0F0C; border-width:0 2px 2px 0; transform:rotate(42deg) scale(0);
  animation:ctlTick .22s var(--ease) forwards;
}
input[type="radio"]:checked::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:#0B0F0C; animation:ctlPop .2s var(--ease) both; }
@keyframes ctlTick{ to{ transform:rotate(42deg) scale(1); } }
@keyframes ctlPop{ from{ transform:scale(0); } }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible{ outline:2px solid var(--cyan-bright); outline-offset:2px; }

/* buttons: a quiet press, and a sheen that crosses once on hover */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:''; position:absolute; inset:0; pointer-events:none; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.13) 50%, transparent 80%);
}
.btn:hover::after{ animation:ctlSheen .7s var(--ease) forwards; }
.btn:active{ transform:translateY(1px); }
@keyframes ctlSheen{ to{ transform:translateX(120%); } }

/* a focus ring that is always visible, on everything focusable */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--cyan-bright); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  .btn::after{ display:none; }
  input[type="checkbox"]:checked::after, input[type="radio"]:checked::after{ animation:none; transform:rotate(42deg) scale(1); }
  input[type="radio"]:checked::after{ transform:none; }
  .st-thumb{ transition:none; }
}

/* ==========================================================================
   SITE SEARCH OVERLAY (B92) — the dialog, its input and its hint had no
   rules at all: the overlay opened as an unstyled white block in the corner.
   Only `.search-overlay` (z-index) and `.search-results` existed. Same class
   of defect as the unstyled nav search button in B87, found the same way.
   ========================================================================== */
.search-overlay{
  position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 1rem 1rem; background:rgba(3,6,4,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:srchFade .18s var(--ease) both;
}
.search-box{
  width:min(640px, 100%); border:1px solid var(--line-strong); border-radius:14px;
  background:var(--surface-1); box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  overflow:hidden; animation:srchRise .24s var(--ease) both;
}
.search-box > input[type="search"]{
  width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:none; padding:1rem 1.1rem; font-size:1rem; color:var(--text);
}
.search-box > input[type="search"]:focus{ outline:none; box-shadow:none; }
.search-box .search-results{ max-height:min(52vh, 440px); overflow-y:auto; padding:.4rem; border:0; background:none; }
.search-hint{ margin:0; padding:1rem 1.1rem; font-size:.84rem; color:var(--text-faint); }
.search-results a{
  display:block; padding:.55rem .75rem; border-radius:9px; text-decoration:none; color:var(--text);
  transition:background .18s var(--ease);
}
.search-results a small{ display:block; font-size:.76rem; color:var(--text-faint); margin-top:.1rem; }
.search-results a:hover, .search-results a:focus-visible{ background:var(--surface-2); }
@keyframes srchFade{ from{ opacity:0; } }
@keyframes srchRise{ from{ opacity:0; transform:translateY(-10px) scale(.985); } }
@media (prefers-reduced-motion: reduce){ .search-overlay, .search-box{ animation:none; } }

/* ---- page hero: one convention for the kicker, sub and actions. The three
   AI pages had invented three (kicker / hero-kicker / none), two of them
   with no rule at all, so the text rendered at browser defaults. ---- */
.page-hero-kicker{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-bright); margin:0 0 .6rem;
}
.page-hero-sub{ max-width:70ch; font-size:1rem; line-height:1.7; color:var(--text-dim); margin:.8rem 0 0; }
.page-hero-actions{ margin:1.3rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem; }

/* category headings in the tool tab strip — had no rule, so they rendered as
   default browser text in the middle of a styled control row */
.tool-cat{
  flex-basis:100%; margin:.9rem 0 .25rem; font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}
.tool-cat:first-child{ margin-top:0; }

/* ASCII-art output and the text-to-video stage — both shipped without rules,
   so the <pre> fell back to a browser serif at default size and the video
   stage had no dimensions until JS set them inline. */
.asc-out{
  display:block; overflow:auto; max-height:440px; margin:0;
  padding:.8rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2);
  font-family:var(--f-mono); font-size:.52rem; line-height:1; letter-spacing:0; color:var(--text);
  white-space:pre; tab-size:1;
}
.asc-pixel{ image-rendering:pixelated; max-width:100%; border-radius:8px; }
.ttv-layout{ display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:900px){ .ttv-layout{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.ttv-canvas{ width:100%; border:1px solid var(--line); border-radius:10px; background:#000; display:block; }

/* The last four elements in the markup with no rule of their own: a canvas,
   a code output block, and two stages that relied on JS setting inline
   dimensions. Found by the layout audit, not by eye. */
.art-canvas{ width:100%; display:block; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.cg-out{
  display:block; overflow:auto; max-height:420px; margin:0; padding:.85rem 1rem;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-2);
  font-family:var(--f-mono); font-size:.78rem; line-height:1.55; color:var(--text); white-space:pre; tab-size:2;
}
.mm-stage{ position:relative; width:100%; min-height:420px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); overflow:hidden; }
.vec-preview{ display:grid; place-items:center; min-height:260px; padding:1rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.vec-preview svg, .vec-preview img{ max-width:100%; max-height:340px; }

/* ==========================================================================
   WORKSPACE SCROLLING (B93) — the rail and the working panel are flex
   columns with `overflow-y:auto`, but their children had the default
   `flex-shrink:1`, so instead of overflowing and scrolling they compressed:
   the Engines list squashed and its lower tiles were unreachable. Children
   keep their natural height; the column scrolls.
   ========================================================================== */
.ws-rail > *, .ws-ctx > *{ flex:0 0 auto; }

/* .ws-conn-grid restacks the horizontal .ai-conn-grid into a column, so the
   parent's nowrap + horizontal scroller must be undone or the tiles are
   squeezed with a scrollbar on the wrong axis. */
.ws-conn-grid > *{ flex:0 0 auto; width:100%; }
.ws-ctx-card{ overflow:visible; }

/* a scrollbar that reads as part of the instrument panel rather than the OS */
.ws-rail::-webkit-scrollbar, .ws-ctx::-webkit-scrollbar{ width:9px; }
.ws-rail::-webkit-scrollbar-track, .ws-ctx::-webkit-scrollbar-track{ background:transparent; }
.ws-rail::-webkit-scrollbar-thumb, .ws-ctx::-webkit-scrollbar-thumb{
  background:var(--line-strong); border-radius:99px; border:2px solid var(--surface-1);
}
.ws-rail:hover::-webkit-scrollbar-thumb, .ws-ctx:hover::-webkit-scrollbar-thumb{ background:var(--text-faint); }

/* "more below" cue for the workspace columns (B94). A sticky pseudo-element
   inside the scroll container: a fade and a chevron that sit at the bottom
   edge while content remains, and vanish at the end. Overlay scrollbars hide
   until touched, so without this a scrolling panel reads as a dead end. */
/* NOTE: no `position:relative` here. The mobile rules below turn these into
   fixed drawers, and this block sits after them in the file — a relative
   here silently un-did that, the rail sat in the layout, the page overflowed
   by ~300px and the browser zoomed out to fit. The sticky ::after does not
   need a positioned ancestor. */
.ws-rail::after, .ws-ctx::after{
  content:'\2193'   /* one backslash. Two printed the literal text \\2193 down both panels */; position:sticky; bottom:0; display:block; flex:0 0 auto; margin-top:auto;
  height:46px; line-height:56px; text-align:center; pointer-events:none;
  font-family:var(--f-mono); font-size:.8rem; color:var(--cyan-bright);
  background:linear-gradient(to bottom, transparent, var(--surface-1) 70%);
  opacity:0; transform:translateY(6px); transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.ws-rail.has-more::after, .ws-ctx.has-more::after{ opacity:1; transform:none; animation:wsNudge 2.6s ease-in-out infinite; }
@keyframes wsNudge{ 50%{ transform:translateY(3px); } }
@media (prefers-reduced-motion: reduce){ .ws-rail.has-more::after, .ws-ctx.has-more::after{ animation:none; } }

/* ==========================================================================
   NAV ON SMALL PHONES (B95) — the 880px breakpoint collapsed the links but
   left the action row at full size: brand + burger + search + theme toggle
   + "Get a Quote" measured 499px against a 375px viewport, so EVERY page
   scrolled sideways by 124px and the browser zoomed out to fit, which is
   what made the AI page look shrunken rather than mobile.
   ========================================================================== */
@media (max-width:560px){
  .nav{ padding-left:.8rem; padding-right:.8rem; }
  .nav-actions{ gap:.4rem; }
  /* the theme toggle keeps its dot and loses its label — still tappable */
  .theme-toggle{ padding:.45rem; gap:0; font-size:0; width:38px; height:38px; justify-content:center; }
  .theme-toggle .theme-toggle-dot{ margin:0; }
  /* the quote button says the short form */
  .nav-actions .btn-primary{ padding:.5rem .7rem; font-size:.78rem; white-space:nowrap; }
  .nav-actions .btn-primary .long{ display:none; }
  .brand-word{ font-size:1.05rem; }
  .brand-mark{ width:34px; height:34px; }
}
@media (max-width:380px){
  /* the smallest phones (320px): the brand mark alone carries the identity,
     and the nav row is allowed to shrink rather than push the page wide */
  .nav{ padding-left:.55rem; padding-right:.55rem; gap:.4rem; }
  .brand-word{ font-size:.95rem; }
  .brand-word .suffix{ display:none; }
  .nav-actions{ gap:.3rem; min-width:0; }
  .nav-actions .btn-primary{ padding:.45rem .55rem; font-size:.72rem; }
  .nav-search-btn, .theme-toggle{ width:34px; height:34px; }
  .nav-toggle{ padding:.35rem .45rem; }
}

/* Package cards at tablet width: the card's contents measured 476px inside a
   340px box. Grid and flex children default to min-width:auto, so a long
   feature line or the price row refuses to shrink; the card clipped it
   (overflow:hidden) but the grid still reported the width and the page
   scrolled sideways by 70px. Letting the children shrink fixes the cause. */
.package-grid{
  min-width:0;
  /* The grid's own decoration paints wider than its track total (children
     measure 342+342+21 = 705 exactly, yet the grid reports 807). Clipping on
     the x axis contains it without making the grid a scroll container, which
     `hidden` would, and without touching the vertical liquid animation. */
  overflow-x:clip;
}
.package-card, .package-card > *, .pkg-slot{ min-width:0; }
.package-card ul, .package-card li, .package-card p{ overflow-wrap:anywhere; }

/* The card's own decoration (the animated rim and blobs) is drawn larger than
   the card and clipped. `overflow:hidden` still makes the card a scroll
   container that reports that width, which propagated up and scrolled the
   page. `clip` clips without creating a scroll container. */
.package-card{ overflow:clip; }

/* 320px phones: the workspace header's five items (menu, avatar, name+status,
   credits, working-panel button) added up to more than the viewport. The
   identity block shrinks and the credit pill steps aside rather than pushing
   the button off the edge. */
@media (max-width:400px){
  .ws-head{ gap:.45rem; padding:.55rem .5rem; }
  .ws-head-id{ flex:1 1 auto; min-width:0; }
  .ws-head-id .who{ font-size:.85rem; }
  .ws-head .credit-pill{ display:none; }      /* it is repeated in the working panel */
  .ws-avatar{ width:30px; height:30px; }
  .ws-icon-btn{ width:32px; height:32px; }
  .ws-icon-btn svg{ width:16px; height:16px; }
  /* the skills page cards and hero */
  .skills-grid{ grid-template-columns:1fr; gap:.7rem; }
  .skill-card{ padding:.85rem .8rem 1rem; }
  .skill-run-q{ font-size:.68rem; word-break:break-word; }
  .page-hero-sub, .skills-honest p{ font-size:.9rem; }
}

/* ==========================================================================
   ASSISTANT DOCK (B95) — replaces the floating Concierge card on every page
   that is not the AI Studio. Same visual language as the Studio: hairline
   rules, mono labels, one accent per state, motion that settles.
   ========================================================================== */
.dock-launch{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:var(--z-fab, 70);
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .95rem .6rem .8rem;
  border:1px solid var(--line-strong); border-radius:999px; cursor:pointer;
  background:color-mix(in srgb, var(--surface-1) 92%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--text); font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dock-launch svg{ width:19px; height:19px; color:var(--cyan-bright); }
.dock-launch:hover{ border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 22px 50px -22px rgba(0,0,0,.95); }
.dock-launch.is-open{ opacity:0; pointer-events:none; transform:translateY(8px); }
.dock-launch-dot{ width:7px; height:7px; border-radius:50%; background:var(--green-bright,#4F9501); box-shadow:0 0 9px var(--green-bright,#4F9501); animation:wsPulse 2.6s ease-in-out infinite; }

.dock{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:calc(var(--z-fab, 70) + 1);
  display:flex; flex-direction:column; width:min(400px, calc(100vw - 2rem));
  max-height:min(660px, calc(100dvh - 6rem));
  border:1px solid var(--line-strong); border-radius:16px; overflow:hidden;
  background:var(--surface-1); box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  animation:dockIn .28s var(--ease) both;
}
@keyframes dockIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } }
.dock-head{ display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem .7rem .95rem; border-bottom:1px solid var(--line); }
.dock-id{ display:flex; align-items:baseline; gap:.45rem; min-width:0; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; }
.dock-id b{ color:var(--text); font-weight:600; text-transform:uppercase; }
.dock-id span{ color:var(--text-faint); font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dock-live{ width:6px; height:6px; border-radius:50%; background:var(--green-bright,#4F9501); box-shadow:0 0 7px var(--green-bright,#4F9501); align-self:center; }
.dock-expand{ margin-left:auto; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--cyan-bright); text-decoration:none; white-space:nowrap; }
.dock-expand:hover{ text-decoration:underline; }
.dock-close{ width:32px; height:32px; flex:none; display:grid; place-items:center; border:0; background:none; border-radius:8px; color:var(--text-dim); font-size:1.25rem; cursor:pointer; }
.dock-close:hover{ background:var(--surface-2); color:var(--text); }

.dock-work{ flex:none; padding:.6rem .95rem .7rem; border-bottom:1px solid var(--line); background:var(--surface-2); }
.dock-work-title{ margin:0 0 .2rem; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-bright); }
.dock-work-value{ margin:0 0 .35rem; font-size:.95rem; font-weight:600; color:var(--text); word-break:break-word; }
.dock-work-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.dock-work-steps li{ font-family:var(--f-mono); font-size:.68rem; line-height:1.4; color:var(--text-dim); animation:wsIn .3s var(--ease) both; animation-delay:calc(var(--i,0) * 50ms); }
.dock-work-steps a{ color:var(--cyan-bright); text-decoration:none; }

.dock-chips{ flex:none; display:flex; flex-wrap:wrap; gap:.35rem; padding:.7rem .95rem .2rem; }
.dock-chips[hidden]{ display:none; }
.dock-chip{
  padding:.35rem .65rem; border:1px solid var(--line); border-radius:999px; background:var(--surface-2);
  color:var(--text-dim); font-size:.75rem; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
  animation:wsIn .4s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms);
}
.dock-chip:hover{ border-color:var(--cyan); color:var(--text); }
.dock-log{ flex:1; min-height:120px; height:auto; max-height:none; padding:.8rem .95rem; border:0; background:none; }
.dock-input{ flex:none; border-top:1px solid var(--line); background:var(--surface-1); padding:.55rem .7rem; gap:.4rem; align-items:center; }
.dock-input textarea{ padding:.55rem .7rem; font-size:.9rem; min-height:40px; max-height:96px; }
.dock .chat-voice, .dock .chat-speak{ width:36px; height:36px; margin-right:0; }
.dock .chat-send{ width:40px; height:40px; }

@media (prefers-reduced-motion: reduce){
  .dock{ animation:none; } .dock-chip, .dock-work-steps li{ animation:none; }
  .dock-launch-dot{ animation:none; }
}
@media (max-width:560px){
  .dock-launch{ right:.8rem; bottom:.8rem; padding:.55rem .8rem .55rem .7rem; }
  .dock-launch-label{ display:none; }
  .dock{ inset:0; width:100%; max-height:none; height:100dvh; border-radius:0; border:0;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); animation:none; }
  .dock-log{ min-height:0; }
}

/* ==========================================================================
   APP BUILDER (B96) — describe an app, watch it build, download the file.
   ========================================================================== */
.wb{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:1.2rem; align-items:start; margin-bottom:3rem; }
.wb-left{ display:flex; flex-direction:column; gap:.65rem; }
.wb-engine{ display:flex; gap:.5rem; align-items:flex-start; padding:.6rem .75rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); font-size:.78rem; line-height:1.5; color:var(--text-dim); }
.wb-engine i{ flex:none; width:7px; height:7px; margin-top:.45rem; border-radius:50%; background:var(--copper-bright); box-shadow:0 0 8px var(--copper-bright); }
.wb-engine.is-ready i{ background:var(--green-bright,#4F9501); box-shadow:0 0 8px var(--green-bright,#4F9501); }
.wb-engine b{ color:var(--text); font-weight:600; }
.wb-engine a{ color:var(--cyan-bright); }
.wb-label{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); }
.wb-prompt{ width:100%; resize:vertical; min-height:88px; font-size:.9rem; line-height:1.55; }
.wb-ideas{ display:flex; flex-wrap:wrap; gap:.3rem; }
.wb-idea{ padding:.3rem .6rem; border:1px dashed var(--line-strong); border-radius:999px; background:none; color:var(--text-faint); font-size:.73rem; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease); animation:wsIn .4s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms); }
.wb-idea:hover{ border-color:var(--cyan); color:var(--text); border-style:solid; }
.wb-actions{ display:flex; gap:.5rem; }
.wb-actions .btn{ flex:1; justify-content:center; }
.wb-refine{ padding-top:.6rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.4rem; }
.wb-refine-row{ display:flex; gap:.4rem; }
.wb-refine-row input{ flex:1; min-width:0; font-size:.85rem; }
.wb-note, .wb-status{ margin:0; font-size:.74rem; line-height:1.5; color:var(--text-faint); }
.wb-status.is-working{ color:var(--cyan-bright); font-family:var(--f-mono); }
.wb-status.is-good{ color:var(--green-bright,#88FF05); }
.wb-status.is-bad{ color:var(--copper-bright); }

.wb-right{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface-1); display:flex; flex-direction:column; min-height:520px; }
.wb-tabs{ display:flex; align-items:center; gap:.2rem; padding:.4rem .5rem; border-bottom:1px solid var(--line); background:var(--surface-2); }
.wb-tab{ padding:.4rem .7rem; border:0; background:none; border-radius:8px; cursor:pointer; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.wb-tab i{ font-style:normal; opacity:.65; margin-left:.3rem; }
.wb-tab:hover{ color:var(--text-dim); }
.wb-tab.is-on{ color:var(--cyan-bright); background:var(--surface-1); }
.wb-tab-spacer{ flex:1; }
.wb-icon{ padding:.35rem .6rem; border:1px solid var(--line); border-radius:8px; background:var(--surface-1); color:var(--text-dim); font-family:var(--f-mono); font-size:.7rem; cursor:pointer; }
.wb-icon:hover{ border-color:var(--cyan); color:var(--text); }
.wb-dl{ border-color:var(--cyan); color:var(--cyan-bright); }
.wb-stage{ flex:1; min-height:0; position:relative; display:flex; }
.wb-frame{ flex:1; width:100%; border:0; background:#fff; display:block; }
.wb-code{ flex:1; margin:0; padding:1rem; overflow:auto; background:var(--surface-2); font-family:var(--f-mono); font-size:.74rem; line-height:1.55; color:var(--text); white-space:pre; tab-size:2; }
.wb-idle{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.7rem; color:var(--text-faint); text-align:center; padding:2rem; }
.wb-idle svg{ width:46px; height:46px; opacity:.5; }
.wb-idle p{ margin:0; font-size:.86rem; max-width:34ch; }
.wb-how{ margin:0 0 2.6rem; }

@media (max-width:900px){
  .wb{ grid-template-columns:minmax(0,1fr); }
  .wb-right{ min-height:420px; }
}
@media (max-width:560px){
  .wb-right{ min-height:340px; }
  .wb-tabs{ flex-wrap:wrap; }
  .wb-tab-spacer{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .wb-idea{ animation:none; } }

/* ==========================================================================
   COLOUR STUDIO + TEXT WORKBENCH (B99)
   ========================================================================== */
.cs-top{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:1rem; margin-bottom:1rem; align-items:start; }
.cs-pick{ display:flex; flex-direction:column; gap:.5rem; align-self:start; }
.cs-pick input[type="color"]{ width:100%; height:88px; padding:0; border:1px solid var(--line); border-radius:12px; background:none; cursor:pointer; }
.cs-formats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.4rem; align-content:start; }
.cs-fmt{ display:flex; flex-direction:column; gap:.15rem; padding:.55rem .7rem; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2); color:var(--text); font:inherit; text-align:left; cursor:pointer; transition:border-color .2s var(--ease); }
.cs-fmt:hover{ border-color:var(--cyan); }
.cs-fmt b{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:500; }
.cs-fmt span{ font-family:var(--f-mono); font-size:.78rem; word-break:break-all; }
.cs-fmt.is-copied{ border-color:var(--green-bright,#88FF05); }
.cs-fmt.is-copied b::after{ content:' · copied'; color:var(--green-bright,#88FF05); }
.cs-controls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem; }
.cs-controls label{ display:flex; justify-content:space-between; }
.cs-controls i{ font-style:normal; font-family:var(--f-mono); color:var(--cyan-bright); }
.cs-h{ font-size:1rem; margin:1.4rem 0 .6rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.cs-h .credit{ font-size:.72rem; }
.cs-harm{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.7rem; }
.cs-harm-t{ margin:0 0 .3rem; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.cs-strip{ display:flex; gap:.25rem; }
.cs-strip .cs-sw{ flex:1; }
.cs-ramp{ display:grid; grid-template-columns:repeat(auto-fit,minmax(74px,1fr)); gap:.25rem; }
.cs-sw{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; min-height:60px; padding:.4rem .3rem;
  border:1px solid var(--line); border-radius:9px; cursor:pointer; font:inherit; transition:transform .18s var(--ease); }
.cs-sw:hover{ transform:translateY(-2px); }
.cs-sw span{ font-family:var(--f-mono); font-size:.68rem; font-weight:600; }
.cs-sw i{ font-style:normal; font-family:var(--f-mono); font-size:.56rem; opacity:.75; }
.cs-sw.is-copied{ outline:2px solid var(--green-bright,#88FF05); outline-offset:1px; }
.cs-contrast{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.4fr); gap:.7rem; align-items:end; }
.cs-swap{ padding-bottom:.15rem; }
.cs-ratio{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.cs-ratio-n{ font-family:var(--f-mono); font-size:1.15rem; font-weight:600; margin-right:.3rem; }
.cs-ratio b{ padding:.2rem .5rem; border-radius:99px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; font-weight:500; }
.cs-ratio b.ok{ background:color-mix(in srgb,var(--green-bright,#4F9501) 22%,transparent); color:var(--green-bright,#88FF05); }
.cs-ratio b.no{ background:color-mix(in srgb,var(--copper-bright) 18%,transparent); color:var(--copper-bright); }
.cs-preview{ margin-top:.7rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:12px; }
.cs-prev-lg{ font-size:24px; margin:0 0 .4rem; font-weight:600; }
.cs-prev-sm{ font-size:16px; margin:0; }
.cs-cvd{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.5rem; }
.cs-cvd-cell{ display:flex; flex-direction:column; gap:.3rem; align-items:center; }
.cs-cvd-box{ width:100%; height:64px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; font-size:1.4rem; font-weight:700; }
.cs-cvd-cell span{ font-family:var(--f-mono); font-size:.62rem; color:var(--text-faint); text-align:center; }
.cs-export{ display:flex; gap:.5rem; align-items:end; flex-wrap:wrap; }
.cs-export .field{ flex:1; min-width:190px; margin:0; }
.cs-out{ margin:.7rem 0 0; padding:.9rem 1rem; max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2); font-family:var(--f-mono); font-size:.74rem; line-height:1.55; white-space:pre; }

.tx-tabs{ display:flex; flex-wrap:wrap; gap:.25rem; margin:1rem 0 .7rem; border-bottom:1px solid var(--line); padding-bottom:.5rem; }
.tx-tab{ padding:.4rem .8rem; border:1px solid transparent; border-radius:99px; background:none; color:var(--text-faint);
  font:inherit; font-size:.84rem; cursor:pointer; transition:all .2s var(--ease); }
.tx-tab:hover{ color:var(--text); }
.tx-tab.is-on{ background:var(--surface-2); border-color:var(--cyan); color:var(--text); }
.tx-ops{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.35rem; }
.tx-op{ padding:.5rem .7rem; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text);
  font:inherit; font-size:.83rem; text-align:left; cursor:pointer; transition:border-color .2s var(--ease), transform .15s var(--ease); }
.tx-op:hover{ border-color:var(--cyan); transform:translateY(-1px); }
.tx-find{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.6rem; align-items:end; }
.tx-find .field{ margin:0; }
.tx-find-opts{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.83rem; color:var(--text-dim); }
.tx-find-opts label{ display:flex; align-items:center; gap:.4rem; cursor:pointer; }
.tx-note{ font-size:.78rem; color:var(--text-faint); align-self:center; }
.tx-foot{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); }
@media (max-width:760px){
  .cs-top{ grid-template-columns:minmax(0,1fr); }
  .cs-contrast{ grid-template-columns:minmax(0,1fr); }
  .tx-find{ grid-template-columns:minmax(0,1fr); }
}
.tx-pane{ margin-top:.2rem; }
.tx-pane[hidden]{ display:none; }
.ws-conn-add{ width:100%; justify-content:center; margin-top:.4rem; }
.ws-engines{ font-family:var(--f-mono); font-size:.66rem; color:var(--text-faint); }
.credit-pill{ padding:.16rem .5rem; border:1px solid var(--line); border-radius:99px; font-family:var(--f-mono); font-size:.62rem; color:var(--text-dim); }
.ws-spec-count{ margin:.6rem 0 0; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); font-weight:500; }
.offline-decide{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:1rem 1.1rem; margin-top:1.4rem; border:1px solid var(--line); border-radius:14px; background:var(--surface-1); }
.offline-decide p{ margin:0; flex:1; min-width:220px; font-size:.9rem; color:var(--text-dim); }
.ws-offline{ margin-top:.7rem; padding:.8rem .85rem; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); display:flex; flex-direction:column; gap:.45rem; }
.ws-offline p{ margin:0; font-size:.8rem; line-height:1.5; color:var(--text-dim); }
.ws-offline .btn{ justify-content:center; }

/* ==========================================================================
   MOBILE TOUCH & LEGIBILITY (B101)
   --------------------------------------------------------------------------
   A deep audit at 320/360/375/414 found two real problems that the
   sideways-scroll proof could never catch, because nothing was overflowing:

   1. Tap targets. Nav links resolved to 32px tall, the burger to 34x30, and
      links inside cards to 14-17px. Apple and Android both ask for ~44px;
      below about 32px a thumb starts hitting the wrong thing. Padding is
      added rather than height, so nothing is stretched or re-laid-out — the
      hit area grows around the existing text.
   2. Type size. Labels and badges resolved as small as 9px. On a phone held
      at arm's length that is not small, it is unreadable. A 12px floor is
      applied to the offenders, and 11px only to genuinely peripheral
      metadata where 12 would force a wrap.

   Desktop is untouched: every rule below is inside the mobile query.
   ========================================================================== */
@media (max-width: 820px){
  /* --- tap targets --- */
  .nav-links a, .nav-actions a, .nav-actions button{ min-height:44px; display:inline-flex; align-items:center; }
  .nav-toggle{ min-width:44px; min-height:44px; }
  .foot-entity-link, .tool-back, .ai-tile-link{ display:inline-flex; align-items:center; min-height:40px; }
  .ts-btn, .tool-chip, .compare-toggle, .skill-run-q, .ws-ctx-open, .ws-icon-btn,
  .tx-tab, .tx-op, .wb-tab, .wb-idea, .eg, .cs-fmt{ min-height:40px; }
  .tool-search, .ws-search, .filter,
  input[type="text"], input[type="email"], input[type="search"], input[type="number"], select{ min-height:44px; }
  .cs-sw{ min-height:56px; }
  /* a range needs a thumb a finger can actually catch */
  input[type="range"]{ height:34px; }

  /* --- legibility floor --- */
  .tool-card-cat, .billing-save, .credit-pill, .cs-harm-t, .skill-card-group,
  .ai-tile-badge, .ai-tile-link, .gfx-head, .gfx-foot, .ws-conn-count,
  .cs-ratio b, .swatch, .tx-note, .nb-title, .nb-stamp, .ts-kicker,
  .package-tag, .count-card .lab, .cs-fmt b, .cs-sw i, .eg-out li, .eg-out small{
    font-size:12px !important; letter-spacing:.06em;
  }
  .cs-out, .wb-code, .work-steps li, .ws-work-steps li{ font-size:12px; }
  /* peripheral metadata: 11px, because 12 forces an ugly wrap and nobody
     reads these at length */
  .ws-ver, .foot-legal .foot-note{ font-size:11px; }

  /* the stragglers, named individually — a blanket rule here would have hit
     the whole page and blown up layouts that are fine */
  .ticker-label, .ticker-item, .ticker-item b, .ticker-item span{ font-size:12px; }
  .cs-cvd-cell span{ font-size:12px; }
  .ws-sugg button, .sugg button{ min-height:40px; }   /* the old studio suggestion class is deliberately absent here */
  .ts-name, .tool-note a, .tool-strip a{ display:inline-flex; align-items:center; min-height:40px; }
  .ts-name a, .ts-name > a{ display:inline-flex; align-items:center; min-height:40px; }
  /* a checkbox or radio a thumb can hit */
  .lz-check input, input[type="checkbox"], input[type="radio"]{ min-width:24px; min-height:24px; }
  /* .lz-check IS the label, not a wrapper around one — targeting
     ".lz-check label" matched nothing and left a 30px target. */
  .lz-check, .tx-find-opts label, .field label:has(input[type="checkbox"]),
  .field label:has(input[type="radio"]){ min-height:40px; display:inline-flex; align-items:center; gap:.5rem; }
  .field input, .field select, .field textarea{ min-height:44px; }
  .st-tags li, .tool-chip, .wb-label, .ts-cat, .ts-use b, .ws-tab, .skill-run-q,
  .ts-meta span, .lbl, .credit{ font-size:12px !important; }
  .ws-tab, .skill-run-q, .tool-chip{ min-height:40px; }
  .nb-source, .nb-stage span, .ws-card-t, .ws-card-now{ font-size:12px; }

  /* the floating launcher measured 60x39 — it is the one control every page
     carries, so it should not be the smallest. Nothing is trapped beneath it
     at page end (checked at 360px on home, pricing and contact), so the
     transient overlap while scrolling is left alone; only the size changes. */
  .dock-launch{ min-height:44px; }
}

/* ==========================================================================
   COMPOSER SIZING (B102)
   The send button measured 0x0 — invisible and unclickable — because
   .ws-icon-btn carries no intrinsic size and the glyph alone did not give it
   one. The textarea sat at 26px. Neither was caught earlier because the
   mobile scan checked a/button/input/select and never textarea.
   ========================================================================== */
.ws-composer .chat-send, .ws-composer button[type="submit"]{
  flex:0 0 auto; width:44px; height:44px; display:inline-grid; place-items:center;
  font-size:1.05rem; line-height:1; border-radius:var(--radius-sm);
  background:var(--cyan); color:var(--bg); border:0; cursor:pointer;
}
.ws-composer .chat-send:hover{ background:var(--cyan-bright); }
.ws-composer .chat-voice, .ws-composer .chat-speak{ flex:0 0 auto; width:40px; height:40px; }
@media (max-width:820px){
  .ws-composer{ gap:.4rem; padding:.6rem .7rem; }
  .ws-composer .chat-voice, .ws-composer .chat-speak{ width:44px; height:44px; }
}

/* ==========================================================================
   WORKSPACE COLUMN FLEX (B102)
   .ws-chat was resolving to flex:1 1 0% — the composer stretched and shared
   the column with the log and the empty state instead of pinning to the
   bottom, which is why it floated mid-column on a phone. Three explicit
   rules, in one place, so the column can only lay out one way:
     head    fixed height
     empty   grows, but only while there are no messages
     log     grows and scrolls once there are
     chat    never grows — it sits at the bottom
   ========================================================================== */
.ws-canvas > .ws-head{ flex:0 0 auto; }
.ws-canvas > .ws-empty{ flex:1 1 auto; min-height:0; }
.ws-canvas > .ws-log{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.ws-canvas > .ws-log:empty{ flex:0 0 0; min-height:0; }
.ws-canvas > .ws-composer{ flex:0 0 auto; }
/* the textarea must be allowed to shrink or it forces the voice and send
   buttons onto their own lines — that is what made the composer 220px tall */
.ws-canvas > .ws-composer > .ws-input{ min-width:0; }

/* the composer is a ROW. .ws-chat is the CSS name for the whole chat column
   (flex-direction:column) — putting it on the form stacked every control
   onto its own line and made the composer 220px tall. */
.ws-composer{
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:flex-end; gap:.45rem;
  padding:.7rem .9rem; border-top:1px solid var(--line); background:var(--surface-1);
}
.ws-composer .ws-input{ flex:1 1 auto; min-width:0; min-height:44px; max-height:140px; }

/* ==========================================================================
   MOBILE: the AI studio is an app screen, and the footer is not a page (B102)
   --------------------------------------------------------------------------
   Measured on a phone, /ai-assistant/ came to 2,363px against a 740px
   viewport — a full-height workspace, then 431px of prose, then a 999px
   footer. Scrolling an app surface into an essay and a wall of links reads
   as "the page is broken and empty", which is exactly what it looked like.
   ========================================================================== */
@media (max-width: 820px){
  /* the footer stacked into four full-width columns with 40px gutters.
     Two columns and a tighter gutter roughly halves it, on every page. */
  .foot-grid{ grid-template-columns:1fr 1fr !important; gap:1.3rem 1.1rem !important; }
  .foot-brand{ grid-column:1 / -1; }
  .foot-bottom{ padding-top:1rem; }

  /* the studio explainer was deleted outright in B107 — the workspace is the
     page now, so there is nothing left here to hide on mobile */
}

/* ==========================================================================
   ICON BUTTONS (B103)
   --------------------------------------------------------------------------
   Three controls were bare characters where everything else on the site is a
   drawn icon: the theme toggle was a coloured dot plus a word (and below
   560px the word was hidden, leaving an unexplained blob), the studio's rail
   toggle was "☰" and its working-panel toggle was "◫" — a glyph almost
   nobody can read. They are now icons that match the search button beside
   them, and each carries a title so hovering says what it does.

   The theme toggle shows exactly one of three icons, chosen by state:
   a moon for Dark, a sun for Light, a bolt for Cyber. The first draft used a
   half-filled "auto" circle for the third state, which was simply untrue —
   this site's third theme is Cyber, not a system-following mode.
   ========================================================================== */
.icon-btn, .nav-search-btn, .theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
}
.theme-toggle .ti{ width:17px; height:17px; flex:none; display:none; }
/* default state is dark; the module sets data-theme for the others */
.theme-toggle .ti-moon{ display:block; }
html[data-theme="light"] .theme-toggle .ti-moon,
html[data-theme="cyberpunk"] .theme-toggle .ti-moon{ display:none; }
html[data-theme="light"] .theme-toggle .ti-sun{ display:block; }
html[data-theme="cyberpunk"] .theme-toggle .ti-cyber{ display:block; }
.theme-toggle-dot{ display:none; }        /* the blob it replaces */
.theme-toggle-label{ font-size:.78rem; }

.ws-icon-btn svg, .ws-ctx-open svg{ width:19px; height:19px; display:block; }
.ws-rail-close svg, .ws-ctx-close svg{ width:17px; height:17px; display:block; }
.ws-ctx-open, .ws-icon-btn, .ws-rail-close, .ws-ctx-close{
  display:inline-grid; place-items:center; border-radius:9px;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.ws-ctx-open:hover, .ws-icon-btn:hover{ color:var(--cyan-bright); border-color:var(--cyan); }

@media (max-width:560px){
  /* the label goes, but now an icon remains rather than a mystery dot */
  .theme-toggle-label{ display:none; }
  .theme-toggle{ min-width:44px; padding-left:.55rem; padding-right:.55rem; }
  .nav-search-btn{ min-width:44px; }
}

/* The studio header carries the rail toggle, the active specialist and the
   working-panel toggle. It was static, so scrolling the page slid it under
   the sticky ticker + nav and its controls became untappable — Playwright
   scrolled to reach the button and the ticker swallowed the click. It now
   sticks directly beneath that chrome, at the height the workspace already
   measures, and sits below the nav in the stack so it can never cover it. */
.ws-head{
  position:sticky; top:var(--ws-top, 100px); z-index:18;
  background:var(--surface-1, var(--surface));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* The mobile drawers were z-index 60 while the sticky ticker is 61, so a
   drawer opened UNDER the page chrome and its close button — which sits at
   top:0 — was unreachable. A drawer overlays everything by definition. */
@media (max-width:1000px){
  .ws-ctx{ z-index:70; }
}
@media (max-width:820px){
  .ws-rail{ z-index:70; }
  .ws-veil, .rail-veil, .ws-backdrop{ z-index:69; }
}

/* At 320px the nav row came to 329px once the icon buttons took a 44px
   minimum: brand 147 + burger 44 + search 44 + theme 44, and the Quote
   button was crushed to 20px wide. Below 360px the brand word gives up the
   space instead — it is still legible, and the controls stay tappable. */
@media (max-width:360px){
  .brand-word{ font-size:.94rem; letter-spacing:-.01em; }
  .nav{ gap:.28rem; padding-left:.5rem; padding-right:.5rem; }
  .nav-actions{ gap:.2rem; }
  .nav-search-btn, .theme-toggle{ min-width:40px; padding-left:.4rem; padding-right:.4rem; }
  .nav-toggle{ min-width:40px; }
  .nav-actions .btn-sm{ padding:.4rem .6rem; }
}

/* ==========================================================================
   RATES BANNER (B104)
   --------------------------------------------------------------------------
   The caption said "DIGITAL RATES" in a fixed chip and the track repeated it
   in bold, so the words appeared twice side by side. Both are gone — anyone
   reading "BTC $77,211" already knows what it is. The chip is now just the
   live dot: lit when the feed is up, dim when it is reconnecting. On a phone
   the whole band is slimmer, because it is ambient information and should
   not be taking 36px off the top of every screen.
   ========================================================================== */
.ticker-label{ padding:0 .55rem !important; }
.ticker-label i{ width:7px; height:7px; border-radius:50%; background:var(--text-faint);
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease); }
.market-ticker.is-live .ticker-label i{
  background:var(--green-bright,#88FF05); box-shadow:0 0 8px var(--green-bright,#88FF05);
  animation:tickPulse 2.6s var(--ease) infinite;
}
@keyframes tickPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
@media (prefers-reduced-motion: reduce){ .market-ticker.is-live .ticker-label i{ animation:none; } }

@media (max-width:820px){
  :root{ --ticker-h:28px; }
  .market-ticker{ font-size:.7rem; }
  .ticker-label{ padding:0 .45rem !important; }
}

/* ==========================================================================
   DEEP-SCAN FIXES (B105)
   Four findings from a rendered-page scan across 16 pages x 3 themes.
   ========================================================================== */

/* A heading that is read but not seen. The studio is an app surface with no
   visible title, so it had no h1 at all — invisible to search and to anyone
   arriving by screen reader. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* .ag-card drew a 1px border in --line over --surface-1, which in all three
   themes resolves to almost exactly the card's own fill — a border nobody
   could see. It now uses the stronger line, so the cards read as cards. */
.ag-card{ border-color:var(--line-strong); }
.ag-card:hover{ border-color:var(--cyan); }

/* .tool-note is body copy that explains what a tool does, but it used
   --text-faint and measured 3.54:1 — below the 4.5:1 that normal-size text
   needs. --text-dim clears it without changing the visual hierarchy. */
.tool-note{ color:var(--text-dim); }

/* ==========================================================================
   WORKING PANEL, REBUILT (B106)
   --------------------------------------------------------------------------
   Four problems, all visible in one screenshot:
     · "\2193" printed as literal text down BOTH panels — the scroll cue's
       content had two backslashes where CSS needs one.
     · The Engines card was 686px of a 744px panel, so everything else read as
       stray text floating above it.
     · The redeem-code box was buried inside that engine list, where nobody
       looking for it would think to look.
     · An X in the corner that closes nothing on desktop, because there the
       panel is a column rather than a drawer.
   The panel is now four labelled sections in order of how often they are
   wanted: Working, Engine, Redeem, Offline — the last three collapsed.
   ========================================================================== */
.ws-ctx{ gap:.6rem; }
.ws-ctx-card{ border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.ws-card-work{ padding:.85rem .9rem; }
.ws-card-work .ws-ctx-sub{ margin:0; }

/* the collapsible sections */
.ws-ctx-card > summary{
  display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; cursor:pointer;
  list-style:none; border-radius:12px; min-height:44px;
}
.ws-ctx-card > summary::-webkit-details-marker{ display:none; }
.ws-ctx-card > summary::after{
  content:'▾'; margin-left:auto; font-size:.7rem; color:var(--text-faint);
  transition:transform .22s var(--ease);
}
.ws-ctx-card[open] > summary::after{ transform:rotate(180deg); }
.ws-ctx-card > summary:hover{ background:var(--surface-3); }
.ws-card-t{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); }
.ws-card-now{ font-family:var(--f-mono); font-size:.66rem; color:var(--cyan-bright); }
.ws-card-in{ padding:0 .9rem .9rem; }

/* the engine list gets a ceiling instead of eating the panel */
.ws-card-eng .ws-conn-grid{ max-height:min(38vh, 340px); overflow-y:auto; }

/* the X is a drawer control — only meaningful where the panel IS a drawer */
.ws-ctx-close{ display:none; }
@media (max-width:1000px){ .ws-ctx-close{ display:inline-grid; } }
.ws-ctx-h{ display:flex; align-items:center; gap:.5rem; }
.ws-ctx-h b{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:500; }
.ws-ctx-h .ws-ctx-close{ margin-left:auto; }

/* This block is appended after the panel styles above, so it wins on source
   order — the earlier mobile floor could not, because .ws-card-t was defined
   later in the file at the same specificity. */
@media (max-width:820px){
  .ws-card-t, .ws-card-now{ font-size:12px; }
}

/* The text inside .spec-chip and .pkg-toggle computes #93A099 — the DARK
   --text-dim — while their parents correctly compute the light value. There
   is no literal and no rule matching the span, so the variable is being
   resolved against the dark palette somewhere I have not traced. These
   explicit declarations fix what the user sees (2.31:1 → AA) while the cause
   stays open; they are scoped tightly so they cannot mask anything else. */
html[data-theme="light"] .spec-chip,
html[data-theme="light"] .spec-chip span,
html[data-theme="light"] .pkg-toggle,
html[data-theme="light"] .pkg-toggle span{ color:#45524A; }
html[data-theme="light"] .spec-chip:hover,
html[data-theme="light"] .pkg-toggle:hover{ color:var(--text); }

/* ==========================================================================
   STUDIO FILLS THE PAGE (B107)
   --------------------------------------------------------------------------
   The "How this answers you" section sat below the workspace and took 401px
   of a 1822px page on desktop, pushing the studio into roughly half the
   screen. It is gone, and the workspace is now the <main> landmark rather
   than a div above one.

   With it removed the studio can take the full viewport under the sticky
   chrome. --ws-top is measured at runtime from the real ticker + nav height,
   so this stays correct when either wraps or changes.
   ========================================================================== */
.ai-ws{
  min-height:calc(100dvh - var(--ws-top, 100px));
  margin-bottom:0;                 /* no orphan gap where the section used to be */
}
.ai-ws + footer, .ai-ws ~ footer{ margin-top:0; }

/* the rail and the working panel gain every pixel the explainer gave back,
   so more of the 26 specialists are visible before anyone has to scroll */
.ws-rail, .ws-ctx, .ws-canvas{ min-height:0; }
.ws-list{ padding-bottom:.4rem; }

@supports not (height: 100dvh){
  .ai-ws{ min-height:calc(100vh - var(--ws-top, 100px)); }
}

/* The news band carries a 56px top margin, which is right after prose but
   left a dead strip under an app surface that already runs to the viewport
   edge. On the studio the workspace butts straight up to it. */
/* :has() rather than an adjacent sibling — the connection modal sits between
   the workspace and the news band, so "+" never matched. And these pages
   carry no data-page attribute; that was the other site. */
body:has(.ai-ws) .news-band{ margin-top:0; border-top:1px solid var(--line); }

/* The floating dock is a shortcut TO the studio. On the studio itself it is
   a button that opens what you are already looking at, sitting on top of the
   composer. */
body:has(.ai-ws) .dock-launch,
body:has(.ai-ws) .dock{ display:none !important; }

/* Same as the working panel's X: on desktop the rail is a column, so its
   close button closes nothing. Missed when the other one was fixed. */
.ws-rail-close{ display:none; }
@media (max-width:820px){ .ws-rail-close{ display:inline-grid; place-items:center; } }

/* ---- pavement intelligence page (B108) ---- */
.pv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;margin-bottom:1.2rem}
.pv-kpi{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-1)}
.pv-kpi .v{font-size:2.1rem;font-weight:700;font-family:var(--f-mono);line-height:1}
.pv-kpi .l{font-size:.75rem;color:var(--text-faint);margin-top:.3rem}
.pv-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:1rem;align-items:start;margin-bottom:1rem}
.pv-panel{padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:16px;background:var(--surface-1);margin-bottom:1rem}
.pv-h{font-size:1.05rem;margin:0 0 .7rem;display:flex;align-items:baseline;gap:.6rem}
.pv-h3{font-size:.72rem;font-family:var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin:1.2rem 0 .5rem;font-weight:500}
.pv-map{height:380px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);position:relative}
.pv-status{font-size:.95rem;margin:0 0 .5rem}
.pv-links{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0}
.pv-filter{max-width:320px;margin-bottom:.8rem}
.pv-table-wrap{overflow-x:auto}
.pv-table{width:100%;border-collapse:collapse;font-size:.86rem}
.pv-table th{text-align:left;padding:.5rem .55rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:500}
.pv-table th[data-sort]{cursor:pointer;user-select:none}
.pv-table th[data-sort]:hover{color:var(--text)}
.pv-table th.on{color:var(--cyan-bright)}
.pv-table td{padding:.45rem .55rem;border-bottom:1px solid var(--line);color:var(--text-dim);vertical-align:middle}
.pv-table tbody tr{cursor:pointer}
.pv-table tbody tr:hover{background:var(--surface-2)}
.pv-table td b{color:var(--text)}
.pv-table .mono{font-family:var(--f-mono);font-size:.8rem}
.pv-pill{display:inline-block;padding:.14rem .55rem;border-radius:99px;font-family:var(--f-mono);font-size:.68rem;white-space:nowrap}
.pv-naics{margin:0;padding-left:1.1rem}
.pv-naics li{font-size:.88rem;color:var(--text-dim);margin-bottom:.3rem}
.bid{padding:.55rem 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.15rem}
.bid b{font-size:.88rem}
@media (max-width:900px){.pv-grid{grid-template-columns:minmax(0,1fr)}.pv-map{height:300px}}


/* ---- browser-only chat memory controls (B110) ------------------------- */
.chat-memory-bar{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.5rem .15rem .1rem; margin-top:.35rem;
}
.chat-memory-bar .cmb-note{
  font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-faint); margin-right:auto;
}
.chat-memory-bar .cmb-btn{
  font:inherit; font-size:.72rem; line-height:1;
  padding:.42rem .7rem; border-radius:7px; cursor:pointer;
  color:var(--text-dim); background:transparent;
  border:1px solid var(--line);
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.chat-memory-bar .cmb-btn:hover{ color:var(--text); border-color:var(--brand); }
.chat-memory-bar .cmb-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.chat-memory-bar .cmb-clear:hover{ color:#E4574C; border-color:#E4574C; }
@media (max-width:420px){
  .chat-memory-bar .cmb-note{ width:100%; margin-bottom:.2rem; }
}


/* ---- local performance-audit help (B112) ------------------------------
   Replaces the removed PageSpeed scan. Static content only — no state, no
   network, nothing that can throw. */
.local-audit{
  margin-top:1.6rem; padding:1.15rem 1.25rem;
  border:1px solid var(--line); border-radius:12px;
  background:color-mix(in oklab, var(--surface) 82%, transparent);
}
.local-audit h3{
  margin:0 0 .5rem; font-family:'Chakra Petch',system-ui,sans-serif;
  font-size:1.02rem; letter-spacing:.01em; color:var(--text);
}
.local-audit .tool-note{ margin:.55rem 0 0; }
.local-audit .la-steps{
  margin:.85rem 0 0; padding-left:1.25rem;
  display:flex; flex-direction:column; gap:.5rem;
  color:var(--text-dim); font-size:.9rem; line-height:1.5;
}
.local-audit .la-steps li::marker{ color:var(--brand); font-weight:600; }
.local-audit .la-steps b{ color:var(--text); font-weight:600; }
.local-audit kbd{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.78em;
  padding:.1em .4em; border-radius:5px; white-space:nowrap;
  border:1px solid var(--line); background:var(--bg);
  color:var(--text); box-shadow:0 1px 0 var(--line);
}
@media (max-width:520px){ .local-audit{ padding:.95rem 1rem; } }


/* ---- pavement change detector (B114) ---------------------------------- */
.pc-warn{ border-left:3px solid var(--brand); padding-left:.85rem; }
.pc-stage{
  display:grid; gap:.9rem; margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.pc-fig{ margin:0; display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.pc-fig figcaption{
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); font-family:'IBM Plex Mono',ui-monospace,monospace;
}
.pc-fig canvas{
  width:100%; height:auto; display:block; border-radius:9px;
  border:1px solid var(--line); background:var(--bg);
  aspect-ratio:4/3; object-fit:contain;
}
.pc-fig-diff canvas{ border-color:color-mix(in oklab, var(--brand) 55%, var(--line)); }
@media (max-width:560px){ .pc-stage{ grid-template-columns:1fr; } }


/* ---- pavement map layer switch (B115) --------------------------------- */
.pv-layer-switch{ display:flex; gap:.35rem; margin:0 0 .6rem; }
.pv-layer-switch button{
  font:inherit; font-size:.74rem; line-height:1; cursor:pointer;
  padding:.45rem .8rem; border-radius:7px;
  color:var(--text-dim); background:transparent; border:1px solid var(--line);
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.pv-layer-switch button:hover{ color:var(--text); border-color:var(--brand); }
.pv-layer-switch button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.pv-layer-switch button.on{
  color:var(--text); border-color:var(--brand);
  background:color-mix(in oklab, var(--brand) 16%, transparent);
}
.pv-aerial-note{ opacity:.82; }


/* ---- bid feed: not-connected state (B116) ------------------------------ */
.bid-state{
  display:flex; align-items:center; gap:.5rem; margin:0 0 .4rem;
  font-size:.82rem; color:var(--text);
}
.bid-state .bid-dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 8px;
  background:var(--text-faint);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--text-faint) 22%, transparent);
}
#bidBox .btn-sm{ margin-top:.6rem; }


/* ---- bidding eligibility notice (B116) --------------------------------- */
.bid-elig{
  margin-top:.45rem; padding-left:.7rem;
  border-left:2px solid color-mix(in oklab, var(--brand) 45%, var(--line));
  opacity:.9;
}


/* ---- map unavailable notice (B116) ------------------------------------- */
.pv-map-msg{
  margin:0 0 .6rem; padding:.6rem .8rem; font-size:.82rem;
  color:var(--text-dim); background:color-mix(in oklab, var(--surface) 78%, transparent);
  border:1px solid var(--line); border-radius:8px;
}


/* ---- state work orders (B117) ------------------------------------------ */
.wo-filters{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:flex-end;
  margin:.9rem 0 .8rem; padding:.85rem; border:1px solid var(--line);
  border-radius:10px; background:color-mix(in oklab, var(--surface) 70%, transparent);
}
.wo-filters label{
  display:flex; flex-direction:column; gap:.28rem; min-width:150px; flex:1 1 150px;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
}
.wo-filters select, .wo-filters input{
  font:inherit; font-size:.84rem; padding:.44rem .55rem; border-radius:7px;
  color:var(--text); background:var(--bg); border:1px solid var(--line);
}
.wo-filters select:focus-visible, .wo-filters input:focus-visible{
  outline:2px solid var(--brand); outline-offset:1px;
}
.wo-count{ font-size:.72rem; color:var(--text-faint); margin:.2rem 0 .7rem; }
.wo-list{ display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.wo-card{
  border:1px solid var(--line); border-radius:11px; padding:.95rem 1.05rem;
  background:color-mix(in oklab, var(--surface) 82%, transparent);
}
.wo-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.4rem; }
.wo-id{ font-size:.72rem; color:var(--text-faint); }
.wo-pill{ font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.18rem .5rem; border-radius:20px; font-weight:600; }
.wo-demo{
  font-size:.6rem; letter-spacing:.08em; padding:.16rem .45rem; border-radius:4px;
  color:var(--text-faint); border:1px dashed var(--line); margin-left:auto;
}
.wo-title{ margin:.1rem 0 .2rem; font-size:.98rem; color:var(--text); font-weight:600; }
.wo-place{ margin:0 0 .6rem; font-size:.8rem; color:var(--text-dim); }
.wo-grid{
  display:grid; grid-template-columns:auto 1fr; gap:.26rem .8rem;
  margin:0 0 .6rem; font-size:.8rem;
}
.wo-grid dt{ color:var(--text-faint); font-size:.72rem; }
.wo-grid dd{ margin:0; color:var(--text); }
.wo-none{ color:var(--text-faint); font-style:italic; }
.wo-block{ margin:.55rem 0 0; font-size:.8rem; color:var(--text-dim); }
.wo-block b{ display:block; color:var(--text); font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:.22rem; }
.wo-block ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.22rem; }
.wo-block p{ margin:0; }
.wo-foot{ margin-top:.7rem; padding-top:.55rem; border-top:1px solid var(--line);
  font-size:.68rem; color:var(--text-faint); }
@media (max-width:520px){ .wo-list{ grid-template-columns:1fr; } }


/* ---- work-order map tracking (B118) ------------------------------------ */
.wo-locatable{ cursor:pointer; transition:border-color .18s ease, transform .18s ease; }
.wo-locatable:hover{ border-color:color-mix(in oklab, var(--brand) 55%, var(--line)); }
.wo-locatable:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.wo-card.is-active{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}
.wo-filters .btn.on{
  color:var(--text); border-color:var(--brand);
  background:color-mix(in oklab, var(--brand) 16%, transparent);
}
#woMapNote{ font-size:.68rem; color:var(--text-faint); margin:.2rem 0 0; }
.wo-popup-link{ display:inline-block; margin-top:.3rem; font-size:.78rem; }
@media (prefers-reduced-motion: reduce){
  .wo-locatable{ transition:none; }
}


/* ---- Project Help Desk (B119) ------------------------------------------ */
.dock-chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.15rem 0 .5rem; }
.hd-chip{
  font:inherit; font-size:.74rem; line-height:1.2; cursor:pointer;
  padding:.42rem .68rem; border-radius:16px; text-align:left;
  color:var(--text-dim); background:transparent; border:1px solid var(--line);
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.hd-chip:hover{ color:var(--text); border-color:var(--brand); }
.hd-chip:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.hd-chip.hd-nav{ color:var(--text-faint); font-size:.7rem; }
.hd-chip.hd-go{
  color:var(--text); border-color:var(--brand);
  background:color-mix(in oklab, var(--brand) 15%, transparent);
}
.hd-link{ color:var(--brand); font-weight:600; text-decoration:none; }
.hd-link:hover{ text-decoration:underline; }
.hd-form{
  display:flex; flex-direction:column; gap:.55rem;
  margin:.6rem 0; padding:.85rem; border-radius:10px;
  border:1px solid var(--line); background:color-mix(in oklab, var(--surface) 80%, transparent);
}
.hd-form label{
  display:flex; flex-direction:column; gap:.25rem;
  font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);
}
.hd-form input, .hd-form textarea{
  font:inherit; font-size:.85rem; padding:.46rem .55rem; border-radius:7px;
  color:var(--text); background:var(--bg); border:1px solid var(--line);
  width:100%; box-sizing:border-box; resize:vertical;
}
.hd-form input:focus-visible, .hd-form textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:1px;
}
.hd-opt{ text-transform:none; letter-spacing:0; opacity:.7; }
.hd-note{ font-size:.7rem; color:var(--text-faint); margin:.1rem 0 0; line-height:1.45; }
@media (max-width:480px){
  .hd-chip{ font-size:.72rem; padding:.4rem .6rem; }
  .hd-form{ padding:.7rem; }
}


/* ---- Global Services Help Desk intake (B120) --------------------------- */
.hd-row{ display:flex; gap:.55rem; flex-wrap:wrap; }
.hd-row > label{ flex:1 1 46%; min-width:0; }
.hd-form select{
  font:inherit; font-size:.85rem; padding:.46rem .55rem; border-radius:7px;
  color:var(--text); background:var(--bg); border:1px solid var(--line);
  width:100%; box-sizing:border-box;
}
.hd-form select:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
.hd-form input[type="file"]{ padding:.4rem; font-size:.76rem; }
.hd-notice{
  display:block; font-size:.72rem; line-height:1.5; color:var(--text-faint);
  padding-left:.7rem; border-left:2px solid color-mix(in oklab, var(--brand) 45%, var(--line));
}
@media (max-width:480px){ .hd-row > label{ flex:1 1 100%; } }


/* ---- help desk rail inside the studio (B121) --------------------------- */
.ws-chips{ padding:.4rem 0 .2rem; max-height:28vh; overflow:auto; }
@media (max-width:700px){ .ws-chips{ max-height:34vh; } }


/* ---- pavement distress reference (B122) -------------------------------- */
.hd-distress{ display:flex; flex-direction:column; gap:.3rem; margin:.5rem 0; }
.ds-item{ border:1px solid var(--line); border-radius:8px;
  background:color-mix(in oklab, var(--surface) 78%, transparent); }
.ds-item summary{ cursor:pointer; padding:.5rem .65rem; display:flex;
  align-items:center; gap:.5rem; font-size:.82rem; color:var(--text); }
.ds-item summary::-webkit-details-marker{ display:none; }
.ds-name{ flex:1; }
.ds-urg{ font-size:.6rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.15rem .42rem; border-radius:10px; font-weight:600; }
.ds-high{ background:#E4574C22; color:#E4574C; }
.ds-medium{ background:#C9922B22; color:#C9922B; }
.ds-low{ background:#4F950122; color:#4F9501; }
.ds-body{ padding:0 .65rem .6rem; font-size:.78rem; color:var(--text-dim); line-height:1.5; }
.ds-body p{ margin:.45rem 0 0; }
.ds-body b{ color:var(--text); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }


/* ---- optional local assistant (B124) ----------------------------------- */
.hd-local-h{ display:block; color:var(--text); font-size:.86rem; margin-bottom:.3rem; }
.hd-local-facts{ margin:.2rem 0 .7rem; padding-left:1.1rem; display:flex;
  flex-direction:column; gap:.34rem; font-size:.78rem; color:var(--text-dim); line-height:1.45; }
.hd-local-facts b{ color:var(--text); }
.hd-local-facts li::marker{ color:var(--brand); }
.hd-local-offer .btn{ margin-top:.2rem; }


/* ---- deployment warning (B125) ----------------------------------------
   Styled here, but deliberately readable WITHOUT this file too: if style.css
   is the thing that failed, the banner still has to be legible. Hence the
   inline-ish defaults below are duplicated as an attribute-independent block
   and the element uses plain semantics. */
.dgbs-deploy-warn{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:99999;
  max-width:640px; margin:0 auto; padding:.9rem 2.4rem .9rem 1rem;
  border:2px solid #E4574C; border-radius:10px;
  background:#2A1512; color:#FFD9D4; font-size:.84rem; line-height:1.5;
}
.dgbs-deploy-warn b{ display:block; color:#FF8A7A; margin-bottom:.35rem; }
.dgbs-deploy-warn ul{ margin:0; padding-left:1.1rem; }
.dgbs-deploy-warn li{ margin:.25rem 0; }
.dgbs-deploy-warn button{
  position:absolute; top:.4rem; right:.5rem; background:none; border:0;
  color:#FFD9D4; font-size:1.3rem; line-height:1; cursor:pointer;
}


/* ---- specialist heading (B127) ----------------------------------------- */
.hd-spec-h{ color:var(--brand); font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; font-family:var(--f-mono); }


/* ---- bidding guidance list (B129) -------------------------------------- */
.pv-bid-list{ margin:.2rem 0 1rem; padding-left:1.15rem; display:flex;
  flex-direction:column; gap:.5rem; font-size:.88rem; color:var(--text-dim); line-height:1.55; }
.pv-bid-list li::marker{ color:var(--brand); }
.pv-bid-list b{ color:var(--text); }


/* ---- MapLibre on the pavement page (B135) ------------------------------
   OpenFreeMap vector tiles via MapLibre. Leaflet was dropped here because
   every keyless RASTER provider we could use is now closed to commercial
   sites; OpenFreeMap is vector-only. */
#paveMap .maplibregl-map{ border-radius:12px; }
#paveMap .maplibregl-ctrl-attrib{ font-size:.62rem; }
#paveMap .maplibregl-popup-content{
  background:var(--surface-1); color:var(--text); border:1px solid var(--line);
  border-radius:8px; font-size:.82rem; padding:.55rem .7rem;
}
#paveMap .maplibregl-popup-tip{ border-top-color:var(--surface-1); }
#paveMap .maplibregl-popup-close-button{ color:var(--text-dim); font-size:1.1rem; }
.pv-pin{ box-shadow:0 0 0 3px rgba(0,0,0,.25); }


/* ---- pavement roughness log (B136) ------------------------------------- */
.rg-live{ font-size:.72rem; color:var(--text-faint); margin:.5rem 0 .3rem; }
.rg-list{ max-height:340px; overflow:auto; border:1px solid var(--line);
  border-radius:9px; background:color-mix(in oklab, var(--surface) 78%, transparent); }
.rg-list .note{ padding:.8rem; margin:0; }
.rg-row{ display:flex; align-items:center; gap:.55rem; padding:.4rem .65rem;
  border-bottom:1px solid var(--line); font-size:.76rem; color:var(--text-dim); }
.rg-row:last-child{ border-bottom:0; }
.rg-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.rg-band{ flex:1; text-transform:capitalize; color:var(--text); }
.rg-val{ opacity:.85; }
.rg-pos{ font-size:.68rem; opacity:.65; }
@media (max-width:520px){ .rg-pos{ display:none; } }