/* Picture Party Brands: /brands (the application) and /brands/register (the
   account page an approved applicant opens from their email).

   The same world as the ambassador go page (pictureparty-affiliate, pages/go
   and its DESIGN.md): a light party wall, white-bordered prints tossed at
   mixed angles, Comfortaa headlines, Funnel Sans text, navy ink, Field Blue
   pills, a flat violet panel. Being accepted is an honor, so these pages add
   one material: heavy white stationery. The program arrives as an invitation
   card on its open envelope, the application is the reply card, and the
   register page is the acceptance letter.

   ⚠ LIGHT ONLY: no dark grounds. Navy is ink.
   ⚠ Text on color is measured:
       white on --blue    #0A5FCB  6.0:1
       white on --violet  #6A45F0  5.6:1
       #F0ECFF on violet           4.9:1 (the application's lede)
       navy  on --magenta #E94DFF  5.7:1   never white text on magenta (3:1)
   The logo blue (--blue-brand, 4.0:1 with white) never carries text.
   ⚠ Every word on these pages is the boss's. Restyle, never reword. */
:root {
  --font-display:'Comfortaa', 'Funnel Sans', system-ui, sans-serif;
  --font-text:'Funnel Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --blue:#0A5FCB; --blue-hover:#0853B3; --blue-brand:#067BFD; --blue-tint:#EEF3FC;
  --violet:#6A45F0; --violet-ink:#F0ECFF; --magenta:#E94DFF; --navy:#111A36; --navy-2:#203B71;
  --lavender:#F4EEFF; --bg:#FFFFFF; --bg-2:#F5F7FC;
  --fg:#111A36; --fg-soft:#475277; --fg-dim:#5E6889;
  --muted:var(--fg-dim);          /* the referral note's color, set from the page script */
  --line:rgba(17,26,54,.12); --field-line:#848DA8;   /* 3.3:1 on white: a control edge needs 3:1 */
  --error:#C0282E; --ok:#11794A;
  --panel-inset:clamp(10px,1.6vw,24px); --panel-r:clamp(28px,3.2vw,44px);
  --ease:cubic-bezier(.16,1,.3,1);
}

* { box-sizing:border-box; }
/* overflow-x on html too, so body's own clip is not handed to the viewport and
   body contains the prints that bleed past the right edge. The root color is
   the aura's top edge: what a phone paints behind its clock continues it. */
html { overflow-x:clip; background-color:var(--lavender); scroll-behavior:smooth; scrollbar-color:#C4CCDF transparent; text-size-adjust:100%; }
/* flow-root keeps the nav's top margin inside body (a collapsed margin let the
   root color show above the gradient as a seam). The aura is the go page's: a
   flat lavender band under the clock, a pink and a sky-blue light behind the
   hero, white by 640px. */
body { display:flow-root; margin:0; color:var(--fg-soft); font-family:var(--font-text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  background:
    linear-gradient(180deg, #F4EEFF 0, #F4EEFF 48px, rgba(244,238,255,0) 300px),
    radial-gradient(720px 520px at 90% 180px, rgba(233,77,255,.14), transparent 70%),
    radial-gradient(760px 560px at 0% 600px, rgba(6,123,253,.10), transparent 70%),
    linear-gradient(180deg, #F4EEFF 0, var(--bg) 640px),
    #F4EEFF;
  background-repeat:no-repeat; }
img { max-width:100%; }
a { color:var(--blue); }
::selection { background:rgba(233,77,255,.28); color:inherit; }
:focus-visible { outline:2.5px solid var(--blue); outline-offset:3px; border-radius:8px; }
.violet :focus-visible { outline-color:#fff; }
.card :focus-visible { outline-color:var(--blue); }
h1, h2, h3 { margin:0; color:var(--fg); font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; text-wrap:balance; }
p { margin:0 0 1em; text-wrap:pretty; }
.wrap { max-width:1200px; margin:0 auto; padding:0 max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left)); }
@media (max-width:560px) { .wrap { padding:0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); } }
[id] { scroll-margin-top:24px; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; }

/* ── Buttons: one blue pill, a soft pill, an outline pill ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px;
  border:0; border-radius:999px; cursor:pointer; text-decoration:none; font:600 .98rem/1.1 var(--font-text);
  color:#fff; background:var(--blue); transition:translate .2s var(--ease), background-color .2s ease; }
.btn:hover { background:var(--blue-hover); color:#fff; translate:0 -1px; }
.btn:active { translate:0 1px; }
.btn:disabled { background:#9AAAC8; cursor:not-allowed; translate:none; }
.btn-sm { min-height:44px; padding:0 20px; font-size:.92rem; }
.btn-hero { min-height:54px; padding:0 32px; font-size:1.05rem; }
.btn-block { width:100%; }
.btn-soft { background:var(--blue-tint); color:var(--blue); }
.btn-soft:hover { background:#E1EAFB; color:var(--blue-hover); }
.btn-line { background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); }
.btn-line:hover { background:var(--blue-tint); color:var(--blue); }
/* The CTA's arrow leans toward where it goes on hover. */
.btn-arrow { flex:none; width:16px; height:16px; margin-right:-4px; transition:translate .25s var(--ease); }
.btn:hover .btn-arrow { translate:3px 0; }
.spinner { display:inline-block; width:16px; height:16px; margin-right:2px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite; vertical-align:-3px; }
@keyframes spin { to { rotate:1turn; } }

/* ── Nav: the print store's floating white pill ── */
.nav-card { position:relative; z-index:20; max-width:1232px; margin:calc(16px + env(safe-area-inset-top, 0px)) auto 0;
  padding:0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; padding:12px 12px 12px 28px;
  background:#fff; border-radius:999px; box-shadow:0 1px 1px rgba(0,0,0,.03), 0 14px 26px -12px rgba(0,0,0,.16); }
.brand img { display:block; height:32px; width:auto; }
@media (max-width:560px) {
  .nav-card { margin-top:calc(10px + env(safe-area-inset-top, 0px));
    padding:0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); }
  .nav-inner { min-height:60px; padding:8px 8px 8px 20px; }
  .brand img { height:27px; }
  .nav-inner .btn-sm { padding:0 14px; font-size:.86rem; }
}

/* ── Prints: a photo in a white border, as the print store shows them ── */
.print { display:block; background:#fff; padding:clamp(6px,.7vw,10px); border-radius:6px;
  outline:1px solid rgba(17,26,54,.05); outline-offset:-1px;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.14); }
.print > img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:3px;
  outline:1px solid rgba(0,0,0,.07); outline-offset:-1px; }

