/* ─────────────────────────────────────────────────────────
   Second Nature Partners — The Friction Audit
   Tool-specific UI layered on top of the shared design system.
   ───────────────────────────────────────────────────────── */

body.audit{
  min-height:100vh;
  overflow-x:hidden;
}

/* No-scroll mode: every audit screen fits above the fold, so the page
   itself is a fixed-height surface. Footer stays visible at the bottom
   of the viewport across every step. */
body.audit{
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
body.audit .audit-stage{
  flex:1;
  min-height:0;
}
body.audit .foot{ flex-shrink:0; }
body.audit .nav{
  background:rgba(240,237,232,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:.5px solid rgba(42,37,32,.06);
  transform:none !important;
  opacity:1 !important;
}
body.audit .nav.hidden{ transform:none !important; opacity:1 !important; }

/* Analytical mode — no orb, no atmospheric halo. The audit reads as a
   technical drawing, not a marketing surface — including the results
   screen, which stays as a clean diagnostic sheet. */
body.audit .orb,
body.audit .atmosphere,
body.audit.results-active .orb,
body.audit.results-active .atmosphere{
  opacity:0 !important;
  transition:opacity .9s cubic-bezier(.22,1,.36,1);
}

/* Audit-mode blueprint marks — a single, subtle technical mark anchored
   near the bottom-right of the page so it sits in negative space below
   the question content without ever crossing it. */
body.audit .blueprints{ color:rgba(42,37,32,.36); }
body.audit .bp{ color:rgba(42,37,32,.40); }
body.audit .bp-tr{ display:none; }
body.audit .bp-br{ bottom:92px; right:48px; }

/* ── Audit chrome ──────────────────────────────────────── */
.audit-stage{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  padding-top:100px;
  padding-bottom:24px;
}

/* Top meta — eyebrow + progress, sits below nav */
.audit-meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:0 var(--pad-x);
  margin-bottom:22px;
}
.audit-meta .ident{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:"Courier New", ui-monospace, monospace;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  line-height:1.4;
}
.audit-meta .ident .title{
  font-family:"Courier New", ui-monospace, monospace;
  color:var(--ink);
  font-size:10px;
  letter-spacing:.24em;
  display:flex;
  align-items:center;
  gap:10px;
}
.audit-meta .ident .title::before{
  content:'';
  width:22px; height:.5px;
  background:currentColor;
  opacity:.7;
}
.audit-meta .ident .sub{
  color:var(--ink-45);
  padding-left:32px;
}
.audit-meta .counter{
  font-family:"Courier New", monospace;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
  text-align:right;
  line-height:1.5;
}
.audit-meta .counter .now{ color:var(--ink); }
.audit-meta .counter .amber-dot{
  width:5px; height:5px;
  background:var(--amber);
  display:inline-block;
}

/* Progress rail — drawn as a technical blueprint: a horizontal axis
   with numbered knots (squares) for each step. Reached knots fill with
   amber, current knot is the largest and brightest, distant knots
   sit quietly in light ink. */
.audit-progress{
  position:relative;
  margin:0 var(--pad-x) 56px var(--pad-x);
  height:58px;
  font-family:"Courier New", ui-monospace, monospace;
  color:rgba(42,37,32,.42);
}
.audit-progress .axis{
  position:absolute;
  left:6px; right:6px;
  top:28px;
  height:.5px;
  background:rgba(42,37,32,.22);
}
.audit-progress .axis-fill{
  position:absolute;
  left:6px;
  top:28px;
  height:.5px;
  background:rgba(185,120,28,.85);
  width:0px;
  transition:width .7s cubic-bezier(.22,1,.36,1);
}
.audit-progress .axis-cap-l,
.audit-progress .axis-cap-r{
  position:absolute;
  top:24px;
  width:1px; height:9px;
  background:rgba(42,37,32,.42);
}
.audit-progress .axis-cap-l{ left:0; }
.audit-progress .axis-cap-r{ right:0; }

.audit-progress .knots{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
}
.knot{
  position:relative;
  width:auto;
  min-width:18px;
  text-align:center;
  pointer-events:auto;
  height:62px;
}
/* Labels: hidden in the middle of the run. Only the two endpoints
   (welcome / results) carry architectural reference text. */
.knot .lbl{
  display:none;
  font-family:"Courier New", ui-monospace, monospace;
  font-size:8.5px;
  letter-spacing:.18em;
  line-height:1;
  color:rgba(42,37,32,.55);
  text-transform:uppercase;
  transition:color .35s ease;
  white-space:nowrap;
  padding-top:2px;
}
.knot.endpoint .lbl{ display:block; }
.knot.endpoint.reached .lbl,
.knot.endpoint.current .lbl{ color:var(--amber); }

/* Squares: bare hairline tick by default. Reached knots become a small
   filled amber dot (a passed waypoint). The current knot is a larger
   outlined square with a dimension callout below it — the "you are here"
   marker reads as a section detail in a technical drawing. */
.knot .sq{
  position:absolute;
  left:50%; top:28px;
  width:1px; height:5px;
  margin:-2.5px 0 0 -0.5px;
  border:0;
  background:rgba(42,37,32,.22);
  transition:width .35s ease,
             height .35s ease,
             margin .35s ease,
             border .35s ease,
             background .35s ease,
             box-shadow .35s ease;
}
.knot.reached .sq{
  width:4px; height:4px;
  margin:-2px 0 0 -2px;
  border:0;
  background:rgba(185,120,28,.95);
}
.knot.current .sq{
  width:11px; height:11px;
  margin:-5.5px 0 0 -5.5px;
  border:.8px solid var(--amber);
  background:rgba(246,207,86,.18);
  box-shadow:0 0 0 4px var(--bg);
}

/* Dimension callout — the "you are here" architectural marker that hangs
   below the current knot. Centre is the step label, flanked by tiny tick
   marks like a dimension line in a drafting sheet. */
.knot .now-tag{
  display:none;
  position:absolute;
  top:42px;
  left:50%;
  transform:translateX(-50%);
  font-family:"Courier New", ui-monospace, monospace;
  font-size:8px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--amber);
  white-space:nowrap;
  font-weight:700;
  padding:0 10px;
  line-height:1;
}
.knot .now-tag::before,
.knot .now-tag::after{
  content:'';
  position:absolute;
  top:50%;
  width:6px; height:.5px;
  background:var(--amber);
  opacity:.7;
}
.knot .now-tag::before{ right:100%; margin-right:-2px; }
.knot .now-tag::after{  left:100%;  margin-left:-2px; }
.knot.current .now-tag{ display:block; }
/* On the welcome/results endpoints, suppress the now-tag — the endpoint
   label above the axis already calls out the current position. */
