/* ==========================================================================
   plenty100 marketing site : shared design system
   Light, warm off-white ground, deep indigo type, blue-to-lavender accent.
   No build step. Every page links this file and assets/site.js.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* ground and ink */
  --bg:#FAF9F8;            /* page ground (warm off-white) */
  --surface:#FFFFFF;
  --surface-2:#FCFCFB;
  --fg:#09090B;            /* body text */
  --ink:#023776;           /* headings, deep indigo */
  --ink-2:#07468C;
  --ink-soft:rgba(7,70,140,.62);   /* lede / supporting copy */
  --muted:#F4F4F5;
  --muted-fg:#71717B;

  /* accent scale */
  --primary:#126FDA;
  --primary-hover:#1060C0;
  --lav-500:#72ADF1;
  --lav-400:#8EBCF2;
  --lav-300:#AACDF3;
  --lav-200:#C5DDF6;
  --lav-100:#E3EEFA;
  --lav-50:#F0F6FC;

  /* lines */
  --border:#E4E4E7;
  --border-strong:#D0D0D4;
  --border-faint:#F0F0F2;

  /* semantics */
  --success:#009966; --success-bg:#ECFDF5; --success-fg:#047857;
  --warning:#E49F00; --warning-bg:#FFFBEB; --warning-fg:#B45309;
  --danger:#C02B2F;  --danger-bg:#FEF2F2;  --danger-fg:#B91C1C;
  --info-bg:#EFF6FF; --info-fg:#1D4ED8;
  --link:#0267C7;

  /* geometry */
  --maxw:1152px;
  --r-sm:8px; --r:12px; --r-md:16px; --r-lg:24px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.08);
  --shadow-md:0 8px 10px -6px rgba(0,0,0,.04),0 20px 25px -5px rgba(0,0,0,.04);
  --shadow-lg:0 8px 10px -6px rgba(0,0,0,.06),0 24px 32px -8px rgba(0,0,0,.08);

  /* type */
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  font-feature-settings:"ss01","cv11";
}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--lav-400);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-w{max-width:1280px}
.wrap-n{max-width:820px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- header */
.hdr{position:fixed;left:16px;right:16px;top:16px;z-index:100}
.hdr-in{
  max-width:1280px;margin:0 auto;height:64px;display:flex;align-items:center;gap:8px;
  padding:0 8px 0 18px;border-radius:var(--r-md);
  background:rgba(253,253,252,.82);border:1px solid rgba(228,228,231,.6);
  box-shadow:var(--shadow-xs);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  transition:box-shadow .3s,background .3s;
}
.hdr.stuck .hdr-in{background:rgba(253,253,252,.92);box-shadow:var(--shadow-sm)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;
  letter-spacing:-.02em;font-size:18px;color:var(--ink);flex:0 0 auto}
.mark{width:22px;height:22px;fill:none;stroke:var(--primary);stroke-width:1.5;
  stroke-linejoin:round;stroke-linecap:round;flex:0 0 auto}
.brand b{font-weight:600}
.brand span{color:var(--primary)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{text-decoration:none;color:var(--fg);font-size:13.5px;font-weight:500;padding:8px 11px;
  border-radius:var(--r-sm);transition:background .2s,color .2s;white-space:nowrap}
.nav a:hover{background:var(--muted)}
.nav a[aria-current=page]{background:var(--muted);color:var(--ink)}
.nav .btn{margin-left:8px}
.burger{display:none;margin-left:auto;background:transparent;border:0;color:var(--fg);
  width:40px;height:40px;border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center}
.burger:hover{background:var(--muted)}
.burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-weight:500;font-size:14px;height:36px;padding:0 14px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:background .2s,border-color .2s,color .2s,transform .15s,box-shadow .2s;line-height:1}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-p{background:var(--primary);color:#fff;box-shadow:var(--shadow-xs)}
.btn-p:hover{background:var(--primary-hover)}
.btn-g{background:var(--surface);color:var(--fg);border-color:var(--border)}
.btn-g:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-d{background:var(--ink);color:#fff}
.btn-d:hover{background:var(--ink-2)}
.btn-t{background:transparent;color:var(--fg)}
.btn-t:hover{background:var(--muted)}
.btn-lg{height:44px;padding:0 20px;font-size:15px;border-radius:10px}
.btn-pill{border-radius:999px}
.btn:active{transform:translateY(1px)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:150px 0 24px;text-align:center;overflow:hidden}
.grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23000' stroke-width='.5'%3E%3Cpath d='M0 0l160 160M160 0L0 160'/%3E%3Crect width='160' height='160' opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
  background-position:center top;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 0%,#000 30%,transparent 100%);
  mask-image:radial-gradient(70% 70% at 50% 0%,#000 30%,transparent 100%)}
.hero>.wrap,.phero>.wrap{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--muted-fg);background:var(--muted);border:1px solid var(--border);border-radius:999px;
  padding:6px 14px;margin:0 auto 18px}
.eyebrow b{font-weight:600;color:var(--primary)}
h1{font-weight:600;letter-spacing:-.03em;line-height:1.02;color:var(--ink);
  font-size:clamp(2.6rem,6vw,4.25rem);margin:0 auto 18px;max-width:18ch;text-wrap:balance}
.grad{background:linear-gradient(90deg,var(--primary) 0%,var(--lav-400) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:500;color:var(--ink-soft);line-height:1.5;
  margin:0 auto 26px;max-width:52ch;text-wrap:balance}
.lede u{text-decoration:none;background:linear-gradient(90deg,var(--lav-300),var(--lav-200)) no-repeat 0 100%/100% 3px;
  padding-bottom:1px}

/* chips (audience / examples) */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 26px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--fg);
  background:var(--muted);border:1px solid transparent;border-radius:999px;padding:8px 15px;
  cursor:pointer;text-decoration:none;font-family:inherit;transition:background .2s,border-color .2s,box-shadow .2s,color .2s}
.chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:var(--muted-fg)}
.chip:hover{background:var(--surface);border-color:var(--border)}
.chip.on,.chip[aria-pressed=true]{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm);color:var(--ink)}
.chip.on svg,.chip[aria-pressed=true] svg{color:var(--primary)}
.chips-sm{gap:6px;margin:14px 0 0;align-items:center}
.chips-sm .chip{font-size:13px;padding:6px 12px}
.chips-sm .lbl{font-size:13px;color:var(--muted-fg);font-weight:500;display:inline-flex;align-items:center;gap:6px;margin-right:4px}
.chips-sm .lbl svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- split hero (home) */
.hero-split{padding:132px 0 40px;text-align:left;overflow:hidden}
.hs-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:52px;align-items:center}
.hero-split h1{margin:0 0 18px;max-width:14ch;font-size:clamp(2.3rem,3.6vw,3.25rem)}
.hero-split .eyebrow{margin:0 0 18px}
.hero-split .lede{margin:0 0 28px;max-width:46ch}
.hero-split .cta-row{justify-content:flex-start;margin:0}
.hero-split .trust{margin:26px 0 0}
.hs-vis{position:relative}
.hs-vis .shot{box-shadow:0 30px 60px -22px rgba(2,55,118,.28),var(--shadow-sm)}
.hs-vis .tbl{font-size:11.5px}
.hs-vis .tbl td,.hs-vis .tbl th{padding:11px 9px;white-space:nowrap}
.hs-vis .tbl td:first-child,.hs-vis .tbl th:first-child{padding-left:14px}
.hs-vis .tbl td:last-child,.hs-vis .tbl th:last-child{padding-right:14px}
.hs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.hs-chips .chip{font-size:13px;padding:6px 12px}
@media (min-width:1100px){
  .hs-wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.36fr);gap:44px}
}
@media (max-width:900px){
  .hero-split{padding:118px 0 24px;text-align:center}
  .hs-wrap{grid-template-columns:1fr;gap:34px}
  .hero-split h1{margin-left:auto;margin-right:auto}
  .hero-split .lede{margin-left:auto;margin-right:auto}
  .hero-split .cta-row{justify-content:center}
  .hero-split .cta-row .btn{flex:1 1 auto}
  .hs-chips{justify-content:center}
  .hs-vis .shot{overflow-x:auto}
}

