/*
 * Marketing landing page (app/views/home/index.html.erb and its partials).
 *
 * Loaded app-wide via `stylesheet_link_tag :app` (Propshaft bundles every
 * .css file under app/assets/**), not just on the homepage — so every
 * selector below is scoped under #fy. The reset and custom properties in
 * particular used to live on bare `*`/`:root` when this was an inline
 * <style> block on the page itself; they're deliberately scoped here so
 * they can't bleed into the rest of the app (e.g. the real <nav> in
 * shared/_main_nav.html.erb and shared/_mobile_nav.html.erb).
 */
:where(#fy, #fy *){box-sizing:border-box;margin:0;padding:0;}
#fy{
  /* References the app's real design tokens (app/assets/tailwind/application.css)
     wherever one exists, rather than a second hardcoded copy that can silently
     drift from it — which is exactly how --tx3 ended up equal to brand-pine's
     hex without ever being wired to it, carrying the same broken dark-surface
     contrast (2.65–2.99:1) until axe-core caught it. --tx3 maps to brand-mid,
     not brand-pine, for the same reason the app's own dark-mode "muted text"
     was repointed there: brand-pine only passes WCAG AA on light backgrounds
     (6.0:1 on white), brand-mid is what actually passes on these dark ones
     (6.86–7.74:1) — see docs/roadmap.md R-031. Values with no real-token
     equivalent (borders, pills, pricing accents) stay literal; they're this
     file's own decorative choices, not duplicates of something already named. */
  --bg:var(--color-brand-night);--bg-card:var(--color-brand-surface);--bg-subtle:#111f13;
  --tx:var(--color-brand-frost);--tx2:var(--color-brand-mid);--tx3:var(--color-brand-mid);
  --bd:rgba(255,255,255,0.08);--bd2:rgba(255,255,255,0.14);
  --forest:var(--color-brand-forest);--vit:var(--color-brand-vitality);--mint:var(--color-brand-mint);
  --hero:var(--color-brand-forest);
  --htx:#fff;--htx2:rgba(255,255,255,0.70);
  --pill:rgba(255,255,255,0.11);--pilltx:rgba(255,255,255,0.88);
  --prob:#111f13;--prob-bd:rgba(255,255,255,0.07);
  --screen:var(--color-brand-surface);--screen-bd:rgba(255,255,255,0.08);
  --grid-ln:#2a3c2c;
  --price-cs-bg:rgba(217,119,6,0.1);--price-cs-bd:rgba(217,119,6,0.18);--price-cs-tx:#fcd34d;
  --price-future-bg:rgba(74,222,128,0.06);--price-future-bd:rgba(74,222,128,0.14);--price-future-tx:var(--color-brand-vitality);
  font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--tx);background:var(--bg);
}
/* The nav bar is its own sticky element, outside .fy-header, because
   sticky positioning is confined to the parent's box — a nav inside the
   hero's wrapper would only stick for the hero's height and then leave
   with it. Same background as the hero so the two read as one band at the
   top of the page. Sections carry scroll-margin-top so in-page jumps land
   below the bar rather than under it. */
/* Translucent hero-green over a blur: over the hero itself it blends to
   the hero colour exactly, so the top of the page is still one band; over
   the darker sections below it's a frosted strip that keeps the white nav
   text on a green ground. The solid fallback is for browsers without
   backdrop-filter. */
