/* ===========================================================================
   Simons Digital Solutions — main.css
   Light theme only. Mobile-first. No frameworks, no build step.

   Design note: the palette comes from the logo and is deliberately unchanged.
   What changed is where the brightest colour goes. --accent-bright (mint) is
   reserved almost entirely for one thing: the outgoing message in the SMS
   thread component. That thread IS the product, so it gets the only loud
   colour on the page. Everything else stays navy, teal and white.
=========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
/* Inter, self-hosted as a variable font. Previously loaded from the Google
   Fonts CDN, which cost a DNS lookup + TLS handshake + a render-blocking
   stylesheet on every page before any text could paint. Two subsets, same as
   Google serves: latin covers the site, latin-ext is only fetched if a page
   actually uses those codepoints. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
/* Brand palette — extracted from the Simons Digital Solutions logo:
   #0D2137 dark navy (wordmark / primary text)
   #1B5C4E primary teal (logo tile / accent)
   #4ECBA5 bright mint (circuit lines / the outgoing-message bubble)
   #C8E6DC very light mint (tints, hover backgrounds)
   #F4FAF8 mint white (soft section backgrounds) */
:root {
  --bg:           #ffffff;
  --bg-soft:      #f4faf8;
  --bg-subtle:    #e8f1ed;
  --text:         #0d2137;
  --text-soft:    #3a4a60;
  /* 4.90:1 on white, 4.75:1 on --bg-soft. Both clear WCAG AA. */
  --text-muted:   #5a7488;
  --border:       #dde5e2;
  --border-soft:  #e8f1ed;
  --navy:         #0d2137;
  --navy-soft:    #16324f;
  --accent:       #1b5c4e;
  --accent-hover: #134c41;
  --accent-soft:  #e8f5f0;
  --accent-tint:  #c8e6dc;
  --accent-bright:#4ecba5;

  /* On-dark text. Both pass AA on --navy. */
  --on-dark:      #e6eef5;
  --on-dark-soft: #a8bccc;

  --shadow-sm:    0 1px 2px rgba(13, 33, 55, 0.05);
  --shadow-md:    0 4px 12px rgba(13, 33, 55, 0.07);
  --shadow-lg:    0 12px 32px rgba(13, 33, 55, 0.10);
  --shadow-card:  0 12px 28px rgba(27, 92, 78, 0.12);

  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-xl:    16px;

  /* 4px-base spacing scale. Use these instead of ad-hoc margins. */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 88px;  --space-10: 120px;

  --max-w:        1100px;
  --max-w-text:   720px;
  --header-h:     68px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  /* Utility face for timestamps, phone numbers and prices. This is the font of
     the device the message actually arrives on — it belongs to the subject. */
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { font: inherit; }

/* ── Accessibility baseline ──────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* The sticky header would otherwise cover anchor targets. */
:target { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); font-weight: 800; }
/* .section-heading h2 and .banner h2 reset this — both are more specific. */
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); margin-bottom: var(--space-4); }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p  { color: var(--text-soft); }
p + p { margin-top: 1em; }
a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover, a:focus { color: var(--accent-hover); text-decoration: underline; }
/* Links sitting inside body copy must not rely on colour alone to be findable
   (WCAG 1.4.1). Buttons and standalone link-actions are excluded — their shape
   already distinguishes them. */
p a:not(.btn):not(.btn-text) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
strong { color: var(--text); font-weight: 600; }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.lead {
  font-size: 1.15rem; color: var(--text-soft);
  max-width: 62ch; line-height: 1.65;
}
.lead-spaced { margin-bottom: var(--space-6); }

/* Mint highlight for the load-bearing phrase in a headline. Sits behind the
   text as an inset shadow so it never affects line height. */
.hl {
  box-shadow: inset 0 -0.32em 0 var(--accent-tint);
  padding: 0 0.04em;
}

/* ── Layout primitives ───────────────────────────────────────────────────── */
.container        { max-width: var(--max-w);      margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: var(--max-w-text); margin: 0 auto; padding: 0 var(--space-5); }

.section { padding: var(--space-8) 0; }
.section-tight { padding: var(--space-6) 0; }
.section-soft  { background: var(--bg-soft); }
@media (min-width: 768px) {
  .section       { padding: var(--space-9) 0; }
  .section-tight { padding: var(--space-7) 0; }
}

/* Third rhythm tier. The old design alternated #fff and #f4faf8, which are
   3% apart in luminance — the alternation was invisible. A real dark band is
   what makes the page read as designed. */
