/* Archive AI Trial.
 *
 * The rule this file follows: the *style* is the live site's, unchanged — same tokens, same fonts,
 * same type scale, same button/input/card treatment, same accent discipline (Signal Blue carries
 * eyebrow rules, links, active state and focus; Archive Amber stays rationed). Anyone landing here
 * from vaultlinesolutions.com should see the same hand.
 *
 * What differs is the *layout*: how the page is organised, not how it is finished.
 *
 *   spine    a measured left margin with section designations hanging in it, so the page reads as
 *            a numbered sequence rather than a stack of centred sections
 *   bays     hairline-separated horizontal registers, not a centred hero followed by cards
 *   chassis  status, intake and media live inside one continuous panel as sub-registers, rather
 *            than as three separate floating panels
 *   signal   the pipeline is a connected horizontal chain wired to the archive's real state
 *   readout  metrics as a divided strip across the panel's foot
 *   compare  a ruled spec table, which the homepage has no equivalent of
 */

:root {
  --ink: #0B0F14;
  --surface: #151B23;
  --surface-2: #1A2129;
  --text: #F4F1EA;
  --muted: #7D8896;
  --dim: #7A8592;
  --blue: #4C8DFF;
  --amber: #D7A84F;
  --green: #6FB98F;
  --red: #C96B5A;
  --line: rgba(244, 241, 234, .075);
  --line-2: rgba(244, 241, 234, .14);
  --sans: "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --pad: 32px;
  --spine: 84px;
  --shadow: 0 60px 140px -60px rgba(0, 0, 0, .95);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 16px;
  line-height: 1.55; font-synthesis: none; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: rgba(244, 241, 234, .18) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(244, 241, 234, .14); border-radius: 99px;
  border: 3px solid var(--ink); background-clip: padding-box;
}
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }
}
@media (max-width: 760px) { :root { --pad: 20px; --spine: 0px; } }

/* --- type: the site's scale, unchanged ------------------------------------------------------- */

h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
h1 { font-size: clamp(29px, 6.2vw, 64px); letter-spacing: -.042em; line-height: 1.02; }
h2 { font-size: clamp(27px, 3.3vw, 40px); }
h3 { font-size: clamp(17px, 1.7vw, 20px); letter-spacing: -.02em; line-height: 1.25; }
h1 .l, h2 .l { display: block; text-wrap: balance; }
h1 .l1, h2 .l1 { color: rgba(244, 241, 234, .40); }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--blue); flex: none; }
.lead { color: var(--muted); font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.6; max-width: 58ch; }
.lead b { color: var(--text); font-weight: 500; }
.fine { font-family: var(--mono); font-size: 11.5px; color: var(--dim); line-height: 1.7; }
.desig {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim); display: block;
}

/* --- buttons and links: the site's, unchanged ------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 500;
  font-size: 15px; padding: 13px 20px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .18s, border-color .18s, box-shadow .18s, opacity .18s;
}
.btn .a { font-family: var(--mono); font-weight: 400; font-size: 13px; transition: transform .2s; }
.btn:hover:not(:disabled) .a { transform: translateX(3px); }
.btn-primary { background: var(--text); color: var(--ink); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(244, 241, 234, .35); }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: rgba(244, 241, 234, .02); }
.btn-ghost:hover:not(:disabled) { border-color: var(--muted); background: rgba(244, 241, 234, .05); }
.btn:disabled { opacity: .62; cursor: default; }
.btn:disabled:hover { box-shadow: none; }
.btn-sm { padding: 10px 16px; font-size: 13.5px; }
.link {
  color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 12.5px; padding: 0;
  transition: color .18s; white-space: nowrap;
}
.link:hover { color: var(--text); }
.link.danger:hover { color: var(--red); }

/* --- nav: the site's, unchanged ---------------------------------------------------------------- */

