/* ============================================================
   WebOS.

   Light and dark are both complete palettes. The rule followed throughout:
   every token gets its value on bare :root first, so no colour exists only
   inside a media query. The dark block redefines tokens under
   prefers-color-scheme guarded against an explicit light choice, and the
   [data-theme] blocks let the toggle win in both directions.

   Sharp corners, hairline borders, one accent. This is an instrument that
   scores your website, so it should look like one.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&display=swap');

:root {
  color-scheme: light;

  --bg:        #fbfaf8;
  --surface:   #ffffff;
  --surface-2: #f4f2ee;
  --ink:       #14110f;
  --muted:     #55504a;
  /* Solved against every ground it lands on rather than picked by eye:
     the previous value read 3.5:1 to 3.9:1 on the surfaces it is used on,
     and this is the smallest text on the page. */
  --faint:     #736e68;
  --line:      rgba(20, 17, 15, .14);
  --line-soft: rgba(20, 17, 15, .08);

  /* Deep Turtle Green as the accent, per the ecosystem design system, where
     green is an accent rather than the interface. */
  --accent:      #0f6b4f;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(15, 107, 79, .10);

  /* The accent, under the name the component library asks for. Declared once
     here as references, so the two dark blocks below need no copy of them.

     The fill is --accent-text rather than --accent, because white on Shell's
     #16c65e measures 2.26:1 (see .btn.primary below); --accent-text is the
     value that survives being filled. */
  --cta:      var(--accent-text, var(--accent));
  --cta-ink:  var(--accent-ink);
  --cta-text: var(--accent-text, var(--accent));

  /* The rest of the contract, under the names the components ask for. This
     file calls its text colour --ink and its second surface --surface-2, so
     the components' var(--text) and var(--bg2) resolved to nothing here and
     fell back to whatever they inherited. It looked right by accident, which
     is the kind of right that stops being right. */
  /* ---- the brand ink palette -------------------------------------------
     crm.css and shell.css build their per-app hue ramp out of --tl-*-ink,
     and those are declared in tl-system.css, which none of the three
     surfaces that use the ramp actually load. So --rb-red and its eight
     siblings resolved to nothing and every app on the Shell fell back to
     the accent green: the plan cards, the app cards and the chips were all
     one colour, and had been since the ramp was written.

     Declared here because webos.css is the file all three load. Values
     mirror tl-system.css exactly; if they ever diverge, the same mark is a
     different colour on two Turtle Labs sites.
     -------------------------------------------------------------------- */
  --tl-crimson-ink: #D80012;
  --tl-red-ink:     #D82E00;
  --tl-amber-ink:   #A55E00;
  --tl-green-ink:   #007F47;
  --tl-cyan-ink:    #00799D;
  --tl-blue-ink:    #006CB4;
  --tl-teal-ink:    #007A61;
  --tl-indigo-ink:  #4B6AAD;
  --tl-violet-ink:  #7C5AA8;

  --text:  var(--ink);
  --bg2:   var(--surface-2);
  --line2: var(--line-soft);

  /* Severity. Hue is constant across themes; only value moves, so a critical
     finding reads as the same thing in both and the contrast holds in both. */
  --critical: #b3261e;
  --high:     #a85a00;
  --medium:   #7a6000;
  --low:      #4a5560;

  /* The prototype's radii, read off its finished screens rather than its
     token block. "Turtle Labs Platform (standalone)" never overrode the
     generator's --radius-sm/md/lg, which are all 0, so an audit of the tokens
     says sharp corners; every card in it is drawn with an inline
     borderRadius:18px or 22px, and the URL field is a 999px pill. The screens
     are the design, so these follow the screens.

     Scaled rather than fixed, matching tl-system.css. The fixed values were
     the prototype's desktop numbers: an 18px corner on a 340px phone card
     reads as a lozenge, and the same corner on a 1600px panel disappears.
     The clamp keeps the prototype's proportion at its own width and holds it
     at every other. */
  --r-xs:   clamp(6px,  0.5vw,  8px);
  --r-sm:   clamp(8px,  0.8vw, 12px);
  --r-md:   clamp(12px, 1.2vw, 18px);
  --r-lg:   clamp(14px, 1.5vw, 22px);
  --r-xl:   clamp(16px, 1.9vw, 28px);
  --r-pill: 999px;
  --radius: var(--r-md);
  --maxw: 1180px;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* The prototype's dark values. Only --faint moves: it specifies #6d6a67,
       which is 3.59:1 on the band and 3.42:1 on a card, and it carries the
       smallest text on the page. */
    --bg:        #0e0e10;
    --surface:   #141416;
    --surface-2: #1a1a1d;
    --ink:       #f3f2f2;
    --muted:     #c9c6c2;
    --faint:     #8f8b87;
    --line:      rgba(255, 255, 255, .12);
    --line-soft: rgba(255, 255, 255, .09);
    --accent:      #3ecf6e;
    --accent-ink:  #08130f;
    --accent-soft: rgba(62, 207, 110, .12);
    --tl-crimson-ink: #E44D59;
    --tl-red-ink:     #FC3600;
    --tl-amber-ink:   #FC9000;
    --tl-green-ink:   #00A25A;
    --tl-cyan-ink:    #00B4EA;
    --tl-blue-ink:    #2F87C2;
    --tl-teal-ink:    #00B08C;
    --tl-indigo-ink:  #6285D2;
    --tl-violet-ink:  #9F76D2;

    --critical: #e8443a;
    --high:     #f5911e;
    --medium:   #f5b74a;
    --low:      #9aa7b4;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0e0e10;
  --surface:   #141416;
  --surface-2: #1a1a1d;
  --ink:       #f3f2f2;
  --muted:     #c9c6c2;
  --faint:     #8f8b87;
  --line:      rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .09);
  --accent:      #3ecf6e;
  --accent-ink:  #08130f;
  --accent-soft: rgba(62, 207, 110, .12);
  --tl-crimson-ink: #E44D59;
  --tl-red-ink:     #FC3600;
  --tl-amber-ink:   #FC9000;
  --tl-green-ink:   #00A25A;
  --tl-cyan-ink:    #00B4EA;
  --tl-blue-ink:    #2F87C2;
  --tl-teal-ink:    #00B08C;
  --tl-indigo-ink:  #6285D2;
  --tl-violet-ink:  #9F76D2;

  --critical: #e8443a;
  --high:     #f5911e;
  --medium:   #f5b74a;
  --low:      #9aa7b4;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; line-height: 1.06; margin: 0 0 14px; }
