/* RangeFinder Wyoming — landing page styles */
:root,
[data-theme='light'] {
  --color-bg: #F6F4EE;
  --color-surface: #FBFAF6;
  --color-surface-2: #EFEAE0;
  --color-surface-offset: #F0EBE0;
  --color-divider: #E2DBCC;
  --color-border: #DDD6C8;
  --color-text: #23211B;
  --color-text-muted: #6B6557;
  --color-text-faint: #6E6858;
  --color-text-inverse: #FBFAF6;

  --color-primary: #2F5D3A;
  --color-primary-hover: #244A2D;
  --color-accent: #9A5E30;
  --color-accent-hover: #814D26;

  /* Status text on the tinted status pills. Darker than the pill fills they sit
     on so the pills clear WCAG-AA 4.5:1 for their small bold type. */
  --color-success-text: #1F6642;
  --color-danger-text: #98302F;
  /* Star glyphs read as rating data, so they need the 3:1 non-text minimum. Kept
     separate from --c-sun, which fills the decorative hero sun where the old
     lighter gold is still wanted. */
  --color-star: #A96E12;

  --c-sky-top: #E7EEEA;
  --c-sky-bot: #F3EEE2;
  --c-sun: #E6B25A;
  --c-mtn-light: #5C7A63;
  --c-mtn-dark: #2F4A38;
  --c-mtn-front: #243B2D;
  --c-cross: #FFFFFF;
  --c-card: #FBFAF6;
  --c-fg-inv: #23211B;

  --shadow-sm: 0 1px 2px rgba(35,33,27,.06);
  --shadow-md: 0 6px 20px rgba(35,33,27,.08);
  --shadow-lg: 0 18px 44px rgba(35,33,27,.14);

  --font-display: 'Boska', 'Georgia', serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
}
[data-theme='dark'] {
  --color-bg: #15130E;
  --color-surface: #1C1A14;
  --color-surface-2: #221F17;
  --color-surface-offset: #26221A;
  --color-divider: #2A2620;
  --color-border: #34302A;
  --color-text: #DDD6C6;
  --color-text-muted: #9C9484;
  /* Lightened from #8B846F, which fell to 4.41:1 on --color-surface-2 and
     4.24:1 on --color-surface-offset — under the 4.5:1 AA floor. */
  --color-text-faint: #958E79;
  --color-text-inverse: #15130E;

  --color-primary: #79B386;
  --color-primary-hover: #8FC399;
  --color-accent: #D49262;
  --color-accent-hover: #E0A074;

  --color-success-text: #5FBF8C;
  --color-danger-text: #E98080;
  --color-star: #E6B25A;

  --c-sky-top: #2A332E;
  --c-sky-bot: #211D16;
  --c-sun: #C68A3E;
  --c-mtn-light: #4A6353;
  --c-mtn-dark: #2C3F33;
  --c-mtn-front: #1E2D23;
  --c-cross: #F2E9D8;
  --c-card: #1C1A14;
  --c-fg-inv: #DDD6C6;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
}

/* base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{text-size-adjust:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:84px}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background-color:var(--color-bg);overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
ul[role=list],ol[role=list]{list-style:none}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;line-height:1.12;font-family:var(--font-display);font-weight:600}
p,li,figcaption{text-wrap:pretty;max-width:72ch}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2.25rem,1.4rem + 3vw,3.75rem);
  --space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
  --radius-md:.6rem;--radius-lg:.9rem;--radius-xl:1.4rem;--radius-full:9999px;
  --transition:180ms cubic-bezier(.16,1,.3,1);
}
a,button,input,select,textarea{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}

.container{width:min(1120px,92vw);margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Spam-trap input. Positioned off-screen rather than display:none/hidden, which
   the bots worth catching skip over. Mirrors the detail-page lead-form trap. */
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Off-canvas rather than display:none so it stays in the tab order, then slides
   into view on focus. Must be the first focusable element in the body.
   position:fixed, not absolute: absolute reveals it at the top of the *document*,
   so tabbing to it on a scrolled page sends focus off-screen. z-index outranks the
   sticky header (50) and the onboarding overlay (100). */
.skip-link{position:fixed;left:var(--space-3,1rem);top:-4rem;z-index:1000;padding:.6rem 1rem;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-primary);border-radius:var(--radius-md,10px);font-size:var(--text-sm,.9rem);font-weight:600;text-decoration:none;box-shadow:var(--shadow-md);transition:top 140ms ease}
/* :focus, not :focus-visible — the link is only reachable by keyboard, and the
   explicit outline guarantees a visible indicator even where the global
   :focus-visible rule does not apply. */
.skip-link:focus{top:var(--space-3,1rem);outline:3px solid var(--color-primary);outline-offset:2px}
.topo-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;color:var(--color-primary);opacity:.05;pointer-events:none}

/* header */
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);transition:box-shadow var(--transition)}
.header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5);min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--color-text)}
.brand-mark{width:34px;height:34px;color:var(--color-primary);flex-shrink:0}
.brand-name em{font-style:normal;color:var(--color-accent);font-weight:500;font-size:.8em;margin-left:.15em}
.nav{display:flex;gap:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.nav a{position:relative;padding:.25rem 0}
.nav a:hover{color:var(--color-text)}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--color-primary);transition:width var(--transition)}
.nav a:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:.6rem;flex:1 1 auto;justify-content:flex-end}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border);flex-shrink:0}
.icon-btn:hover{color:var(--color-text);background:var(--color-surface-2)}
.nav-toggle{display:none;place-items:center;width:44px;height:44px;border-radius:var(--radius-full);color:var(--color-text);border:1px solid var(--color-border);background:transparent;flex-shrink:0;cursor:pointer;padding:0}
.nav-toggle:hover{background:var(--color-surface-2)}
.nav-toggle svg{width:22px;height:22px}
.nav .nav-drawer-action{display:none}

