.hw-page {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
}

.approved-profile-step{display:grid;gap:var(--hw-space-4)}
.approved-profile-step h2{max-width:18ch;margin:0;font-size:clamp(2rem,6vw,4.75rem);line-height:1.02}
.approved-step-help{max-width:48rem;color:var(--hw-text-muted);font-size:var(--hw-text-body-lg)}
.approved-flow-lead{color:var(--hw-pine);font-size:clamp(1.25rem,3vw,1.75rem);font-weight:700}
.approved-choice-grid{margin-block:var(--hw-space-3)}
.approved-choice{display:block;width:100%;min-height:4.5rem;border:1px solid var(--hw-border-soft);background:var(--hw-surface);color:var(--hw-pine);font:inherit;font-weight:750;text-align:left;cursor:pointer}
.approved-choice:hover,.approved-choice:focus-visible{border-color:var(--hw-pine);background:var(--hw-mist)}
.approved-choice[aria-pressed="true"]{border-color:var(--hw-pine);background:var(--hw-pine);color:var(--hw-surface)}
.approved-flow-field{display:grid;gap:var(--hw-space-2);max-width:42rem}
.approved-flow-field input,.approved-flow-field textarea{width:100%;padding:var(--hw-space-3);border:1px solid var(--hw-border-soft);border-radius:var(--hw-radius-sm);background:var(--hw-surface);color:var(--hw-text);font:inherit}
.approved-continue{justify-self:start;margin-block-start:var(--hw-space-2)}
.approved-skip{justify-self:start}
.approved-back{justify-self:start;margin-block-start:var(--hw-space-2);padding:.25rem 0;border:0;border-block-end:1px solid currentColor;background:transparent;color:var(--hw-pine);font:inherit;font-weight:700;cursor:pointer}
.onboarding-review-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--hw-space-5);margin:0}
.onboarding-review-list>div{padding-block:var(--hw-space-3);border-block-start:1px solid var(--hw-border-soft)}
.onboarding-review-list dt{color:var(--hw-text-muted);font-size:var(--hw-text-sm);font-weight:700}
.onboarding-review-list dd{margin:var(--hw-space-1) 0 0}
@media(max-width:42rem){.onboarding-review-list{grid-template-columns:1fr}}

.hw-auth-page {
  background:
    radial-gradient(circle at 10% 5%, rgb(143 165 140 / 0.3), transparent 30rem),
    radial-gradient(circle at 90% 95%, rgb(220 228 222 / 0.75), transparent 34rem),
    var(--hw-parchment);
}

.hw-auth-shell {
  display: grid;
  width: min(100% - 1.25rem, 70rem);
  min-height: calc(100dvh - 1.25rem);
  margin: 0.625rem auto;
  overflow: hidden;
  border: 1px solid var(--hw-border-soft);
  border-radius: clamp(var(--hw-radius-md), 3vw, var(--hw-radius-lg));
  background: var(--hw-paper);
  box-shadow: var(--hw-shadow-md);
}

.hw-auth-story,
.hw-auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--hw-space-6), 7vw, var(--hw-space-16));
}

.hw-auth-story {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 15%, rgb(143 165 140 / 0.22), transparent 17rem),
    radial-gradient(circle at 86% 92%, rgb(169 85 63 / 0.16), transparent 19rem),
    var(--hw-pine);
  color: var(--hw-parchment);
}

.hw-auth-story::after {
  position: absolute;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgb(244 240 230 / 0.18);
  border-radius: 50%;
  content: "";
  inset-block-end: -8rem;
  inset-inline-end: -6rem;
}

.hw-auth-story :is(h1, h2, h3) {
  color: inherit;
}

.hw-auth-story h1 {
  max-width: 12ch;
}

.hw-auth-story p {
  max-width: 36ch;
}

.hw-auth-story .hw-eyebrow {
  color: var(--hw-focus-dark);
}

