/* HERO C WINNER · AMP UP 1 (founder pick 2026-10-29 17:43 GMT): "Be there on day 1, not day 41."
   Lab i's direct-response stack (callout, headline, subhead, button, small print) on the dark stage, amped to the
   Architect page's bar: the calendar is a real calendar window (window bar, hairline month grid, events, a today
   marker) standing in a pool of light; day 41 is lab e's THE OLD GAME bar with its pale HIRING card lifted off the
   grid; the stage melts into the storm's white room through lab g's long dawn gradient (.hd-dawn).
   AMP UP 2 (founder 2026-10-29 21:44 GMT): the calendar is a real Google Calendar month, WHITE, titled "Your calendar":
   their own pains as solid Google event chips, one Google colour per type, each the Google colour nearest its faction
   hue (finds = Basil #0b8043 for mint, builds = Peacock #039be5 for teal, closes = Banana #f6bf26 for gold, runs =
   Lavender #7986cb for steel). The faction hexes themselves are not used: mint and teal sit 14 degrees apart and read as
   one colour on white, and all four are too pale to carry the white text Google's chips carry. Day 41 is today (the blue
   circle) and holds THE OLD GAME (Graphite, Google's grey) with its job post open as an event card.
   Hypha green #39f164 lives on the one lit phrase only (.hl).
   Motion, CSS only: the stack settles, the light switches on under "day 1", the three events draw in, a today marker
   walks from day 10 to day 41, the old game bar draws and the HIRING card lands. prefers-reduced-motion shows the end
   state with no motion at all (every animation sits inside the no-preference query). */

/* The headline's own copy of Space Grotesk (same file, so no second download): its text box is cut from 1.276em (ascent
   .984 + descent .292, measured in Chromium) to the .92 line-height, so the three tight lines' text boxes no longer overlap
   (the founder-screen sweep read 27-28% overlap, REAL once a line was half scrolled off). Ascent minus descent stays .692,
   so the strut, the line boxes and the baselines are the same: nothing moves. Browsers without the overrides draw it as before. */
@font-face {
  font-family: "HD Display Tight";
  src: url("../assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  ascent-override: 80.6%;
  descent-override: 11.4%;
  line-gap-override: 0%;
}

#hero-dr.scene { height: auto; position: relative; z-index: 5; }

.hd-stage {
  position: relative;
  min-height: var(--stage-h);
  min-height: calc(var(--stage-h) - clamp(84px, 11vh, 132px)); /* amp 2: the dawn starts inside the first screen (desk had ~200 px of dark below the button) */
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--void) 0%, var(--void) 50%, var(--carbon) 100%);
  color: var(--core);
  display: flex;
  align-items: center;
  padding: clamp(28px, 4.2vh, 56px) var(--gutter);
}

/* the lit room: a lamp over the calendar, a fainter one behind the headline, a shade toward the edges, still grain */
.hd-lamp {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hd-lamp--cal {
  left: 71%; top: 42%;
  width: 84vmax; height: 66vmax;
  background: radial-gradient(closest-side, rgb(120 222 168 / 0.19), rgb(53 166 119 / 0.085) 34%, rgb(53 166 119 / 0.028) 62%, rgb(53 166 119 / 0) 100%);
}
.hd-lamp--copy {
  left: 15%; top: 36%;
  width: 58vmax; height: 44vmax;
  background: radial-gradient(closest-side, rgb(29 130 82 / 0.15), rgb(4 33 23 / 0.1) 50%, rgb(4 33 23 / 0) 100%);
}
.hd-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 110% at 56% 52%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.5) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
.hd-stage::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.2 -.75'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.05;
}

/* ---------- the stack ---------- */
.hd-wrap {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  grid-template-areas: ". cal" "call cal" "h1 cal" "sub cal" "cta cal" "fine cal" ". cal";
  column-gap: clamp(40px, 5vw, 92px);
}

