/* ============================================================
   NC×AI LP
   Figma: GO4mbWqrj8b8SxJN8OR6JX / node 46-1412
   Every colour, size, weight and gap below is taken from the
   Figma file. The design commits to a single dark world, so
   each value is painted explicitly rather than inherited.
   ============================================================ */
:root{
  /* colour */
  --bg:#1A1A1A;
  --surface:#333333;
  --white:#FFFFFF;
  --ink:#191919;
  --gray-50:#E6E6E6;
  --gray-100:#CCCCCC;
  --orange:#FF8A00;
  --orange-2:#FF6A00;
  --green:#32D74B;
  --red:#FF3535;
  --hair:rgba(255,255,255,.10);
  --divider:rgba(255,255,255,.20);

  --grad-hero:linear-gradient(152.55deg,#FF8A00 0%,#FF6A00 100%);
  --grad-quick:linear-gradient(173.14deg,#FF8A00 0%,#FF6A00 100%);
  --grad-speak:linear-gradient(166.46deg,#FF8A00 0%,#FF6A00 100%);
  --grad-plan:linear-gradient(136.37deg,#FF8A00 0%,#FF6A00 100%);

  /* layout */
  --content:1280px;
  --gutter:clamp(16px,5.56vw,80px);

  /* type scale */
  --fs-h1:56px;
  --fs-h2:56px;
  --fs-h3:44px;
  --fs-h4:32px;

  /* rhythm */
  --pad-top:120px;
  --pad-bottom:80px;
}

.ncplusai *,
.ncplusai *::before,
.ncplusai *::after{box-sizing:border-box}

.page_wrap.ncplusai{-webkit-text-size-adjust:100%}

.page_wrap.ncplusai{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--white);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  /* common.css's bare .page_wrap sets padding and overflow:hidden (both axes).
     The overflow breaks position:sticky for .scene-sticky below, and
     overflow-x:hidden alone is not a safe fix: per spec, when one axis is
     visible and the other is not, the visible axis is force-computed to auto,
     which still makes this a scroll container. Both axes must stay visible. */
  overflow:visible;
}

.ncplusai img,
.ncplusai svg{display:block;max-width:100%}

.ncplusai a{color:inherit;text-decoration:none}

.ncplusai ol,
.ncplusai ul{margin:0;padding:0;list-style:none}

.ncplusai p{margin:0}

.ncplusai h1,
.ncplusai h2,
.ncplusai h3{margin:0;font-weight:600}

.ncplusai button{font:inherit;color:inherit}

.ncplusai :focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:6px}

.ncplusai .wrap{
  width:100%;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.ncplusai .section{padding-block:var(--pad-top) var(--pad-bottom)}

/* ---------- section heading ---------- */
.ncplusai .h2{
  font-size:var(--fs-h2);font-weight:600;line-height:1.4;
  text-align:center;color:var(--white);
  /* the 579px frame in Figma was sized for 48px type; at 56px it needs
     640px to keep the same line breaks and to hold the authored
     "NC×AIは全コンテンツ / 完全無料" split on two lines */
  max-width:640px;margin-inline:auto;
}

.ncplusai .lede{
  font-size:18px;font-weight:400;line-height:2;color:var(--gray-100);
  text-align:center;max-width:579px;margin-inline:auto;
}

.ncplusai .head-stack{display:flex;flex-direction:column;gap:24px}

/* ---------- store badge ----------
   Both lockups are the stores' own artwork, which their guidelines forbid
   redrawing or recolouring, so height is the only thing set here. --badge-h
   is the height of the artwork itself. Google ships its PNG with 29px of
   transparent clear space above and below (192 of the 250 rows are badge),
   so that box is scaled by 250/192 for the two to read as the same size. */
.ncplusai .badges{display:flex;flex-wrap:wrap;align-items:center;gap:20px;--badge-h:52px}

.ncplusai .badges--cta{gap:24px;justify-content:center;--badge-h:60px}

.ncplusai .badge{display:inline-flex;transition:opacity .18s ease}

.ncplusai .badge:hover{opacity:.7}

.ncplusai .badge img{display:block;width:auto}

.ncplusai .badge--apple img{height:var(--badge-h)}

.ncplusai .badge--gplay img{height:calc(var(--badge-h) * 250 / 192)}

/* ---------- scroll reveal ----------
   The hidden state only applies once the inline script has flagged the
   document, so the content stays visible if scripting never runs. */
.js-anim .ncplusai .reveal{
  opacity:0;transform:translateY(32px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rd,0s);
}

.js-anim .ncplusai .reveal.is-in{opacity:1;transform:none}

/* ---------- primary pill ---------- */
.ncplusai .btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--orange);color:var(--white);
  font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-.01em;
  padding:16px 24px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}

.ncplusai .btn:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* ---------- sticky download bar (small screens only) ----------
   Hidden by default; the media query below turns it on. */
.ncplusai .dl-bar{display:none}

@media (max-width:1024px) {
.ncplusai .dl-bar{
    display:block;
    position:fixed;left:32px;right:32px;bottom:32px;z-index:20;
  }

.ncplusai .dl-bar a{
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:16px 24px;
    background:var(--white);color:var(--ink);
    border:1px solid rgba(0,0,0,.05);border-radius:999px;
    box-shadow:0 14px 40px rgba(0,0,0,.4);
    font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-.01em;
    white-space:nowrap;
    transition:transform .18s ease;
  }

.ncplusai .dl-bar a:active{transform:scale(.98)}

.ncplusai .dl-bar img{width:24px;height:24px;flex:none}

}

/* ---------- download QR (desktop only) ----------
   A QR is only useful to someone holding a *different* device, so it is
   hidden by default and revealed only where a real pointer exists — that
   keeps it off phones and tablets regardless of window width. */
.ncplusai .qr-float{display:none}

@media (min-width:1025px) and (hover:hover) and (pointer:fine) {
/* praktika anchors the widget to the very bottom edge so it reads as a tab
     pulled up out of the viewport; only the top corners are rounded */
.ncplusai .qr-float{
    display:block;
    position:fixed;right:32px;bottom:24px;z-index:20;
    pointer-events:none;
  }

.ncplusai .qr-card{
    display:block;text-align:center;
    padding:16px;
    background:var(--white);
    border-radius:24px;
    box-shadow:0 17px 35px -4px rgba(0,0,0,.45);
  }

/* two codes, 29 and 33 modules; 124px keeps both near 4px per module.
     The notice below is wider than the code, so the code is centred on the
     card rather than left to sit at its left edge. */
.ncplusai .qr-code{display:block;width:124px;height:124px;margin-inline:auto}

/* the App Store code is the default; the script swaps in the other one on
     a Windows/Android machine */
.ncplusai .qr-code[data-qr="gplay"]{display:none}

.ncplusai .qr-code svg{display:block;width:100%;height:100%}

.ncplusai .qr-label{
    display:block;margin-top:10px;
    font-size:13px;font-weight:600;line-height:1.45;
    color:#191919;
  }

/* DENSO WAVE asks for the mark to be acknowledged wherever a code is shown.
     The QR itself is desktop-only, so the notice lives with it rather than in
     a page-wide footer. */
.ncplusai .qr-note{
    /* a fixed width so the notice wraps to two balanced lines instead of
       stretching the card out to one long line */
    display:block;width:140px;margin:8px auto 0;
    font-size:10px;font-weight:400;line-height:1.5;
    color:#6B6B6B;
  }

}

/* ============================================================
   1 — HERO
   ============================================================ */
/* the phone reaches 64px above the card and is cut off at the card's
   bottom edge, exactly as the Figma frame clips it */
.ncplusai .hero{padding-top:100px;overflow:hidden}

.ncplusai .hero-card{
  position:relative;
  background:var(--grad-hero);
  border-radius:64px;padding:48px;
  display:flex;gap:48px;align-items:flex-start;
  /* open at the top so the phone can rise above the card, closed on the
     other three sides so the phone's foot and the reply bubble's rings are
     absorbed by the card edge instead of streaking onto the page ground */
  clip-path:inset(-100vh 0 0 0);
}

.ncplusai .hero-copy{width:639px;max-width:100%;display:flex;flex-direction:column;gap:100px}

.ncplusai .hero-lock{display:flex;flex-direction:column;gap:48px}

.ncplusai .hero-id{display:flex;flex-direction:column;gap:32px}

.ncplusai .hero-brand{display:flex;align-items:center;gap:24px}

.ncplusai .hero-brand .mark{width:56px;height:56px;border-radius:12px}

.ncplusai .hero-brand .word{width:134px;height:32px}

.ncplusai .hero h1{
  font-size:var(--fs-h1);font-weight:600;line-height:1.4;
  letter-spacing:-.05em;color:var(--white);
}

/* trophies plus the pricing footnote they refer to */
.ncplusai .hero-proof{display:flex;flex-direction:column;gap:18px}

.ncplusai .hero-note{font-size:12px;font-weight:400;line-height:1.6;color:var(--white);opacity:.8}

.ncplusai .stats{display:flex;gap:32px;flex-wrap:nowrap}

.ncplusai .stat{display:flex;align-items:center;gap:12px}

.ncplusai .stat .laurel{width:34px;height:72px;flex:none}

.ncplusai .stat .laurel.flip{transform:scaleX(-1)}

.ncplusai .stat-body{width:100px;display:flex;flex-direction:column;align-items:center;gap:6px}

.ncplusai .stat-val{
  height:40px;display:flex;align-items:center;justify-content:center;gap:4px;
  position:relative;
  font-size:40px;font-weight:600;line-height:1;color:var(--white);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* Figma pins the ※ at 60px into a 64px-wide "¥０" with a 14px glyph. The
   offsets are percentages of that box, not em — em on `left`/`top` would
   resolve against the ※'s own 14px size and land it on top of the digits. */
.ncplusai .stat-val--yen{align-items:flex-start}

.ncplusai .stat-val--yen .yen{position:relative;width:1.6em}

.ncplusai .stat-val--yen .note{
  position:absolute;left:93.75%;top:12.5%;
  font-size:.35em;font-weight:400;line-height:1;
}

.ncplusai .stat-val .num{font-size:36px}

.ncplusai .stat-val .unit{font-size:26px}

.ncplusai .stat-val img{width:40px;height:40px}

.ncplusai .stat-label{font-size:14px;font-weight:400;line-height:1.3;text-align:center;color:var(--white)}

.ncplusai .stat-label.nowrap{white-space:nowrap}

.ncplusai .hero-visual{
  position:absolute;right:32px;top:-40px;width:480px;
  display:flex;align-items:center;justify-content:center;
}

.ncplusai .hero-phone{width:380px;height:auto}

/* line break authored for the tablet band only */
.ncplusai .br-tb{display:none}

/* Three chat cards float over the phone. Figma rotates each one and gives
   the rotated bounding box a position, so each is placed by its CENTRE as a
   share of the 480x772 phone frame — that keeps them locked to the phone at
   every width instead of needing per-breakpoint coordinates. */
.ncplusai .bubble{
  position:absolute;
  transform:translate(-50%,-50%) rotate(var(--rot));
  border:1px solid;border-radius:24px;
  color:var(--ink);font-weight:700;line-height:1.4;
  text-align:center;white-space:nowrap;
}

.ncplusai .bubble--green{
  --rot:-8deg;
  left:16.18%;top:26.44%;
  padding:14px 18px;text-align:left;
  background:var(--green);border-color:rgba(255,255,255,.2);
  box-shadow:0 8px 40px rgba(50,215,75,.5);
  font-size:22px;
}

.ncplusai .bubble--peach{
  --rot:8deg;
  left:78.91%;top:55.52%;
  padding:16px 18px;
  background:rgba(255,229,199,.95);border-color:rgba(255,138,0,.2);
  box-shadow:0 8px 40px rgba(255,138,0,.5);
  font-size:20px;
}

.ncplusai .bubble--cream{
  --rot:-6deg;
  left:29.26%;top:67.6%;
  padding:16px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  background:rgba(255,244,231,.95);border-color:rgba(255,138,0,.2);
  box-shadow:0 8px 40px rgba(255,138,0,.5);
  font-size:22px;
}

/* Figma's [Wave] inside the reply card: sixteen 4px bars, 4px apart, at the
   exact heights the design sets. Each bar scales about its centre and starts
   a beat after the last, so the designed silhouette is what you see at the
   peak while the level appears to travel from left to right. */
.ncplusai .wave{
  display:flex;align-items:center;gap:4px;
  overflow:hidden;flex:none;
}

.ncplusai .wave i{
  display:block;width:4px;
  height:calc(var(--h) * var(--wave-k, 1));
  border-radius:99px;background:var(--orange);
  transform-origin:center;
  /* per-bar period and a negative start offset: bars drift out of step with
     each other, so the row reads as a live level meter rather than one wave
     marching across it */
  animation:wave-bar var(--t) ease-in-out infinite;
  animation-delay:var(--d);
  will-change:transform;
}

@keyframes wave-bar{
  0%,100%{transform:scaleY(.34)}
  25%{transform:scaleY(.9)}
  50%{transform:scaleY(.52)}
  75%{transform:scaleY(1)}
}

/* ============================================================
   2 — INTRO
   ============================================================ */
.ncplusai .intro{padding-block:160px 0}

.ncplusai .intro h2{
  font-size:var(--fs-h2);font-weight:600;line-height:1.4;
  text-align:center;max-width:790px;margin-inline:auto;
}

/* ============================================================
   3 — SCROLL SCENES (phone + step swap driven by scroll)
   ============================================================ */
.ncplusai .scene{position:relative}

.ncplusai .scene-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;overflow:hidden;
}

.ncplusai .scene-row{
  width:100%;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:center;
}

.ncplusai .scene-inner{
  width:100%;max-width:1062px;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,5vw,107px);
}

