/*
  Shared styling for the PuzzlePeace site. Palette is lifted directly from
  the app's own asset catalog so the pages and the product read as one
  thing. Dark by default; the light scheme is a deliberate second pass
  rather than an inversion.

  Every colour, space, radius and font lives as a custom property here —
  nothing is hard-coded twice further down.
*/

:root {
  color-scheme: dark light;

  /* Palette — straight from Assets.xcassets (dark variants) */
  --backdrop: #16110e;
  --surface: #261f1a;
  --brass: #c9a24b;
  --brass-bright: #e0be74;
  --cardboard: #523e2a;
  --moss: #7ba05b;
  --parchment: #f0e4c8;
  --walnut: #2f1d11;
  --velvet: #4f1423;

  --ink: #f6efe2;
  --ink-soft: rgba(246, 239, 226, 0.72);
  --ink-faint: rgba(246, 239, 226, 0.5);
  --rule: rgba(201, 162, 75, 0.22);

  --page-gradient:
    radial-gradient(120% 80% at 50% -10%, rgba(201, 162, 75, 0.16), transparent 60%),
    linear-gradient(180deg, var(--backdrop) 0%, var(--walnut) 100%);

  /* Type */
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);

  /* Space */
  --space-xs: 0.5rem;
  --space-s: 0.85rem;
  --space-m: 1.4rem;
  --space-l: 2.4rem;
  --space-xl: 4rem;

  --radius: 18px;
  --measure: 68ch;
  --shell: 46rem;
  --shell-wide: 74rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --backdrop: #f5efe5;
    --surface: #fffefc;
    --brass: #a67c2e;
    --brass-bright: #8a651f;
    --cardboard: #987651;
    --moss: #4f7a3d;
    --parchment: #fbf6ea;
    --walnut: #674025;

    --ink: #241a12;
    --ink-soft: rgba(36, 26, 18, 0.74);
    --ink-faint: rgba(36, 26, 18, 0.55);
    --rule: rgba(103, 64, 37, 0.18);

    --page-gradient:
      radial-gradient(120% 80% at 50% -10%, rgba(166, 124, 46, 0.14), transparent 60%),
      linear-gradient(180deg, #faf6ee 0%, #ece1cf 100%);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Belt-and-braces with body's own overflow-x below: which element the
     browser treats as the actual scrolling box for the viewport is
     inconsistent enough (confirmed by testing - setting this on body
     alone did not stop the page scrolling sideways) that both need it
     set for this to reliably hold everywhere. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* The hero's fanned-out side screenshots deliberately peek out past
     their own container (see .device-frame--side) - real, measured
     overflow at viewport widths between the "hide the side frames"
     breakpoint and the two-column hero breakpoint (roughly 441-895px;
     confirmed by actually scrolling a rendered page, not by reading
     scrollWidth, which still reports the unclipped extent even once
     overflow: hidden is applied and the page can no longer really be
     scrolled there). Clipping at the page edge is the simple, robust
     fix, rather than hand-tuning breakpoint math to chase a moving
     target. */
  overflow-x: hidden;
  padding:
    max(var(--space-m), env(safe-area-inset-top))
    max(var(--space-m), env(safe-area-inset-right))
    max(var(--space-xl), env(safe-area-inset-bottom))
    max(var(--space-m), env(safe-area-inset-left));
  background: var(--page-gradient) fixed;
  background-color: var(--backdrop);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
}

.shell--wide {
  max-width: var(--shell-wide);
  margin-inline: auto;
}

/* ---- Masthead ---------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-m);
}

/* The app's own shipped icon (App/PuzzlePeace/Resources/Assets.xcassets),
   not a redrawn approximation — iOS icons are already delivered as a
   rounded square, so a modest border-radius here reads as "the same icon,
   just smaller" rather than a re-interpretation of it. */
.mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 22%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.wordmark {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.wordmark a { color: inherit; text-decoration: none; }

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

.hero {
  padding-block: var(--space-l) var(--space-m);
}

.hero--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  /* Top-aligned, not centered: the mockup-fan column runs noticeably
     taller than the copy column (three tall phone screenshots vs. a few
     lines of text + two buttons), and centering left a large dead gap
     floating above the copy - confirmed visually, not something obvious
     from the CSS alone. Top-aligning reads as a normal hero where the
     image column simply runs on a little further than the text. */
  align-items: start;
}

@media (min-width: 56rem) {
  .hero--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

.hero-copy .lede { max-width: none; }

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
}
.badge::before { content: "\2713"; color: var(--moss); font-weight: 700; }

/* ---- Device mockups ------------------------------------------------
   Real screenshots (Marketing/screenshots, resized/compressed into
   web/assets) framed as physical devices, not bare rectangles - a plain
   <img> of a screenshot reads as a diagram; a framed one reads as "the
   product." No image asset for the frame itself, just CSS, so it stays
   crisp at any size and costs nothing to load. */

.mockup-fan {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: var(--space-m);
  /* Clips the side mockups to this container's own box, which (as a grid
     item with no justify-self override) stretches to exactly fill its
     column. Without this, a real bug: the side frames' translateX shifts
     by a fraction of the *front* frame's width, which at the narrower end
     of the two-column layout (~900-1000px viewport) is wider than the
     column's own available slack - confirmed visually, the left mockup
     bled straight across the column boundary and covered the hero copy's
     own text. Clipping here means the peek amount scales with whatever
     room the column actually has, and can never cross into the text
     column next to it, at any viewport. */
  overflow: hidden;
}

