/* ==========================================================================
   Site styles. Plain CSS, no build step.
   The look: white and light cool gray, deep navy text, one teal accent,
   one clean sans-serif typeface. Colors and fonts are set once, in :root.
   ========================================================================== */

:root {
  color-scheme: light;

  --white: #ffffff;
  --mist: #f3f6f9;          /* light cool gray for alternate sections */
  --tint: #e4f1f3;          /* pale teal for bubbles and highlights */
  --ink: #0e1c2f;           /* deep navy: text, the closing band */
  --ink-2: #43546a;         /* secondary text */
  --ink-3: #5d6d82;         /* small labels */
  --line: #dbe3eb;          /* hairlines and card borders */
  --line-2: #7b8a9e;        /* borders of controls */
  --accent: #0d7480;        /* the one accent: teal */
  --accent-2: #0a5c66;      /* accent, pressed or hovered */
  --accent-soft: #8fd6de;   /* accent on the dark band */

  /* System fonts only: nothing is downloaded from another company */
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 80rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --header-h: 4.25rem;
  --section-y: clamp(4rem, 8vw, 6.5rem);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --shadow-sm: 0 1px 2px rgba(14, 28, 47, 0.06), 0 6px 16px -6px rgba(14, 28, 47, 0.12);
  --shadow: 0 2px 4px rgba(14, 28, 47, 0.05), 0 20px 44px -18px rgba(14, 28, 47, 0.3);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dt, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
p, li, dd { text-wrap: pretty; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; outline-color: var(--accent-soft); }

/* Text links inside copy */
.prose a,
.legal a,
.more-link a,
.footer-inner a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover,
.legal a:hover,
.more-link a:hover,
.footer-inner a:hover { color: var(--accent-2); text-decoration-thickness: 2px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(13, 116, 128, 0.16);
}

h1, h2, h3 { font-family: var(--display); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 1rem/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.btn-primary { background: var(--accent); color: var(--white); box-shadow: 0 1px 2px rgba(14, 28, 47, 0.12); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: var(--white); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--mist); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--tint); }
.btn-small { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 0.9375rem; white-space: nowrap; }
.btn-large { min-height: 3.5rem; padding-inline: 1.75rem; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Short windows (heavy zoom, a phone on its side): the bar scrolls away with
   the page, so an open menu can never be taller than the screen */
@media (max-height: 26rem) {
  html { scroll-padding-top: 1.25rem; }
  .site-header { position: static; }
}

.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand actions" "nav nav";
  grid-template-rows: var(--header-h) auto;
  align-items: center;
  column-gap: 1rem;
}

.brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
/* The small mark beside the name */
.brand::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M51.92 30.26A20 20 0 1 1 33.74 12.08' fill='none' stroke='%23fff' stroke-width='8.5' stroke-linecap='round'/%3E%3Ccircle cx='46.4' cy='17.6' r='5.8' fill='%238fd6de'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.bar-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav { grid-area: nav; }
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-bottom: 0.85rem;
}
.nav a {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle path {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .bar-top { transform: rotate(45deg) translateY(4px); }
.nav-toggle[aria-expanded="true"] .bar-bottom { transform: rotate(-45deg) translateY(-4px); }

/* With JavaScript on, small screens tuck the links behind the menu button */
@media (max-width: 59.99rem) {
  .js .nav { display: none; }
  .js .nav.is-open { display: block; }
  .js .nav ul {
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.75rem;
    border-top: 1px solid var(--line);
  }
  .js .nav a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.0625rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .js .nav li:last-child a { border-bottom: 0; }
}

/* Phones: a tighter row, so the name, the menu button and "Book a meeting"
   always fit inside the page margins */
@media (max-width: 26rem) {
  .bar { column-gap: 0.5rem; }
  .brand { font-size: 1.0625rem; gap: 0.45rem; }
  .brand::before { width: 1.5rem; height: 1.5rem; }
  .bar-actions { gap: 0.375rem; }
  .nav-toggle { width: 2.5rem; height: 2.5rem; }
  .bar .btn-small { min-height: 2.5rem; padding-inline: 0.7rem; font-size: 0.8125rem; }
}
@media (max-width: 21.25rem) {
  .brand::before { display: none; }
}

@media (min-width: 60rem) {
  .bar {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "brand nav actions";
    column-gap: 2rem;
  }
  .bar-actions { justify-self: end; }
  .nav ul { flex-wrap: nowrap; gap: clamp(1.25rem, 2.4vw, 2.25rem); padding-bottom: 0; }
  .nav-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
  background:
    radial-gradient(60% 70% at 100% 0%, var(--tint) 0%, rgba(228, 241, 243, 0) 70%),
    var(--white);
}

.hero-grid {
  display: grid;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}

h1 {
  margin-top: 1.1rem;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
}
h1 .line { display: block; text-wrap: balance; }
h1 .accent { color: var(--accent); }

/* Size the headline from the width of its column, so that on tablets and
   larger screens each of its two lines stays on one line. */
@supports (font-size: 1cqi) {
  .hero-copy { container-type: inline-size; }
  .hero h1 { font-size: max(clamp(2rem, 12.2cqi, 2.5rem), min(7.7cqi, 4.25rem)); }
}

.hero-lede {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* The small line under the two buttons */
.hero-note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* The live demo on the right: a short heading, the demo box, small print.
   Retell's embedded widget fills the box; it needs the box to have a
   height, so the box sets one. */
.hero-visual {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 36rem;
}
.hero-demo:focus { outline: none; }
.demo-title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.demo-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.demo-widget {
  height: clamp(26rem, 58vh, 32rem);
  min-height: 26rem;
}
.demo-widget[hidden], .demo-fallback[hidden] { display: none; }
.demo-loading {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ink-3);
  font-size: 0.9375rem;
}
/* The clean box with the demo phone line, while the widget is not set up */
.demo-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: clamp(14rem, 34vh, 18rem);
  padding: 2rem 1.5rem;
  text-align: center;
}
.demo-fallback-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d7480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}
.demo-call { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.demo-call[hidden], .demo-unset[hidden] { display: none; }
.demo-call-label { color: var(--ink-2); }
.demo-call-number {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.demo-call-number:hover { color: var(--accent-2); }
.demo-call-placeholder { color: var(--ink-3); text-decoration: none; }
.demo-unset { font-family: var(--display); font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.demo-status { color: var(--ink-2); }
.demo-status:not(:empty) {
  margin-top: 0.85rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-sm);
  background: var(--tint);
  color: var(--ink);
  font-size: 0.9375rem;
}
.demo-small { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); }
.demo-small + .demo-small { margin-top: 0.25rem; }

/* Google's reCAPTCHA corner badge is hidden, as Google allows, because the
   line "This site is protected by reCAPTCHA." is shown under the demo. */
.has-recaptcha .grecaptcha-badge { visibility: hidden; }

/* Live site with no demo set up yet: the hero copy stands alone */
.no-demo .hero-grid { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  h1 { font-size: clamp(2.5rem, 4vw, 3.4rem); }
  .hero-visual { max-width: none; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: var(--section-y); }
.section-mist { background: var(--mist); }
/* Where two white sections meet, a thin line keeps them apart */
.section:not(.section-mist) + .section:not(.section-mist) { border-top: 1px solid var(--line); }

.section-head h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.section-head .eyebrow + h2 { margin-top: 0.8rem; }
.section-head { max-width: 44rem; }
.wrap:not(.pair) > .section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* A heading on the left, the content on the right */
.pair { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 60rem) {
  .pair { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 5rem); }
  .pair-center { align-items: center; }
}

.prose > p + p { margin-top: 1.25rem; }
.prose > p { max-width: 38rem; font-size: 1.125rem; color: var(--ink-2); }

.closing {
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--mist);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.prose > p.closing { color: var(--ink); font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem); }

