/* GlazeQuote marketing site.

   Material 3's grammar in our own colour: tonal surfaces rather than borders,
   pill buttons, generous whitespace, large confident type, soft shape and one
   restrained entrance. No Google palette, wordmark, logo or product name
   appears here; the typeface is served from this origin.

   Every value comes from tokens.css. If a number appears in this file that is
   not a 0, a 1, a percentage or a token, it is a bug.

   Sections are separated by whitespace and a change of surface tone. There are
   no drop shadows on the marketing sections: elevation is tone. The one place
   a hairline survives is around a product screenshot, because a pale
   screenshot on a pale surface has no edge of its own and dissolves into the
   page; that is an outline, not an elevation. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-var.woff2?v=153fc85b") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* The hero screen deliberately runs past the right edge of the page. Clip
     it rather than let the document scroll sideways; hidden is the fallback
     for engines without clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: var(--line-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

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

:focus-visible {
  outline: var(--focus-ring-width) solid var(--primary);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--shape-small);
}

/* Hidden to sight, present to a screen reader, and inside the viewport. The
   older left:-9999px technique parks a real element ten thousand pixels off
   canvas, which any honest overflow check has to flag or specially excuse. */
.skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--shape-pill);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.skip:focus {
  top: var(--space-5);
  left: var(--space-5);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  overflow: visible;
  clip-path: none;
}

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------- type */

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1 {
  font-size: var(--size-display);
  line-height: var(--line-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-extrabold);
}

h2 {
  font-size: var(--size-headline);
  line-height: var(--line-headline);
  letter-spacing: var(--tracking-headline);
  font-weight: var(--weight-extrabold);
}

h3 {
  font-size: var(--size-title);
  line-height: var(--line-title);
  font-weight: var(--weight-semibold);
}

p { margin: 0 0 var(--space-4); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--size-body-large);
  line-height: var(--line-body-large);
  color: var(--on-surface-variant);
  margin-top: var(--space-5);
}

/* ---------------------------------------------------------------- controls
   Pill buttons, 48px tall, 24px of horizontal padding, medium weight,
   sentence case. Filled for the one action that matters, tonal for the
   secondary, text for anything quieter. */

.btn, .btn-tonal, .btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding-inline: var(--control-padding-inline);
  border: 0;
  border-radius: var(--shape-pill);
  font-family: var(--font);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  line-height: var(--line-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--press-duration) var(--motion-easing);
}

.btn { background: var(--primary); color: var(--on-primary); }
.btn:hover { background: var(--on-primary-container); color: var(--on-primary); }

.btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn-tonal:hover { background: var(--primary-container); color: var(--on-primary-container); }

.btn-text { background: transparent; color: var(--primary); padding-inline: var(--space-4); }
.btn-text:hover { background: var(--surface-container-high); color: var(--on-primary-container); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* ----------------------------------------------------------------- header
   A wordmark and one address. No navigation: one page, one action. */

.topbar { background: var(--surface); padding-block: var(--space-5); }
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--size-title);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-headline);
  color: var(--on-surface);
  text-decoration: none;
}
.wordmark img { border-radius: var(--shape-small); }
.topbar-link {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  border-radius: var(--shape-pill);
  font-size: var(--size-label);
  line-height: var(--line-label);
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium);
  color: var(--primary);
  text-decoration: none;
}
.topbar-link:hover { background: var(--surface-container-high); color: var(--on-primary-container); }

/* ------------------------------------------------------------------- hero
   Copy left, the product running past the right edge on wide screens. */

.hero { background: var(--surface); padding-top: var(--space-7); padding-bottom: var(--space-9); }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
.hero-shot img {
  border-radius: var(--shape-large);
  outline: 1px solid var(--outline-variant);
  outline-offset: calc(-1 * 1px);
}

/* ------------------------------------------------------------------ steps
   A numbered rhythm on a tinted surface, deliberately not three identical
   cards. The tone change is the section divider; there is no rule. */

.steps { background: var(--surface-container); padding-block: var(--space-9); }
.section-title { max-width: 18ch; margin-bottom: var(--space-8); }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  background: var(--surface);
  border-radius: var(--shape-medium);
  padding: var(--space-6);
}
.step-no {
  font-size: var(--size-headline);
  line-height: 1;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-headline);
  color: var(--tertiary);
}
.step-body h3 { margin-bottom: var(--space-3); }
.step-body p { color: var(--on-surface-variant); }

/* ------------------------------------------------------------------- band
   The one inverse surface on the page: full bleed, no shadow, tone alone. */

.band {
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  padding-block: var(--space-10);
}
.band-grid { display: grid; gap: var(--space-8); align-items: center; }
.band h2 { margin-bottom: var(--space-6); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); max-width: 56ch; }
.facts li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--inverse-on-surface-variant);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--space-4);
  height: 2px;
  border-radius: var(--shape-pill);
  background: var(--primary-container);
}
.band-shot img { border-radius: var(--shape-medium); }

/* ------------------------------------------------------------- who it is for */

.who { background: var(--surface); padding-block: var(--space-9); }
.who-grid { display: grid; gap: var(--space-8); align-items: center; }
.who-copy h2 { margin-bottom: var(--space-5); }
.who-copy p { color: var(--on-surface-variant); }
.who-shot img {
  border-radius: var(--shape-medium);
  outline: 1px solid var(--outline-variant);
  outline-offset: calc(-1 * 1px);
  margin-inline: auto;
  max-width: 300px;
}

/* -------------------------------------------------------------------- close
   A large tonal surface. This is the page's only "card", and it earns the
   28px radius because it is the last thing asked of the reader. */

