/* 過江龍的士搭電救車 — cinematic scroll site */
:root{
  --canvas:#0C1120;
  --panel:#141B30;
  --panel-2:#182038;
  --accent:#FFA94C;
  --accent-hover:#FFC078;
  --accent-muted:rgba(255,169,76,.22);
  --current:#A5E6FF;
  --clamp-red:#E5443F;
  --text-primary:#F5F1E6;
  --text-secondary:#A9B4C9;
  --line:rgba(165,230,255,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --font-display:'ZCOOL QingKe HuangYou','Noto Sans TC',sans-serif;
  --font-body:'Noto Sans TC',sans-serif;
  --font-mono:'Space Mono',monospace;
  --font-latin:'Syncopate',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth}
body{overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(165,230,255,.05), transparent 60%),
    radial-gradient(1000px 800px at 15% 110%, rgba(255,169,76,.05), transparent 60%),
    radial-gradient(600px 400px at 90% 70%, rgba(229,68,63,.03), transparent 60%);
  animation:bgdrift 90s var(--ease-soft) infinite alternate}
@keyframes bgdrift{from{transform:translate3d(0,0,0);opacity:.8}to{transform:translate3d(0,-40px,0);opacity:1}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

img,svg,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--accent);color:#0C1120;padding:.6rem 1rem;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2rem);background:linear-gradient(180deg,rgba(12,17,32,.9),rgba(12,17,32,.55) 70%,transparent);backdrop-filter:blur(8px)}
.nav-brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--font-display);font-size:1.05rem;letter-spacing:.02em}
.brand-mark{width:30px;height:30px}
.nav-call{text-decoration:none;font-family:var(--font-mono);font-weight:700;font-size:.85rem;padding:.5rem .8rem;transition:background .25s,color .25s}
.nav-call:hover{background:rgba(255,169,76,.9);color:#0C1120}

/* chips */
.chip{background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85);padding:.3rem .6rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;white-space:nowrap}

/* ===== hero ===== */
.hero{position:relative;height:500vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}
.poster{position:absolute;inset:0;background-size:cover;background-position:center}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-out);transform:translateZ(0);will-change:transform}
.stage.video-ready #hero{opacity:1}
.ring{position:absolute;top:50%;left:50%;width:64px;height:64px;transform:translate(-50%,-50%);color:var(--accent);opacity:0;pointer-events:none}
.stage.loading .ring{opacity:1}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.ring circle{transition:stroke-dashoffset .12s linear}

.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

/* captions + bands */
.captions{position:absolute;inset:0;z-index:3;pointer-events:none}
.band{position:absolute;padding:1rem;opacity:0;text-shadow:var(--tshadow)}
.band .btn{text-shadow:none}
.band-kicker{display:inline-block;margin-bottom:.7rem}
.bhead{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,5.2vw,4rem);line-height:1.12;color:var(--text-primary)}
.bsub{font-size:clamp(.95rem,1.6vw,1.25rem);color:var(--text-primary);margin-top:.6rem;font-weight:500}
.band .btn{margin-top:1.1rem}

.band-1{top:15%;left:8%;right:8%;text-align:center}
.band-2{top:40%;left:6%;max-width:34vw}
.band-3{top:18%;left:50%;transform:translateX(-50%);text-align:center}
.band-3 .bhead{font-size:clamp(2.6rem,8vw,6.2rem);white-space:nowrap}
.band-4{top:42%;right:6%;max-width:34vw;text-align:right}
.band-5{top:22%;left:50%;transform:translateX(-50%);text-align:center}

/* per-band scrims removed: the ::before z-index:-1 approach could paint over the
   text on some Android layouts. Legibility now comes from the global .scrim plus
   the bands' text-shadow. */

/* split text spans — per-char entrance, chars armed by JS inline styles */
.bhead .c{display:inline-block;white-space:pre}
.band .bhead,.band .bsub{display:block}

/* entrances — driven entirely in JS (inline styles on each char) for maximum
   browser compatibility. Reduced-motion CSS below forces chars visible. */
/* (a)-(e): per-char rise/weave/punch/grid/settle are computed in app.js applyChars(). */

/* HUD */
.hud{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:3;pointer-events:none}
.hud-chip{font-family:var(--font-mono);font-weight:700}
.scroll-cue{position:absolute;bottom:1.4rem;right:clamp(1rem,4vw,2rem);z-index:3;display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.8rem;pointer-events:none;animation:cue 2.4s var(--ease-soft) infinite}
.scroll-cue svg{width:20px;height:20px}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(6px);opacity:.4}}

