/* Mobile-only QA fixes. Loaded last so legacy layered styles cannot reintroduce clipping. */

/* Neutralize the parent header's decorative span rule for copy-only line wrappers. */
#learning .b-learning-rules header strong > .learning-copy-line {
  display: inline;
  gap: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
#learning .b-learning-rules header strong > .learning-copy-line::before,
#learning .b-learning-rules header strong > .learning-copy-line::after {
  content: none;
}

#roi .b-roi-value > .b-roi-value-lead,
#roi .roi-value-mobile-break {
  display: none;
}

#roi .b-roi-value > .b-roi-value-lead {
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
}

#integration .operation-title {
  font-size: 1.2rem;
}

#security .b-security-panel h3 > .security-title-copy {
  display: inline;
  width: auto;
  height: auto;
  flex: 0 1 auto;
  background: none;
  font: inherit;
}

#security .security-title-copy br {
  display: none;
}

/* Desktop ROI: mirror the mobile value flow at a wider scale. */
@media (min-width: 721px) {
  #roi .b-roi-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  #roi .b-roi-summary > .b-roi-summary-stat {
    min-height: 190px;
    padding: 34px 38px;
    border: 1px solid var(--b-line);
    background: var(--b-paper);
    text-align: center;
  }

  #roi .b-roi-summary > .b-roi-summary-stat:first-child {
    border-right: 0;
    border-radius: 18px 0 0 18px;
  }

  #roi .b-roi-summary > .b-roi-summary-stat:nth-child(2) {
    border-left: 1px solid var(--b-line);
    border-radius: 0 18px 18px 0;
  }

  #roi .b-roi-summary-stat > strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 3.4rem;
    white-space: nowrap;
  }

  #roi .b-roi-summary-stat > strong small {
    font-size: 1rem;
  }

  #roi .b-roi-summary > .b-roi-value {
    position: relative;
    grid-column: 1 / -1;
    display: block;
    margin-top: 42px;
    padding: 54px 48px 44px;
    overflow: visible;
    border: 1px solid rgba(183, 122, 20, .34);
    border-radius: 22px;
    background:
      radial-gradient(circle at 50% 0%, rgba(223, 171, 61, .16), transparent 38%),
      linear-gradient(155deg, #fffefb, #f7efe0);
    box-shadow: 0 22px 58px rgba(84, 57, 14, .11);
    text-align: center;
  }

  #roi .b-roi-summary > .b-roi-value::before {
    content: "↓";
    position: absolute;
    top: -26px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(183, 122, 20, .5);
    border-radius: 50%;
    background: #fffaf0;
    color: var(--b-gold-dark);
    font-family: Georgia, serif;
    font-size: 1.4rem;
    box-shadow: 0 9px 20px rgba(84, 57, 14, .13);
    transform: translateX(-50%);
  }

  #roi .b-roi-value > span {
    display: inline-block;
    padding: 7px 15px;
    border: 1px solid rgba(183, 122, 20, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-size: .8rem;
    letter-spacing: .1em;
  }

  #roi .b-roi-value h3 {
    margin: 15px 0 9px;
    font-size: 1.65rem;
    line-height: 1.45;
  }

  #roi .b-roi-value > .b-roi-value-lead {
    display: block;
    max-width: 680px;
    margin: 0 auto;
    color: var(--b-muted);
    font-size: .9rem;
    line-height: 1.8;
  }

  #roi .b-roi-value > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
    border: 0;
  }

  #roi .b-roi-value > div > p {
    position: relative;
    display: flex;
    min-height: 138px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 42px 18px 18px;
    border: 1px solid rgba(183, 122, 20, .18) !important;
    border-radius: 15px;
    background: rgba(255, 255, 255, .78);
    font-size: .8rem;
    line-height: 1.55;
  }

  #roi .b-roi-value > div > p::before {
    content: attr(data-step);
    position: absolute;
    top: 14px;
    left: 50%;
    color: var(--b-gold-dark);
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .06em;
    font-variant-numeric: lining-nums tabular-nums;
    transform: translateX(-50%);
  }

  #roi .b-roi-value > div > p strong {
    font-size: 1.02rem;
    line-height: 1.45;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  #roi .b-roi-value > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  /* Mobile FV order: result -> product screen -> explanation -> USP -> CTA. */
  .hero-cv .cv-mock {
    order: 6 !important;
    margin-top: 0 !important;
    padding-bottom: 20px !important;
  }

  .hero-cv .cv-sub {
    order: 7 !important;
  }

  .hero-cv .cv-usp {
    order: 8 !important;
  }

  .hero-cv .cv-mockup-img {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Mobile does not need reveal effects that can leave skipped sections invisible. */
  .animate-in,
  .animate-in.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Prefer Japanese phrase-aware wrapping, then balance short headings. */
  h1,
  h2,
  h3,
  .section-title,
  .closing-title,
  .fit-checker-head h3,
  .btn,
  .btn-luxury-primary {
    line-break: strict;
    word-break: auto-phrase;
    text-wrap: balance;
  }

  p,
  li,
  blockquote,
  .section-desc,
  .v3-step-note {
    line-break: strict;
    word-break: auto-phrase;
    text-wrap: pretty;
  }

  /* FV: let the actual content define the height and show the full product image. */
  .hero-cv,
  .hero-cv .cv {
    overflow: visible !important;
  }

  .hero-cv .cv {
    height: auto !important;
    padding-top: 126px !important;
    padding-bottom: 42px !important;
  }

  .hero-cv .cv-lay {
    height: auto !important;
  }

  .hero-cv .cv-cta-note {
    padding: 0 4px;
    text-wrap: pretty;
  }

  /* FV USP: three compact columns, with the CTA using exactly the same width. */
  .hero-cv .cv-usp,
  .hero-cv .cv-cta,
  .hero-cv .cv-cta-note {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .hero-cv .cv-usp {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .hero-cv .cv-usp-item {
    display: flex !important;
    min-height: 120px !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 6px 9px !important;
    text-align: center !important;
  }

  .hero-cv .cv-usp-head {
    grid-row: auto !important;
    flex-direction: column;
    gap: 4px !important;
  }

  .hero-cv .cv-usp-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .hero-cv .cv-usp-item strong {
    display: flex !important;
    min-height: 2.5em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px !important;
    margin-top: 6px !important;
    font-size: clamp(12px, 3.5vw, 15px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .hero-cv .cv-usp-prefix,
  .hero-cv .cv-usp-item small {
    font-size: 9px !important;
  }

  .hero-cv .cv-usp-note {
    grid-column: auto !important;
    margin-top: auto !important;
    padding-top: 5px !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
    text-align: center;
  }

  .hero-cv .cv-sub span {
    display: block;
  }

  .problems-conclusion .text-accent-bold > span,
  #accuracy .trial-proof-copy > span {
    display: block;
  }

  #accuracy .trial-proof-copy {
    min-width: 0;
  }

  #accuracy .accuracy-b-verification-head > .trial-proof-heading {
    gap: 8px;
  }

  #accuracy .accuracy-b-verification-head > .trial-proof-heading::before,
  #accuracy .accuracy-b-verification-head > .trial-proof-heading::after {
    width: 16px;
    flex: 0 0 16px;
  }

  #accuracy .trial-proof-copy > span {
    white-space: nowrap;
  }

  /* Keep the three oversized legacy headings on the same mobile type scale. */
  #roi > .container > .marketing-title,
  #crm > .container > .marketing-title,
  #security > .container > .marketing-title {
    max-width: 100% !important;
    font-size: 1.65rem !important;
    line-height: 1.55 !important;
    letter-spacing: .02em !important;
  }

  #security > .container > .marketing-title .title-line:first-child {
    white-space: nowrap;
  }

  #learning > .container > .marketing-title .title-line:first-child {
    font-size: clamp(1rem, 5.2vw, 1.3rem);
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Keep status figures on the same numeric typeface as desktop. */
  #crm .b-crm-status strong {
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
    font-weight: 500 !important;
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* Keep the key noun together instead of splitting 4 / ステップ. */
  #steps .v3-step-note strong {
    white-space: nowrap;
  }

  #steps .product-tour-canvas {
    min-height: 0;
  }

  #steps .product-tour-step-copy strong > span {
    display: block;
  }

  #steps .product-tour-panel {
    position: relative;
  }

  /* Learning: keep the requested phrase break and remove the comma. */
  #learning .b-learning-rules header strong > .learning-copy-line {
    display: block;
  }

  /* ROI: use the same approved artwork as desktop and scale the whole image to fit. */
  #roi .b-roi-approved-visual {
    display: block !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 30px 0 0 calc(50% - 50vw + 12px) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #roi .b-roi-approved-visual picture {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
    border: 1px solid rgba(183, 122, 20, .2) !important;
    border-radius: 10px !important;
    background: #fffdf8 !important;
  }

  #roi .b-roi-approved-visual picture img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #roi .b-roi-approved-visual::after {
    display: none !important;
  }

  #roi .b-roi-approved-visual ~ .b-roi-flow {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* ROI summary: two compact figures on one row, supporting detail below. */
  #roi .b-roi-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  #roi .b-roi-approved-visual ~ .b-roi-summary {
    border: 0 !important;
  }

  #roi .b-roi-summary > .b-roi-summary-stat {
    min-width: 0;
    min-height: 188px;
    padding: 22px 8px !important;
    border: 1px solid var(--b-line) !important;
    background: var(--b-paper);
  }

  #roi .b-roi-summary > .b-roi-summary-stat:first-child {
    border-right: 0 !important;
    border-radius: 16px 0 0 16px;
  }

  #roi .b-roi-summary > .b-roi-summary-stat:nth-child(2) {
    border-top: 1px solid var(--b-line) !important;
    border-left: 1px solid var(--b-line) !important;
    border-radius: 0 16px 16px 0;
  }

  #roi .b-roi-summary-stat > strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: clamp(2.2rem, 10vw, 2.55rem);
    white-space: nowrap;
  }

  #roi .b-roi-summary-stat > span {
    display: flex;
    min-height: 2.8em;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
  }

  #roi .b-roi-summary-stat > strong small {
    font-size: .62rem;
  }

  #roi .b-roi-summary-stat p {
    font-size: .64rem;
    line-height: 1.55;
  }

  #roi .b-roi-summary > .b-roi-value {
    position: relative;
    grid-column: 1 / -1 !important;
    display: block;
    margin-top: 34px;
    padding: 42px 18px 20px !important;
    overflow: visible;
    border: 1px solid rgba(183, 122, 20, .34) !important;
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% 0%, rgba(223, 171, 61, .15), transparent 42%),
      linear-gradient(155deg, #fffefb, #f7efe0);
    box-shadow: 0 18px 44px rgba(84, 57, 14, .10);
    text-align: center;
  }

  #roi .b-roi-summary > .b-roi-value::before {
    content: "↓";
    position: absolute;
    top: -23px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(183, 122, 20, .5);
    border-radius: 50%;
    background: #fffaf0;
    color: var(--b-gold-dark);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    box-shadow: 0 8px 18px rgba(84, 57, 14, .12);
    transform: translateX(-50%);
  }

  #roi .b-roi-value > span {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid rgba(183, 122, 20, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    font-size: .68rem;
    letter-spacing: .08em;
  }

  #roi .b-roi-value h3 {
    margin: 12px 0 7px;
    font-size: 1.18rem;
    line-height: 1.55;
  }

  #roi .b-roi-value > .b-roi-value-lead {
    display: block;
    margin: 0 auto;
    color: var(--b-muted);
    font-size: .72rem;
    line-height: 1.75;
  }

  #roi .roi-value-mobile-break {
    display: initial;
  }

  #roi .b-roi-value > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
    border: 0;
  }

  #roi .b-roi-value > div > p {
    position: relative;
    display: flex;
    min-height: 106px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 28px 7px 10px;
    border: 1px solid rgba(183, 122, 20, .18) !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, .76);
    font-size: .62rem;
    line-height: 1.5;
  }

  #roi .b-roi-value > div > p::before {
    content: attr(data-step);
    position: absolute;
    top: 9px;
    left: 50%;
    color: var(--b-gold-dark);
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: .68rem;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    transform: translateX(-50%);
  }

  #roi .b-roi-value > div > p strong {
    font-size: .72rem;
    line-height: 1.45;
  }

  /* Integration: show the complete desktop UI screenshot with no cover crop. */
  #integration .v3-showcase {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #integration .v3-showcase-media,
  #integration .v3-showcase-frame {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 2928 / 1596;
    background: #eef2f8;
  }

  #integration .v3-showcase-frame picture,
  #integration .v3-showcase-frame img {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
  }

  #integration .v3-showcase-frame img {
    object-fit: contain;
    object-position: center;
  }

  #integration .v3-step-note br,
  #contact .b-closing-message br {
    display: none;
  }

  /* The icon glyph coordinates were authored for a 38px box. */
  #integration .method-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
  }

  /* Comparison: fit all three columns in the viewport; no hidden right-hand result. */
  #compare .comparison-table {
    width: 100%;
    overflow: hidden;
  }

  #compare .comparison-header,
  #compare .comparison-row {
    width: 100%;
    min-width: 0;
    grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr);
  }

  #compare .comparison-header .comparison-col,
  #compare .comparison-row .comparison-col {
    min-width: 0;
    padding: 12px 8px;
    overflow-wrap: anywhere;
    font-size: .7rem;
    line-height: 1.5;
  }

  #compare .comparison-col-us strong {
    white-space: normal;
  }

  /* Long form and closing copy should not inherit desktop-forced breaks. */
  .pricing-lead,
  #flow .flow-desc,
  #faq .faq-question,
  #faq .faq-answer p,
  #contact .b-closing-message {
    text-align: left;
  }
}

