/* Consulting-first mirror. Existing brand tokens, with a clearer sales path. */
.focus-hero { min-height: auto; padding: 144px var(--sp-6) var(--sp-12); }
.focus-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-12); align-items: center; }
.focus-kicker { margin: 0 0 var(--sp-4); font: 400 12px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.focus-hero__h { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 3.7vw, 48px); line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
.focus-hero__h em { display: block; font-weight: inherit; color: var(--ai-primary-text); }
.focus-hero__lede { max-width: 48ch; margin: var(--sp-6) 0; font-size: 16px; line-height: 1.75; color: var(--text-muted); }
.tool-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-6); font-size: 13px; line-height: 1.5; }
.tool-strip > span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--base-card); color: var(--text-main); }
.focus-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.focus-link { display: inline-block; color: var(--ai-primary-text); font-size: 14px; font-weight: 500; line-height: 1.7; text-decoration: underline; text-underline-offset: 5px; }
.focus-link:hover { text-decoration-thickness: 2px; }
.focus-demo { margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--base-card); overflow: hidden; box-shadow: 0 20px 60px color-mix(in srgb, var(--ai-primary) 9%, transparent); }
.focus-demo__label { padding: var(--sp-4) var(--sp-6); font: 400 11px/1.6 var(--font-mono); color: var(--text-muted); border-bottom: 1px solid var(--hairline); }
.focus-demo figcaption { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6); border-top: 1px solid var(--hairline); }
.focus-demo strong { font-size: 20px; font-weight: 500; line-height: 1.5; }
.focus-demo figcaption > span { font-size: 15px; color: var(--text-muted); }
.focus-jumps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--hairline); padding-top: var(--sp-6); }
.focus-jumps a { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); text-align: center; color: var(--text-main); font-size: 14px; line-height: 1.6; }
.focus-jumps a:hover { color: var(--ai-primary-text); text-decoration: underline; text-underline-offset: 5px; }
.focus-jumps a > span { flex-shrink: 0; color: var(--text-subtle); font: inherit; font-variant-numeric: tabular-nums; }
.workflow-art { height: 206px; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); background: color-mix(in srgb, var(--ai-primary) 5%, var(--base-bg)); border-bottom: 1px solid var(--hairline); overflow: hidden; }
.focus-demo .workflow-art { height: 234px; border: 0; }
.receipt-stack { position: relative; flex: 0 0 82px; height: 134px; }
.receipt-paper { position: absolute; width: 73px; padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--base-card); border: 1px solid var(--hairline); box-shadow: 0 3px 8px color-mix(in srgb,var(--text-main) 8%,transparent); color: var(--text-main); font: 400 8px/1.5 var(--font-mono); }
.receipt-paper:last-child { top: 28px; left: 16px;  }
.receipt-paper > i { height: 3px; background: var(--hairline); }
.receipt-paper > i:nth-child(2) { width: 70%; }
.receipt-paper > b { border-top: 1px dashed var(--hairline); padding-top: var(--sp-2); font-weight: 500; }
.workflow-arrow { font-size: 22px; color: var(--ai-primary-text); }
.sheet-preview { flex: 1; max-width: 258px; min-width: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; background: var(--base-card); font-size: 9px; line-height: 1.7; color: var(--text-main); }
.sheet-preview__bar { display: flex; justify-content: space-between; padding: var(--sp-2); background: var(--ai-primary); color: var(--base-bg); font-size: 10px; }
.sheet-preview__row { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr; }
.sheet-preview__row > span { padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); white-space: nowrap; }
.sheet-preview__row--head { color: var(--text-muted); }
.sheet-preview__check { padding: var(--sp-2); color: var(--ai-primary-text); }
.workflow-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-6); }
.workflow-card { overflow: hidden; display: flex; flex-direction: column; background: var(--base-card); border: 1px solid var(--hairline); border-radius: var(--radius); }
.workflow-card__body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.workflow-card h3, .focus-offer h3 { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.35; margin: 0; text-wrap: balance; }
.workflow-card p, .focus-offer > p:not(.focus-kicker) { font-size: 15px; line-height: 1.8; color: var(--text-muted); margin: 0; }
.workflow-card .focus-link { margin-top: auto; }
.workflow-art--reply { flex-direction: column; gap: var(--sp-3); align-items: stretch; }
.message-bubble { align-self: flex-start; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--radius) var(--radius) var(--radius) 0; background: var(--base-card); font-family: var(--font-jp-sans); font-size: 14px; color: var(--text-main); }
.message-bubble small { font-family: var(--font-body); font-size: 10px; color: var(--text-muted); }
.message-bubble--reply { align-self: flex-end; border-radius: var(--radius) var(--radius) 0 var(--radius); background: color-mix(in srgb, var(--ai-primary) 10%, var(--base-card)); }
.reading-stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.reading-stack > span { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--hairline); background: var(--base-card); font: 400 10px/1.5 var(--font-mono); color: var(--text-main); }
.audio-preview { width: 145px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--base-card); color: var(--ai-primary-text); }
.audio-preview__play { font-size: 20px; }
.audio-preview__wave { display: flex; align-items: center; justify-content: space-between; height: 55px; gap: 2px; }
.audio-preview__wave i { width: 3px; height: var(--wave); border-radius: var(--radius-sm); background: var(--ai-primary); }
.audio-preview > span:last-child { grid-column: 1 / -1; font-size: 9px; line-height: 1.5; color: var(--text-muted); }
.focus-invite { margin: var(--sp-8) 0; padding: var(--sp-6) var(--sp-8); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); background: color-mix(in srgb,var(--ai-primary) 7%,var(--base-card)); border: 1px solid var(--hairline); border-radius: var(--radius); }
.focus-invite h3 { margin: 0 0 var(--sp-2); font: 400 24px/1.4 var(--font-display); }
.focus-invite p { font-size: 15px; line-height: 1.8; max-width: 62ch; color: var(--text-muted); }
.focus-invite .btn { flex-shrink: 0; }
.focus-offers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-6); }
.focus-offer { padding: var(--sp-8); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--base-card); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.focus-offer .focus-kicker { margin: 0; }
.focus-offer .focus-link { margin-top: auto; }
.focus-offer > .focus-offer__result { color: var(--ai-primary-text); font-weight: 500; }
.bento4--games.focus-games { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto; }
.bento4--games.focus-games > :nth-child(n) { grid-column: auto; grid-row: auto; }
.focus-games .gameb__shot { height: 260px; min-height: 0; min-width: 0; aspect-ratio: auto; flex: 0 0 260px; }
.focus-games .gameb__shot-media { object-fit: contain; }
.focus-games .gameb__body { padding: var(--sp-6); gap: var(--sp-4); flex-grow: 1; }
.focus-games .gameb__name { font-size: 26px; }
.focus-games .gameb__desc { font-size: 14px; line-height: 1.75; }
.focus-games .gameb__cta-row { margin-top: auto; padding-top: var(--sp-2); gap: var(--sp-3); }
.focus-games .gameb__cta { font-size: 12px; }
.tool-fit { margin-top: var(--sp-8); padding: var(--sp-6); background: var(--base-card); border: 1px solid var(--hairline); border-radius: var(--radius); scroll-margin-top: 110px; }
.pg .tool-fit h3 { margin: 0 0 var(--sp-3); font-size: 24px; }
.pg .tool-fit p { font-size: 15px; line-height: 1.8; max-width: 80ch; }
.pg .tool-fit .tool-strip { margin: var(--sp-4) 0; }
.stats.stats--pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pg .stat__context { font-size: 13px; line-height: 1.7; color: var(--text-muted); margin: 0 0 var(--sp-4); }
.stat__n small { font-size: .42em; font-family: var(--font-body); color: var(--text-muted); }
html[lang="ja"] .focus-hero__h, html[lang="ja"] .workflow-card h3, html[lang="ja"] .focus-offer h3, html[lang="ja"] .focus-invite h3 { font-family: var(--font-jp-serif); font-weight: 400; }
html[lang="ja"] .focus-hero__h { font-size: clamp(34px,4vw,54px); line-height: 1.5; letter-spacing: 0; word-break: auto-phrase; }
html[lang="ja"] .focus-hero__h em { font-style: normal; }
html[lang="ja"] .focus-kicker, html[lang="ja"] .focus-demo__label { letter-spacing: .02em; font-family: var(--font-jp-sans); }
@media (max-width: 1000px) {
  .focus-hero__inner { gap: var(--sp-8); grid-template-columns: 1.1fr 1fr; }
  .workflow-grid { gap: var(--sp-4); }
  .workflow-card .workflow-art--receipts { gap: var(--sp-2); padding-inline: var(--sp-2); }
  .workflow-card .receipt-stack { flex-basis: 56px; transform: scale(.75); transform-origin: left center; margin-right: -10px; }
  .focus-jumps a { font-size: 14px; padding-inline: var(--sp-2); }
}
@media (max-width: 760px) {
  .focus-hero { padding-top: 112px; }
  .focus-hero__inner { grid-template-columns: 1fr; }
  .focus-hero__h { font-size: clamp(32px,7vw,44px); }
  .focus-hero__lede { font-size: 15px; margin-block: var(--sp-4); }
  .focus-demo .workflow-art { height: 190px; }
  .focus-demo figcaption { padding: var(--sp-4); }
  .focus-jumps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-3); padding-top: var(--sp-4); }
  .focus-jumps a { font-size: 14px; gap: var(--sp-2); }
  .workflow-grid, .focus-offers, .bento4--games.focus-games, .stats.stats--pair { grid-template-columns: 1fr; }
  .workflow-art { height: 190px; }
  .workflow-card .receipt-stack { flex-basis: 82px; transform: none; margin: 0; }
  .focus-invite { flex-direction: column; align-items: flex-start; padding: var(--sp-6); }
  .focus-offer { padding: var(--sp-6); }
  .focus-games .gameb__shot { height: 250px; flex-basis: 250px; }
}

