/* WonderTag landing page styles.
   Plain hand-written CSS — no build step, no framework, no dependencies. */

:root {
  --purple-light: #8467b0; /* icon gradient, top */
  --purple-mid: #6b4e96;
  --purple-deep: #412c5f; /* icon gradient, bottom */
  --lavender: #b7a1c7; /* the record's centre label */
  --cream: #d8d2c6; /* the paper tag — Beta badge */
  --ink: #1c1720; /* body text on light */
  --ink-soft: #5f5868; /* secondary text on light */
  --paper: #faf9fb; /* light body background */
  --card: #ffffff; /* card / panel fill on light */
  --rule: #e7e3ec; /* hairlines, card borders */

  /* The focus ring has to change with the surface under it. Purple-light on
     paper is 4.4:1; on either purple band it collapses to 1.3–2.0:1, which is
     no ring at all for a keyboard user. The purple surfaces take white. */
  --focus: var(--purple-light);
  --focus-on-purple: #ffffff;

  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    Arial, sans-serif;

  /* One fluid spacing scale, so desktop and phone are the same layout at two
     sizes rather than two layouts tuned by hand at separate breakpoints. */
  --gutter: clamp(20px, 4.5vw, 24px);
  --space-section: clamp(72px, 9vw, 120px);
  --space-section-end: clamp(64px, 7.5vw, 96px);
  /* The hero screenshot hangs below the purple by this much, and #batch pushes
     its content down by the same amount. Both read the one value, so the two
     can never drift out of sync the way two hand-tuned numbers do. */
  --shot-overlap: clamp(88px, 12vw, 170px);
  --nav-height: 64px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-system);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Beta badge toggle — delete the "is-beta" class on <html> to remove every
   badge on the page at once. Nothing else needs to change. */
.beta-badge {
  display: none;
}

.is-beta .beta-badge {
  display: inline-flex;
}

/* The gutter never collapses, and it clears a notch in landscape. Every direct
   child of .wrap inherits it — including .hero-inner, which used to override
   the horizontal padding away and push hero copy to the screen edge. */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Both primary download buttons sit on purple, where the paper ring is
   invisible. White reads 6.7:1 on the hero band and 12:1 on the closing one. */
.hero :is(a, button):focus-visible,
.download-section :is(a, button):focus-visible {
  outline-color: var(--focus-on-purple);
}

/* Anchor targets clear the sticky nav instead of hiding under it. */
:where(section, header)[id] {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

/* ---------- Nav ---------- */

/* Sticky nav, transparent over the hero. It "gains a solid background on
   scroll" purely from CSS: a frosted (backdrop-filter) glass panel that is
   see-through over the purple hero and reads as a solid light bar once body
   copy has scrolled underneath it — no JS/scroll listener involved. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(250, 249, 251, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--rule);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-height);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.nav-brand img {
  width: 28px;
  height: 28px;
  display: block;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-block;
  padding-block: 12px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--ink);
}

/* ---------- Hero ---------- */

/* One flat purple, not a gradient. The three-stop purple-to-deeper-purple hero
   is the most-recognised generated-page signature there is, and the fade bought
   nothing the icon's own colour wasn't already carrying. The page still darkens
   toward the close — the download band takes --purple-deep — but each band is
   now a single deliberate value. */
.hero {
  background: var(--purple-mid);
  padding: 8px 0 0;
  color: #fff;
  text-align: center;
  position: relative;
}

/* Block padding only — the inline gutter comes from .wrap and must survive. */
.hero-inner {
  padding-block: clamp(40px, 7vw, 56px) clamp(48px, 8vw, 72px);
}

.hero-icon {
  width: clamp(72px, 13vw, 112px);
  height: auto;
  display: block;
  margin: 0 auto clamp(20px, 3.5vw, 30px);
}

.hero h1 {
  margin: 0 auto 20px;
  /* Narrow enough that the headline sets as two balanced lines rather than one
     very long one at desktop widths. */
  max-width: 20ch;
  /* The middle term now actually wins on phones: at 390px this resolves to
     ~33px rather than being pinned at the old 2.6rem floor. */
  font-size: clamp(2.05rem, 7.4vw, 4.1rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 700;
}

.hero-sub {
  max-width: 46ch;
  margin: 0 auto clamp(28px, 4vw, 36px);
  /* NOT --lavender: #b7a1c7 on this purple is 2.4:1, well under WCAG AA's
     4.5:1 for 18.4px regular text. This keeps the lavender cast and reads
     5.8:1 on --purple-mid. */
  color: #f2edf7;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  text-wrap: balance;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.beta-note {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 8px;
}

.hero-meta {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  line-height: 1.9;
  margin: 0;
}

.download-intro {
  max-width: 540px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.9);
}

.hero-meta a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.hero-meta a:hover {
  text-decoration-color: #fff;
}

/* ---------- Buttons & badge ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* comfortable touch target on phones */
  padding: 13px 28px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary {
  background: #fff;
  color: var(--purple-deep);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.beta-badge {
  align-items: center;
  background: var(--cream);
  color: var(--purple-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

/* ---------- Hero screenshot ---------- */

.shot-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  /* The frame straddles the hero/body boundary by hanging BELOW the purple,
     not by being pulled up over the hero copy — a negative margin-top here
     buries the download button behind the frame. */
  margin-bottom: calc(var(--shot-overlap) * -1);
  position: relative;
  z-index: 5;
}

/* artwork-screenshot.{avif,webp,png} already renders its own macOS window
   chrome (traffic lights, rounded corners, drop shadow) on a transparent
   background, so this frame stays purely a layout wrapper — no
   background/border/shadow/radius here, or the image's own shadow would be
   double-drawn or clipped. */
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* ---------- Body sections ---------- */

section {
  padding-block: var(--space-section) var(--space-section-end);
}

/* Clears the overlapping hero screenshot, then adds the normal section gap —
   derived, so it cannot drift from --shot-overlap. */
#batch {
  padding-top: calc(var(--shot-overlap) + var(--space-section));
}

.section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 48px);
}

