/* Shared responsive layer. Load after each page's own stylesheet. */
:root {
  --layout-unit: clamp(.875px, calc(100vw / 1440), 1.12px);
  --layout-rail: min(calc(var(--layout-unit) * 1024), calc(100% - 48px));
}
html { -webkit-text-size-adjust: 100%; }
main, section, nav, form, fieldset { min-width: 0; }
input, select, textarea { max-width: 100%; font-family: var(--font-site); }
select, textarea { color: inherit; }
.fv-copy, .fv-heading-group { display: contents; }
.hero-placeholder { max-width: 1920px; margin-inline: auto; }
.header-inner { width: var(--layout-rail); max-width: none; padding-inline: 0; }
.brand-tagline span { display: inline; }
.header-cta, .menu-toggle, .menu-close, .material-dialog-close,
.sim-dialog-heading button { min-height: 44px; }
.menu-toggle, .material-dialog-close, .sim-dialog-heading button { min-width: 44px; }
.header-cta { flex: none; }
.mobile-menu { overscroll-behavior: contain; }
.menu-line-icon { display: none; }
.material-dialog, .sim-dialog { overscroll-behavior: contain; }
.sim-dialog { margin: auto; }
.fv-material-controls .material-arrow { width: 44px; height: 44px; }
.footer-columns a, .footer-legal a { overflow-wrap: anywhere; }
.footer-simulation span { white-space: normal; }
.comparison-cell-content { display: contents; }
.voices-pagination { display: none; }
.service-overview-summary {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: .45em .8em;
}
.faq-page-answer > p, .faq-question summary > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.faq-breadcrumb ol, .pricing-breadcrumb ol, .works-breadcrumb ol,
.contact-breadcrumb ol { flex-wrap: wrap; }
.faq-breadcrumb li, .pricing-breadcrumb li, .works-breadcrumb li,
.contact-breadcrumb li { min-width: 0; }

/* Keep desktop proportions, but stop type shrinking at tablet widths or
   growing indefinitely on ultrawide screens. */
@media (min-width: 700px) {
  .problem-reframe { --problem-unit: var(--layout-unit); }
  .service-overview { --overview-unit: var(--layout-unit); }
  .service-points { --points-unit: var(--layout-unit); }
  .simulation-guide { --simulation-unit: var(--layout-unit); }
  .service-comparison { --comparison-unit: var(--layout-unit); }
  .service-process { --process-unit: var(--layout-unit); }
  .service-voices { --voices-unit: var(--layout-unit); }
  .client-partners { --partners-unit: var(--layout-unit); }
  .service-faq, .faq-page { --faq-unit: var(--layout-unit); }
  .site-footer { --footer-unit: var(--layout-unit); }
  .pricing-page { --pricing-unit: var(--layout-unit); }
  .works-page { --works-unit: var(--layout-unit); }
  .simulation-page { --sim-unit: var(--layout-unit); }
  .contact-page { --contact-unit: var(--layout-unit); }
  .problem-reframe .problem-panel, .service-overview-panel, .service-points-panel,
  .simulation-guide-heading, .simulation-guide-options, .comparison-panel,
  .process-panel, .voices-panel, .partners-heading, .faq-panel, .footer-inner,
  .faq-page-inner, .pricing-inner, .contact-inner, .sim-inner { width: var(--layout-rail); }
  .pricing-faq .faq-panel { width: 100%; }
  .works-inner { width: min(calc(var(--layout-unit) * 1152), calc(100% - 48px)); }
  .point-details, .process-step-copy p, .comparison-intro { font-size: max(14px, calc(var(--layout-unit) * 15)); }
  .point-note, .comparison-notes { font-size: max(12px, calc(var(--layout-unit) * 12)); }
  .service-overview-description { font-size: max(15px, calc(var(--layout-unit) * 16)); line-height: 1.9; }
  .simulation-guide-options dt { font-size: max(14px, calc(var(--layout-unit) * 16)); }
  .simulation-guide-options dd, .simulation-guide-select select { font-size: 16px; }
  .footer-columns a { font-size: max(15px, calc(var(--layout-unit) * 18)); }
  .footer-service p, .footer-legal a { font-size: max(12px, calc(var(--layout-unit) * 13)); line-height: 1.8; }
  .footer-copyright { font-size: 12px; line-height: 1.7; }
  .service-features > .container { width: min(820px, calc(100% - 80px)); }
  .service-features-description { font-size: clamp(20px, 2.24vw, 32px); }
  .consideration { --message-unit: min(1.4px, calc(100vw / 1072)); }
  .comparison-intro { white-space: normal; }
  .comparison-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .comparison-table { min-width: 620px; font-size: max(14px, calc(var(--layout-unit) * 16)); }
  .faq-page-tab { min-height: 52px; white-space: normal; }
  .faq-page-contact { min-height: 54px; }
  .faq-page-cta { width: min(450px, 100%); }
  .pricing-note { font-size: max(14px, calc(var(--layout-unit) * 16)); }
  .pricing-section-lead { font-size: max(15px, calc(var(--layout-unit) * 17)); }
  .pricing-inclusion-grid p { font-size: max(14px, calc(var(--layout-unit) * 15)); }
}

