/* =====================================================================
   The Execution Forum 2026 (execution-forum-2026.html).
   Composes core components; tokens only. Motion follows the site rules:
   - one headline moment: the scroll-driven hero (js/execution-forum.js);
   - explanatory motion only while on screen ([data-motion]): the themes
     path signal, the report inflow, the ticker;
   - arrivals play once: the "Now" rule, the keynote frame, the report
     cover, the agenda rail;
   - reduced motion and ?qa=1 show every block finished.
   ===================================================================== */

/* ---------------- hero ----------------
   Finished state by default. With the script, .is-playing runs the opening
   sequence once as the page loads (js/execution-forum.js), beats overlapping:
     s1 the blank between "that" and "spot" widens
     s2 "blind" rises into it, letter by letter, in yellow
     s3 it turns white, an underline closes it, and light spreads from the
        word across the frontline
     s4 the lead steps back as "at The Execution Forum 2026" arrives
     s5 the details and the invite button arrive */
@property --r { syntax: "<percentage>"; inherits: false; initial-value: 170%; }
.ef-hero { --pin-h: 100vh; position: relative; overflow: clip; }
@supports (height: 100svh) { .ef-hero { --pin-h: 100svh; } }
.ef-hero.is-measuring, .ef-hero.is-measuring * { transition: none; }
.ef-hero__pin { position: relative; display: flex; flex-direction: column; min-height: var(--pin-h); overflow: clip; }

/* the frontline: every dot a seller. A small patch is visible from the start;
   when the blind spot closes, light spreads out from the word. */
.ef-field { position: absolute; inset: 0; pointer-events: none; }
.ef-field__dim { position: absolute; inset: 0; background-image: var(--dots-dark); background-size: 22px 22px; }
.ef-field__lit, .ef-field__wave { position: absolute; inset: 0; background-image: radial-gradient(var(--c-sun) 1.3px, transparent 1.8px); background-size: 22px 22px; }
.ef-field__lit {
  opacity: .8;
  -webkit-mask-image: radial-gradient(circle at 82% 30%, #000 7%, transparent 19%);
  mask-image: radial-gradient(circle at 82% 30%, #000 7%, transparent 19%);
}
.ef-field__wave {
  opacity: .85; transition: --r 2.4s cubic-bezier(.3, .6, .2, 1) .25s;
  -webkit-mask-image: radial-gradient(circle at var(--cx, 30%) var(--cy, 50%), #000 var(--r), transparent calc(var(--r) + 16%));
  mask-image: radial-gradient(circle at var(--cx, 30%) var(--cy, 50%), #000 var(--r), transparent calc(var(--r) + 16%));
}
.is-playing:not(.s3) .ef-field__wave { --r: 0%; }
.ef-field::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-deep) 0%, color-mix(in srgb, var(--c-deep) 72%, transparent) 42%, transparent 74%); }

/* The fold carries no strip and no nav. The Sharpsell mark sits in its top
   right instead and arrives with the event lockup, so the fold resolves into
   the event first and who is hosting it second.

   Aligned to the content column rather than the viewport edge, so it lines up
   with the headline beside it, and it drops in on the same beat the lockup
   arrives on. */
.ef-hero__logo {
  position: absolute; right: var(--gutter); top: var(--sp-7); z-index: 2;
  transition: opacity .9s ease .45s, transform 1s var(--ease) .45s;
}
/* On a white chip, in its own colours — core.css does the same for client
   logos on dark ("logos are artwork on white"). Knocking the mark out to
   white instead turns the rounded square solid and the S inside it vanishes,
   because the square and the S both go white. */
.ef-hero__logo img {
  height: 26px; width: auto; box-sizing: content-box;
  padding: 7px 11px; border-radius: 9px; background: var(--c-white);
}
.is-playing:not(.s4) .ef-hero__logo { opacity: 0; transform: translateY(-14px); }
.ef-hero__inner { position: relative; z-index: 1; flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-8); }
.ef-hero__head { transition: transform 1.2s var(--ease); }
/* until the event arrives, the lead sits in the middle of the panel (the script measures --drop) */
.is-playing:not(.s4) .ef-hero__head { transform: translateY(var(--drop, 12vh)); }

