/* Intrigue Events (events.intriguepm.com). Shared by index.html, morning-exchange.html and
   investor-meetup.html. One origin, three plain pages, no build step, so a same-site
   stylesheet is the right shape here; it is NOT the cross-app shared stylesheet decision,
   which is still open. Token values come from system/components/design-system.md, not from
   another app, because several apps have drifted. Light-only on purpose: the public
   marketing-style pages (off-market, instant-offer) are light-only too, and the dark
   pre-paint script exists for staff tools people live in all day. */
:root{
  color-scheme:light;
  --teal:#123A48; --teal2:#1B5063; --teal3:#2b6275;
  --lime:#9DC31B; --onLime:#123A48;          /* dark teal text on lime, never white */
  --ink:#1c2b30; --muted:#5d7076; --muted2:#8497a0; --inkOnTeal:#eaf3f6;
  --bg:#F2F3F4; --card:#ffffff; --line:#dde5e7; --line2:#eaeff1; --soft:#fafcfc;
  --ok:#3a8e2f; --okbg:#edf6ea; --okln:#cfe6c8;
  --danger:#b23b3b; --dangerbg:#fdf0f0; --dangerln:#efd2d2;
  --r:14px; --r-sm:10px; --r-xs:7px;
  --sh:0 4px 18px rgba(12,40,50,.10); --sh-lg:0 14px 44px rgba(12,40,50,.22);
  /* Layout standing rule (INT-415): the shell is fluid and side padding breathes with the
     viewport; only TEXT is capped, per component. An event page is a centered marketing
     page, so its one reading column takes --w-panel. */
  --gutter:clamp(16px,1.6vw,40px);
  --w-prose:68ch; --w-form:680px; --w-panel:900px;
  /* INT-809 / INT-664: Raleway sets body AND headings. --disp is still the display
     ROLE, it is just no longer a second face; the weight is what separates a heading
     from body copy now, which is why the Raleway request above carries 800. */
  --disp:'Raleway',-apple-system,BlinkMacSystemFont,sans-serif;
  --font:'Raleway',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Lockup face: the product word beside the wordmark art, and nothing else. The
     fallbacks are geometric on purpose; never fall back to a grotesque. */
  --font-lockup:'Outfit',Futura,'Century Gothic','URW Gothic',Arial,sans-serif;
  --text-lockup:13.5px; --tracking-lockup:.16em;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);min-height:100vh;line-height:1.5}
a{color:var(--teal2)}
svg.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}

