:root{
  --ink:#12151c;
  --paper:#ffffff;
  --line:rgba(18,21,28,.13);
  --accent:#1d3357;
  --accent-2:#c1623c;
  --accent-dark:#101b2d;
  --menu-field:#13233c;
  --accent-flash:#295ae3;
  --accent-flash-2:#009b91;
  --panel-alt:#f5f7fb;
  /* Wider PC content column (was 72rem/1152px): real 1280/1440/1162px PC
     viewports now actually use more of their own width instead of reading
     as a narrow centred strip. */
  --maxw:95rem;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  /* BIZ UDPGothic first: softer, more open letterforms than Meiryo/Yu
     Gothic at the same weight, while staying one of the three Windows-
     bundled candidates compared in prototype/font-review.html (see
     FONT_REVIEW.md for the comparison/rationale). Falls back through Yu
     Gothic/Meiryo/system sans on environments without it; no new font is
     fetched. */
  font-family:"BIZ UDPGothic","Yu Gothic Medium","Yu Gothic","Meiryo","Hiragino Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.9;font-size:18px;
}
h1,h2,h3{line-height:1.5;font-weight:700;margin:0;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.4rem,3.6vw,3.4rem);}
/* lower pages (8 pages, not TOP) carry a fixed left/right deco-rail from
   1080px up; widen the wrap gutter there so rail never overlaps heading/
   body/submenu content, scaling with the same clamp used by the rail. */
@media (min-width:1080px){
  body.lower-page .wrap{padding-inline:calc(clamp(48px,5vw,84px) + 16px);}
}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--accent);color:#fff;padding:.7rem 1.2rem;
}
.skip-link:focus{left:1rem;top:1rem;}

/* ===== reveal (no-JS/visible by default; JS gates the fade-in) ===== */
.reveal{opacity:1;transform:none;}
.js-ready .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.js-ready .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js-ready .reveal{opacity:1;transform:none;transition:none;}
}
html.js-ready.motion-paused .reveal{transition:none;opacity:1;transform:none;}

