/*
Theme Name: SBS — Scalable Business Solutions
Theme URI: https://www.scalablebusinesssolutions.com/
Author: Scalable Business Solutions
Author URI: https://www.scalablebusinesssolutions.com/
Description: Custom marketing theme for SBS — SEO, AI search (AEO/GEO), paid ads, and websites for small businesses. Corporate light design in SBS orange, with lead forms on every page, programmatic location pages, blog templates, and Customizer settings for logo, contact details, and privacy.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbs
Tags: one-column, custom-logo, custom-menu
*/

/* ============ TOKENS ============ */
:root {
  --bg: #ffffff;
  --bg-raised: #f6f8fa;
  --bg-card: #ffffff;
  --bg-dark: #171e26;
  --line: #e2e7ed;
  --text: #1d242c;
  --text-dim: #59636e;
  --accent: #f5781e;
  --accent-dim: #d9640f;
  --accent-tint: #fdeadd;
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-dim: rgba(255, 255, 255, 0.66);
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 12px;
  --radius-btn: 6px;
  --container: 1160px;
  --shadow-card: 0 1px 2px rgba(16, 24, 32, 0.05), 0 10px 28px -14px rgba(16, 24, 32, 0.14);
  --shadow-lift: 0 2px 4px rgba(16, 24, 32, 0.06), 0 16px 36px -14px rgba(16, 24, 32, 0.18);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 0.5em;
}

h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.2rem; }

h2 em, h1 em { font-style: normal; color: var(--accent); }

p { margin: 0 0 1em; }

a { color: inherit; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow { max-width: 820px; }

.section { padding: 96px 0; }

.section__head { max-width: 720px; margin-bottom: 48px; }

.section__sub { color: var(--text-dim); font-size: 1.05rem; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 16px;
}

.eyebrow--dark { color: var(--on-dark-dim); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn--lg { padding: 15px 30px; font-size: 1.04rem; }

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover { background: var(--accent-dim); }

.btn--ghost {
  color: var(--text);
  border: 1px solid var(--line);
  background: transparent;
}

.btn--ghost:hover { border-color: var(--text-dim); }

.btn--light { background: #fff; color: var(--accent-dim); }
.btn--light:hover { background: var(--bg-raised); }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}

.nav.is-scrolled { box-shadow: 0 4px 18px -10px rgba(16, 24, 32, 0.18); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 74px;
}

.nav__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
}

.nav__logo-mark {
  width: 26px;
  height: 26px;
  color: var(--accent);
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav__links a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.93rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav__links a:hover { color: var(--text); }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav__phone svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

.nav__phone:hover { color: var(--accent-dim); }

.nav__cta { padding: 10px 20px; font-size: 0.9rem; }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  margin-left: auto;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  margin: 6px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ============ HERO ============ */
.hero {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  padding: 150px 0 84px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero__title {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 20px;
}

.hero__sub {
  font-size: 1.12rem;
  color: var(--text-dim);
  max-width: 520px;
  margin-bottom: 26px;
}

.hero__proof {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.97rem;
}

.hero__proof svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.hero__note {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
}

/* Compact hero lead form */
.form--hero { padding: 28px 26px 24px; }

.form--hero .form__head { margin-bottom: 16px; }

.form--hero .form__head h3 { font-size: 1.18rem; }

.form--hero .form__field { margin-bottom: 12px; }

/* ============ TRUST STRIP ============ */
.strip {
  background: var(--bg-dark);
  color: var(--on-dark);
  padding: 18px 0;
}

.strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
}

.strip__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 600;
}

.strip__item svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ============ POSITIONING ============ */
.problem__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.problem__right { font-size: 1.05rem; color: var(--text-dim); }

.problem__right strong { color: var(--text); }

.checklist {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 600;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--accent);
}

.problem__punch {
  margin-top: 32px;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}

.problem__punch span { color: var(--accent-dim); }

/* ============ SERVICES ============ */
.services { background: var(--bg-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-dim);
  margin-bottom: 18px;
}

.card__icon svg { width: 23px; height: 23px; }

.card p.card__tag {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-dim);
  margin: -4px 0 12px;
}

.card p { color: var(--text-dim); font-size: 0.97rem; }

.card ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.card li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.93rem;
  font-weight: 500;
}

.card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
}

