/* ============================================================
   ZAG for Excel — site design system
   Aesthetic: 仕様書 / specification-document. Blueprint, ink, hairlines,
   graph-paper substrate, the ZAG brand blue used only where
   the product asserts provenance.

   Surface and ink values are taken from the ZAG PIM Studio design
   system so the site and the product read as one brand: the greys are
   its zero-saturation neutral ramp, and --accent is its canonical
   --brand-blue (the value used in the wordmark itself).
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* The site is light-only. Declaring it stops the browser from darkening the
     scrollbars and form controls for visitors whose OS is set to dark, which
     would otherwise leave dark furniture around a light page. */
  color-scheme: light;

  --paper:      #F8F9FA;    /* PIM Studio --surface-sunken */
  --paper-2:    #FFFFFF;    /* --bg-canvas: cards and tables sit above the page */
  --paper-3:    #E7E7EA;    /* --gray-200: table heads, cell keys */
  --ink:        #0D0D0D;    /* --gray-900 */
  --ink-2:      #4B5563;    /* --gray-600 */
  --ink-3:      #6B7280;    /* --gray-500 */
  --rule:       #D1D5DB;    /* --border-strong */
  --rule-2:     #E2E4EC;    /* --border */
  --accent:        #0014DF; /* --brand-blue */
  --accent-ink:    #0010AE;
  --accent-wash:   rgba(0, 20, 223, 0.055);
  /* Tinted rather than neutral: at this opacity the substrate reads as a
     blueprint grid rather than generic graph paper. */
  --grid-line:  rgba(0, 20, 223, 0.04);
  --shadow:     0 1px 2px rgba(15,17,23,.04), 0 8px 28px -18px rgba(15,17,23,.28);

  --ff-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --ff-body:    "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 76rem;
  --cell: 27px;               /* graph-paper pitch */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
  background-color: var(--paper);
  /* graph-paper substrate */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: center top;
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 52rem; }
main { display: block; }

section { position: relative; }
.band { padding-block: clamp(4rem, 9vw, 7.5rem); }
.band + .band { border-top: 1px solid var(--rule-2); }
.band--tint { background: linear-gradient(180deg, var(--accent-wash), transparent 60%); }

/* ---------- type ---------- */
h1, h2, h3, .display {
  overflow-wrap: normal; word-break: normal; line-break: strict;
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: .005em;
}
h1 { font-size: clamp(1.8rem, 3.1vw, 2.6rem); line-height: 1.28; letter-spacing: -.008em;
     overflow-wrap: normal; word-break: normal; line-break: strict; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.3; }
h3 { font-size: clamp(1.12rem, 1.8vw, 1.35rem); line-height: 1.5; }
p  { max-width: var(--measure); }
p + p { margin-top: 1.05em; }
strong { font-weight: 600; }
em { font-style: normal; background: var(--accent-wash); box-shadow: inset 0 -.42em 0 var(--accent-wash); padding-inline: .12em; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); color: var(--accent-ink); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px;
}

.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-2); max-width: 40rem; line-height: 1.85; }
.small { font-size: .85rem; line-height: 1.7; color: var(--ink-3); }

/* mono utility label — the recurring "spec sheet" voice */
.mono, .label, .kicker, .idx {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: .69rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-feature-settings: normal;
}
.label, .kicker { color: var(--ink-3); }
.kicker { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; }
.kicker::before {
  content: ""; width: 1.9rem; height: 1px; background: var(--accent); flex: none;
}
.idx { color: var(--accent); }

