/* Palette fixed by the Enkay brand spec §12. */
  :root {
    --navy:      #0F172A;
    --blue:      #4F46E5;
    --blue-dark: #4338CA;
    --soft:      #EEF2FF;
    --bg:        #F8F9FC;
    --white:     #FFFFFF;
    --text:      #1E2939;
    --muted:     #64748B;
    --line:      #E4E7EF;
    --line-soft: #EFF1F6;
    --tint:      #F1F2FE;   /* soft indigo band, sits between white and grey */
    --deep:      #0E1330;   /* darker than --navy, for full-bleed dark bands */
    --deep-2:    #171C40;

    /* Semantic states — separate from the brand blue. */
    --overdue:      #C2410C;
    --overdue-soft: #FFF1E7;
    --won:          #0F7B4F;
    --won-soft:     #E6F4EE;
    --warn:         #A16207;
    --warn-soft:    #FEF6E7;

    /* One hue per lead source, used only as a small dot. */
    --src-im:   #1F5FB8;
    --src-jd:   #92400E;
    --src-meta: #7C3AED;
    --src-wa:   #1FA855;
    --src-call: #667085;
    --src-web:  #0E7490;
    --src-red:  #D93B3B;
    --src-sun:  #DE8C09;

    /* Modular type scale, 1.25 ratio, fluid between 360px and 1080px. */
    --step--1: clamp(.8rem, .77rem + .13vw, .875rem);
    --step-0:  clamp(1rem, .96rem + .18vw, 1.0625rem);
    --step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.4rem);
    --step-2:  clamp(1.5rem, 1.32rem + .84vw, 2rem);
    --step-3:  clamp(1.9rem, 1.55rem + 1.6vw, 2.9rem);
    --step-4:  clamp(2.2rem, 1.6rem + 2.7vw, 3.6rem);

    /* Spacing scale — every gap comes from here. */
    --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
    --sp-section: clamp(3rem, 7vw, 5.25rem);

    --radius: 14px;
    --radius-lg: 20px;
    --shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -18px rgba(15,23,42,.22);
    --shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 24px 64px -28px rgba(15,23,42,.34);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --navy:      #E9EAF5;
      --blue:      #9A93F5;
      --blue-dark: #B0AAF8;
      --soft:      #1E1B38;
      --bg:        #0C141F;
      --white:     #121C29;
      --text:      #E9EEF5;
      --muted:     #94A3B8;
      --line:      #223045;
      --line-soft: #1B2738;
      --tint:      #1A1836;
      --deep:      #08091C;
      --deep-2:    #10122B;

      --overdue:      #F0946A;
      --overdue-soft: #2C1A11;
      --won:          #5CC79A;
      --won-soft:     #10281F;
      --warn:         #D9A54A;
      --warn-soft:    #2A2114;

      --src-im:   #6FA8F0;
      --src-jd:   #D9A05B;
      --src-meta: #B394F5;
      --src-wa:   #35C96C;
      --src-call: #94A3B8;
      --src-web:  #5EBFD4;
    --src-red:  #F08585;
    --src-sun:  #E8A93F;
      --src-red:  #F08585;
      --src-sun:  #E8A93F;

      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.7);
    }
  }

  :root[data-theme="dark"] {
    --navy:      #E9EAF5;
    --blue:      #9A93F5;
    --blue-dark: #B0AAF8;
    --soft:      #1E1B38;
    --bg:        #0C141F;
    --white:     #121C29;
    --text:      #E9EEF5;
    --muted:     #94A3B8;
    --line:      #223045;
    --line-soft: #1B2738;
    --tint:      #1A1836;
    --deep:      #08091C;
    --deep-2:    #10122B;

    --overdue:      #F0946A;
    --overdue-soft: #2C1A11;
    --won:          #5CC79A;
    --won-soft:     #10281F;
    --warn:         #D9A54A;
    --warn-soft:    #2A2114;

    --src-im:   #6FA8F0;
    --src-jd:   #D9A05B;
    --src-meta: #B394F5;
    --src-wa:   #35C96C;
    --src-call: #94A3B8;
    --src-web:  #5EBFD4;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.7);
  }

  * { box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    margin: 0; color: var(--navy);
    letter-spacing: -.022em; line-height: 1.15; text-wrap: balance;
  }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
  .narrow { max-width: 780px; }

  :focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
  }
  /* On the navy band the blue ring disappears, so switch it to white. */
  .close :focus-visible, .on-navy :focus-visible { outline-color: #fff; }

  .skip {
    position: absolute; left: 12px; top: -60px; z-index: 60;
    background: var(--navy); color: #fff;
    padding: 11px 18px; border-radius: 0 0 10px 10px;
    font-size: .92rem; font-weight: 600;
    transition: top .16s ease;
  }
  .skip:focus { top: 0; }

  .eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
  h2 { font-size: clamp(1.65rem, 3.6vw, 2.3rem); font-weight: 700; }
  h3 { font-size: 1.12rem; font-weight: 700; }
  .lead { margin-top: 12px; color: var(--muted); max-width: 58ch; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: 600 .97rem Inter, sans-serif;
    padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn-primary { background: var(--blue); color: #fff; }
  .btn-primary:hover { background: var(--blue-dark); }
  .btn-ghost { border-color: var(--line); color: var(--navy); background: var(--white); }
  .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

  .ico { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; flex-shrink: 0; }
  .ico-lg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }

  /* ---------------- header ---------------- */

  header.site { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
  .brand { display: flex; align-items: center; gap: 10px; font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.18rem; color: var(--navy); letter-spacing: -.03em; }
  .brand .mark { height: 26px; width: auto; flex-shrink: 0; display: block; }

  /* The monogram takes both colours from the theme, so it holds up in dark
     mode and on the navy band without a second image. */
  .mark .n { fill: var(--navy); }
  .mark .k { fill: var(--blue); }
  .on-navy .mark .n { fill: #fff; }
  .on-navy .mark .k { fill: #4E93E8; }

  /* Stacked lockup for the footer. */
  .lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .lockup .mark { height: 46px; }
  .lockup .words { display: flex; flex-direction: column; gap: 2px; }
  .lockup .words b {
    font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.05rem;
    color: var(--navy); letter-spacing: .22em; line-height: 1;
  }
  .lockup .words span {
    font-size: .6rem; color: var(--muted); letter-spacing: .3em; line-height: 1;
  }
  .bar nav { display: none; gap: 24px; font-size: .92rem; color: var(--muted); }
  .bar nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
  .bar nav a:hover { color: var(--navy); border-bottom-color: var(--blue); }
  .bar-actions { display: flex; align-items: center; gap: 10px; }
  .bar-actions .btn { white-space: nowrap; }
  /* On a phone the header keeps the logo, one CTA and the menu. Login lives
     inside the menu so nothing wraps. */
  .bar-actions .btn-ghost { display: none; }
  @media (min-width: 720px) { .bar-actions .btn-ghost { display: inline-flex; } }
  @media (max-width: 460px) {
    .bar-actions .btn-primary { padding: 9px 13px; font-size: .82rem; }
    .brand { font-size: 1.05rem; }
  }

  /* Mobile menu — no JS, and it collapses on its own when the viewport grows. */
  .menu { position: relative; }
  .menu > summary {
    list-style: none; cursor: pointer;
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--white); color: var(--navy);
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary .bars, .menu > summary .x { display: block; }
  .menu > summary .x { display: none; }
  .menu[open] > summary .bars { display: none; }
  .menu[open] > summary .x { display: block; }
  .menu-panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 220px; background: var(--white);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: var(--sp-2);
    display: flex; flex-direction: column;
  }
  .menu-panel a {
    padding: 12px 14px; border-radius: 8px;
    font-size: .95rem; font-weight: 500; color: var(--text);
  }
  .menu-panel a:hover { background: var(--soft); color: var(--blue); }

  @media (min-width: 940px) {
    .bar nav { display: flex; }
    .menu { display: none; }
  }

  /* ---------------- hero ---------------- */

  .hero { padding: clamp(44px, 7vw, 76px) 0 clamp(40px, 6vw, 64px); }
  .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 3.5vw, 44px); align-items: center; }
  @media (min-width: 940px)  { .hero-grid { grid-template-columns: 1fr 1.25fr; } }
  @media (min-width: 1180px) { .hero-grid { grid-template-columns: 1fr 1.5fr; } }

  /* The hero runs wider than the rest of the page so the product visual —
     which the brief wants people looking at — gets real room. */
  .hero > .wrap { max-width: 1300px; }
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  h1 { font-size: clamp(2.15rem, 5.2vw, 3.35rem); font-weight: 800; }
  .hero-sub { color: var(--muted); font-size: clamp(1.02rem, 2vw, 1.13rem); max-width: 46ch; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
  .trust { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .86rem; color: var(--muted); }
  .trust span { display: inline-flex; align-items: center; gap: 7px; }

  /* ---------------- app previews ---------------- */

  .app { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
  .app-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
  .app-bar b { font-family: Manrope, sans-serif; font-size: .95rem; color: var(--navy); }
  .app-bar span { font-size: .78rem; color: var(--muted); }

  .tiles { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--line); }
  .tile {
    padding: 12px 10px; text-align: center;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .tile:nth-child(2n) { border-right: 0; }
  .tile:nth-last-child(-n+2) { border-bottom: 0; }
  @media (min-width: 480px) {
    .tiles { grid-template-columns: repeat(4, 1fr); }
    .tile { border-bottom: 0; }
    .tile:nth-child(2n) { border-right: 1px solid var(--line-soft); }
    .tile:last-child { border-right: 0; }
  }
  .tile b { display: block; font-family: Manrope, sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .tile span {
    display: block; margin-top: 3px; font-size: .68rem;
    color: var(--muted); line-height: 1.3;
    min-height: 2.6em;   /* two lines, so "Won this month" cannot misalign the row */
  }

  .work-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 8px; }
  .work-head b { font-size: .8rem; font-weight: 600; color: var(--navy); }
  .pill { font-size: .66rem; font-weight: 600; padding: 3px 9px; border-radius: 100px; }
  .pill-over { background: var(--overdue-soft); color: var(--overdue); }
  .pill-today { background: var(--soft); color: var(--blue); }

  .row { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
  .row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .row-name { font-weight: 600; font-size: .93rem; color: var(--navy); }
  .row-time { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .row-time.late { color: var(--overdue); font-weight: 600; }
  .row-req { margin-top: 2px; font-size: .8rem; color: var(--muted); }
  .row-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .act { display: inline-flex; align-items: center; gap: 5px; font-size: .73rem; font-weight: 600; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); background: var(--white); }
  .act-call { background: var(--navy); color: #fff; border-color: var(--navy); }
  .act-wa { color: var(--src-wa); border-color: color-mix(in srgb, var(--src-wa) 35%, transparent); }
  .act-done { color: var(--won); border-color: color-mix(in srgb, var(--won) 35%, transparent); }

  .src { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; margin-right: 7px; }
  .src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  .s-im { color: var(--src-im); } .s-jd { color: var(--src-jd); } .s-meta { color: var(--src-meta); }
  .s-wa { color: var(--src-wa); } .s-call { color: var(--src-call); } .s-web { color: var(--src-web); }

  /* ---------------- sections ---------------- */

  section { padding: clamp(48px, 7vw, 84px) 0; }
  .band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  /* Soft blue band — the step between white and grey that stops the page
     reading as one flat sheet. */
  .tint {
    background: var(--tint);
    border-top: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
  }
  .tint .benefit, .tint .stepbox, .tint .col, .tint .opt, .tint .plan {
    background: var(--white);
    border-color: color-mix(in srgb, var(--blue) 14%, transparent);
  }
  .tint .chipsrc { background: var(--white); border-color: color-mix(in srgb, var(--blue) 16%, transparent); }

  /* Full-bleed dark band. A fine grid gives it depth without a gradient. */
  .dark-band {
    background:
      linear-gradient(color-mix(in srgb, #7FB2FF 5%, transparent) 1px, transparent 1px) 0 0 / 100% 56px,
      linear-gradient(90deg, color-mix(in srgb, #7FB2FF 5%, transparent) 1px, transparent 1px) 0 0 / 56px 100%,
      var(--deep);
    color: #EAF0F8;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .dark-band h1, .dark-band h2, .dark-band h3, .dark-band h4 { color: #fff; }
  .dark-band .lead, .dark-band .hero-sub, .dark-band .trust, .dark-band p { color: #A9BCD4; }
  .dark-band .eyebrow { color: #7FB2FF; }
  .dark-band .checks b { color: #fff; }
  .dark-band .checks span { color: #A9BCD4; }
  .dark-band .checks svg { color: #7FB2FF; }
  .dark-band .btn-ghost { background: transparent; border-color: rgba(255,255,255,.24); color: #fff; }
  .dark-band .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
  .dark-band .brand, .dark-band .brand .mark .n { color: #fff; fill: #fff; }
  .sec-head { max-width: 62ch; }

  .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .chipsrc { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg); border-radius: 100px; padding: 9px 16px; font-size: .9rem; font-weight: 500; }
  .chipsrc i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .chipsrc em { font-style: normal; color: var(--muted); font-size: .78rem; }

  /* three benefits */
  .benefits { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  @media (min-width: 760px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
  .benefit { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
  .band .benefit { background: var(--bg); }
  .benefit .badge { width: 40px; height: 40px; border-radius: 10px; background: var(--soft); color: var(--blue); display: grid; place-items: center; margin-bottom: 14px; }
  .benefit p { margin-top: 7px; font-size: .93rem; color: var(--muted); }

  /* feature grid */
  .features { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 36px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  @media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 940px) { .features { grid-template-columns: repeat(4, 1fr); } }
  .feature { background: var(--white); padding: 22px 20px; }
  .feature .badge { color: var(--blue); margin-bottom: 12px; display: block; }
  .feature h4 { font-size: .97rem; font-weight: 700; }
  .feature p { margin-top: 6px; font-size: .86rem; color: var(--muted); }

  /* sequence flow */
  .flow { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  @media (min-width: 700px) { .flow { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1000px) { .flow { grid-template-columns: repeat(6, 1fr); } }
  .stepbox { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; }
  .band .stepbox { background: var(--bg); }
  .stepbox .n { font-size: .68rem; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
  .stepbox b { display: block; margin-top: 6px; font-size: .92rem; color: var(--navy); font-weight: 600; }
  .stepbox span { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); }

  /* two-column split */
  .split { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 52px); align-items: center; }
  @media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } }

  .checks { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
  .checks li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; font-size: .95rem; }
  .checks svg { color: var(--blue); margin-top: 3px; }
  .checks b { color: var(--navy); font-weight: 600; }
  .checks span { color: var(--muted); }

  /* pipeline */
  .kanban { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; margin-top: 32px; min-width: 780px; }
  .scroll-x { overflow-x: auto; padding-bottom: 6px; }
  .col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
  .band .col { background: var(--bg); }
  .col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .col-head b { font-size: .76rem; font-weight: 700; color: var(--navy); letter-spacing: .04em; text-transform: uppercase; }
  .col-head span { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .kcard { background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; margin-bottom: 8px; }
  .kcard:last-child { margin-bottom: 0; }
  .kcard b { display: block; font-size: .84rem; font-weight: 600; color: var(--navy); }
  .kcard span { display: block; margin-top: 3px; font-size: .74rem; color: var(--muted); }
  .kcard .amt { margin-top: 5px; font-size: .78rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }

  /* whatsapp chat */
  .chat { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
  .chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
  .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--blue); display: grid; place-items: center; font-size: .74rem; font-weight: 700; flex-shrink: 0; }
  .chat-head b { font-size: .9rem; color: var(--navy); font-family: Manrope, sans-serif; }
  .chat-head span { font-size: .72rem; color: var(--muted); display: block; }
  .chat-body { padding: 15px; display: flex; flex-direction: column; gap: 9px; background: var(--bg); }
  .msg { max-width: 84%; padding: 9px 12px; border-radius: 12px; font-size: .86rem; line-height: 1.45; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
  .msg-time { display: block; margin-top: 4px; font-size: .64rem; color: var(--muted); }
  .save-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-top: 1px solid var(--line); }
  .save-strip p { font-size: .78rem; color: var(--muted); }

  .ai { margin-top: 16px; background: var(--soft); border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); border-radius: var(--radius); padding: 15px 17px; }
  .ai b { font-size: .74rem; font-weight: 700; color: var(--blue); letter-spacing: .05em; text-transform: uppercase; }
  .ai p { margin-top: 7px; font-size: .9rem; }

  /* lead detail preview */
  .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--line-soft); }
  .dt { font-size: .7rem; color: var(--muted); }
  .dd { margin-top: 2px; font-size: .88rem; font-weight: 600; color: var(--navy); }

  /* remind later options */
  .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .opt { border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: 8px 14px; font-size: .84rem; font-weight: 500; }
  .band .opt { background: var(--bg); }

  /* reports */
  .funnel { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  .fstep { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; font-size: .89rem; }
  .fbar { height: 30px; border-radius: 7px; background: var(--soft); position: relative; overflow: hidden; }
  .fbar i { position: absolute; inset: 0 auto 0 0; background: var(--blue); border-radius: 7px; display: block; }
  .fnum { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); min-width: 3.4rem; text-align: right; }
  .flabel { color: var(--muted); }


  /* pricing */
  .plans { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; align-items: start; }
  @media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); } }
  .plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
  .band .plan { background: var(--bg); }
  .plan.featured { border-color: var(--blue); }
  .tag { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); background: var(--soft); padding: 3px 9px; border-radius: 100px; }
  .amount { display: flex; align-items: baseline; gap: 7px; }
  .amount b { font-family: Manrope, sans-serif; font-weight: 800; font-size: 2.3rem; color: var(--navy); letter-spacing: -.03em; line-height: 1; }
  .amount span { color: var(--muted); font-size: .88rem; }
  .plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: .89rem; color: var(--muted); }
  .plan li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; }
  .plan li svg { color: var(--blue); margin-top: 3px; }
  .note { margin-top: 20px; font-size: .84rem; color: var(--muted); }

  /* faq */
  .faq { margin-top: 30px; border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; list-style: none; padding: 18px 34px 18px 0; font-weight: 600; color: var(--navy); position: relative; font-size: .98rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 1.25rem; font-weight: 400; color: var(--blue); }
  .faq details[open] summary::after { content: "−"; }
  .faq p { padding: 0 0 18px; color: var(--muted); font-size: .93rem; max-width: 68ch; }

  /* signup */
  .signup-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 460px; margin-top: var(--sp-5); }
  .field-row { display: flex; flex-direction: column; gap: var(--sp-2); }
  .field-row label { font-size: .85rem; font-weight: 600; color: var(--navy); }
  .input-wrap {
    display: flex; align-items: center; gap: 10px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: 10px; padding: 0 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
  .input-wrap .cc { color: var(--muted); font-size: .93rem; }
  .input-wrap input {
    flex: 1; min-width: 0; border: 0; outline: none; background: none;
    color: var(--text); font: 400 var(--step-0) Inter, sans-serif; padding: 13px 0;
  }
  .input-wrap input::placeholder { color: var(--muted); opacity: .75; }
  .input-wrap[data-invalid="true"] { border-color: var(--overdue); }
  .err { font-size: .84rem; color: var(--overdue); min-height: 1.2em; }
  .signup-ok {
    display: none; gap: 11px; align-items: flex-start; max-width: 460px; margin-top: var(--sp-5);
    background: var(--won-soft); border: 1px solid color-mix(in srgb, var(--won) 30%, transparent);
    border-radius: var(--radius); padding: 18px 20px; font-size: .95rem;
  }
  .signup-ok.on { display: flex; }
  .signup-ok svg { color: var(--won); margin-top: 2px; }

  /* closing */
  .close h2 { color: #fff; }
  .close p { color: #EAF0F8; opacity: .82; margin-top: 12px; max-width: 48ch; }
  .close .btn-ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
  .close .btn-ghost:hover { border-color: #fff; }
  .close-inner { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

  footer.site { background: var(--white); border-top: 1px solid var(--line); padding: 40px 0 34px; }
  .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
  .foot-col b { display: block; font-size: .78rem; font-weight: 700; color: var(--navy); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; }
  .foot-col a, .foot-col p { display: block; font-size: .88rem; color: var(--muted); margin-bottom: 7px; }
  .foot-col a:hover { color: var(--blue); }
  .foot-base { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .84rem; color: var(--muted); }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ============================================================
   Blog
   ============================================================ */

.post-hero { padding: var(--sp-7) 0 var(--sp-6); }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: var(--sp-4); }
.crumbs a:hover { color: var(--blue); }
.crumbs span { margin: 0 6px; opacity: .6; }

.post-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: .85rem; color: var(--muted); margin-top: var(--sp-4);
}
.post-meta time { font-variant-numeric: tabular-nums; }
.post-meta .tagpill {
  background: var(--soft); color: var(--blue);
  padding: 3px 10px; border-radius: 100px; font-size: .74rem; font-weight: 600;
}

/* Article body — measure kept near 68 characters. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 {
  font-size: var(--step-2); font-weight: 700;
  margin-top: var(--sp-7); scroll-margin-top: 90px;
}
.prose h3 { font-size: var(--step-1); font-weight: 700; margin-top: var(--sp-6); }
.prose p { color: var(--text); font-size: var(--step-0); line-height: 1.72; }
.prose strong { color: var(--navy); font-weight: 600; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.15rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose li { line-height: 1.65; }
.prose li::marker { color: var(--blue); }

.prose blockquote {
  border-left: 3px solid var(--blue);
  background: var(--tint);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step-1); line-height: 1.5; color: var(--navy);
}
.prose blockquote p { font-size: inherit; color: inherit; }

.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--tint); color: var(--navy); font-weight: 600; font-size: .82rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

.callout {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-5);
}
.callout b { display: block; color: var(--navy); margin-bottom: 4px; }
.callout p { font-size: .93rem; color: var(--muted); }

/* Post listing */
.posts { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 760px) { .posts { grid-template-columns: repeat(2, 1fr); } }
.post-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color .15s ease, transform .15s ease;
}
.post-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.post-card h3 { font-size: var(--step-1); }
.post-card p { color: var(--muted); font-size: .93rem; }
.post-card .readmore { margin-top: auto; padding-top: var(--sp-3); color: var(--blue); font-weight: 600; font-size: .9rem; }

.post-cta {
  margin-top: var(--sp-7);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
}
.post-cta h3 { font-size: var(--step-1); }
.post-cta p { color: var(--muted); margin-top: 6px; font-size: .94rem; }
.post-cta .btn { margin-top: var(--sp-4); }

@media (prefers-reduced-motion: reduce) { .post-card:hover { transform: none; } }

/* ============================================================
   Redesign — shared section furniture
   ============================================================ */

.pill-label {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--soft); color: var(--blue);
  padding: 6px 13px; border-radius: 100px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.sec-title { max-width: 34ch; }

/* The half of a headline that carries the point. */
.hl { color: var(--blue); }
.sec-sub { margin-top: var(--sp-3); color: var(--muted); max-width: 52ch; font-size: var(--step-0); }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.center .sec-sub, .center .sec-title { margin-left: auto; margin-right: auto; }

/* Chips rather than bare text: as loose text under two buttons the row read
   as leftover markup instead of three deliberate promises. */
.reassure { display: flex; flex-wrap: wrap; gap: 9px; font-size: .82rem; }
.reassure span {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 100px; padding: 7px 14px;
  font-weight: 600; color: var(--navy); white-space: nowrap;
}
.reassure svg { width: 14px; height: 14px; color: var(--won); flex-shrink: 0; }

/* Cards ---------------------------------------------------- */

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.card-pad { padding: clamp(20px, 3vw, 28px); }

/* Product UI chrome ---------------------------------------- */

.ui {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ui-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.ui-head b { font-family: Manrope, sans-serif; font-size: .93rem; color: var(--navy); }
.ui-head small { font-size: .76rem; color: var(--muted); }

.ui-row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.ui-row:last-child { border-bottom: 0; }
.ui-row .grow { flex: 1; min-width: 0; }
.ui-row .nm { display: block; font-size: .88rem; font-weight: 600; color: var(--navy); }
.ui-row .sub { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted); }
.ui-row .when { font-size: .74rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.avatar-sm {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  background: var(--soft); color: var(--blue);
}

/* Source dot used inside product UI */
.chan { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; }
.chan::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Hero dashboard ------------------------------------------- */

/* The dashboard must respond to its own column width, not the viewport —
   it sits in a narrow hero column even on a wide screen. */
.ui { container-type: inline-size; }

.dash { display: grid; grid-template-columns: 1fr; }
@container (min-width: 440px) { .dash { grid-template-columns: 142px 1fr; } }

.dash-nav { display: none; border-right: 1px solid var(--line); padding: 14px 9px; background: var(--bg); }
@container (min-width: 440px) { .dash-nav { display: block; } }
.dash-nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 8px;
  font-size: .79rem; color: var(--muted); margin-bottom: 2px;
  white-space: nowrap;              /* "Follow-ups" must not wrap */
}
.dash-nav a.on { background: var(--soft); color: var(--blue); font-weight: 600; }
.dash-nav svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.dash-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* App chrome: brand, the primary action, then the nav; a bar across the top. */
.dash-brand {
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 12px; font-family: Manrope, sans-serif;
  font-size: .84rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em;
}
.dash-brand .mark { height: 15px; width: auto; flex-shrink: 0; }

.dash-add {
  display: block; margin-bottom: 12px; text-align: center;
  background: var(--blue); color: #fff; border-radius: 8px;
  padding: 7px 8px; font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.dash-top { display: flex; align-items: center; gap: 10px; }
.dash-top b { font-family: Manrope, sans-serif; font-size: .95rem; color: var(--navy); }
.dash-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dash-tools svg {
  width: 15px; height: 15px; color: var(--muted);
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.dash-tools .avatar-sm { width: 26px; height: 26px; font-size: .62rem; }

.kpi .delta.warn { color: var(--warn); }

.new-tag {
  flex-shrink: 0; font-size: .62rem; font-weight: 700; color: var(--won);
  background: var(--won-soft); border-radius: 100px; padding: 2px 7px;
}

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
@container (min-width: 548px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: var(--white); }
.kpi small {
  display: block; font-size: .67rem; color: var(--muted); line-height: 1.25;
  min-height: 2.5em;               /* two lines reserved, so cards stay level */
}
.kpi b {
  display: block; margin-top: 3px; font-family: Manrope, sans-serif;
  font-size: 1.35rem; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi .delta {
  display: block; margin-top: 3px; font-size: .65rem; font-weight: 600; color: var(--won);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.panel { border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.panel > h4 { font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: 9px; }

/* Pipeline strip inside the dashboard */
.pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: stretch; }
.pipe-step {
  min-width: 0; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 5px; background: var(--white);
}
.pipe-step small {
  /* Wrap rather than truncate: ellipsised stage names ("Qualifi...") tell the
     reader nothing, and a wide container still keeps them on one line. */
  white-space: normal; line-height: 1.15; font-size: .58rem; letter-spacing: -.01em;
}
.pipe-arrow { display: none; }
@container (min-width: 560px) {
  .pipe { display: flex; }
  .pipe-step { flex: 1 1 0; padding: 8px 9px; }
  .pipe-step small { font-size: .63rem; min-height: 0; }
  .pipe-arrow { display: grid; }
}
.pipe-step small { display: block; font-size: .63rem; color: var(--muted); }
.pipe-step b { display: block; margin-top: 1px; font-size: .95rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.pipe-step.s1 { background: var(--soft); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }
/* Token-backed, not hex: the hardcoded cream left this step unreadable in
   dark mode, where the number stayed dark on a light card. */
.pipe-step.s3 { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pipe-step.s5 { background: var(--won-soft); border-color: color-mix(in srgb, var(--won) 26%, transparent); }
.pipe-arrow { place-items: center; color: var(--muted); font-size: .8rem; flex-shrink: 0; }

.two-panel { display: grid; grid-template-columns: 1fr; gap: 12px; }
@container (min-width: 600px) { .two-panel { grid-template-columns: 1fr 1fr; } }

/* Donut, drawn with conic-gradient so there is no chart library */
.two-panel > .panel { align-self: start; }
.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut {
  width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(
    var(--src-wa) 0 40%,
    var(--src-web) 40% 65%,
    var(--src-meta) 65% 80%,
    #F59E0B 80% 90%,
    var(--src-call) 90% 100%);
}
.donut::after {
  content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--white);
}
.donut-c {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 1;
}
.donut-c b { font-family: Manrope, sans-serif; font-size: .95rem; font-weight: 700; color: var(--navy); line-height: 1; }
.donut-c small { font-size: .56rem; color: var(--muted); }
.legend { display: flex; flex-direction: column; gap: 5px; font-size: .72rem; min-width: 128px; flex: 1; }
.legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.legend i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.legend b { margin-left: auto; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Trust bar -------------------------------------------------
   One bordered panel with the label riding its top edge, and the sources as
   full-colour marks above their names rather than small chips. */

.trust-panel {
  position: relative;
  background: var(--white);
  border: 1.5px solid color-mix(in srgb, var(--blue) 40%, transparent);
  border-radius: 20px;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
}
.trust-pill {
  position: absolute; top: 0; left: 50%; translate: -50% -50%;
  background: var(--blue); color: #fff;
  border-radius: 100px; padding: 5px 16px;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap;
}
.trust-panel h2 { font-size: var(--step-1); font-weight: 700; color: var(--navy); }

.marks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 780px) { .marks { grid-template-columns: repeat(5, 1fr); gap: 0; } }

.mark-chip { display: grid; justify-items: center; gap: 10px; padding: 4px var(--sp-3); }
/* Hairlines between the marks, as in the mockup — but only once they are on
   one row, or they would cut across a wrapped grid. */
@media (min-width: 780px) {
  .mark-chip + .mark-chip { border-left: 1px solid var(--line); }
}
.mark-chip .glyph { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; }
.mark-chip .glyph svg { width: 42px; height: 42px; display: block; }
.mark-chip .glyph.pair svg { width: 36px; height: 36px; }
/* Two marks are wordmarks rather than symbols; sized to sit on the same line
   as the 42px icons without being drawn as fake logo art. */
.wordmark {
  font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.15rem;
  letter-spacing: -.02em; color: var(--w1); white-space: nowrap;
}
.wordmark i { font-style: normal; color: var(--w2); }
.mark-chip b { font-size: .92rem; font-weight: 700; color: var(--navy); line-height: 1.3; }

/* Three-step cards ------------------------------------------ */

.steps3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 900px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.step3 {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.step3 .num {
  font-family: Manrope, sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--blue); letter-spacing: .06em;
}
.step3 h3 { font-size: var(--step-1); }
.step3 > p { color: var(--muted); font-size: .93rem; }
.step3 .ui { box-shadow: none; margin-top: auto; }

/* Feature grid ---------------------------------------------- */

.fgroup { margin-top: var(--sp-6); }
.fgroup > h3 { font-size: 1rem; margin-bottom: var(--sp-3); color: var(--navy); }

/* Product orbit ---------------------------------------------
   Six capabilities around the app itself. Each card pairs its copy with a
   scrap of the screen it describes, so the claim and the evidence sit
   together. Below 1000px the composition drops the spokes and stacks. */

.orbit { position: relative; display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 1000px) {
  .orbit { grid-template-columns: 1fr minmax(350px, 410px) 1fr; gap: var(--sp-4); align-items: center; }
}

.orbit-side { display: grid; gap: var(--sp-3); position: relative; z-index: 1; }
.hub { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--sp-3); }


.ocard {
  --c: var(--blue);
  display: grid; grid-template-columns: 1fr; gap: 12px;
  background: color-mix(in srgb, var(--c) 6%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  border-radius: var(--radius); padding: 14px 15px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
@media (min-width: 520px) { .ocard { grid-template-columns: 1fr minmax(140px, 44%); align-items: center; } }
.ocard:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--c) 42%, transparent);
}

.ocard .badge {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 15%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--c); margin-bottom: 9px;
}
.ocard .badge svg { width: 18px; height: 18px; }
.ocard b { display: block; font-size: .95rem; font-weight: 700; color: var(--navy); }
.ocard .d { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.5; color: var(--muted); }

/* Source dots under "Capture leads". */
.srcdots { display: flex; gap: 5px; margin-top: 10px; }
.srcdots i { width: 20px; height: 20px; border-radius: 6px; background: var(--c); display: block; }

.pill-soft {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  border-radius: 100px; padding: 4px 10px;
  font-size: .7rem; font-weight: 700; color: var(--c);
}
.pill-soft svg { width: 12px; height: 12px; }

.chevs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.chevs i {
  font-style: normal; font-size: .64rem; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--white));
  border-radius: 100px; padding: 3px 9px;
}

/* The evidence panel ---------------------------------------- */

.omini { min-width: 0; }
.omini > * {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px; box-shadow: var(--shadow);
}

.bubble { display: grid; gap: 7px; }
.bub-ic {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff;
}
.bub-ic svg { width: 13px; height: 13px; }
.bubble p { font-size: .74rem; color: var(--text); line-height: 1.4; }
.pill-new {
  justify-self: end;
  background: var(--won-soft); color: var(--won);
  border-radius: 100px; padding: 2px 8px; font-size: .62rem; font-weight: 700;
}

.rem { display: grid; gap: 8px; }
.rem-row { display: flex; align-items: flex-start; gap: 7px; }
.rem-row .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.rem-row b { display: block; font-size: .72rem; font-weight: 600; color: var(--navy); }
.rem-row em { display: block; font-style: normal; font-size: .64rem; color: var(--muted); }

.contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact .grow { flex: 1; min-width: 0; }
.contact b { display: block; font-size: .74rem; color: var(--navy); }
.contact em { display: block; font-style: normal; font-size: .64rem; color: var(--muted); }
.on-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--won); flex-shrink: 0; }
.contact-acts { display: flex; gap: 5px; width: 100%; }
.contact-acts i {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff;
}
.contact-acts i svg { width: 12px; height: 12px; }

/* A small column chart, sitting on a baseline so it reads as a chart rather
   than three loose blocks. */
.bars {
  display: flex; align-items: flex-end; gap: 8px; height: 62px;
  border-bottom: 1px solid var(--line); padding-bottom: 1px;
}
.bars i {
  flex: 1; height: var(--h); display: block; border-radius: 4px 4px 0 0;
  background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 55%, var(--white)));
}

.people, .stats { display: grid; gap: 8px; }
.prow { display: flex; align-items: center; gap: 8px; }
.prow .avatar-sm { width: 24px; height: 24px; font-size: .58rem; background: color-mix(in srgb, var(--a) 16%, var(--white)); color: var(--a); }
.prow b { display: block; font-size: .72rem; color: var(--navy); }
.prow em { display: block; font-style: normal; font-size: .62rem; color: var(--muted); }

.srow { display: flex; align-items: baseline; gap: 7px; }
.srow .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.srow b { font-family: Manrope, sans-serif; font-size: .92rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.srow em { font-style: normal; font-size: .68rem; color: var(--muted); }

/* The hub itself -------------------------------------------- */

.hub .ui.app { margin-top: 0; width: 100%; }
.app-search {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 9px; margin-bottom: 10px; font-size: .66rem; color: var(--muted);
}
.hub-motto {
  background: var(--soft); color: var(--blue);
  border-radius: 100px; padding: 6px 16px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) { .ocard:hover { transform: none; } }

/* Kanban ---------------------------------------------------- */

.board { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 8px; min-width: 720px; }
.bcol {
  --c: var(--muted);
  background: color-mix(in srgb, var(--c) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
  border-top: 3px solid var(--c);
  border-radius: 12px; padding: 10px;
}
.bcol-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.bcol-h b { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c); }
.bcol-h span {
  font-size: .68rem; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--white));
  border-radius: 100px; padding: 2px 8px; font-variant-numeric: tabular-nums;
}
/* Cards stay white so they lift off the column's tint. */
.bcard {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line));
  border-radius: 9px; padding: 9px 9px; margin-bottom: 7px;
}
.bcard:last-child { margin-bottom: 0; }
.bcard b { display: block; font-size: .82rem; font-weight: 600; color: var(--navy); }
.bcard span { display: block; margin-top: 2px; font-size: .72rem; color: var(--muted); }
.bcard .val { margin-top: 4px; font-size: .74rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* The board sits beside a standing summary, so the numbers a manager actually
   asks for are readable without scrolling the columns. */
.pipe-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); align-items: start; }
@media (min-width: 940px) { .pipe-layout { grid-template-columns: 210px 1fr; gap: var(--sp-4); } }

.pipe-summary {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
}
.pipe-summary > b {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.pstat { margin-top: 14px; }
.pstat .n { display: block; font-family: Manrope, sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pstat .l { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); }

.pbars { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 9px; }
.pbar { --c: var(--muted); display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 8px; }
.pbar i { font-style: normal; font-size: .74rem; color: var(--muted); }
.pbar u { text-decoration: none; height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--c) 16%, var(--line)); display: block; }
.pbar u::before { content: ""; display: block; height: 100%; width: var(--w, 50%); border-radius: 100px; background: var(--c); }
.pbar s { text-decoration: none; font-size: .74rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Card chrome: who sent it, who owns it. */
.bcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.bcard .src {
  --c: var(--muted);
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 100px; margin: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  color: var(--c);
}
.bcard .src svg { width: 12px; height: 12px; }
/* The generic .src prints a 6px dot before its label. Here the label is an
   icon in a 20px badge, so that dot became a second grid item stacked on
   the glyph and pushed out over the card's border. */
.bcard .src::before { content: none; }

/* Source and owner read as colour to a sighted visitor; this carries the same
   information to a screen reader without printing it in the card. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.bcard-foot {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  /* Columns are narrow; let the row wrap rather than push the owner's initials
     past the card edge. */
  flex-wrap: wrap; row-gap: 6px; gap: 5px;
}
.bcard-foot .val { margin-top: 0; }
/* Named .owner, not .who: the "who it is for" section already claims .who
   for an 18px-padded card, and at equal specificity that padding leaked
   through here and blew each 20px initial-circle out past the card edge. */
.owner {
  --c: var(--blue);
  margin-left: auto;
  width: 20px; height: 20px; border-radius: 100px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--c) 15%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--c);
}
.bcard .tag {
  display: inline-block; padding: 1px 6px; border-radius: 100px; white-space: nowrap;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  background: var(--overdue-soft); color: var(--overdue);
}
.bcol-more {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--c) 30%, transparent);
  font-size: .7rem; font-weight: 600; color: var(--c);
}

