/* ============================================================
   PATAAN — clean hand-built rebuild of the live site (v1)
   Same design, animation and content. No framework, no build.
   ============================================================ */

/* ---------- Fonts (exact files from v1) ---------- */
@font-face{ font-family:"Stack Sans Headline"; src:url("../fonts/StackSansHeadline-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/Inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/Inter-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/Inter-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/Inter-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Layer 2 — Semantic tokens ---------- */
:root{
  --color-black:#000;
  --color-white:#fff;
  --color-zinc-50:#fafafa;
  --color-zinc-100:#f4f4f5;
  --color-zinc-200:#e4e4e7;
  --color-zinc-400:#a1a1aa;
  --color-zinc-450:#8b8b94;
  --color-zinc-500:#71717a;
  --color-zinc-600:#52525b;
  --color-zinc-700:#3f3f46;
  --color-zinc-800:#27272a;
  --color-zinc-900:#18181b;
  --color-amber-500:#f59e0b;

  /* dark is the brand default */
  --color-bg:        var(--color-black);
  --color-surface:   var(--color-zinc-900);
  --color-surface-2: var(--color-zinc-800);
  --color-surface-3: var(--color-zinc-700);
  --color-text:      var(--color-zinc-100);
  --color-muted:     var(--color-zinc-450);
  --color-muted-2:   var(--color-zinc-400);
  --color-faint:     var(--color-zinc-500);
  --color-line:      rgba(255,255,255,0.10);
  --color-line-2:    rgba(255,255,255,0.06);
  --color-btn:       var(--color-zinc-100);
  --color-btn-text:  var(--color-black);
  --color-amber:     var(--color-amber-500);
  --color-pill-bg:   rgba(24,24,27,0.6);
  --color-pill-line: rgba(255,255,255,0.12);
  --bg:              var(--color-bg);
  --surface:         var(--color-surface);
  --surface-2:       var(--color-surface-2);
  --surface-3:       var(--color-surface-3);
  --text:            var(--color-text);
  --muted:           var(--color-muted);
  --line:            var(--color-line);
  --line-2:          var(--color-line-2);

  --head:"Stack Sans Headline", ui-sans-serif, system-ui, sans-serif;
  --body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --col:1120px;
  --pad:clamp(20px,5vw,40px);
  --card-radius:44px;

  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --ease-deep:cubic-bezier(0.76,0,0.24,1);
  color-scheme:dark;
}
html[data-theme="light"]{
  --color-bg:        var(--color-white);
  --color-surface:   var(--color-zinc-100);
  --color-surface-2: var(--color-zinc-50);
  --color-surface-3: var(--color-zinc-200);
  --color-text:      var(--color-zinc-900);
  --color-muted:     var(--color-zinc-500);
  --color-muted-2:   var(--color-zinc-600);
  --color-faint:     var(--color-zinc-500);
  --color-line:      rgba(0,0,0,0.10);
  --color-line-2:    rgba(0,0,0,0.06);
  --color-btn:       var(--color-zinc-900);
  --color-btn-text:  var(--color-white);
  --color-pill-bg:   rgba(255,255,255,0.6);
  --color-pill-line: rgba(0,0,0,0.10);
  color-scheme:light;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
body{
  background:var(--color-bg); color:var(--color-text);
  font-family:var(--body); font-size:16px; line-height:1.5; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:background .4s var(--ease), color .4s var(--ease);
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:calc(var(--col) + 2*var(--pad)); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(64px,9vw,120px); }
/* features track flows straight out of the hero — no top gap before the phone */
#how{ padding-top:0; }
.eyebrow{ font-family:var(--body); font-size:16px; font-weight:500; color:var(--color-muted); margin:0 0 14px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--head); font-weight:500; margin:0; color:var(--color-text); letter-spacing:-0.02em; text-wrap:balance; }
p{ text-wrap:pretty; }
.h1{ font-size:clamp(56px,8vw,116px); font-weight:600; line-height:1.08; }
.h2{ font-size:clamp(30px,4.6vw,48px); font-weight:500; line-height:1.1; }
.h3{ font-size:clamp(44px,5.5vw,52px); font-weight:400; line-height:1.1; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:48px; padding:0 24px; border-radius:100px; font-size:15px; font-weight:600; white-space:nowrap;
  transition:transform .3s var(--ease), opacity .25s, background .25s, border-color .25s; }
.btn:active{ transform:scale(.97); transition-duration:.1s; }
.btn--primary{ background:var(--color-btn); color:var(--color-btn-text); }
.btn--primary:hover{ opacity:.9; transform:translateY(-1px); }
.btn--ghost{ background:var(--color-surface-2); color:var(--color-text); border:1px solid var(--color-line); }
.btn--ghost:hover{ background:var(--color-surface-3); }

/* ---------- Top progressive blur ---------- */
.top-glow{ position:fixed; top:0; left:0; right:0; height:140px; z-index:59; pointer-events:none; }
/* mirror of the bottom blur (.strip-glow), flipped to fade downward from the top edge */
.top-glow::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.85) 0%, transparent 100%); }
html[data-theme="light"] .top-glow::after{ background:radial-gradient(50% 100% at 50% 0%, rgba(255,255,255,0.9) 0%, transparent 100%); }
.top-glow > div{ position:absolute; inset:0; }
/* stacked progressive blur: every layer starts at the top edge, so the whole wordmark
   band is blurred, strongest at the top and easing out below it */
