:root {
  --ink: #101914;
  --ink-soft: #314139;
  --forest-950: #0d2b20;
  --forest-900: #123b2c;
  --forest-800: #1b4332;
  --forest-700: #2c6e49;
  --forest-500: #5a9a77;
  --mint: #c8f3d9;
  --mint-soft: #e9f6ee;
  --paper: #f0f2ed;
  --paper-deep: #e2e7df;
  --white: #ffffff;
  --gold: #d2aa3a;
  --gold-soft: #f5eac8;
  --clay: #bf7258;
  --line: rgba(16, 25, 20, 0.13);
  --line-light: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 8px 24px rgba(8, 28, 20, 0.09);
  --shadow-lg: 0 32px 90px rgba(5, 24, 17, 0.24);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-code: "IBM Plex Mono", monospace;
  --shell: min(1440px, calc(100vw - 64px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p { margin-top: 0; }
.shell { width: var(--shell); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--forest-950);
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  border-color: rgba(255,255,255,.11);
  background: rgba(13, 43, 32, .88);
  backdrop-filter: blur(18px);
}
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand img { width: 150px; height: auto; }
.nav-menu { display: flex; align-items: center; gap: 30px; color: rgba(255,255,255,.76); font-size: 14px; font-weight: 600; }
.nav-menu > a:not(.nav-start):not(.nav-signin):hover { color: var(--white); }
.nav-signin { color: var(--white); }
.nav-start { padding: 11px 18px; border-radius: 999px; color: var(--forest-950); background: var(--mint); }
.nav-start:hover { background: var(--white); transform: translateY(-1px); }
.nav-toggle { display: none; border: 0; padding: 8px; background: transparent; }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--white); }

