/* LYRA — marketing site, built to the LYRA Brand Guidelines v1.0.
   Type: Jost (display) · IBM Plex Sans (body) · IBM Plex Mono (labels) · Outfit (companion).
   Color: Ink #1B2138 / #101524 · Paper #F5F0E6 / #FBF8F2 · Slate #707892 · Vega gold #C8A24A.
   Texture: paper dot-grid on ink sections. (Lyre icon unchanged — to be revised later.) */
:root{
  --ink:#1B2138; --ink-deep:#101524; --ink-2:#2E3650;
  --paper:#F5F0E6; --paper-2:#FBF8F2; --paper-line:#E7E0D0;
  --slate:#707892; --slate-d:#4A5163; --slate-m:#969DB1; --slate-l:#C5CAD6;
  --gold:#C8A24A; --gold-deep:#9A7A30; --gold-mid:#BD8A3A; --gold-l:#E7D2A4;
  --positive:#3F7A52; --negative:#B4593F;
  --ink-text:#3B4257;                         /* body text on paper */
  --line:rgba(27,33,56,.12); --line-dark:rgba(245,240,230,.14);
  --display:'Jost','Outfit',system-ui,sans-serif;
  --display-2:'Jost',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --dots:radial-gradient(circle,rgba(245,240,230,.14) 1px,transparent 1.7px);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--body); color:var(--ink-text); background:var(--paper-2);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.015em; color:var(--ink); margin:0}
h1{font-size:clamp(2.6rem,6vw,4.6rem); font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:1.2rem; font-weight:600; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
em{font-style:normal; color:var(--gold-deep)}
img{max-width:100%; display:block}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
.center{text-align:center}

/* mono label / eyebrow — the brand's signature technical voice */
.eyebrow{font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:500; margin-bottom:16px}
.eyebrow.center{display:block}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--body); font-weight:600; font-size:.96rem; border-radius:100px;
  padding:.74rem 1.5rem; border:1.5px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap}
.btn-lg{padding:.95rem 1.9rem; font-size:1.02rem}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--ink-2); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-block{width:100%}
/* on ink, primary pops in Vega gold */
.band-dark .btn-primary,.hero .btn-primary{background:var(--gold); color:var(--ink-deep)}
.band-dark .btn-primary:hover,.hero .btn-primary:hover{background:var(--gold-l)}
.band-dark .btn-ghost,.hero .btn-ghost{color:var(--paper); border-color:var(--line-dark)}
.band-dark .btn-ghost:hover,.hero .btn-ghost:hover{border-color:var(--gold); color:var(--gold)}

/* ---- nav ---- */
.nav-wrap{position:sticky; top:0; z-index:50; background:rgba(251,248,242,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:24px; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; margin-right:auto}
.brand-word{font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink)}
.brand-mark{display:block}
.nav-links{display:flex; gap:26px}
.nav-links a{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:6px}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:11px; background:none; border:0; cursor:pointer}
.nav-toggle span{width:22px; height:2px; background:var(--ink); border-radius:2px}

/* ---- hero (ink + dot grid, per the guidelines cover) ---- */
.hero{position:relative; background:var(--ink-deep); background-image:var(--dots); background-size:38px 38px;
  color:var(--paper); padding:84px 0 0; overflow:hidden}
