/* ========================================================== LIGHT STUDIO
   unempty.app — one stylesheet, no build step, no JavaScript.

   The palette, the radii and the card anatomy follow the app direction the
   owner chose on 2026-09-21: Light Studio (design/direction/light-studio/
   handoff.md) — light grey-green surfaces, dark readable text, lime only for
   the primary action and a meaningful selected state, sentence case, the
   photographs carry the explanation. The tokens are the same ones the test
   build (testbed/index.html) uses. Nothing here invents a colour.

   Three rules that are easy to break by accident and expensive to fix:

   1. A photo card's caption sits at the TOP, against the ceiling. The bottom
      of an interior photograph is the floor and the furniture — the thing we
      are selling. A shelf down there eats it and object-fit crops it away.
   2. The site is light-only, like the app. Lime is never a text colour on
      these pale surfaces: links and accents are the dark green `--strong`,
      lime is a fill with dark text on it.
   3. No inline style attributes anywhere: the CSP in _headers has no
      'unsafe-inline' and web/tools/check.py fails the build on one.

   Type: Archivo / JetBrains Mono from Google Fonts (Barlow Condensed is no
   longer used; `--cond` resolves to the UI face), each
   with a real system fallback so the page is legible before (or without) the
   web font. Those two hosts are the only external origins on the site and are
   the only ones allowed by the CSP.
   ==================================================================== */

:root {
  /* colour — Light Studio (design/direction/light-studio/handoff.md), the
     test build's tokens */
  --bg: #EEF1E9;
  --panel: #FAFBF7;
  --panel2: #F4F6F0;
  --panel3: #EFF2EA;
  --chip: #E4E9DD;
  --hair: #D7DFCF;
  --hair2: #DEE5D6;
  --edge: #B9C4AE;
  --strong: #34462A;
  --ink: #20281A;
  --ink2: #3E4A35;
  --dim: #59654F;
  --dim2: #6B7762;
  --lime: #C9F338;
  --lime-down: #B5DE2A;
  --on-lime: #20281A;
  --success-tint: #EEF9D0;
  --warning: #9A6B00;
  --warning-tint: #FBF1CF;
  --danger: #C43D2E;
  --danger-tint: #FFF3F1;
  --overlay-pill: rgba(11, 12, 11, 0.72);
  --overlay-text: #FFFFFF;

  /* derived from the tokens above; kept here so no rule carries a raw colour */
  --lime-hi: var(--ink);                     /* link hover: darker, never lime text */
  --lime-hairline: rgba(52, 70, 42, 0.35);   /* the link underline, dark green at 35% */
  --bg-blur: rgba(238, 241, 233, 0.92);      /* canvas at 92% under the sticky bar */
  --photo-bg: #DDE3D5;                       /* letterbox behind a photo in a card */
  --warning-ink: #5C4300;                    /* text on warningTint */
  /* no scrims: nothing is laid over a photograph on this site */
  --cap-scrim: none;
  --foot-scrim: none;

  /* type */
  --ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cond: var(--ui);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* space and radius */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 28px;
  --s7: 40px;
  --r: 20px;
  --r-sm: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  --page: 980px;
  --measure: 62ch;

  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* the header is sticky: keep #pricing and friends clear of it */
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body {
  font-family: 'Noto Kufi Arabic', 'SF Arabic', 'Geeza Pro', var(--ui);
}

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

a {
  color: var(--strong);
  text-decoration: none;
  border-bottom: 1px solid var(--lime-hairline);
}

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

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

strong { font-weight: 700; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--chip);
  border-radius: 6px;
  padding: 1px 5px;
}

hr {
  border: 0;
  border-top: 1px solid var(--hair2);
  margin: var(--s6) 0;
}

::selection {
  background: var(--lime);
  color: var(--on-lime);
}

/* --------------------------------------------------------------- headings */

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.1;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 17px; letter-spacing: -0.2px; }

/* the highlighted word: a lime marker under dark text, not lime text */
h1 u, h2 u {
  text-decoration: none;
  box-shadow: inset 0 -0.38em var(--lime);
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink2);
  max-width: var(--measure);
}

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

