/* Hallmark · redesign (multi-page, consistency over variety) · macrostructure: Index-First, inherited from the studio home
 * tone: calm, exact, careful · theme: studio evening ground + My Photo Backup app accents (dark values) · anchor hue: app blue 263
 * studio carries: fonts, type scale, weights, space, shell, --col-side grid, link treatment; top bar, horizon and footer via /assets/components.css
 * app carries: every chromatic color (accent, focus, state), buttons (50 min height, radius 12), raised surfaces (radius 16)
 * decisions: _design/photobackup-system.md · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Linked after /assets/base.css, which owns fonts, tokens and base element styles. Dark only, like the rest of the site.
 */

/* ---------- App tokens (My Photo Backup, dark values from the app's asset catalog) ---------- */
:root {
  --pb-blue-50:  #14213D;
  --pb-blue-400: #1C54C4;
  --pb-blue-500: #2A6BEC;
  --pb-blue-600: #7FA9FF;
  --pb-on-accent: #FFFFFF;
  --pb-surface: #14171D;
  --pb-border: #373C47;
  --pb-separator: #2C313B;
  --pb-copied-fill: #12291D;
  --pb-copied-ink: #62D08D;
  --pb-failed-fill: #2E1917;
  --pb-failed-ink: #FF8B80;
  --pb-skipped-fill: #2E2314;
  --pb-skipped-ink: #F0B454;

  --pb-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pb-control-min: 3.125rem; /* 50, PTButtonMetrics.minHeight */
  --pb-row-min: 2.75rem;      /* 44, PTLayout.rowMinHeight */
  --pb-radius-chip: 0.375rem;   /* 6, PTRadius.chip */
  --pb-radius-control: 0.75rem; /* 12, PTRadius.control */
  --pb-radius-block: 1rem;      /* 16, PTRadius.block */
  --pb-press-scale: 0.98;       /* PTButtonMetrics.pressedScale */
  --pb-shot-ratio: 1320 / 2868; /* iPhone 17 Pro Max capture */

  /* The studio's chromatic roles take the app's colors on these pages */
  --color-sun: var(--pb-blue-500);
  --horizon-sun: var(--pb-blue-500); /* components.css: the half sun on the horizon, in the app's blue */
  --color-sea: var(--pb-blue-600);
  --color-focus: var(--pb-blue-600);
}

@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--pb-blue-600); }
}

/* Lines break only where the column forces them (Dev: no words pushed to a second line), so no
 * text-wrap: balance or pretty. A lone last word is fixed in the copy. A word longer than its
 * column breaks instead of running past the edge. */
h1, h2, h3, p, li, dt, dd, summary { overflow-wrap: break-word; }

/* Every single-column grid gets a track that may shrink below its content's min width;
 * an implicit auto track grows to the widest unbreakable child and overflows a phone.
 * Placed before the media queries that set the desktop columns. */
.masthead, .intro, .proof, .proof__copy, .receipt, .where, .where__main, .help, .faq, .support,
.legal, .toc, .policy, .policy section, .promise__inner, .section__head, .plan, .step__text, .place__text {
  grid-template-columns: minmax(0, 1fr);
}

/* Tap feedback is drawn by each control's own :active state */
.btn, .faq__list summary, .toc a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Top bar, brand lockup, horizon and footer come from /assets/components.css (_design/components.md) */

/* Rules sit between rows only: the next section's rule (or the footer's) closes each list */
.step:last-child, .rule-row:last-child, .place:last-child, .plan:last-child { border-bottom: 0; }

/* ---------- Masthead (the home page's, with the app's name in the wordmark slot) ---------- */
.masthead {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-2xl) var(--space-lg);
}
.masthead__name { display: grid; gap: var(--space-md); align-content: end; min-width: 0; }
.masthead__icon {
  width: 64px;  /* images in px, so text zoom does not grow them */
  height: 64px;
  border-radius: var(--radius-icon);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  min-width: 0;
}
.wordmark--legal { font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: -0.01em; }

.intro { display: grid; gap: var(--space-sm); align-content: end; min-width: 0; }
.intro__line { font-size: var(--text-lead); line-height: var(--leading-lead); }
.intro__meta { color: var(--color-ink-2); }
.intro__meta a { color: var(--pb-blue-600); text-decoration-color: currentColor; }
.avail { color: var(--color-ink-2); font-size: var(--text-label); }
.avail strong { color: var(--color-ink); font-weight: var(--weight-label); }

