/* =========================================================
   Goldfinch — design tokens
   ========================================================= */
:root{
  --green-darkest:#082200;
  --green-dark:#008547;
  --green:#00b460;
  --green-light:#4fe380;
  --lime:#7cff7c;
  --green-lightest:#f0fff4;
  --gold:#f0bb55;

  --gray-25:#fdfdfd;
  --gray-50:#fafafa;
  --gray-100:#f5f5f5;
  --gray-200:#e9eaeb;
  --gray-300:#d5d7da;
  --gray-400:#a4a7ae;
  --gray-500:#717680;
  --gray-600:#535862;
  --gray-700:#414651;
  --white:#ffffff;

  --error-700:#b42318;
  --error-50:#fef3f2;

  --font-serif:'Frank Ruhl Libre', Georgia, serif;
  --font-sans:'Geist', -apple-system, BlinkMacSystemFont, sans-serif;

  --container:1232px; /* 1200 content + 2×16 gutter */
  --gutter:max(16px, calc((100% - 1200px) / 2));
  --radius-lg:24px;
  --radius-xl:32px;
  --shadow-xs:0 1px 2px rgba(10,13,18,.05);
  --shadow-sm:0 1px 2px rgba(10,13,18,.06), 0 1px 3px rgba(10,13,18,.1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;width:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--green-darkest);
  background:var(--gray-25);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  width:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
h1,h2,h3,p{margin:0;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 16px;
}

h1,h2{font-family:var(--font-serif);font-weight:700;}
h2{font-size:48px;line-height:60px;}
h3{font-family:var(--font-sans);font-weight:700;}

.eyebrow{
  font-family:var(--font-serif);
  font-size:16px;
  line-height:28px;
  color:var(--gray-700);
}
.eyebrow--lg{font-size:18px;}
.eyebrow--light{color:#fff;}

.section-heading{text-align:center;}
.section-sub{margin-top:12px;font-size:16px;line-height:24px;color:var(--green-darkest);}

.text-lime{color:var(--lime);}
.text-green-dark{color:var(--green-dark);}

.card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
}

/* Buttons */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:15px;
  line-height:20px;
  letter-spacing:-.01em;
  border-radius:200px;
  border:1px solid transparent;
  cursor:pointer;
  padding:12px 22px;
  transition:
    translate .2s cubic-bezier(.16,1,.3,1),
    scale .15s ease,
    background .2s ease,
    box-shadow .25s ease;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:focus{outline:none;}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:3px;}
.btn-primary{
  background:var(--green-light);
  color:var(--green-darkest);
  box-shadow:
    0 1px 2px rgba(8,34,0,.12),
    0 6px 16px -6px rgba(0,180,96,.55);
}
.btn-primary:hover{
  background:#5ef08d;
  translate:0 -1px;
  box-shadow:
    0 2px 4px rgba(8,34,0,.12),
    0 10px 24px -8px rgba(0,180,96,.65);
}
.btn-primary:active{
  translate:0 0;
  scale:.98;
  background:var(--green);
  box-shadow:inset 0 1px 2px rgba(8,34,0,.18), 0 1px 2px rgba(8,34,0,.1);
}
.btn-block{width:100%;padding:14px 20px;}
.btn-sm{padding:11px 20px;}
/* Trailing arrow on primary conversion CTAs */
.btn-arrow::after{
  content:'';
  width:16px;height:16px;
  margin-right:-4px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:translate .25s cubic-bezier(.16,1,.3,1);
}
.btn-arrow:hover::after{translate:3px 0;}

/* App store buttons — logos are crops of a single badge sprite */
.store-buttons{display:flex;gap:16px;}
.store-btn{
  display:flex;align-items:center;justify-content:center;
  width:159px;padding:10px;
  background:#fff;border-radius:8px;
  transition:transform .15s ease;
}
.store-btn:hover{transform:translateY(-1px);}
.store-logo{position:relative;display:block;overflow:hidden;}
.store-logo img{position:absolute;max-width:none;}
.store-logo--apple{width:92.231px;height:21.028px;}
.store-logo--apple img{width:186.58%;height:705.38%;left:-36.49%;top:-437.65%;}
.store-logo--google{width:107.638px;height:20.611px;}
.store-logo--google img{width:162.09%;height:719.61%;left:-31.64%;top:-172.44%;}

/* Badges */
.badge{
  display:inline-flex;align-items:center;
  font-size:12px;line-height:18px;font-weight:700;
  padding:2px 8px;border-radius:16px;white-space:nowrap;
}
.badge-active{background:var(--green-lightest);color:var(--green-dark);}
.badge-inactive{background:var(--error-50);color:var(--error-700);}
.badge-gold{background:var(--gold);color:var(--green-darkest);}

/* Horizontal carousels */
[data-carousel]{
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
[data-carousel]::-webkit-scrollbar{display:none;}
.bleed-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:1px var(--gutter);
  scroll-padding-left:var(--gutter);
}
.bleed-track > *{scroll-snap-align:start;}

.scroll-progress{
  position:relative;
  height:4px;
  margin-top:32px;
  border-radius:200px;
  background:var(--gray-200);
  overflow:hidden;
}
.scroll-progress-thumb{
  position:absolute;left:0;top:0;bottom:0;
  width:39%;
  border-radius:200px;
  background:var(--green-dark);
  transition:transform .1s linear;
}

.seg-bars{display:flex;gap:12px;}
.seg-bars .seg{
  flex:1 1 0;height:4px;padding:0;border:none;border-radius:200px;
  background:var(--gray-200);cursor:pointer;transition:background .2s;
}
.seg-bars .seg.is-active{background:var(--green-dark);}
.seg-bars--mobile{display:none;}

