/* visuals.css: shared visual components for the inner pages (2026-10-14 visual review).
   The homepage defines the same mockup classes inline; this file carries them to the other pages.
   Tokens come from elevated.css. Mockups are aria-hidden illustrations of the real thing. */

:root { --ease-ui: cubic-bezier(0.23, 1, 0.32, 1); --mint-ink: #087F69; --chat-ink: #0A0F1A; }

/* ---------- Page hero: dark banner, text left, photo + product card right ---------- */
.page-hero {
  padding: var(--s-16) 0 var(--s-20);
  background: #07090F;
  color: var(--paper-on-obsidian);
  overflow: hidden;
}
.page-hero__row { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-6); align-items: center; }
.page-hero__text { grid-column: 1 / span 6; }
.page-hero__visual { grid-column: 7 / span 6; position: relative; padding: 0 0 var(--s-10) var(--s-16); }
.page-hero .hero__index { display: block; line-height: 1.7; color: var(--mint); margin-bottom: var(--s-8); padding-top: 0; }
.page-hero .hero__index strong { color: #fff; margin-right: 0.4em; }
.page-hero .hero__headline { color: #fff; max-width: 14ch; font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.02; margin-bottom: var(--s-6); }
.page-hero .hero__headline em { color: var(--mint); font-style: normal; font-weight: 700; }
.page-hero .hero__lede { color: var(--paper-on-obsidian-mute); max-width: 44ch; font-size: var(--t-md); line-height: 1.5; text-transform: none; margin-bottom: var(--s-8); }
.page-hero .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.page-hero .btn--primary { background: var(--mint); color: var(--obsidian); border-color: var(--mint); }
.page-hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.32); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .page-hero .btn--primary:hover { background: var(--mint-bright); border-color: var(--mint-bright); color: var(--obsidian); }
  .page-hero .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.04); }
}
.page-hero__photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); background: #11161F; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 9, 15, 0) 50%, rgba(7, 9, 15, 0.6)); }
.page-hero__tag {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: rgba(7, 9, 15, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff;
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none;
}
.page-hero__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.page-hero__card { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(340px, 72%); }
.page-hero__card > .m-card { max-width: none; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.1); }
.page-hero__caption { position: absolute; left: 0; bottom: -26px; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--paper-on-obsidian-mute); }

