/* Self-hosted fonts (latin + latin-ext subsets, SIL OFL). Browsers only download a face
   when text on the page uses it, so each page fetches just what it needs. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lora-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/lora-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/lora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/saira-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/saira-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/saira-condensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/saira-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #fff;
  --surface: #f7f7f3;
  --ink: #202222;
  --muted: #686b68;
  --line: #e1e3df;
  --accent: #6c5cbd;
  --sans: 'DM Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1,h2,h3,p { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
a:focus-visible,button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: #dfd8f8; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 15px; background: white; }
.skip-link:focus { top: 12px; }
.site-header { max-width: 1440px; height: 92px; padding: 0 5%; margin: auto; display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; align-items: center; text-decoration: none; font-size: 29px; font-weight: 700; letter-spacing: -1.5px; }
.brand-light { font-weight: 400; }
.brand-period { color: var(--accent); }
nav { display: flex; align-items: center; gap: 35px; }
nav > a { font-size: 12px; text-decoration: none; }
nav > a:not(.nav-contact) { position: relative; }
nav > a:not(.nav-contact)::after { content: ''; position: absolute; inset: auto 0 -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
nav > a:not(.nav-contact):hover::after { transform: scaleX(1); }
.nav-contact { background: var(--ink); color: white; border-radius: 6px; padding: 12px 18px; transition: background .2s; }
.nav-contact:hover { background: #4a414f; }
.nav-contact span { margin-left: 25px; }

/* Language menu (generated by tools/build_i18n.py). A native <details>, so it
   works without JavaScript; i18n.js only remembers the choice and closes it. */
.lang-switch { position: relative; }
.lang-switch summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; letter-spacing: .3px; cursor: pointer; list-style: none; user-select: none; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover, .lang-switch[open] summary { background: var(--surface); }
.lang-switch summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-globe { flex-shrink: 0; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px #2022221f; }
.lang-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lang-menu a:hover { background: var(--surface); }
.lang-menu a[aria-current] { font-weight: 600; }
.lang-menu a[aria-current]::after { content: ''; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--accent); }
.eyebrow { font-size: 10px; letter-spacing: 1.7px; font-weight: 500; line-height: 1.8; }

/* Typographic introduction; product photography appears only in the collection. */
.hero { max-width: 1440px; margin: auto; padding: 40px 5% 48px; display: grid; grid-template-columns: 1fr 280px; gap: 20px 7%; align-items: end; }
/* Big headlines shrink to fit their box in every language. The build writes
   the longest line and word, in estimated em, as --fit-em / --fit-word-em
   (tools/build_i18n.py); --k corrects that estimate for the font in use. */
