/* =====================================================================
   River Tech — contact.css
   Shared by /contact/, /contact/thanks/, /privacy/ and /404.html.
   Builds on base.css tokens and primitives (docs/components.md); no foundation overrides.
   1 page tokens · 2 page head + line breaking · 3 contact intro + rows · 4 form + guide disclosure · 5 consent
   6 submit + status · 7 direct contact · 8 notice pages · 9 privacy · 10 links + hover · 11 SP · 12 forced colours
   ===================================================================== */

/* 1. Page tokens (values the foundation does not define) ---------------- */
.contact, .legal, .notice {
  --ct-head-top: 164px;                                               /* 160 + optical: puts the cap line where the reference's sits (177px) */
  --ct-lead-gap: clamp(2.5rem, 1.5714rem + 3.8095vw, 5rem);           /* 80 / 40 sub -> lead */
  --ct-label: .9375rem;                                               /* 15px JP form label, fixed */
  --ct-hint: var(--fs-label);                                         /* 14 / 13 */
  --ct-control-h: 48px;
  --ct-control-pad: 12px;
  --ct-select-w: 315px;
  --ct-submit-w: 314px;
  --ct-group-pad: 30px;
  --ct-form-gap: 120px;                                               /* note -> first group, fixed at every width (reference) */
  --ct-area-h: 200px;
  --ct-text-w: 42em;
  --ct-split: minmax(0, 1fr) minmax(0, 2fr);                          /* the one grid of the family: heads | bodies (contact rows, privacy) */
  --ct-col-gap: var(--space-56);                                      /* 56 / 40 between the head and body columns */
  --ct-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121212' stroke-width='1.2'/%3E%3C/svg%3E");
  --ct-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 6.2l2.8 2.8 5.6-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --ct-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5h8v8h-8z M10.5 5.5v-3h-8v8h3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* 2. Page head: big Latin title + JP sub (contact, privacy: left; notice pages: centred) */
.contact-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.contact-head__en { max-width: 100%; }
/* Reveal masks clip (overflow: hidden), and the Bodoni italic overhangs its advance box: the S and P swashes
   reach left of the origin, the arms of Y / U and the full stop reach right. Give each mask that room as padding
   and take it back with an equal negative margin, so nothing moves but no glyph is cut once revealed
   (same idea as works.css / service.css title lines; a little wider here for STREAM. and POLICY.). */
.contact-head__en.rv-mask, .notice__lines > .rv-mask {
  --ct-mask-l: .12em;
  --ct-mask-r: .2em;
  max-width: none;
  padding-inline: var(--ct-mask-l) var(--ct-mask-r);
  margin-inline: calc(var(--ct-mask-l) * -1) calc(var(--ct-mask-r) * -1);
}
/* optical overhang of the left-aligned title: the reference pulls its cap line 8px past the text column at every width */
.contact-head__en.u-optical { margin-inline-start: -8px; }
.contact-head__en.u-optical.rv-mask { margin-inline-start: calc(-8px - var(--ct-mask-l)); }
/* one-line title: follows the reference's 12.3vw SP scale below 390px so "Contact us." never wraps at 320 */
.contact-head__en--fit { font-size: min(var(--fs-title), 12.3vw); white-space: nowrap; }
.contact-head__sub { font-size: var(--fs-kicker); font-weight: 400; line-height: 1.4; letter-spacing: var(--ls-jp); }
.contact-head--center { align-items: center; gap: clamp(1.5rem, 1.2143rem + .7619vw, 2rem); text-align: center; }
/* Vertical copyright drawn as an SVG graphic: it is pure decoration (aria-hidden; the footer carries the real ©),
   so its light reference grey stays without registering as low-contrast text in automated checks. */
.contact-vcopy { overflow: visible; }
.contact-vcopy text { font-family: var(--ff-latin); font-size: var(--fs-small); font-weight: 300; }

/* Japanese line breaking: never split a word across lines, in any engine. Every static Japanese string on these
   pages carries <wbr> marks at BudouX phrase boundaries, so keep-all (break only at spaces, after 、。 and at the
   marks) gives the same phrase breaks in Chromium, Safari and Firefox. auto-phrase is NOT used for this static copy:
   Chromium's own segmenter splits words here (したが|い, 手続きの方|法, お問い|合わせ at 1440 / 390), and with
   auto-phrase text-wrap: pretty splits even more to even out lines. With keep-all + marks, pretty only moves whole
   phrases, so it stays on (the longhand, so white-space: nowrap still holds); short tails (<= 3 characters) are also
   joined to the phrase before them in the markup, so no paragraph ends on ます。 or 場合 alone.
   overflow-wrap is the safety net for a run that still does not fit (long mail / URL strings); line-break: strict
   keeps ー and small kana off line starts. Messages written by contact.js have no marks: they use auto-phrase. */
.contact, .legal, .notice { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap-style: pretty; }
.contact-status, .contact-field__error, .contact-summary, .contact-copy__status {
  word-break: keep-all;
  word-break: auto-phrase;
  text-wrap-style: auto;
}
.contact-nowrap { white-space: nowrap; }

/* 3. Contact intro + guide -------------------------------------------- */
.contact-hero { position: relative; padding-top: var(--ct-head-top); }
/* lead on the reference's lead step (16 / 13px, 1.7): on phones it sits a step under the form labels, as there */
.contact-lead { max-width: 47em; margin-top: var(--ct-lead-gap); font-size: var(--fs-lead); line-height: 1.7; }
.contact-lead p + p { margin-top: .5em; }
/* each sentence starts on its own line when it does not fit beside the previous one (PC: one line each) */
.contact-lead__s, .contact-sentence { display: inline-block; }
/* required-field note: 16px under the lead (reference), so the first field group opens the next block */
.contact-note { margin-top: 16px; font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); }
.contact-req {
  display: inline-block;
  margin-inline-end: .35em;
  font-family: var(--ff-latin);
  font-weight: 400;
  color: var(--c-error);
}

