/* RenewalTracker — brand colors from the logo: blue #0061A4, green #74BF44, slate #5F7379. Typeface: Plus Jakarta Sans. */

/* Plus Jakarta Sans, served from this site (public/fonts, SIL Open Font License: public/fonts/OFL.txt) so
   visitors' browsers never contact Google Fonts. One variable file per character set covers weights 400–800. */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Brand colors, taken from the logo (site/public/images/logo.svg) */
  --blue: #0061a4;             /* logo brackets — primary: buttons, links (6.5:1 on white) */
  --blue-hover: #004e85;
  --blue-soft: #e8f1f8;
  --green: #74bf44;            /* logo arrow and "tracker" — accents, icons, dark sections (not text on white) */
  --green-ink: #3e7e1c;        /* darker logo green for green text on white (5.0:1) */
  --green-ink-hover: #326816;
  --green-soft: #eef7e8;
  --slate: #5f7379;            /* logo "renewal" — secondary text (5.0:1) */
  /* Neutrals and dark surfaces, tinted from the brand blue */
  --ink: #0f2233;
  --ink-2: #3a4b57;
  --muted: #5f7379;
  --line: #dde6ec;
  --bg: #ffffff;
  --tint: #f4f8fb;
  --navy: #072a44;             /* deep brand blue for dark sections */
  --navy-2: #0a3a5e;
  --amber: #b26a00;
  --red: #b4361f;
  --rating-red: #ff492c;       /* rating-card red, matches its thumbs-up icon — stars only, never text (3.4:1, graphics) */
  --radius: 14px;
  --shadow: 0 1px 2px rgb(7 42 68 / 6%), 0 6px 24px rgb(7 42 68 / 8%);
  --shadow-lg: 0 2px 6px rgb(7 42 68 / 9%), 0 24px 60px rgb(7 42 68 / 20%);
  --wrap: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-hover); }
h1, h2, h3, .h2, .h3 { line-height: 1.15; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 750; }
h3, .h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; margin-inline: auto; }
.center { text-align: center; }
.industry-more { margin-top: 36px; }
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.faq-jump a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; }
.faq-jump a:hover { border-color: var(--blue); }
.faq-jump ~ h2 { margin-top: 1.6em; scroll-margin-top: 90px; }
.glance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.glance-grid > div { padding: 20px 22px; border-radius: var(--radius); background: var(--tint); border-left: 4px solid var(--green); }
.glance-grid dt { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.1; color: var(--blue); }
.glance-grid dd { margin: 6px 0 0; color: var(--ink); }
@media (max-width: 900px) { .glance-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .glance-grid { grid-template-columns: 1fr; } }
.cs-note { margin: 12px 0 0; font-size: .9rem; font-style: italic; color: var(--slate); }
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; }
.facts-grid div { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.facts-grid dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.facts-grid dd { margin: 4px 0 0; font-weight: 700; color: var(--ink); }
@media (max-width: 760px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
.industry-group { margin-top: 28px; }
.industry-group-title { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: 12px; }
.industry-more h3 { font-size: 1.5rem; font-weight: 800; }
.muted { color: var(--muted); }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; }
.center .lead, .lead.center, .section-head .lead { margin-inline: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--green-ink); margin-bottom: .8em; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  background: var(--blue); color: #fff; border: 2px solid var(--blue);
  padding: .75em 1.3em; border-radius: 10px; font-weight: 650; text-decoration: none; line-height: 1.1; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--blue); border-color: rgb(0 97 164 / 40%); }
