/* Shared type, actions, and card feedback for the English and Japanese site.
   Main copy/actions: 1rem. Supporting copy: .875rem. Labels: .8125rem.
   Tiny text inside aria-hidden illustrations is decorative, not page copy. */
:root { --type-body: 1rem; --type-small: .875rem; --type-label: .8125rem; }
.focus-hero__lede, .s4 .s4__lede, .workflow-card p, .focus-invite p,
.focus-build p:not(.focus-kicker), .pg .tool-fit p, .site-feature__copy > p,
.focus-games .gameb__desc, .labb__desc, .pg .need p,
.pg .sample__rows p, .pg .qa dd, .pg .toc p { font-size: var(--type-body); line-height: 1.75; }
.focus-kicker,
.need__n, .need__when b, .offer__get b, .story__label,
.sample__head, .sample__when, .report__head, .stat__src,
.pg .facts { font-size: var(--type-label); }
.tool-strip, .focus-jumps a, .site-feature__copy > .site-feature__terms,
.pg .stat__context, .pg .sample__foot, .pg .ask .ask__small,
.site-example figcaption { font-size: var(--type-small); }
.focus-demo strong { font-size: 1.25rem; }
.focus-demo figcaption > span, .focus-link { font-size: var(--type-body); }
.workflow-card h3, .pg .workflow-card h3 { font-size: 1.4375rem; line-height: 1.4; }
.focus-build__examples h3 { font-size: 1.0625rem; }
.focus-invite h3 { font-size: 1.5rem; }
.focus-hero--brand .focus-hero__h, .s4 .s4__h, .contact4 .contact4__h,
.site-feature__h { font-size: clamp(2rem, 3.7vw, 3rem); }
html[lang="ja"] .focus-hero--brand .focus-hero__h,
html[lang="ja"] .s4 .s4__h, html[lang="ja"] .contact4 .contact4__h,
html[lang="ja"] .site-feature__h { font-size: clamp(1.875rem, 3.6vw, 2.875rem); }

/* Buttons use the same shape and target size wherever they appear.
   Supporting links in copy stay underlined; paired actions are both buttons. */
.btn, .cta, .focus-games .gameb__cta, .labb .labb__cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .75rem; min-height: 3rem; max-width: 100%;
  padding: .75rem 1.25rem; border: 1px solid transparent;
  border-radius: var(--radius-sm); font-family: var(--font-body);
  font-size: var(--type-body); font-weight: 500; line-height: 1.5;
  letter-spacing: .01em; text-transform: none; text-align: center;
  text-decoration: none; overflow-wrap: anywhere;
  transition: transform var(--d-fast) var(--ease-out), background-color var(--d-base),
    border-color var(--d-base), color var(--d-base), filter var(--d-base);
}
.btn--primary, .cta, .focus-games .gameb__cta--go, .labb .labb__cta {
  background: var(--primary); color: var(--base-bg);
}
.btn.btn--white {
  background: #fff; color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 25%, #fff);
}
.btn--ghost, .cta.ghost, .focus-games .gameb__cta--alt, .labb .labb__cta--ghost {
  background: color-mix(in srgb, var(--primary) 8%, var(--base-card));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--hairline));
  color: var(--primary-text);
}
.cta-row, .focus-hero__actions, .gameb__cta-row, .labb__cta-row {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem;
}
.cta-row .cta, .focus-games .gameb__cta, .labb .labb__cta { margin: 0; }
.smartnav .btn--nav { min-height: 2.75rem; padding: .625rem 1rem; font-size: var(--type-small); }
.contact4__mail .btn { min-height: 3.5rem; padding: 1rem 2rem; font-size: 1.125rem; }
.focus-link { text-decoration: underline; text-underline-offset: .25em; }
/* Prose links must stay visible against the solid contact panels. */
.pg .ask p a:not(.cta):not(.btn) { color: inherit; }
:is(.btn,.cta,.focus-link,.gameb__cta,.labb__cta):focus-visible {
  outline: 2px solid var(--primary-text); outline-offset: 4px;
}
@media (hover: hover) {
  .btn:hover, .cta:hover, .focus-games .gameb__cta:hover, .labb .labb__cta:hover {
    transform: translateY(-2px); gap: .75rem; filter: brightness(1.08);
  }
  .btn--ghost:hover, .cta.ghost:hover, .focus-games .gameb__cta--alt:hover, .labb .labb__cta--ghost:hover {
    border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--base-card)); filter: none;
  }
  .btn.btn--white:hover { border-color: var(--blue); background: #fff; filter: none; }
  /* Transform/filter would make this anchor the containing block of its
     full-card overlay. Keep that overlay attached to the card on hover. */
  .labb .labb__cta--stretch:hover { transform: none; filter: none; background: var(--primary-text); }
}