/* Head | body rows on the page grid (direct contact); privacy uses the same split */
.contact-row {
  display: grid;
  grid-template-columns: var(--ct-split);
  gap: var(--space-24) var(--ct-col-gap);
  padding-block: var(--space-40) var(--space-56);
  border-top: 1px solid var(--line);
}
.contact-row__title { margin-top: 20px; font-size: var(--fs-ui-l); font-weight: 600; line-height: 1.6; letter-spacing: var(--ls-jp); }

/* 4. Form -------------------------------------------------------------- */
/* note -> first label is the reference's 120px; the first group's own top padding is part of that gap */
.contact-form-wrap { padding-top: calc(var(--ct-form-gap) - var(--ct-group-pad)); }
.contact-field { padding-block: var(--ct-group-pad); border-bottom: 1px solid var(--c-form-line); }
.contact-field__label { display: block; font-size: var(--ct-label); font-weight: 600; line-height: 1.5; }
.contact-control {
  display: block;
  width: 100%;
  height: var(--ct-control-h);
  margin-top: 12px;
  padding: 0 var(--ct-control-pad);
  border: 1px solid var(--c-mute);
  border-radius: var(--r-thumb);
  background-color: var(--c-white);
  font-size: 1rem;              /* 16px: no iOS zoom on focus */
  line-height: 1.5;
  letter-spacing: var(--ls-ui);
  color: var(--c-ink);
  scroll-margin-top: 72px;      /* keeps the label visible under the fixed header when an error link jumps here */
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.contact-control:focus { border-color: var(--c-ink); }
.contact-control:focus-visible { outline-offset: 2px; }
.contact-control--select {
  max-width: var(--ct-select-w);
  padding-inline-end: 44px;
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--ct-chevron);
  background-position: right 20px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  cursor: pointer;
}
.contact-control--area { height: var(--ct-area-h); min-height: 120px; padding-block: 12px; line-height: 1.75; resize: vertical; }
.contact-control[aria-invalid="true"] { border-color: var(--c-error); box-shadow: inset 0 0 0 1px var(--c-error); }
.contact-field__hint { margin-top: 8px; font-size: var(--ct-hint); line-height: 1.6; color: var(--fg-mute); }
.contact-field__hint p + p { margin-top: 2px; }
.contact-field__error { margin-top: 8px; font-size: var(--ct-hint); font-weight: 600; line-height: 1.6; color: var(--c-error); }