@media (max-width: 380px) {
  .hero-cv .cv {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .hero-cv .cv-mc-l {
    font-size: 26px !important;
  }

  #security > .container > .marketing-title {
    font-size: 1.52rem !important;
  }

  #roi .b-roi-summary-stat > strong {
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
  }

  #compare .comparison-header,
  #compare .comparison-row {
    grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr);
  }

  #compare .comparison-header .comparison-col,
  #compare .comparison-row .comparison-col {
    padding-right: 6px;
    padding-left: 6px;
    font-size: .66rem;
  }
}

@media (max-width: 340px) {
  #security > .container > .marketing-title {
    font-size: 1.375rem !important;
  }
}

/* Mobile placement contract: center each text box like Canva's Position > Center. */
@media (max-width: 720px) {
  :root {
    --mobile-text-frame: calc(100vw - 84px);
  }

  #roi > .container {
    width: calc(100% - 36px) !important;
    max-width: none !important;
  }

  /* Section-level copy uses one shared frame: 42px on both sides. */
  section:not(#hero) > .container > :is(
    .section-label,
    .section-title,
    .marketing-title,
    .section-desc,
    .section-lead,
    .v3-step-note,
    .operation-title,
    .pricing-title,
    .pricing-lead,
    .voice-disclaimer,
    .accuracy-b-condition-note,
    .problems-conclusion
  ) {
    width: min(100%, var(--mobile-text-frame)) !important;
    max-width: var(--mobile-text-frame) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
  }

  /* Every single-column text wrapper is centered in its own card or panel. */
  section:not(#hero) :is(
    .accuracy-b-verification-head,
    .accuracy-b-fact--speed > div,
    .b-learning-rules > p,
    .b-learning-before-after,
    .b-roi-value-card,
    .v3-showcase-content,
    .v3-method-card > p,
    .security-copy,
    .b-security-panel,
    .voice-standard-card > blockquote,
    .voice-standard-card > p,
    .voice-standard-result,
    .b-pricing-note,
    .b-subsidy-copy,
    .flow-title,
    .flow-desc,
    .faq-answer > p,
    .b-closing-message
  ) {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
  }

  /* Use paired logical gutters so later overrides cannot move one side only. */
  #accuracy .accuracy-b-fact--speed {
    padding-inline: 22px !important;
  }

  #integration .v3-showcase-content {
    padding-inline: 18px !important;
  }

  #integration .v3-method-card,
  #integration .v3-method-card:first-child {
    padding-inline: 23px !important;
  }

  #flow .flow-step {
    padding-inline: 40px !important;
  }

  #faq .faq-question {
    padding-inline: 18px;
  }

  #faq .faq-answer > p {
    padding-inline: 18px !important;
  }
}