.device-frame {
  position: relative;
  width: min(78vw, 260px);
  background: linear-gradient(160deg, #3a352f, #0e0b09);
  border-radius: 42px;
  padding: 9px;
  box-shadow:
    0 40px 70px -20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.device-frame img {
  display: block;
  width: 100%;
  /* Without this, the HTML height="" attribute (present on every one of
     these <img>s so the layout doesn't shift while they load) wins as a
     literal pixel height once an author rule sets width but not height -
     the well-known gotcha this exact combination causes. Confirmed by
     measurement, not guessed: every device screenshot was rendering at
     its full natural height while its width scaled down to fit the
     frame, a real vertical stretch (up to ~39% off the true aspect
     ratio on the iPad shot). height: auto makes it scale from the
     image's real aspect ratio instead. */
  height: auto;
  border-radius: 33px;
  background: var(--surface);
}

.device-frame--side {
  position: absolute;
  top: 50%;
  z-index: 0;
  filter: brightness(0.82) saturate(0.9);
  opacity: 0.92;
}
.device-frame--side.is-left {
  left: 50%;
  transform: translate(calc(-100% - 6px), -46%) rotate(-9deg);
}
.device-frame--side.is-right {
  left: 50%;
  transform: translate(6px, -54%) rotate(9deg);
}
.device-frame--front {
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .device-frame--side, .device-frame--front { transition: transform 220ms ease; }
  .mockup-fan:hover .device-frame--side.is-left { transform: translate(calc(-100% - 16px), -48%) rotate(-13deg); }
  .mockup-fan:hover .device-frame--side.is-right { transform: translate(16px, -56%) rotate(13deg); }
  .mockup-fan:hover .device-frame--front { transform: translateY(-6px); }
}

/* The side mockups only have room to breathe past ~440px; below that
   they'd overlap the front device almost completely, so it's simpler and
   cleaner to show just the one screenshot on a phone-width screen. */
@media (max-width: 27.5rem) {
  .device-frame--side { display: none; }
  .device-frame--front { width: min(70vw, 280px); }
}

.device-frame--ipad {
  width: min(90vw, 460px);
  border-radius: 26px;
  padding: 12px;
}
.device-frame--ipad img { border-radius: 16px; }

/* ---- Feature rows: a screenshot paired with its own explanation, in
   place of a generic icon - used for the handful of features that have
   a real screen to show off. */

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: center;
  padding-block: var(--space-l);
}

@media (min-width: 50rem) {
  .feature-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .feature-row--reverse .feature-row-media { order: 2; }
}

.feature-row-media {
  display: flex;
  justify-content: center;
}

.feature-row-media .device-frame {
  width: min(70vw, 300px);
}

.feature-row h2 { margin-top: 0; }
.feature-row p:last-child { margin-bottom: 0; }

h1 {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

.lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Prose ------------------------------------------------------- */

main { max-width: var(--measure); }
/* The wide shell (index.html) hosts hero/mockup/feature-row layouts that
   need the full shell width; .prose opts individual blocks back into the
   readable measure inside it. */
.shell--wide main { max-width: none; }
.shell--wide footer { max-width: none; }
.prose { max-width: var(--measure); }

h2 {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--space-l) 0 var(--space-xs);
}

h3 {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  margin: var(--space-m) 0 var(--space-xs);
}

p, li { color: var(--ink-soft); }
p { margin: 0 0 var(--space-s); }

ul { margin: 0 0 var(--space-s); padding-left: 1.2em; }
li { margin-bottom: var(--space-xs); }
li::marker { color: var(--brass); }

strong { color: var(--ink); font-weight: 600; }

a {
  color: var(--brass-bright);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--brass); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-l) 0;
}

/* ---- Cards / callouts -------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-m);
  margin-bottom: var(--space-m);
}

.card :is(h2, h3) { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.callout {
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.12), rgba(201, 162, 75, 0.04));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-m);
  margin: var(--space-m) 0;
}
.callout > :last-child { margin-bottom: 0; }

.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-block: var(--space-m);
}

.feature {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-m);
}
.feature h3 { margin-top: 0; }
.feature p:last-child { margin-bottom: 0; }
.feature .icon { font-size: 1.6rem; line-height: 1; display: block; margin-bottom: var(--space-xs); }

@media (prefers-reduced-motion: no-preference) {
  .feature { transition: transform 150ms ease, border-color 150ms ease; }
  .feature:hover { transform: translateY(-3px); border-color: var(--brass); }
}

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.5em;
}

/* ---- Buttons ----------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.button {
  display: inline-block;
  padding: 0.8em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.button--primary {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  color: #1a1206;
  border-color: rgba(0, 0, 0, 0.18);
}
.button--primary:hover { color: #1a1206; filter: brightness(1.06); }

.button--quiet {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--surface);
}
.button--quiet:hover { color: var(--ink); border-color: var(--brass); }

@media (prefers-reduced-motion: no-preference) {
  .button { transition: color 120ms ease, filter 120ms ease, border-color 120ms ease, transform 120ms ease; }
  .button:active { transform: translateY(2px); }
}

/* ---- Meta / footer ----------------------------------------------- */

.meta {
  color: var(--ink-faint);
  font-size: 0.9rem;
}

footer {
  max-width: var(--measure);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 0.9rem;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-bottom: var(--space-xs);
}

/* Tables (used by the privacy data summary) scroll rather than
   forcing the page itself to scroll sideways on a phone. */
.table-scroll { overflow-x: auto; margin-bottom: var(--space-s); }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 26rem;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  vertical-align: top;
}

th { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  a, .button { transition: color 120ms ease, filter 120ms ease, border-color 120ms ease; }
}