/* earnforviews "Night" design system (Oct 2026).
   Source of truth: design/redesign-2026-10/efv-night.html. One accent (orange),
   near-black violet ground, hairline borders. Instrument Serif is for H1s and
   final call-to-action headlines only; Geist for everything else.
   Fonts are loaded per page from Google Fonts:
   https://fonts.googleapis.com/css2?family=Geist:wght@400..600&family=Instrument+Serif&display=swap
   Shared chrome (nav, footer) is written by scripts/build-content.py; the
   nav's scroll state, mobile menu and signed-in chip are run by assets/nav.js. */

:root{
  --bg:#0C0A11;
  --panel:#121017;
  --panel-2:#17141D;
  --fg:#F2F0F5;
  --fg-2:#B9B4C4;
  --fg-3:#8C8698;
  --line:rgba(236,232,246,.08);
  --line-2:rgba(236,232,246,.14);
  --line-3:rgba(236,232,246,.24);
  --orange:#FF5C1A;
  --orange-btn:#E8500F;
  --btn:#C4420B;
  --btn-hover:#CF470D;
  --ink:#120D0A;
  --green:#14BE66;
  --serif:"Instrument Serif","Instrument Serif Fallback",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1200px;
  --art:720px;
  --gut:clamp(16px,4vw,32px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
/* Type scale. Text: 12 / 13 / 14 / 16 / 18 / 20. Numerals: 32 / 40 / 80. Display heads are fluid. */

/* While Instrument Serif loads, Times New Roman is scaled to its width and
   line metrics (measured in Chrome), so serif headlines wrap the same way
   before and after the swap and the page does not jump. */
@font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT");size-adjust:82.28%;ascent-override:120.32%;descent-override:37.68%;line-gap-override:0%}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(255,92,26,.32);color:#fff}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.num{font-variant-numeric:tabular-nums}
.acc{color:var(--orange)}
.got{color:var(--green)}
.sc{font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.tag{display:inline-block;flex:none;font-size:12px;line-height:1;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);padding-bottom:3px;border-bottom:1px solid var(--line-3);white-space:nowrap}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* ---------- Buttons: one spec, three sizes, two fills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:16px;border:1px solid transparent;font:550 14px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.btn-sm{height:34px;padding:0 14px;border-radius:12px;font-size:13px}
.btn-lg{height:46px;padding:0 22px;font-size:16px}
/* Coin: deep orange pill, white text, a dark round coin holding an arrow */
.btn-primary{background:var(--btn);color:#fff;border-radius:999px;padding-right:5px;gap:14px;border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary.btn-lg{padding-left:24px}
.btn-primary:hover{background:var(--btn-hover)}
.btn-primary::after{content:'';flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7A3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .2s var(--ease)}
.btn-primary.btn-lg::after{width:34px;height:34px;background-size:15px}
.btn-primary.btn-sm{padding-right:4px;gap:10px}
.btn-primary.btn-sm::after{width:24px;height:24px;background-size:12px}
.btn-primary:hover::after{transform:translateX(2px)}
.btn-quiet{background:rgba(236,232,246,.04);border-color:var(--line-2);color:var(--fg)}
.btn-quiet:hover{background:rgba(236,232,246,.08);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.link{font-size:14px;font-weight:500;color:var(--fg);border-bottom:1px solid var(--line-3);padding-bottom:2px;transition:border-color .2s}
.link:hover{border-color:var(--fg)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.nav.is-scrolled,.nav.is-open{background:rgba(12,10,17,.88);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav-in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--fg)}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:8px 12px;border-radius:10px;font-size:14px;color:var(--fg-2);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-signin{padding:8px 12px;font-size:14px;color:var(--fg-2);transition:color .2s}
.nav-signin:hover{color:var(--fg)}
.burger{display:none;width:36px;height:36px;border-radius:10px;place-items:center;color:var(--fg-2)}
.burger:hover{color:var(--fg)}
.burger .x{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger[aria-expanded="true"] .bars{display:none}
.m-menu{border-top:1px solid var(--line);padding:8px var(--gut) 20px}
.m-menu a.m-link{display:block;padding:14px 2px;font-size:18px;color:var(--fg);border-bottom:1px solid var(--line)}
.m-menu .m-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
@media (max-width:880px){
  .nav-links,.nav-signin{display:none}
  .burger{display:grid}
}
@media (min-width:881px){.m-menu{display:none!important}}
/* Under 360px the header keeps the logo and menu; Start earning is in the menu. */
@media (max-width:359px){.nav-right .btn-primary{display:none}}

/* Signed-in account chip and menu (assets/nav.js) */
.nav-acct{position:relative;display:inline-flex}
.nav-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 4px;border-radius:999px;background:rgba(236,232,246,.04);border:1px solid var(--line-2);font:500 13px/1 var(--sans);color:var(--fg);cursor:pointer;transition:border-color .2s,background-color .2s}
.nav-chip:hover{border-color:var(--line-3);background:rgba(236,232,246,.08)}
.nav-ava{width:26px;height:26px;border-radius:50%;background:rgba(255,92,26,.16);color:#FF8A4C;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.nav-ava.aim{background:rgba(236,232,246,.08);color:var(--fg)}
.nav-caret{color:var(--fg-3)}
.nav-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:236px;padding:6px;display:flex;flex-direction:column;text-align:left;z-index:60;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 70px -24px rgba(0,0,0,.85)}
.nav-menu[hidden]{display:none}
.nav-menu .nav-who{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.nav-menu .nav-who .nav-ava{width:34px;height:34px;font-size:13px}
.nav-menu .nav-who b{display:block;font-size:14px;font-weight:600;color:var(--fg);line-height:1.3}
.nav-menu .nav-who small{display:block;max-width:160px;font-size:12px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-menu a{display:block;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--fg-2);transition:background-color .2s,color .2s}
.nav-menu a:hover{background:rgba(236,232,246,.06);color:var(--fg)}
.nav-menu a.nav-menu-out{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--fg-3)}

/* ---------- Home: hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:40px;align-items:center;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(48px,7vw,104px)}
.announce{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:32px;padding:4px 12px 4px 5px;border-radius:999px;font-size:13px;line-height:1.3;color:var(--fg-2);border:1px solid var(--line-2);background:var(--bg);transition:color .2s,border-color .2s}
.announce:hover{color:var(--fg);border-color:var(--line-3)}
.announce svg{flex:none}
.announce .new{flex:none;height:22px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;background:rgba(236,232,246,.08);color:var(--fg);font-weight:600;font-size:12px}
.hero h1{margin-top:26px;font-family:var(--serif);font-weight:400;font-size:clamp(48px,7.4vw,96px);line-height:.98;letter-spacing:-.01em;text-wrap:balance;color:var(--fg)}
.lede{margin-top:22px;font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:var(--fg-2);max-width:34em;text-wrap:pretty}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fine{margin-top:18px;font-size:13px;line-height:1.55;color:var(--fg-3);text-wrap:pretty}
.stage{position:relative;width:100%;max-width:540px;margin-left:auto;aspect-ratio:1/1.08}
.beam{position:absolute;top:-34%;left:50%;width:150px;height:170%;margin-left:-40px;background:linear-gradient(90deg,rgba(236,232,246,0),rgba(236,232,246,.10) 50%,rgba(236,232,246,0));transform:rotate(34deg);filter:blur(18px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);pointer-events:none}
.coin{position:absolute;left:0;top:0;width:100%;height:auto}
.coin .legend{font:500 9.5px var(--sans);letter-spacing:.12em;fill:rgba(236,232,246,.26)}
.coin-body{animation:float 10s ease-in-out infinite}
.sheen{animation:sheen 11s var(--ease) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sheen{0%{transform:translateX(-260px)}45%{transform:translateX(260px)}100%{transform:translateX(260px)}}
.hcard{position:absolute;border-color:var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 70px -24px rgba(0,0,0,.85)}
.hdeal{right:0;bottom:0;width:min(316px,80%);padding:18px}
.hearn{left:0;top:7%;width:min(236px,62%);padding:16px 18px}
.hearn .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hearn .big{display:block;margin-top:10px;font-size:32px;font-weight:500;letter-spacing:-.035em;line-height:1}
.hearn .small{display:block;margin-top:8px;font-size:13px;line-height:1.45;color:var(--fg-2)}

/* ---------- Deal card parts (hero, home preview, deals board) ---------- */
.dc-head{display:flex;align-items:center;gap:12px}
.tile{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(236,232,246,.07);border:1px solid var(--line-2);color:var(--fg);font-weight:600;font-size:13px;letter-spacing:-.01em;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover}
.tile.sm{width:28px;height:28px;border-radius:8px;font-size:12px}
.dc-id{min-width:0;flex:1;display:flex;flex-direction:column}
.dc-id b{font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-id .sc{margin-top:2px}
.dc-rate{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:18px}
.dc-rate b{font-size:40px;font-weight:500;letter-spacing:-.04em;line-height:1}
.dc-rate span{font-size:13px;color:var(--fg-2)}
.meter{height:4px;border-radius:2px;background:rgba(236,232,246,.1);overflow:hidden;margin-top:16px}
.meter i{display:block;height:100%;border-radius:2px;background:rgba(242,240,245,.82)}
.dc-foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:13px;color:var(--fg-3)}
.dc-foot b{color:var(--fg);font-weight:600}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px;vertical-align:1px}
.deals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px}
@media (min-width:1025px){
  .deals[data-n="1"]{grid-template-columns:minmax(0,384px);justify-content:center}
  .deals[data-n="2"]{grid-template-columns:repeat(2,minmax(0,384px));justify-content:center}
}
.deal{padding:22px;display:flex;flex-direction:column}
.d-l,.d-r{display:contents}
.dc-est{margin-top:12px;margin-bottom:14px;font-size:14px;color:var(--fg-2);text-wrap:pretty}
.dc-est b{color:var(--fg);font-weight:600}
.dc-meta{margin-top:auto}
.deal .btn{margin-top:20px}
.under{margin-top:32px;text-align:center;font-size:14px;color:var(--fg-3)}

/* ---------- Platforms strip ---------- */
.plats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 48px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plats .p{font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--fg-2)}

/* ---------- Sections ---------- */
.sec{padding-top:clamp(96px,12vw,160px)}
.sh{max-width:720px}
.sh.c{margin:0 auto;text-align:center}
.kick{display:block;margin-bottom:18px}
h2{font-weight:400;font-size:clamp(32px,4.2vw,48px);line-height:1.08;letter-spacing:-.045em;color:var(--fg);text-wrap:balance}
.sh p{text-wrap:pretty;margin-top:18px;font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:var(--fg-2);max-width:40em}
.sh.c p{margin-left:auto;margin-right:auto}
h3{font-weight:500;font-size:20px;line-height:1.25;letter-spacing:-.02em;color:var(--fg)}

/* How it works: three steps with example panels */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px}
.step{overflow:hidden;display:flex;flex-direction:column}
.vis{position:relative;height:224px;padding:44px 22px 22px;border-bottom:1px solid var(--line);background:var(--panel-2);display:flex;flex-direction:column;justify-content:center;gap:10px}
.vis .tag{position:absolute;top:14px;right:16px}
.step-txt{padding:24px 24px 28px}
.step-txt .n{display:block;margin-bottom:12px}
.step-txt p{margin-top:8px;font-size:16px;color:var(--fg-2)}
.mini{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid transparent;font-size:13px;color:var(--fg-2)}
.mini span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini b{font-weight:600;color:var(--fg);font-size:14px}
.mini b small{font-weight:400;color:var(--fg-3);font-size:12px}
.mini.on{border-color:var(--line-2);background:rgba(236,232,246,.04);color:var(--fg)}
.field{height:40px;display:flex;align-items:center;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);font-size:13px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fake-btn{height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(236,232,246,.06);border:1px solid var(--line-2);font-size:13px;font-weight:600}
.ledger{display:flex;flex-direction:column}
.ledger div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px;color:var(--fg-2);border-bottom:1px solid var(--line)}
.ledger div:last-child{border-bottom:0}
.ledger b{color:var(--fg);font-weight:600}
.ledger .got{color:var(--green);font-size:16px}