.small { font-size: 13px; color: var(--dim); }

/* ------------------------------------------------------------------- bar */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  min-height: 60px;
  padding: 10px var(--s4);
  background: var(--bg-blur);
  border-bottom: 1px solid var(--hair2);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--ink);
  border: 0;
}

.wordmark:hover { color: var(--ink); }

/* the brand is "Unempty AI": the qualifier is a lime chip with dark text */
.wordmark i {
  font-style: normal;
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px 2px;
  border-radius: var(--r-full);
  background: var(--lime);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.wordmark .mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--lime);
  color: var(--on-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex: none;
}

.site-header nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-wrap: wrap;
}

.site-header nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--r-full);
  border: 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink2);
}

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

.site-header nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--lime);
}

/* On a phone the four nav items do not fit beside the wordmark. They drop to
   their own row and scroll sideways rather than stacking into a wall. */
@media (max-width: 639px) {
  .site-header { padding: 8px var(--s3); gap: var(--s2); }
  .site-header nav {
    width: 100%;
    margin-inline-start: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { padding: 0 10px; font-size: 13px; white-space: nowrap; }
}

/* --------------------------------------------------------------- layout */

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
}

.section {
  padding-top: var(--s7);
}

.section > h2 + p,
.section > h2 + .measure {
  margin-top: var(--s3);
}

.eyebrow {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 13px;
  color: var(--strong);
  margin: 0 0 var(--s2);
}

/* ---------------------------------------------------------------- hero */

.hero { padding-top: var(--s4); }

.hero h1 {
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -1px;
}

.hero .lede { margin-top: var(--s4); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 56px;
  padding: 0 var(--s5);
  border-radius: var(--r-full);
  border: 0;
  background: var(--lime);
  color: var(--on-lime);
  font-weight: 700;
  font-size: 16px;
}

.btn:hover { background: var(--lime-down); color: var(--on-lime); }

.btn-secondary {
  background: var(--panel2);
  border: 1px solid var(--hair);
  color: var(--ink);
  font-weight: 600;
}

.btn-secondary:hover { background: var(--chip); color: var(--ink); }

.actions .secondary {
  font-size: 13px;
  color: var(--dim);
}

/* -------------------------------------------------- before / after card */

/* The anatomy of the app's card: one frame, the result underneath, the
   original clipped over its left half, a lime hairline and knob on the seam.
   Left is always the photograph the user took; right is always what came back. */

.pair {
  margin: var(--s5) 0 0;
}

.plate {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
}

.plate > .cap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding: var(--s3);
}

.plate > .cap > span:first-child { min-width: 0; }
.plate > .cap b {
  display: block;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -0.2px;
}
.plate > .cap i {
  display: block;
  font-style: normal;
  font-family: var(--cond);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--dim2);
}
.plate > .cap .badge { margin-inline-start: auto; flex: none; }

.pair-frame {
  position: relative;
  background: var(--photo-bg);
  aspect-ratio: 4 / 3;
}

.pair-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The sweep. The app's divider is dragged; a page has nobody to drag it, so the
   hero pair runs the same move on its own — the room fills in, holds long enough
   to be read, and goes back. One shared timing so the clip, the hairline and the
   knob can never drift apart, and no JavaScript: three CSS animations on the same
   duration and the same keyframe percentages. Only the hero pair carries it — the
   eight tool cards are `.card`, not `.pair-frame`, and eight sweeps at once is a
   fairground.

   The holds are the point. A sweep that runs edge to edge without stopping reads
   as a loading shimmer; stopping on the furnished room for four seconds is what
   makes it read as a before and an after. */
@keyframes sweep-clip {
  0%, 10%   { clip-path: inset(0 6% 0 0); }
  28%, 72%  { clip-path: inset(0 94% 0 0); }
  92%, 100% { clip-path: inset(0 6% 0 0); }
}
@keyframes sweep-seam {
  0%, 10%   { left: 94%; }
  28%, 72%  { left: 6%; }
  92%, 100% { left: 94%; }
}