@media (max-width: 360px) {
  #flow .flow-step {
    padding-inline: 30px !important;
  }

  #faq .faq-question {
    padding-inline: 8px;
  }
}

@media (max-width: 380px) {
  #fit .fit-checker-head {
    gap: 10px;
    padding-right: 16px;
    padding-left: 16px;
  }

  #fit .fit-checker-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  #fit .fit-checker-head h3 {
    font-size: 14px !important;
  }

  #fit .fit-live-score {
    flex: 0 0 86px;
    min-width: 86px;
    padding-left: 8px;
  }

  #fit .fit-live-score strong {
    font-size: 1.75rem;
  }
}

/* Mobile UI review 2026-08-24: deliberate line breaks, balanced gutters and compact CTAs. */
@media (max-width: 720px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .p2-cta .btn,
  #contact .b-closing-cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 12px !important;
    padding-left: 12px !important;
    font-size: clamp(.78rem, 3.55vw, .9rem) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  /* Use a normal arrow glyph instead of the line-and-diamond construction. */
  #accuracy .accuracy-b-arrow {
    position: relative;
    display: flex;
    width: 52px !important;
    min-width: 52px !important;
    height: 38px !important;
    align-self: end;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0 17px !important;
    background: none !important;
    color: #a86f13;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    line-height: 1;
  }

  #accuracy .accuracy-b-arrow::before {
    content: "\2192";
  }

  #accuracy .accuracy-b-arrow::after {
    content: none !important;
  }

  #accuracy .accuracy-b-arrow small {
    top: 28px !important;
    left: 50% !important;
    width: 72px !important;
    color: #514c44;
    font-family: var(--font-jp);
    font-size: .53rem !important;
    line-height: 1.35;
    transform: translateX(-50%) !important;
  }

  #accuracy .accuracy-b-lead {
    width: 100%;
    max-width: none;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #accuracy .accuracy-b-fact--speed {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 24px 22px 26px !important;
  }

  #accuracy .accuracy-b-fact--speed .accuracy-b-fact-icon {
    margin: 0 auto;
  }

  #accuracy .accuracy-b-fact--speed > div {
    width: 100%;
    min-width: 0;
  }

  #accuracy .accuracy-b-fact--speed strong .speed-title-line {
    display: block;
    white-space: nowrap;
  }

  #accuracy .accuracy-b-fact--speed strong,
  #accuracy .accuracy-b-fact--speed p,
  #accuracy .accuracy-b-condition-note {
    width: 100%;
    text-align: left;
  }

  #accuracy .accuracy-b-condition-note {
    margin: 14px 22px 0;
    width: auto;
  }

  #integration .v3-showcase-content {
    padding: 36px 18px !important;
  }

  #integration .v3-showcase-content .section-title {
    width: 100%;
    max-width: none !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  #integration .v3-showcase-content .section-title > span {
    display: block;
    white-space: nowrap;
  }

  #integration .v3-showcase-content .section-title > br {
    display: none;
  }

  #integration .v3-showcase-content .v3-step-note,
  #integration .v3-method-card > p {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }

  #integration .operation-title {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }

  #integration .operation-title > span {
    display: block;
    font-size: 16px !important;
    line-height: 1.65;
    white-space: nowrap;
  }

  #security .b-security-panel h3 > .security-title-copy {
    display: block;
    width: auto;
    height: auto;
    flex: 0 1 auto;
    background: none;
    font: inherit;
    line-height: 1.75;
    white-space: nowrap;
  }

  #security .security-title-copy br {
    display: block;
  }

  #security .b-security-panel h3 {
    font-size: 14px !important;
  }

  #fit .fit-checker-head h3 > span {
    display: block;
    white-space: nowrap;
  }

  #fit .fit-checker-head h3 {
    font-size: clamp(1rem, 4.7vw, 1.15rem) !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }

  #pricing .pricing-title {
    font-size: 19px !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
  }

  #pricing .pricing-title .title-line,
  #pricing .pricing-title .title-phrase {
    display: block !important;
    white-space: nowrap;
  }

  #pricing .b-pricing-conditions strong {
    font-size: clamp(1rem, 4.7vw, 1.15rem) !important;
    line-height: 1.7 !important;
    white-space: nowrap;
  }

  #pricing .b-subsidy-highlight {
    font-size: clamp(1.15rem, 5.7vw, 1.4rem) !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }

  #pricing .b-subsidy-button {
    padding-right: 10px;
    padding-left: 10px;
    font-size: clamp(.72rem, 3.3vw, .8rem) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  /* Widen the timeline copy while keeping its heading and body on one shared center axis. */
  #flow > .container {
    width: min(100% - 24px, 1180px);
  }

  #flow .flow-step {
    padding: 20px 40px 28px !important;
  }

  #flow .flow-steps::before,
  #flow .flow-step::before {
    left: 16px;
  }

  #flow .flow-title,
  #flow .flow-desc {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  #flow .flow-title {
    font-size: clamp(.82rem, 4vw, 1rem) !important;
    letter-spacing: 0 !important;
    text-align: center;
    white-space: nowrap;
  }

  #flow .flow-desc {
    text-align: left;
  }

  #faq .faq-answer p {
    padding: 0 18px 24px !important;
  }

  #faq .faq-item.active .faq-answer {
    max-height: 600px;
  }
}

