/* JA mobile rebuild. The frozen baseline remains the source for structure/copy. */
.store-visual { width: 100%; max-width: 350px; margin: 0 auto; display: grid; gap: 16px; }
.store-crop { position: relative; display: block; width: 100%; aspect-ratio: var(--cw) / var(--ch); overflow: hidden; padding: 0; border: 0; border-radius: 16px; background: var(--bg); color: inherit; cursor: zoom-in; font: inherit; }
.store-crop img { position: absolute; width: calc(var(--sw, 1080) / var(--cw) * 100%); max-width: none; height: auto; left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); display: block; }
.store-hero { max-width: 250px; }
.store-hero .store-crop { border-radius: 24px; box-shadow: 0 14px 35px #171c2618; }
.store-fields .store-crop { border-radius: 12px; }
.store-analysis .store-crop:last-child { width: 78%; margin-inline: auto; }
.store-data { margin-top: 26px; }
.store-plans { margin-top: 26px; }
.store-dialog-visual { width: min(640px, calc(92vw - 32px)); margin: 0 auto; }
.store-dialog-visual .store-crop { cursor: default; border-radius: 0; }
#screen-dialog[data-store-open] > img { display: none; }
@media (max-width: 767px) {
  .site-bar { min-height: 60px; padding: 8px 20px; gap: 10px; }
  .completed .hero-in { box-sizing: border-box; max-width: 430px; margin-inline: auto; padding: 16px 20px 40px; }
  .completed .hero-h1 { font-size: 62px; line-height: 1.08; }
  .completed .hero-lede { font-size: 22px; line-height: 1.45; }
  .freedom-meaning { font-size: 12px; line-height: 1.7; margin-top: 12px; }
  .completed .hero-vis { margin-top: 26px; }
  .completed .hero-pts { font-size: 12px; line-height: 1.6; margin-top: 18px; }
  .sec { padding: 56px 20px; }
  .story-in, .creed-in, .pr-in, .faq-in { max-width: 390px; margin-inline: auto; }
  .story .pillar, .pillar { font-size: 52px; line-height: 1.1; }
  #setup .pillar, #history .pillar, #own-data .pillar { font-size: 22px; line-height: 1.25; }
  .story .h2, .h2 { margin-top: 8px; font-size: 28px; line-height: 1.4; }
  .story-body { margin-top: 16px; font-size: 15px; line-height: 1.8; }
  .two-cards { margin-top: 24px; gap: 12px; grid-template-columns: 1fr; }
  .start-card { padding: 18px 16px; gap: 10px; border-radius: 18px; }
  .start-card h3 { font-size: 18px; line-height: 1.5; }
  .start-card p { font-size: 14px; line-height: 1.75; }
  #fast .two-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fast .start-card { padding: 18px 14px; }
  #fast .start-card h3 { font-size: 15px; }
  #fast .start-card p:not(.step-action) { font-size: 13px; line-height: 1.65; }
  #fast .step-action { font-size: clamp(18px, 5.1vw, 20px); line-height: 1.5; color: var(--blue); }
  .near-note { margin-top: 14px; font-size: 12px; line-height: 1.75; }
  .h3c, .field-aside h3 { font-size: 20px; line-height: 1.5; }
  .fast-comfort { margin-top: 28px; }
  .product-row { margin-top: 24px; gap: 24px; grid-template-columns: 1fr; }
  .example-note { padding: 16px; font-size: 13px; line-height: 1.75; margin-top: 18px; }
  .three-steps { margin-top: 24px; gap: 10px; }
  .three-steps li { padding: 16px; gap: 14px; font-size: 15px; }
  .step-number { font-size: 20px; }
  .text-link { font-size: 14px; }
  .plan { padding: 20px 18px 18px; }
  .pr-cards { margin-top: 24px; }
  .completed .pricing li { line-height: 1.65; }
  .pr-n1 { font-size: 12px; }
  .pr-n2 { line-height: 1.7; }
  .plan-pills { font-size: 12px; line-height: 1.6; }
  .creed-list .t { font-size: 20px; }
  .creed-list .b { font-size: 14px; line-height: 1.75; }
  .cl-in { padding: 56px 20px 0; max-width: 430px; margin-inline: auto; }
  .completed .cl-in { padding-bottom: 44px; }
  .site-footer { padding: 28px 20px; }
}
@media (max-width: 359px) {
  .site-bar { padding-inline: 16px; gap: 8px; }
  .completed .hero-h1 { font-size: 56px; }
  .completed .hero-lede { font-size: 21px; }
  .story .h2, .h2 { font-size: 24px; }
  .story .pillar, .pillar { font-size: 46px; }
  #setup .pillar, #history .pillar, #own-data .pillar { font-size: 20px; }
  #fast .two-cards { grid-template-columns: 1fr; }
  #fast .step-action { font-size: 22px; }
  .story-body { font-size: 14px; }
  .store-hero { max-width: 235px; }
  .cl-h { font-size: 34px; }
}
.store-hero figcaption { font-size: 12px; line-height: 1.6; color: var(--sub); }

.fast-inputs { display: grid; gap: 14px; margin-top: 18px; max-width: 350px; }
.fast-input-card { min-width: 0; margin: 0; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.fast-input-card figcaption { margin-bottom: 12px; font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.fast-input-card .store-crop { border-radius: 10px; }

.field-groups { display: grid; gap: 28px; width: 100%; max-width: 350px; margin-inline: auto; }
.field-group-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; font-size: 17px; line-height: 1.5; font-weight: 700; }
.field-plan { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--sel); color: var(--blue); font-size: 12px; line-height: 1.5; font-weight: 700; }

.field-group-intro { margin: 0 0 18px; font-size: 14px; line-height: 1.8; color: var(--body2); }
.exercise-examples { display: grid; gap: 14px; }
.exercise-example { min-width: 0; padding: 18px 16px; background: #fff; border: 1px solid var(--line2); border-radius: 18px; }
.exercise-example-eyebrow { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--sub); }
.exercise-example-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.exercise-example-heading h4 { font-size: 14px; line-height: 1.5; font-weight: 700; }
.exercise-record-type { display: inline-block; padding: 2px 8px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.exercise-value-label { margin: 12px 0 6px; font-size: 11px; line-height: 1.5; color: var(--sub); }
.exercise-values { padding: 9px 12px; border-radius: 10px; background: var(--sel); font-size: 15px; line-height: 1.65; }
.exercise-values small { font-size: 11px; font-weight: 500; }
.exercise-values-lr { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 0; }
.exercise-values-lr > span { font-size: 11px; color: var(--sub); }
.exercise-value-label-custom { color: var(--blue); font-weight: 500; }
.exercise-fields { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.exercise-fields > div { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 3px 5px; max-width: 100%; padding: 5px 8px; border-radius: 8px; background: var(--soft); }
.exercise-fields dt { font-size: 11px; line-height: 1.5; color: var(--sub); }
.exercise-fields dd { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.field-type-heading { margin: 22px 0 12px; font-size: 14px; line-height: 1.5; font-weight: 700; }
.store-field-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.store-field-types .store-crop { border-radius: 12px; }

/* Human PO: mobile Hero follows the approved Feature Graphic composition. */
.hero-title-line { display: block; }
.hero-feature-visual { max-width: 390px; display: block; }
.hero-feature-stage { position: relative; width: 100%; aspect-ratio: 522 / 413; }
.hero-feature-stage .store-crop { position: absolute; border-radius: clamp(11px, 4.3vw, 18px); box-shadow: 0 16px 30px #0005; }
.hero-feature-stage .feature-history { left: 0; top: 12.5908%; width: 31.9923%; }
.hero-feature-stage .feature-analysis { left: 33.5249%; top: 6.2954%; width: 31.9923%; }
.hero-feature-stage .feature-recording { left: 67.0498%; top: 0; width: 32.7586%; }
.hero-feature-visual figcaption { margin-top: 12px; font-size: 11px; line-height: 1.6; color: var(--sub); }
.hero-brand-icon { display: inline-block; position: relative; flex: 0 0 26px; width: 26px; aspect-ratio: 1; overflow: hidden; }
.hero-brand-icon img { position: absolute; display: block; max-width: none; width: 1896.2963%; height: auto; left: -111.1111%; top: -66.6667%; }
#screen-dialog .store-crop img { max-width: none; }
@media (max-width: 767px) {
  .hero-feature-page .site-hdr { background: #0F1B3D; border-bottom: 1px solid #ffffff12; }
  .hero-feature-page .site-bar > .brand { display: inline-flex; align-items: center; gap: 9px; color: #F5F1E8; font-size: 19px; letter-spacing: .16em; }
  .hero-feature-page .site-hdr summary { color: #F5F1E8; border-color: #677294; background: transparent; }
  .hero--feature { position: relative; isolation: isolate; overflow: hidden; background: #0F1B3D; color: #F5F1E8; }
  .hero--feature::before { content: ""; position: absolute; z-index: -1; width: 150%; aspect-ratio: 1; right: -72%; top: 24%; border-radius: 50%; background: #3C4CC2; opacity: .28; pointer-events: none; }
  .completed .hero--feature .hero-in { max-width: 430px; padding: 26px 20px 36px; }
  .hero--feature .hero-eyebrow { color: #C9CDF2; font-size: 12px; }
  .completed .hero--feature .hero-h1 { display: flex; flex-wrap: nowrap; gap: .16em; margin-top: 10px; font-size: clamp(44px, 14vw, 60px); line-height: 1.12; letter-spacing: -.025em; color: #fff; }
  .completed .hero--feature .hero-lede { margin-top: 14px; font-size: 19px; line-height: 1.5; color: #F5F1E8; }
  .hero--feature .hero-lede br { display: none; }
  .hero--feature .freedom-meaning { max-width: 350px; margin-top: 12px; font-size: 12px; line-height: 1.75; color: #C9CDF2; }
  .hero--feature .hero-cta { margin-top: 24px; }
  .hero--feature .cta--fill { background: #F5F1E8; color: #0F1B3D; box-shadow: 0 4px 14px #0002; }
  .hero--feature .cta-note { color: #C9CDF2; }
  .completed .hero--feature .hero-vis { width: 100%; margin-top: 30px; }
  .hero--feature .hero-feature-visual figcaption { color: #C9CDF2; }
  .completed .hero--feature .hero-pts { justify-content: flex-start; gap: 8px; margin-top: 22px; color: #F5F1E8; font-size: 12px; line-height: 1.5; }
  .hero--feature .hero-pts li { border: 1px solid #F5F1E8; border-radius: 999px; padding: 6px 10px; }
}
@media (max-width: 359px) {
  .hero-feature-page .site-bar > .brand { gap: 6px; font-size: 16px; }
  .completed .hero--feature .hero-in { padding-top: 22px; }
  .completed .hero--feature .hero-lede { font-size: 17px; }
  .completed .hero--feature .hero-pts { font-size: 11px; }
}

/* Human PO: carry the approved Feature Graphic palette through the JA mobile page. */
@media (max-width: 767px) {
  html:has(> body.hero-feature-page) { background: #0F1B3D; color-scheme: dark; }
  body.hero-feature-page {
    --bg: #0F1B3D;
    --ink: #F5F1E8;
    --sub: #BCC5E2;
    --mute: #A7B3D3;
    --body2: #D9DEEE;
    --blue: #A8B5FF;
    --line: #3B4B70;
    --line2: #2D3C5E;
    --soft: #223455;
    --sel: #293B63;
    background: #0F1B3D;
    color: #F5F1E8;
  }
  .hero-feature-page #fast,
  .hero-feature-page #setup,
  .hero-feature-page #own-data,
  .hero-feature-page #faq { background-color: #0F1B3D; }
  .hero-feature-page #freedom-to,
  .hero-feature-page #analysis { background-color: #122142; }
  .hero-feature-page #history { background-color: #142448; }
  .hero-feature-page #creed { background-color: #101E3C; }
  .hero-feature-page #pricing { background-color: #152347; }
  .hero-feature-page #freedom-to,
  .hero-feature-page #analysis,
  .hero-feature-page #pricing {
    background-image: radial-gradient(ellipse at 100% 0%, #3c4cc224 0%, transparent 64%);
  }
  .hero-feature-page .start-card,
  .hero-feature-page .fast-input-card,
  .hero-feature-page .exercise-example,
  .hero-feature-page .three-steps li,
  .hero-feature-page .plan {
    background: #172646;
    border-color: var(--line);
    color: var(--ink);
  }
  .hero-feature-page .plan--pro {
    background: #21315A;
    border-color: #A8B5FF;
  }
  .hero-feature-page .plan-band,
  .hero-feature-page .exercise-values,
  .hero-feature-page .example-note { background: var(--sel); }
  .hero-feature-page .band-v--2 { border-color: var(--line); }
  .hero-feature-page .plan-pills { color: var(--sub); }
  .hero-feature-page .field-plan {
    background: #3C4CC2;
    color: #fff;
  }
  .hero-feature-page .field-group:first-child .field-plan {
    background: #293B63;
    color: #F5F1E8;
  }
  .hero-feature-page .exercise-fields > div { background: var(--soft); }
  .hero-feature-page .exercise-record-type { border-color: var(--blue); color: var(--blue); }
  .hero-feature-page .pill { background: #293B63; color: #F5F1E8; }
  .hero-feature-page .pill--pro { background: #3C4CC2; color: #fff; }
  .hero-feature-page .cta--fill { background: #F5F1E8; color: #0F1B3D; }
  .hero-feature-page .closing {
    background: #0B1530;
    border-top: 1px solid var(--line2);
    color: #F5F1E8;
  }
  .hero-feature-page .site-footer {
    background: #0B1530;
    border-top: 1px solid var(--line2);
    color: #BCC5E2;
  }
  .hero-feature-page .site-hdr details nav {
    background: #172646;
    border-color: var(--line);
    box-shadow: 0 12px 30px #0006;
  }
  .hero-feature-page .site-hdr details nav a { color: var(--ink); }
  .hero-feature-page .site-hdr details nav a:hover,
  .hero-feature-page .site-hdr a[aria-current] { background: var(--sel); color: var(--blue); }
  .hero-feature-page .skip { background: #F5F1E8; color: #0F1B3D; }
  .hero-feature-page #screen-dialog { background: #101E3C; color: var(--ink); }
  .hero-feature-page .dialog-close { background: #172646; border-color: var(--line); color: var(--ink); }
  .hero-feature-page #screen-dialog::backdrop { background: #050B1EE6; }
}

/* Store04: Free display preferences are separate from paid custom fields. */
.appearance-customization { max-width: 350px; margin: 32px auto 0; padding-top: 28px; border-top: 1px solid var(--line); }
.appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.appearance-heading h3 { font-size: 24px; line-height: 1.4; font-weight: 700; }
.appearance-free { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--sel); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.5; }
.appearance-customization > p { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--body2); }
.appearance-visual { margin-top: 20px; }
.appearance-visual .store-crop { border-radius: 18px; box-shadow: 0 14px 32px #0002; }

.creed-list li.creed-noads { margin-top: 12px; padding: 24px 16px; border: 1px solid #6F83D1; border-radius: 16px; background: #1B2B50; }
.creed-list .creed-noads .n { font-size: 18px; color: #A8B5FF; }
.creed-list .creed-noads .t { font-size: 32px; line-height: 1.25; color: #F5F1E8; }
.creed-list .creed-noads .b { color: #D9DEEE; }

/* Human PO: reduce small copy; make exercise settings and setup visual. */
.freedom-compact .story-body { font-size: 16px; line-height: 1.7; }
.freedom-compact .field-groups { margin-top: 24px; gap: 28px; }
.freedom-compact .field-group-title { font-size: 18px; }
.freedom-compact .field-plan { font-size: 14px; }
.store-basic-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.freedom-compact .exercise-examples { gap: 16px; }
.freedom-compact .exercise-example-heading h4 { font-size: 17px; line-height: 1.5; }
.freedom-compact .exercise-values { margin-top: 12px; font-size: 18px; }
.freedom-compact .exercise-values small, .freedom-compact .exercise-values-lr > span { font-size: 14px; }
.freedom-compact .exercise-fields { margin-top: 12px; gap: 8px; }
.freedom-compact .exercise-fields dt { font-size: 14px; }
.freedom-compact .exercise-fields dd { font-size: 15px; }
.freedom-compact .machine-location { margin-bottom: 6px; font-size: 15px; line-height: 1.6; color: var(--blue); }
.machine-settings-visual { margin-top: 16px; }
.machine-settings-visual .store-crop { border-radius: 10px; }
.freedom-compact .field-policy { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--sub); }
.freedom-compact .appearance-customization > p { font-size: 16px; }
.setup-options { display: grid; gap: 12px; margin-top: 24px; }
.setup-visual .setup-method { padding: 18px 16px; gap: 16px; }
.setup-visual .setup-method h3, .setup-reuse h3 { font-size: 20px; line-height: 1.5; }
.setup-visual .setup-method > p { font-size: 14px; line-height: 1.7; }
.setup-or { text-align: center; color: var(--sub); font-size: 14px; line-height: 1.7; }
.setup-method .store-crop, .setup-reuse .store-crop { border-radius: 12px; }
.setup-visual .text-link { margin-top: 0; }
.setup-flow-arrow { text-align: center; margin-block: 14px; font-size: 32px; line-height: 1; color: var(--blue); }
.setup-reuse { padding: 18px 16px; border-radius: 18px; border: 1px solid var(--blue); background: var(--sel); }
.setup-reuse-visual { margin-top: 14px; }
.setup-plan-note { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--sub); }

/* Keep each setup example and its result in the same exercise. */
.setup-method .setup-flow-arrow { margin: 0; font-size: 26px; }
.setup-visual .setup-method > .setup-result-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.setup-method .setup-reuse-visual { margin-top: 0; }
.setup-result-example .exercise-example { padding: 14px 12px; background: var(--soft); border-color: var(--line); }
.setup-result-example h4 { font-size: 17px; line-height: 1.5; }
.setup-result-example .exercise-values { margin-top: 12px; font-size: 18px; }
.setup-result-example .exercise-values small, .setup-result-example .exercise-values-lr > span { font-size: 14px; }
.setup-result-example .exercise-fields { margin-top: 12px; }
.setup-result-example .exercise-fields dt { font-size: 14px; }
.setup-result-example .exercise-fields dd { font-size: 15px; }

/* Native line wrapping for the three Latin-script mobile translations. JA unchanged. */
@media (max-width: 767px) {
 html:not([lang="ja"]) body.hero-feature-page { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
 html:not([lang="ja"]) .completed .hero--feature .hero-h1 { flex-wrap: wrap; font-size: clamp(34px, 10vw, 44px); gap: .08em .2em; }
 html:not([lang="ja"]) .hero-title-line { white-space: nowrap; }
 html:not([lang="ja"]) .hero-feature-page .story-in { overflow-wrap: break-word; }
 html:not([lang="ja"]) .hero-feature-page #analysis .pillar,
 html:not([lang="ja"]) .hero-feature-page #creed .pillar,
 html:not([lang="ja"]) .hero-feature-page #pricing .pillar { font-size: clamp(30px, 9vw, 38px); }
 html:not([lang="ja"]) .exercise-values-lr { grid-template-columns: 2.5em minmax(0,1fr); }
 html:not([lang="ja"]) .start-card,
 html:not([lang="ja"]) .exercise-example,
 html:not([lang="ja"]) .exercise-example-heading > *,
 html:not([lang="ja"]) .plan-hd > * { min-width: 0; }
 html:not([lang="ja"]) .hero-feature-page #screen-dialog { overflow-wrap: anywhere; }
 html[lang="de"] .hero-feature-page .exercise-example-heading h4,
 html[lang="de"] .hero-feature-page .exercise-fields { hyphens: auto; overflow-wrap: break-word; }
 html[lang="es"] #setup .pillar,
 html[lang="de"] #setup .pillar { font-size: 22px; }
}