/* v2: the globe redesign. Loaded after styles.css; everything here overrides or adds, the tokens live there. */
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: 0.98; }
h1 em { font-style: normal; color: var(--accent); background: linear-gradient(90deg, var(--amber), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }

.site-head { position: sticky; top: 0; z-index: 40; max-width: none; padding: 10px max(16px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--rule);
  background: var(--head-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.brand { color: var(--ink); font-weight: 600; letter-spacing: 0.22em; }
nav a { color: var(--ink-soft); }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }
.nav-more summary { color: var(--ink-soft); }
.nav-more-list { background: var(--paper-2); border-radius: 12px; box-shadow: 0 18px 40px var(--shadow); }
.icon-btn { font: 500 0.85rem var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; min-height: 36px; cursor: pointer; }
.icon-btn:hover { border-color: var(--ink-soft); }
.site-head nav { margin-left: auto; }
.head-tools { display: flex; align-items: center; gap: 8px; }
.link-ico { width: 36px; padding: 0; display: inline-grid; place-items: center; text-decoration: none; }
.link-ico svg { width: 16px; height: 16px; fill: var(--ink); }
main { max-width: 1180px; }
/* Inner pages start their title a breath below the sticky header; the home stage sets its own spacing. */
main:not(:has(> .stage)) { padding-top: clamp(32px, 5vw, 56px); }
.site-foot { max-width: 1180px; }

.btn { border-radius: 999px; border: 1px solid var(--rule); background: var(--tint); color: var(--ink); padding: 10px 20px; transition: border-color .2s, transform .2s, background .2s; }
.btn:hover { border-color: var(--ink-soft); background: var(--tint-2); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--amber), var(--accent)); color: var(--on-accent); border-color: transparent; font-weight: 600; box-shadow: 0 8px 30px rgba(255, 90, 54, 0.28); }
.btn-primary:hover { background: linear-gradient(135deg, var(--amber), var(--accent)); filter: brightness(1.06); }
.btn-ghost { border-color: transparent; color: var(--ink-soft); }
.chip { border-color: var(--rule); color: var(--ink); }
.chip:hover { border-color: var(--ink-soft); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tag-kit { color: var(--qloo); }
.pbar span { background: linear-gradient(90deg, var(--amber), var(--accent)); }

/* Stage: copy on the left, the globe filling the right and bleeding to the viewport edge. */
.stage { position: relative; display: grid; margin: -24px calc(50% - 50vw) 0; padding: 0 max(16px, calc((100vw - 1180px) / 2)); overflow: hidden; }
.stage-copy { position: relative; z-index: 2; padding: 56px 0 8px; pointer-events: none; }
.stage-copy > * { pointer-events: auto; }
.eyebrow { color: var(--amber); letter-spacing: 0.2em; font-size: 0.75rem; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 44ch; line-height: 1.55; }
.lede strong { color: var(--ink); }
.lede .qloo-word { color: var(--qloo); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.stage-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 560px; border-top: 1px solid var(--rule); padding-top: 18px; }
.stat { display: grid; gap: 4px; align-content: start; }
.stat-v { font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--serif); color: var(--ink); }
.stat:first-child .stat-v { color: var(--accent); }
.stat-k { font-size: 0.8rem; line-height: 1.35; color: var(--ink-soft); }
.stage-globe { position: relative; height: min(68vh, 620px); min-height: 380px; }
.globe-host { position: absolute; inset: 0; cursor: grab; }
.globe-host:active { cursor: grabbing; }
.globe-host canvas { outline: none; }
.globe-fallback { position: static; }
.globe-tip { font: 500 13px/1.45 var(--sans); background: var(--tip-bg); color: var(--ink); padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; }
.globe-legend { position: absolute; left: 0; bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 0.75rem; color: var(--ink-soft); pointer-events: none; }
.lg::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.lg-origin::before { background: var(--amber); }
.lg-chance::before { background: var(--accent); }
.lg-qloo::before { background: var(--qloo); border-radius: 2px; }
.globe-panel { position: absolute; right: 0; top: 16px; z-index: 3; width: min(360px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: 18px 20px 20px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 60px var(--shadow);
  animation: rise .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gp-close { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); font-size: 1.3rem; cursor: pointer; }
.gp-close:hover { color: var(--ink); background: var(--tint-2); }
.gp-kicker { margin: 0 0 4px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); padding-right: 30px; }
.gp-title { margin: 0 0 8px; font-size: 1.7rem; }
.gp-big { margin: 0 0 12px; color: var(--ink-soft); }
.gp-num { font: 600 2.2rem/1 var(--serif); color: var(--accent); margin-right: 4px; }
.gp-why, .gp-cities { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.5; }
.gp-label { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.qloo-mark { color: var(--qloo); }
.qloo-mark::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--qloo); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 10px var(--qloo); }
.gp-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.gp-list li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.gp-cta { margin-top: 6px; }
.gp-hint { font-size: 0.82rem; color: var(--ink-soft); margin: 8px 0 0; }
.title-rail { position: relative; z-index: 2; display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 12px 0 22px; scrollbar-width: thin; }
.rail-h { flex: none; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.rail-chip { flex: none; display: inline-flex; align-items: center; gap: 10px; max-width: 260px; padding: 6px 14px 6px 6px; min-height: 52px; border-radius: 12px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; text-align: left; font: inherit; transition: border-color .2s, transform .2s; }
.rail-chip:first-of-type { padding-left: 14px; }
.rail-chip:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
.rail-chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(255, 90, 54, .2); }
.rail-chip img { width: 28px; height: 40px; object-fit: cover; border-radius: 4px; background: var(--paper-2); }
.rc-t { display: block; font-weight: 600; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.rc-n { display: block; font-size: 0.75rem; color: var(--ink-soft); }
@media (min-width: 980px) {
  .stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto; min-height: min(860px, calc(100svh - 60px)); }
  .stage-copy { grid-column: 1; grid-row: 1; align-self: center; padding: 40px 0; }
  .stage-globe { grid-column: 1 / -1; grid-row: 1; height: 100%; min-height: 640px; margin-left: 40%; }
  .title-rail { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 979px) {
  .stage-copy { padding-top: 32px; }
  .stage-globe { margin: 0 -16px; }
  .globe-panel { position: relative; top: auto; right: auto; width: auto; margin: -40px 16px 0; max-height: none; }
  .globe-legend { left: 16px; }
  .stage-stats { grid-template-columns: 1fr; gap: 10px; }
  .stat { grid-template-columns: 90px 1fr; align-items: baseline; }
}

/* How it works: five tremors, Qloo's step lit in mint. */
.how { margin-top: 56px; }
.quake { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.quake li { position: relative; padding: 20px 18px 18px; border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(180deg, var(--tint), transparent); min-width: 0; }
.quake h3 { margin: 8px 0 6px; font-size: 1.25rem; }
.quake p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }
.quake-n { font-size: 0.75rem; color: var(--accent); letter-spacing: 0.1em; }
.quake li.quake-qloo { border-color: rgba(62, 230, 176, .45); background: linear-gradient(180deg, var(--qloo-soft), transparent); box-shadow: 0 0 40px rgba(62, 230, 176, .08); }
.quake-qloo .quake-n, .quake-qloo h3 { color: var(--qloo); }
@media (min-width: 900px) { .quake { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The Qloo proof bar. */
.qloo-band { margin-top: 64px; padding: 28px clamp(16px, 3vw, 36px) 30px; border: 1px solid rgba(62, 230, 176, .3); border-radius: 22px; background: radial-gradient(600px 240px at 0% 0%, var(--qloo-soft), transparent 70%), var(--paper-2); }
.qloo-band h2 { margin-top: 0; }
.qp-lede { color: var(--ink-soft); }
.qp-bar { display: flex; gap: 4px; margin: 18px 0 14px; min-height: 92px; }
.qp-seg { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px; border-radius: 10px; min-width: 0; }
.qp-v { font-size: 1.6rem; font-weight: 600; }
.qp-l { font-size: 0.8rem; line-height: 1.3; }
.qp-ok { background: var(--qloo); color: #04150F; }
.qp-np { background: rgba(255, 196, 120, .16); color: var(--amber); }
.qp-nq { background: rgba(255, 90, 54, .14); color: var(--accent-ink); }
.qp-foot { margin: 0; }
@media (max-width: 600px) { .qp-bar { flex-direction: column; } .qp-seg { flex: none !important; } }

/* Storm list with posters. */
.storm-list { border-top: 1px solid var(--rule); }
.storm-link { align-items: center; border-radius: 12px; }
.storm-link:hover { background: var(--tint); }
.storm-poster { width: 42px; height: 60px; border-radius: 6px; object-fit: cover; background: var(--paper-2); }
.storm-main { display: grid; gap: 2px; min-width: 0; }
@media (min-width: 720px) { .storm-link { grid-template-columns: 42px minmax(0, 1.5fr) minmax(0, 1fr); } }
@media (max-width: 719px) { .storm-link { grid-template-columns: 42px minmax(0, 1fr); } .storm-next { grid-column: 2; } }

/* Guided tour: the target is cut out of a dimmed page; a cursor glides to it. */
.tour-hole { position: fixed; z-index: 91; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(4, 6, 10, 0.74); outline: 2px solid var(--amber); outline-offset: 4px; transition: top .45s cubic-bezier(.2, .8, .2, 1), left .45s cubic-bezier(.2, .8, .2, 1), width .45s, height .45s; pointer-events: none; }
.tour-blur { position: fixed; inset: 0; z-index: 90; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tour-card { position: fixed; z-index: 92; width: min(360px, calc(100vw - 32px)); padding: 18px 20px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--rule); box-shadow: 0 24px 60px var(--shadow); transition: top .45s, left .45s; }
.tour-card h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.tour-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.95rem; }
.tour-step { font-size: 0.75rem; letter-spacing: .12em; color: var(--amber); text-transform: uppercase; }
.tour-nav { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.tour-nav .btn { padding: 8px 16px; min-height: 40px; }
.tour-cursor { position: fixed; z-index: 93; width: 26px; height: 26px; pointer-events: none; transition: top .7s cubic-bezier(.2, .8, .2, 1), left .7s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }

/* Chat: a floating agent that answers from the site's own tools. */
.chat-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--amber), var(--accent)); color: var(--on-accent); font: 600 0.95rem var(--sans); cursor: pointer; box-shadow: 0 12px 34px rgba(255, 90, 54, .35); }
.chat-fab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); animation: beat 1.8s infinite; }
@keyframes beat { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.chat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 61; width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100svh - 96px));
  display: flex; flex-direction: column; border-radius: 20px; background: var(--paper-2); border: 1px solid var(--rule); box-shadow: 0 30px 80px var(--shadow); overflow: hidden; animation: rise .3s cubic-bezier(.2, .8, .2, 1); }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.chat-head h2 { margin: 0; font-size: 1.1rem; }
