/* Home page — Paper "Cubbi Website — Home (Redesign)" (desktop 11D-0 / mobile 4DK-0). */

/* ---- Hero ---- */
.home-hero {
  background: #fff;
  position: relative;
  /* phones fall into the next section (CUB-218) but must not widen the page */
  overflow-x: clip;
  overflow-y: visible;
}
.home-hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 4rem;
  padding-block: 1rem 3rem;
}
.home-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  max-width: 35rem;
}
.home-hero-copy h1 {
  font-size: clamp(2.1rem, 3.5vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0;
  position: relative;
}
.home-hero-copy h1 .squiggle {
  margin-top: -0.05rem;
}
.home-hero-copy .lede {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--green-600);
  max-width: 30rem;
  margin: 0;
}
.rating-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--cream-100);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  padding: 0.75rem 1.25rem;
  width: fit-content;
}
.rating-card .stars {
  display: flex;
  gap: 2px;
  color: var(--green-700);
}
.rating-card .score {
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--green-700);
}
.rating-card .caption {
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--green-700);
  max-width: 13.5rem;
}
.btn-signup {
  font-size: 1.25rem;
  padding: 0.9rem 1.75rem;
  box-shadow: 4px 4px 0 var(--purple-500);
  width: fit-content;
}
.home-hero .container {
  position: relative;
}
/* Hero visual lane, per artboard 11D-0: x 684→1376 of the 1440 frame, origin at the
   hero's top. Sized proportionally (cqw) so phones, badges and the Dragons' Den
   mark keep the artboard's geometry as the lane narrows. */
.home-hero-visual {
  position: absolute;
  right: 4rem;
  top: -1rem;
  width: min(43.25rem, 100% - 38.6rem);
  aspect-ratio: 692 / 493;
  container-type: inline-size;
  z-index: 5;
  /* Decorative — never intercept clicks on the copy or sections it overlaps. */
  pointer-events: none;
}
.home-hero-visual .phone {
  position: absolute;
  border-radius: 34px;
  background: #111;
  padding: 5px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
.home-hero-visual .phone img {
  border-radius: 28px;
  display: block;
  width: 100%;
  height: auto;
}
/* Artboard: back bezel 241×512 at (274, −157) rotate 10°; front bezel 247×531 at
   (0, 178) rotate −12°, falling out of the hero across the cream band below. */
.home-hero-visual .phone-back {
  left: 39.6cqw;
  top: -22.7cqw;
  width: 34.8cqw;
  transform: rotate(10deg);
  transform-origin: 0 0;
}
.home-hero-visual .phone-front {
  left: 0;
  top: 25.7cqw;
  width: 35.7cqw;
  transform: rotate(-12deg);
  transform-origin: 0 0;
}
/* CUB-213: store badges sit under the phones, right of the front one (artboard 8A4-0). */
.hero-store-badges {
  position: absolute;
  left: 58.1cqw;
  top: 59.8cqw;
  display: flex;
  gap: 0.625rem;
  pointer-events: auto;
}
.hero-store-badges img {
  width: clamp(6rem, 20cqw, 8.75rem);
  height: auto;
}

/* CUB-218: phones drift ~15% slower than the page. Pure CSS scroll-driven
   animation — a transform, so no layout shift; ignored where unsupported. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-hero-visual {
      animation: home-phones-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    @keyframes home-phones-drift {
      from { translate: 0 0; }
      to { translate: 0 15vh; }
    }
  }
}

/* ---- AS SEEN ON DRAGONS' DEN — sits in the cream band beside the phones ---- */
.seen-on {
  position: absolute;
  right: 0;
  top: 83.7cqw;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}
.seen-on .pre {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--green-700);
}
.seen-on .show {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--green-700);
}
/* CUB-219: the squiggle spans the whole phrase. */
.seen-on .show .uword-line {
  bottom: -0.3em;
  height: 0.5em;
}

