/* heurastudios.com: one stylesheet for both pages.
   Type: Newsreader (a serif) for headlines and lead paragraphs, Archivo for everything else.
   Color: black ink on a white page, one grey for panels, and the Heura orange only in the logo and on Arche's status.
   Every color is a token, light by default, dark under html[data-theme="dark"] (set before the first paint by the
   inline script in each page's <head>) or, with JavaScript off, under the system's dark setting. The tokens are
   registered so that changing the appearance cross-fades every color. */

@property --page { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --panel { syntax: '<color>'; inherits: true; initial-value: #f3f3f3; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #000000; }
@property --ink-2 { syntax: '<color>'; inherits: true; initial-value: #5f5f5f; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #e4e4e4; }
@property --rule { syntax: '<color>'; inherits: true; initial-value: #d6d6d6; }
@property --ring { syntax: '<color>'; inherits: true; initial-value: #dcdcdc; }
@property --edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --field { syntax: '<color>'; inherits: true; initial-value: #8a8a8a; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ff4f00; }
@property --foot-edge { syntax: '<color>'; inherits: true; initial-value: #000000; }

:root {
  --page: #ffffff;
  --panel: #f3f3f3;   /* panels behind pictures and models: 1.11:1 on the page */
  --ink: #000000;
  --ink-2: #5f5f5f;   /* secondary text: 6.4:1 on the page, 5.8:1 on a panel */
  --line: #e4e4e4;    /* rules between rows on the page */
  --rule: #d6d6d6;    /* rules drawn on a panel */
  --ring: #dcdcdc;    /* the edge of a screenshot */
  --edge: transparent; /* a panel's outline: only with Increase Contrast */
  --field: #8a8a8a;   /* input borders: 3.4:1 */
  --accent: #ff4f00;  /* Heura orange */
  --foot-edge: #000000; /* the footer's top edge: in light it's the footer itself */
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --gutter: clamp(20px, 4vw, 48px);
  --header: 64px;
  color-scheme: light;
}
/* dark: panels #161616 stand apart from the black page (1.16:1); secondary text 8.3:1 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #000000; --panel: #161616; --ink: #f5f5f5; --ink-2: #a3a3a3; --line: #262626; --rule: #303030;
    --ring: #2c2c2c; --field: #6e6e6e; --accent: #ff6a26; --foot-edge: #262626;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #000000; --panel: #161616; --ink: #f5f5f5; --ink-2: #a3a3a3; --line: #262626; --rule: #303030;
  --ring: #2c2c2c; --field: #6e6e6e; --accent: #ff6a26; --foot-edge: #262626;
  color-scheme: dark;
}
/* Increase Contrast: stronger secondary text and rules, and panels get an outline.
   Light: secondary 12.6:1, outlines 4.5:1. Dark: secondary 14.4:1, outlines 6.5:1. */
@media (prefers-contrast: more) {
  :root { --ink-2: #333333; --line: #8a8a8a; --rule: #8a8a8a; --ring: #767676; --edge: #767676; --field: #5f5f5f; }
  :root[data-theme="dark"] { --ink-2: #d6d6d6; --line: #7a7a7a; --rule: #7a7a7a; --ring: #8f8f8f; --edge: #8f8f8f; --field: #a3a3a3; --foot-edge: #7a7a7a; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink-2: #d6d6d6; --line: #7a7a7a; --rule: #7a7a7a; --ring: #8f8f8f; --edge: #8f8f8f; --field: #a3a3a3; --foot-edge: #7a7a7a; }
}
/* site.js adds this class for a moment when the appearance changes, so only a change cross-fades */
:root.ov-theming {
  transition: --page .25s ease, --panel .25s ease, --ink .25s ease, --ink-2 .25s ease, --line .25s ease, --rule .25s ease,
    --ring .25s ease, --edge .25s ease, --field .25s ease, --accent .25s ease, --foot-edge .25s ease;
}

/* ---- base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  display: flex; flex-direction: column; min-height: 100vh; margin: 0;
  background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55; font-weight: 400; letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--page); }
.ov-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* a picture made in each appearance: only the one that matches shows */
.ov-for-dark { display: none; }
:root[data-theme="dark"] .ov-for-light { display: none; }
:root[data-theme="dark"] .ov-for-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ov-for-light { display: none; }
  :root:not([data-theme]) .ov-for-dark { display: block; }
}

/* ---- type */
.ov-display {
  font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw + 18px, 80px);
  line-height: 1.02; letter-spacing: -.022em; text-wrap: balance;
}
.ov-h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 2.4vw + 20px, 56px);
  line-height: 1.05; letter-spacing: -.018em; text-wrap: balance;
}
.ov-lead,
.ov-section-lead {
  max-width: 28em; font-family: var(--serif); font-size: clamp(19px, .45vw + 15.5px, 22px);
  line-height: 1.42; color: var(--ink-2); text-wrap: pretty;
}
.ov-section-lead { margin-top: 16px; max-width: 30em; }

/* ---- buttons: pills; the primary is filled with the ink */
.ov-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ov-btn-primary { background: var(--ink); color: var(--page); }
.ov-btn-quiet { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
@media (hover: hover) {
  .ov-btn-primary:hover { background: color-mix(in srgb, var(--ink) 80%, var(--page)); }
  .ov-btn-quiet:hover { background: color-mix(in srgb, var(--panel) 90%, var(--ink)); }
}
.ov-btn-small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.ov-btn-small::before { content: ""; position: absolute; inset: -2px 0; } /* 44px to tap */

/* ---- header: solid; a rule appears once the page scrolls */
.ov-top {
  position: sticky; top: 0; z-index: 10; background: var(--page);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.ov-top.is-scrolled { border-bottom-color: var(--line); }
.ov-top-row { display: flex; align-items: center; gap: 24px; min-height: var(--header); }
.ov-logo {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap;
  font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1;
}
.ov-mark { position: relative; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--ink); overflow: hidden; }
.ov-mark::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 8px; background: var(--accent); }
.ov-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ov-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  font-size: 15px; color: var(--ink-2); transition: color .15s ease;
}
@media (hover: hover) { .ov-nav a:hover { color: var(--ink); } }
.ov-top-row > .ov-btn { flex: none; }
@media (max-width: 759px) {
  .ov-nav { display: none; }
  .ov-top-row > .ov-btn { margin-left: auto; }
}

/* ---- panels: the grey behind a picture or a model */
.ov-panel { border: 1px solid var(--edge); border-radius: clamp(16px, 1.8vw, 24px); background: var(--panel); }

/* a screenshot standing in a panel, cut off by the panel's bottom edge */
.ov-shot { overflow: hidden; padding: clamp(20px, 4.4vw, 64px) clamp(20px, 4.4vw, 64px) 0; }
.ov-shot-img { display: block; }
.ov-shot img {
  width: 100%; border-radius: clamp(6px, .8vw, 10px) clamp(6px, .8vw, 10px) 0 0;
  box-shadow: 0 0 0 1px var(--ring); background: var(--page);
}

/* ---- hero: the headline on the page's left edge, the lead and the buttons beside it, then Heura Studios itself */
.ov-hero-stage { padding-top: clamp(40px, 7vw, 104px); }
.ov-intro {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(32px, 5vw, 80px); align-items: end;
}
.ov-line { display: inline-block; }
.ov-hero-line { display: block; }
.ov-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ov-hero .ov-shot { margin-top: clamp(40px, 6vw, 80px); }
/* on a phone, the screen at a size that can be read: its top-left corner, running off the panel's right edge */
@media (max-width: 559px) { .ov-hero .ov-shot-img { width: 180%; } }
@media (max-width: 999px) {
  .ov-intro { grid-template-columns: minmax(0, 1fr); }
  .ov-intro-side { margin-top: 20px; }
}
/* the hero's scene (site.js turns it on with motion, in a window at least 560px tall): the stage holds still under the
   header while the runway after it scrolls by, and site.js moves the screen and brings in the lead's words and the
   buttons as it goes, with translate, scale and opacity (the reveals transition none of them). The hero clips what
   runs off the window's right edge, so nothing scrolls sideways; clip, unlike hidden, leaves the stage free to stick.
   A button that hasn't come in yet takes no clicks. */
.ov-hero-runway { height: 0; }
.ov-scene { overflow-x: clip; }
.ov-scene .ov-hero-stage { position: sticky; top: calc(var(--header) + 1px); } /* under the header and its rule */
.ov-scene .ov-hero-runway { height: var(--scene, 0px); }
.ov-scene .ov-intro { position: relative; z-index: 1; }
.ov-scene .ov-shot { transform-origin: 0 0; will-change: translate, scale; }
.ov-word { display: inline-block; }
/* read by screen readers, not shown: the lead's sentence, whole, beside the words the scene brings in */
.ov-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- sections */
.ov-section { margin-top: clamp(96px, 11vw, 168px); scroll-margin-top: calc(var(--header) + 32px); }
.ov-head { max-width: 760px; }
.ov-head + * { margin-top: clamp(40px, 5vw, 64px); }

/* ---- models: Arche, the one that's out, large; the two still coming beside it */
.ov-models { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.ov-model { display: flex; flex-direction: column; min-height: 260px; padding: clamp(24px, 2.8vw, 40px); }
.ov-model-main { grid-row: span 2; min-height: clamp(440px, 44vw, 600px); }
.ov-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
.ov-status.is-available { color: var(--ink); }
.ov-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ov-dot::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0; pointer-events: none; }
.ov-model-name {
  margin-top: auto; padding-top: 40px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 1vw + 20px, 36px); line-height: 1.05; letter-spacing: -.015em;
}
.ov-model-main .ov-model-name { font-size: clamp(44px, 4vw + 20px, 80px); letter-spacing: -.024em; }
.ov-model-text { margin-top: 10px; max-width: 26em; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.ov-model-main .ov-model-text { margin-top: 14px; font-size: 17px; }
.ov-specs { margin-top: 28px; border-top: 1px solid var(--rule); }
.ov-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.4; }
.ov-specs dt { color: var(--ink-2); }
.ov-specs dd { text-align: right; }
@media (max-width: 899px) {
  .ov-models { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ov-model-main { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
}
@media (max-width: 559px) {
  .ov-models { grid-template-columns: minmax(0, 1fr); }
  .ov-model { min-height: 0; }
}

/* ---- how it works: a tour. The stage stays in view while the four steps scroll by beside it (above them on narrow
   screens); it shows the screen of the step level with it, and each step's rule fills in as it's passed. */
.ov-tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 80px); }
.ov-tour-stage {
  position: sticky; z-index: 1; grid-column: 2; grid-row: 1; align-self: start; display: grid;
  top: max(calc(var(--header) + 16px), calc((100vh + var(--header) - var(--stage-h, 440px)) / 2));
}
.ov-tour-shot { grid-area: 1 / 1; }
.ov-tour .ov-shot { padding: clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px) 0; }
.ov-js .ov-tour-shot {
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985);
  transition: opacity .45s ease, transform .7s var(--ease-out), visibility 0s linear .45s;
}
.ov-js .ov-tour-shot.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .7s var(--ease-out), visibility 0s; }
:root:not(.ov-js) .ov-tour-shot:not(.is-active) { display: none; }
.ov-tour-steps { grid-column: 1; grid-row: 1; }
.ov-tour-step { display: flex; flex-direction: column; justify-content: center; min-height: 64vh; }
.ov-tour-text { position: relative; max-width: 28em; padding-top: 20px; }
.ov-tour-text::before,
.ov-tour-text::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; transform-origin: 0 50%; }
.ov-tour-text::before { background: var(--line); }
.ov-tour-text::after { background: var(--ink); transform: scaleX(var(--fill, 1)); }
.ov-step-n { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ov-tour-step h3 {
  margin-top: clamp(16px, 2vw, 24px); font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 1.4vw + 20px, 40px); line-height: 1.08; letter-spacing: -.014em; transition: color .3s ease;
}
.ov-js .ov-tour-step:not([aria-current]) h3 { color: var(--ink-2); }
.ov-tour-step p { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
/* narrow screens: the stage sits above the steps, and the text of the step being read waits just under it until the
   next one pushes it on */
@media (max-width: 899px) {
  .ov-tour { grid-template-columns: minmax(0, 1fr); }
  .ov-tour-stage { grid-column: 1; top: var(--header); margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) 16px; background: var(--page); }
  .ov-tour-steps { grid-row: 2; }
  .ov-tour-step { justify-content: flex-start; min-height: 60vh; padding-top: 24px; }
  .ov-tour-text { position: sticky; top: calc(var(--header) + var(--stage-h, 268px) + 20px); }
  .ov-tour .ov-shot { height: clamp(180px, min(42vw, 40vh), 340px); }
}
/* a phone on its side has no room to pin anything: the stage and the steps just scroll */
@media (max-width: 899px) and (max-height: 520px) {
  .ov-tour-stage, .ov-tour-text { position: static; }
}
@media (max-width: 559px) { .ov-tour .ov-shot-img { width: 170%; } }

