/* Hallmark · macrostructure: Workbench (controls + Michael, the AI assistant) · genre: modern-minimal on the site's atmospheric dark system
 * additive page — matches the locked Local Web SA system (canvas #050D1A, Playfair Display + Inter, cyan accent)
 * tone: premium / confident · display: Playfair Display · body: Inter
 * accent: brand cyan #00E5FF + electric blue #0000FF (brand tokens; hero accent uses #0000FF like the main site) · pre-emit critique: P4 H4 E4 S4 R5 V4
 */

/* =================================================================
   1. DESIGN TOKENS
   All colours, fonts and spacing live here as CSS custom properties
   ("variables"). Change a value once and it updates everywhere it is
   used. The brand colours come straight from the brief.
   ================================================================= */
:root{
  /* ---- Brand (source of truth, matches the main site's tokens) ---- */
  --canvas:   #050D1A;   /* dark background — matches the main site */
  --electric: #7E90FF;   /* NB: periwinkle accent, matches section.black .eyebrow on the main site (#7E90FF). */
  --action:   #0000FF;   /* electric blue #0000FF — buttons, primary CTAs and the hero heading accent (main site --accent-electric) */
  --action-hover: #3a3aff; /* lighter electric blue for hover */
  --amber:    #F5A623;   /* amber highlight */

  /* ---- Surfaces (panels sitting on the canvas) ---- */
  --surface-1: #0B1626;  /* cards / panels */
  --surface-2: #11203A;  /* raised / hover */
  --surface-3: #16294A;  /* selected */

  /* ---- Text ---- */
  --white:      #FFFFFF;
  --text:       #E7ECF5;
  --text-muted: #9AA7BD;
  --text-faint: #6B7890;

  /* ---- Lines ---- */
  --hairline:        rgba(255,255,255,0.08);
  --hairline-strong: rgba(255,255,255,0.16);
  --accent-line:     rgba(126,144,255,0.35);

  /* ---- Type roles ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Spacing (8px base scale) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- Radii ---- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;

  /* ---- Motion (named easings — never the browser default) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 220ms;

  /* ---- Layout ---- */
  --topbar-h: 60px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,0.7);
}

/* =================================================================
   2. RESET & BASE
   ================================================================= */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; padding:0;
  background:var(--canvas); color:var(--text);
  /* clip (never hidden) prevents sideways scroll on small screens
     without breaking sticky positioning. */
  overflow-x:clip;
}
body{
  font-family:var(--font-body);
  font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
h1,h2,h3,h4{ font-style:normal; overflow-wrap:anywhere; } /* headings are always roman */
:focus-visible{
  outline:3px solid var(--electric);
  outline-offset:2px;
  border-radius:4px;
}

/* Atmospheric glow behind the whole app — subtle, matches the main site. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(0,0,255,0.12), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(126,144,255,0.06), transparent 70%);
}

/* =================================================================
   3. TOP BAR
   ================================================================= */
.topbar{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--s4);
  padding:0 max(var(--s4), env(safe-area-inset-right)) 0 max(var(--s4), env(safe-area-inset-left));
  border-bottom:1px solid var(--hairline);
  background:rgba(5,13,26,0.7);
  backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:50;
}
.topbar-brand img{ height:22px; width:auto; }
.topbar-tag{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--electric); font-weight:600;
  padding-left:var(--s4); border-left:1px solid var(--hairline-strong);
}
.topbar-back{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:var(--text-muted); white-space:nowrap;
  transition:color var(--dur) var(--ease-out);
}
.topbar-back svg{ width:16px; height:16px; }
.topbar-back:hover{ color:var(--white); }


/* =================================================================
   4. APP LAYOUT — two panes (wizard + Michael). On mobile they stack, so
   Michael sits inline beneath the wizard's Back/Next, not as a floating drawer.
   ================================================================= */
.studio{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:var(--s7);
  max-width:1320px; margin:0 auto;
  padding:var(--s7) max(var(--s5), env(safe-area-inset-right)) var(--s8) max(var(--s5), env(safe-area-inset-left));
}
@media (max-width:980px){
  .studio{ grid-template-columns:1fr; gap:var(--s6); padding-top:var(--s6); padding-left:max(var(--s5), env(safe-area-inset-left)); padding-right:max(var(--s5), env(safe-area-inset-right)); }
}

