:root {
  --ink: #23261e;
  --muted: #676a5b;
  --paper: #f7f7f2;
  --surface: #ffffff;
  --line: #e0e0d3;
  --teal: #4d6b33;
  --teal-dark: #3a5226;
  --mint: #e9f0dc;
  --lime: #e5b93c;
  --coral: #c4633a;
  --warning: #fbf0d8;
  --shadow: 0 10px 30px rgba(35, 38, 30, .09);
  --radius: 12px;
  --font-body: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo Narrow", "Avenir Next Condensed", "Helvetica Neue Condensed", "Arial Narrow", Impact, sans-serif;
}

/* The shared engine stylesheet loads after this file and sets a typeface and a
   handful of literal colours of its own. These rules take them back with one
   extra level of specificity, which is what keeps three sites on the same
   engine from looking like the same site.

   The token names below are inherited from the engine and are not all literal
   any more — `--teal` is this site's moss green. Renaming them is an engine-side
   change and is deliberately not made here. */

html body { font-family: var(--font-body); }
html .brand,
html h1, html h2, html h3,
html .result-title,
html .result-number,
html .result-badge,
html .footer-column h2 { font-family: var(--font-display); }
html .brand { letter-spacing: .01em; font-weight: 700; text-transform: uppercase; }
html h1, html h2, html h3 { letter-spacing: -.01em; font-weight: 700; }
html h1 { font-size: clamp(2.2rem, 7vw, 4rem); }
html .result-number { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
html .result-badge { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
html .kicker, html .eyebrow { letter-spacing: .16em; font-weight: 700; font-size: .74rem; }
html .formula { font-variant-numeric: tabular-nums; }
html table { font-variant-numeric: tabular-nums; }
html .curve-list strong { font-variant-numeric: tabular-nums; }

/* Squarer cards and a flatter brand mark: the engine's default is rounder and
   more tilted than this site wants. */
html .brand-mark { border-radius: 8px; transform: none; background: var(--teal); color: var(--lime); }
html .tool-link { border-radius: var(--radius); min-height: 0; padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; border-left: 3px solid var(--mint); }
html .tool-link:hover { transform: none; border-left-color: var(--teal); box-shadow: var(--shadow); }
html .tool-link span { order: 3; margin-top: .7rem; font-size: .82rem; letter-spacing: .04em; }
html .tool-link h3 { order: 1; }
html .tool-link p { order: 2; margin: 0; }
html .partner-card { border-radius: var(--radius); }
html .button { border-radius: 10px; font-weight: 700; letter-spacing: .01em; }
html .nav-toggle, html input, html select, html textarea { border-radius: 10px; }
html .grade-table-wrap, html .data-table-wrap { border-radius: var(--radius); }
html .formula, html .example { border-radius: var(--radius); }
html .example { border-radius: 0 var(--radius) var(--radius) 0; }
html .hero::after { display: none; }

html label { color: #3b4034; }
html input, html select, html textarea { background: #fcfcf8; border-color: #c9cbb8; color: var(--ink); }
html input:focus, html select:focus, html textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(77, 107, 51, .14); }
html .remove { color: #9c4a2c; }
html .add-button { background: var(--mint); border-color: var(--teal); color: var(--teal-dark); }
html .result.success { border-top-color: var(--teal); background: #f6f9ef; }
html .result.warning { border-top-color: #c08a24; background: var(--warning); }
html .content-wrap { background: #eeeee4; }
html .content-card p, html .content-card li { color: #4a4f42; }
html .note-list li { color: #4a4f42; }
html .example { background: #fdf5ec; border-left-color: var(--coral); }
html .partner-wrap { background: #f1f2e9; }
html .site-footer p { color: #c3c6b6; }
html .footer-column a { color: #ebece1; }
html .footer-legal p { color: #9ea294; }
html .trust-row span { border-radius: 8px; }

/* Amounts on this site carry no currency symbol, so the unit is spelled out in
   the field label instead. */
.unit { font-weight: 500; font-size: .82em; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* The URL builder's output sits in the tool card rather than the result panel:
   a link to copy is not a headline figure, and it belongs beside the fields
   that produced it. */
.utm-output { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.utm-output-label { font-size: .88rem; font-weight: 700; color: #3b4034; }
.utm-output textarea {
  width: 100%; min-height: 88px; resize: vertical; padding: .7rem .8rem;
  border: 1.5px solid #c9cbb8; background: #fcfcf8; color: var(--ink);
  font: 600 .95rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.copy-button {
  justify-self: start; min-height: 46px; padding: .6rem 1.15rem; cursor: pointer;
  border: 0; border-radius: 10px; background: var(--teal); color: #ffffff;
  font-weight: 700; letter-spacing: .02em;
}
.copy-button:hover { background: var(--teal-dark); }
.copy-button[disabled] { background: #b6bba9; cursor: not-allowed; }

.funnel-rows { display: grid; }
/* Long URLs and campaign values must not push the result panel sideways. */
.wrap-any { word-break: break-all; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; line-height: 1.6; }
a { color: inherit; }
button, input, select { font: inherit; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; background: var(--ink); color: white; padding: .75rem 1rem; z-index: 100; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }

.site-header { background: rgba(251,250,245,.95); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.04em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--teal); color: var(--lime); border-radius: 11px; font-size: .9rem; transform: rotate(-3deg); }
.nav-toggle { border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 10px; padding: .55rem .8rem; font-weight: 700; }
.site-nav { display: none; position: absolute; top: 69px; left: 0; right: 0; background: var(--surface); padding: 1rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.site-nav.open { display: grid; }
.site-nav a { padding: .65rem .85rem; text-decoration: none; border-radius: 9px; font-weight: 600; font-size: .94rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--mint); color: var(--teal-dark); }

.hero { padding: 3.25rem 0 2rem; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; width: 220px; height: 220px; border: 36px solid var(--lime); border-radius: 50%; right: -130px; top: 5px; opacity: .45; z-index: -1; }
.breadcrumb { color: var(--muted); font-size: .88rem; margin-bottom: 1.2rem; }
.breadcrumb a { text-decoration: none; }
.kicker, .eyebrow { margin: 0 0 .5rem; color: var(--teal); font-size: .78rem; line-height: 1.3; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
h1, h2, h3 { font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; line-height: 1.15; letter-spacing: -.04em; }
h1 { font-size: clamp(2.35rem, 8vw, 4.75rem); max-width: 850px; margin: 0 0 1rem; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.65rem); margin: 0 0 1rem; }
h3 { font-size: 1.15rem; }
.lede { max-width: 690px; color: var(--muted); font-size: clamp(1rem, 2.5vw, 1.18rem); margin: 0; }
.trust-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.trust-row span { background: white; border: 1px solid var(--line); border-radius: 999px; padding: .45rem .75rem; font-size: .85rem; font-weight: 600; }

.tool-layout { display: grid; gap: 1.25rem; align-items: start; padding-bottom: 4.5rem; }
.calculator-card, .result, .content-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.calculator-card { padding: clamp(1.1rem, 4vw, 2rem); box-shadow: var(--shadow); }
.card-head { margin-bottom: 1.4rem; }
.card-head h2 { font-size: 1.45rem; margin-bottom: .35rem; }
.card-head p { margin: 0; color: var(--muted); }
.fields { display: grid; gap: 1rem; }
label { display: grid; position: relative; gap: .4rem; color: #35474e; font-size: .88rem; font-weight: 700; }
input, select { width: 100%; min-height: 52px; background: #fcfcfa; color: var(--ink); border: 1.5px solid #becbc6; border-radius: 11px; padding: .7rem .8rem; font-size: 1.05rem; font-weight: 600; }
input:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,107,98,.1); outline: 0; }
.suffix { position: absolute; right: .85rem; bottom: .8rem; color: var(--muted); }
.data-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; align-items: end; padding: 1rem 0; border-top: 1px solid var(--line); }
.data-row:first-child { border-top: 0; padding-top: 0; }
.remove { grid-column: 1 / -1; justify-self: start; border: 0; padding: .25rem 0; color: #a13e31; background: transparent; font-size: .82rem; font-weight: 700; cursor: pointer; }
.add-button { width: 100%; margin-top: .7rem; padding: .75rem; border: 1.5px dashed var(--teal); color: var(--teal-dark); background: #f4fbf8; border-radius: 11px; font-weight: 800; cursor: pointer; }
.add-button:hover { background: var(--mint); }
.result { padding: clamp(1.2rem, 4vw, 2rem); border-top: 6px solid var(--teal); min-height: 160px; }
.result.success { border-top-color: #2b9e6e; background: #f5fcf8; }
.result.warning { border-top-color: #e4a32c; background: var(--warning); }
.result p { margin: .5rem 0 0; }
.result-title { font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.result-number { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; font-size: clamp(2.7rem, 9vw, 4.5rem); line-height: 1; font-weight: 800; letter-spacing: -.05em; }
.grade-badge, .result-badge { display: inline-flex; align-items: center; min-height: 38px; background: var(--lime); color: var(--ink); padding: .3rem .65rem; border-radius: 10px; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; font-size: .9rem; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.content-wrap { background: #eef5f1; padding: 4.5rem 0; }
.content-grid { display: grid; gap: 1.25rem; }
.content-card { padding: clamp(1.2rem, 4vw, 2rem); }
.content-card p, .content-card li { color: #43565e; }
.formula { overflow-x: auto; background: var(--ink); color: white; border-radius: 13px; padding: 1.1rem 1.2rem; font: 600 .92rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.example { border-left: 5px solid var(--coral); background: #fff8f4; padding: 1rem 1.15rem; border-radius: 0 12px 12px 0; }
.faq { border-top: 1px solid var(--line); padding: 1rem 0; }
.faq:first-of-type { border-top: 0; }
.faq h3 { margin: 0 0 .4rem; }
.faq p { margin: 0; }

.grade-table-wrap, .data-table-wrap { overflow-x: auto; margin-top: 1.5rem; max-height: 520px; border: 1px solid var(--line); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; text-align: right; }
th { position: sticky; top: 0; background: var(--ink); color: white; }
th, td { padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
tr.active td { background: var(--lime); font-weight: 800; }

.tools-section { padding: 4.5rem 0; }
.tools-grid { display: grid; gap: 1rem; }
.tool-link { display: block; min-height: 170px; padding: 1.3rem; border: 1px solid var(--line); border-radius: 18px; background: white; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.tool-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tool-link span { color: var(--teal); font-weight: 800; }
.tool-link p { color: var(--muted); }
.home-hero { padding: clamp(4rem, 10vw, 7.5rem) 0 5rem; }
.home-hero h1 { max-width: 950px; }
.home-hero .accent { color: var(--teal); position: relative; }
.home-hero .accent::after { content: ""; position: absolute; height: 12px; left: 0; right: 0; bottom: 2px; background: var(--lime); z-index: -1; transform: rotate(-1deg); }
.home-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; padding: .7rem 1rem; background: var(--teal); color: white; text-decoration: none; font-weight: 800; }
.button.secondary { background: white; color: var(--ink); border: 1px solid var(--line); }
.site-footer { background: var(--ink); color: white; padding: 2.5rem 0 1.75rem; }
.footer-inner { display: flex; flex-direction: column; gap: 2rem; }
.site-footer p { color: #bdc9cc; margin: 0; }
.footer-brand { max-width: 320px; }
.footer-columns { display: grid; gap: 1.75rem; }
.footer-column { display: grid; gap: .5rem; align-content: start; }
.footer-column h2 { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--lime); margin: 0 0 .25rem; }
.footer-column a { color: #e7edee; text-decoration: none; font-size: .92rem; }
.footer-column a:hover { text-decoration: underline; }
.footer-legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.14); }
.footer-legal p { font-size: .82rem; color: #97a6aa; max-width: 70ch; }

/* Body-copy links must read as links: internal linking is only worth
   something if visitors can see it. */
.content-card p a, .content-card li a, .doc-body a, .faq p a { color: var(--teal-dark); text-underline-offset: 3px; font-weight: 600; }

.note-list { margin: 0; padding-left: 1.15rem; display: grid; gap: .7rem; }
.note-list li { color: #43565e; }
.curve-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .1rem; }
.curve-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.curve-list span { color: var(--muted); font-size: .9rem; }
.curve-list strong { font-weight: 800; white-space: nowrap; }

.reference-layout { padding-bottom: 4.5rem; }
.reference-layout .calculator-card { padding: clamp(1.1rem, 4vw, 2rem); box-shadow: var(--shadow); }
.scale-table, .reference-table { text-align: left; }
.scale-table td:first-child, .reference-table td:first-child { width: 30%; }

.tools-all { margin: 1.5rem 0 0; font-weight: 700; }
.tools-all a { color: var(--teal-dark); text-underline-offset: 3px; }
.doc-wrap .content-card + .content-card { margin-top: 1.25rem; }
.doc-body { max-width: 72ch; }
.doc-body h2 { font-size: clamp(1.3rem, 3.5vw, 1.75rem); margin-top: 2rem; }
.doc-body > h2:first-child, .doc-body > p:first-child { margin-top: 0; }

/* Affiliate module. Deliberately below the result and the explanation, styled
   as a quiet aside rather than an ad unit. */
.partner-wrap { border-top: 1px solid var(--line); background: #f6f8f6; padding: 3rem 0; }
.partner-head { max-width: 68ch; margin-bottom: 1.5rem; }
.partner-note { margin: 0; color: var(--muted); font-size: .9rem; }
.partner-note a { color: var(--teal-dark); }
.partner-grid { display: grid; gap: 1rem; }
.partner-card { display: block; padding: 1.2rem; background: white; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; }
.partner-card:hover { border-color: var(--teal); }
.partner-card h3 { margin: .35rem 0 .5rem; }
.partner-card p { margin: 0; color: var(--muted); font-size: .94rem; }
.partner-cat { color: var(--teal); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }

@media (min-width: 720px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; position: static; box-shadow: none; padding: 0; border: 0; background: transparent; }
  .site-nav a { padding: .45rem .55rem; font-size: .78rem; }
  .fields.two { grid-template-columns: repeat(2, 1fr); }
  .fields.three { grid-template-columns: repeat(3, 1fr); }
  .remove { grid-column: auto; padding: .8rem .2rem; }
  .data-row { grid-template-columns: 1fr 1fr 70px; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .content-grid { grid-template-columns: 1fr 1fr; }
  .content-card.wide { grid-column: 1 / -1; }
  .data-row.three { grid-template-columns: 1fr 1fr 1fr 70px; }
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: start; gap: 3rem; }
  .footer-columns { grid-template-columns: repeat(3, minmax(140px, auto)); gap: 2.5rem; }
}

@media (min-width: 960px) {
  .tool-layout { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); }
  .result { position: sticky; top: 96px; }
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .site-nav a { padding-inline: .7rem; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
@media print { .site-header, .site-footer, .nav-toggle, .add-button, .remove, .tools-section, .partner-wrap, .skip-link { display: none !important; } body { background: white; } .hero { padding-top: 1rem; } .result { position: static; } .grade-table-wrap, .data-table-wrap { max-height: none; } }