/* =========================================================
   1) TOKENS
========================================================= */
:root {
  /* Brand */
  --primary: #5AA7A3;
  --primary-dark: #243f50;
  --success: #10b981;
  --accent: #027764;

  /* Neutrals & text */
  --bg: #ffffff;
  --bg-muted: #f9fafb;
  --surface: #ffffff;
  --muted: #f3f4f6;
  --border: #d1d5db;
  --text: #1f2937;
  --text-muted: #374151;

  /* Effects */
  --shadow-sm: 0 2px 4px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 20px rgba(0,0,0,.08);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', sans-serif;
  --lh: 1.6;

  /* Gradients */
  --grad-start: #5AA7A3;
  --grad-end: #1d3b48;

  /* RGB helpers */
  --primary-rgb: 90,167,163;
  --accent-rgb:  2,119,100;
  --success-rgb: 16,185,129;
  --text-rgb:    31,41,55;

  --primary-08: rgba(var(--primary-rgb), .08);
  --primary-16: rgba(var(--primary-rgb), .16);
  --primary-24: rgba(var(--primary-rgb), .24);
  --accent-08:  rgba(var(--accent-rgb),  .08);
  --success-08: rgba(var(--success-rgb), .08);
  --success-16: rgba(var(--success-rgb), .16);

  /* Focus ring */
  --ring-color: rgba(var(--primary-rgb), .35);
  --ring-size: 3px;
}

/* =========================================================
   2) BASE
========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  font-family: var(--font-sans);
  line-height: var(--lh);
  scroll-behavior: smooth;
  margin:0; overflow-x:hidden;
  background: radial-gradient(var(--bg), var(--bg));
  color: var(--text);
  z-index:10;
}

/* Accessible focus */
:where(a,button,input,select,textarea):focus-visible{
  outline:none;
  box-shadow:0 0 0 var(--ring-size) var(--ring-color);
}

/* Headings */
h1,h2,h3{ font-weight:700; letter-spacing:-.5px; margin:0 0 .5em; }
h1{ font-size:2.5rem; }
h2{ font-size:2rem; }
h3{ font-size:1.5rem; }
@media (min-width:768px){
  h1{ font-size:3.5rem; }
  h2{ font-size:2.5rem; }
}

/* =========================================================
   3) CANVAS / HERO
========================================================= */
#canvas-wrapper{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; overflow:hidden; }
canvas{ position:absolute; inset:0; width:100vw; height:100vh; z-index:-2; pointer-events:none; }
.canvas-overlay{ position:absolute; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; backdrop-filter:blur(2px); background-color:rgba(255,255,255,.1); transition:opacity .5s ease; }
.canvas-overlay.hidden{ opacity:0; backdrop-filter:none; background-color:transparent; }
#hero-content.fade-out{ opacity:0; transform:translateY(-40px); transition:all .3s ease; pointer-events:none; }

/* =========================================================
   4) HEADER / LOGO
========================================================= */
.logo-style{ max-height:2.5rem; width:auto; filter:drop-shadow(0 0 2px rgba(0,0,0,.5)); transition:transform .2s ease; }
.logo-style:hover{ transform:scale(1.05); }

/* =========================================================
   5) UTILITIES
========================================================= */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding:1.25rem;
}
.card-hover{ transition:transform .3s, box-shadow .3s; }
.card-hover:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }

.text-muted{ color:var(--text-muted); }
.text-primary{ color:var(--primary); }
.border-primary{ border-color:var(--primary) !important; }
.bg-primary-soft{ background:var(--primary-08); }

.link{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.link:hover{ color:var(--primary-dark); }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Micro-interactions */
.fade-in{ animation:fade-in .28s ease-out both; }
@keyframes fade-in{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* Lightweight skeleton + shimmer */
.skeleton{ position:relative; overflow:hidden; background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.08)); border-radius:.5rem; }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:shimmer 1.2s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* =========================================================
   6) BUTTONS