.round-btn{
  width:42px;height:42px;padding:8px;
  border-radius:200px;
  border:1px solid var(--gray-200);
  background:var(--gray-25);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.round-btn:hover{background:var(--gray-100);}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(253,253,253,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:rgba(253,253,253,.8);
  border-bottom-color:rgba(8,34,0,.08);
  box-shadow:0 1px 12px rgba(8,34,0,.04);
}
/* Three columns so the nav sits exactly in the centre */
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  height:64px;
}
.logo{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:22px;
  letter-spacing:1.1px;
  color:var(--green-darkest);
  justify-self:start;
  transition:opacity .2s ease;
}
.logo:hover{opacity:.75;}
.logo-mark{width:20.2px;height:15.2px;}
.nav-desktop{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  line-height:20px;
  letter-spacing:-.01em;
}
.nav-link{
  padding:8px 14px;
  border-radius:200px;
  color:rgba(8,34,0,.72);
  white-space:nowrap;
  transition:color .2s ease;
}
.nav-link:hover{color:var(--green-darkest);}
.nav-link:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.header-cta{
  justify-self:end;
  flex-shrink:0;
  padding:9px 20px;
  font-size:14px;
  line-height:20px;
  font-weight:600;
  letter-spacing:-.005em;
}
.hamburger-btn{
  display:none;
  position:relative;
  width:40px;
  height:40px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
  z-index:110;
}
.hamburger-line{
  position:absolute;
  right:8px;
  height:2px;
  border-radius:2px;
  background:var(--green-darkest);
  transition:transform .3s ease, opacity .3s ease, top .3s ease, width .3s ease;
}
.hamburger-line--1{top:12px;width:25px;}
.hamburger-line--2{top:19.5px;width:20px;}
.hamburger-line--3{top:27px;width:15px;}
.hamburger-btn.is-active .hamburger-line--1{top:19.5px;width:25px;transform:rotate(45deg);}
.hamburger-btn.is-active .hamburger-line--2{opacity:0;}
.hamburger-btn.is-active .hamburger-line--3{top:19.5px;width:25px;transform:rotate(-45deg);}

@media (max-width:1023px){
  .nav-desktop,.header-cta{display:none;}
  .hamburger-btn{display:inline-flex;}
  .header-inner{display:flex;justify-content:space-between;}
}

