/* =============================================================================
   I4PL Conference 2026 - Sponsorship page
   -----------------------------------------------------------------------------
   Every control sits at or above the 16px floor, every input has a 48px+ target,
   and focus states are visible on both light and dark grounds.
   ============================================================================= */

/* --- Proof and reach numbers --------------------------------------------- */
.proof-band { padding: 3rem 0; background: var(--ink); color: var(--muted-dark); }
.proof-band .section-title { color: var(--white); }
.proof-band .section-lead, .proof-band .eyebrow { color: var(--muted-dark); }
.proof-band .eyebrow { color: var(--cyan); }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.stat {
  padding: 1.35rem 1.15rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
}
.stat-num {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  display: block; margin-top: .6rem;
  font-size: var(--t-small); font-weight: 700; color: var(--white);
  line-height: 1.35;
}

/* --- Audience ------------------------------------------------------------ */
.audience-band { padding: 3rem 0; background: var(--paper-2); }
.audience-grid { display: grid; gap: 2.5rem; }
.sub-h { font-size: var(--t-h3); letter-spacing: -.02em; margin-bottom: 1rem; }

.who-list { display: grid; gap: .85rem; margin-top: 1.5rem; }
.who-list li {
  position: relative; padding-left: 2rem;
  font-size: var(--t-body); font-weight: 600;
}
.who-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.05rem; height: .55rem;
  border-left: 3px solid var(--cyan); border-bottom: 3px solid var(--cyan);
  transform: rotate(-45deg);
}
.sector-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.sector {
  padding: .55rem .95rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: var(--t-small); font-weight: 700; color: var(--body);
}

/* --- Tiers --------------------------------------------------------------- */
.tiers-band { padding: 3rem 0; }
.tier-stack { display: grid; gap: 1.25rem; }
.tier {
  padding: 1.75rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 6px solid var(--muted);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  scroll-margin-top: 7rem;
}
.tier-maroon { border-top-color: var(--maroon); }
.tier-navy   { border-top-color: var(--navy); }
.tier-blue   { border-top-color: var(--blue); }
.tier-cyan   { border-top-color: var(--cyan); }
.tier-slate  { border-top-color: var(--muted); }

.tier-head { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.tier-name { font-size: var(--t-h2); letter-spacing: -.03em; }
.tier-lead { margin-top: .6rem; max-width: 52ch; color: var(--muted); }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem; }
.tier-amt {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 900; letter-spacing: -.04em; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.tier-cur { font-size: var(--t-small); font-weight: 700; color: var(--muted); }
.tier-avail {
  padding: .25rem .65rem; border-radius: .4rem;
  background: var(--paper-2);
  font-size: var(--t-small); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

.tier-body { display: grid; gap: 1.5rem; }
.tier-group-h {
  margin-bottom: .75rem;
  font-size: var(--t-small); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tier-list { display: grid; gap: .55rem; }
.tier-list li {
  position: relative; padding-left: 1.3rem;
  font-size: var(--t-small); font-weight: 600;
}
.tier-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--cyan);
}
.tier-cta { margin-top: 1.5rem; }

/* --- Signature events ---------------------------------------------------- */
.sig-band { padding: 3rem 0; background: var(--ink-2); color: var(--muted-dark); }
.sig-band .section-title { color: var(--white); }
.sig-band .section-lead { color: var(--muted-dark); }
.sig-band .eyebrow { color: var(--cyan); }
.sig-grid { display: grid; gap: 1.25rem; }
.sig {
  padding: 1.75rem 1.5rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
}
.sig-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.sig-name { font-size: var(--t-h3); letter-spacing: -.02em; color: var(--white); }
.sig-price {
  font-size: 1.5rem; font-weight: 900; color: var(--cyan);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.sig-avail {
  margin: .5rem 0 .9rem;
  font-size: var(--t-small); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cyan);
}

/* --- Add-ons and non-booth ----------------------------------------------- */
.addons-grid { display: grid; gap: 2.5rem; }
.ao-wrap {
  margin-top: 1.5rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1);
}
.ao-table { width: 100%; border-collapse: collapse; }
.ao-table thead th {
  padding: .9rem 1.1rem;
  background: var(--paper-2);
  font-size: var(--t-small); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-align: left;
}
.ao-table tbody tr { border-top: 1px solid var(--line); }
.ao-table th[scope="row"] {
  padding: .9rem 1.1rem; text-align: left;
  font-size: var(--t-small); font-weight: 700; color: var(--ink);
}
.ao-table td { padding: .9rem 1.1rem; font-size: var(--t-small); }
.ao-price { font-weight: 800; color: var(--navy); white-space: nowrap; }
.ao-qty { color: var(--muted); text-align: right; }