========================================================= */
.btn-primary{
  background:var(--primary); color:#fff; padding:.75rem 1.5rem;
  border-radius:var(--radius-sm); font-weight:600; border:0; cursor:pointer;
  transition:background-color .3s, box-shadow .3s, transform .2s;
}
.btn-primary:hover{ background:var(--primary-dark); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-primary:active{ transform:translateY(0); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.btn-outline{
  background:transparent; color:var(--primary); border:1px solid var(--primary);
  padding:.65rem 1.25rem; border-radius:var(--radius-sm); font-weight:600; cursor:pointer;
  transition:background-color .2s, box-shadow .2s, transform .2s;
}
.btn-outline:hover{ background:var(--primary-08); transform:translateY(-1px); box-shadow:var(--shadow-sm); }

.btn-ghost{
  background:var(--primary-08); color:var(--primary-dark); border:1px solid transparent;
  padding:.65rem 1.25rem; border-radius:var(--radius-sm); font-weight:600; cursor:pointer;
  transition:background-color .2s, box-shadow .2s, transform .2s;
}
.btn-ghost:hover{ background:var(--primary-16); transform:translateY(-1px); box-shadow:var(--shadow-sm); }

/* Fancy gradient (optional flavor) */
.animated-gradient{
  background-image:linear-gradient(to right, var(--grad-start), var(--grad-end));
  background-size:300% 100%; background-position:0% 50%;
  transition:background-position .5s ease-out, box-shadow .3s; border:0;
}
.animated-gradient:hover{ animation:swirl-gradient 4s ease-in-out infinite; box-shadow:0 0 10px var(--primary-16); }
.animated-gradient:not(:hover){ animation-play-state:paused!important; }
@keyframes swirl-gradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* =========================================================
   7) SECTIONS / TABS
========================================================= */
#services{ position:relative; overflow:hidden; }

/* rounded chips/tabs */
.service-tab-btn,.portfolio-tab-btn{
  padding:.5rem 1.25rem; border-radius:var(--radius-full);
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); font-weight:600; box-shadow:var(--shadow-sm);
  transition:all .2s; cursor:pointer;
}
.service-tab-btn:hover,.portfolio-tab-btn:hover{ background:var(--muted); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.service-tab-btn.active{ background:var(--primary); color:#fff; border-color:transparent; box-shadow:0 6px 12px rgba(16,185,129,.4); }
.portfolio-tab-btn.active{ background:var(--success); color:#fff; border-color:transparent; box-shadow:0 6px 12px rgba(16,185,129,.4); }

/* dark “tab list” buttons */
.tab-btn{
  background:#1f2937; color:#e5e7eb; padding:.5rem 1rem; border-radius:var(--radius-sm);
  text-align:left; transition:all .2s; font-weight:500; border:1px solid transparent;
}
.tab-btn:hover{ background:#374151; }
.tab-btn.active{ border-color:var(--primary); background:#111827; color:var(--primary); }

/* =========================================================
   8) PORTFOLIO CARD / BADGE / QUOTES / LEAD MAGNET
========================================================= */
.portfolio-card{ border-left:6px solid var(--primary-dark); padding-left:1rem; border-radius:var(--radius-md); background:var(--surface); }

.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; border-radius:var(--radius-full);
  font-weight:600; font-size:.8rem; border:1px solid transparent;
}
.badge--primary{ background:var(--primary-16); color:var(--primary-dark); }

blockquote{ quotes:"“" "”"; position:relative; margin:0; }
blockquote::before,blockquote::after{ font-size:2rem; color:var(--primary); position:absolute; }
blockquote::before{ content:open-quote; left:-1rem; top:-.5rem; }
blockquote::after{ content:close-quote; right:-1rem; bottom:-.5rem; }

/* Lead magnet */
#lead-magnet{ margin-top:2rem; }
.lead-magnet{ background:var(--surface); padding:20px; border-radius:8px; box-shadow:var(--shadow-sm); }
.lead-magnet input{ padding:10px; margin-bottom:10px; width:100%; border:1px solid var(--border); }
.lead-magnet button{ padding:10px; background:var(--primary); color:#fff; border:0; cursor:pointer; width:100%; }
.lead-magnet .email-form{ display:flex; flex-direction:column; align-items:center; }
.lead-magnet .email-form input{ margin-bottom:10px; width:80%; }
.lead-magnet .email-form button{ background:var(--success); width:100%; }

/* =========================================================
   9) HOMEPAGE SHARED: chips / loader / progress / brand bg
========================================================= */
.chip-list{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip-input{ display:none; }
.chip{
  display:inline-block; padding:.5rem .75rem; border-radius:9999px;
  background:var(--primary-08); border:1px solid var(--border); color:var(--text);
  cursor:pointer; font-size:.95em;
  transition:transform .12s, box-shadow .12s, background .12s, color .12s, border-color .12s;
}
.chip:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.chip-input:checked + .chip{ background:var(--primary); color:#fff; border-color:transparent; }

.loader{ width:1.5rem; height:1.5rem; border:4px solid var(--muted); border-top-color:var(--primary); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.progress{ background:var(--muted); border-radius:.5rem; height:.75rem; width:100%; }
.progress__bar{ background:var(--primary); height:100%; border-radius:.5rem; transition:width .2s ease; }

.bg-brand-translucent{ background-color: color-mix(in oklab, var(--grad-end), transparent 35%); }
.brand-card{ background-image:linear-gradient(to top right, var(--grad-end), var(--primary-dark)); }

/* =========================================================
   10) AI PROJECT EXPLORER (scoped)
========================================================= */
#ai-project-explorer{
  color:var(--text);
  position:relative;
  isolation:isolate; /* ensure pseudo overlay sits behind content */
  overflow:hidden;
  /* full‑bleed background image (static) */
  background-image:url('/Images/Triality_Labs/pcb.jpg');
  background-size:cover; background-repeat:no-repeat; background-position:center center;
  /* full-screen hero + centered content */
  min-height:100svh;
  display:grid; place-items:center;
  padding-block:clamp(2rem, 3vh, 4rem);
  font-family: 'Manrope', var(--font-sans);
}
#ai-project-explorer::after{
  /* teal mast overlay over the image */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:0;
  background: linear-gradient(180deg, rgba(var(--primary-rgb), .6), rgba(36,63,80,.75));
}
#ai-project-explorer > *{ position:relative; z-index:1; }

/* remove parallax-specific hints */

/* Split layout and typography */
#ai-project-explorer .cta-split{
  display:grid; gap:clamp(1.25rem, 4vw, 3rem);
  grid-template-columns: 1.25fr .75fr;
  align-items:center;
}
@media (max-width: 1024px){
  #ai-project-explorer .cta-split{ grid-template-columns:1fr; text-align:center; }
}

#ai-project-explorer .cta-left{ color:#ffffff; }
#ai-project-explorer .cta-h1{
  font-weight:900; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(2.2rem, 5.2vw, 4.2rem);
  margin:0 0 .6rem 0;
}
#ai-project-explorer .cta-sub{
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  color:rgba(255,255,255,.92);
  max-width:48rem;
}
#ai-project-explorer .cta-actions{ margin-top:1.2rem; }
#ai-project-explorer .cta-cta{ border-radius:999px; padding:.95rem 1.5rem; font-size:1.05rem; }

/* Bubbles (right column) */
#ai-project-explorer .cta-right{ display:flex; justify-content:center; }
#ai-project-explorer .cta-bubbles{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem;
}
#ai-project-explorer .cta-bubbles li{
  display:flex; align-items:center; gap:.75rem;
  color:#eaf6f7; font-weight:900; letter-spacing:.02em;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.5);
  padding: clamp(.9rem, 1.5vw, 1.15rem) clamp(1.2rem, 2.2vw, 1.6rem);
  border-radius:999px; backdrop-filter:blur(8px) saturate(160%);
  box-shadow:0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.4);
}
#ai-project-explorer .cta-bubbles li::before{
  content:""; width:.9rem; height:.9rem; border-radius:999px; flex:none;
  background:var(--primary); box-shadow:0 0 0 5px rgba(var(--primary-rgb), .28);
}
@media (max-width: 1024px){
  #ai-project-explorer .cta-right{ justify-content:center; }
  #ai-project-explorer .cta-bubbles{ align-items:center; }
}

