/* KAMIKAZE — phone layer (V). Loaded after every page's own <style> with media="(max-width: 760px)",
   so nothing here can touch the PC design. Edit phone layout and phone scroll films here only.

   Phone rules of thumb:
   - Pins are 100svh (the small viewport): the URL bar showing/hiding never resizes or jumps a pinned film.
   - Shorter pinned travel than PC: a thumb flick moves 1–3 screens, so long holds feel stuck.
   - Never a black/white screen with nothing on it: something is always on stage while a film is pinned.
   - Stack, don't overlay: photo above, words below — text never sits on a face or a busy picture. */

/* ---------- shared ---------- */
/* nothing may widen the page sideways (sliding-in cards, the kanji mark…): a sideways swipe showed a blank strip and stuck.
   clip, not hidden — hidden would turn body into a scroll box and break every sticky pin */
html, body { overflow-x: clip; }
[data-scroll] .pin, .scrolly .pin { block-size: 100svh; min-block-size: 0; }

/* ---------- 1. Heroes: copy stays readable, lifts away late; short travel ---------- */
.scrolly::after { block-size: 30svh; }
.scrolly .wrap { opacity: 1; translate: 0 calc(var(--p, 0) * -60px); }   /* phone: the copy rides out with the pin instead of fading to an empty frame */
.scrolly .bg { scale: calc(1.08 + var(--p, 0) * .12); translate: none; }   /* phone: slow push-in instead of a zoom-out */
.lp-hero .wrap { min-block-size: 0; justify-content: flex-end; padding-block: 96px 40px; }
.lp-hero .h-hero { font-size: clamp(34px, 10.4vw, 46px); }
.lp-hero .omakase { font-size: 22px; }
.lp-hero .omakase img { block-size: 44px; }
.lp-hero .actions { display: grid; gap: 10px; }

/* TOP: skyline pushes in, the wordmark stays as the last thing on screen until the numbers arrive */
.top-hero { block-size: 135svh; }
.top-hero .wrap { display: flex; flex-direction: column; justify-content: flex-end; padding-block: 96px 40px; }
.top-hero .bg { scale: calc(1.1 + var(--p, 0) * .15); translate: 0 calc(var(--p, 0) * -3%); }
.top-hero .copy > :not(.hero-mark) { opacity: clamp(0, calc(1.5 - var(--p, 0) * 2.4), 1); translate: 0 calc(var(--p, 0) * -30px); }
.top-hero .hero-mark { transform-origin: 0 100%; scale: calc(1 + var(--p, 0) * .25); translate: 0 calc(var(--p, 0) * -6svh); opacity: 1; }
.top-hero .wordmark { inline-size: 78vw; }
.top-hero .kicker { font-size: 15px; letter-spacing: .24em; }
.top-hero .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.top-hero .actions .btn { padding-inline: 12px; }

/* ---------- 2. TOP page: nothing sticky over flowing text ---------- */
#export .stack[style*="sticky"] { position: static !important; }
.message .portrait { position: static; max-inline-size: 300px; }
.message .portrait img { aspect-ratio: 1; }
.biz-grid .biz { min-block-size: 300px !important; }

/* ---------- 3. Logistics hero: globe up top, title below; the globe keeps the stage after the copy leaves ---------- */
.lg-hero { block-size: 150svh; }
.lg-hero .globe { block-size: 62%; inset-block-start: 9%; scale: calc(1 + var(--p, 0) * .35); }
.lg-hero .pin::after, [dir="rtl"] .lg-hero .pin::after { background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,.9) 64%); }
.lg-hero .wrap { justify-content: flex-end; padding-block: 96px 40px; }
.lg-hero .fade { opacity: clamp(0, calc(1.6 - var(--p, 0) * 2.2), 1); }
.split-title { font-size: clamp(38px, 11vw, 50px); }
.split-title > span { opacity: clamp(0, calc(1.5 - var(--p, 0) * 2), 1); }
.split-title .l1 { translate: calc(var(--p, 0) * -24vw) 0; }
.split-title .l2 { translate: calc(var(--p, 0) * 24vw) 0; }
.ocean { block-size: 150svh; }
.ocean .wrap > * { opacity: clamp(0, calc((var(--p, 0) - .1) * 3), 1); }

/* ---------- 4. Cars: trouble film — picture card on top, the case below it, no text over the photo ---------- */
.tf { block-size: 640svh; }
.tf-head { inset-block-start: 112px; }
.tf-head .h2 { font-size: 24px; }
.tf-media { inset: 168px var(--gutter) auto; block-size: 36svh; border-radius: 16px; }
.tf-media::after { background: none; }
.tf-frame { inline-size: max(100%, calc(36svh * 16 / 9)); }   /* 16:9 photos: a wide, short card crops far less than a tall one */
.tf-tag { font-size: 11px; padding: 6px 9px 6px 22px; }
.tf-tag::before { inset-inline-start: 8px; }
.tf-copy { inset-block: calc(168px + 36svh + 22px) auto; inset-inline: var(--gutter); max-inline-size: none; }
.tf-copy h3 { font-size: 22px; margin-block: 10px; }
.tf-copy p { font-size: 14px; line-height: 1.75; }
/* the bill: a compact card on the right of the picture, rows grow downwards — most of the photo stays visible */
.tf-bill { inset-block: 176px auto; inset-inline: auto calc(var(--gutter) + 8px); inline-size: 60%; translate: none; padding: 8px 12px; border-radius: 10px; }
.tf-bill li { font-size: 10.5px; gap: 8px; max-block-size: calc(var(--s) * 22px); padding-block: calc(var(--s) * 3px); }
.tf-bill b { font-size: 11.5px; } .tf-bill .tot { padding-block-start: 5px; margin-block-start: 2px; } .tf-bill .tot b { font-size: 14px; }
.tf-bill .note { font-size: 9px; padding-block-start: 2px; }

/* ---------- 5. Cars: support film — 安心 → light → title → the 4 steps deal in like cards, one at a time ---------- */
.sf { block-size: 900svh;
  /* phone timeline: 「安心してください！カミカゼがサポートします」 holds on screen .10→.22 before the light opens (was a blink) */
  --w: clamp(0, calc((var(--p, 0) - 0.22) / 0.06), 1);
  --t-in: clamp(0, calc((var(--p, 0) - 0.27) / 0.03), 1); --t-out: clamp(0, calc((var(--p, 0) - 0.38) / 0.04), 1);
  --u: clamp(0, calc((var(--p, 0) - 0.50) / 0.48), 1); }
