/* ==========================================================================
   TwistedWave — redesigned marketing site
   Single stylesheet for index-new / mac-new / windows-new / ios-new.
   No inline styles anywhere (CSP): all design tokens + components live here.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --accent:        #1383e0;   /* brand blue (mic icon / waveforms) */
  --accent-strong: #0d6fc4;   /* hover */
  --accent-bright: #3aa8ff;   /* glow / links on dark */

  --ink:    #15212c;          /* headings */
  --body:   #46535f;          /* paragraphs */
  --muted:  #6b7785;          /* secondary text */

  --surface:     #ffffff;
  --surface-alt: #f4f8fc;     /* light section background */
  --border:      #e5ecf3;

  --hero-1: #0a1626;          /* dark hero / footer base */
  --hero-2: #0e2742;
  --hero-ink:   #eef4fb;      /* text on dark */
  --hero-muted: #9fb3c9;      /* muted text on dark */

  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 18px 40px -14px rgba(13, 32, 60, .28);
  --shadow-sm: 0 6px 18px -8px rgba(13, 32, 60, .25);

  --container: 1120px;
  --gutter: 22px;
  --nav-h: 62px;              /* nav height; the hero extends up under the nav */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, "Helvetica Neue", sans-serif;
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* The `hidden` attribute must win even on elements that set their own display
   (e.g. .btn / .hero__cta-badge use display:flex), so the adaptive homepage
   CTA can stay hidden until site-new.js reveals the right one. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       -webkit-tap-highlight-color: transparent; }   /* no grey flash on mobile taps */

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--surface);
  accent-color: var(--accent);   /* native checkboxes / radios / range pick up the brand blue */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(19, 131, 224, .18); }

h1, h2, h3 { color: var(--ink); line-height: 1.15; font-weight: 800; margin: 0 0 .5em;
             text-wrap: balance; }   /* even line lengths on multi-line headings */
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0 0 1rem; text-wrap: pretty; }   /* avoid single-word last lines */

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; border-radius: 4px; }

img, video { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 1rem; padding-left: 1.2em; }
li { margin: .3em 0; }

/* ---- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(48px, 7vw, 92px) 0; scroll-margin-top: 76px; }
.section--alt { background: var(--surface-alt); }
.section__head { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.section__lead { font-size: 1.12rem; color: var(--muted); margin: 0; }
.section__note { font-size: .98rem; color: var(--muted); max-width: 640px; margin: 1.1rem auto 0; }

.eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}

.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;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .72em 1.4em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  /* Firefox: keep the button on its own compositing layer so the hover lift
     slides a cached raster of the label instead of re-rendering it each frame.
     Without this, Firefox swaps sub-pixel AA for grayscale AA during the
     transform and the text appears to drift sideways. */
  will-change: transform;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(19,131,224,.8); }