/* header search bar */
.header-search{display:flex;align-items:center;gap:.45rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.3rem .8rem;flex:1 1 200px;max-width:300px;min-width:0;transition:border-color var(--transition),box-shadow var(--transition)}
.header-search:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 16%,transparent)}
.header-search .search-ico{width:16px;height:16px;color:var(--color-text-muted);flex-shrink:0}
.header-search input{flex:1;border:none;background:transparent;font-size:var(--text-sm);color:var(--color-text);outline:none;min-width:0}
.header-search input::placeholder{color:var(--color-text-faint)}
@media (max-width:900px){
  .header-search{flex:1 1 100%;max-width:none;order:-1}
  .header-actions{flex-wrap:wrap}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);padding:.7rem 1.15rem;border-radius:var(--radius-full);border:1px solid transparent;transition:all var(--transition);white-space:nowrap}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-surface-2);border-color:var(--color-text-faint)}
.btn-sm{padding:.5rem .95rem;font-size:var(--text-xs)}
.btn-lg{padding:.95rem 1.6rem;font-size:var(--text-base)}
.btn-block{width:100%}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3.5rem);position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.9rem}
.hero h1{font-size:var(--text-2xl);letter-spacing:-.02em;margin-bottom:1rem}
.hero h1 .accent{color:var(--color-primary);font-style:italic}
[data-theme='dark'] .hero h1 .accent{color:var(--color-primary)}
.lede{font-size:var(--text-lg);color:var(--color-text-muted);max-width:54ch;margin-bottom:1.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem}
.hero-search{display:flex;align-items:center;gap:.6rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.45rem .5rem .45rem 1rem;max-width:440px;margin-bottom:1.6rem;transition:border-color var(--transition),box-shadow var(--transition)}
.hero-search:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 16%,transparent)}
.hero-search .search-ico{width:18px;height:18px;color:var(--color-text-muted);flex-shrink:0}
.hero-search input{flex:1;border:none;background:transparent;font-size:var(--text-sm);color:var(--color-text);outline:none;min-width:0}
.hero-search input::placeholder{color:var(--color-text-faint)}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:var(--text-sm);color:var(--color-text-muted)}
.hero-trust strong{color:var(--color-text);display:block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.hero-art svg{width:100%;height:auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}

/* stats */
.stats{background:var(--color-surface);border-block:1px solid var(--color-border);padding-block:var(--space-12)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);text-align:center}
.stat-num{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);color:var(--color-primary)}
.stat-label{font-size:var(--text-sm);color:var(--color-text-muted)}
.stat-source{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center;margin-top:var(--space-5)}

/* sections */
.section{padding-block:clamp(2.5rem,6vw,5rem)}
.section-alt{background:var(--color-surface)}
.section-head{max-width:62ch;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.section-head h2{font-size:var(--text-xl);letter-spacing:-.015em;margin-bottom:.5rem}
.section-sub{color:var(--color-text-muted);font-size:var(--text-lg)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.step{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.step-num{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--color-accent);margin-bottom:.6rem}
.step h3{font-size:var(--text-lg);margin-bottom:.5rem}
.step p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* categories */
.cat-grid{display:flex;flex-direction:column;gap:var(--space-6)}
.cat-group{display:flex;flex-direction:column;gap:var(--space-3)}
.cat-group-title{font-size:var(--text-base);font-weight:700;letter-spacing:-.01em;color:var(--color-text);display:flex;align-items:center;gap:.6rem}
.cat-group-title::before{content:"";width:1.5rem;height:2px;background:var(--color-primary);border-radius:2px}
.cat-group-sub{font-size:var(--text-xs);color:var(--color-text-faint);font-weight:400;margin-left:.25rem}
.cat-grid-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.cat-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:.2rem;text-align:left;min-height:128px;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);font-size:var(--text-sm);font-weight:500;color:#fff;overflow:hidden;background-size:cover;background-position:center;background-color:var(--color-surface-offset);text-decoration:none}
.cat-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,26,16,.86) 6%,rgba(12,26,16,.46) 52%,rgba(12,26,16,.18) 100%);z-index:0}
.cat-card>*{position:relative;z-index:1}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-primary);color:#fff}
.cat-ico{font-size:1.45rem;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.cat-name{font-weight:700;font-size:var(--text-sm);text-shadow:0 1px 4px rgba(0,0,0,.62);color:#fff}
.cat-count{font-size:var(--text-xs);color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cat-card:hover .cat-count{color:#fff}

/* pros */
.pros-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.pros-copy h2{font-size:var(--text-xl);margin-bottom:.6rem;letter-spacing:-.015em}
.check-list{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0}
.check-list li{position:relative;padding-left:1.6rem;color:var(--color-text);font-size:var(--text-sm)}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:700}
.compare-table{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;font-size:var(--text-sm)}
.compare-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.7rem .9rem;border-bottom:1px solid var(--color-border);gap:.5rem;align-items:center}
.compare-row:last-child{border-bottom:none}
.compare-head{background:var(--color-surface-offset);font-weight:600;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}
.compare-head span:nth-child(2){color:var(--color-primary)}
.compare-row span:nth-child(2){color:var(--color-primary);font-weight:600}
.compare-note{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5;margin-top:.7rem;padding:0 .2rem}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);align-items:stretch}
.price-card{position:relative;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);display:flex;flex-direction:column}
.price-card-featured{border-color:var(--color-primary);box-shadow:var(--shadow-lg);background:var(--color-surface)}
.badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--color-primary);color:var(--color-text-inverse);font-size:var(--text-xs);font-weight:600;padding:.3rem .8rem;border-radius:var(--radius-full);white-space:nowrap}
.price-card h3{font-size:var(--text-lg);margin-bottom:.4rem}
.price{display:flex;align-items:baseline;gap:.2rem;margin-bottom:.3rem}
.price .amt{font-family:var(--font-display);font-weight:700;font-size:2.4rem;color:var(--color-text)}
.price .per{color:var(--color-text-muted);font-size:var(--text-sm)}
.price-tagline{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:1.2rem}
.price-card ul{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.4rem;flex-grow:1}
.price-card li{position:relative;padding-left:1.4rem;font-size:var(--text-sm);color:var(--color-text)}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:700}
.price-note{text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-6)}