.knot.current.endpoint .now-tag{ display:none; }

/* Connector tick from the current knot down to the dimension callout */
.knot.current .sq::after{
  content:'';
  position:absolute;
  left:50%; top:100%;
  width:.5px; height:8px;
  margin-left:-0.25px;
  background:var(--amber);
  opacity:.55;
}

/* Endpoint knots also get a small downward tick under the axis,
   like the corner pin of a technical drawing. */
.knot .tick-down{
  position:absolute;
  left:50%; top:33px;
  width:1px; height:7px;
  margin-left:-0.5px;
  background:rgba(42,37,32,.42);
  opacity:0;
}
.knot.endpoint .tick-down{ opacity:1; }
.knot.endpoint.reached .tick-down,
.knot.endpoint.current .tick-down{
  background:rgba(185,120,28,.7);
}

/* ── Stage panels — screen layers that swap ───────────── */
.stage-wrap{
  position:relative;
  flex:1;
  padding:0 var(--pad-x);
}
.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),
             transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.screen.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  position:relative;
}
.screen.leave{
  opacity:0;
  transform:translateY(-18px);
  pointer-events:none;
}

/* ── Numbered eyebrow (only used on welcome) ── */
.num-eye{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:18px;
  margin-bottom:28px;
}
.num-eye .num-wrap{
  position:relative;
  display:inline-block;
  min-width:72px;
}
.num-eye .ghost-num{
  font-family:"Outfit",sans-serif;
  font-weight:200;
  font-size:96px;
  line-height:.82;
  letter-spacing:-.04em;
  color:rgba(42,37,32,.05);
  filter:blur(3px);
  display:block;
}
.num-eye .pencil-num{
  position:absolute;
  top:-2px;
  left:10px;
  font-family:'Architects Daughter','Caveat',cursive;
  font-weight:400;
  font-size:20px;
  letter-spacing:.04em;
  color:rgba(42,37,32,.42);
  transform:rotate(-4deg);
  pointer-events:none;
  user-select:none;
  z-index:2;
}
.num-eye .domain-label{
  font-family:"Outfit", sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
  align-self:center;
}

