/* reclaimphotos.com: what is the public site's alone.
 * ===========================================================================
 * Tokens, type, buttons, prints, notes, the top bar and the legal footer come
 * from static/reclaim.css, which is the application's stylesheet copied here
 * by scripts/sync-brand-assets.py. This file holds only the marketing
 * devices that must not travel into the app (design-system.md section 1):
 * the wall of prints, the rail beside the steps, the reveal on scroll, the
 * price tiers, and the long-form article rules for the two legal pages.
 *
 * NO COLOUR LITERAL. Every colour is a token; hosted/tests_site.py fails on a
 * hex or rgb() here. The one exemption is a `--pic:` declaration, which is a
 * drawn photograph's content rather than a colour of the page.
 * ======================================================================== */

/* --- the page ------------------------------------------------------------ */
:root {
  /* The shared topbar row is 68px tall and its sticky divider adds 1px. */
  --site-nav-height: 69px;
  --site-content-gap: 3.125rem;
  --site-anchor-gap: 5rem;
}
.wrap { --wrap-max: 72rem; }
body { font-size: var(--fs-lead); overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: var(--site-nav-height); }
/* The top bar is outside the page column so its ground runs edge to edge; the
   column inside it carries no vertical padding of its own. */
.topbar > .wrap { padding-top: 0; padding-bottom: 0; }
/* The home page owns its spacing section by section. Do not stack the shared
   page wrapper's 44px top inset on top of the hero's own opening space. */
.home { padding-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; margin-bottom: var(--sp-2); }
.intro { color: var(--muted); font-size: 1.1rem; max-width: 36rem; margin: 0 0 var(--sp-6); }
.aside { display: block; margin-top: var(--sp-3); font-size: var(--fs-read); color: var(--muted); }
section { padding: var(--site-anchor-gap) 0 var(--site-content-gap); }

/* --- hero ---------------------------------------------------------------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
  padding: var(--site-content-gap) 0 clamp(2.5rem, 5vw, 4rem);
}
/* Keep the headline on the same 80px baseline as an anchored section. The
   former grid centering made this gap change with the gallery's column height. */
.hero > div:first-child {
  padding-top: calc(var(--site-anchor-gap) - var(--site-content-gap));
}
.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.02; margin-bottom: var(--sp-5);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.35em);
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero .lede { font-size: 1.18rem; color: var(--muted); margin: 0 0 var(--sp-6); max-width: 31rem;
  opacity: 0; animation: rise .8s .55s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-actions { opacity: 0; animation: rise .8s .75s cubic-bezier(.2, .7, .2, 1) forwards; }

/* --- the wall of prints, checked one by one ------------------------------ */
.wallbox { position: relative; perspective: 1200px; }
.gallery {
  /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr) and WebKit's
     auto minimum for a print with an aspect ratio ran past the column, so on
     an iPhone the prints spilled out of the frame's right edge. */
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.6vw, 1.1rem); padding: clamp(1rem, 2.4vw, 1.6rem);
  background: color-mix(in srgb, var(--wall) 92%, var(--ink));
  border-radius: var(--r-print); transform-style: preserve-3d; transition: transform .35s ease-out;
}
.gallery .lbl { position: absolute; top: -1.7rem; left: 0; font-size: var(--fs-label); color: var(--muted); }
.gallery .lbl.r { left: auto; right: 0; color: var(--green-dk); opacity: 0; transition: opacity .4s; }
.gallery.done .lbl.r { opacity: 1; }
.ph {
  position: relative; aspect-ratio: 1 / 1.1; min-width: 0; background: var(--print);
  border-radius: var(--r-print); box-shadow: var(--sh-print);
  transform: translateZ(calc(var(--d) * 14px)) rotate(var(--r)); opacity: 0;
  animation: hang .8s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--n) * 90ms + 300ms);
}
@keyframes hang {
  from { opacity: 0; transform: translateY(-14px) translateZ(calc(var(--d) * 14px)) rotate(var(--r)); }
  to { opacity: 1; transform: translateY(0) translateZ(calc(var(--d) * 14px)) rotate(var(--r)); }
}
/* The photograph is placed by inset, not by padding plus height:100%, which
   WebKit resolved against the wrong box and doubled the print's height. */