.pair-frame .clip {
  clip-path: inset(0 52% 0 0);
  animation: sweep-clip 9s ease-in-out infinite;
}

.pair-frame .edge,
.pair-frame .knob,
.pair-frame .flare {
  animation: sweep-seam 9s ease-in-out infinite;
}

/* The glowing wedge that rides the seam (the app's `.dust .flare`). Its own
   opacity track fades it in only while the seam is actually travelling, so the
   four seconds parked on the furnished room stay clean. */
.pair-frame .flare {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 48%;
  width: 132px;
  margin-inline-start: -66px;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0.7;
  filter: blur(2px);
  background: linear-gradient(90deg,
    rgba(200, 245, 49, 0) 0%,
    rgba(200, 245, 49, 0.30) 42%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(200, 245, 49, 0.30) 58%,
    rgba(200, 245, 49, 0) 100%);
  animation-name: sweep-seam, sweep-flare;
}

@keyframes sweep-flare {
  0%, 8%    { opacity: 0; }
  16%, 22%  { opacity: 1; }
  30%, 88%  { opacity: 0; }
  94%       { opacity: 1; }
  100%      { opacity: 0; }
}

/* A moving image is motion the viewer did not ask for; anyone who has said so
   at the OS level gets the same pair, parked mid-way. */
@media (prefers-reduced-motion: reduce) {
  .pair-frame .clip,
  .pair-frame .edge,
  .pair-frame .knob { animation: none; }
  .pair-frame .flare { display: none; }
}

.pair-frame .edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 48%;
  width: 2px;
  background: var(--lime);
}

.pair-frame .knob {
  position: absolute;
  top: 50%;
  left: 48%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: var(--r-full);
  background: var(--lime);
  color: var(--on-lime);
  display: flex;
  align-items: center;
  justify-content: center;
}







.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  background: var(--lime);
  border-radius: var(--r-full);
  padding: 5px 11px;
}


.pair figcaption {
  margin-top: var(--s3);
  font-size: 14px;
  color: var(--dim);
  max-width: var(--measure);
}

/* -------------------------------------------------------- the mode grid */

.cards {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}

.cards > li {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.cards > li > p {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink2);
  margin: 0;
}

/* A card is a strip and a picture, in that order — never text over the room.
   Whatever we write on the frame lands on the part of the room we are selling,
   so the words sit on a surface whose contrast we control. Same anatomy as the
   app's cards. */
.card {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
}

.card .shot {
  position: relative;
  background: var(--photo-bg);
  aspect-ratio: 4 / 3;
}

.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .clip { clip-path: inset(0 52% 0 0); }

.card .edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 48%;
  width: 2px;
  background: var(--lime);
}

/* THE CAPTION LIVES AT THE TOP, and nothing else is ever laid over a photo:
   the bottom of an interior frame is the floor and the furniture. Descriptive
   copy sits under the card, in the flow. */
.card .cap {
  padding: var(--s3);
  background: var(--panel);
}

.card .cap b {
  display: block;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -0.2px;
}

.card .cap i {
  display: block;
  font-style: normal;
  font-family: var(--cond);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink2);
  margin-top: 3px;
}

/* -------------------------------------------------------------- panels */

.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
  list-style: none;
  padding: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: var(--s4);
}

.panel h3 { margin-bottom: var(--s2); }

.panel p { font-size: 14px; color: var(--ink2); }

.panel .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--strong);
  display: block;
  margin-bottom: var(--s2);
}

/* steps: a numbered strip like the app's progress rows */

.steps-strip {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
}

.steps-strip li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  border-top: 1px solid var(--hair2);
}

.steps-strip li:first-child { border-top: 0; }

.steps-strip b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--strong);
  min-width: 22px;
  padding-top: 2px;
  flex: none;
}

.steps-strip span { font-size: 15px; color: var(--ink2); }

/* --------------------------------------------------------------- prices */

.plans {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}