.section-title{font-size:clamp(1.75rem,2.8vw,2.5rem);}
.section-title::before{
  content:"";display:block;width:2.6rem;height:3px;border-radius:2px;
  margin:0 0 .9rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

/* ===== header / nav ===== */
.site-header{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand menu";
  align-items:center;gap:1rem;padding:1.1rem clamp(1.2rem,4vw,3rem);position:relative;
}
.site-header .inline-nav{display:none;}
@media (min-width:861px){
  .site-header{grid-template-columns:auto 1fr auto;grid-template-areas:"brand nav menu";}
  .site-header .inline-nav{display:inline-flex;}
}
/* Between 861 and 1100px the brand mark + wider 24-28px brand text + nav +
   menu button no longer reliably fit on one row; the nav drops to its own
   second row there (still above the fixed-width menu button's column)
   rather than visually colliding with the brand. */
@media (min-width:861px) and (max-width:1100px){
  .site-header{grid-template-columns:auto auto;grid-template-areas:"brand menu" "nav nav";row-gap:.6rem;}
  .site-header .inline-nav{justify-self:start;}
}
a.brand{
  grid-area:brand;text-decoration:none;color:var(--accent);font-weight:500;
  letter-spacing:.02em;justify-self:start;
  display:flex;align-items:center;gap:.7rem;
}
.brand-mark{
  flex:none;display:inline-flex;
  height:clamp(40px,4vw,52px);width:auto;aspect-ratio:869/604;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.brand-text{
  display:flex;flex-wrap:wrap;gap:0 .3em;
  font-size:clamp(1.4rem,1.7vw,1.65rem);
}
/* PC (same breakpoint the nav uses to go inline): the logo mark reaches its
   full 52px square and the company name gets a real minimum size instead of
   clamp()'s preferred-vw value collapsing back down to its 22.4px floor at
   common PC widths (1162/1280/1440px). */
@media (min-width:861px){
  .brand-mark{height:52px;}
  .brand-text{font-size:clamp(28px,1.8vw,32px);}
}
/* Break only between the two meaningful chunks ("ハイ・ファースト" /
   "合同会社"), never mid-word, so the trailing "社" never ends up alone on
   its own line at 320px. */
.brand-chunk{white-space:nowrap;}
.inline-nav{
  grid-area:nav;justify-self:end;list-style:none;margin:0;padding:0;
  display:flex;gap:1.4rem;font-size:16px;
}
.inline-nav a{text-decoration:none;opacity:.78;border-bottom:1px solid transparent;padding-bottom:.15rem;}
.inline-nav a:hover,.inline-nav a:focus-visible{opacity:1;border-color:var(--accent-2);}
.inline-nav a[aria-current="page"]{opacity:1;color:var(--accent);font-weight:700;}

/* Header nav specifically: each of TOP/宿泊施設向け/ベンダー向け is its own
   outlined, separated button rather than one solid-colour pill holding all
   three links as a single object. Scoped to .site-header so the footer's
   plain underlined nav links are unaffected. */
.site-header .inline-nav{gap:.6rem;}
.site-header .inline-nav a{
  border:1.5px solid var(--line);border-radius:999px;
  padding:.42rem 1rem;opacity:1;font-weight:600;
  transition:border-color .25s ease,background-color .25s ease,color .25s ease;
}
.site-header .inline-nav a:hover,
.site-header .inline-nav a:focus-visible{border-color:var(--accent-2);color:var(--accent-2);}
.site-header .inline-nav a[aria-current="page"]{
  background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;
}
@media (prefers-reduced-motion:reduce){.site-header .inline-nav a{transition:none;}}
.menu-btn-inline,.menu-fab{
  grid-area:menu;width:2.6rem;height:2.6rem;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1.5px solid var(--accent);background:var(--paper);
  transition:border-color .25s ease,background-color .25s ease;
}
.menu-btn-inline{justify-self:end;}
.menu-btn-inline:hover,.menu-btn-inline:focus-visible{border-color:var(--accent-2);}
.menu-fab{
  position:fixed;top:1rem;right:1rem;z-index:40;
  border-color:var(--accent-2);background:var(--menu-field);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.menu-fab.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.bars{width:1.1rem;height:.76rem;position:relative;}
.bars span{position:absolute;left:0;right:0;height:1px;background:var(--accent);
  transition:transform .25s ease,opacity .25s ease,top .25s ease;}
.menu-fab .bars span{background:#fff;}
.bars span:nth-child(1){top:0;}
.bars span:nth-child(2){top:50%;}
.bars span:nth-child(3){top:100%;}
[aria-expanded="true"] .bars span:nth-child(1){top:50%;transform:rotate(45deg);}
[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
[aria-expanded="true"] .bars span:nth-child(3){top:50%;transform:rotate(-45deg);}
@media (prefers-reduced-motion:reduce){
  .bars span,.menu-fab{transition:none;}
}

/* Compact dialog panel, not a fullscreen takeover: the outer .nav-dialog
   stays fixed/inset:0 only so it keeps acting as the click-outside catcher
   and backdrop; the panel itself (.nav-dialog-inner) is a bounded card
   anchored top-right, sized to its content on desktop and capped with its
   own scroll on mobile. inert/focus-trap/Escape/scroll-lock logic in
   motion.js is unchanged -- only the visual size/position moves. */
.nav-dialog{
  position:fixed;inset:0;z-index:50;
  background:rgba(10,14,22,.42);color:#fff;
  opacity:0;visibility:hidden;
  display:flex;justify-content:flex-end;align-items:flex-start;
  padding:clamp(.8rem,3vw,1.6rem);
  transition:opacity .3s ease,visibility .3s;
}
.nav-dialog.is-open{opacity:1;visibility:visible;}
.nav-dialog-inner{
  position:relative;background:var(--menu-field);
  width:min(20rem,100%);max-height:min(82vh,40rem);overflow-y:auto;
  border-radius:14px;box-shadow:0 18px 44px rgba(8,10,18,.38);
  margin-top:clamp(3.6rem,8vw,4.4rem);padding:.6rem 1.25rem 1.25rem;
}
/* Close button sits in a normal-flow header row inside the panel (not
   absolutely positioned against the full-viewport .nav-dialog), so it stays
   visually attached to the panel's own top-right corner at any width. */
.nav-dialog-head{display:flex;justify-content:flex-end;margin:0 0 .3rem;}
.nav-dialog-close{
  width:2.1rem;height:2.1rem;border-radius:50%;flex:none;
  background:var(--paper);color:var(--accent);border:1.5px solid var(--accent-2);
  font-size:1.1rem;line-height:1;cursor:pointer;
}
.nav-group{margin:0 0 1.3rem;}
.nav-group-title{font-size:15px;letter-spacing:.08em;opacity:.58;margin:0 0 .6rem;}
.nav-dialog-list{list-style:none;margin:0;padding:0;}
.nav-dialog-list li{border-top:1px solid rgba(255,255,255,.14);}
.nav-dialog-list li:first-child{border-top:none;}
.nav-dialog-list a{
  display:flex;align-items:baseline;gap:.7rem;padding:.75rem 0;color:#fff;
  text-decoration:none;border-bottom:1px solid transparent;font-size:17px;
}
.nav-dialog-list a:hover,.nav-dialog-list a:focus-visible{color:var(--accent-2);}
.nav-dialog-list a[aria-current="page"]{color:var(--accent-2);font-weight:700;}
.nav-dialog-list .num{color:var(--accent-2);font-size:15px;opacity:.85;min-width:1.5rem;}
.nav-group.sub .nav-dialog-list{padding-left:1.3rem;border-left:1px solid rgba(255,255,255,.14);}
.nav-group.utility{border-top:1px solid rgba(255,255,255,.22);padding-top:1.3rem;}

/* ===== footer ===== */
.site-footer{
  position:relative;background:var(--accent);color:#fff;margin-top:clamp(3rem,8vw,5rem);
  padding:clamp(2rem,5vw,3rem) clamp(1.2rem,4vw,3rem);
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.footer-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:1.4rem 2rem;margin:0 0 1.6rem;
}
.footer-brand{display:flex;align-items:center;gap:.9rem;}
.footer-logo-mark{display:inline-flex;flex:none;width:80px;height:56px;}
.footer-logo-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.footer-company-name{
  font-size:clamp(1.4rem,3vw,2rem);font-weight:600;margin:0;letter-spacing:.015em;
  display:flex;flex-wrap:wrap;gap:0 .35em;
}
/* Break only between meaningful chunks ("ハイ・ファースト" / "合同会社"),
   never mid-word, at any width. */
.footer-company-name-chunk{display:inline-block;white-space:nowrap;}
.site-footer .inline-nav{
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;font-size:15px;margin:0;
}
.site-footer .inline-nav a{color:#fff;opacity:.9;}
.site-footer .inline-nav a:hover,.site-footer .inline-nav a:focus-visible{border-color:var(--accent-2);opacity:1;}
/* Address now holds only location/founding; the company name has its own
   larger heading above (.footer-company-name), so the information
   hierarchy is explicit rather than three equal-weight lines. */
.site-footer address{font-style:normal;opacity:.82;font-size:15px;line-height:1.85;}
.site-footer .legal{opacity:.6;font-size:15px;margin-top:1rem;}
@media (max-width:640px){
  .footer-top{flex-direction:column;}
}

/* ===== decorative margin rail (8 lower pages; not TOP) ===== */
.deco-rail{
  position:fixed;top:0;bottom:0;width:clamp(48px,5vw,84px);
  pointer-events:none;z-index:1;opacity:.9;display:none;
}
@media (min-width:1080px){.deco-rail{display:block;}}
.deco-rail-l{left:0;}
.deco-rail-r{right:0;}
.deco-rail-r svg{transform:scaleX(-1);}
.deco-rail svg{width:100%;height:100%;}
.deco-rail-m{display:block;margin:0 auto 1.6rem;max-width:260px;}
@media (min-width:1080px){.deco-rail-m{display:none;}}

.deco-path-base{fill:none;stroke-width:2;stroke-linecap:round;stroke:var(--accent-2);opacity:.45;}
.deco-path-flow{fill:none;stroke-width:1.6;stroke-linecap:round;stroke:var(--accent);opacity:.85;}
.js-ready .deco-path-flow{stroke-dasharray:22 978;animation:deco-flow 9s linear infinite;}
@keyframes deco-flow{0%{stroke-dashoffset:0;}100%{stroke-dashoffset:-1000;}}
/* Fill colour is set per-node via inline style in build-site.cjs (each
   area's own AREA_COLORS value), so this stylesheet only animates scale. */
.js-ready .deco-node{
  transform-box:fill-box;transform-origin:center;
  animation:deco-breathe 3s ease-in-out infinite;
}
.deco-node:nth-of-type(2){animation-delay:.6s;}
.deco-node:nth-of-type(3){animation-delay:1.2s;}
.deco-node:nth-of-type(4){animation-delay:1.8s;}
.deco-node:nth-of-type(5){animation-delay:2.4s;}
@keyframes deco-breathe{0%,100%{transform:scale(.86);}50%{transform:scale(1.08);}}
/* Current-area mark (area detail pages only): a thin static ring drawn
   behind the enlarged node, in that area's own colour -- colour, size and
   this ring mark together indicate "you are here", not colour alone. */
.deco-node-ring{fill:none;stroke-width:1.6;opacity:.55;}
/* Ring/connect motif: a faint closed ring always sits around the two middle
   nodes (base, non-animated, so the completed figure is visible even with
   no JS or when every animation is paused); a short bright dash travels once
   around that ring on a slower, offset period from the line-flow dash above,
   reading as "circle forms, then unwinds" rather than a copy of the line. */
.deco-loop-base{fill:none;stroke:var(--line);stroke-width:1.4;opacity:.4;}
.deco-loop-flow{fill:none;stroke:var(--accent-2);stroke-width:1.6;opacity:.8;}
.js-ready .deco-loop-flow{stroke-dasharray:18 982;animation:deco-loop-flow 11s linear infinite;animation-delay:1.4s;}
@keyframes deco-loop-flow{0%{stroke-dashoffset:0;}100%{stroke-dashoffset:-1000;}}
@media (prefers-reduced-motion:reduce){
  .js-ready .deco-path-flow,.js-ready .deco-node,.js-ready .deco-loop-flow{animation:none;}
}
html.motion-paused .deco-path-flow,html.motion-paused .deco-node,html.motion-paused .deco-loop-flow,
.is-offscreen .deco-path-flow,.is-offscreen .deco-node,.is-offscreen .deco-loop-flow,
.is-tab-hidden .deco-path-flow,.is-tab-hidden .deco-node,.is-tab-hidden .deco-loop-flow{animation-play-state:paused;}

/* ===== vendor-only rail motif (仮適用): short ticks settle once from
   scattered angles into one shared diagonal -- "several short lines/points
   aligning into one forward direction" -- replacing the 5-colour dot/flow
   rail above only on the vendor page (that motif's one-colour-per-area
   meaning does not apply here). Navy/terracotta only, a single one-time
   settle rather than a continuous loop, so it stays light and never
   competes with the vendor page's own text. See VENDOR_MOTIF_PROPOSAL.md. */
.vendor-deco-axis{stroke:var(--line);stroke-width:1.4;opacity:.5;}
.vendor-deco-tick{
  stroke-width:2.4;stroke-linecap:round;opacity:.85;
  transform-box:fill-box;transform-origin:center;
  transform:rotate(var(--tick-start));
}
.js-ready .vendor-deco-tick{
  animation:vendor-tick-align 1.1s cubic-bezier(.22,.9,.32,1) var(--tick-delay,0s) both;
}
@keyframes vendor-tick-align{
  from{transform:rotate(var(--tick-start));opacity:.35;}
  to{transform:rotate(-16deg);opacity:.85;}
}
@media (prefers-reduced-motion:reduce){
  .js-ready .vendor-deco-tick{animation:none;transform:rotate(-16deg);opacity:.85;}
}
html.motion-paused .vendor-deco-tick,
.is-offscreen .vendor-deco-tick,.is-tab-hidden .vendor-deco-tick{animation-play-state:paused;}

.motion-row{display:flex;justify-content:center;padding-block:clamp(2rem,5vw,3rem) 0;}
.motion-toggle{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);padding:.5rem 1.1rem;border-radius:999px;
  font-size:15px;cursor:pointer;
}
.motion-toggle:hover,.motion-toggle:focus-visible{border-color:var(--accent-2);}

/* ===== breadcrumb ===== */
.crumbs{font-size:15px;opacity:.65;margin:clamp(1.6rem,4vw,2.4rem) 0 0;display:flex;flex-wrap:wrap;gap:.3rem;}
.crumbs a{text-decoration:underline;text-decoration-color:var(--line);}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--accent-2);}
.crumbs .sep{opacity:.5;}

/* ===== area detail hero (title + short intro) ===== */
.area-hero{padding-block:clamp(1.4rem,4vw,2rem) clamp(1rem,3vw,1.4rem);}
.area-hero .num{display:block;font-size:.95rem;letter-spacing:.14em;color:var(--area-color,var(--accent-2));font-weight:700;margin:0 0 .7rem;}
.area-hero h1{font-size:clamp(3rem,5.4vw,4rem);margin:0 0 1.2rem;}
.area-hero .lead{max-width:62ch;font-size:1.15rem;opacity:.85;}

/* ===== large top-view image/diagram right under the hero ===== */
/* This element also carries the shared .wrap class (max-width + margin:0
   auto); setting the shorthand margin here used to zero out that auto
   inline margin again, pulling the whole block (and the photo/diagram
   inside it) to the left on viewports wider than --maxw. margin-inline:auto
   keeps the centring, margin-block only adds the bottom gap. */
.area-hero-visual{margin-block:0 clamp(2.4rem,6vw,3.6rem);margin-inline:auto;}
.area-hero-visual-inner{
  position:relative;overflow:hidden;background:var(--panel-alt);
  aspect-ratio:16/9;border-radius:4px;
}
.area-hero-visual-inner img{width:100%;height:100%;object-fit:cover;display:block;}
.area-hero-visual-inner .flow-diagram,
.area-hero-visual-inner .bidir-diagram{padding:clamp(1.6rem,4vw,2.6rem);}
/* Diagram-type hero visuals (01/03/04): size to the diagram's own content
   instead of the photo frame's fixed min-height, so there is no leftover
   grey space below a diagram that is shorter than a 260/360px photo frame. */
.area-hero-visual-inner-diagram{
  min-height:0;background:var(--paper);display:flex;align-items:center;
}
.area-hero-visual-inner-diagram .flow-diagram,
.area-hero-visual-inner-diagram .bidir-diagram{width:100%;}
/* The main hero/overview-row flow diagram should use the full width given to
   it (no leftover side margin), unlike the small item-level diagrams which
   stay capped so they don't dominate the text column. */
.area-hero-visual-inner .rel-canvas,
.svc-row-media .rel-canvas{max-width:none;}
.area-hero-caption{margin:.9rem 0 0;opacity:.78;max-width:60ch;font-size:.94rem;}

/* ===== two-column layout: sidebar (now left, per latest direction) + main
   content ===== */
.area-layout{display:block;}
@media (min-width:980px){
  .area-layout{display:grid;grid-template-columns:17.5rem minmax(0,1fr);gap:0 3rem;align-items:start;}
  .area-sidebar{position:sticky;top:1.6rem;order:1;}
  .area-main{order:2;}
}

/* ===== support items: numbered, roomy vertical list ===== */
.area-items{margin:0 0 clamp(2.6rem,6vw,4rem);}
.area-items > ul{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.area-items > ul > li{
  display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.3rem 1.2rem;
  border-top:1px solid var(--line);padding:1.6rem 0;
}
.area-items > ul > li.has-media{grid-template-columns:3rem minmax(0,1fr);}
.area-item-num{font-weight:700;font-size:1.3rem;letter-spacing:.02em;line-height:1.5;}
.area-item-body h3{font-size:clamp(1.75rem,2.1vw,2.1rem);margin:0 0 .5rem;}
.area-item-body p{opacity:.82;max-width:60ch;}
.area-item-media{
  grid-column:2;margin:.9rem 0 0;overflow:hidden;border-radius:4px;
  aspect-ratio:16/9;
}
.area-item-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* No width cap: the diagram gets the full body-column width (matching
   .area-item-body) so its own container query has enough room to pick the
   wide/horizontal canvas instead of always falling back to the narrow one. */
.area-item-diagram{grid-column:2;margin:.9rem 0 0;}
/* Below 980px (where the number column would otherwise permanently take
   ~4.2rem away from the body/diagram width on every item), stack number →
   heading/body → media/diagram in one column instead, so the diagram gets
   the item's full width rather than a squeezed leftover. */
@media (max-width:979px){
  .area-items > ul > li,
  .area-items > ul > li.has-media{grid-template-columns:1fr;gap:.3rem;}
  .area-item-num{margin:0 0 .1rem;}
  .area-item-media,.area-item-diagram{grid-column:1;max-width:100%;}
}

/* ===== process/relation diagrams =====
   Shared engine for the main per-area flow diagram and the six support-item
   diagrams: a plain SVG (lines/arrowheads only, no SVG text) sits behind an
   absolutely-positioned layer of real HTML labels. Both layers use the same
   0-100% coordinate space -- the SVG's viewBox and the positioning
   container's aspect-ratio (--rel-aspect) are always set to the same ratio
   in build-site.cjs, so left/top percentages on the HTML nodes line up with
   the SVG path endpoints without per-label measurement. */
.area-diagram-section{margin:0 0 clamp(2.6rem,6vw,4rem);}
.flow-diagram{
  background:var(--diagram-color-soft,var(--panel-alt));border-radius:6px;
  padding:clamp(1.3rem,3.5vw,2rem);
}
/* Same per-area flow diagram shown full-size inside the "支援の考え方"
   section (02/05) must render at the same scale as when it is the page
   hero (01/03/04), not fall back to the 26rem item-diagram thumbnail cap
   below -- so the exception already used for the hero/overview contexts
   also applies here. */
.area-diagram-section .rel-canvas{max-width:none;}
/* The 02/05 secondary diagrams (支援の考え方 on the two non-diagram-hero
   areas, planning/operations -- the only callers of this wrapper) are the
   same role and should read as one shared landscape card: aspect-ratio
   here only sets a 16:9 floor, it is not a fixed/clipped box -- content
   taller than that (e.g. the bidir mechanism list) still grows the box in
   flow rather than being cropped, since overflow is left at its default
   (visible). */
.area-diagram-stage .flow-diagram,
.area-diagram-stage .bidir-diagram{
  aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;
}
/* This PC column (area-main, ~600-650px) sits just under the flow
   diagram's usual 680px zigzag threshold (see @container rule below), so
   without a lower threshold scoped to this wrapper only, the flow here
   falls back to the tall mobile column while the bidir diagram beside it
   already reads as landscape. Does not touch the 680px rule used by the
   page hero / overview thumbnail / item diagrams elsewhere, and stays well
   above real narrow/phone container widths so the mobile column there is
   unaffected. */
@container (min-width:560px){
  .area-diagram-stage .flow-canvas-desktop{display:block;}
  .area-diagram-stage .flow-canvas-mobile{display:none;}
}
/* Support-item group (支援項目内の写真/図解): the coloured panel and a
   fixed 16:9 "stage" now live on this wrapper, shared by every item-level
   diagram function, instead of each one bringing its own background/
   padding/aspect-ratio -- so they read as one consistent regulation next to
   the 16:9 item-media photos. Captions/lists sit after the stage, outside
   the box, so their line count never changes the stage's height. */
.item-diagram{display:block;}
.area-item-diagram-stage{
  background:var(--diagram-color-soft,var(--panel-alt));border-radius:6px;
  padding:clamp(1rem,3vw,1.6rem);display:flex;align-items:center;justify-content:center;
}
/* width:auto collapses to 0 here: the canvas has no in-flow content (its
   SVG and labels are absolutely positioned), so a flex child with both
   width and height auto has nothing to size itself from. Each canvas
   instead picks a definite axis from its own aspect ratio -- wider-than-
   16:9 canvases fill the stage's width and derive height from that
   (rel-canvas-fit-w, set in build-site.cjs), narrower/taller ones fill the
   stage's height and derive width (rel-canvas-fit-h) -- so every diagram's
   real aspect ratio decides its own fit instead of one rule tuned only for
   diagrams that happen to be close to 16:9. */
/* Below the 520px frame (next rule), the stage has no fixed height of its
   own, so every canvas sizes from the stage's (always definite) width and
   derives its own height -- a height-based fit would be circular here
   (percentage height against a content-sized parent resolves to auto). */
.area-item-diagram-stage .rel-canvas,.area-item-diagram-stage .rel-canvas-wide{
  width:100%;height:auto;max-width:100%;max-height:100%;margin:0;
}
.item-diagram .area-item-diagram-stage{margin-bottom:.9rem;}
@container (min-width:520px){
  .area-item-diagram-stage{aspect-ratio:16/9;}
  /* Now the stage's height is fixed and definite, so a canvas narrower/
     taller than 16:9 switches to fill that height instead (its width then
     derives), staying inside the frame instead of overflowing past it. */
  .area-item-diagram-stage .rel-canvas-fit-h{width:auto;height:100%;}
}
.rel-canvas{position:relative;width:100%;max-width:26rem;margin:0 auto;aspect-ratio:var(--rel-aspect);}
.rel-canvas-wide{max-width:30rem;}
.rel-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.rel-line{fill:none;stroke:var(--diagram-color,var(--accent));stroke-width:3;stroke-linecap:round;opacity:.85;}
.rel-line-loop{stroke-dasharray:9 8;opacity:.55;}
.rel-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  width:min(8.8rem,92%);text-align:center;
}
.item-diagram .rel-node{width:min(6rem,92%);}
.item-diagram .rel-canvas-wide .rel-node{width:min(6.2rem,92%);}
.flow-node-badge{
  width:1.6rem;height:1.6rem;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--diagram-color,var(--accent));color:#fff;font-weight:700;font-size:15px;
}
.flow-node-label{
  font-size:18px;font-weight:600;line-height:1.4;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:.4rem .5rem;text-wrap:balance;
}
.item-diagram .flow-node-label{font-size:15px;}
/* Judgement/option-style nodes: emphasised (the branch actually chosen, or
   a hub subject) vs muted/dashed (a held-off branch, or a menu of equal-
   weight candidates) -- so the two outcomes read differently without
   relying on colour alone. */
.rel-node-use .flow-node-label{border-color:var(--diagram-color,var(--accent));border-width:2px;font-weight:700;}
.rel-node-hold .flow-node-label{border-style:dashed;opacity:.78;}
.flow-loop-note{
  margin:1rem 0 0;font-size:15px;opacity:.82;display:flex;align-items:baseline;gap:.5rem;
}
.flow-loop-mark{color:var(--diagram-color,var(--accent));font-size:1.05rem;flex:none;}
/* Wide zigzag canvas vs. straight vertical canvas: swapped by display,
   never by shrinking one SVG's viewBox to fit the other width -- and keyed
   to the diagram's own rendered width (a CSS container query), not the
   viewport. A wide viewport does not guarantee a wide diagram: the same
   flow diagram is also used as a narrow overview-page thumbnail and inside
   the capped-width (26rem/416px) area-item-diagram column, where the
   viewport-only breakpoint used to pick the zigzag layout even though the
   diagram itself had no room for it. */
.flow-diagram,.item-diagram{container-type:inline-size;}
.flow-canvas-mobile{display:block;}
.flow-canvas-desktop{display:none;}
@container (min-width:680px){
  .flow-diagram .flow-canvas-desktop{display:block;}
  .flow-diagram .flow-canvas-mobile{display:none;}
}
/* Compact item-level flow diagrams (fewer/shorter steps) need less width to
   read as a horizontal zigzag than the main area diagram does, and now that
   .area-item-diagram is no longer capped at 30rem it regularly has enough
   real container width (the body column, ~500-650px on PC) to use it -- so
   this is its own, lower threshold rather than staying vertical at any PC
   width as before. */
@container (min-width:520px){
  .item-diagram .flow-canvas-desktop{display:block;}
  .item-diagram .flow-canvas-mobile{display:none;}
}

/* Second canvas pair used by the narrowing/tripartite item diagrams: a
   side-by-side layout (-a) shown only once the diagram box itself is wide
   enough, otherwise the stacked layout (-b) below. Same container-width
   basis as the flow canvases above, for the same reason. */
.diagram-canvas-b{display:block;}
.diagram-canvas-a{display:none;}
@container (min-width:440px){
  .diagram-canvas-a{display:block;}
  .diagram-canvas-b{display:none;}
}

.bidir-diagram{
  background:var(--diagram-color-soft,var(--panel-alt));border-radius:6px;
  padding:clamp(1.3rem,3.5vw,2rem);text-align:left;
}
/* The two linked subjects (e.g. 本社/施設) get the bidirectional arrow
   between them; what carries that relationship (教育/業務フロー) is listed
   separately below under its own label, so subject and mechanism read as
   different things rather than three equal items under one arrow. */
.bidir-pair{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:0 0 1rem;}
.bidir-pair-node{
  display:inline-block;font-weight:700;font-size:1.1rem;
  border:2px solid var(--diagram-color,var(--accent));border-radius:4px;
  padding:.5rem 1.1rem;color:var(--diagram-color,var(--accent));
}
.bidir-pair-arrow{color:var(--diagram-color,var(--accent));font-size:1.3rem;flex:none;}
.bidir-mechanism-label{font-size:15px;opacity:.68;margin:0 0 .5rem;}
.bidir-items{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.6rem;}
.bidir-item{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:.7rem 1rem;font-size:.98rem;font-weight:600;
}
.bidir-diagram .flow-loop{margin-top:.2rem;}
/* Compact scale when the operations 本社⇄施設 diagram is repeated inside a
   support-item (not the main 支援の考え方 section): it now shares the
   support-item group's .area-item-diagram-stage box, so only the pair's own
   font/padding need a smaller scale here. */
.area-item-diagram-stage .bidir-pair{margin:0;}
.area-item-diagram-stage .bidir-pair-node{font-size:1rem;padding:.4rem .8rem;}

/* ===== left sidebar: 5-area nav + in-page anchors =====
   Now on the left (latest direction supersedes the earlier right-hand
   placement). The whole column sits on its own panel background so the
   sticky nav reads as a distinct followed strip, not plain text floating
   in the page margin; the current area additionally gets its own soft
   colour-tinted row plus bold text and the larger dot, so "you are here"
   is never colour alone. */
.area-sidebar{
  margin:clamp(2rem,6vw,3rem) 0 0;background:var(--panel-alt);
  border-radius:8px;padding:1.3rem 1.4rem;
}
.area-sidebar-group{margin:0 0 1.8rem;}
.area-sidebar-title{font-size:15px;letter-spacing:.06em;opacity:.6;margin:0 0 .7rem;}
.area-sidebar-list,.area-sidebar-anchors{list-style:none;margin:0;padding:0;}
.area-sidebar-list li,.area-sidebar-anchors li{border-top:1px solid var(--line);}
.area-sidebar-list li:first-child,.area-sidebar-anchors li:first-child{border-top:none;}
.area-sidebar-list a,.area-sidebar-list .current{
  display:flex;align-items:baseline;gap:.5rem;padding:.6rem .5rem;margin:0 -.5rem;
  text-decoration:none;color:inherit;font-size:16px;border-radius:5px;
}
.area-sidebar-list .current{
  font-weight:700;background:var(--area-color-soft,var(--panel-alt));
}
.area-sidebar-list a:hover,.area-sidebar-list a:focus-visible{color:var(--accent-2);}
.area-sidebar-list .num{color:var(--accent-2);font-size:15px;font-weight:700;}
.area-nav-dot{
  width:.55rem;height:.55rem;border-radius:50%;flex:none;
  background:var(--area-color,var(--accent-2));
}
.area-sidebar-list .current .area-nav-dot{width:.95rem;height:.95rem;}
.area-sidebar-anchors a{display:block;padding:.55rem .5rem;margin:0 -.5rem;border-radius:5px;text-decoration:underline;text-decoration-color:var(--line);color:inherit;font-size:15px;}
.area-sidebar-anchors a:hover,.area-sidebar-anchors a:focus-visible{color:var(--accent-2);}

@media (max-width:979px){
  .area-sidebar{order:-1;margin:0 0 clamp(2rem,5vw,2.8rem);}
  .area-sidebar-anchors-group{display:none;}
  .area-sidebar-list{
    display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.4rem;
    -webkit-overflow-scrolling:touch;
  }
  .area-sidebar-list li{border-top:none;flex:none;}
  .area-sidebar-list a,.area-sidebar-list .current{
    border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;white-space:nowrap;
  }
  .area-sidebar-list .current{border-color:var(--accent);}
}

/* ===== case section ===== */
.case-section{margin:0 0 clamp(2.6rem,6vw,4rem);}
.case-note{
  display:inline-block;font-size:15px;letter-spacing:.02em;color:var(--accent-2);
  border:1px solid var(--accent-2);border-radius:999px;padding:.2rem .7rem;margin:0 0 1.1rem;
}
.case-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;}
.case-list li{border-top:1px solid var(--line);padding:1rem 0 0;}
.case-list p{opacity:.85;}

/* ===== related (目的で併用する領域) / back =====
   The "next area" reading-order section was dropped (Codex judgement,
   recorded in CLAUDE_CHANGES.md): these pages are chosen by課題, not read
   front-to-back, and a fixed "next" duplicated both the sidebar's full
   5-area menu and this related block. Each related area is now its own
   horizontal block -- the area's own colour as a soft fill, its number,
   title and a short reason for combining it -- capped at the 2-3 areas
   actually listed per area, never all 5 repeated. */
.area-related{border-top:1px solid var(--line);padding-block:clamp(1.8rem,4vw,2.6rem);}
.area-related-group h2{font-size:15px;letter-spacing:.08em;opacity:.6;margin:0 0 1rem;}
.related-block-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;}
.related-block{background:var(--area-color-soft,var(--panel-alt));border-radius:6px;}
.related-block a{
  display:flex;align-items:flex-start;gap:1.1rem;text-decoration:none;color:inherit;
  padding:1.1rem 1.4rem;
}
.related-block-num{
  flex:none;font-weight:700;font-size:1.6rem;line-height:1.3;
  color:var(--area-color,var(--accent-2));
}
.related-block-body{display:flex;flex-direction:column;gap:.3rem;}
.related-block-body strong{font-size:1.1rem;}
.related-block-reason{opacity:.82;font-size:.98rem;}
.related-block a:hover .related-block-body strong,
.related-block a:focus-visible .related-block-body strong{color:var(--area-color,var(--accent-2));}
.back-to-index{margin-top:1.4rem;}
.back-to-index a{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  color:var(--accent);font-weight:700;
}