.top-glow > div:nth-child(1){ -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px); -webkit-mask:linear-gradient(to bottom,black 0%,black 55%,transparent 100%); mask:linear-gradient(to bottom,black 0%,black 55%,transparent 100%); }
.top-glow > div:nth-child(2){ -webkit-backdrop-filter:blur(4px);   backdrop-filter:blur(4px);   -webkit-mask:linear-gradient(to bottom,black 0%,black 30%,transparent 85%);  mask:linear-gradient(to bottom,black 0%,black 30%,transparent 85%); }
.top-glow > div:nth-child(3){ -webkit-backdrop-filter:blur(10px);  backdrop-filter:blur(10px);  -webkit-mask:linear-gradient(to bottom,black 0%,black 10%,transparent 65%);  mask:linear-gradient(to bottom,black 0%,black 10%,transparent 65%); }
.top-glow > div:nth-child(n+4){ display:none; }

.top-glow__label{ position:absolute; top:0; left:0; right:0; height:112px; display:flex; align-items:center; justify-content:center;
  font-family:var(--body); font-size:clamp(32px,5vw,64px); font-weight:700; letter-spacing:0.25em;
  color:color-mix(in srgb, var(--color-text) 14%, transparent); pointer-events:none; user-select:none; z-index:1; }
html[data-theme="dark"] .top-glow__label{ color:color-mix(in srgb, var(--color-text) 24%, transparent); }

