/* Self-hosted fonts (SIL Open Font License 1.1, see assets/fonts/OFL.txt). Source: @fontsource 5.3.0 npm packages.
   Browsers download a file only when the page uses that family AND contains characters in its unicode-range. */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/amiri-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/amiri-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/amiri-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/amiri-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Arabic-only face for Arabic words on English pages (language switch, 404): no Latin subset, so English pages never fetch Latin Plex. */
@font-face { font-family: 'IB Arabic Label'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }


/* Imagery Bros marketing site. Dark theme matching the app. No build step.
   Design rules (see docs/site/DESIGN-AUDIT.md): lime only for actions and selection; no glows, glass or gradient fills;
   images carry the color; small radii on photos (print-like), rounder only on touch controls; hairline rules instead of card boxes. */
:root {
  --ink: #11120F;
  --graphite: #1C1E18;
  --raised: #272A22;
  --border: #3A3E32;
  --border-strong: #7C8270; /* control boundaries: 3:1 on ink and graphite (WCAG 1.4.11). --border stays for decorative hairlines. */
  --paper: #F6F7F2;
  --mist: #B7BCAE;
  --lime: #D6F36A;
  --lime-hover: #E2F88E;
  --forest: #46551D;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-photo: 4px;
  --r-control: 12px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1280px;
  color-scheme: dark;
}
:lang(ar) {
  --display: "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;
  --sans: "IBM Plex Sans Arabic", "Geeza Pro", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
:lang(ar) body { line-height: 1.8; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lime); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: 12px; top: 0; transform: translateY(-150%); z-index: 100;
  background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.skip-link:focus { top: 12px; transform: none; }

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

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font-weight: 700; font-family: "Manrope", system-ui, sans-serif; letter-spacing: -0.01em; font-size: 1.125rem; }
.brand svg { width: 28px; height: 28px; flex: none; }
.nav { display: none; gap: 6px; margin-inline-start: auto; }
.nav a { color: var(--mist); text-decoration: none; padding: 10px 10px; font-size: 0.95rem; font-weight: 600; }
.nav a:hover { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.lang-switch {
  color: var(--paper); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-control); min-height: 44px; display: inline-flex; align-items: center; flex: none; white-space: nowrap;
}
.lang-switch:hover { border-color: var(--paper); }
.lang-switch [lang="ar"] { font-family: "IB Arabic Label", "Geeza Pro", sans-serif; }
.lang-switch [lang="en"] { font-family: "Manrope", sans-serif; }
.header-cta { display: none; }
/* Session links: "Sign in" when signed out, "My library" when signed in. site.js adds html.si from the ib_si=1 hint cookie
   and html.si-ready once it has looked, so the wrong one never flashes. */
.hdr-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 6px; color: var(--paper); text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.hdr-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hdr-link[data-session="in"] { display: none; }
.si .hdr-link[data-session="in"] { display: inline-flex; }
.si .hdr-link[data-session="out"] { display: none; }
.js:not(.si-ready) .hdr-link { visibility: hidden; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }
@media (min-width: 1100px) {
  .nav { display: flex; }
  .nav + .header-actions { margin-inline-start: 12px; }
}

/* Buttons */
.btn-store {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--lime); color: var(--ink); text-decoration: none;
  border-radius: var(--r-control); padding: 12px 22px 12px 18px; min-height: 60px;
  font-weight: 700; line-height: 1.15; text-align: start;
  transition: background-color .15s ease;
}
:lang(ar) .btn-store { padding: 12px 18px 12px 22px; }
.btn-store:hover { background: var(--lime-hover); text-decoration: none; }
.btn-store small { display: block; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; }
.btn-store strong { display: block; font-size: 1.2rem; letter-spacing: -0.01em; }
.btn-store svg { width: 24px; height: 24px; flex: none; }
.btn-store.small { min-height: 44px; padding: 8px 16px; border-radius: 10px; font-size: 0.95rem; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px;
  border: 1px solid var(--border-strong); border-radius: var(--r-control); color: var(--paper); text-decoration: none; font-weight: 600;
}
.btn-ghost:hover { border-color: var(--paper); }

