/* ============================================================
   Orkestriq — homepage (index.html). Imports the shared
   foundation (tokens, type, browser surfaces); owns the
   landing-page chrome and sections.
   ============================================================ */
@import url("/css/base.css");
/* Self-hosted webfonts (14 Sep 2026). The same WOFF2 files and unicode ranges
   Google Fonts served; hosting them here removes a render-blocking third-party
   stylesheet from the homepage's critical path. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/dm-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/dm-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/dm-sans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/dm-sans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--g900);background:white;-webkit-font-smoothing:antialiased}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--g100);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{text-decoration:none;display:flex;align-items:center}
.nav-logo svg{height:30px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;color:var(--g600);text-decoration:none;transition:color .15s}
.nav-links a:hover{color:var(--dark)}
.nav-cta{background:var(--dark);color:white!important;padding:8px 20px;border-radius:8px;font-weight:500;white-space:nowrap}
.nav-cta:hover{background:var(--green)!important}
.lang-pill{display:inline-flex;background:var(--g50);border:1px solid var(--g100);border-radius:999px;padding:3px}
/* The pill holds links, not buttons: each language is a real URL (/ and /fr)
   so it can be crawled and shared. Both selectors stay for the pages that
   still toggle in place (register, portal). */
.lang-pill button,.lang-pill a{border:none;background:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--g600);padding:4px 11px;border-radius:999px;cursor:pointer;transition:all .15s;text-decoration:none;line-height:1.5}
.lang-pill button.active,.lang-pill a.active{background:var(--dark);color:white}

