/* Briefly site chrome: tokens, reset, type scale, buttons, nav, footer, bands.
   One file for every page that carries the site nav. Page styles load after this file and
   may extend it, but must not redefine what lives here.
   Product mockups (any element with data-mockup, plus the clip runtime) keep the product's
   own paper and serif; those are the only places --serif, --mono, and --doc-* belong. */

:root {
  --paper: #FFFFFF;          /* ground */
  --paper-2: #F5F5F7;        /* alternating band */
  --card: #FFFFFF;
  --ink: #1D1D1F;            /* app ink, 16.8:1 on white */
  --ink-soft: #424245;       /* app secondary text, 10.1:1 on white */
  --ink-muted: #6E6E73;      /* app muted, 5.1:1 on white, 4.6:1 on the band; smallest text it may label is 12px */
  --rule: #D2D2D7;           /* hairline */
  --blue: #2F8CFF;           /* fills, icons, pins. 3.3:1 on white: never text under 18px */
  --blue-ink: #0A66D6;       /* app link blue, deepened a touch: 5.4:1 on white, 4.8:1 on --blue-soft */
  --blue-soft: #EAF3FF;
  --cyan: #6CB4FF;           /* blue text on the dark band only */
  --navy-band: #1D1D1F;      /* app brand fill: footer, closer, checkout panel */
  --cream: #F5F5F7;          /* text on the dark band */
  --cream-soft: #A1A1A6;     /* secondary text on the dark band, 7.0:1 */
  --display: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --serif: Charter, "Iowan Old Style", "Source Serif Pro", Georgia, serif;   /* mockups only */
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;                     /* mockups only */
  --doc-paper: #FBFAF6;      /* the product's paper, mockups only */
  --doc-paper-2: #F2EDE1;
  --doc-rule: #E6E1D5;
  --r-control: 6px;
  --r-card: 12px;
  --r-panel: 18px;
  --shadow-float: 0 1px 2px rgba(0,0,0,.05), 0 14px 34px rgba(0,0,0,.08);
  --shadow-modal: 0 20px 40px rgba(0,0,0,.18);
  --ring: 0 0 0 2px rgba(47,140,255,.10);
  /* App-look cards on the homepage (hero chat, On the day cards, client picture, pricing). */
  --card-border: 1px solid #D2D2D7;
  --card-radius: 14px;
  --card-shadow: 0 18px 48px rgba(29,29,31,.10);
  --hairline: #E5E5EA;
  --hover-soft: #EEF4FF;     /* hovered row in a mockup: blue-soft, never the zebra gray */
  --hover-ring: inset 0 0 0 1px #CFE2FF;
}

/* reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  background: var(--paper); color: var(--ink); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.container { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* skip link: first focusable element on every page */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: #fff;
  border-radius: var(--r-control); font-weight: 600; font-size: 15px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* type scale */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: inherit; }