/* Three business workflows: a source document becomes a usable work product. */
.workflow-art--business { gap: .75rem; }
.work-source { flex: 0 1 6.75rem; min-width: 0; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .75rem; border: 1px solid var(--hairline); border-left: 3px solid var(--ai-primary); background: var(--base-card); box-shadow: 0 4px 12px color-mix(in srgb,var(--text-main) 7%,transparent); }
.work-source span { font-size: .75rem; line-height: 1.5; color: var(--text-muted); }
.work-source i { display: block; height: 3px; background: var(--hairline); }
.work-source i:last-child { width: 65%; }
.work-result { flex: 0 1 10rem; min-width: 0; display: flex; flex-direction: column; gap: .625rem; padding: 1rem .75rem; border: 1px solid var(--hairline); background: var(--base-card); box-shadow: 0 6px 18px color-mix(in srgb,var(--ai-primary) 9%,transparent); font-size: .75rem; line-height: 1.5; }
.work-result strong { padding-bottom: .5rem; border-bottom: 1px solid var(--hairline); color: var(--ai-primary-text); font-weight: 500; }
.work-result > span { display: flex; align-items: baseline; gap: .5rem; color: var(--text-muted); }
.work-result i { color: var(--founder-primary-text); font-style: normal; }
.workflow-card { scroll-margin-top: 7rem; }
/* Tool links arrive at the section heading, preserving the examples above
   the tool explanation. The explanation remains highlighted as you read. */
.slide__head#tools { scroll-margin-top: 7rem; }
#tools:target ~ .tool-fit {
  border-color: var(--ai-primary-text);
  background: color-mix(in srgb,var(--ai-primary) 6%,var(--base-card));
}
.workflow-card .workflow-card__setup { padding-top: 1rem; margin-top: auto; border-top: 1px solid var(--hairline); }
.workflow-card__setup b { display: block; margin-bottom: .5rem; font-size: var(--type-small); font-weight: 500; color: var(--ai-primary-text); }
.pg .workflow-grid--detail { margin-bottom: var(--sp-8); }
.audit-context { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-6); margin-bottom: var(--sp-8); }
.audit-context article { padding: var(--sp-6); background: var(--base-card); border: 1px solid var(--hairline); border-radius: var(--radius); }
.pg .audit-context h3 { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.4; }
.pg .audit-context p { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--text-muted); }

/* The edge sweep also follows keyboard focus, on every shared card. */
.hl-card:focus-within, .bento4__cell:focus-within {
  transform: translateY(-4px); border-color: color-mix(in srgb,var(--primary) 30%,var(--hairline));
  box-shadow: 0 14px 40px color-mix(in srgb,var(--primary) 12%,transparent);
}
.hl-card:focus-within > .edge-hl path, .bento4__cell:focus-within > .edge-hl path {
  stroke-dasharray: var(--ehl-hover, var(--ehl-rest, 0 9999)); stroke-dashoffset: var(--ehl-shift, 0);
}
.join__opt.hl-card { --primary: var(--base-bg); }
.principles > .hl-card { padding-inline: 1rem; }
/* No artificial hand cursor on illustrative cards. Links retain their own. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .hl-card:hover, .hl-card:focus-within, .bento4__cell:hover, .bento4__cell:focus-within,
  .btn:hover, .cta:hover, .focus-games .gameb__cta:hover, .labb .labb__cta:hover { transform: none; }
  .hl-card, .bento4__cell, .edge-hl path, .btn, .cta { transition: none; }
  .btn:hover .btn__arrow { transform: none; }
}
[data-motion="off"] :is(.hl-card,.bento4__cell,.btn,.cta,.gameb__cta,.labb__cta):is(:hover,:focus-within) { transform: none; }
[data-motion="off"] :is(.hl-card,.bento4__cell,.edge-hl path,.btn,.cta) { transition: none; }
[data-motion="off"] .btn:hover .btn__arrow { transform: none; }
@media (max-width: 760px) {
  .audit-context { grid-template-columns: 1fr; }
  .focus-hero--brand .focus-hero__h { font-size: clamp(2rem,7vw,2.75rem); }
  html[lang="ja"] .focus-hero--brand .focus-hero__h { font-size: 1.875rem; }
}
@media (max-width: 400px) {
  .smartnav .btn--nav { padding-inline: .75rem; }
  .focus-jumps a { padding-inline: 0; font-size: .8125rem; gap: .375rem; }
}
@media (max-width: 360px) {
  .smartnav { padding-inline: .625rem; gap: .375rem; }
  .smartnav__right { gap: .375rem; }
  .smartnav__settings-btn { padding-inline: .5rem; }
  .smartnav .btn--nav { padding-inline: .625rem; }
}