@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
/* =============================================================================
   SETTLED — STYLESHEET
   Built around the brand mark: a deep forest green, a warm terracotta
   orange, and a soft cream — a calm, grown-in palette rather than a
   high-energy SaaS one. Generous white space, motion that only happens
   on scroll (or when you flip the light switch).
   No emoji anywhere — every icon is an inline SVG from icons.js.

   Contents
   01. Tokens (light + dark)
   02. Reset & base
   03. Scrollbar & selection
   04. Typography scale
   05. Icon utility
   06. Layout containers
   07. Navbar
   08. Buttons
   09. Hero
   10. Scroll-reveal animation system
   11. Feature row
   12. Stat band
   13. Screen titles
   14. House view: floor plan + quick-access grid
   15. Room detail + expandable guide items
   16. Guides hub (search, filters, grid)
   17. Pricing page + FAQ accordion
   18. Footer
   19. Modal / paywall
   20. Toast
   21. Forms & inputs
   22. Badges
   23. Utility classes
   24. Accessibility (focus, reduced motion)
   25. Responsive breakpoints
   26. Print styles
   27. Dark mode
   ============================================================================= */

/* -----------------------------------------------------------------------
   01. TOKENS
   ----------------------------------------------------------------------- */
:root {
  --bg: #FBF6EE;
  --bg-soft: #F6ECDD;
  --bg-soft-2: #EEE0C7;
  --bg-elevated: #FFFFFF;
  --ink: #1E2B22;
  --ink-soft: #6B6153;
  --ink-faint: #AFA290;
  --line: #E6DCC8;
  --line-strong: #D8C9AC;
  --accent: #D5754A;
  --accent-dark: #B85E39;
  --accent-soft: #F3DBC8;
  --gold: #C99A3A;
  --gold-bg: #FAF1DF;
  --success: #2F6B4F;
  --success-bg: #E3EFE7;
  --danger: #C1452F;
  --danger-bg: #FBEAE4;

  /* Glass surfaces: lightly frosted panels with a real edge, so they
     still read on a flat background. */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 253, 248, 0.86);
  --glass-border: #E6DCC8;
  --glass-blur: 22px;

  /* Green-tinted shadows (not neutral grey) so elevation reads as part of
     the brand palette instead of generic SaaS grey. */
  --shadow-color: 10, 22, 16;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(var(--shadow-color),0.05);
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color),0.05), 0 1px 1px rgba(var(--shadow-color),0.04);
  --shadow-md: 0 14px 32px rgba(var(--shadow-color),0.10);
  --shadow-lg: 0 32px 64px rgba(var(--shadow-color),0.20);
  --shadow-inset: inset 0 0 0 1px var(--line);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --t-fast: 0.15s;
  --t-med: 0.28s;
  --t-slow: 0.5s;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 56px; --space-10: 72px;
}

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* -----------------------------------------------------------------------
   02. RESET & BASE
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
hr { border: none; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

/* -----------------------------------------------------------------------
   03. SCROLLBAR & SELECTION
   ----------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-pill); border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
::selection { background: var(--accent-soft); color: var(--accent-dark); }

/* -----------------------------------------------------------------------
   04. TYPOGRAPHY SCALE
   ----------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.5px; }
h1 { font-size: 40px; line-height: 1.08; }
h2 { font-size: 28px; line-height: 1.2; }
h3 { font-size: 21px; line-height: 1.3; }
h4 { font-size: 17px; line-height: 1.4; font-weight: 700; letter-spacing: -0.1px; }
p { margin: 0; }
.lead { font-size: 18px; color: var(--ink-soft); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11.5px; }
.text-muted { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }
.text-center { text-align: center; }
.font-mono { font-family: "SFMono-Regular", Menlo, Consolas, monospace; }

/* -----------------------------------------------------------------------
   05. ICON UTILITY
   ----------------------------------------------------------------------- */
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 28px; height: 28px; }
.icon-accent { color: var(--accent); }
.icon-gold { color: var(--gold); }
.icon-muted { color: var(--ink-faint); }

/* -----------------------------------------------------------------------
   06. LAYOUT CONTAINERS
   ----------------------------------------------------------------------- */