/* ---------- Reveal (scroll "appear") — transition to a static end-state ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.rv.shown{ opacity:1; transform:none; }
.d1{ transition-delay:.07s; } .d2{ transition-delay:.14s; } .d3{ transition-delay:.21s; } .d4{ transition-delay:.28s; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ---------- Page-load entrance (Apple-style) ---------- */
@keyframes hero-in{
  from{ opacity:0; transform:scale(1.16); }
  to{   opacity:1; transform:scale(1); }
}
@keyframes strip-in{
  from{ opacity:0; transform:translateX(-50%) translateY(16px); }
  to{   opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes glow-fade-in{
  from{ opacity:0; }
  to{   opacity:1; }
}
.hero-enter{ animation:hero-in .9s var(--ease) both; }
.e1{ animation-delay:.14s; }
.strip{ animation:strip-in .7s var(--ease) .52s both; }
.strip-glow{ opacity:1; }
/* fade the label + tint only — an opacity animation on the container itself isolates its
   children, so their backdrop-filter would see nothing and the blur disappears */
.top-glow__label,.top-glow::after{ animation:glow-fade-in .5s ease .1s both; }
@media(prefers-reduced-motion:reduce){
  .hero-enter{ animation:none; opacity:1; transform:none; }
  .strip,.strip-glow,.top-glow__label,.top-glow::after{ animation:none; opacity:1; }
}

/* ---------- HERO ---------- */
/* Hero is just eyebrow + headline now. The phone lives in the feature track
   below and travels down to pin at centre as the headline scrolls away. */
.hero{ position:relative; text-align:center; padding-top:clamp(120px,16vw,180px); padding-bottom:clamp(16px,2.5vw,32px); }
.hero__title{ max-width:16ch; margin:0 auto; }
.hero__title .rot{ color:var(--color-text); }
/* hero shot: iPad on the left, iPhone overlapping its lower-right, both fading into the page at the bottom */
/* the masked box bleeds --bleed past the stage on both sides, so the iPhone's shadow
   fades out fully instead of being sliced off at the stage edge (page clips x-overflow) */
.hero__devices{ --bleed:120px; position:relative; width:calc(100% + 2 * var(--bleed)); margin:clamp(48px,6vw,80px) 0 0 calc(-1 * var(--bleed));
  padding-inline:var(--bleed); overflow:hidden; }
/* stage is exactly the iPad's height; the iPhone is pinned to the iPad's bottom edge,
   so both devices end (and fade) on the same line at every width */
.hero__stage{ position:relative; width:min(1040px,100%); margin-inline:auto; aspect-ratio:1117/702; }
.hero__devices img{ position:absolute; display:block; height:auto; }
/* light: dark screens dissolving into white read as grey haze, so the fade is kept to the last sliver
   and the shadow is a soft contact shadow rather than a dark halo */
html[data-theme="light"] .hero__iphone{ filter:none; }
/* staggered settle: iPad rises first, iPhone follows 0.12s later from a little further,
   so the depth reads in the motion too. Long ease-out, no overshoot (critically damped feel). */
.hero__ipad{ animation:dev-rise-back 1.1s cubic-bezier(0.16,1,0.3,1) .3s both; }
.hero__iphone{ animation:dev-rise-front 1.1s cubic-bezier(0.16,1,0.3,1) .42s both; }
@keyframes dev-rise-back{ from{ opacity:0; transform:translateY(40px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes dev-rise-front{ from{ opacity:0; transform:translateY(72px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .hero__ipad,.hero__iphone{ animation:hero-fade .4s ease both; }
}
@keyframes hero-fade{ from{ opacity:0; } to{ opacity:1; } }
.hero__ipad{ width:82%; left:5%; top:0; }
.hero__iphone{ width:25.2%; left:auto; right:4%; top:auto; bottom:0.4%;   /* whole phone shown; its visible bottom lines up with the iPad's */ }
@media (max-width:767px){
  .hero__stage{ aspect-ratio:1117/753; }
  .hero__ipad{ width:88%; left:0; }
  .hero__iphone{ width:27%; right:0; }   /* whole phone still fits the stage height */
}
.caret{ display:inline-block; width:.06em; min-width:3px; height:1em; background:var(--color-text); margin-left:.04em; transform:translateY(.12em); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Section heading block ---------- */
.sec-head{ max-width:760px; margin-bottom:clamp(36px,5vw,56px); }
.sec-head.center{ margin-inline:auto; text-align:center; max-width:none; }
.sec-head.center .h2{ font-size:clamp(44px,6.5vw,76px); line-height:1.0; }
.sec-head.center .eyebrow{ display:inline-flex; align-items:center; border:1px solid var(--color-line); border-radius:100px; padding:5px 16px; margin-bottom:20px; }

/* ---------- Feature slider (scroll-driven: phone pinned, text rises & pauses) ---------- */
/* Track is 3 zones × 1.8 viewport. Phone stays pinned dead-centre the whole way;
   each text block rises from below, pauses at centre, then scrolls out the top. */
.fslider__track{
  --phone-w:min(320px,28vw);
  --copy-w:clamp(248px,24vw,360px);
  --copy-gap:48px;   /* fixed gap between phone and copy — consistent across all breakpoints */
  --zone-h:calc(1.8 * (100vh - 72px));
  position:relative;
  height:calc(3 * var(--zone-h));   /* 3 copy zones (lead zone is 0 tall) */
  margin-top:0;
}
/* the phone stage pins for the full scroll range */
.fslider__sticky{
  position:sticky; top:72px; height:calc(100vh - 72px);
  display:flex; align-items:center; justify-content:center;
  z-index:1; pointer-events:none;
}
.fslider__phone{
  position:relative;
  width:var(--phone-w);
  aspect-ratio:660/1435;   /* height follows width — shown full, never capped */
  border-radius:0;
  overflow:hidden; pointer-events:auto;
  transform-origin:center top;
  will-change:transform;

}
/* iPad behind the phone: its inner edge tucks behind the phone's centre and it
   extends to the side without copy (--ipad-side: 1 = right, -1 = left). */
.fslider__track{ --ipad-w:min(calc(var(--phone-w) * 1.9), calc(50vw - 32px)); }
/* desktop: iPad up to 2.4x the phone's width, but never past the page edge */
@media (min-width:1025px){ .fslider__track{ --ipad-w:min(calc(var(--phone-w) * 2.4), calc(50vw - 32px)); } }
.fipad{
  position:absolute; top:50%; left:50%;
  width:var(--ipad-w); aspect-ratio:4/3;
  margin-left:calc(var(--ipad-w) / -2); margin-top:calc(var(--phone-w) * 0.987 - var(--ipad-w) * 0.742);   /* bottom edge sits on the phone's bottom edge */
  transform:translateX(calc(var(--ipad-side, 1) * var(--ipad-w) * 0.5));
  transition:transform .7s var(--ease);
  z-index:0; pointer-events:none;
  will-change:transform;
  /* clip at the phone's centre line on the side away from the reveal, so while the iPad is
     tucked behind the phone it never peeks out on the wrong (copy) side */
  clip-path:inset(-30% calc((-1 * var(--ipad-side, 1) - 1) * 15%) -30% calc((var(--ipad-side, 1) - 1) * 15%));
  /* transparent behind the phone; the iPad appears right at the phone's edge with a soft feather */
  -webkit-mask-image:linear-gradient(calc(90deg * var(--ipad-side, 1)), transparent calc(var(--phone-w) * 0.5 - 6px), #000 calc(var(--phone-w) * 0.5 + 36px));
          mask-image:linear-gradient(calc(90deg * var(--ipad-side, 1)), transparent calc(var(--phone-w) * 0.5 - 6px), #000 calc(var(--phone-w) * 0.5 + 36px));
}
/* scroll-driven: hidden behind the phone in the hero, slides out as the phone settles */
.fipad__reveal{ height:100%; will-change:transform, opacity;
  opacity:var(--ipad-in, 1);
  transform:translateX(calc(var(--ipad-side, 1) * (var(--ipad-in, 1) - 1) * 50%)) scale(calc(0.9 + 0.1 * var(--ipad-in, 1)));
}
.fipad__screen{
  position:relative; width:100%; height:100%;
  border-radius:calc(var(--ipad-w) * 0.035); overflow:hidden; background:#000;
  box-shadow:none;
}
html[data-theme="light"] .fipad__screen{ box-shadow:none; }
.fipad__panel{ position:absolute; inset:0; opacity:0; z-index:0; transition:opacity 0s linear .5s; }
.fipad__panel.active{ opacity:1; z-index:1; transition:opacity .5s var(--ease); }
.fipad__panel img{ display:block; width:100%; height:100%; object-fit:cover; }
.fphone-wrap{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ .fipad{ transition:none; } }

@keyframes phone-reveal{
  0%  { opacity:0; transform:translateY(32px); }
  100%{ opacity:1; transform:translateY(0); }
}
/* dissolve: the incoming screen fades in on top while the outgoing one stays opaque
   underneath, then drops out — no half-transparent double exposure mid-swap */
.fslider__panel{ position:absolute; top:0; left:0; right:0; opacity:0; z-index:0; transition:opacity 0s linear .5s; }
.fslider__panel.active{ opacity:1; z-index:1; transition:opacity .5s var(--ease); }
.fslider__panel[data-slide="0"]{ background:radial-gradient(ellipse 90% 60% at 50% 40%, rgba(77,141,255,.16) 0%, transparent 70%); }
.fslider__panel[data-slide="1"]{ background:radial-gradient(ellipse 90% 60% at 50% 40%, rgba(52,211,153,.14) 0%, transparent 70%); }
.fslider__panel[data-slide="2"]{ background:radial-gradient(ellipse 90% 60% at 50% 40%, rgba(251,146,60,.14) 0%, transparent 70%); }
.fslider__panel img{ display:block; width:100%; height:auto; }
/* screenshots with a light + dark version follow the page theme */
.img-light{ display:none !important; }
html[data-theme="light"] .img-light{ display:block !important; }
html[data-theme="light"] .img-dark{ display:none !important; }
/* slide 1 uses screenshots with the device frame baked in: the phone's cut-off bottom
   fades out, and the iPad drops its own black screen box while that slide is showing */
/* framed slide: iPhone + iPad fade out together as ONE layer, with the same fade as the
   hero shot (last ~36% of the iPad's height), in both themes now that the screens have light versions. Masking the
   shared stage — not each device — keeps the phone solid over the iPad (no see-through).
   --fade-bottom / --fade-h are measured in main.js */
.fslider__panel.is-framed{ background:none; }
/* a mask clips at the box edge, so the stage spans the full viewport width (symmetric
   padding keeps the phone centred) — the iPad reaching past the column isn't sliced */
@media (min-width:768px){ .fslider__sticky{ margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); } }
.fipad__panel.is-framed img{ object-fit:contain; }
.fipad__screen:has(.fipad__panel.is-framed.active){ background:transparent; box-shadow:none; }
.fipad__screen{ transition:background-color .5s var(--ease), box-shadow .5s var(--ease); }
/* text zones scroll past in normal flow (stacked inside an absolute overlay) */
.fslider__zones{ position:absolute; top:0; left:0; right:0; pointer-events:none; }
.fslider__zone{ height:var(--zone-h); pointer-events:none; }
/* lead: shorter solo span so the phone holds the hero moment, then text rises */
/* 0-tall lead: the first copy then starts at the stage's own top and, being sticky with the
   same offset, travels with the phone natively (no JS counter-scroll, so no jitter) */
.fslider__zone--lead{ height:0; }
/* each copy sticks at centre for the zone's over-scroll → the "pause" */
.fslider__copy{
  position:sticky; top:72px;
  min-height:calc(100vh - 72px);
  display:flex; flex-direction:column; justify-content:flex-end;
  /* bottom of the text sits on the phone's bottom edge (phone is centred in the same box) */
  padding-bottom:calc((100vh - 72px) / 2 - var(--phone-w) * 0.987);
  box-sizing:border-box;
  width:var(--copy-w);
  pointer-events:auto;
}
.fslider__zone[data-side="left"]  .fslider__copy{ margin-left:max(0px, calc(50% - var(--phone-w)/2 - var(--copy-gap) - var(--copy-w))); }
.fslider__zone[data-side="right"] .fslider__copy{ margin-left:calc(50% + var(--phone-w)/2 + var(--copy-gap)); }
.fslider__copy .eyebrow{ color:var(--color-muted); margin-bottom:14px; }
.fslider__copy h3{ margin:0 0 16px; }
.fslider__copy .fslider__lead{ color:var(--color-text); font-size:clamp(15px,1.4vw,17px); line-height:1.55; margin:0; }
/* glossar-style scroll reveal: words start dim, fill to full as you scroll through centre */
.fslider__copy .fw{ color:rgba(255,255,255,0.34); transition:color .35s var(--ease); }
.fslider__copy .fw.lit{ color:var(--color-text); }
html[data-theme="light"] .fslider__copy .fw{ color:rgba(0,0,0,0.30); }
html[data-theme="light"] .fslider__copy .fw.lit{ color:var(--color-text); }

/* ---------- Differentiators bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:14px; margin-top:8px; }
#different{ position:relative; }
/* Bottom fade for the bento grid. Static gradient only — the old 5-layer
   backdrop-filter blur stack was rebuilt every scroll frame over the dense grid
   and caused ~500ms jank spikes; removed for smooth scrolling. */
.bento-glow{ position:absolute; bottom:0; left:0; right:0; height:220px; pointer-events:none; z-index:2; }
.bento-glow > div{ display:none; }
.bento-glow::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--color-bg) 20%, transparent 80%); }
.tile{ position:relative; border-radius:24px; background:var(--color-surface); padding:26px 24px 28px; display:flex; flex-direction:column; gap:6px;
  transition:transform .3s var(--ease), background .3s; }
.tile:hover{ transform:translateY(-3px); background:var(--color-surface-2); }
.tile .kicker{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--color-muted); text-transform:uppercase; }
.tile h4{ font-family:var(--head); font-weight:500; font-size:clamp(18px,1.6vw,22px); letter-spacing:-0.01em; margin:8px 0 6px; }
.tile p{ color:var(--color-muted-2); font-size:14.5px; line-height:1.5; margin:0; }
/* large ghost icon at the bottom — barely lifted from the tile surface */
.tile__icon{ margin-top:auto; align-self:flex-end; width:clamp(60px,5vw,84px); height:clamp(60px,5vw,84px);
  color:var(--color-surface-3); padding-top:32px; }
.tile:hover .tile__icon{ color:var(--color-surface-3); }
.bento-cta{ position:relative; z-index:3; display:flex; justify-content:center; padding-top:32px; }

/* ---------- Pricing ---------- */
.prices{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:880px; }
.price{ position:relative; border-radius:24px; background:var(--color-surface); padding:30px 28px 32px; display:flex; flex-direction:column; }
.price, .price--pro{ background:var(--color-surface-2); outline:1px solid var(--color-line); }   /* both columns share the Pro look */
.price__name{ font-size:20px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price__tag{ font-size:12px; font-weight:600; color:var(--color-text); background:var(--color-surface-3); border-radius:100px; padding:3px 10px; text-transform:none; letter-spacing:0; }
.price__fig{ display:flex; align-items:baseline; gap:6px; margin:14px 0 4px; }
.price__fig b{ font-family:var(--head); font-weight:500; font-size:clamp(32px,4vw,48px); letter-spacing:-0.02em; }
.price__fig span{ color:var(--color-muted); font-size:15px; }
.price__desc{ color:var(--color-muted-2); font-size:15px; line-height:1.5; margin:0 0 20px; max-width:34ch; }
.price ul{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px; }
.price li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; }
.price li svg{ flex:0 0 19px; width:19px; height:19px; color:var(--color-muted-2); margin-top:1px; }
.price .btn{ width:100%; margin-top:auto; }

/* ---------- Closing ---------- */
.closing{ text-align:center; padding-block:clamp(90px,12vw,150px); }
.closing h2{ max-width:none; margin:0 auto; }

/* ---------- Footer ---------- */
.foot{ padding-block-start:96px; padding-block-end:140px; }
.foot__row{ display:flex; flex-direction:column; align-items:center; gap:32px; }
.foot__links{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; }
.foot__links .link{ color:var(--color-muted); font-size:14px; transition:color .2s; }
.foot__links .link:hover{ color:var(--color-text); }
.foot__legal{ margin-top:40px; color:var(--color-faint); font-size:13px; text-align:center; }

/* ---------- Floating bottom bar (Apple-style pill) ---------- */
.strip-glow{ position:fixed; bottom:0; left:0; right:0; height:140px; z-index:59; pointer-events:none; }
.strip-glow::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(50% 100% at 50% 100%, rgba(0,0,0,0.85) 0%, transparent 100%); }
html[data-theme="light"] .strip-glow::after{ background:radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,0.9) 0%, transparent 100%); }
/* same stacked progressive blur as .top-glow, mirrored: strongest at the bottom edge */
.strip-glow > div{ position:absolute; inset:0; }
.strip-glow > div:nth-child(1){ -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px); -webkit-mask:linear-gradient(to top,black 0%,black 55%,transparent 100%); mask:linear-gradient(to top,black 0%,black 55%,transparent 100%); }
.strip-glow > div:nth-child(2){ -webkit-backdrop-filter:blur(4px);   backdrop-filter:blur(4px);   -webkit-mask:linear-gradient(to top,black 0%,black 30%,transparent 85%);  mask:linear-gradient(to top,black 0%,black 30%,transparent 85%); }
.strip-glow > div:nth-child(3){ -webkit-backdrop-filter:blur(10px);  backdrop-filter:blur(10px);  -webkit-mask:linear-gradient(to top,black 0%,black 10%,transparent 65%);  mask:linear-gradient(to top,black 0%,black 10%,transparent 65%); }
.strip-glow > div:nth-child(n+4){ display:none; }
.strip{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:10px; padding:5px; border-radius:100px;
  background:var(--color-pill-bg); border:1px solid var(--color-pill-line);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.strip .btn{ height:48px; }
.toggle{ width:48px; height:48px; flex:0 0 48px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-surface-2); color:var(--color-text); border:1px solid var(--color-line); transition:opacity .25s, background .25s; }
.toggle:hover{ background:var(--color-surface-3); }
.toggle svg{ width:19px; height:19px; }
.toggle .i-sun{ color:var(--color-amber); } .toggle .i-moon{ display:none; }
html[data-theme="light"] .toggle .i-sun{ display:none; } html[data-theme="light"] .toggle .i-moon{ display:block; }

/* ---------- Pull quote ---------- */
.pullquote{
  max-width:clamp(520px,72vw,860px);
  margin:0 auto;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.pullquote__text{
  font-family:var(--font-serif); font-size:clamp(28px,5.2vw,72px);
  font-weight:700; line-height:1.15; letter-spacing:-.025em;
  margin:0;
}
.pullquote__text .fw{ color:rgba(255,255,255,.2); transition:color .3s var(--ease); }
.pullquote__text .fw.lit{ color:var(--color-text); }
html[data-theme="light"] .pullquote__text .fw{ color:rgba(0,0,0,.18); }
html[data-theme="light"] .pullquote__text .fw.lit{ color:var(--color-text); }

/* ---------- Collect — Apple-style slider ---------- */
/* horizontal slider — thumbnail tiles, captions outside */
.featb__block{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(72px,12svh,140px);
}
.featb__head{ margin-bottom:clamp(20px,2.5vw,32px); }
.featb__head .h3{ margin:0; }
.featb__row{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:6px; margin-top:40px;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  scroll-padding-left:max(var(--pad), calc((100vw - var(--col)) / 2));
  scrollbar-width:none; }
.featb__row::-webkit-scrollbar{ display:none; }
.featb__spacer{ flex:0 0 max(var(--pad), calc((100vw - var(--col)) / 2)); }
.featb__card{ flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; }

/* the thumbnail tile — width-driven so aspect-ratio is always respected */
.featb__thumb{ background:var(--color-surface); border-radius:22px; overflow:hidden; }
/* width sets the card size; height is derived from aspect-ratio — never overridden */
.featb__card--s .featb__thumb{ width:clamp(240px,30.3vw,368px); aspect-ratio:1/1; }
.featb__card--w .featb__thumb{ width:clamp(320px,40.4vw,490px); aspect-ratio:4/3; }
.featb__thumb img{ width:100%; height:100%; object-fit:cover; }
/* framed device mockups sit contained on the surface, not cropped */
.featb__card--frame .featb__thumb{ display:flex; align-items:center; justify-content:center; padding:26px; }
.featb__card--frame .featb__thumb img{ width:100%; height:auto; object-fit:contain; }
/* wide canvas card: same top gap as the Share sheet card. Both cards are the same height,
   and that gap is 21% of it (minus 4px) = 15.75% of this 4:3 card's width. The iPad then
   runs off the bottom edge, like the phone does */
.featb__card--w.featb__card--frame .featb__thumb{ align-items:flex-start; padding-top:calc(15.75% - 4px); }
.featb__card--w.featb__card--frame .featb__thumb img{ flex:none; }
/* framed iPhone shot: phone stands in the card from near the top, its lower part runs
   off the card's bottom edge (the share-sheet row with PATAAN stays in view) */
.featb__card--phone .featb__thumb{ display:flex; justify-content:center; align-items:flex-start; padding-top:calc(21% - 4px); }   /* = (100% - 58%) / 2, minus the image's own transparent top edge, so the top gap matches the side gaps */
.featb__card--phone .featb__thumb img{ width:58%; height:auto; object-fit:contain; flex:none; }
/* lower-anchored variant: the phone's top runs off the card instead, so the Details sheet
   (screen type + components) is what sits in view */
/* wide card with a light + dark phone side by side, same top gap as the other wide cards */
.featb__card--pair .featb__thumb{ display:flex; justify-content:center; align-items:flex-start; gap:5%; padding-top:calc(15.75% - 4px); }
.featb__card--pair .featb__thumb img{ width:40%; height:auto; object-fit:contain; flex:none; }
.featb__card--phone-low .featb__thumb{ align-items:flex-end; padding-top:0; }
.featb__card--phone-low .featb__thumb{ padding-bottom:calc(21% - 4px); }   /* full-phone shots: bottom gap mirrors the Share card top gap */
.featb__card--combo .featb__thumb{ position:relative; }   /* iPad + iPhone in one card, like the hero */
.featb__card--combo .featb__thumb img.featb__over{ position:absolute; width:35%; left:51%; top:33%; }

/* caption lives outside the tile, on the page background */
.featb__cap{ margin:16px 4px 0; font-size:15px; line-height:1.5; color:var(--color-muted-2); }
.featb__card--s .featb__cap{ max-width:clamp(240px,30.3vw,368px); }
.featb__card--w .featb__cap{ max-width:clamp(320px,40.4vw,490px); }
.featb__cap b{ color:var(--color-text); font-weight:500; }
/* gallery controls (pointer devices only; touch swipes) */
.featb__nav{ display:none; justify-content:flex-end; gap:12px; margin-top:28px; }
@media (hover:hover) and (pointer:fine){ .featb__nav{ display:flex; } }
.featb__btn{ width:44px; height:44px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-surface-2); color:var(--color-text); border:1px solid var(--color-line);
  transition:background .2s, opacity .2s, transform .3s var(--ease); }
.featb__btn:hover{ background:var(--color-surface-3); }
.featb__btn:active{ transform:scale(.94); transition-duration:.1s; }
.featb__btn:disabled{ opacity:.35; cursor:default; }
.featb__btn svg{ width:20px; height:20px; }

/* ---------- Responsive ---------- */
/* responsive polish — keep the desktop language, make touch viewports feel intentional */
@media (max-width:1024px){
  :root{ --pad:clamp(20px,5vw,40px); --card-radius:32px; }
  .section{ padding-block:clamp(56px,8vw,88px); }
  .h1{ font-size:clamp(60px,9.5vw,92px); }
  .h2{ font-size:clamp(34px,6.2vw,56px); }
  .h3{ font-size:clamp(34px,5vw,46px); }
  .sec-head{ margin-bottom:clamp(30px,5vw,44px); }
  .sec-head.center .h2{ font-size:clamp(40px,7.5vw,64px); }

  .hero{
    padding-top:clamp(112px,14svh,156px);
    padding-bottom:clamp(16px,3svh,28px);
  }

  .featb__row{
    gap:18px;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
  }
  .featb__card--s .featb__thumb{ width:clamp(220px,38vw,300px); }
  .featb__card--w .featb__thumb{ width:clamp(294px,52vw,400px); }
  .featb__cap{ font-size:14.5px; margin-top:14px; }

  .strip{ bottom:max(16px, env(safe-area-inset-bottom)); }
}


@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){
  .hero{
    padding-top:clamp(104px,14svh,132px);
  }
  .h1{ font-size:clamp(52px,7vw,72px); }
  .hero__title{ max-width:none; }

  .fslider__track{
    --phone-w:min(280px,26vw);
    --copy-w:clamp(240px,26vw,330px);
    --zone-h:calc(1.28 * (100svh - 72px));
  }
}