/* Glass panel behind main text */
#ai-project-explorer .cta-left{
  position:relative;
  display:inline-block;
  padding:clamp(1rem, 2vw, 1.75rem) clamp(1.2rem, 2.6vw, 2rem);
  border-radius:18px;
  background: rgba(13,27,38,.35);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 20px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
#ai-project-explorer .cta-left::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
@media (max-width: 1024px){
  #ai-project-explorer .cta-left{ display:block; width:min(100%, 820px); margin-inline:auto; text-align:center; }
}
#ai-project-explorer .input{ background:var(--muted); }
#ai-project-explorer .status{ font-size:.875rem; color:var(--primary); }
#ai-project-explorer h2,#ai-project-explorer p{ text-align:center; }
.status--ok{ color:var(--success); }
.status--error{ color:#ef4444; }

/* Minimal CTA card — glass with teal brand background */
#ai-project-explorer .cta-simple{
  position:relative;
  color:#f1fbfc;
  /* Neutral glass so background image shows through */
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.32);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);
  box-shadow:
    0 22px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.28);
}
#ai-project-explorer .cta-simple::before{
  /* subtle edge glow & floor vignette */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 320px at 50% 115%, rgba(0,0,0,.26), transparent 58%),
    radial-gradient(600px 240px at 20% -80px, rgba(255,255,255,.20), transparent 60%);
}
#ai-project-explorer .cta-simple::after{
  /* crisp inner rim to sell the glass */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
#ai-project-explorer .cta-simple h2{ color:#ffffff; letter-spacing:-.015em; }
#ai-project-explorer .cta-simple .text-muted{ color:rgba(255,255,255,.9); }
#ai-project-explorer .cta-simple .link{ color:#e8fcfc; }
#ai-project-explorer .cta-simple .link:hover{ color:#ffffff; }
#ai-project-explorer .cta-simple .cta-eyebrow{
  display:inline-block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(255,255,255,.96); background: rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.40);
  padding:.22rem .6rem; border-radius:999px; margin-bottom:.6rem; backdrop-filter: blur(2px);
}

/* CTA button refinement for contrast on teal glass */
#ai-project-explorer .cta-simple .btn-primary{
  color:#0e1a24;
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--primary), #ffffff 28%),
    color-mix(in oklab, var(--primary), #000 6%)
  );
  border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.5);
  border-radius: 999px;
}
#ai-project-explorer .cta-simple .btn-primary:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
}

/* CTA Glass hero — refined, Apple-like */
#ai-project-explorer .glass-hero{
  position: relative;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.35);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  box-shadow:
    0 50px 100px rgba(13,27,38,.28),
    0 10px 30px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.06);
}
@supports not (background: color-mix(in oklab, red, white)){
  #ai-project-explorer .glass-hero{ background: rgba(255,255,255,.72); color: var(--text); }
}
#ai-project-explorer .glass-hero::before{
  /* brand-tinted wash + specular highlight */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    radial-gradient(780px 300px at 65% -140px, color-mix(in oklab, var(--grad-start), #ffffff 25%), transparent 60%),
    radial-gradient(600px 340px at -10% 120%, color-mix(in oklab, var(--grad-end), transparent 70%), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 28%);
}
#ai-project-explorer .glass-hero::after{
  /* inner crisp edge for glass look */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
#ai-project-explorer .cta-glow{
  position:absolute; width:460px; height:460px; left:50%; bottom:-200px; transform:translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--grad-start), #ffffff 10%), transparent 65%);
  filter: blur(26px); pointer-events:none; z-index:0;
}

#ai-project-explorer .cta-eyebrow{
  display:inline-block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(255,255,255,.95);
  margin-bottom:.5rem; background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.85); padding:.22rem .6rem; border-radius:999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
#ai-project-explorer .cta-title{
  text-align:center; margin:.15rem 0 .35rem; font-weight:900; letter-spacing:-.02em;
  color: rgba(255,255,255,.95);
}
#ai-project-explorer .cta-sub{
  text-align:center; color: rgba(255,255,255,.85); margin:0 auto 1.1rem; max-width:46rem;
}