main#app { max-width: 1040px; margin: 0 auto; padding: 0 32px 100px; }
.screen { display: none; }
.screen.visible { display: block; animation: fadeUp 0.45s var(--ease-out); }
.container-narrow { max-width: 720px; margin: 0 auto; }

/* -----------------------------------------------------------------------
   07. NAVBAR
   A floating glass pill rather than an edge-to-edge bar — it's frosted
   from the first frame, not just once you scroll, so it reads as a glass
   object sitting above the page rather than a bar that becomes one.
   ----------------------------------------------------------------------- */
.navbar {
  position: fixed; top: 18px; left: 18px; right: 18px; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px 10px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}
.navbar.scrolled {
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-md);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-style: italic; font-size: 17px; letter-spacing: -0.3px; color: var(--ink);
}
.nav-logo-mark {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-elevated); box-shadow: var(--shadow-xs);
}
.nav-logo-mark img { width: 30px; height: 30px; object-fit: contain; }
.nav-links { display: flex; gap: 2px; flex: 1; margin-left: 16px; }
.nav-link {
  color: var(--ink-soft); font-weight: 500; font-size: 13.5px;
  padding: 7px 13px; border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; color: var(--ink-soft);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.theme-toggle:hover { background: var(--bg-soft); color: var(--ink); transform: rotate(-12deg); }
.nav-upgrade {
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 13px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-upgrade:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.nav-upgrade:active { transform: translateY(0); }

/* -----------------------------------------------------------------------
   08. BUTTONS
   ----------------------------------------------------------------------- */
.btn-primary, .btn-ghost, .btn-outline, .btn-text {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill); font-weight: 600; cursor: pointer; border: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; padding: 13px 26px; font-size: 15px; }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary:disabled { background: var(--bg-soft-2); color: var(--ink-faint); cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  background: var(--glass-bg); color: var(--ink); padding: 13px 24px; font-size: 15px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
.btn-ghost:hover { background: var(--glass-bg-strong); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }

.btn-outline { background: transparent; color: var(--ink); padding: 11px 22px; font-size: 14px; border: 1.5px solid var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); }

.btn-text { background: none; color: var(--accent); padding: 4px 2px; font-size: 13.5px; }
.btn-text:hover { color: var(--accent-dark); text-decoration: underline; }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--bg-soft); }
.btn-icon:hover { background: var(--bg-soft-2); }

/* -----------------------------------------------------------------------
   09. HERO
   ----------------------------------------------------------------------- */
.hero { position: relative; padding: 180px 0 72px; isolation: isolate; }
.hero-main { display: grid; grid-template-columns: 1fr 340px; align-items: center; gap: 56px; }
.hero-copy { max-width: 580px; }
.hero-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; font-style: italic; color: var(--accent-dark);
  background: var(--accent-soft); padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 24px;
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(38px, 5vw, 60px); line-height: 1.06;
  margin: 0 0 22px; letter-spacing: -1.6px;
}
.hero-sub { font-size: 18px; color: var(--ink-soft); max-width: 480px; margin: 0 0 36px; font-weight: 400; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-footnote {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-faint); margin: 28px 0 0; font-weight: 500;
}
.hero-footnote-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); flex-shrink: 0; }

/* The logo gets real presence here — a full-size lockup inside a glass
   card, not a shrunk icon. The card's light, frosted backing is what
   keeps the logo's fixed brand colours reading clearly in dark mode too. */
.hero-logo-card {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 253, 248, 0.82); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 44px 36px;
}
.hero-logo-card img { width: 100%; max-width: 260px; height: auto; }

/* -----------------------------------------------------------------------
   10. SCROLL-REVEAL ANIMATION SYSTEM
   ----------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal].in-view > * { animation: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } }
.anim-fade-up { animation: fadeUp var(--t-slow) var(--ease-out); }
.anim-fade-in { animation: fadeIn var(--t-slow) var(--ease-out); }
.anim-scale-in { animation: scaleIn var(--t-slow) var(--ease-out); }

/* -----------------------------------------------------------------------
   11. FEATURE ROW
   ----------------------------------------------------------------------- */
