/* The webinar landing page (/webinar/). The poster, made into a page: the pine
   band and its job ad on top, the three lessons, then the host and the sign-up.
   Everything reuses the site's tokens — no new colour, no new type ramp.

   No style="" anywhere: the origin sends style-src 'self' with no
   'unsafe-inline', so an inline attribute would be dropped before it applied.

   Ember, per viewport: the hero's CTA and its italic accent line (the
   masthead's accent word is the one other place the brand lets ember in); the
   sign-up button below. The job ad's stamp is ember 700, the only ember that
   may carry text on light, and its two figures take the status hues because
   they are numbers. */

/* ═══ The poster ═══════════════════════════════════════════════════════════ */
.wb-hero{padding:var(--space-13) 0 var(--space-14)}
.wb-bleed{width:920px;height:920px;right:-300px;top:-260px}
.wb-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-12);align-items:center}

.wb-pill{display:inline-flex;align-items:center;height:36px;padding:0 var(--space-7);border-radius:var(--radius-pill);background:var(--on-black);color:var(--green-900);font-family:var(--font-mono);font-size:var(--size-caption);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;max-width:none}
.wb-title{margin-top:var(--space-9);font-size:clamp(40px,6.4vw,80px);line-height:1.02;letter-spacing:-.035em;color:var(--text-on-dark);text-wrap:balance;max-width:12ch}
.wb-pre{display:block;margin-bottom:var(--space-4);font-size:.52em;letter-spacing:-.02em;color:var(--green-300)}
.wb-without{display:flex;align-items:center;gap:var(--space-6);margin-top:var(--space-7);font-size:clamp(28px,3.6vw,44px);line-height:1.1;color:var(--ember-300);max-width:none}
.wb-dash{flex:none;width:clamp(32px,4vw,56px);height:4px;border-radius:2px;background:var(--ember-300)}

.wb-when{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-10);margin:var(--space-10) 0 0}
.wb-when dt{font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--band-muted)}
.wb-when dd{margin:var(--space-2) 0 0;font-size:var(--size-body);font-weight:var(--weight-medium);color:var(--text-on-dark)}
.wb-tz{margin-top:var(--space-5);font-size:var(--size-caption);color:var(--band-muted)}
.wb-cta{margin-top:var(--space-9);gap:var(--space-7)}
.wb-count{font-size:var(--size-caption);color:var(--band-muted);max-width:none}

/* The job ad: a light card on the band. It restates its own colours, because
   everything inside a .tls-band otherwise inherits type on dark. */
.wb-job{position:relative;margin:0;background:var(--surface-card);color:var(--text-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.wb-job-head{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-6);align-items:start;padding:var(--space-8) var(--space-8) 0}
.wb-logo{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-md);background:#2B2620;color:#F5F3EF;font-size:var(--size-small);font-weight:var(--weight-semibold);letter-spacing:-.02em}
/* Doubled class: .tls-band h2 would otherwise paint it type-on-dark, on white. */
.wb-job .wb-job-t{font-size:var(--size-h3);line-height:1.2;color:var(--text-primary)}
.wb-job-who p{margin-top:var(--space-2);font-size:var(--size-small);color:var(--text-secondary)}
.wb-posted{font-size:var(--size-caption);color:var(--text-secondary);white-space:nowrap}
/* The terms and the stamp share a row, the stamp in flow so it can never sit on
   a line of text; on a phone it drops under the chips. */
.wb-terms{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-6);padding:0 var(--space-8) 0 calc(var(--space-8) + 56px + var(--space-6))}
.wb-chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-4);margin:0;padding:0;flex:1 1 200px}
.wb-chips li{padding:5px 10px;border-radius:var(--radius-sm);background:var(--surface-sunken);font-size:var(--size-caption);font-weight:var(--weight-medium)}
.wb-stamp{flex:none;margin-right:var(--space-2);padding:4px 12px;border:3px solid var(--ember-700);border-radius:var(--radius-md);color:var(--ember-700);font-size:var(--size-h3);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;transform:rotate(-8deg);max-width:none}
.wb-req{margin-top:var(--space-7);padding:var(--space-6) var(--space-8) var(--space-7);border-top:1px solid var(--border-hairline)}
.wb-job .wb-req h3{font-size:var(--size-caption);font-weight:var(--weight-semibold);color:var(--text-secondary);letter-spacing:0}
.wb-req ul{margin:var(--space-5) 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:var(--space-4);font-size:var(--size-small);font-weight:var(--weight-medium)}
.wb-cost{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-hairline)}
.wb-cost>div{padding:var(--space-6) var(--space-8) var(--space-7)}
.wb-cost span{display:block;font-size:var(--size-caption);color:var(--text-secondary)}
.wb-cost b{display:block;margin-top:var(--space-3);font-size:clamp(17px,1.6vw,21px);white-space:nowrap;font-weight:var(--weight-semibold);letter-spacing:-.01em}
.wb-cost-hire b{color:var(--status-losing)}
.wb-cost-learn{background:var(--sage-tint);border-left:1px solid var(--border-hairline)}
.wb-cost-learn b{color:var(--status-on-target)}
.wb-job .wb-illus{display:block;font-size:var(--size-micro);color:var(--text-secondary);padding:var(--space-4) var(--space-8) var(--space-5);border-top:1px solid var(--border-hairline);background:var(--surface-sunken)}