.hero h1,.hero h2{color:var(--paper)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero-copy h1{margin:.3rem 0 1.2rem}
.lede{font-family:var(--display-2); font-weight:400; font-size:1.32rem; line-height:1.4; color:#C5CAD6; max-width:34ch; letter-spacing:.005em}
.lede em{color:var(--gold); font-weight:500}
.hero-actions{display:flex; gap:14px; margin:2rem 0 1rem; flex-wrap:wrap}
.hero-note{font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:#B9BFCE}
.hero-note.light{color:rgba(245,240,230,.66)}
.hero-link{font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:#C5CAD6; text-decoration:underline; text-underline-offset:4px; align-self:center}
.hero-link:hover{color:var(--gold)}

/* investor-memo mock (paper card on ink) */
.hero-mock{perspective:1500px}
.memo{background:var(--paper-2); color:var(--ink-text); border:1px solid var(--paper-line); border-radius:16px; padding:20px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6); transform:rotateY(-8deg) rotateX(3deg)}
.memo-head{display:flex; align-items:center; gap:7px; padding-bottom:14px; border-bottom:1px solid var(--paper-line)}
.memo-dot{width:9px; height:9px; border-radius:50%; background:var(--slate-l)}
.memo-title{margin-left:8px; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--slate)}
.memo-verdict{display:flex; align-items:center; gap:12px; margin:16px 0 18px}
.verdict-badge{font-family:var(--mono); background:rgba(63,122,82,.14); color:var(--positive); font-weight:500; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.36rem .8rem; border-radius:100px}
.verdict-sub{font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:var(--slate)}
.memo-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stat{background:var(--paper); border-radius:10px; padding:12px 14px}
.stat-k{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate)}
.stat-v{display:block; font-family:var(--display); font-weight:700; font-size:1.6rem; color:var(--ink); margin-top:3px; letter-spacing:-.01em}
.memo-bars{display:flex; align-items:flex-end; gap:8px; height:62px; margin:18px 2px 12px}
.memo-bars span{flex:1; height:var(--h); background:linear-gradient(var(--gold),var(--gold-l)); border-radius:4px 4px 0 0}
.memo-foot{font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--slate); border-top:1px solid var(--paper-line); padding-top:12px; text-transform:uppercase}
.memo-cap{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-m); text-align:center; margin-top:14px}
.mobile-dl{display:none}

/* trust strip (on ink) */
.trust{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
  margin-top:64px; padding:22px 24px; color:var(--slate-m); font-family:var(--mono);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; border-top:1px solid var(--line-dark)}
.trust i{color:var(--gold); font-style:normal}