.contact-summary {
  margin-block: var(--space-24);
  padding: 24px 28px;
  border: 1px solid var(--c-error);
  border-inline-start-width: 4px;
  border-radius: var(--r-thumb);
  background-color: var(--c-white);
  scroll-margin-top: 24px;      /* breathing room under the fixed header when the summary takes focus */
}
.contact-summary:focus-visible { outline-color: var(--c-error); }
.contact-summary__title { font-weight: 600; line-height: 1.7; color: var(--c-error); }
.contact-summary__list { display: grid; gap: 6px; margin-top: 12px; font-size: var(--ct-label); }
.contact-summary__list a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--d-fast); }
/* field name and message are separate blocks, so a long message moves to its own line instead of splitting the name */
.contact-summary__field, .contact-summary__text { display: inline-block; text-decoration: inherit; }
.contact-summary__list a:focus-visible { color: var(--c-error); text-decoration-thickness: 2px; }

/* Guide disclosure in the message group: what to include / leave out, folded so the form keeps the
   reference's first view. Toggle follows the reference accordion (10px plus, vertical bar 90deg -> 0, .2s). */
.contact-tips {
  margin-top: var(--space-24);
  border: 1px solid var(--c-line);
  border-radius: var(--r-thumb);
  background-color: color-mix(in srgb, var(--c-white) 40%, transparent);
  transition: border-color var(--d-fast), background-color var(--d-base);
}
.contact-tips[open] { border-color: var(--c-mute); background-color: color-mix(in srgb, var(--c-white) 70%, transparent); }
.contact-tips__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 20px;
  min-height: 60px;
  padding: 12px 14px 12px 20px;
  border-radius: inherit;
  list-style: none;
  cursor: pointer;
}
.contact-tips__summary::-webkit-details-marker { display: none; }
.contact-tips__summary:focus-visible { outline-offset: 2px; }
.contact-tips__label { color: var(--fg-mute); white-space: nowrap; }
.contact-tips__title { font-size: var(--ct-label); font-weight: 600; line-height: 1.6; }
.contact-tips__icon {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-round);
  transition: background-color var(--d-fast), border-color var(--d-fast), transform var(--d-instant) var(--ease-cubic);
}
.contact-tips__icon::before, .contact-tips__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  margin: -.5px 0 0 -5px;
  background-color: var(--c-ink);
  transition: transform var(--d-fast) var(--ease-cubic), background-color var(--d-fast);
}
.contact-tips__icon::after { transform: rotate(90deg); }
.contact-tips[open] .contact-tips__icon { border-color: var(--c-ink); }
.contact-tips[open] .contact-tips__icon::after { transform: rotate(0deg); }
.contact-tips__summary:focus-visible .contact-tips__icon { border-color: var(--c-ink); background-color: var(--c-ink); }
.contact-tips__summary:focus-visible .contact-tips__icon::before,
.contact-tips__summary:focus-visible .contact-tips__icon::after { background-color: var(--c-white); }
.contact-tips__summary:active .contact-tips__icon { transform: scale(.92); }
.contact-tips__body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-24) var(--space-40);
  margin-inline: 20px;
  padding-block: 24px 28px;
  border-top: 1px solid var(--c-form-line);
}
.contact-tips[open] .contact-tips__body { animation: ct-tips-in var(--d-menu) var(--ease-expo) both; }
html[data-motion="paused"] .contact-tips[open] .contact-tips__body { animation: none; }
@keyframes ct-tips-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.contact-tips__col--avoid { padding-inline-start: var(--space-40); border-inline-start: 1px solid var(--c-form-line); }
.contact-tips__head { margin-bottom: 14px; font-size: var(--fs-label); font-weight: 600; line-height: 1.6; }
.contact-guide__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding-block: 12px; }
.contact-guide__list li:first-child { padding-top: 0; }
.contact-guide__list li:last-child { padding-bottom: 0; }
.contact-guide__list li + li { border-top: 1px solid var(--c-form-line); }
.contact-guide__num { padding-top: .3em; font-size: var(--fs-small); font-weight: 300; line-height: 1.4; letter-spacing: var(--ls-ui); color: var(--fg-mute); }
.contact-guide__list p { font-size: var(--fs-label); line-height: 1.7; color: var(--fg-2); }
.contact-guide__list strong { display: block; font-weight: 600; color: var(--fg); }
/* leave-out list: a short hairline is the marker (not read aloud) */
.contact-guide__avoid li { position: relative; padding-inline-start: 26px; font-size: var(--fs-label); line-height: 1.7; }
.contact-guide__avoid li::before { content: ""; position: absolute; top: .85em; left: 0; width: 14px; height: 1px; background-color: var(--c-error); }
.contact-guide__avoid li + li { margin-top: 8px; }
.contact-guide__aside { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-form-line); font-size: var(--fs-small); line-height: 1.7; color: var(--fg-mute); }