/* Who it's for ---------------------------------------------- */

.whocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-6); }
.whocard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }
.whocard .badge { width: 32px; height: 32px; border-radius: 9px; background: var(--soft); color: var(--blue); display: grid; place-items: center; margin-bottom: 10px; }
.whocard b { display: block; font-size: .92rem; color: var(--navy); }
.whocard span { display: block; margin-top: 4px; font-size: .83rem; color: var(--muted); }

/* Pricing --------------------------------------------------- */

.toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-4); font-size: .88rem; }
.toggle .save { color: var(--won); font-weight: 600; font-size: .8rem; }
.switch {
  appearance: none; width: 44px; height: 25px; border-radius: 100px;
  background: var(--line); border: 0; cursor: pointer; position: relative;
  transition: background .18s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch:checked { background: var(--blue); }
.switch:checked::after { transform: translateX(19px); }

.tiers { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); align-items: start; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
}
.tier.best { border-color: var(--blue); box-shadow: var(--shadow-lg); position: relative; }
.tier .best-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-size: .67rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px;
  white-space: nowrap;
}
.tier h3 { font-size: 1.05rem; }
.tier .who-for { font-size: .85rem; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 5px; }
.price b { font-family: Manrope, sans-serif; font-weight: 800; font-size: 2.4rem; color: var(--navy); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.price span { color: var(--muted); font-size: .85rem; }
.tier ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; color: var(--muted); }
.tier li { display: grid; grid-template-columns: 17px 1fr; gap: 8px; align-items: start; }
.tier li svg { color: var(--blue); margin-top: 3px; }