.chat-head p { margin: 0; font-size: 0.75rem; color: var(--ink-soft); }
.chat-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.5; min-width: 0; }
.msg p { margin: 0 0 6px; }
.msg p:last-child { margin-bottom: 0; }
.msg-me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.msg-bot { align-self: stretch; background: var(--tint); border: 1px solid var(--rule); border-bottom-left-radius: 4px; max-width: 100%; }
.msg-bot h2, .msg-bot h3 { font-size: 1rem; margin: 0 0 6px; }
.msg-bot details summary { cursor: pointer; font-size: 0.78rem; color: var(--ink-soft); }
.msg-bot .ask-steps h3 { font: 500 0.75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.msg-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-links a { font-size: 0.82rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); text-decoration: none; }
.chat-sugg { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; }
.chat-sugg button { font: 500 0.78rem var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 10px; cursor: pointer; text-align: left; }
.chat-sugg button:hover { border-color: var(--ink-soft); }
.chat-form { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--rule); }
.chat-form input { flex: 1; min-width: 0; font: 400 0.95rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 10px 14px; }
.chat-form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }

/* About and release. */
.cards { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 820px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { padding: 20px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper-2); min-width: 0; }
.card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.card p, .card li { color: var(--ink-soft); }
.card ul { margin: 0; padding-left: 18px; }
.card-qloo { border-color: rgba(62, 230, 176, .4); }
.team-line { font-family: var(--mono); font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) { .globe-panel, .chat, .tour-hole, .tour-card, .tour-cursor { animation: none; transition: none; } }

