/* =====================================================
   app.css — App introduction page styles
   Loaded after base.css + layout.css. Mockup-first layout:
   each feature is presented as an alternating image / text
   row featuring a realistic UI replica of the app.

   Sections:
     1. .app-hero                 — split hero (text + featured mockup)
     2. .section-app-audience     — student / parent feature blocks
     3. .app-row                  — alternating image/text feature row
     4. .app-mockup               — wrapper around an embedded UI mockup
     5. .section-app-summary      — closing pitch before the CTA
     6. .section-cta              — bottom CTA mirror for partials/cta.php
   ===================================================== */

/* ---------------------------------------------------------------------
   Shared "title-em" recipe — gold SVG underline behind <em> accents.
--------------------------------------------------------------------- */
.app-hero-headline-em,
.app-audience-title-em,
.app-summary-title-em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
.app-hero-headline-em::after,
.app-audience-title-em::after,
.app-summary-title-em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   App-UI mockup base styles
   The embedded mockups are 1:1 replicas of the production app, which
   ships its own design system: cream `#FBF8F4` canvas, coral `#ED6332`
   accent, Inter + Noto Sans JP fonts, Caveat brand wordmark. These
   rules apply *inside* `.jse-mock` only, so the marketing chrome
   surrounding the mockups keeps the site's existing brand palette.
--------------------------------------------------------------------- */
.jse-mock {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1F1A14;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
.jse-mock .jp,
.jse-mock [lang="ja"] {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  letter-spacing: 0;
}
.jse-mock .brand {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: #D14A1B;
  letter-spacing: -0.01em;
  line-height: 1;
}
.jse-mock .jse-num {
  font-variant-numeric: tabular-nums;
}

/* =====================
   1. APP HERO — Split layout: editorial text + featured app mockup
   The mockup occupies the right column on desktop and gives the
   visitor an instant "this is a real app" cue. On mobile it
   stacks under the text and scales down.
   ===================== */
.app-hero {
  position: relative;
  /* No overflow clipping: the radial halo behind the mockup is
     intentionally allowed to bleed slightly past the hero's bottom
     edge into the white section below, so the section transition
     reads as a continuous wash rather than a hard horizontal seam.
     The dotted pattern and bottom fade are positioned with
     `inset: 0` / anchored bottom, so they stay inside the hero
     without needing overflow:hidden. */
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 80vh, 740px);
  padding: calc(var(--header-h) + var(--sp-xl)) 0 var(--sp-xl);
  background-color: var(--bg-cream);
}
.app-hero::before {
  /* Full-bleed atmospheric layer: warm coral + gold halo stacked on
     top of the original dotted texture. Positioned on the hero (not
     the right-column visual), so the halo spans the entire viewport
     width and is not clipped by the 1080px container or by the grid
     column the mockup lives in. The dot alpha already includes the
     previous 0.55 opacity factor (10% × 55% ≈ 5.5%) so the texture
     looks the same as before without needing an `opacity` rule that
     would also dim the halo. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Coral halo, anchored to the right half where the mockup sits */
    radial-gradient(
      ellipse 60% 80% at 70% 50%,
      rgba(237, 99, 50, 0.22) 0%,
      rgba(237, 99, 50, 0.07) 38%,
      transparent 75%
    ),
    /* Gold accent lower-right for warmth and depth */
    radial-gradient(
      ellipse 50% 60% at 88% 78%,
      rgba(245, 158, 11, 0.18) 0%,
      rgba(245, 158, 11, 0.05) 42%,
      transparent 80%
    ),
    /* Subtle dotted texture across the whole hero */
    radial-gradient(circle, rgba(0, 174, 239, 0.055) 1px, transparent 1.2px);
  background-size: auto, auto, 28px 28px;
  background-repeat: no-repeat, no-repeat, repeat;
  pointer-events: none;
  z-index: 0;
}
.app-hero::after {
  /* Soft fade from the hero's cream into the white student section
     below, so the section boundary doesn't read as a hard horizontal
     seam. The fade has to land on WHITE (next section's bg), not
     cream — using cream here just darkens the hero bottom and makes
     the seam more visible. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent 0%, #ffffff 100%);
  pointer-events: none;
  z-index: 0;
}
.app-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-2xl);
  align-items: center;
}

.app-hero-text { max-width: 540px; }

.app-hero-breadcrumb { margin: 0 0 1.25rem; display: flex; }
.app-hero-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}
.app-hero-breadcrumb-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.app-hero-breadcrumb-item + .app-hero-breadcrumb-item::before {
  content: '/';
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1;
}
.app-hero-breadcrumb-link {
  color: var(--text-light);
  transition: color var(--transition);
}
.app-hero-breadcrumb-link:hover { opacity: 1; color: var(--primary); }
.app-hero-breadcrumb-current {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: var(--text-main);
}

.app-hero-eyebrow {
  display: block;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.85rem;
}
.app-hero-headline {
  font-size: clamp(1.95rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.42;
  color: var(--text-main);
  margin: 0 0 1.25rem;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.app-hero-headline-em { color: var(--primary); }
/* On narrow phones, force a grammatical break BEFORE the gold-underlined
   phrase so "を、" stays glued to "すべての学習" instead of getting
   orphaned alone on its own line when the text wraps to fit. */
.app-hero-headline-break-mobile { display: none; }
@media (max-width: 520px) {
  .app-hero-headline-break-mobile { display: inline; }
}
.app-hero-sub {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.95;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.app-hero-sub em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
  position: relative;
  padding: 0 0.1em;
  z-index: 0;
}
.app-hero-sub em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.3em;
  background: rgba(245, 158, 11, 0.22);
  z-index: -1;
}


