/* ThermoLet landing page.
   Every colour is a token in :root — change a token here, not a rule below.
   Layout is driven by container queries on .page, so `cqw` units size against
   the page container rather than the viewport. */

/* ---------------------------------------------------------------- tokens */

:root {
  --tl-bg: #F8F1E6;
  --tl-surface: #FFFFFF;
  --tl-card: #FDF8F1;
  --tl-ink: #1F1A16;
  --tl-ink2: #2C2621;
  --tl-ink3: #4C443D;
  --tl-muted: #6B6058;
  --tl-border: #EDE6DC;
  --tl-tint: #FDEBD2;
  --tl-tint-ink: #8A4A08;
  --tl-primary: #D2481B;
  --tl-primary-hover: #A63512;
  --tl-shadow: rgba(210, 72, 27, 0.26);
  --tl-shadow2: rgba(120, 78, 30, 0.10);
  --tl-outer: color-mix(in srgb, var(--tl-ink) 9%, var(--tl-bg));

  /* Three accents, one per "what it does" card: check-in, occupied, checkout. */
  --tl-a1: #E0A21A;
  --tl-a1-tint: #FCEFD4;
  --tl-a1-ink: #7A5405;
  --tl-a2: #D95A1E;
  --tl-a2-tint: #FBE3D6;
  --tl-a2-ink: #8A3409;
  --tl-a3: #3F8347;
  --tl-a3-tint: #E6F1E5;
  --tl-a3-ink: #2C5B33;

  --tl-a1-card: color-mix(in srgb, var(--tl-a1-tint) 52%, var(--tl-surface));
  --tl-a2-card: color-mix(in srgb, var(--tl-a2-tint) 52%, var(--tl-surface));
  --tl-a3-card: color-mix(in srgb, var(--tl-a3-tint) 52%, var(--tl-surface));
  --tl-a1-border: color-mix(in srgb, var(--tl-a1) 24%, var(--tl-surface));
  --tl-a2-border: color-mix(in srgb, var(--tl-a2) 24%, var(--tl-surface));
  --tl-a3-border: color-mix(in srgb, var(--tl-a3) 24%, var(--tl-surface));

  --tl-display: Figtree, Helvetica, Arial, sans-serif;
  --tl-body: 'Source Sans 3', Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tl-outer);
}

a {
  color: var(--tl-primary);
}

a:hover {
  color: var(--tl-primary-hover);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.page {
  container-type: inline-size;
  width: 100%;
  padding: 0 clamp(0px, 3cqw, 56px);
  background: var(--tl-outer);
  font-family: var(--tl-body);
  color: var(--tl-ink);
  -webkit-font-smoothing: antialiased;
}

.frame {
  max-width: 1400px;
  margin: 0 auto;
  background: var(--tl-bg);
  border-left: 1px solid var(--tl-border);
  border-right: 1px solid var(--tl-border);
}

/* ---------------------------------------------------------------- layout */

.section {
  padding: clamp(40px, 5cqw, 76px) clamp(20px, 5cqw, 72px);
}

.section--hero {
  padding: clamp(24px, 2.6cqw, 38px) clamp(20px, 5cqw, 72px) clamp(44px, 6cqw, 80px);
}

/* Sits directly under another section, so it carries no top padding of its own. */
.section--joined {
  padding-top: 0;
}

.section--surface {
  background: var(--tl-surface);
  border-top: 1px solid var(--tl-border);
  border-bottom: 1px solid var(--tl-border);
}

.section--tint {
  background: var(--tl-tint);
  border-top: 1px solid var(--tl-border);
  border-bottom: 1px solid var(--tl-border);
}

.wrap { max-width: 1120px; margin: 0 auto; }
.wrap--form { max-width: 720px; }
.wrap--story { max-width: 760px; }
.wrap--prose { max-width: 880px; }
.wrap--faq { max-width: 860px; }

/* -------------------------------------------------------------- headings */

h1, h2, h3 {
  font-family: var(--tl-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(23.4px, 2.3cqw, 30.6px);
  margin: 0 0 34px;
}

/* Heading that opens a block of prose rather than a grid of cards. */
h2.h2--prose {
  font-size: clamp(21.6px, 2.3cqw, 28.8px);
  margin: 0 0 18px;
}

h2.h2--tight { margin-bottom: 26px; }
h2.h2--price { font-size: clamp(27px, 3.1cqw, 39.6px); margin: 0 0 18px; }
h2.h2--form { font-size: clamp(23.4px, 2.5cqw, 32.4px); margin: 0 0 26px; }

/* Standalone body copy under a .h2--prose heading. */
.prose {
  margin: 0;
  font-size: clamp(15.3px, 1.4cqw, 17.6px);
  line-height: 1.62;
  color: var(--tl-ink3);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  background: var(--tl-primary);
  color: #FFFFFF;
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 18.9px;
  padding: 20px 40px;
  border-radius: 14px;
  box-shadow: 0 8px 20px var(--tl-shadow);
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  text-decoration: none;
}

.btn:hover {
  background: var(--tl-primary-hover);
  color: #FFFFFF;
}

.btn--sm {
  font-size: 14.9px;
  padding: 12px 22px;
  border-radius: 10px;
  box-shadow: none;
}

.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.65;
  cursor: progress;
}

/* ---------------------------------------------------------------- header */

.site-header {
  padding: 22px clamp(20px, 5cqw, 72px);
  border-bottom: 1px solid var(--tl-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
}

.site-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.site-header__price {
  font-size: 14px;
  color: var(--tl-muted);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand__mark {
  display: block;
  overflow: visible;
}

.brand__name {
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 25.2px;
  letter-spacing: -0.025em;
}

.brand__accent {
  color: var(--tl-primary);
}

/* ------------------------------------------------------------------ hero */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1120px;
  margin: 0 auto 28px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--tl-tint);
  color: var(--tl-tint-ink);
}

.badge--plain {
  background: var(--tl-card);
  border: 1px solid var(--tl-border);
  color: var(--tl-ink2);
}

.badge--eco {
  background: #E8F3E6;
  border: 1px solid #CFE4CB;
  color: #2E5B33;
}

.badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tl-primary);
}