/* =========================================================
   Mobile nav overlay
   ========================================================= */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:120;
  width:100%;
  max-width:100vw;
  height:100dvh;
  background:linear-gradient(180deg,#0c3101,#082200);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px 16px 24px;
  opacity:0;
  transition:opacity .25s ease;
  visibility:hidden;
  overflow:hidden;
}
.mobile-nav.is-open{opacity:1;visibility:visible;}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;}
.logo--light{color:var(--green-lightest);font-size:19.14px;letter-spacing:.96px;gap:6.13px;width:auto;}
.logo--light .logo-mark{width:17.56px;height:13.21px;}
.mobile-nav-close{
  width:33px;height:33px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
}
.mobile-nav-close img{width:33px;height:33px;}
.mobile-nav-panel{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  padding-top:48px;
  overflow-y:auto;
  overflow-x:clip;
}
.mobile-nav-links{display:flex;flex-direction:column;gap:40px;}
.mobile-nav-link{font-size:18px;line-height:28px;color:#fff;}
.mobile-nav-link:hover{color:var(--lime);}
.mobile-nav-panel .btn-block{flex-shrink:0;}

/* Open / close motion: panel fades + settles, items cascade in */
.mobile-nav{
  translate:0 -12px;
  transition:opacity .28s ease, translate .38s cubic-bezier(.16,1,.3,1), visibility 0s linear .28s;
}
.mobile-nav.is-open{
  translate:0 0;
  transition:opacity .28s ease, translate .38s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.mobile-nav .mobile-nav-link,
.mobile-nav .mobile-nav-panel > .btn{
  opacity:0;
  translate:0 14px;
  transition:opacity .2s ease, translate .2s ease;
}
.mobile-nav.is-open .mobile-nav-link,
.mobile-nav.is-open .mobile-nav-panel > .btn{
  opacity:1;
  translate:0 0;
  transition:opacity .45s ease, translate .55s cubic-bezier(.16,1,.3,1), color .2s ease;
}
.mobile-nav.is-open .mobile-nav-link:nth-child(1){transition-delay:.08s;}
.mobile-nav.is-open .mobile-nav-link:nth-child(2){transition-delay:.13s;}
.mobile-nav.is-open .mobile-nav-link:nth-child(3){transition-delay:.18s;}
.mobile-nav.is-open .mobile-nav-link:nth-child(4){transition-delay:.23s;}
.mobile-nav.is-open .mobile-nav-panel > .btn{transition-delay:.3s;}
@media (prefers-reduced-motion:reduce){
  .mobile-nav,.mobile-nav.is-open,
  .mobile-nav .mobile-nav-link,.mobile-nav .mobile-nav-panel > .btn{translate:none;transition-duration:0s;transition-delay:0s;}
}

/* =========================================================
   Hero
   ========================================================= */
.hero{padding:0 32px 72px;}
.hero-panel{
  background:linear-gradient(180deg,#144f19,#082200);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-xl);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  padding:72px 24px 0;
  overflow:hidden;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
}
.hero-bird{width:72px;height:54.17px;}
.hero-text{display:flex;flex-direction:column;gap:4px;max-width:644px;color:#fff;}
.hero-text h1{font-weight:900;font-size:56px;line-height:72px;}
.hero-sub{font-size:24px;line-height:32px;max-width:540px;margin:0 auto;}
.hero-phone{width:366px;height:auto;}

/* Short desktop screens: tighten the hero so the whole panel —
   including the phone's Sell / Buy buttons — fits above the fold.
   Copy block ≈ 353px + header ≈ 90px; the phone takes what's left. */
@media (min-width:768px) and (max-height:964px){
  .hero-panel{padding-top:40px;gap:24px;}
  .hero-copy{gap:16px;}
  .hero-bird{width:58px;height:43.6px;}
  .hero-text h1{font-size:48px;line-height:56px;}
  .hero-sub{font-size:20px;line-height:28px;}
  .hero-phone{
    width:auto;
    height:clamp(240px, calc(100svh - 443px), 408px);
  }
}

/* =========================================================
   How it works — steps carousel
   ========================================================= */
.how-it-works .section-heading{margin-bottom:32px;}
.step-card{
  flex:0 0 384px;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--gray-200);
  background:var(--white);
  display:flex;
  flex-direction:column;
  gap:24px;
}
.step-num{
  width:46px;height:46px;
  border-radius:200px;
  background:var(--green-dark);
  color:#fff;
  font-weight:700;
  font-size:20px;
  line-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.step-copy{display:flex;flex-direction:column;gap:8px;}
.step-card h3{color:var(--green-dark);font-size:20px;line-height:32px;letter-spacing:.04px;}
.step-card p{font-size:16px;line-height:24px;}

/* =========================================================
   App showcase
   ========================================================= */
.showcase{padding:72px 0;}
.showcase-row{
  display:grid;
  grid-template-columns:1fr 384px;
  gap:24px;
}
.showcase-phone{
  position:relative;
  height:581px;
  overflow:hidden;
}
.showcase-phone img{
  position:absolute;
  top:31.86px;
  left:50%;
  transform:translateX(-50%);
  width:380px;
  max-width:none;
}
.showcase-side{display:flex;flex-direction:column;gap:24px;}

.status-card{padding:24px;display:flex;flex-direction:column;gap:40px;}
.status-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.status-label{font-size:14px;line-height:22px;font-weight:500;}
.status-body{display:flex;flex-direction:column;gap:8px;}
.status-title{font-size:24px;line-height:32px;font-weight:600;}
.status-change{
  display:flex;align-items:center;gap:9px;
  font-size:32px;line-height:47px;font-weight:700;
  color:var(--green-dark);
  white-space:nowrap;
}
.status-change .status-live{align-self:flex-start;margin:6px 0 0 -6px;}
.status-foot{font-size:14px;line-height:22px;font-weight:500;color:var(--gray-500);}

.chart-card{
  flex:1;
  min-height:300px;
  position:relative;
  overflow:hidden;
  background:var(--green-darkest);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  color:#fff;
}
.chart-tabs{
  position:relative;z-index:1;
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:200px;
  background:rgba(255,255,255,.12);
}
.chart-tab{
  flex:1 1 0;
  background:none;border:none;cursor:pointer;
  padding:4px 10px;border-radius:200px;
  font-size:12px;line-height:24px;font-weight:600;
  color:var(--green-lightest);
  white-space:nowrap;
}
.chart-tab{position:relative;z-index:1;}
.chart-tab.active{color:var(--green-darkest);}
.chart-tab:focus{outline:none;}
.chart-tab:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}
/* Single sliding pill behind the active tab (positioned by JS) */
.chart-tab-pill{
  position:absolute;
  top:4px;bottom:4px;left:0;
  width:0;
  border-radius:200px;
  background:var(--green-light);
  box-shadow:0 2px 8px rgba(79,227,128,.25);
  transition:translate .55s cubic-bezier(.65,0,.35,1), width .55s cubic-bezier(.65,0,.35,1);
}
/* Fallback before JS measures: highlight the active tab directly */
.chart-tabs:not(.has-pill) .chart-tab.active{background:var(--green-light);}
.chart-price{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:14px;line-height:20px;
}
.chart-price-value{
  display:flex;align-items:flex-start;gap:4px;
  font-size:16px;line-height:20px;font-weight:700;color:var(--green-lightest);
}
.chart-price-sym{font-size:12px;}
.chart-graph{
  position:absolute;
  left:-1px;right:-1px;
  top:calc(50% + 64.18px);
  transform:translateY(-50%);
  height:260.43px;
}
.chart-svg{width:100%;height:100%;display:block;overflow:visible;}

.chart-tab{transition:color .35s ease .1s;}
.chart-price-num,#statusPrice,#statusPct{font-variant-numeric:tabular-nums;}
.badge-metal{transition:background .3s ease;}

.disclaimer{
  margin-top:12px;
  font-size:14px;
  color:var(--gray-700);
  text-align:center;
}

.feature-cards-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:var(--container);
  margin:24px auto 0;
  padding:0 16px;
}
.feature-card{
  position:relative;
  height:270px;
  padding:24px;
  overflow:hidden;
}
.feature-card-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;}
.feature-card-copy h3{font-size:24px;line-height:32px;letter-spacing:.048px;}
.feature-card-copy p{font-size:18px;line-height:28px;color:var(--gray-700);}
.feature-art{position:absolute;overflow:hidden;pointer-events:none;}
.feature-art img{position:absolute;max-width:none;}
.feature-art--bank{width:189px;height:153px;bottom:-29px;right:-53px;}
.feature-art--bank img{width:171.81%;height:115.73%;left:-35.91%;top:-6.42%;}
.feature-art--gold{width:248px;height:169px;bottom:-49px;right:-63px;}
.feature-art--gold img{width:144.74%;height:115.48%;left:-22.37%;top:-7.74%;}
.feature-art--referral{width:282px;height:154px;bottom:-45px;right:-69px;}
.feature-art--referral img{inset:0;width:100%;height:100%;object-fit:cover;}

/* =========================================================
   Why Goldfinch — feature carousel
   ========================================================= */
.why{padding:0 0 72px;}
.why .section-heading{margin-bottom:40px;}
.why-card{
  flex:0 0 321px;
  padding:24px;
  background:var(--gray-25);
  border:1px solid var(--gray-200);
  border-radius:24px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.why-icon{
  width:42px;height:42px;padding:8px;
  border-radius:200px;
  background:#fff;
  border:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:center;
}
.why-copy{display:flex;flex-direction:column;gap:8px;}
.why-card h3{font-size:18px;line-height:28px;}
.why-card p{font-size:16px;line-height:24px;}
.why-nav{display:flex;justify-content:center;gap:12px;margin-top:24px;}

/* =========================================================
   CTA banner
   ========================================================= */
.cta-banner{padding:0 0 72px;}
.cta-banner-inner{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(180deg,#144e18,#082200);
  padding:72px 24px;
  display:flex;
  justify-content:center;
}
.cta-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
}
.cta-content h2{color:#fff;max-width:490px;}
.cta-gold{position:absolute;overflow:hidden;pointer-events:none;width:602px;height:412px;top:-39px;}
.cta-gold img{position:absolute;max-width:none;width:144.74%;height:115.48%;left:-22.37%;top:-7.74%;}
.cta-gold--left{left:-301px;}
.cta-gold--right{right:-314px;transform:scaleX(-1);}

/* =========================================================
   Savings plan
   ========================================================= */
.savings-plan{padding:0 0 72px;}
.savings-plan .section-heading{margin-bottom:48px;}
.savings-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:1fr auto;
  grid-template-areas:
    "plans phone created"
    "plans phone payment";
  gap:24px;
  height:581px;
}
.savings-carousel{display:contents;}

.savings-phone{
  grid-area:phone;
  position:relative;
  overflow:hidden;
}
.savings-phone img{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:337.5px;
  max-width:none;
}

.savings-plans-card{
  grid-area:plans;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}
.savings-card-title{font-size:20px;line-height:30px;font-weight:700;}
.plan-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;}
.plan-row{
  flex:1 1 0;
  border:1px solid var(--gray-200);
  border-radius:12px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.plan-amount{display:flex;align-items:flex-end;gap:4px;line-height:17.69px;white-space:nowrap;}
.plan-amount strong{font-size:16px;font-weight:600;}
.plan-per{font-size:12px;font-weight:500;color:var(--gray-600);margin-left:-2.5px;}
.plan-next{font-size:12px;line-height:18px;color:var(--gray-700);}

.savings-created-card{
  grid-area:created;
  background:var(--gray-25);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  padding:16px;
}
.savings-created-card h3{font-size:30px;line-height:38px;}
.savings-created-card p{font-size:16px;line-height:24px;color:var(--gray-700);}
.savings-created-art{position:relative;overflow:hidden;width:122.43px;height:158.75px;flex-shrink:0;}
.savings-created-art img{position:absolute;max-width:none;width:139.56%;height:107.63%;left:-19.78%;top:-3.81%;}

.payment-method-card{
  grid-area:payment;
  background:var(--gray-25);
  padding:24px;
  overflow:hidden;
}
.pm-row{
  border-bottom:1px solid var(--gray-200);
  padding:12px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.pm-row--toggle{align-items:center;}
.pm-row--schedule{flex-direction:column;border-bottom:none;}
.pm-label{font-size:14px;line-height:20px;color:var(--gray-700);}
.pm-sub{font-size:12px;line-height:18px;color:var(--gray-700);margin-top:4px;}
.toggle{
  width:36px;height:20px;border-radius:12px;
  background:var(--green);
  border:none;position:relative;cursor:pointer;flex-shrink:0;
  padding:2px;
  transition:background .2s;
}
.toggle-knob{
  display:block;width:16px;height:16px;border-radius:50%;background:#fff;
  transform:translateX(16px);transition:transform .2s;box-shadow:var(--shadow-sm);
}
.toggle:not(.on){background:var(--gray-200);}
.toggle:not(.on) .toggle-knob{transform:translateX(0);}
.freq-options{display:flex;gap:16px;}
.radio-option{
  display:flex;align-items:center;gap:8px;padding:4px 0;
  font-size:14px;line-height:20px;color:var(--gray-700);cursor:pointer;
}
.radio-option input{position:absolute;opacity:0;width:0;height:0;}
.radio-dot{
  width:20px;height:20px;border-radius:50%;
  border:1px solid var(--gray-300);background:#fff;
  position:relative;flex-shrink:0;
}
.radio-option input:checked + .radio-dot{border-color:var(--green);background:var(--green-lightest);}
.radio-option input:checked + .radio-dot::after{
  content:'';position:absolute;inset:5px;border-radius:50%;background:var(--green);
}
.radio-option input:focus-visible + .radio-dot{outline:2px solid var(--green);outline-offset:2px;}
.days-row{display:flex;gap:8px;margin-top:8px;}
.day-col{
  flex:0 0 56px;
  border:1px solid var(--gray-200);border-radius:4px;
  padding:4px 0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--gray-700);
}
.day-col span{font-size:12px;line-height:18px;}
.day-col strong{font-size:16px;line-height:24px;font-weight:400;}
.day-col--active{border-color:var(--green);background:var(--green-lightest);}
.day-col--active strong{color:var(--green-darkest);}

@media (max-width:1199px) and (min-width:768px){
  .savings-grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:581px auto;
    grid-template-areas:
      "plans phone"
      "created payment";
    height:auto;
  }
  .savings-created-card{padding:24px;}
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:0 0 72px;}
.faq-inner{max-width:832px;}
.faq .section-heading{margin-bottom:40px;}
.faq-title{line-height:1;}
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{
  border:1px solid var(--gray-200);
  border-radius:24px;
  background:#fff;
  transition:border-color .2s;
}
.faq-item.is-open{border-color:var(--green);}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:none;
  border:none;
  cursor:pointer;
  padding:24px;
  text-align:left;
  font-weight:700;
  font-size:16px;
  line-height:24px;
  color:var(--green-darkest);
  transition:padding .25s ease;
}
.faq-item.is-open .faq-question{padding-bottom:16px;}
.faq-chevron{flex-shrink:0;transform:rotate(180deg);transition:transform .2s;}
.faq-item.is-open .faq-chevron{transform:none;}
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s ease;
}
.faq-item.is-open .faq-answer{grid-template-rows:1fr;}
.faq-answer p{
  overflow:hidden;
  min-height:0;
  padding:0 24px;
  font-size:14px;
  line-height:20px;
  color:var(--green-darkest);
  transition:padding .25s ease;
}
.faq-item.is-open .faq-answer p{padding-bottom:24px;}

