/* ==========================================================================
   Homepage: AI search optimization as a service with fixed plans.
   Builds on styles.css (tokens, type, nav, bands, ui cards, FAQ, footer).
   Cards: white, 1px sand border, 16px radius. Lime only as a fill behind dark text.
   ========================================================================== */

:root {
  --dark: #18120F;
  --panel: #EFEBE2;
  --card-border: #E3D6C2;
}

/* ---------- Shared bits ---------- */
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--outline:hover { background: rgba(26, 24, 19, .06); }
.price { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* "Illustrative example" label on every made-up number */
.illus {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink-2);
  font-family: var(--font-code);
  font-size: .6875rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.illus--dark { background: rgba(227, 214, 194, .14); color: var(--sand); }
/* styles.css lifts every child of .media into the flow with a very specific selector; this label stays pinned to the corner */
.illus--corner { position: absolute !important; top: 14px; left: 14px; z-index: 3 !important; }

/* Promise strip: under the hero and in the footer */
.promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: .9375rem; font-weight: 500; color: var(--ink-2); }
.promises li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.promises svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.promises--hero { margin-top: 4px; }
.promises--footer { justify-content: flex-start; padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px dashed var(--dash); }

/* ---------- Hero ---------- */
.home-hero .hero__title { max-width: 18ch; }
.home-hero .hero__lead { max-width: 54ch; }
.home-hero__eyebrow { max-width: 40ch; }

.answer { margin-top: clamp(40px, 5vw, 64px); min-height: 0; padding: clamp(20px, 4vw, 56px) 16px; display: grid; place-items: center; }
.answer__body { position: relative; display: grid; gap: 12px; width: 100%; max-width: 560px; }
.answer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.answer__days { display: none; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(26, 24, 19, .08); }
.answer__days button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-code);
  font-size: .75rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.js .answer__days { display: inline-flex; }
.answer[data-day="0"] [data-answer-day="0"], .answer[data-day="45"] [data-answer-day="45"] { background: var(--ink); color: var(--cream); }
.answer__when { font-family: var(--font-code); }
.answer[data-day="0"] .answer__d45, .answer[data-day="45"] .answer__d0 { display: none; }
.answer__a { --row: 54px; }
.answer__rows { position: relative; padding-left: 32px; }
.answer__list { position: relative; height: calc(var(--row) * 4); }
.answer__ranks { position: absolute; left: 0; top: 0; display: grid; }
.answer__ranks li { display: grid; place-items: center; width: 24px; height: calc(var(--row) - 8px); margin-bottom: 8px; font-family: var(--font-code); font-size: .8125rem; color: var(--ui-muted); }
.answer__item {
  --p: var(--p0);
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--row) - 8px);
  padding: 0 14px;
  border-radius: 12px;
  background: #fff;
  font-size: .9375rem;
  transform: translateY(calc(var(--p) * var(--row)));
  transition: transform .8s var(--ease-in-out), background-color .6s, opacity .6s, box-shadow .6s;
}
.answer[data-day="45"] .answer__item { --p: var(--p45); }
.answer__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.answer__rate { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; color: var(--ui-muted); }
.answer__rate svg { width: 13px; height: 13px; color: #C99A2E; }
.answer__status { flex: none; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.answer__status--out { background: rgba(194, 73, 46, .1); color: #A63B22; }
.answer__status--in { background: var(--lime); color: var(--ink); }
/* Out of the answer: the last row, dashed and faded */
.answer__item--you, .answer[data-day="45"] .answer__item--out45 { background: transparent; box-shadow: inset 0 0 0 1px rgba(26, 24, 19, .16); }
.answer__item--you .answer__name, .answer[data-day="45"] .answer__item--out45 .answer__name { color: var(--muted); }
.answer__item--out45 .answer__status--out, .answer__item--you .answer__status--in { display: none; }
.answer[data-day="45"] .answer__item--out45 .answer__status--out { display: inline-flex; }
.answer[data-day="45"] .answer__item--out45 .answer__rate { display: none; }
.answer[data-day="45"] .answer__item--you { background: var(--lime-tint); box-shadow: inset 0 0 0 1.5px var(--lime-2); }
.answer[data-day="45"] .answer__item--you .answer__name { color: var(--ink); font-weight: 600; }
.answer[data-day="45"] .answer__item--you .answer__status--out { display: none; }
.answer[data-day="45"] .answer__item--you .answer__status--in { display: inline-flex; }

/* ---------- The problem: two stats with sources ---------- */
.stats--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--two .stat__text { max-width: 38ch; }
.stats .source a { color: inherit; text-underline-offset: 3px; }

/* ---------- A service, not an agency ---------- */
.vs__wrap { margin-top: clamp(40px, 5vw, 64px); }
.vs__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9875rem; }
.vs__table th, .vs__table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--dash); }
.vs__table thead th { padding-top: 14px; font-family: var(--font-code); font-size: .75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.vs__table tbody th { width: 17%; font-weight: 600; }
.vs__table td { width: 41.5%; color: var(--ink-2); }
.vs__table td.vs__us { background: #fff; color: var(--ink); font-weight: 500; box-shadow: inset 1px 0 0 var(--card-border), inset -1px 0 0 var(--card-border); }
.vs__table thead th.vs__us { background: var(--dark); color: var(--lime); border-radius: 16px 16px 0 0; padding-top: 14px; border-bottom-color: var(--dark); }
.vs__table tbody tr:last-child td.vs__us { border-radius: 0 0 16px 16px; box-shadow: inset 1px 0 0 var(--card-border), inset -1px 0 0 var(--card-border), inset 0 -1px 0 var(--card-border); }

.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.pcard { display: grid; align-content: start; gap: 8px; padding: 22px 24px 24px; border: 1px solid var(--card-border); border-radius: var(--r-lg); background: #fff; }
.pcard__n { font-family: var(--font-code); font-size: .75rem; color: var(--muted); }
.pcard__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.pcard p { color: var(--ink-2); }

/* ---------- How it works ---------- */
.flowsteps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); counter-reset: none; }
.flowstep { position: relative; display: grid; align-content: start; gap: 8px; padding: 20px 20px 22px; border: 1px solid var(--card-border); border-radius: var(--r-lg); background: #fff; }
.flowstep__when { font-family: var(--font-code); font-size: .75rem; letter-spacing: .02em; color: var(--muted); }
.flowstep__title { display: grid; gap: 10px; font-family: var(--font-serif); font-size: 1.3125rem; font-weight: 500; line-height: 1.15; letter-spacing: -.012em; }
.flowstep__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--lime); font-family: var(--font-code); font-size: .875rem; font-weight: 600; }
.flowstep p:not(.flowstep__when) { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.flowstep__link { height: auto; margin-top: 4px; font-size: .9375rem; }

.model { margin-top: clamp(56px, 7vw, 96px); padding-top: 28px; border-top: 1px dashed var(--dash); }
.model__title { font-family: var(--font-serif); font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); font-weight: 500; letter-spacing: -.018em; }
.model__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.model__step { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--card-border); }
.model__step--win { background: var(--dark); color: var(--sand); box-shadow: none; }
.model__n { font-family: var(--font-code); font-size: .75rem; color: var(--muted); }
.model__step--win .model__n { color: var(--lime); }
.model__name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -.015em; }
.model__step--win .model__name { color: var(--cream); }
.model__lede { color: var(--ink-2); }
.model__step--win .model__lede { color: var(--sand-2); }
.model__list { display: grid; gap: 8px; margin-top: 6px; font-size: .9375rem; line-height: 1.45; }
.model__list li { position: relative; padding-left: 18px; }
.model__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--lime-2); }