/* ═══ What you will learn ══════════════════════════════════════════════════ */
.wb-head{max-width:760px;margin-bottom:var(--space-11)}
.wb-head::before{content:"";display:block;width:38px;height:3px;border-radius:2px;
  background:linear-gradient(90deg, var(--pine-500) 0 26px, transparent 26px 30px, var(--action) 30px 38px);
  margin-bottom:var(--space-7)}
.wb-head .t-lede{margin-top:var(--space-6)}
.wb-three{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.wb-three li{padding:var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card)}
.wb-n{display:block;font-size:var(--size-caption);color:var(--green-text)}
.wb-three h3{margin-top:var(--space-6);font-size:var(--size-h3)}
.wb-three p{margin-top:var(--space-5);font-size:var(--size-small);line-height:1.55;color:var(--text-secondary)}

/* ═══ Host and sign-up ═════════════════════════════════════════════════════ */
.wb-join{background:var(--surface-sunken);scroll-margin-top:var(--head-h)}
.wb-join-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr);gap:var(--space-12);align-items:start}
.wb-side{position:sticky;top:calc(var(--head-h) + var(--space-8));display:flex;flex-direction:column;gap:var(--space-6)}
.wb-event,.wb-host,.wb-friend{padding:var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card)}
.wb-live{display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--size-caption);font-weight:var(--weight-semibold);letter-spacing:.1em;text-transform:uppercase}
.wb-dot{width:9px;height:9px;border-radius:50%;background:var(--status-losing)}
.wb-date{margin-top:var(--space-5);font-family:var(--font-sans);font-size:clamp(30px,3.4vw,40px);font-weight:var(--weight-semibold);letter-spacing:-.03em;line-height:1.1;max-width:none}
.wb-date-sub{margin-top:var(--space-4);font-size:var(--size-small);color:var(--text-secondary)}
.wb-host{display:flex;gap:var(--space-7);align-items:center}
.wb-host-l{font-size:var(--size-caption);color:var(--text-secondary)}
.wb-host-n{margin-top:var(--space-2);font-size:var(--size-h3);font-weight:var(--weight-semibold);line-height:1.2}
.wb-host-r{font-size:var(--size-small);color:var(--text-secondary);line-height:1.45}
.wb-friend h3{font-size:var(--size-body)}
.wb-friend p{margin-top:var(--space-4);font-size:var(--size-small);color:var(--text-secondary)}
.wb-friend strong{color:var(--text-primary);font-weight:var(--weight-semibold)}

