/* TradeClone shared styles - generated from the index build by pages.py; edit build.py, not this file */

@font-face{font-family:'Instrument Sans';font-weight:500;font-display:swap;src:url('fonts/instrument-sans-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-display:swap;src:url('fonts/instrument-sans-600.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:700;font-display:swap;src:url('fonts/instrument-sans-700.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:400;font-display:swap;src:url('fonts/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-display:swap;src:url('fonts/dm-sans-500.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-weight:400;font-display:swap;src:url('fonts/dm-mono-400.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-weight:500;font-display:swap;src:url('fonts/dm-mono-500.woff2') format('woff2')}

:root{
  --bg:#0c0b0a; --bg-deep:#080706; --bg-raise:#0f0d0c;
  --s1:#141211; --s2:#1b1816;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --line-3:rgba(255,255,255,.22);
  --t1:#f4f1ee; --t2:#a39c96; --t3:#8a827b; --mute:#8e8680;
  --or:#e2622f; --or-ink:#150905; --or-a12:rgba(226,98,47,.12); --or-a40:rgba(226,98,47,.4);
  --green:#4cc38a; --gold:#e8b04a; --blue:#9eb7d6;
  --f-head:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --f-body:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --f-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px; --pad:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-r:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* nothing may widen the page sideways: phones zoom the whole page out to fit anything that pokes past the edge */
section,.sec,footer{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img:not(.tk-vis *),svg:not(.tk-vis *){display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg :is(path,circle,rect):not(.tk-vis *):not(.fx *):not(.lx *){fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-size:16px;font-weight:500;white-space:nowrap;transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s}
.btn svg{width:17px;height:17px}
.btn-p{background:var(--or);color:var(--or-ink);font-weight:600}
.btn-p:hover{box-shadow:0 10px 30px -10px rgba(226,98,47,.7);transform:translateY(-1px)}
.btn-g{background:rgba(255,255,255,.03);border:1px solid var(--line-2)}
.btn-g:hover{border-color:var(--line-3);background:rgba(255,255,255,.06)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-sm svg{width:15px;height:15px}

/* type */
.eb{font-family:var(--f-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--t3)}
.h2{font-family:var(--f-head);font-weight:600;font-size:clamp(38px,5.2vw,60px);line-height:1.02;letter-spacing:-.035em}
.h2 .m,.h1 .m{color:var(--mute)}
.lead{font-size:17px;color:var(--t2);max-width:560px}
.shead{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.sec{padding:clamp(88px,11vw,130px) 0;border-top:1px solid var(--line);position:relative}
.dots{background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:46px 46px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(12,11,10,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:600;font-size:18px}
.logo img{width:32px;height:32px}
.logo b{font-weight:600;color:var(--or)}
.nav-links{display:flex;gap:34px;font-size:15px}
.nav-links a{color:var(--t2);transition:color .2s}
.nav-links a:hover{color:var(--t1)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .sm{display:none}
@media (max-width:359px){.nav-cta .lg{display:none}.nav-cta .sm{display:inline}}   /* the smallest phones: shorter label so the bar fits */
.nav-menu{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav-menu svg{width:22px;height:22px}
.nav-drawer{display:none}
/* ── Resources panel (desktop) ── */
.nav .wrap{position:relative}
.nav-links{align-items:center}
.nav-dd{display:flex}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--t2);font:inherit;font-size:15px;cursor:pointer;transition:color .2s}
.nav-dd-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:var(--t1)}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-btn:focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:4px}
.nav-panel{position:absolute;top:calc(100% + 8px);left:50%;z-index:60;width:min(880px,calc(100vw - 40px));display:grid;grid-template-columns:1fr 1fr 230px;gap:4px;padding:10px;
  border-radius:18px;background:#151210;border:1px solid var(--line-2);box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .2s ease,transform .26s var(--ease),visibility 0s linear .26s}
.nav-dd.open .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .26s var(--ease),visibility 0s}
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* bridge, so moving down from the button keeps it open */
.np-col{display:flex;flex-direction:column}
.np-h{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);padding:8px 12px 6px}
.np-it{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;color:var(--t1);transition:background .2s}
.np-it:hover,.np-it:focus-visible{background:rgba(255,255,255,.045);outline:none}
.np-ic{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(226,98,47,.32);background:rgba(226,98,47,.07);color:var(--or)}
.np-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.np-tx b{display:block;font-size:15px;font-weight:500}
.np-tx b i{font-style:normal;color:var(--t3);margin-left:4px}
.np-tx em{display:block;font-style:normal;font-size:13px;line-height:1.4;color:var(--t3);margin-top:2px}
.np-feat{margin:6px;padding:10px 10px 14px;border-radius:14px;display:flex;flex-direction:column;gap:6px;color:var(--t1);
  background:linear-gradient(160deg,rgba(226,98,47,.2),rgba(226,98,47,.03));border:1px solid rgba(226,98,47,.3);transition:border-color .2s,transform .25s var(--ease)}
.np-feat:hover,.np-feat:focus-visible{border-color:rgba(226,98,47,.6);transform:translateY(-2px);outline:none}
.np-feh{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.np-feat b{font-family:var(--f-head);font-weight:600;font-size:19px;line-height:1.2}
.np-feat .np-sub{font-size:13px;line-height:1.4;color:var(--t2);padding:0 4px}
.np-feat .np-feh{padding:6px 4px 0}.np-feat b{padding:0 4px}
.np-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#1a1512}
.np-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.np-thumb::after{content:"";position:absolute;inset:0;background:rgba(12,11,10,.42);opacity:0;transition:opacity .3s ease}
.np-feat:hover .np-thumb::after,.np-feat:focus-visible .np-thumb::after{opacity:1}
.np-feat:hover .np-thumb img{transform:scale(1.04)}
.np-play{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  z-index:1;background:rgba(12,11,10,.58);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .35s var(--ease)}   /* only appears on hover, so the thumbnail stays clean */
.np-play svg{width:14px;height:14px;margin-left:2px;fill:#fff}
.np-feat:hover .np-play,.np-feat:focus-visible .np-play{opacity:1;transform:none}
.np-chip{position:absolute;z-index:1;right:8px;bottom:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:rgba(12,11,10,.72);color:#f4f1ee}
@media (prefers-reduced-motion:reduce){.nav-panel,.nav-dd-btn svg{transition:none}}
/* the menu button shows a cross while the phone menu is open */
.nav-menu .m-close{display:none}
.nav-menu[aria-expanded=true] .m-open{display:none}.nav-menu[aria-expanded=true] .m-close{display:block}

/* hero */
.hero{position:relative;padding:clamp(72px,9vw,120px) 0 70px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 75% 35%,rgba(226,98,47,.13),transparent 70%),linear-gradient(180deg,transparent 70%,var(--bg));pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--t2);padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.chip i{width:6px;height:6px;border-radius:3px;background:var(--or)}
.h1{font-family:var(--f-head);font-weight:700;font-size:clamp(46px,5.8vw,84px);line-height:.98;letter-spacing:-.042em}
.h1>span{display:block;white-space:nowrap}
.hero-sub{font-size:19px;color:var(--t2);max-width:540px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.mini{display:flex;gap:28px;align-items:center;margin-top:8px;flex-wrap:wrap}
.mini div{display:flex;flex-direction:column;gap:3px}
.mini b{font-family:var(--f-mono);font-weight:400;font-size:17px}
.mini span{font-size:13px;color:var(--t3)}
.mini hr{width:1px;height:38px;border:0;background:var(--line-2);margin:0}
.hero-media{perspective:1400px}
.media-tilt{transform:rotateY(-10deg) rotateX(4deg);transform-origin:left center;border-radius:18px;padding:7px;background:#161412;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 50px 100px -40px rgba(0,0,0,.95);transition:transform .8s var(--ease)}
.hero-media:hover .media-tilt{transform:rotateY(-4deg) rotateX(2deg)}

.hero-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#0c0b0a}
.hero-vwrap{position:relative}
.snd{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(12,11,10,.72);border:1px solid var(--line-2);color:var(--t1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,background .2s}
.snd:hover{border-color:var(--line-3);background:rgba(12,11,10,.9)}
/* the sound button stays hidden until the pointer comes near it; always shown once sound is on, when focused, or on touch screens */
.snd{opacity:0;transform:scale(.88);transition:opacity .25s,transform .25s var(--ease),border-color .2s,background .2s}
.snd.near,.snd:focus-visible,.snd[aria-pressed="true"]{opacity:1;transform:none}
@media (hover:none){.snd{opacity:1;transform:none}}
.snd svg{width:17px;height:17px}
.snd .on{display:none}
.snd[aria-pressed="true"] .on{display:block}
.snd[aria-pressed="true"] .off{display:none}

/* placeholder frame */
.ph{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(226,98,47,.14),transparent 70%),var(--bg-deep);border:1px solid var(--line)}
.ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
.ph-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(20,17,15,.8);border:1px solid var(--line-3);display:flex;align-items:center;justify-content:center}
.ph-play svg{width:26px;height:26px}
.ph-play svg path{fill:var(--t1);stroke:none}
.ph-tag{position:absolute;left:16px;top:14px;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--or);padding:6px 12px;border-radius:999px;border:1px solid var(--or-a40);background:rgba(12,11,10,.8)}
.ph-tag i{width:6px;height:6px;border-radius:3px;background:var(--or)}
.ph-note{position:absolute;right:14px;bottom:12px;font-family:var(--f-mono);font-size:12px;color:var(--t2);padding:4px 9px;border-radius:6px;background:rgba(0,0,0,.55);border:1px solid var(--line)}

/* marquee */
.mq{position:relative;margin-top:90px;display:flex;flex-direction:column;align-items:center;gap:22px}
.mq-track{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.mq-track ul{display:flex;gap:46px;margin:0;padding:0;list-style:none;width:max-content;animation:mq 48s linear infinite}
.mq.off .mq-track ul{animation-play-state:paused}   /* paused while scrolled out of view */
.mq-track li{font-size:19px;color:var(--t2);white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}

/* stat band */
.band{background:var(--bg-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .wrap{display:flex;justify-content:center;gap:clamp(28px,6vw,80px);padding-top:32px;padding-bottom:32px;flex-wrap:wrap}
.bs{display:flex;gap:14px;align-items:center}
.bs .ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--t2)}
.bs .ic svg{width:17px;height:17px}
.bs b{display:block;font-family:var(--f-mono);font-weight:500;font-size:16px}
.bs span{font-size:13px;color:var(--t3)}

/* toolkit */
.tk{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(226,98,47,.08),transparent 70%)}
.tk-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:40px}
.tk-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:14px;color:var(--t3);border:1px solid var(--line);transition:color .2s,border-color .2s,background .2s}
.tk-tab i{width:6px;height:6px;border-radius:3px;background:var(--or)}
.tk-tab[data-extra] i{background:var(--blue)}
.tk-tab:hover{color:var(--t1)}
.tk-tab[aria-selected="true"]{color:var(--t1);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.tk-rule{height:1px;margin:40px 0;background:linear-gradient(90deg,transparent,rgba(226,98,47,.5),transparent)}
.tk-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:64px;align-items:center}
.tk-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;transition:opacity .25s}
.tk-copy.fade{opacity:0}
.tk-eb{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.tk-eb i{width:6px;height:6px;border-radius:3px;background:currentColor}
.tk-copy h3{font-family:var(--f-head);font-weight:600;font-size:clamp(30px,3.4vw,42px);line-height:1.05;letter-spacing:-.03em}
.tk-copy p{color:var(--t2)}
.tk-copy p strong{color:var(--t1);font-weight:500}
.pts{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.pts li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.pts .ck{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid var(--or-a40);display:flex;align-items:center;justify-content:center;color:var(--or);margin-top:1px}
.pts .ck svg{width:13px;height:13px}
.pts em{font-style:normal;color:var(--t2)}
.tk-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tk-media .ph{border-radius:22px;border-color:var(--line-2);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}

/* ported feature visuals (from the previous index), scoped to .tk-vis */
.tk-vis{--bg:oklch(8% 0.008 40);--bg2:oklch(10% 0.010 40);--surf:oklch(13% 0.010 40);--surf2:oklch(16% 0.010 40);
  --border:oklch(100% 0 0 / .07);--border-o:oklch(65% 0.18 40 / .28);--orange:oklch(65% 0.18 40);--orange-d:oklch(59% 0.18 40);
  --orange-lo:oklch(65% 0.18 40 / .10);--green:oklch(72% 0.19 145);--red:oklch(62% 0.20 25);--text:oklch(96% 0.004 40);
  --text2:oklch(60% 0.006 40);--text3:oklch(38% 0.006 40);--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-io:cubic-bezier(0.77,0,0.175,1);
  position:relative;color:var(--text);font-family:var(--f-body)}
:where(.tk-vis) *,:where(.tk-vis) *::before,:where(.tk-vis) *::after{box-sizing:border-box;margin:0;padding:0}
.tk-media{min-width:0}
.tk-vis{aspect-ratio:600/470;height:auto}
/* nothing animates where nobody can see it: inactive tabs, or the whole toolkit when scrolled away */
#tk-vis .vf-panel:not(.on) *,#tk-vis.off *{animation-play-state:paused!important}
/* every visual gets the same box; each is measured by its visible content and scaled to fill the same share of it (see fitVisuals) */
.vf-stage{position:absolute;inset:0}
.vf-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(12px) scale(.99);transition:opacity .16s linear,transform .16s var(--ease),visibility 0s linear .16s}
.vf-panel.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .34s var(--ease) .14s,transform .42s var(--ease) .14s,visibility 0s}
.vf-panel>.vis-frame{position:relative;flex:none;display:flex;align-items:center;justify-content:center}
.vis-card { width: 100%; max-width: 680px; background: linear-gradient(180deg, oklch(20% 0.012 40) 0%, var(--surf) 40%, oklch(8.5% 0.010 40) 100%); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: oklch(0 0 0 / 0.5) 0px 1px 2px, oklch(0 0 0 / 0.55) 0px 20px 44px, oklch(0 0 0 / 0.62) 0px 46px 100px -16px, oklch(0.65 0.18 40 / 0.16) 0px 44px 88px -30px, oklch(1 0 0 / 0.06) 0px 0px 0px 1px, oklch(1 0 0 / 0.12) 0px 1px 0px inset, oklch(0 0 0 / 0.5) 0px -1px 0px inset; position: relative; transition: transform .45s var(--ease-out); }
.vis-card::before { content: ""; position: absolute; inset: 0px; border-radius: 14px; pointer-events: none; background: conic-gradient(from 180deg at 50% -10%, transparent 55deg, oklch(0.68 0.19 40 / 0.24) 120deg, transparent 185deg); }
.m1 { display: flex; align-items: center; gap: 6px; }
.m2 { font-size: 12.5px; color: rgb(138, 138, 138); letter-spacing: 1.5px; font-family: "DM Sans", sans-serif; }
.m3 { font-size: 9px; color: rgb(138, 138, 138); margin-bottom: 2px; font-family: "DM Sans", sans-serif; }
.m4 { display: grid; grid-template-columns: 72px 44px 1fr 48px; align-items: center; gap: 8px; }
.m5 { font-size: 12.5px; color: rgb(130, 130, 130); font-family: "DM Sans", sans-serif; }
.m6 { font-size: 12.5px; font-weight: 700; color: rgb(220, 220, 220); font-family: "DM Mono", monospace; text-align: right; }
.m7 { height: 40px; background: rgb(26, 26, 26); border-radius: 3px; overflow: hidden; }
.m8 { text-align: center; font-size: 11px; font-weight: 700; color: rgb(220, 80, 20); font-family: "DM Mono", monospace; background: rgba(220, 80, 20, 0.1); border: 1px solid rgba(220, 80, 20, 0.25); border-radius: 3px; padding: 2px 4px; }
.m9 { background: rgb(15, 15, 15); border: 1px solid rgb(28, 28, 28); border-radius: 8px; padding: 11px 13px; }
.m11 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.m12 { display: none; font-size: 9px; font-weight: 700; letter-spacing: 1px; font-family: "DM Sans", sans-serif; padding: 1px 6px; border-radius: 3px; }
.m15 { font-size: 11.5px; font-weight: 600; color: rgb(136, 136, 136); font-family: "DM Sans", sans-serif; }
.m16 { font-size: 12px; font-weight: 700; color: rgb(138, 138, 138); font-family: "DM Mono", monospace; transition: color 0.4s; }
.m18 { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 14px; border-radius: 3px; background: rgb(46, 46, 46); left: 33.3%; box-shadow: none; transition: background 0.4s, box-shadow 0.4s; }
.m19 { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 2px; left: 33.3%; width: 0px; }
.m20 { position: absolute; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; height: 4px; border-radius: 2px; overflow: hidden; display: flex; }
.m21 { position: absolute; top: 8px; bottom: 8px; left: 0px; width: 1px; background: rgba(220, 60, 60, 0.3); }
.m22 { position: absolute; top: 8px; bottom: 8px; left: 33.3%; width: 1px; background: rgba(255, 255, 255, 0.08); }
.m23 { position: absolute; top: 8px; bottom: 8px; right: 0px; width: 1px; background: rgba(0, 200, 100, 0.3); }
.m25 { width: 33.3%; background: rgba(220, 60, 60, 0.15); }
.m27 { width: 66.7%; background: rgba(0, 200, 100, 0.1); }
.m28 { width: 6px; height: 6px; border-radius: 50%; background: rgb(51, 51, 51); transition: background 0.4s, box-shadow 0.4s; }
.m29 { background: rgb(20, 20, 20); border: 1px solid rgb(34, 34, 34); border-radius: 8px; overflow: visible; }
.m31 { font-size: 13px; color: rgb(220, 220, 220); font-family: "DM Mono", monospace; }
.m32 { font-size: 13px; font-weight: 700; color: rgb(130, 130, 130); font-family: "DM Mono", monospace; }
.m33 { padding: 0px 14px 11px; text-align: center; }
.m34 { padding: 16px 20px; display: flex; align-items: center; border-bottom: 1px solid rgb(26, 26, 26); }
.m35 { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(26, 26, 26); }
.m36 { padding: 7px 10px; background: rgb(17, 17, 17); border-bottom: 1px solid rgb(30, 30, 30); display: flex; justify-content: space-between; align-items: center; border-radius: 8px 8px 0px 0px; }
.m37 { padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.m38 { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; }
.m39 { position: absolute; left: 0px; right: 0px; background: rgba(0, 200, 100, 0.06); }
.m40 { position: absolute; left: 0px; right: 0px; bottom: 0px; background: rgba(220, 60, 60, 0.06); }
.m41 { position: absolute; left: 0px; right: 0px; bottom: 20%; height: 1px; background: rgba(255, 255, 255, 0.03); }
.m42 { position: absolute; left: 0px; right: 0px; bottom: 20%; height: 1px; border-top: 1px dashed rgba(220, 60, 60, 0.6); }
.m43 { position: absolute; left: 0px; right: 0px; bottom: 40%; height: 1px; background: rgba(255, 255, 255, 0.03); }
.m44 { position: absolute; left: 0px; right: 0px; bottom: 40%; height: 2px; background: rgb(220, 80, 20); box-shadow: rgba(220, 80, 20, 0.55) 0px 0px 8px; }
.m45 { position: absolute; left: 0px; right: 0px; bottom: 60%; height: 1px; background: rgba(255, 255, 255, 0.03); }
.m46 { position: absolute; left: 0px; right: 0px; bottom: 80%; height: 1px; border-top: 1px dashed rgba(0, 200, 100, 0.55); }
.m47 { position: absolute; left: 5px; bottom: 40%; padding-bottom: 4px; font-size: 10px; font-weight: 700; color: rgb(220, 80, 20); font-family: "DM Mono", monospace; line-height: 1; }
.m48 { position: absolute; right: 5px; bottom: 20%; padding-bottom: 3px; font-size: 6.5px; color: rgb(220, 60, 60); font-family: "DM Mono", monospace; line-height: 1; }
.m49 { position: absolute; right: 5px; bottom: 80%; padding-bottom: 3px; font-size: 6.5px; color: rgb(0, 200, 100); font-family: "DM Mono", monospace; line-height: 1; }
.m50 { position: relative; height: 50px; }
@keyframes pulse { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}
@keyframes atm-pnl-out { 
  100% { opacity: 0; transform: translateX(18px); }
}
@keyframes atm-pnl-in { 
  0% { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: none; }
}
/* journal: trading days only (no Sat/Sun) and three weeks, so each day is large enough to read */
#vis-2 .jv-stage{width:660px!important;height:470px!important}
#vis-2 .jv-month{width:660px!important}
#vis-2 .dow,#vis-2 .grid{grid-template-columns:repeat(6,1fr)!important}
#vis-2 .dow>div:nth-child(8n+1),#vis-2 .dow>div:nth-child(8n+7){display:none}
#vis-2 .grid>:nth-child(8n+1),#vis-2 .grid>:nth-child(8n+7){display:none}
#vis-2 .grid>:nth-child(-n+8),#vis-2 .grid>:nth-child(n+33){display:none}   /* weeks 2 to 4 */
#vis-2 .jv-score{left:-96px!important;top:-24px!important;width:300px!important}  /* over the empty Mon/Tue cells */
#vis-2 .ctrl{justify-content:flex-end!important;padding-right:4px}   /* month and total sit clear of the dial */
/* TradingView: spotlight. The two windows take turns in front at full size; the other waits smaller and dimmed behind.
   The windows change real size and position (never a transform scale), and the stage is laid out at its on-screen size,
   so each video is drawn once from its full-resolution source with no scaling layers in between. */
#vis-7 .tv-stage{width:540px!important;max-width:none!important;height:423px!important}
#vis-7 .tv-vid,#vis-7 .tv-vid-inner{will-change:auto!important}
#vis-7 .tv-vid{right:auto!important;animation:none!important;transform:none!important;
  transition:left 1s cubic-bezier(.65,0,.35,1),top 1s cubic-bezier(.65,0,.35,1),width 1s cubic-bezier(.65,0,.35,1),height 1s cubic-bezier(.65,0,.35,1)}
/* the window at the back is dimmed by a dark layer on top, never by a CSS filter: a filter on a video's
   container stops some browsers repainting the video while it plays */
#vis-7 .tv-vid-inner::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:#000;opacity:0;transition:opacity 1s ease;border-radius:inherit}
/* TradingView in front */
#vis-7 .tv-vid-tview{left:0!important;top:14px!important;width:392px!important;height:392px!important;z-index:4}
#vis-7 .tv-vid-clone{left:299px!important;top:0!important;width:241px!important;height:151px!important;z-index:2}
#vis-7 .tv-vid-clone .tv-vid-inner::after{opacity:.38}
/* TradeClone in front */
#vis-7.f-tc .tv-vid-clone{left:58px!important;top:110px!important;width:482px!important;height:301px!important;z-index:4}
#vis-7.f-tc .tv-vid-clone .tv-vid-inner::after{opacity:0}
#vis-7.f-tc .tv-vid-tview{left:0!important;top:0!important;width:196px!important;height:196px!important;z-index:2}
#vis-7.f-tc .tv-vid-tview .tv-vid-inner::after{opacity:.38}
@media (prefers-reduced-motion: reduce){#vis-7 .tv-vid{transition:none}}
/* same rule for the original effects: hover dimming and the arrival blur used filters around the video */
#vis-7 .tv-stage:has(.tv-vid:hover) .tv-vid:not(:hover) .tv-vid-inner{filter:none!important;opacity:1!important}
#vis-7 .tv-stage:has(.tv-vid:hover) .tv-vid:not(:hover) .tv-vid-inner::after{opacity:.3}
#vis-7 .tv-vid:hover .tv-vid-inner::after{opacity:0!important}
#vis-7.active .tv-vid-inner{animation:tvArriveSafe .8s cubic-bezier(.22,1,.36,1)}
@keyframes tvArriveSafe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){#vis-7.active .tv-vid-inner{animation:none}}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.card{padding:30px;border-radius:18px;background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.card .ic{width:42px;height:42px;border-radius:50%;border:1px solid var(--or-a40);display:flex;align-items:center;justify-content:center;color:var(--or)}
.card .ic svg{width:18px;height:18px}
.card h3{font-family:var(--f-head);font-weight:600;font-size:20px}
.card p{font-size:15px;color:var(--t2)}
.why-link{display:flex;justify-content:center;margin-top:36px}

/* results: PnL swoop */
.res{background:radial-gradient(ellipse 60% 50% at 50% 55%,rgba(226,98,47,.07),transparent 70%);overflow:hidden}
.swoop{position:relative;height:clamp(460px,46vw,640px);margin-top:36px;perspective:1600px;overflow:hidden}
.swoop::before,.swoop::after{content:"";position:absolute;top:0;bottom:0;width:16%;z-index:40;pointer-events:none}
.swoop::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.swoop::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.rcard{position:absolute;left:0;top:0;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 18px 40px -12px rgba(0,0,0,.8);will-change:transform,opacity;transform-origin:50% 50%;opacity:0;
  transition:box-shadow .5s ease,border-color .5s ease}
.rcard img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
/* one overlay dims the stage behind a held card: far cheaper than filtering every moving card */
.swoop-dim{position:absolute;inset:0;z-index:50;pointer-events:none;background:rgba(12,11,10,.62);opacity:0;transition:opacity .35s ease}
.swoop.has-frozen .swoop-dim{opacity:1}
.rcard.frozen{z-index:60;border-color:var(--or-a40);box-shadow:0 26px 56px -22px rgba(0,0,0,.9),0 0 46px -12px rgba(226,98,47,.55);transition:transform .55s var(--ease),box-shadow .3s,border-color .3s}
.swoop-hint{margin:18px 0 0;text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.res-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* how */
.how{border-top:1px solid var(--line);background:var(--bg-raise);padding:clamp(64px,7vw,88px) 0}
.how .shead{gap:12px}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:960px;margin:40px auto 0}
/* the connecting line, on its own layer beneath the circles: a faint track, then two segments that travel
   step 1 -> 2 -> 3 as each step finishes landing, then a pulse that lights each step in turn. Geometry is set from the circles' centres. */
.steps-line,.steps-run{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:0}
.steps .step{z-index:1}
.steps::before{content:"";position:absolute;left:var(--lx,16.6%);top:var(--ly,32px);width:var(--lw,66.8%);height:var(--lh,1px);background:rgba(255,255,255,.07);
  pointer-events:none;z-index:0;opacity:0;transition:opacity .9s ease .4s}
.steps.in::before{opacity:1}
.seg{position:absolute;display:block;transform-origin:left center;transform:scaleX(0);transition:transform .6s cubic-bezier(.45,0,.25,1)}
.seg.s1{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(226,98,47,.7))}
.seg.s2{background:linear-gradient(90deg,rgba(226,98,47,.7),rgba(255,255,255,.35))}
.seg.on{transform:scaleX(1)}
.steps.vert .seg{transform-origin:center top;transform:scaleY(0)}
.steps.vert .seg.s1{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(226,98,47,.7))}
.steps.vert .seg.s2{background:linear-gradient(180deg,rgba(226,98,47,.7),rgba(255,255,255,.35))}
.steps.vert .seg.on{transform:scaleY(1)}
.steps.reset .seg{transition:none}
.steps-run{overflow:hidden}
.steps-run i{position:absolute;top:0;bottom:0;left:-28%;width:28%;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,154,106,.95),transparent);border-radius:3px}
.steps.live .steps-run i{animation:stepRun 4.2s linear .35s infinite}
@keyframes stepRun{0%{left:-28%;opacity:1}55%{left:100%;opacity:1}55.01%,100%{left:100%;opacity:0}}
.steps.vert .steps-run i{left:0;right:0;width:auto;top:-28%;height:28%;bottom:auto;background:linear-gradient(180deg,transparent,rgba(255,154,106,.95),transparent)}
.steps.vert.live .steps-run i{animation-name:stepRunV}
@keyframes stepRunV{0%{top:-28%;opacity:1}55%{top:100%;opacity:1}55.01%,100%{top:100%;opacity:0}}
.step .node{transition:border-color .3s}
.steps.live .node{animation:nodePing 4.2s linear infinite;animation-delay:var(--ping,9999s)}
@keyframes nodePing{0%{border-color:rgba(226,98,47,.9);box-shadow:0 0 0 6px rgba(226,98,47,.10),0 0 34px -4px rgba(226,98,47,.7)}
  22%,100%{border-color:var(--line-2);box-shadow:0 0 0 6px rgba(255,255,255,.02),0 0 30px -10px rgba(226,98,47,.35)}}
@media (prefers-reduced-motion:reduce){.seg{transition:none}.steps-run{display:none}.steps.live .node{animation:none}}
.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.node{position:relative;width:64px;height:64px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);box-shadow:0 0 0 6px rgba(255,255,255,.02),0 0 30px -10px rgba(226,98,47,.35);display:flex;align-items:center;justify-content:center}
.node svg{width:20px;height:20px}
.node b{position:absolute;top:-5px;right:-5px;width:22px;height:22px;font-size:11px !important;border-radius:50%;background:#f3d9cc;color:var(--or-ink);font-family:var(--f-mono);font-weight:500;font-size:13px;display:flex;align-items:center;justify-content:center}
.step>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.step h3{font-family:var(--f-head);font-weight:600;font-size:20px}
.step p{font-size:14px;color:var(--t2);max-width:270px}
.how-note{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 46px;margin-top:40px;font-size:13px;color:var(--t3)}
.how-note span{position:relative;white-space:nowrap}
.how-note span+span::before{content:"";position:absolute;left:-25px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:rgba(255,255,255,.22)}
.how-note b{font-family:var(--f-mono);font-weight:400;color:var(--t1)}

/* reviews (hidden until REVIEWS has entries) */
.rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.rev{padding:26px;border-radius:18px;background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.rev .stars{color:var(--gold);letter-spacing:3px;font-size:14px}
.rev blockquote{font-size:15px}
.rev figcaption{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--t2)}
.rev figcaption span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--green)}