@media (max-width: 360px) {
  #flow .flow-step {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }

  #faq .faq-question {
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
  }

  #faq .faq-q-mark {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 340px) {
  #fit .fit-checker-head {
    gap: 10px;
    padding-right: 16px;
    padding-left: 16px;
  }

  #fit .fit-checker-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  #fit .fit-checker-head h3 {
    font-size: 14px !important;
  }

  #fit .fit-live-score {
    flex: 0 0 86px;
    min-width: 86px;
    padding-left: 8px;
  }

  #fit .fit-live-score strong {
    font-size: 1.75rem;
  }

  #pricing .b-pricing-button {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }

}

@media (max-width: 380px) {
  #learning .b-learning-rules header > span {
    gap: 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  #learning .b-learning-rules {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #learning .b-learning-example > div {
    grid-template-columns: 32px minmax(0, 1fr) 14px minmax(0, 1fr);
    gap: 4px;
    padding-inline: 0;
  }

  #learning .b-learning-example span {
    width: 32px;
    height: 32px;
    font-size: .72rem;
  }

  #learning .b-learning-example b {
    min-width: 0;
    padding: 12px 4px;
    font-size: .78rem;
  }

  #learning .b-learning-example strong {
    min-width: 0;
    font-size: .78rem;
  }

  #learning .b-learning-example i {
    font-size: .9rem;
  }
}