/* ---- Shared small components reused across the wizard ---- */
.eyebrow{
  display:inline-block;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--electric); font-weight:600; margin-bottom:var(--s3);
}
.wizard-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px, 5vw, 46px); line-height:1.05; margin:0 0 var(--s4);
  letter-spacing:-0.01em;
}
/* Hero heading accent: brand electric blue #0000FF (matches the main site's
   hero accent), with the same soft shadow so it stays legible on the dark
   canvas. Cyan stays cyan for eyebrows/kickers, exactly as on the rest of the site. */
.wizard-title .accent{ color:var(--action); text-shadow:0 2px 24px rgba(0,8,26,.5); }
.wizard-lede{ color:var(--text-muted); max-width:46ch; margin:0; }
.wizard-intro{ margin-bottom:var(--s6); }
/* The "Ask Michael" entry-point CTA under the lede. Rectangular glass, sized
   to its content (not full-width) so it reads as a button, not a banner.
   SVG inherits white from .btn-ghost — no cyan here. */
.wizard-ask{ margin-top:var(--s4); }

/* =================================================================
   5. STEPPER (progress)
   ================================================================= */
.stepper{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  margin-bottom:var(--s6);
  border-top:1px solid var(--hairline); padding-top:var(--s5);
}
.step-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--hairline-strong);
  background:var(--surface-1); color:var(--text-muted);
  font-size:13px; font-weight:500; white-space:nowrap;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.step-chip .num{
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:700;
  background:var(--surface-3); color:var(--text);
}
.step-chip:hover{ color:var(--text); border-color:var(--accent-line); }
.step-chip.is-active{
  background:var(--action); color:var(--white); border-color:transparent;
}
.step-chip.is-active .num{ background:rgba(255,255,255,0.25); color:var(--white); }
.step-chip.is-done{ color:var(--text); border-color:var(--accent-line); }
.step-chip.is-done .num{ background:var(--electric); color:#062430; }
.step-chip .label{ display:none; }
@media (min-width:560px){ .step-chip .label{ display:inline; } }

/* =================================================================
   6. PANELS (one per step)
   ================================================================= */
.panel{ display:none; animation:none; }
.panel.is-active{ display:block; animation:slideInRight var(--dur) var(--ease-out); }
.panels.dir-back .panel.is-active{ animation:slideInLeft var(--dur) var(--ease-out); }
@keyframes slideInRight{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes slideInLeft{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
.panel h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(22px, 3.5vw, 30px); margin:0 0 var(--s2); letter-spacing:-0.01em;
}
.panel-sub{ color:var(--text-muted); margin:0 0 var(--s5); max-width:52ch; }
.group-label{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint); font-weight:600;
  margin:var(--s6) 0 var(--s3);
}
.group-label:first-of-type{ margin-top:var(--s2); }

/* ---- Selectable cards (Step 1 site types, Step 3 vibes) ---- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap:var(--s3); }
.opt-card{
  text-align:left; width:100%;
  padding:var(--s4); border-radius:var(--r-md);
  border:1px solid var(--hairline-strong); background:var(--surface-1);
  display:flex; flex-direction:column; gap:6px;
  transition:transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.opt-card .ic{ width:34px; height:34px; color:var(--electric); margin-bottom:4px; }
.opt-card .ic svg{ width:100%; height:100%; }
.opt-card .opt-name{ font-weight:600; color:var(--white); font-size:15px; }
.opt-card .opt-desc{ font-size:13px; color:var(--text-muted); line-height:1.45; }
.opt-card:hover{ transform:translateY(-2px); border-color:var(--accent-line); background:var(--surface-2); }
.opt-card.is-selected{
  border-color:var(--electric); background:var(--surface-3);
  box-shadow:0 0 0 1px var(--electric) inset;
}
.opt-card.is-selected .opt-name::after{
  content:"✓"; color:var(--electric); margin-left:6px; font-weight:700;
}

/* ---- Step 1 site-type cards: compact horizontal rows ----
   The industry list is long, so these read "thinner" than the stacked
   cards: a small icon tile on the left, name + one-line description on the
   right. Two-up on wider screens, single column on phones. Scoped to the
   --row / --types modifiers so the Step 3 vibe + font cards are untouched. */
.card-grid--types{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap:var(--s2);
}
.opt-card--row{
  flex-direction:row; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
}
.opt-card--row .ic{
  width:38px; height:38px; flex:0 0 38px; margin-bottom:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--hairline);
  transition:border-color var(--dur) var(--ease-out);
}
.opt-card--row .ic svg{ width:20px; height:20px; }
.opt-card--row .opt-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.opt-card--row .opt-desc{ font-size:12.5px; line-height:1.4; }
.opt-card--row:hover{ transform:none; }
.opt-card--row.is-selected .ic{ border-color:var(--electric); color:var(--electric); }