/* A scrap of the product at the top of each tier, so the difference between
   plans is visible before you read the bullet list. */
.tier-viz {
  --c: var(--blue);
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line));
  border-radius: 12px; padding: 11px 12px;
  background: color-mix(in srgb, var(--c) 6%, var(--white));
  /* Matched height so all three plans start their copy on the same line. */
  display: grid; gap: 8px; min-height: 118px; align-content: space-between;
}
.viz-row { display: flex; align-items: center; gap: 6px; }
.viz-row .k { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.viz-row .k + * { margin-left: auto; }
.viz-pill {
  font-size: .68rem; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  border-radius: 100px; padding: 2px 8px; font-variant-numeric: tabular-nums;
}
.viz-line {
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; display: flex; align-items: center; gap: 6px;
  font-size: .72rem; color: var(--navy);
}
.viz-line em { font-style: normal; color: var(--muted); margin-left: auto; font-size: .68rem; }
.viz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.viz-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.viz-stages i { height: 5px; border-radius: 100px; background: var(--s, var(--line)); display: block; }
.viz-people { display: flex; align-items: center; }
.viz-people b {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font-size: .58rem; font-weight: 700; letter-spacing: -.01em; color: var(--white);
  background: var(--p, var(--blue)); border: 2px solid var(--white); margin-left: -4px;
}
.viz-people b:first-child { margin-left: 0; }
.viz-stages i { height: 6px; }

/* Trust / security cards ------------------------------------ */

/* Security visual ------------------------------------------
   A shield sitting inside concentric rings, with the export panel below it
   so "your data is safe" and "your data is yours to take" read as one idea. */

.vault { display: grid; gap: var(--sp-4); }
.vault-ring {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--blue) 13%, var(--white)), var(--white) 72%);
  border: 1px solid var(--line);
  overflow: hidden;
}
.vault-ring i {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--blue) 26%, transparent);
}
.vault-ring i:nth-child(1) { width: 168px; height: 168px; }
.vault-ring i:nth-child(2) { width: 240px; height: 240px; }
.vault-ring i:nth-child(3) { width: 316px; height: 316px; opacity: .6; }
.vault-shield {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  box-shadow: var(--shadow-lg);
}
.vault-shield svg { width: 42px; height: 42px; }
.vault-tag {
  position: absolute; display: flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 11px; font-size: .76rem; font-weight: 600; color: var(--navy);
  box-shadow: var(--shadow);
}
.vault-tag svg { width: 13px; height: 13px; color: var(--c, var(--blue)); }
.vault-tag.t1 { top: 14%; left: 8%; }
.vault-tag.t2 { top: 64%; right: 7%; }
.vault-tag.t3 { bottom: 12%; left: 16%; }

