/* ==========================================================================
   ViewChat — Japan landing (male audience) v7
   Every selector is prefixed with .vcj / vcj- so the file can be dropped
   into the main site without leaking styles.

   Colour system
   - Navy        : primary dark surfaces (hero matches the video backdrop #0d1022)
   - Warm white / mist / blush : light sections
   - Coral       : brand accent — CTAs, small details, soft light
   - Mint        : confirmed safety / "free" markers only
   Text pairs were chosen for WCAG AA (≥ 4.5:1) at body sizes.

   Rhythm
   Each section after the hero is a "panel" that slides over the previous
   one with large rounded top corners (.vcj-panel).
   ========================================================================== */

:root {
  /* navy */
  --vcj-navy-950: #0d1022;
  --vcj-navy-900: #111830;
  --vcj-navy-800: #1a2343;
  --vcj-navy-700: #26315a;
  --vcj-line-dark: rgba(255, 255, 255, 0.11);
  --vcj-on-dark: #f3f4f8;
  --vcj-on-dark-2: #c9cede;   /* 11.2:1 on navy-900 */
  --vcj-on-dark-3: #a3abc2;   /* 7.7:1 on navy-900 */

  /* light */
  --vcj-paper: #f7f5f1;
  --vcj-mist: #edf0f5;
  --vcj-blush: #f6e7e1;       /* translation band */
  --vcj-white: #ffffff;
  --vcj-ink: #121a30;
  --vcj-ink-2: #48516a;       /* 7.3:1 on paper, 6.6:1 on blush */
  --vcj-ink-3: #5f6880;       /* 5.1:1 on paper, 4.6:1 on blush */
  --vcj-line-light: rgba(18, 26, 48, 0.12);

  /* accents */
  --vcj-coral: #e5595f;           /* ViewChat brand red — decorative */
  --vcj-coral-cta: #cf3f48;       /* white text 4.7:1 */
  --vcj-coral-cta-hover: #b8343d;
  --vcj-coral-on-dark: #ff8d92;   /* 7.9:1 on navy-900 */
  --vcj-coral-on-light: #b9343d;  /* 5.3:1 on paper, 4.9:1 on blush */
  --vcj-coral-tint: rgba(207, 63, 72, 0.09);
  --vcj-mint-on-dark: #79d8bc;
  --vcj-mint-on-light: #19735f;   /* 5.7:1 on white */
  --vcj-mint-tint: rgba(36, 160, 128, 0.12);

  --vcj-gutter: 20px;
  --vcj-max: 1200px;
  --vcj-radius: 22px;
  --vcj-r: 26px;                  /* panel corner */
  --vcj-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --vcj-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base (scoped; :where keeps the reset at zero specificity) ---------- */
.vcj, .vcj *, .vcj *::before, .vcj *::after { box-sizing: border-box; }
html:has(body.vcj) { scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--vcj-navy-950); }
body.vcj {
  margin: 0; background: var(--vcj-navy-950); color: var(--vcj-on-dark);
  font-family: var(--vcj-font); font-size: 16px; line-height: 1.8; letter-spacing: 0.02em;
  line-break: strict; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
:where(.vcj) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.vcj) :where(ul, ol) { list-style: none; }
:where(.vcj) :where(img, video) { display: block; max-width: 100%; height: auto; }
.vcj a { color: inherit; }
.vcj :focus-visible { outline: 2px solid var(--vcj-coral-on-dark); outline-offset: 3px; border-radius: 8px; }

.vcj-wrap { width: 100%; max-width: var(--vcj-max); margin: 0 auto; padding: 0 var(--vcj-gutter); }
.vcj-nb { display: inline-block; }            /* keeps Japanese phrases together */

.vcj-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.vcj-skip:focus { top: 12px; }

/* ---------- panels: rounded top edge that slides over the previous section ---------- */
.vcj-panel { position: relative; margin-top: calc(var(--vcj-r) * -1); border-radius: var(--vcj-r) var(--vcj-r) 0 0; }

/* ---------- shared type ---------- */
.vcj-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--vcj-coral-on-light); }
.vcj-label::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--vcj-coral); }
.vcj-head--dark .vcj-label, .vcj-show .vcj-label, .vcj-final .vcj-label, .vcj-steps__panel .vcj-label { color: var(--vcj-coral-on-dark); }
.vcj-h2 { margin-top: 14px; font-size: clamp(29px, 8vw, 56px); font-weight: 700; line-height: 1.28; letter-spacing: 0; }
.vcj-lead { margin-top: 16px; font-size: 16px; line-height: 1.9; color: var(--vcj-ink-2); }
.vcj-head--dark .vcj-lead, .vcj-show .vcj-lead, .vcj-final .vcj-lead { color: var(--vcj-on-dark-2); }
.vcj-small { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--vcj-ink-3); }
.vcj-split { display: grid; gap: 4px; }

/* text links with a concrete destination */
.vcj-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--vcj-ink); }
.vcj-link::after { content: "→"; color: var(--vcj-coral-on-light); transition: transform .2s var(--vcj-ease); }
.vcj-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.vcj-link:hover::after { transform: translateX(3px); }
.vcj-safety .vcj-link { color: var(--vcj-on-dark); }
.vcj-safety .vcj-link::after { color: var(--vcj-coral-on-dark); }

/* round flags */
.vcj-clock__track img { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }

/* ---------- store badges (official Japanese artwork) ---------- */
.vcj-get__label { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.vcj-get__note { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--vcj-on-dark-3); }
.vcj-stores { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.vcj-store { display: block; line-height: 0; border-radius: 10px; transition: transform .2s var(--vcj-ease), box-shadow .2s; }
.vcj-store img { height: 48px; width: auto; max-width: none; }
.vcj-store:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.vcj-store:active { transform: translateY(0); }

/* ---------- phone frame ---------- */
.vcj-phone { position: relative; border-radius: 30px; padding: 6px; background: linear-gradient(150deg, #4b5068, #141a2e 42%, #2c3350); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 34px 80px rgba(0,0,0,.5); }
.vcj-phone img { width: 100%; border-radius: 25px; }
.vcj-phone::after { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 28%; height: 13px; border-radius: 10px; background: #05060c; }

/* ---------- header ---------- */
.vcj-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(13, 16, 34, .66); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.vcj-header.is-scrolled { border-bottom-color: var(--vcj-line-dark); background: rgba(13, 16, 34, .88); }
.vcj-header__inner { display: flex; align-items: center; gap: 24px; height: 58px; }
.vcj-header__logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.vcj-header__logo img { width: 110px; }
.vcj-header__nav { display: none; }
.vcj-header__cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--vcj-coral-cta); color: #fff !important; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; transition: background .2s;
}
.vcj-header__cta:hover { background: var(--vcj-coral-cta-hover); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.vcj-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--vcj-navy-950); padding: 24px 0 calc(48px + var(--vcj-r)); }
/* cool navy light, top left */
.vcj-hero::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none; width: 130vw; height: 110vw; left: -50vw; top: -40vw;
  background: radial-gradient(closest-side, rgba(64, 86, 168, .34), transparent);
}
/* warm horizon + fine dot field along the bottom edge */
.vcj-hero__horizon { position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: radial-gradient(85% 70% at 62% 100%, rgba(229, 89, 95, .26), rgba(229, 89, 95, .08) 45%, transparent 75%);
}
.vcj-hero__horizon::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 214, 200, .5) 1px, transparent 1.6px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(70% 80% at 62% 100%, #000 0%, rgba(0,0,0,.35) 40%, transparent 72%);
  mask-image: radial-gradient(70% 80% at 62% 100%, #000 0%, rgba(0,0,0,.35) 40%, transparent 72%);
  opacity: .55;
}
.vcj-hero__inner { display: grid; gap: 30px; }
.vcj-kicker { font-size: 11px; font-weight: 500; letter-spacing: .22em; line-height: 1.6; text-transform: uppercase; color: var(--vcj-on-dark-3); }
.vcj-kicker__sep { margin: 0 .9em; opacity: .6; }
.vcj-hero__title { margin-top: 14px; font-size: clamp(31px, 9vw, 46px); font-weight: 900; line-height: 1.2; letter-spacing: 0; }
.vcj-hero__lede { margin-top: 12px; font-size: 15px; line-height: 1.8; color: #d6dae6; }
.vcj-get--hero { margin-top: 20px; }

/* ---- visual stage ----
   One room, one light: the evening clip is the room, the real app (iPhone
   mockup hero-phone-v2.webp, never cropped or distorted) stands in front of it as the nearest
   object, lit by the same warm lamps (glow behind it) and grounded by one
   soft shadow. The face and the phone never overlap. No hearts are added: the
   clip has its own. Both files are one 4.5 s loop (seam cross-faded):
   - below 1100px: hero-evening-sm (960×1080) = x 960–1920 of the frame
   - from 1100px:  hero-evening-lg (1600×900) = the full frame (see ≥ 1100px)
   Geometry is written in source pixels of the 1920×1080 frame (--u = one of
   them on screen), so the face and the phone keep their relation at any size:
   face skin x 1160–1470 / y 170–520, hair x 1050–1560, head top y ≈ 30.

   Phones: a scene as tall as the screen has left under the copy (--hs), so
   face and the whole phone are on the first screen at 360×800 / 390×844.
   The scene starts under the last line of the copy, not after it: the frame's
   top (window, lit wall) rises out of a faint warm haze and fades in over its
   top 15% — above the forehead (y 170 = 16%), so the face is never shaded.
   Face on the left at full height, phone on the right, clear of the hair;
   the frame's own right edge sits behind the phone and fades out; its bottom
   fades out inside the scene (the frame is 1.065 × the scene tall). */
.vcj-hero__visual {
  --hs: clamp(260px, calc(100svh - 400px), min(380px, 100vw - 10px));   /* narrower than 390: capped so the phone keeps clear of the face */
  --u: calc(var(--hs) / 1014);
  position: relative; isolation: isolate;
  height: var(--hs); margin: -34px calc(var(--vcj-gutter) * -1) 0;
}
.vcj-hero__visual::before {          /* the room's warm light reaching up under the copy */
  content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: -90px; height: 220px; pointer-events: none;
  background: radial-gradient(70% 60% at 34% 72%, rgba(255, 150, 104, .1), rgba(229, 89, 95, .04) 50%, transparent 78%);
}
.vcj-hero__call { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.vcj-hero__call::after {             /* the frame's top (window, lit wall) settles into the navy above it */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 16, 34, .3) 0%, rgba(13, 16, 34, 0) 14%);
}
.vcj-hero__video {
  position: absolute; top: 0; left: calc(var(--u) * -40);          /* frame x 1000 at the screen edge */
  width: calc(var(--u) * 960); height: calc(var(--u) * 1080); max-width: none; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 4%, rgba(0,0,0,.75) 9%, #000 15%, #000 60%, transparent 91%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 4%, rgba(0,0,0,.75) 9%, #000 15%, #000 60%, transparent 91%);
  mask-composite: intersect;
}
.vcj-hero__device { position: absolute; z-index: 2; right: var(--vcj-gutter); top: calc(var(--hs) * .1); }
.vcj-hero__device::before {          /* the room's warm lamp light, spilling round the phone */
  content: ""; position: absolute; z-index: -1; inset: 6% -26% 0; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 52%, rgba(255, 168, 118, .2), rgba(229, 89, 95, .08) 55%, transparent 75%);
}
.vcj-hero__device::after {           /* one soft contact shadow */
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -3%; height: 7%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
}
.vcj-hero__phone {
  display: block; width: auto; max-width: none; height: calc(var(--hs) * .86);
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55));
}
.vcj-hero__note { position: absolute; left: var(--vcj-gutter); bottom: -22px; font-size: 10px; letter-spacing: .04em; color: var(--vcj-on-dark-3); }

/* ---------- trust strip (panel over the hero) ---------- */
/* One plate holds the four facts, split by coral hairlines (no row of identical cards).
   - icon capsule: ViewChat's liquid-glass mark (viewchatcam.com css/viewchat-hero.css
     .vc-hero__mark): white glass, bright top edge, coral refraction on the lower edge,
     thin coral ring, coral tabular index digits 01–04
   - surface + icons: the soft blush plate and thin coral line icons of
     camtalk.kr-short css/camtalk-partner-*.css .cpt-plate (style only, no content)
   - hover: a coral line fills left to right, like the mark's coral progress fill */
.vcj-facts {
  background: radial-gradient(70% 160px at 50% 0, rgba(229, 89, 95, .09), transparent 75%), var(--vcj-paper);
  color: var(--vcj-ink); padding: 52px 0 calc(60px + var(--vcj-r));
}
.vcj-facts__heading { font-size: 20px; font-weight: 700; line-height: 1.5; }
.vcj-facts__list {
  counter-reset: vcj-fact; display: grid; margin-top: 18px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fff5f4 55%, #ffedef 100%);
  box-shadow: 0 0 0 1px rgba(229, 89, 95, .16), inset 0 1px 0 #fff, 0 30px 60px -38px rgba(130, 30, 62, .5);
}
.vcj-facts__list > li { counter-increment: vcj-fact; }
.vcj-facts__list > li + li { border-top: 1px solid rgba(229, 89, 95, .14); }
.vcj-fact {
  position: relative; display: block; height: 100%; padding: 15px 16px 15px 68px;
  color: inherit; text-decoration: none; transition: background-color .3s;
}
.vcj-fact::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--vcj-coral) 0%, rgba(255, 109, 115, 0) 100%);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--vcj-ease);
}
.vcj-fact:hover, .vcj-fact:focus-visible { background-color: rgba(229, 89, 95, .05); }
.vcj-fact:hover::after, .vcj-fact:focus-visible::after { transform: scaleX(1); }
.vcj .vcj-fact:focus-visible { outline-color: var(--vcj-coral-on-light); outline-offset: -4px; border-radius: 20px; }
.vcj-fact__ico {
  position: absolute; left: 16px; top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 40px; height: 40px; border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fdf0ee 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(242, 86, 92, .18), 0 0 0 1px rgba(242, 86, 92, .16), 0 8px 18px rgba(20, 22, 28, .08);
}
.vcj-fact__ico svg { width: 21px; height: 21px; fill: none; stroke: var(--vcj-coral-on-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vcj-fact__ico::after {
  content: counter(vcj-fact, decimal-leading-zero); display: none; padding-left: 9px; border-left: 1px solid rgba(229, 89, 95, .28);
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--vcj-coral-on-light);
}
.vcj-fact__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; }
.vcj-fact__text { display: block; font-size: 13.5px; line-height: 1.7; color: var(--vcj-ink-2); word-break: auto-phrase; text-wrap: balance; }
.vcj-fact__go {
  display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--vcj-coral-on-light);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.vcj-fact__go::after { content: " →"; display: inline-block; margin-left: .15em; transition: transform .3s var(--vcj-ease); }
