/* /vault: the offsite copy, coming soon. Built from the site's parts (page
   hero, show sections, hairline grids and the FAQ in styles.css); this
   file adds the coming-soon notice, the odds table, the encrypted row of
   pictures, the plans grid and the upload table. Everything is drawn in
   its finished state; /vault.js only adds .play to fade a part in the
   first time it comes on screen, so a capture, a reader with reduced
   motion or no script at all sees the whole page. */

/* ------------------------------------------------------------------------
   Coming soon, once, under the headline: a ruled notice with the ways to
   hear when it's ready. */
.vh p { margin-inline: auto; }
.vh-soon { display: grid; justify-items: center; gap: 1rem; max-width: 34rem; margin: 2.25rem auto 0; padding: 1.25rem 1.5rem 1.4rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.vh-soon p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.vh-soon b { font-weight: 600; color: var(--ink); }
.vh-soon .button { color: var(--bg); }
.vh-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.4rem; }
.vh-link { font-size: 0.9375rem; font-weight: 500; color: var(--brand-tint) !important; text-decoration: none; }
.vh-link::after { content: "\a0→"; }
.vh-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------------
   The odds: one row per option, ruled edge to edge like the homepage's
   grids, with the words held to a centred column. Vault's row is marked
   with the brand colour on its figure and a rule above it. */
.ot { margin: clamp(2.5rem, 5vw, 3.5rem) calc(-1 * var(--pad)) 0; border-top: 1px solid var(--line); }
.ot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem max(var(--pad), calc((100% - 40rem) / 2));
  border-bottom: 1px solid var(--line);
}
.ot-k { font-size: 1.0625rem; color: var(--ink-2); }
.ot-v { display: grid; justify-items: end; gap: 0.15rem; text-align: right; }
.ot-v b { font: 600 clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem) / 1.05 var(--display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ot-v small { font-size: 0.8125rem; color: var(--ink-3); }
.ot-us { padding-block: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--brand) 70%, transparent); background: color-mix(in srgb, var(--brand) 7%, var(--bg)); }
.ot-us .ot-k { font-weight: 600; color: var(--ink); }
.ot-us .ot-v b { color: var(--brand-tint); }
.ot-note { max-width: 40rem; margin: 1.5rem auto 0; text-align: center; font-size: 0.9375rem; color: var(--ink-2); }

/* How we worked this out: folded away under the table. */
.why { max-width: 44rem; margin: 2rem auto 0; border-top: 1px solid var(--line); }
.why table, .up table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.why table { margin-bottom: 1.5rem; }
.why th, .why td, .up th, .up td { padding: 0.75rem 0.5rem; border-top: 1px solid var(--line); text-align: right; }
.why thead th, .up thead th { border-top: 0; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); }
.why th:first-child, .up th:first-child { padding-left: 0; text-align: left; }
.why td:last-child, .why th:last-child, .up td:last-child, .up th:last-child { padding-right: 0; }
.why tbody th, .up tbody th { font-weight: 500; color: var(--ink); }
.why td, .up td { color: var(--ink-2); }
.why .safe { color: var(--brand-tint); }
.why .total th, .why .total td { font-weight: 600; color: var(--ink); }
.vnotes { padding-bottom: 1.25rem; font-size: 0.8125rem; color: var(--ink-3); }
.vnotes p { margin-bottom: 0.75rem; padding: 0; }
.vnotes b { font-weight: 600; color: var(--ink-2); }
.vnotes a { color: var(--ink-2); }

/* ------------------------------------------------------------------------
   Encrypted: the same picture three times, in a row ruled like .grid3.
   The middle one is static; the last is clear again. */