/* the chat bubble the sample AI puts on a website: its window (a screenshot) above the bubble (a real button that
   opens and closes it, like the real one). The panel is the website. Sizes are the widget's own, scaled together:
   the window 372 wide in a 420 by 536 box, the bubble 56 across, 20 in from the right. */
.ov-chat { position: relative; overflow: hidden; --chat-pad: clamp(12px, 2.2vw, 32px); }
.ov-tour .ov-chat-box { top: auto; bottom: var(--chat-pad); height: calc(86% - var(--chat-pad)); }
.ov-chat-box { position: absolute; top: var(--chat-pad); right: var(--chat-pad); height: calc(100% - 2 * var(--chat-pad)); aspect-ratio: 420 / 536; }
.ov-chat-card {
  position: absolute; top: 0; right: 0; width: 100%; height: auto; transform-origin: 95.2% 88.5%;
  transition: opacity .2s ease, transform .55s cubic-bezier(.2, .9, .25, 1.15);
}
.ov-js .ov-chat:not(.is-open) .ov-chat-card {
  opacity: 0; transform: scale(.5) translateY(6%); transition: opacity .2s ease .06s, transform .3s cubic-bezier(.4, 0, 1, 1);
}
.ov-chat-bubble {
  position: absolute; right: 4.762%; bottom: 0; display: grid; place-items: center; width: 13.333%; aspect-ratio: 1 / 1;
  margin: 0; padding: 0; border: 1px solid rgba(0, 0, 0, .16); border-radius: 50%; background: #ffc21a; color: #000;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); cursor: pointer; transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ov-chat-bubble::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; } /* bigger to tap than it looks */
.ov-chat-bubble svg { width: 48%; height: 48%; }
@media (hover: hover) { .ov-chat-bubble:hover { transform: translateY(-1px); } }
.ov-chat-bubble:active { transform: scale(.94); }
.ov-chat-bubble:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ov-chat.is-open .ov-chat-icon-chat,
.ov-chat:not(.is-open) .ov-chat-icon-down { display: none; }

/* ---- starter kits: what's in every kit on the left, each kit's documents on the right */
.ov-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.ov-split > .ov-head + * { margin-top: 0; }
.ov-kits { position: relative; }
.ov-kits::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.ov-kit { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 24px; padding: 20px 0 21px; border-bottom: 1px solid var(--line); }
.ov-kit h3, .ov-kit h4 { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.ov-kit-docs { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.ov-kit-docs li { display: inline; }
.ov-kit-docs li:not(:last-child)::after { content: ", "; }
@media (max-width: 899px) {
  .ov-split { grid-template-columns: minmax(0, 1fr); }
  .ov-split > .ov-head + * { margin-top: clamp(32px, 5vw, 48px); }
}
@media (max-width: 479px) { .ov-kit { grid-template-columns: minmax(0, 1fr); } }
/* ---- bring your own: under the model cards, the same list as the kits */
.ov-byo { margin-top: clamp(64px, 8vw, 112px); }
.ov-byo-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 1.4vw + 18px, 40px);
  line-height: 1.1; letter-spacing: -.016em; text-wrap: balance;
}

/* ---- closing: the same shape as the hero */
.ov-closing { margin-top: clamp(112px, 13vw, 200px); padding-bottom: clamp(88px, 10vw, 144px); }
.ov-closing .ov-display { font-size: clamp(36px, 3.4vw + 18px, 64px); }

/* ---- footer: always dark */
.ov-foot {
  --page: #000000; --panel: #1f1f1f; --ink: #f5f5f5; --ink-2: #a3a3a3; --line: #2a2a2a;
  padding: clamp(48px, 6vw, 80px) 0 28px; border-top: 1px solid var(--foot-edge);
  background: var(--page); color: var(--ink); font-size: 15px; line-height: 1.5;
}
@media (prefers-contrast: more) { .ov-foot { --ink-2: #d6d6d6; --line: #7a7a7a; } }
.ov-foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); }
.ov-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 559px) { .ov-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ov-foot-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.ov-foot-cols ul { margin-top: 6px; }
.ov-foot-cols a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); transition: color .15s ease; }
@media (hover: hover) { .ov-foot-cols a:hover { color: var(--ink); } }
.ov-foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}
@media (max-width: 759px) { .ov-foot-top { grid-template-columns: minmax(0, 1fr); } }

