/* =====================================================================
   eBay Baltic Export Summit 2026 — light theme per DESIGN.md
   Palette-locked: variables.scss tokens only. Market Sans 400/600.
   White is the page. Neutrals do the work. Brand colour = action or
   emphasis, ONE accent per section. Single 8px radius. 8px rhythm.
   v40: fully static build — no scroll animations (client direction).
   The only scroll-driven effect kept, by client request, is the agenda
   progress rail. Everything else renders in its final state on load.
   ===================================================================== */

@font-face{
  font-family:"Market Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/MarketSans-Regular.woff") format("woff");
}
@font-face{
  font-family:"Market Sans"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/MarketSans-SemiBold.woff") format("woff");
}

:root{
  /* Brand — eBay's four core colours, i.e. the four logo colours, taken from the
     marketing palette in the eBay Playbook (playbook.ebay.com/foundations/color/
     using-color-in-marketing) and cross-checked against variables.scss.
     ONE value per colour, fills and text alike. Navin's call, 29 Jul: the
     Playbook yellow is the yellow, everywhere that colour appears. Do NOT
     reintroduce a darkened text tone for contrast. */
  --blue:#0968F6;        /* B500 = $color-b5 */
  --blue-hover:#0049B8;  /* B600 = $color-b6 */
  --blue-tint:#F5F9FF;   /* $color-b1 — background wash, not an accent */
  --red:#F02D2D;         /* R500 = $color-r5 */
  --red-dark:#D50B0B;    /* R600 = $color-r6 */
  --yellow:#FFBD14;      /* Y400 — the brand yellow. Was #F7B100, which is in no eBay ramp. */
  --green:#92C821;       /* G500 = $color-g5 — the LOGO green. Was #3CC14E (K500, kelly). */
  --deep:#0A1C6B;        /* $blue — headlines / bands */
  /* neutrals */
  --white:#ffffff;
  --n1:#f7f7f7; --n2:#f5f5f5; --n3:#e5e5e5; --n4:#c7c7c7;
  --n5:#8f8f8f; --n6:#707070;
  --text:#41413F;        /* $color-text-black */
  --n8:#191919; --black:#000000;
  --error:#c4003a;
  /* system */
  --radius:8px;
  --nav-h:72px;
  --shadow:0 8px 24px rgba(25,25,25,.07);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 8px);
}

body{
  font-family:"Market Sans",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5;
  color:var(--text); background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-hover); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:2px; }
::selection{ background:var(--blue); color:var(--white); }

.container{ width:min(1150px,calc(100% - 48px)); margin-inline:auto; }
.container-wide{ width:min(1400px,calc(100% - 48px)); margin-inline:auto; }

/* ---------- type ---------- */
h1,h2,h3{ color:var(--n8); font-weight:600; }
.display{
  font-weight:600; text-transform:uppercase;
  line-height:.92; letter-spacing:-.02em; color:var(--n8);
}
/* text-wrap:balance so a heading that genuinely has to wrap splits evenly
   instead of dropping one orphan word onto a line of its own. */
.h-section{ font-size:clamp(28px,3.4vw,44px); line-height:1.08; letter-spacing:-.01em; text-wrap:balance; }
.lead{ font-size:18px; color:var(--n6); max-width:62ch; margin-top:16px; }
/* Removed on 2 Aug and RESTORED the same day: the client came straight back
   with "why attend at the top LHS is gone" within hours of it going live, so
   the kickers were carrying more than they looked like they were. All ten are
   back, unchanged. The white space the client complained about is still fixed:
   the section padding cut did the bulk of it and that stays. */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color:var(--blue); margin-bottom:16px;
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--blue); }
/* the sponsors closing band is deep navy, so its kicker inverts */
.closing .eyebrow{ color:var(--white); }
.closing .eyebrow::before{ background:var(--white); }

/* ---------- buttons (landing tap-target deviation: 48/56px) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 24px; border-radius:var(--radius);
  font-family:inherit; font-size:16px; font-weight:600; cursor:pointer;
  border:1px solid transparent;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
  white-space:nowrap;
}
.btn-lg{ height:56px; padding:0 32px; }
.btn-pill{ border-radius:999px; }
.btn-primary{ background:var(--blue); color:var(--white); }
.btn-primary:hover{ background:var(--blue-hover); color:var(--white); }
.btn-outline{ background:var(--white); color:var(--blue); border-color:var(--blue); }
.btn-outline:hover{ color:var(--blue-hover); border-color:var(--blue-hover); background:var(--blue-tint); }
.btn-white{ background:var(--white); color:var(--n8); }
.btn-white:hover{ background:var(--n2); color:var(--n8); }

/* ---------- nav — brand playbook pattern: links left, pill CTA right ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  background:var(--white);
  border-bottom:1px solid transparent; transition:border-color .3s ease;
}
.nav.scrolled{ border-bottom-color:var(--n3); }
.nav-inner{
  width:min(1400px,calc(100% - 48px)); margin-inline:auto; height:100%;
  display:flex; align-items:center; gap:24px;
}
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a{ font-size:16px; font-weight:600; color:var(--n8); position:relative; padding:4px 0; }
.nav-links a:hover{ color:var(--blue); }
.nav-links a.on{ color:var(--blue); }
.nav-sep{ width:4px; height:4px; border-radius:50%; background:var(--n4); flex:none; }
.nav-cta{ margin-left:auto; height:48px; padding:0 30px; }
/* The cross-page route pill, on BOTH pages: "For sponsors" on the attendee page,
   "For attendees" on the sponsors page. Styled as a button so it reads as the
   client asked, without competing with the primary CTA pill beside it.
   It is a direct child of .nav-inner rather than of .nav-links, so that the
   mobile hamburger cannot swallow it. See the note in each page's header. On
   desktop it still renders first, immediately ahead of the section links. */
.nav-cross{ height:38px; padding:0 20px; font-size:15px; flex:none; }
.nav-toggle{ display:none; }

@media (max-width:1099px){
  .nav-inner{ gap:10px; }
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--white); border-bottom:1px solid var(--n3);
    padding:8px 24px 24px; display:none;
  }
  body.nav-open .nav-links{ display:flex; }
  .nav-links a{ padding:14px 0; width:100%; border-bottom:1px solid var(--n2); font-size:18px; }
  .nav-sep{ display:none; }
  /* Three things share the bar on both pages once the cross-page link stops
     hiding in the hamburger, so both pills shed padding to fit a 320px
     screen without the row wrapping. */
  .nav-cross{ height:40px; padding:0 14px; font-size:14px; }
  .nav-cta{ height:40px; padding:0 16px; font-size:14px; }
  .nav-toggle{
    display:block; width:40px; height:44px; border:0; background:none; cursor:pointer; position:relative; flex:none;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; position:absolute; left:10px; width:24px; height:2px; background:var(--n8);
    transition:transform .3s ease, top .3s ease, background .3s ease;
  }
  .nav-toggle span{ top:21px; }
  .nav-toggle span::before{ top:-7px; left:0; }
  .nav-toggle span::after{ top:7px; left:0; }
  body.nav-open .nav-toggle span{ background:transparent; }
  body.nav-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
  body.nav-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }
}

