/* =========================================================================
   WebGrowthCraft — design system
   =========================================================================

   Design brief
   ------------
   The previous project in this family used a cold, technology-blue palette,
   centred heroes and soft glowing panels. This one deliberately does the
   opposite, so the two read as different companies rather than recoloured
   copies of each other:

     Colour     deep forest green carrying the identity, warm bone paper,
                and a single ochre accent used sparingly for the one thing
                that needs attention.
     Type       Space Grotesk headings, which have a drafted, technical
                quality that suits measurement; Public Sans body, which stays
                legible through long explainer sections.
     Structure  left-aligned throughout — no centred heroes. A two-tier header
                with a utility strip. Rules and hairline borders do the work
                that cards and shadows did before.
     Density    flatter and quieter. Fewer shadows, more borders and rules.

   Everything scales from the tokens below. Nothing in the page layer should
   hard-code a colour or a spacing value.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Brand — the Bedazzled Blue family.
     #3d5a80 is the workhorse: it carries buttons, links and headings and holds
     7.06:1 against white. #293241 is the anchor for dark surfaces (footer,
     report bar, mobile panel) at 12.91:1 with white on it. */
  --brand:          #3d5a80;
  --brand-deep:     #33506f;   /* darkened for text on tinted panels */
  --brand-soft:     #4c6b93;   /* hover lifts */
  --brand-tint:     #cfe2ef;   /* hairline borders on tinted panels */
  --brand-wash:     #eaf3f8;   /* the faint section wash */
  --brand-ink:      #293241;   /* the near-black navy */

  /* Accent — Burnt Sienna, used as a signature rather than a text colour.
     The palette's #ee6c4d only reaches 3.05:1 on white, so it is reserved for
     fills that sit under dark navy text (4.23:1) and for rules, markers and
     icons. --accent-deep is the same hue taken far enough down to be readable
     as body text on white (4.96:1). */
  --accent:         #ee6c4d;
  --accent-deep:    #c4452b;
  --accent-tint:    #fdeae4;

  /* Cool pale blue — the tint surface that ties the palette together. */
  --pale:           #e0fbfc;

  /* Surfaces. The palette is cool, so the paper is a very faint blue-white
     rather than the warm bone it replaced. */
  --paper:          #fbfcfd;
  --paper-raise:    #ffffff;
  --paper-sink:     #edf4f8;
  --bone:           #e0fbfc;   /* text on the darkest surfaces */

  /* Ink — navy-tinted neutrals that stay in the same family as the brand. */
  --ink:            #293241;
  --ink-soft:       #46536b;
  --ink-mute:       #61718f;
  --ink-faint:      #8494ab;

  /* Lines */
  --rule:           #dde7ee;
  --rule-strong:    #c3d4e1;
  --rule-dark:      rgba(224, 251, 252, .2);
  --rule-dark-soft: rgba(224, 251, 252, .09);

  /* States */
  --ok:             #1d7d5a;
  --warn:           #b3541e;
  --danger:         #b3382c;

  /* Type */
  --font-head:      'Space Grotesk', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:      'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 5.5rem;  --s10: 7rem;

  /* Shell */
  --wrap:      1180px;
  --wrap-tight: 880px;
  --radius:    .5rem;
  --radius-lg: .9rem;

  --shadow-sm: 0 1px 2px rgba(41, 50, 65, .05);
  --shadow:    0 10px 30px -18px rgba(41, 50, 65, .28);
  --shadow-lg: 0 24px 60px -30px rgba(41, 50, 65, .35);
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Long words in headings and URLs must never force a horizontal scrollbar
     on a narrow phone. */
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.021em;
  color: var(--brand-deep);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.75rem); }
h2 { font-size: clamp(1.65rem, 1.15rem + 2vw, 2.5rem); }
h3 { font-size: clamp(1.19rem, 1.03rem + .64vw, 1.48rem); }
h4 { font-size: 1.06rem; }

p  { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin-bottom: var(--s2); }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

strong { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--accent-tint); color: var(--brand-deep); }