/* the appearance setting: System, Light, Dark. It needs JavaScript, so it only shows with it. */
.ov-appearance { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
:root:not(.ov-js) .ov-appearance { display: none; }
.ov-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); }
.ov-seg label { position: relative; display: inline-flex; }
.ov-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ov-seg span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1; color: var(--ink-2); transition: background-color .15s ease, color .15s ease;
}
.ov-seg input:checked + span { background: var(--ink); color: var(--page); }
.ov-seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .ov-seg input:not(:checked):hover + span { color: var(--ink); } }

/* ---- motion. Things rise into place once as they come into view (site.js adds .is-in); the hero's screen rises out
   of its panel; the model cards pop; the rule above the kits draws itself; Arche's dot pings twice. All of it only
   under .ov-motion, which the head script sets unless Reduce Motion is on: without JavaScript nothing is hidden, and
   if site.js never runs, everything shows after a moment anyway. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
.ov-motion [data-reveal] { opacity: 0; transform: translateY(24px); }
.ov-motion [data-reveal="pop"] { transform: translateY(40px) scale(.96); }
.ov-motion [data-reveal="window"] { transform: none; }
.ov-motion [data-reveal="window"] .ov-shot-img { transform: translateY(72px); }
.ov-motion [data-reveal="rule"] { opacity: 1; transform: none; }
.ov-motion [data-reveal="rule"]::before { transform: scaleX(0); }
.ov-motion.ov-live [data-reveal] { transition: opacity .8s var(--ease-out) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s); }
.ov-motion.ov-live [data-reveal="window"] .ov-shot-img { transition: transform 1.3s var(--ease-out) calc(var(--d, 0s) + .08s); }
.ov-motion.ov-live [data-reveal="rule"]::before { transition: transform 1.2s var(--ease-out) var(--d, 0s); }
.ov-motion [data-reveal].is-in { opacity: 1; transform: none; }
.ov-motion [data-reveal="window"].is-in .ov-shot-img,
.ov-motion [data-reveal="rule"].is-in::before { transform: none; }
.ov-motion:not(.ov-live) [data-reveal],
.ov-motion:not(.ov-live) [data-reveal] .ov-shot-img,
.ov-motion:not(.ov-live) [data-reveal="rule"]::before { animation: ov-show .6s ease 2.5s forwards; }
@keyframes ov-show { to { opacity: 1; transform: none; } }
.ov-motion [data-parallax] { translate: 0 var(--shift, 0px); }
.ov-motion .ov-model-main.is-in .ov-dot::after { animation: ov-ping 1.5s var(--ease-out) .9s 2; }
@keyframes ov-ping { from { opacity: .85; transform: scale(.4); } to { opacity: 0; transform: scale(1.9); } }

@media print {
  .ov-motion [data-reveal], .ov-motion [data-reveal] .ov-shot-img { opacity: 1 !important; transform: none !important; }
  .ov-scene .ov-hero-stage { position: static; }
  .ov-scene .ov-hero-runway { height: 0; }
  .ov-scene h1, .ov-scene .ov-shot, .ov-scene .ov-word, .ov-scene .ov-btn { opacity: 1 !important; translate: none !important; scale: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  :root.ov-theming { transition: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}