:root {
  --cream: #F6F1E4;
  --ink: #26221B;
  --grass: #5C9E3A;
  --grass-deep: #3F7A27;
  --mauve: #82688A;
  /* Lighter tone of the same mauve. Ink on #82688A is 3.24:1, which fails AA for body
     text; on this it is 4.7:1. The band keeps the full-strength mauve, where the type is
     large enough to pass at 3.0. */
  --mauve-soft: #9C84A2;
  --clay: #C4703F;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --hand: "Courier Prime", "Courier New", monospace;
  --body: "Instrument Sans", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --liquid-tex: url("img/liquid.webp");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(17px, 1.1vw + 12px, 20px);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }

.display {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  letter-spacing: -.02em;
  line-height: .95;
}
.hand { font-family: var(--hand); font-weight: 400; font-size: 1em; line-height: 1.35; letter-spacing: .01em; color: var(--ink); }
.h2 { font-size: clamp(44px, 7vw, 104px); margin-bottom: .4em; }
.h3 { font-size: clamp(28px, 3vw, 44px); margin-bottom: .3em; }

.btn {
  display: inline-block;
  padding: .85em 1.5em;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  transition: transform .25s var(--ease), background .25s, color .25s;
}
.btn { --mx: 0px; --my: 0px; transform: translate(var(--mx), var(--my)); }
.btn:hover { transform: translate(var(--mx), var(--my)) translateY(-2px) rotate(-1deg); }
.btn.magnetic { transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .25s, color .25s; }
/* Glass pill. Text is ink because white on a translucent green is 2.08-3.35:1 and fails
   AA at every mix that still reads as glass; ink is 4.73-7.60:1 across the same range. */
.btn-primary {
  border-color: rgba(38, 34, 27, .22); color: var(--ink);
  --glass-tint: var(--grass); --glass-amount: 52%;
  --glass-lens: url(#lens-pill); --glass-blur: 9px; --glass-sat: 1.7; --glass-bright: 1.16;
  --glass-bevel: 1px;
  --glass-float: 0 6px 16px rgba(38, 34, 27, .16);
}
.btn-primary:hover { --glass-amount: 66%; --glass-bright: 1.1; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--mauve); }
.btn-sm { padding: .65em 1.1em; font-size: .9em; }

/* nav */

/* ---- The glass material ------------------------------------------------------------
   Four surfaces now use this, so it lives in one place. Each sets its own tint, lens and
   strength; everything else (bevel, wall, float) is common. --glass-lens is empty by
   default, which is a legal CSS value, so a surface with no lens just gets frost.
   ------------------------------------------------------------------------------------ */
