@charset "UTF-8";
/* =====================================================================
   UTILITIES — layout container, small helpers, motion and print rules.
   Loaded last so it can win where it needs to.
   ===================================================================== */

/* The page's one horizontal alignment system (Phase 5.8D consolidated the
   widths into tokens.css). `.container` is the WIDE edge every section shell
   uses; the two modifiers below are the narrower measures, so a section never
   invents its own max-width.

   Full-bleed backgrounds stay full-bleed — only foreground content is bound
   here, which is what keeps every section's inner content on the same left and
   right lines. */
.container {
  width: min(100% - (var(--page-gutter) * 2), var(--content-wide));
  margin-inline: auto;
}
/* Centred running copy (hero message, section leads). Narrower than the wide
   edge on purpose: Japanese body copy set across 1160px is uncomfortable. */
.container--copy { width: min(100% - (var(--page-gutter) * 2), var(--content-copy)); }
/* Single-column blocks and capped CTA groups. */
.container--narrow { width: min(100% - (var(--page-gutter) * 2), var(--content-narrow)); }
/* Phase 6.0: the blog's reading column. Same rail, same gutters — a narrower
   measure inside them, so an article never spans the full 1160px card rail. */
.container--read { width: min(100% - (var(--page-gutter) * 2), var(--content-read)); }

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bright pachinko display text — Phase 4.1.
   This is the ONLY place the headline accent is coloured. Three things that
   made it read as dark bronze in Phase 4 were removed here rather than
   overridden elsewhere:

     1. the closing stop was #ffa61a (orange). With a near-vertical ramp on tall
        CJK glyphs, the bottom half of every character went orange;
     2. the span carried its own `text-shadow: 0 1px 0 rgba(74,26,0,.55)` — a
        brown edge under every stroke, which antialiasing smeared into the
        glyph. It now inherits `.hero__title`'s neutral black shadow, so the
        accent and the lead text are lit identically;
     3. `display: inline-block` here fought `display: inline` in sections.css.
        The span is plain inline; the competing pair is gone.

   Every stop is a yellow. Nothing below is allowed to tint the glyph. */
.grad-gold {
  /* Solid fill, both properties set: `color` alone is ignored by WebKit once
     any ancestor has ever set -webkit-text-fill-color, so the pair is what
     actually guarantees the yellow. No background-clip, no gradient, no
     blend layer, no pseudo-element over the text — the glyph interior is one
     saturated colour at every size. */
  color: var(--pachi-headline-yellow);
  -webkit-text-fill-color: var(--pachi-headline-yellow);
  /* Overrides the H1's heavier black bevel for this span only: a tight deep
     plum edge for contrast against the purple hero, plus a faint warm glow.
     Neither is dark enough or large enough to tint the fill. */
  text-shadow:
    0 2px 0 rgba(38, 0, 52, .55),
    0 0 18px rgba(255, 205, 40, .30);
}
/* Selection must stay legible: invert to plum-on-yellow rather than leaving a
   fill colour that the highlight cannot override. */
.grad-gold::selection,
.grad-gold ::selection {
  color: #2a0038;
  -webkit-text-fill-color: #2a0038;
  background: var(--pachi-headline-yellow);
  text-shadow: none;
}

@media (forced-colors: active) {
  .grad-gold {
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
    text-shadow: none;
  }
}

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .fx--sparkles::after { opacity: .7; }
}

/* ---------------------------------------------------------------------
   Print
   --------------------------------------------------------------------- */
@media print {
  .td-header,
  .fx { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .license__inner,
  .faq__list,
  .feature-card,
  .step { break-inside: avoid; }
}

/* =====================================================================
   JAPANESE DISPLAY TYPOGRAPHY — Phase 5.2

   Six reusable variants. Every campaign heading picks one of these instead of
   inventing its own stack of shadows, so the page has a consistent voice and
   "make the headings calmer" is one edit rather than nine.

   All of them are real HTML text: selectable, translatable, searchable and
   readable by a screen reader. Nothing here duplicates semantic content into a
   pseudo-element, and nothing is baked into an image.
   ===================================================================== */

/* The impact face. Used for the H1 and the loudest section headings. */
.display-impact {
  font-family: 'Dela Gothic One', var(--font-jp);
  font-weight: 400;              /* the face has one weight; 900 would synthesise */
  line-height: 1.28;
  letter-spacing: .01em;
  text-wrap: balance;
}

/* The playful face. Section headings that should feel friendly, not shouty. */
.display-pop {
  font-family: 'RocknRoll One', var(--font-jp);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: .015em;
  text-wrap: balance;
}

/* Numbers that must read instantly: the account count, the step numerals. */
.display-number {
  font-family: 'Dela Gothic One', var(--font-jp);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1.15;
}

/* A short angled label plate — "ribbon" without an image. */
.display-ribbon {
  display: inline-block;
  padding: 4px 14px;
  font-family: 'RocknRoll One', var(--font-jp);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-plum);
  background: linear-gradient(180deg, var(--pachi-yellow), var(--pachi-orange));
  border-radius: 4px;
  transform: rotate(-1.6deg);
  box-shadow: 0 2px 0 rgba(28, 16, 36, .28);
}

/* Small all-caps-ish kicker above a heading. */
.display-kicker {
  font-family: 'RocknRoll One', var(--font-jp);
  font-size: .74rem;
  letter-spacing: .12em;
  line-height: 1.5;
}

/* Deliberately undecorated: FAQ, legal, long explanatory copy. */
.display-calm {
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
}

/* --- Text treatments ---------------------------------------------------- */