.plan {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.plan.on { border-color: var(--strong); box-shadow: 0 0 0 1px var(--strong); }

.plan .name {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 14px;
  color: var(--dim);
}

.plan .price {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.6px;
}

.plan .price span {
  font-weight: 500;
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0;
}

.plan .credits {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--strong);
}

.plan .note { font-size: 13px; color: var(--dim); }

.plan .flag {
  align-self: flex-start;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 12px;
  background: var(--lime);
  color: var(--on-lime);
  border-radius: var(--r-full);
  padding: 3px 10px;
  margin-bottom: var(--s1);
}

.terms-sentence {
  margin-top: var(--s4);
  font-size: 14px;
  color: var(--dim);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- notes */

.callout {
  margin-top: var(--s5);
  background: var(--panel2);
  border: 1px solid var(--hair);
  border-inline-start: 3px solid var(--lime);
  border-radius: var(--r-sm);
  padding: var(--s4);
  font-size: 15px;
  color: var(--ink2);
}

.callout h3 { margin-bottom: var(--s2); color: var(--ink); }

.notice {
  margin: 0 0 var(--s4);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-size: 14px;
  line-height: 1.45;
}

.notice-draft {
  background: var(--warning-tint);
  border: 1px solid var(--warning);
  color: var(--warning-ink);
}

.notice-mt {
  background: var(--panel2);
  border: 1px solid var(--hair);
  color: var(--ink2);
}

.notice .num { font-family: var(--mono); }

/* an unresolved marketing placeholder: visible, ugly on purpose */
.todo {
  display: block;
  margin-top: var(--s2);
  border: 1px dashed var(--warning);
  border-radius: 10px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--warning);
  background: var(--warning-tint);
}

mark {
  border-radius: 4px;
  padding: 0 3px;
  font-family: var(--mono);
  font-size: 0.85em;
}

mark.fill { background: var(--warning-tint); color: var(--warning); border: 1px solid var(--warning); }
mark.lawyer { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger); }
mark.unverified { background: var(--panel3); color: var(--ink2); border: 1px dashed var(--warning); }

/* ------------------------------------------------------------- documents */

.doc { max-width: 760px; }

.doc h1 { margin-bottom: var(--s4); }

.doc h2 {
  margin: var(--s6) 0 var(--s3);
  font-size: 20px;
  padding-top: var(--s4);
  border-top: 1px solid var(--hair2);
}

.doc h3 { margin: var(--s5) 0 var(--s2); }

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

.doc ul, .doc ol { padding-inline-start: 1.3em; }

.doc li { margin-bottom: var(--s2); }

.doc .meta {
  font-size: 14px;
  color: var(--dim);
}

.doc-lang {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.doc-lang a {
  border: 1px solid var(--hair);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink2);
  background: var(--panel2);
}

.doc-lang a[aria-current="page"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--on-lime);
  font-weight: 700;
}

.doc nav ol { color: var(--dim); }

.steps { padding-inline-start: 1.3em; }

.steps li { margin-bottom: var(--s2); }

/* ----------------------------------------------------------------- FAQ */

.faq { margin-top: var(--s4); }

.faq details {
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: var(--panel);
  margin-bottom: var(--s2);
  padding: 0 var(--s4);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

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

.faq summary::after {
  content: "+";
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--strong);
  flex: none;
}

.faq details[open] summary::after { content: "−"; }

.faq details > *:not(summary) {
  margin-bottom: var(--s3);
  font-size: 15px;
  color: var(--ink2);
}

.faq details > *:last-child { padding-bottom: var(--s3); }

/* --------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  margin-top: var(--s4);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: var(--panel);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  min-width: 420px;
}

th, td {
  text-align: start;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hair2);
  vertical-align: top;
  color: var(--ink2);
}

th {
  color: var(--dim);
  font-family: var(--cond);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

.facts th { width: 34%; }

/* ------------------------------------------------------------ press kit */

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}

.logo-box {
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: var(--panel);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: 13px;
  color: var(--dim);
}

.logo-box.ink { background: var(--lime); color: var(--on-lime); }
.logo-box.ink .wordmark { color: var(--on-lime); }
.logo-box.ink .mark { background: var(--on-lime); color: var(--lime); }