#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: rgba(11, 15, 20, .72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
#nav.stuck { border-bottom-color: var(--line); background: rgba(11, 15, 20, .93); }
.nav-in {
  display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px;
  transition: height .28s ease;
}
#nav.stuck .nav-in { height: 62px; }
.brand-logo { width: 146px; height: auto; transition: width .28s ease; }
#nav.stuck .brand-logo { width: 126px; }
.nav-r { display: flex; align-items: center; gap: 20px; min-width: 0; }
.nav-tag { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.nav-who {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 30vw;
}
main { padding-top: 76px; }
@media (max-width: 620px) {
  .nav-in { height: 60px; }
  #nav.stuck .nav-in { height: 54px; }
  .brand-logo { width: 112px; }
  #nav.stuck .brand-logo { width: 104px; }
  .nav-tag { display: none; }
  .nav-r { gap: 14px; }
  .nav-who { max-width: 42vw; font-size: 11.5px; }
  main { padding-top: 60px; }
}
@media (max-width: 400px) { .nav-who { display: none; } }

/* ============================================================================================== */
/* LAYOUT — this is where the trial departs from the homepage.                                    */
/* ============================================================================================== */

/* The spine: a measured left margin carrying section designations, so the page reads as a numbered
   sequence of registers rather than a run of centred sections. */

.bay { position: relative; padding: 52px 0 52px var(--spine); }
.bay + .bay { border-top: 1px solid var(--line); }
.bay::before {
  content: ""; position: absolute; left: calc(var(--spine) - 40px); top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.bay::after {
  content: ""; position: absolute; left: calc(var(--spine) - 46px); top: 60px; width: 13px;
  height: 1px; background: var(--line-2);
}
.bay > .desig {
  position: absolute; left: 0; top: 52px; width: calc(var(--spine) - 54px); text-align: right;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .bay { padding: 34px 0; }
  .bay::before, .bay::after { display: none; }
  .bay > .desig { position: static; width: auto; text-align: left; margin-bottom: 16px; }
  .bay > .desig br { display: none; }
}

/* The chassis: one continuous panel whose registers are separated by hairlines, rather than three
   panels floating separately. Finished exactly like the site's own console surface. */

.chassis {
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
}
.chassis-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px;
  color: var(--dim); flex-wrap: wrap; background: var(--surface-2);
}
.chassis-head .id { color: var(--text); }
.chassis-head .id b { color: var(--blue); font-weight: 500; }
.chassis-head .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.chassis-head .live { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--blue); }
.chassis-head .live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 2s infinite; }
.chassis-head .live.rest { color: var(--dim); }
.chassis-head .live.rest .d { background: var(--dim); animation: none; }
.chassis-head .live.good { color: var(--green); }
.chassis-head .live.good .d { background: var(--green); animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 141, 255, .5); }
  70% { box-shadow: 0 0 0 7px rgba(76, 141, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 141, 255, 0); }
}
.chassis-body { padding: 24px; }
.chassis-sub { border-top: 1px solid var(--line); }
.chassis-sub > .sub-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 15px 24px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dim);
}
.chassis-sub > .sub-head .aside { letter-spacing: .03em; text-transform: none; font-size: 11px; }
.chassis-sub > .sub-body { padding: 0 24px 24px; }
@media (max-width: 560px) {
  .chassis-body { padding: 18px; }
  .chassis-head { padding: 13px 16px; }
  .chassis-sub > .sub-head { padding: 14px 18px; }
  .chassis-sub > .sub-body { padding: 0 18px 18px; }
}

/* The signal path: a connected horizontal chain. Blue is the live stage, matching the site's
   active-state discipline; green is behind it. */

.signal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .signal { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; } }
@media (max-width: 520px) { .signal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.node { position: relative; padding: 18px 16px 0 0; min-width: 0; }
.node::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--line-2); }
.node .pip {
  position: absolute; left: 0; top: 6px; width: 7px; height: 7px; background: var(--ink);
  border: 1px solid var(--line-2); border-radius: 50%; z-index: 1;
}
.node .n { display: block; margin-top: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; color: var(--dim); }
.node .l { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
.node .d { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.node.done::before { background: rgba(111, 185, 143, .4); }
.node.done .pip { background: var(--green); border-color: var(--green); }
.node.done .n { color: var(--green); }
.node.on::before { background: rgba(76, 141, 255, .45); }
.node.on .pip { background: var(--blue); border-color: var(--blue); animation: pulse 2s infinite; }
.node.on .n { color: var(--blue); }
@media (max-width: 620px) {
  .signal.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 0; }
  .signal.compact .node { padding: 16px 5px 0 0; }
  .signal.compact .node .l, .signal.compact .node .d { display: none; }
  .signal.compact .node .n { margin-top: 15px; font-size: 9px; letter-spacing: .05em; }
}

/* The readout: metrics as a divided strip across the panel's foot. */

/* The next step, shown only once the archive has actually produced something worth
   reacting to. Sits between the status chassis and the readout: after the result, before the
   numbers — the point where someone has just seen it work and the question "what about my real
   archive" is theirs rather than ours. */
.nextstep { border-top: 1px solid var(--line); padding: 22px 20px; display: flex; flex-wrap: wrap;
  gap: 18px 28px; align-items: center; justify-content: space-between;
  background: rgba(244, 241, 234, .015); }
.nextstep.hidden { display: none; }
.ns-head { flex: 1 1 340px; min-width: 0; }
.ns-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dim); }
.ns-lede { margin: 9px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 62ch; }
.ns-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.ns-actions .btn { text-decoration: none; }
.btn-quiet { border-color: var(--line-2); color: var(--text); background: rgba(244, 241, 234, .02); }
.btn-quiet:hover { border-color: var(--muted); background: rgba(244, 241, 234, .05); }
@media (max-width: 640px) { .ns-actions { width: 100%; } .ns-actions .btn { flex: 1 1 auto; justify-content: center; } }

