/* SPDX-License-Identifier: MIT — the home (site v2: 17-site-brief §3, 17-brand.md; since the twelfth pass the v3
   design, docs/review/promote-v3.md): the words, Open your drive in the brand fill, the drive slice, Just share one
   thing (the anonymous widget, its ids and A-06 budget unchanged), Share it your way, the comparison, who sees what,
   the Tari part with What's tTARI?, and the closing. v2.css and v3.css load after this file and lay the page out
   (body.home.v2.v3: the stills beside each section, dark first); /v2 loads this file and v2.css.
   Its words are set in Geist-Latin.woff2, an 18 KB subset of the drive's pinned Geist (400 to 700, Latin-1;
   17-site-brief §1.2); the drive's code loads only after a drive action (A-06). */
@font-face {
  font-family: "Geist";
  src: url("/shared/fonts/geist/Geist-Latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193;
}
:root { --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; }

.home main { overflow-x: clip; }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 2; isolation: isolate; padding-top: var(--s-8); }
.hero h1 { font: 650 clamp(34px, 8.6vw, 68px)/1.04 var(--font); letter-spacing: -.045em; }
.h1-2 { display: block; color: var(--fg-2); }
.hero .lede { font: var(--t-say); font-size: clamp(17px, 1.6vw, 20px); max-width: 40rem; margin-top: var(--s-5); }
.hero-note { margin-top: var(--s-3); font: var(--t-small); color: var(--fg-2); }
@media (min-width: 1024px) { .hero { padding-top: var(--s-9); } }

/* Open your drive (site v3): one big lime button, the page's only action. Two links share the label, and
   theme.js's data-has-drive shows the one that fits: /drive?make makes a drive, /drive?open opens it. */
.cta-row { display: flex; justify-content: center; margin-top: var(--s-6); width: 100%; }
.btn-xl {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; width: min(100%, 22rem); padding: 0 30px;
  border: 0; border-radius: var(--r-btn); font: 600 17px/1 var(--font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  background: var(--brand-solid); color: var(--on-brand); box-shadow: inset 0 0 0 1px var(--brand-edge);
  transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out);
}
.btn-xl .icon { width: 18px; height: 18px; }
.btn-xl:hover { background: var(--brand-solid-hover); }
.btn-xl:active { scale: .97; }
:root[data-has-drive] .cta-make, :root:not([data-has-drive]) .cta-open { display: none; }
@media (min-width: 640px) { .btn-xl { width: auto; min-width: 15rem; } }

/* site v3: the hero arrives (html.motion: scripts on and motion allowed). Each line rises 20 px out of an 8 px
   blur, 60 ms apart; the button grows from 95 %; the picture rises 40 px. Its words wait for the motion module to
   decode them, 3 s at most (then they simply show; .dc-run keeps them unseen until it starts). */
@keyframes rise { from { opacity: 0; translate: 0 20px; filter: blur(8px); } }
@keyframes pop { from { opacity: 0; scale: .95; filter: blur(8px); } }
@keyframes lift { from { opacity: 0; translate: 0 40px; } }
@keyframes dc-wait { from { opacity: 0; } }
.motion .hero h1 { animation: rise .7s var(--ease-out) both; }
.motion .h1-2 { animation: rise .7s 60ms var(--ease-out) both; }
.motion .hero .lede { animation: rise .7s 120ms var(--ease-out) both; }
.motion .hero .cta-row { animation: pop .7s 180ms var(--ease-out) both; }
.motion .hero-note { animation: rise .7s 240ms var(--ease-out) both; }
.motion .slice { animation: lift .7s 300ms var(--ease-out) both; }
.motion:not(.mo) .slice :is(.slice-tile, .slice-title, .slice-cols span, li > .icon, .name, .badge, .state) { animation: dc-wait .2s 3s backwards; }
.dc-run :is(.slice-tile, .slice-title, .slice-cols span, li > .icon, .name, .badge, .state) { opacity: 0; }