/* Plan a release. */
.rel-hero { padding-top: 32px; }
.rel-form { display: grid; gap: 8px; max-width: 640px; margin: 22px 0 18px; }
.rel-form label { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }
.rel-form input, .rel-form select { font: 400 1rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; min-height: 44px; }
.rel-form .btn { justify-self: start; margin-top: 8px; }
.rel-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rel-examples .rail-chip { max-width: 340px; }
.rel-examples .rc-t, .rel-examples .rc-n { max-width: 300px; white-space: normal; }
.rel-result { margin-top: 28px; }
.rel-example { display: inline-block; text-transform: none; letter-spacing: 0; font-size: 0.78rem; }
.rel-signal { margin: 14px 0 6px; }
.rel-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 6px 0 0; }
.rel-sec { margin-top: 36px; }
.rel-countries { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.rel-countries li { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(110px, 200px); gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--rule); }
.rel-countries .rel-top strong { color: var(--ink); }
.rel-rank { color: var(--ink-soft); font-size: 0.8rem; }
.rel-top .rel-rank { color: var(--accent); }
.rel-c { display: grid; min-width: 0; }
.rel-cities { font-size: 0.85rem; color: var(--ink-soft); }
.rel-score { display: grid; gap: 4px; justify-items: end; }
.rel-score .pbar { width: 100%; }
.rel-maps { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 820px) { .rel-maps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel-map figcaption { display: grid; gap: 2px; margin-bottom: 8px; }
.rel-map svg { width: 100%; height: auto; }
.rel-venues { list-style: none; padding: 0 !important; display: grid; gap: 6px; }
.rel-venues li { border-bottom: 1px solid var(--rule); padding-bottom: 6px; color: var(--ink); }
.rel-taste { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.rel-taste dt { font-size: 0.75rem; color: var(--qloo); padding-top: 2px; }
.rel-taste dd { margin: 0; color: var(--ink); }
.rel-trail { margin-top: 36px; padding: 16px 18px; border: 1px solid rgba(62, 230, 176, .3); border-radius: 14px; background: var(--paper-2); }
.rel-trail summary { cursor: pointer; font-weight: 600; color: var(--qloo); }
.rel-params { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--ink-soft); white-space: pre-wrap; word-break: break-all; }

/* Plan a launch in the new skin. */
.plan-step { border: 1px solid var(--rule); border-radius: 14px; background: linear-gradient(180deg, var(--tint), transparent); padding: 14px 18px; }
.plan-step h3 { font-family: var(--serif); font-size: 1.15rem; }
.plan-step-qloo { border-color: rgba(62, 230, 176, .4); background: linear-gradient(180deg, var(--qloo-soft), transparent 80%); }
.plan-step-tag { margin-left: 10px; letter-spacing: .1em; }
.plan-brief { border: 1px solid rgba(255, 196, 120, .45); border-radius: 20px; background: radial-gradient(700px 260px at 100% 0%, rgba(255, 90, 54, .08), transparent 70%), var(--paper-2); padding: 26px 26px 14px; box-shadow: 0 30px 80px var(--shadow); }
.plan-brief .eyebrow { color: var(--amber); }
.plan-tiles .proof-v { color: var(--accent); }
.proof { border-radius: 14px; }
.wm-select, .field select, .field input, .lookup-form input { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; }

/* Phones: one scrolling nav row, and the globe panel flows under the globe instead of over it. */
@media (max-width: 720px) {
  .site-head { flex-wrap: nowrap; gap: 10px; }
  .site-head nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; gap: 0 14px; width: auto; min-width: 0; }
  .site-head nav::-webkit-scrollbar { display: none; }
  .site-head nav a, .nav-more summary { white-space: nowrap; flex: none; }
  .brand { letter-spacing: 0.14em; flex: none; }
  .brand-text { display: none; }
  /* The header's backdrop-filter makes it the containing block, so this escapes the nav's scroll clipping. */
  .nav-more-list { position: fixed; top: 52px; right: 12px; }
}
@media (max-width: 979px) {
  .stage-globe { height: auto; min-height: 0; }
  .globe-host { position: relative; height: 58vh; min-height: 340px; }
  .globe-panel { margin: 0 16px; }
  .globe-legend { position: static; padding: 8px 16px 0; }
}

