/* The Stuffed home page: one headline, the payday scene, three lines and
   three screens. Everything else comes from style.css. */

.h-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px var(--pad) 8px;
  text-align: center;
}
.h-kicker {
  font: 700 13px var(--sans);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--terracotta-text);
  margin: 0 0 18px;
}
.h-hero h1 {
  font: 400 clamp(40px, 7vw, 72px)/1.02 var(--serif);
  letter-spacing: -1px;
  margin: 0;
  color: var(--ink);
}
.h-hero h1 em { font-style: normal; color: var(--terracotta-text); }
.h-lede {
  font: 400 clamp(17px, 2.2vw, 20px)/1.5 var(--sans);
  color: var(--ink-70);
  max-width: 560px;
  margin: 20px auto 0;
}
.h-cta { margin-top: 26px; }
.h-get {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px 11px 20px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--cream);
  text-align: left;
  box-shadow: 0 1px 2px rgba(63, 46, 39, .12), 0 10px 24px rgba(63, 46, 39, .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.h-get:hover { color: var(--cream); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(63, 46, 39, .12), 0 14px 30px rgba(63, 46, 39, .2); }
.h-get:focus-visible { outline: 2px solid var(--terracotta-text); outline-offset: 3px; }
.h-get svg { flex: none; margin-top: -2px; }
.h-get span { font: 700 20px/1.05 var(--sans); letter-spacing: -.2px; }
.h-get small { display: block; font: 400 12px/1.2 var(--sans); letter-spacing: .2px; opacity: .82; }
.h-note { font: 400 14px var(--sans); color: var(--ink-55); margin: 12px 0 0; }
.head-get {
  font: 700 13px var(--sans);
  color: var(--cream);
  background: var(--terracotta-text);
  padding: 8px 14px;
  border-radius: 999px;
}
.head-get:hover { color: var(--cream); filter: brightness(1.06); }
@media (max-width: 560px) { .head-mail { display: none; } }
.h-scene { margin: 26px auto 0; max-width: 760px; }

.h-points {
  max-width: 1000px;
  margin: 56px auto 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.h-point {
  background: var(--card);
  border-radius: 20px;
  padding: 24px 24px 22px;
  box-shadow: var(--lift);
}
.h-point h2 { font: 400 23px/1.15 var(--serif); margin: 0 0 8px; color: var(--ink); }
.h-point p { font: 400 16px/1.5 var(--sans); margin: 0; color: var(--ink-70); }

.h-screens {
  max-width: 1000px;
  margin: 56px auto 24px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
/* The phones. Measured off an iPhone 17 Pro and sized in cqw, so the band,
   bezel and corners keep their proportions at any width: the screen's corner
   is 13.7% of its width, and each ring outside it adds its own thickness to
   the radius, so every curve runs parallel to the one inside it. */
.device {
  --band: .8cqw;
  --bezel: 2.3cqw;
  --screen-r: 12.9cqw;
  container-type: inline-size;
  position: relative;
  margin: 0;
}
.device-band {
  position: relative;
  padding: var(--band);
  border-radius: calc(var(--screen-r) + var(--bezel) + var(--band));
  /* Warm titanium: light catching the top left edge and the lower right. */
  background: linear-gradient(135deg, #D9CBBE 0%, #9A887B 16%, #6B5B51 34%, #8C7A6E 52%,
    #B8A698 70%, #6B5B51 86%, #C9B8AA 100%);
  box-shadow:
    inset 0 0 0 .2cqw rgba(255, 255, 255, .22),
    0 0 0 .15cqw rgba(46, 33, 28, .45),
    0 1px 2px rgba(63, 46, 39, .18),
    0 14px 28px -10px rgba(63, 46, 39, .30),
    0 40px 64px -28px rgba(63, 46, 39, .42);
}
.device-bezel {
  position: relative;
  padding: var(--bezel);
  border-radius: calc(var(--screen-r) + var(--bezel));
  background: #0B0807;
  box-shadow: inset 0 0 0 .3cqw #000;
}
.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--screen-r);
  background: var(--card);
}
/* A faint sheen on the glass, so the screen reads as behind something. */
.device-bezel::after {
  content: "";
  position: absolute;
  inset: var(--bezel);
  border-radius: var(--screen-r);
  background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 24%,
    rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}
/* Buttons: Action, then volume up and down on the left; the side button on
   the right. Behind the band, so only their outer edge shows. */
.device-band::before,
.device-band::after,
.device-bezel::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1.1cqw;
  border-radius: .6cqw;
  background: linear-gradient(90deg, #5E4F46, #B3A193 55%, #7A695E);
}
.device-band::before { left: -.55cqw; top: 40cqw; height: 7.5cqw; }
.device-band::after { left: -.55cqw; top: 55cqw; height: 13cqw; box-shadow: 0 17cqw 0 #8C7A6E; }
.device-bezel::before { right: calc(-.55cqw - var(--band)); top: 60cqw; height: 21cqw; }

.h-screens .device:nth-child(2) { margin-top: 28px; }

@media (max-width: 760px) {
  .h-hero { padding-top: 20px; }
  /* The scene scales with the page; its words must not. */
  .scene .name { font-size: 24px; }
  .scene .amt { font-size: 28px; }
  .scene .pay-label { font-size: 18px; }
  .h-points { grid-template-columns: 1fr; gap: 14px; }
  .h-screens { grid-template-columns: 1fr 1fr; gap: 14px; }
  .h-screens .device:nth-child(2) { margin-top: 0; }
  .h-screens .device:nth-child(3) { display: none; }
}