/* ── Generic block layout for each step ──────────────── */
.step{
  max-width:920px;
  margin:0 auto;
  width:100%;
}
.step .prompt{
  margin:0 0 8px 0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:clamp(26px, 3.0vw, 38px);
  line-height:1.08;
  letter-spacing:-.026em;
  color:var(--ink);
  max-width:920px;
  text-wrap:pretty;
}
.step.stage-step .prompt,
.step.team-step .prompt,
.step.question-step .prompt{
  font-size:clamp(22px, 2.4vw, 30px);
}
.step.welcome .prompt{
  font-size:clamp(34px, 4.2vw, 56px);
}
.step .step-eye{
  font-family:"Courier New", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px 0;
}
.step .step-eye::before{
  content:'';
  width:22px;
  height:.5px;
  background:currentColor;
  opacity:.7;
}
.step .step-eye .sep{ color:rgba(42,37,32,.22); }
.step .step-eye .amber-dot{
  width:5px; height:5px; border-radius:50%; background:var(--amber);
  display:inline-block;
}
.step .prompt i{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
}
.step .sub{
  margin:0 0 18px 0;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(14px, 1.3vw, 17px);
  line-height:1.42;
  color:rgba(42,37,32,.62);
  max-width:680px;
}

/* ── Welcome screen specifics ─────────────────────────── */
/* When on the welcome screen, hide the audit chrome (meta strip +
   progress rail) so the welcome itself reads as a clean, fixed-height
   landing surface. The chrome appears from Stage onward. */
body.audit.on-welcome .audit-meta,
body.audit.on-welcome .audit-progress{
  display:none;
}
body.audit.on-results .audit-progress{ display:none; }
body.audit.on-results .audit-meta{ display:none; }
body.audit.on-results .bp-br{ display:none; }
body.audit.on-results .audit-stage{ padding-top:180px; padding-bottom:140px; }

/* Results may run taller than the viewport — let the page scroll. */
body.audit.on-results{
  height:auto;
  min-height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  display:block;
}
body.audit.on-results .audit-stage{ flex:none; }

/* ── Results: section eyebrow ──────────────────────────
   Small "Friction Insights" label above the cost prompt — consistent
   with section eyebrows elsewhere on the site. */
.results-eye{
  font-family:"Outfit", sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 24px 0;
}
.results-eye::before{
  content:'';
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
}

/* ── Results: cost prompt + formula ───────────────────
   The big "Your structural friction is costing you approximately"
   headline lives inside the cost column so it stays on the left and
   doesn't bleed across the friction map on the right. */
.cost-block .cost-prompt{
  margin:0 0 14px 0;
  font-family:"Outfit", sans-serif;
  font-weight:300;
  font-size:clamp(28px, 3.0vw, 40px);
  line-height:1.08;
  letter-spacing:-.024em;
  color:var(--ink);
  max-width:520px;
}
.cost-block .cost-prompt span{ display:block; }
.cost-block .cost-prompt b{
  font-weight:400;
  color:var(--amber);
  letter-spacing:-.022em;
}

/* Formula breakdown — a compact technical readout that explains the
   monthly cost in operator math, so the number doesn't feel pulled
   from thin air. */