.wb-form,.wb-done{border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card);padding:var(--space-11) var(--space-10);box-shadow:var(--shadow-md)}
.wb-form-lede{margin-top:var(--space-5);color:var(--text-secondary);font-size:var(--size-small)}
.wb-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-6);margin-top:var(--space-9)}
.wb-f{display:block;min-width:0}
.wb-f:nth-child(-n+3){grid-column:1 / -1}
.wb-f span{display:block;font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-secondary);margin-bottom:var(--space-4)}
.wb-f i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--text-disabled)}
.wb-f input,.wb-f select{width:100%;height:var(--control-h-lg);padding:0 var(--space-6);font-family:var(--font-sans);font-size:var(--size-body);color:var(--text-primary);background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:var(--transition-color)}
.wb-f select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:var(--space-10)}
.wb-f input:hover,.wb-f select:hover{border-color:var(--border-strong)}
.wb-f input:focus,.wb-f select:focus{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:2px;border-color:transparent}
.wb-consent{display:flex;gap:var(--space-5);align-items:flex-start;margin-top:var(--space-8);font-size:var(--size-caption);line-height:1.5;color:var(--text-secondary);cursor:pointer}
.wb-consent input{appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);transition:var(--transition-color)}
.wb-consent input:checked{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 4px var(--surface-card)}
.wb-err{margin-top:var(--space-6);font-size:var(--size-small);color:var(--status-losing);min-height:1.4em}
.wb-err a{display:block;margin-top:var(--space-3)}
.wb-submit{width:100%;margin-top:var(--space-4)}
.wb-fine{margin-top:var(--space-6);font-size:var(--size-caption);color:var(--text-secondary)}

.wb-done .ep-eyebrow{display:block;max-width:none}
.wb-done h2{margin-top:var(--space-5)}
.wb-said{margin:var(--space-6) 0 var(--space-9);color:var(--text-secondary)}
.wb-spam{display:flex;gap:var(--space-5);align-items:flex-start;margin:calc(-1 * var(--space-5)) 0 var(--space-9);padding:var(--space-6) var(--space-7);border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:var(--sage-tint)}
.wb-spam p{margin:0;font-size:var(--size-small);color:var(--text-primary);max-width:none}
.wb-spam-i{flex:none;width:20px;height:20px;margin-top:2px;color:var(--green-900)}

/* The bait field. Off-screen rather than display:none, because some bots skip
   anything that is not rendered — and hidden from assistive tech. */
.wb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ═══ Questions ════════════════════════════════════════════════════════════ */
.wb-faq h2{margin-bottom:var(--space-8)}
/* This page has no footer columns above the bottom line, so the line does not need their gap. */
.site-foot .foot-bottom{margin-top:0}