/* ---- Industry-type icon tints (Step 1) ---- */
.opt-card--row .ic[data-tint="warm"]{ background:rgba(245,166,35,0.12); border-color:rgba(245,166,35,0.28); color:var(--amber); }
.opt-card--row .ic[data-tint="green"]{ background:rgba(61,220,132,0.10); border-color:rgba(61,220,132,0.25); color:#3ddc84; }
.opt-card--row .ic[data-tint="grey"]{ background:rgba(180,180,190,0.10); border-color:rgba(180,180,190,0.20); color:var(--text-muted); }
/* 'blue' is the default, using the existing rule above */

/* ---- Vibe preset cards with gradient swatches (Step 3) ---- */
.vibe-card{ padding:var(--s3); gap:var(--s2); }
.vibe-swatch{
  width:100%; height:68px; border-radius:var(--r-sm);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:var(--s2) var(--s3); flex-shrink:0; margin-bottom:var(--s2);
}
.vs-aa{ font-size:22px; font-weight:700; color:rgba(255,255,255,0.92); line-height:1; }
.vs-mode{
  font-size:10px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  color:rgba(255,255,255,0.78); background:rgba(0,0,0,0.25);
  padding:3px 7px; border-radius:999px;
}
.vibe-card .opt-name{ padding:0 2px; font-size:14px; }
.vibe-card .opt-desc{ padding:0 2px; font-size:11.5px; color:var(--text-muted); }

/* ---- Font preview cards (Step 3) ---- */
.font-preview-aa{
  display:block; font-size:28px; font-weight:700; color:var(--white);
  line-height:1.1; margin-bottom:var(--s2);
}

/* ---- Toggle rows (Step 2 pages, Step 4 features) ---- */
.toggle-row{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); border-radius:var(--r-sm);
  border:1px solid var(--hairline); background:var(--surface-1);
  margin-bottom:var(--s2); width:100%; text-align:left;
  transition:border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.toggle-row:hover{ border-color:var(--accent-line); background:var(--surface-2); }
.toggle-row.is-on{ border-color:var(--accent-line); background:var(--surface-2); }
.toggle-row.is-locked{ opacity:0.8; cursor:default; }
.toggle-row .tr-main{ flex:1; min-width:0; }
.toggle-row .tr-name{ font-weight:600; color:var(--white); font-size:15px; }
.toggle-row .tr-desc{ font-size:12.5px; color:var(--text-muted); }
.toggle-row .tr-price{ font-size:13px; font-weight:600; color:var(--electric); white-space:nowrap; }
.toggle-row .tr-price.free{ color:var(--text-faint); }
/* the visual switch */
.switch{
  width:42px; height:24px; border-radius:999px; flex:none;
  background:var(--surface-3); border:1px solid var(--hairline-strong);
  position:relative; transition:background var(--dur) var(--ease-out);
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%; background:var(--text-muted);
  transition:transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.toggle-row.is-on .switch{ background:var(--action); border-color:transparent; }
.toggle-row.is-on .switch::after{ transform:translateX(18px); background:var(--white); }
.lock-ic{ width:16px; height:16px; color:var(--text-faint); flex:none; }

/* ---- Add custom page field ---- */
.inline-add{ display:flex; gap:var(--s2); margin-top:var(--s3); }
.inline-add input{ flex:1; min-width:0; }

/* ---- Form fields ---- */
.field{ margin-bottom:var(--s4); }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.field .req{ color:var(--amber); }
input[type=text], input[type=email], input[type=tel], textarea, select{
  width:100%; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--surface-1); border:1px solid var(--hairline-strong);
  color:var(--white); font-size:15px; font-family:inherit;
  transition:border-color var(--dur) var(--ease-out);
}
input::placeholder, textarea::placeholder{ color:var(--text-faint); }
input:focus, textarea:focus, select:focus{ border-color:var(--electric); outline:none; }
textarea{ min-height:90px; resize:vertical; }
.field-error input, .field-error textarea{ border-color:#FF6B6B; }
.field-msg{ font-size:12.5px; color:#FF8585; margin-top:5px; display:none; }
.field-error .field-msg{ display:block; }

/* ---- Colour pickers ---- */
.color-row{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.color-pick{ display:flex; align-items:center; gap:var(--s3); }
.color-pick label{ font-size:13px; font-weight:600; }
.color-pick input[type=color]{
  width:46px; height:46px; padding:0; border-radius:var(--r-sm);
  border:1px solid var(--hairline-strong); background:none; cursor:pointer;
}

/* ---- Light/Dark mode toggle (Step 3) ---- */
.mode-toggle{ display:inline-flex; border:1px solid var(--hairline-strong); border-radius:999px; padding:4px; gap:4px; }
.mode-toggle button{ padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--text-muted); }
.mode-toggle button.is-on{ background:var(--surface-3); color:var(--white); }

/* =================================================================
   7. BUTTONS — liquid glass, matching the main site (rectangular,
   frosted, not flat fills). See styles.css .btn-blue / .btn-ghost.
   ================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:8px;
  font-size:15px; font-weight:700; white-space:nowrap;
  transition:transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }

/* Primary — frosted electric-blue glass (mirrors the main site's .btn-blue). */
.btn-action{
  color:#fff;
  background:linear-gradient(180deg, rgba(60,96,255,.34), rgba(0,0,255,.18));
  border:1px solid rgba(120,150,255,.50);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  text-shadow:0 1px 8px rgba(0,8,40,.45);
  box-shadow:0 8px 30px rgba(0,0,255,.34), inset 0 1px 0 rgba(255,255,255,.40), inset 0 -10px 20px rgba(0,0,255,.10);
}
.btn-action:hover{
  background:linear-gradient(180deg, rgba(80,116,255,.46), rgba(0,0,255,.26));
  border-color:rgba(150,178,255,.70);
  box-shadow:0 14px 40px rgba(0,0,255,.42), 0 0 26px rgba(126,144,255,.20), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 20px rgba(0,0,255,.14);
}

/* Quiet — faint frosted glass sheet (mirrors the main site's .btn-ghost). */
.btn-ghost{
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 6px 20px rgba(5,13,26,.25), inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-ghost:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.45);
}

.btn-electric{ background:var(--electric); color:#042430; }
.btn-electric:hover{ filter:brightness(1.06); }

/* WhatsApp — frosted green glass (mirrors the main site's .btn-wa). */
.btn-wa{
  color:#fff;
  background:linear-gradient(180deg, rgba(0,230,118,.20), rgba(5,13,26,.30));
  border:1px solid rgba(0,230,118,.45);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 8px 26px rgba(5,13,26,.34), inset 0 1px 0 rgba(255,255,255,.18), 0 0 22px rgba(0,230,118,.18);
}
.btn-wa:hover{
  background:linear-gradient(180deg, rgba(0,230,118,.30), rgba(0,230,118,.10));
  border-color:rgba(0,230,118,.8);
}
.btn-block{ width:100%; }

/* Glass needs a frosted solid fallback where backdrop-filter isn't supported. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn-ghost{ background:rgba(22,30,52,.92); }
  .btn-action{ background:linear-gradient(180deg, rgba(60,96,255,.92), rgba(0,0,255,.84)); }
  .btn-wa{ background:rgba(4,46,30,.92); }
}

.wizard-nav{ display:flex; justify-content:space-between; gap:var(--s3); margin-top:var(--s7); }
/* Equal-width Back / Next so they read as one matched pair. */
.wizard-nav .btn{ flex:1 1 0; min-width:0; }

/* =================================================================
   8. MICHAEL PANE — the AI design assistant (replaces the old preview)
   ================================================================= */
.michael-pane{ position:sticky; top:calc(var(--topbar-h) + var(--s5)); align-self:start; }

.price-rail{
  display:flex; gap:var(--s5); padding:var(--s4) var(--s5);
  border:1px solid var(--accent-line); border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  margin-bottom:var(--s4);
}
.price-rail-row{ display:flex; flex-direction:column; gap:2px; }
.price-rail-label{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint); }
.price-rail-value{ font-size:clamp(22px, 4vw, 28px); font-weight:700; color:var(--white); font-variant-numeric:tabular-nums; }
.price-rail-value.monthly{ color:var(--electric); }

/* ---- Michael's window ---- */
.michael-card{
  border:1px solid var(--hairline-strong); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface-1), var(--canvas));
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.michael-head{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--hairline);
  background:var(--surface-1);
}
.michael-avatar{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  /* Blue → cyan gradient, matching the chat.html page's avatar. */
  background:linear-gradient(135deg, var(--action) 0%, var(--electric) 100%);
  box-shadow:0 2px 12px rgba(0,0,255,0.30);
}
.michael-avatar svg{ width:22px; height:22px; }
.michael-id{ display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.michael-id strong{ font-size:15px; color:var(--white); }
.michael-status{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.michael-dot{ width:7px; height:7px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 3px rgba(61,220,132,0.18); }

/* The conversation — a scrolling chat area, like chat.html. */
.michael-log{
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s4);
  min-height:200px; max-height:min(48vh, 460px); overflow-y:auto;
  scroll-behavior:smooth;
}
.m-msg{
  font-size:14.5px; line-height:1.65; color:var(--text);
  animation:mFade var(--dur) var(--ease-out) both;
  max-width:100%; word-wrap:break-word; overflow-wrap:anywhere;
}
/* Michael speaks as plain flowing text on the left (Claude-style). */
.m-msg.intro{ color:var(--white); }
/* The customer's own messages: a soft right-aligned blue bubble. */
.m-msg.user{
  align-self:flex-end; max-width:85%;
  background:linear-gradient(135deg, var(--action) 0%, #2a2aff 100%);
  color:#fff; padding:10px 15px; font-size:14px; line-height:1.55;
  border-radius:16px; border-bottom-right-radius:5px;
  box-shadow:0 4px 16px rgba(0,0,255,.28);
}
/* A narration line — what Michael is doing right now, with a tick once done. */
.m-step{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; color:var(--text-muted);
  animation:mFade var(--dur) var(--ease-out) both;
}
.m-step .m-tick{
  width:18px; height:18px; flex:none; margin-top:1px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--electric);
}
.m-step .m-tick svg{ width:11px; height:11px; }
.m-step.is-doing .m-tick{ background:transparent; box-shadow:0 0 0 1.5px var(--accent-line) inset; }
.m-step.is-doing .m-tick svg{ display:none; }
.m-step.is-doing .m-tick::after{
  content:""; width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--electric); border-top-color:transparent;
  animation:mSpin 0.7s linear infinite;
}
.m-step strong{ color:var(--text); font-weight:600; }