.ncplusai .scene-copy{width:515px;max-width:100%;display:flex;flex-direction:column;gap:64px}

.ncplusai .scene-block{display:flex;flex-direction:column;gap:48px}

.ncplusai .scene-head{display:flex;flex-direction:column;gap:32px}

.ncplusai .scene-title{display:flex;flex-direction:column;gap:12px}

.ncplusai .scene-title h2{font-size:var(--fs-h3);font-weight:600;line-height:1.4}

.ncplusai .scene-title p{font-size:var(--fs-h4);font-weight:600;line-height:1.4;color:var(--white)}

.ncplusai .scene-body{font-size:18px;font-weight:400;line-height:2;color:var(--gray-100)}

.ncplusai .grad-quick{
  background:var(--grad-quick);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.ncplusai .grad-speak{
  background:var(--grad-speak);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* On desktop the nav wrapper is see-through so the step list stays a direct
   child of .scene-block exactly as before; the arrows and dots exist only for
   the button-driven carousel on small screens. */
.ncplusai .scene-nav{display:contents}

.ncplusai .scene-arrow,
.ncplusai .scene-dots{display:none}

.ncplusai .steps{display:flex;flex-direction:column;gap:16px}

.ncplusai .step{
  display:flex;align-items:center;gap:12px;line-height:1.6;
  font-size:18px;opacity:.2;
  transition:opacity .45s ease, font-size .45s ease;
}

.ncplusai .step-num{font-weight:600;color:var(--orange);font-variant-numeric:tabular-nums}

.ncplusai .step-label{font-weight:500;color:var(--white)}

.ncplusai .step.is-on{opacity:1;font-size:28px}

.ncplusai .step.is-on .step-num{font-weight:500}

.ncplusai .scene-visual{
  position:relative;flex:none;
  /* keeps the phone inside the pinned viewport on short screens */
  height:min(691px, calc(100vh - 96px));
  aspect-ratio:440 / 691;
}

.ncplusai .scene-visual img{
  position:absolute;top:0;left:50%;
  height:100%;width:auto;max-width:none;
  opacity:0;transform:translate(-50%,18px) scale(.985);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}

.ncplusai .scene-visual img.is-on{opacity:1;transform:translate(-50%,0)}

@keyframes slide-in-right{from{opacity:0;transform:translate(-20%,0)}to{opacity:1;transform:translate(-50%,0)}}

@keyframes slide-in-left{from{opacity:0;transform:translate(-80%,0)}to{opacity:1;transform:translate(-50%,0)}}

@keyframes slide-out-left{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-80%,0)}}

