/* SPDX-License-Identifier: MIT — the home's layout under v3.css (body.home.v2.v3; the treatment of mega.io's product
   pages, the owner's reference, docs/review/home-v2.md and promote-v3.md). Dark first, generous dark space, each
   section's object beside it (v3.css's stills), soft studio light under them and glass-lit cards in dark mode. It
   builds on home.css and touches nothing outside body.v2. In light mode every still sits on a dark stage. */

/* The stage and the glass as theme tokens, in tokens.css's pattern: light first, then dark twice (the switch, the OS). */
:root {
  --v2-stage: radial-gradient(130% 95% at 50% 28%, #2B2F35 0%, #17191C 55%, #0A0A0A 100%);   /* gunmetal to ink */
  --v2-stage-edge: inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 1px 0 rgb(255 255 255 / .1);
  --v2-stage-shadow: 0 1px 2px rgb(10 10 10 / .06), 0 32px 64px -36px rgb(10 10 10 / .5);
  --v2-stage-clip: clip; --v2-bleed: 0px;
  --v2-light: rgb(255 255 255 / .1);          /* the studio light under a still */
  --v2-alt: var(--bg-alt);
  --v2-glass: var(--bg-raised); --v2-glass-sunken: var(--bg-sunken); --v2-glass-line: var(--hair);
  --v2-glass-top: var(--hair);
  --hero-dim: #737373;                        /* the hero's third line: dimmer than --fg-2, 4.74:1 on white */
}
:root[data-theme="dark"] {
  --v2-stage: none; --v2-stage-edge: 0 0 #0000; --v2-stage-shadow: 0 0 #0000; --v2-stage-clip: visible;
  --v2-light: rgb(255 255 255 / .065); --v2-alt: var(--bg); --v2-bleed: var(--s-5);
  --v2-glass: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .022)), var(--bg);
  --v2-glass-sunken: rgb(255 255 255 / .035); --v2-glass-line: rgb(255 255 255 / .09);
  --v2-glass-top: rgb(255 255 255 / .17);
  --hero-dim: #858585;                        /* 5.37:1 on #0A0A0A */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v2-stage: none; --v2-stage-edge: 0 0 #0000; --v2-stage-shadow: 0 0 #0000; --v2-stage-clip: visible;
    --v2-light: rgb(255 255 255 / .065); --v2-alt: var(--bg); --v2-bleed: var(--s-5);
    --v2-glass: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .022)), var(--bg);
    --v2-glass-sunken: rgb(255 255 255 / .035); --v2-glass-line: rgb(255 255 255 / .09);
    --v2-glass-top: rgb(255 255 255 / .17);
    --hero-dim: #858585;
  }
}
@media (prefers-contrast: more) { :root, :root[data-theme] { --hero-dim: var(--fg-2); } }

.v2 { --sec-pad: 72px; }
@media (min-width: 1024px) { .v2 { --sec-pad: 120px; } }
.v2 .sec.alt { background: var(--v2-alt); }

/* ---------- the stage: a still's card, its light pooled behind the object (v3.css places and fades the picture) ---------- */
.v2 .stage {
  --ar: 4 / 3; --fade: 86%;
  position: relative; isolation: isolate; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: var(--ar);
  border-radius: var(--r-panel); background: var(--v2-stage); box-shadow: var(--v2-stage-edge), var(--v2-stage-shadow);
  overflow: var(--v2-stage-clip); pointer-events: none; user-select: none;
}
.v2 .stage::before {   /* soft light from above, pooled behind the object */
  content: ""; position: absolute; inset: -6% -10% 2%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 46%, var(--v2-light), transparent);
}