/* Mobile density pass v31: justified body copy, two-row software marquee and compact UI cards. */
#integration .software-marquee {
  display: grid;
  overflow: hidden;
  gap: 4px;
}

#integration .software-marquee-row {
  min-width: 0;
  overflow: hidden;
}

#integration .software-marquee-track,
#integration .software-marquee-group {
  display: flex;
  width: max-content;
  align-items: center;
}

#integration .software-marquee-track {
  margin-inline: auto;
}

#integration .software-marquee-group[aria-hidden="true"] {
  display: none;
}

@keyframes software-marquee-forward {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes software-marquee-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 720px) {
  /* Fill every automatic line to the same right edge; the final line stays natural. */
  body section[id]:not(#hero) .container p {
    text-align: justify !important;
    text-align-last: left;
    text-justify: inter-character;
    text-wrap: wrap !important;
  }

  body section#steps[id] > .container > p.v3-step-note,
  body section#integration[id] > .container > p.v3-step-note,
  body section[id]:not(#hero) .container .problems-conclusion p {
    text-align: center !important;
    text-align-last: center;
  }

  body section#steps[id] .container .product-tour p {
    text-align: left !important;
    text-align-last: left;
  }

  /* Two continuous rows replace the tall accounting-software list. */
  #integration .support-list-block-software {
    margin-top: 30px;
  }

  #integration .software-marquee {
    width: calc(100vw - 24px);
    max-width: none;
    margin-right: 0 !important;
    margin-left: calc(50% - 50vw + 12px) !important;
    padding: 11px 0;
    border-top: 1px solid #dcd6cc;
    border-bottom: 1px solid #dcd6cc;
    gap: 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }

  #integration .software-marquee-track {
    margin: 0;
    animation: software-marquee-forward 28s linear infinite;
    will-change: transform;
  }

  #integration .software-marquee-row--reverse .software-marquee-track {
    animation-name: software-marquee-reverse;
    animation-duration: 32s;
  }

  #integration .software-marquee-group,
  #integration .software-marquee-group[aria-hidden="true"] {
    display: flex;
    padding-right: 8px;
    gap: 8px;
  }

  #integration .software-marquee .v3-range-chip {
    flex: 0 0 auto;
    padding: 7px 13px !important;
    border: 1px solid rgba(180, 134, 50, .2);
    border-radius: 999px;
    background: #faf7f0;
    color: #49453e;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
  }

  #integration .software-marquee .v3-range-chip::before {
    content: none !important;
  }

  /* Put the clock at the left and use the full remaining width for copy. */
  #accuracy .accuracy-b-fact--speed {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: start;
    gap: 15px !important;
    padding: 20px 18px 22px !important;
  }

  #accuracy .accuracy-b-fact--speed .accuracy-b-fact-icon {
    width: 50px;
    height: 50px;
    margin: 5px 0 0 !important;
  }

  #accuracy .accuracy-b-fact--speed > div {
    min-width: 0;
  }

  #accuracy .accuracy-b-fact--speed p {
    margin-top: 8px;
    font-size: .72rem;
    line-height: 1.75;
  }

  /* Keep the complete interactive walkthrough within roughly one phone screen. */
  #steps .product-tour {
    margin-bottom: 22px;
    border-radius: 14px;
  }

  #steps .product-tour-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  #steps .product-tour-step {
    min-height: 58px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    padding: 7px 8px;
    border-radius: 9px;
  }

  #steps .product-tour-step-copy {
    gap: 0;
  }

  #steps .product-tour-step-copy strong {
    font-size: .7rem;
    line-height: 1.35;
  }

  #steps .product-tour-step-no {
    font-size: .62rem;
  }

  #steps .product-tour-windowbar {
    height: 34px;
    padding: 0 10px;
  }

  #steps .product-tour-brand {
    font-size: .66rem;
  }

  #steps .product-tour-mon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    font-size: .48rem;
  }

  #steps .product-tour-caption {
    font-size: .48rem;
  }

  #steps .product-tour-canvas {
    height: 390px;
    min-height: 390px;
    padding: 12px;
    overflow: hidden;
  }

  #steps .product-tour-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #steps .tour-panel-head {
    gap: 8px;
    margin-bottom: 8px;
  }

  #steps .tour-panel-eyebrow {
    margin-bottom: 3px;
    font-size: .53rem;
    letter-spacing: .06em;
  }

  #steps .tour-panel-head h3 {
    margin-bottom: 3px;
    font-size: .92rem;
    line-height: 1.35;
  }

  #steps .tour-panel-head p {
    font-size: .61rem;
    line-height: 1.45;
  }

  #steps .tour-ui-label,
  #steps .tour-status {
    padding: 5px 7px;
    font-size: .5rem;
    white-space: nowrap;
  }

  #steps .tour-upload-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
  }

  #steps .tour-field {
    padding: 8px 22px 7px 9px;
    gap: 2px;
  }

  #steps .tour-field > span {
    font-size: .5rem;
  }

  #steps .tour-field > strong {
    font-size: .61rem;
  }

  #steps .tour-field > i {
    right: 8px;
  }

  #steps .tour-dropzone {
    min-height: 0;
    padding: 10px;
    border-radius: 10px;
  }

  #steps .tour-upload-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 7px;
  }

  #steps .tour-upload-icon svg {
    width: 17px;
  }

  #steps .tour-dropzone > strong {
    font-size: .76rem;
  }

  #steps .tour-dropzone > span {
    margin-top: 3px;
    font-size: .56rem;
  }

  #steps .tour-dropzone button {
    margin: 8px 0 6px;
    padding: 8px 16px;
    font-size: .6rem;
  }

  #steps .tour-dropzone small {
    font-size: .49rem;
  }

  #steps .tour-ai-grid {
    min-height: 0;
    gap: 7px;
  }

  #steps .tour-receipt {
    width: 90px;
    height: 178px;
    padding: 16px 9px 10px;
  }

  #steps .tour-receipt-shop {
    font-size: .45rem;
  }

  #steps .tour-analysis-card {
    padding: 8px 7px;
  }

  #steps .tour-confidence strong {
    font-size: 1.25rem;
  }

  #steps .tour-analysis-list div {
    min-height: 39px;
    padding: 4px 6px;
  }

  #steps .tour-analysis-list dt,
  #steps .tour-analysis-list dd {
    font-size: .54rem;
  }

  #steps .tour-review-summary {
    margin-bottom: 7px;
    padding: 7px;
  }

  #steps .tour-review-summary > div {
    gap: 2px;
  }

  #steps .tour-review-summary > div + div {
    padding-left: 6px;
  }

  #steps .tour-review-summary span,
  #steps .tour-review-summary strong {
    font-size: .52rem;
  }

  #steps .tour-journal-head,
  #steps .tour-journal-row {
    grid-template-columns: 34px minmax(0, 1.2fr) minmax(65px, .85fr) 52px;
    min-width: 0;
    padding: 0 6px;
  }

  #steps .tour-journal-head {
    min-height: 28px;
  }

  #steps .tour-journal-row {
    min-height: 48px;
    font-size: .55rem;
  }

  #steps .tour-edit-field {
    margin-right: 5px;
    padding: 6px 14px 6px 5px;
  }

  #steps .tour-review-actions {
    padding-top: 8px;
  }

  #steps .tour-review-actions > span {
    font-size: .5rem;
  }

  #steps .tour-review-actions > span i {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }

  #steps .tour-review-actions button {
    padding: 8px 10px;
    font-size: .54rem;
  }

  #steps .tour-export-flow {
    display: block;
    min-height: 0;
  }

  #steps .tour-export-card {
    padding: 11px;
  }

  #steps .tour-export-card-head {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  #steps .tour-export-card .tour-field {
    margin-bottom: 6px;
  }

  #steps .tour-export-card button {
    margin-top: 8px;
    padding: 9px;
    font-size: .62rem;
  }

  #steps .tour-export-arrow,
  #steps .tour-accounting-card {
    display: none;
  }

  #steps .product-tour-foot {
    min-height: 28px;
    padding: 0 10px;
    justify-content: center;
  }

  #steps .product-tour-foot p {
    display: none;
  }
}