/* Release form: numbered questions. */
.rel-form { gap: 0; padding: 8px 20px 20px; max-width: 760px; }
.rel-field { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.rel-step { color: var(--accent); font-size: 0.8rem; padding-top: 3px; }
.rel-field-body { display: grid; gap: 6px; min-width: 0; }
.rel-label { margin: 0; font-weight: 600; color: var(--ink); }
.rel-hint { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
.rel-two { display: grid; gap: 8px; }
@media (min-width: 640px) { .rel-two { grid-template-columns: 1fr 1fr; } }
.rel-form input, .rel-form select { width: 100%; }
.rel-form > .btn { margin-top: 16px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-b { font: 500 0.9rem var(--sans); color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; transition: all .15s; }
.seg-b:hover { color: var(--ink); border-color: var(--ink-soft); }
.seg-b[aria-pressed="true"] { color: var(--on-accent); background: linear-gradient(135deg, var(--amber), var(--accent)); border-color: transparent; }
.rel-refuse { margin-top: 24px; padding: 18px 20px; border: 1px solid rgba(255, 196, 120, .45); border-radius: 14px; background: var(--paper-2); }
.rel-refuse ul { margin: 6px 0 12px; }

/* Global heatmap: ranked list beside a tiered world. */
.wh { margin-top: 14px; }
.wh-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 12px; }
.wh-head h3 { margin: 0; }
.wh-body { display: grid; gap: 16px; }
@media (min-width: 900px) { .wh-body { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); align-items: center; } }
.wh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wh-list li { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 0.88rem; }
.wh-n, .wh-code { color: var(--ink-soft); font-size: 0.75rem; }
.wh-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-tier { font: 600 0.75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.wh-svg { width: 100%; height: auto; display: block; }
.wh-c { stroke: var(--paper); stroke-width: 0.4; transition: opacity .2s; }
.wh-c:hover { opacity: .8; }
.t0 { fill: var(--wh-none); } .t4 { fill: #1f6f63; } .t3 { fill: #22a38a; } .t2 { fill: #2fd0a5; } .t1 { fill: #7ff5cf; }
.wh-tier.t1 { background: #7ff5cf; color: #04150F; } .wh-tier.t2 { background: #2fd0a5; color: #04150F; } .wh-tier.t3 { background: #22a38a; color: #04150F; } .wh-tier.t4 { background: #1f6f63; color: var(--ink); }
.wh-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.78rem; color: var(--ink-soft); }
.wh-key::before { content: ""; display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; background: currentColor; }
.wh-key.t1::before { background: #7ff5cf; } .wh-key.t2::before { background: #2fd0a5; } .wh-key.t3::before { background: #22a38a; } .wh-key.t4::before { background: #1f6f63; } .wh-key.t0::before { background: var(--wh-none); outline: 1px solid var(--rule); }
.wh-key { fill: none; }
.wh-key small { font-size: 0.75rem; }
.rel-city-proof { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; }
.rel-proof ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.rel-proof h2 { margin-top: 0; }
.rel-sched { list-style: none; margin: 12px 0 0; padding: 0; border-left: 2px solid var(--rule); }
.rel-sched li { position: relative; display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 12px; padding: 8px 0 8px 16px; }
.rel-sched li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.rel-sched li.now::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.rel-when { font-size: 0.8rem; color: var(--amber); }
@media (max-width: 560px) { .rel-sched li { grid-template-columns: 1fr; gap: 2px; } }

/* Review fixes: phones get a wrapping two-row nav instead of a clipped scroller; long tags wrap; the chat
   button no longer sits on the last breakout chip. */
@media (max-width: 720px) {
  .site-head { flex-wrap: wrap; row-gap: 2px; }
  .site-head nav { flex-wrap: wrap; overflow: visible; gap: 0 12px; width: 100%; }
  .site-head nav a, .nav-more summary { font-size: 0.8rem; min-height: 34px; padding: 6px 0; }
  .site-head .icon-btn { min-height: 36px; min-width: 36px; padding: 4px 12px; font-size: 0.8rem; }
  .nav-more-list { position: absolute; top: 100%; right: 0; }
  /* Brand and the two buttons share the top row, so the name stays visible and the links get the full width. */
  .brand-text { display: inline; }
  .head-tools { order: 1; margin-left: auto; }
  .site-head nav { order: 2; }
  .chat-fab { padding: 10px 14px; font-size: 0.85rem; }
}
.rel-example { white-space: normal; max-width: 100%; }
.title-rail { padding-right: 200px; }
@media (max-width: 720px) { .title-rail { padding-right: 150px; } }
.qp-nq { background: rgba(151, 160, 174, .14); color: var(--ink-soft); }
.rel-running { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.rel-stages { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; color: var(--ink-soft); }
.rel-stages li.now { color: var(--ink); font-weight: 600; }
.rel-stages li.done { color: var(--qloo); }

/* Evidence: the forecast against its baseline, who decides what, and each brief claim with its gap. */
.fc-band, .use-band { margin-top: 64px; }
.fc-grid { display: grid; gap: 14px; margin: 16px 0; }
@media (min-width: 820px) { .fc-grid { grid-template-columns: 1fr 1fr; } }
.fc-card { padding: 18px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper-2); min-width: 0; }
.fc-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 56px; gap: 10px; align-items: center; margin: 8px 0; font-size: 0.88rem; }
.fc-track { height: 12px; border-radius: 6px; background: var(--tint-2); overflow: hidden; }
.fc-fill { display: block; height: 100%; border-radius: 6px; }
.fc-us .fc-fill { background: linear-gradient(90deg, var(--amber), var(--accent)); }
.fc-base .fc-fill { background: #5b6472; }
.fc-us .fc-v { color: var(--accent); font-weight: 600; }
.fc-say { margin: 10px 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.use-table td, .ev-table td { vertical-align: top; font-size: 0.9rem; }
.use-table th, .ev-table th { text-align: left; font: 500 0.75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ev-gap { color: var(--amber); }
.plan-decision-box { margin: 10px 0 14px; padding: 12px 14px; border-left: 3px solid var(--amber); background: rgba(255, 196, 120, .06); border-radius: 0 10px 10px 0; }
.plan-decision-box p { margin: 0; }
.plan-decision-box .gp-label { margin-bottom: 4px; }

/* The brief and the steps use the full column; at 760px the evidence table was cramped and the right side empty. */
.plan-brief, .plan-steps { max-width: 1000px; }

/* .plain caps text at 68ch; a table with that class must still use the full width, or its columns squeeze. */
table.use-table, table.ev-table { max-width: none; width: 100%; }
.use-table td:first-child { min-width: 110px; }
.gp-rank { margin: 0 0 2px; font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }

/* Theme switch: a sun or a moon, drawn in CSS. */
.theme-btn { width: 36px; padding: 0; display: inline-grid; place-items: center; }
.theme-btn::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset -5px -3px 0 0 var(--paper); }
:root[data-theme="light"] .theme-btn::before { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--amber); background: var(--amber); }
:root[data-theme="light"] .qp-ok { color: #FFFFFF; }
:root[data-theme="light"] .wh-tier.t4 { color: #FFFFFF; }
/* The first design's heavy 2px ink rules read as hard white lines on the dark page; one hairline weight everywhere. */
:is(.hero-chart, .map-box, .table-wrap, .songs, .score-block, .kit, .proof, .db-box, .example, .wm-top, .on-netflix, .ask) { border-top-width: 1px; border-top-color: var(--rule); }
.map-box { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
:is(input[type="text"], input[type="date"], textarea, .wm-select, .chip) { border-width: 1px; border-color: var(--rule); }
:is(input[type="text"], input[type="date"], textarea):focus-visible { border-color: var(--accent); }
/* Small accent text needs the darker ink on light paper to stay readable. */
:root[data-theme="light"] :is(.quake-n, .flow-n, .rel-step, .tour-count, .fc-us .fc-v, .rel-top .rel-rank, .tour-play[aria-pressed="true"]) { color: var(--accent-ink); }

/* Tour: a progress track, a click ripple where the tour acts, and room for Play. */
.tour-progress { display: flex; gap: 4px; margin: 0 0 12px; }
.tour-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--rule); transition: background .3s; }
.tour-progress span.on { background: linear-gradient(90deg, var(--amber), var(--accent)); }
.tour-nav { flex-wrap: wrap; }
.tour-gap { flex: 1; }
.tour-play[aria-pressed="true"] { color: var(--accent); }
.tour-click { position: fixed; z-index: 94; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--amber); pointer-events: none; animation: tour-ring .7s ease-out forwards; }
@keyframes tour-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tour-click { animation: none; } }

/* Tour, minimal: a small card, one line of text, dots; an intro that draws a seismograph. */
.tour-card { width: min(320px, calc(100vw - 24px)); padding: 16px 18px 14px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--rule); box-shadow: 0 20px 50px var(--shadow); transition: top .4s cubic-bezier(.2,.8,.2,1), left .4s cubic-bezier(.2,.8,.2,1); }
.tour-card h3 { margin: 4px 28px 4px 0; font-size: 1.08rem; }
.tour-card p { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }
.tour-count { font-size: 0.75rem; letter-spacing: .14em; color: var(--accent); }
.tour-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 1.15rem; cursor: pointer; }
.tour-x:hover { background: var(--tint-2); color: var(--ink); }
.tour-foot { display: flex; align-items: center; gap: 6px; }
.tour-foot .btn-small { padding: 6px 12px; min-height: 32px; font-size: 0.82rem; }
.tour-foot .btn:disabled { opacity: .35; cursor: default; transform: none; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--rule); cursor: pointer; transition: width .25s, background .25s; }
.tour-dots button.on { width: 18px; border-radius: 4px; background: var(--accent); }
.tour-in { animation: tour-in .32s cubic-bezier(.2,.8,.2,1); }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.tour-hole { border-radius: 16px; outline: 1.5px solid var(--amber); outline-offset: 3px; }
.tour-cursor { width: 24px; height: 24px; }