.btn-ghost:hover { background: var(--blue-soft); color: var(--blue-hover); border-color: var(--blue); }
.btn-light { background: var(--green); border-color: var(--green); color: var(--navy); }
.btn-light:hover { background: #86cf5a; border-color: #86cf5a; color: var(--navy); }
.btn-ghost-light { color: #fff; border-color: rgb(255 255 255 / 35%); background: transparent; }
.btn-ghost-light:hover { background: rgb(255 255 255 / 8%); color: #fff; border-color: rgb(255 255 255 / 60%); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0 1.2em; }
.center .cta-row, .cta-band .cta-row { justify-content: center; }
/* Three buttons (trial, demo, quote) fit on one line in the narrow hero column. */
.hero-grid .cta-row { gap: 8px; }
.hero-grid .cta-row .btn { padding-left: .85em; padding-right: .85em; font-size: .95rem; }
.link-quiet { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }

/* Header */
/* Header (Jeff, 2026-11-06): row 1 is a larger logo and Log in; row 2 is the menu and the three calls to action.
   The header is pinned with a negative top equal to row 1's height, so row 1 scrolls away and the menu row stays. */
.site-header { --top-row: 68px; position: sticky; top: calc(-1 * var(--top-row)); z-index: 50; background: rgb(255 255 255 / 92%); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header-top { display: flex; align-items: center; justify-content: space-between; height: var(--top-row); gap: 24px; }
.header-main { border-top: 1px solid var(--line); }
.header-main > .wrap { display: flex; min-height: 58px; }
.brand { flex: none; display: block; }
.brand img { width: 300px; height: auto; }
.header-login { padding: .5em 1.1em; font-size: .9rem; }
.nav-login { display: none; }
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.burger { display: none; }
.primary { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 26px; }
.nav { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav > li { display: flex; align-items: center; }
.nav > li > details { display: flex; }
.nav a, .nav summary { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 16px; cursor: pointer; } /* whole-pixel line: every label starts on the same pixel row (Jeff, 2026-11-05) */
.nav > li > a, .nav summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; white-space: nowrap; }
.nav a:hover, .nav summary:hover, .nav [aria-current="page"] { color: var(--blue); }
.has-sub { position: relative; }
.has-sub summary { list-style: none; }
.has-sub summary::-webkit-details-marker { display: none; }
.has-sub summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .15s; }
.has-sub details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.has-sub ul { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 14px); left: -16px; min-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.has-sub li a { display: block; padding: 9px 12px; border-radius: 8px; }
.has-sub .menu-groups { position: absolute; top: calc(100% + 14px); left: -260px; z-index: 60; width: min(860px, calc(100vw - 48px)); columns: 3; column-gap: 8px; padding: 16px 12px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.menu-group { break-inside: avoid; padding-bottom: 12px; }
.menu-group p { margin: 0 12px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.has-sub .menu-group ul { position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.has-sub .menu-group li a { padding: 6px 12px; font-size: .92rem; line-height: 1.3; }
.menu-all { display: block; column-span: all; padding: 10px 12px 0; border-top: 1px solid var(--line); margin-top: 2px; font-size: .92rem; }
.has-sub li a small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: 1px; }
.has-sub li a:hover { background: var(--tint); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: .6em .95em; font-size: .9rem; }
.btn-soft { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-soft); }
.btn-soft:hover { background: #d6e7f4; border-color: #d6e7f4; color: var(--blue-hover); }
.nav-toggle:focus-visible ~ .header-top .burger { outline: 3px solid var(--green); outline-offset: 2px; }
@media (max-width: 1080px) {
  /* One row: logo and menu button. The menu opens below the header. */
  .site-header { --top-row: 64px; top: 0; }
  .header-main { border: 0; }
  .header-main > .wrap { min-height: 0; }
  .header-login { display: none; }
  .nav-login { display: inline-flex; }
  .brand img { width: 230px; }
  .burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 10px; }
  .burger span { width: 24px; height: 3px; background: var(--ink); border-radius: 2px; }
  .primary { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 12px 24px 24px; gap: 12px; box-shadow: var(--shadow); max-height: calc(100vh - var(--top-row)); overflow: auto; }
  .nav-toggle:checked ~ .header-main .primary { display: flex; }
  .nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav > li { display: block; }
  .nav > li > a, .nav summary { display: flex; height: auto; padding: 12px 0; font-size: 1.05rem; }
  .nav > li > details { display: block; }
  .has-sub ul { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
  .has-sub .menu-groups { position: static; width: auto; columns: auto; padding: 0 0 6px 12px; border: 0; box-shadow: none; }
  .menu-group { padding-bottom: 0; }
  .menu-group p { margin: 10px 12px 2px; }
  .has-sub .menu-group ul { padding: 0; }
  .menu-all { display: block; border: 0; margin: 4px 0 0; }
  .nav-cta { flex-wrap: wrap; }
}

.crumbs { font-size: .86rem; color: var(--muted); padding-top: 18px; }
.crumbs a { color: var(--muted); }

/* Heroes */
.hero { padding: 64px 0 56px; background: radial-gradient(1200px 400px at 80% -10%, var(--green-soft), transparent 70%), linear-gradient(180deg, var(--tint), #fff); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.hero-grid > div:only-child { grid-column: 1 / -1; max-width: 840px; }
.hero-img { width: 100%; mix-blend-mode: multiply; }
.hero-img.rounded { mix-blend-mode: normal; }
.rounded { border-radius: var(--radius); }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 0; color: var(--ink-2); font-weight: 600; font-size: .93rem; }
/* Bullet icons: Green Check.png and Red X.png (Robert, 2026-11-10; site/docs/image-sources.md) */
.hero-points li::before { content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .45em; vertical-align: -.1em; background: url(/images/green-check.png) center / contain no-repeat; }

.hero-dark { position: relative; overflow: hidden; color: #dfe9ee; padding: 80px 0 96px;
  /* Broad, low-opacity glows with several stops so they fade with no visible edge, over a gentle navy-to-navy-2 sweep.
     The text side (left) stays darkest. Worst-case contrast: white 10.9:1, lead 7.3:1, green eyebrow 4.8:1. */
  background:
    radial-gradient(ellipse 80% 90% at 95% 5%, rgb(116 191 68 / 12%) 0%, rgb(116 191 68 / 6%) 35%, rgb(116 191 68 / 0%) 70%),
    radial-gradient(ellipse 90% 100% at 0% 100%, rgb(0 97 164 / 28%) 0%, rgb(0 97 164 / 12%) 40%, rgb(0 97 164 / 0%) 75%),
    linear-gradient(125deg, var(--navy) 0%, var(--navy) 40%, var(--navy-2) 100%);
  background-color: var(--navy); }
.hero-dark h1 { color: #fff; }
.hero-dark .lead { color: #c6d6e2; }
.hero-dark .eyebrow { color: var(--green); }
.hero-dark .hero-points { color: #c3d2da; }
.hero-visual { position: relative; }
.hero-visual .mock-email { position: absolute; right: -18px; bottom: -40px; width: 300px; }

/* Trust bar + proof */
.trust { padding: 36px 0 30px; background: #fff; text-align: center; }
.trust-line { color: var(--ink); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 0 auto 16px; }
@media (min-width: 1000px) { .trust-line { white-space: nowrap; } }
.trust-line a { color: inherit; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.trust-line a:hover { color: var(--blue); }
.see-all { margin: 0; font-size: 1.1rem; font-weight: 700; text-align: center; }
.see-all a { color: var(--blue); }
.see-all-below { margin-top: 28px; }
.card-link { margin: 12px 0 0; font-weight: 700; }
.guide-cards .more { font-size: clamp(.8rem, 1.15vw, .9rem); white-space: nowrap; }
@media (max-width: 1000px) { .guide-cards .more { font-size: .9rem; white-space: normal; } }
.proof { padding: 56px 0; background: #fff; }
.trust + .proof { padding-top: 20px; } /* one block with the trust line above it (Jeff, 2026-11-06) */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; }
.proof-grid + .proof-grid { margin-top: 36px; }
.proof-grid > div { border-left: 3px solid var(--green); padding: 4px 0 4px 18px; }
.proof dt { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.proof dd { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; }
.proof dd a { display: block; font-size: .82rem; font-weight: 600; color: var(--green-ink); text-decoration: none; margin-top: 4px; }

/* Sections */
.section { padding: 88px 0; }
.section.tint { background: var(--tint); }
.section.dark { background: var(--navy); color: #c3d2da; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section > .wrap > h2:first-child { margin-bottom: .7em; }
.answer { max-width: 880px; margin: 0 auto; text-align: center; }
.answer p { font-size: 1.12rem; color: var(--ink-2); }

.grid { display: grid; gap: 22px; }
.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)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.card p:last-child { margin-bottom: 0; }
.card h3 { margin-bottom: .4em; }
/* Industry pages, "The problem": the closing statement, larger and bold so it stands out and fills its card */
.problem-callout { display: flex; align-items: center; border-left: 5px solid var(--green); }
.problem-callout p { color: var(--ink); font-size: clamp(1.2rem, 1.9vw, 1.45rem); font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.link-card { display: block; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.link-card:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow-lg); color: inherit; }
.more { font-weight: 650; color: var(--blue); text-decoration: none; display: inline-block; margin-top: .5em; }
.cs-card img { border-radius: 10px; margin-bottom: 16px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.persona h3::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--green); margin-bottom: 14px; }

.feature-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; padding: 40px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row.reverse > :first-child { order: 2; }
.feature-row .lead { font-size: 1.08rem; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 1.5em; }
.center .chips, .chips.center { justify-content: center; }
.chips li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4em 1em; font-weight: 600; font-size: .93rem; }

.checks, .xlist { list-style: none; padding: 0; margin: 0 0 1em; }
.checks li, .xlist li { position: relative; padding-left: 1.8em; margin: .5em 0; }
.checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.1em; height: 1.1em; background: url(/images/green-check.png) center / contain no-repeat; }
.xlist li::before { content: ""; position: absolute; left: 0; top: .25em; width: 1em; height: 1em; background: url(/images/red-x.png) center / contain no-repeat; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.steps li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: var(--green); font-weight: 800; margin-bottom: 14px; }

.quote blockquote { margin: 0 0 .8em; font-size: 1.05rem; color: var(--ink); }
.quote figcaption { color: var(--muted); font-weight: 600; margin-bottom: .6em; }
.quote-feature { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.quote-feature blockquote { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--ink); margin: 0 0 16px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: .4em 0; color: var(--ink-2); }
.stats strong { color: var(--green-ink); font-size: 1.15em; }
.stats.big strong { font-size: 1.6em; }
.tags { font-size: .85rem; color: var(--muted); margin: 0; }

/* Product mocks */
.mock { background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid rgb(15 29 38 / 10%); font-size: 13px; line-height: 1.4; color: var(--ink); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #eef2f4; border-bottom: 1px solid var(--line); }
.mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfd6da; }
.mock-bar em { margin-left: 10px; font-style: normal; font-size: 11px; color: var(--muted); background: #fff; border-radius: 6px; padding: 2px 10px; }
.mock-app { padding: 14px; }
.mock-top { display: flex; justify-content: space-between; align-items: center; background: var(--blue); color: #fff; margin: -14px -14px 12px; padding: 9px 14px; font-size: 12px; }
.mock-search { background: rgb(255 255 255 / 18%); border-radius: 6px; padding: 3px 10px; color: #e6eef6; }
.mock-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 10px; }
.mock-tabs span { background: var(--tint); border: 1px solid var(--line); border-radius: 6px; padding: 5px 4px; text-align: center; font-size: 10.5px; color: var(--ink-2); }
.mock-tabs b { display: block; font-size: 15px; color: var(--ink); }
.mock-tabs .t-past { border-color: #f1c7bd; background: #fdf1ee; }
.mock-tabs .t-past b { color: var(--red); }
.mock-tabs .t-soon { border-color: #f1dcb4; background: #fdf7ea; }
.mock-tabs .t-soon b { color: var(--amber); }
.mock-tabs .t-all { background: var(--green-soft); border-color: #cfe7c0; }
.mock-table { width: 100%; border-collapse: collapse; }
.mock-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.mock-table td { padding: 8px; border-bottom: 1px solid #f0f3f5; white-space: nowrap; }
.mock-table tr:last-child td { border-bottom: 0; }
.m-muted { color: var(--muted); }
.due { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-style: normal; }
.due-past { background: #fde8e3; color: var(--red); }
.due-soon { background: #fdf1d9; color: var(--amber); }
.due-mid { background: #e8f0fa; color: var(--blue); }
.due-later { background: #eef2f4; color: var(--ink-2); }
.due-done { background: var(--green-soft); color: var(--green-ink); }
.st { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: #9aa7ae; }
.st-remitted::before { background: var(--blue); }
.st-renewed::before { background: var(--green); }
.st-onhold::before { background: var(--amber); }
.mock-compact .mock-tabs span:nth-child(n+5) { display: none; }
.mock-compact .mock-tabs { grid-template-columns: repeat(4, 1fr); }

.mock-email { background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid rgb(15 29 38 / 10%); padding: 16px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.mock-email .e-from { color: var(--muted); font-size: 11.5px; margin: 0 0 4px; }
.mock-email .e-subj { font-weight: 700; margin: 0 0 10px; font-size: 14px; }
.mock-email ul { list-style: none; margin: 0 0 12px; padding: 0; }
.mock-email li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #f0f3f5; }
.mock-email .e-btn { display: inline-block; background: var(--green-ink); color: white; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 6px; }

.viz { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.viz-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.viz-timeline::before { content: ""; position: absolute; left: 40px; right: 40px; top: 39px; height: 3px; background: linear-gradient(90deg, #cfd8dc, var(--amber), var(--red), var(--green)); border-radius: 2px; }
.tl-step { text-align: center; position: relative; }
.tl-dot { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #cfd8dc; margin: 0 auto 10px; position: relative; }
.tl-step.warn .tl-dot { border-color: var(--amber); }
.tl-step.hot .tl-dot { border-color: var(--red); }
.tl-step.ok .tl-dot { border-color: var(--green); background: var(--green); }
.tl-step b { display: block; font-size: .95rem; }
.tl-step small { color: var(--muted); font-size: .8rem; line-height: 1.3; display: block; }
.viz-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-col { background: var(--tint); border-radius: 10px; padding: 14px; display: grid; gap: 8px; font-size: .88rem; }
.g-col b { font-size: .95rem; }
.g-col span { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; color: var(--ink-2); }
.viz-security { display: flex; flex-wrap: wrap; gap: 10px; }
.sec-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--tint); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: .92rem; }
.sec-pill::before { content: "🔒"; font-size: .85em; }
.shot { border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }

/* Pricing */
.plan { display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--blue); position: relative; }
.plan.featured::before { content: "Most popular"; position: absolute; top: -13px; left: 24px; background: var(--blue); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.price { font-size: 1.05rem; margin: .2em 0 0; }
.price strong { font-size: 2.8rem; color: var(--ink); letter-spacing: -.03em; }
.plan-cta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; }
.includes { margin-top: 40px; }

/* Comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.compare th, .compare td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { background: var(--tint); font-size: .88rem; }
.compare thead th:nth-child(3), .compare td:nth-child(3) { background: var(--green-soft); font-weight: 650; }
.compare tr:last-child > * { border-bottom: 0; }

/* Subprocessors tables: same column widths in every section */
.wrap.prose.sub-page { max-width: 1080px; }
.sub-page h2 { margin-top: 1.6em; }
.sub-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; font-size: .95rem; }
.sub-table th, .sub-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sub-table thead th { background: var(--tint); font-size: .85rem; }
.sub-table tbody th { font-weight: 650; color: var(--ink); }
.sub-table tr:last-child > * { border-bottom: 0; }
.sub-page .table-wrap + p { margin-top: 14px; color: var(--ink-2); font-size: .95rem; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-weight: 650; padding: 16px 36px 16px 0; position: relative; list-style: none; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; color: var(--green-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); margin: 0 0 18px; }

/* Calculator */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.calc > .card { display: flex; flex-direction: column; }
.calc fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; flex: 1; align-content: space-between; }
.calc label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.calc label small { font-weight: 400; color: var(--muted); }
.calc input { font: inherit; padding: 10px 12px; border: 1px solid #cfd8dc; border-radius: 10px; width: 100%; }
.calc input:focus { outline: 3px solid var(--blue-soft); border-color: var(--blue); }
.calc select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #cfd8dc; border-radius: 10px; width: 100%; max-width: 280px; background: #fff; }
.calc select:focus { outline: 3px solid var(--blue-soft); border-color: var(--blue); }
.calc-row { display: flex; align-items: center; gap: 14px; }
.calc-row input[type=number] { flex: 0 0 112px; width: 112px; }
.calc input.calc-slider { flex: 1 1 auto; min-width: 0; width: auto; padding: 0; border: 0; height: 28px; accent-color: var(--blue); cursor: pointer; background: none; }
.calc input.calc-slider:focus { outline: none; }
.calc-side { display: grid; gap: 18px; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.calc-actions .btn { font: inherit; font-weight: 650; cursor: pointer; }
.calc-how { padding: 0; }
.calc-how p { margin: 0 0 .6em; }

.calc-notes { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-top: 28px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); font-size: .88rem; color: var(--slate); }
.calc-notes h2 { font-size: 1rem; margin-bottom: .3em; }
.calc-notes p { margin: 0 0 .8em; }
.calc-sources { margin: 0; padding-left: 1.4em; display: grid; gap: .6em; }
.calc-sources li:target { background: var(--blue-soft); }
.calc-ref { font-size: .7em; margin-left: 2px; }
.calc-ref a { text-decoration: none; font-weight: 700; }
.calc-result dt small { display: block; font-size: .82rem; color: #9fb2bc; font-weight: 400; }
.calc-result { background: var(--navy); color: #c3d2da; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-lg); }
.calc-result h2 { color: #fff; font-size: 1.2rem; }
.calc-result .calc-savings-title { margin-top: 4px; }
.calc-result .big.calc-cost { color: #fff; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.calc-result #r-save { font-size: clamp(2.4rem, 5.5vw, 3.4rem); }
.calc-breakeven { color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.45; margin: 18px 0 18px; padding: 12px 16px; border-left: 4px solid var(--green); border-radius: 8px; background: rgb(255 255 255 / 8%); }
.calc-breakeven p { margin: 0; }
.calc-ctas { margin: 0; }
/* Three centered rows (Jeff, 2026-11-06): keep the estimate · next steps · contact us. */
.calc-ctas > p { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 10px; }
.calc-ctas .btn { padding: .7em .95em; font-size: .95rem; }
.calc-ctas .calc-contact { margin: 4px 0 0; }
.calc-ctas .calc-contact a { color: rgb(255 255 255 / 85%); text-decoration: underline; text-underline-offset: 2px; font-size: .95rem; }
.calc-ctas .calc-contact a:hover { color: var(--green); }
.calc-result .calc-extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; }
.calc-extra > div { background: rgb(255 255 255 / 8%); border-radius: 8px; padding: 10px 12px; }
.calc-result .calc-extra dt { font-size: .78rem; font-weight: 600; color: #c3d2da; }
.calc-result .calc-extra dd { margin: 2px 0; font-size: 1.35rem; font-weight: 800; color: #fff; text-align: left; }
.calc-extra small { display: block; font-size: .78rem; color: #9fb2bc; line-height: 1.35; }
@media (max-width: 560px) { .calc-result .calc-extra { grid-template-columns: 1fr; } }
/* The plan row on the cost calculator: the only software cost; every other line is people's time (Jeff, 2026-11-05). */
.calc-result dt.calc-plan, .calc-result dd.calc-plan { background: rgb(116 191 68 / 16%); margin: 2px 0; padding: 8px 10px; }
.calc-result dt.calc-plan { border-left: 4px solid var(--green); border-radius: 8px 0 0 8px; color: #fff; font-weight: 700; }
.calc-result dd.calc-plan { border-radius: 0 8px 8px 0; color: var(--green); font-weight: 800; margin-left: -16px; padding-left: 16px; }
.calc-result .calc-plan small { font-weight: 400; }
.calc-result .calc-plan .calc-plan-only { color: #fff; font-weight: 600; margin-top: 2px; }
.print-only { display: none; }

/* Printing the cost calculator gives a one-page estimate: the numbers and results, without the page around them. */
@media print {
  @page { size: letter; margin: 12mm; }
  html { font-size: 10.5px; }
  .site-header, .site-footer, .crumbs, .staging-bar, .final-badge, .cookie-banner, .chat-launcher, .skip,
  body:has(.tool-print) main > section:not(:has(.tool-print)), .calc-quote, .tool-email, .calc-slider, .calc-actions, .calc-ctas, #calc-help, .lt-add, .lt-note { display: none !important; }
  body { background: #fff; }
  .print-only { display: block; }
  .tool-print-head { margin: 0 0 10px; font-size: 9pt; color: #000; }
  .tool-print-head { grid-column: 1 / -1; }
  .ra-form { font-size: .92rem !important; padding: 12px !important; }
  .ra-q { padding: 4px 0 !important; }
  .ra-q .choice { font-size: .92rem !important; }
  /* Lead time calculator and readiness assessment: results box in black on white, beside the inputs. */
  .lt-result, .ra-result { position: static !important; background: #fff !important; color: #000 !important; border: 1px solid #999; box-shadow: none !important; }
  .lt-result *, .ra-result * { color: #000 !important; }
  .lt-tool, .ra-form { box-shadow: none !important; border: 1px solid #999; }
  .lt-wrap, .ra-wrap { display: grid !important; grid-template-columns: 1.35fr 1fr !important; gap: 12px !important; align-items: start; }
  .lt-result, .ra-result, .lt-tool { break-inside: avoid; padding: 14px !important; }
  .lt-big, .ra-big { font-size: 2rem !important; }
  .lt-row { margin: 3px 0 !important; }
  .lt-tool input, .lt-tool select { padding: 4px 8px !important; }
  .ra-q { padding: 6px 0 !important; break-inside: avoid; }
  .section { padding: 0 !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  /* Page 1: the estimate. Inputs on the left as "label … value", results on the right. */
  .calc { display: grid !important; grid-template-columns: 1fr 1.25fr !important; gap: 12px !important; align-items: start; }
  .calc .card, .calc-result { box-shadow: none !important; border: 1px solid #999; padding: 14px !important; break-inside: avoid; }
  .calc fieldset { gap: 0 !important; }
  .calc fieldset label { display: flex !important; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px !important; font-size: 1rem; }
  .calc fieldset small { display: none; }
  .calc-row { display: block !important; margin: 0 !important; flex: none; }
  .calc input { border: 0 !important; padding: 0 !important; width: 5em !important; text-align: right; font-weight: 700; background: none !important; }
  .calc-result, .calc-result h2, .calc-result .big, .calc-result dt, .calc-result dd, .calc-result small, .calc-result p, .calc-breakeven { color: #000 !important; background: #fff !important; }
  .calc-result h2 { font-size: 1.15rem !important; margin: 10px 0 2px !important; }
  .calc-result h2:first-child { margin-top: 0 !important; }
  .calc-result .big, .calc-result .big.calc-cost, .calc-result #r-save { font-size: 1.9rem !important; }
  .calc-result dl { margin: 6px 0 !important; gap: 3px 12px !important; }
  .calc-extra > div { border: 1px solid #ccc; padding: 6px 8px !important; }
  .calc-result .calc-extra dd { font-size: 1.2rem !important; }
  .calc-result dt.calc-plan, .calc-result dd.calc-plan { background: #eef6e8 !important; }
  .calc-result dt.calc-plan { border-left: 3px solid #000 !important; }
  .calc-result .calc-plan small, .calc-result .calc-plan span { background: transparent !important; }
  .calc-breakeven { border-left: 3px solid #000 !important; margin: 10px 0 0 !important; padding: 8px 10px !important; }
  /* Page 2: where the defaults come from and how the estimate works, with each source's web address. */
  .calc-result #d-save-note { font-size: .95rem !important; line-height: 1.4 !important; margin: 2px 0 8px !important; }
  .calc-notes { break-before: page; display: block !important; margin: 0 !important; background: #fff !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
  .calc-notes, .calc-notes * { color: #000 !important; }
  .calc-notes > div { margin-bottom: 14px; }
  .calc-notes a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .9em; word-break: break-all; }
  .calc-notes a { color: #000 !important; }
}
@media (max-width: 560px) { .calc-ctas .btn { flex: 1 1 100%; } }
.btn-outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 70%); }
.btn-outline-light:hover { background: rgb(255 255 255 / 12%); color: #fff; border-color: #fff; }
.btn-outline-light[hidden] { display: none; }
.calc-quote { max-width: 720px; margin: 40px auto 0; scroll-margin-top: 110px; }
.calc-quote[hidden], .calc-quote [hidden] { display: none; }
.calc-sent .link-button { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.calc-breakeven .calc-breakeven-math { margin-top: 6px; font-size: .82rem; font-weight: 400; color: #c3d2da; }
.calc-result .big { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; color: var(--green); letter-spacing: -.03em; margin: 0; line-height: 1.1; }
.calc-result dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 20px 0; font-size: .95rem; }
.calc-result dd { margin: 0; color: #fff; font-weight: 700; text-align: right; }

/* Article / prose */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.article-grid aside { display: grid; gap: 18px; position: sticky; top: 96px; }
.prose { max-width: 72ch; overflow-wrap: anywhere; }
.prose h2 { font-size: 1.45rem; margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .3em 0; }

/* Guides (/guides) */
.guide-head { padding-bottom: 0; }
.guide-draft .draft { outline: 0; }
.guide-draft .draft-badge { margin: 0; }
.guide-head h1, .guide-answer, .guide-img { max-width: 72ch; }
.guide-meta { color: var(--slate); font-size: .95rem; margin: -.2em 0 1.4em; }
.guide-answer { font-size: 1.15rem; color: var(--ink-2); padding: 18px 22px; background: var(--tint); border-left: 4px solid var(--green); border-radius: var(--radius); }
.guide-answer p { margin: 0; }
.guide-answer p + p { margin-top: .8em; }
.guide-img { display: block; width: 100%; height: auto; margin-top: 28px; }
.guide-body { padding-top: 32px; }
.guide-card img { border-radius: 10px; margin-bottom: 16px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.guide-card .eyebrow { color: var(--slate); }
.plain-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plain-links a { font-weight: 600; text-decoration: none; }
.plain-links a:hover { text-decoration: underline; }

/* CTA band + forms */
.cta-band { background: radial-gradient(600px 300px at 50% 120%, rgb(116 191 68 / 25%), transparent 70%), var(--navy); color: #fff; padding: 88px 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #c3d2da; font-size: 1.12rem; }
.form-grid { align-items: start; margin-top: 24px; }
.form-grid[hidden] { display: none; }

/* Footer */
.site-footer { background: #051f33; color: rgb(255 255 255 / 70%); padding: 64px 0 26px; font-size: .94rem; }
.site-footer a { color: rgb(255 255 255 / 82%); text-decoration: none; }
.site-footer a:hover { color: var(--green); }
.site-footer h2 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .5em 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid img { width: 190px; margin-bottom: 16px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgb(255 255 255 / 10%); margin-top: 40px; padding-top: 22px; font-size: .84rem; }
.social { display: flex; gap: 14px; text-transform: capitalize; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: rgb(255 255 255 / 82%); cursor: pointer; }
.link-button:hover { color: var(--green); }

/* Cookie banner (shown to visitors who must consent before analytics load) */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px 20px; font-size: .94rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; flex: 1 1 320px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { font: inherit; font-weight: 650; cursor: pointer; }
@media (max-width: 560px) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1 1 0; } }

/* "Chat with us" button for visitors who haven't accepted analytics (HubSpot chat loads on click) */
.chat-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 55;
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--blue); color: #fff; border: 0; border-radius: 999px; box-shadow: var(--shadow-lg);
  padding: .8em 1.15em; font: inherit; font-weight: 650; cursor: pointer;
}
.chat-launcher:hover { background: var(--blue-hover); }
.chat-launcher[hidden] { display: none; }

@media (max-width: 1000px) {
  .hero-grid, .grid-2, .grid-3, .steps, .article-grid, .feature-row, .calc { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .feature-row { gap: 28px; }
  .feature-row.reverse > :first-child { order: 0; }
  .hero, .hero-dark { padding: 44px 0 56px; }
  .hero-visual .mock-email { position: static; width: auto; margin-top: 16px; }
  .section { padding: 60px 0; }
  .article-grid aside { position: static; }
  .calc-notes { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .grid-4, .proof-grid, .footer-grid, .viz-groups { grid-template-columns: 1fr; }
  .viz-timeline { grid-template-columns: 1fr; text-align: left; }
  .viz-timeline::before { display: none; }
  .tl-step { display: grid; grid-template-columns: 28px 80px 1fr; align-items: center; text-align: left; gap: 8px; }
  .tl-dot { margin: 0; }
  .brand img { width: 200px; }
  .cta-row .btn { flex: 1 1 100%; }
  .btn { white-space: normal; text-align: center; }
  .mock { font-size: 12px; }
  .mock-tabs { grid-template-columns: repeat(3, 1fr); }
  .mock-table th:nth-child(3), .mock-table td:nth-child(3) { display: none; }
  .mock-table td { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Drafts (preview builds only) */
.draft { outline: 2px dashed #e0a800; outline-offset: 4px; position: relative; }
.draft-wrap { position: relative; }
.draft-badge { display: inline-block; margin: 8px 0 0; background: #fff3c4; color: #6b4e00; border: 1px solid #e0a800; border-radius: 6px; font: 600 12px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; padding: 3px 8px; letter-spacing: 0; text-transform: none; }
.draft-wrap > .draft-badge { position: absolute; left: 10px; top: 10px; margin: 0; z-index: 2; }
.draft-block > .draft-badge { position: absolute; right: 12px; top: 12px; margin: 0; z-index: 2; }
.section.dark .draft-badge { color: #6b4e00; }

/* Product tour */
.tour { display: grid; gap: 56px; }
.tour-item { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; margin: 0; }
.tour-item.reverse > .feature-visual { order: 2; }
.tour-item figcaption p { font-size: 1.2rem; font-weight: 600; color: var(--ink); line-height: 1.45; letter-spacing: -.01em; }
.tour-num { display: inline-block; font-weight: 800; color: var(--green-ink); background: var(--green-soft); border-radius: 8px; padding: 2px 10px; margin-bottom: 12px; font-size: .9rem; }

/* Extra mocks */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 10.5px; }
.cal > b { text-align: center; color: var(--muted); font-weight: 700; padding: 3px 0; }
.cal-day { min-height: 46px; border: 1px solid #edf1f3; border-radius: 5px; padding: 3px; display: flex; flex-direction: column; gap: 2px; }
.cal-day.out { background: #f8fafb; color: #b3bec4; }
.cal-day small { font-size: 10px; color: var(--muted); }
.cal-day .due { font-size: 9.5px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.item-fields { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 0; }
.item-fields dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.item-fields dd { margin: 0; font-weight: 600; }
.mini-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 0 0 4px; }
.mini-list { list-style: none; margin: 0 0 10px; padding: 0; }
.mini-list li { padding: 5px 8px; background: var(--tint); border-radius: 6px; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; }
.mini-list i { font-style: normal; color: var(--green-ink); font-weight: 600; font-size: 11px; }
.form-mock { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-mock label { display: grid; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.form-mock label span { border: 1px solid #d5dde1; border-radius: 6px; padding: 7px 9px; color: var(--ink); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; background: #fff; }
.form-mock .wide { grid-column: 1 / -1; }
.form-mock .e-btn { justify-self: start; display: inline-block; background: var(--blue); color: #fff; font-weight: 700; font-size: 12px; padding: 7px 12px; border-radius: 6px; }
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 82px 1fr 70px; align-items: center; gap: 10px; }
.bar-row i { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--green-ink), var(--green)); }
.bar-row b { text-align: right; font-size: 12px; }

/* Video + team */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); margin-top: 24px; background: var(--navy); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-ph { display: grid; place-content: center; text-align: center; color: #c3d2da; }
.video-ph span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: var(--navy); font-size: 1.6rem; margin: 0 auto 12px; }
.video-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; border: 0; background: var(--navy); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.video-play span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--green); color: var(--navy); font-size: 1.7rem; margin-bottom: 6px; transition: transform .15s; }
.video-play:hover span, .video-play:focus-visible span { transform: scale(1.08); }
.video-play small { font-weight: 500; color: #c3d2da; }
/* With the video's thumbnail: the picture fills the box and only the play button sits on it; the label stays for
   screen readers and "Loads from YouTube" shows as a small tag in the corner. */
.video-play.has-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play.has-thumb span { position: relative; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); margin: 0; }
.video-play.has-thumb .video-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.video-play.has-thumb small { position: absolute; left: 12px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--navy) 78%, transparent); color: #fff; font-size: .78rem; }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.person img, .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.avatar { display: grid; place-items: center; background: var(--navy); color: var(--green); font-weight: 800; font-size: 1.6rem; }
.person h3 { margin-bottom: 0; }
.team-one { max-width: 760px; margin: 0 auto; }
.proof-grid.metrics { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; max-width: 900px; margin: 0 auto; }
.metrics dt { color: #fff; font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.metrics dd { font-size: 1.05rem; margin: 8px 0 0; }
.metrics > div { padding-left: 22px; }
@media (max-width: 560px) { .proof-grid.metrics { grid-template-columns: 1fr; gap: 28px; } }
.metrics dd { color: #c3d2da; }
.metrics > div { border-left-color: var(--green); }

@media (max-width: 1000px) {
  .tour-item { grid-template-columns: 1fr; gap: 18px; }
  .tour-item.reverse > .feature-visual { order: 0; }
}
@media (max-width: 560px) {
  .item-grid, .form-mock { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .cal-day { min-height: 34px; }
  .cal-day .due { font-size: 0; padding: 0; height: 6px; }
}


/* G2 rating card (g2Rating in visuals.mjs). Selectors are two classes deep so the trust bar's p and a styles don't leak in. */
.g2-rating-wrap { margin: 20px 0 36px; }
.g2-rating-wrap.center { display: flex; justify-content: center; }
.g2-rating { display: flex; align-items: center; gap: 20px; width: fit-content; max-width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 28px; text-align: left; }
.g2-rating .g2-icon { flex: none; width: 84px; height: 84px; }
.g2-rating .g2-rating-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g2-rating .g2-rating-name { margin: 0; text-align: left; text-transform: none; letter-spacing: 0; font-size: 1.3rem; line-height: 1.25; font-weight: 700; color: var(--ink); }
.g2-rating .g2-rating-score { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; text-align: left; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500; color: var(--muted); }
.g2-rating .g2-rating-score b { color: var(--ink); font-size: 1rem; font-weight: 700; }
.g2-rating .stars { font-size: 1.25rem; line-height: 1; letter-spacing: -1px; color: transparent; background: linear-gradient(90deg, var(--rating-red) var(--fill, 100%), var(--line) var(--fill, 100%)); -webkit-background-clip: text; background-clip: text; }
.g2-rating .g2-link { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; letter-spacing: 0; color: var(--blue); text-decoration: none; filter: none; opacity: 1; }
.g2-rating .g2-link:hover { color: var(--blue-hover); text-decoration: underline; }
@media (max-width: 480px) { .g2-rating { gap: 14px; padding: 16px 18px; } .g2-rating .g2-icon { width: 64px; height: 64px; } .g2-rating .g2-rating-name { font-size: 1.15rem; } }
@media (forced-colors: active) { .g2-rating .stars { color: CanvasText; background: none; } }

/* Rotating testimonial band (testimonialRotator in src/testimonial-rotator.mjs; content in src/content/testimonials/).
   Every slide shares one grid cell, so the band is as tall as the longest quote and nothing jumps as they change.
   The outgoing slide fades out while the next fades in. */
.trust-top { padding-bottom: 0; }
.t-rotator + .trust { padding-top: 36px; }
.t-rotator { background: var(--navy); color: #fff; padding: 56px 0 40px; text-align: center; }
.t-label { margin: 0 0 22px; color: #c3d2da; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.t-slides { display: grid; max-width: 920px; margin: 0 auto; }
.t-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.t-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease .35s, visibility 0s; }
.t-slide blockquote { margin: 0 0 20px; color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.75rem); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.t-slide figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.t-author { color: #fff; font-size: 1.05rem; font-weight: 600; }
.t-industry { color: var(--green); font-size: .95rem; font-weight: 700; }
.t-more { margin-top: 8px; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.t-more:hover { color: var(--green); }
.t-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.t-controls button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 40%); background: transparent; color: #fff; font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; }
.t-controls button:hover { border-color: var(--green); color: var(--green); }
.t-controls button:focus-visible, .t-more:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.t-count { min-width: 3.5em; color: #c3d2da; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .t-rotator { padding: 44px 0 32px; } }

/* Keep wide mocks inside narrow grid columns */
.hero-grid > *, .feature-row > *, .tour-item > *, .grid > * { min-width: 0; }
.mock, .mock-app { overflow: hidden; }
@media (max-width: 560px) { .mock-table th:nth-child(2), .mock-table td:nth-child(2) { display: none; } }

.staging-bar a { color: inherit; font-weight: 800; margin-left: 6px; }
.final-badge { position: fixed; left: max(14px, env(safe-area-inset-left, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--navy); color: #fff; font: 600 12.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; padding: 8px 12px; border-radius: 999px; box-shadow: var(--shadow); text-decoration: none; }
.final-badge:hover { background: var(--blue); color: #fff; }
.staging-bar { background: #fff3c4; color: #6b4e00; text-align: center; font: 600 13px/1.4 "Plus Jakarta Sans", system-ui, sans-serif; padding: 6px 12px; border-bottom: 1px solid #e0a800; }

/* Review kit */
.kit-steps { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; padding: 0; margin: 18px 0 0; counter-reset: k; font-weight: 600; color: var(--ink-2); }
.kit-steps li { counter-increment: k; }
.kit-steps li::before { content: counter(k); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--navy); color: var(--green); font-weight: 800; margin-right: 8px; }
.kit { display: grid; gap: 18px; }
.kit label { display: grid; gap: 6px; font-weight: 650; }
.kit label small { font-weight: 400; color: var(--muted); }
.kit textarea { font: inherit; padding: 10px 12px; border: 1px solid #cfd8dc; border-radius: 10px; resize: vertical; width: 100%; }
.kit textarea:focus { outline: 3px solid var(--blue-soft); border-color: var(--blue); }
.kit .btn { justify-self: start; }
.kit-site { display: grid; gap: 12px; align-content: start; }
.kit-site .btn { justify-self: start; }
.kit-field { border-top: 1px solid var(--line); padding-top: 12px; }
.kit-text { white-space: pre-wrap; background: var(--tint); border-radius: 8px; padding: 10px 12px; font-size: .95rem; min-height: 44px; margin-bottom: 8px; }
.kit-copy { padding: .45em .9em; font-size: .88rem; }

.kit-gift { background: var(--green-soft); border-radius: 8px; padding: 8px 12px; font-size: .9rem; margin: 0; }

.kit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kit input:not([type=checkbox]) { font: inherit; padding: 10px 12px; border: 1px solid #cfd8dc; border-radius: 10px; width: 100%; }
.kit input:focus { outline: 3px solid var(--blue-soft); border-color: var(--blue); }
.kit-consent { display: grid; gap: 10px; background: var(--tint); border-radius: 10px; padding: 14px; }
.kit label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.kit label.check input { margin-top: .3em; width: 18px; height: 18px; accent-color: var(--green-ink); flex: none; }
.kit-note { margin: 0; font-size: .9rem; }
.kit-status { margin: 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.kit-status.ok { background: var(--green-soft); color: var(--green-ink); }
.kit-status.warn { background: #fff3c4; color: #6b4e00; }
@media (max-width: 560px) { .kit-row { grid-template-columns: 1fr; } }

.kit-progress { max-width: 640px; margin: 0 auto 28px; padding: 16px 20px; }
.kit-progress p { margin: 10px 0 0; font-weight: 650; text-align: center; }
.kit-bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.kit-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-ink), var(--green)); transition: width .4s; }
.kit-site.opened .kit-done { border-color: var(--green-ink); color: var(--green-ink); box-shadow: 0 0 0 3px var(--green-soft); }
.kit-site.done { border-color: var(--green); }
.kit-site.done .kit-done { background: var(--green-soft); border-color: var(--green); color: var(--green-ink); }
.kit-site.done h3::after { content: " ✓"; color: var(--green-ink); }
.kit-shot-box { display: grid; gap: 10px; background: var(--tint); border-radius: 10px; padding: 14px; }
.kit-shot-box p { margin: 0; }
.kit-file { position: relative; justify-self: start; cursor: pointer; }
.kit-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kit-shot { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; }
.kit-shot img { width: 140px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.kit-shot .link-quiet { background: none; border: 0; cursor: pointer; text-decoration: underline; }
kbd { font: 600 .82em/1 "Plus Jakarta Sans", system-ui, sans-serif; background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; }

/* Lead forms (contact, demo) */
.lead-form { display: grid; gap: 14px; }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.lead-form input, .lead-form textarea, .lead-form select, .lt-tool input:not([type=checkbox]), .lt-tool select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #c9d5dd; border-radius: 10px; width: 100%; background: #fff; }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus, .lt-tool input:focus, .lt-tool select:focus { outline: 3px solid var(--blue-soft); border-color: var(--blue); }
.lead-form .req { color: var(--red); }
.lead-form .btn { justify-self: start; }
.lead-form .btn[disabled] { opacity: .7; cursor: wait; }
.lead-error { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fdecea; color: var(--red); font-weight: 600; }
.lead-note { margin: 0; font-size: .88rem; }
.lead-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.lead-form legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.lead-form .choice { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.lead-form .choice input { width: auto; accent-color: var(--blue); }
.schedule-fields { padding-top: 6px !important; scroll-margin-top: 150px; }
.schedule-fields[hidden] { display: none; }
.quote-fields { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; background: var(--tint); scroll-margin-top: 150px; }
.quote-fields > summary { font-weight: 700; cursor: pointer; color: var(--blue); }
.quote-fields[open] > summary { margin-bottom: 8px; }
.quote-fields > p { margin: 0 0 14px; font-size: .92rem; }
.quote-fields fieldset + fieldset { margin-top: 18px; }
.quote-fields legend { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.quote-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.quote-numbers label { gap: 4px; font-size: .9rem; }
@supports (grid-template-rows: subgrid) {
  .quote-numbers { row-gap: 0; }
  .quote-numbers label { grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; align-content: start; }
}
.quote-fields .hint { margin: 2px 0 0; font-size: .82rem; color: var(--slate); line-height: 1.4; }
.quote-checks { display: grid; gap: 10px; padding-bottom: 12px; }
.lead-form .quote-checks .choice { align-items: flex-start; font-size: .92rem; line-height: 1.4; }
.lead-form .quote-checks input { margin-top: 3px; flex: none; }
.quote-checks .quote-sub { margin-left: 28px; }
.quote-checks .quote-sub[hidden] { display: none; }
.quote-numbers + .hint { margin-bottom: 12px; }
.quote-numbers .hint { display: block; margin: 0; font-weight: 400; }
.quote-sub-block { margin: 2px 0 0 28px; }
.quote-sub-block[hidden] { display: none; }
.quote-docs .quote-checks { padding-bottom: 8px; }
.quote-checks + .quote-row { border-top: 1px solid var(--line); padding-top: 12px; }
.quote-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.quote-row:first-of-type { border-top: 0; padding-top: 0; }
.quote-q { font-weight: 600; font-size: .92rem; }
.quote-choices { display: inline-flex; border: 1px solid #c9d5dd; border-radius: 999px; background: #fff; overflow: hidden; }
.lead-form .quote-choices label { display: block; position: relative; font-weight: 500; font-size: .86rem; cursor: pointer; }
.lead-form .quote-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quote-choices label span { display: block; padding: 6px 12px; white-space: nowrap; }
.quote-choices label + label span { border-left: 1px solid #c9d5dd; }
.quote-choices input:checked + span { background: var(--blue); color: #fff; }
.quote-choices input:focus-visible + span { outline: 3px solid var(--blue-soft); outline-offset: -3px; }
@media (max-width: 560px) {
  .quote-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 100%; background: #c9d5dd; border-radius: 10px; }
  .quote-choices label span { background: #fff; text-align: center; }
  .quote-choices label + label span { border-left: 0; }
}
.calendly-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--slate); font-weight: 600; background: #fff; z-index: 1; text-align: center; padding: 0 20px; }
.calendly-loading[hidden] { display: none; }
.calendly-loading .spinner { width: 34px; height: 34px; border: 4px solid var(--blue-soft); border-top-color: var(--blue); border-radius: 50%; animation: rt-spin .9s linear infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
.avail-head { margin: 4px 0 0; font-weight: 600; font-size: .95rem; }
.avail-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.avail-row label { font-weight: 500; font-size: .85rem; }
.lead-form input[type=date], .lead-form input[type=time], .lead-form select, .lt-tool input[type=date], .lt-tool select { accent-color: var(--blue); color: var(--ink); color-scheme: light; }
.lead-form input[type=date]::-webkit-calendar-picker-indicator, .lead-form input[type=time]::-webkit-calendar-picker-indicator, .lt-tool input[type=date]::-webkit-calendar-picker-indicator {
  background: var(--blue); cursor: pointer; width: 18px; height: 18px; opacity: 1;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.lead-form input[type=date], .lt-tool input[type=date] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm-2 8h14v10H5V10zm2 2v2h2v-2H7zm4 0v2h2v-2h-2zm4 0v2h2v-2h-2zm-8 4v2h2v-2H7zm4 0v2h2v-2h-2z'/%3E%3C/svg%3E"); }
.lead-form input[type=time] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 3v6l5 3 1-1.7-4-2.3V7h-2z'/%3E%3C/svg%3E"); }
.lead-form input::-webkit-datetime-edit-month-field:focus, .lead-form input::-webkit-datetime-edit-day-field:focus,
.lead-form input::-webkit-datetime-edit-year-field:focus, .lead-form input::-webkit-datetime-edit-hour-field:focus,
.lead-form input::-webkit-datetime-edit-minute-field:focus, .lead-form input::-webkit-datetime-edit-ampm-field:focus { background: var(--blue); color: #fff; border-radius: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .lead-grid { grid-template-columns: 1fr; } .avail-row { grid-template-columns: 1fr 1fr; } .avail-row label:first-child { grid-column: 1 / -1; } }

/* Scrolling customer logos on /results */
.logo-scroller-section { padding-block: 28px; border-bottom: 1px solid var(--line); background: #fff; }
.logo-scroller-section .draft-badge { margin: 0 0 12px; }
.logo-scroller-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.logo-scroller-row button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.logo-scroller-row button:hover { background: var(--tint); }
.logo-scroller { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.logo-scroller::-webkit-scrollbar { display: none; }
.logo-scroller.dragging { cursor: grabbing; user-select: none; }
.logo-scroller:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.logo-track { list-style: none; display: flex; align-items: center; gap: 44px; margin: 0; padding: 4px 0; width: max-content; }
.logo-track li { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 64px; }
.logo-track img { height: 56px; width: auto; max-width: 190px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.logo-example { width: 150px; border: 1px dashed var(--line); border-radius: 8px; background: var(--tint); }
.logo-example span { color: var(--slate); font-weight: 700; }
@media (max-width: 560px) { .logo-scroller-row { grid-template-columns: minmax(0, 1fr); } .logo-scroller-row button { display: none; } }

/* Free download on a guide (src/downloads.mjs): short form, then the download button (Jeff, 2026-11-10). */
.guide-download { scroll-margin-top: 80px; padding-top: 0; }
.download-offer { scroll-margin-top: 80px; }
.download-offer .download-ready[hidden], .download-offer form[hidden] { display: none; }
.download-ready { text-align: center; }

/* Reminder lead time calculator (/reminder-lead-time-calculator; Guides plan #63, 2026-11-10). */
.lt-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.lt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 14px; }
.lt-grid label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.lt-grid [hidden] { display: none; }
.lt-steps { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0; }
.lt-steps legend { font-weight: 700; padding: 0 6px; }
.lt-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 84px; gap: 8px; align-items: center; margin: 6px 0; }
.lt-add { color: var(--blue); margin-top: 6px; text-decoration: underline; text-underline-offset: 2px; }
.lt-note { margin: 10px 0 0; font-size: .88rem; }
.lt-result { background: var(--navy); color: #fff; position: sticky; top: 80px; }
.lt-result .muted, .lt-result #lt-before { color: #c3d2da; }
.lt-label { margin: 0; font-weight: 600; color: #c3d2da; }
.lt-big { margin: 2px 0; font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; color: var(--green); }
.lt-follow { list-style: none; padding: 0; margin: 14px 0; }
.lt-follow li { padding: 6px 0; border-bottom: 1px solid rgb(255 255 255 / 12%); }
@media (max-width: 860px) { .lt-wrap, .lt-grid { grid-template-columns: 1fr; } .lt-result { position: static; } }

/* Renewal readiness assessment (/renewal-readiness-assessment; Guides plan #64, 2026-11-10). */
.ra-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.ra-q { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 12px 0; }
.ra-q legend { padding: 0; margin-bottom: 8px; line-height: 1.45; }
.ra-q .choice { display: inline-flex; gap: 6px; align-items: center; margin-right: 18px; font-weight: 600; }
.ra-result { background: var(--navy); color: #fff; position: sticky; top: 80px; }
.ra-result .muted { color: #c3d2da; }
.ra-result a { color: #fff; }
.ra-label { margin: 0; font-weight: 600; color: #c3d2da; }
.ra-big { margin: 2px 0; font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 800; color: var(--green); }
.ra-big small { font-size: 1rem; color: #c3d2da; margin-left: 4px; }
.ra-result ol { padding-left: 1.2em; }
.ra-result li { margin: 8px 0; }
@media (max-width: 860px) { .ra-wrap { grid-template-columns: 1fr; } .ra-result { position: static; } }

/* Monthly email (src/monthly-email.mjs): the opt-in box on forms, and the sign-up form (Jeff, 2026-11-10). */
.lead-form .choice.opt-in { align-items: flex-start; font-size: .92rem; font-weight: 400; line-height: 1.4; color: var(--slate); }
.lead-form .choice.opt-in input { margin-top: 3px; }
.monthly-signup .signed-up[hidden], .monthly-signup form[hidden] { display: none; }
.monthly-signup .signed-up { text-align: center; }
/* "Email me my results" under the free tools. */
.tool-email { margin-top: 24px; }
.tool-email .results-sent[hidden], .tool-email form[hidden] { display: none; }
.tool-email .results-sent { text-align: center; }
.offer-grid { align-items: start; }

/* /guides: free downloads first, and a label on guides that offer one (Jeff, 2026-11-10). */
.free-downloads-band { margin: 28px 0 36px; }
.free-downloads-band .card { background: var(--tint); }
.guide-list-head { margin: 0 0 16px; }
.tag-download { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--green-ink); color: white; font-size: .7rem; letter-spacing: .06em; vertical-align: 1px; }

/* "Not ready for a trial?" (freeOffers in components.mjs). */
.free-offers-more { margin-top: 20px; color: var(--slate); }
.guide-offer-line { margin-top: 4px; font-weight: 600; }

/* /free-downloads: one form with a checkbox per download (downloadPicker in src/download-offer.mjs). */
.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; }
.lead-form .pick-list { gap: 0; border: 1px solid var(--line); border-radius: 10px; padding: 4px 14px; }
.lead-form .choice.pick { align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.lead-form .choice.pick:last-child { border-bottom: 0; }
.lead-form .choice.pick input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.pick-blurb { font-weight: 400; font-size: .9rem; color: var(--slate); }
/* Cover thumbnail beside each download (drawn by tools/make-downloads.mjs; Robert, 2026-11-10). Decorative: the title is beside it. */
.lead-form .choice.pick .pick-thumb { flex: none; width: 64px; height: auto; border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow); background: #fff; }
@media (max-width: 560px) { .lead-form .choice.pick .pick-thumb { width: 48px; } }
/* The monthly email, last in the downloads form: set apart from the downloads above it (Robert, 2026-11-11). */
.lead-form .choice.pick.pick-email { border-top: 1px dashed var(--line); }
.download-ready .optin-note { font-weight: 600; }

/* "What you get" on /free-downloads (Robert, 2026-11-11): large cover previews in a row that scrolls sideways, about
   three visible on desktop and one on phones; select one for the full size. The section sits close under the hero. */
.section.shelf-section { padding-top: 16px; }
.cover-shelf-wrap { position: relative; margin-top: 24px; }
.cover-shelf { list-style: none; margin: 0; padding: 6px 4px 18px; display: grid; grid-auto-flow: column; grid-auto-columns: min(350px, 84vw); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 4px; overscroll-behavior-x: contain; }
.cover-shelf:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.cover-shelf li { scroll-snap-align: start; }
.cover-open { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: var(--shadow); cursor: zoom-in; overflow: hidden; }
.cover-open img { display: block; width: 100%; height: auto; }
.cover-open:hover, .cover-open:focus-visible { box-shadow: var(--shadow-lg); }
.cover-open:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.cover-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; opacity: .85; }
.cover-cap { margin: 10px 2px 0; line-height: 1.35; }
.cover-shelf-nav { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.cover-shelf-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--blue); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.cover-shelf-nav button:hover { border-color: var(--blue); }
.cover-dialog { padding: 0; border: 0; border-radius: 8px; max-width: min(92vw, 900px); max-height: 94vh; overflow: auto; background: #fff; box-shadow: var(--shadow-lg); }
.cover-dialog::backdrop { background: rgb(7 42 68 / 70%); }
.cover-dialog img { display: block; width: min(92vw, 900px, calc(94vh * 1224 / 1584)); height: auto; }
.cover-close { position: sticky; top: 8px; float: right; margin: 8px 8px -52px 0; z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.howto-guides li { margin: 8px 0; }
/* Phones: open the cover at full screen height (wider than the screen), so its text is readable; pan sideways to read it. */
@media (max-width: 700px) { .cover-dialog { max-width: 96vw; } .cover-dialog img { width: calc(94vh * 1224 / 1584); max-width: none; } }
.ready-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; justify-items: center; }
.ready-list li[hidden] { display: none; }
.lt-tool input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }
.lt-row .lt-days { text-align: right; }

/* The free tools' shared results actions (toolActions in components.mjs). */
.tool-actions { margin-top: 18px; }
.tool-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.calc-quote-wrap .tool-email { max-width: 720px; margin: 40px auto 0; scroll-margin-top: 110px; }
.tool-email { scroll-margin-top: 110px; }
.tool-email .link-button { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
/* The results boxes stay in view while scrolling only when the screen is tall enough to show them whole. */
@media (max-height: 920px) { .lt-result, .ra-result { position: static; } }
.lt-result .tool-actions .btn, .ra-result .tool-actions .btn { font-size: .82rem; padding: .6em .7em; }
.lt-result .tool-actions > p, .ra-result .tool-actions > p { gap: 6px; }

/* "You're also signed up" under a confirmation when the visitor ticked the monthly-email box (leadFormScript). */
.optin-note { margin: 14px auto 0; max-width: 640px; padding: 10px 14px; border-radius: 10px; background: var(--tint); color: var(--ink); text-align: center; font-size: .95rem; }
.optin-note[hidden] { display: none; }
.card .optin-note { margin-top: 12px; }

/* Monthly email archive (src/newsletters.mjs): issue list on /newsletter and /guides. */
.issue-list { padding-left: 1.1em; }
.issue-list li { margin: 8px 0; }
.issue-archive { margin-top: 36px; }