/* ============ PROCESS ============ */
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  border-top: 2px solid var(--line);
  padding-top: 26px;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--accent-dim);
  font-weight: 800;
  margin-bottom: 16px;
}

.step h3 { font-size: 1.08rem; }

.step p { color: var(--text-dim); font-size: 0.94rem; margin: 0; }

/* ============ RESULTS ============ */
.results { background: var(--bg-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.results__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

.stat {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px 30px;
}

.stat__value {
  display: block;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.stat__value::first-letter { color: var(--accent); }

.stat__label { color: var(--text-dim); font-size: 0.94rem; }

.quote {
  margin: 0;
  max-width: 780px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 30px 32px;
}

.quote blockquote {
  margin: 0 0 14px;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.55;
}

.quote figcaption { color: var(--text-dim); font-size: 0.92rem; }

/* ============ WHY SBS ============ */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 32px;
}

.feature {
  border-top: 2px solid var(--line);
  padding-top: 22px;
}

.feature h3 { font-size: 1.05rem; }

.feature h3::before {
  content: "✓ ";
  color: var(--accent);
}

.feature p { color: var(--text-dim); font-size: 0.94rem; margin: 0; }

/* ============ WHAT'S NEW ============ */
.news { background: var(--bg-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 26px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.news-card__type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 14px;
}

.news-card h3 {
  font-size: 1.08rem;
  line-height: 1.4;
  margin-bottom: 18px;
}

.news-card__link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-dim);
}

/* ============ FAQ ============ */
.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  font-weight: 600;
  font-size: 1.08rem;
  padding: 24px 40px 24px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 0.15s ease;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq__item summary:hover { color: var(--accent-dim); }

.faq__item p {
  color: var(--text-dim);
  padding-bottom: 24px;
  max-width: 680px;
  margin: 0;
}

/* ============ CONTACT / CTA (dark band) ============ */
.cta {
  background: var(--bg-dark);
  color: var(--on-dark);
  padding: 96px 0;
}

.cta__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.cta h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: #fff;
}

.cta__sub {
  font-size: 1.1rem;
  color: var(--on-dark-dim);
  margin-bottom: 26px;
}

.cta__fit {
  color: var(--on-dark-dim);
  font-size: 0.98rem;
  margin-bottom: 22px;
}

.cta__fit strong { color: #fff; }

.cta__audit {
  font-weight: 500;
  color: var(--on-dark);
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}

.cta--compact { padding: 80px 0; }
.cta--compact h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.cta--compact .cta__sub { max-width: 560px; }

/* ---- Form card ---- */
.form {
  background: var(--bg);
  border-radius: var(--radius);
  border-top: 4px solid var(--accent);
  padding: 32px 30px 28px;
  color: var(--text);
  box-shadow: var(--shadow-lift);
}

.form__head { margin-bottom: 20px; }

.form__head h3 {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.form__head p {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0;
}

.form fieldset {
  border: 0;
  margin: 0 0 26px;
  padding: 0;
}

.form legend {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 14px;
  padding: 0;
}

.form legend::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form__field { margin-bottom: 14px; }

.form__field label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.15s ease;
}

.form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2359636e' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.form__field select:invalid { color: var(--text-dim); }

.form__field textarea { resize: vertical; }

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form__submit { width: 100%; }

.form__note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 14px 0 0;
}

.form__msg { border-radius: var(--radius-btn); padding: 14px 16px; margin-bottom: 20px; font-size: 0.95rem; font-weight: 500; }
.form__msg--ok { background: rgba(46, 125, 50, 0.08); border: 1px solid rgba(46, 125, 50, 0.35); color: #2e7d32; }
.form__msg--err { background: rgba(179, 38, 30, 0.06); border: 1px solid rgba(179, 38, 30, 0.3); color: #b3261e; }

/* Honeypot: visually removed, invisible to humans */
.form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ============ FOOTER ============ */
.footer {
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  padding: 64px 0 28px;
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}

.footer__brand p { color: var(--text-dim); margin-top: 16px; font-size: 0.93rem; }

.footer__col h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.footer__col a {
  display: block;
  text-decoration: none;
  color: var(--text);
  font-size: 0.93rem;
  margin-bottom: 10px;
  transition: color 0.15s ease;
}

.footer__col a:hover { color: var(--accent-dim); }

.footer__col span { display: block; color: var(--text-dim); font-size: 0.93rem; margin-bottom: 10px; }

.footer__legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
  color: var(--text-dim);
  font-size: 0.86rem;
}

.footer__privacy { display: flex; flex-wrap: wrap; gap: 8px 18px; width: 100%; padding-top: 4px; }
.footer__privacy a { color: var(--text-dim); font-size: 0.83rem; text-decoration: none; }
.footer__privacy a:hover { color: var(--accent-dim); }

/* ============ NAV MENU & DROPDOWNS ============ */
/* Two shapes of markup land inside .nav__links: the built-in fallback prints
   bare <a> links, an assigned menu prints <ul><li> with optional nested
   .sub-menu lists. Dropdowns open on hover and on keyboard focus. */
.nav__links > ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__links li { position: relative; }

.nav__links .menu-item-has-children > a::after { content: " ▾"; font-size: 0.72em; color: var(--accent); }

.nav__links .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  z-index: 120;
  min-width: 230px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  display: none;
}

