/* DEV1-104 F1: self-hosted IBM Plex (SIL OFL 1.1, fonts/OFL.txt). Byte-identical to the app's src/dd_web/*.woff2 and to
   what Google served before; the same faces Google's css2 declared for this site (Sans 400-700 variable, Mono 400 and 500),
   latin subset, Google's own unicode-range. No third-party font host: CSP font-src 'self'. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/ibm-plex-sans-latin.e2291e84.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin.08949f72.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin.01d28544.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}
:root{--bg:#F6F7F5;--ink:#12191D;--muted:#3E4A4F;--soft:#4A565C;--line:#DCE1DE;--accent:#0E5E57;--accent-ink:#0A443F;--accent-soft:#E3EFEC;--amber:#9A4A00;--white:#FFFFFF}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1.5}
a{color:var(--accent)}a:hover{color:var(--accent-ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
header.site{background:var(--white);border-bottom:1px solid var(--line)}
header.site nav{min-height:68px;padding-top:12px;padding-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:18px}
.navlinks{display:flex;gap:20px 28px;flex-wrap:wrap;font-size:15px}.navlinks a{color:#33403F;text-decoration:none}.navlinks a[aria-current]{color:var(--ink);font-weight:600}
.actions{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:8px;text-decoration:none;font-weight:600;font-size:16px;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--white)}.btn-primary:hover{background:var(--accent-ink);color:var(--white)}
.btn-ghost{background:var(--white);color:var(--ink);border-color:#B9C3BF}
.btn-text{background:transparent;color:var(--ink);font-weight:500}
.btn-sm{height:44px;padding:0 18px;font-size:15px}
.hero{padding-top:88px;padding-bottom:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:56px;align-items:center}
.eyebrow{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1{margin:0;font-size:52px;line-height:1.08;letter-spacing:-.02em}
.lede{margin:0;font-size:19px;line-height:1.55;color:var(--muted);max-width:560px}
.stack{display:flex;flex-direction:column;gap:24px}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:600}
section.band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section{padding-top:80px;padding-bottom:80px}
h2{margin:0;font-size:36px;letter-spacing:-.01em}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;list-style:none;margin:0;padding:0}
.grid3 li{padding:28px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:12px}
.grid3 h3,.why h3{margin:0;font-size:20px}.grid3 p,.why p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:48px}
.dark{background:var(--ink);color:var(--bg)}.dark h2{color:var(--bg)}.dark p,.dark span{color:#C9D2CF}
.bands{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.bands>div{padding:24px;border:1px solid #3A4549;border-radius:12px;display:flex;flex-direction:column;gap:6px}
.price{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:30px;font-weight:500;color:var(--bg)}
.faq{max-width:860px;margin:0 auto;padding:80px 24px}
details{border-top:1px solid var(--line);padding:18px 0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{font-size:17px;font-weight:600;cursor:pointer}details p{margin:12px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
footer.site{background:var(--white);border-top:1px solid var(--line)}
footer.site .wrap{padding:32px 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--soft)}
/* "Works with" logo row (home hero). Desktop = DEV1-093's sizing, unchanged: heights 29/20/43 px, Match-Trader raised
   16 px so its wordmark centres with the others. DEV1-099: the raise is paint-only (position:relative), so on a WRAPPED
   line it ate the 12 px row gap and the icon overlapped TradeLocker (-4 px). Row gap is 28 px here (= 12 + the 16 px
   raise; it only acts between wrapped lines, so a one-line row is pixel-identical). Below 480 px the raise is replaced by
   an honest layout (top-aligned, the two shorter logos pushed down by margin) and all three scale together by --u. */
.works-with{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:4px}
.works-with .ww-label{font-size:14px;color:var(--soft)}
.works-with .logos{display:flex;flex-wrap:wrap;align-items:center;gap:28px 28px}
.works-with .logos img{display:block;width:auto}
.logos .lg-tl{height:29px}.logos .lg-dx{height:20px}.logos .lg-mt{height:43px;position:relative;top:-16px}
@media (max-width:479.98px){
.works-with .logos{--u:clamp(0.9px,calc((100vw - 105px) / 276.02),1px);align-items:flex-start;gap:12px 28px}
.logos .lg-tl{height:calc(29 * var(--u));margin-top:calc(23.5625 * var(--u))}
.logos .lg-dx{height:calc(20 * var(--u));margin-top:calc(28.0625 * var(--u))}
.logos .lg-mt{height:calc(43 * var(--u));position:static;top:auto}
}
@media (max-width:359.98px){.works-with .logos{--u:clamp(0.9px,calc((100vw - 69px) / 276.02),1px);gap:12px 10px}}
/* pricing */
.toggle{display:inline-flex;padding:4px;border-radius:999px;background:#E6EAE8;gap:4px}
.toggle button{height:44px;padding:0 20px;border:0;border-radius:999px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;background:transparent;color:var(--ink)}
.toggle button[aria-pressed="true"]{background:var(--white)}
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.pcards .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px}
.pcards .tier{margin:0;font-size:32px;font-weight:700;letter-spacing:-.01em}
.pcards .range{font-size:18px;font-weight:600;color:var(--ink)}
.pcards .price{font-size:38px;color:var(--ink);margin-top:6px}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px;align-items:start;padding:32px}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:48px;height:48px;border-radius:10px;border:1px solid #B9C3BF;background:var(--white);font:inherit;font-size:22px;cursor:pointer;color:var(--ink)}
.stepper output{min-width:72px;text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:34px;font-weight:500}
.lines div{display:flex;justify-content:space-between;gap:16px;font-size:15px;padding-bottom:10px;border-bottom:1px solid #ECEFEE;margin-bottom:12px}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
@media (max-width:640px){h1{font-size:36px}h2{font-size:28px}.hero{padding-top:48px;padding-bottom:40px;gap:32px}.section{padding-top:56px;padding-bottom:56px}header.site nav{justify-content:space-between;padding-top:10px;padding-bottom:10px}.menu-btn{display:inline-flex}.navlinks,.actions{display:none;width:100%}header.site nav.open .navlinks{display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px solid var(--line)}header.site nav.open .navlinks a{display:block;padding:12px 0;font-size:17px}header.site nav.open .actions{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}header.site nav.open .actions .btn{width:100%}.calc{padding:24px}.pcards .tier{font-size:28px}}