/* ── Stationery: heavy white card edged with an engraved Field Blue double
   rule. The invitation, the details of the program, the reply card and the
   acceptance letter are all this one object. ── */
.card { position:relative; background:#fff; border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 34px 70px rgba(0,0,0,.18); }
.card::before, .card::after { content:""; position:absolute; pointer-events:none; }
.card::before { inset:16px; border:1.5px solid var(--blue); border-radius:4px; }
.card::after { inset:21px; border:1px solid rgba(10,95,203,.35); border-radius:2px; }
@media (max-width:560px) { .card::before { inset:10px; } .card::after { inset:14px; } }
/* The crest: the logo alone heading a card (the register letter adds a short
   magenta rule). The program's name signs the invitation instead: .sender. */
.crest { display:flex; flex-direction:column; align-items:center; gap:12px; margin:0 0 28px; }
.crest img { display:block; height:30px; width:auto; }
.crest-rule { display:block; width:46px; height:2px; background:var(--magenta); }
.crest--quiet { margin-bottom:22px; }
/* The sender line: the program signs its invitation, as written. */
.sender { margin:30px 0 0; font:500 1.05rem/1.3 var(--font-display); letter-spacing:-.01em; color:var(--navy); }
.sender + .nasdaq { margin-top:6px; }

/* The envelope: white, its flap lined in violet with the logo's turned
   squares printed small, the way a good liner carries the house pattern. */
.envelope { position:absolute; aspect-ratio:1.5; background:#fff; border-radius:8px; overflow:hidden; pointer-events:none;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 24px 48px rgba(0,0,0,.16); }
.envelope::before { content:""; position:absolute; inset:0 0 auto 0; height:58%; clip-path:polygon(0 0, 100% 0, 50% 100%);
  background-color:var(--violet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect x='10' y='10' width='8' height='8' rx='1.5' fill='%23fff' fill-opacity='.18' transform='rotate(45 14 14)'/%3E%3C/svg%3E");
  background-size:28px 28px; }
.envelope--blue::before { background-color:var(--blue); }

/* The seal: the logo's own pinwheel in a white disc with an engraved Field
   Blue double ring, pressed onto a sent reply and onto an accepted account.
   The mark is the left 132x127px of img/logo.webp (752x141), cropped by its box. */
.seal { position:relative; display:grid; place-items:center; width:96px; height:96px; margin:0 auto 18px; border-radius:50%;
  background:#fff; border:2px solid var(--blue); outline:1px solid rgba(10,95,203,.35); outline-offset:-9px;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 14px 28px rgba(0,0,0,.16); }
.seal-mark { display:block; width:50px; height:48px; overflow:hidden; }
.seal-mark img { display:block; height:53.3px; width:auto; max-width:none; }

/* ── Hero: the invitation on its envelope, on the party wall ── */
/* clip-path, not overflow-x:clip: iOS Safari clipped GPU-animated prints on
   both axes with overflow-x:clip. The inset trims the sides only. */
.hero { position:relative; z-index:2; isolation:isolate; clip-path:inset(-200px 0); padding:56px 0 128px; }
.suite { position:relative; width:min(680px, calc(100% - 48px)); margin:0 auto; }
.suite .envelope { z-index:1; width:84%; right:-30%; top:7%; rotate:6deg; }
.card--invite .crest { margin-bottom:26px; }
.card--invite { z-index:3; padding:66px 64px 54px; text-align:center; rotate:-1.8deg; }
.card--invite h1 { font-weight:400; font-size:clamp(2.3rem,4.4vw,3.5rem); line-height:1.04; letter-spacing:-.025em; margin:0 0 18px; }
.card--invite h1 .em { color:var(--violet); white-space:nowrap; }   /* "Side-Gig" never splits at its hyphen */
.card--invite .tagline { margin:0 0 14px; color:var(--blue); font:600 clamp(1.12rem,1.8vw,1.38rem)/1.3 var(--font-display); letter-spacing:-.01em; }
.card--invite .lede { max-width:31rem; margin:0 auto 30px; font-size:1.05rem; line-height:1.7; }
.nasdaq { margin:20px 0 0; font-size:.85rem; letter-spacing:.01em; color:var(--fg-dim); font-variant-numeric:tabular-nums; }
.nasdaq strong { color:var(--fg); font-weight:600; letter-spacing:.02em; }
/* The wall around it: tossed prints, two per side on wide screens. */
.wall { position:absolute; inset:0; left:50%; width:min(100%,1720px); translate:-50% 0; z-index:0; pointer-events:none; }
.wall .print { position:absolute; width:var(--s); rotate:var(--r); }
.w1 { --s:clamp(150px,13vw,200px); --r:-8deg; --d:120ms; top:8%;  left:4%; }
.w2 { --s:clamp(120px,10vw,160px); --r:7deg;  --d:300ms; top:52%; left:12%; z-index:1; }
.w3 { --s:clamp(140px,12vw,190px); --r:6deg;  --d:200ms; top:3%;  right:2%; }   /* tucked behind the envelope's corner */
.w4 { --s:clamp(120px,10vw,160px); --r:-6deg; --d:420ms; bottom:6%; right:11%; }
@media (max-width:1099.98px) {
  .suite .envelope { right:-14%; top:-3%; width:70%; }
  .wall .print { --s:clamp(92px,14vw,128px); }
  .w1 { top:12px; left:-22px; } .w3 { top:auto; bottom:28px; right:-20px; }
  .w2, .w4 { display:none; }
}
@media (max-width:560px) {
  /* The card fills the width, so the envelope's liner and a print show in the
     band above it and another print below it. */
  .hero { padding:76px 0 96px; }
  .suite { width:calc(100% - 28px); }
  .suite .envelope { right:-18%; top:-56px; width:84%; }
  .card--invite { padding:48px 26px 38px; rotate:-1.2deg; }
  .card--invite .lede { font-size:1rem; }
  .card--invite .btn-hero { width:100%; }
  .wall .print { --s:96px; }
  .w1 { top:-6px; left:-30px; } .w3 { bottom:-30px; right:-24px; }
}

/* ── Sections ── */
.sec { padding:112px 0; }
.sec h2 { font-size:clamp(2.1rem,4vw,3.25rem); line-height:1.06; letter-spacing:-.025em; margin:0 0 32px; }
@media (max-width:700px) { .sec { padding:76px 0; } }
.split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:80px; align-items:center; }
@media (max-width:900px) { .split { grid-template-columns:1fr; gap:48px; } }

/* The logo's own shape as a bullet: a small square, turned. */
.sq { display:inline-block; flex:none; width:10px; height:10px; border-radius:2px; rotate:45deg; translate:0 -1px; }
.sq-blue { background:var(--blue-brand); } .sq-vio { background:var(--violet); } .sq-mag { background:var(--magenta); }
.rows { list-style:none; margin:0; padding:0; display:grid; column-gap:56px; }
.rows li { display:flex; gap:16px; align-items:baseline; padding:20px 0; border-top:1px solid var(--line); }
.rows h3 { font-size:1.2rem; line-height:1.3; letter-spacing:-.01em; font-weight:600; margin:0 0 6px; }
.rows p { margin:0; font-size:1rem; line-height:1.6; }
.rows--2 { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; }
@media (max-width:700px) { .rows--2 { grid-template-columns:1fr; } }
.reveal-on .feat { opacity:0; translate:-14px 0;
  transition:opacity .6s var(--ease) var(--rd,0ms), translate .6s var(--ease) var(--rd,0ms); }
.reveal-on .feat.in { opacity:1; translate:0 0; }

/* How it fits around your life: the phones, then the six points in two columns. */
.life-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:center; }
/* devices-home.webp has its own white ground and a baked floor shadow in its
   bottom 12%, cropped off by the frame; --dev drifts it as it crosses the screen. */
.feedshot { width:100%; max-width:540px; aspect-ratio:1113/1170; overflow:hidden; justify-self:start; }
.hero-devices { display:block; width:100%; height:auto; translate:0 calc(var(--dev, 0) * 28px); rotate:calc(var(--dev, 0) * -2deg); }
@media (max-width:1099.98px) {
  .life-grid { grid-template-columns:1fr; gap:40px; }
  .feedshot { order:2; justify-self:center; max-width:440px; }
}
@media (max-width:560px) { .feedshot { max-width:300px; } }

/* What Picture Party is: the one sentence on a note card beside a small pile of
   prints from different occasions, then the three promises as one ribbon. The
   aura fades through this section, so it has no ground of its own. */
.occasions { padding-top:40px; padding-bottom:40px; overflow-x:clip; }   /* the videos section brings its own top padding */
.occ-split { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:72px; align-items:center; }
.card--note { padding:58px 56px; rotate:1.2deg; }
.card--note .statement { margin:0; font-weight:400; font-size:clamp(1.6rem,2.6vw,2.35rem); line-height:1.28; letter-spacing:-.02em; text-wrap:pretty; }
.hl { font-weight:600; text-decoration:underline; text-decoration-color:var(--magenta); text-decoration-thickness:.12em;
  text-underline-offset:.22em; text-decoration-skip-ink:none; }
.occ-pile { position:relative; width:100%; max-width:440px; aspect-ratio:1.05; justify-self:center; }
.occ-pile .print { position:absolute; width:var(--w); rotate:var(--r); }
.o1 { --w:52%; --r:-8deg; top:3%;  left:0;   z-index:1; }
.o2 { --w:44%; --r:6deg;  top:0;   right:3%; z-index:2; }
.o3 { --w:47%; --r:3deg;  bottom:0; left:15%; z-index:3; }
.o4 { --w:39%; --r:-5deg; bottom:9%; right:0; z-index:2; }
.o2, .o3 { box-shadow:0 3px 6px rgba(0,0,0,.08), 0 22px 40px rgba(0,0,0,.18); }
.o1 { box-shadow:0 1px 3px rgba(0,0,0,.05), 0 10px 22px rgba(0,0,0,.11); }
@media (max-width:900px) {
  .occ-split { grid-template-columns:1fr; gap:48px; }
  .occ-pile { max-width:min(340px,88%); }
}
@media (max-width:560px) { .card--note { padding:42px 28px; rotate:.8deg; } }
/* The promises: one centered line leading into the application, the logo's
   turned squares between them; stacked under 1100px, where one line no longer fits. */
.promises { padding:8px 0 64px; text-align:center; }
.promise-line { list-style:none; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:12px 0; }
.promise-line li { display:flex; flex-direction:column; align-items:center; }
.promise-line h3, .promise-line .pl { display:flex; align-items:center; font-size:clamp(1.15rem,1.6vw,1.3rem); line-height:1.25; font-weight:500; letter-spacing:-.015em; }
.promise-line li + li h3::before, .promise-line li + li .pl::before { content:""; flex:none; width:10px; height:10px; margin:0 24px; border-radius:2px; rotate:45deg; background:var(--magenta); }
.promise-line li:nth-child(3) h3::before { background:var(--blue-brand); }
.promise-line p { margin:6px 0 0; font-size:.92rem; color:var(--fg-soft); }
.promise-line li:nth-child(3) p { padding-left:58px; }   /* centered under its words, past the square */
@media (max-width:1099.98px) {
  .promise-line { flex-direction:column; align-items:center; gap:0; }
  .promise-line li + li h3::before { display:none; }
  .promise-line li + li::before { content:""; width:10px; height:10px; margin:18px 0; border-radius:2px; rotate:45deg; background:var(--magenta); }
  .promise-line li:nth-child(3)::before { background:var(--blue-brand); }
  .promise-line li:nth-child(3) p { padding-left:0; }
}
@media (max-width:700px) { .promises { padding:0 0 48px; } }
/* ── Videos: portrait cards turned on color blades; neither blade repeats its
   card's own color. ── */
.vidsec { overflow:hidden; }
.vidsec .btn-line { margin-top:4px; }
.vids { display:flex; gap:44px; justify-content:center; padding-block:28px 40px; }
.vid { position:relative; display:block; width:190px; aspect-ratio:9/16; padding:0; border:0; cursor:pointer;
  background:none; transition:rotate .4s var(--ease), translate .4s var(--ease); }
.vid::before { content:""; position:absolute; inset:0; border-radius:18px; rotate:11deg; background:var(--c); }
.vid img { position:relative; display:block; width:100%; height:100%; object-fit:cover; border-radius:18px;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 18px 36px rgba(0,0,0,.18); }
.vid:nth-child(1) { --c:var(--violet); rotate:-5deg; }
.vid:nth-child(2) { --c:var(--blue-brand); rotate:4deg; }
.vid:hover, .vid:focus-visible { rotate:0deg; translate:0 -4px; }
.vid .play { position:absolute; z-index:2; left:50%; bottom:-27px; translate:-50% 0; width:52px; height:52px; border-radius:50%;
  background:var(--blue); border:3px solid #fff; display:grid; place-items:center; }
.vid .play::before { content:""; margin-left:4px; border-style:solid; border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent #fff; }
@media (min-width:1100px) { .vid { width:clamp(190px,15vw,240px); } }
@media (max-width:900px) { .vidsec .split { text-align:center; } .vids { gap:28px; } .vid { width:min(150px,38vw); } }

/* ── The application: the reply card on the violet panel. Panels, not
   stripes: inset from the screen edge, rounded, and on wide screens the nav
   pill's 1200px width. ── */
.field { position:relative; padding:112px 8px; overflow:hidden; border-radius:var(--panel-r);
  margin-inline:max(var(--panel-inset), env(safe-area-inset-left), (100% - 1200px) / 2)
                max(var(--panel-inset), env(safe-area-inset-right), (100% - 1200px) / 2); }
.violet { background:var(--violet); }
.violet h2 { color:#fff; }
.signup { padding:148px 8px 120px; text-align:center; }
.signup h2 { font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.04; letter-spacing:-.025em; margin:0 0 16px; }
.signup-lede { max-width:36rem; margin:0 auto 72px; color:var(--violet-ink); font-size:1.08rem; line-height:1.65; }
/* The logo's four squares dip in from the panel's straight top and bottom
   edges, clear of its rounded corners. */
.corner { position:absolute; width:150px; aspect-ratio:1; border-radius:28px; pointer-events:none; }
.corner:nth-of-type(1) { background:var(--blue-brand); left:4%;  top:0;    translate:0 -38%; rotate:-14deg; }
.corner:nth-of-type(2) { background:var(--magenta);    right:5%; top:0;    translate:0 -42%; rotate:12deg; }
.corner:nth-of-type(3) { background:var(--navy-2);     right:6%; bottom:0; translate:0 40%;  rotate:-10deg; }
.corner:nth-of-type(4) { background:var(--blue-brand); left:11%; bottom:0; translate:0 42%;  rotate:16deg; }
@media (max-width:1099.98px) { .corner:nth-of-type(1) { left:7%; } .corner:nth-of-type(2) { right:9%; } }
@media (max-width:700px) {
  .field { padding:80px 8px; }
  .signup { padding:96px 8px; }
  .corner { width:96px; border-radius:20px; }
  .corner:nth-of-type(1) { left:12%; } .corner:nth-of-type(2) { right:14%; }
  .corner:nth-of-type(3) { right:12%; } .corner:nth-of-type(4) { left:15%; }
}
@media (max-width:560px) { .field .wrap { padding-inline:8px; } .signup-lede { margin-bottom:44px; } }
/* The reply card, with its own envelope behind it. */
.reply { position:relative; max-width:600px; margin:0 auto; }
.reply .envelope { z-index:0; width:72%; left:-24%; top:-6px; rotate:-7deg; }
.card--reply { z-index:2; padding:52px 50px 44px; text-align:left; color:var(--fg-soft); }
@media (max-width:900px) { .reply .envelope { left:-8%; top:-22px; width:64%; } }
@media (max-width:560px) { .reply .envelope { display:none; } .card--reply { padding:38px 26px 32px; } }

/* ── Form ── */
.step-title { font-size:1.3rem; line-height:1.25; font-weight:600; margin:0 0 22px; }
.fld { margin-bottom:18px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.two .fld { min-width:0; }
@media (max-width:400px) { .two { grid-template-columns:1fr; gap:0; } }
.form-label { display:block; margin:0 0 7px; color:var(--fg); font-size:.92rem; font-weight:600; }
.opt { font-weight:400; color:var(--fg-dim); }
.form-control, .form-select { width:100%; min-height:48px; padding:12px 14px; border:1.5px solid var(--field-line);
  border-radius:10px; background:#fff; color:var(--fg); caret-color:var(--blue); font:400 1rem/1.4 var(--font-text);
  transition:border-color .15s ease, box-shadow .15s ease; }
.form-select { padding:10px 8px; cursor:pointer; }
.form-control::placeholder { color:var(--fg-dim); }
.form-control:hover:not(:focus):not([readonly]), .form-select:hover:not(:focus) { border-color:var(--fg-dim); }
.form-control:focus, .form-select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(10,95,203,.18); }
.ref-note { min-height:1.2em; margin-top:7px; font-size:.85rem; line-height:1.45; color:var(--muted); }
.alert-pp { display:none; margin-bottom:16px; padding:14px 16px; border-radius:12px; font-size:.95rem; }
.alert-pp.show { display:block; }
.alert-pp.alert-error { background:#FCECEC; color:var(--error); }
.alert-pp.alert-ok { background:#E8F6EF; color:var(--ok); }
.alert-pp .lnk { color:var(--error); font-weight:600; }
.btn-submit { margin-top:6px; }
.privacy-note { margin:20px 0 0; font-size:.85rem; line-height:1.55; color:var(--fg-dim); }
/* Sent: the seal is pressed on and the thanks reads like a reply received. */
.success { text-align:center; padding:6px 0 4px; }
/* Sent: the instructions above the card are done with, like the form's own
   labels, so the thanks stands alone on the panel. */
.signup:has(.success.is-shown) h2, .signup:has(.success.is-shown) .signup-lede { display:none; }
.success .step-title { margin-bottom:12px; }
.success-text { max-width:30rem; margin:0 auto; font-size:.98rem; line-height:1.65; color:var(--fg-soft); }

/* "Already signed in": built by the page script with inline dark styles; light here. */
#ppLoggedInBar { background:var(--bg-2) !important; color:var(--fg) !important; font-family:var(--font-text) !important;
  border-bottom:1px solid var(--line); margin-top:10px; }
#ppLoggedInBar a { background:var(--blue) !important; }
#ppLoggedInBar button { color:var(--fg) !important; }

/* ?test=1 only: the dry-run pill. Navy on magenta, 5.7:1. */
.test-badge { position:fixed; z-index:2000; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); translate:-50% 0;
  padding:8px 16px; border-radius:999px; background:var(--magenta); color:var(--navy); font:700 .85rem/1.2 var(--font-text);
  box-shadow:0 2px 4px rgba(0,0,0,.08), 0 10px 22px rgba(0,0,0,.16); pointer-events:none; white-space:nowrap; }

/* ── Footer ── */
.foot { padding:44px 0 calc(40px + env(safe-area-inset-bottom, 0px)); background:var(--bg); color:var(--fg-dim); font-size:.9rem; }
.foot .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px 32px; flex-wrap:wrap; }
.foot img { display:block; height:28px; width:auto; }
.foot a { color:var(--fg); text-decoration:none; display:inline-block; padding:10px 0; }
.foot a:hover { color:var(--blue); }
/* Each item carries its dot in the gap before it; the inset clip trims the dot
   from whichever item starts a line (negative insets keep the focus rings). */
.foot-line { display:flex; flex-wrap:wrap; align-items:center; margin-left:-1.4em; clip-path:inset(-10px -10px -10px 1.4em); }
.foot-line > * { position:relative; margin-left:1.4em; }
.foot-line > *::before { content:"\00B7"; position:absolute; left:-.95em; top:50%; translate:0 -50%; color:var(--fg-dim); }
@media (max-width:560px) {
  .foot-line > span { order:1; }
  .foot-line::after { content:""; order:2; flex-basis:100%; height:0; }
  .foot-line > a { order:3; }
}

/* ── Video dialog: Bootstrap's JS, this stylesheet's CSS ── */
.modal { display:none; position:fixed; inset:0; z-index:1055; overflow-y:auto; outline:0; }
.modal-backdrop { position:fixed; inset:0; z-index:1050; background:rgba(17,26,54,.72); }
.fade { transition:opacity .15s linear; }
.fade:not(.show) { opacity:0; }
.modal-dialog { display:flex; align-items:center; justify-content:center; min-height:100%; padding:24px; pointer-events:none; }
.modal-content { position:relative; pointer-events:auto; }
.vframe { width:min(400px,88vw); max-height:84vh; aspect-ratio:9/16; border-radius:20px; overflow:hidden; background:#000; }
.vframe iframe { display:block; width:100%; height:100%; border:0; }
.btn-close { display:block; position:relative; width:44px; height:44px; margin:0 0 10px auto; border:0; border-radius:50%;
  background:#fff; cursor:pointer; }
.btn-close::before, .btn-close::after { content:""; position:absolute; left:50%; top:50%; width:16px; height:2px;
  background:var(--navy); translate:-50% -50%; rotate:45deg; }
.btn-close::after { rotate:-45deg; }

/* ── The register page: the acceptance letter, on its envelope ── */
.letter-page { min-height:100vh; display:grid; place-items:center; padding:calc(48px + env(safe-area-inset-top, 0px)) 18px 64px; }
.letter { position:relative; z-index:1; width:min(520px, 100%); min-width:0; }
.letter-wall { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.letter-wall .print { position:absolute; width:var(--s); rotate:var(--r); }
.lw1 { --s:clamp(150px,12vw,200px); --r:-8deg; --d:500ms; top:10%; left:6%; }
.lw2 { --s:clamp(120px,9vw,160px);  --r:7deg;  --d:680ms; bottom:12%; left:13%; }
.lw3 { --s:clamp(140px,11vw,190px); --r:6deg;  --d:600ms; top:14%; right:7%; }
.lw4 { --s:clamp(120px,9vw,160px);  --r:-6deg; --d:760ms; bottom:9%; right:12%; }
@media (max-width:1099.98px) { .letter-wall { display:none; } }
.card--letter:has(#done.is-shown) { rotate:-1.2deg; }
.letter .envelope { z-index:0; width:78%; right:-26%; top:-36px; rotate:7deg; }
.card--letter { z-index:2; padding:52px 48px 44px; }
.card--letter h1 { font-size:1.75rem; line-height:1.2; font-weight:500; margin:0 0 10px; text-align:center; }
.card--letter .sub { margin:0 0 24px; text-align:center; font-size:.97rem; line-height:1.6; color:var(--fg-soft); }
.card--letter .sub--small { margin:14px 0 0; font-size:.85rem; color:var(--fg-dim); }
.known { margin:0 0 22px; padding:14px 16px; border-radius:12px; background:var(--blue-tint); font-size:.92rem; line-height:1.45; }
.known .who { font-weight:600; color:var(--navy); }
.known .em { color:var(--fg-dim); font-size:.86rem; }
.pw-wrap { position:relative; }
.pw-wrap .form-control { padding-right:4.4rem; }
.pw-toggle { position:absolute; right:6px; top:50%; translate:0 -50%; min-height:36px; padding:0 10px; border:0; border-radius:999px;
  background:none; color:var(--blue); font:600 .82rem/1 var(--font-text); cursor:pointer; }
.pw-toggle:hover { background:var(--blue-tint); }
.hint { margin-top:7px; font-size:.82rem; color:var(--fg-dim); }
.hint.bad { color:var(--error); }
.hint.good { color:var(--ok); }
.agree { display:flex; gap:10px; align-items:flex-start; margin:0 0 20px; font-size:.88rem; line-height:1.5; color:var(--fg-soft); }
.agree input { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--blue); cursor:pointer; }
.btn-second { width:100%; margin-top:12px; }
.link-box { position:relative; margin:22px 0 18px; padding:16px 18px;   /* room above for the seal */ border-radius:12px; background:var(--blue-tint); text-align:left; }
.link-box .seal { position:absolute; right:-16px; top:-42px; width:78px; height:78px; margin:0; rotate:12deg; outline-offset:-8px; }
.link-box .seal-mark { width:41px; height:39px; }
.link-box .seal-mark img { height:43.5px; }
.link-box .btn-soft { background:#fff; }
.link-box .btn-soft:hover { background:#E1EAFB; }
/* Only the label row sits beside the seal; the link below gets the full width. */
.link-box .label { padding-right:64px; font:700 .7rem/1.2 var(--font-text); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); }
.link-box .url { margin:20px 0 12px; font:500 .9rem/1.45 ui-monospace, 'SF Mono', Menlo, monospace; color:var(--navy); overflow-wrap:anywhere; }   /* anywhere, not break-word: a long query string must never widen the card */
.copied { margin-top:8px; font-size:.82rem; color:var(--ok); }
@media (max-width:560px) {
  .letter .envelope { width:84%; right:-14%; top:-30px; }
  .card--letter { padding:44px 26px 34px; }
  .card--letter h1 { font-size:1.5rem; }
  /* Smaller and lower, so the seal never reaches the line above the box. */
  .link-box .seal { width:64px; height:64px; top:-22px; right:-12px; outline-offset:-7px; }
  .link-box .seal-mark { width:34px; height:32px; }
  .link-box .seal-mark img { height:36px; }
}

/* ── The badge look: Picture Party for Business (business.html) ─────────
   An example for Darin, reached as /brands/?look=badge. The Brands world as
   credentials instead of stationery: two event passes hang on their lanyards
   beside the words, and every card is laminated, a Field Blue band across its
   top and a magenta strip at its foot. */
.credentials { display:none; }
/* How a badge really hangs: the lanyard is a V of two straps meeting at a
   crimp, then a swivel and a J-hook. The hook comes down over the strip of card
   above the punched slot and bends into the slot's top edge, which is what
   carries the badge, so the open slot shows below it. The badge hangs nearly
   plumb (--tilt) while the lanyard runs off at its own angle (--sw), pivoting
   at the hook. The hook drawing is 40x76: the card's top edge is at y=50, the
   slot at 64-76, the bend at about y=66. */
.lanyard { position:absolute; top:0; display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; rotate:var(--tilt, 0deg); }
.hanger { position:relative; z-index:2; width:40px; height:calc(var(--strap) + 76px); margin-bottom:-26px; transform-origin:50% calc(100% - 10px); rotate:var(--sw, 0deg); }
.hook { position:absolute; left:0; bottom:0; display:block; }
.strap { position:absolute; bottom:72px; left:50%; width:18px; height:calc(var(--strap) + 4px); margin-left:-9px; transform-origin:50% 100%;
  background-color:var(--strap-c); box-shadow:inset 2px 0 0 rgba(255,255,255,.14), inset -2px 0 0 rgba(0,0,0,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E"); }
.strap--l { rotate:-5deg; translate:-4px 0; }
.strap--r { rotate:5deg; translate:4px 0; filter:brightness(.88); }
.pass { position:relative; z-index:1; width:var(--pw, 300px); background:#fff; border-radius:20px; overflow:hidden; text-align:center;
  box-shadow:0 0 0 1px rgba(17,26,54,.08), 0 2px 4px rgba(0,0,0,.06), 0 34px 60px rgba(0,0,0,.22); }
.pass-band { position:relative; display:grid; place-items:center; height:118px; background:var(--band, var(--blue)); }
.pass-band::before { content:""; position:absolute; top:14px; left:50%; translate:-50% 0; width:58px; height:12px; border-radius:999px; background:#C9C3DE;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.32), inset 0 -1px 0 rgba(255,255,255,.35); }   /* the punched slot, a hole: shadowed under its top edge */
.pass-band img { display:block; height:30px; width:auto; margin-top:22px; }
.pass-body { padding:22px 24px 24px; }
.pass-name { margin:0; padding-left:.32em; font:700 .74rem/1 var(--font-text); letter-spacing:.32em; text-transform:uppercase; color:var(--navy); }
.pass-photo { margin:18px 0; aspect-ratio:1; border-radius:10px; overflow:hidden; }
.pass-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.pass-marks { display:flex; justify-content:center; gap:14px; }
.pass-marks i { width:14px; height:14px; border-radius:3px; rotate:45deg; }
.pass-marks i:nth-child(1) { background:var(--blue-brand); } .pass-marks i:nth-child(2) { background:var(--magenta); }
.pass-marks i:nth-child(3) { background:var(--violet); }      .pass-marks i:nth-child(4) { background:var(--navy-2); }
/* The role ribbon at the foot of an event pass. Navy on magenta 5.7:1, white on Field Blue 6.0:1. */
.pass-role { margin:0; padding:9px 0 10px; font:700 .74rem/1 var(--font-text); letter-spacing:.28em; padding-left:.28em; text-transform:uppercase; }
.pass-role--magenta { background:var(--magenta); color:var(--navy); }
.pass-role--blue { background:var(--blue); color:#fff; }
/* The business badge: a headshot, the holder, their company, and the QR that
   joins the event's Picture Party. */
.business .pass-band { height:96px; }
.business .pass-band img { margin-top:18px; }
.business .pass-body { padding:18px 22px 20px; }
.business .pass-name { letter-spacing:.2em; padding-left:.2em; white-space:nowrap; }   /* the event name on one line */
@media (max-width:900px) { .business .pass-name { font-size:.64rem; letter-spacing:.12em; padding-left:.12em; } }
.business .pass-photo { width:56%; margin:14px auto 12px; }
.pass-holder { margin:0; font:600 1.3rem/1.2 var(--font-display); letter-spacing:-.01em; color:var(--navy); }
.pass-company { margin:3px 0 0; font:500 .9rem/1.3 var(--font-text); color:var(--fg-soft); }
.pass-join { display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); text-align:left; }
.pass-qr { position:relative; flex:none; width:30%; aspect-ratio:1; }
.pass-qr svg { display:block; width:100%; height:100%; }
.pass-join p { margin:0; font:400 .78rem/1.35 var(--font-text); color:var(--fg-soft); }
.pass-join strong { display:block; font:700 .86rem/1.25 var(--font-text); color:var(--navy); }

/* The hero: the passes on the left, the words on the right. The lanyards run
   up behind the nav, off the top of the screen. */
.look-badge .hero { padding-top:0; }
.look-badge .suite { width:min(1200px, calc(100% - 64px)); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; }
.look-badge .suite .envelope { display:none; }
/* The front lanyard is in the flow, so the column is exactly as tall as it
   (a headline can never slide under the pass); the back one hangs beside it. */
.look-badge .credentials { display:block; position:relative; }
.look-badge .lanyard--front { --tilt:-1.5deg; --sw:5deg; --strap:190px; --strap-c:var(--blue); position:relative; width:max-content; margin:-120px 0 0 8%; z-index:2; }
.look-badge .lanyard--back { --tilt:5deg; --sw:-7deg; --strap:150px; --strap-c:var(--magenta); --band:var(--violet); --pw:276px; left:47%; top:-120px; z-index:1; }
.look-badge .card--invite { padding:40px 0 32px; background:none; box-shadow:none; rotate:0deg; text-align:left; }
.look-badge .card--invite::before, .look-badge .card--invite::after, .look-badge .card--invite .crest { display:none; }
.look-badge .card--invite h1 { font-size:clamp(2.4rem,4.4vw,4rem); }
.look-badge .card--invite .lede { margin-left:0; max-width:34rem; }
.look-badge .card--invite .nasdaq { color:var(--fg-soft); }   /* on the aura, not a card: Dim Ink fell under 4.5:1 */
/* The passes carry the program's name; the line stays for screen readers. */
.look-badge .card--invite .sender { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.look-badge .card--invite .sender + .nasdaq { margin-top:20px; }
.look-badge .w1, .look-badge .w2 { display:none; }   /* the passes own the left side */
@media (max-width:1099.98px) {
  .look-badge .lanyard--front { --pw:260px; margin-left:2%; }
  .look-badge .lanyard--back { --pw:240px; left:44%; }
}
@media (max-width:900px) {
  .look-badge .suite { grid-template-columns:1fr; gap:8px; width:calc(100% - 40px); }
  .look-badge .lanyard--front { --pw:220px; --strap:150px; margin:-96px 0 28px calc(50% - 170px); }
  .look-badge .lanyard--back { --pw:200px; --strap:120px; left:calc(50% - 10px); top:-96px; }
  .look-badge .card--invite { padding-top:8px; text-align:center; }
  .look-badge .card--invite .lede { margin-inline:auto; }
  .look-badge .w3 { display:none; }
}
@media (max-width:560px) {
  .look-badge .lanyard--front { --pw:196px; --strap:120px; margin:-80px 0 24px calc(50% - 150px); }
  .look-badge .lanyard--back { --pw:178px; --strap:96px; left:calc(50% - 16px); top:-80px; }
  .look-badge .pass-band { height:96px; }
  .look-badge .pass-body { padding:18px 18px 20px; }
  .business .pass-band { height:74px; }
  .business .pass-band img { height:24px; margin-top:16px; }
  .business .pass-body { padding:14px 14px 16px; }
  .business .pass-photo { margin:10px auto 9px; }
  .pass-holder { font-size:1.05rem; }
  .pass-company { font-size:.78rem; }
  .pass-join { gap:9px; margin-top:11px; padding-top:11px; }
  .pass-join p { font-size:.68rem; }
  .pass-join strong { font-size:.74rem; }
  .look-badge .card--invite .btn-hero { width:100%; }
}

/* Every card laminated: band, white, foot strip; 20px corners like the passes. */
.look-badge .card { border-radius:20px; overflow:hidden; }
.look-badge .card::before { inset:0 0 auto 0; height:12px; border:0; border-radius:0; background:var(--blue); }
.look-badge .card::after { inset:auto 0 0 0; height:10px; border:0; border-radius:0; background:var(--magenta); }
.look-badge .card--note { rotate:-1deg; }
.look-badge .reply .envelope { display:none; }

/* The run of show: how it works, on a laminated card, four steps across. */
.run h2 { margin-bottom:36px; }
.card--run { padding:52px 44px 48px; rotate:.6deg; }
.run-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.run-list li { padding:0 26px; border-left:1px solid var(--line); }
.run-list li:first-child { padding-left:0; border-left:0; }
.run-no { display:block; margin-bottom:16px; font:400 2.6rem/1 var(--font-display); letter-spacing:-.03em; color:var(--violet); }
.run-list h3 { margin:0 0 8px; font-size:1.18rem; line-height:1.3; font-weight:600; }
.run-list p { margin:0; font-size:.98rem; line-height:1.6; }
@media (max-width:900px) {
  .run-list { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
  .run-list li:nth-child(3) { padding-left:0; border-left:0; }
}
@media (max-width:560px) {
  .card--run { padding:40px 24px 36px; rotate:0deg; }
  .run-list { grid-template-columns:1fr; row-gap:0; }
  .run-list li, .run-list li:nth-child(3) { padding:20px 0; border-left:0; border-top:1px solid var(--line); }
  .run-list li:first-child { padding-top:0; border-top:0; }
  .run-no { font-size:2.1rem; margin-bottom:10px; }
}
/* The top-right print would sit on the headline until the screen is wide enough. */
@media (max-width:1599.98px) { .business .w3 { display:none; } }
/* The business headline is a phrase, not a hyphenated word: it may wrap. */
.business .card--invite h1 .em { white-space:normal; }
/* Five event types: one line on wide screens, a centered wrapping line below
   1100px instead of the three-promise stack (five stacked rows ran a screen tall). */
/* Plain list text, not headings: color and face as the promise headings. */
.promise-line .pl { color:var(--fg); font-family:var(--font-display); }
.promise-line--five li:nth-child(n+2) .pl::before { background:var(--magenta); }
.promise-line--five li:nth-child(odd) .pl::before { background:var(--blue-brand); }
@media (max-width:1099.98px) {
  .promise-line--five { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px 0; }
  .promise-line--five li + li::before { display:none; }
  .promise-line--five li + li .pl::before { display:block; margin:0 16px; }
  .promise-line--five .pl { font-size:1.12rem; }
}

/* The enterprise inquiry: Constant Contact's own inline form, restyled to this
   page. Its stylesheet sets these with high specificity, hence the !important. */
.inquiry .card--reply { padding-top:44px; }
.inquiry .ctct-form-defaults, .inquiry .ctct-form-custom { padding:0 !important; background:none !important; box-shadow:none !important; font-family:var(--font-text) !important; }
.inquiry .ctct-form-header { margin:0 0 8px !important; font:600 1.3rem/1.25 var(--font-display) !important; color:var(--fg) !important; text-align:left !important; }
.inquiry .ctct-form-text { margin:0 0 20px !important; font:400 .98rem/1.6 var(--font-text) !important; color:var(--fg-soft) !important; text-align:left !important; }
.inquiry .ctct-form-label { margin:0 0 7px !important; font:600 .92rem/1.3 var(--font-text) !important; color:var(--fg) !important; }
.inquiry .ctct-form-element { min-height:48px !important; height:auto !important; padding:12px 14px !important; border:1.5px solid var(--field-line) !important;
  border-radius:10px !important; background:#fff !important; color:var(--fg) !important; font:400 1rem/1.4 var(--font-text) !important; box-shadow:none !important; }
.inquiry .ctct-form-element:hover { border-color:var(--fg-dim) !important; }
.inquiry .ctct-form-element:focus { outline:none !important; border-color:var(--blue) !important; box-shadow:0 0 0 4px rgba(10,95,203,.18) !important; }
.inquiry .ctct-form-button { width:100% !important; min-height:48px !important; margin-top:6px !important; border:0 !important; border-radius:999px !important;
  background:var(--blue) !important; color:#fff !important; font:600 .98rem/1.1 var(--font-text) !important; cursor:pointer; }
.inquiry .ctct-form-button:hover { background:var(--blue-hover) !important; }
.inquiry .ctct-form-footer, .inquiry .ctct-gdpr-text, .inquiry .ctct-form-footer a { font-size:.8rem !important; line-height:1.5 !important; color:var(--fg-dim) !important; text-align:left !important; }

/* ── Motion ─────────────────────────────────────────────────────────
   One authored moment: the invitation arrives. The envelope slides in, the
   card rises out of it and settles at its angle, then the prints are tossed
   onto the wall around it. Sent and accepted, the seal is pressed on. All of
   it is opt-in; the page is complete without it. */
@media (prefers-reduced-motion:no-preference) {
  .suite .envelope { animation:env-in .8s var(--ease) both; }
  .card--invite { animation:card-rise 1.05s var(--ease) 260ms both; }
  .wall .print { animation:toss .9s var(--ease) both; animation-delay:calc(var(--d,0ms) + 700ms); }
  .letter .envelope { animation:env-in .8s var(--ease) both; }
  .letter-wall .print { animation:toss .9s var(--ease) both; animation-delay:var(--d,0ms); }
  .card--letter { animation:card-rise .95s var(--ease) 200ms both; }
  .is-shown .seal { animation:press .6s var(--ease) both; }
  /* The badge look: the passes drop in on their lanyards and swing to rest;
     the words rise beside them. */
  .look-badge .lanyard { animation:badge-drop 1.9s cubic-bezier(.25,.8,.35,1) both; }
  .look-badge .lanyard--back { animation-delay:140ms; }
  .look-badge .card--invite { animation:words-rise .8s var(--ease) 380ms both; }

}
@keyframes env-in { from { opacity:0; translate:36px 18px; } }
@keyframes card-rise { from { opacity:0; translate:24% 4%; rotate:6deg; scale:.92; } }
@keyframes toss { from { opacity:0; translate:0 -64px; scale:1.14; rotate:calc(var(--r) - 16deg); } }
@keyframes badge-drop {
  0%   { opacity:0; translate:0 -160px; rotate:calc(var(--tilt, 0deg) - 14deg); }
  40%  { opacity:1; translate:0 0; rotate:calc(var(--tilt, 0deg) + 7deg); }
  62%  { rotate:calc(var(--tilt, 0deg) - 3.5deg); }
  80%  { rotate:calc(var(--tilt, 0deg) + 1.5deg); }
  100% { translate:0 0; rotate:var(--tilt, 0deg); }
}
@keyframes words-rise { from { opacity:0; translate:0 18px; } }
@keyframes press { from { opacity:0; scale:1.7; rotate:-14deg; } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion:no-preference) {
    .hero-devices { animation:devices-drift linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
    .occ-pile .print { animation:toss linear both; animation-timeline:view(); }
    .occ-pile .o1 { animation-range:entry 0% entry 70%; }
    .occ-pile .o2 { animation-range:entry 10% entry 80%; }
    .occ-pile .o3 { animation-range:entry 20% entry 90%; }
    .occ-pile .o4 { animation-range:entry 30% entry 100%; }
  }
}
@keyframes devices-drift { from { translate:0 28px; rotate:-2deg; } to { translate:0 -28px; rotate:2deg; } }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .btn, .vid, .btn-arrow { transition:none; }
  .btn:hover, .btn:active, .vid:hover, .vid:focus-visible, .btn:hover .btn-arrow { translate:none; }
  .spinner { animation:none; }
}