/* ---------- registration marks (トンボ) ---------- */
.tombo { position: absolute; width: 15px; height: 15px; pointer-events: none; opacity: .5; }
.tombo::before, .tombo::after { content: ""; position: absolute; background: var(--ink-3); }
.tombo::before { left: 0; top: 7px; width: 100%; height: 1px; }
.tombo::after  { top: 0; left: 7px; height: 100%; width: 1px; }
.tombo--tl { top: 14px; left: 14px; } .tombo--tr { top: 14px; right: 14px; }
.tombo--bl { bottom: 14px; left: 14px; } .tombo--br { bottom: 14px; right: 14px; }
@media (max-width: 720px) { .tombo { display: none; } }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule-2);
}
.site-head__in { display: flex; align-items: center; gap: 1.5rem; height: 62px; }
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; margin-right: auto; }
.brand__mark { height: 19px; width: auto; }
.brand__p {
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3); padding-left: .5rem; border-left: 1px solid var(--rule);
}
.site-foot .brand__mark { height: 22px; }
.navlinks { display: flex; align-items: center; gap: 1.4rem; }
.navlinks a { font-size: .875rem; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.navlinks a:hover { color: var(--accent-ink); }
.lang { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .12em; border: 1px solid var(--rule); padding: .3rem .55rem; text-decoration: none; color: var(--ink-3); }
.lang:hover { border-color: var(--accent); color: var(--accent); }
/* .navlinks a wins on specificity over .btn, so the CTA has to restate its own
   colour and size or it renders as grey body text on the accent fill. */
.navlinks .nav-cta, .navlinks .nav-cta:hover { color: #FBFAFF; font-size: .82rem; }
@media (max-width: 900px) { .navlinks .hide-sm { display: none; } }
/* Below this the section links cannot fit beside the wordmark; the footer
   carries the full navigation, so keep only the language toggle. The CTA stays:
   between the hero and the contact block there is no other way to apply, and
   this is the width where scrolling that far is least likely. */
@media (max-width: 760px) { .navlinks a:not(.lang):not(.nav-cta) { display: none; } }
/* At this point the wordmark, the product suffix, the toggle and the CTA stop
   fitting on one line; the suffix is the one that repeats in the footer. */
@media (max-width: 420px) { .brand__p { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--accent); color: #FBFAFF; text-decoration: none;
  padding: .72rem 1.25rem; font-size: .9rem; font-weight: 500;
  border: 1px solid var(--accent); border-radius: 1px; transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--accent-ink); color: #FBFAFF; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent-ink); }
.btn--sm { padding: .5rem .9rem; font-size: .82rem; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 7vw, 5.5rem); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0,1.16fr) minmax(0,1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 1.6rem; text-wrap: balance; }
.hero h1 .accent { color: var(--accent); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.hero__meta {
  margin-top: 2.3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 1rem;
}
@media (max-width: 940px) { .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero__meta dt { font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.hero__meta dd { font-size: .93rem; font-weight: 500; }

/* ---------- framed figure: screenshot (hero) and provenance diagram ---------- */
.prov, .shot {
  border: 1px solid var(--rule); background: var(--paper-2); box-shadow: var(--shadow);
  border-radius: 2px; overflow: hidden; margin: 0;
}
.prov__bar, .shot__bar {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem;
  border-bottom: 1px solid var(--rule-2); background: var(--paper-3);
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.prov__dot, .shot__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
/* The width/height attributes hold the aspect ratio, so the hero does not
   reflow when the capture finishes loading. */
.shot img { display: block; width: 100%; height: auto; }
/* The diagram is a hero-sized figure reused at body width under step 03. */
.prov--inline { margin-top: 1.4rem; }
.prov__body { display: grid; grid-template-columns: 1fr 1fr; }
.prov__col { padding: 1rem .95rem 1.1rem; }
.prov__col + .prov__col { border-left: 1px solid var(--rule-2); }
.prov__h { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .75rem; display: block; }

/* left: messy source */
.src-line { height: 6px; background: var(--rule-2); border-radius: 1px; margin-bottom: 7px; }
.src-line--s { width: 62%; } .src-line--m { width: 84%; } .src-line--xs { width: 38%; }
.src-hit {
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: 0; text-transform: none;
  background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  padding: .2rem .4rem; display: inline-block; margin-bottom: 7px; color: var(--ink);
  position: relative; border-radius: 1px;
}
.src-hit sup { color: var(--accent); font-weight: 600; font-size: .62rem; margin-left: .25rem; }

/* right: filled template cells */
.tcell { display: grid; grid-template-columns: 3.1rem 1fr; border: 1px solid var(--rule-2); border-bottom: 0; font-size: .74rem; }
.tcell:last-of-type { border-bottom: 1px solid var(--rule-2); }
.tcell__k { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .05em; color: var(--ink-3); padding: .34rem .4rem; border-right: 1px solid var(--rule-2); background: var(--paper-3); display: flex; align-items: center; }
.tcell__v { padding: .34rem .5rem; display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 1.9rem; }
.tcell--hit .tcell__v { background: var(--accent-wash); }
.tcell__v span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stamp {
  flex: none; width: 15px; height: 15px; border: 1px solid var(--accent); border-radius: 50%;
  color: var(--accent); font-family: var(--ff-mono); font-size: .56rem; font-weight: 600;
  display: grid; place-items: center; line-height: 1;
}
.prov__foot {
  border-top: 1px solid var(--rule-2); padding: .6rem .85rem; font-size: .74rem; color: var(--ink-3);
  display: flex; align-items: center; gap: .5rem;
}
@media (max-width: 460px) { .prov__body { grid-template-columns: 1fr; } .prov__col + .prov__col { border-left: 0; border-top: 1px solid var(--rule-2); } }

/* ---------- credential strip ---------- */
/* Sits between the price and the ask, which is where the question it answers
   actually gets asked. Narrower padding than a .band so it reads as a beat
   between two sections rather than a section of its own, and it carries the
   hairline that .band + .band would otherwise have drawn for the section
   below it. */
.creds-band { padding-block: clamp(2.25rem, 5vw, 3.5rem); border-top: 1px solid var(--rule-2); }
/* .band + .band cannot see past the strip, so the section after it would come
   out with no rule above. */
.creds-band + .band { border-top: 1px solid var(--rule-2); }
/* Same construction as .cta: cells on a 1px grid gap, so the panel reads as
   part of the existing vocabulary rather than a badge shelf bolted on. */
/* The label hugs its text and the two logo cells split what is left, so the
   empty space is divided by the same hairline rules as everywhere else rather
   than pooling in one corner. */
.creds {
  display: grid; grid-template-columns: auto 1fr 1fr;
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: 2px; overflow: hidden;
}
.creds__label {
  background: var(--paper-2); padding: 1rem 1.3rem;
  display: flex; align-items: center;
}
.creds__cell {
  background: var(--paper-2); padding: .95rem 1.9rem;
  display: flex; align-items: center; justify-content: center;
}
/* Heights are set per logo rather than shared: one is a bare wordmark and the
   other a self-contained card, so equal box heights would read as unequal.
   These two land within a few pixels of the same width. */
.creds__cell img { width: auto; }
.creds__cell--techstars img { height: 38px; }
.creds__cell--microsoft img { height: 58px; }
@media (max-width: 720px) {
  .creds { grid-template-columns: 1fr 1fr; }
  .creds__label { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 420px) {
  .creds { grid-template-columns: 1fr; }
  .creds__cell { padding-block: 1.15rem; }
}

/* ---------- spec table (the workhorse block) ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec caption {
  text-align: left; font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); padding-bottom: .7rem;
}
.spec th, .spec td { text-align: left; vertical-align: top; padding: .82rem 1rem; border-top: 1px solid var(--rule-2); }
.spec thead th {
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-block: .6rem;
}
.spec tbody tr:last-child td, .spec tbody tr:last-child th { border-bottom: 1px solid var(--rule); }
.spec tbody th { font-weight: 500; width: 34%; }
.spec tbody tr { transition: background .16s ease; }
.spec tbody tr:hover { background: var(--paper-2); box-shadow: inset 2px 0 0 var(--accent); }
.spec td p, .spec th p { max-width: none; }
.spec .num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .spec { font-size: .86rem; }
  .spec th, .spec td { padding: .65rem .6rem; }
  .spec tbody th { width: 40%; }
}

/* ---------- two-up editorial split ---------- */
.split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- feature rows ---------- */
.feat { display: grid; grid-template-columns: 4.5rem minmax(0,1fr) minmax(0,1fr); gap: clamp(1rem,3vw,2.6rem); padding-block: clamp(2rem,4vw,3rem); border-top: 1px solid var(--rule-2); align-items: start; }
.feat:first-of-type { border-top: 1px solid var(--rule); }
.feat__n { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .1em; color: var(--accent); padding-top: .45rem; }
.feat h3 { margin-bottom: .55rem; }
.feat__t { max-width: 22rem; }
.feat p { color: var(--ink-2); font-size: .94rem; }
@media (max-width: 860px) {
  .feat { grid-template-columns: 2.6rem minmax(0,1fr); }
  .feat__b { grid-column: 2; }
  .feat__t { max-width: none; }
}

/* ---------- retailer chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.chip {
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .06em;
  border: 1px solid var(--rule); padding: .38rem .7rem; color: var(--ink-2); border-radius: 1px;
  display: inline-flex; align-items: center; gap: .45rem; background: var(--paper-2);
}
.chip--live { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); }
.chip--live::before { content:""; width:5px; height:5px; border-radius:50%; background: var(--accent); }
.chip--soon { opacity: .68; }
/* Firms up the outline on the ones we actually support, in the same spirit as
   the .spec row highlight. The 開発中 chips stay inert — there is nothing to
   draw attention to yet. */
.chip:not(.chip--soon) { transition: border-color .18s ease; }
.chip:not(.chip--soon):hover { border-color: var(--accent); }
.chip--soon::before { content:""; width:5px; height:5px; border-radius:50%; border: 1px solid var(--ink-3); }

/* ---------- callout / note ---------- */
.note {
  border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  background: var(--paper-2); padding: 1.05rem 1.2rem; border-radius: 1px;
}
.note p { max-width: none; font-size: .9rem; color: var(--ink-2); }
.note__h { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; }

/* ---------- CTA panel ---------- */
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
@media (max-width: 780px) { .cta { grid-template-columns: 1fr; } }
.cta__cell { background: var(--paper-2); padding: clamp(1.5rem, 3vw, 2.3rem); display: flex; flex-direction: column; }
.cta__cell h3 { margin-bottom: .5rem; }
.cta__cell p { font-size: .92rem; color: var(--ink-2); flex: 1; margin-bottom: 1.4rem; }
.mailbtn { align-self: flex-start; }

/* ---------- legal document pages ---------- */
.doc { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); }
.doc__head { border-bottom: 1px solid var(--ink); padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
.doc__head h1 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); margin-bottom: .8rem; }
.doc__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.doc h2 {
  font-size: clamp(1.08rem, 2vw, 1.28rem); margin-top: 3rem; margin-bottom: .9rem;
  padding-top: 1.1rem; border-top: 1px solid var(--rule-2);
  display: grid; grid-template-columns: 2.9rem 1fr; gap: .6rem; align-items: baseline;
}
.doc h2 .n { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .08em; color: var(--accent); font-weight: 500; }
.doc h3 { margin-top: 1.9rem; margin-bottom: .5rem; font-size: 1.02rem; }
.doc > .wrap > section > p, .doc p { max-width: 40rem; }
.doc p, .doc li { font-size: .945rem; line-height: 1.92; color: var(--ink-2); }
.doc p strong, .doc li strong { color: var(--ink); }
.doc ul, .doc ol { margin-top: .8rem; max-width: 40rem; display: grid; gap: .5rem; }
.doc ul li { padding-left: 1.15rem; position: relative; }
.doc ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: .42rem; height: 1px; background: var(--accent); }
.doc ol { counter-reset: o; }
.doc ol li { padding-left: 1.9rem; position: relative; counter-increment: o; }
.doc ol li::before { content: counter(o) "."; position: absolute; left: 0; font-family: var(--ff-mono); font-size: .78rem; color: var(--accent); top: .12em; }
.doc .spec { margin-top: 1.3rem; }
.doc .note { margin-top: 1.3rem; max-width: 42rem; }
.doc__toc { border: 1px solid var(--rule); background: var(--paper-2); padding: 1.2rem 1.4rem; margin-bottom: 1rem; border-radius: 1px; }
.doc__toc ol { margin: 0; max-width: none; columns: 2; column-gap: 2rem; gap: 0; display: block; }
.doc__toc li { padding-left: 1.9rem; margin-bottom: .3rem; break-inside: avoid; font-size: .88rem; }
.doc__toc a { text-decoration: none; color: var(--ink-2); }
.doc__toc a:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); }
@media (max-width: 620px) { .doc__toc ol { columns: 1; } .doc h2 { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--ink); padding-block: 3rem 2.5rem; margin-top: 0; }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); gap: 2rem; }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__h { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; }
.foot__grid ul { display: grid; gap: .48rem; }
.foot__grid a { font-size: .875rem; text-decoration: none; color: var(--ink-2); }
.foot__grid a:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); }
.foot__bot { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--rule-2); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: baseline; }
.foot__bot p { font-size: .78rem; color: var(--ink-3); max-width: none; }

/* ---------- entrance motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .78s cubic-bezier(.16,.84,.34,1) forwards; }
  .rise-1 { animation-delay: .05s } .rise-2 { animation-delay: .14s }
  .rise-3 { animation-delay: .23s } .rise-4 { animation-delay: .32s } .rise-5 { animation-delay: .41s }
  @keyframes rise { to { opacity: 1; transform: none; } }

  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.34,1); }
  .reveal.in { opacity: 1; transform: none; }

  .draw { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1.1s .7s cubic-bezier(.6,0,.2,1) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* Enough to register that the row is the unit being read, not enough to
     suggest it is a control. */
  .feat h3 { transition: transform .3s cubic-bezier(.16,.84,.34,1); }
  .feat:hover h3 { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .rise, .reveal { opacity: 1; transform: none; } }

/* ---------- print (legal docs get printed & filed) ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .site-head, .site-foot, .tombo, .btn, .doc__toc { display: none !important; }
  .doc h2 { break-after: avoid; } .spec { break-inside: auto; } tr { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  .wrap { max-width: none; padding: 0; }
}

/* skip link */
.skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--accent); color: #FBFAFF; padding: .6rem 1rem; z-index: 100;
}
.skip:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
  left: .5rem; top: .5rem;
}