/* Numbered list with hairlines */
.ol{list-style:none;margin-top:36px;border-top:1px solid var(--line)}
.ol li{display:grid;grid-template-columns:72px 1fr;gap:4px 8px;padding:18px 0;border-bottom:1px solid var(--line)}
.ol .n{grid-row:span 2;padding-top:3px}
.ol b{font-weight:500;font-size:16px;letter-spacing:-.01em}
.ol p{font-size:14px;color:var(--fg-2)}

/* Home calculator (sliders left, result right) */
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);margin-top:64px;overflow:hidden}
.calc-in{padding:clamp(22px,3.4vw,40px);display:flex;flex-direction:column;gap:30px}
.ctl-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ctl label{font-weight:500;font-size:16px}
.ctl output{font-weight:600;font-size:18px;letter-spacing:-.02em}
.ctl .hint{display:block;margin-top:6px;font-size:13px;color:var(--fg-3)}
.calc-out{position:relative;padding:clamp(22px,3.4vw,40px);border-left:1px solid var(--line);background:var(--panel-2);display:flex;flex-direction:column;justify-content:center}
.calc-out .tag{position:absolute;top:18px;right:20px}
.calc-big{display:block;margin-top:10px;font-size:80px;font-weight:500;letter-spacing:-.05em;line-height:1}
.calc-out .m{margin-top:14px;font-size:16px;color:var(--fg-2)}
.calc-out .m b{color:var(--fg);font-weight:600}
.calc-out .note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--fg-3)}
.calc-out .link{align-self:flex-start;margin-top:16px}