/* static hero (designed layout shown under the five gates) */
.static-hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;padding:0 1.5rem;z-index:4;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out)}
.s-head{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,8vw,3.4rem);line-height:1.15;text-shadow:var(--tshadow)}
.s-sub{font-size:clamp(1rem,3vw,1.3rem);color:var(--text-primary);text-shadow:var(--tshadow)}
.static-hero .btn{pointer-events:auto}

/* ===== THE STATIC-HERO GATES (CSS must match JS exactly) =====
   Portrait phones now get the cover-cropped mobile scrub (video 7.3MB < 8MB,
   subject survives the 9:16 crop). Static hero stays only for landscape
   phones (no room for the journey) and reduced-motion visitors. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){.stage .captions,.stage .hud,.stage .scroll-cue{display:none}.stage video,.stage .ring,.stage .scrim{display:none}.static-hero{opacity:1;background:url('hero-poster.jpg') center/cover no-repeat}}
@media (prefers-reduced-motion:reduce){.stage .captions,.stage .hud,.stage .scroll-cue{display:none}.stage video,.stage .ring,.stage .scrim{display:none}.static-hero{opacity:1;background:url('hero-poster.jpg') center/cover no-repeat}}
@media (max-height:560px){.stage .hud,.stage .scroll-cue{display:none}}
/* JS failure safety net: never ship a wordless hero (static-hero is a sibling of .stage) */
.stage.js-failed .captions,.stage.js-failed .hud,.stage.js-failed .scroll-cue{display:none}
.stage.js-failed video,.stage.js-failed .ring,.stage.js-failed .scrim{display:none}
.stage.js-failed ~ .static-hero{opacity:1;background:url('hero-poster.jpg') center/cover no-repeat}

/* mobile portrait caption layout (scrub is live here).
   NOTE: bands deliberately use the DESKTOP positions here — the custom mobile
   band overrides caused text to vanish on some Android Chrome layouts. Only
   font sizes and HUD tweaks are overridden. Sizes tuned so captions stay
   proportional on a phone and don't bury the vehicle scene. */
@media (max-width:720px){
  .bhead{font-size:clamp(2.6rem,21vw,5.4rem);line-height:1.18}
  /* long headlines (band 2 & 4) get a smaller size so they stay inside the
     hood area (hood top → headlight top) instead of overflowing the screen */
  .band-2 .bhead,.band-4 .bhead{font-size:clamp(1.5rem,8.5vw,2.5rem)}
  .band-2 .band-kicker,.band-4 .band-kicker{font-size:1.5rem}
  .band-3 .bhead{font-size:clamp(2.4rem,22vw,4.6rem);white-space:normal}
  .band-5{top:8%}
  .band-5 .bhead{font-size:clamp(2.2rem,19vw,5rem);white-space:normal;line-height:1.02}
  .band-5 .btn{white-space:nowrap}
  .band-5 .bsub{font-size:1.3rem;margin-top:.6rem;line-height:1.2}
  .band-5 .btn{margin-top:1.1rem}
  .bsub{font-size:1.35rem}
  .band-kicker{font-size:1rem}
  .hud{bottom:.6rem}
  .hud-chip{font-size:clamp(1.1rem,4.5vw,1.7rem);padding:.45rem .7rem}
  .scroll-cue{display:none}
}

/* complete without video */
.stage.video-failed .poster{display:block}
.stage.video-failed .scroll-cue svg{animation:none}

/* ===== buttons ===== */
.btn{display:inline-block;background:var(--accent);color:#1A1206;font-family:var(--font-mono);font-weight:700;font-size:.95rem;letter-spacing:.04em;padding:.85rem 1.6rem;border-radius:12px;text-decoration:none;transition:background .25s,transform .25s;box-shadow:0 6px 24px rgba(255,169,76,.28)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--text-primary);border:1.5px solid var(--accent-muted);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);background:rgba(255,169,76,.1)}
.btn.big{font-size:clamp(1.2rem,3vw,1.7rem);padding:1.1rem 2.4rem;border-radius:16px}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ===== sections ===== */
.section{position:relative;z-index:1;padding:clamp(4.5rem,10vw,7.5rem) 0}
.kicker{font-family:var(--font-mono);color:var(--accent);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem}
.h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,4.5vw,2.9rem);line-height:1.16;max-width:22ch;margin-bottom:1.2rem}
.lede{color:var(--text-secondary);font-size:clamp(1rem,2vw,1.15rem);max-width:44rem;margin-bottom:2.5rem}
.fine{color:var(--text-secondary);font-size:.85rem;margin-top:1.5rem;text-align:center}
h2.ch-m{max-width:22ch}
p.ch{max-width:44rem}

