/* ==========================================================================
   MyCabin Demo Days — Page Pack CSS
   Scoped entirely under .pp-demo-days (Page Pack Spec §5). Trimmed from the
   Claude Design export's shared styles.css: only rules this page's own
   sections actually use (hero, event cards, private-visit callout, partner
   grid, "Worth the trip", locations, sign-up). No rails/marquees/carousels
   on this page — every repeated group below is a plain flex/grid layout.

   01  Tokens (scoped custom properties, not :root)
   02  Base resets (scoped)
   03  Flow-layout margin neutralization (repeated/positioned-item groups)
   04  Section shell + heading
   05  Buttons and links
   06  Hero
   07  Upcoming demo days (event cards)
   08  Can't make a demo day (private-visit callout)
   09  Partner demo days
   10  Worth the trip
   11  Where to find us (locations)
   12  Sign up (copy + form)
   13  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01  TOKENS — scoped to .pp-demo-days, never :root, so nothing leaks to the
   rest of the WordPress site (Page Pack Spec §5, layer 2).
   ========================================================================== */

.pp-demo-days {
  --pp-ink:          #27272C;
  --pp-bone:         #FFFFFF;
  --pp-surface:      #FBF6F3;
  --pp-accent:       #917EBC;
  --pp-accent-soft:  #CDCBFF;
  --pp-tint:         #E6E6FF;
  --pp-good:         #4F7A44;

  --pp-stone:            color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone));
  --pp-ink-hair:         color-mix(in oklab, var(--pp-ink) 7%,  var(--pp-bone));
  --pp-ink-line:         color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone));
  /* Phase 7.1 (Round 8): source declares BOTH tint-line tokens — this pack
     only ever needed the stronger 34% mix (card/button borders) until now.
     The 18% mix is source's own signup/contact-form section divider color
     (.demo-signup-section's border-block), distinct and subtler than the
     34% mix used elsewhere; added here rather than reusing -strong. */
  --pp-tint-line:        color-mix(in oklab, var(--pp-accent) 18%, var(--pp-tint));
  --pp-tint-line-strong: color-mix(in oklab, var(--pp-accent) 34%, var(--pp-tint));

  --pp-ink-72:  color-mix(in oklab, var(--pp-ink) 72%, transparent);
  /* 65%, not 56% — matches the site-wide WCAG AA fix already applied on the
     homepage/About Page Packs for this identical anthracite/beige pairing. */
  --pp-ink-56:  color-mix(in oklab, var(--pp-ink) 65%, transparent);

  --pp-maxw:   1280px;
  --pp-gutter: clamp(18px, 4vw, 40px);
  /* Phase 7.1: centers content at --pp-maxw via PADDING on a full-width
     section, instead of a max-width + margin-inline:auto box — so a
     section's own background-color (set as a native Gutenberg block
     attribute) bleeds to the true viewport edge while the content inside
     it still lands at the same centered position. Below --pp-maxw +
     2×--pp-gutter, this flattens to a flat --pp-gutter on both sides,
     reproducing the old max-width approach's mobile behavior exactly.
     Same formula already proven on the homepage/About Page Packs — see
     .pp-section there — reused here rather than inventing a second
     full-bleed mechanism. */
  --pp-section-pad: max(var(--pp-gutter), calc((100% - var(--pp-maxw)) / 2 + var(--pp-gutter)));

  --pp-r-pill: 999px;
  --pp-r-card: 11px;
  --pp-r-lg:   10px;
  --pp-r-md:   9px;
  --pp-r-xs:   7px;

  --pp-ease:  cubic-bezier(.22, 1, .36, 1);
  --pp-t-med: .25s;

  position: relative;
  background: var(--pp-bone);
  color: var(--pp-ink);
  overflow-x: clip;
}


/* ==========================================================================
   02  BASE RESETS (scoped)
   ========================================================================== */

.pp-demo-days,
.pp-demo-days *,
.pp-demo-days *::before,
.pp-demo-days *::after {
  box-sizing: border-box;
}
.pp-demo-days img { max-width: 100%; display: block; }
.pp-demo-days a { color: inherit; text-decoration: none; }
.pp-demo-days a:hover { color: var(--pp-accent); }

/* Scroll container with the scrollbar hidden — the mobile "Worth the trip"
   photo rail. */
.pp-demo-days .pp-no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.pp-demo-days .pp-no-bar::-webkit-scrollbar { display: none; }


/* ==========================================================================
   03  FLOW-LAYOUT MARGIN NEUTRALIZATION
   --------------------------------------------------------------------------
   Every group below is a plain core/group with no explicit `layout`
   attribute in content.html, left that way so each stays a normal, fully
   flexible Gutenberg container. WordPress's default "Flow" layout generates
   `<selector> > * + *` { margin-block-start: <blockGap> } on any such group
   with 2+ children, from the active theme's own spacing.blockGap global
   style — regardless of whether this Page Pack ever asked for a gap. Left
   alone, that silently shifts/shrinks/misaligns whichever of these groups
   position their own children via CSS flex/grid or position:absolute —
   confirmed mechanism, see docs/HOMEPAGE-WORDPRESS-FLOW-MARGIN-FIX-HANDOFF.md
   and homepage v1.1.2. Scoped narrowly to just these components' own direct
   children — never a sitewide reset. `!important` matches WordPress's own
   generated rule, which carries normal specificity with no `:where()`.
   ========================================================================== */