/* Project teaser */
#ai-project-explorer .cta-project{
  position:relative; z-index:1; margin: .25rem auto 1.1rem; max-width: 44rem;
  padding:.85rem 1rem; border-radius:14px; background: rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 18px rgba(0,0,0,.12);
}
#ai-project-explorer .cta-project__eyebrow{ text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; color: rgba(31,41,55,.75); }
#ai-project-explorer .cta-project__title{ font-weight:900; margin:.1rem 0 .05rem; color: #0f2330; letter-spacing:-.01em; }
#ai-project-explorer .cta-project__desc{ color: #294455; }

/* Actions */
#ai-project-explorer .cta-actions{ display:flex; align-items:center; justify-content:center; gap:.75rem; position:relative; z-index:1; }
#ai-project-explorer .cta-button{
  font-size:1.05rem; padding:.9rem 1.35rem; border-radius:999px;
  background-image: linear-gradient(180deg, color-mix(in oklab, var(--grad-start), #ffffff 10%), color-mix(in oklab, var(--grad-end), #0b1420 5%));
  box-shadow: 0 8px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
#ai-project-explorer .cta-button:hover{ box-shadow: 0 12px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45); }

#ai-project-explorer .cta-secondary{
  display:block; text-align:center; margin-top:.9rem; color: rgba(255,255,255,.92);
  text-decoration:underline; text-underline-offset:3px; opacity:.9;
}
#ai-project-explorer .cta-secondary:hover{ opacity:1; text-decoration-thickness:2px; }

/* Clamp helpers */
.clamp-6,.clamp-8{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-6{ -webkit-line-clamp:6; line-clamp:6; }
.clamp-8{ -webkit-line-clamp:8; line-clamp:8; }
.is-expanded{ display:block; overflow:visible; }

/* Results Dark Mode — compact, with subtle gradient + vignette */
/* Results container with a subtle vertical gradient */
.results-dark{
  position: relative;
  overflow: hidden;
  /* keep existing spacing/shape */
  color:#fff;
  line-height:1.5;
  padding:.55rem .6rem; /* much tighter */
  border-radius:var(--radius-md);
  box-shadow: 0 10px 30px rgba(8,22,29,.25), inset 0 1px 0 rgba(255,255,255,.05);

  /* gentle gradient using your brand dark */
  --res-grad-top: color-mix(in oklab, var(--primary-dark), #000 13%);
  --res-grad-bot: color-mix(in oklab, var(--primary-dark), #fff 1%);
  background: linear-gradient(180deg, var(--res-grad-top) 0%, var(--res-grad-bot) 100%);

  /* light edge to separate from the page */
  border: 1px solid rgba(255,255,255,.06);
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in oklab, red, white)) {
  .results-dark{
    background: linear-gradient(180deg, #203746 0%, #243f50 100%);
  }
}

/* keep internal cards transparent so the gradient shows through */
.results-dark > .card{
  padding:0 !important;
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.results-dark::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(1200px 500px at 50% -200px, rgba(255,255,255,.07), transparent 60%),
              radial-gradient(800px 600px at 110% 110%, rgba(0,0,0,.22), transparent 55%),
              radial-gradient(800px 600px at -10% 110%, rgba(0,0,0,.22), transparent 55%);
  pointer-events:none; border-radius:inherit;
}
.results-dark .card{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.14); color:#fff; }
.results-dark h2,.results-dark h3,.results-dark h4,.results-dark h5{ color:var(--primary); }
.results-dark .text-muted{ color:rgba(255,255,255,.8); }
.results-dark .btn-outline{ color:#fff; border-color:rgba(255,255,255,.35); }
.results-dark .btn-outline:hover{ background:rgba(255,255,255,.08); }
.results-dark .btn-primary{ background:var(--primary); color:#fff; }

/* Inputs/textarea legibility inside results */
.results-dark input,
.results-dark textarea,
.results-dark select,
.results-dark .input{
  background: rgba(255,255,255,.08) !important;
  color: #e6f1f3 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.results-dark textarea::placeholder,
.results-dark input::placeholder{
  color: rgba(255,255,255,.72);
}
.results-dark input:focus,
.results-dark textarea:focus{
  box-shadow: 0 0 0 var(--ring-size) rgba(var(--primary-rgb), .35);
  border-color: var(--primary);
}

/* Project selector chips */
.chip-list--center{ justify-content:center; }
.chip--wide{ max-width:22rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Unselected vs selected in dark */
.results-dark .chip{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.results-dark .chip:hover{ background:rgba(255,255,255,.06); }
.results-dark .chip-input:checked + .chip{ background:var(--primary); color:#0e1a24; border-color:transparent; }

/* Project card layout (no big gaps) */
#project-view{
  display:grid; grid-auto-flow:row; align-content:start;
  row-gap:.2rem; padding:.8rem; min-height:0; /* tighter */
}
#project-view > *{ margin:0; }
#project-view .proj-header{ display:grid; row-gap:.2rem; margin:0; text-align:center; }
#project-view .group{ margin:0; }
#project-view .group + .group{ margin-top:.3rem; }
#project-view .toggle-more{ margin-top:.2rem; display:inline-block; }

/* Type scale + compact card */
.card.compact{ padding:.8rem; }
.proj-header{ text-align:center; margin-bottom:.2rem; }
.eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; opacity:.85; margin-bottom:.2rem; }
.project-title{ font-size:1.25rem; font-weight:800; margin:0; line-height:1.2; }
.offer-badge{ margin-top:.25rem; font-size:1.0rem; }
.group{ margin-top:.55rem; }
.group h5{ margin:0 0 .2rem; font-weight:700; font-size:.92rem; color:var(--primary); }
#project-view p{ margin:.25rem 0; }

/* Sticky chips row (subtle frosted background while scrolling) */
#projects-nav{
  position:sticky; top:.5rem; z-index:10;
  padding-bottom:.25rem; overflow-x:auto;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(36,63,80,.35);
  border-radius:9999px;
}

/* Controls + refine width */
#projects-shell .chip-list{ justify-content:center; gap:.35rem; margin-bottom:.35rem; }
#projects-shell .chip{ padding:.4rem .7rem; font-weight:600; border-radius:9999px; }

#refine-wrap{ max-width:60rem; margin-inline:auto; margin-top:.75rem; }
#refine-wrap label{ color:#e5eef5; font-weight:600; margin-bottom:.35rem; display:block; }
#refine-prompt.input{ width:100%; resize:vertical; min-height:84px; }
#refine-wrap .btn-primary{ background:var(--primary); }
#refine-wrap .btn-outline{ border-color:rgba(255,255,255,.35); color:#fff; }
#refine-wrap .btn-outline:hover{ background:rgba(255,255,255,.08); }

/* Trim old wrapper padding if present */
.results-dark > .card{ padding:0 !important; margin:0; background:transparent; border:0; box-shadow:none; }
.results-dark h4{ margin:0 0 .6rem; }
.results-dark .card.mb-6{ margin-bottom:.75rem; }
.results-dark #projects-shell{ margin-top:.2rem; margin-bottom:.4rem; }

/* Responsive tightening */
@media (max-width:640px){
  .results-dark{ padding:.75rem .6rem; }
  #project-view{ padding:.6rem; row-gap:.4rem; }
  .project-title{ font-size:1.2rem; }
}

/* --- Loading card + scraped links --------------------------------------- */
#loading{
  max-width: 60rem;
  margin: 1.25rem auto 0;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
#loading .status-row{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  color: var(--primary); font-weight: 600;
}
#loading .progress{ height: .5rem; margin-top: .5rem; }

/* collapsible “Links explored” */
.scrape-wrap{ margin-top:.6rem; }
.scrape-wrap summary{
  cursor:pointer; user-select:none; list-style:none;
  color: var(--text-muted); font-weight:600;
}
.scrape-wrap summary::-webkit-details-marker{ display:none; }

.scrape-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:.5rem;
  margin-top:.5rem;
}
.scrape-pill{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem;
  border:1px solid var(--border);
  border-radius:9999px;
  background: var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:.9rem; color: var(--text);
}
.scrape-pill:hover{ background: var(--primary-08); border-color: var(--primary); }
.scrape-favicon{ width:16px; height:16px; border-radius:3px; background: rgba(0,0,0,.12); }

/* clean spacing between the form card and results card */
.section-gap{ margin-top: 2rem; }
@media (min-width: 1024px){ .section-gap{ margin-top: 2.5rem; } }

/* Subhead injected from **Heading** in rich text */
.subhead{
  display:block;
  font-weight:800;
  color: var(--primary);
  margin: .5rem 0 .25rem;
  letter-spacing: .01em;
}

/* Results title chip */
.results-dark .results-title{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  color:#e7f2f4;
  padding:.25rem .55rem;
  border-radius:9999px;
  font-size:.9rem;
  letter-spacing:.02em;
  margin-bottom:.35rem;
}
.results-dark .results-title::before{
  content:""; width:.5rem; height:.5rem; border-radius:9999px;
  background: var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb), .25);
}

/* Compress the outer results container padding (card wrapper) */
.results-pro > .card{ padding:.4rem !important; }
.results-pro > .card > .results-title{ margin-bottom:.25rem !important; }
.results-pro #resultsBody{ font-size:.95rem; }

/* Subtle divider */
.results-dark .res-divider{
  height:1px; width:100%; margin:.6rem 0 .4rem;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

/* =========================================================
   11) RESULTS PRO (namespaced 'rs-*') — strong visual + compact
========================================================= */
.results-pro{
  --rs-bg-1: #0b1420;
  --rs-bg-2: #0d1e28;
  --rs-bg-3: #0a2b33;
  --rs-accent: #7fd6cf; /* brighter than primary for contrast */
  --rs-text: #d7eef0;
  --rs-muted: #a9c6cb;
}
.results-pro{
  background: linear-gradient(135deg, var(--rs-bg-1) 0%, var(--rs-bg-2) 45%, var(--rs-bg-3) 100%);
}
.results-pro::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(900px 420px at 35% -120px, rgba(127,214,207,.08), transparent 58%),
              repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px),
              repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px);
}

/* Summary */
.results-pro .rs-summary{ padding: .1rem .6rem; margin: .1rem auto .28rem; max-width: 60rem; background: rgba(255,255,255,.04); border:1px solid rgba(127,214,207,.2); border-radius: 10px; }
.results-pro .rs-summary-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.results-pro .rs-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.18rem .5rem; border-radius:99px; border:1px solid rgba(127,214,207,.35); background:rgba(127,214,207,.08); font-weight:800; font-size:1.1rem; color:var(--rs-accent); text-transform:uppercase; letter-spacing:.05em; }
.results-pro .rs-summary-body{ color:var(--rs-text); font-size:.9rem; line-height:1.45; }
.results-pro .rs-summary-body br{ line-height: 0; }