.feature-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding-bottom: 40px; }
.feature-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  padding: 30px 26px; display: flex; flex-direction: column; gap: 6px;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.feature-card:hover { background: var(--glass-bg-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent); margin-bottom: 10px;
  transition: transform var(--t-med) var(--ease);
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-4deg); }
.feature-title { font-weight: 700; font-size: 16px; letter-spacing: -0.2px; }
.feature-text { font-size: 14px; color: var(--ink-soft); }

/* -----------------------------------------------------------------------
   12. STAT BAND
   ----------------------------------------------------------------------- */
.stat-band {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 36px 0; margin-bottom: 56px;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-num { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.stat-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }

/* -----------------------------------------------------------------------
   13. SCREEN TITLES
   ----------------------------------------------------------------------- */
.screen-title { font-weight: 800; font-size: 32px; margin: 0 0 8px; letter-spacing: -0.9px; }
.screen-sub { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 28px; }
.model-note { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 6px; }
#screen-house, #screen-room, #screen-guides, #screen-pricing { padding-top: 140px; }

/* -----------------------------------------------------------------------
   14. HOUSE VIEW: FLOOR PLAN + QUICK-ACCESS GRID
   A flat, clickable top-down plan (the same shape as the little sketch on
   the homepage, scaled up) so every room is one tap away without needing
   to orbit or load anything. The quick grid beneath repeats every room as
   a plain labelled button, for whoever would rather jump by name.
   ----------------------------------------------------------------------- */
.floorplan-wrap {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  padding: 20px;
}
.floorplan {
  position: relative; width: 100%; aspect-ratio: 240 / 190;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1.5px solid var(--glass-border); background: var(--glass-bg-strong);
}
.plan-room {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--room-accent, var(--accent)) 38%, transparent);
  color: var(--ink);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.plan-room::after {
  content: ""; position: absolute; inset: 1px; border-radius: inherit;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--t-fast) var(--ease);
}
.plan-room:hover {
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 26%, transparent);
  z-index: 2; box-shadow: var(--shadow-sm);
}
.plan-room:hover::after { box-shadow: inset 0 0 0 1.5px var(--room-accent, var(--accent)); }
.plan-room-icon { color: var(--room-accent, var(--accent)); }
.plan-room-label { font-size: 12.5px; font-weight: 700; letter-spacing: -0.1px; text-align: center; padding: 0 6px; }

.quick-grid-heading { margin-top: 36px; }
.room-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.room-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.room-chip:hover { background: var(--glass-bg-strong); border-color: var(--room-accent, var(--line-strong)); transform: translateY(-1px); }
.room-chip .icon { color: var(--ink-soft); }
.room-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--room-accent, var(--accent)); flex-shrink: 0; }

/* -----------------------------------------------------------------------
   15. ROOM DETAIL + EXPANDABLE GUIDE ITEMS
   ----------------------------------------------------------------------- */
.back-link { margin-bottom: 28px; }
.room-header {
  display: flex; align-items: flex-start; gap: 22px; margin-bottom: 36px;
  padding: 32px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 10%, var(--glass-bg));
  border: 1px solid color-mix(in srgb, var(--room-accent, var(--accent)) 24%, var(--glass-border));
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
.room-icon {
  color: var(--room-accent, var(--accent));
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 14%, var(--bg));
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.room-header-body { min-width: 0; }
.room-floor-badge {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--room-accent, var(--accent)); margin-bottom: 8px;
}
.room-header-stats { display: flex; gap: 16px; margin-top: 14px; }
.room-header-stats span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.room-header-stats .icon { color: var(--room-accent, var(--accent)); }
.guide-section { margin-bottom: 32px; }
.guide-heading { font-weight: 700; font-size: 15px; margin: 0 0 14px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.6px; }
.guide-list {
  list-style: none; display: grid; gap: 1px; background: var(--line);
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line);
}
.guide-item { background: var(--bg-elevated); padding: 16px 18px; font-size: 14.5px; }
.guide-item-icon { color: var(--ink-faint); flex-shrink: 0; }
.guide-item { display: flex; gap: 14px; align-items: flex-start; }
.guide-item-body { flex: 1; min-width: 0; }
.guide-item.locked { cursor: pointer; color: var(--ink-faint); background: var(--bg-soft); transition: background var(--t-fast) var(--ease); }
.guide-item.locked:hover { background: var(--gold-bg); }
.guide-item.locked .guide-item-icon { color: var(--gold); }