/* Type */
h1, h2, h3 { margin: 0; font-weight: 400; }
.display {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(2.05rem, 8.6vw, 4.2rem); line-height: 1;  text-wrap: balance;
}
.display > span { display: block; }
:lang(ar) .display { font-weight: 700; line-height: 1.22; letter-spacing: 0; font-size: clamp(2.3rem, 6.4vw, 4.4rem); }
.h2 { font-family: var(--display); font-size: clamp(2.15rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance; }
:lang(ar) .h2 { font-weight: 700; line-height: 1.3; letter-spacing: 0; font-size: clamp(1.9rem, 4.2vw, 3rem); }
.lede { color: var(--mist); font-size: clamp(1.075rem, 1.6vw, 1.22rem); max-width: 31em; margin: 28px 0 32px; text-wrap: pretty; }
.note, .fine { color: var(--mist); font-size: 0.9rem; }
.fine { margin-top: 20px; }

/* Hero */
.hero { padding-block: clamp(32px, 5vw, 80px) clamp(40px, 5vw, 72px); }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cta-note { color: var(--mist); font-size: 0.95rem; margin: 0; max-width: 18em; }
.hero-figure { margin: 0; width: 100%; max-width: 540px; justify-self: end; }
@media (min-width: 960px) { .hero-figure { max-width: min(540px, calc((100svh - 270px) * 0.8)); } }
@media (max-width: 959px) { .hero-figure { justify-self: start; max-width: 560px; } }
@media (max-width: 559px) { .hero-figure { justify-self: center; } }
/* Phones and tablets: the order is headline, who it is for, the photo button, the privacy and modesty line, then the example (it still fits on a
   390x844 screen above the cookie notice). The lede and the price note come after the example. */
@media (max-width: 959px) {
  .hero-copy { display: contents; }
  .hero-copy h1 { order: 1; }
  .hero-looks { order: 2; margin-bottom: 0; }
  .hero-drop { order: 3; }
  .hero-copy .trust-line { order: 4; margin-top: 0; }
  .hero-figure { order: 5; max-width: min(440px, 100%); }
  .hero-figure figcaption { margin-top: 8px; font-size: 0.875rem; }
  .hero-copy .cta-note { order: 6; margin-top: 0; }
  .hero-copy .lede { order: 7; margin: 4px 0 0; }
  .hero-grid { gap: 20px; }
}
/* Short phones (320x640 and similar): the example's long caption steps aside (its "Illustrative AI example" label stays). */
@media (max-width: 959px) and (max-height: 720px) {
  .hero-figure { max-width: min(560px, calc(30svh * 0.8)); }
  .hero-figure figcaption [data-caption] { display: none; }
}
.hero-figure figcaption, .detail-shot figcaption, .final-figure figcaption, .trio-cap { color: var(--mist); font-size: 0.9rem; margin-top: 12px; line-height: 1.5; }

/* "Example" label: every image on the site is an example of a look, never a user's result */
.ex-label {
  display: inline-block; margin-inline-end: 6px; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: 3px;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.6; color: var(--paper); vertical-align: 1px; white-space: nowrap;
}

/* Before/after compare. The range value is how much of the photo shows, measured from the reading start
   (left in English, right in Arabic), so dragging and arrow keys follow the reading direction. */
.compare {
  --pos: 50%;
  position: relative; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 4 / 5; background: var(--raised);
  touch-action: pan-y;
}
.compare[hidden] { display: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
[dir="rtl"] .compare:not([dir="ltr"]) .before { clip-path: inset(0 0 0 calc(100% - var(--pos))); }
.compare .divider {
  position: absolute; top: 0; bottom: 0; inset-inline-start: var(--pos); width: 2px; margin-inline-start: -1px; background: var(--paper);
  pointer-events: none;
}
.compare .knob {
  position: absolute; top: 50%; inset-inline-start: var(--pos); width: 44px; height: 44px; margin-top: -22px; margin-inline-start: -22px; border-radius: 50%;
  background: var(--paper); color: var(--ink); display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.compare .knob svg { width: 22px; height: 22px; }
.compare input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}
.compare input[type="range"]:focus-visible ~ .knob { outline: 3px solid var(--lime); outline-offset: 3px; }
/* Hero pairs whose look recomposes the photo (new pose, angle and scene). A drag line would cut two unrelated frames,
   so the look fills the frame and the photo sits in a corner inset; tapping the inset swaps them (the pair-card behaviour). */
.hero-pair { position: relative; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 4 / 5; background: var(--raised); }
.hero-pair[hidden] { display: none; }
.hero-pair .pair-media { position: absolute; inset: 0; }
.hero-pair .pair-after, .hero-pair .pair-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-pair .pair-media .tag { top: 12px; inset-inline-start: 12px; }
.hero-pair .pair-media .look-tag { opacity: 1; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-pair.pair-card.is-before .pair-media .look-tag, .hero-pair.pair-card.is-peek .pair-media .look-tag { opacity: 0; }
.hero-pair.pair-card.is-before.is-peek .pair-media .look-tag { opacity: 1; }
.hero-pair .pair-thumb {
  width: 28%; max-width: 152px; inset-inline-end: 14px; bottom: 14px; border-width: 3px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.hero-pair .pair-thumb img { border-radius: 0; background: var(--graphite); }
.hero-pair .pair-thumb span { font-size: 0.8125rem; padding: 2px 4px 3px; }
.tag {
  position: absolute; top: 12px; font-size: 0.8125rem; font-weight: 700; padding: 3px 8px; border-radius: 3px;
  background: rgba(17,18,15,.82); color: var(--paper); pointer-events: none;
}
.tag.start { inset-inline-start: 12px; }
.tag.end { inset-inline-end: 12px; max-width: calc(50% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The compare slider is dir="ltr" so the photo stays on the left; Arabic labels inside it still read and truncate right to left. */
.compare .tag:lang(ar) { direction: rtl; }
/* direction: rtl also flips logical insets, so pin the labels physically: photo label left, look label right. */
.compare .tag.start { left: 12px; right: auto; }
.compare .tag.end { right: 12px; left: auto; }
/* Narrow screens: let a long look name wrap to two lines instead of cutting it off. */
@media (max-width: 559px) { .compare .tag.end { white-space: normal; text-overflow: clip; text-align: end; line-height: 1.25; } .compare .tag.start { max-width: calc(50% - 18px); white-space: normal; line-height: 1.25; } }
/* Hero look chooser: text buttons on a baseline, like the category tabs. Each chip picks the example and the look the photo drop opens. */
.hero-looks { display: none; align-items: baseline; flex-wrap: wrap; gap: 0 20px; max-width: 31em; margin: 0 0 20px; border-bottom: 1px solid var(--border-strong); }
.js .hero-looks { display: flex; }
.hero-looks-label { color: var(--mist); font-size: 0.95rem; }
.hero-chips { display: flex; gap: clamp(4px, 1vw, 10px); overflow-x: auto; scrollbar-width: none; }
.hero-chips::-webkit-scrollbar { display: none; }
.hero-chips button {
  flex: none; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--mist); cursor: pointer;
  padding: 10px 10px; min-width: 44px; min-height: 44px; font-weight: 600; font-size: 1rem; margin-bottom: -1px; border-radius: 0;
}
.hero-chips button:hover { color: var(--paper); }
.hero-chips button[aria-pressed="true"] { color: var(--paper); border-bottom-color: var(--lime); }
.hero-chips button:focus-visible { outline-offset: -3px; }
.hero-figure figcaption [hidden] { display: none; }

/* Hero photo drop: the real first step of the tool */
.hero-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.drop[hidden] { display: none; }
html:not(.js) .drop { display: none; }
.js .nojs-only { display: none; }
.btn-primary.lg { min-height: 60px; padding: 16px 28px; font-size: 1.1rem; }
.btn-primary.lg svg { width: 22px; height: 22px; flex: none; }
.hero-copy .cta-note { margin-top: 16px; max-width: 30em; }
.hero-copy.is-drag .drop label { outline: 3px dashed var(--lime); outline-offset: 5px; }
@media (max-width: 559px) {
  .hero-drop > *, .hero-drop .drop .btn-primary { width: 100%; }
  .hero-drop .btn-ghost { justify-content: center; }
}

/* Sections */
section { scroll-margin-top: 80px; }
/* Rhythm: 96/128 px between sections, 40/56 px from a heading block to its content. One header pattern everywhere: the heading,
   and a subline (only where it says something) directly under it. No rules between sections; space does the separating. */
.section { padding-block: clamp(64px, 9vw, 120px); border-top: 0; }
.section-head { max-width: 40rem; margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head p, .details-copy p:not(.note) { color: var(--mist); font-size: 1.1rem; margin: 14px 0 0; max-width: 34em; text-wrap: pretty; }
.split { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split > :first-child { position: sticky; top: 104px; align-self: start; }
}

/* Same subject, different sets */
.details-grid { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) {
  .details-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .details-copy { position: sticky; top: 104px; }
}
@media (min-width: 960px) {
  .details-copy .h2 { max-width: 12ch; }
  :lang(ar) .details-copy .h2 { max-width: 14ch; }
}
.details-copy .note { margin: 18px 0 0; }
.details-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 22px); align-items: start; }
.detail-shot { margin: 0; }
.detail-shot:nth-child(2) { margin-top: clamp(28px, 6vw, 88px); }
.detail-shot:nth-child(3) { margin-top: clamp(12px, 2.6vw, 40px); }
.detail-shot img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; border-radius: var(--r-photo); background: var(--graphite); }
@media (max-width: 560px) { .detail-shot figcaption { font-size: 0.875rem; } }
/* Category browse: image tiles with a gallery-label plate; typographic tiles where no image exists yet */
.cat-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.cat-grid > li { min-width: 0; }
.cat-tile {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-photo); background: var(--graphite); color: var(--paper); text-decoration: none;
}
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-tile .plate {
  position: absolute; inset-inline-start: 8px; bottom: 8px; max-width: calc(100% - 16px);
  display: grid; gap: 1px; padding: 7px 11px 8px; background: var(--ink); border-radius: 3px;
}
.cat-name { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.05; }
:lang(ar) .cat-name { font-weight: 700; line-height: 1.35; font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
.cat-count { color: var(--mist); font-size: 0.875rem; font-weight: 600; }
a.cat-tile:hover .cat-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.cat-tile:focus-visible { outline-offset: 3px; border-radius: var(--r-photo); }
@media (min-width: 640px) { .cat-tile .plate { inset-inline-start: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 9px 14px 10px; } }

.all-tile { justify-content: flex-end; gap: 10px; padding: clamp(14px, 2vw, 24px); border: 1px solid var(--border-strong); background: var(--ink); }
.all-h { font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; }
:lang(ar) .all-h { font-weight: 700; line-height: 1.3; font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.all-tile p { margin: 0; color: var(--mist); font-size: 0.9rem; line-height: 1.45; }
.all-tile .btn-store { align-self: flex-start; }
@media (max-width: 639px) { .all-tile .btn-store.small { min-height: 44px; padding: 8px 12px; font-size: 0.85rem; } }

/* Tabs + look rails: read as the second half of the browse section, so no rule and less space above */
.section.rails { border-top: 0; padding-top: clamp(24px, 4vw, 56px); }
.browse { padding-bottom: clamp(40px, 5vw, 72px); }
.tabs {
  display: flex; gap: clamp(14px, 2.2vw, 28px); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter);
  box-shadow: inset 0 -1px 0 var(--border);
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; scroll-snap-align: start; cursor: pointer; border: 0; background: transparent;
  color: var(--mist); padding: 12px 0; min-height: 48px; font-weight: 600; font-size: 0.98rem;
  border-bottom: 2px solid transparent; border-radius: 0;
}
.tab:hover { color: var(--paper); }
.tab[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--lime); }
.tab:focus-visible { outline-offset: -3px; }
.tabpanel:focus-visible { outline-offset: 6px; }
.panel-intro { color: var(--mist); margin: 0 0 18px; max-width: 46em; }
.js [role="tabpanel"][hidden] { display: none; }
html:not(.js) .tabpanel + .tabpanel { margin-top: 48px; }
.rail-wrap { position: relative; }
.rail {
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 64%); gap: 14px; align-items: start;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  scroll-padding-inline: var(--gutter);
}
@media (min-width: 640px) { .rail { grid-auto-columns: minmax(220px, 36%); gap: 16px; } }
@media (min-width: 1024px) { .rail { grid-auto-columns: calc((100% - var(--gutter) * 2 - 18px * 3) / 4); gap: 18px; } }
.rail:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; border-radius: 6px; }
.look { scroll-snap-align: start; min-width: 0; }
.look figure { margin: 0; }
.look img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-photo); background: var(--graphite); }
.look figcaption { padding: 12px 2px 0; display: grid; gap: 2px; }
.look .name { font-weight: 600; font-size: 0.98rem; line-height: 1.35; }
.look .meta { color: var(--mist); font-size: 0.875rem; }
/* "+N more in the app": the number is counted from the list, so adding an image only means moving one line */
.more-frame {
  aspect-ratio: 4 / 5; display: flex; flex-direction: column; padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--border); border-radius: var(--r-photo); overflow: hidden;
}
.look.more:has(.more-list li:nth-child(7)) { grid-column: span 2; }
.look.more:has(.more-list li:nth-child(7)) .more-frame { aspect-ratio: 8 / 5; }
.more-frame { position: relative; counter-reset: more; }
.more-list { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); order: 2; color: var(--mist); font-size: 0.86rem; line-height: 1.5; }
.look.more:has(.more-list li:nth-child(7)) .more-list { columns: 2; column-gap: 22px; }
.more-list li { counter-increment: more; break-inside: avoid; }
/* ::after comes after every <li>, so it shows the total */
.more-list::after {
  content: "+" counter(more); position: absolute; top: clamp(14px, 1.8vw, 20px); inset-inline-start: clamp(16px, 2vw, 22px);
  font-family: var(--display); font-size: clamp(2.8rem, 4.4vw, 3.6rem); line-height: 1; color: var(--paper);
  direction: ltr; unicode-bidi: isolate;
}
.more-head { order: 1; margin: auto 0 10px; font-weight: 700; font-size: 0.95rem; }
@media (max-width: 639px) {
  .look.more:has(.more-list li:nth-child(7)) { grid-column: auto; }
  .look.more:has(.more-list li:nth-child(7)) .more-frame { aspect-ratio: 4 / 5; }
  .look.more:has(.more-list li:nth-child(7)) .more-list { columns: 1; }
  .more-list { font-size: 0.8rem; line-height: 1.5; max-height: calc(0.8rem * 1.5 * 6 + 12px); overflow: hidden; }
  :lang(ar) .more-list { line-height: 1.7; max-height: calc(0.8rem * 1.7 * 5 + 12px); }
}
.rail-nav { display: none; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.js .rail-nav { display: flex; }
.rail-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.rail-nav button:hover { border-color: var(--mist); }
.rail-nav svg { width: 18px; height: 18px; }
[dir="rtl"] .rail-nav svg, [dir="rtl"] .flip-rtl { transform: scaleX(-1); }
.gallery-note { color: var(--mist); font-size: 0.9rem; margin-top: 18px; }

/* How it works: steps beside one subject in three treatments */
.how-grid { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 960px) {
  .how-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head fig" "steps fig"; column-gap: clamp(36px, 5vw, 72px); row-gap: 32px; align-items: start; }
  .how-grid > .h2 { grid-area: head; }
  .how-grid > .steps { grid-area: steps; }
  .how-figure { grid-area: fig; position: sticky; top: 104px; }
}
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); align-items: start; }
.trio figure { position: relative; margin: 0; }
.trio figure:nth-child(2) { margin-top: clamp(20px, 4vw, 56px); }
.trio figure:nth-child(3) { margin-top: clamp(40px, 8vw, 112px); }
.trio img { width: 100%; border-radius: var(--r-photo); background: var(--graphite); }
.trio .tag { inset-inline-start: 8px; top: 8px; }
.trio-cap { max-width: 40em; }