.btn--primary:hover { background: var(--accent-strong); color: #fff; }

.btn--ghost { background: transparent; color: var(--hero-ink); border-color: rgba(255,255,255,.32); }
.btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

.btn--light { background: #fff; color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn--light:hover { background: var(--surface-alt); color: var(--ink); }

.btn--lg { padding: .92em 1.7em; font-size: 1.06rem; }

/* Loading state: hide the label and overlay a spinner (keeps button width). */
.btn--loading { color: transparent !important; pointer-events: none; position: relative; }
.btn--loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 1.05em; height: 1.05em; margin: -.525em 0 0 -.525em;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  border-radius: 50%; animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---- Screenshot frame --------------------------------------------------- */
.shot {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: #fff;
  overflow: hidden;
}
.shot--plain { border: 0; box-shadow: var(--shadow); }
/* Windows app windows have natively rounded corners baked into the screenshot
   (the PNG has transparent corners). Let the image's alpha define the shape:
   no white fill or square clip, and use a drop-shadow so the shadow hugs the
   rounded corners at any display size. */
.theme-windows .shot {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  filter: drop-shadow(0 16px 30px rgba(13, 32, 60, .26));
}

/* ---- Top navigation ----------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 22, 38, .82);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-nav { background: rgba(10, 22, 38, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.site-nav__inner {
  display: flex; align-items: center; gap: 18px;
  min-height: var(--nav-h);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 1.12rem; color: #fff; letter-spacing: -.01em;
  margin-right: auto;
}
.nav-brand:hover { color: #fff; text-decoration: none; }
.nav-brand img { width: 40px; height: 40px; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  color: var(--hero-muted); font-weight: 600; font-size: .96rem;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.nav-link[aria-current="page"] { color: #fff; }
.nav-cta { margin-left: 8px; }

.nav-toggle {
  display: none;
  width: 42px; height: 38px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 9px;
  cursor: pointer;
}
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  display: block; width: 20px; height: 2px; margin: 0 auto;
  background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { content: ""; position: absolute; top: -6px; }
.nav-toggle__bar::after  { content: ""; position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));   /* slide up so the dark hero fills behind the translucent nav */
  padding-top: var(--nav-h);             /* ...while keeping the hero content clear of the nav */
  background: linear-gradient(165deg, var(--hero-1) 0%, var(--hero-2) 70%, #103257 100%);
  color: var(--hero-ink);
  isolation: isolate;
}
.hero__glow {
  position: absolute; inset: -30% -10% auto -10%; height: 80%;
  background: radial-gradient(60% 60% at 70% 10%, rgba(58,168,255,.35), transparent 70%);
  z-index: -1; pointer-events: none;
}
/* Audio-waveform motif anchored at the bottom of the hero. On pages with a
   screenshot the tall dual-channel wave flanks it; text-only heroes render the
   short ".hero-wave--floor" baseline instead (see shared/_hero_wave). */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  height: clamp(190px, 48%, 400px);
  z-index: -1; pointer-events: none;
  filter: drop-shadow(0 0 9px rgba(58, 168, 255, .40));
}
.hero-wave--floor { height: clamp(72px, 11vw, 96px); }
/* text-only heroes (no screenshot): leave room so the baseline clears the content */
.hero:not(:has(.hero__shot)) .hero__inner { padding-bottom: clamp(104px, 13vw, 128px); }

@media (max-width: 560px) {
  .hero-wave { height: clamp(120px, 34vw, 200px); }
  .hero-wave--floor { height: clamp(60px, 16vw, 84px); }
  .hero:not(:has(.hero__shot)) .hero__inner { padding-bottom: clamp(86px, 24vw, 108px); }
}

.hero__inner { padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 72px); text-align: center; }
.hero__title {
  color: #fff;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  letter-spacing: -.02em; margin: 0 auto .55em; max-width: 16ch;
}
.hero__title .accent { color: var(--accent-bright); }
.hero__subtitle {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--hero-muted); max-width: 52ch; margin: 0 auto 1.8em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: .6em; }
/* Apple App Store badge, swapped in for the pill button on iPhone/iPad. */
.hero__cta-badge { display: inline-flex; border-radius: 9px; transition: transform .12s ease; }
.hero__cta-badge:hover { transform: translateY(-2px); }
.hero__cta-badge:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.hero__cta-badge img { display: block; height: 50px; width: auto; }
.hero__note { font-size: .9rem; color: var(--hero-muted); margin-top: 1.1em; }
.hero__note a { color: var(--accent-bright); }

.hero__shot { margin: clamp(36px, 6vw, 64px) auto 0; max-width: 880px; }

/* hero variant for inner pages (smaller, with a small icon) */
.hero--page .hero__inner { padding-block: clamp(48px, 7vw, 80px) clamp(32px, 5vw, 52px); }
.hero__icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 18px; box-shadow: var(--shadow); }

/* ---- Platform grid (homepage) ------------------------------------------ */
.platform-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(4, 1fr);
}
.platform-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.platform-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; }
.platform-card__media { aspect-ratio: 16 / 10; background: var(--surface-alt); overflow: hidden; }
.platform-card__media img { width: 100%; height: 100%; object-fit: cover; }
.platform-card__body { padding: 18px 20px 22px; }
.platform-card__title { margin: 0 0 .35em; color: var(--ink); font-size: 1.18rem; }
.platform-card__text { color: var(--muted); font-size: .96rem; margin: 0 0 .9em; }
.platform-card__link { font-weight: 700; }

