:root {
    --cobalt: #1D4ED8;
    --coral: #FF5A4A;
    --coral-ink: #D23A2A;
    --cream: #FFF7E6;
    --mint: #CFF5E5;
    --charcoal: #1F1F1F;
    --sunshine: #FFE97A;
    --white: #FFFFFF;
    --navy: #16275E;
    --ink-soft: #4B4B47;
    --line: rgba(31,31,31,.14);
    --max: 1140px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--cream); color: var(--charcoal); font-family: var(--body); font-size: 16px; line-height: 1.65; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

  .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 15.5px; line-height: 1; border-radius: 999px; padding: 15px 26px; cursor: pointer; text-decoration: none; border: 2px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
  .btn:active { transform: scale(.97); }
  .btn-primary { background: var(--cobalt); color: var(--white); box-shadow: 0 2px 0 rgba(31,31,31,.25); }
  .btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 5px 0 rgba(31,31,31,.22); }
  .btn-coral { background: var(--coral-ink); color: var(--white); box-shadow: 0 2px 0 rgba(31,31,31,.25); }
  .btn-coral:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 5px 0 rgba(31,31,31,.22); }

  .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--mint); border: 1.5px solid var(--charcoal); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

  /* ── Nav ── */
  nav { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 1.5px solid var(--line); }
  .nav-inner { display: flex; align-items: center; gap: 28px; height: 76px; }
  .nav-inner .logo { margin-right: auto; }
  .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-links a { text-decoration: none; color: var(--charcoal); font-weight: 500; font-size: 15px; transition: color .15s; }
  .nav-links a:hover { color: var(--cobalt); }
  .nav-links a.active { color: var(--cobalt); font-weight: 700; }
  .nav-cta { padding: 12px 22px; }

  /* ── Hero ── */
  .hero { padding: 72px 0 64px; position: relative; overflow-x: clip; }
  h1 { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 5vw, 62px); line-height: 1.08; letter-spacing: -.01em; margin: 22px 0 0; max-width: 20ch; }
  h1 em { font-style: italic; color: var(--coral); }
  .hl-mark { position: relative; white-space: nowrap; z-index: 0; }
  .hl-mark::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: 4px; height: 38%; background: var(--mint); z-index: -1; border-radius: 6px; transform: rotate(-1deg); }
  .hl-mark.sun::after { background: var(--sunshine); }
  .hero-sub { font-size: 18px; color: var(--ink-soft); max-width: 52ch; margin: 22px 0 30px; }
  .hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

  /* ── Sections ── */
  section { padding: 80px 0; }
  .eyebrow { display: inline-block; background: var(--cobalt); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 8px; padding: 6px 14px; margin: 0 0 14px; }
  .eyebrow-coral { background: var(--coral-ink); }
  h2 { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -.005em; }
  h2 em { font-style: italic; color: var(--coral); }
  .sec-sub { color: var(--ink-soft); font-size: 17px; max-width: 56ch; margin: 0; }

  /* ── Benefits ── */
  .benefits { background: var(--white); border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
  .ben-list { display: grid; gap: 0; border: 1.5px solid var(--charcoal); border-radius: 18px; overflow: hidden; margin-top: 44px; background: var(--white); }
  .ben-row { display: flex; gap: 20px; padding: 24px 28px; border-bottom: 1.5px solid var(--line); align-items: flex-start; }
  .ben-row:last-child { border-bottom: none; }
  .ben-row .ic { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--charcoal); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
  .ben-row h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0 0 4px; }
  .ben-row p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

  /* ── Ask of you ── */
  .ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 44px; align-items: start; }
  .ask-list { display: grid; gap: 0; border: 1.5px solid var(--charcoal); border-radius: 16px; background: var(--white); overflow: hidden; }
  .ask-item { display: flex; gap: 16px; padding: 22px 26px; border-bottom: 1.5px solid var(--line); }
  .ask-item:last-child { border-bottom: none; }
  .ask-item .tick { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--coral); border: 1.5px solid var(--charcoal); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
  .ask-item h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
  .ask-item p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
  .ask-note { background: var(--mint); border: 1.5px solid var(--charcoal); border-radius: 16px; padding: 26px 28px; box-shadow: 0 4px 0 rgba(31,31,31,.18); }
  .ask-note h3 { font-family: var(--display); font-weight: 600; font-size: 19px; margin: 0 0 8px; }
  .ask-note p { margin: 0; font-size: 14.5px; line-height: 1.6; }

  /* ── Industries ── */
  .industries { background: var(--white); border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
  .scroll-hint { margin: 18px 0 0; color: var(--coral-ink); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .ind-scroll { margin: 38px -32px 0; padding: 0 32px 14px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; scrollbar-color: var(--charcoal) var(--cream); scrollbar-width: thin; }
  .ind-scroll::-webkit-scrollbar { height: 12px; }
  .ind-scroll::-webkit-scrollbar-track { background: var(--cream); border: 1px solid var(--line); border-radius: 999px; }
  .ind-scroll::-webkit-scrollbar-thumb { background: var(--charcoal); border: 3px solid var(--cream); border-radius: 999px; }
  .ind-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(360px, 398px); gap: 22px; width: max-content; min-width: 100%; align-items: stretch; padding-bottom: 2px; }
  .ind-card { display: grid; grid-template-rows: auto 1fr; border: 1.5px solid var(--charcoal); border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: 0 4px 0 rgba(31,31,31,.18); scroll-snap-align: start; }
  .ind-head { display: grid; align-content: space-between; gap: 12px; min-height: 154px; padding: 24px; border-bottom: 1.5px solid var(--charcoal); background: var(--sunshine); }
  .ind-card:nth-child(2) .ind-head { background: var(--mint); }
  .ind-card:nth-child(3) .ind-head { background: var(--cobalt); color: var(--white); }
  .ind-card:nth-child(4) .ind-head { background: var(--coral); }
  .ind-card:nth-child(5) .ind-head { background: var(--mint); }
  /* Reserve two lines so a single-line heading's first line aligns with the
     two-line headings on neighbouring cards (heads are bottom-anchored). */
  .ind-head h3 { font-family: var(--display); font-weight: 600; font-size: 25px; line-height: 1.08; letter-spacing: -.005em; margin: 0; min-height: 2.16em; }
  .ind-head .tag { display: inline-flex; width: fit-content; padding: 6px 10px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
  .ind-body { display: grid; grid-template-rows: minmax(96px, auto) minmax(144px, auto) minmax(144px, auto) minmax(84px, auto) auto; gap: 20px; align-content: start; padding: 26px 24px 28px; background: var(--cream); }
  .ind-body > p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
  .ind-section { display: grid; align-content: start; gap: 13px; }
  .ind-section h4 { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; line-height: 1.25; text-transform: uppercase; }
  .ind-section p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
  .ind-examples, .ind-issues { display: flex; flex-wrap: wrap; gap: 9px; }
  .ind-examples span, .ind-issues span { display: inline-flex; align-items: center; min-height: 30px; background: var(--white); border: 1.5px solid var(--charcoal); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
  .ind-issues span { background: var(--sunshine); }
  .ind-card:nth-child(2) .ind-issues span, .ind-card:nth-child(5) .ind-issues span { background: var(--mint); }
  .ind-card:nth-child(3) .ind-issues span { background: var(--cobalt); color: var(--white); }
  .ind-card:nth-child(4) .ind-issues span { background: var(--coral); }
  /* Every card shares one row grid, so the tag, headline, intro, each h4 and its
     chips land on the same line across the whole track no matter how the copy
     wraps. The rules above are the pre-subgrid fallback: hand-tuned row minimums
     that only approximate this. Row gap is 0 here because subgrid rows are shared
     track-wide; spacing comes from margins on the children instead. */
  @media (min-width: 601px) {
    @supports (grid-template-rows: subgrid) {
      .ind-track { grid-template-rows: repeat(9, auto); row-gap: 0; }
      .ind-card { grid-row: 1 / -1; grid-template-rows: subgrid; }
      .ind-head { grid-row: span 2; grid-template-rows: subgrid; gap: 0; min-height: 0; padding: 26px 24px 28px; }
      .ind-head h3 { align-self: end; margin-top: 14px; min-height: 0; }
      .ind-body { grid-row: span 7; grid-template-rows: subgrid; gap: 0; }
      .ind-body > p { margin-bottom: 20px; }
      .ind-section { grid-row: span 2; grid-template-rows: subgrid; gap: 0; }
      .ind-section:not(:last-child) { margin-bottom: 20px; }
      .ind-section h4 { margin-bottom: 13px; }
    }
  }
  .ind-contrast { align-self: start; padding-top: 16px; border-top: 1.5px solid var(--line); font-weight: 600; }
  .ind-foot { margin: 24px 0 0; max-width: 60ch; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

  /* FAQ */
  /* After-submit and FAQ are both cream sections; a full-width hairline at the
     top of the FAQ gives them the same clean seam the white bands get from
     their borders, so the two don't read as one long stretch. */
  /* Base .faq styles live in global.css; these are the SMB-page accents. */
  .faq-section { border-top: 1.5px solid var(--line); }
  .faq-contact a { color: var(--coral-ink); }

  /* ── Problem form ── */
  .submit { background: var(--white); border-top: 1.5px solid var(--line); }
  .submit-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; margin-top: 8px; }
  .submit-side { position: sticky; top: 108px; }
  .submit-side .facts { display: grid; gap: 14px; margin-top: 28px; }
  .submit-side .fact-line { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
  .submit-side .fact-line b { color: var(--coral-ink); font-family: var(--display); font-size: 17px; }
  form.sub-form { border: 2px solid var(--charcoal); border-radius: 20px; background: var(--cream); padding: 36px 36px 40px; box-shadow: 0 5px 0 rgba(31,31,31,.18); }
  .field { margin-bottom: 22px; }
  .field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 7px; }
  .field label small { font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
  .field input, .field textarea, .field select { width: 100%; font-family: var(--body); font-size: 15px; padding: 13px 16px; border: 1.5px solid var(--charcoal); border-radius: 12px; background: var(--white); color: var(--charcoal); outline: none; transition: border-color .15s, box-shadow .15s; }
  .field textarea { resize: vertical; min-height: 96px; }
  .field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F1F1F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
  .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--coral-ink); box-shadow: 0 0 0 3px rgba(210,58,42,.12); }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 18px; row-gap: 0; }
  .field-row > .field { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
  .form-foot p { margin: 0; font-size: 13px; color: var(--ink-soft); }
  .form-error { margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--coral-ink); }
  .sub-done { display: none; text-align: center; padding: 60px 30px; }
  .sub-done .big-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--mint); border: 2px solid var(--charcoal); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
  .sub-done h3 { font-family: var(--display); font-weight: 600; font-size: 26px; margin: 0 0 8px; }
  .sub-done p { color: var(--ink-soft); margin: 0; }

  /* ── Footer ── */
  footer { background: var(--navy); color: var(--cream); padding: 64px 0 0; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 44px; align-items: start; }
  .foot-brand p { margin: 16px 0 0; font-size: 14.5px; color: rgba(255,247,230,.72); max-width: 30ch; line-height: 1.55; }
  .foot-h { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,247,230,.55); margin: 0 0 16px; }
  .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
  .foot-col a { color: var(--cream); text-decoration: none; font-size: 14.5px; font-weight: 500; }
  .foot-col a:hover { color: var(--sunshine); }
  .foot-social { display: flex; align-items: center; gap: 9px; }
  .foot-nl-done { display: none; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--sunshine); }
  .foot-prov p { margin: 0 0 10px; font-size: 14.5px; color: rgba(255,247,230,.72); line-height: 1.55; }
  .foot-prov .flag { font-size: 13px; color: var(--cream); font-weight: 600; }
  .foot-base { border-top: 1px solid rgba(255,247,230,.15); margin-top: 52px; padding: 20px 0; }
  .foot-base .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .foot-base p { margin: 0; font-size: 12.5px; color: rgba(255,247,230,.5); }

  /* ── Mobile nav ── */
  .nav-burger { display: none; width: 44px; height: 44px; border: 1.5px solid var(--charcoal); border-radius: 12px; background: var(--white); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
  .nav-burger svg { display: block; }
  .nav-burger .x-icon { display: none; }
  nav.open .nav-burger .bars-icon { display: none; }
  nav.open .nav-burger .x-icon { display: block; }
  .nav-mobile { display: none; border-top: 1.5px solid var(--line); padding: 10px 32px 24px; background: var(--cream); }
  nav.open .nav-mobile { display: block; }
  .nav-mobile a { display: block; padding: 14px 2px; text-decoration: none; color: var(--charcoal); font-weight: 600; font-size: 17px; border-bottom: 1px solid rgba(31,31,31,.1); }
  .nav-mobile a.btn { border-bottom: none; margin-top: 16px; display: flex; justify-content: center; color: var(--white); }

  /* ── Skip link ── */
  .skip-link { position: absolute; left: 16px; top: -200px; z-index: 100; background: var(--cobalt); color: var(--white); font-family: var(--body); font-weight: 600; font-size: 15px; text-decoration: none; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--charcoal); box-shadow: 0 3px 0 rgba(31,31,31,.25); transition: top .15s ease; }
  .skip-link:focus { top: 16px; }
  .sub-done:focus { outline: none; }
  .foot-nl-done:focus { outline: none; }
  main:focus { outline: none; }

  /* ── Focus-visible rings ── */
  a:focus-visible, button:focus-visible, .btn:focus-visible,
  .nav-links a:focus-visible, .nav-burger:focus-visible, .logo:focus-visible, .skip-link:focus-visible {
    outline: 3px solid var(--cobalt); outline-offset: 2px;
  }
  /* On dark navy surfaces, a cobalt ring is invisible, use sunshine */
  footer a:focus-visible, footer button:focus-visible {
    outline-color: var(--sunshine);
  }

  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.in { opacity: 1; transform: none; }
  }

  @media (max-width: 920px) {
    .nav-links, .nav-cta { display: none; }
    .nav-burger { display: flex; }
    .ask-grid, .submit-grid { grid-template-columns: 1fr; }
    .submit-side { position: static; }
    .field-row { grid-template-columns: 1fr; }
    .field-row > .field { display: block; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    /* WCAG 2.5.8, >=44px touch targets in the footer on tablet/phone.
       min-height (not extra padding) keeps the ul gap clean; gap trimmed so
       44px rows don't look sparse. .foot-col a also matches .foot-social,
       which keeps its own gap:9px for icon+label centering. */
    .foot-col ul { gap: 4px; }
    .foot-col a { min-height: 44px; display: flex; align-items: center; }
  }
  @media (max-width: 600px) {
    .wrap { padding: 0 22px; }
    .nav-mobile { padding: 10px 22px 24px; }
    .ind-scroll { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
    .ind-track { grid-auto-columns: minmax(306px, 84vw); gap: 16px; }
    .ind-head { min-height: 134px; padding: 20px 20px 18px; }
    .ind-body { grid-template-rows: auto; gap: 18px; padding: 20px; }
    .hero { padding: 44px 0 48px; }
    h1 { font-size: clamp(33px, 8.8vw, 44px); }
    /* A wrapped highlight cannot be drawn with one absolutely positioned bar: the
       ::after covers the inline's whole bounding box, so once the phrase breaks
       across lines the wash collapses onto the last fragment. Here the wash becomes
       a per-fragment background instead, cloned onto every line box. The
       single-colour linear-gradient is a flat fill with no blend; it is only a way
       to size the band to the lower part of the text, which background-color cannot do. */
    .hl-mark { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(var(--mint), var(--mint)); background-repeat: no-repeat; background-size: 104% 38%; background-position: -2% calc(100% - 4px); border-radius: 6px; }
    .hl-mark.sun { background-image: linear-gradient(var(--sunshine), var(--sunshine)); }
    .hl-mark::after { content: none; }
    .hero-sub { font-size: 16.5px; }
    .hero-ctas .btn { width: 100%; justify-content: center; }
    section { padding: 52px 0; }
    h2 { font-size: clamp(26px, 7.2vw, 34px); }
    .ask-item { padding: 18px 18px; }
    form.sub-form { padding: 24px 20px 28px; }
    .form-foot { flex-direction: column; align-items: stretch; }
    .form-foot .btn { justify-content: center; }
    .foot-grid { grid-template-columns: 1fr; gap: 34px; }
    .foot-base .wrap { flex-direction: column; gap: 6px; }
  }