/* Accordion motion: height eases open, answer fades in just after */
.faq-item{transition:border-color .35s ease;}
.faq-question,.faq-answer p{transition:padding .45s cubic-bezier(.22,1,.36,1);}
.faq-chevron{transition:transform .45s cubic-bezier(.22,1,.36,1);}
.faq-answer{transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1);}
.faq-answer p{opacity:0;transition:padding .45s cubic-bezier(.22,1,.36,1), opacity .2s ease;}
.faq-item.is-open .faq-answer p{opacity:1;transition:padding .45s cubic-bezier(.22,1,.36,1), opacity .35s ease .12s;}
@media (prefers-reduced-motion:reduce){
  .faq-item,.faq-question,.faq-chevron,.faq-answer,.faq-answer p,.faq-item.is-open .faq-answer p{transition-duration:0s;transition-delay:0s;}
}

/* =========================================================
   Waitlist
   ========================================================= */
.waitlist{padding:0 0 72px;}
.waitlist-inner{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#144f19,#0a2a01);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-xl);
  padding:40px;
  min-height:288px;
  display:flex;
  align-items:center;
}
.waitlist-art{
  position:absolute;
  left:172px;top:17.83px;
  width:332px;height:430px;
  overflow:hidden;
  pointer-events:none;
}
.waitlist-art img{position:absolute;max-width:none;width:139.56%;height:107.63%;left:-19.78%;top:-3.81%;}
.waitlist-content{
  position:relative;z-index:1;
  flex:1;
  margin-left:597px;
  display:flex;
  flex-direction:column;
  gap:16px;
  color:#fff;
}
.waitlist-content h2{font-size:36px;line-height:44px;}
.waitlist-sub{font-size:16px;line-height:24px;margin-bottom:8px;}