/* ═══ Narrower screens ═════════════════════════════════════════════════════ */
@media (max-width:980px){
  .wb-hero-in,.wb-join-in{grid-template-columns:1fr;gap:var(--space-11)}
  .wb-side{position:static}
  .wb-three{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wb-hero{padding:var(--space-11) 0 var(--space-12)}
  .wb-bleed{width:460px;height:460px;right:-180px;top:-120px}
  .wb-job-head{grid-template-columns:auto 1fr;padding:var(--space-7) var(--space-7) 0}
  .wb-posted{grid-column:2;margin-top:calc(var(--space-4) * -1)}
  .wb-terms{padding:0 var(--space-7)}
  .wb-stamp{font-size:var(--size-body)}
  .wb-req{padding-inline:var(--space-7)}
  .wb-cost{grid-template-columns:1fr}
  .wb-cost>div{padding-inline:var(--space-7)}
  .wb-cost-learn{border-left:0;border-top:1px solid var(--border-hairline)}
  .wb-illus{padding-inline:var(--space-7)}
  .wb-form,.wb-done{padding:var(--space-8) var(--space-7)}
  .wb-fields{grid-template-columns:1fr}
  .wb-cta .tls-btn{width:100%}
  .wb-done .tls-btn{width:100%}
}

/* ═══ Icons and logos ══════════════════════════════════════════════════════
   Line icons draw in currentColor at a 1.75 stroke, the same weight as the
   product's own icons; the platform marks keep their brand colours. Icon
   tiles are pine on a sage tint, so they add colour without adding ember. */
.wb-ic{display:block;width:20px;height:20px;stroke-width:1.75;flex:none}
.wb-ic-s{display:inline-block;width:15px;height:15px;stroke-width:2;flex:none;vertical-align:-2px}
.wb-logo-s{display:block;width:18px;height:18px;flex:none}

.wb-when dt{display:flex;align-items:center;gap:var(--space-3)}
.wb-when dt .wb-ic{width:14px;height:14px;color:var(--green-300)}


.wb-job-who p{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.wb-where{display:inline-flex;align-items:center;gap:var(--space-2)}
.wb-chips li{display:inline-flex;align-items:center;gap:var(--space-3)}
.wb-req ul{list-style:none;padding-left:0}
.wb-req li{display:flex;align-items:flex-start;gap:var(--space-4)}
.wb-req li .wb-ic-s{margin-top:3px;color:var(--sage)}

.wb-three-top{display:flex;align-items:center;justify-content:space-between}
.wb-tile{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-lg);background:var(--sage-tint);color:var(--green-700)}
.wb-tile .wb-ic{width:24px;height:24px}
.wb-three li{transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
@media (hover:hover){.wb-three li:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}}

.wb-event-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.wb-meet{width:30px;height:25px;flex:none}
.wb-host-n{display:flex;align-items:center;gap:var(--space-3)}
.wb-verified{display:inline-flex;color:var(--sage)}
.wb-verified .wb-ic-s{width:18px;height:18px}
.wb-host-stat{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding:4px 10px;width:fit-content;border-radius:var(--radius-pill);background:var(--sage-tint);font-size:var(--size-caption);color:var(--text-secondary)}
.wb-host-stat .wb-ic-s{color:var(--sage)}
.wb-host-stat b{color:var(--text-primary);font-weight:var(--weight-semibold)}
.wb-friend .wb-tile{margin-bottom:var(--space-5)}


.wb-done .tls-btn-secondary{gap:var(--space-4)}

.wb-foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);padding-bottom:var(--space-8)}
.wb-foot-top p{font-size:var(--size-small);color:var(--text-secondary)}
.wb-foot-top + .foot-bottom{padding-top:var(--space-6)}

@media (max-width:640px){
    }

/* ═══ Host photo ═══════════════════════════════════════════════════════════
   One file, two sizes, always a circle. A sage ring on light, the band's own
   muted green on the pine. */
.wb-photo{display:block;flex:none;border-radius:50%;object-fit:cover;background:var(--green-700)}
.wb-photo-l{width:72px;height:72px;box-shadow:0 0 0 3px var(--surface-card),0 0 0 5px var(--sage)}
.wb-photo-s{width:40px;height:40px;box-shadow:0 0 0 2px var(--green-900),0 0 0 3px var(--green-300)}

/* ═══ Hero additions ═══════════════════════════════════════════════════════ */
.wb-who{margin-top:var(--space-5);font-size:var(--size-small);color:var(--text-on-dark);max-width:44ch}
.wb-count-col{display:flex;flex-direction:column;gap:var(--space-2)}
.wb-urgency{font-size:var(--size-caption);color:var(--green-300);max-width:none}
.wb-hosted{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-10);padding-top:var(--space-7);border-top:1px solid var(--border-on-dark)}
.wb-hosted p{font-size:var(--size-small);color:var(--band-muted);max-width:none}
.wb-hosted b{color:var(--text-on-dark);font-weight:var(--weight-semibold)}

/* ═══ The agency band ══════════════════════════════════════════════════════
   Straight under the pine: who is teaching, and the figure that says why they
   can. White, so the hero stays the page's one dark section. */