.readout { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cell { padding: 18px 20px; border-left: 1px solid var(--line); min-width: 0; }
.cell:first-child { border-left: 0; }
.cell .k { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.cell .v { margin-top: 8px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.cell .v small { font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
@media (max-width: 860px) {
  .readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cell { border-top: 1px solid var(--line); }
  .cell:nth-child(-n+3) { border-top: 0; }
  .cell:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 520px) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell { padding: 15px 16px; }
  .cell:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .cell:nth-child(odd) { border-left: 0; }
  .cell:nth-child(-n+3) { border-top: 1px solid var(--line); }
  .cell:nth-child(-n+2) { border-top: 0; }
  .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* The system map: your storage, one machine, your team — the custom build as a drawing rather
   than a spec table. The little artworks are pure CSS in the palette's grays; blue stays the
   signal accent, moving along the links. */

.sysmap {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1.12fr) 54px minmax(0, 1fr);
  align-items: stretch; padding: 30px 24px 26px; gap: 0;
}
.sys-node { min-width: 0; display: flex; flex-direction: column; }
.sys-l { margin-top: 16px; font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.sys-node.hub .sys-l { color: var(--text); }
.sys-d { margin-top: 7px; font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 34ch; }
.sys-link { position: relative; }
.sys-link i {
  position: absolute; left: 6px; right: 6px; top: 44px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 10px);
}
.sys-link i::after {
  content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 8px rgba(76, 141, 255, .8);
}
@media (prefers-reduced-motion: no-preference) {
  .sys-link i::after { animation: travel 2.6s ease-in-out infinite; }
  .sys-link + .sys-node + .sys-link i::after { animation-delay: 1.3s; }
  @keyframes travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; }
    88% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
}

/* The artworks: an 88px-tall stage each. Storage is a stack of drive slabs with a live status
   light; the machine is a chassis with meter bars working; the team is two browser windows with
   a search line. All grays, one blue pip each. */
.sys-art { height: 88px; position: relative; }
.sys-art i, .sys-art span { position: absolute; }

.art-storage i {
  left: 0; width: 156px; height: 22px; border: 1px solid var(--line-2); border-radius: 5px;
  background: linear-gradient(180deg, rgba(26, 33, 41, .9), rgba(21, 27, 35, .8));
}
.art-storage i:nth-child(1) { top: 6px; }
.art-storage i:nth-child(2) { top: 33px; }
.art-storage i:nth-child(3) { top: 60px; width: 126px; }
.art-storage i::before {
  content: ""; position: absolute; right: 8px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--dim); opacity: .55;
}
.art-storage i:nth-child(1)::before { background: var(--green); opacity: 1; }
.art-storage i::after {
  content: ""; position: absolute; left: 8px; top: 9px; width: 56px; height: 3px;
  border-radius: 2px; background: var(--line-2);
}
@media (prefers-reduced-motion: no-preference) {
  .art-storage i:nth-child(2)::before { animation: lamp 3.4s infinite; }
  .art-storage i:nth-child(3)::before { animation: lamp 3.4s 1.1s infinite; }
  @keyframes lamp { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
}

.art-engine i {
  bottom: 10px; width: 9px; border-radius: 3px 3px 0 0; background: rgba(76, 141, 255, .55);
}
.art-engine i:nth-child(1) { left: 30px; height: 26px; }
.art-engine i:nth-child(2) { left: 48px; height: 44px; }
.art-engine i:nth-child(3) { left: 66px; height: 18px; }
.art-engine i:nth-child(4) { left: 84px; height: 34px; }
.art-engine::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 156px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: linear-gradient(180deg, rgba(26, 33, 41, .9), rgba(21, 27, 35, .8));
}
.art-engine::after {
  content: "LOCAL AI"; position: absolute; left: 12px; top: 10px; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .16em; color: var(--dim);
}
@media (prefers-reduced-motion: no-preference) {
  .art-engine i { animation: meter 1.9s ease-in-out infinite alternate; transform-origin: bottom; }
  .art-engine i:nth-child(2) { animation-delay: .3s; }
  .art-engine i:nth-child(3) { animation-delay: .6s; }
  .art-engine i:nth-child(4) { animation-delay: .9s; }
  @keyframes meter { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
}

.art-team i {
  border: 1px solid var(--line-2); border-radius: 7px;
  background: linear-gradient(180deg, rgba(26, 33, 41, .95), rgba(21, 27, 35, .85));
}
.art-team i:nth-child(1) { left: 0; top: 4px; width: 124px; height: 66px; }
.art-team i:nth-child(2) { left: 32px; top: 22px; width: 124px; height: 62px; }
.art-team i::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  border-bottom: 1px solid var(--line); border-radius: 7px 7px 0 0;
}
.art-team i::after {
  content: ""; position: absolute; left: 4px; top: 5px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--line-2); box-shadow: 7px 0 0 var(--line-2), 14px 0 0 var(--line-2);
}
.art-team span {
  left: 42px; top: 44px; width: 88px; height: 13px; border: 1px solid rgba(76, 141, 255, .5);
  border-radius: 4px; background: rgba(76, 141, 255, .08); z-index: 1;
}
.art-team span::after {
  content: ""; position: absolute; left: 4px; top: 3px; width: 34px; height: 4px;
  border-radius: 2px; background: rgba(76, 141, 255, .55);
}