/* the picture: a slice of a drive, inert, hanging 56 px into the next section */
.slice {
  position: relative; z-index: 1; width: min(100%, 860px); margin: var(--s-7) auto -56px; text-align: left;
  border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow-lg);
  overflow: hidden; pointer-events: none; user-select: none;
}
.slice-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair); background: var(--bg-sunken); }
.slice-tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-input); background: var(--act); color: var(--on-act); }
.slice-tile .icon { width: 15px; height: 15px; }
.slice-title { font: var(--t-h3); letter-spacing: -.01em; margin-right: auto; }
.slice-cols { display: none; }
.slice-rows { list-style: none; margin: 0; padding: 0; }
.slice-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 16px; font: var(--t-small); }
.slice-rows li:not([hidden]) ~ li { border-top: 1px solid var(--hair); }
.slice-rows li > .icon { width: 16px; height: 16px; color: var(--fg-2); }
.slice-rows .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slice-rows .state { grid-column: 2 / 4; font-size: 12px; color: var(--fg-2); }
.slice-rows .state:empty { display: none; }
@media (min-width: 640px) {
  .slice-cols, .slice-rows li { display: grid; grid-template-columns: 16px minmax(0, 1fr) 9.5rem 7.5rem; gap: 12px; align-items: center; }
  .slice-cols { padding: 8px 16px; font: 500 12px/1.4 var(--font); color: var(--fg-2); border-bottom: 1px solid var(--hair); }
  .slice-cols :last-child, .slice-rows .state { text-align: right; }
  .slice-rows li { padding: 13px 16px; }
  .slice-rows .state { grid-column: auto; font-size: 13px; }
}

/* ---------- Just share one thing: the widget on the second surface ---------- */
.sec.after-hero { padding-top: calc(var(--sec-pad) + 56px); }
.quick { display: grid; gap: var(--s-5); align-items: center; }
.quick-head h2 { font: 650 22px/1.25 var(--font); letter-spacing: -.02em; }
.quick-head p { color: var(--fg-2); font: var(--t-small); margin-top: 6px; }
.quick-body { min-width: 0; }
.quick-body .md-stage { min-height: 0; }
.quick-body .md-zone { min-height: 168px; padding: var(--s-5); border-width: 1px; }
.quick-body :is(.a-btn, .md-chip, .md-word-btn) { border-radius: var(--r-input); }
@media (min-width: 900px) {
  .quick { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); }
  /* in the right column the widget's result is one column, the code beside the words */
  .quick-body .md-result { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .quick-body .md-result-figure { grid-row: auto; justify-self: start; }
  .quick-body :is(.md-next, .md-slot) { grid-column: auto; }
}

/* ---------- Share it your way: the rules grouped, the share window as the picture ---------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-8); } }
.rule-groups { display: grid; gap: var(--s-4); margin: 0; }
.rule-groups dt { font: 500 12px/1.4 var(--font); color: var(--fg-2); margin-bottom: 6px; }
.rule-groups dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* the share window is a picture, not a window to use (the owner, site/share): tilted in perspective over a second
   sheet, with no pointer and no hover, and a line under it says what it shows; flatter on phones */
.share-pic { margin: 0; display: grid; gap: var(--s-5); cursor: default; }
.share-card {
  display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--r-panel);
  background: var(--bg-raised); pointer-events: none; user-select: none; transform: perspective(1200px) rotateX(8deg) rotateY(-14deg);
  box-shadow: 0 -12px 0 -7px color-mix(in srgb, var(--bg-raised), var(--bg)), 0 -12px 0 -6px var(--hair), var(--shadow-lg), 0 56px 80px -48px rgb(0 0 0 / .4);
}
.share-pic figcaption { display: flex; justify-content: center; align-items: center; gap: 6px; font: var(--t-small); color: var(--fg-2); }
@media (max-width: 959.98px) { .share-card { transform: perspective(900px) rotateX(8deg) rotateY(-5deg) scale(.96); } }
.share-top { display: flex; align-items: center; gap: 8px; }
.share-top b { font: 600 17px/1.3 var(--font); margin-right: auto; }
.share-top .icon { width: 16px; height: 16px; color: var(--fg-2); }
.share-q { font: 600 15px/1.3 var(--font); }
.choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r-input); }
.choice[data-checked] { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.choice .icon-tile { width: 34px; height: 34px; border-radius: var(--r-input); }
.choice .icon-tile .icon { width: 17px; height: 17px; }
.choice b { display: block; font: 500 15px/1.3 var(--font); }
.choice b + span { display: block; font: var(--t-small); color: var(--fg-2); }
.radio { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); }
.choice[data-checked] .radio { border: 5px solid var(--fg); }
.share-foot { display: flex; justify-content: flex-end; }
.share-pic a { pointer-events: auto; }   /* the one live thing in the picture: what tTARI is */
.share-foot .btn { min-height: 36px; padding: 8px 16px; }

