/* CAREO LIMITED: shared styles for the home page and app pages. */
:root {
  --ink: #061b36;
  --ink-2: #0b2447;
  --ink-soft: #33435a;
  --paper: #f6f3ec;
  --surface: #fffdf9;
  --line: rgba(var(--ink-rgb), .12);
  --line-strong: rgba(var(--ink-rgb), .85);
  --ink-rgb: 6, 27, 54;
  --navy: #061b36;
  --on-ink: #fff;
  --deep: #061b36;
  --deep-line: transparent;
  --header-bg: rgba(246, 243, 236, .86);
  --coral: #ff8a65;
  --gold: #d7bc79;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-soft: 0 1px 2px rgba(var(--ink-rgb),.06), 0 12px 32px rgba(var(--ink-rgb),.08);
  --max: 1200px;
  --header-h: 68px;
  --font-body: "Inter", "Hiragino Sans", "Noto Sans JP", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", var(--font-body);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3 { letter-spacing: -.01em; line-height: 1.25; }
/* Korean puts spaces between words, so titles break only there. Japanese has no spaces: keep-all made a whole title one
   unbreakable piece that widened cards and pushed phones sideways. Japanese titles use normal Japanese line breaking
   (strict kinsoku, so 。、 never start a line) and, where supported (Chrome), phrase-aware breaks via auto-phrase. */
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3 { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { word-break: normal; word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; }
/* overflow-wrap: anywhere: Chrome sizes an auto-phrase title as one unbreakable piece when measuring, which widened its column */

.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--on-ink); font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

/* Labels */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--coral); }
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.section-head p { color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.125rem); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px;
  border: 2px solid var(--ink); border-radius: 12px;
  font-weight: 600; font-size: .98rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-primary { background: var(--ink); color: var(--on-ink); box-shadow: 4px 4px 0 var(--coral); }
.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--coral); }
.btn-secondary { background: transparent; }
.btn-secondary:hover { background: var(--surface); }
.btn svg { width: 18px; height: 18px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  padding: 8px 14px; border-radius: 10px;
  font-weight: 500; font-size: .95rem; text-decoration: none; color: var(--ink-soft);
  transition: color .15s ease, background-color .15s ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); background: rgba(var(--ink-rgb),.06); }

/* "Portfolio" submenu: desktop with a mouse or keyboard only; the phone menu keeps the plain link */
.nav-drop { position: relative; }
.nav-drop > a { display: block; }
.nav-sub { display: none; }
@media (min-width: 761px) {
  .nav-drop > a { display: inline-flex; align-items: center; gap: 6px; }
  .nav-drop > a::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .15s ease, margin .15s ease; }
  .nav-drop:hover > a::after, .nav-drop:focus-within > a::after { transform: rotate(-135deg); margin-top: 3px; }
  .nav-drop:hover > a, .nav-drop:focus-within > a { color: var(--ink); background: rgba(var(--ink-rgb),.06); }
  .nav-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
  .nav-sub { display: grid; gap: 2px; position: absolute; left: 50%; top: calc(100% + 8px); z-index: 40; min-width: 220px; padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft);
    opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
  .nav-drop:hover .nav-sub, .nav-drop:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .site-nav .nav-sub a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--ink); font-size: .92rem; white-space: nowrap; }
  .site-nav .nav-sub a:hover, .site-nav .nav-sub a:focus-visible { background: rgba(var(--ink-rgb),.06); }
  .nav-sub svg { width: 18px; height: 18px; flex: none; color: var(--ink-soft); }
  .site-nav .nav-sub a:hover svg { color: var(--coral); }
}
@media (prefers-reduced-motion: reduce) { .nav-sub, .nav-drop > a::after { transition: none; } }

.lang { position: relative; }
.lang-button, .menu-button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer;
  font-weight: 600; font-size: .85rem;
}
.lang-button:hover, .menu-button:hover { border-color: rgba(var(--ink-rgb),.3); }
.lang-button svg, .menu-button svg { width: 18px; height: 18px; flex: none; }
.lang-button .chev { width: 12px; height: 12px; opacity: .6; transition: transform .15s ease; }
.lang-button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-size: .92rem; text-align: left;
}
.lang-menu button:hover { background: rgba(var(--ink-rgb),.06); }
.lang-menu button[aria-checked="true"] { font-weight: 700; }
.lang-menu button[aria-checked="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.lang-menu .code { color: var(--ink-soft); font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.menu-button { display: none; padding: 0 10px; }

@media (max-width: 760px) {
  .site-nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 20px 18px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(var(--ink-rgb),.08);
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav a { padding: 13px 12px; font-size: 1.05rem; }
  .menu-button { display: inline-flex; }
  .header-inner { gap: 10px; }
  .brand span { font-size: .85rem; }
}
@media (max-width: 360px) { .brand span { display: none; } }

/* Hero */
.hero { position: relative; padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 8vw, 96px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 75%);
  opacity: .7;
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
.hero-lead { max-width: 560px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 22px; }
.stat { padding-right: clamp(20px, 3vw, 36px); margin-right: clamp(20px, 3vw, 36px); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.stat strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat span { font-size: .85rem; color: var(--ink-soft); }

.icon-wall { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); max-width: 460px; margin-inline: auto; width: 100%; }
.icon-wall::before {
  content: ""; position: absolute; inset: 12% -6% 6% 8%; z-index: -1;
  border-radius: 40px; background: linear-gradient(135deg, rgba(255,138,101,.32), rgba(215,188,121,.32));
  filter: blur(4px); transform: rotate(-4deg);
}
.icon-wall .col { display: grid; gap: clamp(14px, 2vw, 24px); align-content: start; }
.icon-wall .col:nth-child(2) { transform: translateY(42%); }
.icon-wall .col:nth-child(3) { transform: translateY(14%); }
.icon-tile {
  display: block; aspect-ratio: 1; border-radius: 24%;
  overflow: hidden; border: 2px solid var(--ink); box-shadow: var(--shadow-hard);
  background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease;
}
.icon-tile img { width: 100%; height: 100%; object-fit: cover; }
a.icon-tile:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.icon-tile.brand-tile { background: var(--ink); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .icon-wall { max-width: 520px; grid-template-columns: repeat(4, 1fr); }
  .icon-wall .col { display: contents; }
  .icon-wall .col:nth-child(n) { transform: none; }
  .icon-wall::before { inset: 10% 4% -6% 4%; }
}
@media (max-width: 480px) { .stat strong { font-size: 1.35rem; } }

/* Sections */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-dark { background: var(--deep); color: #f3f1ea; }
.section-dark .eyebrow, .section-dark .section-head p { color: rgba(243,241,234,.72); }
.section-surface { background: var(--surface); border-block: 1px solid var(--line); }

/* App cards */
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.app-card {
  --a1: #0b2447; --a2: #123b70; --accent: var(--coral);
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.app-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.app-card-media {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  min-height: 150px; padding: 22px;
  background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%), linear-gradient(135deg, var(--a1), var(--a2));
}
.app-card-media .app-icon { width: 84px; height: 84px; border-radius: 22%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 10px 24px rgba(0,0,0,.28); object-fit: cover; }
/* Chips are eyebrow labels: plain uppercase text, no pill. Status labels get a coloured dot. */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  color: rgba(255,255,255,.78);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
/* On images, a soft halo keeps labels readable over light areas (concrete, sky, screenshots) */
.app-card-media .chip, .more-media .chip { text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.55); }
.chip svg { display: none; }
.chip-new, .chip-soon, .chip-oss, .chip-inhouse { color: #fff; }
.chip-new::before, .chip-soon::before, .chip-oss::before, .chip-inhouse::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dot);
  box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}
