/* DuoWallArt website (W8). Colours come only from tokens.css (docs/05, K4).
   Brass (accent) is used only for fold marks: hinge, measurement labels (P7). */

/* ---------- Regions: each section picks a ground; roles resolve per region ---------- */
.paper {
  --bg: var(--light-background);
  --surface: var(--light-surface);
  --text: var(--light-text);
  --muted: var(--light-muted);
  --primary: var(--light-primary);
  --on-primary: var(--light-on-primary);
  --secondary: var(--light-secondary);
  --accent: var(--light-accent);
}
/* Ink = the app icon's night-ink ground. It stays ink in both themes. */
.ink {
  --bg: var(--light-primary);
  --surface: var(--dark-surface);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --primary: var(--dark-primary);
  --on-primary: var(--dark-on-primary);
  --secondary: var(--dark-secondary);
  --accent: var(--dark-accent);
}
@media (prefers-color-scheme: dark) {
  .paper {
    --bg: var(--dark-background);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --primary: var(--dark-primary);
    --on-primary: var(--dark-on-primary);
    --secondary: var(--dark-secondary);
    --accent: var(--dark-accent);
  }
}
.paper,
.ink {
  background: var(--bg);
  color: var(--text);
}

:root {
  --device-body: var(--light-text);
  --shadow-ink: color-mix(in srgb, var(--light-text) 60%, transparent);
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans",
    "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic UI", "PingFang SC",
    "Microsoft YaHei UI", "Noto Sans CJK JP", "Leelawadee UI", "Nirmala UI", sans-serif;
  color-scheme: light dark;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-xl);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  background: var(--light-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
h1,
h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.25rem, 1.35rem + 3.4vw, 4.25rem);
  line-height: 1.04;
}
h2 {
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 3rem);
  line-height: 1.08;
}
p {
  text-wrap: pretty;
}
:is(:lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant)) :is(h1, h2) {
  letter-spacing: -0.01em;
  line-height: 1.22;
}
:lang(ko) {
  word-break: keep-all;
}
:lang(ja) {
  line-break: strict;
}
:is(:lang(th), :lang(hi), :lang(ar)) :is(h1, h2) {
  letter-spacing: 0;
  line-height: 1.3;
}
:is(:lang(th), :lang(hi), :lang(ar)) {
  line-height: 1.7;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
::selection {
  background: color-mix(in srgb, var(--primary) 32%, transparent);
  color: var(--text);
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wrap {
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  inset-inline-start: var(--space-lg);
  top: -4rem;
  z-index: 10;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--light-surface);
  color: var(--light-text);
}
.skip:focus {
  top: var(--space-lg);
}
.note {
  color: var(--muted);
  font-size: 0.9375rem;
}
section {
  padding-block: var(--section);
}
.section-head {
  display: grid;
  gap: var(--space-lg);
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.section-head p {
  color: var(--muted);
  font-size: 1.125rem;
}
.section-head--row {
  max-width: none;
  grid-template-columns: minmax(0, 44rem) auto;
  justify-content: space-between;
  align-items: end;
}

/* ---------- Buttons ---------- */
.button,
.fold-toggle,
.pair__try {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-md) var(--space-xl);
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background-color 0.2s;
}
.button:hover,
.fold-toggle:hover,
.pair__try:hover {
  background: color-mix(in srgb, var(--primary) 86%, var(--text));
}
.button:active,
.fold-toggle:active,
.pair__try:active {
  transform: scale(0.97);
}
.textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  font-weight: 600;
  text-decoration: none;
}
.textlink:hover {
  text-decoration: underline;
}
.round {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.round:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.round:disabled {
  opacity: 0.35;
  cursor: default;
}
[dir="rtl"] .round .icon {
  transform: scaleX(-1);
}

/* App Store badge: an outline label while the app is not out yet, filled once it is a link. */
.store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  line-height: 1.15;
  text-decoration: none;
  background: var(--text);
  color: var(--bg);
}
.store__small {
  font-size: 0.75rem;
  font-weight: 500;
}
.store__big {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.store--soon {
  background: transparent;
  color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--text) 45%, transparent);
}
.store--soon .store__small {
  color: var(--muted);
}