.ph::before { content: ""; position: absolute; inset: 6% 6% 16%; background: var(--pic); border-radius: 1px; }
.ph .tick {
  position: absolute; right: -.5rem; top: -.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 60% no-repeat;
  transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.ph.ok .tick { transform: scale(1); }
.ph .held {
  position: absolute; left: 6%; bottom: 4%; font: 700 .68rem/1 var(--body); color: var(--clay-ink);
  background: var(--clay-soft); padding: .28rem .45rem; border-radius: var(--r-pill);
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s;
}
.ph.kept .held { opacity: 1; transform: none; }
.ph.kept .tick { background: var(--clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v7M12 17v.5'/%3E%3C/svg%3E") center / 60% no-repeat; }
.scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0; pointer-events: none; box-shadow: 0 0 18px 4px color-mix(in srgb, var(--green) 25%, transparent);
}
.gallery.scanning .scan { opacity: 1; animation: sweep var(--sweep) linear forwards; }
@keyframes sweep { from { top: 0; } to { top: 100%; } }
.wallcap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  margin-top: var(--sp-4); font-size: var(--fs-read); color: var(--muted); }
.wallcap b { font: 400 2.2rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.wallcap b small { font: 400 1rem var(--figures); color: var(--muted); }
.wallcap .stage { min-height: 1.5em; text-align: right; }
/* The nine photographs, drawn. A --pic is content, not a page colour. */
.p1 { --pic: linear-gradient(180deg, #9fc3d8 0 55%, #d9c9a5 55% 100%); --r: -1.5deg; --d: 1; --n: 0; }
.p2 { --pic: radial-gradient(circle at 50% 60%, #f2c9a0 0 18%, transparent 19%), linear-gradient(180deg, #f4e3d1, #d99b7a); --r: 1deg; --d: 2; --n: 1; }
.p3 { --pic: linear-gradient(180deg, #d7dde3 0 50%, #f6f7f8 50% 100%); --r: -.5deg; --d: 1; --n: 2; }
.p4 { --pic: radial-gradient(circle at 30% 30%, #fff3b0 0 10%, transparent 11%), linear-gradient(180deg, #c9d7b7, #6f8f63); --r: 1.5deg; --d: 3; --n: 3; }
.p5 { --pic: linear-gradient(180deg, #5d6a8c 0 45%, #e2a469 45% 55%, #3f4a5c 55%); --r: -1deg; --d: 2; --n: 4; }
.p6 { --pic: radial-gradient(circle at 60% 40%, #f5d3c5 0 22%, transparent 23%), linear-gradient(180deg, #f7eee9, #e5cfc4); --r: .5deg; --d: 1; --n: 5; }
.p7 { --pic: linear-gradient(160deg, #8fae9d, #3c6b5a); --r: -1.5deg; --d: 3; --n: 6; }
.p8 { --pic: linear-gradient(180deg, #f1d9a7 0 60%, #a67c52 60%); --r: 1deg; --d: 2; --n: 7; }
.p9 { --pic: radial-gradient(circle at 70% 30%, #fff 0 8%, transparent 9%), linear-gradient(180deg, #1f2d3d, #4b6a86); --r: -.5deg; --d: 1; --n: 8; }

/* --- the three facts ----------------------------------------------------- */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip div { padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; display: flex; gap: .7rem; align-items: baseline; font-size: 1.02rem; }
.strip div + div { border-left: 1px solid var(--line); padding-left: var(--sp-5); }
.strip i { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--green); position: relative; top: -.05rem; }

/* --- reveal on scroll ---------------------------------------------------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
.rv.d4 { transition-delay: .32s; } .rv.d5 { transition-delay: .4s; }

/* --- how a job runs: a rail that fills as you scroll --------------------- */
.how { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.how .sticky { position: sticky; top: 6rem; }
.rail { position: relative; margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.rail::before { content: ""; position: absolute; left: .7rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--line); }
.rail::after { content: ""; position: absolute; left: .7rem; top: .4rem; width: 2px;
  height: calc(var(--fill, 0) * (100% - .8rem)); background: var(--green); transition: height .35s ease-out; }
.rail li { position: relative; padding: 0 0 var(--sp-4) 2.4rem; color: var(--muted); font-size: var(--fs-read); transition: color .3s; }
.rail li::before { content: ""; position: absolute; left: .25rem; top: .35rem; width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--wall); border: 2px solid var(--line); transition: background .3s, border-color .3s; z-index: 1; }
.rail li.on { color: var(--ink); font-weight: 700; }
.rail li.on::before { background: var(--green); border-color: var(--green); }
.rail li.gate.on { color: var(--clay-ink); }
.rail li.gate.on::before { background: var(--clay); border-color: var(--clay); }
.steps-list { display: grid; gap: var(--sp-4); }
.step { position: relative; padding-left: 5rem; margin-bottom: 0; }
.step .n { position: absolute; left: var(--sp-5); top: var(--sp-5); width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--green-soft); color: var(--green-dk); font: 700 1rem/2.3rem var(--figures); text-align: center; }
.step b { display: block; font: 500 1.35rem/1.2 var(--display); font-variation-settings: "opsz" 30, "SOFT" 50; margin-bottom: var(--sp-2); }
.step p { margin: 0; color: var(--muted); }
.step.gate .n { background: var(--clay); color: var(--print); }
.step.gate b { color: var(--clay-ink); }
.step.gate p { color: var(--ink); }

/* --- the two routes, the promises, the record, the price ----------------- */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.route { margin-bottom: 0; transition: transform .25s, box-shadow .25s; }
.route:hover { transform: translateY(-3px); box-shadow: var(--sh-raised); }
.route h3 { font-size: 1.45rem; margin-bottom: var(--sp-3); }
.route p { margin: 0; color: var(--muted); }
.small { font-size: var(--fs-read); color: var(--muted); max-width: 44rem; }

.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sp-4); }
.promise { margin-bottom: 0; }
.promise h3 { font-size: 1.3rem; margin-bottom: var(--sp-2); display: flex; gap: .6rem; align-items: flex-start; }
.promise h3 i { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; margin-top: .2rem;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 60% no-repeat; }
.promise p { margin: 0; color: var(--muted); }

.record-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.record { margin-bottom: 0; }
.record table { border-collapse: collapse; width: 100%; font: 400 var(--fs-label)/1.4 var(--figures); }
.record th { text-align: left; font-weight: 400; color: var(--muted); font-size: var(--fs-tiny); padding: 0 0 var(--sp-2); border-bottom: 1px solid var(--line); }
.record td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-print); }
.record tr { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; }
.record.in tr { opacity: 1; transform: none; }
.record tr:nth-child(1) { transition-delay: .1s; } .record tr:nth-child(2) { transition-delay: .35s; }
.record tr:nth-child(3) { transition-delay: .6s; } .record tr:nth-child(4) { transition-delay: .85s; }
.record tr:nth-child(5) { transition-delay: 1.1s; }
.record td.f { font-family: var(--mono); font-size: var(--fs-body); }
.record td.r { color: var(--green); font-weight: 700; }
.record tr.held td.r { color: var(--clay-ink); }
.record td:last-child, .record th:last-child { text-align: right; }
.record p { margin: var(--sp-3) 0 0; font-size: var(--fs-label); color: var(--muted); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: 0 0 var(--sp-4); }
.tier { margin-bottom: 0; transition: transform .25s, box-shadow .25s; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--sh-raised); }
.tier .sz { font: 400 1rem var(--figures); color: var(--muted); }
.tier .amt { font: 400 3rem/1.1 var(--display); font-variant-numeric: tabular-nums; margin: .3rem 0 .2rem; }
.quoted { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--figures); }
.quoted span:last-child { color: var(--muted); }
.cost { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; margin-top: var(--sp-6); }
.cost p { color: var(--muted); margin: 0 0 var(--sp-4); }

.end { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; margin-bottom: 0; }
.end h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.end p { color: var(--muted); max-width: 32rem; margin: var(--sp-3) auto var(--sp-5); }
.end .aside { margin-top: var(--sp-4); }
footer.legal { display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; align-items: flex-start; }
footer.legal .legal-links { margin-top: 0; }
footer.legal a { color: var(--muted); }

/* --- the two legal pages -------------------------------------------------- */
.article { --wrap-max: 48rem; }
.article h1 { font-size: var(--fs-h1); margin: 0 0 var(--sp-4); }
.article h2 { font-size: var(--fs-h2); margin: var(--sp-7) 0 var(--sp-3); }
.article h3 { margin: var(--sp-5) 0 var(--sp-2); }
.article p, .article ul { margin: 0 0 var(--sp-4); }
.article ul { padding-left: 1.2rem; }
.article li { margin: 0 0 var(--sp-2); }
.article .lede { font-size: 1.1rem; color: var(--muted); max-width: 34rem; margin: 0 0 var(--sp-4); }
.article .updated { font-size: var(--fs-body); color: var(--muted); margin: 0 0 var(--sp-6); }
.article .note { margin: var(--sp-5) 0; }
.article .note b { display: block; margin-bottom: var(--sp-1); }
.article table.price { border-collapse: collapse; width: 100%; margin: var(--sp-4) 0; font-family: var(--figures); }
.article table.price th, .article table.price td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.article table.price thead th { font: 700 var(--fs-label)/1.3 var(--body); color: var(--muted); }
.article table.price td:last-child { font-weight: 700; white-space: nowrap; }
.article code { font-family: var(--mono); font-size: .92em; }

/* --- narrow -------------------------------------------------------------- */
@media (max-width: 900px) {
  html { scroll-padding-top: 0; }
  section { padding-top: var(--site-content-gap); }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: var(--site-content-gap); }
  .hero > div:first-child { padding-top: 0; }
  .how { grid-template-columns: 1fr; }
  .how .sticky { position: static; }
  .rail { display: none; }
  .routes, .tiers, .record-wrap, .cost { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; }
  .strip div { padding: var(--sp-3) 0; }
  .strip div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  /* Top and bottom only: the shorthand `padding: 8px 0` zeroed the page
     column's side padding on phones, and the wordmark and the links sat on
     the screen edge. */
  .topbar-row { flex-wrap: wrap; padding-top: var(--sp-2); padding-bottom: var(--sp-2); min-height: 0; }
  /* The links wrap onto a second row rather than scrolling sideways: at 390px
     the five of them are 401px wide, and a row that scrolls with no hint
     simply loses "Privacy" off the edge (owner, 2026-09-08). The first link's
     text aligns with the page column; its 8px of hit-area padding hangs into
     the column's own padding, which is 20px, so nothing is clipped. */
  .topbar nav { width: 100%; flex-wrap: wrap; overflow: visible; row-gap: 0;
                margin: 0 calc(-1 * var(--sp-2)); }
  .topbar nav a { padding: 0 var(--sp-2); min-height: 40px; }
  .topbar nav a.strong { display: none; }
  /* Two rows of links pinned to the top would cover a sixth of a phone
     screen for the whole read; on phones the bar scrolls away with the page. */
  .topbar.sticky { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* A fixed, full-width frame. Auto side margins on a grid item make it
     shrink to its content in WebKit, and the content's width changed as the
     labels and the chip appeared, so on an iPhone the wall opened at half
     width and jumped mid-cycle (owner, 2026-09-08). The width is stated. */
  .wallbox { width: 100%; max-width: 30rem; margin: var(--sp-6) auto 0; justify-self: center; }
  .gallery { width: 100%; }
  footer.legal { flex-direction: column; }
}
@media (max-width: 560px) {
  /* Two wrapping columns under the wall read as a jumble at 390px; stack them. */
  .wallcap { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .wallcap .stage { text-align: left; min-height: 0; }
  .step { padding-left: 18px; padding-top: 4.2rem; }
  .step .n { left: 18px; top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 .w, .hero .lede, .hero-actions, .ph { animation: none; opacity: 1; transform: none; }
  .rv, .record tr { opacity: 1; transform: none; transition: none; }
  .ph .tick { transform: scale(1); transition: none; }
  .ph.p5 .held { opacity: 1; transform: none; }
  .gallery, .route, .tier { transition: none; }
}