/* =================================================================
   TaxNoticeAdvisor — layout-variant components
   Loaded AFTER style.css. Reuses all base tokens + shared components
   (header, footer, buttons, eyebrow, stat band, pricing, icon tints).
   Adds only the anatomy-specific pieces for the three home layouts:
     A. Guided Triage Journey   (.triage-*, .journey*, .desk-selector*)
     B. Upload-first Console     (.console*, .desk-tabs*)
     C. Editorial Law-firm       (.ed-*, .zz*, .ledger*)
   Plus the floating layout switcher used only in these mockups.
   ================================================================= */

/* ---- Floating layout switcher (mockup-only) -------------------- */
.switcher {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 4px;
  background: #14201e; color: #fff; padding: 6px; border-radius: var(--r-pill);
  box-shadow: var(--sh-lg); font-size: var(--fs-13);
}
.switcher__label { padding: 0 10px 0 12px; color: #9fb0ac; font-weight: 600; letter-spacing: .04em; }
.switcher a { padding: 8px 15px; border-radius: var(--r-pill); font-weight: 600; color: #d7e2df; transition: background .18s ease, color .18s ease; }
.switcher a:hover { background: rgba(255,255,255,.1); color: #fff; }
.switcher a.is-current { background: var(--gold); color: #fff; }
@media (max-width: 560px){ .switcher{ font-size: var(--fs-13); flex-wrap: wrap; justify-content: center; width: calc(100% - 24px);} .switcher__label{display:none;} }

/* ================================================================
   PREMIUM LAYERED HERO (home)
   Left: authoritative headline + CTAs + proof row.
   Right: layered "notice diagnosis" card stack with floating badges,
   over a composed background (blooms + dot grid + faint shield seal).
   ================================================================ */
.phero { position: relative; overflow: hidden; padding-block: clamp(2.5rem,5vw,4.5rem) clamp(3.5rem,6vw,5.5rem); }
.phero__bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.phero__bloom-a { position:absolute; top:-28%; right:-6%; width:48vw; height:48vw; max-width:680px; max-height:680px;
  background: radial-gradient(circle, rgba(20,116,107,.20), rgba(20,116,107,0) 62%); }
.phero__bloom-b { position:absolute; bottom:-34%; left:-14%; width:44vw; height:44vw; max-width:600px; max-height:600px;
  background: radial-gradient(circle, rgba(198,148,52,.16), rgba(198,148,52,0) 60%); }
.phero__grid { position:absolute; inset:0;
  background-image: radial-gradient(rgba(15,89,82,.07) 1.1px, transparent 1.1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 78%); }
.phero__seal { position:absolute; top:52%; right:4%; transform:translateY(-50%); width:560px; height:auto; color:var(--teal); opacity:.045; }

.phero__inner { position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4vw,4rem); align-items:center; }

/* Hero headline: Archivo grotesk (owner-picked), set professionally */
.phero__content h1 { font-family:"Archivo", var(--font-sans); font-weight:700; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(2.5rem,5.2vw,4rem); color:var(--teal-dark); margin:var(--sp-4) 0 var(--sp-5); text-wrap:balance; }
.phero__content h1 em { font-style:normal; font-weight:800; color:inherit; }   /* grotesks emphasise by weight, not italic */
.phero__lead { font-size:var(--fs-18); line-height:1.65; color:var(--ink-soft); max-width:33em; }
.phero__cta { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.phero__proof { display:flex; align-items:center; gap:clamp(.9rem,2vw,1.8rem); margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.phero__proof-item strong { display:block; font-family:var(--font-serif); font-weight:600; font-size:var(--fs-24); color:var(--teal-dark); line-height:1; }
.phero__proof-item span { font-size:var(--fs-13); color:var(--ink-faint); }
.phero__proof-div { width:1px; height:34px; background:var(--line); }

/* right visual stage */
.phero__stage { position:relative; min-height:460px; display:grid; place-items:center; }
.phero__arc { position:absolute; width:112%; aspect-ratio:1; border:1.5px dashed rgba(198,148,52,.32); border-radius:50%; animation:spin 80s linear infinite; }
.phero__arc::after { content:""; position:absolute; top:8%; left:50%; width:11px; height:11px; margin-left:-5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(198,148,52,.18); }

.hero-doc { position:relative; z-index:2; width:min(380px,94%);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 34px 64px -28px rgba(10,61,56,.45), 0 12px 26px -14px rgba(10,61,56,.22);
  padding:var(--sp-5) var(--sp-5) var(--sp-4); }
.hero-doc--back { position:absolute; z-index:1; top:-24px; right:-30px; width:min(340px,86%); height:82%;
  transform:rotate(5deg); background:linear-gradient(160deg,#ffffff,#f4f1ea);
  box-shadow:0 22px 44px -26px rgba(10,61,56,.3); }
.hero-doc__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:var(--sp-3); border-bottom:1px solid var(--line-soft); }
.hero-doc__file { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:var(--fs-14); color:var(--teal-dark); }
.hero-doc__file .icn { width:19px; height:19px; color:var(--teal-mid); }
.hero-doc__tag { background:#f7e4dc; color:#b4482c; font-size:var(--fs-13); font-weight:700; padding:3px 11px; border-radius:var(--r-pill); }
.hero-doc__deadline { display:inline-flex; align-items:center; gap:7px; margin:var(--sp-4) 0 var(--sp-3); font-size:var(--fs-13); font-weight:600; color:#b4482c; }
.hero-doc__deadline .icn { width:15px; height:15px; }
.hero-doc__rows { display:grid; gap:12px; }
.hero-doc__row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hero-doc__row > span:first-child { font-size:var(--fs-13); text-transform:uppercase; letter-spacing:.05em; color:var(--teal-mid); font-weight:600; flex:none; }
.hero-doc__row b { font-size:var(--fs-14); color:var(--ink); text-align:right; font-weight:500; }
.hero-doc__risk { background:#f7ecd6; color:#a97c23; font-size:var(--fs-13); font-weight:700; padding:2px 10px; border-radius:var(--r-pill); }
.hero-doc__status { display:flex; align-items:center; gap:9px; margin-top:var(--sp-4); padding:11px 13px; border-radius:var(--r-md);
  background:var(--tint-teal-bg); color:var(--teal-dark); font-size:var(--fs-13); font-weight:600; }
.hero-doc__status .icn { width:18px; height:18px; color:var(--tint-teal-fg); flex:none; }

/* hero workflow card: the five steps from upload to resolution */
.flow-card__steps { list-style:none; margin:var(--sp-4) 0 0; padding:0; }
.flow-card__steps li { position:relative; display:flex; align-items:flex-start; gap:14px; padding-bottom:14px; }
.flow-card__steps li:last-child { padding-bottom:0; }
.flow-card__steps li:not(:last-child)::after { content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:rgba(198,148,52,.45); }
.flow-card__num { position:relative; z-index:1; flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-16); color:var(--teal-dark); background:#fff; border:1.5px solid var(--gold); }
.flow-card__steps li.is-first .flow-card__num { background:var(--teal); color:#fff; }
.flow-card__steps b { display:block; padding-top:4px; font-size:var(--fs-15); font-weight:600; color:var(--ink); line-height:1.3; }
.flow-card__steps div span { font-size:var(--fs-13); color:var(--ink-faint); }

.phero__badge { position:absolute; z-index:3; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-md); }
.phero__badge--time { top:6%; left:-4%; padding:11px 15px; display:flex; flex-direction:column; }
.phero__badge--time strong { font-family:var(--font-serif); font-weight:600; font-size:var(--fs-18); color:var(--gold-dark); line-height:1.1; }
.phero__badge--time span { font-size:var(--fs-13); color:var(--ink-faint); }
.phero__badge--won { bottom:8%; left:-6%; padding:10px 15px; display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-13); font-weight:600; color:var(--tint-green-fg); }
.won-dot { width:8px; height:8px; border-radius:50%; background:#2f9d4e; box-shadow:0 0 0 0 rgba(47,157,78,.5); animation:pulse 2s infinite; }
.phero__badge--seal { bottom:2%; right:2%; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:var(--teal); }
.phero__badge--seal .icn { width:32px; height:32px; }

@media (max-width:860px){
  .phero__inner { grid-template-columns:1fr; }
  .phero__stage { min-height:0; margin-top:var(--sp-6); }  /* phones: headline and CTA first, card after */
  .phero__seal { display:none; }
}
@media (max-width:560px){
  .phero__proof { gap:var(--sp-4); flex-wrap:wrap; }
  .phero__cta .btn { width:100%; }
  .phero__badge--time { left:0; } .phero__badge--won { left:0; }
}

/* ---- Calmed hero variant (substance-led, restrained) ----------
   One quiet bloom, one still diagnosis card, no arc / back-card /
   watermark / floating badges / ambient motion. Gold CTA gets the
   accessible dark-teal text treatment. */
.phero--calm .phero__stage { min-height:auto; }
.phero--calm .hero-doc { width:min(430px,100%); box-shadow:var(--sh-lg); padding:var(--sp-6) var(--sp-6) var(--sp-5); }
.phero--calm .hero-doc__accent { width:46px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-dark)); margin-bottom:var(--sp-4); }
.phero--calm .hero-doc__caption { margin-top:var(--sp-4); text-align:center; font-size:var(--fs-13); color:var(--ink-soft); }
/* cursor-follow soft glow + gentle parallax (calm: reacts to intent, still when the mouse is) */
.phero__spot { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(20,116,107,.16), transparent 62%); }
.phero__bloom-a { transition:transform .55s cubic-bezier(.22,1,.36,1); will-change:transform; }
.phero--calm .hero-doc { transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; transform-style:preserve-3d; }
@media (prefers-reduced-motion: reduce){ .phero__spot{ display:none; } .phero__bloom-a{ transition:none; } .phero--calm .hero-doc{ transition:none; } }

/* comparison harness (mockup only) */
.cmp-label { max-width:var(--container); margin:0 auto; padding:var(--sp-5) var(--sp-5) 0; }
.cmp-label span { display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-13); font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:var(--r-pill); }
.cmp-label--before span { background:#f6e3dc; color:#b4482c; }
.cmp-label--after span { background:var(--tint-green-bg); color:var(--tint-green-fg); }
.cmp-note { max-width:var(--container); margin:0 auto; padding:var(--sp-2) var(--sp-5) 0; font-size:var(--fs-14); color:var(--ink-soft); }
.cmp-divider { height:1px; background:var(--line); max-width:var(--container); margin:var(--sp-7) auto 0; }

/* ================================================================
   A. GUIDED TRIAGE JOURNEY
   ================================================================ */
.triage-hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem,5vw,4.5rem) var(--sp-7); }
.triage-hero__bloom { position:absolute; top:-30%; left:-10%; width:55vw; height:55vw; max-width:640px; max-height:640px;
  background: radial-gradient(circle, rgba(20,116,107,.14), transparent 62%); pointer-events:none; }
.triage-hero__inner { position: relative; z-index: 1; max-width: 780px; }
.triage-hero h1 { font-family: var(--font-serif); font-weight: 500; letter-spacing:-.02em; line-height:1.06;
  font-size: clamp(2.4rem,5.4vw,3.6rem); color: var(--teal-dark); margin: var(--sp-4) 0 var(--sp-4); }
.triage-hero h1 em { font-style: italic; color: var(--gold-dark); }
.triage-hero__lead { font-size: var(--fs-18); color: var(--ink-soft); max-width: 40em; }
.triage-hero__chips { display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.triage-hero__chips span { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius: var(--r-pill); padding:8px 15px; font-size: var(--fs-14); font-weight:500; color: var(--ink-soft); box-shadow: var(--sh-sm); }

/* The journey spine */
.journey { position: relative; padding-block: var(--sp-8) var(--sp-9); background: var(--paper-2); }
.journey__head { text-align:center; max-width: 640px; margin: 0 auto var(--sp-8); }
.journey__track { position: relative; max-width: 920px; margin: 0 auto; }
/* vertical rail */
.journey__track::before { content:""; position:absolute; left: 27px; top: 8px; bottom: 8px; width: 3px;
  background: var(--line); border-radius: 3px; }
.journey__fill { position:absolute; left:27px; top:8px; width:3px; background: linear-gradient(var(--gold), var(--gold-dark));
  border-radius:3px; height:0; transition: height .3s ease; }

.stage { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-5); padding-bottom: var(--sp-7); }
.stage:last-child { padding-bottom: 0; }
.stage__node { position: relative; z-index:2; width: 56px; height: 56px; border-radius: 50%; display:grid; place-items:center;
  font-family: var(--font-serif); font-weight:600; font-size: var(--fs-24); color: var(--teal-dark);
  background:#fff; border: 3px solid var(--line); box-shadow: var(--sh-sm); transition: border-color .3s ease, color .3s ease, background .3s ease; }
.stage.is-active .stage__node { background: var(--teal); border-color: var(--gold); color:#fff; box-shadow: 0 8px 20px -6px rgba(15,89,82,.5); }
.stage__panel { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-sm); }
.stage__eyebrow { font-size: var(--fs-13); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--teal-mid); }
.stage__panel h3 { font-family: var(--font-serif); font-weight:600; font-size: var(--fs-24); color: var(--teal-dark); margin:6px 0 var(--sp-3); }
.stage__panel > p { color: var(--ink-soft); font-size: var(--fs-15); }
.stage__meta { display:inline-flex; align-items:center; gap:8px; margin-top: var(--sp-3); font-size: var(--fs-13); font-weight:600;
  color: var(--gold-dark); background: var(--tint-gold-bg); padding:5px 12px; border-radius: var(--r-pill); }

/* Interactive desk selector inside stage 1 */
.desk-selector { margin-top: var(--sp-5); border-top: 1px solid var(--line-soft); padding-top: var(--sp-5); }
.desk-selector__q { font-size: var(--fs-14); font-weight:600; color: var(--ink); margin-bottom: var(--sp-3); }
.desk-selector__chips { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.desk-chip { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius: var(--r-pill);
  border:1.5px solid var(--line); background:#fff; font-size: var(--fs-14); font-weight:600; color: var(--ink-soft);
  cursor:pointer; transition: all .18s ease; }
.desk-chip:hover { border-color: var(--teal-mid); color: var(--teal-dark); }
.desk-chip.is-active { background: var(--teal); border-color: var(--teal); color:#fff; }
.desk-panel { display:none; background: var(--paper); border-radius: var(--r-md); padding: var(--sp-5); border:1px solid var(--line); }
.desk-panel.is-shown { display:block; animation: fadeUp .35s ease; }
.desk-panel h4 { font-family: var(--font-serif); font-size: var(--fs-18); color: var(--teal-dark); margin-bottom: var(--sp-2); }
.desk-panel ul { display:grid; gap:8px; }
.desk-panel li { position:relative; padding-left:22px; font-size: var(--fs-14); color: var(--ink-soft); }
.desk-panel li::before { content:""; position:absolute; left:3px; top:7px; width:8px; height:8px; border:2px solid var(--gold); border-radius:50%; }
@keyframes fadeUp { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none; } }

/* mini dropzone reused inside stage 1 */
.mini-drop { display:block;   /* it is a <label>: must be block or the dashed border wraps each text line */
  margin-top: var(--sp-5); border:2px dashed var(--teal-mid); border-radius: var(--r-md); background: var(--tint-teal-bg);
  padding: var(--sp-5); text-align:center; cursor:pointer; transition: background .2s ease, border-color .2s ease; }
.mini-drop:hover, .mini-drop.is-drag { background:#d6eae6; border-color: var(--gold); }
.mini-drop__icon { color: var(--teal-mid); line-height: 0; }
.mini-drop__icon .icn { width: 30px; height: 30px; }
.mini-drop strong { display:block; color: var(--teal-dark); margin-top:6px; }
.desk-chip .icn, .desk-tab .icn { width: 17px; height: 17px; margin-right: 1px; }
.three-point .icn { width: 20px; height: 20px; }
.mini-drop span { font-size: var(--fs-13); color: var(--ink-soft); }
.mini-drop__file { margin-top: var(--sp-3); font-size: var(--fs-14); font-weight:600; color: var(--teal-dark); }
/* home step 1: the fields revealed once a notice is attached */
.mini-form { margin-top: var(--sp-5); }
.mini-form[hidden] { display: none; }
.mini-form__lead { font-weight: 600; color: var(--teal-dark); margin-bottom: var(--sp-3); }

/* 3-point outcome preview (stage 2) */
.three-point { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.three-point > div { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); }
.three-point strong { display:block; font-size: var(--fs-13); text-transform:uppercase; letter-spacing:.06em; color: var(--teal-mid); margin-bottom:4px; }
.three-point p { font-size: var(--fs-14); color: var(--ink-soft); }
.dual-matrix { display:flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap:wrap; }
.dual-matrix > div { flex:1 1 200px; display:flex; gap: var(--sp-3); align-items:flex-start; background: var(--paper); border:1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); }
.dual-matrix h5 { font-size: var(--fs-14); color: var(--teal-dark); }
.dual-matrix p { font-size: var(--fs-13); color: var(--ink-soft); }
.resolved-badge { display:inline-flex; align-items:center; gap:8px; margin-top: var(--sp-4); background: var(--tint-green-bg);
  color: var(--tint-green-fg); font-weight:600; font-size: var(--fs-14); padding:8px 16px; border-radius: var(--r-pill); }

/* ================================================================
   B. UPLOAD-FIRST CONSOLE
   ================================================================ */
.console-hero { position:relative; overflow:hidden; padding-block: clamp(2.5rem,5vw,4rem); }
.console-hero__grid { position:relative; z-index:1; display:grid; grid-template-columns: .85fr 1.15fr; gap: var(--sp-8); align-items:center; }
.console-hero h1 { font-family: var(--font-serif); font-weight:500; font-size: clamp(2.2rem,4.8vw,3.2rem); line-height:1.08;
  letter-spacing:-.02em; color: var(--teal-dark); margin: var(--sp-3) 0 var(--sp-4); }
.console-hero h1 em { font-style:italic; color: var(--gold-dark); }
.console-hero__lead { font-size: var(--fs-16); color: var(--ink-soft); }
.console-hero__mini { margin-top: var(--sp-5); display:grid; gap: var(--sp-3); }
.console-hero__mini li { display:flex; gap:10px; align-items:flex-start; font-size: var(--fs-14); color: var(--ink-soft); }
.console-hero__mini b { color: var(--teal-dark); }
.console-hero__mini .icn { width: 19px; height: 19px; flex: none; color: var(--teal-mid); margin-top: 2px; }

/* The product console */
.console { background:#fff; border:1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow:hidden; }
.console__bar { display:flex; align-items:center; gap:8px; padding: 12px var(--sp-5); background: var(--paper-2); border-bottom:1px solid var(--line); }
.console__dot { width:11px; height:11px; border-radius:50%; }
.console__dot--r{background:#e07a63;} .console__dot--y{background:#e0b64f;} .console__dot--g{background:#5fae7a;}
.console__title { margin-left:8px; font-size: var(--fs-13); font-weight:600; color: var(--ink-faint); }
.console__body { display:grid; grid-template-columns: 1fr 1fr; }
.console__upload { padding: var(--sp-6); border-right:1px solid var(--line); }
.console__upload .mini-drop { margin-top:0; }
.console__step { font-size: var(--fs-13); font-weight:600; color: var(--teal-mid); letter-spacing:.06em; text-transform:uppercase; margin-bottom: var(--sp-3); }
.console__output { padding: var(--sp-6); background: var(--paper); }
.console__output h4 { font-family: var(--font-serif); font-size: var(--fs-18); color: var(--teal-dark); margin-bottom: var(--sp-3); }
.console__row { display:flex; gap:10px; padding: 10px 0; border-bottom:1px dashed var(--line); }
.console__row:last-child{border-bottom:none;}
.console__row .k { flex:none; width: 84px; font-size: var(--fs-13); font-weight:700; color: var(--teal-mid); text-transform:uppercase; letter-spacing:.04em; }
.console__row .v { font-size: var(--fs-14); color: var(--ink); }
.console__risk { display:inline-block; margin-top:2px; font-size: var(--fs-13); font-weight:700; padding:2px 10px; border-radius: var(--r-pill); background: #fbe6de; color:#b4482c; }
.console__ghost { color: var(--ink-faint); font-style:italic; font-size: var(--fs-14); }

/* horizontal desk tabs */
.desk-tabs { margin-top: var(--sp-8); }
.desk-tabs__strip { display:flex; flex-wrap:wrap; gap: var(--sp-2); justify-content:center; margin-bottom: var(--sp-5); }
.desk-tab { padding:11px 20px; border-radius: var(--r-pill); border:1.5px solid var(--line); background:#fff; font-weight:600; font-size: var(--fs-14); color: var(--ink-soft); cursor:pointer; transition: all .18s ease; }
.desk-tab:hover { border-color: var(--teal-mid); color: var(--teal-dark); }
.desk-tab.is-active { background: var(--teal); border-color: var(--teal); color:#fff; }
.desk-tabpanel { display:none; }
.desk-tabpanel.is-shown { display:block; animation: fadeUp .35s ease; }
.desk-tabpanel__inner { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-7); box-shadow: var(--sh-sm); }
.desk-tabpanel h3 { font-family: var(--font-serif); font-size: var(--fs-24); color: var(--teal-dark); }
.desk-tabpanel__tag { color: var(--ink-faint); font-size: var(--fs-14); margin:6px 0 var(--sp-4); }
.desk-tabpanel ul { display:grid; gap:10px; }
.desk-tabpanel li { position:relative; padding-left:24px; font-size: var(--fs-14); color: var(--ink-soft); }
.desk-tabpanel li::before { content:""; position:absolute; left:4px; top:7px; width:8px; height:8px; border:2px solid var(--gold); border-radius:50%; }

/* horizontal process strip */
.hstrip { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
.hstrip__item { text-align:center; padding: var(--sp-4); }
.hstrip__num { width:40px; height:40px; margin:0 auto var(--sp-3); border-radius:50%; display:grid; place-items:center;
  background: var(--tint-teal-bg); color: var(--teal-dark); font-family: var(--font-serif); font-weight:600; }
.hstrip__item h4 { font-size: var(--fs-15); color: var(--teal-dark); margin-bottom:4px; }
.hstrip__item p { font-size: var(--fs-13); color: var(--ink-soft); }

/* ================================================================
   C. EDITORIAL LAW-FIRM
   ================================================================ */
.ed-hero { border-bottom:1px solid var(--line); padding-block: clamp(3rem,6vw,5rem); }
.ed-hero__inner { max-width: 900px; }
.ed-hero__kicker { font-size: var(--fs-14); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--teal-mid); }
.ed-hero h1 { font-family: var(--font-serif); font-weight:500; font-size: clamp(2.8rem,7vw,4.6rem); line-height:1; letter-spacing:-.02em;
  color: var(--teal-dark); margin: var(--sp-4) 0; }
.ed-hero h1 em { font-style:italic; color: var(--gold-dark); }
.ed-hero__lead { font-size: var(--fs-20); color: var(--ink-soft); max-width: 42em; }
.ed-hero__cta { display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.ed-hero__meta { display:flex; flex-wrap:wrap; gap: var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top:1px solid var(--line); }
.ed-hero__meta div strong { display:block; font-family: var(--font-serif); font-size: var(--fs-30); color: var(--teal-dark); }
.ed-hero__meta div span { font-size: var(--fs-13); color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }

/* zigzag desk rows */
.zz { border-bottom:1px solid var(--line); }
.zz__row { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items:center; padding-block: var(--sp-8); }
.zz__row:nth-child(even) .zz__visual { order: -1; }
.zz__index { font-family: var(--font-serif); font-size: var(--fs-14); color: var(--gold-dark); letter-spacing:.1em; }
.zz__row h2 { font-family: var(--font-serif); font-weight:500; font-size: clamp(1.8rem,3.4vw,2.4rem); color: var(--teal-dark); margin:8px 0 var(--sp-3); }
.zz__row > div > p { color: var(--ink-soft); font-size: var(--fs-16); margin-bottom: var(--sp-4); }
.zz__list { display:grid; gap:10px; margin-bottom: var(--sp-4); }
.zz__list li { position:relative; padding-left:24px; font-size: var(--fs-15); color: var(--ink-soft); }
.zz__list li::before { content:""; position:absolute; left:4px; top:8px; width:8px; height:8px; border:2px solid var(--gold); border-radius:50%; }
.zz__link { font-weight:600; color: var(--teal-mid); display:inline-flex; align-items:center; gap:6px; }
.zz__visual { aspect-ratio: 4/3; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--teal), var(--teal-dark));
  display:grid; place-items:center; color:#fff; box-shadow: var(--sh-md); position:relative; overflow:hidden; }
.zz__visual .glyph { font-size: 4rem; opacity:.9; }
.zz__visual .icn { width: 74px; height: 74px; stroke-width: 1.3; opacity: .95; }
.zz__visual .tag { position:absolute; bottom: var(--sp-4); left: var(--sp-4); background: rgba(255,255,255,.14); backdrop-filter: blur(4px);
  padding:8px 14px; border-radius: var(--r-pill); font-size: var(--fs-13); font-weight:600; }

/* case-results ledger */
.ledger { padding-block: var(--sp-9); }
.ledger__table { max-width: 920px; margin: var(--sp-7) auto 0; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; background:#fff; }
.ledger__row { display:grid; grid-template-columns: 120px 1fr auto; gap: var(--sp-4); align-items:center; padding: var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line-soft); }
.ledger__row:last-child{border-bottom:none;}
.ledger__row:nth-child(odd){ background: var(--paper); }
.ledger__type { font-size: var(--fs-13); font-weight:700; color: var(--teal-mid); }
.ledger__desc { font-size: var(--fs-15); color: var(--ink); }
.ledger__outcome { font-size: var(--fs-13); font-weight:600; color: var(--tint-green-fg); background: var(--tint-green-bg); padding:5px 12px; border-radius: var(--r-pill); white-space:nowrap; }
.ledger__note { text-align:center; margin-top: var(--sp-4); font-size: var(--fs-13); color: var(--ink-faint); }

/* quotes */
.quotes { background: var(--paper-2); padding-block: var(--sp-9); }
.quotes__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.quote-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-sm); }
.quote-card__mark { font-family: var(--font-serif); font-size: 3rem; line-height:.4; color: var(--gold); opacity:.5; }
.quote-card p { font-size: var(--fs-15); color: var(--ink); margin: var(--sp-3) 0 var(--sp-4); }
.quote-card__who { font-size: var(--fs-13); color: var(--ink-faint); }
.quote-card__who b { display:block; color: var(--teal-dark); font-size: var(--fs-14); }

/* ---- shared responsive for variants --------------------------- */
@media (max-width: 900px){
  .console-hero__grid, .console__body, .desk-tabpanel__inner, .zz__row { grid-template-columns: 1fr; }
  .zz__row:nth-child(even) .zz__visual { order: 0; }
  .console__upload { border-right:none; border-bottom:1px solid var(--line); }
  .three-point, .hstrip, .quotes__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .stage { grid-template-columns: 40px 1fr; gap: var(--sp-3); }
  .stage__node { width:40px; height:40px; font-size: var(--fs-18); }
  .stage__panel { padding: var(--sp-5); }
  .journey__track::before, .journey__fill { left:19px; }
  .three-point, .hstrip, .quotes__grid, .ledger__row { grid-template-columns: 1fr; }
  .ledger__row { gap: 8px; }
  .desk-chip, .desk-tab { padding: 11px 16px; }   /* comfortable tap targets */
  .desk-selector__chips { gap: var(--sp-2); }
  .phero--calm .hero-doc { width: 100%; }
}