.section-dark {
  background: var(--navy);
  color: var(--on-dark);
}
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: #fff; }
.section-dark p  { color: var(--on-dark-soft); }
.section-dark .eyebrow { color: var(--accent-bright); }
.section-dark .section-heading h2::after { background: var(--accent-bright); }
.section-dark a { color: var(--accent-bright); }

.text-center { text-align: center; }

.section-heading {
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.section-heading h2 {
  position: relative;
  padding-bottom: var(--space-3);
  margin-bottom: 0;
  max-width: 24ch;
}
.section-heading h2::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.section-heading .section-link { font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff;
  padding: 10px var(--space-4); border-radius: 0 0 var(--radius-sm) 0;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header > .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}
/* Typographic wordmark. Set as text rather than an image: crisp at every size,
   no HTTP request, and indexable. The mint full stop is the entire mark. */
.wordmark {
  display: inline-flex; align-items: baseline;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.12rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover, .wordmark:focus { color: var(--navy); text-decoration: none; }
.wordmark-dot { color: var(--accent-bright); }
.wordmark:hover .wordmark-dot { color: var(--accent); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
  transition: border-color 0.15s, color 0.15s;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-menu {
  display: flex; gap: var(--space-5); align-items: center;
  list-style: none;
}
.nav-menu a {
  color: var(--text); font-weight: 500; font-size: 0.94rem;
  padding: var(--space-2) var(--space-1); position: relative;
  text-decoration: none;
  transition: color 0.15s;
}
.nav-menu a:hover { color: var(--accent); text-decoration: none; }
.nav-menu a.is-active { color: var(--accent); }
.nav-menu a.is-active::after {
  content: ''; position: absolute; left: var(--space-1); right: var(--space-1); bottom: 0;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav-cta {
  background: var(--accent);
  color: #fff !important;
  border-radius: var(--radius-sm);
  padding: 9px var(--space-4) !important;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--accent-hover); color: #fff !important; }
.nav-cta::after { display: none !important; }

/* ── Products submenu ────────────────────────────────────────────────────── */
/* A real <button aria-expanded> rather than a hover-only menu: hover menus are
   unreachable by keyboard and unusable on touch. JS toggles it; CSS only
   styles the two states. */
.submenu-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
  color: var(--text); font-weight: 500; font-size: 0.94rem;
  padding: var(--space-2) var(--space-1);
  position: relative;
  transition: color 0.15s;
}
.submenu-toggle:hover { color: var(--accent); }
.submenu-toggle.is-active { color: var(--accent); }
.submenu-toggle .caret { width: 14px; height: 14px; transition: transform 0.18s; }
.submenu-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.has-submenu { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 10px); left: -14px;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: none;
  z-index: 60;
}
.submenu.is-open { display: block; }
.submenu a {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 500;
  color: var(--text);
}
.submenu a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.submenu a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) 0 var(--space-4);
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
  }
  .nav-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-menu li { width: 100%; }
  .nav-menu a {
    display: block; padding: 14px var(--space-5);
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-menu a.is-active::after { display: none; }
  .nav-menu a.is-active { background: var(--accent-soft); }
  .nav-cta-item { padding: var(--space-3) var(--space-5) 0; }
  .nav-cta { display: block !important; text-align: center; border-bottom: 0 !important; }

  /* Submenu becomes an inline accordion rather than a floating panel. */
  .submenu-toggle {
    width: 100%; justify-content: space-between;
    padding: 14px var(--space-5);
    border-bottom: 1px solid var(--border-soft);
    font-size: 1rem;
  }
  .submenu {
    position: static; display: none;
    min-width: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; background: var(--bg-soft);
  }
  .submenu.is-open { display: block; }
  .submenu a {
    border-radius: 0;
    padding: 13px var(--space-5) 13px var(--space-7);
    border-bottom: 1px solid var(--border-soft);
  }
}
@media (min-width: 821px) {
  .nav-toggle { display: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 13px var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.97rem;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: #fff;
  transform: translateY(-1px); box-shadow: var(--shadow-card);
}
.btn-secondary { background: #fff; color: var(--accent); border-color: var(--accent); }
.btn-secondary:hover { background: var(--accent-soft); color: var(--accent-hover); }
.btn-on-dark { background: var(--accent-bright); color: var(--navy); border-color: var(--accent-bright); }
.btn-on-dark:hover { background: #6fdcbb; color: var(--navy); transform: translateY(-1px); }
.btn-lg { padding: 16px var(--space-7); font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Text link that behaves as a secondary action next to a button. */
.btn-text {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; font-size: 0.97rem; color: var(--accent);
  padding: 13px 0;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: var(--space-8) 0 var(--space-7); }
@media (min-width: 768px) { .hero { padding: var(--space-10) 0 var(--space-9); } }
.hero h1 { max-width: 20ch; color: var(--navy); }
.hero .subhead {
  margin-top: var(--space-5);
  font-size: 1.15rem; color: var(--text-soft);
  max-width: 56ch; line-height: 1.6;
}
@media (min-width: 768px) { .hero .subhead { font-size: 1.25rem; } }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }

.hero-centered { background: var(--bg-soft); text-align: center; }
.hero-centered h1 { margin: 0 auto; max-width: 22ch; }
.hero-centered .subhead { margin-left: auto; margin-right: auto; }
.hero-centered .hero-cta { justify-content: center; }

/* Asymmetric hero: copy left, SMS thread right. */
.hero-split { padding-bottom: var(--space-8); }
.hero-split > .container {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center;
}
@media (min-width: 900px) {
  .hero-split > .container { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.hero-split h1 { max-width: 16ch; }

/* One-line credibility strip under the CTAs. */
/* Two fixed lines rather than a wrapping row: a wrapped row strands the
   separator at the end of the line. */
.trust-strip {
  margin-top: var(--space-5);
  font-size: 0.88rem;
  color: var(--text-muted);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.trust-strip .dot { color: var(--accent-tint); margin: 0 var(--space-2); }

.cross-link {
  margin-top: var(--space-5);
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ===========================================================================
   SIGNATURE — the SMS thread
   The product is a text message. So the page explains itself with one: a
   missed call, the reply that fires automatically, and the customer coming
   back. The timestamps carry the whole argument, which is why they're set in
   the device's own monospace and never in the body face.
=========================================================================== */
.thread {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}
.thread-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-4);
}
.thread-avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
}
.thread-who { line-height: 1.3; }
.thread-name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.thread-number {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

/* The missed-call row. Deliberately the only red on the site. */
.thread-missed {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #fdf0ef;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.thread-missed svg { width: 17px; height: 17px; color: #c0392b; flex-shrink: 0; }
.thread-missed-text { font-size: 0.87rem; font-weight: 600; color: #8a2b21; }
.thread-missed-time {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: #a8564c; margin-left: auto; white-space: nowrap;
}

.thread-msgs { display: flex; flex-direction: column; gap: var(--space-3); }
.msg { max-width: 84%; }
.msg-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  font-size: 0.92rem;
  line-height: 1.5;
}
.msg-meta {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Outgoing = the automated reply = the product. The one loud colour. */
.msg-out { align-self: flex-end; }
.msg-out .msg-bubble {
  background: var(--accent-bright);
  color: #06231c;
  border-bottom-right-radius: var(--radius-sm);
  font-weight: 500;
}
.msg-out .msg-meta { justify-content: flex-end; }
.msg-out .msg-meta .tag {
  background: var(--accent-soft); color: var(--accent);
  padding: 1px 7px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.02em;
}

.msg-in { align-self: flex-start; }
.msg-in .msg-bubble {
  background: var(--bg-subtle);
  color: var(--text);
  border-bottom-left-radius: var(--radius-sm);
}

/* Caption under the thread — states the elapsed time in plain words. */
.thread-foot {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}
.thread-foot strong { color: var(--accent); font-weight: 700; }

/* ===========================================================================
   Product carousel
   Auto-advances, but: pauses on hover and on keyboard focus, stops entirely
   under prefers-reduced-motion, and is fully operable from the keyboard. An
   auto-rotating carousel that can't be stopped is one of the most common
   accessibility failures on the web — this one can always be stopped.
=========================================================================== */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; border-radius: var(--radius-xl); }
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: var(--space-7) var(--space-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
@media (min-width: 900px) {
  .carousel-slide { padding: var(--space-8) var(--space-8); }
}
/* Slides that aren't current must not be reachable by keyboard. */
.carousel-slide[aria-hidden="true"] { visibility: hidden; }

.slide-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .slide-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.slide-body .eyebrow { margin-bottom: var(--space-2); }
.slide-body h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
}
.slide-body p { margin-bottom: var(--space-5); }
.slide-price {
  font-family: var(--font-mono);
  font-size: 0.9rem; color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.carousel-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--accent);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.carousel-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.carousel-btn svg { width: 19px; height: 19px; }

.carousel-dots { display: flex; gap: var(--space-2); align-items: center; }
.carousel-dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent-tint);
  transition: background 0.15s, width 0.2s;
}
.carousel-dot[aria-current="true"] { background: var(--accent); width: 26px; border-radius: 999px; }

.carousel-pause {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
  padding: var(--space-2);
}
.carousel-pause:hover { color: var(--accent); }
.carousel-pause svg { width: 13px; height: 13px; }

/* ── Surfaces: three tiers ───────────────────────────────────────────────── */
.card-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* Tier 2 — standard */
.card {
  display: flex; flex-direction: column;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  border-color: var(--accent-tint);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.card h3 { margin-bottom: var(--space-2); }
.card p { font-size: 0.95rem; }

/* Tier 1 — flagship. Mint top rule, deeper shadow, bigger radius. */
.card-flagship {
  position: relative;
  padding: var(--space-7) var(--space-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-flagship::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
}
.card-flagship .lead { margin-bottom: var(--space-6); }
.card-flagship h2 { margin-bottom: var(--space-3); }

/* Products overview: flagship gets more room than the secondary service. */
.product-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .product-grid { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.product-grid .card { padding: var(--space-7) var(--space-6); }
.product-grid .checklist { margin: var(--space-5) 0; }
.product-grid h2 { margin-bottom: var(--space-3); }
.product-grid .slide-price { margin-bottom: var(--space-5); }

/* Tier 3 — quiet. No border, no shadow. For FAQ and supporting info. */
.block-quiet {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

/* ── Problem statements (homepage) ───────────────────────────────────────── */
.problem-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
}
@media (min-width: 800px) { .problem-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }
.problem h3 {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  margin-bottom: var(--space-2);
}
.problem p { font-size: 0.97rem; }
.problem-rule {
  width: 28px; height: 2px; background: var(--accent-tint);
  margin-bottom: var(--space-4);
}

/* ── Feature tiles ───────────────────────────────────────────────────────── */
.feature-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-tile {
  padding: var(--space-6) var(--space-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.feature-tile:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--accent-tint);
  transform: translateY(-3px);
}
.feature-tile .icon-box {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--accent-soft) 0%, var(--accent-tint) 100%);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.feature-tile .icon-box svg { width: 28px; height: 28px; }
.feature-tile h3 { margin-bottom: var(--space-2); }
.feature-tile p { font-size: 0.95rem; }

/* ── Numbered steps ──────────────────────────────────────────────────────── */
/* Numbering is used here because the content genuinely is a sequence: each
   step depends on the one before it. Mint numerals on navy. */
.steps {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
  counter-reset: step;
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.step { counter-increment: step; position: relative; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem; font-weight: 700;
  color: var(--accent-bright);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}
.step h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: var(--space-2); }
.step p { font-size: 0.94rem; line-height: 1.6; }
/* Connector rule between steps on wide screens. */
@media (min-width: 860px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute; top: 14px; left: 42px; right: calc(var(--space-5) * -1 + 8px);
    height: 1px; background: rgba(78, 203, 165, 0.25);
  }
}

/* ── Callout ─────────────────────────────────────────────────────────────── */
/* Reserved for the single biggest objection: "do I lose my number?" */
.callout {
  display: flex; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.callout svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.callout h3 { color: var(--accent); margin-bottom: var(--space-1); }
.callout p { font-size: 0.97rem; color: var(--text-soft); }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  max-width: 620px; margin: 0 auto;
}
@media (min-width: 620px) { .pricing { grid-template-columns: 1fr 1fr; } }
.price-cell {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.price-label {
  display: block;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.price-value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-unit { font-size: 0.9rem; color: var(--text-muted); font-family: var(--font-body); }
.price-note {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.faq-item h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: var(--space-2); }
.faq-item p { font-size: 0.96rem; }

/* ── Checklist ───────────────────────────────────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: var(--space-4); }
.checklist li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: 1rem; color: var(--text-soft); line-height: 1.6;
}
.checklist svg {
  width: 21px; height: 21px; flex-shrink: 0; margin-top: 3px;
  color: var(--accent);
}
.section-dark .checklist li { color: var(--on-dark-soft); }
.section-dark .checklist svg { color: var(--accent-bright); }

/* ── Two-column ──────────────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 800px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
.two-col h3 { margin-bottom: var(--space-3); }

/* ── Banner CTA ──────────────────────────────────────────────────────────── */
/* Navy → teal is a gradient you can actually see. The old one ran teal → teal. */
.banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--accent) 100%);
  color: #fff;
  text-align: center;
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(78, 203, 165, 0.22) 0%, transparent 55%);
  pointer-events: none;
}
.banner > .container { position: relative; }
.banner h2 { color: #fff; max-width: 24ch; margin: 0 auto; }
.banner p { color: rgba(255, 255, 255, 0.88); max-width: 52ch; margin: var(--space-4) auto 0; }
.banner .btn { margin-top: var(--space-6); }

/* ── Demo iframes ────────────────────────────────────────────────────────── */
.demo-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .demo-grid { grid-template-columns: 1fr 1fr; } }
.demo-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: var(--space-1); }
.demo-subtitle { font-size: 0.9rem; color: var(--text-muted); margin-bottom: var(--space-3); }
.demo-frame-wrap {
  position: relative; width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: #ffffff;
}
.demo-frame {
  display: block; width: 100%;
  min-height: 650px; height: 70vh; max-height: 850px;
  border: 0; background: #ffffff;
}
.demo-block.is-dark .demo-frame-wrap,
.demo-block.is-dark .demo-frame { background: #0b0b0b; }
.demo-caption { margin-top: var(--space-3); font-size: 0.88rem; color: var(--text-muted); }
.demo-prompt {
  margin-top: var(--space-6);
  text-align: center; font-weight: 600; font-size: 1.05rem; color: var(--text);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-intro { text-align: center; margin-bottom: var(--space-6); }
.form-intro .lead { margin: var(--space-3) auto 0; }

.form {
  display: flex; flex-direction: column; gap: var(--space-5);
  max-width: 600px; margin: 0 auto;
  background: #fff;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.form-field .req { color: var(--accent); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 1rem;
  color: var(--text); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.form-field select { appearance: none; background-image: none; cursor: pointer; }
.form .form-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.form .form-note { font-size: 0.85rem; color: var(--text-muted); }
.honeypot { position: absolute; left: -9999px; top: -9999px; visibility: hidden; }

.nf-thankyou {
  padding: var(--space-6);
  background: var(--accent-soft);
  border: 1px solid var(--accent-tint);
  border-radius: var(--radius-md);
  text-align: center;
  max-width: 600px; margin: 0 auto;
}
.nf-thankyou h2, .nf-thankyou h3 { color: var(--accent); margin-bottom: var(--space-2); font-size: 1.3rem; }
.nf-thankyou p { color: var(--text-soft); }

.nf-error {
  margin-top: var(--space-3);
  padding: var(--space-3) 14px;
  background: #fdecec; color: #8a1a1a;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.nf-error a { color: #8a1a1a; text-decoration: underline; }

/* Build-time guard: rendered instead of the form when a landing page ships
   without a real Formspree endpoint. Loud on purpose. */
.form-misconfigured {
  max-width: 600px; margin: 0 auto;
  padding: var(--space-6);
  background: #fdecec;
  border: 2px solid #c0392b;
  border-radius: var(--radius-md);
  color: #8a1a1a;
}
.form-misconfigured h3 { color: #8a1a1a; margin-bottom: var(--space-2); }

/* ── Prose ───────────────────────────────────────────────────────────────── */
.prose h2 { margin-top: 1.8em; padding-bottom: var(--space-3); position: relative; }
.prose h2:first-of-type { margin-top: 1em; }
.prose h2::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; background: var(--accent); border-radius: 2px;
}
.prose h3 { margin-top: 1.4em; }
.prose p { margin-top: 1em; line-height: 1.75; }
.prose ul { list-style: disc; padding-left: var(--space-5); margin-top: 1em; color: var(--text-soft); }
.prose ul li { margin-top: 6px; }
.prose .btn { margin-top: var(--space-5); }
.prose .note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.94rem; color: var(--text-soft);
}

/* ── Contact details ─────────────────────────────────────────────────────── */
.contact-details {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  padding: var(--space-5);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}
.contact-details .detail { display: flex; align-items: center; gap: var(--space-3); }
.contact-details .detail svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  color: var(--on-dark);
  padding: var(--space-7) 0;
  margin-top: var(--space-8);
}
.site-footer .footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .site-footer .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
}
.site-footer .footer-heading {
  color: #fff;
  font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}
/* This rule is load-bearing: .footer-wordmark is a <p>, so without an explicit
   colour the global `p { color: var(--text-soft) }` won and the business name
   rendered at ~1.6:1 contrast on navy. */
.site-footer .footer-wordmark {
  color: #fff;
  font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.site-footer .footer-tagline {
  font-size: 0.92rem; color: var(--on-dark-soft);
  line-height: 1.65; max-width: 36ch;
}
.site-footer ul { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer ul li { color: var(--on-dark-soft); font-size: 0.92rem; }
.site-footer ul a { color: var(--on-dark); font-size: 0.92rem; text-decoration: none; transition: color 0.15s; }
.site-footer ul a:hover { color: var(--accent-bright); text-decoration: none; }
.site-footer .footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-3);
  font-size: 0.84rem;
  color: var(--on-dark-soft);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}