/* =====================================================================
   River Tech — societies.css (/societies/ only)
   Landing page for the secretariats of academic societies, study groups and associations (the link target
   of outreach mail). Layout on top of base.css (docs/components.md): tokens and primitives only.
   Local additions (not in the foundation; same patterns as service.css / works.css, prefixed soc-):
   - .soc-index      hairline jump list (as .svc-index)
   - .soc-gap        the "gap" table: seam / current chore / with a system; stacks on SP
   - .soc-cards      bento of six hairline cells on the dark band
   - .soc-case       proof card (stretched link on the heading); .soc-row text-led rows (as .svc-rel)
   - .soc-steps      4 steps; .soc-acc  <details> FAQ rows (as .svc-acc); .soc-cta  ring button + note
   1 tokens · 2 line breaking · 3 hero · 4 section head · 5 gap table · 6 build band · 7 proof
   8 process · 9 FAQ · 10 contact · 11 SP · 12 forced colours
   ===================================================================== */

/* 1. Page tokens ------------------------------------------------------ */
.soc {
  --soc-num: 64px;                                         /* number column of the section head */
  --soc-col-gap: clamp(3rem, 7.43vw - .4375rem, 6.25rem);  /* number -> body: 100 at 1440, 48 at 769 */
  --soc-gutter: var(--space-40);
  --soc-text: 45rem;                                       /* 720px reading measure */
  --soc-chapter: calc(var(--space-80) * 2);                /* 160 / 128 between chapters */
  --soc-pad: 32px;                                         /* inner padding of a bento cell */
  --soc-bleed: 24px;                                       /* text-led rows reach past the column */
  --soc-plus: 11px;                                        /* accordion plus */
}

/* 2. Japanese line breaking (as service.css) --------------------------- */
.soc :is(p, h1, h2, h3, h4, li, dt, dd, th, td, summary, .btn-ring__label) {
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: pretty;
}
.soc-ph { display: inline-block; }
.soc-nobr { white-space: nowrap; }
.soc-chip { padding: 10px 12px; font-size: var(--fs-small); line-height: 1.3; letter-spacing: var(--ls-jp); }

/* small text link with an arrow (cards, proof) */
.soc-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-kicker);
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--d-fast);
}
.soc-more__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--d-fast) var(--ease-cubic);
}
a.soc-more:focus-visible { color: var(--accent); }
a.soc-more:focus-visible .soc-more__arrow { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  a.soc-more:hover { color: var(--accent); }
  a.soc-more:hover .soc-more__arrow { transform: translateX(3px); }
}

/* 3. Hero: left-aligned EN display (two lines), JP h1 + sub + two ring buttons, jump index ------------ */
.soc-top { padding-bottom: var(--soc-chapter); }
.soc-hero { padding-top: calc(var(--header-h) + var(--space-40)); }
.soc-hero__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.soc-hero__for { font-family: var(--ff-jp); font-size: var(--fs-kicker); line-height: 1.4; letter-spacing: var(--ls-jp); color: var(--fg-2); }
.soc-hero__en { margin-top: var(--space-24); font-size: min(var(--fs-display), 9vw); line-height: 1; }
.soc-hero__en .rv-mask { padding-inline: .06em .12em; margin-inline: -.06em -.12em; }
.soc-hero__en .accent-word { margin-left: -.04em; font-variation-settings: "opsz" 18; }
.soc-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--soc-col-gap);
  margin-top: var(--space-56);
}
.soc-hero__title { font-size: clamp(1.75rem, 3.3vw, var(--fs-h-case)); font-weight: 500; line-height: 1.45; letter-spacing: var(--ls-jp); }
.soc-hero__sub { font-size: var(--fs-ui-l); line-height: 1.8; color: var(--fg-2); }