.hw-page-brand {
  --hw-brand-height: clamp(5rem, 12vw, 8.5rem);
  align-self: flex-start;
  margin-block-end: clamp(var(--hw-space-8), 8vw, var(--hw-space-16));
}

.hw-auth-benefits {
  display: grid;
  gap: var(--hw-space-3);
  padding: 0;
  margin: var(--hw-space-6) 0 0;
  list-style: none;
}

.hw-auth-benefits li {
  display: flex;
  gap: var(--hw-space-3);
  align-items: flex-start;
  margin: 0;
}

.hw-auth-benefits li::before {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  margin-block-start: 0.5em;
  border-radius: 50%;
  background: var(--hw-focus-dark);
  content: "";
}

.hw-auth-card {
  background: var(--hw-paper);
}

.hw-auth-card__inner {
  width: min(100%, 30rem);
  margin-inline: auto;
}

.hw-auth-card h2 {
  font-size: var(--hw-text-h1);
}

.hw-auth-form {
  display: grid;
  gap: var(--hw-space-4);
  margin-block-start: var(--hw-space-6);
}

.hw-auth-form .hw-button {
  margin-block-start: var(--hw-space-2);
}

.signin-session-choice {
  display: grid;
  gap: var(--hw-space-3);
  padding: var(--hw-space-4);
  border: 1px solid var(--hw-border-soft);
  border-radius: var(--hw-radius-md);
}

.signin-session-choice legend {
  padding-inline: var(--hw-space-2);
  color: var(--hw-pine);
  font-size: var(--hw-text-sm);
  font-weight: 700;
}

.signin-session-choice label {
  display: flex;
  align-items: center;
  gap: var(--hw-space-3);
  color: var(--hw-ink);
}

.marketing-consent-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--hw-space-2);
  color: var(--hw-text-muted);
  font-size: 0.925rem;
  line-height: 1.45;
}

.email-details {
  color: var(--hw-text-muted);
  font-size: 0.925rem;
  line-height: 1.5;
}

.email-details summary {
  width: fit-content;
  cursor: pointer;
  color: var(--hw-moss);
  font-weight: 700;
}

.email-details p {
  margin: var(--hw-space-2) 0 0;
}

.signup-reassurance {
  margin: 0;
  color: var(--hw-text-muted);
  font-size: var(--hw-text-xs);
  text-align: center;
}

.marketing-consent-choice input {
  flex: 0 0 auto;
  margin-top: 0.25rem;
}

.auth-status {
  min-height: 1.6em;
  margin: 0;
  color: var(--hw-text-muted);
  font-size: var(--hw-text-sm);
}

.auth-status.is-sending {
  color: var(--hw-pine);
  font-weight: 700;
}

.google-sign-in-button {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: var(--hw-space-3);
  padding: var(--hw-space-3) var(--hw-space-5);
  border: 1px solid #747775;
  border-radius: var(--hw-radius-pill);
  background: #fff;
  color: #1f1f1f;
  font-weight: 700;
  text-decoration: none;
}

.google-sign-in-button:hover { background: #f8fafd; }
.google-sign-in-button:focus-visible { outline: 3px solid rgb(66 133 244 / 35%); outline-offset: 2px; }
.google-sign-in-button__mark { color: #4285f4; font-family: Arial, sans-serif; font-size: 1.25rem; font-weight: 700; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--hw-space-3);
  margin-block: var(--hw-space-5);
  color: var(--hw-text-muted);
  font-size: var(--hw-text-xs);
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--hw-border-soft); }

.magic-link-confirmation {
  display: grid;
  gap: var(--hw-space-3);
  padding: clamp(var(--hw-space-5), 5vw, var(--hw-space-7));
  border: 1px solid var(--hw-border-soft);
  border-radius: var(--hw-radius-lg);
  background: var(--hw-mist);
}

.magic-link-confirmation[hidden] { display: none; }
.magic-link-confirmation h3,
.magic-link-confirmation p { margin: 0; }
.magic-link-confirmation h3 { color: var(--hw-pine); }
.magic-link-confirmation strong { overflow-wrap: anywhere; }
.magic-link-confirmation .hw-button { margin-block-start: var(--hw-space-2); }