/* ===== lodging index ===== */
.lodging-intro{padding-block:clamp(1.6rem,5vw,2.4rem) clamp(2rem,5vw,3rem);}
.lodging-intro h1{max-width:23ch;font-size:clamp(3rem,5vw,4rem);margin:0 0 1.2rem;}
.lodging-intro h1 .h1-chunk{display:inline-block;white-space:nowrap;}
/* Narrow phones: each of the two br-separated lines is now a single nowrap
   chunk, which can exceed a ~320-375px viewport at this font-size; allow
   that one chunk to wrap again here so it never forces horizontal overflow. */
@media (max-width:480px){
  .lodging-intro h1 .h1-chunk{white-space:normal;}
}
.lodging-intro .lead{max-width:60ch;font-size:1.15rem;opacity:.85;margin:0 0 .6rem;}
/* The centre 状況・目的 + 5-node radial figure is given real width (up to
   ~1400px on wide PC), so the figure and the area-name labels around it
   read at a comfortable size -- the labels now carry the area names
   themselves, replacing the separate legend list this used to need. */
.intro-diagram{margin:clamp(2rem,5vw,3.2rem) 0 0;max-width:56rem;}
@media (min-width:960px){
  /* Heading + overview stay a normal full-width block above; the figure
     moves to its own full-width row below instead of sharing a cramped
     1fr/1.15fr column with the text, so the diagram can actually render at
     real size instead of being squeezed to ~500px. */
  .lodging-intro{display:block;}
  .lodging-intro-figure{margin:clamp(2.4rem,5vw,3.2rem) auto 0;max-width:87.5rem;text-align:center;}
  .intro-diagram{margin:0 auto;max-width:87.5rem;}
}
.intro-diagram svg{width:100%;height:auto;display:block;}
/* All 14 lines (5 outer pentagon + 5 centre spokes + 4 AI cross-lines) are
   plain .intro-diagram-line elements, drawn in sequence (see --draw-delay,
   set per-line in build-site.cjs): each line's own thin stroke draws over
   .2s, staggered .1s apart, so the 14th/last line finishes 1.5s after the
   figure becomes visible. The pentagon outline reads slightly fainter via
   its own .outline modifier; the 4 AI lines stay the bolder, wider stroke
   they already had. */
