/* The home page's Portal story (docs/design/home-portal-story/brief.md, look B "Window"). Loaded after site.css, only
   by index.html. Brand kit v7: background 43 Teal Veil drawn as linear washes, the master Void O, no glows, no
   gradient text, nothing that loops. Motion: the mark turns in once (900 ms), the Portal window enters once (T1,
   240 ms), tabs cross-fade (T9, 200 ms); all of it is still with reduced motion. */
@property --hs-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.home-story {
  --hs-plate: #101C25;
  --hs-line: rgba(186, 230, 253, 0.14);
  --hs-white: #F2F2EF;
  --hs-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* The header's Portal button is drawn quiet here (ghost colours): the hero's is the page's one sky button. */
.home-story .btn-primary { box-shadow: none; }
.home-story .btn-primary:hover { box-shadow: none; transform: none; }
.home-story .nav .btn-primary { border-color: rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.06); color: var(--sky); }
.home-story .nav .btn-primary:hover { border-color: var(--sky); background: rgba(56, 189, 248, 0.12); color: var(--sky-hover); }
.home-story .nav .btn-primary .live-dot.dark { background: var(--sky); }
.home-story .btn-ghost:hover { transform: none; }
/* The header's live dot sits still here: the page's motion is the mark and the window, once. */
.home-story .live-dot, .home-story .live-dot:not(.dark) { box-shadow: none; animation: none; }

/* ----------------------------------------------------------------- hero */
.hs-hero {
  background: linear-gradient(160deg, #061116 0%, #071A1F 45%, #061116 100%);
  padding-block: 72px 80px;
}
.hs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.hs-copy { min-width: 0; }
.hs-hero h1 { margin: 0; color: var(--hs-white); font: 700 64px/1.04 var(--font); letter-spacing: -0.025em; text-wrap: balance; }
.hs-brandline { margin: 14px 0 0; color: var(--sky); font: 600 21px/1.3 var(--font); }
.hs-lede { margin: 18px 0 0; max-width: 56ch; color: var(--soft); font-size: 17px; line-height: 1.6; }
.hs-act { margin-top: 28px; }
.hs-cta { min-height: 52px; padding-inline: 26px; font-size: 17px; gap: 10px; }
.hs-cta svg { width: 18px; height: 18px; }
.hs-note { margin: 12px 0 0; color: var(--muted); font-size: 15px; }

/* A reading: what it is, the figure out of its whole, what it counts, then its source and time. */
.hs-proof { margin: 36px 0 0; border-top: 1px solid var(--hs-line); }
.hs-reading { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hs-line); }
.hs-reading dt { grid-column: 2; color: var(--muted); font: 600 12px/1.4 var(--mono); letter-spacing: 0.06em; }
.hs-reading dd { margin: 0; grid-column: 2; }
.hs-reading .hs-fig { grid-column: 1; grid-row: 1 / span 3; align-self: center; color: var(--hs-white); font: 600 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.hs-reading .hs-fig small { color: var(--muted); font-size: 14px; font-weight: 400; }
.hs-reading .hs-fig:empty::before { content: "–"; color: var(--muted); }
.hs-what { color: var(--soft); font-size: 14px; line-height: 1.45; }
.hs-src { color: var(--muted); font: 400 12px/1.4 var(--mono); }
.hs-up { color: #34D399; }
.hs-down { color: #F43F5E; }

/* --------------------------------------------------------------- window */
.hs-window { min-width: 0; border: 1px solid var(--hs-line); border-radius: var(--radius); overflow: hidden; background: var(--hs-plate); }
.hs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hs-line); color: var(--muted); font: 400 13px/1 var(--mono); }
.hs-mark { width: 22px; height: 22px; }
.hs-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--hs-line); }
.hs-tab {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 8px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--muted); font: 600 15px/1.2 var(--font); cursor: pointer;
}
.hs-tab:hover { color: var(--soft); }
.hs-tab[aria-selected="true"] { background: rgba(56, 189, 248, 0.12); color: var(--hs-white); }
.hs-tab:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.hs-shot { display: block; }
.hs-shot video, .hs-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1108 / 642; object-fit: cover; object-position: top left; }
.hs-cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--hs-line); }
.hs-cap p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; }
.hs-more { flex: none; padding-block: 10px; color: var(--sky); font-weight: 600; text-decoration: none; }
.hs-more:hover { color: var(--sky-hover); text-decoration: underline; }

/* ------------------------------------------------------------------ faq */
.hs-faq { border-top: 1px solid var(--hs-line); padding-block: 72px; }
.hs-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.hs-faq h2 { margin: 0; color: var(--hs-white); font: 700 34px/1.15 var(--font); letter-spacing: -0.015em; }
.hs-faq details { border-bottom: 1px solid var(--hs-line); padding-block: 18px; }
.hs-faq summary { color: var(--hs-white); font-weight: 600; cursor: pointer; }
.hs-faq summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; border-radius: 4px; }
.hs-faq details p { margin: 10px 0 0; max-width: 60ch; color: var(--soft); line-height: 1.6; }

/* ------------------------------------------------------------------ bot */
.hs-bot { border-top: 1px solid var(--hs-line); padding-block: 40px; }
.hs-bot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hs-bot p { margin: 0; color: var(--soft); }
.hs-bot strong { color: var(--hs-white); }
.hs-bot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.hs-bot-links a { padding-block: 12px; color: var(--sky); font-weight: 600; text-decoration: none; }
.hs-bot-links a:hover { color: var(--sky-hover); text-decoration: underline; }

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .hs-mark {
    -webkit-mask: conic-gradient(#000 var(--hs-sweep), transparent 0);
    mask: conic-gradient(#000 var(--hs-sweep), transparent 0);
    animation: hs-sweep 900ms var(--hs-ease) 120ms both;
  }
  .hs-window { animation: hs-enter 240ms var(--hs-ease) 200ms both; }
  .hs-tab { transition: background-color 200ms var(--hs-ease), color 200ms var(--hs-ease); }
  .hs-pane.is-in { animation: hs-fade 200ms var(--hs-ease) both; }
}
@keyframes hs-sweep { from { --hs-sweep: 0deg; } to { --hs-sweep: 360deg; } }
@keyframes hs-enter { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  .hs-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
  .hs-hero { padding-block: 36px 48px; }
  .hs-hero h1 { font-size: 42px; }
  .hs-brandline { font-size: 19px; }
  .hs-lede { font-size: 16px; }
  .hs-cta { display: flex; width: 100%; justify-content: center; }
  .hs-reading { grid-template-columns: minmax(0, 1fr); }
  .hs-reading .hs-fig { grid-column: 1; grid-row: auto; }
  .hs-reading dt, .hs-reading dd { grid-column: 1; }
  .hs-reading dt { order: -1; }
  .hs-tab { font-size: 14px; padding-inline: 4px; }
  .hs-cap { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hs-faq { padding-block: 48px; }
  .hs-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hs-faq h2 { font-size: 27px; }
}