/* ============================================================
   cards.css — store-canvas + LP shared styles
   ============================================================

   This file contains EVERY rule that styles store cards. Both
   `store-canvas.html` (single-card image generator for the
   PNG export pipeline) and `lp-en.html` (multi-card landing page)
   link it. The shared element is `.tt-canvas` — a fixed-pixel
   container whose internal cards use `cqw` units to scale.

   What's NOT in this file (page-specific):
   - `body` baseline (LP scrolls, store-canvas centers a single canvas)
   - Reset (`* { box-sizing: border-box }`) — each page declares
   - Font @import — each page imports
   - Page chrome (LP header/footer; store-canvas's #canvas wrapper rules)

   When this file changes, both pages get the change with zero
   duplication. Adding a new card type means adding rules here
   + a renderer in `cards.js`.
   ============================================================ */

/* ============================================================
   CANVAS — fixed-pixel container with container-type so child
   cqw units resolve against canvas width, not the viewport.
   Was `#canvas` (id) in store-canvas; now `.tt-canvas` (class)
   so LP can have multiple instances (1 per card).
   ============================================================ */
.tt-canvas {
  background: #ffffff;
  position: relative;
  overflow: hidden;
  display: none;
  container-type: inline-size;
}
body.device-iphone-67 .tt-canvas { width: 1290px; height: 2796px; }
body.device-ipad-129  .tt-canvas { width: 2048px; height: 2732px; }
body.device-android-phone .tt-canvas { width: 1080px; height: 1920px; }
/* OG/social-share canvases (landscape 1.91:1 + square). NOT used by the
   store/LP card deck — only the dedicated card-og-hero (see cards.js
   `og` entry + tool/generate_og.js). 1.91:1 is the Open Graph / Twitter
   summary_large_image ratio; the square serves LINE/Discord mobile previews. */
body.device-og        .tt-canvas { width: 1200px; height: 630px; }
body.device-og-square .tt-canvas { width: 1080px; height: 1080px; }
/* Card classes apply display:flex/grid on the canvas directly. Specificity
   (0,1,1,0) beats the default `.tt-canvas { display: none }` (0,0,1,0).
   Grid for cards whose layout pins element Y-centers (uniform, cert).
   Flex for the rest (hero / infographic / cta) — those use stacked
   flex-column or absolute positioning and the .card-* rules below
   declare their own flex-direction etc. */
.tt-canvas.card-uniform,
.tt-canvas.card-cert,
.tt-canvas.card-og-hero { display: grid; }
.tt-canvas.card-infographic,
.tt-canvas.card-hero,
.tt-canvas.card-cta { display: flex; }

