:root{
  /* Veloque brand, sampled from the logo: burnt orange -> amber gradient */
  --brand-o:#CC4800; --brand-a:#CC9C00;
  /* Applied roles. Orange at full strength passes AA on white as text (5.3:1)
     but amber does not (2.3:1), so amber is fill-and-highlight only and
     --gold carries it wherever text must stay legible.
     Ink is a warm charcoal rather than navy: a cool neutral fights the orange
     and makes the page look accidental. Warmth reads as energy and confidence,
     which is the register a trading business wants. */
  --ink:#241D18; --ink2:#4E4239; --mut:#8A7C70; --mut2:#B3A69B;
  --line:#EBE2D9; --line2:#D9CCBF;
  --paper:#FFFFFF; --wash:#FCF8F4; --wash2:#F5EDE5;
  --acc:#B03D00; --acc-d:#8F3200; --acc-s:#FDF0E7; --acc-b:#F3CDB0;
  --gold:#8A6A00; --gold-s:#FDF6E0; --gold-b:#EBD79A;
  --blue:#1C6E7A; --blue-s:#E6F2F3;
  --warn:#9A5B00; --warn-s:#FDF4E7; --warn-b:#EFD3A5;
  --dan:#B42318; --dan-s:#FEF3F2;
  --mint:var(--brand-a);
  --navy:var(--ink);
  /* Layout width. The shell now runs close to the full viewport instead of
     sitting in a 1140px column — on a 1536px screen that was leaving ~400px
     of empty margin. Long-form prose keeps a narrower measure (--maxw-read)
     because line lengths beyond roughly 90 characters measurably hurt reading
     speed, so full-bleed body text would be a downgrade, not an upgrade. */
  --maxw:1660px; --maxw-read:900px; --gut:40px;
  --r:10px; --rl:14px;
  --sh:0 1px 2px rgba(36,29,24,.06);
  --sh2:0 4px 16px rgba(36,29,24,.09);
  --sh3:0 12px 40px rgba(36,29,24,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Deliberately NOT overflow-x:hidden on html/body: with a sticky header
   (.hdr{position:sticky}) that turns body into a scroll container in most
   engines (an axis set to hidden forces the other axis to compute as auto,
   per spec), which detaches the sticky element from the viewport and it
   stops sticking. Overflow is fixed at the source instead — see the mobile
   nav rules and .doc below for the two places width was actually escaping. */
body{background:var(--paper);color:var(--ink);
  font:16px/1.65 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* Prose columns stay readable even inside the wide shell. */
.narrow{max-width:var(--maxw-read);margin:0 auto;padding:0 var(--gut)}
/* Opt-out for anything that genuinely wants edge-to-edge. */
.bleed{max-width:none;width:100%}
@media(max-width:1500px){:root{--gut:32px}}
@media(max-width:900px){:root{--gut:20px}}
h1,h2,h3,h4{line-height:1.18;letter-spacing:-.02em;font-weight:650}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}

/* ---------- header ---------- */
.hdr{border-bottom:1px solid var(--line);background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);position:sticky;top:0;z-index:60}
.hdr .in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:680;font-size:17px;
  letter-spacing:-.02em;flex:0 0 auto;min-width:0}
.brand:hover{text-decoration:none}
.brand img{height:21px;width:auto;display:block}
.brand .m{width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:750;letter-spacing:-.5px}
/* overflow:hidden used to live here. When a signed-in master had Team, Admin,
   the account name, Sign out AND the actions pill in .act, the nav got
   squeezed and links were clipped mid-word — Blog and About simply vanished
   and the pill looked like it was sitting on top of Pricing. Nothing may clip:
   items are dropped deliberately at breakpoints instead. */
/* margin-left:auto here (not just on .act) clusters the whole nav — links
   plus sign-in/trial — against the right edge, so the logo sits alone on
   the left with the flexible gap, instead of nav.main trailing right behind
   the logo and only .act being pushed out to the far right. */
