/* Hexvale: shared styles for every page. Plain CSS, no build step. */

@view-transition {
  navigation: auto;
}

/* Theme switch: theme.js grows the new theme from the button instead of the default cross-fade. */
.theme-switching::view-transition-old(root),
.theme-switching::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.theme-switching :not(.theme-toggle svg),
.theme-switching ::before,
.theme-switching ::after {
  transition: none !important;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;

  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #efefec;
  --border: #e4e3de;
  --text: #121211;
  --muted: #5f5e59;

  --accent: #121211;
  --accent-text: #121211;
  --on-accent: #ffffff;

  --grad-1: #9a4732;
  --grad-2: #b8862f;
  --grad-3: #2f6b4f;
  --glow-1: rgb(154 71 50 / 0.2);
  --glow-2: rgb(47 107 79 / 0.17);
  --glow-3: rgb(96 110 150 / 0.14);
  --grain: 0.05;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -12px rgb(0 0 0 / 0.14), 0 40px 80px -40px rgb(0 0 0 / 0.18);

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", "Yu Gothic", "Malgun Gothic", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", sans-serif;
  --font-serif: ui-serif, "New York", "Iowan Old Style", Charter, "Bitstream Charter", "Palatino Linotype", Georgia, "Times New Roman", "Songti SC", "Hiragino Mincho ProN", "AppleMyungjo", "Noto Serif CJK SC", "Noto Serif CJK JP", "Noto Serif CJK KR", serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", "Yu Gothic", "Malgun Gothic", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", sans-serif;
  --font-heading: var(--font-sans);

  --gutter: 16px;
  --max: 1160px;
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 32px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --hex-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.713 8v16l-13.857 8L0 24V8zM13.856 32v16' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* Orlo: the app's warm palette and serif headings. */
.pal-orlo {
  --bg: #f6f0ea;
  --surface: #fcf8f4;
  --surface-2: #efe5dc;
  --border: #e8dbd0;
  --text: #2e211c;
  --muted: #6e5d55;
  --accent: #9a4732;
  --accent-text: #9a4732;
  --on-accent: #ffffff;
  --glow-1: rgb(154 71 50 / 0.2);
  --glow-2: rgb(214 150 110 / 0.26);
  --glow-3: rgb(234 210 190 / 0.5);
  --wm-dot: #b4553b;
  --font-heading: var(--font-serif);
}

/* Fitness: placeholder accent until the app has a name. */
.pal-fitness {
  --bg: #eef3ef;
  --surface: #f8fbf9;
  --surface-2: #e2ece5;
  --border: #d7e4db;
  --text: #10241a;
  --muted: #4c6155;
  --accent: #2f6b4f;
  --accent-text: #2f6b4f;
  --on-accent: #ffffff;
  --glow-1: rgb(47 107 79 / 0.22);
  --glow-2: rgb(120 190 150 / 0.24);
  --glow-3: rgb(190 220 200 / 0.4);
  --font-heading: var(--font-rounded);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0a;
    --surface: #141413;
    --surface-2: #1c1c1a;
    --border: #262624;
    --text: #f3f2ee;
    --muted: #a3a19b;
    --accent: #f3f2ee;
    --accent-text: #f3f2ee;
    --on-accent: #0b0b0a;
    --grad-1: #e5977c;
    --grad-2: #e3c06f;
    --grad-3: #7fcaa5;
    --glow-1: rgb(200 100 70 / 0.24);
    --glow-2: rgb(70 170 120 / 0.18);
    --glow-3: rgb(110 130 200 / 0.16);
    --grain: 0.07;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
  }

  :root:not([data-theme="light"]) .pal-orlo {
    --bg: #140f0d;
    --surface: #1e1714;
    --surface-2: #281e1a;
    --border: #34271f;
    --text: #f3e9e2;
    --muted: #bba99f;
    --accent: #b4553b;
    --accent-text: #e5977c;
    --wm-dot: #e0805f;
    --glow-1: rgb(180 85 59 / 0.3);
    --glow-2: rgb(229 151 124 / 0.14);
    --glow-3: rgb(120 70 50 / 0.3);
  }

  :root:not([data-theme="light"]) .pal-fitness {
    --bg: #0c1410;
    --surface: #121d17;
    --surface-2: #18271f;
    --border: #213429;
    --text: #e6f2ea;
    --muted: #9db8a8;
    --accent: #2f7a57;
    --accent-text: #7fcaa5;
    --glow-1: rgb(47 122 87 / 0.32);
    --glow-2: rgb(127 202 165 / 0.14);
    --glow-3: rgb(30 80 60 / 0.4);
  }
}

:root[data-theme="dark"] {
  --bg: #0b0b0a;
  --surface: #141413;
  --surface-2: #1c1c1a;
  --border: #262624;
  --text: #f3f2ee;
  --muted: #a3a19b;
  --accent: #f3f2ee;
  --accent-text: #f3f2ee;
  --on-accent: #0b0b0a;
  --grad-1: #e5977c;
  --grad-2: #e3c06f;
  --grad-3: #7fcaa5;
  --glow-1: rgb(200 100 70 / 0.24);
  --glow-2: rgb(70 170 120 / 0.18);
  --glow-3: rgb(110 130 200 / 0.16);
  --grain: 0.07;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
}