/* entrance choreography (whisper) */
.sec-enter{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.sec-enter.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0ms}
.stagger.in>*:nth-child(2){transition-delay:80ms}
.stagger.in>*:nth-child(3){transition-delay:160ms}
.stagger.in>*:nth-child(4){transition-delay:240ms}
.stagger.in>*:nth-child(5){transition-delay:320ms}
.stagger.in>*:nth-child(6){transition-delay:400ms}
/* retire the stagger delays so hovers are never laggy (must beat nth-child specificity) */
.stagger.done>*{transition-delay:0s !important}

/* one living element per section (whisper spark, gated on visible) */
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.section::after{content:"";position:absolute;top:2.2rem;right:clamp(1rem,4vw,3rem);width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);opacity:.4;animation:pulse 4.5s var(--ease-soft) infinite;animation-delay:-1.2s;animation-play-state:paused;pointer-events:none}
.section.on::after{animation-play-state:running}
.live{animation:pulse 4.5s var(--ease-soft) infinite;animation-delay:-1.2s}

/* problem */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.6rem;position:relative;overflow:hidden}
.tile::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-muted),transparent)}
.tile-num{font-family:var(--font-mono);color:var(--accent);font-size:.8rem;display:block;margin-bottom:.5rem}
.tile-ic{display:block;width:26px;height:26px;color:var(--accent);margin-bottom:.6rem}
.tile-ic svg{width:100%;height:100%}
.tile h3{font-family:var(--font-display);font-size:1.25rem;font-weight:400;margin-bottom:.4rem}
.tile p{color:var(--text-secondary);font-size:.95rem}