/* ring button + note (hero, and the closing section in its --wide form) */
.soc-cta { display: grid; gap: 28px; }
.soc-hero .soc-cta { margin-top: var(--space-40); }
/* a two-line label (SP) needs more than the ring button's line-height 1 */
.soc .btn-ring__label { line-height: 1.5; }
.soc-cta__item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.soc-cta__note { max-width: 30em; padding-left: 60px; font-size: var(--fs-small); line-height: 1.7; color: var(--fg-mute); } /* 60 = ring 44 + gap 16 */

/* jump index: five hairline cells "( 01 ) NAME ↓"; hover / focus draws an ink rule, the digits take the accent */
.soc-index { margin-top: var(--space-80); }
.soc-index__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px 24px; }
.soc-index__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding-block: 12px;
  border-block: 1px solid var(--line);
}
.soc-index__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-menu) var(--ease-expo);
}
.soc-index__no { flex: none; color: var(--fg-mute); transition: color var(--d-fast); }
.soc-index__name { flex: 1; min-width: 0; font-size: var(--fs-kicker); line-height: 1.4; letter-spacing: var(--ls-jp); }
.soc-index__arrow {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform var(--d-fast) var(--ease-cubic);
}
.soc-index__link:focus-visible::after { transform: scaleX(1); }
.soc-index__link:focus-visible .soc-index__no { color: var(--accent); }
.soc-index__link:focus-visible .soc-index__arrow { transform: translateY(3px) rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .soc-index__link:hover::after { transform: scaleX(1); }
  .soc-index__link:hover .soc-index__no { color: var(--accent); }
  .soc-index__link:hover .soc-index__arrow { transform: translateY(3px) rotate(90deg); }
}

/* 4. Section head: number column + EN word + JP h2 (+ lead) --------------------------------------- */
.soc-sec { padding-top: var(--soc-chapter); }
.soc-grid { display: grid; grid-template-columns: var(--soc-num) minmax(0, 1fr); align-items: start; column-gap: var(--soc-col-gap); }
.soc-num { justify-self: start; width: max-content; white-space: nowrap; }
@media (min-width: 769px) {
  .soc-num { position: sticky; top: calc(var(--header-h) + var(--space-24)); }
}
.soc-body { min-width: 0; }
.soc-h2 { margin-top: var(--space-24); font-size: min(var(--fs-catch-jp), 7.2vw); }
.soc-en + .soc-h2 { margin-top: 14px; }
.soc-lead { max-width: var(--soc-text); margin-top: var(--space-24); }
.soc-sub { margin-top: var(--space-96); }
.soc-sub__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: var(--fs-ui-l);
  font-weight: 500;
  line-height: 1.4;
}
.soc-sub__title .label { color: var(--fg-mute); }
.soc-sub__title + * { margin-top: 28px; }

/* 5. The gap table --------------------------------------------------------------------------------- */
.soc-gap { width: 100%; margin-top: var(--space-80); table-layout: fixed; }
.soc-gap th,
.soc-gap td { padding: 26px 0; vertical-align: top; text-align: left; font-weight: 400; }
.soc-gap thead th {
  padding-block: 14px;
  border-block: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--fg-mute);
}
.soc-gap tbody tr { border-bottom: 1px solid var(--line); }
.soc-gap__seam { width: 38%; padding-right: var(--soc-gutter); }
.soc-gap__pain { width: 22%; padding-right: var(--soc-gutter); }
.soc-gap td.soc-gap__pain { font-size: var(--fs-kicker); line-height: 1.7; color: var(--fg-mute); }
.soc-gap__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-row); line-height: 1.4; letter-spacing: var(--ls-display); }
.soc-gap__arrow {
  flex: none;
  width: 24px;
  height: 14px;
  background-color: var(--fg-mute);
  -webkit-mask: var(--icon-arrow-long) center / contain no-repeat;
  mask: var(--icon-arrow-long) center / contain no-repeat;
}
.soc-gap__fixline { display: flex; align-items: flex-start; gap: 12px; max-width: 34em; }
.soc-gap__fixline .glyph { --glyph: 12px; margin-top: calc((1lh - var(--glyph)) / 2); }

