/* Merit Sparrow — site stylesheet
   ================================================================
   Two halves, in this order, and the order matters:

     1. Authored CSS — the motion vocabulary, the FAQ accordion, the
        chat furniture, the prose styles for the legal pages.
     2. Tailwind utilities, compiled from the classes actually used
        across index / privacy / terms.

   Tailwind is second because that is where the Play CDN used to inject
   it — after the page's own <style> — so utilities win ties exactly as
   they did before. Do not reorder.

   Regenerating: this was produced from the browser's own compiled
   output rather than a Node build (there is no Node on the machine it
   was made on). If you add classes to the HTML, either add the matching
   CSS here by hand or rebuild with a real Tailwind CLI.
   ================================================================ */

/* ── 1 · authored ─────────────────────────────────────────────── */

/* Light only, deliberately ────────────────────────────────────────
   The site has one colour scheme. Declaring it stops a dark-mode
   browser from swapping the UA defaults underneath us — form
   controls, scrollbars, the canvas behind the body — and stops
   Chrome's auto-dark-theme from inverting the page on Android.
   There is no prefers-color-scheme rule anywhere in this build and
   there should not be one. Dark SURFACES are fine (the ink footer,
   the invoice card header); a dark THEME is not. */
:root{ color-scheme: light; }
html, body{ background-color:#fff; }


/* Brand mark ──────────────────────────────────────────────────────
   The sparrow's graduation cap is a CUT-OUT, not a white shape: the
   designer ships a light file with a white cap and a dark file with a
   near-black one, because the cap is meant to read as the surface
   showing through the green. One sprite does both — the cap is
   currentColor, so it just needs the colour of whatever it sits on.
   Add a variant here if you place the mark on a new surface; leaving
   it unset gives white, which is right on every light panel we use. */
.ms-mark          { color:#fff; }      /* white cards, header, chat bubbles */
.ms-mark.ms-on-tint { color:#ECFDF5; } /* bg-brand-tint discs — badge, dock */
.ms-mark.ms-on-dark { color:#0F172A; } /* the ink footer */

/* ══ motion vocabulary ═══════════════════════════════════════════════
     Four moves, nothing more. Everything eases out — the page settles into
     place rather than bouncing, which is the tone the copy is going for.
       .reveal    one element rises in
       .rise      a container whose direct children rise in sequence
       .bar-grow  a bar draws to its own width (kept in --w so no-JS is right)
       .rail      the timeline spine draws downward
     JS only ever adds .show; every resting state is declared here.        */
  html.js .reveal{opacity:0;transform:translateY(18px);}
  html.js .reveal.show{opacity:1;transform:none;
    transition:opacity .62s cubic-bezier(.16,.84,.44,1) var(--d,0s),
               transform .62s cubic-bezier(.16,.84,.44,1) var(--d,0s);}

  html.js .rise>*:not([data-norise]){opacity:0;transform:translateY(14px);}
  html.js .rise.show>*:not([data-norise]){opacity:1;transform:none;
    transition:opacity .5s cubic-bezier(.16,.84,.44,1) var(--d,0s),
               transform .5s cubic-bezier(.16,.84,.44,1) var(--d,0s);}

  /* Width lives in --w as well as the inline style, so a visitor with no
     JavaScript sees the finished bar and never the empty one. */
  html.js .bar-grow{width:0 !important;}
  html.js .bar-grow.show{width:var(--w) !important;
    transition:width 1s cubic-bezier(.22,.72,.25,1) .12s;}

  html.js .rail{transform:scaleY(0);transform-origin:top center;}
  html.js .rail.show{transform:scaleY(1);transition:transform 1.1s cubic-bezier(.22,.72,.25,1) .1s;}

  header{transition:box-shadow .25s ease,background-color .25s ease;}
  /* Reading progress, one hairline. It is the only thing on the page that
     moves continuously, which is why it is 2px and not a bar. */
  #progress{transform:scaleX(0);transform-origin:0 50%;will-change:transform;}
  header.scrolled{box-shadow:0 1px 0 rgba(15,23,42,.06),0 10px 30px -22px rgba(15,23,42,.5);}
  section[id]{scroll-margin-top:110px;}
  .num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
  /* Tailwind display utilities out-specify preflight's [hidden]; el.hidden must actually hide. */
  [hidden]{display:none !important;}
  :focus-visible{outline:3px solid #C2410C;outline-offset:3px;border-radius:6px;}

  details>summary{list-style:none;cursor:pointer;}
  details>summary::-webkit-details-marker{display:none;}

  /* ── the FAQ opens and closes on a grid row ─────────────────────────────
     A row animating 0fr → 1fr resolves to the content's own height, so the
     panel slides without anyone measuring anything — no max-height guess to
     get wrong when an answer wraps to a different number of lines.

     It is driven by .is-open, NOT by [open]: JavaScript keeps `open` set for
     the length of the closing animation, because a <details> that loses
     `open` hides its content instantly and there would be nothing left to
     animate. Everything is under html.js, so with no script the panels are
     ordinary blocks and <details> behaves natively. */
  html.js [data-faq] .faq-panel{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .32s cubic-bezier(.2,.8,.25,1);
  }
  html.js [data-faq].is-open .faq-panel{ grid-template-rows:1fr; }
  html.js [data-faq] .faq-panel>*{ overflow:hidden; opacity:0; transition:opacity .16s ease; }
  html.js [data-faq].is-open .faq-panel>*{ opacity:1; transition:opacity .3s ease .08s; }

  /* The hand waves on its own every few seconds — long enough between waves
     that it reads as alive rather than as a loading spinner — and faster while
     the pointer is on the button. Killed outright by prefers-reduced-motion
     along with everything else. */
  @keyframes wave{
    0%,55%,100%{ transform:rotate(0) }
    8%  { transform:rotate(-15deg) }
    16% { transform:rotate(13deg) }
    24% { transform:rotate(-11deg) }
    32% { transform:rotate(10deg) }
    42% { transform:rotate(-5deg) }
  }
  .wave{ display:inline-block; transform-origin:70% 80%; animation:wave 5s ease-in-out infinite; }
  .group:hover .wave, .group:focus-visible .wave{ animation-duration:1.5s; }

  /* ── §2 file popovers ──────────────────────────────────────────────────
     A page of the real document on hover. Pointer only and `lg` and up: it is
     additive, so a phone loses the flourish and nothing else. Never focusable
     — four tab stops in front of the CTA would cost more than this gives. */
  .filepop{
    opacity:0; visibility:hidden;
    transform:translate(-50%,8px) scale(.985);
    transition:opacity .2s ease, transform .22s cubic-bezier(.2,.8,.25,1), visibility .2s;
  }
  .filerow:hover .filepop{ opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); }

  /* No forms on this page. Every call to action is a link to a chat. */

  /* Highlight underline that survives wrapping — an absolutely positioned SVG
     forces whitespace-nowrap, which blew the layout out at 360px. */
  .hl{
    background-image:linear-gradient(#10B981,#10B981);
    background-repeat:no-repeat;
    background-size:100% 3px;
    background-position:0 100%;
    padding-bottom:4px;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }

  .grid-bg{
    background-image:linear-gradient(to right,rgba(15,23,42,.045) 1px,transparent 1px),
                     linear-gradient(to bottom,rgba(15,23,42,.045) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 35%,transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 35%,transparent 78%);
  }

  /* mobile action dock clears the iOS home indicator */
  #dock{padding-bottom:env(safe-area-inset-bottom);}

  /* ── the dock's phone: a disc that grows into the number ────────────────
     Same grid trick as the FAQ panel, on the column axis — the track resolves
     to the text's own width, so nothing has to be measured.

     minmax(0,…) matters: a bare `0fr` track still floors at min-content, and
     the collapsed disc leaked part of the number down its side.

     Gated at 480px because below that it genuinely does not fit — the dock
     already holds a mark, a name, a call button and the Say Hi pill, and an
     expanded number needs about 165px it has not got at 320. Under 480 the
     disc is simply a dial button, which is what a thumb wants anyway. */
  .ph-reveal{ display:grid; grid-template-columns:minmax(0,0fr);
    transition:grid-template-columns .34s cubic-bezier(.2,.8,.25,1); }
  .ph-reveal>span{ overflow:hidden; white-space:nowrap; }
  @media (max-width:479px){ .ph-reveal{ display:none; } }
  @media (min-width:480px){
    .ph-wrap:hover .ph-reveal,
    .ph-wrap:focus-visible .ph-reveal{ grid-template-columns:minmax(0,1fr); }
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
    html.js .reveal,
    html.js .rise>*:not([data-norise]){opacity:1;transform:none;}
    html.js .rail{transform:none;}
    html.js .bar-grow{width:var(--w) !important;}
  }

/* ── the document ──────────────────────────────────────────────────────
     One column, one rhythm. Legal text is read by someone looking for a
     single clause, so the headings carry the weight and the measure stays
     under 72 characters. */
  .doc h2{ font-family:"Plus Jakarta Sans",Inter,sans-serif; font-weight:800; letter-spacing:-.02em;
           color:#0F172A; font-size:21px; line-height:1.25; margin-top:44px; }
  .doc h2:first-child{ margin-top:0; }
  .doc h3{ font-family:"Plus Jakarta Sans",Inter,sans-serif; font-weight:700; color:#0F172A;
           font-size:16px; line-height:1.35; margin-top:26px; }
  .doc p, .doc li{ font-size:15px; line-height:1.72; color:#334155; }
  .doc p{ margin-top:14px; }
  .doc ul{ margin-top:14px; list-style:none; }
  .doc ul li{ position:relative; padding-left:20px; margin-top:9px; }
  .doc ul li::before{ content:""; position:absolute; left:2px; top:11px; width:6px; height:6px;
                      border-radius:9999px; background:#A7F3D0; }
  .doc strong{ font-weight:600; color:#0F172A; }
  .doc a{ color:#1D4ED8; text-decoration:underline; text-underline-offset:2px; }
  .doc a:hover{ color:#0F172A; }

/* ── 2 · tailwind utilities ───────────────────────────────────── */
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
::after, ::before { --tw-content: ''; }
:host, html { line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }
body { margin: 0px; line-height: inherit; }
hr { height: 0px; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, pre, samp { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { appearance: none; }
::-webkit-file-upload-button { appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
fieldset { margin: 0px; padding: 0px; }
legend { padding: 0px; }
menu, ol, ul { list-style: none; margin: 0px; padding: 0px; }
dialog { padding: 0px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); }
[role="button"], button { cursor: pointer; }
:disabled { cursor: default; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; }
.pointer-events-none { pointer-events: none; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.-inset-6 { inset: -1.5rem; }
.inset-0 { inset: 0px; }
.inset-x-0 { left: 0px; right: 0px; }
.-bottom-7 { bottom: -1.75rem; }
.-bottom-8 { bottom: -2rem; }
.-left-3 { left: -0.75rem; }
.-left-32 { left: -8rem; }
.-left-4 { left: -1rem; }
.-left-56 { left: -14rem; }
.-left-\[9px\] { left: -9px; }
.-right-24 { right: -6rem; }
.-right-40 { right: -10rem; }
.-right-\[9px\] { right: -9px; }
.-top-24 { top: -6rem; }
.-top-40 { top: -10rem; }
.-top-\[9px\] { top: -9px; }
.bottom-0 { bottom: 0px; }
.bottom-full { bottom: 100%; }
.left-1\/2 { left: 50%; }
.top-0 { top: 0px; }
.top-40 { top: 10rem; }
.top-8 { top: 2rem; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-3 { margin-bottom: 0.75rem; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mt-0 { margin-top: 0px; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-11 { margin-top: 2.75rem; }
.mt-12 { margin-top: 3rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-3\.5 { margin-top: 0.875rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-9 { margin-top: 2.25rem; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.h-1\.5 { height: 0.375rem; }
.h-11 { height: 2.75rem; }
.h-2\.5 { height: 0.625rem; }
.h-3 { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-\[15px\] { height: 15px; }
.h-\[17px\] { height: 17px; }
.h-\[18px\] { height: 18px; }
.h-\[19px\] { height: 19px; }
.h-\[21px\] { height: 21px; }
.h-\[22px\] { height: 22px; }
.h-\[23px\] { height: 23px; }
.h-\[2px\] { height: 2px; }
.h-\[320px\] { height: 320px; }
.h-\[340px\] { height: 340px; }
.h-\[34px\] { height: 34px; }
.h-\[380px\] { height: 380px; }
.h-\[460px\] { height: 460px; }
.h-\[520px\] { height: 520px; }
.h-\[68px\] { height: 68px; }
.h-\[9\.2vw\] { height: 9.2vw; }
.h-full { height: 100%; }
.h-px { height: 1px; }
.w-1\.5 { width: 0.375rem; }
.w-11 { width: 2.75rem; }
.w-2\.5 { width: 0.625rem; }
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-\[15px\] { width: 15px; }
.w-\[17px\] { width: 17px; }
.w-\[18px\] { width: 18px; }
.w-\[19px\] { width: 19px; }
.w-\[21px\] { width: 21px; }
.w-\[22px\] { width: 22px; }
.w-\[23px\] { width: 23px; }
.w-\[286px\] { width: 286px; }
.w-\[320px\] { width: 320px; }
.w-\[34px\] { width: 34px; }
.w-\[380px\] { width: 380px; }
.w-\[460px\] { width: 460px; }
.w-\[520px\] { width: 520px; }
.w-\[52px\] { width: 52px; }
.w-\[620px\] { width: 620px; }
.w-\[640px\] { width: 640px; }
.w-fit { width: fit-content; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0px; }
.min-w-\[44px\] { min-width: 44px; }
.max-w-\[300px\] { max-width: 300px; }
.max-w-\[320px\] { max-width: 320px; }
.max-w-\[420px\] { max-width: 420px; }
.max-w-\[430px\] { max-width: 430px; }
.max-w-\[470px\] { max-width: 470px; }
.max-w-\[480px\] { max-width: 480px; }
.max-w-\[520px\] { max-width: 520px; }
.max-w-\[540px\] { max-width: 540px; }
.max-w-\[560px\] { max-width: 560px; }
.max-w-\[62ch\] { max-width: 62ch; }
.max-w-\[640px\] { max-width: 640px; }
.max-w-\[660px\] { max-width: 660px; }
.max-w-\[680px\] { max-width: 680px; }
.max-w-\[720px\] { max-width: 720px; }
.max-w-\[760px\] { max-width: 760px; }
.max-w-\[80\%\] { max-width: 80%; }
.max-w-\[86\%\] { max-width: 86%; }
.max-w-\[88\%\] { max-width: 88%; }
.max-w-\[92\%\] { max-width: 92%; }
.max-w-\[94\%\] { max-width: 94%; }
.max-w-shell { max-width: 1180px; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.origin-left { transform-origin: left center; }
.-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-y-full { --tw-translate-y: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rotate-\[-4deg\] { --tw-rotate: -4deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
@keyframes ping { 
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: 1s cubic-bezier(0, 0, 0.2, 1) 0s infinite normal none running ping; }
.select-none { user-select: none; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-4 { gap: 1rem; }
.gap-9 { gap: 2.25rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); }
.divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); }
.divide-line > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1)); }
.divide-line\/70 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(226, 232, 240, 0.7); }
.overflow-hidden { overflow: hidden; }
.scroll-smooth { scroll-behavior: smooth; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.rounded-2xl { border-radius: 1rem; }
.rounded-\[19px\] { border-radius: 19px; }
.rounded-\[22px\] { border-radius: 22px; }
.rounded-\[26px\] { border-radius: 26px; }
.rounded-\[28px\] { border-radius: 28px; }
.rounded-\[2px\] { border-radius: 2px; }
.rounded-\[30px\] { border-radius: 30px; }
.rounded-\[36px\] { border-radius: 36px; }
.rounded-\[3px\] { border-radius: 3px; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-b-\[18px\] { border-bottom-right-radius: 18px; border-bottom-left-radius: 18px; }
.rounded-t-\[18px\] { border-top-left-radius: 18px; border-top-right-radius: 18px; }
.rounded-bl-md { border-bottom-left-radius: 0.375rem; }
.rounded-br-md { border-bottom-right-radius: 0.375rem; }
.border { border-width: 1px; }
.border-\[1\.5px\] { border-width: 1.5px; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-t { border-top-width: 1px; }
.border-t-2 { border-top-width: 2px; }
.border-dashed { border-style: dashed; }
.border-brand-deep { --tw-border-opacity: 1; border-color: rgb(4 120 87 / var(--tw-border-opacity, 1)); }
.border-brand-line { --tw-border-opacity: 1; border-color: rgb(167 243 208 / var(--tw-border-opacity, 1)); }
.border-brand\/40 { border-color: rgba(16, 185, 129, 0.4); }
.border-ink\/5 { border-color: rgba(15, 23, 42, 0.05); }
.border-line { --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); }
.border-line\/70 { border-color: rgba(226, 232, 240, 0.7); }
.border-line\/80 { border-color: rgba(226, 232, 240, 0.8); }
.border-royal-line { --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.border-white\/70 { border-color: rgba(255, 255, 255, 0.7); }
.bg-\[\#34D399\] { --tw-bg-opacity: 1; background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1)); }
.bg-\[\#DCF8C6\] { --tw-bg-opacity: 1; background-color: rgb(220 248 198 / var(--tw-bg-opacity, 1)); }
.bg-\[\#EFEAE2\] { --tw-bg-opacity: 1; background-color: rgb(239 234 226 / var(--tw-bg-opacity, 1)); }
.bg-brand { --tw-bg-opacity: 1; background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1)); }
.bg-brand-deep { --tw-bg-opacity: 1; background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1)); }
.bg-brand-tint { --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); }
.bg-brand\/10 { background-color: rgba(16, 185, 129, 0.1); }
.bg-brand\/15 { background-color: rgba(16, 185, 129, 0.15); }
.bg-cta-tint { --tw-bg-opacity: 1; background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1)); }
.bg-danger-tint { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); }
.bg-ink { --tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); }
.bg-royal-tint { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); }
.bg-royal\/10 { background-color: rgba(37, 99, 235, 0.1); }
.bg-royal\/15 { background-color: rgba(37, 99, 235, 0.15); }
.bg-tint { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); }
.bg-wa { --tw-bg-opacity: 1; background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1)); }
.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/70 { background-color: rgba(255, 255, 255, 0.7); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white\/85 { background-color: rgba(255, 255, 255, 0.85); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-brand-deep { --tw-gradient-from: #047857 var(--tw-gradient-from-position); --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-brand\/10 { --tw-gradient-from: rgb(16 185 129 / 0.1) var(--tw-gradient-from-position); --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-brand\/15 { --tw-gradient-from: rgb(16 185 129 / 0.15) var(--tw-gradient-from-position); --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-ink { --tw-gradient-from: #0F172A var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-transparent { --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-brand { --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #10B981 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.via-brand\/70 { --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(16 185 129 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.via-royal\/10 { --tw-gradient-to: rgb(37 99 235 / 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(37 99 235 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-\[\#1B2947\] { --tw-gradient-to: #1B2947 var(--tw-gradient-to-position); }
.to-royal { --tw-gradient-to: #2563EB var(--tw-gradient-to-position); }
.to-transparent { --tw-gradient-to: transparent var(--tw-gradient-to-position); }
.p-1\.5 { padding: 0.375rem; }
.p-2 { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-5 { padding: 1.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-\[12px\] { padding-left: 12px; padding-right: 12px; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.py-\[13px\] { padding-top: 13px; padding-bottom: 13px; }
.py-\[15px\] { padding-top: 15px; padding-bottom: 15px; }
.pb-0\.5 { padding-bottom: 0.125rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-2\.5 { padding-bottom: 0.625rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-8 { padding-bottom: 2rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pr-1 { padding-right: 0.25rem; }
.pr-10 { padding-right: 2.5rem; }
.pr-4 { padding-right: 1rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-12 { padding-top: 3rem; }
.pt-14 { padding-top: 3.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-2\.5 { padding-top: 0.625rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-display { font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif; }
.font-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.font-sans { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.text-\[10\.5px\] { font-size: 10.5px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11\.5px\] { font-size: 11.5px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13\.5px\] { font-size: 13.5px; }
.text-\[13px\] { font-size: 13px; }
.text-\[13vw\] { font-size: 13vw; }
.text-\[14\.5px\] { font-size: 14.5px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15\.5px\] { font-size: 15.5px; }
.text-\[15px\] { font-size: 15px; }
.text-\[16\.5px\] { font-size: 16.5px; }
.text-\[16px\] { font-size: 16px; }
.text-\[17\.5px\] { font-size: 17.5px; }
.text-\[17px\] { font-size: 17px; }
.text-\[22px\] { font-size: 22px; }
.text-\[20px\] { font-size: 20px; }   /* hand-added 11 Sep 2026 — trust-strip figures at 320; see REDESIGN-SPEC §2.1b */
.text-\[27px\] { font-size: 27px; }
.text-\[28px\] { font-size: 28px; }
.text-\[29px\] { font-size: 29px; }
.text-\[30px\] { font-size: 30px; }
.text-\[36px\] { font-size: 36px; }
.text-\[7\.5px\] { font-size: 7.5px; }
.text-\[8px\] { font-size: 8px; }
.text-\[9\.5px\] { font-size: 9.5px; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.leading-\[0\.78\] { line-height: 0.78; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-\[1\.12\] { line-height: 1.12; }
.leading-\[1\.14\] { line-height: 1.14; }
.leading-\[1\.1\] { line-height: 1.1; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
.leading-tight { line-height: 1.25; }
.tracking-\[-0\.01em\] { letter-spacing: -0.01em; }
.tracking-\[-0\.025em\] { letter-spacing: -0.025em; }
.tracking-\[-0\.03em\] { letter-spacing: -0.03em; }
.tracking-\[-0\.045em\] { letter-spacing: -0.045em; }
.tracking-\[0\.06em\] { letter-spacing: 0.06em; }
.tracking-\[0\.08em\] { letter-spacing: 0.08em; }
.tracking-\[0\.12em\] { letter-spacing: 0.12em; }
.tracking-\[0\.14em\] { letter-spacing: 0.14em; }
.tracking-\[0\.16em\] { letter-spacing: 0.16em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.tracking-tight { letter-spacing: -0.025em; }
.text-\[\#34D399\] { --tw-text-opacity: 1; color: rgb(52 211 153 / var(--tw-text-opacity, 1)); }
.text-\[\#475569\] { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); }
.text-\[\#5FCFC0\] { --tw-text-opacity: 1; color: rgb(95 207 192 / var(--tw-text-opacity, 1)); }
.text-brand { --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity, 1)); }
.text-brand-deep { --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); }
.text-cta-hover { --tw-text-opacity: 1; color: rgb(194 65 12 / var(--tw-text-opacity, 1)); }
.text-danger-deep { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity, 1)); }
.text-ink { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); }
.text-ink-soft { --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); }
.text-mute { --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); }
.text-royal { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); }
.text-royal-deep { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); }
.text-wa { --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); }
.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.text-white\/55 { color: rgba(255, 255, 255, 0.55); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/65 { color: rgba(255, 255, 255, 0.65); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-white\/\[0\.045\] { color: rgba(255, 255, 255, 0.043); }
.underline { text-decoration-line: underline; }
.decoration-line { text-decoration-color: rgb(226, 232, 240); }
.decoration-white\/25 { text-decoration-color: rgba(255, 255, 255, 0.25); }
.underline-offset-2 { text-underline-offset: 2px; }
.antialiased { -webkit-font-smoothing: antialiased; }
.opacity-70 { opacity: 0.7; }
.shadow-card { --tw-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px -14px rgba(15,23,42,.18); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -14px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-dock { --tw-shadow: 0 -8px 30px -10px rgba(15,23,42,.22); --tw-shadow-colored: 0 -8px 30px -10px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-hover { --tw-shadow: 0 2px 4px rgba(15,23,42,.05), 0 18px 40px -18px rgba(15,23,42,.28); --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 18px 40px -18px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-lift { --tw-shadow: 0 40px 80px -32px rgba(15,23,42,.45), 0 2px 6px rgba(15,23,42,.06); --tw-shadow-colored: 0 40px 80px -32px var(--tw-shadow-color), 0 2px 6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-wa { --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 10px 22px -14px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); --tw-shadow-color: #047857; --tw-shadow: var(--tw-shadow-colored); }
.ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-inset { --tw-ring-inset: inset; }
.ring-ink\/10 { --tw-ring-color: rgb(15 23 42 / 0.1); }
.ring-ink\/5 { --tw-ring-color: rgb(15 23 42 / 0.05); }
.ring-white\/10 { --tw-ring-color: rgb(255 255 255 / 0.1); }
.blur-2xl { --tw-blur: blur(40px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.blur-3xl { --tw-blur: blur(64px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.blur-\[110px\] { --tw-blur: blur(110px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.blur-\[120px\] { --tw-blur: blur(120px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.backdrop-blur-2xl { --tw-backdrop-blur: blur(40px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-xl { --tw-backdrop-blur: blur(24px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.\[overflow-wrap\:anywhere\] { overflow-wrap: anywhere; }
.last\:border-b-0:last-child { border-bottom-width: 0px; }
.hover\:-translate-y-0\.5:hover { --tw-translate-y: -0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.hover\:border-ink:hover { --tw-border-opacity: 1; border-color: rgb(15 23 42 / var(--tw-border-opacity, 1)); }
.hover\:border-white\/30:hover { border-color: rgba(255, 255, 255, 0.3); }
.hover\:bg-tint:hover { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); }
.hover\:bg-wa-hover:hover { --tw-bg-opacity: 1; background-color: rgb(6 95 70 / var(--tw-bg-opacity, 1)); }
.hover\:bg-white:hover { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:text-ink:hover { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); }
.hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.hover\:text-white\/80:hover { color: rgba(255, 255, 255, 0.8); }
.hover\:shadow-card:hover { --tw-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px -14px rgba(15,23,42,.18); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -14px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.hover\:shadow-wa-lift:hover { --tw-shadow: 0 2px 4px rgba(4,120,87,.18), 0 18px 34px -18px rgba(4,120,87,.6); --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 18px 34px -18px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: 0px; margin: 0px; overflow: visible; clip: auto; white-space: normal; }
.focus\:absolute:focus { position: absolute; }
.focus\:left-4:focus { left: 1rem; }
.focus\:top-4:focus { top: 1rem; }
.focus\:z-\[100\]:focus { z-index: 100; }
.focus\:rounded-lg:focus { border-radius: 0.5rem; }
.focus\:bg-ink:focus { --tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); }
.focus\:px-4:focus { padding-left: 1rem; padding-right: 1rem; }
.focus\:py-2:focus { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.focus\:text-white:focus { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.group:hover .group-hover\:bg-brand { --tw-bg-opacity: 1; background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1)); }
.group:hover .group-hover\:text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.group.is-open .group-\[\.is-open\]\:rotate-45 { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group.is-open .group-\[\.is-open\]\:border-brand-line { --tw-border-opacity: 1; border-color: rgb(167 243 208 / var(--tw-border-opacity, 1)); }
.group.is-open .group-\[\.is-open\]\:bg-brand-tint { --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); }
.group.is-open .group-\[\.is-open\]\:text-brand-deep { --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); }
.\[\&\>\*\]\:min-w-0 > * { min-width: 0px; }
.h-\[30px\] { height: 30px; }
.h-\[360px\] { height: 360px; }
.w-\[30px\] { width: 30px; }
.w-\[360px\] { width: 360px; }
.max-w-\[72ch\] { max-width: 72ch; }
.p-4 { padding: 1rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hover\:shadow-hover:hover { --tw-shadow: 0 2px 4px rgba(15,23,42,.05), 0 18px 40px -18px rgba(15,23,42,.28); --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 18px 40px -18px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
@media (min-width: 360px){
.min-\[360px\]\:inline { display: inline; }
}
@media (min-width: 640px){
.sm\:items-end { align-items: flex-end; }   /* hand-added 11 Sep 2026 — hero total row */
.sm\:gap-4 { gap: 1rem; }                   /* hand-added 11 Sep 2026 — hero total row */
.sm\:pb-4{padding-bottom:1rem}
.sm\:ml-auto { margin-left: auto; }
.sm\:block { display: block; }
.sm\:inline { display: inline; }
.sm\:flex { display: flex; }
.sm\:hidden { display: none; }
.sm\:w-\[92px\] { width: 92px; }
.sm\:flex-row { flex-direction: row; }
.sm\:items-start { align-items: flex-start; }
.sm\:items-baseline { align-items: baseline; }
.sm\:justify-between { justify-content: space-between; }
.sm\:gap-3 { gap: 0.75rem; }
.sm\:gap-5 { gap: 1.25rem; }
.sm\:gap-9 { gap: 2.25rem; }
.sm\:whitespace-nowrap { white-space: nowrap; }
.sm\:p-3 { padding: 0.75rem; }
.sm\:p-6 { padding: 1.5rem; }
.sm\:px-12 { padding-left: 3rem; padding-right: 3rem; }
.sm\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
.sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.sm\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.sm\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.sm\:pl-9 { padding-left: 2.25rem; }
.sm\:pt-16 { padding-top: 4rem; }
.sm\:text-center { text-align: center; }
.sm\:text-\[12\.5px\] { font-size: 12.5px; }
.sm\:text-\[14\.5px\] { font-size: 14.5px; }
.sm\:text-\[16\.5px\] { font-size: 16.5px; }
.sm\:text-\[17px\] { font-size: 17px; }
.sm\:text-\[30px\] { font-size: 30px; }
.sm\:text-\[36px\] { font-size: 36px; }
.sm\:text-\[38px\] { font-size: 38px; }
.sm\:text-\[46px\] { font-size: 46px; }
.sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.sm\:text-\[40px\] { font-size: 40px; }
}
@media (min-width: 768px){
.md\:hidden { display: none; }
}
@media (min-width: 1024px){
.lg\:sticky { position: sticky; }
.lg\:-left-10 { left: -2.5rem; }
.lg\:-left-8 { left: -2rem; }
.lg\:top-28 { top: 7rem; }
.lg\:mx-0 { margin-left: 0px; margin-right: 0px; }
.lg\:block { display: block; }
.lg\:hidden { display: none; }
.lg\:h-\[7\.6vw\] { height: 7.6vw; }
.lg\:max-w-none { max-width: none; }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.lg\:grid-cols-\[0\.82fr_1\.18fr\] { grid-template-columns: 0.82fr 1.18fr; }
.lg\:grid-cols-\[0\.9fr_1\.1fr\] { grid-template-columns: 0.9fr 1.1fr; }
.lg\:grid-cols-\[1\.03fr_0\.97fr\] { grid-template-columns: 1.03fr 0.97fr; }
.lg\:grid-cols-\[1\.5fr_1fr_1fr_1\.25fr\] { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; }
.lg\:grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; }
.lg\:items-start { align-items: flex-start; }
.lg\:items-center { align-items: center; }
.lg\:gap-12 { gap: 3rem; }
.lg\:gap-16 { gap: 4rem; }
.lg\:gap-8 { gap: 2rem; }
.lg\:border-l { border-left-width: 1px; }
.lg\:border-line { --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); }
.lg\:pb-24 { padding-bottom: 6rem; }
.lg\:pl-12 { padding-left: 3rem; }
.lg\:pt-20 { padding-top: 5rem; }
.lg\:text-\[11vw\] { font-size: 11vw; }
.lg\:text-\[52px\] { font-size: 52px; }
.lg\:top-\[92px\] { top: 92px; }
.lg\:grid-cols-\[260px_1fr\] { grid-template-columns: 260px 1fr; }
.lg\:self-start { align-self: flex-start; }
}

/* ── added after the build: the action dock's desktop cap ──────────────────
   `max-w-[580px]` and `pb-4` were introduced when the dock stopped being
   phones-only. They are written here in Tailwind's own form so a future real
   build produces the same thing and this block becomes a harmless duplicate. */
.max-w-\[580px\]{max-width:580px}
.pb-4{padding-bottom:1rem}