h1 { font-size: clamp(30px, 5.2vw, 46px); }
h2 { font-size: clamp(22px, 3.2vw, 30px); }
h3 { font-size: 18px; }
p { margin: 0 0 14px; }
a { color: var(--ink); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--surface-2); padding: 2px 6px; border: 1px solid var(--line-soft);
  border-radius: 6px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; }
.band { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-soft); }
.narrow { max-width: 760px; }
.lede { font-size: clamp(16px, 2vw, 18.5px); color: var(--muted); max-width: 66ch; }
.fine { font-size: 13px; color: var(--faint); max-width: 62ch; }
.kicker {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 800; color: var(--accent-text, var(--accent)); margin: 0 0 12px;
}
h1 em { font-style: normal; color: var(--accent-text, var(--accent)); }

/* ---- header ---- */
.head { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.bar { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; margin-right: auto; }
/* The product lockups.

   WebOS and BrandOS have their own marks, both endorsed "Powered by Turtle
   Labs" in the artwork itself, so carrying them is not a departure from the
   shared identity: it is what the shared identity specifies for these two.
   Everything else uses the plain turtle.

   The icon is an image and the wordmark is text, deliberately. The supplied
   lockups set their text in black, which is correct on the light theme and
   invisible on the dark one, and a filter cannot fix that without also
   inverting the coloured icon: the blue shell would come out orange. Text
   takes the theme's colour for nothing. */
.brand-mark {
  display: inline-block; flex: none; width: 30px; height: 30px; align-self: center;
  background-image: url('/assets/logo.webp');
  /* auto 100%, not contain, and it matters: assets/logo.webp is the full
     1353x296 lockup, so contain squeezed the whole turtle-plus-wordmark into
     30 pixels. Scaling to the height and cropping from the left shows the
     turtle alone, which is the treatment tl-system.css uses everywhere else.
     The Shell header was wearing the squeezed version. */
  background-size: auto 100%; background-position: left center; background-repeat: no-repeat;
}
/* The two product icons are square artwork, so they do want containing. */
.brand-mark.brand-webos   { width: 34px; height: 32px; background-size: contain;
  background-image: url('/assets/webos-icon.png'); }
.brand-mark.brand-brandos { width: 34px; height: 32px; background-size: contain;
  background-image: url('/assets/brandos-icon.png'); }
/* "AI" is set lighter in the lockup than the product name beside it. */
.brand-ai { font-weight: 400; letter-spacing: 0; }
.brand-name { font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
.brand-by { font-size: 12px; color: var(--faint); }
#nav { display: flex; align-items: center; gap: 20px; }
#nav a { text-decoration: none; font-size: 14.5px; color: var(--muted); }
#nav a:hover, #nav a.on { color: var(--ink); }
.theme-btn {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font: 600 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 13px; cursor: pointer; border-radius: var(--r-pill);
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink); }
.burger { display: none; }

@media (max-width: 720px) {
  .burger {
    display: grid; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px;
  }
  .burger span { display: block; width: 20px; height: 2px; background: var(--ink); }
  #nav {
    display: none; position: absolute; inset: 64px 0 auto; flex-direction: column;
    align-items: flex-start; gap: 0; background: var(--surface);
    border-bottom: 1px solid var(--line); padding: 8px 20px 16px;
  }
  #nav.open { display: flex; }
  #nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line-soft); }
  .theme-btn { margin-top: 12px; }
}