/* 5. Consent row: custom 22px box (native control, appearance reset) ------- */
.contact-consent { margin-top: var(--space-80); text-align: center; }
.contact-consent__row { display: inline-flex; align-items: center; gap: 12px; text-align: start; }
.contact-consent__box {
  flex: none;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--c-mute);
  border-radius: var(--r-thumb);
  background-color: var(--c-white);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--d-fast), border-color var(--d-fast);
}
.contact-consent__box::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--c-white);
  -webkit-mask: var(--ct-check) center / contain no-repeat;
  mask: var(--ct-check) center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--d-fast) var(--ease-cubic);
}
.contact-consent__box:checked { border-color: var(--c-ink); background-color: var(--c-ink); }
.contact-consent__box:checked::before { transform: scale(1); }
.contact-consent__box:active { transform: scale(.94); }
.contact-consent__box[aria-invalid="true"] { border-color: var(--c-error); box-shadow: inset 0 0 0 1px var(--c-error); }
/* breaks only between the locked phrases (「個人情報の取り扱い」に | 同意する), never inside the link */
.contact-consent__label { font-size: var(--ct-label); line-height: 2; word-break: normal; cursor: pointer; }
.contact-consent .contact-field__error { margin-top: 4px; }

/* 6. Submit, status, fallback ---------------------------------------------- */
.contact-submit { margin-top: var(--space-40); text-align: center; }
.contact-submit__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: var(--ct-submit-w);
  margin-inline: auto;
  padding: 18px 0;
  border-radius: var(--r-thumb);
  background-color: var(--c-ink);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .06em;
  color: var(--c-paper);
  transition: background-color var(--d-base) var(--ease-cubic), transform var(--d-instant) var(--ease-cubic);
}
.contact-submit__icon {
  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-base) var(--ease-cubic), background-color var(--d-base);
}
.contact-submit__button:focus-visible { background-color: var(--c-accent); }
.contact-submit__button:focus-visible .contact-submit__icon { background-color: var(--c-accent-on-dark); transform: translateX(4px); }
.contact-submit__button:active:not(:disabled) { transform: scale(.985); }
.contact-submit__button:disabled { background-color: var(--c-band); cursor: progress; }
.contact-submit__button:disabled .contact-submit__icon { animation: ct-sending 1.1s var(--ease-cubic) infinite; }
html[data-motion="paused"] .contact-submit__button:disabled .contact-submit__icon { animation: none; opacity: .6; }
@keyframes ct-sending {
  0% { transform: translateX(-4px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateX(6px); opacity: 0; }
}
.contact-status { max-width: var(--ct-text-w); margin: 20px auto 0; font-size: var(--ct-label); line-height: 1.8; }
.contact-status[data-tone="error"] { font-weight: 600; color: var(--c-error); }
.contact-status[data-tone="pending"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* announced only: the button already reads 送信しています… */
.contact-fallback { max-width: 34em; margin: 16px auto 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-thumb); font-size: var(--ct-label); line-height: 1.8; }
.contact-fallback__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-top: 8px; }

