/* FlowView Center website.
   One design system for every page. Deep navy with the brand blue, one warm
   accent used sparingly, Space Grotesk for headings and Inter for reading.

   Layout rules the whole site follows:
   - one container width (--wrap), one reading width (--measure)
   - introductions, statements and calls to action are centered;
     longer reading, cards, lists and forms are left-aligned
   - one spacing scale for sections, one radius, one card padding */

:root {
  --bg: #0b1322;
  --bg-2: #0e1729;            /* alternate sections */
  --surface: #121d33;         /* cards */
  --surface-2: #17243e;       /* cards on alternate sections, inputs */
  --line: rgba(148, 170, 205, 0.16);
  --line-2: rgba(148, 170, 205, 0.3);

  --text: #edf2f9;
  --text-soft: #b7c3d6;
  --muted: #8d9bb1;

  --blue: #2ba9e0;
  --blue-hi: #6fd3ff;
  --blue-deep: #1668c9;
  --warm: #f2b866;

  --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --measure: 680px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(72px, 9vw, 112px);
  --radius: 16px;
  --radius-sm: 10px;
  --pad: clamp(24px, 3vw, 32px);
  --header-h: 72px;
  --focus: 0 0 0 3px rgba(111, 211, 255, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--text-soft);
  font: 400 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--blue); color: #04121f; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-head); color: var(--text); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(28px, 3.3vw, 40px); line-height: 1.15; font-weight: 700; }