/* ---- dark bands ---- */
.band-dark{position:relative; background:var(--ink); background-image:var(--dots); background-size:38px 38px; color:var(--paper); padding:92px 0}
.band-dark h2{color:var(--paper)}
.band-lede{font-size:1.16rem; color:#B9BFCE; margin-top:1.1rem; line-height:1.55}
.band-dark .band-lede em{color:var(--gold)}

/* ---- features ---- */
.features{padding:94px 0; background:var(--paper-2)}
.features h2{margin-bottom:48px}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.feature{background:#fff; border:1px solid var(--paper-line); border-radius:14px; padding:28px}
.feature:hover{border-color:var(--gold); transform:translateY(-2px); transition:.18s}
.feature h3{margin:18px 0 9px}
.feature p{color:var(--slate-d); font-size:.97rem; line-height:1.6}
.feat-ico{width:46px; height:46px; border-radius:12px; background:rgba(200,162,74,.14); position:relative}
.feat-ico::after{content:""; position:absolute; inset:0; margin:auto; width:24px; height:24px;
  background:var(--gold-deep); -webkit-mask:center/contain no-repeat var(--icon); mask:center/contain no-repeat var(--icon)}
.feat-ico[data-i="verdict"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.feat-ico[data-i="irr"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-8'/%3E%3Cpath d='M17 7h4v4'/%3E%3C/svg%3E")}
.feat-ico[data-i="zoning"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.4-7-11a7 7 0 1 1 14 0c0 4.6-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E")}
.feat-ico[data-i="options"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.4'/%3E%3Ccircle cx='6' cy='18' r='2.4'/%3E%3Ccircle cx='18' cy='12' r='2.4'/%3E%3Cpath d='M8.4 6.8 15.6 11M8.4 17.2 15.6 13'/%3E%3C/svg%3E")}
.feat-ico[data-i="render"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9' r='1.6'/%3E%3Cpath d='m4 18 5-5 4 3 3-3 4 4'/%3E%3C/svg%3E")}
.feat-ico[data-i="deliver"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}

/* ---- how it works ---- */
.band-paper{background:var(--paper)}
.how{padding:94px 0}
.how h2{margin-bottom:48px}
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.steps li{padding-top:6px}
.step-n{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--gold); font-family:var(--display); font-weight:700; font-size:1.15rem; margin-bottom:16px}
.steps h3{margin-bottom:9px}
.steps p{color:var(--slate-d); font-size:.97rem}

/* ---- pricing ---- */
.pricing{padding:94px 0; background:var(--paper-2)}
.pricing h2{margin-bottom:12px}
.pricing .sub{color:var(--slate-d); max-width:60ch; margin:0 auto 28px}
.plans-note{margin-top:16px; font-size:.92rem; color:var(--slate-d)}
.proof .sub{color:var(--slate-d); max-width:62ch; margin:1rem auto 0}
.billing-toggle{display:flex; gap:5px; justify-content:center; background:#fff; border:1px solid var(--line);
  border-radius:100px; padding:5px; width:max-content; margin:0 auto 38px}
.bt-option{border:0; background:none; font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); padding:.55rem 1.2rem; border-radius:100px; cursor:pointer}
.bt-option.is-active{background:var(--ink); color:var(--paper)}
.bt-option .save{color:var(--gold-deep)}
.bt-option.is-active .save{color:var(--gold-l)}
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:18px; align-items:start}
.plan{background:#fff; border:1px solid var(--paper-line); border-radius:18px; padding:30px 26px; position:relative}
.plan-popular{border-color:var(--gold); box-shadow:0 26px 60px -36px rgba(200,162,74,.55)}
.badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--ink-deep);
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .85rem; border-radius:100px}
.plan h3{font-family:var(--display); font-weight:700}
.plan-for{font-family:var(--mono); color:var(--slate-d); font-size:.74rem; letter-spacing:.04em; margin:.4rem 0 1.2rem; text-transform:uppercase}
.price{font-family:var(--display); font-weight:800; line-height:1; color:var(--ink); margin-bottom:.35rem; letter-spacing:-.02em}
.price .cur{font-size:1.4rem; vertical-align:.6rem; margin-right:2px}
.price [data-monthly]{font-size:3rem}
.price .per{font-size:1rem; color:var(--slate); font-family:var(--body); font-weight:500}
.price-note{font-family:var(--mono); font-size:.72rem; color:var(--slate); margin-bottom:1.3rem; min-height:1.1em}
.plan-feats{list-style:none; padding:0; margin:0 0 1.7rem; display:grid; gap:.62rem}
.plan-feats li{position:relative; padding-left:1.7rem; font-size:.95rem; color:var(--slate-d)}
.plan-feats li::before{content:""; position:absolute; left:0; top:.42em; width:13px; height:9px;
  border-left:2px solid var(--gold-deep); border-bottom:2px solid var(--gold-deep); transform:rotate(-45deg)}
.plan-buy{display:block; width:100%; margin-top:.6rem; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-deep); text-decoration:none; padding:.3rem 0; transition:color .15s}
.plan-buy:hover{color:var(--gold)}
.topups{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px; color:var(--slate); font-size:.94rem}
.topups-label{font-weight:500}
.topup{font-family:var(--mono); border:1px solid var(--line); border-radius:100px; padding:.42rem 1rem; font-weight:500; font-size:.78rem;
  letter-spacing:.06em; color:var(--ink); text-transform:uppercase}
.topup:hover{border-color:var(--gold); color:var(--gold-deep)}

/* ---- founding offer (ink band — the hero offer) ---- */
.founding{position:relative; background:var(--ink); background-image:var(--dots); background-size:38px 38px;
  color:var(--paper); padding:94px 0}
.founding h2{color:var(--paper); margin-bottom:14px}
.founding .eyebrow{color:var(--gold)}
.founding-sub{color:#B9BFCE; max-width:64ch; margin:0 auto 42px}
.founding-main{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:start; max-width:960px; margin:0 auto}
.founding-card{background:var(--paper-2); color:var(--ink-text); border:1px solid var(--gold);
  border-radius:18px; padding:32px 30px; position:relative; box-shadow:0 30px 70px -40px rgba(200,162,74,.6)}
.founding-card h3{font-family:var(--display); font-weight:700; margin-top:6px}
.founding-card .price{margin:.2rem 0 .35rem}
.founding-card .price .amount{font-size:3rem; font-family:var(--display); font-weight:800; letter-spacing:-.02em}
.founding-card .price .cur{font-size:1.4rem; vertical-align:.6rem; margin-right:2px}
.founding-card .price .per{font-size:1rem; color:var(--slate); font-family:var(--body); font-weight:500}
.was{font-family:var(--body); font-weight:500; font-size:1.15rem; color:var(--slate-m);
  text-decoration:line-through; margin-right:.5rem}
.founding-card .buy{margin-top:.4rem}
.founding-honesty{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--slate);
  margin-top:14px; text-align:center; line-height:1.5}
.founding-side{display:grid; gap:18px}
.founding-mini{background:rgba(245,240,230,.05); border:1px solid var(--line-dark); border-radius:16px;
  padding:22px 22px 24px; transition:.18s}
.founding-mini:hover{border-color:var(--gold)}
.mini-tag{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); font-weight:500}
.mini-price{font-family:var(--display); font-weight:800; color:var(--paper); font-size:1.9rem;
  letter-spacing:-.02em; margin:.55rem 0 .1rem; line-height:1}
.mini-price .was{font-size:.92rem; color:var(--slate-m)}
.mini-price .per{font-size:.9rem; color:var(--slate-m); font-family:var(--body); font-weight:500; letter-spacing:0}
.mini-for{color:#B9BFCE; font-size:.9rem; margin:.4rem 0 1.1rem; line-height:1.5}
.founding .btn-primary{background:var(--gold); color:var(--ink-deep)}
.founding .btn-primary:hover{background:var(--gold-l)}
.founding .btn-ghost{color:var(--paper); border-color:var(--line-dark)}
.founding .btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
.founding-card .btn-primary{background:var(--ink); color:var(--paper)}
.founding-card .btn-primary:hover{background:var(--ink-2)}

/* ---- feasibility desk (service, on paper) ---- */
.desk{padding:94px 0}
.desk h2{margin-bottom:14px; max-width:20ch; margin-left:auto; margin-right:auto}
.desk-sub{color:var(--slate-d); max-width:64ch; margin:0 auto 14px}
/* Links to the two public sample deliverables. Inline text that wraps freely,
   so it cannot overflow a 375px viewport. */
.desk-samples{color:var(--slate); font-size:.92rem; max-width:64ch; margin:0 auto 42px}
.desk-samples a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; font-weight:600}
.desk-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; max-width:960px; margin:0 auto}
.desk-card{background:#fff; border:1px solid var(--paper-line); border-radius:18px; padding:30px 26px; position:relative}
.desk-card h3{font-family:var(--display); font-weight:700}
.desk-featured{border-color:var(--gold); box-shadow:0 26px 60px -36px rgba(200,162,74,.55)}
.desk-card .price{margin:.9rem 0 .3rem}
.desk-card .price .amount{font-size:2.6rem; font-family:var(--display); font-weight:800; letter-spacing:-.02em}
.desk-card .price .cur{font-size:1.3rem; vertical-align:.55rem; margin-right:2px}
.desk-card .price .per{font-size:.95rem; color:var(--slate); font-family:var(--body); font-weight:500}
.desk-note{margin-top:28px; color:var(--slate-d); font-size:.92rem}
.desk-note a{color:var(--gold-deep); text-decoration:underline}

@media (max-width:900px){
  .founding-main,.desk-cards{grid-template-columns:1fr}
}

/* ---- final cta / download ---- */
.cta-final{background:var(--ink-deep)}
.cta-final h2{margin-bottom:1.1rem}
.dl-cards{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:2.1rem 0 1rem}
.dl-card{display:flex; flex-direction:column; align-items:flex-start; gap:4px; background:rgba(245,240,230,.05);
  border:1px solid var(--line-dark); border-radius:14px; padding:16px 22px; min-width:240px; transition:.18s}
.dl-card:hover{border-color:var(--gold); background:rgba(245,240,230,.09)}
.dl-os{font-weight:600; font-size:1.02rem; color:var(--paper)}
.dl-meta{font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(245,240,230,.55)}

/* ---- faq ---- */
.faq{padding:94px 0; background:var(--paper-2)}
.faq h2{margin-bottom:34px}
.faq details{border-bottom:1px solid var(--line); padding:18px 0}
.faq summary{font-family:var(--display); font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:1.06rem; color:var(--ink)}
.faq summary::after{content:"+"; color:var(--gold-deep); font-size:1.4rem; font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px; color:var(--slate-d); max-width:64ch}
.faq a{color:var(--gold-deep); text-decoration:underline}

/* ---- footer ---- */
.foot{background:var(--ink-deep); color:rgba(245,240,230,.7); padding:64px 0 28px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.foot-brand{display:flex; flex-direction:column; gap:4px}
.foot-brand .brand-word{color:var(--paper)}
.foot-brand img{margin-bottom:6px}
.foot-tag{font-family:var(--display-2); color:var(--gold); font-size:.98rem}
.foot-co{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(245,240,230,.6); margin-top:8px}
.foot-col h4{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,240,230,.6); font-weight:500; margin-bottom:14px}
.foot-col a{display:block; color:rgba(245,240,230,.78); padding:5px 0; font-size:.94rem}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{margin-top:42px; padding-top:22px; border-top:1px solid var(--line-dark); font-family:var(--mono); font-size:.72rem;
  letter-spacing:.04em; color:rgba(245,240,230,.6); display:flex; justify-content:space-between; align-items:center}
.cookie-prefs-link{background:none; border:0; color:rgba(245,240,230,.6); cursor:pointer; font:inherit; padding:0; text-transform:uppercase; letter-spacing:.04em}
.cookie-prefs-link:hover{color:var(--gold)}

/* ---- cookie bar ---- */
.cookie-bar{position:fixed; left:16px; right:16px; bottom:16px; z-index:80; background:var(--ink-deep); color:var(--paper);
  border:1px solid var(--line-dark); border-radius:14px; box-shadow:0 24px 56px -18px rgba(0,0,0,.6); opacity:0; transform:translateY(12px); transition:.25s; max-width:680px; margin:0 auto}
.cookie-bar.is-visible{opacity:1; transform:none}
.cookie-bar-inner{display:flex; align-items:center; gap:16px; padding:16px 20px; flex-wrap:wrap}
.cookie-bar-text{font-size:.88rem; color:rgba(245,240,230,.82); flex:1; min-width:240px}
.cookie-bar-text a{color:var(--gold); text-decoration:underline}
.cookie-bar-actions{display:flex; gap:10px}
.cookie-bar .btn{padding:.5rem 1.1rem; font-size:.86rem}
.cookie-bar .btn-ghost{color:var(--paper); border-color:var(--line-dark)}
.cookie-bar .btn-primary{background:var(--gold); color:var(--ink-deep)}
/* The bar is position:fixed, so on a short/narrow viewport it used to sit on top
   of real content — on /residual/ it covered the input row and the submit button
   on first load. consent.js measures the bar into --cookie-bar-h and flags
   <body class="has-cookie-bar">; we convert that into actual bottom padding, so
   every page can always be scrolled clear of the bar. */
body.has-cookie-bar{padding-bottom:calc(var(--cookie-bar-h, 0px) + 28px)}

/* ---- responsive ---- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-mock{max-width:440px}
  .feature-grid,.steps,.plans{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:var(--paper-2); border-bottom:1px solid var(--line); padding:8px 24px}
  .nav-links.open a{padding:15px 0; border-bottom:1px solid var(--line)}
  .nav-toggle{display:flex}
  .mobile-dl{display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:70; justify-content:center; align-items:center;
    padding:15px; border-radius:14px; background:var(--gold); color:var(--ink-deep); font-family:var(--body); font-weight:600;
    box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
  body{padding-bottom:78px}
  /* keep room for BOTH fixed bars, and float the download bar above the cookie bar */
  body.has-cookie-bar{padding-bottom:calc(var(--cookie-bar-h, 0px) + 96px)}
  body.has-cookie-bar .mobile-dl{bottom:calc(var(--cookie-bar-h, 0px) + 24px)}
}
@media (max-width:520px){
  body{font-size:16px}
  .hero-actions .btn{flex:1}
  /* compact the cookie bar on phones and give both buttons a 44px tap target */
  .cookie-bar{left:10px; right:10px; bottom:10px}
  .cookie-bar-inner{padding:14px 16px; gap:12px}
  .cookie-bar-text{min-width:0; font-size:.84rem; line-height:1.45}
  .cookie-bar-actions{width:100%; gap:8px}
  .cookie-bar-actions .btn{flex:1; min-height:44px; padding:.5rem .8rem}
}