.pp-demo-days .pp-dd-hero__text > *,
.pp-demo-days .pp-dd-cards > *,
.pp-demo-days .pp-dd-card__media > *,
.pp-demo-days .pp-dd-card__head > *,
.pp-demo-days .pp-dd-card__meta > *,
.pp-demo-days .pp-dd-card__meta-item > *,
.pp-demo-days .pp-dd-private > *,
.pp-demo-days .pp-dd-private__copy > *,
.pp-demo-days .pp-dd-partners__row > *,
.pp-demo-days .pp-dd-partners__copy > *,
.pp-demo-days .pp-dd-partner-grid > *,
.pp-demo-days .pp-dd-partner > *,
.pp-demo-days .pp-dd-partner__head > *,
.pp-demo-days .pp-dd-why-row > *,
.pp-demo-days .pp-dd-why-list > *,
.pp-demo-days .pp-dd-why-item > *,
.pp-demo-days .pp-dd-why-item__body > *,
.pp-demo-days .pp-dd-proof > *,
.pp-demo-days .pp-dd-proof__stats > *,
.pp-demo-days .pp-dd-proof__stat > *,
.pp-demo-days .pp-dd-proof__photos > *,
.pp-demo-days .pp-dd-location-grid > *,
.pp-demo-days .pp-dd-location > *,
.pp-demo-days .pp-dd-location__body > *,
.pp-demo-days .pp-dd-signup-row > *,
.pp-demo-days .pp-dd-signup__copy > *,
.pp-demo-days .pp-dd-trust > *,
.pp-demo-days .pp-dd-trust-item > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* ==========================================================================
   04  SECTION SHELL + HEADING
   Centers content at --pp-maxw via padding on the section itself, matching
   the homepage/About Page Packs' own convention (no nested "wrap" div).
   Section vertical padding (top/bottom) is a native block attribute
   referencing the "Section — Compact" preset — see manifest.json notes.

   Phase 7.1 fix: this used to be `max-width: var(--pp-maxw); margin-inline:
   auto; padding-inline: var(--pp-gutter);` — which shrinks the SECTION
   ITSELF (the same element that carries each section's background-color
   as a native Gutenberg attribute) to 1280px, so on any viewport wider
   than ~1280px + 2×gutter the background stopped short of the real edges,
   leaving plain white gutters outside it (Partners/Locations/Signup all
   have a real background color; Events/Why don't, so they never showed
   the bug, but shared this same rule). `--pp-section-pad` (§01) reproduces
   the identical CENTERED CONTENT position via padding alone, on a section
   that stays full-width — content lands in exactly the same place, but
   the background now bleeds to the true viewport edge. */
.pp-demo-days .pp-dd-events,
.pp-demo-days .pp-dd-partners,
.pp-demo-days .pp-dd-why,
.pp-demo-days .pp-dd-locations,
.pp-demo-days .pp-dd-signup {
  padding-inline: var(--pp-section-pad);
}

.pp-demo-days .pp-dd-h2 {
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 500;
}
.pp-demo-days .pp-dd-events__title { margin-bottom: clamp(24px, 4vw, 32px); }
.pp-demo-days .pp-dd-why__title,
.pp-demo-days .pp-dd-locations__title { max-width: 14ch; }
.pp-demo-days .pp-dd-signup__title { max-width: 16ch; }

/* Scroll reveal — fade up once, the first time a block is scrolled into
   view. Toggled by the IntersectionObserver in frontend.js; .pp-in-view is
   the only state it ever adds, never removed, so a reveal never re-triggers.
   editor.css settles this to its final visible state inside Gutenberg,
   since frontend.js never runs there. */
.pp-demo-days .pp-io-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease);
}
.pp-demo-days .pp-io-fade.pp-in-view { opacity: 1; transform: none; }


/* ==========================================================================
   05  BUTTONS AND LINKS
   Base pill shape lives here (this pack's own frontend.css, not the theme),
   matching the exact precedent set on the homepage/About/Contact Page Packs.
   Base fill/text colors are native block color attributes; only :hover
   colors and the outline/block variants need CSS. The sign-up form's submit
   button is inside a core/html block (raw <button>, no .wp-block-button__link
   ancestor), so `.pp-btn` also carries the base pill styling directly.
   ========================================================================== */

/* Phase 7.1 (round 9) fix: source's `.btn` never declares its own
   font-family either — it inherits body's Poppins stack, which reaches
   native <button>/<input> elements only because source also has a global
   `button { font: inherit; } input { font: inherit; }` reset (browsers'
   own UA stylesheet otherwise gives form controls a system font,
   regardless of what an ancestor's `color` is doing via `a{color:inherit}`
   right next to it). This Page Pack never had that reset, so the sign-up
   submit button — a real `<button>`, not a `.wp-block-button__link` — was
   falling through to the theme/browser's default (Arial-like) font. Fixed
   here with the font-family added directly to the two named selectors
   this instruction asked for, `.pp-btn` and `.mdd-cta` (below), rather
   than a generic `.pp-demo-days button` reset — narrower, and every
   button on this page already resolves through one of these two rules,
   so nothing needed a third selector. */
.pp-demo-days .wp-block-button .wp-block-button__link,
.pp-demo-days .pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding-inline: 21px;
  border: 0;
  border-radius: var(--pp-r-pill);
  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-demo-days .pp-btn--48 .wp-block-button__link,
.pp-demo-days .pp-btn--48.pp-btn { height: 38px; padding-inline: 19px; }
.pp-demo-days .pp-btn--block,
.pp-demo-days .pp-btn--block .wp-block-button__link { width: 100%; display: flex; }

/* Phase 7.1 fix: a bare <button class="pp-btn pp-btn-ink"> with no
   .wp-block-button ancestor (the Registration block's own submit button,
   rendered as plain HTML by the Phase 6 plugin — render.php) never had a
   resting-state fill defined anywhere: only the :hover rule below existed,
   because every OTHER .pp-btn-ink instance on this page is a real
   Gutenberg button block that carries its own native background-color/
   color attribute. With no fill and no border, the browser's own default
   <button> chrome (pale grey, dark text) showed through instead of the
   ink/white pill the design calls for. Confirmed this is not a genuine
   disabled-state issue: demo-days-registration-view.js only ever sets
   `button.disabled = true` transiently while a submit is in flight, never
   at rest (see MDD_VERSION 0.6.1 changelog). Scoped to require BOTH
   classes so it can't touch .mdd-cta (the event-card CTA), which never
   carries the bare .pp-btn class and already has its own fill below (§14). */
.pp-demo-days .pp-btn-ink.pp-btn {
  background: var(--pp-ink);
  color: var(--pp-bone);
}