@media (min-width:1025px) and (max-width:1180px) and (orientation:landscape){
  .section{ padding-block:clamp(56px,7vw,88px); }
  .h1{ font-size:clamp(56px,7vw,82px); }
  .h2{ font-size:clamp(36px,5vw,52px); }
  .h3{ font-size:clamp(34px,4.2vw,46px); }
  .hero{
    padding-top:clamp(104px,14svh,132px);
    padding-bottom:36px;
  }
  .hero__title{ max-width:none; }

  .sec-head.center .h2{ font-size:clamp(44px,5.8vw,64px); }
  .fslider__track{
    --phone-w:min(280px,28vw);
    --copy-w:clamp(260px,28vw,340px);
    --zone-h:calc(1.28 * (100svh - 72px));
  }
  .fslider__sticky{ justify-content:center; padding-left:0; }

  .featb__row{ gap:18px; padding-bottom:10px; scroll-snap-type:x mandatory; }
  .featb__card--s .featb__thumb{ width:clamp(220px,28vw,300px); }
  .featb__card--w .featb__thumb{ width:clamp(294px,38vw,400px); }
}

/* feature slider — phones only (≤767px): single column, phone pinned near top,
   text rises from below and pauses in the lower band, centred */
@media (max-width:767px){
  :root{ --pad:20px; --card-radius:26px; }
  .section{ padding-block:56px; }
  .h1{ font-size:clamp(58px,15vw,72px); line-height:1.06; }
  .h2{ font-size:clamp(32px,9vw,44px); }
  .h3{ font-size:clamp(28px,7.4vw,36px); }
  .eyebrow{ font-size:14px; }
  .top-glow{ height:100px; }
  .top-glow__label{ height:68px; font-size:clamp(30px,12vw,46px); letter-spacing:.2em; }

  .hero{
    padding-top:96px;
    padding-bottom:clamp(12px,4svh,24px);
  }
  .hero__title{ max-width:16ch; }

  .sec-head.center .eyebrow{ margin-bottom:16px; }
  .sec-head.center .h2{ font-size:clamp(36px,10.8vw,48px); }


  .featb__row{
    gap:14px;
    margin-top:30px;
    padding-bottom:12px;
    scroll-padding-left:var(--pad);
  }
  .featb__card--s .featb__thumb,
  .featb__card--w .featb__thumb{ width:min(62vw,225px); }
  /* wide card: same height as square card, width derived from 4:3 */
  .featb__card--w .featb__thumb{ width:calc(min(62vw,225px) * 4 / 3); }
  .featb__card--frame .featb__thumb{ padding:22px; }
  .featb__card--s .featb__cap,
  .featb__card--w .featb__cap{ max-width:min(62vw,225px); }
  .featb__card--w .featb__cap{ max-width:calc(min(62vw,225px) * 4 / 3); }
  .featb__cap{ font-size:14px; line-height:1.45; margin:12px 2px 0; }
}
/* feature slider — phones AND portrait tablets: single column, phone pinned near top,
   copy fades in over the lower band (side-by-side has no room at these widths) */