/* ---------- Pricing ---------- */
.pricing__head { margin-bottom: clamp(28px, 4vw, 44px); }
.pricing__controls { display: none; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.js .pricing__controls { display: flex; }
.bizswitch, .curswitch { display: inline-flex; align-items: center; padding: 4px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-border); }
.bizswitch__btn, .curswitch__btn {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.curswitch__label { padding: 0 8px 0 12px; font-size: .8125rem; color: var(--muted); }
.curswitch__btn { width: 44px; padding: 0; font-family: var(--font-code); font-size: 1rem; }
.bizswitch__btn:hover, .curswitch__btn:hover { color: var(--ink); }
/* The state comes from <html data-biz-type / data-cur>, set before the first paint */
html[data-biz-type="local"] [data-type-btn="local"],
html[data-biz-type="online"] [data-type-btn="online"],
html[data-cur="usd"] [data-cur-btn="usd"],
html[data-cur="gbp"] [data-cur-btn="gbp"],
html[data-cur="eur"] [data-cur-btn="eur"] { background: var(--ink); color: var(--cream); box-shadow: 0 6px 16px -8px rgba(26, 24, 19, .6); }
.pricing__curnote { margin-top: 12px; text-align: center; font-size: .8125rem; color: var(--muted); }

/* Both business types are in the HTML. With JS the one not picked is hidden, stacked in the same
   grid cell so the section keeps its height and nothing below moves when the switch flips. */
.pricing__panels { margin-top: clamp(28px, 4vw, 48px); }
.js .pricing__panels { display: grid; grid-template-columns: minmax(0, 1fr); }
.js .pricing__panels > .pricing__panel { grid-area: 1 / 1; }
html[data-biz-type="local"] [data-type-panel="online"],
html[data-biz-type="online"] [data-type-panel="local"] { visibility: hidden; }
.js .compare [data-type-panel] { display: block; }
html.js[data-biz-type="local"] .compare [data-type-panel="online"],
html.js[data-biz-type="online"] .compare [data-type-panel="local"] { display: none; }
.pricing__panel + .pricing__panel { margin-top: 64px; }
.js .pricing__panel + .pricing__panel { margin-top: 0; }

/* Without JS both types are listed one after the other, each with its title */
.pricing__type { margin-bottom: 8px; font-family: var(--font-serif); font-size: 1.75rem; font-weight: 500; text-align: center; }
.js .pricing__type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pricing__who { max-width: 70ch; margin: 0 auto; text-align: center; color: var(--ink-2); }
.pricing__who q { font-family: var(--font-code); font-size: .875rem; quotes: "“" "”"; }

.pricing__row { margin-top: clamp(36px, 4.5vw, 56px); }
.pricing__row-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; gap: 12px 40px; padding-top: 22px; border-top: 1px dashed var(--dash); }
.pricing__row-title { font-family: var(--font-serif); font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); font-weight: 500; line-height: 1.1; letter-spacing: -.018em; }
.pricing__row-intro { justify-self: end; max-width: 56ch; color: var(--ink-2); font-size: .9375rem; }
.pricing__rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: .9375rem; color: var(--ink-2); text-align: center; }
.pricing__rule svg { width: 18px; height: 18px; flex: none; color: var(--olive); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; align-items: stretch; }