nav.main{display:flex;gap:22px;align-items:center;font-size:14.5px;
  flex:0 1 auto;min-width:0;flex-wrap:nowrap;margin-left:auto}
nav.main a{white-space:nowrap;color:var(--ink2);font-weight:500}
nav.main a:hover{color:var(--acc);text-decoration:none}
nav.main a.on{color:var(--acc);font-weight:600}
/* .act must never be compressed — it holds the primary actions. */
.hdr .act{display:flex;gap:10px;align-items:center;flex:0 0 auto;margin-left:auto}
.hdr .in{gap:26px}

/* Progressive shedding, least important first, so the bar always fits. */
@media(max-width:1400px){nav.main{gap:16px;font-size:13.8px}}
@media(max-width:1240px){nav.main a[href="/about.php"]{display:none}}
@media(max-width:1130px){nav.main a[href="/blog.php"]{display:none}}
@media(max-width:1040px){.hdr .act .btn-g.who{display:none}}
@media(max-width:960px){nav.main{display:none}}

/* ---------- mobile nav ----------
   Below 960px nav.main and .act both vanish (rules above), which used to
   leave nothing to reach Features/Classify/Rates/Pricing/Blog/About with,
   and — worse — left the header with only flex:0-0-auto children and no
   wrap, so on a narrow phone with several account buttons still showing
   the row had nowhere to shrink and the whole page scrolled sideways.
   The hamburger + slide-down panel replaces both, and .act is hidden
   outright at this width so the header can never overflow again. */
.navtoggle{display:none;flex:0 0 auto;width:40px;height:40px;align-items:center;
  justify-content:center;flex-direction:column;gap:4px;padding:0;margin-left:auto;
  border:1px solid var(--line2);border-radius:9px;background:var(--paper);cursor:pointer}
.navtoggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .2s,opacity .2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobilenav{max-height:0;overflow:hidden;transition:max-height .3s ease;border-top:0 solid var(--line)}
.mobilenav.open{max-height:2400px;border-top-width:1px}
.mobilenav nav{display:flex;flex-direction:column;padding:6px var(--gut) 0}
.mobilenav nav a{padding:14px 2px;font-size:16px;font-weight:560;color:var(--ink);
  border-bottom:1px solid var(--line)}
.mobilenav nav a.on{color:var(--acc);font-weight:650}
.mobilenav-act{display:flex;flex-direction:column;gap:9px;padding:16px var(--gut) 22px}

@media(max-width:960px){
  .hdr .act{display:none}
  .navtoggle{display:inline-flex}
}
/* Belt and braces: if a menu is ever left "open" while the viewport is
   resized back up past the breakpoint (e.g. rotating a tablet, or a
   devtools resize), it must not silently reappear on desktop. */
@media(min-width:961px){.mobilenav{max-height:0!important}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:9px;font-size:14.5px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap;
  font-family:inherit;line-height:1.2}