.nb-stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
.nb {
  padding: 1.35rem 1.25rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r);
}
.nb-name { font-size: var(--t-body); font-weight: 900; letter-spacing: -.01em; }
.nb-price { margin: .35rem 0 .5rem; font-size: 1.25rem; font-weight: 900; color: var(--navy); }
.nb-body { font-size: var(--t-small); color: var(--muted); }

/* --- Terms --------------------------------------------------------------- */
.terms-band { padding: 3rem 0; background: var(--paper-2); }
.term-grid { display: grid; gap: 1.25rem; }
.term {
  padding: 1.5rem 1.35rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
}
.term-h { margin-bottom: .6rem; font-size: var(--t-body); font-weight: 900; }
.term p { font-size: var(--t-small); color: var(--body); }

/* --- Enquiry form -------------------------------------------------------- */
.enquiry-band { padding: 3rem 0; background: var(--ink); color: var(--muted-dark); }
.enquiry-band .section-title { color: var(--white); }
.enquiry-band .eyebrow { color: var(--cyan); }
.enquiry-grid { display: grid; gap: 2.5rem; }
.enquiry-lead { margin-top: 1.25rem; font-size: var(--t-lead); max-width: 46ch; }
.enquiry-mail { margin-top: 1.25rem; font-size: var(--t-small); }
.enquiry-mail a { color: var(--cyan); font-weight: 700; }

.enquiry-form {
  padding: 1.75rem 1.5rem;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  display: grid; gap: 1.15rem;
}
.f-row { display: grid; gap: .45rem; }
.f-two { display: grid; gap: 1.15rem; }
.f-lab { font-size: var(--t-small); font-weight: 800; color: var(--ink); }
.f-req { color: var(--maroon); margin-left: .15rem; }
.f-in {
  width: 100%;
  min-height: 3.25rem;              /* 52px target, above the 44px minimum */
  padding: .8rem 1rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--t-body);         /* 17px: never shrink form text */
  font-weight: 600;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.f-in:hover { border-color: rgba(11, 27, 51, .3); }
.f-in:focus { outline: 3px solid var(--focus); outline-offset: 2px; background: var(--white); }
.f-in::placeholder { color: var(--muted); font-weight: 500; }
.f-area { min-height: 9rem; resize: vertical; line-height: 1.55; }
select.f-in { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - .95rem) 55%;
  background-size: .38rem .38rem, .38rem .38rem;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.f-in.is-invalid { border-color: var(--maroon); background: rgba(138, 35, 79, .05); }
.f-hint { font-size: var(--t-small); color: var(--muted); }
/* Phone and extension share a row; the extension is sized for four digits. */
.f-phone { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: .6rem; }
.f-ext { text-align: center; padding-left: .5rem; padding-right: .5rem; }

/* Honeypot: removed from view and from assistive tech, still fillable by bots. */
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-hp input { font-size: 16px; } /* never triggers iOS input zoom, even if focused */

.f-submit { width: 100%; margin-top: .25rem; }
.f-submit[disabled] { opacity: .6; cursor: progress; transform: none; }

.f-status { margin: 0; font-size: var(--t-small); font-weight: 700; }
.f-status:empty { display: none; }
/* A blocking message must persist, not flash past: these stay until resolved. */
.f-status.is-error { color: #8a234f; padding: .85rem 1rem; border-left: 4px solid var(--maroon); background: rgba(138, 35, 79, .08); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.f-status.is-ok    { color: #015b57; padding: .85rem 1rem; border-left: 4px solid var(--cyan); background: rgba(3, 186, 178, .1); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--t-body); }
.f-status.is-busy  { color: var(--muted); }
.f-privacy { margin: 0; font-size: var(--t-small); color: var(--muted); }

@media (min-width: 40rem) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .f-two { grid-template-columns: 1fr 1fr; }
  .sig-grid, .term-grid { grid-template-columns: repeat(2, 1fr); }
  .tier, .enquiry-form { padding: 2rem; }
}

