/* ═══════════════════════════════════════════════════════════════
   Website-Gewinnspiel — /de/gewinnspiel/
   Everything here is scoped to .pg-give or to class names that
   exist nowhere else on the site, so nothing can leak into another
   page. assets/v2.css stays untouched; this file only adds.
   ═══════════════════════════════════════════════════════════════ */

/* ── referral arrival banner ──────────────────────────────────── */
.refbar{
  background:var(--citron);color:var(--ink);
  padding:14px 0;
}
.refbar[hidden]{display:none}
.refbar .desk{
  display:flex;align-items:center;gap:14px;
}
.refbar p{
  margin:0;font-size:1rem;line-height:1.45;
}
.refbar strong{font-family:var(--display);font-weight:600}
.refbar-dot{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--wine);display:block;
}
@media (max-width:640px){
  .refbar{padding:12px 0}
  .refbar p{font-size:.9375rem}
}

/* ═══════════════════════════════════════════════════════════════
   Hero — copy left, the application form right.
   The form has to be the hero's own device: on a 390px phone the
   first question must sit one thumb-scroll below the headline.
   ═══════════════════════════════════════════════════════════════ */
.give-hero{padding:72px 0 88px}
.give-hero .give-lead{
  display:grid;grid-template-columns:1fr 540px;gap:64px;align-items:start;
}
.give-hero .give-lead[hidden]{display:none}
.give-hero h1{max-width:14ch}
.give-hero .hero-lede{margin:26px 0 30px}

.hero-twist{
  display:flex;align-items:flex-start;gap:12px;
  margin:26px 0 0;padding:16px 20px;
  border:1.5px solid rgba(242,232,75,.45);
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid);
  color:var(--citron);font-size:1.0625rem;line-height:1.45;max-width:46ch;
}
.hero-twist span{font-size:1.25rem;line-height:1.2;flex:none}
.give-hero .hero-note{margin-top:20px;max-width:46ch}

/* ═══════════════════════════════════════════════════════════════
   Deadline clock — the round's two fixed dates, live
   The static markup underneath already says both dates in a full
   sentence, so this panel is never empty: .is-live is only added
   once assets/giveaway.js has actually computed something.
   ═══════════════════════════════════════════════════════════════ */