@media (max-width:1199px) and (min-width:768px){
  .waitlist-art{left:4%;}
  .waitlist-content{margin-left:45%;}
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{padding:72px 0;}
.footer-top{display:flex;gap:48px;align-items:flex-start;}
.footer-col{display:flex;flex-direction:column;}
.footer-col--contact{
  flex:0 0 370px;
  align-self:stretch;
  padding:8px 0;
  gap:12px;
  border-right:1px solid var(--gray-300);
}
.footer-contact-row{display:flex;align-items:flex-start;gap:16px;font-size:16px;line-height:24px;padding-right:24px;}
.footer-contact-row--center{align-items:center;padding-bottom:12px;}
.footer-contact-row img{flex-shrink:0;}
.footer-contact-row a:hover{color:var(--green-dark);}
.footer-col--links{flex:1 1 0;min-width:0;}
.footer-col--links a{padding:8px 0;font-size:16px;line-height:24px;}
.footer-col--links a:hover{color:var(--green-dark);}
.footer-newsletter{flex:0 0 370px;gap:12px;}
.footer-newsletter-copy{display:flex;flex-direction:column;gap:8px;line-height:16px;}
.footer-newsletter-title{font-size:16px;font-weight:700;}
.footer-newsletter-sub{font-size:14px;}
.footer-newsletter-fields{display:flex;flex-direction:column;gap:16px;}
.footer-newsletter .field label{font-size:16px;line-height:24px;font-weight:700;color:var(--green-darkest);}
.footer-newsletter input{
  width:100%;
  border:1px solid var(--gray-300);
  border-radius:200px;
  background:#fff;
  padding:8px 14px;
  font-size:16px;line-height:24px;
  font-family:inherit;
  color:var(--green-darkest);
  box-shadow:var(--shadow-xs);
}
.footer-newsletter input::placeholder{color:var(--gray-500);}
.footer-newsletter input:focus{outline:2px solid var(--green);outline-offset:1px;}
.footer-divider{width:100%;height:1px;margin:40px 0 32px;}
.footer-legal{display:flex;flex-direction:column;gap:12px;text-align:center;font-size:14px;line-height:22px;color:var(--gray-600);}
.footer-disclaimer{font-size:inherit;line-height:inherit;}
.footer-copy{font-size:inherit;line-height:inherit;}
.footer-legal-link{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px;margin-left:2px;white-space:nowrap;}
@media (max-width:640px){
  .footer-legal-link{display:block;margin:4px 0 0;white-space:normal;}
}

@media (max-width:1199px) and (min-width:768px){
  .footer-top{flex-wrap:wrap;}
  .footer-col--contact{flex-basis:100%;border-right:none;}
  .footer-newsletter{flex:1 1 300px;}
}

/* =========================================================
   Modal
   ========================================================= */
.field{display:flex;flex-direction:column;gap:6px;}
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,34,0,.5);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease, visibility .25s;
}
.modal-overlay.is-open{opacity:1;visibility:visible;}
.modal{
  position:relative;
  background:#fff;
  border-radius:24px;
  padding:24px;
  max-width:690px;
  width:100%;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  translate:0 16px;
  scale:.98;
  transition:translate .3s cubic-bezier(.16,1,.3,1), scale .3s cubic-bezier(.16,1,.3,1);
}
.modal-overlay.is-open .modal{translate:0 0;scale:1;}
.modal-body{display:flex;flex-direction:column;gap:24px;}
.modal-body[hidden]{display:none;}
.modal-head{display:flex;align-items:flex-start;gap:8px;}
.modal-head > div{flex:1;min-width:0;}
.modal-eyebrow{color:var(--green-darkest);}
.modal-title{font-family:var(--font-serif);font-weight:700;font-size:36px;line-height:44px;color:var(--green-darkest);}
.modal-close{
  width:33px;height:33px;padding:0;flex-shrink:0;
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-close img{width:33px;height:33px;}
#waitlistForm{display:flex;flex-direction:column;gap:32px;}
.modal-fields{display:flex;flex-direction:column;gap:16px;}
#waitlistForm .field label{font-size:16px;line-height:24px;font-weight:500;color:var(--green-darkest);}
#waitlistForm input{
  width:100%;
  border:1px solid transparent;
  border-radius:200px;
  background:var(--gray-100);
  padding:12px 14px;
  font-size:16px;line-height:24px;
  font-family:inherit;
  color:var(--green-darkest);
  box-shadow:var(--shadow-xs);
  transition:border-color .15s, background .15s;
}
#waitlistForm input::placeholder{color:var(--gray-500);}
#waitlistForm input:focus{outline:none;border-color:var(--green);background:#fff;}