.magic-dev-link {
  display: inline-block;
  font-weight: 700;
}

.hw-help {
  margin-block-start: var(--hw-space-5);
  border-block: 1px solid var(--hw-border-soft);
}

.hw-help summary {
  padding-block: var(--hw-space-4);
  color: var(--hw-pine);
  font-weight: 700;
}

.hw-help__body {
  padding-block-end: var(--hw-space-4);
  color: var(--hw-text-muted);
  font-size: var(--hw-text-sm);
}

.hw-help__body > :last-child {
  margin-block-end: 0;
}

.legal-consent {
  margin-block: var(--hw-space-5) 0;
  color: var(--hw-text-muted);
  font-size: var(--hw-text-xs);
  line-height: 1.5;
}

.hw-onboarding-page {
  background:
    radial-gradient(circle at 85% 0%, rgb(143 165 140 / 0.28), transparent 28rem),
    var(--hw-parchment);
}

.hw-onboarding-header {
  border-block-end: 1px solid var(--hw-border-soft);
  background: var(--hw-parchment);
}

.hw-onboarding-header__inner {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--hw-space-4);
}

.hw-onboarding-header .hw-brand {
  --hw-brand-height: 3.25rem;
}

.onboarding-header-actions {
  display: flex;
  align-items: center;
  gap: var(--hw-space-4);
}

.onboarding-back-link {
  color: var(--hw-forest);
  font-weight: 700;
  text-underline-offset: 0.25em;
}

.hw-onboarding-shell {
  width: min(100% - 1.25rem, 56rem);
  margin: clamp(var(--hw-space-4), 5vw, var(--hw-space-12)) auto;
}

.onboarding-panel {
  padding: clamp(var(--hw-space-5), 5vw, var(--hw-space-10));
  border: 1px solid var(--hw-border-soft);
  border-radius: var(--hw-radius-lg);
  background: var(--hw-paper);
  box-shadow: var(--hw-shadow-sm);
}

.onboarding-header {
  max-width: 44rem;
  margin-block-end: var(--hw-space-6);
}

.onboarding-header h1 {
  margin-block-end: var(--hw-space-3);
}

.onboarding-header p:last-child {
  margin-block-end: 0;
  color: var(--hw-text-muted);
}

.onboarding-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--hw-space-3);
  margin-block-end: var(--hw-space-8);
}

.onboarding-progress-bar {
  height: 0.65rem;
  overflow: hidden;
  border-radius: var(--hw-radius-pill);
  background: var(--hw-mist);
}

.onboarding-progress-bar span {
  display: block;
  width: 16.666%;
  height: 100%;
  border-radius: inherit;
  background: var(--hw-pine);
  transition: width var(--hw-duration-slow) var(--hw-ease-standard);
}

.onboarding-progress p {
  margin: 0;
  color: var(--hw-text-muted);
  font-size: var(--hw-text-sm);
  font-weight: 700;
}

.home-profile-form,
.onboarding-step,
.edit-only-section {
  display: grid;
  gap: var(--hw-space-6);
}

.home-profile-form fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.home-profile-form legend {
  padding: 0;
  margin-block-end: var(--hw-space-4);
  color: var(--hw-pine);
  font-family: var(--hw-font-display);
  font-size: var(--hw-text-h3);
  font-weight: 600;
  line-height: var(--hw-leading-heading);
}

.onboarding-note {
  padding: var(--hw-space-4) var(--hw-space-5);
  border-inline-start: 0.3rem solid var(--hw-lichen);
  border-radius: 0 var(--hw-radius-md) var(--hw-radius-md) 0;
  background: var(--hw-mist);
}

.onboarding-note p {
  margin: 0;
}

.setup-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hw-space-4);
}