/* Switch the navigation before the brand, menu and CTA run into each other. */
@media (max-width: 959px) {
  .header-brand { flex-direction: column; align-items: flex-start; gap: 2px; }
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle:not([hidden]) { display: block; }
  .mobile-menu .menu-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #06c755;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
  }
  .mobile-menu .menu-line:hover { opacity: .85; }
  .mobile-menu .menu-line:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .menu-line-icon { display: block; flex: none; width: 32px; height: 32px; object-fit: contain; }
}

/* Add space above the desktop copy while preserving its internal gaps. */
@media (min-width: 1100px) {
  .fv-audience-label { top: calc(var(--fv-copy-unit) * 35); }
  .fv-headline { top: calc(var(--fv-copy-unit) * 15); }
  .fv-service-label { top: calc(var(--fv-copy-unit) * 116); }
  .fv-benefits-image { top: calc(var(--fv-copy-unit) * 308); }
  .fv-cta-card { margin-top: calc(var(--fv-unit) * -305); }
}

/* The reference's vertical FV also gives portrait tablets a readable layout.
   Only the three illustrations use absolute coordinates inside their stage. */
@media (max-width: 1099px) {
  .hero-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(24px, 4vw, 40px);
    background: #fff;
    isolation: isolate;
  }
  .hero-placeholder .hero-placeholder-image {
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    width: 100%;
    height: calc(100% - 230px);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
  }
  .fv-copy { display: block; width: min(600px, calc(100% - 32px)); }
  .fv-audience-label {
    position: static;
    width: fit-content;
    max-width: 100%;
    height: auto;
    min-height: 32px;
    margin: 0 auto;
    padding: 7px 12px;
    font-size: clamp(13px, 3.7vw, 20px);
  }
  .fv-heading-group { display: block; position: relative; margin-top: 14px; }
  .fv-headline {
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    font-size: clamp(26px, 7.6vw, 44px);
    line-height: 1.05;
    text-align: center;
  }
  .fv-headline-first, .fv-headline-second { position: static; display: block; transform: none; }
  .fv-headline-first { padding-right: 28%; }
  .fv-headline-second { margin-top: 4px; }
  .fv-service-label {
    top: 6%;
    left: auto;
    right: 2%;
    width: 33%;
    height: 36%;
    font-size: clamp(12px, 3.3vw, 20px);
  }
  .fv-service-label::before, .fv-service-label::after { height: 1px; }
  .fv-service-label::before { top: 0; }
  .fv-service-label::after { bottom: 0; }
  .fv-benefits-image { position: static; width: min(560px, 90%); margin: 22px auto 0; }
  .fv-artwork { position: relative; inset: auto; width: min(680px, 100%); aspect-ratio: 1.42; margin-top: 0; overflow: hidden; }
  .fv-artwork-pc { left: -7%; top: 1%; width: 100%; filter: drop-shadow(3px 8px 9px rgb(0 0 0 / 18%)); }
  .fv-artwork-sp { left: auto; right: 0; top: 27%; width: 26%; filter: drop-shadow(2px 5px 5px rgb(0 0 0 / 24%)); }
  .fv-artwork-bear { left: auto; right: 21%; top: 39%; width: 28%; filter: drop-shadow(2px 4px 4px rgb(0 0 0 / 20%)); }
  .fv-cta-card {
    --fv-unit: 1px;
    z-index: 1;
    width: min(560px, calc(100% - 36px));
    max-width: none;
    margin: -30px auto 0;
    padding: 24px clamp(20px, 6.4vw, 40px) 20px;
    border-radius: 28px;
    box-shadow: 0 12px 36px rgb(0 0 0 / 9%);
  }
  .fv-cta-button { min-height: 54px; padding: 12px 10px; font-size: clamp(16px, 4.4vw, 21px); }
  .fv-cta-secondary { border-width: 1.5px; }
  .fv-cta-divider { height: 32px; gap: 14px; font-size: 15px; }
  .fv-material { position: relative; margin-top: 20px; padding-top: 28px; }
  .fv-material-carousel { width: calc(100% - 50px); max-width: 330px; margin: 0 auto 0 0; }
  .fv-material-controls .material-arrow { width: 44px; height: 44px; padding: 11px; }
  .fv-material-expand { font-size: 11px; }
  .fv-material-guide { left: auto; right: -12px; top: 28px; bottom: auto; width: clamp(48px, 13vw, 68px); }
  .fv-bear-bubble { position: absolute; top: auto; bottom: calc(100% + 4px); left: auto; right: 14px; margin: 0; padding: 5px 7px; border-width: 1px; border-radius: 10px; font-size: 10px; transform: rotate(3deg); white-space: nowrap; }
  .fv-bear-bubble::after { right: 14px; left: auto; bottom: -5px; width: 8px; height: 8px; border-width: 1px; }
  .service-features { padding-top: 56px; }
  .service-points-panel, .process-panel, .voices-panel, .faq-panel { padding-inline: 28px; }
  .service-points-grid { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; gap: 22px; }
  .point-card { min-height: 0; padding: 30px; }
  .point-callout { font-size: 20px; padding: 8px 16px; }
  .point-illustration { width: 180px; height: 180px; margin: -24px auto -14px; }
  .point-details { font-size: 15px; max-width: 380px; margin-inline: auto; }
  .point-note { max-width: 380px; margin-inline: auto; font-size: 12px; line-height: 1.8; }
  .simulation-guide-heading { height: auto; padding: 24px 0 32px 100px; }
  .simulation-guide-person { top: auto; bottom: 8px; left: 0; width: 116px; height: 116px; }
  .simulation-guide-eyebrow { font-size: 15px; }
  .simulation-guide h2 { font-size: clamp(23px, 3vw, 30px); }
  .simulation-guide-options { gap: 20px; padding: 24px; }
  .simulation-guide-select select { padding-right: 30px; background-position: right 10px center; }
  .comparison-panel { padding-inline: 24px; }
  .comparison-scroll-hint { display: block; margin-top: 24px; font-size: 12px; color: #666; }
  .comparison-scroll { margin-top: 12px; padding-bottom: 12px; }
  .comparison-table tbody th { position: sticky; left: 0; z-index: 1; box-shadow: 3px 0 0 #fff; }
  .comparison-table .comparison-empty { position: sticky; left: 0; z-index: 2; background: #fff; }
  .pricing-inclusion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-rate, .pricing-inclusions { padding-inline: 28px; }
  .pricing-flow { padding-inline: 24px; }
  .footer-columns { grid-template-columns: 1fr 1fr 1.3fr; gap: 24px; }
  .footer-columns a, .footer-legal a { min-height: 44px; }
  .footer-links ul { gap: 8px; }
  .simulation-page { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .problem-reframe .problem-panel, .service-overview-panel { padding-inline: 28px; }
  .problem-reframe .problem-illustration { width: min(170px, 100%); height: 170px; }
  .problem-reframe .problem-list { gap: 18px; }
  .problem-reframe .problem-list h3 { font-size: 15px; line-height: 1.8; }
  .service-flow { width: min(600px, 100%); }
  .service-overview-description > span { display: block; }
  .simulation-guide-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simulation-guide-options > div:first-child { grid-column: 1 / -1; }
  .process-step { padding: 30px 24px 24px 44px; }
  .process-step h3 { font-size: 18px; }
  .voice-card { padding: 20px; }
  .voice-profile { flex-wrap: wrap; }
  .works-category { padding: 28px 20px; }
  .works-grid { column-gap: 16px; }
  .works-card h3 { font-size: 17px; }
  .faq-category-panel { padding: 32px 24px; }
}

@media (max-width: 699px) {
  html { scroll-padding-top: 78px; }
  .site-header { height: 58px; }
  .header-inner { width: calc(100% - 32px); gap: 6px; }
  .header-brand { flex-direction: row; align-items: center; gap: 6px; flex-shrink: 1; min-width: 0; }
  .brand { width: clamp(68px, 22vw, 120px); min-width: 54px; flex-shrink: 1; }
  .brand-tagline { display: block; flex: none; font-size: clamp(8px, 2.4vw, 9px); line-height: 1.3; }
  .brand-tagline span { display: block; }
  .header-cta { padding: 8px; font-size: clamp(10px, 2.933vw, 11px); line-height: 1.5; min-height: 40px; }
  .menu-toggle { position: relative; width: 44px; height: 44px; padding: 10px; }
  .menu-toggle span { position: absolute; left: 10px; right: 10px; top: 17px; height: 2px; margin: 0; }
  .menu-toggle span + span { top: 25px; }
  .fv-copy { --fv-headline-size: clamp(26px, 7.6vw, 44px); }
  .fv-headline { font-size: var(--fv-headline-size); }
  .fv-headline strong { font-size: 1.25em; }
  .fv-headline-first { padding-right: 0; }
  .fv-headline-second { letter-spacing: 0.05em; }
  /* デザイン (4 × 1.25em) + を (1em) = 6em; anchor the
     smaller aside after this centered line without shifting the headline. */
  .fv-service-label {
    left: calc(50% + var(--fv-headline-size) * 3 + 4px);
    right: auto;
    width: clamp(72px, 20vw, 96px);
    height: clamp(22px, 6vw, 28px);
    font-size: clamp(10px, 2.7vw, 13px);
  }
  .fv-cta-card { padding-top: 24px; }
  .fv-material {
    --fv-preview-width: min(330px, calc(100% - 50px));
    --fv-guide-width: clamp(40px, 10vw, 52px);
    margin-top: 16px;
    padding-top: 44px;
  }
  .fv-material-carousel { width: var(--fv-preview-width); margin: 0 auto; }
  /* Keep the document centered and the bear clear of the next-slide button.
     Place the bubble beside the bear to reduce space above the document. */
  .fv-material-guide {
    top: 12px;
    left: calc((100% + var(--fv-preview-width)) / 2 + 6px);
    right: auto;
    width: var(--fv-guide-width);
  }
  .fv-bear-bubble { top: -2px; right: calc(100% + 6px); bottom: auto; transform: none; }
  .fv-bear-bubble::after { top: 9px; right: -5px; bottom: auto; transform: rotate(-45deg); }
  .service-features > .container { width: calc(100% - 32px); }
  .service-features-description { margin: 22px 16px 0; font-size: clamp(14px, 3.9vw, 22px); line-height: 1.9; }
  .consideration { margin-top: 24px; padding: 36px 16px 40px; }
  .consideration-inner { width: 100%; }
  .consideration h2 {
    contain: none;
    padding: 10px 8px;
    font-size: calc((100vw - 48px) / 11.6);
    line-height: 1.4;
    white-space: nowrap;
  }
  .consideration h2 > span { display: inline; }
  .consideration-copy {
    width: 100%;
    margin-top: 18px;
    font-size: calc((100vw - 32px) / 15.4);
    line-height: 1.8;
  }
  .consideration-line--brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .12em;
    height: auto;
    white-space: nowrap;
  }
  .consideration-name { height: 1em; margin: 0; font-size: 1em; }
  .problem-reframe .problem-panel { padding-inline: clamp(10px, 3vw, 18px); }
  .problem-reframe .problem-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(6px, 2vw, 12px);
    margin-top: 24px;
  }
  .problem-reframe .problem-list li { display: block; }
  .problem-reframe .problem-illustration { width: min(85%, 136px); height: auto; aspect-ratio: 1; }
  .problem-reframe .problem-list h3 {
    margin-top: 10px;
    font-size: clamp(12px, 3vw, 16px);
    line-height: 1.7;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .problem-reframe .problem-list h3 br { display: none; }
  .problem-cta { font-size: 14px; }
  .service-overview-panel { padding-inline: 16px; }
  .service-overview-summary { font-size: clamp(14px, 4vw, 18px); line-height: 1.6; }
  .service-flow { --service-flow-height: 160px; container-type: inline-size; height: var(--service-flow-height); aspect-ratio: auto; margin-top: 24px; }
  .service-flow-person { top: 15%; width: 29%; height: 70%; }
  .service-flow-brand { top: 30%; width: 29%; }
  .service-flow-brand span { font-size: clamp(13px, 3.6vw, 20px); }
  .service-flow-label {
    --service-flow-arrow-unit: min(calc(100cqw / 660), calc(var(--service-flow-height) / 190));
    font-size: 13px;
    transform: translate(-50%, -50%);
  }
  /* The SVG uses xMidYMid meet. Its curves pass through y=16.5 and
     y=182.25 around their midpoint, relative to a viewBox center at y=95. */
  .service-flow-send { top: calc(50% - var(--service-flow-arrow-unit) * 78.5); }
  .service-flow-return {
    /* Keep the label on the curve while clearing the bear on narrow phones. */
    top: calc(50% + var(--service-flow-arrow-unit) * 87.25 + clamp(0px, calc(310px - 100cqw), 6px));
    bottom: auto;
    font-size: 12px;
  }
  .service-overview-description { margin-top: 20px; font-size: 14px; }
  .service-points-panel, .process-panel, .voices-panel { padding-inline: 16px; }
  .service-points h2 { flex-direction: column; flex-wrap: nowrap; row-gap: 4px; white-space: nowrap; font-size: clamp(18px, 5vw, 24px); }
  .point-card { padding: 28px 16px; }
  .point-callout { font-size: 18px; }
  .point-details { font-size: 14px; }
  .simulation-guide {
    --guide-mobile-unit: clamp(.85px, calc(100vw / 375), 1.2px);
    padding: calc(var(--guide-mobile-unit) * 32) 16px calc(var(--guide-mobile-unit) * 36);
  }
  .simulation-guide-heading {
    display: grid;
    grid-template-areas: "eyebrow eyebrow" "person title";
    grid-template-columns: calc(var(--guide-mobile-unit) * 98) max-content;
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--guide-mobile-unit) * 8);
    width: 100%;
    height: auto;
    margin: 0 auto calc(var(--guide-mobile-unit) * 18);
    padding: 0;
  }
  .simulation-guide-person {
    grid-area: person;
    position: static;
    width: 100%;
    height: calc(var(--guide-mobile-unit) * 90);
    margin: 0;
  }
  .simulation-guide-eyebrow {
    grid-area: eyebrow;
    font-size: calc(var(--guide-mobile-unit) * 13);
    line-height: 1.6;
    white-space: nowrap;
  }
  .simulation-guide h2 {
    grid-area: title;
    margin: 0;
    font-size: calc(var(--guide-mobile-unit) * 24);
    line-height: 1.5;
    white-space: nowrap;
  }
  .simulation-guide-options {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--guide-mobile-unit) * 28);
    padding: calc(var(--guide-mobile-unit) * 24) calc(var(--guide-mobile-unit) * 15);
    border-radius: calc(var(--guide-mobile-unit) * 8);
  }
  .simulation-guide-options dt { font-size: max(15px, calc(var(--guide-mobile-unit) * 16)); }
  .simulation-guide-options dd {
    min-height: calc(var(--guide-mobile-unit) * 56);
    margin-top: calc(var(--guide-mobile-unit) * 8);
    padding: calc(var(--guide-mobile-unit) * 12) calc(var(--guide-mobile-unit) * 15);
    border-radius: calc(var(--guide-mobile-unit) * 8);
    font-size: max(16px, calc(var(--guide-mobile-unit) * 16));
  }
  .simulation-guide-options .simulation-guide-select { padding: 0; }
  .simulation-guide-select select {
    min-height: calc(var(--guide-mobile-unit) * 56 - 2px);
    padding: calc(var(--guide-mobile-unit) * 12) calc(var(--guide-mobile-unit) * 42) calc(var(--guide-mobile-unit) * 12) calc(var(--guide-mobile-unit) * 15);
    background-position: right calc(var(--guide-mobile-unit) * 20) center;
    background-size: calc(var(--guide-mobile-unit) * 14) auto;
    font-size: max(16px, calc(var(--guide-mobile-unit) * 16));
  }
  .simulation-guide-cta {
    max-width: none;
    min-height: calc(var(--guide-mobile-unit) * 72);
    margin-top: calc(var(--guide-mobile-unit) * 22);
    padding: calc(var(--guide-mobile-unit) * 16) 12px;
    border-width: 2px;
    font-size: calc(var(--guide-mobile-unit) * 17);
    gap: calc(var(--guide-mobile-unit) * 10);
  }
  .comparison-panel { padding-inline: 16px; }
  .comparison-scroll { overscroll-behavior-x: contain; }
  .comparison-table { width: 100%; min-width: 560px; border-spacing: 4px 3px; font-size: 13px; line-height: 1.4; }
  .comparison-table th, .comparison-table td { padding: 6px; vertical-align: middle; }
  .comparison-table thead th { height: 44px; font-size: 14px; }
  .comparison-table thead img { width: 94px; }
  .comparison-table tbody th, .comparison-table tbody td { height: 78px; }
  .comparison-table tbody .comparison-featured { font-size: 14px; }
  .comparison-table .comparison-cell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .comparison-table .comparison-cell-content > span { display: block; }
  .comparison-table .comparison-mark { flex: none; width: 24px; height: 24px; margin: 0; }
  .process-step-copy p { font-size: 14px; }
  .process-cta { font-size: 14px; }
  .service-voices .voices-panel { padding: 32px 22px 40px; }
  .voices-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .voices-grid::-webkit-scrollbar { display: none; }
  .voices-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  .voice-card { padding: 16px; scroll-snap-align: start; scroll-snap-stop: always; }
  .voices-pagination:not([hidden]) { display: flex; justify-content: center; margin-top: 16px; }
  .voices-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 8px;
  }
  .voices-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d9d9d9; }
  .voices-dot[aria-current="true"]::before { width: 11px; height: 11px; background: #000; }
  .voices-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .voices-pagination:not([hidden]) ~ .voices-more { margin-top: 20px; }
  .voice-profile { flex-wrap: nowrap; }
  .voice-industry { font-size: 11px; overflow-wrap: anywhere; }
  .client-partners h2 {
    max-width: none;
    font-size: min(18px, calc((100vw - 32px) / 20.6));
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .faq-panel { padding-inline: 16px; }
  .faq-item dt, .faq-item dd { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .faq-label { width: 32px; height: 32px; }
  .faq-item dt { font-size: 15px; }
  .footer-inner { width: calc(100% - 40px); }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .footer-columns a { font-size: 14px; }
  .footer-links ul { gap: 4px; }
  .footer-legal { gap: 4px 20px; }
  .pricing-rate { padding-inline: 16px; }
  .pricing-inclusions { padding-inline: 20px; }
  .pricing-inclusion-grid { grid-template-columns: 1fr; }
  .pricing-flow { padding-inline: 12px; }
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-option-name small { white-space: normal; }
  #sim-estimate-text { font-size: 16px; }
  .sim-dialog-heading button { width: 44px; height: 44px; }
  .contact-consent > div { font-size: 14px; }
  .material-dialog-image { max-height: calc(100dvh - 210px); }
}

@media (max-width: 359px) {
  .header-inner { gap: 4px; }
  .header-brand { gap: 4px; }
  .brand { width: 68px; }
  .brand-tagline { font-size: 8px; }
  .header-cta { padding-inline: 7px; font-size: 10px; }
  .fv-copy { --fv-headline-size: 26px; width: calc(100% - 24px); }
  .fv-headline { font-size: 26px; }
  .fv-cta-card { width: calc(100% - 28px); padding-inline: 20px; }
  .fv-cta-button { font-size: 15px; }
  .fv-bear-bubble { font-size: 9px; }
  .problem-cta, .process-cta { font-size: 13px; gap: 6px; }
  .process-step { padding-inline: 16px; }
  .voice-profile { gap: 10px; }
  .voice-portrait { width: 52px; }
  .voice-name { font-size: 15px; }
  .voice-affiliation { font-size: 11px; }
  .sim-option-copy { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sim-summary-heading { flex-wrap: wrap; gap: 4px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .site-header { position: relative; }
  .sim-summary { position: static; max-height: none; }
  .material-dialog-image { max-height: calc(100dvh - 170px); }
}