.gclock{
  margin:24px 0 30px;padding:16px 20px 15px;max-width:42ch;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid);
}
.gclock-kick{
  display:flex;align-items:center;gap:10px;
  margin:0 0 9px;
  font-family:var(--display);font-weight:600;font-size:.8125rem;line-height:1.3;
  color:var(--citron);
}
.gclock-kick::before{
  content:"";width:9px;height:9px;flex:none;border-radius:50%;
  background:var(--flare);
}
.gclock-units{
  margin:0;display:flex;flex-wrap:nowrap;align-items:baseline;gap:4px 16px;
}
.gclock-u{display:flex;align-items:baseline;gap:5px}
.gclock-u b{
  font-family:var(--display);font-weight:700;font-size:1.875rem;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
/* The seconds cell is rebuilt by render() once a second, so the animation
   restarts by itself on every insertion — no class toggling, no reflow hack.
   Scoped to the seconds only: pulsing all four units every tick would turn
   the hero into a strobe. */
@keyframes gclock-tick{
  0%   {transform:translateY(-2px);opacity:.45}
  55%  {transform:translateY(0);opacity:1}
  100% {transform:translateY(0);opacity:1}
}
.gclock-u.is-sec b{
  display:inline-block;
  animation:gclock-tick .42s cubic-bezier(.22,.8,.3,1);
  color:var(--citron);
}
@media (prefers-reduced-motion:reduce){
  .gclock-u.is-sec b{animation:none}
}
.gclock-u i{
  font-style:normal;font-family:var(--display);font-weight:600;
  font-size:.8125rem;color:rgba(255,255,255,.66);
}
/* the no-JS reading: one plain sentence where the digits would go */
.gclock-plain{
  font-family:var(--display);font-weight:600;font-size:1.375rem;line-height:1.3;
  color:#fff;
}
.gclock-plain b{color:var(--citron);font-weight:700}
.gclock-foot{
  margin:10px 0 0;font-size:.8125rem;line-height:1.45;
  color:rgba(255,255,255,.74);
}

/* under 48 hours the panel sharpens: coral frame, citron digits */
.gclock.is-urgent{
  background:rgba(238,109,77,.15);
  border-color:rgba(238,109,77,.6);
}
.gclock.is-urgent .gclock-u b{color:var(--citron)}

/* returning applicant: a quiet way back to their link */
.give-back{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  background:rgba(255,255,255,.1);
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid);
  padding:14px 22px;margin-bottom:16px;
}
.give-back[hidden]{display:none}
.give-back p{margin:0;font-size:.9375rem;color:rgba(255,255,255,.86)}
.give-back-btn{
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:var(--citron);text-decoration:underline;text-underline-offset:3px;
  min-height:24px;padding:0;
}
.give-back-btn:hover{color:#fff}

/* ── the form card ───────────────────────────────────────────── */
.gcard{
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:36px 38px 30px;
}
.gcard[hidden]{display:none}
.gcard-title{
  font-family:var(--display);font-size:1.0625rem;font-weight:600;
  letter-spacing:0;line-height:1.3;margin:0 0 4px;
}
.gcard-sub{font-size:.875rem;color:#6b5560;margin:0 0 22px}

.gprog-label{
  font-family:var(--display);font-size:.8125rem;font-weight:600;
  color:var(--indigo);margin:0 0 8px;
}
.gprog{height:6px;border-radius:999px;background:var(--bone-deep);overflow:hidden;margin-bottom:26px}
.gprog i{
  display:block;height:100%;width:25%;border-radius:999px;
  background:var(--flare);transition:width .35s cubic-bezier(.22,.8,.3,1);
}
@media (prefers-reduced-motion:reduce){.gprog i{transition:none}}

.gform{margin:0}
.gstep{
  display:none;border:0;padding:0;margin:0;min-width:0;
}
.gstep.is-active{display:block}
.gstep-h{display:block;width:100%;padding:0;margin:0 0 6px}
.gstep-h h3{font-size:1.4rem;line-height:1.2}
.gstep-p{font-size:.9375rem;color:#5d4751;margin:0 0 20px}

/* inputs reuse .funnel-input-group / .funnel-input-row from v2.css */
.gcard .funnel-input-group + .funnel-input-group{margin-top:16px}
/* ...but not when they are side by side in a row: they are grid siblings there,
   so the second one picked up the stacking margin and sat 16px lower than the first. */
.gcard .funnel-input-row .funnel-input-group + .funnel-input-group{margin-top:0}
.gcard .funnel-input-row{margin-top:16px}
.gcard .funnel-input-row:first-of-type{margin-top:0}
.gcard .funnel-input-row + .funnel-input-group{margin-top:16px}
.ghint{font-size:.8125rem;color:#6b5560;margin:7px 0 0}
.gopt{color:#6b5560;font-weight:400}

.gerr{
  display:flex;align-items:flex-start;gap:7px;
  font-size:.875rem;line-height:1.4;color:var(--flare-text);
  font-weight:600;margin:8px 0 0;
}
.gerr[hidden]{display:none}
/* drawn, not typed: a generated "!" character can be announced by a
   screen reader ahead of the message it decorates */
.gerr::before{
  content:"";width:17px;height:17px;flex:none;margin-top:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23B33D18'/%3E%3Cpath d='M10 4.6v6.2' stroke='%23EDECE2' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.8' r='1.35' fill='%23EDECE2'/%3E%3C/svg%3E");
  background-size:17px;background-repeat:no-repeat;background-position:center;
}
.gcard input[aria-invalid="true"],
.gcard textarea[aria-invalid="true"]{border-color:var(--flare-text)}

.gurl{margin-top:16px}
.gurl[hidden]{display:none}

/* consent checkboxes */
.gchecks{margin-top:22px;display:grid;gap:14px}
.gcheck{
  display:grid;grid-template-columns:24px 1fr;gap:13px;align-items:start;
  font-size:.9375rem;line-height:1.45;color:#3b2630;cursor:pointer;
}
.gcheck input{position:absolute;opacity:0;width:0;height:0}
.gcheck-box{
  width:24px;height:24px;border-radius:8px;flex:none;margin-top:1px;
  background:var(--white);border:1.5px solid rgba(36,16,25,.28);
  display:grid;place-items:center;color:transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.gcheck input:checked + .gcheck-box{background:var(--flare);border-color:var(--flare);color:var(--ink)}
.gcheck input:focus-visible + .gcheck-box{outline:3px solid var(--indigo);outline-offset:3px}
.gcheck-text a{color:var(--flare-text);text-decoration:underline;text-underline-offset:3px}
.gcheck-text a:hover{color:var(--ink)}
.gchecks .gerr{margin-top:-6px}

/* step navigation */
.gnav{display:flex;align-items:center;gap:14px;margin-top:26px}
.gnext,.gsubmit{margin-left:auto;justify-content:center}
.gsubmit[aria-busy="true"]{opacity:.65;pointer-events:none}
.gback{
  font-family:var(--display);font-weight:600;font-size:1rem;color:#5d4751;
  text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 2px;
}
.gback:hover{color:var(--ink)}
/* the hero is .on-dark, so v2's .on-dark .btn--line would bleach a
   pill inside this bone card — nothing here opts into that */
.gcard .btn{color:var(--ink)}

.gstatus{
  margin:18px 0 0;font-size:.9375rem;line-height:1.45;
  color:var(--flare-text);font-weight:600;
}
.gstatus:empty{display:none}
.gstatus a{text-decoration:underline;text-underline-offset:3px;color:var(--wine)}
.gfoot{
  margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(36,16,25,.14);
  font-size:.8125rem;color:#6b5560;
}

/* ═══════════════════════════════════════════════════════════════
   Success / share screen — replaces the hero in place.
   This is the growth engine, so it takes the full hero width.
   ═══════════════════════════════════════════════════════════════ */
/* .hero .desk turns every direct .desk into a grid — the share screen
   is a single flowing column, so it opts back out (and must out-specify
   v2's .hero .desk rule, not just follow it) */
.give-hero .give-won{display:block}
.give-hero .give-won[hidden]{display:none}
.won-head{max-width:46ch}
.won-head h2{margin-bottom:16px}
.won-lede{color:rgba(255,255,255,.82);font-size:1.1875rem;margin:0}

.won-share{
  background:var(--bone);color:var(--ink);
  border-radius:var(--r-blob) var(--r-nub) var(--r-blob) var(--r-nub);
  padding:48px 52px 44px;margin-top:38px;
}
.won-kicker{
  font-family:var(--display);font-size:1.0625rem;font-weight:600;
  color:var(--indigo);margin:0 0 10px;
}
.won-claim{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.15;letter-spacing:-0.028em;
  margin:0 0 30px;max-width:22ch;
}
.won-claim strong{color:var(--flare-text);font-weight:600}

.won-link{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid);
  padding:14px 14px 14px 24px;
}
.won-url{
  flex:1 1 260px;min-width:0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.125rem,2.1vw,1.6rem);letter-spacing:-0.02em;
  overflow-wrap:break-word;user-select:all;
}
.won-url .won-url-code{color:var(--flare-text)}
.won-copy{flex:none}
.won-copy.is-copied{background:var(--citron)}
.won-copy.is-copied:hover{background:var(--citron)}
.won-copied{
  margin:12px 0 0;font-size:.9375rem;font-weight:600;color:var(--wine);
  min-height:1.4em;
}

.won-sub{
  margin:30px 0 14px;font-family:var(--display);font-size:1rem;
  font-weight:600;color:#5d4751;
}
.won-acts{display:flex;flex-wrap:wrap;gap:12px}
.won-acts .btn img{width:18px;height:18px;flex:none}
.won-acts .btn--wa img{filter:brightness(0) invert(1)}
.won-acts .btn--ink img{filter:brightness(0) invert(1)}
/* the panel is bone, not the dark hero — restore the ink outline pill */
.won-acts .btn--line{border-color:var(--ink);color:var(--ink)}
.won-acts .btn--line:hover{background:var(--ink);color:#fff}
.won-acts .btn--line:hover img{filter:brightness(0) invert(1)}

.won-rules{
  list-style:none;margin:34px 0 0;padding:26px 0 0;
  border-top:1px solid rgba(36,16,25,.14);display:grid;gap:11px;
}
.won-rules li{
  display:block;position:relative;padding-left:20px;
  font-size:.9375rem;line-height:1.5;color:#5d4751;
}
.won-rules li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:50%;background:var(--flare);
}
.won-foot{
  margin:26px 0 0;font-size:.9375rem;color:rgba(255,255,255,.72);max-width:64ch;
}
.won-foot a{color:var(--citron);text-decoration:underline;text-underline-offset:3px}
.won-foot a:hover{color:#fff}

/* ═══════════════════════════════════════════════════════════════
   The round calendar — the two dates, spelled out beside the steps
   ═══════════════════════════════════════════════════════════════ */
.gcycle{
  background:var(--wine-deep);color:#fff;
  border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob);
  padding:48px 52px;margin-top:24px;
}
.gcycle-head{max-width:58ch;margin-bottom:32px}
.gcycle-head h3{margin-bottom:12px;color:var(--citron)}
.gcycle-head p{margin:0;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.8)}
.gcycle-dates{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.gcycle-dates li{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid);
  padding:26px 28px;
}
.gcycle-dates li:nth-child(even){border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub)}
.gcycle-d{
  font-family:var(--display);font-weight:700;font-size:2.75rem;line-height:.95;
  color:var(--citron);letter-spacing:-.02em;
}
.gcycle-dates strong{
  display:block;font-family:var(--display);font-weight:600;font-size:1.0625rem;
  line-height:1.3;margin-bottom:8px;
}
.gcycle-dates p{margin:0;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.78)}
.gcycle-fine{
  margin:30px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);
  font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.78);max-width:76ch;
}
.gcycle-fine + .gcycle-fine{margin-top:14px;padding-top:0;border-top:0}
.gcycle-fine strong{color:#fff;font-family:var(--display);font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   Referral mechanic — three nodes on a rail
   ═══════════════════════════════════════════════════════════════ */
.refflow{
  display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;
  gap:18px;align-items:stretch;margin-top:48px;
}
.refnode{
  background:var(--white);
  border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub);
  padding:34px 32px 32px;
}
.refnode:nth-of-type(even){border-radius:var(--r-nub) var(--r-mid) var(--r-nub) var(--r-mid)}
.refnode--win{background:var(--wine-deep);color:#fff}
.refnode-k{
  display:inline-block;font-family:var(--display);font-size:.8125rem;font-weight:700;
  background:var(--bone-deep);color:var(--wine);
  border-radius:999px;padding:5px 14px;margin-bottom:16px;
}
.refnode--win .refnode-k{background:var(--citron);color:var(--ink)}
.refnode h3{font-size:1.2rem;margin-bottom:12px}
.refnode--win h3{color:var(--citron)}
.refnode p{font-size:.9375rem;line-height:1.55;color:#5d4751;margin:0}
.refnode--win p{color:rgba(255,255,255,.82)}
.refnode-url{
  display:inline-block;font-family:var(--display);font-weight:600;
  color:var(--flare-text);white-space:nowrap;
}
.refarrow{display:grid;place-items:center;color:rgba(36,16,25,.34)}

.reffine{
  background:var(--white);
  border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob);
  padding:44px 48px;margin-top:24px;
}
.reffine h3{font-size:1.25rem;margin-bottom:22px}
.reffine ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
/* the marker is absolutely positioned, not a grid/flex item: these
   list items mix a <strong> lead-in with loose text, and a bare text
   node would otherwise become its own track and wrap one word per line */
.reffine li{
  display:block;position:relative;
  padding:16px 0 16px 39px;border-top:1px solid rgba(36,16,25,.12);
  font-size:1rem;line-height:1.5;color:#5d4751;
}
.reffine li:first-child{border-top:0;padding-top:0}
.reffine li::before{
  content:"";position:absolute;left:0;top:18px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(238,109,77,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B33D18' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center;
}
.reffine li:first-child::before{top:2px}
.reffine li strong{color:var(--ink);font-family:var(--display);font-weight:600}
.reffine-foot{margin:22px 0 0;font-size:.9375rem;color:#6b5560}
.reffine-foot a{color:var(--flare-text);text-decoration:underline;text-underline-offset:3px}
.reffine-foot a:hover{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════
   Prize — the itemised value, and the honest exclusions
   ═══════════════════════════════════════════════════════════════ */
.solo-basis{
  margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);
  font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.72);
}

.give-not{
  background:var(--white);
  border-radius:var(--r-nub) var(--r-blob) var(--r-nub) var(--r-blob);
  padding:48px 52px;margin-top:24px;
}
.give-not-head{max-width:56ch;margin-bottom:28px}
.give-not-head h3{margin-bottom:12px}
.give-not-head p{margin:0;color:#5d4751;font-size:1rem}
.give-not ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px;
}
.give-not li{
  display:grid;grid-template-columns:24px 1fr;gap:15px;align-items:start;
  padding:16px 0;border-top:1px solid rgba(36,16,25,.12);
  font-size:.9375rem;line-height:1.5;color:#5d4751;
}
.give-not li i{
  width:24px;height:24px;border-radius:50%;
  background:rgba(36,16,25,.09);color:#6b5560;
  display:grid;place-items:center;font-style:normal;font-weight:700;
  font-size:.8rem;line-height:1;margin-top:1px;
}
.give-not li strong{font-family:var(--display);font-weight:600;color:var(--ink)}

.pf-more{margin:32px 0 0;font-size:1rem}
.pf-more a{
  font-family:var(--display);font-weight:600;color:var(--flare-text);
  text-decoration:underline;text-underline-offset:4px;
  display:inline-flex;align-items:center;min-height:44px;
}
.pf-more a:hover{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════
   Paid-traffic chrome: sticky mobile bar clearances
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .pg-give .wa-float{bottom:94px}
  .pg-give .foot{padding-bottom:124px}
}
/* once the application is in, the bar would still say "bewerben" */
.pg-give.is-won .stickbar{display:none}
@media (max-width:768px){
  .pg-give.is-won .wa-float{bottom:16px}
  .pg-give.is-won .foot{padding-bottom:48px}
}

/* ═══════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .give-hero .give-lead{grid-template-columns:1fr 480px;gap:44px}
  .refflow{grid-template-columns:1fr;gap:16px}
  .refarrow{transform:rotate(90deg);height:26px}
}
@media (max-width:960px){
  /* v2.css collapses .hero .desk at this width; this file loads after
     it, so the two-column rule above has to be undone explicitly.
     .give-pitch dissolves into the grid so the reassurance note can be
     ordered BELOW the form — step 1 has to stay one thumb-scroll away. */
  .give-hero{padding:40px 0 64px}
  .give-hero .give-lead{grid-template-columns:1fr;gap:20px}
  .give-hero .give-pitch{display:contents}
  /* Phone order: headline, one line of pitch, then THE FORM. The first
     field used to sit 1252px down — roughly 1.5 screens after the cookie
     banner — with the countdown and three paragraphs above it. Everything
     that argues for the offer now sits below the thing that captures it. */
  .give-hero .hero-note{order:5;margin-top:0}
  .give-hero .slots{margin-bottom:2px}
  .give-hero .hero-lede{order:1;margin:0}
  /* A button that scrolls to a form already above it would scroll
     backwards. The sticky bar still catches anyone further down. */
  .give-hero .hero-acts{display:none}
  .give-hero .hero-twist{order:4;margin-top:0}
  .give-hero .gclock{order:3;margin-top:0;margin-bottom:0;max-width:560px}
  .give-hero .give-panel{order:2;max-width:560px}
  .won-share{padding:38px 32px 34px}
  .give-not{padding:40px 32px}
  .give-not ul{grid-template-columns:1fr;gap:0}
  .reffine{padding:36px 30px}
  .gcycle{padding:40px 32px}
  .gcycle-dates{grid-template-columns:1fr}
}
@media (max-width:640px){
  .gcard{padding:28px 22px 24px}
  .gstep-h h3{font-size:1.25rem}
  .gcard .funnel-input-row{grid-template-columns:1fr;gap:16px}
  .gnav{margin-top:22px}
  .gnext,.gsubmit{flex:1 1 auto}
  .won-share{padding:30px 22px 28px;border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub)}
  .won-link{padding:14px;gap:12px;flex-direction:column;align-items:stretch}
  .won-url{flex:none;font-size:1.125rem;text-align:center}
  .won-copy{width:100%}
  .won-acts{gap:10px}
  .won-acts .btn{flex:1 1 100%;justify-content:center}
  .refnode{padding:28px 24px}
  .give-not{padding:32px 24px;border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub)}
  .reffine{padding:30px 24px;border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub)}
  .gcycle{padding:32px 24px;border-radius:var(--r-mid) var(--r-nub) var(--r-mid) var(--r-nub)}
  .gcycle-dates li{padding:22px 20px;gap:16px}
  .gcycle-d{font-size:2.25rem}
  .gclock{padding:14px 16px 13px;margin-bottom:24px;max-width:none}
  .gclock-u b{font-size:1.5rem}
  .gclock-units{gap:4px 11px}
  .gclock-plain{font-size:1.1875rem}
  .hero-twist{padding:14px 16px;font-size:1rem}
  .refbar .desk{align-items:flex-start}
  .refbar-dot{margin-top:7px}
}

/* ── heading → content spacing ─────────────────────────────────
   Most sections get their breathing room from a .lede between the
   h2 and the content. The founder section has no lede, so the
   cards sat straight under the headline. Match .bento's rhythm. */
#christoph .founder{margin-top:48px}
@media (max-width:860px){ #christoph .founder{margin-top:34px} }

/* .give-pitch is display:contents on mobile, so this pill becomes a direct
   grid item and stretches to the full 1fr column. It should hug its text.
   And if it ever does wrap, the dot stays level with the first line instead
   of centring against the block and leaving a gap beside it. */
.give-hero .slots{justify-self:start;align-items:flex-start}
.give-hero .slots i{margin-top:.42em;flex:none}