.nav, .send-card, .btn-primary, .us-panel, .band-inner {
  position: relative; isolation: isolate;
  background: color-mix(in srgb, var(--glass-tint, var(--cream)) var(--glass-amount, 36%), transparent);
  -webkit-backdrop-filter: var(--glass-lens, ) blur(var(--glass-blur, 14px)) saturate(var(--glass-sat, 1.7)) brightness(var(--glass-bright, 1.24));
  backdrop-filter: var(--glass-lens, ) blur(var(--glass-blur, 14px)) saturate(var(--glass-sat, 1.7)) brightness(var(--glass-bright, 1.24));
  box-shadow:
    inset 0 var(--glass-bevel, 1.5px) 0 rgba(255, 255, 255, .78),
    inset 0 calc(-1 * var(--glass-bevel, 1.5px)) 0 rgba(255, 255, 255, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    var(--glass-float, 0 12px 34px rgba(38, 34, 27, .16));
}
/* No backdrop-filter anywhere means these tints are far too thin to read against. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: color-mix(in srgb, var(--cream) 96%, transparent); }
  .send-card { background: color-mix(in srgb, var(--grass) 92%, var(--cream)); }
  .btn-primary { background: var(--grass-deep); color: #fff; }
  .us-panel { background: var(--mauve-soft); }
  .band-inner { background: var(--ink); }
}

/* ---- Liquid glass nav -------------------------------------------------------------
   A floating capsule rather than a full-width bar, which is what stops it cutting the
   cloud bank: the sky now runs above it and down both sides instead of being sliced.
   The material is four things stacked, and it only reads as glass with all four:
     1. a lens        - feDisplacementMap bends the page at the rim, flat through the middle
     2. a blur + tint - the frost, warm cream so it never goes Apple-blue
     3. a bevel       - inset highlights top and bottom giving it thickness
     4. a rim + sheen - a lit edge, and a specular that follows the pointer
   ---------------------------------------------------------------------------------- */
.navbar {
  position: sticky; top: 0; z-index: 20;
  padding: 12px var(--gutter) 0;
  pointer-events: none;            /* the bar is just a rail; only the capsule is clickable */
}
.nav {
  pointer-events: auto;
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  --glass-tint: var(--cream); --glass-amount: 36%;
  --glass-lens: url(#lens); --glass-blur: 13px; --glass-bright: 1.24;
  --glass-float: 0 12px 34px rgba(38, 34, 27, .16), 0 2px 8px rgba(38, 34, 27, .08);
}
/* Lit rim: a gradient ring, brightest where the light would strike top-left. */
.nav .rim, .band-inner .rim {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  pointer-events: none; z-index: 3;
  background: linear-gradient(135deg,
    rgba(255,255,255,.85), rgba(255,255,255,.1) 28%,
    rgba(255,255,255,0) 55%, rgba(255,255,255,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Specular highlight, driven from JS by the pointer. */
.nav::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(180px 90px at var(--sx, 50%) var(--sy, 50%),
              rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
  opacity: var(--sheen, 0); transition: opacity .45s var(--ease);
}
/* Fluid inside the glass: one baked tileable texture, two copies drifting at different
   rates. Only transform animates, so this composites on the GPU instead of rasterising. */
.nav .liquid, .band-inner .liquid { position: absolute; inset: 0; pointer-events: none; z-index: -1;
  opacity: .42; mix-blend-mode: soft-light; overflow: hidden; border-radius: inherit; }
.nav .liquid i, .band-inner .liquid i {
  position: absolute; inset: -30% -80%; display: block;
  background: var(--liquid-tex) 0 0 / 520px 320px repeat;
  will-change: transform; transform: translateZ(0);
}
/* No rotation. The capsule is wide and short, so a rotated layer stops covering it and
   its own edge shows through as a diagonal facet across the glass. Two layers drifting
   in different directions at different speeds read as fluid without that risk, and
   translate composites cheaper than rotate anyway. */
.nav .liquid i:nth-child(1), .band-inner .liquid i:nth-child(1) { animation: swirl-a 38s linear infinite; }
.nav .liquid i:nth-child(2), .band-inner .liquid i:nth-child(2) { animation: swirl-b 53s linear infinite; opacity: .8; }
@keyframes swirl-a {
  0%   { transform: translate3d(0, 0, 0)            scale(1.1); }
  50%  { transform: translate3d(-260px, -14px, 0)   scale(1.2); }
  100% { transform: translate3d(-520px, 0, 0)       scale(1.1); }
}
@keyframes swirl-b {
  0%   { transform: translate3d(0, 0, 0)            scale(1.25); }
  50%  { transform: translate3d(190px, 16px, 0)     scale(1.14); }
  100% { transform: translate3d(380px, 0, 0)        scale(1.25); }
}
/* No backdrop-filter means no frost, and cream at 44% over a dark cloud is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: color-mix(in srgb, var(--cream) 96%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .nav::after { display: none; }
  .nav .liquid i, .band-inner .liquid i { animation: none; }
}
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 26px; text-decoration: none; letter-spacing: -.02em; font-variation-settings: "opsz" 48; }
.amp-inline { color: var(--grass); }
.nav nav { display: flex; gap: 28px; }
.nav nav a { text-decoration: none; font-weight: 500; position: relative; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 3px; background: var(--grass); border-radius: 2px; transition: right .3s var(--ease); }
.nav nav a:hover::after { right: 0; }
@media (max-width: 760px) {
  .nav nav { display: none; }
  .nav { padding: 9px 9px 9px 16px; gap: 14px; }
  .wordmark { gap: 4px; font-size: 22px; }
  .wm-mark { width: 22px; height: 22px; }
}

/* hero */
.hero {
  position: relative;
  min-height: 88vh;
  padding: clamp(40px, 8vh, 96px) var(--gutter) 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 40px;
  align-content: center;
}
.hero > .eyebrow, .hero > h1, .hero > .lede, .hero > .actions { grid-column: 1; }
.eyebrow { color: var(--grass-deep); margin-bottom: .4em; }
.hero h1 { font-size: clamp(40px, 5.4vw, 84px); max-width: 15ch; margin-bottom: .3em; }
.hero h1 em { font-style: normal; color: var(--grass-deep); }
/* The payoff line always takes its own line, whatever the face or viewport does. */
.hero h1 em { display: block; }
.lede { max-width: 38ch; font-size: 1.15em; margin-bottom: 1.4em; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }

.amp-stage {
  grid-column: 2; grid-row: 1 / span 4;
  position: relative;
  min-height: 420px;
  display: grid; place-items: center;
}
.mark-canvas { width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
.mark-canvas.ready { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 32px; }
  .amp-stage { grid-column: 1; grid-row: auto; min-height: 320px; margin-top: 24px; }
}

/* sections */
section { padding: clamp(64px, 10vh, 140px) var(--gutter); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  position: relative;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 36px 30px 28px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(var(--tilt));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: rotate(0) translateY(-6px); box-shadow: 10px 12px 0 var(--grass); }
.card .pin { position: absolute; top: 14px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--clay); border: 2px solid var(--ink); }
.card .num { color: var(--grass-deep); margin: 0 0 .2em; }
.card p:last-child { margin: 0; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } .card { transform: none; } }

/* dark band with scalloped edges */
.band { background: transparent; color: var(--cream); padding: clamp(40px, 7vh, 90px) var(--gutter); position: relative; }
/* Dark glass. The scalloped edge is now a mask on the glass itself rather than two ink
   strips sitting outside it: an opaque scallop against a translucent band reads as a
   sticker laid on top. mask-size carves the top and bottom bands and leaves the middle
   solid, so the whole thing is one surface with one backdrop-filter. */
.band-inner {
  /* Was a full-bleed rectangle carrying a scalloped mask. The scallops are gone by
     request: glass needs an edge you can see past, and a shape that runs to both gutters
     never gives you one. This is now a floating slab on the same material as the nav and
     the form card, at the largest size on the page. */
  margin: 0 auto; max-width: 1180px;
  border-radius: 34px; overflow: hidden;
  padding: clamp(64px, 10vh, 130px) clamp(28px, 5vw, 72px);
  text-align: center;
  --glass-tint: var(--ink); --glass-amount: 72%;
  --glass-lens: url(#lens-card);
  --glass-blur: 18px; --glass-sat: 1.35; --glass-bright: 1;
  --glass-bevel: 2px;
  --glass-float: 0 30px 70px rgba(38, 34, 27, .26), 0 6px 18px rgba(38, 34, 27, .12);
}
/* Dark glass over bare cream is just a dark panel: there is nothing for it to transmit.
   This field sits behind the slab so colour moves through the ink instead of under it. */
.band-glow {
  position: absolute; inset: 8% 10%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 58% at 22% 34%, color-mix(in srgb, var(--grass) 85%, transparent), transparent 70%),
    radial-gradient(38% 52% at 74% 62%, color-mix(in srgb, var(--mauve) 80%, transparent), transparent 72%),
    radial-gradient(34% 44% at 52% 88%, color-mix(in srgb, var(--clay) 60%, transparent), transparent 70%);
  filter: blur(26px);
}
/* On a dark surface the fluid must be finer and far weaker than on the pale nav, or it
   reads as smudges on the ink rather than light moving inside glass. */
.band-inner .liquid { opacity: .10; mix-blend-mode: soft-light; }
.band-inner .liquid i { background-size: 240px 150px; }
.band-inner .rim {
  background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.06) 30%,
              rgba(255,255,255,0) 60%, rgba(255,255,255,.2));
}
.statement { font-size: clamp(34px, 5.4vw, 84px); max-width: 18ch; margin: 0 auto .5em; position: relative; isolation: isolate; }
.statement mark { margin-right: -.16em; display: inline-block; line-height: .92; position: relative; background: none; color: var(--ink); padding: 0 .18em; transition: color .35s .3s; }
.statement mark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grass-deep); border-radius: .18em; transform: scaleX(0); transform-origin: left center; transition: transform .75s var(--ease); }
.statement.in mark { color: #fff; }
.statement.in mark::before { transform: scaleX(1); }
/* Was --mauve-soft, which sat at 4.7:1 on solid ink but falls to under 4:1 once the
   band is translucent. Lifted until it passes against the glass. */
.band-note { color: #D9CBDD; }

/* how */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; max-width: 900px; }
.step { display: grid; grid-template-columns: 90px 1fr; gap: 20px; align-items: start; padding-top: 28px; border-top: 2px solid var(--ink); }
.stepnum { font-size: clamp(56px, 7vw, 96px); color: var(--grass); line-height: .8; }
.step p:last-child { margin: 0; }
@media (max-width: 600px) { .step { grid-template-columns: 60px 1fr; } }

/* us */
.us { display: block; }
.us-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  overflow: hidden; border-radius: 28px; padding: clamp(28px, 4vw, 56px);
  --glass-tint: var(--mauve-soft); --glass-amount: 62%;
  --glass-lens: url(#lens-card); --glass-blur: 18px; --glass-sat: 1.5; --glass-bright: 1.12;
  --glass-bevel: 2px;
  --glass-float: 0 24px 60px rgba(38, 34, 27, .16), 0 4px 14px rgba(38, 34, 27, .08);
}
/* As with the send card, the lens needs something behind it. */
.us-glow {
  position: absolute; inset: -12% -6%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 54% at 24% 30%, color-mix(in srgb, var(--mauve) 68%, transparent), transparent 70%),
    radial-gradient(42% 46% at 78% 70%, color-mix(in srgb, var(--clay) 34%, transparent), transparent 72%),
    radial-gradient(38% 42% at 58% 20%, color-mix(in srgb, var(--butter, #EFE4B0) 50%, transparent), transparent 70%);
  filter: blur(22px);
}
.us-panel > *:not(.us-glow) { position: relative; z-index: 1; }
.us-text p { max-width: 40ch; }
.us-note { color: var(--ink); font-style: italic; }
.polaroids { position: relative; display: flex; justify-content: center; gap: 0; min-height: 380px; align-items: center; }
.polaroid {
  margin: 0; background: #fff; padding: 14px 14px 46px; width: 300px;
  border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(var(--rot)); transition: transform .35s var(--ease);
}
.polaroid:hover { transform: rotate(0) scale(1.04); z-index: 2; }
.polaroid .slot { aspect-ratio: 4 / 5; background: var(--cream); display: grid; place-items: end center; overflow: hidden; }
/* The slot is a fixed 4:5 window, so the photo fills it and crops rather than letterboxing.
   object-position sits slightly high because a head-and-shoulders shot reads better with the
   crop biting into the chest, not the hair. */
.polaroid .slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
@media (max-width: 900px) { .us-panel { grid-template-columns: 1fr; } .polaroids { min-height: 0; } .polaroid { width: 74%; } }

/* send */
.send { display: grid; place-items: center; }
/* No overflow:hidden. Clipping the glow at the section edge is what produced the hard
   horizontal line above this section: the field was still at full strength when it hit
   the boundary. It now runs past the edge and is masked to nothing instead, so there is
   no point at which it stops abruptly. Horizontal inset stays 0 so nothing can cause a
   sideways scrollbar once the clip is gone. */
.send { position: relative; }
/* The lens needs something behind it. On flat cream there is nothing to bend, so the
   section gets a soft field of the brand green for the glass to refract and pick up. */
.send-glow {
  position: absolute; inset: -34% 0; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(64% 50% at 50% 50%, #000 22%, rgba(0,0,0,.55) 52%, transparent 82%);
  mask-image: radial-gradient(64% 50% at 50% 50%, #000 22%, rgba(0,0,0,.55) 52%, transparent 82%);
  background:
    radial-gradient(48% 52% at 28% 32%, color-mix(in srgb, var(--grass) 60%, transparent), transparent 70%),
    radial-gradient(44% 48% at 74% 66%, color-mix(in srgb, var(--grass-deep) 55%, transparent), transparent 72%),
    radial-gradient(40% 40% at 60% 18%, color-mix(in srgb, var(--butter, #EFE4B0) 55%, transparent), transparent 70%);
  filter: blur(18px);
}
/* Liquid glass, tinted with the brand green rather than a neutral frost.
   Text went from white to ink deliberately: white on #5C9E3A is 3.28:1 and fails AA,
   and translucency lightens the panel further, which makes white worse and ink better.
   Ink on the same green is 4.83:1 and rises as the glass lets cream through. */
.send-card {
  z-index: 1;
  width: min(720px, 100%);
  color: var(--ink);
  border-radius: 26px;
  padding: clamp(32px, 5vw, 56px);
  overflow: hidden;
  --glass-tint: var(--grass); --glass-amount: 30%;
  --glass-lens: url(#lens-card); --glass-blur: 16px; --glass-sat: 1.8; --glass-bright: 1.3;
  --glass-bevel: 2px;
  --glass-float: 0 24px 60px rgba(38, 34, 27, .18), 0 4px 14px rgba(38, 34, 27, .10);
}
.send-card .rim {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  pointer-events: none; z-index: 3;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.1) 30%,
              rgba(255,255,255,0) 58%, rgba(255,255,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.send-card .h2 { font-size: clamp(38px, 5vw, 72px); }
.send-card form { display: grid; gap: 14px; margin: 24px 0 16px; }
.send-card label { display: grid; gap: 6px; font-weight: 600; font-size: .9em; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 12px 0 0; min-height: 1.2em; font-size: .95em; }
.form-note a { color: inherit; }
.send-card input { font: inherit; padding: .8em 1em; border-radius: 12px; border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.send-card .btn-primary { background: var(--ink); border-color: rgba(255,255,255,.5); color: var(--cream); justify-self: start; }
.send-card .btn-primary:hover { background: #000; }
.send-card .small { font-size: .9em; margin: 0; }
.send-card a { color: var(--ink); text-underline-offset: 3px; }

/* footer */
.footer { background: var(--ink); color: var(--cream); padding: 40px var(--gutter) 28px; overflow: hidden; }
.giant { font-size: clamp(56px, 13.5vw, 230px); line-height: .9; white-space: nowrap; margin: 0 -0.02em 24px; color: var(--cream); }
.giant .amp-inline { color: var(--grass); }
.foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid rgba(246, 241, 228, .25); padding-top: 18px; font-size: .9em; }
.foot-row p { margin: 0; }
.foot-row nav { display: flex; gap: 20px; }
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: var(--grass); }

/* grain */
.grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; opacity: .07; mix-blend-mode: multiply; }

/* motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* clip-path instead of overflow so the rise still masks upward but descenders are not cut off */
.split .w { display: inline-block; vertical-align: bottom; clip-path: inset(-.02em 0 -.2em 0); }
.split .w i { display: inline-block; font-style: inherit; transform: translateY(110%); animation: rise .8s var(--ease) forwards; animation-delay: calc(var(--d) * 60ms); }
@keyframes rise { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .split .w i { transform: none; animation: none; }
  .statement mark::before { transform: scaleX(1); }
  .statement mark { color: #fff; }
  .btn, .btn:hover { transform: none; }
  .card, .polaroid, .btn { transition: none; }
}
.wm-mark { width: 26px; height: 26px; fill: var(--grass); }
.footer { text-align: center; }
.giant { margin: 0 auto 24px; }
.foot-row { justify-content: center; flex-direction: column; align-items: center; gap: 10px; }
.foot-row nav { flex-wrap: wrap; justify-content: center; }
.foot-row p { max-width: 60ch; opacity: .8; }

/* sky intro: clouds and rain over the hero, parting on scroll to let the sun through.
   The cloud art is the full silhouette (2000x1112, aspect 0.556), not the underside crop that
   shipped earlier. The crop kept the art clear of the nav but cut a straight line across every
   cloud top, which reads as a hard edge the moment the clouds move. Heights below are each
   cloud's width times that aspect, so every cloud's BOTTOM stays on the cloud line and only the
   top extends. */
:root { --lift: 140px; --cloud-bottom: calc(50vh - 262px + var(--lift)); }
.intro { --intro: 900px; height: calc(100vh + var(--intro)); }
@media (max-height: 820px) { :root { --lift: 70px; } }
.intro .hero { position: sticky; top: 0; min-height: 100vh; z-index: 1; will-change: transform; }
/* Every per-frame value (the transforms and opacities below) is written straight onto these
   nine elements from JS. It used to run through inherited custom properties on .sky, which
   invalidated the whole subtree - all two dozen raindrops included - on every single frame.
   That recalc was the choppiness. Only static geometry lives in CSS now. */
.sky, .sky-back { position: fixed; inset: 0; pointer-events: none; overflow: hidden; transform: translateZ(0); contain: layout paint; }
.sky-back { z-index: 0; }
.sky { z-index: 15; }
.sky img, .sky-back img { position: absolute; display: block; height: auto; backface-visibility: hidden; }
.cloud, .sun, .rays { will-change: transform, opacity; }
.gloom { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(62, 72, 84, .82) 0%, rgba(86, 96, 107, .68) 42%, rgba(142, 150, 156, .5) 100%); opacity: .46; will-change: opacity; }
.rays { left: 50%; top: calc(22px + var(--cloud-bottom) / 2); width: 92vw; transform-origin: top center; opacity: 0; transform: translate3d(-50%, 0, 0) scale(.55); }
/* Anchored to the cloud line, not to half of it. Tracking cloud-bottom/2 made the sun drift
   against the clouds as the viewport height changed: it sank out of the scalloped underside
   on short screens and rose clear off the top on tall narrow ones. Every other term here is
   already in vw, so a vw offset keeps the sun-to-cloud relationship fixed at every size. */
.sun { left: 50%; top: calc(var(--cloud-bottom) - 17.5vw); width: 20vw; transform-origin: center; transform: translate3d(-50%, 0, 0) scale(.5); }
.cloud { top: calc(var(--cloud-bottom) - 34.47vw); width: 62vw; }
.cloud-l { left: -8vw; z-index: 2; }
.cloud-r { right: -12vw; width: 70vw; z-index: 1; top: calc(var(--cloud-bottom) + 32px - 38.92vw); }
.rain { position: absolute; left: 0; right: 0; top: calc(var(--cloud-bottom) - 10px); height: 58vh; }
.rain img { width: 20px; top: 0; animation: fall var(--d, 2s) linear var(--delay, 0s) infinite; }
@keyframes fall { from { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .9; } 76% { opacity: .9; } to { transform: translate3d(0, 58vh, 0); opacity: 0; } }
@media (max-width: 720px) {
  :root { --lift: 0px; }
  .intro { --intro: 560px; }
  .intro .hero { padding-top: clamp(96px, 20vh, 190px); padding-bottom: 14px; }
  /* The mark shares a row with the buttons: the grid gives it whatever width is left over,
     so it lands correctly on any phone instead of being anchored to one phone's pixels. */
  .intro .hero { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .intro .hero > .eyebrow, .intro .hero > h1, .intro .hero > .lede { grid-column: 1 / -1; }
  .intro .actions { grid-column: 1; grid-row: auto; flex-direction: column; align-items: flex-start; align-self: center; }
  .intro .amp-stage { grid-column: 2; grid-row: auto; align-self: center; justify-self: stretch;
    min-height: 0; height: clamp(112px, 17vh, 200px); margin: 0; margin-right: calc(0px - var(--gutter)); }
  /* Sky anchored in vw so the cloud line and the sun scale together. A fixed cloud line with a
     vw-sized sun is what let the sun poke out below the clouds on wider phones. */
  .sky, .sky-back { --cloud-line: clamp(130px, 24vh, 270px); }
  .cloud { width: 112vw; top: calc(var(--cloud-line) - 62.27vw); }
  .cloud-r { width: 124vw; right: -12vw; top: calc(var(--cloud-line) - 6px - 68.94vw); }
  .sun { left: 50%; top: calc(var(--cloud-line) - 40vw); width: 54vw; }
  .rain { top: calc(var(--cloud-line) - 80px); height: 54vh; }
  .rays { left: 50%; top: 104px; width: 190vw; }
  .rain img { width: 13px; }
  .nav { padding: 8px 8px 8px 14px; gap: 8px; }
  .navbar { padding: 8px 10px 0; }
  .wordmark { font-size: 18px; letter-spacing: -.02em; }
  .nav .btn-sm { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}
@media (max-height: 600px) {
  .intro { height: auto; }
  .intro .hero { position: static; min-height: 0; transform: none !important; padding-top: 32px; }
  .sky, .sky-back { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { height: auto; }
  .intro .hero { position: relative; min-height: 88vh; transform: none !important; will-change: auto; }
  .sky, .sky-back { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .intro .hero { padding-top: 32px; padding-bottom: 60px; }
  .intro .amp-stage { height: auto; margin-top: 24px; min-height: 320px; }
}

/* Focus: visible for keyboard users, invisible to mouse users. */
:focus-visible { outline: 3px solid var(--grass-deep); outline-offset: 3px; border-radius: 4px; }
.send-card :focus-visible { outline-color: #fff; }
.footer :focus-visible { outline-color: var(--cream); }

/* Minimum 24px hit area (WCAG 2.2 target size) without changing how anything looks. */
.nav nav a, .footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; min-width: 24px; }
.small a, .footer p a { display: inline-block; min-height: 24px; }