/* cta band */
.cta-band{background:var(--color-primary);color:var(--color-text-inverse);padding-block:clamp(2rem,5vw,3.5rem)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.cta-band h2{color:var(--color-text-inverse);font-size:var(--text-xl);margin-bottom:.4rem}
.cta-band p{color:color-mix(in oklab,var(--color-text-inverse) 85%,transparent)}
.cta-band .btn-primary{background:var(--color-text-inverse);color:var(--color-primary);border-color:var(--color-text-inverse)}
.cta-band .btn-primary:hover{background:var(--color-surface-2);transform:translateY(-1px)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.contact-copy h2{font-size:var(--text-xl);margin-bottom:.6rem;letter-spacing:-.015em}
.contact-meta{display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem;font-size:var(--text-sm);color:var(--color-text-muted)}
.contact-meta strong{color:var(--color-text)}
.contact-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;gap:.9rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}
.field input,.field select,.field textarea{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.65rem .8rem;font-size:var(--text-sm);color:var(--color-text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 18%,transparent)}
.form-note{font-size:var(--text-sm);color:var(--color-primary);min-height:1.2em;text-align:center}

/* footer */
.footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding-block:var(--space-12) var(--space-6);margin-top:var(--space-16)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:var(--space-8)}
.footer-brand .brand{margin-bottom:.8rem}
.footer-brand p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:42ch}
.footer-col h4,.footer-col .footer-h{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:.8rem;font-weight:600}
.footer-col a{display:block;font-size:var(--text-sm);color:var(--color-text-muted);padding:.2rem 0}
.footer-col a:hover{color:var(--color-primary)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-faint);flex-wrap:wrap}
.footer-admin{color:var(--color-text-faint);text-decoration:none;opacity:.7;transition:opacity var(--transition-interactive),color var(--transition-interactive)}
.footer-admin:hover{opacity:1;color:var(--color-text-muted)}
.legal-page{max-width:72ch}
.legal-page h2{font-size:var(--text-xl);margin-top:var(--space-10);margin-bottom:var(--space-3)}
.legal-page h3{font-size:var(--text-base);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text);margin-top:var(--space-6);margin-bottom:var(--space-2)}
.legal-page p{color:var(--color-text-muted);margin-bottom:var(--space-3);line-height:1.7}
.legal-page a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}

/* Literal colors, not tokens: --color-primary flips to a pale green in dark mode,
   which cream text cannot sit on. The legal strip stays green-on-cream in both themes.
   The negative bottom margin cancels .footer's bottom padding so the strip is flush. */
.footer-legal{background:#2F5D3A;color:#FBFAF6;margin-top:var(--space-6);margin-bottom:calc(-1 * var(--space-6));padding-block:var(--space-4)}
.footer-legal-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;font-size:var(--text-xs);line-height:1.5}
.footer-legal a{color:#FBFAF6;text-decoration:underline;text-underline-offset:2px}
.footer-legal a:hover{opacity:.85}

/* responsive */
@media (max-width:900px){
  .nav{display:none}
  .nav-toggle{display:grid}
  .header.nav-open .nav{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--color-surface);border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-md);padding:var(--space-3) 0;z-index:60;color:var(--color-text)
  }
  .header.nav-open .nav a{padding:.85rem clamp(1rem,6vw,2rem);font-size:var(--text-base)}
  .header.nav-open .nav a::after{display:none}
  .header.nav-open .nav .nav-drawer-action{display:inline-flex;margin:.6rem clamp(1rem,6vw,2rem) 0;align-self:flex-start}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:440px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
  .steps,.cat-grid-inner,.price-grid,.pros-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .cat-grid-inner{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .cta-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .cat-grid-inner{grid-template-columns:1fr 1fr}
  .cat-group-sub{display:none}
  .header-actions .btn-sm{display:none}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .brand-name{display:none}
}