/* Projects */
.results-pro .rs-projects{ max-width: 60rem; margin: .1rem ; }
.results-pro .rs-nav{ margin: .02rem 0 .1rem; }
.results-pro .rs-card{ background: rgba(255,255,255,.035); border:1px solid rgba(127,214,207,.25); border-radius: 10px; padding: .38rem .45rem; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.results-pro .rs-card-header{ text-align:center; margin-bottom:.02rem; }
.results-pro .rs-eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:.99rem; opacity:.9; color: var(--rs-muted); margin:0; }
.results-pro .rs-card-title{ font-size:3rem; font-weight:900; margin:0; color:var(--rs-text); }
.results-pro .rs-tags{ margin-top:.04rem; display:flex; gap:.25rem; justify-content:center; flex-wrap:wrap; }
.results-pro .offer-badge{ background: rgba(127,214,207,.12); color: #ffffff; border: 1px solid rgba(127,214,207,.45); }

.results-pro .rs-card-body{ display:grid; grid-template-columns:1fr; gap:.6rem; }
.results-pro .rs-card-body h5{ margin:0 0 .06rem; font-size:.82rem; font-weight:900; color: var(--rs-accent); letter-spacing:.01em; }
.results-pro .rs-col{ min-width:0; color: var(--rs-text); font-size:.92rem; }
.results-pro .rs-col p{ margin:1.1rem 0; }
.results-pro .clamp-8{ -webkit-line-clamp:5; line-clamp:5; }
.results-pro .clamp-6{ -webkit-line-clamp:3; line-clamp:3; }
.results-pro .toggle-more{ margin-top:.02rem; }

@media (min-width: 900px){
  .results-pro .rs-card-body{ grid-template-columns:1fr 1fr; gap:1rem; }
}

/* Long text blocks */
.results-pro .rs-longtext{ white-space:pre-wrap; word-break:break-word; }

.results-pro .rs-controls{ display:flex; align-items:center; justify-content:space-between; gap:.45rem; margin-top:.25rem; }
.results-pro .rs-count{ color:var(--rs-muted); }

.results-pro .rs-cta{ margin-top:.25rem; text-align:center; }
.results-pro .rs-cta .btn-primary{ border-radius: 9999px; }

/* Refine */
.results-pro .rs-refine{ max-width:60rem; margin: .4rem auto 0; padding: .45rem .6rem; border:1px dashed rgba(127,214,207,.32); border-radius: 10px; background: rgba(255,255,255,.035); }
.results-pro .rs-refine-head{ font-weight:900; font-size:.88rem; color:var(--rs-text); margin-bottom:.18rem; letter-spacing:.01em; }
.results-pro .rs-refine-actions{ display:flex; gap:.4rem; margin-top:.3rem; }
.results-pro .rs-refine-status{ margin-top:.2rem; color: var(--rs-muted); }
.results-pro #pregen-editor .input{ width:100%; min-height:110px; resize:vertical; }

/* Liquid glass highlight for Biggest pain point */
.results-pro .pain-glass{
  position: relative;
  padding: .99rem .75rem;
  /* Add a small, consistent gap before and after */
  margin:1.9rem .75rem 0 .35rem;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at -20% -40%, rgba(255,255,255,.09), transparent 60%),
    linear-gradient(180deg, rgba(127,214,207,.12), rgba(127,214,207,.05));
  border: 1px solid rgba(127,214,207,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.24);
  backdrop-filter: blur(6px) saturate(140%);
}
.results-pro .pain-glass .subhead{
  color: var(--rs-accent);
  margin-top: 0;
}