.guide-item-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer;
  margin-top: 8px;
}
.guide-item-toggle .icon { transition: transform var(--t-fast) var(--ease); }
.guide-item.open .guide-item-toggle .icon { transform: rotate(180deg); }
.guide-steps {
  list-style: decimal; margin: 0; padding: 0 0 0 20px; max-height: 0; overflow: hidden;
  transition: max-height var(--t-med) var(--ease), margin var(--t-med) var(--ease);
  font-size: 13.5px; color: var(--ink-soft);
}
.guide-item.open .guide-steps { max-height: 600px; margin-top: 10px; }
.guide-steps li { margin-bottom: 6px; }
.guide-steps li:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------
   16. GUIDES HUB (search, filters, grid)
   ----------------------------------------------------------------------- */
.guides-toolbar { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.search-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  padding: 12px 18px; color: var(--ink-faint);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-field input { flex: 1; background: none; border: none; outline: none; font-size: 14.5px; color: var(--ink); }
.search-field input::placeholder { color: var(--ink-faint); }

.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft);
  font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--line-strong); }
.filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.guide-card {
  text-align: left; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--room-accent, var(--line-strong)); }
.guide-card.locked { background: var(--glass-bg-strong); }
.guide-card.locked:hover { border-color: var(--gold); }
.guide-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guide-card-room { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.guide-card-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--room-accent, var(--accent)); flex-shrink: 0; }
.guide-card-title { font-weight: 700; font-size: 15px; letter-spacing: -0.1px; }
.guide-card-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.guides-empty { text-align: center; color: var(--ink-faint); padding: 60px 0; font-size: 14.5px; grid-column: 1 / -1; }

/* -----------------------------------------------------------------------
   17. PRICING PAGE + FAQ ACCORDION
   ----------------------------------------------------------------------- */
.pricing-hero { text-align: center; margin-bottom: 44px; }
.pricing-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 64px; max-width: 680px; margin-left: auto; margin-right: auto; }
.pricing-card {
  position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 20px;
}
.pricing-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); position: relative; }
.pricing-card.featured > * { position: relative; z-index: 1; }
.pricing-card-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--radius-pill); white-space: nowrap;
}
.pricing-card-tier { font-size: 13px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.6px; }
.pricing-card-price { font-size: 36px; font-weight: 800; letter-spacing: -1px; }
.pricing-card-price span { font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.pricing-feature-list { list-style: none; display: grid; gap: 12px; font-size: 14px; }
.pricing-feature-list li { display: flex; align-items: flex-start; gap: 10px; }
.pricing-feature-list .icon { color: var(--success); margin-top: 2px; }

.faq-block { max-width: 640px; margin: 0 auto; }
.faq-list {
  display: grid; gap: 1px; background: var(--glass-border); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
.faq-item { background: var(--glass-bg); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; font-weight: 600; font-size: 14.5px; text-align: left;
}
.faq-question .icon { transition: transform var(--t-fast) var(--ease); color: var(--ink-faint); }
.faq-item.open .faq-question .icon { transform: rotate(180deg); }
.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height var(--t-med) var(--ease), padding var(--t-med) var(--ease);
  font-size: 13.5px; color: var(--ink-soft); padding: 0 18px;
}
.faq-item.open .faq-answer { max-height: 200px; padding: 0 18px 16px; }

/* -----------------------------------------------------------------------
   18. FOOTER
   ----------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0; margin-top: 40px; }
.footer-inner { max-width: 1040px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 7px; font-weight: 700; font-style: italic; font-size: 14px; }
.footer-mark { display: flex; align-items: center; justify-content: center; }
.footer-mark img { width: 18px; height: auto; object-fit: contain; }
.footer-copy { font-size: 13px; color: var(--ink-faint); }

/* -----------------------------------------------------------------------
   19. MODAL / PAYWALL
   ----------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,16,12,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease); z-index: 100; padding: 20px;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-card {
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-radius: var(--radius-lg); padding: 34px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: var(--shadow-lg);
  transform: scale(0.94) translateY(10px); transition: transform var(--t-med) var(--ease);
}
.modal-overlay.show .modal-card { transform: scale(1) translateY(0); }
.modal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold-bg); color: var(--gold);
  margin-bottom: 14px;
}
.modal-title { font-weight: 800; font-size: 21px; margin: 0 0 10px; letter-spacing: -0.4px; }
.modal-body { font-size: 14px; color: var(--ink-soft); margin: 0 0 24px; line-height: 1.55; }
.pricing-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
.price-pill { background: var(--bg-soft); border-radius: var(--radius-md); padding: 14px 20px; min-width: 100px; }
.price-pill strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.4px; }
.price-pill span { font-size: 11.5px; color: var(--ink-soft); }
.modal-actions { display: flex; gap: 10px; justify-content: center; }

/* -----------------------------------------------------------------------
   20. TOAST
   ----------------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 24px);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: all var(--t-med) var(--ease); box-shadow: var(--shadow-md); z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* -----------------------------------------------------------------------
   21. FORMS & INPUTS
   ----------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  background: var(--bg-elevated); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 14.5px; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }

/* -----------------------------------------------------------------------
   22. BADGES
   ----------------------------------------------------------------------- */
.guide-card-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill); flex-shrink: 0;
}
.guide-card-badge.free { background: var(--success-bg); color: var(--success); }
.guide-card-badge.premium { background: var(--gold-bg); color: var(--gold); }

