/* GainsWithAI site styles: every marketing page (index, compare and feature pages). The phone screens are in
   phones.css, the forms in forms.css. Legal and support pages keep their own small inline style. */
/* Tokens. Colours match the app (src/theme/tokens.ts). Spacing and radii are rem so larger text scales the layout. */
:root{--bg:#000;--s1:#1C1C1E;--s2:#2C2C2E;--s3:#3A3A3C;--ln:rgba(84,84,88,.55);--tx:#FFF;--mu:rgba(235,235,245,.64);--ac:#C8F25A;--acbg:#1E2412;--acln:#3A4520;--gr:#30D158;--am:#FF9F0A;--rd:#FF453A;
--max:72.5rem;--gut:1.25rem;
--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4.5rem;--sp-9:7rem;
--r-m:.75rem;--r-l:1rem;--r-xl:1.5rem;
--t-press:100ms}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--tx);font:400 1.0625rem/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;letter-spacing:0;-webkit-font-smoothing:antialiased}
main{overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--ac)}
a,summary,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* Display: Barlow Condensed, tight leading, tightened tracking. Headlines never wrap: their lines are set with <br>
   and the size follows the column width (container query units), so each stays on the lines it was written on. */
.d{font-family:"Barlow Condensed",-apple-system,system-ui,sans-serif;font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.015em;margin:0;white-space:nowrap}
.d span{color:var(--ac)}
.ey{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
.lede{font-size:clamp(1.0625rem,2vw,1.25rem);line-height:1.4;color:var(--mu);margin:var(--sp-4) 0 0;max-width:30rem}
.mu{color:var(--mu)}
.cta{display:inline-flex;align-items:center;gap:var(--sp-3);height:3.5rem;padding:0 var(--sp-5);border-radius:var(--r-l);background:var(--ac);color:#0B0C0A;font-weight:700;font-size:1.0625rem;text-decoration:none;transition:transform var(--t-press) ease-out}
.cta:active{transform:scale(.97)}
.sub{font-size:.9375rem}
.sub a{color:var(--mu)}

/* Header: a translucent layer the page scrolls under, with a soft fade instead of a divider. */
header{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--sp-5);background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:4rem}
.logo{display:flex;align-items:center;gap:var(--sp-3);color:var(--tx);text-decoration:none}
.logo img{width:2.125rem;height:2.125rem;border-radius:.5625rem}
.logo span{font:700 1.5rem "Barlow Condensed",sans-serif;letter-spacing:0}
.nav-cta{height:2.5rem;padding:0 var(--sp-4);border-radius:var(--r-m);font-size:.9375rem}

.hero{padding:var(--sp-6) 0 var(--sp-8)}
.hero .wrap{display:grid;gap:var(--sp-7);align-items:center}
.hero-txt{container-type:inline-size}
/* --fit: the em width of the headline's longest line plus a margin; pages with longer lines set their own. */
.hero h1{font-size:clamp(2.5rem,13vw,7rem);font-size:min(7rem,calc(100cqi / var(--fit,5.75)))}
.hero .lede{margin:var(--sp-5) 0 var(--sp-6)}
.soon{display:flex;align-items:flex-start;gap:var(--sp-3);margin:0 0 var(--sp-5);white-space:nowrap}
.soon::before{content:"";flex:none;width:.5rem;height:.5rem;margin-top:.375rem;border-radius:50%;background:var(--ac);box-shadow:0 0 0 .25rem var(--acbg)}
@container (max-width:23rem){.soon .tail{display:none}}

/* Feature sections: a two-line headline, one line under it, and the app in a phone. */
.feat,.price,.faq,.final{padding:var(--sp-8) 0}
.feat .wrap{display:grid;gap:var(--sp-6);align-items:center}
.txt{container-type:inline-size}
.feat h2,.price h2,.final h2,.faq h2,.sec h2{font-size:clamp(2.25rem,11vw,4.5rem);font-size:min(4.5rem,calc(100cqi / var(--fit,8.2)))}

.price .wrap{max-width:52rem;text-align:center;container-type:inline-size}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin:var(--sp-6) 0 var(--sp-6);text-align:left}
.plan{border-radius:var(--r-xl);background:var(--s1);padding:var(--sp-5);border:1.5px solid transparent;position:relative}
.plan.best{border-color:var(--ac);background:#12160B}
.plan .tag{position:absolute;top:-.75rem;right:var(--sp-5);background:var(--ac);color:#0B0C0A;font-size:.75rem;font-weight:800;letter-spacing:.06em;padding:var(--sp-1) .625rem;border-radius:.5rem}
.plan h3{margin:0 0 var(--sp-2);font-size:1.0625rem}
.plan .amt{font:700 3.25rem/1 "Barlow Condensed",sans-serif;letter-spacing:-.01em}
.plan .amt small{font-size:1.25rem;color:var(--mu);letter-spacing:0}
.plan p{margin:var(--sp-2) 0 0;font-size:.9375rem}
.price .sub{margin:var(--sp-4) 0 0}

.faq .wrap{max-width:52rem;container-type:inline-size}
.faq h2{margin-bottom:var(--sp-6)}
details{border-top:.5px solid var(--ln)}
details:last-child{border-bottom:.5px solid var(--ln)}
summary{cursor:pointer;font-weight:600;font-size:1.0625rem;list-style:none;display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) 0;transition:transform var(--t-press) ease-out}
summary:active{transform:scale(.98)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--mu);font-weight:400;font-size:1.5rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:0 0 var(--sp-5);color:var(--mu);line-height:1.55}