/* -------------------------------------------------------------------------
   3. Fonts (self-hosted, latin subset)
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.wrap--tight { max-width: var(--wrap-tight); }

.section { padding: var(--s9) 0; }
.section--tight { padding: var(--s7) 0; }
.section--sink { background: var(--paper-sink); }
.section--wash { background: var(--brand-wash); }
.section--bone { background: var(--bone); }

.section--rule { border-top: 1px solid var(--rule); }

/* A hairline rail across the top of a section, used sparingly to separate
   major movements without adding another background band. */
.section--rail { border-top: 1px solid var(--rule); }

/* A 12-column grid that collapses without needing per-section media queries. */
.grid { display: grid; gap: var(--s6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Asymmetric editorial split: the copy column is narrower than the support. */
.split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--s8);
  align-items: start;
}

.stack > * + * { margin-top: var(--s5); }
.stack--tight > * + * { margin-top: var(--s3); }

/* -------------------------------------------------------------------------
   5. Typographic components
   ------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--s4);
}

.eyebrow__rule {
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}

.lede {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

.muted { color: var(--ink-mute); }
.small { font-size: .93rem; }
.faint { color: var(--ink-faint); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); }
.prose ul { margin-bottom: var(--s5); }
.prose > *:last-child { margin-bottom: 0; }

/* Section head: eyebrow + title + optional lede, all left-aligned. */
.shead { margin-bottom: var(--s7); max-width: 68ch; }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .eyebrow { justify-content: center; }
.shead--center .lede { margin-inline: auto; }
.shead h2 { margin-bottom: var(--s3); }

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* Labels stay on one line wherever there is room. Below 420px they are
     allowed to wrap, because a wrapped label is better than a page that
     scrolls sideways. */
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, transform .16s ease;
}

.btn__icon { width: 1.05em; height: 1.05em; transition: transform .16s ease; flex: none; }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
  background: var(--brand);
  color: #fff;
}
.btn--primary:hover { background: var(--brand-deep); color: #fff; }

.btn--accent {
  background: var(--accent);
  color: var(--brand-ink);
}
.btn--accent:hover { background: var(--accent-deep); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-wash); }

.btn--onDark {
  background: transparent;
  color: var(--bone);
  border-color: var(--rule-dark);
}
.btn--onDark:hover { background: rgba(224, 251, 252, .1); color: #fff; }

.btn--block { width: 100%; }
.btn--sm { padding: .55rem .95rem; font-size: .9rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}
.textlink:hover { color: var(--accent-deep); }

/* -------------------------------------------------------------------------
   7. Header — two-tier bar with utility strip
   ------------------------------------------------------------------------- */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
}

.sitenav__strip {
  background: var(--brand-deep);
  color: var(--bone);
  font-size: .84rem;
}

.sitenav__stripinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 2.5rem;
  padding-block: .35rem;
}

.sitenav__promise {
  margin: 0;
  color: rgba(224, 251, 252, .82);
  /* The promise is a full sentence; it must not push the strip into two lines
     on a laptop, so it is allowed to shrink and clip rather than wrap. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sitenav__stripmeta {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex: none;
}

.sitenav__metaitem {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(224, 251, 252, .66);
}

.sitenav__metalink {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.sitenav__metalink:hover { color: #ffb4a0; }

.sitenav__bar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.sitenav__barinner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 4.4rem;
}

.sitenav__brand { text-decoration: none; flex: none; }

.brandlock {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--brand-deep);
}
.brandlock--light { color: var(--bone); }
.brandlock__word { white-space: nowrap; }
.brandmark { flex: none; }

.sitenav__nav { margin-left: auto; }

.sitenav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitenav__link {
  display: block;
  padding: .5rem .62rem;
  border-radius: var(--radius);
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.sitenav__link:hover { color: var(--brand); background: var(--brand-wash); }
.sitenav__link.is-current { color: var(--brand-deep); font-weight: 600; }

/* The header CTA duplicates the one inside the mobile panel, so only one is
   ever visible. */
.sitenav__actions { display: flex; align-items: center; gap: var(--s3); flex: none; }
.sitenav__navfoot { display: none; }

.sitenav__toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--brand-deep);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.sitenav__bars { display: grid; gap: 4px; width: 18px; }
.sitenav__bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.sitenav__toggle[aria-expanded='true'] .sitenav__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sitenav__toggle[aria-expanded='true'] .sitenav__bars span:nth-child(2) { opacity: 0; }
.sitenav__toggle[aria-expanded='true'] .sitenav__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */

/* The hero opens on the palette's pale blue rather than the page white, which
   gives the first screen its own identity and lets the report card sit on
   something quieter than pure paper. */
.hero {
  padding: var(--s9) 0 var(--s8);
  background:
    linear-gradient(180deg, var(--pale) 0%, var(--paper) 92%);
  border-bottom: 1px solid var(--rule);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: var(--s8);
  align-items: center;
}

.hero h1 { margin-bottom: var(--s5); }

/* The promise line is the strongest sentence on the page, so it gets weight
   rather than a box. */
.hero__promise {
  font-family: var(--font-head);
  font-size: clamp(1.08rem, 1rem + .52vw, 1.36rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--brand-deep);
  padding-left: var(--s5);
  border-left: 3px solid var(--accent);
  margin: 0 0 var(--s5);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
}

.hero__reassure {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  color: var(--ink-mute);
  margin: var(--s4) 0 0;
}

/* -------------------------------------------------------------------------
   9. Report preview (hero visual)
   ------------------------------------------------------------------------- */

.report {
  background: var(--paper-raise);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px -26px rgba(41, 50, 65, .34);
  overflow: hidden;
}

.report__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem var(--s5);
  background: var(--brand-ink);
  color: rgba(224, 251, 252, .8);
  font-size: .8rem;
  font-family: var(--font-head);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.report__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.report__when { margin-left: auto; color: rgba(224, 251, 252, .55); letter-spacing: 0; text-transform: none; }

.report__body { padding: var(--s5); }

.report__subject {
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--brand-deep);
  margin: 0 0 var(--s4);
}

.report__row {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: .7rem;
  padding: .6rem 0;
  border-top: 1px solid var(--rule);
  font-size: .92rem;
  color: var(--ink-soft);
}
.report__row:first-of-type { border-top: 0; }
.report__row svg { width: 1.15rem; height: 1.15rem; color: var(--ok); margin-top: .18rem; }

.report__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.report__metric { text-align: left; }
.report__metric dt {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .15rem;
}
.report__metric dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand);
}
.report__metric--warn dd { color: var(--warn); }

/* -------------------------------------------------------------------------
   10. Cards, panels, lists
   ------------------------------------------------------------------------- */

.card {
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--brand-tint); box-shadow: var(--shadow-sm); }

.card--flush { padding: 0; overflow: hidden; }
.card--brand {
  background: var(--brand);
  border-color: var(--brand);
  border-top: 3px solid var(--accent);
  color: var(--bone);
}
.card--brand h3, .card--brand h2 { color: #fff; }
.card--wash { background: var(--brand-wash); border-color: var(--brand-tint); }

.card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.card__head h3 { margin: 0; }

/* A number, not an icon, for anything that is genuinely a sequence. */
.card__step {
  font-family: var(--font-head);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-deep);
  background: var(--accent-tint);
  padding: .2rem .55rem;
  border-radius: 6px;
  flex: none;
}

.icon { width: 1.35rem; height: 1.35rem; flex: none; }
.icon--xs { width: 1rem; height: 1rem; }
.icon--tick { width: 1.1rem; height: 1.1rem; color: var(--ok); margin-top: .3rem; }

/* Badge holding an icon at the head of a card. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: var(--brand-wash);
  color: var(--brand);
  border: 1px solid var(--brand-tint);
  flex: none;
}
.badge--accent { background: var(--accent-tint); color: var(--accent-deep); }
.badge--brand { background: var(--brand); color: var(--bone); }

/* Checked list — the recurring "what you get" pattern. */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .65rem;
  align-items: start;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .95rem;
}
.checks li:last-child { border-bottom: 0; }

