:root{
  --ink:#08090B; --ink2:#101216; --ink3:#171A20;
  --paper:#F4F1EA; --paper2:#EAE6DC;
  --y:#FFD900;--yt:#FFD900; --b:#0033A4; --g:#009B00; --m:#00FF88;
  --mut:rgba(var(--fg),.52); --mut2:rgba(var(--fg),.32);
  --f:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --fg:255,255,255; --fgc:#fff; --bgc:8,9,11; --inv:invert(1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--f);background:var(--ink);color:var(--fgc);overflow-x:hidden;line-height:1.5}
::selection{background:var(--y);color:#000}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
img{display:block;max-width:100%}
.grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{width:min(1320px,92vw);margin:0 auto;position:relative;z-index:3}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.02}
.d1{font-size:clamp(40px,min(7.4vw,10vh),118px);line-height:1.02}
.d2{font-size:clamp(36px,5.6vw,86px);line-height:1}
.d3{font-size:clamp(24px,2.6vw,40px);line-height:1.06}
.lede{font-size:clamp(16px,1.35vw,20px);line-height:1.62;color:var(--mut);font-weight:500;max-width:56ch}
.wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.kin .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.kin .w i{display:inline-block;font-style:inherit;transform:translateY(115%);transition:transform 1s var(--ease)}
.kin.in .w i{transform:none}
.kin .w:nth-child(2) i{transition-delay:.06s}.kin .w:nth-child(3) i{transition-delay:.12s}.kin .w:nth-child(4) i{transition-delay:.18s}.kin .w:nth-child(5) i{transition-delay:.24s}.kin .w:nth-child(6) i{transition-delay:.3s}.kin .w:nth-child(7) i{transition-delay:.36s}.kin .w:nth-child(8) i{transition-delay:.42s}.kin .w:nth-child(n+9) i{transition-delay:.48s}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:600;padding:20px 0;transition:.4s var(--ease)}
.nav.s{padding:12px 0;background:rgba(var(--bgc),.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(var(--fg),.07)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.16em;font-size:13px;flex:none}
.brand svg{width:24px;height:24px;fill:var(--fgc)}
.navl{display:flex;gap:4px;align-items:center}
.navl a{font-size:13px;font-weight:700;padding:9px 14px;border-radius:100px;color:var(--mut);transition:.25s var(--ease);white-space:nowrap}
.navl a:hover,.navl a.on{color:var(--fgc);background:rgba(var(--fg),.06)}

.dd{position:relative}
.ddb{font:inherit;font-size:13px;font-weight:700;padding:9px 12px 9px 14px;border-radius:100px;color:var(--mut);background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.25s var(--ease);white-space:nowrap}
.ddb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:.3s var(--ease)}
.dd:hover .ddb,.dd.open .ddb,.dd.on .ddb{color:var(--fgc);background:rgba(var(--fg),.06)}
.dd.open .ddb svg{transform:rotate(180deg)}
.ddm{position:absolute;top:calc(100% + 12px);left:0;min-width:300px;background:var(--ink2);border:1px solid rgba(var(--fg),.1);border-radius:20px;padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.3s var(--ease);z-index:700}
.ddm::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.dd.open .ddm{opacity:1;visibility:visible;transform:none}
.ddm a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;transition:.25s var(--ease)}
.ddm a b{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--fgc)}
.ddm a span{font-size:12px;font-weight:600;color:var(--mut2)}
.ddm a:hover,.ddm a.on{background:rgba(var(--fg),.06)}
.ddm a:hover b{color:var(--yt)}
html.light .ddm{box-shadow:0 30px 60px -20px rgba(0,0,0,.25)}
.navr{display:flex;align-items:center;gap:10px}
.chip{font-size:12.5px;font-weight:700;padding:11px 20px;border-radius:100px;border:1px solid rgba(var(--fg),.28);transition:.3s var(--ease)}
.chip:hover{background:var(--fgc);color:var(--ink);border-color:var(--fgc)}
.chip.solid{background:var(--y);color:#000;border-color:var(--y)}
.chip.solid:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(255,217,0,.6)}
.tgl{width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--fg),.28);background:none;color:var(--fgc);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:.3s var(--ease)}
.tgl:hover{border-color:var(--y);color:var(--yt)}
.tgl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tgl .sun{display:none}
html.light .tgl .sun{display:block}html.light .tgl .moon{display:none}
@media (max-width:1100px){.navl{display:none}}
.chip{white-space:nowrap}
.big{display:inline-flex;align-items:center;gap:10px;padding:19px 34px;border-radius:100px;background:var(--y);color:#000;font-weight:800;font-size:16px;position:relative;overflow:hidden;transition:.4s var(--ease)}
.big:hover{transform:translateY(-3px);box-shadow:0 20px 44px -16px rgba(255,217,0,.7);color:#000}
.big::after{content:"";position:absolute;inset:0;left:-70%;width:44%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);transition:left .7s}
.big:hover::after{left:130%}
.ghost{display:inline-flex;align-items:center;gap:10px;padding:19px 32px;border-radius:100px;border:1px solid rgba(var(--fg),.3);font-weight:700;font-size:15px;transition:.35s var(--ease)}
.ghost:hover{border-color:var(--y);color:var(--yt);transform:translateY(-3px)}
.hero{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(1100px 620px at 78% 18%,rgba(0,51,164,.30),transparent 62%),radial-gradient(760px 520px at 10% 82%,rgba(255,217,0,.10),transparent 66%)}
.eyeb{display:inline-flex;align-items:center;gap:10px;color:var(--yt);margin-bottom:28px;font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.eyeb i{width:6px;height:6px;border-radius:50%;background:var(--y);animation:bl 2.4s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
.hero-b{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:38px}
.herofine{font-size:12.5px;color:var(--mut2);font-weight:600;margin-top:14px}
.tick{display:flex;gap:56px;flex-wrap:wrap;border-top:1px solid rgba(var(--fg),.1);padding-top:26px;margin-top:56px}
.tick div b{display:block;font-size:clamp(26px,3vw,44px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.tick div span{font-size:11.5px;color:var(--mut2);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tick div:nth-child(1) b{color:var(--yt)}.tick div:nth-child(3) b{color:var(--m)}
.sec{padding:clamp(90px,11vw,168px) 0}
.sec.tight{padding:clamp(60px,7vw,110px) 0}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,84px)}
.num{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--yt);text-transform:uppercase}
.rule{height:1px;background:rgba(var(--fg),.1);margin:18px 0 26px}
.card{background:var(--ink2);border:1px solid rgba(var(--fg),.08);border-radius:26px;padding:clamp(26px,2.8vw,40px);transition:.45s var(--ease);position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:rgba(255,217,0,.45)}
.card h3{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.025em;margin-top:18px}
.card p{font-size:15px;line-height:1.6;color:var(--mut);font-weight:500;margin-top:10px}
.ico{width:52px;height:52px;border-radius:16px;background:rgba(255,217,0,.1);border:1px solid rgba(255,217,0,.25);display:flex;align-items:center;justify-content:center;color:var(--yt)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,80px);align-items:center}
.cta{position:relative;padding:clamp(100px,13vw,190px) 0;text-align:center;overflow:hidden}
.cta::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;top:-450px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,217,0,.12),transparent 62%)}
.ctab{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.faq{display:flex;flex-direction:column;border-top:1px solid rgba(var(--fg),.1)}
.faq details{border-bottom:1px solid rgba(var(--fg),.1)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-size:clamp(17px,1.45vw,22px);font-weight:800;letter-spacing:-.02em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--yt)}
.faq summary i{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--fg),.2);display:flex;align-items:center;justify-content:center;transition:.4s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;width:12px;height:1.6px;background:currentColor;border-radius:2px}
.faq summary i::after{transform:rotate(90deg);transition:.4s var(--ease)}
.faq summary i{position:relative}
.faq details[open] summary i{background:var(--y);border-color:var(--y);color:#000;transform:rotate(180deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{padding:0 60px 30px 0;font-size:16px;line-height:1.7;color:var(--mut);font-weight:500;max-width:72ch}
.faq .a p+p,.faq .a ul{margin-top:12px}
.faq .a ul{padding-left:20px}
footer{border-top:1px solid rgba(var(--fg),.08);padding:clamp(60px,7vw,96px) 0 40px;font-size:13.5px;color:var(--mut);font-weight:600;position:relative;z-index:3}
.ft{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px}
@media (max-width:980px){.ft{grid-template-columns:1fr 1fr}.ft .ftb{grid-column:1/-1}}
.ft .ftb p{margin-top:18px;max-width:34ch;line-height:1.6}
.ft h5{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fgc);margin-bottom:18px}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ft a{transition:.25s}
.ft a:hover{color:var(--yt)}
.ftsoc{display:flex;gap:10px;margin-top:22px}
.ftsoc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--fg),.2);display:flex;align-items:center;justify-content:center;color:var(--fgc)}
.ftsoc a:hover{border-color:var(--y);color:var(--yt)}
.ftsoc svg{width:16px;height:16px;fill:currentColor}
.ftlow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid rgba(var(--fg),.08);font-size:12px;color:var(--mut2)}
.ftlow ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap}
html.light .tgl .sun{display:block} html.light .tgl .moon{display:none}
html.light{--yt:#6E5300;--mt:#006B00;--ink:#F6F4EE;--ink2:#FFFFFF;--ink3:#ECE9E1;--fg:8,9,11;--fgc:#08090B;--bgc:246,244,238;--mut:rgba(8,9,11,.68);--mut2:rgba(8,9,11,.58);--m:#007A00;--inv:none}
html.light body{color:#08090B}
html.light .grain{opacity:.03}
html.light .cursor{background:radial-gradient(circle,rgba(0,51,164,.05),transparent 68%)}
html.light .rcard-tag{background:rgba(255,255,255,.85);color:#000;backdrop-filter:none}
html.light .cta::before{background:radial-gradient(circle,rgba(255,217,0,.22),transparent 62%)}
html.light .chip:hover{background:#08090B;color:#fff}

/* ---------- why it works ---------- */
.why{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.why h2{font-size:clamp(30px,3.4vw,52px);letter-spacing:-.035em;line-height:1.04;max-width:16ch}
.why h2 em{font-style:normal;color:var(--yt)}
.why p{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--mut);font-weight:500;max-width:52ch;margin-top:22px}
.why .hero-b{margin-top:34px}
.hats{position:relative;display:grid;gap:12px}
.hat{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;border:1px solid rgba(var(--fg),.1);background:rgba(var(--fg),.025);font-weight:700;font-size:15px;transition:.6s var(--ease);opacity:.85}
.hat i{width:9px;height:9px;border-radius:50%;background:rgba(var(--fg),.28);flex:none;transition:.5s}
.hat small{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}
.hats.on .hat.x{opacity:.32;transform:translateX(-6px)}
.hats.on .hat.x i{background:transparent;border:1.5px solid rgba(var(--fg),.3)}
.hat.d{background:var(--y);color:#000;border-color:var(--y);opacity:1;font-size:16px;padding:20px 22px;box-shadow:0 24px 60px -24px rgba(255,217,0,.55)}
.hat.d i{background:#000}
.hat.d small{color:rgba(0,0,0,.55)}
.hats.on .hat.d{transform:translateX(8px) scale(1.02)}
.hats.on .hat:nth-child(1){transition-delay:.05s}.hats.on .hat:nth-child(2){transition-delay:.12s}.hats.on .hat:nth-child(3){transition-delay:.19s}.hats.on .hat:nth-child(4){transition-delay:.26s}.hats.on .hat:nth-child(5){transition-delay:.33s}.hats.on .hat:nth-child(6){transition-delay:.45s}
.why .swap{margin-top:30px;display:inline-flex}
.wrap.why{display:grid}
.hat{white-space:nowrap}
.hat small{white-space:nowrap}
@media (max-width:900px){.why{grid-template-columns:1fr}}


.lhero{position:relative;padding:170px 0 0;overflow:hidden}
.lhero .hero-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(900px 520px at 85% 10%,rgba(0,51,164,.26),transparent 62%)}
.lhero .wrap{position:relative;z-index:3}
.ltabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:60px}
.ltabs a{font-size:12.5px;font-weight:700;padding:10px 18px;border-radius:100px;border:1px solid rgba(var(--fg),.16);color:var(--mut);transition:.3s var(--ease)}
.ltabs a:hover{border-color:rgba(var(--fg),.5);color:var(--fgc)}
.ltabs a.on{background:var(--fgc);color:var(--ink);border-color:var(--fgc)}
.lhead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:end;padding-bottom:56px;border-bottom:1px solid rgba(var(--fg),.12)}
.lhead h1{font-size:clamp(46px,7.2vw,116px);letter-spacing:-.045em;line-height:.96}
.lhead h1 em{font-style:italic;color:var(--yt)}
.ldek{font-size:clamp(17px,1.45vw,22px);line-height:1.5;color:var(--mut);font-weight:500;max-width:34ch}
.lmeta{display:grid;grid-template-columns:repeat(3,auto);gap:32px;padding:26px 0;border-bottom:1px solid rgba(var(--fg),.12);font-size:12.5px;font-weight:700}
.lmeta span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.lmeta a{color:var(--yt)}
.lwrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(40px,6vw,110px);padding:72px 0 120px;align-items:start}
.ltoc{position:sticky;top:110px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 140px);overflow:auto;padding-right:6px;scrollbar-width:none}
.ltoc::-webkit-scrollbar{display:none}
.ltoc .num{margin-bottom:14px}
.ltoc a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:9px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--mut);line-height:1.35;transition:.25s}
.ltoc a i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--mut2);font-weight:800;font-size:11.5px;padding-top:2px}
.ltoc a:hover{color:var(--fgc);background:rgba(var(--fg),.04)}
.ltoc a.on{color:var(--fgc);background:rgba(255,217,0,.09)}
.ltoc a.on i{color:var(--yt)}
.lart{max-width:760px;font-size:17px;line-height:1.72;color:rgba(var(--fg),.78)}
.lart p{margin:0 0 20px}
.lart p.lead{font-size:clamp(19px,1.5vw,23px);line-height:1.55;color:var(--fgc);font-weight:500}
.lart .lintro p.lead::first-letter{float:left;font-size:4.6em;line-height:.78;font-weight:800;padding:8px 14px 0 0;color:var(--yt);letter-spacing:-.04em}
.lart .lintro{padding-bottom:36px}
.lsec{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 24px;padding:56px 0 20px;border-top:1px solid rgba(var(--fg),.1)}
.lnum span{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--yt);padding-top:10px;font-variant-numeric:tabular-nums}
.lbody h2{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;line-height:1.08;color:var(--fgc);margin:0 0 26px}
.lbody h3{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--fgc);margin:36px 0 14px}
.lart ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.lart li{position:relative;padding-left:26px}
.lart li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--y)}
.lart a{color:var(--fgc);text-decoration:underline;text-decoration-color:rgba(255,217,0,.6);text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:600}
.lart a:hover{text-decoration-color:var(--yt)}
.lart strong{color:var(--fgc)}
.short{position:relative;margin:0 0 26px;padding:22px 26px 22px 30px;border-radius:18px;background:rgba(255,217,0,.07);border:1px solid rgba(255,217,0,.18);font-size:16px;line-height:1.6;color:var(--fgc);font-weight:500}
.short::before{content:"In short";display:block;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--yt);margin-bottom:8px}
.addr{font-size:15px;line-height:1.7;padding:18px 22px;border-left:2px solid var(--y);color:var(--fgc);display:inline-block}
.tbl{overflow:auto;margin:6px 0 26px;border:1px solid rgba(var(--fg),.1);border-radius:16px}
.tbl table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);padding:14px 18px;border-bottom:1px solid rgba(var(--fg),.1);background:rgba(var(--fg),.03)}
.tbl td{padding:14px 18px;border-bottom:1px solid rgba(var(--fg),.06);vertical-align:top;color:rgba(var(--fg),.78)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--fgc);font-weight:700;min-width:180px}
.tbl td.yn{font-weight:800;font-size:11px;letter-spacing:.12em;white-space:nowrap}
.tbl td.yn.y{color:var(--m)}.tbl td.yn.n{color:var(--mut2)}
.lnext{border-top:1px solid rgba(var(--fg),.1);padding:60px 0 100px}
.lnext .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:28px}
.lnext a.card{display:flex;flex-direction:column;gap:10px;min-height:150px}
.lnext a.card small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
.lnext a.card b{font-size:22px;letter-spacing:-.02em;line-height:1.1}
.lnext a.card span{margin-top:auto;font-size:13px;font-weight:700;color:var(--yt);display:flex;align-items:center;gap:6px}
.lprog{position:fixed;top:0;left:0;height:2px;background:var(--y);width:0;z-index:700;transition:width .1s linear}
@media (max-width:980px){.lhead{grid-template-columns:1fr}.lwrap{grid-template-columns:1fr}.ltoc{position:static;max-height:none;flex-direction:row;flex-wrap:wrap}.ltoc .num{width:100%}.lsec{grid-template-columns:1fr}.lnum span{padding:0 0 10px}}