/* Base fill/text colors are native color attributes; :hover needs
   !important because an inline style attribute otherwise always beats a
   class-based :hover rule regardless of specificity — same precedent as
   every other MyCabin Page Pack. */
.pp-demo-days .pp-btn-accent .wp-block-button__link:hover { background: var(--pp-accent) !important; color: var(--pp-ink) !important; }
.pp-demo-days .pp-btn-ink .wp-block-button__link:hover,
.pp-demo-days .pp-btn-ink.pp-btn:hover { background: var(--pp-accent) !important; color: var(--pp-bone) !important; }
.pp-demo-days .pp-btn-light .wp-block-button__link:hover { background: var(--pp-accent-soft) !important; color: var(--pp-ink) !important; }

/* Outline — a 1px border a native color attribute can't represent. */
.pp-demo-days .pp-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--pp-ink);
  border: 1px solid var(--pp-ink);
}
.pp-demo-days .pp-btn-outline .wp-block-button__link:hover { background: var(--pp-surface); }

/* Arrow-first text link — icon before "Open in Google Maps", matching
   source's .link-arrow (icon svg, then text, inside the anchor). Phase 7.1
   Round 6: gap corrected 8px -> 10px to match source's .link-arrow exactly;
   base color is intentionally unset here too, same as source — see the
   scoped color fix in §11 for why this anchor still needs its own color. */
.pp-demo-days .pp-dd-link-arrow a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
}
.pp-demo-days .pp-dd-link-arrow a:hover { color: var(--pp-accent); }
/* Matches source's .icon { flex: 0 0 auto; } — no color of its own, so its
   stroke="currentColor" paths pick up whatever color the anchor resolves
   to (see the scoped fix in §11), not the muted decorative-icon tone below. */
.pp-demo-days .pp-dd-link-arrow__icon { flex: none; }

/* Decorative icons — meta rows, partner grid, trust list. */
.pp-demo-days .pp-dd-icon { flex: none; color: var(--pp-ink-56); }
.pp-demo-days .pp-dd-icon--good { color: var(--pp-good); }


/* ==========================================================================
   06  HERO
   Full-bleed photo, dark scrim (CSS-only, no markup — matching the Ready
   Houses Page Pack's own equivalent technique), heading anchored to the
   bottom edge. Taller than the other page-heroes and with extra top padding
   — this is the only page-hero with both a wrapped paragraph AND a button
   below the heading; see manifest.json notes.
   ========================================================================== */

.pp-demo-days .pp-dd-hero {
  position: relative;
  overflow: hidden;
  height: clamp(460px, 58vw, 600px) !important;
}
.pp-demo-days .pp-dd-hero__photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.pp-demo-days .pp-dd-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 55%;
}
.pp-demo-days .pp-dd-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 25%, color-mix(in oklab, var(--pp-ink) 82%, transparent) 90%);
}
/* Phase 7.1 round 2: max-width/padding/align-items reinforced with
   !important. Every value here already matched the source design exactly
   on direct inspection — this isn't a value change, it's a defense
   against WordPress core's own "constrained" layout (the default for
   core/group as of WP 6.x when a group's saved content carries no
   explicit `layout` attribute) auto-injecting its OWN content-width/
   padding/block-gap on top of ours. content.html now also opts this
   group and its two children out of that default via an explicit
   `"layout":{"type":"flow"}` attribute — belt and suspenders, since
   Claude could not verify live which mechanism (if either) was actually
   firing this round (no browser access; see manifest.json notes). */
.pp-demo-days .pp-dd-hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--pp-maxw) !important;
  margin-inline: auto;
  /* Phase 7.3: WordPress core's own block-gap CSS applies a margin-top
     between .pp-dd-hero (a wp-block-group) 's two flow children even
     though the first, .pp-dd-hero__photo, is position:absolute and
     visually out of flow — margin is computed from DOM adjacency, not
     visual layout, so this element still received it. Since .pp-dd-hero
     itself is overflow:hidden and this element is height:100% of it, that
     40px margin-top silently pushed the whole box (and everything
     flex-end-aligned inside it) down by 40px, clipping 40px off the
     BOTTOM padding instead (live-measured: the "View upcoming events"
     button sat only 48px above the hero's bottom edge instead of the
     source's own 88px — exactly the clipped amount). The source has no
     such margin at all (measured 0px on the equivalent element in
     demo-days.html). Reset to 0 here rather than relying on WordPress
     core's own default not firing — same defensive-!important pattern
     already used on this exact block's max-width/align-items/padding,
     for the same "core auto-injects layout on top of ours" reason. */
  margin-top: 0 !important;
  display: flex;
  align-items: flex-end !important;
  padding: clamp(100px, 12vw, 130px) var(--pp-gutter) clamp(48px, 9vw, 88px) !important;
}
.pp-demo-days .pp-dd-hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 24px) !important;
}
.pp-demo-days .pp-dd-hero__title {
  font-size: clamp(32px, 9vw, 76px);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 500;
  max-width: 16ch !important;
}
.pp-demo-days .pp-dd-hero__sub {
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1.65;
  font-weight: 300;
  max-width: 480px;
}
/* .pp-dd-hero__text is a flex column with no align-items set (stretch by
   default) — without this the button's own box, not just its text, would
   stretch to the full width of the text column instead of sizing to its
   own content. */
.pp-demo-days .pp-dd-hero__btns { align-self: flex-start; }


/* ==========================================================================
   07  UPCOMING DEMO DAYS (event cards)
   ========================================================================== */

.pp-demo-days .pp-dd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 22px);
}

.pp-demo-days .pp-dd-card {
  display: flex;
  flex-direction: column;
  background: var(--pp-bone);
  border: 1px solid var(--pp-stone);
  border-radius: var(--pp-r-card);
  overflow: hidden;
}
.pp-demo-days .pp-dd-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pp-surface);
}
.pp-demo-days .pp-dd-card__media .pp-dd-card__photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.pp-demo-days .pp-dd-card__media .pp-dd-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* z-index:2 is load-bearing, not decorative — without it the badge silently
   paints behind the card photo (the photo's own stacking context otherwise
   wins). See manifest.json notes. */