/* Brand-led opening. Keep the original Outfit wordmark as the main mark. */
.focus-hero--brand { padding-top: 112px; }
.focus-hero--brand .focus-hero__inner { max-width: min(var(--container),1200px); row-gap: var(--sp-6); }
/* Lift by one lowercase-letter height without moving the content below.
   The shadow measures this rendered position, so it follows the brand. */
.focus-brand.hero4__wordmark { position: relative; top: -1ex; grid-column: 1 / -1; font-size: clamp(112px, 15vw, 210px); margin: 0 auto var(--sp-12); }
.focus-brand.hero4__wordmark:lang(en) { font-family: var(--font-logo); font-weight: 500; line-height: .92; letter-spacing: -.04em; }
.focus-hero__inner > * { min-width: 0; }
.focus-hero--brand .focus-hero__h { font-size: clamp(32px, 3.7vw, 48px); }
.focus-hero--brand .focus-hero__lede { margin-block: var(--sp-4); }
.focus-demo--audio { width: 100%; max-width: 32.4rem; justify-self: center; scroll-margin-top: 112px; }
.focus-demo--audio .workflow-art { height: 240px; gap: var(--sp-6); }
.focus-demo--audio .reading-stack > span { padding: var(--sp-3) var(--sp-4); font-size: 12px; }
.focus-demo--audio .audio-preview { width: 180px; padding: var(--sp-6); }
.focus-demo--audio .audio-preview__wave { height: 65px; }
.focus-demo--audio .audio-preview > span:last-child { font-size: 11px; }
.focus-demo--audio figcaption > span { line-height: 1.7; }
.focus-build { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-12); margin-top: var(--sp-8); padding: var(--sp-8); background: var(--base-card); border: 1px solid var(--hairline); border-radius: var(--radius); }
.focus-build > div { min-width: 0; }
.focus-build p:not(.focus-kicker) { color: var(--text-muted); font-size: 1rem; line-height: 1.75; margin: 0; }
.focus-build__intro .btn { margin-top: var(--sp-6); }
.focus-build__examples { border-left: 1px solid var(--hairline); padding-left: var(--sp-8); }
.focus-build__examples ul { display: grid; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.focus-build__examples li + li { border-top: 1px solid var(--hairline); padding-top: var(--sp-4); }
.focus-build__examples h3 { margin: 0 0 var(--sp-2); font: 500 1.0625rem/1.5 var(--font-body); color: var(--text-main); }
.site-feature__grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; gap: clamp(32px,5vw,72px); margin-top: var(--sp-8); }
.site-feature__h { font: 300 clamp(32px,3.7vw,48px)/1.2 var(--font-display); letter-spacing: -.03em; margin: 0 0 var(--sp-6); text-wrap: balance; }
.site-feature__h em { display: block; color: var(--ai-primary-text); font-weight: inherit; }
.site-feature__copy > p { font-size: 16px; line-height: 1.8; color: var(--text-muted); margin: 0 0 var(--sp-4); }
.site-feature__copy .focus-hero__actions { margin-top: var(--sp-8); }
.site-feature__copy > .site-feature__terms { margin-top: var(--sp-6); font-size: 13px; }
.site-example { margin: 0; background: var(--base-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px color-mix(in srgb,var(--ai-primary) 8%,transparent); }
.site-example figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--hairline); font: 400 14px/1.6 var(--font-mono); color: var(--text-muted); }
.site-example__status { padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); background: var(--status-yellow-bg); color: var(--status-yellow-text); font: 500 13px/1.6 var(--font-body); }
.site-example__summary { padding: var(--sp-6); }
.site-example__target { display: block; margin-bottom: var(--sp-3); font: 400 13px/1.6 var(--font-mono); color: var(--text-muted); overflow-wrap: anywhere; }
.site-example__summary h3 { margin: 0; font: 400 24px/1.4 var(--font-display); color: var(--text-main); text-wrap: balance; }
.site-example__details { margin: 0; }
.site-example__details > div { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--hairline); }
.site-example__details dt { font: 500 14px/1.7 var(--font-body); color: var(--ai-primary-text); }
.site-example__details dd { margin: 0; font-size: 16px; line-height: 1.75; color: var(--text-muted); }
.site-example__pass { background: color-mix(in srgb,var(--ai-primary) 6%,var(--base-card)); }
html[lang="ja"] .site-feature__h, html[lang="ja"] .site-example__summary h3 { font-family: var(--font-jp-serif); font-weight: 400; }
html[lang="ja"] .site-example__details dt, html[lang="ja"] .site-example__status { font-family: var(--font-jp-sans); }
@media (max-width: 1000px) {
  .site-example__details > div { grid-template-columns: minmax(0,1fr); gap: var(--sp-2); }
}
@media (max-width: 480px) {
  .site-example figcaption, .site-example__summary, .site-example__details > div { padding: var(--sp-4); }
}
html[lang="ja"] .site-feature__h { font-size: clamp(30px,3.6vw,46px); letter-spacing: 0; line-height: 1.5; word-break: auto-phrase; }
html[lang="ja"] .site-feature__h em { font-style: normal; }
html[lang="ja"] .site-feature .s4__chapter-name,
html[lang="ja"] #labs .s4__chapter-name,
html[lang="ja"] #custom-tools .s4__chapter-name,
html[lang="ja"] .site-example figcaption,
html[lang="ja"] .reading-stack > span { font-family: var(--font-jp-sans); }
@media (max-width: 760px) {
  .focus-brand.hero4__wordmark { font-size: clamp(80px,24vw,160px); margin-bottom: var(--sp-8); }
  .focus-hero--brand .focus-hero__h { font-size: clamp(32px,7vw,44px); }
  html[lang="ja"] .focus-hero--brand .focus-hero__h { font-size: 30px; }
  .site-feature__grid, .focus-build { grid-template-columns: 1fr; }
  .focus-build { padding: var(--sp-6); gap: var(--sp-6); }
  .focus-build__examples { border-left: 0; border-top: 1px solid var(--hairline); padding: var(--sp-6) 0 0; }
  .focus-demo--audio .workflow-art { gap: var(--sp-3); padding-inline: var(--sp-3); }
  .focus-demo--audio .audio-preview { width: 150px; padding: var(--sp-4); }
  .focus-demo--audio .reading-stack > span { font-size: 10px; }
}