:root[data-theme="dark"] .pal-orlo {
  --bg: #140f0d;
  --surface: #1e1714;
  --surface-2: #281e1a;
  --border: #34271f;
  --text: #f3e9e2;
  --muted: #bba99f;
  --accent: #b4553b;
  --accent-text: #e5977c;
  --wm-dot: #e0805f;
  --glow-1: rgb(180 85 59 / 0.3);
  --glow-2: rgb(229 151 124 / 0.14);
  --glow-3: rgb(120 70 50 / 0.3);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

.img-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .img-light {
    display: none;
  }

  :root:not([data-theme="light"]) .img-dark {
    display: block;
  }
}

:root[data-theme="dark"] .img-light {
  display: none;
}

:root[data-theme="dark"] .img-dark {
  display: block;
}

:root[data-theme="dark"] .pal-fitness {
  --bg: #0c1410;
  --surface: #121d17;
  --surface-2: #18271f;
  --border: #213429;
  --text: #e6f2ea;
  --muted: #9db8a8;
  --accent: #2f7a57;
  --accent-text: #7fcaa5;
  --glow-1: rgb(47 122 87 / 0.32);
  --glow-2: rgb(127 202 165 / 0.14);
  --glow-3: rgb(30 80 60 / 0.4);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Film grain over everything; purely decorative. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: var(--noise);
  opacity: var(--grain);
  mix-blend-mode: overlay;
}

main {
  flex: 1 0 auto;
}

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

img {
  height: auto;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: color-mix(in srgb, var(--accent-text) 24%, transparent);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h2 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.375rem);
}

h3 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.pal-orlo h1,
.pal-orlo h2 {
  font-weight: 600;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 8px;
  left: var(--gutter);
  z-index: 200;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 50;
  isolation: isolate;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header::before {
    border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}

@media (min-width: 720px) {
  .site-header {
    position: sticky;
    top: 0;
  }
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  min-height: 68px;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.brand .sep {
  color: var(--muted);
  font-weight: 400;
  opacity: 0.6;
}

.brand .product {
  color: var(--text);
}

.brand .product .wordmark {
  height: 1.15em;
}

.logo {
  flex: none;
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: url("/assets/logo/hexvale-mark.svg") center / contain no-repeat;
  mask: url("/assets/logo/hexvale-mark.svg") center / contain no-repeat;
}

/* Orlo wordmark: letters follow the text colour, the r keeps its terracotta dot. */
.wordmark {
  display: block;
  width: auto;
  height: 1em;
  overflow: visible;
}

.wordmark .wm-dot {
  fill: var(--wm-dot, #b4553b);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-left: auto;
  font-size: 0.9375rem;
}

.nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-text);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Language switcher: <details> without JS, a second click on the summary closes the list. */
.lang {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.lang summary {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.2s;
}

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

.lang summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
  transition: rotate 0.2s var(--ease), margin 0.2s var(--ease);
}

.lang[open] summary::after {
  margin-top: 3px;
  rotate: 225deg;
}

.lang summary:hover {
  border-color: var(--muted);
}

.lang ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 210px;
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  list-style: none;
}

.lang a {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.lang a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.lang a[aria-current="page"] {
  background: var(--text);
  color: var(--bg);
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.3s var(--ease);
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--text) 30%, var(--border));
  color: var(--text);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.3s, rotate 0.5s var(--ease), scale 0.5s var(--ease);
}

/* The icon shows the current theme, so it is right before theme.js runs too. */
.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  rotate: -90deg;
  scale: 0.5;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  rotate: 0deg;
  scale: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    opacity: 0;
    rotate: -90deg;
    scale: 0.5;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    opacity: 1;
    rotate: 0deg;
    scale: 1;
  }
}

@media (max-width: 719px) {
  .header-inner {
    column-gap: 12px;
  }

  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .header-tools {
    margin-left: auto;
  }
}

@media (max-width: 399px) {
  .brand,
  .brand a {
    gap: 7px;
  }
}

/* ---------- Shared pieces ---------- */

.section {
  padding-block: clamp(56px, 9vw, 120px);
}

.section + .section {
  padding-top: 0;
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lead {
  max-width: 36em;
  margin-top: 22px;
  color: var(--muted);
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  line-height: 1.55;
}

.note {
  color: var(--muted);
  font-size: 0.9375rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 14px 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-text) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-text) 9%, transparent);
  color: var(--accent-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .status::before {
    animation: ping 2.4s var(--ease) infinite;
  }
}

@keyframes ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.3;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.25s, box-shadow 0.25s, color 0.25s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn .arrow {
  transition: transform 0.25s var(--ease);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--text) 60%, transparent);
}

.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 12px 32px -12px var(--accent);
}