.pp-demo-days .pp-dd-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  height: auto;
  padding: 6px 11px;
  border-radius: var(--pp-r-pill);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pp-demo-days .pp-dd-card__counter {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--pp-r-pill);
  background: color-mix(in oklab, var(--pp-ink) 72%, transparent);
  color: var(--pp-bone);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pp-demo-days .pp-dd-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 20px);
  flex: 1;
}
.pp-demo-days .pp-dd-eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pp-accent);
}
.pp-demo-days .pp-dd-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pp-demo-days .pp-dd-card__title {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.02em;
}
.pp-demo-days .pp-dd-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--pp-r-pill);
  background: var(--pp-tint);
  border: 1px solid var(--pp-tint-line-strong);
  color: var(--pp-accent);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.pp-demo-days .pp-dd-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 0;
  border-top: 1px solid var(--pp-ink-hair);
  border-bottom: 1px solid var(--pp-ink-hair);
}
.pp-demo-days .pp-dd-card__meta-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--pp-ink-72);
}
.pp-demo-days .pp-dd-card__cta { margin-top: auto; }


/* ==========================================================================
   08  CAN'T MAKE A DEMO DAY (private-visit callout)
   The one deliberately olive-coloured element on the page.
   ========================================================================== */

/* Phase 7.1 round 3: margin-top/padding reinforced with !important — same
   defensive reasoning as the hero round (WP core's default "constrained"
   core/group layout can auto-inject its own width/padding/gap on a group
   with no explicit `layout` attribute; content.html now also opts this
   block and its copy child out via `"layout":{"type":"flow"}`). Every
   value here already matched source exactly — this protects them, it
   doesn't change them. */
.pp-demo-days .pp-dd-private {
  margin-top: clamp(24px, 4vw, 36px) !important;
  border-radius: var(--pp-r-lg);
  padding: clamp(22px, 3.2vw, 32px) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 32px);
}
.pp-demo-days .pp-dd-private__copy { flex: 1 1 300px; min-width: 0; }
/* Phase 7.1 round 3 fix: this rule for the heading was missing entirely —
   .pp-dd-private__copy h3 had no font-size/weight/family/letter-spacing
   declared anywhere in this file, so it rendered at whatever the theme's
   own default h3 style is instead of source's clamp(18px, 3.2vw, 22px)
   Poppins 500. Color is intentionally omitted here — it's already set as
   a native Gutenberg color attribute (inline style) on the heading in
   content.html, the same pattern used throughout this stylesheet. */
.pp-demo-days .pp-dd-private__copy h3 {
  font: 500 clamp(18px, 3.2vw, 22px) "Poppins", sans-serif;
  letter-spacing: -.02em;
}
.pp-demo-days .pp-dd-private__copy p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; font-weight: 300; max-width: 48ch; }
/* Full-width on mobile (wraps to its own line below the copy anyway) —
   sized to its own content at 900px+, see §13. */
.pp-demo-days .pp-dd-private .wp-block-buttons,
.pp-demo-days .pp-dd-private .wp-block-button { width: 100%; }


/* ==========================================================================
   09  PARTNER DEMO DAYS
   Icon+title row, description indented below it.
   ========================================================================== */

.pp-demo-days .pp-dd-partners__row { display: flex; flex-direction: column; }
/* Phase 7.1 fix: margin-top needs !important — this <p> is a direct child
   of .pp-dd-partners__copy, which §03's flow-layout neutralization already
   zeroes (margin-block-start/end: 0 !important) for every direct child.
   The 12px value already matched source exactly; it just never actually
   applied, which read as "paragraph sits too close to the heading." */
.pp-demo-days .pp-dd-partners__copy p { margin-top: 12px !important; font-size: 14px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); max-width: 60ch; }
/* Phase 7.1 (round 10) fix: same flow-layout-neutralization conflict as
   .pp-dd-partners__copy p above (§03), on the sibling this round is
   actually about — .pp-dd-partner-grid is ALSO a direct child of
   .pp-dd-partners__row, also in §03's list, and this margin-top never got
   !important in round 1's pass even though the value itself (source's own
   clamp(24px, 4vw, 32px), .demo-partner-grid's mobile margin-top) was
   already correct. Without !important the neutralization's
   margin-block-start: 0 !important zeroed it outright, so on mobile the
   partner list sat flush against the intro paragraph with no gap at all
   — not just a smaller gap, none. Fixing this restores source's exact
   mobile value; no number was invented. Desktop is untouched: the 900px
   layer below already sets this same property to `margin-top: 0` (source
   moves the gap to the row's own `gap` there instead) and is unaffected
   by this change either way. */
.pp-demo-days .pp-dd-partner-grid { margin-top: clamp(24px, 4vw, 32px) !important; display: grid; grid-template-columns: 1fr; gap: 20px; }
.pp-demo-days .pp-dd-partner__head { display: flex; align-items: center; gap: 12px; }
.pp-demo-days .pp-dd-partner__icon {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--pp-r-pill);
  background: var(--pp-tint);
  border: 1px solid var(--pp-tint-line-strong);
  color: var(--pp-accent);
  display: flex; align-items: center; justify-content: center;
}
.pp-demo-days .pp-dd-partner__head h3 { font: 500 14px "Poppins", sans-serif; color: var(--pp-ink); }
/* Same neutralization conflict as .pp-dd-partners__copy p above — this
   <p> is a direct child of .pp-dd-partner, also in §03's list. !important
   is still required here (without it this margin is zeroed again — see
   Phase 7.1 round 1's note on this exact rule) even though the value
   itself is no longer the source's own.

   USER-APPROVED VISUAL OVERRIDE FROM ORIGINAL SOURCE (Phase 7.1, round 4):
   source's own value is 6px; the user asked for the title→description
   gap on all six partner items to read visibly tighter, deliberately
   superseding source for this one property. Reduced to 4px (not the
   generic "5-8px off" guidance given for this request, which assumed a
   ~20-24px starting point that doesn't match what's actually declared
   here — scaled proportionally instead, a ~33% cut, matching the spirit
   of that guidance against the real 6px baseline). Do not "fix" this
   back to 6px during any later fidelity pass — it is intentional. */