/* Small phones give back the gutter. On a 320px screen a 24px inset either side
   leaves 272px, and the hamburger plus both nav pills need 281 — the
   bar ran past the right edge. 16px each side is the usual small-phone gutter,
   and the sections move with the bar so nothing falls out of alignment.
   ⚠ This block has to stay BELOW the nav rules above: media queries carry no
   extra specificity, so placed earlier in the file it would simply lose. */
@media (max-width:400px){
  .container, .container-wide, .nav-inner{ width:calc(100% - 32px); }
  .nav-inner{ gap:8px; }
  .nav-cross, .nav-cta{ padding:0 12px; font-size:13px; }
}

/* ---------- sections ---------- */
/* Tightened on 2 Aug against the client note about too much white space. Nine
   sections were carrying 96px top and bottom, so 1,728px of the page was
   padding alone. 72px still reads airy and stays on the 8px rhythm; going
   further starts to fight the eBay theme rather than the complaint. */
.section{ padding:72px 0; }
.section.tinted{ background:var(--n1); }
/* The 760px cap used to live here, and it was doing nothing useful. A reading
   measure belongs on the paragraph, and .lead already sets its own 62ch, which
   resolves narrower than 760 anyway, so the leads are unchanged by dropping it.
   What it DID do was cap the heading, because a child cannot outgrow its parent:
   "Learn from the Baltics' top eBay sellers" needs 817px at 44px and was wrapping
   57px short, dropping "sellers" onto a line of its own. */
.section-head{ margin-bottom:40px; }
@media (max-width:767px){ .section{ padding:48px 0; } }

/* ---------- shared hero bits ---------- */
.hero-date{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  font-size:15px; font-weight:600; color:var(--n8); margin-bottom:28px;
}
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }
.hd-item{ display:inline-flex; align-items:center; gap:10px; }
.dot-red{ background:var(--red); } .dot-blue{ background:var(--blue); }
.dot-yellow{ background:var(--yellow); } .dot-green{ background:var(--green); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; }

/* ---------- visitors hero: split panel — white copy left, city image right ---------- */
.hero-split{
  display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr);
  min-height:100vh; padding-top:var(--nav-h); background:var(--white);
}
.hs-left{
  display:flex; align-items:center; justify-content:center;
  padding:40px clamp(24px,3vw,56px);
}
.hs-left .hero-logo{ width:min(100%,540px); }
.hs-right{ position:relative; min-height:calc(100vh - var(--nav-h)); display:flex; }
.hs-right > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 45%; }
/* hs-full: show the whole photograph, letterboxed on black, nothing cropped */
.hs-full{ background:#000; }
.hs-full > img{ object-fit:contain; object-position:50% 38%; }
.hs-right::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(4,10,40,.72) 0%, rgba(4,10,40,.5) 40%, rgba(4,10,40,.24) 66%, rgba(4,10,40,.08) 82%, transparent 100%);
}
/* everything except the logo lives ON the image */
.hsr-overlay{
  position:relative; z-index:2; width:100%; display:flex; flex-direction:column;
  gap:16px; padding:clamp(24px,3vw,48px);
}
.hsr-overlay .hero-date{ margin-bottom:auto; }
.hsr-overlay .hero-date, .hsr-overlay .hero-date span{ color:var(--white); }
.hsr-sub{
  color:rgba(255,255,255,.92); font-size:clamp(15px,1.2vw,18px); max-width:52ch;
  text-shadow:0 1px 10px rgba(4,10,40,.6);
}
.hsr-overlay .btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.8); }
.hsr-overlay .btn-outline:hover{ background:rgba(255,255,255,.14); color:var(--white); border-color:var(--white); }
.hsr-overlay .hc-cell{
  background:rgba(8,14,40,.42); border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.route-chips{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; }
.route-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--n3); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px 16px;
  font-size:14px; font-weight:600; color:var(--n8); white-space:nowrap;
}
.route-stamp{
  display:inline-flex; align-items:center;
  background:var(--blue); color:var(--white);
  font-size:14px; font-weight:600; letter-spacing:.04em; white-space:nowrap;
  padding:10px 16px; border-radius:var(--radius);
}

/* ---------- attendees hero: the headline leads ----------
   Must sit AFTER .hsr-overlay .hero-date{margin-bottom:auto}, which pins the
   date row to the top of the panel and pushes everything else to the foot.
   That split is right for the sponsors hero and wrong here: the headline, the
   two fact lines, the button and the note read as one block, so the whole
   stack is bottom aligned instead, over the deepest part of the gradient.
   .hsr-overlay is shared with sponsors.html, hence the modifier class. */
.hsr-overlay--lead{ justify-content:flex-end; gap:20px; }
.hsr-overlay--lead .hero-date{ margin:0; }
/* NOT .display: that class is uppercase, and uppercasing this line would print
   the brand as EBAY. Title case is supplied copy. */
.hsr-title{
  color:var(--white); font-weight:600;
  font-size:clamp(32px,4.2vw,64px); line-height:1.05; letter-spacing:-.02em;
  max-width:20ch; text-wrap:balance; text-shadow:0 2px 18px rgba(4,10,40,.55);
}
.hsr-facts{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  color:var(--white); font-weight:600; font-size:clamp(15px,1.35vw,20px);
  text-shadow:0 1px 10px rgba(4,10,40,.6);
}
/* ::after on the item BEFORE, never ::before on the item after. A pseudo
   element wraps with its own span, so ::before puts the separator at the head
   of the next line when the row wraps, measured at 320px. Trailing it keeps
   the dot with the text it follows, the same rule the hero date row was fixed
   under on phones. */
.hsr-fact:not(:last-child)::after{ content:"\00b7"; color:rgba(255,255,255,.6); margin-left:14px; }
.hsr-overlay--lead .hsr-sub{ font-size:clamp(14px,1vw,16px); color:rgba(255,255,255,.8); }
@media (max-width:900px){
  .hsr-overlay--lead{ gap:16px; }
  .hsr-title{ font-size:clamp(26px,7vw,40px); max-width:none; }
  .hsr-facts{ font-size:15px; gap:4px 10px; }
  .hsr-fact:not(:last-child)::after{ margin-left:10px; }
  /* one CTA now, so it spans the panel rather than sharing a row */
  .hsr-overlay--lead .hero-ctas .btn{ flex:1 1 100%; }
}
/* 13px is what keeps the three facts on ONE line inside the 272px a 320px
   screen leaves after the gutters. At 14px it wrapped. */