.btn:hover{text-decoration:none}
/* Mint on navy text: 6.3:1, comfortably AA, and unmistakably the brand. */
.btn-p{background:var(--acc);color:#fff;box-shadow:var(--sh)}
.btn-p:hover{background:var(--acc-d)}
.btn-d{background:var(--ink);color:#fff}
.btn-d:hover{background:#3A2F26}
.btn-o{background:var(--paper);color:var(--ink);border-color:var(--line2)}
.btn-o:hover{border-color:var(--acc);color:var(--acc)}
.btn-g{background:none;color:var(--ink2)}
.btn-g:hover{color:var(--acc)}
.btn-lg{padding:13px 26px;font-size:15.5px;border-radius:10px}
.btn-w{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- generic blocks ---------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.lede{font-size:18.5px;color:var(--ink2);line-height:1.6}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);padding:26px}
.card-w{background:var(--wash);border:1px solid var(--line);border-radius:var(--rl);padding:26px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.t-live{background:var(--acc-s);color:var(--acc-d);border:1px solid var(--acc-b)}
.t-soon{background:var(--wash2);color:var(--mut);border:1px solid var(--line2)}
.t-beta{background:var(--blue-s);color:var(--blue);border:1px solid #C3D7EF}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
label .hint{font-weight:400;color:var(--mut)}
input,select,textarea{width:100%;background:var(--paper);border:1px solid var(--line2);
  color:var(--ink);padding:10px 12px;border-radius:9px;font:15px/1.4 inherit;transition:.14s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(14,124,102,.13)}
input[type=number]{font-variant-numeric:tabular-nums}
textarea{resize:vertical;min-height:110px;line-height:1.55}
select{appearance:none;padding-right:34px;background-repeat:no-repeat;background-position:right 12px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' stroke='%2364748B' stroke-width='1.7' fill='none' stroke-linecap='round'/></svg>")}
.f{margin-bottom:15px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
@media(max-width:620px){.g3,.g4{grid-template-columns:1fr 1fr}}
fieldset{border:0;border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
legend{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);padding-right:12px}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink2);
  margin-bottom:11px;cursor:pointer;font-weight:450}
.chk input{width:auto;margin-top:3px;accent-color:var(--acc)}

/* ---------- tables ---------- */
table.fin{width:100%;border-collapse:collapse;font-size:14.5px}
table.fin td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
table.fin td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);
  white-space:nowrap;padding-left:14px;font-weight:520}
table.fin tr.strong td{font-weight:680;color:var(--ink);background:var(--wash)}
table.fin tr.key td{font-weight:750;color:var(--acc-d);background:var(--acc-s);
  border-bottom-color:var(--acc-b);font-size:15px}
table.fin tr.neg td:last-child{color:var(--dan)}
table.fin tr.strong td:first-child,table.fin tr.key td:first-child{padding-left:10px}
table.fin tr.strong td:last-child,table.fin tr.key td:last-child{padding-right:10px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:22px}
.kpi{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px}
.kpi .l{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.kpi .v{font-size:21px;font-weight:730;margin-top:6px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .v.pos{color:var(--acc-d)} .kpi .v.neg{color:var(--dan)}
.kpi .s{font-size:12px;color:var(--mut);margin-top:3px}
.kpi.hi{background:var(--acc-s);border-color:var(--acc-b)}

.note{font-size:13px;color:var(--ink2);background:var(--wash);border-left:3px solid var(--line2);
  padding:12px 15px;border-radius:0 8px 8px 0;margin-top:18px;line-height:1.6}
.warn{font-size:13px;color:#7C3D06;background:var(--warn-s);border:1px solid var(--warn-b);
  padding:14px 16px;border-radius:var(--r);line-height:1.6}
.warn b{color:var(--warn);display:block;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:5px}
.err{background:var(--dan-s);border:1px solid #F5C6C2;color:var(--dan);
  padding:13px 15px;border-radius:var(--r);font-size:14px}
.ok{background:var(--acc-s);border:1px solid var(--acc-b);color:var(--acc-d);
  padding:13px 15px;border-radius:var(--r);font-size:14px}

.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line2);
  border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite;
  vertical-align:-3px;margin-right:9px}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{color:var(--mut);font-size:14px;text-align:center;padding:60px 24px;
  border:1px dashed var(--line2);border-radius:var(--rl);background:var(--wash)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);margin-top:80px;padding:48px 0 40px;background:var(--wash)}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h5{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);margin-bottom:13px}
footer.site a,footer.site p{font-size:14px;color:var(--ink2);display:block;margin-bottom:8px}
footer.site a:hover{color:var(--acc)}
footer.site .base{border-top:1px solid var(--line2);margin-top:34px;padding-top:22px;
  font-size:13px;color:var(--mut);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* ---------- credit meter ---------- */
.credits{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--ink2);background:var(--acc-s);border:1px solid var(--acc-b);
  padding:6px 12px;border-radius:99px;white-space:nowrap;font-variant-numeric:tabular-nums}