.modal-sub{color:var(--gray-700);font-size:16px;line-height:24px;}

@media (max-width:767px){
  .modal-overlay{padding:16px;}
  .modal{max-height:calc(100dvh - 32px);}
}

body.modal-locked{overflow:hidden;}

/* =========================================================
   Hero panel glow
   ========================================================= */
.hero-panel{position:relative;isolation:isolate;}
.hero-copy,.hero-panel picture{position:relative;z-index:1;}
.hero-panel picture{display:block;perspective:1200px;}
/* Soft lime glow behind the phone */
.hero-panel::before{
  content:'';
  position:absolute;
  left:50%;bottom:-220px;
  width:760px;height:560px;
  translate:-50% 0;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(124,255,124,.28), rgba(79,227,128,.08) 60%, transparent);
  pointer-events:none;
  z-index:0;
}
/* Second, fainter light that wanders on its own rhythm */
.hero-panel::after{
  content:'';
  position:absolute;
  left:50%;bottom:-160px;
  width:520px;height:420px;
  translate:-50% 0;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(176,255,140,.16), rgba(79,227,128,.05) 60%, transparent);
  pointer-events:none;
  z-index:0;
  opacity:.9;
}
/* =========================================================
   Static site — no animations; only hover transitions are kept
   ========================================================= */
*,*::before,*::after{animation:none !important;}
:not(.btn, .store-btn, .logo, .nav-link, .legal-toc-link, .mobile-nav, .mobile-nav-link, .hamburger-line, .faq-item, .faq-question, .faq-chevron, .faq-answer, .faq-answer p),
::before,
:not(.btn-arrow)::after{transition:none !important;}

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width:1023px){
  .hero-text h1{font-size:44px;line-height:1.2;}
  .showcase-row{grid-template-columns:1fr;}
  .showcase-side{flex-direction:row;}
  .showcase-side .card{flex:1;}
  .chart-card{min-height:281px;}
}

/* =========================================================
   Mobile (Figma 393 frame)
   ========================================================= */