/* ===================== residual land value tool ===================== */
.rlv-body{background:var(--paper);color:var(--ink-text)}
.rlv-main{padding:48px 0 80px;min-height:70vh}
.rlv-wrap{max-width:1040px}
.rlv-head{max-width:760px;margin:0 auto 34px;text-align:center}
.rlv-head h1{font-family:var(--display,'Jost',sans-serif);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;color:var(--ink);margin:.5rem 0 .7rem}
.rlv-em{color:var(--gold-deep)}
.rlv-sub{color:var(--slate-d);font-size:1.06rem;max-width:60ch;margin:0 auto}
.rlv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.rlv-card{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:18px;padding:26px 24px;
  box-shadow:0 20px 50px -40px rgba(27,33,56,.5)}
.rlv-inputs{position:sticky;top:88px}
/* building-use + deal-type toggles */
.rlv-toggle{display:flex;gap:4px;background:#fff;border:1px solid var(--paper-line);border-radius:100px;
  padding:4px;width:max-content;margin:0 0 20px}
.rlv-tog{border:0;background:none;font-family:var(--mono,'IBM Plex Mono',monospace);font-weight:500;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding:.5rem 1.1rem;
  border-radius:100px;cursor:pointer}
.rlv-tog.is-active{background:var(--ink);color:var(--paper)}
/* Two pill rows stacked need naming — unlabelled, "Multifamily / Self-storage"
   above "For-sale / Rental" reads as one four-way control. Same register as the
   field labels so it reads as part of the form, not as a heading. */