/* service */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.s-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.4rem;text-align:center}
.s-card svg{width:40px;height:40px;margin:0 auto 1rem;color:var(--accent)}
.s-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:400;margin-bottom:.35rem}
.s-card p{color:var(--text-secondary);font-size:.9rem}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.price-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.8rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;position:relative}
.price-card.hot{border-color:var(--accent-muted);box-shadow:0 0 44px rgba(255,169,76,.12)}
.price-card.hot::before{content:"最受歡迎";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#1A1206;font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:.3rem .7rem;border-radius:999px;white-space:nowrap}
.price-type{font-family:var(--font-display);font-size:1.3rem}
.price-old{color:var(--text-secondary);text-decoration:line-through;font-size:.85rem;opacity:.7}
.price-now{font-family:var(--font-mono);font-size:1rem;color:var(--text-secondary)}
.price-now strong{color:var(--accent);font-size:clamp(2rem,4vw,2.8rem);font-weight:700}
.price-now span{font-size:1rem}
.price-card ul{list-style:none;margin:.6rem 0;display:grid;gap:.45rem}
.price-card li{color:var(--text-secondary);font-size:.92rem;padding-left:1.3rem;position:relative}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.price-card .btn{margin-top:auto;align-self:flex-start}

/* steps */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:3rem}
.step{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative}
.step img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.step h3,.step p{padding:0 1.4rem}
.step h3{font-family:var(--font-display);font-size:1.2rem;font-weight:400;margin:.9rem 0 .3rem}
.step p{color:var(--text-secondary);font-size:.93rem;margin-bottom:1.4rem}
.step-num{position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#1A1206;font-family:var(--font-mono);font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.45)}

/* hold interaction */
.hold-zone{margin:2rem auto 0;max-width:520px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:2.2rem 1.5rem;text-align:center;cursor:pointer;user-select:none;position:relative;transition:border-color .4s,box-shadow .4s,background .4s}
.hold-zone:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hold-cable{width:100%;max-width:340px;margin:0 auto 1rem}
.cable{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.c1{stroke:var(--clamp-red)}
.c2{stroke:#3a4160}
.t1,.t2{stroke-width:3.5}
.spark{fill:var(--current);opacity:0}
.hold-ring{width:76px;height:76px;margin:0 auto 1rem;color:var(--accent);transform:rotate(-90deg)}
.hold-ring circle{transition:stroke-dashoffset .12s linear;filter:drop-shadow(0 0 5px rgba(255,169,76,.85));stroke-width:5}
.hold-zone.active .hold-ring{color:var(--accent-hover)}
.hold-zone.active .hold-ring circle{filter:drop-shadow(0 0 9px rgba(255,169,76,1))}
/* charging animation while the user holds the zone */
.hold-zone.active .hold-cable .c1{animation:cableglow 1.1s ease-in-out infinite}
.hold-zone.active .hold-cable .c2{animation:cableglow 1.1s ease-in-out .25s infinite}
.hold-zone.active .spark{opacity:1;animation:spark .55s linear infinite}
@keyframes cableglow{0%,100%{opacity:.5}50%{opacity:1;stroke-width:3.4}}
.hold-zone.active{box-shadow:0 0 34px rgba(255,169,76,.28)}
.hold-text{color:var(--text-secondary);font-size:.95rem;font-family:var(--font-body)}
.hold-done{display:none;font-family:var(--font-display);font-size:1.5rem;color:var(--accent)}
.hold-zone.firing{border-color:var(--accent);box-shadow:0 0 60px rgba(255,169,76,.3);background:linear-gradient(180deg,#1c2440,#141B30)}
.hold-zone.firing .hold-text{display:none}
.hold-zone.firing .hold-done{display:block;animation:done-pop .5s var(--ease-soft)}
@keyframes done-pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.hold-zone.firing .spark{opacity:1;animation:spark 1.6s var(--ease-soft) infinite}
@keyframes spark{0%,100%{opacity:.2}50%{opacity:1}}

/* guide */
.guide-list{list-style:none;display:grid;gap:.9rem;max-width:720px}
.guide-list li{display:flex;gap:1.1rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem}
.guide-list li>span{flex:0 0 34px;height:34px;border-radius:50%;border:1.5px solid var(--accent-muted);color:var(--accent);font-family:var(--font-mono);font-weight:700;display:flex;align-items:center;justify-content:center}
.guide-list h3{font-family:var(--font-display);font-size:1.05rem;font-weight:400;margin-bottom:.2rem}
.guide-list p{color:var(--text-secondary);font-size:.92rem}
.warning-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.chip.warn{color:var(--text-primary)}

/* faq */
.faq-list{max-width:760px;display:grid;gap:.7rem}
.faq-list details{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq-list summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-family:var(--font-display);font-size:1.05rem;font-weight:400;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"＋";font-family:var(--font-mono);color:var(--accent);transition:transform .3s var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 1.3rem 1.2rem;color:var(--text-secondary);font-size:.95rem}
.faq-list summary:hover{background:rgba(255,169,76,.05)}

/* about */
.about-badges{display:flex;flex-wrap:wrap;gap:.6rem}
.about-badges .chip{border-color:var(--accent-muted);color:var(--text-primary)}
.about-img{margin-top:2.2rem;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.about-img img{width:100%;height:auto;display:block}

/* final cta */
.final-cta{text-align:center}
.final-cta .h2{margin-left:auto;margin-right:auto}
.final-cta .lede{margin-left:auto;margin-right:auto}

/* footer */
.footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:3rem 0 2.5rem;text-align:center;background:rgba(10,14,26,.6)}
.foot-name{font-family:var(--font-display);font-size:1.15rem;margin-bottom:.5rem}
.foot-line{color:var(--text-secondary);font-size:.92rem;margin-bottom:.25rem}
.foot-line a{color:var(--accent);text-decoration:none}
.foot-line a:hover{text-decoration:underline}
.foot-note{color:var(--text-secondary);font-size:.78rem;margin-top:1.2rem;opacity:.7}

/* ===== responsive ===== */
@media (max-width:900px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .three{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .band-2,.band-4{max-width:60vw}
}
/* NOTE: the old ".band{display:none}" rule for phones was REMOVED — it was a
   leftover from the static-hero era and hid every caption on mobile after the
   mobile scrub was enabled. Bands stay visible on all widths now. */
@media (max-height:560px){.hud,.scroll-cue{display:none}}

/* ===== reduced motion: final states, drives stopped ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .sec-enter,.stagger>*{opacity:1 !important;transform:none !important}
  .ent-rise .c,.ent-weave .c,.ent-punch .c,.ent-grid .c,.ent-settle .c{opacity:1 !important;transform:none !important}
  .ent-settle .bsub,.ent-settle .btn{opacity:1 !important;transform:none !important}
  body::before{animation:none}
}

/* ===== mobile below-fold type scale (after all base rules so they win) ===== */
@media (max-width:720px){
  body{font-size:17px}
  .nav-brand{font-size:1.3rem}
  .nav-call{font-size:1rem;padding:.6rem .9rem}
  .h2{font-size:clamp(2rem,10vw,3rem)}
  .lede{font-size:1.25rem}
  .tile h3,.s-card h3,.step h3,.guide-list h3{font-size:1.6rem}
  .tile p,.s-card p,.price-card li,.step p,.guide-list p,.faq-list details p,.foot-line{font-size:1.15rem}
  .price-type{font-size:1.6rem}
  .price-old{font-size:1rem}
  .price-now{font-size:1.9rem}
  .price-card li{padding-left:1.6rem}
  .faq-list summary{font-size:1.3rem}
  .hold-text{font-size:1.15rem}
  .btn{font-size:1.15rem}
  .fine{font-size:1rem}
}