/* In-results generation loader */
.results-pro .rs-gen{
  max-width:60rem; margin:.15rem auto .25rem; padding:.45rem .6rem;
  background: rgba(255,255,255,.035);
  border:1px solid rgba(127,214,207,.25);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  text-align: center;
}
.results-pro .rs-gen.rs-gen--tight{ margin:.1rem auto .2rem; padding:.4rem .55rem; }
.results-pro .rs-gen-title{ color: var(--rs-accent); font-weight: 900; letter-spacing:.01em; }
.results-pro .progress--rs{ height:.35rem; margin-top:.45rem; background: rgba(255,255,255,.08); border-radius:9999px; overflow:hidden; }
.results-pro .progress--rs .progress__bar{ height:.35rem; width:0; background: var(--primary); border-radius:9999px; transition: width .3s ease; }

/* Inline progress next to Results title */
.results-dark .rs-inline{ display:inline-flex; align-items:center; gap:.4rem; margin-left:.5rem; vertical-align:middle; }
.results-dark .rs-inline-title{ color: var(--rs-accent); font-weight:800; font-size:.85rem; }
.results-dark .rs-inline-timer{ color: var(--rs-muted); font-size:.8rem; }
.results-dark .rs-inline-bar{ width:140px; height:6px; background: rgba(255,255,255,.12); border-radius:9999px; overflow:hidden; display:inline-block; }
.results-dark .rs-inline-bar > #results-inline-bar{ display:block; width:0; height:6px; background: var(--primary); border-radius:9999px; transition: width .2s ease; }
.results-dark .rs-inline-bar > #job-bar{ display:block; width:0; height:6px; background: var(--primary); border-radius:9999px; transition: width .2s ease; }
.results-dark .rs-inline-pages{ color: var(--rs-muted); font-size:.8rem; margin-left:.35rem; }
.results-dark #job-panel .rs-inline-bar > #job-bar{ display:block; width:0; height:6px; background: var(--primary); border-radius:9999px; transition: width .2s ease; }

