@charset "utf-8";
  :root {
    --bg: #0B2B2E;
    --bg2: #12474B;
    --card: #0f3a3e;
    --ink: #BFE9E4;
    --mute: #8FB8B4;
    --gold: #F2C14E;
    --gold2: #F7D783;
    --green: #3DDC84;
    --red: #ff7a7a;
    --line: #1f6266;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #fbf7ec; --bg2: #f3ecd8; --card: #ffffff; --ink: #1b2240;
      --mute: #5b6485; --gold: #b8860b; --gold2: #8a6508; --green: #0f8a5f;
      --red: #c0392b; --line: #e1d6b4;
    }
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 17px/1.55 "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  a { color: var(--gold); }
  .wrap { max-width: 920px; margin: 0 auto; padding: 0 16px; }

  /* ticker */
  .ticker { background: #000; color: var(--green); font: 13px/1 ui-monospace, Consolas, monospace; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line); }
  .ticker-track { display: inline-block; padding: 9px 0; animation: scroll 38s linear infinite; }
  .ticker span { margin-right: 38px; }
  .ticker .dn { color: var(--red); }
  @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

  .logo { font-weight: 800; letter-spacing: .02em; font-size: 20px; }
  .logo b { color: var(--gold); }

  .hero { text-align: center; padding: 48px 0 28px; }
  .hero .fin { font-size: 72px; line-height: 1; }
  h1 { font-size: clamp(38px, 8vw, 68px); line-height: 1.05; margin: 10px 0 14px; letter-spacing: -.02em; }
  h1 em { font-style: normal; color: var(--gold); }
  .tag { color: var(--mute); max-width: 560px; margin: 0 auto 26px; font-size: 19px; }
  .btn {
    display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 700;
    background: var(--gold); color: #1a1405; padding: 14px 26px; border-radius: 12px;
    box-shadow: 0 4px 0 #8a6508; transition: transform .08s, box-shadow .08s;
  }
  .btn:hover { transform: translateY(1px); box-shadow: 0 3px 0 #8a6508; }
  .btn:active { transform: translateY(4px); box-shadow: 0 0 0 #8a6508; }
  .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; padding: 10px 16px; font-weight: 600; font-size: 15px; }
  .btn.ghost:hover { border-color: var(--gold); transform: none; }
  /* Pitch the CEO form (contact.html) */
  .cform { position: relative; max-width: 680px; margin: 22px auto 0; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; text-align: left; }
  .cform label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  .cform .full { grid-column: 1 / -1; }
  .cform .lab { font-weight: 700; font-size: 14px; color: var(--ink); }
  .cform .lab em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--mute); margin-left: 6px; }
  .cform input, .cform select, .cform textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
  .cform input::placeholder, .cform textarea::placeholder { color: var(--mute); opacity: .7; }
  .cform textarea { resize: vertical; min-height: 130px; line-height: 1.45; }
  .cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); }
  .cform .cerr { color: var(--red); margin: 0; font-weight: 700; }
  .cform .cactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; }
  .cform .cactions .btn:not(.ghost) { margin-right: auto; }
  .cform .cfine { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.5; }
  .cform .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .cthanks { max-width: 560px; margin: 22px auto 0; padding: 26px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
  @media (max-width: 600px) {
    .cform { grid-template-columns: 1fr; padding: 18px; }
    .cform .cactions .btn:not(.ghost) { margin-right: 0; width: 100%; }
  }
  .btn.ib { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; text-decoration: none; }

  /* pitch card */
  .pitch {
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    padding: 26px; margin: 18px 0 8px; position: relative; overflow: hidden;
  }
  .pitch::before { content: "CONFIDENTIAL"; position: absolute; right: -34px; top: 22px; transform: rotate(35deg); background: var(--red); color: #fff; font-size: 11px; letter-spacing: .2em; padding: 3px 44px; opacity: .85; }
  .pitch .eyebrow { font: 12px ui-monospace, Consolas, monospace; letter-spacing: .15em; color: var(--mute); text-transform: uppercase; }
  .pitch h2 { font-size: clamp(26px, 5vw, 38px); line-height: 1.1; margin: 6px 0 6px; color: var(--gold2); }
  .pitch .lede { font-size: 19px; margin: 0 0 18px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0; }
  .cell { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
  .cell small { display: block; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; }
  .cell div { font-weight: 600; }
  .fine { color: var(--mute); font-size: 13px; font-style: italic; margin: 14px 0 0; }
  .judges { margin-top: 18px; display: grid; gap: 8px; }
  .judge { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
  .judge .who { font-weight: 700; min-width: 112px; }
  .judge .out { font: 11px ui-monospace, Consolas, monospace; padding: 2px 7px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); white-space: nowrap; }
  .judge .out.in { color: var(--green); border-color: var(--green); }
  .judge .out.no { color: var(--red); border-color: var(--red); }
  .meter { height: 10px; background: var(--bg2); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
  .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--gold)); transition: width .5s; }
  .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  .pitch.flash { animation: flash .35s; }
  @keyframes flash { from { transform: scale(.985); opacity: .5; } to { transform: none; opacity: 1; } }

  section { padding: 44px 0 6px; }
  h3 { font-size: 28px; margin: 0 0 6px; }
  .sub { color: var(--mute); margin: 0 0 22px; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
  .card .ic { font-size: 28px; }
  .card h4 { margin: 6px 0 4px; font-size: 18px; }
  .card p { margin: 0; color: var(--mute); font-size: 15px; }
  .quote { font-size: 16px; }
  .quote cite { display: block; margin-top: 8px; color: var(--mute); font-size: 13px; font-style: normal; }

  .hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .hist li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  .hist a { color: var(--ink); text-decoration: none; font-weight: 600; }
  .hist a:hover { color: var(--gold); }
  .hist span { color: var(--mute); font-size: 13px; white-space: nowrap; }

  details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
  summary { cursor: pointer; font-weight: 700; }
  details p { color: var(--mute); margin: 8px 0 0; }

  .rocket { position: fixed; left: 4vw; bottom: -60px; font-size: 56px; z-index: 8; pointer-events: none; animation: moon 2.4s ease-in both; }
  @keyframes moon { to { transform: translate(80vw, -115vh) rotate(45deg) scale(.5); } }
  @media (prefers-reduced-motion: reduce) { .rocket { animation-duration: .01s; } }
  .check { position: relative; background: #f4efd9; color: #2a2a2a; border: 2px solid #b9ad82; border-radius: 8px; padding: 18px 20px; font-family: Georgia, "Times New Roman", serif; overflow: hidden; }
  .check::after { content: "VOID · NOT A CHECK · VOID · NOT A CHECK"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px/1 system-ui, sans-serif; color: rgba(192,57,43,.16); transform: rotate(-12deg); text-align: center; pointer-events: none; }
  .check .row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
  .check .k { font: 11px ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: #6b6340; display: block; }
  .check .v { font-size: 19px; border-bottom: 1px solid #8c8461; padding-bottom: 2px; display: block; }
  .check .amt { font-weight: 700; font-size: 22px; }
  .gcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
  .gcard { aspect-ratio: 1.6; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
  .gcard b { font-size: 15px; letter-spacing: .06em; }
  .gcard .val { font-size: 34px; font-weight: 800; line-height: 1; }
  .gcard small { font: 11px ui-monospace, Consolas, monospace; opacity: .9; }
  .gcard .bal { text-decoration: line-through; opacity: .75; font-size: 14px; }
  .acro { font: 13px ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 6px 0 0; }
  .acro b { color: var(--gold); font-size: 17px; }
  :root[data-theme="light"] {
    --bg: #fbf7ec; --bg2: #f3ecd8; --card: #ffffff; --ink: #1b2240;
    --mute: #5b6485; --gold: #b8860b; --gold2: #8a6508; --green: #0f8a5f;
    --red: #c0392b; --line: #e1d6b4;
  }
  .tbtn { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; width: 34px; height: 34px; margin-left: 14px; cursor: pointer; font-size: 16px; line-height: 1; vertical-align: middle; }
  .tbtn:hover { border-color: var(--gold); }
  .qout { margin: 12px 0; font-size: 14px; display: none; background: var(--bg2); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; }
  .qout.on { display: block; }
  .qout b { color: var(--gold2); }
  .qout div { margin: 2px 0; }
  .ceo { display: flex; gap: 20px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
  .ceo-pic { font-size: 84px; line-height: 1; flex: none; background: var(--bg2); border: 1px solid var(--line); border-radius: 50%; width: 132px; height: 132px; display: grid; place-items: center; }
  .ceo-pic { overflow: hidden; }
  .ceo-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ceo h4 { margin: 0; font-size: 24px; color: var(--gold2); }
  .ceo-title { color: var(--mute); font: 12px ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
  .ceo p { margin: 0 0 10px; }
  .ceo .btn { text-decoration: none; }
  @media (max-width: 560px) { .ceo { flex-direction: column; text-align: center; } }
  .logo { font-family: Bungee, "Space Grotesk", system-ui, sans-serif; font-weight: 400; letter-spacing: .03em; background: linear-gradient(90deg, #F2C14E, #3DDC84); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-flex; align-items: center; gap: 8px; }
  .logo b { color: inherit; font-weight: 400; }
  .logo .llc { font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .05em; background: #F2C14E; color: #0B2B2E; -webkit-text-fill-color: #0B2B2E; padding: 4px 6px; border-radius: 5px; }
  h1, h3 { font-family: Bungee, "Space Grotesk", system-ui, sans-serif; font-weight: 400; }
  h1 { letter-spacing: 0; }
  .tank { display: block; width: min(380px, 92%); height: auto; margin: 0 auto 8px; }
  /* Phones: a small fish so the headline and the buttons show on the first screen. */
  @media (max-width: 600px) {
    .hero { padding-top: 8px; }
    .tank { width: min(120px, 32%); margin-bottom: 2px; }
  }
  .swap { transition: opacity .4s; }
  .swap.out { opacity: 0; }
  .bform { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 6px; }
  .bl { display: block; }
  .bl span { display: block; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
  .bl select, .bl input { width: 100%; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; text-overflow: ellipsis; }
  .bl select:focus, .bl input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
  .banner { text-align: center; font: 13px ui-monospace, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); border: 1px dashed var(--line); border-radius: 8px; padding: 8px; margin-bottom: 20px; }
  .mission { font-size: 20px; text-align: center; max-width: 700px; margin: 0 auto; font-style: italic; }
  #rotator { min-height: 2.6em; transition: opacity .4s; }
  #rotator.out { opacity: 0; }
  #rotator:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
  footer { margin-top: 56px; padding: 26px 0 50px; border-top: 1px solid var(--line); color: var(--mute); font-size: 13px; }
  footer p { margin: 0 0 8px; }
  .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(80px); background: var(--gold); color: #1a1405; padding: 10px 18px; border-radius: 10px; font-weight: 700; transition: transform .25s; z-index: 9; }
  .toast.show { transform: translateX(-50%) translateY(0); }
  @media (max-width: 560px) { .judge { flex-wrap: wrap; } .judge .who { min-width: 0; } }

  /* ---- header, logo and nav menu (under the title) ---- */
  .top { padding-top: 14px; }
  .topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  a.logo { text-decoration: none; font-size: 24px; }
  .tbtn { margin-left: 0; }
  .menu { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .menu a { color: var(--mute); text-decoration: none; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; }
  .menu a:hover { color: var(--ink); background: var(--bg2); }
  .menu a[aria-current="page"] { background: var(--gold); color: #1a1405; }
  .menu a:focus-visible, .tbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .pagehead { text-align: center; padding: 36px 0 6px; }
  .pagehead h1 { font-size: clamp(32px, 7vw, 52px); margin: 0 0 8px; }
  .pagehead .tag { margin-bottom: 8px; }
  @media (max-width: 560px) { .menu a { padding: 8px 12px; } }

  .famq { margin: 0 0 22px; padding: 12px 18px; border-left: 4px solid var(--gold); background: var(--card); border-radius: 0 12px 12px 0; font-size: 20px; font-weight: 700; }
  .famq cite { display: block; margin-top: 4px; color: var(--mute); font-size: 13px; font-weight: 500; font-style: normal; }
  .famq-k { display: block; margin-bottom: 4px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

  .social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 18px 0 4px; padding: 14px 16px; border: 1px dashed var(--gold); border-radius: 14px; background: var(--card); }
  .social-k { width: 100%; text-align: center; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .social .soc { margin: 0; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 14px; }
  .social .soc svg { flex: none; }
  @media (min-width: 640px) { .social-k { width: auto; } }

  .hero .mission { margin: 0 auto 26px; font-size: 18px; }
  .hero .cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
  .hero .cta .btn { text-decoration: none; }
  .build-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 22px 0 4px; padding: 16px 20px; background: var(--card); border: 1px solid var(--gold); border-radius: 14px; }
  .build-band h3 { margin: 0 0 2px; }
  .build-band .sub { margin: 0; }
  .build-band .btn { text-decoration: none; white-space: nowrap; }

  /* Grifties: fake membership tiers and the worthless certificate */
  .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
  .tier { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
  .tier.gold { border-color: var(--gold); }
  .tier.plat { border-color: #8fb4d8; }
  .tier.founder { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
  .tier .ic { font-size: 30px; }
  .tier h4 { margin: 0; font-size: 20px; }
  .tier .price { margin: 0; font-family: "Bungee", sans-serif; font-size: 26px; }
  .tier .price span { font-family: inherit; font-size: 13px; color: var(--mute); font-weight: 500; }
  .tier ul { margin: 6px 0 12px; padding-left: 18px; color: var(--mute); font-size: 15px; line-height: 1.5; flex: 1; }
  .tier .btn { align-self: flex-start; }
  #tiers .fine { margin: 14px 0 0; color: var(--mute); font-size: 13px; }
  #goty { margin-top: 34px; }
  .cert { max-width: 560px; margin: 22px auto 0; padding: 30px 26px; text-align: center; background: var(--card); border: 3px double var(--gold); border-radius: 6px; }
  .cert[hidden] { display: none; }
  .cert-k { margin: 0; font-family: "Bungee", sans-serif; letter-spacing: .08em; color: var(--mute); font-size: 13px; }
  .cert h4 { margin: 6px 0 14px; font-size: 24px; }
  .cert-small { margin: 0 0 8px; color: var(--mute); }
  .cert-name { margin: 0 0 8px; font-family: "Bungee", sans-serif; font-size: clamp(24px, 6vw, 34px); overflow-wrap: anywhere; }
  .cert-month { margin: 12px 0; font-weight: 700; }
  .cert-foot { margin: 14px 0 0; font-size: 12px; color: var(--mute); }
  @media print { .ticker, .top, .pagehead, #tiers, .cform, .actions, footer, .toast, #goty > .sub, #goty > h3 { display: none !important; } .cert { border-color: #000; margin-top: 40px; } }

  .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
  .burger span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  @media (max-width: 720px) {
    .burger { display: inline-flex; margin-left: auto; }
    .menu { display: none; flex-direction: column; flex-wrap: nowrap; }
    .menu.open { display: flex; }
    .menu a { padding: 12px 14px; }
  }
  @media (prefers-reduced-motion: reduce) { .burger span { transition: none; } }
  .pitch:empty { display: none; }

  /* company profile pages */
  .crumbs { margin: 14px 0 0; font-size: 14px; }
  .crumbs a { color: var(--mute); text-decoration: none; }
  .crumbs a:hover { color: var(--gold); }
  .bigic { font-size: 56px; line-height: 1; }
  .motto { color: var(--gold); font-weight: 700; font-style: italic; margin: 0 auto 8px; }
  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .facts > div, .stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
  .facts small, .stat small { display: block; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
  .facts b, .stat b { font-size: 16px; }
  .prose { max-width: 70ch; margin: 0 0 12px; }
  .price { color: var(--gold) !important; font-weight: 700; margin-bottom: 6px !important; }
  a.card { display: block; color: inherit; text-decoration: none; }
  a.card:hover { border-color: var(--gold); }
  a.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .cprof { display: inline-block; margin-top: 10px; margin-left: 8px; color: var(--gold); font-size: 14px; font-weight: 700; }

  /* card cleanup: balanced line breaks, equal-height cards, buttons lined up at the bottom */
  h1, h2, h3, h4, .tag, .sub, .mission, .motto, .quote, .stat b, .facts b, .price, .famq { text-wrap: balance; }
  .card p, .prose, details p, .lede, .fine { text-wrap: pretty; }
  .card, .quote, .stat, .facts > div { overflow-wrap: break-word; min-width: 0; }
  .card { display: flex; flex-direction: column; }
  .card > p:last-child { margin-bottom: 0; }
  .card .qout { width: auto; }
  .card-actions { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .card-actions .btn { white-space: nowrap; }
  .card-actions .cprof { margin: 0; white-space: nowrap; }
  .card .ic { line-height: 1.1; }
  .card h4 { line-height: 1.25; }
  .quote cite { margin-top: auto; padding-top: 8px; }
  #hits .card, #reviews .card { min-height: 128px; }
  .cards > .card.quote { justify-content: space-between; }
  @media (max-width: 420px) { .card-actions .btn { white-space: normal; } }

  /* fictional post card on the Home page */
  .xpost { max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
  .xtop { display: flex; align-items: center; gap: 12px; }
  .xav { width: 44px; height: 44px; border-radius: 50%; flex: none; }
  .xwho { line-height: 1.3; min-width: 0; }
  .xhandle { color: var(--mute); font-size: 14px; }
  .xbadge { display: inline-block; background: var(--gold); color: #1a1405; border-radius: 50%; width: 16px; height: 16px; font-size: 11px; line-height: 16px; text-align: center; vertical-align: middle; }
  .xtext { margin: 12px 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; overflow-wrap: break-word; }
  .xstats { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--mute); font-size: 14px; }
  #timeline .actions { max-width: 560px; }

  /* Phones (under 600px): a tighter hero, and buttons that share one size and line up in equal columns.
     Spacing comes from the container gap only; no button carries its own margin. */
  @media (max-width: 600px) {
    .ticker { font-size: 11px; }
    .ticker-track { padding: 5px 0; }
    h1 { font-size: clamp(28px, 9vw, 44px); line-height: 1.05; margin: 6px 0 10px; }
    .hero .tag { margin: 0 auto 8px; font-size: 17px; }
    .hero .mission { margin: 0 auto 12px; font-size: 16px; }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px; line-height: 1.2; box-sizing: border-box; margin: 0; text-align: center; text-decoration: none; }
    .btn.ib { padding: 0; }
    .hero .cta, .actions, .card-actions, .cform .cactions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; justify-content: stretch; }
    .hero .cta { grid-template-columns: 1fr; }
    .actions > .btn:last-child:nth-child(odd), .card-actions > :last-child:nth-child(odd), .cform .cactions > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .card-actions { padding-top: 12px; align-items: center; }
    .card-actions .cprof { text-align: center; }
    .card-actions .btn { white-space: normal; }
    .cform .cactions .btn:not(.ghost) { width: auto; grid-column: 1 / -1; }
    /* timeline: "Another post" takes the free width, the three round icons stay their size on the same row */
    #timeline .actions { display: flex; flex-wrap: nowrap; align-items: center; }
    #timeline .actions .btn:not(.ib) { flex: 1 1 auto; min-width: 0; }
    #timeline .actions .btn.ib { flex: none; }
  }
  @media (max-width: 380px) {
    .actions, .card-actions, .cform .cactions { grid-template-columns: 1fr; }
  }

  /* Services: fold "What we do" to six cards on phones; the home page's Service of the day card */
  .foldbtn { display: none; }
  .sotd { max-width: 560px; margin-bottom: 14px; }
  #service { margin-top: 8px; }
  @media (max-width: 600px) {
    .cards.fold:not(.open) > .card:nth-child(n+7) { display: none; }
    .foldbtn { display: grid; margin-top: 12px; }
  }

  /* Companies: grouped cards and the "Try the products" demos */
  .grp { margin: 28px 0 12px; font-family: Bungee, "Space Grotesk", system-ui, sans-serif; font-weight: 400; font-size: 20px; color: var(--gold); }
  .grp span { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 14px; color: var(--mute); margin-left: 8px; }
  #family .famq + .grp { margin-top: 22px; }
  #toys { margin-top: 12px; }
  .toy { margin-top: 26px; }
  .toy h4 { margin: 0 0 4px; font-size: 20px; }
  .toy .sub { margin-bottom: 14px; }
  @media (max-width: 600px) {
    .cards.fold4:not(.open) > .card:nth-child(n+5) { display: none; }
  }

  /* Companies: jump links to each group */
  .jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
  .jump a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
  .jump a:hover, .jump a:focus-visible { border-color: var(--gold); }
  .grp, #toys { scroll-margin-top: 16px; }
  @media (max-width: 600px) { .jump { margin-top: 10px; } .jump a { padding: 10px 14px; } }

  /* Companies accordion: the group headings are buttons that open and close their cards */
  .grpbtn { display: flex; align-items: baseline; gap: 4px; width: 100%; margin: 0; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .grpbtn:hover { border-bottom-color: var(--gold); }
  .grpbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
  .grpbtn .chev { margin-left: auto; align-self: center; width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: 4px; }
  .open > .grpbtn .chev { transform: rotate(45deg); }
  .gbody { padding-top: 14px; }
  #toys > h3 { margin: 0; font-size: 20px; }
  #toys > h3.open { color: var(--gold); }
  .jump a[aria-current] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
  @media (prefers-reduced-motion: reduce) { .grpbtn .chev { transition: none; } }

  /* Company logos: a dark-theme and a light-theme image, one shown at a time */
  .lg { display: block; }
  .lg img { width: auto; height: auto; max-width: 100%; }
  .lg-d { display: block; }
  .lg-l { display: none; }
  :root[data-theme="light"] .lg-d { display: none; }
  :root[data-theme="light"] .lg-l { display: block; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .lg-d { display: none; }
    :root:not([data-theme="dark"]) .lg-l { display: block; }
  }
  .ic.logo-ic { height: 64px; display: flex; align-items: center; margin-bottom: 4px; }
  .ic.logo-ic .lg img { max-height: 64px; }
  .bigic.logo-big { display: flex; justify-content: center; margin-bottom: 8px; }
  .bigic.logo-big .lg { width: 100%; }
  .bigic.logo-big .lg img { max-height: 160px; max-width: min(100%, 440px); margin: 0 auto; }