.hd-call {
  grid-area: call;
  justify-self: start;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.7em 1.2em 0.7em 1.05em;
  border-radius: 999px;
  border: 1px solid rgb(189 246 199 / 0.2);
  background: linear-gradient(180deg, rgb(189 246 199 / 0.075), rgb(189 246 199 / 0.025));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  font-family: var(--f-mono);
  font-size: clamp(11.5px, 0.84vw, 13px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--core-g);
}
.hd-call i {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--core-g);
  box-shadow: 0 0 0 3px rgb(189 246 199 / 0.12), 0 0 12px rgb(189 246 199 / 0.8);
}

.hd-h1 {
  grid-area: h1;
  margin: clamp(22px, 3vh, 34px) 0 0;
  font-family: "HD Display Tight", var(--f-display);
  font-weight: 700;
  font-size: clamp(54px, 6.1vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--core);
  text-shadow: 0 0 60px rgb(248 253 250 / 0.07);
}
.hd-h1 > span { display: block; }
/* the copy above the window paints above the window's pool of light: the hd-win animation (fill both) keeps .hd-cal a
   stacking context, so its z-index -1 glow sat over the subhead on one-column screens (sweep: "covered by div.hd-cal") */
.hd-call, .hd-h1, .hd-sub { position: relative; z-index: 1; }
.hd-h1 .hl {
  font-family: var(--f-display); /* the full-height font, so the lit box keeps its exact size */
  text-shadow: none;
  line-height: 0.84;
  padding: 0.06em 0.08em 0.01em 0.09em;
  margin: 0 0.02em 0 -0.03em;
  background: linear-gradient(var(--neon), var(--neon)) no-repeat 0 0 / 100% 100%;
  color: var(--ink);
  box-shadow: 0 0 46px rgb(57 241 100 / 0.3);
}

.hd-sub {
  grid-area: sub;
  margin: clamp(22px, 3vh, 32px) 0 0;
  max-width: 31em;
  font-family: var(--f-body);
  font-size: clamp(17px, 1.36vw, 21px);
  line-height: 1.5;
  color: var(--silver);
}
.hd-sub strong { color: var(--core); font-weight: 600; }

.hd-cta {
  grid-area: cta;
  position: relative;
  z-index: 3;
  justify-self: start;
  margin-top: clamp(28px, 3.8vh, 42px);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #e6f0ea);
  -webkit-tap-highlight-color: transparent;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 20px);
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgb(7 16 14 / 0.12), 0 0 0 1px rgb(189 246 199 / 0.45), 0 22px 48px rgb(0 0 0 / 0.5), 0 0 56px rgb(189 246 199 / 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
.hd-arw {
  flex: none;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #12211b, var(--ink) 70%);
  color: var(--core-g);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(7 16 14 / 0.4);
}
.hd-arw svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.hd-cta:hover { transform: translateY(-1px); box-shadow: inset 0 -1px 0 rgb(7 16 14 / 0.12), 0 0 0 1px var(--core-g), 0 26px 54px rgb(0 0 0 / 0.55), 0 0 70px rgb(189 246 199 / 0.32); }
.hd-cta:hover .hd-arw svg { transform: translateX(3px); }
.hd-cta:focus-visible { outline: 3px solid var(--core-g); outline-offset: 4px; }

.hd-fine {
  grid-area: fine;
  position: relative;
  z-index: 3;
  margin: 16px 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--steel);
}

/* ---------- the picture: a real Google Calendar month, white, on the dark stage (Material 3 look: tinted surface, white
   rounded panel, pill buttons, 1 px #dadce0 grid, centred dates, today in a filled #1a73e8 circle, solid event chips) ---------- */