/* 7. Direct contact: one head | body row; inside, each key sits over its value (reference counter stack), so values share the body column edge ------ */
.contact-direct { padding-block: var(--space-120) var(--space-200); }
.contact-row--direct { border-bottom: 1px solid var(--line); }
.contact-direct__item { display: grid; gap: 14px; padding-block: 28px; }
.contact-direct__item:first-child { padding-top: 0; }
.contact-direct__item:last-child { padding-bottom: 0; }
.contact-direct__item + .contact-direct__item { border-top: 1px solid var(--c-form-line); }
.contact-direct__key { font-family: var(--ff-latin); font-size: var(--fs-label); font-weight: 300; line-height: 1; letter-spacing: var(--ls-label); color: var(--fg-mute); }
/* big mail / tel: the underline sits under the text only; the arrow is the action cue and travels on hover */
.contact-direct__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  max-width: 100%;
  font-size: var(--fs-catch-jp);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: var(--ls-ui);
  transition: color var(--d-fast);
}
.contact-direct__text { position: relative; min-width: 0; padding-bottom: 4px; overflow-wrap: anywhere; }
.contact-direct__text::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background-color: currentColor;
  transition: height var(--d-fast);
}
.contact-direct__arrow {
  flex: none;
  width: .625em;
  height: .625em;
  background-color: var(--fg-mute);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--d-base) var(--ease-cubic), background-color var(--d-fast);
}
.contact-direct__link:focus-visible { color: var(--accent); }
.contact-direct__link:focus-visible .contact-direct__text::after { height: 2px; animation: rt-wipe .9s both; }
.contact-direct__link:focus-visible .contact-direct__arrow { background-color: var(--accent); transform: translateX(6px); }
.contact-direct__link:active .contact-direct__arrow { transform: translateX(10px); }
.contact-direct__note { max-width: 30em; margin-top: 14px; font-size: var(--fs-label); line-height: 1.7; color: var(--fg-mute); }
.contact-direct__address { font-style: normal; line-height: 1.8; }
.contact-direct__address span { display: block; }
.contact-direct__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; }
.contact-copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 20px 0 16px;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-btn);
  background-color: transparent;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: var(--ls-ui);
  color: var(--c-ink);
  transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast), transform var(--d-instant) var(--ease-cubic);
}
.contact-copy__icon {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--ct-copy) center / contain no-repeat;
  mask: var(--ct-copy) center / contain no-repeat;
}
.contact-copy.is-done .contact-copy__icon { -webkit-mask-image: var(--ct-check); mask-image: var(--ct-check); }
.contact-copy:focus-visible { border-color: var(--c-ink); background-color: var(--c-ink); color: var(--c-white); }
.contact-copy:active { transform: scale(.97); }
.contact-copy.is-done { border-color: var(--c-ink); }
.contact-copy__status { min-height: 1.6em; font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); }

/* 8. Notice pages: thanks, 404 (centred title like the reference's list title) */
.notice { position: relative; padding-block: var(--ct-head-top) var(--space-200); text-align: center; }
.notice__label { margin-bottom: var(--space-40); }
.notice__lines { display: flex; flex-direction: column; align-items: center; }
.notice__text { max-width: 36em; margin: var(--space-120) auto 0; line-height: 1.9; }
.notice__text p + p { margin-top: .6em; }
.notice__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 64px; margin-top: var(--space-80); }