@media (max-width:400px){
  .hsr-facts{ font-size:13px; gap:4px 8px; }
  .hsr-fact:not(:last-child)::after{ margin-left:8px; }
}

@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; }
  .hs-left{ padding:32px 24px 8px; }
  .hs-left .hero-logo{ width:min(80vw,420px); }
  .hs-right{ min-height:78vh; }
  /* The three date items sized themselves to their own text and wrapped two on
     the first line and one on the second, so the second line's colour dot sat
     under nothing. One item per row puts all three dots in a single column. */
  .hero-date{ display:grid; grid-template-columns:1fr; gap:10px; }
  /* THE STAGE PHOTO CARRIES THE SUMMIT WORDMARK on the right of the frame.
     object-fit:cover on a tall narrow panel crops the sides, which sliced
     "BALTIC EXPORT SUMMIT" off at the screen edge. Two changes keep it whole:
     the panel stops being forced to 78vh, so the crop window covers more of the
     picture's width, and the crop is biased right onto the LED screen.
     ⚠ Verified at 320/360/390/414/768 — the wordmark spans 56% to 77% of the
     source width, so anything that shortens this panel again must be re-checked
     against those two numbers. */
  .hs-stage{ min-height:0; }
  .hs-stage > img{ object-position:65% 50%; }
  /* hero furniture on phones: same size boxes, two per row */
  .hero-ctas{ gap:12px; }
  .hero-ctas .btn{ flex:1 1 0; min-width:0; padding:0 16px; }
  .route-chips{ display:grid; grid-template-columns:1fr 1fr; gap:10px;
    align-items:stretch; grid-auto-rows:1fr; }
  .route-chip, .route-stamp{
    width:100%; height:100%; justify-content:center; text-align:center;
    padding:12px 10px; font-size:13px; white-space:normal;
  }
  /* phones: the copy covers most of the panel, so the whole frame is darkened
     rather than just its foot — stage beams otherwise wash out the intro line */
  .hs-right::after{
    background:linear-gradient(0deg, rgba(4,10,40,.88) 0%, rgba(4,10,40,.76) 34%,
      rgba(4,10,40,.58) 64%, rgba(4,10,40,.4) 100%);
  }
  /* phones: stack the whole photo above the copy so neither is cropped */
  .hs-full{ flex-direction:column; min-height:0; }
  .hs-full > img{ position:static; width:100%; height:auto; }
  .hs-full::after{ display:none; }
}
.hero-logo{ height:auto; }

/* countdown tiles */
.hero-count{ display:flex; gap:12px; }
.hc-cell{
  flex:1 1 0; min-width:78px; padding:12px 14px; text-align:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius);
}
.hc-num{ display:block; font-size:28px; font-weight:600; color:var(--white); line-height:1.1; font-variant-numeric:tabular-nums; }
.hc-lab{ display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-top:4px; }
@media (max-width:900px){
  .hero-count{ flex-wrap:wrap; width:100%; }
  .hc-cell{ flex:1 1 calc(50% - 6px); min-width:0; }
}

/* every card grid stretches its rows, so boxes in a column match each other
   even when the copy inside them runs to different lengths.
   ⚠ .spk-grid is deliberately NOT in this list: a speaker card is a bare
   transparent <button> with no box to match, and stretching it made the button
   taller than its content, which a <button> then vertically centres — so a
   one-line role sat 10px below a two-line one. See .speaker{align-self:start}. */
.why-grid, .who-grid, .tiers-grid{ grid-auto-rows:1fr; }
.why-card, .persona, .tier-card{ height:100%; }

/* ---------- items band — static composition, no motion ---------- */
.items-static{
  position:relative; background:var(--white); overflow:hidden;
  /* ONE width for all seven photos. They used to run 110px to 180px across
     five different values, which is what the client saw as the missing
     symmetry — nothing in the band lined up with anything. */
  --item-w: min(15vw,216px);
  /* the strip along the bottom that belongs to the centred seventh product,
     derived from the photo width so the map can never grow into it */
  --item-foot: calc(var(--item-w) + 34px);
}
/* the stage never gets shorter than a rail of three needs, and it is free to
   grow past that floor, so a label can never be clipped by the overflow:hidden */
.items-stage-wrap{
  position:relative; min-height:clamp(620px,84vh,860px);
  display:grid; align-content:stretch;
}
/* The map is sized to the band MINUS the seventh product's strip, so the two
   cannot collide at any viewport. ⚠ It has to be an explicit height: a replaced
   element resolves its height from its own intrinsic size, so top + bottom with
   height:auto is over-constrained and the image just renders at its native
   1024px — which dropped the map straight through the camera below it. */
.baltic-map{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  height:calc(100% - var(--item-foot)); width:auto; max-width:none; opacity:.8;
  mix-blend-mode:multiply; filter:contrast(1.25);
}
/* centred on the map, not on the band, so it stays concentric with it */
.items-caption{
  position:absolute; left:50%; top:calc(50% - var(--item-foot) / 2);
  transform:translate(-50%,-50%);
  z-index:4; text-align:center; padding:0 24px;
}
.items-caption .display{
  font-size:clamp(34px,5.5vw,76px); color:var(--n8);
  text-shadow:0 0 24px rgba(255,255,255,.8), 0 0 48px rgba(255,255,255,.5);
}
/* Three explicit columns. The two rails hold three products each at matching
   heights, the middle column carries the seventh on the centre line, so the
   band reads as a mirror composition instead of a scatter. Sizes and spacing
   are derived from the content, never pinned by percentage — mixing % positions
   with px sizes is what used to make labels collide on a short viewport. */
.items-stage{
  position:relative; z-index:2; pointer-events:none;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:stretch;
  padding:clamp(18px,3vh,44px) clamp(24px,3vw,72px);
  gap:clamp(16px,2.4vw,48px);
}
.items-rail--left { grid-column:1; grid-row:1; }
.items-mid        { grid-column:2; grid-row:1; position:relative; }
.items-rail--right{ grid-column:3; grid-row:1; }
/* space-between over a shared height, and both rails hold three nodes of
   identical height, so row 1 on the left sits level with row 1 on the right */
.items-rail{
  display:flex; flex-direction:column; justify-content:space-between;
  align-items:center; gap:clamp(20px,3vh,44px);
}
/* the seventh product closes the composition on the centre line, level with
   the bottom row of both rails */
.in-7{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
}
/* each product carries its own category label underneath, so a name can never
   sit on top of another product */
.item-node{
  margin:0; display:flex; flex-direction:column;
  align-items:center; gap:12px; text-align:center;
}
/* the node is sized by its label, not by the photo, so a long category name
   like "Salvage & auto parts" stays inside the rail instead of hanging over
   the neighbour — the photo is centred inside that box at one shared width */
