/* flipboards — landing: hero, stepper, background board, my-boards */
  /* ════ LANDING ═══════════════════════════════════════════════════════════ */
  body[data-mode="landing"]{ display:block; padding:0; min-height:100vh; background:#07080a; }
  body[data-mode="landing"] .foot{ display:none; }

  /* live split-flap board running behind everything, then dimmed by glass. It's the
     shared <FlapBoard> renderer in fill mode, so it brings its own .well/.board-stack;
     make the well full-bleed + transparent so the flaps fill the viewport cleanly. */
  #bgBoard{ position:fixed; inset:0; z-index:0; overflow:hidden; display:flex;
    align-items:center; justify-content:center;
    background:radial-gradient(1300px 760px at 50% 34%, #15171d, #07080a 72%); pointer-events:none; }
  #bgBoard .well{ width:100%; height:100%; background:transparent; box-shadow:none; padding:0;
    overflow:hidden; display:flex; align-items:center; justify-content:center; }
  .bg-glass{ position:fixed; inset:0; z-index:1; pointer-events:none; transition:opacity .35s ease;
    background:linear-gradient(180deg, rgba(7,8,10,.60) 0%, rgba(7,8,10,.70) 55%, rgba(7,8,10,.82) 100%);
    -webkit-backdrop-filter:blur(4px) saturate(1.06); backdrop-filter:blur(4px) saturate(1.06); }
  @media (prefers-reduced-motion: reduce){ .bg-glass{ backdrop-filter:blur(3px); } }

  /* "Show demo" steps the landing aside: fade the glass off and hide the page
     content so the live board reads clearly, full-bleed. Only the slim nav stays
     up top, so "Hide demo" can put it back behind the blur. */
  #landing.demo-on .bg-glass{ opacity:0; }
  #landing.demo-on .land-main{ display:none; }

  .land{ position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; }

  .land-nav{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:22px clamp(16px,4vw,52px); }
  .brand{ display:flex; align-items:center; font-family:var(--font-display);
    font-size:clamp(18px,2.4vw,23px); letter-spacing:.32em; color:var(--cream, var(--ink)); text-transform:uppercase; }
  .nav-right{ display:flex; align-items:center; gap:14px; }
  .land-nav .signed{ color:var(--engrave-dim); font-size:12px; letter-spacing:.08em; font-family:var(--font-body); }
  /* flat retro chips, styled like the departure panels: a matte fill + a gold
     hairline, no gradient/bevel */
  .snd-toggle, .demo-toggle{ height:34px; border-radius:6px; border:1px solid var(--hair-soft);
    background:rgba(19,21,27,.82); color:var(--engrave); line-height:1; box-shadow:none;
    font-family:'JetBrains Mono',monospace; transition:color .15s, border-color .15s; }
  .snd-toggle{ width:38px; font-size:15px; }
  .demo-toggle{ padding:0 13px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
  /* hovering the sound toggle while OFF glows off-white (not brass) so it doesn't
     read as "active"; brass is reserved for when the sound is actually on. */
  .snd-toggle:hover:not(.on), .demo-toggle:hover{ color:var(--ink); border-color:var(--hair); }
  .snd-toggle.on, .demo-toggle.on{ color:var(--brass); border-color:var(--brass-deep); }

  .land-main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:16px clamp(16px,4vw,52px) 72px; text-align:center; }
  .land-hero{ margin-bottom:6px; }
  .land-hero .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.5em;
    text-transform:uppercase; color:var(--brass-deep); margin:0 0 18px; padding-left:.5em; }
  /* Poiret One only ships at weight 400, so a same-colour text-stroke (not a faux-bold)
     is what gives the hero its "little heavier" weight; currentColor lets the amber span
     thicken in amber too. paint-order keeps the fill crisp on top of the stroke. */
  .land-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(42px,8vw,92px);
    letter-spacing:.08em; line-height:.98; margin:0; color:var(--cream, var(--ink));
    -webkit-text-stroke:.6px currentColor; paint-order:stroke fill;
    text-shadow:0 2px 0 #000, 0 0 44px rgba(240,181,74,.10); }
  .land-hero h1 .amber{ color:var(--brass); }
  .deco-rule{ display:flex; align-items:center; justify-content:center; gap:16px; margin:26px auto 22px; max-width:440px; }
  .deco-rule::before,.deco-rule::after{ content:""; height:1px; flex:1; }
  .deco-rule::before{ background:linear-gradient(90deg, transparent, var(--brass-deep)); }
  .deco-rule::after{ background:linear-gradient(90deg, var(--brass-deep), transparent); }
  .deco-rule i{ width:9px; height:9px; background:var(--brass); transform:rotate(45deg);
    box-shadow:0 0 10px rgba(240,181,74,.55); flex:none; }
  .land-hero p.tag{ font-family:var(--font-body); font-weight:400; font-size:clamp(15px,1.9vw,19px);
    color:#cfc6b4; margin:0 auto; max-width:600px; line-height:1.62; }

  /* --- the departure-card stepper ----------------------------------------- */
  .stepper{ width:100%; max-width:640px; margin-top:34px; position:relative;
    background:linear-gradient(180deg, rgba(19,21,27,.94), rgba(11,12,17,.94));
    border:1px solid var(--hair); border-radius:6px;
    box-shadow:0 50px 100px -34px #000, inset 0 1px 0 rgba(255,255,255,.04); }
  .stepper::before{ content:""; position:absolute; inset:7px; border:1px solid var(--hair-soft); border-radius:3px; pointer-events:none; }
  .step-crown{ display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 0 4px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--brass-deep); }
  .step-crown span{ width:6px; height:6px; background:var(--brass-deep); transform:rotate(45deg); }
  .step{ display:none; padding:16px clamp(24px,4.5vw,44px) 6px; text-align:left; }
  .step.on{ display:block; animation:stepIn .3s ease; }
  @keyframes stepIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
  .step-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.24em;
    text-transform:uppercase; color:var(--brass-deep); font-weight:700; margin:0 0 10px; }
  .step h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(24px,3.4vw,32px);
    margin:0 0 14px; color:var(--cream, var(--ink)); letter-spacing:.04em; }
  .step p{ font-family:var(--font-body); font-size:15.5px; line-height:1.72; color:#c8bfae; margin:0 0 12px; }
  .step ul{ margin:8px 0 4px; padding-left:20px; color:#c8bfae; font-family:var(--font-body); font-size:15px; line-height:1.75; }
  .step ul li{ margin-bottom:5px; }
  .step ul li::marker{ color:var(--brass-deep); }
  .step .kbd{ color:var(--brass); font-weight:600; }
  .step-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:18px clamp(24px,4.5vw,44px) 26px; margin-top:14px; border-top:1px solid var(--hair-soft); }
  .step-dots{ display:flex; gap:11px; }
  .step-dots i{ width:8px; height:8px; background:#2b303b; transform:rotate(45deg); transition:background .2s, box-shadow .2s; }
  .step-dots i.on{ background:var(--brass); box-shadow:0 0 9px rgba(240,181,74,.6); }
  .step-actions{ display:flex; gap:10px; }
  .btn-ghost{ font-family:'JetBrains Mono',monospace; padding:11px 18px; background:transparent;
    color:var(--cream, var(--ink)); border:1px solid #3a4150; border-radius:4px; letter-spacing:.12em; font-size:11.5px; text-transform:uppercase; }
  .btn-ghost:hover:not(:disabled){ border-color:var(--brass-deep); color:var(--brass); }

  .land-cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; }
  .btn-hero{ font-family:'JetBrains Mono',monospace; padding:15px 34px; font-size:13.5px; letter-spacing:.18em;
    color:#1a1205; background:linear-gradient(180deg,#f3bd57,var(--brass-deep)); border:1px solid var(--brass-deep);
    border-radius:4px; box-shadow:0 14px 34px -14px rgba(240,181,74,.5); text-transform:uppercase;
    display:inline-flex; flex-direction:column; align-items:center; gap:3px; line-height:1.15; }
  .btn-hero:hover:not(:disabled){ filter:brightness(1.06); }
  .btn-hero-main{ font-size:17px; letter-spacing:.16em; }
  .btn-hero-sub{ font-size:9.5px; letter-spacing:.14em; opacity:.72; font-weight:400; }
  .land-note{ margin-top:16px; color:var(--engrave-dim); font-size:13px; font-family:var(--font-body); letter-spacing:.01em; line-height:1.6; }
  .land-note a{ color:#b7ad99; }

  /* --- My Boards: a departures board of your own signs --------------------- */
  .myboards{ margin:44px auto 0; width:100%; max-width:640px; text-align:left; position:relative; z-index:2; }
  .myboards-head{ display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--hair);
    padding-bottom:10px; margin-bottom:6px; }
  .myboards-head h3{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.34em;
    text-transform:uppercase; color:var(--brass); margin:0; font-weight:700; }
  .myboards-head .cnt{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--engrave-dim); }
  .board-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:15px 6px; border-bottom:1px solid var(--hair-soft); color:inherit; text-decoration:none; }
  .board-row:hover{ background:rgba(240,181,74,.05); }
  .board-row .nm{ font-family:var(--font-display); font-size:19px; letter-spacing:.12em; color:var(--cream, var(--ink)); text-transform:uppercase; }
  .board-row .meta{ display:flex; align-items:center; gap:16px; }
  .board-row .sub{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--engrave-dim); text-transform:uppercase; }
  .board-row .go{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; color:var(--brass); }
  .board-row:hover .go{ text-shadow:0 0 10px rgba(240,181,74,.4); }

  @media (max-width:560px){
    .land-hero h1{ font-size:clamp(38px,13vw,60px); }
    .board-row .meta .sub{ display:none; }
  }