.ef-title { display: flex; flex-direction: column; gap: var(--sp-3); }
.ef-hero:not(.is-playing) .ef-title__setup, .is-playing.s4 .ef-title__setup { font-size: var(--fs-title); }
.ef-title__setup { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2); transition: font-size 1.2s var(--ease); line-height: var(--lh-snug); letter-spacing: -.02em; color: var(--c-on-dark-3); animation: ef-fade var(--dur-slow) var(--ease) .15s both; }
.ef-title__line { display: block; font-family: var(--f-display); font-weight: 800; font-size: calc(var(--fs-hero) * .56); line-height: 1.08; letter-spacing: var(--ls-headline); animation: ef-fade 1s var(--ease) .45s both; transition: font-size 1.2s var(--ease); }
.is-playing:not(.s4) .ef-title__line { font-size: var(--fs-hero); }
/* fixed line breaks: the blank never lands at the end of a line */
.ef-title__a, .ef-title__b { display: block; }
.ef-title__b { white-space: nowrap; }
@keyframes ef-fade { from { opacity: 0; transform: translateY(10px); } }

/* the blank, and the word that fills it */
.ef-slot { position: relative; display: inline-block; width: var(--bw, auto); transition: width .9s var(--ease); }
.is-playing .ef-slot { width: 1.15em; }
.is-playing.s1 .ef-slot { width: var(--bw, 2.4em); }
.is-playing.s3 .ef-slot { width: auto; transition: none; } /* the word is in: it sets the width from here */
.ef-slot::after { content: ""; position: absolute; left: .06em; right: .06em; bottom: .04em; height: .08em; background-image: radial-gradient(circle, var(--c-sun) 45%, transparent 55%); background-size: .16em .08em; opacity: 0; transition: opacity .35s ease; }
.is-playing:not(.s2) .ef-slot::after { opacity: 1; animation: ef-blank 1.8s ease-in-out infinite; }
@keyframes ef-blank { 50% { opacity: .35; } }

.ef-blind {
  display: inline-block; white-space: nowrap; color: var(--c-white);
  background-image: linear-gradient(var(--c-sun), var(--c-sun)); background-repeat: no-repeat;
  background-position: 0 96%; background-size: 100% .09em;
  transition: color .7s var(--ease), background-size .9s var(--ease) .15s;
}
.ef-blind i { display: inline-block; font-style: normal; transition: transform .75s cubic-bezier(.2, 1.3, .3, 1) calc(var(--n) * 70ms), opacity .45s ease calc(var(--n) * 70ms), filter .6s ease calc(var(--n) * 70ms); }
.is-playing:not(.s2) .ef-blind i { transform: translateY(.6em); opacity: 0; filter: blur(6px); }
.is-playing:not(.s3) .ef-blind { color: var(--c-sun); background-size: 0% .09em; }