.rlv-tog-h{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate-d);margin:0 0 6px}
.rlv-toggle-use{margin-bottom:14px}
#rlvDealType[hidden]{display:none}
/* quick screen — address / "use my location" -> prefills FAR + max height.
   Sits above every other input because on a phone, on a sidewalk, "where am I"
   is the first question and the only one the user can't answer from memory. */
.rlv-geo{margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--paper-line)}
.rlv-geo-h{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate-d);margin:0 0 8px}
.rlv-geo-row{display:flex;gap:8px}
.rlv-geo-row input{flex:1 1 160px;min-width:0;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--paper-line);border-radius:10px;padding:.6rem .7rem}
.rlv-geo-row input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.18)}
.rlv-geo-btn.btn-ghost{flex:0 0 auto;white-space:nowrap;border-color:var(--paper-line);color:var(--ink)}
.rlv-geo-btn.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep)}
.rlv-geo-loc{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:6px 0;background:none;
  border:0;font:inherit;font-size:.88rem;color:var(--gold-deep);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.rlv-geo-loc[disabled]{opacity:.55;cursor:default;text-decoration:none}
.rlv-geo-status{font-size:.84rem;line-height:1.45;margin:10px 0 0;padding:.55rem .7rem;border-radius:8px;
  background:var(--paper);color:var(--slate-d)}
.rlv-geo-status.is-good{background:rgba(63,122,82,.1);color:#2f5d3f}
.rlv-geo-status.is-warn{background:rgba(180,89,63,.08);color:#8a4632}
.rlv-geo-zone{font-family:var(--mono,'IBM Plex Mono',monospace);font-weight:500}
/* Provenance line under the lot-area input when a parcel lookup autofilled it.
   Sits inside .rlv-field, so it has to opt OUT of the uppercase mono label
   styling above. Quieter than .rlv-geo-status on purpose: it annotates a field
   the user can still overwrite, it is not a result. */
.rlv-field>span.rlv-lot-note{display:block;margin:6px 0 0;font-family:inherit;
  font-size:.76rem;line-height:1.45;letter-spacing:normal;text-transform:none;
  color:var(--slate-d);overflow-wrap:anywhere}
/* County overlay screen result — one line, site-level, so it sits outside the
   input grid. Same quiet register as the lot note: it is evidence attached to
   the site, not a result of the run. `overflow-wrap:anywhere` because the
   INSIDE form of the line concatenates layer names and can produce a long
   unbroken run on a narrow phone. */
.rlv-overlay-note{font-size:.8rem;line-height:1.5;margin:-2px 0 12px;
  color:var(--slate-d);overflow-wrap:anywhere}
.rlv-overlay-note.is-inside{color:#8a4632}
.rlv-overlay-note .rlv-geo-zone{font-weight:500}
/* Attribution + county disclaimer. The smallest type on the page — it is a
   standing notice, not information the user acts on — but NOT hidden behind a
   disclosure widget and NOT greyed to the edge of legibility: it is required
   printed, and --slate-m on this paper is about 2.6:1, which is a notice you
   can say you published rather than one anybody can read. --slate-d clears
   4.5:1 at this size. */
.rlv-attrib{font-size:.7rem;line-height:1.5;margin:0 0 14px;color:var(--slate-d);
  overflow-wrap:anywhere}
/* fields */
.rlv-field{display:block;margin:0 0 14px}
/* `hidden` has to actually hide. The UA sheet's [hidden]{display:none} loses to
   ANY author `display` rule regardless of specificity, so a .rlv-field carrying
   the attribute stayed on screen — which meant the deal-type swap was setting
   `hidden` on labels nobody ever stopped seeing, and every assumption field
   showed under both modes. The building-use swap rides the same mechanism, so
   this is the rule that makes both of them real. Same for the lot-provenance
   span, which .rlv-field>span.rlv-lot-note also gives a display. */
.rlv-field[hidden],.rlv-field>span.rlv-lot-note[hidden]{display:none}
.rlv-field>span{display:block;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--slate-d);margin-bottom:6px}
.rlv-field>span em{font-style:normal;color:var(--slate-m);text-transform:none;letter-spacing:0}
.rlv-field input,.rlv-field select{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;
  color:var(--ink);background:#fff;border:1px solid var(--paper-line);border-radius:10px;padding:.6rem .7rem}
.rlv-field input:focus,.rlv-field select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.18)}
.rlv-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
/* Grid items default to min-width:auto, so a long provenance note inside the
   lot field would push out of its 1fr track and run under the neighbours. */
.rlv-row3>.rlv-field{min-width:0}
/* Standing note under the self-storage income block. Says what the placeholder
   rent is (and is not) and which of these inputs the free screen's stabilized
   yield does not read — a field that moves nothing has to say so on the page,
   not only in the code. */
.rlv-storage-note{font-size:.76rem;line-height:1.5;margin:-4px 0 16px;color:var(--slate-d)}
.rlv-storage-note[hidden]{display:none}
.rlv-adv{margin:6px 0 18px;border-top:1px solid var(--paper-line);padding-top:14px}
.rlv-adv summary{cursor:pointer;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--slate-d)}
.rlv-adv-hint{color:var(--slate-m);text-transform:none;letter-spacing:0}
.rlv-adv-body{margin-top:14px}
.rlv-run{margin-top:4px}
.rlv-err{color:#b4593f;font-size:.9rem;margin:12px 0 0;background:rgba(180,89,63,.08);
  border:1px solid rgba(180,89,63,.25);border-radius:8px;padding:.6rem .8rem}
/* result */
.rlv-result-label{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-d);margin:0}
.rlv-big{font-family:var(--display,'Jost',sans-serif);font-weight:800;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.4rem,6vw,3.6rem);color:var(--gold-deep);margin:.3rem 0 .2rem}
.rlv-persf{font-family:var(--mono,'IBM Plex Mono',monospace);color:var(--slate-d);font-size:.9rem;margin:0 0 .8rem}
.rlv-verdict{font-size:.98rem;margin:0 0 20px;padding:.6rem .8rem;border-radius:10px}
.rlv-verdict.is-good{color:#2f5d3f;background:rgba(63,122,82,.1)}
.rlv-verdict.is-bad{color:#8a4632;background:rgba(180,89,63,.1)}
.rlv-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--paper-line);
  border:1px solid var(--paper-line);border-radius:12px;overflow:hidden;margin:0 0 22px}