.pp-demo-days .pp-dd-partner > p { margin-top: 4px !important; padding-left: 46px; font-size: 12.5px; line-height: 1.5; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   10  WORTH THE TRIP
   A numbered divider list plus a proof strip (visitor/rating stats beside a
   trio of photos).
   ========================================================================== */

.pp-demo-days .pp-dd-why-row { display: flex; flex-direction: column; }
.pp-demo-days .pp-dd-why-list { margin-top: clamp(24px, 4vw, 32px); display: flex; flex-direction: column; }
.pp-demo-days .pp-dd-why-item {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3vw, 28px);
  padding: clamp(20px, 2.8vw, 28px) 0;
  border-top: 1px solid var(--pp-ink-hair);
}
.pp-demo-days .pp-dd-why-item:last-child { border-bottom: 1px solid var(--pp-ink-hair); }
.pp-demo-days .pp-dd-why-item__num {
  flex: none;
  width: 2.2ch;
  font: 500 clamp(20px, 3vw, 26px) "Poppins", sans-serif;
  letter-spacing: -.02em;
  color: var(--pp-accent);
}
.pp-demo-days .pp-dd-why-item__body h3 { font: 500 clamp(16px, 3vw, 18px) "Poppins", sans-serif; letter-spacing: -.015em; color: var(--pp-ink); }
.pp-demo-days .pp-dd-why-item__body p { margin-top: 6px; font-size: 13.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); max-width: 48ch; }

/* Phase 7.1 (round 11) fix: same flow-layout-neutralization conflict as
   .pp-dd-partner-grid (round 10) — .pp-dd-proof is a direct child of
   .pp-dd-why-row, which is in §03's list, and this margin-top never
   carried !important even though the value is source's own exact mobile
   .demo-proof margin-top. Without !important the neutralization's
   margin-block-start: 0 !important zeroed it, so on mobile the stats
   block sat flush against the numbered list's closing divider. The
   desktop override two rules down (§13, `.pp-dd-proof { ... margin-top:
   0; ...}`) now also needs !important — once this base rule carries
   !important too, a plain (non-important) `margin-top: 0` there would
   lose to it at every width, including desktop, which would have
   silently un-done desktop's intended 0. Fixed both together so desktop
   stays exactly as before. */
