/* ─────────────────────────────────────────────────────────────────────────
   喵护照 Meowport · official site
   Paper and ink. The Studio's monoline line-art (stroke 9 / 6, round caps,
   ink on cream) meets the app's lavender: every drawing on the page is
   stroked in the text colour, so the same art reads in the light "paper"
   mode and the dark "ink" mode, and the four accent palettes mirror the
   app's own (Lilac / Clay / Sage / Print).

   Tokens: light values on :root; light-dark() pairs take over where the
   browser supports them, driven by color-scheme (system, or the saved
   choice the head bootstrap stamps as data-mode). Palettes only change the
   accent family — paper and ink stay.
   ───────────────────────────────────────────────────────────────────────── */
/* @theme-tokens */
/* Generated by Studio/site/tools/sync_theme_tokens.py from
   MeowportApp/Sources/MeowportThemeSystem.swift — the app's own palette
   table. Edit the Swift tokens (or the SCREEN map in the script), not this block.
   Light values on :root for browsers without light-dark(); the pairs below
   take over where it is supported, driven by color-scheme. */
:root {
  color-scheme: light dark;
  --paper: #F4F1F8; --paper-2: #ECE6F4; --paper-3: #F7F4FB; --card: #FFFFFF; --screen: #E9E2F2; --ink: #211C2B; --ink-2: #6B6479; --ink-3: #968CA6; --line: rgba(33,28,43,0.08); --line-2: rgba(33,28,43,0.14); --primary: #6E5DA8; --primary-2: #5C4D93; --primary-deep: #4A3E7C; --primary-soft: #EFEAF9; --on-primary: #F4F1F8; --accent: #7E6428; --ok: #2F7B52; --water: #4E67A5; --wash: #EFEAF9; --wash-2: #F7F4FB; --hero-a: #74619F; --hero-b: #5B4C92; --hero-c: #4A3E7C; --on-hero: #FFFFFF; --shadow-c: rgba(33,28,43,0.12);
}
:root[data-mode="light"] { color-scheme: light; }
:root[data-mode="dark"] { color-scheme: dark; }
@supports (color: light-dark(#000, #fff)) {
  :root {
    --paper: light-dark(#F4F1F8, #131019); --paper-2: light-dark(#ECE6F4, #0D0B12); --paper-3: light-dark(#F7F4FB, #262031); --card: light-dark(#FFFFFF, #1E1A27); --screen: light-dark(#E9E2F2, #2A2340); --ink: light-dark(#211C2B, #F2EEF8); --ink-2: light-dark(#6B6479, #ADA4BE); --ink-3: light-dark(#968CA6, #766E84); --line: light-dark(rgba(33,28,43,0.08), rgba(255,255,255,0.08)); --line-2: light-dark(rgba(33,28,43,0.14), rgba(255,255,255,0.14)); --primary: light-dark(#6E5DA8, #B6A4E8); --primary-2: light-dark(#5C4D93, #A693DC); --primary-deep: light-dark(#4A3E7C, #2A2348); --primary-soft: light-dark(#EFEAF9, rgba(150,131,210,0.18)); --on-primary: light-dark(#F4F1F8, #131019); --accent: light-dark(#7E6428, #E0BE6B); --ok: light-dark(#2F7B52, #8FCDB0); --water: light-dark(#4E67A5, #9AB4E8); --wash: light-dark(#EFEAF9, rgba(150,131,210,0.288)); --wash-2: light-dark(#F7F4FB, #262031); --hero-a: light-dark(#74619F, #5B4C92); --hero-b: light-dark(#5B4C92, #3E3368); --hero-c: light-dark(#4A3E7C, #2A2348); --on-hero: light-dark(#FFFFFF, #FFFFFF); --shadow-c: light-dark(rgba(33,28,43,0.12), rgba(0,0,0,0.35));
  }
  [data-theme="clay"] {
    --paper: light-dark(#F7F1EA, #191310); --paper-2: light-dark(#EFE6DB, #100B09); --paper-3: light-dark(#FBF6F0, #2E241D); --card: light-dark(#FFFFFF, #241B16); --screen: light-dark(#EFE3DB, #3A2A22); --ink: light-dark(#2C2118, #F6EEE6); --ink-2: light-dark(#766556, #C2AE9D); --ink-3: light-dark(#9C8C7C, #897868); --line: light-dark(rgba(44,33,24,0.08), rgba(255,255,255,0.08)); --line-2: light-dark(rgba(44,33,24,0.14), rgba(255,255,255,0.14)); --primary: light-dark(#A0552F, #E0997A); --primary-2: light-dark(#8A4826, #D08868); --primary-deep: light-dark(#6E3D26, #5A3322); --primary-soft: light-dark(#F6EBE2, rgba(204,131,95,0.18)); --on-primary: light-dark(#F7F1EA, #191310); --accent: light-dark(#4E6B56, #9CBBA3); --ok: light-dark(#2F6B4A, #9CCDA8); --water: light-dark(#4E67A5, #7EA0CF); --wash: light-dark(#F6EBE2, rgba(204,131,95,0.288)); --wash-2: light-dark(#FBF6F0, #2E241D); --hero-a: light-dark(#A55C36, #A85F3E); --hero-b: light-dark(#8B4E32, #7A4530); --hero-c: light-dark(#6E3D26, #5A3322); --on-hero: light-dark(#FFFFFF, #FFFFFF); --shadow-c: light-dark(rgba(44,33,24,0.12), rgba(0,0,0,0.35));
  }
  [data-theme="sage"] {
    --paper: light-dark(#EEF3F1, #101715); --paper-2: light-dark(#E2EAE7, #0A0F0D); --paper-3: light-dark(#F4F8F6, #212C28); --card: light-dark(#FFFFFF, #19221F); --screen: light-dark(#E1EBE6, #1E3A30); --ink: light-dark(#19251F, #EAF2EE); --ink-2: light-dark(#5C6E66, #A2B4AD); --ink-3: light-dark(#84958D, #6C7E77); --line: light-dark(rgba(25,37,31,0.08), rgba(255,255,255,0.08)); --line-2: light-dark(rgba(25,37,31,0.14), rgba(255,255,255,0.14)); --primary: light-dark(#33685D, #7FBDAE); --primary-2: light-dark(#2A574E, #6FAE9F); --primary-deep: light-dark(#254A41, #1F3C35); --primary-soft: light-dark(#DCEAE5, rgba(92,155,141,0.18)); --on-primary: light-dark(#EEF3F1, #101715); --accent: light-dark(#8A6228, #DBB173); --ok: light-dark(#3D7229, #96CD9E); --water: light-dark(#4E67A5, #7EA0CF); --wash: light-dark(#DCEAE5, rgba(92,155,141,0.288)); --wash-2: light-dark(#F4F8F6, #212C28); --hero-a: light-dark(#3F7568, #3F7568); --hero-b: light-dark(#305A4F, #2C5249); --hero-c: light-dark(#254A41, #1F3C35); --on-hero: light-dark(#FFFFFF, #FFFFFF); --shadow-c: light-dark(rgba(25,37,31,0.12), rgba(0,0,0,0.35));
  }
  [data-theme="print"] {
    --paper: light-dark(#F7F6F1, #090A0A); --paper-2: light-dark(#ECEAE3, #050606); --paper-3: light-dark(#F3F2EC, #1D2021); --card: light-dark(#FFFFFB, #141617); --screen: light-dark(#E9E6E0, #2A2A2A); --ink: light-dark(#161615, #F4F4EF); --ink-2: light-dark(#575650, #C5C4BC); --ink-3: light-dark(#908E86, #888983); --line: light-dark(rgba(22,22,21,0.11), rgba(244,244,239,0.1)); --line-2: light-dark(rgba(22,22,21,0.18), rgba(244,244,239,0.17)); --primary: light-dark(#1E1E1C, #E8E6DD); --primary-2: light-dark(#050505, #D6D3CA); --primary-deep: light-dark(#0F0F0E, #080909); --primary-soft: light-dark(#E4E2DA, rgba(232,230,221,0.14)); --on-primary: light-dark(#F7F6F1, #090A0A); --accent: light-dark(#706A5D, #A8AAA4); --ok: light-dark(#4A5248, #A9B3A6); --water: light-dark(#47525E, #A3AEB9); --wash: light-dark(#E4E2DA, rgba(232,230,221,0.224)); --wash-2: light-dark(#F3F2EC, #1D2021); --hero-a: light-dark(#3A3934, #323536); --hero-b: light-dark(#22221F, #1F2223); --hero-c: light-dark(#0F0F0E, #080909); --on-hero: light-dark(#FFFFFF, #FFFFFF); --shadow-c: light-dark(rgba(22,22,21,0.1), rgba(0,0,0,0.42));
  }
}
/* @/theme-tokens */

/* ── layout, type and geometry (site-owned) ──
   Corners follow the app's MeowportCorners roles: control 12, tile 14,
   field 18, card 24, panel 28, cover 32. Every card on the page is a 24
   like MeowportCard; where the browser can, corners are drawn as
   superellipses like Apple's continuous corners. */
:root {
  --maxw: 1180px;
  --r-control: 12px; --r-tile: 14px; --r-field: 18px; --r-card: 24px; --r-panel: 28px; --r-cover: 32px;
  --r-sm: var(--r-control); --r-md: var(--r-field); --r-lg: var(--r-card); --r-xl: var(--r-panel); --r-hand: var(--r-card);
  /* SF Pro Rounded where the platform has it (Safari's ui-rounded), Nunito —
     the same stand-in the App Store screenshots use — everywhere else, so
     the site's type is rounded like the app's on every browser. */
  --font: ui-rounded, "Nunito", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans", "Noto Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* the app's card shadow (radius 20, y 10) in CSS terms */
  --shadow: 0 1px 2px var(--shadow-c), 0 10px 32px -8px var(--shadow-c);
  --shadow-lg: 0 2px 4px var(--shadow-c), 0 24px 56px -16px var(--shadow-c);
  /* aliases used by the secondary pages' inline CSS */
  --bg: var(--paper); --surface: var(--card); --surface-2: var(--paper-2); --surface-3: var(--paper-3);
  --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
}

/* ── type: Nunito, self-hosted (assets/fonts, OFL) — the rounded face the App
   Store screenshots use as SF Pro Rounded's stand-in; only browsers without
   ui-rounded (everything but Safari) download it, one subset per script. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(assets/fonts/nunito-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(assets/fonts/nunito-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(assets/fonts/nunito-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(assets/fonts/nunito-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: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(assets/fonts/nunito-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; }

/* ── base ── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
html.i18n-pending body { visibility: hidden; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6;
  background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; color: inherit; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 28px; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
/* Apple's continuous corners: a superellipse where the browser supports it. */
@supports (corner-shape: squircle) {
  .gcard, .sys-card, .plan, .privacy-list .pl, .sc-col, .faq-item, .comm-card, .story-card, .email-box, .vig, .stage, .trust-in, .final .wrap, .ctl-panel, .roadmap-empty, .rm-card, .rm-card .ri, .brand .mark, .gcard .gi, .sys-card .si, .privacy-list .pi, .comm-card .ci { corner-shape: squircle; }
}
p { margin: 0; }

/* the app's own icons — template alpha masks, tinted with currentColor */
.mw-ico { display: inline-block; width: 1em; height: 1em; flex: none; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; vertical-align: -.125em; }
.mw-ico-apple { -webkit-mask-image: url(assets/icons/apple.svg); mask-image: url(assets/icons/apple.svg); }
.mw-ico-bowl { -webkit-mask-image: url(assets/icons/bowl.png); mask-image: url(assets/icons/bowl.png); }
.mw-ico-brushcare { -webkit-mask-image: url(assets/icons/brushcare.png); mask-image: url(assets/icons/brushcare.png); }
.mw-ico-check { -webkit-mask-image: url(assets/icons/check.png); mask-image: url(assets/icons/check.png); }
.mw-ico-globe { -webkit-mask-image: url(assets/icons/globe.png); mask-image: url(assets/icons/globe.png); }
.mw-ico-icloud { -webkit-mask-image: url(assets/icons/icloud.svg); mask-image: url(assets/icons/icloud.svg); }
.mw-ico-list { -webkit-mask-image: url(assets/icons/list.png); mask-image: url(assets/icons/list.png); }
.mw-ico-lock { -webkit-mask-image: url(assets/icons/lock.svg); mask-image: url(assets/icons/lock.svg); }
.mw-ico-pill { -webkit-mask-image: url(assets/icons/pill.png); mask-image: url(assets/icons/pill.png); }
.mw-ico-qr { -webkit-mask-image: url(assets/icons/qr.png); mask-image: url(assets/icons/qr.png); }
.mw-ico-rainbow { -webkit-mask-image: url(assets/icons/rainbow.png); mask-image: url(assets/icons/rainbow.png); }
.mw-ico-share { -webkit-mask-image: url(assets/icons/share.png); mask-image: url(assets/icons/share.png); }
.mw-ico-shield { -webkit-mask-image: url(assets/icons/shield.png); mask-image: url(assets/icons/shield.png); }
.mw-ico-stethoscope { -webkit-mask-image: url(assets/icons/stethoscope.png); mask-image: url(assets/icons/stethoscope.png); }
.mw-ico-trash { -webkit-mask-image: url(assets/icons/trash.png); mask-image: url(assets/icons/trash.png); }
.mw-ico-watch { -webkit-mask-image: url(assets/icons/watch.svg); mask-image: url(assets/icons/watch.svg); }
.mw-ico-trendUp { -webkit-mask-image: url(assets/icons/trendUp.png); mask-image: url(assets/icons/trendUp.png); }
.mw-ico-x { -webkit-mask-image: url(assets/icons/x.png); mask-image: url(assets/icons/x.png); }

/* ── buttons ── */
/* Capsules like the app's: a filled primary and a "soft" one on the primary
   tint (PrototypePrimaryButtonStyle / PrototypeSoftButtonStyle), semibold. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 15px; line-height: 1; padding: 13px 22px; border-radius: 999px; border: 0; transition: transform .15s, background .2s, box-shadow .2s, color .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn-primary:hover { background: var(--primary-2); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--primary) 80%, transparent); }
.btn-ghost { background: var(--primary-soft); color: var(--primary); }
.btn-ghost:hover { background: color-mix(in srgb, var(--primary) 22%, var(--card)); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 16px 28px; font-size: 16.5px; }
.btn .mw-ico { font-size: 18px; }

/* ── nav ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.scrolled { background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 26px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.brand .mark { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: none; }
.brand .mark-icon { width: 30px; height: 30px; object-fit: cover; }
.brand .en { color: var(--ink-3); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: flex; gap: 22px; margin-inline-start: 8px; }
.nav-links a { color: var(--ink-2); font-size: 14.5px; font-weight: 600; transition: color .2s; }
.nav-links a:hover, .nav-links a.current { color: var(--primary); }
.nav-cta { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

/* language + appearance controls */
.ctl { position: relative; }
.ctl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--card); border: 0; color: var(--ink); font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 1px 2px var(--shadow-c); transition: background .2s, box-shadow .2s; }
.ctl-btn:hover { background: var(--paper-3); box-shadow: var(--shadow); }
.ctl-btn svg { width: 16px; height: 16px; flex: none; color: var(--ink-2); }
.ctl-panel { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 200; display: none; padding: 8px; background: var(--card); border-radius: var(--r-field); box-shadow: var(--shadow-lg); }
.ctl-panel.show { display: block; }
.lang-current, .theme-current { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-panel { width: min(360px, calc(100vw - 32px)); }
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-height: min(60vh, 460px); overflow: auto; overscroll-behavior: contain; }
.lang-opt { text-align: start; padding: 8px 11px; border: 0; background: none; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.lang-opt:hover { background: var(--paper-2); color: var(--ink); }
.lang-opt.active { color: var(--primary); font-weight: 700; background: var(--primary-soft); }
.theme-panel { min-width: 236px; }
.theme-row { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-row + .theme-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.theme-opt { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1.5px solid transparent; border-radius: 999px; background: none; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.theme-opt:hover { background: var(--paper-2); color: var(--ink); }
.theme-opt.active { color: var(--primary); background: var(--primary-soft); }
.theme-swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid var(--line-2); }
/* the app's own swatch colours (MeowportThemePalette.swatchHex) */
.theme-swatch-lilac { background: linear-gradient(135deg, #B6A4E8, #6E5DA8); }
.theme-swatch-clay { background: linear-gradient(135deg, #E0997A, #C2785A); }
.theme-swatch-sage { background: linear-gradient(135deg, #7FBDAE, #4F8A7E); }
.theme-swatch-print { background: linear-gradient(135deg, #E8E6DD, #1E1E1C); }

/* ── section scaffold ── */
.sec { padding: 96px 0; position: relative; }
.sec-head { max-width: 720px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sec h2, .h2 { font-size: clamp(30px, 3.8vw, 48px); }
.sec h2 .soft, .h2 .soft { color: var(--ink-3); font-weight: 700; }
.sub { margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--ink-2); }
.sec-head.center .sub { margin-inline: auto; }
.fn { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.fn::before { content: "* "; }
.f-copy .fn, .privacy-list .fn { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ── hero ── */
.hero { position: relative; padding: 118px 0 36px; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; }
.hero-copy { text-align: start; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--primary); margin-bottom: 22px; background: var(--primary-soft); }
.eyebrow .dot { display: none; }
.hero h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -.03em; }
.hero h1 .soft { color: var(--primary); }
.hero .lead, .final .lead { margin: 20px 0 0; max-width: 540px; font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.65; color: var(--ink-2); }
.final .lead { margin-inline: auto; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.final .hero-actions { justify-content: center; }
.cta-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.hero-note { max-width: 520px; margin: 26px 0 0; }
.hero-art { direction: ltr; }
.hero-art #hero { display: block; width: 100%; max-width: 600px; height: auto; margin-inline-start: auto; }

/* ── trust strip ── */
.trust { padding: 8px 0 24px; }
.trust-in { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding-inline: 0; }
.trust .cell { padding: 24px 24px; border-inline-end: 1px solid var(--line); }
.trust .cell:last-child { border-inline-end: 0; }
.trust .cell .k { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; }
.trust .cell .k .mw-ico { font-size: 17px; color: var(--primary); }
.trust .cell .v { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

/* ── alternating feature rows ── */
/* padding-block, not the shorthand: three rows are `.wrap.feature` and must keep the wrap's side gutter */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 64px; }
.feature.flip .f-media { order: 2; }
.f-copy .tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 700; margin-bottom: 18px; }
.f-copy h3 { font-size: clamp(26px, 2.9vw, 36px); }
.f-copy h3.h2 { font-size: clamp(30px, 3.8vw, 48px); }
.f-copy > p { margin-top: 16px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); max-width: 480px; }
.f-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.f-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; line-height: 1.5; }
.f-list .ck { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-top: 1px; }
.f-list .ck .mw-ico { font-size: 12px; }
.f-media { display: grid; place-items: center; }
.stage { position: relative; width: 100%; max-width: 520px; padding: 44px 32px; display: grid; place-items: center; border-radius: var(--r-panel); background: var(--paper-2); overflow: hidden; }
.stage .halo { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, var(--primary-soft), transparent 68%); pointer-events: none; }
.stage .mw-frame { position: relative; z-index: 1; display: block; }
.frame-iphone { width: 270px; }
.frame-ipad { width: 520px; max-width: 100%; }
.frame-mac, .frame-tv { width: 640px; max-width: 100%; }
.frame-paper { width: 420px; max-width: 100%; }
.mw-frame { height: auto; color: var(--ink); }
/* A feature vignette: a small hand-placed card in a corner of the stage whose
   drawing acts out the feature (Studio/site/tools/build.py, vig-*). It pops in
   after the device has drawn itself; each corner leans its own way. */
.vig { position: absolute; z-index: 2; width: 132px; padding: 12px 13px; color: var(--ink); background: var(--card); border-radius: var(--r-field); box-shadow: var(--shadow); pointer-events: none; --tilt: -4deg; transform: rotate(var(--tilt)); }
.vig svg { display: block; width: 100%; height: auto; overflow: visible; }
.vig.tl { top: 22px; left: 14px; --tilt: -5deg; }
.vig.tr { top: 22px; right: 14px; --tilt: 4deg; }
.vig.bl { bottom: 26px; left: 14px; --tilt: 3deg; }
.vig.br { bottom: 26px; right: 14px; --tilt: -3deg; }
.paper-stage .vig.tr { top: 16px; right: 10px; width: 140px; }
.reveal .vig { opacity: 0; }
.reveal.in .vig { opacity: 1; animation: vig-pop .7s cubic-bezier(.2,1.2,.3,1) .85s backwards; }
@keyframes vig-pop { from { opacity: 0; transform: rotate(calc(var(--tilt) * -2)) scale(.6); } to { opacity: 1; transform: rotate(var(--tilt)) scale(1); } }
.paper-stage { padding-bottom: 64px; }
.paper-stage .chip { position: absolute; z-index: 2; bottom: 30px; inset-inline-start: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow); }
[dir="rtl"] .paper-stage .chip { transform: translateX(50%); }
.paper-stage .chip .mw-ico { color: var(--primary); font-size: 15px; }
.pdf .f-copy .kicker { margin-bottom: 14px; }

/* ── devices ── */
.devices { background: var(--paper-2); }
/* The app's segmented picker: a quiet track, the chosen option as a white pill. */
.dev-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, var(--paper-2)); margin-top: 32px; }
.dev-tab { padding: 10px 22px; border-radius: 999px; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink-2); transition: background .2s, color .2s; }
.dev-tab:hover { color: var(--ink); }
.dev-tab.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px var(--shadow-c), 0 6px 14px -6px var(--shadow-c); }
/* With script, a pill slides to the active tab instead of each tab painting its
   own background (index.html adds .dev-pill and .has-pill). */
.dev-tabs.has-pill { position: relative; }
.dev-tabs.has-pill .dev-tab { position: relative; z-index: 1; }
.dev-tabs.has-pill .dev-tab.active { background: none; box-shadow: none; }
.dev-pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px var(--shadow-c), 0 6px 14px -6px var(--shadow-c); transition: transform .42s cubic-bezier(.3,1.2,.4,1), width .42s cubic-bezier(.3,1.2,.4,1), height .3s; }
/* All four frames share one grid cell, so the stage is always as tall as the
   tallest device and switching never moves the rest of the page. */
.dev-stage { margin-top: 44px; position: relative; display: grid; place-items: center; }
.dev-panel { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; visibility: hidden; transition: opacity .22s ease-in, transform .22s ease-in, visibility 0s .22s; }
.dev-panel.show { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .45s cubic-bezier(.2,.8,.2,1) .08s, transform .55s cubic-bezier(.2,.8,.2,1) .08s, visibility 0s; }
.dev-panel .mw-frame { max-width: 100%; }
.dev-panel .badge { position: absolute; top: 4px; inset-inline-end: 8px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.dev-caption { text-align: center; margin-top: 30px; }
.dev-caption h4 { font-size: 22px; }
.dev-caption p { margin: 8px auto 0; font-size: 15.5px; color: var(--ink-2); max-width: 560px; line-height: 1.6; }

/* ── privacy ── */
.privacy { background: var(--paper-2); }
.privacy-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.privacy-copy .btn { margin-top: 26px; }
.privacy-copy .crate { width: min(320px, 100%); margin-top: 28px; color: var(--ink); }
.privacy-copy .crate svg { width: 100%; height: auto; display: block; }
.privacy-list { display: grid; gap: 14px; }
.privacy-list .pl { display: flex; gap: 15px; padding: 20px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.privacy-list .pi { width: 42px; height: 42px; flex: none; border-radius: 13px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.privacy-list .pi .mw-ico { font-size: 20px; }
.privacy-list h4 { font-size: 16.5px; }
.privacy-list p { margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* ── modules grid ── */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.gcard { text-align: start; background: var(--card); border: 0; border-radius: var(--r-card); padding: 26px; cursor: pointer; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; align-items: flex-start; }
.gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gcard:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.gcard .gi { width: 46px; height: 46px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: 18px; }
.gcard .gi .mw-ico { font-size: 22px; }
.gcard h4 { font-size: 18px; }
.gcard p { margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.gcard .go { margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--primary); }
.gcard .go::after { content: " →"; }
[dir="rtl"] .gcard .go::after { content: " ←"; }

/* ── module preview ── */
.mod-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 40px 20px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.mod-modal.show { opacity: 1; visibility: visible; }
.mod-modal[hidden] { display: none; }
.mod-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* The box grows out of the tapped card and shrinks back into it: index.html
   sets --fx/--fy (card centre minus viewport centre) and --fs. */
.mod-box { position: relative; z-index: 2; transform: translate(var(--fx, 0px), var(--fy, 18px)) scale(var(--fs, .94)); opacity: 0; transition: transform .42s cubic-bezier(.4,0,.6,1), opacity .3s ease-in; }
.mod-modal.show .mod-box { transform: none; opacity: 1; transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .25s ease-out; }
.mod-box .mw-frame { display: block; width: min(300px, 80vw, 39vh); height: auto; }
.mod-close { position: absolute; top: -14px; inset-inline-end: -14px; z-index: 5; width: 40px; height: 40px; border-radius: 999px; background: var(--card); border: 0; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s; }
.mod-close:hover { transform: scale(1.08); }
.mod-close .mw-ico { font-size: 16px; }

/* ── system cards ── */
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.sys-card { background: var(--card); border-radius: var(--r-card); padding: 26px; box-shadow: var(--shadow); }
.sys-card .si { width: 44px; height: 44px; border-radius: 13px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: 16px; }
.sys-card .si .mw-ico { font-size: 20px; }
.sys-card h4 { font-size: 17.5px; }
.sys-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ── pricing ── */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 52px auto 0; max-width: 860px; }
.plan { position: relative; background: var(--card); border-radius: var(--r-card); padding: 34px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.plan.pro { background: linear-gradient(180deg, var(--primary-soft), var(--card) 42%); box-shadow: 0 0 0 1.5px var(--primary), var(--shadow-lg); }
.plan .pn { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.plan .pbadge { position: absolute; top: 26px; inset-inline-end: 26px; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: var(--primary); color: var(--on-primary); }
.plan .price { margin: 16px 0 6px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.plan .price small { font-size: 16px; font-weight: 600; color: var(--ink-3); }
.plan .price .price-year { margin-top: 6px; font-size: 26px; font-weight: 700; color: var(--ink-2); }
.plan .price .price-year small { font-size: 14px; font-weight: 500; }
.plan .price .approx { display: inline-block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-inline-end: 4px; vertical-align: middle; }
.plan .pdesc { font-size: 14.5px; color: var(--ink-3); }
.plan ul { list-style: none; padding: 0; margin: 22px 0 28px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.plan li .mw-ico { flex: none; margin-top: 3px; color: var(--primary); font-size: 14px; }
.plan .btn { align-self: flex-start; }
.price-note { text-align: center; max-width: 620px; margin: 26px auto 0; }

/* ── pro, in detail ── */
.sync-compare { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 400px; }
.sc-col { background: var(--card); border-radius: var(--r-card); padding: 20px 22px; box-shadow: var(--shadow); }
.sc-col h6 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.sc-col p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.sc-col.pro { background: var(--primary-soft); box-shadow: 0 0 0 1.5px var(--primary), var(--shadow); }
.sc-col.pro h6 { color: var(--primary); }
.sc-col { position: relative; padding-inline-end: 74px; }
.sc-art { position: absolute; top: 16px; inset-inline-end: 16px; width: 46px; color: var(--ink-2); }
.sc-art svg { display: block; width: 100%; height: auto; }
.sc-arrow { text-align: center; color: var(--ink-3); font-size: 18px; line-height: 1; }
.pro-foot { text-align: center; color: var(--ink-3); margin: 8px auto 0; max-width: 640px; font-size: 14.5px; line-height: 1.7; }

/* ── final call ── */
.final { text-align: center; padding: 48px 0 104px; }
/* The closing panel is the app's cover: hero gradient, a small tracked caption,
   a white capsule — the same object the phone in the hero is showing. */
.final .wrap { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--hero-a), var(--hero-b) 55%, var(--hero-c)); color: var(--on-hero); border-radius: var(--r-cover); padding: 64px 40px 60px; box-shadow: var(--shadow-lg); }
.final .wrap::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; inset-inline-end: -120px; top: -180px; background: color-mix(in srgb, var(--on-hero) 14%, transparent); filter: blur(30px); pointer-events: none; }
.final .wrap > * { position: relative; }
.final .rest-art { width: min(220px, 56vw); margin: 0 auto 22px; color: var(--on-hero); }
.final .rest-art svg { display: block; width: 100%; height: auto; }
.final h2 { font-size: clamp(32px, 4.4vw, 56px); color: var(--on-hero); }
.final .lead { color: color-mix(in srgb, var(--on-hero) 86%, transparent); }
.final .cta-note { color: color-mix(in srgb, var(--on-hero) 66%, transparent); }
.final .btn-primary { background: var(--on-hero); color: var(--hero-b); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.final .btn-primary:hover { background: color-mix(in srgb, var(--on-hero) 92%, var(--hero-b)); }
.final .btn-ghost { background: color-mix(in srgb, var(--on-hero) 16%, transparent); color: var(--on-hero); }
.final .btn-ghost:hover { background: color-mix(in srgb, var(--on-hero) 26%, transparent); }

/* ── footer ── */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--paper-2); }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand p { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); max-width: 260px; }
.foot-col h5 { font-size: 13px; font-weight: 800; margin-bottom: 14px; letter-spacing: .02em; }
.foot-col a { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 10px; transition: color .2s; }
.foot-col a:hover { color: var(--primary); }
.foot-legal-note { margin-top: 36px; font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 760px; }
.foot-legal-note:empty { display: none; }
.foot-bot { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px 32px; font-size: 12.5px; color: var(--ink-3); }
.foot-disc { max-width: 640px; line-height: 1.55; }

/* ── secondary pages ── */
.page-hero { padding: 132px 0 44px; text-align: center; }
.page-hero h1 { font-size: clamp(34px, 4.8vw, 56px); }
.page-hero .lead { margin: 18px auto 0; max-width: 560px; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.page-hero .eyebrow { margin-bottom: 22px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 44px auto 0; }
.faq-item { background: var(--card); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .2s; }
.faq-item:hover, .faq-item.open { box-shadow: 0 0 0 1.5px var(--primary), var(--shadow); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 24px; border: 0; background: none; cursor: pointer; font-size: 16px; font-weight: 700; text-align: start; }
.faq-q::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-3); transition: transform .25s, color .2s; flex: none; }
.faq-item.open .faq-q::after { transform: rotate(45deg); color: var(--primary); }
/* Grid rows 0fr → 1fr animate to the answer's real height, however long the
   translation is (a max-height cap clipped long answers on phones and made
   closing lag). */
.faq-a { display: grid; grid-template-rows: 0fr; padding: 0 24px; transition: grid-template-rows .38s cubic-bezier(.2,.8,.2,1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { min-height: 0; overflow: hidden; font-size: 15px; line-height: 1.7; color: var(--ink-2); opacity: 0; transition: opacity .25s; }
.faq-a .fa-h { font-weight: 700; color: var(--ink); margin-right: .45em; }
.faq-a p::after { content: ""; display: block; height: 20px; }
.faq-item.open .faq-a p { opacity: 1; transition: opacity .35s .08s; }
.center-block { text-align: center; margin-top: 40px; }
.email-box { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 18px 26px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.email-address { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--primary); }
.email-box .btn { padding: 10px 18px; font-size: 14px; }
.roadmap-empty { display: inline-block; padding: 22px 36px; border-radius: var(--r-card); background: var(--card); border: 1.5px solid var(--line); font-size: 16px; color: var(--ink-3); font-weight: 600; }
.roadmap-list { max-width: 580px; margin: 40px auto 0; display: grid; gap: 14px; }
.rm-card { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.rm-card .ri { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.rm-card .ri .mw-ico { font-size: 24px; }
.rm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-card h4 { font-size: 17.5px; }
.rm-card p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.rm-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 700; }
.rm-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: rm-pulse 2.4s ease-in-out infinite; }
@keyframes rm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.roadmap-list.reveal.in .ri { animation: rv-stamp .5s cubic-bezier(.2,1.4,.3,1) .25s backwards; }
.regional-notice { max-width: 760px; margin: 18px auto 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }
.regional-notice[hidden] { display: none; }
.stories-list { max-width: 720px; margin: 44px auto 0; }
.story-card { padding: 32px 28px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.story-card .story-meta { font-size: 13px; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 10px; }
.story-card h3 { font-size: 22px; margin-bottom: 12px; }
.story-card p { margin-bottom: 12px; color: var(--ink-2); line-height: 1.75; }
.story-card p:last-child { margin-bottom: 0; }
.page-art { width: min(240px, 60vw); margin: 0 auto 8px; color: var(--ink); }
.page-art svg { display: block; width: 100%; height: auto; }

/* ── region: the site decides (html[data-region] from the head bootstrap) ── */
[data-region="cn"] .only-global, :root:not([data-region="cn"]) .only-cn { display: none !important; }
.foot-region { margin-top: 10px; max-width: 760px; }
.foot-region[hidden] { display: none; }

/* ── community (support page) ── */
.comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 44px auto 0; max-width: 860px; }
.comm-card { background: var(--card); border-radius: var(--r-card); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: flex-start; }
.comm-card .ci { width: 46px; height: 46px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: 16px; }
.comm-card .ci svg { width: 24px; height: 24px; }
.comm-card .ci .mw-ico { font-size: 22px; }
.comm-card h4 { font-size: 18px; }
.comm-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.comm-card .btn { margin-top: 18px; }
.comm-qr { width: 160px; height: 160px; margin-top: 16px; border-radius: var(--r-control); border: 1px solid var(--line); background: #fff; }

/* ── motion housekeeping ──
   Nothing animates while the page is still hidden for its language (it used
   to finish the hero intro unseen on a slow connection); illustrations stand
   still off screen and the hero holds until it is in view (motion.js). */
html.i18n-pending *, .mw-off, .mw-off *, .mw-hold * { animation-play-state: paused !important; }
/* A screenshot shows once it has actually loaded (lang.js marks it .ld), so a
   frame never fades in to an empty screen. */
.mw-scene image.shot:not(.ld), .mw-frame image.shot:not(.ld) { opacity: 0 !important; }
/* Theme and language switches cross-fade (theme.js / lang.js use view transitions). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* The hero copy arrives in step with the drawing: eyebrow, headline, lead, buttons. */
.hero-copy > * { animation: rv-rise .75s cubic-bezier(.2,.8,.2,1) backwards; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .14s; }
.hero-copy > :nth-child(3) { animation-delay: .26s; }
.hero-copy > :nth-child(4) { animation-delay: .36s; }
.hero-copy > :nth-child(5), .hero-copy > :nth-child(6) { animation-delay: .46s; }

/* ── reveal ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* Feature rows arrive from their own side — copy from the text edge, the
   device from the other — instead of everything rising the same 22px. */
@media (min-width: 981px) {
  .feature .f-copy.reveal, .pdf .f-copy.reveal, #ai .f-copy.reveal, #cocare .f-copy.reveal { transform: translateX(-34px); }
  .feature .f-media.reveal, .pdf .f-media.reveal, #ai .f-media.reveal, #cocare .f-media.reveal { transform: translateX(34px) rotate(1.2deg); transition-delay: .1s; }
  [dir="rtl"] .feature .f-copy.reveal, [dir="rtl"] .pdf .f-copy.reveal, [dir="rtl"] #ai .f-copy.reveal, [dir="rtl"] #cocare .f-copy.reveal { transform: translateX(34px); }
  [dir="rtl"] .feature .f-media.reveal, [dir="rtl"] .pdf .f-media.reveal, [dir="rtl"] #ai .f-media.reveal, [dir="rtl"] #cocare .f-media.reveal { transform: translateX(-34px) rotate(-1.2deg); }
  .f-copy.reveal.in, .f-media.reveal.in { transform: none !important; }
}
/* Grids deal their cards out one by one; each grid has its own gesture.
   (An animation with fill-mode backwards, not a transition, so the cards'
   own hover transforms keep working afterwards.) */
.grid > *, .sys-grid > *, .trust-in > * { --i: 0; }
.grid > :nth-child(2), .sys-grid > :nth-child(2), .trust-in > :nth-child(2) { --i: 1; }
.grid > :nth-child(3), .sys-grid > :nth-child(3), .trust-in > :nth-child(3) { --i: 2; }
.grid > :nth-child(4), .sys-grid > :nth-child(4), .trust-in > :nth-child(4) { --i: 3; }
.grid > :nth-child(5), .sys-grid > :nth-child(5) { --i: 4; } .grid > :nth-child(6), .sys-grid > :nth-child(6) { --i: 5; }
.grid > :nth-child(7) { --i: 6; } .grid > :nth-child(8) { --i: 7; } .grid > :nth-child(9) { --i: 8; }
.grid > :nth-child(10) { --i: 9; } .grid > :nth-child(11) { --i: 10; } .grid > :nth-child(12) { --i: 11; }
.grid.reveal.in > * { animation: rv-deal .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 60ms) backwards; }
.sys-grid.reveal.in > * { animation: rv-rise .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 90ms) backwards; }
.sys-grid.reveal.in .si { animation: rv-stamp .5s cubic-bezier(.2,1.4,.3,1) calc(var(--i) * 90ms + .25s) backwards; }
.plans.reveal.in > .plan { animation: rv-rise .6s cubic-bezier(.2,.8,.2,1) backwards; }
.plans.reveal.in > .plan.pro { animation-delay: .12s; }
@media (min-width: 981px) {   /* side by side: the two plans meet in the middle */
  .plans.reveal.in > .plan { animation-name: rv-from-start; animation-duration: .7s; }
  .plans.reveal.in > .plan.pro { animation-name: rv-from-end; }
}
.plans.reveal.in .plan li { animation: rv-rise .45s ease-out calc(.35s + var(--li, 0) * 50ms) backwards; }
.plan li:nth-child(2) { --li: 1; } .plan li:nth-child(3) { --li: 2; } .plan li:nth-child(4) { --li: 3; }
.plan li:nth-child(5) { --li: 4; } .plan li:nth-child(6) { --li: 5; } .plan li:nth-child(7) { --li: 6; } .plan li:nth-child(8) { --li: 7; }
.f-copy.reveal.in .f-list .ck { animation: rv-stamp .45s cubic-bezier(.2,1.4,.3,1) calc(.45s + var(--li, 0) * 120ms) backwards; }
.f-list li:nth-child(2) .ck { --li: 1; } .f-list li:nth-child(3) .ck { --li: 2; } .f-list li:nth-child(4) .ck { --li: 3; }
@keyframes rv-deal { from { opacity: 0; transform: translateY(26px) rotate(-1.5deg) scale(.97); } }
@keyframes rv-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes rv-stamp { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
@keyframes rv-from-start { from { opacity: 0; transform: translateX(-36px); } }
@keyframes rv-from-end { from { opacity: 0; transform: translateX(36px); } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal .vig { opacity: 1 !important; }
  .reveal *, .reveal.in > *, .reveal.in .vig { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .mod-box, .mod-modal.show .mod-box { transform: none !important; transition: opacity .2s !important; }
  .dev-panel, .dev-panel.show, .dev-pill, .faq-a, .faq-a p { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── responsive ── */
@media (max-width: 1100px) {
  /* links + two control pills + two buttons do not fit a tablet-landscape bar */
  .nav-links { display: none; }
}
@media (max-width: 980px) {
  .hero { padding-top: 100px; }
  .hero-in { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { text-align: center; }
  .hero-actions { justify-content: center; }
  .hero .lead, .hero-note { margin-inline: auto; }
  .hero-art #hero { max-width: 560px; margin: 0 auto; }
  .feature, .privacy-in { grid-template-columns: 1fr; gap: 36px; }
  .feature.flip .f-media { order: 0; }
  .trust-in { grid-template-columns: 1fr 1fr; }
  .trust .cell:nth-child(2n) { border-inline-end: 0; }
  .trust .cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .grid, .sys-grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .dev-stage { min-height: 0; }
  .dev-panel .frame-iphone { width: 250px; }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 20px; }
  .sec { padding: 70px 0; }
  .feature { padding-block: 44px; }
  .trust-in, .grid, .sys-grid, .foot-in, .comm-grid { grid-template-columns: 1fr; }
  .trust .cell { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .trust .cell:last-child { border-bottom: 0; }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .nav-in { gap: 12px; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn-ghost { display: none; }
  .brand .en { display: none; }
  .btn-sm { padding: 8px 12px; font-size: 13px; }
  .theme-current, .lang-current { display: none; }
  .ctl-btn { padding: 8px; }
  .ctl-btn svg { color: var(--ink); }
  .dev-tabs { flex-wrap: wrap; justify-content: center; }
  .dev-tab { padding: 9px 16px; font-size: 14px; }
  .stage { padding: 32px 18px; }
  .paper-stage { padding-bottom: 60px; }
  .frame-iphone { width: 230px; }
  .vig { width: 84px; padding: 7px 8px; }
  .vig.tl, .vig.tr { top: 12px; } .vig.bl, .vig.br { bottom: 14px; }
  .vig.tl, .vig.bl { left: 8px; } .vig.tr, .vig.br { right: 8px; }
  .paper-stage .vig.tr { width: 92px; top: 10px; right: 8px; }
  /* narrow screens: the panels become a sheet under the bar, not a dropdown
     hanging off a 40px pill that would run off the left edge */
  .ctl-panel { position: fixed; top: 60px; left: 16px; right: 16px; width: auto; max-height: calc(100vh - 80px); overflow: auto; }
  .lang-grid { grid-template-columns: 1fr 1fr; max-height: none; }
  .final { padding: 24px 16px 72px; }
  .final .wrap { padding: 44px 22px 40px; border-radius: var(--r-panel); }
  .mod-modal { padding: 24px 16px; }
  .mod-box .mw-frame { width: min(280px, 78vw, 36vh); }
  .mod-close { top: -10px; inset-inline-end: -10px; width: 36px; height: 36px; }
}

/* ── print (the legal page prints its document) ── */
@media print {
  .nav, .footer, .hero-art, .mod-modal { display: none !important; }
  body { background: #fff; color: #000; }
}

/* @art-css */
/* Every stroke draws itself on (pathLength=1 lets one timing fit all).
   Within a cat: silhouette → tail and paws (.det) → face (fades). The two
   hero scenes play on load; spot art and frames play when scrolled into
   view (.reveal.in). */
.mw-scene *, .mw-art *, .mw-frame * { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.mw-scene .island, .mw-frame .island, .mw-art .dot, .mw-scene .dot, .mw-frame circle.dot { stroke: none; }
/* The gap (2) is longer than the line (pathLength 1) and the resting offset
   (1.05) pushes the dash fully past the end: with round caps, an offset of
   exactly 1 leaves a zero-length dash at the start, and every undrawn line
   showed a dot there. */
.mw-scene .dr, .mw-art .dr, .mw-frame .dr { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; }
.mw-scene .dot, .mw-scene .face, .mw-scene .shot,
.mw-art .dot, .mw-art .face, .mw-frame .shot, .mw-frame .dot { opacity: 0; }
.mw-scene .face, .mw-art .face { stroke-dasharray: none; }
.mw-scene .dr { animation: mw-draw 1.1s ease-in-out forwards var(--d, 0s); }
.mw-scene .det { animation-delay: calc(var(--d, 0s) + .45s); }
.mw-scene .dot { animation: mw-fade .5s ease-out forwards var(--d, 0s); }
.mw-scene .face { animation: mw-fade .45s ease-out forwards calc(var(--d, 0s) + 1.05s); }
.mw-scene .shot { animation: mw-fade .6s ease-out forwards calc(var(--d, 0s) + .9s); }
.in .mw-art .dr, .mw-art.in .dr { animation: mw-draw 1.1s ease-in-out forwards var(--d, 0s); }
.in .mw-art .det { animation-delay: calc(var(--d, 0s) + .45s); }
.in .mw-art .dot, .in .mw-art .face { animation: mw-fade .45s ease-out forwards calc(var(--d, 0s) + .9s); }
/* Device frames: each svg sets its own --dur, and its outline starts from its
   own edge and direction (DRAW in build.py), so no two neighbours repeat. */
.mw-frame .dr.rev { stroke-dashoffset: -1.05; }
.in .mw-frame .dr, .mw-frame.in .dr { animation: mw-draw var(--dur, .7s) cubic-bezier(.45,0,.2,1) forwards var(--d, 0s); }
.in .mw-frame .det, .mw-frame.in .det { animation-delay: calc(var(--d, 0s) + var(--dur, .7s) * .6); }
.in .mw-frame .dot { animation: mw-fade .35s ease-out forwards calc(var(--d, 0s) + var(--dur, .7s)); }
.in .mw-frame .shot, .mw-frame.in .shot { animation: mw-fade .5s ease-out forwards calc(var(--d, 0s) + var(--dur, .7s) * .55); }
@keyframes mw-draw { to { stroke-dashoffset: 0; } }
@keyframes mw-fade { to { opacity: 1; } }

/* Hero intro order: water, deck, the phone, then the cats and their toys. */
#hero-water { --d: 0s } #hero-dock { --d: .18s } #hero-phone { --d: .4s }
#hero-cat-b { --d: 1.3s } #hero-cat-a { --d: 1.55s } #hero-toy-yarn { --d: 1.8s }
#hero-toy-fish { --d: 1.95s } #hero-sky-gull { --d: 2.2s }

/* Idle loops — a SEAMLESS 12 s master loop: every duration divides 12 s and
   every track ends on the pose it started from. Waves drift one wavelength,
   the gull wraps off-canvas. Each animated group sits in absolute scene
   coordinates, so a transform-origin is simply a point on the drawing. */
#hero-wave-1 { animation: mw-drift1 12s linear 2.2s infinite; }
#hero-wave-2 { animation: mw-drift2 12s linear 2.2s infinite; }
#hero-toy-fish { transform-origin: 825.2px 0px; animation: mw-swing 4s ease-in-out 2.6s infinite; }
#hero-cat-a { transform-origin: 730px 760px; animation: mw-lean 4s ease-in-out 2.6s infinite; }
#hero-cat-a-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: mw-swipe 4s ease-in-out 2.6s infinite; }
#hero-cat-b { transform-origin: 143px 760px; animation: mw-pounce 6s ease-in-out 3s infinite; }
#hero-toy-yarn { transform-origin: 268px 736px; animation: mw-nudge 6s ease-in-out 3s infinite; }
#hero-sky-gull { animation: mw-cross 12s linear 2.2s infinite; }
#hero-wing-l, #hero-wing-r { transform-box: fill-box; }
#hero-wing-l { transform-origin: 100% 100%; animation: mw-flapL 1.2s ease-in-out 2.2s infinite; }
#hero-wing-r { transform-origin: 0% 100%; animation: mw-flapR 1.2s ease-in-out 2.2s infinite; }

@keyframes mw-drift1 { to { transform: translateX(-160px) } }
@keyframes mw-drift2 { to { transform: translateX(200px) } }
@keyframes mw-swing { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }
@keyframes mw-lean { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(1.4deg) } 75% { transform: rotate(-1.4deg) } }
@keyframes mw-swipe { 0%, 8%, 44%, 100% { transform: rotate(0) } 21% { transform: rotate(-17deg) } 30% { transform: rotate(5deg) } }
@keyframes mw-pounce {
  0%, 46% { transform: translate(0,0) rotate(0) }
  54% { transform: translate(-6px,0) rotate(-2deg) }
  61% { transform: translate(3px,0) rotate(1.2deg) }
  68% { transform: translate(-6px,0) rotate(-2deg) }
  79% { transform: translate(16px,-14px) rotate(3deg) }
  92%, 100% { transform: translate(0,0) rotate(0) } }
@keyframes mw-nudge { 0%, 46% { transform: translateX(0) rotate(0) } 81% { transform: translateX(14px) rotate(50deg) } 92%, 100% { transform: translateX(0) rotate(0) } }
@keyframes mw-cross { 0% { transform: translate(-620px,10px) } 100% { transform: translate(560px,-60px) } }
@keyframes mw-flapL { 0%, 100% { transform: rotate(20deg) } 50% { transform: rotate(-12deg) } }
@keyframes mw-flapR { 0%, 100% { transform: rotate(-20deg) } 50% { transform: rotate(12deg) } }
@media (prefers-reduced-motion: reduce) {
  .mw-scene *, .mw-art *, .mw-frame * { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .mw-scene .dr, .mw-art .dr, .mw-frame .dr, .mw-frame .dr.rev { stroke-dashoffset: 0 }
  .mw-scene .dot, .mw-scene .face, .mw-scene .shot, .mw-art .dot, .mw-art .face, .mw-frame .shot, .mw-frame .dot { opacity: 1 }
}

/* Feature vignettes. Accent parts take the palette's primary; "pf" shapes are
   filled with the card colour so a coin hides the coin under it. Loop parts
   (.lp) rest in their finished pose and are animated from hidden with
   fill-mode backwards, so reduced motion shows the complete drawing. */
.mw-art .ac { stroke: var(--primary); }
.mw-art .acf { fill: var(--primary); stroke: none; }
.mw-art .inkf { fill: currentColor; stroke: none; }
.mw-art .pf { fill: var(--card); }
.mw-art .wash { fill: var(--primary); opacity: .14; stroke: none; }
.mw-art .lp, .mw-art .lp * { stroke-dasharray: 1 2; }
.mw-art .ping, .mw-art .site, .mw-art .flag, .mw-art .rock, .mw-art .kib, .mw-art .coin,
.mw-art .bob, .mw-art .ty, .mw-art .snap, .mw-art .zz, .mw-art .breath { transform-box: fill-box; transform-origin: center; }
.mw-art .ping, .mw-art .fly { opacity: 0; }

/* vaccination map — jab, press, leave a marker */
.in .art-vig-vaccine .jab { animation: vg-jab 5s ease-in-out 1.4s infinite backwards; }
.in .art-vig-vaccine .plunger { animation: vg-press 5s ease-in-out 1.4s infinite backwards; }
.in .art-vig-vaccine .site { animation: vg-mark 5s ease-out 1.4s infinite backwards; }
.in .art-vig-vaccine .ping { animation: vg-ping-late 5s ease-out 1.4s infinite backwards; }
@keyframes vg-jab { 0%, 18%, 64%, 100% { transform: translateX(0) } 28%, 52% { transform: translateX(-6px) } }
@keyframes vg-press { 0%, 28%, 82%, 100% { transform: translateX(0) } 48%, 64% { transform: translateX(-16px) } }
@keyframes vg-mark { 0%, 46% { transform: scale(0) } 54% { transform: scale(1.3) } 60%, 92% { transform: scale(1) } 100% { transform: scale(0) } }
@keyframes vg-ping-late { 0%, 50% { opacity: 0; transform: scale(.5) } 54% { opacity: .9 } 78%, 100% { opacity: 0; transform: scale(2.3) } }

/* medication — morning tick, evening tick, capsule rocks */
.in .art-vig-meds .t1 { animation: vg-tick1 6s ease-out 1.3s infinite backwards; }
.in .art-vig-meds .t2 { animation: vg-tick2 6s ease-out 1.3s infinite backwards; }
.in .art-vig-meds .rock { animation: vg-rock 3s ease-in-out 1.3s infinite; }
@keyframes vg-tick1 { 0%, 6% { stroke-dashoffset: 1.05; opacity: 1 } 16%, 88% { stroke-dashoffset: 0; opacity: 1 } 96%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes vg-tick2 { 0%, 30% { stroke-dashoffset: 1.05; opacity: 1 } 40%, 88% { stroke-dashoffset: 0; opacity: 1 } 96%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes vg-rock { 0%, 100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }

/* lab trends — trace the line, flag the reading outside the band */
.in .art-vig-trends .trace { animation: vg-trace 6s ease-in-out 1.3s infinite backwards; }
.in .art-vig-trends .flag { animation: vg-flag 6s ease-out 1.3s infinite backwards; }
.in .art-vig-trends .ping { animation: vg-ping-mid 6s ease-out 1.3s infinite backwards; }
@keyframes vg-trace { 0%, 5% { stroke-dashoffset: 1.05; opacity: 1 } 38%, 88% { stroke-dashoffset: 0; opacity: 1 } 96%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes vg-flag { 0%, 36% { transform: scale(0); opacity: 1 } 43% { transform: scale(1.35) } 48%, 88% { transform: scale(1); opacity: 1 } 96%, 100% { transform: scale(1); opacity: 0 } }
@keyframes vg-ping-mid { 0%, 42% { opacity: 0; transform: scale(.5) } 46% { opacity: .9 } 68%, 100% { opacity: 0; transform: scale(2.3) } }

/* feeding — kibble falls into the bowl, one after another */
.in .art-vig-feeding .kib { animation: vg-drop 2.4s ease-in 1.2s infinite backwards; }
.in .art-vig-feeding .k2 { animation-delay: 2s; }
.in .art-vig-feeding .k3 { animation-delay: 2.8s; }
@keyframes vg-drop { 0% { transform: translateY(-46px); opacity: 0 } 14% { opacity: 1 } 62% { transform: translateY(0) } 70% { transform: translateY(-3px) } 78%, 92% { transform: translateY(0); opacity: 1 } 100% { transform: translateY(0); opacity: 0 } }

/* costs — a coin lands on the stack */
.in .art-vig-costs .coin { animation: vg-coin 3.6s cubic-bezier(.5,0,.8,.6) 1.5s infinite backwards; }
@keyframes vg-coin { 0% { transform: translateY(-40px); opacity: 0 } 10% { opacity: 1 } 40% { transform: translateY(0) scaleY(1) } 46% { transform: translateY(2px) scaleY(.86) } 54%, 88% { transform: translateY(0) scaleY(1); opacity: 1 } 100% { transform: translateY(0); opacity: 0 } }

/* PDF export — the plane glides in, then bobs while its trail twinkles */
.in .art-vig-pdf .glide { animation: vg-glide 1.1s cubic-bezier(.2,.8,.2,1) .7s backwards; }
.in .art-vig-pdf .bob { animation: vg-bob 4s ease-in-out 1.8s infinite; }
.in .art-vig-pdf .tw { animation: vg-twinkle 2s ease-in-out 1.8s infinite; }
.in .art-vig-pdf .tw2 { animation-delay: 2.1s; } .in .art-vig-pdf .tw3 { animation-delay: 2.4s; } .in .art-vig-pdf .tw4 { animation-delay: 2.7s; }
@keyframes vg-glide { 0% { transform: translate(-70px, 34px); opacity: 0 } 30% { opacity: 1 } 100% { transform: none } }
@keyframes vg-bob { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-5px) rotate(-3deg) } }
@keyframes vg-twinkle { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }

/* AI Butler — typing dots above, a record writing itself below */
.in .art-vig-ai .ty { animation: vg-type 1.4s ease-in-out 1.2s infinite; }
.in .art-vig-ai .ty2 { animation-delay: 1.36s; } .in .art-vig-ai .ty3 { animation-delay: 1.52s; }
.in .art-vig-ai .w1 { animation: vg-write1 6s ease-out 1.4s infinite backwards; }
.in .art-vig-ai .w2 { animation: vg-write2 6s ease-out 1.4s infinite backwards; }
.in .art-vig-ai .w3 { animation: vg-write3 6s ease-out 1.4s infinite backwards; }
@keyframes vg-type { 0%, 60%, 100% { transform: translateY(0) } 30% { transform: translateY(-6px) } }
@keyframes vg-write1 { 0%, 22% { stroke-dashoffset: 1.05; opacity: 1 } 34%, 88% { stroke-dashoffset: 0; opacity: 1 } 96%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes vg-write2 { 0%, 34% { stroke-dashoffset: 1.05; opacity: 1 } 44%, 88% { stroke-dashoffset: 0; opacity: 1 } 96%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes vg-write3 { 0%, 48% { stroke-dashoffset: 1.05; opacity: 1 } 56%, 88% { stroke-dashoffset: 0; opacity: 1 } 96%, 100% { stroke-dashoffset: 0; opacity: 0 } }

/* Co-Care — a record arcs over the cat one way, then the other */
.in .art-vig-cocare .f1 { animation: vg-pass-r 5s linear 1.4s infinite; }
.in .art-vig-cocare .f2 { animation: vg-pass-l 5s linear 3.9s infinite; }
@keyframes vg-pass-r { 0% { transform: translate(0,0); opacity: 0 } 5% { opacity: 1 } 10% { transform: translate(14px,-9px) } 20% { transform: translate(32px,-13px) } 30% { transform: translate(50px,-9px) } 38% { opacity: 1 } 42%, 100% { transform: translate(64px,0); opacity: 0 } }
@keyframes vg-pass-l { 0% { transform: translate(0,0); opacity: 0 } 5% { opacity: 1 } 10% { transform: translate(-14px,-9px) } 20% { transform: translate(-32px,-13px) } 30% { transform: translate(-50px,-9px) } 38% { opacity: 1 } 42%, 100% { transform: translate(-64px,0); opacity: 0 } }

/* backup vs sync — one flash for the whole bundle; records crossing one by one */
.in .art-vig-snapshot .snap { animation: vg-snap 4.5s ease-out 1s infinite backwards; }
@keyframes vg-snap { 0%, 8% { opacity: 0; transform: scale(1.18); stroke-dashoffset: 0 } 16% { opacity: 1; transform: scale(1) } 30%, 100% { opacity: .25; transform: scale(1) } }
.in .art-vig-stream .rec { animation: vg-rec 3s ease-in-out 1s infinite backwards; }
.in .art-vig-stream .r2 { animation-delay: 2s; } .in .art-vig-stream .r3 { animation-delay: 3s; }
@keyframes vg-rec { 0%, 6% { stroke-dashoffset: 1.05; opacity: 1 } 30%, 70% { stroke-dashoffset: 0; opacity: 1 } 90%, 100% { stroke-dashoffset: 0; opacity: .25 } }

/* the two cats idle: one ducks into its crate and peeks back out, one sleeps */
.in .art-crate-cat .peek { animation: vg-peek 9s ease-in-out 3s infinite; }
@keyframes vg-peek { 0%, 52%, 100% { transform: translateY(0) } 58%, 70% { transform: translateY(66px) } 76%, 84% { transform: translateY(44px) } 88% { transform: translateY(66px) } 95% { transform: translateY(-3px) } }
.in .art-rest-cat .breath { transform-origin: 50% 100%; animation: vg-breathe 4.4s ease-in-out 2s infinite; }
.in .art-rest-cat .tail { transform-origin: 176px 138px; animation: vg-tail 6.6s ease-in-out 2s infinite; }
.in .art-rest-cat .zz { animation: vg-zz 4.4s ease-in-out 2.4s infinite backwards; }
.in .art-rest-cat .z2 { animation-delay: 3.2s; }
@keyframes vg-breathe { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.022) } }
@keyframes vg-tail { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(5deg) } }
@keyframes vg-zz { 0% { transform: translate(0, 8px) scale(.7); opacity: 0 } 30% { opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(6px, -10px) scale(1.05); opacity: 0 } }
/* @/art-css */