@media (max-width:767px){
  h2{font-size:24px;line-height:1.1;}
  .section-heading h2{margin-top:8px;}
  .section-sub{margin-top:12px;}

  /* Header */
  .site-header{background:#fff;}
  .header-inner{padding:16px;height:auto;}
  .logo{font-size:19.14px;letter-spacing:.96px;gap:6.13px;width:auto;}
  .logo-mark{width:17.56px;height:13.21px;}

  /* Hero */
  .hero{padding:0 16px 40px;}
  .hero-panel{border-radius:24px;padding:48px 24px 0;gap:41px;}
  .hero-bird{width:40px;height:30.1px;}
  .hero-text{gap:8px;}
  .hero-text h1{font-size:30px;line-height:1.1;}
  .hero-sub{font-size:16px;line-height:24px;}
  .hero-copy .store-buttons{width:100%;}
  .store-buttons .store-btn{flex:1 1 0;width:auto;}
  .hero-phone{width:326px;}

  /* Steps — stacked, overlapping cards */
  .how-it-works{padding-bottom:16px;}
  .how-it-works .section-heading{margin-bottom:16px;}
  .steps-track{
    display:block;
    overflow:visible;
    padding:0 16px;
  }
  .step-card{height:230px;}
  .step-card + .step-card{margin-top:-24px;}
  .how-it-works .scroll-progress{display:none;}

  /* Showcase */
  .showcase{padding:0 0 40px;}
  .showcase-row{gap:16px;}
  .showcase-phone{height:380px;}
  .showcase-phone img{top:32px;width:240px;height:auto;}
  .showcase-side{flex-direction:column;gap:16px;}
  .showcase-side .card{flex:none;}
  .status-card{gap:40px;}
  .status-title{font-size:20px;line-height:24px;}
  .status-change{font-size:24px;line-height:48px;gap:8px;}
  .status-change .status-live{margin-top:12px;}
  .chart-card{flex:none;height:281px;min-height:0;}
  .chart-tab{padding:8px 10px;}
  .chart-graph{top:95px;transform:none;}
  .disclaimer{margin-top:16px;}

  .seg-bars--mobile{display:flex;margin-top:24px;}

  .feature-cards-track{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    max-width:none;
    margin-top:40px;
    padding:1px 16px;
    scroll-padding-left:16px;
  }
  .feature-card{flex:0 0 349px;max-width:calc(100vw - 44px);scroll-snap-align:start;}
  .feature-card-copy p{font-size:16px;line-height:24px;}
  .feature-art--bank{bottom:-39px;right:-78px;}
  .feature-art--gold{bottom:-59px;right:-88px;}
  .feature-art--referral{width:254px;height:139px;bottom:-40px;right:-45px;}

  /* Why */
  .why{padding-bottom:40px;}
  .why .section-heading{margin-bottom:16px;}
  .why-card{max-width:calc(100vw - 72px);}
  .why-nav{display:none;}

  /* CTA */
  .cta-banner{padding-bottom:40px;}
  .cta-banner-inner{height:393px;padding:48px 24px 72px;align-items:flex-start;}
  .cta-content{width:100%;}
  .cta-content h2{font-size:32px;line-height:1.1;}
  .cta-content .store-buttons{width:100%;}
  .cta-gold--right{display:none;}
  .cta-gold--left{left:-4px;top:246px;width:371px;height:254px;}

  /* Savings */
  .savings-plan{padding-bottom:40px;}
  .savings-plan .section-heading{margin-bottom:16px;}
  .savings-grid{display:flex;flex-direction:column;gap:16px;height:auto;}
  .savings-phone{height:376px;}
  .savings-phone img{top:-62px;width:250px;height:auto;}
  .savings-carousel{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin:0 -16px;
    padding:1px 16px;
    scroll-padding-left:16px;
  }
  .savings-carousel > .card{flex:0 0 328px;max-width:calc(100vw - 48px);height:270px;scroll-snap-align:start;}
  .savings-created-card{order:1;}
  .savings-created-card h3{font-size:24px;}
  .payment-method-card{order:2;}
  .payment-method-card .pm-row:first-child{padding-top:0;}
  .payment-method-card .pm-row--schedule{padding-bottom:0;}
  .savings-plans-card{order:3;padding:24px 24px 0;gap:16px;}
  .plan-list{gap:12px;overflow-y:auto;padding-bottom:24px;}
  .plan-row{flex:none;}
  .savings-plan .seg-bars--mobile{margin-top:16px;}

  /* FAQ */
  .faq{padding-bottom:40px;}
  .faq .section-heading{margin-bottom:24px;}
  .faq-title{line-height:1;}

  /* Waitlist */
  .waitlist{padding-bottom:40px;}
  .waitlist-inner{border-radius:24px;padding:24px 16px;min-height:0;}
  .waitlist-art{display:none;}
  .waitlist-content{margin-left:0;}
  .waitlist-heading{text-align:center;}
  .waitlist-content h2{font-size:32px;}

  /* Footer */
  .site-footer{padding:40px 0;}
  .footer-top{flex-direction:column;gap:24px;align-items:stretch;}
  .footer-col--contact{flex:none;border-right:none;border-bottom:1px solid var(--gray-200);padding-bottom:24px;}
  .footer-newsletter{flex:none;}
  .footer-legal{text-align:left;}
  .br-desktop{display:none;}
}

/* =========================================================
   Desktop rhythm — more breathing room between sections
   (mobile keeps its 40px rhythm from the Figma frame)
   ========================================================= */
@media (min-width:1024px){
  :root{--section-gap:72px;}
  .hero{padding-bottom:var(--section-gap);}
  .showcase{padding:var(--section-gap) 0;}
  .why,
  .cta-banner,
  .savings-plan,
  .faq,
  .waitlist{padding-bottom:var(--section-gap);}
  .site-footer{padding-top:72px;}

  /* Slightly more air between each heading and its content */
  .how-it-works .section-heading{margin-bottom:48px;}
  .why .section-heading{margin-bottom:56px;}
  .savings-plan .section-heading{margin-bottom:64px;}
  .faq .section-heading{margin-bottom:56px;}
  .section-heading .eyebrow{margin-bottom:4px;}
}

/* =========================================================
   Legal pages (privacy.html, terms.html)
   ========================================================= */
section[id]{scroll-margin-top:96px;}
.legal-page{padding:0 0 40px;}

/* Hero — plain, centered title */
.legal-hero{
  color:var(--green-darkest);
  text-align:center;
}
.legal-hero-inner{display:flex;flex-direction:column;align-items:center;padding-top:72px;padding-bottom:40px;}
.legal-hero h1{font-weight:700;font-size:52px;line-height:62px;max-width:820px;}
@media (min-width:1024px){
  .legal-hero h1{max-width:none;white-space:nowrap;font-size:min(52px, 4.4vw);}
}
.legal-hero-sub{margin-top:16px;max-width:620px;font-size:18px;line-height:28px;color:var(--gray-700);}
.legal-hero-updated{margin-top:20px;font-size:14px;line-height:20px;color:var(--gray-500);}
.legal-hero-updated strong{font-weight:500;}

/* Two-column layout: sticky side nav + document */
.legal-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:80px;
  align-items:start;
  margin-top:16px;
}
.legal-toc{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto;padding-right:8px;}
.legal-toc-title{
  font-family:var(--font-serif);font-size:16px;line-height:28px;color:var(--gray-700);
  padding:0 12px 12px;border-bottom:1px solid var(--gray-200);margin-bottom:8px;
}
.legal-toc-links{display:flex;flex-direction:column;}
.legal-toc-link{
  display:flex;gap:10px;
  padding:7px 12px;border-radius:10px;
  font-size:14px;line-height:20px;color:var(--gray-600);
  transition:background .2s ease, color .2s ease;
}
.legal-toc-num{flex:0 0 18px;color:var(--gray-400);font-variant-numeric:tabular-nums;}
.legal-toc-link:hover{color:var(--green-darkest);background:var(--gray-100);}
.legal-toc-link.is-active{color:var(--green-darkest);font-weight:600;background:var(--green-lightest);}
.legal-toc-link.is-active .legal-toc-num{color:var(--green-dark);}
.legal-toc-mobile{display:none;}