@keyframes slide-out-right{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-20%,0)}}

/* ============================================================
   4 — FEATURE RAIL
   ============================================================ */
.ncplusai .rail{
  margin-top:64px;
  display:flex;gap:32px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}

.ncplusai .rail::-webkit-scrollbar{height:8px}

.ncplusai .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}

.ncplusai .rail::-webkit-scrollbar-track{background:transparent}

.ncplusai .fcard{
  flex:none;width:328px;
  background:var(--surface);
  border-radius:32px;overflow:hidden;
  scroll-snap-align:start;
  display:flex;flex-direction:column;
}

/* orange panel with the phone bleeding off its bottom edge */
.ncplusai .fcard > img{width:100%;aspect-ratio:328 / 263;height:auto;object-fit:cover}

.ncplusai .fcard-body{
  background:var(--surface);padding:24px;flex:1;
  display:flex;flex-direction:column;gap:12px;
}

.ncplusai .fcard-body h3{font-size:22px;font-weight:600;line-height:1.3;color:var(--white)}

.ncplusai .fcard-body p{font-size:16px;font-weight:400;line-height:1.6;color:var(--gray-100)}

/* ============================================================
   5 — REVIEWS
   ============================================================ */
.ncplusai .reviews{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}

.ncplusai .review{
  background:var(--surface);border-radius:32px;padding:24px;
  display:flex;flex-direction:column;gap:20px;
}