.cost-formula{
  margin-top:32px;
  padding-top:20px;
  border-top:.5px solid var(--rule);
}
.cost-formula .formula-eye,
.starting-point .formula-eye{
  font-family:"Courier New", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.cost-formula .formula-eye::before,
.starting-point .formula-eye::before{
  content:'';
  width:24px; height:1px;
  background:currentColor;
  opacity:.85;
}
.cost-formula .formula-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  margin-bottom:14px;
  font-family:"Outfit", sans-serif;
}
.cost-formula .f-token{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
  padding:2px 0;
}
.cost-formula .f-token b{
  font-weight:400;
  font-size:18px;
  color:var(--ink);
  letter-spacing:-.012em;
}
.cost-formula .f-token span{
  font-family:"Courier New", ui-monospace, monospace;
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin-top:2px;
}
.cost-formula .f-op,
.cost-formula .f-equals{
  font-family:"Outfit", sans-serif;
  font-weight:200;
  font-size:18px;
  color:var(--ink-45);
  padding:0 4px;
}
.cost-formula .f-equals{ color:var(--amber); padding:0 6px; }
.cost-formula .f-result b{ color:var(--amber); }
.cost-formula .formula-note{
  margin:0;
  font-family:"Outfit", sans-serif;
  font-weight:300;
  font-size:13px;
  line-height:1.6;
  color:rgba(42,37,32,.58);
  max-width:480px;
}

/* ── Results: "Where to start" callout ──────────────── */
.starting-point{
  margin-top:32px;
  padding-top:20px;
  border-top:.5px solid var(--rule);
}
.starting-point .start-line{
  margin:0;
  font-family:"Outfit", sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  max-width:480px;
}
.starting-point .start-line b{
  font-weight:500;
  color:var(--amber);
}

/* ── Results: delicate CTA ─────────────────────────────
   Frosted glass pill — translucent, blurred, ink-on-paper. */
.cta-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Outfit", sans-serif;
  font-weight:400;
  font-size:14.5px;
  letter-spacing:-.005em;
  color:var(--ink);
  padding:12px 22px;
  border:.5px solid rgba(42,37,32,.18);
  border-radius:999px;
  background:rgba(255,253,248,.45);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(42,37,32,.04),
    0 1px 2px rgba(42,37,32,.04);
  text-decoration:none;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.cta-link:hover{
  background:rgba(255,253,248,.7);
  border-color:rgba(185,120,28,.45);
  color:var(--amber);
  transform:translateY(-1px);
}
.cta-link .arr{
  display:inline-block;
  transition:transform .25s ease;
  color:var(--amber);
}
.cta-link:hover .arr{ transform:translateX(4px); }

/* Cost block: prompt + figure + caption flow as a single column with
   tight rhythm; the friction map on the right reads as a paired column. */
body.audit.on-results .cost-block .monthly{
  margin-top:8px;
  font-size:clamp(48px, 5.8vw, 84px);
  letter-spacing:-.04em;
}

/* Lighter visual weight on the friction map so a row of mostly-4/4 bars
   doesn't feel like a wall of amber. */
body.audit.on-results .bar .track{ height:3px; background:rgba(42,37,32,.06); }
body.audit.on-results .bar .fill{ background:rgba(185,120,28,.70); }
body.audit.on-results .bar{ gap:4px 24px; }
body.audit.on-results .fmap .bar-list{ gap:22px; }
body.audit.on-welcome .audit-stage{
  padding-top:140px;
  padding-bottom:48px;
  min-height:calc(100vh - 90px); /* nav height-ish */
  justify-content:center;
}
body.audit.on-welcome .stage-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.welcome{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
  max-width:880px;
  margin:0 auto;
}
.welcome .welcome-eye{
  font-family:"Outfit",sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:0 0 28px 0;
  white-space:nowrap;
}
.welcome .welcome-eye::before{
  content:'';
  width:28px;
  height:1.5px;
  background:currentColor;
  opacity:.85;
}
.welcome .prompt{
  max-width:1000px;
  font-size:clamp(30px, 3.6vw, 46px);
  line-height:1.08;
  margin-bottom:8px;
}
.welcome .prompt .line{
  display:block;
  line-height:0.98;
}
.welcome .prompt .line + .line{ margin-top:-4px; }
.welcome .pencil-rule{
  display:block;
  width:min(360px, 50vw);
  height:14px;
  margin:14px auto 22px;
  color:var(--ink);
  opacity:.42;
}
.welcome .lede{
  max-width:620px;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  margin:0 auto 28px auto;
}
.welcome .lede i{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
}
.welcome .email-row{
  margin:0 auto 12px auto;
  max-width:460px;
}
.welcome .email-row input{
  text-align:center;
  padding:10px 4px;
  font-size:15px;
}
.welcome .email-note{
  text-align:center;
  margin-bottom:24px;
}
.welcome .btn-row{
  justify-content:center;
  margin-top:0;
}
.welcome .btn-primary{
  padding:14px 32px;
}