.assets {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
}

.assets a {
  display: block;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--panel);
  color: var(--ink2);
  font-size: 13px;
}

.assets img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

.assets span { display: block; padding: var(--s2) var(--s3); }

/* ------------------------------------------------------- proof / QR page */

.proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}

.proof figure {
  margin: 0;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
}

.proof figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.proof figcaption {
  padding: var(--s3) var(--s4);
  font-family: var(--cond);
  font-weight: 600;
  font-size: 13px;
  color: var(--dim);
}

.proof figure.is-original figcaption { color: var(--strong); }

.code-line {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink2);
  background: var(--panel2);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  margin-top: var(--s4);
  overflow-x: auto;
  white-space: nowrap;
}

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

.site-footer {
  border-top: 1px solid var(--hair2);
  padding: var(--s6) var(--s4) var(--s7);
  color: var(--dim);
  font-size: 13px;
}

.site-footer > * {
  max-width: var(--page);
  margin-inline: auto;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  margin-bottom: var(--s3);
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink2);
  border: 0;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 14px;
}

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

.site-footer p { margin-bottom: var(--s1); }

/* ------------------------------------------------------------ wider screens */

@media (min-width: 640px) {
  h1 { font-size: 40px; }
  .hero h1 { font-size: 54px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main { padding: var(--s6) var(--s5) var(--s7); }
}

@media (min-width: 900px) {
  .hero h1 { font-size: 64px; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ================================================= LANDING PAGE additions

   Added when index.html was rebuilt around the real before/after pairs. Same
   tokens, same card anatomy, no new colours and no new radii. Only index.html
   uses these classes.
   ==================================================================== */

/* A row of short facts under the hero pair. Chips, not badges: they say what
   the product does. Nothing here counts down, flashes or claims a number we
   cannot show (constitution P3, direction §10). */
.strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: 0;
}

.strip li {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink2);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-full);
  padding: 6px 12px;
}

/* Three rooms of a listing side by side: the mode-grid anatomy, three up. */
@media (min-width: 640px) {
  .cards.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
}

/* Four panels read better two-up than three-and-a-widow. */
@media (min-width: 900px) {
  .panels.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* RTL. The seam mirrors, so the photograph that went in stays on the side the
   reader starts from — the same way the app's slider mirrors. (Burned-in marks
   on an exported image do NOT mirror; they are locale-fixed, direction §5.) */
[dir="rtl"] .pair-frame .clip,
[dir="rtl"] .card .clip { clip-path: inset(0 0 0 52%); }

[dir="rtl"] .pair-frame .edge,
[dir="rtl"] .card .edge { left: auto; right: 48%; }

[dir="rtl"] .pair-frame .knob {
  left: auto;
  right: 48%;
  margin: -20px -20px 0 0;
}

/* Printing a policy page should not waste ink on the dark ground. */
@media print {
  html, body { background: #fff; color: #000; }
  .site-header nav, .site-footer nav, .doc-lang { display: none; }
  a { color: #000; border-bottom: 0; }
  .doc p, .doc li, th, td { color: #000; }
}

/* ------------------------------------------------ live curtains, plans, launch list */
.js .pair-frame .clip, .js .pair-frame .edge, .js .pair-frame .knob { animation: none; }
.js .pair-frame, .js .card .shot { touch-action: pan-y; cursor: ew-resize; }
.card .knob {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: var(--r-full); background: var(--lime); color: var(--on-lime);
  display: flex; align-items: center; justify-content: center;
}
.knob:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; }
.js .plan { cursor: pointer; }
.plan.on { border-color: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
.soon { margin-top: var(--s5); }
.notify { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); max-width: 520px; }
.notify input[type="email"] {
  flex: 1 1 220px; min-height: 52px; padding: 0 var(--s4); border-radius: var(--r-full);
  border: 1px solid var(--hair); background: var(--panel); color: var(--ink); font: inherit;
}
.notify input[type="email"]:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; }
.notify .btn { min-height: 52px; }
.notify-msg { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--dim); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }