/*
  Homepage layout. Colors, type and components come from /assets/grainwork.css;
  this file only arranges them. Tokens only, no raw colors.
*/

/* Small print that sits under a row of buttons */
.home-note {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--faint);
}
.band .home-note { color: var(--on-dark-muted); }

/* Hero */
.home-hero__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 96px);
}
/* Each sentence of the headline starts its own line and wraps on its own. */
.home-hero h1 { font-size: min(var(--text-display), 4.25rem, 5.3vw); }
.home-hero h1 span { display: block; text-wrap: balance; }
.home-hero .lede { max-width: 34rem; }
.home-hero__access {
  max-width: 34rem;
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
}

/*
  Two real screens: the walkthrough video behind on the left, and the briefing
  Grainwork produced in front on the right, larger, with its key line repeated
  as live text underneath so it can be read at any size.
*/
.home-duo {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.home-duo__stage {
  display: grid;
  grid-template-columns: 26fr 14fr 60fr;
  grid-template-rows: clamp(56px, 9vw, 128px) auto 1fr;
}
.home-duo .phone { width: 100%; margin: 0; }
.home-duo__video {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
  align-self: start;
}
.home-duo__video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--forest-deep);
}
.home-duo__result {
  position: relative;
  z-index: 1;
  grid-column: 2 / 4;
  grid-row: 2;
}
.home-duo__brief {
  padding-bottom: 0;
  border-radius: 44px 44px 0 0;
}
.home-duo__brief img { display: block; border-radius: 34px 34px 0 0; }
.home-duo__callout {
  margin: 0;
  padding: 16px 20px 18px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--ink);
}
.home-duo__callout strong {
  display: block;
  margin-bottom: 2px;
  font: 600 var(--text-h3)/1.1 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--heading);
}
.home-duo .media-caption { margin-top: 18px; }

.home-duo__toggle {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--on-dark) 45%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  color: var(--on-dark);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.home-duo__toggle:hover { background: color-mix(in srgb, var(--ink) 80%, transparent); }
.home-duo__toggle:focus-visible { outline-color: var(--focus-on-dark); outline-offset: 2px; }
.home-duo__icon { position: relative; width: 14px; height: 14px; }
/* Paused: a play triangle */
.home-duo__toggle[data-state="paused"] .home-duo__icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}
/* Playing: two pause bars */
.home-duo__toggle[data-state="playing"] .home-duo__icon {
  background:
    linear-gradient(currentColor, currentColor) 1px 0 / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 9px 0 / 4px 100% no-repeat;
}

@media (max-width: 900px) {
  .home-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero h1 { font-size: min(var(--text-display), 4.25rem); }
  .home-duo { max-width: 460px; }
}
/*
  Phones: a tighter hero so both buttons sit on the first screen of an iPhone
  in Safari (about 390x664 of visible page).
*/
@media (max-width: 480px) {
  .home-hero { padding-top: 32px; }
  .home-hero h1 { font-size: 2.5rem; }
  .home-hero .lede { margin-top: 16px; font-size: var(--text-body); }
  .home-hero__access { margin-top: 12px; font-size: var(--text-small); }
  .home-hero .actions { margin-top: 20px; }
  .home-duo__stage { grid-template-rows: 44px auto 1fr; }
  .home-duo__toggle { left: 12px; bottom: 12px; }
  .home-duo .phone { padding: 7px; border-radius: 30px; }
  .home-duo__video video { border-radius: 23px; }
  .home-duo__brief.phone { padding-bottom: 0; border-radius: 30px 30px 0 0; }
  .home-duo__brief img { border-radius: 23px 23px 0 0; }
  .home-duo__callout { padding: 12px 14px 14px; font-size: var(--text-caption); }
  .home-duo__callout strong { font-size: var(--text-lede); }
}

/* Who it's for */
.home-doors .status { align-self: flex-start; }
.home-doors .card h3 { margin-top: 4px; }

/* Proof: the real door trim estimate */
.home-proof {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.home-proof__media { margin: 0; }
.home-proof__media .phone { width: 100%; max-width: 300px; }
.home-proof__media .media-caption { text-align: center; }

.estimate {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.estimate__head,
.estimate__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}
.estimate__kicker {
  font: 600 var(--text-eyebrow)/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.estimate h3 { font-size: var(--text-h3); }
.estimate__summary { margin-top: -8px; color: var(--muted); }
.estimate__range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  width: 100%;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.estimate__amount {
  font: 560 var(--text-h2)/1.1 var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.estimate__basis { color: var(--muted); }
.estimate__facts {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.estimate__facts li {
  position: relative;
  padding: 8px 0 8px 22px;
  color: var(--ink);
}
.estimate__facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.05em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.estimate__measure {
  margin-top: -10px;
  font-size: var(--text-small);
  color: var(--muted);
}
.estimate .note { width: 100%; }
.estimate .caption { margin-top: 2px; }
.estimate .text-link { min-height: 44px; }

/* Wide screens: the estimate reads as two columns, result on the left, working on the right. */
@media (min-width: 1100px) {
  .estimate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px clamp(36px, 4vw, 56px);
    align-items: start;
  }
}
@media (max-width: 760px) {
  .home-proof { grid-template-columns: minmax(0, 1fr); }
  .home-proof__media .phone { max-width: 260px; margin: 0 auto; }
}

/* What we won't pretend */
.home-honest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-honest > div {
  padding-top: 20px;
  border-top: 2px solid var(--accent);
}
.home-honest h3 {
  margin-bottom: 10px;
  font-size: var(--text-lede);
  line-height: 1.25;
}
.home-honest p { color: var(--muted); }
/* Four across: headings share a height so every paragraph starts on the same line. */
@media (min-width: 1101px) { .home-honest h3 { min-height: 2.5em; } }
@media (max-width: 1100px) { .home-honest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .home-honest { grid-template-columns: minmax(0, 1fr); } }

/* Homeowners */
.home-owners {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.home-owners .lede { margin-top: 18px; }
.home-list {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.home-list li { border-bottom: 1px solid var(--line); }
.home-list a {
  display: block;
  padding: 22px 36px 22px 0;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.home-list a::after {
  content: "→";
  position: absolute;
  right: 4px;
  top: 24px;
  font-size: var(--text-lede);
  color: var(--accent);
  transition: transform 0.15s ease;
}
.home-list a:hover::after { transform: translateX(3px); }
.home-list a:hover h3 { color: var(--accent); }
.home-list h3 { font-size: var(--text-h3); margin-bottom: 6px; }
.home-list p { color: var(--muted); }

.home-store { margin-top: 32px; scroll-margin-top: calc(var(--header-height) + 24px); }
.home-store .caption { margin-top: 12px; }

.home-owners__media { margin: 0; }
.home-pair { display: grid; gap: 12px; }
.home-pair > div { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--kraft); }
.home-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.home-pair__label {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 600 var(--text-eyebrow)/1.3 var(--sans);
}
@media (max-width: 900px) {
  .home-owners { grid-template-columns: minmax(0, 1fr); }
  .home-owners__media { max-width: 560px; }
}

/* Where we're headed. The shared rule `.section + .section` removes top padding,
   which would leave this section's text sitting on its divider line. */
.section + .section.home-ahead-section { padding-top: var(--section); }
.home-ahead {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px clamp(40px, 6vw, 88px);
  align-items: start;
}
.home-ahead h2 { max-width: 14ch; }
@media (max-width: 900px) { .home-ahead { grid-template-columns: minmax(0, 1fr); } }
.home-ahead__link { margin-top: 24px; }
.home-ahead__link .text-link { min-height: 44px; }

/* Closing band: heading on the left, actions on the right, a hairline before the footer. */
.home-band {
  padding-bottom: calc(var(--section) * 0.8);
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
}
.home-band h2 { max-width: 18ch; }
@media (min-width: 901px) {
  .home-band .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
    gap: 24px clamp(40px, 6vw, 88px);
    align-items: end;
  }
  .home-band .actions { margin-top: 0; }
}

/*
  Sign in and page-not-found. These two small pages reuse this file so they
  need no stylesheet of their own.
*/
.utility-page { min-height: 56vh; }
.utility-page .lede { margin-top: 18px; }
.signin-choices { margin-top: 40px; }
.signin-choices .card { min-height: 188px; }
.signin-choices h2 { font-size: var(--text-h3); }
.signin-more { margin-top: 48px; border-top: 1px solid var(--line); }
.signin-more__row { padding: 24px 0; border-bottom: 1px solid var(--line); }
.signin-more__row .store-links { margin-top: 16px; }
.signin-more__row .caption { margin-top: 8px; }
.signin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.signin-links .text-link { min-height: 44px; }
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.notfound-links .text-link { min-height: 44px; }
@media (max-width: 720px) {
  .signin-choices .card { min-height: 0; }
}

/* Phones: full-width buttons, and a tighter rhythm so the page is shorter to scroll. */
@media (max-width: 480px) {
  #main { --section: 56px; }
  .home-hero .actions .button,
  .home-band .actions .button { width: 100%; }
  .home-doors { gap: 12px; }
  .home-doors .card { gap: 8px; padding: 20px; }
  .home-doors .card .text-link { padding-top: 4px; }
  .home-honest { gap: 28px; }
  .home-honest > div { padding-top: 14px; }
  .home-list { margin-top: 24px; }
  .home-list a { padding: 16px 32px 16px 0; }
  .home-list a::after { top: 18px; }
  .home-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .home-pair > div { border-radius: var(--radius); }
  .home-pair__label { left: 6px; top: 6px; padding: 3px 8px; }
  .home-proof { gap: 28px; }
  .home-proof__media .phone { max-width: 196px; padding: 7px; border-radius: 30px; }
  .home-proof__media .phone img { border-radius: 23px; }
  .estimate { padding: 20px; gap: 14px; }
  .estimate__head, .estimate__body { gap: 14px; }
}

/* Closing band: the homeowner line sits under the email note as a plain text link. */
.home-band__owners { margin-top: 0; }
.home-band__owners a { display: inline-block; min-height: 44px; padding: 12px 0; }

/*
  Windows High Contrast and other forced-color modes drop background images, so
  the pause bars (drawn with gradients) would vanish and leave an empty circle.
*/
@media (forced-colors: active) {
  .home-duo__toggle { border-color: ButtonText; background: ButtonFace; }
  .home-duo__toggle .home-duo__icon { forced-color-adjust: none; color: ButtonText; }
}