.pp-demo-days .pp-dd-proof {
  margin-top: clamp(32px, 5vw, 44px) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 3.5vw, 40px);
}
.pp-demo-days .pp-dd-proof__stats { display: flex; flex: 1 1 260px; min-width: 0; }
.pp-demo-days .pp-dd-proof__stat { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; }
.pp-demo-days .pp-dd-proof__stat:first-child { padding-right: clamp(20px, 2.8vw, 32px); border-right: 1px solid var(--pp-ink-hair); }
.pp-demo-days .pp-dd-proof__stat:last-child { padding-left: clamp(20px, 2.8vw, 32px); }
.pp-demo-days .pp-dd-proof__num { font: 500 clamp(26px, 5vw, 42px) "Poppins", sans-serif; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-demo-days .pp-dd-proof__lbl { font-size: 12px; font-weight: 400; color: var(--pp-ink-56); max-width: 16ch; }
/* Mobile: scrolls horizontally at a legible size instead of squeezing all
   three photos edge-to-edge into one row; reverts to an equal 3-up,
   non-scrolling layout at 900px+ (see §13). */
.pp-demo-days .pp-dd-proof__photos {
  display: flex;
  gap: clamp(10px, 1.6vw, 14px);
  flex: 1 1 260px;
  min-width: 0;
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pp-demo-days .pp-dd-proof__photos::-webkit-scrollbar { display: none; }
.pp-demo-days .pp-dd-proof__photo {
  position: relative;
  flex: 0 0 72%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  margin: 0;
  border-radius: var(--pp-r-md);
  overflow: hidden;
}
.pp-demo-days .pp-dd-proof__photo img { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   11  WHERE TO FIND US (locations)
   ========================================================================== */

.pp-demo-days .pp-dd-location-grid { margin-top: clamp(24px, 4vw, 32px); display: grid !important; grid-template-columns: 1fr !important; gap: clamp(20px, 3vw, 28px) !important; }
.pp-demo-days .pp-dd-location {
  background: var(--pp-bone);
  border: 1px solid var(--pp-ink-line);
  border-radius: var(--pp-r-lg);
  overflow: hidden;
}
.pp-demo-days .pp-dd-location__media { position: relative !important; aspect-ratio: 16 / 10 !important; }
.pp-demo-days .pp-dd-location__media .pp-dd-location__photo { position: absolute; inset: 0; margin: 0; }
.pp-demo-days .pp-dd-location__media .pp-dd-location__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Phase 7.1 (Round 6) fix, REDUCED in Round 7: source's card height is
   purely a function of its content — .demo-location has no explicit height
   anywhere, and its padding uses the SAME clamp() value on all four sides
   (no separate "extra bottom" rule exists in source to copy). Round 6 added
   a `padding-bottom` term sized to reserve the exact space the removed
   from-Riga line would have occupied (one 13px/1.5 row + its 4px
   margin-top) — this measured LARGER than the actual visual gap the user
   wanted and read as excessive empty space below the Maps CTA. Round 7
   removes that added term entirely and restores plain, uniform padding
   matching source's own value on all four sides, same as top/left/right.
   The card is now slightly shorter than source's original (one paragraph
   fewer), which is accepted per instruction — visual balance over exact
   historical height. Both cards still match height via .pp-dd-location-grid's
   own CSS Grid row-stretch (unaffected by this change, see below). */
.pp-demo-days .pp-dd-location__body {
  padding: clamp(18px, 2.6vw, 24px) !important;
}
.pp-demo-days .pp-dd-location__body h3 { font: 500 16px "Poppins", sans-serif; letter-spacing: -.015em; color: var(--pp-ink); }
/* Phase 7.1 fix: both rules below are direct children of
   .pp-dd-location__body, in §03's flow-layout neutralization list —
   margin-top needs !important on both or the address line and the
   "Open in Google Maps" link sit flush against whatever's above them. */
.pp-demo-days .pp-dd-location__body p { margin-top: 4px !important; font-size: 13px; font-weight: 300; color: var(--pp-ink-72); }
.pp-demo-days .pp-dd-location__body .pp-dd-link-arrow { margin-top: 14px !important; }
/* Phase 7.1 (Round 6) fix: source's global `a { color: var(--ink); }` gives
   every link its own direct, full-strength ink color. Our Page Pack's
   equivalent global rule uses `color: inherit` instead (frontend.css §02),
   so this anchor — nested inside a paragraph-level rule that sets
   color:var(--pp-ink-72) for secondary copy, immediately above — was
   inheriting that muted tone rather than getting its own direct color, which
   is why the CTA read as too light/gray. Restoring the direct color here,
   scoped to just this CTA, matches source without touching the sitewide `a`
   rule or any other secondary copy. */
.pp-demo-days .pp-dd-location__body .pp-dd-link-arrow a { color: var(--pp-ink); }


/* ==========================================================================
   12  SIGN UP (copy + form)
   Lavender band, copy left, white form card right. The form itself is a
   single core/html block (no native form-field blocks in core Gutenberg) —
   same approach as the Contact Page Pack's own enquiry form.
   ========================================================================== */

/* Phase 7.1 (Round 8) fix — two issues, both at this section's own boundary:
   (1) MISSING TOP/BOTTOM DIVIDERS — source's `.demo-signup-section` (and,
   identically, `.contact-form-section`) declares `border-block: 1px solid
   var(--tint-line)` directly on the section element itself. `border-block`
   is the logical shorthand for border-block-start + border-block-end, i.e.
   both a top AND a bottom rule from one declaration, automatically
   consistent. It's on the section itself (not an inner wrapper), and this
   section is already full-bleed (see .pp-dd-section-pad, §04), so the line
   spans the true full viewport width, matching source exactly — nothing
   arbitrary or inner-container-scoped. (2) WHITE GAP ABOVE THIS SECTION —
   .pp-dd-signup was the one top-level Demo Days section that had never been
   given `"layout":{"type":"flow"}` in content.html (every other section
   with its own background color already got this opt-out in earlier
   rounds — locations in round 6, why in round 5, hero in round 2).  Left at
   WordPress core's default "constrained" `core/group` layout, this section
   was picking up a theme-injected margin-block-start from the site's own
   root block-gap setting — invisible at every other section boundary on
   this page (each one has a plain white/bone body on at least one side of
   it), but glaringly visible as a white strip here, the only boundary
   between two solid, differently-colored full-bleed sections (beige
   Locations directly into lavender Signup). The `"layout":{"type":"flow"}`
   opt-out (content.html) removes the root cause; the margin-block-start
   reset directly below is the same belt-and-suspenders reinforcement this
   file already uses everywhere else this exact WP mechanism was suspected,
   scoped to only this one section boundary — not a global spacing reset. */
.pp-demo-days .pp-dd-signup {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  border-block: 1px solid var(--pp-tint-line);
}

.pp-demo-days .pp-dd-signup-row { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 44px); }
.pp-demo-days .pp-dd-signup__copy { flex: 1 1 300px; min-width: 0; }
/* Phase 7.1: this rule already existed but targeted nothing — the left
   column's own selected-event summary paragraph didn't exist in the
   markup yet (§04 note above / content.html's new .pp-dd-signup__event).
   margin-top needs !important here because this element is a direct
   child of .pp-dd-signup__copy, which §03's flow-layout neutralization
   already zeroes (margin-block-start/end: 0 !important) for every direct
   child — !important is the same override strategy already used
   elsewhere in this file (e.g. the .pp-btn-ink hover rules in §05) for
   exactly this kind of native-margin-vs-neutralization conflict. */
.pp-demo-days .pp-dd-signup__copy > p { margin-top: 14px !important; font-size: 14px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); max-width: 44ch; }
/* Phase 7.1 fix: margin-top needs !important — .pp-dd-trust is a direct
   child of .pp-dd-signup__copy, in §03's neutralization list. This was
   the main cause of "the trust row sits almost directly under the
   heading" (§3E): the 18px gap was always being written, then zeroed by
   the neutralization's own !important rule immediately after. */
.pp-demo-days .pp-dd-trust { margin-top: 18px !important; display: flex; flex-wrap: wrap; gap: 18px; }
.pp-demo-days .pp-dd-trust-item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 400; color: var(--pp-ink-72); }

.pp-demo-days .pp-dd-form {
  flex: 1 1 340px;
  min-width: 0;
  background: var(--pp-bone);
  border-radius: var(--pp-r-lg);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--pp-ink) 8%, transparent);
  padding: clamp(24px, 3.2vw, 32px);
}
.pp-demo-days .pp-dd-form__event { margin: 0 0 16px; font-size: 12.5px; font-weight: 400; color: var(--pp-ink-56); }
.pp-demo-days .pp-dd-fields { display: grid; gap: 12px; }
/* Phase 7.1 (round 9) fix: Email used to just fall into whatever grid cell
   came next (leaving an empty second column beside it on desktop, once
   Arrival Time — the field that used to fill that cell in source — was
   removed as a permanent product decision). `.pp-dd-field--email` is a new,
   stable hook on that one field's wrapper (render.php, both the confirmed
   and waitlist forms) so it can span the full row on its own merits,
   instead of an empty column silently sitting next to it. Unconditional
   (not inside the 900px layer below) because at the base single-column
   width it's already a no-op — every field already spans the only column
   there. */