/* 6. Build band (dark): banner marquee, bento of six hairline cells ---------------------------------- */
.soc-build {
  padding-block: max(var(--space-120), var(--header-h) + var(--space-24)) var(--space-120);
  scroll-margin-top: calc(var(--header-h) * -1); /* the band's top edge lands at the viewport top: the white header sits on it */
}
.soc-banner { --mq-gap: .224em; margin-bottom: var(--space-96); }
.soc-cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: var(--space-80); border-top: 1px solid var(--line); }
.soc-card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 28px 40px;
  border-bottom: 1px solid var(--line);
}
.soc-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; }
.soc-card__no { color: var(--fg-mute); }
.soc-card__en {
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-mute);
}
.soc-card__title { margin-top: 28px; font-size: var(--fs-ui-l); font-weight: 500; line-height: 1.5; }
.soc-card--lg .soc-card__title { font-size: var(--fs-row); font-weight: 400; line-height: 1.45; letter-spacing: var(--ls-display); }
.soc-card__text { max-width: 30em; margin-top: 12px; color: var(--fg-2); }
.soc-card__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 30em;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 500;
}
.soc-card__note .glyph { --glyph: 10px; margin-top: calc((1lh - var(--glyph)) / 2); }
.soc-card__more { margin-top: auto; padding-top: 24px; }
@media (min-width: 769px) {
  .soc-card { padding-inline: var(--soc-pad); }
  .soc-card:nth-child(1) { grid-column: span 7; padding-left: 0; }
  .soc-card:nth-child(2) { grid-column: span 5; border-left: 1px solid var(--line); }
  .soc-card:nth-child(3) { grid-column: span 4; padding-left: 0; }
  .soc-card:nth-child(4),
  .soc-card:nth-child(5) { grid-column: span 4; border-left: 1px solid var(--line); }
  .soc-card--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "top top" "title text" "title more";
    align-content: start;
    column-gap: var(--soc-col-gap);
    padding-inline: 0;
    border-left: 0;
  }
  .soc-card--wide .soc-card__top { grid-area: top; }
  .soc-card--wide .soc-card__title { grid-area: title; }
  .soc-card--wide .soc-card__text { grid-area: text; margin-top: 28px; max-width: 36em; }
  .soc-card--wide .soc-card__more { grid-area: more; margin-top: 0; }
}

/* 7. Proof: three cards (JIP wider), then two text-led rows ------------------------------------------ */
.soc-end { padding-bottom: var(--space-200); }
.soc-cases {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-56) var(--soc-gutter);
  margin-top: var(--space-80);
}
.soc-case { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.soc-case__media { width: 100%; overflow: hidden; border-radius: var(--r-thumb); background-color: var(--c-form-line); }
.soc-case__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--d-menu) var(--ease-expo);
}
.soc-case__no { margin-top: 20px; font-family: var(--ff-latin); font-size: var(--fs-kicker); line-height: 1; letter-spacing: var(--ls-ui); }
.soc-case__name { margin-top: 14px; font-size: var(--fs-ui-l); font-weight: 500; line-height: 1.5; }
.soc-case--lead .soc-case__name { font-size: var(--fs-row); font-weight: 400; line-height: 1.4; letter-spacing: var(--ls-display); }
.soc-case__link::after { content: ""; position: absolute; inset: 0; }
.soc-case__link:focus-visible { outline: none; }
.soc-case__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 6px; }
.soc-case__tag { margin-top: 12px; }
.soc-case__desc { max-width: 34em; margin-top: 10px; font-size: var(--fs-label); line-height: 1.8; color: var(--fg-2); }
.soc-case__more { margin-top: auto; padding-top: 20px; }
.soc-case:has(:focus-visible) .soc-more { color: var(--accent); }
.soc-case:has(:focus-visible) .soc-more__arrow { transform: translateX(3px); }
.soc-case:has(:focus-visible) .soc-case__media img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) {
  .soc-case:hover .soc-case__media img { transform: scale(1.03); }
  .soc-case:hover .soc-more { color: var(--accent); }
  .soc-case:hover .soc-more__arrow { transform: translateX(3px); }
}