.credits:hover{text-decoration:none;border-color:var(--acc)}
.credits strong{color:var(--acc-d)}
.credits .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:0 0 auto}
.credits.low{background:var(--warn-s);border-color:var(--warn-b);color:#7C3D06}
.credits.low strong{color:var(--warn)}
.credits.low .dot{background:var(--warn)}
/* The pill belongs with the account actions, not floating against the nav. */
.credits{flex:0 0 auto;margin-right:2px}
/* Drop the word "actions" before dropping the count itself. */
@media(max-width:1240px){.credits .lbl{display:none}}
@media(max-width:700px){.credits{display:none}}
/* The two rules above are about the desktop header pill running out of
   room — they don't apply to the copy of this chip inside the mobile nav
   panel, which has the full width of the panel to itself and is exactly
   where a phone user needs to see their remaining AI actions. */
.mobilenav-act .credits{display:inline-flex!important}
.mobilenav-act .credits .lbl{display:inline!important}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);padding:28px;position:relative}
.tier.pop{border-color:var(--mint);border-width:2px;box-shadow:var(--sh2)}
.tier .flag{position:absolute;top:-12px;left:28px;background:var(--mint);color:var(--navy);
  font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:99px}
.tier h3{font-size:19px;margin-bottom:4px}
.tier .tag2{font-size:13.5px;color:var(--mut);min-height:38px}
.tier .price{font-size:38px;font-weight:750;letter-spacing:-.03em;margin:14px 0 2px;font-variant-numeric:tabular-nums}
.tier .per{font-size:13px;color:var(--mut);margin-bottom:20px}
.tier ul{list-style:none;margin-bottom:22px}
.tier li{font-size:14px;color:var(--ink2);padding:7px 0 7px 24px;position:relative;line-height:1.5}
.tier li:before{content:"";position:absolute;left:3px;top:13px;width:11px;height:6px;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
.tier li.no{color:var(--mut2)}
.tier li.no:before{border:0;content:"—";left:2px;top:7px;color:var(--mut2)}

/* ---------- profile ---------- */
.pmeter{height:7px;background:var(--wash2);border-radius:99px;overflow:hidden}
.pmeter i{display:block;height:100%;background:var(--mint);transition:width .4s}
.psec{border:1px solid var(--line);border-radius:var(--rl);margin-bottom:16px;overflow:hidden}
.psec>summary{padding:15px 20px;cursor:pointer;font-weight:640;background:var(--wash);
  list-style:none;display:flex;justify-content:space-between;align-items:center}
.psec>summary::-webkit-details-marker{display:none}
.psec>summary .cnt{font-size:12px;font-weight:500;color:var(--mut)}
.psec .body{padding:20px}

/* ---------- print / documents ---------- */
@media print{
  .hdr,footer.site,.noprint,.skip{display:none!important}
  body{background:#fff}
  .doc{border:0!important;box-shadow:none!important;padding:0!important;max-width:100%!important}
  @page{margin:14mm}
}
.doc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:38px;max-width:840px;margin:0 auto;
  overflow-x:auto}
.doc h1{font-size:22px;letter-spacing:.04em;text-transform:uppercase;text-align:center;margin-bottom:4px}
.doc .sub{text-align:center;color:var(--mut);font-size:12.5px;margin-bottom:24px}
.doc table.g{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:18px}
.doc table.g td,.doc table.g th{border:1px solid var(--line2);padding:8px 10px;vertical-align:top}
.doc table.g th{background:var(--wash);text-align:left;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mut);font-weight:700}
.doc .party{font-size:13px;line-height:1.55}
.doc .party b{display:block;font-size:14px;margin-bottom:2px}
.doc .sign{margin-top:44px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
/* A generated commercial invoice / packing list table (item#, description,
   HS code, qty, rate, amount) does not fit a 320-375px phone at any font
   size — rather than let it force the page wide, the doc itself becomes a
   contained horizontal scroller and shrinks its own padding to give the
   table more room to work with first. */
@media(max-width:600px){.doc{padding:18px}}
@media(max-width:480px){.doc table.g{font-size:11.5px}.doc table.g td,.doc table.g th{padding:6px 7px}}


/* ---------- logo-derived accents ---------- */
.grad{background:linear-gradient(95deg,var(--brand-o),var(--brand-a));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tier.pop{border-color:var(--brand-o)}
.tier .flag{background:linear-gradient(95deg,var(--brand-o),var(--brand-a));color:#fff}
.credits .dot{background:linear-gradient(95deg,var(--brand-o),var(--brand-a))}
.pmeter i{background:linear-gradient(95deg,var(--brand-o),var(--brand-a))}
.rule{height:3px;border-radius:2px;background:linear-gradient(95deg,var(--brand-o),var(--brand-a));width:64px;margin:14px 0}

/* four tiers once the trial card is present */
.tiers.t4{grid-template-columns:repeat(4,1fr);gap:16px}
.tiers.t4 .tier{padding:22px}
.tiers.t4 .price{font-size:32px}
@media(max-width:1150px){.tiers.t4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tiers.t4{grid-template-columns:1fr}}

/* trial ribbon in the header */
.trialbar{background:linear-gradient(95deg,var(--brand-o),var(--brand-a));color:#fff;
  font-size:13.5px;font-weight:560;text-align:center;padding:8px 16px}
.trialbar a{color:#fff;text-decoration:underline;font-weight:700}

/* ==================================================================
   MOTION
   Scroll reveals and hover lifts only. Everything is transform/opacity
   so it runs on the compositor and never triggers layout — the page
   speed we fought for stays intact. All of it collapses to nothing
   under prefers-reduced-motion, which is not optional: vestibular
   disorders are common and animation can cause real nausea.
   ================================================================== */
/* Reveals are gated behind .js-motion, which the script adds to <html> before
   first paint. Previously .reveal set opacity:0 unconditionally — if the
   script ever failed to run, every revealed block on the page would have
   stayed invisible forever. Now no JS simply means no animation, and all the
   content still renders. */
.reveal{transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js-motion .reveal{opacity:0;transform:translateY(16px)}
.js-motion .reveal.in{opacity:1;transform:none}

/* Every top-level section animates in, on every page, without the page having
   to opt in. Driven from CSS rather than by tagging elements in script,
   because tagging after first paint makes above-the-fold content visibly
   flash from shown to hidden. Pages that want finer control still use
   .reveal on individual blocks. A failsafe in the script reveals everything
   unconditionally after 1.2s, so a stalled observer can never strand content. */
.js-motion main > section{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js-motion main > section.in{opacity:1;transform:none}

/* Directional variants — used sparingly, mostly for side-by-side blocks. */
.js-motion .reveal.rv-l{transform:translateX(-20px)}
.js-motion .reveal.rv-r{transform:translateX(20px)}
.js-motion .reveal.rv-s{transform:scale(.97)}
.js-motion .reveal.rv-l.in,.js-motion .reveal.rv-r.in,.js-motion .reveal.rv-s.in{transform:none}

/* Stagger. --i is set by the script on siblings so a grid of cards arrives as
   a wave rather than a slab. Capped so a long list never feels sluggish. */
.js-motion .reveal{transition-delay:calc(var(--i, 0) * 65ms)}
.reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.12s} .reveal.d3{transition-delay:.18s}

.lift{transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s,border-color .22s}
.lift:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--line2)}

.btn{transition:background .16s,color .16s,border-color .16s,transform .12s,box-shadow .16s}
.btn:active{transform:translateY(1px)}
.btn-p:hover{box-shadow:0 4px 14px rgba(204,72,0,.26)}

.hdr{transition:box-shadow .25s,background .25s}
.hdr.stuck{box-shadow:0 1px 14px rgba(36,29,24,.09)}

.kpi .v{animation:pop .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.tier{transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s}
.tier:hover{transform:translateY(-2px);box-shadow:var(--sh)}

table.fin tr{transition:background .14s}
table.fin tr:hover td{background:var(--wash)}

.spin{animation:sp .7s linear infinite}

/* live-rate ticker feedback */
@keyframes flashUp{0%{background:rgba(14,124,102,.16)}100%{background:transparent}}
@keyframes flashDn{0%{background:rgba(180,35,24,.14)}100%{background:transparent}}
.up{animation:flashUp 1.1s ease-out} .dn{animation:flashDn 1.1s ease-out}
.arrow{font-size:11px;margin-left:5px}
.arrow.u{color:var(--acc-d)} .arrow.d{color:var(--dan)}

/* ---------- scroll progress ----------
   Long pages (blog posts, legal, the content-heavy calculators) get a thin
   brand-gradient bar showing read position. Width is driven by a CSS custom
   property the script updates from rAF, so nothing lays out on scroll. */
.progress{position:fixed;top:0;left:0;height:2px;z-index:100;width:100%;
  transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--brand-o),var(--brand-a));
  transition:opacity .3s;pointer-events:none}

/* ---------- hero aurora ----------
   A soft off-white wash behind the hero. Two very low-opacity brand blooms,
   blurred heavily. Purely decorative and behind everything, so it never
   affects contrast on the text sitting above it. */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.30}
.aurora::before{width:46vw;height:46vw;max-width:600px;max-height:600px;
  top:-16%;right:-8%;background:radial-gradient(circle,var(--brand-a),transparent 68%)}
.aurora::after{width:38vw;height:38vw;max-width:480px;max-height:480px;
  top:22%;left:-12%;background:radial-gradient(circle,var(--brand-o),transparent 68%);opacity:.16}
.js-motion .aurora::before{animation:drift 22s ease-in-out infinite alternate}
.js-motion .aurora::after{animation:drift2 27s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,4%,0) scale(1.09)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5%,-3%,0) scale(1.06)}}
.hero-wrap{position:relative;z-index:1}