/* Steps: a real sequence, so it keeps its numbers */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 12px;
  padding: 26px 0; border-top: 1px solid var(--border);
}
.steps li:last-child { border-bottom: 1px solid var(--border); }
.step-n { grid-row: span 2; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--mist); }
:lang(ar) .step-n { font-weight: 700; font-size: 1.7rem; }
.steps h3 { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--mist); max-width: 36em; }

/* Pricing */
.price-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 72px); align-items: start; } }
.data-table { width: 100%; border-collapse: collapse; }
.data-table caption { text-align: start; font-weight: 700; font-size: 1.1rem; padding: 0 0 14px; }
.data-table th, .data-table td { text-align: start; padding: 16px 12px 16px 0; border-top: 1px solid var(--border); vertical-align: baseline; }
[dir="rtl"] .data-table th, [dir="rtl"] .data-table td { padding: 16px 0 16px 12px; }
.data-table thead th { border-top: 0; border-bottom: 1px solid var(--mist); color: var(--mist); font-size: 0.875rem; font-weight: 600; padding-block: 0 10px; }
.data-table tbody tr:last-child > * { border-bottom: 1px solid var(--border); }
.data-table td.num { white-space: nowrap; font-weight: 700; }
.data-table .hint, .data-table .q-note { display: block; color: var(--mist); font-size: 0.875rem; font-weight: 500; }
[dir="rtl"] .data-table .hint { text-align: right; }
.packs-table th[scope="row"] { font-weight: 600; color: var(--mist); white-space: nowrap; }
.pack-n { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--paper); margin-inline-end: 4px; }
:lang(ar) .pack-n { font-weight: 700; font-size: 1.7rem; }
.best-note { display: block; width: fit-content; margin-top: 6px; font-family: var(--sans); font-size: 0.75rem; font-weight: 700; color: var(--paper); border: 1px solid var(--mist); border-radius: 3px; padding: 0 6px; }
.packs-table td { color: var(--mist); }
.packs-table td.num { color: var(--paper); font-size: 1.15rem; }
.promise { margin-top: clamp(40px, 5vw, 64px); }
.promise h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; margin-bottom: 12px; }
.promise ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 8px 48px; color: var(--mist); }
.promise li::marker { color: var(--border); }
@media (min-width: 760px) { .promise ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .data-table th, .data-table td { padding-inline-end: 8px; font-size: 0.95rem; }
  [dir="rtl"] .data-table th, [dir="rtl"] .data-table td { padding-inline: 8px 0; }
  .pack-n { font-size: 1.6rem; }
}