.rlv-metrics>div{background:var(--paper-2);padding:12px 14px}
.rlv-metrics dt{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.62rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--slate-m);margin:0 0 3px}
.rlv-metrics dd{margin:0;font-weight:600;color:var(--ink);font-size:1.05rem}
.rlv-metrics-2{margin-top:2px}
/* email gate */
.rlv-locked{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}
.rlv-locked span{position:relative;font-size:.82rem;color:var(--slate);background:#fff;border:1px dashed var(--paper-line);
  border-radius:8px;padding:.5rem .7rem;filter:blur(.3px);opacity:.85}
.rlv-locked span::before{content:"🔒";margin-right:6px;filter:none}
.rlv-gate-h{font-family:var(--display,'Jost',sans-serif);font-weight:700;font-size:1.15rem;color:var(--ink);margin:0 0 3px}
.rlv-gate-sub{color:var(--slate-d);font-size:.92rem;margin:0 0 14px}
.rlv-emailform{display:flex;gap:8px;flex-wrap:wrap}
.rlv-emailform input{flex:1 1 200px;font:inherit;font-size:1rem;background:#fff;border:1px solid var(--paper-line);
  border-radius:10px;padding:.7rem .8rem;color:var(--ink)}
.rlv-emailform input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.18)}
.rlv-consent{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--slate-d);margin-top:12px}
.rlv-consent input{margin-top:2px}
/* unlocked CTA */
.rlv-cta{background:var(--ink);color:var(--paper);border-radius:14px;padding:20px 20px 22px;margin-top:6px}
.rlv-cta-h{font-family:var(--display,'Jost',sans-serif);font-weight:700;font-size:1.15rem;margin:0 0 4px;color:#fff}
.rlv-cta-sub{color:var(--slate-l);font-size:.9rem;margin:0 0 14px}
/* take this with you — share link + optional "email me this screen" */
.rlv-take{margin-top:20px;padding-top:18px;border-top:1px solid var(--paper-line)}
.rlv-take-h{font-family:var(--mono,ui-monospace,monospace);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate-m);margin:0 0 10px}
.rlv-take-row{display:flex;gap:8px;flex-wrap:wrap}
.rlv-take-row .btn{flex:1 1 auto}
.rlv-share-out{margin-top:12px}
.rlv-share-row{display:flex;gap:8px;flex-wrap:wrap}
.rlv-share-row input{flex:1 1 220px;font:inherit;font-size:.92rem;font-family:var(--mono,ui-monospace,monospace);
  background:#fff;border:1px solid var(--paper-line);border-radius:10px;padding:.7rem .8rem;color:var(--ink)}
.rlv-share-row input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.18)}
.rlv-take-form{margin-top:12px}
/* The same trap .rlv-field hit above, and it bites harder here: .btn,
   .rlv-emailform and .rlv-consent all set `display`, which beats the UA sheet's
   [hidden] regardless of specificity. The "email me this screen" control and its
   row are hidden until the gate has been answered — without these rules they
   render anyway, and the page shows TWO email fields at once (the gate's and
   this one's), which is the single thing this block was arranged to avoid. */