.item-node img{
  width:var(--item-w); height:auto; display:block; border-radius:var(--radius);
  mix-blend-mode:multiply;
}
.item-node figcaption{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-size:clamp(12px,1.05vw,16px); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--n8);
  text-shadow:0 0 14px rgba(255,255,255,.9);
}
@media (max-width:900px){
  /* phones and tablets: nothing is absolutely placed, so a product can never
     land on the headline or hang off the side of the screen */
  .items-stage-wrap{ min-height:0; padding:8px 0 0; display:flex; flex-direction:column; align-items:center; }
  .baltic-map{
    position:static; inset:auto; transform:none;
    width:min(100%,460px); height:auto; opacity:.85; margin:0 auto;
  }
  .items-caption{ position:static; top:auto; transform:none; padding:24px 0 0; width:100%; }
  /* the rails dissolve and the seven products become one grid */
  .items-rail, .items-mid{ display:contents; }
  /* Tablets: three across, so the seven read as 3 + 3 + 1 — the same shape the
     desktop composition makes, and two rows instead of four. */
  .items-stage{
    position:static; display:grid; grid-template-columns:repeat(3,1fr);
    gap:30px 18px; width:100%; max-width:660px;
    margin:34px auto 0; padding:0 16px;
  }
  .items-stage .item-node{ position:static; inset:auto; transform:none;
    width:auto; margin:0; }
  .items-stage .item-node img{ width:100%; }
  /* The products used to render about 78px wide with no labels at all, under a
     separate list of the same seven names. Each photo carries its own now. */
  /* the names wrap here, and align-items:center then floats the colour dot
     between the two lines — it belongs beside the first one */
  .items-stage .item-node figcaption{
    display:inline-flex; white-space:normal; font-size:12px;
    align-items:flex-start; line-height:1.4;
  }
  .items-stage .item-node figcaption .mdot{ margin-top:3px; }
  /* the seventh spans the full row and centres on the same axis it holds on
     desktop, at the same size as the six above it, so the odd one out reads as
     the close of the grid rather than an orphan
     ⚠ .items-stage .item-node img (0,2,1) outranks .in-7 img (0,1,1), so the
        override has to carry the same weight or the photo goes full-bleed */
  .in-7{ grid-column:1 / -1; }
  .items-stage .in-7 img{ width:calc(33.333% - 12px); }
}
@media (max-width:600px){
  /* phones: two across, 3 + 3 + 1 becomes 2 + 2 + 2 + 1, photo roughly twice
     the width it used to have */
  .items-stage{ grid-template-columns:1fr 1fr; max-width:520px; }
  .items-stage .in-7 img{ width:calc(50% - 9px); }
}
.mdot{ width:11px; height:11px; border-radius:50%; display:inline-block; flex:none; }
/* the dot is each category's own colour marker, not a separator, so the last
   item keeps its dot like every other one */