.ncplusai .review h3{font-size:20px;font-weight:600;line-height:1.8;color:var(--white)}

.ncplusai .review-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}

.ncplusai .review-stars{display:flex}

.ncplusai .review-stars img{width:28px;height:28px;margin-right:-2px}

.ncplusai .review-stars img:last-child{margin-right:0}

.ncplusai .review-meta span{font-size:16px;font-weight:400;line-height:1.6;white-space:nowrap;color:var(--white)}

.ncplusai .review p{font-size:16px;font-weight:400;line-height:2;color:var(--gray-100)}

/* the dots only exist for the phone carousel below */
.ncplusai .reviews-dots{display:none}

/* ============================================================
   6 — PRICING
   ============================================================ */
.ncplusai .plans{
  margin-top:64px;max-width:1062px;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;
}

.ncplusai .plan{
  border:1px solid var(--hair);border-radius:32px;padding:32px;
  display:flex;flex-direction:column;gap:40px;
}

.ncplusai .plan--free{background:var(--grad-plan)}

.ncplusai .plan--other{background:var(--surface)}

.ncplusai .plan-top{display:flex;flex-direction:column;gap:32px}

.ncplusai .plan-head{display:flex;flex-direction:column;gap:16px}

.ncplusai .plan-name{font-size:24px;font-weight:600;line-height:1.3;color:var(--white)}

.ncplusai .plan-price{display:flex;align-items:flex-end;gap:8px;white-space:nowrap}

.ncplusai .plan-price b{font-size:48px;font-weight:600;line-height:1.3;color:var(--white)}

.ncplusai .plan-price i{font-size:18px;font-style:normal;font-weight:500;line-height:1.6;color:var(--white)}

.ncplusai .plan--other .plan-price b{color:var(--red)}

.ncplusai .plan-list{display:flex;flex-direction:column;gap:10px}

.ncplusai .plan-list li{display:flex;align-items:center;gap:12px}

.ncplusai .plan-list img{width:40px;height:40px;flex:none}

.ncplusai .plan-list span{font-size:18px;font-weight:400;line-height:1.6;color:var(--white)}

.ncplusai .plan-cta{
  display:block;width:100%;margin-top:auto;
  background:var(--white);color:var(--bg);
  font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-.01em;text-align:center;
  padding:12px 24px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 12px 40px rgba(255,122,0,.25);
  transition:transform .18s ease;
}

.ncplusai .plan-cta:hover{transform:translateY(-2px)}

/* ============================================================
   7 — FAQ (accordion)
   ============================================================ */
.ncplusai .faq{
  margin-top:64px;max-width:842px;margin-inline:auto;
  background:var(--surface);border-radius:24px;overflow:hidden;
}

.ncplusai .faq-item + .faq-item{border-top:1px solid var(--divider)}

.ncplusai .faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:24px;padding:32px;
  font-size:20px;font-weight:600;line-height:2;color:var(--white);
}

.ncplusai .faq-q > span{flex:1;min-width:0}

.ncplusai .faq-q .plus{
  width:24px;height:24px;flex:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}

.ncplusai .faq-q[aria-expanded="true"] .plus{transform:rotate(45deg)}

.ncplusai .faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.22,.61,.36,1);
}

.ncplusai .faq-q[aria-expanded="true"] + .faq-a{grid-template-rows:1fr}

.ncplusai .faq-a > div{overflow:hidden}

.ncplusai .faq-a p{
  padding:0 32px 32px;
  font-size:18px;font-weight:400;line-height:2;color:var(--gray-100);
}

/* ============================================================
   8 — FINAL CTA
   ============================================================ */
.ncplusai .final{padding-block:160px}

.ncplusai .final-inner{display:flex;flex-direction:column;align-items:center;gap:72px}

.ncplusai .final-brand{display:flex;flex-direction:column;align-items:center;gap:48px}

.ncplusai .final-brand .word{width:200px;height:48px}

.ncplusai .final-icon{
  width:160px;height:160px;border-radius:36px;
  box-shadow:0 20px 230px #FF6B35;
}

.ncplusai .final-msg{
  max-width:842px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:48px;
}