/* ---- homepage spotlight rotation ---- */
.spotlight{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.spotlight-nav{flex-shrink:0;width:48px;height:48px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:1.5rem;line-height:1;cursor:pointer;transition:border-color var(--transition-interactive),background var(--transition-interactive),color var(--transition-interactive);box-shadow:var(--shadow-sm)}
.spotlight-nav:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-surface-offset)}
.spotlight-track{flex:1;overflow:hidden;border-radius:var(--radius-xl);min-width:0;border:1px solid var(--color-border);box-shadow:var(--shadow-md)}
.spotlight-strip{display:flex;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.spotlight-card{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:minmax(260px,42%) 1fr;align-items:stretch;background:var(--color-surface);min-height:340px}
.spotlight-photo{position:relative;overflow:hidden;background:linear-gradient(135deg,color-mix(in oklab,var(--color-primary) 18%,var(--color-surface-offset)),color-mix(in oklab,var(--color-accent) 14%,var(--color-surface-offset)))}
.spotlight-photo .banner-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.spot-photo-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(10,18,13,.55), rgba(10,18,13,0) 45%)}
.spotlight-photo-ico{font-size:3.5rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}
.spotlight-photo-tag{position:absolute;left:var(--space-3);bottom:var(--space-3);z-index:2;font-size:var(--text-xs);font-weight:500;color:var(--color-text-inverse,#fff);background:rgba(0,0,0,.5);padding:.25rem .55rem;border-radius:var(--radius-full);backdrop-filter:blur(2px)}
.spot-photo-count{position:absolute;top:var(--space-3);right:var(--space-3);z-index:2;font-size:var(--text-xs);font-weight:500;color:#fff;background:rgba(10,18,13,.5);padding:.25rem .6rem;border-radius:var(--radius-full);backdrop-filter:blur(4px)}
.spot-photo-tile{position:relative;display:grid;place-items:center;background:color-mix(in oklab,var(--color-surface) 55%,transparent);border:1px solid color-mix(in oklab,var(--color-text) 12%,transparent);border-radius:var(--radius-md);overflow:hidden;min-height:0}
.spot-photo-tile .spot-photo-ico{font-size:2.6rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}
.spot-photo-tile .spot-photo-tag{position:absolute;left:.4rem;bottom:.4rem;font-size:var(--text-xs);padding:.2rem .5rem}
/* single photo: centered icon, no tile chrome */
.spotlight-card.spot-photos-1 .spotlight-photo{grid-template-columns:1fr}
.spotlight-card.spot-photos-1 .spot-photo-tile{background:transparent;border:none;border-radius:0}
.spotlight-card.spot-photos-1 .spot-photo-tile .spot-photo-ico{font-size:4.5rem}
/* two photos: stacked column inside the photo panel */
.spotlight-card.spot-photos-2 .spotlight-photo{grid-template-columns:1fr;grid-template-rows:1.4fr 1fr;gap:.4rem;padding:.5rem}
/* three photos: one hero + two below */
.spotlight-card.spot-photos-3 .spotlight-photo{grid-template-columns:1fr 1fr;grid-template-rows:1.6fr 1fr;gap:.4rem;padding:.5rem}
.spotlight-card.spot-photos-3 .spot-photo-tile:first-child{grid-column:1 / -1}
.spotlight-body{display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:var(--space-8) var(--space-10)}
.spotlight-tag{display:inline-block;font-size:var(--text-xs);font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.spotlight-name{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);letter-spacing:-.015em;line-height:1.1;margin-bottom:.1rem}
.spotlight-cat{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:.4rem}
.spotlight-cat .star{color:var(--color-star)}
.spotlight-desc{font-size:var(--text-base);color:var(--color-text);line-height:1.5;margin-bottom:var(--space-4);max-width:48ch}
/* No gap: the dots carry their own transparent padding (see .spot-dot) so
   adjacent hit areas already sit apart without extra spacing. */
.spotlight-dots{display:flex;justify-content:center;margin-top:calc(var(--space-5) - 8px)}
/* display:flex would otherwise beat the [hidden] attribute on a single-slide carousel. */
.spotlight-dots[hidden]{display:none}
/* 8px dot inside 8px of transparent content-box padding = a 24x24 hit area,
   the WCAG 2.2 minimum, while the dot itself stays visually small. */
/* background-color, not the background shorthand: the shorthand would reset
   background-clip back to border-box and paint over the transparent padding. */
.spot-dot{box-sizing:content-box;width:8px;height:8px;padding:8px;border-radius:var(--radius-full);border:none;background-color:var(--color-surface-offset-2);background-clip:content-box;cursor:pointer;transition:background-color var(--transition-interactive),transform var(--transition-interactive)}
.spot-dot.active{background-color:var(--color-primary);transform:scale(1.25)}
@media (max-width:760px){
  .spotlight-card{grid-template-columns:1fr;min-height:auto}
  .spotlight-photo{min-height:180px}
  .spotlight-body{padding:var(--space-5) var(--space-5)}
  .spotlight-name{font-size:var(--text-lg)}
  .spotlight-nav{width:40px;height:40px;font-size:1.2rem}
}

/* ---- homepage layout helpers (moved off inline style attributes) ---- */
.home-stack{display:flex;flex-direction:column;gap:var(--space-16)}
/* Clears the sticky header when #pricing is reached via an anchor link. */
#pricing,#pricing-header{scroll-margin-top:80px}
.section-head-flush{margin-bottom:0}

/* ---- category grid additions ---- */
.cat-card{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.cat-card-plain{background-color:var(--color-primary);background-image:none}
.cat-card-plain::before{background:rgba(0,0,0,0)}

/* ---- feature disabled state (lead / booking) ---- */
.lead-disabled,.booking-disabled{display:flex;gap:var(--space-4);align-items:flex-start;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5)}
.lead-disabled-ico,.booking-disabled-ico{font-size:1.6rem;flex-shrink:0}
.lead-disabled-title,.booking-disabled-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:.3rem}
.lead-disabled-body,.booking-disabled-body{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.55;margin-bottom:var(--space-3)}
.lead-disabled-actions,.booking-disabled-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.lead-toggle-row{margin:.2rem 0 var(--space-3)}
.lead-toggle-status{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--text-xs);font-weight:500;color:var(--color-primary);background:color-mix(in oklab,var(--color-primary) 10%,transparent);padding:.25rem .6rem;border-radius:var(--radius-full)}

/* ---- onboarding / trial signup modal ---- */
.onb-overlay{position:fixed;inset:0;z-index:100;background:color-mix(in oklab,var(--color-bg) 60%,transparent);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:var(--space-6) var(--space-4);overflow-y:auto}
.onb-overlay[hidden]{display:none}
.onb-modal{position:relative;width:100%;max-width:560px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-8);margin:var(--space-4) auto}
.onb-close{position:absolute;top:var(--space-3);right:var(--space-3);font-size:1.6rem;line-height:1;color:var(--color-text-muted);background:none;border:none;cursor:pointer;padding:.2rem .5rem;border-radius:var(--radius-sm)}
.onb-close:hover{color:var(--color-text)}
.onb-progress{height:4px;background:var(--color-surface-offset-2);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-5)}
.onb-progress span{display:block;height:100%;width:0;background:var(--color-primary);transition:width 280ms cubic-bezier(.16,1,.3,1)}
.onb-modal .eyebrow{display:block;margin-bottom:.4rem}
.onb-modal h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;margin-bottom:.5rem}
.onb-modal .section-sub{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;margin-bottom:var(--space-4)}
.onb-checks{list-style:none;padding:0;margin:0 0 var(--space-5);display:flex;flex-direction:column;gap:.5rem}
.onb-checks li{font-size:var(--text-sm);color:var(--color-text);padding-left:1.4rem;position:relative}
.onb-checks li::before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:700}
.onb-form{display:flex;flex-direction:column;gap:var(--space-3)}
.onb-field{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);display:flex;flex-direction:column;gap:.35rem}
.onb-field-label{display:flex;align-items:center;gap:.2rem}
.onb-required{color:var(--color-accent,#c4621f);font-weight:700;font-size:1.05em;margin-left:.05rem}
.onb-optional{font-weight:500;text-transform:none;letter-spacing:0;color:var(--color-text-faint);font-size:.8em;margin-left:.15rem}
.onb-help{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;min-width:1.15rem;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface-offset);color:var(--color-text-muted);font-size:.7rem;font-weight:700;cursor:help;padding:0;margin-left:.1rem;position:relative;transition:color .15s,border-color .15s}
.onb-help:hover,.onb-help:focus{color:var(--color-primary);border-color:var(--color-primary);outline:2px solid var(--color-primary);outline-offset:1px}
.onb-help::after{content:attr(data-help);position:absolute;top:150%;left:50%;transform:translateX(-50%);width:max-content;max-width:230px;background:var(--color-text);color:var(--color-bg);padding:.55rem .7rem;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.5;z-index:1001;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none;text-align:left}
.onb-help:hover::after,.onb-help:focus::after{opacity:1;visibility:visible}
.onb-field input,.onb-field select,.onb-field textarea{font-family:var(--font-body);font-size:var(--text-base);font-weight:400;text-transform:none;letter-spacing:0;padding:.65rem .8rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-offset);color:var(--color-text)}
.onb-field input:focus,.onb-field select:focus,.onb-field textarea:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}
.onb-note{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.5;margin-top:var(--space-3)}
.onb-fee-disclosure{margin:0 0 var(--space-5);padding:var(--space-4);border:1px solid color-mix(in oklab,var(--color-primary) 28%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-primary) 5%,var(--color-surface))}
.onb-fee-title{display:block;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:.5rem}
.onb-fee-row{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:var(--text-sm);padding:.3rem 0;border-bottom:1px dashed var(--color-divider)}
.onb-fee-row:last-of-type{border-bottom:none}
.onb-fee-row span:first-child{color:var(--color-text-muted)}
.onb-fee-row span:last-child{color:var(--color-text);font-weight:600;text-align:right}
.onb-fee-row em{font-style:normal;font-weight:400;color:var(--color-text-faint);font-size:var(--text-xs)}
.onb-fee-sub{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.5;margin:.5rem 0 0}