/* Document */
.legal-doc{max-width:760px;font-size:17px;line-height:28px;color:var(--gray-700);overflow-wrap:anywhere;}
.legal-section{padding:48px 0;border-top:1px solid var(--gray-200);}
.legal-section:first-child{padding-top:0;border-top:none;}
.legal-overview > p:first-child:not(.legal-callout){font-size:20px;line-height:32px;color:var(--green-darkest);}
.legal-doc h2{
  font-size:32px;line-height:40px;color:var(--green-darkest);
  margin:0 0 20px;
}
.legal-num{color:inherit;}
.legal-doc h3{font-size:18px;line-height:28px;color:var(--green-darkest);margin:32px 0 8px;}
.legal-doc h4{font-size:13px;line-height:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);margin:20px 0 4px;}
.legal-doc strong{color:var(--green-darkest);}
.legal-doc p + p,.legal-doc p + ul,.legal-doc ul + p,.legal-doc p + ol,.legal-doc ol + p{margin-top:16px;}
.legal-doc ul,.legal-doc ol{margin:0;padding-left:22px;}
.legal-doc li{padding-left:4px;}
.legal-doc li + li{margin-top:10px;}
.legal-doc li::marker{color:inherit;}
.legal-doc ol.legal-alpha{list-style:lower-alpha;}
.legal-doc ol.legal-alpha > li::marker{font-weight:600;}
.legal-doc a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px;}
.legal-callout{
  position:relative;
  margin:24px 0;padding:16px 20px 16px 50px;
  background:#fffbf0;
  border:1px solid #f7e3b5;
  border-radius:14px;
  font-size:13px;line-height:21px;letter-spacing:.01em;
}
.legal-callout::before{
  content:'';
  position:absolute;left:20px;top:18px;
  width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c98a2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.legal-doc .legal-callout strong{color:#8a5a1c;font-weight:600;}
.legal-doc p + .legal-callout,.legal-callout + p{margin-top:24px;}
.legal-overview > .legal-callout:first-child{margin-top:0;}
.legal-category{
  margin-top:24px;padding:28px;
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);
}
.legal-category h3{margin-top:0;font-size:20px;line-height:28px;}
.legal-category h4:first-of-type{margin-top:16px;}
.legal-blank{background:#ffef5c;color:inherit;padding:0 2px;}

@media (max-width:1023px){
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:0;margin-top:16px;}
  .legal-toc{display:none;}
  .legal-toc-mobile{
    display:block;margin-bottom:40px;
    background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  }
  .legal-toc-mobile summary{
    list-style:none;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;
    padding:16px 20px;font-weight:700;font-size:16px;line-height:24px;
  }
  .legal-toc-mobile summary::-webkit-details-marker{display:none;}
  .legal-toc-mobile summary::after{
    content:'';width:20px;height:20px;flex-shrink:0;
    background:url("assets/v2/icon-plan-chevron.svg") center/contain no-repeat;
    rotate:90deg;
  }
  .legal-toc-mobile[open] summary::after{rotate:-90deg;}
  .legal-toc-mobile .legal-toc-links{padding:0 8px 12px;border-top:1px solid var(--gray-200);padding-top:8px;}
  .legal-doc{max-width:none;}
}
@media (max-width:767px){
  .legal-hero-inner{padding-top:48px;padding-bottom:24px;}
    .legal-hero h1{font-size:34px;line-height:42px;}
  .legal-hero-sub{font-size:16px;line-height:24px;}
  .legal-doc{font-size:16px;line-height:26px;}
  .legal-overview > p:first-child:not(.legal-callout){font-size:18px;line-height:28px;}
  .legal-section{padding:36px 0;}
  .legal-doc h2{font-size:26px;line-height:34px;margin-bottom:16px;}
  .legal-category{padding:20px;}
  .legal-callout{padding:14px 16px 14px 44px;font-size:12px;line-height:19px;}
  .legal-callout::before{left:16px;top:16px;}
}