/* Hero mockup column — single featured mockup with a soft glow backdrop */
.app-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.app-hero-visual .app-mockup {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
}

@media (max-width: 1023px) {
  .app-hero-inner { gap: var(--sp-xl); }
  .app-hero-visual .app-mockup { width: min(360px, 100%); }
}
@media (max-width: 767px) {
  .app-hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + var(--sp-md));
    padding-bottom: var(--sp-lg);
  }
  .app-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    text-align: center;
  }
  .app-hero-text { max-width: 100%; margin: 0 auto; }
  .app-hero-breadcrumb { justify-content: center; }
  .app-hero-headline { font-size: clamp(1.6rem, 5.5vw, 2.1rem); }
}

/* =====================
   2. AUDIENCE SECTION — Header + list of alternating feature rows
   ===================== */
.section-app-audience {
  position: relative;
  overflow: hidden;
}
.section-app-audience.section-alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(245, 158, 11, 0.08) 1px, transparent 1.2px);
  background-size: 28px 28px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.section-app-audience > .container {
  position: relative;
  z-index: 1;
}
.app-audience-header {
  max-width: 720px;
  margin: 0 auto 4rem;
}
.app-audience-title {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}
.app-audience-desc {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.95;
  margin: 0;
}
.app-audience-desc em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
}
.app-audience-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.65rem;
}
.app-audience-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.app-audience-tag.parent { color: var(--accent); }

/* =====================
   3. APP ROW — Alternating image + text feature row
   Default: image on the LEFT, text on the RIGHT.
   Every even row reverses so the eye zig-zags down the page,
   keeping the rhythm engaging across many features.
   ===================== */
.app-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1080px;
  margin-inline: auto;
}
.app-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-bottom: 1px dashed var(--border-warm);
}
.app-row:last-child { border-bottom: 0; }

/* Alternate: every even row puts the visual on the right */
.app-row:nth-child(even) .app-row-visual { order: 2; }
.app-row:nth-child(even) .app-row-text    { order: 1; }

.app-row-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0;
  min-width: 0;
}
.app-row-visual::before {
  /* Soft radial glow behind the mockup. Both blocks use warm tones so
     the app's cream-and-coral UI sits in a sympathetic halo — gold for
     students, slightly more coral-saturated for parents. */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 158, 11, 0.13) 0%,
    rgba(245, 158, 11, 0.04) 35%,
    transparent 65%
  );
  z-index: 0;
  pointer-events: none;
}
.section-app-audience--parent .app-row-visual::before {
  background: radial-gradient(
    ellipse at center,
    rgba(237, 99, 50, 0.14) 0%,
    rgba(237, 99, 50, 0.05) 35%,
    transparent 65%
  );
}