/* FAQ */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-weight: 600; font-size: 1.05rem; position: relative; min-height: 44px;
}
[dir="rtl"] .faq summary { padding: 20px 0 20px 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; inset-inline-end: 6px; top: 50%; width: 14px; height: 2px; background: var(--mist);
  transition: transform .2s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover::before, .faq summary:hover::after { background: var(--paper); }
.faq .answer { padding: 0 0 22px; color: var(--mist); max-width: 40em; }
.faq .answer p { margin: 0 0 10px; }
.faq .answer p:last-child { margin-bottom: 0; }
/* Closing: two offset frames, like the logo */
.final { padding-block: clamp(64px, 9vw, 120px) 0; }
.final-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .final-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.final .display { font-size: clamp(2.6rem, 6.4vw, 5.4rem); max-width: 10ch; }
:lang(ar) .final .display { font-size: clamp(2.2rem, 5.4vw, 4.2rem); max-width: 12ch; }
.final p { color: var(--mist); max-width: 30em; margin: 22px 0 30px; }
.final-figure { margin: 0; width: 100%; max-width: 440px; justify-self: end; }
@media (max-width: 899px) { .final-figure { max-width: 340px; justify-self: start; } }
.duo { display: grid; }
.duo img { grid-area: 1 / 1; width: 72%; border-radius: var(--r-photo); background: var(--graphite); }
.duo .front { margin-inline-start: 28%; margin-top: 26%; outline: 8px solid var(--ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); margin-top: clamp(72px, 9vw, 120px); padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--mist); font-size: 0.95rem; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.site-footer h2 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--paper); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer a { color: var(--mist); text-decoration: none; display: inline-block; padding: 4px 0; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer .brand { display: inline-flex; color: var(--paper); padding: 0; }
.site-footer .brand:hover { text-decoration: none; }
.site-footer .btn-store, .site-footer .btn-store:hover { color: var(--ink); text-decoration: none; display: inline-flex; padding: 8px 16px; }
.footer-tagline { margin: 14px 0 18px; max-width: 26em; }
.legal-line { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 0.875rem; display: grid; gap: 6px; }

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--ink); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  transform: translateY(110%); transition: transform .25s ease; visibility: hidden;
}
.sticky-cta.show { transform: none; visibility: visible; }
.sticky-cta p { margin: 0; font-size: 0.85rem; color: var(--mist); line-height: 1.35; }
.sticky-cta p strong { color: var(--paper); display: block; font-size: 0.95rem; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
html { scroll-padding-bottom: var(--cookie-h, 0px); }
@media (max-width: 899px) { html { scroll-padding-bottom: calc(var(--cookie-h, 0px) + 96px); } }

/* Legal / support pages */
.doc { padding-block: clamp(36px, 6vw, 72px); }
.doc .wrap { max-width: 820px; }
.doc h1 { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; margin-bottom: 12px; }
:lang(ar) .doc h1 { font-weight: 700; line-height: 1.3; }
.doc h2 { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; margin: 40px 0 10px; }
.doc h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; margin: 24px 0 8px; }
.doc p, .doc li { color: #DADDD3; }
.doc ul, .doc ol { padding-inline-start: 1.3em; }
.doc li { margin-bottom: 6px; }
.doc .meta { color: var(--mist); }
.doc .lede { margin: 8px 0 0; }
.doc .toc { border-block: 1px solid var(--border); padding: 16px 0; margin: 24px 0; }
.doc .toc ol { margin: 6px 0 0; }
.contact-card { border-block: 1px solid var(--border); padding: 24px 0; margin: 28px 0; display: grid; gap: 10px; }
.contact-card h2 { margin: 0; }
.contact-card p { margin: 0; }
.contact-card .email { font-size: 1.25rem; font-weight: 700; word-break: break-all; }
.doc code { background: var(--raised); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; }
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 48px; }
.notfound p { color: var(--mist); }
.notfound .display { font-size: clamp(2.6rem, 7vw, 4.8rem); }
.nf-ar { margin-top: 28px; font-family: "IB Arabic Label", "Geeza Pro", sans-serif; }

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