/* ---------- Header ---------- */
.top {
  position: relative;
  z-index: 5;
}
.top__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
  min-height: 4.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img {
  border-radius: 7px;
}
.top__nav {
  display: flex;
  gap: var(--space-xs);
  margin-inline-start: auto;
}
.top__nav a {
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}
.top__nav a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.lang {
  position: relative;
}
.lang summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9375rem;
  list-style: none;
}
.lang summary::-webkit-details-marker {
  display: none;
}
.lang[open] summary {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.lang ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-sm));
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
  gap: 2px;
  width: max-content;
  max-width: calc(100vw - 2.5rem);
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--light-surface);
  color: var(--light-text);
  box-shadow: 0 18px 40px -12px var(--shadow-ink);
}
.lang li > * {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.9375rem;
}
.lang a:hover {
  background: var(--light-background);
}
.lang [aria-current] {
  font-weight: 700;
  background: var(--light-background);
}
.lang a:focus-visible {
  outline-color: var(--light-primary);
}

/* ---------- Hero: the fold ---------- */
.hero {
  --p: 1;
  padding-block: 0;
  position: relative;
  overflow-x: clip;
}
.hero__sticky {
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}
/* First viewport: the words alone. The phone waits just below and unfolds on scroll. */
.hero__copy {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-xl);
  min-height: calc(100svh - 4.5rem);
  padding-block: var(--space-2xl) clamp(3rem, 2rem + 4vw, 6rem);
  text-align: center;
}
.hero__copy h1 {
  max-width: 18ch;
  font-size: clamp(2.5rem, 1.2rem + 5vw, 5.75rem);
  line-height: 1.02;
}
.hero__lede {
  color: var(--muted);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  max-width: 36rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-sm);
}

.stage {
  display: grid;
  justify-items: center;
  gap: var(--space-xl);
  min-width: 0;
}
.measure {
  position: relative;
  height: 1.5rem;
  width: 100%;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-align: center;
}
.measure b {
  font-weight: 700;
  text-transform: uppercase;
  margin-inline-end: 0.4em;
}
.measure__state {
  position: absolute;
  inset: 0;
}
.measure__state--closed {
  opacity: clamp(0, calc(1 - var(--p) * 2.5), 1);
}
.measure__state--open {
  opacity: clamp(0, calc(var(--p) * 2.5 - 1.5), 1);
}

/* The device: two inner-screen halves; the right half (flap) carries the cover screen
   on its back and swings around the hinge. --p: 0 closed, 1 open. Cutout and lock screen
   positions come from device.css (generated from the app's DeviceProfile.iphoneDuo).
   1cqw = 1% of the open phone's width. */