.sf-intro p { font-size: 34px; }
.sf-intro .sf-l2 { font-size: 22px; }
.sf-intro span { --o: clamp(0, calc(var(--a) * 23 - var(--c) + 2.5), 1); }   /* the first characters are already forming as the film arrives: no empty black frame */
.sf-head { opacity: clamp(0, calc((var(--p, 0) - 0.40) / 0.03), 1); }
.sf-title p { font-size: 30px; line-height: 1.2; }
.sf-title small { font-size: 14px; }
.sf-head { inset-block-start: 112px; }
.sf-head .h1 { font-size: 28px; }
.sf-head .lead { font-size: 14px; }
/* phone: no horizontal track (cards cut at both edges). One card slot; each next card slides up over the last,
   which settles back a little like a dealt deck. --s = 0..3 position along the 4 steps (same stepped holds as PC). */
.sf-track { inset: 210px var(--gutter) 96px; inline-size: auto; display: block; translate: none; transform: none; --s: calc(var(--hp) * 3);
  opacity: clamp(0, calc((var(--p, 0) - 0.42) / 0.05), 1); }
.sf-card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; transform-origin: 50% 0;
  --d: calc(var(--s) - var(--i)); --enter: clamp(0, calc(var(--d) + 1), 1); --past: clamp(0, var(--d), 1);
  translate: 0 calc((1 - var(--enter)) * 100svh); scale: calc(1 - var(--past) * 0.06); opacity: calc(1 - var(--past)); }
.sf-card img { max-block-size: none; flex: 1 1 auto; min-block-size: 0; aspect-ratio: auto; filter: none;
  box-shadow: 0 -10px 40px rgba(0,0,0,calc(var(--enter) * .12)); }
.sf-card figcaption { opacity: 1; grid-template-columns: auto 1fr; background: var(--gray-50); }
.sf-card .no { font-size: 32px; }
.sf-card h3 { font-size: 17px; }
.sf-rail { inset-block-end: 40px; inset-inline-end: 84px; opacity: clamp(0, calc((var(--p, 0) - 0.48) / 0.03), 1); }

/* ---------- 6. Cars: customer voices — framed photo on top, the voice below; title is on stage from the first frame ---------- */
.vfm-intro { gap: 14px; }
.vfm-intro .eyebrow, .vfm-title, .vfm-stats, .vfm-yen, .vfm-note { opacity: 1; filter: none; }
.vfm-title { font-size: 34px; scale: calc(1.06 - clamp(0, calc(var(--ip, 0) * 2), 1) * 0.06); }
.vfm-stats { display: grid; gap: 6px; font-size: 14px; }
.vfm-stats b { font-size: 30px; }
.vfm-yen b { font-size: 26px; }
.vfm-note { font-size: 12px; }
.vfm-photo { inset: 126px var(--gutter) auto; block-size: 30svh; inline-size: auto; border-radius: 14px; }
.vfm-photo::after { content: none; }
.vfm-photo img { filter: none; object-position: 50% 30%; }   /* portrait photos in a landscape frame: keep faces and car, lose the floor */
.vfm-panel { inset-block: calc(126px + 30svh + 16px) 22px; inset-inline: var(--gutter); }
.vfm-no { font-size: 11px; }
.vfm-car { margin-block: 8px 10px; font-size: 22px; }
.vfm-car small { font-size: 12px; margin-block-start: 4px; }
.vfm-meta { grid-template-columns: auto 1fr; gap: 4px 18px; }
.vfm dt { font-size: 11px; margin-block-end: 2px; }
.vfm-meta dd { font-size: 14px; line-height: 1.5; }
.vfm-body { gap: 14px; padding-block-start: 12px; }
.vfm-q { padding-block-start: 12px; }
.vfm-q dd { font-size: 14px; line-height: 1.75; }
.vfm-bodywrap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent 100%);
                        mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent 100%); }   /* scrolled answers fade out at the top too, no half-cut line */
.vfm-saved { margin-block-start: 10px; padding-block-start: 12px; gap: 12px; padding-inline-end: 64px; }   /* clear the WhatsApp float */
.vfm-saved b { font-size: 40px; }
.vfm-dots { inset-block-start: 112px; }