.sys-readout .cell .v.good { color: var(--green); }
.sys-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .sysmap { grid-template-columns: 1fr; padding: 24px 20px 20px; }
  .sys-link { height: 34px; }
  .sys-link i { left: 14px; right: auto; top: 5px; bottom: 5px; width: 1px; height: auto;
    background: repeating-linear-gradient(180deg, var(--line-2) 0 5px, transparent 5px 10px); }
  .sys-link i::after { display: none; }
  .sys-art { height: 76px; }
  .sys-d { max-width: 52ch; }
  .sys-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-readout .cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sys-readout .cell:nth-child(3) { border-left: 0; }
}

/* The module chain: the build order as a connected path, with this trial's module lit. */

.modmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .modmap { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } }
@media (max-width: 520px) { .modmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-node { position: relative; padding: 18px 16px 0 0; min-width: 0; }
.mm-node::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--line-2); }
.mm-node .pip {
  position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--line-2); z-index: 1;
}
.mm-node b { display: block; margin-top: 16px; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
.mm-node em {
  font-style: normal; display: inline-block; margin-top: 6px; color: var(--blue);
  font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  border: 1px solid rgba(76, 141, 255, .35); border-radius: 20px; padding: 2px 8px;
}
.mm-node span:not(.pip) { display: block; margin-top: 7px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.mm-node.on::before { background: rgba(76, 141, 255, .45); }
.mm-node.on .pip { background: var(--blue); border-color: var(--blue); animation: pulse 2s infinite; }
.mm-node.on b { color: var(--text); }

/* ============================================================================================== */
/* COMPONENTS — finished exactly like the site's.                                                 */
/* ============================================================================================== */

.status-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.status-line .headline { font-size: clamp(21px, 3.2vw, 28px); font-weight: 600; letter-spacing: -.032em; line-height: 1.1; }
.status-line .detail { color: var(--muted); margin-top: 9px; font-size: 15px; max-width: 54ch; }
@media (max-width: 620px) { .status-line > .btn { width: 100%; } }
.bar { height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin-top: 22px; }
.bar > i { display: block; height: 100%; background: var(--blue); width: 0; transition: width .5s ease; }
.bar.done > i { background: var(--green); }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.tabs button {
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(244, 241, 234, .02);
  color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 9px 15px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.tabs button[aria-selected="true"] {
  color: var(--text); border-color: rgba(76, 141, 255, .55); background: rgba(76, 141, 255, .09);
}
label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dim); margin: 18px 0 7px;
}
input[type=email], input[type=password], input[type=text] {
  width: 100%; background: var(--ink); border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--text); padding: 13px 14px; font: inherit; font-size: 16px; transition: border-color .18s;
}
input:focus { outline: none; border-color: var(--blue); }
.hint { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 9px; }