.vcj-fact:hover .vcj-fact__go::after { transform: translateX(3px); }

/* ==========================================================================
   2. 会話のかたち — three big product tiles + world clock marquee
   ========================================================================== */
.vcj-show { overflow: hidden; background: radial-gradient(70% 50% at 80% 0%, rgba(70, 92, 170, .25), transparent 70%), var(--vcj-navy-900); padding: 72px 0 calc(56px + var(--vcj-r)); }
.vcj-demo { display: grid; gap: 40px; }
.vcj-demo__stage { position: relative; isolation: isolate; width: min(100%, 420px); margin: 0 auto; aspect-ratio: 1 / 1.2; }
.vcj-demo__stage::before {
  content: ""; position: absolute; z-index: -1; inset: 4% -10% 0 -10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 140, 120, .28), rgba(70, 92, 170, .16) 60%, transparent);
}
.vcj-demo__main { position: absolute; left: 2%; top: 0; width: 60%; z-index: 2; }   /* hero-phone-v2.webp (0.4625) is narrower than the first mockup: same height */
.vcj-demo__phone { width: 100%; max-width: none; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .5)); }
/* pins sit on the real UI of hero-phone-v2.webp (690×1492, the same file as the hero).
   left/top give the pin's CENTRE as % of the mockup, so they stay put at every size:
   1 — flag profile row, cards y 236–405 → 21.4%; on the phone's left edge, clear of
       the first card (x 50) so no UI is covered
   2 — "View Chat AI Pick" title, y 468 → 31.4%; left edge, clear of the title (x 58)
   3 — call + message buttons, y 1172 → 78.6%; right of the message button, between
       the card's edge (x 586) and the phone's edge (x 690) → x 638 = 92.5%, because
       the + button (not a call/message control) sits between the left edge and the
       call button */
.vcj-pin {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--vcj-coral-cta); color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 3px rgba(17, 24, 48, .85), 0 8px 18px rgba(0,0,0,.3);
}
.vcj-demo__main .vcj-pin { position: absolute; z-index: 3; transform: translate(-50%, -50%); }
.vcj-pin--1 { left: 0; top: 21.4%; }
.vcj-pin--2 { left: 0; top: 31.4%; }
.vcj-pin--3 { left: 92.5%; top: 78.6%; }
.vcj-demo__sub { position: absolute; right: 0; bottom: 4%; width: 40%; z-index: 1; }
.vcj-demo__sub img { width: 100%; max-width: none; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }
.vcj-demo__sub figcaption { margin-top: 6px; text-align: center; font-size: 12px; color: var(--vcj-on-dark-3); }
.vcj-demo__list { display: grid; margin-top: 30px; }
.vcj-demo__list li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--vcj-line-dark); }
.vcj-demo__list li:last-child { border-bottom: 1px solid var(--vcj-line-dark); }
.vcj-demo__list .vcj-pin { margin-top: 1px; box-shadow: none; }
.vcj-demo__list h3 { font-size: 19px; font-weight: 700; line-height: 1.45; }
.vcj-demo__list p { margin-top: 4px; font-size: 15px; line-height: 1.8; color: var(--vcj-on-dark-2); }
.vcj-show__note { margin-top: 14px; font-size: 12px; color: var(--vcj-on-dark-3); }

/* one card after the phones: the two photos side by side at the top (both
   3:4, so the same height — whole, never cropped), the line under them. A warm
   light rises from the card's lower corner; on desktop the photos fill the
   card's right side and the line sits on the left (see ≥ 900px). */
.vcj-duo { position: relative; isolation: isolate; overflow: hidden; margin-top: 36px; border-radius: 26px;
  background: radial-gradient(90% 70% at 0% 100%, rgba(229, 89, 95, .24), transparent 70%), linear-gradient(160deg, #1d2548, #121834);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px rgba(0, 0, 0, .35); }
.vcj-duo__set { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0; }
.vcj-duo__set img { width: 100%; }
.vcj-duo__copy { padding: 20px 22px 18px; }
.vcj-duo__line { font-size: 30px; font-weight: 900; line-height: 1.22; letter-spacing: .01em; }
.vcj-duo__line::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--vcj-coral); }
.vcj-duo__sub { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--vcj-on-dark-2); }
.vcj-duo__note { margin-top: 10px; font-size: 11px; color: var(--vcj-on-dark-3); }

/* the photo chapter: its own heading, the moving strip, the world clock under it */
/* 世界のいま — the first section after the hero: photos (mood), a first
   download point, the world clock. Same navy as the features section that
   follows, which joins it without a seam (no panel corner, its light lower). */