/* Light variant: big mockup on a soft stage, no photo */
.page-hero--light { background: var(--paper); color: var(--ink); }
.page-hero--light .hero__index strong, .page-hero--light .hero__headline { color: var(--ink); }
.page-hero--light .hero__index { color: var(--ink-mute); }
.page-hero--light .hero__headline em { color: var(--mint-ink); }
.page-hero--light .hero__lede { color: var(--ink-soft); }
.page-hero--light .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.page-hero--light .btn--ghost { color: var(--ink); border-color: var(--ink); }
.page-hero__stage { border-radius: 24px; background: #E8ECF2; padding: var(--s-12) var(--s-8); display: grid; place-items: center; gap: var(--s-4); }
.page-hero--light .page-hero__visual { padding: 0; }

/* ---------- Mockups (same look as the homepage examples) ---------- */
.m-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid transparent; border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(10, 15, 26, 0.35); font-size: 13px; line-height: 1.4; color: #202124; text-align: left; }
.m-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 0; padding: 8px 12px; border: 1px solid #DFE1E5; border-radius: 999px; color: #202124; }
.m-search::before { content: ""; width: 11px; height: 11px; border: 2px solid #9AA0A6; border-radius: 50%; flex: none; }
.m-result { padding: 12px 14px; }
.m-result + .m-result { border-top: 1px solid transparent; }
.m-spons { font-weight: 700; font-size: 11px; color: #202124; }
.m-site { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #4D5156; margin: 4px 0 2px; }
.m-fav { width: 16px; height: 16px; border-radius: 50%; background: var(--obsidian); color: var(--mint); font-size: 8px; font-weight: 700; display: grid; place-items: center; }
.m-title { color: #1A0DAB; font-size: 15px; line-height: 1.25; }
.m-desc { color: #4D5156; font-size: 12px; margin-top: 3px; }
.m-links { display: flex; gap: 14px; margin-top: 6px; color: #1A0DAB; font-size: 12px; }
.m-lang { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--mint-soft); border: 1px solid var(--mint-edge); color: var(--mint-ink); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; vertical-align: 2px; }

/* social ad */
.m-social { max-width: 300px; overflow: hidden; }
.m-social__top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.m-social__av { width: 28px; height: 28px; border-radius: 50%; background: var(--obsidian); color: var(--mint); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.m-social__name { font-weight: 600; font-size: 12px; line-height: 1.2; }
.m-social__sp { font-size: 10px; color: #65676B; }
.m-social__img { aspect-ratio: 16 / 8.5; overflow: hidden; }
.m-social__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-social__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #F0F2F5; }
.m-social__head { font-weight: 600; font-size: 12.5px; line-height: 1.25; }
.m-social__cta { flex: none; background: #E4E6EB; border-radius: 6px; padding: 6px 10px; font-weight: 600; font-size: 11.5px; }

/* daily check */
.m-watch { max-width: 340px; padding: 14px 16px; }
.m-watch__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: #5F6368; margin-bottom: 8px; }
.m-check { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid transparent; font-size: 12.5px; }
.m-check b { font-weight: 500; }
.m-ok { display: inline-flex; align-items: center; gap: 5px; color: #0B6B56; font-weight: 600; font-size: 11.5px; }
.m-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

/* ---------- Deliverables: icon tiles (option A) ---------- */
.deliverable__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--obsidian); color: var(--mint); display: grid; place-items: center; margin-bottom: var(--s-5); transition: transform 200ms var(--ease-ui); }
.deliverable__icon svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .deliverable:hover .deliverable__icon { transform: scale(1.06); } }
.deliverables--icons .deliverable__num { display: none; }
.deliverables--icons .deliverable { padding: var(--s-8) var(--s-6); }
.deliverables--icons .deliverable__body { max-width: 34ch; }

/* ---------- Deliverables: mini mockup cards (option B) ---------- */
.dlv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.dlv-card { background: #fff; border: 1px solid transparent; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.dlv-card__stage { height: 168px; background: #EEF1F6; display: grid; place-items: center; padding: var(--s-4); }
.dlv-card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.dlv-card__title { font-size: var(--t-md); font-weight: 650; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.dlv-card__desc { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.mini { width: 100%; max-width: 230px; background: #fff; border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 22px -16px rgba(10, 15, 26, 0.35); font-size: 11px; color: var(--ink-soft); }
.mini__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 5px 0; }
.mini__row + .mini__row { border-top: 1px solid transparent; }
.mini__row b { font-weight: 600; color: var(--ink); }
.mini__bar { height: 6px; border-radius: 999px; background: #E8EBF0; overflow: hidden; width: 70px; }
.mini__bar i { display: block; height: 100%; background: var(--obsidian); border-radius: 999px; }
.mini__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mini__chip { border: 1px solid transparent; border-radius: 999px; padding: 2px 7px; font-size: 10px; color: var(--ink); background: #fff; }
.mini__chip--es { border-color: var(--mint-edge); background: var(--mint-soft); color: var(--mint-ink); }
.mini__chip--neg { text-decoration: line-through; color: var(--ink-mute); }
.mini__head { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-mute); margin-bottom: 4px; }

/* ---------- Deliverables: one annotated mockup + list (option C) ---------- */
.annot { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-10); align-items: center; }
.annot__stage { border-radius: 22px; background: #EEF1F6; padding: var(--s-10); }
.annot__acct { background: #fff; border: 1px solid transparent; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(10, 15, 26, 0.35); font-size: 12.5px; }
.annot__acct-head { display: flex; justify-content: space-between; padding: 10px 14px; background: #F6F8FB; border-bottom: 1px solid transparent; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.annot__line { position: relative; display: grid; grid-template-columns: 1fr 64px 90px; gap: 10px; align-items: center; padding: 10px 14px 10px 44px; border-top: 1px solid transparent; }
.annot__pin { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: var(--obsidian); font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.annot__list { list-style: none; padding: 0; margin: 0; counter-reset: an; }
.annot__list li { counter-increment: an; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 0; border-top: var(--rule); font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; }
.annot__list li::before { content: counter(an); width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: var(--obsidian); font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.annot__list b { color: var(--ink); font-weight: 600; display: block; }

/* ---------- Step cards with a small graphic (homepage "Getting started" pattern) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.step { background: #fff; border: 1px solid transparent; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.step__stage { position: relative; height: 170px; background: #EEF1F6; display: grid; place-items: center; padding: var(--s-5); }
.step__n { position: absolute; top: 12px; left: 14px; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; color: var(--ink-mute); }
.step__body { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.step__phase { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--mint-ink); }
.step__title { font-size: var(--t-md); font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.step__desc { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.g-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--obsidian); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.g-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.g-launch { width: 100%; max-width: 220px; }
.g-launch__live { display: inline-flex; align-items: center; gap: 6px; background: var(--obsidian); color: #fff; border-radius: 999px; padding: 4px 10px; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; }
.g-launch__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.g-launch__track { position: relative; height: 8px; border-radius: 999px; background: #DDE1E8; margin: 12px 0 6px; overflow: hidden; }
.g-launch__track i { position: absolute; inset: 0 34% 0 0; background: linear-gradient(90deg, var(--obsidian), var(--mint-ink)); border-radius: 999px; }
.g-launch__ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.g-rescore { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); }
.g-rescore__tile { background: #fff; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.g-rescore__tile b { font-size: 15px; color: var(--ink); letter-spacing: 0; font-weight: 600; }
.g-rescore__tile--after { border-color: var(--mint); background: var(--mint-soft); }
.g-rescore__arrow { color: var(--mint-ink); }

/* ---------- One 30-day track (option B for timelines) ---------- */
.track { position: relative; padding-top: var(--s-4); }
.track__bar { position: relative; height: 10px; border-radius: 999px; background: #DDE1E8; margin: 0 0 var(--s-8); }
.track__bar::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, var(--obsidian), var(--mint)); }
.track__stops { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.track__stop { position: relative; }
.track__stop::before { content: ""; position: absolute; top: calc(-1 * var(--s-8) - 15px); left: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--obsidian); }
.track__stop:last-child::before { border-color: var(--mint); background: var(--mint); }
.track__day { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--mint-ink); }
.track__title { margin-top: 6px; font-size: var(--t-md); font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.track__desc { margin-top: 4px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); max-width: 30ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .page-hero__text { grid-column: 1 / span 12; }
  .page-hero__visual { grid-column: 1 / span 12; margin-top: var(--s-10); max-width: 620px; padding-left: 0; }
  .page-hero__card { left: var(--s-4); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .dlv-cards { grid-template-columns: repeat(2, 1fr); }
  .annot { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-hero { padding: var(--s-10) 0 var(--s-12); }
  .page-hero__visual { padding-bottom: 0; }
  .page-hero__photo { aspect-ratio: 4 / 3.4; }
  .page-hero__card { position: relative; left: auto; bottom: auto; width: auto; margin: -72px var(--s-3) 0; }
  .page-hero__caption { position: static; display: block; margin-top: var(--s-3); }
  .page-hero__stage { padding: var(--s-8) var(--s-4); }
  .steps, .dlv-cards { grid-template-columns: 1fr; }
  .annot__stage { padding: var(--s-6) var(--s-4); }
  .annot__line { grid-template-columns: 1fr 54px; }
  .annot__line > :last-child { display: none; }
  .track__bar { display: none; }
  .track__stops { grid-template-columns: 1fr; gap: var(--s-5); border-left: 3px solid var(--obsidian); padding-left: var(--s-6); margin-left: 8px; }
  .track__stop::before { top: 2px; left: calc(-1 * var(--s-6) - 12px); width: 18px; height: 18px; }
}

/* ---------- Added during implementation ---------- */
.page-hero__cards { display: flex; flex-direction: column; gap: 10px; }
.page-hero__cards > * { max-width: none; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.1); }
.page-hero .reveal { animation-duration: 0.7s; }

/* Four-cell icon grid */
.deliverables--4 .deliverable { grid-column: span 3; }
.deliverables--4 .deliverable:nth-child(3n) { border-right: var(--rule); }
.deliverables--4 .deliverable:nth-child(4n) { border-right: 0; }
.deliverables--2 .deliverable { grid-column: span 6; }
.deliverables--2 .deliverable:nth-child(3n) { border-right: var(--rule); }
.deliverables--2 .deliverable:nth-child(2n) { border-right: 0; }
.section--obsidian .deliverable__icon { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--obsidian-line-strong); }

/* Proof: quote + engagement facts (same as the homepage) */
.proof__data-value--text { font-family: var(--font-body); font-variation-settings: "MONO" 0, "CASL" 0, "wght" 600; color: var(--paper-on-obsidian); }
.proof .proof__more { display: inline-block; margin-top: var(--s-6); color: var(--mint); font-weight: 600; border-bottom: 1px solid var(--mint-edge); padding-bottom: 2px; }
.proof__who { display: flex; align-items: center; gap: 12px; margin-top: var(--s-6); }
.proof__who .proof__attribution { margin: 0; }
.proof__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--obsidian-line-strong); color: var(--paper-on-obsidian-mute); }
.proof__avatar svg { width: 22px; height: 22px; }

/* Section intro line under a section head */
.sec-intro { max-width: 60ch; font-size: var(--t-md); line-height: 1.5; color: var(--ink-soft); margin: calc(var(--s-4) * -1) 0 var(--s-10); }
.section--obsidian .sec-intro { color: var(--paper-on-obsidian-mute); }

@media (max-width: 1024px) {
  .deliverables--4 .deliverable { grid-column: span 6; }
  .deliverables--4 .deliverable:nth-child(n) { border-right: var(--rule); }
  .deliverables--4 .deliverable:nth-child(2n) { border-right: 0; }
}
@media (max-width: 720px) {
  .deliverables--4 .deliverable, .deliverables--2 .deliverable { grid-column: 1 / span 12; border-right: 0; }
  .deliverables--4 .deliverable:nth-child(n), .deliverables--2 .deliverable:nth-child(n) { border-right: 0; }
  .deliverable__icon { width: 44px; height: 44px; margin-bottom: var(--s-4); }
}
@media (max-width: 720px) {
  .step__stage { height: 132px; padding: var(--s-4); }
  .step__body { padding: var(--s-4) var(--s-5) var(--s-5); }
}
@media (max-width: 480px) {
  .page-hero .hero__actions .btn, .cta-final__buttons .btn { max-width: 100%; white-space: normal; text-align: left; }
}

/* Small illustrative bar graphic beside sourced stats (no data of its own) */
.vis-bars { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); background: #fff; border: 1px solid transparent; border-radius: 16px; }
.vis-bar__label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.vis-bar__track { height: 12px; border-radius: 999px; background: #E8EBF0; overflow: hidden; }
.vis-bar__track i { display: block; height: 100%; border-radius: 999px; background: var(--obsidian); }
.vis-bar--low .vis-bar__track i { background: var(--rust); }
.vis-bar--full .vis-bar__track i { background: var(--mint); }
.vis-bars__note { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.stat-strip__item--visual { display: flex; align-items: center; }
.stat-strip__item--visual .vis-bars { width: 100%; }

/* mock: Google Business Profile card */
.m-gbp { max-width: 330px; padding: 14px 16px; }
.m-gbp__name { font-size: 16px; font-weight: 600; color: #202124; }
.m-gbp__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4D5156; margin-top: 2px; }
.m-stars { color: #F4B400; letter-spacing: 1px; font-size: 12px; }
.m-gbp__open { color: #188038; font-weight: 600; }
.m-gbp__btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.m-gbp__btns span { text-align: center; font-size: 11.5px; font-weight: 600; color: #1A73E8; border: 1px solid #DADCE0; border-radius: 999px; padding: 6px 4px; }
/* mock: review with owner reply */
.m-review { max-width: 330px; padding: 12px 14px; }
.m-review__who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #202124; }
.m-review__av { width: 24px; height: 24px; border-radius: 50%; background: #E8EBF0; color: #3C4043; font-size: 10px; display: grid; place-items: center; }
.m-review__text { font-size: 12px; color: #3C4043; margin-top: 6px; }
.m-review__reply { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--mint); background: #F6F8FB; border-radius: 0 8px 8px 0; font-size: 11.5px; color: #3C4043; }
.m-review__reply b { display: block; font-size: var(--t-xs); color: var(--mint-ink); font-family: var(--font-mono); letter-spacing: 0; text-transform: none; margin-bottom: 2px; }
.stat-strip__item--visual .m-card { box-shadow: 0 14px 30px -18px rgba(10, 15, 26, 0.35); }

/* Flow graphic: ad click -> page -> outcome, before and after */
.flow { display: grid; gap: var(--s-4); }
.flow__row { display: grid; grid-template-columns: 110px 1fr auto 1fr auto 1fr; align-items: center; gap: var(--s-3); }
.flow__tag { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.flow__step { background: #fff; border: 1px solid transparent; border-radius: 12px; padding: 12px 14px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-align: center; }
.flow__step--bad { border-color: rgba(199, 62, 29, 0.35); background: rgba(199, 62, 29, 0.06); color: var(--rust); }
.flow__step--good { border-color: var(--mint-edge); background: var(--mint-soft); color: var(--mint-ink); }
.flow__arrow { color: var(--ink-mute); }
@media (max-width: 720px) {
  .flow__row { grid-template-columns: 1fr; gap: 6px; padding: var(--s-4) 0; border-top: var(--rule); }
  .flow__arrow { transform: rotate(90deg); justify-self: center; }
}

/* mock: the same ad in two languages */
.m-pair { max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.m-pair__col { padding: 12px 14px; }
.m-pair__col + .m-pair__col { border-left: 1px solid transparent; background: #FBFCFD; }
.m-pair .m-title { font-size: 13.5px; }
.flow__q { font-weight: 500; font-style: normal; }

/* Service cards: a picture of each service, then one line and a link (services hub) */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.svc-cards--2 { grid-template-columns: repeat(2, 1fr); }
.svc-card { background: #fff; border: 1px solid transparent; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; transition: border-color 200ms ease, box-shadow 250ms ease, transform 160ms var(--ease-ui); }
.svc-card:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .svc-card:hover { border-color: var(--ink); box-shadow: 0 18px 40px -24px rgba(10, 15, 26, 0.35); } }
.svc-card__stage { height: 250px; background: #EEF1F6; display: grid; place-items: center; padding: var(--s-6); overflow: hidden; }
.svc-card__stage .m-card { max-width: 290px; }
.svc-card__body { padding: var(--s-5) var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svc-card__tag { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--mint-ink); }
.svc-card__title { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; }
.svc-card__desc { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); flex: 1; }
.svc-card__link { margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--mint-ink); }
.deliverable__link { margin-top: var(--s-4); font-size: var(--t-sm); font-weight: 600; }
.deliverable__link a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
@media (max-width: 1024px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .svc-cards, .svc-cards--2 { grid-template-columns: 1fr; } .svc-card__stage { height: auto; padding: var(--s-8) var(--s-4); } }

/* Row of chips (e.g. the ten scorecard areas) */
.areas-row { margin-top: var(--s-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-soft); }
.areas-row__label { margin-right: var(--s-2); font-weight: 600; color: var(--ink); }
.areas-row .what__chip { border: 1px solid transparent; background: #fff; border-radius: 999px; padding: 6px 12px; font-size: var(--t-xs); color: var(--ink); }

.steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .steps--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .steps--3 { grid-template-columns: 1fr; } }

/* Facts card (hero) */
.m-facts { max-width: 340px; padding: 6px 16px; }
.m-facts__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 13px; }
.m-facts__row + .m-facts__row { border-top: 1px solid transparent; }
.m-facts__row span { color: #5F6368; }
.m-facts__row b { color: var(--ink); font-weight: 600; text-align: right; }

/* Season graphic: twelve months, busy vs quiet (illustration, no data) */
.season { margin-bottom: var(--s-10); padding: var(--s-6); background: #fff; border: 1px solid transparent; border-radius: 16px; }
.season__bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end; height: 120px; }
.season__bars i { display: block; border-radius: 4px 4px 0 0; background: var(--obsidian); }
.season__bars i.is-quiet { background: #D5DAE3; }
.season__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 8px; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; color: var(--ink-mute); text-align: center; }
.season__note { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-6); font-size: var(--t-sm); color: var(--ink-soft); }
.season__key { display: inline-flex; align-items: center; gap: 8px; }
.season__key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--obsidian); }
.season__key--quiet::before { background: #D5DAE3; }
.season__illus { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
@media (max-width: 720px) { .season__bars, .season__months { gap: 3px; } .season__months { font-size: 9px; } .season__illus { margin-left: 0; } }

/* Form + "what happens next" side panel (scorecard request) */
.form-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-12); align-items: start; }
.next-panel { position: sticky; top: 96px; background: #fff; border: 1px solid transparent; border-radius: 18px; padding: var(--s-6); }
.next-panel__head { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-mute); margin-bottom: var(--s-4); }
.next-step { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top: var(--rule); }
.next-step .deliverable__icon { width: 44px; height: 44px; margin: 0; }
.next-step__when { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--mint-ink); }
.next-step__what { font-size: var(--t-sm); line-height: 1.5; color: var(--ink); font-weight: 600; margin-top: 2px; }
/* Scorecard preview card (ten rows) */
.m-score { max-width: 340px; padding: 12px 16px; }
.m-score__row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12px; color: #3C4043; }
.m-score__row + .m-score__row { border-top: 1px solid transparent; }
.m-score__row span:last-child { font-family: var(--font-mono); color: var(--ink-mute); white-space: nowrap; }
.m-score__total { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ink); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink); }
@media (max-width: 1024px) { .form-split { grid-template-columns: 1fr; } .next-panel { position: static; } }

/* Compact dark hero for utility pages (contact, thank-you, 404) */
.page-hero--compact { padding: var(--s-12) 0 var(--s-16); }
.page-hero--compact .page-hero__visual { padding: 0; }
.page-hero--compact .next-panel { position: static; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.page-hero .link-arrow { color: #fff; align-self: center; }

/* ---------- Phones: keep the pages short (2026-10-14, Frank) ----------
   Icon tiles become compact rows (icon left, text right); step cards become one swipeable row
   with the next card peeking; the flow graphic tightens. */
@media (max-width: 720px) {
  .deliverables--icons .deliverable { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; padding: var(--s-4) 0; }
  .deliverables--icons .deliverable > :not(.deliverable__icon) { grid-column: 2; }
  .deliverables--icons .deliverable__icon { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; border-radius: 10px; }
  .deliverables--icons .deliverable__icon svg { width: 20px; height: 20px; }
  .deliverables--icons .deliverable__title { font-size: 1.05rem; margin-bottom: 4px; }
  .deliverables--icons .deliverable__body { font-size: 0.875rem; line-height: 1.45; }
  .deliverables--icons .deliverable__link { margin-top: 6px; }

  .steps, .steps--3 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--grid-pad)); padding: 0 var(--grid-pad) var(--s-2); scroll-padding: 0 var(--grid-pad); scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 84%; scroll-snap-align: start; }

  .flow { gap: 0; }
  .flow__row { gap: 4px; padding: var(--s-3) 0; }
  .flow__step { padding: 8px 10px; font-size: 0.875rem; }
  .flow__arrow { line-height: 1; }
}

/* Design-taste cleanup (2026-10-15): flat dark hero, nothing at rest casts a shadow */
.page-hero__photo { box-shadow: none; }