.rlv-take .btn[hidden],.rlv-take-form[hidden],.rlv-take .rlv-consent[hidden]{display:none}
.rlv-take-note{font-size:.8rem;color:var(--slate-m);margin:8px 0 0}
.rlv-take-msg{font-size:.86rem;color:var(--slate-d);margin:10px 0 0}
.rlv-take-msg.is-bad{color:#8a4632}
.rlv-disc{font-size:.78rem;color:var(--slate-m);margin:18px 0 0;text-align:center}
@media (max-width:760px){
  .rlv-grid{grid-template-columns:1fr}
  .rlv-inputs{position:static}
}
/* Phones: three number inputs side by side left ~90px each at 375px — too narrow
   to read or tap. Stack them, and bring every control up to a 44px tap target. */
@media (max-width:520px){
  .rlv-main{padding:32px 0 56px}
  .rlv-card{padding:20px 16px; border-radius:14px}
  .rlv-row3{grid-template-columns:1fr; gap:0}
  .rlv-toggle{width:100%}
  .rlv-tog{flex:1; min-height:44px; padding:.5rem .6rem}
  .rlv-geo-row{flex-direction:column}
  .rlv-geo-row input{flex:1 1 auto; width:100%; min-height:44px; font-size:16px}
  .rlv-geo-btn.btn-ghost{width:100%; min-height:44px; white-space:normal}
  .rlv-geo-loc{min-height:44px; width:100%; justify-content:center; margin-top:6px}
  .rlv-field input,.rlv-field select{min-height:44px; font-size:16px}
  .rlv-adv summary{padding:12px 0}
  .rlv-run{min-height:48px}
  .rlv-emailform{flex-direction:column}
  .rlv-emailform input{flex:1 1 auto; width:100%; min-height:44px; font-size:16px}
  .rlv-emailform .btn{width:100%; min-height:44px; white-space:normal}
  .rlv-consent{min-height:44px; align-items:center}
  .rlv-consent input{width:20px; height:20px; margin-top:0; flex:0 0 auto}
  .rlv-take-row{flex-direction:column}
  .rlv-take-row .btn{width:100%; min-height:44px; white-space:normal}
  .rlv-share-row{flex-direction:column}
  .rlv-share-row input{flex:1 1 auto; width:100%; min-height:44px; font-size:16px}
  .rlv-share-row .btn{width:100%; min-height:44px}
  .rlv-metrics,.rlv-locked{grid-template-columns:1fr}
  .rlv-desk-btn,.rlv-cta .btn{white-space:normal; min-height:48px; line-height:1.28}
}