.tour-veil { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 10, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .3s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.tour-intro { position: relative; isolation: isolate; width: min(520px, 100%); text-align: center; padding: 26px 28px 20px; border-radius: 20px; background: var(--paper-2); border: 1px solid var(--rule); box-shadow: 0 30px 80px var(--shadow); animation: tour-in .45s cubic-bezier(.2,.8,.2,1), tour-jolt .5s .78s cubic-bezier(.36,.07,.19,.97); }
/* Text arrives after the trace has drawn its main tremor. */
.tour-intro > :where(.tour-step, h2, p, .tour-intro-actions, .tour-points) { opacity: 0; animation: tour-rise .5s cubic-bezier(.2,.8,.2,1) forwards; }
.tour-intro > .tour-step { animation-delay: .9s; }
.tour-intro > h2 { animation-delay: 1s; }
.tour-intro > p:not(.tour-step, .tour-keys) { animation-delay: 1.12s; }
.tour-intro > .tour-points { animation-delay: 1.1s; }
.tour-intro > .tour-name { animation-delay: 1.25s; }
.tour-intro > .tour-intro-actions { animation-delay: 1.35s; }
.tour-intro > .tour-keys { animation-delay: 1.5s; }
@keyframes tour-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tour-jolt { 0%, 100% { translate: 0 0; } 15% { translate: -5px 1px; } 30% { translate: 4px -1px; } 45% { translate: -3px 0; } 60% { translate: 2px 1px; } 80% { translate: -1px 0; } }
.tour-intro h2 { margin: 6px 0 10px; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.tour-intro h2 em { font-style: normal; background: linear-gradient(90deg, var(--amber), var(--accent), var(--amber)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: tour-sheen 3.5s 1.4s ease-in-out infinite; }
@keyframes tour-sheen { 50% { background-position: 100% 0; } }
.tour-intro p { color: var(--ink-soft); margin: 0 auto 18px; max-width: 38ch; }
.tour-intro .tour-step { color: var(--amber); margin: 0 auto; }
.tour-intro-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tour-intro .tour-keys { margin: 14px auto 0; font-size: 0.75rem; color: var(--ink-soft); }
.tour-keys kbd { font: inherit; padding: 1px 6px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 5px; color: var(--ink); }
.tour-seismo { width: 100%; height: 72px; margin-bottom: 8px; overflow: visible; }
.tour-seismo path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-trace 1.8s .2s cubic-bezier(.4,0,.2,1) forwards; filter: drop-shadow(0 0 6px rgba(255, 90, 54, .45)); }
.tour-base { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 6; }
.tour-pen { fill: var(--amber); filter: drop-shadow(0 0 6px var(--accent)); }
@keyframes draw-trace { to { stroke-dashoffset: 0; } }
/* Rings centred on the main tremor (35% along the trace), behind the card's content. */
.tour-rings { position: absolute; z-index: -1; left: 40%; top: 62px; width: 0; height: 0; pointer-events: none; }
.tour-rings span { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: tour-shock 1.6s cubic-bezier(.1,.6,.3,1) forwards; }
.tour-rings span:nth-child(1) { animation-delay: .8s; }
.tour-rings span:nth-child(2) { animation-delay: 1.15s; --peak: .35; }
.tour-rings span:nth-child(3) { animation-delay: 1.4s; --peak: .2; }
@keyframes tour-shock { 0% { opacity: var(--peak, .55); transform: scale(.2); } 100% { opacity: 0; transform: scale(9); } }
.tour-veil:has(.tour-intro) { overflow: hidden; }
:root[data-theme="light"] .tour-veil { background: rgba(245, 243, 238, .55); }
@media (prefers-reduced-motion: reduce) { .tour-in, .tour-intro, .tour-veil, .tour-intro > *, .tour-intro h2 em { animation: none !important; opacity: 1 !important; } .tour-seismo path { animation: none; stroke-dashoffset: 0; } .tour-pen, .tour-rings { display: none; } }

/* Motion (no new information): reveal on scroll, bars that fill, page fades, hover lift. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.2,.8,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .storm-list li.reveal { transition-duration: .4s; }
  .qp-bar .qp-seg { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.2,.8,.2,1); }
  .qp-bar.in .qp-seg { clip-path: inset(0 0 0 0); }
  .qp-bar.in .qp-seg:nth-child(2) { transition-delay: .25s; }
  .qp-bar.in .qp-seg:nth-child(3) { transition-delay: .5s; }
  .fc-card .fc-fill { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
  .fc-card.in .fc-fill { transform: scaleX(1); }
  .fc-card.in .fc-base .fc-fill { transition-delay: .2s; }
  #app.route-in { animation: route-in .35s ease-out; }
  @keyframes route-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .card, .quake li, .fc-card, .rel-countries li, .storm-link { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
  .card:hover, .quake li:hover, .fc-card:hover { transform: translateY(-2px); border-color: rgba(255, 90, 54, .35); box-shadow: 0 10px 30px var(--shadow); }
  .storm-link:hover { transform: translateX(3px); }
  .btn:active, .rail-chip:active, .seg-b:active, .chip:active { transform: scale(.97); }
}

/* Splash: covers the first paint while the app loads. Script lifts it once the first view has rendered; if script
   never runs, it fades on its own after 4 s so the page is never trapped behind it. */
.splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; grid-template: 1fr / 1fr; background: var(--paper); animation: splash-gone .4s 4s forwards; transition: opacity .45s ease, visibility .45s; }
.splash-trace { width: min(320px, 70vw); height: auto; overflow: visible; }
.splash-trace path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255, 90, 54, .45)); animation: draw-trace 1.1s .1s cubic-bezier(.4,0,.2,1) forwards; }
.splash-name { margin: 10px 0 0; font: 600 0.95rem var(--mono); letter-spacing: .5em; padding-left: .5em; color: var(--ink); opacity: 0; animation: splash-rise .5s .55s ease-out forwards; }
.splash-line { margin: 0; font-size: 0.8rem; color: var(--ink-soft); opacity: 0; animation: splash-rise .5s .75s ease-out forwards; }
.splash.is-out { opacity: 0; visibility: hidden; }
.splash.is-out > * { transform: scale(1.04); transition: transform .45s ease; }
@keyframes splash-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes splash-gone { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash-trace path { animation: none; stroke-dashoffset: 0; } .splash-name, .splash-line { animation: none; opacity: 1; } }

/* While the tour runs, a clear shield takes every click on the page, so a press on a lit-up button cannot navigate
   away and strand the tour; the card nudges instead. */
.tour-shield { position: fixed; inset: 0; z-index: 91; cursor: default; }
.tour-card.tour-nudge { animation: tour-nudge .4s cubic-bezier(.36,.07,.19,.97); }
.tour-card.tour-nudge .btn-primary { box-shadow: 0 0 0 4px rgba(255, 90, 54, .35); }
@keyframes tour-nudge { 20% { translate: -5px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

/* How it works, as a flow: five steps joined by arrows, the Qloo step lit. Stacks on phones. */
.flow { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; counter-reset: none; }
.flow li { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -22px; width: 16px; height: 16px; margin-top: -8px;
  background: var(--ink-soft); clip-path: polygon(0 35%, 55% 35%, 55% 10%, 100% 50%, 55% 90%, 55% 65%, 0 65%); opacity: .55; }
.flow strong { font-size: 1.05rem; }
.flow span:not(.flow-n) { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.4; }
.flow-n { font-size: 0.75rem; letter-spacing: .1em; color: var(--accent); }
.flow .flow-qloo { border-color: rgba(62, 230, 176, .5); background: linear-gradient(180deg, var(--qloo-soft), transparent), var(--paper-2); box-shadow: 0 0 0 3px var(--qloo-soft); }
.flow .flow-qloo strong, .flow .flow-qloo .flow-n { color: var(--qloo); }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 18px; }
  .flow li:not(:last-child)::after { top: auto; bottom: -17px; right: auto; left: 28px; transform: rotate(90deg); }
}