/* text-led rows: hairlines, name 28/20, a short description under it, bare arrow; the band opens from the
   centre line on hover / keyboard focus (as .svc-rel); the row bleeds --soc-bleed past the column */
.soc-rows { margin-inline: calc(var(--soc-bleed) * -1); }
.soc-rows__item { position: relative; }
.soc-rows__item::before,
.soc-rows__item:last-child::after {
  content: "";
  position: absolute;
  inset-inline: var(--soc-bleed);
  z-index: 1;
  height: 1px;
  background-color: var(--line);
  pointer-events: none;
}
.soc-rows__item::before { top: 0; }
.soc-rows__item:last-child::after { bottom: 0; }
.soc-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(7.5rem, 16%) minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: var(--soc-gutter);
  padding: 22px var(--soc-bleed);
  color: var(--fg);
  transition: color var(--d-instant);
}
.soc-row::before,
.soc-row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  background-color: var(--c-band);
  transform: scaleY(0);
  transition: transform var(--d-fast) var(--ease-band);
}
.soc-row::before { top: 1px; bottom: calc(50% - 1px); transform-origin: center bottom; }
.soc-row::after { top: calc(50% - 1px); bottom: 0; transform-origin: center top; }
.soc-rows__item:last-child .soc-row::after { bottom: 1px; }
.soc-row__no { font-family: var(--ff-latin); font-size: var(--fs-kicker); line-height: 1; letter-spacing: var(--ls-ui); white-space: nowrap; }
.soc-row__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.soc-row__name { font-size: var(--fs-row); line-height: 1.4; letter-spacing: var(--ls-display); }
.soc-row__desc { font-size: var(--fs-label); line-height: 1.7; color: var(--fg-mute); transition: color var(--d-instant); }
.soc-row__arrow {
  width: 18px;
  height: 18px;
  background-color: var(--fg-mute);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: background-color var(--d-fast), transform var(--d-fast) var(--ease-cubic);
}
.soc-row:focus-visible { outline: 2px solid var(--c-accent-on-dark); outline-offset: -4px; color: var(--c-white); }
.soc-row:focus-visible::before,
.soc-row:focus-visible::after { transform: scaleY(1); }
.soc-row:focus-visible .soc-row__desc { color: var(--c-line); }
.soc-row:focus-visible .soc-row__arrow { background-color: var(--c-accent-on-dark); transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .soc-row:hover { color: var(--c-white); }
  .soc-row:hover::before,
  .soc-row:hover::after { transform: scaleY(1); }
  .soc-row:hover .soc-row__desc { color: var(--c-line); }
  .soc-row:hover .soc-row__arrow { background-color: var(--c-accent-on-dark); transform: translateX(3px); }
}

/* 8. Process: four steps (4 columns, or 2 when narrow, never 3 + 1), principles in a 2 x 2 list -------- */
.soc-steps {
  --soc-step-gap: var(--soc-gutter);
  --soc-step-min: 13rem;
  --soc-step-col: clamp((100% - 3 * var(--soc-step-gap)) / 4 - .1px,
                        (4 * var(--soc-step-min) + 3 * var(--soc-step-gap) - 100%) * 999,
                        (100% - var(--soc-step-gap)) / 2 - .1px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--soc-step-col), 1fr));
  gap: var(--space-40) var(--soc-step-gap);
  margin-top: var(--space-80);
}
.soc-step { display: flex; flex-direction: column; align-items: flex-start; padding-top: 20px; border-top: 1px solid var(--line); }
.soc-step__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; }
.soc-step__en,
.soc-principles__en {
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-mute);
}
.soc-step__ja { margin-top: 20px; font-size: var(--fs-ui-l); font-weight: 500; line-height: 1.5; }
.soc-step__text { margin-top: 8px; margin-bottom: 20px; color: var(--fg-2); }
.soc-step__chips { margin-top: auto; } /* ul[class] resets padding with higher specificity, so the gap is the text's margin */
.soc-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--soc-gutter); border-bottom: 1px solid var(--line); }
.soc-principles li { padding-block: 24px 36px; border-top: 1px solid var(--line); }
.soc-principles__ja { margin-top: 14px; font-size: var(--fs-row); font-weight: 400; line-height: 1.45; letter-spacing: var(--ls-display); }
.soc-principles__text { max-width: 28em; margin-top: 10px; color: var(--fg-2); }