/* ---------- counters ----------
   Result figures tick up when they scroll into view. On a costing tool this
   reads as "this was computed", not as decoration. Tabular numerals stop the
   width jittering while the digits change. */
.count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- financial table cascade ----------
   Rows arrive top-to-bottom so the eye follows the build-up of the ladder
   rather than being handed the whole block at once. */
.js-motion table.fin.casc tr{opacity:0;transform:translateY(6px);
  transition:opacity .34s ease,transform .34s ease;transition-delay:calc(var(--r,0) * 42ms)}
.js-motion table.fin.casc.in tr{opacity:1;transform:none}

/* Result panels injected after a calculation slide in rather than snapping. */
.js-motion .res-in{animation:resIn .45s cubic-bezier(.22,.61,.36,1) both}
@keyframes resIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- shimmer skeleton ----------
   Shown while an AI call is in flight. Communicates "working" far better
   than a bare spinner on a request that can take a few seconds. */
.sk{background:linear-gradient(90deg,var(--wash) 25%,var(--wash2) 37%,var(--wash) 63%);
  background-size:400% 100%;border-radius:8px;height:13px;margin:9px 0}
.js-motion .sk{animation:sh 1.35s ease-in-out infinite}
@keyframes sh{from{background-position:100% 50%}to{background-position:0 50%}}
.sk.w70{width:70%} .sk.w45{width:45%} .sk.w88{width:88%}