/* the item-record card in the hero */
.rec{max-width:660px;margin:0 auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);text-align:left;overflow:hidden}
.rec-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-faint)}
.rec-thumb{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lav-100),var(--lav-200))}
.rec-thumb svg{width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-linejoin:round}
.rec-head{min-width:0;display:flex;flex-direction:column;gap:1px}
.rec-ref{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--primary)}
.rec-title{font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-top .pill{margin-left:auto;flex:0 0 auto}
.rec-grid{display:grid;grid-template-columns:1fr 1fr}
.rec-cell{padding:11px 16px;border-bottom:1px solid var(--border-faint);display:flex;flex-direction:column;gap:2px}
.rec-cell:nth-child(odd){border-right:1px solid var(--border-faint)}
.rec-cell .k{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-fg)}
.rec-cell .v{font-size:14px;color:var(--fg)}
.rec-foot{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;background:var(--surface-2)}
.rec-note{font-size:13.5px;color:var(--ink-soft);font-weight:500;min-height:20px}
.rec-foot .btn{margin-left:auto;flex:0 0 auto}
@media (max-width:560px){
  .rec-title{white-space:normal;overflow:visible;line-height:1.3}
  .rec-grid{grid-template-columns:1fr}
  .rec-cell:nth-child(odd){border-right:0}
  .rec-foot{flex-wrap:wrap;align-items:flex-start}
  .rec-foot .btn{margin-left:0}
}

/* the white "prompt" card in the hero and CTA */
.prompt{max-width:640px;margin:0 auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:16px 8px 8px;text-align:left}
.prompt-q{padding:2px 14px 14px;font-size:17px;line-height:1.45;color:var(--fg);min-height:52px}
.prompt-q .cur{display:inline-block;width:1.5px;height:1.05em;background:var(--ink);margin-left:2px;vertical-align:-2px;
  animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.prompt-q .cur{animation:none}}
.prompt-f{display:flex;align-items:center;gap:10px;padding:6px 6px 0}
.prompt-f .meta{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted-fg);font-weight:500;padding:0 8px}
.prompt-f .meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.prompt-f .btn{margin-left:auto}
.trust{margin:22px 0 0;font-size:14px;color:var(--muted-fg);font-weight:500}

/* ---------------------------------------------------------------- sections */
main{position:relative;z-index:1}
.sec{position:relative;padding:clamp(52px,6.5vw,88px) 0}
.sec-tight{padding:16px 0 40px}
.head{max-width:720px;margin:0 auto 44px;text-align:center}
.head.left{margin-left:0;text-align:left}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-2);background:var(--lav-50);border:1px solid var(--lav-100);border-radius:999px;padding:5px 12px;margin:0 0 16px}
.kicker svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h2{font-weight:600;letter-spacing:-.028em;line-height:1.1;color:var(--ink);
  font-size:clamp(1.85rem,3.6vw,2.5rem);margin:0 0 14px;text-wrap:balance}
h3{font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--ink);font-size:1.5rem;margin:0 0 12px;text-wrap:balance}
h4{font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink);font-size:1.02rem;margin:0 0 6px}
.sub{color:var(--ink-soft);font-size:1.05rem;line-height:1.55;margin:0;max-width:62ch;font-weight:400}
.head .sub{margin-inline:auto}
.head.left .sub{margin-inline:0}