/* pricing */
.pr{background:radial-gradient(ellipse 50% 40% at 50% 62%,rgba(226,98,47,.1),transparent 70%)}
.plans{display:flex;gap:24px;justify-content:center;margin-top:60px;flex-wrap:wrap}
/* phones and tablets (plans stacked): one card at a time, chosen with a two-part control that shows each plan's key fact */
.pr-seg{display:none}
@media (max-width:940px){
  .pr-pill-row{margin-bottom:22px}
  .pr-seg{position:relative;display:flex;gap:4px;max-width:420px;margin:0 auto;padding:4px;border-radius:18px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
  .pr-seg button{position:relative;z-index:1;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 8px;border:0;border-radius:14px;
    background:none;color:var(--t2);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s ease}
  .pr-seg b{font-size:15px;font-weight:600}
  .pr-seg span{font-size:12px;color:var(--t3);transition:color .3s ease}
  .pr-seg span.tr{color:var(--or)}
  .pr-seg button[aria-checked=true]{color:var(--or-ink)}
  .pr-seg button[aria-checked=true] span{color:#3a1606}
  .pr-seg button:focus-visible{outline:2px solid var(--or);outline-offset:2px}
  .pr-seg-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:14px;background:var(--or);
    box-shadow:0 8px 22px -10px rgba(226,98,47,.7);transition:transform .38s var(--ease)}
  .pr-seg[data-sel=m] .pr-seg-ind{transform:translateX(calc(100% + 4px))}
  .plans{margin-top:34px}
  .plans[data-sel=y] .plan:not(.hot),.plans[data-sel=m] .plan.hot{display:none}
  .plan.swap-in{animation:planIn .42s var(--ease)}
  /* one card on screen: its button is the main action, so it gets the primary style */
  .plans[data-sel=m] .plan:not(.hot) .btn{background:var(--or);color:var(--or-ink);border-color:transparent}
}
@keyframes planIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pr-seg-ind,.pr-seg button,.pr-seg span{transition:none}.plan.swap-in{animation:none}}
.plan{position:relative;width:400px;max-width:100%;padding:40px 36px;border-radius:22px;background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.plan.hot{border-color:rgba(226,98,47,.55);background:linear-gradient(180deg,rgba(226,98,47,.1),var(--s1) 40%)}
.plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;padding:5px 12px;border-radius:999px;background:var(--s2);color:var(--t2);border:1px solid var(--line-2);white-space:nowrap}
.plan.hot .plan-tag{background:var(--or);color:var(--or-ink);border-color:var(--or)}
.plan-name{font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--t2)}
.plan.hot .plan-name{color:var(--or)}
.plan-was{font-size:14px;color:var(--t3)}
.plan-price{font-family:var(--f-head);font-weight:700;font-size:64px;letter-spacing:-.04em;line-height:1}
.plan-price small{font-size:28px}
.plan-price span{font-family:var(--f-body);font-weight:400;font-size:16px;color:var(--t2);letter-spacing:0}
.plan-bill{font-size:14px;color:var(--t2)}
.plan-pr{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.plan-pr>s{font-size:16px;color:var(--t3);text-decoration-thickness:1.5px}
/* the promo pill: one code for both plans */
.pr-pill-row{display:flex;justify-content:center;margin:26px 0 44px}
.pr-pill{position:relative;display:inline-flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:999px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#1d1511,#140f0d) padding-box,linear-gradient(90deg,rgba(226,98,47,.9),rgba(226,98,47,.25) 55%,rgba(255,255,255,.14)) border-box;border:1px solid transparent;
  box-shadow:0 14px 34px -16px rgba(226,98,47,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.pr-pill::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,180,140,.13) 50%,transparent 65%);transform:translateX(-120%);animation:prSheen 7s ease-in-out 1.2s infinite}