.fold-box {
  width: min(100%, 60rem, calc((100svh - 16rem) * 1.4217));
  container-type: inline-size;
}
.fold {
  --bezel: max(3px, 0.55cqw);
  --frame: color-mix(in srgb, var(--dark-secondary) 40%, var(--device-body));
  --ring: 0 0 0 var(--bezel) var(--device-body), 0 0 0 calc(var(--bezel) + 1.5px) var(--frame);
  --r-out-cover: calc(var(--r-cover) * 50cqw);
  --r-out-inner: calc(var(--r-inner) * 70.34cqw);
  position: relative;
  width: 100%;
  aspect-ratio: 2670 / 1878;
  perspective: 2400px;
  transform-style: preserve-3d;
  transform: translateX(calc((1 - var(--p)) * 25%));
}
.fold__half,
.fold__flap {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.fold__half--left {
  left: 0;
  overflow: hidden;
  border-radius: var(--r-out-inner) 0 0 var(--r-out-inner);
  box-shadow: var(--ring), 0 40px 70px -30px var(--shadow-ink);
  opacity: clamp(0, calc(var(--p) * 30), 1);
}
.fold__flap {
  left: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(calc(-180deg * (1 - var(--p))));
}
.fold__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--device-body);
}
.fold__face--front {
  border-radius: 0 var(--r-out-inner) var(--r-out-inner) 0;
  box-shadow: var(--ring), 0 40px 70px -30px var(--shadow-ink);
}
.fold__face--back {
  transform: rotateY(180deg);
  border-radius: var(--r-out-cover);
  box-shadow: var(--ring), 0 40px 70px -30px var(--shadow-ink);
}
.fold__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--device-body);
  opacity: var(--shade, 0);
  pointer-events: none;
}
.fold__half > img,
.fold__face--front > img {
  position: absolute;
  top: 0;
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.fold__half > img {
  left: 0;
}
.fold__face--front > img {
  left: -100%;
}
.fold__face--back > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Screen details: camera cutouts, status icons, lock screen, hinge crease, side buttons. */
.cam {
  position: absolute;
  z-index: 1;
  border-radius: 999px;
  background: var(--device-body);
}
.cam--inner {
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.status {
  position: absolute;
  z-index: 1;
  top: 2.6%;
  right: 7%;
  width: max(16px, 4.2cqw);
  fill: var(--dark-text);
  opacity: 0.92;
}
.fold__face--front .status {
  top: 3.2%;
  right: 6%;
  width: max(14px, 3.6cqw);
}
.status__battery {
  fill: none;
  stroke: var(--dark-text);
  stroke-width: 1;
  opacity: 0.6;
}
.lock {
  position: absolute;
  z-index: 1;
  display: grid;
  align-content: start;
  color: var(--dark-text);
  text-shadow: 0 1px 6px color-mix(in srgb, var(--device-body) 45%, transparent);
  line-height: 1;
  white-space: nowrap;
}
.lock--cover {
  justify-items: center;
  text-align: center;
}
.lock__date {
  font-size: max(9px, 1.7cqw);
  font-weight: 600;
  opacity: 0.92;
}
.lock__time {
  margin-top: 0.4cqw;
  font-size: 9cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* Cover lock screen: a notification and the two quick actions. */
.notif {
  position: absolute;
  z-index: 1;
  left: 5%;
  right: 5%;
  bottom: 16%;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.5cqw 1.8cqw;
  border-radius: 3.2cqw;
  /* Opaque-ish instead of backdrop blur: blur inside a rotating 3D face is costly. */
  background: color-mix(in srgb, var(--dark-surface) 78%, transparent);
  color: var(--dark-text);
  text-align: start;
}
.notif__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 5.2cqw;
  aspect-ratio: 1;
  border-radius: 1.3cqw;
  background: var(--dark-primary);
  color: var(--dark-on-primary);
}
.notif__icon svg,
.quick svg,
.home__app svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notif__text {
  display: grid;
  gap: 0.3cqw;
  min-width: 0;
  font-size: max(7px, 1.45cqw);
  line-height: 1.25;
}
.notif__head {
  display: flex;
  justify-content: space-between;
  gap: 1cqw;
}
.notif__head span {
  opacity: 0.7;
}
.notif__body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quick {
  position: absolute;
  z-index: 1;
  bottom: 4.5%;
  display: grid;
  place-items: center;
  width: 6.4cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--device-body) 55%, transparent);
  color: var(--dark-text);
}
.quick--left {
  left: 11%;
}
.quick--right {
  right: 11%;
}

/* Inner screen: home screen with a row of app icons on each half. */
.clock-small {
  position: absolute;
  z-index: 1;
  top: 3%;
  left: 8%;
  color: var(--dark-text);
  font-size: max(8px, 1.5cqw);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.home {
  position: absolute;
  z-index: 1;
  top: 11%;
  left: 11%;
  right: 11%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.6cqw;
}
.home__app {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 23%;
  box-shadow: 0 0.4cqw 1.2cqw color-mix(in srgb, var(--device-body) 35%, transparent);
}
.home__app img {
  width: 100%;
  height: 100%;
}
.home__app--photos {
  background: var(--light-surface);
  color: var(--light-primary);
}
.home__app--music {
  background: var(--light-secondary);
  color: var(--light-on-primary);
}
.home__app--weather {
  background: var(--light-primary);
  color: var(--dark-text);
}
.crease {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.crease--left {
  right: 0;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--device-body) 32%, transparent));
}
.crease--right {
  left: 0;
  background: linear-gradient(to left, transparent, color-mix(in srgb, var(--device-body) 32%, transparent));
}
.btn {
  position: absolute;
  right: calc(-1 * var(--bezel) - 2.5px);
  width: max(3px, 0.35cqw);
  border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--dark-secondary) 75%, var(--device-body));
  transform: translateZ(-1px);
}
.btn--power {
  top: 15%;
  height: 9%;
}
.btn--volume {
  top: 28%;
  height: 15%;
}
.fold__hinge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: var(--accent);
  opacity: clamp(0, calc(var(--p) * 3 - 2), 0.9);
  transform: translateZ(1px);
  pointer-events: none;
}
.stage__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.fold-toggle {
  background: transparent;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  padding-inline: var(--space-xl);
}
.fold-toggle:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.stage__hint {
  display: none;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* With JS the copy scrolls away, then the phone sticks and unfolds over a short track. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero {
    --p: 0;
  }
  /* Scroll room for the sticky phone (padding would not count as sticky travel). */
  .js .hero__sticky::after {
    content: "";
    display: block;
    height: 60svh;
  }
  .js .stage {
    position: sticky;
    top: 0;
    min-height: 100svh;
    align-content: center;
  }
  .js .stage__hint {
    display: inline;
    opacity: clamp(0, calc(1 - var(--p) * 3), 1);
  }
}