/* -----------------------------------------------------------------------
   23. UTILITY CLASSES
   ----------------------------------------------------------------------- */
.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)}
.mb-1{margin-bottom:var(--space-1)} .mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)}
.mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)}
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.rounded-full { border-radius: var(--radius-pill); }
.w-full { width: 100%; }

/* -----------------------------------------------------------------------
   24. ACCESSIBILITY
   ----------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
button:focus-visible, .guide-item.locked:focus-visible, .guide-card:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .anim-fade-up, .anim-fade-in, .anim-scale-in { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------------------
   25. RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pricing-cards { grid-template-columns: 1fr; max-width: 380px; }
  .guides-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .hero { padding: 132px 0 48px; }
  .hero-main { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { max-width: none; }
  .hero-sub { max-width: none; }
  .hero-plan { max-width: 280px; margin: 0 auto; order: -1; }
  .nav-links { display: none; }
  #screen-house, #screen-room, #screen-guides, #screen-pricing { padding-top: 110px; }
  .room-header { flex-direction: column; text-align: center; align-items: center; padding: 26px 22px; }
  .room-header-stats { justify-content: center; }
  .footer-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  main#app { padding: 0 18px 80px; }
  .hero h1 { letter-spacing: -0.6px; }
  .hero-sub { font-size: 16px; }
  .guide-item { padding: 14px; }
  .pricing-card { padding: 24px 20px; }
  .floorplan-wrap { padding: 12px; }
  .plan-room-label { font-size: 10.5px; }
  .plan-room-icon .icon { width: 14px; height: 14px; }
}

/* -----------------------------------------------------------------------
   26. PRINT STYLES
   ----------------------------------------------------------------------- */