/* sheen only runs while the pill is on screen */
.pr-pill.off::after{animation-play-state:paused}
@keyframes prSheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.pr-tic{width:18px;height:18px;color:var(--or);flex:none}
.pr-txt{font-size:15px;color:var(--t2);white-space:nowrap}
.pr-txt b{color:var(--t1);font-weight:600}
.pr-cd{font-family:var(--f-mono);font-size:14px;letter-spacing:.14em;color:var(--or);padding:5px 10px 5px 11px;border-radius:8px;border:1px dashed rgba(226,98,47,.6);background:rgba(226,98,47,.07)}
.pr-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--or);color:var(--or-ink);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;
  transition:background-color .35s ease,color .35s ease,transform .2s var(--ease),box-shadow .25s ease}
.pr-copy:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(226,98,47,.8)}
.pr-copy:active{transform:translateY(0) scale(.97)}
.pr-copy:focus-visible{outline:2px solid var(--or);outline-offset:3px}
/* each state is its own icon + label pair, centred as one unit; both pairs share one slot so the width never changes */
.pc-lab svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ic-copy{transition:opacity .2s ease,transform .3s var(--ease)}
.ic-ok{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s ease .12s}
/* both labels share one slot, so the button never changes width */
.pc-lab{display:inline-grid}
.pc-lab>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:opacity .25s ease,transform .35s var(--ease)}
.pc-b{opacity:0;transform:translateY(70%)}
.pr-copy.ok{background:#2fbf71;color:#06150d;box-shadow:0 8px 22px -10px rgba(47,191,113,.8);cursor:default}
.pr-copy.ok:hover{transform:none}
.pr-copy.ok .ic-copy{opacity:0;transform:scale(.4) rotate(-12deg)}
.pr-copy.ok .ic-ok{stroke-dashoffset:0}
.pr-copy.ok .pc-a{opacity:0;transform:translateY(-70%)}
.pr-copy.ok .pc-b{opacity:1;transform:none}
/* the code capsule glows once so it is clear what went to the clipboard */
.pr-pill.flash .pr-cd{animation:cdFlash .7s ease}
@keyframes cdFlash{0%{background:rgba(226,98,47,.07);box-shadow:0 0 0 0 rgba(226,98,47,0)}35%{background:rgba(226,98,47,.22);box-shadow:0 0 0 4px rgba(226,98,47,.18)}100%{background:rgba(226,98,47,.07);box-shadow:0 0 0 0 rgba(226,98,47,0)}}
.pr-cd{user-select:all}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:560px){.pr-pill{flex-wrap:wrap;justify-content:center;border-radius:20px;padding:12px 14px;gap:10px}.pr-txt{white-space:normal;text-align:center}}
@media (prefers-reduced-motion:reduce){.pr-pill::after,.pr-pill.flash .pr-cd{animation:none}.pr-copy,.pc-lab>span,.ic-copy,.ic-ok{transition:none}}
.plan ul{list-style:none;margin:0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.plan li{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--t2)}
.plan li svg{width:16px;height:16px;color:var(--t3);flex-shrink:0}
.plan.hot li svg{color:var(--or)}
.plan .btn{width:100%}
.pr-note{text-align:center;margin-top:28px}