.setup-preview-grid article {
  padding: var(--hw-space-5);
  border: 1px solid var(--hw-border-soft);
  border-radius: var(--hw-radius-md);
  background: var(--hw-parchment);
}

.setup-preview-grid article > span {
  color: var(--hw-clay);
  font-size: var(--hw-text-xs);
  font-weight: 700;
  letter-spacing: var(--hw-tracking-eyebrow);
}

.setup-preview-grid h2 {
  margin-block: var(--hw-space-3) var(--hw-space-2);
  font-size: var(--hw-text-h3);
}

.setup-preview-grid p {
  margin: 0;
  color: var(--hw-text-muted);
  font-size: var(--hw-text-sm);
}

.profile-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hw-space-4);
}

.profile-field-grid .hw-field--wide {
  grid-column: 1 / -1;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hw-space-3);
}

.choice-card {
  position: relative;
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  gap: var(--hw-space-3);
  padding: var(--hw-space-4);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-md);
  background: var(--hw-paper);
  color: var(--hw-pine);
  font-weight: 700;
}

.choice-card:has(input:checked) {
  border-color: var(--hw-pine);
  background: var(--hw-mist);
  box-shadow: inset 0 0 0 1px var(--hw-pine);
}

.choice-card input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  accent-color: var(--hw-pine);
}

.room-setup-section {
  display: grid;
  gap: var(--hw-space-5);
}

.room-count-choice-stack {
  display: grid;
  gap: var(--hw-space-4);
}

.room-count-choice-group {
  display: grid;
  grid-template-columns: minmax(6rem, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--hw-space-4);
}

.room-count-choice-group legend {
  margin: 0;
  font-family: var(--hw-font-ui);
  font-size: var(--hw-text-sm);
  font-weight: 700;
}

.room-count-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hw-space-2);
}

.room-count-choice-button,
.room-toggle-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--hw-space-2) var(--hw-space-3);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-pill);
  background: var(--hw-paper);
  color: var(--hw-pine);
  font-weight: 700;
}

.room-count-choice-button[aria-pressed="true"],
.room-toggle-button[aria-pressed="true"] {
  border-color: var(--hw-pine);
  background: var(--hw-pine);
  color: var(--hw-parchment);
}

.core-room-list,
.extra-room-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--hw-space-3);
}

.onboarding-room-card {
  display: grid;
  gap: var(--hw-space-3);
  padding: var(--hw-space-4);
  border: 1px solid var(--hw-border-soft);
  border-radius: var(--hw-radius-md);
  background: var(--hw-parchment);
}

.onboarding-room-card.is-selected {
  border-color: var(--hw-pine);
}

.onboarding-room-card .room-toggle-button {
  justify-self: start;
}

.onboarding-room-card label {
  display: grid;
  gap: var(--hw-space-2);
  color: var(--hw-text-muted);
  font-size: var(--hw-text-sm);
  font-weight: 700;
}

.onboarding-room-card input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--hw-space-2) var(--hw-space-3);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-sm);
  background: var(--hw-paper);
}

.onboarding-room-card input:disabled {
  opacity: 0.58;
}

.onboarding-review {
  padding: var(--hw-space-6);
  border-radius: var(--hw-radius-md);
  background: var(--hw-mist);
}

.onboarding-review dl {
  display: grid;
  gap: var(--hw-space-3);
  margin: 0;
}

.onboarding-review dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
  gap: var(--hw-space-4);
  padding-block-end: var(--hw-space-3);
  border-block-end: 1px solid rgb(82 107 87 / 0.24);
}

.onboarding-review dt {
  color: var(--hw-text-muted);
  font-size: var(--hw-text-sm);
  font-weight: 700;
}

.onboarding-review dd {
  margin: 0;
}

.edit-only-section > fieldset,
.edit-only-section > .room-setup-section {
  padding-block-end: var(--hw-space-6);
  border-block-end: 1px solid var(--hw-border-soft);
}