h1 { font-size: clamp(34px, 4.2vw, 48px); }
h2 { font-size: clamp(28px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.015em; max-width: 620px; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink-soft); margin-bottom: 12px;
}
.lede { margin-top: 16px; max-width: 600px; color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
a { color: var(--blue-ink); }

/* buttons: navy filled is the one prominent style; ghost is the quiet alternative */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: var(--r-control);
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.2;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: #3A3A3C; border-color: #3A3A3C; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--paper-2); }
.textlink { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* focus: one ring everywhere */
:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }

/* nav: the one sticky, translucent layer on the page */
nav[aria-label="Primary"] {
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@media (prefers-reduced-transparency: reduce) {
  nav[aria-label="Primary"] { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav-bar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.brand { position: relative; display: inline-flex; align-items: center; padding-right: 14px; min-height: 36px; text-decoration: none; border-radius: var(--r-control); }
.brand-word {
  font-family: var(--sans); font-weight: 900; font-size: 21px; line-height: .78;
  letter-spacing: -.075em; text-transform: uppercase; color: var(--ink);
  transform: scaleY(.88); transform-origin: left center;
}
.brand-pin { position: absolute; top: 12px; right: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: var(--ring); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-panel { display: flex; align-items: center; gap: 12px; }
.nav-links { display: flex; gap: 2px; }
.nav-links a, .nav-signin, .nav-start {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px;
  border-radius: var(--r-control); font-size: 14px; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
}
.nav-start { font-weight: 600; color: var(--ink); }
.nav-links a:hover, .nav-signin:hover, .nav-start:hover { color: var(--ink); background: var(--paper-2); }
.nav-actions { display: flex; align-items: center; gap: 2px; }
.nav-bar .btn { min-height: 36px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.nav-toggle {
  display: none; width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--card); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 4px 28px 16px; z-index: 40;
  }
  .nav-panel.open { display: flex; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a, .nav-signin, .nav-start { min-height: 48px; padding: 0; border-radius: 0; border-top: 1px solid var(--rule); font-size: 16px; }
  .nav-links a:hover, .nav-signin:hover, .nav-start:hover { background: transparent; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 0; }
}
@media (max-width: 480px) { .nav-panel { padding: 4px 18px 16px; } }

/* sections and bands */
.pad { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.band-paper2 { background: var(--paper-2); }
.band-white { background: var(--card); }

/* hero: bigger, airier scale shared by every hero section */
.hero { padding: clamp(96px, 11vw, 136px) 0 clamp(72px, 8vw, 104px); border-bottom: 1px solid var(--rule); }
.hero h1 { font-size: clamp(40px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.hero .lede { font-size: 19px; max-width: 560px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* hero-wide: single-column heroes go one step bigger still */
.hero-wide h1 { font-size: clamp(44px, 5.4vw, 68px); max-width: 16ch; }

/* info card */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 24px 28px; }
.card h3 { margin-bottom: 8px; }

/* category pill */
.pill {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--blue-ink);
  background: var(--blue-soft); white-space: nowrap;
}

/* faq disclosure, shared by every page that lists questions */
.faq-list { margin-top: 36px; max-width: 780px; }
.faq-list details { border-top: 1px solid var(--rule); padding: 16px 4px; }
.faq-list details:last-child { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  position: relative; font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer; padding: 4px 28px 4px 0; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted);
  transform: translateY(-75%) rotate(45deg); transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq-list details p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); max-width: 700px; }

/* reveal on scroll: subtle, once per element, off under reduced motion, never a blank
   first frame (site.js marks anything already in view before this can ever paint hidden) */
.reveal { opacity: 1; transform: none; }
html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }
html.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1);
}
#ways .reveal, .closer .reveal, html.js #ways .reveal:not(.is-in), html.js .closer .reveal:not(.is-in) {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal:not(.is-in) { opacity: 1; transform: none; }
  .reveal { transition: none; }
}

/* closer: the one dark moment before the footer */
.closer { background: var(--navy-band); color: var(--cream); text-align: center; padding: 110px 0 96px; border-bottom: 0; }
.closer h2 { color: var(--cream); font-size: clamp(34px, 4vw, 44px); margin: 0 auto; }
.closer .lede { color: var(--cream-soft); margin: 16px auto 30px; max-width: 460px; }
.closer .btn { background: var(--cream); color: var(--navy-band); border-color: var(--cream); }
.closer .btn:hover { background: #fff; border-color: #fff; }
.closer-price { margin-top: 24px; font-size: 15px; color: var(--cream-soft); }
.closer-alt { margin-top: 16px; font-size: 14px; color: var(--cream-soft); }
.closer-alt a { color: var(--cream); }

/* footer */
footer { background: var(--navy-band); color: var(--cream-soft); padding: 64px 0 32px; }
footer .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid #24415E; }
footer .foot-brand .brand { padding-right: 18px; }
footer .foot-brand .brand-word { color: var(--cream); font-size: 32px; }
footer .foot-brand .brand-pin { top: 8px; width: 8px; height: 8px; }
footer .foot-brand p { margin-top: 14px; font-size: 14px; line-height: 1.6; max-width: 280px; color: var(--cream-soft); }
footer h4 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cream); margin-bottom: 10px; }
footer a { display: block; width: fit-content; color: var(--cream-soft); text-decoration: none; font-size: 14px; line-height: 1.4; padding: 6px 0; }
footer a:hover { color: var(--cream); }
footer .foot-bottom { display: flex; justify-content: space-between; gap: 14px; padding-top: 22px; font-size: 13px; color: var(--cream-soft); flex-wrap: wrap; }

@media (max-width: 880px) {
  footer .foot-grid { grid-template-columns: 1fr 1fr; }
  footer .foot-brand { grid-column: 1 / -1; }
  h2 { max-width: none; }
}
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .pad { padding: 64px 0; }
  .closer { padding: 72px 0 64px; }
  footer { padding: 48px 0 28px; }
  footer .foot-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* demo modal: markup and script live on each page, the look lives here */
.demo-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.demo-modal.active { display: flex; }
.demo-modal-backdrop { position: absolute; inset: 0; background: rgba(16,38,61,.56); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (prefers-reduced-transparency: reduce) { .demo-modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(16,38,61,.8); } }
.demo-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-panel);
  padding: 32px 28px 28px; box-shadow: var(--shadow-modal); font-family: var(--sans);
}
.demo-modal-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: var(--r-control);
  font-size: 24px; color: var(--ink); cursor: pointer; line-height: 1;
}
.demo-modal-close:hover { background: var(--paper-2); }
.demo-modal-eyebrow { font-size: 13px; font-weight: 600; color: var(--blue-ink); margin: 0 0 6px; }
.demo-modal-title { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px; color: var(--ink); }
.demo-modal-field { display: block; margin: 0 0 14px; }
.demo-modal-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.demo-modal-field input {
  width: 100%; min-height: 44px; padding: 10px 12px; font-family: var(--sans); font-size: 16px;
  border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: var(--r-control);
}
.demo-modal-field input:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 1px; border-color: var(--blue-ink); }
.demo-modal-submit {
  width: 100%; min-height: 44px; border: 1px solid var(--ink); background: var(--ink); border-radius: var(--r-control);
  color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 6px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.demo-modal-submit:hover { background: #3A3A3C; border-color: #3A3A3C; }
.demo-modal-submit:disabled { opacity: .6; cursor: wait; }
.demo-modal-error { display: none; margin-top: 10px; padding: 10px 12px; border: 1px solid #B3261E; border-radius: var(--r-control); color: #B3261E; font-size: 14px; }
.demo-modal-success { display: none; padding: 18px 0 4px; text-align: center; }
.demo-modal-success.active { display: block; }
.demo-modal-success-title { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); }
.demo-modal-success-body { font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
@media (max-width: 480px) {
  .demo-modal { padding: 14px; }
  .demo-modal-card { padding: 26px 22px 22px; }
  .demo-modal-title { font-size: 24px; }
}