/* HushKin website. One stylesheet, no scripts. The look follows the app (SPEC 3.21):
   cream background, white cards with thin borders, serif headings, line icons, soft tints. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #f7f4ef;
  --surface: #ffffff;
  --surface-alt: #f7f4ef;
  --border: #e8e2da;
  --line: #f1ece5;
  --ink: #26221f;
  --ink-2: #4a433d;
  --muted: #6b625a;
  --accent: #4c5a9c;
  --accent-ink: #ffffff;
  --accent-hover: #36437a;
  --link: #3f4c8c;
  --eyebrow: #5a4a8e;
  --focus: #4c5a9c;
  --warm: #f3e4dc;
  --warm-ink: #8a4535;
  /* The beta band: deep indigo with cream text and a cream button with indigo text
     (cream on indigo 5.9:1, indigo on cream 8.5:1, soft text 5.2:1). */
  --band: #4c5a9c;
  --band-ink: #f7f4ef;
  --band-soft: #e3e7f5;
  --band-button: #f7f4ef;
  --band-button-ink: #36437a;
  --band-button-hover: #ffffff;
  --band-link: #f7f4ef;
  --band-focus: #f7f4ef;
  --band-line: #e3e7f5;
  --tint-blue: #e3edf8;
  --tint-peach: #fbe7dc;
  --tint-mint: #ddf1ec;
  --tint-lilac: #ece6f6;
  --tint-butter: #fbf1d5;
  --tint-rose: #f9e1e4;
  --tint-indigo: #e6e9f5;
  --tint-stone: #eeeae4;
  --ink-blue: #3d6fa8;
  --ink-peach: #a85a33;
  --ink-mint: #2a7363;
  --ink-lilac: #6b57a5;
  --ink-butter: #7d6110;
  --ink-rose: #a8475a;
  --ink-indigo: #4c5a9c;
  --ink-stone: #6b625a;
  /* One set of shapes for the whole site: one corner for cards and panels, one for buttons,
     three shadow sizes, and the same space above and below every section. */
  --radius-card: 18px;
  --radius-button: 14px;
  --shadow-sm: 0 1px 3px rgba(38, 34, 31, 0.1);
  --shadow-md: 0 2px 6px rgba(38, 34, 31, 0.08), 0 16px 32px rgba(38, 34, 31, 0.14);
  --shadow-lg: 0 2px 6px rgba(38, 34, 31, 0.12), 0 28px 56px rgba(38, 34, 31, 0.2);
  --section-y: clamp(48px, 6vw, 64px);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode: a deep indigo-navy background with cream text and the same accents.
   Every text colour here passes WCAG AA on the backgrounds it sits on. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a2e;
    --surface: #1c2441;
    --surface-alt: #18203a;
    --border: #2e3759;
    --line: #262f4d;
    --ink: #f5efe6;
    --ink-2: #ddd6ca;
    --muted: #b4b0c2;
    --accent: #5b6bc0;
    --accent-ink: #ffffff;
    --accent-hover: #6b7bcf;
    --link: #b9c2ef;
    --eyebrow: #c9bdf0;
    --focus: #aab5ea;
    --warm: #2c2433;
    --warm-ink: #f0b8a4;
    --band: #1d2547;
    --band-ink: #f5efe6;
    --band-soft: #ddd6ca;
    /* In dark mode the band stays navy with the usual solid indigo button. */
    --band-button: var(--accent);
    --band-button-ink: var(--accent-ink);
    --band-button-hover: var(--accent-hover);
    --band-link: var(--link);
    --band-focus: var(--focus);
    --band-line: var(--muted);
    --tint-blue: #1e2b4a;
    --tint-peach: #36283a;
    --tint-mint: #19323a;
    --tint-lilac: #282650;
    --tint-butter: #312e2c;
    --tint-rose: #352340;
    --tint-indigo: #222b52;
    --tint-stone: #262b40;
    --ink-blue: #9cc2ec;
    --ink-peach: #f0b38f;
    --ink-mint: #8fd6c4;
    --ink-lilac: #c9bdf0;
    --ink-butter: #e8cf7f;
    --ink-rose: #eda6b2;
    --ink-indigo: #b9c2ef;
    --ink-stone: #c8c3d4;
    --shadow-sm: 0 1px 3px rgba(4, 7, 20, 0.4);
    --shadow-md: 0 2px 6px rgba(4, 7, 20, 0.3), 0 16px 32px rgba(4, 7, 20, 0.45);
    --shadow-lg: 0 2px 6px rgba(4, 7, 20, 0.35), 0 28px 56px rgba(4, 7, 20, 0.6);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
  /* One continuous underline, not broken under letters like p, y and g. */
  text-decoration-skip-ink: none;
}
a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
/* Serif headlines, a little larger with slightly tighter letters; everything else is sans. */
h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  letter-spacing: -0.015em;
}
h3 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
p {
  margin: 0;
}
/* Comfortable reading: no line of running text longer than about 60 characters. */
p,
li {
  max-width: 60ch;
}
/* A paragraph that only holds a centred button isn't running text. */
p.section-head {
  max-width: none;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 16px;
  border-radius: var(--radius-button);
  z-index: 30;
}
.skip:focus {
  top: 12px;
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px) {
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.narrow {
  max-width: 760px;
}

/* Header: always at the top of the screen, with a faint blur and a hairline border, so the
   menu stays in reach on long pages. Where the browser supports scroll-driven animations,
   the blur and border fade in only once the page has scrolled; with reduced motion, or in
   other browsers, they're simply always there. No script. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}
@keyframes header-settle {
  from {
    background-color: color-mix(in srgb, var(--bg) 0%, transparent);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: blur(0) saturate(1);
    backdrop-filter: blur(0) saturate(1);
  }
  to {
    background-color: color-mix(in srgb, var(--bg) 84%, transparent);
    border-bottom-color: var(--border);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header {
      animation: header-settle linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80px;
    }
  }
}
/* Links to a part of a page land below the header. */
html {
  scroll-padding-top: 124px;
}
@media (min-width: 640px) {
  html {
    scroll-padding-top: 100px;
  }
}
/* On a phone the header is a little tighter, so it takes less of the screen. */
@media (max-width: 639px) {
  .site-header .wrap {
    padding-top: 6px;
    padding-bottom: 6px;
    row-gap: 0;
  }
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  min-height: 48px;
}
.brand:hover {
  color: var(--ink);
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #4c5a9c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-button);
}
.site-nav a:hover {
  background: var(--surface);
}
.site-nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  text-decoration-skip-ink: none;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-button);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.button-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.button-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}
.button-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.button-quiet:hover {
  color: var(--ink);
  border-color: var(--ink-2);
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow);
  font-weight: 700;
}
.lead {
  font-size: 1.2rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.9rem;
}