/* ---------- card sheen ----------
   A faint highlight sweep across the pricing tiers on hover. Kept subtle on
   purpose — an earlier, brighter version (opacity .55, 60% wide) read as
   distracting glare rather than a quiet hover cue.
   No overflow:hidden here — it used to clip the "MOST POPULAR" flag, which
   deliberately sits at top:-12px to float above the card's top border. The
   sheen sweep spilling a sliver past the rounded corners during its brief
   hover transition is a non-issue next to a permanently chopped-off badge. */
.tier{position:relative}
.tier::after{content:"";position:absolute;top:0;left:-120%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .9s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.js-motion .tier:hover::after{left:130%}

/* ---------- meters ----------
   Allowance / profile-completeness bars grow from zero once seen. */
.pmeter i{transition:width .9s cubic-bezier(.22,.61,.36,1)}

/* ---------- focus visibility ----------
   Keyboard users need to see where they are; mouse users should not get a
   ring on every click. :focus-visible gives both. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

/* Inputs and cards get a calmer, more deliberate response to interaction. */
input,select,textarea{transition:border-color .16s,box-shadow .16s,background .16s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--acc-s)}
.card{transition:box-shadow .22s,border-color .22s}

/* Section headings get a short brand rule that draws itself on reveal. */
.js-motion .ruled::after{content:"";display:block;height:2px;width:0;margin-top:10px;
  background:linear-gradient(90deg,var(--brand-o),var(--brand-a));
  transition:width .7s cubic-bezier(.22,.61,.36,1) .15s;border-radius:2px}