.export-panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px;
  display: flex; align-items: center; gap: 12px;
}
.export-panel .badge {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--won-soft); color: var(--won);
  border: 1px solid color-mix(in srgb, var(--won) 26%, transparent);
}
.export-panel b { display: block; font-size: .9rem; color: var(--navy); }
.export-panel small { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); }
.export-panel .go {
  margin-left: auto; flex-shrink: 0;
  font-size: .78rem; font-weight: 600; color: var(--blue);
  background: var(--soft); border-radius: 100px; padding: 6px 12px;
}

/* Compact trust rows, so the copy column stays a column. */
.trust-rows { display: grid; gap: 12px; margin-top: var(--sp-5); }
.trow { --c: var(--blue); display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.trow .badge {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  color: var(--c);
}
.trow b { display: block; font-size: .92rem; color: var(--navy); }
.trow span { display: block; margin-top: 2px; font-size: .86rem; color: var(--muted); }


/* FAQ ------------------------------------------------------- */

/* FAQ, rebuilt ---------------------------------------------- */

.faq-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 940px) {
  .faq-grid { grid-template-columns: 1fr 1.25fr; gap: var(--sp-7); }
  /* The copy stays put while the reader works down a long accordion. */
  .faq-side { position: sticky; top: 90px; }
}

.faq-pill { display: inline-flex; align-items: center; gap: 7px; }
.faq-pill svg { width: 14px; height: 14px; }

.faq-help { display: grid; gap: 9px; margin-top: var(--sp-5); }
.faq-ch {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  text-decoration: none;
}
a.faq-ch:hover { border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.faq-ch-ic {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  color: var(--c);
}
.faq-ch-ic svg { width: 18px; height: 18px; }
.faq-ch b { display: block; font-size: .88rem; color: var(--navy); }
.faq-ch small { display: block; margin-top: 1px; font-size: .78rem; color: var(--muted); }

/* Each question is its own card rather than a row in a ruled list: with
   an icon per question the old shared borders read as a table. */
.faq2 { margin-top: 0; border-top: 0; display: grid; gap: 9px; }
.faq2 details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.faq2 details[open] {
  background: color-mix(in srgb, var(--blue) 5%, var(--white));
  border-color: color-mix(in srgb, var(--blue) 26%, transparent);
}
.faq2 summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 46px 15px 15px;
  font-weight: 600; color: var(--navy); position: relative; font-size: .97rem;
}
.faq2 summary::-webkit-details-marker { display: none; }
.q-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  color: var(--c);
}
.q-ic svg { width: 17px; height: 17px; }
/* The chevron gains a filled disc only on the open card, so the reader can
   find their place in a nine-card stack at a glance. ::before draws the
   disc, ::after the chevron that sits on it. */
.faq2 summary::before {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: transparent; transition: background .18s ease;
}
.faq2 details[open] summary::before { background: var(--blue); }
.faq2 summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq2 details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: #fff; }
.faq2 p {
  margin: 0; padding: 0 17px 17px 61px;
  color: var(--muted); font-size: .92rem; max-width: 62ch;
}
@media (max-width: 520px) { .faq2 p { padding-left: 17px; } }

/* Final CTA ------------------------------------------------- */

.finale { border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 52px); }
.finale h2 { color: #fff; max-width: 22ch; }
.finale p { color: #C3C8E6; margin-top: var(--sp-3); max-width: 46ch; }
.finale .cta-row { margin-top: var(--sp-5); }
.finale .btn-ghost { background: transparent; border-color: rgba(255,255,255,.26); color: #fff; }
.finale .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); }

/* Motion — subtle, and off entirely when the OS asks --------- */

@media (prefers-reduced-motion: no-preference) {
  /* Motion starts from a visible resting state — never opacity: 0 — so the
     first painted frame already shows the page. */
  .rise { animation: riseIn .45s cubic-bezier(.22,.7,.3,1) both; }
  .rise-1 { animation-delay: 0s; } .rise-2 { animation-delay: .06s; }
  .rise-3 { animation-delay: .12s; } .rise-4 { animation-delay: .18s; }
  @keyframes riseIn { from { opacity: .55; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .step3, .tier, .whocard { transition: transform .16s ease, border-color .16s ease; }
  .step3:hover, .whocard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
}

/* ============================================================
   Redesign v2 — problem, comparison, journey, industries, mobile
   ============================================================ */

/* ============================================================
   The real problem — a scattered-leads story, not a card grid
   ============================================================ */

/* The real problem — scattered sources on the left, the app on the right ---- */

.wrap.wide { max-width: 1240px; }

.ba2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-6); align-items: start; }
.ba2-arrow { align-self: center; }
@media (min-width: 1040px) { .ba2 { grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); } }

.ba2-arrow { display: grid; place-items: center; color: var(--blue); padding: var(--sp-4) 0; }
.ba2-arrow svg { width: 34px; height: 34px; }
@media (max-width: 1039px) { .ba2-arrow { transform: rotate(90deg); padding: 0; } }

.state-tag {
  display: inline-block; border-radius: 100px; padding: 4px 13px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.state-tag.bad  { background: var(--overdue-soft); color: var(--overdue); }
.state-tag.good { background: var(--soft); color: var(--blue); }
.state-sub { margin-top: 9px; font-size: .88rem; color: var(--muted); }

/* Scatter ---------------------------------------------------
   A 3x3 grid puts the question in the middle with the sources around it, and
   the dashed paths are drawn over the whole box so they reach the centre. */
.scatter { position: relative; margin-top: var(--sp-4); display: grid; gap: 10px; }

@media (min-width: 620px) {
  .scatter {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a1 a2"
      "a3 a4"
      "a5 hub";
    gap: 12px;
  }
  .a1 { grid-area: a1; } .a2 { grid-area: a2; }
  .a3 { grid-area: a3; } .a4 { grid-area: a4; }
  .a5 { grid-area: a5; align-self: center; }
  .hub-q { grid-area: hub; }

}

.src-card {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 13px; padding: 12px 13px; box-shadow: var(--shadow);
}
.src-card .grow { flex: 1; min-width: 0; }
.src-card .ic {
  --c: var(--muted);
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--c); color: #fff;
}
.src-card .ic svg { width: 17px; height: 17px; }
.src-card.wa    .ic { --c: var(--src-wa); }
.src-card.call  .ic { --c: var(--overdue); }
.src-card.web   .ic { --c: var(--src-im); }
.src-card.ad    .ic { --c: var(--src-meta); }
.src-card.sheet .ic { --c: var(--won); }
.src-card b { display: block; font-size: .84rem; color: var(--navy); font-weight: 700; }
.src-card .quote { display: block; margin-top: 2px; font-size: .82rem; color: var(--text); }
.src-card small { display: block; margin-top: 3px; font-size: .72rem; color: var(--muted); }
.src-card .badge-n {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--overdue); color: #fff; font-size: .64rem; font-weight: 700;
}

/* A card the size of the ones around it, not a circle: as a full-width round
   panel this was mostly empty space and dwarfed the sources it summarises.
   The dashed border does the "everything lands here" job on its own. */
.hub-q {
  position: relative; text-align: center;
  border-radius: 14px; padding: 15px 14px;
  display: grid; align-content: center; gap: 3px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--blue) 13%, var(--white)), var(--white) 78%);
  border: 1px dashed color-mix(in srgb, var(--blue) 38%, transparent);
}
.hub-q .qmark {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 4px;
  display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: .82rem; font-weight: 700;
}
.hub-q b { font-family: Manrope, sans-serif; font-size: 1rem; color: var(--navy); }
.hub-q small { font-size: .74rem; color: var(--muted); }
.none-tag {
  justify-self: center; margin-top: 6px;
  background: var(--overdue-soft); color: var(--overdue);
  border-radius: 100px; padding: 3px 10px; font-size: .68rem; font-weight: 700;
}

.consequence {
  margin-top: var(--sp-4);
  background: var(--overdue-soft);
  border: 1px solid color-mix(in srgb, var(--overdue) 28%, transparent);
  border-left: 4px solid var(--overdue);
  border-radius: 12px; padding: 14px 16px;
}
.consequence .tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--overdue);
}
.consequence .tag svg { width: 15px; height: 15px; }
.consequence p { margin-top: 7px; font-size: .92rem; color: var(--text); }

/* The app, shown small ------------------------------------- */

.ui.app { margin-top: var(--sp-4); display: grid; grid-template-columns: 1fr; }
@media (min-width: 520px) { .ui.app { grid-template-columns: 116px 1fr; } }