/* ---- Approved in minutes ---- */
.approved {
  background: var(--cream-200);
  /* full-bleed band, content capped to the site's 90rem grid on wide screens */
  padding: 8.5rem max(4rem, calc((100% - 82rem) / 2)) 5rem;
}
.approved-heading {
  max-width: 37.5rem;
  margin-bottom: 3.5rem;
}
.approved-heading p {
  color: var(--ink-muted);
  margin: 0.75rem 0 0;
}
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.75rem;
}
.step-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  position: relative;
}
.step-card .num {
  position: absolute;
  left: -1.75rem;
  top: -2.1rem;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--green-700);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.step-card h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 0.375rem;
}
.step-card p {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--green-700);
  margin: 0;
}
.video-embed {
  position: relative;
  width: min(55.8rem, 100%);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  background: #111;
}
.video-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed .play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 5.5rem;
  height: 3.875rem;
  border: 0;
  border-radius: var(--radius-md);
  background: #f00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.video-embed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.video-embed.playing::after,
.video-embed.playing .play {
  display: none;
}

/* ---- Green claim band ---- */
.claim-band {
  margin: 0; /* a <p> — the global 1em bottom margin left a white seam before the exit wave */
  background: var(--green-700);
  color: var(--cream-200);
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* The entry wave stacks more solid green above this band than the exit wave
     leaves below it, so the paddings compensate to centre the text optically
     in the visible green (wave + section + wave). */
  padding: 2.05rem 3.4rem 2.75rem;
}

/* ---- Section shells (brands / blog) ---- */
.home-section {
  padding: 4rem max(4rem, calc((100% - 82rem) / 2)) 5rem;
  background: #fff;
  position: relative;
}
.home-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin: 1.25rem 0 1.5rem;
}
.home-section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.22;
  color: var(--green-700);
  margin: 0;
  position: relative;
}
.home-section-head p {
  color: var(--ink-muted);
  margin: 0.75rem 0 0;
  max-width: 40rem;
}
.btn-dark-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--green-700);
  color: var(--cream-200);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.875rem 1.625rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.btn-dark-pill:hover {
  background: var(--green-600);
}

/* Brand tiles */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.offer-card {
  position: relative;
  display: block;
  height: 13.75rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(160deg, var(--green-600), var(--green-900));
  text-decoration: none;
  transition: transform 0.15s ease;
  isolation: isolate;
}
.offer-card:hover {
  transform: translateY(-3px);
}
.offer-card .media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.offer-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CUB-223: brand-directory treatment — black transparent gradient, white text on top. */
.offer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.78));
}
.offer-card .flag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--lilac-500);
  color: var(--green-700);
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}
.offer-card .body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
}
.offer-card .body h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.125rem;
}
.offer-card .body p {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* ---- Testimonial strip ---- */
.testimonial {
  background: var(--purple-700);
  display: flex;
  align-items: center;
  gap: 3rem;
  /* Same optical-centre compensation as the claim band (waves add more purple
     above than below). */
  padding: 2.65rem max(4rem, calc((100% - 82rem) / 2)) 3.35rem;
}
.testimonial blockquote {
  flex: 1.4;
  margin: 0;
  padding-right: 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.testimonial blockquote p {
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--lilac-100);
  margin: 0 0 0.625rem;
}
.testimonial cite {
  font-style: normal;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--green-100);
}
.testimonial .seen {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.testimonial .seen .pre {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--lilac-100);
}
.testimonial .seen .show .uword-line {
  bottom: -0.3rem;
}
.testimonial .seen .show {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--lilac-500);
}

/* Blog cards */
.blog-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.blog-card {
  position: relative;
  height: 17.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  background: var(--purple-500);
  text-decoration: none;
  display: block;
}
.blog-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card .read-time {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(255, 255, 255, 0.85);
  color: var(--green-700);
  font-weight: 500;
  font-size: 0.6875rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
}
.blog-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 35%, rgba(0, 0, 0, 0.78));
}
.blog-card .read-time,
.blog-card .title-bar {
  z-index: 1;
}
.blog-card .title-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem;
  color: var(--cream-100);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

/* ---- #JOINTHECUB banner ---- */
.jointhecub {
  background: var(--lilac-500);
  text-align: center;
  padding: 3.4rem 4rem 3.5rem;
}
.jointhecub .tag {
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--purple-700);
  margin-bottom: 0.5rem;
}
.jointhecub h2 {
  font-size: clamp(1.6rem, 3vw, 2.75rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--green-700);
  margin: 0;
}