/* 9. FAQ: <details> rows on hairlines (as .svc-acc) ----------------------------------------------- */
.soc-acc { --soc-acc-key: 2rem; margin-top: var(--space-56); border-bottom: 1px solid var(--line); }
.soc-acc__item { border-top: 1px solid var(--line); }
.soc-acc__sum {
  position: relative;
  display: grid;
  grid-template-columns: var(--soc-acc-key) minmax(0, 1fr) var(--soc-plus);
  align-items: baseline;
  column-gap: var(--soc-gutter);
  padding-block: 22px;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
}
.soc-acc__sum::-webkit-details-marker { display: none; }
.soc-acc__sum::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background-color: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-menu) var(--ease-expo);
}
.soc-acc__key { font-size: var(--fs-ui-l); line-height: 1; white-space: nowrap; color: var(--fg-mute); transition: color var(--d-fast); }
.soc-acc__icon {
  position: relative;
  align-self: start;
  width: var(--soc-plus);
  height: var(--soc-plus);
  margin-top: calc((1lh - var(--soc-plus)) / 2);
  color: var(--fg);
  transition: color var(--d-fast), transform var(--d-fast) var(--ease-cubic);
}
.soc-acc__icon::before,
.soc-acc__icon::after {
  content: "";
  position: absolute;
  top: calc(50% - .5px);
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--d-fast) var(--ease-cubic);
}
.soc-acc__icon::after { transform: rotate(90deg); }
.soc-acc__item[open] > .soc-acc__sum .soc-acc__icon::after { transform: rotate(0deg); }
.soc-acc__item[open] > .soc-acc__sum::before,
.soc-acc__sum:focus-visible::before { transform: scaleX(1); }
.soc-acc__sum:focus-visible .soc-acc__key,
.soc-acc__sum:focus-visible .soc-acc__icon { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .soc-acc__sum:hover::before { transform: scaleX(1); }
  .soc-acc__sum:hover .soc-acc__key,
  .soc-acc__sum:hover .soc-acc__icon { color: var(--accent); }
}
.soc-acc__sum:active .soc-acc__icon { transform: scale(.82); }
.soc-acc__panel { padding: 0 calc(var(--soc-plus) + var(--soc-gutter)) 32px calc(var(--soc-acc-key) + var(--soc-gutter)); color: var(--fg-2); }
.soc-acc__panel > p { max-width: var(--soc-text); }
.soc-acc__item[open] > .soc-acc__panel { animation: soc-acc-in var(--d-base) var(--ease-cubic); }
html[data-motion="paused"] .soc-acc__item[open] > .soc-acc__panel { animation: none; }
@keyframes soc-acc-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

/* 10. Contact: big EN line, JP h2, two columns (diagnosis / improvement proposal), mail + tel ----------- */
.soc-contact { padding-top: var(--space-200); }
.soc-contact__en { font-size: min(var(--fs-title), 11vw); }
.soc-contact__en .rv-mask { padding-inline: .06em .12em; margin-inline: -.06em -.12em; }
.soc-contact__en .accent-word { margin-left: -.04em; font-variation-settings: "opsz" 18; }
.soc-contact__h2 { margin-top: var(--space-40); font-size: min(var(--fs-catch-jp), 7.2vw); }
.soc-contact__lead { max-width: var(--soc-text); margin-top: var(--space-24); }
.soc-cta--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--soc-gutter); margin-top: var(--space-56); }
.soc-cta--wide .soc-cta__item { gap: 0; padding-top: 28px; border-top: 1px solid var(--line); }
.soc-cta__title { font-size: var(--fs-row); font-weight: 400; line-height: 1.4; letter-spacing: var(--ls-display); }
.soc-cta--wide .soc-cta__note { padding-left: 0; margin-top: 12px; margin-bottom: 28px; font-size: var(--fs-body); line-height: 1.8; color: var(--fg-2); }
.soc-contact__alt { margin-top: var(--space-56); font-size: var(--fs-kicker); line-height: 1.7; color: var(--fg-2); }
.soc-direct { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 10px; font-size: var(--fs-ui-l); line-height: 1.6; }
.soc-direct li { display: flex; align-items: baseline; gap: 10px; }
.soc-direct span { font-family: var(--ff-latin); font-size: var(--fs-small); font-weight: 300; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-mute); }