.hero-line { --sym: clamp(64px, 8.6vw, 124px); --gap: 25px; position: relative; display: flex; align-items: flex-end; gap: var(--gap); container-type: inline-size; }
.hero h1 { --size: clamp(76px, 8.7vw, 128px); font-size: var(--size); font-size: min(var(--size), calc((100cqi - var(--sym) - var(--gap) - 4px) / (var(--fit-em, .01) * 1.12))); font-weight: 600; line-height: .96; letter-spacing: -.075em; }
.hero h1 span { color: #777b73; }
.hero-symbol { flex-shrink: 0; width: var(--sym); height: auto; color: #bbacd9; margin-bottom: 10px; transform: rotate(12deg); animation: symbol-enter 1.1s cubic-bezier(.2,.8,.2,1) both; }
.hero-line:hover .hero-symbol { transform: rotate(102deg); transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.hero-summary { padding-bottom: 4px; }
.hero-summary > p { font-size: 15px; line-height: 1.8; color: var(--muted); }
.hero-jump { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; margin-top: 18px; max-width: 220px; font-size: 12px; text-decoration: none; border-bottom: 1px solid #b6bbb2; }
.hero-jump span { font-size: 20px; transition: transform .25s; }
.hero-jump:hover span { transform: translateY(4px); }
.hero-line,.hero-summary { animation: hero-enter .7s cubic-bezier(.2,.8,.2,1) both; }

.apps-section { max-width: 1440px; margin: auto; padding: 0 5% 44px; }
.collection-header { border-top: 1px solid var(--line); padding-top: 24px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
h2 { font-family: var(--sans); font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -1.7px; font-weight: 500; }
.collection-header h2 { font-size: 19px; font-weight: 500; letter-spacing: -.5px; display: flex; align-items: center; gap: 10px; }
.collection-count { font-size: 10px; letter-spacing: 0; color: var(--muted); align-self: flex-start; }
.apps-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: stretch; }
/* One shared frame for all four cards — same 18px corners, same hairline,
   same lift on hover. What stays per-app is the typeface, the surface tint
   and the accent, read from that app's own source (see README). */
.app-card { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 18px; font-family: var(--card-font); display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; padding: 26px; min-width: 0; scroll-margin-top: 24px; }

/* Antrio and Antrio Coach — both apps are dark-only (theme.dart: "TEK tema:
   koyu"), so their cards are too: the app's #191919 card on a #2e2e2e line,
   bone text, Saira for body and Saira Condensed for display type, as in the
   app. They share everything but the accent: amber for Antrio, mint for
   Coach. Not released yet, so no store links. */
.app-card.card-antrio, .app-card.card-antriocoach {
  --card-bg: #191919; --card-line: #2e2e2e;
  --card-font: 'Saira', system-ui, sans-serif;
  --k: .97; /* headline width vs the build's estimate, measured per font */
  --title-weight: 600; --title-tracking: .01em;
  --headline-weight: 600; --headline-tracking: 0;
  color: #f2f3ea;
}
.app-card.card-antrio { --card-accent: #f2b84b; }
.app-card.card-antriocoach { --card-accent: #57d9a3; }
.app-card.card-antrio :is(h3, .app-headline), .app-card.card-antriocoach :is(h3, .app-headline) { font-family: 'Saira Condensed', 'Saira', system-ui, sans-serif; }
.app-card.card-antrio .app-description, .app-card.card-antriocoach .app-description { color: #a2a498; }
/* Saira Condensed is narrow, so at the shared sizes these read smaller than
   the other cards. Set both title and headline ~25% larger on desktop. */
@media (min-width: 601px) {
  .app-card.card-antrio h3, .app-card.card-antriocoach h3 { font-size: clamp(27px, 2.75vw, 37px); }
  .app-card.card-antrio .app-headline, .app-card.card-antriocoach .app-headline { --size: clamp(27px, 2.9vw, 38px); line-height: 1.02; }
}
/* On the dark cards the site's ink button would vanish; use the app's own
   treatment instead — accent fill with black text (theme.dart onAccent). */
.app-card.card-antrio .learn-more, .app-card.card-antriocoach .learn-more { background: var(--card-accent); color: #000; font-family: 'Saira', system-ui, sans-serif; }
.app-card.card-antrio .learn-more:hover, .app-card.card-antriocoach .learn-more:hover { background: #fff; }
.coming-soon { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 999px; background: #111111eb; border: 1px solid #2e2e2e; color: var(--card-accent); font-family: 'Saira', system-ui, sans-serif; font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* Yearvana — Poppins with the app's wide heading tracking, over the aurora
   wallpaper from aurora_surface.dart. */
.card-yearvana {
  --card-bg: #f7f9fc; --card-accent: #0d677b; --card-line: #dbe3ea;
  --card-font: 'Poppins', system-ui, sans-serif; --k: 1.36;
  --title-weight: 600; --title-tracking: .1em;
  --headline-weight: 600; --headline-tracking: 0;
  background:
    radial-gradient(58% 52% at 12% 16%, #7c8ce840, transparent 70%),
    radial-gradient(52% 48% at 88% 10%, #29c8e045, transparent 70%),
    radial-gradient(62% 58% at 80% 90%, #35d9a838, transparent 72%),
    radial-gradient(48% 44% at 28% 94%, #f5a4c530, transparent 70%),
    linear-gradient(#fffdfe, #f7f9fc);
}
/* TimeTone — the system face the app itself uses, no custom font. */
.card-timetempo {
  --card-bg: #f3e5e5; --card-accent: #d01010; --card-line: #e2cfcf;
  --card-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --k: 1.16;
  --title-weight: 700; --title-tracking: -.022em;
  --headline-weight: 600; --headline-tracking: -.02em;
}
/* Pialist — Lora on the app's own ivory. */
.card-pialist {
  --card-bg: #f5f3ed; --card-accent: #826a1c; --card-line: #d8d4c8;
  --card-font: 'Lora', Georgia, serif; --k: 1.22;
  --title-weight: 600; --title-tracking: -.01em;
  --headline-weight: 600; --headline-tracking: -.02em;
}
/* Hybrite — Lora and the lowercase wordmark, on the app's own beige. */
.card-hybrite {
  --card-bg: #f0e9e0; --card-accent: #ae4c2b; --card-line: #e0d5cc;
  --card-font: 'Lora', Georgia, serif; --k: 1.22;
  --title-weight: 400; --title-tracking: -.02em;
  --headline-weight: 400; --headline-tracking: -.01em;
}
.app-card.card-hybrite h3 { text-transform: lowercase; }

.app-copy { position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.app-index { font-size: 8px; letter-spacing: .8px; color: var(--card-accent); line-height: 1.5; text-wrap: balance; }
.app-card h3 { font-size: clamp(22px,2.2vw,30px); font-weight: var(--title-weight); letter-spacing: var(--title-tracking); margin-top: 22px; }
/* Shrinks up to 25% to keep the designed line breaks, then wraps. */
.app-headline { --size: clamp(22px,2.35vw,31px); --fit: var(--fit-em, .01); font-size: var(--size); font-size: clamp(calc(var(--size) * .75), calc(100cqi / (var(--fit) * var(--k, 1))), var(--size)); line-height: 1.08; font-weight: var(--headline-weight); letter-spacing: var(--headline-tracking); margin-top: 22px; }
/* Darker than --muted: the warm card tints need it to clear 4.5:1 (4.66-5.51). */
.app-description { font-size: 11px; color: #656765; line-height: 1.8; margin: 17px 0 20px; max-width: 200px; }
/* The app's real App Store icon, bottom left of the copy column. */
.learn-more { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 22px; padding: 9px 15px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 11px; font-weight: 600; text-decoration: none; transition: background .2s; }
.learn-more:hover { background: #3a3d3d; }
.learn-more span { transition: transform .2s; }
.learn-more:hover span { transform: translateX(3px); }
.app-icon { width: 64px; height: 64px; margin-top: auto; border-radius: 22%; box-shadow: 0 2px 8px #20222214; }

/* align-self:start keeps this column the height of the photo, so the
   absolutely positioned badges land inside the image, not under it. */
.app-media { position: relative; align-self: start; min-width: 0; display: flex; flex-direction: column; container: shot / inline-size; }
.app-image { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #202222; aspect-ratio: 1/1.3; }
/* Hover zooms into the phone screen. All four photos come from one mockup
   template, so the screen centre sits at the same spot (50% 45%) in each.
   Triggered from .app-media so the zoom holds while the pointer crosses onto
   the buttons that sit over the photo. The photo itself is not a link. */
.app-image img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 45%; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover) { .app-media:hover .app-image img { transform: scale(1.4); } }
/* Store badges sit inside the screenshot, centred along the bottom. */
.store-links { position: absolute; left: 8px; right: 8px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.store-links a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 6px 9px; border-radius: 999px; background: #fffffff2; color: var(--ink); text-decoration: none; transition: background .2s, transform .2s; }
.store-links a:hover { background: #fff; transform: translateY(-1px); }
.store-icon { width: 15px; height: 18px; flex-shrink: 0; }
.store-label { font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
/* Two labelled badges need ~217px. On photos narrower than that (screens
   around 850-1000px) they drop to icon-only so they stay on one row. */
@container shot (max-width: 225px) {
  .store-links a { width: 36px; padding: 0; }
  .store-label { display: none; }
}
.app-card:has(:focus-visible) { box-shadow: 0 0 0 2px var(--card-accent); }

.contact-section { width: 90%; max-width: 1296px; margin: 0 auto 35px; padding: 34px 40px; border: 1px solid #e4e4dc; border-radius: 15px; background: #f6f6f1; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.contact-section .eyebrow { margin-bottom: 15px; }
.contact-section h2 { font-size: clamp(30px,3.5vw,46px); letter-spacing: -1.8px; }
.contact-link { display: inline-flex; gap: 45px; align-items: center; font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--ink); padding: 14px 0; }
.contact-link span { font-size: 28px; transition: transform .25s; }
.contact-link:hover span { transform: translate(3px,-3px); }
footer { max-width: 1440px; margin: auto; padding: 24px 5%; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
footer .brand { font-size: 22px; }
footer > span { font-size: 10px; color: var(--muted); }

/* 404 page: same type scale as the hero. */
.notfound { max-width: 1440px; margin: auto; padding: 60px 5% 90px; min-height: 60vh; container-type: inline-size; }
.notfound .eyebrow { color: var(--muted); }
.notfound h1 { --size: clamp(64px, 8vw, 118px); font-size: var(--size); font-size: min(var(--size), calc(100cqi / (var(--fit-em, .01) * 1.12))); font-weight: 600; line-height: .96; letter-spacing: -.075em; margin: 18px 0 26px; }
.notfound h1 span { color: #777b73; }
.notfound-copy { max-width: 360px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.notfound-links { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 34px; }
.notfound-links .contact-link { min-width: 180px; justify-content: space-between; }

/* Shared elements on the contact page. */
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 24px; }
.section-heading h2 { margin-top: 10px; }
.section-heading > p { font-size: 12px; color: var(--muted); }
.product-icon { width: 40px; height: 40px; border-radius: 22%; flex-shrink: 0; box-shadow: 0 1px 4px #20222214; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes symbol-enter { from { opacity: 0; transform: rotate(-65deg) scale(.8); } to { opacity: 1; transform: rotate(12deg) scale(1); } }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 240px; gap: 20px 4%; }
  .hero-line { --gap: 20px; }
  .hero-summary > p { font-size: 13px; }
  .app-card { gap: 16px; padding: 21px; }
  .app-description { font-size: 11px; }
  .store-links a { padding-inline: 10px; min-height: 36px; }
  .store-label { font-size: 10px; }
  .store-icon { width: 13px; height: 16px; }
}
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr 205px; padding-top: 30px; }
  .hero h1 { --size: 83px; }
  .hero-line { --sym: 65px; --gap: 17px; }
  .apps-grid { gap: 16px; }
  .app-card { grid-template-columns: 1fr; padding: 20px; gap: 22px; }
  .app-card h3 { font-size: 30px; margin-top: 15px; }
  .app-headline { --size: 32px; --fit: var(--fit-word-em, .01); margin-top: 15px; }
  .app-headline br { display: none; }
  .app-description { font-size: 13px; max-width: 100%; min-height: 40px; margin-top: 12px; }
  .app-icon { width: 56px; height: 56px; }
  .app-index { font-size: 10px; letter-spacing: .6px; }
  .collection-header { align-items: flex-start; flex-direction: column; gap: 15px; }
}
/* Phones. Every text is at least 11px (body copy 14-15px) and every link or
   button offers a 44px touch target, per Apple HIG / Material guidance. App
   cards stack into one column: icon beside the title, copy, then the photo at
   full width with labelled store badges inside it. */
@media (max-width: 600px) {
  html { -webkit-text-size-adjust: 100%; }
  .site-header { height: 72px; }
  .brand { font-size: 24px; min-height: 44px; }
  nav { gap: 4px; }
  nav > a { font-size: 14px; }
  nav > a:not(.nav-contact) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
  nav > a:not(.nav-contact)::after { left: 12px; right: 12px; bottom: 8px; }
  .nav-contact { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; }
  .nav-contact span { margin-left: 10px; }
  .nav-apps { display: none !important; }
  .lang-switch summary { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 8px; }
  .lang-menu { position: fixed; left: 12px; right: 12px; top: 72px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: calc(100vh - 96px); overflow-y: auto; }
  .lang-menu a { min-height: 44px; }

  .hero { grid-template-columns: 1fr; padding-top: 20px; padding-bottom: 32px; gap: 24px; }
  /* Phones: when two lines would drop below 60% of the size, split each line
     in two instead (at most 4 lines), so long languages keep a big headline. */
  .hero h1 { --size: clamp(64px, 19vw, 96px); --room: calc(100cqi - var(--sym) - var(--gap) - 4px); font-size: min(var(--size), max(calc(var(--room) / (var(--fit-em, .01) * 1.12)), min(calc(var(--room) / (var(--fit-half-em, .01) * 1.12)), calc(var(--size) * .6)))); }
  .hero-line { justify-content: space-between; }
  .hero-line { --sym: 64px; }
  .hero-symbol { margin-right: 4px; }
  .hero-summary { display: block; }
  .hero-summary > p { font-size: 16px; line-height: 1.7; }
  .hero-jump { max-width: none; min-height: 52px; margin-top: 20px; padding: 0; font-size: 15px; }
  .eyebrow { font-size: 11px; letter-spacing: 1.4px; }

  .apps-section { padding-bottom: 36px; }
  .collection-header { padding-top: 22px; margin-bottom: 18px; gap: 14px; }
  .collection-header h2 { font-size: 22px; }
  .collection-count { font-size: 12px; }
  .apps-grid { grid-template-columns: 1fr; gap: 16px; }

  .app-card { grid-template-columns: 1fr; padding: 18px; gap: 20px; border-radius: 20px; }
  .app-copy { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; }
  .app-icon { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; align-self: center; }
  .app-index { grid-column: 2; grid-row: 1; align-self: end; font-size: 11px; letter-spacing: .6px; }
  .app-card h3, .app-card.card-antrio h3, .app-card.card-antriocoach h3 { grid-column: 2; grid-row: 2; align-self: start; margin-top: 2px; font-size: 26px; line-height: 1.15; }
  .card-yearvana { --title-tracking: .06em; }
  .app-headline, .app-description, .learn-more { grid-column: 1 / -1; }
  .app-headline, .app-card.card-antrio .app-headline, .app-card.card-antriocoach .app-headline { --size: 32px; --fit: var(--fit-em, .01); line-height: 1.08; margin-top: 18px; }
  .app-headline br { display: block; }
  .app-description { font-size: 15px; line-height: 1.6; max-width: none; min-height: 0; margin: 10px 0 0; }
  .learn-more { justify-self: start; min-height: 44px; margin: 16px 0 0; padding: 0 18px; font-size: 14px; }

  /* Full-width photo: labelled badges fit again, at a 44px touch height. */
  .app-image { border-radius: 14px; }
  .store-links { left: 12px; right: 12px; bottom: 14px; gap: 8px; }
  .store-links a { width: auto; min-height: 44px; padding: 0 16px; gap: 7px; }
  .store-label { display: inline; font-size: 13px; }
  .store-icon { width: 16px; height: 19px; }
  .coming-soon { min-height: 40px; padding: 0 18px; font-size: 12px; }

  .contact-section { width: auto; margin: 0 5% 32px; padding: 26px 22px; flex-direction: column; align-items: stretch; gap: 20px; }
  .notfound h1 { font-size: min(var(--size), max(calc(100cqi / (var(--fit-em, .01) * 1.12)), min(calc(100cqi / (var(--fit-half-em, .01) * 1.12)), calc(var(--size) * .6)))); }
  .contact-section h2 { font-size: 32px; }
  .contact-link { justify-content: space-between; width: 100%; min-height: 52px; padding: 0; font-size: 15px; }

  footer { flex-wrap: wrap; row-gap: 6px; padding: 22px 5% 28px; }
  footer > span { font-size: 13px; }
  footer > span:nth-child(2) { display: none; }
  footer a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .section-heading > p { display: none; }
}
@media (max-width: 380px) {
  .hero h1 { --size: 64px; }
  .hero-line { --sym: 52px; }
  .nav-contact span { display: none; }
  nav > a:not(.nav-contact) { padding: 0 8px; }
  .app-card { padding: 16px; }
  .app-card h3, .app-card.card-antrio h3, .app-card.card-antriocoach h3 { font-size: 23px; }
  .app-headline, .app-card.card-antrio .app-headline, .app-card.card-antriocoach .app-headline { --size: 28px; }
  .store-links { left: 8px; right: 8px; gap: 6px; }
  .store-links a { padding: 0 11px; gap: 6px; }
}

/* Scripts our brand fonts do not cover. Cyrillic (ru, uk) and Vietnamese use
   the device's system face; Japanese, Korean and Chinese use their native
   system faces (web fonts for these are several MB). The "inciStudio"
   wordmark always stays in DM Sans. */
:root { --system-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
html:is([lang="ru"], [lang="uk"], [lang="vi"]) { --sans: var(--system-sans); }
html[lang="ja"] { --sans: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif; }
html[lang="ko"] { --sans: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
html[lang="zh-Hans"] { --sans: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }
html[lang="zh-Hant"] { --sans: system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }
html:is([lang="ru"], [lang="uk"], [lang="vi"], [lang="ja"], [lang="ko"], [lang^="zh"]) .app-card { --card-font: var(--sans); }
html:is([lang="ru"], [lang="uk"], [lang="vi"]) .app-card { --k: 1.22; }
/* Saira has no Cyrillic, Vietnamese or CJK glyphs: the Antrio buttons follow the language font. */
html:is([lang="ru"], [lang="uk"], [lang="vi"], [lang="ja"], [lang="ko"], [lang^="zh"]) .app-card :is(.learn-more, .coming-soon) { font-family: var(--sans); }
/* System fonts are already tight at display sizes; DM Sans' -0.075em crowds them. */
html:is([lang="ru"], [lang="uk"], [lang="vi"]) :is(.hero h1, .notfound h1) { letter-spacing: -.05em; }
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .app-card { --k: 1.02; }
html:is([lang="ru"], [lang="uk"], [lang="vi"], [lang="ja"], [lang="ko"], [lang^="zh"]) .app-card :is(h3, .app-headline) { font-family: var(--sans); }
.brand { font-family: 'DM Sans', system-ui, sans-serif; }
/* CJK: no negative tracking, a little more leading, keep words together. */
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) :is(.hero h1, h2, .app-card h3, .app-headline, .notfound h1) { letter-spacing: 0; line-height: 1.18; }
html:is([lang="ja"], [lang^="zh"]) body { line-break: strict; }
html[lang="ko"] body { word-break: keep-all; }
/* Japanese has no spaces: break at phrase boundaries where supported (Chrome). */
html[lang="ja"] :is(h1, h2, h3, .app-headline, .hero-summary p) { word-break: auto-phrase; }
/* CJK glyphs are roughly twice as wide as Latin ones at the same size. */
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .hero h1 { --size: clamp(44px, 5.2vw, 76px); }
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .app-card .app-headline { --size: clamp(19px, 2vw, 26px); }
@media (max-width: 850px) { html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .app-card .app-headline { --size: 26px; } }
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .contact-section h2 { font-size: clamp(26px, 3vw, 38px); }
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .notfound h1 { --size: clamp(44px, 5.2vw, 76px); }
/* Every language: spread multi-line headings evenly instead of leaving a stub. */
:is(.hero h1, .app-headline, .contact-section h2, .notfound h1) { text-wrap: balance; }

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