/* ---- account: header button + modal + favorites ---- */
.rf-header-account{display:flex;align-items:center}
.rf-signin-btn{padding:.4rem .95rem;background:var(--color-primary);color:var(--color-text-inverse);border:1px solid var(--color-primary);box-shadow:0 0 0 0 color-mix(in oklab,var(--color-primary) 60%,transparent);transition:box-shadow var(--transition-interactive),background var(--transition-interactive),transform var(--transition-interactive)}
.rf-signin-btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 0 18px -2px color-mix(in oklab,var(--color-primary) 65%,transparent)}
.rf-signin-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.rf-account-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--color-surface-offset);border:1px solid var(--color-border);color:var(--color-text);padding:.3rem .6rem .3rem .3rem;border-radius:var(--radius-full);cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;transition:border-color var(--transition-interactive),background var(--transition-interactive)}
.rf-account-btn:hover{border-color:var(--color-primary);background:color-mix(in oklab,var(--color-primary) 8%,var(--color-surface-offset))}
.rf-account-label{white-space:nowrap}
/* --color-text-inverse, not #fff: the dark theme's primary is a light green
   (#79B386) that only reaches 2.4:1 against white. The inverse token flips with
   the theme and clears 4.5:1 in both. Same reason on .rf-account-count and
   .promise-badge-label below. */
.rf-avatar{display:grid;place-items:center;background:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-full);font-weight:600;font-size:var(--text-sm);line-height:1;flex-shrink:0}
.rf-avatar-sm{width:28px;height:28px;font-size:var(--text-xs)}
@media (max-width:560px){.rf-account-label{display:none}.rf-account-btn{padding:.3rem}}