/* Range sliders. Set --p (0% to 100%) from JS for the filled part of the track. */
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin-top:10px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--fg) var(--p),rgba(236,232,246,.12) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--fg);border:0;box-shadow:0 0 0 4px var(--panel),0 0 0 5px rgba(236,232,246,.22)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(236,232,246,.12)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--fg)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--fg);border:0;box-shadow:0 0 0 4px var(--panel),0 0 0 5px rgba(236,232,246,.22)}
input[type=range]:focus-visible{outline:2px solid var(--fg);outline-offset:4px}

/* Compare: platform cards and the comparison table */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px}
.app{padding:22px;display:flex;flex-direction:column;transition:border-color .2s}
.app:hover{border-color:var(--line-3)}
.app b{display:block;margin-top:14px;font-size:32px;font-weight:500;letter-spacing:-.035em;line-height:1.05}
.app p{margin-top:8px;font-size:14px;color:var(--fg-2);flex:1}
.app .more{margin-top:18px;font-size:14px;font-weight:500;color:var(--fg)}
.cmp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-top:88px}
.cmp{margin-top:20px;overflow:hidden}
.cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:0}
.cmp-row > *{padding:18px 22px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.cmp-row > .rh{color:var(--fg);font-weight:500}
.cmp-row > .us{color:var(--fg);background:rgba(236,232,246,.03);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.cmp-h > *{padding-top:20px;padding-bottom:16px}
.cmp-h .us,.cmp-h .us-h{color:var(--fg)}
.cmp-fn{grid-template-columns:1fr}
.cmp-fn > *{padding:14px 22px;font-size:13px;color:var(--fg-3)}
.cmp-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:20px;font-size:14px;color:var(--fg-3)}
.cmp-note .links{display:flex;flex-wrap:wrap;gap:10px 20px}

/* Rules grid, 3 x 2 */
.g6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.g6 > div{padding:30px 28px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.g6 p{margin-top:8px;font-size:16px;color:var(--fg-2);text-wrap:pretty}

/* FAQ, open/close rows (home) */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-side p{margin-top:18px;font-size:16px;color:var(--fg-2)}
.faq-side .links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:26px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:18px;font-weight:500;letter-spacing:-.01em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:14px;height:14px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;border-radius:1px;background:var(--fg-2);transition:transform .25s var(--ease)}
.pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0deg)}
.faq .a{padding:0 40px 24px 0;font-size:16px;line-height:1.65;color:var(--fg-2);max-width:62ch}