/* Invisible bridge so the cursor can travel from the label to the panel. */
.nav__links .sub-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }

.nav__links li:hover > .sub-menu,
.nav__links li:focus-within > .sub-menu { display: block; }

.nav__links .sub-menu li { display: block; }
.nav__links .sub-menu a { display: block; padding: 9px 12px; border-radius: 6px; white-space: nowrap; }
.nav__links .sub-menu a:hover { background: var(--bg-raised); color: var(--text); }

.nav__logo-img { height: 44px; width: auto; }
.footer .nav__logo-img { height: 40px; }

/* Fixed nav offset when the WP admin bar is showing */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

.screen-reader-text { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ============ SUBPAGES (blog, posts, pages) ============ */
.subpage { padding-top: 74px; }

.post-title { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 14px; }

.post-thumb { margin: 28px 0; }
.post-thumb img { border-radius: var(--radius); }

.entry-content { font-size: 1.02rem; }
.entry-content a { color: var(--accent-dim); }
.entry-content h2 { font-size: 1.6rem; margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content img { border-radius: var(--radius); height: auto; }
.entry-content ul, .entry-content ol { margin: 0 0 1em; padding-left: 1.3em; }
.entry-content blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--text-dim); }
.entry-content figcaption, .wp-caption-text { color: var(--text-dim); font-size: 0.85rem; margin-top: 8px; }
.entry-content pre { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 16px; overflow-x: auto; font-size: 0.9rem; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 6px 24px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 24px; }

.post-back { margin-top: 48px; }
.post-back a { font-weight: 600; color: var(--accent-dim); text-decoration: none; }

.archive-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

/* Blog pagination */
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--radius-btn); text-decoration: none; color: var(--text); font-size: 0.93rem; font-weight: 500; }
.pagination .page-numbers.current, .pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent-dim); }

/* ============ GROWTH: EXIT-INTENT POPUP ============ */
body.popup-open { overflow: hidden; }

.popup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.popup[hidden] { display: none; }

.popup__overlay { position: absolute; inset: 0; background: rgba(17, 22, 28, 0.6); }

.popup__card {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius);
  border-top: 4px solid var(--accent);
  max-width: 480px;
  width: 100%;
  padding: 38px 34px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.4);
}

.popup__close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--text-dim); cursor: pointer; }
.popup__close:hover { color: var(--text); }

.popup__title { font-size: 1.5rem; margin-bottom: 10px; }
.popup__sub { color: var(--text-dim); margin-bottom: 20px; }

.popup__form { display: flex; gap: 10px; flex-wrap: wrap; }
.popup__input { flex: 1 1 200px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 12px 16px; font-family: var(--font-body); font-size: 0.95rem; }
.popup__input:focus { outline: none; border-color: var(--accent); }

.popup__note { font-size: 0.8rem; color: var(--text-dim); margin: 12px 0 0; }
.popup__success { font-weight: 600; margin: 8px 0 0; }
.popup__success a { color: var(--accent-dim); }
.popup__error { color: #b3261e; font-size: 0.85rem; margin: 8px 0 0; }

/* ============ GROWTH: MOBILE STICKY CTA BAR ============ */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}

.sticky-cta .btn { display: block; width: 100%; text-align: center; }
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta.is-shown.is-hidden { transform: translateY(110%); }

/* ============ GROWTH: BREADCRUMBS ============ */
.breadcrumbs { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 18px; }
.breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-dim); }
.breadcrumbs span[aria-current] { color: var(--text); }
.breadcrumbs .sep { padding: 0 7px; color: var(--text-dim); opacity: 0.5; }