/* faq */
.faq-list{max-width:1000px;margin:48px auto 0;border-bottom:1px solid var(--line)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:18px;font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary svg{width:20px;height:20px;color:var(--t2);flex-shrink:0;transition:transform .3s var(--ease)}
.faq-list details[open] summary svg{transform:rotate(45deg)}
.faq-list details p{padding:0 0 22px;color:var(--t2);max-width:760px}
.help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1000px;margin:40px auto 0}
.help a{padding:22px;border-radius:16px;background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;transition:border-color .2s}
.help a:hover{border-color:var(--line-3)}
.help .eb{letter-spacing:.16em}
.help b{font-family:var(--f-head);font-weight:600;font-size:18px}
.help span:last-child{font-size:13px;color:var(--t2)}

/* final */
.final{text-align:center;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 100%,rgba(226,98,47,.2),transparent 70%);pointer-events:none}
.final .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px}
.final .h1{font-size:clamp(48px,6.6vw,84px)}
.final p{font-size:18px;color:var(--t2)}

/* footer */
.foot{border-top:1px solid var(--line);padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:2.3fr repeat(4,minmax(0,1fr));gap:40px}
.foot-brand p{margin-top:14px;font-size:14px;color:var(--t2);max-width:300px}
.foot-brand{display:flex;align-items:center;gap:22px}
/* the 3D mark is baked onto the footer colour; a soft edge fade hides any tiny colour shift between browsers */
.foot-mark{position:relative;flex:none;width:135px;height:150px}
.foot-logo{display:block;width:135px;height:150px;background:var(--bg)}
/* the edge fade is drawn on top in the footer colour rather than masked onto the video:
   Safari on iPhone can fail to draw a video that has a CSS mask on it */