.app-side { display: none; background: var(--deep); padding: 12px 8px; }
@media (min-width: 520px) { .app-side { display: block; } }
.app-brand {
  display: flex; align-items: center; gap: 5px; padding: 0 4px 11px;
  font-family: Manrope, sans-serif; font-size: .76rem; font-weight: 800; color: #fff;
}
.app-brand .mark { height: 13px; width: auto; }
.app-brand .mark .n { fill: #fff; }
.app-brand .mark .k { fill: #A5A0FA; }
.app-side span:not(.app-brand) {
  display: block; padding: 4px 7px; border-radius: 6px;
  font-size: .66rem; color: #9AA6C4; white-space: nowrap;
}
.app-side span.on { background: var(--blue); color: #fff; font-weight: 600; }

.app-main { padding: 11px 12px; min-width: 0; }
.app-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.app-head.sep { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.app-head b { font-family: Manrope, sans-serif; font-size: .8rem; color: var(--navy); }
.app-head small { margin-left: auto; font-size: .66rem; color: var(--blue); font-weight: 600; }

.fu-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.fu-row:last-of-type { border-bottom: 0; }
.fu-row .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fu-row .avatar-sm { width: 24px; height: 24px; font-size: .58rem; }
.fu-row .grow { flex: 1; min-width: 0; }
.fu-row .nm { display: block; font-size: .76rem; font-weight: 600; color: var(--navy); }
.fu-row .sub { display: block; font-size: .66rem; color: var(--muted); }
.fu-row .when { font-size: .66rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.fu-row .when.late { color: var(--overdue); }

/* Three action buttons, drawn as coloured pills rather than repeated labels. */
.mini-acts { display: flex; gap: 4px; flex-shrink: 0; }
.mini-acts i {
  --c: var(--muted);
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, var(--white));
  color: var(--c);
}
.mini-acts i svg { width: 10px; height: 10px; }
.mini-acts .c { --c: var(--src-im); }
.mini-acts .w { --c: var(--src-wa); }
.mini-acts .d { --c: var(--won); }

.pipe-step em { display: block; font-style: normal; font-size: .58rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.act-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; font-size: .7rem; color: var(--text);
}
.act-row .ab { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.act-row em { margin-left: auto; font-style: normal; font-size: .62rem; color: var(--muted); white-space: nowrap; }

/* What changes ---------------------------------------------- */

.wins { margin-top: var(--sp-4); display: grid; gap: 10px; }
@media (min-width: 620px) { .wins { grid-template-columns: 1fr 1fr; } }
.win {
  --c: var(--blue);
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start;
  background: color-mix(in srgb, var(--c) 6%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  border-radius: 12px; padding: 12px 13px;
}
.win .badge {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: #fff;
}
.win .badge svg { width: 15px; height: 15px; }
.win b { display: block; font-size: .82rem; color: var(--navy); line-height: 1.3; }
.win span { display: block; margin-top: 3px; font-size: .74rem; color: var(--muted); line-height: 1.45; }
.ba-arrow { display: grid; place-items: center; color: var(--blue); }
.ba-arrow svg { width: 28px; height: 28px; }
@media (max-width: 859px) { .ba-arrow { transform: rotate(90deg); } }

/* Journey timeline ------------------------------------------- */

/* How it works — five steps, each showing the screen it produces ---------- */

.journey { margin-top: var(--sp-6); display: grid; grid-template-columns: 1fr; gap: var(--sp-3); align-items: start; }
@media (min-width: 700px)  { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .journey { grid-template-columns: repeat(5, 1fr); gap: 12px; } }

.jstep {
  --c: var(--blue);
  position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 14px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.jstep:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--c) 40%, transparent); }

/* Step two is where the product earns its keep, so it is raised out of the row. */
.jstep.lead {
  background: color-mix(in srgb, var(--c) 7%, var(--white));
  border-color: color-mix(in srgb, var(--c) 34%, transparent);
  box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--c) 80%, transparent);
}
.jflag {
  position: absolute; top: -10px; right: 12px;
  background: var(--c); color: #fff; border-radius: 100px; padding: 3px 10px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}

.jhead { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.jnum {
  font-family: Manrope, sans-serif; font-size: .78rem; font-weight: 800;
  color: var(--c); font-variant-numeric: tabular-nums;
}
.jic {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  color: var(--c);
}
.jic svg { width: 16px; height: 16px; }
.jstep > b { display: block; font-size: 1rem; font-weight: 700; color: var(--navy); }
.jsub { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.45; color: var(--muted); }

/* The screen each step produces ------------------------------ */

.jcard {
  margin-top: 12px; background: var(--white);
  border: 1px solid var(--line); border-radius: 11px; padding: 10px;
  box-shadow: var(--shadow);
}
.jcard-head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.jcard-head b { font-size: .72rem; font-weight: 700; color: var(--navy); margin-right: auto; }

.chip-n, .chip-warn, .chip-ok, .chip-late, .chip-cust {
  border-radius: 100px; padding: 2px 7px; font-size: .6rem; font-weight: 700; white-space: nowrap;
}
.chip-n    { background: var(--soft); color: var(--blue); }
.chip-warn { background: var(--overdue-soft); color: var(--overdue); }
.chip-ok   { background: var(--won-soft); color: var(--won); }
.chip-late { display: inline-block; background: var(--overdue); color: #fff; }
/* Sits on the green won card, so it needs its own ground rather than the
   pale indigo tint, which all but vanished there. */
.chip-cust { background: var(--white); color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 26%, transparent); }

.jrow { display: flex; align-items: center; gap: 7px; padding: 5px 0; }
.jrow .grow { flex: 1; min-width: 0; }
.jrow .jdot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.jrow .avatar-sm { width: 22px; height: 22px; font-size: .55rem; }
.jrow b { display: block; font-size: .71rem; font-weight: 600; color: var(--navy); }
.jrow em { display: block; font-style: normal; font-size: .63rem; color: var(--muted); }
.jt { font-size: .62rem; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* The one lead being worked, lifted inside its own card. */
.jlead {
  background: var(--white); border: 1px solid color-mix(in srgb, var(--overdue) 30%, transparent);
  border-radius: 9px; padding: 8px; margin-bottom: 6px;
}

.jacts { display: flex; gap: 5px; margin-top: 7px; }
.jacts i {
  --c: var(--src-wa);
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--c); color: #fff; border-radius: 7px; padding: 5px 6px;
  font-style: normal; font-size: .62rem; font-weight: 700;
}
.jacts i svg { width: 10px; height: 10px; }
.jacts .c { --c: var(--src-im); }

.jchans { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.jchans span {
  font-size: .58rem; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  border-radius: 100px; padding: 2px 7px;
}

.jline { display: flex; align-items: center; gap: 7px; padding: 5px 0; }
.jli {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 15%, var(--white)); color: var(--c);
}
.jli svg { width: 10px; height: 10px; }
.jline b { display: block; font-size: .68rem; font-weight: 600; color: var(--navy); }
.jline em { display: block; font-style: normal; font-size: .61rem; color: var(--muted); }

.jquote {
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px; display: grid; gap: 2px;
}
.jquote b { font-size: .7rem; color: var(--navy); }
.jamt { font-family: Manrope, sans-serif; font-size: 1rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.jquote em { font-style: normal; font-size: .61rem; color: var(--muted); }
.jlink { display: block; margin: 8px 0 4px; font-size: .64rem; font-weight: 700; color: var(--blue); }

.won-card { display: grid; justify-items: center; text-align: center; gap: 5px; padding: 16px 12px; background: var(--won-soft); border-color: color-mix(in srgb, var(--won) 26%, transparent); }
.trophy { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--won); color: #fff; margin-bottom: 3px; }
.trophy svg { width: 21px; height: 21px; }
.won-title { font-size: .95rem; font-weight: 800; color: var(--won); }
.won-name { font-size: .74rem; color: var(--navy); font-weight: 600; }
.won-amt { font-family: Manrope, sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }

/* The one lead, tracked across all five steps ---------------- */

.jtrack {
  margin-top: var(--sp-4);
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.jtrack-lead { display: flex; align-items: center; gap: 9px; }
.jtrack-lead b { display: block; font-size: .82rem; color: var(--navy); }
.jtrack-lead em { display: block; font-style: normal; font-size: .72rem; color: var(--muted); }
.jtrack-steps { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.jtrack-steps i {
  font-style: normal; font-size: .68rem; font-weight: 600;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px;
}
.jtrack-steps i.done { color: var(--won); background: var(--won-soft); border-color: color-mix(in srgb, var(--won) 26%, transparent); }
.jtrack-steps i.now  { color: #fff; background: var(--blue); border-color: var(--blue); }

.jbanner {
  margin-top: var(--sp-3);
  background: var(--soft); border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.jbanner .badge {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--blue); color: #fff;
}
.jbanner .badge svg { width: 17px; height: 17px; }
.jbanner p { font-size: .92rem; color: var(--muted); }
.jbanner b { color: var(--navy); }

@media (prefers-reduced-motion: reduce) { .jstep:hover { transform: none; } }

/* Comparison table ------------------------------------------- */

.vs { margin-top: var(--sp-6); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.vs-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-soft); }
.vs-row:last-child { border-bottom: 0; }
.vs-row > div {
  padding: 14px 18px; font-size: .93rem;
  display: flex; align-items: center; gap: 10px;
}
.vs-row > div:first-child {
  color: var(--muted); border-right: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--overdue) 4%, var(--white));
}
.vs-row > div:last-child {
  color: var(--navy); font-weight: 600;
  background: color-mix(in srgb, var(--blue) 8%, var(--white));
}
/* A mark on each side, so which column is the good one reads at a glance. */
.vs-row > div::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: no-repeat center / 9px 9px;
}
.vs-row > div:first-child::before {
  background-color: color-mix(in srgb, var(--overdue) 14%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.vs-row > div:last-child::before {
  background-color: color-mix(in srgb, var(--won) 16%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F7B4F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.vs-head > div {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--bg); color: var(--muted);
}
.vs-head > div:last-child { color: var(--blue); background: var(--soft); }
/* The header row names the columns; it needs no tick or cross. */
.vs-head > div::before { display: none; }

/* Industries -------------------------------------------------
   Five across, each card tinted with its own hue, solid icon badge, number in
   the corner and a photo bleeding off the right edge. The photo half only
   exists when the file is on disk, so a card without one is simply a wider
   text card rather than an empty panel. */

.ind-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: var(--sp-6); }
@media (min-width: 600px)  { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) {
  .ind-grid { grid-template-columns: repeat(5, 1fr); }
  /* The eleventh card sits alone. Spanning the middle three columns centres it
     honestly; the width cap stops it stretching into a banner. */
  .ind-grid > .ind-card:last-child {
    grid-column: 2 / span 3; justify-self: center; width: min(100%, 430px);
  }
}

.ind-card {
  --c: var(--blue);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; align-content: start;
  border-radius: 16px;
  padding: 15px 16px 16px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--c) 13%, var(--white)),
    color-mix(in srgb, var(--c) 4%, var(--white)));
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ind-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c) 70%, transparent);
  border-color: color-mix(in srgb, var(--c) 42%, transparent);
}

/* Solid badge, white glyph — the mockup's strongest signal of which trade. */
.ind-card .badge {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--c); color: #fff;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--c) 90%, transparent);
  margin-bottom: 12px;
}
.ind-card .badge svg { width: 23px; height: 23px; }

.ind-card .num {
  position: absolute; top: 14px; right: 15px; z-index: 2;
  font-family: Manrope, sans-serif; font-size: .74rem; font-weight: 700;
  color: color-mix(in srgb, var(--c) 85%, var(--navy));
  font-variant-numeric: tabular-nums;
}

.ind-card b { display: block; font-size: .94rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.ind-card p { margin-top: 7px; font-size: .82rem; line-height: 1.5; color: var(--muted); }

/* --- with a photo --- */
.ind-card.has-photo { grid-template-columns: 1fr 42%; gap: 0; padding: 0; align-content: stretch; }
.ind-card.has-photo .ind-body { padding: 15px 10px 16px 16px; }
.ind-card.has-photo .ind-photo { position: relative; overflow: hidden; }
.ind-card.has-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Softens the vertical seam between copy and photograph. */
.ind-card.has-photo .ind-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 10%, var(--white)), transparent 55%);
}
@media (min-width: 1180px) {
  .ind-grid > .ind-card.has-photo:last-child { grid-template-columns: 1fr 34%; }
}

@media (prefers-reduced-motion: reduce) { .ind-card:hover { transform: none; } }

/* Closing band under the grid ------------------------------- */

.ind-cta {
  margin-top: var(--sp-5);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
  border-radius: 18px; padding: var(--sp-5);
  display: grid; gap: var(--sp-4); align-items: center;
}
@media (min-width: 1000px) { .ind-cta { grid-template-columns: minmax(220px, 1fr) 2.1fr auto; gap: var(--sp-5); } }

.ind-cta h3 { font-size: var(--step-1); font-weight: 700; color: var(--navy); line-height: 1.25; }
.ind-cta h3 span { color: var(--blue); }
.ind-cta .pill-label { margin-bottom: 10px; }

.cta-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (min-width: 700px) { .cta-points { grid-template-columns: repeat(4, 1fr); } }
.cta-point { text-align: center; }
.cta-point .badge {
  width: 36px; height: 36px; border-radius: 11px; margin: 0 auto 8px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--blue) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent);
  color: var(--blue);
}
.cta-point b { display: block; font-size: .84rem; color: var(--navy); }
.cta-point span { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted); line-height: 1.45; }

.ind-cta .cta-act { text-align: center; }
.ind-cta .cta-act small { display: block; margin-top: 8px; font-size: .74rem; color: var(--muted); }

/* ============================================================
   The follow-up engine (#followups)
   ============================================================
   The old version was the generic .ui card with two stacked rows, and it
   read as a smaller copy of the problem section's dashboard — hence the
   "no changes" review. This is a different screen: the Follow-ups page
   with its own tab bar, grouped by urgency, labelled Call/WhatsApp
   buttons rather than icon squares, and the counters along the bottom.
   ------------------------------------------------------------ */

@media (min-width: 940px) {
  /* The screen needs the wider half: at an even split the lead rows lost
     the amount off the end of the line and broke after the separator. */
  .fu-split { grid-template-columns: 1fr 1.42fr; align-items: center; }
}

/* Left column: three points ---------------------------------- */

.fu-points { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: 22px; }
.fu-points li { display: grid; grid-template-columns: 46px 1fr; gap: 15px; align-items: start; }

.fu-ic {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  color: var(--c);
}
.fu-ic svg { width: 22px; height: 22px; }

.fu-txt { font-size: .93rem; color: var(--muted); line-height: 1.55; }
/* The heading sits on its own line so the eye can skim three claims
   before deciding whether to read the supporting sentence. */
.fu-txt b { display: block; margin-bottom: 3px; font-size: 1rem; color: var(--navy); }