.after-note { margin-top: 1.5rem; max-width: 42rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Photos inside sections (made with Google Gemini, in images/scene-*.jpg).
   A small label is drawn on some of them in HTML.
   -------------------------------------------------------------------------- */

.photo {
  position: relative;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: var(--shadow-sm);
  container-type: inline-size;
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-head .photo { max-width: 36rem; }

/* Sections with text on one side and a photo on the other. On phones the
   photo comes after the text; on wide screens they sit side by side, and
   "pair-flip" puts the photo on the left. */
.pair-photo .section-head + .prose { margin-top: 1.25rem; }
.pair-photo > .photo { margin-top: 0; }
@media (min-width: 60rem) {
  .pair-photo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .pair-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .pair-flip > .photo { order: -1; }
}

.photo-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.chip-dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(13, 116, 128, 0.2);
}
/* Above the phone that lights up on the side table */
.photo-session .photo-chip { right: 7%; bottom: 25%; }
/* Over the windows on the left, away from the therapist */
.photo-callback .photo-chip { left: 5%; top: 7%; }

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: 1rem; counter-reset: step; }
.steps li {
  counter-increment: step;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.steps p { font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }
.steps .step-example {
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.85rem 0.85rem 0.85rem 0.25rem;
  background: var(--tint);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink);
}

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Two ways to set it up
   -------------------------------------------------------------------------- */

.cards { display: grid; gap: 1rem; }
@media (min-width: 44rem) {
  .cards { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.card > p { margin-top: 0.7rem; color: var(--ink-2); }

/* A small picture of the order of events on each card */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.4rem;
}
.flow li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--mist);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-2);
}
.flow li.is-on { border-color: var(--accent); background: var(--accent); color: var(--white); }
.flow li + li { margin-left: 1.1rem; position: relative; }
.flow li + li::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 50%;
  width: 0.85rem;
  height: 0.6rem;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%238291a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h11M8.5 1.5L12 5 8.5 8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   What it does and never does
   -------------------------------------------------------------------------- */