/* Dark-styled job panel (pre-results) */
.results-dark.results-pro.job-panel,
.results-dark #job-panel{ max-width:60rem; margin:.25rem auto .35rem; padding:.5rem .6rem; border-radius:12px; }
.results-dark #job-panel .job-head{ display:flex; align-items:center; gap:.5rem; }
.results-dark #job-panel .rs-inline-bar{ width:180px; height:6px; }
.results-dark #job-links{ margin:.35rem 0; }
.results-dark .scrape-wrap summary{ color: var(--rs-muted); }
.results-dark .scrape-list{ gap:.4rem; }
.results-dark .scrape-pill{
  background: rgba(255,255,255,.06);
  border-color: rgba(127,214,207,.25);
  color: var(--rs-text);
}
.results-dark .scrape-pill:hover{ background: rgba(127,214,207,.18); border-color: var(--rs-accent); }
/* Inputs within refine */
.results-pro #refine-prompt.input{ min-height:60px; }

/* Hard overrides for padding/margins within results */
.results-pro #project-view{ padding:.25rem !important; row-gap:.2rem !important; }
.results-pro #refine-wrap{ margin-top:.15rem !important; padding-top:0 !important; }
.results-pro .rs-card-header{ margin-bottom:0 !important; padding-bottom:0 !important; }
.results-pro .rs-tags{ margin-top:0 !important; }
.results-pro .rs-summary{ padding:.45rem .5rem !important; margin:.08rem auto .2rem !important; }
.results-pro .rs-projects{ margin:.2rem auto !important; }
.results-pro .rs-nav{ margin:.02rem 0 .06rem !important; }
.results-pro .rs-card{ padding:.34rem .4rem !important; }
.results-pro .rs-refine{ margin:.3rem auto 0 !important; padding:.4rem .5rem !important; }

/* Strip sticky nav styling in results to remove big pill bar */
.results-pro #projects-nav{ display:none !important; }
.results-pro #projects-nav::-webkit-scrollbar{ height:6px; }
.results-pro #projects-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:9999px; }
.results-pro #projects-nav .chip{ padding:.25rem .5rem; font-size:.88rem; }

/* Busy state + animated border (snake glow) */
.results-pro .rs-busy{ pointer-events: none; cursor: progress; }
/* Border-only pulse glow (no interior sweep) */
.results-pro .rs-card.rs-loading{
  position:relative;
  border-color: rgba(127,214,207,.85) !important;
  animation: rs-border-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(127,214,207,.50) inset, 0 0 42px 14px rgba(127,214,207,.34) !important;
}
.results-pro .rs-card.rs-loading::before,
.results-pro .rs-card.rs-loading::after{ content:none !important; animation:none !important; }
@keyframes rs-border-pulse {
  0%   {
    border-color: rgba(127,214,207,.85);
    box-shadow: 0 0 0 2px rgba(127,214,207,.45) inset, 0 0 18px 6px rgba(127,214,207,.20);
  }
  50%  {
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 0 0 6px rgba(255,255,255,.95) inset, 0 0 70px 26px rgba(255,255,255,.65);
  }
  100% {
    border-color: rgba(127,214,207,.85);
    box-shadow: 0 0 0 2px rgba(127,214,207,.45) inset, 0 0 18px 6px rgba(127,214,207,.20);
  }
}
@media (prefers-reduced-motion: reduce){ .results-pro .rs-card.rs-loading{ animation:none; } }