@media (max-width: 360px) {
  #steps .product-tour-canvas {
    height: 370px;
    min-height: 370px;
    padding: 10px;
  }

  #steps .product-tour-step {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  #integration .software-marquee-row {
    overflow-x: auto;
    scrollbar-width: none;
  }

  #integration .software-marquee-row::-webkit-scrollbar {
    display: none;
  }

  #integration .software-marquee-track,
  #integration .software-marquee-row--reverse .software-marquee-track {
    animation: none;
    transform: none;
  }

  #integration .software-marquee-group[aria-hidden="true"] {
    display: none;
  }
}

/* Mobile typography and document marquee refinement v33. */
#accuracy .document-marquee {
  display: block !important;
  width: 100%;
  overflow: hidden;
}

#accuracy .document-marquee-row {
  display: block !important;
  min-width: 0;
  overflow: hidden;
}

#accuracy .document-marquee-track,
#accuracy .document-marquee-group {
  display: flex !important;
  flex-flow: row nowrap !important;
  width: max-content;
  align-items: center;
}

#accuracy .document-marquee-track {
  margin-inline: auto;
}

#accuracy .document-marquee-group[aria-hidden="true"] {
  display: none !important;
}

@keyframes document-marquee-forward {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  /* Japanese can wrap between characters, avoiding stretched phrase-sized gaps. */
  body section[id]:not(#hero) .container p {
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-spacing: 0 !important;
    letter-spacing: .02em;
  }

  #accuracy .document-marquee {
    width: calc(100vw - 24px);
    max-width: none;
    margin-right: 0 !important;
    margin-left: calc(50% - 50vw + 12px) !important;
    padding: 10px 0;
    overflow: hidden;
    border-top: 1px solid #dcd6cc;
    border-right: 0;
    border-bottom: 1px solid #dcd6cc;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }

  #accuracy .document-marquee-row {
    width: 100%;
    height: 34px;
    overflow: hidden;
  }

  #accuracy .document-marquee-track {
    margin: 0;
    min-width: max-content;
    animation: document-marquee-forward 24s linear infinite;
    will-change: transform;
  }

  #accuracy .document-marquee-group,
  #accuracy .document-marquee-group[aria-hidden="true"] {
    display: flex !important;
    flex-flow: row nowrap !important;
    flex: 0 0 auto;
    padding-right: 8px;
    gap: 8px;
  }

  #accuracy .document-marquee span,
  #accuracy .document-marquee span:last-child {
    display: flex !important;
    flex: 0 0 auto !important;
    min-width: max-content;
    width: max-content !important;
    min-height: 34px;
    grid-column: auto;
    padding: 6px 12px;
    border: 1px solid rgba(180, 134, 50, .2);
    border-radius: 999px;
    background: #faf7f0;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    align-items: center;
  }

  #accuracy .document-marquee span::before {
    width: 13px;
    height: 16px;
    margin-right: 5px;
    background-size: 6px 1px, 6px 1px, 4px 1px;
    background-position: 3px 5px, 3px 8px, 3px 11px;
  }

  #accuracy .document-marquee span::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  #accuracy .document-marquee-row {
    overflow-x: auto;
    scrollbar-width: none;
  }

  #accuracy .document-marquee-row::-webkit-scrollbar {
    display: none;
  }

  #accuracy .document-marquee-track {
    animation: none;
    transform: none;
  }

  #accuracy .document-marquee-group[aria-hidden="true"] {
    display: none !important;
  }
}

