/* Palette taken off servicenow.com by reading its computed styles, not by eye:
     navy #032D42 and #124D6B, green #62D84E (headline cut #63DF4E), teal #23C2CE,
     body-on-dark #D7E0E6, glow blue #52B8FF. Their atmosphere is one recipe used
     everywhere — a green radial from bottom-left and a blue one from top-right
     over navy — and their panels are a faint white glass on top of it. Pills are
     radius 500px; large panels 32px. Type is ServiceNow Sans, which is licensed,
     so DM Sans stands in (closest of six candidates compared letter by letter)
     and IBM Plex Mono covers their Sans Mono eyebrows. */
  :root{
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --navy:#0a0e33; --navy-2:#242a6b; --ink:#0a0e33; --muted:#5a6274;
    --line:rgba(10,14,51,.13); --bg:#ffffff; --bg-soft:#f6f7fb;
    --blue:#4c00ff; --sky:#4c00ff; --teal:#4c00ff; --periwinkle:#4c00ff;
    --red:#CCFF66; --red-2:#0E5A26; --on-red:#0a0e33; --red-text:#0E5A26;
    /* The brand blue, split by ground: #2F6BFF passes 4.5:1 on white, the soft
       blue is for navy. Orange stays for the primary CTA, the headline
       highlight and the paid step; blue takes the working accents — links,
       labels, ticks, active states and secondary buttons. */
    --blue-brand:#2F6BFF; --blue-soft:#7FA6FF; --blue-deep:#1F4FD1;
    --panel:linear-gradient(-45deg,rgba(10,14,51,.055),rgba(10,14,51,.025));
    --radius:32px; --max:1200px; --accent:#CCFF66;
  }
  /* The signature: green from the bottom-left, blue from the top-right, over
     navy. Fixed to the viewport so it reads as one atmosphere the page moves
     through, the way their sections each carry their own pair. */
  .glow{background:
      radial-gradient(582px 480px at 85px calc(100% + 80px), rgba(204,255,102,.5) 10%, rgba(204,255,102,0) 100%),
      radial-gradient(510px 495px at calc(100% - 46px) 38px, rgba(76,0,255,.5) 10%, rgba(76,0,255,0) 100%)}
  *{box-sizing:border-box;margin:0;padding:0}
  /* No smooth scrolling for in-page jumps: the layer stack is ~3800px tall, so
     animating to any section past it dragged the viewer through every layer
     state on the way. Anchors jump straight there instead. The layer labels
     still animate, because that handler asks for smooth explicitly. */
  html{scroll-behavior:auto}
  /* and the target heading should clear the sticky bar it lands under */
  section[id],div[id]{scroll-margin-top:96px}
  /* DM Sans, chosen by comparing letterforms against the reference rather than
     by impression. The tells: a DOUBLE-STOREY 'a' (which rules out Poppins), a
     'y' with a straight angled descender, a 'G' with a horizontal spur, an 'M'
     whose vertex reaches the baseline, and circular bowls on o/e/c at a wide
     set width. Rendered side by side against the reference's "Maximize Growth",
     DM Sans matched on all five; Figtree was close but narrower, Outfit rounder,
     Plus Jakarta squarer. IBM Plex Mono still carries the data. */
  body{
    font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-weight:400; color:var(--ink); line-height:1.5;
    background:
      radial-gradient(760px 620px at 4% 104%, rgba(204,255,102,.14) 0%, rgba(204,255,102,0) 68%),
      radial-gradient(700px 640px at 98% -4%, rgba(76,0,255,.10) 0%, rgba(76,0,255,0) 66%),
      var(--bg);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
  }
  strong,b{font-weight:700}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  a{color:inherit;text-decoration:none}

  /* ---- nav ---- */
  /* The bar sits ON the photograph rather than above it, so the image runs to
     the top of the page as it does in the reference. */
  /* White strip across the top, with the hero as a separate inset panel
     below it — rather than a transparent bar floating on a full-bleed image. */
  header{position:sticky;top:0;z-index:200;background:var(--navy)}
  header.stuck{box-shadow:0 1px 0 rgba(10,14,51,.18)}
  .nav-wrap{width:100%;padding:0 30px}
  nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;gap:24px}
  nav > .brand{justify-self:start}
  nav > .nav-links{justify-self:center}
  nav > .nav-right{justify-self:end;display:flex;align-items:center;gap:10px}
  .btn-ghost-sm{height:40px;padding:0 20px;font-size:16px;font-weight:500;border-radius:500px;
    color:#fff;border:1px solid transparent;background:transparent}
  .btn-ghost-sm:hover{color:var(--blue-soft)}
  .brand{display:flex;align-items:center}
  /* the reversed wordmark: 665×183, so 30px tall is about 109px wide. The
     kit's floor for navigation is 24px. */
  /* the CRM lockup is 910×183: 34px tall is about 169px wide. It steps down
     where the bar gets tight, and the kit floor for the lockup is 32px only
     where there is room for it. */
  .brand img{height:34px;width:auto;display:block}
  @media (max-width:1060px){ .brand img{height:28px} }
  .nav-links{display:flex;gap:30px}
  .nav-links a{color:#fff;font-size:17px;font-weight:500}
  .nav-links a:hover{color:var(--blue-soft)}
  .spacer{flex:1}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:44px;padding:0 26px;border-radius:500px;font-weight:500;font-size:15px;
    border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--red);color:var(--on-red);font-weight:700;border-color:var(--red)}
  .btn-primary:hover{background:#DDFF8F;border-color:#DDFF8F}
  .btn-ghost{border-color:var(--blue-brand);color:var(--ink);background:transparent}
  .btn-ghost:hover{background:rgba(47,107,255,.10)}
  .btn-lg{height:52px;padding:0 32px;font-size:16px}

  /* ---- hero: full-bleed photograph, content centred over it ---- */
  .hero{padding:0;background:transparent}
  .hero-panel{position:relative;overflow:hidden;isolation:isolate;
    min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding:110px 24px 0;text-align:center}
  /* the reference's own recipe, at panel scale */
  .hero-bg{position:absolute;inset:0;z-index:-2;background:
      radial-gradient(640px 520px at 8% 96%, rgba(204,255,102,.20) 0%, rgba(204,255,102,0) 64%),
      radial-gradient(560px 520px at 94% 6%, rgba(76,0,255,.12) 0%, rgba(76,0,255,0) 62%),
      #ffffff}
  /* Two washes, not one: a navy tint to carry the brand and unify the warm pit
     tones, then a vertical darkening so white type holds contrast at the top
     without flattening the photograph in the middle. */
  /* The gradient is already dark enough to hold white type; this only deepens
     the very top so the headline sits clear of the brightest sweep. */
  .hero-bg::after{content:"";position:absolute;inset:0;background:none}
  .hero-panel .wrap{position:relative;text-align:center;padding-bottom:0;width:100%}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
    font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
    color:var(--blue-soft);background:none;border:0;padding:0;margin-bottom:20px}
  h1{font-size:clamp(38px,4.8vw,56px);line-height:1.1;letter-spacing:-.01em;font-weight:700;color:var(--ink)}
  /* the reference runs one clause of the headline in green and the rest white */
  h1 .grad,h2 .g{color:var(--red-2)}
  .hero-eyebrow{color:var(--blue-brand)}
  /* the four solutions under the home headline, as pills that go somewhere */
  .hero-sols{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px auto 0}
  .hero-sols a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:500px;
    font-size:15.5px;font-weight:600;color:var(--ink);background:#fff;
    border:1px solid rgba(10,14,51,.16);box-shadow:0 2px 8px rgba(10,14,51,.06);
    transition:border-color .18s ease,background .18s ease}
  .hero-sols a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
  .hero-sols a:hover{border-color:var(--red);background:rgba(204,255,102,.14)}
  .lede{font-size:21px;font-weight:300;line-height:1.5;color:var(--muted);margin:22px auto 0;max-width:33em}
  .cta-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;justify-content:center}
  .cta-note{font-size:14px;font-weight:300;color:var(--muted);margin-top:18px}

  /* Uppercase, letter-spaced pills, as in the reference. */
  .btn-hero{height:52px;padding:0 32px;border-radius:500px;font-size:16px;font-weight:500;
    display:inline-flex;align-items:center;gap:10px}
  .btn-accent{background:var(--red);color:var(--on-red);border:1px solid var(--red);font-weight:700}
  .btn-accent:hover{background:#DDFF8F;border-color:#DDFF8F}
  .btn-accent .arrow{display:none}
  .btn-glass{background:transparent;color:var(--ink);border:1px solid var(--blue-brand)}
  .btn-glass:hover{background:rgba(127,166,255,.14)}

  /* ---- the product screenshot, in a browser window ---- */
  .frame{max-width:1060px;margin:58px auto -1px;border-radius:14px 14px 0 0;overflow:hidden;
    background:#fff;box-shadow:0 -10px 60px rgba(4,12,28,.30);
    border:1px solid rgba(10,14,51,.22);border-bottom:0}
  .frame-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f1f0ef;
    border-bottom:1px solid #e2e0dd}
  .frame-bar .dot{width:11px;height:11px;border-radius:50%}
  .frame-bar .dot.r{background:#ff5f57} .frame-bar .dot.y{background:#febc2e} .frame-bar .dot.g{background:#28c840} /* macOS window button, not brand */
  .frame-url{flex:1;text-align:center;font-size:11.5px;color:#6b6660;
    font-family:var(--mono);background:#fff;border-radius:6px;padding:4px 10px;margin:0 44px}
  .frame img{display:block;width:100%;height:auto}

  /* ---- the fanned arc of product cards (kept for reference) ---- */
  .fan{position:relative;margin:52px auto 0;max-width:1000px;height:212px;
    perspective:1400px}
  .fan-card{position:absolute;bottom:0;left:50%;width:150px;
    background:#fff;border-radius:13px;padding:12px;
    box-shadow:0 22px 44px rgba(4,12,28,.36);transform-origin:50% 100%;
    text-align:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
  .fan-card:hover{transform:translate(var(--x),calc(var(--y) - 14px)) rotate(var(--r)) scale(1.04)}
  .fan-card .fc-h{font-size:9.5px;font-weight:700;color:#0f172a;letter-spacing:-.01em}
  .fan-card .fc-s{font-size:8.5px;color:#6b7280;margin-top:2px}
  .fan-card .fc-bar{height:5px;border-radius:3px;background:#eef1f4;margin-top:8px}
  .fan-card .fc-bar i{display:block;height:100%;border-radius:3px}
  .fan-card .fc-row{display:flex;justify-content:space-between;align-items:center;margin-top:7px;
    font-size:8.5px;color:#374151;font-family:var(--mono)}
  .fan-card .fc-num{font-size:17px;font-weight:700;color:#0f172a;margin-top:6px;letter-spacing:-.03em;font-family:var(--mono)}
  .fan-card.dark{background:#0f172a}
  .fan-card.dark .fc-h{color:#fff} .fan-card.dark .fc-s{color:#94a3b8}
  .fan-card.dark .fc-num{color:var(--red)}

  /* ---- sections ---- */
  section{padding:88px 0}
  .soft{background:rgba(10,14,51,.03);border-top:1px solid rgba(10,14,51,.10);
    border-bottom:1px solid rgba(10,14,51,.08)}
  .sec-head{max-width:44em;margin-bottom:44px}
  /* their section eyebrow: tracked uppercase mono in green, above the heading */
  .sec-eyebrow{display:block;font-family:var(--mono);font-size:12.5px;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--blue-brand);margin-bottom:14px}
  h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.01em;line-height:1.1;font-weight:700;color:var(--ink)}
  .sec-head p{color:var(--muted);font-size:20px;font-weight:300;line-height:1.5;margin-top:16px}

  /* ---- bento: mixed sizes and solid colour blocks, no borders ---- */
  .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .b{border-radius:24px;padding:26px;position:relative;overflow:hidden;
     display:flex;flex-direction:column;min-height:196px;
     transition:transform .18s ease, box-shadow .24s ease}
  .b:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(0,0,0,.30)}
  .b-lg{grid-column:span 2;grid-row:span 2}
  .b-w{grid-column:span 2}
  .b-grey{background:var(--panel);border:1px solid rgba(10,14,51,.14);color:var(--ink)}
  /* their one saturated block: solid green carrying navy type */
  .b-lime{background:var(--red);color:var(--on-red);border:1px solid var(--red)}
  .b-dark{background:#0a0e33;border:1px solid #0a0e33;color:#fff}
  .b-navy{background:linear-gradient(160deg,#242a6b,#171c52);border:1px solid rgba(10,14,51,.12);color:#fff}
  .b-white{background:var(--panel);border:1px solid rgba(10,14,51,.14);color:var(--ink)}

  .b .lab{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
    text-transform:uppercase;opacity:.78}
  .b .big{font-size:clamp(38px,4.4vw,58px);font-weight:800;letter-spacing:-.045em;
    line-height:1;margin:10px 0 0}
  .b .say{font-size:15px;font-weight:300;line-height:1.5;margin-top:auto;padding-top:18px}
  .b h3{font-size:21px;font-weight:700;letter-spacing:-.022em;margin-top:4px}
  .b .k{font-size:14.5px;font-weight:300;line-height:1.5;opacity:.82;margin-top:8px}
  .b-w .k{max-width:46em}
  .b-dark .k,.b-navy .k{opacity:.82}

  /* the feature list, tuned for a solid block rather than a bordered card */
  .b .feat{list-style:none;margin-top:16px;padding-top:15px;display:grid;gap:7px;
    border-top:1px solid rgba(0,0,0,.10)}
  .b-dark .feat,.b-navy .feat{border-top-color:rgba(255,255,255,.18)}
  .b .feat li{font-size:13.5px;font-weight:300;display:flex;gap:9px;align-items:flex-start;opacity:.88}
  /* On the dark blocks .82 of white lands around #b6bcc6 — legible on grey, thin
     on near-black. These carry full strength instead. */
  .b-dark .feat li,.b-navy .feat li{opacity:1;color:rgba(255,255,255,.94)}
  .b-lime .feat li{opacity:1;color:rgba(10,14,51,.88)}
  .b-lime .feat{border-top-color:rgba(10,14,51,.18)}
  .b-lime .feat li::before{background:rgba(10,14,51,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}
  .b .feat li::before{content:"";width:14px;height:14px;flex:none;margin-top:3px;border-radius:50%;
    background:rgba(10,14,51,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}
  .b-dark .feat li::before,.b-navy .feat li::before{
    background:rgba(10,14,51,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}

  /* Photo tiles for the wide cards. Distinct from .b-photo, which is the tall
     one with an inset panel: these carry their text directly on the image, so
     they need a scrim that is heaviest where the words sit. */
  /* Photo tiles: the copy sits in a white card over the picture rather than
     directly on it, so the photograph stays bright and the text is ink on white
     instead of white fighting a scrim. */
  .b-img{color:#fff;justify-content:flex-end;min-height:250px}
  .b-img img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* Only enough tint to hold the small uppercase tag at the top. */
  .b-img::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(8,17,35,.46) 0%,rgba(8,17,35,.10) 42%,rgba(8,17,35,.16) 100%)}
  .b-img > *{position:relative;z-index:2}
  /* The tag rides on its own chip. Measured white-on-photo at 2.6:1 over bright
     sky; the chip guarantees the contrast without dimming the photograph. */
  .b-img .tag,.b-photo .tag{font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    font-size:12px;margin-bottom:auto;align-self:flex-start;
    background:rgba(8,17,35,.62);padding:6px 11px;border-radius:999px;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

  /* the inset panel on the photo card, as in the reference */
  .b-photo{background:#1b3b6f;color:#fff;justify-content:flex-end}
  .b-photo img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
  .b-photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(12,26,50,.30),rgba(12,26,50,.86))}
  /* --ink is white on this theme; the white cards need their own dark value */
  .b-photo .inset,.b-img .inset{position:relative;z-index:2;background:#fff;color:var(--on-red);
    border-radius:16px;padding:18px 20px}
  .b-photo .inset .big{color:var(--on-red);font-size:44px}
  .b-photo .inset .k,.b-img .inset .k{opacity:.78;margin-top:4px;color:var(--on-red)}
  .b-img .inset h3{margin-top:0;color:var(--on-red)}
  .b-img .inset .k{max-width:44em}

  /* Small icon badge, as in the reference. Sits clear of the copy, top right. */
  .b .ico{position:absolute;top:20px;right:20px;z-index:3;width:40px;height:40px;
    border-radius:13px;display:grid;place-items:center;background:#fff;color:#0e1729;
    box-shadow:0 4px 14px rgba(9,17,33,.16)}
  .b .ico svg{width:20px;height:20px;display:block}
  .b-dark .ico{background:rgba(255,255,255,.15);color:#fff;box-shadow:none}
  .b-lime .ico{background:rgba(16,35,26,.12);color:#10231a;box-shadow:none}
  .b-photo .tag{position:relative;z-index:2}

  .mono{font-family:var(--mono);font-weight:600;letter-spacing:-.02em}

  /* Restored: these belonged to the old hero and are still used by the Field
     app section's mock. Rewriting the hero block took them out with it. */
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .hero-art{background:var(--panel);border:1px solid rgba(10,14,51,.14);border-radius:20px;padding:18px;
    box-shadow:0 20px 46px rgba(15,23,42,.10)}
  .art-rows{display:grid;gap:9px}
  .art-row{display:flex;align-items:center;gap:11px;border:1px solid rgba(10,14,51,.14);
    border-radius:11px;padding:11px 13px}
  .art-row .dot{width:9px;height:9px;border-radius:50%;flex:none}
  .art-row b{font-size:13.5px;font-weight:600;font-family:var(--mono);letter-spacing:-.02em}
  .art-row span{font-size:13px;color:var(--muted);margin-left:auto;font-family:var(--mono)}
  .grid{display:grid;gap:20px}
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .card{background:var(--panel);border:1px solid rgba(10,14,51,.14);border-radius:24px;padding:26px}
  .feat{list-style:none;display:grid;gap:8px}
  .feat li{font-size:14px;font-weight:300;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
  .feat li::before{content:"";width:15px;height:15px;flex:none;margin-top:4px;border-radius:50%;
    background:rgba(47,107,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6BFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}

  /* The chain the CRM actually models, as one strip. */
  .flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
    border:1px solid rgba(10,14,51,.14);border-radius:24px;overflow:hidden;
    background:var(--panel);margin-bottom:26px}
  .flow-step{flex:1 1 0;min-width:150px;padding:20px 18px;border-right:1px solid rgba(10,14,51,.14);position:relative}
  .flow-step:last-child{border-right:0}
  .flow-step .n{font-family:var(--mono);font-size:11px;color:rgba(10,14,51,.55)}
  .flow-step h4{font-size:16px;font-weight:700;letter-spacing:-.015em;margin-top:6px}
  .flow-step p{font-size:13px;font-weight:300;color:var(--muted);margin-top:5px;line-height:1.5}
  /* the paid step is the one the reference would paint green */
  .flow-step.paid{background:var(--red)}
  .flow-step.paid .n{color:rgba(10,14,51,.62)}
  .flow-step.paid h4{color:var(--on-red)}
  .flow-step.paid p{color:rgba(10,14,51,.82)}

  .featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .featcol{background:var(--panel);border:1px solid rgba(10,14,51,.14);border-radius:24px;padding:24px}
  .featcol h3{font-size:17px;font-weight:700;letter-spacing:-.015em}
  .featcol p.k{font-size:13.5px;font-weight:300;color:var(--muted);margin-top:6px;line-height:1.5}
  .featcol ul{list-style:none;margin-top:15px;padding-top:14px;border-top:1px solid rgba(10,14,51,.14);display:grid;gap:8px}
  .featcol li{font-size:14px;font-weight:300;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
  .featcol li::before{content:"";width:15px;height:15px;flex:none;margin-top:4px;border-radius:50%;
    background:rgba(47,107,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6BFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}


  /* ---- the layer stack ------------------------------------------------
     An isometric stack of plates, one per module, with Base CRM at the
     bottom because that is literally the arrangement: every tenant runs the
     core and the modules sit on top of it. Pick a layer and its plate rises
     out of the stack; the ones above it fade so they cannot veil its
     diagram. It used to be driven by scroll position, which held the page
     hostage for 420vh — see site.js. Built with CSS 3D transforms; no
     animation library. */
  .layers{position:relative;margin-top:38px;
    width:min(1400px, calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
  .layers-scroller{position:relative;padding-bottom:28px}
  /* top clears the 76px nav and then some, so the pinned heading has a gap
     above it rather than sitting flush under the bar */
  .layers-stage{display:grid;grid-template-rows:auto auto;gap:26px}
  /* the heading rides along with the stack instead of scrolling away above it.
     It shares one pinned screen with the diagram, so it runs tighter than the
     section heads that have a whole screen to themselves. */
  /* the diagram breaks out wider than the page's text column so the bigger
     labels and captions do not squeeze the stack; the heading is pulled back
     in so it still lines up with every other section heading */
  .lay-head{margin-bottom:0;width:100%;max-width:1152px;margin-left:auto;margin-right:auto}
  .lay-head .sec-eyebrow{margin-bottom:8px}
  .lay-head h2{font-size:clamp(26px,2.7vw,36px)}
  .lay-head p{font-size:17px;line-height:1.45;margin-top:10px;max-width:48em}
  /* Tabs | the selected tab's description | the stack. The description sits
     right beside the tab it belongs to, joined to it like a folder tab, so the
     selection and what it means are read together; the stack is the picture
     of it, with a name tag on the raised plate. */
  .lay-row{display:grid;grid-template-columns:290px minmax(0,350px) minmax(0,1fr);align-items:center;
    gap:0;min-height:460px;width:100%;max-width:1152px;margin:0 auto}

  .lay-labels{display:grid;gap:8px;align-self:center;position:relative;z-index:2}
  .lay-label{font-family:inherit;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;
    align-items:baseline;text-align:left;cursor:pointer;position:relative;
    padding:14px 18px 14px 16px;border-radius:16px 0 0 16px;border:1px solid transparent;border-right:0;
    background:none;color:rgba(10,14,51,.55);transition:background .25s ease,color .25s ease,box-shadow .25s ease}
  .lay-label .ll-n{grid-row:span 2;font-family:var(--mono);font-size:13px;font-weight:600;
    color:rgba(10,14,51,.38);letter-spacing:.04em}
  .lay-label .ll-t{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
  .lay-label .ll-s{font-size:14px;font-weight:400;line-height:1.35;color:rgba(10,14,51,.5)}
  .lay-label:hover{color:var(--ink);background:rgba(10,14,51,.035)}
  .lay-label:focus-visible{outline:2px solid var(--blue-brand);outline-offset:-2px}
  .lay-label.on{color:var(--ink);background:#fff;border-color:rgba(10,14,51,.12);
    box-shadow:-10px 8px 24px rgba(10,14,51,.07)}
  .lay-label.on::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;
    background:var(--red)}
  /* the tab runs one pixel into the panel, covering its border, so the two read as one piece */
  .lay-label.on::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:2px;background:#fff}
  .lay-label.on .ll-n{color:var(--blue-brand)}
  .lay-label.on .ll-s{color:var(--muted)}

  .lay-stage-mid{display:grid;place-items:center}
  /* --zs scales the layer separation; the raised top plate has to clear the
     heading that now sits pinned above it, hence the drop as well. The stack is
     sized in tiers by viewport height: the heading and the stack share one
     pinned screen, so on a short laptop both have to give ground. */
  .lay-stack{position:relative;width:400px;height:272px;--zs:.95;transform-style:preserve-3d;
    transform:translateY(40px) rotateX(56deg) rotateZ(-42deg)}
  @media (max-width:1240px){
    .lay-row{grid-template-columns:260px minmax(0,320px) minmax(0,1fr)}
    .lay-stack{width:340px;height:232px;--zs:.85;
      transform:translateY(36px) rotateX(56deg) rotateZ(-42deg)}
  }
  @media (max-width:1120px){
    .lay-head p{font-size:16px}
    .lay-row{grid-template-columns:240px minmax(0,1fr) 310px;min-height:440px}
    .lay-label .ll-t{font-size:21px;white-space:normal}
    .lay-stack{width:250px;height:170px;--zs:.65;
      transform:translateY(30px) rotateX(56deg) rotateZ(-42deg)}
  }
  @media (max-width:1010px){
    .lay-row{grid-template-columns:215px minmax(0,1fr) 260px}
    .lay-label .ll-t{font-size:20px}
    .lay-caption{padding:24px 22px}
    .lay-stack{width:210px;height:145px;--zs:.55;
      transform:translateY(26px) rotateX(56deg) rotateZ(-42deg)}
  }
  .plate{position:absolute;inset:0;border-radius:26px;transform-style:preserve-3d;
    border:1px solid rgba(20,80,180,.34);background:rgba(20,80,180,.14);
    box-shadow:0 18px 40px rgba(0,0,0,.40);
    transform:translateZ(calc(var(--z) * var(--zs, 1)));
    transition:transform .55s cubic-bezier(.22,.7,.25,1), background .45s ease,
               border-color .45s ease, box-shadow .45s ease, opacity .45s ease;
    opacity:.88}
  /* the tint has to sit OVER the glass fill, not replace it: setting the
     background shorthand here dropped the white base and left the active plate
     darker than the ghosts behind it */
  .plate.on{background-color:#1450b4;
    background-image:linear-gradient(150deg,#1a5cc8,#0f4098);
    border-color:#0f4098;
    box-shadow:0 26px 70px rgba(15,64,152,.42);
    transform:translateZ(calc(var(--z) * var(--zs, 1) + 40px));opacity:1}
  /* Each layer draws its own diagram, so the plates read as four different
     things stacked up rather than one slab repeated four times. */
  .plate .dia{position:absolute;inset:26px;width:calc(100% - 52px);height:calc(100% - 52px);
    color:rgba(12,50,120,.72);opacity:.6;
    transition:color .45s ease, opacity .45s ease}
  .plate.on .dia{color:#ffffff;opacity:1}
  .plate.above{opacity:.24}
  .plate.above .dia{opacity:.3}
  .plate.base{background:rgba(10,47,122,.16);border-color:rgba(10,47,122,.45)}
  /* The foundation plate goes solid green when it is the one being talked
     about, which is the whole argument of the section. */
  .plate.base.on{background-color:#0a2f7a;
    background-image:linear-gradient(150deg,#0d3a8a,#082566);
    border-color:#0a2f7a;box-shadow:0 30px 70px rgba(10,47,122,.46)}
  .plate{cursor:pointer}
  .plate:hover:not(.on){opacity:1;border-color:rgba(20,80,180,.62)}
  .plate:hover:not(.on) .dia{opacity:.85}
  .plate.base .dia{color:rgba(10,14,51,.55)}
  .plate.base.on .dia{color:rgba(255,255,255,.92)}

  .lay-caption{align-self:stretch;display:flex;align-items:center;background:#fff;
    border:1px solid rgba(10,14,51,.12);border-radius:0 20px 20px 20px;padding:22px 24px 20px;
    box-shadow:0 18px 44px rgba(10,14,51,.08);position:relative;z-index:1}
  .lay-cap{display:none}
  .lay-cap.on{display:block}
  .lay-cap .cap-n{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
    text-transform:uppercase;color:var(--blue-brand);margin-bottom:8px}
  .lay-cap h4{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
  .lay-cap p{font-size:15px;color:var(--muted);margin-top:8px;line-height:1.5}
  .lay-cap ul{list-style:none;margin-top:12px;display:grid;gap:6px}
  .lay-cap li{font-size:14.5px;color:var(--ink);line-height:1.45;position:relative;padding-left:24px}
  .lay-cap li::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;border-radius:50%;
    background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e33' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}

  /* the name tag on the raised plate (positioned by site.js) */
  .lay-stage-mid{position:relative}
  .lay-tag{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;
    padding:6px 12px;border-radius:500px;background:var(--navy);color:#fff;
    font-size:13.5px;font-weight:700;white-space:nowrap;box-shadow:0 10px 24px rgba(10,14,51,.25);
    transition:opacity .3s ease}
  .lay-tag::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
    background:var(--red);margin-right:9px;vertical-align:1px}
  .lay-tag.on{opacity:1}

  @media (max-width:920px){
    .layers{overflow-x:clip}
    .layers-scroller{height:auto}
    .layers-stage{position:static;grid-template-rows:none;height:auto;gap:24px}
    .lay-row{grid-template-columns:1fr;height:auto;gap:0;min-height:0}
    .lay-head{margin-bottom:4px}
    /* tabs wrap as a row of pills above the description */
    .lay-labels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
    .lay-label{border-radius:14px;border:1px solid rgba(10,14,51,.14);padding:11px 13px}
    .lay-label .ll-t{font-size:18px;white-space:normal}
    .lay-label .ll-s{display:none}
    .lay-label .ll-n{grid-row:auto}
    .lay-label.on{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:none}
    .lay-label.on .ll-n{color:var(--red)}
    .lay-label.on::before,.lay-label.on::after{display:none}
    .lay-caption{border-radius:20px;padding:22px 20px}
    .lay-cap h4{font-size:24px}
    .lay-stage-mid{margin-top:30px}
    .lay-stack{width:min(310px,82vw);height:min(210px,56vw);--zs:.75}
    .lay-tag{display:none}
  }

  .steps{counter-reset:s}
  .step{position:relative;padding-left:60px}
  .step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:2px;
    width:38px;height:38px;border-radius:500px;background:var(--red);color:var(--on-red);
    display:grid;place-items:center;font-weight:700;font-size:16px}
  .step h3{font-size:17.5px;font-weight:700}
  .step p{color:var(--muted);font-weight:300;font-size:15px;margin-top:6px}

  /* ---- closing CTA ---- */
  .final{position:relative;color:#fff;text-align:center;padding:96px 0;overflow:hidden;
    background-color:#0a0e33;background-image:
      radial-gradient(582px 480px at 85px calc(100% + 80px), rgba(204,255,102,.5) 10%, rgba(204,255,102,0) 100%),
      radial-gradient(510px 495px at calc(100% - 46px) 38px, rgba(76,0,255,.5) 10%, rgba(76,0,255,0) 100%),
      linear-gradient(160deg,#121748,#0a0e33)}
  .final img{height:48px;width:auto;margin-bottom:22px}
  .final h2{color:#fff}
  .final p{color:#d7dcec;font-size:20px;font-weight:300;margin-top:16px}
  .final .btn-primary{background:var(--red);color:var(--on-red)}
  .final .btn-primary:hover{background:#DDFF8F}
  .final .btn-ghost{background:transparent;border-color:var(--blue-soft);color:#fff}
  .final .sec-eyebrow{color:var(--blue-soft)}
  .final .btn-ghost:hover{background:rgba(127,166,255,.14)}


  @media (max-width:920px){
    .hero{padding:0}
    .hero-panel{padding:92px 14px 0}
    .nav-wrap{padding:0 18px}
    nav{height:64px;gap:12px;grid-template-columns:auto 1fr auto}
    .brand img{height:28px}
    .bento{grid-template-columns:1fr}
    .b-lg,.b-w{grid-column:span 1;grid-row:span 1}
    .cols-2{grid-template-columns:1fr}
    .featgrid{grid-template-columns:1fr}
    .flow-step{border-right:0;border-bottom:1px solid var(--line)}
    .nav-links{display:none}
    /* .cols-3 was never collapsed, so the three "how it works" steps kept a
       three-column track and pushed the page sideways at phone widths. */
    .cols-3{grid-template-columns:1fr}
    .flow-step{border-bottom-color:rgba(10,14,51,.14)}
    section{padding:64px 0}
  }
  @media (max-width:560px){
    /* Login + Get Started together overflowed the bar; the CTA lands on the
       same sign-in screen, so the text button gives way first. */
    .nav-right .btn-ghost-sm{display:none}
    .nav-wrap{padding:0 14px}
  }

  /* The strip never actually stacked. min-width:150px let five steps sit in a
     row well below the breakpoint that switched their dividers from the right
     to the bottom, so the borders said "list" while the layout said "strip" —
     and a six-step flow stranded its last step alone on a second row. Below
     the width where six still read across, it becomes a real vertical list. */
  @media (max-width:1000px){
    .flow{display:block}
    .flow-step{border-right:0;border-bottom:1px solid rgba(10,14,51,.14)}
    .flow-step:last-child{border-bottom:0}
  }

  /* Between the width where the links are hidden (920px) and about 1120px the
     bar was wider than the window and the whole page scrolled sideways — the
     brand, six links and two buttons simply did not fit, and nothing gave. It
     predates the 17px links; those widened it from 53px of overflow to 101px.
     The gaps close first, then the type steps back, so the links stay as large
     as the window can actually hold. */
  @media (max-width:1180px){
    nav{gap:16px}
    .nav-links{gap:20px}
  }
  @media (max-width:1060px){
    .nav-links{gap:13px}
    .nav-links a,.menu-btn{font-size:15.5px}
  }
  /* The last sliver before the links are hidden at 920px. */
  @media (max-width:1000px){
    .nav-links{gap:7px}
    .nav-links a,.menu-btn{font-size:14.5px}
  }


  /* ---- the platform diagram ------------------------------------------
     What a request passes through (security), what shapes the screen
     (metadata), and where it lands (surfaces). Three columns of stacked
     bands; on a phone the columns stack and the arrows point down. */
  .arch{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr;gap:12px;align-items:stretch;margin:6px 0 30px}
  .arch-col{background:#fff;border:1px solid rgba(10,14,51,.14);border-radius:24px;padding:20px 20px 16px;display:flex;flex-direction:column}
  .arch-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-brand);margin-bottom:6px;line-height:1.5}
  .arch-col > p{font-size:14px;font-weight:300;color:var(--muted);line-height:1.5;margin-bottom:12px}
  .arch-band{border-radius:12px;padding:10px 13px;font-size:14px;font-weight:500;color:var(--ink);
    background:rgba(20,80,180,.10);border:1px solid rgba(20,80,180,.22);margin-top:7px}
  .arch-band small{display:block;font-size:12.5px;font-weight:300;color:var(--muted);margin-top:2px;line-height:1.45}
  .security .arch-band{background:rgba(10,14,51,.055);border-color:rgba(10,14,51,.16)}
  .security .arch-band.deep{background:var(--navy);border-color:var(--navy);color:#fff}
  .security .arch-band.deep small{color:rgba(255,255,255,.74)}
  .surfaces .arch-band{background:rgba(204,255,102,.10);border-color:rgba(204,255,102,.32)}
  .arch-arrow{display:grid;place-items:center;color:rgba(10,14,51,.38);font-size:26px;line-height:1}
  .arch-arrow::before{content:"\2192"}
  .arch-foot{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
    color:rgba(10,14,51,.5);margin-top:auto;padding-top:16px}
  @media (max-width:920px){
    .arch{grid-template-columns:1fr;gap:6px}
    .arch-arrow{height:30px}
    .arch-arrow::before{content:"\2193"}
  }

  /* ---- clients marquee -------------------------------------------------
     A single track, duplicated once in the markup, translated by exactly half
     its width so the loop has no seam. Pauses on hover; stands still and
     wraps when the visitor asks for reduced motion. */
  .clients{padding:30px 0 28px;background:rgba(10,14,51,.035);
    border-top:1px solid rgba(10,14,51,.10);border-bottom:1px solid rgba(10,14,51,.10)}
  .clients-lede{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(10,14,51,.5);text-align:center;margin-bottom:22px}
  .marquee{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{display:flex;align-items:center;gap:56px;width:max-content;padding:0 28px;
    animation:marquee 42s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes marquee{to{transform:translateX(-50%)}}
  .logo-tile{display:inline-flex;align-items:center;height:52px;white-space:nowrap;
    font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(10,14,51,.45);padding:0 22px;border:1px dashed rgba(10,14,51,.22);border-radius:14px}
  .logo-tile img{height:32px;width:auto;display:block;filter:grayscale(1);opacity:.7}
  .logo-tile:has(img){border:0;padding:0}
  @media (prefers-reduced-motion:reduce){
    .marquee{mask-image:none;-webkit-mask-image:none}
    .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:18px 28px}
    .marquee-track > :nth-child(n+9){display:none}   /* the duplicate half */
  }

  /* ---- testimonials ---- */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .quote{margin:0;background:#fff;border:1px solid rgba(10,14,51,.14);border-radius:24px;
    padding:28px 26px 24px;display:flex;flex-direction:column;gap:18px}
  .quote blockquote{margin:0;font-size:17px;font-weight:300;line-height:1.55;color:var(--ink)}
  .quote blockquote::before{content:"\201C";display:block;font-size:44px;line-height:.6;
    color:var(--blue-brand);margin-bottom:12px;font-weight:700}
  .quote figcaption{margin-top:auto;padding-top:16px;border-top:1px solid rgba(10,14,51,.12)}
  .quote figcaption strong{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
  .quote figcaption span{font-size:13.5px;color:var(--muted);font-weight:300}

  /* ---- about ---- */
  .about-split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .about-split img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;
    border:1px solid rgba(10,14,51,.14)}
  .sec-head p + p{margin-top:14px}
  .team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .team-card{background:#fff;border:1px solid rgba(10,14,51,.14);border-radius:24px;padding:24px}
  .team-photo{display:block;width:88px;height:88px;border-radius:50%;margin-bottom:16px;
    background:linear-gradient(150deg,#1a5cc8,#0f4098)}
  .team-card h3{font-size:17px;font-weight:700;letter-spacing:-.015em}
  .team-card .role{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--blue-brand);margin-top:4px}
  .team-card p{font-size:14px;font-weight:300;color:var(--muted);line-height:1.5;margin-top:10px}

  @media (max-width:920px){
    .quotes,.team{grid-template-columns:1fr}
    .about-split{grid-template-columns:1fr;gap:26px}
  }

  .final-human{margin-top:14px;font-size:15.5px;color:rgba(255,255,255,.82);font-weight:300}
  .final-human a{color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:3px}


  /* ---- the solution map ---------------------------------------------
     A one-page architecture picture in HTML: people and intake across the
     top, a channels band, the platform box with three panels over a navy
     foundation, a runtime band, and connectors down the right. Grid, so it
     stacks on a phone and the text stays text. */
  .sol-map{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:16px;align-items:start;margin-top:8px}
  .sm-main{display:grid;gap:12px;min-width:0}
  .sm-people{display:flex;justify-content:center;align-items:flex-end;gap:34px;flex-wrap:wrap;padding:4px 0 6px}
  .sm-person,.sm-intake{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink);text-align:center}
  .sm-person svg,.sm-intake svg{width:50px;height:50px;padding:12px;border-radius:50%;color:#fff;background:linear-gradient(150deg,#1a5cc8,#0f4098)}
  .sm-intake{margin-left:26px;padding-left:34px;border-left:1px dashed rgba(10,14,51,.25)}
  .sm-intake svg{background:none;color:var(--blue-brand);border:1.5px solid var(--blue-brand);padding:11px}
  .sm-intake small,.sm-circle small,.sm-conn small,.sm-band-title small,.sm-panel h4 small{display:block;font-size:11.5px;font-weight:300;color:var(--muted);line-height:1.35}
  .sm-band{border:1px solid rgba(10,14,51,.14);border-radius:18px;padding:12px 16px;background:#fff;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .sm-band-title{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600;flex:none;min-width:88px}
  .sm-band-title small{text-transform:none;letter-spacing:0;font-family:var(--font, inherit)}
  .sm-chips{display:flex;flex-wrap:wrap;gap:7px}
  .sm-chip{display:inline-block;padding:6px 11px;border-radius:9px;font-size:13px;font-weight:500;line-height:1.25;
    background:rgba(47,107,255,.10);border:1px solid rgba(47,107,255,.22);color:var(--ink);white-space:nowrap}
  .sm-chip.grey{background:rgba(10,14,51,.06);border-color:rgba(10,14,51,.14)}
  .sm-chip.navy{background:var(--navy);border-color:var(--navy);color:#fff}
  .sm-chip.orange{background:rgba(204,255,102,.12);border-color:rgba(204,255,102,.36)}
  .sm-chip.white{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
  .sm-platform{border:1px solid rgba(47,107,255,.28);border-radius:22px;padding:16px;background:rgba(47,107,255,.05)}
  .sm-platform-title{display:flex;justify-content:center;margin:2px 0 14px}
  .sm-main > .sm-platform-title{margin:0 0 4px}
  .sm-platform-title img{height:30px;width:auto;background:var(--navy);padding:9px 16px;border-radius:12px;box-sizing:content-box}
  .sm-panels{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.15fr) minmax(0,1.15fr);gap:12px;align-items:stretch}
  .sm-panel{background:#fff;border:1px solid rgba(10,14,51,.14);border-radius:16px;padding:14px 14px 12px;min-width:0}
  .sm-panel h4{font-size:15px;font-weight:700;text-align:center;margin:0 0 10px;letter-spacing:-.01em}
  .sm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 0;border-top:1px solid rgba(10,14,51,.08)}
  .sm-row:first-of-type{border-top:0}
  .sm-row b{flex:0 0 118px;font-size:12.5px;font-weight:700;color:var(--blue-brand);font-family:var(--mono);letter-spacing:.02em;line-height:1.3}
  .sm-crm .sm-chips,.sm-auto .sm-chips{justify-content:center}
  .sm-foundation{margin-top:12px;background:var(--navy);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .sm-foundation .sm-band-title{color:#fff}
  .sm-foundation .sm-band-title small{color:rgba(255,255,255,.7)}
  .sm-layer-label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-brand);font-weight:600;margin:0 0 8px 4px}
  .sm-data{margin-top:12px;background:#fff;border:1px solid rgba(47,107,255,.3);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .sm-chip.data{background:rgba(47,107,255,.08);border-color:rgba(47,107,255,.3);white-space:normal}
  /* the stack: each layer is a full-width band; the one beneath is the one it
     sits on, and the band colours keep the three kinds of thing apart */
  .sm-layer{background:#fff;border:1px solid rgba(10,14,51,.14);border-radius:16px;padding:12px 14px 10px;margin-top:10px}
  .sm-layer:first-of-type{margin-top:0}
  .sm-layer-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
  .sm-layer-head h4{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em}
  .sm-layer-head small{font-size:12px;font-weight:300;color:var(--muted)}
  .sm-l-solutions{border-color:rgba(47,107,255,.32)}
  .sm-l-crm{background:rgba(10,14,51,.04);border-color:rgba(10,14,51,.2)}
  .sm-l-auto{background:rgba(204,255,102,.06);border-color:rgba(204,255,102,.36)}
  .sm-l-platform{background:rgba(47,107,255,.05);border-color:rgba(47,107,255,.28)}
  .sm-l-platform .sm-row b{color:var(--ink)}
  /* platform-layer rows carry their heading above the chips, not beside them */
  .sm-sub{padding:9px 0 5px;border-top:1px solid rgba(10,14,51,.08)}
  .sm-sub:first-of-type{border-top:0;padding-top:2px}
  .sm-sub h5{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0 0 7px}
  .sm-chip.service{background:var(--navy);border-color:var(--navy);color:#fff}
  .sm-chip.data{background:rgba(47,107,255,.10);border-color:rgba(47,107,255,.32);white-space:normal}
  .sm-chip.orange{white-space:normal}
  .sm-runtime .sm-circles{display:flex;gap:14px;flex-wrap:wrap;flex:1;justify-content:center}
  .sm-circle{width:104px;height:104px;border-radius:50%;border:1.5px solid rgba(10,14,51,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:12.5px;font-weight:600;color:var(--ink);text-align:center;padding:8px;background:#fff}
  .sm-circle svg{width:20px;height:20px;color:var(--blue-brand)}
  .sm-side{display:grid;gap:10px;align-content:center;height:100%;padding-top:96px}
  .sm-conn{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(10,14,51,.14);border-radius:14px;padding:9px 11px 9px 10px;font-size:13px;font-weight:600;color:var(--ink);position:relative}
  .sm-conn::before{content:"";position:absolute;left:-16px;top:50%;width:16px;height:1px;background:rgba(10,14,51,.28)}
  .sm-conn svg{width:30px;height:30px;flex:none;color:var(--blue-brand);background:rgba(47,107,255,.10);border-radius:9px;padding:6px}
  .sm-conn small{font-weight:300}
  @media (max-width:1100px){
    .sol-map{grid-template-columns:1fr}
    .sm-side{grid-template-columns:repeat(3,1fr);padding-top:0;height:auto}
    .sm-conn::before{display:none}
    .sm-panels{grid-template-columns:1fr 1fr}
    .sm-panel:first-child{grid-column:1 / -1}
  }
  @media (max-width:640px){
    .sm-side{grid-template-columns:1fr}
    .sm-panels{grid-template-columns:1fr}
    .sm-row b{flex-basis:100%}
    .sm-intake{margin-left:0;padding-left:0;border-left:0}
    .sm-people{gap:18px}
    .sm-band,.sm-foundation,.sm-data{flex-direction:column;align-items:flex-start;gap:10px}
    .sm-chip{white-space:normal}
    .sm-runtime .sm-circles{width:100%;justify-content:space-around;gap:10px}
    .sm-circle{width:96px;height:96px}
  }

  /* ================= Solutions ================= */

  /* Nav dropdown. The reference animates its own menus at 0.2s ease, so this
     matches rather than inventing a different curve. */
  .has-menu{position:relative;display:inline-flex;align-items:center}
  .has-menu.open > .menu-btn::after{transform:rotate(225deg);margin-top:2px}
  /* the trigger is a button, so it opens on click and reads as a control */
  .menu-btn{font:inherit;font-size:17px;font-weight:500;color:#fff;background:none;
    border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .menu-btn:hover,.has-menu.open > .menu-btn{color:var(--blue-soft)}
  .menu-btn::after{content:"";width:8px;height:8px;margin-top:-3px;flex:none;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg);transition:transform .2s ease}
  .menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);
    min-width:300px;padding-top:14px;display:none;z-index:210}
  .has-menu.open .menu{display:block}
  /* a span wrapping block-level links: without display:block the inline box
     never boxes around them and the panel paints no background at all */
  .menu-inner{display:block;background:#fff;border:1px solid rgba(10,14,51,.14);border-radius:20px;
    padding:10px;box-shadow:0 30px 70px rgba(10,14,51,.18);
    animation:menuIn .2s ease 0s 1 normal forwards}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .menu a{display:block;padding:11px 13px;border-radius:14px;font-size:14.5px;
    font-weight:500;color:var(--ink);white-space:normal}
  .menu a:hover{background:rgba(47,107,255,.10);color:var(--blue-brand)}
  .menu a small{display:block;font-size:12.5px;font-weight:300;color:var(--muted);margin-top:3px}
  .menu a:hover small{color:var(--muted)}

  /* A shorter hero for the solution pages: no browser frame under it. */
  .hero-panel.compact{padding:92px 24px 88px}
  .hero-panel.compact .wrap{max-width:900px}

  .chip-soon{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
    font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-red);
    background:var(--red);padding:5px 11px;border-radius:500px;font-weight:600;
    vertical-align:middle;margin-left:12px}

  /* The reference's feature row: a green line icon, a bold title, light copy,
     and no card around any of it. */
  .iconrow{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
  .iconrow .ic{width:34px;height:34px;color:var(--blue-brand);margin-bottom:16px;display:block}
  .iconrow h3{font-size:19px;font-weight:700;letter-spacing:-.015em}
  .iconrow p{font-size:14.5px;font-weight:300;color:var(--muted);margin-top:8px;line-height:1.55}


  /* What the module inherits from the core, rather than reimplements. */


  @media (max-width:920px){
    .iconrow{grid-template-columns:1fr;gap:28px}
    .menu{position:static;transform:none;min-width:0;padding-top:8px}
  }


  .lay-cap .cap-link{display:inline-block;margin-top:16px;font-size:14.5px;
    font-weight:500;color:var(--blue-brand)}
  .lay-cap .cap-link:hover{color:var(--blue-deep)}


  /* ---- bento, rebuilt to the resources-grid reference: one tall photo card,
     a wide dark card, one bright gradient card, one dark card. Every card
     carries a mono eyebrow, a heading and an outlined pill. ---- */
  .bento2{display:grid;grid-template-columns:39fr 61fr;gap:18px;align-items:stretch}
  .bento2-right{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:18px}
  .bcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;
    border-radius:24px;padding:30px;overflow:hidden;min-height:240px;
    transition:transform .18s ease,box-shadow .22s ease}
  .bcard:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(10,14,51,.16)}
  .bcard .eb{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;margin-bottom:12px}
  .bcard h3{font-size:clamp(20px,1.9vw,27px);font-weight:700;letter-spacing:-.015em;
    line-height:1.15;max-width:22em}
  .bcard p{font-size:15px;font-weight:300;line-height:1.5;margin-top:10px;max-width:36em}
  .bcard .pill{margin-top:auto;padding:11px 20px;border-radius:500px;font-size:14px;
    font-weight:600;border:1.6px solid currentColor;transition:background .2s ease,color .2s ease}
  /* the tall photo card */
  .bcard-photo{grid-row:span 1;min-height:520px;justify-content:flex-end;color:#fff}
  .bcard-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
  .bcard-photo::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(10,14,51,.18) 30%,rgba(10,14,51,.82) 82%)}
  .bcard-photo .pill{padding-top:22px;margin-top:22px;padding:11px 20px}
  .bcard-photo:hover .pill{background:#fff;color:var(--navy)}
  /* dark cards */
  .bcard-dark{color:#fff;background-color:#0a0e33;
    background-image:linear-gradient(115deg,#0a0e33 30%,#232a78 100%)}
  .bcard-dark .eb{color:#ff9838}
  .bcard-dark .pill{margin-top:28px}
  .bcard-dark:hover .pill{background:#fff;color:var(--navy)}
  .bcard-wide{grid-column:span 2}
  /* the bright gradient card, navy type */
  .bcard-bright{color:var(--navy);background-color:#ff9838;
    background-image:linear-gradient(115deg,#B8F24A 0%,#D9FF85 100%)}
  .bcard-bright .pill{margin-top:28px}
  .bcard-bright:hover .pill{background:var(--navy);color:#fff}
  .bento2-head{display:flex;align-items:center;justify-content:space-between;
    gap:18px;margin:0 0 26px}
  .bento2-head h2{margin:0}
  @media (max-width:920px){
    .bento2{grid-template-columns:1fr}
    .bento2-right{grid-template-columns:1fr}
    .bcard-wide{grid-column:span 1}
    .bcard-photo{min-height:380px}
  }

  /* ---- pricing ---- */
  .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
  @media (max-width:1180px){ .plans{grid-template-columns:repeat(2,1fr)} }
  /* the enterprise card has no number: the wordmark-sized price slot holds
     two words instead, at a size that does not shout */
  .price .amt-text{font-size:30px;padding:6px 0}
  .plan.enterprise{background:linear-gradient(160deg,rgba(10,14,51,.05),rgba(10,14,51,.02))}
  .plan{display:flex;flex-direction:column;border:1px solid rgba(10,14,51,.16);
    border-radius:24px;padding:30px}
  .plan.featured{border-color:var(--red);border-width:2px;padding:29px}
  .plan .tag{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--blue-brand)}
  .plan h3{font-size:23px;font-weight:700;letter-spacing:-.015em;margin-top:14px}
  .plan .blurb{font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.5;margin-top:8px}
  .price{display:flex;align-items:baseline;gap:7px;margin-top:22px}
  .price .amt{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
  .price .per{font-size:14px;font-weight:300;color:var(--muted)}
  .plan .btn{margin-top:22px;width:100%}
  .plan ul{list-style:none;display:grid;gap:9px;margin-top:24px;padding-top:22px;
    border-top:1px solid rgba(10,14,51,.13)}
  .plan li{font-size:14.5px;font-weight:300;color:var(--ink);display:flex;gap:10px;
    align-items:flex-start;line-height:1.5}
  .plan li::before{content:"";width:15px;height:15px;flex:none;margin-top:4px;border-radius:50%;
    background:rgba(47,107,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6BFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}
  @media (max-width:920px){
    .plans{grid-template-columns:1fr}
  }

  /* the pricing page has no hero, so its one section carries the top space */
  .pricing-only{padding-top:104px}
  .pricing-only .sec-head h1{font-size:clamp(34px,3.6vw,46px);line-height:1.1;
    letter-spacing:-.02em;color:var(--ink)}
  .pricing-only .sec-head p{margin-top:14px}

  /* ---- plan comparison table ---- */
  .cmp-wrap{overflow-x:auto;border:1px solid rgba(10,14,51,.16);border-radius:24px}
  .cmp{width:100%;min-width:760px;border-collapse:collapse}
  .cmp th,.cmp td{padding:15px 20px;text-align:left;vertical-align:middle}
  .cmp thead th{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);border-bottom:1px solid rgba(10,14,51,.16)}
  .cmp thead th.on{color:var(--blue-brand)}
  .cmp tbody td{font-size:14.5px;font-weight:300;color:var(--ink);
    border-bottom:1px solid rgba(10,14,51,.10)}
  .cmp tbody tr:last-child td{border-bottom:0}
  .cmp th:first-child,.cmp td:first-child{width:36%}
  .cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center;width:16%}
  .cmp .grp td{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted);background:rgba(10,14,51,.035);
    padding-top:12px;padding-bottom:12px}
  .cmp .val{font-size:13.5px;font-weight:500;color:var(--ink)}
  .cmp .dash{color:rgba(10,14,51,.30);font-size:16px}
  .tick{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
    background:rgba(47,107,255,.14)}
  .tick svg{width:11px;height:11px;display:block}

  .note{font-size:15px;font-weight:300;color:var(--muted);max-width:58em;line-height:1.6}

  .ind-flag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
    letter-spacing:.13em;text-transform:uppercase;color:var(--on-red);background:var(--red);
    padding:4px 10px;border-radius:500px;margin-bottom:12px}

  /* ---- industry cards: image on top, then a title and two lines ---- */
  .indgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  @media (max-width:1180px){ .indgrid{grid-template-columns:repeat(2,1fr)} }
  .indcard{display:flex;flex-direction:column;background:#fff;border-radius:22px;
    overflow:hidden;box-shadow:0 2px 4px rgba(10,14,51,.05),0 14px 34px rgba(10,14,51,.07);
    transition:transform .18s ease,box-shadow .22s ease}
  .indcard:hover{transform:translateY(-4px);
    box-shadow:0 4px 8px rgba(10,14,51,.06),0 22px 48px rgba(10,14,51,.13)}
  .indcard .shot{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;flex:none}
  .indcard .shot img{width:100%;height:100%;object-fit:cover;display:block}
  .indcard .body{padding:22px 24px 26px}
  .indcard h3{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0}
  .indcard p{font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.55;margin-top:8px}
  .indcard .flag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);
    font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    color:var(--on-red);background:var(--red);padding:5px 11px;border-radius:500px}
  @media (max-width:920px){ .indgrid{grid-template-columns:1fr} }

  /* ---- phone mockup holding a real screenshot of the field app ---- */
  .phone{position:relative;width:min(300px,100%);margin:0 auto;aspect-ratio:1170/2532;
    background:linear-gradient(160deg,#2b3050,#0a0e33 42%,#151a3d);
    border-radius:54px;padding:11px;
    box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,
               0 34px 70px rgba(10,14,51,.30), 0 10px 22px rgba(10,14,51,.16)}
  .phone .screen{position:relative;width:100%;height:100%;border-radius:44px;
    overflow:hidden;background:#fff;display:flex;flex-direction:column}
  .phone .statusbar{flex:none;display:flex;align-items:center;justify-content:space-between;
    padding:13px 26px 6px;font-size:13px;font-weight:600;color:#0a0e33;letter-spacing:-.01em}
  .phone .sb-icons{display:flex;align-items:center;gap:5px}
  .phone .sb-icons i{display:block;width:4px;border-radius:1px;background:#0a0e33}
  .phone .sb-icons i:nth-child(1){height:5px} .phone .sb-icons i:nth-child(2){height:8px}
  .phone .sb-icons i:nth-child(3){height:11px}
  .phone .sb-batt{width:22px;height:11px;border:1.4px solid rgba(10,14,51,.5);border-radius:3px;
    position:relative;margin-left:3px}
  .phone .sb-batt::before{content:"";position:absolute;inset:1.6px;right:6px;
    background:#0a0e33;border-radius:1px}
  .phone .sb-batt::after{content:"";position:absolute;top:3.4px;right:-3px;width:2px;height:4px;
    background:rgba(10,14,51,.5);border-radius:0 1px 1px 0}
  .phone .screen img{width:100%;flex:1;object-fit:cover;object-position:top;display:block}
  .phone .island{position:absolute;top:20px;left:50%;transform:translateX(-50%);
    width:88px;height:25px;border-radius:13px;background:#0a0e33;z-index:3}
  /* a screen's worth of list runs off the bottom edge, as it does on a phone */
  .phone .screen::after{content:"";position:absolute;left:50%;bottom:9px;z-index:3;
    transform:translateX(-50%);width:118px;height:5px;border-radius:3px;
    background:rgba(10,14,51,.32)}
  @media (max-width:920px){ .phone{width:min(268px,100%)} }

  /* ---- solution page hero: dark ground, copy left, product screen right ---- */
  /* A real background-colour under the gradient layers: without it the section
     resolves to the page's white for anything that does not paint gradients,
     and white hero type would sit on white. */
  .sol-hero{position:relative;overflow:hidden;isolation:isolate;padding:112px 0 96px;
    background-color:#0a0e33;
    background-image:
      radial-gradient(760px 620px at 2% 108%, rgba(170,230,60,.26) 0%, rgba(170,230,60,0) 62%),
      radial-gradient(720px 640px at 98% -8%, rgba(76,0,255,.34) 0%, rgba(76,0,255,0) 62%),
      linear-gradient(160deg,#121748 0%,#0a0e33 52%,#080b2a 100%)}
  .sol-hero .wrap{position:relative;z-index:1}
  .sol-hero-grid{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);
    gap:46px;align-items:center}
  /* the window runs past the wrap's right edge, as in the reference */
  .sol-hero-grid > .sol-shot{margin-right:calc((100vw - min(100vw - 48px, var(--max))) / -2 - 12px)}
  .sol-hero .eyebrow{color:var(--blue-soft);margin-bottom:18px}
  .sol-hero h1{color:#fff;font-size:clamp(34px,3.6vw,48px);line-height:1.1;
    letter-spacing:-.02em;font-weight:700}
  .sol-hero h1 .grad{color:var(--red);background:none;padding:0}
  .sol-hero .lede{color:#cfd6ee;font-size:19px;font-weight:300;line-height:1.55;
    margin:20px 0 0;max-width:34em;text-align:left}
  .sol-hero .cta-row{justify-content:flex-start;margin-top:30px}
  .sol-hero .btn-glass{color:#fff;border-color:var(--blue-soft)}
  .sol-hero .btn-glass:hover{background:rgba(170,230,60,.14)}
  /* the product screen in a macOS window, broken out past the text column so
     the record detail is actually readable */
  .sol-shot{position:relative;border-radius:12px;overflow:hidden;background:#fff;
    box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 44px 90px rgba(4,6,24,.60),
               0 12px 26px rgba(4,6,24,.40)}
  .sol-shot .bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;flex:none;
    background:linear-gradient(#f4f5f7,#e9eaee);border-bottom:1px solid rgba(10,14,51,.13)}
  .sol-shot .bar i{width:11px;height:11px;border-radius:50%;display:block}
  .sol-shot .bar i:nth-child(1){background:#ff5f57}
  .sol-shot .bar i:nth-child(2){background:#febc2e}
  .sol-shot .bar i:nth-child(3){background:#28c840}
  .sol-shot .bar span{margin:0 auto;transform:translateX(-16px);font-size:11.5px;
    font-weight:500;color:#6b7280;letter-spacing:-.01em}
  .sol-shot img{width:100%;height:auto;display:block}
  /* screenshots on a light band (not the dark solution hero): lighter frame, a caption under each */
  .shot-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:6px 0 44px}
  .sol-shot.on-light{margin:0;box-shadow:0 0 0 1px rgba(10,14,51,.10), 0 22px 48px rgba(10,14,51,.14),
               0 6px 14px rgba(10,14,51,.08)}
  .sol-shot.on-light figcaption{padding:12px 16px 14px;font-size:14px;line-height:1.45;color:var(--muted);
    border-top:1px solid rgba(10,14,51,.08);background:#fff}
  @media (max-width:920px){ .shot-pair{grid-template-columns:1fr} }
  @media (max-width:920px){
    .sol-hero{padding:92px 0 72px}
    .sol-hero-grid{grid-template-columns:1fr;gap:34px}
    .sol-hero-grid > .sol-shot{margin-right:0}
  }

  /* ---- contact page ---- */
  .contact-grid{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
    gap:56px;align-items:start}
  .contact-lede{font-size:19px;font-weight:300;line-height:1.55;color:var(--muted);
    margin-top:16px;max-width:32em}
  .contact-points{list-style:none;display:grid;gap:18px;margin-top:34px;
    padding-top:30px;border-top:1px solid rgba(10,14,51,.13)}
  .contact-points li{display:flex;gap:14px;align-items:flex-start}
  .contact-points .n{flex:none;width:26px;height:26px;border-radius:500px;
    background:rgba(47,107,255,.12);color:var(--blue-brand);display:grid;place-items:center;
    font-family:var(--mono);font-size:12px;font-weight:600;margin-top:1px}
  .contact-points b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
  .contact-points span{display:block;font-size:14.5px;font-weight:300;color:var(--muted);
    line-height:1.5;margin-top:3px}

  .form-card{background:#fff;border-radius:24px;padding:32px;
    box-shadow:0 2px 4px rgba(10,14,51,.05),0 18px 44px rgba(10,14,51,.09)}
  .field{display:block;margin-bottom:18px}
  .field > span{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
    margin-bottom:7px}
  .field .opt{font-weight:400;color:var(--muted)}
  .field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;
    font-weight:400;color:var(--ink);background:#fff;border:1px solid rgba(10,14,51,.20);
    border-radius:12px;padding:11px 13px;transition:border-color .18s ease,box-shadow .18s ease}
  .field textarea{min-height:118px;resize:vertical;line-height:1.5}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;
    border-color:var(--blue-brand);box-shadow:0 0 0 3px rgba(47,107,255,.18)}
  .field input:invalid:not(:placeholder-shown){border-color:#c4443a}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .form-card .btn{width:100%;height:48px;font-size:16px;margin-top:6px}
  .form-note{font-size:13px;font-weight:300;color:var(--muted);margin-top:14px;line-height:1.5}
  .form-sent{display:none;padding:16px 18px;border-radius:14px;margin-bottom:18px;
    background:rgba(204,255,102,.10);border:1px solid rgba(204,255,102,.36);
    font-size:14.5px;line-height:1.5}
  .form-sent.on{display:block}
  @media (max-width:920px){
    .contact-grid{grid-template-columns:1fr;gap:34px}
    .form-row{grid-template-columns:1fr}
    .form-card{padding:24px}
  }

  /* ---- FAQ: native disclosure widgets, so it works without JS ---- */
  .faq{display:grid;gap:0;border-top:1px solid rgba(10,14,51,.14)}
  .faq details{border-bottom:1px solid rgba(10,14,51,.14)}
  .faq summary{display:flex;align-items:flex-start;gap:18px;cursor:pointer;
    padding:22px 0;list-style:none;font-size:18px;font-weight:700;letter-spacing:-.015em;
    transition:color .18s ease}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--blue-brand)}
  .faq summary::after{content:"";flex:none;width:11px;height:11px;margin:6px 0 0 auto;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .22s ease;opacity:.55}
  .faq details[open] summary{color:var(--blue-brand)}
  .faq details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
  .faq .a{padding:0 44px 24px 0;font-size:15.5px;font-weight:300;line-height:1.6;
    color:var(--muted);max-width:60em}
  .faq .a p{margin:0}
  .faq .a p + p{margin-top:13px}
  .faq .a a{color:var(--blue-brand);font-weight:500}
  @media (max-width:920px){
    .faq summary{font-size:16.5px;gap:12px}
    .faq .a{padding-right:28px;font-size:15px}
  }

  /* ---- announcement strip under the nav ---- */
  .announce{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
    padding:13px 22px;text-align:center;
    background:linear-gradient(90deg,#B8F24A 0%,#CCFF66 52%,#E3FFA6 100%);
    color:var(--navy);font-size:15px;font-weight:500}
  .announce b{font-weight:700}
  .announce-btn{border:1.5px solid var(--navy);border-radius:500px;padding:7px 17px;
    font-size:13.5px;font-weight:600;white-space:nowrap;
    transition:background .2s ease,color .2s ease}
  .announce:hover .announce-btn{background:var(--navy);color:#fff}
  @media (max-width:920px){ .announce{font-size:14px;gap:10px;padding:12px 16px} }


  /* ---- entrance animation ----
     Everything is visible by default. The .anim class is added by JS only once
     it has confirmed IntersectionObserver exists, so no-JS and older browsers
     get the page whole rather than a blank one. */
  html.anim [data-rise]{opacity:0;transform:translateY(18px);
    transition:opacity .62s cubic-bezier(.22,.7,.25,1), transform .62s cubic-bezier(.22,.7,.25,1);
    transition-delay:var(--d,0ms);will-change:opacity,transform}
  html.anim [data-rise].seen{opacity:1;transform:none}
  /* the hero runs on load rather than on scroll, so it is never mid-fade */
  html.anim .hero-panel [data-rise],html.anim .sol-hero [data-rise]{transition-delay:var(--d,0ms)}

  @media (prefers-reduced-motion: reduce){
    html.anim [data-rise]{opacity:1 !important;transform:none !important;transition:none !important}
    html{scroll-behavior:auto}
  }

  /* ---- screenshot zoom (site.js) ---- */
  img.zoomable{cursor:zoom-in}
  img.zoomable:focus-visible{outline:3px solid var(--blue-brand);outline-offset:3px}
  dialog.zoom{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;
    margin:auto;cursor:zoom-out;overflow:visible}
  dialog.zoom::backdrop{background:rgba(4,6,24,.82)}
  dialog.zoom img{display:block;max-width:min(96vw,1600px);max-height:94vh;width:auto;height:auto;
    border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}

  /* ================= 2026-10-06 refresh ================= */

  /* The tick used on dark and yellow-accented lists: a yellow disc, navy tick. */
  :root{--tick-y:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e33' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --tick-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

  /* ---- industries: seven cards, the first one wide, fill two rows of four ---- */
  @media (min-width:921px){
    .indcard.wide{grid-column:span 2}
    .indcard.wide .shot{aspect-ratio:31/10}
  }
  @media (min-width:921px) and (max-width:1180px){
    .indcard.wide .shot{aspect-ratio:16/7}
  }

  /* ---- "In detail": the feature cards carry colour rather than sitting
     grey on white. Navy by default, with one blue and one yellow card in
     every six so a grid of them reads as a pattern, not a wall. ---- */
  .featgrid{counter-reset:fc}
  .featcol{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:24px;padding:28px 26px 26px;
    color:#fff;background:linear-gradient(155deg,#18237a 0%,#0e1449 55%,#0a0e33 100%);
    box-shadow:0 18px 40px rgba(10,14,51,.16);transition:transform .18s ease,box-shadow .22s ease}
  .featcol:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(10,14,51,.24)}
  .featcol::before{counter-increment:fc;content:counter(fc,decimal-leading-zero);display:grid;place-items:center;
    width:42px;height:42px;border-radius:13px;margin-bottom:18px;
    background:var(--red);color:var(--navy);font-family:var(--mono);font-size:14px;font-weight:600}
  .featcol::after{content:"";position:absolute;z-index:-1;right:-90px;top:-90px;width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle,rgba(204,255,102,.22),rgba(204,255,102,0) 70%)}
  .featcol h3{font-size:20px;color:#fff}
  .featcol p.k{color:#c9d0ee;font-size:14.5px}
  .featcol ul{border-top-color:rgba(255,255,255,.16)}
  .featcol li{color:rgba(255,255,255,.92)}
  .featcol li::before{background:var(--red) var(--tick-y) center/9px no-repeat}
  .featgrid > .featcol:nth-child(6n+2){background:linear-gradient(155deg,#3d78ff 0%,#2457e0 55%,#1a43b8 100%)}
  .featgrid > .featcol:nth-child(6n+2)::before{background:#fff}
  .featgrid > .featcol:nth-child(6n+2) p.k{color:#e0e8ff}
  .featgrid > .featcol:nth-child(6n+2) li::before{background:#fff var(--tick-y) center/9px no-repeat}
  .featgrid > .featcol:nth-child(6n+2)::after{background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
  .featgrid > .featcol:nth-child(6n+4){background:linear-gradient(155deg,#DDFF8F 0%,#CCFF66 55%,#B8F24A 100%);color:var(--navy)}
  .featgrid > .featcol:nth-child(6n+4)::before{background:var(--navy);color:var(--red)}
  .featgrid > .featcol:nth-child(6n+4) h3{color:var(--navy)}
  .featgrid > .featcol:nth-child(6n+4) p.k{color:rgba(10,14,51,.78)}
  .featgrid > .featcol:nth-child(6n+4) ul{border-top-color:rgba(10,14,51,.18)}
  .featgrid > .featcol:nth-child(6n+4) li{color:var(--navy)}
  .featgrid > .featcol:nth-child(6n+4) li::before{background:var(--navy) var(--tick-w) center/9px no-repeat}
  .featgrid > .featcol:nth-child(6n+4)::after{background:radial-gradient(circle,rgba(255,255,255,.45),rgba(255,255,255,0) 70%)}
  @media (max-width:1100px) and (min-width:921px){ .featgrid{grid-template-columns:repeat(2,1fr)} }

  /* ---- a full-bleed photograph behind one band of a solution page. The
     photo holds the right of the band; navy holds the left, where the copy
     is, and the two blend in the middle. Each page sets --photo. ---- */
  .photo-band{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0a0e33;padding:104px 0}
  .photo-band::before{content:"";position:absolute;top:0;bottom:0;left:44%;right:0;z-index:-2;
    background:var(--photo) var(--photo-pos,center)/cover no-repeat}
  .photo-band::after{content:"";position:absolute;inset:0;z-index:-1;background:
    linear-gradient(90deg,#0a0e33 0%,#0a0e33 44%,rgba(10,14,51,.62) 52%,rgba(10,14,51,.12) 72%,rgba(10,14,51,0) 100%),
    radial-gradient(560px 480px at 0% 100%,rgba(204,255,102,.16),rgba(204,255,102,0) 70%)}
  .photo-band .wrap > *{max-width:560px}
  .photo-band .sec-eyebrow{color:var(--red)}
  .photo-band h2{color:#fff}
  .photo-band .sec-head{margin-bottom:36px}
  .photo-band .sec-head p{color:#cfd6ee}
  .photo-band .iconrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 34px}
  .photo-band .iconrow .ic{color:var(--red);margin-bottom:12px}
  .photo-band .iconrow h3{color:#fff;font-size:18px}
  .photo-band .iconrow p{color:#cfd6ee;font-size:14.5px}
  @media (max-width:920px){
    .photo-band{padding:300px 0 64px}
    .photo-band::before{left:0;bottom:auto;height:280px}
    .photo-band::after{background:linear-gradient(180deg,rgba(10,14,51,0) 0,rgba(10,14,51,.2) 180px,#0a0e33 280px)}
    .photo-band .wrap > *{max-width:none}
    .photo-band .iconrow{grid-template-columns:1fr}
  }

  /* ---- services: enablement + managed administration ---- */
  .svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .svc-card{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:34px;min-height:470px;
    display:flex;flex-direction:column;align-items:flex-start;color:#fff;
    transition:transform .18s ease,box-shadow .22s ease}
  .svc-card:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(10,14,51,.2)}
  .svc-card .eb{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    color:var(--red);margin-bottom:12px}
  .svc-card h3{font-size:clamp(23px,2.2vw,30px);font-weight:700;letter-spacing:-.015em;line-height:1.15;max-width:20em}
  .svc-card p{font-size:16px;font-weight:300;line-height:1.55;margin-top:12px;max-width:34em;color:rgba(255,255,255,.88)}
  .svc-card ul{list-style:none;display:grid;gap:9px;margin-top:20px}
  .svc-card li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.94)}
  .svc-card li::before{content:"";width:16px;height:16px;flex:none;margin-top:3px;border-radius:50%;
    background:var(--red) var(--tick-y) center/9px no-repeat}
  .svc-card .pill{margin-top:auto;padding:11px 20px;border-radius:500px;font-size:14px;font-weight:600;
    border:1.6px solid currentColor;transition:background .2s ease,color .2s ease}
  .svc-card ul + .pill,.svc-card p + .pill{margin-top:28px}
  .svc-card:hover .pill{background:var(--red);border-color:var(--red);color:var(--navy)}
  .svc-photo{justify-content:flex-end}
  .svc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;z-index:-2}
  .svc-photo::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(10,14,51,.1) 0%,rgba(10,14,51,.25) 30%,rgba(10,14,51,.92) 66%)}
  .svc-dark{background-color:#0a0e33;background-image:
    radial-gradient(420px 380px at 100% 0%,rgba(204,255,102,.24),rgba(204,255,102,0) 70%),
    linear-gradient(140deg,#18237a 0%,#0a0e33 70%)}
  @media (max-width:920px){
    .svc-cards{grid-template-columns:1fr}
    .svc-card{min-height:0;padding:28px}
    .svc-photo{min-height:440px}
  }

  /* ---- /services page ---- */
  .week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:26px}
  .day{position:relative;background:#fff;border:1px solid rgba(10,14,51,.13);border-radius:20px;padding:22px 20px 20px;
    box-shadow:0 10px 26px rgba(10,14,51,.06)}
  .day .d{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    background:var(--navy);color:var(--red);padding:5px 10px;border-radius:500px}
  .day h3{font-size:18px;font-weight:700;letter-spacing:-.015em;margin-top:14px}
  .day p{font-size:14px;font-weight:300;color:var(--muted);line-height:1.5;margin-top:6px}
  .day ul{list-style:none;display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(10,14,51,.1)}
  .day li{font-size:13.5px;color:var(--ink);line-height:1.4;padding-left:16px;position:relative}
  .day li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--red)}
  .day.live{background:linear-gradient(155deg,#DDFF8F,#CCFF66 60%,#B8F24A);border-color:#B8F24A}
  .day.live .d{background:var(--navy);color:#fff}
  .day.live p{color:rgba(10,14,51,.8)}
  .day.live ul{border-top-color:rgba(10,14,51,.2)}
  .day.live li::before{background:var(--navy)}
  @media (max-width:1100px){ .week{grid-template-columns:repeat(2,minmax(0,1fr))} .day.live{grid-column:1 / -1} }
  @media (max-width:640px){ .week{grid-template-columns:1fr} }

  .compare2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
  .compare2 > div{border-radius:22px;padding:26px}
  .compare2 .was{background:#fff;border:1px solid rgba(10,14,51,.13)}
  .compare2 .now{background:var(--navy);color:#fff}
  .compare2 h3{font-size:18px;font-weight:700;letter-spacing:-.015em}
  .compare2 ul{list-style:none;display:grid;gap:9px;margin-top:14px}
  .compare2 li{font-size:15px;line-height:1.45;padding-left:24px;position:relative}
  .compare2 .was li{color:var(--muted)}
  .compare2 .was li::before{content:"\2013";position:absolute;left:4px;color:rgba(10,14,51,.4)}
  .compare2 .now li::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;border-radius:50%;
    background:var(--red) var(--tick-y) center/9px no-repeat}
  @media (max-width:920px){ .compare2{grid-template-columns:1fr} }

  .sr-photo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .svc-hero-img{border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 44px 90px rgba(4,6,24,.6)}
  .svc-hero-img img{display:block;width:100%;height:auto;aspect-ratio:1290/768;object-fit:cover}

  /* ---- a second card style for the deeper / hire grids, so they do not
     repeat the coloured "In detail" cards directly above them ---- */
  .featgrid.alt > .featcol:nth-child(n){background:#fff;color:var(--ink);border:1px solid rgba(10,14,51,.12);
    border-top:5px solid var(--red);box-shadow:0 12px 30px rgba(10,14,51,.07);border-radius:20px}
  .featgrid.alt > .featcol:nth-child(n)::before{background:rgba(204,255,102,.14);color:var(--red-2);width:auto;height:auto;
    padding:4px 10px;border-radius:500px;display:inline-block;font-size:12.5px;margin-bottom:14px}
  .featgrid.alt > .featcol:nth-child(n)::after{display:none}
  .featgrid.alt > .featcol:nth-child(n) h3{color:var(--ink)}
  .featgrid.alt > .featcol:nth-child(n) p.k{color:var(--muted)}
  .featgrid.alt > .featcol:nth-child(n) ul{border-top-color:rgba(10,14,51,.12)}
  .featgrid.alt > .featcol:nth-child(n) li{color:var(--ink)}
  .featgrid.alt > .featcol:nth-child(n) li::before{background:var(--navy) var(--tick-w) center/9px no-repeat}

  /* ---- services: running it yourselves ---- */
  .svc-note{margin-top:22px;font-size:15.5px;font-weight:300;line-height:1.6;color:var(--muted);max-width:62em;
    padding:18px 22px;border-radius:18px;background:#fff;border:1px solid rgba(10,14,51,.12);border-left:4px solid var(--red)}
  .svc-note b{color:var(--ink);font-weight:700}
  .svc-note a{color:var(--blue-brand);font-weight:500;white-space:nowrap}
  .own-run{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;
    margin:8px 0 26px;padding:30px 32px;border-radius:24px;background:var(--bg-soft);border:1px solid rgba(10,14,51,.12)}
  .own-run .sec-eyebrow{margin-bottom:10px}
  .own-run h3{font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
  .own-run p{font-size:15.5px;font-weight:300;color:var(--muted);line-height:1.55;margin-top:10px}
  .own-run ul{list-style:none;display:grid;gap:10px}
  .own-run li{font-size:15px;line-height:1.45;padding-left:26px;position:relative}
  .own-run li::before{content:"";position:absolute;left:0;top:.15em;width:16px;height:16px;border-radius:50%;
    background:var(--red) var(--tick-y) center/9px no-repeat}
  @media (max-width:920px){ .own-run{grid-template-columns:1fr;gap:20px;padding:24px} }

  /* ---- equipment hire intro: copy beside a photo of a hire counter ---- */
  .hire-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;margin-bottom:44px}
  .hire-intro .sec-head{margin-bottom:0}
  .hire-photo{width:100%;height:auto;aspect-ratio:10/7;object-fit:cover;border-radius:22px;
    box-shadow:0 22px 50px rgba(10,14,51,.16)}
  @media (max-width:920px){ .hire-intro{grid-template-columns:1fr;gap:26px} }
  .svc-photo .eb{color:#fff}

  /* ================= Solution brands (2026-10-06) =================
     Each solution is a product of its own — BaseLeap FS, Labour Hire,
     Equipment Hire, Recruitment — with an accent that matches its colour
     in the app's navigation. A solution page sets --acc / --acc-soft /
     --acc-tint / --acc-rgb on <body>, and the selling accent follows it. */
  body.sol{--red:var(--acc);--red-2:var(--acc);--red-text:var(--acc);--on-red:#fff}
  body.sol .btn-primary:hover,body.sol .btn-accent:hover{background:var(--acc);border-color:var(--acc);filter:brightness(1.12)}
  body.sol .sol-hero{background-image:
      radial-gradient(760px 620px at 2% 108%, rgba(var(--acc-rgb),.42) 0%, rgba(var(--acc-rgb),0) 62%),
      radial-gradient(720px 640px at 98% -8%, rgba(76,0,255,.30) 0%, rgba(76,0,255,0) 62%),
      linear-gradient(160deg,#121748 0%,#0a0e33 52%,#080b2a 100%)}
  body.sol .sol-hero h1 .grad{color:var(--acc-soft)}
  body.sol .sol-hero .btn-glass:hover{background:rgba(var(--acc-rgb),.25)}
  body.sol .photo-band .sec-eyebrow,body.sol .photo-band .iconrow .ic{color:var(--acc-soft)}
  body.sol .photo-band::after{background:
    linear-gradient(90deg,#0a0e33 0%,#0a0e33 44%,rgba(10,14,51,.62) 52%,rgba(10,14,51,.12) 72%,rgba(10,14,51,0) 100%),
    radial-gradient(560px 480px at 0% 100%,rgba(var(--acc-rgb),.3),rgba(var(--acc-rgb),0) 70%)}
  body.sol .flow-step.paid p,body.sol .flow-step.paid .n{color:rgba(255,255,255,.85)}
  body.sol .featgrid.alt > .featcol:nth-child(n){border-top-color:var(--acc)}
  body.sol .featgrid.alt > .featcol:nth-child(n)::before{background:var(--acc-tint);color:var(--acc)}
  body.sol h2 .g{color:var(--acc)}
  @media (max-width:920px){ body.sol .photo-band::after{background:linear-gradient(180deg,rgba(10,14,51,0) 0,rgba(10,14,51,.2) 180px,#0a0e33 280px)} }

  /* the product name, set as text: a coloured dot, then the name */
  .sol-mark{display:inline-flex;align-items:center;gap:10px;font-family:"DM Sans",sans-serif;
    text-transform:none;letter-spacing:-.005em;font-size:17px;font-weight:700;color:#fff!important}
  .sol-mark i{width:12px;height:12px;border-radius:4px;background:var(--acc-soft);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.35)}

  /* Solutions menu: each product with its own colour */
  .menu a.m-sol{border-left:3px solid transparent;border-radius:0 14px 14px 0}
  .menu a.m-sol:hover{background:var(--acc-tint);color:var(--ink);border-left-color:var(--acc)}
  .m-name{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--ink)}
  .m-name i{width:10px;height:10px;border-radius:3px;background:var(--acc);flex:none}
  .menu a.m-sol small{padding-left:19px}
  .menu{min-width:340px}

  /* home hero: the four products */
  .hero-sols a[style]::before{background:var(--acc)}
  .hero-sols a[style]{border-color:rgba(var(--acc-rgb),.35)}
  .hero-sols a[style]:hover{border-color:var(--acc);background:var(--acc-tint)}

  /* ---- a close-up of a screenshot: a region of a larger image ---- */
  .crop{display:block;width:100%;aspect-ratio:var(--ar);background-image:var(--src);background-repeat:no-repeat;
    background-size:var(--bs) auto;background-position:var(--bx) var(--by);background-color:#fff}

  /* ---- "In detail": compact cards that open the feature page ---- */
  .fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .fcard{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(10,14,51,.1);border-radius:22px;overflow:hidden;
    box-shadow:0 2px 4px rgba(10,14,51,.04),0 14px 34px rgba(10,14,51,.07);transition:transform .18s ease,box-shadow .22s ease}
  .fcard:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(10,14,51,.06),0 24px 50px rgba(10,14,51,.13)}
  .fcard-pic{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;padding:24px 0 0 24px;
    background:linear-gradient(150deg,var(--acc-tint),#fff 120%)}
  .fcard-pic::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0) 72%,rgba(255,255,255,.65))}
  .fcard-win{display:block;width:118%;border-radius:12px 0 0 0;overflow:hidden;background:#fff;
    box-shadow:0 0 0 1px rgba(10,14,51,.1),0 18px 40px rgba(10,14,51,.16);transform-origin:0 0;transition:transform .35s ease}
  .fcard:hover .fcard-win{transform:scale(1.03)}
  .fcard-pic.phone{padding:20px 0 0;display:flex;justify-content:center}
  .fcard-pic.phone .fcard-win{width:48%;border-radius:18px 18px 0 0}
  .fcard-pic .mock{font-size:9.5px}
  .fcard-body{display:flex;flex-direction:column;padding:20px 22px 22px;flex:1}
  .fcard h3{font-size:19px;font-weight:700;letter-spacing:-.015em}
  .fcard p{font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.5;margin-top:6px}
  .fcard-more{margin-top:auto;padding-top:14px;font-size:14.5px;font-weight:600;color:var(--acc)}
  @media (max-width:1060px){ .fcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:640px){ .fcards{grid-template-columns:1fr} }

  /* ---- feature pages ---- */
  .sol-hero-short{padding:96px 0 80px}
  .sol-hero-short .wrap > *{max-width:760px}
  .sol-hero-short .lede{max-width:40em}
  .fnav{position:sticky;top:76px;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(10,14,51,.1)}
  .fnav .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:12px;padding-bottom:12px;scrollbar-width:none}
  .fnav a{flex:none;padding:8px 15px;border-radius:500px;font-size:14.5px;font-weight:600;color:var(--ink);
    border:1px solid rgba(10,14,51,.12);background:#fff;white-space:nowrap}
  .fnav a:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-tint)}
  @media (max-width:920px){ .fnav{top:64px} }
  .frow{padding:96px 0;scroll-margin-top:140px}
  .frow-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
  .frow.flip .frow-text{order:2}
  .frow-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;
    background:var(--acc-tint);color:var(--acc);font-family:var(--mono);font-weight:600;font-size:14px;margin-bottom:18px}
  .frow h2{font-size:clamp(28px,2.8vw,38px)}
  .frow-lede{font-size:20px;font-weight:400;color:var(--ink);line-height:1.4;margin-top:12px}
  .frow-text > p:not(.frow-lede){font-size:16.5px;font-weight:300;color:var(--muted);line-height:1.65;margin-top:14px}
  .frow ul{list-style:none;display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(10,14,51,.1)}
  .frow li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.45}
  .frow li::before{content:"";position:absolute;left:0;top:.15em;width:18px;height:18px;border-radius:50%;
    background:var(--acc) var(--tick-w) center/10px no-repeat}
  .fvis{position:relative;border-radius:28px;padding:40px 40px 56px;
    background:radial-gradient(120% 90% at 100% 0%,rgba(var(--acc-rgb),.22),rgba(var(--acc-rgb),0) 60%),var(--acc-tint)}
  .fvis-main{border-radius:14px;overflow:hidden;background:#fff;
    box-shadow:0 0 0 1px rgba(10,14,51,.1),0 30px 60px rgba(10,14,51,.16)}
  .fvis-sub{position:absolute;right:-18px;bottom:-26px;width:56%;border-radius:12px;overflow:hidden;background:#fff;
    box-shadow:0 0 0 1px rgba(10,14,51,.1),0 22px 46px rgba(10,14,51,.22)}
  .frow.flip .fvis-sub{right:auto;left:-18px}
  .fvis.phone{padding:36px 0 56px;display:flex;justify-content:center}
  .fvis.phone .fvis-main{width:min(320px,70%);border-radius:28px;border:9px solid #0a0e33}
  .fvis.phone .fvis-sub{width:48%;right:-12px}
  .fvis img,.fvis .crop{display:block;width:100%}
  @media (max-width:920px){
    .frow{padding:64px 0}
    .frow-grid{grid-template-columns:1fr;gap:34px}
    .frow.flip .frow-text{order:0}
    .fvis{padding:24px 24px 24px}
    .fvis-sub,.frow.flip .fvis-sub{position:relative;right:auto;left:auto;bottom:auto;width:80%;margin:-28px 0 0 auto}
    .fvis.phone{flex-direction:column;align-items:center}
  }

  /* ---- illustrative app components (fictional data) ---- */
  .mock{font-size:12.5px;color:#0f172a;background:#fff;line-height:1.35;font-family:"DM Sans",sans-serif}
  .mk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:1.1em 1.3em;border-bottom:1px solid #eef0f4}
  .mk-head b{display:block;font-size:1.15em;font-weight:700}
  .mk-head small{display:block;color:#64748b;margin-top:.2em}
  .mk-body{padding:1em 1.3em 1.2em}
  .mk-table{width:100%;border-collapse:collapse}
  .mk-table th{font-size:.82em;font-weight:600;color:#64748b;text-align:left;padding:.75em 1.3em;background:#f8fafc;border-bottom:1px solid #eef0f4}
  .mk-table td{padding:.8em 1.3em;border-bottom:1px solid #f1f3f7;white-space:nowrap}
  .mk-table.right td:not(:first-child),.mk-table.right th:not(:first-child){text-align:right}
  .mk-chip{display:inline-block;padding:.22em .7em;border-radius:500px;font-size:.85em;font-weight:600;background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;margin:0 .2em .2em 0}
  .mk-chip.ok{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
  .mk-chip.warn{background:#fffbeb;color:#b45309;border-color:#fde68a}
  .mk-chip.bad{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
  .mk-chip.info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
  .mk-kv{display:flex;flex-direction:column;gap:.2em;padding:.55em 0;border-bottom:1px solid #f1f3f7}
  .mk-kv span{color:#64748b;font-size:.88em}
  .mk-kv b{font-weight:500}
  .mk-grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4em}
  .mk-label{font-size:.82em;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6em}
  .mk-check{display:grid;grid-template-columns:1.3em 1fr;column-gap:.7em;padding:.6em 0;border-bottom:1px solid #f1f3f7}
  .mk-check i{grid-row:span 2;width:1.25em;height:1.25em;border-radius:50%;border:2px solid #cbd5e1;margin-top:.05em}
  .mk-check.done i{border-color:var(--acc,#16a34a);background:var(--acc,#16a34a) var(--tick-w) center/.7em no-repeat}
  .mk-check.done span{color:#64748b;text-decoration:line-through}
  .mk-check small{color:#94a3b8;font-size:.85em}
  .mk-bar{height:.55em;border-radius:500px;background:#e2e8f0;overflow:hidden;margin-bottom:.6em}
  .mk-bar i{display:block;height:100%;background:var(--acc,#2563eb)}
  .mk-pct{font-weight:700;color:var(--acc,#2563eb);font-size:1.15em}
  .mk-total{display:flex;justify-content:space-between;padding:.9em 1.3em;background:#f8fafc;font-weight:600}
  .mk-btn{display:inline-block;padding:.45em .95em;border-radius:500px;background:#0a0e33;color:#fff;font-weight:600;font-size:.9em;white-space:nowrap}
  .mk-btn.ghost{background:#fff;color:#0a0e33;border:1px solid #cbd5e1}
  .mk-actions{display:flex;gap:.6em;margin-top:1em}
  .mk-big{display:block;font-size:1.5em;font-weight:700;margin-top:.1em}
  .mk-muted{color:#64748b}
  .mk-group{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:1em;padding:.9em 1.3em;border-bottom:1px solid #f1f3f7}
  .mk-group b{font-weight:700}
  .mk-group small{grid-column:1;color:#64748b}
  .mk-group .mk-btn{grid-row:1 / span 2;grid-column:2}
  .mk-stat{padding:1.4em 1.5em}
  .mk-stat small{color:#64748b}
  .mk-stat b{display:block;font-size:2.1em;font-weight:700;margin:.15em 0}
  .mk-stat span{color:var(--acc,#2563eb);font-weight:600}
  .mk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #eef0f4}
  .mk-stats .mk-stat{padding:1em 1.3em;min-width:0}
  .mk-stats .mk-stat + .mk-stat{border-left:1px solid #f1f3f7}
  .mk-stats .mk-stat b{font-size:1.6em}
  .mk-stats .mk-stat span{font-size:.85em}
  .mk-roster{display:grid;grid-template-columns:repeat(14,1fr);gap:.3em}
  .mk-roster .d{display:grid;place-items:center;aspect-ratio:1;border-radius:.4em;font-size:.85em;font-weight:600}
  .mk-roster .w,.mk-legend .w::before{background:rgba(var(--acc-rgb,37,99,235),.85);color:#fff}
  .mk-roster .t,.mk-legend .t::before{background:#fde68a;color:#78350f}
  .mk-roster .r,.mk-legend .r::before{background:#e2e8f0;color:#64748b}
  .mk-legend{display:flex;gap:1.2em;margin-top:.9em;color:#64748b;font-size:.9em}
  .mk-legend span::before{content:"";display:inline-block;width:.8em;height:.8em;border-radius:.2em;margin-right:.4em;vertical-align:-.05em}
  .mk-sign{margin-top:.8em;padding:.8em;border:1px dashed #cbd5e1;border-radius:.6em}
  .mk-sign svg{width:100%;height:4em;display:block}
  .mk-sign small{color:#64748b}
  .mk-person{display:flex;align-items:center;gap:.8em}
  .mk-person > div{flex:1}
  .mk-person b{display:block;font-size:1.15em}
  .mk-person small{color:#64748b}
  .mk-av{display:grid;place-items:center;width:2.8em;height:2.8em;border-radius:50%;background:var(--acc-tint,#eef2ff);color:var(--acc,#2563eb);font-weight:700}
  .mk-stars{color:#f59e0b;letter-spacing:.05em}
  .mk-tags{margin-top:1em}

  /* ---- services: calm, uniform cards (MYOB-style feature overview) ---- */
  .featgrid.calm > .featcol:nth-child(n){background:#fff;color:var(--ink);border:1px solid rgba(10,14,51,.12);
    box-shadow:none;border-radius:20px;padding:26px}
  .featgrid.calm > .featcol:nth-child(n):hover{transform:none;box-shadow:0 10px 26px rgba(10,14,51,.07)}
  .featgrid.calm > .featcol:nth-child(n)::before{background:rgba(10,14,51,.06);color:var(--ink);width:auto;height:auto;
    padding:4px 10px;border-radius:500px;display:inline-block;font-size:12.5px;margin-bottom:14px}
  .featgrid.calm > .featcol:nth-child(n)::after{display:none}
  .featgrid.calm > .featcol:nth-child(n) h3{color:var(--ink)}
  .featgrid.calm > .featcol:nth-child(n) p.k{color:var(--muted)}
  .featgrid.calm > .featcol:nth-child(n) ul{border-top-color:rgba(10,14,51,.1)}
  .featgrid.calm > .featcol:nth-child(n) li{color:var(--ink)}
  .featgrid.calm > .featcol:nth-child(n) li::before{background:rgba(10,14,51,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}
  .fvis-sub{width:46%;right:-34px;bottom:-40px}
  .frow.flip .fvis-sub{left:-34px}
  .fvis{margin-bottom:24px}
  @media (max-width:560px){ .cta-row .btn{white-space:normal;height:auto;min-height:44px;padding:10px 22px;text-align:center} }

  /* ---- "coming soon" on a product ---- */
  .soon{display:inline-block;font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;line-height:1;padding:4px 8px;border-radius:500px;margin-left:8px;vertical-align:middle;
    background:#0a0e33;color:#fff;white-space:nowrap}
  .sol-hero .soon{background:#fff;color:#0a0e33}
  .lay-label.on .soon{background:var(--red);color:#0a0e33}
  .mk-gantt{display:grid;grid-template-columns:7em 1fr;align-items:center;gap:.8em;padding:.45em 0;border-bottom:1px solid #f1f3f7}
  .mk-gantt span{color:#334155;font-weight:500}
  .mk-gantt i{display:block;height:1.1em;border-radius:.4em;background:rgba(var(--acc-rgb,37,99,235),.8)}

  /* ---- home hero: a photograph with the copy over its darkened left side ---- */
  .hero-photo{min-height:min(760px,92svh);justify-content:center;text-align:left;padding:120px 24px 100px}
  .hero-photo .hero-bg{background:#0a0e33 url(/img/solutions/bg-field-service.jpg) 72% center/cover no-repeat}
  .hero-photo .hero-bg::after{background:
    linear-gradient(90deg,rgba(10,14,51,.94) 0%,rgba(10,14,51,.86) 34%,rgba(10,14,51,.35) 62%,rgba(10,14,51,.05) 100%),
    linear-gradient(0deg,rgba(10,14,51,.5),rgba(10,14,51,0) 40%)}
  .hero-photo .wrap{text-align:left;max-width:var(--max)}
  .hero-photo h1{color:#fff;max-width:13em;font-size:clamp(38px,4.6vw,60px)}
  .hero-photo h1 .grad{color:var(--red)}
  .hero-photo .lede{color:#d7dcec;margin-left:0;max-width:32em}
  .hero-photo .hero-sols{justify-content:flex-start;max-width:46em}
  .hero-photo .hero-sols a{background:rgba(255,255,255,.95)}
  @media (max-width:920px){
    .hero-photo{padding:96px 16px 64px;min-height:0}
    .hero-photo .hero-bg{background-position:68% center}
    .hero-photo .hero-bg::after{background:linear-gradient(180deg,rgba(10,14,51,.8),rgba(10,14,51,.92))}
  }

  /* ---- the one featured card (MYOB "new era" style) ---- */
  .spot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;background:#fff;border-radius:32px;overflow:hidden;
    box-shadow:0 2px 6px rgba(10,14,51,.05),0 30px 70px rgba(10,14,51,.12);max-width:1100px;margin:0 auto}
  .spot-copy{padding:52px 48px}
  .spot-badge{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    padding:6px 12px;border-radius:500px;background:rgba(204,255,102,.14);color:var(--red-2)}
  .spot h3{font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:18px}
  .spot-lede{font-size:20px;font-weight:500;color:var(--ink);margin-top:12px;line-height:1.4}
  .spot-copy > p:not(.spot-lede):not(.spot-note){font-size:16px;font-weight:300;color:var(--muted);line-height:1.6;margin-top:14px}
  .spot-note{font-size:14px;color:var(--muted);margin-top:16px;padding-top:14px;border-top:1px solid rgba(10,14,51,.1)}
  .spot .cta-row{margin-top:24px}
  .spot-pic{position:relative;min-height:440px;background:#0a0e33}
  .spot-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .spot-phone{position:absolute;left:8%;bottom:-40px;width:42%;max-width:220px;border:8px solid #0a0e33;border-radius:30px;overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.4);background:#fff}
  .spot-phone img{display:block;width:100%;height:auto}
  @media (max-width:920px){
    .spot{grid-template-columns:1fr}
    .spot-copy{padding:32px 24px}
    .spot-pic{min-height:360px}
  }
  .svc-one .spot-pic{min-height:100%}
  .svc-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}
  .svc-two h4{font-size:16.5px;font-weight:700}
  .svc-two p{font-size:15px;font-weight:300;color:var(--muted);line-height:1.55;margin-top:6px}
  .svc-ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(10,14,51,.1)}
  .svc-ticks li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45}
  .svc-ticks li::before{content:"";position:absolute;left:0;top:.15em;width:16px;height:16px;border-radius:50%;background:var(--red) var(--tick-y) center/9px no-repeat}
  @media (max-width:640px){ .svc-two,.svc-ticks{grid-template-columns:1fr} }
  .hero-photo .hero-sols{margin-left:0}
  .hero-photo h1{max-width:16em}
  .svc-one{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  @media (max-width:920px){ .svc-one{grid-template-columns:1fr} }

  /* ================= layer diagram, v3 (2026-10-08) =================
     labels | the stack, big, as the centrepiece | the description panel,
     joined to the raised plate by a drawn line. Every layer carries its
     solution colour (--acc), and the plate in focus grows 3D markers. */
  header::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;
    background:linear-gradient(90deg,#B8F24A 0%,#CCFF66 52%,#E3FFA6 100%)}
  .lay-row{grid-template-columns:240px minmax(0,1fr) 330px;gap:0 24px;min-height:620px;
    max-width:none;position:relative}
  .lay-labels{gap:4px}
  .lay-label{border-radius:14px;border:1px solid transparent;padding:11px 14px}
  .lay-label .ll-t{font-size:20px;white-space:normal}
  .lay-label .ll-s{font-size:13px}
  .lay-label.on{background:#fff;border-color:rgba(var(--acc-rgb),.35);box-shadow:0 8px 22px rgba(var(--acc-rgb),.14)}
  .lay-label.on::before{background:var(--acc)}
  .lay-label.on::after{display:none}
  .lay-label.on .ll-n{color:var(--acc)}
  .lay-label .ll-n{color:rgba(var(--acc-rgb),.7)}
  .lay-stage-mid{display:grid;place-items:center;min-height:600px}
  .lay-stack{width:560px;height:380px;--zs:1.15;transform:translateY(70px) rotateX(56deg) rotateZ(-42deg)}
  .plate{background:rgba(var(--acc-rgb),.10);border-color:rgba(var(--acc-rgb),.35)}
  .plate .dia{color:rgba(var(--acc-rgb),.7)}
  .plate.on,.plate.base.on{background-color:var(--acc);
    background-image:linear-gradient(150deg,rgba(255,255,255,.16),rgba(0,0,0,.18));border-color:var(--acc);
    box-shadow:0 30px 70px rgba(var(--acc-rgb),.45)}
  .plate.base{background:rgba(var(--acc-rgb),.14);border-color:rgba(var(--acc-rgb),.45)}
  .plate.base .dia{color:rgba(var(--acc-rgb),.7)}
  .plate.on .dia,.plate.base.on .dia{color:#fff}
  /* raised markers: a stem up from the plate and a label card that turns to face you */
  .pop{position:absolute;left:var(--x);top:var(--y);width:0;height:0;transform-style:preserve-3d;pointer-events:none}
  .pop .stem{position:absolute;left:-1px;top:0;width:2px;height:calc(var(--h) * 64px);background:#fff;transform-origin:top center;
    transform:rotateX(90deg) scaleY(0);transition:transform .5s cubic-bezier(.22,.7,.25,1) .1s;opacity:.85}
  .pop b{position:absolute;left:0;top:0;white-space:nowrap;padding:6px 11px;border-radius:9px;background:#fff;color:var(--acc);
    font-size:13px;font-weight:700;box-shadow:0 10px 24px rgba(10,14,51,.25);
    transform:translateZ(0) rotateZ(42deg) rotateX(-56deg) translate(-50%,-100%);opacity:0;
    transition:transform .5s cubic-bezier(.22,.7,.25,1) .1s,opacity .3s ease .1s}
  .pop b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:7px;vertical-align:1px}
  .plate.on .pop .stem{transform:rotateX(90deg) scaleY(1)}
  .plate.on .pop b{opacity:1;transform:translateZ(calc(var(--h) * 64px)) rotateZ(42deg) rotateX(-56deg) translate(-50%,-100%)}
  .plate.above{opacity:.18}
  /* the description panel, on the right, in the layer's colour */
  .lay-caption{border-radius:22px;border-top:4px solid var(--cap-acc,#0a0e33);padding:24px 24px 22px;align-self:center}
  .lay-cap h4{font-size:24px}
  .lay-cap .cap-link{color:var(--acc)}
  .lay-cap li::before{background:var(--acc) var(--tick-w) center/9px no-repeat}
  .lay-tag{background:var(--row-acc,#0a0e33)}
  .lay-tag::before{background:#fff}
  .lay-link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:4;opacity:0;transition:opacity .3s ease}
  .lay-link.on{opacity:1}
  .lay-link path{fill:none;stroke:var(--row-acc,#0a0e33);stroke-width:2;stroke-dasharray:5 5;opacity:.8}
  .lay-link circle{fill:var(--row-acc,#0a0e33)}
  .lay-row .lay-caption{z-index:5}
  @media (max-width:1240px){
    .lay-row{grid-template-columns:220px minmax(0,1fr) 300px}
    .lay-stack{width:460px;height:310px;--zs:1;transform:translateY(60px) rotateX(56deg) rotateZ(-42deg)}
    .lay-stage-mid{min-height:520px}
  }
  @media (max-width:1060px){
    .lay-row{grid-template-columns:200px minmax(0,1fr) 270px}
    .lay-stack{width:360px;height:245px;--zs:.8;transform:translateY(50px) rotateX(56deg) rotateZ(-42deg)}
    .lay-stage-mid{min-height:440px}
    .pop b{font-size:11px;padding:4px 8px}
  }
  @media (max-width:920px){
    .lay-row{grid-template-columns:1fr;min-height:0}
    .lay-stage-mid{min-height:300px;order:2}
    .lay-caption{order:3;margin-top:10px}
    .lay-stack{width:min(320px,80vw);height:min(215px,54vw);--zs:.6}
    .lay-link{display:none}
    .lay-label.on{background:var(--acc);border-color:var(--acc);color:#fff}
    .lay-label.on .ll-n{color:#fff}
  }

  /* feature pages: the section nav sits in the middle */
  .fnav a:first-child{margin-left:auto}
  .fnav a:last-child{margin-right:auto}
  .fnav .wrap{justify-content:center;flex-wrap:wrap}
  .fnav a:first-child,.fnav a:last-child{margin-left:0;margin-right:0}
  @media (max-width:920px){ .fnav .wrap{justify-content:flex-start;flex-wrap:nowrap} }
  nav.fnav{display:block;height:auto;grid-template-columns:none;gap:0}

  /* ================= white bar, light hero (2026-10-09) =================
     The reference runs a white bar with dark links over a light hero, with
     the photograph framed on the right rather than behind the words. */
  header{background:#fff;border-bottom:1px solid rgba(10,14,51,.10)}
  header.stuck{box-shadow:0 6px 24px rgba(10,14,51,.08)}
  header::after{bottom:-4px;height:4px}
  .nav-links a,.menu-btn,.btn-ghost-sm{color:var(--ink)}
  .nav-links a:hover,.menu-btn:hover,.has-menu.open > .menu-btn,.btn-ghost-sm:hover{color:var(--blue-brand)}
  .btn-ghost-sm{border-color:rgba(10,14,51,.18)}
  .btn-ghost-sm:hover{background:rgba(47,107,255,.08)}

  .hero-split{min-height:0;padding:72px 24px 72px;text-align:left}
  .hero-split .wrap{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:56px;align-items:center;text-align:left}
  .hero-split h1{color:var(--ink);font-size:clamp(38px,4.3vw,58px);letter-spacing:-.02em}
  .hero-split h1 .grad{color:var(--red-2)}
  .hero-split .lede{margin:22px 0 0;max-width:31em;font-size:19px}
  .hero-split .hero-sols{justify-content:flex-start;margin:28px 0 0}
  .hero-pic{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:5/4;
    box-shadow:0 2px 6px rgba(10,14,51,.06),0 34px 70px rgba(10,14,51,.18);background:#e9ecf5}
  .hero-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
  @media (max-width:1180px){
    .hero-split .wrap{gap:36px}
  }
  @media (max-width:920px){
    .hero-split{padding:40px 16px 56px}
    .hero-split .wrap{grid-template-columns:1fr;gap:32px}
    .hero-pic{aspect-ratio:4/3;border-radius:22px}
  }

  /* eight industry cards: four of them wide, so three rows of four stay full */
  .indgrid{grid-auto-flow:dense}
  .nav-links a,.menu-btn{white-space:nowrap}

  /* ---- accent stripe trial (2026-10-09): blue to orange to a dusky pink.
     One rule in its own commit, so a revert restores the plain orange. ---- */
  header::after{background:linear-gradient(90deg,#2F6BFF 0%,#4B4ACF 45%,#CCFF66 100%)}

  /* ---- the hero as one card, in the shape of the featured card below it ---- */
  .hero-split .wrap{display:block}
  .hero-split{padding:44px 24px 64px}
  .hero-spot{max-width:none;grid-template-columns:minmax(0,47fr) minmax(0,53fr)}
  .hero-spot .spot-copy{padding:56px 52px 52px}
  .hero-spot h1{font-size:clamp(34px,3.5vw,50px);max-width:none}
  .hero-spot .spot-copy > p.lede{font-size:18px;font-weight:300;color:var(--muted);line-height:1.55;margin-top:18px;max-width:none}
  .hero-spot .hero-sols{margin-top:26px}
  .hero-spot .spot-pic{min-height:560px}
  .hero-spot .spot-photo{object-position:55% 45%}
  @media (max-width:920px){
    .hero-split{padding:20px 16px 48px}
    .hero-spot{grid-template-columns:1fr}
    .hero-spot .spot-copy{padding:32px 24px 28px}
    .hero-spot .spot-pic{min-height:300px}
  }

  /* no pills in the hero card: a shorter card, so the photograph keeps more of its width */
  .hero-spot{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
  .hero-spot .spot-pic{min-height:440px}
  .hero-spot .spot-copy{padding:52px 48px}
  .hero-spot .spot-photo{object-position:50% 45%}
  @media (max-width:920px){ .hero-spot{grid-template-columns:1fr} .hero-spot .spot-copy{padding:32px 24px 28px} .hero-spot .spot-pic{min-height:280px} }

  /* ---- nav Get Started in the wordmark's Leap blue (2026-10-09, own commit) ---- */
  /* now the lime with navy text, on every page (the solution colour does not take it over) */
  body header .nav-right .btn-accent{background:#CCFF66;border-color:#CCFF66;color:var(--navy)}
  body header .nav-right .btn-accent:hover{background:#DDFF8F;border-color:#DDFF8F;filter:none}

  /* ---- home bands (2026-10-09): no gradients, white and slate in turn.
     --band is the tint; swap it for stone (#f5f5f4 / line #e7e5e4) to try that. ---- */
  body.home{--band:#f5f5f4;--band-line:#e7e5e4;background:#fff}  /* stone-100 / stone-200 (slate was #f1f5f9 / #e2e8f0) */
  body.home .hero-bg{background:#fff}
  body.home .clients,body.home #modules,body.home #crm,body.home #testimonials{
    background:var(--band);border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}
  body.home #industries,body.home #see,body.home #services,body.home #faq{background:#fff;border:0}
  body.home .final{background:#0a0e33}

  /* ---- trial (2026-10-09): the hero card on the lime, own commit, revertable ---- */
  /* option 2: the copy half in navy, the headline white with the lime highlight */
  body.home .hero-spot{background:#fff}
  body.home .hero-spot .spot-copy{background:var(--navy)}
  body.home .hero-spot h1{color:#fff}
  body.home .hero-spot h1 .grad{color:var(--red)}
  body.home .hero-spot .spot-copy > p.lede{color:#cfd6ee;font-weight:300}

  /* ---- the strip under the bar (2026-10-09): one line and a link, on a
     forest-to-lime fade in the Firmus manner. Scrolls away with the page. ---- */
  .promo{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
    padding:16px 24px 12px;min-height:50px;color:#fff;font-size:14.5px;font-weight:500;text-align:center;line-height:1.3;
    background:linear-gradient(90deg,#003911 0%,#0E5A26 45%,#5BBE4E 85%,#CCFF66 100%)}
  .promo b{color:#CCFF66;font-weight:700;white-space:nowrap}
  .promo:hover b{text-decoration:underline}
  @media (max-width:920px){
    .promo{background:linear-gradient(90deg,#003911,#1F8A3F);font-size:14px;padding:14px 16px 10px}
  }

  /* ---- hero band: a light lime wash rising from the bottom, white by the middle ---- */
  body.home .hero-bg{background:linear-gradient(180deg,#fff 0%,#fff 50%,#EEFFC2 100%)}

  /* ================= generous scale (2026-10-09, own commit) =================
     Larger small copy, a little more room between bands and a wider column,
     after the ServiceNow product pages. Revert this commit to go back. */
  :root{--max:1240px}
  section{padding:104px 0}
  .sec-head{margin-bottom:52px}
  h2{font-size:clamp(30px,3.3vw,46px)}
  .sec-head p{font-size:21px}
  .sec-eyebrow{font-size:13px}
  .indcard h3,.iconrow h3,.fcard h3{font-size:21px}
  .indcard p,.iconrow p,.fcard p,.featcol p{font-size:16px;line-height:1.55}
  .indcard .body{padding:24px 26px 28px}
  .flow-step h4{font-size:17.5px}
  .flow-step p{font-size:14.5px}
  .bcard p{font-size:16px}
  .faq summary,.faq-q{font-size:19px}
  .faq p{font-size:16.5px}
  .quote blockquote{font-size:18px}
  .frame{max-width:1160px}
  .hero-spot .spot-pic,.spot-pic{min-height:480px}
  .hero-spot .spot-copy{padding:56px 52px}
  .spot-copy > p:not(.spot-lede):not(.spot-note){font-size:17px}
  .spot-lede{font-size:21px}
  .promo{font-size:15.5px}
  .sol-hero .lede{font-size:20px}
  .photo-band .iconrow p{font-size:15.5px}
  @media (max-width:920px){
    section{padding:72px 0}
    .indcard p,.iconrow p,.fcard p,.featcol p{font-size:15.5px}
  }

  /* ---- translucent line-art overlays on three plates (2026-10-09, own commit):
     a street map on field service, a hire desk on labour hire, a CV on recruitment ---- */
  .plate .dia.dia-over{opacity:.28}
  .plate.on .dia.dia-over,.plate.base.on .dia.dia-over{opacity:.42}
  .plate.above .dia.dia-over{opacity:.12}

  /* the diagram's heading centred, as on "A new era for the work you do" */
  .lay-head{text-align:center}
  .lay-head p{margin-left:auto;margin-right:auto}

  /* the lifecycle strip on the home platform band: white steps, the paid one in the accent */
  body.home #crm .flow{background:#fff}
  body.home #crm .flow-step:not(.paid){background:#fff}

  /* ---- services page (2026-10-09): flat bands, no gradients; the "what we
     look after" cards get a light green header with the list on white ---- */
  body.flat{background:#fff}
  body.flat .sol-hero{background-image:none;background-color:#0a0e33}
  body.flat .soft{background:#f5f5f4;border-top:1px solid #e7e5e4;border-bottom:1px solid #e7e5e4}
  body.flat .final{background:#0a0e33}
  body.flat .day.live{background:#CCFF66;border-color:#B8F24A}
  body.flat .own-run{background:#fff}
  body.flat .featgrid.calm > .featcol:nth-child(n){background:#EEFFC2;border-color:#D4F08E;padding:24px 26px 0}
  body.flat .featgrid.calm > .featcol:nth-child(n)::before{background:#CCFF66;color:var(--navy)}
  body.flat .featgrid.calm > .featcol:nth-child(n) p.k{color:rgba(10,14,51,.72)}
  body.flat .featgrid.calm > .featcol:nth-child(n) ul{background:#fff;margin:18px -26px 0;padding:18px 26px 24px;border-top:1px solid #D4F08E}
  body.flat .featgrid.calm > .featcol:nth-child(n){display:flex;flex-direction:column}
  body.flat .featgrid.calm > .featcol:nth-child(n) ul{flex:1 1 auto;align-content:start}
  body.flat .featgrid.calm > .featcol:nth-child(n)::before{align-self:flex-start}

  /* look-after cards outlined in navy */
  body.flat .featgrid.calm > .featcol:nth-child(n){border-color:var(--navy)}
  body.flat .featgrid.calm > .featcol:nth-child(n) ul{border-top-color:var(--navy)}

  /* an icon in the lime header of each look-after card, top right, in a navy disc */
  body.flat .featgrid.calm > .featcol:nth-child(n) .fci{position:absolute;top:20px;right:22px;width:46px;height:46px;
    padding:11px;border-radius:50%;background:var(--navy);color:#CCFF66;box-sizing:border-box}

  /* ================= site footer (2026-10-09) =================
     Below the closing band on every page: the mark, one line, the links. */
  .site-foot{background:#070a26;color:#cfd6ee;border-top:1px solid rgba(255,255,255,.1);padding:64px 0 28px}
  .foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px}
  .foot-brand img{height:30px;width:auto;display:block}
  .foot-brand p{font-size:15px;font-weight:300;line-height:1.6;color:#aeb6d6;margin-top:18px;max-width:30em}
  .foot-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
  .foot-cta .btn{height:40px;padding:0 20px;font-size:14.5px}
  .foot-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
  .foot-cta .btn-ghost:hover{background:rgba(255,255,255,.1)}
  .foot-col{display:flex;flex-direction:column;gap:11px}
  .foot-col h4{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#CCFF66;margin-bottom:6px}
  .foot-col a{font-size:15px;font-weight:400;color:#cfd6ee;display:inline-flex;align-items:center;gap:8px}
  .foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
  .foot-col .soon{background:rgba(255,255,255,.14);color:#fff}
  .foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:22px;
    border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#8f98bd}
  @media (max-width:1000px){ .foot-grid{grid-template-columns:1fr 1fr;gap:36px 28px} .foot-brand{grid-column:1 / -1} }
  @media (max-width:560px){ .foot-grid{grid-template-columns:1fr} .site-foot{padding:48px 0 24px} }
  /* the columns are <nav>s: undo the top bar's grid and fixed height */
  nav.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px;height:auto;grid-template-columns:none;text-align:left}
  body .foot-cta .btn-primary{background:#CCFF66;border-color:#CCFF66;color:var(--navy)}
  body .foot-cta .btn-primary:hover{background:#DDFF8F;border-color:#DDFF8F;filter:none}

  /* ---- home messaging pass (2026-10-09) ---- */
  .hero-cta{justify-content:flex-start;margin-top:26px}
  body.home .hero-spot .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
  body.home .hero-spot .btn-ghost:hover{background:rgba(255,255,255,.1)}
  .outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .outcomes > div{padding-top:18px;border-top:3px solid #CCFF66}
  .outcomes h3{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
  .outcomes p{font-size:16px;font-weight:300;color:var(--muted);line-height:1.55;margin-top:8px}
  @media (max-width:920px){ .outcomes{grid-template-columns:1fr;gap:24px} }
  /* placeholder proof stays out of sight until there is a real logo or quote */
  body.home #clients,body.home #testimonials{display:none}
  /* the bands alternate again with the new order: hero W, outcomes S, industries W,
     diagram S, lifecycle W, field app S, services W, FAQ S, closing navy */
  body.home #why,body.home #modules,body.home #see,body.home #faq{
    background:var(--band);border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}
  body.home #industries,body.home #crm,body.home #services{background:#fff;border:0}
  .outcomes{gap:36px 32px}
  @media (min-width:921px) and (max-width:1180px){ .outcomes{grid-template-columns:repeat(2,minmax(0,1fr))} }

  /* ================= why BaseLeap, as a statement (2026-10-09) ================= */
  body.home #why{background:var(--navy);border:0;color:#fff;padding:96px 0 88px;overflow-x:clip} /* the tiles wait off-edge before they settle */
  .why-head{max-width:20em;margin-bottom:48px}
  .why .sec-eyebrow{color:#CCFF66}
  .why h2{color:#fff;font-size:clamp(32px,3.8vw,54px);line-height:1.08;letter-spacing:-.02em}
  .why h2 .lime{color:#CCFF66}

  /* the patchwork becoming one */
  .merge{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:56px}
  /* separate tools stacked on a separate CRM (owner, 2026-10-13) */
  .merge-from{position:relative;display:flex;flex-direction:column;gap:22px}
  .tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .tools .tool{padding:11px 4px;font-size:13.5px;text-align:center}
  @media (max-width:1240px){
    .tools{display:flex;flex-wrap:wrap;justify-content:center}
    .tools .tool{padding:9px 12px}
    .tools .tool::after{display:none}
  }
  .tool{position:relative;padding:11px 16px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
    color:#fff;font-size:15px;font-weight:600;white-space:nowrap;transform:rotate(var(--r,0deg));
    box-shadow:0 10px 30px rgba(0,0,0,.25)}
  /* a dashed lead from each tool down to the CRM it is retyped into */
  .tools .tool::after{content:"";position:absolute;left:50%;top:100%;height:23px;border-left:1.5px dashed rgba(255,255,255,.35)}
  .tool.t1{--r:-3deg} .tool.t2{--r:2deg} .tool.t3{--r:-1deg} .tool.t4{--r:3deg} .tool.t5{--r:-2deg}
  .tool.crm{display:grid;place-items:center;min-height:96px;font-size:20px;border-radius:16px;border-style:dashed;
    background:rgba(255,255,255,.05);--r:0deg}
  .merge-cap{display:block;font-style:normal;font-size:13.5px;color:#aeb6d6;text-align:center}
  .merge-to .merge-cap{position:absolute;left:0;right:0;bottom:-30px}
  .merge-arrow{color:#CCFF66;display:grid;place-items:center}
  .merge-arrow svg{width:80px;height:24px}
  .merge-to{position:relative}
  .one{border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(204,255,102,.55);padding:26px 26px 22px;
    box-shadow:0 0 0 6px rgba(204,255,102,.08),0 30px 70px rgba(0,0,0,.35)}
  .one img{height:28px;width:auto;display:block}
  .one .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .one .chips span{padding:7px 12px;border-radius:500px;background:#fff;color:var(--navy);font-size:13.5px;font-weight:600}
  .one .base{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#CCFF66}
  /* the tiles start flung apart and settle as the band scrolls in */
  html.anim .merge .tool{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(calc(var(--r,0deg) * 4));
    transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .6s ease;transition-delay:calc(var(--i) * 90ms)}
  html.anim .merge.seen .tool{opacity:1;transform:rotate(var(--r,0deg))}
  .tool.t1{--dx:-50px;--dy:-40px;--i:0} .tool.t2{--dx:-20px;--dy:-50px;--i:1} .tool.t3{--dx:0;--dy:-60px;--i:2}
  .tool.t4{--dx:20px;--dy:-50px;--i:3} .tool.t5{--dx:50px;--dy:-40px;--i:4} .tool.t6{--dx:0;--dy:40px;--i:5}
  html.anim .merge .one{opacity:0;transform:scale(.92);transition:transform .9s cubic-bezier(.2,.7,.2,1) .5s,opacity .6s ease .5s}
  html.anim .merge.seen .one{opacity:1;transform:none}

  /* two persona doors, full-bleed photo behind the copy (owner, MYOB style, 2026-10-13) */
  body.home #start{padding:56px 0 96px}
  .doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:600px;border-radius:24px;overflow:hidden;
    color:#fff;background:var(--navy);isolation:isolate;box-shadow:0 24px 60px rgba(10,14,51,.18);transition:transform .25s ease,box-shadow .25s ease}
  .door:hover{transform:translateY(-4px);box-shadow:0 32px 70px rgba(10,14,51,.26)}
  /* the person is a cut-out (img/personas, from the owner's Gemini set) standing on a
     BaseLeap colour fade, MYOB style; anchored to the bottom so the head sits high */
  .door.d1{background:
      radial-gradient(70% 55% at 72% 22%,rgba(204,255,102,.55),rgba(204,255,102,0) 70%),
      linear-gradient(165deg,#2F6BFF 0%,#1F3FBF 38%,#121a63 68%,#0a0e33 100%)}
  .door.d2{background:
      radial-gradient(70% 55% at 30% 20%,rgba(127,166,255,.7),rgba(127,166,255,0) 70%),
      linear-gradient(195deg,#CCFF66 0%,#5BBE4E 22%,#1d6b5a 46%,#122a5c 70%,#0a0e33 100%)}
  .door-pic{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;
    z-index:-2;transition:transform .6s ease;transform-origin:center bottom;
    /* the source crop cuts the shoulders off square; fade the sides into the ground */
    -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - 230px),#000 calc(50% - 150px),#000 calc(50% + 150px),transparent calc(50% + 230px));
            mask-image:linear-gradient(90deg,transparent calc(50% - 230px),#000 calc(50% - 150px),#000 calc(50% + 150px),transparent calc(50% + 230px))}
  .door:hover .door-pic{transform:scale(1.03)}
  /* the scrim keeps the copy legible over the lower half of the figure */
  .door::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(10,14,51,0) 40%,rgba(10,14,51,.75) 60%,rgba(10,14,51,.96) 100%)}
  .door-body{display:flex;flex-direction:column;padding:32px 32px 28px}
  .door-k{align-self:flex-start;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--navy);background:#CCFF66;padding:6px 11px;border-radius:500px}
  .door h3{font-size:clamp(24px,2.3vw,30px);font-weight:700;letter-spacing:-.015em;line-height:1.15;margin-top:14px;color:#fff}
  .door ul{list-style:none;display:grid;gap:9px;margin-top:16px}
  .door li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.45;color:#e3e7f3}
  .door li::before{content:"";position:absolute;left:0;top:.15em;width:16px;height:16px;border-radius:50%;background:#CCFF66 var(--tick-y) center/9px no-repeat}
  .door-go{padding-top:20px;font-weight:600;color:#CCFF66}

  /* three proofs, each a line of big type with a close-up beside it */
  body.home #proofs{background:var(--band);border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line);padding:40px 0}
  .prow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;padding:56px 0}
  .prow + .prow{border-top:1px solid var(--band-line)}
  .prow.flip .prow-text{order:2}
  .prow h2{font-size:clamp(28px,3vw,42px)}
  .prow-text p{font-size:17px;font-weight:300;color:var(--muted);line-height:1.55;margin-top:14px;max-width:30em}
  .prow .cap-link{display:inline-block;margin-top:18px;font-size:15px;font-weight:600;color:var(--acc)}
  body.home .fvis{background:var(--acc-tint);padding:36px}
  body.home .fvis.phone{padding:28px 0 32px}
  body.home .fvis .mock{font-size:13.5px}

  @media (max-width:920px){
    body.home #why{padding:64px 0}
    .merge{grid-template-columns:1fr;gap:44px}
    .merge-arrow svg{transform:rotate(90deg)}
    .merge-from{margin-bottom:6px}
    .tools{display:flex;flex-wrap:wrap;justify-content:center}
    .tools .tool{padding:9px 12px}
    .tools .tool::after{display:none}
    .tool{font-size:13.5px;padding:9px 12px}
    .doors{grid-template-columns:1fr}
    /* one column: the card is too narrow to stand the person behind the copy, so
       the figure stands on top and the copy follows */
    .door{min-height:0;justify-content:flex-start}
    .door-pic{position:relative;height:340px;flex:none}
    .door::before{background:linear-gradient(180deg,rgba(10,14,51,0) 34%,rgba(10,14,51,.92) 50%,#0a0e33 100%)}
    .door-body{margin-top:-56px;padding:0 24px 26px}
    body.home #start{padding:32px 0 64px}
    .prow{grid-template-columns:1fr;gap:28px;padding:40px 0}
    .prow.flip .prow-text{order:0}
  }
  @media (max-width:920px){ .prow{grid-template-columns:minmax(0,1fr)} .prow .fvis-main{overflow:hidden} .prow .mock{min-width:0} }
  .why-head{max-width:none}
  .why h2{max-width:15em}

  /* built for your industry: one row per solution (owner, 2026-10-13) */
  .proofs-head{padding-top:48px;margin-bottom:8px}
  .prow-k{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--acc);padding:6px 11px;border-radius:500px;background:rgba(var(--acc-rgb),.1);margin-bottom:14px}
  .prow h3{font-size:clamp(26px,2.8vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.12}
  .prow h3 .g{color:var(--acc)}
  .mk-gantt em.clash{position:absolute;top:-2px;bottom:-2px;border-radius:.4em;background:repeating-linear-gradient(135deg,rgba(239,68,68,.45) 0 6px,rgba(254,226,226,.6) 6px 12px);border:1.5px dashed #dc2626}
  .mk-refuse{margin-top:1em;font-size:.92em;color:#475569;line-height:1.5}
  .mk-refuse .mk-chip{margin-right:.4em}
  @media (max-width:520px){ body.home #proofs .mock{font-size:11px} body.home #proofs .mk-table td,body.home #proofs .mk-table th{padding-left:.9em;padding-right:.9em} body.home #proofs .mk-table :is(td,th):nth-child(2){display:none} }

  /* bigger header wordmark (owner, 2026-10-13). The SVG carries ~25% empty margin
     round the glyphs, so the height is generous and the left margin pulls it back
     onto the page edge. Between 921px and 1280px the bar is full, and the room left
     for the mark saws up and down as the link tiers step, so the height is fluid
     within each tier, fitted to measured maxima (30px of room at 930, 1070, 1190). */
  header .brand img{--lh:54px;height:var(--lh);margin-left:calc(var(--lh) * -.24)}
  @media (max-width:1280px){ header .brand img{--lh:clamp(26px,calc(28vw - 299px),54px)} }
  @media (max-width:1180px){ header .brand img{--lh:clamp(24px,calc(30vw - 296px),50px)} }
  @media (max-width:1060px){ header .brand img{--lh:clamp(26px,calc(30vw - 270px),42px)} }
  @media (max-width:1000px){ header .brand img{--lh:clamp(22px,calc(30vw - 252px),42px)} }
  @media (max-width:920px){ header .brand img{--lh:40px} }
  @media (max-width:380px){ header .brand img{--lh:34px} }

  /* sideways-scroll fixes (2026-10-13): decorations that sit past their column
     must not widen the page. #modules: the layer diagram's leader line is drawn
     for the old width for a moment during a resize. .frow: the offset second
     shot hangs 34px past the wrap. On phones the feature grid collapses to a
     plain 1fr, which grows to fit a nowrap mock table; minmax(0,1fr) holds it. */
  #modules,.frow{overflow-x:clip}
  @media (max-width:920px){ .frow-grid{grid-template-columns:minmax(0,1fr)} }
  @media (max-width:520px){ .fvis-sub .mock{font-size:10.5px} .fvis-sub .mk-table td,.fvis-sub .mk-table th{padding-left:.8em;padding-right:.8em} }

  /* services: the in-house administrator, a persona cut-out (assets/people) on a flat
     navy tile with a lime disc; flat to match body.flat (owner trial, 2026-10-13) */
  .own-run.has-pic{grid-template-columns:230px minmax(0,1fr) minmax(0,1fr);padding-left:30px}
  .own-run-pic{position:relative;align-self:stretch;min-height:300px;margin:-30px 0 -30px -30px;border-radius:24px 0 0 24px;
    background:var(--navy);overflow:hidden;isolation:isolate}
  .own-run-pic::before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:#CCFF66;
    left:50%;top:28px;transform:translateX(-50%);z-index:-1}
  .own-run-pic img{position:absolute;left:50%;bottom:0;height:calc(100% - 20px);width:auto;max-width:none;transform:translateX(-50%)}
  @media (max-width:920px){
    .own-run.has-pic{grid-template-columns:1fr;padding-left:24px}
    .own-run-pic{min-height:280px;margin:-24px -24px 0;border-radius:24px 24px 0 0}
  }

  /* ---- TRIAL (owner, 2026-10-13, own commit, revertable): the bar back to
     brand navy #000036, and the hero card's copy half white. The header
     wordmark (HTML, all 16 pages) moves to the on-dark lime italic in the
     same commit. ---- */
  header{background:#000036;border-bottom:0}
  header.stuck{box-shadow:0 6px 24px rgba(0,0,54,.35)}
  .nav-links a,.menu-btn,.btn-ghost-sm{color:#fff}
  .nav-links a:hover,.menu-btn:hover,.has-menu.open > .menu-btn,.btn-ghost-sm:hover{color:#CCFF66}
  .btn-ghost-sm{border-color:rgba(255,255,255,.35)}
  .btn-ghost-sm:hover{background:rgba(255,255,255,.08);border-color:#CCFF66}

  body.home .hero-spot .spot-copy{background:#fff}
  body.home .hero-spot h1{color:var(--ink)}
  body.home .hero-spot h1 .grad{color:var(--red-2)}
  body.home .hero-spot .spot-copy > p.lede{color:var(--muted)}
  body.home .hero-spot .btn-ghost{color:var(--ink);border-color:var(--blue-brand)}
  body.home .hero-spot .btn-ghost:hover{background:rgba(47,107,255,.08)}

  /* the photo band on WHITE (owner, 2026-10-13: field service "What it covers"). Opt-in
     per page with .light; the photo fades into white instead of navy. */
  .photo-band.light{background:#fff;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  body.sol .photo-band.light::after,.photo-band.light::after{background:
    linear-gradient(90deg,#fff 0%,#fff 44%,rgba(255,255,255,.7) 52%,rgba(255,255,255,.12) 72%,rgba(255,255,255,0) 100%)}
  .photo-band.light h2,.photo-band.light .iconrow h3{color:var(--ink)}
  .photo-band.light .sec-head p,.photo-band.light .iconrow p{color:var(--muted)}
  body.sol .photo-band.light .sec-eyebrow,body.sol .photo-band.light .iconrow .ic{color:var(--acc)}
  @media (max-width:920px){
    body.sol .photo-band.light::after,.photo-band.light::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 180px,#fff 280px)}
  }

  /* about: why it exists, three numbered reasons and a "built by people" note (2026-10-13) */
  .about-split .why-tag{font-size:20px;font-weight:400;color:var(--ink);margin-top:14px}
  .why-list{list-style:none;counter-reset:why;display:grid;gap:18px;margin-top:26px}
  .why-list li{counter-increment:why;position:relative;padding-left:52px;font-size:16px;line-height:1.6;color:var(--muted)}
  .why-list li::before{content:counter(why);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;background:#CCFF66;color:var(--navy);font-weight:700;font-size:15px}
  .why-list b,.why-built b{color:var(--ink);font-weight:700}
  .about-split .why-built{margin-top:26px;padding:18px 20px;border-left:4px solid #CCFF66;background:var(--bg-soft);
    border-radius:0 14px 14px 0;font-size:15.5px;line-height:1.6}

  /* /industries (2026-10-13): one feature row per industry, coloured by its main solution */
  .ind-sols{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
  .ind-sols > span{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
  .ind-sols a{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:500px;border:1px solid rgba(10,14,51,.14);
    background:#fff;color:var(--ink);font-size:14px;font-weight:600;transition:border-color .2s ease}
  .ind-sols a:hover{border-color:var(--acc)}
  .ind-sols a i{width:9px;height:9px;border-radius:50%;background:var(--acc)}
  .ind-sols .soon{margin-left:2px}
  .ind-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
  .ind-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ind-mosaic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
  .ind-mosaic img:nth-child(2){transform:translateY(22px)} .ind-mosaic img:nth-child(4){transform:translateY(22px)}
  .frow h2 .soon{vertical-align:middle;margin-left:8px}
  .ind-more{margin-top:28px;text-align:center}
  .ind-more .cap-link{font-size:16px;font-weight:600;color:var(--blue-brand)}
  /* every second industry sits on a darker stone card (owner, 2026-10-13) */
  .ind-row{padding:56px 0}
  .ind-row.alt .frow-grid{background:#e7e5e4;border-radius:32px;padding:56px}
  .ind-row.alt .frow ul,.ind-row.alt ul{border-top-color:rgba(10,14,51,.14)}
  @media (max-width:920px){
    .ind-row{padding:36px 0}
    .ind-row.alt .frow-grid{padding:28px 20px;border-radius:24px}
  }

  /* TRIAL (owner, 2026-10-13, own commit, revertable): the home hero band flat soft green, no gradient */
  body.home .hero-bg{background:#EEFFC2}

  /* home hero on phones (owner, 2026-10-13): three stacked gutters (16 band + 24 wrap +
     52 card, a later desktop rule beat the 24px phone padding) left the copy 206px of 390.
     One 12px gutter outside the card, 22px inside it. */
  @media (max-width:920px){
    body.home .hero-split{padding:20px 12px 40px}
    body.home .hero-split .wrap{padding-left:0;padding-right:0}
    body.home .hero-spot .spot-copy{padding:30px 22px 28px}
  }
  /* the workflow mock: steps are configured, not crossed off */
  .mock.wf .mk-check.done span{text-decoration:none;color:var(--ink)}
  /* home bands after the industries band left (2026-10-13): re-alternate from #proofs */
  body.home #modules,body.home #see,body.home #faq{background:#fff;border-top:0;border-bottom:0}
  body.home #crm,body.home #services{background:var(--band);border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}

  /* home #proofs: four platform cards under the three rows (owner, 2026-10-13) */
  .core-cards{padding:48px 0 56px;border-top:1px solid var(--band-line)}
  .core-title{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:22px}
  .core-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .core-card{display:flex;flex-direction:column;padding:26px 24px 22px;border-radius:20px;background:#fff;
    border:1px solid rgba(10,14,51,.1);color:var(--ink);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
  .core-card:hover{border-color:var(--blue-brand);transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,14,51,.1)}
  .core-card svg{width:42px;height:42px;padding:9px;border-radius:12px;background:var(--navy);color:#CCFF66}
  .core-card h4{font-size:19px;font-weight:700;margin-top:16px}
  .core-card p{font-size:15px;line-height:1.55;color:var(--muted);margin-top:8px}
  .core-go{margin-top:auto;padding-top:16px;font-size:14.5px;font-weight:600;color:var(--blue-brand)}
  @media (max-width:1100px){ .core-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:600px){ .core-grid{grid-template-columns:minmax(0,1fr)} .core-cards{padding:36px 0 40px} }

  /* home services: one card, photo left, light panel right (owner, 2026-10-13: the two
     dark cards were too busy) */
  .svc-combo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:24px;overflow:hidden;
    background:#fff;border:1px solid rgba(10,14,51,.1);box-shadow:0 24px 60px rgba(10,14,51,.08)}
  .svc-combo-pic{position:relative;min-height:100%}
  .svc-combo-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
  .svc-combo-body{display:flex;flex-direction:column;padding:12px 40px}
  .svc-step{display:block;padding:26px 0;color:var(--ink)}
  .svc-step + .svc-step{border-top:1px solid rgba(10,14,51,.1)}
  .svc-step .eb{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-brand)}
  .svc-step h3{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-top:8px}
  .svc-step p{font-size:15.5px;font-weight:300;line-height:1.55;color:var(--muted);margin-top:8px;max-width:40em}
  .svc-step .go{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;color:var(--blue-brand)}
  .svc-step:hover .go{text-decoration:underline}
  @media (max-width:920px){
    .svc-combo{grid-template-columns:1fr}
    .svc-combo-pic{min-height:240px}
    .svc-combo-body{padding:4px 22px}
  }

  /* footer on light stone-100 (owner, 2026-10-13); colour wordmark swapped in on every page */
  .site-foot{background:#f5f5f4;color:var(--ink);border-top:1px solid #e7e5e4}
  .foot-brand p{color:var(--muted)}
  .foot-col h4{color:var(--blue-brand)}
  .foot-col a{color:var(--ink)}
  .foot-col a:hover{color:var(--blue-brand)}
  .foot-col .soon{background:rgba(10,14,51,.08);color:var(--ink)}
  .foot-cta .btn-ghost{color:var(--ink);border-color:rgba(10,14,51,.25)}
  .foot-cta .btn-ghost:hover{background:rgba(10,14,51,.05)}
  body .foot-cta .btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
  body .foot-cta .btn-primary:hover{background:#1b2150;border-color:#1b2150}
  .foot-bar{border-top-color:#e7e5e4;color:var(--muted)}
  .foot-brand img{height:46px;margin-left:-11px}

  /* footer social icons (2026-10-13). Placeholders until the owner supplies the URLs:
     a[data-placeholder] does nothing on click (site.js) */
  .foot-social{display:flex;gap:10px;margin-top:20px}
  .foot-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;
    transition:background .2s ease}
  .foot-social a:hover{background:#CCFF66;color:var(--navy)}
  .foot-social svg{width:18px;height:18px}

  /* legal pages (customer terms, privacy policy, website terms) */
  .legal{padding:56px 0 96px}
  .legal-meta{margin-top:18px;font-size:14px;color:rgba(255,255,255,.72)}
  .legal-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
  .legal-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:28px;font-size:14px}
  .legal-side h4{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  .legal-side nav{display:flex;flex-direction:column;align-items:flex-start;gap:7px;height:auto;grid-template-columns:none}
  .legal-side a{color:var(--ink);line-height:1.35}
  .legal-side a:hover{color:var(--blue-brand)}
  .legal-body{max-width:46em;font-size:16px;line-height:1.7;color:#2a3142}
  .legal-body h2{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:44px 0 12px;scroll-margin-top:96px}
  .legal-body h2:first-of-type{margin-top:8px}
  .legal-body p{margin:0 0 12px}
  .legal-body ul{margin:0 0 14px;padding-left:1.3em;list-style:disc}
  .legal-body ul ul{margin:6px 0 0;list-style:circle}
  .legal-body li{margin:0 0 6px}
  .legal-body a{color:var(--blue-brand);text-decoration:underline;text-underline-offset:2px}
  .legal-draft{padding:14px 16px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;color:#78350f;font-size:14.5px;margin-bottom:28px!important}
  mark.ph{background:#fef08a;color:inherit;padding:0 .2em;border-radius:3px}
  .legal-hero mark.ph{color:#422006}
  .foot-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap;height:auto;grid-template-columns:none}
  .foot-legal a{color:inherit}
  .foot-legal a:hover{color:var(--ink);text-decoration:underline}
  @media (max-width:920px){ .legal-grid{grid-template-columns:minmax(0,1fr);gap:32px} .legal-side{position:static} .legal-toc{display:none!important} }

  /* TRIAL (owner, 2026-10-31, own commit, revertable): a darker home hero band, navy
     (the header colour) fading to forest green, so the white card stands out. Replaces
     the soft green #EEFFC2 trial above. */
  body.home .hero-bg{background:linear-gradient(180deg,#000036 0%,#0E5A26 100%)}
  /* a thin blue to indigo border round the card, the colours of the header stripe (owner,
     2026-10-31). A gradient border: white fills the padding box, the gradient shows in the
     transparent border. */
  body.home .hero-spot{border:2px solid transparent;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#2F6BFF 0%,#4B4ACF 100%) border-box;
    box-shadow:0 30px 70px rgba(0,20,8,.45)}

  /* home hero heading heavier (owner, 2026-10-31). Weight 900 needs the 300..900 DM Sans
     range, which only index.html loads; other pages stay on 300..700. */
  body.home .hero-spot h1{font-weight:900;letter-spacing:-.025em}

  /* header Login button: blue outline (owner, 2026-10-31); hover keeps the lime */
  .btn-ghost-sm{border-color:#2F6BFF}

  /* thicker 2px outlines on the header Login and the hero See it in action (owner, 2026-10-31) */
  .btn-ghost-sm,body.home .hero-spot .btn-ghost{border-width:2px}

  /* home hero: the industries are in the headline, and each solution is a plain text link
     under the lede (owner, 2026-10-31: no sub cards, no colour coding). */
  body.home .hero-spot h1{font-size:clamp(32px,3.2vw,46px);line-height:1.08}
  .hero-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:20px}
  .hero-links a{font-size:15px;white-space:nowrap;font-weight:700;color:var(--ink);border-bottom:2px solid #2F6BFF;padding-bottom:2px;transition:color .18s ease}
  .hero-links a span{color:#2F6BFF}
  .hero-links a:hover{color:#2F6BFF}
  body.home .hero-spot .spot-copy > p.lede{font-size:17px;margin-top:16px}
  @media (min-width:921px){ body.home .hero-spot{grid-template-columns:minmax(0,48fr) minmax(0,52fr)} }

  /* contact: two ways in, a question or a call back (owner, 2026-10-31) */
  .form-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:24px;border-radius:500px;background:var(--bg-soft,#f3f4f8)}
  .form-tabs button{font:inherit;font-size:15px;font-weight:600;height:42px;border:0;border-radius:500px;background:transparent;color:var(--muted);cursor:pointer}
  .form-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(10,14,51,.12)}
  #callback-form{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
  .form-tabs:not([hidden]) ~ #callback-form{margin-top:0;padding-top:0;border-top:0}
  .form-title{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.01em;scroll-margin-top:120px}
  .form-intro{font-size:15px;color:var(--muted);line-height:1.55;margin:8px 0 20px}
  form[hidden]{display:none}
  /* contact: honeypot off screen (not display:none, which some bots skip), and the failure notice */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .form-failed{background:#fdecea;color:#7a1f17;border:1px solid #f3b8b0}
  .form-failed a{color:inherit;text-decoration:underline}

  /* owner feedback 2026-11-02 */
  /* #why diagram: seven separate tools, all on one level and no hub between them */
  .tools{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px}
  .tools .tool{flex:0 0 calc(25% - 8px)}
  @media (max-width:920px){ .tools .tool{flex:0 0 auto} }
  .tools .tool::after{display:none}
  .tool.t6{--r:2deg} .tool.t7{--r:-2deg}
  .tool.t6{--dx:-30px;--dy:40px;--i:5} .tool.t7{--dx:30px;--dy:40px;--i:6}
  /* the common layer every solution sits on */
  .one .common{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:12px 14px;border-radius:14px;
    background:rgba(204,255,102,.12);border:1px solid rgba(204,255,102,.45)}
  .one .common-k{flex-basis:100%;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#CCFF66}
  .one .common b{padding:6px 11px;border-radius:8px;background:#CCFF66;color:var(--navy);font-size:13.5px;font-weight:700}
  /* #proofs: square badges in the mocks, and the small headings without a pill */
  #proofs .mk-chip{border-radius:4px}
  .prow-k{padding:0;background:none;border-radius:0}
  /* about: the product screen in place of the stock photo */
  .about-split img.about-shot{object-fit:cover;object-position:left top;box-shadow:0 0 0 1px rgba(10,14,51,.1),0 24px 60px rgba(10,14,51,.18)}
  #team[hidden]{display:none}
  /* the industry solutions band moved above #proofs, so the client strip turns white to keep the bands alternating */
  body.home .clients{background:#fff;border-top:0;border-bottom:0}

  /* ===== owner feedback round 3 (2026-11-02) ===== */
  /* home: Why BaseLeap is now the second panel, on the grey band instead of navy */
  body.home #why{background:var(--band);color:var(--ink);border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}
  body.home #why .sec-eyebrow{color:var(--blue-brand)}
  body.home #why h2{color:var(--ink)}
  body.home #why h2 .lime{color:var(--red-2)}
  body.home #why .tool{background:#fff;border-color:rgba(10,14,51,.14);color:var(--ink);box-shadow:0 10px 26px rgba(10,14,51,.08)}
  body.home #why .merge-cap{color:var(--muted)}
  body.home #why .merge-arrow{color:var(--red-2)}
  body.home #why .one{background:var(--navy);color:#fff;box-shadow:0 0 0 6px rgba(204,255,102,.18),0 30px 70px rgba(10,14,51,.28)}
  /* bands for the new order: why S, industries W, starting out S, CRM W, lifecycle S, field app W, services S, FAQ W */
  body.home #start{background:var(--band);border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}
  body.home #proofs{background:#fff;border-top:0;border-bottom:0}

  /* about: five things you can hold us to, on a wave, as gradient cards */
  .hold{position:relative;overflow:hidden;isolation:isolate}
  .hold-wave{position:absolute;left:0;right:0;top:50%;width:100%;height:520px;transform:translateY(-38%);z-index:-1;pointer-events:none}
  .hold-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .hold-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;
    box-shadow:0 2px 6px rgba(10,14,51,.05),0 24px 50px rgba(10,14,51,.12);transition:transform .25s ease,box-shadow .25s ease}
  .hold-card:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(10,14,51,.05),0 32px 64px rgba(10,14,51,.18)}
  .hold-art{position:relative;height:150px;display:grid;place-items:center;color:#fff}
  .hold-art svg{width:68px;height:68px;filter:drop-shadow(0 6px 14px rgba(10,14,51,.25))}
  .hold-n{position:absolute;left:16px;top:14px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.85)}
  .hold-card.g1 .hold-art{background:radial-gradient(70% 70% at 75% 20%,rgba(204,255,102,.55),rgba(204,255,102,0) 70%),linear-gradient(160deg,#2F6BFF,#1F3FBF 55%,#121a63)}
  .hold-card.g2 .hold-art{background:radial-gradient(70% 70% at 25% 20%,rgba(127,166,255,.6),rgba(127,166,255,0) 70%),linear-gradient(160deg,#6366F1,#4B4ACF 50%,#2a2a7a)}
  .hold-card.g3 .hold-art{background:radial-gradient(70% 70% at 75% 15%,rgba(204,255,102,.75),rgba(204,255,102,0) 70%),linear-gradient(195deg,#7FD34E,#1F8A3F 45%,#0E5A26)}
  .hold-card.g4 .hold-art{background:radial-gradient(70% 70% at 25% 20%,rgba(94,234,212,.55),rgba(94,234,212,0) 70%),linear-gradient(160deg,#0E7490,#155e75 55%,#122a5c)}
  .hold-card.g5 .hold-art{background:radial-gradient(70% 70% at 70% 20%,rgba(204,255,102,.5),rgba(204,255,102,0) 70%),linear-gradient(160deg,#1F3FBF,#121a63 55%,#0a0e33)}
  .hold-body{padding:20px 20px 22px}
  .hold-body h4{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .hold-body p{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:8px}
  @media (max-width:1180px){ .hold-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media (max-width:760px){ .hold-grid{grid-template-columns:minmax(0,1fr)} .hold-art{height:120px} }

  /* ===== owner feedback round 4 (2026-11-02) ===== */
  /* the common platform: the CRM and automation elements from the platform diagram */
  .one .common{display:block;padding:14px 14px 16px}
  .one .common-k{display:block;margin-bottom:4px}
  .one .common-grp{margin-top:10px}
  .one .grp-k{display:block;font-size:12.5px;font-weight:700;color:#fff;margin-bottom:7px}
  .one .grp-chips{display:flex;flex-wrap:wrap;gap:6px}
  .one .grp-chips i{font-style:normal;font-size:12px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap}
  .one .grp-chips.crm i{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff}
  .one .grp-chips.auto i{background:#CCFF66;color:var(--navy)}
  /* the separate tools each carry an icon */
  .tools .tool{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 11px}
  .tools .tool svg{width:24px;height:24px;color:var(--blue-brand)}
  body.home #why .tool svg{color:#4B4ACF}
  @media (max-width:920px){ .tools .tool{flex-direction:row;gap:7px;padding:9px 12px} .tools .tool svg{width:18px;height:18px} }
  /* Getting started: white at the top, into the stone of the band */
  body.home #start{background:linear-gradient(180deg,#fff 0%,#e7e5e4 100%);border-top:0;border-bottom:0}
  .start-head{margin-bottom:36px}
  /* the solutions in the Why BaseLeap diagram carry a blue outline (owner, 2026-11-02) */
  .one .chips span{border:2px solid #2F6BFF}
  body.home #proofs[hidden]{display:none}

  /* ===== owner feedback round 5 (2026-11-02) ===== */
  /* Quotes and Inventory under What it replaces */
  .crm-cards{grid-template-columns:repeat(2,minmax(0,1fr));margin:28px 0 32px}
  @media (max-width:600px){ .crm-cards{grid-template-columns:minmax(0,1fr)} }
  /* the swirl down the lower panels (same strokes as the about page wave) */
  body.home #crm,body.home #see,body.home #services,body.home #faq{position:relative;isolation:isolate;overflow-x:clip}
  .swirl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
  .swirl path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:butt}
  .swirl .sw-thick{stroke-width:110px;opacity:.16}
  .swirl .sw-thin{stroke-width:28px;opacity:.28}
  @media (max-width:760px){ .swirl .sw-thick{stroke-width:70px} .swirl .sw-thin{stroke-width:18px} }
  /* What it replaces picks up the Getting started stone and eases back to the band */
  body.home #crm{background:linear-gradient(180deg,#e7e5e4 0,var(--band) 420px);border-top:0}

  /* owner feedback round 6 (2026-11-02) */
  /* a dividing line between Getting started and What it replaces */
  body.home #crm{border-top:1px solid rgba(10,14,51,.12)}
  /* deeper shadows on the Getting started cards */
  body.home .door{box-shadow:0 2px 8px rgba(10,14,51,.10),0 32px 70px rgba(10,14,51,.30)}
  body.home .door:hover{box-shadow:0 2px 8px rgba(10,14,51,.12),0 40px 84px rgba(10,14,51,.38)}
  /* the lifecycle diagram: a soft blue glow so it stands out */
  body.home #crm .flow{margin-top:8px;box-shadow:0 0 0 1px rgba(47,107,255,.35),0 0 34px rgba(47,107,255,.28),0 20px 50px rgba(47,107,255,.18)}

  /* What it replaces on navy, for contrast down the page (owner, 2026-11-02) */
  body.home #crm{background:var(--navy);color:#fff;border-top:0;border-bottom:0}
  body.home #crm .sec-eyebrow{color:#CCFF66}
  body.home #crm .sec-head h2{color:#fff}
  body.home #crm .sec-head p{color:#cfd6ee}
  body.home #crm .flow{box-shadow:0 0 0 1px rgba(127,166,255,.55),0 0 40px rgba(47,107,255,.45),0 24px 60px rgba(0,0,0,.35)}
  body.home #crm .core-card{box-shadow:0 20px 50px rgba(0,0,0,.3)}
  body.home #crm .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
  body.home #crm .btn-ghost:hover{background:rgba(255,255,255,.1)}
  body.home #crm .swirl .sw-thick{opacity:.22} body.home #crm .swirl .sw-thin{opacity:.4}
  body.home #crm .flow,body.home #crm .flow h4{color:var(--ink)}
  /* swirls on any page: a section with data-swirl holds one segment (owner, 2026-11-02) */
  section[data-swirl]{position:relative;isolation:isolate;overflow-x:clip}
  section[data-swirl] .flow{background:#fff}