/* HERO */
.hero{min-height:100vh;background:linear-gradient(135deg,#072e21 0%,#0A5C45 50%,#1a6b52 100%);display:flex;align-items:center;justify-content:center;padding:120px 40px 80px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:rgba(29,158,117,.12)}
.hero::after{content:'';position:absolute;bottom:-80px;left:-60px;width:350px;height:350px;border-radius:50%;background:rgba(29,158,117,.08)}
.hero-inner{max-width:1100px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px}
.hero-title{font-family:'DM Serif Display',serif;font-size:clamp(40px,5vw,64px);color:white;line-height:1.05;letter-spacing:-.02em;margin-bottom:24px;text-wrap:balance}
.hero-title em{font-style:italic;color:rgba(255,255,255,.65)}
.hero-strap{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--mint);letter-spacing:.01em;margin:-4px 0 22px}
.hero-sub{font-size:17px;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:40px;max-width:480px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:white;color:var(--dark);padding:14px 28px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{background:var(--light);transform:translateY(-1px)}
.btn-secondary{background:rgba(255,255,255,.1);color:white;padding:14px 28px;border-radius:10px;font-size:15px;font-weight:500;text-decoration:none;transition:all .15s;border:1px solid rgba(255,255,255,.2)}
.btn-secondary:hover{background:rgba(255,255,255,.18)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1);border-radius:12px;overflow:hidden;margin-top:48px}
.stat{background:rgba(0,0,0,.2);padding:26px 20px;text-align:center}
/* The brand serif, as on .hero-title and .pricing-price — this strip was the
   only headline figure on the page still set in DM Sans. */
.stat-num{font-family:'DM Serif Display',serif;font-weight:400;font-size:32px;letter-spacing:-.02em;line-height:1.05;color:white;margin-bottom:10px;white-space:nowrap}
/* Smaller and more widely tracked than the old label. At the serif's new size
   a 12px/.06em all-caps line competes with the figure instead of supporting
   it; the extra tracking and lower size push it back into a caption role. */
.stat-label{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.16em}
/* Two-column hero below 1440px: the stats row narrows to 332-500px, and at
   32px the figures push the third stat off the edge. Scale them with the
   viewport (capped at 32px) and tighten the labels; phones are unchanged. */
@media(min-width:901px) and (max-width:1439px){
  .stat{padding:22px 10px}
  .stat-num{font-size:clamp(20px,calc(3.4vw - 9px),32px)}
  .stat-label{letter-spacing:.1em}
}
.hero-visual{position:relative}
.phone-frame{background:var(--dark);border-radius:32px;padding:16px;box-shadow:0 40px 80px rgba(0,0,0,.5);max-width:280px;margin:0 auto}
.phone-screen{background:var(--cream);border-radius:20px;overflow:hidden}
.notif-badge{position:absolute;top:-10px;right:20px;background:var(--green);color:white;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 12px rgba(29,158,117,.4)}

/* Hero entrance — port of tailark hero-section-1: each element blur-slides up
   and springs to rest, staggered top-to-bottom (phone + CTA a beat later).
   Gated on .js-motion so content stays visible with JS off or on browsers that
   can't parse linear(); only runs when the user hasn't asked for less motion. */
:root{--hero-spring:linear(0,0.004,0.016,0.036,0.063,0.098,0.141 9%,0.246,0.373 17.5%,0.64 26.5%,0.865,1.02 36.5%,1.07,1.104,1.115 47%,1.107,1.088,1.058 59%,1.006 68.5%,0.993,0.988 78%,0.995,1.003 90%,1)}
@keyframes heroIn{from{opacity:0;transform:translateY(12px);filter:blur(12px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:no-preference){
  .js-motion .hero-title,
  .js-motion .hero-strap,
  .js-motion .hero-sub,
  .js-motion .hero-actions,
  .js-motion .hero-stats,
  .js-motion .hero-visual{animation:heroIn 1.2s var(--hero-spring) both;animation-play-state:paused;will-change:opacity,transform,filter}
  /* Hold the entrance paused (elements sit hidden at the 'from' keyframe) until
     JS arms it one frame after first paint, so the cold-load image decode and
     hero paint happen BEFORE the animation runs, instead of colliding in one
     ~100ms frame. .hero-armed is set in the <head> script; the setTimeout there
     is a fail-safe so content still appears if a rAF is somehow starved. */
  .js-motion.hero-armed .hero-title,
  .js-motion.hero-armed .hero-strap,
  .js-motion.hero-armed .hero-sub,
  .js-motion.hero-armed .hero-actions,
  .js-motion.hero-armed .hero-stats,
  .js-motion.hero-armed .hero-visual{animation-play-state:running}
  .js-motion .hero-title{animation-delay:.05s}
  .js-motion .hero-strap{animation-delay:.15s}
  .js-motion .hero-sub{animation-delay:.25s}
  .js-motion .hero-visual{animation-delay:.35s}
  .js-motion .hero-actions{animation-delay:.5s}
  .js-motion .hero-stats{animation-delay:.6s}
}

/* LOGOS */
.logos{padding:48px 40px;background:var(--g50);border-bottom:1px solid var(--g100)}
.logos-inner{max-width:900px;margin:0 auto;text-align:center}
.logos-label{font-size:12px;font-weight:600;color:var(--g400);text-transform:uppercase;letter-spacing:.08em;margin-bottom:24px}
.logos-row{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.logo-item{font-family:'DM Serif Display',serif;font-size:18px;color:var(--g400);opacity:.7}

/* FEATURES */
.features{padding:112px 40px;background:white}
.features-inner{max-width:1100px;margin:0 auto}
.section-label{font-size:11px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.section-title{font-family:'DM Serif Display',serif;font-size:clamp(32px,4vw,50px);color:var(--g900);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px}
.section-sub{font-size:17px;color:var(--g600);line-height:1.75;max-width:560px;margin-bottom:72px}
.features-inner>.section-sub{margin-bottom:64px}
.features-inner .section-sub b{display:block;margin-top:14px}
/* The problem block is centred like every other section header from tablet
   width up; on phones it stays left-aligned with the cards (14 Sep 2026). */
@media(min-width:901px){.features-inner>.section-label,.features-inner>.section-title,.features-inner>.section-sub{text-align:center}.features-inner>.section-sub{margin-left:auto;margin-right:auto}}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* The eight lower-priority capabilities, as one line under the grid instead of
   eight more equally weighted cards. Nothing is lost to search; the section
   stops reading as a catalogue. */
.features-also{margin-top:36px;font-size:14.5px;color:var(--g600);line-height:1.8;max-width:880px}
.features-also b{color:var(--g900);font-weight:600}
.feature-card{background:white;border-radius:16px;padding:28px 28px 24px;border:1px solid var(--g100);transition:all .22s;position:relative}
.feature-card:hover{border-color:rgba(29,158,117,.4);transform:translateY(-3px);box-shadow:0 12px 32px rgba(10,92,69,.09)}
.feature-card.highlight{background:var(--dark);border-color:var(--dark);grid-column:span 2}
.feature-icon{width:42px;height:42px;border-radius:10px;background:var(--light);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--dark)}
.feature-card.highlight .feature-icon{background:rgba(29,158,117,.25);color:white}
.feature-title{font-size:15px;font-weight:600;color:var(--g900);margin:0 0 8px;letter-spacing:-.01em}
.feature-card.highlight .feature-title{color:white}
.feature-desc{font-size:14px;color:var(--g600);line-height:1.65}
.feature-card.highlight .feature-desc{color:rgba(255,255,255,.72)}
.feature-badge{display:inline-flex;align-items:center;gap:5px;background:var(--green);color:white;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}

/* PORTAL SECTION */
.portal-section{padding:100px 40px;background:var(--dark)}
.portal-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
/* Mint, not --green: this label sits on the --dark section, where the darkened
   --green measures 1.49:1. #3DDC97 is the house dark-surface green (4.52:1). */
.portal-label{font-size:12px;font-weight:600;color:#3DDC97;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.portal-title{font-family:'DM Serif Display',serif;font-size:clamp(30px,3.5vw,44px);color:white;line-height:1.1;margin-bottom:20px}
.portal-sub{font-size:16px;color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:32px}
.portal-features{display:flex;flex-direction:column;gap:14px}
.portal-feature{display:flex;align-items:flex-start;gap:12px}
.portal-feature-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:6px}
.portal-feature-text{font-size:15px;color:rgba(255,255,255,.75);line-height:1.5}
.portal-mockup{background:#0D5C3F;border-radius:20px;padding:24px;box-shadow:0 40px 80px rgba(0,0,0,.4)}
.portal-mockup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.portal-mockup-logo{font-family:'DM Serif Display',serif;font-size:14px;color:rgba(255,255,255,.5)}
.portal-mockup-event{font-size:12px;color:rgba(255,255,255,.4)}
.portal-msg{background:var(--green);border-radius:10px;padding:12px 16px;margin-bottom:16px}
.portal-msg-title{font-size:11px;font-weight:700;color:white;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
/* .92 not .85: over --green, 85% white composites to 4.36:1 and misses AA. */
.portal-msg-body{font-size:13px;color:rgba(255,255,255,.92);line-height:1.4}
.portal-rows{display:flex;flex-direction:column;gap:8px}
.portal-row{background:rgba(255,255,255,.06);border-radius:8px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between}
.portal-row-label{font-size:13px;color:rgba(255,255,255,.6)}
.portal-row-value{font-size:13px;color:white;font-weight:500}

/* PWA SECTION */
.pwa-section{padding:112px 40px;background:var(--cream)}
.pwa-inner{max-width:1060px;margin:0 auto;text-align:center}
.pwa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.pwa-card{background:white;border-radius:18px;padding:36px 28px;border:1px solid var(--g100);text-align:left;transition:all .2s}
.pwa-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.07);transform:translateY(-2px)}
.pwa-icon{width:48px;height:48px;border-radius:12px;background:var(--light);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--dark)}
.pwa-title{font-size:16px;font-weight:600;color:var(--g900);margin:0 0 10px;letter-spacing:-.01em}
.pwa-desc{font-size:14px;color:var(--g600);line-height:1.7}

/* PRICING */
.pricing{padding:100px 40px;background:white}
.pricing-inner{max-width:1060px;margin:0 auto;text-align:center}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px;align-items:start}
.pricing-card{border-radius:16px;padding:32px;border:1px solid var(--g100);text-align:left;position:relative;background:white}
.pricing-card.featured{background:var(--dark);border-color:var(--dark)}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:white;font-size:11px;font-weight:600;padding:4px 16px;border-radius:20px;white-space:nowrap}
.pricing-plan{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin-bottom:12px}
.pricing-card.featured .pricing-plan{color:#9FDCC6}
.pricing-price{font-family:'DM Serif Display',serif;font-size:42px;color:var(--g900);margin-bottom:4px}
.pricing-card.featured .pricing-price{color:white}
/* A quoted slot holds words, not a figure, so it needs one size down to stay
   on a single line in the narrower cards below ~1260px. */
.pricing-price.is-quote{font-size:36px}
.pricing-period{font-size:13px;color:var(--g400);margin-bottom:8px}
/* Annual licence: the headline is the per-event figure, so it carries a unit. */
.price-pre{margin-right:.24em}
.price-unit{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;color:var(--g400);margin-left:7px;letter-spacing:0;white-space:nowrap;display:inline-block}
.pricing-card.featured .price-unit{color:rgba(255,255,255,.6)}
.pricing-card.featured .pricing-period{color:rgba(255,255,255,.72)}
/* What the price covers: a label and a value per row rather than one middot
   list. Values are right-aligned so the numbers form a column the eye can run
   down, and the labels align across all three cards. */
.covers{margin:2px 0 20px}
.covers-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--g400);margin-bottom:7px}
.covers dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13px}
.covers dt{color:var(--g400);white-space:nowrap}
.covers dd{margin:0;color:var(--g900);font-weight:500;text-align:right}
.pricing-card.featured .covers-h{color:rgba(255,255,255,.72)}
.pricing-card.featured .covers dt{color:rgba(255,255,255,.72)}
.pricing-card.featured .covers dd{color:#fff}
.pricing-divider{height:1px;background:var(--g100);margin-bottom:20px}
.pricing-card.featured .pricing-divider{background:rgba(255,255,255,.1)}
.pricing-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--g400);margin:16px 0 10px}
.pricing-card.featured .pricing-section-label{color:rgba(255,255,255,.72)}
.pricing-features{display:flex;flex-direction:column;gap:9px}
.pricing-feature{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--g600);line-height:1.4}
.pricing-card.featured .pricing-feature{color:rgba(255,255,255,.75)}
.pricing-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:4px}
.pricing-x{width:6px;height:6px;border-radius:50%;background:var(--g200);flex-shrink:0;margin-top:4px}
.pricing-feature.muted{opacity:.5}
/* The one-event card prints everything its band includes in one list, low
   tier to high, its own additions last and tagged. The two large base tiers
   condense to a line each once inherited (quieter dot, same text weight —
   dimmer text fell under AA on the dark card); the additions read heavier.
   Featured-card only: the annual card's four lines have nothing to inherit. */