.wrap.lwrap{display:grid}
.lhead{display:grid}
.lart .lsec{display:grid}
.lhero .kin .w:last-child i{font-style:italic;color:var(--yt)}

/* ========================================================================
   FINAL FIX: prevent ALL kinetic legal-heading words from clipping
   ------------------------------------------------------------------------
   Every animated word is wrapped by .kin .w and that wrapper uses
   overflow:hidden for the reveal mask. Large glyphs can slightly overhang
   their inline box (even non-italic letters such as the final "s" in Terms),
   so the edge can be clipped.

   We add invisible breathing room INSIDE every word wrapper and cancel the
   added layout width with matching negative margins. The visual spacing and
   animation stay the same, but glyph edges are no longer cut.
   ======================================================================== */
.lhero .kin .w{
  padding-right:.16em!important;
  margin-right:-.16em!important;
  padding-left:.035em!important;
  margin-left:-.035em!important;
}

/* The final highlighted/italic word needs a little more right-side room. */
.lhero .kin .w:last-child{
  padding-right:.22em!important;
  margin-right:-.22em!important;
}

/* Prevent a pre-JS flash of the unwrapped heading.
   legal.js adds data-dishio-kin-ready immediately when it prepares the title. */
.lhero .kin:not([data-dishio-kin-ready="1"]){
  visibility:hidden;
}