/* Plan card */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--ink);
}
.plan__badge {
  position: absolute;
  top: -12px; left: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
}
.plan__name { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 500; line-height: 1.1; letter-spacing: -.018em; }
.plan__promise { min-height: 3em; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.plan__price { margin-top: 4px; font-family: var(--font-serif); font-size: 2.5rem; font-weight: 500; line-height: 1; letter-spacing: -.025em; }
.plan__price--quote { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em; }
.plan__unit { font-family: var(--font-code); font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.plan__billing { font-family: var(--font-code); font-size: .75rem; color: var(--muted); }
.plan__best { padding: 10px 0; border-block: 1px dashed var(--dash); font-size: .875rem; color: var(--ink-2); }
.plan__best b { color: var(--ink); }
.plan__list { display: grid; gap: 8px; font-size: .9375rem; line-height: 1.4; }
.plan__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.plan__list svg { width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.plan__note { font-size: .875rem; font-weight: 500; }
.plan__recheck { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin-top: auto; padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel); font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.plan__recheck svg { width: 16px; height: 16px; margin-top: 1px; color: var(--ink); }
.plan__recheck b { color: var(--ink); font-weight: 600; }
.plan__excl { font-size: .8125rem; color: var(--ink-2); }
.plan__excl summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; list-style: none; cursor: pointer; }
.plan__excl summary::-webkit-details-marker { display: none; }
.plan__excl summary::after { content: "+"; font-family: var(--font-code); }
.plan__excl[open] summary::after { content: "–"; }
.plan__excl ul { display: grid; gap: 5px; margin-top: 6px; padding-left: 14px; list-style: disc; }
.plan__excl li span { color: var(--muted); }
.plan__cta { margin-top: 6px; }

/* Recommended tier: dark card, lime button */
.plan--featured { background: var(--dark); border-color: var(--dark); color: var(--sand); box-shadow: 0 30px 60px -30px rgba(24, 18, 15, .7); }
.plan--featured .plan__name, .plan--featured .plan__price, .plan--featured .plan__best b, .plan--featured .plan__excl summary { color: var(--cream); }
.plan--featured .plan__promise, .plan--featured .plan__best, .plan--featured .plan__list, .plan--featured .plan__excl { color: var(--sand); }
.plan--featured .plan__unit, .plan--featured .plan__billing, .plan--featured .plan__excl li span { color: var(--sand-2); }
.plan--featured .plan__best { border-color: var(--dash-d); }
.plan--featured .plan__recheck { background: rgba(227, 214, 194, .1); color: var(--sand); }
.plan--featured .plan__recheck svg, .plan--featured .plan__recheck b { color: var(--cream); }
.plan--featured .plan__excl summary { text-decoration-color: var(--dash-d); }
.plan--featured :focus-visible { outline-color: var(--lime); }

/* Custom: panel colour, outline button */
.plan--custom { background: var(--panel); }
.plan--custom .plan__list svg { background: #fff; }
.plan--custom .plan__recheck { background: #fff; }

.pricing__excl { margin-top: clamp(28px, 3.5vw, 44px); padding: 20px 24px; border-radius: var(--r-lg); background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-border); }
.pricing__excl-title { font-weight: 600; }
.pricing__excl ul { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.pricing__excl li { padding: 4px 10px; border-radius: 999px; background: #fff; font-size: .875rem; color: var(--ink-2); }
.pricing__excl-note { margin-top: 10px; font-size: .875rem; color: var(--muted); }

/* ---------- Compare every deliverable ---------- */
.compare__box { border-top: 1px dashed var(--dash); border-bottom: 1px dashed var(--dash); }
.compare__summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; list-style: none; cursor: pointer; }
.compare__summary::-webkit-details-marker { display: none; }
.compare__summary > span:first-child { display: grid; gap: 8px; }
.compare__title { display: block; }
.compare__sub { color: var(--ink-2); }
.compare__box[open] .qa__icon { border-color: var(--ink); background: var(--lime); }
.compare__box[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.compare__body { padding-bottom: 40px; }
.compare__table { margin-top: 28px; }
.compare__table table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--card-border); border-radius: var(--r-lg); font-size: .875rem; }
.compare__table caption { padding: 0 0 12px; text-align: left; font-family: var(--font-serif); font-size: 1.375rem; font-weight: 500; }
.compare__table th, .compare__table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--line-2); }
.compare__table tbody tr:last-child > * { border-bottom: 0; }
.compare__table thead th {
  position: sticky;
  top: var(--nav-h);
  z-index: 2;
  background: var(--dark);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
}
.compare__table thead th:first-child { border-top-left-radius: 15px; font-family: var(--font-code); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sand-2); }
.compare__table thead th:last-child { border-top-right-radius: 15px; }
.compare__table tbody th { position: sticky; left: 0; z-index: 1; width: 34%; background: #fff; font-weight: 500; }
.compare__table td { font-family: var(--font-code); font-size: .8125rem; color: var(--ink-2); }
.compare__price td { font-family: var(--font-serif); font-size: 1.125rem; color: var(--ink); }
.tick { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.dash { color: var(--muted); }
.compare__plans { display: none; }
.compare .pricing__type { margin-top: 12px; }
.compare__body .pricing__excl { background: #fff; }

/* ---------- Included in every plan ---------- */
.included { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px clamp(32px, 6vw, 96px); margin-top: clamp(64px, 8vw, 112px); }
.included__head { display: grid; align-content: start; gap: 18px; }
.included__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.included__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 16px 18px; border: 1px solid var(--card-border); border-radius: var(--r-md); background: #fff; font-weight: 500; line-height: 1.4; }
.included__list svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--lime); }

/* ---------- Sample report ---------- */
.sample__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.sample__media { min-height: 0; padding: clamp(16px, 3vw, 40px); }
.sample__report { display: grid; gap: 12px; width: 100%; max-width: 640px; }
.sample__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sample__top .ui__title { margin: 0; }
.sample__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.sample__kpi { padding: 12px 14px; border-radius: 14px; background: #fff; }
.sample__kpi-label { font-size: .8125rem; color: var(--ui-muted); }
.sample__kpi-value { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 1.5rem; font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sample__kpi-value svg { width: 16px; height: 16px; color: var(--ui-muted); }
.sample__was { color: var(--ui-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.sample__sub { margin-bottom: 10px; font-size: .875rem; color: var(--ui-muted); }
.sample__leads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sample__leads > div { padding: 12px 14px; border-radius: 14px; background: #fff; }
.sample__lead-num { font-size: 2rem; font-weight: 300; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sample__lead-label { font-size: .875rem; color: var(--ui-muted); }

.tracker { align-self: stretch; }
.tracker__table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tracker__table th { padding: 0 8px 8px 0; text-align: left; font-family: var(--font-code); font-size: .6875rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.tracker__table td { padding: 10px 8px 10px 0; border-top: 1px dashed rgba(20, 18, 16, .14); vertical-align: top; line-height: 1.4; }
.tracker__table td:last-child { font-family: var(--font-code); font-size: .75rem; color: var(--ui-muted); white-space: nowrap; }
.tracker__count { display: block; font-family: var(--font-code); font-size: .75rem; color: var(--ui-muted); }
.st { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.st--done { background: var(--lime); }
.st--doing { background: #DCE6FB; color: #1F4FC2; }

.beforeafter { margin-top: 16px; padding: 22px 24px; border-radius: var(--r-lg); background: rgba(227, 214, 194, .06); box-shadow: inset 0 0 0 1px var(--line-d); }
.beforeafter__title { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 500; color: var(--cream); }
.beforeafter__table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.beforeafter__table th { padding: 0 12px 10px 0; text-align: left; font-family: var(--font-code); font-size: .75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--sand-2); }
.beforeafter__table td { padding: 12px 12px 12px 0; border-top: 1px dashed var(--dash-d); color: var(--sand); }
.beforeafter__table td:first-child { font-family: var(--font-code); font-size: .875rem; color: var(--cream); }
.ba { display: inline-flex; padding: 2px 9px; border-radius: 999px; background: rgba(227, 214, 194, .14); font-size: .8125rem; font-weight: 600; color: var(--sand); white-space: nowrap; }
.ba--in { background: var(--lime); color: var(--ink); }
.ba--out { background: rgba(194, 73, 46, .22); color: #F2B6A6; }
.beforeafter__note { margin-top: 14px; font-size: .875rem; color: var(--sand-2); }

/* ---------- Who it's for ---------- */
.who__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.who__col { display: grid; align-content: start; justify-items: start; gap: 14px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--card-border); border-radius: var(--r-lg); background: #fff; }
.who__title { font-family: var(--font-serif); font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); font-weight: 500; letter-spacing: -.02em; }
.who__lede { color: var(--ink-2); }
.who__list { display: flex; flex-wrap: wrap; gap: 8px; }
.who__list li { padding: 6px 12px; border-radius: 999px; background: var(--panel); font-size: .9375rem; font-weight: 500; }
.who__q { font-size: .9375rem; color: var(--ink-2); }
.who__q span { font-family: var(--font-code); font-size: .8125rem; color: var(--ink); }
.who__col .btn { margin-top: 6px; }

/* ---------- What we never do ---------- */
.never__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.never__head { display: grid; gap: 18px; padding-top: 28px; border-top: 1px dashed var(--dash); }
.never__list { display: grid; gap: 10px; }
.never__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--card-border); border-radius: var(--r-md); background: #fff; font-weight: 500; }
.never__list svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(194, 73, 46, .12); color: var(--warn); }

/* ---------- FAQ on cream ---------- */
.faq.section .faq__head .btn { margin-top: 4px; }

/* ---------- Final CTA ---------- */
.home-cta__inner { display: grid; justify-items: start; gap: 18px; }
.home-cta__inner .h2 { max-width: 16ch; color: var(--cream); }
.home-cta__inner .eyebrow { color: var(--cream); }
.home-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }
.home-cta__link { color: var(--cream); text-decoration-color: rgba(246, 244, 239, .4); }

/* ---------- Footer ---------- */
.home-footer .footer__top { grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); }
.home-footer .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer__meta { color: var(--muted); font-weight: 400; }

/* ---------- Order form (/start/) ---------- */
.start-page { background: var(--cream); }
.start-nav .nav__bar { justify-content: space-between; }
.start-nav__back { height: 40px; font-size: .9375rem; }
.start { padding: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) 0 clamp(56px, 7vw, 96px); }
.start__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.start__intro { display: grid; gap: 18px; }
.start__title { max-width: 18ch; }
.start__summary { margin-top: 10px; }
.start__summary .plan__badge { position: static; align-self: flex-start; }
.start__summary[hidden] { display: none; }
.start__next { display: grid; gap: 10px; counter-reset: s; }
.start__next li { position: relative; padding-left: 36px; color: var(--ink-2); counter-increment: s; }
.start__next li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--lime); font-family: var(--font-code); font-size: .75rem; font-weight: 600; color: var(--ink); }
.start__next b { color: var(--ink); }
.start__form { position: sticky; top: calc(var(--nav-h) + 20px); }
.field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #FDFCFA;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.field select { height: 50px; padding-block: 0; }
.field textarea { min-height: 110px; resize: vertical; }
.field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(198, 244, 50, .6); }
.field.is-invalid textarea { border-color: #B8452A; box-shadow: 0 0 0 4px rgba(194, 73, 46, .14); }
.start__pay { border: 0; }
.start__pay legend { margin-bottom: 8px; font-size: .875rem; font-weight: 600; }
.start__pay[hidden] { display: none; }
.start__radio { display: inline-flex; align-items: center; gap: 8px; margin-right: 22px; font-size: .9375rem; cursor: pointer; }
.start__radio input { width: 18px; height: 18px; accent-color: var(--ink); }
.start__alert { padding: 10px 14px; border-radius: var(--r-sm); background: rgba(194, 73, 46, .1); color: #A63B22; font-size: .9375rem; }
.start__alert[hidden] { display: none; }
.start__turnstile:empty { display: none; }
.start__done-links { margin-top: 4px; }
.start-footer { padding: 28px 0 40px; border-top: 1px dashed var(--dash); font-size: .875rem; color: var(--muted); }
.start-footer a { color: inherit; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .flowsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing__row-head { grid-template-columns: minmax(0, 1fr); }
  .pricing__row-intro { justify-self: start; }
  /* Cards become a horizontal swipe; the script brings the middle tier into view first */
  .plans {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 18px var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { flex: 0 0 min(340px, 82vw); scroll-snap-align: center; }
  .sample__grid { grid-template-columns: minmax(0, 1fr); }
  .home-footer .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .vs__table thead { display: none; }
  .vs__table, .vs__table tbody, .vs__table tr { display: block; }
  .vs__table tr { padding: 16px 0; border-bottom: 1px dashed var(--dash); }
  .vs__table th, .vs__table td, .vs__table tbody th { display: block; width: auto; padding: 0; border: 0; }
  .vs__table tbody th { margin-bottom: 10px; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; }
  .vs__table td { padding: 12px 14px; border-radius: var(--r-md); }
  .vs__table td + td { margin-top: 8px; }
  .vs__table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--font-code); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .vs__table td.vs__us, .vs__table tbody tr:last-child td.vs__us { background: var(--dark); color: var(--cream); box-shadow: none; border-radius: var(--r-md); }
  .vs__table td.vs__us::before { color: var(--lime); }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .included, .never__grid, .start__grid { grid-template-columns: minmax(0, 1fr); }
  .start__form { position: relative; top: 0; }
  .who__grid { grid-template-columns: minmax(0, 1fr); }
  /* Comparison: one accordion per plan instead of the wide table */
  .compare__table { display: none; }
  .compare__plans { display: grid; gap: 8px; margin-top: 24px; }
  .compare__plans-title { margin-bottom: 4px; font-family: var(--font-serif); font-size: 1.375rem; font-weight: 500; }
  .compare__plan { border: 1px solid var(--card-border); border-radius: var(--r-md); background: #fff; }
  .compare__plan summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 600; list-style: none; cursor: pointer; }
  .compare__plan summary::-webkit-details-marker { display: none; }
  .compare__plan-price { font-family: var(--font-code); font-size: .875rem; font-weight: 400; color: var(--ink-2); }
  .compare__plan dl { display: grid; padding: 0 16px 12px; }
  .compare__plan dl > div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line-2); font-size: .875rem; }
  .compare__plan dt { color: var(--ink-2); }
  .compare__plan dd { font-family: var(--font-code); font-size: .8125rem; }
  .compare__plan .tick { width: 18px; height: 18px; }
}

@media (max-width: 640px) {
  .promises--hero { gap: 6px 14px; font-size: .875rem; }
  .answer__a { --row: 50px; }
  .answer__rows { padding-left: 28px; }
  .answer__item { padding: 0 10px; font-size: .875rem; }
  .answer__rate { display: none; }
  .answer__days button { padding: 0 10px; white-space: nowrap; }
  .answer__status { padding: 2px 7px; font-size: .6875rem; }
  .stats--two { grid-template-columns: minmax(0, 1fr); }
  .pcards, .flowsteps, .model__grid, .included__list { grid-template-columns: minmax(0, 1fr); }
  .bizswitch { width: 100%; }
  .bizswitch__btn { flex: 1; padding: 0 10px; }
  .sample__kpis { grid-template-columns: minmax(0, 1fr); }
  .sample__leads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample__leads > div:last-child { grid-column: 1 / -1; }
  .beforeafter { padding: 18px 16px; }
  .beforeafter__table thead { display: none; }
  .beforeafter__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; padding: 12px 0; border-top: 1px dashed var(--dash-d); }
  .beforeafter__table td { padding: 0; border: 0; }
  .beforeafter__table td:first-child { grid-column: 1 / -1; }
  .beforeafter__table td:nth-child(2) { font-size: .8125rem; color: var(--sand-2); }
  .tracker__table th:last-child, .tracker__table td:last-child { display: none; }
  .home-footer .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .home-cta__actions .btn { width: 100%; }
  .promises--footer { flex-direction: column; align-items: flex-start; }
}
/* Small phones: room for the full business name next to its status */
@media (max-width: 400px) {
  .answer { padding-left: 8px; padding-right: 8px; }
  .answer__rows { padding-left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .answer__item { transition: none; }
}

/* Phones: the hero sky is drawn in CSS (the photo's own colours plus grain) instead of downloaded */
@media (max-width: 700px) {
  .answer {
    background:
      radial-gradient(70% 40% at 88% 10%, rgba(160, 196, 222, .9) 0%, transparent 70%),
      radial-gradient(80% 45% at 12% 52%, rgba(118, 165, 196, .9) 0%, transparent 72%),
      radial-gradient(90% 45% at 8% 100%, #36698F 0%, transparent 70%),
      linear-gradient(180deg, #5A8BAC 0%, #6399BB 52%, #4F87AE 100%);
  }
  .answer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .12;
    pointer-events: none;
  }
  .answer .media__bg { display: none; }
}
/* The <picture> around the sky adds no box, so the image fills the whole card (not a zero-height wrapper) */
.answer > picture { display: contents; }