.btn-ghost {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

.btn-ghost:hover {
  background: var(--surface);
}

.pal-orlo .btn {
  border-radius: 18px;
}

/* Glow and hexagon pattern behind heroes. */
.glow {
  position: absolute;
  inset: -12% -8% -18%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(36% 46% at 16% 30%, var(--glow-1), transparent 70%),
    radial-gradient(34% 44% at 86% 16%, var(--glow-2), transparent 70%),
    radial-gradient(48% 42% at 62% 88%, var(--glow-3), transparent 72%);
  filter: blur(28px);
}

@media (prefers-reduced-motion: no-preference) {
  .glow {
    animation: drift 20s ease-in-out infinite alternate;
  }
}

@keyframes drift {
  to { transform: translate3d(2%, -4%, 0) scale(1.08) rotate(3deg); }
}

.hexgrid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--text);
  opacity: 0.09;
  -webkit-mask: var(--hex-tile) 50% 0 / 41.57px 72px repeat, radial-gradient(60% 70% at 50% 35%, #000 10%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask: var(--hex-tile) 50% 0 / 41.57px 72px repeat, radial-gradient(60% 70% at 50% 35%, #000 10%, transparent 72%);
  mask-composite: intersect;
}

/* Entrance and scroll reveal. Content is fully visible without them. */
@media (prefers-reduced-motion: no-preference) {
  .rise > * {
    animation: rise 0.9s var(--ease) both;
  }

  .rise > :nth-child(2) { animation-delay: 0.08s; }
  .rise > :nth-child(3) { animation-delay: 0.16s; }
  .rise > :nth-child(4) { animation-delay: 0.24s; }
  .rise > :nth-child(5) { animation-delay: 0.32s; }
  .rise > :nth-child(6) { animation-delay: 0.4s; }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
}

/* ---------- Studio home ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(72px, 13vw, 176px) clamp(24px, 4vw, 64px);
}

.display {
  max-width: 13em;
  font-size: clamp(2.75rem, 1rem + 7vw, 6.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.048em;
}

.display em {
  padding-inline: 0.04em 0.08em;
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.025em;
  background-image: linear-gradient(100deg, var(--grad-1), var(--grad-2), var(--grad-3));
  background-image: linear-gradient(in oklch 100deg, var(--grad-1), var(--grad-2), var(--grad-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lead {
  margin-top: 28px;
}

.hero .wrap {
  position: relative;
}

/* Ceramic hexagons with the Hexvale mark; edges dissolve into the page. */
.hero-art {
  display: block;
  width: min(88vw, 420px);
  margin: 40px auto 0;
  pointer-events: none;
}

.hero-art img {
  width: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
}

@media (min-width: 1000px) {
  .hero .wrap > :not(.hero-art) {
    max-width: 680px;
  }

  .hero .display:lang(ru) {
    font-size: clamp(2.75rem, 1rem + 5.4vw, 5.5rem);
  }

  .hero-art {
    position: absolute;
    top: 50%;
    right: 0;
    width: 460px;
    margin: 0;
    translate: 0 -50%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art img {
    animation: drift-art 10s ease-in-out infinite;
  }

  @supports (animation-timeline: scroll()) {
    .hero-art {
      animation: parallax linear both;
      animation-timeline: scroll();
      animation-range: 0 100vh;
    }
  }
}

@keyframes drift-art {
  50% { transform: translateY(-12px) rotate(1.2deg); }
}

@keyframes parallax {
  to { transform: translateY(70px); }
}

/* App cards */

.apps {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .apps {
    gap: 20px;
  }
}

/* Featured Orlo: Orlo's own palette in both themes, like the fitness card. */
.showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.showcase:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

@media (min-width: 900px) {
  .showcase {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
  }
}

.showcase .glow {
  inset: -30% -10%;
}

.showcase-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.showcase-name {
  margin-top: 10px;
  font-size: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);
  line-height: 1;
}

.showcase-name a {
  color: var(--text);
}

/* The whole card opens the app page, as the fitness card does; the button stays above the overlay. */
.showcase-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.showcase:hover .btn .arrow {
  transform: translateX(3px);
}

.showcase-name .wordmark {
  height: 1em;
}

.showcase-tagline {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 550;
  letter-spacing: -0.02em;
}

.showcase-text {
  max-width: 34em;
  color: var(--muted);
}

.showcase .actions {
  position: relative;
  z-index: 3;
  margin-top: 12px;
}

.showcase-device .phone {
  width: min(270px, 66vw);
}

@media (min-width: 900px) {
  .app-wide {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }

  .app-wide .app-art {
    height: auto;
    min-height: 320px;
  }
}

.app-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.app-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.app-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 260px;
  overflow: hidden;
}

.app-art .glow {
  inset: -20%;
  filter: blur(18px);
}

.photo-art img,
.soon-photo img,
.band-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-art img {
  object-position: center 62%;
  transition: transform 1.2s var(--ease);
}

.app-card:hover .photo-art img {
  transform: scale(1.05);
}

.app-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px 30px;
}

@media (min-width: 720px) {
  .app-body {
    padding: 36px 36px 40px;
  }
}

.app-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.app-head .status {
  white-space: nowrap;
}

.app-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 22.37%;
  box-shadow: 0 10px 22px -12px rgb(42 30 26 / 0.6);
}

/* The Orlo icon is dark brown: on a dark page it needs a hairline edge, otherwise it melts into the background. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-icon,
  :root:not([data-theme="light"]) .o-icon {
    box-shadow: 0 0 0 1px rgb(255 240 230 / 0.14), 0 10px 22px -12px rgb(0 0 0 / 0.8);
  }
}

:root[data-theme="dark"] .app-icon,
:root[data-theme="dark"] .o-icon {
  box-shadow: 0 0 0 1px rgb(255 240 230 / 0.14), 0 10px 22px -12px rgb(0 0 0 / 0.8);
}

.app-name .wordmark {
  height: 0.85em;
  color: var(--text);
}

.app-name {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

.app-name a {
  color: var(--text);
  text-decoration: none;
}

/* The title link covers the whole card. */
.app-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.app-body > p:not(.status, .app-link) {
  color: var(--muted);
}