.cta { background: var(--surface); padding-bottom: var(--space-9); }
.cta-inner {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-radius: var(--shape-large);
  padding: var(--space-9) var(--space-6);
  text-align: center;
}
.cta h2 { margin-bottom: var(--space-4); margin-inline: auto; max-width: 22ch; }
.cta p { color: var(--on-primary-container); margin-inline: auto; margin-bottom: var(--space-7); }
.cta .actions { justify-content: center; margin-top: 0; }
.cta .btn { background: var(--primary); color: var(--on-primary); }
.cta .btn:hover { background: var(--inverse-surface); color: var(--on-primary); }

/* ------------------------------------------------------------------ footer
   Who is behind this, how to reach them, and the three policy pages. */

.foot {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  padding-block: var(--space-8);
}
.foot-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
.foot h2 {
  font-size: var(--size-label);
  line-height: var(--line-label);
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-semibold);
  text-transform: none;
  color: var(--on-surface);
  margin-bottom: var(--space-3);
}
.foot p { font-size: var(--size-label); line-height: var(--line-label); margin-bottom: var(--space-3); }
.foot a { color: var(--primary); }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  font-size: var(--size-label);
  line-height: var(--line-label);
  text-decoration: none;
}
.foot-links a:hover { text-decoration: underline; }
.foot-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--outline-variant);
}
.foot-legal p { max-width: 70ch; margin-bottom: var(--space-2); }

/* ------------------------------------------------------------- prose pages
   Privacy, terms and accessibility. Same system, one column, nothing else on
   the page competing with the words. */

.page-head { background: var(--surface-container); padding-block: var(--space-9); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { max-width: 60ch; }
.page-head .updated {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--shape-pill);
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font-size: var(--size-label);
  line-height: var(--line-label);
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium);
}

.prose { background: var(--surface); padding-block: var(--space-9); }
.prose-inner { max-width: 68ch; margin-inline: auto; }
.prose h2 {
  font-size: var(--size-title);
  line-height: var(--line-title);
  letter-spacing: normal;
  font-weight: var(--weight-semibold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: var(--size-body-large);
  line-height: var(--line-body-large);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.prose p, .prose li { color: var(--on-surface-variant); }
.prose p { max-width: none; }
.prose ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-3); }
.prose li { padding-left: var(--space-1); }
.prose .panel {
  background: var(--surface-container);
  border-radius: var(--shape-medium);
  padding: var(--space-6);
  margin-block: var(--space-6);
}
.prose .panel :last-child { margin-bottom: 0; }
.prose .panel h2, .prose .panel h3 { margin-top: 0; }
.prose .flag {
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  border-radius: var(--shape-medium);
  padding: var(--space-6);
  margin-block: var(--space-6);
}
.prose .flag :last-child { margin-bottom: 0; }
.prose .flag p, .prose .flag li { color: var(--on-tertiary-container); }
.prose dl { margin: 0 0 var(--space-4); }
.prose dt { font-weight: var(--weight-semibold); color: var(--on-surface); margin-top: var(--space-5); }
.prose dd { margin: var(--space-2) 0 0; color: var(--on-surface-variant); }

/* --------------------------------------------------------------------- 404 */

.notfound { background: var(--surface); padding-block: var(--space-10); }
.notfound .actions { justify-content: flex-start; }

/* ------------------------------------------------------------------ reveal
   One entrance, 400ms, fading up 16px, once. The styles apply only after
   main.js marks the document, so with no JavaScript the page is simply
   visible; a failsafe in main.js reveals anything the observer misses. */

.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(var(--motion-rise)); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-duration) var(--motion-easing),
              transform var(--motion-duration) var(--motion-easing);
}

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

@media (min-width: 780px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .band-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-9); }
  .who-grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-9); }
  .step { grid-template-columns: var(--space-8) 1fr; gap: var(--space-6); padding: var(--space-7); }
  .cta-inner { padding: var(--space-10) var(--space-9); }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
}

@media (min-width: 1100px) {
  /* The product runs off the right edge: the screen is bigger than the page.
     How far it runs is not a free choice. Measured off the asset itself
     (1600x1112): the right-most ink is the "Send" link, ending at x=1578, and
     the summary card, the Notes card and the "Preview quote" button all end at
     x=1567. Only x>=1580 is clear of every word, number, button and icon, so
     x=1580 is the one cut line that severs nothing.

     The copy column fixes the image's left edge at 50vw + 48px at every width
     from 1100px up, so the width visible to the right of it is 50vw - 48px.
     Scaling that by 1600/1580 puts the viewport's right edge exactly on the
     safe line: the last 20px of the image, and nothing else, sits off-screen.
     The old width (50vw - 24px) put the cut at x=1538 (1280px) through to
     x=1569 (2560px), which sliced "Send" to "Se" at every width and cut 30px
     into the "Preview quote" button at 1280px.

     min(50vw, 900px) caps the bleed at a 1800px viewport: past that the image
     stops growing and its right edge sits inside the viewport instead, which
     is a continuous change at the cap rather than a jump. */
  .hero-shot { margin-right: calc(50% - 50vw); }
  .hero-shot img {
    max-width: none;
    width: calc((min(50vw, 900px) - var(--gutter) * 2) * 1600 / 1580);
  }
  .step:nth-child(2) { margin-left: var(--space-8); }
  .step:nth-child(3) { margin-left: calc(var(--space-8) * 2); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition: none; }
  .btn, .btn-tonal, .btn-text { transition: none; }
}