/* 9. Privacy: one grid (320px heads | bodies) from the date row to the last section ------ */
.legal { padding-bottom: var(--space-200); }
.legal-hero { position: relative; padding-top: var(--ct-head-top); }
.legal-row, .legal-sec { display: grid; grid-template-columns: var(--ct-split); gap: 16px var(--ct-col-gap); }
.legal-meta { margin-top: var(--ct-lead-gap); align-items: baseline; }
.legal-date { font-size: var(--fs-small); line-height: 1.85; color: var(--fg-2); }
.legal-intro { max-width: 40em; line-height: 1.85; }
.legal-toc { margin-top: var(--space-80); padding-top: var(--space-40); border-top: 1px solid var(--line); }
.legal-toc__list { columns: 2; column-gap: var(--space-40); }
.legal-toc__list li { display: flex; gap: 12px; padding-block: 5px; break-inside: avoid; font-size: var(--fs-label); line-height: 1.6; }
.legal-toc__list li > span { flex: none; width: 1.8em; font-family: var(--ff-latin); font-weight: 300; color: var(--fg-mute); }
.legal-toc__list a { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--d-fast), text-decoration-color var(--d-fast); }
.legal-body { margin-top: var(--space-120); }
.legal-sec { padding-block: var(--space-40) var(--space-56); border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.legal-sec:last-child { border-bottom: 1px solid var(--line); }   /* closes the list like the direct-contact row on /contact/ */
.legal-sec__head { align-self: start; }
.legal-sec__title { margin-top: 16px; font-size: var(--fs-ui-l); font-weight: 600; line-height: 1.6; }
.legal-sec__body { max-width: 40em; line-height: 1.85; }
.legal-sec__body > * + * { margin-top: 1em; }
.legal-sec__body h3 { margin-top: 1.6em; font-weight: 600; }
.legal-sec__body ol, .legal-sec__body ul { padding-inline-start: 1.4em; }
.legal-sec__body li + li { margin-top: .35em; }
.legal-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 10px 28px; }
.legal-dl dt { font-size: var(--fs-label); font-weight: 600; line-height: 1.85; color: var(--fg-2); }
.legal-table { width: 100%; font-size: var(--fs-label); line-height: 1.7; }
.legal-table caption { padding-bottom: 8px; text-align: start; font-size: var(--fs-small); color: var(--fg-mute); }
.legal-table th, .legal-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.legal-table th:last-child, .legal-table td:last-child { padding-inline-end: 0; }
.legal-table thead th { font-weight: 600; white-space: nowrap; border-bottom-color: var(--fg-mute); }
.legal-table--vendors td:first-child { white-space: nowrap; }
.legal-table--vendors td:nth-child(2) { white-space: nowrap; }

@media (min-width: 769px) {
  /* the head stays in view while its (sometimes long) body scrolls past (contact rows and privacy alike) */
  .legal-sec__head, .contact-row__head { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
}

/* 10. Links + hover ---------------------------------------------------------
   Prose links on paper: ink -> navy alone is too close to read as a state, so the underline carries it
   (soft at rest, full colour + 2px + a small drop on hover/focus, pressed back up on :active). */
.contact .link, .legal .link, .notice .link {
  text-decoration-color: var(--c-line);
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: .24em;
  transition: color var(--d-fast), text-decoration-color var(--d-fast), text-underline-offset var(--d-base) var(--ease-cubic);
}
.contact .link:focus-visible, .legal .link:focus-visible, .notice .link:focus-visible,
.legal-toc__list a:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: .34em;
}
.contact .link:active, .legal .link:active, .notice .link:active, .legal-toc__list a:active {
  color: var(--accent);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: .14em;
}
.contact-summary__list a:active { text-decoration-thickness: 2px; }

/* Hover (pointer devices only; mirrored on :focus-visible above) */
@media (hover: hover) and (pointer: fine) {
  .contact .link:hover, .legal .link:hover, .notice .link:hover, .legal-toc__list a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: .34em;
  }
  .contact-tips__summary:hover .contact-tips__icon { border-color: var(--c-ink); background-color: var(--c-ink); }
  .contact-tips__summary:hover .contact-tips__icon::before,
  .contact-tips__summary:hover .contact-tips__icon::after { background-color: var(--c-white); }
  .contact-tips:not([open]):hover { border-color: var(--c-mute); }
  .contact-control:hover { border-color: var(--c-ink); }
  .contact-control[aria-invalid="true"]:hover { border-color: var(--c-error); }
  .contact-consent__row:hover .contact-consent__box:not([aria-invalid="true"]) { border-color: var(--c-ink); }
  .contact-submit__button:hover:not(:disabled) { background-color: var(--c-accent); }
  .contact-submit__button:hover:not(:disabled) .contact-submit__icon { background-color: var(--c-accent-on-dark); transform: translateX(4px); }
  .contact-copy:hover { border-color: var(--c-ink); background-color: var(--c-ink); color: var(--c-white); }
  .contact-direct__link:hover { color: var(--accent); }
  .contact-direct__link:hover .contact-direct__text::after { height: 2px; animation: rt-wipe .9s both; }
  .contact-direct__link:hover .contact-direct__arrow { background-color: var(--accent); transform: translateX(6px); }
  .contact-summary__list a:hover { color: var(--c-error); text-decoration-thickness: 2px; }
}