@keyframes mFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes mSpin{ to{ transform:rotate(360deg); } }

/* Typing indicator. */
.michael-typing{
  display:none; align-items:center; gap:10px;
  padding:0 var(--s5) var(--s3); font-size:13px; color:var(--text-faint);
}
.michael-typing.show{ display:flex; }
.m-dots{ display:inline-flex; gap:4px; }
.m-dots span{ width:6px; height:6px; border-radius:50%; background:var(--electric); opacity:0.5; animation:mBlink 1.2s infinite; }
.m-dots span:nth-child(2){ animation-delay:0.2s; }
.m-dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes mBlink{ 0%,60%,100%{ opacity:0.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* The composer — mirrors chat.html: quick-start chips above a rounded input
   bar with a circular send button. */
.michael-composer{ padding:var(--s3) var(--s5) var(--s5); border-top:1px solid var(--hairline); }
.michael-examples{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s3); }
.m-eg{
  font-size:12.5px; color:var(--text-muted); font-family:inherit;
  padding:7px 13px; border-radius:999px; border:1px solid var(--hairline-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  transition:border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
/* Hover matches styles.css .suggestion-chip:hover — blue gradient, not cyan. */
.m-eg:hover{ border-color:rgba(120,150,255,.50); color:var(--white); background:linear-gradient(180deg,rgba(60,96,255,.28),rgba(0,0,255,.14)); }
/* Rounded input bar + circular send (matches styles.css .chat-input). */
.michael-input{
  display:flex; align-items:flex-end; gap:10px;
  padding:8px 8px 8px 16px; border-radius:22px;
  background:var(--surface-1); border:1px solid var(--hairline-strong);
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.michael-input:focus-within{ border-color:var(--action); box-shadow:0 0 0 3px rgba(0,0,255,.18); }
.michael-input textarea{
  flex:1; border:0; outline:0; resize:none; min-height:auto;
  background:transparent; color:#fff; font-family:inherit;
  font-size:15px; line-height:1.5; padding:8px 0; max-height:140px;
}
.michael-input textarea::placeholder{ color:var(--text-faint); }
.michael-input button{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(180deg, rgba(60,96,255,.55), rgba(0,0,255,.45));
  border:1px solid rgba(120,150,255,.55); color:#fff;
  display:grid; place-items:center;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.michael-input button:hover{ transform:scale(1.06); box-shadow:0 4px 16px rgba(0,0,255,.4); }
.michael-input button:active{ transform:scale(.94); }
.michael-input button:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.michael-input button svg{ width:19px; height:19px; }
.michael-pane.is-working .michael-input textarea,
.michael-pane.is-working .michael-input button,
.michael-pane.is-working .m-eg{ opacity:0.5; pointer-events:none; }

/* ---- Editable summary of Michael's choices ----
   Shown in the chat after Michael finishes. Each row has an Edit button that
   jumps to the matching wizard step so the customer can change his picks. */
.m-summary{
  border:1px solid var(--hairline-strong); border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  overflow:hidden; animation:mFade var(--dur) var(--ease-out) both;
}
.m-summary-head{
  padding:12px var(--s4); font-size:13px; color:var(--text-muted);
  border-bottom:1px solid var(--hairline);
}
.m-summary-row{
  display:flex; align-items:center; gap:var(--s3);
  padding:11px var(--s4); border-bottom:1px solid var(--hairline);
}
.m-summary-row:last-child{ border-bottom:none; }
.m-summary-row .ms-label{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-faint); width:64px; flex:none;
}
.m-summary-row .ms-val{ flex:1; min-width:0; font-size:13.5px; color:var(--white); }
.m-summary-row .ms-edit{
  /* Blue-glass pill, matching the site's glass button language for interactive CTAs. */
  flex:none; font-size:12.5px; font-weight:600; color:#fff;
  padding:6px 12px; border-radius:999px;
  background:linear-gradient(180deg, rgba(60,96,255,.26), rgba(0,0,255,.14));
  border:1px solid rgba(120,150,255,.40);
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.m-summary-row .ms-edit:hover{
  background:linear-gradient(180deg, rgba(60,96,255,.42), rgba(0,0,255,.28));
  border-color:rgba(150,178,255,.65);
  box-shadow:0 4px 14px rgba(0,0,255,.30);
}

/* The pulse that shows on the left when Michael toggles a control, so the
   customer can *see* each choice land. */
.m-justpicked{ animation:mPick 0.95s var(--ease-out); }
@keyframes mPick{
  0%{ box-shadow:0 0 0 0 rgba(126,144,255,0.55); }
  35%{ box-shadow:0 0 0 4px rgba(126,144,255,0.35); border-color:var(--electric); }
  100%{ box-shadow:0 0 0 0 rgba(126,144,255,0); }
}
@media (prefers-reduced-motion:reduce){
  .m-justpicked{ animation:none; }
  .m-msg,.m-step{ animation:none; }
}

/* ---- Mobile: Michael sits inline, directly under the wizard's Back/Next ----
   The two panes stack (grid is single-column at this width), so Michael flows
   as the second block in normal document order — no floating drawer. */
@media (max-width:980px){
  .michael-pane{ position:static; }
  .michael-log{ max-height:none; }   /* let it grow inline rather than scroll a fixed box */
}

/* =================================================================
   9. QUOTE STEP (Step 6) — itemised breakdown
   ================================================================= */
.quote-box{ border:1px solid var(--hairline-strong); border-radius:var(--r-md); background:var(--surface-1); overflow:hidden; }
.quote-line{ display:flex; justify-content:space-between; gap:var(--s4); padding:12px var(--s4); border-bottom:1px solid var(--hairline); font-size:14px; }
.quote-line:last-child{ border-bottom:none; }
.quote-line .ql-name{ color:var(--text); }
.quote-line .ql-sub{ color:var(--text-faint); font-size:12px; }
.quote-line .ql-amt{ font-weight:600; color:var(--white); white-space:nowrap; font-variant-numeric:tabular-nums; }
.quote-line.free .ql-amt{ color:var(--text-faint); font-weight:500; }
.quote-totals{ padding:var(--s4); background:var(--surface-2); display:grid; gap:8px; }
.quote-total-row{ display:flex; justify-content:space-between; align-items:baseline; }
.quote-total-row .lbl{ color:var(--text-muted); }
.quote-total-row .val{ font-size:22px; font-weight:700; color:var(--white); font-variant-numeric:tabular-nums; }
.quote-total-row.monthly .val{ color:var(--electric); font-size:18px; }
.quote-ref{ display:flex; align-items:center; gap:10px; margin:var(--s4) 0; padding:12px var(--s4); border:1px dashed var(--accent-line); border-radius:var(--r-sm); }
.quote-ref .lbl{ font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.1em; }
.quote-ref .ref{ font-family:var(--font-body); font-weight:700; color:var(--electric); letter-spacing:0.04em; }
.quote-note{ font-size:12.5px; color:var(--text-faint); margin-top:var(--s3); }
.quote-total-row .val.val-big{ font-size:clamp(28px,5vw,40px); font-family:var(--font-display); letter-spacing:-0.01em; }
.quote-intro{ margin-bottom:var(--s4); }
.quote-intro .eyebrow{ margin-bottom:var(--s2); }
.quote-intro p{ color:var(--text-muted); font-size:14px; margin:0; max-width:50ch; }
.quote-timeline{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) var(--s4); border-radius:var(--r-sm);
  background:rgba(126,144,255,0.05); border:1px solid rgba(126,144,255,0.15);
  font-size:13.5px; color:var(--text-muted); margin-top:var(--s3);
}
.qt-dot{
  width:8px; height:8px; border-radius:50%; background:var(--electric);
  flex-shrink:0; margin-top:5px;
  box-shadow:0 0 0 3px rgba(126,144,255,0.18);
}
.quote-actions{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s4); }

/* =================================================================
   10. SUCCESS SCREEN (after submit)
   ================================================================= */
.success{ text-align:center; padding:var(--s6) 0; }
.success .tick{ width:72px; height:72px; border-radius:50%; background:rgba(0,240,255,0.12); border:1px solid var(--accent-line); display:grid; place-items:center; margin:0 auto var(--s5); }
.success .tick svg{ width:36px; height:36px; color:var(--electric); }
.success h2{ font-family:var(--font-display); font-size:28px; margin:0 0 var(--s3); }
.success p{ color:var(--text-muted); max-width:44ch; margin:0 auto var(--s4); }
.success .ref-pill{ display:inline-block; padding:8px 16px; border-radius:999px; background:var(--surface-2); border:1px solid var(--accent-line); color:var(--electric); font-weight:700; margin-bottom:var(--s5); }

/* =================================================================
   11. SENDING / STATUS BANNER
   ================================================================= */
.form-status{ margin-top:var(--s3); font-size:14px; padding:12px var(--s4); border-radius:var(--r-sm); display:none; }
.form-status.show{ display:block; }
.form-status.err{ background:rgba(255,107,107,0.12); border:1px solid rgba(255,107,107,0.4); color:#ffb3b3; }
.form-status.ok{ background:rgba(0,240,255,0.1); border:1px solid var(--accent-line); color:var(--electric); }
.spinner{ display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =================================================================
   12. REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html{ scroll-behavior:auto; }
  .panel.is-active{ animation:none; }
  .panels.dir-back .panel.is-active{ animation:none; }
}

/* =================================================================
   13. PRINT — the downloadable PDF quote
   The app is hidden; only #printQuote shows, styled light for paper.
   ================================================================= */
.print-quote{ display:none; }
@media print{
  body::before{ display:none; }
  .topbar, .studio{ display:none !important; }
  .print-quote{
    display:block; color:#10131b; background:#fff;
    font-family:var(--font-body); padding:32px; max-width:720px; margin:0 auto;
  }
  .print-quote h1{ font-family:var(--font-display); font-size:26px; margin:0 0 4px; color:#050D1A; }
  .print-quote .pq-brandline{ color:#0000FF; font-weight:700; letter-spacing:0.04em; }
  .print-quote .pq-meta{ color:#555; font-size:13px; margin:8px 0 24px; }
  .print-quote table{ width:100%; border-collapse:collapse; }
  .print-quote td{ padding:8px 0; border-bottom:1px solid #e5e7eb; font-size:13px; vertical-align:top; }
  .print-quote td.amt{ text-align:right; font-weight:600; white-space:nowrap; }
  .print-quote .pq-tot{ font-size:18px; font-weight:700; }
  .print-quote .pq-foot{ margin-top:24px; font-size:12px; color:#666; }
}