.vcj-world { overflow: hidden; background: radial-gradient(60% 40% at 20% 0%, rgba(229, 89, 95, .1), transparent 70%), var(--vcj-navy-900); padding: 44px 0 0; }
.vcj-world + .vcj-show { margin-top: 0; border-radius: 0; background: radial-gradient(70% 40% at 80% 35%, rgba(70, 92, 170, .22), transparent 70%), var(--vcj-navy-900); }
.vcj-world__get .vcj-get--band { margin-top: 6px; }
.vcj-clock { border-bottom: 1px solid var(--vcj-line-dark); }
.vcj-clock__times { margin-top: 20px; border-top: 1px solid var(--vcj-line-dark); }
.vcj-clock__head { max-width: var(--vcj-max); margin: 0 auto; padding: 0 var(--vcj-gutter); }
.vcj-clock__title { color: var(--vcj-on-dark); }
.vcj-clock__viewport {
  display: flex; overflow: hidden; padding: 14px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vcj-clock__track { display: flex; flex: none; gap: 40px; padding-right: 40px; animation: vcj-marquee 46s linear infinite; }
.vcj-clock__track li { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; color: var(--vcj-on-dark-2); }
.vcj-clock__track time { font-size: 20px; font-weight: 700; color: var(--vcj-on-dark); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vcj-clock__track .is-home time { color: var(--vcj-coral-on-dark); }
@keyframes vcj-marquee { to { transform: translateX(-100%); } }

/* everyday moments under the clock title: an endless strip that keeps moving
   (jp-male.js clones the set once and loops it). A swipe, drag or wheel moves it
   by hand and it carries on from there at once; it only holds while a finger is
   on it or it has keyboard focus. Reduced motion: no clones, no movement, it is
   scrolled by hand. Eight illustrative photos at their own proportions, never
   cropped or stretched: tall (--h) and shorter (82%) frames alternate, one
   landscape; the night one is the real Instax print (moments/polaroid-night.webp:
   scan background cut away, frame and the print's tilt kept) lying a little
   askew, so it has no rounded corners or ring. No names, places or statuses:
   the people are not presented as users. */
.vcj-moments {
  --h: 300px; --side: max(var(--vcj-gutter), calc((100% - var(--vcj-max)) / 2 + var(--vcj-gutter)));
  background: radial-gradient(38% 70% at 28% 50%, rgba(229, 89, 95, .14), transparent 70%), radial-gradient(40% 80% at 75% 50%, rgba(70, 92, 170, .14), transparent 70%);
}
.vcj-moments__track {
  display: flex; align-items: center; gap: 14px; padding: 16px 0 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.vcj-moments__track.is-dragging { cursor: grabbing; user-select: none; }
.vcj-moments__track img { -webkit-user-drag: none; user-select: none; }
.vcj-moments__track::-webkit-scrollbar { display: none; }
.vcj .vcj-moments__track:focus-visible { outline-offset: -4px; }
.vcj-moments__ph {
  flex: none; width: auto; max-width: none; height: calc(var(--h) * .82); border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 34px rgba(0, 0, 0, .4);
}
.vcj-moments__ph--tall { height: var(--h); }
.vcj-moments__polaroid { flex: none; width: auto; max-width: none; height: calc(var(--h) * .94); margin: 0 6px; transform: rotate(2.5deg); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); }
.vcj-moments__note { max-width: var(--vcj-max); margin: 0 auto; padding: 0 var(--vcj-gutter); text-align: right; font-size: 11px; color: var(--vcj-on-dark-3); }

/* ==========================================================================
   3. 翻訳 — warm colour band with a faint grid + collage
   ========================================================================== */
.vcj-trans {
  overflow: hidden; color: var(--vcj-ink); padding: 72px 0 calc(64px + var(--vcj-r));
  background:
    linear-gradient(rgba(18, 26, 48, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(18, 26, 48, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(60% 60% at 80% 40%, rgba(255, 190, 170, .45), transparent 70%),
    var(--vcj-blush);
}
.vcj-trans__grid { display: grid; gap: 30px; margin-top: 36px; }
.vcj-board {
  padding: 8px 18px 16px; border-radius: 28px; background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(18,26,48,.04), 0 30px 70px rgba(120, 50, 40, .14);
}
.vcj-board__row { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--vcj-line-light); }
.vcj-board__lang { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--vcj-ink-3); }
.vcj-board__lang img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.vcj-board__src p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--vcj-ink-2); }
.vcj-board__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vcj-coral-cta); transform: rotate(90deg); }
.vcj-board__arrow svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vcj-board__out { padding: 14px 16px 16px; border-radius: 18px 18px 18px 6px; background: var(--vcj-white); box-shadow: 0 0 0 1px var(--vcj-line-light); }
.vcj-board__out .vcj-board__lang { color: var(--vcj-coral-on-light); }
.vcj-board__out p { margin-top: 4px; font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--vcj-ink); }
.vcj-board__row--me .vcj-board__out { border-radius: 18px 18px 6px 18px; background: var(--vcj-navy-800); box-shadow: none; }
.vcj-board__row--me .vcj-board__out .vcj-board__lang { color: var(--vcj-coral-on-dark); }
.vcj-board__row--me .vcj-board__out p { color: #fff; }
.vcj-board__note { padding-top: 12px; font-size: 12px; color: var(--vcj-ink-3); }
/* the real screenshot is only 627px wide: shown at ≤ 313 css px (its 2x size), framed as its own card */
.vcj-trans__shot { width: min(100%, 360px); margin: 0 auto; padding: 16px 16px 14px; border-radius: 28px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.vcj-trans__shot img { width: 100%; max-width: 313px; margin: 0 auto; filter: drop-shadow(0 24px 30px rgba(120, 50, 40, .16)); }
.vcj-trans__shot figcaption { margin-top: 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--vcj-ink-2); }

/* ==========================================================================
   4. はじめかた — one navy panel on paper
   ========================================================================== */
.vcj-steps { background: var(--vcj-paper); color: var(--vcj-ink); padding: 56px 0 calc(56px + var(--vcj-r)); }
.vcj-steps__panel {
  position: relative; overflow: hidden; padding: 34px 22px 26px; border-radius: 28px; color: var(--vcj-on-dark);
  background: radial-gradient(60% 70% at 100% 0%, rgba(229, 89, 95, .28), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(70, 92, 170, .3), transparent 70%), var(--vcj-navy-900);
}
.vcj-steps__list { position: relative; display: grid; gap: 0; margin-top: 30px; }
.vcj-steps__list li { position: relative; padding: 0 0 28px 64px; }
.vcj-steps__list li::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 4px; width: 1px; background: linear-gradient(var(--vcj-coral-on-dark), rgba(255,141,146,.1)); }
.vcj-steps__list li:last-child::before { display: none; }
.vcj-steps__no {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font-size: 20px; font-weight: 700; color: var(--vcj-coral-on-dark); box-shadow: inset 0 0 0 1.5px var(--vcj-coral-on-dark);
}
.vcj-steps__list h3 { padding-top: 6px; font-size: 21px; font-weight: 700; line-height: 1.4; }
.vcj-steps__list p { margin-top: 6px; font-size: 15px; line-height: 1.75; color: var(--vcj-on-dark-2); }
.vcj-get--band { display: grid; gap: 4px; padding-top: 22px; border-top: 1px solid var(--vcj-line-dark); }

/* ==========================================================================
   5. 料金 (white)
   ========================================================================== */