/* Definition strip for facts. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.facts__item {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .2rem;
}
.facts dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--brand-ink);
}

/* -------------------------------------------------------------------------
   11. Craft loop (the four-stage spine)
   ------------------------------------------------------------------------- */

.loop { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }

.loop__stage {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.loop__step {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  /* Tinted rather than solid so the number reads as an index mark, but at a
     strength that stays legible — an earlier tint was almost invisible. */
  color: var(--brand);
  opacity: .42;
}
/* The opening stage is accented: it is where a reader should start. */
.loop__stage:first-child .loop__step { color: var(--accent-deep); opacity: 1; }

.loop__body h3 { margin-bottom: var(--s2); }
.loop__body p { margin: 0; color: var(--ink-soft); max-width: 62ch; }

.loop__icon {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s2);
}

/* -------------------------------------------------------------------------
   12. Measurement areas
   ------------------------------------------------------------------------- */

.measures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }

.measure {
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.measure:hover { border-color: var(--brand-tint); box-shadow: var(--shadow-sm); }

.measure__top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.measure__top h3 { margin: 0; }
.measure__blurb { color: var(--ink-soft); font-size: .96rem; }

.measure__list { list-style: none; margin: 0; padding: 0; }
.measure__list li {
  display: grid;
  grid-template-columns: 1.05rem 1fr;
  gap: .6rem;
  align-items: start;
  padding: .45rem 0;
  font-size: .92rem;
  color: var(--ink-soft);
}
.measure__list svg { width: 1rem; height: 1rem; color: var(--accent); margin-top: .32rem; }
.measure__top .badge { background: var(--pale); color: var(--brand-deep); border-color: var(--brand-tint); }

/* -------------------------------------------------------------------------
   13. Website-type panels
   ------------------------------------------------------------------------- */

.wtgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }

.wtpanel {
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s5);
}
.wtpanel.is-open { border-color: var(--brand); }

.wtpanel__head { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.wtpanel__titles h3 { margin: 0 0 .2rem; }
.wtpanel__examples { margin: 0; font-size: .85rem; color: var(--ink-faint); }
.wtpanel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--brand-wash);
  color: var(--brand);
  border: 1px solid var(--brand-tint);
  flex: none;
}
.wtpanel__blurb { font-size: .95rem; color: var(--ink-soft); }

.wtpanel__list { list-style: none; margin: 0; padding: 0; }
.wtpanel__list li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .6rem;
  align-items: start;
  padding: .45rem 0;
  font-size: .92rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}
.wtpanel__list li:first-child { border-top: 0; }

/* -------------------------------------------------------------------------
   14. Plans
   ------------------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: start; }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  position: relative;
}
.plan--featured {
  border: 2px solid var(--brand);
  border-top: 4px solid var(--accent);
  box-shadow: 0 20px 46px -28px rgba(41, 50, 65, .38);
}

.plan__flag {
  position: absolute;
  top: -0.78rem;
  left: var(--s5);
  background: var(--accent);
  color: var(--brand-ink);
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .24rem .6rem;
  border-radius: 6px;
}

.plan__name { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--brand-deep); margin: 0; }

.plan__price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: var(--s3) 0 .2rem;
}
.plan__amount {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
}
.plan__period { font-size: .9rem; color: var(--ink-mute); }

.plan__cadence {
  font-size: .82rem;
  color: var(--accent-deep);
  font-weight: 600;
  margin: 0 0 var(--s4);
}

.plan__note {
  font-size: .86rem;
  color: var(--ink-mute);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s4);
}

.plan__includes { list-style: none; margin: 0 0 var(--s5); padding: 0; flex: 1; }
.plan__includes li {
  display: grid;
  grid-template-columns: 1.05rem 1fr;
  gap: .55rem;
  align-items: start;
  padding: .32rem 0;
  font-size: .9rem;
  color: var(--ink-soft);
}
.plan__includes svg { width: 1rem; height: 1rem; color: var(--ok); margin-top: .3rem; }

/* -------------------------------------------------------------------------
   15. Comparisons
   ------------------------------------------------------------------------- */

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }

.compare__item { border-top: 2px solid var(--brand); padding-top: var(--s4); }
.compare__item h3 { font-size: 1.05rem; margin-bottom: var(--s2); }
.compare__item p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   16. FAQ
   ------------------------------------------------------------------------- */

.faqgroup { margin-bottom: var(--s7); }
.faqgroup__title {
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 0;
}

.faq { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--brand-deep);
  line-height: 1.4;
}
.faq__q:hover { color: var(--accent-deep); }
.faq__q svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .25rem; color: var(--ink-faint); transition: transform .18s ease; }
.faq__q[aria-expanded='true'] svg { transform: rotate(180deg); color: var(--accent); }

.faq__a { padding: 0 var(--s6) var(--s5) 0; color: var(--ink-soft); font-size: .96rem; }
.faq__a[hidden] { display: none; }
.faq__a p:last-child { margin-bottom: 0; }

/* Expand-all bar above the question groups. */
.faqbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s5);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--rule-strong);
}
.faqtoggle {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: .5rem .85rem;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
  white-space: nowrap;
}
.faqtoggle:hover { border-color: var(--brand); background: var(--brand-wash); }

/* -------------------------------------------------------------------------
   17. End CTA
   ------------------------------------------------------------------------- */

.endcta { background: var(--brand-deep); color: var(--bone); padding: var(--s8) 0; }
.endcta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: var(--s7);
  align-items: center;
}
.endcta h2 { color: #fff; margin-bottom: var(--s3); }
.endcta p { color: rgba(224, 251, 252, .8); margin: 0; max-width: 56ch; }
.endcta__act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.endcta__secondary { color: rgba(224, 251, 252, .82); font-size: .94rem; }
.endcta__secondary:hover { color: #fff; }
.endcta .btn--ghost { color: var(--bone); border-color: var(--rule-dark); }

/* -------------------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------------------- */

.sitefoot {
  background: var(--brand-ink);
  color: rgba(224, 251, 252, .72);
  padding: var(--s8) 0 var(--s5);
  border-top: 3px solid var(--accent);
}

.sitefoot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--rule-dark);
}

.sitefoot__tagline {
  font-family: var(--font-head);
  font-size: .98rem;
  color: var(--accent);
  margin: var(--s4) 0 var(--s3);
}
.sitefoot__pitch { font-size: .93rem; color: rgba(224, 251, 252, .68); max-width: 40ch; margin: 0; }

.sitefoot__colhead {
  font-family: var(--font-head);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(224, 251, 252, .5);
  margin: 0 0 var(--s3);
}
.sitefoot__col ul { list-style: none; margin: 0; padding: 0; }
.sitefoot__col li { margin-bottom: .45rem; }
.sitefoot__col a { color: rgba(224, 251, 252, .8); text-decoration: none; font-size: .93rem; }
.sitefoot__col a:hover { color: var(--accent); text-decoration: underline; }

.sitefoot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s5);
  font-size: .85rem;
}
.sitefoot__base p { margin: 0; }
.sitefoot__contact { display: inline-flex; align-items: center; gap: .4rem; }
.sitefoot__contact a { color: rgba(224, 251, 252, .82); }
.sitefoot__note { color: rgba(224, 251, 252, .45); }

/* -------------------------------------------------------------------------
   19. Forms
   ------------------------------------------------------------------------- */

.formshell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: var(--s7);
  align-items: start;
}

.formcard {
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s6);
}
.formcard > h2 { margin-bottom: var(--s2); }
.formcard__intro { color: var(--ink-mute); font-size: .94rem; margin-bottom: var(--s5); }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--s6); }
.fieldset:last-of-type { margin-bottom: var(--s4); }

.fieldset__legend {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
  width: 100%;
}

.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.fgrid--full { grid-column: 1 / -1; }

.field { display: block; margin-bottom: var(--s4); }
.field__label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-deep);
  margin-bottom: .35rem;
}
.field__optional { font-weight: 400; color: var(--ink-faint); }

.field input[type='text'],
.field input[type='email'],
.field input[type='url'],
.field select,
.field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .97rem;
  line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 7rem; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(61, 90, 128, .18);
}