/* ---------- App buttons (PTPrimaryButton, PTSecondaryButton) ---------- */
.actions { display: grid; gap: var(--space-xs); padding-top: var(--space-2xs); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pb-control-min);
  padding: var(--space-3xs) var(--space-md);
  border: var(--rule) solid transparent;
  border-radius: var(--pb-radius-control);
  font-size: var(--text-body);
  font-weight: var(--weight-label);
  line-height: var(--leading-title);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.btn:active { transform: scale(var(--pb-press-scale)); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--pb-radius-control); }
.btn--primary { background: var(--pb-blue-500); color: var(--pb-on-accent); }
.btn--primary:active { background: var(--pb-blue-400); }
.btn--secondary { background: var(--pb-surface); border-color: var(--pb-border); color: var(--pb-blue-600); }
.btn--secondary:active { background: var(--pb-blue-50); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--pb-blue-400); }
  .btn--secondary:hover { background: var(--pb-blue-50); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-2xl); }
.section { position: relative; }
/* The rule between sections sits on the content edge, like the home page's rows, not on the gutter */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: var(--rule) solid var(--color-rule);
}
.section__head { display: grid; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
}
.section__lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink-2); }
.fineprint { color: var(--color-muted); font-size: var(--text-label); }
.fineprint a { color: var(--color-ink-2); }

/* Screenshot placeholders: labeled until real captures exist */
.slot {
  display: grid;
  place-items: center;
  aspect-ratio: var(--pb-shot-ratio);
  width: 100%;
  border: var(--rule) dashed var(--color-rule);
  border-radius: var(--pb-radius-block);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-size: var(--text-label);
  line-height: var(--leading-lead);
  text-align: center;
}
.slot span { max-width: 100%; padding: var(--space-2xs); overflow-wrap: anywhere; }
.slot b { display: block; color: var(--color-ink-2); font-weight: var(--weight-label); }

/* How it works: slot beside text on a phone, four columns on a laptop */
.steps { display: grid; padding: 0; list-style: none; border-top: var(--rule) solid var(--color-rule); }
.step {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr); /* the screenshot rail is an image: px, not rem */
  gap: var(--space-md);
  align-items: start;
  align-content: start; /* rows keep their height when a neighboring step is taller */
  padding-block: var(--space-md);
  border-bottom: var(--rule) solid var(--color-rule);
}
.step__text { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.step__n { font-family: var(--font-display); font-size: var(--text-lead); line-height: var(--leading-title); color: var(--pb-blue-600); }
.step__title { font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: var(--weight-strong); color: var(--color-ink); }

/* Proof: the rules beside the check illustration */
.proof { display: grid; gap: var(--space-xl); }
.proof__copy { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.proof__copy .section__lead { margin-top: calc(-1 * var(--space-sm)); }
.rules { margin: 0; border-top: var(--rule) solid var(--color-rule); }
.rule-row {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-sm);
  border-bottom: var(--rule) solid var(--color-rule);
}
.rule-row dt { font-weight: var(--weight-label); }
.rule-row dd { margin: 0; color: var(--color-ink-2); }

.receipt { margin: 0; display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.check {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--pb-surface);
  border: var(--rule) solid var(--pb-separator);
  border-radius: var(--pb-radius-block);
}
.check__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.check__file { font-weight: var(--weight-label); overflow-wrap: anywhere; }
.check__size { color: var(--color-muted); font-size: var(--text-label); white-space: nowrap; }
.check__prints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* equal halves: an auto label column left the checksum 5px at 200% text */
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  font-size: var(--text-label);
}
.check__prints dt { color: var(--color-muted); }
.check__prints dd { margin: 0; font-family: var(--pb-font-mono); overflow-wrap: anywhere; text-align: right; }
.check__prints mark { background: var(--pb-failed-fill); color: var(--pb-failed-ink); border-radius: 2px; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--pb-radius-chip);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}
.chip svg { width: 1rem; height: 1rem; flex: none; }
.chip--ok { background: var(--pb-copied-fill); color: var(--pb-copied-ink); }
.chip--no { background: var(--pb-failed-fill); color: var(--pb-failed-ink); }
.receipt figcaption { display: grid; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-label); }