h3, .h3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 16px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--text); font-weight: 600; }
.lead { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: var(--text-soft); }
.small { font-size: 15px; color: var(--muted); margin-top: 16px; }
.accent { color: var(--blue-hi); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 600 13.5px/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-hi);
}
.eyebrow-n { color: var(--warm); font-variant-numeric: tabular-nums; }
.eyebrow-icon .ic { width: 18px; height: 18px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section.tight { padding: 0 0 clamp(8px, 2vw, 16px); }
.section.tight-top { padding-top: 0; }
.tint { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tint + .tint { border-top: 0; }

.sec-head { max-width: var(--measure); margin: 0 0 clamp(36px, 4vw, 52px); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head .lead { margin-top: 16px; }
.split > div > .sec-head, .split .sec-head { margin-bottom: 20px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split > div > p { max-width: 60ch; }
.split.flip > :first-child { order: 2; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.narrow-grid { max-width: 860px; margin: 0 auto; }

.statement { max-width: 760px; margin: 0 auto; text-align: center; }
.statement h2 { margin-bottom: 16px; }
.statement .btn-row { margin-top: 28px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn .arr { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.btn-primary { background: var(--blue); color: #04121f; }
.btn-primary:hover { background: var(--blue-hi); color: #04121f; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--blue-hi); color: #fff; background: rgba(111, 211, 255, 0.06); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn-row.center { justify-content: center; }
.btn-row.spaced { margin-top: 40px; }

/* ---------- header ----------
   Starts looking like the header always did: translucent dark, sitting
   right over the hero. Scrolling reveals a second, white version underneath
   and the header fades into it, purely in CSS (animation-timeline:
   scroll(root), no JavaScript). It stays full width and flush to the top
   throughout, on purpose: only colour, the logo cross-fade and a resting
   shadow animate, nothing about its position or shape. Browsers without
   scroll-driven animation (the @supports gate) simply keep the dark start
   state forever, which is exactly what shipped before this existed, so
   there is nothing missing for them to fall back to.

   scroll(root), not view(): the header is pinned at the very top of the
   document from frame one, so a view() timeline (which tracks the subject
   entering/exiting the scrollport) treats it as already fully "entered"
   before any scrolling happens and jumps straight to the end state.
   scroll(root) tracks the page's own scroll position directly instead, 0px
   to 260px, so the header only turns as the page is actually scrolled.

   Only the three values children need to read (the accent colour, and the
   two logos' cross-fade in .brand-swap) are custom properties, and each is
   registered with @property so the browser interpolates the property
   itself frame by frame instead of snapping it half-way through, the way an
   unregistered custom property would. background-color/color/border/shadow
   animate as the real property, which already interpolates smoothly
   without that registration; color is inherited by children through
   `inherit`/`currentColor` rather than duplicated as another custom
   property. */
@property --_hdrAccent { syntax: '<color>'; inherits: true; initial-value: #6fd3ff; }
@property --_hdrCompactOpacity { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --_hdrFullOpacity { syntax: '<number>'; inherits: true; initial-value: 0; }

.site-header {
  --_hdrAccent: var(--blue-hi);
  --_hdrCompactOpacity: 1;
  --_hdrFullOpacity: 0;

  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background-color: rgba(11, 19, 34, 0.82);
  color: #edf2f9;
  border-bottom: 1px solid rgba(237, 242, 249, 0.14);
  box-shadow: none;
}
@supports (animation-timeline: scroll()) {
  .site-header { animation: fvcHeaderScroll linear both; animation-timeline: scroll(root); animation-range: 0px 260px; }
}
@keyframes fvcHeaderScroll {
  to {
    background-color: #fff;
    color: #0f2445;
    border-bottom-color: rgba(15, 36, 69, 0.1);
    box-shadow: 0 6px 20px rgba(15, 36, 69, 0.08);
    --_hdrAccent: var(--blue-deep);
    --_hdrCompactOpacity: 0;
    --_hdrFullOpacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) { .site-header { animation: none; } }

.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.brand-swap { display: grid; align-items: center; }
.brand-swap .brand { grid-area: 1 / 1; }
.brand-compact { opacity: var(--_hdrCompactOpacity); }
.brand-full { opacity: var(--_hdrFullOpacity); }
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font: 700 18px/1.15 var(--font-head); color: inherit; letter-spacing: -0.01em; }
.brand-name sup { font-size: max(13.5px,0.5em); margin-left: 1px; top: -0.7em; }
.brand-sub { font-size: 13.5px; color: inherit; opacity: 0.72; letter-spacing: 0.03em; margin-top: 3px; }
.brand-full { gap: 0; }
.brand-logo { height: 40px; width: auto; }

.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list a:not(.btn) {
  display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none;
  color: inherit; font-size: 15px; font-weight: 500;
}
.nav-list a:not(.btn):hover { color: var(--_hdrAccent); background: rgba(127, 127, 127, 0.14); }
.nav-list a[aria-current="page"] { color: var(--_hdrAccent); }
.nav-signin { margin-left: 6px; padding-left: 6px; border-left: 1px solid currentColor; opacity: 0.9; }
.nav-signin a { opacity: 1; }
.nav-cta-li { margin-left: 8px; }
.nav-toggle { display: none; }

/* The small-screen menu is a side panel, not a dropdown: it slides in from
   the right over a dimmed backdrop, the way a hamburger menu is expected to
   behave, rather than pushing the page down. .nav-backdrop sits right
   before .nav-list in the markup purely so :has() can read the panel's
   .open class off a preceding sibling; the JS toggle only ever touches
   .nav-list, the backdrop's visibility follows it automatically. */
@media (max-width: 1080px) {
  /* A fixed square with the three bars absolutely placed inside it, rather
     than a flex column with translateY: rotating two bars that already
     started at different offsets never quite crossed at the same point (a
     visible kink, not a clean X). Opened, bars 1 and 3 both move to the
     middle first and only then rotate, so they pivot around the same
     centre and cross exactly. */
  .nav-toggle {
    position: relative; display: inline-flex;
    width: 46px; height: 46px; padding: 0; background: transparent; border: 1px solid currentColor; border-radius: 10px; cursor: pointer; opacity: 0.9;
  }
  .nav-toggle .bar {
    position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; border-radius: 2px;
    transition: top .2s ease, transform .2s ease, opacity .2s ease;
  }
  .nav-toggle .bar-1 { top: 16px; }
  .nav-toggle .bar-2 { top: 22px; }
  .nav-toggle .bar-3 { top: 28px; }
  .nav-toggle[aria-expanded="true"] .bar-1 { top: 22px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar-2 { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar-3 { top: 22px; transform: rotate(-45deg); }

  /* Full viewport, including behind the header, so a tap anywhere outside
     the panel itself closes it. */
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 48;
    background: rgba(9, 16, 29, 0.45); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .nav-backdrop:has(~ .nav-list.open) { opacity: 1; visibility: visible; }

  .nav-list {
    position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: 52;
    width: min(320px, 86vw); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0; color: #0f2445;
    padding: 12px 20px 24px; background: #fff; border-left: 1px solid rgba(15, 36, 69, 0.1);
    box-shadow: -20px 0 48px rgba(15, 36, 69, 0.18);
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
  }
  .nav-list.open { transform: translateX(0); visibility: visible; }
  .nav-list a:not(.btn) { padding: 14px 4px; font-size: 17px; border-radius: 0; border-bottom: 1px solid rgba(15, 36, 69, 0.1); }
  .nav-signin { margin: 0; padding: 0; border: 0; }
  .nav-cta-li { margin: 18px 0 0; }
  .nav-cta-li .btn { width: 100%; min-height: 48px; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .nav-backdrop, .nav-list { transition: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; text-align: center; overflow: hidden;
  padding: clamp(80px, 11vw, 136px) 0 clamp(72px, 9vw, 112px);
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(43, 169, 224, 0.18), transparent 70%),
    radial-gradient(40% 40% at 85% 30%, rgba(242, 184, 102, 0.06), transparent 70%);
}
.hero h1 { margin: 0 auto; font-size: clamp(40px, 6vw, 68px); }
.hero .lead { max-width: 640px; margin: 24px auto 0; }
.hero .btn-row { margin-top: 36px; }
.hero-note { margin-top: 24px; font-size: 15px; color: var(--muted); }

.page-hero {
  text-align: center; padding: clamp(64px, 8vw, 100px) 0 clamp(48px, 6vw, 72px);
  background: radial-gradient(55% 60% at 50% 0%, rgba(43, 169, 224, 0.14), transparent 72%);
}
.page-hero h1 { max-width: 20ch; margin: 0 auto; font-size: clamp(34px, 4.6vw, 54px); }
.page-hero .lead { max-width: 660px; margin: 20px auto 0; }
.hero-list { list-style: none; margin: 28px auto 0; padding: 0; max-width: 560px; display: grid; gap: 8px; }
.hero-list li { font-size: clamp(17px, 1.6vw, 19px); color: var(--text-soft); }
.hero-close { margin-top: 22px; font: 600 clamp(19px, 1.8vw, 22px)/1.4 var(--font-head); color: var(--text); }

/* ---------- cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad); color: var(--text-soft); text-decoration: none;
}
.tint .card { background: var(--surface-2); }
.card h3 { margin: 16px 0 8px; }
.card > .eyebrow + h3, .card > p.eyebrow + h3 { margin-top: 0; }
.card p { font-size: 16px; }
.card-sm h3 { margin-top: 14px; font-size: 18px; }
.card-link { transition: border-color .2s, transform .2s, background-color .2s; }
.card-link:hover { border-color: rgba(111, 211, 255, 0.5); transform: translateY(-2px); color: var(--text-soft); }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.num { font: 600 14px/1 var(--font-head); color: var(--muted); letter-spacing: 0.06em; }
.more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--blue-hi); }
.more .arr { width: 15px; height: 15px; transition: transform .2s; }
.card-link:hover .more .arr { transform: translateX(3px); }

.icon-badge {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 12px; background: rgba(43, 169, 224, 0.12); color: var(--blue-hi);
}
.icon-badge .ic { width: 22px; height: 22px; }

.feature h3 { margin: 16px 0 8px; font-size: 19px; }
.feature p { font-size: 16px; }
.step-n { font: 700 15px/1 var(--font-head); color: var(--warm); letter-spacing: 0.06em; }
.feature > .step-n + h3 { margin-top: 12px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); }
.tint .panel { background: var(--surface-2); }
.panel-title { margin: 0 0 16px; font: 600 13.5px/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.panel > .ticks, .card > .ticks { margin-top: 0; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.ticks .tick { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; color: var(--blue-hi); }
.detail-text .ticks { grid-template-columns: 1fr 1fr; gap: 10px 24px; }

/* ---------- home: options, address, steps, sign in ---------- */
.option .option-price { margin: auto 0 0; padding-top: 20px; font: 700 26px/1.2 var(--font-head); color: var(--text); }
.option .from { display: block; font: 500 13.5px/1.4 var(--font-body); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }
.option-note { margin-top: 4px; font-size: 15px; color: var(--blue-hi); }
.option-note:empty { display: none; }
.featured { border-color: rgba(43, 169, 224, 0.55); box-shadow: 0 0 0 1px rgba(43, 169, 224, 0.25), 0 24px 48px rgba(0, 0, 0, 0.25); }

.browser { border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.browser-bar, .mock-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--line); }
.browser-bar > span, .mock-bar > span { width: 10px; height: 10px; border-radius: 50%; background: rgba(148, 170, 205, 0.28); }
.url { flex: 1; margin-left: 10px; padding: 6px 12px; border-radius: 8px; background: var(--bg); font-size: 14px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-body { padding: 32px clamp(24px, 4vw, 44px) 36px; background: #f7f4ee; color: #3a4556; }
.b-title { margin: 0; font: 700 22px/1.2 Georgia, serif; color: #1a2b44; }
.b-sub { margin: 4px 0 18px; font-size: 14px; }
.b-field { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #d6d2c8; border-radius: 8px; background: #fff; font-size: 14px; color: #8a8f99; }
.b-btn { margin-top: 6px; padding: 11px; border-radius: 8px; background: #1a2b44; color: #fff; text-align: center; font-weight: 600; font-size: 14px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: none; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); }
.steps h3 { margin: 14px 0 8px; font-size: 19px; }
.steps p { font-size: 16px; }

.cta-section { padding: var(--section) 0; }
.section:not(.tint) + .cta-section { padding-top: 0; }
.cta-band {
  text-align: center; padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 64px); border-radius: 24px;
  background: radial-gradient(80% 120% at 50% 0%, rgba(43, 169, 224, 0.2), transparent 70%), var(--surface);
  border: 1px solid var(--line);
}
.cta-band h2 { max-width: 20ch; margin: 0 auto; }
.cta-band .lead { max-width: 560px; margin: 16px auto 0; }

.signin-section { padding-top: 0; }
.signin-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center;
  padding: var(--pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
}
.signin-card h2 { font-size: 22px; margin-bottom: 6px; }
.signin-card p { font-size: 16px; }
.goto { display: flex; gap: 12px; }
.goto-field { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); padding: 0 18px; }
.goto-field:focus-within { border-color: var(--blue-hi); box-shadow: var(--focus); }
.goto-field input { flex: 1 1 auto; width: 0; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--text); font: 500 16px var(--font-body); outline: none; }
.goto-suffix { color: var(--muted); font-size: 15px; white-space: nowrap; }

/* ---------- solutions ---------- */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.jump a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text-soft); text-decoration: none; font-size: 15px; font-weight: 500;
}
.jump a:hover { border-color: var(--blue-hi); color: #fff; }
.jump a span { color: var(--warm); font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-text h2 { margin-bottom: 18px; }
.split > div > h2 { margin-bottom: 18px; }
.detail-visual { display: flex; justify-content: center; }

.mock { width: 100%; max-width: 460px; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.tint .mock { background: var(--surface-2); }
.mock-bar b { margin-left: 8px; font: 600 13.5px/1 var(--font-body); color: var(--muted); letter-spacing: 0.04em; }
.mock-body { padding: 20px; display: grid; gap: 10px; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); font-size: 15px; color: var(--text); }
.mrow em { font-style: normal; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.mrow.hl { border-color: rgba(43, 169, 224, 0.45); }
.mrow.hl em { color: var(--blue-hi); }
.bars { display: grid; gap: 10px; }
.bars span { position: relative; display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); overflow: hidden; }
.bars span::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, rgba(43, 169, 224, 0.35), rgba(43, 169, 224, 0.12)); }
.bars span { isolation: isolate; }
.bars span::before { z-index: -1; }
.bubble { padding: 14px 16px; border-radius: 14px 14px 14px 4px; background: rgba(43, 169, 224, 0.16); border: 1px solid rgba(43, 169, 224, 0.35); color: var(--text); font-size: 15px; line-height: 1.5; }
.devices { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 0; }
.dev { display: grid; justify-items: center; gap: 10px; padding: 18px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035); text-align: center; font-size: 13.5px; color: var(--text); word-break: break-word; }
.dev .ic { width: 28px; height: 28px; color: var(--blue-hi); }
.sync { font-size: 13.5px; color: var(--warm); text-align: center; white-space: nowrap; }
.sync::before, .sync::after { content: ''; display: block; height: 1px; margin: 6px auto; width: 40px; background: var(--warm); opacity: .6; }

.roles { margin: 20px 0 18px; display: grid; gap: 10px; }
.roles div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.roles dt { color: var(--text); font-weight: 600; }
.roles dd { margin: 0; font-size: 16px; }

/* ---------- who we serve ---------- */
.role-cards { display: grid; gap: 12px; }
.role-card { padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); }
.tint .role-card { background: var(--surface); }
.role-card h3 { font-size: 17px; margin-bottom: 4px; }
.role-card p { font-size: 15.5px; }

/* ---------- about ---------- */
.growth { list-style: none; margin: 0; padding: 0; counter-reset: g; display: grid; gap: 0; }
.growth li { counter-increment: g; position: relative; padding: 10px 0 10px 42px; color: var(--text); font-size: 16px; }
.growth li::before { content: counter(g, decimal-leading-zero); position: absolute; left: 0; top: 10px; font: 600 13.5px/1.6 var(--font-head); color: var(--warm); }
.growth li + li { border-top: 1px solid var(--line); }

/* ---------- pricing ---------- */
.price-grid { align-items: stretch; }
/* Equal columns whatever each card holds, so the Monthly / Yearly switch
   does not nudge the cards sideways. */
.price-grid > .card { min-width: 0; }
@media (min-width: 901px) { .price-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-card { padding-top: calc(var(--pad) + 6px); }
.price-card .h3 { margin: 0; }
.price-card .price { margin: 18px 0 2px; font: 700 clamp(34px, 3.4vw, 42px)/1.1 var(--font-head); color: var(--text); letter-spacing: -0.02em; }
.price-card .price-was { margin: 18px 0 -12px; display: flex; align-items: baseline; gap: 10px; }
.price-card .price-was s { font: 600 17px/1 var(--font-body); color: var(--muted); text-decoration-color: var(--warm); text-decoration-thickness: 2px; }
.price-card .price-save { padding: 3px 10px; border-radius: 999px; background: rgba(242, 184, 102, 0.16); color: var(--warm); font: 700 13.5px/1.2 var(--font-body); white-space: nowrap; }
.price-card .price-note { min-height: 1.5em; font-size: 15px; color: var(--blue-hi); }
.price-card .price-yearly { margin: -2px 0 8px; font-size: 14.5px; font-weight: 600; color: #a9ecc8; }
/* Monthly / Yearly switch on the Online card (site.js shows it). In the
   logo's greens (#61ac59 leaf, #a8cc5a lime), bright and glowing, so it
   reads at once as something to click, not a label. */
.plan-toggle { --leaf: #61ac59; --lime: #a8cc5a; display: inline-flex; gap: 4px; margin: 16px 0 0; padding: 4px; border-radius: 999px;
  background: rgba(97, 172, 89, 0.14); border: 1.5px solid var(--leaf); box-shadow: 0 0 0 4px rgba(97, 172, 89, 0.16), 0 6px 22px rgba(97, 172, 89, 0.28); }
.plan-toggle[hidden] { display: none; }
.plan-toggle .pt-b { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  color: #d8f3cf; font: 700 14px/1 var(--font-body); cursor: pointer; transition: background .18s, color .18s, transform .12s; }
.plan-toggle .pt-b:hover { background: rgba(168, 204, 90, 0.18); color: #fff; }
.plan-toggle .pt-b:active { transform: scale(0.97); }
.plan-toggle .pt-b[aria-pressed="true"] { background: linear-gradient(135deg, var(--leaf), var(--lime)); color: #0b2a0e; box-shadow: 0 2px 10px rgba(168, 204, 90, 0.45); }
.plan-toggle .pt-b:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.plan-toggle .pt-save { padding: 3px 9px; border-radius: 999px; background: var(--lime); color: #0b2a0e; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.plan-toggle .pt-b[aria-pressed="true"] .pt-save { background: #0b2a0e; color: var(--lime); }
.price-card.has-toggle .or-line { display: none; }
/* On a phone the switch has no room for "an extra": the pill reads
   "Save $39.89" and the line under the price says the rest. */
@media (max-width: 480px) {
  .plan-toggle .pt-extra { display: none; }
  .plan-toggle .pt-b { padding: 0 12px; }
}
[data-period-show][hidden] { display: none; }
.price-card .ticks { margin: 20px 0 28px; flex: 1; align-content: start; }
.price-card .btn { width: 100%; margin-top: auto; }
.badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--blue); color: #04121f; font-size: 13.5px; font-weight: 700; white-space: nowrap; }

.table-wrap { position: relative; max-width: 920px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font: 600 15px/1.3 var(--font-head); color: var(--text); background: rgba(255, 255, 255, 0.03); }
.compare tbody th { font-weight: 500; color: var(--text); width: 36%; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; font-weight: 700; color: var(--text); }
.compare td { color: var(--text-soft); }
.yes { display: inline-flex; color: var(--blue-hi); }
.yes .tick { width: 20px; height: 20px; }

.faq { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.faq > div { padding: 24px 0; border-top: 1px solid var(--line); }
.faq h3 { font-size: 18px; margin-bottom: 8px; }
.faq p { font-size: 16px; }

/* ---------- contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }
.form-legend { margin: 0 0 12px; font-weight: 600; color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-soft); font: 500 14.5px/1.2 var(--font-body); cursor: pointer; }
.chip:hover { border-color: var(--blue-hi); color: #fff; }
.chip.active { background: var(--blue); border-color: var(--blue); color: #04121f; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; color: var(--text); }
.req { color: var(--warm); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text); font: 400 16px/1.4 var(--font-body);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-hi); box-shadow: var(--focus); }
.more-toggle { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--blue-hi); font: 600 15px var(--font-body); cursor: pointer; }
.more-toggle::before { content: '+ '; }
.more-toggle[aria-expanded="true"]::before { content: '\2212 '; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 15px; background: rgba(43, 169, 224, 0.1); color: var(--text); }
.form-status.bad { background: rgba(242, 184, 102, 0.12); }
.form-privacy { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.contact-aside { display: grid; gap: 16px; }
.contact-aside h3 { margin: 0 0 6px; font-size: 17px; }
.contact-aside p { font-size: 15.5px; }

/* ---------- legal pages (the server writes the document) ---------- */
.page-hero + section { padding: 0 0 var(--section); }
.legal-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; }
.legal-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.legal-card-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(43, 169, 224, 0.12); color: var(--blue-hi); }
.legal-card-icon svg { width: 20px; height: 20px; }
.legal-card h3 { margin: 12px 0 6px; font-size: 17px; }
.legal-card p { font-size: 15px; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal-toc-inner { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding-right: 8px; }
.legal-toc h2 { margin: 0 0 12px; font: 600 13.5px/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc a { display: flex; gap: 10px; padding: 6px 0; font-size: 14.5px; line-height: 1.4; color: var(--text-soft); text-decoration: none; }
.legal-toc a span { color: var(--muted); font-variant-numeric: tabular-nums; }
.legal-toc a:hover { color: #fff; }
.legal-doc { max-width: 760px; counter-reset: legal; }
.legal-doc > p:first-child { color: var(--muted); font-style: italic; }
.legal-doc h2 { counter-increment: legal; display: flex; gap: 14px; align-items: baseline; margin: 44px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 22px; }
.legal-doc h2::before { content: counter(legal); font-size: 15px; color: var(--blue-hi); min-width: 1.6em; }
.legal-doc h2:first-of-type { margin-top: 20px; }
.legal-doc p, .legal-doc li { font-size: 16.5px; }
.legal-doc ul { margin: 0 0 18px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc li::marker { color: var(--blue); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #09101d; padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { margin-top: 18px; max-width: 34ch; font-size: 15.5px; color: var(--muted); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h2 { margin: 0 0 6px; font: 600 13.5px/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.footer-col a { color: var(--muted); text-decoration: none; font-size: 15.5px; width: fit-content; overflow-wrap: anywhere; }
.footer-col a:hover { color: #fff; }
/* The banking notice above the copyright line, on every page. */
/* A solid surface on purpose: this sits on the dark footer, and a
   translucent white background used to let that dark background show
   through, turning the box a middle grey that its own (light-toned) text
   then nearly vanished into. Solid, with dark text throughout, reads
   clearly regardless of what is behind it. */
.footer-notice { margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: #eef3fa; max-width: 980px; }
.footer-notice h2 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; color: #12263A; }
.footer-notice p { font-size: 14.5px; line-height: 1.6; color: #33455c; margin: 0 0 10px; }
.footer-notice p:last-child { margin-bottom: 0; }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
.footer-bottom p { font-size: 14px; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .legal-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 32px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { grid-template-columns: repeat(3, 1fr); }
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc-inner { position: static; max-height: none; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .faq { grid-template-columns: 1fr; gap: 0; }
  .signin-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .g2, .g3, .g4, .steps { grid-template-columns: 1fr; }
  .detail-text .ticks { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-aside { grid-template-columns: 1fr; }
  .legal-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .btn-row:not(.center) .btn, .hero .btn-row .btn, .cta-band .btn-row .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row.center { align-items: stretch; }
  .goto { flex-direction: column; }
  .goto .btn { width: 100%; }
  .roles div { grid-template-columns: 1fr; gap: 2px; }
  .compare th, .compare td { padding: 12px 14px; font-size: 15px; }
  .compare tbody th { width: 40%; }
  .jump { justify-content: flex-start; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 16.5px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-logo { height: 32px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sign-up pages (lib/flowpages.js, start.js): one calm column, a short
   progress line, and nothing else to click away to.
   ========================================================================== */
body.flow { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.flow .ic { width: 20px; height: 20px; flex: 0 0 auto; }
.flow-header { border-bottom: 1px solid var(--line); background: rgba(11, 19, 34, 0.92); }
.flow-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.flow-help { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--text-soft); text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.flow-help:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.flow-main { flex: 1 0 auto; padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 80px); }
.flow-wrap { width: 100%; max-width: calc(640px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.flow h1 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.12; }
.flow h2 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.flow-intro { margin: 0 0 28px; }
.flow-intro .lead { margin-top: 14px; }
.flow-intro.center { text-align: center; }
.flow-back { margin-top: 28px; text-align: center; font-size: 15px; }

/* progress */
.flow-steps { list-style: none; margin: 0 0 clamp(28px, 4vw, 40px); padding: 0; display: flex; gap: 8px; }
.flow-steps li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 3px solid var(--line-2); font-size: 14px; color: var(--muted); }
.flow-steps .dot { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 13.5px/1 var(--font-body); color: var(--muted); }
.flow-steps .label { min-width: 0; line-height: 1.3; }
.flow-steps li.done { border-top-color: var(--blue); color: var(--text-soft); }
.flow-steps li.done .dot { background: var(--blue); border-color: var(--blue); color: #04121f; }
.flow-steps li.current { border-top-color: var(--blue-hi); color: var(--text); font-weight: 600; }
.flow-steps li.current .dot { border-color: var(--blue-hi); color: var(--blue-hi); }

/* notes */
.note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface); margin: 0 0 24px; font-size: 15.5px; line-height: 1.55; }
.note .ic { margin-top: 2px; color: var(--blue-hi); }
.note p { margin: 0 0 6px; }
.note p:last-child { margin: 0; }
.note-title { color: var(--text); font-weight: 600; }
.note-info { border-color: rgba(43, 169, 224, 0.35); background: rgba(43, 169, 224, 0.07); }
.note-success { border-color: rgba(92, 201, 143, 0.4); background: rgba(92, 201, 143, 0.08); }
.note-success .ic { color: #7fdcaa; }
.note-error { border-color: rgba(242, 184, 102, 0.55); background: rgba(242, 184, 102, 0.1); color: var(--text); }
.note-error .ic { color: var(--warm); }
.note-error:focus { outline: none; box-shadow: var(--focus); }
.note[hidden] { display: none; }
.flow-form .note { margin: 0; }

/* the form */
.flow-form { display: flex; flex-direction: column; gap: 20px; }
.form-section { margin: 0; padding: clamp(20px, 3.5vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.form-section legend { float: left; width: 100%; padding: 0; margin: 0; font: 600 18px/1.3 var(--font-head); color: var(--text); letter-spacing: -0.01em; }
.form-section legend.sr-only { float: none; }
.section-lead { font-size: 15.5px; margin: -8px 0 0; }
.flow .field { gap: 6px; }
.flow .field label { font-size: 15.5px; }
.opt { font-weight: 500; font-size: 13.5px; color: var(--muted); margin-left: 6px; }
.help { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 2px 0 0; }
.field-error { display: flex; gap: 6px; font-size: 14.5px; line-height: 1.45; color: var(--warm); font-weight: 500; margin: 2px 0 0; }
.field-error[hidden] { display: none; }
.field-error::before { content: '!'; flex: 0 0 auto; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-top: 2px; border-radius: 50%; background: var(--warm); color: #1a1206; font: 700 13.5px/1 var(--font-body); }
.field.has-error input { border-color: var(--warm); }
.field-status { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; display: flex; gap: 6px; align-items: flex-start; }
.field-status:empty { display: none; }
.flow .field-status .ic { width: 18px; height: 18px; margin-top: 1px; }
.field-status.is-checking { color: var(--muted); }
.field-status.is-ok { color: #7fdcaa; }
.field-status.is-ok strong { color: #a9ecc8; font-weight: 600; overflow-wrap: anywhere; }
.field-status.is-no { color: var(--warm); }

.address-input { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.address-input:focus-within { border-color: var(--blue-hi); box-shadow: var(--focus); }
.field.has-error .address-input { border-color: var(--warm); }
.flow .address-input input { flex: 1 1 auto; width: 0; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.flow .address-input input:focus { box-shadow: none; }
.address-suffix { display: flex; align-items: center; padding: 0 14px; background: var(--surface-2); border-left: 1px solid var(--line); color: var(--text-soft); font-size: 15px; white-space: nowrap; }

.password-input { position: relative; }
.flow .password-input input { padding-right: 96px; }
.reveal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--blue-hi); font: 600 14px var(--font-body); cursor: pointer; }
.reveal:hover { background: rgba(111, 211, 255, 0.08); }
.flow .reveal .ic { width: 18px; height: 18px; }
.pw-rules { list-style: none; margin: 2px 0 0; padding: 0; font-size: 14.5px; color: var(--muted); }
.pw-rules li { display: flex; gap: 8px; align-items: center; }
.pw-rules li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: 0 0 auto; }
.pw-rules li.met { color: #7fdcaa; }
.pw-rules li.met::before { border-color: #7fdcaa; background: #7fdcaa; box-shadow: inset 0 0 0 3px var(--surface); }

/* the plan before paying */
.summary { padding: clamp(20px, 3.5vw, 28px); border-radius: var(--radius); border: 1px solid rgba(43, 169, 224, 0.4); background: linear-gradient(180deg, rgba(43, 169, 224, 0.1), rgba(43, 169, 224, 0.03)); }
.summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.summary-price { margin: 0; font: 700 22px/1.2 var(--font-head); color: var(--text); }
.summary-trial { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 4px 12px; border-radius: 999px; background: rgba(92, 201, 143, 0.12); color: #a9ecc8; font-size: 14.5px; font-weight: 600; }
.flow .summary-trial .ic { width: 18px; height: 18px; }
.summary-list { margin: 16px 0 0; padding-left: 20px; font-size: 15.5px; }
.summary-list li { margin-bottom: 6px; }
.summary-secure { display: flex; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; }
.summary-secure .ic { color: var(--blue-hi); margin-top: 2px; }
/* the refund line in the plan summary, and the privacy note under it */
.summary-list .summary-refund { margin-top: 6px; }
.privacy-note { display: flex; gap: 12px; margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; line-height: 1.55; }
.privacy-note .ic { color: var(--blue-hi); margin-top: 2px; flex: none; }
.privacy-note p { margin: 0; }
/* first and last name side by side */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .field-pair { grid-template-columns: 1fr; } }
/* monthly or yearly, when the console has set a yearly price */
.plan-choice { margin: 14px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-choice legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.plan-opt { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.plan-opt input { margin-top: 3px; accent-color: var(--blue-hi); }
.plan-opt > span { display: flex; flex-direction: column; gap: 2px; }
.plan-amt { font: 700 20px/1.2 var(--font-head); color: var(--text); }
.plan-save { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: rgba(92, 201, 143, 0.14); color: #a9ecc8; font-size: 13.5px; font-weight: 600; }
.plan-opt:has(input:checked) { border-color: var(--blue-hi); background: rgba(43, 169, 224, 0.1); }
.plan-opt:has(input:focus-visible) { outline: 3px solid var(--blue-hi); outline-offset: 2px; }
@media (max-width: 520px) { .plan-choice { grid-template-columns: 1fr; } }
/* what the organization will use FlowView Center for */
.kind-choice { margin-top: 4px; }
.kind-choice .plan-opt strong { font-weight: 600; }
.kind-choice .plan-opt .help { margin: 2px 0 0; }

.submit-row { display: flex; flex-direction: column; gap: 12px; }
.btn-lg { min-height: 54px; font-size: 17px; }
.btn.is-busy, .btn[aria-disabled="true"] { cursor: progress; opacity: 0.85; }
.btn-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(4, 18, 31, 0.3); border-top-color: #04121f; animation: fvspin .8s linear infinite; }
.submit-note { margin: 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.legal-note { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }

/* cards on the later pages */
.panel-card, .address-card, .support-card { padding: clamp(20px, 3.5vw, 28px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); margin: 0 0 20px; }
.card-title { margin: 0 0 12px; }
.flow .card-label { font: 600 13.5px/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-hi); margin: 0 0 8px; }
.facts { margin: 16px 0 0; display: grid; }
.facts > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.url-text { overflow-wrap: anywhere; }
.address-card { border-color: rgba(43, 169, 224, 0.4); text-align: center; }
.address-big { margin: 0; font: 700 clamp(20px, 3.4vw, 26px)/1.3 var(--font-head); color: var(--text); overflow-wrap: anywhere; }
.address-card .flow-actions { justify-content: center; }
.flow-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.inline-form { display: contents; }
.next-steps { margin: 0; padding-left: 22px; }
.next-steps li { margin-bottom: 8px; }
.support-card { background: transparent; border-style: dashed; }
.welcome-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: rgba(92, 201, 143, 0.14); color: #7fdcaa; }
.flow .welcome-mark .ic { width: 34px; height: 34px; }
.spinner { width: 44px; height: 44px; margin: 0 auto 20px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--blue-hi); animation: fvspin 1s linear infinite; }
@keyframes fvspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner, .btn-spinner { animation: fvspin 3s linear infinite !important; } }

.flow-footer { border-top: 1px solid var(--line); padding: 24px 0 32px; font-size: 14px; color: var(--muted); text-align: center; }
.flow-footer p { margin: 0 0 6px; }
.flow-footer a { color: var(--text-soft); }

@media (max-width: 640px) {
  .flow-help span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .flow-help { padding: 10px; }
  .flow-steps { gap: 6px; }
  .flow-steps li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13.5px; }
  .flow-actions { flex-direction: column; align-items: stretch; }
  .flow-actions .btn { width: 100%; white-space: normal; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .address-suffix { padding: 0 10px; font-size: 14px; }
  .btn-lg { white-space: normal; }
}
@media (max-width: 340px) {
  .address-input { flex-direction: column; }
  .flow .address-input input { width: 100%; }
  .address-suffix { border-left: 0; border-top: 1px solid var(--line); padding: 8px 14px; }
}

/* Website Editor additions: an announcement above the header, and a
   picture under a page's introduction. */
.announce { background: var(--blue-deep); color: #fff; font-size: 15px; text-align: center; }
.announce p { margin: 0; padding: 10px 0; }
.announce a { color: #fff; font-weight: 600; }
.hero-img { display: block; width: 100%; max-width: 960px; height: auto; margin: 40px auto 0; border-radius: var(--radius); border: 1px solid var(--line); }

/* Pricing: the four kinds, and what each shows (build.js KINDS, MATRIX) */
.kind-card { display: flex; flex-direction: column; transition: opacity .2s, border-color .2s; }
.kind-card .ticks { flex: 1; }
.kind-card .btn { margin-top: 20px; width: 100%; justify-content: center; }
.kind-card.dim { opacity: .35; }
.kind-card.on { border-color: var(--blue); }
.kind-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(43, 169, 224, .12); color: var(--blue-hi); }
.kind-ic .ic { width: 24px; height: 24px; }
.kind-chips { justify-content: center; margin: 0 0 22px; }
.kinds-matrix { min-width: 720px; }
#features .table-wrap { max-width: none; }
.kinds-matrix td { text-align: center; vertical-align: middle; }
.kinds-matrix tbody th { width: 30%; }
.kinds-matrix tbody tr:last-child th, .kinds-matrix tbody tr:last-child td { font-weight: 400; color: var(--text-soft); }
.kinds-matrix tr.group td { text-align: left; background: rgba(43, 169, 224, .06); color: var(--blue-hi); font: 700 13.5px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.kinds-matrix .hl { background: rgba(43, 169, 224, .09); }
.kinds-matrix .no { color: var(--muted); font-size: 14px; }
.online-tag { display: inline-block; margin-left: 6px; font: 700 13.5px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--warm); border: 1px solid rgba(242, 184, 102, .45); border-radius: 6px; padding: 1px 6px; vertical-align: 2px; }
@media (max-width: 980px) { .grid.g4.kinds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid.g4.kinds { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kind-card { transition: none; } }

/* ---------- Pricing: the light page (build.js pricingBody, October 2026) ----------
   The owner's "Warm Editorial" brief with the "Clear Choices" palette: a warm
   white page, white cards, slate text, one blue for actions, labels and ticks.
   Only inside .pl; the site's header and footer stay as they are. */
.pl { --pl-bg: #FAF9F6; --pl-card: #FFFFFF; --pl-ink: #223A49; --pl-soft: #667880; --pl-line: #DFE5E7; --pl-blue: #315F90; --pl-wash: #EDF2F7;
  background: var(--pl-bg); color: var(--pl-ink); }
.pl .wrap { position: relative; }
.pl h1, .pl h2, .pl h3 { color: var(--pl-ink); }
.pl-label { margin: 0 0 6px; font: 700 13.5px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pl-blue); }
.pl-top { padding: clamp(40px, 6vw, 72px) 0 28px; }
.pl-top-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.pl-intro h1 { font: 400 clamp(38px, 5.2vw, 64px)/1.04 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; margin: 8px 0 18px; }
.pl-lead { font: 400 clamp(17px, 1.6vw, 20px)/1.5 Georgia, serif; color: var(--pl-ink); margin: 0 0 20px; max-width: 30ch; }
.pl-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--pl-wash); color: var(--pl-ink); font-size: 15px; }
.pl-badge svg, .pl-ticks svg { width: 18px; height: 18px; color: var(--pl-blue); flex: none; }
.pl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pl-card { background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(34, 58, 73, .04); }
.pl-card.featured { border-color: #C9D6E4; box-shadow: 0 10px 30px rgba(49, 95, 144, .10); }
.pl-card h2 { font: 400 28px/1.1 Georgia, serif; margin: 0 0 10px; }
.pl .price { font: 700 clamp(34px, 4vw, 44px)/1.05 Georgia, serif; color: var(--pl-ink); margin: 4px 0 6px; }
.pl .price-note, .pl .price-yearly { color: var(--pl-soft); font-size: 15px; margin: 0 0 4px; }
.pl .price-was { color: var(--pl-soft); font-size: 14px; margin: 0; }
.pl .price-save, .pl .pt-save { color: var(--pl-blue); }
.pl .plan-toggle { display: flex; gap: 4px; padding: 4px; margin: 4px 0 12px; border-radius: 10px; background: var(--pl-wash); }
.pl .plan-toggle[hidden] { display: none; }
.pl .pt-b { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--pl-ink); font: 600 14.5px var(--font-body); cursor: pointer; }
.pl .pt-b[aria-pressed="true"] { background: var(--pl-blue); color: #fff; }
.pl .pt-b[aria-pressed="true"] .pt-save { color: #fff; }
.pl .pt-b:focus-visible, .pl-btn:focus-visible, .pl .chip:focus-visible, .pl-kind a:focus-visible { outline: 3px solid #9DB8D9; outline-offset: 2px; }
.pl-ticks { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--pl-line); display: grid; gap: 9px; flex: 1; font-size: 15.5px; }
.pl-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 20px; border-radius: 10px; background: var(--pl-blue); color: #fff; font: 600 16px var(--font-body); text-decoration: none; }
.pl-btn:hover { background: #274d76; }
.pl-btn.ghost { background: #fff; color: var(--pl-blue); border: 1.5px solid var(--pl-blue); }
.pl-btn.ghost:hover { background: var(--pl-wash); }
.pl-strip { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 18px; border-radius: 12px; background: var(--pl-wash); color: var(--pl-ink); font-size: 15px; }
.pl-strip svg { width: 20px; height: 20px; color: var(--pl-blue); flex: none; margin-top: 1px; }
.pl-section { padding: clamp(28px, 4vw, 48px) 0; }
.pl-h2 { font: 400 clamp(28px, 3.4vw, 40px)/1.12 Georgia, serif; margin: 0 0 6px; }
.pl-sub { color: var(--pl-soft); font-size: 17px; margin: 0 0 20px; }
.pl-privacy { background: var(--pl-wash); border-left: 4px solid var(--pl-blue); border-radius: 12px; padding: 24px 28px; }
.pl-privacy h2 { font: 400 clamp(26px, 3vw, 34px)/1.15 Georgia, serif; margin: 0 0 16px; }
.pl-privacy-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pl-privacy-cols p { margin: 0; padding: 0 22px; color: var(--pl-ink); font-size: 15.5px; border-left: 1px solid #CDD8E3; }
.pl-privacy-cols p:first-child { padding-left: 0; border-left: 0; }
.pl .table-wrap.pl-table { max-width: none; background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 12px; }
.pl .compare th, .pl .compare td { border-bottom: 1px solid var(--pl-line); color: var(--pl-ink); }
.pl .compare thead th { background: var(--pl-wash); color: var(--pl-ink); font: 600 15px var(--font-body); text-align: center; }
.pl .compare thead th:first-child { text-align: left; }
.pl .compare td { text-align: center; }
.pl .compare tbody th { font-weight: 600; vertical-align: middle; }
.pl .compare td { vertical-align: middle; }
.pl .compare tbody tr:last-child th, .pl .compare tbody tr:last-child td { color: var(--pl-ink); }
.pl .compare .yes { color: var(--pl-blue); }
.pl .compare .muted { color: var(--pl-soft); }
.pl .kinds-matrix tr.group td { background: #E3EAF2; color: var(--pl-blue); }
.pl .kinds-matrix .hl { background: rgba(49, 95, 144, .08); }
.pl .kinds-matrix .no { display: inline-block; width: 14px; height: 2px; background: #A9B7BF; vertical-align: middle; }
.pl .kinds-matrix .sub { display: block; font-weight: 400; font-size: 13.5px; color: var(--pl-soft); }
.pl .online-tag { color: var(--pl-blue); border-color: rgba(49, 95, 144, .45); }
.pl-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pl-kind { display: flex; gap: 14px; align-items: flex-start; background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 12px; padding: 20px; transition: opacity .2s, border-color .2s; }
.pl-kind.dim { opacity: .4; }
.pl-kind.on { border-color: var(--pl-blue); }
.pl-kind-ic svg { width: 34px; height: 34px; color: var(--pl-blue); }
.pl-kind h3 { font: 400 22px/1.2 Georgia, serif; margin: 0 0 6px; }
.pl-kind p { margin: 0 0 10px; color: var(--pl-soft); font-size: 15px; }
.pl-kind a { color: var(--pl-blue); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.pl .chip { border-color: var(--pl-line); color: var(--pl-ink); background: var(--pl-card); }
.pl .chip:hover { border-color: var(--pl-blue); color: var(--pl-ink); }
.pl .chip.active { background: var(--pl-blue); border-color: var(--pl-blue); color: #fff; }
.pl-scroll-note { display: none; color: var(--pl-soft); font-size: 14px; margin: 0 0 8px; }
.pl .section-head .eyebrow, .pl .eyebrow { color: var(--pl-blue); }
.pl .section-head h2 { font-family: Georgia, serif; font-weight: 400; color: var(--pl-ink); }
.pl .faq > div { border-top-color: var(--pl-line); }
.pl .faq h3 { color: var(--pl-ink); }
.pl .faq p { color: var(--pl-soft); }
@media (max-width: 1020px) { .pl-top-grid { grid-template-columns: 1fr; } .pl-kinds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .pl-cards, .pl-kinds, .pl-privacy-cols { grid-template-columns: 1fr; }
  .pl-privacy-cols p { padding: 12px 0 0; border-left: 0; border-top: 1px solid #CDD8E3; }
  .pl-privacy-cols p:first-child { padding-top: 0; border-top: 0; }
  .pl-scroll-note { display: block; }
}
@media (prefers-reduced-motion: reduce) { .pl-kind { transition: none; } }

/* Pricing fixes (3.2.50): the cards share the width equally and never push
   the page wider; the "Save" and "Offer ends" lines wrap; and on a phone the
   feature table shows one kind at a time, picked with the kind buttons. */
.pl-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pl-card, .pl-intro { min-width: 0; }
.pl .price-card .price-was { margin: 0 0 4px; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pl .price-card .price-save { white-space: normal; background: var(--pl-wash); color: var(--pl-blue); line-height: 1.35; }
.pl .plan-toggle { flex-wrap: nowrap; }
.pl .plan-toggle .pt-b { min-width: 0; padding: 4px 10px; flex-wrap: wrap; justify-content: center; gap: 2px 8px; line-height: 1.2; text-align: center; box-shadow: none; }
.pl .plan-toggle .pt-b[aria-pressed="true"] { background: var(--pl-blue); color: #fff; }
.pl .plan-toggle .pt-save { white-space: normal; background: #DCE7F3; color: var(--pl-blue); font-size: 13.5px; }
.pl .plan-toggle .pt-b[aria-pressed="true"] .pt-save { background: #fff; color: var(--pl-blue); }
.pl .plan-toggle .pt-extra { display: none; }
.pl .price-yearly { font-weight: 600; }
@media (max-width: 1180px) { .pl-top-grid { grid-template-columns: 1fr; } .pl-intro h1 { max-width: 16ch; } }
@media (max-width: 720px) {
  .pl .kinds-matrix { min-width: 0; }
  .pl .kinds-matrix [data-col] { display: none; }
  .pl .kinds-matrix[data-show="church"] [data-col="church"], .pl .kinds-matrix[data-show="all"] [data-col="church"],
  .pl .kinds-matrix[data-show="organization"] [data-col="organization"], .pl .kinds-matrix[data-show="business"] [data-col="business"],
  .pl .kinds-matrix[data-show="personal"] [data-col="personal"] { display: table-cell; }
  .pl .kinds-matrix tbody th { width: 55%; }
  .pl .kind-chips [data-kind="all"] { display: none; }
  .pl-kind.dim { opacity: 1; }
  .pl-kind.on { border-color: var(--pl-line); }
  .pl .compare th, .pl .compare td { padding: 12px 10px; font-size: 14.5px; }
}
.pl-top-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); }
.pl .pl-card .price { font-size: clamp(28px, 2.7vw, 42px); overflow-wrap: anywhere; }
@media (max-width: 1180px) { .pl-top-grid { grid-template-columns: 1fr; } .pl .pl-card .price { font-size: clamp(30px, 5vw, 42px); } }

/* Pricing fixes (3.2.51): the price never breaks inside a word ("$22.99/mont h")
   because it is sized to its own card, and on a phone the two cards sit one
   under the other. */
.pl .pl-card { container-type: inline-size; }
.pl .pl-card .price { font-size: clamp(24px, 2.2vw, 38px); font-size: clamp(24px, 12cqi, 42px); white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 720px) {
  .pl-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Cloudflare Turnstile, the person check above the sign-up and contact buttons (lib/turnstile.js). */
.turnstile-row{margin:14px 0 6px}
.turnstile-row .field-error{margin-top:6px}