/* Keep section headings proportional to their supporting copy at every width. */
.s4 .s4__h, .contact4 .contact4__h { font-size: clamp(32px, 3.7vw, 48px); line-height: 1.2; }
.s4 .s4__lede, .contact4 .contact4__lede { font-size: 16px; line-height: 1.75; }
html[lang="ja"] .s4 .s4__h, html[lang="ja"] .contact4 .contact4__h { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.5; }

/* A compact reading-to-audio vignette. The frame and all tiles stay square. */
.focus-demo--audio .workflow-art--audio { position: relative; background: radial-gradient(circle at 76% 48%, color-mix(in srgb,var(--ai-primary) 12%,transparent), transparent 44%), var(--base-elev); }
.focus-demo--audio .reading-stack { flex: 0 1 126px; min-width: 0; gap: var(--sp-3); }
.focus-demo--audio .reading-stack > span { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: var(--sp-2); padding: var(--sp-3); font-family: var(--font-body); border-radius: var(--radius-sm); border-left: 3px solid var(--ai-primary); box-shadow: 0 4px 10px color-mix(in srgb,var(--text-main) 7%,transparent); }
.focus-demo--audio .reading-stack > span:nth-child(1) { margin-right: var(--sp-3); }
.focus-demo--audio .reading-stack > span:nth-child(2) { margin-left: var(--sp-2); border-left-color: var(--labs-primary); }
.focus-demo--audio .reading-stack > span:nth-child(3) { margin-right: var(--sp-2); border-left-color: var(--founder-primary); }
.reading-doc__icon { width: 24px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--ai-primary-text); }
.focus-demo--audio .reading-stack > span:nth-child(2) .reading-doc__icon { color: var(--labs-primary-text); }
.focus-demo--audio .reading-stack > span:nth-child(3) .reading-doc__icon { color: var(--founder-primary-text); }
.focus-demo--audio .audio-preview { flex: 0 1 172px; width: 172px; min-width: 0; padding: var(--sp-4); grid-template-columns: 34px minmax(0,1fr); gap: var(--sp-3); box-shadow: 0 8px 24px color-mix(in srgb,var(--ai-primary) 12%,transparent); }
.focus-demo--audio .audio-preview__play { display: grid; place-items: center; width: 34px; height: 34px; padding-left: 2px; border-radius: 50%; background: var(--ai-primary); color: var(--base-card); font-size: 15px; }
.focus-demo--audio .audio-preview__wave { height: 76px; }
.focus-demo--audio .audio-preview__wave i { flex: 1; max-width: 4px; transform-origin: center; }
.focus-demo--audio .audio-preview__wave i:nth-child(3n) { background: var(--founder-primary); }
.focus-demo--audio .audio-preview__wave i:nth-child(3n + 1) { background: var(--labs-primary); }
.focus-demo--audio .audio-preview > span:last-child { border-top: 1px solid var(--hairline); padding-top: var(--sp-3); font-size: 12px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .focus-demo--audio:hover .audio-preview__wave i { animation: podcast-wave 900ms ease-in-out 2 alternate; }
  .focus-demo--audio:hover .audio-preview__wave i:nth-child(2n) { animation-delay: 120ms; }
  .focus-demo--audio:hover .audio-preview__wave i:nth-child(3n) { animation-delay: 240ms; }
}
@keyframes podcast-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
[data-motion="off"] .focus-demo--audio .audio-preview__wave i { animation: none; }
@media (max-width: 1000px) {
  .focus-demo--audio .workflow-art { gap: var(--sp-3); padding-inline: var(--sp-3); }
  .focus-demo--audio .reading-stack > span { padding: var(--sp-2); font-size: 11px; }
}
@media (max-width: 380px) {
  .focus-demo--audio .workflow-art { gap: var(--sp-2); padding-inline: var(--sp-2); }
  .focus-demo--audio .reading-stack > span { grid-template-columns: 18px 1fr; gap: var(--sp-1); font-size: 10px; }
  .focus-demo--audio .reading-doc__icon { width: 18px; }
  .focus-demo--audio .audio-preview { padding: var(--sp-3); gap: var(--sp-2); }
}