/* What's next: a timeline, one dot per step on a single rule. */
.roadmap { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
.roadmap::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--amber) 40%, var(--rule)); }
.roadmap li { position: relative; display: grid; gap: 4px; align-content: start; padding-top: 26px; }
.roadmap li::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--amber); }
.roadmap li:first-child::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(255, 90, 54, .18); }
.rm-when { font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.rm-title { font-size: 1rem; }
.rm-line { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.4; }
@media (max-width: 900px) {
  .roadmap { grid-template-columns: 1fr; gap: 16px; padding-left: 26px; }
  .roadmap::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent), var(--amber) 40%, var(--rule)); }
  .roadmap li { padding-top: 0; }
  .roadmap li::before { left: -26px; }
}

/* More detail: the secondary material, folded, for anyone who wants the method behind the numbers. */
.more details, .storm-more, details.fold { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); margin-top: 10px; }
.more summary, .storm-more summary, .fold > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 10px; }
.more summary::-webkit-details-marker, .storm-more summary::-webkit-details-marker, .fold > summary::-webkit-details-marker { display: none; }
.more summary::before, .storm-more summary::before, .fold > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; flex: none; }
.more details[open] > summary::before, .storm-more[open] > summary::before, .fold[open] > summary::before { transform: rotate(45deg); }
.more details > :not(summary), .fold > :not(summary) { margin: 0 18px 16px; }
.more-list { padding-left: 18px; color: var(--ink-soft); }
.more-list li { margin: 4px 0; }
.storm-more { background: transparent; }
.storm-more > .storm-list { margin: 0 12px 12px; }
.roadmap + .card { margin-top: 28px; }
.caveat-list li { margin: 6px 0; }
.rel-more { border-top: 1px solid var(--rule); padding-top: 4px; }
.rel-more > summary { cursor: pointer; padding: 12px 0; color: var(--ink-soft); font-weight: 500; list-style: none; display: flex; align-items: center; gap: 10px; }
.rel-more > summary::-webkit-details-marker { display: none; }
.rel-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.rel-more[open] > summary::before { transform: rotate(45deg); }
.rel-more > summary:hover { color: var(--ink); }

