/* ==========================================================================
   Enframe — static site styles
   Design tokens are a direct port of lib/core/theme/app_palette.dart.
   Light theme = the app's "cream" palette. Dark theme = "dusk".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted, identical files to assets/fonts/ in the app)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/InstrumentSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/InstrumentSerif-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design tokens — "cream" palette
   -------------------------------------------------------------------------- */

:root {
  /* Background gradient stops */
  --bg-start: #ecd9b9;
  --bg-end: #d9b884;

  /* Primary text / ink */
  --ink: #2a1a08;
  --ink-rgb: 42, 26, 8;

  /* Brand accent */
  --accent: #c66a3a;

  /* Paper surface variants (lightest -> most saturated) */
  --paper: #fffaf0;
  --paper-soft: #fef6e3;
  --paper-soft-2: #fbeed1;
  --paper-edge: #e8dcc6;
  --paper-edge-2: #d8c8a8;

  /* Secondary decorative ink (lines, stamps) */
  --sketch: #8a6f48;

  /* Button foreground */
  --btn-fg: #fef9ec;

  /* Alpha-on-ink scale — mirrors AppPalette.inkAt() */
  --ink-88: rgba(var(--ink-rgb), 0.88); /* captionColor */
  --ink-70: rgba(var(--ink-rgb), 0.7);  /* secondaryTextColor */
  --ink-58: rgba(var(--ink-rgb), 0.58); /* mutedLabelColor */
  --ink-20: rgba(var(--ink-rgb), 0.2);  /* shadowColor */
  --ink-10: rgba(var(--ink-rgb), 0.1);  /* hairlineColor */
  --ink-05: rgba(var(--ink-rgb), 0.05); /* grainColor */

  /* Typography */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Shape — the app uses a fully pill-shaped borderRadius30 on buttons */
  --radius-pill: 999px;
  --radius-card: 18px;
  --radius-frame: 4px;

  /* Layout */
  --measure: 68ch;
  --page-max: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  /* Clears the sticky header (66px) plus breathing room. Used for anchor
     scrolling and for anything else that parks below the header. */
  --header-offset: 88px;

  color-scheme: light;
}

/* "dusk" palette */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-start: #c5b6c4;
    --bg-end: #8e7e96;

    --ink: #241626;
    --ink-rgb: 36, 22, 38;

    --accent: #7c4a73;

    --paper: #f7f1f5;
    --paper-soft: #ebe1ea;
    --paper-soft-2: #d6c8d4;
    --paper-edge: #d6cad4;
    --paper-edge-2: #bfafbe;

    --sketch: #7a6b78;
    --btn-fg: #f1e7ee;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors would otherwise land underneath the sticky header. */
  scroll-padding-top: var(--header-offset);
  /* The body gradient is viewport-anchored (background-attachment: fixed), so it
     cannot reach the overscroll region or the iOS safe zones. Only a background
     on the root covers the whole canvas — without this they render white. The
     gradient's top stop is the closest single colour to it, and is the same one
     declared in <meta name="theme-color">. */
  background-color: var(--bg-start);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  /* Same topLeft -> bottomRight direction as AppPalette.bgGradient */
  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
  background-attachment: fixed;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

hr {
  border: 0;
  border-top: 1px solid var(--ink-10);
  margin: 2.5rem 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0 0 var(--radius-card) 0;
}

.skip-link:focus {
  left: 0;
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(var(--ink-rgb), 0.03);
  border-bottom: 1px solid var(--ink-10);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--ink-20);
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.5vw, 1.75rem);
}

.site-nav a {
  color: var(--ink-70);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

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

.site-nav .nav-cta {
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--btn-fg);
}

.site-nav .nav-cta:hover {
  color: var(--btn-fg);
  filter: brightness(1.08);
}