.req-star{
  color:var(--amber);
  font-family:"Outfit", sans-serif;
  font-weight:500;
  font-size:11px;
  margin-right:4px;
  vertical-align:1px;
}

.email-row{
  display:flex;
  align-items:stretch;
  gap:14px;
  max-width:560px;
  margin-bottom:24px;
}
.email-row input{
  flex:1;
  background:transparent;
  border:0;
  border-bottom:.5px solid rgba(42,37,32,.32);
  padding:14px 4px;
  font-family:"Outfit",sans-serif;
  font-size:16px;
  font-weight:300;
  color:var(--ink);
  letter-spacing:-.005em;
  transition:border-color .25s ease;
  outline:none;
}
.email-row input::placeholder{
  color:rgba(42,37,32,.32);
  font-weight:300;
  font-family:"Outfit",sans-serif;
}
.email-row input:focus{
  border-bottom-color:rgba(185,120,28,.85);
}

.email-note{
  font-family:"Courier New", monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin-bottom:48px;
}

/* ── CTA buttons ──────────────────────────────────────── */
.btn-row{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:24px;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--ink);
  color:var(--cream);
  border-radius:40px;
  padding:16px 36px;
  font-family:"Outfit", sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.01em;
  border:0;
  cursor:pointer;
  transition:opacity .25s ease, transform .25s ease;
}
.btn-primary:hover{ opacity:.88; transform:translateY(-1px); }
.btn-primary:disabled{
  opacity:.32;
  cursor:not-allowed;
  transform:none;
}
.btn-primary .arr{ display:inline-block; transition:transform .25s ease; }
.btn-primary:hover:not(:disabled) .arr{ transform:translateX(4px); }

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Outfit",sans-serif;
  font-size:12px;
  font-weight:400;
  letter-spacing:.05em;
  color:var(--ink-soft);
  text-transform:uppercase;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:8px 0;
  transition:color .2s ease;
}
.btn-ghost:hover{ color:var(--ink); }
.btn-ghost.invisible{ visibility:hidden; }
.btn-ghost .arr{ display:inline-block; transform:rotate(180deg); }

/* ── Choice grid (revenue / team / scale) ──────────────
   Tighter, more analytical — feels closer to a form row than a card. */
.choice-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px 12px;
  max-width:640px;
  margin-bottom:14px;
}
.choice-grid.cols-1{ grid-template-columns:1fr; max-width:560px; }
.choice-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
.choice-grid.flow-col-3{ grid-template-rows:repeat(3, auto); grid-auto-flow:column; }
.choice-grid.flow-col-4{ grid-template-rows:repeat(4, auto); grid-auto-flow:column; }

.choice{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 16px;
  background:transparent;
  border:.5px solid rgba(42,37,32,.18);
  border-radius:2px;
  cursor:pointer;
  text-align:left;
  transition:border-color .2s ease, background .2s ease;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:13.5px;
  color:var(--ink);
  letter-spacing:-.004em;
}
.choice:hover{
  border-color:rgba(42,37,32,.40);
  background:rgba(42,37,32,.025);
}
.choice.selected{
  border-color:rgba(185,120,28,.85);
  background:rgba(246,207,86,.07);
}
.choice.selected::after{
  content:'';
  position:absolute;
  top:50%; right:14px;
  width:5px; height:5px;
  margin-top:-2.5px;
  background:var(--amber);
}
.choice .marker{
  font-family:"Courier New", monospace;
  font-size:9px;
  letter-spacing:.20em;
  color:var(--ink-45);
  text-transform:uppercase;
  flex-shrink:0;
  width:22px;
}
.choice .label-text{ flex:1; }
.choice .hint{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:13px;
  color:rgba(42,37,32,.45);
  letter-spacing:.002em;
  padding-right:18px;
}