/* Destinations: the home page's app rows */
.where { display: grid; gap: var(--space-xl); }
.where__main { display: grid; gap: var(--space-lg); min-width: 0; }
.where__main .section__lead { margin-top: calc(-1 * var(--space-sm)); }
.places { border-top: var(--rule) solid var(--color-rule); }
.place {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr); /* glyph rail in px, like the screenshot rail */
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: var(--rule) solid var(--color-rule);
}
.place__glyph { width: 40px; height: 40px; color: var(--pb-blue-600); }
.place__text { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.place__text p, .faq__answer p, .rule-row dd { max-width: 40rem; }
.place__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  color: var(--color-ink);
}
.place__needs strong { color: var(--color-ink); font-weight: var(--weight-label); }
.slot--side { width: 176px; }

/* Promise: the one band in the app's blue. The focus ring turns white here: the light-blue ring
 * measures 2.1:1 on this blue, white measures 4.76:1. */
.promise { background: var(--pb-blue-500); color: var(--pb-on-accent); --color-focus: var(--pb-on-accent); }
.promise__inner { display: grid; gap: var(--space-lg); padding-block: var(--space-2xl); }
.promise__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
}
.promise__body { display: grid; gap: var(--space-md); justify-items: start; font-size: var(--text-lead); line-height: var(--leading-lead); }

/* Pricing: two rows */
.plans { border-top: var(--rule) solid var(--color-rule); }
.plan {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: var(--rule) solid var(--color-rule);
}
.plan__name { font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: var(--weight-strong); }
.plan__price-wrap { display: grid; gap: var(--space-3xs); }
.plan__price {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-title);
}
.plan__price span { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-ink-2); }
.plan__note { color: var(--color-muted); font-size: var(--text-label); }
/* Plan details as plain lines: no tick bullets (the stock pricing-table check list) */
.ticks { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }

/* Questions and support */
.help { display: grid; gap: var(--space-2xl); }
.faq { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.faq__list {
  background: var(--pb-surface);
  border: var(--rule) solid var(--pb-separator);
  border-radius: var(--pb-radius-block);
  overflow: hidden;
}
.faq__list details + details { border-top: var(--rule) solid var(--pb-separator); }
.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--pb-row-min);
  padding: var(--space-xs) var(--space-sm);
  font-weight: var(--weight-strong);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-quick) var(--ease-out);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--pb-blue-600);
  border-bottom: 2px solid var(--pb-blue-600);
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform var(--dur-quick) var(--ease-out);
}
.faq__list details[open] > summary::after { transform: translateY(0.125rem) rotate(-135deg); }
.faq__list summary:active { background: var(--pb-blue-50); }
@media (hover: hover) and (pointer: fine) {
  .faq__list summary:hover { background: var(--pb-blue-50); }
}
.faq__list summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.faq__answer { display: grid; gap: var(--space-xs); padding: 0 var(--space-sm) var(--space-md); color: var(--color-ink-2); }
/* The answer settles in instead of appearing at once: opening a question is occasional, and the
 * motion says where the new text came from. CSS only; closing stays instant. */
.faq__list details[open] > .faq__answer { animation: pb-reveal 200ms var(--ease-out); }
@keyframes pb-reveal { from { opacity: 0; transform: translateY(-4px); } }
@keyframes pb-fade { from { opacity: 0; } }
.faq__answer strong { color: var(--color-ink); font-weight: var(--weight-label); }

.support { display: grid; gap: var(--space-md); align-content: start; justify-items: start; min-width: 0; }
.support__mail { font-family: var(--font-display); font-size: var(--text-lead); line-height: var(--leading-title); overflow-wrap: anywhere; }
.support__mail a { display: inline-flex; align-items: center; min-height: var(--pb-row-min); }
.support__include { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.support__include ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-3xs); }
.support__include li::marker { color: var(--pb-blue-600); }
.support .btn { width: 100%; }

/* ---------- Privacy policy ---------- */
.updated { color: var(--color-ink-2); }
.updated strong { color: var(--color-ink); font-weight: var(--weight-label); }
.placeholder {
  /* inline, so it can wrap at 200% text or 320px; each line keeps its box */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 var(--space-3xs);
  border: var(--rule) dashed var(--pb-skipped-ink);
  border-radius: var(--pb-radius-chip);
  background: var(--pb-skipped-fill);
  color: var(--pb-skipped-ink);
}