.pp-demo-days .pp-dd-fields .pp-dd-field--email { grid-column: 1 / -1; }
.pp-demo-days .pp-dd-field label { display: block; margin-bottom: 6px; font-size: 11.5px; color: var(--pp-ink-56); }
.pp-demo-days .pp-dd-field input {
  width: 100%;
  font: 400 14px "Poppins", sans-serif;
  color: var(--pp-ink);
  background: var(--pp-surface);
  border: 1px solid var(--pp-ink-hair);
  border-radius: var(--pp-r-xs);
  padding: 12px 14px;
  outline: none;
}
.pp-demo-days .pp-dd-field input:focus-visible { outline: 2px solid var(--pp-accent-soft); outline-offset: 2px; }
.pp-demo-days .pp-dd-field input::placeholder { color: var(--pp-ink-56); }
.pp-demo-days .pp-dd-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 18px; font-size: 11.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); }
.pp-demo-days .pp-dd-consent input { margin-top: 2px; flex: none; accent-color: var(--pp-accent); }
.pp-demo-days .pp-dd-consent a { color: var(--pp-ink); text-decoration: underline; }
.pp-demo-days .pp-dd-consent a:hover { color: var(--pp-accent); }


/* ==========================================================================
   13  DESKTOP LAYER (min-width: 900px) + REDUCED MOTION
   ========================================================================== */

@media (min-width: 900px) {
  .pp-demo-days .pp-dd-hero__photo img { object-position: 50% 55%; }
  .pp-demo-days .pp-dd-private .wp-block-buttons,
  .pp-demo-days .pp-dd-private .wp-block-button { width: auto; flex: none; }

  .pp-demo-days .pp-dd-partners__row { flex-direction: row; align-items: flex-start; gap: clamp(24px, 3vw, 40px); }
  .pp-demo-days .pp-dd-partners__copy { flex: 0 0 400px; max-width: 420px; }
  /* Phase 7.1 (round 11): margin-top needed !important here too, caught
     while fixing the identical pattern on .pp-dd-proof this round — once
     round 10 gave the base .pp-dd-partner-grid rule's margin-top
     !important (to survive §03's neutralization on mobile), this desktop
     override's plain (non-important) `margin-top: 0` would otherwise have
     lost to it at every width, including desktop, silently re-adding the
     mobile clamp() gap here instead of the intended 0. */
  .pp-demo-days .pp-dd-partner-grid { flex: 1 1 auto; margin-top: 0 !important; margin-left: 7%; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 28px) clamp(24px, 3vw, 36px); }

  /* Phase 7.1 round 5: the structural/proportional properties below are
     reinforced with !important — the same defensive reasoning as the
     hero and private-visit rounds (WP core's "constrained" core/group
     layout default can auto-inject its own width/gap on a group with no
     explicit `layout` attribute; content.html now opts every group in
     this section out via `"layout":{"type":"flow"}`). Values are
     unchanged; this only protects the 50/50 list/proof split and the
     stretch+center right-column alignment from being overridden. Margin
     values in this section were deliberately NOT given the same
     treatment — the reported symptoms here (heading-to-divider gap and
     title-to-description gap both reading as too LARGE) point away from
     this Page Pack's own §03 neutralization rule (which, if it were the
     cause, would zero those margins and make the gaps too SMALL, the
     opposite direction), so no margin value was touched without
     contradicting evidence. */
  .pp-demo-days .pp-dd-why-row { flex-direction: row !important; align-items: stretch !important; gap: clamp(32px, 5vw, 56px) !important; }
  .pp-demo-days .pp-dd-why-list { flex: 1 1 0 !important; min-width: 0; }
  /* Right column switches to stats-above-photos; align-items:stretch matches
     it to the numbered list's height (almost always the taller of the two),
     and justify-content:center splits the leftover space evenly above and
     below rather than dumping it all into one gap. */
  .pp-demo-days .pp-dd-proof { flex: 1 1 0 !important; min-width: 0; margin-top: 0 !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; }
  .pp-demo-days .pp-dd-proof__stats,
  .pp-demo-days .pp-dd-proof__photos { width: 100%; flex: none; }
  .pp-demo-days .pp-dd-proof__photo { flex: 1 1 0; aspect-ratio: 3 / 4; }

  .pp-demo-days .pp-dd-location-grid { grid-template-columns: 1fr 1fr !important; }

  /* Phase 7.1 fix: source's form fields sit in a 2-column grid from
     900px+ (a shared sitewide `.fields { grid-template-columns: 1fr 1fr }`
     rule the static v1 form's plain `class="fields"` picked up for free).
     The Page Pack's own scoped .pp-dd-fields class was never given the
     equivalent — it stayed single-column at every width, which is most of
     why the form card read as needing to be wider than source: fields
     that should sit two-up were instead stacking one-per-row at full card
     width. Row 1 is Name | Phone; Email (round 9: `.pp-dd-field--email`,
     above) spans both columns on its own row instead of leaving the second
     cell empty where source's Arrival Time field used to sit — that field
     is permanently absent (product decision, unrelated to this grid fix).
     The waitlist form's lone Email field is naturally full-width too, both
     from the same rule. */
  .pp-demo-days .pp-dd-fields { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-demo-days .pp-io-fade { transition: none !important; }
}


/* ==========================================================================
   14  PHASE 7 — DYNAMIC BLOCK INTEGRATION (Page Pack v2)
   --------------------------------------------------------------------------
   Styles the REAL DOM emitted by the Phase 6 plugin blocks
   (mycabin/demo-days-events, mycabin/demo-days-registration), reusing the
   same pp-dd-* tokens/classes as the rest of this stylesheet wherever the
   dynamic markup already carries them (card, badge, form, field, consent —
   all unchanged from §07/§12 above). The rules below cover ONLY what the
   dynamic markup does differently from the original static mockup:
   unwrapped card photos (no <figure> wrapper), bare <button>/<a> CTAs with
   no .wp-block-button__link ancestor, and three states (unselected/forms/
   success) that didn't exist in the static prototype at all. Plugin CSS
   (assets/css/frontend.css inside the plugin) stays functional-only —
   honeypot hiding, disabled-state mechanics, error-text color — everything
   visual below lives here, per the Phase 7 CSS-ownership split.
   ========================================================================== */