.fy-topbar{position:sticky;top:0;z-index:40;background:var(--hero);padding:0 20px;}
@supports(backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .fy-topbar{background:color-mix(in oklab,var(--hero) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:0.5px solid rgba(255,255,255,0.08);}
}
.fy-topbar nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:54px;gap:10px;max-width:896px;margin:0 auto;}
#fy section[id]{scroll-margin-top:54px;}
.fy-header{background:var(--hero);padding:0 20px;}
.fy-logo{display:flex;align-items:center;gap:8px;text-decoration:none;justify-self:start;}
.fy-wm{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:500;letter-spacing:-0.3px;}
.fy-nav-links{display:flex;gap:1px;justify-self:center;}
.fy-nav-links a{font-size:12px;color:var(--htx2);text-decoration:none;padding:5px 9px;border-radius:7px;}
.fy-nav-links a:hover{color:var(--htx);}
.fy-signin{justify-self:end;}
.fy-signin a{font-size:12px;font-weight:500;color:var(--htx);text-decoration:none;padding:6px 14px;border-radius:8px;border:0.5px solid rgba(255,255,255,0.26);transition:background 0.15s;}
.fy-signin a:hover{background:rgba(255,255,255,0.08);}
@media(max-width:640px){
  .fy-nav-links{display:none;}
  /* Nav-links is hidden here, so drop to two tracks (logo | sign-in);
     otherwise sign-in auto-places into the centre `auto` track. */
  .fy-topbar nav{grid-template-columns:1fr auto;}
}
.fy-hero{padding:48px 20px 56px;text-align:center;}
.fy-eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--pill);color:var(--pilltx);font-size:11px;font-weight:500;letter-spacing:0.04em;padding:4px 11px;border-radius:20px;margin-bottom:20px;border:0.5px solid rgba(255,255,255,0.13);}
.fy-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--vit);flex-shrink:0;}
h1.fy-h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(36px,8vw,76px);font-weight:650;line-height:1.06;letter-spacing:-0.03em;color:var(--htx);margin-bottom:18px;}
h1.fy-h1 em{font-style:normal;color:var(--vit);}
.fy-hero-line{display:inline-block;}

/* Staggered drop-in for the hero heading lines */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.7s ease both; }
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.22s; }
.delay-300 { animation-delay: 0.36s; }
.delay-400 { animation-delay: 0.50s; }
.delay-500 { animation-delay: 0.64s; }
.delay-600 { animation-delay: 0.78s; }