.legal { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-3xl); }
.toc { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.toc__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--leading-title);
}
.toc ol { margin: 0; padding: 0; list-style: none; border-top: var(--rule) solid var(--color-rule); }
.toc li { border-bottom: var(--rule) solid var(--color-rule); }
.toc a {
  display: flex;
  align-items: center;
  min-height: var(--pb-row-min);
  padding-block: var(--space-2xs);
  color: var(--color-ink-2);
  text-decoration-color: transparent;
}
.toc a:active { color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .toc a:hover { color: var(--color-ink); text-decoration-color: var(--pb-blue-600); }
}

.policy { display: grid; gap: var(--space-xl); min-width: 0; }
.policy section { display: grid; gap: var(--space-sm); scroll-margin-top: var(--space-lg); }
.policy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
  padding-bottom: var(--space-3xs);
}
.policy p, .policy li { max-width: 40rem; color: var(--color-ink-2); }
.policy strong { color: var(--color-ink); font-weight: var(--weight-label); }
.policy .short p:first-of-type { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink); }
.policy ul { display: grid; gap: var(--space-xs); padding-left: 1.25rem; list-style: disc; }
.policy li::marker { color: var(--pb-blue-600); }
.policy .dest { display: grid; gap: var(--space-sm); } /* without display: grid the gap did nothing and the three destinations ran together */
.policy code {
  font-family: var(--pb-font-mono);
  font-size: var(--text-label);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.policy a { color: var(--pb-blue-600); text-decoration-color: currentColor; }
.policy .published { color: var(--color-muted); }
.policy .published strong { overflow-wrap: anywhere; } /* the URL is one unbreakable word; it set the column's width at 320 */

/* ---------- Footer: shared, plus this app's trademark line below it ---------- */
.foot { padding-block: var(--space-xl); } /* components.md override: the trademark line takes the bottom space */
.trademarks { padding-bottom: var(--space-2xl); color: var(--color-muted); font-size: var(--text-label); text-align: center; } /* centered with the footer on phones */

/* ---------- Tablet ---------- */
@media (min-width: 48rem) {
  .trademarks { text-align: start; }
  .masthead__icon { width: 88px; height: 88px; }
  .actions { display: flex; flex-wrap: wrap; }
  .step { grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-lg); }
  .rule-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-md); } /* 240 fits every label on one line at 1280 */
  .place { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-md); }
  .place__glyph { width: 48px; height: 48px; }
  .plan { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-md); } /* proportional, so a 200% price still fits */
  .plan .ticks { grid-column: 2; }
  .support .btn { width: auto; }
}

/* ---------- Laptop and up: the studio's two-column grid, right column = --col-side ---------- */
@media (min-width: 80rem) {
  .masthead {
    grid-template-columns: minmax(0, 1fr) var(--col-side);
    align-items: end;
    gap: var(--space-xl);
    padding-block: var(--space-3xl) var(--space-xl);
  }
  .masthead--legal { row-gap: var(--space-lg); }
  .masthead--legal .wordmark { grid-column: 1 / -1; }
  .masthead--legal .intro { grid-column: 2; }
  .wordmark--legal { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: -0.02em; }

  .section { padding-block: var(--space-3xl); }
  .section__head {
    grid-template-columns: minmax(0, 1fr) var(--col-side);
    column-gap: var(--space-xl);
    align-items: end;
    padding-bottom: var(--space-xl);
  }

  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-lg); border-top: 0; }
  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: 0;
    border-bottom: 0;
  }
  .step__text { padding-top: var(--space-sm); border-top: var(--rule) solid var(--color-rule); }

  .proof, .where, .help, .legal {
    grid-template-columns: minmax(0, 1fr) var(--col-side);
    column-gap: var(--space-xl);
  }
  .slot--side { width: 280px; }

  .promise__inner {
    grid-template-columns: minmax(0, 1fr) var(--col-side);
    column-gap: var(--space-xl);
    align-items: end;
    padding-block: var(--space-3xl);
  }
  .promise__title { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: -0.02em; }

  .plan {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) var(--col-side);
    column-gap: var(--space-xl);
    align-items: baseline;
    padding-block: var(--space-lg);
  }
  .plan .ticks { grid-column: 3; }

  .help .support { grid-column: 2; grid-row: 1; }
  .help .faq { grid-column: 1; grid-row: 1; }
  .legal .toc { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-lg); }
  .legal .policy { grid-column: 1; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .btn:active { transform: none; }
  .faq__list details[open] > .faq__answer { animation-name: pb-fade; } /* fade only, no movement */
}