/* =========================================================================
       Tokens
       ========================================================================= */
    :root {
      /* Type */
      --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --font-ui:      'Inter',             system-ui, -apple-system, 'Segoe UI', sans-serif;
      --font-accent:  'Fraunces',          Georgia, 'Times New Roman', serif;

      /* Ink scale */
      --ink-1: #0F1014;     /* primary text */
      --ink-2: #2B2D34;     /* secondary text */
      --ink-3: #717582;     /* muted */
      --ink-4: #B6BAC3;     /* hairline icons / connectors */
      --paper:        #FFFFFF;
      --paper-warm:   #FBFBFC;
      --paper-section:#F7F8FA;
      --hairline:     #E7E9ED;

      /* Brand teal */
      --teal:        #00D4C1;
      --teal-deep:   #0A9E8F;
      --teal-secondary: #00BFD7;
      --teal-mist:   #E8F7F6;
      --teal-glow:   rgba(0, 212, 193, 0.18);
      --teal-glow-soft: rgba(0, 212, 193, 0.10);

      /* Elevation — unified shadow language */
      --shadow-card:      0 1px 0 rgba(15,15,20,0.04), 0 24px 60px -16px rgba(15,15,20,0.18), 0 8px 24px -8px rgba(15,15,20,0.08);
      --shadow-card-teal: 0 1px 0 rgba(15,15,20,0.04), 0 30px 80px -20px rgba(0,212,193,0.30),  0 12px 28px -8px rgba(0,212,193,0.18);
      --shadow-pop:       0 2px 8px rgba(15,15,20,0.06), 0 12px 32px -8px rgba(15,15,20,0.10);
      --shadow-pill:      0 1px 0 rgba(15,15,20,0.04), 0 6px 16px -4px rgba(15,15,20,0.10);

      /* Motion */
      --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* =========================================================================
       Reset & base
       ========================================================================= */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-ui);
      color: var(--ink-1);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 15px;
      line-height: 1.5;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

    /* =========================================================================
       Layout primitives
       ========================================================================= */
    .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 3vw, 32px); }

    /* Editorial section grid: small label column on left, content on right.
       Used by narrative sections so all § eyebrows align on the same
       x-coordinate down the page. */
    .editorial { display: grid; grid-template-columns: 200px 1fr; gap: 56px; }
    .editorial > .label { padding-top: 4px; }

    /* Section eyebrow — one consistent treatment everywhere */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .eyebrow::before {
      content: "";
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px var(--teal-glow-soft);
      flex-shrink: 0;
    }
    .eyebrow.naked::before { display: none; }
    .label .eyebrow::before { display: none; }

    /* Page section spacing — 88px desktop, smaller on mobile */
    section { position: relative; }

    /* =========================================================================
       1) NAV
       ========================================================================= */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--hairline);
    }
    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 14px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
    }
    .brand img { width: 32px; height: 32px; border-radius: 8px; }
    .brand strong { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
    .nav-actions { display: flex; align-items: center; gap: 16px; }
    .nav-link {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      padding: 9px 16px;
      background: var(--teal-mist);
      color: var(--teal-deep);
      border-radius: 999px;
      font-family: var(--font-ui);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -0.005em;
      transition: background 200ms var(--ease-out), transform 200ms var(--ease-spring);
    }
    .nav-link:hover { background: #D6F3EF; transform: translateY(-1px); }
    .cta-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px;
      background: var(--ink-1);
      color: var(--paper);
      border-radius: 999px;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 13.5px;
      letter-spacing: -0.005em;
      box-shadow: var(--shadow-pill);
      transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-out);
    }
    .cta-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(15,15,20,0.18); }
    .cta-pill .arr { opacity: 0.6; transition: transform 220ms var(--ease-out); }
    .cta-pill:hover .arr { transform: translate(2px, -2px); }

    /* Language switch — pill toggle with real cross-links */
    .lang-switch {
      display: inline-flex;
      align-items: center;
      background: var(--paper-section);
      border: 1px solid var(--hairline);
      border-radius: 999px;
      padding: 3px;
      gap: 2px;
    }
    .lang-switch a {
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 5px 11px;
      border-radius: 999px;
      color: var(--ink-3);
      transition: background 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
    }
    .lang-switch a:hover { color: var(--ink-1); }
    .lang-switch a.active {
      background: var(--paper);
      color: var(--ink-1);
      box-shadow: var(--shadow-pill);
    }

    /* =========================================================================
       2) HERO
       ========================================================================= */
    .hero {
      position: relative;
      padding: 0; /* full-bleed calendar runs edge to edge, flush to nav + next section */
      overflow: hidden; /* contain the glows */
    }
    /* Soft warmth — two radial glows. Subtle on purpose. */
    .hero-glow {
      position: absolute;
      pointer-events: none;
      filter: blur(40px);
    }
    .hero-glow.tr {
      top: -200px; right: -160px;
      width: 760px; height: 760px;
      background: radial-gradient(circle, rgba(0,212,193,0.16), rgba(0,212,193,0.04) 45%, transparent 70%);
    }
    .hero-glow.bl {
      bottom: -260px; left: -180px;
      width: 720px; height: 720px;
      background: radial-gradient(circle, rgba(0,191,215,0.10), rgba(0,191,215,0.03) 45%, transparent 70%);
    }


    /* ── Calendar ── */
    .cal-wrap { position: relative; }
    .calendar {
      position: relative;
      border-top: 1px solid var(--hairline);
      border-bottom: 1px solid var(--hairline);
      background: var(--paper);
    }
    /* ── PNG calendar background (replaces the HTML grid). The full week lives
       in the image, so every breakpoint is just a cover-crop — nothing
       reflows. Swap --hero-cal-img to test option A vs B. ── */
    .calendar--img {
      --hero-cal-img: url('/assets/hero-calendar-a.png');
      height: clamp(600px, 72vw, 860px);
      background: var(--paper); /* white base; the image sits on ::before so it can fade independently of the card */
      border: 0; /* full-bleed surface, not a framed card */
    }
    /* The calendar image lives on its own layer so it can be made slightly
       transparent and faded out at the bottom into the next (white) section,
       without dimming the hero card that sits above it. */
    .calendar--img::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background: var(--hero-cal-img) center top / cover no-repeat;
      opacity: 0.55;
      /* Bottom fade into the next (white) section + a gentle left/right feather.
         The side feather is always present but sits off-screen while the image
         overflows the viewport, so on wide screens it slides in smoothly as the
         calendar narrows — no pop. */
      -webkit-mask-image:
        linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
      -webkit-mask-composite: source-in;
              mask-image:
        linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
              mask-composite: intersect;
    }
    /* On very wide screens `cover` would scale the 2560px image up past its
       native size, making the events look oversized. Cap the zoom so cells stay
       a sensible size. The cap engages exactly where `cover` becomes
       width-bound (~1530px), where min(100%, …) still equals 100% — so the
       handoff is seamless (no size jump), then it smoothly tops out at 1850px. */
    @media (min-width: 1530px) {
      .calendar--img::before {
        background-size: min(100%, 1850px) auto;
      }
    }
    /* Center the hero card over the image, overriding the old grid geometry. */
    .calendar--img .overlay {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(460px, calc(100% - 32px));
      height: auto;
      z-index: 1; /* above the faded image layer */
    }
    /* The card is now a fixed-width box (not a calendar span), so its contents
       must stay fluid: scale the heading and let the kicker, badges and trust
       line wrap instead of overflowing the narrower card on phones. */
    .calendar--img .overlay .overlay-h1 { font-size: clamp(30px, 4.6vw, 44px); }
    .calendar--img .overlay .hero-kicker,
    .calendar--img .overlay .hero-rotator,
    .calendar--img .overlay .overlay-sub { white-space: normal; }
    /* Keep the two download badges on one row and the trust line on one line,
       even on the narrower phone card — shrink them to fit instead of wrapping. */
    .calendar--img .overlay .overlay-ctas { flex-wrap: nowrap; }
    .calendar--img .overlay .overlay-badge { min-width: 0; }
    .calendar--img .overlay .overlay-badge img { height: clamp(40px, 11.5vw, 52px); width: auto; }
    .calendar--img .overlay .overlay-trust {
      flex-wrap: nowrap;
      white-space: nowrap;
      font-size: clamp(10.5px, 3vw, 13px);
    }

    /* ── Centered overlay card — the hero. Teal gradient. Contains the H1,
       subline, two download badges, and the trust line. ── */
    .overlay {
      position: absolute;
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal-secondary) 100%);
      border-radius: 16px;
      box-shadow:
        0 12px 32px rgba(0, 212, 193, 0.32),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.25);
      z-index: 5;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .overlay-body {
      flex: 1;
      padding: 34px 28px 22px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 8px;
      color: var(--paper);
    }
    .overlay-h1 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 44px;
      line-height: 1.02;
      letter-spacing: -0.032em;
      margin: 0;
      min-height: calc(1.02em * 3);
      text-wrap: balance;
      color: var(--paper);
    }
    .hero-kicker {
      display: block;
      margin-bottom: 2px;
      font-family: var(--font-display);
      font-size: 1em;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.024em;
      color: #FFFFFF;
      white-space: nowrap;
    }
    .hero-rotator {
      display: block;
      margin-top: 6px;
      max-width: none;
      min-height: 1.02em;
      font-family: var(--font-accent);
      font-style: normal;
      font-weight: 700;
      font-size: 0.9em;
      line-height: 1.02;
      letter-spacing: -0.03em;
      color: #FFFFFF;
      white-space: nowrap;
    }
    .hero-rotator::after {
      content: "";
      display: inline-block;
      width: 0.06em;
      height: 0.92em;
      margin-left: 0.05em;
      vertical-align: -0.08em;
      background: currentColor;
      border-radius: 1px;
      animation: hero-caret 1s steps(1) infinite;
    }
    .hero-rotator.is-typing::after {
      animation: none;
      opacity: 1;
    }
    @keyframes hero-caret { 50% { opacity: 0; } }
    /* Organizer hero: only the final "everything/alt" word gets the italic
       display face (same as the "social/sosiale" accent word) — the rest of
       the rotating phrases stay upright. JS toggles .is-accent. */
    .hero-rotator.is-accent {
      font-style: italic;
      letter-spacing: -0.01em;
    }
    .overlay-sub {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 17px;
      line-height: 1.45;
      letter-spacing: -0.01em;
      color: rgba(255,255,255,0.84);
      text-wrap: balance;
      white-space: nowrap;
    }
    .overlay-action {
      display: flex;
      flex-direction: column;
      gap: 11px;
      margin-top: auto;
    }
    .overlay-cta-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0;
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.62);
    }
    .overlay-cta-label::before {
      content: "";
      width: 18px;
      height: 1.5px;
      border-radius: 2px;
      background: rgba(255,255,255,0.38);
    }
    .overlay-ctas {
      display: flex;
      gap: 10px;
      flex-wrap: nowrap;
      align-items: center;
      width: auto;
      min-width: 0;
    }
    .overlay-badge {
      display: inline-block;
      text-decoration: none;
      flex: 0 0 auto;
      transition: transform 220ms var(--ease-spring);
    }
    .overlay-badge:hover { transform: translateY(-1px); }
    .overlay-badge img {
      display: block;
      width: auto;
      height: 52px;
      object-fit: contain;
    }
    .overlay-trust {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 6px 10px;
      padding-top: 10px;
      border-top: 1px dashed rgba(255,255,255,0.25);
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.005em;
      color: rgba(255,255,255,0.85);
      white-space: nowrap;
    }
    .overlay-trust .star { color: rgba(255,255,255,0.95); }
    .overlay-trust .sep { opacity: 0.45; }

    /* =========================================================================
       3) "How it works" — 3-phone tableau
       ========================================================================= */
    .how {
      padding: 72px 0 96px;
      /* faint teal mist at bottom, leading into the CTA card */
      background:
        radial-gradient(ellipse 1100px 320px at 20% 110%, var(--teal-glow-soft), transparent 65%),
        var(--paper);
    }
    .how .editorial {
      grid-template-columns: 1fr;
      gap: 16px;
      text-align: center;
      justify-items: center;
    }
    .how-head {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(28px, 3vw, 42px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink-1);
      margin: 14px 0 14px;
      text-wrap: balance;
      scroll-margin-top: 96px;
    }
    .how-lede {
      max-width: 580px;
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--ink-3);
      margin: 0;
    }
    /* Phone — used by all rows in the showcase.
       Screenshots are pre-framed PNGs (1478×3021), so the wrapper is just a
       positioning context for highlight overlays. Shadow uses drop-shadow so
       it follows the device's rounded outline, not a square box. */
    .phone-frame {
      position: relative;
      width: 100%;
      max-width: 296px;
      aspect-ratio: 1478 / 3021;
      filter: drop-shadow(0 22px 28px rgba(15,15,20,0.18))
              drop-shadow(0 6px 10px rgba(15,15,20,0.08));
    }
    .phone-frame img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: contain;
    }

    /* =========================================================================
       4b) Showcase rows — "Everything in one calendar" body
       Three rows under the section header: (1) converge composition,
       (2) Groups, (3) Chat. Sits inside .how so it inherits the section bg.
       ========================================================================= */
    .showcase-stack {
      display: flex;
      flex-direction: column;
      gap: 96px;
      margin-top: 56px;
    }

    /* ─── Row 1: Converge ──────────────────────────────────────────────── */
    .converge-stage {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1.15fr 1fr;
      align-items: center;
      gap: 32px;
      max-width: 1080px;
      margin: 0 auto;
    }

    .conv-phone {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin: 0;            /* reset <figure> default */
      position: relative;
      z-index: 2;
    }
    .conv-phone figcaption {
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    /* Side phones — slightly smaller and offset down, like the old reel */
    .conv-left .phone-frame,
    .conv-right .phone-frame {
      max-width: 240px;
      filter: saturate(0.97);
    }
    .conv-left  { transform: translate(-12px, 28px) rotate(-3deg); }
    .conv-right { transform: translate( 12px, 28px) rotate( 3deg); }

    /* Center phone — primary, larger, teal glow */
    .conv-center .phone-frame {
      max-width: 296px;
      filter: drop-shadow(0 24px 40px rgba(0,212,193,0.32))
              drop-shadow(0 8px 16px rgba(0,212,193,0.18));
    }

    /* Zoom-and-crop callout — the nested image is the same screenshot,
       shifted inside a clipped window so only the event/card region shows.
       The wrapper is then scaled up in place, which gives the familiar
       screenshot magnifier effect without needing separate crop assets.
       Measured from the framed PNG (1478×3021):
         • Cabin pill (calendar): y=21–24%, x=61.2–94.2%
         • Cabin card (discover): y=50–79.5%, x=7.5–94.5% */
    .zoom {
      position: absolute;
      pointer-events: none;
      transform-origin: center;
      box-sizing: border-box;
      overflow: hidden;
      z-index: 4;
      background: var(--paper);
      box-shadow:
        0 0 0 1.5px rgba(0, 212, 193, 0.95),
        0 0 6px  3px  rgba(0, 212, 193, 0.55),
        0 0 18px 6px  rgba(0, 212, 193, 0.28),
        0 0 36px 12px rgba(0, 212, 193, 0.12),
        0 22px 38px -10px rgba(15, 15, 20, 0.20),
        0 6px 14px -4px  rgba(15, 15, 20, 0.12);
    }
    .zoom img {
      position: absolute;
      max-width: none;
      object-fit: fill;
    }
    /* Discover Cabin card */
    .zoom-disc {
      left: 7.5%;
      top: 50.5%;
      width: 85%;
      height: 29.5%;
      border-radius: 14px;
      transform: scale(1.28);
    }
    .zoom-disc img {
      width: 117.647%;
      height: 338.983%;
      left: -8.824%;
      top: -171.186%;
    }
    /* Calendar Cabin pill */
    .zoom-cal {
      left: 61.2%;
      top: 21%;
      width: 33%;
      height: 3%;
      border-radius: 8px;
      transform: scale(2);
    }
    .zoom-cal img {
      width: 303.03%;
      height: 3333.333%;
      left: -185.455%;
      top: -700%;
    }
    /* Groups row: selected group in list */
    .zoom-group-row {
      left: 10.5%;
      top: 30.1%;
      width: 81.5%;
      height: 5.6%;
      border-radius: 12px;
      transform: scale(1.42);
    }
    .zoom-group-row img {
      width: 122.699%;
      height: 1785.714%;
      left: -12.883%;
      top: -555.357%;
    }
    /* Group detail: individual event cards for the selected group */
    .zoom-group-event-a,
    .zoom-group-event-b {
      left: 8.2%;
      width: 83.6%;
      height: 8.3%;
      border-radius: 10px;
      transform: scale(1.18);
    }
    .zoom-group-event-a { top: 50.8%; }
    .zoom-group-event-b { top: 65.8%; }
    .zoom-group-event-a img,
    .zoom-group-event-b img {
      width: 119.617%;
      height: 1204.819%;
      left: -9.809%;
    }
    .zoom-group-event-a img {
      top: -638.554%;
    }
    .zoom-group-event-b img {
      top: -819.277%;
    }
    /* Chat overview: Cabin conversation row */
    .zoom-chat-row {
      left: 8.6%;
      top: 30.6%;
      width: 83.8%;
      height: 7.7%;
      border-radius: 12px;
      transform: scale(1.22);
    }
    .zoom-chat-row img {
      width: 119.332%;
      height: 1298.701%;
      left: -7.16%;
      top: -363.636%;
    }

    /* SVG convergence lines — absolutely positioned across the whole stage */
    .conv-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }
    .conv-line {
      fill: none;
      stroke: var(--teal);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-dasharray: 3 7;
      opacity: 0.7;
      animation: dashFlow 1.8s linear infinite;
    }
    @keyframes dashFlow {
      to { stroke-dashoffset: -20; }
    }

    /* Dashed arrow bridging Row 1 (discover the cabin trip) into Row 2 (its
       chat). Pulled into the stack gap with negative margins so it reads as a
       continuation of the converge arrows rather than a separate band.
       The whole path lives INSIDE the viewBox (no negative coords, no
       out-of-box drawing) so it renders identically in Safari — WebKit does
       not reliably honor `overflow: visible` on an <svg>, which previously
       made the line appear to start from the wrong phone. The box is sized
       and pulled up so its top edge meets the calendar phone's bottom; net
       flow consumption (288 − 150 − 116 = 22px) matches the old box.
       NOTE: this is a flex child of .showcase-stack. `margin: auto` on the
       cross axis would cancel stretch and collapse it to its (zero) content
       width — so we center with align-self + an explicit width instead. */
    .showcase-connector {
      position: relative;
      width: 100%;
      max-width: 1100px;
      align-self: center;
      height: 288px;
      margin: -150px 0 -116px;
      pointer-events: none;
    }
    /* Absolutely positioned to fill the box (same pattern as the working
       .conv-lines). inset:0 gives every browser an unambiguous box to map
       the viewBox onto. */
    .showcase-connector svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* ─── Rows 2 & 3: Classic showcase-row ─────────────────────────────── */
    .showcase-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 64px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .showcase-row.reverse .showcase-text  { order: 2; }
    .showcase-row.reverse .showcase-visual { order: 1; }

    .showcase-text { max-width: 460px; }
    .showcase-text .row-eyebrow {
      display: inline-block;
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--teal-deep);
      margin-bottom: 12px;
    }
    .showcase-text h3 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(24px, 2.4vw, 32px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--ink-1);
      margin: 0 0 14px;
      text-wrap: balance;
    }
    .showcase-text p {
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--ink-3);
      margin: 0;
    }

    .showcase-visual {
      display: flex;
      justify-content: center;
    }
    .showcase-phones-stacked {
      position: relative;
      width: 100%;
      max-width: 460px;
      aspect-ratio: 1.05 / 1;
    }
    .showcase-phones-stacked .phone-frame {
      position: absolute;
      max-width: 248px;
      width: 60%;
    }
    .showcase-phones-stacked .phone-back {
      top: 0;
      left: 0;
      transform: rotate(-4deg);
    }
    .showcase-phones-stacked .phone-front {
      bottom: 0;
      right: 0;
      transform: rotate(3deg);
      filter: drop-shadow(0 24px 40px rgba(0,212,193,0.28))
              drop-shadow(0 8px 16px rgba(0,212,193,0.16));
    }

    /* =========================================================================
       5) CTA card
       ========================================================================= */
    .cta {
      padding: 48px 0 96px;
    }
    .cta-card {
      position: relative;
      width: min(1280px, calc(100% - 64px));
      margin: 0 auto;
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal-secondary) 100%);
      color: var(--paper);
      border-radius: 20px;
      padding: 64px 56px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 28px;
      overflow: hidden;
      box-shadow: var(--shadow-card-teal);
    }
    .cta-card .glow-a {
      position: absolute;
      top: -120px; right: -120px;
      width: 420px; height: 420px;
      background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 65%);
      filter: blur(40px);
      pointer-events: none;
    }
    .cta-card .glow-b {
      position: absolute;
      bottom: -160px; left: 30%;
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
      filter: blur(40px);
      pointer-events: none;
    }
    .cta-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
      margin-bottom: 16px;
    }
    .cta-eyebrow::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.9);
    }
    .cta-h2 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(38px, 4.2vw, 54px);
      line-height: 1.0;
      letter-spacing: -0.035em;
      margin: 0;
      text-wrap: balance;
    }
    .cta-h2 .accent-word {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 700;
      letter-spacing: -0.01em;
      padding: 0 0.04em;
    }
    .cta-subline {
      margin: 14px 0 0;
      font-size: 16px;
      color: rgba(255,255,255,0.92);
      max-width: 540px;
    }
    .cta-text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cta-badges {
      position: relative;
      display: flex;
      flex-direction: row;
      gap: 14px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    .cta-badges a { display: block; transition: transform 220ms var(--ease-spring); }
    .cta-badges a:hover { transform: translateY(-2px); }
    .cta-badges img { height: 56px; display: block; }
    .cta-badges img.is-png { height: 56px; }
    .cta-trust {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px 10px;
      padding-top: 4px;
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: rgba(255,255,255,0.88);
    }
    .cta-trust .star { color: rgba(255,255,255,0.98); }
    .cta-trust .sep { opacity: 0.5; }

    /* =========================================================================
       6) FOOTER (with gradient lead-in band)
       ========================================================================= */
    .footer-band {
      height: 80px;
      background: linear-gradient(to bottom, var(--paper) 0%, #0E0F12 100%);
    }
    .footer {
      background: #0E0F12;
      color: rgba(255,255,255,0.7);
      padding: 56px 0 36px;
      font-family: var(--font-ui);
    }
    .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .footer-brand-col p {
      margin: 18px 0 0;
      max-width: 320px;
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(255,255,255,0.6);
    }
    .footer-col h4 {
      color: var(--paper);
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 13.5px;
      margin: 0 0 14px;
      letter-spacing: -0.005em;
    }
    .footer-col a {
      display: block;
      padding: 5px 0;
      font-size: 13px;
      color: rgba(255,255,255,0.58);
      transition: color 180ms var(--ease-out);
    }
    .footer-col a:hover { color: var(--paper); }
    .footer-brand-col .brand { display: inline-flex; padding: 0; }
    .footer-meta {
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-size: 12px;
      color: rgba(255,255,255,0.42);
    }

    /* =========================================================================
       Responsive
       ========================================================================= */

    /* Snap point — sections collapse to single column below 880px */
    @media (max-width: 880px) {
      .editorial {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .editorial > .label { padding-top: 0; }

      /* Showcase rows collapse to single column */
      .showcase-stack { gap: 64px; }
      .showcase-row {
        grid-template-columns: 1fr;
        gap: 44px;
      }
      .showcase-row.reverse .showcase-text  { order: 1; }
      .showcase-row.reverse .showcase-visual { order: 2; }
      .showcase-text { max-width: none; }
      .showcase-row .showcase-visual { margin-top: 36px; }

      /* Converge: stack vertically in the same story order */
      .converge-stage {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .conv-left,
      .conv-right { transform: none; }
      .conv-left .phone-frame,
      .conv-right .phone-frame { max-width: 280px; }
      .conv-left { order: 1; }
      .conv-center { order: 2; }
      .conv-right { order: 3; }
      .conv-lines { display: none; } /* lines don't make sense stacked */
      .showcase-connector { display: none; } /* arrow alignment breaks stacked */
    }

    /* Tablet/medium adjustments */
    @media (max-width: 1024px) {
      .nav-inner { padding: 12px 24px; }
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
      .footer-brand-col { grid-column: 1 / -1; }
      .cta-card { padding: 48px 32px; gap: 22px; }
    }

    /* Narrow browser mode: keep the desktop calendar concept and make only
       non-hero chrome denser. The hero card itself should not jump. */
    /* Mobile nav: keep the organizer pill + language toggle visible.
       The download pill is dropped here since the hero shows store badges
       immediately on phones. */
    @media (max-width: 600px) {
      .nav-actions { gap: 12px; }
      .nav-actions .cta-pill { display: none; }
      .nav-link { padding: 8px 13px; }
    }
    @media (max-width: 340px) {
      .brand strong { display: none; }
    }

    @media (max-width: 820px) {
      .container { padding: 0 12px; }

      .overlay {
        border-radius: 14px;
      }
      .overlay-body {
        padding: 34px 28px 22px;
        gap: 14px;
      }
      .overlay-h1 {
        font-size: 44px;
        min-height: calc(1.02em * 3);
      }
      .hero-rotator {
        margin-top: 3px;
      }
      .overlay-sub {
        font-size: 18px;
        max-width: none;
      }
      .overlay-ctas {
        gap: 8px;
        flex-wrap: nowrap;
        width: auto;
      }
      .overlay-badge img {
        width: auto;
        height: 52px;
      }
      .overlay-trust {
        flex-wrap: nowrap;
        font-size: 13px;
        gap: 4px 8px;
        padding-top: 7px;
        white-space: nowrap;
      }

      .how      { padding: 56px 0 64px; }
      .cta      { padding: 32px 0 64px; }
      .cta-card {
        width: min(1280px, calc(100% - 32px));
        padding: 32px 24px;
      }
      .cta-h2   { font-size: 36px; }

      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 28px; }
      .footer-brand-col { grid-column: 1 / -1; }
      .footer-meta { flex-direction: column; gap: 6px; }
    }

    @media (max-width: 520px) {
      .container { padding: 0 8px; }
      .overlay-body {
        padding: 30px 24px 20px;
        justify-content: space-between;
        gap: 12px;
      }
      .overlay-h1 {
        font-size: 44px;
      }
      .overlay-sub {
        font-size: 18px;
        max-width: none;
      }
      .overlay-ctas {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        min-width: 0;
      }
      .overlay-badge {
        flex: 0 0 auto;
      }
      .overlay-badge img {
        width: auto;
        height: 52px;
      }
      .overlay-action { margin-top: 0; }
      .overlay-trust {
        display: flex;
        flex-wrap: nowrap;
        font-size: 13px;
        line-height: 1.12;
        gap: 3px 7px;
        padding-top: 4px;
        white-space: nowrap;
      }

      .showcase-stack {
        gap: 84px;
        margin-top: 64px;
      }
      .showcase-row {
        gap: 56px;
      }
      .showcase-row .showcase-visual {
        margin-top: 64px;
      }
      .showcase-phones-stacked {
        max-width: min(340px, calc(100vw - 32px));
        aspect-ratio: 0.92 / 1;
        margin: 0 auto;
      }
      .showcase-phones-stacked .phone-frame {
        width: 55%;
        max-width: 210px;
      }
      .showcase-phones-stacked .phone-back {
        left: 4%;
      }
      .showcase-phones-stacked .phone-front {
        right: 4%;
      }
      .zoom-group-row,
      .zoom-chat-row {
        transform: scale(1.08);
      }
      .zoom-group-event-a,
      .zoom-group-event-b {
        transform: scale(1.04);
      }
      .zoom-org-cal {
        transform: scale(1.35);
      }
    }

    @media (max-width: 430px) {
      .overlay-body {
        justify-content: space-between;
        gap: 8px;
      }
      .overlay-h1 {
        font-size: 44px;
      }
      .overlay-sub {
        font-size: 18px;
      }
      .overlay-ctas {
        display: flex;
        width: auto;
        gap: 8px;
      }
      .overlay-badge img {
        height: 52px;
      }
      .overlay-action { margin-top: 0; }
      .overlay-trust {
        display: flex;
        flex-wrap: nowrap;
        font-size: 13px;
        line-height: 1.12;
        gap: 2px 5px;
        padding-top: 4px;
        white-space: nowrap;
      }
    }

    @media (max-width: 380px) {
      .nav-inner { padding: 10px 16px; }
      .container { padding: 0 6px; }
      .overlay-body {
        padding: 26px 20px 18px;
      }
      .overlay-h1 {
        font-size: 44px;
      }
      .overlay-sub {
        font-size: 18px;
      }
      .cta-h2 { font-size: 32px; }
    }

    /* wordmark font */
    .brand strong, .footer .brand strong, .nav-logo { font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }

    /* =========================================================================
       Raw app screenshots (unframed) — rounded "screen" cards for feature rows
       ========================================================================= */
    .app-shot {
      position: relative;
      width: 100%;
      max-width: 340px;
      aspect-ratio: 1310 / 2678;
    }
    .app-shot img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 18px 40px rgba(15,15,20,0.22)); }

    /* Organizer calendar: the published event pops out via the same zoom
       loupe used on the consumer page. Event block measured from calendar.png
       (1310×2678): x=20.61–92.98%, y=55.68–61.73%. */
    .zoom-org-cal {
      left: 20.61%;
      top: 55.68%;
      width: 72.37%;
      height: 6.05%;
      border-radius: 10px;
      transform: scale(1.62);
    }
    .zoom-org-cal img {
      width: 138.18%;
      height: 1652.89%;
      left: -28.48%;
      top: -920.33%;
    }

    /* Two overlapping screenshots (e.g. the Audience row) */
    .app-shot-duo {
      position: relative;
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      aspect-ratio: 1.2 / 1;
    }
    .app-shot-duo .app-shot { position: absolute; width: 62%; max-width: 300px; }
    .app-shot-duo .a { top: 0; left: 0; transform: rotate(-4deg); }
    .app-shot-duo .b { bottom: 0; right: 0; transform: rotate(3deg); z-index: 2; }
    .app-shot-duo .b img { filter: drop-shadow(0 18px 40px rgba(0,191,215,0.30)); }
    @media (max-width: 520px) {
      .app-shot-duo { max-width: min(400px, calc(100vw - 24px)); aspect-ratio: 1 / 1; }
      .app-shot-duo .app-shot { width: 60%; }
    }