/* Soudi Automation site stylesheet (10 Nov 2026). Navy for every dark block, the
   blue for highlighted words, green Free Quote buttons, Roboto. Where it came
   from, and how to keep it in step, is in CLAUDE.md. Page-specific rules for the
   inner pages are at the end. */
  /* =====================================================================
     Tokens. Every colour, size, space, radius and shadow on the page comes
     from here; nothing below should introduce a new value.
     ===================================================================== */
  :root {
    /* Colour: white page, ink, and green (WhatsApp green for buttons; a darker
       green of the same hue for text on white). Off-white is kept for text on ink
       and small fills inside cards. Anything white that sits on the page carries
       the hairline, so it still has an edge. Surface/line/muted are tints of
       the same two. */
    --page: #ffffff;           /* page, every section and the footer */
    --paper: #ffffff;          /* text on the navy blocks */
    --fill: #f4f6fa;           /* fills inside cards: the lead card */
    --surface: #f4f6fa;        /* quiet panels: bubbles, pills */
    --raised: #ffffff;         /* cards */
    --line: #e3e7ee;           /* hairlines */
    --ink: #0e1116;            /* all text */
    --dark: #0d2847;           /* navy: every dark block (never black) */
    --dark-2: #163a63;         /* navy inside navy */
    --muted: #4a5260;          /* secondary text, 8.1:1 on white */
    --on-dark-muted: rgba(255, 255, 255, .72);
    --on-dark-line: rgba(255, 255, 255, .16);
    --green: #0f7a3d;          /* Free Quote buttons, white text 5.6:1 */
    --accent: #2448f5;         /* the highlighted words, links: 5.9:1 on white */
    --accent-tint: #eaf0ff;
    --bronze: #b9c3ff;         /* the annual pill on navy */

    /* Type scale. Headings are fluid and only ever grow with the viewport. */
    --t-xs: 12px;              /* labels, meta */
    --t-sm: 14px;              /* secondary copy, chat */
    --t-base: 16px;            /* body */
    --t-md: 18px;              /* item headings, lede on wide screens */
    --t-lg: 22px;              /* popup title */
    --t-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --t-h1: clamp(2rem, 1.1rem + 3.6vw, 4rem);

    /* Space scale. The layout spaces are fluid, one formula from phone to desktop
       (390px wide -> 1440px wide), so there is no second set of numbers at a breakpoint.
       Values are matched at 390 and 1440 to the spacing of ads.openai.com, used as a
       rhythm reference only. */
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
    --section: clamp(4rem, 2.86rem + 4.7vw, 7rem);     /* between sections: 64 on a phone -> 112 on desktop (Kyan, 12 Nov 2026: 160 read as a hole) */
    --head-gap: 2.5rem;                                /* section heading to its content: 40 at every width */
    --hero-top: clamp(3.5rem, 1.46rem + 8.38vw, 9rem); /* bar to hero top: 56 -> 144 */
    --nav-h: 56px;             /* the sticky bar: 56 on phones, 64 from 768px up */
    --footer-top: clamp(4.5rem, 3.5rem + 4vw, 7rem); /* closing block to footer: 72 -> 112 */

    /* Details */
    --r-card: 16px;            /* cards: demo, popup */
    --r-plan: 20px;            /* pricing cards */
    --r-inner: 12px;           /* things inside a card */
    --r-pill: 999px;
    --shadow: 0 16px 40px -24px rgba(26, 26, 26, .28);
    --btn-h: 44px;             /* 46px from 768px up; never below 44, the comfortable tap target */
    --label: 600 var(--t-xs)/1 var(--font);   /* small caps labels */
    --label-track: .12em;

    --gutter: clamp(20px, 5vw, 64px);
    --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color-scheme: light;
  }

  @font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap;
               src: url("/static/fonts/roboto-400.woff2") format("woff2"); }
  @font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap;
               src: url("/static/fonts/roboto-500.woff2") format("woff2"); }
  @font-face { font-family: "Roboto"; font-weight: 600 700; font-style: normal; font-display: swap;
               src: url("/static/fonts/roboto-700.woff2") format("woff2"); }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 400 var(--t-base)/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  p, h1, h2, h3 { margin: 0; }
  button { font: inherit; color: inherit; }

  .wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
  }
  .sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  h1, h2 { font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
  h1 { font-size: var(--t-h1); line-height: 1.04; max-width: 20ch; }
  h1 .hl { color: var(--accent); white-space: nowrap; }
  h2 { font-size: var(--t-h2); line-height: 1.08; }

  /* ---------- Header ---------- */
  /* A quiet sticky bar: logo, section links (desktop), a compact Free Quote button, and a
     menu button on phones. White with a light blur behind it; the hairline along the bottom
     only appears once the page has scrolled. Every section it links to has scroll-margin-top
     equal to its height, so a heading never lands under it. */
  .nav {
    position: sticky; top: 0; z-index: 40;
    padding-top: env(safe-area-inset-top);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
  }
  .nav.scrolled { border-bottom-color: var(--line); }
  .nav-bar { height: var(--nav-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2); }
  .nav-logo { justify-self: start; display: block; padding: 8px 0; border-radius: 4px; }
  .nav-logo img { height: 16px; width: auto; }
  .nav-links { display: none; gap: var(--s4); }
  .nav-links a, .nav-panel a { color: var(--ink); text-decoration: none; font-size: var(--t-sm); font-weight: 400; }
  .nav-links a { padding: 6px 0; text-underline-offset: 7px; text-decoration-thickness: 1px; }
  .nav-links a:hover, .nav-links a[aria-current="true"] { text-decoration-line: underline; }
  .nav-links a:hover:not([aria-current="true"]) { text-decoration-color: var(--line); }
  .nav-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--s1); }
  .btn.nav-cta { min-height: 44px; padding: 0 var(--s2); gap: 8px; font-size: var(--t-sm); white-space: nowrap; }   /* 44 on phones, the comfortable tap target; 40 from 768px up */
  .nav-menu {
    width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; border-radius: 50%;
  }
  .nav-menu svg { width: 18px; height: 18px; }
  .nav-menu path { transition: transform .2s ease; transform-origin: 9px 9px; }
  .nav-menu[aria-expanded="true"] .l1 { transform: translateY(2.5px) rotate(45deg); }
  .nav-menu[aria-expanded="true"] .l2 { transform: translateY(-2.5px) rotate(-45deg); }
  .nav-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    display: grid; padding: var(--s1) max(var(--gutter), env(safe-area-inset-left)) var(--s2);
    background: var(--page); border-bottom: 1px solid var(--line);
  }
  .nav-panel[hidden] { display: none; }
  .nav-panel a { padding: 12px 0; font-size: var(--t-base); border-bottom: 1px solid var(--line); }
  .nav-panel a:last-child { border-bottom: 0; }
  .nav-panel a[aria-current="true"] { font-weight: 600; }
  .nav a:focus-visible, .nav-menu:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  #how-it-works, #pricing, #faq, #quote, #inbox, #price, #about, #calculator { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top)); }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--btn-h); padding: 0 var(--s3);
    background: var(--green); color: var(--ink);
    border-radius: var(--r-pill);
    font: 600 var(--t-base)/1 var(--font);   /* 16px on phones, 17px from 768px up */
    text-decoration: none;
    transition: filter .2s ease, transform .2s ease;
  }
  .btn:hover { filter: brightness(.95); }
  .btn:active { transform: scale(.985); }
  .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .btn-wa { color: #fff; border: 0; cursor: pointer; font-family: inherit; }   /* also a <button> (Send my enquiry): no browser border */
  /* The Free Quote buttons open the chat, not WhatsApp: same green, a chat mark instead
     of the WhatsApp one. They are buttons, so they carry no href to follow. */
  .btn-chat { color: #fff; border: 0; cursor: pointer; font-family: inherit; }
  .plan-monthly .btn-chat { background: transparent; color: var(--dark); border: 1px solid var(--dark); transition: background-color .2s ease, color .2s ease; }
  .plan-monthly .btn-chat:hover { filter: none; background: var(--dark); color: var(--paper); }
  .btn svg { width: 1em; height: 1em; flex: none; }   /* sized with the label */
  /* Card checkout, off until STRIPE_CHECKOUT is switched on in the script. Dark rather than
     green: green on this page means WhatsApp. */
  .btn-stripe { background: var(--dark); color: var(--paper); }

  /* ---------- Hero: headline, subheadline, one button, then the demo ---------- */
  .hero { padding-top: var(--hero-top); }
  .hero-grid { display: grid; gap: var(--s5); }
  .hero-grid > * { min-width: 0; }
  .lede { margin-top: var(--s2); font-size: var(--t-base); line-height: 1.5; max-width: 46ch; text-wrap: balance; }
  .hero-cta { margin-top: var(--s4); padding: 0 var(--s3); }
  .hero-points { margin-top: var(--s2); font-size: var(--t-sm); color: var(--muted); text-wrap: balance; }
  .hero-points span { white-space: nowrap; }
  .assure { margin-top: var(--s2); font-size: var(--t-sm); line-height: 1.5; color: var(--muted); }
  .assure span { white-space: nowrap; }

  /* ---------- Demo conversations ---------- */
  .demo-wrap { width: 100%; max-width: 440px; margin-inline: auto; }
  .demo {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .demo-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px var(--s2);
    border-bottom: 1px solid var(--line);
  }
  .avatar {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface);
    display: grid; place-items: center;
    font: var(--label);
  }
  .demo-head .who { flex: 1; min-width: 0; line-height: 1.3; }
  .demo-head strong { display: block; font-size: var(--t-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-head small { font-size: var(--t-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .demo-head small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
  .demo-head time { flex: none; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

  .thread {
    height: 400px;
    padding: var(--s1) var(--s2) var(--s2);
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
            mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
    transition: opacity .6s ease;
  }
  .thread.out { opacity: 0; }
  .row {
    flex: none; display: grid; grid-template-rows: 0fr;
    opacity: 0; transform: translateY(8px);
    transition: grid-template-rows .32s ease-out, opacity .32s ease-out, transform .32s ease-out;
  }
  .row.in { grid-template-rows: 1fr; opacity: 1; transform: none; }
  .row > div { min-height: 0; overflow: hidden; display: flex; padding-top: var(--s1); }
  .bubble { max-width: 84%; padding: 10px 14px; border-radius: var(--r-card); font-size: var(--t-sm); line-height: 1.4; }
  .them .bubble { background: var(--surface); border-bottom-left-radius: 4px; }
  .me > div { justify-content: flex-end; }
  .me .bubble { background: var(--dark); color: var(--paper); border-bottom-right-radius: 4px; }
  .typing .bubble { display: inline-flex; gap: 4px; padding: 13px 14px; }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1.1s infinite ease-in-out; }
  .typing i:nth-child(2) { animation-delay: .15s; }
  .typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: .8; } }
  .chips > div { gap: 6px; flex-wrap: wrap; padding-top: 10px; }
  .chip {
    font-size: var(--t-xs); line-height: 1; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--raised);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .chip.picked { background: var(--dark); color: var(--paper); border-color: var(--dark); }
  .lead > div { padding-top: 12px; }
  .lead-card {
    width: 100%; display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--r-inner);
    background: var(--fill);
    font-size: var(--t-xs); line-height: 1.45;
  }
  .lead-card .tick {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--green); color: var(--paper);
    display: grid; place-items: center;
  }
  .lead-card .tick svg { width: 12px; height: 12px; }
  .lead-card strong { display: block; font-size: var(--t-sm); font-weight: 600; }
  .lead-card span { color: var(--muted); }

  .demo-nav { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: var(--s2); }
  .demo-nav[hidden] { display: none !important; }
  .nav-btn {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line); background: transparent;
    display: grid; place-items: center; cursor: pointer;
    transition: background-color .2s ease;
  }
  .nav-btn:hover { background: var(--surface); }
  .nav-btn svg { width: 14px; height: 14px; }
  .dots { display: flex; justify-content: center; flex-wrap: nowrap; min-width: 0; }
  .dots button { width: 20px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
  .dots button::before {
    content: ""; width: 6px; height: 6px; border-radius: var(--r-pill);
    background: var(--muted); opacity: .35;
    transition: width .25s ease, opacity .25s ease;
  }
  .dots button[aria-current="true"]::before { width: 16px; background: var(--dark); opacity: 1; }
  .nav-btn:focus-visible, .dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-radius: var(--r-pill); }

  /* ---------- Pricing ---------- */
  /* Two cards: Monthly light, Annual dark, so Annual reads as the one to pick. Monthly comes
     first, on the left side by side and on top when they stack on phones. Everything in a
     card is centred; the button is pinned to the bottom so both line up. */
  .pricing { max-width: 1000px; margin: var(--head-gap) auto 0; text-align: center; }
  .plans { display: grid; gap: var(--s3); }
  .plan {
    --plan-muted: var(--muted);
    --plan-line: var(--line);
    display: flex; flex-direction: column;
    /* Top and bottom 18px on phones to 26px on desktop; sides 24px to 28px, so most
       features fit on one line. */
    padding: clamp(1.125rem, .9rem + .83vw, 1.625rem) clamp(1.5rem, 1.35rem + .45vw, 1.75rem);
    border: 1px solid var(--line); border-radius: var(--r-plan);
    background: var(--raised);
  }
  .plan-annual {
    --plan-muted: var(--on-dark-muted);
    --plan-line: var(--on-dark-line);
    background: var(--dark); border-color: var(--dark); color: var(--paper);
  }
  /* The pill's slot is kept (empty) on Monthly when the cards sit side by side, so both
     names and prices line up. */
  .plan-flag { display: flex; justify-content: center; margin-bottom: var(--s2); }
  .plan-monthly .plan-flag { display: none; }
  .badge {
    font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase;
    padding: 7px 14px; border: 1px solid var(--bronze); border-radius: var(--r-pill);
    color: var(--bronze); white-space: nowrap;
  }
  .plan-name, .plan-lead { font: var(--label); letter-spacing: .15em; text-transform: uppercase; color: var(--plan-muted); }
  .price {
    margin-top: 12px;
    font-size: clamp(2.375rem, 1.99rem + 1.58vw, 3rem); font-weight: 300;   /* 38px phone, 48px desktop */ letter-spacing: -.03em; line-height: 1;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .price span { margin-left: 4px; font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; color: var(--plan-muted); }
  .plan-note { margin-top: 12px; font-size: var(--t-sm); color: var(--plan-muted); }
  .plan-rule { width: 100%; height: 1px; margin: 21px 0; border: 0; background: var(--plan-line); }
  .plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .plan li { font-size: clamp(.9375rem, .9rem + .15vw, 1rem); line-height: 1.45; text-wrap: balance; }   /* 15px phone, 16px desktop */
  .plan-lead { margin: 21px 0 12px; }
  .plan-rule + .plan-lead { margin-top: 0; }   /* straight under the divider: its margin is the gap */
  /* The last list keeps a gap above the button; margin-top: auto then pins the button to the
     bottom of the card. */
  .plan > ul:last-of-type { margin-bottom: var(--s3); }
  .plan .btn { display: flex; width: 100%; margin-top: auto; }
  .plan .btn[hidden] { display: none; }
  .plan-deadline { margin-top: var(--s4); font-size: var(--t-sm); color: var(--muted); }
  .pricing .assure { margin-top: 4px; text-wrap: balance; }

  /* ---------- Sections ---------- */
  /* Each section owns the space above it, so two neighbours never add up to double. */
  section.band { padding-top: var(--section); }
  .section-head { text-align: center; }

  /* Benefits: four cards. Stacked on phones, two by two from 768px up - four across was
     a wall of text on a phone, which is what this replaces. White on white, so each card
     carries the hairline; equal heights come from the grid rows. */
  .benefits { list-style: none; margin: var(--head-gap) 0 0; padding: 0; display: grid; gap: var(--s3); }
  .benefits li {
    display: flex; flex-direction: column; text-align: start;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-plan);
  }
  .benefit-icon { display: inline-flex; align-self: flex-start; color: var(--accent); }
  .benefit-icon svg { width: 24px; height: 24px; }
  .benefits h3 { margin-top: var(--s2); font-size: clamp(1.125rem, 1.05rem + .25vw, 1.1875rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }   /* 18 phone, 19 desktop */
  .benefits p { margin-top: var(--s1); font-size: clamp(.9375rem, .9rem + .15vw, 1rem); line-height: 1.55; color: var(--muted); max-width: 46ch; }   /* 15 phone, 16 desktop */

  /* How it works: three rows. From 1024px each row is a narrow text column beside a large
     picture panel (2:3), alternating sides; below that every row is text, then panel. The
     panels are all the same 4:3 size. Each screenshot floats in its panel, centred, starting
     near the top and clipped by the panel's bottom edge. The screenshots are 2x WebP at
     768px, shown at most 384px wide so they stay crisp. */
  .section-sub { margin: var(--s2) auto 0; max-width: 40ch; color: var(--muted); text-wrap: balance; }
  .steps { list-style: none; margin: var(--head-gap) auto 0; padding: 0; display: grid; gap: clamp(3.5rem, 2.2rem + 5.2vw, 7rem); max-width: 1180px; }   /* 56 -> 110 between rows */
  .step { display: grid; gap: var(--s4); }
  .step-text h3 { font-size: clamp(1.5rem, 1.35rem + .45vw, 1.75rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }   /* 24 -> 28 */
  .step-text p { margin-top: 12px; max-width: 280px; color: var(--muted); line-height: 1.5; }
  .pill-btn {
    display: inline-flex; align-items: center; min-height: 40px; margin-top: 20px; padding: 0 18px;
    border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
    font: 500 var(--t-sm)/1 var(--font); text-decoration: none; cursor: pointer;
    transition: background-color .2s ease;
  }
  .pill-btn:hover { background: var(--line); }
  .pill-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .step-panel {
    position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-plan);
    background: linear-gradient(145deg, #ffffff 0%, #f4f6fa 45%, #eaf0ff 100%);
  }
  .step-panel img {
    position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
    width: 62%; max-width: 384px; height: auto;
    border: 1px solid var(--line); border-radius: var(--r-card);
  }
  /* The WhatsApp picture's point, the reply ready to send, is at its bottom, so that one
     sits on the panel's bottom edge and runs off the top instead. */
  .step-panel.from-bottom img { top: auto; bottom: 8%; }
  @media (max-width: 1023px) {
    .step-text h3 br { display: none; }      /* one or two lines, wherever it wraps */
    .step { width: 100%; max-width: 560px; margin-inline: auto; text-align: left; }
  }
  @media (min-width: 1024px) {
    .step { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: clamp(3rem, 1rem + 4vw, 6rem); }
    .step:nth-child(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .step:nth-child(even) .step-text { order: 2; }
    .step-text { padding-inline: var(--s2); }
    .step-panel img { width: 55%; }
  }

  /* Heading beside content on wide screens; stacked and centred on phones */
  .split { display: grid; gap: var(--head-gap); }

  /* FAQ */
  .faq { border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
    padding-block: var(--s2);
    font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);   /* 17 phone, 18 desktop */
    font-weight: 500; line-height: 1.35; cursor: pointer;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; flex: none; font-size: var(--t-lg); font-weight: 400; line-height: 1; color: var(--muted); transition: transform .2s ease; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
  .faq details p { padding-bottom: var(--s2); font-size: clamp(.9375rem, .9rem + .15vw, 1rem); line-height: 1.6; max-width: 62ch; }   /* 15 phone, 16 desktop */

  /* Closing call to action: an ink block the width of the content, so the page ends on a
     strong note against the white. Same corner family as the pricing cards. Off-white on
     ink is 16.1:1; the lede at 80% is 11.6:1 and the small line at 62% is 6.9:1. */
  .final {
    background: var(--dark); color: var(--paper);
    border-radius: var(--r-plan);
    padding: clamp(3rem, 1.9rem + 4.5vw, 6rem) clamp(1.5rem, .8rem + 2.9vw, 3.5rem);   /* 48 -> 96 top and bottom */
    text-align: center;
  }
  .final h2 { color: var(--paper); }
  .final-lede { margin: var(--s2) auto 0; max-width: 40ch; color: rgba(255, 255, 255, .82); text-wrap: balance; }
  .final .btn { margin-top: var(--s4); padding: 0 var(--s3); }
  .final .btn:focus-visible { outline-color: var(--paper); }
  /* The enquiry form. Two columns from 560px up, one on a phone; white fields on the ink
     block, labels above them, and the errors under the field they belong to. */
  .enquiry { margin: var(--s4) auto 0; max-width: 620px; display: grid; gap: var(--s2); text-align: start; }
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .enquiry label { font-size: var(--t-sm); font-weight: 500; color: var(--paper); }
  .field-opt { color: var(--on-dark-muted); font-weight: 400; }
  .enquiry input, .enquiry textarea {
    width: 100%; min-height: 46px; padding: 11px 14px;
    background: var(--page); color: var(--ink);
    border: 1px solid transparent; border-radius: var(--r-inner);
    font: 400 var(--t-base)/1.4 var(--font);
  }
  .enquiry textarea { min-height: 92px; resize: vertical; }
  .enquiry input:focus-visible, .enquiry textarea:focus-visible {
    outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green);
  }
  .enquiry [aria-invalid="true"] { border-color: #ffb3a7; }
  .field-err, .form-error { font-size: var(--t-sm); color: #ffb3a7; }
  .form-error a { color: #ffb3a7; }
  .field-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .enquiry-send { display: flex; flex-direction: column; gap: var(--s1); align-items: center; margin-top: var(--s1); }
  .enquiry-send .btn { width: 100%; max-width: 320px; }
  .enquiry-send .btn[disabled] { opacity: .7; cursor: default; }
  .final-alt { margin-top: var(--s3); font-size: var(--t-sm); color: var(--on-dark-muted); }
  .final-alt a { color: var(--paper); text-underline-offset: 4px; }
  @media (min-width: 560px) {
    .enquiry { grid-template-columns: 1fr 1fr; }
    .field-wide { grid-column: 1 / -1; }
  }

  /* ---------- Footer ---------- */
  /* The bottom padding clears the chat pill's 96px frame, so at the very bottom of the
     page nothing in the footer sits under it. */
  footer { padding-block: var(--footer-top) calc(96px + var(--s2)); }
  footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
  footer img { height: 16px; width: auto; }
  footer small { font-size: var(--t-xs); color: var(--muted); }

  /* ---------- Offer popup ---------- */
  /* Not modal: no backdrop, the page stays usable behind it. Bottom sheet on phones,
     sitting above the chat pill (whose frame is 96px tall in the bottom-right corner);
     bottom-left card on larger screens, where the chat has the bottom-right corner. */
  .offer {
    position: fixed; z-index: 50;
    left: 12px; right: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px);
    /* The top of the card is the close button's own row (10px + its 36px + 10px), so the
       deadline pill starts below it and the two can never meet however long the line is.
       French is the longest of the three: "Offre valable jusqu'au 1er octobre". */
    --offer-top: 56px;
    padding: var(--offer-top) var(--s2) var(--s2);
    background: var(--raised); text-align: center;
    border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: var(--shadow);
    transition: transform .35s ease, opacity .35s ease;
  }
  .offer[hidden] { display: none; }
  .offer.entering { transform: translateY(16px); opacity: 0; }
  .offer-pill { display: inline-block; max-width: 100%; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; padding: 6px 10px; border-radius: var(--r-pill); background: var(--dark); color: var(--paper); }
  .offer h2 { margin-top: var(--s1); font-size: var(--t-lg); line-height: 1.2; letter-spacing: -.02em; }
  .offer p { margin-top: 4px; font-size: var(--t-sm); line-height: 1.45; text-wrap: balance; }
  .offer .btn { margin-top: var(--s2); padding: 0 var(--s3); }
  .offer-close {
    position: absolute; top: 10px; right: 10px;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--raised);
    display: grid; place-items: center; cursor: pointer;
  }
  .offer-close svg { width: 13px; height: 13px; }
  .offer-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* =====================================================================
     Breakpoints
     ===================================================================== */
  @media (max-width: 359px) {
    .nav-btn { width: 32px; height: 32px; }
    .dots button { width: 18px; }
  }

  /* Phones: one centred column. Centred text is balanced so short last lines don't
     leave ragged edges. */
  @media (max-width: 767px) {
    /* The hero's own Free Quote sits right under the bar, so the nav one is a duplicate:
       the bar keeps the logo and the menu. */
    .nav-cta { display: none; }
    .hero-head, .split, footer .wrap { text-align: center; }
    h1, .lede { margin-inline: auto; }
    .assure { text-wrap: balance; }
    .thread { height: 340px; }
    /* The heading stays centred like the others; questions and answers read left-aligned,
       with the + at the right edge as on desktop. */
    .faq { text-align: left; }
    footer .wrap { flex-direction: column; gap: var(--s1); }
  }

  @media (min-width: 560px) {
    .benefits { grid-template-columns: 1fr 1fr; }
  }

  @media (min-width: 768px) {
    .lede { font-size: var(--t-md); }
    /* Section headings sit on the same left edge as the hero, except the ones marked
       .centred. */
    .section-head { text-align: left; }
    .section-head.centred { text-align: center; }
    .plans { grid-template-columns: 1fr 1fr; }
    .plan-monthly .plan-flag { display: flex; visibility: hidden; }
    .hero-points { white-space: nowrap; }
    :root { --btn-h: 46px; --nav-h: 64px; }
    .nav-bar { grid-template-columns: 1fr auto 1fr; }
    .btn.nav-cta { min-height: 40px; }
    .nav-links { display: flex; }
    .nav-menu, .nav-panel { display: none; }
    .btn { font-size: 1.0625rem; }
    .offer { left: var(--s3); right: auto; bottom: var(--s3); width: 380px; padding: var(--offer-top) var(--s3) var(--s3); }
    .offer p { margin-top: var(--s1); }
  }

  @media (min-width: 960px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s6); align-items: start; }
  }

  @media (min-width: 1120px) {
    /* Hero content capped at 1180px so the headline and the demo sit together. */
    .hero .wrap { max-width: calc(1180px + 2 * var(--gutter)); }
    .hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
      column-gap: clamp(40px, 5vw, 110px); align-items: center;
    }
    .hero-grid > .demo-wrap { margin-inline: auto 0; }
    .thread { height: 420px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .row, .thread, .chip, .dots button::before, .btn, .pill-btn, .faq summary::after, .offer, .nav, .nav-menu path { transition: none; }
    .typing i { animation: none; }
  }

/* =====================================================================
   The inner pages, the logo and the footer.
   ===================================================================== */
/* The logo: the earlier black and white mark and wordmark, in currentColor. */
.nav-logo, .foot-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.nav-logo svg, .foot-logo svg { display: block; flex: none; }
.nav-logo .word, .foot-logo .word { font: 700 12px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }

/* Footer: the logo and copyright line, then the links and the company line. */
.foot-more { margin-top: var(--s3); display: grid !important; gap: var(--s2); justify-content: stretch !important; text-align: start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px var(--s3); }
.foot-links a, .cookie-link { font-size: var(--t-xs); color: var(--muted); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.foot-links a:hover, .cookie-link:hover { color: var(--ink); text-decoration: underline; }
.cookie-link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.cookie-link[hidden] { display: none; }
footer .foot-more small { max-width: 80ch; }

/* The enquiry form's thank-you, in place of the form. */
.enquiry-done { margin: var(--s4) auto 0; max-width: 620px; }
.enquiry-done:focus { outline: none; }
.enquiry-done-title { font-size: var(--t-lg); font-weight: 500; }
.enquiry-done p + p { margin-top: var(--s1); color: rgba(255, 255, 255, .82); }

/* Small label over a heading (the inner pages' section labels). */
.eyebrow { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
.final .eyebrow, .calc .eyebrow { color: var(--bronze); }
.hero-head .eyebrow { margin-bottom: var(--s2); }

/* Missed-enquiry calculator: a navy block like the closing call to action. */
.calc {
  background: var(--dark); color: var(--paper); border-radius: var(--r-plan);
  padding: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) clamp(1.5rem, .8rem + 2.9vw, 3.5rem);
  display: grid; gap: var(--s5); align-items: center;
}
.calc h2 { color: var(--paper); }
.calc .final-lede { margin: var(--s2) 0 0; }
.calc-box { background: var(--dark-2); border-radius: var(--r-card); padding: var(--s4) var(--s3); display: grid; gap: 10px; }
.calc-row { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--t-sm); color: var(--on-dark-muted); }
.calc-row span { color: var(--paper); font-weight: 600; }
.calc-box input[type=range] { width: 100%; height: 32px; margin: 0 0 var(--s1); accent-color: #ffffff; cursor: pointer; }
.calc-total { border-top: 1px solid var(--on-dark-line); padding-top: var(--s3); display: grid; gap: 4px; font-size: var(--t-sm); color: var(--on-dark-muted); }
.calc-total strong { font-size: clamp(2.375rem, 1.99rem + 1.58vw, 3.25rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: var(--paper); font-variant-numeric: tabular-nums; }
.calc-caption { color: var(--bronze); }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 767px) { .calc-text { text-align: center; } .calc .final-lede { margin-inline: auto; } }

/* About us: the two founders side by side, Kyan first, and the text beside them. */
.team { margin-top: var(--head-gap); display: grid; gap: var(--s5); align-items: start; }
.team-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.team-people li { display: flex; flex-direction: column; gap: 4px; }
.team-people img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-plan); margin-bottom: 10px; }
.team-people strong { font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; }
.team-role { font-size: var(--t-sm); color: var(--accent); font-weight: 500; }
.team-people a { align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; font-size: var(--t-sm); color: var(--muted); text-underline-offset: 4px; }
.team-text { display: grid; gap: var(--s2); }
.team-text p { color: var(--muted); line-height: 1.6; }
.team-text hr { width: 100%; height: 1px; margin: var(--s1) 0; border: 0; background: var(--line); }
.team-text h3 { font-size: clamp(1.125rem, 1.05rem + .25vw, 1.25rem); font-weight: 600; letter-spacing: -.01em; }
.team-text .eyebrow { margin: 0; }
.team-text .team-mission { color: var(--dark); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; }
@media (min-width: 960px) { .team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); } }
@media (max-width: 767px) { .team-text { text-align: center; } .team-people li { text-align: start; } }

/* Two buttons on a plan card: the Free Quote is pinned to the bottom (margin-top: auto),
   Subscribe sits straight under it. On the navy annual card it is white on navy. */
.plan .btn + .btn { margin-top: var(--s1); }
.plan-annual .btn-stripe { background: var(--paper); color: var(--dark); }

/* A multi-paragraph FAQ answer: the gap between paragraphs, not after the last. */
.faq details p + p { margin-top: calc(-1 * var(--s1)); }