/* Focus sections (pets, portraits, couples and family): real photo-to-look pairs get the room */
.pair-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 900px) { .pair-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 18px; } }
.pair-media { position: relative; }
.pair-before { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .35s ease; }
.pair-card.is-before .pair-before, .pair-card.is-peek .pair-before { opacity: 1; }
.pair-card.is-before.is-peek .pair-before { opacity: 0; }
.pair-media .tag { top: 8px; inset-inline-start: 8px; opacity: 0; transition: opacity .2s ease; }
.pair-card.is-before .pair-media .tag, .pair-card.is-peek .pair-media .tag { opacity: 1; }
.pair-card.is-before.is-peek .pair-media .tag { opacity: 0; }
.pair-thumb {
  position: absolute; inset-inline-end: 8px; bottom: 8px; width: 30%; max-width: 104px; padding: 0;
  border: 2px solid var(--paper); border-radius: 4px; background: var(--ink); overflow: hidden; cursor: pointer;
}
.look .pair-thumb img { border-radius: 0; background: var(--graphite); }
.pair-thumb span {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1px 2px 2px; text-align: center;
  background: rgba(17,18,15,.82); color: var(--paper); font-size: 0.8125rem; font-weight: 700; line-height: 1.4;
}
.pair-thumb:hover, .pair-thumb[aria-pressed="true"] { border-color: var(--lime); }
.pair-thumb:disabled { cursor: default; }
.pair-thumb:focus-visible { outline-offset: 2px; }
@media (min-width: 640px) { .pair-thumb { inset-inline-end: 10px; bottom: 10px; } .pair-thumb span { font-size: 0.8125rem; } }
.pair-note { color: var(--mist); font-size: 0.9rem; margin: 24px 0 0; max-width: 52em; }
.feature-foot { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) {
  .steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 32px); }
  .steps-row li { grid-template-columns: minmax(0, 1fr); align-content: start; border-bottom: 1px solid var(--border); }
  .steps-row .step-n { grid-row: auto; margin-bottom: 12px; }
}
.gift { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.gift h3, .tips h3, .sub-head h3 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; }
:lang(ar) .gift h3, :lang(ar) .tips h3, :lang(ar) .sub-head h3 { font-weight: 700; line-height: 1.4; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sub-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin: clamp(56px, 7vw, 88px) 0 24px;
}
.feature-head + .sub-head { margin-top: 0; }
.sub-head p { margin: 0; color: var(--mist); max-width: 40em; }
.sub-head .count { font-size: 0.9rem; font-weight: 600; }
.tips { margin-top: clamp(56px, 7vw, 88px); display: grid; gap: 16px 48px; align-items: start; }
@media (min-width: 960px) {
  .tips { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .tips h3 { grid-row: span 3; }
}
.tips ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 8px 40px; }
.tips li::marker { color: var(--mist); }
@media (min-width: 760px) { .tips ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tips .fine { margin: 0; max-width: 44em; }
.tips .btn-store { justify-self: start; margin-top: 6px; }

/* Cookie banner: fixed bottom bar, never shifts the layout. On phones it is one short line plus two compact buttons, so the photo
   button stays above it. site.js publishes its height as --cookie-h (the app reads the same property for its Create bar). */
.cookie-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  background: var(--graphite); border-top: 1px solid var(--border-strong);
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 8px 20px;
}
.cookie-banner p { margin: 0; font-size: 0.875rem; line-height: 1.35; color: var(--mist); flex: 1 1 auto; min-width: 0; max-width: 46em; }
.cookie-banner p a { color: var(--paper); white-space: nowrap; }
.cookie-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cookie-btn {
  font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; min-height: 44px; min-width: 44px; padding: 8px 16px;
  border-radius: var(--r-control); border: 1px solid var(--border-strong); background: transparent; color: var(--paper);
}
.cookie-btn:hover { border-color: var(--paper); }
.cookie-accept { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.cookie-accept:hover { background: var(--lime-hover); border-color: var(--lime-hover); }
.cookie-more { color: var(--paper); font-size: 0.875rem; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; }
/* Phones and large text: the sentence on top (it scrolls inside the notice if it ever gets long), the three controls in one row below. The notice never grows past 40% of the screen. */
@media (max-width: 640px) {
  .cookie-banner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto) auto; gap: 2px; max-height: 40dvh; padding-block: 6px calc(6px + env(safe-area-inset-bottom)); }
  .cookie-banner p { overflow-y: auto; font-size: 0.8125rem; line-height: 1.3; }
  .cookie-actions { width: 100%; gap: 4px 6px; align-items: center; flex-wrap: wrap; }
  .cookie-more { margin-inline-end: auto; padding-inline: 0; flex: 1 1 auto; }
  .cookie-btn { padding: 4px 14px; }
}
@media (max-width: 359px) { .cookie-btn { padding-inline: 10px; } .cookie-more { font-size: 0.8125rem; } }
/* Very large text: site.js moves the notice into the page flow at the top, so it never covers the page. */
.cookie-banner.is-inline { position: static; max-height: none; border-top: 0; border-bottom: 1px solid var(--border-strong); padding-bottom: 8px; }
.cookie-banner.is-inline p { overflow: visible; }
.cookie-link { font: inherit; color: var(--mist); background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: start; }
.cookie-link:hover { color: var(--paper); text-decoration: underline; }
.nf-cookie { margin-top: 40px; }
html.has-cookie body { padding-bottom: var(--cookie-h, 0px); }
.drop-msg { margin: 8px 0 0; color: var(--paper); font-size: 0.9375rem; }
.drop-msg:empty { display: none; }