.hd-cal.gc {
  grid-area: cal;
  align-self: center;
  position: relative;
  --row: clamp(70px, 9.6vh, 100px);
  --top: 31px; /* chips start under the date */
  --gl: #dadce0; --gt: #3c4043; --gm: #70757a; --gblue: #1a73e8;
  border-radius: 20px;
  padding: 0 10px 10px;
  background: #f0f4f9;
  color: var(--gt);
  font-family: var(--f-app);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 2px 6px rgb(0 0 0 / 0.4), 0 34px 70px -12px rgb(0 0 0 / 0.75), 0 80px 150px -30px rgb(0 0 0 / 0.6);
}
.hd-cal.gc::before {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  left: -16%; right: -16%; top: -20%; bottom: -26%;
  background: radial-gradient(closest-side, rgb(160 230 190 / 0.16), rgb(53 166 119 / 0.06) 56%, rgb(53 166 119 / 0) 100%);
}
.gc-bar { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 4px 0 8px; white-space: nowrap; }
.gc-bar svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.gc-me { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; font-size: 17px; font-weight: 500; color: #1f1f1f; }
.gc-me svg { width: 24px; height: 24px; stroke: var(--gblue); stroke-width: 1.7; }
.gc-today, .gc-view { display: inline-flex; align-items: center; height: 34px; border: 1px solid #747775; border-radius: 999px; font-size: 14px; font-weight: 500; color: #1f1f1f; }
.gc-today { padding: 0 17px; }
.gc-view { gap: 4px; padding: 0 10px 0 17px; }
.gc-view svg { width: 18px; height: 18px; stroke-width: 1.8; }
.gc-arws { display: inline-flex; gap: 6px; color: #444746; }
.gc-arws svg { width: 22px; height: 22px; stroke-width: 1.9; }
.gc-title { font-size: 21px; font-weight: 400; color: #1f1f1f; letter-spacing: 0; }
.gc-gap { flex: 1; }
/* 2026-11-02 founder walk: on a laptop narrower than ~1440 px the bar needs more room than the card has, so the "Month"
   pill hung half off the card's right edge. The words stay as they are: as the card narrows the bar first drops the
   back/forward arrows, then trims pill padding, then the calendar glyph, then the Today pill, keeping air before the edge.
   Desktop only (the phone has its own bar fit below). Thresholds are the bar's content width: need 577, 509, 494, 462 (the 1440 laptop keeps its arrows). */
@media (min-width: 900px) {
  .gc-bar { container-type: inline-size; }
  @container (max-width: 590px) {
    .gc-arws { display: none; }
    .gc-me { margin-right: 4px; }
  }
  @container (max-width: 530px) {
    .gc-today { padding: 0 12px; }
    .gc-view { padding-left: 12px; }
  }
  @container (max-width: 515px) { .gc-me svg { display: none; } }
  @container (max-width: 485px) { .gc-today { display: none; } }
}

.gc-panel { background: #fff; border-radius: 16px; overflow: hidden; }
.gc-wk, .gc-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gc-wk li { padding: 9px 0 1px; border-left: 1px solid var(--gl); text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm); }
.gc-wk li:first-child { border-left: 0; }
.gc-grid { position: relative; }
.gc-days, .gc-evs { grid-template-rows: repeat(6, var(--row)); }
.gc-d { min-width: 0; padding-top: 4px; border-left: 1px solid var(--gl); border-bottom: 1px solid var(--gl); display: flex; justify-content: center; align-items: flex-start; }
.gc-d:nth-child(7n+1) { border-left: 0; }
.gc-d:nth-child(n+36) { border-bottom: 0; }
.gc-d > b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; font-size: 12px; font-weight: 500; line-height: 1; color: var(--gt); }
.gc-d.is-next > b { color: var(--gm); }
.gc-d.is-today > b { background: var(--gblue); color: #fff; }

.gc-evs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); pointer-events: none; }
.gc-ev {
  align-self: start;
  margin: var(--top) 6px 0 5px;
  padding: 3px 8px 4px;
  border-radius: 5px;
  background: var(--c);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.005em;
  box-shadow: 0 1px 2px rgb(60 64 67 / 0.18);
}
.gc-ev--hunter { --c: #0b8043; }
.gc-ev--builder { --c: #039be5; }
.gc-ev--closer { --c: #f6bf26; color: #2b2300; }
.gc-ev--runner { --c: #7986cb; }
.gc-ev--old { --c: #616161; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* day 41: the job post opens as Google's event card, beside its grey chip */
.gc-pop {
  grid-area: 5 / 2 / 7 / 6;
  align-self: end;
  justify-self: end;
  width: 96%;
  position: relative;
  z-index: 2;
  margin: 0 -2px calc(var(--row) - var(--top) - 34px) 0;
  padding: 14px 18px 15px 46px;
  border-radius: 14px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 0 0 1px rgb(60 64 67 / 0.08), 0 24px 38px 3px rgb(0 0 0 / 0.16), 0 9px 46px 8px rgb(0 0 0 / 0.12), 0 11px 15px -7px rgb(0 0 0 / 0.22);
}
.gc-pop-sq { position: absolute; left: 18px; top: 19px; width: 15px; height: 15px; border-radius: 4px; background: #616161; }
.gc-pop-t { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.25; }
.gc-pop-d { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--gm); }
.gc-pop-b { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--gt); }
.gc-pop-b b { font-weight: 600; color: #1f1f1f; }

/* ---------- the hand-off (lab g's dawn): the stage melts into the storm's white room below ---------- */
.hd-dawn {
  position: relative;
  height: clamp(120px, 24vh, 260px);
  background: linear-gradient(180deg, var(--carbon) 0%, #0f2a20 22%, #5d7a6c 58%, #dfe7e0 86%, #f8faf7 100%);
}
.hd-dawn::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.2 -.75'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.05;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}

/* ---------- motion: once, on arrival; none at all under prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hd-call, .hd-h1 > span, .hd-sub, .hd-cta, .hd-fine { animation: hd-in 0.9s cubic-bezier(.2,.7,.2,1) both; }
  .hd-call { animation-delay: 0.05s; }
  .hd-h1 > span:nth-child(1) { animation-delay: 0.12s; }
  .hd-h1 > span:nth-child(2) { animation-delay: 0.2s; }
  .hd-h1 > span:nth-child(3) { animation-delay: 0.28s; }
  .hd-sub { animation-delay: 0.38s; }
  .hd-cta { animation-delay: 0.48s; }
  .hd-fine { animation-delay: 0.56s; }
  .hd-h1 .hl { animation: hd-lit 0.7s cubic-bezier(.65,0,.25,1) 0.75s both; }
  .hd-cal { animation: hd-win 1.1s cubic-bezier(.2,.7,.2,1) 0.15s both; }
  .gc-ev { animation: hd-draw 0.5s cubic-bezier(.2,.7,.2,1) backwards; }
  .gc-ev:nth-child(1) { animation-delay: 0.85s; }
  .gc-ev:nth-child(2) { animation-delay: 1.0s; }
  .gc-ev:nth-child(3) { animation-delay: 1.15s; }
  .gc-ev:nth-child(4) { animation-delay: 1.3s; }
  .gc-ev:nth-child(5) { animation-delay: 1.45s; }
  .gc-ev:nth-child(6) { animation-delay: 1.6s; }
  .gc-d.is-today > b { animation: hd-today 0.45s cubic-bezier(.2,.8,.2,1.3) 2.0s both; }
  .gc-ev--old { animation-delay: 2.2s; }
  .gc-pop { animation: hd-pop 0.6s cubic-bezier(.2,.9,.25,1.05) 2.55s both; }
}
@keyframes hd-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes hd-win { from { opacity: 0; transform: translateY(30px) scale(0.985); } }
@keyframes hd-lit { from { background-size: 0% 100%; color: var(--core); box-shadow: 0 0 46px rgb(57 241 100 / 0); } 55% { color: var(--core); } }
@keyframes hd-draw { from { clip-path: inset(0 100% 0 0 round 5px); } to { clip-path: inset(0 0 0 0 round 5px); } }
@keyframes hd-today { from { background-color: rgb(26 115 232 / 0); color: var(--gt); transform: scale(0.6); } }
@keyframes hd-pop { from { opacity: 0; transform: translateY(10px) scale(0.94); } }

/* ---------- phone: callout, headline, subhead, the calendar, the button above the fold ---------- */
@media (max-width: 899px) {
  .hd-stage { align-items: flex-start; min-height: 0; padding: 16px var(--gutter) 22px; }
  .hd-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "call" "h1" "sub" "cal" "cta" "fine";
  }
  .hd-lamp--cal { left: 62%; top: 66%; }
  .hd-call { padding: 0; border: 0; background: none; box-shadow: none; font-size: 10.5px; letter-spacing: 0.04em; gap: 0.7em; }
  .hd-call i { width: 6px; height: 6px; }
  .hd-h1 { margin-top: 12px; font-size: clamp(40px, 12.4vw, 60px); line-height: 0.92; }
  .hd-sub { margin-top: 12px; font-size: 15px; line-height: 1.42; }
  .hd-cal.gc { margin-top: 16px; --row: 50px; --top: 19px; border-radius: 13px; padding: 0 5px 5px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 2px 5px rgb(0 0 0 / 0.4), 0 18px 40px -8px rgb(0 0 0 / 0.6); }
  .gc-bar { height: 38px; gap: 6px; padding: 0 2px 0 4px; }
  .gc-me { gap: 4px; margin-right: 2px; font-size: 11.5px; }
  .gc-me svg { width: 15px; height: 15px; }
  .gc-today, .gc-view { height: 22px; font-size: 10px; }
  .gc-today { padding: 0 8px; }
  .gc-view { gap: 1px; padding: 0 4px 0 8px; }
  .gc-view svg { width: 12px; height: 12px; }
  .gc-arws { gap: 1px; }
  .gc-arws svg { width: 14px; height: 14px; }
  .gc-title { font-size: 12.5px; }
  .gc-panel { border-radius: 10px; }
  .gc-wk li { padding: 4px 0 0; font-size: 8px; letter-spacing: 0.04em; }
  .gc-d { padding-top: 2px; }
  .gc-d > b { min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 9px; }
  .gc-ev { margin: var(--top) 2px 0 2px; padding: 2px 4px 3px; border-radius: 3px; font-size: 9.5px; line-height: 1.18; }
  .gc-ev--old { font-size: 8.5px; letter-spacing: 0.03em; }
  .gc-pop { grid-area: 5 / 1 / 7 / 6; width: 98%; margin: 0 1px calc(var(--row) - var(--top) - 26px) 0; padding: 7px 9px 8px 24px; border-radius: 9px; }
  .gc-pop-sq { left: 9px; top: 10px; width: 9px; height: 9px; border-radius: 2px; }
  .gc-pop-t { font-size: 12.5px; }
  .gc-pop-d { margin-top: 0; font-size: 9px; }
  .gc-pop-b { margin-top: 3px; font-size: 9.5px; line-height: 1.3; }
  .hd-cta { margin-top: 16px; padding: 6px 6px 6px 22px; gap: 14px; font-size: 16.5px; }
  .hd-arw { width: 40px; height: 40px; }
  .hd-arw svg { width: 16px; height: 16px; }
  .hd-fine { margin-top: 10px; font-size: 10.5px; line-height: 1.45; }
}

/* ---------- phone bar fit (amp 2c): every bar item stays inside the white frame at 390 and 375 ---------- */
@media (max-width: 899px) {
  .gc-bar { gap: 4px; }
  .gc-gap { display: none; }
  .gc-view { margin-left: auto; padding: 0 3px 0 7px; }
  .gc-view svg { width: 11px; height: 11px; }
  .gc-me { gap: 3px; margin-right: 0; font-size: 11px; }
  .gc-me svg { width: 14px; height: 14px; }
  .gc-title { font-size: 12px; }
  .gc-today { padding: 0 7px; }
}
@media (max-width: 380px) {
  .hd-call { font-size: 10px; letter-spacing: 0.02em; }
  .gc-me { font-size: 10.5px; }
  .gc-title { font-size: 11.5px; }
  .gc-today, .gc-view { font-size: 9.5px; }
  .gc-today { padding: 0 6px; }
  .gc-arws svg { width: 13px; height: 13px; }
}
/* ---------- short phones (375x667): the button above the fold, no copy cut ---------- */
@media (max-width: 899px) and (max-height: 760px) {
  .hd-h1 { margin-top: 8px; font-size: clamp(36px, 10.4vw, 60px); }
  .hd-sub { margin-top: 8px; font-size: 14px; line-height: 1.38; }
  .hd-cal.gc { margin-top: 12px; --row: 47px; --top: 19px; }
  .hd-cta { margin-top: 12px; }
}
/* ---------- day 1 on the calendar (amp 2c): the headline's green on Nov 1, so day 1 and today's day 41 read as one month ---------- */
.gc-ev--day1 { --c: var(--neon); color: var(--ink); font-weight: 700; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .gc-ev--day1 { animation-delay: 0.75s; }
}