@media (max-width:767px), (max-width:1024px) and (orientation:portrait){
  .fipad{ display:none; }
  .fslider__track{ --phone-w:min(262px,67vw); --zone-h:calc(1.42 * (100svh - 72px)); margin-top:28px; }
  .fslider__track.rv{ transform:none; }
  /* phone pinned well below the fixed top bar (PATAAN wordmark) */
  .fslider__sticky{
    top:72px;
    height:calc(100svh - 72px);
    align-items:flex-start;
    padding-top:clamp(24px,5svh,48px);
  }
  /* text fades in / out inside the sticky feature stage, anchored to the bottom.
     A gradient the colour of the page rises behind it so the lower part of the
     phone melts smoothly into the page and the copy reads cleanly on top. */
  .fslider__zone[data-side="left"]  .fslider__copy,
  .fslider__zone[data-side="right"] .fslider__copy{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    margin:0; width:auto; min-height:0; z-index:2;
    display:flex; flex-direction:column;
    justify-content:flex-end; align-items:center; text-align:center;
    padding:clamp(80px,18svh,170px) var(--pad) 108px;
    background:linear-gradient(to bottom, transparent 0%, var(--color-bg) 42%, var(--color-bg) 100%);
    opacity:0; transition:opacity .45s var(--ease);
    pointer-events:none;
  }
  .fslider__zone[data-side] .fslider__copy.fsi-on{ opacity:1; }
  .fslider__copy h3{ font-size:clamp(26px,7.4vw,34px); margin-bottom:10px; }
  .fslider__copy .eyebrow{ margin-bottom:8px; }
  .fslider__copy .fslider__lead{ font-size:clamp(14px,3.8vw,15px); line-height:1.5; max-width:34ch; }
}
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .fslider__track{ --phone-w:min(300px,40vw); }
  .fslider__zone[data-side] .fslider__copy{ padding-bottom:140px; }
  .fslider__copy .fslider__lead{ font-size:16px; max-width:40ch; }
  .fslider__copy h3{ font-size:clamp(34px,5vw,42px); }
}
@media (max-width:809px){
  .bento{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .bento{ grid-template-columns:1fr; }
  .prices{ grid-template-columns:1fr; }
  .strip .btn .hide-sm{ display:none; }

  .tile{ border-radius:20px; padding:22px 20px 24px; }
  .prices{ gap:14px; }
  .price{ border-radius:22px; padding:26px 22px 28px; }
  .closing{ padding-block:72px 118px; }
  .foot{ padding-block-start:56px; padding-block-end:118px; }
  .foot__links{ gap:20px; }
  .strip-glow{ height:100px; }
  .strip{
    gap:8px;
    padding:4px;
    bottom:max(14px, env(safe-area-inset-bottom));
  }
  .strip .btn{ height:46px; padding-inline:22px; }
  .toggle{ width:46px; height:46px; flex-basis:46px; }
}

/* reduced transparency: solid chrome instead of glass */
@media (prefers-reduced-transparency:reduce){
  .strip{ background:var(--color-surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .top-glow > div, .strip-glow > div{ display:none; }
}

/* breathing room so the slider phone doesn't peek into the hero */
.fslider__track{ margin-top:clamp(192px,28vw,360px); }

/* mobile: hero fills the first screen; the devices sit at the bottom, just above the bottom blur */
@media (max-width:767px){
  .hero{ min-height:100svh; display:flex; flex-direction:column; padding-bottom:150px; box-sizing:border-box; }
  .hero__devices{ margin-top:auto; }
  .hero > .eyebrow{ margin-top:auto; }   /* free space splits above the text and above the devices */
}

/* tablet + mobile: the caption's backdrop gradient rises with the scroll first; the text
   itself only fades in over the last 20% (--txt is set from the scroll in main.js) */
@media (max-width:767px), (max-width:1024px) and (orientation:portrait){
  .fslider__zone[data-side] .fslider__copy > *{ opacity:var(--txt,1); }
}

/* plan cards: flat Free / Pro cards modelled on the app's Settings page */
.plan-card{ position:relative; overflow:hidden; border-radius:22px; min-height:200px; padding:20px; margin:16px 0 22px;
  display:flex; flex-direction:column; justify-content:space-between; gap:40px; }
.plan-card--free{ color:#000; background:#fff; box-shadow:0 22px 48px rgba(0,0,0,.85); }   /* same shadow as Pro */
.plan-card--pro{ color:#fff; background:#141416; box-shadow:0 22px 48px rgba(0,0,0,.85); }
.plan-card__top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.plan-card__brand{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:18px; letter-spacing:.03em; }
.plan-card__brand svg{ width:22px; height:22px; }
.plan-card__tier{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; border:1px solid currentColor; opacity:.8; }   /* same square badge as the roadmap */
.plan-card__bottom{ position:relative; z-index:1; }
.plan-card__price{ display:flex; align-items:baseline; gap:6px; }
.plan-card__price b{ font-family:var(--head); font-weight:600; font-size:clamp(32px,4vw,44px); letter-spacing:-0.02em; }
.plan-card__price span{ font-size:15px; opacity:.7; }
.plan-card__bottom p{ margin:4px 0 0; font-size:14px; line-height:1.45; opacity:.8; }
.plan-card--pro .plan-card__tier{ background:#fff; color:#000; border-color:#fff; opacity:1; }   /* Pro: filled chip; Free stays outlined */
.plan-card{ transition:transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s cubic-bezier(0.22,1,0.36,1); will-change:transform; }
html[data-theme="light"] .plan-card--free, html[data-theme="light"] .plan-card--pro{ box-shadow:0 12px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); }   /* light: barely-there shadow */
/* hover: a deeper shadow pools behind the side the pointer presses down */
.plan-card.is-tilting{ box-shadow:calc(var(--sx,0) * 36px) calc(18px + var(--sy,0) * 36px) 48px rgba(0,0,0,.7); }
html[data-theme="light"] .plan-card.is-tilting{ box-shadow:calc(var(--sx,0) * 30px) calc(14px + var(--sy,0) * 30px) 40px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06); }
html[data-theme="light"] .plan-card--free, html[data-theme="light"] .plan-card--pro{ box-shadow:0 14px 34px rgba(0,0,0,.14); }   /* light: one single-layer resting shadow for both cards */
/* light hover: one shared shadow for Free and Pro (declared last so it wins over each card's resting shadow) */
html[data-theme="light"] .plan-card.plan-card.is-tilting{ box-shadow:calc(var(--sx,0) * 14px) calc(8px + var(--sy,0) * 14px) 22px rgba(0,0,0,.24); }
/* dark hover: a soft white glow instead of a black shadow */
html:not([data-theme="light"]) .plan-card.plan-card.is-tilting{ box-shadow:calc(var(--sx,0) * 14px) calc(8px + var(--sy,0) * 14px) 24px rgba(255,255,255,.16); }
/* pricing: plan columns end at their last feature; App Store badge sits centred below */
.price ul{ margin-bottom:0; }
.store-badge{ display:flex; align-items:center; gap:8px; width:max-content; margin:36px auto 0; padding:8px 18px 8px 14px;
  background:#000; color:#fff; border:1px solid #a6a6a6; border-radius:12px; text-decoration:none; transition:transform .2s var(--ease); }
.store-badge:hover{ transform:translateY(-2px); }
.store-badge svg{ width:26px; height:26px; }
.store-badge span{ display:flex; flex-direction:column; font-size:21px; font-weight:600; line-height:1.05; letter-spacing:-.01em; }
.store-badge small{ font-size:11px; font-weight:500; letter-spacing:.01em; }
/* bento tiles share the roadmap card layout: icon top-left, then label, title, text */
.tile__icon{ order:-1; margin:0 0 22px; padding-top:0; align-self:flex-start; width:clamp(52px,4.5vw,72px); height:clamp(52px,4.5vw,72px); }
.tile h4{ margin:0 0 6px; }
.tile p{ flex:1; }
/* Pro card: a deeper shadow than Free, in both themes */
.plan-card--pro{ box-shadow:0 26px 60px rgba(0,0,0,.95); }
html[data-theme="light"] .plan-card--pro{ box-shadow:0 18px 42px rgba(0,0,0,.30); }
/* Free card: a lighter shadow */
.plan-card--free{ box-shadow:0 14px 34px rgba(0,0,0,.45); }
html[data-theme="light"] .plan-card--free{ box-shadow:0 10px 26px rgba(0,0,0,.08); }

/* Language navigation and Japanese reading rhythm. */
.language-switch{position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:24px;font-size:14px;}
.language-switch a{color:inherit;text-decoration:none;opacity:.6;padding:10px 4px;}
.language-switch a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:5px;}
.language-switch a:focus-visible{outline:2px solid currentColor;outline-offset:4px;}
.locale-note{font-size:12px;line-height:1.7;opacity:.65;margin:20px 0;}
html[lang="ja"]{--head:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;--body:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;}
html[lang="ja"] body{font-family:var(--body);line-break:strict;overflow-wrap:break-word;}
html[lang="ja"] .h1,html[lang="ja"] .h2,html[lang="ja"] .h3,html[lang="ja"] h4{font-family:var(--head);letter-spacing:0;line-height:1.4;word-break:normal;}
html[lang="ja"] .eyebrow,html[lang="ja"] .kicker{letter-spacing:.06em;}
html[lang="ja"] .fslider__lead,html[lang="ja"] .featb__cap,html[lang="ja"] .tile p{line-height:1.85;}
html[lang="ja"] .plan-card__bottom p{line-height:1.7;}
html[lang="ja"] .pullquote__text{line-height:1.65;letter-spacing:0;}
html[lang="ja"] .strip .btn{font-size:14px;}
@media(max-width:600px){html[lang="ja"] .hero__title{font-size:clamp(30px,8vw,48px);}html[lang="ja"] .h2{font-size:clamp(26px,7vw,40px);}}