/* Solid bright yellow with a deep-plum edge. Used for the H1 accent and the
   loudest headings on a dark ground. `paint-order` puts the stroke behind the
   fill so the glyph never thins out. */
.tx-yellow {
  color: var(--pachi-yellow);
  -webkit-text-fill-color: var(--pachi-yellow);
  -webkit-text-stroke: 1px rgba(38, 0, 52, .55);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(38, 0, 52, .5), 0 0 22px rgba(255, 159, 28, .34);
}
/* White on a bright ground, same construction. */
.tx-white {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 1px rgba(38, 0, 52, .38);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(38, 0, 52, .38);
}
/* Dark text on a light section — no stroke, no shadow; it needs neither. */
.tx-dark { color: var(--text-plum); }

/* A short highlight plate behind a phrase. */
.tx-plate {
  padding: 2px 10px;
  border-radius: 5px;
  background: var(--pachi-yellow);
  color: var(--text-plum);
  -webkit-text-fill-color: var(--text-plum);
  -webkit-text-stroke: 0;
  text-shadow: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (forced-colors: active) {
  .tx-yellow, .tx-white, .tx-dark, .tx-plate {
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
    color: CanvasText;
    background: Canvas;
    text-shadow: none;
  }
}

/* =====================================================================
   PREVIEW MARKERS — only ever rendered by a preview build.
   ===================================================================== */
.preview-banner {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 8px 14px;
  background: repeating-linear-gradient(-45deg, #ffe33d 0 14px, #1c1024 14px 28px);
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .8);
}
.preview-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  background: #1c1024;
  color: var(--pachi-yellow);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .06em;
  vertical-align: 1px;
}
.preview-tag--block {
  display: inline-block;
  margin: 8px 0 0;
  font-size: .68rem;
}

/* =====================================================================
   PHASE 5.3 TEXT TREATMENTS

   Two additions to the Phase 5.2 system. Both are real HTML text with a
   solid-colour fallback and a forced-colours escape.
   ===================================================================== */

/* B. Pink outlined impact — white core, hot-pink stroke, magenta shadow.
   Used for energetic campaign headings on bright grounds. Never body copy. */
.tx-outline-pink {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 2px var(--campaign-magenta);
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 #a3106a,
    0 0 18px rgba(236, 43, 145, .45);
}
@media (max-width: 389px) { .tx-outline-pink { -webkit-text-stroke-width: 1.5px; } }

/* A. Bright gold impact — yellow core, warm lower edge, deep-plum outline and
   a compact lower-right shadow. Deliberately NOT background-clip: on thin CJK
   strokes that produced the muddy bronze this project rejected twice. */
.tx-gold {
  color: var(--pachi-yellow);
  -webkit-text-fill-color: var(--pachi-yellow);
  -webkit-text-stroke: 1.5px #2a0038;
  paint-order: stroke fill;
  text-shadow:
    1px 2px 0 #b8730a,
    0 0 20px rgba(255, 159, 28, .40),
    0 0 30px rgba(236, 43, 145, .22);
}
@media (max-width: 389px) { .tx-gold { -webkit-text-stroke-width: 1px; } }

@media (forced-colors: active) {
  .tx-outline-pink, .tx-gold {
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }
}
.tx-outline-pink::selection, .tx-gold::selection,
.tx-outline-pink ::selection, .tx-gold ::selection {
  color: #2a0038;
  -webkit-text-fill-color: #2a0038;
  -webkit-text-stroke: 0;
  background: var(--pachi-yellow);
  text-shadow: none;
}

/* D. Pink campaign ribbon — CSS only, notched ends, subtle diagonal stripes. */
.ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 26px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #ff4fa3, var(--campaign-magenta));
  box-shadow: 0 4px 0 #a3106a;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.ribbon__bulb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffbe0, var(--pachi-yellow) 55%, #e8a200);
  box-shadow: 0 0 8px rgba(255, 227, 61, .9);
  flex: none;
}
.ribbon__text { font-size: clamp(1rem, 4.35vw, 1.54rem); }

/* E. Campaign callout above the gameplay media.
   Phase 5.8E: horizontal and in normal flow at EVERY width. It used to rotate
   upright and position absolutely from 768px, which only made sense beside the
   old desktop side-by-side scene; with the mobile composition now canonical it
   sits centred above the media the way it always did on a phone. */
.vcallout {
  position: static;
  z-index: 3;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  margin: 0 auto 10px;
  text-align: center;
  font-family: 'RocknRoll One', var(--font-jp);
  font-size: clamp(.9rem, 2.4vw, 1.15rem);
  letter-spacing: .18em;
  line-height: 1.2;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--campaign-magenta);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #a3106a;
  pointer-events: none;
}
/* Letter-spacing is the only thing that still varies by width. */
.vcallout { letter-spacing: .04em; }

/* F. Proof circles — short approved facts as pachinko-style medallions. */
.proof-circles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.proof-circle {
  display: grid;
  place-content: center;
  /* Phase 5.8I: -13% (was clamp(78px, 22vw, 96px)). */
  width: clamp(68px, 19vw, 83px);
  aspect-ratio: 1;
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle at 34% 26%, #fff, #ffe9a8 42%, var(--pachi-yellow) 78%, var(--pachi-orange));
  border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(38, 0, 52, .35), 0 0 18px rgba(255, 227, 61, .5);
}
.proof-circle__text {
  font-family: 'RocknRoll One', var(--font-jp);
  font-size: clamp(.68rem, 2.8vw, .8rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-plum);
  padding: 0 6px;
}
@media (forced-colors: active) {
  .proof-circle { background: Canvas; border-color: CanvasText; }
  .proof-circle__text { color: CanvasText; }
}