/* what arrives after the headline */
.ef-hero__foot { display: flex; flex-direction: column; gap: var(--sp-7); margin-top: clamp(var(--sp-8), 9vh, calc(var(--sp-10) + var(--sp-6))); }
.ef-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6) var(--sp-8); flex-wrap: wrap; }
.ef-event__theme, .ef-hero__meta { transition: opacity .9s ease, transform 1s var(--ease); }
.ef-event__theme { transition-delay: .55s; }
.is-playing:not(.s4) .ef-event__theme, .is-playing:not(.s5) .ef-hero__meta { opacity: 0; transform: translateY(20px); }
.is-playing:not(.s4) .ef-mark__small { opacity: 0; }
.ef-mark__small { transition: opacity .8s ease .1s; }
.is-playing:not(.s5) .ef-hero__foot { pointer-events: none; }
/* the event lockup: Archivo at full width, the "O" lit as the closed blind spot */
.ef-mark { font-family: var(--f-event); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: .86; }
.ef-mark__small { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-small); font-weight: 800; letter-spacing: .32em; color: var(--c-sun); }
.ef-mark__big { display: block; font-size: min(max(calc(var(--fs-hero) * 1.18), 5.9vw), 10.5vh, 11.2vw); }
@media (min-width: 600px) and (max-width: 900px) { .ef-mark__big { font-size: min(max(calc(var(--fs-hero) * 1.18), 8vw), 10.5vh); } } /* tablet portrait: room to grow */
.ef-mark__row { display: flex; align-items: flex-start; gap: .14em; }
.ef-mark__o { position: relative; display: inline-block; width: .78em; height: .78em; margin: 0 .05em; border-radius: 50%; vertical-align: -.02em; background: var(--c-sun); box-shadow: 0 0 0 .07em color-mix(in srgb, var(--c-sun) 22%, transparent); }
.ef-mark__year { padding-top: .05em; font-size: .36em; line-height: .92; letter-spacing: .02em; color: transparent; -webkit-text-stroke: .045em var(--c-sun); }
/* arrival: the lockup rises, then the spot lights */
.ef-mark__big { transition: opacity .8s ease .2s, transform 1.1s var(--ease) .2s, filter .8s ease .2s; }
.ef-mark__row { transition-delay: .32s; }
.ef-mark__o { transition: transform .8s cubic-bezier(.2, 1.4, .3, 1) .75s, background .4s ease .75s; }
.is-playing:not(.s4) .ef-mark__big { opacity: 0; transform: translateY(.35em); filter: blur(8px); }
.is-playing:not(.s4) .ef-mark__o { transform: scale(.2); background: var(--c-dark-line); }
.ef-event__theme { margin-top: var(--sp-4); font-size: var(--fs-lead); font-weight: 600; color: var(--c-sun); }


.ef-hero__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6) var(--sp-8); flex-wrap: wrap; padding-top: var(--sp-5); border-top: 1px solid var(--c-dark-line); }
.ef-facts { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); }
.ef-facts i { display: block; font-style: normal; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-dark-3); }
.ef-facts b { display: block; margin-top: var(--sp-1); }
.ef-hero__cta { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }

/* ---------------- ticker ---------------- */
.ef-ticker { background: var(--c-brand); color: var(--c-white); }
.ef-ticker .marquee__track { height: 64px; animation-duration: 60s; }
.ef-ticker__item { font-family: var(--f-event); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: var(--fs-subtitle); letter-spacing: -.01em; white-space: nowrap; }
.ef-ticker__sep { flex: none; width: 8px; height: 8px; margin-inline: var(--sp-7); background: var(--c-sun); transform: rotate(45deg); }

/* ---------------- why now: then and now ---------------- */
.ef-why__head { max-width: 1060px; }
.ef-why__head .ef-why__title { font-size: var(--fs-page); line-height: 1.04; letter-spacing: var(--ls-headline); }
.ef-why__title em { font-style: normal; color: var(--c-brand); }
.ef-shift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-9); }
.ef-shift__col { position: relative; padding-top: var(--sp-6); border-top: 1px solid var(--c-line-2); }
.ef-shift__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.ef-shift__col--now .ef-shift__label { color: var(--c-brand); }
.ef-shift__lead { margin-top: var(--sp-3); font-family: var(--f-display); font-weight: 700; font-size: calc(var(--fs-title) * 1.2); line-height: 1.3; letter-spacing: -.015em; transition: color 1s ease 1s; }
.ef-shift__text { margin-top: var(--sp-3); color: var(--c-label); }
/* arrival: the old view fades back, the new one draws its line */
.ef-shift__col--now::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--c-brand); transform-origin: left; transition: transform var(--dur-slow) var(--ease) .3s; }
.js-rv .ef-shift__col--now.rv:not(.is-in)::before { transform: scaleX(0); }
.js-rv .ef-shift__col--then.rv.is-in .ef-shift__lead { color: var(--c-muted); }