@media (max-width: 560px) {
  .site-nav .hide-sm {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

section {
  padding-block: clamp(3rem, 7vw, 5.25rem);
}

.eyebrow {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.section-head {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section-head h2 {
  font-size: clamp(2rem, 5vw, 2.9rem);
}

.section-head p {
  margin-top: 0.9rem;
  color: var(--ink-70);
  font-size: 1.05rem;
}

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

.hero {
  padding-top: clamp(3rem, 8vw, 5.5rem);
  /* The print stack already carries a lot of visual air below it, so the hero
     needs less bottom padding than a standard section. */
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.hero h1 {
  font-size: clamp(2.9rem, 8vw, 4.75rem);
  margin-bottom: 1.1rem;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero .lede {
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  color: var(--ink-70);
  max-width: 40ch;
  margin-bottom: 2rem;
}

.hero-note {
  margin-top: 1.5rem;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--ink-58);
}

/* --------------------------------------------------------------------------
   Store badges
   -------------------------------------------------------------------------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.4rem 0.7rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--btn-fg);
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.badge:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.badge svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: currentColor;
}

.badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.badge-text small {
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.72;
}

.badge-text strong {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.badge--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-20);
}

.badge--ghost:hover {
  color: var(--ink);
  background: var(--ink-05);
  filter: none;
}

/* --------------------------------------------------------------------------
   Instant-film prints
   -------------------------------------------------------------------------- */

.snapshot {
  background: var(--paper);
  padding: var(--pad-side, 5%) var(--pad-side, 5%) var(--pad-bottom, 20%);
  border-radius: var(--radius-frame);
  box-shadow: 0 12px 32px var(--ink-20), 0 2px 4px var(--ink-10);
  position: relative;
}

.snapshot .shot {
  aspect-ratio: var(--shot-ratio, 1);
  overflow: hidden;
  background: var(--paper-edge-2);
  border-radius: 1px;
}

.snapshot .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.snapshot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pad-bottom, 20%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  color: var(--ink-88);
  text-align: center;
  padding-inline: 6%;
}

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

.hero-stack {
  position: relative;
  /* Wider than tall: the prints descend left-to-right, so a square box would
     leave a band of dead space underneath. */
  aspect-ratio: 1 / 0.78;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
}

.hero-stack .snapshot {
  position: absolute;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The right edge of each rear print is tucked under the next one, so their
   captions are left-aligned to sit in the portion that stays visible. The
   front print keeps its caption centred. */
.hero-stack .p1 figcaption,
.hero-stack .p2 figcaption {
  justify-content: flex-start;
  padding-inline: 7% 0;
}

/* A descending staircase: each print starts to the right of, and below, the
   one before it, so no print ever lands on its neighbour's caption band. The
   captions are part of the pitch, so they all have to stay readable.
   The 3% inset at each end leaves room for the corners the rotation throws
   outside the element box — without it the row overflows on narrow screens. */
.hero-stack .p1 {
  width: 37%;
  left: 4%;
  top: 0;
  --shot-ratio: 1;
  --pad-side: 5.1%;
  --pad-bottom: 21%;
  transform: rotate(-6deg);
  z-index: 1;
}

.hero-stack .p2 {
  width: 38%;
  left: 30%;
  top: 16%;
  --shot-ratio: 0.72;
  --pad-side: 7.4%;
  --pad-bottom: 22%;
  transform: rotate(3deg);
  z-index: 2;
}

.hero-stack .p3 {
  width: 35%;
  left: 58%;
  top: 32%;
  --shot-ratio: 1.05;
  --pad-side: 6.9%;
  --pad-bottom: 22%;
  transform: rotate(-2deg);
  z-index: 3;
}

.hero-stack .snapshot:hover {
  transform: rotate(0deg) scale(1.03);
  z-index: 5;
}

/* --------------------------------------------------------------------------
   Cards / feature grid
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  background: var(--paper);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 1.9rem);
  box-shadow: 0 6px 18px rgba(var(--ink-rgb), 0.08);
}

.card h3 {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}

.card p {
  margin: 0;
  color: var(--ink-70);
  font-size: 0.95rem;
}

.card .icon {
  width: 38px;
  height: 38px;
  margin-bottom: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--paper-soft-2);
  color: var(--accent);
}

.card .icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Filter swatches -------------------------------------------------------- */

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.swatch {
  font-size: 0.76rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-10);
  background: var(--paper-soft);
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   Privacy band
   -------------------------------------------------------------------------- */

.band {
  background: var(--paper);
  border-block: 1px solid var(--ink-10);
}

.promises {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 2.5rem;
}

.promise strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.35rem;
}

.promise span {
  color: var(--ink-70);
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   Plans
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.plan {
  background: var(--paper);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-card);
  padding: clamp(1.6rem, 3.5vw, 2.1rem);
}

.plan--premium {
  border-color: var(--accent);
  background: var(--paper-soft);
  box-shadow: 0 10px 30px rgba(var(--ink-rgb), 0.12);
}

.plan h3 {
  font-size: 1.7rem;
  margin-bottom: 0.3rem;
}

.plan .plan-note {
  color: var(--ink-58);
  font-size: 0.88rem;
  margin-bottom: 1.4rem;
}

.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.plan li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.95rem;
  color: var(--ink-70);
}

.plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}

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

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

.site-footer {
  border-top: 1px solid var(--ink-10);
  padding-block: 2.75rem;
  font-size: 0.88rem;
  color: var(--ink-58);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}

.site-footer nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

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

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

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.legal .wrap {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .legal .wrap {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
  }
}

/* Table of contents ------------------------------------------------------ */

.toc {
  background: var(--paper);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.35rem;
  font-size: 0.87rem;
}

@media (min-width: 960px) {
  .toc {
    position: sticky;
    top: var(--header-offset);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

.toc > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toc > summary::-webkit-details-marker {
  display: none;
}

.toc > summary::after {
  content: '+';
  font-size: 1.1rem;
  color: var(--ink-58);
}

.toc[open] > summary::after {
  content: '\2212';
}

@media (min-width: 960px) {
  .toc > summary {
    cursor: default;
    pointer-events: none;
    margin-bottom: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    color: var(--ink-58);
  }
  /* Matches the specificity of .toc[open] > summary::after so the open-state
     minus sign does not leak onto the always-expanded desktop layout. */
  .toc[open] > summary::after,
  .toc > summary::after {
    content: '';
  }
}

.toc ol {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  counter-reset: toc;
  display: grid;
  gap: 0.4rem;
}

.toc li {
  counter-increment: toc;
}

.toc a {
  color: var(--ink-70);
  text-decoration: none;
  display: block;
  line-height: 1.4;
}

.toc a::before {
  content: counter(toc) '.';
  color: var(--ink-58);
  margin-right: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.toc a:hover {
  color: var(--accent);
}

/* Document --------------------------------------------------------------- */

.doc {
  background: var(--paper);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 5vw, 3.25rem);
  box-shadow: 0 8px 28px rgba(var(--ink-rgb), 0.08);
  min-width: 0;
}

.doc > * {
  max-width: var(--measure);
}

.doc h1 {
  font-size: clamp(2.1rem, 5vw, 3rem);
  margin-bottom: 0.9rem;
}

.doc h2 {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  padding-top: 0.35rem;
}

.doc h2:first-of-type {
  margin-top: 2rem;
}

.doc h3 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  margin-top: 1.85rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.005em;
}

.doc p,
.doc li {
  color: var(--ink-88);
}

.doc ul,
.doc ol {
  margin: 0 0 1em;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.5rem;
}

.doc li::marker {
  color: var(--ink-58);
}

.doc a {
  word-break: break-word;
}

.doc .meta {
  font-size: 0.88rem;
  color: var(--ink-58);
  margin-bottom: 1.75rem;
}

.doc .meta span + span::before {
  content: '\00b7';
  margin-inline: 0.55rem;
}

.doc .callout {
  background: var(--paper-soft);
  border: 1px solid var(--ink-10);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 1.1rem 1.35rem;
  margin-bottom: 2rem;
  font-size: 0.94rem;
}

.doc .callout p:last-child {
  margin-bottom: 0;
}

.doc .table-scroll {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  max-width: 100%;
  border: 1px solid var(--ink-10);
  border-radius: 10px;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: 0.92rem;
}

.doc th,
.doc td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--ink-10);
  vertical-align: top;
}

.doc thead th {
  background: var(--paper-soft);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-70);
}

.doc tbody tr:last-child td {
  border-bottom: 0;
}

.doc .back {
  display: inline-block;
  margin-top: 3rem;
  font-size: 0.9rem;
  text-decoration: none;
}

.doc .back::before {
  content: '\2190';
  margin-right: 0.4rem;
}

/* Print ------------------------------------------------------------------ */

@media print {
  html,
  body {
    background: #fff;
  }
  .site-header,
  .site-footer,
  .toc,
  .doc .back {
    display: none;
  }
  .doc {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}