/* ---- hero and the audit form ---- */
.hero { padding-block: clamp(40px, 7vw, 84px); }
.audit-form {
  display: flex; gap: 12px; align-items: center; margin: 40px 0 10px;
  flex-wrap: wrap; max-width: 640px;
  padding: 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
}
.audit-form input {
  flex: 1 1 240px; min-width: 0; padding: 12px 18px; font: inherit;
  background: none; color: var(--ink); border: 0; border-radius: var(--r-pill);
}
.audit-form input:focus-visible { outline-offset: 0; }
/* Below the pill width the group stops being a pill and becomes two stacked
   controls, because a 999px radius on a full-width block reads as a mistake. */
@media (max-width: 560px) {
  .audit-form { border-radius: var(--r-md); padding: 10px; }
  .audit-form input { flex: 1 1 100%; border-radius: var(--r-sm); background: var(--bg); }
  .audit-form .btn { width: 100%; }
}
/* The button family moved to tl-components.css. It was defined here and
   again in tl-system.css with different padding, so the same button was 40px
   wider on half the sites. --cta / --cta-ink are declared at the top of this
   file, which is what the component reads. */

/* ---- dimension cards ---- */
.dims { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.dim-card {
  background: var(--surface); padding: 24px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
.dim-card h3 { margin: 0 0 6px; font-size: 15.5px; }
.dim-card p { margin: 0; font-size: 14px; color: var(--muted); }

.steps { margin: 0; padding-left: 20px; color: var(--muted); }
.steps li { margin-bottom: 8px; }
.plain { margin: 0 0 16px; padding-left: 20px; color: var(--muted); }
.plain li { margin-bottom: 8px; }

/* ---- build options ---- */
.opts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.opt { border: 1px solid var(--line-soft); padding: 26px; background: var(--surface);
  border-radius: var(--r-lg); }
.opt-label { margin: 0 0 10px; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 800; color: var(--accent); }
.opt h3 { margin: 0 0 10px; }
.opt-line { font-size: 14.5px; color: var(--muted); }
.opt-best { font-size: 13px; color: var(--faint); margin: 0 0 14px; }
.opt form { margin: 0; }

/* ---- the report ---- */
.report-hero h1 { font-size: clamp(22px, 3.4vw, 32px); word-break: break-word; }
.verdict { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 26px 0 22px; }
.big-score {
  display: flex; align-items: baseline; border: 1px solid var(--line-soft);
  padding: 18px 26px; background: var(--surface); border-radius: var(--r-lg);
}
.big-score .n { font-size: 54px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.big-score .of { font-size: 16px; color: var(--faint); margin-left: 3px; }
.verdict-word { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.verdict-line { margin: 0; color: var(--muted); max-width: 46ch; }

.tallies { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0;
  border: 1px solid var(--line-soft); background: var(--surface);
  border-radius: var(--r-md); overflow: hidden; }
.tallies li { padding: 14px 18px; font-size: 13px; color: var(--muted);
  border-right: 1px solid var(--line-soft); flex: 1 1 auto; }
.tallies li:last-child { border-right: 0; }
.tallies span { display: block; font-size: 22px; font-weight: 800; color: var(--ink); }

.dim-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.dim { border: 1px solid var(--line-soft); padding: 22px; background: var(--surface);
  border-radius: var(--r-md); }
.dim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dim-head h3 { margin: 0; font-size: 15.5px; }
.dim-score { margin: 0; font-size: 22px; font-weight: 800; }
.dim-score span { font-size: 12px; color: var(--faint); font-weight: 400; }
.meter { height: 4px; background: var(--line-soft); margin: 10px 0 12px;
  border-radius: var(--r-pill); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); }
.dim[data-score^="1"] .meter span, .dim[data-score="90"] .meter span { background: var(--accent); }
.dim-asks { font-size: 13px; color: var(--faint); margin: 0 0 10px; }
.dim-finds { list-style: none; margin: 0; padding: 0; }
.dim-finds li { font-size: 13.5px; color: var(--muted); padding: 6px 0;
  border-top: 1px solid var(--line-soft); }
.dim-clear { font-size: 13.5px; color: var(--faint); margin: 0; }

.pill {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 7px; border: 1px solid currentColor; margin-right: 8px;
}
.sev-critical { color: var(--critical); }
.sev-high { color: var(--high); }
.sev-medium { color: var(--medium); }
.sev-low { color: var(--low); }

.quick { margin: 0; padding-left: 20px; }
.quick li { margin-bottom: 14px; }
.quick strong { display: block; }
.quick span { font-size: 14px; color: var(--muted); }

.fixes { display: grid; gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); }
.fix { display: flex; gap: 18px; padding: 20px; background: var(--bg); }
.fix-n { font-size: 13px; font-weight: 800; color: var(--faint); flex: none;
  font-variant-numeric: tabular-nums; padding-top: 3px; }
.fix-body { min-width: 0; }
.fix-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.fix-dim, .fix-hours { font-size: 12px; color: var(--faint); }
.fix h3 { margin: 0 0 7px; font-size: 16.5px; }
.fix-detail { font-size: 14.5px; color: var(--muted); margin: 0 0 8px; }
.fix-do { font-size: 14.5px; margin: 0; }
.fix-do strong { color: var(--accent); }

/* ---- pricing ---- */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* The plan cards, from the prototype rather than invented.
   "Turtle Labs Platform (standalone)" draws a card as
   padding:30px; borderRadius:20px; background:#141416; border:1px solid
   rgba(255,255,255,0.09), and draws the one it is recommending as a solid
   fill of the accent with dark ink on it, not as a border. A border says
   "this one is outlined"; a fill says "take this one", which is the job. */
.plan { border: 1px solid var(--line-soft); padding: 30px 28px; background: var(--surface);
  display: flex; flex-direction: column; gap: 4px; border-radius: 20px; position: relative; }
.plan h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; }

/* The recommendation. It used to be the free plan that carried the accent,
   which tells a buyer to take the thing that earns nothing. */
/* Fill and ink must be a pair. --accent is the bright green and
   --accent-ink is white on the light theme, which is the 2.26:1 this file
   already warns about for .btn.primary. --cta / --cta-ink are the pair, and
   checks/kit.js measures them on every surface. */
.plan-featured { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.plan-featured .plan-num,
.plan-featured .plan-desc,
.plan-featured .plan-does li,
.plan-featured .plan-price span { color: var(--cta-ink); opacity: .78; }
.plan-featured .plan-does li::before { color: var(--cta-ink); }
/* On a filled card the primary button has to invert, or it disappears. */
.plan-featured .btn.primary { background: var(--cta-ink); border-color: var(--cta-ink);
  color: var(--cta); }
.plan-featured .btn.primary:hover { filter: brightness(1.35); }
.plan-badge { position: absolute; top: -12px; left: 26px; margin: 0;
  background: var(--cta-ink); color: var(--cta); border-radius: var(--r-pill);
  padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; }
.plan-free-note + .plan-does { margin-top: 6px; }

.plan-num { margin: 0 0 10px; font-size: 11px; letter-spacing: .18em; color: var(--faint); font-weight: 800; }
.plan h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; }
.plan-price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.plan-price span { font-size: 14px; font-weight: 400; color: var(--faint); }
.plan-desc { font-size: 14.5px; color: var(--muted); }
.plan-free-note { font-size: 13.5px; color: var(--accent); }
.plan-does { list-style: none; margin: 0 0 18px; padding: 0; }
.plan-does li { font-size: 13.5px; color: var(--muted); padding: 8px 0;
  border-top: 1px solid var(--line-soft); }
.plan .btn, .plan form { margin-top: auto; }
.plan form { margin-bottom: 0; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding-block: 40px 24px; margin-top: 20px; }
.foot-cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-h { font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--faint); margin: 0 0 12px; }
.foot-cols a { display: block; text-decoration: none; color: var(--muted);
  font-size: 14px; padding: 5px 0; }