/* ---------- Film ---------- */
.film {
  padding-block: 0 var(--section);
}
.film__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: end;
}
.film__text {
  display: grid;
  gap: var(--space-lg);
}
.film__text p {
  color: var(--muted);
}
.film__frame {
  position: relative;
}
.film__frame video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--device-body);
}
.film__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.film__toggle:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
@media (max-width: 52rem) {
  .film__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Pairs ---------- */
.pairs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 2rem + 3vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 3.5rem);
}
.pair:nth-child(5n + 1) {
  grid-column: 1 / -1;
}
/* Every fifth pair is a feature row: screens large, caption in its own column. */
@media (min-width: 52.01rem) {
  .pair:nth-child(5n + 1) figure {
    grid-template-columns: minmax(0, 3fr) minmax(12rem, 1fr);
    align-items: end;
    gap: var(--space-xl) clamp(2rem, 1rem + 3vw, 4rem);
  }
  .pair:nth-child(10n + 6) figure {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
  }
  .pair:nth-child(10n + 6) figcaption {
    order: -1;
  }
  .pair:nth-child(5n + 1) figcaption {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .pair:nth-child(5n + 1) .pair__name {
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  }
  .pair:nth-child(5n + 1) .pair__try {
    margin-inline-start: 0;
    margin-top: var(--space-md);
  }
}
.pair figure {
  display: grid;
  gap: var(--space-xl);
}
/* Cover and inner screen at the same scale: 1398 vs 2670 px wide, 2034 vs 1878 px tall. */
.pair__screens {
  display: grid;
  grid-template-columns: 1398fr 2670fr;
  gap: 4%;
  align-items: end;
  direction: ltr;
}
.pair__cover,
.pair__inner {
  position: relative;
  overflow: hidden;
  border-radius: clamp(8px, 1.1vw, 16px);
  box-shadow:
    0 0 0 clamp(3px, 0.3vw, 5px) var(--device-body),
    0 24px 40px -24px var(--shadow-ink);
}
.pair__cover img,
.pair__inner img {
  width: 100%;
}
.pair__hinge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  background: var(--dark-accent);
  opacity: 0.7;
}
.pair figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}
.pair__name {
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}
.pair__meta {
  color: var(--muted);
  font-size: 0.9375rem;
}
.tier {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.tier--pro {
  color: var(--primary);
  font-weight: 600;
}
.tier .icon {
  width: 1em;
  height: 1em;
}
.pair__try {
  margin-inline-start: auto;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  background: transparent;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
  font-size: 0.9375rem;
}
.pair__try:hover {
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
@media (max-width: 52rem) {
  .pairs__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Your photo ---------- */
.photo {
  padding-top: 0;
}
.photo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: center;
  padding-top: var(--section);
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.photo__text {
  display: grid;
  gap: var(--space-xl);
  max-width: 34rem;
}
.photo__text > p:not(.photo__private) {
  color: var(--muted);
  font-size: 1.125rem;
}
.photo__private {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: 600;
}
.photo__private .icon {
  color: var(--primary);
}
.photo__shot img {
  width: min(100%, 22rem);
  margin-inline: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 70px -40px var(--shadow-ink);
}
@media (max-width: 52rem) {
  .photo__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Inside the app ---------- */
.app__nav {
  display: flex;
  gap: var(--space-sm);
}
.strip {
  overflow-x: auto;
  margin-inline-end: calc(50% - 50vw);
  padding-inline-end: calc(50vw - 50%);
  scroll-padding-inline-end: calc(50vw - 50%);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-block: var(--space-sm) var(--space-xl);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 30%, transparent) transparent;
}
.strip__list {
  display: flex;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}
.strip li {
  flex: 0 0 clamp(13rem, 10rem + 9vw, 18rem);
  scroll-snap-align: start;
}
.strip img {
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 40px -28px var(--shadow-ink);
}
@media (max-width: 40rem) {
  .section-head--row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Pro ---------- */
.pro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 5rem);
  align-items: start;
}
.pro h2 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
}
.pro__body {
  display: grid;
  gap: var(--space-xl);
  font-size: 1.125rem;
}
.pro__list {
  display: grid;
  gap: var(--space-md);
}
.pro__list li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: 600;
}
.pro__list .icon {
  color: var(--primary);
}
@media (max-width: 52rem) {
  .pro__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- More (closing) ---------- */
.more__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-xl);
}
.more__inner > p {
  color: var(--muted);
  max-width: 34rem;
  font-size: 1.125rem;
}
.shelf {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2xl);
  direction: ltr;
  padding-inline: 4%;
}
.shelf li {
  flex: 0 1 7.5rem;
  margin-inline: -1.1%;
  transform: translateY(calc(var(--o, 0) * 1rem));
}
.shelf li:nth-child(odd) {
  --o: 0.8;
}
.shelf li:nth-child(3n) {
  --o: 1.6;
}
.shelf img {
  border-radius: clamp(6px, 1vw, 14px);
  box-shadow:
    0 0 0 clamp(2px, 0.25vw, 4px) var(--device-body),
    0 20px 30px -16px var(--shadow-ink);
}

