/* dve.css — DVE-specific additions on top of Tradestone's real stylesheet (tradestone.css,
forced dark). Uses Tradestone's own --tm-* tokens so everything matches their theme:
the DVE logo, the live-chart terminal (replacing their TradingView widget), the signup
section, and the copy-trading provider cards. */
/* ---- DVE logo (replaces Tradestone's image logo) ---- */
.tm-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.tm-logo-mark{width:32px;height:32px;flex:0 0 auto;display:block}
.tm-logo-word{font-family:Manrope,Inter,sans-serif;font-weight:600;font-size:19px;color:var(--tm-ink);letter-spacing:.005em;line-height:1}
.tm-logo-word b{font-weight:800;color:var(--tm-ink)}
.tm-footer-logo .tm-logo-word{font-size:18px}
/* header signup CTA (Tradestone header had none) */
.tm-header-cta{padding:11px 20px;font-size:14px}
@media (max-width:820px){.tm-header-cta{padding:9px 16px;font-size:13px}}
/* ---- live markets / chart terminal ---- */
.tm-markets-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.tm-mkt-tab{font-family:Inter,sans-serif;font-size:13px;color:var(--tm-muted);background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:999px;padding:8px 15px;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease}
.tm-mkt-tab:hover{color:var(--tm-ink);border-color:var(--tm-card-frame)}
.tm-mkt-tab.is-active{color:#231803;background:var(--tm-primary);border-color:var(--tm-primary)}
.tm-chart-shell{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:14px;overflow:hidden;box-shadow:var(--tm-shadow)}
.tm-chart-head{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--tm-line);flex-wrap:wrap}
.tm-symbol-title{font-family:Manrope,sans-serif;font-weight:700;font-size:18px;color:var(--tm-ink);display:flex;align-items:baseline;gap:9px}
.tm-symbol-title em{font-style:normal;font-family:Inter,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tm-primary)}
.tm-chart-quote{display:flex;align-items:baseline;gap:11px}
.tm-chart-bid{font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",monospace;font-size:20px;color:var(--tm-ink);font-variant-numeric:tabular-nums}
.tm-chart-chg{font-family:ui-monospace,"Cascadia Mono",monospace;font-size:13px;font-variant-numeric:tabular-nums}
.tm-chart-chg.tm-up{color:#16C784}
.tm-chart-chg.tm-down{color:#EA3943}
.tm-tf-row{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.tm-tf{font-family:ui-monospace,"Cascadia Mono",monospace;font-size:11.5px;color:var(--tm-muted);background:none;border:0;padding:5px 9px;border-radius:6px;cursor:pointer;transition:.15s}
.tm-tf:hover{color:var(--tm-ink)}
.tm-tf.is-active{color:#231803;background:var(--tm-primary)}
.tm-chart-canvas-wrap{position:relative;height:452px}
#goldChart{display:block;width:100%;height:100%;touch-action:none}
.tm-chart-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--tm-line);flex-wrap:wrap}
.tm-chart-foot span{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.04em;color:var(--tm-muted)}
@media (max-width:760px){.tm-chart-canvas-wrap{height:360px}}
/* ---- copy-trading provider cards (Tradestone-matching layout) ---- */
.tm-provider-card-row{display:grid;gap:14px}
.dve-provider{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:14px;padding:18px 20px;box-shadow:var(--tm-shadow);transition:border-color .25s ease,transform .25s ease}
.dve-provider:hover{border-color:var(--tm-card-frame);transform:translateY(-3px)}
.dve-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:Manrope,sans-serif;font-weight:800;font-size:16px;color:#231803;background:linear-gradient(135deg,var(--tm-primary),var(--tm-primary-deep));flex-shrink:0}
.dve-provider h3{font-family:Manrope,sans-serif;font-weight:700;font-size:17px;color:var(--tm-ink);margin:0}
.dve-provider-info{min-width:0}
.dve-provider-level{font-size:12px;color:var(--tm-muted);margin-top:2px;display:block}
.dve-risk-badge{font-size:11px;font-weight:600;color:#fff;padding:4px 10px;border-radius:20px;white-space:nowrap;align-self:center}
.dve-provider-stats{display:flex;gap:16px;grid-column:1/-1;border-top:1px solid var(--tm-line);padding-top:12px;margin-top:4px}
.dve-stat{text-align:center;flex:1}
.dve-stat-label{display:block;font-size:11px;color:var(--tm-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.dve-stat-val{font-family:ui-monospace,monospace;font-weight:600;font-size:15px;color:var(--tm-ink);font-variant-numeric:tabular-nums}
.dve-stat:first-child .dve-stat-val{color:#16C784}
.dve-provider-pl{display:flex;gap:12px;justify-content:center;grid-column:1/-1;font-family:ui-monospace,monospace;font-size:13px;font-variant-numeric:tabular-nums}
.dve-pl-up{color:#16C784}
.dve-pl-down{color:#EA3943}
/* ---- signup ---- */
.tm-signup{order:8;padding:82px 0;background:var(--tm-bg);border-top:1px solid var(--tm-line)}
.tm-signup-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.tm-signup-copy h2{font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,40px);color:var(--tm-ink);margin:14px 0 0;line-height:1.12}
.tm-signup-copy>p{margin-top:16px;color:var(--tm-text);max-width:34ch}
.tm-signup-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.tm-signup-list li{position:relative;padding-left:28px;color:var(--tm-ink);font-size:15px}
.tm-signup-list li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:5px;border:0;
background:var(--tm-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23231803' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat}
.tm-signup-card{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:16px;padding:30px 28px;box-shadow:var(--tm-shadow)}
.tm-signup-card h3{font-family:Manrope,sans-serif;font-weight:700;font-size:22px;color:var(--tm-ink);margin:0}
.tm-signup-sub{color:var(--tm-muted);font-size:14px;margin-top:6px}
.tm-field{margin-top:16px}
.tm-field label{display:block;font-family:Inter,sans-serif;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--tm-muted);margin-bottom:7px}
.tm-field input,.tm-field select{width:100%;background:var(--tm-bg);border:1px solid var(--tm-line);border-radius:8px;color:var(--tm-ink);padding:12px 14px;font-family:Inter,sans-serif;font-size:15px;transition:border-color .2s ease,box-shadow .2s ease}
.tm-field input::placeholder{color:var(--tm-muted)}
.tm-field input:focus,.tm-field select:focus{outline:none;border-color:var(--tm-primary);box-shadow:0 0 0 3px rgba(5,171,206,.18)}
.tm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tm-agree{display:flex;gap:10px;align-items:flex-start;margin-top:16px;color:var(--tm-muted);font-size:13px}
.tm-agree input{margin-top:3px;accent-color:var(--tm-primary)}
.tm-agree a{color:var(--tm-primary)}
.tm-signup-card .tm-button{width:100%;margin-top:18px}
.tm-signup-note{margin-top:14px;color:var(--tm-muted);font-size:12.5px;text-align:center}
/* the password note sits right under the submit button - give it real breathing room */
.tm-signup-card .tm-button + .tm-signup-note{margin-top:22px}
.tm-signup-note a{color:var(--tm-primary)}
.tm-form-msg{margin-top:12px;font-size:14px;color:var(--tm-primary);text-align:center;min-height:1.2em}
@media (max-width:820px){.tm-signup-grid{grid-template-columns:1fr;gap:36px}.tm-field-row{grid-template-columns:1fr}}
/* ---- footer social as clean text links (override Tradestone's 38px icon circles) ---- */
body.tm-landing-page .tm-footer-social{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
body.tm-landing-page .tm-footer-social a{width:auto !important;height:auto !important;min-height:0 !important;border:0 !important;border-radius:0 !important;background:none !important;padding:0 !important;display:inline-flex !important;align-items:center;overflow:visible !important;color:var(--tm-muted) !important;font-size:13px;text-decoration:none;box-shadow:none !important}
body.tm-landing-page .tm-footer-social a:hover{color:var(--tm-primary) !important}
/* ---- hero image — TRADESTONE-SCALE SQUARE COMPOSITE (locked 2026-09-01 v2) ----
Measured tradestonemarkets.com hero (1280x720): a SQUARE 1:1 composite (subject + floating
glass trading-UI panels + chart glow) at ~52% viewport width, ~92% hero height, object-fit
contain, background blending into the ground. Ours matches: image is col 2 (~54%), square,
object-fit:contain (whole composite, NO crop), blends (the jpg already fades to warm-black at
its edges). Copy (col 1) is vertically centered beside it, exactly like Tradestone. The image
is deliberately BIGGER than half the page — that is the requested Tradestone look. */
@media (min-width:1001px){
body.tm-landing-page .tm-hero-grid{align-items:center !important}
body.tm-landing-page .tm-hero-copy{grid-column:1;grid-row:1}
body.tm-landing-page .tm-copy-card-hero{grid-column:1;grid-row:2}
body.tm-landing-page .tm-benefit-row{grid-column:1;grid-row:3}
body.tm-landing-page .tm-hero-image{
grid-column:2;grid-row:1 / span 3;align-self:center;
position:relative !important;inset:auto !important;
width:100% !important;height:auto !important;margin:0 !important;
aspect-ratio:1 / 1;max-height:none !important;min-height:0 !important;
border-radius:0 !important;overflow:visible !important;background:transparent !important}
body.tm-landing-page .tm-hero-image img{
position:relative !important;inset:auto !important;
width:100% !important;height:auto !important;max-width:none !important;display:block;
object-fit:contain;border-radius:0 !important}
}
/* mobile: full square composite, centered, no crop */
@media (max-width:1000px){
body.tm-landing-page .tm-hero-image{position:relative !important;width:100% !important;max-width:min(460px,92%);height:auto !important;aspect-ratio:1 / 1;max-height:none !important;border-radius:0 !important;overflow:visible !important;margin:0 auto;background:transparent !important}
body.tm-landing-page .tm-hero-image img{position:relative !important;inset:auto !important;width:100% !important;height:auto !important;display:block;object-fit:contain;border-radius:0 !important}
}
/* composite blends itself (jpg fades to warm-black at its edges) — no overlay gradient */
.tm-hero-image::after{display:none !important}
/* ---- contrast fixes after the teal->gold recolor (shared white-text rule became dark) ---- */
body.tm-landing-page .tm-button-primary,
body.tm-landing-page .tm-button-white{color:#231803 !important}
body.tm-landing-page .tm-steps strong{color:var(--tm-ink) !important}
body.tm-landing-page .tm-steps span,
body.tm-landing-page .tm-footer-social a{color:var(--tm-text) !important}
body.tm-landing-page .tm-footer-social a:hover{color:var(--tm-primary) !important}
body.tm-landing-page .tm-cta-banner{background:linear-gradient(180deg,var(--tm-surface),#100C06) !important;border:1px solid var(--tm-card-frame) !important}
body.tm-landing-page .tm-cta-banner h2{color:var(--tm-ink) !important}
body.tm-landing-page .tm-cta-banner p{color:var(--tm-text) !important}
/* ---- desktop: show the inline nav (the forced-dark unwrap left mobile nav rules
applying at all widths, hiding the nav behind a hamburger on desktop) ---- */
@media (min-width:1001px){
body.tm-landing-page .tm-primary-nav{position:static !important;opacity:1 !important;pointer-events:auto !important;transform:none !important;display:block !important;max-height:none !important;overflow:visible !important;background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;inset:auto !important}
body.tm-landing-page .tm-primary-nav>ul{display:flex !important;flex-direction:row !important;align-items:center;gap:26px !important;width:auto !important;margin:0 !important;padding:0 !important}
body.tm-landing-page .tm-primary-nav>ul>li{width:auto !important}
body.tm-landing-page .tm-nav-menu{position:relative !important}
body.tm-landing-page .tm-nav-menu summary,
body.tm-landing-page .tm-primary-nav>ul>li>a{min-height:0 !important;padding:6px 2px !important;font-size:15px !important;border:0 !important;width:auto !important;justify-content:flex-start !important}
body.tm-landing-page .tm-dropdown{position:absolute !important;top:calc(100% + 6px) !important;left:0 !important;min-width:210px !important;flex-direction:column;padding:8px !important;margin:0 !important;background:var(--tm-surface) !important;border:1px solid var(--tm-line) !important;border-radius:10px !important;box-shadow:0 24px 56px rgba(0,0,0,.5) !important}
/* invisible bridge across the trigger->panel gap so hover doesn't drop */
body.tm-landing-page .tm-nav-menu[open]::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
body.tm-landing-page .tm-dropdown a{padding:9px 11px !important;min-height:0 !important}
body.tm-landing-page .tm-nav-toggle{display:none !important}
}
/* ---- force dark header + nav surfaces (Tradestone's light default was winning) ---- */
body.tm-landing-page .tm-site-header{background:rgba(10,9,8,.82) !important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent !important}
body.tm-landing-page .tm-site-header.is-scrolled{background:rgba(10,9,8,.95) !important;border-bottom-color:var(--tm-line) !important}
body.tm-landing-page .tm-primary-nav,
body.tm-landing-page .tm-dropdown{background:var(--tm-surface) !important;border-color:var(--tm-line) !important}
body.tm-landing-page .tm-primary-nav a,
body.tm-landing-page .tm-nav-menu summary{color:var(--tm-text) !important}
body.tm-landing-page .tm-primary-nav a:hover,
body.tm-landing-page .tm-nav-active{color:var(--tm-ink) !important}
body.tm-landing-page .tm-dropdown a{color:var(--tm-muted) !important}
body.tm-landing-page .tm-dropdown a:hover{color:var(--tm-ink) !important;background:var(--tm-soft) !important}
/* ---- trust strip: real dimensional cards (not flat divided cells) ---- */
body.tm-landing-page .tm-trust-strip{background:transparent !important;border-top:1px solid var(--tm-line);border-bottom:1px solid var(--tm-line)}
body.tm-landing-page .tm-trust-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:18px !important;padding:30px 0 !important}
body.tm-landing-page .tm-trust-grid article{
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:flex-start;gap:16px;
min-height:0 !important;padding:22px 22px !important;
border:1px solid var(--tm-line) !important;border-radius:16px;
background:linear-gradient(165deg,#1c170d 0%,#120f09 62%,#100d08 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 18px 40px rgba(0,0,0,.42);
transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s,box-shadow .3s;
}
body.tm-landing-page .tm-trust-grid article::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(200px 110px at 14% -10%, rgba(227,179,76,.12), transparent 70%)}
body.tm-landing-page .tm-trust-grid article::after{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(227,179,76,.5),transparent)}
body.tm-landing-page .tm-trust-grid article:hover{transform:translateY(-4px);border-color:var(--tm-card-frame) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 26px 54px rgba(0,0,0,.52)}
body.tm-landing-page .tm-trust-grid img{width:48px !important;height:48px !important;flex:0 0 auto;position:relative;z-index:1;
filter:drop-shadow(0 4px 10px rgba(227,179,76,.14))}
body.tm-landing-page .tm-trust-grid article>div{position:relative;z-index:1}
body.tm-landing-page .tm-trust-grid strong{font-family:Manrope,sans-serif !important;font-weight:800 !important;font-size:30px !important;line-height:1 !important;color:var(--tm-ink) !important;letter-spacing:-.01em}
body.tm-landing-page .tm-trust-grid span{display:block;margin-top:6px;font-size:12px !important;letter-spacing:.08em;text-transform:uppercase;color:var(--tm-muted) !important}
@media (max-width:900px){body.tm-landing-page .tm-trust-grid{grid-template-columns:1fr 1fr !important}}
@media (max-width:520px){body.tm-landing-page .tm-trust-grid{grid-template-columns:1fr !important}}
/* ---- benefits cards: dimensional (were flat #fff -> forced flat dark) ---- */
body.tm-landing-page .tm-benefit-grid{gap:20px !important}
body.tm-landing-page .tm-benefit-grid article{
position:relative;overflow:hidden;
background:linear-gradient(165deg,#1b160d 0%,#120f09 70%) !important;
border:1px solid var(--tm-line) !important;border-radius:16px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 18px 40px rgba(0,0,0,.4) !important;
transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s,box-shadow .3s;
}
body.tm-landing-page .tm-benefit-grid article::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(227,179,76,.32),transparent);pointer-events:none}
body.tm-landing-page .tm-benefit-grid article:hover{transform:translateY(-4px);border-color:var(--tm-card-frame) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 26px 54px rgba(0,0,0,.5) !important}
body.tm-landing-page .tm-benefit-grid img{filter:drop-shadow(0 4px 10px rgba(227,179,76,.14))}
/* ============================================================================
NAV REPAIR (2026-09-01)
The forced-dark unwrap of tradestone.css left TWO rule sets applying at every
width that were never meant to: the mobile-drawer block (a #151209 panel with
a 12px radius behind the row = the "horizontal filling line") and the
prefers-color-scheme:light block (background:#EBFBFE on :hover and
.tm-nav-active = a near-white pill clipping the labels and the chevrons).
Desktop nav is now a bare centred row; the only affordance is a 1px gold
hairline that wipes in under the label. No chips, no pills, no panel.
========================================================================== */
@media (min-width:1001px){
body.tm-landing-page .tm-primary-nav{
display:flex !important;flex:1 1 auto !important;justify-content:center !important;
background:transparent !important;background-image:none !important;
border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important}
body.tm-landing-page .tm-primary-nav>ul{gap:30px !important}
body.tm-landing-page .tm-primary-nav>ul>li>a,
body.tm-landing-page .tm-nav-menu>summary{
position:relative;overflow:visible;
padding:7px 0 !important;border-radius:0 !important;
background:transparent !important;background-image:none !important;
color:var(--tm-text) !important;font-weight:500 !important;
transition:color 180ms ease}
/* the hairline. summary's ::after is already the chevron, so it uses ::before. */
body.tm-landing-page .tm-primary-nav>ul>li>a::after,
body.tm-landing-page .tm-nav-menu>summary::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--tm-primary);border:0;border-radius:0;
transform:scaleX(0);transform-origin:left center;
transition:transform 240ms cubic-bezier(.22,.61,.36,1)}
body.tm-landing-page .tm-primary-nav>ul>li>a:hover,
body.tm-landing-page .tm-nav-menu>summary:hover,
body.tm-landing-page .tm-nav-menu[open]>summary{
color:var(--tm-ink) !important;background:transparent !important}
body.tm-landing-page .tm-primary-nav>ul>li>a:hover::after,
body.tm-landing-page .tm-nav-menu>summary:hover::before,
body.tm-landing-page .tm-nav-menu[open]>summary::before{transform:scaleX(1)}
body.tm-landing-page .tm-nav-menu>summary::after{opacity:.6;transition:opacity 180ms ease,transform 160ms ease}
body.tm-landing-page .tm-nav-menu>summary:hover::after,
body.tm-landing-page .tm-nav-menu[open]>summary::after{opacity:1}
}
/* mobile drawer keeps the pill, but a warm one with readable ink (the light-mode
#EBFBFE / #056D84 pair was unreadable on the dark drawer). */
@media (max-width:1000px){
body.tm-landing-page .tm-primary-nav a:hover,
body.tm-landing-page .tm-nav-menu summary:hover{
background:rgba(227,179,76,.10) !important;color:var(--tm-ink) !important}
}
/* ============================================================================
COPY-TRADING SECTION REPAIR (2026-09-01)
Was: three white 44px discs with 2-3 line ragged labels, a centre-aligned
disclaimer under left-aligned copy, and three provider cards crushed into
250px columns inside a 796px half that was otherwise empty.
Now: a hairline-ruled numbered ledger, everything on one alignment axis, and
the providers stacked as a full-width leaderboard that fills the column.
========================================================================== */
body.tm-landing-page .tm-copy-providers-grid{align-items:start !important;gap:60px !important}
body.tm-landing-page .tm-copy-providers-copy p:not(.tm-eyebrow){max-width:44ch !important}
body.tm-landing-page .tm-provider-actions{margin-top:26px !important}
body.tm-landing-page .tm-provider-steps{
counter-reset:dve-step;
display:block !important;margin-top:30px !important;max-width:400px;
border-top:1px solid var(--tm-line)}
body.tm-landing-page .tm-provider-steps span{
counter-increment:dve-step;
display:flex !important;align-items:center;justify-content:flex-start !important;
gap:16px;min-height:0 !important;padding:12px 0 !important;
border-bottom:1px solid var(--tm-line);
color:var(--tm-text) !important;font-size:13px !important;font-weight:500 !important;
text-align:left;letter-spacing:0}
body.tm-landing-page .tm-provider-steps span::before{
content:counter(dve-step,decimal-leading-zero) !important;
flex:0 0 auto !important;width:auto !important;height:auto !important;
border:0 !important;border-radius:0 !important;box-shadow:none !important;
background:none !important;
color:var(--tm-primary);
font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",monospace;
font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.06em}
body.tm-landing-page .tm-copy-providers small{
text-align:left !important;margin-top:20px !important;max-width:400px}
/* providers: a stacked leaderboard, not three crushed cards */
body.tm-landing-page .tm-provider-card-row{grid-template-columns:1fr !important;gap:12px !important}
body.tm-landing-page .dve-provider{
grid-template-columns:auto 1fr auto !important;gap:14px !important;
padding:20px 24px !important;
background:linear-gradient(165deg,#1c170d 0%,#120f09 62%) !important}
/* keep Tradestone's mobile behaviour: the steps ledger and its CTA are both
hidden below 760px (my display:block above would otherwise show the ledger
on mobile while the CTA stayed hidden). */
@media (max-width:760px){
body.tm-landing-page .tm-provider-steps{display:none !important}
}
/* ============================================================================
HERO + ONBOARDING REPAIR (2026-09-01)
========================================================================== */
/* 1. THE HERO DEAD ZONE. Measured: container 1320px, grid cols 549|743. The hero
image is an abspos grid child, so its containing block is grid area 2 (743px)
and width:min(50%,600px) resolved to 371px pinned right -> 372px of nothing
between the copy column and the portrait. Rebalance the columns and let the
image fill its area instead of floating in it. */
@media (min-width:1001px){
/* Tradestone scale: image column takes the larger share (~54%) so the square composite is
bigger than half the page; copy takes ~46% and centers beside it */
body.tm-landing-page .tm-hero-grid{grid-template-columns:minmax(0,46fr) minmax(0,54fr) !important;column-gap:24px !important}
body.tm-landing-page .tm-hero-copy,
body.tm-landing-page .tm-copy-card-hero{max-width:none !important}
body.tm-landing-page .tm-hero h1{max-width:15ch}
body.tm-landing-page .tm-hero-lead{max-width:52ch !important}
}
/* 2. ONE gold slab per viewport. The header CTA and the hero CTA were both filled
gold and both read "Signup"; the header one is now a hairline so the hero keeps
the single loud CTA. */
body.tm-landing-page .tm-header-cta{
border:1px solid var(--tm-primary) !important;background:transparent !important;
color:var(--tm-primary) !important;font-weight:600 !important;
transition:background-color .2s ease,color .2s ease}
body.tm-landing-page .tm-header-cta:hover{
background:var(--tm-primary) !important;color:#231803 !important}
/* 3. THE STEPS. Their was display:none (orphaning the row under the benefits
grid), and each
put the number disc and the title on one line with the
description dropping to a second line offset by the disc -> "Create
AccountComplete a quick sign-up." Give the section its heading back and let the
disc span both rows so title and description share one left edge. */
body.tm-landing-page .tm-steps h2{
display:block !important;margin:0 0 26px !important;text-align:left}
body.tm-landing-page .tm-steps ol{gap:34px !important}
body.tm-landing-page .tm-steps li{
grid-template-columns:auto 1fr !important;grid-template-rows:auto auto !important;
align-items:start !important;column-gap:14px !important;row-gap:5px !important;
padding:18px 0 0 !important;border-top:1px solid var(--tm-line)}
body.tm-landing-page .tm-steps li>strong{grid-column:2;grid-row:1;align-self:center}
body.tm-landing-page .tm-steps li>span{grid-column:2;grid-row:2;color:var(--tm-muted) !important}
body.tm-landing-page .tm-steps li::before{grid-column:1;grid-row:1 / span 2;align-self:start}
body.tm-landing-page .tm-onboarding{padding-bottom:14px !important}
/* 4. The hero copy card was a 2-column grid (measured: 190px 536px) because
Tradestone puts an IMAGE in column 2 and our markup has none -- so 536px of the
card was a permanently empty column, with the text crushed into 190px. Collapse
it to one column and lay the content out as a strip that uses the width. */
@media (min-width:1001px){
body.tm-landing-page .tm-hero h1{max-width:19ch}
body.tm-landing-page .tm-copy-card-hero{
grid-template-columns:minmax(0,1fr) !important;padding:24px 28px !important}
body.tm-landing-page .tm-copy-card-hero .tm-copy-content{
grid-column:1 / -1;width:auto !important;
display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
column-gap:40px;align-items:center}
body.tm-landing-page .tm-copy-card-hero .tm-eyebrow{grid-column:1;grid-row:1;margin:0 0 8px}
body.tm-landing-page .tm-copy-card-hero h2{grid-column:1;grid-row:2;margin:0 !important;max-width:16ch}
body.tm-landing-page .tm-copy-card-hero p:not(.tm-eyebrow){
grid-column:2;grid-row:1 / span 2;max-width:40ch !important;margin:0 !important;
padding-left:40px;border-left:1px solid var(--tm-line)}
}
/* signup: honeypot field (must be reachable to bots parsing the DOM but never
visible or focusable for a person - so no display:none, which some bots skip) */
body.tm-landing-page .tm-hp{position:absolute !important;left:-9999px !important;
width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
body.tm-landing-page .tm-optional{
font-weight:400;color:var(--tm-muted);text-transform:none;letter-spacing:0;font-size:.85em}
/* signup success (in-place confirmation; no off-site redirect) */
body.tm-landing-page .tm-signup-done{text-align:center;padding:8px 4px 6px}
body.tm-landing-page .tm-signup-tick{width:52px;height:52px;margin:0 auto 16px;border-radius:999px;
display:grid;place-items:center;color:#231803;background:linear-gradient(135deg,var(--tm-primary),var(--tm-primary-deep))}
body.tm-landing-page .tm-signup-tick svg{width:26px;height:26px}
body.tm-landing-page .tm-signup-done h3{font-family:Manrope,sans-serif;font-weight:700;font-size:20px;color:var(--tm-ink);margin:0}
body.tm-landing-page .tm-signup-done p{color:var(--tm-text);font-size:14px;margin:10px auto 20px;max-width:42ch;line-height:1.55}
body.tm-landing-page .tm-signup-done p b{color:var(--tm-ink)}
body.tm-landing-page .tm-signup-done .tm-button{display:inline-flex}