.foot-mark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg),transparent 9%,transparent 91%,var(--bg)),linear-gradient(180deg,var(--bg),transparent 9%,transparent 91%,var(--bg))}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col .eb{letter-spacing:.18em;margin-bottom:2px}
.foot-col a{font-size:14px;color:var(--t2);transition:color .2s}
.foot-col a:hover{color:var(--t1)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--t3)}
.foot-bot span:last-child{font-family:var(--f-mono);letter-spacing:.12em}

/* reveal: each block rises, tips up from its bottom edge and comes into focus */
.rv{opacity:0;transform:perspective(1400px) translate3d(0,60px,0) rotateX(8deg) scale(.97);transform-origin:50% 100%;filter:blur(12px);
  transition:opacity 920ms var(--ease-r) var(--d,0ms),transform 1150ms var(--ease-r) var(--d,0ms),filter 1035ms var(--ease-r) var(--d,0ms);will-change:opacity,transform,filter}
.rv.up{transform:perspective(1400px) translate3d(0,-60px,0) rotateX(-8deg) scale(.97);transform-origin:50% 0}
.rv.in{opacity:1;transform:none;filter:none;will-change:auto}
.rv.rst{transition:none}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none}
.progress span{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#7a2e12,var(--or),#ffd9c8);box-shadow:0 0 12px rgba(226,98,47,.6)}

/* responsive */
@media (max-width:1080px){
  .hero-grid,.tk-body{grid-template-columns:1fr}
  .hero-media{max-width:640px}
  .media-tilt{transform:none}
  .rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .nav-links,.nav-cta .btn-g{display:none}
  .nav-menu{display:flex}
  /* the phone menu fills the screen below the bar and scrolls on its own, so every page is reachable */
  .nav-drawer.open{display:block;position:fixed;z-index:49;left:0;right:0;top:var(--nav-b,72px);bottom:0;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--pad) 32px;background:var(--bg);border-top:1px solid var(--line)}
  /* three dropdown groups, one open at a time; each group's height animates open and closed */
  .nd-sec{border-bottom:1px solid var(--line)}
  .nd-hd{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:58px;padding:0;border:0;background:none;color:var(--t1);font:inherit;font-size:19px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s}
  .nd-hd svg{width:16px;height:16px;fill:none;stroke:var(--t3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease),stroke .25s}
  .nd-sec.open .nd-hd{color:var(--or)}
  .nd-sec.open .nd-hd svg{transform:rotate(180deg);stroke:var(--or)}
  .nd-hd:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:6px}
  .nd-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
  .nd-sec.open .nd-bd{grid-template-rows:1fr}
  .nd-in{overflow:hidden;visibility:hidden;transition:visibility 0s linear .32s}
  .nd-sec.open .nd-in{visibility:visible;transition:visibility 0s}   /* closed groups cannot be tabbed into */
  .nd-in>div{padding:0 0 14px}
  .nav-drawer .nd-in a{display:flex;align-items:center;gap:12px;min-height:46px;font-size:16px;color:var(--t2);transition:color .2s}
  .nav-drawer .nd-in a:active{color:var(--t1)}
  .nd-ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(226,98,47,.32);background:rgba(226,98,47,.07);color:var(--or)}
  .nd-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .nd-arr{flex:none;width:30px;text-align:center;color:var(--t3);font-size:18px}
  .nd-social{display:flex;gap:8px;margin-top:20px}
  .nd-social a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:999px;border:1px solid var(--line-2);font-size:15px;color:var(--t1)}
  .nd-social a i{font-style:normal;color:var(--t3)}
  .nav-drawer .nd-cta{display:flex;width:100%;margin-top:14px}
  @media (prefers-reduced-motion:reduce){.nd-bd,.nd-hd svg{transition:none}}

  .why-grid,.steps,.help{grid-template-columns:1fr}
  .how-note{flex-direction:column;align-items:center;gap:8px}
  .how-note span+span::before{display:none}
  .step{flex-direction:row;align-items:flex-start;text-align:left;gap:20px}
  .step>div{align-items:flex-start;gap:6px}
  .step h3{margin-top:0}
  .node{flex-shrink:0}
  .mq{margin-top:64px}
  .tk-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:0 var(--pad) 4px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .tk-tabs::-webkit-scrollbar{display:none}
  .tk-tab{flex-shrink:0}
  /* phones: the visual sits directly under the tabs so a tap shows its effect straight away */
  .tk-body .tk-media{order:-1}
  .tk-body{gap:34px}
  /* compact why cards: icon beside the text */
  .why-grid{gap:12px}
  .why-grid .card{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:20px 22px;align-items:start}
  .why-grid .card .ic{grid-row:1/3}
  .why-grid .card h3{font-size:18px;line-height:1.3;padding-top:9px}
  .why-grid .card p{margin:0}
  /* PnL cards: a shorter stage, without the empty space */
  .swoop{height:400px}
  .fin-note{font-family:var(--f-body);text-transform:none;letter-spacing:.01em;font-size:13px;line-height:1.5;max-width:300px}
}
/* touch screens: comfortable tap targets, same look */
@media (pointer:coarse){
  .btn-sm{height:44px}
  .tk-tab{min-height:44px}
  .pr-copy{height:44px;padding:0 18px}
  .foot-col{gap:0}
  .foot-col a{padding:11px 0}
  .foot-col .eb{margin-bottom:6px}
  .snd::before{content:"";position:absolute;inset:-8px;border-radius:50%}
  .logo{position:relative}
  .logo::after{content:"";position:absolute;left:-6px;right:-6px;top:-7px;bottom:-7px}
}
@media (max-width:560px){
  .nav-cta .btn-p svg{display:none}
  .nav-cta .btn-p{padding:0 14px}
  .hero-btns .btn{flex:1 1 100%}
  .mini{gap:16px}
  .rev-grid{grid-template-columns:1fr}
  .plan{padding:34px 26px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (hover:none){.swoop-hint .h{display:none}}
@media (hover:hover){.swoop-hint .t{display:none}}
@media (prefers-reduced-motion:reduce){
  .swoop-hint{display:none}
  html{scroll-behavior:auto}
  .mq-track ul{animation:none}
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .media-tilt,.tk-copy,.rcard{transition:none}
}