.app-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--accent-text);
  font-weight: 600;
}

.app-link .arrow {
  transition: transform 0.3s var(--ease);
}

.app-card:hover .app-link .arrow {
  transform: translateX(4px);
}

@supports selector(:has(a)) {
  .app-card:has(.app-name a:focus-visible),
  .showcase:has(.showcase-name a:focus-visible) {
    outline: 2px solid var(--accent-text);
    outline-offset: 4px;
  }

  .app-name a:focus-visible,
  .showcase-name a:focus-visible {
    outline: none;
  }
}

/* The name */

.about {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 28px;
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.about .hexgrid {
  opacity: 0.06;
}

@media (min-width: 720px) {
  .about {
    grid-template-columns: auto 1fr;
    gap: clamp(40px, 6vw, 80px);
  }
}

.about-mark {
  width: clamp(88px, 14vw, 176px);
  aspect-ratio: 1;
  color: var(--text);
}

.about-mark .logo {
  display: block;
  width: 100%;
  height: 100%;
}

.name-parts {
  display: grid;
  gap: 22px;
  margin: 28px 0 0;
}

@media (min-width: 720px) {
  .name-parts {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

.name-parts dt {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.name-parts div:first-child dt {
  color: var(--grad-1);
}

.name-parts div:last-child dt {
  color: var(--grad-3);
}

.name-parts dd {
  max-width: 26em;
  margin: 8px 0 0;
  color: var(--muted);
}

/* Contact */

.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 7vw, 88px) clamp(24px, 6vw, 80px);
  border-radius: var(--radius-lg);
  background: #121211;
  color: #f3f2ee;
  --text: #f3f2ee;
  --muted: #b3b1ab;
  --border: #2c2c2a;
  --accent-text: #f3f2ee;
  --glow-1: rgb(200 100 70 / 0.38);
  --glow-2: rgb(70 170 120 / 0.28);
  --glow-3: rgb(110 130 200 / 0.24);
}

.pal-orlo .contact {
  background: #2a1e1a;
  --border: #4a3830;
  --muted: #cdb8ab;
  --glow-1: rgb(200 100 70 / 0.42);
  --glow-2: rgb(240 169 143 / 0.16);
  --glow-3: rgb(120 70 50 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contact {
    background: #161615;
    box-shadow: inset 0 0 0 1px #262624;
  }

  :root:not([data-theme="light"]) .pal-orlo .contact {
    background: #1d1512;
    box-shadow: inset 0 0 0 1px #34271f;
  }
}

:root[data-theme="dark"] .contact {
  background: #161615;
  box-shadow: inset 0 0 0 1px #262624;
}

:root[data-theme="dark"] .pal-orlo .contact {
  background: #1d1512;
  box-shadow: inset 0 0 0 1px #34271f;
}

.contact .glow {
  inset: -30% -20%;
}

.contact .hexgrid {
  opacity: 0.12;
}

.contact h2 {
  max-width: 14em;
  color: #fbfaf7;
}

.big-email {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em;
  margin-top: clamp(28px, 4vw, 48px);
  padding-bottom: 6px;
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3)) 0 100% / 0 3px no-repeat;
  color: #fbfaf7;
  font-size: clamp(1.5rem, 0.45rem + 4.7vw, 4.75rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: background-size 0.6s var(--ease);
}

.big-email:hover {
  background-size: 100% 3px;
}

.big-email .arrow {
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform 0.4s var(--ease);
}

.big-email:hover .arrow {
  transform: translate(4px, -4px);
}

.contact .note {
  margin-top: 28px;
}

.contact .note a {
  color: #fbfaf7;
}

/* ---------- Orlo illustrations ---------- */

.phone {
  position: relative;
  width: min(300px, 70vw);
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  padding: 10px;
  border-radius: 50px;
  background: linear-gradient(150deg, #4a372f, #1a1210 45%, #2b201c);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.35),
    0 50px 100px -40px rgb(70 30 15 / 0.55),
    0 24px 48px -24px rgb(70 30 15 / 0.45);
}

.phone::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 50%;
  z-index: 5;
  width: 30%;
  height: 25px;
  border-radius: 20px;
  background: #090605;
  transform: translateX(-50%);
}

/* The screen itself is dark: a light screen showed through the anti-aliased rounded edge of the photo
   as a thin white outline. The light "scanned" background is a layer inset by 1 px, so it never reaches that edge. */
.phone-screen {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
  background: #120c0a;
}

.phone-screen::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 39px;
  background: #efe6dd;
}

.desk {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(20 12 8 / 0.1), rgb(20 12 8 / 0.35)),
    url("/assets/img/orlo-wood.webp") center / cover,
    #3a281f;
}

.sheet {
  position: relative;
  width: 64%;
  aspect-ratio: 1 / 1.414;
  border-radius: 2px;
  background: #fffdf8;
  box-shadow: 0 18px 40px -16px rgb(30 15 10 / 0.6), 0 2px 6px rgb(30 15 10 / 0.18);
}