.ncplusai .final h2{
  font-size:var(--fs-h2);font-weight:600;line-height:1.4;
  text-align:center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px) {
:root{
    /* praktika's ladder: 36/48px display type on SP/tablet rather than a
       linear shrink, so the headline still carries the screen */
    --fs-h1:clamp(34px,5.4vw,56px);
    --fs-h2:clamp(32px,5.2vw,56px);
    --fs-h3:clamp(26px,3.5vw,44px);
    --fs-h4:clamp(20px,2.6vw,32px);
    --pad-top:clamp(64px,9vw,120px);
    --pad-bottom:clamp(48px,6vw,80px);
  }

.ncplusai .hero-card{border-radius:clamp(28px,4vw,64px);padding:clamp(24px,3.4vw,48px)}

.ncplusai .hero-copy{width:auto;flex:1;gap:clamp(32px,6vw,100px)}

.ncplusai .hero-lock{gap:clamp(24px,3.6vw,48px)}

.ncplusai .hero-id{gap:clamp(16px,2.4vw,32px)}

.ncplusai .hero-visual{
    position:relative;right:auto;top:auto;flex:none;
    width:clamp(240px,32vw,480px);
  }

.ncplusai .stats{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(4px,.8vw,12px);
  }

.ncplusai .stat{gap:clamp(4px,.8vw,12px);justify-content:center;min-width:0}

.ncplusai .stat-body{width:auto;min-width:0;flex:1}

.ncplusai .stat-val{font-size:clamp(24px,3.1vw,40px)}

.ncplusai .stat-val .num{font-size:clamp(22px,2.8vw,36px)}

.ncplusai .stat-val .unit{font-size:clamp(16px,2vw,26px)}

.ncplusai .stat-val img{width:clamp(24px,3.1vw,40px);height:clamp(24px,3.1vw,40px)}

.ncplusai .stat .laurel{width:clamp(22px,2.65vw,34px);height:clamp(47px,5.6vw,72px)}

.ncplusai .stat-label{font-size:clamp(10px,1.1vw,14px)}

.ncplusai .hero-phone{width:min(380px,84%)}

/* only type and padding shrink — the centres are already relative */
.ncplusai .bubble{border-radius:clamp(12px,1.9vw,24px)}

.ncplusai .bubble--green{font-size:clamp(12px,1.72vw,22px);padding:clamp(7px,1.1vw,14px) clamp(9px,1.4vw,18px)}

.ncplusai .bubble--peach{font-size:clamp(11px,1.56vw,20px);padding:clamp(8px,1.25vw,16px) clamp(9px,1.4vw,18px)}

.ncplusai .bubble--cream{
    font-size:clamp(12px,1.72vw,22px);
    padding:clamp(8px,1.25vw,16px) clamp(9px,1.4vw,18px);
    gap:clamp(6px,.86vw,11px);
    --wave-k:.78;
  }

.ncplusai .wave{gap:clamp(2px,.31vw,4px)}

.ncplusai .wave i{width:clamp(2px,.31vw,4px)}

.ncplusai .intro{padding-block:clamp(64px,11vw,160px) 0}

.ncplusai .scene-copy{width:auto;flex:1;gap:clamp(28px,4.4vw,64px)}

.ncplusai .scene-block{gap:clamp(20px,3.4vw,48px)}

.ncplusai .scene-head{gap:clamp(16px,2.4vw,32px)}

.ncplusai .scene-visual{height:min(691px, calc(100vh - 96px));max-width:clamp(240px,34vw,440px)}

/* extra room so the sticky download bar never covers the closing CTA */
.ncplusai .final{padding-block:clamp(64px,11vw,160px);padding-bottom:calc(clamp(64px,11vw,160px) + 93px)}

.ncplusai .final-inner{gap:clamp(40px,6vw,72px)}

.ncplusai .final-brand{gap:clamp(24px,3.6vw,48px)}

.ncplusai .final-msg{gap:clamp(28px,3.6vw,48px)}

}