@media (min-width: 62rem) {
  .proof-band, .audience-band, .tiers-band, .sig-band, .terms-band, .enquiry-band { padding: 5rem 0; }
  .audience-grid { grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: start; }
  .addons-grid { grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: start; }
  .tier { padding: 2.5rem; }
  .tier-head { grid-template-columns: 1fr auto; align-items: start; gap: 2rem; }
  .tier-price { flex-direction: column; align-items: flex-end; text-align: right; }
  .tier-body { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .sig-grid { grid-template-columns: repeat(3, 1fr); }
  .term-grid { grid-template-columns: repeat(3, 1fr); }
  .enquiry-grid { grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
  .enquiry-form { padding: 2.5rem; }
  .f-submit { width: auto; justify-self: start; padding-inline: 2.5rem; }
}

/* --- Reach --------------------------------------------------------------- */
.reach-band { padding: 3rem 0; background: var(--navy); color: var(--muted-dark); }
.reach-band .section-title { color: var(--white); }
.reach-band .section-lead { color: var(--muted-dark); }
/* --cyan measures only 4.09:1 on the navy ground. The brighter cyan is
   6.16:1 and stays on brand. */
.reach-band .eyebrow { color: var(--cyan-bright); }
.stat-grid-dark .stat { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }

@media (min-width: 62rem) { .reach-band { padding: 5rem 0; } }

/* =========================================================
   Sponsorship: the room, in motion and in pictures
   ---------------------------------------------------------
   A tier table states the price. It cannot show a prospect the audience they
   are buying access to, which is the whole proposition. These three blocks do
   that work: the hall in motion behind the headline, three frames of the real
   room between the argument and the prices, and the four streams a category
   sponsor can attach their name to.
   ========================================================= */
.page-hero.has-video .page-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 1;
}
.page-hero.has-video .page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero.has-video .page-hero-scrim { z-index: 2; }
.page-hero.has-video .page-hero-inner { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .page-hero.has-video .page-hero-video { display: none; }
}

.room-band { padding: 0 0 3.5rem; }
.room-strip { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.room-shot { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-2); }
.room-shot-img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 62rem) {
  .room-strip { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .room-shot:first-child { grid-column: span 1; }
}

.stream-band { padding: 0 0 4rem; }
.stream-mini-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.75rem; }
.stream-mini {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1);
}
.stream-mini img { display: block; width: 100%; height: auto; }
.stream-mini h3 { margin: 1rem 1.15rem .35rem; font-size: 1.05rem; line-height: 1.3; }
.stream-mini p { margin: 0 1.15rem 1.15rem; color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
@media (min-width: 48rem) { .stream-mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 82rem) { .stream-mini-grid { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================
   SV2: the sponsorship page as a piece of marketing
   ---------------------------------------------------------
   The page was thirteen light sections in a row, each one opening with the
   same small uppercase label, each card sized as though it were the only
   thing on screen. It read as a document. Three moves fix that: colour
   rhythm so the eye has somewhere to go, a real price ladder with one tier
   carrying the weight, and far fewer labels.
   ========================================================= */

/* --- 1. Colour rhythm. Navy carries the proof and the streams, paper
       carries the reading, maroon carries the ask. ---------------------- */
.sv2 .proof-band {
  background: linear-gradient(160deg, var(--ink) 0%, #10294a 55%, var(--ink-3) 100%);
  color: var(--white);
  padding: 4rem 0;
}
.sv2 .proof-band .section-title,
.sv2 .proof-band .eyebrow { color: var(--white); }
.sv2 .proof-band .section-lead { color: rgba(255,255,255,.86); }
.sv2 .proof-band .stat-num {
  font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  line-height: 1; color: var(--cyan-bright); letter-spacing: -.03em;
}
.sv2 .proof-band .stat-lbl { color: rgba(255,255,255,.9); }
.sv2 .proof-band .stat { border: 0; background: transparent; padding: 0; }

.sv2 .stream-band {
  background: var(--ink);
  color: var(--white);
  padding: 4rem 0 4.5rem;
}
.sv2 .stream-band .section-title { color: var(--white); }
.sv2 .stream-band .section-lead { color: rgba(255,255,255,.86); }
.sv2 .stream-mini {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.sv2 .stream-mini h3 { color: var(--white); }
.sv2 .stream-mini p { color: rgba(255,255,255,.82); }

/* --- 2. Fewer labels. The skill's cap is one eyebrow per three sections;
       this page had one on all twelve. Keep the hero, the packages and the
       enquiry. Everything else is announced by its own headline. --------- */
.sv2 .eyebrow { display: none; }
.sv2 .page-hero .eyebrow,
.sv2 .tiers-band .eyebrow,
.sv2 .enquiry-band .eyebrow { display: block; }

/* --- 3. A price ladder, not five identical slabs. -------------------- */
.sv2 .tiers-band { background: var(--paper); padding: 4rem 0 4.5rem; }
.sv2 .tier {
  border-radius: var(--r);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sv2 .tier:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.sv2 .tier-amt {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  letter-spacing: -.03em; line-height: 1;
}
/* The flagship carries the weight. One tier in brand maroon, the rest calm. */
.sv2 #tier-presenting {
  background: linear-gradient(155deg, var(--maroon) 0%, #5f1737 100%);
  color: var(--white);
  border-color: transparent;
}
.sv2 #tier-presenting .tier-name,
.sv2 #tier-presenting .tier-amt,
.sv2 #tier-presenting .tier-group-h { color: var(--white); }
.sv2 #tier-presenting .tier-lead,
.sv2 #tier-presenting .tier-list li { color: rgba(255,255,255,.9); }
.sv2 #tier-presenting .tier-cur,
.sv2 #tier-presenting .tier-avail { color: rgba(255,255,255,.78); }
/* The pill kept its light paper background on the dark card, leaving near-white
   text on near-white (1.11:1). Give it a dark pill so it reads at AA or better. */
.sv2 #tier-presenting .tier-avail { background: rgba(255,255,255,.14); color: #ffffff; }

/* --- 4. Density. Sections were padded as though each were a landing page. */
.sv2 .page-main { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.sv2 .audience-band, .sv2 .reach-band, .sv2 .sig-band { padding: 3.25rem 0; }
.sv2 .room-band { padding: 0 0 3.25rem; }

/* =========================================================
   Sponsorship package download
   ---------------------------------------------------------
   Sits under the tier heading, where a sponsor is comparing prices, and in
   the enquiry panel beside the email address, where they are deciding. Label
   at the 16px floor, the file note at 14px, both at AA contrast on white.
   ========================================================= */
.pkg-dl-row { margin: 0 0 1.5rem; }
.pkg-dl {
  display: inline-flex; align-items: baseline; flex-wrap: wrap;
  gap: .35rem .75rem;
  padding: .8rem 1.15rem;
  border: 2px solid var(--cyan-deep);
  border-radius: var(--r);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.pkg-dl:hover { background: var(--paper); }
.pkg-dl:active { transform: translateY(1px); }
.pkg-dl:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pkg-dl-label { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.pkg-dl-meta { font-size: .875rem; font-weight: 600; color: var(--cyan-deep); white-space: nowrap; }
.enquiry-pkg { margin-top: 1.25rem; }

/* =========================================================
   Micro-sponsorships on phones
   ---------------------------------------------------------
   Root cause of the sideways scroll: a grid item will not shrink below its
   content by default. The three-column price table set its column to about
   455px on a 375px phone, and the non-booth cards sharing that column were
   dragged out with it. .ao-wrap's overflow:hidden only clips the table's own
   box; it cannot stop the column itself growing.
   ========================================================= */
.addons-grid > * { min-width: 0; }

@media (max-width: 39.99rem) {
  /* A single long word at heading size cannot wrap without help. French
     "Microcommandites" hyphenates; the English title breaks at its hyphen. */
  .section-title { hyphens: auto; overflow-wrap: break-word; }

  /* Each table row becomes a small card: the item name across the top, then
     price and availability side by side. The column headings are hidden, so
     each value carries its own label from data-label. */
  .ao-table thead { display: none; }
  .ao-table, .ao-table tbody { display: block; width: 100%; }
  .ao-table tbody tr {
    display: grid; grid-template-columns: 1fr auto;
    gap: .3rem .75rem; padding: .95rem 1rem;
  }
  .ao-table th[scope="row"] { grid-column: 1 / -1; padding: 0; }
  .ao-table td { display: block; padding: 0; }
  .ao-table td.ao-price { white-space: normal; }
  .ao-table td.ao-qty { text-align: right; }
  .ao-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700; color: var(--muted);
  }
}

/* Reach band holds three stats: full-width third card on phones, three across above. */
.stat-grid-3 > :last-child { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .stat-grid.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .stat-grid-3 > :last-child { grid-column: auto; }
}
.tier-cta-2 { margin-left: .75rem; } @media (max-width: 560px) { .tier-cta-2 { margin-left: 0; } }
a.tier-avail { text-decoration: underline; text-underline-offset: 3px; } a.tier-avail:hover { text-decoration-thickness: 2px; }