/* 11. SP (single breakpoint) ---------------------------------------------- */
@media (max-width: 768px) {
  .contact, .legal, .notice { --ct-head-top: 170px; --ct-group-pad: 24px; }   /* reference SP cap line at 176px */
  .contact-row, .legal-row, .legal-sec { grid-template-columns: minmax(0, 1fr); }
  .contact-row { padding-block: 32px var(--space-40); }
  .contact-row__title { margin-top: 14px; font-size: var(--fs-row); }
  /* guide disclosure: label over title beside the toggle; columns stack, the leave-out block under a hairline */
  .contact-tips__summary { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 12px 14px 16px; }
  .contact-tips__label { grid-row: 1; grid-column: 1; }
  .contact-tips__title { grid-row: 2; grid-column: 1; }
  .contact-tips__icon { grid-row: 1 / span 2; grid-column: 2; }
  .contact-tips__body { grid-template-columns: minmax(0, 1fr); margin-inline: 16px; padding-block: 20px 24px; }
  .contact-tips__col--avoid { padding: var(--space-24) 0 0; border-inline-start: 0; border-top: 1px solid var(--c-form-line); }
  .contact-guide__list li { grid-template-columns: 28px minmax(0, 1fr); }
  .contact-summary { padding: 20px; }
  .contact-consent__row { align-items: flex-start; }
  .contact-consent__box { margin-top: 5px; }
  .contact-consent__label { line-height: 1.8; }
  .contact-direct__item { gap: 12px; padding-block: 22px; }
  .notice__actions { display: grid; justify-content: center; justify-items: start; gap: 28px; }
  .legal-meta { gap: 12px; }
  .legal-toc { margin-top: var(--space-56); padding-top: var(--space-24); }
  .legal-toc__list { columns: 1; margin-top: 16px; }
  .legal-sec { gap: var(--space-24); }
  .legal-sec__title { margin-top: 12px; font-size: var(--fs-row); }
  .legal-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal-dl dd + dt { margin-top: 12px; }
  /* tables stack into one block per row (explicit ARIA roles in the markup keep the table semantics) */
  .legal-table, .legal-table caption, .legal-table tbody { display: block; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal-table tbody { border-top: 1px solid var(--fg-mute); }
  .legal-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; padding-block: 14px; border-bottom: 1px solid var(--line); }
  .legal-table td { padding: 0; border: 0; }
  .legal-table td:first-child { font-weight: 600; color: var(--fg); }
  .legal-table--vendors tr { grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
  .legal-table--vendors td:nth-child(2) { font-size: var(--fs-small); color: var(--fg-mute); }
  .legal-table--vendors td:nth-child(3) { grid-column: 1 / -1; }
}

/* 12. Forced colours: native select arrow and checkbox; keep the drawn arrow visible */
@media (forced-colors: active) {
  .contact-control--select { -webkit-appearance: auto; appearance: auto; background-image: none; }
  .contact-consent__box { -webkit-appearance: auto; appearance: auto; }
  .contact-consent__box::before { display: none; }
  .contact-submit__icon, .contact-copy__icon { forced-color-adjust: none; background-color: ButtonText; }
  .contact-direct__arrow { forced-color-adjust: none; background-color: LinkText; }
  .contact-tips__icon::before, .contact-tips__icon::after { forced-color-adjust: none; background-color: CanvasText; }
}