/* ---------- why attend — static grid, all six visible ---------- */
.why-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.why-card{
  background:var(--white); border:1px solid var(--n3); border-radius:var(--radius);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.wc-media{ aspect-ratio:16/10; overflow:hidden; background:var(--n1); }
.wc-media img{ width:100%; height:100%; object-fit:cover; }
.wc-body{ padding:24px 28px 28px; position:relative; flex:1; }
.card-index{
  display:block; font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:var(--blue); margin-bottom:12px;
}
.wc-red .card-index{ color:var(--red); }
.wc-green .card-index{ color:var(--green); }
/* Playbook yellow, not a darkened variant. Navin, 29 Jul: "use the yellow they
   have in the brand playbook wherever you have used that colour on the site,
   period." Y600 and #B98500 have both been tried and rejected. */
.wc-yellow .card-index{ color:var(--yellow); }
.wc-body h3{ font-size:clamp(18px,1.6vw,22px); line-height:1.3; font-weight:600; color:var(--n8); max-width:26ch; }
@media (max-width:1000px){ .why-grid{ grid-template-columns:1fr 1fr; } }
/* ⚠ grid-auto-rows:1fr earns its keep only while there are at least two columns
   to match across. In ONE column it makes every row as tall as the tallest card
   on the page, so a two-line card carried a block of dead space underneath it.
   Each single-column grid hands its rows back to the content. */
@media (max-width:640px){ .why-grid{ grid-template-columns:1fr; grid-auto-rows:auto; } }

/* mid-page CTA band — the register drumbeat */
.midcta{
  margin-top:48px; background:var(--black); border-radius:var(--radius);
  padding:32px 40px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.midcta p{ color:var(--white); font-size:clamp(18px,1.8vw,24px); font-weight:600; max-width:44ch; }
@media (max-width:640px){ .midcta{ padding:24px; } }

/* ---------- static media bands (Vilnius / stage / world map) ---------- */
.band-static{ position:relative; overflow:hidden; }
.band-static .band-media{ width:100%; height:min(78vh,760px); object-fit:cover; display:block; }
.band-static .band-caption{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  text-align:center; padding:0 24px 48px;
}
.band-static .band-caption .display{
  font-size:clamp(30px,4.6vw,64px); color:var(--n8);
  text-shadow:0 0 24px rgba(255,255,255,.8), 0 0 48px rgba(255,255,255,.5);
}
.band-static .band-caption p{
  color:var(--n8); font-weight:600; margin-top:12px; font-size:18px;
  text-shadow:0 0 16px rgba(255,255,255,.8);
}
/* Photo bands: a bottom scrim carries the caption. A glow behind black type cannot
   hold against busy photography (rooftops, stage lighting), so the type goes white
   on a real darkening ramp instead. The map band is artwork and opts out below. */
.band-dark::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,
    rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 18%, rgba(0,0,0,.42) 36%,
    rgba(0,0,0,.18) 54%, transparent 72%);
}
.band-dark .band-caption{ padding-bottom:56px; }
.band-dark .band-caption .display{
  color:var(--white); font-size:clamp(34px,5vw,72px); letter-spacing:-.01em; line-height:1.02;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.band-dark .band-caption p{
  color:var(--white); font-size:clamp(16px,1.5vw,20px); margin-top:16px; letter-spacing:.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
/* The stage band shows the same photograph as the sponsors hero, so it lost the
   summit wordmark to the same side crop. A full-height band on a phone only
   shows about a third of the picture's width; at this height it shows well over
   half, and the crop is biased right onto the LED screen. Same 56%–77% source
   coordinates as .hs-stage — re-measure both together. */
@media (max-width:900px){
  .band-stage .band-media{ object-position:65% 50%; }
}
/* ⚠ A fixed height, not a vh fraction. Tied to the viewport this band collapsed
   to 261px on a 568px-tall phone, and a short band both narrows the crop window
   and pushes the caption up into the wordmark. 400px holds the whole wordmark
   from 320px wide upward and leaves the caption its own space underneath.
   Above 600px the band keeps its full height — the crop window is wide enough
   there that the wordmark survives on the object-position alone. */
@media (max-width:600px){
  .band-stage .band-media{ height:400px; }
}
/* world map: light artwork, keep it uncropped-ish and put the caption low-left */
.band-map{ background:var(--white); }
.band-map .band-media{ object-fit:contain; height:auto; max-height:88vh; }
.band-map .band-caption{ text-align:left; left:4%; right:auto; bottom:6%; padding:0; }

/* ---------- agenda (rail scrub kept by client request) ---------- */
.agenda-layout{ display:grid; grid-template-columns:2fr 3fr; gap:64px; align-items:start; }
.agenda-sticky{ position:sticky; top:calc(var(--nav-h) + 32px); }
.agenda-cta{ margin-top:32px; }
.agenda-cta p{ color:var(--n8); font-weight:600; margin-bottom:16px; }
.agenda-list{ list-style:none; position:relative; padding-left:40px; }
.agenda-rail{ position:absolute; left:11px; top:8px; bottom:8px; width:2px; background:var(--n3); }
.agenda-rail-fill{
  position:absolute; inset:0; background:var(--blue);
  transform-origin:top; transform:scaleY(0);
}
.agenda-item{
  position:relative; padding:24px 0 24px 8px; border-bottom:1px solid var(--n2);
  opacity:.45; transition:opacity .4s ease;
}
.agenda-item.active{ opacity:1; }
.agenda-item::before{
  content:""; position:absolute; left:-35px; top:34px; width:12px; height:12px;
  border-radius:50%; background:var(--n4); border:2px solid var(--white);
  transition:transform .3s ease;
}
.agenda-item.active::before{ transform:scale(1.35); }
.agenda-item.c-red::before{ background:var(--red); }
.agenda-item.c-blue::before{ background:var(--blue); }
.agenda-item.c-yellow::before{ background:var(--yellow); }
.agenda-item.c-green::before{ background:var(--green); }
.agenda-item .time{
  display:inline-block; font-size:14px; font-weight:600; color:var(--n6);
  background:var(--n1); border-radius:var(--radius); padding:4px 12px; margin-bottom:10px;
}
.agenda-item h3{ font-size:20px; }
.agenda-item p{ color:var(--n6); margin-top:6px; max-width:56ch; }
@media (max-width:900px){
  .agenda-layout{ grid-template-columns:1fr; gap:32px; }
  .agenda-sticky{ position:static; }
  .agenda-item{ opacity:1; }
}

/* ---------- speakers — static grid + modal (brand playbook pattern) ---------- */
/* Left, like every other section head on both pages. This one was centred on its
   own, which is the inconsistency the client picked up: you scroll past six
   left-aligned headings and this one jumps to the middle. max-width stays open
   so the lead can run the width of the speaker grid. */
#speakers .section-head{ max-width:none; }
/* the grid is narrower than the section it sits in: at full container-wide the
   four square portraits render 332px across, which the client read as too big.
   Capping the grid keeps four columns and shrinks the whole section with them. */
.spk-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px 24px; margin-top:8px;
  width:min(1000px,100%); margin-inline:auto;
}
.speaker{
  border:0; background:none; padding:0; text-align:left; cursor:pointer;
  font-family:inherit; display:block; width:100%;
  /* a grid item is stretched to the tallest card in its row, and a <button>
     vertically centres content it is taller than — so a one-line role sat ~10px
     lower than a two-line one and the row read as ragged. Sizing the button to
     its own content keeps every name on the same baseline. */
  align-self:start;
}
.speaker .ph{
  display:block; border-radius:var(--radius); overflow:hidden; background:var(--n1);
  aspect-ratio:1/1;
}
.speaker .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.speaker:hover .ph img{ transform:scale(1.04); }
.spk-name{ display:block; font-size:19px; font-weight:600; color:var(--n8); margin-top:16px; }
.spk-role{ display:block; font-size:14px; color:var(--n6); margin-top:6px; line-height:1.4; }
/* The card opens a larger profile, so it needs a cue that it is interactive.
   A decorative globe used to sit here; it carried no meaning and floated at a
   different height under every one- vs two-line role, which read as random.
   The cue now lives on the card itself and costs no vertical space. */
.speaker:hover .spk-name, .speaker:focus-visible .spk-name{ color:var(--blue); }
.speaker:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; border-radius:var(--radius); }
.speakers-cta{ margin-top:56px; text-align:center; }
@media (max-width:1000px){ .spk-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .spk-grid{ grid-template-columns:1fr 1fr; gap:24px 16px; }
  .spk-name{ font-size:16px; } .spk-role{ font-size:13px; } }