.onboarding-status {
  min-height: 1.6em;
  color: var(--hw-error);
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hw-space-3);
  padding-block-start: var(--hw-space-4);
  border-block-start: 1px solid var(--hw-border-soft);
}

.onboarding-actions .hw-button {
  min-width: 7.5rem;
}

.hw-waitlist-mark {
  width: 5rem;
  margin-block-end: var(--hw-space-6);
}

.hw-waitlist-actions {
  display: grid;
  gap: var(--hw-space-3);
  margin-block-start: var(--hw-space-6);
}

.hw-link-button {
  padding: var(--hw-space-2);
  border: 0;
  background: transparent;
  color: var(--hw-pine);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.hw-legal-page {
  background:
    radial-gradient(circle at 100% 0%, rgb(143 165 140 / 0.24), transparent 28rem),
    var(--hw-parchment);
}

.hw-legal-header {
  border-block-end: 1px solid var(--hw-border-soft);
  background: var(--hw-parchment);
}

.hw-legal-header__inner {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--hw-space-4);
}

.hw-legal-header .hw-brand {
  --hw-brand-height: 3.25rem;
}

.hw-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hw-space-2) var(--hw-space-5);
  font-size: var(--hw-text-sm);
  font-weight: 700;
}

.hw-legal-shell {
  width: min(100% - 1.25rem, 48rem);
  margin: clamp(var(--hw-space-6), 6vw, var(--hw-space-16)) auto;
  padding: clamp(var(--hw-space-5), 5vw, var(--hw-space-10));
  border: 1px solid var(--hw-border-soft);
  border-radius: var(--hw-radius-lg);
  background: var(--hw-paper);
  box-shadow: var(--hw-shadow-sm);
}

.hw-legal-shell .hw-eyebrow {
  margin-block-end: var(--hw-space-3);
}

.hw-legal-shell h2 {
  margin-block-start: var(--hw-space-8);
  font-size: var(--hw-text-h3);
}

.hw-legal-shell > :last-child {
  margin-block-end: 0;
}

.hw-message-page {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: var(--hw-space-4);
  background:
    radial-gradient(circle at 50% 10%, rgb(143 165 140 / 0.3), transparent 28rem),
    var(--hw-parchment);
}

.hw-message-card {
  width: min(100%, 34rem);
  padding: clamp(var(--hw-space-6), 6vw, var(--hw-space-10));
  text-align: center;
}

.hw-message-card .hw-brand--seal {
  --hw-brand-height: 5rem;
  justify-content: center;
  margin: 0 auto var(--hw-space-6);
}

.hw-message-card .hw-action-bar {
  justify-content: center;
  margin-block-start: var(--hw-space-6);
}

@media (min-width: 55rem) {
  .hw-auth-shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
  }
}

@media (max-width: 54.99rem) {
  .hw-auth-shell {
    min-height: calc(100dvh - 1.25rem);
  }

  .hw-auth-story {
    order: 2;
    min-height: 24rem;
  }

  .hw-auth-card {
    order: 1;
  }

  .hw-auth-story h1 {
    max-width: 15ch;
  }

  .hw-page-brand {
    --hw-brand-height: 6rem;
    margin-block-end: var(--hw-space-8);
  }
}

@media (max-width: 42rem) {
  .hw-onboarding-header__inner,
  .hw-legal-header__inner {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding-block: var(--hw-space-3);
  }

  .onboarding-header-actions {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--hw-space-2);
  }

  .setup-preview-grid,
  .profile-field-grid,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .room-count-choice-group,
  .onboarding-review dl > div {
    grid-template-columns: 1fr;
    gap: var(--hw-space-2);
  }

  .onboarding-actions .hw-button {
    width: 100%;
  }
}

@media (max-width: 30rem) {
  .hw-auth-shell {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .hw-auth-story,
  .hw-auth-card {
    padding-inline: var(--hw-space-5);
  }

  .onboarding-panel,
  .hw-legal-shell {
    border-radius: var(--hw-radius-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-progress-bar span {
    transition: none;
  }
}