.rf-auth-overlay{position:fixed;inset:0;z-index:10000;background:rgba(10,18,13,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;padding:var(--space-4);opacity:0;transition:opacity .2s ease}
.rf-auth-overlay[hidden]{display:none}
.rf-auth-overlay:not([hidden]){opacity:1}
.rf-auth-modal{position:relative;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-7) var(--space-6) var(--space-6)}
.rf-auth-modal-wide{max-width:560px;padding:var(--space-9) var(--space-8) var(--space-7)}
.rf-verify-banner{background:var(--color-surface-offset);border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:var(--radius-md);padding:.7rem .85rem;margin-bottom:var(--space-4);font-size:var(--text-sm);line-height:1.45;color:var(--color-text-muted)}
.rf-link-btn{background:none;border:none;color:var(--color-primary);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
.rf-link-btn:hover{text-decoration:none}
.rf-auth-close{position:absolute;top:.6rem;right:.8rem;background:none;border:none;font-size:1.6rem;line-height:1;color:var(--color-text-faint);cursor:pointer;padding:.2rem .4rem;border-radius:var(--radius-sm)}
.rf-auth-close:hover{color:var(--color-text);background:var(--color-surface-offset)}
.rf-auth-eyebrow{display:block;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent);margin-bottom:.3rem}
.rf-auth-title{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);letter-spacing:-.015em;line-height:1.2;margin-bottom:.4rem}
.rf-auth-sub{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-6)}
.rf-auth-providers{display:flex;flex-direction:column;gap:.5rem}
.rf-provider{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;padding:.6rem .8rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:border-color var(--transition-interactive),background var(--transition-interactive)}
.rf-provider:hover{border-color:var(--color-primary);background:var(--color-surface-offset)}
.rf-provider svg{flex-shrink:0}
.rf-auth-divider{display:flex;align-items:center;gap:.8rem;margin:var(--space-5) 0;color:var(--color-text-faint);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}
.rf-auth-divider::before,.rf-auth-divider::after{content:"";flex:1;height:1px;background:var(--color-divider)}
.rf-auth-form{display:flex;flex-direction:column;gap:.85rem}
.rf-auth-field{display:flex;flex-direction:column;gap:.25rem;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}
.rf-auth-field em{font-style:normal;color:var(--color-text-faint);font-weight:400}
.rf-auth-field input{font-family:var(--font-body);font-size:var(--text-sm);padding:.6rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-offset);color:var(--color-text)}
.rf-auth-field input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}
.rf-auth-note{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.5;margin-top:var(--space-4);font-style:italic}
/* Sign-in method tabs: email/password vs passwordless email link */
.rf-auth-tabs{display:flex;gap:.35rem;margin:var(--space-4) 0;padding:.25rem;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.rf-auth-tab{flex:1;padding:.5rem .6rem;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--color-text-muted);font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;cursor:pointer;transition:background var(--transition-interactive),color var(--transition-interactive)}
.rf-auth-tab:hover{color:var(--color-text)}
.rf-auth-tab.active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}
.rf-auth-tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}
.rf-auth-sent{display:flex;flex-direction:column;gap:.6rem}
/* Why the modal opened — e.g. "Sign in to publish your review" */
.rf-auth-reason{font-size:var(--text-sm);font-weight:600;color:var(--color-primary);background:color-mix(in oklab,var(--color-primary) 8%,var(--color-surface-offset));border:1px solid color-mix(in oklab,var(--color-primary) 30%,transparent);border-radius:var(--radius-md);padding:.55rem .7rem;margin-top:var(--space-4)}
/* Phone modal — reuses .rf-auth-overlay/.rf-auth-modal for the shell */
.rf-phone-modal{max-width:400px;text-align:center}
.rf-phone-title{margin-bottom:var(--space-4)}
.rf-phone-number{display:block;font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;letter-spacing:-.01em;color:var(--color-primary);text-decoration:none;margin-bottom:var(--space-5);word-break:break-word}
.rf-phone-number:hover{text-decoration:underline}
.rf-phone-actions{display:flex;flex-direction:column;gap:.5rem}
.rf-phone-actions .btn{width:100%;justify-content:center}
.rf-phone-alt{display:inline-block;margin-top:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted)}
.rf-phone-alt:hover{color:var(--color-primary)}
.rf-phone-empty{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-5)}
/* Inline phone number in the detail page fact lists — looks like a link, opens the modal */
.rf-phone-trigger{background:none;border:0;padding:0;font:inherit;color:var(--color-primary);font-weight:600;text-decoration:underline;cursor:pointer}
.rf-phone-trigger:hover{text-decoration:none}
.rf-phone-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
/* Account nudge after a run of anonymous favorites */
.rf-anon-fav-prompt{position:fixed;left:var(--space-4);bottom:var(--space-4);z-index:70;max-width:22rem;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(.5rem);transition:opacity var(--transition-interactive),transform var(--transition-interactive)}
.rf-anon-fav-prompt.show{opacity:1;transform:none}
.rf-anon-fav-title{font-family:var(--font-display);font-weight:600;font-size:var(--text-md);margin-bottom:.3rem}
.rf-anon-fav-body{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;margin-bottom:.7rem}
.rf-anon-fav-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.rf-claim-section-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:.3rem;font-weight:600}

.rf-account-head{display:flex;align-items:center;gap:.8rem;margin-bottom:var(--space-6)}
.rf-account-head .rf-avatar{width:48px;height:48px;font-size:var(--text-lg)}
.rf-account-name{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);line-height:1.15;margin:0}
.rf-account-email{font-size:var(--text-sm);color:var(--color-text-muted);margin:.15rem 0 0}
.rf-account-provider{font-size:var(--text-xs);color:var(--color-text-faint);margin:.1rem 0 0}
.rf-account-section{margin-bottom:var(--space-5)}
.rf-account-section-title{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:.6rem}
.rf-account-count{background:var(--color-primary);color:var(--color-text-inverse);font-size:var(--text-xs);font-weight:600;padding:.1rem .5rem;border-radius:var(--radius-full);text-transform:none;letter-spacing:0}
.rf-fav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.rf-fav-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;padding:.5rem .6rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-offset)}
.rf-fav-item a{font-size:var(--text-sm);font-weight:500;color:var(--color-text)}
.rf-fav-item a:hover{color:var(--color-primary)}
.rf-fav-cat{grid-column:1;font-size:var(--text-xs);color:var(--color-text-faint);margin-top:.1rem}
.rf-fav-remove{grid-row:1 / span 2;grid-column:2;background:none;border:none;color:var(--color-text-faint);font-size:1rem;cursor:pointer;padding:.2rem .4rem;border-radius:var(--radius-sm)}
.rf-fav-remove:hover{color:var(--color-accent);background:var(--color-surface)}
.rf-fav-empty{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;padding:.4rem 0}
.rf-account-actions{display:flex;justify-content:flex-end;margin-top:var(--space-4)}

/* ---- favorite heart buttons ---- */
.fav-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;padding:.3rem .6rem;border-radius:var(--radius-full);cursor:pointer;transition:border-color var(--transition-interactive),color var(--transition-interactive),background var(--transition-interactive)}
.fav-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}
.fav-btn.active{background:color-mix(in oklab,var(--color-accent) 12%,var(--color-surface));border-color:var(--color-accent);color:var(--color-accent)}
.fav-btn .heart{font-size:.9rem;line-height:1}
.fav-btn.active .heart{color:var(--color-accent)}
.detail-fav-row{display:flex;justify-content:flex-end;margin-bottom:var(--space-3)}
.card-fav{position:absolute;top:.5rem;right:.5rem;z-index:2;width:32px;height:32px;border-radius:var(--radius-full);background:rgba(251,250,246,.92);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid var(--color-border);display:grid;place-items:center;cursor:pointer;padding:0;color:var(--color-text-faint);font-size:.95rem;line-height:1;transition:color var(--transition-interactive),background var(--transition-interactive)}
.card-fav:hover{color:var(--color-accent)}
.card-fav.active{color:var(--color-accent);background:color-mix(in oklab,var(--color-accent) 14%,#fff)}
[data-theme='dark'] .card-fav{background:rgba(28,26,20,.9)}
/* keep a >=44px tappable area without visually enlarging the 32px control */
.card-fav::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
/* Width is part of the condition because a touch viewport does not always report
   pointer:coarse (headless/emulated contexts report pointer:fine), which left
   these controls at their compact desktop size on real 390px phones. */
@media (pointer:coarse),(max-width:768px){
  .btn-sm{min-height:44px}
  .btn{min-height:44px}
  .card-fav{width:40px;height:40px}
}
.card{position:relative}
.onb-btn-row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.3rem}
.onb-check-row{font-size:var(--text-sm);font-weight:400;text-transform:none;letter-spacing:0;color:var(--color-text);display:flex;gap:.5rem;align-items:flex-start;line-height:1.45}
.onb-check-row input{margin-top:.2rem;width:auto}
.onb-receipt{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-4)}
.onb-receipt p{margin:0}
.onb-rec-meta{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.3rem!important}
@media (max-width:560px){.onb-modal{padding:var(--space-6)}}