.badge svg { display: block; }

.hero {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4cqw, 60px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.hero__copy { flex: 1.5 1 460px; min-width: 0; }
.hero__aside { flex: 1 1 330px; min-width: 0; }

.hero__title {
  font-size: clamp(34.2px, 5.2cqw, 55px);
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 19ch;
  text-wrap: balance;
}

.hero__lede,
.hero__line,
.hero__pitch {
  line-height: 1.5;
  max-width: 30em;
  text-wrap: pretty;
}

.hero__lede {
  font-size: clamp(16.2px, 1.5cqw, 19.8px);
  color: var(--tl-ink3);
  margin: 0 0 30px;
}

.hero__line {
  font-size: clamp(15.3px, 1.4cqw, 17.6px);
  color: var(--tl-ink3);
  margin: 0 0 22px;
}

.hero__line--tight { margin-bottom: 12px; }
.hero__line--last { margin-bottom: 30px; }

.hero__pitch {
  font-family: var(--tl-display);
  font-weight: 600;
  font-size: clamp(16.2px, 1.5cqw, 19.8px);
  line-height: 1.45;
  color: var(--tl-ink);
  margin: 0 0 18px;
}

.hero__terms {
  font-size: 14.9px;
  line-height: 1.55;
  color: var(--tl-ink3);
  margin: 22px 0 0;
  max-width: 34em;
}

.hero__terms--muted {
  color: var(--tl-muted);
  margin-top: 14px;
}

/* ------------------------------------------------------- hero demo panel */

.demo {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  box-shadow: 0 14px 34px var(--tl-shadow2);
}

.dial {
  position: relative;
  width: 178px;
  height: 178px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(from 220deg, var(--tl-a1) 0deg, var(--tl-primary) 150deg, var(--tl-border) 150deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dial__face {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: var(--tl-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.dial__temp {
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.03em;
  color: var(--tl-ink);
}

.dial__state {
  font-size: 11.7px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-primary);
}

.demo__body {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo__tag {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tl-muted);
  border: 1px solid var(--tl-border);
  border-radius: 999px;
  padding: 4px 10px;
}

.demo__when {
  margin: 0;
  font-size: 14px;
  color: var(--tl-muted);
}

.demo__events {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
}

.event__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.event--warm { background: var(--tl-tint); color: var(--tl-tint-ink); font-weight: 600; }
.event--warm .event__dot { background: var(--tl-primary); }

.event--idle { background: var(--tl-card); color: var(--tl-ink3); }
.event--idle .event__dot { background: #8C8177; }

.event--eco { background: #E9EFE8; color: #2C5B33; font-weight: 600; }
.event--eco .event__dot { background: #3F8347; }

/* ----------------------------------------------------------------- grids */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 2.4cqw, 34px);
}

/* --------------------------------------------------- "what it does" card */

.phase {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  padding: 26px;
  background: var(--tl-card);
  border: 1px solid var(--tl-border);
}

.phase__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.phase__icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--tl-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phase__icon svg { display: block; }

.phase__label {
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 12.2px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tl-tint-ink);
}

.phase__title {
  margin: 0;
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 17.6px;
  line-height: 1.25;
  color: var(--tl-ink);
}

.phase__body {
  margin: 0;
  font-size: 15.8px;
  line-height: 1.5;
  color: var(--tl-ink3);
}

.phase--1 { background: var(--tl-a1-card); border-color: var(--tl-a1-border); }
.phase--1 .phase__icon { background: var(--tl-a1-tint); }
.phase--1 .phase__icon svg { stroke: var(--tl-a1); }
.phase--1 .phase__label { color: var(--tl-a1-ink); }

.phase--2 { background: var(--tl-a2-card); border-color: var(--tl-a2-border); }
.phase--2 .phase__icon { background: var(--tl-a2-tint); }
.phase--2 .phase__icon svg { stroke: var(--tl-a2); }
.phase--2 .phase__label { color: var(--tl-a2-ink); }

.phase--3 { background: var(--tl-a3-card); border-color: var(--tl-a3-border); }
.phase--3 .phase__icon { background: var(--tl-a3-tint); }
.phase--3 .phase__icon svg { stroke: var(--tl-a3); }
.phase--3 .phase__label { color: var(--tl-a3-ink); }

/* ----------------------------------------------------- "you stay in charge" */

.panel {
  max-width: 880px;
  margin: 0 auto;
  background: var(--tl-tint);
  border: 1px solid var(--tl-border);
  border-radius: 22px;
  padding: clamp(28px, 3.4cqw, 48px);
}

.panel h2 { color: var(--tl-ink); }

/* --------------------------------------------------------- "how it works" */

.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.step__number {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--tl-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 17.1px;
}

.step__title {
  margin: 0;
  font-size: 18.5px;
  color: var(--tl-ink);
}

.step__body {
  margin: 0;
  font-size: 15.8px;
  line-height: 1.5;
  color: var(--tl-ink2);
}

.note {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  margin: 30px 0 0;
  background: var(--tl-card);
  border: 1px solid var(--tl-border);
  border-radius: 12px;
  padding: 14px 18px;
}

.note svg {
  display: block;
  flex: none;
  margin-top: 1px;
}

.note p {
  margin: 0;
  font-size: 15.3px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tl-ink2);
}

/* ---------------------------------------------------------- launch offer */

.offer {
  max-width: 880px;
  margin: 0 auto;
  background: var(--tl-surface);
  border: 2px solid var(--tl-primary);
  border-radius: 22px;
  padding: clamp(28px, 3.4cqw, 48px);
  box-shadow: 0 14px 34px var(--tl-shadow2);
}

.offer__eyebrow {
  display: inline-block;
  font-size: 13.1px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-primary-hover);
  margin-bottom: 16px;
}

.offer .prose { margin-bottom: 28px; }

/* ------------------------------------------------------------- signup form */

.signup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--tl-card);
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  padding: clamp(22px, 2.6cqw, 34px);
}