/* 11. SP (<=768px) -------------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .soc { --soc-gutter: 24px; --soc-bleed: 5vw; }
  .soc-hero { padding-top: calc(var(--header-h) + var(--space-24)); }
  .soc-hero__en { font-size: min(var(--fs-display), 14.5vw); }
  .soc-hero__body { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-24); margin-top: var(--space-40); }
  .soc-hero__title { font-size: clamp(1.5rem, 6.9vw, 2.5rem); }
  .soc-hero .soc-cta { margin-top: var(--space-24); }
  .soc-grid { grid-template-columns: minmax(0, 1fr); }
  .soc-num { margin-bottom: var(--space-24); }
  .soc-sec { padding-top: var(--space-120); }
  .soc-top { padding-bottom: 0; }
  .soc-contact { padding-top: var(--space-120); }

  /* the table becomes one block per seam; roles in the markup keep the table semantics for assistive tech */
  .soc-gap,
  .soc-gap tbody,
  .soc-gap tr,
  .soc-gap th,
  .soc-gap td { display: block; width: auto; }
  .soc-gap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .soc-gap tbody { border-top: 1px solid var(--line); }
  .soc-gap tbody tr { padding-block: 24px; }
  .soc-gap th,
  .soc-gap td { padding: 0; }
  .soc-gap td { margin-top: 14px; }
  .soc-gap td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-mute); }
  .soc-gap td.soc-gap__pain { font-size: var(--fs-body); }
  .soc-gap__fixline { max-width: none; }

  .soc-cards { margin-top: var(--space-56); }
  .soc-cases { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-56); }
  .soc-steps { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .soc-principles { grid-template-columns: minmax(0, 1fr); }
  .soc-acc__sum { padding-block: 18px; }
  .soc-acc__panel { padding-right: 0; }
  .soc-row { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "no arrow" "main arrow"; gap: 8px 16px; padding-block: 18px; }
  .soc-row__no { grid-area: no; }
  .soc-row__main { grid-area: main; }
  .soc-row__arrow { grid-area: arrow; }
  .soc-cta--wide { grid-template-columns: minmax(0, 1fr); }
  .soc-cta--wide .soc-cta__note { margin-bottom: 20px; }
}

/* 12. Forced colours: keep the background-drawn glyphs visible ------------------------------------- */
@media (forced-colors: active) {
  .soc-acc__icon::before,
  .soc-acc__icon::after,
  .soc-index__arrow,
  .soc-more__arrow,
  .soc-gap__arrow,
  .soc-row__arrow { forced-color-adjust: none; background-color: CanvasText; }
}

/* Column links under the FAQ (list filled by tools/build_column.py between the column:list markers) */
.soc-reading { margin-top: var(--space-56); }
.soc-reading__title { font-size: var(--fs-ui-l); font-weight: 600; line-height: 1.6; }
.soc-reading__list { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.soc-reading__list li { border-bottom: 1px solid var(--line); }
.soc-reading__list a { display: block; padding-block: 14px; line-height: 1.7; transition: color var(--d-fast); }
.soc-reading__all { margin-top: var(--space-24); font-size: var(--fs-label); }
@media (hover: hover) and (pointer: fine) { .soc-reading__list a:hover { color: var(--accent); } }
.soc-reading__list a:focus-visible { color: var(--accent); }