/* speaker modal */
.spk-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; }
.spk-modal[hidden]{ display:none; }
.spk-backdrop{
  position:absolute; inset:0; background:rgba(25,25,40,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.spk-dialog{
  position:relative; z-index:1; background:var(--white); border-radius:var(--radius);
  width:min(760px,100%); padding:48px; display:flex; gap:40px; align-items:flex-start;
  box-shadow:0 24px 64px rgba(10,15,40,.35);
}
.spk-modal-img{
  width:min(240px,34%); aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); flex:none;
}
.spk-modal-name{ font-size:clamp(24px,2.6vw,34px); color:var(--n8); }
.spk-modal-role{ font-size:17px; color:var(--n6); margin-top:12px; line-height:1.45; }
.spk-close{
  position:absolute; top:20px; right:20px; width:44px; height:44px;
  border:2px solid var(--blue); border-radius:var(--radius); background:var(--white);
  cursor:pointer; display:grid; place-items:center; color:var(--n8);
}
.spk-close:hover{ background:var(--blue-tint); }
@media (max-width:640px){
  .spk-dialog{ flex-direction:column; padding:32px 24px; gap:20px; }
  .spk-modal-img{ width:140px; }
}

/* ---------- who should attend — static grid, all seven visible ---------- */
.who-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.who-card{
  background:var(--white); border:1px solid var(--n3); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.who-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.who-card img{ aspect-ratio:4/3; width:100%; object-fit:cover; background:var(--n1); }
.who-card figcaption{
  display:flex; align-items:flex-start; gap:10px; padding:16px 18px 20px;
  font-size:15px; font-weight:600; color:var(--n8); line-height:1.35; flex:1;
}
.who-card .mark{ width:10px; height:10px; border-radius:50%; flex:none; margin-top:5px; }
.who-cta-card{
  background:var(--black); border-radius:var(--radius); padding:28px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px;
}
.who-cta-card p{ color:var(--white); font-size:17px; font-weight:600; }
@media (max-width:1000px){ .who-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  /* see the note on .why-grid: in one column the stretch made this black card
     as tall as a photo card, which is the empty box the client flagged */
  .who-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .who-cta-card{ padding:24px; gap:16px; }
}

/* ---------- sponsor teaser ----------
   Not a card design of its own. It is .tier-card from the sponsors page, run
   shorter, so the teaser shows the thing it links to and there is one design to
   maintain. The tier NAME leads and the benefits are the substance; how many
   slots are left is a supporting line under the title, which is the order a
   sponsor actually reads in. */
.tiers-teaser .tier-card{
  min-height:0; padding:32px 24px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.tiers-teaser .tier-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.tiers-teaser .tier-title{ font-size:clamp(22px,1.9vw,28px); }
.tiers-teaser .tier-avail{ margin-top:12px; font-size:15px; }
.tiers-teaser .tier-rule{ margin:20px auto; width:min(180px,70%); }
.tiers-teaser .tier-list li{ font-size:15px; padding:4px 0; }
.tier-teaser-cta{ margin-top:36px; }

/* ---------- register ---------- */
.register-layout{ display:grid; grid-template-columns:2fr 3fr; gap:64px; align-items:start; }
.register-side{ position:sticky; top:calc(var(--nav-h) + 32px); }
.notice{
  margin-top:32px; padding:20px; border-radius:var(--radius);
  background:var(--blue-tint); border:1px solid var(--n3);
  font-size:14px; color:var(--n6); line-height:1.55;
}
.form{
  background:var(--white); border:1px solid var(--n3); border-radius:var(--radius);
  padding:40px;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.register-layout > *, .form, .field{ min-width:0; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field[hidden]{ display:none; }
.field input, .field select, .field textarea{ width:100%; min-width:0; }
.field label{ font-size:14px; font-weight:600; color:var(--n8); }
.field label em{ color:var(--error); font-style:normal; }
.field .hint{ font-size:13px; color:var(--n6); margin-top:-4px; }
.field input, .field select{
  height:48px; padding:0 16px; font-family:inherit; font-size:16px; color:var(--n8);
  background:var(--white); border:1px solid var(--n4); border-radius:var(--radius);
  transition:border-color .3s ease; appearance:none; -webkit-appearance:none;
}
.field textarea{
  padding:14px 16px; font-family:inherit; font-size:16px; color:var(--n8); line-height:1.5;
  background:var(--white); border:1px solid var(--n4); border-radius:var(--radius);
  transition:border-color .3s ease; resize:vertical; min-height:112px;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23707070' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); }
.field .err{ display:none; font-size:13px; color:var(--error); }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--error); }
.field.invalid .err{ display:block; }
.consent{ display:flex; gap:12px; margin-top:32px; font-size:13px; color:var(--n6); line-height:1.55; cursor:pointer; }
.consent input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--blue); }
.form-actions{ margin-top:32px; }
.form-note{ margin-top:16px; font-size:13px; color:var(--n5); }
.btn[disabled]{ opacity:.6; pointer-events:none; }

/* success state — prominent full-panel confirmation */
.form-success{ display:none; text-align:center; padding:48px 32px; }
.form-success .fs-icon{
  width:88px; height:88px; margin:0 auto 24px; border-radius:50%;
  background:var(--green); display:grid; place-items:center;
}
.form-success .fs-icon svg{ display:block; }
.form-success h3{ color:var(--n8); font-size:clamp(26px,2.6vw,34px); }
.form-success p{ color:var(--n6); margin-top:12px; font-size:17px; max-width:44ch; margin-inline:auto; }
.form-success .btn{ margin-top:32px; }
.form.submitted{ background:var(--blue-tint); border-color:#D4E5FE; } /* B200 = $color-b2 */
.form.submitted .form-grid, .form.submitted .consent,
.form.submitted .form-actions, .form.submitted .form-note{ display:none; }
.form.submitted .form-success{ display:block; }
@media (max-width:900px){
  .register-layout{ grid-template-columns:1fr; gap:32px; }
  .register-side{ position:static; }
  .form{ padding:24px; }
  .form-grid{ grid-template-columns:1fr; }
}

/* ---------- FAQ — white card with black outline, per the client's event reference ---------- */
.faqcard{
  background:var(--white); border:2px solid var(--n8); border-radius:24px;
  padding:clamp(28px,4.5vw,64px);
}
/* Same clamp as .h-section, and left like the rest. It was centred at a 40px
   ceiling while every other section heading on both pages was left at 44px. */
.faq-title{
  text-align:left; font-size:clamp(28px,3.4vw,44px); line-height:1.08;
  letter-spacing:-.01em; color:var(--n8); margin-bottom:36px;
}
.faq-qa{ margin-bottom:28px; }
.faq-qa:last-child{ margin-bottom:0; }
.faq-qa h3{ font-size:19px; color:var(--n8); margin-bottom:6px; }
.faq-qa p{ color:var(--text); font-size:17px; }
.faq-qa a{ color:var(--blue); }

/* ---------- closing / connect band ---------- */
.closing{
  position:relative; background:var(--deep); color:var(--white);
  padding:96px 0; overflow:hidden;
}
.closing-media{ position:absolute; inset:0; opacity:.14; }
.closing-media img{ width:100%; height:100%; object-fit:cover; }

/* The index closing carries the host-city photograph at FULL strength, the way
   it read in its own band, rather than the 14% wash the sponsors closing uses.
   Readability comes from a scrim, not from fading the picture out.
   The scrim lives on .closing-media rather than on .closing, so it sits inside
   the media layer and cannot paint over .closing-inner. A ::after on .closing
   would: .closing has position:relative with z-index:auto, so it creates no
   stacking context, and a generated last child at equal z-index paints on top.
   It is weighted to the left because the copy is left aligned and the tower sits
   centre right, so the subject stays visible while the text sits on the dense
   end of the ramp. Navy rather than black to hold the brand colour the closing
   had before. */
.closing--photo{ background:var(--black); }
.closing--photo .closing-media{ opacity:1; }
/* A flat black darkener. NOT a navy tint and NOT a ramp.
   Navy was wrong twice over: it repainted the photograph's own colours, so the
   brick and the grass turned blue and it stopped reading as a photograph.
   A left-to-right ramp was wrong too, because the headline spans the whole
   container: the ramp sat heaviest exactly where the text starts and weakest
   where it ends, dropping the last words onto bright sky. Measured, no ramp
   cleared 4.5 anywhere; the strongest reached only 2.59.
   Flat black leaves every hue intact and darkens evenly. Measured against white
   across the entire text box: 35% = 2.50, 42% = 3.12, 48% = 3.79, 55% = 4.86.
   55 is the LIGHTEST value that clears AA for body text, so it is the most of
   the photograph we can show. Do not lighten it without re-measuring. */
.closing--photo .closing-media::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.55);
}
.closing-inner{ position:relative; z-index:1; }
.closing .display{ color:var(--white); font-size:clamp(38px,6vw,84px); }
.closing p{ margin:24px 0 40px; color:var(--white); opacity:.85; max-width:52ch; font-size:18px; }
.closing .closing-mails{ margin:24px 0 0; font-size:15px; opacity:.9; }
.closing .closing-mails a{ color:var(--white); text-decoration:underline; }

/* organiser contacts in the closing band */
.closing-contacts{ margin:32px 0 0; }
.closing-contacts .cc-head{ font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin:0 0 16px; }
.closing-contacts .cc-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:16px 48px; }
.closing-contacts .cc-list li{ display:flex; flex-direction:column; gap:4px; }
.closing-contacts .cc-name{ font-size:16px; font-weight:600; color:var(--white); }
.closing-contacts .cc-list a{ font-size:16px; color:var(--white); text-decoration:underline; text-underline-offset:3px; }
.closing-contacts .cc-list a:hover{ opacity:.8; }