@media (max-width:1024px) {
/* Tablet is treated as a wide phone: every viewport-fluid token is pinned to
     the value it resolves to on a phone, so 621-1024px renders the mobile scale
     instead of interpolating up towards the desktop one. */
:root{
    --gutter:20px;
    --fs-h1:34px; --fs-h2:32px; --fs-h3:26px; --fs-h4:20px;
    --pad-top:64px; --pad-bottom:48px;
  }

.ncplusai .hero{padding-top:32px}

/* praktika stacks and centres the whole hero from tablet down, and keeps the
     phone large so the card crops it rather than shrinking it to fit */
.ncplusai .hero-card{
    flex-direction:column;align-items:center;gap:32px;
    border-radius:32px;
    text-align:center;
  }

.ncplusai .hero-card{padding:24px}

.ncplusai .hero-id{gap:24px}

.ncplusai .intro{padding-block:80px 0}

.ncplusai .hero-copy{align-items:center}

.ncplusai .hero-brand{justify-content:center}

.ncplusai .hero-brand .mark{width:48px;height:48px}

/* 134x32 wordmark scaled to a 28px cap height */
.ncplusai .hero-brand .word{width:117.25px;height:28px}

.ncplusai .hero h1{font-size:40px}

.ncplusai .hero-note{text-align:center}

.ncplusai .badges{justify-content:center}

/* the store buttons live in the closing CTA on small screens */
.ncplusai .hero-copy .badges{display:none}

/* ¥０ and ★4.8 on the first row, 410万人 centred underneath */
.ncplusai .stats{grid-template-columns:repeat(2,1fr);gap:16px}

.ncplusai .stat:nth-child(3){grid-column:1 / -1;justify-self:center}

/* Don't let the value block stretch (that would push the laurels out to the
     cell edges) but do let it shrink, so a narrow cell wraps the label instead
     of overflowing past the laurels. */
.ncplusai .stat{min-width:0}

.ncplusai .stat-body{flex:0 1 auto;width:auto;min-width:0;gap:2px}

/* the 64px laurels leave a narrow label column on phones, so even out the
     two lines instead of leaving one character stranded */
.ncplusai .stat-label,
.ncplusai .stat-label.nowrap{white-space:normal;text-wrap:balance}

/* The phone stays at 80% of its frame, so the frame keeps the same box
     ratio the bubbles' percentage positions were derived from on desktop.
     A negative bottom margin then makes the card stop short of the phone's
     foot, and the card's clip-path crops it — as it does on desktop. */
.ncplusai .hero-visual{
    width:min(420px,80%);margin-inline:auto;
    margin-bottom:-110px;
  }

.ncplusai .hero-phone{width:80%}

.ncplusai .bubble--green{font-size:17px}

.ncplusai .bubble--peach{font-size:15px}

.ncplusai .bubble--cream{font-size:17px;--wave-k:.78}

.ncplusai .stat-val{font-size:36px}

.ncplusai .stat-val .num{font-size:36px}

.ncplusai .stat-val .unit{font-size:26px}

.ncplusai .stat-val img{width:36px;height:36px}

.ncplusai .stat-label{font-size:14px}

/* the cell has 170px for laurel + gap + label(106px) + gap + laurel, so
     laurel width and the gap trade off against each other */
/* 34x72 desktop ratio held at the taller 64px */
.ncplusai .stat .laurel{width:30.22px;height:64px}

/* Scenes stop being scroll-driven here: the section becomes a normal block
     and the ＜ ＞ buttons move between screens. Flattening the copy wrappers
     with display:contents lets the phone, the nav row and the copy be
     reordered as siblings — phone, step label, then heading/body/CTA. */
.ncplusai .scene{height:auto !important}

.ncplusai .scene-sticky{position:static;height:auto;align-items:stretch;padding-block:var(--pad-top) var(--pad-bottom)}

.ncplusai .scene-row{align-items:stretch}

.ncplusai .scene-copy,
.ncplusai .scene-block{display:contents}

.ncplusai .scene-inner{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:32px;height:auto;max-width:none;
  }

.ncplusai .scene-head{order:1;gap:12px}

.ncplusai .scene-visual{
    order:2;
    width:100%;max-width:340px;margin-inline:auto;
    height:auto;flex:none;aspect-ratio:440 / 691;
  }

/* the screens slide in the direction the arrow points instead of rising
     from below. Keyframes rather than transitions so each entry starts from
     a defined offset without needing a forced reflow. */
.ncplusai .scene-visual img{
    left:50%;height:100%;width:auto;
    transform:translate(-50%,0);
    transition:none;
  }

.ncplusai .scene-visual img.is-on[data-enter="next"]{animation:slide-in-right .45s cubic-bezier(.22,.61,.36,1) both}

.ncplusai .scene-visual img.is-on[data-enter="prev"]{animation:slide-in-left  .45s cubic-bezier(.22,.61,.36,1) both}

.ncplusai .scene-visual img.is-out[data-exit="next"]{animation:slide-out-left  .45s cubic-bezier(.22,.61,.36,1) both}

.ncplusai .scene-visual img.is-out[data-exit="prev"]{animation:slide-out-right .45s cubic-bezier(.22,.61,.36,1) both}

.ncplusai .scene-nav{
    order:4;
    display:flex;align-items:center;justify-content:center;gap:16px;
  }

.ncplusai .scene-arrow{
    display:grid;place-items:center;flex:none;
    width:44px;height:44px;border-radius:999px;border:0;
    background:rgba(255,255,255,.1);color:var(--white);
    cursor:pointer;transition:background .18s ease, transform .18s ease;
  }

.ncplusai .scene-arrow:hover{background:rgba(255,255,255,.18)}

.ncplusai .scene-arrow:active{transform:scale(.94)}

.ncplusai .scene-arrow svg{width:24px;height:24px}

.ncplusai .scene-dots{display:flex;align-items:center;gap:8px}

.ncplusai .scene-dots i{
    width:8px;height:8px;border-radius:999px;
    background:rgba(255,255,255,.25);transition:background .25s ease;
  }

.ncplusai .scene-dots i.is-on{background:var(--orange)}

/* One step at a time on its own row. The 01/02 numbers are dropped here —
     the dot indicator in the nav row carries the position instead. */
.ncplusai .steps{order:3;flex-direction:row;justify-content:center;gap:0;min-width:0}

.ncplusai .step{display:none;opacity:1;gap:8px}

.ncplusai .step.is-on{display:block;font-size:24px;text-align:center}

.ncplusai .step-num{display:none}

.ncplusai .step-label{white-space:normal}

.ncplusai .scene-title{gap:6px}

.ncplusai .scene-title h2,
.ncplusai .scene-title p,
.ncplusai .scene-body{text-align:center}

.ncplusai .scene-title h2{font-size:32px}

.ncplusai .scene-title p{font-size:24px}

.ncplusai .scene-body{font-size:16px;line-height:1.9}

.ncplusai .scene-cta{order:5;text-align:center}

.ncplusai .scene-cta .btn{padding:16px 24px;font-size:16px}

.ncplusai .btn{width:100%}

.ncplusai .lede{font-size:16px}

.ncplusai .reviews{grid-template-columns:1fr 1fr;gap:20px}

.ncplusai .plans{grid-template-columns:1fr;gap:20px}

.ncplusai .faq-q{padding:24px;gap:16px;font-size:18px;line-height:1.7}

.ncplusai .faq-a p{padding:0 24px 24px;font-size:16px;line-height:2}

.ncplusai .final-icon{width:104px;height:104px;border-radius:24px}

.ncplusai .final-brand .word{width:130px;height:auto}

}