/* ---------- What's different from a usual drive? The hidebox column on the brand tint ---------- */
.compare { width: 100%; max-width: 880px; margin-inline: auto; border-collapse: separate; border-spacing: 0; font: var(--t-small); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--hair); }
.compare thead th { border-top: 0; font: 600 14px/1.3 var(--font); color: var(--fg-2); padding-block: 0 12px; vertical-align: bottom; }
.compare tbody th { font: 500 15px/1.4 var(--font); width: 26%; text-wrap: balance; }
.compare tbody .us { padding-left: 38px; text-indent: -22px; }   /* each sentence lines up after the mark */
.compare td { color: var(--fg-2); }
.compare .us { background: var(--brand-subtle); color: var(--fg); border-inline: 1px solid var(--brand-border); }
.compare thead .us { width: 42%; color: var(--brand-text); border-top: 1px solid var(--brand-border); border-radius: var(--r-panel) var(--r-panel) 0 0; padding-top: 14px; font-size: 15px; }
.compare tbody tr:last-child .us { border-bottom: 1px solid var(--brand-border); border-radius: 0 0 var(--r-panel) var(--r-panel); }
.compare .us .icon { display: inline; width: 16px; height: 16px; color: var(--brand-text); vertical-align: -3px; margin-right: 6px; }
.compare a { color: inherit; }
.us-name { display: inline-flex; align-items: center; gap: 8px; }
.us-name .wm-tile { width: 22px; height: 22px; border-radius: 6px; }
.us-name .wm-tile .icon { width: 15px; height: 15px; margin: 0; color: var(--brand-solid); }
.compare-note { max-width: 880px; margin: var(--s-4) auto 0; font: var(--t-small); color: var(--fg-2); text-align: center; }
@media (max-width: 719.98px) {   /* phones: each row a card, our answer first on the tint, the popular drive's below */
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { margin-bottom: var(--s-3); border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--bg); overflow: hidden; }
  .compare tr[hidden] { display: none; }
  .compare th, .compare td { border-top: 0; padding: 10px 14px; }
  .compare tbody th { padding-top: 14px; width: auto; }
  .compare td::before { content: attr(data-label); display: block; font: 500 12px/1.4 var(--font); color: var(--fg-2); margin-bottom: 2px; }
  .compare .us { border-inline: 0; border-block: 1px solid var(--brand-border); }
  .compare .us::before { color: var(--brand-text); }
  .compare tbody tr:last-child .us { border-radius: 0; }
}

/* ---------- Tari does the private parts, beside What's tTARI? ---------- */
.chain-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--bg-raised); }
.chain-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; font: var(--t-small); font-size: 15px; }
.chain-rows li:not([hidden]) ~ li { border-top: 1px solid var(--hair); }
.chain-rows .icon { width: 20px; height: 20px; color: var(--pay-text); margin-top: 1px; }

/* ---------- closing: the last ask (v2.css sets its padding and the still over it) ---------- */
.end { --end-pad: max(128px, calc(var(--sec-pad) * 1.5)); padding-block: var(--end-pad); overflow: hidden; }
.end .wrap { position: relative; z-index: 1; }
.closing { display: grid; justify-items: center; text-align: center; gap: var(--s-4); }
.closing h2 { font: 650 clamp(26px, 3vw, 36px)/1.15 var(--font); letter-spacing: -.03em; }
.closing p { color: var(--fg-2); font: var(--t-say); font-size: 18px; }
.closing .cta-row { margin-top: var(--s-2); }