/* ---------- footer ---------- */
.footer{ background:var(--white); border-top:1px solid var(--n3); padding:48px 0; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:32px; }
.footer-inner > img{ height:56px; width:auto; }
.footer-links{ display:flex; gap:32px; margin-left:auto; }
.footer-links a{ color:var(--n8); font-size:18px; font-weight:600; }
@media (max-width:900px){ .footer-links a{ padding:12px 0; } }
.footer-links a:hover{ color:var(--blue); }
.footer-copy{ width:100%; font-size:13px; color:var(--n5); }

/* The floating mobile register pill is retired. It put a second "Register Now"
   on screen alongside the one in the sticky bar, and because it was pinned to
   the bottom right it landed on top of the in-page Register buttons in the Why
   attend and Who should attend bands as they scrolled past. The bar pill is the
   one persistent call to action on a phone. */

/* =====================================================================
   SPONSORS PAGE
   ===================================================================== */
/* audience photo + static chips */
.audience-photo{ margin-top:48px; position:relative; }
.audience-photo img{ width:100%; border-radius:var(--radius); border:1px solid var(--n3); }
.aud-chip{
  position:absolute; display:flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--n3); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px 16px;
  font-size:14px; font-weight:600; color:var(--n8); white-space:nowrap;
}
.ac-1{ left:5%;  top:12%; }
.ac-2{ right:7%; top:22%; }
.ac-3{ left:9%;  bottom:16%; }
.ac-4{ right:11%; bottom:10%; }
/* Small screens: four floating chips cannot share a 340px-wide photo without
   covering each other and the faces, so they stop floating and sit under the
   image. Wrapping them in a flex row let each size itself to its own text, so
   the four came out four different widths and the longest took a line of its
   own — the client read them as four blocks that do not match. Two equal
   columns with rows stretched to the tallest chip makes them one set.
   ⚠ white-space has to go back to normal here: the nowrap that keeps a chip on
   one line when it is floating over the photo would overflow a 167px column. */
@media (max-width:900px){
  /* ⚠ grid-template-rows:auto is load-bearing. The photo spans both columns, so
     without an explicit first row it is an implicit row too and grid-auto-rows
     stretches the chip rows to the height of the photograph — four chips in
     250px boxes. The explicit row takes the photo out of that reckoning. */
  .audience-photo{ display:grid; grid-template-columns:1fr 1fr;
    grid-template-rows:auto; grid-auto-rows:1fr; gap:8px; }
  .audience-photo img{ grid-column:1 / -1; margin-bottom:4px; }
  .aud-chip{
    position:static; font-size:12px; padding:9px 12px;
    white-space:normal; align-items:flex-start;
  }
  .aud-chip .dot{ margin-top:4px; }
}

/* stats (sponsors page) — static, final values in markup */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
/* no rule above the figure — client removed it; the coloured numeral carries it */
/* the numeral sits centred over its own label — a left-aligned "4" against a
   two-line label read as misaligned to the client */
.stat{ position:relative; text-align:center; }
.stat-value{
  font-size:clamp(40px,5vw,72px); font-weight:600; letter-spacing:-.02em;
  color:var(--n8); line-height:1;
}
.stat-label{ margin:12px auto 0; color:var(--n6); font-size:15px; max-width:24ch; }
/* Core brand colours, straight from the Playbook. See the .wc-yellow note. */
.sv-blue .stat-value{ color:var(--blue); }
.sv-red .stat-value{ color:var(--red); }
.sv-yellow .stat-value{ color:var(--yellow); }
.sv-green .stat-value{ color:var(--green); }
/* two per row, and the row stretches so both numerals in it share a baseline */
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; row-gap:40px; } }

/* static tier cards — one straight line of four, client's own card colours */
.tiers-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px;
}
.tier-card{
  border-radius:20px; padding:clamp(28px,3vw,44px) clamp(18px,1.8vw,28px);
  min-height:460px; text-align:center; color:var(--n8);
  display:flex; flex-direction:column; align-items:center;
}
/* #E53238 and #86B817 were the 2012 logo hexes — retired, and in no current eBay
   ramp. These are now the same core tokens the rest of the page uses. */
.tier-card.tier-red{ background:var(--red); }
.tier-card.tier-green{ background:var(--green); }
.tier-card.tier-blue{ background:var(--blue); }
.tier-card.tier-yellow{ background:var(--yellow); }
/* Blue is the one tier that needs white type. Measured against the locked
   palette: #191919 on #0968F6 is 3.62:1, which fails AA for body text, while
   white is 4.86:1 and passes. The other three read better in black (green 8.80,
   yellow 10.50, red 4.29). This is a text colour only, so the palette lock on
   the four brand values is untouched.
   ⚠ Red is 4.29:1 in black and 4.10:1 in white, so NEITHER clears 4.5 for body
   copy. Black is the better of the two and the palette may not be darkened, so
   it stands; raise it with the client rather than inventing a fifth red. */
.tier-card.tier-blue,
.tier-card.tier-blue .tier-title,
.tier-card.tier-blue .tier-avail,
.tier-card.tier-blue .tier-list li{ color:var(--white); }
.tier-title{
  font-size:clamp(24px,2.1vw,34px); line-height:1.08; letter-spacing:-.01em;
  color:var(--n8); font-weight:600;
}
.tier-avail{ margin-top:18px; font-size:17px; font-weight:600; color:var(--n8); }
.tier-rule{
  width:min(220px,78%); border:0; border-top:1px solid rgba(255,255,255,.8);
  margin:26px auto;
}
.tier-list{ list-style:none; }
.tier-list li{ font-size:16px; line-height:1.45; padding:5px 0; color:var(--n8); }
@media (max-width:1000px){ .tiers-grid{ grid-template-columns:repeat(2,1fr); } .tier-card{ min-height:380px; } }
@media (max-width:600px){
  /* Stacked one per tier, min-height:0 was doing nothing: grid-auto-rows:1fr
     still pushed every card up to the height of Global Partner, the tier with
     the most benefits, so Connect Sponsor carried two lines of text in a box
     built for four. Sized to their own content the four tiers together take
     roughly a third less scrolling. */
  .tiers-grid{ grid-template-columns:1fr; grid-auto-rows:auto; gap:16px; }
  .tier-card{ min-height:0; padding:28px 24px; }
  .tier-avail{ margin-top:12px; }
  .tier-rule{ margin:18px auto; }
}