.accent-color { color: #FF6B1A; }

/* ============================================================
   HERO CARD — bespoke first-impression card (card1 only).
   Density-over-minimalism: brand + huge 3-line stacked headline +
   function subhead + quantified value prop + CTA hint + portrait
   bezel peeking up from the bottom (overflow:hidden clips the lower
   half — restores the "device cluster" feel of the original landscape
   3-fan without needing 3 distinct scenarios captured).
   ============================================================ */
.card-hero {
  flex-direction: column;
  padding: 5cqw 6cqw 0;
  width: 100%; height: 100%;
}
.hero-logo-row {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5cqw;
  flex-shrink: 0;
}
.hero-logo-row img { width: 8cqw; height: 8cqw; object-fit: contain; }
.hero-logo-row .brand-name {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 5.6cqw; color: #000; letter-spacing: -0.02em;
}
.hero-headline {
  font-family: 'Archivo Black', 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 17cqw; line-height: 0.92; letter-spacing: -0.045em;
  color: #000; text-align: center;
  margin-top: 1.5cqw;
  flex-shrink: 0;
}
.hero-headline > div { display: block; }
body.lang-ja .hero-headline { font-size: 20cqw; line-height: 1.0; }
body.device-ipad-129 .hero-headline { font-size: 12cqw; }
body.device-ipad-129.lang-ja .hero-headline,
body.lang-ja.device-ipad-129 .hero-headline { font-size: 14cqw; }
body.device-android-phone .hero-headline { font-size: 16cqw; }
body.device-ipad-129 .hero-logo-row img { width: 5.5cqw; height: 5.5cqw; }
body.device-ipad-129 .hero-logo-row .brand-name { font-size: 4cqw; }
.hero-subhead {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 5cqw;
  color: #515154;
  margin-top: 2.5cqw;
  flex-shrink: 0;
}
.hero-subhead > div { line-height: 1.2; }
body.device-ipad-129 .hero-subhead { font-size: 3.6cqw; }
body.device-android-phone .hero-subhead { font-size: 4.5cqw; }
.hero-stat {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900; font-size: 5cqw;
  color: #000;
  margin-top: 1cqw;
  flex-shrink: 0;
}
.hero-stat .literally { font-weight: 700; color: #000; }
body.device-ipad-129 .hero-stat { font-size: 3.6cqw; }
body.device-android-phone .hero-stat { font-size: 4.5cqw; }
/* "with reasons..." tagline — sits between headline and subhead. */
.hero-tagline {
  text-align: right;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 500; font-style: italic;
  font-size: 4cqw;
  color: #333;
  margin-top: 0.5cqw;
  padding-right: 4cqw;
  flex-shrink: 0;
}
body.device-ipad-129 .hero-tagline { font-size: 3cqw; }
body.device-android-phone .hero-tagline { font-size: 3.6cqw; }
/* 3-device composition (front-portrait centerpiece + back-left iPad peek
   + back-right landscape iPhone peek). */
.hero-devices {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.device-img {
  position: absolute;
  display: block;
  filter: drop-shadow(0 1.5cqw 3cqw rgba(0,0,0,0.22));
}
/* iPhone 6.7" (1290×2796) */
body.device-iphone-67 .device-img.back-left {
  width: 132%; top: 2%; left: -22%;
  transform: rotate(-7deg); z-index: 1;
}
body.device-iphone-67 .device-img.back-right {
  width: 114%; top: 60%; right: -22%;
  transform: rotate(8deg); z-index: 1;
}
body.device-iphone-67 .device-img.front-portrait {
  width: 58%; top: 14%; left: 21%;
  z-index: 3;
}
/* iPad 12.9" (2048×2732) */
body.device-ipad-129 .device-img.back-left {
  width: 86%; top: 0%; left: -12%;
  transform: rotate(-6deg); z-index: 1;
}
body.device-ipad-129 .device-img.back-right {
  width: 72%; top: 42%; right: -12%;
  transform: rotate(6deg); z-index: 1;
}
body.device-ipad-129 .device-img.front-portrait {
  width: 38%; top: 8%; left: 31%;
  z-index: 3;
}
/* Android 1080×1920 */
body.device-android-phone .device-img.back-left {
  width: 132%; top: 2%; left: -22%;
  transform: rotate(-7deg); z-index: 1;
}
body.device-android-phone .device-img.back-right {
  width: 114%; top: 62%; right: -22%;
  transform: rotate(8deg); z-index: 1;
}
body.device-android-phone .device-img.front-portrait {
  width: 60%; top: 12%; left: 20%;
  z-index: 3;
}

/* ============================================================
   UNIFORM CARD — TikTok-style: top text + portrait bezel below.
   Grid-anchored: headline Y-center pinned at 9% of canvas;
   device top-anchored at 18%. Text-line-count changes extend ±
   half-line from the same anchor → top-gap & headline-to-device-
   gap stay equal automatically (53-locale-friendly).
   ============================================================ */
.card-uniform {
  display: grid;
  grid-template-rows: 18% 82%;
  width: 100%; height: 100%;
  padding: 0 5cqw;
}
.uniform-headline {
  grid-row: 1;
  place-self: center center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 6.8cqw; line-height: 1.15; letter-spacing: -0.03em;
  color: #000; text-align: center;
  max-width: 95%;
  text-wrap: balance;
  word-break: keep-all;
  hyphens: auto;
}
body.lang-ja .uniform-headline { font-size: 7.5cqw; line-height: 1.2; }
body.device-ipad-129 .uniform-headline { font-size: 5.5cqw; }
body.device-ipad-129.lang-ja .uniform-headline,
body.lang-ja.device-ipad-129 .uniform-headline { font-size: 6cqw; }
body.device-android-phone .uniform-headline { font-size: 7cqw; }
body.device-android-phone.lang-ja .uniform-headline,
body.lang-ja.device-android-phone .uniform-headline { font-size: 7.5cqw; }
.uniform-device {
  grid-row: 2;
  place-self: start center;
  width: 110%;
  overflow: hidden;
}
.uniform-device img {
  width: 100%;
  height: auto;
  display: block;
}
body.device-ipad-129 .uniform-device { width: 80%; }
body.device-android-phone .uniform-device { width: 95%; }

/* ============================================================
   CERT CARD — testimonial / developer-quote layout (card7 only).
   Grid-anchored mirror of card-uniform — row 1 holds the text trio
   (headline + footnote + author) as a single block (.cert-text-block)
   so it can be place-self:center'd in its row; row 2 anchors the device top.
   ============================================================ */
.card-cert {
  display: grid;
  grid-template-rows: 26% 74%;
  width: 100%; height: 100%;
  padding: 0 5cqw;
}
.cert-text-block {
  grid-row: 1;
  place-self: center center;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.cert-headline {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 5.4cqw; line-height: 1.25; letter-spacing: -0.02em;
  color: #000; text-align: center;
  max-width: 95%;
  text-wrap: balance;
  word-break: keep-all;
  hyphens: auto;
}
.cert-headline > div { display: block; }
body.lang-ja .cert-headline { font-size: 5.8cqw; }
body.device-ipad-129 .cert-headline { font-size: 3.8cqw; }
body.device-ipad-129.lang-ja .cert-headline,
body.lang-ja.device-ipad-129 .cert-headline { font-size: 4.2cqw; }
body.device-android-phone .cert-headline { font-size: 5cqw; }
body.device-android-phone.lang-ja .cert-headline,
body.lang-ja.device-android-phone .cert-headline { font-size: 5.4cqw; }
.cert-footnote {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400; font-style: italic;
  font-size: 3.4cqw; color: #555;
  margin-top: 1cqw;
  text-wrap: balance;
}
body.device-ipad-129 .cert-footnote { font-size: 2.5cqw; }
body.device-android-phone .cert-footnote { font-size: 3cqw; }
.cert-author {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  margin-top: 5cqw;
}
.cert-author .author-name { font-weight: 900; font-size: 4.4cqw; color: #000; }
.cert-author .author-role { font-weight: 500; font-size: 3.4cqw; color: #555; margin-top: 0.3cqw; }
body.device-ipad-129 .cert-author .author-name { font-size: 3.2cqw; }
body.device-ipad-129 .cert-author .author-role { font-size: 2.5cqw; }
body.device-android-phone .cert-author .author-name { font-size: 4cqw; }
body.device-android-phone .cert-author .author-role { font-size: 3cqw; }
.cert-device {
  grid-row: 2;
  place-self: start center;
  width: 110%;
  overflow: hidden;
}
.cert-device img { width: 100%; height: auto; display: block; }
body.device-ipad-129 .cert-device { width: 65%; }
body.device-android-phone .cert-device { width: 95%; }

/* ============================================================
   CTA CARD — closing call-to-action (card8 only).
   Top: 2-line headline + 1-line subhead + 2-line CTA copy with
   accent. Bottom: 3-device fan (reuses card1 hero's positioning).
   ============================================================ */
.card-cta {
  flex-direction: column;
  padding: 5cqw 6cqw 0;
  width: 100%; height: 100%;
}
.cta-headline {
  font-family: 'Archivo Black', 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14cqw; line-height: 0.95; letter-spacing: -0.04em;
  color: #000; text-align: center;
  flex-shrink: 0;
  text-wrap: balance;
  word-break: keep-all;
  hyphens: auto;
  max-width: 95%;
  margin-left: auto; margin-right: auto;
}
.cta-headline > div { display: block; }
body.lang-ja .cta-headline { font-size: 16cqw; line-height: 1.0; }
body.device-ipad-129 .cta-headline { font-size: 11cqw; }
body.device-ipad-129.lang-ja .cta-headline,
body.lang-ja.device-ipad-129 .cta-headline { font-size: 12cqw; }
body.device-android-phone .cta-headline { font-size: 13cqw; }
.cta-subhead {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 4cqw;
  color: #444;
  margin-top: 2cqw;
  padding: 0 2cqw;
  flex-shrink: 0;
}
body.device-ipad-129 .cta-subhead { font-size: 3cqw; }
body.device-android-phone .cta-subhead { font-size: 3.6cqw; }
.cta-lines {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900; color: #000;
  margin-top: 3cqw;
  flex-shrink: 0;
}
.cta-lines .cta-line { font-size: 5.4cqw; line-height: 1.2; margin-top: 0.6cqw; }
body.device-ipad-129 .cta-lines .cta-line { font-size: 4.2cqw; }
body.device-android-phone .cta-lines .cta-line { font-size: 5cqw; }
.cta-devices {
  position: relative;
  flex: 1; width: 100%;
  min-height: 0; margin-top: 3cqw;
}

/* ============================================================
   INFOGRAPHIC CARD (card2 only) — the one exception to TikTok-style.
   Preserves the "Why Fastest? 99%/1% bar chart" argument.
   ============================================================ */
.card-infographic {
  padding: 4cqw 6cqw 0;
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  position: relative;
}
.info-headline {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 11cqw; line-height: 1.0; letter-spacing: -0.03em;
  color: #000; text-align: center; flex-shrink: 0;
  margin-top: 1cqw;
}
.info-subhead {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 4cqw; color: #444;
  margin-top: 1cqw; padding-bottom: 1cqw;
  border-bottom: 0.15cqw solid #ccc;
  flex-shrink: 0;
}
body.device-ipad-129 .info-headline { font-size: 8cqw; }
body.device-ipad-129 .info-subhead { font-size: 3cqw; }
body.device-android-phone .info-headline { font-size: 10cqw; }

.info-annotation {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 3.4cqw;
  color: #2196f3;
  margin-top: 4cqw;
  line-height: 1.3;
  text-align: left;
  flex-shrink: 0;
}
.info-annotation .annotation-arrow {
  font-size: 4cqw;
  line-height: 1;
  padding-left: 1cqw;
  margin-top: 0.5cqw;
}
body.device-ipad-129 .info-annotation { font-size: 2.6cqw; }
body.device-ipad-129 .info-annotation .annotation-arrow { font-size: 3cqw; }
body.device-android-phone .info-annotation { font-size: 3cqw; }

.info-bar-top {
  position: relative;
  height: 7cqw;
  margin-top: 1cqw;
  display: flex;
  flex-shrink: 0;
  z-index: 1;
}
.info-bar-blue { width: 3%; background: #2196f3; }
.info-bar-orange {
  flex: 1; background: #FFA64D;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900; font-size: 4cqw; color: #000;
}
body.device-ipad-129 .info-bar-orange { font-size: 3.2cqw; }

.info-flow-arrow {
  text-align: center;
  font-size: 3.5cqw;
  line-height: 1;
  color: #000;
  margin: 1.5cqw 0;
  flex-shrink: 0;
}
body.device-ipad-129 .info-flow-arrow { font-size: 3cqw; }

.info-middle-text {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900; font-size: 5cqw;
  color: #000;
  flex-shrink: 0;
}
body.device-ipad-129 .info-middle-text { font-size: 4cqw; }

.info-bar-bottom {
  position: relative;
  height: 7cqw;
  display: flex; align-items: stretch;
  flex-shrink: 0;
  z-index: 1;
}
.info-bar-bottom .bottom-blue { width: 3%; background: #2196f3; }
.info-bar-bottom .bottom-orange { width: 8%; background: #FFA64D; }
.info-bar-bottom .bottom-label {
  flex: 1;
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: 2cqw;
  background: linear-gradient(to right, #eee 0%, #eee 50%, transparent 100%);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900; font-size: 4cqw; color: #000;
}
body.device-ipad-129 .info-bar-bottom .bottom-label { font-size: 3.2cqw; }

.info-digest {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900; font-size: 5cqw;
  color: #000;
  flex-shrink: 0;
  margin-top: 2cqw;
  padding: 0 2cqw;
  text-wrap: balance;
  word-break: keep-all;
}
body.device-ipad-129 .info-digest { font-size: 4cqw; }

/* Trust signal between digest and phone — small, neutral caption that
   frames the LogModal screenshot below as USER-VERIFIABLE (not staged
   marketing). "↓" arrow visually connects the line to the bezel below. */
.info-trust {
  text-align: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 3cqw;
  color: #666;
  margin-top: 1.5cqw;
  flex-shrink: 0;
  text-wrap: balance;
}
body.device-ipad-129 .info-trust { font-size: 2.4cqw; }

.info-phone {
  flex: 1; width: 100%;
  display: flex; justify-content: center; align-items: flex-start;
  min-height: 0;
  margin-top: 3cqw;
  overflow: hidden;
  z-index: 1;
}
.info-phone img {
  width: 110%;
  height: auto;
  object-position: top center;
}
body.device-ipad-129 .info-phone img { width: 55%; }
body.device-android-phone .info-phone img { width: 62%; }

body.lang-ja .info-middle-text { line-height: 1.4; }

/* ============================================================
   OG-HERO CARD — landscape social-share image (NOT in the deck).
   2-column grid: left = the 3-device cluster (reuses card1 hero's
   screens + .device-img drop-shadow); right = logo + headline +
   tagline + value-prop + store badges. Rendered at 1200×630
   (body.device-og) or 1080×1080 (body.device-og-square) by
   tool/generate_og.js → public/images/og/<lang>[-square].png.
   Sizes use cqw so both viewports share one set of rules.
   ============================================================ */
.card-og-hero {
  grid-template-columns: 44% 56%;
  align-items: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #fff4ec 100%);
}
.og-devices {
  grid-column: 1;
  position: relative;
  width: 100%; height: 100%;
}
.card-og-hero .device-img.back-left {
  width: 42%; top: 9%; left: 0%;
  transform: rotate(-8deg); z-index: 1;
}
.card-og-hero .device-img.back-right {
  width: 56%; top: 54%; right: 2%;
  transform: rotate(7deg); z-index: 1;
}
.card-og-hero .device-img.front-portrait {
  width: 44%; top: 11%; left: 28%;
  z-index: 3;
}
.og-text {
  grid-column: 2;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 0 4cqw 0 1cqw;
  /* paint above any device that bleeds past the left column (e.g. the
     rotated landscape back-right peek) so headline/subhead never get
     occluded by a device with a higher stacking context. */
  position: relative;
  z-index: 2;
}
.og-logo-row {
  display: flex; align-items: center; gap: 1.2cqw;
}
.og-logo-row img { width: 4.4cqw; height: 4.4cqw; object-fit: contain; }
.og-logo-row .brand-name {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 3.2cqw; color: #000; letter-spacing: -0.02em;
}
.og-headline {
  font-family: 'Archivo Black', 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 7cqw; line-height: 0.95; letter-spacing: -0.04em;
  color: #000;
  margin-top: 1cqw;
}
.og-headline > div { display: block; }
body.lang-ja .og-headline { font-size: 8.5cqw; line-height: 1.04; }
body.device-og-square .og-headline { font-size: 8cqw; }
body.device-og-square.lang-ja .og-headline,
body.lang-ja.device-og-square .og-headline { font-size: 9cqw; }
.og-tagline {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 500; font-style: italic;
  font-size: 2.6cqw; color: #444;
  margin-top: 0.6cqw;
}
.og-subhead {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 2.7cqw;
  color: #515154;
  margin-top: 1.8cqw;
  text-wrap: balance;
}
.og-stat {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900; font-size: 3cqw;
  color: #000;
  margin-top: 1cqw;
}
.og-badges {
  display: flex; align-items: center; gap: 1.2cqw;
  margin-top: 2.2cqw;
}
.og-badges .badge-apple { height: 4.6cqw; }
.og-badges .badge-google { height: 6.6cqw; margin: -1cqw 0; }

/* ============================================================
   LP DECK — wrapper styles for embedding the card deck in a
   responsive LP context (each .tt-canvas renders at native
   1080×1920 and is visually scaled by JS to fit its container).
   Used by /:lang/browser/ via download.ts SSR — kept here so
   the wrappers live next to the canvas rules they wrap.
   ============================================================ */
.lp-deck {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 48px 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.lp-card-section {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1080 / 1920;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  background: #fff;
}
.lp-card-section .tt-canvas {
  position: absolute;
  top: 0; left: 0;
  /* width/height come from body.device-* .tt-canvas rules above
     (1080×1920 for Android). transform: scale() set per-element by
     DECK_RUNTIME_JS in cards.js. display:flex|grid is set by the
     .tt-canvas.card-<kind> rules earlier in this file — don't override
     here or all 8 cards will render as plain blocks. */
  transform-origin: top left;
}
@media (max-width: 480px) {
  .lp-deck { gap: 32px; padding: 32px 12px; }
}

/* ------------------------------------------------------------
   RTL locales (Arabic etc.) — when an RTL lang becomes deck-ready
   (added to DECK_READY_LANGS in cards.js), its canvas text must flow
   right-to-left. Provisional: not yet visually verified against real
   captures (ar has no per-lang screenshots as of authoring). Page-level
   <html dir="rtl"> is set separately in download.ts.
   ------------------------------------------------------------ */
body.lang-ar .tt-canvas { direction: rtl; }