.foot-cols a:hover { color: var(--ink); }
.foot-base { border-top: 1px solid var(--line-soft); margin-top: 28px; padding-top: 18px; }
.foot-base p { margin: 0; font-size: 13px; color: var(--faint); }

.cta { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- re-running an audit ----
   The address on a report is editable in place. A first-time visitor mistypes
   a domain or audits the wrong subdomain more often than anything else, and
   the only way back was the browser button and retyping it. */
.reaudit {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  max-width: 640px; margin: 4px 0 24px;
  padding: 7px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
}
.reaudit input {
  flex: 1 1 220px; min-width: 0; padding: 10px 16px; font: inherit; font-size: 14.5px;
  background: none; color: var(--ink); border: 0; border-radius: var(--r-pill);
}
.reaudit .btn { padding: 10px 18px; font-size: 14px; white-space: nowrap; }
@media (max-width: 560px) {
  .reaudit { border-radius: var(--r-md); padding: 10px; }
  .reaudit input { flex: 1 1 100%; background: var(--bg); border-radius: var(--r-sm); }
  .reaudit .btn { width: 100%; }
}

/* Inclusions, marked as inclusions. A list of sentences reads as prose about
   the plan; a tick in front of each reads as a thing you get. */
.plan-includes-h { font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.plan-does li { position: relative; padding-left: 26px; }
.plan-does li::before {
  content: ''; position: absolute; left: 2px; top: 0.62em;
  width: 11px; height: 6px; border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  color: var(--cta-text, var(--cta)); opacity: .9;
}
.plan-featured .plan-includes-h { color: var(--cta-ink); opacity: .75; }
.plan-featured .plan-does li::before { color: var(--cta-ink); }

/* ---- the sample report, on the brand audit page --------------------------
   Shows what four minutes buys, built by running the real scorer over one set
   of answers rather than written by hand to look good.
   ------------------------------------------------------------------------ */
.sample { display: flex; flex-direction: column; gap: 18px; }
.sample-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sample-score { display: flex; align-items: baseline; gap: 2px; flex: none; }
.sample-n { font-family: var(--font-display, 'Archivo', system-ui, sans-serif);
  font-size: clamp(44px, 6vw, 62px); font-weight: 900; line-height: 1;
  letter-spacing: -.03em; color: var(--cta-text, var(--cta)); }
.sample-of { font-size: 16px; font-weight: 700; color: var(--faint); }
.sample-word { margin: 0; font-size: clamp(19px, 2.2vw, 23px); font-weight: 800;
  letter-spacing: -.01em; color: var(--text); }
.sample-line { margin: 4px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; max-width: 52ch; }

.sample-dims { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
@media (min-width: 700px) { .sample-dims { grid-template-columns: 1fr 1fr; gap: 9px 26px; } }
.sample-dims li { display: grid; grid-template-columns: 8.5rem 1fr auto;
  align-items: center; gap: 12px; }
.sample-dim-n { font-size: 13px; font-weight: 700; }
.sample-dim-s { font-size: 13px; font-weight: 800; color: var(--text);
  min-width: 2ch; text-align: right; }
.sample-dims .tl-progress-bar > span { background: var(--tone, var(--cta)); }
@media (max-width: 420px) {
  .sample-dims li { grid-template-columns: 1fr auto; }
  .sample-dims .tl-progress-bar { grid-column: 1 / -1; }
}

.sample-find { border-top: 1px solid var(--line); padding-top: 16px;
  display: flex; flex-direction: column; gap: 7px; }
.sample-find h4 { margin: 0; font-size: 16px; }
.sample-find p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.sample-do strong { color: var(--text); }

/* ---- the report's new blocks ---------------------------------------------
   The insight leads, because a sentence tells you what to do and a score only
   tells you how you did. The metrics carry their targets, because a number on
   its own is a fact and a number beside its target is an instruction.
   ------------------------------------------------------------------------ */
.insight { display: flex; flex-direction: column; gap: 12px; max-width: 74ch; }
.insight p { margin: 0; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.65; color: var(--text); }
.insight p:first-child { font-weight: 600; }

.metrics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; }
@media (min-width: 720px) { .metrics { grid-template-columns: 1fr 1fr; } }
.metric { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
  gap: 14px; padding: 13px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line-soft, var(--line)); }
@media (min-width: 720px) {
  .metric:nth-child(odd) { border-right: 1px solid var(--line-soft, var(--line)); }
}
.metric:last-child, .metric:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.metric-l { font-size: 14px; }
.metric-v { font-size: 15.5px; font-weight: 800; color: var(--critical, #e0524a); white-space: nowrap; }
.metric-t { font-size: 12px; color: var(--faint); white-space: nowrap; }
.metric.is-ok .metric-v { color: var(--cta-text, var(--cta)); }
@media (max-width: 430px) {
  .metric { grid-template-columns: 1fr auto; }
  .metric-t { grid-column: 1 / -1; }
}

/* The threshold the audit's own verdict turns on, marked on every bar. */
.meter { position: relative; }
.meter i { position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--faint); opacity: .55; }

.phase-h { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tone, var(--cta)); }
.phase-list { list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.phase-list li { font-size: 13.5px; line-height: 1.5; color: var(--muted);
  padding-left: 14px; position: relative; }
.phase-list li::before { content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--tone, var(--cta)); }
.phase-more { font-style: italic; opacity: .8; }

/* ---- the path -------------------------------------------------------------
   Seven stages were one column of prose with the price inside a sentence:
   "Strategy - Rs 1,499 a month". A price a reader has to find inside a line of
   text is a price you are apologising for. The number goes where a number
   belongs, and "needs" stays, because the dependency is the whole argument
   for the order.
   ------------------------------------------------------------------------ */
.stage { display: flex; flex-direction: column; gap: 9px; }
.stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stage-n { font-family: var(--font-display, 'Archivo', system-ui, sans-serif);
  font-size: 26px; font-weight: 900; line-height: 1; color: var(--tone, var(--cta)); }
.stage-price { font-size: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.stage-price em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--faint); }
.stage-free .stage-price { color: var(--cta-text, var(--cta)); }
.stage h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.stage-app { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); display: flex; gap: 8px; flex-wrap: wrap; }
.stage-where { color: var(--cta-text, var(--cta)); }

.stage-dl { margin: 4px 0 0; display: grid; gap: 4px 12px; grid-template-columns: auto 1fr; }
.stage-dl dt { font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.stage-dl dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.stage-skip { margin: 6px 0 0; font-size: 12.5px; font-style: italic; color: var(--faint); }

.suite-card { position: relative; display: flex; flex-direction: column; gap: 12px;
  max-width: 720px; }
.suite-price { margin: 0; font-size: clamp(30px, 4vw, 40px); font-weight: 900; letter-spacing: -.02em; }
.suite-price em { font-style: normal; font-size: 14px; font-weight: 600; opacity: .72; }