/* Towns-we-serve grid (homepage statewide section) */
.town-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3)}
.town-link{display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-4) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-weight:600;font-size:var(--text-sm);text-decoration:none;transition:all var(--transition)}
.town-link:hover{border-color:var(--color-primary);color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
@media (max-width:900px){.town-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:680px){.town-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.town-grid{grid-template-columns:repeat(2,1fr)}}

/* RangeFinder Promise — provider lead-quality credit (pricing page + policy page) */
.promise-block{margin-top:var(--space-6,2rem);padding:var(--space-5,1.5rem);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-sm)}
.promise-badge{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.promise-badge-label{display:inline-block;padding:.3rem .7rem;background:var(--color-primary);color:var(--color-text-inverse);font-weight:700;font-size:var(--text-sm,.85rem);border-radius:999px;letter-spacing:.01em}
.promise-info{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid var(--color-border);color:var(--color-text);font-size:.75rem;font-weight:700;cursor:help;position:relative}
.promise-info:hover::after,.promise-info:focus::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%);width:min(20rem,72vw);padding:.6rem .75rem;background:#1a1a1a;color:#fff;font-size:.8rem;font-weight:400;line-height:1.4;border-radius:8px;box-shadow:var(--shadow-md,0 6px 18px rgba(0,0,0,.2));z-index:20;white-space:normal}
.promise-block h3{margin:.25rem 0 .5rem;font-size:1.15rem}
.promise-lede{margin:0 0 .9rem;color:var(--color-text-muted,#555);font-size:var(--text-sm,.9rem)}
.promise-points{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem}
.promise-points li{position:relative;padding-left:1.4rem;font-size:var(--text-sm,.9rem)}
.promise-points li::before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:700}
.promise-link{font-weight:600;color:var(--color-primary);text-decoration:none}
.promise-link:hover{text-decoration:underline}

/* Promise policy page table + spacing */
.policy-body table.policy-table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.95rem}
.policy-body table.policy-table th,.policy-body table.policy-table td{border:1px solid var(--color-border,#e5e5e5);padding:.6rem .75rem;text-align:left;vertical-align:top}
.policy-body table.policy-table thead th{background:var(--color-surface-alt,#f6f6f4);font-weight:700}
.policy-body hr{border:0;border-top:1px solid var(--color-border,#e5e5e5);margin:1.75rem 0}
.policy-body h2{margin-top:1.75rem}

/* ============================================================================
   MOBILE-FIRST UX PASS  (iPhone 13 / <=768px)
   Header compression, filter collapse, 16px inputs, 44px tap targets,
   landing-page overflow. Desktop layout is intentionally untouched.
   ========================================================================== */

/* [2] No iOS auto-zoom: every form control must render at >=16px. Component
   rules (e.g. .acct-field input) use --text-sm (~14px on mobile) and outrank a
   bare element selector, so this is an intentional hard floor via !important. */
input, select, textarea { font-size: 16px !important; }

/* [1] Landing "See all … in the full directory →" ghost button overflowed a
   390px viewport because .btn is white-space:nowrap. Let it wrap on this CTA. */
.btn-wrap { white-space: normal; max-width: 100%; height: auto; }

/* [1] Decorative hero / topo SVGs must never force horizontal scroll. */
.topo-bg, .hero-art svg { max-width: 100%; }

@media (max-width: 768px) {
  /* ---- [4] Sticky header <=80px --------------------------------------------
     The <=900px rule wraps .header-search onto its own full-width row (order:-1)
     -> ~135px. Here we keep the header a single ~56px row and collapse the
     search into a 44px icon button; tapping it opens an absolutely-positioned
     input bar (out of flow, so it does not add to the sticky height). */
  .header-inner { flex-wrap: nowrap; min-height: 56px; gap: .5rem; }
  /* min-width floors the tap target: <=420px hides .brand-name, leaving only the
     34px mark. 40px still lets the name shrink to an ellipsis above that width. */
  .brand { flex: 0 1 auto; min-width: 40px; min-height: 44px; }
  .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: .4rem; }

  .header-search {
    order: 0; flex: 0 0 auto; width: 44px; height: 44px; max-width: none;
    padding: 0; justify-content: center; overflow: hidden;
    cursor: pointer;
  }
  .header-search input { display: none; }
  .header-search .search-ico { width: 20px; height: 20px; }
  .header-search.is-open {
    position: absolute; top: calc(100% + .4rem); left: 12px; right: 12px;
    width: auto; height: auto; padding: .5rem .9rem; justify-content: flex-start;
    overflow: visible; z-index: 60; box-shadow: var(--shadow-md);
    background: var(--color-surface); border-color: var(--color-primary);
  }
  .header-search.is-open input { display: block; }
  .header-search.is-open .search-ico { width: 16px; height: 16px; }

  /* ---- [3] Tap targets >=44px ---------------------------------------------- */
  .icon-btn { width: 44px; height: 44px; }
  .brand { align-items: center; }
  /* footer utility links ("For business", "Admin", "Account") + column links */
  .footer-admin { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: .35rem .5rem; }
  .footer-col a { min-height: 44px; display: inline-flex; align-items: center; }
  /* homepage featured-carousel arrows + dots (grow dot hit area, keep dot small) */
  .spotlight-nav { width: 44px; height: 44px; font-size: 1.3rem; }
  /* base rule already gives 24px; widen to 44px for fingers */
  .spot-dot { padding: 18px; }
  /* directory filter pills */
  .town-pill { min-height: 44px; display: inline-flex; align-items: center; }
  .pill { min-height: 44px; }
  /* landing listing-card CTA ("Claim or update this listing") */
  .card-claim a { display: inline-flex; align-items: center; min-height: 44px; }
  /* detail-page "Save to favorites" pill */
  .fav-btn { min-height: 44px; padding-inline: .9rem; }
  /* header sign-in button (.btn gives inline-flex centering, so the taller box
     grows around the label instead of shifting it) */
  .rf-signin-btn { min-height: 44px; }

  /* Breadcrumb links: the text itself is only ~19px tall. Padding plus a
     min-height floor grows the tap area; no background or border is added, so
     they still read as breadcrumbs rather than buttons. */
  .crumbs { flex-wrap: wrap; } /* .detail-crumbs already wraps */
  .crumbs a, .detail-crumbs a {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 8px 4px;
  }

  /* Inline text links whose tap area was 15-20px tall. inline-flex + a
     min-height floor enlarges the hit box only; color, weight and size are
     untouched, so they still look like text links. */
  .hours-note a,
  .fact .fact-v a,
  .promise-link,
  .gate-sub a,
  [data-testid="dashboard-promise-link"] {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-block: 8px;
  }
}

/* --- Landing-page category price chip (Phase 5.1) -------------------------
   Renders a compact "Typical Wyoming range" or "Quote-based" callout on
   /wyoming/{town}/{cat} pages, right below the town blurb. Numbers come from
   CATEGORY_PRICE_RANGES in seo-pages.js. The chip always includes the
   "Actual quotes will vary" hint so it never reads like a fixed quote. */
.landing-price-chip{
  margin-top:1.25rem;
  padding:.9rem 1.1rem;
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-primary);
  border-radius:.6rem;
  background:var(--color-surface-2);
  display:grid;
  gap:.2rem;
  max-width:640px;
}
.landing-price-chip .price-chip-label{
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-text-muted);
  font-weight:600;
}
.landing-price-chip .price-chip-value{
  font-family:var(--font-body);
  font-size:var(--text-lg);
  font-weight:600;
  color:var(--color-text);
  font-variant-numeric:tabular-nums;
}
.landing-price-chip .price-chip-unit{
  font-weight:500;
  font-size:var(--text-sm);
  color:var(--color-text-muted);
}
.landing-price-chip .price-chip-note{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  line-height:1.45;
}
.landing-price-chip--quote{ border-left-color:var(--color-text-muted); }

/* ---- owner-facing free-month grant history (dashboard billing tab) ---- */
.billing-grants{margin-top:var(--space-3)}
.billing-grants-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:.35rem}
.billing-grants-title{font-size:var(--text-sm);font-weight:600;margin:0;color:var(--color-text)}
.billing-grants-total{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}
.billing-grants-intro{margin:0 0 .75rem;font-size:var(--text-sm);color:var(--color-text-muted)}
.billing-grants-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.billing-grants-row{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);padding:.55rem .75rem;font-size:var(--text-sm)}
.billing-grants-row-primary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);color:var(--color-text);margin-bottom:.15rem}
.billing-grants-row-secondary{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-muted)}
.billing-grants-tag{display:inline-block;padding:.1rem .4rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-right:.25rem}
.billing-grants-tag--granted{background:rgba(74,171,124,.15);color:var(--color-success-text)}
.billing-grants-tag--revoked{background:rgba(220,90,90,.15);color:var(--color-danger-text)}