/* ── Scale slider — 0–4 architectural friction scale ──
   A single horizontal axis with five stop knots. The user clicks
   anywhere on the line to pick a value; the path fills in amber as
   they move right. Reads like a pencil-drawn measurement scale. */
.scale-wrap{
  margin:36px 0 16px 0;
  max-width:720px;
}
.scale-slider{
  position:relative;
}
.scale-anchors{
  display:flex;
  justify-content:space-between;
  font-family:"Courier New", ui-monospace, monospace;
  font-size:9px;
  font-weight:600;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:14px;
}
.scale-anchors .anchor-r{ text-align:right; }
.scale-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  height:66px;
}
.scale-track .track-line{
  position:absolute;
  left:10%; right:10%;
  top:14px;
  height:.5px;
  background:rgba(42,37,32,.32);
}
.scale-track .track-fill{
  position:absolute;
  left:10%;
  top:14px;
  height:.5px;
  background:var(--amber);
  width:0;
  transition:width .4s cubic-bezier(.22,1,.36,1);
}
.scale-track .track-cap{
  position:absolute;
  top:10px;
  width:.8px; height:9px;
  background:rgba(42,37,32,.42);
}
.scale-track .track-cap-l{ left:10%; margin-left:-0.4px; }
.scale-track .track-cap-r{ right:10%; margin-right:-0.4px; }

.scale-track .stop{
  position:relative;
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  color:var(--ink-soft);
  transition:color .25s ease;
  font-family:"Courier New", ui-monospace, monospace;
}
.scale-track .stop .stop-mark{
  position:relative;
  z-index:2;
  margin-top:11px;
  width:6px; height:6px;
  border:.5px solid rgba(42,37,32,.45);
  background:var(--bg);
  transition:all .3s ease;
}
.scale-track .stop .stop-num{
  margin-top:14px;
  font-size:11px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink-soft);
  transition:color .25s ease, font-weight .25s ease;
}
.scale-track .stop .stop-label{
  position:absolute;
  top:54px;
  left:50%;
  transform:translateX(-50%);
  font-family:"Courier New", ui-monospace, monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--amber);
  white-space:nowrap;
  padding:0 8px;
  background:var(--bg);
  line-height:1;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:2;
}
/* Cross-reference marker — vertical leader from above to the label.
   The label sits at the foot of the leader, like a callout tag on a
   technical drawing. (Horizontal crosshair through the label was
   suppressed — it cut visually through the text.) */
.scale-track .stop .stop-label::before{
  content:none;
}
.scale-track .stop .stop-label::after{
  content:'';
  position:absolute;
  left:50%;
  top:-14px;
  height:12px;
  width:.5px;
  margin-left:-0.25px;
  background:var(--amber);
  opacity:0;
  transition:opacity .25s ease;
}
.scale-track .stop.current .stop-label{ opacity:1; }
.scale-track .stop.current .stop-label::after{ opacity:.55; }
.scale-track .stop:hover .stop-mark{
  border-color:var(--amber);
  background:rgba(246,207,86,.10);
}
.scale-track .stop.passed .stop-mark{
  width:5px; height:5px;
  margin-top:11.5px;
  border:0;
  background:rgba(185,120,28,.95);
}
.scale-track .stop.current .stop-mark{
  width:13px; height:13px;
  margin-top:7.5px;
  border:.9px solid var(--amber);
  background:rgba(246,207,86,.20);
  box-shadow:0 0 0 4px var(--bg);
}
.scale-track .stop.current .stop-num{
  color:var(--amber);
  font-weight:700;
}
.scale-track .stop.passed .stop-num{ color:rgba(185,120,28,.85); }

/* ── Footer navigation row ───────────────────────────── */
.nav-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:12px;
  max-width:720px;
}