/* Right column: the stage ------------------------------------ */

.fu-stage { position: relative; }

/* The toast overhangs the app window's top-right corner, which is what
   makes it read as a notification arriving rather than a panel inside
   the screenshot. It needs the room, so it only overhangs when there is
   room to overhang into. */
.fu-toast {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 14px auto; width: fit-content;
  padding: 11px 14px; border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px -14px rgb(15 23 42 / .28);
}
@media (min-width: 720px) {
  .fu-toast { position: absolute; right: -6px; top: -26px; z-index: 3; margin: 0; }
}
.fu-toast-ic {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--soft); color: var(--blue);
}
.fu-toast-ic svg { width: 17px; height: 17px; }
.fu-toast-txt { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.fu-toast-txt b { color: var(--navy); }
.fu-toast-go { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }

.fu-app { margin-top: 0; }
/* A narrower rail than the dashboard's — this screen is the list, not the
   navigation, and the rows need every pixel. */
@media (min-width: 520px) { .fu-app { grid-template-columns: 104px 1fr; } }

/* App chrome ------------------------------------------------- */

.fu-appbar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
}
.fu-appbar b { font-family: Manrope, sans-serif; font-size: 1rem; color: var(--navy); }
.fu-open {
  margin-left: auto; font-size: .66rem; font-weight: 600; color: var(--muted);
  background: var(--tint); border-radius: 100px; padding: 4px 9px;
}

.fu-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.fu-tabs::-webkit-scrollbar { display: none; }
.fu-tabs span {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 7px 10px 9px; font-size: .72rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.fu-tabs span.on { color: var(--blue); border-bottom-color: var(--blue); }
.fu-tabs .cnt {
  font-style: normal; font-size: .6rem; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 100px;
  background: var(--soft); color: var(--blue);
}
.fu-tabs .cnt.bad { background: var(--overdue-soft); color: var(--overdue); }

/* Rows ------------------------------------------------------- */

.fu-group {
  display: block; margin: 10px 0 2px;
  font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.fu-group.bad  { color: var(--overdue); }
.fu-group.warn { color: var(--warn); }

.fu-lead {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.fu-lead:last-of-type { border-bottom: 0; }
/* The overdue row is tinted and rule-marked so the "overdue first"
   claim on the left is visibly true in the screen on the right. It runs
   full bleed to the panel edges (-12px matches .app-main's padding):
   inset, the tint looked like a selected row, and on a narrow screen the
   "3 days late" stamp ran out of room and clipped. */
.fu-lead.late {
  background: color-mix(in srgb, var(--overdue) 5%, transparent);
  border-left: 2px solid var(--overdue);
  margin: 0 -12px; padding: 10px 12px 10px 10px;
}
.fu-lead .avatar-sm { margin-top: 1px; }
.fu-lead .avatar-sm.od {
  background: color-mix(in srgb, var(--overdue) 14%, var(--white));
  color: var(--overdue);
}
.fu-lead .grow { flex: 1; min-width: 0; }
.fu-lead .nm { display: block; font-size: .82rem; font-weight: 600; color: var(--navy); }
.fu-lead .sub { display: block; margin-top: 1px; font-size: .7rem; color: var(--muted); }
.fu-lead .src { margin-top: 4px; font-size: .66rem; }

.fu-right { display: grid; gap: 7px; justify-items: end; flex-shrink: 0; }
.fu-right .when { font-size: .7rem; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fu-right .when.late { color: var(--overdue); }

.big-acts { display: flex; gap: 5px; }
.big-acts i {
  display: inline-flex; align-items: center; gap: 4px;
  font-style: normal; font-size: .66rem; font-weight: 600; white-space: nowrap;
  padding: 5px 9px; border-radius: 7px;
  background: color-mix(in srgb, var(--c) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  color: var(--c);
}
.big-acts i svg { width: 11px; height: 11px; }
.big-acts .call { --c: var(--won); }
.big-acts .wa   { --c: var(--src-wa); }
.big-acts .more {
  --c: var(--muted);
  padding: 5px 7px; letter-spacing: .06em;
}
/* Below this the two labelled buttons plus a timestamp will not fit
   beside the name, so the labels go and the icons carry it. */
@media (max-width: 560px) {
  .big-acts .call, .big-acts .wa { font-size: 0; gap: 0; padding: 6px; }
  .big-acts i svg { width: 13px; height: 13px; }
  .big-acts .more { display: none; }
}

/* Counters --------------------------------------------------- */

.fu-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; margin-top: 12px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 560px) { .fu-stats { grid-template-columns: repeat(4, 1fr); } }
.fu-stats > div {
  display: grid; justify-items: center; gap: 2px;
  padding: 11px 6px; background: var(--white);
}
.fu-stats .si {
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  color: var(--c);
}
.fu-stats .si svg { width: 13px; height: 13px; }
.fu-stats b {
  font-family: 'IBM Plex Mono', monospace; font-size: .95rem;
  color: var(--navy); font-variant-numeric: tabular-nums;
  /* Mono spaces the decimal point wide enough that "8.4L" reads as three
     tokens; a touch of negative tracking pulls it back into one number. */
  letter-spacing: -.03em;
}
.fu-stats small { font-size: .62rem; color: var(--muted); text-align: center; }

/* ============================================================
   Built for the field (#mobile)
   ============================================================
   The markup here shipped with no stylesheet behind it at all, so the
   phone mock rendered as a run-together text blob ("WhatsAppCallDone").
   This is the missing half: a real handset frame with the app's home
   screen inside it.
   ------------------------------------------------------------ */

@media (min-width: 940px) {
  .mob-split { grid-template-columns: 1fr 1fr; align-items: center; }
}

.phone-stage {
  position: relative;
  display: grid; justify-items: center;
  padding-top: var(--sp-4);
}

/* The handset --------------------------------------------- */

.phone {
  position: relative;
  width: 100%; max-width: 300px;
  /* The handset body is a physical object, not part of the theme — it
     stays dark in dark mode, where var(--navy) inverts to near-white and
     left the frame and its notch as a white blob. */
  background: var(--deep);
  border-radius: 34px;
  padding: 9px;
  box-shadow: 0 30px 60px -22px rgb(15 23 42 / .45), 0 0 0 1px rgb(15 23 42 / .06);
}
/* The notch is drawn on the bezel rather than inside the screen so the
   screen content can start at the top edge like it does on a real phone. */
.phone-notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 19px; z-index: 2;
  background: var(--deep);
  border-radius: 0 0 12px 12px;
}
.phone-screen {
  background: var(--white);
  border-radius: 26px;
  overflow: hidden;
  padding: 8px 11px 0;
}

.pstatus {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1px 4px 8px;
  font-size: .64rem; font-weight: 700; color: var(--navy);
}
.pstatus-r { display: flex; align-items: center; gap: 4px; color: var(--navy); }
.pstatus-r svg { height: 9px; width: auto; }

.phead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 10px;
}
.pbrand {
  display: flex; align-items: center; gap: 6px;
  font-family: Manrope, sans-serif; font-size: .82rem; font-weight: 800;
  letter-spacing: .04em; color: var(--navy);
}
.pbrand .mark { height: 14px; width: auto; }
.pbrand .mark .n { fill: var(--navy); }
.pbrand .mark .k { fill: var(--blue); }
.pav {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--soft); color: var(--blue);
}
.pav svg { width: 15px; height: 15px; }

.pgreet { padding: 0 2px 11px; }
.pgreet b { display: block; font-family: Manrope, sans-serif; font-size: .92rem; color: var(--navy); }
.pgreet small { display: block; margin-top: 2px; font-size: .68rem; color: var(--muted); }

.ptiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ptile {
  display: grid; gap: 1px; justify-items: center;
  padding: 9px 4px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 11%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
}
.ptile b {
  font-family: 'IBM Plex Mono', monospace; font-size: .88rem;
  color: var(--c); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ptile small { font-size: .56rem; font-weight: 600; color: var(--muted); text-align: center; }

.psec {
  display: flex; align-items: baseline; gap: 8px;
  padding: 14px 2px 4px;
}
.psec b { font-family: Manrope, sans-serif; font-size: .78rem; color: var(--navy); }
.psec small { margin-left: auto; font-size: .62rem; font-weight: 600; color: var(--blue); }

.prow {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.prow:last-of-type { border-bottom: 0; }
.prow .pav-i {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: .58rem; font-weight: 700;
  background: var(--soft); color: var(--blue);
}
.prow.late .pav-i {
  background: color-mix(in srgb, var(--overdue) 14%, var(--white));
  color: var(--overdue);
}
.prow .grow { flex: 1; min-width: 0; }
.prow .nm { display: block; font-size: .74rem; font-weight: 600; color: var(--navy); }
.prow .sub {
  /* The amount is the end of this line and the part that matters, so the
     row has to be wide enough to keep it — at .62rem it was ellipsised
     away to "CCTV installation, fifty thou...". */
  display: block; margin-top: 1px; font-size: .6rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwhen { font-size: .58rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.prow.late .pwhen { color: var(--overdue); }
/* The call button is the whole point of the section — thumb-sized, one
   colour, always in the same place on every row. */
.pcall {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--src-wa); color: #fff;
}
.pcall svg { width: 13px; height: 13px; }

.pnav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 10px -11px 0;
  padding: 8px 0 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--white);
}
.pnav span {
  display: grid; justify-items: center; gap: 3px;
  font-size: .55rem; font-weight: 600; color: var(--muted);
}
.pnav svg { width: 15px; height: 15px; }
.pnav .on { color: var(--blue); }
.pnav .add svg {
  width: 25px; height: 25px; padding: 5px; margin-bottom: -1px;
  border-radius: 50%; background: var(--blue); color: #fff;
}

/* The enquiry arriving ------------------------------------- */

.wa-float {
  display: flex; gap: 9px; align-items: flex-start;
  width: 100%; max-width: 250px;
  margin-bottom: var(--sp-4);
  padding: 11px 13px; border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -16px rgb(15 23 42 / .3);
}
/* The mockup floats this card over the phone's left edge. There is not
   enough room in this column to do that without the card landing across
   the brand and the greeting, and a notification that hides the screen
   it is announcing is worse than one that sits above it. So it stacks,
   aligned to the phone's left edge — same reading order, nothing hidden. */
@media (min-width: 620px) {
  .wa-float { margin-left: 0; margin-right: auto; }
}
.wa-float-ic {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--src-wa); color: #fff;
}
.wa-float-ic svg { width: 16px; height: 16px; }
.wa-float-body { min-width: 0; }
.wa-float-head {
  display: flex; align-items: baseline; gap: 7px;
  font-size: .72rem; font-weight: 700; color: var(--navy);
}
.wa-float-head em { margin-left: auto; font-style: normal; font-size: .6rem; font-weight: 600; color: var(--muted); }
.wa-float-msg { display: block; margin-top: 4px; font-size: .72rem; color: var(--text); line-height: 1.4; }
.wa-float-from { display: block; margin-top: 5px; font-size: .62rem; color: var(--muted); }
.wa-float-amt {
  display: inline-block; margin-top: 6px;
  padding: 3px 8px; border-radius: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 700;
  letter-spacing: -.03em;
  background: var(--won-soft); color: var(--won);
}

/* ============================================================
   WhatsApp conversations (#whatsapp)
   ============================================================
   Three columns: why it matters, the chat it starts in, and the lead it
   becomes. The middle and right columns are the argument — the reader
   should be able to see the same enquiry in both.
   ------------------------------------------------------------ */

.wa-grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 780px)  { .wa-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .wa-grid { grid-template-columns: 1fr 1.05fr .92fr; gap: var(--sp-4); } }
/* Copy runs the full width until the third column has somewhere to go. */
@media (min-width: 780px) and (max-width: 1119px) {
  .wa-copy { grid-column: 1 / -1; }
}

.wa-pill { display: inline-flex; align-items: center; gap: 7px; }
.wa-pill svg { width: 14px; height: 14px; color: var(--src-wa); }

/* A filled circle, not a tinted tile: these three are actions you take,
   and the section's own colour is the WhatsApp green. */
.fu-ic.solid { background: var(--c); color: #fff; border-radius: 50%; }

/* This class was used in the markup but never defined, so "In development"
   read as the first three words of the sentence after it. */
.soon-tag {
  display: inline-block; vertical-align: 1px;
  margin: 0 5px 3px 0; padding: 2px 8px; border-radius: 100px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
}

/* The chat --------------------------------------------------- */

.wa-chat {
  border-radius: var(--radius); overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgb(15 23 42 / .3);
}
.wa-chat-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
}
.wa-back { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.wa-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: .84rem; font-weight: 700;
  background: var(--soft); color: var(--blue);
}
.wa-av.lg { width: 36px; height: 36px; font-size: .92rem; }
.wa-who { flex: 1; min-width: 0; }
.wa-who b { display: block; font-size: .88rem; color: var(--navy); }
.wa-who small { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--won); }
.wa-who .live { width: 6px; height: 6px; border-radius: 50%; background: var(--won); }
.wa-hicon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }

.wa-thread {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 13px;
  background: var(--bg);
}
.wa-msg {
  max-width: 84%;
  padding: 9px 12px 7px;
  font-size: .82rem; line-height: 1.45; color: var(--text);
  border-radius: 12px;
}
.wa-msg.in  { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
/* Tinted with the source green rather than WhatsApp's own bubble colour,
   so the mock reads as "your reply" without imitating their UI outright. */
.wa-msg.out {
  align-self: flex-end; border-bottom-right-radius: 4px;
  background: color-mix(in srgb, var(--src-wa) 13%, var(--white));
  border: 1px solid color-mix(in srgb, var(--src-wa) 22%, transparent);
}
.wa-msg em {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 4px; font-style: normal; font-size: .62rem; color: var(--muted);
}
.wa-msg.out em svg { width: 13px; height: 13px; color: var(--src-im); }
.wa-msg.file { padding: 8px; }

.wa-file { display: flex; align-items: center; gap: 9px; }
.wa-file-ic {
  width: 30px; height: 34px; border-radius: 5px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: .52rem; font-weight: 800; letter-spacing: .04em;
  background: var(--src-red); color: #fff;
}
.wa-file-body { min-width: 0; }
.wa-file-body b { display: block; font-size: .78rem; color: var(--navy); }
.wa-file-body small { display: block; font-size: .66rem; color: var(--muted); }

.wa-compose {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
}
.wa-cic { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.wa-cinput {
  flex: 1; min-width: 0;
  font-size: .8rem; color: var(--muted);
}
.wa-send {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--src-wa); color: #fff;
}
.wa-send svg { width: 15px; height: 15px; }

/* Chat to lead ----------------------------------------------- */

.wa-convert {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 12px 13px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.wa-convert-ic {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--src-wa); color: #fff;
}
.wa-convert-ic svg { width: 17px; height: 17px; }
.wa-convert .grow { flex: 1; min-width: 0; }
.wa-convert b { display: block; font-size: .84rem; color: var(--navy); }
.wa-convert small { display: block; margin-top: 1px; font-size: .72rem; color: var(--blue); font-weight: 600; }
.wa-convert-go { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }

.wa-done {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 10px; padding: 12px 13px;
  border-radius: var(--radius);
  background: var(--won-soft);
  border: 1px solid color-mix(in srgb, var(--won) 22%, transparent);
}
.wa-done-ic {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--won); color: #fff;
}
.wa-done-ic svg { width: 13px; height: 13px; }
.wa-done b { display: block; font-size: .84rem; color: var(--navy); }
.wa-done small { display: block; margin-top: 2px; font-size: .74rem; color: var(--muted); }
.wa-done em { font-style: normal; font-weight: 600; color: var(--won); }

/* The lead --------------------------------------------------- */

.wa-lead-col { position: relative; }
.wa-auto {
  display: block; margin-bottom: 9px;
  font-size: .74rem; font-weight: 600; color: var(--blue);
}
.wa-auto::after {
  content: ""; display: block; margin-top: 5px; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 45%, transparent), transparent);
}

.wa-lead {
  border-radius: var(--radius); padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgb(15 23 42 / .3);
}
.wa-lead-head { display: flex; align-items: center; gap: 8px; }
.wa-new {
  padding: 3px 10px; border-radius: 100px;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  background: var(--won); color: #fff;
}
.wa-ref { margin-left: auto; font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.wa-lead-id {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.wa-lead-id .grow { flex: 1; min-width: 0; }
.wa-lead-id b { display: block; font-size: .92rem; color: var(--navy); }
.wa-lead-id small { display: block; margin-top: 1px; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wa-more { font-size: .8rem; letter-spacing: .06em; color: var(--muted); }

.wa-facts { margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.wa-facts > div { display: flex; align-items: center; gap: 9px; }
.wa-facts dt { flex-shrink: 0; display: grid; place-items: center; width: 17px; color: var(--muted); }
.wa-facts dt svg { width: 15px; height: 15px; }
.wa-facts dd { margin: 0; font-size: .8rem; color: var(--text); }
.wa-facts .est { color: var(--muted); font-size: .72rem; }

.wa-jtitle {
  display: block; margin: 15px 0 9px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-family: Manrope, sans-serif; font-size: .86rem; color: var(--navy);
}

.wa-journey { list-style: none; margin: 0; padding: 0; }
.wa-journey li { position: relative; display: flex; gap: 11px; padding-bottom: 12px; }
.wa-journey li:last-child { padding-bottom: 0; }
/* The connecting line is drawn from each step to the next rather than as
   one bar behind them, so it stops cleanly at the final step. */
.wa-journey li:not(:last-child)::before {
  content: ""; position: absolute; left: 9px; top: 21px; bottom: 1px;
  width: 2px; background: var(--line);
}
.wa-jdot {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--line);
}
.wa-journey .done .wa-jdot { background: var(--won); border-color: var(--won); color: #fff; }
.wa-journey .done .wa-jdot svg { width: 10px; height: 10px; }
.wa-journey .next .wa-jdot { border-color: var(--blue); }
.wa-jbody b { display: block; font-size: .8rem; font-weight: 600; color: var(--navy); }
.wa-jbody small { display: block; margin-top: 1px; font-size: .7rem; color: var(--muted); }
.wa-journey .done .wa-jbody, .wa-journey .next .wa-jbody {
  flex: 1; border-radius: 7px; padding: 1px 8px 3px; margin: -1px 0 0 -2px;
}
.wa-journey .done .wa-jbody { background: var(--won-soft); }
.wa-journey .next .wa-jbody { background: var(--soft); }
.wa-journey .next .wa-jbody small { color: var(--blue); font-weight: 600; }

.wa-acts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border-radius: 9px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: var(--white); border: 1px solid var(--line); color: var(--navy);
}
.wa-btn svg { width: 14px; height: 14px; }
.wa-btn.fill { background: var(--src-wa); border-color: var(--src-wa); color: #fff; }
.wa-btn.wide { grid-column: 1 / -1; color: var(--muted); }

/* ============================================================
   Sticky mobile CTA (.sticky-cta)
   ============================================================
   The element and its IntersectionObserver both shipped, but no rule ever
   made it stick — so it rendered as a stray button below the footer,
   always in the flow, on every screen size. It is a phone affordance:
   on a wide screen the header's own button is never far away.
   ------------------------------------------------------------ */

.sticky-cta { display: none; }

@media (max-width: 719px) {
  .sticky-cta {
    display: block;
    position: fixed; z-index: 40;
    left: 12px; right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    text-decoration: none;
  }
  .sticky-cta .btn {
    display: flex; width: 100%; justify-content: center;
    box-shadow: 0 14px 30px -10px rgb(45 43 214 / .5);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sticky-cta { transition: opacity .2s ease, transform .2s ease; }
}

/* ============================================================
   Why Enkay (#why)
   ============================================================
   Replaces the .vs table, which stated the same six contrasts as two bare
   columns of text and gave the reader no reason to believe either side.
   Two panels now, weighted: the traditional CRM greyed and flat, Enkay
   raised and carrying the screen that proves the claims.
   ------------------------------------------------------------ */

.vs2 { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); align-items: start; }
@media (min-width: 1060px) {
  /* The Enkay panel is wider because it has to hold the phone as well as
     the list; a 50/50 split squeezed both. */
  .vs2 { grid-template-columns: 1fr auto 1.42fr; gap: var(--sp-3); align-items: center; }
}

.vs2-badge {
  justify-self: center; align-self: center;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: Manrope, sans-serif; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--blue); color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--blue) 70%, transparent);
}

.vpanel { border-radius: var(--radius); padding: var(--sp-5); }
/* Flat, greyed and unshadowed — it should read as the thing you are
   leaving behind, without needing a label to say so. */
.vpanel.old {
  background: color-mix(in srgb, var(--muted) 5%, var(--white));
  border: 1px solid var(--line);
}
.vpanel.new {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  box-shadow: 0 22px 50px -28px rgb(15 23 42 / .32);
}

.vpanel-head { display: flex; align-items: center; gap: 12px; padding-bottom: var(--sp-4); }
.vpanel-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--muted) 12%, var(--white));
  color: var(--muted);
}
.vpanel-ic svg { width: 21px; height: 21px; }
.vpanel-ic.brand { background: var(--soft); }
.vpanel-ic.brand .mark { height: 19px; width: auto; }
.vpanel-ic.brand .mark .n { fill: var(--navy); }
.vpanel-ic.brand .mark .k { fill: var(--blue); }
.vpanel-head b { display: block; font-family: Manrope, sans-serif; font-size: 1.05rem; color: var(--navy); }
.vpanel-head b.big { font-size: 1.35rem; letter-spacing: -.01em; }
.vpanel-head small { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); }
.vpanel.old .vpanel-head b { color: var(--muted); }

.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.vlist li {
  display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start;
  padding: 10px 11px; border-radius: 10px;
}
/* Only the Enkay side gets a card per row. On the left the same treatment
   would have dressed up the list you are meant to walk away from. */