/* Mobile heading rhythm and frameless integration showcase v35. */
@media (max-width: 720px) {
  #accuracy .accuracy-b-facts--single {
    width: calc(100vw - 48px);
    max-width: none;
    margin-right: 0 !important;
    margin-left: calc(50% - 50vw + 24px) !important;
  }

  #accuracy .accuracy-b-fact--speed {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 16px 14px 18px !important;
  }

  #accuracy .accuracy-b-fact--speed .accuracy-b-fact-icon {
    width: 38px;
    height: 38px;
  }

  #accuracy .accuracy-b-fact--speed strong {
    font-size: 17px !important;
    line-height: 1.5;
  }

  #integration .v3-showcase-content .section-title {
    font-size: 22px !important;
    line-height: 1.55 !important;
    letter-spacing: .01em !important;
  }

  #integration .v3-showcase {
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* One mobile scale for the two-tone marketing headings v36. */
@media (max-width: 720px) {
  #learning > .container > .marketing-title,
  #roi > .container > .marketing-title,
  #crm > .container > .marketing-title,
  #security > .container > .marketing-title,
  #fit > .container > .marketing-title,
  #voice > .container > .marketing-title {
    font-size: 22px !important;
    line-height: 1.55 !important;
    letter-spacing: .01em !important;
  }
}

/* One scale for every primary section heading on mobile v37. */
@media (max-width: 720px) {
  body section:not(#hero) h2.section-title,
  #contact .closing-title {
    font-size: 22px !important;
    line-height: 1.55 !important;
    letter-spacing: .01em !important;
  }
}