/* ── Results screen ──────────────────────────────────── */
.results{
  max-width:1180px;
  margin:0 auto;
  width:100%;
}
.results-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:end;
  margin-top:8px;
}
.cost-block{
  position:relative;
  padding-right:24px;
}
.cost-block .cost-eye{
  font-family:"Courier New", monospace;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.cost-block .cost-eye::before{
  content:''; width:24px; height:1px; background:currentColor; opacity:.85;
}
.cost-block .monthly{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-weight:200;
  font-size:clamp(64px, 8.2vw, 124px);
  line-height:.92;
  letter-spacing:-.045em;
  color:var(--ink);
}
.cost-block .monthly-unit{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:.38em;
  letter-spacing:.002em;
  color:rgba(42,37,32,.45);
  margin-left:4px;
  vertical-align:0.42em;
}
.cost-block .annual{
  margin:18px 0 0 0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:18px;
  letter-spacing:-.01em;
  color:var(--ink-soft);
}
.cost-block .annual b{
  font-weight:400;
  color:var(--ink);
}
.cost-block .annual i{
  font-family:"Outfit",sans-serif;
  font-style:normal;
  font-weight:300;
}
.cost-block .cost-tag{
  margin-top:24px;
  padding-top:18px;
  border-top:.5px solid var(--rule);
  font-family:"Outfit",sans-serif;
  font-style:normal;
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  color:rgba(42,37,32,.62);
  max-width:420px;
}

/* Friction map */
.fmap{
  position:relative;
}
.fmap .fmap-eye{
  font-family:"Courier New", monospace;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.fmap .fmap-eye::before{
  content:''; width:24px; height:1px; background:currentColor; opacity:.85;
}
.fmap .score-readout{
  margin:0 0 28px 0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:20px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.fmap .score-readout b{
  font-weight:400;
  color:var(--amber);
}
.fmap .bar-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.bar{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:6px 24px;
}
.bar .domain{
  font-family:"Outfit", sans-serif;
  font-weight:400;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.bar .score{
  font-family:"Courier New", monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink-soft);
}
.bar .track{
  grid-column:1 / -1;
  position:relative;
  height:6px;
  background:rgba(42,37,32,.08);
  border-radius:0;
  overflow:hidden;
}
.bar .fill{
  position:absolute;
  left:0; top:0; bottom:0;
  background:rgba(185,120,28,.85);
  width:0%;
  transition:width 1.2s cubic-bezier(.22,1,.36,1);
}
.bar.flagged .domain::after{
  content:' · flagged';
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:13px;
  letter-spacing:.002em;
  text-transform:none;
  color:var(--amber);
  margin-left:4px;
}

/* Results narrative */
.results-narrative{
  margin-top:64px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  padding-top:48px;
  border-top:.5px solid var(--rule);
}
.results-narrative h4{
  margin:0 0 12px 0;
  font-family:"Outfit",sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:10px;
}
.results-narrative h4 .amber-dot{
  width:5px; height:5px; border-radius:50%; background:var(--amber);
}
.results-narrative p{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.78;
  color:rgba(42,37,32,.82);
}
.results-narrative p i{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
}

/* CTA at bottom of results */
.results-cta{
  margin-top:24px;
  padding-top:0;
  border-top:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.results-cta .pitch{
  margin:0;
  font-family:"Outfit",sans-serif;
  font-style:normal;
  font-weight:300;
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.32;
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:780px;
}
.results-cta .actions{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.results-cta .sent{
  font-family:"Courier New", monospace;
  font-size:10px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--ink-45);
}
.results-cta .sent b{
  color:var(--ink);
  font-weight:400;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 980px){
  .audit-stage{ padding-top:96px; }
  .audit-meta, .audit-progress, .stage-wrap{ padding-left:24px; padding-right:24px; }
  .scale-row{ grid-template-columns:1fr; gap:8px; }
  .scale-cell{ flex-direction:row; justify-content:flex-start; gap:18px; padding:16px 20px; }
  .scale-cell .pt{ font-size:24px; }
  .scale-cell .pt-label{ max-width:none; text-align:left; }
  .choice-grid, .choice-grid.cols-3, .choice-grid.flow-col-3, .choice-grid.flow-col-4{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; }
  .results-grid{ grid-template-columns:1fr; gap:48px; }
  .results-narrative{ grid-template-columns:1fr; gap:32px; }
  .step .prompt{ font-size:clamp(28px,5.4vw,40px); }
}