/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Approved Uppie hero · macrostructure: Wall That Breaks.
 * The approved desktop and mobile mockups are the measured visual specification.
 */
/* The homepage nav is laid out here rather than by the shared layout's
   utilities. `_marketing_nav.html.erb` withholds those utilities when
   `on_home`, so nothing has to be beaten with `!important` to get out of the
   way — the rules below are the only ones in play. */
header .uppie-nav {
  padding: 0.875rem 7vw;
}

.uppie-nav .uppie-nav-logo {
  width: auto;
  height: 2.5rem;
}

.uppie-nav .uppie-nav-menu-button .material-symbols-outlined {
  font-size: 2rem;
}

.uppie-hero {
  position: relative;
  overflow: clip;
  background: var(--uppie-canvas);
  padding: 1.125rem 0 0;
}

.uppie-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(100%, 96rem);
  margin-inline: auto;
  padding-inline: 7vw;
}

.uppie-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.uppie-hero-eyebrow {
  color: var(--uppie-teal);
  font-family: var(--uppie-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.uppie-hero-title {
  min-width: 0;
  max-width: 10ch;
  margin-top: 0.95rem;
  color: var(--uppie-ink);
  font-family: var(--uppie-font-display);
  font-size: clamp(2.8rem, 13.5vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.uppie-hero-title span {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.uppie-hero-title span::after {
  position: absolute;
  right: 0.38em;
  bottom: -0.04em;
  left: 0.32em;
  height: 0.14em;
  border-radius: 999px;
  background: var(--uppie-teal);
  content: "";
  clip-path: polygon(1% 38%, 62% 0, 96% 20%, 100% 62%, 72% 70%, 30% 62%, 4% 100%);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.uppie-hero-lede {
  max-width: 35rem;
  margin-top: 1.55rem;
  color: var(--uppie-ink-soft);
  font-family: var(--uppie-font-body);
  font-size: clamp(1rem, 4.25vw, 1.125rem);
  line-height: 1.55;
}

.uppie-hero-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  max-width: 38rem;
  margin-top: 0.4rem;
}

.uppie-hero-form > div { min-width: 0; }

.uppie-hero-field,
.uppie-hero-button {
  min-height: 2.85rem;
  border-radius: var(--uppie-radius-control);
}

.uppie-hero-field {
  outline: 2px solid transparent;
  outline-offset: 1px;
  padding-inline: 0.9rem;
  font-size: 1rem;
}

.uppie-hero-field:focus {
  border-color: var(--uppie-blue);
  box-shadow: none;
  outline-color: var(--uppie-blue);
}

.uppie-hero-button {
  padding-inline: 1.25rem;
  transition:
    background-color var(--uppie-duration-short) var(--uppie-ease-out),
    border-color var(--uppie-duration-short) var(--uppie-ease-out),
    transform var(--uppie-duration-micro) var(--uppie-ease-out);
}

.uppie-hero-button:focus-visible {
  outline: 2px solid var(--uppie-ink);
  outline-offset: 2px;
}

.uppie-hero-button:active { transform: translateY(1px); }

.uppie-hero-note {
  min-height: 1lh;
  max-width: 38rem;
  margin-top: 0.6rem;
  color: var(--uppie-ink-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.uppie-hero-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 38rem;
  margin-top: 0.9rem;
}

.uppie-hero-proof-item {
  display: flex;
  min-width: 0;
  flex-direction: column-reverse;
  padding-inline: 0.6rem;
  border-left: var(--uppie-rule-hair) solid var(--uppie-rule);
}

.uppie-hero-proof-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.uppie-hero-proof-label {
  margin-top: 0.25rem;
  color: var(--uppie-ink-soft);
  font-size: clamp(0.675rem, 2.8vw, 0.85rem);
  line-height: 1.15;
}

.uppie-hero-proof-value {
  color: var(--uppie-ink);
  font-size: clamp(1.2rem, 5.8vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.uppie-hero-world {
  position: relative;
  min-width: 0;
  width: calc(100% + 14vw);
  height: auto;
  margin: -0.5rem -7vw 0;
  overflow: clip;
}

.uppie-hero-world picture {
  display: block;
  width: 100%;
}

.uppie-hero-world-image {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 640px) {
  .uppie-hero-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .uppie-hero-button { min-width: 15rem; }
}

@media (min-width: 960px) {
  /* Only the gutter and the flex distribution move here. The nav's enlarged
     type and controls are held back to 1280 (see below): between 960 and 1279
     the row has to also carry the `lg` Resources link, and the oversized
     treatment ran the signup CTA off the right edge of a 1024px viewport. */
  header .uppie-nav {
    padding-inline: 4.75vw;
  }

  .uppie-nav > div > div:last-child {
    flex: 1;
    margin-left: clamp(5rem, 7.75vw, 7.75rem);
  }

  .uppie-nav .uppie-nav-login {
    min-width: 6.5rem;
    min-height: 2.5rem;
    justify-content: center;
    margin-left: auto;
    padding-inline: 0.875rem;
    border: var(--uppie-rule-hair) solid var(--uppie-rule);
    border-radius: var(--uppie-radius-control);
    background: var(--uppie-surface);
    box-shadow: 0 0.125rem 0.5rem var(--uppie-shadow);
    color: var(--uppie-ink);
    transition:
      background-color var(--uppie-duration-short) var(--uppie-ease-out),
      border-color var(--uppie-duration-short) var(--uppie-ease-out),
      color var(--uppie-duration-short) var(--uppie-ease-out),
      transform var(--uppie-duration-micro) var(--uppie-ease-out);
  }

  .uppie-nav .uppie-nav-login:focus-visible {
    outline: 2px solid var(--uppie-ink);
    outline-offset: 2px;
  }

  .uppie-nav .uppie-nav-login:active { transform: translateY(1px); }

  /* Never wrap a nav item onto a second line: a wrapped link is the visible
     symptom of a row that no longer fits, and silently double-decking it hides
     the overflow instead of surfacing it. */
  .uppie-nav a { white-space: nowrap; }

  /* `min-height`, not `height`. The world art is absolutely positioned and
     reads `height: 100%`, so the box still drives the composition — but a copy
     column that outgrows it now pushes the hero taller instead of being cut
     off by the `overflow: clip` above. */
  .uppie-hero {
    min-height: max(48rem, 62.55vw);
    margin-top: -4.125rem;
    padding: 0;
  }

  .uppie-hero-shell {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding-inline: 4.75vw;
  }

  .uppie-hero-copy {
    width: min(36.5vw, 36rem);
    padding-top: clamp(10.5rem, 12vw, 12rem);
  }

  .uppie-hero-title {
    margin-top: 1.75rem;
    font-size: clamp(4.35rem, 5.5vw, 5.5rem);
  }

  .uppie-hero-lede {
    max-width: 27rem;
    margin-top: 4rem;
    font-size: 1.125rem;
  }

  .uppie-hero-form,
  .uppie-hero-note,
  .uppie-hero-proof {
    width: min(36.5vw, 36rem);
  }

  .uppie-hero-form {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 4.0625rem;
  }

  .uppie-hero-field,
  .uppie-hero-button { min-height: 4rem; }

  .uppie-hero-button { min-width: min(18.25vw, 18rem); }

  .uppie-hero-note { margin-top: 0.7rem; }

  .uppie-hero-proof { margin-top: 3.2rem; }

  .uppie-hero-world {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
  }

  .uppie-hero-world picture { height: 100%; }

  .uppie-hero-world-image {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: 100%;
  }
}

@media (min-width: 960px) and (hover: hover) {
  .uppie-nav .uppie-nav-login:hover {
    border-color: var(--uppie-blue);
    background: var(--uppie-canvas);
    color: var(--uppie-ink);
    transform: translateY(-1px);
  }
}

/* 960-1365: the copy column's vertical rhythm was authored in fixed rem for the
   approved 1366+ composition, so it did not shrink with the hero box and ran
   past the bottom of it — taking the proof row (the one piece of hard evidence
   above the fold) out of view entirely at 960 and 1024, and stripping the
   labels off the numbers at 1280. Each value below is `min(approved, Nvw)`
   where N resolves to the approved value at exactly 1366px, so the rhythm
   converges on the signed-off composition at the top of the band and there is
   no step at the boundary. */
@media (min-width: 960px) and (max-width: 1365.98px) {
  .uppie-hero-copy { padding-top: min(10.5rem, 12.3vw); }

  .uppie-hero-lede { margin-top: min(4rem, 4.685vw); }

  .uppie-hero-form { margin-top: min(4.0625rem, 4.758vw); }

  .uppie-hero-proof { margin-top: min(3.2rem, 3.748vw); }
}

/* The enlarged nav treatment from the approved composition. Held at 1280 and
   up: below that the `lg` Resources link joins the row, and 1rem type plus an
   11.25rem CTA no longer fit — at 1024 the signup button ran 41px past the
   viewport and `overflow-x-clip` on <header> cut it off rather than scrolling
   to it. Between 960 and 1279 the row keeps the shared nav's own sizing, which
   fits with room to spare. */
@media (min-width: 1280px) {
  header .uppie-nav {
    padding-block: 1.375rem;
  }

  .uppie-nav .uppie-nav-logo {
    height: 3.125rem;
  }

  .uppie-nav .uppie-nav-login {
    min-width: 6.75rem;
    min-height: 3rem;
    padding-inline: 1.25rem;
  }

  /* Matches the taller nav so the hero still starts flush with the page top. */
  .uppie-hero { margin-top: -5.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .uppie-hero-copy {
    animation: uppie-hero-copy-in var(--uppie-duration-scene) var(--uppie-ease-out) both;
  }

  .uppie-hero-world-image {
    animation: uppie-hero-world-in var(--uppie-duration-scene) var(--uppie-ease-out) 100ms both;
  }
}

@keyframes uppie-hero-copy-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes uppie-hero-world-in {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: translateX(0); }
}