/* Everything below used to be phone-only. Tablet now shares it so the two
   render identically; only the <=359px column fallback is still narrower. */
@media (max-width:1024px) {
/* the hero card runs to the screen edge, the way praktika does */
.ncplusai .dl-bar{bottom:20px}

.ncplusai .hero > .wrap{padding-inline:0}

.ncplusai .hero-card{border-radius:32px}

.ncplusai .hero h1{font-size:38px;line-height:1.3}

/* 134x32 desktop ratio held at 24px tall */
.ncplusai .hero-brand .word{width:100.5px;height:24px}

.ncplusai .h2,
.ncplusai .intro h2,
.ncplusai .final h2{line-height:1.3}

.ncplusai .hero-visual{width:min(340px,94%);margin-bottom:-80px}

.ncplusai .bubble--cream{--wave-k:.6}

/* row-gap between the two rows, column-gap between ¥０ and ★4.8 */
.ncplusai .stats{gap:14px 18px}

.ncplusai .stat{gap:5px}

.ncplusai .stat-val{height:40px}

.ncplusai .stat-label{line-height:1.3}

/* only the narrowest phones still can't hold two columns */
@media (max-width:359px) {
.ncplusai .stats{grid-template-columns:1fr}

.ncplusai .stat:nth-child(3){grid-column:auto}

}

.ncplusai .badges{gap:12px}

.ncplusai .badges--cta{gap:16px;--badge-h:46px}

.ncplusai .bubble--cream{--wave-k:.58}

.ncplusai .rail{gap:20px;margin-top:40px}

.ncplusai .fcard{width:276px;border-radius:24px}

.ncplusai .fcard-body{padding:20px;gap:12px}

/* All six voices are here on a phone too, as a swipeable track: six stacked
     cards would push the pricing section far below the fold. The dots are an
     indicator, not a control — the track itself is the interaction. */
.ncplusai .reviews{
    /* The track runs the full width of the screen — it breaks out of the
       gutter and puts the difference back as padding — so the card that is
       showing sits in the middle of the window with an even peek of its
       neighbours either side. --card-w and the padding have to stay in step:
       (100vw - card) / 2 is what centres the first and last cards too. */
    --card-w:84vw;
    display:flex;grid-template-columns:none;margin-top:40px;gap:12px;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:calc((100vw - var(--card-w)) / 2);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
  }

.ncplusai .reviews::-webkit-scrollbar{display:none}

.ncplusai .review{flex:0 0 var(--card-w);scroll-snap-align:center;border-radius:24px}

.ncplusai .review h3{font-size:20px}

.ncplusai .review p{font-size:16px}

.ncplusai .reviews-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px}

.ncplusai .reviews-dots i{
    width:8px;height:8px;flex:none;border-radius:99px;
    background:rgba(255,255,255,.28);
    transition:width .2s ease,background .2s ease;
  }

.ncplusai .reviews-dots i.is-on{width:20px;background:var(--orange)}

.ncplusai .plans,
.ncplusai .faq{margin-top:40px}

.ncplusai .plan{border-radius:24px;padding:24px;gap:32px}

.ncplusai .plan-price b{font-size:36px}

.ncplusai .plan-list span{font-size:16px}

.ncplusai .plan-list img{width:32px;height:32px}

}

/* Tablet-only. The shared <=1024px rules give tablet the phone layout; these
   rules put the desktop type scale and the desktop hero art back on top of it,
   which the extra width can carry. Starts at 768px — the narrowest real tablet
   — because 48px display type and three trophies on one row do not fit the
   621-767px band, which keeps the phone scale instead. */