.does-grid { display: grid; gap: 1rem; }
@media (min-width: 44rem) {
  .does-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.does-col {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.does-col h3 {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.does-col li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}
.does-col li:last-child { border-bottom: 0; padding-bottom: 0; }
.does-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 1.25rem;
  height: 1.25rem;
  background: no-repeat center / contain;
}
.does-yes li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e4f1f3'/%3E%3Cpath d='M5.6 10.4l2.9 2.9 5.9-6.2' fill='none' stroke='%230d7480' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.does-no li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e9edf2'/%3E%3Cpath d='M6.6 6.6l6.8 6.8M13.4 6.6l-6.8 6.8' fill='none' stroke='%2343546a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.note-box {
  margin-top: 1.25rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.note-box strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Privacy and pricing
   -------------------------------------------------------------------------- */

.rows { display: grid; gap: 0.75rem; }
.rows li {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.more-link { margin-top: 1.25rem; }

.prices {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.prices > div { padding: clamp(1.25rem, 3vw, 1.75rem); }
.prices > div + div { border-top: 1px solid var(--line); }
.prices dt {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.prices dd {
  margin-top: 0.5rem;
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.prices dd span {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink-2);
}
@media (min-width: 48rem) {
  .prices { grid-template-columns: repeat(3, 1fr); }
  .prices > div + div { border-top: 0; border-left: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */

.qa-list { display: grid; gap: 0.75rem; }
.qa {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.qa h3 {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.qa p { margin-top: 0.35rem; color: var(--ink-2); }
@media (min-width: 48rem) {
  .qa-list { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Final call to action
   -------------------------------------------------------------------------- */

/* The band is navy. Behind the navy sits an evening photo made with Google
   Gemini (images/band.jpg): a desk by a window, the phone glowing teal. The
   navy layer keeps the white text readable; the text never depends on it. */
.cta {
  padding-block: clamp(4rem, 9vw, 7rem);
  background:
    linear-gradient(90deg, rgba(14, 28, 47, 0.86) 0%, rgba(14, 28, 47, 0.7) 55%, rgba(14, 28, 47, 0.45) 100%),
    url("images/band.jpg") 70% 88% / cover no-repeat,
    var(--ink);
  color: var(--white);
  text-align: center;
}
/* On phones and tablets the band is taller than it is wide, so the lit desk
   and the glowing phone sit right behind the small print. An even, darker
   navy layer keeps every line readable there. */
@media (max-width: 59.99rem) {
  .cta {
    background:
      linear-gradient(rgba(14, 28, 47, 0.84), rgba(14, 28, 47, 0.84)),
      url("images/band.jpg") 70% 60% / cover no-repeat,
      var(--ink);
  }
}
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta h2 {
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.cta h2 .line { display: block; text-wrap: balance; }
.cta h2 .line + .line { color: var(--accent-soft); }
.cta .btn { margin-top: 2.25rem; }
.cta-note { margin-top: 1.25rem; font-size: 0.9375rem; color: #c6d2df; }
.cta :focus-visible { outline-color: var(--white); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { padding-block: 2.25rem 2.75rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.footer-inner {
  display: grid;
  gap: 0.6rem 2rem;
  align-items: baseline;
}
.footer-copy { font-weight: 600; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-note { color: var(--ink-2); }
.footer-email a { overflow-wrap: anywhere; }

@media (min-width: 46rem) {
  .footer-inner { grid-template-columns: auto auto 1fr; }
  .footer-links { justify-self: end; }
  .footer-note { grid-column: 1 / -1; margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   Privacy, Terms and not-found pages
   -------------------------------------------------------------------------- */

.legal { padding-block: clamp(2.75rem, 6vw, 4.5rem) var(--section-y); }
.legal-inner { max-width: 44rem; }
.legal h1 {
  margin-top: 0.9rem;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem);
}
.legal .updated { margin-top: 0.9rem; color: var(--ink-3); font-size: 0.9375rem; }
.legal .lead {
  margin-top: 1.75rem;
  font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.legal h2 {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.legal h3 { margin-top: 1.75rem; font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.legal p { margin-top: 1rem; }
.legal ul { margin-top: 1rem; padding-left: 1.25rem; list-style: disc; }
.legal ul li { margin-top: 0.5rem; padding-left: 0.25rem; }
.legal ul li::marker { color: var(--accent); }
.legal .back { margin-top: 3rem; }
.legal .back a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* --------------------------------------------------------------------------
   Small helpers
   -------------------------------------------------------------------------- */

/* A note that only appears in a local preview, never on the live site */
.preview-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.6rem var(--gutter);
  background: var(--ink);
  color: var(--white);
  font-size: 0.875rem;
  line-height: 1.45;
}
.preview-note strong { font-weight: 700; }
.preview-note button {
  flex: none;
  padding: 0.25rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.preview-note :focus-visible { outline-color: var(--white); }

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

@media print {
  .site-header { position: static; }
  .preview-note, .nav-toggle { display: none !important; }
  /* Paper drops background fills: keep the small ones, and print the navy
     band as dark text on white */
  .btn-primary, .steps li::before, .flow li.is-on,
  .demo-frame, .demo-fallback-icon, .photo-chip, .chip-dot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Keep each card and picture on one page */
  .demo-frame, .photo { break-inside: avoid; page-break-inside: avoid; }
  /* A live voice widget is no use on paper */
  .demo-widget:not([hidden]) { display: none !important; }
  .cta { background: none; color: var(--ink); }
  .cta h2 .line + .line { color: var(--accent); }
  .cta-note { color: var(--ink-2); }
  .cta .btn { border-color: var(--line-2); }
}