/* comparison table — static, tier colours in the header */
.compare-wrap{ overflow-x:auto; border:1px solid var(--n3); border-radius:var(--radius); }
.compare{ width:100%; border-collapse:collapse; min-width:720px; background:var(--white); }
.compare th, .compare td{ padding:18px 20px; text-align:left; border-bottom:1px solid var(--n3); font-size:15px; }
.compare thead th{ font-weight:600; color:var(--n8); background:var(--n1); white-space:nowrap; }
.compare thead th.th-tier{ color:var(--n8); text-align:center; }
.compare thead th.th-red{ background:var(--red); }
.compare thead th.th-green{ background:var(--green); }
.compare thead th.th-blue{ background:var(--blue); color:var(--white); }
.compare thead th.th-yellow{ background:var(--yellow); }
.compare tbody th{ font-weight:600; color:var(--n8); }
.compare td{ color:var(--text); text-align:center; }
.compare td .ck{
  display:inline-block; width:14px; height:8px;
  border-left:2.5px solid var(--green); border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg) translateY(-2px); margin-right:8px;
}
.compare td.no{ color:var(--n4); }
.compare tr:last-child th, .compare tr:last-child td{ border-bottom:0; }

/* ---------- proven success: seller testimonials + video player ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Three columns again. It was two from 9ffdd3c, when the Slovak seller was
   dropped off eBay's own row of three and there was no replacement; the client
   named two on 3 Aug, so the row is full and the section heading moved off
   "the Baltics" to stay true. */
.seller-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; grid-auto-rows:1fr; }
.seller-card{
  height:100%; background:var(--white); border:1px solid var(--n3);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.seller-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }

/* the still IS the control: full hit area, no hover revealed affordance */
.sc-media{
  display:block; position:relative; width:100%; padding:0; border:0;
  background:var(--n1); aspect-ratio:16/10; overflow:hidden; cursor:pointer;
}
.sc-media img{ display:block; width:100%; height:100%; object-fit:cover; }

/* OPEN RING, transparent inside. A filled disc sits on the seller's face and
   reads as a blob, so legibility comes from the drop shadow, never a fill.
   Hover only tints the interior; it must never become a solid disc. */
.sc-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  border:3px solid var(--white); background:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition:background-color .2s ease;
}
/* the triangle, drawn with borders so there is no extra asset to load */
.sc-play::after{
  content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent var(--white);
}
.sc-media:hover .sc-play, .sc-media:focus-visible .sc-play{ background:rgba(0,0,0,.35); }
.sc-media:focus-visible{ outline:3px solid var(--blue); outline-offset:-3px; }

.sc-body{ padding:24px 28px 28px; flex:1; display:flex; flex-direction:column; }
.sc-body h3{ font-size:clamp(18px,1.5vw,21px); line-height:1.3; font-weight:600; color:var(--n8); }
/* Inline flow, NOT flex. As a flex row the whole label is one item, so the
   moment it needed two lines it wrapped underneath the dot and left the dot
   stranded on a line of its own. Inline-block dot + normal text flow keeps
   them on the same first line at every width. */
.sc-meta{
  margin-top:8px; font-size:13px; font-weight:600; line-height:1.5;
  text-transform:uppercase; letter-spacing:.06em; color:var(--n6);
}
.sc-meta .dot{ margin-right:8px; vertical-align:baseline; }
.seller-card blockquote{
  margin:16px 0 0; font-size:15px; line-height:1.55; color:var(--text); flex:1;
}
.seller-card blockquote::before{ content:"\201C"; }
.seller-card blockquote::after{ content:"\201D"; }
/* Three cards in two columns leave an orphan in the second row. It spans both
   columns and is then held to one column's width and centred, so every card in
   the section still renders at the same size instead of the last one going
   double width under a 16:10 still. */
@media (max-width:1000px){
  .seller-grid{ grid-template-columns:1fr 1fr; }
  .seller-grid > :last-child{ grid-column:1 / -1; width:calc(50% - 12px); justify-self:center; }
}
/* one column hands its rows back to the content, same reason as .why-grid */
@media (max-width:640px){
  .seller-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .seller-grid > :last-child{ grid-column:auto; width:auto; }
}

/* the player */
.vmodal{ position:fixed; inset:0; z-index:1200; display:grid; place-items:center; }
.vmodal[hidden]{ display:none; }
.vmodal-backdrop{ position:absolute; inset:0; background:rgba(10,10,10,.82); }
.vmodal-panel{
  position:relative; width:min(1100px,92vw); max-height:88vh;
  aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden;
}
.vmodal-frame, .vmodal-frame iframe{ width:100%; height:100%; border:0; display:block; }
/* Anchored to the modal, NOT to the panel. The panel clips to its radius with
   overflow:hidden, which silently swallowed this button when it lived inside. */
.vmodal-x{
  position:absolute; top:24px; right:24px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.45); border:0; cursor:pointer; padding:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.vmodal-x::before, .vmodal-x::after{
  content:""; position:absolute; left:12px; top:21px; width:20px; height:2px;
  background:var(--white);
}
.vmodal-x::before{ transform:rotate(45deg); }
.vmodal-x::after{ transform:rotate(-45deg); }
.vmodal-x:hover{ background:rgba(0,0,0,.7); }
.vmodal-x:focus-visible{ outline:3px solid var(--white); outline-offset:2px; }

/* ---------- OneTrust consent banner: logo box ----------
   The asset is 985x179, a 5.5:1 wordmark, and it is fine. The SDK's own
   stylesheet sizes .ot-bnr-logo at 64x64 with object-fit:fill, so a wide
   wordmark gets crushed into a square and the letterforms distort. The banner
   renders in this document rather than an iframe, so it can be corrected here.
   !important is required because the SDK injects its stylesheet after this one.

   This ONLY ever affected this page. Measured on production: the Hub renders
   the same file at 176x32 on /en/, /en/resources/ and /en/exporter-of-the-year/
   at every breakpoint, because the Next.js app carries its own rule. Its box is
   already 5.5:1, so fill costs it nothing. This static carve-out had no such
   rule and inherited the raw SDK default.

   Height 32 with auto width reproduces the Hub's box exactly, so the banner is
   identical across the domain. object-fit is contain rather than the Hub's fill:
   at this ratio the two render the same, but contain cannot distort if the logo
   file is ever replaced at a different aspect. */
#onetrust-banner-sdk .ot-bnr-logo,
#onetrust-banner-sdk img.ot-bnr-logo{
  width:auto !important;
  height:32px !important;
  max-width:none !important;
  object-fit:contain !important;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
  .agenda-item{ opacity:1; }
}