/* ============ A11Y ============ */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 0; }

/* ============ PRIVACY: CONSENT BANNER ============ */
.consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 260;
  max-width: 460px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.35);
  padding: 22px 24px;
}

.consent[hidden] { display: none; }

.consent__text { font-size: 0.92rem; color: var(--text-dim); margin: 0 0 14px; }
.consent__text a { color: var(--accent-dim); }

.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Accepting and declining are equally easy: one click each, same size. */
.consent__btn { padding: 10px 20px; font-size: 0.95rem; }
.consent__btn--decline { background: transparent; border: 1px solid var(--text-dim); color: var(--text); }
.consent__btn--decline:hover { border-color: var(--text); }

/* ============ MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .news-card, .sticky-cta { transition: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .nav__phone { display: none; }
}

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .services__grid { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .results__stats { grid-template-columns: 1fr; }
  .problem__grid { grid-template-columns: 1fr; gap: 32px; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .news__grid { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; gap: 48px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .strip__inner { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .section { padding: 68px 0; }

  .hero { padding: 120px 0 60px; }

  .nav__links {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px;
  }

  .nav__links.is-open { display: flex; }

  .nav__links a { padding: 12px 0; font-size: 1.05rem; }

  .nav__cta { display: none; }

  .nav__toggle { display: block; }

  .nav__toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__toggle.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }

  /* Inside the mobile panel: everything stacks, sections show their pages
     inline and indented. */
  .nav__links > ul { display: block; width: 100%; }
  .nav__links li { position: static; }
  .nav__links .menu-item-has-children > a::after { content: none; }
  .nav__links .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 6px 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav__links .sub-menu::before { display: none; }
  .nav__links .sub-menu a { padding: 10px 0; border-radius: 0; }

  .process__steps { grid-template-columns: 1fr; }

  .why__grid { grid-template-columns: 1fr; }

  .form { padding: 28px 22px; }

  .form__row { grid-template-columns: 1fr; gap: 0; }

  .sticky-cta { display: block; }
  .footer { padding-bottom: 104px; } /* keep footer links reachable above the bar */
}

/* ============ VISIBILITY VIGNETTES ============ */
/* Animated scenes ported from the SBS creative assets (SBS 01/02/03/05/06
   .dc.html): same copy and choreography, rebuilt responsive. The originals
   are 1080x1920 looping ad slides; timings and keyframe names are theirs. */
:root { --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }

/* The source assets loop with long hidden phases (they're ad slides).
   On the site, entrances play once and hold so content never vanishes;
   only ambient details (typing, caret, map ripple) keep looping. */