.vcj-price { background: var(--vcj-white); color: var(--vcj-ink); padding: 64px 0 calc(64px + var(--vcj-r)); box-shadow: 0 -1px 0 var(--vcj-line-light); }
.vcj-price__grid { display: grid; gap: 34px; }
.vcj-price__key { display: grid; gap: 10px; }
.vcj-price__cell { padding: 20px 22px 22px; border-radius: 20px; }
.vcj-price__cell--free { background: linear-gradient(160deg, rgba(36,160,128,.12), rgba(36,160,128,.04)); }
.vcj-price__cell--paid { background: linear-gradient(160deg, rgba(207,63,72,.1), rgba(207,63,72,.03)); }
.vcj-price__big { margin-top: 10px; font-size: 23px; font-weight: 700; line-height: 1.45; }
.vcj-price__sub { font-size: 15px; font-weight: 500; color: var(--vcj-ink-2); }
.vcj-price__hint { margin-top: 16px; font-size: 14px; line-height: 1.8; color: var(--vcj-ink-2); }
.vcj-price__table { margin-top: 22px; border-top: 2px solid var(--vcj-ink); }
.vcj-price__table > div { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--vcj-line-light); }
.vcj-price__table dt { font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--vcj-ink-2); }
.vcj-price__table dd strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.6; }
.vcj-price__table dd span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.75; color: var(--vcj-ink-2); }
.vcj-tag { display: inline-block; padding: 2px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.vcj-tag--free { background: rgba(255,255,255,.7); color: var(--vcj-mint-on-light); }
.vcj-tag--paid { background: rgba(255,255,255,.7); color: var(--vcj-coral-on-light); }
.vcj-price__notes { display: grid; gap: 8px; margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--vcj-paper); }
.vcj-price__notes li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.75; color: var(--vcj-ink-2); }
.vcj-price__notes li::before { content: "※"; position: absolute; left: 0; }
.vcj-price__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 12px; }

/* ==========================================================================
   6. 安心への取り組み (navy)
   ========================================================================== */
.vcj-safety { background: radial-gradient(60% 50% at 0% 0%, rgba(70, 92, 170, .22), transparent 70%), var(--vcj-navy-900); padding: 72px 0 calc(64px + var(--vcj-r)); }
.vcj-safety__list { display: grid; margin-top: 34px; }
.vcj-safety__list li { position: relative; padding: 20px 0 20px 40px; border-top: 1px solid var(--vcj-line-dark); }
.vcj-safety__list li::before {
  content: ""; position: absolute; left: 0; top: 22px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--vcj-mint-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379d8bc' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 0 0 1px rgba(121, 216, 188, .35) inset;
}
.vcj-safety__list h3 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.vcj-safety__list p { margin-top: 4px; font-size: 14px; line-height: 1.85; color: var(--vcj-on-dark-2); }
.vcj-safety__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--vcj-line-dark); }

/* ==========================================================================
   FAQ (paper)
   ========================================================================== */
.vcj-faq { background: var(--vcj-paper); color: var(--vcj-ink); padding: 64px 0 calc(64px + var(--vcj-r)); }
.vcj-faq__grid { display: grid; gap: 28px; }
.vcj-faq .vcj-head .vcj-link { margin-top: 8px; }
.vcj-faq__list { border-top: 2px solid var(--vcj-ink); }
.vcj-faq details { border-bottom: 1px solid var(--vcj-line-light); }
.vcj-faq summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 20px 48px 20px 0; font-size: 16px; font-weight: 700; line-height: 1.6; }
.vcj-faq summary::-webkit-details-marker { display: none; }
.vcj-faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: var(--vcj-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121a30' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 1px var(--vcj-line-light); transition: transform .25s var(--vcj-ease);
}
.vcj-faq details[open] summary::after { transform: rotate(45deg); }
.vcj-faq details p { padding: 0 0 22px; font-size: 15px; line-height: 1.9; color: var(--vcj-ink-2); }

/* ==========================================================================
   7. FINAL CTA — centred, Tokyo night behind, dot horizon
   ========================================================================== */
.vcj-final { isolation: isolate; overflow: hidden; background: var(--vcj-navy-950); padding: 32px 0 88px; }
.vcj-final::before { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -10%; width: 80%; height: 60%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(229, 89, 95, .2), transparent);
}
.vcj-final__inner { position: relative; display: grid; gap: 30px; }
/* one mosaic: Tokyo night as a tall panel (tower at its centre, its legs within
   50% ± 8.4% of the photo's width, so it is always whole), the two photos
   stacked beside it, whole, at their own proportions. Panel heights follow the
   photos (column width p: 1.503p + 1.242p + gap); the city is cropped at its
   sides only. */
.vcj-final__visual { position: relative; isolation: isolate; }
.vcj-final__visual::before { content: ""; position: absolute; z-index: -1; inset: 8% -6% 4% 10%; pointer-events: none;   /* one light behind the mosaic */
  background: radial-gradient(closest-side, rgba(229, 89, 95, .22), rgba(70, 92, 170, .1) 60%, transparent);
}
.vcj-final__mosaic { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; margin: 0; }
.vcj-final__mosaic > img, .vcj-final__city { border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 22px 44px rgba(0, 0, 0, .45); }
.vcj-final__mosaic > img { grid-column: 2; width: 100%; }
.vcj-final__city { position: relative; grid-row: 1 / span 2; overflow: hidden; }
.vcj-final__city img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.vcj-final__city::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 34, 0) 70%, rgba(13, 16, 34, .45) 100%); }
.vcj-final__note { margin-top: 10px; text-align: right; font-size: 11px; color: var(--vcj-on-dark-3); }
.vcj-final__title { margin-top: 14px; font-size: clamp(38px, 11vw, 84px); font-weight: 900; line-height: 1.16; }
.vcj-get--final { margin-top: 28px; }

/* ---------- footer ---------- */
.vcj-footer { padding: 52px 0 calc(44px + env(safe-area-inset-bottom)); background: #0a0d1c; border-top: 1px solid var(--vcj-line-dark); }
.vcj-footer__inner { display: grid; gap: 26px; }
.vcj-footer__brand img { width: 110px; }
.vcj-footer__brand p { margin-top: 10px; font-size: 13px; color: var(--vcj-on-dark-3); }
.vcj-footer__brand .vcj-footer__age { margin-top: 6px; font-size: 12px; letter-spacing: .06em; }
.vcj-footer__nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.vcj-footer__nav a { display: flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--vcj-on-dark-2); text-decoration: none; }
.vcj-footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vcj-footer__legal { font-size: 11px; line-height: 1.8; color: var(--vcj-on-dark-3); }

/* ---------- mobile store dock ---------- */
.vcj-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(13, 16, 34, .94); border-top: 1px solid var(--vcj-line-dark);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateY(110%); transition: transform .35s var(--vcj-ease);
}
.vcj-dock.is-on { transform: none; }
.vcj-dock__label { display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.vcj-dock__label span { font-size: 10px; font-weight: 500; color: var(--vcj-on-dark-3); }
.vcj-dock .vcj-stores { justify-content: center; margin-top: 6px; }
.vcj-dock .vcj-store img { height: 42px; }

/* ---------- reveal (only when JS runs) ---------- */
.vcj-js .vcj-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--vcj-ease), transform .8s var(--vcj-ease); }
.vcj-js .vcj-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   phones (< 600px) — compact rhythm.
   Everything here is scoped to this query so tablet/desktop are untouched.
   ========================================================================== */