/* ---------- FAQ ---------- */
.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 1rem + 3vw, 5rem);
  align-items: start;
}
.faq__list {
  border-top: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.faq__item {
  border-bottom: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  min-height: 48px;
  padding-block: var(--space-lg);
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-inline-end: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.faq__item[open] summary::after {
  transform: translateY(15%) rotate(-135deg);
}
.faq__item p {
  padding-bottom: var(--space-xl);
  color: var(--muted);
  max-width: 40rem;
}
@media (max-width: 52rem) {
  .faq__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Press ---------- */
.press {
  padding-top: 0;
}
.press__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.press__inner > div {
  display: grid;
  gap: var(--space-sm);
}
.press h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.press p {
  color: var(--muted);
}

/* ---------- Footer ---------- */
.foot {
  padding-block: var(--space-3xl);
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  font-size: 0.9375rem;
}
.foot__inner {
  display: grid;
  gap: var(--space-xl);
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
}
.foot__brand img {
  border-radius: 6px;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
}
.foot__links a {
  display: inline-block;
  padding-block: var(--space-sm);
}
.foot__disclaimer {
  color: var(--muted);
  font-size: 0.875rem;
}

.foot__consent {
  padding: var(--space-sm) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.foot__consent[hidden] {
  display: none;
}

/* ---------- Cookie consent (only rendered when analytics ids are configured, ADR-051) ---------- */
.consent {
  position: fixed;
  inset-inline: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 20;
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--space-xl);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -12px var(--shadow-ink);
}
.consent[hidden] {
  display: none;
}
.consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg) var(--space-xl);
}
.consent__text {
  display: grid;
  flex: 1 1 22rem;
  gap: var(--space-sm);
}
.consent__title {
  font-size: 1.125rem;
}
.consent__text p {
  color: var(--muted);
  font-size: 0.9375rem;
}
.consent__text a {
  color: var(--text);
}
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
/* Accept and Reject look the same: neither choice is pushed (GDPR / KVKK). */
.consent__choice {
  min-width: 8rem;
  justify-content: center;
}

/* ---------- Root language picker, 404 ---------- */
.root {
  min-height: 100svh;
}
.root__inner {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-3xl);
}
.root__inner h1 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 2rem;
}
.root__inner h1 img {
  border-radius: 7px;
}
.root__langs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-sm);
}
.root__langs a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
}

/* ---------- Small screens ---------- */
@media (max-width: 52rem) {
  .top__nav {
    display: none;
  }
  .lang {
    margin-inline-start: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}
.section-head--row > div:first-child {
  display: grid;
  gap: var(--space-lg);
}