/* ---- platform reviews (reviews of RangeFinder itself) ---- */
.prv-aggregate{display:flex;align-items:center;gap:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);max-width:26rem}
.prv-average{font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);line-height:1;color:var(--color-primary)}
.prv-aggregate-meta{display:flex;flex-direction:column;gap:.2rem}
.prv-count{font-size:var(--text-sm);color:var(--color-text-muted)}
.prv-stars{color:var(--color-star);letter-spacing:.08em}
.prv-empty{color:var(--color-text-muted);font-size:var(--text-sm)}

.prv-layout{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.prv-col-heading{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.prv-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4)}
.prv-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.35rem}
.prv-name{font-weight:600}
.prv-date{font-size:var(--text-xs);color:var(--color-text-faint);margin-left:auto}
.prv-badge{display:inline-block;font-size:var(--text-xs);font-weight:600;letter-spacing:.03em;padding:.1rem .5rem;border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);border:1px solid var(--color-border)}
.prv-badge-owner{background:color-mix(in oklab,var(--color-primary) 14%,transparent);color:var(--color-primary);border-color:color-mix(in oklab,var(--color-primary) 30%,transparent)}
.prv-rating{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.prv-rating-num{font-size:var(--text-xs);color:var(--color-text-muted)}
.prv-body{color:var(--color-text-muted);font-size:var(--text-sm);white-space:pre-wrap}

.prv-panel{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);position:sticky;top:88px}
.prv-panel h2{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.prv-form{display:flex;flex-direction:column;gap:var(--space-4)}
.prv-stars-field{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem}
.prv-stars-field legend{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:.3rem}
.prv-star-option{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);cursor:pointer}
.prv-star-label{margin-left:.4rem;color:var(--color-text-muted);font-size:var(--text-xs)}
.prv-fineprint{font-size:var(--text-xs);color:var(--color-text-faint);margin:0}
.prv-guest p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.prv-pending{font-size:var(--text-sm);color:var(--color-text-muted)}
.prv-status-note{font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-surface-2);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin:0}

/* homepage teaser */
.prv-home-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.prv-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-5)}
.prv-home-grid .prv-card{margin-bottom:0}

@media (max-width:860px){
  .prv-layout{grid-template-columns:1fr}
  .prv-panel{position:static}
  .prv-home-grid{grid-template-columns:1fr}
}