/* ── Topbar: the app wordmark lockup, INTRIGUE in white + the product word in lime ── */
.topbar{background:var(--teal);color:#fff;padding:calc(env(safe-area-inset-top) + 14px) var(--gutter) 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
/* "Intrigue" is never set in type: the lockup is the wordmark ART from
   design-system/assets/logo/lockup/ plus the product word beside it, separated by a
   hairline. Drawn inline on each page so the bar never flashes unbranded; the art
   carries the pin, so there is no separate pin mark beside it. */
/* INT-833: the product word sits on the WORDMARK'S BASELINE, not centred on its box.
   The viewBox is cropped to end ON the baseline (98.01 of the authored 156.99), so the
   SVG's box bottom IS the baseline and align-items:baseline is exact; the g descender
   overflows below it. --wm-h stays the art's VISUAL height and is the one number to
   edit; .6243 is --lockup-baseline in design-system/tokens/typography.css. The container
   carries min-height:--wm-h so the art and the hairline do not move: without it the flex
   line shrinks to the baseline group and the bar's own centring slides the whole lockup
   down about 4px. It is min-height and not height because the product word WRAPS at phone
   width on the longer surfaces, and a fixed height would make those lines overflow the bar. The hairline keeps align-self:center, which holds it exactly where it
   rendered before (Ryan, 2026-09-19). A negative margin cannot do any of this: a replaced
   flex item's baseline is synthesized from its border box, so the margin is ignored. */
.topbar-logo{--wm-h:26px;display:flex;align-items:baseline;min-height:var(--wm-h);gap:9px;min-width:0;line-height:1;color:#fff;text-decoration:none}
.topbar-logo .wm{height:calc(var(--wm-h) * .6243);width:auto;flex:none;display:block;overflow:visible}
.topbar-logo .rule{width:1px;height:16px;background:rgba(255,255,255,.38);flex:none;align-self:center}
.topbar-logo span{font-family:var(--font-lockup);font-weight:500;font-size:var(--text-lockup);letter-spacing:var(--tracking-lockup);text-transform:uppercase;color:var(--lime);white-space:nowrap}
@media(max-width:600px){.topbar-logo{gap:7px;--wm-h:22px}.topbar-logo span{font-size:11.5px;letter-spacing:.12em}}
.topbar-back{font-size:13px;font-weight:600;color:var(--inkOnTeal);text-decoration:none;display:inline-flex;align-items:center;gap:6px;opacity:.9}
.topbar-back:hover{opacity:1;text-decoration:underline}

/* ── Hero band ── */
.hero{background:var(--teal);color:#fff;padding:12px var(--gutter) 40px;text-align:center}
.hero .col{max-width:var(--w-panel);margin:0 auto}
.eyebrow{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.hero h1{font-family:var(--disp);font-weight:800;font-size:32px;line-height:1.15;color:#fff;margin:0 auto 12px;max-width:var(--w-prose)}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero p{font-size:15.5px;font-weight:400;color:var(--inkOnTeal);max-width:var(--w-prose);margin:0 auto;line-height:1.65}

/* ── Fluid shell, capped reading column ── */
.shell{padding:0 var(--gutter)}
.col{max-width:var(--w-panel);margin:0 auto}
.section{padding:28px 0 8px}
.section-label{font-family:var(--disp);font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--muted);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:14px}
.section-label::before{content:'';width:20px;height:2px;background:var(--lime);border-radius:1px}
.divider{height:1px;background:var(--line);margin:24px 0 0}

/* ── Cards ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.detail-row{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.detail-row:last-child{border-bottom:0}
.detail-icon{width:36px;height:36px;border-radius:var(--r-xs);background:var(--soft);border:1px solid var(--line2);color:var(--teal2);
  display:flex;align-items:center;justify-content:center;flex:none;font-size:17px}
.detail-label{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--muted2);text-transform:uppercase;margin-bottom:3px}
.detail-value{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45}
.detail-note{font-size:13px;color:var(--muted);margin-top:2px}

/* Speaker / feature panel: deep teal surface, white text, lime accent */
.feature{background:var(--teal);color:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh)}
.feature .eyebrow{margin-bottom:10px}
.feature-name{font-family:var(--disp);font-size:24px;font-weight:800;color:#fff;margin-bottom:4px}
.feature-name em{font-style:normal;color:var(--lime)}
.feature-sub{font-size:12.5px;letter-spacing:.08em;font-weight:700;color:var(--inkOnTeal);text-transform:uppercase;margin-bottom:10px}
.feature p{font-size:14.5px;color:var(--inkOnTeal);line-height:1.75;max-width:var(--w-prose)}

/* Expect / series grids: DATA reflows, per the standing rule */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
/* A grid whose items should SHARE the row rather than leave an empty track: auto-fit collapses
   unused tracks, so two series cards fill the width instead of sitting in two-thirds of it. */
.grid-fit{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 18px;box-shadow:var(--sh)}
.tile-icon{width:40px;height:40px;border-radius:var(--r-xs);background:var(--soft);border:1px solid var(--line2);color:var(--teal2);
  display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:12px}
.tile-label{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.tile-note{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ── Series cards on the landing page ── */
.series-card{display:flex;flex-direction:column;gap:12px;padding:24px 22px;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.series-card:hover{box-shadow:var(--sh-lg);transform:translateY(-1px)}
.series-kicker{font-family:var(--disp);font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--teal2);text-transform:uppercase}
.series-title{font-family:var(--disp);font-size:22px;font-weight:800;color:var(--teal);line-height:1.2}
.series-desc{font-size:14.5px;color:var(--muted);line-height:1.6;flex:1}
.series-next{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);
  background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px;align-self:flex-start}
.series-next.is-scheduled{color:var(--ok);background:var(--okbg);border-color:var(--okln)}
.series-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:4px;
  background:var(--lime);color:var(--onLime);font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.01em;
  padding:11px 16px;border-radius:11px}

/* ── Forms ── */
.form-intro{font-size:14.5px;color:var(--ink);margin-bottom:16px;line-height:1.6;max-width:var(--w-prose)}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.field{margin-bottom:12px}
.field:last-child{margin-bottom:0}
label.lbl{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:6px}
label.lbl .req{color:var(--teal2)}
.inp{width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;font-family:var(--font);
  font-size:15px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--teal3);box-shadow:0 0 0 3px rgba(43,98,117,.13)}
.inp::placeholder{color:var(--muted2)}
.submit-wrap{margin-top:16px}
.btn{width:100%;border:0;border-radius:11px;padding:15px 18px;font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.01em;
  cursor:pointer;transition:filter .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:var(--lime);color:var(--onLime)}
.btn-primary:hover{filter:brightness(.96)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.inline-note{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── States ── */
.hidden{display:none !important}
.success{background:var(--card);border:1px solid var(--okln);border-radius:var(--r);padding:28px 22px;text-align:center;box-shadow:var(--sh)}
.success-icon{width:44px;height:44px;border-radius:50%;background:var(--okbg);color:var(--ok);display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px}
.success-title{font-family:var(--disp);font-size:20px;font-weight:800;color:var(--ink);margin-bottom:6px}
.success-msg{font-size:14px;color:var(--muted);line-height:1.65;max-width:var(--w-prose);margin:0 auto}
.holding{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;box-shadow:var(--sh)}
.holding-title{font-family:var(--disp);font-size:22px;font-weight:800;color:var(--teal);margin-bottom:6px;line-height:1.2}
.holding-sub{font-size:14.5px;color:var(--muted);line-height:1.65;max-width:var(--w-prose);margin-bottom:18px}
.loading{font-size:14px;color:var(--muted);padding:20px 0;display:flex;align-items:center;gap:10px}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(18,58,72,.2);border-top-color:var(--teal2);border-radius:50%;animation:spin .6s linear infinite}
.btn .spinner{border-color:rgba(18,58,72,.25);border-top-color:var(--onLime)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Footer + toast ── */
.footer{margin-top:36px;padding:18px var(--gutter) calc(env(safe-area-inset-bottom) + 18px);background:var(--teal);color:var(--inkOnTeal);text-align:center;
  font-family:var(--disp);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.footer a{color:#fff;text-decoration:none}
.eho{color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:14px}.eho svg{height:34px;width:auto}.eho span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;line-height:1.3}
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:#0f242c;color:#fff;font-size:13.5px;font-weight:600;
  padding:13px 22px;border-radius:var(--r-sm);box-shadow:var(--sh-lg);z-index:100;opacity:0;transition:opacity .3s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.show{opacity:1}
.toast.error{background:var(--danger)}

@media (max-width:600px){
  .hero h1{font-size:26px}
  .hero{padding-bottom:30px}
  .topbar-back span{display:none}
}