@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.8909904ab6.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.f3779f1efc.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.f9a06e79cd.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.6f56409fd3.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sora-latin-600-normal.fa9ab76f30.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/sora-latin-700-normal.c3337a673c.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/sora-latin-800-normal.b3058cd014.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.cb182feeed.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Layout: navy ground, generous sections, white "paper" cards for anything you fill in, amber for action and savings. */
:root{
  color-scheme: dark;
  --navy:#0A1A33; --navy-2:#102446; --navy-3:#163057; --line:#1F3457; --line-2:#2E4366;
  --fg:#EAF0FA; --fg-2:#A9B6CC; --fg-3:#93A4C3;
  --amber:#FFC53D; --amber-2:#FFD36B; --amber-ink:#3D3420; --amber-soft:#FFF4D6;
  --paper:#FFFFFF; --ink:#0A1A33; --ink-2:#4A5670; --ink-3:#5B6880; --paper-line:#E3E8F0; --paper-field:#C9D2E0; --paper-tint:#F1F4F9;
  --danger-paper:#B42318; --danger-navy:#FF8A7A;
  --display:"Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--navy);color:var(--fg);font:16px/1.6 var(--text);-webkit-font-smoothing:antialiased;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:30;background:var(--navy)}
::selection{background:var(--amber);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.paper :focus-visible{outline-color:var(--ink)}
button{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto}
.wide{max-width:1360px;margin:0 auto}

/* type */
.h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.4vw,92px);line-height:1.02;letter-spacing:-0.035em;margin:0;text-wrap:balance}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,60px);line-height:1.05;letter-spacing:-0.03em;margin:0;text-wrap:balance}
.h3{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-0.015em;margin:0}
.lead{font-size:20px;line-height:1.55;color:var(--fg-2);margin:0;max-width:62ch}
.muted{color:var(--fg-3)}
.num{font-variant-numeric:tabular-nums}
.amber{color:var(--amber)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;margin:0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));padding:0 max(16px, env(safe-area-inset-left, 0px));
  background:rgba(10,26,51,.95);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.07)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.logo{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-0.03em;text-decoration:none;color:var(--fg)}
.nav{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500}
.nav a{text-decoration:none;color:var(--fg-2);padding:6px 0;border-bottom:2px solid transparent;transition:color .15s}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--amber)}
.top-cta{display:flex;gap:10px;align-items:center}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;min-height:44px;min-width:44px;cursor:pointer}
@media (max-width: 1020px){
  .nav,.top-cta .btn-ghost{display:none}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .top.open .nav{display:flex;position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:0;background:var(--navy);border-bottom:1px solid var(--line);padding:8px max(16px, env(safe-area-inset-left, 0px)) 16px}
  .top.open .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;font:600 16px/1 var(--text);text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .14s cubic-bezier(.16,1,.3,1),background-color .18s ease,border-color .18s ease,filter .18s ease}
.btn:active{transform:scale(.97)}
.btn-lg{min-height:58px;padding:0 28px;font-size:17px}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--amber-2)}
.btn-ghost{border-color:var(--line-2);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--fg-2);background:rgba(255,255,255,.04)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#17305a}
.btn-paper-ghost{border-color:var(--paper-field);color:var(--ink);background:#fff}
.btn-paper-ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.ico{width:18px;height:18px;flex:0 0 auto}

.pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--amber);color:var(--ink);font-weight:600;font-size:14px;padding:7px 12px;border-radius:8px}
.tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);color:var(--fg-2);font-size:13px;font-weight:500;padding:5px 10px;border-radius:8px}