/* Plain-language home: one main button, a quiet tour link, the stats framed as a question, a real example, a real user. */
.tour-link { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 0; min-height: 40px; border: 0; background: none; color: var(--ink-soft); font: 500 0.92rem var(--sans); cursor: pointer; }
.tour-link:hover { color: var(--ink); }
.tour-link-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }
.tour-link-dot::after { content: ""; position: absolute; left: 7px; top: 5px; border-left: 6px solid var(--on-accent); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.demo-band h2 { margin-bottom: 14px; }
.demo-box { position: relative; aspect-ratio: 16 / 9; max-width: 960px; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); background: #07090D; box-shadow: 0 24px 60px -30px rgba(255, 90, 54, 0.45); }
.demo-play { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.demo-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.4s ease; }
.demo-play:hover img, .demo-play:focus-visible img { transform: scale(1.02); filter: brightness(1.1); }
/* Bottom-left, so the button never covers the title on the poster. */
.demo-btn { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 0.95rem var(--sans); box-shadow: 0 0 0 8px rgba(255, 90, 54, 0.18); }
.demo-btn::before { content: ""; width: 0; height: 0; margin-left: 6px; border-left: 14px solid var(--on-accent); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.demo-btn::after { content: "Play the demo \00b7  2:16"; }
@media (max-width: 700px) { .demo-btn { left: 10px; bottom: 10px; padding: 7px 14px 7px 8px; font-size: 0.85rem; } main section.demo-band[id] { scroll-margin-top: 150px; } }
.demo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .demo-play img { transition: none; } }
.stats-q { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-weight: 600; color: var(--ink); }
.stage-copy .stage-stats { border-top: 0; padding-top: 6px; margin-top: 6px; }
.stats-how { grid-column: 1 / -1; font-size: 0.88rem; justify-self: start; }
.flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-3 strong { font-size: 1.15rem; }
.flow-3 span:not(.flow-n) { font-size: 0.95rem; }
@media (max-width: 900px) { .flow-3 { grid-template-columns: 1fr; } }

.example-card { margin-top: 18px; padding: 22px; border: 1px solid var(--rule); border-radius: 18px; background: radial-gradient(600px 220px at 100% 0%, rgba(255, 90, 54, .08), transparent 70%), var(--paper-2); display: grid; gap: 18px; }
.ex-head { display: flex; gap: 18px; align-items: center; }
.ex-poster { width: 84px; height: 120px; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 26px var(--shadow); flex: none; }
.ex-tag { margin: 0; font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
.ex-head h3 { margin: 4px 0; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.ex-sub { margin: 0; color: var(--ink-soft); }
.ex-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ex-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.ex-row dt { color: var(--ink-soft); font-size: 0.9rem; }
.ex-row dd { margin: 0; }
.example-card > .btn { justify-self: start; }
@media (max-width: 600px) { .ex-row { grid-template-columns: 1fr; gap: 2px; } .ex-poster { width: 64px; height: 92px; } }

.voice { margin: 22px 0 0; padding: 18px 22px; border-left: 3px solid var(--qloo); border-radius: 0 14px 14px 0; background: var(--qloo-soft); }
.voice blockquote { margin: 0; }
.voice blockquote p { margin: 0; font: 600 clamp(1.15rem, 2.4vw, 1.45rem)/1.35 var(--serif); color: var(--ink); }
.voice figcaption { margin-top: 6px; font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; }
.voice figcaption .muted { font-weight: 400; }

/* The intro says what AFTERSHOCK is in three short points before the tour starts. */
.tour-intro { width: min(600px, 100%); }
.tour-points { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 10px; text-align: left; counter-reset: pt; }
.tour-points li { counter-increment: pt; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--tint); border: 1px solid var(--rule); }
.tour-points li::before { content: counter(pt); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 0.8rem var(--mono); color: var(--on-accent); background: linear-gradient(135deg, var(--amber), var(--accent)); }
.tour-points strong { font-size: 0.95rem; }
.tour-points span { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.4; }
.tour-intro .tour-name { font-size: 0.82rem; margin-bottom: 16px; max-width: 46ch; }
@media (max-height: 760px) { .tour-intro .tour-seismo { height: 48px; } .tour-points li { padding: 8px 10px; } }
.glossary { margin: 6px 0 22px; }
.glossary-list { margin: 0 18px 16px; display: grid; gap: 8px; }
.glossary-list div { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 14px; }
.glossary-list dt { font-weight: 600; }
.glossary-list dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 600px) { .glossary-list div { grid-template-columns: 1fr; gap: 2px; } }
.agent-line { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 4px; }
/* In-page jumps (the main button, the tour) stop below the sticky header instead of under it. */
main h2[id], main section[id] { scroll-margin-top: 96px; }

/* The splash has two frames in one grid cell: the brand (every visit) and, on a first visit, the story before it. */
.splash > .splash-story, .splash > .splash-brand { grid-area: 1 / 1; }
.splash-brand { display: grid; justify-items: center; gap: 6px; }
.splash-line em { font-style: normal; color: var(--accent); }
.splash-story, .splash-skip { display: none; }

/* First visit: a five-second story. A show is popular in Denmark (0.3 s), the arcs reach Norway and Sweden (1.5 to
   2.5 s), then the story folds away and the slogan lands (3.3 s). app.js lifts the splash at about 5.2 s. */
.intro-story .splash { animation: splash-gone .4s 7s forwards; cursor: pointer; }
.intro-story .splash-story { display: grid; justify-items: center; gap: 10px; width: min(520px, 92vw); animation: story-fold .5s 3.3s ease-in forwards; }
.story-map { width: 100%; height: auto; overflow: visible; }
.story-grid { opacity: 0; animation: story-fade .6s .05s ease-out forwards; }
#story-dots circle { fill: var(--ink-soft); }
.story-arc { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgba(255, 90, 54, .55)); }
.arc-no { animation: draw-trace .7s 1.5s cubic-bezier(.4,0,.2,1) forwards; }
.arc-se { animation: draw-trace .7s 1.75s cubic-bezier(.4,0,.2,1) forwards; }
.story-pin { opacity: 0; transform-box: fill-box; transform-origin: center; }
.story-pin .dot { fill: var(--amber); }
.pin-dk .dot { fill: var(--accent); }
.story-pin .ring { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: story-ring 1.4s ease-out infinite; }
.story-pin .ring.r2 { animation-delay: .7s; }
.story-pin text { font: 600 9px var(--mono); letter-spacing: .2em; fill: var(--ink-soft); text-anchor: middle; }
.pin-dk { animation: story-pop .45s .25s cubic-bezier(.2,1.6,.4,1) forwards; }
.pin-no { animation: story-pop .45s 2.1s cubic-bezier(.2,1.6,.4,1) forwards; }
.pin-se { animation: story-pop .45s 2.4s cubic-bezier(.2,1.6,.4,1) forwards; }
.story-line { grid-area: 2 / 1; margin: 0; text-align: center; font: 600 clamp(1.05rem, 2.6vw, 1.4rem)/1.35 var(--sans); color: var(--ink); opacity: 0; }
.story-line.line-1 { animation: story-line 1.55s .35s ease-out forwards; }
.story-line.line-2 { animation: story-line 1.45s 1.95s ease-out forwards; }
.intro-story .splash-trace path { animation-delay: 3.35s; }
.intro-story .splash-name { animation-delay: 3.65s; }
.intro-story .splash-line { animation-delay: 3.85s; margin-top: 8px; font: 700 clamp(1.8rem, 5.2vw, 3.2rem)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--ink); text-align: center; }
.intro-story .splash-skip { display: block; position: fixed; right: 20px; bottom: 20px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--tint); color: var(--ink-soft); font: 500 0.85rem var(--sans); cursor: pointer; opacity: 0; animation: story-show .4s .8s ease-out forwards; }
.intro-story .splash-skip:hover { color: var(--ink); border-color: var(--ink-soft); }
@keyframes story-fade { to { opacity: .5; } }
@keyframes story-show { to { opacity: 1; } }
@keyframes story-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes story-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@keyframes story-line { 0% { opacity: 0; transform: translateY(8px); } 16% { opacity: 1; transform: none; } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes story-fold { to { opacity: 0; transform: scale(.94); visibility: hidden; } }
@media (max-width: 600px) { .intro-story .splash-line em { display: block; } }

/* Instant hook: one of this week's real predictions under the headline, changing every few seconds. */
.hook { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: min(640px, 100%); margin: 18px 0 2px; padding: 9px 16px 9px 10px; border: 1px solid var(--rule); border-radius: 18px; background: var(--tint); color: var(--ink); font: 400 0.95rem var(--sans); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.hook:hover { border-color: rgba(255, 90, 54, .55); background: var(--tint-2); }
.hook-live { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 90, 54, .14); color: var(--accent-ink, var(--accent)); font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; }
.hook-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 90, 54, .6); animation: hook-pulse 1.6s ease-out infinite; }
.hook-text { min-width: 0; line-height: 1.35; animation: hook-in .45s cubic-bezier(.2,.8,.2,1); }
.hook-title { font-weight: 600; }
.hook-from { color: var(--ink-soft); }
.hook-arrow { display: inline-block; width: 22px; height: 2px; margin: 0 8px 4px; vertical-align: middle; background: linear-gradient(90deg, var(--amber), var(--accent)); position: relative; }
.hook-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 6px solid var(--accent); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.hook-next { font-weight: 700; color: var(--accent-ink, var(--accent)); }
:root:not([data-theme="light"]) .hook-next, :root:not([data-theme="light"]) .hook-live { color: var(--accent); }
@keyframes hook-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hook-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 90, 54, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 54, 0); } }
@media (prefers-reduced-motion: reduce) { .hook-dot, .hook-text { animation: none; } }
@media (max-width: 600px) { .hook { flex-wrap: wrap; } }

/* The tour link sits in the button row now. */
.cta-row { align-items: center; }
.cta-row .tour-link { margin: 0; padding: 0 6px; flex-basis: 100%; }
.stage-copy .lede { margin-top: 14px; }

/* Stats as three small cards under the question. */
.stage-copy .stage-stats { gap: 10px; }
.stage-copy .stat { padding: 12px 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--tint); }
.stage-copy .stat-k { font-size: 0.78rem; }