/* Hero */
.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 40px;
}
@media (min-width: 900px) {
  .hero {
    padding-top: 72px;
  }
}

/* Trust strip: four small pills under the hero. */
.trust {
  padding-bottom: var(--section-y);
}
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 700;
}
.trust-list svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-indigo);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.hero-text {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.hero-phone {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* The hero's drawing: soft colour behind, a Moments screen peeking out, and the Today
   screen in front, tilted a little. Everything is sized against the stage's width (cqw),
   so it shrinks in proportion and never pushes the page wider. */
.hero-stage {
  container-type: inline-size;
  position: relative;
  width: min(440px, 100%);
  /* How strongly the colour shows: stronger on cream, softer on the dark background. */
  --glow-mix: 52%;
  --glow-opacity: 0.9;
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: var(--glow-opacity);
}
.glow-peach {
  width: 76cqw;
  height: 76cqw;
  left: 0;
  top: 0;
  background: color-mix(in srgb, var(--tint-peach), var(--ink-peach) var(--glow-mix));
}
.glow-lilac {
  width: 72cqw;
  height: 72cqw;
  right: 0;
  top: 26%;
  background: color-mix(in srgb, var(--tint-lilac), var(--ink-lilac) var(--glow-mix));
}
.glow-mint {
  width: 66cqw;
  height: 66cqw;
  left: 6cqw;
  bottom: 0;
  background: color-mix(in srgb, var(--tint-mint), var(--ink-mint) var(--glow-mix));
}
@media (prefers-color-scheme: dark) {
  .hero-stage {
    --glow-mix: 28%;
    --glow-opacity: 0.75;
  }
}

/* The drawn phones, like the mockup: not screenshots. Sizes inside are in em, and 1em is
   16px at full size, so each phone shrinks in proportion on narrow screens. */
.phone {
  margin: 0;
  border-radius: 2.75em;
  background: #26221f;
  padding: 0.75em;
}
.phone-front {
  position: relative;
  width: 57cqw;
  font-size: min(1rem, 3.04cqw);
  margin: 13cqw 0 7cqw 39cqw;
  transform: rotate(2.5deg);
  box-shadow: var(--shadow-lg);
}
.phone-back {
  position: absolute;
  width: 40cqw;
  font-size: min(1rem, 3.04cqw);
  left: 3cqw;
  top: 3cqw;
  transform: rotate(-5deg);
  box-shadow: var(--shadow-md);
  opacity: 0.97;
}
.phone-back .phone-title {
  font-size: 1.3em;
}
.phone-back .phone-screen {
  padding: 1.25em 0.875em 1.5em;
  min-height: 19em;
}
.moment-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em;
}
.moment-grid li {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: 0.6em;
  font-weight: 700;
}
.moment-photo {
  display: block;
  aspect-ratio: 1;
  border-radius: 0.9em;
  border: 0.35em solid #ffffff;
  box-shadow: var(--shadow-sm);
}
.phone-screen {
  border-radius: 2.125em;
  background: #f7f4ef;
  color: #26221f;
  padding: 1.375em 1em 1.625em;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.phone-title {
  font-family: var(--serif);
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.1;
}
.phone-date {
  font-size: 0.75em;
  color: #6b625a;
  font-weight: 600;
}
.phone-banner {
  background: #ece6f6;
  border-radius: 0.75em;
  padding: 0.625em 0.75em;
  font-size: 0.75em;
  font-weight: 700;
}
.phone-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375em;
}
.phone-tiles li {
  height: 3.625em;
  border-radius: 0.75em;
  background: #ffffff;
  border: 1px solid #eee8e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-size: 0.6em;
  font-weight: 700;
}
.phone-tiles .dot {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-rows {
  list-style: none;
  margin: 0;
  padding: 0.125em 0.75em;
  background: #ffffff;
  border: 1px solid #eee8e0;
  border-radius: 0.875em;
}
.phone-rows li {
  padding: 0.5625em 0;
  border-bottom: 1px solid #f1ece5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.phone-rows li:last-child {
  border-bottom: 0;
}
.phone-rows b {
  font-size: 0.75em;
}
.phone-rows span {
  font-size: 0.7em;
  color: #6b625a;
}

/* Sections */
.band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.section-head p {
  color: var(--ink-2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.band .card,
.card-soft {
  background: var(--surface-alt);
  border-color: transparent;
}
.card h2,
.card h3 {
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
}
.card p,
.card li {
  color: var(--ink-2);
  font-size: 0.98rem;
}
.card ul {
  margin: 0;
  padding-left: 1.2em;
}
.card-row {
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}
.card-row > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.chip {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chip svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-blue {
  background: var(--tint-blue);
  color: var(--ink-blue);
}
.t-peach {
  background: var(--tint-peach);
  color: var(--ink-peach);
}
.t-mint {
  background: var(--tint-mint);
  color: var(--ink-mint);
}
.t-lilac {
  background: var(--tint-lilac);
  color: var(--ink-lilac);
}
.t-butter {
  background: var(--tint-butter);
  color: var(--ink-butter);
}
.t-rose {
  background: var(--tint-rose);
  color: var(--ink-rose);
}
.t-indigo {
  background: var(--tint-indigo);
  color: var(--ink-indigo);
}
.t-stone {
  background: var(--tint-stone);
  color: var(--ink-stone);
}

/* The phone and drawn cards keep the light tints, like the app in light mode. */
.phone,
.mock {
  --tint-blue: #e3edf8;
  --tint-peach: #fbe7dc;
  --tint-mint: #ddf1ec;
  --tint-lilac: #ece6f6;
  --tint-butter: #fbf1d5;
  --tint-rose: #f9e1e4;
  --tint-indigo: #e6e9f5;
  --tint-stone: #eeeae4;
  --ink-blue: #3d6fa8;
  --ink-peach: #a85a33;
  --ink-mint: #2a7363;
  --ink-lilac: #6b57a5;
  --ink-butter: #7d6110;
  --ink-rose: #a8475a;
  --ink-indigo: #4c5a9c;
  --ink-stone: #6b625a;
}
.phone .dot svg,
.mock .dot svg {
  width: 1.35em;
  height: 1.35em;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Headline features: a full-width row each, the drawing on one side and the words on the
   other, swapping sides from row to row. */
.features-head {
  padding-top: var(--section-y);
  padding-bottom: 0;
}
/* Rows inside the features section: half the section space above and below each, so the
   rows are a section's space apart. */
.feature-band {
  padding-top: calc(var(--section-y) / 2);
  padding-bottom: calc(var(--section-y) / 2);
}
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
@media (min-width: 860px) {
  .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
  .feature-row-flip .feature-visual {
    order: -1;
  }
}
.feature-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 34em;
}
.feature-text h2,
.feature-text h3,
.showcase-text h3 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.feature-text p,
.feature-text li {
  color: var(--ink-2);
}
.feature-text ul {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature-visual {
  border-radius: var(--radius-card);
  padding: 40px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.card-wide {
  grid-column: 1 / -1;
}
.v-blue {
  background: var(--tint-blue);
}
.v-lilac {
  background: var(--tint-lilac);
}
.v-peach {
  background: var(--tint-peach);
}

/* A drawn app card, like the hero phone but without the phone around it. */
.mock {
  width: min(340px, 100%);
  font-size: 1.05rem;
  background: #f7f4ef;
  color: #26221f;
  border-radius: 1.75em;
  padding: 1.25em 1.1em 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  box-shadow: var(--shadow-md);
}
.mock .phone-tiles .is-pressed {
  border-color: #3d6fa8;
  box-shadow: 0 0 0 2px #e3edf8;
}
.mock-button {
  align-self: flex-start;
  background: #4c5a9c;
  color: #ffffff;
  border-radius: 0.75em;
  padding: 0.5em 0.9em;
  font-size: 0.75em;
  font-weight: 700;
}

/* Small feature cards: a faint wash of the icon's colour. */
.card-row:has(> .t-blue) {
  background: color-mix(in srgb, var(--tint-blue) 45%, var(--surface));
}
.card-row:has(> .t-peach) {
  background: color-mix(in srgb, var(--tint-peach) 45%, var(--surface));
}
.card-row:has(> .t-mint) {
  background: color-mix(in srgb, var(--tint-mint) 45%, var(--surface));
}
.card-row:has(> .t-lilac) {
  background: color-mix(in srgb, var(--tint-lilac) 45%, var(--surface));
}
.card-row:has(> .t-butter) {
  background: color-mix(in srgb, var(--tint-butter) 45%, var(--surface));
}
.card-row:has(> .t-rose) {
  background: color-mix(in srgb, var(--tint-rose) 45%, var(--surface));
}
.card-row:has(> .t-indigo) {
  background: color-mix(in srgb, var(--tint-indigo) 45%, var(--surface));
}
.card-row:has(> .t-stone) {
  background: color-mix(in srgb, var(--tint-stone) 45%, var(--surface));
}
.card-row > .chip {
  background: var(--surface);
}

/* Three steps on Home: a tiny drawn screen for each, side by side at every width. */
.steps-section {
  padding-bottom: var(--section-y);
}
.steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 4vw, 48px);
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  min-width: 0;
  container-type: inline-size;
}
.step-title {
  font-weight: 700;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.9rem, 2.4vw, 1.05rem);
  line-height: 1.3;
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
/* The tiny phone: sized in em against the step's width (cqw), 1em = 16px at full size. */
.mini {
  --tint-blue: #e3edf8;
  --tint-peach: #fbe7dc;
  --tint-mint: #ddf1ec;
  --tint-lilac: #ece6f6;
  width: min(150px, 100%);
  font-size: min(1rem, 10.6cqw);
  aspect-ratio: 150 / 200;
  overflow: hidden;
  border-radius: 1.5em;
  background: #26221f;
  padding: 0.4em;
  box-shadow: var(--shadow-md);
}
.mini-screen {
  height: 100%;
  border-radius: 1.15em;
  background: #f7f4ef;
  color: #26221f;
  padding: 0.9em 0.7em;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}
.mini-open {
  align-items: center;
  justify-content: center;
}
.mini-mark {
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.75em;
  background: #4c5a9c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-mark svg {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.mini-name,
.mini-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.85em;
}
.mini-tiles,
.mini-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35em;
}
.mini-tiles span {
  aspect-ratio: 1.35;
  border-radius: 0.5em;
  border: 1px solid #eee8e0;
}
.mini-tiles .is-pressed {
  border: 2px solid #3d6fa8;
}
.mini-row {
  height: 1.6em;
  border-radius: 0.45em;
  background: #ffffff;
  border: 1px solid #eee8e0;
}
.mini-photos span {
  aspect-ratio: 1;
  border-radius: 0.4em;
  border: 0.18em solid #ffffff;
  box-shadow: var(--shadow-sm);
  background:
    radial-gradient(circle at 28% 25%, rgba(255, 255, 255, 0.6), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 5px),
    var(--photo);
}
.p-peach {
  --photo: #fbe7dc;
}
.p-mint {
  --photo: #ddf1ec;
}
.p-lilac {
  --photo: #ece6f6;
}
.p-butter {
  --photo: #fbf1d5;
}

/* Spot drawings: small, original and decorative, in a section's corner. Coloured from the
   site's tints and muted ink, so they follow dark mode. */
.has-spot {
  position: relative;
}
.spot {
  position: absolute;
  width: clamp(40px, 6vw, 76px);
  height: auto;
  pointer-events: none;
}
.spot-tr {
  top: clamp(8px, 2vw, 24px);
  right: clamp(8px, 3vw, 40px);
}
.spot-tl {
  top: clamp(8px, 2vw, 24px);
  left: clamp(8px, 3vw, 40px);
}
.spot-line {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.spot-dot {
  fill: var(--muted);
  opacity: 0.6;
}
.spot-fill-butter {
  fill: var(--tint-butter);
}
.spot-fill-blue {
  fill: var(--tint-blue);
}
.spot-fill-peach {
  fill: color-mix(in srgb, var(--tint-peach) 70%, var(--surface));
}
.spot-fill-rose {
  fill: var(--tint-rose);
}
.warm .spot-fill-peach {
  fill: var(--surface);
}
.page-head.has-spot .spot-tr {
  top: 24px;
}

/* Photobook showcase */
.warm {
  background: var(--warm);
}
.warm .eyebrow {
  color: var(--warm-ink);
}
.showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.showcase-text {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.showcase-text p {
  color: var(--ink-2);
}
/* The photobook pages, drawn as a printed spread: they overlap a little, the outer two
   are turned a degree or two, each has a paper edge and a soft shadow, and the photo
   spaces have a soft texture. Sizes follow the spread's width (cqw), so it shrinks in
   one piece on a phone. Gradients only: no images. */
.pages {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 540px;
  margin: 0 auto;
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5% 3%;
}
/* On wide screens the Home spread is about a quarter larger, to fill its band. */
@media (min-width: 1000px) {
  .showcase .pages {
    flex: 1.35 1 560px;
    max-width: 675px;
  }
}
.book-page {
  --photo: #e4eee7;
  position: relative;
  flex: 0 0 31%;
  aspect-ratio: 160 / 207;
  padding: 3.2cqw;
  border-radius: 2px 5px 5px 2px;
  background: #fffdf9;
  color: #26221f;
  border: 1px solid rgba(38, 34, 31, 0.07);
  box-shadow:
    1px 1px 0 #efe9e1,
    2px 2px 0 #fffdf9,
    3px 3px 0 #e6dfd5,
    var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}
/* The fold: a faint shade along each page's bound edge. */
.book-page::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(38, 34, 31, 0.07), transparent 12%);
  pointer-events: none;
}
.book-page + .book-page {
  margin-left: -4%;
}
.book-page:nth-child(1) {
  transform: rotate(-2deg);
  z-index: 1;
}
.book-page:nth-child(2) {
  transform: translateY(-3%);
  z-index: 2;
}
.book-page:nth-child(3) {
  transform: rotate(1.5deg);
  z-index: 3;
}
.book-cover {
  --photo: #e6d3c8;
  background: #f7f0ea;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  text-align: center;
}
/* Soft texture in the photo spaces: a gentle light, a little shade and fine paper lines. */
.book-cover .circle,
.book-photo,
.book-grid span {
  background:
    radial-gradient(circle at 28% 25%, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(38, 34, 31, 0.07), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 5px),
    var(--photo);
}
.book-cover .circle {
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.1cqw solid #ffffff;
  box-shadow: var(--shadow-sm);
}
.book-title {
  font-family: var(--serif);
  font-size: 3.1cqw;
  font-weight: 600;
  line-height: 1.2;
}
.book-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
}
.book-date {
  font-size: 2.1cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3f6b52;
  font-weight: 700;
}
.book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.6cqw;
}
.book-grid span {
  border-radius: 2px;
}
.book-grid span:nth-child(1) {
  --photo: #e7ebf3;
}
.book-grid span:nth-child(2) {
  --photo: #f3e4dc;
}
.book-grid span:nth-child(3) {
  --photo: #ece6f6;
}
.book-grid span:nth-child(4) {
  --photo: #e4eee7;
}

/* Features: "What HushKin will never do", all on one left edge. */
.promise {
  align-items: flex-start;
  gap: 24px;
}
.promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promise-list li {
  position: relative;
  padding-left: 1.5em;
  color: var(--ink-2);
}
.promise-list li::before {
  content: '';
  position: absolute;
  left: 0.25em;
  top: 0.62em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--ink-indigo);
}

/* A beta button with its one line of context. */
.beta-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.beta-cta p {
  color: var(--ink-2);
  font-weight: 600;
}

/* Beta */
.beta {
  background: var(--band);
  color: var(--band-ink);
}
.beta .section {
  align-items: center;
  text-align: center;
  gap: 18px;
}
.beta p {
  color: var(--band-soft);
}
/* The "Or write to…" line is short, so it can run the band's full width without leaving
   one word on its own line. */
.beta p.small {
  max-width: none;
}
.beta a:not(.button) {
  color: var(--band-link);
}
.beta .button-primary {
  background: var(--band-button);
  color: var(--band-button-ink);
}
.beta .button-primary:hover {
  background: var(--band-button-hover);
  color: var(--band-button-ink);
}
.beta :focus-visible {
  outline-color: var(--band-focus);
}
.beta .spot-line {
  stroke: var(--band-line);
}

/* Long pages: policy, terms, support, about */
.page-head {
  padding-top: 32px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prose {
  padding-bottom: var(--section-y);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prose h2 {
  font-size: 1.75rem;
  margin-top: 24px;
}
.prose h3 {
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 8px;
}
.prose p,
.prose li {
  color: var(--ink-2);
}
.prose ul,
.prose ol {
  margin: 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.summary h2 {
  margin-top: 0;
  font-size: 1.3rem;
}
.contents {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 22px;
}
.contents ol {
  gap: 2px;
}
.contents a {
  display: inline-block;
  padding: 6px 0;
}

/* Tables scroll in their own box at phone width. */
.table-box {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 0.95rem;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
tr:last-child td {
  border-bottom: 0;
}
th {
  font-weight: 700;
  color: var(--ink);
}
td {
  color: var(--ink-2);
}

/* On a phone, each row becomes a small block with its labels, so nothing hides off the side. */
@media (max-width: 600px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  tr:last-child {
    border-bottom: 0;
  }
  td {
    border-bottom: 0;
    padding: 4px 14px;
  }
  td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
  }
  .table-box {
    overflow-x: visible;
  }
  /* The safety lines: one card per country, the country as its heading. */
  .table-cards {
    border: 0;
    background: transparent;
  }
  .table-cards tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .table-cards tr,
  .table-cards tr:last-child {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 14px 0;
  }
  .table-cards td {
    padding: 4px 16px;
  }
  .table-cards td:first-child {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
  }
  .table-cards td:first-child::before {
    content: none;
  }
}

/* FAQ */
.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 0 18px;
}
.faq summary {
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  font-weight: 700;
  padding: 12px 0;
}
.faq details > div {
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink-2);
}
.faq ol,
.faq ul {
  margin: 0;
  padding-left: 1.3em;
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-card .email {
  font-size: 1.2rem;
  font-weight: 700;
  word-break: break-word;
}
address {
  font-style: normal;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
}
.site-footer .wrap {
  padding-top: 36px;
  padding-bottom: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--muted);
}
.footer-words {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 34em;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Dark mode for the drawn phones and the brand mark (after their own rules, so it wins). */
@media (prefers-color-scheme: dark) {
  /* The drawn phones keep a dark frame, with a faint light rim so they stand out on navy. */
  .phone {
    background: #0b0f1d;
  }
  .phone-front {
    box-shadow: 0 0 0 1px rgba(245, 239, 230, 0.16), var(--shadow-lg);
  }
  .phone-back {
    box-shadow: 0 0 0 1px rgba(245, 239, 230, 0.12), var(--shadow-md);
  }
  .brand-mark {
    box-shadow: 0 0 0 1px rgba(245, 239, 230, 0.14);
  }
  .mini {
    background: #0b0f1d;
    box-shadow: 0 0 0 1px rgba(245, 239, 230, 0.14), var(--shadow-md);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media print {
  .site-header {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }
  .site-header nav,
  .skip,
  .beta {
    display: none;
  }
  body {
    background: #ffffff;
    color: #000000;
  }
}