.field__hint { display: block; font-size: .83rem; color: var(--ink-faint); margin-top: .3rem; }
.field__error { display: block; font-size: .85rem; color: var(--danger); margin-top: .3rem; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--danger); }
.field--invalid .field__label { color: var(--danger); }

/* Plan picker: cards rather than a plain select, because the choice is
   commercial and the price belongs next to it. */
.plan-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }

.plan-option { position: relative; display: block; }

.plan-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.plan-option__card {
  display: block;
  height: 100%;
  padding: var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.plan-option__card:hover { border-color: var(--brand); }

.plan-option input:checked + .plan-option__card {
  border-color: var(--brand);
  border-width: 2px;
  background: var(--brand-wash);
  padding: calc(var(--s4) - 1px);
}
.plan-option input:focus-visible + .plan-option__card { outline: 3px solid var(--accent); outline-offset: 2px; }

.plan-option__name { display: block; font-family: var(--font-head); font-weight: 700; color: var(--brand-deep); }
.plan-option__price { display: block; font-size: .88rem; color: var(--ink-mute); margin-top: .15rem; }

/* Live panel that reacts to the website-type choice. */
.typepanel {
  margin-top: var(--s3);
  border: 1px solid var(--brand-tint);
  background: var(--brand-wash);
  border-radius: var(--radius);
  padding: var(--s4);
}
.typepanel[hidden] { display: none; }
.typepanel__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: var(--s2);
}
.typepanel__blurb { font-size: .9rem; color: var(--ink-soft); margin: 0 0 var(--s3); }
.typepanel__list { list-style: none; margin: 0; padding: 0; }
.typepanel__list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .5rem;
  align-items: start;
  font-size: .89rem;
  color: var(--ink-soft);
  padding: .28rem 0;
}
.typepanel__list svg { width: .95rem; height: .95rem; color: var(--ok); margin-top: .3rem; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formactions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.formactions__note { font-size: .86rem; color: var(--ink-faint); margin: 0; }

/* Consent checkbox. Sits above the submit button because it gates the action,
   so it should be read before the button is reached rather than after. */
.check {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.check input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  margin: .15rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.check label { cursor: pointer; }
.check--invalid { color: var(--danger); }
.check--invalid input[type='checkbox'] { outline: 2px solid var(--danger); outline-offset: 2px; }

.check .field__error { display: block; margin-top: .35rem; }

.alert {
  border-radius: var(--radius);
  padding: var(--s4);
  margin-bottom: var(--s5);
  font-size: .94rem;
}
.alert--error { background: #fdece9; border: 1px solid #f0c8c1; color: var(--danger); }
.alert--ok { background: #e7f4ef; border: 1px solid #b6dbcd; color: var(--ok); }
.alert ul { margin: var(--s2) 0 0; padding-left: 1.1rem; }
.alert li { margin-bottom: .2rem; }

/* -------------------------------------------------------------------------
   20. Sidebar
   ------------------------------------------------------------------------- */

.formaside { position: sticky; top: 6rem; display: grid; gap: var(--s4); }

.asidecard {
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s5);
}
.asidecard--brand { background: var(--brand); border-color: var(--brand); color: rgba(224, 251, 252, .85); }
.asidecard--brand h3 { color: #fff; }
.asidecard h3 { font-size: 1.02rem; margin-bottom: var(--s3); }
.asidecard p:last-child { margin-bottom: 0; }
.asidecard__list { list-style: none; margin: 0; padding: 0; }
.asidecard__list li {
  display: grid;
  grid-template-columns: 1.05rem 1fr;
  gap: .55rem;
  align-items: start;
  padding: .35rem 0;
  font-size: .9rem;
}
.asidecard__list svg { width: 1rem; height: 1rem; color: var(--accent); margin-top: .3rem; }

/* -------------------------------------------------------------------------
   21. Page furniture
   ------------------------------------------------------------------------- */

.pagehead {
  padding: var(--s7) 0 var(--s6);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.pagehead h1 { margin-bottom: var(--s3); }
.pagehead .lede { margin-bottom: 0; }

.crumbs { font-size: .84rem; margin-bottom: var(--s4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; color: var(--ink-faint); }
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--rule-strong); }
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: .7rem 1rem;
  z-index: 100;
}
.skiplink:focus { left: 0; }

.totop {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  width: 2.75rem;
  height: 2.75rem;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--bone);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 50;
}
.totop.is-visible { display: flex; }
.totop svg { transform: rotate(180deg); }

/* -------------------------------------------------------------------------
   22. Reveal on scroll
   ------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   23. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  /* The strip's promise sentence is the first thing to go — it repeats in the
     hero immediately below, so nothing is lost. */
  .sitenav__promise { display: none; }
  .sitenav__stripinner { justify-content: center; }
}

/* Comfortable step while the inline nav still has room: tighten the gaps and
   trim the CTA's padding before the panel has to take over. */
@media (max-width: 1300px) {
  .sitenav__list { gap: 0; }
  .sitenav__link { padding: .5rem .42rem; font-size: .88rem; }
  .sitenav__actions .btn { padding: .62rem .85rem; font-size: .88rem; }
}

/* Below this width the seven navigation items cannot sit beside the logo and
   the call to action without overflowing, so the panel takes over.
   
   The value is measured, not guessed: at 1400px the bar's three children want
   193 + 661 + 203 = 1057px of content, plus the wrap padding and the internal
   gaps. Once the nav's own 661px is squeezed below its intrinsic width the row
   overflows and the whole page gains a horizontal scrollbar. The effective
   floor is therefore about 1140px of viewport, so the panel starts just above
   it rather than at the round number 960 that the layout cannot actually
   support. */
@media (max-width: 1150px) {
  .sitenav__strip { display: none; }
  .sitenav__toggle { display: inline-flex; }
  .sitenav__actions .btn { display: none; }

  .sitenav__nav {
    position: fixed;
    inset: 4.4rem 0 auto 0;
    background: var(--paper-raise);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow);
    padding: var(--s4) var(--s5) var(--s5);
    margin: 0;
    display: none;
    max-height: calc(100vh - 4.4rem);
    overflow-y: auto;
  }
  .sitenav__nav.is-open { display: block; }

  .sitenav__list { display: block; }
  .sitenav__list li { margin: 0; border-bottom: 1px solid var(--rule); }
  .sitenav__link { padding: .9rem 0; font-size: 1.02rem; border-radius: 0; }

  .sitenav__navfoot { display: block; margin-top: var(--s4); }
  .sitenav__navfoot .btn { width: 100%; }

  .hero__grid, .split, .formshell, .endcta__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { gap: var(--s7); }
  .split { gap: var(--s6); }
  .formaside { position: static; }
  .endcta__act { flex-direction: row; flex-wrap: wrap; align-items: center; }

  .sitefoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measures { grid-template-columns: minmax(0, 1fr); }
  .wtgrid { grid-template-columns: minmax(0, 1fr); }
  .compare { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --s9: 4rem; --s8: 3rem; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-picker { grid-template-columns: minmax(0, 1fr); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .report__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formcard { padding: var(--s5); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .sitefoot__grid { grid-template-columns: minmax(0, 1fr); }

  /* On the narrowest phones the "Menu" word next to the hamburger is what
     pushes the bar past the viewport. The icon alone is unambiguous. */
  .sitenav__toggletext { display: none; }
  .sitenav__toggle { padding: .62rem; }

  .loop__stage { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s4); }
  .loop__step { font-size: 1.5rem; }

  .report__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .endcta__act { flex-direction: column; align-items: stretch; }
  .endcta__act .btn { width: 100%; }
  .formactions { flex-direction: column; align-items: stretch; }
  .formactions .btn { width: 100%; }
}

/* Only below this do long button labels wrap, because the cards are too narrow
   for a single line and a horizontal scrollbar is worse than two lines. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; }
}

/* -------------------------------------------------------------------------
   24. Motion and print
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .sitenav, .sitefoot__grid, .totop, .endcta__act, .formaside { display: none; }
  body { background: #fff; }
  .card, .plan, .measure, .wtpanel, .formcard { box-shadow: none; border-color: #999; }
  a { text-decoration: none; color: #000; }
}