.section-heading h2,
.batch-copy h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
}

/* ---------- Batch section (copy above the full window) ---------- */

/* The whole window has to be shown at the width it was captured for, so the
   copy sits above it rather than beside it. Left-aligned and held to a reading
   measure, which also makes this the one section on the page that is not a
   centred column. */
.batch-copy {
  max-width: 52ch;
  margin-bottom: clamp(32px, 5vw, 52px);
}

.batch-copy p {
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.12rem);
  margin: 0 0 16px;
}

.batch-copy p:last-child {
  margin-bottom: 0;
}

.batch-copy em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}

/* The asset already carries its own macOS window chrome and drop shadow on a
   transparent background, so this figure stays a layout wrapper only — a border
   or radius here would double the window's own corner. */
.batch-figure {
  margin: 0;
}

.batch-figure picture {
  display: block;
}

/* .shot-wrap is 980px wide and puts the gutter *inside* that cap, so its image
   lands at 980 − 2 × gutter. This one sits in .wrap, which has already paid the
   gutter, so it subtracts the same amount and lands on the identical width —
   the hero window is never the smaller of the two. */
.batch-figure img {
  display: block;
  width: 100%;
  max-width: calc(980px - 2 * var(--gutter));
  height: auto;
  margin-inline: auto;
}

/* ---------- Feature grid ---------- */

/* Five cards in three columns leaves a hole. The lead card — the one with the
   longest copy — spans two, which fills every row exactly at 3 columns and
   again at 2, instead of ending on a ragged orphan row. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feature-card-wide {
  grid-column: span 2;
}

.feature-card {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 28px);
  background: var(--card);
}

.feature-card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.feature-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.more-tools {
  margin: clamp(28px, 4vw, 40px) auto 0;
  max-width: 680px;
  color: var(--ink-soft);
}

.more-tools h3 { color: var(--ink); margin-bottom: 12px; }
.more-tools p { margin: 0 0 12px; }

/* ---------- Release notes (/changelog) ---------- */

.release-panel {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  padding: clamp(24px, 3.5vw, 36px);
}

/* One panel per release: the version heading, a "Latest" chip on the newest,
   and the release date pushed to the far edge. */
.release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 20px;
}

.release-head h2 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.release-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(107, 78, 150, 0.1);
  color: var(--purple-mid);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.whats-new-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.whats-new-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 1rem;
}

.whats-new-list li:last-child {
  margin-bottom: 0;
}

.whats-new-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-mid);
}

/* ---------- Download section ---------- */

/* The purple closes the page the way the hero opens it, and gives the last
   call to action the same weight as the first. Flat, one step darker than the
   hero — the two bands read as bookends without either being a gradient. */
.download-section {
  text-align: center;
  background: var(--purple-deep);
  color: #fff;
  /* Tighter than the standard section rhythm. The colour change already does the
     separating work that whitespace does between the white sections, so the full
     --space-section here just left a tall band of empty purple. */
  padding-block: clamp(52px, 5.5vw, 72px) clamp(48px, 5vw, 64px);
}

.download-section .section-heading {
  margin-bottom: clamp(26px, 4vw, 36px);
}

.download-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: clamp(28px, 4vw, 36px) 0 clamp(36px, 5vw, 48px);
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
}

.site-footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.site-footer a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
}

.site-footer a:hover {
  text-decoration-color: var(--ink-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nav-links {
    gap: 18px;
  }

  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-card-wide {
    grid-column: span 1;
  }

  .site-footer .wrap {
    justify-content: center;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }
}

/* The wordmark goes, not the links: three destinations beat a logotype when
   there is no room for both. The icon still carries the brand and the link. */
@media (max-width: 480px) {
  .nav-wordmark {
    display: none;
  }

  .nav-links {
    gap: 20px;
  }
}

/* At 320px even the wordmark-less nav ran 10px past its own gutter. One step
   down on gap and type puts the three links back inside it. */
@media (max-width: 400px) {
  .nav-links {
    gap: 14px;
  }

  .nav-links a {
    font-size: 0.85rem;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Dark mode ---------- */

/* Only the body inverts. The two purple bands — the hero and the closing call
   to action — are brand surfaces and stay as they are in both schemes; the
   panels between them ride the --card / --rule / --paper tokens above rather
   than needing a rule each. */

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f1eef4;
    --ink-soft: #b3a9bc;
    --rule: #2b2530;
    --paper: #131016;
    --card: #1a1620;
  }

  body {
    background: var(--paper);
    color: #f1eef4;
  }

  .site-nav {
    background-color: rgba(19, 16, 22, 0.72);
    box-shadow: 0 1px 0 var(--rule);
  }

  .site-nav .nav-brand,
  .site-nav .nav-links a {
    color: #f1eef4;
  }

  .site-nav .nav-links a:hover {
    color: #fff;
  }

  .batch-copy em {
    color: #f1eef4;
  }

  /* The screenshots are light-mode captures, so on dark paper they land as a
     bright slab. A shadow gives the window an edge to sit against. */
  .batch-figure picture {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  }

  .release-chip {
    background: rgba(132, 103, 176, 0.18);
    color: var(--lavender);
  }

  .whats-new-list li::before {
    background: var(--purple-light);
  }

  .site-footer {
    border-top-color: var(--rule);
  }
}