/* Look 5m desktop homepage. Linked with media="(min-width: 861px)" so phones never apply it.
   Cascade copied from design/saved-looks/look5m-homepage-mock.html. */
.brand {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.pt {
  width: min(340px, 78vw);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 18px 20px 20px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  text-align: left;
  border: 2px solid var(--accent);
  background: var(--glass);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 48px color-mix(in srgb, var(--accent) 28%, transparent);
  backdrop-filter: blur(18px);
}
.pt .z { font-size: 20px; font-weight: 500; letter-spacing: .04em; color: var(--label); }
.pt .sym {
  font-size: clamp(84px, 14vw, 132px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .85;
  color: var(--ink);
  align-self: center;
  margin: 0;
  transform-origin: center top;
}
.pt .nm { font-size: 15px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.pt .mass { margin-top: 4px; font-size: 13px; letter-spacing: .08em; color: var(--mute); }

.pt-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px 48px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.pt-door {
  aspect-ratio: 1;
  padding: 14px 16px 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 2px solid var(--accent);
  background: var(--glass);
  min-height: 0;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pt-door:hover { transform: translateY(-4px); box-shadow: 0 0 36px color-mix(in srgb, var(--accent) 36%, transparent); }
.pt-door .z { font-size: 13px; color: var(--label); }
.pt-door .sym { font-size: clamp(36px, 4.2vw, 52px); font-weight: 700; letter-spacing: -.04em; align-self: center; line-height: .9; }
.pt-door .nm { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

.pt-door.gold { --accent:#E8C872; --ink:#f7f1e4; --label:#d9c89a; --glass:linear-gradient(180deg, rgba(255,236,190,.14), rgba(10,8,6,.62)); }
.pt-door.silver { --accent:#C5D4E4; --ink:#eef3f8; --label:#9aabbc; --glass:linear-gradient(180deg, rgba(197,212,228,.14), rgba(8,12,18,.62)); }
.pt-door.btc { --accent:#8FBC98; --ink:#e8f3ea; --label:#9ec4a6; --glass:linear-gradient(180deg, rgba(143,188,152,.14), rgba(8,14,10,.62)); }
.pt-door.eth { --accent:#8B7CFF; --ink:#eeedf8; --label:#b0aad4; --glass:linear-gradient(180deg, rgba(139,124,255,.16), rgba(10,8,18,.62)); }
.pt-door.ai { --accent:#E7DCC8; --ink:#f4efe6; --label:#c4b8a4; --glass:linear-gradient(180deg, rgba(231,220,200,.14), rgba(14,12,10,.62)); }
.pt-door.arena { --accent:#2b6bff; --ink:#e8eeff; --label:#8eb0ff; --glass:linear-gradient(180deg, rgba(43,107,255,.16), rgba(4,8,20,.62)); }

body.day .pt-door.gold { --accent:#8A5A12; --ink:#2a2110; --label:#7a5a18; --glass:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,236,190,.35)); }
body.day .pt-door.silver { --accent:#4A6278; --ink:#1c2732; --label:#5b6e82; --glass:linear-gradient(180deg, rgba(255,255,255,.7), rgba(197,212,228,.32)); }
body.day .pt-door.btc { --accent:#3F6B4A; --ink:#142018; --label:#4a6b52; --glass:linear-gradient(180deg, rgba(255,255,255,.7), rgba(143,188,152,.28)); }
body.day .pt-door.eth { --accent:#4C3DB8; --ink:#16122a; --label:#5a5480; --glass:linear-gradient(180deg, rgba(255,255,255,.7), rgba(139,124,255,.22)); }
body.day .pt-door.ai { --accent:#6B5A3A; --ink:#221c14; --label:#6a5c44; --glass:linear-gradient(180deg, rgba(255,255,255,.7), rgba(231,220,200,.32)); }
body.day .pt-door.arena { --accent:#0033aa; --ink:#081028; --label:#0033aa; --glass:linear-gradient(180deg, rgba(255,255,255,.7), rgba(43,107,255,.22)); }

@media (max-width: 1100px) {
  .pt-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .pt-row { grid-template-columns: 1fr 1fr; padding: 0 16px 48px; }
  .pt .sym { font-size: 88px; }
}

.home-ico,
.page-shift,
.page-picker { display: none; }
.home-ico { width: 22px; height: 22px; fill: currentColor; }
.page-slide { display: contents; }

/* Portrait phone only. Landscape and desktop keep the full header. */
@media (max-width: 860px) and (orientation: portrait) {
  /* Equal side columns so the page name sits in the true center, not against the mode button. */
  body:not(.home) header {
    grid-template-columns: 1fr auto 1fr;
  }
  body:not(.home) header .brand { justify-self: start; }
  body:not(.home) header .dock {
    justify-self: center;
    text-align: center;
    max-width: 100%;
  }
  body:not(.home) header .right { justify-self: end; }

  body.home header .right { z-index: 4; }
  body.home header .brand {
    justify-self: center;
    position: absolute;
    left: 50%;
    z-index: 1;
    width: max-content;
    max-width: calc(100% - 108px);
    text-align: center;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: translateX(-50%) translateY(8px) scale(.86);
  }
  body.home header .brand.on {
    transform: translateX(-50%);
  }

  header.docked .brand {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  header.docked .brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  header.docked .home-ico {
    display: block;
  }
  .page-slide { display: contents; }
  header.docked .page-slide {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    align-items: center;
    justify-self: stretch;
    grid-column: 2;
    column-gap: 2px;
    min-width: 0;
  }
  header.docked .dock {
    font-size: clamp(22px, 7vw, 34px);
    pointer-events: auto;
    cursor: pointer;
    justify-self: center;
  }
  header.picking .dock { display: none; }

  .page-shift {
    display: none;
  }
  header.docked .page-shift {
    display: grid;
    place-items: center;
    width: 22px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--accent);
    opacity: .24;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: opacity .2s ease;
  }
  header.docked .page-shift:active {
    opacity: .65;
  }

  .page-picker { display: none; }
  header.picking .page-picker {
    display: block;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header.picking .page-picker::-webkit-scrollbar { display: none; }
  .page-picker-track {
    display: flex;
    align-items: center;
  }
  .page-picker a {
    box-sizing: border-box;
    scroll-snap-align: center;
    text-align: center;
    font-size: clamp(22px, 7vw, 34px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--ink);
    opacity: .28;
    transform: scale(.78);
    filter: blur(.2px);
    transition: opacity .22s ease, transform .22s ease, color .22s ease, filter .22s ease;
    padding: 6px 0 8px;
  }
  .page-picker a.on {
    opacity: 1;
    transform: scale(1);
    filter: none;
    color: var(--accent);
    text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

    :root {
      --accent:#C5D4E4; --ink:#f4f7fb; --mute:#b7c4d2; --label:#9aabbc;
      --header:rgba(8,12,18,.42); --nav:#9aabbc; --foot:#6e7d8c;
      --canvas:#07090d;
    }
    :root.day, body.day {
      --accent:#4A6278; --ink:#1c2732; --mute:#4a5d70; --label:#5b6e82;
      --header:rgba(236,242,248,.55); --nav:#4a5d70; --foot:#5b6e82;
      --canvas:#b7c6d6;
    }
    * { box-sizing:border-box; margin:0; padding:0; }
    a { color:inherit; text-decoration:none; }
    html { background:var(--canvas); color-scheme:dark only; }
    html.day { color-scheme:light only; }
    html, body { min-height:100%; min-height:100dvh; background-color:var(--canvas); }
    body {
      color:var(--ink);
      font-family:"IBM Plex Sans",system-ui,sans-serif;
      background:
        radial-gradient(900px 520px at 18% 8%, rgba(220,235,255,.32), transparent 42%),
        radial-gradient(760px 460px at 82% 12%, rgba(170,200,230,.26), transparent 40%),
        radial-gradient(900px 540px at 50% 110%, rgba(255,255,255,.16), transparent 46%),
        linear-gradient(180deg, #10151c, #07090d);
    }
    body.day {
      background:
        radial-gradient(900px 520px at 18% 8%, rgba(255,255,255,.9), transparent 46%),
        radial-gradient(760px 460px at 82% 12%, rgba(190,214,236,.55), transparent 42%),
        linear-gradient(180deg, #eef3f8, #b7c6d6);
    }
    .glow {
      position:fixed; inset:-18%; z-index:0; pointer-events:none;
      background:
        radial-gradient(circle at 28% 22%, rgba(230,242,255,.42), transparent 28%),
        radial-gradient(circle at 74% 18%, rgba(186,210,232,.34), transparent 26%),
        radial-gradient(circle at 52% 78%, rgba(255,255,255,.18), transparent 32%);
      filter:blur(12px);
      animation:drift 18s ease-in-out infinite alternate;
    }
    body.day .glow {
      background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,.7), transparent 30%),
        radial-gradient(circle at 74% 18%, rgba(200,220,236,.5), transparent 28%),
        radial-gradient(circle at 52% 78%, rgba(255,255,255,.35), transparent 34%);
    }
    @keyframes drift {
      from { transform:translate3d(-5%,-3%,0) scale(1); }
      to { transform:translate3d(6%,4%,0) scale(1.1); }
    }
    header, .hero, .pt-row, footer { position:relative; z-index:2; }
    header {
      position:sticky; top:0; z-index:30;
      display:grid; grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr);
      align-items:center; padding:14px 28px;
      background:var(--header);
      backdrop-filter:blur(22px) saturate(1.25);
      -webkit-backdrop-filter:blur(22px) saturate(1.25);
      border-bottom:8px solid var(--accent);
    }
    .brand {
      font-family:"IBM Plex Sans",system-ui,sans-serif;
      font-weight:700; letter-spacing:.2em; font-size:13px;
      text-transform:uppercase; justify-self:start; position:relative; z-index:2;
      opacity:0; transform:translateY(8px) scale(.86); pointer-events:none;
      transition:opacity .22s ease, transform .22s ease;
    }
    .brand.on { opacity:1; transform:none; pointer-events:auto; }
    .right { display:flex; align-items:center; gap:16px; justify-self:end; position:relative; z-index:2; }
    nav { display:flex; gap:18px; font-size:13px; color:var(--nav); }
    nav a.on, nav a:hover { color:var(--ink); }
    .mode { width:36px; height:36px; border-radius:50%; border:1px solid var(--accent); background:transparent; color:var(--accent); display:grid; place-items:center; cursor:pointer; }
    .mode svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    footer { max-width:1200px; margin:0 auto; padding:0 28px 40px; color:var(--foot); font-size:12px; }
    @media(max-width:860px){
      nav { display:none; }
      header { grid-template-columns:1fr auto; padding:12px 16px; }
    }
    /* Approved hero, variant 2: 1200px column, full-bleed chart from 1300px. */
    .hero{--h-ink:#f4f7fb;--h-mute:#c9d5e2;--h-label:#9aabbc;--up:#8FBC98;--down:#E07A7A;color:var(--h-ink)}
    .hero-fit{position:relative;width:100%;max-width:1200px;margin:0 auto;height:630px}
    .hero-box{position:absolute;left:0;top:0;width:1200px;height:630px;transform-origin:top left}
    .hero .site{font-size:17px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#b7c4d2}
    .hero .headline{font-weight:700;letter-spacing:-.045em;line-height:.95;color:#f4f7fb;text-shadow:0 0 18px rgba(210,228,248,.4),0 0 48px rgba(170,200,230,.25)}
    .hero .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#1f4fd6;border:2px solid #8eb0ff;color:#fff;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
    .hero .btn.slim{padding:12px 20px;font-size:17px;border-radius:12px;box-shadow:0 0 0 4px rgba(43,107,255,.14),0 10px 28px rgba(43,107,255,.35)}
    .hero .approved{font-size:15px;line-height:1.45;color:var(--h-mute)}
    .hero .up{color:var(--up);fill:var(--up)}.hero .down{color:var(--down);fill:var(--down)}
    .hero4 .hleft{position:absolute;left:56px;top:50px;width:640px;display:flex;flex-direction:column;gap:14px;z-index:3}
    .hero4 .headline{font-size:62px;white-space:nowrap}
    .hero4 .approved{max-width:560px;font-size:15px}
    .hero4 .btn{align-self:flex-start}
    .status{margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
    .status.open{color:var(--up)}.status.closed{color:#ffd479}
    .stack{position:absolute;right:44px;top:40px;width:300px;display:flex;flex-direction:column;gap:8px;z-index:4}
    .schip{display:grid;grid-template-columns:10px 40px 1fr auto auto;gap:8px;align-items:center;padding:9px 14px;border-radius:999px;background:rgba(8,14,28,.9);
      border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 18px color-mix(in srgb,var(--c) 22%,transparent);
      font-variant-numeric:tabular-nums;animation:floaty 3.4s ease-in-out infinite;animation-delay:var(--d)}
    .schip .sw{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
    .schip .sy{font-weight:700;color:var(--c);font-size:14px}
    .schip .nm{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--h-label);min-width:0}
    .schip .pr,.schip .pc{white-space:nowrap}
    .schip .pr{font-weight:700;font-size:15px}
    .schip .pc{font-weight:700;font-size:12px;min-width:54px;text-align:right}
    .schip.metal-closed{opacity:.78;border-style:dashed}
    .schip .closed-badge{font-size:9px;font-weight:800;letter-spacing:.14em;color:#ffd479;border:1px solid rgba(255,212,121,.45);border-radius:4px;padding:1px 5px;margin-left:6px}
    .stack .basket{display:flex;justify-content:flex-end;font-size:10.5px;color:var(--h-label);text-align:right;padding-right:8px;letter-spacing:.02em}
    @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    .herochart{position:absolute;left:24px;right:24px;bottom:22px;height:252px;z-index:1;border-radius:20px;overflow:hidden;isolation:isolate;
      background:radial-gradient(120% 95% at 10% -20%,rgba(200,222,255,.16),transparent 55%),radial-gradient(90% 80% at 105% 120%,rgba(142,176,255,.10),transparent 60%),
        linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 34%,rgba(255,255,255,.008) 66%,rgba(255,255,255,.035)),rgba(14,20,32,.36);
      -webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%);border:1px solid rgba(255,255,255,.09);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 30px rgba(142,176,255,.08),inset 0 10px 24px -14px rgba(255,255,255,.18),
        0 20px 44px rgba(0,0,0,.48),0 3px 8px rgba(0,0,0,.3)}
    .herochart::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;
      background:linear-gradient(165deg,rgba(255,255,255,.6),rgba(255,255,255,.12) 22%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 82%,rgba(255,255,255,.32));
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
    .herochart::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;mix-blend-mode:screen;
      background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.035) 45%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.035) 55%,transparent 62%) no-repeat;
      background-size:260% 100%;background-position:120% 0;animation:lg-sheen 16s ease-in-out infinite}
    @keyframes lg-sheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
    @media (prefers-reduced-motion:reduce){
      .herochart::after,.schip{animation:none}
    }
    .herochart svg{position:absolute;inset:0;width:100%;height:100%}
    svg.mch{display:none}
    svg.ch,svg.mch{font-family:"IBM Plex Sans",system-ui,sans-serif;overflow:visible}
    svg .zero{stroke:rgba(197,212,228,.4);stroke-width:1;stroke-dasharray:4 5}
    svg .dtick{stroke:rgba(197,212,228,.06);stroke-width:1}
    svg .closed{fill:rgba(197,212,228,.045)}
    svg .closed-t{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:rgba(154,171,188,.55)}
    svg .gaplink{fill:none;stroke-width:1.4;stroke-dasharray:2 4;opacity:.55}
    svg .xt{font-size:10px;font-weight:600;letter-spacing:.04em;fill:rgba(154,171,188,.8)}
    .hero4 .herochart svg .xt{fill:rgba(154,171,188,.65)}
    svg .xt.now,.hero4 .herochart svg .xt.now{fill:var(--h-mute)}
    svg .leader{fill:none;stroke-width:1;opacity:.6}
    svg .end{stroke:#07090d;stroke-width:2}
    svg .end.ping{animation:ping 2s ease-out infinite}
    @keyframes ping{0%{stroke-width:2;stroke-opacity:1}100%{stroke-width:14;stroke-opacity:0}}
    svg .endlbl2{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:#07090d;stroke-width:3px}
    html.fillchart .herochart svg.ch.hero{display:none}
    html.fillchart .herochart svg.mch{display:block}
    html.fillchart svg.mch .endlbl2{font-size:13px}
    html.fillchart svg.mch .xt{font-size:10px}
    html.fillchart svg.mch .closed-t{font-size:9px}
    @media (max-width:860px){
      .hero-fit{height:auto!important;max-width:none}
      .hero-box{position:relative;width:auto;height:auto;transform:none!important;padding:26px 16px 30px;display:flex;flex-direction:column;gap:22px}
      .hero4 .hleft{position:static;width:auto;gap:12px}
      .hero .site{font-size:12px;letter-spacing:.16em}
      .hero4 .headline{font-size:clamp(40px,12.6vw,62px);white-space:normal}
      .hero4 .btn{align-self:stretch}
      .hero .btn.slim{white-space:normal;text-align:center;font-size:16px;padding:13px 16px;line-height:1.25}
      .status{margin-top:2px}
      .stack{position:static;width:auto}
      .herochart{position:relative;left:auto;right:auto;bottom:auto;height:236px}
      .herochart svg.ch.hero{display:none}
      .herochart svg.mch{display:block}
      svg.mch .endlbl2{font-size:11px}
      svg.mch .xt{font-size:9.5px}
      svg.mch .closed-t{font-size:8px}
    }
    body.day .hero{--h-ink:#1c2732;--h-mute:#4a5d70;--h-label:#5b6e82;--up:#3F6B4A;--down:#B23B3B}
    body.day .hero .site{color:#4a5d70}
    body.day .hero .headline{color:#1c2732;text-shadow:0 0 24px rgba(255,255,255,.7),0 0 48px rgba(180,205,230,.45)}
    body.day .hero .btn{border-color:#0033aa}
    body.day .hero .btn.slim{box-shadow:0 0 0 4px rgba(0,51,170,.10),0 10px 24px rgba(0,51,170,.22)}
    body.day .status.closed{color:#8A5A12}
    body.day .stack .schip:nth-child(1){--c:#8A5A12!important}
    body.day .stack .schip:nth-child(2){--c:#4A6278!important}
    body.day .stack .schip:nth-child(3){--c:#3F6B4A!important}
    body.day .stack .schip:nth-child(4){--c:#4C3DB8!important}
    body.day .schip{background:rgba(255,255,255,.66);box-shadow:0 8px 22px rgba(40,60,90,.14),0 0 16px color-mix(in srgb,var(--c) 16%,transparent)}
    body.day .schip .sw{box-shadow:0 0 6px color-mix(in srgb,var(--c) 60%,transparent)}
    body.day .schip .closed-badge{color:#8A5A12;border-color:rgba(138,90,18,.45)}
    body.day .herochart{background:radial-gradient(120% 95% at 10% -20%,rgba(255,255,255,.7),transparent 55%),radial-gradient(90% 80% at 105% 120%,rgba(160,190,225,.22),transparent 60%),
        linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28) 40%,rgba(255,255,255,.22) 70%,rgba(255,255,255,.4)),rgba(236,242,248,.3);
      border-color:rgba(255,255,255,.65);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),inset 0 0 30px rgba(74,98,120,.08),0 20px 44px rgba(40,60,90,.18),0 3px 8px rgba(40,60,90,.1)}
    body.day .herochart::before{background:linear-gradient(165deg,#fff,rgba(255,255,255,.4) 22%,rgba(255,255,255,0) 50%,rgba(255,255,255,.3) 82%,rgba(255,255,255,.8))}
    body.day .hero svg [stroke="#E8C872"]{stroke:#8A5A12}body.day .hero svg [fill="#E8C872"]{fill:#8A5A12}
    body.day .hero svg [stroke="#C5D4E4"]{stroke:#4A6278}body.day .hero svg [fill="#C5D4E4"]{fill:#4A6278}
    body.day .hero svg [stroke="#8FBC98"]{stroke:#3F6B4A}body.day .hero svg [fill="#8FBC98"]{fill:#3F6B4A}
    body.day .hero svg [stroke="#8B7CFF"]{stroke:#4C3DB8}body.day .hero svg [fill="#8B7CFF"]{fill:#4C3DB8}
    body.day .hero svg .end{stroke:#eef3f8}
    body.day .hero svg .endlbl2{stroke:rgba(238,243,248,.92)}
    body.day .hero4 .herochart svg .xt{fill:rgba(74,93,112,.85)}
    body.day .hero4 .herochart svg .xt.now{fill:#1c2732}
    body.day .hero svg .zero{stroke:rgba(28,39,50,.35)}
    body.day .hero svg .dtick{stroke:rgba(28,39,50,.08)}
    body.day .hero svg .closed{fill:rgba(28,39,50,.06)}
    body.day .hero svg .closed-t{fill:rgba(74,93,112,.75)}
  

/* ===== CENTERED LOOKS (mock layer on top of the approved CSS) ===== */
.hc .hcenter{position:absolute;left:0;right:0;top:40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;z-index:5}
.hc .headline{font-size:62px;white-space:nowrap}
.hc .approved{max-width:590px;font-size:15px}
.hc .cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;width:100%;margin-top:4px}
.hc .cta-row .btn{grid-column:2}
.hc .cta-row .lp-cta{grid-column:3;justify-self:start;max-width:100%;height:auto;min-height:47px;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:7px 16px 7px 12px}
.lp-cta .tag{padding-left:30px;font-size:12px}
.hc .status{margin-top:0}
.off{display:none!important}
.ov .mob{display:none}

/* chips, centered */
.hc .stack{position:static;width:auto;display:flex;flex-direction:row;justify-content:center;gap:10px;margin-top:6px}
.hc .stack.row .schip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto;padding:8px 14px 8px 12px}
.hc .stack.row .schip .nm:not(:has(.closed-badge)){display:none}
.hc .stack.row .schip .nm{font-size:0;letter-spacing:0}
.hc .stack.row .schip .nm .closed-badge{font-size:9px;margin-left:0}
.hc .stack.grid{display:grid;grid-template-columns:repeat(2,300px);gap:8px 10px}
.hc .stack .schip{text-align:left}











.lp-cta{height:47px;padding:0 16px 0 12px;border-radius:12px}
.lp-cta .tro{width:22px;height:22px}.lp-cta .tro svg{width:13px;height:13px}

















/* chart overlays (inside the glass, above the sheen) */
.ov{position:absolute;z-index:3;font-size:10.5px;line-height:1.2;letter-spacing:.03em;color:var(--h-label);white-space:nowrap}
.ov.tl{left:16px;top:10px}.ov.tr{right:16px;top:10px;text-align:right}
.ov.cap{opacity:.8;font-weight:500}
.ov.cap.tr{color:var(--h-mute);opacity:.72}
/* look 2: caption strip under the chart window */
.cap-strip{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;justify-content:center;align-items:center;gap:10px;font-size:11px;letter-spacing:.03em;color:var(--h-label);white-space:nowrap}
.cap-strip .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.cap-strip::before,.cap-strip::after{content:"";width:48px;height:1px;background:linear-gradient(90deg,transparent,rgba(197,212,228,.3))}
.cap-strip::after{transform:scaleX(-1)}
/* look 4: info icon + tooltip */
.ov.info{display:flex;align-items:center;gap:8px;white-space:normal}
.ibtn{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;cursor:help;padding:0;font:italic 700 12px/1 Georgia,"Times New Roman",serif;color:var(--h-mute);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ibtn:hover,.ibtn:focus-visible,.ov.info.open .ibtn{color:var(--h-ink);border-color:rgba(255,255,255,.5);outline:none}
.ov.info .stamp{font-size:10px;opacity:.6;white-space:nowrap}
.tip{position:absolute;left:0;top:30px;width:280px;padding:10px 12px;border-radius:12px;font-size:11.5px;line-height:1.45;letter-spacing:0;color:var(--h-ink);white-space:normal;
  background:rgba(10,16,28,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .16s,transform .16s}
.tip b{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--h-label);margin-bottom:3px}
.ov.info:hover .tip,.ov.info.open .tip,.ibtn:focus-visible+.stamp+.tip{opacity:1;transform:none}
/* look 5: tiny line under chips */
.under-chips{font-size:10.5px;letter-spacing:.03em;color:var(--h-label);margin-top:-2px}
.under-chips .sep{opacity:.5;margin:0 6px}
svg .xt.lx{fill:rgba(154,171,188,.65);font-style:italic}


body.day .ibtn{background:rgba(255,255,255,.6);border-color:rgba(74,98,120,.3)}
body.day .tip{background:rgba(255,255,255,.94);border-color:rgba(74,98,120,.2);box-shadow:0 12px 28px rgba(40,60,90,.18)}
body.day .cap-strip::before,body.day .cap-strip::after{background:linear-gradient(90deg,transparent,rgba(74,98,120,.35))}
body.day svg .xt.lx{fill:rgba(74,93,112,.8)}
/* mobile: centered stack */
@media (max-width:860px){
  .hc .hcenter{position:static;gap:12px}
  .hc .headline{font-size:clamp(40px,12.6vw,62px);white-space:normal}
  .hc .cta-row{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:10px}
  .hc .cta-row .btn{align-self:stretch}
  .hc .cta-row .lp-cta{align-self:center;height:34px;border-radius:999px;padding:0 13px 0 9px}
  .hc .cta-row .lp-cta .tro{width:18px;height:18px}
  .hc .stack,.hc .stack.row,.hc .stack.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:4px}
  .hc .stack .schip,.hc .stack.row .schip{grid-auto-flow:row;grid-template-columns:10px auto 1fr;grid-template-areas:"sw sy pc" "pr pr nm";row-gap:3px;column-gap:7px;padding:9px 12px;border-radius:14px}
  .hc .stack .schip .sw{grid-area:sw}.hc .stack .schip .sy{grid-area:sy}.hc .stack .schip .pc{grid-area:pc;min-width:0}
  .hc .stack .schip .pr{grid-area:pr;font-size:14px}
  .hc .stack .schip .nm{grid-area:nm;font-size:0;justify-self:end;display:block}
  .hc .stack .schip .nm .closed-badge{font-size:8.5px;margin-left:0}
  .ov .mob{display:inline}.ov .dsk{display:none}




  .cap-strip{position:static;flex-wrap:wrap;white-space:normal;gap:4px 8px;font-size:10.5px;margin-top:-12px;text-align:center}
  .cap-strip::before,.cap-strip::after{display:none}
  .ov{font-size:9.5px}.ov.tl{left:12px;top:9px}.ov.tr{right:12px;top:9px}
  .tip{width:min(260px,calc(100vw - 72px))}
  .under-chips{display:flex;flex-direction:column;gap:2px;font-size:10.5px}
  .under-chips .sep{display:none}
}

/* ===== LOOK 5 final: breathing room ===== */
.hc .hcenter{gap:0}
/* desktop: generous vertical rhythm, values set per viewport by fit() (1440 defaults shown) */
.hc .site{margin-bottom:var(--g-kick,64px)}
.hc .headline{margin-bottom:var(--g-head,44px)}
.hc .approved{margin-bottom:var(--g-sub,48px)}
.hc .cta-row{margin-top:0;margin-bottom:var(--g-cta,56px)}
.hc .stack{margin-top:0;margin-bottom:14px}
.hc .under-chips{margin-top:0;font-size:10.5px;opacity:.72}
@media (max-width:860px){
  .hero-box{padding:40px 16px 36px;gap:28px}
  .hc .hcenter{gap:0}
  .hc .site{margin-bottom:14px}
  .hc .headline{margin-bottom:16px}
  .hc .approved{margin-bottom:24px}
  .hc .cta-row{margin-bottom:20px}
  .hc .stack{margin-bottom:10px}
  .hc .under-chips{opacity:1}
}

/* ===== LOOK 5d: the site name is the hero ===== */
/* site name: desktop size set by fit() via --kick-size (72px at 1440 -> 96px at 1920+); glow radii are in em so they scale with it */
.hc .site{
  font-size:var(--kick-size,72px);font-weight:600;letter-spacing:.07em;line-height:1.04;white-space:nowrap;
  padding-left:.07em; /* balances the trailing letter-space so the wordmark sits on the true center */
  color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,#d3dfeb 0%,#d3dfeb 42%,#ffffff 50%,#d3dfeb 58%,#d3dfeb 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 .1em rgba(220,235,255,.34)) drop-shadow(0 0 .4em rgba(170,200,235,.16));
  animation:kick-breathe 5s ease-in-out infinite,kick-sweep 9s ease-in-out infinite;
  will-change:filter,background-position
}
@keyframes kick-breathe{
  0%,100%{filter:drop-shadow(0 0 .1em rgba(220,235,255,.34)) drop-shadow(0 0 .4em rgba(170,200,235,.16))}
  50%{filter:drop-shadow(0 0 .17em rgba(232,242,255,.56)) drop-shadow(0 0 .65em rgba(180,210,242,.3))}
}
/* a faint light sweep crosses the letters in the first ~2.7s of every 9s, then rests */
@keyframes kick-sweep{0%{background-position:100% 0}30%,100%{background-position:0% 0}}
body.day .hc .site{
  background-image:linear-gradient(100deg,#344a5e 0%,#344a5e 42%,#8098b0 50%,#344a5e 58%,#344a5e 100%);
  filter:drop-shadow(0 0 .07em rgba(255,255,255,.9)) drop-shadow(0 0 .35em rgba(74,98,120,.18));
  animation-name:kick-breathe-day,kick-sweep
}
@keyframes kick-breathe-day{
  0%,100%{filter:drop-shadow(0 0 .07em rgba(255,255,255,.9)) drop-shadow(0 0 .35em rgba(74,98,120,.18))}
  50%{filter:drop-shadow(0 0 .12em rgba(255,255,255,1)) drop-shadow(0 0 .55em rgba(74,98,120,.3))}
}
/* tagline: big, but always under the site name (<= 1/1.45 of its size), less glow */
.hc .headline{font-size:var(--tag-size,56px);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:#eef3f9;white-space:nowrap;
  text-shadow:0 0 .3em rgba(210,228,248,.28),0 0 .75em rgba(170,200,230,.14)}
body.day .hc .headline{color:#22303d;text-shadow:0 0 .3em rgba(255,255,255,.6),0 0 .8em rgba(180,205,230,.3)}
.hc .approved{font-size:16px}
@media (prefers-reduced-motion:reduce){
  .hc .site{animation:none;filter:drop-shadow(0 0 .13em rgba(226,238,255,.45)) drop-shadow(0 0 .5em rgba(175,205,238,.22))}
  body.day .hc .site{animation:none;filter:drop-shadow(0 0 .1em rgba(255,255,255,.95)) drop-shadow(0 0 .45em rgba(74,98,120,.24))}
}
/* mobile: the wordmark is as big as fits on one line (14.2em wide at .02em tracking), tagline drops below it */
@media (max-width:860px){
  .hc .site{font-size:min(32px,calc((100vw - 24px) / 14.25));letter-spacing:.02em;padding-left:.02em;margin:0 -4px 14px}
  .hc .headline{font-size:min(27px,calc((100vw - 24px) / 14.25 * .82));white-space:nowrap;margin-bottom:16px}
  .hc .approved{font-size:15px}
}

/* ===== LOOK 5f: bigger supporting text; legend becomes the chart's caption ===== */
.hc .stack{margin-bottom:var(--g-leg,64px)}
.hc .approved{font-size:var(--p-size,20px);line-height:1.45;max-width:37em;color:#dbe4ee}
body.day .hc .approved{color:#3a4d60}
.hc .cta-row .btn.slim{font-size:var(--cta-size,20px);padding:.7em 1.3em;border-radius:.68em;
  box-shadow:0 0 0 .22em rgba(43,107,255,.14),0 .55em 1.5em rgba(43,107,255,.38)}
body.day .hc .cta-row .btn.slim{box-shadow:0 0 0 .22em rgba(0,51,170,.10),0 .55em 1.3em rgba(0,51,170,.22)}
.hc .under-chips{font-size:var(--leg-size,15px);letter-spacing:.02em;opacity:.85;color:var(--h-label)}
@media (max-width:860px){
  .hero-box{gap:12px}
  .hc .approved{font-size:16px;max-width:none}
  .hc .cta-row .btn.slim{font-size:17px;padding:13px 16px;border-radius:12px}
  .hc .stack{margin-bottom:22px}
  .hc .under-chips{font-size:12.5px;opacity:1}
}

/* ===== LOOK 5h/5i: premium UI pass + spacing system (loaded last; overrides look5.css / approved.css) =====
   5i spacing scale (8px base): 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160, as --s1..--s20 below */

/* ---------- 1. background: one cool spotlight behind the wordmark, deep near-black, soft vignette, faint grain ---------- */
:root{--canvas:#05070a}
:root.day,body.day{--canvas:#e9eef3}
body{background:#05070a}
body.day{background:linear-gradient(180deg,#f3f6f9 0%,#e9eef3 40%,#e2e8ef 100%)}
body{position:relative}
.glow{position:absolute;inset:0;z-index:0;filter:none;animation:none;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 1100px at 50% 300px,transparent 45%,rgba(0,0,0,.38) 100%),
    radial-gradient(ellipse 760px 440px at 50% 250px,rgba(156,184,228,.14),rgba(156,184,228,.105) 20%,rgba(156,184,228,.065) 40%,rgba(156,184,228,.03) 62%,rgba(156,184,228,.01) 82%,transparent 100%),
    radial-gradient(ellipse 90% 900px at 50% 160px,rgba(64,86,122,.12),transparent 70%),
    linear-gradient(180deg,#0a0d13 0px,#06080c 900px,#05070a 1600px)}
.glow::after{content:"";position:absolute;inset:0;opacity:.42;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
body.day .glow{background:
    radial-gradient(ellipse 78% 1100px at 50% 300px,transparent 50%,rgba(60,80,105,.08) 100%),
    radial-gradient(ellipse 52% 420px at 50% 250px,rgba(255,255,255,.95),rgba(255,255,255,.7) 20%,rgba(255,255,255,.42) 42%,rgba(255,255,255,.18) 64%,rgba(255,255,255,.05) 84%,transparent 100%),
    radial-gradient(ellipse 90% 900px at 50% 160px,rgba(214,226,240,.5),transparent 70%)}
body.day .glow::after{opacity:.5;mix-blend-mode:soft-light}

/* ---------- 2. header: hairline that fades at the edges ---------- */
header{border-bottom:0;background:rgba(5,7,10,.38)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(200,216,236,.10) 18%,rgba(214,228,244,.34) 50%,rgba(200,216,236,.10) 82%,transparent 100%)}
body.day header{background:rgba(243,246,249,.55)}
body.day header::after{background:linear-gradient(90deg,transparent 0%,rgba(60,82,106,.10) 18%,rgba(60,82,106,.30) 50%,rgba(60,82,106,.10) 82%,transparent 100%)}
nav{letter-spacing:.01em}
nav a{transition:color .18s}
.mode{border-color:rgba(214,228,244,.22);color:#c9d6e3;transition:border-color .18s,background .18s}
.mode:hover{border-color:rgba(214,228,244,.45);background:rgba(255,255,255,.04)}
body.day .mode{border-color:rgba(28,39,50,.18);color:#3a4d60}
.mode:focus-visible,nav a:focus-visible,.brand:focus-visible{outline:2px solid #8fb2ff;outline-offset:3px;border-radius:6px}

/* ---------- 3. wordmark: crisp metallic fill, tight halo + wide bloom (breathes by opacity only), narrow light sweep ---------- */
.hc .hcenter{--ws:clamp(64px,5vw,116px);--g-lock:clamp(20px,1.75vw,40px);--g-sec:clamp(32px,2.8vw,60px)}
.hc .site{position:relative;display:grid;font-size:var(--ws);font-weight:700;letter-spacing:.06em;padding-left:.06em;line-height:1.08;
  margin-bottom:var(--g-lock);background:none;filter:none;animation:none;will-change:auto;color:inherit;-webkit-text-fill-color:currentColor}
.hc .site>span{grid-area:1/1;white-space:nowrap}
.hc .site-halo{position:relative;z-index:0}
.hc .site-ink{position:relative;z-index:1}
.hc .site-ink{
  color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:
    linear-gradient(104deg,transparent 0%,transparent 46.4%,rgba(255,255,255,.35) 48%,rgba(255,255,255,.95) 49.5%,#fff 50%,rgba(255,255,255,.95) 50.5%,rgba(255,255,255,.35) 52%,transparent 53.6%,transparent 100%),
    linear-gradient(180deg,#f2f6fa 0%,#e4ebf3 32%,#cbd6e2 54%,#a7b6c8 76%,#bfccd9 100%);
  background-size:200% 100%,100% 100%;background-repeat:no-repeat;background-position:120% 0,0 0;
  animation:ws-sweep 9s cubic-bezier(.42,0,.58,1) infinite}
.hc .site-halo{color:transparent;-webkit-text-fill-color:transparent;user-select:none;pointer-events:none;
  text-shadow:0 0 .045em rgba(236,244,255,.55),0 0 .2em rgba(182,206,240,.22),0 0 .9em rgba(130,165,225,.16);
  opacity:.8;animation:ws-breathe 6s ease-in-out infinite}
@keyframes ws-breathe{0%,100%{opacity:.62}50%{opacity:1}}
/* a narrow light band crosses left->right over ~3.6s, then rests off the letters (one slow pass every 9s) */
@keyframes ws-sweep{0%{background-position:120% 0,0 0}40%,100%{background-position:-20% 0,0 0}}
body.day .hc .site{background:none;filter:none;animation:none}
body.day .hc .site-ink{background-image:
    linear-gradient(104deg,transparent 0%,transparent 46.4%,rgba(190,210,230,.3) 48%,rgba(214,228,242,.85) 49.5%,rgba(232,240,248,.95) 50%,rgba(214,228,242,.85) 50.5%,rgba(190,210,230,.3) 52%,transparent 53.6%,transparent 100%),
    linear-gradient(180deg,#5d7085 0%,#3e4f61 38%,#243241 62%,#3b4c5e 100%)}
body.day .hc .site-halo{text-shadow:0 .02em .02em rgba(255,255,255,.9),0 0 .3em rgba(255,255,255,.75),0 .18em .7em rgba(60,84,112,.12)}

/* headline: big, crisp, clearly second */
.hc .headline{font-size:calc(var(--ws) * .72);font-weight:700;letter-spacing:-.03em;line-height:1.06;color:#eef3f9;margin-bottom:var(--g-sec);
  text-shadow:0 0 .8em rgba(160,190,230,.12)}
body.day .hc .headline{color:#18232e;text-shadow:none}

/* subcopy */
.hc .approved{font-size:clamp(17px,1.3vw,24px);line-height:1.5;max-width:35em;color:#aebbc9;margin-bottom:var(--g-sec);text-wrap:balance}
body.day .hc .approved{color:#43566a}

/* ---------- 5. CTA: refined gradient, inner top highlight, soft shadow, clear hover/focus ---------- */
.hc .cta-row{margin-bottom:var(--g-sec)}
.hero .btn,.hc .cta-row .btn.slim{display:inline-block;text-align:center;line-height:1.2;gap:0;font-size:clamp(16px,1.2vw,22px);font-weight:600;letter-spacing:-.005em;padding:.95em 1.6em;border-radius:.75em;border:0;color:#fff;
  background:linear-gradient(180deg,#4f84ff 0%,#2f63f0 48%,#2453d8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,10,60,.25),0 0 0 1px rgba(26,60,170,.55),0 2px 4px rgba(0,0,0,.35),0 14px 32px -12px rgba(36,92,255,.55);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.hc .cta-row .btn .arr{display:inline-block;margin-left:.08em;transition:transform .18s ease}
.hc .cta-row .btn:hover{filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,10,60,.25),0 0 0 1px rgba(26,60,170,.6),0 3px 6px rgba(0,0,0,.35),0 18px 40px -12px rgba(36,92,255,.65)}
.hc .cta-row .btn:hover .arr{transform:translateX(3px)}
.hc .cta-row .btn:active{transform:translateY(0);filter:brightness(.98)}
.hc .cta-row .btn:focus-visible{outline:2px solid #a9c4ff;outline-offset:4px}
body.day .hc .cta-row .btn.slim{box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,10,60,.2),0 0 0 1px rgba(26,60,170,.45),0 2px 4px rgba(20,40,90,.16),0 14px 28px -12px rgba(36,92,255,.45)}
body.day .hc .cta-row .btn:focus-visible{outline-color:#1d47c9}

/* ---------- 6. chips: one glass bar, four segments, hairline dividers, colour only on dot/symbol and on the % ---------- */
.hc .stack,.hc .stack.row{gap:0;margin:0;padding:0 6px;border-radius:999px;font-size:clamp(14px,1.04vw,19px);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)),rgba(12,16,24,.5);
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 30px -14px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hc .stack .schip,.hc .stack.row .schip{position:relative;background:none;border:0;box-shadow:none;border-radius:0;animation:none;
  display:flex;align-items:center;gap:.55em;padding:.78em 1.35em;font-size:1em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hc .stack .schip+.schip::before{content:"";position:absolute;left:0;top:28%;bottom:28%;width:1px;background:rgba(255,255,255,.09)}
.hc .stack .schip .sw{width:.4em;height:.4em;box-shadow:none;flex:none}
.hc .stack .schip .sy{font-size:.8em;font-weight:600;letter-spacing:.04em;color:var(--c)}
.hc .stack .schip .pr{font-size:1em;font-weight:600;color:#eef3f8;letter-spacing:-.005em}
.hc .stack .schip .pc{font-size:.8em;font-weight:500;min-width:0;letter-spacing:.01em}
.hc .stack .schip.metal-closed{opacity:.72;border-style:none}
body.day .hc .stack{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.55));border-color:rgba(28,39,50,.09);
  box-shadow:inset 0 1px 0 #fff,0 10px 26px -14px rgba(40,60,90,.28)}
body.day .hc .stack .schip{background:none;box-shadow:none}
body.day .hc .stack .schip+.schip::before{background:rgba(28,39,50,.10)}
body.day .hc .stack .schip .pr{color:#1a2530}

/* ---------- 7/8. chart: as-of label lives inside the frame; hairline glass, subtle top highlight, crisp thin lines ---------- */
.herochart{border-radius:18px;border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012) 40%,rgba(255,255,255,.02)),rgba(10,14,21,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -28px rgba(0,0,0,.75)}
.herochart::before{background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 22%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.05))}
.herochart::after{background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.018) 47%,rgba(255,255,255,.035) 50%,rgba(255,255,255,.018) 53%,transparent 58%) no-repeat;background-size:260% 100%}
.herochart .ov.asof{left:20px;top:16px;font-size:11px;font-weight:500;letter-spacing:.04em;color:#8494a6;opacity:1}
svg .zero{stroke:rgba(197,212,228,.16);stroke-dasharray:3 6}
svg .dtick{stroke:rgba(197,212,228,.045)}
svg .closed{fill:rgba(197,212,228,.028)}
svg .closed-t,html.fillchart svg.mch .closed-t{font-size:8.5px;letter-spacing:.16em;fill:rgba(154,171,188,.42)}
svg .xt,.hero4 .herochart svg .xt{fill:rgba(140,156,174,.78);font-weight:500}
svg .xt.now,.hero4 .herochart svg .xt.now{fill:#b6c3d1;font-weight:600}
svg .endlbl2,html.fillchart svg.mch .endlbl2{font-size:12.5px;font-weight:600;stroke:#0a0d13;stroke-width:3px;letter-spacing:.01em}
svg .end{stroke:#0a0d13;stroke-width:1.5}
svg .leader{opacity:.45}
svg .gaplink{stroke-width:1;opacity:.4}
body.day .herochart{border-color:rgba(28,39,50,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.6)),rgba(240,244,248,.5);
  box-shadow:inset 0 1px 0 #fff,0 26px 50px -28px rgba(40,60,90,.35)}
body.day .herochart::before{background:linear-gradient(180deg,#fff,rgba(255,255,255,.3) 25%,rgba(255,255,255,0) 60%,rgba(255,255,255,.4))}
body.day .herochart .ov.asof{color:#5b6e82}
body.day .hero svg .zero{stroke:rgba(28,39,50,.2)}
body.day .hero svg .dtick{stroke:rgba(28,39,50,.06)}
body.day .hero svg .closed{fill:rgba(28,39,50,.035)}
body.day .hero svg .closed-t{fill:rgba(74,93,112,.6)}
body.day .hero svg .end{stroke:#f6f8fa}
body.day .hero svg .endlbl2{stroke:rgba(248,250,252,.95)}
body.day .hero4 .herochart svg .xt{fill:rgba(74,93,112,.75)}

/* ---------- 9. element tiles: hairline, faint asset tint, coloured symbol, small muted number/name ---------- */
.pt-row{max-width:880px;margin:0 auto;padding:clamp(72px,6vw,112px) 28px 0;gap:16px;grid-template-columns:repeat(6,1fr)}
.pt-door{position:relative;padding:12px 13px 12px;border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.06));border-radius:10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent) 2%,transparent)),rgba(10,13,19,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px -16px rgba(0,0,0,.8);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.pt-door:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px -16px color-mix(in srgb,var(--accent) 45%,rgba(0,0,0,.8))}
.pt-door:focus-visible{outline:2px solid #8fb2ff;outline-offset:3px}
.pt-door .z{font-size:10.5px;font-weight:500;letter-spacing:.06em;color:rgba(200,212,226,.5);font-variant-numeric:tabular-nums}
.pt-door .sym{font-size:clamp(30px,2.6vw,40px);font-weight:600;letter-spacing:-.03em;color:var(--sym,var(--accent));line-height:1}
.pt-door .nm{font-size:9px;font-weight:600;letter-spacing:.16em;color:rgba(200,212,226,.55)}
.pt-door.gold{--sym:#ecd08a}.pt-door.silver{--sym:#e1e9f1}.pt-door.btc{--sym:#a4cfad}
.pt-door.eth{--sym:#a89cff}.pt-door.ai{--sym:#efe6d6}.pt-door.arena{--accent:#4a7dff;--sym:#86a9ff}
body.day .pt-door{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.85)),rgba(255,255,255,.6));
  border-color:color-mix(in srgb,var(--accent) 22%,rgba(28,39,50,.06));box-shadow:inset 0 1px 0 #fff,0 8px 20px -14px rgba(40,60,90,.3)}
body.day .pt-door .z,body.day .pt-door .nm{color:rgba(40,56,72,.6)}
body.day .pt-door{--sym:var(--accent)}
body.day .pt-door.arena{--accent:#1d47c9}

/* ---------- 10. footer: centred, small, muted ---------- */
footer{max-width:none;text-align:center;padding:64px 24px 48px;font-size:12px;letter-spacing:.02em;color:#77859a}
footer .foot-rule{display:block;width:96px;height:1px;margin:0 auto 24px;background:linear-gradient(90deg,transparent,rgba(200,216,236,.22),transparent)}
body.day footer{color:#4f6276}
body.day footer .foot-rule{background:linear-gradient(90deg,transparent,rgba(60,82,106,.28),transparent)}

/* ---------- reduced motion: no breathe, sweep, sheen, ping or float ---------- */
@media (prefers-reduced-motion:reduce){
  .hc .site,.hc .site-ink,.hc .site-halo,body.day .hc .site,.herochart::after,.schip,svg .end.ping{animation:none!important}
  .hc .site-ink{background-position:-20% 0,0 0}
  .hc .site-halo{opacity:.85}
  .pt-door,.hc .cta-row .btn,.hc .cta-row .btn .arr{transition:none}
}

/* ---------- phones ---------- */
@media (max-width:860px){
  .glow{height:1100px;background:
    radial-gradient(ellipse 120% 300px at 50% 120px,rgba(150,178,222,.11),transparent 100%),
    linear-gradient(180deg,#0a0d13 0%,#06080c 55%,#05070a 100%)}
  body.day .glow{background:radial-gradient(ellipse 120% 300px at 50% 120px,rgba(255,255,255,.95),transparent 100%)}
  .hero-box{padding:40px 16px 24px;gap:24px}
  .hc .hcenter{--g-lock:8px;--g-sec:24px}
  .hc .site{font-size:min(30px,calc((100vw - 32px) / 14.9));letter-spacing:.05em;padding-left:.05em;margin:0 0 var(--g-lock)}
  .hc .headline{font-size:min(26px,calc((100vw - 32px) / 14.9 * .86));white-space:nowrap;margin-bottom:16px}
  .hc .approved{font-size:15px;max-width:none;margin-bottom:var(--g-sec)}
  .hc .cta-row{margin-bottom:var(--g-sec)}
  .hc .cta-row .btn.slim{display:block;text-align:center;font-size:16px;padding:14px 18px;border-radius:12px;white-space:normal;line-height:1.35}
  .hc .cta-row .btn .nw{white-space:nowrap}
  .hc .cta-row .btn .arr{margin-left:.04em}
  .hc .stack .schip .nm:not(:has(.closed-badge)){display:none}
  .hc .stack .schip .nm{grid-area:auto}
  .hc .stack,.hc .stack.row{display:grid;grid-template-columns:1fr 1fr;padding:0;border-radius:14px;font-size:14px;width:100%}
  .hc .stack .schip,.hc .stack.row .schip{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"sw sy pc" "pr pr pr";column-gap:7px;row-gap:4px;padding:11px 14px;border-radius:0}
  .hc .stack .schip .pc{justify-self:end}
  .hc .stack .schip .pr{font-size:15px}
  .hc .stack .schip+.schip::before{display:none}
  .hc .stack .schip:nth-child(2n){border-left:1px solid rgba(255,255,255,.08)}
  .hc .stack .schip:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
  body.day .hc .stack .schip:nth-child(2n){border-left-color:rgba(28,39,50,.09)}
  body.day .hc .stack .schip:nth-child(n+3){border-top-color:rgba(28,39,50,.09)}
  .herochart{border-radius:14px}
  .herochart .ov.asof{left:12px;top:10px;font-size:9.5px}
  .pt-row{grid-template-columns:repeat(3,1fr);gap:10px;padding:40px 16px 0}
  .pt-door{padding:9px 10px 10px;aspect-ratio:1}
  .pt-door .sym{font-size:clamp(24px,8vw,32px)}
  .pt-door .z{font-size:9.5px}
  .pt-door .nm{font-size:8px;letter-spacing:.12em}
  footer{padding:48px 16px 40px}
}

/* =====================================================================
   LOOK 5i: spacing system. Benchmarks in benchmarks-spacing.md
   (Stripe 104px gutter / 1232 column, Linear 80 / 1280, Arc 120 / 1200; section rhythm 128 to 256)
   ===================================================================== */
:root{
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;--s16:128px;--s20:160px;
  /* content column: 1232 up to 1920, then grows gently to 1552 on ultra-wide; gutters never under 64 */
  --container:clamp(1232px,calc(1232px + (100vw - 1920px) * .5),1552px);
  --gut:max(var(--s8),calc((100vw - var(--container)) / 2));
  /* section gap: 128 @1440, 96 to 160 */
  --sec:clamp(var(--s12),8.889vw,var(--s20));
}
/* header aligns to the same column as the content */
header{padding:var(--s2) var(--gut)}
.right{gap:var(--s3)}
nav{gap:var(--s3)}

/* hero groups, deliberately unequal so it reads as three units rather than a stack:
   [wordmark + headline] lockup 40 · group break 64 · [subcopy + CTA] 32 · CTA→live chips 48   (all @1440, scaled with vw) */
.hc .hcenter{--g-lock:clamp(var(--s4),2.778vw,56px);--g-brk:clamp(var(--s6),4.444vw,96px);--g-pair:clamp(var(--s3),2.222vw,var(--s6));--g-sec:clamp(40px,3.333vw,var(--s8))}
.hc .headline{margin-bottom:var(--g-brk)}
.hc .approved{margin-bottom:var(--g-pair)}
.hc .cta-row{margin-bottom:var(--g-sec)}

/* CTA: 16 / 48 @1440 */
.hero .btn,.hc .cta-row .btn.slim{padding:clamp(14px,1.111vw,var(--s3)) clamp(var(--s4),3.333vw,var(--s8));line-height:1.45;border-radius:14px}

/* chips: roomier segments, 16 / 32 @1440 */
.hc .stack,.hc .stack.row{padding:0 var(--s1)}
.hc .stack .schip,.hc .stack.row .schip{padding:clamp(14px,1.111vw,var(--s3)) clamp(var(--s3),2.222vw,40px);gap:.6em}
.hc .stack .schip+.schip::before{top:30%;bottom:30%}

/* chart frame: 32px inner padding for the caption (labels and ticks are padded in hero-look5.js) */
.herochart{border-radius:20px}
.herochart .ov.asof{left:var(--s4);top:var(--s3)}

@media (min-width:861px){
  html.fillchart svg.mch .endlbl2{font-size:calc(12.5px * var(--cs,1))}
  html.fillchart svg.mch .xt{font-size:calc(10px * var(--cs,1))}
  html.fillchart svg.mch .closed-t{font-size:calc(8.5px * var(--cs,1))}
  .herochart .ov.asof{font-size:calc(11px * var(--cs,1));left:calc(var(--s4) * var(--cs,1));top:calc(var(--s3) * var(--cs,1))}
}

/* tiles: a narrower centred row, 24 gaps, 24 inner padding; section gap above */
.pt-row{max-width:none;width:min(1040px,calc(100% - 2 * var(--gut)));margin:0 auto;padding:var(--sec) 0 0;gap:var(--s3)}
.pt-door{padding:var(--s3);border-radius:14px}
.pt-door .sym{font-size:clamp(32px,2.9vw,48px)}
.pt-door .z{font-size:11px}
.pt-door .nm{font-size:9.5px}

/* footer: more room above (160 @1440) */
footer{padding:var(--s20) var(--gut) var(--s8)}
footer .foot-rule{margin-bottom:var(--s4)}

/* short-and-wide frames such as the 1200x630 X card: tighten in-hero gaps so wordmark, headline, CTA and chips all fit */
@media (min-width:861px) and (max-height:700px){
  .hc .hcenter{--g-lock:var(--s3);--g-brk:var(--s4);--g-pair:var(--s3);--g-sec:var(--s3)}
  .hc .stack .schip,.hc .stack.row .schip{padding-top:12px;padding-bottom:12px}
  .hero .btn,.hc .cta-row .btn.slim{padding-top:12px;padding-bottom:12px}
}

/* phones: the same scale, proportionally smaller */
@media (max-width:860px){
  :root{--gut:20px;--sec:var(--s8)}
  header{padding:12px var(--gut)}
  .hero-box{padding:var(--s6) var(--gut) 0;gap:var(--s6)}
  .hc .hcenter{--g-lock:12px;--g-brk:var(--s4);--g-pair:var(--s3);--g-sec:var(--s3)}
  .hc .cta-row .btn.slim{padding:var(--s2) 20px;border-radius:14px}
  .hc .stack .schip,.hc .stack.row .schip{padding:12px var(--s2)}
  .herochart .ov.asof{left:var(--s2);top:14px}
  .pt-row{width:calc(100% - 2 * var(--gut));padding:var(--sec) 0 0;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pt-door{padding:12px;border-radius:12px;min-width:0}
  .pt-door .sym{font-size:clamp(24px,8vw,32px)}
  footer{padding:var(--s12) var(--gut) var(--s6)}
}
@media (max-width:359px){
  :root{--gut:16px}
  .pt-row{gap:var(--s1)}
  .pt-door{padding:10px}
  .pt-door .nm{font-size:7.5px;letter-spacing:.06em}
}

/* =====================================================================
   LOOK 5j/5k: chart header (desktop only; phones are locked)
   5k: the glass chip bar IS the legend. It straddles the chart frame's top edge, centred (JS seats it in .hero-box);
   the as-of caption sits centred under it inside the frame; line ends are dots; hovering a chip lifts its line
   ===================================================================== */
@media (min-width:861px){
  .hero-box>.stack,.hero-box>.stack.row{position:absolute;left:50%;width:max-content;transform:translateX(-50%);z-index:6;margin:0;
    /* opaque enough to read over the frame border, still glass */
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)),rgba(11,15,22,.82);
    border-color:rgba(255,255,255,.11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 6px rgba(5,7,10,.55),0 14px 34px -14px rgba(0,0,0,.85)}
  .hero-box>.stack .schip{cursor:default;transition:opacity .2s ease}
  .hero-box>.stack.hl .schip:not(.on){opacity:.4}
  body.day .hero-box>.stack{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));border-color:rgba(28,39,50,.10);
    box-shadow:inset 0 1px 0 #fff,0 0 0 6px rgba(233,238,243,.7),0 12px 28px -14px rgba(40,60,90,.32)}
  /* the CTA now closes the hero group */
  .hc .hcenter .cta-row{margin-bottom:0}
  /* caption: centred under the bar, muted (top is set by JS from the bar height) */
  .herochart .ov.asof{left:50%;right:auto;transform:translateX(-50%);color:#7d8da0;letter-spacing:.03em}
  body.day .herochart .ov.asof{color:#5b6e82}
  /* hover highlight */
  svg.mch .ln,svg.mch .gaplink,svg.mch .end{transition:opacity .2s ease}
  svg.mch .ln.dim{opacity:.16}
  svg.mch .gaplink.dim{opacity:.08}
  svg.mch .end.dim,svg.mch .end-halo.dim,svg.mch .ring.dim{opacity:.2}
  /* dots-only line ends: crisp coloured dot, soft tinted halo, coloured ping ring for markets that are open */
  svg.mch .end.dot{stroke:#0a0d13;stroke-width:1.5}
  svg.mch .end-halo{opacity:.16;transition:opacity .2s ease}
  svg.mch .ring{stroke-width:1.25;transform-box:fill-box;transform-origin:center;animation:ring 2.4s ease-out infinite}
  @keyframes ring{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.4);opacity:0}}
  body.day svg.mch .end.dot{stroke:#f6f8fa}
  body.day svg.mch .end-halo{opacity:.14}
  /* 5k description: +2px at 1440 (18.7 -> 20.4), up to 28 on ultra-wide; balanced, always two lines */
  .hc .approved{font-size:clamp(19px,1.42vw,28px);max-width:33em;line-height:1.5}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){
  .hero-box>.stack .schip,svg.mch .ln,svg.mch .gaplink,svg.mch .end,svg.mch .end-halo{transition:none}
  svg.mch .ring{animation:none;display:none}
}

/* =====================================================================
   LOOK 5m: Jordan's layout (layout editor, measured at 1440). Desktop only; phones are locked.
   Hero values are tied to the wordmark size --ws (72 @1440; clamp(64px,5vw,116px), shrunk by fit() to the container,
   so 64 @1280, 83 @1920, 104 @2560), so the whole hero lockup scales as one piece and 1440 lands exactly on:
     wordmark→tagline 88 · tagline→description 72 · description→CTA 72 · CTA→chip bar 96 (set in fit())
     description 27px (33em = 891px, two balanced lines) · CTA 22px, padding 16 / 48 in em (≈548×63)
   Section rhythm: chart→tiles and tiles→footer both 144 @1440 (10vw, 112..180)
   ===================================================================== */
@media (min-width:861px){
  :root{--sec-m:clamp(112px,10vw,180px)}
  .hc .hcenter{--g-lock:calc(var(--ws) * 88 / 72);--g-brk:var(--ws);--g-pair:var(--ws)}
  .hc .approved{font-size:calc(var(--ws) * .375);max-width:33em;line-height:1.5}
  .hero .btn,.hc .cta-row .btn.slim{font-size:calc(var(--ws) * 22 / 72);padding:calc(16em / 22) calc(48em / 22);line-height:1.45}
  .pt-row{padding-top:var(--sec-m)}
  footer{padding-top:var(--sec-m)}
}
/* 5m short-and-wide frames (the 1200x630 X card): keep the tight in-hero gaps, nudged toward Jordan's proportions
   (the lockup gap is now the biggest); padding stays small so the whole chip bar still shows above the fold */
@media (min-width:861px) and (max-height:700px){
  .hc .hcenter{--g-lock:40px;--g-brk:var(--s4);--g-pair:var(--s4);--g-sec:var(--s3)}
  .hero .btn,.hc .cta-row .btn.slim{padding:12px calc(48em / 22)}
}

/* Production page: show this hero, hide the locked phone hero. */
section.home-desk { display: block; }
.stage { display: none; }

/* Six square tiles stay one centred row. repeat(6, 1fr) will not shrink a track
   below the min-content of "Intelligence" (~86px) plus 24px padding and the 1px
   borders, so from 861px to 1059px the tracks paint past the column and the page
   scrolls sideways. Share one padding/gap length p that still leaves that word
   inside the tile: 6 * (89px + 2p + 2px) + 5p <= row width, i.e.
   p <= (100% - 548px) / 17, and never above the 24px used from 1060px up.
   100% / 100cqw are the row's own content box, so this follows the column
   rather than the viewport. Phones are outside this query. */
@media (min-width: 861px) and (max-width: 1059px) {
  .pt-row {
    container-type: inline-size;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(10px, calc((100% - 548px) / 17), 24px);
  }
  .pt-door {
    min-width: 0;
    padding: clamp(10px, calc((100cqw - 548px) / 17), 24px);
  }
  .pt-door .nm {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}