/* Web-first homepage additions */
.how-list { list-style: none; margin: 0; padding: 0; }
.how-list li { padding: 22px 0; border-top: 1px solid var(--border); }
.how-list li:last-child { border-bottom: 1px solid var(--border); }
.how-list h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.1; margin-bottom: 8px; }
:lang(ar) .how-list h3 { font-weight: 700; line-height: 1.4; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.how-list p { margin: 0; color: var(--mist); max-width: 36em; }
.pay-row { display: grid; gap: 32px 56px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) { .pay-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pay-row .promise { margin-top: 0; }
.pay-row .promise ul { grid-template-columns: minmax(0, 1fr); }
.pay h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; margin-bottom: 12px; }
.pay p { margin: 0; color: var(--mist); max-width: 34em; }
.packs-table td:last-child { max-width: 20em; }
.tips-links, .final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.tips-links { justify-self: start; margin-top: 6px; }
.hub-row, .collections ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; }
.hub-row { margin-top: 22px; }
.hub-row a, .collections a { color: var(--paper); text-underline-offset: 4px; font-weight: 600; }
.hub-row a:hover, .collections a:hover { color: var(--lime); }
.collections { margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--border); display: grid; gap: 14px; }
.collections h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.doc code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; background: var(--graphite); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; overflow-wrap: anywhere; }