.lhero .kin[data-dishio-kin-ready="1"]{
  visibility:visible;
}

@media (max-width:980px){.wrap.lwrap{grid-template-columns:1fr}}
html.light .stg .chip{color:#6E5300;background:rgba(255,217,0,.28)}
html.light .row .tag{color:#6E5300;background:rgba(255,217,0,.22)}
html.light .row .tag.m{color:#006B00;background:rgba(0,155,0,.12)}
html.light .row .tag.m,html.light .tag.m{color:#006B00}
html.light .stage .sk{color:#6E5300}
html.light .sn{color:rgba(8,9,11,.14)}
html.light .hat.d small,html.light .hat.d{color:rgba(0,0,0,.78)}
html.light .row .av.g,html.light .pin.m>span,html.light .sd:nth-child(even) span,html.light [style*="background:var(--m)"]{color:#fff}

/* ========================================================================
   WordPress / Elementor legal-page compatibility
   ------------------------------------------------------------------------
   The original standalone Dishio legal pages rely on native position:sticky
   for the left Contents rail. Elementor/site wrappers can silently break
   sticky when an ancestor creates an overflow/contain context. These rules
   remove that interference only on the four legal pages.
   ======================================================================== */

:is(
  body.dishio-page-privacy-policy,
  body.dishio-page-dishio-terms-of-use,
  body.dishio-page-cookie-policy,
  body.dishio-page-acceptable-use-policy
){
  /* clip prevents horizontal spill without creating a vertical scroll box */
  overflow-x:clip!important;
}

:is(
  body.dishio-page-privacy-policy,
  body.dishio-page-dishio-terms-of-use,
  body.dishio-page-cookie-policy,
  body.dishio-page-acceptable-use-policy
) :is(
  #content,
  #primary,
  #main,
  .site-main,
  .page-content,
  article.page,
  .elementor[data-elementor-type="wp-page"],
  .elementor[data-elementor-type="wp-page"] .e-con,
  .elementor[data-elementor-type="wp-page"] .e-con-inner,
  .elementor[data-elementor-type="wp-page"] .elementor-widget,
  .elementor[data-elementor-type="wp-page"] .elementor-widget-container
){
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  contain:none!important;
}

/* Keep the standalone prototype's sticky geometry exactly intact. */
.wrap.lwrap{
  position:relative;
  align-items:start;
}

@media (min-width:981px){
  .ltoc{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:110px!important;
    align-self:start!important;
    height:max-content;
    max-height:calc(100vh - 140px);
    overflow:auto;
    z-index:20;
  }
}

/* Smooth anchor jumps never disappear underneath the Theme Builder header. */
.lsec{
  scroll-margin-top:120px;
}

@media (max-width:980px){
  .ltoc{
    position:static!important;
    top:auto!important;
    height:auto;
    max-height:none;
    overflow:visible;
  }
}

/* ==========================================================================
   LEGAL PAGES — COMPLETE TABLET / MOBILE RESPONSIVE OVERRIDES
   Applies to:
   - Privacy Policy
   - Terms of Use
   - Cookie Policy
   - Acceptable Use Policy

   Desktop styling above remains unchanged.
   ========================================================================== */

/* ---------- tablet / narrow desktop ---------- */
@media (max-width: 980px){

  /* page shell */
  .lhero{
    padding-top:130px;
  }

  .lhero .wrap,
  .wrap.lwrap,
  .lnext .wrap{
    width:min(100% - 40px,1320px);
  }

  /* legal document tabs */
  .ltabs{
    margin-bottom:42px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .ltabs::-webkit-scrollbar{
    display:none;
  }

  .ltabs a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* legal hero */
  .lhead{
    grid-template-columns:1fr;
    gap:24px;
    padding-bottom:42px;
  }

  .lhead h1{
    max-width:100%;
    font-size:clamp(48px,9vw,82px);
  }

  .ldek{
    max-width:58ch;
  }

  .lmeta{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }

  .lmeta > div{
    min-width:0;
  }

  .lmeta a{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* article layout */
  .wrap.lwrap,
  .lwrap{
    grid-template-columns:1fr;
    gap:34px;
    padding-top:48px;
    padding-bottom:88px;
  }

  .lart{
    max-width:none;
    width:100%;
  }

  /* contents rail becomes a horizontal document navigator */
  .ltoc{
    position:static!important;
    top:auto!important;
    width:100%;
    max-width:100%;
    height:auto!important;
    max-height:none!important;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:8px;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 12px;
    margin:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .ltoc::-webkit-scrollbar{
    display:none;
  }

  .ltoc .num{
    flex:0 0 auto;
    width:auto;
    min-width:max-content;
    margin:0;
    padding:10px 10px 10px 0;
    display:flex;
    align-items:center;
  }

  .ltoc a{
    flex:0 0 auto;
    width:min(260px,72vw);
    min-height:54px;
    align-items:start;
    padding:10px 12px;
    border:1px solid rgba(var(--fg),.08);
    background:rgba(var(--fg),.025);
  }

  .ltoc a.on{
    border-color:rgba(255,217,0,.28);
  }

  /* numbered legal sections */
  .lsec{
    grid-template-columns:1fr;
    gap:0;
    padding:48px 0 18px;
  }

  .lnum span{
    padding:0 0 12px;
  }

  /* "why it works" if present on legal templates */
  .why,
  .wrap.why{
    grid-template-columns:1fr;
  }

  .hat{
    white-space:normal;
  }

  .hat small{
    white-space:normal;
    text-align:right;
  }

  /* next-document cards */
  .lnext{
    padding:52px 0 80px;
  }

  .lnext .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* footer */
  .ft{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 24px;
  }

  .ft .ftb{
    grid-column:1/-1;
  }
}


/* ---------- phones ---------- */
@media (max-width: 720px){

  .lhero{
    padding-top:106px;
  }

  .lhero .wrap,
  .wrap.lwrap,
  .lnext .wrap{
    width:min(100% - 32px,1320px);
  }

  /* top legal tabs */
  .ltabs{
    gap:7px;
    margin-bottom:32px;
    margin-left:-2px;
    margin-right:-2px;
  }

  .ltabs a{
    font-size:11.5px;
    padding:9px 14px;
  }

  /* hero heading and description */
  .lhead{
    gap:20px;
    padding-bottom:34px;
  }

  .lhead h1{
    font-size:clamp(40px,12vw,62px);
    line-height:.98;
    letter-spacing:-.04em;
    overflow-wrap:normal;
  }

  .ldek{
    max-width:none;
    font-size:16px;
    line-height:1.58;
  }

  /* meta information */
  .lmeta{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    padding:0;
  }

  .lmeta > div{
    padding:18px 0;
    border-bottom:1px solid rgba(var(--fg),.08);
  }

  .lmeta > div:nth-child(odd){
    padding-right:14px;
  }

  .lmeta > div:nth-child(even){
    padding-left:14px;
    border-left:1px solid rgba(var(--fg),.08);
  }

  .lmeta > div:last-child:nth-child(odd){
    grid-column:1/-1;
    padding-right:0;
  }

  .lmeta span{
    font-size:9.5px;
    letter-spacing:.12em;
    margin-bottom:5px;
  }

  /* main legal content */
  .wrap.lwrap,
  .lwrap{
    gap:26px;
    padding-top:34px;
    padding-bottom:70px;
  }

  .ltoc{
    gap:7px;
    margin-left:-2px;
    margin-right:-2px;
    width:calc(100% + 4px);
    padding-bottom:10px;
  }

  .ltoc .num{
    font-size:10px;
    padding-right:8px;
  }

  .ltoc a{
    width:min(238px,76vw);
    min-height:50px;
    grid-template-columns:24px minmax(0,1fr);
    gap:7px;
    padding:9px 10px;
    font-size:12px;
    border-radius:9px;
  }

  .ltoc a i{
    font-size:10.5px;
  }

  .lart{
    font-size:15.5px;
    line-height:1.7;
  }

  .lart p{
    margin-bottom:18px;
  }

  .lart p.lead{
    font-size:18px;
    line-height:1.58;
  }

  .lart .lintro{
    padding-bottom:26px;
  }

  .lart .lintro p.lead::first-letter{
    font-size:3.7em;
    line-height:.82;
    padding:6px 10px 0 0;
  }

  .lsec{
    padding:40px 0 14px;
    scroll-margin-top:88px;
  }

  .lnum span{
    font-size:11.5px;
    padding-bottom:10px;
  }

  .lbody h2{
    font-size:clamp(25px,7.5vw,34px);
    line-height:1.12;
    margin-bottom:20px;
    overflow-wrap:anywhere;
  }

  .lbody h3{
    font-size:17px;
    line-height:1.25;
    margin:30px 0 12px;
  }

  .lart ul{
    gap:9px;
    margin-bottom:20px;
  }

  .lart li{
    padding-left:22px;
  }

  .lart li::before{
    width:10px;
  }

  /* prevent long legal / API URLs from breaking the viewport */
  .lart a,
  .addr,
  .lbody,
  .lintro{
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* summary callouts */
  .short{
    margin-bottom:22px;
    padding:18px 18px 18px 20px;
    border-radius:14px;
    font-size:14.5px;
    line-height:1.6;
  }

  .short::before{
    font-size:9.5px;
    letter-spacing:.15em;
  }

  .addr{
    display:block;
    width:100%;
    padding:15px 16px;
    font-size:14px;
  }

  /* tables scroll instead of stretching the page */
  .tbl{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:12px;
    margin-bottom:22px;
  }

  .tbl table{
    min-width:620px;
    font-size:13px;
  }

  .tbl th,
  .tbl td{
    padding:12px 14px;
  }

  .tbl td:first-child{
    min-width:160px;
  }

  /* next legal docs */
  .lnext{
    padding:46px 0 68px;
  }

  .lnext .grid{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:22px;
  }

  .lnext a.card{
    min-height:128px;
    padding:22px;
  }

  .lnext a.card b{
    font-size:20px;
  }

  /* optional why section */
  .why{
    gap:30px;
  }

  .why h2{
    max-width:none;
    font-size:clamp(30px,9vw,42px);
  }

  .why p{
    font-size:15px;
  }

  .hat{
    gap:10px;
    padding:14px 14px;
    font-size:13.5px;
  }

  .hat.d{
    padding:16px;
    font-size:14px;
  }

  .hats.on .hat.d{
    transform:none;
  }

  /* footer */
  footer{
    padding-top:56px;
  }

  .ft{
    grid-template-columns:1fr;
    gap:30px;
  }

  .ft .ftb{
    grid-column:auto;
  }

  .ftlow{
    align-items:flex-start;
    flex-direction:column;
  }

  .ftlow ul{
    gap:12px 18px;
  }
}


/* ---------- small phones ---------- */
@media (max-width: 480px){

  .lhero{
    padding-top:96px;
  }

  .lhero .wrap,
  .wrap.lwrap,
  .lnext .wrap{
    width:min(100% - 26px,1320px);
  }

  .ltabs{
    margin-bottom:28px;
  }

  .ltabs a{
    font-size:11px;
    padding:8px 12px;
  }

  .lhead{
    padding-bottom:28px;
  }

  .lhead h1{
    font-size:clamp(36px,12.4vw,52px);
  }

  .ldek{
    font-size:15px;
  }

  /* stack legal meta cleanly on very small screens */
  .lmeta{
    grid-template-columns:1fr;
  }

  .lmeta > div,
  .lmeta > div:nth-child(odd),
  .lmeta > div:nth-child(even),
  .lmeta > div:last-child:nth-child(odd){
    grid-column:auto;
    padding:14px 0;
    border-left:0;
    border-bottom:1px solid rgba(var(--fg),.08);
  }

  .lmeta > div:last-child{
    border-bottom:0;
  }

  .wrap.lwrap,
  .lwrap{
    padding-top:28px;
    padding-bottom:60px;
  }

  .ltoc a{
    width:min(220px,80vw);
  }

  .lart{
    font-size:15px;
    line-height:1.68;
  }

  .lart p.lead{
    font-size:17px;
  }

  .lbody h2{
    font-size:clamp(24px,8vw,31px);
  }

  .lbody h3{
    font-size:16.5px;
  }

  .short{
    padding:16px;
  }

  .tbl table{
    min-width:560px;
  }

  .lnext a.card{
    min-height:118px;
    border-radius:20px;
  }
}


/* ---------- defensive overflow / touch fixes for all four legal pages ---------- */
@media (max-width: 980px){

  :is(
    body.dishio-page-privacy-policy,
    body.dishio-page-dishio-terms-of-use,
    body.dishio-page-cookie-policy,
    body.dishio-page-acceptable-use-policy
  ){
    overflow-x:hidden!important;
  }

  :is(
    body.dishio-page-privacy-policy,
    body.dishio-page-dishio-terms-of-use,
    body.dishio-page-cookie-policy,
    body.dishio-page-acceptable-use-policy
  ) :is(
    .lhero,
    .lhero .wrap,
    .lhead,
    .lmeta,
    .lwrap,
    .ltoc,
    .lart,
    .lsec,
    .lbody,
    .short,
    .lnext,
    .lnext .grid
  ){
    min-width:0;
    max-width:100%;
  }

  .lprog{
    max-width:100vw;
  }
}