.notice { border-radius: 9px; padding: 12px 14px; margin-top: 16px; font-size: 14px; }
.notice.error { background: rgba(201, 107, 90, .1); border: 1px solid rgba(201, 107, 90, .4); color: #E8AFA3; }
.notice.info { background: rgba(76, 141, 255, .07); border: 1px solid rgba(76, 141, 255, .28); color: var(--muted); }
.notice.warn { background: rgba(215, 168, 79, .09); border: 1px solid rgba(215, 168, 79, .35); color: var(--amber); }

.aside-note { border-left: 2px solid var(--line-2); padding: 2px 0 2px 18px; }
.aside-note p { font-size: 14.5px; color: var(--muted); line-height: 1.62; max-width: 62ch; }
.aside-note p + p { margin-top: 11px; }
.aside-note b { color: var(--text); font-weight: 500; }

.dropzone {
  border: 1px dashed var(--line-2); border-radius: 12px; padding: 32px 20px; text-align: center;
  background: rgba(244, 241, 234, .015); transition: border-color .15s, background .15s;
}
.dropzone.hot { border-color: var(--blue); background: rgba(76, 141, 255, .06); }
.dropzone .big { font-size: 16px; font-weight: 500; }
.dropzone .sub { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 14px; line-height: 1.8; word-break: break-word; white-space: pre-line; }

.uploads { margin-top: 14px; display: grid; gap: 8px; }
.uprow {
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px;
  background: rgba(21, 27, 35, .7); font-family: var(--mono); font-size: 11.5px;
}
.uprow .top { display: flex; justify-content: space-between; gap: 12px; }
.uprow .name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uprow .pct { color: var(--muted); flex: none; }
.uprow .track { height: 2px; background: var(--line-2); border-radius: 2px; margin-top: 9px; overflow: hidden; }
.uprow .track > i { display: block; height: 100%; background: var(--blue); width: 0; transition: width .2s linear; }
.uprow.ok .track > i { background: var(--green); }
.uprow.ok .pct { color: var(--green); }
.uprow.err { border-color: rgba(201, 107, 90, .4); }
.uprow.err .pct, .uprow.err .why { color: var(--red); }
/* Paused, not refused: the host is behind on processing and the file can be sent again shortly.
   Amber rather than red, because red means "this will never work". */
.uprow.warn { border-color: rgba(215, 168, 79, .4); }
.uprow.warn .pct, .uprow.warn .why { color: var(--amber); }
.uprow .why { margin-top: 7px; color: var(--muted); white-space: normal; line-height: 1.5; }

/* Media, in the site's own card treatment. */

.assets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 940px) { .assets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .assets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .assets { grid-template-columns: 1fr; } }
.acard {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(21, 27, 35, .7);
  min-width: 0; transition: border-color .18s, background .18s;
}
.acard:hover { border-color: var(--line-2); background: rgba(26, 33, 41, .9); }
.athumb {
  aspect-ratio: 16 / 9; position: relative; display: flex; align-items: center; justify-content: center;
  background: #0D1218; overflow: hidden;
}
.athumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.acard:hover .athumb img { transform: scale(1.06); }
.athumb .glyph { font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: .18em; }
.athumb .kindtag {
  position: absolute; top: 6px; left: 6px; z-index: 2; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
  background: rgba(11, 15, 20, .74); padding: 3px 7px; border-radius: 5px;
}
.athumb .dur {
  position: absolute; bottom: 6px; right: 6px; z-index: 2; font-family: var(--mono); font-size: 9px;
  color: var(--text); background: rgba(11, 15, 20, .74); padding: 3px 7px; border-radius: 5px;
}
.athumb .working {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 15, 20, .6);
}
.athumb .working span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.ameta { padding: 12px 13px 14px; }
.ameta .t { font-size: 14px; font-weight: 500; line-height: 1.3; word-break: break-word; letter-spacing: -.01em; }
.ameta .f { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 7px; }
.stages { display: flex; gap: 5px; margin-top: 11px; flex-wrap: wrap; }
.stage {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 20px; padding: 3px 8px; color: var(--dim);
}
.stage.done { color: var(--green); border-color: rgba(111, 185, 143, .32); }
.stage.work { color: var(--blue); border-color: rgba(76, 141, 255, .32); }
.tags { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.tags span {
  font-family: var(--mono); font-size: 9.5px; color: var(--blue); border: 1px solid rgba(76, 141, 255, .3);
  border-radius: 20px; padding: 3px 8px;
}
.ameta .err { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--red); }
.acard .rm { margin-top: 12px; }
.empty { font-family: var(--mono); font-size: 11.5px; color: var(--dim); line-height: 1.8; }