.chip-new { --dot: var(--coral); }
.chip-soon { --dot: var(--gold); }
.chip-oss { --dot: #3fb950; }
.chip-inhouse { --dot: #a78bfa; }
/* Category label in page heroes carries the coral bar, like section eyebrows */
.chip-row .chip:not(.chip-new):not(.chip-soon):not(.chip-oss):not(.chip-inhouse):not(.chip-rnd)::before {
  content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--coral);
}
/* Soft top scrim so labels stay readable over bright feature graphics */
.app-card-media::after, .more-media::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(4,10,20,.5), rgba(4,10,20,0));
}
.app-card-media .chip { align-self: flex-start; }
.app-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.app-card h3 { font-size: 1.4rem; }
.app-card h3 a { text-decoration: none; }
.app-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.app-card .tagline { font-weight: 600; color: var(--ink-soft); font-size: .95rem; margin-top: -4px; }
.app-card .desc { color: var(--ink-soft); font-size: .95rem; }
.app-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; position: relative; z-index: 2; }
.app-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); font-size: .88rem; }
.app-card-foot .more { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.app-card-foot .more svg { width: 16px; height: 16px; transition: transform .15s ease; }
.app-card:hover .app-card-foot .more svg { transform: translateX(3px); }
.app-card-foot .privacy { position: relative; z-index: 2; color: var(--ink-soft); }
.soon-note { font-size: .88rem; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.soon-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(215,188,121,.25); }

.app-card.featured { grid-column: 1 / -1; flex-direction: row; }
.app-card.featured .app-card-media { flex: 1.15; min-height: 320px; padding: 0; align-items: stretch; }
.app-card.featured .app-card-media img.cover { width: 100%; height: 100%; object-fit: cover; }
.app-card.featured .app-card-media .chip { position: absolute; left: 20px; top: 20px; }
.app-card.featured .app-card-main { flex: 1; display: flex; flex-direction: column; }
.app-card.featured .app-card-body { padding: clamp(24px, 3vw, 40px); gap: 14px; }
.app-card.featured h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.app-card.featured .title-row { display: flex; align-items: center; gap: 14px; }
.app-card.featured .title-row img { width: 56px; height: 56px; border-radius: 22%; border: 1.5px solid var(--line-strong); }

@media (max-width: 1020px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .app-card.featured { flex-direction: column; }
  .app-card.featured .app-card-media { min-height: 0; aspect-ratio: 1024 / 500; flex: none; }
}
@media (max-width: 620px) { .app-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* Store badges (custom-built, localized) */
.store-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px 0 11px;
  background: #000; color: #fff; text-decoration: none;
  border: 1px solid #a6a6a6; border-radius: 9px;
  transition: transform .15s ease, background-color .15s ease;
}
.store-badge:hover { background: #1a1a1a; transform: translateY(-1px); }
.store-badge svg { width: 22px; height: 22px; flex: none; }
.store-badge span { display: grid; line-height: 1.05; text-align: left; }
.store-badge small { font-size: .62rem; font-weight: 500; letter-spacing: .02em; }
.store-badge strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.store-badge.google small { text-transform: uppercase; font-size: .58rem; letter-spacing: .06em; }
.store-badge.lg { height: 52px; padding: 0 18px 0 14px; border-radius: 11px; }
.store-badge.lg svg { width: 26px; height: 26px; }
.store-badge.lg strong { font-size: 1.22rem; }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.about-grid h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-top: 14px; }
.about-grid .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(243,241,234,.82); }
.principles { display: grid; gap: 14px; margin-top: 30px; }
.principle { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.principle .num { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--coral); color: var(--navy); font-family: var(--font-display); font-weight: 700; }
.principle h3 { font-size: 1.08rem; letter-spacing: -.01em; margin-bottom: 4px; }
.principle p { color: rgba(243,241,234,.72); font-size: .95rem; }
@media (max-width: 860px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

/* Support */
.support-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; }
.support-card { padding: clamp(26px, 4vw, 44px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-soft); }
/* Support cards: a soft coral-tinted glow instead of the old hard 7px offset shadow */
.support-card.primary { background: var(--deep); color: #f3f1ea; border-color: var(--deep); box-shadow: 0 1px 2px rgba(6,27,54,.12), 0 18px 40px -16px color-mix(in srgb, var(--coral) 55%, transparent); display: grid; gap: 18px; align-content: start; }
.support-card.primary .eyebrow { color: rgba(243,241,234,.72); }
.support-card.primary h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.support-card.primary p { color: rgba(243,241,234,.78); }
.mail-link { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: #fff; text-decoration: none; border-bottom: 2px solid var(--coral); padding-bottom: 4px; word-break: break-all; justify-self: start; }
.mail-link svg { width: 24px; height: 24px; flex: none; }
.support-card dl { display: grid; gap: 18px; }
.support-card dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.support-card dd { font-size: .98rem; }
.link-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.link-list a { text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb),.25); text-underline-offset: 3px; }
.link-list a:hover { text-decoration-color: var(--coral); }
@media (max-width: 860px) { .support-grid { grid-template-columns: minmax(0, 1fr); } }