/* =========================================================
   12) GENERATOR HERO (Step 3)
========================================================= */
.gen-hero{
  position:relative;
  overflow:hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f1c26, #183140);
  border:1px solid rgba(127,214,207,.28);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  color:#e7f2f4;
}
/* Soft diagonal light sweep */
.gen-hero::before{
  content:""; position:absolute; inset:-30%; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 0%,
      rgba(127,214,207,.10) 40%,
      rgba(255,255,255,.35) 50%,
      rgba(127,214,207,.10) 60%,
      rgba(255,255,255,0) 100%);
  filter: blur(6px);
  transform: translateX(-120%);
  animation: gen-sweep 8s linear infinite;
}
/* Subtle twinkle grid drifting upward */
.gen-hero::after{
  content:""; position:absolute; inset:-15%; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(circle at 20% 30%, rgba(127,214,207,.18) 0 1px, transparent 2px) 0 0/ 140px 140px,
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.14) 0 1px, transparent 2px) 60px 60px/ 160px 160px;
  opacity:.25;
  animation: gen-drift 28s linear infinite;
}
@keyframes gen-sweep{ to{ transform: translateX(120%); } }
@keyframes gen-drift{ from{ transform: translateY(0); } to{ transform: translateY(-8%); } }
.gen-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:#7fd6cf; font-weight:800; opacity:.95; }
.gen-title{ font-weight:900; font-size:1.6rem; margin:.15rem 0 .35rem; letter-spacing:.01em; }
.gen-sub{ margin:0 0 .6rem; color:#cfe4e7; }
.gen-benefits{ display:flex; flex-wrap:wrap; gap:.45rem; }
.gen-badge{ display:inline-flex; align-items:center; padding:.3rem .6rem; border-radius:9999px; border:1px solid rgba(127,214,207,.45); background:rgba(127,214,207,.12); font-weight:800; font-size:.78rem; color:#e7f2f4; box-shadow: 0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06); }

.gen-pane{ position:relative; border-radius: 14px; }
.gen-pane::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(127,214,207,.25); }
.gen-cta{ font-weight:800; letter-spacing:.02em; }

.gen-refine-link{
  background: transparent; border:0; padding:.35rem .6rem; border-radius:9999px;
  color:#7fd6cf; font-weight:800; letter-spacing:.02em; cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.gen-refine-link:hover{ background: rgba(127,214,207,.12); color:#e7f2f4; transform: translateY(-1px); }

/* Dark inputs inside the hero form */
.gen-hero label{ color:#dff3f2; }
.gen-hero .input{
  background: rgba(255,255,255,.08);
  color: #e7f2f4;
  border: 1px solid rgba(255,255,255,.25);
}
.gen-hero .input::placeholder{ color: rgba(255,255,255,.78); }
.gen-hero .input:focus{ box-shadow: 0 0 0 var(--ring-size) rgba(var(--primary-rgb), .45); border-color: var(--primary); }

/* Ensure the 'Other (short)' field is always visible and usable */
#advanced-filters #keyword-list #custom-keyword{
  min-width: 220px;
  flex: 1 1 220px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .gen-hero::before,.gen-hero::after{ animation: none !important; }
}

.input.input--error{ border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.15) !important; }
.text-error{ color:#ef4444; }

/* =========================================================
   13) MOBILE & ACCESSIBILITY TUNING
========================================================= */
/* Mobile Typography Scale — variables + overrides (mobile-only)
   Keeps desktop unchanged; provides consistent hierarchy on small screens. */
@media (max-width:640px){
  :root{
    /* mobile type tokens */
    --m-leading: 1.6;
    --m-text-xs: 0.875rem;   /* ~14px */
    --m-text-sm: 0.9375rem;  /* ~15px */
    --m-text-base: 1rem;     /* 16px body */
    --m-text-lg: 1.125rem;   /* 18px */
    --m-text-xl: 1.25rem;    /* 20px */
    --m-text-2xl: 1.5rem;    /* 24px */
    --m-text-3xl: 1.75rem;   /* 28px */
    --m-text-4xl: 2rem;      /* 32px */
    --m-text-5xl: 2.25rem;   /* 36px */

    --m-h1: var(--m-text-4xl);
    --m-h2: var(--m-text-3xl);
    --m-h3: var(--m-text-2xl);
    --m-h4: var(--m-text-xl);
  }

  /* Elements */
  h1{ font-size:var(--m-h1) !important; line-height:1.25; }
  h2{ font-size:var(--m-h2) !important; line-height:1.3; }
  h3{ font-size:var(--m-h3) !important; line-height:1.3; }
  h4{ font-size:var(--m-h4) !important; line-height:1.35; }
  p, li{ font-size:var(--m-text-base); line-height:var(--m-leading); }
  small{ font-size:var(--m-text-xs); }

  /* Map Tailwind text-* utilities to mobile scale for consistency */
  .text-xs{ font-size:var(--m-text-xs) !important; }
  .text-sm{ font-size:var(--m-text-sm) !important; }
  .text-base{ font-size:var(--m-text-base) !important; }
  .text-lg{ font-size:var(--m-text-lg) !important; }
  .text-xl{ font-size:var(--m-text-xl) !important; }
  .text-2xl{ font-size:var(--m-text-2xl) !important; }
  .text-3xl{ font-size:var(--m-text-3xl) !important; }
  .text-4xl{ font-size:var(--m-text-4xl) !important; }
  .text-5xl{ font-size:var(--m-text-5xl) !important; }

  /* Harmonize relaxed body copy */
  .leading-relaxed{ line-height:var(--m-leading) !important; }
}
/* Safe-area insets for notched devices */
body{
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Respect reduced motion: stop heavy animations/visuals */
@media (prefers-reduced-motion: reduce){
  .animated-gradient{ animation: none !important; background-position: 50% 50% !important; }
  .fade-in{ animation: none !important; }
  #canvas-wrapper, #canvas-wrapper canvas{ display:none !important; }
}

/* Compact controls on small screens */
@media (max-width:640px){
  .btn-primary,.btn-outline,.btn-ghost{ padding:.7rem .9rem; font-size:.95rem; }
  .chip{ padding:.5rem .8rem; font-size:.95rem; }
  .tab-btn{ padding:.45rem .8rem; font-size:.95rem; }
  #book-fallback{ padding:.6rem 1rem !important; font-size:.95rem !important; border-radius:9999px; }
}

/* Services: make tabs scrollable; reduce padding; hide big overlay */
@media (max-width:768px){
  #service-tabs{ flex-direction: row !important; flex-wrap: wrap; overflow-x: visible; gap:.4rem .4rem; padding-bottom:.25rem; }
  #service-tabs .tab-btn{ white-space:nowrap; }
  #service-display{ padding:.75rem !important; }
  #service-display .absolute{ display:none; }
  #services h2{ font-size:1.6rem !important; }
  #service-title{ font-size:1.1rem !important; }
  #service-display p{ font-size:.95rem; }
}

/* Funnel modal: mobile full-width sheet */
@media (max-width:640px){
  #funnel-modal .card{ width:100%; max-width:none; max-height:85vh; margin:0; border-radius:0; padding:1rem; overflow-y:auto; }
  #funnel-modal h3{ font-size:1.15rem; line-height:1.3; }
  #funnel-modal p, #funnel-modal li{ font-size:.95rem; }
  #funnel-actions{ flex-direction:column; align-items:stretch; gap:.5rem; }
  #funnel-actions .btn-primary, #funnel-actions .btn-outline{ width:100%; padding:.6rem .85rem; font-size:.95rem; }
  #funnel-modal #modalCountdown{ font-size:1rem; }
  #funnel-modal .offer-label{ font-size:.7rem; }
}

/* Ensure modal sits above Calendly badge */
#funnel-modal{ z-index: 10000 !important; }

/* Cookie banner: respect safe area */
#cookie-banner{ padding-bottom: env(safe-area-inset-bottom); }

/* Keep canvas visible on small screens (was hidden before) */