.js-motion .ruled.in::after{width:52px}

/* ---------- reduced-motion tier ----------
   Content is simply visible. No initial hidden state, no transition, nothing
   to recover from.

   An earlier version of this tried a gentle opacity-only fade here, on the
   reasoning that a fade has no motion vector and so is vestibular-safe. It
   had to be pulled: when the OS has animations switched off (Windows
   "Animation effects" off), Chrome does not run such transitions quickly —
   it does not run them at all. The element stays pinned at its from-value
   forever, so every section on the page rendered blank. Verified directly:
   with transitions disabled the same element computes opacity 1, with the
   transition live it never leaves 0, even when forced inline with
   !important.

   The rule this leaves behind: never hide content and depend on a transition
   to bring it back. If motion is off, start visible. */

@media (prefers-reduced-motion: reduce){
  /* Blanket kill for anything not covered explicitly, including any future
     animation someone adds without thinking about this. */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}

  /* Reduced-motion visitors: everything visible, nothing transitioning,
     nothing transformed. Belt and braces against a frozen transition. */
  .js-soft main > section,.js-soft .reveal,
  .js-soft main > section.in,.js-soft .reveal.in{
    opacity:1!important;transform:none!important;transition:none!important}
  .js-soft *,.js-soft *::before,.js-soft *::after{transform:none!important}
  .aurora::before,.aurora::after{animation:none!important}
  .progress{display:none}

  /* Anything driven by the full-motion tier must end up simply visible. */
  .js-motion .reveal,.js-motion .reveal.in,
  .js-motion main > section,.js-motion main > section.in{opacity:1!important;transform:none!important}
  .js-motion table.fin.casc tr{opacity:1!important;transform:none!important}
  .js-motion .ruled.in::after{width:52px}
}

/* ---------- feature mega-menu ---------- */
.hasmenu{position:relative}
.megawrap{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  opacity:0;visibility:hidden;transition:.18s;padding-top:10px;z-index:80}
.hasmenu:hover .megawrap,.hasmenu:focus-within .megawrap{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);
  box-shadow:var(--sh3);padding:20px;display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:10px 22px;width:min(78vw,760px)}
.mega h6{grid-column:1/-1;font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);margin:6px 0 2px}
.mega h6:first-child{margin-top:0}
.mega a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);font-size:14px;font-weight:560}
.mega a:hover{background:var(--wash);text-decoration:none;color:var(--acc)}
.mega a small{display:block;color:var(--mut);font-size:12px;font-weight:400;margin-top:1px}
.mega .foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:8px;padding-top:12px;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
@media(max-width:1000px){.hasmenu .megawrap{display:none}}