.app-mockup {
  position: relative;
  z-index: 1;
  width: 100%;
  /* The embedded mockups carry their own inline max-width (560–640px).
     The wrapper just needs to allow that without imposing a tighter cap. */
  max-width: 640px;
}
.app-mockup::after {
  /* Invisible interaction shield. The mockups are visual showcases of
     the app UI, not working components — they should not respond to
     clicks, taps, or hover. This pseudo-element sits on top of the
     mockup and intercepts every pointer event before it reaches the
     buttons, links, and form fields inside. Combined with the `inert`
     attribute on each `.app-mockup` wrapper in the PHP markup, keyboard
     focus is also blocked, so Tab cannot land inside the mockup either. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* The text column — editorial: oversize handwritten number,
   EN eyebrow, bold title, body copy with gold-highlighted ems. */
.app-row-text { max-width: 460px; min-width: 0; }
.app-row-num {
  display: block;
  font-family: var(--font-deco);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 0.85;
  color: var(--accent);
  margin: 0 0 0.85rem;
  letter-spacing: 0;
  transform: rotate(-4deg);
  transform-origin: left center;
}
.section-app-audience--parent .app-row-num { color: var(--primary); }
.app-row-eyebrow {
  display: block;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.55rem;
}
.section-app-audience--parent .app-row-eyebrow { color: var(--accent); }

.app-row-title {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--text-main);
  margin: 0 0 0.85rem;
}
.app-row-body {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.95;
  margin: 0;
}
.app-row-body em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
  position: relative;
  padding: 0 0.1em;
  z-index: 0;
}
.app-row-body em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.3em;
  background: rgba(245, 158, 11, 0.22);
  z-index: -1;
}

@media (max-width: 880px) {
  /* Stack each row: mockup on top, text below. Disable the alternation
     re-ordering so every stacked row has the same visual-first sequence. */
  .app-row {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: clamp(2.5rem, 6vw, 3.5rem) 0;
    text-align: center;
  }
  .app-row-text   { order: 1; }
  .app-row-visual { order: 2; }
  .app-row:nth-child(even) .app-row-text    { order: 1; }
  .app-row:nth-child(even) .app-row-visual  { order: 2; }
  .app-row-text {
    max-width: 540px;
    margin: 0 auto;
  }
  .app-row-num {
    transform: rotate(-4deg);
    display: inline-block;
  }
  .app-row-eyebrow,
  .app-row-num { margin-left: auto; margin-right: auto; }
  .app-row-body em::after { display: none; }
  .app-row-body em { background: rgba(245, 158, 11, 0.22); border-radius: 2px; }
}
@media (max-width: 520px) {
  .app-row-num { font-size: 2.8rem; }
}

/* ============================================================
   Mockup mobile optimization
   ------------------------------------------------------------
   On narrow viewports the embedded mockups need both more
   horizontal room AND, on the narrowest phones, uniform scaling
   so their internal grids/tables don't squeeze text into
   awkward wraps.

   Strategy:
     1. ≤600px — let the mockup use 100% of the row's available
        width, and override the inline `max-width: 520–640px`
        caps on the inner `.jse-mock` so it grows to fill the
        wrapper (no centered "card on cream" with empty sides).
     2. ≤480px — apply CSS `zoom` to shrink the entire mockup
        uniformly. This scales text, padding, borders, and gaps
        together, preserving the desktop proportions. Text stays
        in the readable 11–18px range.
     3. ≤380px — a slightly stronger zoom for very narrow
        phones (iPhone SE width).

   `zoom` is supported in all modern browsers (Firefox shipped
   it in v126 / May 2024) and, unlike `transform: scale`, it
   updates the layout box size so the scaled mockup reserves
   the correct vertical space in the row.
   ============================================================ */
@media (max-width: 600px) {
  .app-mockup { max-width: 100%; }
  .app-mockup .jse-mock {
    max-width: 100% !important;
    width: 100%;
  }
  /* The hero mockup keeps its own narrower cap so it doesn't
     dominate the stacked hero layout on phones. */
  .app-hero-visual .app-mockup { max-width: 380px; }
}
@media (max-width: 480px) {
  .app-mockup .jse-mock { zoom: 0.92; }
}
@media (max-width: 380px) {
  .app-mockup .jse-mock { zoom: 0.82; }
}

/* =====================
   4. APP SUMMARY — Editorial pitch before the bottom CTA
   ===================== */