@media print {
  .navbar, .site-footer, .toast, .modal-overlay, .nav-upgrade { display: none !important; }
  body { background: #fff; color: #000; }
  .screen { display: block !important; }
}

/* -----------------------------------------------------------------------
   27. DARK MODE
   Applies automatically by system preference, and can be overridden
   either way by the navbar toggle, which sets data-theme on <html>
   and persists the choice to localStorage.
   ----------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg: #15201A;
  --bg-soft: #1D2B22;
  --bg-soft-2: #26362A;
  --bg-elevated: #192620;
  --ink: #F3ECDD;
  --ink-soft: #AFA392;
  --ink-faint: #6E6355;
  --line: #2C3E31;
  --line-strong: #3B5041;
  --accent: #E08A5E;
  --accent-dark: #F2A378;
  --accent-soft: rgba(224,138,94,0.16);
  --gold: #DDB15B;
  --gold-bg: rgba(221,177,91,0.12);
  --success: #5FAE82;
  --success-bg: rgba(95,174,130,0.14);
  --shadow-color: 0, 0, 0;
  --shadow-md: 0 14px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 32px 64px rgba(0,0,0,0.6);

  /* Dark glass: a lighter film over the dark backdrop rather than a dark
     film over a light one — same frosted idea, inverted. */
  --glass-bg: rgba(40, 54, 44, 0.45);
  --glass-bg-strong: rgba(48, 64, 52, 0.62);
  --glass-border: rgba(255, 255, 255, 0.10);
}
:root[data-theme="dark"] .navbar.scrolled { background: var(--glass-bg-strong); }
:root[data-theme="dark"] .nav-upgrade { background: #fff; color: #000; }
:root[data-theme="dark"] .nav-upgrade:hover { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .nav-logo-mark { background: rgba(255,255,255,0.92); }
:root[data-theme="dark"] ::selection { background: var(--accent-soft); color: var(--accent); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #15201A;
    --bg-soft: #1D2B22;
    --bg-soft-2: #26362A;
    --bg-elevated: #192620;
    --ink: #F3ECDD;
    --ink-soft: #AFA392;
    --ink-faint: #6E6355;
    --line: #2C3E31;
    --line-strong: #3B5041;
    --accent: #E08A5E;
    --accent-dark: #F2A378;
    --accent-soft: rgba(224,138,94,0.16);
    --gold: #DDB15B;
    --gold-bg: rgba(221,177,91,0.12);
    --success: #5FAE82;
    --success-bg: rgba(95,174,130,0.14);
    --shadow-color: 0, 0, 0;
    --shadow-md: 0 14px 32px rgba(0,0,0,0.5);
    --shadow-lg: 0 32px 64px rgba(0,0,0,0.6);

    --glass-bg: rgba(40, 54, 44, 0.45);
    --glass-bg-strong: rgba(48, 64, 52, 0.62);
    --glass-border: rgba(255, 255, 255, 0.10);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .navbar.scrolled { background: var(--glass-bg-strong); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-upgrade { background: #fff; color: #000; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-upgrade:hover { background: var(--accent); color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-logo-mark { background: rgba(255,255,255,0.92); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) ::selection { background: var(--accent-soft); color: var(--accent); }
}


/* -----------------------------------------------------------------------
   28. INSTALL (PWA)
   ----------------------------------------------------------------------- */
.nav-install {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-install[hidden] { display: none; }
.nav-install:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.nav-install:active { transform: scale(0.97); }
.install-card { max-width: 380px; }
.install-app-icon { width: 64px; height: 64px; border-radius: 15px; margin: 0 auto 16px; box-shadow: var(--shadow-md); }
.install-card .modal-body b { color: var(--ink); font-weight: 650; }
.install-card .modal-body .icon { display: inline-block; vertical-align: -2px; color: var(--accent); }
.hero-eyebrow u { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.footer-copy:hover { color: var(--ink); }

/* Installed app: respect the notch / home indicator */
@media (display-mode: standalone) {
  .navbar { top: max(18px, env(safe-area-inset-top)); }
  .site-footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .nav-install span { display: none; }
  .nav-install { width: 36px; padding: 0; justify-content: center; }
}


/* -----------------------------------------------------------------------
   29. MOBILE TAB BAR
   On phones (and especially once installed) the top links are hidden, so
   the four sections live in a thumb-reach bar at the bottom instead.
   ----------------------------------------------------------------------- */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar {
    position: fixed; z-index: 55; left: 12px; right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px; border-radius: 22px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
    backdrop-filter: blur(var(--glass-blur)) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
  }
  .tab {
    display: grid; justify-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 16px;
    font-size: 11px; font-weight: 600; color: var(--ink-soft);
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .tab:active { transform: scale(0.94); }
  .tab .icon { width: 21px; height: 21px; }
  .tab.is-active { color: var(--accent); background: var(--accent-soft); }
  main#app { padding-bottom: 120px; }
  .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* Short rooms (hallway, garden on a phone): put the icon beside the label
   instead of above it, so nothing gets clipped. Each tile is its own size
   container, so this follows the tile's real rendered height. */
.plan-room { container-type: size; }
.plan-room-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
@container (max-height: 64px) {
  .plan-room-inner { flex-direction: row; gap: 5px; }
  .plan-room-label { padding: 0; }
}