/* ---------------- keynote ---------------- */
.ef-keynote__grid { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(var(--sp-7), 5vw, var(--sp-10)); align-items: center; }
.ef-keynote .framed-photo { max-width: 400px; }
.js-rv .ef-keynote .framed-photo.rv::before { transition: transform var(--dur-slow) var(--ease) .35s; }
.js-rv .ef-keynote .framed-photo.rv:not(.is-in)::before { transform: none; }
.ef-keynote__name { font-size: var(--fs-page); line-height: 1; letter-spacing: var(--ls-headline); }
.ef-keynote__role { margin-top: var(--sp-4); font-size: var(--fs-lead); font-weight: 600; color: var(--c-ink-2); }
.ef-keynote__talk { margin-top: var(--sp-6); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -.02em; }
.ef-keynote__logo { margin-top: var(--sp-8); }
.ef-keynote__logo img { height: 36px; width: auto; }

/* ---------------- themes: three focus areas on one dotted path ---------------- */
.ef-flow { --g: var(--sp-8); --end: calc((100% - 2 * var(--g)) / 3 - 12px); position: relative; }
.ef-flow::before { content: ""; position: absolute; top: 10px; left: 12px; right: var(--end); height: 4px; background-image: radial-gradient(circle, var(--c-line-2) 1.3px, transparent 1.7px); background-size: 10px 4px; }
.ef-flow__signal { position: absolute; z-index: 2; top: 6px; left: 12px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--c-sun); box-shadow: 0 0 0 5px var(--c-sun-tint); animation: ef-travel 4.8s linear infinite; }
@keyframes ef-travel { 0% { left: 12px; opacity: 0; } 5% { opacity: 1; } 88% { left: calc(100% - var(--end)); opacity: 1; } 100% { left: calc(100% - var(--end)); opacity: 0; } }
.ef-flow__list { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.ef-flow__item { position: relative; padding-top: var(--sp-9); }
.js-rv .ef-flow__item.rv { transition-delay: calc(var(--d, 0) * 110ms); }
.ef-flow__node { position: absolute; z-index: 1; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--c-paper); border: 2px solid var(--c-brand); animation: ef-hit 4.8s linear calc(var(--d, 0) * 2.112s) infinite; }
@keyframes ef-hit { 0%, 9% { background: var(--c-sun); border-color: var(--c-sun); transform: scale(1.15); } 22%, 100% { background: var(--c-paper); border-color: var(--c-brand); transform: none; } }
.ef-flow__num { display: block; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-stat); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--c-brand); }
.ef-flow__title { margin-top: var(--sp-4); font-size: calc(var(--fs-title) * 1.2); line-height: 1.25; letter-spacing: -.02em; }
.ef-flow__text { margin-top: var(--sp-3); color: var(--c-label); }

/* ---------------- report: four sources flow into the report ---------------- */
.ef-report__grid { position: relative; display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: var(--sp-10); align-items: center; }
.ef-cover { position: relative; width: 100%; max-width: 360px; aspect-ratio: 3 / 4; margin-left: auto; border-radius: var(--r-sm) var(--r-md) var(--r-md) var(--r-sm); background: var(--c-brand); overflow: hidden; color: var(--c-white); transform: rotate(-4deg); box-shadow: var(--sh-lift), inset 10px 0 0 color-mix(in srgb, var(--c-deep) 35%, transparent); transition: transform var(--dur-slow) var(--ease); }
.js-rv .ef-cover.rv { transition: opacity .6s ease, transform 1.1s var(--ease); }
.js-rv .ef-cover.rv:not(.is-in) { transform: rotate(-12deg) translateY(32px); }
.js-rv .ef-cover.rv.is-in { transform: rotate(-4deg); }
.ef-cover:hover, .js-rv .ef-cover.rv.is-in:hover { transform: rotate(0deg) translateY(-6px); }
.ef-cover__dots { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--c-white) 24%, transparent) 1.2px, transparent 1.7px); background-size: 16px 16px; }
.ef-cover__lit {
  position: absolute; inset: 0; background-image: radial-gradient(var(--c-sun) 1.6px, transparent 2.1px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 68% 36%, #000 16%, transparent 44%);
  mask-image: radial-gradient(circle at 68% 36%, #000 16%, transparent 44%);
}
.ef-cover__body { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--sp-7) var(--sp-6); }
.ef-cover__year { align-self: flex-end; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); }
.ef-cover__title { font-stretch: 125%; margin-top: auto; padding-bottom: var(--sp-4); border-bottom: 2px solid var(--c-sun); font-family: var(--f-event); font-weight: 900; font-size: calc(var(--fs-figure) * .82); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }

.ef-sources { list-style: none; padding-left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-8); }
.ef-sources li { display: flex; align-items: center; }
.ef-sources__path { position: relative; flex: none; width: calc(var(--sp-10) + var(--sp-8)); height: 4px; margin-left: calc(var(--sp-10) * -1); margin-right: var(--sp-3); background-image: radial-gradient(circle, var(--c-dark-line) 1.2px, transparent 1.6px); background-size: 9px 4px; }
.ef-sources__path i { position: absolute; top: 50%; right: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c-sun); opacity: 0; animation: ef-inflow 2.6s ease-in calc(var(--d, 0) * .65s) infinite; }
@keyframes ef-inflow { 0% { right: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { right: 100%; opacity: 0; } }
.ef-report .callout { margin-top: var(--sp-7); }

/* ---------------- agenda: a rail that fills as the evening scrolls past ---------------- */
.ef-agenda { --fill: 1; position: relative; list-style: none; max-width: 880px; padding-left: 64px; }
.ef-agenda::before, .ef-agenda::after { content: ""; position: absolute; left: 11px; top: var(--rail-top, 36px); width: 2px; height: var(--rail-h, calc(100% - 72px)); }
.ef-agenda::before { background-image: radial-gradient(circle, var(--c-line-2) 1.1px, transparent 1.5px); background-size: 2px 8px; }
.ef-agenda::after { background: var(--c-brand); transform-origin: top; transform: scaleY(var(--fill)); }
.ef-agenda__item { position: relative; padding-block: var(--sp-6); }
.ef-agenda__node { position: absolute; z-index: 1; left: -64px; top: calc(var(--sp-6) + 2px); width: 24px; height: 24px; border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 0 5px var(--c-brand-tint); transition: background var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease); }
.ef-agenda__item--key .ef-agenda__node { background: var(--c-sun); box-shadow: 0 0 0 5px var(--c-sun-tint), inset 0 0 0 2px var(--c-brand); }
.ef-agenda__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand); }
.ef-agenda__title { margin-top: var(--sp-2); font-size: var(--fs-h2); transition: color var(--dur); }
.ef-agenda__text { margin-top: var(--sp-2); max-width: 60ch; color: var(--c-label); }
.is-tracking .ef-agenda__item:not(.is-on) .ef-agenda__node { background: var(--c-paper); box-shadow: inset 0 0 0 2px var(--c-line-2); transform: scale(.85); }
.is-tracking .ef-agenda__item:not(.is-on) .ef-agenda__title { color: var(--c-muted); }

/* ---------------- who should attend ---------------- */
.ef-audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.ef-audience__item { display: flex; flex-direction: column; min-height: 300px; padding: var(--sp-8); }
.ef-audience__item:first-child { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-white); }
.ef-audience__item:first-child .card__label { color: var(--c-on-dark-2); }
.ef-audience__item:first-child .card__text { color: var(--c-on-dark-2); }
.ef-audience__title { margin-top: auto; padding-top: var(--sp-8); font-size: var(--fs-display); }