/* --- Event card photo: the dynamic block outputs wp_get_attachment_image()
   directly inside .pp-dd-card__media, with no .pp-dd-card__photo <figure>
   wrapper — style the actual <img> instead of the wrapper §07 already
   covers for the (unused-in-v2) static markup. --- */
.pp-demo-days .pp-dd-card__media .pp-dd-card__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

/* --- Event-card status badge: the static prototype set these colors via
   per-instance native Gutenberg color attributes (inline style); the
   dynamic block only ever emits class names, so the actual color now has
   to live here. Base .pp-dd-card__badge (§07) already owns
   position/shape/z-index — only fill/text color is added per state. --- */
.pp-demo-days .pp-dd-card__badge {
  background: var(--pp-ink);
  color: var(--pp-bone);
}
.pp-demo-days .pp-dd-card__badge--new {
  background: var(--pp-accent-soft);
  color: var(--pp-ink);
}
/* Full — its own restrained variant, deliberately distinct from both the
   dark "date pending" default and the lavender "open" badge, without
   inventing an unrelated new component (Phase 7 §21). Uses a mid-tone
   fill rather than --pp-stone: --pp-stone (11% ink into bone) sits at
   nearly the same lightness as --pp-surface, the card media's own
   placeholder background for photo-less cards, which made this badge
   read as invisible whenever an event has no featured image (found via
   live QA on a synthetic capacity=1 event forced Full). A photo behind
   the badge would have masked this, so it only surfaced without one. */
.pp-demo-days .mdd-badge--full {
  background: color-mix(in oklab, var(--pp-ink) 55%, var(--pp-bone));
  color: var(--pp-bone);
}

/* --- Event-card CTA: a bare <button> (registration/waitlist select) —
   the base pill shape + block-width rule already matches it via §05's
   `.pp-btn` selector list; add that selector here plus the fill colors
   §05 otherwise only defines for a .wp-block-button__link descendant. --- */
/* Phase 7.1 (round 9): font-family added — same missing-reset cause and
   fix as §05's `.pp-btn` above (this is a bare <button>, not a
   .wp-block-button__link, so it never had one either). */
.pp-demo-days .mdd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding-inline: 21px;
  border: 0;
  border-radius: var(--pp-r-pill);
  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-demo-days .mdd-cta.pp-btn-ink {
  background: var(--pp-ink);
  color: var(--pp-bone);
}
.pp-demo-days .mdd-cta.pp-btn-ink:hover:not(:disabled) { background: var(--pp-accent); }
.pp-demo-days .mdd-cta.pp-btn-outline {
  background: transparent;
  color: var(--pp-ink);
  border: 1px solid var(--pp-ink);
}
.pp-demo-days .mdd-cta.pp-btn-outline:hover:not(:disabled) { background: var(--pp-surface); }
.pp-demo-days .mdd-cta:focus-visible { outline: 2px solid var(--pp-accent-soft); outline-offset: 2px; }
/* Full-state color (the plugin's own functional CSS already sets
   opacity/cursor on :disabled — this only adds the design-language fill). */
.pp-demo-days .mdd-cta:disabled {
  background: var(--pp-stone);
  color: var(--pp-ink-56);
  border-color: transparent;
}

/* --- No-events empty state (§22) — copy comes from the block's own
   resolved empty.no_events string; this is layout/typography only. --- */
.pp-demo-days .mdd-events-empty {
  text-align: center;
  padding: clamp(32px, 5vw, 56px) 20px;
  color: var(--pp-ink-56);
  font-size: 14px;
  font-weight: 300;
}

/* --- Registration block: takes the same flex slot in .pp-dd-signup-row
   (§12) the static form used to occupy directly. --- */
.pp-demo-days .mdd-registration-block { flex: 1 1 340px; min-width: 0; }

/* Unselected (§23) and Success (§31/§32) both get the same white-card
   treatment .pp-dd-form (§12) already defines, so whichever state is
   visible always reads as "the one card" in this column — never a card
   inside a card. */
.pp-demo-days .mdd-registration-unselected,
.pp-demo-days .mdd-registration-success {
  background: var(--pp-bone);
  border-radius: var(--pp-r-lg);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--pp-ink) 8%, transparent);
  padding: clamp(24px, 3.2vw, 32px);
}
.pp-demo-days .mdd-registration-unselected {
  color: var(--pp-ink-56);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

/* Per-form heading ("Sign up for this demo day" / "Get notified for this
   demo day") — new in the dynamic markup, no static equivalent existed. */
.pp-demo-days .mdd-form__heading {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--pp-ink);
}

/* Inline form error (§33) — the plugin's own functional CSS already
   supplies a safe red color; this only tightens spacing to the design's
   own rhythm. */
.pp-demo-days .mdd-form-error {
  margin: 4px 0 14px;
  font-size: 12.5px;
}

/* Success state (§31/§32) content + actions. */
.pp-demo-days .mdd-registration-success [data-mdd-success-title] {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--pp-ink);
}
.pp-demo-days .mdd-registration-success [data-mdd-success-body] {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--pp-ink-72);
}
.pp-demo-days .mdd-success-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Bare <a class="pp-btn pp-btn-outline"> — §05's outline-color rule only
   covers the wrapped .wp-block-button case; this is the direct one. */
.pp-demo-days .mdd-success-actions .pp-btn-outline {
  background: transparent;
  color: var(--pp-ink);
  border: 1px solid var(--pp-ink);
}
.pp-demo-days .mdd-success-actions .pp-btn-outline:hover { background: var(--pp-surface); }
/* A class-based display rule (like .pp-btn's own display:inline-flex)
   otherwise outranks the browser's default [hidden] styling — this keeps
   a JS-hidden action (e.g. no Calendar link on a waitlist success)
   actually hidden. */
.pp-demo-days .mdd-success-actions [hidden] { display: none; }