@media (min-width:768px) and (max-width:1024px) {
.ncplusai .hero{padding:32px 32px 0}

.ncplusai .hero-card{padding:32px;gap:56px;border-radius:40px}

.ncplusai .hero-lock{gap:clamp(32px,3.6vw,48px)}

.ncplusai .hero-id{gap:32px}

.ncplusai .hero-brand .mark{width:56px;height:56px}

/* 134x32 — the desktop wordmark at full size */
.ncplusai .hero-brand .word{width:134px;height:32px}

.ncplusai .hero h1{font-size:48px}

.ncplusai .br-tb{display:inline}

/* all three trophies on one row again */
.ncplusai .stats{grid-template-columns:repeat(3,1fr)}

.ncplusai .stat:nth-child(3){grid-column:auto;justify-self:auto}

.ncplusai .stat-val{font-size:40px}

.ncplusai .stat-val .num{font-size:40px}

.ncplusai .stat-val .unit{font-size:32px}

.ncplusai .stat-val img{width:40px;height:40px}

.ncplusai .stat-label{font-size:16px}

/* 34x72 — the desktop laurel at full size */
.ncplusai .stat .laurel{width:34px;height:72px}

/* The phone fills its frame here, where on desktop it is 380 of a 480 frame.
     The bubbles are placed by their centre as a share of that frame, so their
     left positions are remapped onto the narrower box — (old% * 480 - 50) / 380
     — to keep them sitting on the phone exactly as they do on desktop. Their
     size and padding go back to the desktop values. */
.ncplusai .hero-phone{width:100%}

.ncplusai .bubble{border-radius:24px}

.ncplusai .bubble--green{left:7.28%;padding:14px 18px;font-size:22px}

.ncplusai .bubble--peach{left:86.52%;padding:16px 18px;font-size:20px}

.ncplusai .bubble--cream{left:23.8%;padding:16px 18px;font-size:22px;gap:11px;--wave-k:1}

.ncplusai .wave{gap:4px}

.ncplusai .wave i{width:4px}

.ncplusai .intro h2{font-size:48px}

/* the scene column is narrowed and centred (.scene-row already centres
     itself), and its type steps up to suit the wider screen */
.ncplusai .scene-row{width:80%}

.ncplusai .scene-title h2{font-size:40px}

.ncplusai .scene-title p{font-size:32px}

.ncplusai .scene-visual{max-width:420px}

.ncplusai .step.is-on{font-size:32px}

.ncplusai .scene-cta .btn{padding:18px 24px;font-size:18px}

.ncplusai .intro{padding-block:100px 0}

.ncplusai .h2{font-size:48px}

.ncplusai .section{padding-block:80px 64px}

.ncplusai .scene-sticky{padding-block:80px 64px}

.ncplusai .scene-inner{gap:40px}

.ncplusai .scene-head{gap:16px}

.ncplusai .scene-title{gap:10px}

.ncplusai .scene-title h2{font-size:44px}

/* 44px fits AIスピーキングトレーニング on one line at this width */
.ncplusai .br-speak{display:none}

.ncplusai .hero-visual{width:min(360px,94%);margin-bottom:-110px}

.ncplusai .scene-body{font-size:18px}

.ncplusai .lede{font-size:18px}

.ncplusai .wrap{padding-inline:32px}

/* The rail is inside .wrap, so its own right edge used to clip the last card
     32px short of the screen. Bleed it back out over the wrap padding and put
     that padding inside the scroller instead, so cards run to the edge while
     the first one still lines up with the rest of the page. */
.ncplusai .rail{margin-inline:-32px;padding-inline:32px;scroll-padding-inline-start:32px}

.ncplusai .fcard{width:296px;border-radius:32px}

.ncplusai .fcard-body{padding:24px}

/* the extra width takes two per row, so the carousel is not needed */
.ncplusai .reviews{
    display:grid;grid-template-columns:1fr 1fr;gap:20px;overflow:visible;
    margin-inline:0;padding-inline:0;
  }

.ncplusai .review{flex:none;border-radius:32px;padding:32px}

.ncplusai .reviews-dots{display:none}

.ncplusai .plans{grid-template-columns:1fr 1fr}

.ncplusai .plan{border-radius:32px;padding:32px}

.ncplusai .plan-price b{font-size:48px}

.ncplusai .plan-list span{font-size:18px}

.ncplusai .plan-cta{padding:16px 24px;font-size:18px}

.ncplusai .faq{border-radius:32px}

.ncplusai .faq-q{padding:32px;font-size:22px}

.ncplusai .faq-q .plus{width:32px;height:32px}

.ncplusai .faq-a p{font-size:18px}

/* the closing CTA carries the only store buttons here, so it is scaled up */
.ncplusai .badges--cta{gap:24px;--badge-h:60px}

.ncplusai .final-brand{gap:40px}

.ncplusai .final-brand .word{width:200px;height:48px}

.ncplusai .final-icon{width:180px;height:180px;border-radius:40px}

.ncplusai .final-msg{gap:40px}

.ncplusai .final h2{font-size:48px}

.ncplusai .dl-bar a{padding:18px 24px;font-size:20px}

.ncplusai .dl-bar img{width:32px;height:32px}

}

/* Phone-only trims. Everything above is shared with tablet; these few sizes
   come down further because a 375px card can't carry the tablet scale. */
@media (max-width:620px) {
.ncplusai .hero h1{font-size:36px}

.ncplusai .stat-val{font-size:32px}

.ncplusai .stat-val .num{font-size:32px}

.ncplusai .stat-val .unit{font-size:24px}

/* 34x72 desktop ratio held at 60px tall */
.ncplusai .stat .laurel{width:28.33px;height:60px}

.ncplusai .scene-visual{width:80%}

.ncplusai .dl-bar a{padding:14px 24px;font-size:16px}

}

/* On the scroll-driven desktop layout, reduced motion shows every screen at
   once instead of animating between them. Small screens already have explicit
   ＜ ＞ controls, so they keep the carousel. */
@media (prefers-reduced-motion:reduce) and (min-width:1025px) {
.ncplusai .scene{height:auto !important}

.ncplusai .scene-sticky{position:static;height:auto;padding-block:clamp(48px,8vw,80px)}

.ncplusai .scene-row{align-items:center}

.ncplusai .scene-inner{flex-direction:column;align-items:stretch;gap:40px;height:auto;max-width:1062px}

.ncplusai .scene-copy{flex:none}

.ncplusai .step{opacity:1 !important;font-size:20px !important}

.ncplusai .scene-visual{
    position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
    width:100%;max-width:none;height:auto;aspect-ratio:auto;
  }

.ncplusai .scene-visual img{
    position:static;opacity:1 !important;transform:none !important;
    width:100%;height:auto;max-width:100%;
  }

}

@media (prefers-reduced-motion:reduce) {
.ncplusai *{animation-duration:.001ms !important;transition-duration:.001ms !important}

.js-anim .ncplusai .reveal{opacity:1 !important;transform:none !important}

.ncplusai .wave i{animation:none}

.ncplusai .btn:hover,
.ncplusai .plan-cta:hover,
.ncplusai .qr-card:hover{transform:none}

}