/* ---------------- invite: the closing band, with the form ---------------- */
.ef-invite__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--sp-10); align-items: center; }
.ef-invite__title { margin-inline: 0; max-width: 14ch; text-wrap: balance; font-family: var(--f-event); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; }
.ef-invite .lede { margin-inline: 0; }
/* the form as an invitation: details above, a perforated stub below */
.ef-ticket { position: relative; color: var(--c-ink); filter: drop-shadow(0 34px 44px color-mix(in srgb, var(--c-deep) 60%, transparent)); }
.ef-ticket__main, .ef-ticket__stub { --notch: 15px; -webkit-mask-size: 51% 100%; mask-size: 51% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top, right top; mask-position: left top, right top; }
.ef-ticket__main {
  padding: var(--sp-7) var(--sp-8) var(--sp-8); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--c-white);
  -webkit-mask-image: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)), radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + .5px));
  mask-image: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)), radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + .5px));
}
.ef-ticket__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-6); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--c-line); }
.ef-ticket__name { font-family: var(--f-event); font-stretch: 125%; font-weight: 900; font-size: var(--fs-small); letter-spacing: .02em; text-transform: uppercase; }
.ef-ticket__name span { color: var(--c-brand); }
.ef-ticket__tag { display: inline-flex; align-items: center; gap: var(--sp-2); height: 30px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--c-sun-soft); font-size: var(--fs-meta); font-weight: 700; color: var(--c-ink-2); }
.ef-ticket__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-sun); box-shadow: 0 0 0 2px var(--c-sun-tint); }
.ef-ticket__stub {
  position: relative; display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-8); border-radius: 0 0 var(--r-lg) var(--r-lg);
  background-color: var(--c-paper-2); background-image: radial-gradient(circle, var(--c-line-2) 1.5px, transparent 2px); background-size: 12px 4px; background-repeat: repeat-x; background-position: var(--notch) 0;
  -webkit-mask-image: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + .5px)), radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + .5px));
  mask-image: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + .5px)), radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + .5px));
}
.ef-ticket__stub { container-type: inline-size; }
.ef-ticket__facts { flex: 1; display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: var(--sp-4) var(--sp-6); }
.ef-ticket__facts dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.ef-ticket__facts dd { margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 700; line-height: 1.4; }
/* a narrow ticket (two-column tablets): venue gets its own line */
@container (max-width: 520px) { .ef-ticket__facts { grid-template-columns: max-content minmax(0, 1fr); } .ef-ticket__facts > div:last-child { grid-column: 1 / -1; } }
.ef-ticket__stamp { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c-sun); box-shadow: 0 0 0 6px var(--c-sun-tint); }