.section-app-summary {
  background: var(--bg-white);
  position: relative;
}
.app-summary-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.app-summary-tag {
  display: block;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.app-summary-title {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  line-height: 1.5;
  margin: 0 0 1.2rem;
}
.app-summary-text {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.95;
  margin: 0 auto;
  max-width: 620px;
}
.app-summary-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
}

/* =====================
   5. BOTTOM CTA — Mirrored from home.css for partials/cta.php.
   ===================== */
.section-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-cream);
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 56vh, 560px);
  padding: clamp(var(--sp-xl), 8vw, var(--sp-2xl)) 0;
}
.cta-visual { position: absolute; inset: 0; z-index: 0; }
.cta-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 50%;
  display: block;
}
.cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(250, 247, 243, 0.96) 0%,
      rgba(250, 247, 243, 0.92) 30%,
      rgba(250, 247, 243, 0.78) 46%,
      rgba(250, 247, 243, 0.35) 62%,
      rgba(250, 247, 243, 0)    80%
    );
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 2; width: 100%; }
.cta-content { max-width: min(540px, 50%); }
.cta-header { position: relative; z-index: 1; margin: 0 0 1.75rem; }
.cta-title {
  font-size: clamp(1.55rem, 1.55vw + 1.1rem, 2.25rem);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.cta-title-em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
.cta-title-em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.cta-title-break { display: inline; }
.cta-header-desc {
  font-size: clamp(0.86rem, 0.35vw + 0.78rem, 1rem);
  color: var(--text-light);
  line-height: 1.95;
  margin-top: 1.1rem;
}
.cta-header-desc em { font-style: normal; font-weight: 700; color: var(--text-main); }
.cta-header-desc sup { font-size: 0.6em; vertical-align: super; }
.cta-header-break { display: inline; }
.cta-body { position: relative; z-index: 1; }
.cta-action { margin: 0 0 1.25rem; }
.cta-btn:hover { transform: none; }
.cta-btn-arrow { display: inline-block; margin-left: 0.35em; transition: transform var(--transition); }
.cta-btn:hover .cta-btn-arrow { transform: translateX(4px); }
.cta-btn-note {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
}
.cta-checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.cta-checks li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
}
.cta-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 174, 239, 0.12);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.cta-alt { font-size: 0.86rem; color: var(--text-muted); margin: 1.85rem 0 0; }
.cta-alt-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary);
  padding-bottom: 2px;
}
.cta-alt-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.cta-alt-link:hover { opacity: 1; }
.cta-alt-link:hover::after { transform: scaleX(1); }
.cta-alt-arrow { display: inline-block; margin-left: 0.35em; transition: transform var(--transition); }
.cta-alt-link:hover .cta-alt-arrow { transform: translateX(4px); }

@media (max-width: 1023px) {
  .cta-img { object-position: 86% 50%; }
  .cta-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 0.97) 0%,
        rgba(250, 247, 243, 0.93) 38%,
        rgba(250, 247, 243, 0.70) 58%,
        rgba(250, 247, 243, 0.25) 82%,
        rgba(250, 247, 243, 0)    100%
      );
  }
  .section-cta { min-height: clamp(400px, 50vh, 520px); }
  .cta-content { max-width: min(460px, 60%); }
}
@media (max-width: 767px) {
  .cta-img { object-position: 70% 92%; }
  .cta-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(250, 247, 243, 0.96) 0%,
        rgba(250, 247, 243, 0.90) 50%,
        rgba(250, 247, 243, 0.55) 100%
      );
  }
  .section-cta {
    min-height: auto;
    padding: var(--sp-xl) 0;
    align-items: stretch;
  }
  .cta-content { max-width: 100%; }
  .cta-header { margin-bottom: 1.5rem; }
}
@media (max-width: 520px) {
  .cta-header-break { display: none; }
  .cta-btn { width: 100%; }
  .cta-btn-note { font-size: 0.74rem; }
  .cta-checks { gap: 0.4rem 0.95rem; margin-top: 1rem; }
  .cta-checks li { font-size: 0.75rem; }
  .cta-alt { margin-top: 1.5rem; }
}

/* ---------------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cta-btn-arrow,
  .cta-alt-arrow { transition: none; }
}