/* ---- Feature rows (alternating) ----------------------------------------- */
.feature {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  grid-template-columns: 1fr 1fr;
  padding: clamp(36px, 5vw, 60px) 0;
}
.feature + .feature { border-top: 1px solid var(--border); }
.feature--reverse .feature__media { order: 2; }
.feature__media img, .feature__media video { margin-inline: auto; }
.feature__media .shot { display: inline-block; }
.feature__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.feature__list { color: var(--body); }
.feature__media--center { text-align: center; }

/* ---- Feature card grid ("and much more") -------------------------------- */
.feature-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.feature-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.feature-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 12px; background: rgba(19,131,224,.1); color: var(--accent);
}
.feature-card__icon .icon { width: 24px; height: 24px; }
.feature-card h3 { margin-bottom: .35em; }
.feature-card p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ---- Icons -------------------------------------------------------------- */
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* The vendor marks (the Apple logo, the Windows flag) are solid shapes rather
   than outlines, so they need the fill and stroke the other way round. */
.icon--solid { fill: currentColor; stroke: none; }

/* Optical sizing, the same idea as .product-icon in zendesk_tools.css. Both
   marks run to the edge of the 24 grid where the outlines inset themselves by
   a couple of units, and a filled shape reads heavier than an outline of the
   same size, so each is scaled back until it carries the weight of the phone
   and the globe beside it. The flag comes down furthest: it is the only mark
   that is solid in both directions. */
.feature-card__icon .icon--solid { transform: scale(.92); }
.feature-card__icon .icon--windows { transform: scale(.86); }

/* ---- Testimonials ------------------------------------------------------- */
.quotes { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.quote {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 24px 22px; box-shadow: var(--shadow-sm);
}
/* Big decorative opening quote, low-opacity, sitting behind the text. */
.quote::before {
  content: "\201C";
  position: absolute; top: 2px; left: 16px;
  font: 800 4.4rem/1 Georgia, "Times New Roman", serif;
  color: var(--accent); opacity: .12; pointer-events: none;
}
.quote__text { position: relative; color: var(--ink); font-size: 1.02rem; margin: 0 0 .9rem; }
.quote__author { position: relative; color: var(--muted); font-size: .92rem; font-weight: 600; }
.quote__author a { font-weight: 600; }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band {
  background: linear-gradient(165deg, var(--hero-1), var(--hero-2));
  color: var(--hero-ink); border-radius: var(--radius);
  padding: clamp(36px, 5vw, 56px); text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--hero-muted); max-width: 48ch; margin-inline: auto; }
.cta-band .hero__cta { margin-top: 1.4em; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--hero-1); color: var(--hero-muted); padding: 40px 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.footer-link { color: var(--hero-muted); font-size: .94rem; }
.footer-link:hover { color: #fff; text-decoration: none; }
.site-footer__copy { font-size: .9rem; margin: 0; }

/* ---- Support page: form, contact, about --------------------------------- */
.support-form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 540px; margin-inline: auto; }
.support-form input {
  flex: 1 1 240px; min-width: 0;
  padding: .8em 1.2em; font: inherit; color: var(--ink);
  background: #fff; border: 1.5px solid var(--border); border-radius: 999px;
}
.support-form input::placeholder { color: var(--muted); }
.support-form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(19,131,224,.18); }

.contact-email { font-weight: 700; word-break: break-word; }

.about { display: flex; gap: clamp(22px, 4vw, 38px); align-items: flex-start; max-width: 780px; margin-inline: auto; }
.about__photo { flex: none; width: 120px; height: 180px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-sm); }
.about__address { color: var(--muted); font-size: .94rem; margin-top: 1.2em; }

.flag { display: inline-block; width: 22px; height: auto; vertical-align: -4px; margin-right: .35em; border-radius: 2px; }

@media (max-width: 600px) {
  .support-form input { flex-basis: 100%; }
  .support-form .btn { width: 100%; }
  .about { flex-direction: column; align-items: center; text-align: center; }
}