/* Step icons. */
.flow-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.flow-ico { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: rgba(255, 90, 54, .1); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flow-ico circle { fill: none; }
.flow-qloo .flow-ico { background: var(--qloo-soft); stroke: var(--qloo); }

/* The example card leads with the answer: the chance, and the route. */
.ex-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.ex-route { display: grid; justify-items: end; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 90, 54, .08); border: 1px solid rgba(255, 90, 54, .25); }
.ex-pct { font: 700 clamp(2rem, 4vw, 2.8rem)/1 var(--serif); color: var(--accent); letter-spacing: -0.02em; }
.ex-path { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--ink-soft); }
.ex-path strong { color: var(--ink); }
.ex-arrow { width: 26px; height: 2px; background: linear-gradient(90deg, var(--amber), var(--accent)); position: relative; }
.ex-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 6px solid var(--accent); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.ex-when { font-size: 0.78rem; color: var(--ink-soft); }
:root[data-theme="light"] .ex-pct { color: var(--accent-ink); }
@media (max-width: 700px) { .ex-head { grid-template-columns: auto minmax(0, 1fr); } .ex-route { grid-column: 1 / -1; justify-items: start; } }

/* Trending rows: the prediction is the hero of each row: a large chance, the next country, the bar. */
.storm-poster { width: 56px; height: 80px; border-radius: 8px; box-shadow: 0 6px 18px var(--shadow); }
@media (min-width: 720px) { .storm-link { grid-template-columns: 56px minmax(0, 1.6fr) minmax(220px, 1fr); padding: 14px 12px; } }
@media (max-width: 719px) { .storm-link { grid-template-columns: 56px minmax(0, 1fr); } }
.storm-next { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pct to" "pct bar"; gap: 4px 14px; align-items: center; }
.sn-pct { grid-area: pct; font: 700 clamp(1.5rem, 2.4vw, 1.9rem)/1 var(--serif); color: var(--accent); letter-spacing: -0.02em; min-width: 2.9ch; text-align: right; font-variant-numeric: tabular-nums; }
:root[data-theme="light"] .sn-pct { color: var(--accent-ink); }
.sn-to { grid-area: to; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sn-to strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-arrow { width: 16px; height: 2px; background: linear-gradient(90deg, var(--amber), var(--accent)); position: relative; flex: none; }
.sn-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 5px solid var(--accent); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.storm-next .pbar { grid-area: bar; width: 100%; max-width: 180px; height: 5px; border-radius: 3px; overflow: hidden; }
.storm-next .pbar span { border-radius: 3px; }
.storm-list li + li .storm-link { border-top: 1px solid transparent; }
.tour-card.tour-card-wide { width: min(440px, calc(100vw - 24px)); }
.tour-list { list-style: none; margin: -4px 0 12px; padding: 0; display: grid; gap: 7px; }
.tour-list li { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; background: var(--tint); border: 1px solid var(--rule); }
.tour-list strong { font-size: 0.88rem; }
.tour-list span { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.35; }

/* Find my audience: one purpose, three steps, one big search row. */
.fa-hero h1 { max-width: 16ch; }
.fa-other { margin: 4px 0 20px; color: var(--ink-soft); font-size: 0.92rem; }
.fa-how { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 860px; }
.fa-how li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--tint); }
.fa-n { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; color: var(--on-accent); background: linear-gradient(135deg, var(--amber), var(--accent)); }
.fa-how strong { font-size: 0.95rem; }
.fa-how span:not(.fa-n) { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.4; }
@media (max-width: 760px) { .fa-how { grid-template-columns: 1fr; } }
.fa-form { max-width: 860px; display: grid; gap: 14px; padding: 22px; }
.fa-label { font-weight: 600; font-size: 1.05rem; }
.fa-search { display: flex; gap: 10px; }
.fa-search input { flex: 1; min-width: 0; min-height: 54px; font-size: 1.1rem; padding: 12px 16px; border-radius: 14px; }
.fa-search .fa-go { flex: none; min-height: 54px; padding: 0 22px; border-radius: 14px; }
@media (max-width: 600px) { .fa-search { flex-direction: column; } }
.fa-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fa-kind-l { color: var(--ink-soft); font-size: 0.9rem; }
.fa-form .rel-more { border-top: 1px solid var(--rule); }
.fa-form .rel-field { grid-template-columns: 1fr; padding-left: 0; }

/* For music artists: an explainer, a big search, artist cards. */
.ma-how { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ma-how li { padding: 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--tint); display: grid; gap: 4px; }
.ma-how strong { font-size: 0.98rem; }
.ma-how span { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.4; }
@media (max-width: 760px) { .ma-how { grid-template-columns: 1fr; } }
.ma-search { display: grid; gap: 6px; max-width: 560px; margin-bottom: 8px; }
.ma-search label { font-weight: 600; }
.ma-search input { min-height: 50px; font-size: 1.05rem; padding: 10px 14px; border-radius: 14px; }
.ma-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ma-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.ma-card:hover { border-color: rgba(255, 90, 54, .5); transform: translateY(-2px); }
.ma-avatar { grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 700 1.05rem var(--serif); color: var(--on-accent); background: linear-gradient(135deg, var(--amber), var(--accent)); }
.ma-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-meta { font-size: 0.82rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-meta b { color: var(--accent-ink, var(--accent)); font-weight: 600; }
:root:not([data-theme="light"]) .ma-meta b { color: var(--accent); }
.ma-feature { margin: 0 0 22px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(255, 90, 54, .3); background: radial-gradient(500px 200px at 100% 0%, rgba(255, 90, 54, .1), transparent 70%), var(--paper-2); display: grid; gap: 6px; }
.ma-feature-tag { margin: 0; font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
.ma-feature h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.ma-feature p { margin: 0; color: var(--ink-soft); }
.ma-feature .btn { justify-self: start; margin-top: 6px; }
.ma-week-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.ma-week-head strong { font-size: 1.2rem; margin-right: 6px; }
.ma-week-pct { font: 700 1.8rem/1 var(--serif); color: var(--accent); letter-spacing: -0.02em; }
:root[data-theme="light"] .ma-week-pct { color: var(--accent-ink); }
/* Reduced motion: the story as one still picture (both arcs drawn, the second line shown), then the guide. */
@media (prefers-reduced-motion: reduce) {
  .intro-story .splash-story, .intro-story .story-grid, .intro-story .story-pin, .intro-story .story-arc, .intro-story .story-line, .intro-story .story-pin .ring { animation: none !important; }
  .intro-story .story-grid { opacity: .5; }
  .intro-story .story-pin { opacity: 1; }
  .intro-story .story-arc { stroke-dashoffset: 0; }
  .intro-story .story-line.line-1 { display: none; }
  .intro-story .story-line.line-2 { opacity: 1; }
  .intro-story .splash-brand { display: none; }
  .intro-story .splash-skip { opacity: 1; animation: none; }
}
.fa-how li, .ma-how li { align-content: start; }
@media (max-width: 760px) {
  /* On a phone the steps shrink to three titles in a row, so the search box is on the first screen. */
  .fa-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .fa-how li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 6px; gap: 6px; }
  .fa-how li .fa-n { grid-row: auto; }
  .fa-how strong { font-size: 0.8rem; line-height: 1.25; }
  .fa-how span:not(.fa-n) { display: none; }
}