.log { max-height: 220px; overflow: auto; font-family: var(--mono); font-size: 11.5px; }
.log div { padding: 6px 0; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 14px; }
.log div:first-child { border-top: 0; }
.log .ts { color: var(--dim); flex: none; }
.log .error { color: var(--red); }
.log .warn { color: var(--amber); }

footer { border-top: 1px solid var(--line); }
footer .in { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 28px 0 40px; }
@supports (padding: max(0px)) { footer .in { padding-bottom: max(40px, env(safe-area-inset-bottom)); } }
footer p { font-family: var(--mono); font-size: 11px; color: var(--dim); max-width: 60ch; line-height: 1.85; }


/* The landing's sign-in bay: the form and what happens next, side by side inside one chassis. */
.signin-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 34px; }
@media (max-width: 900px) { .signin-grid { grid-template-columns: 1fr; gap: 26px; } }
.signin-aside { border-left: 1px solid var(--line); padding-left: 30px; min-width: 0; }
@media (max-width: 900px) {
  .signin-aside { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 22px; }
}
.signin-aside .signal { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
@media (max-width: 520px) { .signin-aside .signal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Files the batch left out, and why. A dropped folder of finished cuts is mostly over the limit,
   and a wall of red upload failures is a worse answer than one list saying what was skipped. */
.dz-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.skipped-wrap { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(21, 27, 35, .7); }
.skipped-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); padding: 11px 13px; border-bottom: 1px solid var(--line);
}
.skipped { max-height: 190px; overflow: auto; font-family: var(--mono); font-size: 11px; }
.skipped div {
  display: flex; justify-content: space-between; gap: 14px; padding: 7px 13px;
  border-top: 1px solid var(--line); color: var(--muted);
}
.skipped div:first-child { border-top: 0; }
.skipped .sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skipped .sr { color: var(--dim); flex: none; }


/* A destructive action gets a decision, not a link that fires on the first tap. */
.modal-scrim {
  position: fixed; inset: 0; z-index: 200; background: rgba(5, 7, 10, .72);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal {
  width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: var(--shadow); padding: 24px;
}
.modal h3 { font-size: 19px; letter-spacing: -.025em; }
.modal .modal-body { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 12px; }
.modal .modal-body b { color: var(--text); font-weight: 500; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

/* An upload whose bytes are sent but whose contents have not been judged yet. */
.uprow.checking .track > i { background: var(--amber); }
.uprow.checking .pct { color: var(--amber); }


/* --- census: the pre-flight look at a chosen folder, before a single byte moves ---------------- */

.census { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(21, 27, 35, .7); }
.census-head, .transfer-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line);
}
.census-head .aside, .transfer-head .aside { letter-spacing: .03em; text-transform: none; color: var(--muted); }
.census-tree { max-height: 260px; overflow: auto; padding: 10px 13px; font-family: var(--mono); font-size: 11.5px; }
.census-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 13px; border-top: 1px solid var(--line); }

/* Folder nodes: <details> gives keyboard-operable disclosure for free, styled to sit inside the
   census the same way a chassis-sub register does. */