/* These classes are used beyond the landing page — stylesheet_link_tag :app
   bundles this file into every layout, and shared/_coming_soon_hero uses the
   same staggered fade. The movement is decorative, so it goes away entirely
   when the reader has asked for less of it; without this the content still
   arrives, but slides, which is exactly what the preference is about. */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up { animation: none; }
}
.fy-hero-sub{font-size:15px;line-height:1.65;color:var(--htx2);max-width:460px;margin:0 auto 26px;}
.fy-ctas{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:22px;}
.fy-btn-p{font-size:13px;font-weight:500;padding:10px 20px;border-radius:9px;background:var(--vit);color:#0a2e14;text-decoration:none;border:none;cursor:pointer;display:inline-block;}
.fy-btn-g{font-size:13px;font-weight:400;padding:9px 20px;border-radius:9px;border:0.5px solid rgba(255,255,255,0.26);color:var(--htx);text-decoration:none;background:transparent;display:inline-block;}
.fy-trust{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.fy-trust span{font-size:11px;color:var(--htx2);display:flex;align-items:center;gap:3px;}
.fy-trust span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--mint);}
.fy-trust-sep{color:rgba(255,255,255,0.18);font-size:10px;}
.fy-section{padding:52px 20px;}
.fy-si{max-width:640px;margin:0 auto;}
.fy-label{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--mint);margin-bottom:9px;display:block;}
h2.fy-h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(21px,3.8vw,29px);font-weight:650;line-height:1.15;letter-spacing:-0.025em;color:var(--tx);margin-bottom:11px;}
.fy-sec-sub{font-size:14px;color:var(--tx2);line-height:1.65;margin-bottom:32px;max-width:480px;}
.fy-prob-bg{background:var(--prob);}
.fy-g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px;}
.fy-prob-card{background:var(--bg-card);border:0.5px solid var(--prob-bd);border-radius:13px;padding:18px;}
.fy-prob-icon{width:36px;height:36px;border-radius:9px;background:rgba(74,222,128,0.09);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--mint);margin-bottom:12px;}
.fy-prob-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;line-height:1.35;color:var(--tx);margin-bottom:6px;}
.fy-prob-card p{font-size:12px;line-height:1.6;color:var(--tx2);}
.fy-feat-card{background:var(--bg-card);border:0.5px solid var(--bd);border-radius:13px;padding:20px;display:flex;flex-direction:column;gap:10px;}
.fy-feat-icon{width:40px;height:40px;border-radius:10px;background:rgba(74,222,128,0.09);color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.fy-feat-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:600;line-height:1.35;color:var(--tx);}
.fy-feat-card p{font-size:12px;line-height:1.65;color:var(--tx2);}
.fy-feat-tag{display:inline-block;font-size:10px;font-weight:500;padding:2px 8px;border-radius:20px;margin-top:auto;align-self:flex-start;background:var(--price-future-bg);color:var(--price-future-tx);border:0.5px solid var(--price-future-bd);}
.fy-alt-bg{background:var(--prob);}
.fy-subhead{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--mint);margin:28px 0 12px;display:block;}
.fy-recipe-card{background:var(--bg-card);border:0.5px solid var(--bd);border-radius:13px;overflow:hidden;}
.fy-recipe-thumb{height:76px;background:linear-gradient(135deg,rgba(74,222,128,0.14),rgba(110,231,183,0.04));display:flex;align-items:center;justify-content:center;color:var(--mint);font-size:22px;}
.fy-recipe-body{padding:14px;}
.fy-recipe-tag{display:inline-block;font-size:9px;font-weight:500;padding:2px 8px;border-radius:20px;background:rgba(74,222,128,0.12);color:var(--mint);margin-bottom:8px;}
.fy-recipe-body h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--tx);margin-bottom:4px;}
.fy-recipe-meta{font-size:11px;color:var(--tx3);}
.fy-chips{display:flex;flex-wrap:wrap;gap:8px;}
.fy-chip{font-size:11px;color:var(--tx2);background:var(--bg-card);border:0.5px solid var(--bd);border-radius:20px;padding:5px 12px;}
.fy-article-card{background:var(--bg-card);border:0.5px solid var(--bd);border-radius:13px;padding:16px;display:flex;flex-direction:column;gap:8px;}
.fy-article-cat{display:inline-block;font-size:9px;font-weight:600;padding:2px 8px;border-radius:20px;background:rgba(74,222,128,0.12);color:var(--mint);align-self:flex-start;}
.fy-article-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;line-height:1.4;color:var(--tx);}
.fy-article-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--tx3);margin-top:auto;}
.fy-goal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:9px;}
.fy-goal-card{background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.07);border-radius:8px;padding:10px;}
.fy-goal-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;}
.fy-goal-lbl{font-size:8px;color:rgba(255,255,255,0.55);margin-bottom:2px;}
.fy-goal-val{font-size:15px;font-weight:650;font-family:'Plus Jakarta Sans',sans-serif;color:#fff;}
.fy-goal-deadline{font-size:8px;color:rgba(255,255,255,0.55);margin-top:6px;}
.fy-goal-missed{display:inline-flex;align-items:center;gap:3px;background:rgba(239,68,68,0.1);color:#f87171;font-size:7px;font-weight:500;padding:1px 6px;border-radius:9px;flex-shrink:0;white-space:nowrap;}
.fy-goal-missed::before{content:'';width:4px;height:4px;border-radius:50%;background:#f87171;display:inline-block;}
.fy-ach-card{display:flex;align-items:center;gap:8px;background:rgba(74,222,128,0.06);border:0.5px solid rgba(74,222,128,0.15);border-radius:8px;padding:9px 10px;}
.fy-ach-check{width:22px;height:22px;border-radius:50%;background:rgba(74,222,128,0.18);color:var(--vit);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;}
.fy-ach-title{font-size:9px;font-weight:600;color:#fff;}
.fy-ach-meta{font-size:8px;color:rgba(255,255,255,0.55);margin-top:2px;}
.fy-note-card{background:var(--bg-card);border:0.5px solid var(--bd);border-radius:13px;padding:18px;max-width:420px;margin:0 auto;}
.fy-note-tag{display:inline-block;font-size:10px;font-weight:500;color:var(--mint);background:rgba(74,222,128,0.1);border-radius:20px;padding:2px 9px;margin-bottom:10px;}
.fy-note-content{font-size:13px;color:var(--tx);line-height:1.6;}
.fy-note-add{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:420px;margin:10px auto 0;background:var(--bg-card);border:0.5px dashed var(--bd2);border-radius:10px;padding:10px 14px;font-size:11px;color:var(--tx3);}
.fy-note-add-btn{flex-shrink:0;font-size:10px;font-weight:500;color:#0a2e14;background:var(--vit);padding:4px 10px;border-radius:7px;}
.fy-dash-wrap{background:#0d1a0f;padding:52px 20px;}
.fy-dash-wrap .fy-label{color:var(--mint);}
.fy-dash-wrap h2.fy-h2{color:#fff;}
.fy-dash-wrap .fy-sec-sub{color:rgba(255,255,255,0.55);margin-bottom:24px;}
.fy-screen{background:var(--screen);border:0.5px solid var(--screen-bd);border-radius:11px;overflow:hidden;max-width:640px;margin:0 auto;}
.fy-bar{height:34px;background:rgba(255,255,255,0.04);border-bottom:0.5px solid var(--screen-bd);display:flex;align-items:center;padding:0 12px;gap:5px;}
.fy-dot{width:7px;height:7px;border-radius:50%;}
.fy-url{flex:1;margin:0 9px;height:16px;background:rgba(255,255,255,0.06);border-radius:4px;display:flex;align-items:center;justify-content:center;}
.fy-url span{font-size:9px;color:rgba(255,255,255,0.55);font-family:'Inter',monospace;}
.fy-app-nav{height:40px;border-bottom:0.5px solid var(--screen-bd);display:flex;align-items:center;justify-content:space-between;padding:0 12px;}
.fy-app-nav-links{display:flex;gap:1px;}
.fy-app-nav-link{font-size:9px;padding:3px 8px;border-radius:5px;color:rgba(255,255,255,0.55);}
.fy-app-nav-link.active{background:rgba(27,77,62,0.6);color:#4ADE80;font-weight:500;}
.fy-app-nav-r{display:flex;align-items:center;gap:6px;}
.fy-app-avatar{display:flex;align-items:center;gap:3px;cursor:pointer;}
.fy-app-avatar-circle{width:22px;height:22px;border-radius:50%;background:#14532d;display:flex;align-items:center;justify-content:center;font-size:7px;color:#86efac;font-weight:500;}
.fy-chevron{font-size:8px;color:rgba(255,255,255,0.55);}
.fy-dropdown{position:relative;display:inline-block;}
.fy-dropdown-menu{position:absolute;right:0;top:28px;background:#1d2b1f;border:0.5px solid rgba(255,255,255,0.12);border-radius:8px;padding:4px;min-width:110px;z-index:10;}
.fy-dropdown-item{display:block;font-size:9px;color:rgba(255,255,255,0.65);padding:5px 8px;border-radius:5px;white-space:nowrap;}
.fy-dropdown-item:hover{background:rgba(255,255,255,0.06);}
.fy-dropdown-sep{height:0.5px;background:rgba(255,255,255,0.08);margin:3px 0;}
.fy-screen-body{padding:12px;}
.fy-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px;}
.fy-stat{background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.07);border-radius:8px;padding:9px 10px;}
.fy-stat-lbl{font-size:8px;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:3px;}
.fy-stat-val{font-size:17px;font-weight:650;font-family:'Plus Jakarta Sans',sans-serif;line-height:1;color:#fff;font-variant-numeric:tabular-nums;}
.fy-stat-sub{font-size:8px;margin-top:2px;}
.fy-chart-card{background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.07);border-radius:8px;padding:11px;margin-bottom:9px;}
.fy-chart-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.fy-chart-title{font-size:10px;font-weight:500;color:rgba(255,255,255,0.65);}
.fy-chart-period{font-size:8px;color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.05);padding:2px 6px;border-radius:4px;}
.fy-tbl-card{background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.07);border-radius:8px;overflow:hidden;}
.fy-tbl{width:100%;border-collapse:collapse;font-size:10px;table-layout:fixed;}
.fy-tbl th{padding:6px 11px;text-align:left;font-size:8px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.55);border-bottom:0.5px solid rgba(255,255,255,0.07);}
.fy-tbl td{padding:7px 11px;color:rgba(255,255,255,0.7);border-bottom:0.5px solid rgba(255,255,255,0.05);font-variant-numeric:tabular-nums;}
.fy-tbl tr:last-child td{border-bottom:none;}
.fy-tbl td:nth-child(2){text-align:right;}
.fy-note-pill{display:inline-flex;align-items:center;gap:2px;background:rgba(110,231,183,0.15);color:#6EE7B7;font-size:8px;font-weight:500;padding:1px 5px;border-radius:9px;margin-left:4px;vertical-align:middle;border:0.5px solid rgba(110,231,183,0.25);}
.fy-period-btns{display:flex;gap:3px;margin-bottom:6px;}
.fy-period-btn{font-size:8px;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.55);border:none;cursor:default;}
.fy-period-btn.active{background:#1B4D3E;color:#4ADE80;font-weight:500;}
.fy-metric-btns{display:flex;gap:3px;margin-bottom:9px;}
.fy-metric-btn{font-size:8px;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.55);border:none;cursor:default;}
.fy-metric-btn.active{background:#1B4D3E;color:#4ADE80;font-weight:500;}

.fy-price-bg{background:var(--bg-subtle);}
.fy-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;}
.fy-price-card{background:var(--bg-card);border:0.5px solid var(--bd);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:0;}
.fy-price-card.featured{background:var(--forest);border-color:transparent;}
.fy-price-badge{display:inline-block;font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;margin-bottom:14px;align-self:flex-start;}
.fy-price-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:650;color:var(--tx);margin-bottom:4px;line-height:1.2;}
.fy-price-card.featured .fy-price-name{color:#fff;}
.fy-price-amount{font-family:'Plus Jakarta Sans',sans-serif;font-size:32px;font-weight:650;line-height:1;letter-spacing:-0.02em;color:var(--tx);margin:14px 0 4px;}
.fy-price-card.featured .fy-price-amount{color:var(--vit);}
.fy-price-period{font-size:12px;color:var(--tx3);margin-bottom:6px;}
.fy-price-card.featured .fy-price-period{color:var(--htx2);}
.fy-price-alt{font-size:11px;color:var(--tx3);margin-bottom:18px;padding-bottom:18px;border-bottom:0.5px solid var(--bd);}
.fy-price-card.featured .fy-price-alt{color:var(--htx2);border-color:rgba(255,255,255,0.1);}
.fy-price-desc{font-size:12px;color:var(--tx2);line-height:1.6;margin-bottom:16px;}
.fy-price-card.featured .fy-price-desc{color:rgba(255,255,255,0.65);}
.fy-feature-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px;flex:1;}
.fy-feature-list li{font-size:12px;color:var(--tx2);display:flex;align-items:flex-start;gap:7px;line-height:1.4;}
.fy-price-card.featured .fy-feature-list li{color:rgba(255,255,255,0.7);}
.fy-feature-list li svg{font-size:13px;color:var(--vit);flex-shrink:0;margin-top:1px;}
.fy-price-card:not(.featured) .fy-feature-list li svg{color:var(--mint);}
.fy-price-footer{margin-top:auto;}
.fy-price-cta{display:block;width:100%;text-align:center;font-size:13px;font-weight:500;padding:10px 16px;border-radius:9px;text-decoration:none;border:none;background:none;font-family:inherit;cursor:pointer;}
.fy-price-cta.primary{background:var(--vit);color:#0a2e14;}
.fy-price-cta.secondary{background:transparent;border:0.5px solid var(--bd2);color:var(--tx);}
.fy-price-cta.muted{background:transparent;border:0.5px solid var(--bd);color:var(--tx3);font-weight:400;}
.fy-price-note{font-size:11px;color:var(--tx3);text-align:center;margin-top:12px;min-height:2.8em;}
.fy-price-card.featured .fy-price-note{color:var(--htx2);}

.fy-footer{background:var(--forest);padding:40px 20px 24px;}
.fy-footer-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:20px;margin-bottom:32px;}
@media(max-width:500px){.fy-footer-top{grid-template-columns:1fr 1fr;}}
.fy-flogo{display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.fy-ftagline{font-size:12px;color:var(--htx2);line-height:1.6;max-width:170px;}
.fy-fcol h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,0.85);letter-spacing:0.02em;margin-bottom:10px;}
.fy-fcol a{display:block;font-size:12px;color:var(--htx2);text-decoration:none;margin-bottom:7px;}
.fy-fcol a:hover{color:rgba(255,255,255,0.8);}
.fy-soon-tag{display:inline-block;font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(74,222,128,0.08);color:#4ADE80;margin-left:4px;vertical-align:middle;}
.fy-footer-bottom{border-top:0.5px solid rgba(255,255,255,0.09);padding-top:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.fy-footer-bottom span,.fy-footer-bottom a{font-size:11px;color:var(--htx2);text-decoration:none;}
.fy-flegal{display:flex;gap:14px;}
/* Bottom row on its own (home/_footer_site): no columns above it, so no rule
   to sit under; the band's own padding carries it. */
.fy-footer-site{padding:28px 20px;}
.fy-footer-site .fy-footer-bottom{border-top:0;padding-top:0;max-width:640px;margin:0 auto;}
.fy-icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0;}

.fy-modal{border:none;border-radius:16px;padding:0;background:var(--bg-card);color:var(--tx);max-width:380px;width:calc(100% - 40px);box-shadow:0 20px 60px rgba(0,0,0,0.4);margin:auto;}
.fy-modal::backdrop{background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);}
.fy-modal-panel{padding:28px 24px 24px;position:relative;}
.fy-modal-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border:none;background:transparent;color:var(--tx3);font-size:20px;line-height:1;cursor:pointer;border-radius:8px;}
.fy-modal-close:hover{background:var(--bd);color:var(--tx);}
.fy-modal-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:650;color:var(--tx);margin-bottom:4px;}
.fy-modal-sub{font-size:12px;color:var(--tx3);margin-bottom:18px;}
.fy-modal-sub strong{color:var(--mint);font-weight:600;}
.fy-modal-form{display:flex;flex-direction:column;}
.fy-modal-label{font-size:11px;font-weight:500;color:var(--tx2);margin-bottom:6px;display:block;}
.fy-modal-input{width:100%;padding:10px 12px;border-radius:9px;border:0.5px solid var(--bd2);background:var(--bg);color:var(--tx);font-size:13px;font-family:inherit;box-sizing:border-box;}
.fy-modal-input:focus{outline:2px solid var(--vit);outline-offset:1px;}
.fy-modal-input::placeholder{color:var(--tx3);}
.fy-modal-note{font-size:11px;color:var(--tx3);margin-top:12px;text-align:center;}

/* ---- Legal pages (pages/terms, and in time privacy) ----
   Long-form prose under the marketing tokens above. The landing sections
   are card grids and never set body-copy rhythm, so this is the one place
   that does: a narrower measure, real paragraph spacing, list indents. */
#fy .fy-legal{padding:48px 20px 90px;}
#fy .fy-legal-wrap{max-width:720px;margin:0 auto;}
#fy .fy-legal h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(28px,5vw,40px);font-weight:650;line-height:1.1;letter-spacing:-0.025em;color:var(--tx);margin-bottom:10px;}
#fy .fy-legal-meta{font-size:12px;color:var(--tx3);margin:0 0 28px;}
#fy .fy-legal-lede{font-size:16px;line-height:1.65;color:var(--tx2);margin:0 0 36px;}
#fy .fy-legal h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-0.01em;color:var(--tx);margin:36px 0 14px;}
#fy .fy-legal h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--tx);margin:24px 0 10px;}
#fy .fy-legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.92em;color:var(--tx);background:rgba(255,255,255,0.06);padding:1px 5px;border-radius:4px;}
#fy .fy-legal p,#fy .fy-legal li{font-size:14.5px;line-height:1.7;color:var(--tx2);}
#fy .fy-legal p{margin:0 0 14px;}
#fy .fy-legal ul{list-style:disc;margin:0 0 14px;padding-left:22px;}
#fy .fy-legal li{margin-bottom:8px;}
#fy .fy-legal strong{color:var(--tx);font-weight:600;}
#fy .fy-legal a{color:var(--mint);text-decoration:underline;text-underline-offset:2px;}
/* The legal pages inside the application layout (a signed-in reader —
   PagesController picks the layout). The landing palette above is dark
   whatever the theme, which is right for the marketing pages but would
   put a dark block of prose under the app's light nav. So the wrapper
   drops its own background (the layout paints the page), and when the
   app is in light mode the tokens are repointed at the app's light-text
   colours. The dark-mode case needs nothing: --bg is brand-night, the
   same as the layout's own body, so the two are already seamless. The
   `.fy-in-app` hook keeps this off the signed-out pages, which stay
   dark regardless of the html.dark class. */
#fy.fy-in-app{background:transparent;}
#fy.fy-in-app .fy-legal{padding:32px 0 64px;}
html:not(.dark) #fy.fy-in-app{
  --tx:var(--color-brand-deep);--tx2:var(--color-brand-slate);--tx3:var(--color-brand-pine);
  --mint:var(--color-brand-forest);
}
html:not(.dark) #fy.fy-in-app .fy-legal code{background:rgba(0,0,0,0.05);}