/* Footer */
.site-footer { background: var(--deep); border-top: 1px solid var(--deep-line); color: rgba(243,241,234,.78); padding: 64px 0 32px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-brand .brand span { color: #fff; }
.footer-brand p { max-width: 280px; }
.site-footer h3 { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,241,234,.55); margin-bottom: 14px; }
.site-footer ul { display: grid; gap: 9px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }
.site-footer address { font-style: normal; display: grid; gap: 9px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: rgba(243,241,234,.55); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* App detail page */
.app-hero {
  --a1: #0b2447; --a2: #123b70; --accent: var(--coral);
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 40%), radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 40%), linear-gradient(135deg, var(--a1), var(--a2));
  padding: clamp(28px, 4vw, 40px) 0 clamp(56px, 8vw, 96px);
}
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; text-decoration: none; color: rgba(255,255,255,.82); margin-bottom: clamp(28px, 5vw, 56px); }
.back-link:hover { color: #fff; }
.back-link svg { width: 16px; height: 16px; }
.app-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.app-hero-copy { display: grid; gap: 20px; justify-items: start; }
.app-title-row { display: flex; align-items: center; gap: 18px; }
/* The name block may shrink, and a title that still can't fit breaks (ja/ko titles keep words whole, so "アカウントを削除する" overflowed phones) */
.app-title-row > div { min-width: 0; }
.app-title-row img { width: clamp(72px, 9vw, 104px); height: auto; aspect-ratio: 1; border-radius: 22%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.app-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
.app-hero .tagline { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; color: rgba(255,255,255,.86); margin-top: 4px; }
.app-hero .lead { max-width: 560px; font-size: clamp(1rem, 1.4vw, 1.12rem); color: rgba(255,255,255,.8); }
.app-hero .soon-note { color: #fff; font-size: 1rem; }
/* Hero quick links: one design on every app and project page, a segmented glass bar. The accent colour is the only
   per-app difference; each link gets an icon for what it opens, picked by its data-i18n key (so the HTML stays plain) */
.app-hero .text-links { display: flex; width: 100%; max-width: 560px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: .86rem; }
.app-hero .text-links a { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 10px; border-radius: 9px; text-align: center; line-height: 1.2; color: rgba(255,255,255,.92); font-weight: 500; text-decoration: none;
  overflow-wrap: break-word; transition: background-color .15s ease, color .15s ease; }
.app-hero .text-links a + a::after { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: rgba(255,255,255,.12); transition: opacity .15s ease; }
.app-hero .text-links a:hover { color: #fff; text-decoration: none; background-color: rgba(255,255,255,.1); }
.app-hero .text-links a:hover::after, .app-hero .text-links a:hover + a::after { opacity: 0; }
.app-hero .text-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.app-hero .text-links a::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--accent); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* Highlights: sparkles */
.app-hero .text-links a[data-i18n="detail.features"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3.5 12.9 9 18.5 11l-5.6 2L11 18.5 9.1 13 3.5 11l5.6-2z'/%3E%3Cpath d='M19 3v4M17 5h4'/%3E%3C/svg%3E"); }
/* Try it / demo: play */
.app-hero .text-links a[data-i18n="demo.eyebrow"], .app-hero .text-links a[data-i18n="demo.open"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.2v13.6L19 12z'/%3E%3C/svg%3E"); }
/* Who it's for: people */
.app-hero .text-links a[data-i18n="who.eyebrow"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.7-3.6 3.2-5.5 6.5-5.5s5.8 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18.2 14.8c1.8.8 2.9 2.5 3.3 5.2'/%3E%3C/svg%3E"); }
/* Screenshots: picture */
.app-hero .text-links a[data-i18n="detail.screens"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.5'/%3E%3Cpath d='m20.5 15.5-4.5-4.5-9.5 8.5'/%3E%3C/svg%3E"); }
/* Privacy Policy: shield */
.app-hero .text-links a[data-i18n="links.privacy"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19.5 6v5.5c0 4.6-3.2 8.4-7.5 9.5-4.3-1.1-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }
/* Account deletion: person with a cross */
.app-hero .text-links a[data-i18n="support.deletion"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M3.5 20c.7-3.6 3.2-5.5 6.5-5.5 1.3 0 2.5.3 3.5.9'/%3E%3Cpath d='m16.5 15 4.5 4.5M21 15l-4.5 4.5'/%3E%3C/svg%3E"); }
/* Four links: icon above the label so long labels (fr, es, pt, ru) get the whole segment; segments size to their labels */
.app-hero .text-links:has(> a:nth-child(4)) a { flex-direction: column; gap: 5px; min-height: 52px; padding: 7px 8px; font-size: .8rem; }
/* Phones: the bar becomes a 2-column grid (an odd last link spans both); the divider sits only between the two columns
   and a hairline separates the rows */
@media (max-width: 560px) {
  .app-hero .text-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-hero .text-links a, .app-hero .text-links:has(> a:nth-child(4)) a { flex-direction: row; gap: 7px; min-height: 44px; padding: 8px 8px; font-size: .78rem; }
  .app-hero .text-links a:last-child:nth-child(odd) { grid-column: span 2; }
  .app-hero .text-links a:nth-child(odd)::after { content: none; }
  .app-hero .text-links a:nth-child(n+3) { background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)); background-repeat: no-repeat; background-position: 12px 0; background-size: calc(100% - 24px) 1px; }
  .app-hero .text-links a:hover, .app-hero .text-links a:hover + a + a { background-image: none; }
}
/* Narrow phones with four links: icon back above the label and slimmer side padding, so the longest single words
   (de "Datenschutzerklärung", ru "конфиденциальности") fit their half of the bar without being split */
@media (max-width: 400px) { .app-hero .text-links:has(> a:nth-child(4)) a { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: .75rem; } }
/* A link that isn't ready yet (Dishtopia screenshots): shown, but not clickable */
.app-hero .text-links a[aria-disabled="true"] { opacity: .42; cursor: default; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .app-hero .text-links a, .app-hero .text-links a::after { transition: none; } }
.app-hero-visual { display: flex; justify-content: center; }
.app-hero-visual .feature-img { width: 100%; border-radius: var(--radius); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.app-hero-visual .big-icon { width: min(70%, 300px); border-radius: 22%; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
@media (max-width: 860px) { .app-hero-grid { grid-template-columns: minmax(0, 1fr); } }

.phone {
  position: relative; flex: none;
  width: 248px; aspect-ratio: 9 / 19.5;
  padding: 9px; border-radius: 40px;
  background: #0d0f14; box-shadow: 0 0 0 1.5px rgba(255,255,255,.18) inset, 0 28px 50px rgba(0,0,0,.32);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; background: #222; }
.app-hero-visual .phone { width: min(290px, 72vw); transform: rotate(3deg); }

.gallery { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 28px; scrollbar-width: thin; }
.gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; scroll-snap-align: start; border-radius: 40px; }
.gallery .phone { width: 232px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.12) inset, 0 18px 36px rgba(var(--ink-rgb),.22); transition: transform .18s ease; }
.gallery button:hover .phone { transform: translateY(-4px); }
.gallery-wrap { position: relative; }
.gallery-nav { display: flex; gap: 8px; }
.gallery-nav button { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.gallery-nav button:hover { background: rgba(var(--ink-rgb), .06); }
.gallery-nav svg { width: 18px; height: 18px; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.head-row h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 10px; }

.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.feature { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); display: grid; gap: 14px; align-content: start; }
.feature .num { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font-family: var(--font-display); font-weight: 700; font-size: .95rem; box-shadow: 3px 3px 0 var(--coral); }
.feature p { font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
@media (max-width: 1020px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .features { grid-template-columns: minmax(0, 1fr); } }

.info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.info-card { padding: clamp(24px, 3.5vw, 36px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-soft); }
.info-card h2 { font-size: 1.5rem; margin-bottom: 20px; }
.info-card dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; }
.info-card dt { color: var(--ink-soft); font-size: .92rem; }
.info-card dd { font-weight: 600; font-size: .95rem; }
.info-card.support { background: var(--deep); color: #f3f1ea; border-color: var(--deep); box-shadow: 0 1px 2px rgba(6,27,54,.12), 0 18px 40px -16px color-mix(in srgb, var(--coral) 55%, transparent); display: grid; gap: 16px; align-content: start; }
.info-card.support h2 { margin-bottom: 0; }
.info-card.support p { color: rgba(243,241,234,.78); }
.info-card.support .mail-link { font-size: 1.2rem; }
.info-card.support .link-list a { color: #f3f1ea; text-decoration-color: rgba(255,255,255,.35); }
@media (max-width: 860px) { .info-grid { grid-template-columns: minmax(0, 1fr); } }

.more-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mini-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.mini-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.mini-card img { width: 56px; height: 56px; border-radius: 22%; flex: none; }
.mini-card strong { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
.mini-card span { display: block; font-size: .85rem; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 900px) { .more-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .more-apps { grid-template-columns: minmax(0, 1fr); } }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(6, 12, 22, .88); backdrop-filter: blur(6px); }
.lightbox-inner { width: 100%; height: 100%; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; justify-items: center; padding: 24px; }
.lightbox img { max-height: calc(100vh - 96px); width: auto; max-width: 100%; border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { background: rgba(255,255,255,.2); }
.lightbox button svg { width: 20px; height: 20px; }
.lightbox .lb-close { position: fixed; top: 18px; right: 18px; }
.lightbox .lb-count { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: .9rem; }
@media (max-width: 600px) { .lightbox-inner { grid-template-columns: minmax(0, 1fr); padding: 70px 12px 56px; } .lightbox .lb-prev, .lightbox .lb-next { position: fixed; bottom: 8px; } .lightbox .lb-prev { left: 18px; } .lightbox .lb-next { right: 18px; } }
/* Lightbox: the enlarged shot keeps its device frame, sized to fit the screen height */
.lightbox { --lb-h: calc(100dvh - 110px); }
.lightbox .lb-frame { width: min(100%, calc(var(--lb-h) * var(--ar, .5))); height: auto; transform: none; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }
.lightbox .lb-frame img { max-height: none; max-width: none; box-shadow: none; }
.lightbox-inner > img[hidden] { display: none; }
.lightbox .lb-frame.window img { width: 100%; height: auto; border-radius: 0; }
@media (max-width: 600px) { .lightbox { --lb-h: calc(100dvh - 150px); } }

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

@media (max-width: 620px) {
  .app-card .store-badge { gap: 6px; padding: 0 10px 0 8px; }
  .app-card .store-badge strong { font-size: .95rem; }
  .app-card .store-badge svg { width: 20px; height: 20px; }
}

.gallery button { flex: none; }
.gallery .phone { display: block; }
@media (max-width: 520px) { .gallery .phone { width: 200px; } .gallery { gap: 16px; } }

/* Icon wall: 7 app icons, outer columns offset */
.icon-wall .col:nth-child(1), .icon-wall .col:nth-child(3) { transform: translateY(50%); }
.icon-wall .col:nth-child(2) { transform: none; }
@media (max-width: 900px) {
  .icon-wall { display: flex; flex-wrap: wrap; justify-content: center; }
  .icon-wall .col:nth-child(n) { transform: none; }
  .icon-wall .icon-tile { width: calc((100% - 3 * clamp(14px, 2vw, 24px)) / 4); }
}

/* Store badges fill their row equally; content is centred inside each badge */
.store-badges { width: 100%; justify-content: center; }
.store-badge, .app-card .store-badge { flex: 1 1 140px; justify-content: center; }
.app-hero-copy .store-badges { max-width: 560px; }
/* Store names never wrap ("Google Play" broke onto two lines and out of the badge on phones in ru); on phones the big
   hero badges get a little less padding and type so two still fit side by side */
.store-badge small, .store-badge strong { white-space: nowrap; }
@media (max-width: 560px) { .store-badge.lg { gap: 7px; padding: 0 12px 0 10px; } .store-badge.lg svg { width: 22px; height: 22px; } .store-badge.lg strong { font-size: 1.08rem; } }

/* App cards: feature graphic on top, icon overlapping its lower edge */
.app-card:not(.featured) .app-card-media { display: block; aspect-ratio: 1024 / 500; min-height: 0; padding: 0; }
.app-card:not(.featured) .app-card-media .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-card:not(.featured) .app-card-media .app-icon { position: absolute; left: 20px; bottom: -30px; z-index: 2; width: 72px; height: 72px; border: 3px solid var(--surface); box-shadow: 0 8px 20px rgba(var(--ink-rgb),.28); }
.app-card:not(.featured) .app-card-media .chip { position: absolute; top: 16px; right: 18px; }
.app-card:not(.featured) .app-card-body { padding-top: 44px; }

/* Support: single card, text left, email right on wide screens */
.support-grid { grid-template-columns: minmax(0, 1fr); }
.support-card.primary { grid-template-columns: minmax(0, 1.3fr) auto; column-gap: 48px; align-items: end; }
.support-card.primary > .eyebrow, .support-card.primary > h2, .support-card.primary > p { grid-column: 1; }
.support-card.primary > p { max-width: 560px; }
.support-card.primary .mail-link { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
@media (max-width: 860px) {
  .support-card.primary { grid-template-columns: minmax(0, 1fr); }
  .support-card.primary .mail-link { grid-column: 1; grid-row: auto; }
}
.site-footer h3.sub { margin-top: 26px; }

/* Support + About side by side */
.support-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
.support-card.primary { grid-template-columns: minmax(0, 1fr); align-content: start; }
.support-card.primary .mail-link { grid-column: 1; grid-row: auto; margin-top: auto; }
.about-card { display: grid; gap: 16px; align-content: start; }
.about-card h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.about-card p { color: var(--ink-soft); font-size: 1.02rem; }
@media (max-width: 860px) { .support-grid { grid-template-columns: minmax(0, 1fr); } }

/* Icon wall: side pairs centred vertically against the middle column */
@media (min-width: 901px) {
  .icon-wall { align-items: center; }
  .icon-wall .col, .icon-wall .col:nth-child(n) { transform: none; align-self: center; }
}

/* Status chips: Newest / Coming soon */
.app-card:not(.featured) .app-card-media .chip.status { left: 18px; right: auto; }
.app-card .app-card-media .chip { z-index: 2; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* Store badges for apps not yet in the stores: same look, not clickable */
.store-badge.is-pending { cursor: default; }
.store-badge.is-pending:hover { background: #000; transform: none; }

/* Featured card: show the whole feature graphic, blurred copy fills any spare space */
.app-card.featured .app-card-media { position: relative; overflow: hidden; background: var(--a1); }
.app-card.featured .app-card-media .cover-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(1.15); transform: scale(1.2); opacity: .9; }
.app-card.featured .app-card-media img.cover { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

/* Device tabs and frames */
.device-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; border-radius: 12px; background: rgba(var(--ink-rgb),.06); }
.device-tabs button { border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font-weight: 600; font-size: .92rem; cursor: pointer; color: var(--ink-soft); }
.device-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(var(--ink-rgb),.12); }
.gallery[hidden] { display: none; }
.device { position: relative; display: block; flex: none; }
.device img { width: 100%; height: 100%; display: block; }
.gallery .device.phone { width: 232px; aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 40px; background: #0d0f14; box-shadow: 0 0 0 1.5px rgba(255,255,255,.12) inset, 0 18px 36px rgba(var(--ink-rgb),.22); }
.gallery .device.phone img { object-fit: cover; object-position: top; border-radius: 31px; }
.gallery .device.android img { border-radius: 26px; }
.gallery .device.tablet { width: 380px; aspect-ratio: 3 / 4; padding: 12px; border-radius: 30px; background: #0d0f14; box-shadow: 0 0 0 1.5px rgba(255,255,255,.12) inset, 0 18px 36px rgba(var(--ink-rgb),.22); }
.gallery .device.tablet img { object-fit: cover; border-radius: 19px; }
.gallery .device.framed { width: 232px; aspect-ratio: 473 / 1000; filter: drop-shadow(0 18px 24px rgba(var(--ink-rgb),.22)); }
.gallery .device.framed img { object-fit: contain; }
.gallery button:hover .device { transform: translateY(-4px); }
.gallery .device { transition: transform .18s ease; }
@media (max-width: 520px) {
  .gallery .device.phone, .gallery .device.framed { width: 200px; }
  .gallery .device.tablet { width: 290px; }
}

/* Featured card: height follows the feature graphic (1024x500) */
.app-card.featured { align-items: stretch; }
.app-card.featured .app-card-media { flex: 0 0 58%; aspect-ratio: 1024 / 500; min-height: 0; }
.app-card.featured .app-card-body { padding: 32px; gap: 12px; justify-content: center; flex: 1; }
.app-card.featured .app-card-media .chip.cat { position: absolute; left: auto; right: 20px; top: 20px; }
.app-card.featured .app-card-media .chip.status { left: 20px; top: 20px; }
@media (max-width: 900px) {
  .app-card.featured { flex-direction: column; }
  .app-card.featured .app-card-media { flex: none; width: 100%; }
}

/* Device mockups from PolyShot: screenshot sits in the screen area, frame PNG on top */
.device { position: relative; display: block; flex: none; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.device::after { content: ""; position: absolute; inset: 0; background: center / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.device img.shot { position: absolute; z-index: 1; object-fit: cover; object-position: center; border-radius: 0 !important; background: #111; }
.device.iphone { aspect-ratio: 1424 / 2956; }
.device.iphone::after { background-image: url("../images/frames/iphone.png"); }
.device.iphone img.shot { left: 3.5%; top: 1.35%; width: 93%; height: 97.3%; border-radius: 12% / 5.6% !important; }
.device.ipad { aspect-ratio: 1701 / 2214; }
.device.ipad::after { background-image: url("../images/frames/ipad.png"); }
.device.ipad img.shot { left: 4.4%; top: 3.3%; width: 91.2%; height: 93.4%; border-radius: 2.5% !important; }
.device.android-phone { aspect-ratio: 1000 / 2100; }
.device.android-phone::after { background-image: url("../images/frames/android-phone.png"); }
.device.android-phone img.shot { left: 2.45%; top: 1.0%; width: 95.1%; height: 98%; border-radius: 8% / 4% !important; }
.device.android-tablet { aspect-ratio: 1600 / 2400; }
.device.android-tablet::after { background-image: url("../images/frames/android-tablet.png"); }
.device.android-tablet img.shot { left: 2.5%; top: 1.6%; width: 95%; height: 96.8%; border-radius: 2.5% !important; }

.gallery .device.iphone, .gallery .device.android-phone { width: 236px; filter: drop-shadow(0 16px 22px rgba(var(--ink-rgb),.2)); }
.gallery .device.ipad, .gallery .device.android-tablet { width: 380px; filter: drop-shadow(0 16px 22px rgba(var(--ink-rgb),.2)); }
.app-hero-visual .hero-device { width: min(290px, 70vw); transform: rotate(3deg); filter: drop-shadow(0 28px 40px rgba(0,0,0,.35)); }
@media (max-width: 520px) {
  .gallery .device.iphone, .gallery .device.android-phone { width: 200px; }
  .gallery .device.ipad, .gallery .device.android-tablet { width: 290px; }
}

/* Highlights: line icon + store caption + subtitle */
.features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features.count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature { gap: 10px; padding: 26px; }
.feature .emoji, .who-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent, var(--coral)) 14%, transparent); margin-bottom: 6px; }
.feature .emoji::before, .who-icon::before { content: ""; width: 22px; height: 22px; background: color-mix(in srgb, var(--accent, var(--coral)) 72%, var(--ink)); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* Highlight and who-it's-for icons: line icons drawn from one 24px, 2px-stroke set (same language as the hero bar),
   tinted with the page accent; each span names its icon in data-ico */
.feature .emoji[data-ico="barcode"], .who-icon[data-ico="barcode"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16M8 8.5v7M11 8.5v7M14 8.5v7M17 8.5v7'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="bell"], .who-icon[data-ico="bell"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 20a2 2 0 0 0 4 0M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="bolt"], .who-icon[data-ico="bolt"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5H11l-1 8 8.5-11H13z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="books"], .who-icon[data-ico="books"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='5' height='16' rx='1'/%3E%3Crect x='8.5' y='6' width='5' height='14' rx='1'/%3E%3Cpath d='m15 6.8 3-.8 3.4 12.8-3 .8z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="box"], .who-icon[data-ico="box"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5 12 12l8-4.5M12 12v9'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="bubbles"], .who-icon[data-ico="bubbles"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.5'/%3E%3Ccircle cx='16.5' cy='8.5' r='3.5'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3Ccircle cx='7' cy='5.5' r='1.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="building"], .who-icon[data-ico="building"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21h16M6 21V4h9v17M15 9h3v12M9 8h3M9 12h3M9 16h3'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="bulb"], .who-icon[data-ico="bulb"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V16h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="calendar"], .who-icon[data-ico="calendar"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4M12 12.6l1 2 2.2.3-1.6 1.5.4 2.2-2-1-2 1 .4-2.2-1.6-1.5 2.2-.3z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="camera"], .who-icon[data-ico="camera"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8a2 2 0 0 1 2-2h1.5l1.5-2h6l1.5 2H18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="chef-hat"], .who-icon[data-ico="chef-hat"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14a4 4 0 1 1 1.3-7.8 4 4 0 0 1 7.4 0A4 4 0 1 1 17 14v6H7zM7 17h10'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="circle-check"], .who-icon[data-ico="circle-check"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="clipboard"], .who-icon[data-ico="clipboard"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4.5' width='14' height='16.5' rx='2'/%3E%3Cpath d='M9 3h6v3H9zM9 11h6M9 15h4'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="coin"], .who-icon[data-ico="coin"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="coins"], .who-icon[data-ico="coins"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v4c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 10v4c0 1.7 3.1 3 7 3s7-1.3 7-3v-4M5 14v4c0 1.7 3.1 3 7 3s7-1.3 7-3v-4'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="compass"], .who-icon[data-ico="compass"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="devices"], .who-icon[data-ico="devices"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='10.5' height='16' rx='2'/%3E%3Crect x='15.5' y='9' width='5.5' height='11' rx='1.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="dice"], .who-icon[data-ico="dice"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='.8'/%3E%3Ccircle cx='15.5' cy='8.5' r='.8'/%3E%3Ccircle cx='12' cy='12' r='.8'/%3E%3Ccircle cx='8.5' cy='15.5' r='.8'/%3E%3Ccircle cx='15.5' cy='15.5' r='.8'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="eject"], .who-icon[data-ico="eject"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5 19.5 14h-15zM4.5 18.5h15'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="feather"], .who-icon[data-ico="feather"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 15 9M18.5 5.5a5 5 0 0 0-7.1 0L7 10v7h7l4.5-4.4a5 5 0 0 0 0-7.1z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="file-text"], .who-icon[data-ico="file-text"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="flag"], .who-icon[data-ico="flag"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h13l-2.5 4.5L18 13H5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="folders"], .who-icon[data-ico="folders"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5V6a1 1 0 0 1 1-1h3.5l2 2H19a1 1 0 0 1 1 1v1'/%3E%3Cpath d='M3 10.5a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1V19a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="gauge"], .who-icon[data-ico="gauge"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 18A9 9 0 1 1 19.8 18'/%3E%3Cpath d='m12 14 3.5-4.5'/%3E%3Ccircle cx='12' cy='14' r='1.2'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="gift"], .who-icon[data-ico="gift"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7M12 8v12M12 8C10.5 5 7 4.5 7 6.5S10.5 8 12 8c1.5 0 5 .5 5-1.5S13.5 5 12 8'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="globe"], .who-icon[data-ico="globe"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="hash"], .who-icon[data-ico="hash"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 4 8 20M16 4l-2 16'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="helmet"], .who-icon[data-ico="helmet"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 9.5a4.5 4.5 0 0 1 9 0M5.5 9.5h13M8.5 11a3.5 3.5 0 0 0 7 0M5 21c.7-3.2 3.4-5.5 7-5.5s6.3 2.3 7 5.5M12 5v2'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="help"], .who-icon[data-ico="help"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6M12 17h.01'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="home"], .who-icon[data-ico="home"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7M6 9.5V20h12V9.5M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="kitchen"], .who-icon[data-ico="kitchen"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M3 4v5a1.5 1.5 0 0 0 3 0V4M4.5 10.5V20M21 4c-1.7 1-2.5 3-2.5 6v2H21M21 4v16'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="layout"], .who-icon[data-ico="layout"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="levels"], .who-icon[data-ico="levels"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4v-5H4zM10 20h4v-9.5h-4zM16 20h4V4h-4z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="link"], .who-icon[data-ico="link"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="list"], .who-icon[data-ico="list"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h1M4 12h1M4 18h1'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="list-check"], .who-icon[data-ico="list-check"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 6h9M11 12h9M11 18h9M3.5 6 5 7.5 7.5 5M3.5 12 5 13.5 7.5 11M3.5 18 5 19.5 7.5 17'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="lock"], .who-icon[data-ico="lock"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="mail"], .who-icon[data-ico="mail"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="map"], .who-icon[data-ico="map"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6.5V20l6-2.5 6 2.5 6-2.5V4l-6 2.5zM9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="map-pin"], .who-icon[data-ico="map-pin"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="message"], .who-icon[data-ico="message"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2zM8 9h8M8 13h5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="mic"], .who-icon[data-ico="mic"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="movie"], .who-icon[data-ico="movie"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zM4 10 3.4 6.6a1 1 0 0 1 .8-1.2l13.8-2.4a1 1 0 0 1 1.2.8L19.8 7M8.2 4.4l2.6 3.8M13.6 3.5l2.6 3.8'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="notes"], .who-icon[data-ico="notes"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h9l4 4v4M14.5 3v4.5H19M8.5 10h6M8.5 14h3'/%3E%3Cpath d='m14 21 .8-3.2 4.7-4.7 2.4 2.4-4.7 4.7z'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="palette"], .who-icon[data-ico="palette"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 1 9-9c0 2.5-2 3.5-4 3.5h-1.5a1.5 1.5 0 0 0-1 2.6c.6.6.5 2.9-2.5 2.9z'/%3E%3Ccircle cx='7.5' cy='11' r='.8'/%3E%3Ccircle cx='10' cy='7' r='.8'/%3E%3Ccircle cx='14.5' cy='7' r='.8'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="pencil"], .who-icon[data-ico="pencil"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16zM13.5 6.5l4 4'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="plate-crack"], .who-icon[data-ico="plate-crack"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5 10.5 8l3 2.5-2 3.5 2.5 3-1 4.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="ruler"], .who-icon[data-ico="ruler"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5 16.5 3.5l4 4-13 13zM7 13l2 2M10 10l2 2M13 7l2 2'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="search"], .who-icon[data-ico="search"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="search-off"], .who-icon[data-ico="search-off"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5M3 3l18 18'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="shield-check"], .who-icon[data-ico="shield-check"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19.5 6v5.5c0 4.6-3.2 8.4-7.5 9.5-4.3-1.1-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="stack"], .who-icon[data-ico="stack"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 8.5l9 4.5 9-4.5z'/%3E%3Cpath d='m3 12.5 9 4.5 9-4.5'/%3E%3Cpath d='m3 16.5 9 4.5 9-4.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="steering"], .who-icon[data-ico="steering"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 14v7M10 12 3.2 10.5M14 12l6.8-1.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="stopwatch"], .who-icon[data-ico="stopwatch"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 13.5V10M10 2.5h4M12 2.5V6M18.3 6.7l1.5-1.5'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="target"], .who-icon[data-ico="target"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="touch"], .who-icon[data-ico="touch"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12V5.5a1.5 1.5 0 0 1 3 0V11M12 10.5a1.5 1.5 0 0 1 3 0v1M15 11a1.5 1.5 0 0 1 3 0v3.5A6.5 6.5 0 0 1 11.5 21h-1a6 6 0 0 1-4.6-2.2L4.5 17a1.6 1.6 0 0 1 2.4-2.1L9 17'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="trending"], .who-icon[data-ico="trending"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="trophy"], .who-icon[data-ico="trophy"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0zM7 6H4c0 2.8 1.4 4.5 3.3 4.8M17 6h3c0 2.8-1.4 4.5-3.3 4.8'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="wheel"], .who-icon[data-ico="wheel"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Cpath d='M12 3v7.5M12 13.5V21M3 12h7.5M13.5 12H21M5.6 5.6l5.3 5.3M13.1 13.1l5.3 5.3M18.4 5.6l-5.3 5.3M10.9 13.1l-5.3 5.3'/%3E%3C/svg%3E"); }
.feature .emoji[data-ico="zoom-check"], .who-icon[data-ico="zoom-check"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5M8 10.5l2 2 3.5-3.5'/%3E%3C/svg%3E"); }
.feature h3 { font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em; }
/* Accent words (*word* in i18n) render as plain text: no marker */
.feature h3 em { font-style: normal; }
.feature p { font-weight: 400; font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 1020px) { .features, .features.count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .features, .features.count-4 { grid-template-columns: minmax(0, 1fr); } }

/* Brand name: "Careo Limited" in title case */
.brand span { text-transform: none; letter-spacing: -.005em; font-size: 1.02rem; }

/* Android phone frame (taken from the raw Android captures) and tablet frame */
.device.android-phone { aspect-ratio: 1469 / 3104; }
.device.android-phone img.shot { left: 3.85%; top: 1.8%; width: 91.7%; height: 96.5%; border-radius: 7.2% / 3.3% !important; }
.device.android-tablet { aspect-ratio: 1744 / 2704; }
.device.android-tablet img.shot { left: 4.05%; top: 2.6%; width: 91.9%; height: 94.8%; border-radius: 2.4% !important; }

/* No drop shadows inside the scroller: they were clipped into a pale box at the edges */
.gallery .device.iphone, .gallery .device.android-phone, .gallery .device.ipad, .gallery .device.android-tablet { filter: none; }
.gallery { padding: 8px 2px 20px; }

/* More from CAREO: minimal horizontal cards */
.more-row { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px; scrollbar-width: thin; }
.more-card { flex: 0 0 280px; scroll-snap-align: start; display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.more-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.more-media { position: relative; display: block; aspect-ratio: 1024 / 500; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%), linear-gradient(135deg, var(--a1), var(--a2)); }
.more-media .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.more-icon { position: absolute; left: 14px; bottom: -22px; z-index: 1; width: 52px; height: 52px; border-radius: 22%; border: 2.5px solid var(--surface); box-shadow: 0 6px 14px rgba(var(--ink-rgb),.22); }
.more-body { display: grid; gap: 2px; padding: 30px 16px 16px; }
.more-body strong { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
.more-body span { font-size: .85rem; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 520px) { .more-card { flex-basis: 240px; } }

/* More from CAREO: 3 per row, wraps (no horizontal scrolling) */
.more-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; scroll-snap-type: none; padding: 0; }
.more-card { flex: none; }
@media (max-width: 900px) { .more-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .more-row { grid-template-columns: minmax(0, 1fr); } }

.more-media .chip.status { position: absolute; top: 12px; left: 14px; z-index: 2; font-size: .66rem; }

/* Tools & projects */
.sub-head { margin-top: clamp(56px, 7vw, 88px); }
.project-card .app-card-media .cover { object-position: left center; }
.btn-gh {
  flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 16px; border-radius: 9px; background: #0d1117; color: #fff;
  border: 1px solid #30363d; font-weight: 600; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
.btn-gh:hover { background: #21262d; transform: translateY(-1px); }
.btn-gh svg { width: 20px; height: 20px; flex: none; }
.btn-gh.lg { flex: none; height: 52px; padding: 0 22px; border-radius: 11px; font-size: 1.02rem; background: #fff; color: #0d1117; border-color: #fff; }
.btn-gh.lg:hover { background: #f0f3f6; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-weight: 600; text-decoration: none; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-ghost svg { width: 16px; height: 16px; }
.proj-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.private-note { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.private-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,.22); flex: none; }
.private-note.lg { color: #fff; font-size: 1rem; }

/* Browser-style window frame for desktop screenshots */
.window { display: block; position: relative; border-radius: 14px; overflow: hidden; background: #0d1117; border: 1px solid rgba(var(--ink-rgb),.18); box-shadow: 0 18px 40px rgba(var(--ink-rgb),.2); }
.window-bar { display: flex; gap: 7px; align-items: center; height: 30px; padding: 0 14px; background: #1b1f27; }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.window-bar i:nth-child(2) { background: #febc2e; }
.window-bar i:nth-child(3) { background: #28c840; }
.window img { display: block; width: 100%; height: auto; background: #fff; }
.hero-window { width: 100%; margin: 0; border-color: rgba(255,255,255,.25); box-shadow: 0 30px 60px rgba(0,0,0,.4); transform: rotate(1.2deg); }
.project-page .app-hero-grid { align-items: center; }
.gallery-wide button { border-radius: 14px; }
.gallery-wide .window { width: min(760px, 84vw); transition: transform .18s ease; }
.gallery-wide button:hover .window { transform: translateY(-4px); }

/* iOS / Android pair (PolyShot) */
.platform-pair { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.btn-plat {
  flex: 1 1 120px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; padding: 0 16px; border-radius: 9px; background: #000; color: #fff;
  border: 1px solid #a6a6a6; font-weight: 600; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
.btn-plat:hover { background: #1a1a1a; transform: translateY(-1px); }
.btn-plat svg { width: 20px; height: 20px; flex: none; }
.btn-plat:last-child svg { color: #3ddc84; }
.platform-pair.lg { width: 100%; max-width: 420px; }
.platform-pair.lg .btn-plat { height: 52px; border-radius: 11px; font-size: 1.02rem; }

/* More from Careo: heading with Apps / Tools tabs */
.more-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.more-head .more-tabs { margin-bottom: 0; }
.more-row[hidden] { display: none; }

/* Hero: 3-4-3 icon wall (apps + tools), two buttons, GitHub link */
@media (min-width: 901px) {
  .icon-wall { max-width: 420px; }
}
.hero-actions .btn-secondary { box-shadow: none; }
.hero-github { display: inline-flex; align-items: center; gap: 8px; margin-top: -4px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.hero-github svg { width: 18px; height: 18px; flex: none; }
.hero-github svg:last-child { width: 14px; height: 14px; transition: transform .15s ease; }
.hero-github:hover { color: var(--ink); }
.hero-github:hover svg:last-child { transform: translateX(3px); }
@media (max-width: 900px) {
  .icon-wall .icon-tile { width: calc((100% - 4 * clamp(14px, 2vw, 24px)) / 5); }
}

/* Icon wall tiles: no light hairline at the rounded corners (also while tilted on hover) */
.icon-tile { background: var(--ink); isolation: isolate; }
/* A hair larger than the tile so no light line shows at the rounded corners; scaled by the image's own size, not a transform, so it stays sharp */
.icon-tile img { display: block; width: 104%; height: 104%; margin: -2%; max-width: none; }

/* Portfolio filter: All / Apps / Tools */
.portfolio-tabs { margin-bottom: clamp(24px, 3vw, 32px); }
#portfolio-groups[data-show="apps"] .pf-group[data-group="tools"],
#portfolio-groups[data-show="tools"] .pf-group[data-group="apps"] { display: none; }
#portfolio-groups[data-show="tools"] .sub-head { display: none; }

/* Coming-soon apps: store badges look disabled */
.store-badge.is-muted, .store-badge.is-muted:hover { opacity: .45; cursor: not-allowed; }


/* Portfolio filter sits on the eyebrow line, right-aligned */
.pf-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.pf-top .portfolio-tabs { margin-bottom: 0; }

/* More from Careo: tabs right-aligned across the full width, like the Portfolio filter */
.section-head.more-head { max-width: none; }

/* App hero: three phones (front screen in the middle, the next two behind it) */
.hero-trio { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 620px; margin-inline: auto; padding: 4% 0; }
.hero-trio .device { flex: none; filter: drop-shadow(0 24px 34px rgba(0,0,0,.35)); }
.hero-trio .trio-center { width: 40%; z-index: 2; }
.hero-trio .trio-side { width: 34%; z-index: 1; }
.hero-trio .trio-left { transform: translateX(22%) translateY(5%) rotate(-7deg); }
.hero-trio .trio-right { transform: translateX(-22%) translateY(5%) rotate(7deg); }
@media (max-width: 860px) { .hero-trio { max-width: 440px; } }


/* ---- Theme: light by default, dark follows the device or the visitor's choice ---- */
:root[data-theme="dark"] {
  --ink: #eef1f7; --ink-2: #e1e6f0; --ink-soft: #a9b4c7;
  --paper: #0b1220; --surface: #121a2b;
  --line: rgba(238, 241, 247, .12); --line-strong: rgba(238, 241, 247, .6); --ink-rgb: 238, 241, 247;
  --on-ink: #0b1220; --deep: #071a35; --deep-line: rgba(255, 255, 255, .1);
  --header-bg: rgba(11, 18, 32, .84);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef1f7; --ink-2: #e1e6f0; --ink-soft: #a9b4c7;
    --paper: #0b1220; --surface: #121a2b;
    --line: rgba(238, 241, 247, .12); --line-strong: rgba(238, 241, 247, .6); --ink-rgb: 238, 241, 247;
    --on-ink: #0b1220; --deep: #071a35; --deep-line: rgba(255, 255, 255, .1);
    --header-bg: rgba(11, 18, 32, .84);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
.support-card.primary, .info-card.support { border: 1px solid var(--deep-line); }
/* The solid nav background is only for the mobile drop-down; on desktop the nav sits on the translucent header */
@media (max-width: 760px) { .site-header .site-nav { background: var(--paper); } }

/* Dark mode: header buttons blend into the translucent header instead of sitting on solid boxes */
:root[data-theme="dark"] .site-header .lang-button,
:root[data-theme="dark"] .site-header .menu-button { background: rgba(var(--ink-rgb), .05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .lang-button,
  :root:not([data-theme="light"]) .site-header .menu-button { background: rgba(var(--ink-rgb), .05); }
}

/* Theme menu (shares the language menu's look) */
.theme-button { padding: 0 10px; }
.theme-button .theme-icon { display: grid; place-items: center; width: 18px; height: 18px; }
.theme-button .theme-icon svg { width: 18px; height: 18px; }
.theme-menu button svg { width: 16px; height: 16px; flex: none; margin-right: 10px; }
.theme-menu button > span:first-child { display: inline-flex; align-items: center; }

/* 404 page */
.nf-hero { padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.nf-copy { display: grid; gap: 22px; justify-items: start; }
.nf-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 16vw, 11rem); line-height: .9; letter-spacing: -.06em; color: var(--ink); -webkit-text-stroke: 2px var(--ink); -webkit-text-fill-color: transparent; }
.nf-code b { -webkit-text-fill-color: var(--coral); -webkit-text-stroke: 0; }
.nf-copy h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.nf-copy p { max-width: 540px; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.nf-links { display: grid; gap: 12px; }
.nf-links h2 { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.nf-icons { display: flex; flex-wrap: wrap; gap: 12px; }
.nf-icons .icon-tile { width: 64px; }
@media (max-width: 860px) { .nf-grid { grid-template-columns: minmax(0, 1fr); } }

/* Narrow phones: brand, language, theme and menu buttons share one row */
@media (max-width: 480px) {
  .lang-button .chev, .theme-button .chev { display: none; }
  .lang-button { padding: 0 10px; }
  .header-inner { gap: 8px; }
}

/* ---- Motion (driven by site.js; nothing here applies without it) ---- */
/* Rise-in on scroll: a slight backward tilt that settles flat */
.reveal { opacity: 0; transform: perspective(900px) rotateX(12deg) translateY(56px) scale(.96); transform-origin: 50% 100%; }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease var(--reveal-delay, 0ms), transform .95s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms);
}

/* 3D tilt toward the cursor (mouse and trackpad only) */
.app-card.is-tilting, .more-card.is-tilting {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(-3px, -3px, 0);
  transition: transform .12s ease-out, box-shadow .18s ease, border-color .15s ease;
}
.more-card { position: relative; }
.tilt-glare {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 55%);
  opacity: 0; transition: opacity .25s ease;
}
.is-tilting > .tilt-glare { opacity: 1; }

/* Art follows the pointer; foreground icons move further, while text stays still.
   Individual translate/scale preserve the existing image framing transforms. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .app-card .cover:not(.cover-blur), .more-card .cover,
  .app-card .app-icon, .app-card .title-row img, .more-card .more-icon,
  .app-card-media .chip, .more-media .chip { transition: translate .22s ease-out, scale .22s ease-out; }
  .is-tilting .cover:not(.cover-blur) { translate: var(--layer-x, 0px) var(--layer-y, 0px); scale: 1.035; }
  .is-tilting .app-icon, .is-tilting .title-row img, .is-tilting .more-icon { translate: calc(var(--layer-x, 0px) * 1.8) calc(var(--layer-y, 0px) * 1.8); }
  .is-tilting .chip { translate: calc(var(--layer-x, 0px) * .5) calc(var(--layer-y, 0px) * .5); }
}

/* Hero icon wall in depth: 2D parallax only (each icon slides by its --z with the cursor), so the logos stay sharp.
   A perspective/rotate/translateZ version rasterised the icons and then warped them, which blurred them. */
.icon-wall.is-3d .icon-tile { translate: calc(var(--px, 0) * var(--z, 0px) * .35) calc(var(--py, 0) * var(--z, 0px) * .35); transition: translate .25s ease-out, transform .18s ease, box-shadow .18s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Research status chip (TSI) */
.chip-rnd { color: #fff; }
.chip-rnd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: #ff7a1a; box-shadow: 0 0 0 2px rgba(0,0,0,.18); }

/* TSI: observation, interpretation, recommendation */
.reason-steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reason-steps .principle { align-content: start; padding: 24px; }
.reason-steps .principle .num { background: var(--accent, var(--coral)); }
.reason-steps .principle h3 { color: #fff; }
.reason-steps .example { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--accent, var(--coral)); color: rgba(243,241,234,.88); font-size: .92rem; font-style: italic; }
@media (max-width: 900px) { .reason-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- Page transitions (Chrome, Safari 18.2+). Only the icon that was clicked gets a transition name, set by
   site.js at click time; the app page header icon is its partner. Going back, the icon returns to where it came from. ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .app-title-row img { view-transition-name: app-icon; }
  ::view-transition-group(app-icon) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  ::view-transition-group(site-header) { animation-duration: .3s; }
  ::view-transition-old(root) { animation: .25s ease both vt-fade-out; }
  ::view-transition-new(root) { animation: .35s ease .05s both vt-fade-in; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* ---- Headlines that rise in word by word ---- */
.split-words .w { display: inline-block; max-width: 100%; animation: word-in .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes word-in { from { opacity: 0; translate: 0 .45em; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .split-words .w { animation: none; } }

/* ---- Home: range band, from the apps to TSI ---- */
.range-band { position: relative; overflow: hidden; color: #f3f1ea;
  background: radial-gradient(ellipse 45% 70% at 88% 70%, rgba(255,122,26,.22), transparent 70%), radial-gradient(ellipse 40% 60% at 10% 20%, rgba(255,138,101,.12), transparent 70%), linear-gradient(160deg, #0a1424, #121f35 60%, #0b1220); }
.range-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.range-copy { display: grid; gap: 20px; justify-items: start; }
.range-copy .eyebrow { color: rgba(243,241,234,.72); }
.range-copy h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); color: #fff; }
.range-copy p { max-width: 520px; font-size: clamp(1rem, 1.4vw, 1.12rem); color: rgba(243,241,234,.78); }
.range-cta svg { width: 18px; height: 18px; }
.range-visual { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 0; min-height: 300px; }
.range-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-bottom: 6px; z-index: 1; }
.range-icons img { width: 100%; aspect-ratio: 1; border-radius: 24%; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.range-icons img:nth-child(n+5) { position: relative; left: calc(50% + 5px); }
.range-path { position: absolute; left: 22%; right: 26%; top: 10%; bottom: 18%; width: 56%; height: 72%; color: rgba(255,170,110,.65); pointer-events: none; }
.range-tsi { align-self: start; display: block; border-radius: 16px; overflow: hidden; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 8px rgba(255,122,26,.08); transform: rotate(2deg); transition: transform .3s ease; }
.range-tsi:hover { transform: rotate(0deg) scale(1.02); }
.range-tsi img { display: block; width: 100%; height: auto; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .range-icons img { animation: range-float linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .range-tsi { animation: range-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .range-path path { stroke-dashoffset: 0; animation: range-dash linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
  }
}
@keyframes range-float { from { translate: 0 calc(24px + var(--k) * 4px); } to { translate: 0 calc(-18px - var(--k) * 3px); } }
@keyframes range-drift { from { translate: 0 40px; } to { translate: 0 -40px; } }
@keyframes range-dash { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .range-grid { grid-template-columns: minmax(0, 1fr); }
  .range-visual { min-height: 0; }
}
@media (max-width: 520px) {
  .range-visual { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .range-icons { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .range-icons img:nth-child(n+5) { left: 0; }
  .range-path { display: none; }
}

/* ---- TSI: numbers band ---- */
.tsi-stats-band { padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.tsi-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tsi-stat { display: grid; gap: 4px; padding-left: 16px; border-left: 3px solid #ff7a1a; }
.tsi-stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tsi-stat-label { color: var(--ink-soft); font-size: .92rem; }
.tsi-stats-note { margin-top: 18px; font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 900px) { .tsi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } }

/* ---- TSI: evidence explorer ---- */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.demo-figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--line-strong); background: #e7e2da; }
.demo-svg { display: block; width: 100%; height: auto; }
.demo-ov, .demo-scale { transition: opacity .3s ease; }
.demo-ov.is-off, .demo-scale.is-off, .demo-ov[data-layer="int"].is-empty { opacity: 0; }
.demo-trace { stroke-dasharray: 260; stroke-dashoffset: 0; }
.demo-figure:not(.has-drawn) .demo-trace { stroke-dashoffset: 260; }
.demo-figure.has-drawn .demo-trace { transition: stroke-dashoffset 1.2s ease; }
.demo-callout { position: absolute; padding: 6px 10px; border-radius: 8px; font-size: .78rem; font-weight: 600; line-height: 1.2; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: opacity .3s ease; white-space: nowrap; }
.demo-callout.is-off { opacity: 0; }
.demo-callout[data-callout="obs"] { left: 42%; top: 6%; background: #e8650f; }
.demo-callout[data-callout="int"] { left: 76.5%; top: 26%; background: #3f6fe0; }
.demo-callout[data-callout="rec"] { left: 50%; top: 58%; background: #0e9f6e; }
.ov-hist .hist-halo { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 11; stroke-linecap: round; }
.ov-hist .hist-line { fill: none; stroke: #1f1d1a; stroke-width: 4; stroke-linecap: round; }
.ov-hist .hist-text { font-family: "Bradley Hand", "Segoe Print", "Marker Felt", "Comic Sans MS", cursive; font-size: 30px; font-weight: 700; fill: #1f1d1a; paint-order: stroke; stroke: rgba(255,255,255,.8); stroke-width: 6px; stroke-linejoin: round; }
.demo-fields-note { margin-top: 8px; font-size: .76rem; color: var(--ink-soft); }
.demo-fields select option:disabled { color: var(--ink-soft); }
.demo-callout small { display: block; margin-top: 2px; font-size: .68rem; font-weight: 500; opacity: .9; }
.demo-note { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: .78rem; color: #3b362f; background: rgba(255,255,255,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.demo-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.demo-group h3 { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.demo-layers { display: grid; gap: 6px; }
.demo-layer { --c: #e8650f; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px 8px 16px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: color-mix(in srgb, var(--c) 7%, var(--surface)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.demo-layer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); transition: opacity .15s ease; }
.demo-layer[data-toggle="int"] { --c: #3f6fe0; } .demo-layer[data-toggle="rec"] { --c: #0e9f6e; }
.demo-layer:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line-strong)); }
.demo-layer:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.demo-layer-code { flex: none; width: 2.8em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: color-mix(in srgb, var(--c) 78%, var(--ink)); }
.demo-layer-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.demo-layer-name { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.demo-layer-desc { font-size: .8rem; font-weight: 500; line-height: 1.3; color: var(--ink-soft); }
.demo-layer-eye { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-layer .eye-slash { opacity: 0; transition: opacity .15s ease; }
.demo-layer[aria-pressed="false"] { background: var(--surface); }
.demo-layer[aria-pressed="false"]::before { opacity: .2; }
.demo-layer[aria-pressed="false"] .demo-layer-code, .demo-layer[aria-pressed="false"] .demo-layer-text { opacity: .5; }
.demo-layer[aria-pressed="false"] .eye-slash { opacity: 1; }
.demo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.demo-fields label { display: grid; gap: 4px; font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.demo-fields select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 500; }
.demo-reading { padding: 18px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, var(--paper)); border: 1px solid var(--line); }
.demo-out { padding: 10px 0 10px 14px; border-left: 3px solid var(--c); transition: opacity .2s ease; }
.demo-out + .demo-out { margin-top: 6px; }
.demo-out[data-out="obs"] { --c: #e8650f; } .demo-out[data-out="int"] { --c: #3f6fe0; } .demo-out[data-out="rec"] { --c: #0e9f6e; }
.demo-out.is-off { opacity: .35; }
.demo-out h4 { font-size: .95rem; margin-bottom: 3px; }
.demo-out p { font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.demo-unknown { margin-top: 14px; font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.demo-unknown ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.demo-unknown li { padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--line-strong); font-weight: 500; }
@media (max-width: 960px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .demo-fields { grid-template-columns: minmax(0, 1fr); } .demo-callout { font-size: .68rem; padding: 4px 7px; } .demo-note { position: static; } }

/* ---- App pages, wide screens: sticky phone + scrolling highlights ---- */
.story-stage { display: none; }
.section:has(> .screenshot-gallery) { padding-block: clamp(28px, 4vw, 48px); }
.section.product-info { padding-top: clamp(40px, 5vw, 72px); }
.screenshot-gallery > .screenshot-heading { font-size: clamp(1.6rem, 3vw, 2.4rem); padding-block: 8px; }
.screenshot-content { padding-top: 24px; }
.screenshot-content .head-row { justify-content: flex-end; margin-bottom: 18px; }
@media (min-width: 1020px) {
  section.story > .shell { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  section.story .section-head { grid-column: 1 / -1; }
  section.story .story-stage { display: flex; justify-content: center; position: sticky; top: calc(var(--header-h) + max(24px, (100vh - var(--header-h) - 640px) / 2)); }
  section.story .story-stage .device { width: min(280px, 100%); filter: drop-shadow(0 30px 40px rgba(var(--ink-rgb), .22)); }
  section.story .story-stage .device img.shot { opacity: 0; transition: opacity .45s ease, scale .6s cubic-bezier(.2, .8, .2, 1); scale: 1.02; }
  section.story .story-stage .device img.shot.is-on { opacity: 1; scale: 1; }
  section.story .features { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12vh 0 26vh; }
  section.story .feature { margin: 0 0 16vh; padding: 18px 22px; gap: 6px; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; border-color: transparent; background: transparent; box-shadow: none; opacity: .32; transition: opacity .35s ease, background-color .35s ease, border-color .35s ease; }
  section.story .feature .emoji { grid-row: span 2; margin: 0; }
  section.story .feature.is-current { opacity: 1; background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-soft); }
  section.story .feature h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
  section.story .feature p { font-size: .98rem; }
  section.story .story-stage { flex-direction: column; align-items: center; gap: 18px; }
  .story-nav { display: inline-flex; align-items: center; gap: 12px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
  .story-nav button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color .15s ease, opacity .15s ease; }
  .story-nav button:hover:not(:disabled) { background: rgba(var(--ink-rgb), .08); }
  .story-nav button:disabled { opacity: .35; cursor: default; }
  .story-nav svg { width: 18px; height: 18px; }
  .story-count { min-width: 44px; text-align: center; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
}
@media (min-width: 1020px) and (prefers-reduced-motion: reduce) {
  section.story .story-stage .device img.shot, section.story .feature { transition: none; }
}

/* Device tabs wrap on very narrow phones instead of pushing the page sideways */
.device-tabs { flex-wrap: wrap; max-width: 100%; }

/* ---- TSI Try it v2: example tabs, photo with overlays, confidence meter, report card ---- */
.demo-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.demo-tab { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .9rem/1.25 var(--font-body); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.demo-tab img { width: 64px; height: 42px; object-fit: cover; border-radius: 8px; }
.demo-tab:hover { border-color: var(--line-strong); }
.demo-tab[aria-selected="true"] { border-color: #ff7a1a; box-shadow: 0 0 0 3px color-mix(in srgb, #ff7a1a 22%, transparent); }
.demo-figure { background: #2b2d31; }
.demo-photo { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 625; object-fit: cover; transition: opacity .35s ease, scale .5s ease; }
.demo-figure.is-swapping .demo-photo { opacity: .25; scale: 1.02; }
/* The drawing layer covers the photo only (on phones the caption sits below the photo, not over it) */
.demo-ov-svg { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1000 / 625; pointer-events: none; }
.demo-ov-svg .demo-ov, .demo-ov-svg .demo-scale { transition: opacity .3s ease; }
.demo-conf .conf-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.conf-bar i { height: 10px; border-radius: 4px; background: rgba(var(--ink-rgb), .12); transition: background-color .3s ease; }
.conf-bar[data-level="1"] i.on, .conf-bar[data-level="2"] i.on { background: #e8650f; }
.conf-bar[data-level="3"] i.on { background: #e0a100; }
.conf-bar[data-level="4"] i.on, .conf-bar[data-level="5"] i.on { background: #0e9f6e; }
.conf-text { margin-top: 8px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.demo-report { margin-top: 24px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--paper); overflow: hidden; box-shadow: var(--shadow-soft); }
.rep-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.rep-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.rep-head h3 { font-size: 1.3rem; margin-top: 2px; }
.rep-scene { color: var(--ink-soft); font-size: .92rem; margin-top: 2px; }
.rep-grade { display: grid; justify-items: end; gap: 4px; text-align: right; }
.rep-grade-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.rep-grade-value { padding: 6px 14px; border-radius: 999px; font-size: 1rem; color: #fff; background: #6b7280; }
.rep-grade-value[data-grade="light"] { background: #0e9f6e; }
.rep-grade-value[data-grade="medium"] { background: #d97706; }
.rep-grade-value[data-grade="serious"] { background: #dc2626; }
.rep-grade-value[data-grade="undetermined"] { background: #64748b; }
.rep-grade-note { font-size: .78rem; color: var(--ink-soft); max-width: 260px; }
.rep-body { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rep-row { padding: 16px 24px; border-bottom: 1px solid var(--line); transition: opacity .2s ease; }
.rep-row:nth-child(odd) { border-right: 1px solid var(--line); }
.rep-row.is-off { opacity: .35; }
.rep-row[hidden] { display: none; }
.rep-row dt { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.rep-row dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink); }
.rep-ask { background: color-mix(in srgb, #64748b 10%, transparent); }
.rep-ask ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.rep-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rep-chips li { padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line-strong); font-size: .82rem; }
.rep-foot { padding: 14px 24px; font-size: .84rem; color: var(--ink-soft); background: var(--surface); }
@media (max-width: 960px) { .demo-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rep-body { grid-template-columns: minmax(0, 1fr); } .rep-row:nth-child(odd) { border-right: 0; } }
@media (max-width: 520px) { .demo-tab { grid-template-columns: 48px minmax(0, 1fr); font-size: .8rem; } .demo-tab img { width: 48px; height: 32px; } .rep-head, .rep-row, .rep-foot { padding-left: 16px; padding-right: 16px; } }

/* ---- TSI: who it's for, coverage ---- */
.who-grid, .cov-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.who-card { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.who-card h3 { font-size: 1.15rem; }
.who-card p { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.cov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cov-card { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--paper); }
.cov-card h3 { font-size: 1.05rem; }
.cov-card p { color: var(--ink-soft); font-size: .9rem; }
.cov-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.cov-status { white-space: nowrap; }
.cov-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin: 4px 0 8px; }
.cov-rail i { height: 4px; border-radius: 1px; background: rgba(var(--ink-rgb), .12); }
.cov-rail i.is-done { background: color-mix(in srgb, #ff7a1a 45%, transparent); }
.cov-rail i.is-here { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .45); }
.cov-card[data-status="now"] { border-color: #ff7a1a; box-shadow: 0 0 0 3px color-mix(in srgb, #ff7a1a 18%, transparent); }
.cov-card[data-status="now"] .cov-head { color: #e8650f; }
.cov-card[data-status="now"] .cov-rail i.is-here { background: #ff7a1a; box-shadow: none; }
.cov-card[data-status="next"] .cov-head { color: #3f6fe0; }
.cov-card[data-status="next"] .cov-rail i.is-here { box-shadow: inset 0 0 0 1.5px #3f6fe0; }
:root[data-theme="dark"] .cov-card[data-status="now"] .cov-head { color: #ff9a4d; }
:root[data-theme="dark"] .cov-card[data-status="next"] .cov-head { color: #8fb0ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cov-card[data-status="now"] .cov-head { color: #ff9a4d; }
  :root:not([data-theme="light"]) .cov-card[data-status="next"] .cov-head { color: #8fb0ff; }
}
.cov-card[data-status="later"] { opacity: .85; }
.cov-regions { margin-top: 18px; font-size: .9rem; color: var(--ink-soft); max-width: 820px; }
@media (max-width: 900px) { .who-grid, .cov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .who-grid, .cov-grid { grid-template-columns: minmax(0, 1fr); } }
.icon-wall.is-3d.no-ease, .icon-wall.is-3d.no-ease .icon-tile { transition: none; }