/* Final call to action */
.final{position:relative;text-align:center;padding:clamp(120px,14vw,200px) 0 clamp(96px,11vw,150px)}
.final::before{content:"";position:absolute;left:50%;top:0;width:min(880px,90%);height:1px;transform:translateX(-50%);background:var(--line)}
.final h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.2vw,92px);line-height:1;letter-spacing:-.01em;max-width:12em;margin:0 auto;color:var(--fg)}
.final p{text-wrap:balance;margin:24px auto 0;max-width:34em;font-size:clamp(16px,1.4vw,18px);color:var(--fg-2)}
.final .ctas{justify-content:center}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:72px 0 36px}
.foot-top p{margin-top:14px;max-width:34ch;font-size:14px;color:var(--fg-3)}
.foot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 28px;margin-top:56px}
.foot-cols h4{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px}
.foot-cols a{display:block;padding:5px 0;font-size:14px;line-height:1.45;color:var(--fg-2);transition:color .2s}
.foot-cols a:hover{color:var(--fg)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-3)}

/* ---------- Article pages: guides, comparisons, tools, legal, contact ---------- */
.art{max-width:calc(var(--art) + var(--gut) * 2);margin:0 auto;padding:clamp(40px,6vw,80px) var(--gut) clamp(96px,11vw,144px)}
.art .kicker{display:block;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.art h1{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.2vw,68px);line-height:1.02;letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.art .lede{margin-top:20px;max-width:none;font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--fg-2)}
.art .meta-line,.art .updated{margin-top:20px;padding-bottom:28px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--fg-3)}
.art .updated + p{margin-top:28px}
.art h2{margin-top:56px;font-weight:400;font-size:clamp(26px,3.2vw,32px);line-height:1.15;letter-spacing:-.035em;color:var(--fg);text-wrap:balance;scroll-margin-top:88px}
.art h3{margin-top:32px;font-weight:500;font-size:19px;line-height:1.3;letter-spacing:-.015em;color:var(--fg)}
.art p,.art li{font-size:17px;line-height:1.7;color:var(--fg-2);text-wrap:pretty}
.art p{margin-top:16px}
.art h2 + p,.art h3 + p{margin-top:12px}
.art ul,.art ol{margin-top:16px;padding-left:22px}
.art li{margin-top:10px;padding-left:6px}
.art li::marker{color:var(--fg-3)}
.art ol li::marker{font-variant-numeric:tabular-nums}
.art b,.art strong{color:var(--fg);font-weight:600}
.art p a,.art li a,.art td a{color:var(--fg);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-3);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s}
.art p a:hover,.art li a:hover,.art td a:hover{text-decoration-color:var(--fg)}
.art p.note,.art .note{font-size:13px;line-height:1.55;color:var(--fg-3)}

/* In short (TL;DR) */
.tldr{margin-top:32px;padding:22px 24px 24px;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tldr > b{display:block;margin-bottom:10px;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.art .tldr p{margin:0;font-size:17px;line-height:1.65;color:var(--fg)}

/* Boxes and cards inside text */
.art .box,.art .card{margin-top:24px;padding:20px 24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.art .box.warm{background:var(--panel-2);border-color:var(--line-2)}
.art .box p:first-child,.art .card p:first-child{margin-top:0}

/* Tables */
.art table{width:100%;margin-top:24px;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15px;line-height:1.5}
.art th{padding:14px 18px;text-align:left;vertical-align:bottom;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);border-bottom:1px solid var(--line-2)}
.art td{padding:14px 18px;vertical-align:top;color:var(--fg-2);border-bottom:1px solid var(--line)}
.art tr:last-child td{border-bottom:0}
.art td:first-child{color:var(--fg);font-weight:500}
.art table + p{margin-top:14px}

/* Questions people ask (static, readable by crawlers) */
.art .faq{margin-top:24px;border-top:1px solid var(--line)}
.art .faq h3{margin-top:0;padding-top:22px;font-size:18px}
.art .faq p{margin-top:8px;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:16px}

/* Closing call to action */
.cta-box{position:relative;overflow:hidden;margin-top:80px;padding:clamp(40px,6vw,64px) clamp(22px,4vw,48px);text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cta-box::before{content:"";position:absolute;top:-60%;left:50%;width:120px;height:220%;margin-left:-60px;background:linear-gradient(90deg,rgba(236,232,246,0),rgba(236,232,246,.06) 50%,rgba(236,232,246,0));transform:rotate(34deg);filter:blur(16px);pointer-events:none}
.cta-box > *{position:relative}
.cta-box > b{display:block;max-width:14em;margin:0 auto;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.8vw,48px);line-height:1.04;letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.art .cta-box p{max-width:34em;margin:16px auto 0;font-size:16px;line-height:1.6;color:var(--fg-2);text-wrap:balance}
.cta-box .btn{margin-top:28px}

/* Keep reading */
.art .more{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-size:15px;line-height:2;color:var(--fg-3)}
.art .more > b{display:block;margin-bottom:4px;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.art .more br{display:none}
.art .more a{color:var(--fg);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-3);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s}
.art .more a:hover{text-decoration-color:var(--fg)}
.art .more-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;line-height:1.45}
.art .more-list > b{grid-column:1/-1;margin-bottom:6px}
.art .more-list a{display:block;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .2s}
.art .more-list a:hover{color:var(--fg);border-bottom-color:var(--line-3)}

/* Calculator tool (tools/views-earnings-calculator) */
.calc-tool{margin-top:32px;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.crow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 16px;padding:20px 24px 16px;border-bottom:1px solid var(--line)}
.crow label{font-size:16px;font-weight:500;color:var(--fg)}
.crow output{font-size:18px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg)}
.crow input{grid-column:1/-1;grid-row:2}
.art .calc-tool .res{margin:0;border:0;border-radius:0;background:var(--panel-2)}
.art .calc-tool .res td{padding:15px 24px;font-size:15px;font-weight:400;color:var(--fg-2)}
.art .calc-tool .res td:last-child{text-align:right;white-space:nowrap;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.art .calc-tool .res tr.us td{background:rgba(255,92,26,.06);color:var(--fg)}
.art .calc-tool .res tr.us td:last-child{color:var(--orange)}
.art .calc-tool .calc-note{margin:0;padding:14px 24px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-3)}

/* Guides hub (blog) */
.hub{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(96px,11vw,144px)}
.hub .kicker{display:block;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.hub h1{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:clamp(52px,7.4vw,96px);line-height:.98;letter-spacing:-.01em;color:var(--fg)}
.hub .lede{max-width:40em}
.hub h2{margin-top:72px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.hub h2 + .cards{margin-top:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px}
.hub .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1025px){
  .hub .cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hub .cards > *{grid-column:span 2}
  .hub .cards > :first-child:nth-last-child(2),.hub .cards > :first-child:nth-last-child(2) ~ *,
  .hub .cards > :first-child:nth-last-child(4),.hub .cards > :first-child:nth-last-child(4) ~ *{grid-column:span 3}
}
.gcard{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .2s,background-color .2s}
.gcard:hover{border-color:var(--line-3);background:var(--panel-2)}
.gcard b{font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--fg)}
.gcard span{font-size:14px;line-height:1.55;color:var(--fg-2)}

/* Contact */
.art .sub{margin-top:20px;font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--fg-2)}
.art .cards{margin-top:36px}
.art .cards .card{margin-top:0;padding:24px}
.art .cards .card b{display:block;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.art .cards .card p{margin-top:12px;font-size:16px}
.art .cards .card a{display:inline-block;margin-top:18px;font-size:16px;font-weight:500;color:var(--fg);border-bottom:1px solid var(--line-3);padding-bottom:2px;transition:border-color .2s}
.art .cards .card a:hover{border-color:var(--fg)}
.art .cards + .note{margin-top:28px}

/* ---------- Entrance ---------- */
.rise{animation:rise .9s var(--ease) both}
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}.d4{animation-delay:.28s}.d5{animation-delay:.36s}.d6{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .deals,.apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apps > :last-child:nth-child(odd){grid-column:1/-1}
  .g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6 > div:last-child:nth-child(odd){grid-column:1/-1}
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hub .cards > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:641px) and (max-width:1024px){
  .deals .deal:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:end}
  .deals .deal:last-child:nth-child(odd) .d-l,.deals .deal:last-child:nth-child(odd) .d-r{display:flex;flex-direction:column}
  .deals .deal:last-child:nth-child(odd) .dc-est{margin-bottom:0}
  .deals .deal:last-child:nth-child(odd) .dc-meta{margin-top:0}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:40px}
  .beam{display:none}
  .stage{margin:0 auto;max-width:460px;aspect-ratio:auto;display:flex;flex-direction:column}
  .coin{position:absolute;top:0;right:0;left:auto;width:56%;z-index:0}
  .hcard{position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:1}
  .hearn{width:min(236px,64%);margin-top:max(20px,calc(34% - 88px));padding-bottom:34px}
  .hdeal{width:min(316px,88%);margin:-24px 0 0 auto}
  .steps{grid-template-columns:1fr;max-width:560px}
  .faq-grid{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .calc-out{border-left:0;border-top:1px solid var(--line)}
  .cmp-h{display:none}
  .cmp-row{grid-template-columns:1fr;padding:18px 20px 8px}
  .cmp-row > *{padding:0}
  .cmp-row > .rh{font-size:16px;margin-bottom:10px}
  .cmp-row > [data-l]{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
  .cmp-row > [data-l]::before{content:attr(data-l);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding-top:2px}
  .cmp-row > .us{background:none;border-left:0;border-right:0}
  .cmp-fn{padding:14px 20px}
  .cmp-fn > *{padding:0}
}
@media (max-width:640px){
  .hero-in{gap:28px}
  .ctas{margin-top:28px}
  .ctas .btn{width:100%}
  .plats{gap:10px 22px;padding:26px 0}
  .plats .sc{flex-basis:100%;text-align:center}
  .plats .p{font-size:16px}
  .deals,.apps{grid-template-columns:1fr}
  .g6{grid-template-columns:1fr}
  .g6 > div{padding:24px 20px 26px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq .a{padding-right:0}
  .hdeal{padding:16px}
  .hub .cards{grid-template-columns:1fr}
  .art .more-list{grid-template-columns:1fr}
  .art p,.art li{font-size:16px}
  .art table{font-size:14px}
  .art table{table-layout:fixed}
  .art th,.art td{padding:12px 10px;overflow-wrap:break-word;hyphens:auto}
  .art th{font-size:11px;letter-spacing:.04em}
  /* Stacked tables: nav.js labels each cell with its column (data-l) and adds
     .stack. Each row becomes a block, each cell sits beside its label. */
  .art table.stack,.art table.stack tbody,.art table.stack tr{display:block}
  .art table.stack tr{padding:6px 18px;border-bottom:1px solid var(--line)}
  .art table.stack tr:last-child{border-bottom:0}
  .art table.stack tr.th-row{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .art table.stack td{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:0;border-top:1px solid var(--line);hyphens:manual}
  .art table.stack td:first-child{border-top:0}
  .art table.stack td:not([data-l]){display:block;padding-top:12px}
  .art table.stack td[data-l]::before{content:attr(data-l);font-size:11px;line-height:1.5;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-3);padding-top:2px;overflow-wrap:break-word}
  .art .calc-tool .res td{padding:14px 18px}
  .crow{padding:18px 18px 14px}
  .art .calc-tool .calc-note{padding:12px 18px 16px}
  .tldr{padding:18px 18px 20px}
  .art .box,.art .card{padding:18px}
  .cta-box .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}