@keyframes sbsType { 0% { width: 0; } 16% { width: 100%; } 92% { width: 100%; } 100% { width: 0; } }
@keyframes sbsBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sbsInOnce { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sbsSinkOnce { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0.45; transform: translateY(6px) scale(0.98); } }
@keyframes sbsDropOnce { 0% { opacity: 0; transform: translateY(-56px); } 55% { opacity: 1; transform: translateY(0); } 75% { transform: translateY(-9px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes sbsRing { 0% { transform: scale(0.35); opacity: 0.5; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sbsGrowOnce { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.vig__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.vig {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.vig__scene {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  padding: 26px;
  flex: 1;
}

.vig__caption { padding: 20px 26px 24px; }
.vig__caption h3 { font-size: 1.08rem; margin-bottom: 4px; }
.vig__caption p { color: var(--text-dim); font-size: 0.93rem; margin: 0; }

.vig--dark { background: var(--bg-dark); border-color: #262d37; }
.vig--dark .vig__scene { background: transparent; border-bottom-color: #262d37; }
.vig--dark .vig__caption h3 { color: #fff; }
.vig--dark .vig__caption p { color: var(--on-dark-dim); }

.vig-stars { color: #ffc02e; }

/* --- 01: Google Search --- */
.vig-search { display: flex; flex-direction: column; gap: 14px; }

.vig-search__bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 46px;
  padding-left: 18px;
  overflow: hidden;
}

.vig-search__type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: max-content;
  font-size: 0.95rem;
  color: var(--text);
  animation: sbsType 9s steps(20) infinite;
}

.vig-search__caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--accent);
  margin-left: 3px;
  animation: sbsBlink 1s step-end infinite;
}

.vig-search__btn {
  margin-left: auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vig-search__btn svg { width: 20px; height: 20px; }

.vig-result {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}

.vig-result--win { animation: sbsInOnce 0.7s ease-out 0.9s both; box-shadow: var(--shadow-card); }
.vig-result--lose { animation: sbsSinkOnce 0.8s ease 1.6s both; }

.vig-result__url { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.vig-chip { background: var(--accent-tint); color: var(--accent-dim); font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; padding: 1px 7px; border-radius: 5px; }
.vig-result__title { font-size: 1.02rem; font-weight: 700; color: #1a56db; margin-top: 3px; }
.vig-result__title--dim { color: #6c7fb8; }
.vig-result__meta { font-size: 0.85rem; color: var(--text-dim); margin-top: 2px; }

/* --- 02: Google Maps --- */
.vig-map { display: flex; flex-direction: column; gap: 12px; }

.vig-map__tile {
  position: relative;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, #e8eaed 0 44px, #dadce0 44px 48px),
    repeating-linear-gradient(0deg, #e8eaed 0 32px, #dadce0 32px 36px);
}

.vig-map__road { position: absolute; top: 52px; left: -20px; right: -20px; height: 14px; background: #fff; transform: rotate(-6deg); }
.vig-map__park { position: absolute; background: #dce9da; border-radius: 7px; }
.vig-map__park--a { top: 84px; left: 28px; width: 74px; height: 46px; }
.vig-map__park--b { top: 22px; right: 34px; width: 60px; height: 40px; }

.vig-map__ring,
.vig-map__ring--late { position: absolute; top: 42px; left: 50%; margin-left: -38px; width: 76px; height: 76px; border-radius: 999px; background: rgba(245, 120, 30, 0.32); animation: sbsRing 2.6s ease-out infinite; }
.vig-map__ring--late { animation-delay: 1.3s; }

.vig-map__pin { position: absolute; top: 36px; left: 50%; margin-left: -19px; animation: sbsDropOnce 1.1s cubic-bezier(0.3, 1.4, 0.5, 1) 0.4s both; }
.vig-map__pin > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px 999px 999px 4px;
  background: var(--accent);
  transform: rotate(-45deg);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.28);
}
.vig-map__pin > span::after { content: ""; width: 13px; height: 13px; border-radius: 999px; background: #fff; }

.vig-map__pin-sm { position: absolute; width: 20px; height: 20px; border-radius: 999px 999px 999px 3px; background: #9aa2ae; transform: rotate(-45deg); }
.vig-map__pin-sm--a { bottom: 26px; left: 40px; }
.vig-map__pin-sm--b { top: 26px; right: 44px; }

.vig-pack {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  animation: sbsSinkOnce 0.8s ease 1.5s both;
}

.vig-pack--win { border: 2px solid var(--accent); box-shadow: 0 10px 22px rgba(245, 120, 30, 0.14); animation: sbsInOnce 0.7s ease-out 0.7s both; }

.vig-pack__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-dim);
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.vig-pack__rank--dim { background: #e8ebef; color: #7a828f; }

.vig-pack__body { display: flex; flex-direction: column; }
.vig-pack__body strong { font-size: 0.95rem; }
.vig-pack__dim { color: var(--text-dim); font-weight: 600; }
.vig-pack__body small { font-size: 0.78rem; color: var(--text-dim); }

/* --- 03: AI Answer (dark) --- */
.vig-ai { display: flex; flex-direction: column; gap: 16px; }

.vig-ai__q {
  align-self: flex-end;
  max-width: 85%;
  background: #2e343e;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 11px 14px;
  border-radius: 14px 14px 4px 14px;
}

.vig-ai__row { display: flex; gap: 12px; }

.vig-ai__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.vig-ai__reply p { color: #d7dbe2; font-size: 0.92rem; line-height: 1.45; margin: 0 0 10px; animation: sbsInOnce 0.7s ease-out 0.5s both; }

.vig-ai__cite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 120, 30, 0.14);
  border: 1px solid rgba(245, 120, 30, 0.5);
  border-radius: 10px;
  padding: 9px 13px;
  animation: sbsInOnce 0.7s ease-out 1.2s both;
}
.vig-ai__cite strong { color: #ff8a45; font-size: 0.98rem; }
.vig-ai__cite small { font-family: var(--font-mono); font-size: 0.7rem; color: #ffb588; }

.vig-ai__engines { display: flex; flex-wrap: wrap; gap: 8px; }
.vig-ai__engines span { font-family: var(--font-mono); font-size: 0.68rem; color: #9aa2ae; border: 1px solid #2e343e; border-radius: 999px; padding: 5px 11px; }

/* --- 05/06: Growth --- */
.vig-growth { display: flex; flex-direction: column; gap: 8px; }

.vig-growth__num { font-size: 2.4rem; color: var(--accent-dim); }
.vig-growth__label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text); margin-top: 2px; }

.vig-growth__bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 12px; }
.vig-growth__bars span { flex: 1; background: #d6dae1; border-radius: 5px 5px 0 0; transform-origin: bottom; animation: sbsGrowOnce 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.vig-growth__bars span:nth-child(2) { animation-delay: 0.1s; }
.vig-growth__bars span:nth-child(3) { animation-delay: 0.2s; }
.vig-growth__bars span:nth-child(4) { animation-delay: 0.3s; }
.vig-growth__bars span:nth-child(5) { animation-delay: 0.4s; }
.vig-growth__bars span:nth-child(6) { animation-delay: 0.5s; }
.vig-growth__bar--warm { background: #ffc49a !important; }
.vig-growth__bar--hot { background: #fb8b4b !important; }
.vig-growth__bar--accent { background: var(--accent) !important; }

.vig-growth__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 8px; }

@media (max-width: 960px) {
  .vig__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vig *, .vig *::after { animation: none !important; }
  .vig-search__type { width: auto !important; }
}

/* ============ PHONE MOCKUPS (SBS 01 Search + Web Mgmt Demonstration) ============ */
@keyframes sbsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sbsScroll { 0%, 18% { transform: translateY(0); } 66%, 84% { transform: translateY(calc(-100% + 500px)); } 96%, 100% { transform: translateY(0); } }

.phone {
  width: 300px;
  max-width: 82vw;
  background: #16181c;
  border-radius: 38px;
  padding: 9px;
  box-shadow: 0 30px 60px -22px rgba(18, 21, 27, 0.45);
  flex-shrink: 0;
}

.phone__screen {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
}

.phone__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 16px;
  background: #16181c;
  border-radius: 0 0 10px 10px;
  z-index: 6;
}

.phone__screen--dark {
  background: linear-gradient(180deg, #1e2126 0%, #2c3038 55%, #3a3f49 100%);
  padding: 40px 13px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.phone__screen--dark .vig-search__bar { border: 0; height: 42px; }

.vig-result--lose2 { animation-delay: 1.75s; }

.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #12151b;
}

.phone__signal { display: flex; align-items: flex-end; gap: 2px; }
.phone__signal i { display: block; width: 3px; background: #12151b; border-radius: 1px; }
.phone__signal i:nth-child(1) { height: 4px; }
.phone__signal i:nth-child(2) { height: 6px; }
.phone__signal i:nth-child(3) { height: 8px; }
.phone__signal i:nth-child(4) { height: 10px; }

/* --- Feature row: search phone + copy --- */
.vig__feature {
  display: grid;
  grid-template-columns: minmax(270px, 330px) 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 48px;
}

.vig__feature-copy h3 { font-size: 1.4rem; margin-bottom: 10px; }
.vig__feature-copy p { color: var(--text-dim); max-width: 480px; }

.vig__punch {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  font-weight: 600;
  color: var(--text) !important;
}

.vig__grid--three { grid-template-columns: repeat(3, 1fr); }

/* --- Websites showcase --- */
.websites__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}

.websites__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.websites__chips span {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.websites__note { color: var(--text-dim); font-size: 0.95rem; margin: 0; }

.phone--web { animation: sbsFloat 6s ease-in-out infinite; }

/* --- Demo site inside the web phone --- */
.demo__header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid #eaecf0;
}

.demo__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #12151b;
  flex-shrink: 0;
}
.demo__logo i { display: block; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 999px; }

.demo__brand { line-height: 1.05; flex: 1; }
.demo__brand strong { display: block; font-size: 0.78rem; font-weight: 800; color: #12151b; letter-spacing: -0.01em; }
.demo__brand small { display: block; font-size: 0.5rem; font-weight: 600; color: #8a919c; letter-spacing: 0.14em; }

.demo__call { background: var(--accent); border-radius: 999px; padding: 5px 10px; font-size: 0.62rem; font-weight: 600; color: #fff; }

.demo__burger { display: flex; flex-direction: column; gap: 3px; }
.demo__burger i { display: block; width: 13px; height: 2px; background: #12151b; border-radius: 2px; }

.demo__viewport { height: 500px; overflow: hidden; }
.demo__scroll { display: flex; flex-direction: column; animation: sbsScroll 9s cubic-bezier(0.55, 0, 0.45, 1) infinite; }

.demo__hero {
  background: linear-gradient(165deg, #29303b 0%, #12151b 100%);
  padding: 60px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.demo__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.52rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
}
.demo__badge i { display: block; width: 5px; height: 5px; border-radius: 999px; background: #4ade80; }

.demo__h1 { font-size: 1.3rem; line-height: 1.08; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.demo__sub { font-size: 0.7rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }

.demo__cta-row { display: flex; gap: 7px; margin-top: 4px; }

.demo__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  height: 36px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
}
.demo__btn--accent { background: var(--accent); flex: 1; }
.demo__btn--dark { background: #12151b; flex: 1; }
.demo__btn--ghost { width: 36px; flex: 0 0 36px; border: 2px solid rgba(255, 255, 255, 0.45); }
.demo__btn--ghost i { display: block; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 4px 4px 5px 4px; transform: rotate(8deg); }

.demo__reviews {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #12151b;
  padding: 9px 14px;
  font-size: 0.62rem;
}
.demo__reviews strong { color: #fff; font-size: 0.66rem; }
.demo__reviews-count { color: #8a919c; }
.demo__reviews em { margin-left: auto; font-style: normal; font-size: 0.54rem; font-weight: 600; color: #ff8a45; letter-spacing: 0.1em; }

.demo__services { padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.demo__eyebrow { font-family: var(--font-mono); font-size: 0.52rem; font-weight: 600; color: var(--accent-dim); letter-spacing: 0.18em; }
.demo__h2 { font-size: 0.98rem; font-weight: 700; color: #12151b; letter-spacing: -0.01em; }

.demo__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 4px; }
.demo__tile { border: 1px solid #eaecf0; border-radius: 10px; padding: 10px 9px; display: flex; flex-direction: column; gap: 5px; }
.demo__tile strong { font-size: 0.66rem; color: #12151b; }
.demo__tile small { font-size: 0.56rem; line-height: 1.35; color: #7a828f; }

.demo__tile-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-tint); }
.demo__tile-icon::after { content: ""; display: block; }
.demo__tile-icon--ring::after { width: 9px; height: 9px; border: 2px solid var(--accent); border-radius: 999px; }
.demo__tile-icon--square::after { width: 9px; height: 9px; background: var(--accent); border-radius: 2px; }
.demo__tile-icon--outline::after { width: 9px; height: 9px; border: 2px solid var(--accent); border-radius: 2px; }
.demo__tile-icon--line::after { width: 9px; height: 2px; background: var(--accent); border-radius: 2px; }

.demo__quote { margin: 0 14px 14px; background: #f5f6f8; border-radius: 11px; padding: 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.demo__quote .vig-stars { font-size: 0.6rem; letter-spacing: 1px; }
.demo__quote p { font-size: 0.66rem; line-height: 1.45; color: #2b303a; margin: 0; }
.demo__quote-by { display: flex; align-items: center; gap: 5px; font-size: 0.56rem; color: #7a828f; }
.demo__quote-by i { display: block; width: 13px; height: 13px; border-radius: 999px; background: #d6dae1; }

.demo__footer-cta { background: #12151b; padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.demo__h3 { font-size: 0.88rem; font-weight: 700; color: #fff; }
.demo__footer-sub { font-size: 0.62rem; color: #9aa2ae; margin-bottom: 6px; }

.demo__sticky {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 7;
  display: flex;
  gap: 7px;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid #eaecf0;
  padding: 8px 12px 14px;
}

.phone__home { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; border-radius: 999px; background: rgba(18, 21, 27, 0.32); z-index: 8; }

@media (max-width: 960px) {
  .vig__feature { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .vig__feature-copy { text-align: left; justify-self: start; }
  .vig__grid--three { grid-template-columns: 1fr; }
  .websites__grid { grid-template-columns: 1fr; gap: 44px; justify-items: center; }
  .websites__copy { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .phone--web, .demo__scroll { animation: none !important; }
}