/* 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:#ff7a1a; --red-2:#f06300; --on-red:#0a0e33; --red-text:#f06300;
    /* 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:#ff7a1a;
  }
  /* 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(255,122,26,.5) 10%, rgba(255,122,26,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(255,122,26,.14) 0%, rgba(255,122,26,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:#ff9147;border-color:#ff9147}
  .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(255,122,26,.20) 0%, rgba(255,122,26,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}
  .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{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--red-2)}
  .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:#ff9147;border-color:#ff9147}
  .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)}
  h2 .g{color:var(--red-2)}
  .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}
  .lay-row{display:grid;grid-template-columns:215px 1fr 290px;align-items:center;
    gap:20px;min-height:472px}

  .lay-labels{display:grid;gap:2px;justify-items:start}
  .lay-label{font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(10,14,51,.42);padding:9px 0;transition:color .35s ease;white-space:nowrap;position:relative;
    background:none;border:0;text-align:left;line-height:1.3;cursor:pointer}
  .lay-label:hover{color:rgba(10,14,51,.72)}
  .lay-label.on:hover{color:var(--blue-deep)}
  .lay-label:focus-visible{outline:2px solid var(--blue-brand);outline-offset:3px;border-radius:4px}
  .lay-label.on{color:var(--blue-brand);font-weight:600}
  /* The leader line only exists for the active label, as in the reference. */
  .lay-label::after{content:"";position:absolute;left:calc(100% + 12px);top:50%;height:1px;width:0;
    background:rgba(47,107,255,.6);transition:width .4s ease}
  .lay-label.on::after{width:clamp(40px,7vw,120px)}

  .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:560px;height:380px;--zs:1.1;transform-style:preserve-3d;
    transform:translateY(60px) rotateX(56deg) rotateZ(-42deg)}
  @media (max-width:1240px){
    .lay-stack{width:500px;height:340px;--zs:1;
      transform:translateY(56px) rotateX(56deg) rotateZ(-42deg)}
  }
  @media (max-width:1120px){
    .lay-stack{width:440px;height:300px;--zs:.9;
      transform:translateY(46px) rotateX(56deg) rotateZ(-42deg)}
    .lay-head p{font-size:16px}
    .lay-row{grid-template-columns:190px 1fr 260px;min-height:400px}
  }
  @media (max-width:1010px){
    .lay-stack{width:390px;height:265px;--zs:.8;
      transform:translateY(42px) rotateX(56deg) rotateZ(-42deg)}
    .lay-row{min-height:360px}
  }
  .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{min-height:150px}
  .lay-cap{display:none}
  .lay-cap.on{display:block}
  .lay-cap h4{font-size:22px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
  .lay-cap p{font-size:16.5px;color:var(--muted);margin-top:10px;line-height:1.5}
  .lay-cap ul{list-style:none;margin-top:12px;display:grid;gap:6px}
  .lay-cap li{font-size:14px;color:var(--muted);font-family:var(--mono);line-height:1.7}

  @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:24px;min-height:0}
    .lay-head{margin-bottom:4px}
    .lay-label::after{display:none}
    .lay-stack{width:min(310px,82vw);height:min(210px,56vw);--zs:.75}
    .lay-cap{display:block;margin-bottom:18px}
  }

  .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(255,122,26,.5) 10%, rgba(255,122,26,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:#ff9147}
  .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(255,122,26,.10);border-color:rgba(255,122,26,.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(255,122,26,.12);border-color:rgba(255,122,26,.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(255,122,26,.06);border-color:rgba(255,122,26,.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,#ff8400 0%,#ffb45c 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(255,132,0,.26) 0%, rgba(255,132,0,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)}
  .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(255,132,0,.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}
  @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(255,122,26,.10);border:1px solid rgba(255,122,26,.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,#ff8400 0%,#ffa53e 52%,#ffc06a 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}
  }