@media (max-width: 599px) {
  /* one section rhythm for every panel: 44 px in, 36 px out (+ the next panel's corner) */
  .vcj-show, .vcj-trans, .vcj-price, .vcj-safety, .vcj-faq { padding-top: 44px; padding-bottom: calc(36px + var(--vcj-r)); }
  .vcj-steps { padding-top: 28px; padding-bottom: calc(28px + var(--vcj-r)); }
  .vcj-h2 { margin-top: 10px; font-size: 27px; }          /* 27 px: 「必要なときにポイントを。」 fits one line at 360 */
  .vcj-lead { margin-top: 12px; font-size: 15px; line-height: 1.8; }

  /* trust strip: same four rows and links; the whole row is the link, so the
     action label becomes an arrow at the right (its text stays for screen readers) */
  .vcj-facts { padding: 32px 0 calc(32px + var(--vcj-r)); }
  .vcj-facts__heading { font-size: 18px; }
  .vcj-facts__list { margin-top: 12px; }
  .vcj-fact { min-height: 72px; padding: 12px 46px 12px 66px; }
  .vcj-fact__ico { top: 12px; }
  .vcj-fact__title { font-size: 15.5px; }
  .vcj-fact__text { font-size: 13.5px; line-height: 1.6; }
  .vcj-fact__go {
    position: absolute; right: 12px; top: 50%; width: 28px; height: 28px; margin: -14px 0 0;
    display: grid; place-items: center; border-radius: 50%; font-size: 0; text-decoration: none;
    box-shadow: 0 0 0 1px rgba(229, 89, 95, .25);
  }
  .vcj-fact__go::after { content: "→"; margin: 0; font-size: 14px; }

  /* demo: both phones whole, pins on the same UI; less air around them */
  .vcj-demo { gap: 20px; }
  .vcj-demo__stage { width: 100%; max-width: 400px; aspect-ratio: 1 / 1.17; }
  .vcj-demo__main { left: 2%; width: 54%; }   /* room for pins 1–2 on the left edge */
  .vcj-pin--1, .vcj-pin--2 { left: -3px; }
  .vcj-demo__sub { right: 0; bottom: 0; width: 37%; }
  .vcj-demo__list { margin-top: 16px; }
  .vcj-demo__list li { gap: 12px; padding: 11px 0; }
  .vcj-demo__list h3 { font-size: 16px; }
  .vcj-demo__list p { margin-top: 2px; font-size: 14px; line-height: 1.65; }
  .vcj-show__note { margin-top: 10px; }
  .vcj-world { padding-top: 36px; }
  .vcj-moments__track { gap: 12px; padding: 12px 0 16px; }
  .vcj-clock__viewport { padding: 8px 0 12px; }

  /* translation: the incoming example is the big one, the outgoing one is compact */
  .vcj-trans .vcj-small { margin-top: 8px; }
  .vcj-trans__grid { gap: 14px; margin-top: 20px; }
  .vcj-board { padding: 2px 16px 10px; }
  .vcj-board__row { padding: 14px 0; }
  .vcj-board__row--lead .vcj-board__out p { font-size: 21px; }
  .vcj-board__row:not(.vcj-board__row--lead) { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1.2fr); align-items: center; gap: 10px; padding: 12px 0; }
  .vcj-board__row:not(.vcj-board__row--lead) .vcj-board__arrow { width: 24px; height: 24px; transform: none; }
  .vcj-board__row:not(.vcj-board__row--lead) .vcj-board__arrow svg { width: 14px; height: 14px; }
  .vcj-board__row:not(.vcj-board__row--lead) .vcj-board__lang { font-size: 11px; letter-spacing: .02em; }
  .vcj-board__row:not(.vcj-board__row--lead) .vcj-board__src p { margin-top: 4px; font-size: 13px; line-height: 1.5; }
  .vcj-board__row:not(.vcj-board__row--lead) .vcj-board__out { padding: 10px 12px 12px; }
  .vcj-board__row:not(.vcj-board__row--lead) .vcj-board__out p { font-size: 15px; line-height: 1.5; }
  .vcj-board__note { padding-top: 8px; }
  /* real screenshot: a small proof shot beside its caption */
  .vcj-trans__shot { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; text-align: left; border-radius: 22px; }
  .vcj-trans__shot img { max-width: 128px; margin: 0; }
  .vcj-trans__shot figcaption { margin: 0; text-align: left; font-size: 13px; line-height: 1.6; }

  /* steps: same three steps, closer together */
  .vcj-steps__panel { padding: 24px 18px 18px; border-radius: 24px; }
  .vcj-steps__list { margin-top: 18px; }
  .vcj-steps__list li { padding: 0 0 16px 54px; }
  .vcj-steps__list li::before { left: 19px; top: 42px; }
  .vcj-steps__no { width: 38px; height: 38px; font-size: 17px; }
  .vcj-steps__list h3 { padding-top: 4px; font-size: 18px; }
  .vcj-steps__list p { margin-top: 2px; font-size: 14px; line-height: 1.65; }
  .vcj-get--band { padding-top: 16px; }

  /* price: free / paid side by side; every condition and link kept */
  .vcj-price .vcj-head .vcj-lead { display: none; }      /* restates the heading and the table below */
  .vcj-price__grid { gap: 18px; }
  .vcj-price__key { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vcj-price__cell { padding: 12px 14px 14px; border-radius: 16px; }
  .vcj-price__big { margin-top: 6px; font-size: 16px; line-height: 1.45; }
  .vcj-price__sub { display: block; font-size: 13px; }
  .vcj-tag { padding: 1px 10px; font-size: 13px; }
  .vcj-price__hint { margin-top: 10px; font-size: 13.5px; line-height: 1.7; }
  .vcj-price__table { margin-top: 14px; }
  .vcj-price__table > div { gap: 10px; padding: 10px 0; }
  .vcj-price__table dd span { margin-top: 2px; line-height: 1.65; }
  .vcj-price__notes { gap: 4px; margin-top: 14px; padding: 12px 14px; }
  .vcj-price__notes li { line-height: 1.65; }
  .vcj-price__links { gap: 0 20px; margin-top: 6px; }

  /* safety: all six measures and three links kept; tighter rows */
  .vcj-safety .vcj-head--dark .vcj-lead { display: none; }   /* restates the heading */
  .vcj-safety__list { margin-top: 18px; }
  .vcj-safety__list li { padding: 11px 0 11px 36px; }
  .vcj-safety__list li::before { top: 13px; width: 22px; height: 22px; background-size: 12px; }
  .vcj-safety__list h3 { font-size: 16px; }
  .vcj-safety__list p { margin-top: 2px; font-size: 13.5px; line-height: 1.7; }
  .vcj-safety__links { gap: 0 20px; margin-top: 10px; padding-top: 4px; }

  /* FAQ: same five questions */
  .vcj-faq__grid { gap: 16px; }
  .vcj-faq .vcj-head .vcj-link { margin-top: 2px; }
  .vcj-faq summary { padding: 13px 44px 13px 0; font-size: 15.5px; }
  .vcj-faq details p { padding-bottom: 16px; font-size: 14.5px; line-height: 1.8; }

  /* final: the mosaic first, the CTA right under it */
  .vcj-final { padding: 24px 0 44px; }
  .vcj-final__inner { gap: 26px; }
  .vcj-get--final { margin-top: 20px; }

  .vcj-footer { padding-top: 36px; }
  .vcj-footer__inner { gap: 18px; }
}