/* ---- Mobile (≤ 63.9rem tracks the chrome breakpoint) ---- */
@media (max-width: 63.9rem) {
  .home-hero {
    overflow: hidden;
  }
  .home-hero .container {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.25rem 2rem;
  }
  /* Mobile artboard 4DK-0: phone group 308×406 under the copy, Dragons' Den mark
     bottom-right of it, badges live in the copy (.hero-badges). */
  .home-hero-visual {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 19.25rem;
    aspect-ratio: 308 / 406;
    margin: 2rem auto 3.25rem; /* room for the Dragons' Den mark below the phones */
    animation: none;
  }
  .home-hero-visual .phone {
    border-radius: 13px;
    padding: 3px;
  }
  .home-hero-visual .phone img {
    border-radius: 11px;
  }
  .home-hero-visual .phone-back {
    left: 55cqw;
    top: -2cqw;
    width: 48.5cqw;
  }
  .home-hero-visual .phone-front {
    left: 0;
    top: 31.5cqw;
    width: 48.5cqw;
    transform: rotate(-15deg);
  }
  .hero-store-badges {
    display: none;
  }
  .seen-on {
    top: auto;
    bottom: -3rem; /* below the phone group, right-aligned, per 4DK-0 */
    right: 1rem;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
  }
  .seen-on .pre {
    font-size: 0.8125rem;
  }
  .seen-on .show {
    font-size: 1.125rem;
    letter-spacing: 0.06em;
  }
  .approved {
    padding: 4rem 1.25rem 3rem;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
  .step-card .num {
    left: -0.5rem;
  }
  .home-section {
    padding: 2.5rem 1.25rem 3rem;
  }
  .home-section-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonial {
    flex-direction: column;
    /* keep the wave-asymmetry compensation from the desktop rule */
    padding: 2rem 1.25rem 3rem;
    gap: 1.5rem;
  }
  .testimonial blockquote {
    border-right: 0;
    padding-right: 0;
  }
  .blog-row {
    grid-template-columns: 1fr;
  }
  .claim-band,
  .jointhecub {
    padding-inline: 1.25rem;
  }
}

/* Word-aligned squiggle underline, per the Paper headings ("MINUTES", "COUNTING", …). */
.uword {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.uword .uword-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  width: 100%;
  height: 0.22em;
}

/* Mobile-only elements per the mobile artboards: hero store badges, and section CTAs
   move below their grids. */
.hero-badges { display: none; }
.mobile-cta { display: none; }
@media (max-width: 63.9rem) {
  .hero-badges {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
  }
}
@media (max-width: 47.9rem) {
  .mobile-cta {
    display: inline-block;
    margin-top: 1.25rem;
  }
  .home-section-head .btn-dark-pill { display: none; }
}

/* Keep the rainbow divider from growing with viewport width so the hero stays above the fold. */
.home-hero-wave-wrap .wave {
  height: clamp(6rem, 13vw, 10.5rem);
}

/* Section waves (CUB-210): shallow enough to read as each band's edge. */
.home-wave {
  display: block;
  height: clamp(2.5rem, 5vw, 4.5rem);
  margin-block: -1px; /* flush against both neighbours — no seam slivers */
  /* CUB-258. Two things keep this seamless, and both are needed:

     1. `overflow: visible` lets the path's 10-unit overshoot paint ~4px PAST the
        box, so real ink of the lower colour covers the boundary. Without it the
        SVG's UA default `overflow: hidden` clips the overshoot at exactly the
        edge it exists to cross, and iOS Safari at DPR 3 leaves a 1-device-pixel
        row of the svg's own `background` (the colour ABOVE) showing through.
        Verified in WebKit at DPR 3: without this, device row 10974 renders pure
        white between two purple rows.
     2. No `position`/`z-index`. Promoting the svg made it paint above the
        following section, so the -1px overlap could not cover its bottom row.
        Every other divider (.page-wave, .nav-wave, .hiw-strip-wave,
        _WaveSimple) is static for the same reason.

     Rule of thumb for any divider like this: paint real ink across the
     boundary. Never rely on two boxes meeting exactly, or on one element's
     background covering a neighbour's edge — sub-pixel rounding and compositing
     both break that, and they break it differently per browser and per DPR. */
  overflow: visible;
}