/* Make the first engagement visible before asking someone to write. */
.s4 .contact4 { max-width: var(--container); }
.contact4 .contact4__h { max-width: 760px; }
.contact4 .engagement-flow { width: 100%; list-style: none; margin: var(--sp-6) 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sp-8); text-align: left; }
.contact4 .engagement-flow li { position: relative; min-width: 0; padding: var(--sp-6); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--base-card); }
.contact4 .engagement-flow__num { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--sp-6); border: 1px solid color-mix(in srgb,var(--ai-primary) 30%,var(--hairline)); border-radius: 50%; background: color-mix(in srgb,var(--ai-primary) 10%,var(--base-card)); font: 500 20px/1 var(--font-mono); color: var(--ai-primary-text); }
.contact4 .engagement-flow h3 { min-height: 2.8em; margin: 0 0 var(--sp-3); font: 400 24px/1.4 var(--font-display); color: var(--text-main); }
.contact4 .engagement-flow p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--text-muted); }
.engagement-flow__next { position: absolute; left: calc(100% + 1px); top: var(--sp-6); display: grid; place-items: center; width: var(--sp-8); height: 48px; color: var(--ai-primary-text); font: 400 28px/1 var(--font-body); }
.engagement-flow__next::before { content: "→"; }
html[lang="ja"] .engagement-flow h3 { font-family: var(--font-jp-serif); }
@media (max-width: 1000px) {
  .contact4 .engagement-flow { grid-template-columns: 1fr; gap: var(--sp-12); }
  .contact4 .engagement-flow li { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: start; gap: var(--sp-6); }
  .contact4 .engagement-flow__num { margin-bottom: 0; }
  .contact4 .engagement-flow h3 { min-height: 0; }
  .engagement-flow__next { left: var(--sp-6); top: calc(100% + 1px); width: 48px; height: var(--sp-12); }
  .engagement-flow__next::before { content: "↓"; }
}
@media (max-width: 480px) {
  .contact4 .engagement-flow li { display: block; padding: var(--sp-4); }
  .contact4 .engagement-flow__num { margin-bottom: var(--sp-4); }
  .engagement-flow__next { left: var(--sp-4); }
}
.contact4 .engagement-note { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.contact4 .engagement-email { font-size: 13px; color: var(--ai-primary-text); text-decoration: underline; text-underline-offset: 4px; }
.pg .ask .engagement-prompts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: var(--sp-6) 0; padding: 0; list-style: none; font-size: 15px; }
.engagement-prompts li { padding-bottom: var(--sp-2); font-weight: 500; }