/* ==========================================================================
   small phones
   ========================================================================== */
@media (max-width: 374px) {
  :root { --vcj-gutter: 16px; }
  .vcj-store img { height: 45px; }
  .vcj-hero__lede { font-size: 14px; }
  .vcj-dock .vcj-store img { height: 40px; }
}

/* ==========================================================================
   ≥ 600px
   ========================================================================== */
@media (min-width: 600px) {
  :root { --vcj-gutter: 32px; --vcj-r: 34px; }
  .vcj-hero__title { font-size: clamp(44px, 7.6vw, 64px); }
  .vcj-hero__lede { font-size: 16px; max-width: 34em; }
  .vcj-store img { height: 52px; }
  .vcj-final__visual { max-width: 500px; }   /* tablets: the mosaic stays under a screen tall (≥ 900px: auto width) */
  /* tablets: the phone scene, centred, fixed height; the frame now has a left edge inside the page */
  .vcj-hero__visual { --hs: 440px; width: min(100%, 560px); margin: 0 auto; }
  .vcj-hero__video {
    left: 0;                           /* the fade must start at the box edge, not outside it */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 60%, transparent 96%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 15%, #000 60%, transparent 91%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 60%, transparent 96%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 15%, #000 60%, transparent 91%);
  }
  .vcj-hero__device { right: 0; }
  .vcj-hero__note { left: 0; }
  /* trust strip: 2×2 plate; the icon capsule grows into the glass mark with its index */
  .vcj-facts__list { grid-template-columns: 1fr 1fr; }
  .vcj-facts__list > li + li { border-top: 0; }
  .vcj-facts__list > li:nth-child(n+3) { border-top: 1px solid rgba(229, 89, 95, .14); }
  .vcj-facts__list > li:nth-child(even) { border-left: 1px solid rgba(229, 89, 95, .14); }
  .vcj-fact { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 24px 22px; }
  .vcj-fact__ico { position: static; width: auto; height: 38px; padding: 0 14px 0 12px; gap: 9px; margin-bottom: 16px; }
  .vcj-fact__ico svg { width: 19px; height: 19px; }
  .vcj-fact__ico::after { display: block; }
  .vcj-fact__title { font-size: 17px; }
  .vcj-fact__text { margin-top: 4px; font-size: 14px; }
  .vcj-fact__go { margin: auto 0 0; padding-top: 14px; font-size: 14px; }
  .vcj-price__key { grid-template-columns: 1fr 1fr; }
  .vcj-dock { display: none; }
}

/* ==========================================================================
   ≥ 900px
   ========================================================================== */
@media (min-width: 900px) {
  :root { --vcj-r: 40px; }
  body.vcj { font-size: 17px; }
  .vcj-lead { font-size: 17px; }
  .vcj-header__inner { height: 68px; }
  .vcj-header__logo img { width: 124px; }
  .vcj-header__nav { display: flex; gap: 4px; }
  .vcj-header__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; color: var(--vcj-on-dark-2); text-decoration: none; border-radius: 8px; transition: color .2s, background .2s; }
  .vcj-header__nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
  .vcj-header__cta { min-height: 44px; padding: 0 20px; font-size: 14px; }

  .vcj-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: end; gap: 48px; }
  .vcj-split .vcj-lead { margin: 0 0 6px; }

  .vcj-facts { padding: 72px 0 calc(88px + var(--vcj-r)); }
  .vcj-facts__heading { font-size: 22px; }
  .vcj-facts__list { grid-template-columns: repeat(4, 1fr); margin-top: 26px; border-radius: 28px; }
  .vcj-facts__list > li:nth-child(n) { border-top: 0; border-left: 0; }
  .vcj-facts__list > li:nth-child(n+2) { border-left: 1px solid rgba(229, 89, 95, .14); }
  .vcj-fact { padding: 30px 28px 28px; }
  .vcj-fact__ico { margin-bottom: 22px; }
  .vcj-fact__title { font-size: 18px; }
  .vcj-fact__text { margin-top: 6px; font-size: 15px; }
  .vcj-fact__go { padding-top: 18px; }

  .vcj-show { padding: 120px 0 calc(72px + var(--vcj-r)); }
  .vcj-demo { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; }
  .vcj-demo__stage { width: 100%; max-width: 560px; aspect-ratio: 1 / 1.08; }
  .vcj-demo__main { left: 4%; width: 54%; }
  .vcj-demo__sub { width: 36%; bottom: 6%; }
  .vcj-pin { width: 34px; height: 34px; font-size: 15px; }
  /* the card: line on the left, the two photos filling its right side */
  .vcj-duo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); align-items: center; margin-top: 104px; border-radius: 36px;
    background: radial-gradient(70% 90% at 0% 100%, rgba(229, 89, 95, .26), transparent 70%), linear-gradient(160deg, #1d2548, #121834); }
  .vcj-duo__set { grid-column: 2; grid-row: 1; gap: 4px; }
  .vcj-duo__copy { padding: 40px 36px 40px clamp(36px, 4.6vw, 64px); }
  .vcj-duo__line { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.18; }
  .vcj-duo__line::before { width: 36px; margin-bottom: 22px; }
  .vcj-duo__sub { margin-top: 18px; font-size: 16px; }
  .vcj-duo__note { margin-top: 22px; }
  .vcj-demo__list h3 { font-size: 21px; }
  .vcj-demo__list p { font-size: 16px; }
  .vcj-world { padding-top: 76px; }
  .vcj-world__get .vcj-get--band { margin-top: 14px; }
  .vcj-clock__times { margin-top: 32px; }
  .vcj-clock__title { font-size: 48px; }
  .vcj-moments { --h: 420px; }
  .vcj-moments__track { gap: 20px; padding: 26px 0 30px; }
  .vcj-moments__polaroid { margin: 0 10px; }
  .vcj-clock__track { gap: 56px; padding-right: 56px; }
  .vcj-clock__track time { font-size: 22px; }

  .vcj-trans { padding: 128px 0 calc(112px + var(--vcj-r)); }
  .vcj-trans__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: 56px; align-items: center; margin-top: 56px; }
  .vcj-board { padding: 12px 36px 22px; border-radius: 36px; }
  .vcj-board__row { grid-template-columns: minmax(0, .85fr) 44px minmax(0, 1.15fr); align-items: center; gap: 20px; padding: 26px 0; }
  .vcj-board__arrow { width: 44px; height: 44px; transform: none; }
  .vcj-board__src p { font-size: 18px; }
  .vcj-board__out { padding: 18px 22px 20px; }
  .vcj-board__out p { font-size: 25px; }
  .vcj-trans__shot { width: 100%; max-width: 360px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }

  .vcj-steps { padding: 72px 0 calc(72px + var(--vcj-r)); }
  .vcj-steps__panel { padding: 64px 64px 48px; border-radius: 40px; }
  .vcj-steps__list { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 52px; }
  .vcj-steps__list li { padding: 76px 0 8px; }
  .vcj-steps__list li::before { left: 64px; right: -28px; top: 27px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--vcj-coral-on-dark), rgba(255,141,146,.12)); }
  .vcj-steps__no { width: 56px; height: 56px; font-size: 22px; }
  .vcj-steps__list h3 { padding-top: 0; font-size: 24px; }
  .vcj-steps__list p { font-size: 16px; }
  .vcj-get--band { grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-top: 44px; padding-top: 30px; }
  .vcj-get--band .vcj-get__label { font-size: 18px; }
  .vcj-get--band .vcj-stores { margin-top: 0; }

  .vcj-price { padding: 112px 0 calc(112px + var(--vcj-r)); }
  .vcj-price__grid { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
  .vcj-price__grid > .vcj-head { position: sticky; top: 110px; }
  .vcj-price__cell { padding: 26px 28px 28px; }
  .vcj-price__big { font-size: 27px; }
  .vcj-price__table > div { grid-template-columns: 110px 1fr; padding: 18px 0; }

  .vcj-safety { padding: 120px 0 calc(112px + var(--vcj-r)); }
  .vcj-safety__list { grid-template-columns: repeat(3, 1fr); column-gap: 48px; margin-top: 56px; }
  .vcj-safety__list li { padding: 24px 0 26px 40px; }

  .vcj-faq { padding: 112px 0 calc(112px + var(--vcj-r)); }
  .vcj-faq__grid { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .vcj-faq__grid > .vcj-head { position: sticky; top: 110px; }
  .vcj-faq__grid .vcj-h2 { font-size: 44px; }
  .vcj-faq summary { font-size: 18px; padding: 26px 56px 26px 0; }
  .vcj-faq details p { font-size: 16px; }

  /* copy left, mosaic right. The photo column p keeps the mosaic (2.745p + gap)
     inside the viewport height and leaves the title its width. */
  .vcj-final { padding: 88px 0 96px; }
  .vcj-final__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(40px, 5vw, 80px); }
  .vcj-final__visual { grid-column: 2; grid-row: 1; max-width: none; }
  .vcj-final__mosaic { --p: min(236px, calc((100vh - 210px) / 2.745), 17vw); grid-template-columns: calc(var(--p) * 1.3) var(--p); gap: 12px; }
  .vcj-final__mosaic > img, .vcj-final__city { border-radius: 22px; }
  .vcj-final__copy { grid-column: 1; grid-row: 1; max-width: 600px; }
  .vcj-final__title { font-size: clamp(44px, 4.8vw, 68px); }
  .vcj-final .vcj-store img { height: 58px; }
  .vcj-final .vcj-get__label { font-size: 16px; }

  .vcj-footer__inner { grid-template-columns: 1fr 2fr; align-items: start; }
  .vcj-footer__nav { gap: 0 28px; }
  .vcj-footer__legal { grid-column: 1 / -1; }
}