.ctree { list-style: none; }
.ctree > li { margin: 2px 0; }
.ctree > li > .cflat { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--muted); }
.cnode > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 5px 0; color: var(--text);
  list-style: none;
}
.cnode > summary::-webkit-details-marker { display: none; }
.cnode > summary::before {
  content: "▸"; color: var(--dim); font-size: 10px; transition: transform .15s; flex: none;
}
.cnode[open] > summary::before { transform: rotate(90deg); }
.cnode > summary .cn-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnode > summary .cn-meta { color: var(--dim); flex: none; }
.cnode > .ctree { margin-left: 16px; border-left: 1px solid var(--line); padding-left: 12px; }
.cleaf-files { margin-left: 16px; padding-left: 13px; color: var(--dim); }
.cleaf-files div { padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- transfer: overall progress, above the existing per-file rows ------------------------------ */

.transfer { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(21, 27, 35, .7); }
.transfer-now {
  padding: 12px 13px 0; font-family: var(--mono); font-size: 11.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.transfer-now small { color: var(--dim); margin-left: 8px; }
#transfer-bar { margin: 10px 13px 13px; }


/* --- media grouped by the folder it was ingested into ------------------------------------------- */

.asset-group + .asset-group { margin-top: 26px; }
.ag-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.ag-head .ag-count { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* A control that reads as a link but is a button, so it is reachable by keyboard and screen
   reader as the action it actually performs — "ask for a reset email" is not navigation. */
.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linkish:hover { color: var(--ink); }


/* ============================================================================================== */
/* THE LANDING — the promise, then the interface, then the button. Nothing else above the fold.   */
/* ============================================================================================== */

/* The hero carries one sentence and one control. It gets room rather than ornament: no eyebrow,
   no dimmed second line, no panel. The console below it is meant to be visible at the fold on a
   laptop, which is why this stops short of filling the viewport. */

.hero { padding-top: clamp(48px, 9vh, 96px); padding-bottom: clamp(38px, 7vh, 68px); }
.hero h1 { max-width: 17ch; }
.lead-hero { margin-top: 20px; font-size: clamp(16px, 1.75vw, 20px); max-width: 52ch; color: var(--muted); }
.hero-cta { margin-top: 32px; display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; }
.hero-cta .fine { max-width: 34ch; }
.btn-lg { padding: 16px 26px; font-size: 16.5px; border-radius: 10px; }
@media (max-width: 520px) {
  .hero-cta .btn { width: 100%; }
  .hero-cta .fine { max-width: none; }
}

/* The console: the Archive search view, in the chassis the rest of the page already uses. A left
   rail of filters, a query line, and timecoded result rows — the transcript hit is the row's
   subject, because "what was said" is the search nobody else can answer. */

.console .con-body { display: grid; grid-template-columns: 208px minmax(0, 1fr); }
@media (max-width: 860px) { .console .con-body { grid-template-columns: 1fr; } }

.con-rail { border-right: 1px solid var(--line); padding: 20px 0 24px; min-width: 0; }
@media (max-width: 860px) { .con-rail { display: none; } }
.rail-k {
  display: block; padding: 0 20px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
.rail-grp { margin: 10px 0 22px; }
.rail-grp:last-child { margin-bottom: 0; }
.rail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 20px; font-size: 13px; color: var(--muted); min-width: 0;
}
.rail-row b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row span { font-family: var(--mono); font-size: 10.5px; color: var(--dim); flex: none; }
.rail-row.on { color: var(--text); background: rgba(76, 141, 255, .07); box-shadow: inset 2px 0 0 var(--blue); }
.rail-row.on span { color: var(--blue); }

.con-main { padding: 20px; min-width: 0; }
@media (max-width: 560px) { .con-main { padding: 16px; } }

.con-search {
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 11px;
  padding: 14px 16px; background: var(--ink); font-family: var(--mono); font-size: 14px; min-width: 0;
}
.con-search .p { color: var(--amber); flex: none; }
.con-search .qt { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con-search .cur {
  width: 8px; height: 16px; background: var(--blue); display: inline-block; flex: none;
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (max-width: 560px) { .con-search { font-size: 12.5px; padding: 12px 13px; gap: 9px; } }

.con-chips { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }
.con-chips button {
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(244, 241, 234, .02);
  color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 8px 14px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.con-chips button:hover { color: var(--text); border-color: var(--muted); }
.con-chips button[aria-pressed="true"] {
  color: var(--text); border-color: rgba(76, 141, 255, .55); background: rgba(76, 141, 255, .09);
}

.con-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-bottom: 11px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.con-meta .h { color: var(--blue); flex: none; }

.con-results { min-height: 268px; }
@media (max-width: 560px) { .con-results { min-height: 340px; } }
.res {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 0 16px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.res:last-child { border-bottom: 0; }
.res-tc { font-family: var(--mono); font-size: 11.5px; color: var(--blue); padding-top: 2px; }
.res-b { min-width: 0; }
.res-t { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.res-t mark { background: rgba(215, 168, 79, .17); color: var(--amber); padding: 1px 3px; border-radius: 3px; }
.res-t.quote { color: var(--muted); font-style: italic; }
.res-t.quote mark { font-style: normal; }
.res-f {
  margin-top: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The archive's own tag treatment: what the model saw, in the accent it uses everywhere else. */
.res-tags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.res-tags span {
  font-family: var(--mono); font-size: 9.5px; color: var(--blue);
  border: 1px solid rgba(76, 141, 255, .3); border-radius: 20px; padding: 3px 8px;
}
.res-x { display: flex; gap: 5px; flex: none; padding-top: 1px; flex-wrap: wrap; justify-content: flex-end; }
.res-x span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 20px; padding: 3px 8px; color: var(--dim);
}
@media (max-width: 620px) {
  .res { grid-template-columns: 60px minmax(0, 1fr); gap: 0 12px; }
  .res-x { grid-column: 2; margin-top: 9px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  .res { animation: resin .34s ease both; }
  @keyframes resin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}

.con-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  padding: 18px 20px; border-top: 1px solid var(--line); background: rgba(244, 241, 234, .015);
}
.con-foot .fine { max-width: 52ch; }
@media (max-width: 560px) { .con-foot .btn { width: 100%; } }

/* The hero's button lands here, clear of the fixed bar. */
#start { scroll-margin-top: 92px; }
@media (max-width: 620px) { #start { scroll-margin-top: 72px; } }

/* --- ambience and motion ----------------------------------------------------------------------
   Two rules govern everything here. It must say nothing — decoration never carries information,
   so a visitor with reduced motion or an old browser loses nothing but shimmer. And it must stay
   in the palette's whisper range: hairline grays, one blue element per composition. */

/* The hero's editing timeline: three tracks of clip segments under a tick ruler, one playhead
   drifting across. It sits in the hero's empty right half and stays out of reading range. */
.hero-tl {
  position: absolute; right: 0; top: clamp(96px, 24%, 170px); height: 124px; width: min(38%, 430px);
  pointer-events: none; opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}
@media (max-width: 900px) { .hero-tl { display: none; } }
.tl-ruler {
  position: absolute; left: 0; right: 0; top: 0; height: 10px;
  border-bottom: 1px solid var(--line-2);
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 14px);
  background-size: auto 6px; background-repeat: repeat-x; background-position: bottom;
}
.tl-track { position: absolute; left: 0; right: 0; height: 24px; border-radius: 4px; }
.tl-track.t1 { top: 26px; background:
  linear-gradient(90deg, rgba(244, 241, 234, .05) 0 34%, transparent 34% 37%,
    rgba(244, 241, 234, .075) 37% 71%, transparent 71% 74%, rgba(244, 241, 234, .05) 74% 100%); }
.tl-track.t2 { top: 58px; background:
  linear-gradient(90deg, transparent 0 9%, rgba(244, 241, 234, .07) 9% 48%, transparent 48% 51%,
    rgba(244, 241, 234, .045) 51% 86%, transparent 86% 100%); }
.tl-track.t3 { top: 90px; background:
  linear-gradient(90deg, rgba(215, 168, 79, .10) 0 22%, transparent 22% 25%,
    rgba(244, 241, 234, .055) 25% 58%, transparent 58% 62%, rgba(244, 241, 234, .07) 62% 100%); }
.tl-head {
  position: absolute; top: 0; bottom: 0; left: 30%; width: 1px;
  background: rgba(76, 141, 255, .55);
}
.tl-head::before {
  content: ""; position: absolute; top: 0; left: -4px; border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent; border-top: 6px solid rgba(76, 141, 255, .8);
}
@media (prefers-reduced-motion: no-preference) {
  .tl-head { animation: shuttle 26s ease-in-out infinite alternate; }
  @keyframes shuttle { 0% { left: 12%; } 42% { left: 64%; } 55% { left: 58%; } 100% { left: 92%; } }
}

/* Arrival: the hero's three registers rise in, in reading order. Everything is fully present
   without the animation. */
@media (prefers-reduced-motion: no-preference) {
  .up { animation: rise .65s cubic-bezier(.2, .7, .3, 1) both; }
  .u2 { animation-delay: .12s; }
  .u3 { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Scroll reveal: .rv is inert until script confirms it can watch the viewport, so with no
   JavaScript, no IntersectionObserver, or reduced motion the page simply stands there finished.
   The armed class comes from trial.js, and .rv-in arrives per element as it enters view. */
@media (prefers-reduced-motion: no-preference) {
  .rv-armed .rv { opacity: 0; transform: translateY(16px); }
  .rv-armed .rv.rv-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
}