.signup[hidden] { display: none; }

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.9px;
  font-weight: 600;
  color: var(--tl-ink2);
}

.field input,
.field select {
  font-family: inherit;
  font-size: 15.3px;
  padding: 15px 16px;
  border: 1px solid var(--tl-border);
  border-radius: 12px;
  background: var(--tl-surface);
  color: var(--tl-ink);
  font-weight: 400;
}

.field input:focus,
.field select:focus {
  border-color: var(--tl-primary);
  outline: 2px solid var(--tl-primary);
  outline-offset: -2px;
}

.field--consent {
  flex-direction: row;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
  color: var(--tl-muted);
  line-height: 1.5;
}

.field--consent input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  padding: 0;
  flex: none;
  accent-color: var(--tl-primary);
}

/* Spam trap: bots fill it, people never see it. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup__terms {
  margin: 0;
  font-size: 14.4px;
  line-height: 1.55;
  color: var(--tl-muted);
}

.signup__error {
  margin: 0;
  font-size: 14.9px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--tl-primary-hover);
}

.signup__error[hidden] { display: none; }

.signup-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--tl-tint);
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  padding: clamp(26px, 3cqw, 40px);
}

.signup-done[hidden] { display: none; }

.signup-done h3 {
  font-size: clamp(19.8px, 2cqw, 25.2px);
  margin: 0;
  color: var(--tl-ink);
}

.signup-done p {
  margin: 0;
  font-size: 16.2px;
  line-height: 1.6;
  color: var(--tl-ink3);
}

/* ------------------------------------------------------------------ story */

.story h2 { color: var(--tl-tint-ink); margin-bottom: 20px; }

.story p {
  margin: 0 0 18px;
  font-size: clamp(15.3px, 1.4cqw, 17.6px);
  line-height: 1.62;
  color: var(--tl-ink);
  text-wrap: pretty;
}

.story__signoff {
  font-size: 15.3px;
  line-height: 1.6;
  color: var(--tl-ink2);
  margin-bottom: 0;
}

/* -------------------------------------------------------------------- faq */

.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background: var(--tl-card);
  border: 1px solid var(--tl-border);
  border-radius: 14px;
  overflow: hidden;
}

.faq__item summary {
  cursor: pointer;
  padding: 20px 22px;
  font-family: var(--tl-display);
  font-weight: 600;
  font-size: 16.7px;
  color: var(--tl-ink);
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary:focus-visible {
  outline: 2px solid var(--tl-primary);
  outline-offset: -2px;
}

.faq__item p {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 15.3px;
  line-height: 1.6;
  color: var(--tl-ink3);
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  padding: clamp(32px, 4cqw, 56px) clamp(20px, 5cqw, 72px);
  border-top: 1px solid var(--tl-border);
  background: var(--tl-surface);
}

.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: flex-end;
}

.site-footer__about {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tl-display);
  font-weight: 700;
  font-size: 16.2px;
  letter-spacing: -0.025em;
}

.site-footer__brand svg { display: block; overflow: visible; }

.site-footer__line {
  font-size: 14.4px;
  color: var(--tl-muted);
}

.site-footer__links {
  display: flex;
  gap: 20px;
  font-size: 14px;
}