/* A Week From Wednesday — landing page. Accent: amber #C9822E (BigCap is blue). */
:root {
  --bg: #0E1116;
  --bg-raised: #151A21;
  --line: #262D37;
  --ink: #E8EAED;
  --ink-soft: #A8B0BA;
  --accent: #C9822E;      /* 6.05:1 on --bg — the buy button's own colour, and
                             now what every title and accent uses */
  --accent-soft: #E5A857; /* 9.07:1 — the coin field and the highlight sweep */
  --measure: 42rem;
  /* ONE width for every band. The hero and "Why it exists" were 72rem while the
     feature explorer was 84rem, so the page stepped in and out by 96px as you
     scrolled past it. */
  --wrap: 84rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  text-wrap: pretty;
}
/* Without this a screenshot wider than its column is CLIPPED rather than
   scaled, because .shot hides its overflow. The two 1280px shots lost 230px off
   their right-hand side; the 500px dialogs fitted, so the page looked fine
   except in exactly the two places that mattered most. */
img { max-width: 100%; height: auto; display: block; }
/* A <figure> carries a browser default of `margin: 1em 40px`, which quietly
   indented every screenshot on the page by 40px on each side and made each one
   narrower than the text beside it. */
figure { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0 0 0.75rem; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.125rem, 5.5vw, 3.375rem); color: var(--accent); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-top: 0; color: var(--accent); }
h3 { font-size: 1.1875rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }
.muted { color: var(--ink-soft); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
/* Every band sits above the coin field, which is a fixed canvas at z-index 0.
   That layering is load-bearing for the buy-button burst: the coins are drawn
   on the canvas, so they come out from BEHIND the button by construction
   rather than by juggling z-indexes at click time. */
.hero, section, footer { position: relative; z-index: 1; }
#coin-field, #coin-burst {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* The trail belongs behind the page — that IS the effect. The burst does not:
   behind every band also means behind the pricing card, which is opaque, so
   coins thrown from the buy button inside it were drawn and then covered up.
   It sits above the content instead, with the button's own rectangle clipped
   out so the coins still come from behind it. */
#coin-field { z-index: 0; }
#coin-burst { z-index: 5; }
section { padding: 5rem 0; border-top: 1px solid var(--line); }
.kicker {
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.lead { font-size: 1.125rem; }

/* Top bar: the brand on the left, what it runs on and the buy button right.
   NOT sticky — it scrolls away with the hero, which is what was asked for. The
   pricing section carries the second buy button further down. */
.topbar { position: relative; z-index: 1; padding: 1.5rem 0 0.5rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar__right { display: flex; align-items: center; gap: 1.15rem; }
.topbar .brand { margin-bottom: 0; }
.plats { display: flex; align-items: center; gap: 1rem; margin: 0; max-width: none; font-size: 0.875rem; color: var(--ink-soft); }
.plat { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.plat svg { display: block; flex: 0 0 auto; }
.topbar .btn-buy { padding: 0.62rem 1.15rem; font-size: 0.9375rem; }

/* Hero */
/* Side padding restated, not inherited. `.hero` also carries `.wrap`, and a
   `padding` shorthand here zeroes the 1.25rem sides that `.wrap` set — so the
   hero's text started 20px left of every other section on the page. */
.hero { padding: 5rem 1.25rem 4.5rem; border-top: 0; }
/* Unscoped: the brand moved out of .hero into .topbar, and while these rules
   still said `.hero .brand` it matched nothing — the row lost its flex and the
   icon stacked on top of the wordmark at every width. */
/* Doubled, but fluid rather than fixed: at 80px the wordmark is ~34px, and a
   phone cannot carry both on one line. One variable drives the icon, its corner
   radius and the gap, so they stay in proportion at every size. */
.brand { --mark: clamp(48px, 5.5vw, 80px); display: flex; align-items: center; gap: calc(var(--mark) * 0.25); flex: 0 0 auto; }
.brand img { width: var(--mark); height: var(--mark); border-radius: calc(var(--mark) * 0.225); }
.brand strong { font-size: clamp(1.25rem, 2.6vw, 2.125rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.1; }
.hero .sub { font-size: 1.1875rem; color: var(--ink-soft); margin: 1rem 0 2rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* The buy button, with the shimmer technique from the OnDeck page ported to
   gold. A conic-gradient spark spins while its container slides; a backdrop
   inset by --cut hides all but a hairline, so the shimmer reads as a gilded
   edge rather than a highlight sliding across the face of the button. */
.btn-buy {
  --spread: 150deg;
  --shimmer: #FFF6E2;
  --radius: 8px;
  --speed: 9.4s;
  --cut: 1.4px;
  --cta-bg: var(--accent);
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid rgba(255, 236, 190, 0.28);
  border-radius: var(--radius);
  background: var(--cta-bg);
  color: #0B0D10;
  transform: translateZ(0);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn-buy:hover { color: #0B0D10; filter: brightness(1.07); }
.btn-buy:active { transform: translateY(1px); }
.shim__label { position: relative; z-index: 1; }
/* Three gradient layers at deliberately non-harmonic speeds, two spinning
   against the third. Their interference never repeats on a short cycle, which
   reads as irregular metal rather than one highlight orbiting the edge. */
.shim__spark { position: absolute; inset: 0; z-index: -30; overflow: visible; container-type: size; filter: blur(2px); }
.shim__spark > span {
  position: absolute; inset: 0; display: block; height: 100cqh; aspect-ratio: 1;
  animation: shim-slide var(--speed) ease-in-out infinite alternate;
}
.shim__spark > span::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from calc(270deg - (var(--spread) * .5)),
    transparent 0deg, rgba(255, 226, 160, .55) calc(var(--spread) * .28), var(--shimmer) calc(var(--spread) * .5), rgba(150, 92, 18, .5) calc(var(--spread) * .72), transparent var(--spread),
    transparent 190deg, rgba(255, 226, 160, .3) 208deg, rgba(255, 249, 235, .6) 235deg, rgba(150, 92, 18, .3) 262deg, transparent 280deg,
    transparent 300deg, rgba(255, 226, 160, .4) 315deg, rgba(255, 252, 244, .85) 335deg, rgba(150, 92, 18, .4) 350deg, transparent 360deg);
  animation: shim-spin calc(var(--speed) * 2) infinite linear;
}
.shim__spark2 { filter: blur(3.5px); opacity: .9; }
.shim__spark2 > span { animation-duration: calc(var(--speed) * 1.63); animation-direction: alternate-reverse; }
.shim__spark2 > span::before {
  background: conic-gradient(from 90deg,
    transparent 0deg, rgba(255, 226, 160, .45) 22deg, rgba(255, 250, 236, .95) 45deg, rgba(150, 92, 18, .45) 68deg, transparent 90deg,
    transparent 140deg, rgba(255, 226, 160, .28) 168deg, rgba(255, 246, 226, .6) 195deg, rgba(150, 92, 18, .28) 222deg, transparent 250deg,
    transparent 280deg, rgba(255, 226, 160, .4) 300deg, rgba(255, 252, 244, .9) 320deg, rgba(150, 92, 18, .4) 340deg, transparent 358deg);
  animation: shim-spin-smooth calc(var(--speed) * 3.1) infinite linear reverse;
}
.shim__spark3 { filter: blur(1.2px); opacity: .7; }
.shim__spark3 > span { animation-duration: calc(var(--speed) * 2.37); }
.shim__spark3 > span::before {
  background: conic-gradient(from 200deg,
    transparent 0deg, rgba(255, 226, 160, .48) 15deg, rgba(255, 253, 246, 1) 30deg, rgba(150, 92, 18, .48) 46deg, transparent 62deg,
    transparent 110deg, rgba(255, 226, 160, .3) 130deg, rgba(255, 248, 232, .75) 150deg, rgba(150, 92, 18, .3) 170deg, transparent 190deg,
    transparent 240deg, rgba(255, 226, 160, .38) 262deg, rgba(255, 251, 240, .85) 285deg, rgba(150, 92, 18, .38) 308deg, transparent 330deg);
  animation: shim-spin-smooth calc(var(--speed) * 1.29) infinite linear;
}
.shim__back { position: absolute; z-index: -20; inset: var(--cut); border-radius: var(--radius); background: var(--cta-bg); }
@keyframes shim-spin {
  0% { transform: translateZ(0) rotate(0deg); }
  15%, 35% { transform: translateZ(0) rotate(90deg); }
  65%, 85% { transform: translateZ(0) rotate(270deg); }
  100% { transform: translateZ(0) rotate(360deg); }
}
@keyframes shim-spin-smooth { from { transform: translateZ(0) rotate(0deg); } to { transform: translateZ(0) rotate(360deg); } }
@keyframes shim-slide { to { transform: translate(calc(100cqw - 100%), 0); } }
@media (prefers-reduced-motion: reduce) {
  .shim__spark > span, .shim__spark > span::before { animation: none; }
}
.fine { font-size: 0.875rem; color: var(--ink-soft); }
.hero-shot { margin: 3rem 0 0; }
.hero-shot figcaption { margin-top: 0.6rem; padding: 0 0.25rem; }

.shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-raised); }
/* `img { max-width: 100% }` does not reach a <video>, which would otherwise sit
   at its intrinsic 1280px and be clipped by .shot exactly as the screenshots
   were before that rule existed. */
.shot video { display: block; width: 100%; height: auto; }
.split .shot--video { width: 100%; }

/* Alternating split sections: text beside the picture, both centred on the same
   axis. Stacked, the title sat level with the top of a 510px-tall screenshot
   and read as floating above it; and a column of prose next to nothing but
   background wasted the half of the page the picture was not using. */
.split__inner { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
.split__text > :last-child { margin-bottom: 0; }
/* The card hugs its screenshot. Left to stretch, a 500px dialog sat in a 550px
   card with a strip of panel showing beside it. */
.split .shot { width: fit-content; max-width: 100%; margin-inline: auto; }
.split ul { margin: 0 0 1rem; padding-left: 1.6rem; max-width: var(--measure); }
.split li { margin-bottom: 0.55rem; }
.split li:last-child { margin-bottom: 0; }
/* Bullets are the brand coin: the same 24 frames at 30ms as coin-spin-16.gif,
   played from the sprite strip instead of the GIF. A GIF cannot be paused and
   does not restart -- every copy runs on one shared clock -- so hovering would
   join the spin mid-turn. An animation on the strip starts at frame 0 each time
   it is applied and drops back to frame 0 when it is removed, which is exactly
   "still until you point at it". .nots is the pill list and keeps no marker.
   Centred on the FIRST line (1lh) so a wrapped item reads as one bullet. */
ul:not(.nots) { list-style: none; }
ul:not(.nots) > li { position: relative; --coin: 0.95em; }
ul:not(.nots) > li::before {
  content: ""; position: absolute; left: -1.5rem;
  top: 0.3em; top: calc((1lh - var(--coin)) / 2);
  width: var(--coin); height: var(--coin);
  background: url("/wednesday/assets/coin-strip-16.png") 0 0 / calc(var(--coin) * 24) var(--coin) no-repeat;
}
ul:not(.nots) > li:hover::before { animation: coin-spin 0.72s steps(24) infinite; }
@keyframes coin-spin { to { background-position: calc(var(--coin) * -24) 0; } }
@media (prefers-reduced-motion: reduce) {
  ul:not(.nots) > li:hover::before { animation: none; }
}

/* A slot for artwork that does not exist yet. Deliberately obvious. */
.tbd {
  border: 1px dashed #3b4551;
  border-radius: 10px;
  background:
    repeating-linear-gradient(135deg, rgba(201, 130, 46, 0.05) 0 14px, transparent 14px 28px),
    var(--bg-raised);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1.5rem;
}
.tbd span { color: var(--accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.tbd small { color: var(--ink-soft); font-size: 0.875rem; max-width: 22rem; }

/* Feature explorer: cards on one side, one screenshot on the other, and a
   highlight that travels to whatever the hovered card is talking about. */
.explore__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-top: 2.25rem; align-items: start; }
.explore__cards { display: grid; gap: 0.875rem; grid-template-columns: 1fr; }
.fcard {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.05rem 1.15rem;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.fcard h3 { margin: 0 0 0.3rem; font-size: 1.0625rem; transition: color 160ms ease; }
.fcard p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); max-width: none; }
.fcard:hover, .fcard:focus-visible, .fcard.is-on {
  border-color: var(--accent);
  background: #191d25;
  outline: none;
}
.fcard:hover h3, .fcard:focus-visible h3, .fcard.is-on h3 { color: var(--accent); }

.explore__shot { position: relative; }
/* The wide variant: picture above, cards below it. The cards stay first in the
   source so a screen reader and a phone still get the explanation before the
   picture of it; `order` only moves them visually. */
.explore--wide .explore__shot { order: 1; }
.explore--wide .explore__cards { order: 2; }
.explore__hint { margin: 0.7rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }

/* He stands ON the top edge of the dashboard picture, so he hangs out of the
   shot's box entirely. `bottom: 100%` puts the bottom of his frame on that
   edge; the 5px claws back the few transparent rows measured under his soles,
   so what lands on the line is the feet rather than the crop.

   Only from 1040px — below that the lead paragraph above him is full width,
   and he would stand on the text. He is decoration, so he goes rather than
   pushing anything around. */
.rain { display: none; }
.rain__out, .rain__still { position: absolute; inset: 0; width: 100%; height: 100%; }
.rain__src { display: none; }
/* Two layers, so there is never a flash of nothing: the still carries the
   first frame until the video has pixels, then they CROSS-fade. Fading the
   canvas in alone is not enough -- the canvas is mostly transparent, so the
   still went on showing through it as a second, motionless orangutan. */
.rain__out { opacity: 0; transition: opacity 0.25s ease; }
.rain__still { transition: opacity 0.25s ease; }
.rain--live .rain__out { opacity: 1; }
.rain--live .rain__still { opacity: 0; }

@media (min-width: 1040px) {
  .rain {
    display: block; position: absolute; z-index: 2;
    right: calc(3rem + 24.5px); bottom: calc(100% - 11px);
    width: 238px; height: 351px; pointer-events: none;
  }
  /* Every section draws a divider on its top edge, and this one ran straight
     through his head. Only where he is shown -- below 1040px he is hidden and
     the divider is back. */
  .explore--wide { border-top: 0; }
}
.shot--live { position: relative; }

/* The travelling highlight. One element: the ring is its border, the dimming of
   everything else is a very large spread shadow, and the sweep is ::after. */
.hl {
  position: absolute;
  left: 0; top: 0; width: 0; height: 0;
  border: 2px solid var(--accent);
  border-radius: 7px;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 100vmax rgba(9, 11, 15, 0.6), 0 0 22px rgba(201, 130, 46, 0.45);
  transition:
    left 420ms cubic-bezier(0.22, 0.9, 0.24, 1),
    top 420ms cubic-bezier(0.22, 0.9, 0.24, 1),
    width 420ms cubic-bezier(0.22, 0.9, 0.24, 1),
    height 420ms cubic-bezier(0.22, 0.9, 0.24, 1),
    opacity 220ms ease;
}
.hl.is-on { opacity: 1; }

/* The sweep lives in its own clipping child rather than in .hl::after: .hl has
   to NOT clip, because the corner brackets sit outside its edge. */
.hl__sweep { position: absolute; inset: 0; overflow: hidden; }
.hl__sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(201, 130, 46, 0) 0%,
    rgba(201, 130, 46, 0.34) 45%,
    rgba(229, 168, 87, 0.5) 55%,
    rgba(201, 130, 46, 0) 100%);
  transform: translateX(-115%);
}
.hl.is-sweeping .hl__sweep::after { animation: hl-sweep 720ms cubic-bezier(0.3, 0.8, 0.3, 1); }
@keyframes hl-sweep {
  from { transform: translateX(-115%); }
  to   { transform: translateX(115%); }
}
/* Machined corner brackets, drawn with four gradients on one pseudo-element. */
.hl::before {
  content: "";
  position: absolute;
  inset: -5px;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 13px 2px, 2px 13px, 13px 2px, 2px 13px;
  background-position: left top, left top, right bottom, right bottom;
}
@media (prefers-reduced-motion: reduce) {
  .hl { transition: opacity 150ms ease; }
  .hl.is-sweeping .hl__sweep::after { animation: none; }
  .hl__sweep { display: none; }
}

/* Feature cards */
.cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem; }
.card h3 { color: var(--accent); }
.card p { margin-bottom: 0; }

/* Not-for list */
.nots { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.5rem 0; list-style: none; max-width: var(--measure); }
.nots li { border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.9375rem; color: var(--ink-soft); white-space: nowrap; }

/* Privacy */
.privacy ul { margin: 1.5rem 0; padding-left: 1.6rem; max-width: var(--measure); }
.privacy li { margin-bottom: 0.6rem; }
.note { border-left: 2px solid var(--accent); padding: 0.25rem 0 0.25rem 1.1rem; color: var(--ink-soft); max-width: var(--measure); }

/* Pricing */
.price-block { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 2.25rem 1.75rem; max-width: 34rem; margin-top: 2rem; }
.price { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; }
.price small { font-size: 1.0625rem; font-weight: 400; color: var(--ink-soft); margin-left: 0.5rem; }
.price-block ul { margin: 1rem 0 1.5rem; padding-left: 1.6rem; color: var(--ink-soft); }
.price-block li { margin-bottom: 0.35rem; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3.5rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem; }
footer nav a { font-size: 0.9375rem; }
footer .fine { max-width: var(--measure); }

@media (min-width: 560px) {
  /* Wide enough to hold it on one line; below this it may wrap to two. */
  .brand strong { white-space: nowrap; }
}
@media (max-width: 559px) {
  /* The words go before the button does: at this width the marks still read,
     and the call to action is the thing that must survive. */
  .plat span, .plats { font-size: 0.8125rem; }
  .topbar__right { gap: 0.75rem; }
  .plats { gap: 0.7rem; }
}
@media (max-width: 419px) {
  .plats { display: none; }
}

@media (min-width: 620px) {
  .explore--wide .explore__cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 980px) {
  .split__inner { grid-template-columns: 1fr 1.08fr; gap: 3.25rem; }
  /* Alternate which side the picture falls on. The text is first in the source
     so a screen reader and a phone both get the explanation before the picture
     of it; order only moves it visually. */
  .split--flip .split__text { order: 2; }
  /* Wider than the rest of the page, and the cards in ONE column, because the
     screenshot is the point of this section. Two columns of cards left it about
     470px across — the app's own type rendered at six pixels, so the highlight
     was pointing at a smudge. */
  .explore__grid { grid-template-columns: 22rem minmax(0, 1fr); gap: 2.75rem; }
  /* The picture stays put while the eight cards scroll past it, which is the
     whole point of a highlight that moves between them. */
  .explore__shot { position: sticky; top: 2rem; }
  /* …except when the cards are underneath it, where there is nothing to scroll
     past and sticking would detach the picture from its own captions. */
  .explore--wide .explore__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .explore--wide .explore__shot { position: relative; }
  .explore--wide .explore__cards { grid-template-columns: repeat(4, 1fr); }
}