/* ---- Modal dialog (license lookup) ------------------------------------- */
.modal { border: 0; padding: 0; background: transparent;
  max-width: 520px; width: calc(100% - 2 * var(--gutter)); color: var(--body); }
.modal::backdrop { background: rgba(10, 22, 38, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal__card { position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(28px, 4vw, 40px); }
.modal__title { margin-top: 0; }
.modal__body :last-child { margin-bottom: 0; }
.modal__email { font: .95rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  word-break: break-word; color: var(--ink); }
.modal__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.modal__close { position: absolute; top: 12px; right: 14px;
  background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--muted); }
.modal__close:hover { color: var(--ink); }

/* ---- FAQ accordion ------------------------------------------------------ */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.faq-item:last-of-type { border-bottom: 1px solid var(--border); }
.faq-item > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 48px 22px 0;
  font-weight: 700; font-size: 1.08rem; color: var(--ink); line-height: 1.4;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ""; position: absolute; right: 12px; top: 27px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] > summary::after { transform: rotate(225deg); }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; border-radius: 6px; }
.faq-answer { padding: 0 48px 24px 0; }
.faq-answer > :first-child { margin-top: 0; }
.faq-answer :last-child { margin-bottom: 0; }
.faq-answer pre {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 0 0 1rem; overflow-x: auto;
  font: .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink); white-space: pre-wrap; word-break: break-word;
}
.faq-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---- Tag / badge + prose ------------------------------------------------ */
.tag {
  display: inline-block; margin-bottom: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: rgba(19,131,224,.1);
  border-radius: 999px; padding: 4px 11px;
}
.prose { max-width: 680px; margin-inline: auto; }
.prose > :first-child { margin-top: 0; }
.prose :last-child { margin-bottom: 0; }
/* When prose is followed by another block (e.g. a feature grid), restore the
   gap: the rule above zeroes the last paragraph's margin, and sibling blocks
   like .feature-grid have no top margin, so the two would otherwise collide. */
.prose:not(:last-child) { margin-bottom: clamp(32px, 5vw, 56px); }
.stat { font-size: 2.6rem; font-weight: 800; color: var(--accent); line-height: 1.05; margin: 0 0 4px; }

/* ---- Utilities ---------------------------------------------------------- */
.muted { color: var(--muted); }
.center { text-align: center; }
.stack-sm > * + * { margin-top: .6rem; }
.mt-lg { margin-top: clamp(32px, 5vw, 56px); }
.hide { display: none !important; }   /* toggled by JS to reveal/collapse blocks */

/* ---- App Store badge ---------------------------------------------------- */
/* The official badge artwork is black, so only place it on a light surface. */
.store-badge { display: inline-block; }
.store-badge img { width: 200px; height: auto; }
.store-badge:hover { text-decoration: none; opacity: .85; }

/* ---- Free-upgrade claim card (Mac App Store) ---------------------------- */
/* Hidden until /js/new-upgrade-policy.js detects a recent purchaser arriving
   with a #serial=… link, then reveals the form / download buttons. */
.claim {
  max-width: 600px; margin-inline: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: clamp(26px, 4vw, 40px); text-align: center;
}
.claim > :first-child { margin-top: 0; }
.claim > :last-child { margin-bottom: 0; }
.claim__key {
  display: inline-block; margin: .2rem 0 .6rem;
  font: 700 1.05rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 14px; word-break: break-all;
}
.claim-form { display: grid; gap: 12px; max-width: 380px; margin: 1.4rem auto 0; }
.claim-form input[type=text],
.claim-form input[type=email] {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  padding: .72em 1.1em; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
}
.claim-form input::placeholder { color: var(--muted); }
.claim-form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(19,131,224,.18); }
.claim-form .btn { margin-top: 4px; width: 100%; }
.claim__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.3rem; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid, .quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(10, 22, 38, .97);
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 10px var(--gutter) 16px;
    display: none;
  }
  .nav-links--open { display: flex; }
  .nav-link { padding: 11px 12px; font-size: 1rem; }
  .nav-cta { margin: 8px 0 0; }

  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { order: -1; }   /* image above text on mobile */
}

@media (max-width: 560px) {
  .platform-grid, .feature-grid, .quotes { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
}

/* ---- Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}