.intro-diagram-line{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.55;}
.intro-diagram-line.outline{stroke:var(--line);opacity:.5;}
.intro-diagram-line.ai{opacity:.8;}
.js-ready .intro-diagram-line{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .4s ease var(--draw-delay,0s);
}
.js-ready .intro-diagram.is-visible .intro-diagram-line{stroke-dashoffset:0;}
/* Exactly 4 flowing routes (replaces the old 3 closed-triangle overlays):
   each is a single open <path> traced only over existing edges -- the
   center/01-05 spokes, the pentagon outline and 01's 4 AI cross-lines, all
   drawn from the same 14 edge coordinates above, no new edge -- so the
   number of moving routes on screen is capped at 4 by construction (routes
   A-D, see build-site.cjs). Each path's pathLength attribute is that
   route's own real geometric length, not a shared "1", so the fixed
   90-unit dash below renders as the same real on-screen length on every
   route despite their different real lengths. --flow-gap/--flow-shift/
   --flow-duration (set per route in build-site.cjs) feed one shared
   keyframe: the dash pattern's total (dash+gap, = --flow-shift's own
   magnitude) is always larger than the route's own real length, so part of
   every lap falls entirely inside the gap -- a short pause where that one
   route shows nothing. --flow-duration is chosen per route so the real
   speed ((dash+gap)/duration) differs clearly between routes, instead of
   only their lap period differing (which would make a longer route look
   slower by coincidence) -- the fastest route stays at/under the thin
   lines' own fastest original flow speed (~158 units/sec). All four start
   together only once every one of the 14 thin lines above has finished
   drawing (14 lines x 0.2s stagger + 0.4s own draw = 3s). */