/* Text lines, a title and a stamp, drawn with gradients. */
.sheet::before {
  content: "";
  position: absolute;
  inset: 12% 13% 34%;
  background:
    linear-gradient(#2e211c, #2e211c) 0 0 / 42% 3.2% no-repeat,
    linear-gradient(#b9aea4, #b9aea4) 0 7% / 30% 2% no-repeat,
    linear-gradient(#cfc5bb, #cfc5bb) 50% 22% / 58% 4% no-repeat,
    repeating-linear-gradient(to bottom, #ddd3c9 0 3%, transparent 3% 9%) 0 100% / 100% 62% no-repeat;
}

.sheet::after {
  content: "";
  position: absolute;
  right: 15%;
  bottom: 9%;
  width: 24%;
  aspect-ratio: 1;
  border: 2px solid rgb(70 90 170 / 0.5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgb(70 90 170 / 0.12);
}

.frame {
  position: absolute;
  inset: -3px;
  border: 2px solid #d9765a;
  border-radius: 3px;
}

.frame i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid #d9765a;
  border-radius: 50%;
  background: #fff;
}

.frame i:nth-child(1) { top: -8px; left: -8px; }
.frame i:nth-child(2) { top: -8px; right: -8px; }
.frame i:nth-child(3) { bottom: -8px; right: -8px; }
.frame i:nth-child(4) { bottom: -8px; left: -8px; }

.tilted {
  transform: perspective(700px) rotateX(20deg) rotateY(-12deg) rotateZ(-7deg) scale(0.86);
}

.export-pill {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 6%;
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 15px;
  background: #9a4732;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 24px -10px rgb(154 71 50 / 0.8);
}

/* Hero phone: camera finds the sheet, straightens it, offers export. */
.live .desk,
.live .frame {
  opacity: 1;
}

.live .export-pill {
  opacity: 0;
}

.live .sheet {
  transform: perspective(700px) rotateX(20deg) rotateY(-12deg) rotateZ(-7deg) scale(0.86);
}

@media (prefers-reduced-motion: no-preference) {
  .live .desk { animation: live-desk 9s var(--ease) infinite; }
  .live .frame { animation: live-frame 9s var(--ease) infinite; }
  .live .sheet { animation: live-sheet 9s var(--ease) infinite; }
  .live .export-pill { animation: live-pill 9s var(--ease) infinite; }
}

@keyframes live-desk {
  0%, 32% { opacity: 1; }
  46%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes live-frame {
  0%, 30% { opacity: 1; }
  40%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes live-sheet {
  0%, 32% { transform: perspective(700px) rotateX(20deg) rotateY(-12deg) rotateZ(-7deg) scale(0.86); }
  48%, 90% { transform: perspective(700px) translateY(-7%) scale(1.08); }
  100% { transform: perspective(700px) rotateX(20deg) rotateY(-12deg) rotateZ(-7deg) scale(0.86); }
}

@keyframes live-pill {
  0%, 54% { opacity: 0; transform: translateY(18px); }
  62%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(18px); }
}

.device {
  position: relative;
  isolation: isolate;
}

.device::before {
  content: "";
  position: absolute;
  inset: 8% -10% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-1), transparent);
  filter: blur(30px);
}

@media (prefers-reduced-motion: no-preference) {
  .device .phone {
    animation: float 7s ease-in-out infinite;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(-1.5deg); }
}

/* ---------- Orlo page ---------- */

.o-hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(40px, 7vw, 96px) clamp(64px, 9vw, 128px);
}

.o-hero-grid {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 900px) {
  .o-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
  }
}

.o-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.o-icon {
  flex: none;
  width: clamp(64px, 6vw + 32px, 96px);
  height: auto;
  border-radius: 22.37%;
  box-shadow: 0 18px 36px -16px rgb(42 30 26 / 0.55);
}

.o-wordmark {
  margin-top: 30px;
  font-size: clamp(4.25rem, 2.2rem + 8.5vw, 8.75rem);
  line-height: 1;
}

.o-wordmark .wordmark {
  height: 1em;
  color: var(--text);
}

.o-tagline {
  margin-top: 22px;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem);
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.o-hero .tags {
  margin-top: 30px;
}

.steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.card {
  padding: 10px 10px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card > :not(.art) {
  margin-inline: 18px;
}

.card h3 {
  margin-bottom: 8px;
}

.card > p:not(.step-num) {
  color: var(--muted);
}

.art {
  position: relative;
  display: grid;
  place-items: center;
  height: 240px;
  margin-bottom: 26px;
  overflow: hidden;
  border-radius: calc(var(--radius) - 10px);
  background: var(--surface-2);
}

.art .sheet {
  width: auto;
  height: 74%;
}

.art.desk-bg .desk {
  z-index: 0;
}

.art.desk-bg .sheet {
  z-index: 1;
}

.paper-bg {
  background: radial-gradient(70% 70% at 50% 40%, #fbf5ef, #ecdfd3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .paper-bg {
    background: radial-gradient(70% 70% at 50% 40%, #3a2c25, #211814);
  }
}

:root[data-theme="dark"] .paper-bg {
  background: radial-gradient(70% 70% at 50% 40%, #3a2c25, #211814);
}

.step-num {
  margin-bottom: 10px;
  color: var(--accent-text);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
}

.size-art {
  text-align: center;
}

.size-art .big {
  font-family: var(--font-serif);
  font-size: 3.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.size-art .big span {
  font-size: 0.55em;
}

.size-art .small {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Export spotlight */

.spotlight {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (min-width: 900px) {
  .spotlight {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.spotlight .glow {
  inset: -30% -30% -30% 30%;
  opacity: 0.8;
}

.meter {
  padding: 28px 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.meter-label {
  color: var(--muted);
  font-size: 0.9375rem;
}

.meter-value {
  margin: 12px 0 8px;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  text-align: center;
}

.mv-unit {
  font-size: 0.5em;
  letter-spacing: -0.02em;
}

.mv-num {
  font-variant-numeric: tabular-nums;
}

.meter-meta {
  color: var(--muted);
  font-size: 0.9375rem;
  text-align: center;
}

.mv-level {
  width: fit-content;
  margin: 14px auto 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.meter-scale {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 4px;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Track filled up to --p (set by orlo-meter.js). The five stops sit under the track, inset by the thumb radius
   so they line up with the thumb's travel; the track covers their middle, so they read as dots on the line. */
.meter-dots {
  position: relative;
  height: 0;
  margin: 0 15px;
}

.meter-dots i {
  position: absolute;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  translate: -50% -50%;
  transition: background-color 0.25s;
}

.meter-dots i:nth-child(2) { left: 25%; }
.meter-dots i:nth-child(3) { left: 50%; }
.meter-dots i:nth-child(4) { left: 75%; }
.meter-dots i:nth-child(5) { left: 100%; }

.meter-dots i.on {
  background: var(--accent);
}

.meter-range {
  --p: 75%;
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}

.meter-range:focus {
  outline: none;
}

.meter-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) var(--p), var(--border) var(--p));
}

.meter-range::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: var(--border);
}

.meter-range::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
}

.meter-range::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -13px;
  border: 4px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 4px 14px -4px var(--accent);
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}

.meter-range::-moz-range-thumb {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border: 4px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 4px 14px -4px var(--accent);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}

.meter-range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.meter-range:active::-moz-range-thumb {
  transform: scale(1.12);
}

.meter-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-text);
}

.meter-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-text);
}

@media (prefers-reduced-motion: no-preference) {
  .meter:not(.is-touched) .meter-range::-webkit-slider-thumb {
    animation: thumb 3s ease-in-out infinite;
  }

  .meter:not(.is-touched) .meter-range::-moz-range-thumb {
    animation: thumb 3s ease-in-out infinite;
  }
}

@keyframes thumb {
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent); }
}