/* ==========================================================================
   ≥ 1100px — composed desktop hero
   Narrow copy column with big type; the stage takes the rest and may
   run past the container towards the right edge of the viewport.
   ========================================================================== */
@media (min-width: 1100px) {
  .vcj-hero { min-height: clamp(680px, calc(100svh - 68px), 900px); display: flex; align-items: center; padding: 36px 0 calc(64px + var(--vcj-r)); }
  .vcj-hero::before { width: 70vw; height: 70vw; left: -26vw; top: -30vw; }
  .vcj-hero__horizon { height: 70%; }
  .vcj-hero__inner { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); align-items: center; gap: 36px; }
  .vcj-kicker { font-size: 12px; }
  .vcj-hero__title { margin-top: 24px; font-size: clamp(60px, 5.1vw, 76px); line-height: 1.13; letter-spacing: -0.01em; }
  .vcj-hero__lede { margin-top: 24px; font-size: 18px; line-height: 1.85; max-width: 25em; }
  .vcj-get--hero { margin-top: 34px; }
  .vcj-get--hero .vcj-store img { height: 58px; }
  .vcj-get__label { font-size: 16px; }
  .vcj-get__note { font-size: 13px; }

  /* Desktop: copy | phone | person, left to right, across the full width.
     The frame stands behind the whole hero, 92% of the visible hero tall (never
     stretched, head never cut), so her face stays mid-size and the room shows
     around her. The phone (74% of the hero tall) is the nearest object, in the
     column next to the copy; the frame is then slid so her face starts a clear
     gap after the phone's right edge — the phone may cover only the left ends
     of her hair. Everything follows the visible hero height --hh. */
  .vcj-hero {
    --hh: clamp(680px, calc(100svh - 68px), 900px);
    --u: calc(var(--hh) * .92 / 1080);
    --ph: calc(var(--hh) * .74);
    --cl: max(var(--vcj-gutter), calc((100vw - var(--vcj-max)) / 2 + var(--vcj-gutter)));   /* copy's left edge */
    --phone-r: calc(var(--cl) + 470px + 36px - 10px + var(--ph) * 690 / 1492);   /* hero-phone-v2.webp ratio */
    --fx: calc(var(--phone-r) + 56px + var(--u) * 150);                                  /* face centre */
  }
  /* static + no isolation: the video's z-index -1 then lands in the hero's own
     stacking context, under the copy column */
  .vcj-hero__visual { --u: inherit; position: static; isolation: auto; height: auto; margin: 0; }   /* --u: the hero's, not the phone scene's */
  .vcj-hero__visual::before { content: none; }
  .vcj-hero__call { inset: 0 auto auto calc(var(--fx) - var(--u) * 1310); width: calc(var(--u) * 1920); height: calc(var(--u) * 1080); }
  .vcj-hero__call::after {             /* soft shade under the copy only (the clip's left side is already dark) */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(13, 16, 34, 0) 0%, rgba(13, 16, 34, .55) 15%, rgba(13, 16, 34, .3) 27%, rgba(13, 16, 34, 0) 40%);   /* starts clear: no edge where the frame begins */
  }
  .vcj-hero__video {
    inset: 0; width: 100%; height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 3%, #000 74%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 3%, #000 74%, transparent 100%);
  }
  .vcj-hero__device { position: relative; right: auto; top: auto; justify-self: start; margin-left: -10px; }
  .vcj-hero__device::before { inset: 4% -34% 0 -20%; background: radial-gradient(48% 46% at 62% 50%, rgba(255, 168, 118, .2), rgba(229, 89, 95, .08) 55%, transparent 75%); }
  .vcj-hero__phone { height: var(--ph); filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .6)); }
  .vcj-hero__note { left: auto; right: var(--vcj-gutter); bottom: calc(var(--vcj-r) + 14px); font-size: 11px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(body.vcj) { scroll-behavior: auto; }
  .vcj *, .vcj *::before, .vcj *::after { animation: none !important; transition: none !important; }
  .vcj-js .vcj-reveal { opacity: 1; transform: none; }
}