.intro-diagram-flow3{
  fill:none;stroke-width:6;stroke-linecap:round;opacity:0;pointer-events:none;
  stroke-dasharray:90 var(--flow-gap);
}
.intro-diagram-flow3-a{stroke:var(--accent-flash);}
.intro-diagram-flow3-b{stroke:var(--accent-flash-2);}
.intro-diagram-flow3-c{stroke:var(--accent-2);}
.intro-diagram-flow3-d{stroke:#7a4fb0;}
.js-ready .intro-diagram.is-visible .intro-diagram-flow3{
  animation:intro-diagram-flow3 var(--flow-duration) linear 3s infinite;
}
@keyframes intro-diagram-flow3{
  0%{stroke-dashoffset:0;opacity:.85;}
  100%{stroke-dashoffset:var(--flow-shift);opacity:.85;}
}
@media (prefers-reduced-motion:reduce){
  .js-ready .intro-diagram-line{transition:none;stroke-dashoffset:0;}
  .js-ready .intro-diagram.is-visible .intro-diagram-flow3{animation:none;opacity:0;}
}
html.js-ready.motion-paused .intro-diagram-line{transition:none;stroke-dashoffset:0;}
html.js-ready.motion-paused .intro-diagram.is-visible .intro-diagram-flow3,
.js-ready .intro-diagram.is-visible.is-offscreen .intro-diagram-flow3,
html.js-ready.is-tab-hidden .intro-diagram.is-visible .intro-diagram-flow3{animation-play-state:paused;}
.intro-diagram-node{fill:var(--accent);}
.intro-diagram-node.center{fill:#e57a2d;}
.intro-diagram-num{font-size:46px;fill:#fff;font-weight:700;text-anchor:middle;}
.intro-diagram-center-label{font-size:40px;fill:#fff;font-weight:700;text-anchor:middle;}
/* Replaces the old baseline-positioned "・" text glyph: a plain circle
   drawn at the exact centre coordinate, so the dot sits at the true
   geometric centre regardless of font baseline metrics. */
.intro-diagram-center-dot{fill:#fff;}
.intro-diagram-area-label{font-size:32px;fill:var(--ink);font-weight:700;}
.intro-diagram-bar{opacity:.9;}

.svc-section{padding-block:clamp(1rem,4vw,2rem) clamp(3rem,7vw,5rem);}
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.4rem,5vw,3.6rem);}
/* Every row: a fixed-ratio photo on the left, number/title/description/
   points/link on the right -- same layout and column proportions for all
   five areas, instead of the old 3-column text strip with a full-width
   image band below it. */
.svc-row{position:relative;border-top:1px solid var(--line);padding-top:clamp(1.8rem,4vw,2.6rem);}
.svc-list li:first-child.svc-row{border-top:none;padding-top:0;}
/* Whole row (including its own padding/gap, not just the photo/text) is the
   hover/focus target: a pseudo-element sits a little outside the row's own
   box (so it reads as a soft card, not a hard-edged rectangle hugging the
   text) and only changes background-color, in step with the existing photo
   scale(1.045) below. z-index:-1 relies on .svc-row's own position:relative
   to keep it behind the row's real content instead of covering it. */
.svc-row::before{
  content:"";position:absolute;inset:-1rem -1.2rem;z-index:-1;border-radius:10px;
  background-color:transparent;transition:background-color .4s ease;pointer-events:none;
}
.svc-row:hover::before,.svc-row:focus-within::before{background-color:#f3f5f7;}
html.motion-paused .svc-row::before{transition:none;}
@media (prefers-reduced-motion:reduce){.svc-row::before{transition:none;}}
.svc-row-link{display:grid;grid-template-columns:1fr;gap:1.4rem;text-decoration:none;color:inherit;cursor:default;}
@media (min-width:860px){
  .svc-row-link{grid-template-columns:46% minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:center;}
}
.svc-row-media{
  position:relative;overflow:hidden;background:var(--area-color-soft,var(--panel-alt));
  aspect-ratio:4/3;border-radius:4px;transition:background-color .35s ease;
}
.svc-row-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
/* 2/4/5番目(企画/システム/運営)のみ、写真テーマに合う範囲を切り出すための
   最小限のobject-position指定。他の行・レイアウトには影響しない。 */
.svc-list li:nth-child(2) .svc-row-media img{object-position:center 65%;}
.svc-list li:nth-child(4) .svc-row-media img{object-position:center 40%;}
.svc-list li:nth-child(5) .svc-row-media img{object-position:center 35%;}
.svc-row-link:hover .svc-row-media img,.svc-row-link:focus-visible .svc-row-media img{transform:scale(1.045);}
html.motion-paused .svc-row-media,html.motion-paused .svc-row-media img{transition:none;}
@media (prefers-reduced-motion:reduce){.svc-row-media,.svc-row-media img{transition:none;}}
.svc-row-body{display:flex;flex-direction:column;gap:.7rem;}
.svc-row-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;}
.svc-row-num{display:inline-flex;align-items:baseline;color:var(--area-color,var(--accent-2));font-weight:700;letter-spacing:.02em;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;}
.svc-row-num-total{font-size:.4em;font-weight:600;opacity:.45;margin-left:.1em;}
.svc-row-num-sep{color:var(--line);font-weight:400;}
.svc-row-title{margin:0;font-size:clamp(1.5rem,1.8vw,1.9rem);line-height:1.4;transition:color .25s ease;}
html.motion-paused .svc-row-title{transition:none;}
@media (prefers-reduced-motion:reduce){.svc-row-title{transition:none;}}
.svc-row-link:hover .svc-row-title,.svc-row-link:focus-visible .svc-row-title{color:var(--area-color,var(--accent-2));}
.svc-row-desc{margin:0;opacity:.85;max-width:56ch;font-size:1.08rem;}
.svc-row-points{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;}
.svc-row-points li{position:relative;padding-left:1.2rem;font-size:.98rem;opacity:.86;}
.svc-row-points li::before{
  content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--area-color,var(--accent-2));
}
.svc-row-cta{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--accent);margin-top:.3rem;}
.svc-row-link:hover .svc-row-arrow,.svc-row-link:focus-visible .svc-row-arrow{transform:translateX(6px);}
.svc-row-arrow{display:inline-block;transition:transform .3s ease;}
html.motion-paused .svc-row-arrow{transition:none;}
@media (prefers-reduced-motion:reduce){.svc-row-arrow{transition:none;}}

/* ===== vendor =====
   Section backgrounds alternate white / pale blue-grey / navy down the
   page (never cream), so the run of sections reads with some rhythm
   instead of one flat white column; navy sections flip to light text. */
.vendor-hero{padding-block:clamp(1.4rem,4vw,2rem) clamp(1.6rem,4vw,2.4rem);}
.vendor-hero h1{font-size:clamp(3rem,5vw,4rem);margin:0 0 1.2rem;}
.vendor-hero .lead{max-width:62ch;font-size:1.15rem;opacity:.85;}
.vendor-section{padding-block:clamp(2.2rem,5vw,3.6rem);border-top:1px solid var(--line);}
.vendor-section h2{margin:0 0 1.2rem;}
.vendor-section--pale{background:var(--panel-alt);border-top-color:transparent;}
.vendor-section--navy{background:var(--accent);color:#fff;border-top-color:transparent;}
.vendor-section--navy .section-title::before{background:linear-gradient(90deg,#fff,var(--accent-2));}
.vendor-issues ul{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;}
.vendor-issues li{opacity:.85;}
.vendor-activities ul{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;grid-template-columns:1fr;}
@media (min-width:720px){.vendor-activities ul{grid-template-columns:1fr 1fr;gap:1.8rem 2.4rem;}}
.vendor-activities h3{font-size:1.1rem;margin:0 0 .5rem;}
.vendor-activities p{opacity:.82;}
.vendor-diagram{max-width:72rem;margin:0 auto;background:#fff;border-radius:8px;padding:1rem;}
.vendor-diagram img{width:100%;height:auto;display:block;}
.vendor-diagram-alt{margin:1rem auto 0;max-width:60ch;font-size:.95rem;opacity:.78;text-align:center;}
.vendor-section--navy .vendor-diagram-alt{opacity:.72;}
.vendor-flow{max-width:72rem;margin:0 auto;background:#fff;border-radius:8px;padding:1rem;}
.vendor-flow img{width:100%;height:auto;display:block;}
.vendor-example-note{
  display:inline-block;font-size:15px;color:var(--accent-2);
  border:1px solid var(--accent-2);border-radius:999px;padding:.2rem .8rem;margin:0 0 1.3rem;
}
.vendor-example-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:none;}
.vendor-example-list li{
  display:flex;gap:1.1rem;align-items:flex-start;
  background:var(--panel-alt);border-radius:6px;padding:1rem 1.3rem;
}
.vendor-example-num{flex:none;font-weight:700;font-size:1.3rem;color:var(--accent-2);}
.vendor-example-label{font-weight:700;margin:0 0 .3rem;}
.vendor-example-body{margin:0;opacity:.82;}
.vendor-link{margin-top:.4rem;}
.vendor-link a{color:var(--accent);font-weight:700;text-decoration:underline;text-decoration-color:var(--line);}

/* ===== privacy draft ===== */
.privacy-hero{padding-block:1.4rem clamp(3rem,7vw,5rem);}
.privacy-hero h1{font-size:clamp(3rem,5vw,4rem);margin:0 0 1.2rem;}
.privacy-draft-note{
  display:inline-block;background:var(--panel-alt);border:1px solid var(--line);
  padding:.9rem 1.2rem;font-size:15px;margin:0 0 2rem;max-width:56ch;
}
.privacy-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;}
.privacy-list li{border-top:1px solid var(--line);padding:1rem 0 0;}
.privacy-list h2{font-size:1rem;margin:0 0 .4rem;}
.privacy-list p{opacity:.8;font-size:.9rem;}

/* MOTION_CONTROLS_HIDDEN_20261107_START */
.motion-toggle,
.motion-row,
.int-reel-controls{display:none!important;}
/* MOTION_CONTROLS_HIDDEN_20261107_END */