/* ---------- hero: the words on the left, the drive on the right; the slice of a drive below, as on the home ---------- */
.v2 .hero { padding-top: var(--s-7); }
.v2-hero { display: grid; gap: var(--s-5); align-items: center; }
.v2-hero-copy { display: grid; justify-items: start; }
.v2 .hero h1 { font-size: clamp(34px, 10vw, 68px); line-height: 1.02; }
.v2 .h1-2 { font-size: clamp(17px, 5vw, 34px); line-height: 1.22; letter-spacing: -.025em; margin-top: .45em; text-wrap: balance; }
.v2 .hero .cta-row { justify-content: flex-start; }
.v2-object { width: 100%; max-width: 520px; margin-inline: auto; }
.motion .v2 .hero .stage { animation: pop .7s 160ms var(--ease-out) both; }
.v2 .slice { width: 100%; margin-top: var(--s-7); }
@media (min-width: 960px) {
  .v2 .hero { padding-top: var(--s-8); }
  .v2-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--s-7); }
  .v2 .h1-2 { font-size: clamp(27px, 2.9vw, 34px); }   /* the tagline on one line beside the still, 960 px and up */
  .v2-object { max-width: none; }
  .v2 .hero .stage { --ar: 5 / 4; max-width: none; margin-right: calc(-1 * var(--v2-bleed)); width: auto; }
  .v2 .slice { margin-top: var(--s-8); }
}

/* ---------- the frosted cards in dark mode: lit from above (a white gradient, 6 % to 2 %, and a brighter top edge) inside
   a white hairline, on an opaque base. No backdrop blur: nothing sits behind them but the page. Light mode keeps the
   drive's plain cards. ---------- */
.v2 :is(.slice, .share-card, .side:not(.yours), .chain-rows, .coin-box) {
  background: var(--v2-glass); border-color: var(--v2-glass-line); border-top-color: var(--v2-glass-top);
}
.v2 .slice-head { background: var(--v2-glass-sunken); }
@media (prefers-contrast: more) {
  .v2 :is(.slice, .share-card, .side:not(.yours), .chain-rows, .coin-box) { background: var(--bg-raised); border-color: var(--line); }
}

/* ---------- What's different: the file going through the lock beside the question, the table below ---------- */
.v2-lead { display: grid; gap: var(--s-5); align-items: center; margin-bottom: var(--s-6); }
.v2-lead .sec-head { margin-bottom: 0; }
.v2 .compare { max-width: none; }
.v2 .compare td { text-wrap: pretty; }
.v2 .compare-note { max-width: none; margin-left: 0; text-align: left; }
@media (min-width: 900px) {
  .v2-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage head"; gap: var(--s-8); margin-bottom: var(--s-7); }
  .v2-lead .stage { grid-area: stage; max-width: none; }
  .v2-lead .sec-head { grid-area: head; }
}

/* ---------- Who sees what: the four sides beside the frosted box, which stays in view while they pass ---------- */
.v2-who { display: grid; gap: var(--s-5); align-items: start; }
.v2-who .stage { max-width: 480px; }
@media (min-width: 1000px) {
  .v2-who { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "cards stage"; gap: var(--s-7); }
  .v2-who .sides { grid-area: cards; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-who .stage { --ar: 1 / 1; grid-area: stage; position: sticky; top: 96px; max-width: none; }
}

/* ---------- Tari does the private parts: the coin beside its words, held in view while they pass ---------- */
.v2-chain { display: grid; gap: var(--s-5); }
.v2-chain .sec-head { margin-bottom: 0; }
@media (min-width: 960px) {
  .v2-chain {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "stage head" "stage rows" "stage coin"; column-gap: var(--s-8); row-gap: var(--s-5); align-items: start;
  }
  .v2-chain .sec-head { grid-area: head; }
  .v2-chain .chain-rows { grid-area: rows; }
  .v2-chain .coin-box { grid-area: coin; }
  .v2-chain .stage { --ar: 1 / 1; grid-area: stage; position: sticky; top: 96px; max-width: none; }
}

/* ---------- the closing: the drive again, smaller, over the last ask ---------- */
.v2 .end { --end-pad: var(--sec-pad); }
.v2 .closing .stage { width: min(100%, 440px); margin-bottom: var(--s-2); }
@media (min-width: 640px) { .v2 .closing .stage { --ar: 5 / 4; } }