.vlist.good li { background: color-mix(in srgb, var(--won) 6%, var(--white)); }
.vlist li b { display: block; font-size: .89rem; font-weight: 600; color: var(--navy); }
.vlist li small { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.vpanel.old .vlist li b { color: color-mix(in srgb, var(--navy) 72%, var(--muted)); }

.vmark {
  width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center;
}
.vmark svg { width: 12px; height: 12px; }
.vmark.bad { background: var(--overdue-soft); color: var(--overdue); }
.vmark.ok  { background: var(--won); color: #fff; }

.vnew-body { display: grid; gap: var(--sp-4); }
@media (min-width: 1240px) {
  .vnew-body { grid-template-columns: 1fr auto; align-items: center; }
}

/* The phone, reused from #mobile at a smaller size ---------- */

.phone.sm { max-width: 214px; justify-self: center; padding: 7px; border-radius: 28px; }
.phone.sm .phone-notch { top: 7px; width: 70px; height: 15px; }
.phone.sm .phone-screen { border-radius: 21px; padding: 7px 9px 0; }
.phone.sm .phead { padding: 8px 1px 8px; }
.phone.sm .pbrand .mark { height: 15px; }
.phone.sm .pav { width: 22px; height: 22px; }
.phone.sm .pav svg { width: 12px; height: 12px; }
.phone.sm .pgreet { padding: 0 1px 9px; }
.phone.sm .pgreet b { font-size: .78rem; }
.phone.sm .pgreet small { font-size: .58rem; }
.phone.sm .psec { padding: 11px 1px 6px; }
.phone.sm .psec b { font-size: .68rem; }
.phone.sm .psec small { font-size: .55rem; }
.phone.sm .pnav { margin: 9px -9px 0; padding: 7px 0 9px; }
.phone.sm .pnav span { font-size: .47rem; gap: 2px; }
.phone.sm .pnav svg { width: 12px; height: 12px; }

.ptiles.four { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ptiles.four .ptile { padding: 7px 2px; border-radius: 9px; }
.ptiles.four .ptile b { font-size: .78rem; }
.ptiles.four .ptile small { font-size: .48rem; }

/* A stacked lead card rather than the single-line row used in #mobile:
   here the two actions carry labels, so they need their own line. */
.pfull {
  padding: 8px; border-radius: 10px; margin-bottom: 6px;
  background: var(--white);
  border: 1px solid var(--line-soft);
}
.pfull:last-of-type { margin-bottom: 0; }
.pfull.late { border-color: color-mix(in srgb, var(--overdue) 26%, transparent); }
.pfull-top { display: flex; align-items: center; gap: 6px; }
.pfull-top .pav-i {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: .48rem; font-weight: 700;
  background: var(--soft); color: var(--blue);
}
.pfull-top .pav-i.od { background: color-mix(in srgb, var(--overdue) 14%, var(--white)); color: var(--overdue); }
.pfull-top b { font-size: .68rem; font-weight: 600; color: var(--navy); }
.pflag { display: block; margin-top: 4px; font-size: .55rem; font-weight: 700; color: var(--overdue); }
.pflag.due { color: var(--warn); }
.pmeta { display: block; margin-top: 2px; font-size: .55rem; color: var(--muted); }
.pacts { display: flex; gap: 4px; margin-top: 7px; }
.pacts i {
  display: inline-flex; align-items: center; gap: 3px;
  font-style: normal; font-size: .5rem; font-weight: 700; white-space: nowrap;
  padding: 4px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--c) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  color: var(--c);
}
.pacts i svg { width: 8px; height: 8px; }
.pacts .call { --c: var(--src-im); }
.pacts .wa   { --c: var(--src-wa); }
.pacts .more { --c: var(--muted); padding: 4px 5px; letter-spacing: .05em; }

/* Closing band --------------------------------------------- */

.why-foot {
  display: grid; gap: 5px; align-items: center;
  margin-top: var(--sp-6); padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
@media (min-width: 860px) {
  .why-foot {
    grid-template-columns: 48px auto 1fr;
    column-gap: var(--sp-4); row-gap: 0;
  }
  .why-foot p {
    padding-left: var(--sp-4);
    border-left: 1px solid var(--line);
  }
}
.why-foot-ic {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
}
.why-foot-ic svg { width: 24px; height: 24px; }
.why-foot b { font-family: Manrope, sans-serif; font-size: 1.12rem; color: var(--navy); }
.why-foot p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* An inline <svg> carrying only a viewBox has no intrinsic size, so when
   the rule that sizes one is missing it expands to fill its container
   rather than failing small — which is how a 21px cube icon rendered a
   metre wide. Nothing in this design needs an unsized icon over 64px
   (the largest set anywhere is the 46px lockup mark, which sets its own). */
svg:not([width]):not([height]) { max-width: 64px; max-height: 64px; }

/* ============================================================
   Early access (#proof)
   ============================================================
   Three numbered promises, each showing the thing it promises. No photo:
   there is no real customer to picture yet, and inventing one would be
   the "borrowed logos, invented numbers" this section rules out.
   ------------------------------------------------------------ */

.ea-top { position: relative; }
@media (min-width: 1120px) {
  .ea-top { display: grid; grid-template-columns: 280px 1fr 280px; align-items: center; gap: var(--sp-4); }
  .ea-head { grid-column: 2; }
}

/* The exchange this whole product exists to catch, shown once, small. */
.ea-chat { display: none; }
@media (min-width: 1120px) { .ea-chat { display: grid; gap: 9px; } }
.ea-bub { display: flex; align-items: flex-start; gap: 8px; }
.ea-bub.out { padding-left: 22px; }
.ea-bub-ic {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
}
.ea-bub-ic.wa { background: var(--src-wa); color: #fff; }
.ea-bub-ic.wa svg { width: 15px; height: 15px; }
.ea-bub-ic.brand { background: var(--soft); }
.ea-bub-ic.brand .mark { height: 12px; width: auto; }
.ea-bub-ic.brand .mark .n { fill: var(--navy); }
.ea-bub-ic.brand .mark .k { fill: var(--blue); }
.ea-bub-body {
  padding: 9px 11px 7px; border-radius: 12px;
  font-size: .76rem; line-height: 1.45; color: var(--text);
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 10px 24px -18px rgb(15 23 42 / .4);
}
.ea-bub.in .ea-bub-body {
  border-bottom-left-radius: 4px;
  background: color-mix(in srgb, var(--src-wa) 11%, var(--white));
  border-color: color-mix(in srgb, var(--src-wa) 20%, transparent);
}
.ea-bub-body em {
  display: block; margin-top: 3px; text-align: right;
  font-style: normal; font-size: .6rem; color: var(--muted);
}
.ea-note {
  display: block; margin-top: 4px;
  font-size: .74rem; font-weight: 600; color: var(--blue);
}

.ea-pill { display: inline-flex; align-items: center; gap: 6px; }
.ea-pill svg { width: 13px; height: 13px; }

/* The three cards -------------------------------------------- */

.ea-cards { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 720px)  { .ea-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ea-cards { grid-template-columns: repeat(3, 1fr); } }

.ea-card {
  display: flex; flex-direction: column;
  padding: var(--sp-5); border-radius: var(--radius);
  background: color-mix(in srgb, var(--c) 5%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
}
.ea-num {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 13px;
  font-family: 'IBM Plex Mono', monospace; font-size: .74rem; font-weight: 700;
  background: color-mix(in srgb, var(--c) 15%, var(--white));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--c);
}
/* Balanced rather than capped: a hard max-width broke these as "We set it
   up with / you" and "Straight to the / maker". */
.ea-card > b {
  font-family: Manrope, sans-serif; font-size: 1.12rem; color: var(--navy);
  max-width: 15ch; text-wrap: balance;
}
.ea-card > p { margin: 8px 0 0; font-size: .87rem; color: var(--muted); line-height: 1.55; }

/* The evidence panel sits between the claim and its two ticks, and every
   card pushes its ticks to the same baseline however long the copy runs. */
.ea-mini {
  margin: var(--sp-4) 0 0;
  padding: 13px; border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}
.ea-checks { list-style: none; margin: auto 0 0; padding: var(--sp-4) 0 0; display: grid; gap: 8px; }
.ea-checks li {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--navy);
}
.ea-checks svg { width: 16px; height: 16px; color: var(--c); flex-shrink: 0; }

/* 01 — the setup call */
.ea-mini.setup { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 13px; }
.ea-mini-screen {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px; border-radius: 10px;
  font-family: Manrope, sans-serif; font-size: .88rem; font-weight: 800; color: var(--navy);
  background: var(--soft);
  border: 2px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.ea-mini-screen .mark { height: 15px; width: auto; }
.ea-mini-screen .mark .n { fill: var(--navy); }
.ea-mini-screen .mark .k { fill: var(--blue); }
.ea-mini-tick {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--won); color: #fff;
}
.ea-mini-tick svg { width: 14px; height: 14px; }

/* 02 — what stays and what goes */
.ea-mini.list { display: grid; gap: 7px; }
.ea-li { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--navy); }
.ea-li i { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; flex-shrink: 0; background: var(--line-soft); color: var(--muted); }
.ea-li i svg { width: 9px; height: 9px; }
.ea-li i.on { background: var(--won); color: #fff; }
/* Struck through, not merely greyed: the point of the card is that this
   one was cut, and grey alone reads as "not available yet". */
.ea-li.off { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }

/* 03 — talking to the maker */
.ea-mini.talk { display: grid; gap: 6px; }
.ea-talk-head {
  display: flex; align-items: center; gap: 6px; padding-bottom: 8px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .74rem; font-weight: 700; color: var(--navy);
}
.ea-talk-head .mk { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); }
.ea-talk-head .mk .mark { height: 9px; width: auto; }
.ea-talk-head .mk .mark .n { fill: var(--navy); }
.ea-talk-head .mk .mark .k { fill: var(--blue); }
.ea-talk-head em {
  margin-left: auto; font-style: normal; font-size: .62rem; font-weight: 600; color: var(--won);
  display: inline-flex; align-items: center; gap: 4px;
}
.ea-talk-head em::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--won); }
.ea-talk {
  max-width: 88%; padding: 7px 10px; border-radius: 10px;
  font-size: .74rem; line-height: 1.4; color: var(--text);
}
.ea-talk.in  { justify-self: start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.ea-talk.out {
  justify-self: end; border-bottom-right-radius: 3px;
  background: color-mix(in srgb, var(--won) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--won) 22%, transparent);
}

/* Call to action and the reassurance strip -------------------- */

.ea-cta { display: grid; justify-items: center; gap: 10px; margin-top: var(--sp-6); }
.ea-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 1.02rem; padding: 15px 28px; }
.ea-btn svg { width: 18px; height: 18px; }
.ea-cta small { font-size: .82rem; color: var(--muted); }

.ea-strip {
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 620px)  { .ea-strip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ea-strip { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.ea-strip > div { display: flex; align-items: center; gap: 11px; }
@media (min-width: 1000px) {
  .ea-strip > div + div { padding-left: var(--sp-4); border-left: 1px solid var(--line); }
  .ea-strip > div { padding-right: var(--sp-4); }
}
.ea-strip-ic {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--soft); color: var(--blue);
}
.ea-strip-ic svg { width: 17px; height: 17px; }
.ea-strip b { display: block; font-size: .86rem; color: var(--navy); }
.ea-strip small { display: block; margin-top: 1px; font-size: .76rem; color: var(--muted); }

/* ============================================================
   Get started (#start)
   ============================================================
   The form on the left, what arrives after you submit it on the right.
   No photograph: the mockup's stock portrait was cut deliberately.
   ------------------------------------------------------------ */

.gs-grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 940px) { .gs-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }

.gs-pill { display: inline-flex; align-items: center; gap: 7px; }
.gs-pill svg { width: 14px; height: 14px; }

/* The form, restyled ---------------------------------------- */

/* A card around the field: on a page this dense a bare label and input
   stopped reading as the one thing the section is asking for. */
.gs-form .field-row {
  padding: 15px 16px 12px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 14px 34px -24px rgb(15 23 42 / .3);
}
.gs-form .field-row label {
  display: flex; align-items: center; gap: 9px;
  font-size: .95rem; margin-bottom: 4px;
}
.gs-wa {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--src-wa); color: #fff;
}
.gs-wa svg { width: 16px; height: 16px; }
.gs-form .input-wrap { border-width: 1px; }
.gs-form .err { min-height: 0; }
.gs-form .err:empty { display: none; }

.gs-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; font-size: 1rem;
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--blue) 62%, transparent);
}
.gs-btn svg { width: 17px; height: 17px; }

.gs-assure {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 18px 26px;
}
.gs-assure li {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; color: var(--muted); line-height: 1.35;
}
.gs-assure-ic {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  color: var(--c);
}
.gs-assure-ic svg { width: 16px; height: 16px; }

/* What arrives afterwards ------------------------------------ */

.gs-after { display: grid; gap: 12px; justify-items: stretch; }
@media (min-width: 1180px) {
  /* Message column and step column side by side, the way the flow reads:
     the message arrives, then the four things you do with it. */
  .gs-after {
    grid-template-columns: 1fr 190px;
    align-items: start; column-gap: var(--sp-4);
  }
  .gs-lede, .gs-toast, .gs-msg { grid-column: 1; }
  .gs-steps { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}

.gs-lede {
  font-size: .8rem; font-weight: 600; color: var(--blue); line-height: 1.4;
  max-width: 30ch;
}

.gs-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 14px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -18px rgb(15 23 42 / .32);
}
.gs-toast-ic {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--src-wa); color: #fff;
}
.gs-toast-ic svg { width: 18px; height: 18px; }
.gs-toast .grow { flex: 1; min-width: 0; }
.gs-toast b { display: block; font-size: .84rem; color: var(--navy); }
.gs-toast small { display: block; margin-top: 1px; font-size: .76rem; color: var(--muted); }
.gs-toast em { font-style: normal; font-size: .66rem; color: var(--muted); white-space: nowrap; }

.gs-msg {
  padding: 14px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgb(15 23 42 / .3);
}
.gs-msg-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid var(--line-soft);
}
.gs-msg-mk {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--soft);
}
.gs-msg-mk .mark { height: 12px; width: auto; }
.gs-msg-mk .mark .n { fill: var(--navy); }
.gs-msg-mk .mark .k { fill: var(--blue); }
.gs-msg-head b { font-family: Manrope, sans-serif; font-size: .92rem; color: var(--navy); }
.gs-msg-more { margin-left: auto; color: var(--muted); line-height: 1; }
.gs-msg p { margin: 0 0 8px; font-size: .86rem; line-height: 1.5; color: var(--text); }
.gs-msg p.dim { color: var(--muted); }
.gs-msg-btn {
  display: block; text-align: center; margin-top: 12px;
  padding: 10px 14px; border-radius: 9px;
  font-size: .84rem; font-weight: 600;
  background: var(--soft); color: var(--blue);
}

.gs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gs-steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  font-size: .8rem; font-weight: 600; color: var(--navy); line-height: 1.3;
  background: var(--white); border: 1px solid var(--line);
}
.gs-step-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--white));
  color: var(--c);
}
.gs-step-ic svg { width: 16px; height: 16px; }

/* Closing strip ---------------------------------------------- */

.gs-strip {
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-7); padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--tint);
}
@media (min-width: 620px)  { .gs-strip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gs-strip { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.gs-strip > div { display: flex; align-items: center; gap: 12px; }
@media (min-width: 1000px) {
  .gs-strip > div + div { padding-left: var(--sp-5); border-left: 1px solid color-mix(in srgb, var(--blue) 14%, transparent); }
  .gs-strip > div { padding-right: var(--sp-5); }
}
.gs-strip-ic {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, var(--white));
  color: var(--c);
}
.gs-strip-ic svg { width: 20px; height: 20px; }
.gs-strip b { display: block; font-size: .92rem; color: var(--navy); }
.gs-strip small { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); line-height: 1.4; }

/* Closing band ---------------------------------------------- */

.finale-row { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 880px) {
  .finale-row { grid-template-columns: 1fr auto; gap: var(--sp-6); }
}
.finale-copy h2 { max-width: 18ch; }
/* "go cold" is the phrase the whole page argues against, so it is the one
   part of this heading that changes colour. */
.finale .cold { color: #8FA6FF; }
.finale-act { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
@media (min-width: 880px) { .finale-act { justify-content: flex-end; } }
.finale-act .btn { white-space: nowrap; }
/* The note takes the whole row under the two buttons rather than trying to
   sit beside them, where it wrapped to one word per line. */
.finale-note { flex-basis: 100%; }
@media (min-width: 880px) { .finale-note { justify-content: flex-end; } }

.finale-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: var(--sp-3);
  padding: 6px 13px; border-radius: 100px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.08); color: #B9C6FF;
  border: 1px solid rgba(255,255,255,.12);
}
.finale-eyebrow svg { width: 13px; height: 13px; }

/* Four claims the page has already proved, restated once at the end. The
   band was a headline and a button on an empty field; next to the sections
   above it read as an afterthought. */
.finale-grid {
  list-style: none; margin: var(--sp-6) 0 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid; gap: var(--sp-5);
}
@media (min-width: 620px)  { .finale-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .finale-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.finale-grid li { display: grid; gap: 4px; align-content: start; }
.fg-ic {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 6px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: #A8BEFF;
  border: 1px solid rgba(255,255,255,.1);
}
.fg-ic svg { width: 19px; height: 19px; }
.finale-grid b { font-size: .95rem; color: #fff; font-family: Manrope, sans-serif; }
/* Not .dark-band p, which is the band's body colour — these sit a step
   quieter so the four titles read as the list. */
.finale-grid small { font-size: .82rem; color: #93A5C4; line-height: 1.45; }
.finale-note {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; color: #C3C8E6;
}
.finale-note svg { width: 14px; height: 14px; color: #6EE7A8; flex-shrink: 0; }