/* Feature tiles */

.bento {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.photos {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 8px;
}

.photos i {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  background: linear-gradient(150deg, #e9d8c8, #c9ab92);
}

.photos i:nth-child(2) { background: linear-gradient(150deg, #d8c3ae, #a98466); }
.photos i:nth-child(3) { background: linear-gradient(150deg, #f1e5d8, #d4b8a0); }
.photos i:nth-child(4) { background: linear-gradient(150deg, #cdb59f, #8f6c55); }
.photos i:nth-child(5) { background: linear-gradient(150deg, #efe3d6, #c7a68c); }
.photos i:nth-child(6) { background: linear-gradient(150deg, #dcc9b6, #b39276); }

.photos i::before {
  content: "";
  position: absolute;
  inset: 22% 26%;
  border-radius: 1px;
  background: rgb(255 253 248 / 0.92);
  box-shadow: 0 3px 8px -3px rgb(30 15 10 / 0.4);
  transform: rotate(-6deg);
}

.photos i:nth-child(even)::before {
  transform: rotate(5deg);
}

.photos .sel {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.photos .sel::after {
  content: attr(data-n);
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--surface-2);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
}

.ocr {
  position: relative;
  width: 72%;
  padding: 22px 20px;
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 0 14px 30px -14px rgb(30 15 10 / 0.45);
}

.ocr i {
  display: block;
  height: 7px;
  margin-bottom: 11px;
  border-radius: 4px;
  background: #ddd3c9;
}

.ocr i:nth-child(1) { width: 92%; }
.ocr i:nth-child(2) { width: 100%; }
.ocr i:nth-child(3) { width: 70%; }
.ocr i:nth-child(4) { width: 86%; margin-bottom: 0; }

.ocr .hl {
  position: relative;
  background: #2e211c;
  box-shadow: 0 0 0 5px rgb(154 71 50 / 0.22);
}

.ocr .hl::before,
.ocr .hl::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 2px;
  height: 23px;
  background: #9a4732;
}

.ocr .hl::before { left: -5px; }
.ocr .hl::after { right: -5px; }

.ocr .lang-chip {
  position: absolute;
  top: -14px;
  right: -14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Cloud: a page travels up into the cloud. */
.cloud-art {
  display: grid;
  justify-items: center;
}

.cloud {
  position: relative;
  width: 128px;
  height: 50px;
  margin-top: 28px;
  border-radius: 25px;
  background: #fffdf8;
  filter: drop-shadow(0 12px 16px rgb(30 15 10 / 0.28));
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  top: -30px;
  left: 18px;
  width: 60px;
  height: 60px;
}

.cloud::after {
  top: -18px;
  left: 62px;
  width: 46px;
  height: 46px;
}

.cloud-art .sync {
  position: relative;
  width: 2px;
  height: 34px;
  margin: 12px 0 10px;
  background: repeating-linear-gradient(to bottom, var(--accent-text) 0 5px, transparent 5px 10px);
}

.cloud-art .sync::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 9px;
  height: 9px;
  border: solid var(--accent-text);
  border-width: 2px 0 0 2px;
  transform: translateX(-50%) rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .cloud-art .sync {
    animation: upload 0.9s linear infinite;
  }
}

@keyframes upload {
  to { background-position: 0 -10px; }
}

.art .cloud-art .sheet {
  width: 52px;
  height: auto;
}

/* Privacy band */

.o-privacy {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(80px, 12vw, 160px);
  background: #2a1e1a;
  color: #f6ece5;
  --text: #fff7f1;
  --muted: #cdb8ab;
  --accent-text: #f0a98f;
  --surface: #3a2b25;
  --border: #54403a;
  --glow-1: rgb(200 100 70 / 0.35);
  --glow-2: rgb(240 169 143 / 0.12);
  --glow-3: rgb(120 70 50 / 0.45);
}

.band-photo {
  z-index: -3;
  object-position: 70% center;
}

/* On narrow screens the sheet in the photo lands right under the text, so the photo is dimmed more. */
.o-privacy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(30 21 17 / 0.95), rgb(30 21 17 / 0.88));
}

/* On wide screens the photo sits on the right and fades into the band. */
@media (min-width: 900px) {
  .band-photo {
    left: 40%;
    width: 60%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%);
    mask-image: linear-gradient(90deg, transparent, #000 50%);
  }

  .o-privacy::before {
    background: linear-gradient(90deg, rgb(30 21 17 / 0.3) 40%, rgb(30 21 17 / 0.05));
  }

  .o-privacy h2 {
    max-width: 10em;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .o-privacy {
    background: #1d1512;
    box-shadow: inset 0 1px 0 #34271f, inset 0 -1px 0 #34271f;
  }
}

:root[data-theme="dark"] .o-privacy {
  background: #1d1512;
  box-shadow: inset 0 1px 0 #34271f, inset 0 -1px 0 #34271f;
}

.o-privacy h2 {
  max-width: 13em;
  color: var(--text);
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);
  letter-spacing: -0.04em;
}

.strikes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 34px;
  margin: clamp(36px, 5vw, 56px) 0;
  padding: 0;
  list-style: none;
  color: rgb(246 236 229 / 0.62);
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.strikes li {
  position: relative;
}

.strikes li::after {
  content: "";
  position: absolute;
  top: 54%;
  left: -6%;
  right: -6%;
  height: 0.07em;
  min-height: 3px;
  border-radius: 4px;
  background: var(--accent-text);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .strikes li::after {
      animation: strike linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 30%;
    }

    .strikes li:nth-child(2)::after { animation-range: entry 80% cover 33%; }
    .strikes li:nth-child(3)::after { animation-range: entry 100% cover 36%; }
    .strikes li:nth-child(4)::after { animation-range: cover 20% cover 39%; }
  }
}

@keyframes strike {
  from { transform: scaleX(0); }
}

.o-privacy .lead {
  max-width: 34em;
}

.o-privacy .actions a {
  color: inherit;
}

/* Closing call to action */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 8vw, 96px) clamp(24px, 6vw, 80px);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, #a24d36, #7a3424 60%, #5e2618);
  color: #fff;
  text-align: center;
  --glow-1: rgb(255 190 160 / 0.35);
  --glow-2: rgb(255 220 190 / 0.18);
  --glow-3: rgb(60 20 10 / 0.5);
}

.cta .hexgrid {
  background: #fff;
  opacity: 0.1;
}

.cta h2 {
  max-width: 12em;
  margin-inline: auto;
  color: #fff;
}

.cta p {
  max-width: 30em;
  margin: 20px auto 0;
  color: rgb(255 255 255 / 0.82);
  font-size: 1.125rem;
}

.cta .actions {
  justify-content: center;
}

.cta .btn-light {
  background: #fff;
  color: #7a3424;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5);
}

.cta .btn-outline {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
}

.cta .btn-outline:hover {
  background: rgb(255 255 255 / 0.1);
}

/* ---------- Documents: policies and support ---------- */

.doc-hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(56px, 9vw, 128px) clamp(28px, 4vw, 56px);
}

.doc-hero .glow {
  opacity: 0.7;
}

.doc-hero h1 {
  font-size: clamp(2.375rem, 1.3rem + 4.4vw, 4.75rem);
  letter-spacing: -0.045em;
}

/* «конфиденциальности» has to fit a 360 px screen in one piece. */
.doc-hero h1:lang(ru) {
  font-size: clamp(1.875rem, 0.9rem + 4.4vw, 4.75rem);
}

.meta {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.doc-body {
  padding-bottom: clamp(56px, 8vw, 104px);
}

.doc-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 960px) {
  .doc-grid {
    grid-template-columns: 220px minmax(0, 700px);
    gap: 72px;
  }
}

.toc {
  display: none;
}

@media (min-width: 960px) {
  .toc {
    position: sticky;
    top: 104px;
    display: block;
    align-self: start;
  }
}

.toc p {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.toc ol {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
  list-style: none;
}

.toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 16px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.toc a:hover {
  border-left-color: var(--accent-text);
  color: var(--text);
}

.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin: 56px 0 14px;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  letter-spacing: -0.025em;
}

.prose p,
.prose ul {
  margin: 0 0 16px;
}

.prose ul:not(.checks) {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 6px;
}

.summary {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.summary h2 {
  margin: 0 0 22px;
}

.checks {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 38px;
  line-height: 1.5;
}

.checks li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
}

.checks li::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 9px;
  width: 6px;
  height: 11px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Support */

.support-grid {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 960px) {
  .support-grid {
    grid-template-columns: 380px 1fr;
    gap: 64px;
  }

  .support-grid .contact {
    position: sticky;
    top: 104px;
  }
}

.support-grid .contact {
  padding: clamp(28px, 4vw, 40px);
}

.support-grid .contact .kicker {
  color: var(--muted);
}

.support-grid .big-email {
  margin-top: 6px;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
}

.support-grid .contact .note {
  margin-top: 20px;
}

.faq-title {
  margin-bottom: 28px;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

.faq {
  display: grid;
  gap: 12px;
}

.faq details {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  transition: box-shadow 0.3s var(--ease);
}

.faq details[open] {
  box-shadow: var(--shadow);
}

.faq summary {
  position: relative;
  padding: 20px 60px 20px 22px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

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

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--muted);
  transition: transform 0.3s var(--ease);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
}

.faq details p {
  padding: 0 22px 22px;
  color: var(--muted);
}

.faq + .note {
  margin-top: 28px;
}

/* ---------- Coming soon ---------- */

.soon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(82svh, 820px);
  overflow: clip;
  padding-block: 96px;
  text-align: center;
}

.soon-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.soon-photo img {
  object-position: center 72%;
}

.soon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(62% 48% at 50% 46%, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 72%, transparent) 55%, transparent 88%);
}

.soon .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.soon-title {
  margin-top: 26px;
  font-family: var(--font-rounded);
  font-size: clamp(3.75rem, 1.2rem + 11vw, 10rem);
  padding-bottom: 0.1em;
  font-weight: 750;
  line-height: 0.92;
  letter-spacing: -0.05em;
  background-image: linear-gradient(180deg, var(--text) 30%, var(--accent-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.soon .lead {
  margin-inline: auto;
}

/* 404: the same centred layout without a photo; one page for both languages. */
.soon-plain .soon-title {
  font-size: clamp(2.75rem, 1rem + 6vw, 5.75rem);
}

.soon-plain .lead + .lead {
  margin-top: 6px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  gap: 36px;
  padding-block: 56px 40px;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}

.footer-brand p {
  max-width: 22em;
  margin-top: 14px;
}

.footer-title {
  margin-bottom: 14px;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--muted);
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color 0.2s;
}

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

.site-footer .brand a {
  color: var(--text);
}

.footer-bottom {
  padding-block: 22px 36px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
}

.footer-giant {
  overflow: hidden;
  height: 0.74em;
  margin-top: 8px;
  font-size: clamp(4.5rem, 22vw, 20rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.065em;
  text-align: center;
  user-select: none;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--text) 22%, transparent), transparent 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Feature art */

/* ---------- Languages ---------- */

/* Note at the top of translated privacy policies: the English text prevails. */
.tr-note {
  margin: 0 0 28px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-text);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tr-note a {
  color: var(--accent-text);
}

/* 404: one link home per language, no JS. */
.home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.home-links a {
  color: var(--muted);
  text-underline-offset: 3px;
}

.home-links a:hover {
  color: var(--text);
}

/* Each CJK language gets its own font order: otherwise Han glyphs of the wrong language win on Windows and Linux. */
:root:lang(zh) {
  --font-sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-serif: ui-serif, "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
  --font-rounded: ui-rounded, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

:root:lang(ja) {
  --font-sans: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --font-serif: ui-serif, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
  --font-rounded: ui-rounded, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
}

:root:lang(ko) {
  --font-sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif;
  --font-serif: ui-serif, "AppleMyungjo", "Batang", "Noto Serif CJK KR", serif;
  --font-rounded: ui-rounded, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif;
}

/* Negative tracking and italics glue ideographs together; line height of Latin display type is too tight for them. */
:root:lang(zh) *,
:root:lang(ja) *,
:root:lang(ko) * {
  letter-spacing: 0 !important;
}

:root:lang(zh) :is(h1, h2, h3, .display, .soon-title),
:root:lang(ja) :is(h1, h2, h3, .display, .soon-title),
:root:lang(ko) :is(h1, h2, h3, .display, .soon-title) {
  line-height: 1.25;
}

:root:lang(zh) .display em,
:root:lang(ja) .display em,
:root:lang(ko) .display em {
  font-family: inherit;
  font-style: normal;
}

/* Korean breaks lines between words, not inside them. */
:root:lang(ko) body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* "Próximamente" is one long word: at the usual minimum size it is wider than a 360px screen. */
@media (max-width: 479px) {
  :root:lang(es) .soon-title {
    font-size: 11.5vw;
  }
}

/* Long German compounds in big headings. */
:root:lang(de) :is(h1, h2, h3, .display, .soon-title, .lead, .o-tagline) {
  hyphens: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}