/* ---------- 7. Cars: static sections ---------- */
/* hero photo: the LC300 sits at the right of a 16:9 frame — on a phone show it as a top picture, copy on black below */
/* hero photo: the LC300 sits at the right of a 16:9 frame — on a phone show it as a top picture, copy on black below */
/* same frame as the sell / repair heroes: a 470px picture from under the header, copy from a fixed line below the car */
.lp-hero .bg[src*="hero-lc300"] { inset-block: 60px auto; block-size: 470px; object-position: 76% 60%; }
.lp-hero:has(.bg[src*="hero-lc300"]) .pin::after { background: linear-gradient(180deg, rgba(10,10,10,.1) 0, rgba(10,10,10,.1) 340px, rgba(10,10,10,.8) 450px, var(--ink) 530px); }
.lp-hero:has(.bg[src*="hero-lc300"]) .wrap { justify-content: flex-start; padding-block: 380px 28px; }
.lp-hero:has(.bg[src*="hero-lc300"]) .h-hero { font-size: 32px; }
.lp-hero .actions { padding-inline-end: 64px; }
.lp-hero .eyebrow { color: #e8e8e8; text-shadow: 0 1px 10px rgba(0,0,0,.9); }   /* small grey caps vanished on the photo */
.lp-hero .eyebrow::before { background: #e8e8e8; }
.mark { white-space: nowrap; }   /* a highlighted word never splits (激/安) */   /* clear the WhatsApp float */
/* "now 500 → 3 years → 350": side by side, so the comparison reads at a glance */
.depr { grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.depr figure img { max-inline-size: none; }
.depr figcaption { font-size: 13px; word-break: keep-all; }   /* break at the space, never inside クルマ */
.depr figcaption b { font-size: 1.9em; }
.depr .yrs { inline-size: 56px; block-size: 56px; font-size: 11px; margin-block-start: 8vw; border-width: 1.5px; }
.depr .yrs b { font-size: 20px; }
.nw { display: inline-block; }   /* keep a phrase on one line: <span class="nw"> in the markup */
.lp-photo-band .lp-num { font-size: 56px; }
.lp-num { font-size: 60px; }
.fuel th, .fuel td { padding: 14px 6px; }
.fuel td { font-size: 24px; }
.stack:has(> img[src*="taxi.webp"]) { text-align: center; }
.stack > img[src*="taxi.webp"] { margin-inline: auto; }   /* the rest of the page is centred: don't hug the left here */
.split .rounded img.cover[src*="taxi-meter"] { aspect-ratio: 4 / 3 !important; }
.company-band .r { max-block-size: 300px; }
.company-band .r img { object-position: 50% 20%; }
.area > img { max-block-size: 240px; }
.fee .calc { padding: 18px; font-size: 16px; }

/* "コスパを考えると、やっぱり中古車。だけど、、、" — pinned on black, line by line, the three dots one at a time,
   then it swells and fades straight into the (also black) trouble film */
.cospa { block-size: 210svh; padding: 0; overflow: clip; }
.cospa p { position: sticky; inset-block-start: 0; block-size: 100svh; display: grid; place-content: center; font-size: 26px; line-height: 1.5;
  --out: clamp(0, calc((var(--p, 0) - 0.86) / 0.14), 1); scale: calc(1 + var(--out) * 0.25); opacity: calc(1 - var(--out)); filter: blur(calc(var(--out) * 8px)); }
.cospa p br { display: none; }
.cospa .l1, .cospa .l2, .cospa .l3 { display: block; }
.cospa .l1 { --o: clamp(0, calc(var(--p, 0) / 0.16), 1); }
.cospa .l2 { --o: clamp(0, calc((var(--p, 0) - 0.2) / 0.16), 1); font-size: 34px; }
.cospa .l3 { --o: clamp(0, calc((var(--p, 0) - 0.44) / 0.12), 1); margin-block-start: 18px; color: #bdbdbd; }
.cospa .l1, .cospa .l2, .cospa .l3 { opacity: var(--o); translate: 0 calc((1 - var(--o)) * 24px); filter: blur(calc((1 - var(--o)) * 10px)); }
.cospa .l3 span { display: inline-block; opacity: clamp(0, calc((var(--p, 0) - 0.58 - var(--d) * 0.06) / 0.04), 1); }

/* 料金 — pinned: title → "成功報酬…" → 50% counts up (script in cars.html) → the example builds line by line → 5万円 lands */
#price { block-size: 240svh; padding: 0; }
#price .fee { position: sticky; inset-block-start: 101px; block-size: calc(100svh - 101px); display: flex; flex-direction: column; justify-content: center; align-items: center; }
#price .fee > * { --o: 1; opacity: var(--o); translate: 0 calc((1 - var(--o)) * 24px); }
#price .fee > .eyebrow, #price .fee > .h1 { --o: clamp(0, calc(var(--p, 0) / 0.08 + 0.2), 1); }
#price .fee > .lead { --o: clamp(0, calc((var(--p, 0) - 0.06) / 0.08), 1); }
#price .fee > .lp-num { --o: clamp(0, calc((var(--p, 0) - 0.12) / 0.06), 1); scale: calc(1.5 - clamp(0, calc((var(--p, 0) - 0.12) / 0.24), 1) * 0.5); font-size: 88px; }
#price .fee > .calc { --o: clamp(0, calc((var(--p, 0) - 0.4) / 0.08), 1); display: grid; gap: 10px; justify-items: center; }
#price .calc > span { opacity: clamp(0, calc((var(--p, 0) - 0.4 - var(--k) * 0.12) / 0.08), 1); }
#price .calc > span:nth-child(1) { --k: 0; } #price .calc > span:nth-child(2) { --k: 1; }
#price .calc > .eq { --k: 2; scale: calc(1.8 - clamp(0, calc((var(--p, 0) - 0.64) / 0.08), 1) * 0.8); }

/* ---------- 8. Small fixes ---------- */
.lp-band p { font-size: 22px; padding-inline: var(--gutter); }
.cars-tabs a { font-size: 12px; padding: 13px 4px; }
/* phone: the buy/sell/repair tabs live right under the header from the first frame, not after the hero */
.cars-tabs { position: fixed; inset-block-start: 60px; inset-inline: 0; }

/* ---------- 9. Cars: scroll scenes for the story above the trouble film (phone) ----------
   --p = pinned progress (data-scroll), --v = element's trip through the screen (data-view, 0 = top enters at the bottom).
   Numbers marked data-m-count count with the same progress (script in cars.html). */
.car-city .reveal, .m-asset.reveal, .depr.reveal, .m-resale.reveal, .m-spent.reveal, .m-meter.reveal { opacity: 1; transform: none; transition: none; }

/* ドバイはクルマ社会 — pinned: the skyline pulls back, title, then 350万 / 350万 count up side by side */
.car-city { block-size: 210svh; padding: 0; overflow: clip; }
.car-city > img { position: sticky; inset: auto; inset-block-start: 0; block-size: 100svh; margin-block-end: -100svh; scale: calc(1.35 - clamp(0, calc(var(--p, 0) / 0.5), 1) * 0.35); }
.car-city::after { background: rgba(10,10,10, calc(.3 + clamp(0, calc(var(--p, 0) / 0.25), 1) * .32)); }
.car-city .wrap { position: sticky; inset-block-start: 0; block-size: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-block: 100px 40px; }
.car-city .wrap > * { opacity: var(--o); translate: 0 calc((1 - var(--o)) * 30px); filter: blur(calc((1 - var(--o)) * 8px)); }
.car-city .eyebrow { --o: clamp(0, calc(var(--p, 0) / 0.1), 1); }
.car-city .h1 { --o: clamp(0, calc((var(--p, 0) - 0.03) / 0.12), 1); scale: calc(1.25 - var(--o) * 0.25); }
.car-city .lead:first-of-type { --o: clamp(0, calc((var(--p, 0) - 0.16) / 0.08), 1); }
.car-city .lp-num { --o: clamp(0, calc((var(--p, 0) - 0.22) / 0.06), 1); }
.car-city .lead:last-child { --o: clamp(0, calc((var(--p, 0) - 0.62) / 0.08), 1); }

/* ドバイで車は"消耗品"じゃない。資産です。 — the line rises in, then 資産 gets painted black */
.m-asset .h1 { --o: clamp(0, calc((var(--v, 0) - 0.04) / 0.2), 1); opacity: var(--o); translate: 0 calc((1 - var(--o)) * 36px); letter-spacing: calc((1 - var(--o)) * 0.12em); }
.m-asset .mark { --w: clamp(0, calc((var(--v, 0) - 0.22) / 0.12), 1);
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / calc(var(--w) * 100%) 100%; color: color-mix(in srgb, var(--white) calc(var(--w) * 100%), var(--ink)); }

/* 資産 + 500万 → 3年後 → 350万 — pinned: the comparison builds, 350 counts down from 500, and the screen holds
   on the finished line before the resale number below scrolls in */
.asset-film { block-size: 240svh; }
.asset-stage { position: sticky; inset-block-start: 101px; block-size: calc(100svh - 101px); display: flex; flex-direction: column; justify-content: center; }
.depr figure:first-child { --o: clamp(0, calc((var(--p, 0) - 0.06) / 0.1), 1); opacity: var(--o); translate: calc((1 - var(--o)) * -50px) 0; }
.depr .yrs { --o: clamp(0, calc((var(--p, 0) - 0.16) / 0.1), 1); opacity: var(--o); scale: calc(0.4 + var(--o) * 0.6); rotate: calc((1 - var(--o)) * -200deg); }
.depr figure:last-child { --o: clamp(0, calc((var(--p, 0) - 0.26) / 0.1), 1); opacity: var(--o); translate: calc((1 - var(--o)) * 50px) 0; }

/* リセールバリュー 70% — the number lands big and counts up */
.m-resale { --o: clamp(0, calc((var(--v, 0) - 0.04) / 0.18), 1); opacity: var(--o); }
.m-resale .lp-num { display: inline-block; scale: calc(1.4 - var(--o) * 0.4); }

/* つまり、あなたが実質使った金額は たった150万円 — the card lifts in, the amount drops 500 → 150 */
.m-spent { --o: clamp(0, calc((var(--v, 0) - 0.04) / 0.18), 1); opacity: var(--o); scale: calc(0.9 + var(--o) * 0.1); translate: 0 calc((1 - var(--o)) * 30px); }

/* それなのに、、、 / でも、ガソリン代が、、 — the black band opens from its centre line, the words tighten into place */
.m-band { --o: clamp(0, calc((var(--v, 0) - 0.04) / 0.2), 1); clip-path: inset(calc((1 - var(--o)) * 50%) 0); }
.m-band p { --t: clamp(0, calc((var(--v, 0) - 0.14) / 0.18), 1); opacity: var(--t); letter-spacing: calc(0.02em + (1 - var(--t)) * 0.4em); filter: blur(calc((1 - var(--t)) * 6px)); }

/* まだ月のタクシーに… — the taxi drives in from the left, the lines rise, 360 / 210 count up, the meter zooms */
.m-taxi { --o: clamp(0, calc((var(--v, 0) - 0.02) / 0.26), 1); translate: calc((1 - var(--o)) * -110vw) 0; rotate: calc((1 - var(--o)) * -4deg); }
.m-rise { --o: clamp(0, calc((var(--v, 0) - 0.04) / 0.18), 1); opacity: var(--o); translate: 0 calc((1 - var(--o)) * 28px); }
.m-pop { --o: clamp(0, calc((var(--v, 0) - 0.05) / 0.18), 1); opacity: var(--o); scale: calc(0.9 + var(--o) * 0.1); }
.m-meter { --o: clamp(0, calc((var(--v, 0) - 0.02) / 0.3), 1); opacity: var(--o); }
.m-meter img { scale: calc(1.3 - var(--o) * 0.3); }

@media (prefers-reduced-motion: reduce) {
  .asset-film { block-size: auto; } .asset-stage { position: static; block-size: auto; }
  .car-city { block-size: auto; } .car-city > img { position: absolute; inset: 0; block-size: 100%; margin: 0; scale: none; } .car-city .wrap { position: relative; block-size: auto; }
  .car-city .wrap > *, .m-asset .h1, .depr figure, .depr .yrs, .m-resale, .m-spent, .m-band p, .m-taxi, .m-rise, .m-pop, .m-meter { opacity: 1; translate: none; scale: none; rotate: none; filter: none; letter-spacing: normal; }
  .m-band { clip-path: none; } .m-asset .mark { background: var(--ink); color: var(--white); } .m-meter img { scale: none; }
}

/* ---------- 10. Cars / sell (phone) ---------- */
/* hero: the LX + Marina as a top picture, copy on black below (same frame as the buy page) */
.lp-hero .bg[src*="hero-sell"] { inset-block: 60px auto; block-size: 470px; object-position: 80% 50%; }   /* the LX sits low in its frame: start the picture under the tabs so the car clears the headline */
.lp-hero:is(:has(.bg[src*="hero-sell"]), :has(.bg[src*="hero-lc300"])) .pin { block-size: auto; min-block-size: 100svh; }   /* copy is taller than a short Safari screen: let the pin grow (site.js pins it by its bottom) instead of cutting the buttons */
.lp-hero:has(.bg[src*="hero-sell"]) .wrap { justify-content: flex-start; padding-block: 372px 28px; }   /* fixed: Safari's short screen must not slide the copy up over the car */
.lp-hero:has(.bg[src*="hero-sell"]) .h-hero { font-size: 30px; } .lp-hero:has(.bg[src*="hero-sell"]) .h-hero br:nth-of-type(2) { display: none; }   /* ドバイなら、/ もっと高値で売れるのに。 */
.lp-hero:has(.bg[src*="hero-sell"]) .pin::after { background: linear-gradient(180deg, rgba(10,10,10,.1) 0, rgba(10,10,10,.1) 340px, rgba(10,10,10,.8) 450px, var(--ink) 530px); }

.pc-only { display: none; } .sp-only { display: revert; }

/* こんなお悩み — pinned on black. The worried owner sits in the dark as a backdrop that slowly closes in;
   the four worries arrive one at a time as big inner-voice lines (blur → sharp), each pushed up and away by the next. */
.worries { block-size: 340svh; padding: 0; background: var(--ink); color: var(--white); }
.worries .split { position: sticky; inset-block-start: 101px; block-size: calc(100svh - 101px); display: grid; grid-template: auto auto 1fr / minmax(0, 1fr); gap: 0; padding-block: 28px 32px; overflow: hidden; }
.worries .split > .reveal:not(.illo) { display: contents; }
.worries .reveal { transition: none; transform: none; opacity: 1; }
.worries .eyebrow { grid-area: 1 / 1; color: #9a9a9a; }
.worries .h1 { grid-area: 2 / 1; font-size: 32px; margin-block-start: 10px; --o: clamp(0, calc(var(--p, 0) / 0.08 + 0.15), 1); opacity: var(--o); filter: blur(calc((1 - var(--o)) * 8px)); }
.worries .split { isolation: isolate; }
.worries .illo { position: absolute; inset: 0; z-index: -1; opacity: calc(0.42 + var(--p, 0) * 0.2); }
.worries .illo .pic { block-size: 100%; aspect-ratio: auto; border-radius: 0; background: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); }
.worries .illo img { scale: calc(1.05 + var(--p, 0) * 0.2); filter: grayscale(.6) brightness(.8); }   /* the worried owner, slowly closing in */
.worries .chips { grid-area: 3 / 1; display: grid !important; place-items: center; margin: 0 !important; }
.worries .chip { grid-area: 1 / 1; display: block; max-inline-size: 15em; justify-self: center !important; border: 0; background: none; padding: 0 !important; border-radius: 0;
  font: 900 22px/1.55 "Noto Sans JP", var(--f-display) !important; color: var(--white); text-align: center; white-space: normal;
  --t: calc(var(--p, 0) - 0.14 - var(--k) * 0.2);
  --in: clamp(0, calc(var(--t) / 0.05), 1); --out: clamp(0, calc((var(--t) - 0.16) / 0.05), 1);
  opacity: calc(var(--in) - var(--out)); filter: blur(calc((1 - var(--in) + var(--out)) * 10px));
  translate: 0 calc((1 - var(--in)) * 40px - var(--out) * 70px); scale: calc(0.92 + var(--in) * 0.08 - var(--out) * 0.12); }
.worries .chip::before { content: "「"; } .worries .chip::after { content: "」"; }
.worries .chip:nth-child(1) { --k: 0; } .worries .chip:nth-child(2) { --k: 1; } .worries .chip:nth-child(3) { --k: 2; }
.worries .chip:nth-child(4) { --k: 3; --out: 0; }   /* the last worry stays */

/* カミカゼにおまかせください — pinned on black: the KAMIKAZE brush mark is painted on stroke by stroke, 「に」 lands,
   the white band sweeps under おまかせください, then a white light opens straight into the (light) support section */
.omk-film { block-size: 240svh; padding: 0; position: relative; overflow: clip; }
.omk-film .sp-only { position: sticky; inset-block-start: 0; block-size: 100svh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 6px 12px; margin: 0; padding-inline: var(--gutter); }
.omk-film img { block-size: 72px; inline-size: auto; filter: invert(1); --w: clamp(0, calc((var(--p, 0) - 0.04) / 0.26), 1);
  clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0); translate: 0 .12em; }
.omk-film .ni { font-size: 30px; --o: clamp(0, calc((var(--p, 0) - 0.32) / 0.06), 1); opacity: var(--o); scale: calc(1.6 - var(--o) * 0.6); }
.omk-film .mark { flex-basis: auto; font-size: 30px; padding: 2px 10px; --w: clamp(0, calc((var(--p, 0) - 0.42) / 0.14), 1); opacity: clamp(0, calc((var(--p, 0) - 0.36) / 0.06), 1);
  background: linear-gradient(var(--white), var(--white)) no-repeat 0 0 / calc(var(--w) * 100%) 100%; color: color-mix(in srgb, var(--ink) calc(var(--w) * 100%), var(--white)); }
.omk-film::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 100svh; background: var(--gray-50); pointer-events: none;
  --l: clamp(0, calc((var(--p, 0) - 0.78) / 0.2), 1);
  -webkit-mask-image: radial-gradient(circle calc(var(--l) * 120vmax + 1px) at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(circle calc(var(--l) * 120vmax + 1px) at 50% 50%, #000 70%, transparent 100%); }

/* 高く売るためのサポート — pinned deck in depth: each step tips up out of the floor (3D), the one before sinks back,
   a huge outline number marks the step, a 3-part rail fills */
.sell-deck { block-size: 320svh; padding: 0; }
.sell-deck .wrap { position: sticky; inset-block-start: 101px; block-size: calc(100svh - 101px); display: flex; flex-direction: column; padding-block: 18px 40px;
  --s: calc(clamp(0, calc((var(--p, 0) - 0.3) / 0.1), 1) + clamp(0, calc((var(--p, 0) - 0.6) / 0.1), 1)); }
.sell-deck .section-head { margin-block-end: 10px; position: relative; z-index: 2; }
.sell-deck .section-head .h1 { font-size: 28px; }
.sell-deck .section-head .lead { font-size: 14px; }
.sell-deck .grid { position: relative; flex: 1; display: block; min-block-size: 0; perspective: 900px; }
.sell-deck .illo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; transform-origin: 50% 100%; transition: none; transform: none;
  --d: calc(var(--s) - var(--i)); --enter: clamp(0, calc(var(--d) + 1), 1); --past: clamp(0, var(--d), 1);
  opacity: calc(min(var(--enter) * 3, 1) - var(--past));
  translate: 0 calc((1 - var(--enter)) * 50% - var(--past) * 8%);
  rotate: x calc((1 - var(--enter)) * 55deg - var(--past) * 18deg); scale: calc(1 - var(--past) * 0.12); filter: blur(calc(var(--past) * 6px)); }
.sell-deck .illo:nth-child(1) { --i: 0; --enter: clamp(0, calc((var(--p, 0) - 0.04) / 0.12), 1); }
.sell-deck .illo:nth-child(2) { --i: 1; } .sell-deck .illo:nth-child(3) { --i: 2; }
.sell-deck .illo .pic { flex: 1 1 auto; min-block-size: 0; aspect-ratio: 1; inline-size: auto; max-inline-size: 100%; box-shadow: 0 30px 60px rgba(0,0,0,.14); }
.sell-deck .illo .no { position: absolute; inset-block-start: -18px; inset-inline-start: -4px; z-index: -1; font: 900 120px/1 var(--f-display); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--gray-300); }
.sell-deck .illo h3 { font-size: 17px; text-align: center; padding-inline: 52px; }   /* clear the WhatsApp float */
.sell-deck .wrap::after { content: ""; position: absolute; inset-inline: var(--gutter); inset-block-end: 22px; block-size: 3px; border-radius: 2px;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / calc((var(--s) + 1) / 3 * 100%) 100%, var(--gray-200); }

/* カミカゼの3つの強み — pinned on black: one strength at a time slides across full-width; the picture drifts slower
   than its card (parallax), the counter reads 01 / 03 */
.strengths { block-size: 320svh; padding: 0; background: var(--ink); color: var(--white); }
.strengths .wrap { position: sticky; inset-block-start: 101px; block-size: calc(100svh - 101px); display: flex; flex-direction: column; padding-block: 24px 20px; overflow: hidden;
  --s: calc(clamp(0, calc((var(--p, 0) - 0.3) / 0.12), 1) + clamp(0, calc((var(--p, 0) - 0.62) / 0.12), 1)); }
.strengths .section-head { margin-block-end: 14px; }
.strengths .section-head .h1 { font-size: 28px; } .strengths .section-head .lead { font-size: 14px; color: #a8a8a8; }
.strengths .eyebrow { color: #9a9a9a; }
.strengths .grid { position: relative; flex: 1; display: block; min-block-size: 0; }
.strengths .illo { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; transition: none; transform: none; opacity: 1;
  --d: calc(var(--s) - var(--i)); translate: calc(var(--d) * -110%) 0; }
.strengths .illo:nth-child(1) { --i: 0; } .strengths .illo:nth-child(2) { --i: 1; } .strengths .illo:nth-child(3) { --i: 2; }
.strengths .illo .pic { flex: 1 1 auto; min-block-size: 0; aspect-ratio: auto; border-radius: var(--r-lg); }
.strengths .illo .pic img { translate: calc(var(--d) * 14%) 0; scale: 1.3; }   /* parallax: the photo drifts slower than its card */
.strengths .illo h3 { font-size: 20px; line-height: 1.45; color: var(--white); word-break: auto-phrase; text-wrap: balance; }
.strengths .illo h3::before { content: "0" counter(st) " / 03"; counter-increment: st; display: block; font: 800 12px/1 var(--f-display); letter-spacing: .2em; color: #8f8f8f; margin-block-end: 10px; }
.strengths .grid { counter-reset: st; }
.strengths .wrap > .reveal:last-child { margin-block-start: 16px !important; transition: none; transform: none; opacity: 1; }
.strengths .wrap > .reveal:last-child .btn.ghost { color: var(--white); border-color: rgba(255,255,255,.4); }
.strengths .wrap > .reveal:last-child .btn:not(.ghost) { background: var(--white); color: var(--ink); border-color: var(--white); }
.m-rise.reveal { transition: none; transform: none; }
/* photos inside flexible .pic boxes: pin the img to the box, so Safari never leaves a pale band above/below it */
.sell-deck .pic, .strengths .pic { position: relative; }
.worries .illo .pic { position: absolute; inset: 0; }   /* the backdrop box fills the stage itself (its img is absolute, so it has no height of its own) */
.worries .pic img, .sell-deck .pic img, .strengths .pic img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .worries, .sell-deck, .strengths, .omk-film { block-size: auto; padding-block: 64px; } .worries .split, .sell-deck .wrap, .strengths .wrap, .omk-film .sp-only { position: static; block-size: auto; }
  .worries *, .sell-deck .illo, .strengths .illo, .omk-film * { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; clip-path: none !important; }
  .worries .chips { display: grid !important; gap: 12px; } .worries .chip { grid-area: auto; } .omk-film::after { display: none; }
  .sell-deck .grid, .strengths .grid { display: grid; gap: 24px; } .sell-deck .illo, .strengths .illo { position: static; }
}

/* ---------- 11. Cars / repair (phone) ---------- */
/* hero: the LC300 on the lift as a top picture, copy below (same frame as buy / sell) */
.lp-hero .bg[src*="repair2-hero"] { inset-block: 60px auto; block-size: 470px; object-position: 78% 50%; }
.lp-hero:has(.bg[src*="repair2-hero"]) .pin { block-size: auto; min-block-size: 100svh; }
.lp-hero:has(.bg[src*="repair2-hero"]) .pin::after { background: linear-gradient(180deg, rgba(10,10,10,.1) 0, rgba(10,10,10,.1) 330px, rgba(10,10,10,.85) 450px, var(--ink) 530px); }
.lp-hero:has(.bg[src*="repair2-hero"]) .wrap { justify-content: flex-start; padding-block: 400px 28px; }
.lp-hero:has(.bg[src*="repair2-hero"]) .h-hero { font-size: 32px; }

/* こんな経験 — pinned: the first scene (調子が悪い…) holds, then the garage scene wipes up over it; captions type in.
   The photos are landscape: shown whole at full width (never cropped to portrait), caption underneath */
.exp { block-size: 280svh; position: relative; background: var(--ink); }
.exp figure { position: sticky; inset-block-start: 101px; block-size: calc(100svh - 101px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 22px; background: var(--ink); }
.exp figure + figure { margin-block-start: calc(-100svh + 101px); clip-path: inset(calc((1 - var(--w2)) * 100%) 0 0 0); --w2: clamp(0, calc((var(--p, 0) - 0.42) / 0.16), 1); }
.exp figure img { inline-size: 100%; block-size: auto; max-block-size: 62%; object-fit: contain; scale: calc(1.06 - var(--p, 0) * 0.06); }
.exp figcaption { position: static; padding: 0 var(--gutter); font-size: 22px; background: none; text-align: center;
  opacity: var(--c); filter: blur(calc((1 - var(--c)) * 8px)); translate: 0 calc((1 - var(--c)) * 20px); }
.exp figure:first-child figcaption { --c: clamp(0, calc((var(--p, 0) - 0.04) / 0.1), 1); }
.exp figure + figure figcaption { --c: clamp(0, calc((var(--p, 0) - 0.6) / 0.1), 1); }

/* こんなに高いの！？ — pinned: the first line slams in big, the warning follows, then both blow out */
.shock { block-size: 200svh; padding: 0; overflow: clip; }
.shock p { position: sticky; inset-block-start: 0; block-size: 100svh; display: grid; place-content: center; padding-inline: var(--gutter);
  --out: clamp(0, calc((var(--p, 0) - 0.85) / 0.15), 1); opacity: calc(1 - var(--out)); scale: calc(1 + var(--out) * 0.3); }
.shock br { display: none; }
.shock .l1 { display: block; font-size: 34px; white-space: nowrap; --o: clamp(0, calc(var(--p, 0) / 0.1 + 0.35), 1); opacity: var(--o); scale: calc(2.2 - var(--o) * 1.2); filter: blur(calc((1 - var(--o)) * 12px)); }
.shock .l2 { display: block; font-size: 21px; margin-block-start: 18px; color: #d9d9d9; --o: clamp(0, calc((var(--p, 0) - 0.3) / 0.12), 1); opacity: var(--o); translate: 0 calc((1 - var(--o)) * 24px); letter-spacing: calc((1 - var(--o)) * 0.3em); }

/* 払う前に知っておいて — each point plays as it passes: label slides, title rises, picture sharpens out of a blur, list items stagger */
.section-head:has(+ .know) .h1 { font-size: 29px; }   /* 払う前に、/ これだけは知っておいて */
.know .pt { --o: clamp(0, calc((var(--v, 0) - 0.04) / 0.16), 1); transition: none; transform: none; opacity: 1; }
.know .pt .k { opacity: var(--o); translate: calc((1 - var(--o)) * -40px) 0; }
.know .pt h3 { --h: clamp(0, calc((var(--v, 0) - 0.08) / 0.16), 1); opacity: var(--h); translate: 0 calc((1 - var(--h)) * 30px); font-size: 21px; }
.know .pt img { --i: clamp(0, calc((var(--v, 0) - 0.12) / 0.2), 1); opacity: var(--i); scale: calc(1.12 - var(--i) * 0.12); filter: blur(calc((1 - var(--i)) * 10px)); border-radius: var(--r-md); }
.know .pt .lead { --l: clamp(0, calc((var(--v, 0) - 0.2) / 0.14), 1); opacity: var(--l); }
.know .pt li { --li: clamp(0, calc((var(--v, 0) - 0.16 - var(--n) * 0.035) / 0.06), 1); opacity: var(--li); translate: calc((1 - var(--li)) * 30px) 0; }
.know .pt li:nth-child(1) { --n: 0; } .know .pt li:nth-child(2) { --n: 1; } .know .pt li:nth-child(3) { --n: 2; } .know .pt li:nth-child(4) { --n: 3; } .know .pt li:nth-child(5) { --n: 4; }

/* 安心してください。KAMIKAZEが解決します。 — pinned on black: two lines resolve, then a white light opens into "How" */
.relief { block-size: 330svh; padding: 0; position: relative; overflow: clip; }
.relief p { position: sticky; inset-block-start: 0; block-size: 100svh; display: grid; place-content: center; }
.relief br { display: none; }
.relief .l1, .relief .l2 { display: block; }
.relief .l1 { font-size: 26px; color: #cfcfcf; --o: clamp(0, calc(var(--p, 0) / 0.12 + 0.4), 1); }
.relief .l2 { font-size: 27px; white-space: nowrap; margin-block-start: 10px; --o: clamp(0, calc((var(--p, 0) - 0.14) / 0.12), 1); }
.relief .l1, .relief .l2 { opacity: var(--o); filter: blur(calc((1 - var(--o)) * 10px)); translate: 0 calc((1 - var(--o)) * 0.4em); }
.relief::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 100svh; background: var(--white); pointer-events: none;
  --l: clamp(0, calc((var(--p, 0) - 0.76) / 0.2), 1);
  -webkit-mask-image: radial-gradient(circle calc(var(--l) * 120vmax + 1px) at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(circle calc(var(--l) * 120vmax + 1px) at 50% 50%, #000 70%, transparent 100%); }

/* どうやって？ — pinned deck in depth (same language as the sell page): 其の一 → 其の二 → 其の三 */
.how-film { block-size: 480svh; padding: 0; }   /* long holds on each step */
.how-film .wrap { position: sticky; inset-block-start: 101px; block-size: calc(100svh - 101px); display: flex; flex-direction: column; padding-block: 18px 40px;
  --s: calc(clamp(0, calc((var(--p, 0) - 0.3) / 0.1), 1) + clamp(0, calc((var(--p, 0) - 0.6) / 0.1), 1)); }
.how-film .section-head { margin-block-end: 10px; }
.how-film .how { position: relative; flex: 1; display: block; min-block-size: 0; perspective: 900px; max-inline-size: none; margin: 0; inline-size: 100%; }
.how-film .row { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; text-align: center; transform-origin: 50% 100%; transition: none; transform: none; background: var(--white);
  --d: calc(var(--s) - var(--i)); --enter: clamp(0, calc(var(--d) + 1), 1); --past: clamp(0, var(--d), 1);
  opacity: calc(min(var(--enter) * 3, 1) - var(--past)); translate: 0 calc((1 - var(--enter)) * 50% - var(--past) * 8%);
  rotate: x calc((1 - var(--enter)) * 55deg - var(--past) * 18deg); scale: calc(1 - var(--past) * 0.12); filter: blur(calc(var(--past) * 6px)); }
.how-film .row:nth-child(1) { --i: 0; --enter: clamp(0, calc((var(--p, 0) - 0.04) / 0.12), 1); } .how-film .row:nth-child(2) { --i: 1; } .how-film .row:nth-child(3) { --i: 2; }
.how-film .row img { flex: 1 1 auto; min-block-size: 0; object-fit: cover; box-shadow: 0 30px 60px rgba(0,0,0,.14); }
.how-film .row h3 { font-size: 22px; } .how-film .row p { font-size: 14px; line-height: 1.7; padding-inline: 8px 52px; }
.how-film .wrap::after { content: ""; position: absolute; inset-inline: var(--gutter); inset-block-end: 22px; block-size: 3px; border-radius: 2px;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / calc((var(--s) + 1) / 3 * 100%) 100%, var(--gray-200); }

/* なぜKAMIKAZE？ uses the black side-slider of section 10 (.strengths); its long captions get a smaller size */
.why.strengths .illo h3 { font-size: 17px; padding-inline-end: 56px; }   /* clear the WhatsApp float */

@media (prefers-reduced-motion: reduce) {
  .exp, .shock, .relief, .how-film { block-size: auto; padding-block: 48px; }
  .exp figure, .shock p, .relief p, .how-film .wrap { position: static; block-size: auto; } .exp figure + figure { margin: 0; clip-path: none; }
  .exp *, .shock *, .relief *, .know *, .how-film .row { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; }
  .relief::after { display: none; } .how-film .how { display: grid; gap: 32px; } .how-film .row { position: static; }
}

/* ---------- 12. Auction (/en/auction, phone) ---------- */
/* hero — pinned: the auction yard slowly closes in, the headline is on stage from the first frame,
   then the three facts slide in from the right one after another */
.au-hero { block-size: 165svh; overflow: clip; }
.au-hero .bg { position: sticky; inset: auto; inset-block-start: 0; block-size: 100svh; margin-block-end: -100svh; object-position: 30% 50%; scale: calc(1.05 + var(--p, 0) * 0.2); }
.au-hero::after { content: none !important; }   /* the section is 165svh tall: a gradient on it stretched and left the copy on a bright photo */
.au-hero .wrap { position: sticky; inset-block-start: 0; block-size: 100svh; min-block-size: 0; justify-content: flex-end; padding-block: 96px 28px; inline-size: 100%;
  background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.72) 30%, rgba(10,10,10,.9) 55%, rgba(10,10,10,.96) 100%); }   /* the shade travels with the pinned copy */
.au-hero .eyebrow { color: #e8e8e8; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.au-hero .lead { color: #e6e6e6; }
.au-hero .reveal { transition: none; transform: none; opacity: 1; }
.au-hero .h-hero { font-size: 38px; }
:lang(ja) .au-hero .h-hero { font-size: 27px; line-height: 1.35; }   /* 日本のオークションの車を、/ ドバイまで。 */
.au-hero .lead { font-size: 15px; translate: 0 calc(var(--p, 0) * -20px); }
.au-hero .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-inline-end: 0; }
.au-hero .actions .btn { padding-inline: 10px; font-size: 14px; }
.au-hero .facts { grid-template-columns: 1fr; gap: 8px; margin-block-start: 18px; border: 0; }
.au-hero .facts > div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  --o: clamp(0, calc((var(--p, 0) - 0.08 - var(--k) * 0.1) / 0.12), 1); opacity: var(--o); translate: calc((1 - var(--o)) * 110%) 0; }
.au-hero .facts > div:nth-child(1) { --k: 0; } .au-hero .facts > div:nth-child(2) { --k: 1; } .au-hero .facts > div:nth-child(3) { --k: 2; }
.au-hero .facts b { font-size: 17px; }

/* recent deals — pinned slider: one deal at a time slides across, the photo drifts slower (parallax) and zooms,
   the price counts up as each car arrives, a 3-dot rail tracks position */
.deals-film { block-size: 330svh; padding: 0 !important; }
.deals-film .wrap { position: sticky; inset-block-start: 60px; block-size: calc(100svh - 60px); display: flex; flex-direction: column; padding-block: 20px 26px; overflow: hidden;
  --s: calc(clamp(0, calc((var(--p, 0) - 0.28) / 0.1), 1) + clamp(0, calc((var(--p, 0) - 0.6) / 0.1), 1)); }
.deals-film .section-head { margin-block-end: 14px; } .deals-film .section-head .h1 { font-size: 28px; }
.deals-film .deal { position: absolute; inset: 0; display: flex; flex-direction: column; margin: 0 !important; transition: none; transform: none; opacity: 1;
  --d: calc(var(--s) - var(--i)); translate: calc(var(--d) * -112%) 0; rotate: calc(var(--d) * -4deg); scale: calc(1 - min(var(--d) * var(--d), 1) * 0.08); }
.deals-film .deal:first-of-type { position: absolute; }
.deals-film .stage { position: relative; flex: 1; min-block-size: 0; }
.deals-film .deal .ph { flex: 0 1 auto; aspect-ratio: 16 / 9; min-block-size: 120px; }
.deals-film .deal .ph img { translate: calc(var(--d) * 30%) 0; scale: 1.25; }
.deals-film .deal .b { flex: 1; padding: 16px 18px; min-block-size: 0; }
.deals-film .deal h3 { font-size: 24px; margin-block: 6px 10px; }
.deals-film .deal .spec { font-size: 12px; grid-template-columns: max-content 1fr max-content 1fr; gap: 0 10px; }   /* specs in two columns: the price must fit on a short Safari screen */ .deals-film .deal .spec dt, .deals-film .deal .spec dd { padding-block: 6px; }
.deals-film .deal .price { padding-block-start: 10px; } .deals-film .deal .price b { font-size: 30px; }
.deals-film .wrap::after { content: ""; position: absolute; inset-inline: calc(50% - 30px); inset-block-end: 10px; block-size: 4px; border-radius: 2px;
  background: linear-gradient(var(--white), var(--white)) no-repeat calc(var(--s) / 2 * 100%) 0 / 20px 100%, rgba(255,255,255,.2); }

/* how it works — the timeline draws itself down the page, each step lights up as the line reaches it */
.au-steps { position: relative; }
.au-steps::before { content: ""; position: absolute; inset-inline-start: 6px; inset-block: 8px 30px; inline-size: 2px; background: var(--ink); transform-origin: 50% 0;
  scale: 1 clamp(0, calc((var(--v, 0) - 0.12) / 0.4), 1); z-index: 1; }
.au-steps .step { --o: clamp(0, calc((var(--v, 0) - 0.1 - var(--k) * 0.1) / 0.1), 1); opacity: calc(0.25 + var(--o) * 0.75); translate: calc((1 - var(--o)) * 24px) 0; transition: none; transform: none; }
.au-steps .step .dot { scale: calc(0.4 + var(--o) * 0.6); }
.au-steps .step:nth-child(1) { --k: 0; } .au-steps .step:nth-child(2) { --k: 1; } .au-steps .step:nth-child(3) { --k: 2; } .au-steps .step:nth-child(4) { --k: 3; }

/* payment plan — the 30 / 70 split grows into place and both numbers count */
.au-plan { --o: clamp(0, calc((var(--v, 0) - 0.06) / 0.2), 1); transition: none; }
.au-plan .a { opacity: var(--o); translate: calc((1 - var(--o)) * -100%) 0; }
.au-plan .b { --o2: clamp(0, calc((var(--v, 0) - 0.18) / 0.2), 1); opacity: var(--o2); translate: calc((1 - var(--o2)) * 60%) 0; }
.auctions-img.m-pop { transition: none; }
.person.m-side img { scale: calc(1.1 - var(--o, 1) * 0.1); }

@media (prefers-reduced-motion: reduce) {
  .au-hero, .deals-film { block-size: auto; } .au-hero .bg { position: absolute; inset: 0; block-size: 100%; margin: 0; scale: none; } .au-hero .wrap, .deals-film .wrap { position: relative; block-size: auto; inset: auto; }
  .au-hero .facts > div, .deals-film .deal, .au-steps .step { opacity: 1; translate: none; rotate: none; scale: none; }
  .deals-film .deal { position: relative; inset: auto; margin-block-start: 16px !important; } .au-steps::before { display: none; } .au-plan .a, .au-plan .b { opacity: 1; translate: none; }
}

#price .fee > .reveal { transition: none; }   /* scroll-linked: no lag from the reveal fade */
@media (prefers-reduced-motion: reduce) {
  .cospa, #price { block-size: auto; } .cospa p, #price .fee { position: static; block-size: auto; padding-block: 64px; }
  .cospa p, .cospa .l1, .cospa .l2, .cospa .l3, .cospa .l3 span, #price .fee > *, #price .calc > span { opacity: 1; translate: none; scale: none; filter: none; }
}