/* ---- Usability round (council, 29 Oct 2026) ---- */
/* Header: wraps instead of overflowing at 320 px and at 125% to 200% text. The mark alone stands in for the name on small phones. */
.site-header .wrap { flex-wrap: wrap; row-gap: 0; }
.header-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; gap: 4px 8px; }
.hdr-link { min-width: 44px; justify-content: center; }
@media (max-width: 479px) { .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 899px) { .hdr-help { display: inline-flex; } }
/* Photo and modesty promise: one calm line, no fill, no lime */
.trust-line { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; max-width: 34em; color: var(--mist); font-size: 0.95rem; line-height: 1.5; }
.trust-line svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--paper); }
.trust-line a { color: var(--paper); text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 960px) { .hero-copy .trust-line { margin-top: 16px; } }
.cta-note { max-width: 30em; }
/* Targets: 44 px on touch screens */
@media (max-width: 899px), (pointer: coarse) {
  .collections a, .hub-row a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer a, .site-footer .cookie-link { padding-block: 10px; min-height: 44px; display: inline-flex; align-items: center; }
  .site-footer ul { gap: 0; }
  .tab { min-height: 48px; min-width: 44px; padding-inline: 4px; }
  .nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .faq summary { min-height: 44px; }
}
/* Plain in-short summary at the top of the legal pages */
.in-short { border: 1px solid var(--border-strong); border-radius: var(--r-control); padding: 18px 20px; margin: 22px 0 8px; }
.in-short h2 { margin: 0 0 8px; font-size: 1.1rem; }
.in-short p { margin: 0; color: var(--paper); }
.in-short ul { margin: 8px 0 0; padding-inline-start: 1.2em; }
.in-short li { color: var(--paper); margin-bottom: 4px; }
.doc :target { scroll-margin-top: 90px; }
.owner-note { color: var(--mist); font-size: 0.9rem; }
/* Contrast: the table underline under headings and form-like boundaries */
.data-table thead th { border-bottom-color: var(--border-strong); }
@media (max-width: 899px) { .site-header .wrap { min-height: 56px; } }
@media (max-width: 380px) { .wrap { padding-inline: 14px; } .hero-drop .btn-primary.lg { padding-inline: 18px; } }
@media (max-width: 959px) { .hero-copy .cta-note, .hero-copy .trust-line { margin-top: 0; } }
.site-header .wrap { padding-block: 6px; }
@media (max-width: 380px) { .header-actions { gap: 0 4px; } .hdr-link { padding-inline: 4px; font-size: 0.9rem; } .lang-switch { padding-inline: 10px; font-size: 0.9rem; } }
.brand { min-width: 44px; min-height: 44px; }
@media (max-width: 899px), (pointer: coarse) { .site-footer a { min-width: 44px; } }
.trust-line a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.handoff-link { display: inline-flex; align-items: center; min-height: 44px; }
/* Very small screens or very large text (em media queries follow the browser's text size): the header scrolls away instead of eating the view. */
@media (max-width: 20em) { .site-header { position: static; } }