.pricing-card.featured .pricing-feature.summary .pricing-dot{background:rgba(255,255,255,.3)}
.pricing-card.featured .pricing-feature.is-new{color:#fff;font-weight:600}
.pricing-newlabel{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);margin:8px 0 -1px}
.pricing-cta{display:block;text-align:center;margin-top:28px;padding:12px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s}
.pricing-card:not(.featured) .pricing-cta{background:var(--dark);color:white}
.pricing-card:not(.featured) .pricing-cta:hover{background:var(--green)}
.pricing-card.featured .pricing-cta{background:white;color:var(--dark)}
.pricing-card.featured .pricing-cta:hover{background:var(--light)}
/* Billing toggle — segmented pill, same language as the nav .lang-pill */
.billing-switch{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:44px}
.billing-toggle{display:inline-flex;background:var(--g50);border:1px solid var(--g100);border-radius:999px;padding:4px}
.billing-toggle button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--g600);padding:11px 22px;border-radius:999px;cursor:pointer;transition:all .18s;white-space:nowrap}
.billing-toggle button:hover{color:var(--g900)}
.billing-toggle button[aria-checked="true"]{background:var(--dark);color:#fff;box-shadow:0 2px 8px rgba(10,92,69,.18)}
.billing-toggle button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.billing-hint{font-size:12.5px;color:var(--g400);max-width:420px;text-align:center;line-height:1.5}
/* Currency toggle — lighter, secondary pill sharing the .billing-toggle look */
.currency-toggle button{font-size:12.5px;padding:7px 15px;letter-spacing:.02em}
/* The same travelling selection as the delegate pill directly above it: two
   pills stacked one under the other read as broken when only one of them
   slides. Overrides .billing-toggle's checked state, which it ties on
   specificity and beats on source order. */
.currency-toggle{position:relative}
.currency-toggle button{position:relative;z-index:1}
.currency-toggle button[aria-checked="true"]{background:none;box-shadow:none;color:#fff}
.currency-thumb{position:absolute;top:0;left:0;width:0;height:0;border-radius:999px;
  background:var(--dark);box-shadow:0 2px 8px rgba(10,92,69,.18);pointer-events:none;
  transition:transform .42s var(--spring),width .42s var(--spring),height .42s var(--spring)}
.currency-thumb.instant{transition:none}

/* Size selector — the primary control now. Delegate count is the value metric,
   so it leads; currency demotes to the secondary pill below it. Five options,
   so it wraps rather than squeezing on narrow viewports. */
.size-label{font-size:13px;font-weight:600;color:var(--g600);letter-spacing:.01em}
.size-toggle{position:relative;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;background:var(--g50);border:1px solid var(--g100);border-radius:14px;padding:6px}
.size-toggle button{border:1px solid transparent;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--g600);padding:10px 18px;border-radius:10px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.size-toggle button:hover{color:var(--g900);border-color:var(--g200)}
/* The dark fill lives on .size-thumb now, so the checked button only owns its
   text colour — otherwise two dark rectangles would cross during the slide. */
.size-toggle button[aria-checked="true"],
.size-toggle button[aria-checked="true"]:hover{background:none;border-color:transparent;box-shadow:none;color:#fff}
/* The travelling selection. Positioned from JS against the checked button, so
   it follows the pill's own wrapping and whatever width the label needs in
   English or French. */
.size-thumb{position:absolute;top:0;left:0;width:0;height:0;border-radius:10px;background:var(--dark);box-shadow:0 2px 8px rgba(10,92,69,.18);pointer-events:none;
  transition:transform .42s var(--spring),width .42s var(--spring),height .42s var(--spring)}
/* First paint, a resize and a language switch all reposition the thumb without
   animating — there is no selection change to show, only new geometry. */
.size-thumb.instant{transition:none}
.size-toggle button{position:relative;z-index:1}
.size-toggle button:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Spring used by the pricing controls — the same Motion-generated curve as the
   login panel (bounce 0.15, 0.4s visible travel). */
.pricing{--spring:linear(0, 0.0663, 0.2105, 0.3763, 0.5332, 0.6669, 0.7733, 0.8533, 0.9107, 0.9499, 0.9754, 0.9911, 1, 1.0044, 1.0061, 1.0062, 1.0055, 1.0045, 1.0035, 1.0026, 1.0018, 1.0012, 1.0008, 1, 1)}

/* Animated price digits, ported by hand from the 21st.dev "Growth Plans"
   pattern (@number-flow). Each digit is a window onto a 0-9 reel; changing band
   reels the digit to its new value instead of swapping the whole figure, so the
   buyer sees the price move rather than having to re-read it.
   .nf is aria-hidden — the reel holds thirty stray digits — and .nf-sr carries
   the real figure for screen readers inside the existing aria-live region. */
/* The reel holds thirty stray digits and the strut another, so the visible
   half is unselectable and .nf-sr is what a copied price actually yields. */
.nf{display:inline-flex;align-items:flex-start;-webkit-user-select:none;user-select:none}
.nf-c{white-space:pre}
.nf-d{position:relative;display:inline-block;overflow:hidden;transition:width .5s var(--spring)}
/* In flow and invisible: it is what gives the window its single-line height, so
   nothing here depends on a measured pixel value. */
.nf-g{visibility:hidden}
/* Thirty cells, three laps of 0-9, so a digit can roll past 9 or below 0 in
   whichever direction the price moved. -100%/30 is exactly one cell. */
.nf-r{position:absolute;top:0;left:0;right:0;text-align:center;will-change:transform;
  transform:translateY(calc(var(--i,10) * -3.3333333%));transition:transform .5s var(--spring)}
.nf-r span{display:block}
.nf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;-webkit-user-select:text;user-select:text}

@media(prefers-reduced-motion:reduce){
  .size-thumb,.currency-thumb,.nf-d,.nf-r{transition:none}
  .pc-enter .pc-anim{animation:none}
}

/* Two cards, not three: one event vs an annual plan, for the size chosen. */
/* Three package cards that re-price together. Cards stretch to one height
   so the three buttons sit on one line however long the lists run. */
.pricing-grid{align-items:stretch;text-align:left}
.pricing-grid .pricing-card{display:flex;flex-direction:column}
.pricing-grid .covers{align-self:stretch}
.pricing-grid .pricing-features{margin-bottom:32px}
.pricing-grid .pricing-cta{margin-top:auto}
/* What changed glides in; the reeling price and the lists stay put, so an
   answer change reads as the same three cards updating. */
.pc-enter .pc-anim{animation:pc-in .5s var(--spring) both}
@keyframes pc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* The plan pill shares the currency pill's travelling thumb. */
.plan-toggle{position:relative}
.plan-toggle button{position:relative;z-index:1;font-size:13.5px;padding:9px 20px}
.plan-toggle button[aria-checked="true"]{background:none;box-shadow:none;color:#fff}
/* The aside closes the section, so it needs air above it rather than sitting
   tight under the cards. */
.pricing-aside{margin-top:28px}
.pricing-badge.subtle{background:var(--g100);color:var(--g600)}
.pricing-cta.ghost{background:transparent;border:1px solid var(--g200);color:var(--g900)}
.pricing-cta.ghost:hover{border-color:var(--green);color:var(--green)}

/* Agency is a buyer type rather than an event size, so it sits outside the
   selector — a quiet line, not a fourth card competing for attention. */
.pricing-aside{margin-top:20px;padding:18px 24px;background:var(--g50);border-radius:12px;font-size:13.5px;color:var(--g600);line-height:1.7;text-align:left;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.pricing-aside strong{color:var(--g900)}
.pricing-aside a{color:var(--green);font-weight:600;text-decoration:none;white-space:nowrap;margin-left:auto}
.pricing-aside a:hover{text-decoration:underline}


/* The competitor anchor. Deliberately understated — it is evidence, and it
   reads as weaker the harder it shouts. */
.pricing-anchor{margin-top:20px;font-size:12.5px;color:var(--g400);line-height:1.65;text-align:left;max-width:760px}
.pricing-anchor strong{color:var(--g600)}

@media(max-width:860px){
  .pricing-grid{grid-template-columns:1fr}
  .pricing-aside a{margin-left:0}
}

/* HOW IT WORKS */
.how{padding:112px 40px;background:var(--g50)}
.how-inner{max-width:1000px;margin:0 auto;text-align:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:72px}
.step{position:relative;text-align:left;background:white;border-radius:16px;padding:32px;border:1px solid var(--g100)}
.step-num{width:36px;height:36px;border-radius:10px;background:var(--dark);color:white;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-family:'DM Serif Display',serif}
.step-title{font-size:16px;font-weight:600;color:var(--g900);margin:0 0 10px;letter-spacing:-.01em}
/* A card title that is also a link (the visa card points at its guide). */
.feature-link{color:inherit;text-decoration:none}
.feature-link:hover{text-decoration:underline;text-underline-offset:3px}
.step-desc{font-size:14px;color:var(--g600);line-height:1.7}
.step-connector{display:none}
/* Record beam: how a delegate gets in, the one record, and what it drives in the order a delegate meets it. */
.beam{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:0 88px;max-width:1000px;margin:64px auto 0;text-align:left}
.beam-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:32px;list-style:none;margin:0;padding:0}
.beam-node{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--g100);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:500;color:var(--g900);box-shadow:0 1px 2px rgba(20,35,30,.04)}
.beam svg.i{width:18px;height:18px;flex:none;fill:none;stroke:var(--green);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.beam-hub{position:relative;z-index:1;width:148px;height:148px;border-radius:30px;background:#fff;border:1px solid var(--g100);box-shadow:0 14px 36px rgba(10,92,69,.13);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.beam-hub svg{width:58px;height:auto;overflow:visible}
.beam-name{font-size:19px;font-weight:700;letter-spacing:-.03em;color:#14231E}
.beam-name b{font-weight:700;color:#167959}
/* Equal row slots, each card at its own height and centred in its slot: the middle card centres on the hub, so its line runs straight, the outer two mirror, and a card with fewer chips stays compact. */
.beam-phases{position:relative;z-index:1;display:grid;grid-auto-rows:1fr;gap:20px}
.beam-phase{align-self:center;display:flex;flex-direction:column;justify-content:flex-start;background:#fff;border:1px solid var(--g100);border-radius:16px;padding:17px 18px;box-shadow:0 1px 2px rgba(20,35,30,.04)}
.beam-phase h3{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g600)}
.beam-phase h3 b{font-family:'DM Serif Display',serif;font-size:18px;font-weight:400;letter-spacing:0;color:var(--green)}
.beam-phase ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.beam-phase li{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;background:var(--g50);font-size:13px;font-weight:500;color:var(--g900)}
.beam-phase li svg.i{width:15px;height:15px}
.beam-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
@media(max-width:900px){
.beam{grid-template-columns:1fr;gap:40px;justify-items:center}
/* Phones: the three ways in as three equal columns, icon over label, so each keeps its own line. */
.beam-in{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.beam-in .beam-node{flex-direction:column;justify-content:center;text-align:center;line-height:1.3}
.beam-node{padding:10px 8px;font-size:13px;gap:6px}
.beam-node svg.i{width:16px;height:16px}
.beam-hub{width:128px;height:128px}
.beam-phases{width:100%;gap:28px;grid-auto-rows:auto}
/* Phones: one feature per line, title and list centred, so each card reads as one column under the hub. */
.beam-phase h3{justify-content:center}
.beam-phase ul{flex-direction:column;align-items:center}
}

/* CTA */
.cta{padding:100px 40px;background:linear-gradient(135deg,#072e21 0%,#0A5C45 60%,#1a6b52 100%)}
.cta-inner{max-width:560px;margin:0 auto;text-align:center}
.cta-title{font-family:'DM Serif Display',serif;font-size:clamp(32px,4vw,50px);color:white;line-height:1.08;margin-bottom:16px;letter-spacing:-.02em}
.cta-sub{font-size:16px;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:40px}
.cta-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.cta-field{width:100%;font-family:'DM Sans',sans-serif;font-size:15px;padding:14px 16px;border:1.5px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.1);color:white;outline:none;transition:border-color .15s}
.cta-field::placeholder{color:rgba(255,255,255,.4)}
.cta-field:focus{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.14)}
/* Plan question on the demo form. The select inherits .cta-field, so only the
   things a native select needs differently are set here: its own arrow (the
   default one is invisible on this dark ground) and a readable option list,
   which renders in the OS palette, not the page's. */
.cta-plan-label{font-size:13px;color:rgba(255,255,255,.6);margin:4px 0 -4px}
.cta-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,.55)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.cta-select option{background:#0A5C45;color:#fff}
/* Package choice on the demo form: one tap, not a dropdown. The radio stays in
   the DOM for keyboard and screen-reader users; its label is drawn as the pill,
   on the same borders and fills as .cta-field so the row reads as one form. */
.cta-pills{display:flex;flex-wrap:wrap;gap:8px}
.cta-pill{position:relative;flex:1 1 auto;min-width:0}
.cta-pill input{position:absolute;opacity:0;width:0;height:0}
.cta-pill span{display:block;text-align:center;font-size:14px;font-weight:600;color:rgba(255,255,255,.78);padding:12px 14px;border:1.5px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.08);cursor:pointer;transition:all .15s;white-space:nowrap}
.cta-pill:hover span{border-color:rgba(255,255,255,.42)}
.cta-pill input:checked+span{background:#fff;color:var(--dark);border-color:#fff}
.cta-pill input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.cta-submit{width:100%;padding:15px;background:white;color:var(--dark);border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.cta-submit:hover{background:var(--light);transform:translateY(-1px)}
.cta-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.cta-success{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:28px;text-align:center;display:none}
.cta-success-icon{font-size:36px;margin-bottom:12px}
.cta-success-title{font-family:'DM Serif Display',serif;font-size:22px;color:white;margin-bottom:8px}
.cta-success-sub{font-size:14px;color:rgba(255,255,255,.65);line-height:1.6}
.cta-privacy{font-size:12px;color:rgba(255,255,255,.4);text-align:center;margin-top:4px}

/* FAQ */
.faq{padding:100px 40px;background:var(--cream)}
.faq-inner{max-width:760px;margin:0 auto}
.faq-head{text-align:center;margin-bottom:48px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:white;border:1px solid var(--g100);border-radius:14px;overflow:hidden;transition:border-color .18s}
.faq-item[open]{border-color:rgba(29,158,117,.4)}
.faq-q{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16px;font-weight:600;color:var(--g900)}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';font-size:22px;font-weight:400;color:var(--green);flex-shrink:0;transition:transform .18s}
.faq-item[open] .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 24px 22px;font-size:15px;color:var(--g600);line-height:1.7}

/* FOOTER */
footer{background:var(--g900);padding:48px 40px;color:rgba(255,255,255,.55)}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:32px 48px}
.footer-logo{display:flex;align-items:center}
.footer-logo svg{height:26px;width:auto;display:block}
.footer-mail{color:inherit;text-decoration:none}.footer-mail:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-social{display:inline-flex;align-items:center;margin-top:12px;color:rgba(255,255,255,.55);transition:color .15s}
.footer-social:hover{color:#fff}
.footer-nav{display:flex;gap:48px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-bottom:2px;text-decoration:none}
a.footer-col-title:hover{color:#fff}
.footer-col a:not(.footer-col-title){font-size:13px;color:rgba(255,255,255,.55);text-decoration:none}
.footer-col a:not(.footer-col-title):hover{color:#fff}

@media(max-width:900px){
  .hero-inner,.portal-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .features-grid,.pwa-grid,.pricing-grid,.steps{grid-template-columns:1fr}
  .feature-card.highlight{grid-column:auto}
  .step-connector{display:none}
  nav{padding:0 16px}
  /* Hide the section links on mobile, but not the EN/FR pill: it is the only
     route to the French page, and a descendant selector would swallow it. */
  .nav-links > a:not(.nav-cta){display:none}
  .nav-links{gap:12px}
  .nav-cta{padding:7px 12px;font-size:13px}
  .lang-pill button,.lang-pill a{padding:8px 9px}
  .stat{padding:16px 8px}
  .stat-num{font-size:19px}
  .stat-label{font-size:10px}
  .hero,.features,.portal-section,.pwa-section,.pricing,.how,.cta,.faq{padding:80px 20px}
  footer{padding:40px 20px}
}

/* Under ~380px the logo, both language chips and the CTA no longer fit between
   nav's 16px gutters — the French CTA ("Réserver une démo") is some 40px wider
   than the English one and decides it. So the pill shows only the language you
   are NOT reading, which is the link anyway, and the chip left carries the dark
   text because it is now an action rather than a state. */
@media(max-width:380px){
  .nav-links{gap:8px}
  .nav-logo svg{height:26px}
  .lang-pill a.active{display:none}
  .lang-pill a{color:var(--g900)}
  .lang-pill button,.lang-pill a{padding:8px 9px}
  .nav-cta{padding:7px 10px;font-size:12px}
}

/* ── Hero dashboard preview (Sept 2026) ────────────────────────────────────
   The hero shows the REAL operator dashboard: content screenshots sitting
   under the app's own sidebar, lifted from dashboard.css so its collapse,
   hover and active states behave exactly as they do in the product. The
   stage is a fixed 1440-wide canvas scaled to the frame (hero-dash.js), so
   the live sidebar and the raster share one coordinate system — otherwise
   the sidebar's text renders at a different size to the screenshot's.
   Content is lightly frosted: shape readable, data not. Below 901px
   .hero-visual is display:none, so none of this reaches phones. */
@media(min-width:901px){
  .hero-inner{max-width:1240px;grid-template-columns:minmax(320px,.85fr) 1.15fr;gap:40px}
}
.od-col{min-width:0}
.od-hint{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.62);margin:0 0 12px 2px;transition:opacity .35s}
.od-pulse{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;animation:odpulse 2.4s ease-out infinite}
@keyframes odpulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.5)}70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.od-col.is-live .od-hint{opacity:0}

.od-frame{width:min(880px,78vw);border-radius:14px 0 0 14px;overflow:hidden;background:#fff;
  box-shadow:0 44px 90px -20px rgba(0,0,0,.55),0 10px 30px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);border-right:0;
  /* dashboard token scope: the lifted sidebar renders in the app's palette */
  --white:#fff;--surface:#fff;--surface-hover:#F4F3F0;--input-bg:#fff;
  --g50:#F9FAFB;--g100:#E5E7EB;--g200:#D1D5DB;--g400:#6B7280;--g600:#4B5563;--g900:#111827;
  --green:#167959;--dark:#0A5C45;--light:#E8F8F2;--brand-fill-a:#0A5C45;--brand-fill-b:#167959;--on-brand:#fff;
  --sidebar:64px;--sidebar-open:236px;--r:12px;--rs:8px;--popover-shadow:0 8px 24px rgba(0,0,0,.14);--od-blur:5px}
.od-viewport{position:relative;width:100%;overflow:hidden;background:#fff}
.od-stage{position:absolute;top:0;left:0;width:1440px;height:680px;transform-origin:top left;user-select:none}
.od-c{position:absolute;top:0;left:0;width:1440px;height:900px;object-fit:cover;object-position:top left;
  opacity:0;transition:opacity .16s ease;filter:blur(var(--od-blur)) saturate(1.03);transform:scale(1.05)}
.od-c.is-on{opacity:1}
.od-toast{position:absolute;left:290px;bottom:34px;z-index:30;display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.16);
  font-size:13px;color:#111827;line-height:1.3;opacity:0;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.od-toast.is-in{opacity:1;transform:none}
.od-toast .tdot{width:8px;height:8px;border-radius:50%;background:#167959;flex:none;box-shadow:0 0 0 3px rgba(22,121,89,.15)}
.od-toast b{font-weight:600}
.od-toast .tmeta{color:#6B7280;font-size:11.5px}

/* the app's own sidebar, scoped to the frame */
.od-frame .sidebar{position:absolute;top:0;left:0;height:100%;width:var(--sidebar);background:var(--white);border-right:1px solid var(--g100);display:flex;flex-direction:column;z-index:100;overflow:hidden;transition:width .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
.od-frame .sidebar:hover,.od-frame .sidebar.is-open{width:var(--sidebar-open);box-shadow:var(--popover-shadow)}
.od-frame .sidebar>*{flex:none}
.od-frame .sb-logo{padding:18px 16px 14px;gap:12px;border-bottom:1px solid var(--g100);display:flex;align-items:center}
.od-frame .sb-logomark{width:32px;height:32px;background:linear-gradient(135deg,var(--brand-fill-a),var(--brand-fill-b));border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.od-frame .sb-logomark svg{width:16px;height:16px;fill:none;color:var(--on-brand);opacity:.9}
.od-frame .sb-logo-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.od-frame .sb-logo-name{font-size:16px;font-weight:700;color:var(--g900);letter-spacing:-.4px;white-space:nowrap}
.od-frame .sb-logo-name span{color:var(--green)}
.od-frame .sb-search{display:flex;align-items:center;margin:10px 12px 6px;padding:0 0 0 11px;height:36px;box-sizing:border-box;width:40px;overflow:hidden;border:1px solid var(--g100);border-radius:var(--rs);background:var(--input-bg);color:var(--g400);font-size:12.5px;gap:9px;text-align:left;transition:width .28s cubic-bezier(.2,.8,.2,1)}
.od-frame .sidebar:hover .sb-search,.od-frame .sidebar.is-open .sb-search{width:calc(var(--sidebar-open) - 24px)}
.od-frame .sb-search>svg{width:16px;height:16px;flex:none}
.od-frame .sb-search kbd{margin-left:auto;font-family:inherit;font-size:10px;padding:2px 5px;border:1px solid var(--g200);border-radius:4px;color:var(--g600)}
.od-frame .sb-event{margin:10px 12px 4px;padding:0 0 0 11px;min-height:40px;display:flex;align-items:center;gap:10px;overflow:hidden;background:var(--g50);border:1px solid var(--g100);border-radius:var(--rs);cursor:pointer;position:relative}
.od-frame .sb-event-ico{width:18px;height:18px;flex:none;color:var(--green)}
.od-frame .sb-event-text{min-width:0}
.od-frame .sb-event-label{font-size:10px;color:var(--g400);font-weight:500;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.od-frame .sb-event-name{font-size:12.5px;color:var(--g900);font-weight:500;line-height:1.3;white-space:nowrap}
.od-frame .sb-link{display:flex;align-items:center;gap:11px;padding:8px 12px 8px 21px;font-size:13px;color:var(--g600);border-left:2px solid transparent;border-radius:0 7px 7px 0;margin:1px 8px 1px 0;cursor:pointer;transition:color .15s,background .15s;user-select:none;overflow:hidden}
.od-frame .sb-link:hover{color:var(--g900);background:var(--g50)}
.od-frame .sb-link.active{color:var(--dark);background:var(--light);border-left-color:var(--green);font-weight:500}
.od-frame .sb-link>svg{width:18px;height:18px;flex:none;stroke-width:1.6;color:var(--g400);transition:color .15s}
.od-frame .sb-link:hover>svg{color:var(--g900)}
.od-frame .sb-link.active>svg{color:var(--green);stroke-width:2}
.od-frame .sb-parent-btn{width:calc(100% - 8px);background:none;border:none;border-left:2px solid transparent;font:inherit;text-align:left}
.od-frame .sb-caret{margin-left:auto;flex:none;color:var(--g400);opacity:0;transform:rotate(-90deg);transition:transform .2s ease,opacity .16s ease}
.od-frame .sb-parent.is-open .sb-caret{transform:rotate(0deg)}
.od-frame .sb-children{max-height:0;overflow:hidden;transition:max-height .26s cubic-bezier(.2,.8,.2,1)}
.od-frame .sb-parent.is-open .sb-children{max-height:240px}
.od-frame .sidebar:not(:hover):not(.is-open) .sb-children{max-height:0}
.od-frame .sb-link.sb-child{padding:6px 12px 6px 50px;font-size:12.5px;margin-right:8px}
.od-frame .sb-child.active{border-left-color:transparent}
.od-frame .sb-child.active .sb-link-label{color:var(--dark)}
.od-frame .sb-nav-badge{margin-left:auto;background:var(--g100);color:var(--g900);font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;line-height:16px}
.od-frame .sb-footer{margin-top:auto;padding:12px 14px 14px;border-top:1px solid var(--g100)}
/* The Sept 2026 nav ran one row taller once Set up and Invite were both open,
   which pushed the user row half out of the frame — a sliced avatar in the
   hero. The preview is a menu, not an account surface, so the footer goes
   rather than the panel growing. Flattening the third group to a single
   Analytics row has since bought a row back; whether that is enough to bring
   the footer back is unmeasured, so this stays. */
.od-frame .sb-footer{display:none}
.od-frame .sb-user-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--rs);cursor:pointer;transition:background .15s}
.od-frame .sb-user-row:hover{background:var(--g50)}
.od-frame .sb-user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--brand-fill-a),var(--brand-fill-b));display:flex;align-items:center;justify-content:center;color:var(--on-brand);font-size:10px;font-weight:700;flex-shrink:0;letter-spacing:.03em}
.od-frame .sb-user-info{flex:1;min-width:0;display:flex;flex-direction:column}
.od-frame .sb-user-name-text{font-size:12px;font-weight:500;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-frame .sb-user-role-text{font-size:10px;color:var(--g400);margin-top:1px}
.od-frame .sb-user-chevron{flex-shrink:0;opacity:.4}
.od-frame .sb-user-chevron svg{width:13px;height:13px;stroke:var(--g600);stroke-width:1.75}
.od-frame .sidebar .sb-link-label,.od-frame .sidebar .sb-logo-text,.od-frame .sidebar .sb-event-label,.od-frame .sidebar .sb-event-name,.od-frame .sidebar .sb-user-info,.od-frame .sidebar .sb-user-chevron,.od-frame .sidebar .sb-nav-badge,.od-frame .sidebar .sb-search kbd{opacity:0;transform:translateX(-4px);white-space:nowrap;transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.od-frame .sidebar:hover .sb-link-label,.od-frame .sidebar.is-open .sb-link-label,.od-frame .sidebar:hover .sb-logo-text,.od-frame .sidebar.is-open .sb-logo-text,.od-frame .sidebar:hover .sb-event-label,.od-frame .sidebar.is-open .sb-event-label,.od-frame .sidebar:hover .sb-event-name,.od-frame .sidebar.is-open .sb-event-name,.od-frame .sidebar:hover .sb-user-info,.od-frame .sidebar.is-open .sb-user-info,.od-frame .sidebar:hover .sb-user-chevron,.od-frame .sidebar.is-open .sb-user-chevron,.od-frame .sidebar:hover .sb-nav-badge,.od-frame .sidebar.is-open .sb-nav-badge,.od-frame .sidebar:hover .sb-search kbd,.od-frame .sidebar.is-open .sb-search kbd{opacity:1;transform:none;transition-delay:.06s}
.od-frame .sidebar:hover .sb-caret,.od-frame .sidebar.is-open .sb-caret{opacity:1;transition-delay:.06s}
.od-frame .sidebar:hover .sb-event-name,.od-frame .sidebar.is-open .sb-event-name{white-space:normal;overflow-wrap:anywhere}

/* touch (tablet, >900px): no hover, so chips drive the screens */
.od-tabs{display:none;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.od-tabs::-webkit-scrollbar{display:none}
.od-tab{flex:0 0 auto;font-family:inherit;font-size:13px;font-weight:600;color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .15s}
.od-tab.is-cur{background:var(--mint);color:#08301f;border-color:var(--mint)}
@media(hover:none){.od-tabs{display:flex}}
@media(prefers-reduced-motion:reduce){.od-c{transition:none}.od-pulse{animation:none}}

/* the portal section's phone sits smaller than the old hero phone */
.portal-visual .phone-frame{max-width:230px;border-radius:24px;padding:0;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  /* a thin contour hugging the screenshot, rather than the base .phone-frame's
     padded --dark bezel, which reads as a heavy slab on this section. Note the
     portal's own header is nearly this section's green, so the outline has to
     be light enough to survive it — a dark one dissolves along the top edge. */
  background:transparent;border:2px solid #9CA3AF}