.ef-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.ef-field-in label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-small); font-weight: 700; color: var(--c-ink-2); }
.ef-field-in input { width: 100%; height: 54px; padding: 0 var(--sp-4); border-radius: var(--r-sm); border: 1.5px solid var(--c-line); background: var(--c-paper-2); font: inherit; font-size: var(--fs-body); color: var(--c-ink); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.ef-field-in input:hover { border-color: var(--c-line-2); }
.ef-field-in input:focus { outline: none; background: var(--c-white); border-color: var(--c-brand); box-shadow: 0 0 0 4px var(--c-brand-tint); }
.ef-field-in input[aria-invalid="true"] { border-color: var(--c-brand); background: var(--c-white); }
.ef-field-in__err { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-meta); font-weight: 600; color: var(--c-brand); }
.ef-field-in__err::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--c-brand); color: var(--c-white); font-size: var(--fs-micro); font-weight: 800; line-height: 1; }
.ef-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ef-form__status { margin-top: var(--sp-5); padding: var(--sp-4); border-radius: var(--r-sm); background: var(--c-brand-tint); color: var(--c-brand-dark); font-size: var(--fs-small); font-weight: 600; }
.ef-form__status a { text-decoration: underline; text-underline-offset: 3px; }
.ef-form__submit { margin-top: var(--sp-7); height: 58px; border: 0; cursor: pointer; }
.ef-form__submit[disabled] { opacity: .75; cursor: progress; transform: none; }
.ef-form__done { padding-block: var(--sp-8); text-align: center; outline: none; }
.ef-form__tick { width: 64px; height: 64px; margin-inline: auto; border-radius: 50%; display: grid; place-items: center; background: var(--c-brand); color: var(--c-white); box-shadow: 0 0 0 8px var(--c-brand-tint); animation: ef-pop .5s var(--ease) both; }
.ef-form__tick .icon { width: 28px; height: 28px; stroke-width: 2.4; }
.ef-form__thanks { margin-top: var(--sp-6); font-family: var(--f-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.02em; }
.ef-form__next { margin-top: var(--sp-2); color: var(--c-label); }
@keyframes ef-pop { from { opacity: 0; transform: scale(.6); } }

/* ---------------- footer (this page only) ---------------- */
.ef-foot { padding-block: var(--sp-7); background: var(--c-paper); }
.ef-foot__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-8); flex-wrap: wrap; }
.ef-foot__logo { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--c-label); }
.ef-foot__logo img { height: 26px; width: auto; }
.ef-foot__links { display: flex; gap: var(--sp-6); flex-wrap: wrap; font-size: var(--fs-small); font-weight: 600; }
.ef-foot__links a:hover { color: var(--c-brand); }
.ef-foot__copy { font-size: var(--fs-small); color: var(--c-muted); }

/* ---------------- tablet and mobile ---------------- */
@media (max-width: 900px) {
  .ef-report__grid, .ef-invite__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-9); }
  .ef-ticket { max-width: 640px; }
  .ef-cover { max-width: 280px; margin-inline: auto; }
  .ef-sources__path { display: none; }
  /* themes: one column; the path only runs across three */
  .ef-flow__list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .ef-flow::before, .ef-flow__signal { display: none; }
  .ef-flow__node { display: none; }
  .ef-flow__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-6); padding-top: 0; }
  .ef-flow__num { grid-row: span 2; }
  .ef-flow__title { margin-top: 0; }
}
@media (max-width: 760px) {
  .ef-hero__logo { top: var(--sp-5); }
  .ef-hero__logo img { height: 22px; }
  .ef-hero__inner { padding-block: var(--sp-6); }
  .ef-hero__foot { margin-top: var(--sp-8); gap: var(--sp-5); }
  .ef-hero__row { gap: var(--sp-4); }
  .ef-hero__meta { padding-top: var(--sp-4); gap: var(--sp-4); }
  .ef-hero__cta .link-arrow { display: none; }
        /* phones: the details as four short lines, no labels */
  .ef-facts { flex-direction: column; gap: 2px; }
  .ef-facts i { display: none; }
  .ef-facts b { margin-top: 0; font-size: var(--fs-small); font-weight: 600; }
  .ef-field::after { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c-deep) 70%, transparent) 60%, var(--c-deep) 100%); }
    .ef-keynote__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-9); }
  .ef-keynote .framed-photo { max-width: 260px; }
  .ef-shift, .ef-audience, .ef-form__grid { grid-template-columns: minmax(0, 1fr); }
  .ef-flow__item { grid-template-columns: minmax(0, 1fr); }
  .ef-flow__num { grid-row: auto; font-size: var(--fs-figure); }
  .ef-flow__title { margin-top: var(--sp-2); }
  .ef-agenda { padding-left: 48px; }
  .ef-agenda__node { left: -48px; }
  .ef-agenda::before, .ef-agenda::after { left: 11px; }
    .ef-audience__item { min-height: 0; }
  .ef-ticket__main { padding: var(--sp-6) var(--sp-5) var(--sp-7); }
  .ef-ticket__stub { padding: var(--sp-6) var(--sp-5); align-items: flex-start; }
  .ef-ticket__facts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .ef-ticket__stamp { width: 32px; height: 32px; box-shadow: 0 0 0 4px var(--c-sun-tint); }
}