.enc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(2.5rem, 5vw, 3.5rem) calc(-1 * var(--pad)) 0; padding: 0; list-style: none; background: var(--line); border-top: 1px solid var(--line); }
.enc-c { display: grid; align-content: start; gap: 0.3rem; padding: clamp(1.5rem, 3vw, 2.25rem) var(--pad); background: var(--bg); font-size: 0.9375rem; color: var(--ink-2); }
.enc-c b { margin-top: 1.1rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.enc-f { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #15181f; box-shadow: 0 0 0 1px var(--line-2); }
.enc-f img { width: 100%; height: 100%; object-fit: cover; }
.enc-n { position: absolute; inset: 0; width: 100%; height: 100%; }
.enc-end .enc-n { opacity: 0; }
/* The three-up grid under the row joins on, as it does under the
   homepage's panels. */
.enc + .grid3 { margin-top: 0; }

/* ------------------------------------------------------------------------
   Plans: four columns joined by hairlines, edge to edge. The suggested
   one has a brand rule along its top and says so in its text; every column ends with
   its own sign-up link. */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: clamp(2.5rem, 5vw, 3.5rem) calc(-1 * var(--pad)) 0; padding: 0; list-style: none; background: var(--line); border-block: 1px solid var(--line); }
.pg { position: relative; display: flex; flex-direction: column; padding: 2.5rem var(--pad) clamp(1.75rem, 3vw, 2.25rem); background: var(--bg); }
.pg p { margin: 0; }
.pg-size { font: 600 2.5rem/1 var(--display); letter-spacing: -0.035em; color: var(--ink); }
.pg-what { margin: 0.9rem 0 1.75rem !important; font-size: 0.9375rem; color: var(--ink-2); }
.pg-price { margin-top: auto !important; font: 600 1.25rem/1.2 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.pg-price span { font-size: 0.9375rem; font-weight: 400; color: var(--ink-2); }
.pg-go { align-self: flex-start; margin-top: 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--brand-tint); text-decoration: none; }
.pg-go::after { content: "\a0→"; }
.pg-go:hover { text-decoration: underline; }
.pg-rec { background: color-mix(in srgb, var(--brand) 7%, var(--bg)); box-shadow: inset 0 2px 0 var(--brand); }

/* How long the first upload takes. */
.up { max-width: 44rem; margin: clamp(3rem, 6vw, 4rem) auto 0; }
.up h3 { margin: 0 0 1rem; text-align: center; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.up-scroll { overflow-x: auto; }
.up table { min-width: 30rem; }
.up p { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--ink-3); }

/* ------------------------------------------------------------------------
   Motion, once, when a part first comes on screen: only with a script to
   say so and only when motion is welcome. Each part starts from what is
   already drawn, so nothing is ever left blank. */
@media (prefers-reduced-motion: no-preference) {
  .ot.play .ot-row { animation: ot-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .ot.play .ot-row:nth-child(2) { animation-delay: 0.06s; }
  .ot.play .ot-row:nth-child(3) { animation-delay: 0.12s; }
  .ot.play .ot-row:nth-child(4) { animation-delay: 0.18s; }
  .ot.play .ot-row:nth-child(5) { animation-delay: 0.24s; }
  /* Vault waits a beat after the rest. */
  .ot.play .ot-us { animation-delay: 0.8s; }
  .enc.play .enc-mid .enc-n { animation: enc-in 0.5s ease 0.6s both; }
  .enc.play .enc-end .enc-n { animation: enc-out 0.5s ease 1.3s both; }
}
@keyframes ot-rise { from { opacity: 0; translate: 0 10px; } }
@keyframes enc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes enc-out { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 60rem) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone: the pictures stack, and each odds row keeps its figure on the
   right. */
@media (max-width: 44rem) {
  .enc { grid-template-columns: minmax(0, 1fr); }
  .ot-k { font-size: 1rem; }
  .ot-us .ot-v b { max-width: 9ch; }
  .ot-us .ot-v small { max-width: 16ch; }
  .vh-soon { padding: 1.1rem 1.1rem 1.25rem; }
  .up table { min-width: 0; font-size: 0.8125rem; }
  .up th, .up td { padding-inline: 0.25rem; }
  .up thead th:first-child { font-size: 0; }
  .up thead th:first-child::before { content: "Upload"; font-size: 0.8125rem; }
}