/* Arabic is read at 14px or more everywhere on the site (the Latin 13px labels are too small for Arabic letterforms). */
:lang(ar) .ex-label, :lang(ar) .tag, :lang(ar) .pair-thumb span, :lang(ar) .cat-count, :lang(ar) .look .meta { font-size: 0.875rem; }
/* 320 px: the three header links fit on the logo's row in Arabic too (the Arabic words are longer). */
@media (max-width: 359px) { .site-header .wrap { column-gap: 2px; } .header-actions { gap: 0 2px; } .hdr-link { padding-inline: 3px; font-size: 0.875rem; } .lang-switch { padding-inline: 8px; font-size: 0.875rem; } }
/* Arabic letterforms need 14 px or more, in the cookie notice too. */
:lang(ar) .cookie-banner p, :lang(ar) .cookie-more, :lang(ar) .cookie-btn { font-size: 0.875rem; }
a.email { display: inline-block; padding-block: 8px; min-height: 44px; }

/* Plain-language pass: the pet steps and the gift line sit one under the other (no cramped side-by-side columns). */
.feature-foot { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; margin-top: clamp(32px, 5vw, 56px); }
.steps-row li { padding: 18px 0; }
.steps-row h3 { margin: 0; font-size: 1.1rem; }
.gift { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 22px; }
.gift h3 { margin: 0; }
.price-grid { grid-template-columns: minmax(0, 1fr) !important; max-width: 520px; }
.quals { margin-top: 24px; max-width: 760px; }
.quals > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--paper); }
.quals .cost-table { margin-top: 12px; }
.quals .tech { margin-top: 16px; }
.how-list p:empty { display: none; }

/* Phones: the add-photo button already says what to do, so the hero sentence waits for wider screens. */
@media (max-width: 899px) { .hero-copy .lede { display: none; } }