.final{text-align:center}
.final .wrap{container-type:inline-size}
.final h2{margin-bottom:var(--sp-6)}
footer{padding:var(--sp-7) 0 var(--sp-8);border-top:.5px solid var(--ln);font-size:.875rem}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-5);margin-bottom:var(--sp-6)}
.foot-nav div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
.foot-nav h2{margin:0 0 var(--sp-2);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx)}
footer a{display:inline-block;padding:var(--sp-1) 0;color:var(--mu);text-decoration:none;transition:color var(--t-press) ease-out}
footer a:hover{color:var(--tx)}
footer p{margin:0}
@media (min-width:48em){.foot-nav{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Subpages (compare and feature pages). */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-5);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.crumbs a{color:var(--ac);text-decoration:none}
.sec{padding:var(--sp-8) 0}
.sec .wrap{max-width:52rem;container-type:inline-size}
/* A heading that introduces the phone sections under it. */
.sec.intro{padding-bottom:0;text-align:center}
.sec h3{margin:0 0 var(--sp-2);font-size:1.0625rem;letter-spacing:0}
.body{color:var(--mu);line-height:1.55;margin:var(--sp-4) 0 0;max-width:38rem}
.body b{color:var(--tx);font-weight:600}

/* Comparison table: columns from tablet width up, one card per row on phones. */
.cmp{width:100%;margin:var(--sp-6) 0 0;border-collapse:collapse;font-size:.9375rem;line-height:1.45}
.cmp th,.cmp td{padding:var(--sp-4);text-align:left;vertical-align:top}
.cmp thead th{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.cmp thead th.us{color:var(--ac)}
.cmp tbody th{font-weight:600;color:var(--tx)}
.cmp td{color:var(--mu)}
.cmp td.us{color:var(--tx);background:rgba(200,242,90,.05)}
.cmp tbody tr{border-top:.5px solid var(--ln)}
@media (max-width:47.99em){
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}
  .cmp tbody tr{padding:var(--sp-4) 0;border-top:.5px solid var(--ln)}
  .cmp tbody th{padding:0 0 var(--sp-2)}
  .cmp td{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-2) 0}
  .cmp td::before{content:attr(data-label);font-size:.8125rem;font-weight:700;color:var(--mu)}
  .cmp td.us{background:none}
  .cmp td.us::before{color:var(--ac)}
}

.picks{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.pick-card{border-radius:var(--r-xl);background:var(--s1);padding:var(--sp-5)}
.pick-card.us{border:1.5px solid var(--acln);background:#12160B}
.pick-card ul{margin:0;padding:0 0 0 1.1rem;color:var(--mu);line-height:1.55}
.pick-card li+li{margin-top:var(--sp-2)}
@media (min-width:48em){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}

.steps{list-style:none;counter-reset:step;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--sp-3);align-items:start;padding:var(--sp-4);border-radius:var(--r-l);background:var(--s1);color:var(--mu);line-height:1.5}
.steps li::before{content:counter(step);width:2rem;height:2rem;border-radius:50%;background:var(--acbg);color:var(--ac);display:flex;align-items:center;justify-content:center;font:700 1.125rem "Barlow Condensed",sans-serif}
.steps b{display:block;color:var(--tx);font-weight:600}

.facts{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.facts li{padding:var(--sp-4);border-radius:var(--r-l);background:var(--s1);color:var(--mu);line-height:1.5}
.facts b{color:var(--tx);font-weight:600}
@media (min-width:48em){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.related{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-5) 0 0;padding:0;list-style:none}
.final .related{justify-content:center}
.related a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--sp-4);border-radius:999px;background:var(--s1);color:var(--tx);text-decoration:none;font-weight:600;font-size:.9375rem;transition:transform var(--t-press) ease-out}
.related a:active{transform:scale(.97)}
.sources{max-width:52rem;margin:0 auto;padding:0 var(--gut) var(--sp-7);font-size:.8125rem;color:var(--mu);line-height:1.6}
.sources a{color:var(--mu)}

@media (max-width:35em){.plans{grid-template-columns:1fr}.nav-cta{display:none}}
/* One column: the feature text centres over its phone. */
@media (max-width:55.99em){.feat .txt{text-align:center}.feat .lede{margin-left:auto;margin-right:auto}}
@media (min-width:56em){
  .hero{padding:var(--sp-8) 0 var(--sp-9)}
  .hero .wrap{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8)}
  /* Text and phone sit together in the middle rather than at the far edges of a wide screen. */
  .feat .wrap{grid-template-columns:minmax(0,36rem) auto;justify-content:center;gap:var(--sp-8) clamp(var(--sp-8),8vw,var(--sp-9))}
  .feat.rev .wrap{grid-template-columns:auto minmax(0,36rem)}
  .feat,.price,.faq,.final,.sec{padding:var(--sp-9) 0}
  .sec.intro{padding-bottom:0}
  .feat.rev .stage{order:-1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta,summary,.related a{transition:opacity var(--t-press) ease-out}.cta:active,summary:active,.related a:active{transform:none;opacity:.7}}
@media (prefers-reduced-transparency:reduce){header{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){
  :root{--mu:rgba(235,235,245,.86);--ln:rgba(235,235,245,.5)}
  header{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--ln)}
  header::after{display:none}
  .plan,.pick-card,.steps li,.facts li{border:1px solid var(--ln)}
  .cmp td.us{background:none}
}