/* sections */
.page[hidden]{display:none!important}
.sec{padding-block:140px 0}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:820px;margin-bottom:56px}
.raised{background:var(--navy-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.paper{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);color-scheme:light}
.paper .muted{color:var(--ink-3)}

/* hero */
.hero{padding-block:112px 0;display:flex;flex-direction:column;gap:30px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{font-size:14px;color:var(--fg-3)}

/* scaled mockups */
.mock{position:relative;width:100%;max-width:100%;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.mock-canvas{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--s,1))}
.browser{border-radius:18px;background:#1A2C4C;border:1px solid var(--line-2);padding:10px;box-shadow:0 50px 100px -50px rgba(0,0,0,.7)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:2px 6px 10px}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#3A5079;display:block}
.browser-url{margin-left:12px;flex:1;max-width:420px;height:26px;border-radius:7px;background:#0F2140;color:var(--fg-3);font-size:12px;display:flex;align-items:center;padding:0 10px;overflow:hidden;white-space:nowrap}

/* before/after */
.ba{position:relative;user-select:none;-webkit-user-select:none}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--amber);pointer-events:none}
.ba-handle{position:absolute;top:50%;left:var(--x,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--amber);color:var(--ink);border:0;
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;touch-action:none;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ba-handle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ba-label{position:absolute;bottom:14px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;pointer-events:none}
.ba-label.l{left:14px;background:#181818;color:#fff}
.ba-label.r{right:14px;background:var(--amber);color:var(--ink)}
.ba-hint{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:14px;color:var(--fg-3)}

/* Salesforce-like mock (representation) */
.sf{position:absolute;inset:0;background:#F3F3F3;color:#181818;font:12px/1.4 var(--text)}
.sf-top{height:46px;background:#fff;border-bottom:1px solid #DDDBDA;display:flex;align-items:center;gap:14px;padding:0 16px}
.sf-dots{display:grid;grid-template-columns:repeat(3,4px);gap:3px}
.sf-dots b{width:4px;height:4px;border-radius:50%;background:#706E6B;display:block}
.sf-search{margin:0 auto;width:440px;height:30px;border:1px solid #C9C9C9;border-radius:4px;color:#706E6B;display:flex;align-items:center;padding:0 10px}
.sf-circ{width:24px;height:24px;border-radius:50%;background:#E5E5E5}
.sf-nav{height:40px;background:#fff;border-bottom:1px solid #DDDBDA;display:flex;align-items:stretch;padding:0 16px;gap:2px;white-space:nowrap;overflow:hidden}
.sf-app{font-weight:700;font-size:15px;display:flex;align-items:center;padding-right:16px;margin-right:6px;border-right:1px solid #DDDBDA}
.sf-tab{display:flex;align-items:center;padding:0 10px;color:#181818;border-bottom:3px solid transparent}
.sf-tab.on{border-bottom-color:#0B5CAB;background:#F3F7FC}
.sf-body{display:grid;grid-template-columns:1fr 330px;gap:12px;padding:12px}
.sf-card{background:#fff;border:1px solid #DDDBDA;border-radius:4px;padding:12px}
.sf-rec{display:flex;align-items:center;gap:12px}
.sf-icon{width:34px;height:34px;border-radius:4px;background:#FF9A3C}
.sf-small{font-size:11px;color:#706E6B}
.sf-title{font-size:18px;font-weight:700}
.sf-btns{margin-left:auto;display:flex}
.sf-btns span{border:1px solid #C9C9C9;padding:4px 10px;background:#fff;margin-left:-1px;color:#0B5CAB;font-weight:500}
.sf-hl{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.sf-path{display:flex;gap:3px;margin-top:10px}
.sf-path span{flex:1;height:30px;display:flex;align-items:center;justify-content:center;font-size:10.5px;background:#ECEBEA;color:#3E3E3C;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%)}
.sf-path span.done{background:#CFE4F7;color:#0B5CAB}
.sf-path span.cur{background:#0B5CAB;color:#fff;font-weight:600}
.sf-tabs2{display:flex;gap:18px;border-bottom:1px solid #DDDBDA;padding-bottom:8px;margin-bottom:10px;font-weight:600}
.sf-tabs2 span:first-child{color:#0B5CAB;box-shadow:0 10px 0 -7px #0B5CAB}
.sf-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px 22px}
.sf-f{border-bottom:1px solid #EFEFEF;padding-bottom:4px}
.sf-f i{display:block;font-style:normal;font-size:10px;color:#706E6B}
.sf-f b{display:block;font-weight:400;height:14px}
.sf-f b.e{width:40%;margin-top:3px;height:8px;background:#EFEFEF;border-radius:2px}
.sf-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.sf-rel div{background:#fff;border:1px solid #DDDBDA;border-radius:4px;padding:8px;font-weight:600}
.sf-rel div small{display:block;font-weight:400;color:#706E6B;margin-top:4px}
.sf-act{display:flex;gap:4px;margin:8px 0}
.sf-act span{flex:1;text-align:center;border:1px solid #C9C9C9;border-radius:4px;padding:5px 0;color:#0B5CAB;font-size:11px}
.sf-line{height:9px;background:#EFEFEF;border-radius:2px;margin:8px 0}
.sf-lock{display:flex;align-items:center;gap:8px;color:#706E6B}
.ann{position:absolute;background:var(--amber);color:var(--ink);font:700 13px/1.25 var(--text);padding:7px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:nowrap}

/* 2Q Technologies CRM mock */
.pp{position:absolute;inset:0;display:grid;grid-template-columns:210px 1fr;background:#F5F7FB;color:#0A1A33;font:13px/1.4 var(--text)}
.pp-side{background:#0A1A33;color:#C9D2E1;padding:18px 12px;display:flex;flex-direction:column;gap:4px}
.pp-brand{font-family:var(--display);font-weight:700;font-size:18px;color:#fff;padding:0 10px 4px}
.pp-co{font-size:11px;color:#93A4C3;padding:0 10px 14px;border-bottom:1px solid #1F3457;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;white-space:nowrap}
.pp-item i{width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;display:block;flex:0 0 auto;opacity:.8}
.pp-item.on{background:#163057;color:#fff}
.pp-item.on i{background:#FFC53D;border-color:#FFC53D;opacity:1}
.pp-main{display:flex;flex-direction:column;min-width:0}
.pp-head{height:64px;background:#fff;border-bottom:1px solid #E3E8F0;display:flex;align-items:center;gap:12px;padding:0 22px}
.pp-head h4{margin:0;font-family:var(--display);font-size:18px;font-weight:700}
.pp-chip{border:1px solid #E3E8F0;border-radius:8px;padding:5px 10px;color:#4A5670;font-size:12px}
.pp-new{margin-left:auto;background:#FFC53D;color:#0A1A33;font-weight:700;border-radius:8px;padding:8px 12px;font-size:12px}
.pp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 22px 0}
.pp-kpi{background:#fff;border:1px solid #E3E8F0;border-radius:12px;padding:12px 14px}
.pp-kpi small{display:block;color:#5B6880;font-size:11px}
.pp-kpi b{font-family:var(--display);font-size:20px}
.pp-board{display:grid;gap:12px;padding:16px 22px 22px;flex:1;min-height:0}
.pp-col{background:#EDF1F7;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pp-colh{display:flex;justify-content:space-between;font-weight:700;font-size:12px;padding:2px 4px 4px}
.pp-colh span{color:#5B6880;font-weight:500}
.pp-card{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;gap:6px}
.pp-card b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-card .amt{font-family:var(--display);font-weight:700;font-size:15px}
.pp-row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.pp-next{background:#FFF4D6;color:#5C4500;border-radius:6px;padding:3px 7px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-av{width:22px;height:22px;border-radius:50%;background:#163057;color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pp-foot{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 16px}
.pp-foot span{background:#fff;border:1px solid #E3E8F0;border-radius:6px;padding:4px 8px;font-size:11px;color:#4A5670}

/* bill bar */
.bill{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:28px}
.bill-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.bill-bar{display:flex;height:76px;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(135deg,#1C3560 0 9px,#12284D 9px 18px)}
.bill-bar .keep{background:var(--amber);color:var(--ink);display:flex;align-items:center;padding:0 18px;font-weight:600;white-space:nowrap;overflow:hidden;transition:flex-basis .5s cubic-bezier(.16,1,.3,1)}
.bill-bar .drop{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:0 20px;font-weight:600;white-space:nowrap;overflow:hidden}
.kv{display:flex;flex-direction:column;gap:4px}
.kv dt{font-size:14px;color:var(--fg-3)}
.kv dd{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,40px);letter-spacing:-0.02em;white-space:nowrap}
.kv dd small{font-family:var(--text);font-size:14px;font-weight:500;color:var(--fg-3)}
dl{margin:0}

/* chips (inside paper) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 15px;border-radius:10px;border:1px solid var(--paper-field);background:#fff;color:var(--ink);font:500 15px/1.2 var(--text);cursor:pointer;
  transition:transform .14s cubic-bezier(.16,1,.3,1),background-color .16s ease,border-color .16s ease,color .16s ease;display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:var(--ink)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[disabled]{cursor:default;opacity:1;background:var(--paper-tint);border-color:var(--paper-line);color:var(--ink-2)}
.chips-dark .chip{background:transparent;border-color:var(--line-2);color:var(--fg)}
.chips-dark .chip:hover{border-color:var(--amber)}
.chips-dark .chip[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.q{display:flex;flex-direction:column;gap:12px}
.q-label{font-weight:600;margin:0}
.q-help{font-size:14px;color:var(--ink-3);margin:0}
.range-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.range-val{font-family:var(--display);font-weight:700;font-size:26px}
input[type=range]{width:100%;accent-color:var(--ink);height:28px;margin:0;cursor:pointer}
.chips-dark input[type=range],.on-navy input[type=range]{accent-color:var(--amber)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:600;font-size:15px}
.input{min-height:50px;border:1px solid var(--paper-field);border-radius:10px;padding:0 14px;font:16px var(--text);color:var(--ink);background:#fff;width:100%}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,26,51,.12)}
textarea.input{padding:12px 14px;min-height:110px;resize:vertical}
select.input{appearance:auto}
.input::placeholder{color:var(--ink-3)}
.err{color:var(--danger-paper);font-size:14px;font-weight:500;margin:0}

/* wizard */
.wiz{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.wiz-main{flex:999 1 560px;min-width:0;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:28px}
.wiz-side{flex:1 1 420px;min-width:0;position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.steps{display:flex;gap:6px}
.steps span{flex:1;height:5px;border-radius:3px;background:var(--paper-line)}
.steps span.done{background:var(--ink)}
.steps span.cur{background:var(--amber)}
.step-meta{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-3);font-weight:500}
.step-title{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,34px);letter-spacing:-0.02em;line-height:1.15;margin:0}
.step-body{display:flex;flex-direction:column;gap:28px}
.step-nav{display:flex;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid var(--paper-line)}
.fade{animation:fadeUp .32s cubic-bezier(.16,1,.3,1)}
@keyframes fadeUp{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.fade{animation:none}.btn,.chip{transition:none}.bill-bar .keep{transition:none}}
.res{padding:28px;display:flex;flex-direction:column;gap:22px}
.res-big{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.4vw,58px);line-height:1;letter-spacing:-0.035em;color:var(--amber);margin:0}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.res-grid dt{font-size:13px;color:var(--fg-3)}
.res-grid dd{margin:2px 0 0;font-family:var(--display);font-weight:700;font-size:22px}
.minibar{display:flex;height:40px;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(135deg,#1C3560 0 8px,#12284D 8px 16px)}
.minibar b{background:var(--amber);transition:flex-basis .5s cubic-bezier(.16,1,.3,1)}
.rows{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--line)}
.rows div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.rows span:first-child{color:#C9D2E1}
.note-box{background:var(--paper-tint);border-radius:12px;padding:14px 16px;margin:0;font-size:15px}
.phases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.phases li{display:flex;flex-wrap:wrap;gap:8px 28px;border-radius:14px;padding:20px 22px}
.phases .w{flex:0 0 150px;font-weight:600;font-size:14px}
.phases .t{flex:1 1 360px;min-width:0}
.phases h4{margin:0 0 4px;font-family:var(--display);font-size:20px;font-weight:700}
.phases p{margin:0}
.ok-box{background:var(--amber);color:var(--ink);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:10px}
.ok-box p{margin:0}

/* placeholders for real CRM captures */
.ph{border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 14px,transparent 14px 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;color:var(--fg-3);min-height:220px}
.ph svg{width:34px;height:34px;color:var(--fg-3)}
.ph strong{color:var(--fg);font-weight:600}

/* misc blocks */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bento > *{min-width:0}
.b-7{grid-column:span 7}.b-5{grid-column:span 5}.b-12{grid-column:span 12}.b-6{grid-column:span 6}
@media (max-width: 900px){.b-7,.b-5,.b-6{grid-column:span 12}}
.cardp{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.check i{flex:0 0 26px;height:26px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.table-x{overflow-x:auto}
.cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
.cmp th,.cmp td{text-align:left;padding:22px 24px;vertical-align:top}
.cmp thead th{font-family:var(--display);font-size:20px;font-weight:700;padding-top:0}
.cmp tbody th{font-weight:600;border-top:1px solid var(--line);padding-left:0;width:18%}
.cmp td.sf-c{border-top:1px solid var(--line);color:var(--fg-2)}
.cmp .pp-c{background:var(--paper);color:var(--ink);border-top:1px solid var(--paper-line)}
.cmp thead .pp-c{border-radius:16px 16px 0 0;padding-top:24px;color:var(--ink);border-top:0}
.cmp tbody tr:last-child .pp-c{border-radius:0 0 16px 16px}
.tl{list-style:none;margin:0;padding:0;min-width:900px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tl li{display:flex;flex-direction:column;gap:12px}
.tl .bar{height:6px;border-radius:3px;background:var(--line-2)}
.tl .bar.a{background:var(--amber)}
.tl .wk{font-size:14px;font-weight:600;color:var(--fg-3)}
.tl h4{margin:0;font-family:var(--display);font-size:20px;line-height:1.2}
.tl p{margin:0;font-size:15px;color:var(--fg-2)}
.case-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;padding:30px 0;border-top:1px solid var(--line)}
.case-row:last-child{border-bottom:1px solid var(--line)}
.save-pill{background:var(--amber);color:var(--ink);font-family:var(--display);font-weight:700;font-size:20px;padding:6px 12px;border-radius:8px}
.strike{color:var(--fg-3);text-decoration:line-through;text-decoration-thickness:2px}
.band{background:var(--amber);color:var(--ink);border-radius:var(--r-lg);padding:clamp(32px,5vw,72px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.band p{color:var(--amber-ink)}
.ptabs{display:flex;flex-direction:column;gap:8px}
.ptab{text-align:left;background:transparent;border:1px solid var(--line);border-radius:14px;padding:18px 20px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:background-color .16s ease,border-color .16s ease}
.ptab:hover{border-color:var(--line-2)}
.ptab[aria-selected="true"]{background:var(--navy-2);border-color:var(--amber)}
.ptab b{font-family:var(--display);font-size:19px}
.ptab span{color:var(--fg-2);font-size:15px}
.mini{position:absolute;inset:0;background:#fff;color:#0A1A33;font:13px/1.45 var(--text);padding:24px;display:flex;flex-direction:column;gap:16px}
.mini h5{margin:0;font-family:var(--display);font-size:18px}
.mini table{width:100%;border-collapse:collapse;font-size:12.5px}
.mini th{text-align:left;color:#5B6880;font-weight:500;padding:6px 8px;border-bottom:1px solid #E3E8F0}
.mini td{padding:7px 8px;border-bottom:1px solid #F0F3F8}
.mini .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mini .tile{border:1px solid #E3E8F0;border-radius:10px;padding:10px 12px}
.mini .tile small{display:block;color:#5B6880;font-size:11px}
.mini .tile b{font-family:var(--display);font-size:20px}
.ubar{height:8px;border-radius:4px;background:#0A1A33;display:block}
.ubar.lo{background:#FFC53D}
footer{padding-block:110px 56px}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-top:28px;border-top:1px solid var(--line)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px}
.foot-nav a{text-decoration:none;color:var(--fg-2)}
.foot-nav a:hover{color:#fff}
.legal{font-size:13px;color:var(--fg-3);margin:28px 0 0}
.story{display:flex;flex-wrap:wrap;gap:20px 64px;padding-top:32px;border-top:2px solid var(--amber)}
.story h2{flex:1 1 240px;margin:0;font-family:var(--display);font-size:28px;line-height:1.15}
.story div{flex:3 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px;max-width:68ch;font-size:19px;line-height:1.65;color:var(--fg-2)}
.story p{margin:0}

/* hero: type only, centred, lots of air */
main{overflow-x:clip}
.hero2{position:relative;isolation:isolate;min-height:calc(100svh - 72px - env(safe-area-inset-top, 0px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:36px;padding-block:120px 104px}
.hero2::before{content:"";position:absolute;z-index:-1;inset:0 -40vw;pointer-events:none;
  background-image:radial-gradient(rgba(169,182,204,.16) 1px, transparent 1.3px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 46% 52% at 50% 46%, #000 10%, transparent 72%);mask-image:radial-gradient(ellipse 46% 52% at 50% 46%, #000 10%, transparent 72%)}
.mega{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(46px,9.2vw,128px);line-height:1;letter-spacing:-0.04em;display:flex;flex-direction:column;align-items:center}
.mega .ln{display:block;padding-bottom:.04em}
.hero-sub{margin:0;max-width:46ch;font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--fg-2)}
@media (prefers-reduced-motion: no-preference){
  .mega .ln{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
  .mega .ln + .ln{animation-delay:.12s}
  .hero-sub{animation:rise .9s .22s cubic-bezier(.16,1,.3,1) both}
  .hero2 .hero-ctas{animation:rise .9s .3s cubic-bezier(.16,1,.3,1) both}
}
@keyframes rise{from{opacity:.001;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.facts > div{padding:32px 28px 8px 0;display:flex;flex-direction:column;gap:8px}
.facts > div + div{padding-left:28px;border-left:1px solid var(--line)}
.facts dt{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.2vw,44px);letter-spacing:-0.03em;line-height:1.1}
.facts dd{margin:0;color:var(--fg-2);font-size:16px;max-width:26ch}
@media (max-width: 820px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts > div:nth-child(3){padding-left:0;border-left:0}.facts > div:nth-child(n+3){border-top:1px solid var(--line)}}


/* hero v6: centered, card in perspective (TSI style) */
.hero6{min-height:auto;padding-block:96px 40px;gap:0;justify-content:flex-start}
.h6-copy{display:flex;flex-direction:column;align-items:center;gap:26px;max-width:900px}
.h6-chip{margin:0;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:14px;font-weight:600;color:var(--fg)}
.h6-ck{width:24px;height:24px;border-radius:50%;background:rgba(255,197,61,.14);color:var(--amber);display:flex;align-items:center;justify-content:center}.h6-ck svg{width:14px;height:14px}
.h6-logo{height:22px;width:auto;display:block;margin-left:4px}.h6-chip:has(.h6-logo) .h6-ck{display:none}
.h6-title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(42px,6vw,88px);line-height:1.02;letter-spacing:-0.04em;display:flex;flex-direction:column;align-items:center;text-wrap:balance}
.h6-title .h6-dim{color:#8D9AB3}
.hero6 .hero-sub{max-width:52ch;font-size:clamp(17px,1.4vw,20px)}
.hero6 .hero-ctas{justify-content:center}
.h6-stats{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:14px;color:var(--fg-3)}
.h6-stats b{color:var(--fg);font-weight:700}
.h6-stage{position:relative;width:100%;max-width:1060px;margin-top:64px;perspective:1500px;perspective-origin:50% 0%}
.h6-floor{position:absolute;left:-30%;right:-30%;top:12%;height:120%;z-index:-1;background-image:linear-gradient(rgba(169,182,204,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(169,182,204,.10) 1px,transparent 1px);background-size:64px 64px;transform:perspective(700px) rotateX(62deg);transform-origin:50% 0;-webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 55% 60% at 50% 20%,#000 20%,transparent 75%)}
.h6-card{--t:1;position:relative;background:#fff;color:#0A1A33;border-radius:22px;padding:26px 28px 18px;text-align:left;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.85);transform:rotateX(calc(var(--t) * 22deg)) scale(calc(1 - var(--t) * .06));transform-origin:50% 100%;transition:transform .12s linear;font-family:Inter,system-ui,sans-serif}
.mg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.mg-head b{display:block;font-family:var(--display);font-size:18px;font-weight:700}
.mg-head span{display:block;font-size:13px;color:#5B6880;margin-top:3px}
.mg-badge{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;padding:7px 12px;border-radius:999px;background:#E9F6EF;color:#12704F!important;font:500 12.5px "JetBrains Mono",ui-monospace,monospace!important;white-space:nowrap}
.mg-badge i{width:7px;height:7px;border-radius:50%;background:#12936B}
.mg-badge .num{display:inline!important;margin:0!important;color:#0A1A33!important;font-weight:600}
.mg-cols,.mg-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);gap:16px;align-items:center}
.mg-cols{padding:0 0 10px;border-bottom:1px solid #E7EBF1;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7A859A}
.mg-cols span:nth-child(2),.mg-cols span:nth-child(3){text-align:right}
.mg-row{padding:13px 0;border-bottom:1px solid #F0F2F6}
.mg-obj b{display:block;font-size:14.5px;font-weight:600}
.mg-obj code{font:500 11.5px "JetBrains Mono",ui-monospace,monospace;color:#7A859A}
.mg-n,.mg-m{text-align:right;font:500 14px "JetBrains Mono",ui-monospace,monospace;color:#5B6880}
.mg-m{color:#0A1A33;font-weight:600}
.mg-st{display:flex;align-items:center;gap:12px}
.mg-bar{flex:1;height:6px;border-radius:3px;background:#EEF1F5;overflow:hidden;display:block}
.mg-bar b{display:block;height:100%;width:100%;border-radius:3px;background:#12936B;transform-origin:0 50%;transform:scaleX(var(--p,1))}
.mg-ok{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#12704F;white-space:nowrap;opacity:1;transition:opacity .3s}
.mg-ok svg{width:13px;height:13px}
.h6-card.run .mg-row:not(.ok) .mg-ok{opacity:.0}
.h6-card.run .mg-row:not(.ok) .mg-bar b{background:#0A1A33}
.mg-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;font-size:12px;color:#7A859A}
@media (prefers-reduced-motion:no-preference){.hero6:not([hidden]) .h6-copy > *{animation:rise .9s cubic-bezier(.16,1,.3,1) both}.hero6 .h6-copy > :nth-child(2){animation-delay:.08s}.hero6 .h6-copy > :nth-child(3){animation-delay:.18s}.hero6 .h6-copy > :nth-child(4){animation-delay:.26s}.hero6 .h6-copy > :nth-child(5){animation-delay:.34s}.hero6:not([hidden]) .h6-stage{animation:fadeUp 1.1s .35s cubic-bezier(.16,1,.3,1) both}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:560px){.hero6 .hero-ctas{width:100%}.hero6 .hero-ctas .btn{flex:1 1 100%;justify-content:center}}
@media (max-width:760px){.hero6{padding-block:56px 24px}.h6-stage{margin-top:44px}.h6-card{padding:18px 16px 12px;border-radius:16px}.mg-cols,.mg-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr);gap:10px}.mg-cols span:nth-child(2),.mg-n{display:none}.mg-ok span,.mg-ok{font-size:0}.mg-ok svg{width:16px;height:16px}.mg-head{flex-direction:column;gap:10px}.mg-obj code{display:none}.mg-m,.mg-n{font-size:13px}}
/* hero v6b: before/after transformation card */
.txc{padding:0!important;aspect-ratio:16/10.2;overflow:hidden;container-type:inline-size;background:#F3F3F3!important}
.tx-l,.tx-r{position:absolute;inset:0}
.tx-r{clip-path:inset(0 0 0 var(--x));transition:clip-path .05s linear}
/* left: Salesforce-like, generic */
.sf{background:#F3F3F3;color:#181818;font-family:Inter,system-ui,sans-serif;filter:saturate(.6)}
.sf-top{height:6.4%;display:flex;align-items:center;gap:1.2cqw;padding:0 1.6cqw;background:#fff;border-bottom:1px solid #E2E2E2}
.sf-top b{font-size:1.35cqw}
.sf-grid{display:grid;grid-template-columns:repeat(3,.4cqw);gap:.28cqw}.sf-grid i{width:.4cqw;height:.4cqw;border-radius:50%;background:#706E6B}
.sf-search{flex:1;height:2.3cqw;border-radius:.6cqw;background:#F3F3F3;border:1px solid #E2E2E2;margin:0 3cqw}
.sf-dot{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#C9C9C9}.sf-av{width:2.2cqw;height:2.2cqw;border-radius:50%;background:#9BB8E3}
.sf-tabs{height:5.4%;display:flex;align-items:center;gap:1.5cqw;padding:0 1.6cqw;background:#fff;border-bottom:.25cqw solid #0176D3;font-size:1.05cqw;color:#555;white-space:nowrap;overflow:hidden}
.sf-tabs .on{color:#0176D3;font-weight:700}
.sf-body{padding:1.3cqw 1.6cqw;display:flex;flex-direction:column;gap:1cqw;height:88%}
.sf-head{display:flex;align-items:center;gap:1cqw;background:#fff;border:1px solid #E2E2E2;border-radius:.7cqw;padding:1.1cqw 1.3cqw}
.sf-ico{width:3cqw;height:3cqw;border-radius:.5cqw;background:#7F8DE1}
.sf-head div:nth-child(2){flex:1;min-width:0}.sf-head small{display:block;font-size:.95cqw;color:#706E6B}.sf-head b{font-size:1.5cqw;white-space:nowrap}
.sf-btns{display:flex;gap:0}.sf-btns span{font-size:.95cqw;color:#0176D3;border:1px solid #C9C9C9;padding:.5cqw .9cqw;background:#fff}.sf-btns span:first-child{border-radius:.5cqw 0 0 .5cqw}.sf-btns span:last-child{border-radius:0 .5cqw .5cqw 0}
.sf-hl{display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw;background:#fff;border:1px solid #E2E2E2;border-radius:.7cqw;padding:1cqw 1.3cqw}.sf-hl i{height:1.6cqw;border-radius:.3cqw;background:linear-gradient(#ECEBEA 0 40%,transparent 40% 60%,#DDDBDA 60%)}
.sf-main{flex:1;display:grid;grid-template-columns:1.6fr 1fr;gap:1cqw;min-height:0}
.sf-det{background:#fff;border:1px solid #E2E2E2;border-radius:.7cqw;padding:1cqw 1.3cqw;display:flex;flex-direction:column;gap:1cqw;overflow:hidden}
.sf-sub{display:flex;gap:1.6cqw;font-size:1cqw;color:#555;border-bottom:1px solid #E2E2E2;padding-bottom:.7cqw}.sf-sub .on{color:#0176D3;font-weight:700;box-shadow:inset 0 -.25cqw 0 #0176D3;padding-bottom:.6cqw;margin-bottom:-.75cqw}
.sf-fields{display:grid;grid-template-columns:1fr 1fr;gap:.9cqw 1.6cqw}
.sf-fields div{border-bottom:1px solid #EFEFEF;padding-bottom:.5cqw}.sf-fields small{display:block;font-size:.85cqw;color:#706E6B}.sf-fields i{display:block;height:.9cqw;width:70%;margin-top:.35cqw;border-radius:.3cqw;background:#E6E5E4}
.sf-side{display:flex;flex-direction:column;gap:.8cqw}
.sf-rel{background:#fff;border:1px solid #E2E2E2;border-radius:.7cqw;padding:.9cqw 1.1cqw;display:flex;flex-direction:column;gap:.45cqw}.sf-rel b{font-size:1cqw}.sf-rel i{height:.6cqw;border-radius:.3cqw;background:#ECEBEA}.sf-rel i:last-child{width:65%}
.sf-cost{position:absolute;left:1.6cqw;bottom:1.6cqw;display:inline-flex;align-items:center;gap:.8cqw;padding:.8cqw 1.3cqw;border-radius:.7cqw;background:#2B2B2B;color:#fff;font:600 max(9px,1.2cqw)/1 Inter,system-ui,sans-serif;filter:none}
.sf-cost i{width:.9cqw;height:.9cqw;border-radius:50%;background:#E5483C}
/* right: your CRM, tailored */
.nc{background:#F6F7FA;display:flex;font-family:Inter,system-ui,sans-serif;color:#0A1A33}
.nc-side{width:30%;flex:none;background:#0A1A33;display:flex;flex-direction:column;gap:.5cqw;padding:2cqw 1.6cqw 2cqw 0;align-items:flex-end}
.nc-side span{display:flex;align-items:center;gap:1cqw;width:13cqw;padding:.9cqw 1.1cqw;border-radius:.8cqw;font-size:1.2cqw;font-weight:600;color:#A9B6CC}
.nc-side span i{width:1.3cqw;height:1.3cqw;border-radius:.35cqw;background:rgba(255,255,255,.14)}
.nc-side span.on{background:rgba(255,197,61,.14);color:#FFC53D}.nc-side span.on i{background:#FFC53D}
.nc-brand{display:flex;align-items:center;gap:.9cqw;width:13cqw;padding:0 1.1cqw 1.6cqw;color:#F0EBE0;font:800 1.6cqw var(--display)}
.nc-logo{width:2.2cqw;height:2.2cqw;border:.4cqw solid #F0EBE0;border-radius:50%}

.nc-main{flex:1;min-width:0;padding:2cqw 2.4cqw;display:flex;flex-direction:column;gap:1.6cqw}
.nc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5cqw}
.nc-head b{font-family:var(--display);font-size:2.6cqw;letter-spacing:-0.02em}
.nc-tags{display:flex;gap:.7cqw;margin-top:.7cqw}.nc-tags span{font-size:1.05cqw;font-weight:600;padding:.4cqw .9cqw;border-radius:999px;background:#EEF1F6;color:#4A5670}.nc-tags .g{background:#E7F6EE;color:#12704F}
.nc-zero{font:700 1.15cqw Inter,sans-serif;padding:.7cqw 1.1cqw;border-radius:999px;background:#0A1A33;color:#FFC53D;white-space:nowrap}
.nc-acts{display:flex;gap:.9cqw}
.nc-acts span{display:inline-flex;align-items:center;gap:.6cqw;padding:.8cqw 1.3cqw;border-radius:.9cqw;background:#fff;box-shadow:0 1px 2px rgba(10,26,51,.08);font-size:1.15cqw;font-weight:600}
.nc-acts span svg{width:1.4cqw;height:1.4cqw}.nc-acts span:first-child{background:#0A1A33;color:#fff}
.nc-grid{flex:1;display:grid;grid-template-columns:1.15fr 1fr;gap:1.4cqw;min-height:0}
.nc-ai{background:#fff;border-radius:1.2cqw;padding:1.6cqw;box-shadow:0 0 0 1px rgba(255,197,61,.55),0 10px 30px -14px rgba(255,197,61,.6);display:flex;flex-direction:column;gap:.9cqw}
.nc-ai p{margin:0;font-size:1.3cqw;line-height:1.5;color:#3A4660}
.nc-ai-h{display:flex;align-items:center;gap:.6cqw;font-weight:700;color:#8A5A00!important;font-size:1.15cqw!important;text-transform:uppercase;letter-spacing:.06em}.nc-ai-h svg{width:1.5cqw;height:1.5cqw;color:#E8A400}
.nc-next{margin-top:auto!important;padding:.9cqw 1.1cqw;border-radius:.8cqw;background:#FFF4D6;color:#0A1A33!important;font-weight:600}
.nc-col{display:flex;flex-direction:column;gap:1.2cqw}
.nc-path{display:flex;flex-direction:column;gap:.6cqw;background:#fff;border-radius:1.2cqw;padding:1.3cqw;box-shadow:0 1px 2px rgba(10,26,51,.06)}
.nc-path span{position:relative;font-size:1.15cqw;font-weight:600;color:#7A859A;padding-left:2.2cqw}
.nc-path span::before{content:"";position:absolute;left:0;top:.2cqw;width:1.2cqw;height:1.2cqw;border-radius:50%;box-shadow:inset 0 0 0 .2cqw #CBD3DF}
.nc-path span.done{color:#12704F}.nc-path span.done::before{background:#12936B;box-shadow:none}
.nc-path span.cur{color:#0A1A33}.nc-path span.cur::before{background:#FFC53D;box-shadow:0 0 0 .4cqw rgba(255,197,61,.3)}
.nc-kp{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8cqw}
.nc-kp div{background:#fff;border-radius:1cqw;padding:1cqw;box-shadow:0 1px 2px rgba(10,26,51,.06)}.nc-kp small{display:block;font-size:.95cqw;color:#7A859A}.nc-kp b{display:block;font-size:1.3cqw;margin-top:.3cqw;white-space:nowrap}
.nc-main{padding-top:5cqw!important;gap:1.3cqw!important}
.nc-grid{flex:none!important;align-items:start}
.nc-feed{background:#fff;border-radius:1.2cqw;padding:1.3cqw 1.6cqw;box-shadow:0 1px 2px rgba(10,26,51,.06);display:flex;flex-direction:column;gap:.2cqw}
.nc-feed-h{margin:0 0 .5cqw;font-size:1.05cqw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A859A}
.nc-ev{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:1cqw;padding:.75cqw 0;border-top:1px solid #EEF1F5;font-size:1.2cqw;white-space:nowrap;min-width:0}
.nc-ev:first-of-type{border-top:0}
.nc-ev i{width:1.9cqw;height:1.9cqw;border-radius:.5cqw;background:#E7F6EE}.nc-ev i.k-doc{background:#FFF4D6}.nc-ev i.k-ph{background:#E8EFFE}
.nc-ev span{color:#5B6880;overflow:hidden;text-overflow:ellipsis}.nc-ev em{font-style:normal;color:#9AA3B5;font-size:1.05cqw}
/* tags and divider */
.tx-tag{position:absolute;top:1.6cqw;z-index:4;font:700 max(9.5px,1.15cqw)/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:.8cqw 1.2cqw;border-radius:999px;pointer-events:none}
.tx-tag.l{left:calc(var(--x) - 1.6cqw);transform:translateX(-100%);background:rgba(43,43,43,.88);color:#fff}
.tx-tag.r{left:calc(var(--x) + 1.6cqw);background:#FFC53D;color:#0A1A33}
.tx-line{position:absolute;top:0;bottom:0;left:var(--x);width:0;z-index:5}
.tx-line::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#FFC53D;box-shadow:0 0 18px rgba(255,197,61,.7)}
.tx-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:max(34px,4.4cqw);height:max(34px,4.4cqw);border-radius:50%;background:#FFC53D;box-shadow:0 8px 24px -6px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;gap:4px;cursor:ew-resize;touch-action:none}
.tx-knob i{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}.tx-knob i:first-child{border-right:6px solid #0A1A33}.tx-knob i:last-child{border-left:6px solid #0A1A33}
.tx-knob:focus-visible{outline:3px solid #fff;outline-offset:3px}
.h6-ben{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.h6-ben li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;font-weight:600;color:var(--fg)}
.h6-ben svg{width:15px;height:15px;color:var(--amber)}
@media (max-width:760px){.txc .m-hide{display:none}.txc{aspect-ratio:4/3.3}.h6-ben li{font-size:13px;padding:8px 12px}}
/* hero v8: migration flow screen */
.mfx{padding:0!important;overflow:hidden;container-type:inline-size;background:#fff!important;font-family:Inter,system-ui,sans-serif}
.mf-bar{display:flex;align-items:center;gap:1.4cqw;padding:1.5cqw 2.2cqw;border-bottom:1px solid #E8ECF2;background:#F7F8FB;position:relative}
.mf-dots{display:flex;gap:.6cqw}.mf-dots i{width:1cqw;height:1cqw;border-radius:50%;background:#D5DAE2}
.mf-bar>b{font:600 max(11px,1.3cqw) Inter,sans-serif;color:#0A1A33}
.mf-st{margin-left:auto;display:inline-flex;align-items:center;gap:.7cqw;font:500 max(10.5px,1.2cqw) "JetBrains Mono",ui-monospace,monospace;color:#5B6880}
.mf-st>i{width:.9cqw;height:.9cqw;border-radius:50%;background:#E8A400;box-shadow:0 0 0 .45cqw rgba(232,164,0,.18)}
.mfx.done .mf-st>i{background:#12936B;box-shadow:0 0 0 .45cqw rgba(18,147,107,.18)}.mfx.done .mf-st{color:#12704F}
.mf-track{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}.mf-track b{display:block;height:100%;background:#FFC53D;transform-origin:0 50%;transform:scaleX(var(--pp,0));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mfx.done .mf-track b{background:#12936B}
.mf-body{display:grid;grid-template-columns:minmax(0,1fr) 9% minmax(0,1.45fr);padding:2.2cqw;gap:0}
.mf-h{margin:0 0 1.4cqw;height:5.4cqw;display:flex;align-items:center;gap:1cqw;color:#0A1A33}
.mf-ht{display:flex;flex-direction:column;gap:.3cqw;min-width:0}.mf-ht b{font:700 max(12px,1.55cqw) Inter,sans-serif}
.mf-h small{font:500 max(10px,1.1cqw) Inter,sans-serif;color:#7A859A}
.mf-dot{width:1.1cqw;height:1.1cqw;border-radius:50%}.mf-dot.g{background:#A8B1C2}.mf-dot.a{background:#FFC53D}
.mf-src{background:#F3F5F8;border-radius:1.4cqw;padding:1.8cqw}
.mf-s{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1cqw;height:6.2cqw;padding:0 1cqw;margin-bottom:.8cqw;border-radius:1cqw;background:#fff;box-shadow:0 1px 2px rgba(10,26,51,.05);transition:opacity .5s,transform .5s}
.mf-s:last-child{margin-bottom:0}
.mf-ic{width:3cqw;height:3cqw;border-radius:.8cqw;background:#EEF1F5;color:#7A859A;display:flex;align-items:center;justify-content:center}.mf-ic svg{width:1.7cqw;height:1.7cqw}
.mf-s b{font:600 max(10.5px,1.3cqw) Inter,sans-serif;color:#4A5670;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-s em{font:500 max(9.5px,1.05cqw) "JetBrains Mono",ui-monospace,monospace;font-style:normal;color:#9AA3B5;white-space:nowrap}
.mfx.run .mf-s.on{opacity:.38;transform:translateX(-.6cqw)}
.mf-flow{display:flex;flex-direction:column;padding-top:calc(1.8cqw + 6.8cqw);gap:.8cqw}
.mf-p{display:block;height:6.2cqw;background:linear-gradient(90deg,#DCE2EA 50%,transparent 50%) 0 50%/1.4cqw 2px repeat-x}
.mf-p.on{background-image:linear-gradient(90deg,#E8A400 50%,transparent 50%);animation:mfDash .7s linear infinite}
.mfx.done .mf-p.on{background-image:linear-gradient(90deg,#9FD3B9 50%,transparent 50%);animation-duration:2.4s}
@keyframes mfDash{to{background-position:1.4cqw 50%}}
.mf-dst{border-radius:1.4cqw;padding:1.8cqw;background:#0A1A33;color:#EAF0FA}
.mf-dst .mf-h{color:#fff}.mf-dst .mf-h small{color:#93A4C3}
.mf-h .mf-dot{flex:none}
.mf-ai{margin-left:auto;display:inline-flex;align-items:center;gap:.5cqw;padding:.55cqw 1cqw;border-radius:999px;background:rgba(255,197,61,.14);color:#FFC53D;font:700 max(9.5px,1.05cqw) Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;opacity:.35;transition:opacity .6s,box-shadow .6s}
.mf-ai svg{width:1.2cqw;height:1.2cqw}
.mfx.done .mf-ai{opacity:1;box-shadow:0 0 0 .4cqw rgba(255,197,61,.12),0 0 24px rgba(255,197,61,.35)}
.mfx:not(.run) .mf-ai{opacity:1}
.mf-d{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1cqw;height:6.2cqw;padding:0 1.2cqw;margin-bottom:.8cqw;border-radius:1cqw;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);transition:opacity .5s,transform .5s,background .5s}
.mf-ok{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#12936B;color:#fff;display:flex;align-items:center;justify-content:center}.mf-ok svg{width:1.4cqw;height:1.4cqw}
.mf-d b{font:600 max(10.5px,1.35cqw) Inter,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-up{font:600 max(9.5px,1.1cqw) Inter,sans-serif;color:#0A1A33;background:#FFC53D;padding:.5cqw .9cqw;border-radius:999px;white-space:nowrap}
.mfx.run .mf-d:not(.on){opacity:.15}.mfx.run .mf-d:not(.on) .mf-up{opacity:0}
.mfx.run .mf-d.on{animation:mfIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes mfIn{from{opacity:.15;transform:translateX(-1.2cqw)}to{opacity:1;transform:none}}
.mf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1cqw;margin-top:1.4cqw;transition:opacity .7s,transform .7s}
.mfx.run:not(.done) .mf-tiles{opacity:0;transform:translateY(1cqw)}
.mf-tiles div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:1cqw;padding:1.2cqw}
.mf-tiles b{display:flex;align-items:center;gap:.5cqw;font:700 max(10.5px,1.3cqw) Inter,sans-serif;color:#FFC53D}.mf-tiles b svg{width:1.3cqw;height:1.3cqw}
.mf-tiles span{display:block;margin-top:.4cqw;font-size:max(9.5px,1.1cqw);line-height:1.35;color:#A9B6CC}
@media (max-width:760px){
 .mf-body{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
 .mf-flow{display:none}
 .mf-src{padding:12px;display:flex;flex-wrap:wrap;gap:6px}
 .mf-src .mf-h{flex-basis:100%;margin-bottom:4px}
 .mf-s{height:auto;padding:6px 10px;margin:0;grid-template-columns:auto auto;gap:6px}.mf-s em,.mf-ic{display:none}.mf-s b{font-size:12px}
 .mf-dst{padding:14px}.mf-d{height:40px;padding:0 10px;gap:8px}.mf-ok{width:20px;height:20px}.mf-ok svg{width:12px;height:12px}
 .mf-d b{font-size:12.5px}.mf-up{font-size:10.5px;padding:3px 8px}
 .mf-tiles{grid-template-columns:minmax(0,1fr);gap:6px}.mf-tiles div{padding:10px 12px}.mf-tiles b{font-size:13px}.mf-tiles b svg{width:13px;height:13px}.mf-tiles span{font-size:12px}
 .mf-bar{padding:10px 14px}.mf-dots i{width:8px;height:8px}.mf-dots{gap:5px}.mf-st>i{width:7px;height:7px}
 .mf-h{height:auto}.mf-ht b{font-size:14px}.mf-h small{font-size:11.5px}.mf-dot{width:9px;height:9px}.mf-ai{font-size:10px;padding:3px 8px}.mf-ai svg{width:11px;height:11px}
}
.hv-sw{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(16,36,70,.92);border:1px solid var(--line-2);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hv-sw button{border:0;background:transparent;color:var(--fg-2);font:600 12.5px var(--text);height:32px;padding:0 12px;border-radius:999px;cursor:pointer}
.hv-sw button[aria-pressed="true"]{background:var(--amber);color:var(--ink)}
/* hero variants */
.hero-left{align-items:flex-start;text-align:left}
.hero-left .mega{align-items:flex-start}
.strike-w{position:relative;display:inline-block}
.strike-line{position:absolute;left:-3%;right:-3%;top:52%;height:.085em;border-radius:.04em;background:var(--amber);transform-origin:left center}
@media (prefers-reduced-motion: no-preference){.hv:not([hidden]) .strike-line{animation:draw .7s .65s cubic-bezier(.65,0,.35,1) both}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-edit{align-items:flex-start;justify-content:flex-end;text-align:left;gap:32px}
.hero-edit .mega{align-items:flex-start}
.edit-row{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;padding-top:32px;border-top:1px solid var(--line)}
.edit-row .hero-sub{max-width:44ch}
/* interlude */
.interlude{padding-block:168px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.inter-1{margin:0;max-width:30ch;font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,42px);line-height:1.25;letter-spacing:-0.02em;color:var(--fg-2);text-wrap:balance}
.inter-2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,52px);letter-spacing:-0.03em;color:var(--amber)}
/* review bar */
.review{position:fixed;z-index:40;left:max(16px, env(safe-area-inset-left, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  background:rgba(16,36,70,.96);color:#EAF0FA;border:1px solid #2E4366;border-radius:14px;padding:10px 12px;font-size:13px;box-shadow:0 18px 40px rgba(0,0,0,.35);max-width:calc(100vw - 32px)}
.review b{font-weight:600;color:#A9B6CC}
.review .seg{display:flex;gap:4px}
.review button{min-height:34px;min-width:34px;padding:0 10px;border-radius:8px;border:1px solid #2E4366;background:transparent;color:#EAF0FA;cursor:pointer;font:600 13px var(--text)}
.review button[aria-pressed="true"]{background:#FFC53D;border-color:#FFC53D;color:#0A1A33}
.review .x{border:0;color:#A9B6CC;min-width:28px;padding:0}

/* classic, more serious version: light ground, navy blocks, quieter type, colour as an accent */
html.classic{color-scheme:light;--fg:#0A1A33;--fg-2:#4A5670;--fg-3:#5B6880;--line:#DCE2EA;--line-2:#BFC9D6}
html.classic body{background:#F4F6F9;color:var(--fg)}
html.classic body::before{background:#F4F6F9}
html.classic :focus-visible{outline-color:#0A1A33}
html.classic .top{background:rgba(244,246,249,.95);border-bottom-color:#DCE2EA}
html.classic .top.open .nav{background:#F4F6F9}
html.classic .nav a:hover,html.classic .nav a[aria-current="page"]{color:#0A1A33}
html.classic .foot-nav a:hover{color:#0A1A33}
html.classic .h1,html.classic .h2,html.classic .mega,html.classic .h3,html.classic .inter-2,html.classic .facts dt,html.classic .step-title{font-weight:600}
html.classic .mega{letter-spacing:-0.035em}
html.classic .amber{color:#1F4FB8}
html.classic .inter-2{color:#1F4FB8}
html.classic .btn-amber{background:#0A1A33;color:#fff}
html.classic .btn-amber:hover{background:#1A3157}
html.classic .btn-ghost:hover{background:rgba(10,26,51,.04);border-color:#0A1A33}
html.classic .hero2::before{background-image:radial-gradient(rgba(10,26,51,.10) 1px, transparent 1.3px)}
html.classic .strike-line{background:#1F4FB8}
html.classic .paper{border:1px solid #E1E6EE}
html.classic .ptab[aria-selected="true"]{background:#fff;border-color:#0A1A33}
html.classic .cmp .pp-c{background:#0A1A33;color:#EAF0FA;border-top-color:#1F3457}
html.classic .cmp thead .pp-c{color:#FFC53D}
html.classic .raised,html.classic .band{--fg:#EAF0FA;--fg-2:#A9B6CC;--fg-3:#93A4C3;--line:#1F3457;--line-2:#2E4366;color:var(--fg)}
html.classic .raised{background:#0A1A33;border-color:#0A1A33}
html.classic .raised .amber{color:var(--amber)}
html.classic .raised .btn-amber{background:var(--amber);color:#0A1A33}
html.classic .raised :focus-visible{outline-color:var(--amber)}
html.classic .band{background:#0A1A33;--amber-ink:#A9B6CC;--ink:#EAF0FA}
html.classic .band .btn-ink{background:var(--amber);color:#0A1A33}
html.classic .band .btn-ink:hover{background:var(--amber-2)}

/* prelude, money chart, technical layer */
.ub-wrap{padding-top:120px}
.ub{background:var(--amber);color:var(--ink);border-radius:var(--r-lg);padding:clamp(32px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px 72px;align-items:end}
.ub .h2{color:var(--ink);font-size:clamp(36px,4.4vw,64px);max-width:14ch}
.ub-r{display:flex;flex-direction:column;gap:28px}
.ub-lead{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--amber-ink)}
.ub-bars{display:flex;flex-direction:column;gap:14px}
.ub-row{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:16px;font-size:14px;font-weight:600;color:var(--ink)}
.ub-bar{display:block;height:14px;border-radius:7px}
.ub-bar.full{background:var(--ink)}
.ub-bar.part{box-shadow:inset 0 0 0 1.5px rgba(10,26,51,.45);background:repeating-linear-gradient(90deg,rgba(10,26,51,.12) 0 6px,transparent 6px 12px)}
.ub-bar.part b{display:block;height:100%;width:22%;border-radius:7px;background:var(--ink)}
.ub-bars small{font-size:13px;color:var(--amber-ink);opacity:.85}
@media (prefers-reduced-motion:no-preference){html.mo .ub:not(.in) .ub-bar.part b{transform:scaleX(0)}.ub-bar.part b{transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .3s}}
@media (max-width:860px){.ub{grid-template-columns:minmax(0,1fr)}.ub-row{grid-template-columns:96px minmax(0,1fr)}}
.prelude{margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--fg-3);max-width:56ch}
.prelude strong{color:var(--amber);font-weight:600}
.money{display:flex;flex-direction:column;gap:36px}
.money-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.big-money{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(72px,11vw,168px);line-height:.92;letter-spacing:-0.055em;color:var(--amber)}
.legend{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--fg-2)}
.legend i{display:inline-block;width:16px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}
.mchart{display:flex;flex-direction:column}
.mrow{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,3.2fr) minmax(150px,auto);gap:14px 32px;align-items:center;padding:22px 8px;margin:0 -8px;border-top:1px solid var(--line);border-radius:10px;transition:background-color .16s ease}
.mrow:last-child{border-bottom:1px solid var(--line)}
.mrow:hover{background:rgba(255,255,255,.03)}
.mlab b{display:block;font-family:var(--display);font-size:18px;line-height:1.25}
.mlab span{color:var(--fg-3);font-size:14px}
.mbars{display:flex;flex-direction:column;gap:6px;min-width:0}
.mline{display:flex;align-items:center;gap:10px;min-width:0;padding-right:104px}
.mbar{height:14px;border-radius:2px 4px 4px 2px;flex:0 0 auto;min-width:6px}
.mbar.m-sf{background:#4A78D6}
.mbar.m-pp{background:var(--amber)}
.mline span{font-size:14px;color:var(--fg-2);white-space:nowrap}
.msave{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.msave .num{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.1}
.msave small{color:var(--fg-3);font-size:13px}
@media (max-width:760px){.facts dt{font-size:26px}.mrow{grid-template-columns:minmax(0,1fr)}.msave{flex-direction:row;align-items:baseline;gap:10px;text-align:left}}
:root{--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}
.tech{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.tech-list{flex:1.5 1 600px;min-width:0;display:flex;flex-direction:column}
.tech-cols,.tech-list summary{display:grid;grid-template-columns:minmax(0,1.15fr) 22px minmax(0,1fr) 22px;gap:14px 18px;align-items:center}
.tech-cols{padding:0 0 12px;font-size:13px;font-weight:600;color:var(--fg-3);border-bottom:1px solid var(--line)}
.tech-list details{border-bottom:1px solid var(--line)}
.tech-list summary{list-style:none;cursor:pointer;padding:20px 0;border-radius:8px}
.tech-list summary::-webkit-details-marker{display:none}
.tech-list summary:hover .to{color:#fff}
.sfk{display:flex;flex-direction:column;gap:9px;min-width:0}
.sfk b{font-family:var(--display);font-size:18px;font-weight:700}
.api{display:flex;flex-wrap:wrap;gap:6px}
.api code{font:12.5px/1 var(--mono);background:var(--navy-2);border:1px solid var(--line);color:#C9D2E1;padding:5px 7px;border-radius:6px}
.arr{color:var(--amber);font-weight:700}
.to{color:var(--fg);font-weight:500;transition:color .15s}
.pl{width:20px;height:20px;position:relative;justify-self:end}
.pl::before,.pl::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:2px;border-radius:1px;background:var(--fg-3);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.pl::after{transform:rotate(90deg)}
details[open] .pl::after{transform:rotate(0deg)}
.tech-detail{padding:0 0 22px;color:var(--fg-2);max-width:72ch}
.code{flex:1 1 400px;min-width:0;position:sticky;top:96px;background:#06122A;color:#DCE4F2;border:1px solid #1F3457;border-radius:var(--r-lg);overflow:hidden}
.code-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 18px;border-bottom:1px solid #1F3457;font-size:13px;color:#93A4C3}
.code pre{margin:0;padding:20px 18px;overflow-x:auto;font:13px/1.7 var(--mono);color:#DCE4F2}
.code .c{color:#7F92B4}
.code .k{color:#FFC53D}
.code-f{margin:0;padding:12px 18px;border-top:1px solid #1F3457;font-size:13px;color:#93A4C3}
@media (max-width:640px){.tech-cols{display:none}.tech-list summary{grid-template-columns:minmax(0,1fr) 22px}.tech-list summary .arr{display:none}.tech-list summary .to{grid-column:1;grid-row:2}.tech-list summary .pl{grid-column:2;grid-row:1}}
html.classic .prelude strong,html.classic .big-money{color:#1F4FB8}
html.classic .api code{background:#E9EDF3;border-color:#DCE2EA;color:#0A1A33}
html.classic .arr{color:#1F4FB8}
html.classic .tech-list summary:hover .to{color:#0A1A33}
html.classic .mrow:hover{background:rgba(10,26,51,.03)}
html.classic .mbar.m-pp{background:#E9A800}
html.classic .legend i[style*="amber"]{background:#E9A800!important}
/* simulator: tooltips, wish list, no lo sé, result tiles */
.tipw{position:relative;display:inline-flex;vertical-align:middle;margin-left:6px}
.tipb{position:relative;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;background:transparent;color:inherit;padding:0;cursor:help;
  display:inline-flex;align-items:center;justify-content:center;font:700 11.5px/1 var(--display);opacity:.75;transition:opacity .15s,background-color .15s,border-color .15s,color .15s}
.tipb::after{content:"";position:absolute;inset:-12px}
.tipw:hover .tipb,.tipw:focus-within .tipb{opacity:1;background:var(--amber);border-color:var(--amber);color:var(--ink)}
.tip-pop{position:fixed;z-index:80;left:16px;top:0;width:min(320px,calc(100vw - 32px));background:#06122A;color:#DCE4F2;border:1px solid #2E4366;border-radius:12px;
  padding:16px 18px;box-shadow:0 18px 40px rgba(0,0,0,.35);font:400 14px/1.5 var(--text);letter-spacing:0;text-align:left;white-space:normal;
  visibility:hidden;opacity:0;transition:opacity .15s ease,visibility 0s linear .15s;pointer-events:none}
.tipw:hover .tip-pop,.tipw:focus-within .tip-pop{visibility:visible;opacity:1;transition:opacity .15s ease}
.tip-pop b{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:#fff;margin-bottom:6px}
.tip-pop ul{margin:10px 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.tip-pop li{position:relative;padding-left:22px}
.tip-pop li::before{content:"";position:absolute;left:3px;top:.42em;width:10px;height:5px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.tip-own{display:block;color:var(--amber);font-weight:600;padding-top:10px;border-top:1px solid #1F3457}
.chip-ns{border-style:dashed;color:var(--ink-2)}
.chip-ns[aria-pressed="true"]{border-style:solid}
.wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.wish{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--paper-field);background:#fff;color:var(--ink);
  font:inherit;cursor:pointer;transition:transform .14s cubic-bezier(.16,1,.3,1),background-color .16s ease,border-color .16s ease,color .16s ease}
.wish:hover{border-color:var(--ink)}
.wish:active{transform:scale(.985)}
.wish-t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;line-height:1.3}
.wish-t svg{flex:0 0 auto}
.wish-d{font-size:14px;line-height:1.45;color:var(--ink-2)}
.wish-x{margin-top:auto;padding-top:2px;font-size:13px;font-weight:500;color:var(--ink-3)}
.wish[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.wish[aria-pressed="true"] .wish-d{color:#C9D2E1}
.wish[aria-pressed="true"] .wish-x{color:var(--amber)}
.sim-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:0}
.sim-tiles>div{background:var(--paper-tint);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sim-tiles dt{display:flex;align-items:center;font-size:13px;color:var(--ink-3)}
.sim-tiles .big{margin:2px 0;font-family:var(--display);font-weight:700;font-size:21px;white-space:nowrap}
.sim-tiles .sub{margin:0;font-size:13px;line-height:1.4;color:var(--ink-3)}
.sim-tiles .ink{background:var(--ink);color:#fff}
.sim-tiles .ink dt,.sim-tiles .ink .sub{color:#C9D2E1}
.sim-tiles .hi{background:var(--amber)}
.sim-tiles .hi dt,.sim-tiles .hi .sub{color:var(--amber-ink)}
.own-box{background:var(--amber-soft);color:var(--ink);border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.5}
.own-box b{font-weight:700}
.res-grid dt{display:flex;align-items:center}
html.classic .sim-tiles .ink{background:#0A1A33}
/* blog, articles, resources */
.kick{margin:0;font-weight:600;font-size:15px;color:var(--amber)}
.cat{display:inline-flex;align-self:flex-start;font-size:13px;font-weight:600;padding:5px 10px;border-radius:7px;background:var(--paper-tint);color:var(--ink-2)}
.raised .cat{background:var(--navy-3);color:var(--amber)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:20px}
.post-card{display:flex;flex-direction:column;gap:14px;padding:28px;text-decoration:none;color:var(--ink);transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(0,0,0,.28)}
.post-card:active{transform:translateY(-1px) scale(.995)}
.post-card h3{margin:0;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.22;letter-spacing:-0.015em;text-wrap:balance}
.post-card p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55}
.post-meta{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--ink-3)}
.post-go{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.post-go .ico{width:18px;height:18px;transition:transform .2s cubic-bezier(.16,1,.3,1)}
a:hover .post-go .ico{transform:translateX(3px)}
.post-feat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px 64px;align-items:end;padding:clamp(28px,4.5vw,64px);margin:0 0 20px;text-decoration:none;color:var(--fg);transition:border-color .2s ease}
.post-feat:hover{border-color:var(--line-2)}
.post-feat h2{margin:16px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.1vw,44px);line-height:1.06;letter-spacing:-0.03em;text-wrap:balance}
.pf-r{display:flex;flex-direction:column;gap:20px}
.pf-r p{margin:0;font-size:18px;line-height:1.55;color:var(--fg-2)}
.post-feat .post-meta{color:var(--fg-3)}
.post-feat .post-go{color:var(--amber)}
@media (max-width:860px){.post-feat{grid-template-columns:minmax(0,1fr)}}
.blog-filter{margin:-16px 0 32px}
.nl-band{align-items:center}
.nl-form{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 380px;max-width:520px}
.nl-form .input{flex:1 1 220px;border-color:rgba(10,26,51,.25)}
.nl-form .err,.nl-form .nl-ok{flex:1 0 100%;margin:0}
.nl-ok{font-weight:600;color:var(--ink)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--fg-3)}
.crumbs a{color:var(--fg-2);text-decoration:none;font-weight:500}
.crumbs a:hover{color:var(--fg)}
.post-top{display:flex;flex-direction:column;gap:20px;max-width:1000px;padding-top:72px}
.post-h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(36px,5vw,68px);line-height:1.04;letter-spacing:-0.035em;text-wrap:balance}
.post-lead{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--fg-2);max-width:64ch}
.post-by{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;font-size:14px;color:var(--fg-3)}
.post-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;margin-top:48px}
@media (max-width:1060px){.post-body{grid-template-columns:minmax(0,1fr)}.post-aside{position:static!important}.toc{display:none}}
.prose{padding:clamp(24px,5vw,72px);min-width:0}
.prose>*{max-width:70ch}
.prose h2{margin:56px 0 16px;font-family:var(--display);font-weight:700;font-size:clamp(25px,2.4vw,32px);line-height:1.15;letter-spacing:-0.02em;color:var(--ink);scroll-margin-top:100px;text-wrap:balance}
.prose h3{margin:30px 0 8px;font-family:var(--display);font-weight:700;font-size:20px;line-height:1.3;color:var(--ink)}
.prose p,.prose li{font-size:18px;line-height:1.7;color:#27344F}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--ink-3)}
.prose a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--ink)}
.prose strong{color:var(--ink)}
.prose code{font:.86em var(--mono);background:var(--paper-tint);padding:2px 6px;border-radius:5px;color:var(--ink)}
.prose .small,.prose .src{font-size:15px;color:var(--ink-3)}
.prose .src{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--paper-line)}
.prose .muted{color:var(--ink-3);font-weight:400}
.tldr{background:var(--amber-soft);border-radius:14px;padding:22px 26px;margin:0 0 8px}
.tldr p{margin:0;color:var(--ink);font-size:18px;line-height:1.6}
.tldr .tldr-h{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:15px;color:#7A5A00}
.tbl-wrap{max-width:none!important;overflow-x:auto;margin:0 0 20px;border:1px solid var(--paper-line);border-radius:12px}
.tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;color:var(--ink)}
.tbl th,.tbl td{padding:13px 16px;border-bottom:1px solid var(--paper-line);text-align:left;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl th{font-size:13.5px;font-weight:600;color:var(--ink-3);background:var(--paper-tint)}
.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.hl td{background:var(--amber-soft)}
.tbl code{font-size:13.5px}
@media (max-width:600px){.tbl thead{display:none}.tbl tr{display:block;padding:14px 16px;border-bottom:1px solid var(--paper-line)}.tbl tr:last-child{border-bottom:0}.tbl td{display:block;padding:2px 0;border:0}.tbl td:first-child{font-weight:600;margin-bottom:4px}.tbl td:not(:first-child)::before{content:attr(data-label) ": ";color:var(--ink-3);font-size:14px;font-weight:400}.tbl td.num{white-space:normal}.tbl code{white-space:nowrap}}
.snip{max-width:none!important;margin:0 0 18px;background:#06122A;border:1px solid #1F3457;border-radius:12px;overflow:hidden}
.snip-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0!important;padding:8px 10px 8px 16px;border-bottom:1px solid #1F3457;font-size:13px!important;color:#93A4C3!important;font-weight:500}
.snip pre{margin:0;padding:16px 18px;overflow-x:auto}
.snip pre code{background:none;padding:0;font:13.5px/1.7 var(--mono);color:#DCE4F2}
.copy{min-height:32px;padding:0 12px;border-radius:8px;border:1px solid #2E4366;background:transparent;color:#DCE4F2;font:600 13px var(--text);cursor:pointer}
.copy:hover{border-color:var(--amber);color:var(--amber)}
.letter{background:var(--paper-tint);border-radius:12px;padding:24px 26px;margin:0 0 14px}
.letter p{font-size:16.5px;margin:0 0 12px}
.letter p:last-child{margin:0}
.faq{margin-top:56px;max-width:70ch}
.faq h2{margin-top:0}
.faq details{border-bottom:1px solid var(--paper-line)}
.faq details:first-of-type{border-top:1px solid var(--paper-line)}
.faq summary{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:16px;align-items:center;list-style:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:18px;line-height:1.4;color:var(--ink);border-radius:6px}
.faq summary::-webkit-details-marker{display:none}
.faq .pl::before,.faq .pl::after{background:var(--ink-3)}
.faq details p{margin:0 0 20px;font-size:17px}
.post-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.toc{padding:20px 14px}
.toc>p{margin:0 0 8px 10px;font-size:13px;font-weight:600;color:var(--fg-3)}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 380px);overflow:auto}
.toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--fg-2);text-decoration:none;font-size:14.5px;line-height:1.35;transition:background-color .15s ease,color .15s ease}
.toc a:hover{background:var(--navy-3);color:var(--fg)}
.toc a[aria-current="true"]{background:var(--navy-3);color:var(--amber)}
.aside-cta{padding:24px;display:flex;flex-direction:column;gap:12px}
.aside-cta p{margin:0}
.aside-cta .btn{align-self:flex-start}
.related{margin-top:96px;display:flex;flex-direction:column;gap:24px}
.res-nav{margin:-16px 0 0}
.r-sec{padding-top:120px;scroll-margin-top:72px}
.r-h{font-size:clamp(30px,3.6vw,48px)}
#r-herr .r-h,#r-guias .r-h{margin-bottom:32px}
.r-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.r-row .r-h{margin-bottom:0}
#r-guias .r-row{margin-bottom:32px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.tool-card{display:flex;flex-direction:column;gap:12px;padding:30px;text-decoration:none;color:var(--ink);transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(0,0,0,.28)}
.tool-card p{margin:0;color:var(--ink-2);flex:1}
input[type=date].input{max-width:280px}
input[type=range]:disabled{opacity:.35;cursor:not-allowed}
.dl-when{display:flex;flex-direction:column;gap:4px}
.dl-msg{margin:0;padding:14px 16px;border-radius:12px;background:var(--navy-3);font-size:15px;line-height:1.5}
.dl-msg.warn{background:var(--amber);color:var(--ink)}
.ck{padding:clamp(24px,4vw,48px)}
.ck-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-bottom:24px;border-bottom:1px solid var(--paper-line)}
.ck-count{margin:0;font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink)}
.ck-bar{flex:1 1 200px;height:10px;border-radius:5px;background:var(--paper-tint);overflow:hidden;display:flex}
.ck-bar b{display:block;width:100%;background:var(--ink);border-radius:5px;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ck-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px 48px;padding-top:28px}
.ck-g h3{margin:0 0 10px;font-family:var(--display);font-size:18px;color:var(--ink)}
.ck-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ck-g label{display:flex;gap:12px;align-items:flex-start;padding:10px 0;cursor:pointer;color:var(--ink-2);font-size:16px;line-height:1.45}
.ck-g input{flex:0 0 auto;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:1.5px solid var(--paper-field);border-radius:6px;background:#fff center/14px no-repeat;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.ck-g input:hover{border-color:var(--ink)}
.ck-g input:checked{background-color:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC53D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
.ck-g input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ck-g input:checked+span{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3)}
.gl-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:24px}
.gl-q{max-width:420px;background:var(--navy-2);border-color:var(--line-2);color:var(--fg)}
.gl-q::placeholder{color:var(--fg-3)}
.gl-q:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,197,61,.18)}
.gl-head p{margin:0}
.gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:0 48px;margin:0}
.gl-i{padding:20px 0;border-top:1px solid var(--line)}
.gl-i dt{font-family:var(--display);font-weight:700;font-size:18px;color:var(--fg)}
.gl-i dd{margin:6px 0 0;color:var(--fg-2);font-size:16px;line-height:1.55}
html.classic .cat{background:#E9EDF3;color:#0A1A33}
html.classic .raised .cat{background:#163057;color:var(--amber)}
html.classic .gl-q{background:#fff;border-color:#BFC9D6;color:#0A1A33}
html.classic .crumbs a:hover{color:#0A1A33}
html.classic .prose{border:1px solid #E1E6EE}
/* ===== premium motion layer ===== */
:root{interpolate-size:allow-keywords;scrollbar-color:#2A426B var(--navy);caret-color:var(--amber);--ease-out:cubic-bezier(.16,1,.3,1)}
html.classic{scrollbar-color:#BFC9D6 #F4F6F9}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:#24395E;border-radius:8px;border:3px solid var(--navy)}
::-webkit-scrollbar-thumb:hover{background:#34507F}
html.classic ::-webkit-scrollbar-track{background:#F4F6F9}
html.classic ::-webkit-scrollbar-thumb{background:#C3CCD9;border-color:#F4F6F9}
.paper .input,.paper input,.paper textarea{caret-color:var(--ink)}
/* header: clear over the top of the page, material once content scrolls under it */
.top{transition:background-color .4s ease,border-color .4s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease}
html.at-top .top:not(.open){background:rgba(10,26,51,0);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.classic.at-top .top:not(.open){background:rgba(244,246,249,0)}
/* reading progress, articles only */
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--amber);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;opacity:0}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    html[data-route="post"] .top::after{opacity:1;animation:readProg linear both;animation-timeline:scroll(root)}
  }
}
@keyframes readProg{to{transform:scaleX(1)}}
html.classic .top::after{background:#1F4FB8}
/* scroll reveals: content is visible by default, hidden only once the motion script has run */
html.mo [data-rv]{opacity:0;transform:translate3d(0,26px,0) scale(.985);transition:opacity .9s var(--ease-out),transform 1.05s var(--ease-out);transition-delay:calc(var(--i,0) * 75ms)}
html.mo [data-rv="h"]{transform:translate3d(0,.32em,0);filter:blur(8px);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out)}
html.mo [data-rv="mock"]{transform:perspective(1600px) rotateX(9deg) translate3d(0,44px,0) scale(.965);transform-origin:50% 100%;transition:opacity 1s var(--ease-out),transform 1.5s var(--ease-out)}
html.mo [data-rv].in{opacity:1;transform:none;filter:none}
/* hero: lines rise out of their own mask, then Salesforce steps back */
@media (prefers-reduced-motion: no-preference){
  html.mo .mega .ln{animation:none;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
  html.mo .mega .ln-i{display:inline-block;animation:lnUp 1.15s var(--ease-out) both}
  html.mo .mega .ln + .ln .ln-i{animation-delay:.11s}
  html.mo .bye{animation:bye 1.4s 1.25s ease forwards}
  html.mo .hero2::before{animation:dotsIn 2.2s .2s ease both}
}
@keyframes lnUp{from{transform:translate3d(0,108%,0)}to{transform:none}}
@keyframes bye{to{color:var(--bye,#6F82A3)}}
@keyframes dotsIn{from{opacity:0}to{opacity:1}}
html.classic{--bye:#7A879E}
/* counters keep their width while they run */
[data-count]{font-variant-numeric:tabular-nums}
/* money chart: bars grow from zero as each row arrives */
html.mo .mrow .mbar{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease-out) calc(var(--i,0) * 75ms + .15s)}
html.mo .mrow .mbar.m-pp{transition-delay:calc(var(--i,0) * 75ms + .4s)}
html.mo .mrow.in .mbar{transform:none}
html.mo .mrow .mline span,html.mo .mrow .save-pill{opacity:0;transition:opacity .6s ease calc(var(--i,0) * 75ms + .9s)}
html.mo .mrow.in .mline span,html.mo .mrow.in .save-pill{opacity:1}
/* migration timeline draws itself week by week */
html.mo .tl .bar{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease-out)}
html.mo .tl.in .bar{transform:none}
html.mo .tl li:nth-child(2) .bar{transition-delay:.12s}html.mo .tl li:nth-child(3) .bar{transition-delay:.24s}html.mo .tl li:nth-child(4) .bar{transition-delay:.36s}html.mo .tl li:nth-child(5) .bar{transition-delay:.48s}html.mo .tl li:nth-child(6) .bar{transition-delay:.6s}
/* mockups: each screen assembles itself when it is in view, and again on every tab change */
@media (prefers-reduced-motion: no-preference){
  html.mo .mini{animation:miniIn .55s var(--ease-out) both}
  html.mo .mini tbody tr,html.mo .mini > div > div,html.mo .mini .tile{animation:rowIn .6s var(--ease-out) both}
  html.mo .mini .ubar{transform-origin:0 50%;animation:barGrow 1.1s var(--ease-out) both}
  html.mo .mock:not(.in) .mini,html.mo .mock:not(.in) .mini *{animation-play-state:paused}
}
.mini tbody tr:nth-child(1),.mini > div > div:nth-child(1),.mini .tile:nth-child(1){animation-delay:.08s}
.mini tbody tr:nth-child(2),.mini > div > div:nth-child(2),.mini .tile:nth-child(2){animation-delay:.14s}
.mini tbody tr:nth-child(3),.mini > div > div:nth-child(3),.mini .tile:nth-child(3){animation-delay:.2s}
.mini tbody tr:nth-child(4),.mini > div > div:nth-child(4),.mini .tile:nth-child(4){animation-delay:.26s}
.mini tbody tr:nth-child(5),.mini > div > div:nth-child(5){animation-delay:.32s}
.mini tbody tr:nth-child(6),.mini > div > div:nth-child(6){animation-delay:.38s}
.mini tbody tr:nth-child(7),.mini > div > div:nth-child(7){animation-delay:.44s}
.mini tbody tr:nth-child(8),.mini > div > div:nth-child(8){animation-delay:.5s}
.mini .ubar{animation-delay:.55s}
@keyframes miniIn{from{opacity:0;transform:translate3d(0,10px,0) scale(.992)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* pointer light on cards (fine pointers only) */
[data-spot]{position:relative;isolation:isolate}
[data-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(255,197,61,.11),transparent 62%)}
.paper[data-spot]::after{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(255,197,61,.16),transparent 62%)}
@media (hover:hover){[data-spot]:hover::after{opacity:1}}
/* buttons: forward arrows lean toward where they go */
.btn .ico{transition:transform .28s var(--ease-out)}
.btn:hover .ico:has(path[d^="M5 12h14"]),a:hover .post-go .ico{transform:translateX(3px)}
.btn:hover .ico:has(path[d^="M19 12H5"]){transform:translateX(-3px)}
.btn-amber:hover{box-shadow:0 12px 28px -14px rgba(255,197,61,.55)}
.btn{transition:transform .14s var(--ease-out),background-color .18s ease,border-color .18s ease,box-shadow .3s ease,filter .18s ease}
/* disclosures open and close with their real height where the browser supports it */
details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
/* route changes cross-fade; header and review bar stay put */
.top{view-transition-name:site-top}
.review{view-transition-name:review-bar}
::view-transition-old(root){animation:vtOut .2s ease both}
::view-transition-new(root){animation:vtIn .5s var(--ease-out) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  details::details-content{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .btn .ico{transition:none}
}
/* bill comparison */
.bill{gap:32px}
.bill-ctrl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px 56px;align-items:start}
@media (max-width:900px){.bill-ctrl{grid-template-columns:minmax(0,1fr)}}
.bill-cmp{display:flex;flex-direction:column;gap:20px;padding:30px 0;border-block:1px solid var(--line)}
.bc-row{display:grid;grid-template-columns:230px minmax(0,1fr) 220px;gap:10px 28px;align-items:center}
.bc-lab{display:flex;flex-direction:column;gap:3px;min-width:0}
.bc-lab b{font-family:var(--display);font-size:18px}
.bc-lab small{font-size:13.5px;line-height:1.4;color:var(--fg-3)}
.bc-track{position:relative;height:46px}
.bc-bar{position:absolute;left:0;top:0;bottom:0;border-radius:4px 10px 10px 4px;transition:width .6s var(--ease-out)}
.bc-bar.sf{background:#4A78D6}
.bc-bar.pp{background:var(--amber)}
.bc-gap{font-style:normal;position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;border:1.5px dashed rgba(255,197,61,.6);border-left:0;border-radius:0 10px 10px 0;background:rgba(255,197,61,.05);color:var(--amber);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;transition:left .6s var(--ease-out),width .6s var(--ease-out)}
.bc-val{margin:0;text-align:right;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.3vw,32px);letter-spacing:-0.02em;white-space:nowrap}
.bc-val small{margin-left:4px;font-family:var(--text);font-size:14px;font-weight:500;letter-spacing:0;color:var(--fg-3)}
.bill-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;margin:0}
.bc-val small.once{display:block;margin:4px 0 0;text-align:right;font-size:13px;font-weight:600;color:var(--amber)}
.bill-out dt{font-size:14px;color:var(--fg-3)}
.bill-out dd{margin:4px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,48px);letter-spacing:-0.03em;line-height:1.1;white-space:nowrap}
.bill-out dd small{margin-left:4px;font-family:var(--text);font-size:17px;font-weight:600;letter-spacing:0;color:var(--fg-2)}
@media (max-width:760px){.bc-row{grid-template-columns:minmax(0,1fr) auto}.bc-track{grid-column:1/-1;grid-row:2;height:34px}.bill-out{grid-template-columns:1fr 1fr}.bill-out > div:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion: reduce){.bc-bar,.bc-gap{transition:none}}
/* icon tiles: Phosphor duotone, the amber layer prints slightly off register and snaps into place on hover */
.ict{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:flex-start;width:54px;height:54px;border-radius:14px;color:var(--fg);
  background:linear-gradient(160deg,#1A3561,#0F2244);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 18px -12px rgba(0,0,0,.6)}
.ic{width:28px;height:28px;overflow:visible}
.ic .dt{fill:var(--amber);opacity:.92;transform:translate(14px,14px);transition:transform .45s var(--ease-out)}
.ict-s{width:38px;height:38px;border-radius:11px}
.ict-s .ic{width:21px;height:21px}
[data-spot]:hover .ic .dt,.ptab[aria-selected="true"] .ic .dt,.wish[aria-pressed="true"] .ic .dt,tr:hover .ic .dt,.facts > div:hover .ic .dt{transform:none}
.paper .ict,.tool-card .ict{background:linear-gradient(160deg,#FFFFFF,#EEF2F8);border-color:var(--paper-line);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 8px 18px -14px rgba(10,26,51,.35)}
.paper .ic .dt{fill:#FFB800}
.cardp[style*="amber"] .ict{background:rgba(10,26,51,.07);border-color:rgba(10,26,51,.14);color:var(--ink);box-shadow:none}
.cardp[style*="amber"] .ic .dt{fill:#0A1A33;opacity:.22}
.wish .ict{margin-bottom:4px}
.wish[aria-pressed="true"] .ict{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.wish[aria-pressed="true"] .ic .dt{fill:var(--amber)}
.facts dt{display:flex;flex-direction:column;gap:16px}
.th-i{display:inline-flex;align-items:center;gap:14px}
.ptab .ict{margin-bottom:8px}
.ptab[aria-selected="true"] .ict{border-color:rgba(255,197,61,.5)}
html.classic .ict{background:#fff;border-color:#DCE2EA;color:#0A1A33;box-shadow:0 8px 18px -14px rgba(10,26,51,.35)}
html.classic .raised .ict,html.classic .ptab[aria-selected="true"] .ict{background:linear-gradient(160deg,#1A3561,#0F2244);border-color:#2E4366;color:#EAF0FA}
html.classic .ic .dt{fill:#E9A800}
@media (prefers-reduced-motion: reduce){.ic .dt{transition:none}}
/* subtler icons: no tiles, quiet stroke, faint amber layer */
.ict,.ict-s,.paper .ict,.tool-card .ict,.cardp[style*="amber"] .ict,.wish[aria-pressed="true"] .ict,html.classic .ict,html.classic .raised .ict,html.classic .ptab[aria-selected="true"] .ict{width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none}
.ict{color:var(--fg-2)}
.paper .ict,.tool-card .ict,.cardp[style*="amber"] .ict{color:var(--ink-2)}
.wish[aria-pressed="true"] .ict{color:#C9D2E1}
html.classic .ict{color:#4A5670}
html.classic .raised .ict{color:#A9B6CC}
.ic{width:26px;height:26px}
.ict-s .ic{width:20px;height:20px}
.ic .dt{opacity:.38;transform:translate(8px,8px)}
.paper .ic .dt,html.classic .ic .dt{fill:#E9A800;opacity:.45}
.cardp[style*="amber"] .ic .dt{opacity:.18}
.ptab[aria-selected="true"] .ict{color:var(--amber)}
.ptab .ict{margin-bottom:2px}
.th-i{gap:12px}
.lang{display:inline-flex;align-items:center;padding:3px;border-radius:999px;border:1px solid var(--line-2);gap:2px;margin-right:4px}
.lang button{min-width:38px;min-height:34px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--fg-2);font:700 13px/1 var(--text);letter-spacing:.04em;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.lang button:hover{color:var(--fg)}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--navy)}
html.classic .lang{border-color:#BFC9D6}
html.classic .lang button[aria-pressed="true"]{background:#0A1A33;color:#fff}
@media (max-width:420px){.lang button{min-width:32px;padding:0 7px}}
/* header bar: a clearly separate, solid layer once content scrolls under it */
.top{background:rgba(14,36,70,.97);border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 12px 32px -20px rgba(0,0,0,.75)}
html.at-top .top:not(.open){box-shadow:none}
.review{display:none!important}





/* mobile: stacked comparison and timeline */
@media (max-width:700px){
 .table-x{overflow:visible}
 .cmp{min-width:0}
 .cmp thead{display:none}
 .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
 .cmp tbody tr{margin-bottom:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
 .cmp tbody th{border-top:0;padding:16px 16px 8px;width:auto}
 .cmp td.sf-c{border-top:0;padding:4px 16px 14px}
 .cmp td.pp-c{border-radius:0!important;padding:14px 16px 16px}
 .cmp td::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;opacity:.65}
 .tl{min-width:0;grid-template-columns:minmax(0,1fr);gap:22px}
 .tl li{grid-column:auto!important}
}
/* language globe */
.lang-g{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px 0 9px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font:700 12px/1 var(--text);letter-spacing:.06em;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.lang-btn .ico{width:19px;height:19px}
.lang-btn:hover,.lang-g.open .lang-btn{color:var(--fg);border-color:var(--fg-3)}
.lang-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;border-radius:14px;background:var(--navy-2);border:1px solid var(--line-2);box-shadow:0 24px 48px -16px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .18s ease,transform .22s var(--ease-out);z-index:60}
.lang-g.open .lang-pop{opacity:1;transform:none;pointer-events:auto}
.lang-pop button,.lang-pop a{text-decoration:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--fg-2);font:600 14.5px var(--text);cursor:pointer;text-align:left}
.lang-pop button:hover,.lang-pop a:hover{background:var(--navy-3);color:var(--fg)}
.lang-pop button[aria-checked="true"],.lang-pop a[aria-checked="true"]{color:var(--fg)}
.lang-pop .lang-ck{width:16px;height:16px;color:var(--amber);opacity:0}
.lang-pop button[aria-checked="true"] .lang-ck,.lang-pop a[aria-checked="true"] .lang-ck{opacity:1}
.lang{display:none!important}
/* mobile menu extras */
.nav-x{display:none!important}
@media (max-width:1020px){
  .top.open .nav{max-height:calc(100dvh - 72px);overflow-y:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
  .top.open::after{content:"";position:fixed;left:0;right:0;top:72px;bottom:0;background:rgba(4,10,22,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:-1}
  .top.open .nav{z-index:2}
  .top.open .nav a{font-size:17px;font-weight:600;color:var(--fg)}
  .top.open .nav .nav-x{display:block!important}
  .top.open .nav .nav-cta{margin-top:14px;border:0;border-radius:12px;background:var(--amber);color:var(--ink);text-align:center;padding:15px 0}
  .lang-btn span{display:none}
  .lang-btn{width:44px;height:44px;padding:0;justify-content:center}
}
/* 2Q Technologies logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{display:block;height:26px;aspect-ratio:165.488/46.501;background:url(/img/logo-mark.99ae30a7de.svg) left center/contain no-repeat}
.logo-tech{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#E0913F;padding-left:10px;border-left:1px solid rgba(240,235,224,.28);line-height:1.2}
footer .logo-mark{height:30px}
.nav a{white-space:nowrap}
.logo-tech{font-size:11px}
@media (max-width:1180px){.nav{gap:16px}}
@media (max-width:1100px){.top .logo{flex-direction:column;align-items:flex-start;gap:3px}.top .logo-tech{border-left:0;padding-left:0;font-size:7.6px;letter-spacing:.31em;line-height:1}.top .logo-mark{height:22px}}
@media (max-width:380px){.top-cta .btn-amber{display:none}}
@media (max-width:420px){.top-cta{gap:6px}.top-cta .btn-sm{padding:0 12px}.lang button{min-width:32px}}
/* built CRM screenshots */
.im-desk-a{background:url(/img/im-desk-a.dafcb930d7.webp) center/cover no-repeat;aspect-ratio:1600/1000}
.im-desk-b{background:url(/img/im-desk-b.e9e5a61bcb.webp) center/cover no-repeat;aspect-ratio:1600/1000}
.im-desk-c{background:url(/img/im-desk-c.dc789d86b2.webp) center/cover no-repeat;aspect-ratio:1600/1000}
.im-side{background:url(/img/im-side.bb48692499.webp) center/cover no-repeat;aspect-ratio:1000/909}
.im-mobile{background:url(/img/im-mobile.52b524f844.webp) center/cover no-repeat;aspect-ratio:1500/980}
.im-c-dist{background:url(/img/im-c-dist.afb1444378.webp) center/cover no-repeat;aspect-ratio:1400/875}
.im-c-edu{background:url(/img/im-c-edu.1693448ce0.webp) center/cover no-repeat;aspect-ratio:1400/875}
.im-c-saas{background:url(/img/im-c-saas.a03ab5ac4e.webp) center/cover no-repeat;aspect-ratio:1400/875}
.im-c-real{background:url(/img/im-c-real.60fcb88cff.webp) center/cover no-repeat;aspect-ratio:1400/875}
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.gal figure{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.gal figcaption{display:flex;flex-direction:column;gap:4px;padding:0 4px}
.gal figcaption b{font-family:var(--display);font-weight:700;font-size:19px;color:var(--fg)}
.gal figcaption span{color:var(--fg-2);font-size:15.5px;line-height:1.55;max-width:70ch}
.gal-desk{grid-column:span 12}
.gal-side{grid-column:span 5}
.gal-mob{grid-column:span 7}
.gal-tabs{display:flex;gap:6px;flex-wrap:wrap}
.gal-tabs button{appearance:none;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font:600 13.5px var(--text);height:36px;padding:0 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.gal-tabs button[aria-pressed="true"]{background:var(--fg);color:var(--navy);border-color:var(--fg)}
.gal-frame{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px -40px rgba(0,0,0,.8)}
.gal-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#EEF1F5;border-bottom:1px solid #E1E5EB}
.gal-bar i{width:11px;height:11px;border-radius:50%;background:#D3D8E0}
.gal-bar span{margin-left:14px;height:22px;flex:0 1 320px;border-radius:7px;background:#fff;border:1px solid #E1E5EB;font-size:11.5px;color:#7A8496;display:flex;align-items:center;padding:0 10px}
.gal-shot{width:100%;display:block}
.gal-side .gal-shot,.gal-mob .gal-shot{border-radius:20px;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.7)}
.gal-side .gal-shot{flex:1;aspect-ratio:auto;min-height:420px}
.gal-mob .gal-shot{flex:1;aspect-ratio:auto;min-height:420px}
.gal-frame .gal-shot{transition:opacity .35s var(--ease-out)}
@media (max-width:900px){.gal-side,.gal-mob{grid-column:span 12}.gal-side .gal-shot,.gal-mob .gal-shot{aspect-ratio:auto;min-height:0;height:auto}.gal-side .gal-shot{aspect-ratio:1100/1000}.gal-mob .gal-shot{aspect-ratio:1500/980}}
.case-shot{flex:1 1 100%;margin:0;display:flex;flex-direction:column;gap:10px}
.case-shot .gal-shot{border-radius:18px;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.7)}
.case-shot figcaption{font-size:14px;color:var(--fg-3)}
/* ready-made base */
.b-4{grid-column:span 4}
@media (max-width:900px){.b-4{grid-column:span 12}}
.base-objs{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.base-objs li{font-size:13.5px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--paper-tint);border:1px solid var(--paper-line);color:var(--ink-2)}
.base-objs li.sec{background:#EAF2FF;border-color:#CFE0FB;color:#1F4E9A}
.base-only{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.base-only li{display:block;font-size:17px;line-height:1.5;color:var(--amber-ink)}
.base-only b{font-family:var(--display);font-weight:800;color:var(--ink)}
.base-stat{font-family:var(--display);font-weight:800;font-size:clamp(44px,4.6vw,64px);line-height:1;letter-spacing:-0.04em;color:var(--ink);margin:0}
/* team */
.team-sec{display:flex;flex-direction:column}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.person{display:flex;flex-direction:row;align-items:flex-start;gap:26px;padding:clamp(24px,3vw,36px)}
.person .avatar{width:120px;height:120px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(80% 80% at 30% 20%,rgba(255,197,61,.35),transparent 60%),linear-gradient(160deg,#1C3B6E,#0A1A33);border:1px solid var(--line-2)}
.person .avatar span{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-0.03em;color:var(--fg)}
.person .avatar.has-img{background:var(--img) center/cover no-repeat;filter:grayscale(1) contrast(1.05)}
.person .avatar.has-img span{display:none}
.av-marc{--img:url(/img/av-marc.f9e89cec24.webp)}
.av-toni{--img:url(/img/av-toni.31c487289e.webp)}
.track{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:20px;padding:22px 28px;border:1px solid var(--line);border-radius:var(--r-lg)}
.track-l{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.track ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 30px}
.track li{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.01em;color:var(--fg-2)}
.person-b{display:flex;flex-direction:column;gap:12px}
.person h3{margin:0;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-0.02em}
.person .role{margin:0;color:var(--amber);font-weight:600;font-size:15px}
.person-b > p:not(.role){margin:0;color:var(--fg-2);font-size:17px;line-height:1.6}
.certs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.certs li{font-size:13px;font-weight:600;line-height:1.25;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2);display:inline-flex;align-items:center;gap:7px}
.certs li::before{content:"";width:7px;height:7px;border-radius:50%;background:#4A9BF0;box-shadow:0 0 0 3px rgba(74,155,240,.18)}
@media (max-width:820px){.team{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.person{flex-direction:column}}
.person .avatar{flex:0 0 auto}
/* why now */
.eyebrow-now{margin:0;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.now-tldr{margin-top:8px;padding:clamp(24px,3.4vw,44px);border-radius:var(--r-lg);max-width:1000px}
.now-tldr-h{margin:0 0 14px;font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink)}
.now-tldr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.now-tldr li{position:relative;padding-left:26px;font-size:17.5px;line-height:1.55;color:var(--ink-2)}
.now-tldr li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:3px;background:var(--amber)}
.now-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.now-tl li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:28px;padding:26px 0;border-top:1px solid var(--line)}
.now-tl li:last-child{border-bottom:1px solid var(--line)}
.tl-d{font-family:var(--display);font-weight:800;font-size:18px;color:var(--amber);padding-top:2px}
.now-tl h3{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.25}
.now-tl p{margin:0;color:var(--fg-2);font-size:17px;line-height:1.6;max-width:68ch}
@media (max-width:640px){.now-tl li{grid-template-columns:minmax(0,1fr);gap:8px}}
.now-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.now-grid .cardp p{margin:0}
.now-n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--amber)}
@media (max-width:1100px){.now-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.now-grid > :last-child{grid-column:1/-1}}
@media (max-width:560px){.now-grid{grid-template-columns:minmax(0,1fr)}}
.now-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.now-cmp .cardp p{margin:0}
.now-cmp .paper{border-radius:var(--r-lg);color:var(--ink)}
.now-k{margin:0;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:760px){.now-cmp{grid-template-columns:minmax(0,1fr)}}
.now-know{display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,40px);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.now-know ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.now-know li{position:relative;padding-left:28px;color:var(--fg-2);font-size:17px;line-height:1.55}
.now-know li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;border:2px solid var(--amber)}
@media (max-width:760px){.now-know ul{grid-template-columns:minmax(0,1fr)}}
.now-why{flex:1 1 460px;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;font-size:18px;color:var(--ink-2)}
.now-why li{position:relative;padding-left:30px;line-height:1.5}
.now-why li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:5px;background:var(--amber)}
.link-amber{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--amber);text-decoration:none}
.link-amber .ico{width:18px;height:18px;transition:transform .3s var(--ease-out)}
.link-amber:hover .ico{transform:translateX(4px)}
/* Q&A */
.qa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px 64px;align-items:start}
.qa-h{position:sticky;top:110px;display:flex;flex-direction:column;gap:14px}
.qa-h p{margin:0;color:var(--fg-2);font-size:17px;line-height:1.6}
.qa-l details{border-bottom:1px solid var(--line)}
.qa-l details:first-child{border-top:1px solid var(--line)}
.qa-l summary{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:16px;align-items:center;list-style:none;cursor:pointer;padding:22px 0;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.4vw,20px);line-height:1.35;color:var(--fg);border-radius:6px}
.qa-l summary::-webkit-details-marker{display:none}
.qa-l summary:hover{color:var(--amber-2)}
.qa-l details p{margin:0 0 24px;max-width:68ch;font-size:17px;line-height:1.65;color:var(--fg-2)}
.qa-l details[open] summary{color:var(--amber)}
@media (max-width:900px){.qa{grid-template-columns:minmax(0,1fr)}.qa-h{position:static}}
/* savings cases: irregular square grid */
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(272px,auto);grid-auto-flow:dense;gap:16px}
.ct{--pbg:var(--navy-2);position:relative;display:flex;min-width:0;border-radius:22px;background:var(--pbg);border:1px solid var(--line);color:var(--fg);overflow:hidden}
.ct.a{grid-column:span 2;grid-row:span 2;--pbg:#0E2347;background:radial-gradient(120% 90% at 100% 0%,rgba(255,197,61,.10),transparent 55%),var(--pbg)}
.ct.w2{grid-column:span 2}
.ct.w3{grid-column:span 3}
.ct.paper{--pbg:#fff;color:var(--ink);border-color:transparent}
.ct-in{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;padding:26px}
.ct.a .ct-in{padding:clamp(28px,3.4vw,44px);gap:24px}
.ct-top{display:flex;gap:14px;align-items:flex-start}
.ct-ic{flex:0 0 auto;color:var(--fg-2)}
.ct-ic .ic{width:28px;height:28px}
.ct.paper .ct-ic{color:var(--ink-2)}
.ct h3{margin:0;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-0.01em}
.ct.a h3{font-size:clamp(22px,2vw,28px)}
.ct-meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.ct-meta span{font-size:12.5px;font-weight:600;line-height:1.25;padding:5px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2)}
.ct-sit{margin:0;max-width:46ch;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--fg-2)}
.ct.paper .ct-meta span{border-color:var(--paper-line);color:var(--ink-2);background:var(--paper-tint)}
.ct-save{display:flex;flex-direction:column;gap:8px}
.ct-big{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(32px,2.9vw,44px);line-height:1;letter-spacing:-0.035em;color:var(--amber);white-space:nowrap}
.ct.a .ct-big{font-size:clamp(56px,6.6vw,104px);letter-spacing:-0.045em}
.ct.paper .ct-big{color:var(--ink)}
.ct-sub{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;color:var(--fg-3)}
.ct.paper .ct-sub{color:var(--ink-3)}
.ct-sub .save-pill{font-size:15px;padding:3px 9px}
.ct-ba{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;font-size:13px;color:var(--fg-3)}
.ct-row .ct-bar{grid-column:1/-1;grid-row:2}
.ct.paper .ct-row{color:var(--ink-3)}
.ct-row b{font-weight:600;color:var(--fg-2);white-space:nowrap}
.ct.paper .ct-row b{color:var(--ink-2)}
.ct-bar{display:block;height:10px;width:var(--w);min-width:6px;border-radius:2px 6px 6px 2px;transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.16,1,.3,1) .2s}
.ct.a .ct-bar{height:16px}
.ct-bar.ct-sf{background:#4A78D6}
.ct-bar.ct-pp{background:var(--amber);transition-delay:.45s}
.ct.paper .ct-bar.ct-pp{background:#F2B400}
html.mo .ct:not(.in) .ct-bar{transform:scaleX(0)}
/* photo tiles */
.ct-photo{position:relative;flex:0 0 44%;min-height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(70% 60% at 30% 25%,rgba(255,197,61,.22),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px),linear-gradient(160deg,#1C3B6E,#0A1A33)}
.ct.w3 .ct-photo{flex-basis:42%}
.ct-photo[style*="--img"]{background:var(--img) center/cover no-repeat}
.ct-photo[style*="--img"] .ct-ph-ic{display:none}
.ct-ph-ic{color:#EAF0FA;opacity:.95}
.ct-ph-ic .ic{width:clamp(72px,8vw,112px);height:clamp(72px,8vw,112px)}
.ct-ph-ic .ic .dt{opacity:.55;transform:translate(12px,12px)}
.ct.photo:hover .ct-ph-ic .ic .dt{transform:none}
.ct-photo.has-img{background:var(--img) center/cover no-repeat}
.ct-photo.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(10,26,51,.35))}
.ct-photo.has-img .ct-ph-ic{display:none}
.ct.photo .ct-photo.has-img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.ct.photo:hover .ct-photo.has-img{transform:scale(1.03)}
.ct.a.ph-dist{background:linear-gradient(180deg,rgba(14,35,71,.82) 0%,rgba(14,35,71,.9) 45%,rgba(14,35,71,.55) 72%,rgba(14,35,71,.92) 100%),var(--img) center top/cover no-repeat}
@media (prefers-reduced-motion:reduce){.ct.photo:hover .ct-photo.has-img{transform:none}}
.ph-inst{--img:url(/img/ph-inst.97a8de4ac1.webp)}
.ph-prom{--img:url(/img/ph-prom.792a6b8346.webp)}
.ph-dist{--img:url(/img/ph-dist.105e273b79.webp)}
/* "how we did it" opens over the tile instead of pushing the grid */
.ct-more{margin-top:2px}
.ct-more::details-content{block-size:auto!important;overflow:visible!important;transition:none!important}
.ct-more summary{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;list-style:none;cursor:pointer;font-weight:600;font-size:14.5px;padding:6px 0;border-radius:8px}
.ct-more summary::-webkit-details-marker{display:none}
.ct-more summary .c{display:none}
.ct-more[open] summary .o{display:none}
.ct-more[open] summary .c{display:inline}
.ct-more .pl{width:16px;height:16px}
.ct-more .pl::before,.ct-more .pl::after{left:2px;right:2px;top:7px;background:currentColor}
.ct-panel{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:12px;padding:26px 26px 64px;background:var(--pbg);overflow:auto;animation:ctIn .35s cubic-bezier(.16,1,.3,1)}
.ct.a .ct-panel{padding:clamp(28px,3.4vw,44px) clamp(28px,3.4vw,44px) 72px}
.ct-panel p{margin:0;font-size:15.5px;line-height:1.55;color:var(--fg-2)}
.ct.paper .ct-panel p{color:var(--ink-2)}
.ct.a .ct-panel p{font-size:17px}
.ct-panel .ct-pt{font-family:var(--display);font-weight:700;font-size:17px;color:var(--fg)}
.ct.paper .ct-panel .ct-pt{color:var(--ink)}
.ct-panel .ct-wk{margin-top:auto;font-weight:600;color:var(--amber)}
.ct.paper .ct-panel .ct-wk{color:#9A6A00}
@keyframes ctIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* closing tile */
.ct-cta{flex-direction:column;justify-content:space-between;gap:18px;padding:26px;background:var(--amber);border-color:transparent;color:var(--ink);text-decoration:none}
.ct-cta .ct-ic{color:var(--ink)}
.ct-cta .ic .dt{fill:#0A1A33;opacity:.2}
.ct-cta h3{font-size:clamp(20px,1.8vw,24px);font-weight:800}
.ct-cta p{margin:8px 0 0;color:var(--amber-ink);font-size:15px}
.ct-cta .post-go{color:var(--ink)}
@media (max-width:1040px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ct.w3{grid-column:span 2}.ct.a{grid-row:span 1}}
@media (max-width:640px){.cgrid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.ct.a,.ct.w2,.ct.w3{grid-column:auto}.ct.photo{flex-direction:column}.ct-photo{flex-basis:auto;min-height:170px}}
@media (prefers-reduced-motion: reduce){.ct-panel{animation:none}.ct-bar{transition:none}}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

a.chip{text-decoration:none}
.gl-i{scroll-margin-top:96px}
.prose .notice-embed{margin:8px 0 28px}.prose .notice-embed .wiz-side{position:static;flex-basis:100%}.prose .notice-embed .wiz-main p{font-size:15px;line-height:1.5;margin:0}.prose .notice-embed .wiz-main .q-label{font-size:16px}.prose .notice-embed .res{color:var(--fg)}.prose .notice-embed .res p{margin:0;font-size:15px;line-height:1.5;color:inherit}.prose .notice-embed .res p.muted{color:var(--fg-3)}.prose .notice-embed .res .res-big{color:var(--amber);line-height:1}.prose .notice-embed .res .dl-msg.warn{color:var(--ink)}.prose .notice-embed .res a.btn{text-decoration:none;color:var(--ink);font-weight:600}
.form-note{margin:0;font-size:12.5px;line-height:1.5}.form-note a,.nl-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}.nl-form .nl-note{flex:1 0 100%;margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--amber-ink);opacity:.9}.person .li-link{align-self:flex-start;font-size:15px;font-weight:600;color:var(--fg);text-decoration:underline;text-underline-offset:3px}.person .li-link:hover{color:var(--amber)}.legal-doc > h2:first-child{margin-top:0}.ckb{position:fixed;left:16px;bottom:16px;z-index:80;width:min(520px,calc(100% - 32px));background:var(--navy-2);border:1px solid var(--line-2);border-radius:16px;padding:18px 20px;box-shadow:0 18px 50px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:14px}.ckb p{margin:0;font-size:14px;line-height:1.5;color:var(--fg-2)}.ckb a{color:var(--fg);text-decoration:underline}.ckb-b{display:flex;gap:10px}.ckb-b .btn{flex:1 1 0;justify-content:center}.foot-nav button{background:none;border:0;padding:0;font:inherit;color:var(--fg-2);cursor:pointer}.foot-nav button:hover{color:#fff}.legal-doc h2{scroll-margin-top:96px}