/* ---------------------------------------------------------------- story cards (proof row) */
.stories{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 24px 24px;
  margin:0 -24px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 280px;scroll-snap-align:start;position:relative;min-height:340px;border-radius:var(--r-md);
  padding:20px;display:flex;flex-direction:column;color:#fff;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(90% 60% at 100% 0%,rgba(142,188,242,.35),transparent 60%),
    radial-gradient(70% 50% at 0% 100%,rgba(18,111,218,.45),transparent 65%),
    linear-gradient(160deg,#0A498F,#023776 70%);
  box-shadow:var(--shadow-sm)}
.story::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.5'%3E%3Cpath d='M0 0l120 120M120 0L0 120'/%3E%3Crect width='120' height='120' opacity='.4'/%3E%3C/g%3E%3C/svg%3E")}
.story .tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.story .tag svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.story .art{flex:1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:14px 0;min-width:0}
.story .m{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.story .l{font-size:12.5px;color:var(--lav-200);margin-top:5px;line-height:1.4}
.story .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:1100px){
  .stories{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:8px 0 0}
  .story{flex:auto}
}
/* tablets: two up, still no sideways scrolling */
@media (max-width:1099px){
  .stories{display:grid;grid-template-columns:1fr 1fr;overflow:visible;scroll-snap-type:none;margin:0;padding:8px 0 0}
  .story{flex:auto;scroll-snap-align:none}
}
/* phones: stack the proof cards instead of scrolling sideways */
@media (max-width:720px){
  .stories{display:grid;grid-template-columns:1fr;gap:14px;overflow:visible;scroll-snap-type:none;
    margin:0;padding:8px 0 0}
  .story{flex:auto;min-height:0;scroll-snap-align:none;padding:20px}
  .story .art{padding:16px 0}
}

/* dark mini-ui inside story cards */
.dk{font-size:11px;color:#fff;width:100%;min-width:0;max-width:100%}
.dk .r{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);margin-bottom:6px;min-width:0}
.dk .r b{font-weight:600;font-family:var(--mono);font-size:10px;letter-spacing:.02em;white-space:nowrap;flex:0 0 auto}
.dk .r span{color:var(--lav-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.dk .r .pill{margin-left:auto;flex:0 0 auto;font-size:10px;padding:1px 7px}
.dk .pill{background:rgba(255,255,255,.12);color:#fff}
.dk .pill.ok{background:rgba(0,153,102,.28);color:#9BF0CB}
.dk .pill.warn{background:rgba(228,159,0,.26);color:#FFD68A}
.dk .pill.info{background:rgba(142,188,242,.3);color:#DCEBFB}
.dk .bars{height:64px}
.dk .bars i{background:rgba(255,255,255,.22)} .dk .bars i.hi{background:var(--lav-300)}
.dk .big{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1;text-align:center}
.dk .big small{display:block;font-size:12px;font-weight:500;letter-spacing:0;color:var(--lav-200);margin-top:8px}
.dk .flags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.dk .flag{font-size:11px;font-weight:500;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}

/* ---------------------------------------------------------------- product blocks (alternating) */
.feats{display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.feat{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center;min-height:420px}
.feat.rev .feat-txt{order:2}
.feat.rev .feat-vis{order:1}
.feat-txt{max-width:460px}
.feat-txt .kicker{margin-bottom:14px}
.feat-txt h3{font-size:clamp(1.4rem,2.4vw,1.7rem);margin-bottom:12px}
.feat-txt p{color:var(--ink-soft);font-size:16px;line-height:1.62;margin:0 0 18px}
.ticks{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--fg);line-height:1.45}
.ticks li svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--primary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.more{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none}
.more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.more:hover svg{transform:translateX(3px)}
.feat-vis{position:relative;min-width:0}

/* ---------------------------------------------------------------- mockups (screenshots built in CSS) */
.shot{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);overflow:hidden;font-size:12.5px;line-height:1.4;color:var(--fg);text-align:left}
.shot-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.dots{display:flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--border);display:block}
.shot-bar .crumb{font-weight:500;color:var(--muted-fg);font-size:12px;display:inline-flex;align-items:center;gap:6px}
.shot-bar .crumb b{color:var(--fg);font-weight:500}
.shot-bar .right{margin-left:auto;display:flex;gap:6px;align-items:center}
.shot-body{padding:16px;background:var(--surface-2)}
.shot-body.flush{padding:0}
.ubtn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;height:26px;padding:0 10px;border-radius:7px;
  border:1px solid var(--border);background:var(--surface);color:var(--fg);white-space:nowrap}
.ubtn.p{background:var(--primary);color:#fff;border-color:transparent}
.ubtn.d{background:var(--ink);color:#fff;border-color:transparent}
.ubtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.usearch{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted-fg);font-size:12px;flex:1;min-width:0}
.usearch svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.usearch b{color:var(--fg);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.utabs{display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--border);background:var(--surface)}
.utabs span{font-size:12px;font-weight:500;color:var(--muted-fg);padding:6px 10px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.utabs span.on{color:var(--ink);border-color:var(--primary)}
.tbl{width:100%;border-collapse:collapse;font-size:12px;background:var(--surface)}
.tbl th{font-weight:500;color:var(--muted-fg);text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);
  font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border-faint);white-space:nowrap;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.code{font-family:var(--mono);font-weight:500;color:var(--ink-2);font-size:11.5px;letter-spacing:.01em}
.tbl td.num{font-variant-numeric:tabular-nums}
.tbl tr.sel td{background:var(--lav-50)}
.tbl td{transition:background .5s ease}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;line-height:1.5}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pill.ok{color:var(--success-fg);background:var(--success-bg)}
.pill.warn{color:var(--warning-fg);background:var(--warning-bg)}
.pill.info{color:var(--info-fg);background:var(--info-bg)}
.pill.mute{color:#52525B;background:var(--muted)}
.pill.danger{color:var(--danger-fg);background:var(--danger-bg)}
.pill.lav{color:var(--ink-2);background:var(--lav-100)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 13px;min-width:0}
.kpi .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-top:4px;line-height:1.1;
  font-variant-numeric:tabular-nums}  /* even digit widths, so a counting figure does not jitter */
.kpi .d{font-size:11px;color:var(--success-fg);font-weight:500;margin-top:3px}
.kpi .d.down{color:var(--danger-fg)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 13px}
.panel .t{font-size:11px;font-weight:600;color:var(--ink);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.panel .t span{margin-left:auto;color:var(--muted-fg);font-weight:500}
.bars{display:flex;align-items:flex-end;gap:5px;height:82px}
.bars i{flex:1;background:var(--lav-200);border-radius:4px 4px 0 0;display:block;min-width:0}
.bars i.hi{background:var(--primary)}
.bars i.mid{background:var(--lav-400)}
.axis{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted-fg);margin-top:6px;font-weight:500}
.g2m{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.chat{display:flex;flex-direction:column;gap:8px}
.msg{max-width:88%;padding:10px 12px;border-radius:14px;font-size:12.5px;line-height:1.45}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.ai b{color:var(--ink);font-weight:600}
.msg .who{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:4px}
.msg.me .who{color:var(--lav-200)}
.ulist{display:flex;flex-direction:column;gap:8px}
.uitem{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:0}
.uitem .tx{min-width:0;flex:1}
.uitem .tx b{display:block;font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uitem .tx span{display:block;font-size:11px;color:var(--muted-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:600;
  background:var(--lav-100);color:var(--ink-2);flex:0 0 auto}
.avatar.g{background:var(--success-bg);color:var(--success-fg)}
.avatar.a{background:var(--warning-bg);color:var(--warning-fg)}
/* live chat: the rep management mock plays itself out (site.js adds .chat-live).
   Every step keeps its space in the layout and only fades in, so nothing around
   it moves; without .chat-live the finished conversation simply shows. */
.chat{position:relative}
.chat-live [data-step]{opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.chat-live .msg.me[data-step]{transform:translateY(8px) scale(.96);transform-origin:100% 100%}
.chat-live [data-step].on{opacity:1;transform:none}
.chat-live .uitem .pill{opacity:0;transform:scale(.6);
  transition:opacity .25s ease .2s,transform .4s cubic-bezier(.3,1.6,.5,1) .2s}
.chat-live .uitem.on .pill{opacity:1;transform:none}
.chat-live .msg.ai .w{opacity:0;transition:opacity .25s ease}
.chat-live .msg.ai .w.on{opacity:1}
.chat .typing{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;padding:12px 14px;
  opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .3s ease;pointer-events:none}
.chat .typing.on{opacity:1;transform:none}
.chat .typing i{width:6px;height:6px;border-radius:50%;background:var(--muted-fg);opacity:.35;animation:typing 1s ease-in-out infinite}
.chat .typing i:nth-child(2){animation-delay:.15s}
.chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
/* live mocks: a [data-scene] plays itself out (site.js adds .scene-live). Steps
   fade in, search text types, figures count, bars grow and statuses change, then
   it holds, clears and plays again. A hidden step keeps its space, so nothing
   around a mock moves; without .scene-live the finished mock simply shows. */
.scene-live [data-step]{opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.scene-live [data-step].on{opacity:1;transform:none}
/* table rows: fade the row, move its cells (a transformed row is unreliable) */
.scene-live tr[data-step],.scene-live tr[data-step].on{transform:none}
.scene-live tr[data-step] td{transform:translateY(6px);transition:transform .5s cubic-bezier(.2,.7,.3,1),background .5s ease}
.scene-live tr[data-step].on td{transform:none}
/* a status pill pops in just after the row or card it sits on */
.scene-live [data-step] .pill:not([data-step]){opacity:0;transform:scale(.6);
  transition:opacity .25s ease .2s,transform .4s cubic-bezier(.3,1.6,.5,1) .2s}
.scene-live [data-step].on .pill:not([data-step]){opacity:1;transform:none}
.scene-live .swapped{animation:pillSwap .55s cubic-bezier(.3,1.6,.5,1)}
.scene-live td.swapped{animation:cellSwap .45s ease}
@keyframes cellSwap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pillSwap{0%{transform:scale(.55);opacity:.2}100%{transform:none;opacity:1}}
/* typing: the untyped rest keeps its space; a caret blinks while it types */
.scene-live [data-type] .untyped{visibility:hidden}
.scene-live [data-type].typing .typed::after{content:"";display:inline-block;width:1px;height:1.05em;
  margin-right:-1px;background:currentColor;vertical-align:-.15em;animation:blink 1s steps(2) infinite}
/* chart bars grow from the axis */
.scene-live .bars i{transform:scaleY(0);transform-origin:50% 100%;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.scene-live .bars.grown i{transform:none}
/* the stock take scanner sweeps; the jewellery photos catch the light */
.scene-live .scanline::after{animation:laser 2.4s ease-in-out infinite}
@keyframes laser{0%,100%{transform:translateY(-34px)}50%{transform:translateY(34px)}}
.ph{position:relative;overflow:hidden}
.scene-live .ph::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  animation:sheen 4s ease-in-out infinite}
.scene-live .panel:nth-child(2) .ph::after{animation-delay:.5s}
.scene-live .panel:nth-child(3) .ph::after{animation-delay:1s}
@keyframes sheen{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.toggle{width:30px;height:18px;border-radius:999px;background:var(--border-strong);position:relative;flex:0 0 auto}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .2s}
.toggle.on{background:var(--primary)}
.toggle.on::after{left:14px}
.sig{height:60px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface);position:relative;overflow:hidden}
.sig svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sig small{position:absolute;left:10px;bottom:6px;font-size:9.5px;color:var(--muted-fg);font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.doc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;font-size:12px}
.doc .dh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:10px}
.doc .dh b{font-size:13px;color:var(--ink);font-weight:600;display:block}
.doc .dh span{font-size:11px;color:var(--muted-fg);display:block}
.doc .ln{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--border-faint)}
.doc .ln:last-of-type{border-bottom:0}
.doc .ln i{font-style:normal;color:var(--muted-fg);font-family:var(--mono);font-size:11px;min-width:64px}
.doc .ln em{font-style:normal;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc .ln b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc .tot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-weight:600;color:var(--ink);font-size:13px}
.float{position:absolute;z-index:2;background:rgba(255,255,255,.92);border:1px solid rgba(228,228,231,.8);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:11px 13px;font-size:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:250px}
.float b{display:block;color:var(--ink);font-weight:600;font-size:12px;margin-bottom:2px}
.float span{color:var(--muted-fg);font-size:11.5px;line-height:1.4;display:block}
.float.bl{left:-18px;bottom:-18px}
.float.br{right:-18px;bottom:-18px}
.float.tr{right:-18px;top:-18px}
.feat-vis:has(.float.bl),.feat-vis:has(.float.br){padding-bottom:18px}
.scanline{position:relative;height:120px;border-radius:12px;background:linear-gradient(180deg,#0B213B,#023776);overflow:hidden;display:grid;place-items:center;color:#fff}
.scanline .bc{display:flex;gap:2px;align-items:flex-end;height:44px}
.scanline .bc i{width:2px;background:#fff;display:block;opacity:.9}
.scanline .bc i:nth-child(3n){width:3px} .scanline .bc i:nth-child(4n){width:1px}
.scanline::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:#FF5A5A;box-shadow:0 0 10px #FF5A5A;opacity:.85}
.scanline .lbl{position:absolute;bottom:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--lav-200)}

/* ---------------------------------------------------------------- feature matrix */
.matrix{display:flex;flex-direction:column;gap:16px}
.mgroup .ml{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-fg);margin:0 0 9px}
.mrow{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid rgba(228,228,231,.8);
  border-radius:14px;padding:6px 14px 6px 6px;font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.fchip:hover{border-color:var(--lav-200);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.fchip i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--muted);flex:0 0 auto}
.fchip i svg{width:15px;height:15px;fill:none;stroke:var(--ink-2);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fchip.sm{font-size:12.5px;padding:4px 11px 4px 4px;border-radius:11px}
.fchip.sm i{width:24px;height:24px;border-radius:7px}
.fchip.sm i svg{width:13px;height:13px}

/* ---------------------------------------------------------------- generic cards + grids */
.grid{display:grid;gap:16px}
.card-wide{grid-column:span 2;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:24px;
  transition:border-color .25s,box-shadow .25s,transform .25s;min-width:0}
.card:hover{border-color:var(--lav-200);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card p{color:var(--ink-soft);margin:0;font-size:14.5px;line-height:1.6}
.card .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;background:var(--lav-50);border:1px solid var(--lav-100)}
.card .ico svg{width:18px;height:18px;fill:none;stroke:var(--primary);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.card .num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--lav-50);border:1px solid var(--lav-100);
  color:var(--ink-2);font-size:12.5px;font-weight:600;margin-bottom:14px;letter-spacing:.02em}
.card.flat:hover{transform:none;box-shadow:none;border-color:var(--border)}
.card-lg{padding:32px}
.card ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.card ul li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--fg);line-height:1.45}
.card ul li svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--primary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.stack{display:flex;flex-direction:column;gap:18px}
.pt{display:flex;gap:14px;align-items:flex-start}
.pt .dot{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--lav-50);border:1px solid var(--lav-100);margin-top:1px}
.pt .dot svg{width:13px;height:13px;fill:none;stroke:var(--primary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt h4{margin:0 0 3px}
.pt p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.55}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.stat{padding:26px 28px;border-right:1px solid var(--border)}
.stat:last-child{border-right:0}
.stat .v{font-weight:600;letter-spacing:-.03em;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;color:var(--ink);margin-bottom:8px}
.stat .l{color:var(--ink-soft);font-size:14px;line-height:1.5}

/* dark band (used sparingly) */
.band{border-radius:var(--r-lg);padding:clamp(32px,4.5vw,56px);color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(80% 70% at 100% 0%,rgba(142,188,242,.32),transparent 60%),
    radial-gradient(60% 60% at 0% 100%,rgba(18,111,218,.5),transparent 65%),
    linear-gradient(160deg,#0A498F,#023776 70%)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.5'%3E%3Cpath d='M0 0l120 120M120 0L0 120'/%3E%3Crect width='120' height='120' opacity='.4'/%3E%3C/g%3E%3C/svg%3E")}
.band h2,.band h3,.band h4{color:#fff}
.band .sub,.band p{color:var(--lav-200)}
.band .kicker{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.band .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.band .card:hover{border-color:rgba(255,255,255,.3);box-shadow:none;transform:none}
.band .card p{color:var(--lav-200)}
.band .card .ico{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.band .card .ico svg{stroke:#fff}
.band .btn-g{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.band .btn-g:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.band .btn-p{background:#fff;color:var(--ink)}
.band .btn-p:hover{background:var(--lav-50)}

/* ---------------------------------------------------------------- FAQ */
.faq-card{max-width:760px;margin:0 auto;background:rgba(255,255,255,.65);border:1px solid rgba(197,221,246,.35);
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:4px 22px}
.faq{border-bottom:1px solid var(--border)}
.faq:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:17px 0;font-weight:500;
  font-size:15.5px;color:var(--fg);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{margin-left:auto;flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--muted-fg);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.faq[open] summary svg{transform:rotate(180deg)}
.faq[open] summary{color:var(--ink)}
.faq p{margin:0;padding:0 0 18px;color:var(--ink-soft);font-size:15px;line-height:1.6;max-width:66ch}

/* ---------------------------------------------------------------- CTA band (pre-footer) */
.cta-sec{position:relative;padding:clamp(56px,7vw,88px) 0;text-align:center;
  background:linear-gradient(180deg,rgba(227,238,250,.75) 0%,rgba(227,238,250,0) 100%)}
.cta-sec h2{color:var(--fg);margin-bottom:10px}
.cta-sec .sub{margin:0 auto 28px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-sec .prompt{margin-top:26px}

/* ---------------------------------------------------------------- footer */
.ftr{border-top:1px solid var(--lav-200);padding:52px 0 28px;background:var(--bg)}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.ftr h5{font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 14px;letter-spacing:0}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr a{color:var(--fg);text-decoration:none;font-size:15px;transition:color .2s}
.ftr a:hover{color:var(--primary)}
.ftr .blurb{color:var(--muted-fg);font-size:14px;max-width:32ch;margin:14px 0 0;line-height:1.55}
.ftr .tagline{font-size:14px;font-weight:600;color:var(--ink-2);margin:12px 0 0}
.ftr .tagline b{font-weight:600;color:var(--primary)}
.ftr-btm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted-fg);font-size:13px;
  padding-top:22px;border-top:1px solid var(--border)}
.ftr-btm a{font-size:13px;color:var(--muted-fg)}

/* ---------------------------------------------------------------- sub-page hero */
.phero{position:relative;padding:150px 0 40px;text-align:center;overflow:hidden}
.phero h1{font-size:clamp(2.3rem,5vw,3.5rem);max-width:20ch}
/* a two-clause headline keeps each clause on its own line, so the accent phrase
   is never left stranded mid-line by a wrap */
.phero h1 .clause{display:block}
.phero h1:has(.clause){max-width:26ch}
.phero .lede{margin-bottom:22px}
.phero .cta-row{margin-bottom:8px}

/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--fg)}
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--fg);
  border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#A1A1AA}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lav-300);box-shadow:0 0 0 3px rgba(170,205,243,.35)}
textarea{min-height:128px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2371717B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px;padding-right:38px}
.hint{font-size:13px;color:var(--muted-fg);margin:0}
.form-card{padding:28px;box-shadow:var(--shadow-md)}
.form-card:hover{transform:none;border-color:var(--border);box-shadow:var(--shadow-md)}
.ok-msg{display:none;padding:14px 16px;border-radius:10px;background:var(--success-bg);color:var(--success-fg);font-size:14px;font-weight:500}
.ok-msg.show{display:block}
.err-msg{display:none;padding:14px 16px;border-radius:10px;background:var(--danger-bg);color:var(--danger-fg);
  font-size:14px;font-weight:500;line-height:1.5}
.err-msg.show{display:block}
.err-msg a{color:inherit;text-decoration:underline}
.ok-msg:focus{outline:none}
/* once it has gone, the fields give way to the confirmation */
.form.sent > *:not(.ok-msg){display:none}
.form.sent .ok-msg{padding:18px 20px;font-size:15px}
/* bot check widget: never wider than the form it sits in */
.cf-turnstile{max-width:100%;overflow:hidden;min-height:65px}
.cf-turnstile iframe{max-width:100%}
.form.sent .cf-turnstile{display:none}
/* the field only a bot fills in */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
button[type=submit][disabled]{opacity:.72;cursor:default}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;display:inline-block;animation:spin .7s linear infinite;margin-right:2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* ---------------------------------------------------------------- reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
/* the proof cards are left out so their idle moves (.mv1 to .mv4) can still play;
   they are shown by .in, which the same failsafe adds */
html.rv-off .rv:not(.story),html.rv-off .rv.in:not(.story){opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:30px}
  .feat{grid-template-columns:1fr;gap:26px;min-height:0}
  .feat.rev .feat-txt{order:1}
  .feat.rev .feat-vis{order:2}
  .feat-txt{max-width:560px}
  .float{position:static;max-width:none;margin-top:10px;box-shadow:var(--shadow-sm)}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hdr{left:8px;right:8px;top:8px}
  .hdr-in{height:58px;padding:0 6px 0 14px}
  .nav{position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:2px;
    background:#FDFDFC;border:1px solid var(--border);border-radius:var(--r-md);padding:10px;
    box-shadow:var(--shadow-lg);display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 12px;font-size:15px}
  .nav .btn{margin:8px 0 0;height:44px;font-size:15px}
  .burger{display:inline-flex}
}
@media (max-width:720px){
  body{font-size:15.5px}
  .hero{padding:118px 0 16px}
  .phero{padding:118px 0 28px}
  h1{font-size:clamp(2.2rem,10vw,2.9rem)}
  /* sub-page headlines run longer than the home one: hold them to fewer lines */
  .phero h1{font-size:clamp(1.85rem,7.4vw,2.35rem);line-height:1.12}
  .g2,.g3,.g4{grid-template-columns:1fr}
  /* a single column has no second track to span into */
  .card-wide{grid-column:auto;grid-template-columns:1fr;gap:14px}
  .grid > *{grid-column:auto}
  .row2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--border)}
  .stat:last-child{border-bottom:0}
  .ftr-grid{grid-template-columns:1fr;gap:26px}
  .card{padding:20px}
  .prompt-q{font-size:15.5px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .tbl th:nth-child(2),.tbl td:nth-child(2),.tbl th:nth-child(4),.tbl td:nth-child(4),
  .tbl th:nth-child(5),.tbl td:nth-child(5),.tbl th:nth-child(6),.tbl td:nth-child(6){display:none}
  .shot-bar .right .ubtn{display:none}
  /* hero list on a phone: ref, what it is, and where it stands */
  .hs-vis .tbl th:nth-child(2),.hs-vis .tbl td:nth-child(2),
  .hs-vis .tbl th:nth-child(6),.hs-vis .tbl td:nth-child(6){display:table-cell}
  .hs-vis .tbl th:nth-child(3),.hs-vis .tbl td:nth-child(3){display:none}
  .hs-vis .tbl td:nth-child(2){white-space:normal}
  .shot-bar .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .faq-card{padding:2px 16px}
  .cta-row .btn{flex:1 1 auto}
  /* touch targets: give stacked footer and inline links real height */
  .ftr ul{gap:4px}
  .ftr a{display:inline-block;padding:7px 0}
  .ftr .legal a{padding:5px 0}
  .more{padding:6px 0}
  .chips-sm .chip{padding:8px 13px}
  /* 16px stops iOS Safari zooming the page when a field is focused */
  input,select,textarea{font-size:16px;padding:12px 13px}
}
@media print{.hdr,.grid-bg{display:none!important}body{background:#fff;color:#000}}
section[id]{scroll-margin-top:92px}

/* ==========================================================================
   Sep 2026 additions
   Trial messaging, review cards, cycling module tabs, inline CTA bands,
   AI notes, the slogan family, and mobile density controls.
   ========================================================================== */

/* ---------------------------------------------------------------- slogans */
.slog{display:block;font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--primary);margin:0 0 12px}
.slog b{font-weight:700}
.slog.on-dark{color:var(--lav-300)}
.slog.lg{font-size:15px}

/* ---------------------------------------------------------------- trial pill */
.tpill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--success-fg);background:var(--success-bg);border:1px solid rgba(0,153,102,.22);
  padding:5px 12px 5px 8px;border-radius:999px;margin-bottom:16px;line-height:1.3}
.tpill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.tpill b{font-weight:700}

/* ---------------------------------------------------------------- AI notes */
.aitag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary);background:var(--lav-50);
  border:1px solid var(--lav-200);padding:3px 8px;border-radius:999px;vertical-align:middle;line-height:1.4}
.aitag svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ainote{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-soft);
  background:linear-gradient(180deg,var(--lav-50),rgba(240,246,252,.35));
  border:1px solid var(--lav-100);border-left:2px solid var(--primary);
  border-radius:0 10px 10px 0;padding:11px 14px;margin:0 0 18px}
.ainote svg{width:16px;height:16px;margin-top:2px;flex:0 0 auto;fill:none;stroke:var(--primary);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ainote b{color:var(--ink);font-weight:600}
.ainote.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  border-left-color:var(--lav-400);color:var(--lav-200)}
.ainote.on-dark svg{stroke:var(--lav-400)}
.ainote.on-dark b{color:#fff}

/* ---------------------------------------------------------------- review cards */
/* One set of markup, two layouts. The twelve quotes are held as three [data-flip]
   cards of four. From 721px up it is a carousel that glides on its own: the card
   wrappers step aside (display:contents), every quote lines up in one row, three
   to a view (two below 1000px), and --o on each quote sets its place so the row
   mixes the businesses. site.js moves the row and adds a copy of it for the loop.
   On a phone the wrappers come back and it is three stacked cards that turn over
   (see "review cards: slow flip" further down). */
@media (min-width:721px){
  /* the padding gives the shadows and the hover lift room inside the clip;
     the negative margin puts the cards back on the grid. Without script the
     row is a plain scroll-snapped strip. */
  .revs-view{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scrollbar-width:none;padding:8px 10px 16px;margin:-8px -10px -16px;
    scroll-padding-inline:10px}
  .revs-view::-webkit-scrollbar{display:none}
  .revs-track{display:flex;gap:18px}
  .revs-track .rev-f,.revs-track .rev-fi{display:contents}
  .revs-track .rev-c{flex:0 0 calc((100% - 36px) / 3);min-width:0;order:var(--o,0);scroll-snap-align:start}
  .revs-track .flip-hint{display:none}
  /* with script the row is moved by transform, and the cards soften out at
     the edges as they pass */
  .js .revs-view{overflow:hidden;scroll-snap-type:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
  .js .revs-track{will-change:transform}
}
@media (min-width:721px) and (max-width:1000px){
  .revs-track{gap:14px}
  .revs-track .rev-c{flex-basis:calc((100% - 14px) / 2)}
}
.revs-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px}
.revs-btn{width:40px;height:40px;padding:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--ink);box-shadow:var(--shadow-xs);
  transition:border-color .2s,background .2s,box-shadow .2s}
.revs-btn:hover{border-color:var(--border-strong);background:var(--surface-2);box-shadow:var(--shadow-sm)}
.revs-btn:active{transform:translateY(1px)}
.revs-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.revs-play svg{width:16px;height:16px}
.revs-play .i-play{display:none}
.revs.is-paused .revs-play .i-play{display:block}
.revs.is-paused .revs-play .i-pause{display:none}
/* no script: the row still scrolls and snaps, it just has no buttons */
html:not(.js) .revs-nav{display:none}
.rev-c{display:flex;flex-direction:column;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:22px;margin:0;
  box-shadow:var(--shadow-xs);transition:box-shadow .25s,transform .25s,border-color .25s}
.rev-c:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border-strong)}
.stars{display:inline-flex;gap:2px;align-items:center}
.stars svg{width:15px;height:15px;fill:var(--warning);stroke:none;flex:0 0 auto}
.rev-c blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--fg);flex:1}
.rev-c blockquote::before{content:"\201C"}
.rev-c blockquote::after{content:"\201D"}
.rev-by{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--border-faint)}
.rev-av{width:38px;height:38px;border-radius:999px;flex:0 0 auto;display:grid;place-items:center;
  font-size:13px;font-weight:600;color:#fff;background:var(--ink-2);letter-spacing:.01em}
.rev-av.g{background:var(--primary)}
.rev-av.a{background:var(--lav-500)}
.rev-by .who{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.rev-by .who b{font-size:14px;font-weight:600;color:var(--ink)}
.rev-by .who span{font-size:12.5px;color:var(--muted-fg)}
.revs-note{font-size:13px;color:var(--muted-fg);text-align:center;margin:18px 0 0}

/* ---------------------------------------------------------------- inline CTA band */
.ctaband{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;
  background:linear-gradient(180deg,var(--lav-50),var(--surface));
  border:1px solid var(--lav-100);border-radius:var(--r-md);padding:22px 26px;
  margin:8px 0 0}
.ctaband .t{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.ctaband .s{font-size:14px;color:var(--ink-soft);margin:5px 0 0;max-width:52ch}
.ctaband-txt{min-width:0;flex:1 1 320px}
.ctaband-a{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.ctaband.dark{background:var(--ink);border-color:rgba(255,255,255,.08)}
.ctaband.dark .t{color:#fff}
.ctaband.dark .s{color:var(--lav-200)}
.ctaband.dark .slog{color:var(--lav-300)}

/* ---------------------------------------------------------------- trial page */
.tr-grid{display:grid;grid-template-columns:1fr .9fr;gap:32px;align-items:start}
.tr-list{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.tr-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.tr-list li svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--success);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.tr-list li b{color:var(--ink);font-weight:600}
.tr-steps{counter-reset:s;display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.tr-steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:1.55}
.tr-steps li::before{content:counter(s);flex:0 0 auto;width:26px;height:26px;border-radius:999px;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;background:var(--primary)}
.tr-steps li b{display:block;color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- density helpers */
.m-hide{display:revert}
.d-hide{display:none}

/* ---------------------------------------------------------------- responsive: additions */
@media (max-width:1000px){
  .rev-c{padding:18px}
  .tr-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:720px){
  /* less on a phone: hide the secondary layer, not the message */
  .m-hide{display:none!important}
  .d-hide{display:revert}

  /* proof cards stack, full width, no sideways scrolling. Full width means the
     stone descriptions have room and stop truncating; the trade-off is height,
     so the padding and type are tightened to claw some of it back. */
  .stories{display:grid;grid-template-columns:1fr;gap:12px;overflow:visible;
    scroll-snap-type:none;margin:0;padding:8px 0 0}
  .story{flex:auto;scroll-snap-align:none;min-height:0;padding:18px}
  .story .art{padding:12px 0}
  .story .m{font-size:23px}
  .story .l{font-size:12px;margin-top:4px}
  .story .row{gap:10px}
  .dk .big{font-size:30px}
  .dk .big small{margin-top:6px}
  .dk .r{margin-bottom:5px;padding:5px 8px}
  .dk .bars{height:54px}

  /* the third supporting point is detail, not the pitch */
  .ticks li:nth-child(n+3){display:none}
  /* the floating callout doubles the height of a feature block */
  .feat-vis .float{display:none}
  /* the CSS mockups are dense screens: unreadable at this width and very tall.
     Each page keeps the one or two that carry the point (.keep-m) and drops the rest;
     the copy and the "see the module" link are untouched. */
  .feat .feat-vis:not(.keep-m){display:none}
  /* six rows of stock is a scroll; four makes the point */
  .hs-vis .tbl tbody tr:nth-child(n+5){display:none}

  /* review cards stack, full width, no sideways scrolling. The flex child here is
     .rev-f (the flip wrapper), not .rev-c, which is the face inside it. */
  .revs-track{display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0;overflow:visible}
  .revs-nav{display:none}
  .revs-track .rev-clone{display:none}
  .rev-f{width:100%}
  .rev-c{padding:20px}
  .rev-c blockquote{font-size:14.5px}

  .ctaband{padding:20px;gap:18px}
  .ctaband .t{font-size:17px}
  .ctaband-a{width:100%}
  .ctaband-a .btn{flex:1 1 auto}

}


/* ---------------------------------------------------------------- proof cards: idle motion
   One card at a time catches the eye, picked at random with a random gap between.
   Driven from site.js, which adds mv1..mv4 and takes it off again when the run ends. */
@keyframes storyNudge{0%,100%{transform:none}30%{transform:translateY(-7px) rotate(-.8deg)}62%{transform:translateY(-2px) rotate(.35deg)}}
@keyframes storyTilt{0%,100%{transform:none}34%{transform:perspective(700px) rotateY(6deg) translateY(-4px)}70%{transform:perspective(700px) rotateY(-2.5deg)}}
@keyframes storyPop{0%,100%{transform:none}38%{transform:scale(1.04)}72%{transform:scale(.994)}}
@keyframes storyRock{0%,100%{transform:none}20%{transform:rotate(1.1deg)}45%{transform:rotate(-.9deg)}70%{transform:rotate(.45deg)}}
.story.mv1{animation:storyNudge .95s cubic-bezier(.3,.8,.3,1)}
.story.mv2{animation:storyTilt 1.15s cubic-bezier(.3,.8,.3,1)}
.story.mv3{animation:storyPop .85s cubic-bezier(.3,.8,.3,1)}
.story.mv4{animation:storyRock 1.05s cubic-bezier(.3,.8,.3,1)}
.story.mv1,.story.mv2,.story.mv3,.story.mv4{box-shadow:var(--shadow-lg)}

/* ---------------------------------------------------------------- review cards: slow flip
   Phone only; wider screens get the carousel above. Front and back sit in the same
   grid cell, so the card takes the height of the taller quote and neither face
   jumps when it turns. */
@media (max-width:720px){
  .rev-f{display:grid;perspective:1600px}
  .rev-fi{display:grid;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.45,.05,.25,1)}
  .rev-f.flipped .rev-fi{transform:rotateY(180deg)}
  .rev-fi .rev-c{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:none;position:relative}
  .rev-fi .rev-c:hover{transform:none;box-shadow:var(--shadow-xs);border-color:var(--border)}
  .rev-fi .rev-c.back,.rev-fi .rev-c.back:hover{transform:rotateY(180deg)}
  /* spares wait out of sight but still size the cell, so a longer quote coming round
     never makes the card grow mid-turn */
  .rev-fi .rev-c.spare{visibility:hidden}
  .rev-f .flip-hint{position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:999px;
    display:grid;place-items:center;background:var(--muted);opacity:.55;pointer-events:none}
  .rev-f .flip-hint svg{width:12px;height:12px;fill:none;stroke:var(--muted-fg);stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  /* no script: one face, holding still */
  html:not(.js) .rev-fi .rev-c.back,html:not(.js) .rev-fi .rev-c.spare,html:not(.js) .rev-f .flip-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .story.mv1,.story.mv2,.story.mv3,.story.mv4{animation:none;box-shadow:var(--shadow-sm)}
}
@media (prefers-reduced-motion:reduce) and (max-width:720px){
  .rev-fi{transition:none}
  .rev-f.flipped .rev-fi{transform:none}
  .rev-fi .rev-c.back,.rev-fi .rev-c.spare,.rev-f .flip-hint{display:none}
}


/* ---------------------------------------------------------------- slogan rain
   The slogans fall into a band above the headline, bounce off the floor, settle,
   fade, and drop again. Positions and speeds come from site.js, which only arms
   the band when motion is allowed. Without script, or with motion turned down,
   the plain pill below is what shows. */
.rainband{position:relative;margin:0 0 18px}
.rainband .eyebrow{margin-bottom:0}
html.js .rainband.armed{height:112px;overflow:hidden;margin:0 0 6px}
html.js .rainband.armed .rain-fallback{display:none}
.drop{position:absolute;left:0;top:0;display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--muted-fg);
  background:var(--muted);border:1px solid var(--border);border-radius:999px;
  padding:6px 13px;white-space:nowrap;pointer-events:none;
  box-shadow:var(--shadow-xs);will-change:transform,opacity;
  transform:translate3d(0,-200px,0)}
.drop b{font-weight:700;color:var(--primary)}
@media (max-width:560px){
  html.js .rainband.armed{height:94px}
  .drop{font-size:11px;padding:5px 11px;letter-spacing:0}
}
@media (max-width:380px){ .drop{font-size:10px;padding:5px 10px} }
@media (prefers-reduced-motion:reduce){
  html.js .rainband.armed{height:auto;overflow:visible}
  html.js .rainband.armed .rain-fallback{display:inline-flex}
  .drop{display:none}
}


/* ---------------------------------------------------------------- moving wall
   A dark panel of capability chips. Each row slides continuously, alternating
   direction, and is clipped at the panel edges. The track holds two identical
   sets and travels exactly -50%, so the loop has no seam. Each set carries its
   own trailing gap, otherwise the gap between sets would break that maths. */
.wall{position:relative;overflow:hidden;border-radius:var(--r-lg);
  display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:26px 0;min-height:430px;isolation:isolate;
  background:
    radial-gradient(90% 60% at 100% 0%,rgba(142,188,242,.30),transparent 60%),
    radial-gradient(70% 50% at 0% 100%,rgba(18,111,218,.42),transparent 65%),
    linear-gradient(160deg,#0A498F,#023776 70%);
  box-shadow:var(--shadow-md)}
.wall::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.5'%3E%3Cpath d='M0 0l120 120M120 0L0 120'/%3E%3Crect width='120' height='120' opacity='.4'/%3E%3C/g%3E%3C/svg%3E")}
/* min-width:0 on both, or the grid item and the flex rows size themselves to the
   tracks inside and the panel grows to thousands of pixels instead of clipping */
.wall{min-width:0}
.wall-row{overflow:hidden;min-width:0}
.wall-track{display:flex;width:max-content;will-change:transform;
  animation:wallL var(--dur,70s) linear infinite}
.wall-track.r{animation-name:wallR}
.wall-set{display:flex;gap:12px;padding-right:12px;flex:0 0 auto}
@keyframes wallL{from{transform:translateX(0)}   to{transform:translateX(-50%)}}
@keyframes wallR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.wall:hover .wall-track{animation-play-state:paused}

/* chips read light on the dark panel */
.wall .fchip{background:rgba(255,255,255,.97);border-color:rgba(255,255,255,.55);
  color:#0B2E5C;font-weight:600;white-space:nowrap;
  box-shadow:0 2px 8px rgba(2,26,58,.28)}
.wall .fchip:hover{transform:none;box-shadow:0 2px 8px rgba(2,26,58,.28)}
.wall .fchip i{background:var(--lav-50)}
.wall .fchip i svg{stroke:var(--primary)}

/* the home page panel sits beside a text column, so it is shorter */
.wall-sm{min-height:340px}
.wall-split{align-items:center;gap:40px}
.wall-txt h2{margin-bottom:12px}
.wall-txt .sub{margin-left:0;margin-right:0;max-width:46ch}
.hl{background:var(--lav-100);border-radius:10px;padding:0 .16em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

@media (max-width:1000px){
  .wall{min-height:340px;order:2}
  .wall-txt{order:1}
  .wall-split{gap:26px}
}
@media (max-width:560px){
  .wall{min-height:300px;gap:10px;padding:20px 0}
  .wall .fchip{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .wall-track{animation:none}
}