:root {
    --field:   #0B0E06;
    --field-2: #11160B;
    --raise:   #18200F;
    --line:    #2A3420;
    --line-2:  #3B4A2C;
    --bone:    #F0ECDD;
    --bone-2:  rgba(240,236,221,0.68);
    --bone-3:  rgba(240,236,221,0.42);
    --gold:    #C9A227;
    --gold-lt: #F3E1A4;
    --gold-dk: #8A6E15;
    --accent:  #C9A227;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

  body {
    margin: 0; background: var(--field); color: var(--bone);
    font-family: "Newsreader", Georgia, serif; font-size: 1.06rem; line-height: 1.68;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.4rem; }
  h1, h2, h3, h4 { margin: 0; }
  p { margin: 0; }
  a { color: inherit; }
  section { padding: 5.5rem 0; position: relative; }

  .display {
    font-family: "Big Shoulders Display", "Oswald", sans-serif;
    font-weight: 800; line-height: 0.92; text-transform: uppercase; text-wrap: balance;
  }
  .lede { color: var(--bone-2); font-size: 1.16rem; max-width: 56ch; }

  /* military document style section marker */
  .marker {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem;
    font-family: "Oswald", sans-serif; font-size: 0.68rem;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  }
  .marker b { font-family: "JetBrains Mono", monospace; font-weight: 500; letter-spacing: 0.06em; opacity: 0.75; }
  .marker i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); font-style: normal; }

  .btn {
    display: inline-block; text-decoration: none; cursor: pointer; border: 1px solid transparent;
    font-family: "Oswald", sans-serif; font-size: 0.76rem; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase; padding: 0.9rem 1.9rem; border-radius: 2px;
  }
  .btn.gold { background: linear-gradient(178deg, var(--gold-lt), var(--gold) 60%, var(--gold-dk)); color: #241C04; }
  .btn.ghost { border-color: rgba(240,236,221,0.28); color: var(--bone); }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* ============ top ============ */
  .top { border-bottom: 1px solid var(--line); background: rgba(11,14,6,0.94); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.4rem; }
  .brand { display: flex; align-items: center; gap: 0.65rem; }
  .brand svg { width: 32px; height: 16.8px; display: block; }
  .brand b { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .top .from { font-family: "Oswald", sans-serif; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-3); }

  /* ============ hero ============ */
  .hero {
    padding: 4.5rem 0;
    background:
      radial-gradient(70% 55% at 10% -10%, rgba(143,163,92,0.13), transparent 70%),
      radial-gradient(65% 50% at 95% 5%, rgba(201,162,39,0.11), transparent 70%),
      var(--field);
    border-bottom: 1px solid var(--line);
  }
  .hero .wrap { display: grid; grid-template-columns: 1fr 0.92fr; gap: 3.4rem; align-items: start; }
  @media (max-width: 940px) { .hero .wrap { grid-template-columns: 1fr; gap: 2.75rem; } }
  .hero h1 { font-size: clamp(2.9rem, 6.4vw, 4.9rem); margin: 0.6rem 0 0; }
  .hero h1 .thin { display: block; font-weight: 500; color: var(--bone-2); font-size: 0.5em; margin-top: 0.5rem; }
  .hero .cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
  .hero .fine { font-family: "Oswald", sans-serif; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-3); margin-top: 1.1rem; }

  /* branch selector */
  .branchbar { margin-top: 2.4rem; }
  .branchbar > span {
    display: block; font-family: "Oswald", sans-serif; font-size: 0.62rem;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-3); margin-bottom: 0.6rem;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .chip {
    cursor: pointer; background: transparent; color: var(--bone-3);
    border: 1px solid var(--line-2); border-radius: 2px; padding: 0.45rem 0.8rem;
    font-family: "Oswald", sans-serif; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .chip:hover { color: var(--bone); border-color: var(--bone-3); }
  .chip[aria-pressed="true"] { color: #241C04; background: linear-gradient(178deg, var(--gold-lt), var(--gold)); border-color: var(--gold); font-weight: 500; }

  /* live card */
  .demo { display: flex; flex-direction: column; gap: 0.85rem; }
  .faceswap { display: flex; gap: 0.35rem; }
  .faceswap button {
    flex: 1; cursor: pointer; background: transparent; color: var(--bone-3);
    border: 1px solid var(--line-2); border-radius: 2px; padding: 0.5rem;
    font-family: "Oswald", sans-serif; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .faceswap button[aria-pressed="true"] { color: var(--gold); border-color: rgba(201,162,39,0.55); background: rgba(201,162,39,0.09); }
  .cardshell { position: relative; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.62), 0 0 0 1px rgba(201,162,39,0.16); }
  .cardshell canvas { display: block; width: 100%; height: auto; touch-action: none; }
  .cardshell.grabbable canvas { cursor: grab; }
  .cardshell.dragging canvas { cursor: grabbing; }
  .cardshell .drop {
    position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none;
    background: rgba(8,10,5,0.72); font-family: "Oswald", sans-serif; font-size: 0.72rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); transition: opacity 0.15s;
  }
  .cardshell.over .drop { opacity: 1; }
  .pickbtn {
    display: block; text-align: center; cursor: pointer;
    border: 1px dashed rgba(201,162,39,0.45); border-radius: 2px; padding: 0.7rem;
    font-family: "Oswald", sans-serif; font-size: 0.67rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold); background: rgba(201,162,39,0.05);
  }
  .pickbtn:hover { background: rgba(201,162,39,0.12); }
  .pickbtn input { display: none; }
  .fld { display: flex; flex-direction: column; gap: 0.2rem; }
  .fld span { font-family: "Oswald", sans-serif; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-3); }
  .fld input {
    font-family: "Oswald", sans-serif; font-size: 0.85rem; background: var(--raise); color: var(--bone);
    border: 1px solid var(--line); border-radius: 2px; padding: 0.48rem 0.6rem; width: 100%;
  }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .privacy { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); text-align: center; }

  .minirow { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .minirow button {
    cursor: pointer; background: transparent; color: var(--bone-3);
    border: 1px solid var(--line-2); border-radius: 2px; padding: 0.38rem 0.62rem;
    font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase;
  }
  .minirow button[aria-pressed="true"] { color: var(--gold); border-color: rgba(201,162,39,0.55); background: rgba(201,162,39,0.1); }
  .minirow button.toggle[aria-pressed="true"] { color: #241C04; background: linear-gradient(178deg, var(--gold-lt), var(--gold)); border-color: var(--gold); }

  .yourset { border-bottom: 1px solid var(--line); background: var(--field-2); }
  .setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1rem; margin-top: 2.2rem; }
  .setgrid canvas { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 12px 28px rgba(0,0,0,0.5); }
  .setgrid .slot { display: flex; flex-direction: column; gap: 0.45rem; }
  .setgrid .slot span { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; color: var(--bone-3); text-align: center; }
  .emptyset { margin-top: 2rem; border: 1px dashed var(--line-2); border-radius: 3px; padding: 2.4rem 1.5rem; text-align: center; color: var(--bone-3); }
  .emptyset b { display: block; font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--bone-2); text-transform: uppercase; margin-bottom: 0.4rem; }

  .flightsec { border-bottom: 1px solid var(--line); }
  .flightsec .wrap { display: grid; grid-template-columns: 1fr 0.85fr; gap: 3rem; align-items: center; }
  @media (max-width: 940px) { .flightsec .wrap { grid-template-columns: 1fr; } }
  .roster { border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; background: var(--field-2); }
  .roster .rh { background: var(--raise); padding: 0.85rem 1.1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line); }
  .roster .rh b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.04em; }
  .roster .rh span { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
  .roster ul { margin: 0; padding: 0; list-style: none; }
  .roster li { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--line); font-family: "Oswald", sans-serif; font-size: 0.85rem; font-weight: 300; letter-spacing: 0.03em; }
  .roster li:last-child { border-bottom: 0; }
  .roster li.mine { background: rgba(201,162,39,0.1); color: var(--bone); }
  .roster li .tagme { margin-left: auto; font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
  .roster li.open { color: var(--bone-3); }
  .roster li.open .av { border-style: dashed; background: transparent; color: var(--bone-3); }
  .roster .foot { padding: 0.85rem 1.1rem; border-top: 1px solid var(--line); }
  .roster .foot button {
    width: 100%; cursor: pointer; border: 0; border-radius: 2px; padding: 0.65rem;
    background: linear-gradient(178deg, var(--gold-lt), var(--gold)); color: #241C04;
    font-family: "Oswald", sans-serif; font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase;
  }


  /* ============ the set ============ */
  .setsec { background: var(--field-2); border-bottom: 1px solid var(--line); }
  .cardwall {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.7rem; margin-top: 2.6rem;
  }
  .cardwall canvas {
    display: block; width: 100%; height: auto; border-radius: 2px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  }
  .counter {
    display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.4rem;
    padding-top: 1.6rem; border-top: 1px solid var(--line);
  }
  .counter b {
    font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 2.8rem;
    line-height: 0.9; color: var(--gold-lt); display: block;
  }
  .counter span { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-3); }

  /* ============ their page, full width ============ */
  .pagesec { border-bottom: 1px solid var(--line); }
  .browser {
    margin-top: 2.6rem; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden;
    background: #070904; box-shadow: 0 30px 70px rgba(0,0,0,0.6);
  }
  .chrome {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem;
    background: #12180C; border-bottom: 1px solid var(--line);
  }
  .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #2E3A22; display: block; }
  .chrome .addr {
    flex: 1; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 0.66rem;
    color: var(--bone-3); background: #0B0F07; border-radius: 3px; padding: 0.25rem 0.6rem;
  }

  .ptabs { display: flex; border-bottom: 1px solid var(--line); background: #0B0F07; }
  .ptabs button {
    cursor: pointer; background: transparent; border: 0; padding: 0.85rem 1.3rem; color: var(--bone-3);
    font-family: "Oswald", sans-serif; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    border-right: 1px solid var(--line);
  }
  .ptabs button[aria-pressed="true"] { color: var(--gold); background: rgba(201,162,39,0.08); box-shadow: inset 0 -2px 0 var(--gold); }

  .ppane { display: none; }
  .ppane.on { display: block; }

  /* the reel */
  .reelstage { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #050703; }
  .reelstage img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 0.7s ease;
  }
  .reelstage img.on { opacity: 1; animation: burns 5.4s linear both; }
  @keyframes burns { from { transform: scale(1.02); } to { transform: scale(1.11); } }
  @media (prefers-reduced-motion: reduce) { .reelstage img.on { animation: none; } }
  .reelstage .scrim { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(4,6,2,0.92)); pointer-events: none; }
  .reelstage .lower3 { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.6rem 1.7rem; text-align: center; pointer-events: none; }
  .reelstage .lower3 b {
    font-family: "Big Shoulders Display", sans-serif; font-weight: 800;
    font-size: clamp(1.5rem, 3.6vw, 2.6rem); text-transform: uppercase; display: block; letter-spacing: 0.02em;
  }
  .reelstage .lower3 span { font-family: "Oswald", sans-serif; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: block; margin-top: 5px; }
  .reelbar { height: 3px; background: #1A2110; position: relative; }
  .reelbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); width: 0; display: block; }
  .reelctl { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); }
  .reelctl button {
    cursor: pointer; border: 1px solid var(--line-2); background: transparent; color: var(--bone);
    border-radius: 2px; padding: 0.5rem 1.1rem;
    font-family: "Oswald", sans-serif; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .reelctl button:hover { border-color: var(--gold); color: var(--gold); }
  .reelctl .meta { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; color: var(--bone-3); }

  /* the photo strip under the reel */
  .strip2 { display: flex; gap: 6px; overflow-x: auto; padding: 0.8rem 1rem; border-top: 1px solid var(--line); background: #0A0D06; }
  .strip2 img {
    height: 62px; width: 83px; object-fit: cover; border-radius: 2px; flex: none;
    opacity: 0.5; cursor: pointer; border: 1px solid transparent;
  }
  .strip2 img.on { opacity: 1; border-color: var(--gold); }

  /* the wall */
  .wallhead { padding: 1.4rem 1.6rem 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .wallhead b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.8rem; text-transform: uppercase; }
  .wallhead span { font-family: "Oswald", sans-serif; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
  .wallbody { padding: 1.2rem 1.6rem 1.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
  .note2 {
    border: 1px solid var(--line); border-radius: 3px; padding: 0.95rem 1.05rem;
    background: var(--field-2); display: flex; gap: 0.75rem; align-items: flex-start;
  }
  .note2 .av2 {
    width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font-family: "Oswald", sans-serif; font-size: 0.62rem; background: #222B15; color: var(--gold-lt);
    border: 1px solid var(--line-2);
  }
  .note2 .who2 { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-2); display: block; margin-bottom: 0.25rem; }
  .note2 .tx2 { font-size: 0.94rem; line-height: 1.5; color: var(--bone-2); }
  .note2 .vm { display: flex; align-items: center; gap: 8px; margin-top: 0.3rem; }
  .note2 .vm .wave2 { display: flex; align-items: center; gap: 2px; height: 18px; flex: 1; }
  .note2 .vm .wave2 i { width: 2px; background: var(--gold); opacity: 0.75; border-radius: 1px; }
  .note2 .vm .t2 { font-family: "JetBrains Mono", monospace; font-size: 0.58rem; color: var(--bone-3); }
  .composer { padding: 0 1.6rem 1.8rem; }
  .composer .box {
    border: 1px solid var(--line-2); border-radius: 3px; background: var(--raise);
    padding: 0.9rem 1rem; display: flex; gap: 0.8rem; align-items: center;
  }
  .composer input {
    flex: 1; background: transparent; border: 0; color: var(--bone);
    font-family: "Newsreader", serif; font-size: 1rem;
  }
  .composer input::placeholder { color: var(--bone-3); }
  .composer .send {
    cursor: pointer; border: 0; border-radius: 2px; padding: 0.55rem 1.2rem;
    background: linear-gradient(178deg, var(--gold-lt), var(--gold)); color: #241C04;
    font-family: "Oswald", sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .composer .hint2 { font-family: "Oswald", sans-serif; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); margin-top: 0.6rem; }

  /* the cards tab */
  .cardstab { padding: 1.4rem 1.6rem 1.8rem; }

  /* ============ career ============ */
  .career { background: var(--field-2); border-bottom: 1px solid var(--line); }
  .career h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
  .lifeline { margin-top: 3rem; overflow-x: auto; padding-bottom: 0.5rem; }
  .lifetrack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 1.1rem; min-width: 940px; }
  .stop { display: flex; flex-direction: column; gap: 0.7rem; }
  .stop .age {
    font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.9rem;
    line-height: 1; color: var(--gold-lt);
  }
  .stop .age small { display: block; font-family: "Oswald", sans-serif; font-weight: 400; font-size: 0.58rem; letter-spacing: 0.18em; color: var(--bone-3); margin-top: 0.25rem; }
  .stop .rail { height: 1px; background: var(--line-2); position: relative; }
  .stop .rail::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
  .stop canvas { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 14px 32px rgba(0,0,0,0.5); }
  .stop .cap { font-family: "Oswald", sans-serif; font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-2); }
  .totals { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.6rem; }
  .tot b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 0.9; color: var(--gold-lt); display: block; }
  .tot span { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-3); }

  .branchsec { background: var(--field-2); border-bottom: 1px solid var(--line); }
  .bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 2.6rem; }
  .bcell { position: relative; border-radius: 3px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 14px 32px rgba(0,0,0,0.5); }
  .bcell img { display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .bcell figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0.75rem 0.85rem 0.7rem;
    background: linear-gradient(transparent, rgba(6,8,4,0.94));
    font-family: "Oswald", sans-serif; font-size: 0.66rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold-lt);
  }
  .bcell figcaption em { display: block; font-style: normal; color: var(--bone-3); letter-spacing: 0.1em; font-size: 0.6rem; margin-top: 3px; }

  /* ============ reel ============ */
  .reel .wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 3rem; align-items: center; }
  @media (max-width: 940px) { .reel .wrap { grid-template-columns: 1fr; } }
  .player { border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: #070904; box-shadow: 0 24px 56px rgba(0,0,0,0.55); }
  .stage {
    position: relative; aspect-ratio: 16/9; overflow: hidden;
    display: grid; place-items: center; background: #050703;
  }
  .stage canvas { height: 100%; width: auto; display: block; opacity: 0.98; }
  .stage .glow { position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 45%, rgba(201,162,39,0.10), transparent 70%); pointer-events: none; }
  .stage .lower {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
    background: linear-gradient(transparent, rgba(5,7,3,0.94)); text-align: center;
  }
  .stage .lower b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: 0.03em; display: block; text-transform: uppercase; }
  .stage .lower span { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: block; margin-top: 3px; }
  /* the photo strip under the reel */
  .strip2 { display: flex; gap: 6px; overflow-x: auto; padding: 0.8rem 1rem; border-top: 1px solid var(--line); background: #0A0D06; }
  .strip2 img {
    height: 62px; width: 83px; object-fit: cover; border-radius: 2px; flex: none;
    opacity: 0.5; cursor: pointer; border: 1px solid transparent;
  }
  .strip2 img.on { opacity: 1; border-color: var(--gold); }

  /* the wall */
  .wallhead { padding: 1.4rem 1.6rem 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .wallhead b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.8rem; text-transform: uppercase; }
  .wallhead span { font-family: "Oswald", sans-serif; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
  .wallbody { padding: 1.2rem 1.6rem 1.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
  .note2 {
    border: 1px solid var(--line); border-radius: 3px; padding: 0.95rem 1.05rem;
    background: var(--field-2); display: flex; gap: 0.75rem; align-items: flex-start;
  }
  .note2 .av2 {
    width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font-family: "Oswald", sans-serif; font-size: 0.62rem; background: #222B15; color: var(--gold-lt);
    border: 1px solid var(--line-2);
  }
  .note2 .who2 { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-2); display: block; margin-bottom: 0.25rem; }
  .note2 .tx2 { font-size: 0.94rem; line-height: 1.5; color: var(--bone-2); }
  .note2 .vm { display: flex; align-items: center; gap: 8px; margin-top: 0.3rem; }
  .note2 .vm .wave2 { display: flex; align-items: center; gap: 2px; height: 18px; flex: 1; }
  .note2 .vm .wave2 i { width: 2px; background: var(--gold); opacity: 0.75; border-radius: 1px; }
  .note2 .vm .t2 { font-family: "JetBrains Mono", monospace; font-size: 0.58rem; color: var(--bone-3); }
  .composer { padding: 0 1.6rem 1.8rem; }
  .composer .box {
    border: 1px solid var(--line-2); border-radius: 3px; background: var(--raise);
    padding: 0.9rem 1rem; display: flex; gap: 0.8rem; align-items: center;
  }
  .composer input {
    flex: 1; background: transparent; border: 0; color: var(--bone);
    font-family: "Newsreader", serif; font-size: 1rem;
  }
  .composer input::placeholder { color: var(--bone-3); }
  .composer .send {
    cursor: pointer; border: 0; border-radius: 2px; padding: 0.55rem 1.2rem;
    background: linear-gradient(178deg, var(--gold-lt), var(--gold)); color: #241C04;
    font-family: "Oswald", sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .composer .hint2 { font-family: "Oswald", sans-serif; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); margin-top: 0.6rem; }

  /* the cards tab */
  .cardstab { padding: 1.4rem 1.6rem 1.8rem; }

  /* ============ career ============ */
  .career { background: var(--field-2); border-bottom: 1px solid var(--line); }
  .career h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
  .lifeline { margin-top: 3rem; overflow-x: auto; padding-bottom: 0.5rem; }
  .lifetrack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 1.1rem; min-width: 940px; }
  .stop { display: flex; flex-direction: column; gap: 0.7rem; }
  .stop .age {
    font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.9rem;
    line-height: 1; color: var(--gold-lt);
  }
  .stop .age small { display: block; font-family: "Oswald", sans-serif; font-weight: 400; font-size: 0.58rem; letter-spacing: 0.18em; color: var(--bone-3); margin-top: 0.25rem; }
  .stop .rail { height: 1px; background: var(--line-2); position: relative; }
  .stop .rail::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
  .stop canvas { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 14px 32px rgba(0,0,0,0.5); }
  .stop .cap { font-family: "Oswald", sans-serif; font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-2); }
  .totals { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.6rem; }
  .tot b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 0.9; color: var(--gold-lt); display: block; }
  .tot span { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-3); }

  .branchsec { background: var(--field-2); border-bottom: 1px solid var(--line); }
  .bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 2.6rem; }
  .bcell { position: relative; border-radius: 3px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 14px 32px rgba(0,0,0,0.5); }
  .bcell img { display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .bcell figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0.75rem 0.85rem 0.7rem;
    background: linear-gradient(transparent, rgba(6,8,4,0.94));
    font-family: "Oswald", sans-serif; font-size: 0.66rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold-lt);
  }
  .bcell figcaption em { display: block; font-style: normal; color: var(--bone-3); letter-spacing: 0.1em; font-size: 0.6rem; margin-top: 3px; }

  /* ============ reel ============ */
  .reel .wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 3rem; align-items: center; }
  @media (max-width: 940px) { .reel .wrap { grid-template-columns: 1fr; } }
  .player { border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: #070904; box-shadow: 0 24px 56px rgba(0,0,0,0.55); }
  .stage {
    position: relative; aspect-ratio: 16/9; overflow: hidden;
    display: grid; place-items: center; background: #050703;
  }
  .stage canvas { height: 100%; width: auto; display: block; opacity: 0.98; }
  .stage .glow { position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 45%, rgba(201,162,39,0.10), transparent 70%); pointer-events: none; }
  .stage .lower {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
    background: linear-gradient(transparent, rgba(5,7,3,0.94)); text-align: center;
  }
  .stage .lower b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: 0.03em; display: block; text-transform: uppercase; }
  .stage .lower span { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: block; margin-top: 3px; }
  .scrub { display: flex; align-items: stretch; border-top: 1px solid var(--line); }
  .scrub button {
    flex: 1; cursor: pointer; background: transparent; border: 0; border-right: 1px solid var(--line);
    padding: 0.7rem 0.4rem; color: var(--bone-3);
    font-family: "Oswald", sans-serif; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .scrub button:last-child { border-right: 0; }
  .scrub button[aria-pressed="true"] { color: var(--gold); background: rgba(201,162,39,0.09); box-shadow: inset 0 2px 0 var(--gold); }
  .scrub button b { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; color: inherit; opacity: 0.7; font-weight: 400; }

  /* ============ wall ============ */
  .wall { background: var(--field-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .wall .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: center; }
  @media (max-width: 940px) { .wall .wrap { grid-template-columns: 1fr; } }
  .phone { border: 8px solid #131810; border-radius: 30px; overflow: hidden; background: #070904; box-shadow: 0 26px 60px rgba(0,0,0,0.62); max-width: 340px; margin: 0 auto; }
  .url { background: #141A0C; color: var(--bone-3); font-family: "JetBrains Mono", monospace; font-size: 0.62rem; text-align: center; padding: 7px; }
  .idbar { padding: 14px 14px 12px; border-bottom: 1px solid var(--line); text-align: center; }
  .idbar b { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: 1.15rem; display: block; }
  .idbar span { font-family: "Oswald", sans-serif; font-size: 0.56rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); display: block; margin-top: 4px; }
  .tabs { display: flex; border-bottom: 1px solid var(--line); }
  .tabs button {
    flex: 1; cursor: pointer; background: transparent; border: 0; border-right: 1px solid var(--line);
    padding: 0.65rem 0.3rem; color: var(--bone-3);
    font-family: "Oswald", sans-serif; font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase;
  }
  .tabs button:last-child { border-right: 0; }
  .tabs button[aria-pressed="true"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
  .pane { padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 292px; }
  .pane[hidden] { display: none; }
  .msg { display: flex; gap: 9px; }
  .av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: "Oswald", sans-serif; font-size: 0.56rem; background: #222B15; color: var(--gold-lt); border: 1px solid var(--line); }
  .msg .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .msg .who { font-family: "Oswald", sans-serif; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-2); }
  .msg .tx { font-size: 0.86rem; line-height: 1.45; color: var(--bone-2); }
  .voice { display: flex; align-items: center; gap: 8px; background: #121708; border: 1px solid var(--line); border-radius: 3px; padding: 6px 9px; }
  .wave { display: flex; align-items: center; gap: 2px; height: 17px; flex: 1; }
  .wave i { width: 2px; background: var(--gold); opacity: 0.7; border-radius: 1px; }
  .voice .t { font-family: "JetBrains Mono", monospace; font-size: 0.55rem; color: var(--bone-3); }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .shot { aspect-ratio: 1; border-radius: 2px; position: relative; overflow: hidden; border: 1px solid rgba(240,236,221,0.08); }
  .shot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 30%, rgba(255,255,255,0.09), transparent 70%), linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.5)); }
  .shot b { position: absolute; left: 4px; bottom: 3px; z-index: 1; font-family: "Oswald", sans-serif; font-weight: 400; font-size: 0.46rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
  .addbtn { margin-top: auto; display: block; text-align: center; border-radius: 2px; padding: 0.62rem; background: linear-gradient(178deg, var(--gold-lt), var(--gold)); color: #241C04; font-family: "Oswald", sans-serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; }

  .notes { display: flex; flex-direction: column; gap: 1.5rem; }
  .note { padding-left: 1.1rem; border-left: 2px solid var(--gold); display: flex; flex-direction: column; gap: 0.25rem; }
  .note h3 { font-family: "Oswald", sans-serif; font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
  .note p { color: var(--bone-2); font-size: 1rem; }
  .note strong { color: var(--bone); font-weight: 500; }

  /* ============ legacy ============ */
  .legacy .wrap { display: grid; grid-template-columns: 1fr 0.9fr; gap: 3rem 3rem; align-items: start; }
  @media (max-width: 940px) { .legacy .wrap { grid-template-columns: 1fr; } }
  .line { display: flex; flex-direction: column; }
  .gen { display: flex; align-items: flex-start; gap: 1rem; padding: 0.9rem 0; }
  .gen .dot { width: 13px; height: 13px; flex: none; border: 2px solid var(--gold); transform: rotate(45deg); margin-top: 0.45rem; }
  .gen.now .dot { background: var(--gold); box-shadow: 0 0 14px rgba(201,162,39,0.6); }
  .gen .stem { width: 2px; background: var(--line-2); margin: 0 auto; height: 26px; margin-left: 5.5px; }
  .gen .info { display: flex; flex-direction: column; gap: 0.1rem; }
  .gen .rel { font-family: "Oswald", sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
  .gen .nm { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; }
  .gen .sv { font-family: "JetBrains Mono", monospace; font-size: 0.76rem; color: var(--bone-3); }

  .legacyshot, .flightshot {
    display: block; width: 100%; height: auto; border-radius: 3px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55); border: 1px solid var(--line-2);
  }
  .shotcap {
    font-family: "Oswald", sans-serif; font-size: 0.62rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--bone-3); margin-top: 0.6rem; display: block;
  }

  /* ============ pricing ============ */
  .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.3rem; margin-top: 3rem; align-items: start; }
  .tier { border: 1px solid var(--line); border-radius: 3px; padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; background: var(--field-2); }
  .tier.hot { border-color: rgba(201,162,39,0.55); background: var(--raise); box-shadow: 0 18px 44px rgba(0,0,0,0.45); }
  .tier .lab { font-family: "Oswald", sans-serif; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
  .tier .amt { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 3.3rem; line-height: 0.9; }
  .tier .cap { font-family: "Oswald", sans-serif; font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-3); }
  .tier ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; color: var(--bone-2); font-size: 0.99rem; }
  .tier li { padding-left: 1.05rem; position: relative; line-height: 1.5; }
  .tier li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
  .tier li strong { color: var(--bone); font-weight: 500; }
  .anchorline { margin-top: 2.4rem; padding-left: 1.2rem; border-left: 2px solid var(--gold); color: var(--bone-2); max-width: 62ch; }
  .anchorline strong { color: var(--bone); font-weight: 500; }

  /* ============ faq + close ============ */
  .faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.7rem 3rem; margin-top: 3rem; }
  .q h3 { font-family: "Oswald", sans-serif; font-weight: 400; font-size: 1rem; color: var(--bone); margin-bottom: 0.3rem; }
  .q p { color: var(--bone-3); font-size: 0.99rem; }
  .close { text-align: center; background: radial-gradient(70% 60% at 50% 0%, rgba(201,162,39,0.09), transparent 70%), var(--field); }
  .close h2 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
  .close p { margin: 1.3rem auto 0; max-width: 46ch; color: var(--bone-2); font-size: 1.12rem; }
  footer { border-top: 1px solid var(--line); background: #070904; color: var(--bone-3); font-size: 0.86rem; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 0.8rem 2.5rem; justify-content: space-between; padding: 2.2rem 1.4rem 2.6rem; }
  footer .dis { max-width: 60ch; line-height: 1.55; }
  footer b { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-2); }