.wb-agency{background:var(--surface-card);border-bottom:1px solid var(--border-default);padding:var(--space-12) 0}
.wb-agency-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-12);align-items:center}
.wb-agency-l{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--green-text);max-width:none}
.wb-agency h2{margin-top:var(--space-5);max-width:22ch}
.wb-agency-copy>p:last-child{margin-top:var(--space-5);color:var(--text-secondary)}
.wb-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin:0}
.wb-stats>div{padding:var(--space-7);border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-page)}
.wb-stats dt{font-size:var(--size-caption);color:var(--text-secondary)}
.wb-stats dd{margin:var(--space-3) 0 0;font-size:clamp(32px,3.6vw,44px);font-weight:var(--weight-medium);letter-spacing:-.03em;line-height:1;color:var(--green-700)}
.wb-stats-logos{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.wb-stats-logos dd{display:flex;gap:var(--space-6);margin:0}
.wb-stats-logos .wb-logo-s{width:28px;height:28px;color:var(--ink)}

/* ═══ Free for every attendee ══════════════════════════════════════════════ */
.wb-tools{padding-top:0}
.wb-tool-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin:var(--space-8) 0 0;padding:0}
.wb-tool-list li{display:flex;gap:var(--space-6);align-items:flex-start;padding:var(--space-7);border:1px dashed var(--border-strong);border-radius:var(--radius-xl);background:var(--surface-card)}
.wb-tool-list h3{font-size:var(--size-body)}
.wb-tool-list p{margin-top:var(--space-3);font-size:var(--size-small);line-height:1.5;color:var(--text-secondary)}

/* ═══ How the 60 minutes runs ══════════════════════════════════════════════ */
.wb-agenda{padding-top:0}
.wb-run{list-style:none;margin:var(--space-8) 0 0;padding:0;border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card);overflow:hidden}
.wb-run li{display:grid;grid-template-columns:32px 1fr auto;gap:var(--space-6);align-items:center;padding:var(--space-6) var(--space-7);border-bottom:1px solid var(--border-hairline);font-size:var(--size-body)}
.wb-run li:last-child{border-bottom:0}
.wb-run-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sage-tint);color:var(--green-700);font-size:var(--size-caption)}
.wb-run-m{font-size:var(--size-caption);color:var(--text-secondary);white-space:nowrap}
.wb-agenda-cta{margin-top:var(--space-8);display:flex;justify-content:center}

/* ═══ Spend chips ══════════════════════════════════════════════════════════
   Radio buttons dressed as pills: one tap, and the answer is the whole chip. */
.wb-spend{grid-column:1 / -1;border:0;margin:0;padding:0;min-inline-size:0}
.wb-spend legend{padding:0}
.wb-chips-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.wb-chips-pick label{position:relative;display:block;cursor:pointer}
.wb-chips-pick input{position:absolute;opacity:0;width:1px;height:1px}
.wb-chips-pick span{display:flex;align-items:center;justify-content:center;width:100%;height:44px;padding:0 var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--surface-sunken);font-family:var(--font-sans);font-size:var(--size-small);text-transform:none;letter-spacing:0;color:var(--text-primary);margin:0;transition:var(--transition-color)}
.wb-chips-pick label:hover span{border-color:var(--border-strong)}
.wb-chips-pick input:checked + span{background:var(--green-700);border-color:var(--green-700);color:var(--on-black)}
.wb-chips-pick input:focus-visible + span{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:2px}
.wb-plus{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);font-size:var(--size-small);font-weight:var(--weight-medium);color:var(--green-text)}
.wb-done .tls-btn-primary{gap:var(--space-4)}
.wb-share-note{margin-top:var(--space-5)}

@media (max-width:980px){
  .wb-agency-in{grid-template-columns:1fr;gap:var(--space-9)}
  .wb-tool-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wb-pill{height:auto;min-height:36px;padding:var(--space-3) var(--space-6);font-size:var(--size-micro);letter-spacing:.06em}
  .wb-agency{padding:var(--space-11) 0}
  .wb-run li{grid-template-columns:28px 1fr;padding:var(--space-5) var(--space-6)}
  .wb-run-m{grid-column:2}
  .wb-agenda-cta .tls-btn{width:100%}
  .wb-stats-logos{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
}