.hero {
  position: relative;
  min-height: 980px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 88% 18%, rgba(90, 154, 119, .24), transparent 32%),
    linear-gradient(135deg, var(--forest-950) 0%, #0f3528 48%, #173f30 100%);
}
.hero-grid, .planner-grid, .final-grid {
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
  pointer-events: none;
}
.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(680px, 1.42fr);
  gap: clamp(42px, 5vw, 92px);
  align-items: center;
  padding: 160px 0 130px;
}
.hero-copy { align-self: center; }
.signal-label, .section-code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--forest-700);
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.signal-label { color: var(--mint); }
.signal-label span { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 7px rgba(200,243,217,.1); }
.section-code.light { color: var(--mint); }
.hero h1, .story-head h2, .planner-copy h2, .follow-head h2, .pricing-intro h2, .question-head h2, .final-layout h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .98;
}
.hero h1 { max-width: 680px; margin-bottom: 28px; font-size: clamp(58px, 5.25vw, 92px); }
.hero h1 em, .story-head h2 em, .planner-copy h2 em { color: var(--mint); font-style: italic; font-weight: 500; letter-spacing: -.035em; }
.hero-lede { max-width: 640px; margin-bottom: 34px; color: rgba(255,255,255,.7); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  min-height: 51px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 13px 20px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-mint { color: var(--forest-950); background: var(--mint); box-shadow: 0 10px 30px rgba(44,110,73,.22); }
.button-mint:hover { background: var(--white); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.button-quiet { border-color: rgba(255,255,255,.22); color: var(--white); background: rgba(255,255,255,.05); }
.button-quiet:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.1); }
.button-dark { color: var(--white); background: var(--forest-900); }
.button-dark:hover { background: var(--forest-700); }
.button-gold { color: var(--forest-950); background: var(--gold); }
.button-gold:hover { background: #e4bf53; }
.button-back { color: var(--ink-soft); border-color: var(--line); background: transparent; }
.button-outline { color: var(--forest-900); border-color: rgba(44,110,73,.32); background: transparent; }
.button-outline:hover { background: var(--mint-soft); }
.button-full { width: 100%; }
.hero-proof, .availability { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 25px; font-size: 12px; }
.hero-proof { color: rgba(255,255,255,.66); }
.hero-proof span { display: flex; align-items: center; gap: 7px; }
.hero-proof span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.availability { gap: 8px; margin-top: 38px; }
.availability span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; color: rgba(255,255,255,.48); font-family: var(--font-code); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.hero-product { position: relative; min-width: 0; }
.preview-switcher { display: flex; justify-content: flex-end; gap: 6px; margin: 0 12px 14px; }
.preview-switcher button { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 13px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); font-family: var(--font-code); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.preview-switcher button[aria-selected="true"] { border-color: var(--mint); color: var(--forest-950); background: var(--mint); }
.app-window { overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-lg); transform: perspective(1400px) rotateY(-1.4deg) rotateX(.6deg); transform-origin: center left; }
.window-bar { height: 36px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 13px; border-bottom: 1px solid #e5e8e5; color: #829087; background: #f7f8f6; font-family: var(--font-code); font-size: 8px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #cbd2cd; }
.secure-mark { justify-self: end; color: #72a789; font-size: 7px; }
.app-frame { min-height: 520px; display: grid; grid-template-columns: 152px 1fr; color: var(--ink); background: #f4f6f2; }
.app-sidebar { display: flex; flex-direction: column; padding: 19px 14px 14px; border-right: 1px solid #e0e5e0; background: var(--white); }
.app-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--forest-900); font-family: var(--font-display); font-size: 17px; }
.app-brand img { border-radius: 8px; }
.home-chip { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border: 1px solid #e1e7e1; border-radius: 9px; background: #f8faf7; }
.home-chip > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: var(--white); background: var(--forest-700); font-size: 9px; font-weight: 700; }
.home-chip small, .home-chip b { display: block; }
.home-chip small { color: #9aa49d; font-family: var(--font-code); font-size: 5px; letter-spacing: .08em; }
.home-chip b { margin-top: 1px; color: #34453b; font-size: 7px; }
.app-nav { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; }
.app-nav span { padding: 9px 10px; border-radius: 7px; color: #819087; font-size: 8px; font-weight: 600; }
.app-nav span i { display: inline-block; width: 12px; color: #aab4ad; font-style: normal; }
.app-nav .active { color: var(--forest-800); background: var(--mint-soft); }
.app-nav .active i { color: var(--forest-700); }
.sidebar-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 11px 7px 2px; border-top: 1px solid #e8ebe8; }
.sidebar-foot > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: #bd765c; font-size: 7px; font-weight: 700; }
.sidebar-foot b, .sidebar-foot small { display: block; line-height: 1.25; }
.sidebar-foot b { color: #425048; font-size: 7px; }.sidebar-foot small { color: #9aa49d; font-size: 6px; }
.app-screen { min-width: 0; padding: 25px 25px 22px; }
.preview-pane { animation: paneIn .38s ease both; }
.preview-pane[hidden] { display: none; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.app-screen-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 19px; }
.app-screen-head small { color: #85938a; font-family: var(--font-code); font-size: 7px; letter-spacing: .08em; }
.app-screen-head h2 { margin: 3px 0 0; color: #173728; font-family: var(--font-display); font-size: 24px; letter-spacing: -.04em; }
.app-screen-head button { border: 0; border-radius: 8px; padding: 8px 11px; color: var(--white); background: var(--forest-700); font-size: 7px; font-weight: 700; }
.briefing-band { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 15px 17px; border-radius: 12px; color: var(--white); background: var(--forest-900); }
.briefing-band > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.briefing-band small, .briefing-band strong { display: block; grid-column: 2; }
.briefing-band small { font-family: var(--font-code); font-size: 6px; letter-spacing: .1em; opacity: .6; }
.briefing-band strong { font-size: 11px; }
.briefing-band p { margin: 0; font-size: 7px; opacity: .64; }.briefing-band p b { color: var(--mint); }
.pulse-dot { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(200,243,217,.12); }
.dashboard-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.task-column, .calendar-card, .asset-photo-card, .asset-facts, .asset-tasks, .receipt-card, .timeline-card { border: 1px solid #e1e6e1; border-radius: 12px; background: var(--white); }
.task-column, .calendar-card { padding: 13px; }
.panel-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }.panel-label span { color: #31463a; font-size: 8px; font-weight: 700; }.panel-label small { color: #9ba69f; font-family: var(--font-code); font-size: 5px; letter-spacing: .08em; }
.mini-task { position: relative; display: grid; grid-template-columns: 16px 1fr 22px; gap: 7px; align-items: center; padding: 10px 8px; border-top: 1px solid #edf0ed; }
.mini-task.high::before { content: ""; position: absolute; left: -14px; width: 2px; height: 32px; border-radius: 2px; background: var(--clay); }
.task-check { width: 13px; height: 13px; border: 1px solid #c6d0c9; border-radius: 4px; }
.mini-task small, .mini-task b, .mini-task p { display: block; margin: 0; line-height: 1.3; }.mini-task small { color: #a08038; font-family: var(--font-code); font-size: 5px; letter-spacing: .05em; }.mini-task b { color: #31443a; font-size: 7px; }.mini-task p { margin-top: 2px; color: #96a099; font-size: 6px; }.mini-task > i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: #769e84; font-size: 5px; font-style: normal; font-weight: 700; }
.week-labels, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }.week-labels { margin-bottom: 3px; color: #a2aca5; font-family: var(--font-code); font-size: 5px; }.calendar-days { gap: 3px; }.calendar-days i, .calendar-days b { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #65746b; font-size: 6px; font-style: normal; font-weight: 500; }.calendar-days .today { color: var(--white); background: var(--forest-700); }.calendar-days .event { position: relative; background: var(--mint-soft); }.calendar-days .event::after { content: ""; position: absolute; bottom: 2px; width: 2px; height: 2px; border-radius: 50%; background: var(--forest-700); }.calendar-days .event.gold { background: var(--gold-soft); }.calendar-days .event.gold::after { background: var(--gold); }
.home-progress { margin-top: 13px; padding-top: 11px; border-top: 1px solid #edf0ed; }.home-progress div { display: flex; justify-content: space-between; font-size: 6px; }.home-progress i { display: block; height: 4px; margin: 5px 0; overflow: hidden; border-radius: 4px; background: #e5eae6; }.home-progress i em { display: block; width: 72%; height: 100%; background: var(--forest-500); }.home-progress small { color: #9ca69f; font-size: 5px; }
.task-filters { display: flex; gap: 7px; margin-bottom: 13px; }.task-filters span { border: 1px solid #dfe5e0; border-radius: 999px; padding: 6px 9px; color: #849087; background: var(--white); font-size: 6px; }.task-filters span.active { border-color: var(--forest-500); color: var(--forest-800); background: var(--mint-soft); }.task-filters b { font-family: var(--font-code); }
.tasks-layout { display: grid; grid-template-columns: 1.45fr .55fr; gap: 12px; }.task-queue, .task-capacity { border: 1px solid #e1e6e1; border-radius: 12px; background: var(--white); }.task-queue { padding: 13px; }.queue-task { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; padding: 11px 3px; border-top: 1px solid #edf0ed; }.queue-task time { color: #87958c; font-family: var(--font-code); font-size: 5px; line-height: 1.15; text-align: center; }.queue-task time b { color: var(--forest-800); font-size: 10px; }.queue-task small, .queue-task strong, .queue-task p { display: block; margin: 0; }.queue-task small { color: #a08038; font-family: var(--font-code); font-size: 5px; }.queue-task strong { color: #31443a; font-size: 8px; }.queue-task p { margin-top: 2px; color: #96a099; font-size: 6px; }.queue-task > span { border-radius: 999px; padding: 4px 6px; color: #597064; background: #eef3ef; font-size: 5px; }
.task-capacity { display: flex; flex-direction: column; justify-content: center; padding: 18px; color: var(--white); background: var(--forest-900); }.task-capacity small { color: var(--mint); font-family: var(--font-code); font-size: 6px; letter-spacing: .08em; }.task-capacity > b { margin: 5px 0 0; font-family: var(--font-display); font-size: 42px; line-height: 1; }.task-capacity p { margin: 6px 0 13px; color: rgba(255,255,255,.62); font-size: 7px; line-height: 1.45; }.task-capacity i { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.13); }.task-capacity i em { display: block; width: 33%; height: 100%; background: var(--mint); }.task-capacity > span { margin-top: 7px; color: rgba(255,255,255,.48); font-size: 6px; line-height: 1.4; }
.import-toast { position: absolute; right: -22px; bottom: -31px; display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; color: var(--forest-950); background: var(--mint); box-shadow: 0 18px 42px rgba(3,20,13,.25); animation: floatToast 5s ease-in-out infinite; }.import-toast > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--forest-700); font-size: 11px; }.import-toast small, .import-toast b { display: block; line-height: 1.25; }.import-toast small { font-family: var(--font-code); font-size: 6px; letter-spacing: .08em; }.import-toast b { font-size: 8px; }
@keyframes floatToast { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.asset-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 12px; }.asset-photo-card { min-height: 216px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #eef2ed; }.water-heater-illustration { position: relative; width: 72px; height: 132px; border-radius: 36px 36px 16px 16px; background: linear-gradient(90deg,#c9d0ca,#f7f8f5 48%,#bcc5be); box-shadow: 0 12px 20px rgba(30,50,40,.14); }.water-heater-illustration::before { content: ""; position: absolute; top: -9px; left: 14px; width: 10px; height: 14px; background: #a9b2ab; box-shadow: 32px 0 #a9b2ab; }.water-heater-illustration span { position: absolute; top: 46px; left: 21px; width: 30px; height: 36px; border: 1px solid #aeb8b1; border-radius: 3px; background: #f7f6ed; }.water-heater-illustration i { position: absolute; right: -7px; top: 66px; width: 10px; height: 6px; border-radius: 0 3px 3px 0; background: #87938b; }.water-heater-illustration b { position: absolute; bottom: 18px; width: 100%; color: #627169; font-size: 7px; text-align: center; }.asset-photo-card > small { margin-top: 13px; color: #91a097; font-family: var(--font-code); font-size: 6px; }.asset-facts { padding: 16px; }.fact-head { display: flex; justify-content: space-between; }.fact-head small, .status-live { font-family: var(--font-code); font-size: 5px; letter-spacing: .08em; }.fact-head small { color: #95a198; }.status-live { padding: 3px 5px; color: var(--forest-700); background: var(--mint-soft); }.asset-facts h3 { margin: 13px 0; color: #263c31; font-family: var(--font-display); font-size: 17px; line-height: 1.1; letter-spacing: -.03em; }.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.fact-grid p { margin: 0; padding: 7px; border-radius: 6px; background: #f6f8f5; }.fact-grid small, .fact-grid b { display: block; }.fact-grid small { color: #9ba69f; font-family: var(--font-code); font-size: 5px; }.fact-grid b { color: #45564c; font-size: 7px; }.scan-callout { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 9px; border: 1px solid #d7e9dd; border-radius: 8px; color: var(--forest-800); background: var(--mint-soft); }.scan-callout > span { font-size: 15px; }.scan-callout b, .scan-callout small { display: block; }.scan-callout b { font-size: 7px; }.scan-callout small { margin-top: 2px; color: #718278; font-size: 6px; line-height: 1.35; }
.asset-tasks { margin-top: 12px; padding: 12px 14px; }.asset-tasks p { display: grid; grid-template-columns: 13px 1fr auto; align-items: center; gap: 8px; margin: 0; padding: 7px 0; border-top: 1px solid #edf0ed; }.asset-tasks p i { width: 12px; height: 12px; border: 1px solid #cad2cc; border-radius: 3px; }.asset-tasks p b { color: #415149; font-size: 7px; }.asset-tasks p span { color: #9ba69f; font-size: 6px; }
.record-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 12px; }.receipt-card, .timeline-card { padding: 14px; }.receipt-card { background: #eef2ed; }.receipt-top { display: flex; gap: 6px; align-items: center; color: var(--forest-700); }.receipt-top small { font-family: var(--font-code); font-size: 5px; letter-spacing: .06em; }.receipt-paper { margin: 12px auto; padding: 16px 13px; color: #49574f; background: #fffef8; box-shadow: 0 6px 18px rgba(40,45,42,.12); }.receipt-paper > b, .receipt-paper > small { display: block; text-align: center; }.receipt-paper > b { font-family: var(--font-code); font-size: 8px; }.receipt-paper > small { color: #929a94; font-size: 6px; }.receipt-paper hr { border: 0; border-top: 1px dashed #c8cec9; margin: 10px 0; }.receipt-paper p { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 6px; }.receipt-status { display: flex; justify-content: space-between; color: var(--forest-700); font-size: 7px; font-weight: 700; }.timeline-card article { display: grid; grid-template-columns: 13px 1fr auto; gap: 8px; padding: 13px 0; border-top: 1px solid #edf0ed; }.timeline-card article > i { width: 11px; height: 11px; margin-top: 3px; border: 1px solid #c5cec8; border-radius: 50%; }.timeline-card article > i.done { border-color: var(--forest-500); background: var(--forest-500); box-shadow: inset 0 0 0 3px var(--white); }.timeline-card article small, .timeline-card article b, .timeline-card article p { display: block; margin: 0; }.timeline-card article small { color: #9f8547; font-family: var(--font-code); font-size: 5px; }.timeline-card article b { color: #3a4c42; font-size: 8px; }.timeline-card article p { margin-top: 2px; color: #929e96; font-size: 6px; }.timeline-card article > span { color: #66756d; font-family: var(--font-code); font-size: 7px; }
.hero-scroll { position: absolute; z-index: 3; left: 50%; bottom: 34px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.55); font-family: var(--font-code); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); }.hero-scroll i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-style: normal; }

.principles { border-bottom: 1px solid var(--line); background: var(--white); }
.principle-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.principle-row p { display: flex; gap: 12px; margin: 0; padding: 25px 28px; border-left: 1px solid var(--line); font-size: 12px; }.principle-row p:last-child { border-right: 1px solid var(--line); }.principle-row b { color: var(--forest-900); }.principle-row span { color: #7e8a83; }

.product-story { padding: 140px 0 150px; background: var(--paper); }
.story-head { display: grid; grid-template-columns: 1.25fr .75fr; column-gap: 90px; align-items: end; margin-bottom: 70px; }
.story-head .section-code { grid-column: 1 / -1; }
.story-head h2 { margin: 0; font-size: clamp(54px, 6.5vw, 100px); }
.story-head h2 em { color: var(--forest-700); }
.story-head > p:last-child { margin: 0 0 8px; color: #69766f; font-size: 17px; line-height: 1.75; }
.screen-gallery { display: grid; gap: 28px; }
.gallery-screen { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: var(--shadow-sm); }
.gallery-copy span { display: block; margin-bottom: 18px; color: var(--forest-700); font-family: var(--font-code); font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.gallery-copy h3 { margin-bottom: 16px; font-family: var(--font-display); font-size: clamp(32px, 3.1vw, 50px); line-height: 1.02; letter-spacing: -.045em; }
.gallery-copy p { margin: 0; color: #6f7c75; font-size: 15px; line-height: 1.75; }
.gallery-calendar { display: grid; grid-template-columns: .7fr 1.3fr; min-height: 610px; align-items: stretch; }.gallery-calendar .gallery-copy { align-self: center; padding: 65px 35px 65px 65px; }.calendar-ui { align-self: end; margin: 54px 0 -18px; border: 1px solid #dfe5df; border-radius: 20px 0 0 0; background: #f8faf7; box-shadow: -18px 0 44px rgba(25,50,35,.1); }.calendar-ui header { display: flex; justify-content: space-between; align-items: center; padding: 25px; border-bottom: 1px solid #e2e7e2; }.calendar-ui header small { color: #94a198; font-family: var(--font-code); font-size: 8px; letter-spacing: .08em; }.calendar-ui header h4 { margin: 4px 0 0; color: var(--forest-900); font-family: var(--font-display); font-size: 25px; }.calendar-ui header button { border: 1px solid #dbe2dc; padding: 7px 10px; color: #66756d; background: var(--white); font-size: 8px; }.calendar-ui header button:first-child { color: var(--white); background: var(--forest-700); }.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }.cal-week { padding: 11px 17px; color: #929e96; font-family: var(--font-code); font-size: 7px; text-align: right; }.cal-grid { padding: 0 17px 20px; }.cal-grid i { min-height: 82px; padding: 8px; border-top: 1px solid #e4e9e4; border-left: 1px solid #e4e9e4; color: #637169; font-style: normal; font-size: 8px; }.cal-grid i:nth-child(7n) { border-right: 1px solid #e4e9e4; }.cal-grid i:nth-last-child(-n+7) { border-bottom: 1px solid #e4e9e4; }.cal-grid i.selected small { display: grid; width: 20px; height: 20px; margin-left: auto; place-items: center; border-radius: 50%; color: var(--white); background: var(--forest-700); }.cal-grid span { display: block; margin-top: 9px; overflow: hidden; border-left: 2px solid; border-radius: 3px; padding: 5px; font-size: 6px; white-space: nowrap; }.event-green { border-color: var(--forest-500); color: var(--forest-700); background: var(--mint-soft); }.event-gold { border-color: var(--gold); color: #806716; background: var(--gold-soft); }.event-clay { border-color: var(--clay); color: #8e4e3b; background: #f7e9e3; }
.gallery-mobile { min-height: 650px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; color: var(--white); background: var(--forest-900); }.gallery-mobile .gallery-copy { max-width: 560px; padding: 70px 70px 70px 35px; }.gallery-mobile .gallery-copy span { color: var(--mint); }.gallery-mobile .gallery-copy > p { color: rgba(255,255,255,.62); }.resale-note { margin-top: 25px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }.gallery-mobile .gallery-copy .resale-note p { margin: 0; color: rgba(255,255,255,.84); font-size: 13px; font-weight: 650; line-height: 1.55; }.resale-note sup { margin-left: 2px; color: var(--mint); font-family: var(--font-code); }.resale-note small { display: block; margin-top: 6px; color: rgba(255,255,255,.46); font-size: 10px; line-height: 1.55; }.phone-shell { width: 330px; margin: 55px auto -70px; overflow: hidden; border: 8px solid #071b13; border-radius: 42px; color: var(--ink); background: var(--white); box-shadow: 0 24px 55px rgba(0,0,0,.3); transform: rotate(-3deg); }.phone-bar { height: 28px; display: flex; justify-content: space-between; padding: 7px 22px; color: #47564d; font-size: 8px; font-weight: 700; }.phone-bar i { width: 52px; height: 14px; margin-top: -7px; border-radius: 0 0 10px 10px; background: #071b13; }.phone-shell header { display: grid; grid-template-columns: 1fr auto 1fr; padding: 8px 15px 12px; border-bottom: 1px solid #e3e8e4; text-align: center; }.phone-shell header button { justify-self: start; border: 0; color: #637169; background: transparent; font-size: 20px; }.phone-shell header span { color: #34483c; font-size: 11px; font-weight: 700; }.phone-body { padding: 28px 23px 48px; text-align: center; }.complete-icon { width: 48px; height: 48px; display: grid; margin: 0 auto 18px; place-items: center; border-radius: 50%; color: var(--white); background: var(--forest-700); box-shadow: 0 0 0 9px var(--mint-soft); }.phone-body > small { color: var(--forest-500); font-family: var(--font-code); font-size: 7px; letter-spacing: .08em; }.phone-body h4 { margin: 5px 0; color: var(--forest-900); font-family: var(--font-display); font-size: 25px; letter-spacing: -.03em; }.phone-body > p { color: #87928b; font-size: 10px; }.phone-body label { display: block; margin-top: 22px; color: #526259; font-size: 9px; font-weight: 600; text-align: left; }.phone-body textarea { width: 100%; min-height: 72px; margin-top: 6px; resize: none; border: 1px solid #dce2dd; border-radius: 9px; padding: 10px; color: #596860; background: #f8faf7; font-size: 9px; }.cost-row { display: flex; justify-content: space-between; margin: 12px 0 18px; padding: 11px; border-radius: 9px; color: #5b6a62; background: #f4f7f3; font-size: 9px; }.phone-body > button { width: 100%; border: 0; border-radius: 10px; padding: 12px; color: var(--white); background: var(--forest-700); font-size: 9px; font-weight: 700; }
.gallery-scan { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 610px; align-items: center; }.gallery-scan .gallery-copy { padding: 65px 65px 65px 35px; }.scan-ui { min-height: 610px; display: grid; grid-template-columns: 1.1fr .9fr; padding: 55px 0 0 55px; background: #dfe6df; }.scan-photo { position: relative; min-height: 510px; display: grid; place-items: center; overflow: hidden; border-radius: 20px 0 0; background: linear-gradient(145deg,#81968a,#b6c2ba); }.scan-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.1) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.1) 50%,transparent 50.2%); background-size: 38px 38px; }.scan-corner { position: absolute; z-index: 2; width: 42px; height: 42px; border-color: var(--mint); border-style: solid; }.scan-corner.one { top: 44px; left: 44px; border-width: 3px 0 0 3px; }.scan-corner.two { top: 44px; right: 44px; border-width: 3px 3px 0 0; }.scan-corner.three { bottom: 44px; left: 44px; border-width: 0 0 3px 3px; }.scan-corner.four { right: 44px; bottom: 44px; border-width: 0 3px 3px 0; }.equipment-shape { position: relative; z-index: 1; width: 150px; height: 285px; border-radius: 70px 70px 24px 24px; background: linear-gradient(90deg,#c6cec8,#f6f7f3 48%,#acb8b0); box-shadow: 0 24px 50px rgba(29,47,37,.24); }.equipment-shape::before { content: ""; position: absolute; top: -18px; left: 35px; width: 20px; height: 26px; background: #8d9b92; box-shadow: 60px 0 #8d9b92; }.equipment-shape i { position: absolute; top: 90px; left: 43px; width: 64px; height: 82px; border: 1px solid #aeb8b1; border-radius: 4px; background: #f7f5eb; }.equipment-shape b, .equipment-shape small { position: absolute; width: 100%; text-align: center; }.equipment-shape b { bottom: 40px; color: #65736b; font-size: 12px; }.equipment-shape small { bottom: 25px; color: #8c9890; font-family: var(--font-code); font-size: 6px; }.scan-photo > p { position: absolute; z-index: 2; bottom: 18px; margin: 0; color: var(--white); font-family: var(--font-code); font-size: 8px; }.scan-result { align-self: center; position: relative; z-index: 3; margin-left: -25px; padding: 27px; border-radius: 18px 0 0 18px; background: var(--white); box-shadow: -14px 18px 38px rgba(30,55,40,.17); }.scan-result > span { color: var(--forest-700); font-family: var(--font-code); font-size: 8px; font-weight: 600; letter-spacing: .07em; }.scan-result h4 { margin: 10px 0 20px; color: var(--forest-900); font-family: var(--font-display); font-size: 25px; }.scan-result p { display: flex; justify-content: space-between; margin: 0; padding: 10px 0; border-top: 1px solid #e6eae7; }.scan-result p small { color: #94a097; font-family: var(--font-code); font-size: 6px; }.scan-result p b { color: #526159; font-size: 8px; }.scan-result button { width: 100%; margin-top: 18px; border: 0; border-radius: 9px; padding: 11px; color: var(--white); background: var(--forest-700); font-size: 8px; font-weight: 700; }

.planner { position: relative; overflow: hidden; padding: 140px 0; color: var(--white); background: var(--forest-950); }
.planner-grid { opacity: .08; mask-image: none; }
.planner-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .78fr 1.22fr; gap: 100px; align-items: start; }
.planner-copy { position: sticky; top: 140px; }
.planner-copy h2 { margin-bottom: 28px; font-size: clamp(55px, 6vw, 88px); }.planner-copy p { max-width: 550px; color: rgba(255,255,255,.62); font-size: 17px; line-height: 1.8; }.planner-note { display: flex; align-items: center; gap: 18px; max-width: 500px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-light); }.planner-note > span { width: 64px; height: 64px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(200,243,217,.35); border-radius: 50%; color: var(--mint); font-family: var(--font-code); font-size: 10px; }.planner-note p { margin: 0; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.55; }.planner-note b { color: var(--white); }
.plan-card { min-height: 600px; overflow: hidden; scroll-margin-top: 96px; border: 1px solid rgba(255,255,255,.15); border-radius: 26px; color: var(--ink); background: var(--paper); box-shadow: 0 34px 90px rgba(0,0,0,.3); }
.plan-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 18px 24px 0; }.plan-progress i { height: 3px; border-radius: 3px; background: #d9dfda; }.plan-progress i.active { background: var(--forest-700); }
.plan-step, .plan-result { border: 0; margin: 0; padding: 44px 48px 48px; }
.plan-step legend { width: 100%; margin-bottom: 28px; color: var(--forest-950); font-family: var(--font-display); font-size: clamp(29px, 2.8vw, 42px); font-weight: 650; line-height: 1.08; letter-spacing: -.04em; }.plan-step legend small { display: block; margin-bottom: 12px; color: var(--forest-500); font-family: var(--font-code); font-size: 9px; font-weight: 600; letter-spacing: .1em; }
.choice { display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 15px; margin-bottom: 10px; padding: 16px 18px; border: 1px solid #d5ddd7; border-radius: 12px; background: rgba(255,255,255,.66); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }.choice:hover { border-color: var(--forest-500); transform: translateX(3px); }.choice input { position: absolute; opacity: 0; pointer-events: none; }.choice b, .choice small { display: block; }.choice b { color: #2c3f34; font-size: 14px; }.choice small { margin-top: 3px; color: #7c8881; font-size: 11px; }.choice > i { width: 19px; height: 19px; border: 1px solid #b5c0b8; border-radius: 50%; }.choice:has(input:checked) { border-color: var(--forest-700); background: var(--mint-soft); }.choice:has(input:checked) > i { border: 5px solid var(--forest-700); background: var(--white); }
.plan-step > .button-full { margin-top: 24px; }.field-hint { margin: -14px 0 18px; color: #7f8a83; font-size: 12px; }.system-choices { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.system-choices label { position: relative; cursor: pointer; }.system-choices input { position: absolute; opacity: 0; }.system-choices span { min-height: 48px; display: flex; align-items: center; gap: 10px; border: 1px solid #d5ddd7; border-radius: 10px; padding: 11px 13px; color: #506057; background: rgba(255,255,255,.66); font-size: 11px; font-weight: 600; }.system-choices span::before { content: "+"; width: 19px; height: 19px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 5px; color: #8a958e; background: #e8ece8; }.system-choices input:checked + span { border-color: var(--forest-500); color: var(--forest-900); background: var(--mint-soft); }.system-choices input:checked + span::before { content: "✓"; color: var(--white); background: var(--forest-700); }.plan-actions { display: grid; grid-template-columns: .36fr .64fr; gap: 10px; margin-top: 28px; }.plan-error { margin: 12px 0 0; color: #ad4d3f; font-size: 11px; }
.result-head { display: flex; justify-content: space-between; gap: 25px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }.result-head small { color: var(--forest-500); font-family: var(--font-code); font-size: 8px; font-weight: 600; letter-spacing: .1em; }.result-head h3 { margin: 8px 0 0; color: var(--forest-950); font-family: var(--font-display); font-size: clamp(29px, 3vw, 42px); line-height: 1.04; letter-spacing: -.04em; }.ready-stamp { flex: 0 0 auto; align-self: start; border: 2px solid var(--forest-500); border-radius: 6px; padding: 8px 9px; color: var(--forest-700); font-family: var(--font-code); font-size: 7px; font-weight: 600; letter-spacing: .08em; transform: rotate(2deg); }.first-tasks { margin: 16px 0; }.first-task { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }.first-task > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--forest-700); background: var(--mint-soft); font-family: var(--font-code); font-size: 8px; }.first-task b, .first-task small { display: block; }.first-task b { color: #304238; font-size: 12px; }.first-task small { margin-top: 2px; color: #8a958e; font-size: 9px; }.first-task > i { color: #967a2f; font-family: var(--font-code); font-size: 7px; font-style: normal; }.result-summary { color: #78847d; font-size: 10px; }.result-actions { display: grid; grid-template-columns: .28fr .72fr; gap: 10px; margin-top: 18px; }.result-actions .button { width: 100%; }.result-microcopy { margin: 12px auto 0; color: #87928b; font-size: 9px; text-align: center; }.restart-plan { display: block; margin: 10px auto 0; border: 0; color: var(--forest-700); background: transparent; font-size: 10px; text-decoration: underline; cursor: pointer; }

.follow-through { padding: 130px 0; background: var(--white); }.follow-head { display: grid; grid-template-columns: 1fr .6fr; align-items: end; gap: 70px; margin-bottom: 70px; }.follow-head .section-code { grid-column: 1 / -1; }.follow-head h2 { margin: 0; font-size: clamp(50px, 5.6vw, 84px); }.follow-head > p:last-child { margin: 0 0 8px; color: #748078; font-size: 17px; }.loop-line { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 0; padding: 0; list-style: none; }.loop-line::before { content: ""; position: absolute; top: 24px; right: 12%; left: 12%; height: 1px; background: #ccd5ce; }.loop-line li { position: relative; padding: 0 28px; text-align: center; }.loop-line li > span { position: relative; z-index: 2; width: 48px; height: 48px; display: grid; margin: 0 auto 22px; place-items: center; border: 1px solid #c3cec6; border-radius: 50%; color: var(--forest-700); background: var(--white); font-family: var(--font-code); font-size: 10px; }.loop-line b { display: block; margin-bottom: 8px; color: var(--forest-900); font-family: var(--font-display); font-size: 24px; }.loop-line p { margin: 0; color: #7a867f; font-size: 13px; }

.pricing { padding: 140px 0; background: var(--paper-deep); }.pricing-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; align-items: start; }.pricing-intro { position: sticky; top: 130px; }.pricing-intro h2 { max-width: 560px; margin-bottom: 25px; font-size: clamp(52px, 5.5vw, 82px); }.pricing-intro > p:last-of-type { max-width: 500px; color: #6f7c75; font-size: 16px; line-height: 1.8; }.pricing-faq-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--forest-700); font-size: 12px; font-weight: 700; }.pricing-faq-link:hover { color: var(--forest-950); }.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.price-card { display: flex; min-height: 570px; flex-direction: column; border: 1px solid var(--line); border-radius: 24px; padding: 32px; background: var(--white); box-shadow: var(--shadow-sm); }.price-home { color: var(--white); background: var(--forest-900); }.price-top { display: flex; justify-content: space-between; align-items: center; }.price-top p { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 650; }.price-top span { border: 1px solid #d9e0db; border-radius: 999px; padding: 5px 8px; color: #849088; font-family: var(--font-code); font-size: 6px; letter-spacing: .08em; }.price-home .price-top span { border-color: rgba(255,255,255,.2); color: var(--mint); }.price { display: flex; align-items: baseline; gap: 8px; margin: 37px 0 12px; }.price b { font-family: var(--font-display); font-size: 50px; line-height: 1; letter-spacing: -.04em; }.price small { color: #7c8981; font-size: 11px; }.price-home .price small { color: rgba(255,255,255,.5); }.price-purpose { min-height: 50px; color: #68766e; font-size: 13px; }.price-home .price-purpose { color: rgba(255,255,255,.6); }.price-card ul { display: flex; flex-direction: column; gap: 11px; margin: 20px 0 30px; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }.price-home ul { border-color: rgba(255,255,255,.15); }.price-card li { display: flex; align-items: center; gap: 9px; color: #4f5e55; font-size: 12px; }.price-home li { color: rgba(255,255,255,.76); }.price-card li::before { content: "✓"; color: var(--forest-700); font-weight: 700; }.price-home li::before { color: var(--mint); }.price-card .button { margin-top: auto; }.renewal-copy { display: block; margin-top: 12px; color: rgba(255,255,255,.42); font-size: 8px; line-height: 1.5; text-align: center; }

.faq-page-body .site-header { background: rgba(13,43,32,.97); }.faq-main { min-height: 75vh; padding: 170px 0 125px; background: var(--paper); }.faq-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 100px; align-items: start; }.faq-intro { position: sticky; top: 130px; }.faq-intro h1 { max-width: 560px; margin: 0 0 24px; color: var(--forest-950); font-family: var(--font-display); font-size: clamp(58px, 6vw, 92px); line-height: .94; letter-spacing: -.055em; }.faq-intro > p { max-width: 440px; color: #6f7c75; font-size: 16px; line-height: 1.75; }.faq-back-link { display: inline-flex; gap: 8px; margin-top: 20px; color: var(--forest-700); font-size: 12px; font-weight: 700; }.faq-cta { margin-top: 34px; padding: 30px; border-radius: 20px; color: var(--white); background: var(--forest-900); }.faq-cta h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; }.faq-cta p { margin: 0 0 20px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.6; }

.questions { padding: 130px 0; background: var(--paper); }.question-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 100px; }.question-head { position: sticky; top: 130px; align-self: start; }.question-head h2 { font-size: clamp(48px, 5vw, 75px); }.question-list details { border-top: 1px solid var(--line); }.question-list details:last-child { border-bottom: 1px solid var(--line); }.question-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0; color: var(--forest-900); font-family: var(--font-display); font-size: 22px; font-weight: 600; cursor: pointer; list-style: none; }.question-list summary::-webkit-details-marker { display: none; }.question-list summary span { position: relative; width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid #bac5bd; border-radius: 50%; }.question-list summary span::before, .question-list summary span::after { content: ""; position: absolute; top: 12px; left: 7px; width: 11px; height: 1px; background: var(--forest-700); }.question-list summary span::after { transform: rotate(90deg); transition: transform .2s ease; }.question-list details[open] summary span::after { transform: rotate(0); }.question-list details p { max-width: 760px; margin: -6px 45px 25px 0; color: #6f7c75; font-size: 14px; line-height: 1.8; }

.final-cta { position: relative; overflow: hidden; padding: 90px 0; color: var(--white); background: var(--forest-900); }.final-grid { opacity: .08; mask-image: none; }.final-layout { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 35px; }.final-layout > img { border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,.2); }.final-layout .section-code { margin-bottom: 12px; }.final-layout h2 { margin-bottom: 8px; font-size: clamp(45px, 5.5vw, 76px); }.final-layout p:last-child { margin: 0; color: rgba(255,255,255,.58); }

.site-footer { padding: 70px 0 25px; color: rgba(255,255,255,.58); background: #071b13; }.footer-top { display: grid; grid-template-columns: 1.8fr repeat(3,1fr); gap: 70px; padding-bottom: 55px; }.footer-brand img { width: 154px; }.footer-brand p { max-width: 310px; margin-top: 20px; font-size: 13px; }.footer-top nav { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }.footer-top nav b { margin-bottom: 8px; color: var(--white); font-family: var(--font-code); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }.footer-top nav a:hover { color: var(--mint); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--font-code); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }.reveal-late { transition-delay: .13s; }.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1240px) {
  :root { --shell: min(1160px, calc(100vw - 48px)); }
  .hero { min-height: auto; }
  .hero-layout { grid-template-columns: .76fr 1.24fr; gap: 40px; padding-top: 135px; }
  .hero h1 { font-size: clamp(54px, 5.5vw, 74px); }
  .app-frame { min-height: 450px; grid-template-columns: 128px 1fr; }.app-screen { padding: 19px; }.app-sidebar { padding: 15px 11px; }
  .app-brand { font-size: 14px; }.app-brand img { width: 25px; }.home-chip > div, .sidebar-foot > div { display: none; }.home-chip { justify-content: center; }.app-nav span { padding: 8px 6px; font-size: 7px; }.dashboard-grid { grid-template-columns: 1fr; }.calendar-card { display: none; }.asset-layout { grid-template-columns: .65fr 1.35fr; }.asset-tasks { margin-top: 8px; }
  .story-head { column-gap: 50px; }.planner-layout { gap: 55px; }.pricing-layout { gap: 50px; }.question-layout { gap: 55px; }
  .gallery-calendar .gallery-copy { padding-left: 45px; }.gallery-mobile .gallery-copy { padding-right: 45px; }.gallery-scan .gallery-copy { padding-right: 45px; }
}

@media (max-width: 980px) {
  :root { --shell: min(900px, calc(100vw - 38px)); }
  .nav-menu { gap: 18px; }
  .hero-layout { grid-template-columns: 1fr; padding: 140px 0 120px; }
  .hero-copy { max-width: 760px; }.hero h1 { max-width: 820px; font-size: clamp(58px, 9vw, 90px); }.hero-lede { max-width: 720px; }
  .hero-product { max-width: 820px; width: 100%; margin-left: auto; }.app-frame { min-height: 500px; grid-template-columns: 145px 1fr; }.dashboard-grid { grid-template-columns: 1.15fr .85fr; }.calendar-card { display: block; }
  .hero-scroll { display: none; }
  .story-head, .follow-head { grid-template-columns: 1fr; gap: 25px; }.story-head > p:last-child, .follow-head > p:last-child { max-width: 650px; }
  .gallery-calendar { grid-template-columns: 1fr; }.gallery-calendar .gallery-copy { padding: 50px 50px 10px; }.calendar-ui { margin-left: 50px; }.gallery-mobile { grid-template-columns: .75fr 1.25fr; }.phone-shell { width: 290px; }.gallery-scan { grid-template-columns: 1fr; }.scan-ui { order: 2; padding-left: 45px; }.gallery-scan .gallery-copy { order: 1; padding: 50px 50px 10px; }
  .planner-layout { grid-template-columns: 1fr; }.planner-copy, .pricing-intro, .question-head { position: static; }.planner-copy { max-width: 760px; }.plan-card { max-width: 760px; width: 100%; margin-left: auto; }
  .pricing-layout, .question-layout { grid-template-columns: 1fr; }.pricing-intro, .question-head { max-width: 760px; }.price-grid { max-width: 820px; margin-left: auto; }
  .footer-top { grid-template-columns: 1.6fr repeat(3,1fr); gap: 35px; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100vw - 30px); }
  .site-header, .site-header.scrolled, .faq-page-body .site-header { background: #0d2b20; backdrop-filter: none; }
  .nav { min-height: 68px; }.brand img { width: 128px; }.nav-toggle { display: block; }
  .nav-menu { position: fixed; z-index: 101; inset: 68px 0 0; min-height: calc(100vh - 68px); height: calc(100dvh - 68px); display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 15px 40px; visibility: hidden; opacity: 0; color: var(--white); background: #071b13; box-shadow: 0 24px 70px rgba(0,0,0,.38); transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; isolation: isolate; }.nav-menu.open { visibility: visible; opacity: 1; transform: translateY(0); }.nav-menu a { padding: 17px 8px; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--white); font-size: 16px; }.nav-menu .nav-signin { color: var(--white); }.nav-menu .nav-start { margin-top: 16px; border: 0; color: var(--forest-950); text-align: center; }
  .hero-layout { padding-top: 120px; }.signal-label { margin-bottom: 18px; }.hero h1 { font-size: clamp(49px, 15vw, 72px); }.hero-lede { font-size: 16px; }.hero-actions { flex-direction: column; align-items: stretch; }.hero-actions .button { width: 100%; }.hero-proof { gap: 10px 16px; }.availability { margin-top: 28px; }
  .preview-switcher { justify-content: center; margin-right: 0; margin-left: 0; }.preview-switcher button { padding-right: 10px; padding-left: 10px; }.app-window { border-radius: 17px; transform: none; }.window-bar { display: none; }.app-frame { min-height: 420px; grid-template-columns: 1fr; }.app-sidebar { display: none; }.app-screen { padding: 17px 13px; }.app-screen-head h2 { font-size: 20px; }.briefing-band { padding: 12px; }.briefing-band p { display: none; }.dashboard-grid, .tasks-layout { grid-template-columns: 1fr; }.calendar-card, .task-capacity { display: none; }.mini-task { padding: 13px 7px; }.queue-task { grid-template-columns: 27px 1fr; }.queue-task > span { display: none; }.asset-layout, .record-layout { grid-template-columns: 1fr; }.asset-photo-card { min-height: 155px; }.water-heater-illustration { width: 55px; height: 96px; }.water-heater-illustration span { top: 35px; left: 16px; width: 24px; height: 27px; }.asset-facts h3 { font-size: 15px; }.asset-tasks { display: none; }.receipt-card { display: none; }.import-toast { right: 8px; bottom: -30px; }
  .principle-row { grid-template-columns: 1fr; }.principle-row p { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px; }.principle-row p:last-child { border-bottom: 0; }
  .product-story, .planner, .follow-through, .pricing, .questions { padding: 90px 0; }.story-head { margin-bottom: 45px; }.story-head h2, .planner-copy h2, .follow-head h2, .pricing-intro h2, .question-head h2 { font-size: clamp(46px, 13vw, 68px); }
  .gallery-screen { border-radius: 20px; }.gallery-calendar { min-height: auto; }.gallery-calendar .gallery-copy, .gallery-scan .gallery-copy { padding: 34px 28px 14px; }.gallery-copy h3 { font-size: 33px; }.calendar-ui { margin: 25px 0 -10px 20px; border-radius: 15px 0 0; }.calendar-ui header { padding: 18px; }.cal-grid i { min-height: 49px; padding: 5px; }.cal-grid span { display: none; }
  .gallery-mobile { grid-template-columns: 1fr; padding-top: 35px; }.gallery-mobile .gallery-copy { order: 1; padding: 0 28px 25px; }.phone-shell { order: 2; width: 275px; margin: 0 auto -80px; }.gallery-scan { min-height: auto; }.scan-ui { min-height: 470px; grid-template-columns: 1fr; padding: 25px 0 0 20px; }.scan-photo { min-height: 430px; }.equipment-shape { width: 115px; height: 225px; }.scan-result { position: absolute; right: 0; bottom: 18px; width: 190px; margin: 0; padding: 16px; }.scan-result h4 { font-size: 18px; }.scan-result p { padding: 8px 0; }
  .planner-layout { gap: 42px; }.planner-copy { position: static; }.planner-note { align-items: flex-start; }.plan-card { min-height: 580px; border-radius: 19px; }.plan-step, .plan-result { padding: 35px 22px 30px; }.plan-step legend { font-size: 30px; }.choice { padding: 14px; }.system-choices { grid-template-columns: 1fr; }.plan-actions, .result-actions { grid-template-columns: 1fr; }.plan-actions .button-back { order: 2; }.ready-stamp { display: none; }.result-head h3 { font-size: 30px; }.first-task { grid-template-columns: 34px 1fr; }.first-task > i { grid-column: 2; }
  .follow-head { margin-bottom: 45px; }.loop-line { grid-template-columns: 1fr; gap: 0; }.loop-line::before { top: 0; bottom: 0; left: 23px; width: 1px; height: auto; }.loop-line li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 0 0 28px; text-align: left; }.loop-line li > span { margin: 0; }.loop-line b { font-size: 21px; }
  .pricing-layout, .question-layout, .faq-layout { gap: 45px; }.price-grid { grid-template-columns: 1fr; }.price-card { min-height: 520px; padding: 25px; }.question-list summary { font-size: 19px; }.faq-main { padding: 120px 0 90px; }.faq-layout { grid-template-columns: 1fr; }.faq-intro { position: static; }.faq-intro h1 { font-size: 58px; }
  .final-layout { grid-template-columns: auto 1fr; gap: 20px; }.final-layout > img { width: 60px; }.final-layout .button { grid-column: 1 / -1; width: 100%; }.final-layout h2 { font-size: 45px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 38px 25px; }.footer-brand { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}