/* =========================================================
   Tactna website — design tokens
   ========================================================= */
:root {
  /* palette */
  --ivory: #fafaf9;
  --ink: #0f0e0d;
  --ink-2: #1f1d1a;
  --ink-3: #33312c;
  --gray-700: #524f49;
  --gray-500: #8f8b85;
  --gray-450: #706d66;
  --gray-300: #cccac6;
  --gray-200: #e5e5e3;
  --white: #ffffff;

  /* theme (light default) */
  --bg: var(--ivory);
  --fg: var(--ink);
  --fg-secondary: var(--ink-3);
  --fg-muted: var(--gray-450);
  --border: var(--gray-200);
  --border-strong: var(--ink);
  --border-soft: var(--gray-200);

  /* type */
  --font-sans: "Inter", "Noto Sans JP", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-jp-heading: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", sans-serif;
  /* Latin & numerals in Inter, Japanese in Zen Kaku Gothic New (Inter has no CJK glyphs, so it falls through) */
  --font-heading: "Inter", var(--font-jp-heading);
  --font-serif: var(--font-heading); /* legacy alias */
  --heading-weight: 500;
  --heading-lh: 1.14;
  --heading-ls: -0.02em;

  /* spacing */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 32px;
  --sp-lg: 64px;
  --sp-xl: 128px;
  --sp-2xl: 160px;

  --page-max: 1728px;
  --gutter: 28px;
  --grid-gap: 14px;
  --radius-image: 8px;

  --banner-height: 0px;
  --nav-height: 72px;
  --header-height: calc(var(--banner-height) + var(--nav-height));

  --ease-soft: cubic-bezier(0, 0.7, 0.3, 1);
  --ease-out-soft-in: cubic-bezier(0.3, 0.3, 0.3, 1);
  --t-colors: color 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
@media (min-width: 768px) { :root { --gutter: 32px; --grid-gap: 16px; } }
@media (min-width: 1024px) { :root { --gutter: 36px; } }
@media (min-width: 1440px) { :root { --gutter: 40px; } }

.theme-dark {
  --bg: var(--ink);
  --fg: var(--ivory);
  --fg-secondary: var(--gray-300);
  --fg-muted: var(--gray-500);
  --border: var(--ink-3);
  --border-strong: var(--ivory);
  --border-soft: var(--ink-3);
}
.theme-light {
  --bg: var(--ivory);
  --fg: var(--ink);
  --fg-secondary: var(--ink-3);
  --fg-muted: var(--gray-450);
  --border: var(--gray-200);
  --border-strong: var(--ink);
  --border-soft: var(--gray-200);
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

.page { padding-top: 0; }

/* =========================================================
   Typography scale (mirrors reference scale)
   ========================================================= */
.heading-1 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(44px, 4.2vw + 18px, 72px); line-height: var(--heading-lh); letter-spacing: var(--heading-ls); }
@media (max-width: 767px) { .heading-1 { font-size: clamp(32px, 9.2vw, 44px); } }
.heading-2 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(36px, 2.5vw + 16px, 48px); line-height: var(--heading-lh); letter-spacing: var(--heading-ls); }
.heading-3 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(26px, 1.4vw + 16px, 32px); line-height: 1.35; letter-spacing: -0.01em; }
.heading-4 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(26px, 1.2vw + 16px, 32px); line-height: 1.1; letter-spacing: -0.01em; }
.body-0 { font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; }
.body-1 { font-size: 20px; line-height: 1.3; }
.body-2 { font-size: 16px; line-height: 1.3; }
.body-3 { font-size: 14px; line-height: 1.3; }
@media (max-width: 767px) {
  .body-0 { font-size: 20px; }
  .body-1 { font-size: 18px; }
}
.text-secondary { color: var(--fg-secondary); }
.text-muted { color: var(--fg-muted); }

/* =========================================================
   Layout grid
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.content--block { display: block; }
@media (min-width: 768px) {
  .content { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
  .container > * { grid-column: 2 / 12; }
  .content { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

.section { background: var(--bg); color: var(--fg); }
.section--xl { padding: var(--sp-xl) 0; }
@media (max-width: 767px) { .section--xl { padding: 80px 0; } }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 4px;
  line-height: 1;
  font-weight: 500;
  transition: var(--t-colors);
}
.btn--sm { height: 32px; padding: 0 12px; font-size: 14px; }
.btn--lg { height: 48px; padding: 0 20px; font-size: 16px; }
.btn--primary { background: var(--ink); color: var(--ivory); }
.btn--primary:hover { background: var(--ink-3); }
.btn--light { background: var(--ivory); color: var(--ink); }
.btn--light:hover { background: var(--gray-300); }
.btn--outline { border: 1px solid currentColor; color: var(--fg); font-weight: 400; }
.btn--outline:hover { background: var(--fg); color: var(--bg); }
.btn .chev { transition: transform 0.3s var(--ease-soft); }

/* arrow link affordance (slides in on hover) */
.arrow {
  display: inline-block;
  margin-left: -1px;
  opacity: 0;
  transition: margin 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover .arrow, .panel-link:hover .arrow, .footer-link:hover .arrow { margin-left: 6px; opacity: 1; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: var(--ink);
}
.site-header__blur {
  position: absolute; inset: 0;
  background: rgba(250, 250, 249, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color 0.3s var(--ease-out-soft-in);
}
.site-header.is-dark { color: var(--ivory); }
.site-header.is-dark .site-header__blur { background: rgba(15, 14, 13, 0.72); }
.site-header.is-menu-open .site-header__blur { background: var(--ivory); }
/* pages that open on a full-bleed first view (company page vision): no header background until the page is scrolled */
.site-header.is-top:not(.is-panel-open):not(.is-menu-open) .site-header__blur { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* nav bar */
.site-nav { position: relative; }
.site-nav__inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  height: var(--nav-height);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.site-logo { display: flex; align-items: center; }
.site-logo__img { height: 28px; width: auto; display: block; }
.site-logo__img--white { display: none; filter: invert(1) hue-rotate(180deg); }
.site-header.is-dark:not(.is-menu-open) .site-logo__img--color { display: none; }
.site-header.is-dark:not(.is-menu-open) .site-logo__img--white { display: block; }
.site-footer__logo { filter: invert(1) hue-rotate(180deg); }
.site-nav__menu {
  display: none;
  position: absolute; left: 50%; top: 0; height: 100%;
  transform: translateX(-50%);
  align-items: center;
}
@media (min-width: 1024px) { .site-nav__menu { display: flex; } }
.nav-item { height: 100%; display: flex; align-items: center; }
.nav-item__button, .nav-item__link {
  display: flex; align-items: center; gap: 4px;
  height: 100%;
  padding: 0 12px;
  font-size: 14px; font-weight: 500;
  transition: opacity 0.3s var(--ease-soft);
}
.nav-item__button .chev { transition: transform 0.3s var(--ease-soft); }
.nav-item.is-open .nav-item__button .chev { transform: rotate(180deg); }
.site-header.is-panel-open .nav-item:not(.is-open) .nav-item__button,
.site-header.is-panel-open .nav-item__link { opacity: 0.55; }
.site-nav__actions { display: flex; align-items: center; gap: 8px; }
.site-header.is-dark .btn--primary { background: var(--ivory); color: var(--ink); }
.site-header.is-dark .btn--primary:hover { background: var(--gray-300); }

.site-nav__burger {
  width: 40px; height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  margin-right: -8px;
}
.site-nav__burger span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease-soft); }
.site-nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.site-nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 1024px) { .site-nav__burger { display: none; } }

/* invisible catcher behind the dropdown: a click or a hover outside closes the menu (the page is not dimmed) */
.nav-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.site-header.is-panel-open .nav-backdrop { pointer-events: auto; }
.site-header { isolation: isolate; }
/* dropdown panel: a compact card under the hovered nav item (left edge set by js/main.js), not a full-width sheet */
.nav-panel {
  position: fixed;
  left: var(--panel-left, 16px);
  top: calc(var(--header-height) - 6px);
  width: max-content;
  max-width: calc(100vw - 32px);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 14, 13, 0.14), 0 2px 8px rgba(15, 14, 13, 0.06);
  max-height: calc(100vh - var(--header-height) - 16px);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), visibility 0s linear 0.2s, top 0.3s var(--ease-out-soft-in);
}
.nav-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), visibility 0s, top 0.3s var(--ease-out-soft-in); }
.nav-panel__inner { padding: 10px; }
/* at >=1440px .container becomes a 12-col grid with content in columns 2-11;
   give the nav bar the same inset so logo / CTA sit on the content edge (the header background stays full-width) */
@media (min-width: 1440px) {
  .site-nav__inner {
    --content-col: calc((min(100%, var(--page-max)) - 2 * var(--gutter) - 11 * var(--grid-gap)) / 12);
    padding-left: calc(var(--gutter) + var(--content-col) + var(--grid-gap));
    padding-right: calc(var(--gutter) + var(--content-col) + var(--grid-gap));
  }
}
.nav-panel__group { display: none; grid-auto-flow: column; grid-auto-columns: 300px; gap: 4px; }
.nav-panel__group.is-active { display: grid; }
.nav-panel__col { display: flex; flex-direction: column; gap: 2px; }
.panel-link { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 9px; transition: background-color 0.15s var(--ease-soft); }
.panel-link:hover, .panel-link:focus-visible { background: #f3f2f0; }
.panel-link__title { font-size: 15px; font-weight: 500; line-height: 1.35; }
.panel-link__desc { font-size: 13px; line-height: 1.5; color: var(--gray-450); }
.panel-link:hover .panel-link__desc { color: var(--ink); }
.panel-link .panel-link__desc, .panel-link .arrow { transition: var(--t-colors), margin 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s cubic-bezier(0.4,0,0.2,1); }

/* mobile menu */
.mobile-menu {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: var(--header-height);
  background: var(--ivory); color: var(--ink);
  overflow: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft), visibility 0s linear 0.25s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft), visibility 0s; }
.mobile-menu__inner { padding: 8px var(--gutter) 40px; }
.mobile-menu__group summary, .mobile-menu__link { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 20px; font-weight: 500; font-family: var(--font-heading); border-bottom: 1px solid var(--gray-200); cursor: pointer; list-style: none; }
.mobile-menu__group summary::-webkit-details-marker { display: none; }
.mobile-menu__group summary::after { content: "+"; font-weight: 400; color: var(--gray-450); }
.mobile-menu__group[open] summary::after { content: "−"; }
.mobile-menu__group a { display: block; padding: 10px 0 10px 16px; font-size: 16px; color: var(--ink-3); }
.mobile-menu__group[open] { padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
.mobile-menu__group[open] summary { border-bottom: 0; }
.mobile-menu__actions { display: flex; flex-direction: column; gap: 12px; padding-top: 32px; }
.mobile-menu__actions .btn { width: 100%; }
body.is-locked { overflow: hidden; }

/* =========================================================
   Hero
   ========================================================= */
.hero { padding-top: calc(var(--header-height) + var(--sp-lg)); transition: padding 0.3s var(--ease-out-soft-in); }
.breadcrumb { grid-column: 1 / -1; margin-bottom: var(--sp-md); }
.breadcrumb ol { display: flex; }
.breadcrumb li { font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--gray-450); }
.hero__title { grid-column: 1 / -1; }
.nb { display: inline-block; white-space: nowrap; }
.hero__aside {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
}
.hero__aside p { max-width: 560px; text-wrap: pretty; }

@media (min-width: 768px) {
  .hero__title { grid-column: span 3; }
  .hero__aside { grid-column: 4 / span 3; margin-top: 0; margin-bottom: var(--sp-xs); }
}
/* the top-page headline is two lines, the second one long and unbroken (速く、安全に、手放しで。 / fast, safe, and hands-off.):
   the headline gets the wider share of the row, and below 1440px its size follows the viewport so the line always fits */
@media (min-width: 768px) { .hero__l2 { white-space: nowrap; } }
.hero__title .k { display: inline-block; margin-right: var(--k, 0); }
.kn .kc { margin-right: calc(var(--k, 0em) - var(--heading-ls, 0em)); }   /* optical kerning of the page headlines (tools/kern.py); the margin replaces the heading's letter-spacing for those glyphs */   /* hand kerning of the top headline: even ink gaps between the glyphs (values in index.html) */   /* phones: the second line may break between 安全に、 and 手放しで。 */
@media (min-width: 768px) and (max-width: 1199px) { .hero__title { grid-column: 1 / -1; } .hero__aside { grid-column: 1 / -1; margin-top: var(--sp-md); } }
@media (min-width: 1200px) and (max-width: 1439px) { .hero__title { grid-column: span 4; } html[lang="en"] .hero__title { font-size: min(72px, calc(5.4vw - 6px)); } .hero__aside { grid-column: 5 / span 2; } }
@media (min-width: 1440px) {
  .hero__title { grid-column: span 6; font-size: min(72px, calc(4.3vw + 2px)); }
  html[lang="en"] .hero__title { font-size: min(64px, calc(3.75vw + 3px)); }   /* the content stops growing at 1728px: the English line is capped so it keeps clear of the lead */
  .hero__aside { grid-column: 7 / span 4; }
}
.hero__mock-wrap { margin-top: var(--sp-lg); }
@media (max-width: 767px) { .hero { padding-top: calc(var(--header-height) + 40px); } .hero__mock-wrap { margin-top: 40px; } }

/* ---------- animated product mock (Tactna admin panel) ---------- */
.mock-frame, .tm {
  --tm-side: #20242f;
  --tm-side-2: #2a2f3d;
  --tm-primary: #5036bb;
  --tm-bg: #f4f6fa;
  --tm-bg-2: #ebeff6;
  --tm-border: #e0e7f4;
  --tm-sep: #dee3f2;
  --tm-text: #333333;
  --tm-muted: #767c8c;
  --tm-link: #435c87;
  --tm-ok: #4caf50;
  --tm-warn: #ed6c02;
}
.mock-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: #141312;
  container-type: inline-size;
  --tm-side: #20242f;
  --tm-side-2: #2a2f3d;
  --tm-primary: #5036bb;
  --tm-bg: #f4f6fa;
  --tm-bg-2: #ebeff6;
  --tm-border: #e0e7f4;
  --tm-sep: #dee3f2;
  --tm-text: #333333;
  --tm-muted: #767c8c;
  --tm-link: #435c87;
  --tm-ok: #4caf50;
  --tm-warn: #ed6c02;
}
.mock-frame__bg { position: absolute; inset: 0; background: #0b0b1a; overflow: hidden; }
.mock-frame__bg canvas, .security__bg canvas {
  position: absolute; left: -6%; top: -6%; width: 112%; height: 112%;
  filter: blur(28px);
  image-rendering: auto;
}
.tm {
  position: absolute; left: 5%; right: 5%; top: 7%; bottom: -3%;
  display: flex; flex-direction: column;
  background: var(--tm-bg);
  color: var(--tm-text);
  border-radius: 0.9em 0.9em 0 0;
  box-shadow: 0 -10px 60px rgba(0,0,0,0.45);
  overflow: hidden;
  font-size: clamp(7px, 1.05cqw, 13px);
  line-height: 1.4;
}
.tm__chrome { display: flex; align-items: center; gap: 1em; padding: 0.7em 1em; background: #fff; border-bottom: 1px solid var(--tm-border); }
.tm__dots { display: flex; gap: 0.4em; }
.tm__dots i { width: 0.75em; height: 0.75em; border-radius: 50%; background: #e0e0e0; }
.tm__url { flex: 1; padding: 0.35em 0.9em; border-radius: 0.5em; background: var(--tm-bg); color: var(--tm-muted); font-size: 0.85em; }
.tm__body { flex: 1; display: flex; min-height: 0; }
.tm__side { width: 17%; min-width: 120px; background: var(--tm-side); color: #c8ccd8; padding: 1.4em 1em; display: flex; flex-direction: column; gap: 0.5em; }
.tm__logo img { height: 1.6em; width: auto; filter: invert(1) hue-rotate(180deg); margin-bottom: 1.2em; }
.tm__nav-label { font-size: 0.72em; color: #8a90a2; margin: 0.6em 0 0.2em; }
.tm__nav li { padding: 0.55em 0.8em; border-radius: 0.4em; font-size: 0.92em; white-space: nowrap; }
.tm__nav li.is-active { background: var(--tm-primary); color: #fff; font-weight: 500; }
.tm__main { position: relative; flex: 1; min-width: 0; transition: opacity 0.4s var(--ease-soft); }
.tm__view { position: absolute; inset: 0; padding: 1.6em 2em; display: flex; flex-direction: column; gap: 1em; transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft); }
.tm__view--team { opacity: 0; transform: translateX(16px); pointer-events: none; }
.tm__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.tm__head h4 { display: flex; align-items: center; gap: 0.6em; font-size: 1.5em; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.tm__btn { display: inline-flex; align-items: center; height: 2.4em; padding: 0 1.1em; border-radius: 0.35em; background: var(--tm-primary); color: #fff; font-size: 0.92em; font-weight: 500; white-space: nowrap; transition: transform 0.15s, filter 0.15s; }
.tm__btn.is-pressed { transform: scale(0.96); filter: brightness(0.85); }
.tm__link { color: var(--tm-link); font-size: 0.92em; }
.tm__toolbar { display: flex; align-items: center; gap: 0.8em; }
.tm__search { position: relative; flex: 0 1 44%; display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.2em; border-bottom: 1px solid #b6beda; color: var(--tm-muted); }
.tm__search svg { width: 1.2em; height: 1.2em; flex: none; }
.tm__typed { color: var(--tm-text); white-space: pre; }
.tm__ph { color: #9aa1b4; }
.tm__caret { display: inline-block; width: 1px; height: 1.2em; background: var(--tm-text); opacity: 0; animation: caret 1s steps(2) infinite; }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tm__filter { padding: 0.45em 0.8em; border-radius: 0.35em; background: var(--tm-bg-2); color: var(--tm-text); font-size: 0.85em; white-space: nowrap; }
.tm__table { display: flex; flex-direction: column; gap: 0.35em; }
.tm__tr { display: grid; align-items: center; gap: 1em; padding: 0.75em 1em; background: #fff; border: 1px solid var(--tm-border); border-radius: 0.4em; font-size: 0.92em; max-height: 4em; overflow: hidden; transition: opacity 0.3s var(--ease-soft), max-height 0.35s var(--ease-soft), padding 0.35s var(--ease-soft), border-color 0.35s, margin 0.35s, background-color 0.3s; }
.tm__tr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.6em; }
.tm__tr--head { background: transparent; border-color: transparent; color: var(--tm-muted); font-size: 0.8em; padding-top: 0.2em; padding-bottom: 0.2em; }
.tm__table--teams .tm__tr { grid-template-columns: 2.2fr 0.7fr 1fr 1fr; }
.tm__table--members .tm__tr { grid-template-columns: 1.6fr 0.8fr 1.6fr 0.9fr 1.1fr; }
.tm__ico { width: 1.6em; height: 1.6em; border-radius: 0.3em; background: var(--tm-bg-2); border: 1px solid var(--tm-border); flex: none; position: relative; }
.tm__ico::after { content: ""; position: absolute; left: 30%; right: 30%; top: 28%; bottom: 28%; border: 1px solid #9aa1b4; border-radius: 1px; }
.tm__ico--lg { width: 1.3em; height: 1.3em; }
.tm__av { width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--tm-bg-2); color: var(--tm-link); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85em; font-weight: 600; flex: none; }
.tm__av--p { background: var(--tm-primary); color: #fff; }
.tm__chip { display: inline-flex; align-items: center; padding: 0.2em 0.65em; border-radius: 99px; font-size: 0.8em; font-weight: 500; white-space: nowrap; }
.tm__chip--ok { background: #e8f5e9; color: #2e7d32; }
.tm__chip--warn { background: #fff3e5; color: #c25700; }
.tm__chip--info { background: #ece9f8; color: var(--tm-primary); }
.tm__chip--flip { position: relative; padding: 0; background: none; }
.tm__chip--flip em { font-style: normal; display: inline-flex; align-items: center; padding: 0.2em 0.65em; border-radius: 99px; transition: opacity 0.3s; }
.tm__chip--flip em:last-child { position: absolute; left: 0; top: 0; opacity: 0; }
.tm__crumb { font-size: 0.85em; color: var(--tm-muted); }
.tm__crumb em { font-style: normal; margin: 0 0.4em; }
.tm__meta { display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; font-size: 0.88em; color: var(--tm-muted); align-items: center; }
.tm__tabs { display: flex; gap: 1.6em; border-bottom: 1px solid var(--tm-sep); font-size: 0.92em; }
.tm__tabs span { padding: 0.5em 0.1em; color: var(--tm-muted); border-bottom: 2px solid transparent; }
.tm__tabs span.is-active { color: var(--tm-primary); border-color: var(--tm-primary); font-weight: 500; }
.tm__tr--new { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; margin-top: -0.35em; background: #f6f3ff; }
.tm__tr--stale { transition: background-color 0.4s; }
/* modal */
.tm__modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(32, 36, 47, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-soft); }
.tm__modal-card { width: 60%; max-width: 520px; background: #fff; border-radius: 0.7em; padding: 1.4em 1.6em; box-shadow: 0 20px 60px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 0.9em; transform: translateY(10px) scale(0.98); transition: transform 0.3s var(--ease-soft); }
.tm__modal-head { display: flex; justify-content: space-between; font-size: 1.15em; font-weight: 600; }
.tm__modal-head span { color: var(--tm-muted); font-weight: 400; }
.tm__field { position: relative; display: flex; flex-direction: column; gap: 0.3em; flex: 1; min-width: 0; }
.tm__field label { font-size: 0.78em; color: var(--tm-muted); }
.tm__field > span { display: flex; align-items: center; gap: 0.4em; min-height: 2.4em; padding: 0.4em 0.8em; border: 1px solid #b6beda; border-radius: 0.35em; font-size: 0.92em; white-space: nowrap; overflow: hidden; }
.tm__field .tm__caret--2 { position: absolute; left: calc(0.8em + var(--w, 0px)); bottom: 0.7em; }
.tm__val2 { opacity: 0; transition: opacity 0.3s; }
.tm__field-row { display: flex; gap: 0.8em; }
.tm__apps { gap: 0.4em !important; }
.tm__apps i { font-style: normal; padding: 0.15em 0.6em; border-radius: 99px; background: #ece9f8; color: var(--tm-primary); font-size: 0.85em; opacity: 0; transition: opacity 0.3s; }
.tm__apps i.off { background: var(--tm-bg-2); color: var(--tm-muted); }
.tm__note { font-size: 0.8em; color: var(--tm-link); background: #eef3fb; border-radius: 0.35em; padding: 0.6em 0.8em; }
.tm__modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 1.2em; }
/* toasts */
.tm__toast { position: absolute; right: 1.6em; bottom: 1.6em; display: flex; align-items: center; gap: 0.6em; padding: 0.7em 1em; background: #20242f; color: #fff; border-radius: 0.45em; font-size: 0.85em; box-shadow: 0 10px 30px rgba(0,0,0,0.25); opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.tm__dot { width: 0.6em; height: 0.6em; border-radius: 50%; flex: none; }
.tm__dot--ok { background: var(--tm-ok); }
.tm__dot--warn { background: var(--tm-warn); }
/* cursor */
.mock-cursor { position: absolute; left: 30%; top: 30%; opacity: 0; transition: transform 0.7s var(--ease-soft), opacity 0.3s; pointer-events: none; z-index: 5; }
.mock-cursor svg { width: clamp(12px, 1.5cqw, 20px); height: auto; }

/* ---- timeline (data-step) ---- */
[data-step="1"] .mock-cursor, [data-step="2"] .mock-cursor, [data-step="3"] .mock-cursor, [data-step="5"] .mock-cursor, [data-step="6"] .mock-cursor, [data-step="7"] .mock-cursor { opacity: 1; }
[data-step="1"] .mock-cursor, [data-step="2"] .mock-cursor { transform: translate(12cqw, 6cqh); }
[data-step="3"] .mock-cursor { transform: translate(14cqw, 20cqh); }
[data-step="5"] .mock-cursor, [data-step="6"] .mock-cursor { transform: translate(56cqw, 5cqh); }
[data-step="7"] .mock-cursor { transform: translate(38cqw, 40cqh); }
[data-step="1"] .tm__search, [data-step="2"] .tm__search, [data-step="3"] .tm__search { border-bottom-color: var(--tm-primary); }
[data-step="2"] .tm__caret, [data-step="3"] .tm__caret { opacity: 1; }
[data-step="2"] .tm__ph, [data-step="3"] .tm__ph { display: none; }
[data-step="2"] .tm__table--teams .tm__tr:not(.tm__tr--head):not([data-match]),
[data-step="3"] .tm__table--teams .tm__tr:not(.tm__tr--head):not([data-match]) { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; margin-top: -0.35em; }
[data-step="3"] .tm__table--teams .tm__tr[data-match] { background: #f6f3ff; border-color: var(--tm-primary); }
[data-step="4"] .tm__view--teams, [data-step="5"] .tm__view--teams, [data-step="6"] .tm__view--teams, [data-step="7"] .tm__view--teams, [data-step="8"] .tm__view--teams, [data-step="9"] .tm__view--teams, [data-step="10"] .tm__view--teams { opacity: 0; transform: translateX(-16px); }
[data-step="4"] .tm__view--team, [data-step="5"] .tm__view--team, [data-step="6"] .tm__view--team, [data-step="7"] .tm__view--team, [data-step="8"] .tm__view--team, [data-step="9"] .tm__view--team, [data-step="10"] .tm__view--team { opacity: 1; transform: none; }
[data-step="5"] .tm__btn--add { filter: brightness(1.1); }
[data-step="6"] .tm__modal, [data-step="7"] .tm__modal { opacity: 1; }
[data-step="6"] .tm__modal-card, [data-step="7"] .tm__modal-card { transform: none; }
[data-step="6"] .tm__caret--2 { opacity: 1; }
[data-step="7"] .tm__val2, [data-step="7"] .tm__apps i, [data-step="8"] .tm__val2, [data-step="8"] .tm__apps i { opacity: 1; }
[data-step="6"].is-filled .tm__val2, [data-step="6"].is-filled .tm__apps i { opacity: 1; }
[data-step="8"] .tm__tr--new, [data-step="9"] .tm__tr--new, [data-step="10"] .tm__tr--new { max-height: 4em; opacity: 1; padding-top: 0.75em; padding-bottom: 0.75em; border-color: var(--tm-primary); margin-top: 0; }
[data-step="8"] .tm__toast--add { opacity: 1; transform: none; }
[data-step="9"] .tm__toast--lock { opacity: 1; transform: none; }
[data-step="9"] .tm__tr--stale, [data-step="10"] .tm__tr--stale { background: #fff8f0; border-color: #f5c58a; }
[data-step="9"] .tm__chip--flip em:first-child, [data-step="10"] .tm__chip--flip em:first-child { opacity: 0; }
[data-step="9"] .tm__chip--flip em:last-child, [data-step="10"] .tm__chip--flip em:last-child { opacity: 1; }
[data-step="10"] .tm__main { opacity: 0; }
@media (max-width: 767px) {
  .mock-frame { aspect-ratio: 4 / 3; }
  .tm { left: 3%; right: 3%; font-size: clamp(7px, 2.2cqw, 11px); }
  .tm__side { display: none; }
  .tm__view { padding: 1.2em 1.2em; }
  .tm__table--teams .tm__tr > span:nth-child(3), .tm__table--members .tm__tr > span:nth-child(3) { display: none; }
  .tm__table--teams .tm__tr { grid-template-columns: 2fr 0.7fr 1fr; }
  .tm__table--members .tm__tr { grid-template-columns: 1.6fr 0.8fr 0.9fr 1.1fr; }
  .tm__modal-card { width: 88%; }
  .tm__toast { right: 1em; left: 1em; bottom: 1em; }
  [data-step="1"] .mock-cursor, [data-step="2"] .mock-cursor { transform: translate(8cqw, 5cqh); }
  [data-step="3"] .mock-cursor { transform: translate(10cqw, 24cqh); }
  [data-step="5"] .mock-cursor, [data-step="6"] .mock-cursor { transform: translate(50cqw, 4cqh); }
  [data-step="7"] .mock-cursor { transform: translate(40cqw, 44cqh); }
}

/* =========================================================
   Logos strip
   ========================================================= */
.logos { padding-top: var(--sp-lg); }
.logos__label { font-size: 14px; font-weight: 500; color: var(--gray-450); margin-bottom: 20px; }
.logos__marquee { padding-bottom: 32px; border-bottom: 1px solid var(--gray-200); }
.logos__list { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
@media (min-width: 900px) { .logos__list { flex-wrap: nowrap; justify-content: space-between; gap: 40px; } }
.logos__list li { display: flex; align-items: center; }
.logos__repeat { display: none !important; }
.logos__list img { height: 36px; width: auto; max-width: 220px; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 0.3s var(--ease-soft), opacity 0.3s var(--ease-soft); }
.logos__list li:hover img { filter: none; opacity: 1; }
.logos--color .logos__list img { filter: none; opacity: 1; }
.logos__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: var(--sp-lg) 0; margin-top: 0; }
.logos__stats li { display: flex; flex-direction: column; gap: 12px; padding-left: 32px; border-left: 1px solid var(--gray-200); }
.logos__stats li:first-child { padding-left: 0; border-left: 0; }
.logos__stats b { font-family: var(--font-heading); font-weight: 500; font-size: clamp(48px, 4.5vw, 72px); line-height: 0.95; letter-spacing: -0.03em; }
.logos__stats span { font-size: 16px; color: var(--gray-450); line-height: 1.3; }
@media (max-width: 767px) { .logos__stats { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; } .logos__stats li { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--gray-200); } .logos__stats li:first-child { padding-top: 0; border-top: 0; } .logos__stats b { font-size: 44px; } }
@media (max-width: 767px) {
  .logos__list {
    flex-wrap: nowrap;
    gap: 0;
    scrollbar-width: none;
    width: max-content;
  }
  .logos__marquee { width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden; padding-bottom: 24px; }
  .logos__list li { flex: 0 0 auto; margin-right: 40px; }
  .logos--center .logos__list li { margin-right: 24px; }
  .logos__list .logos__repeat { display: flex !important; }
  .logos__list img { height: 26px; max-width: 150px; }
  .logos__list { animation: logos-marquee 20s linear infinite; }
  .logos--home .logos__label { text-align: center; }
  .logos--home .logos__marquee { position: relative; border-bottom: 0; }
  .logos--home .logos__marquee::after { content: ""; position: absolute; right: var(--gutter); bottom: 0; left: var(--gutter); height: 1px; background: var(--gray-200); }
}
@keyframes logos-marquee { to { transform: translateX(-50%); } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .logos__marquee { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .logos__list { animation: none; }
  .logos__list li { scroll-snap-align: start; }
}

/* =========================================================
   Problem
   ========================================================= */
.eyebrow { font-size: 14px; font-weight: 500; color: var(--gray-450); margin-bottom: var(--sp-md); }
.problem { border-top: 1px solid var(--gray-200); padding-bottom: var(--sp-lg); }
.problem__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.problem__title { text-wrap: nowrap; }
.fprob .problem__title, html[lang="en"] .problem__title { text-wrap: balance; }   /* long English titles must wrap inside their column */
.problem__body { grid-column: 1 / -1; }
.problem__lead { font-weight: 500; margin-bottom: var(--sp-sm); }
.problem__list { margin-top: var(--sp-lg); display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
.problem__list li { display: grid; grid-template-columns: 1fr; gap: 6px; padding-top: var(--sp-sm); border-top: 1px solid var(--gray-200); }
.problem__stat { font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.problem__label { font-size: 20px; font-weight: 500; line-height: 1.3; margin-top: 8px; }
.problem__desc { font-size: 16px; line-height: 1.5; color: var(--fg-secondary); max-width: 46ch; }
@media (min-width: 768px) {
  .problem__head { grid-column: span 3; margin-bottom: 0; padding-right: 32px; }
  .problem__body { grid-column: 4 / span 3; }
}
@media (min-width: 1440px) {
  .problem__head { grid-column: span 5; }
  .problem__body { grid-column: 6 / span 5; }
}

/* =========================================================
   Feature grid
   ========================================================= */
.feature-grid__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.feature-grid__head h2 { max-width: 560px; text-wrap: balance; }
@media (min-width: 768px) { .feature-grid__head { grid-column: span 3; } }
@media (min-width: 1440px) { .feature-grid__head { grid-column: span 5; } .feature-grid__head h2 { max-width: none; } }
.feature-grid__items {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg) var(--sp-sm);
}
@media (min-width: 768px) { .feature-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-lg); } }
.feature__icon { width: 36px; height: 36px; margin-bottom: var(--sp-md); color: var(--ink); }
.feature h3 { margin-bottom: var(--sp-sm); }
.feature p { text-wrap: pretty; }

/* =========================================================
   Use cases (accordion + crossfade stage)
   ========================================================= */
.usecases__head { display: flex; width: 100%; margin-bottom: var(--sp-lg); }
.usecases__head h2 { text-wrap: balance; }
@media (min-width: 768px) { .usecases__head h2 { width: 50%; } }
.usecases__desktop { display: flex; flex-direction: column; gap: var(--sp-lg); }
@media (min-width: 768px) { .usecases__desktop { flex-direction: row; gap: 0; } }
.usecases__list { width: 100%; }
@media (min-width: 768px) { .usecases__list { width: 50%; } .usecases__list > * { width: 86%; } }
.usecases__list { display: flex; flex-direction: column; }

.acc-item {
  border-top: 2px solid var(--ink-3);
  padding-bottom: 24px;
  position: relative;
  transition: border-color 0.3s var(--ease-soft);
}
.acc-item::before {
  content: "";
  position: absolute; left: 0; top: -2px; height: 2px; width: 100%;
  background: var(--ivory);
  transform-origin: left;
  transform: scaleX(0);
}
.acc-item.is-active::before { animation: acc-progress var(--acc-duration, 6s) linear forwards; }
.usecases__desktop.is-paused .acc-item.is-active::before { animation-play-state: paused; }
.acc-item { cursor: pointer; padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; border-radius: 0 0 8px 8px; outline: none; }
.acc-item:hover, .acc-item:focus-visible { background: rgba(250,250,249,0.04); }
.acc-item:hover { border-top-color: var(--gray-500); }
.acc-item__button { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding-top: 16px; }
.acc-item__arrow { font-size: 18px; color: var(--ivory); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); }
.acc-item:hover .acc-item__arrow { opacity: 1; transform: none; }
.acc-item.is-active .acc-item__arrow { opacity: 0; }
.acc-item:hover .acc-item__button h3 { transform: translateX(4px); }
.acc-item__button h3 { transition: color 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); }
.acc-item__button h3 { color: var(--gray-500); transition: color 0.3s var(--ease-soft); }
.acc-item:hover .acc-item__button h3, .acc-item.is-active .acc-item__button h3 { color: var(--ivory); }
.acc-item__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-soft), opacity 0.3s var(--ease-soft);
  opacity: 0;
}
.acc-item__body > * { min-height: 0; overflow: hidden; }
.acc-item.is-active .acc-item__body { grid-template-rows: 1fr; opacity: 1; }
.acc-item__body p { padding-top: 16px; padding-bottom: 8px; max-width: 46ch; }
@keyframes acc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* mobile: show image under each item */
.usecases__mobile-visual { display: none; }
.usecases__visual { position: relative; width: 100%; }
@media (min-width: 768px) { .usecases__visual { width: 50%; } }
.usecases__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-image); overflow: hidden; background: #0b0b1a; border: 1px solid rgba(250,250,249,0.08); }
.usecases__aurora { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; filter: blur(26px); }
.uc-panel {
  position: absolute; inset: 0;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: #0b0b1a;
  border: 1px solid rgba(250,250,249,0.08);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  color: var(--ivory);
  font-size: clamp(9px, 1.3vw, 14px);
  container-type: inline-size;
}
/* Harvey-style crop: show the window's top-left corner, let the content bleed right/bottom */
.uc-panel { background: transparent; border: 0; }
.uc-panel .tm--static { position: absolute; inset: auto; left: var(--crop-x, 8%); top: var(--crop-y, 10%); width: 100%; height: 100%; border-radius: 0.9em; box-shadow: 0 30px 80px rgba(0,0,0,0.45); font-size: clamp(6.5px, 1.35cqw, 12px); transform: scale(var(--crop-scale, 1.35)); transform-origin: top left; }
.uc-panel[data-index="0"] { --crop-x: 8%; --crop-y: 10%; --crop-scale: 1.3; }
.uc-panel[data-index="1"] { --crop-x: -33%; --crop-y: 10%; --crop-scale: 1.4; }
.uc-panel[data-index="2"] { --crop-x: -33%; --crop-y: 12%; --crop-scale: 1.4; }
.uc-panel[data-index="3"] { --crop-x: -32%; --crop-y: 10%; --crop-scale: 1.35; }
.uc-panel[data-index="4"] { --crop-x: -33%; --crop-y: 12%; --crop-scale: 1.4; }
.uc-panel .tm__view { position: relative; inset: auto; height: 100%; }
.uc-panel .tm__side { width: 22%; min-width: 0; padding: 1.2em 0.9em; }
.uc-panel .tm__logo img { height: 1.4em; margin-bottom: 0.8em; }
.uc-panel .tm__nav li { padding: 0.5em 0.7em; }
.uc-panel.is-active { opacity: 1; }
.uc-panel__bar { display: flex; align-items: center; gap: 0.45em; padding: 0.9em 1.2em; border-bottom: 1px solid rgba(250,250,249,0.08); }
.uc-panel__bar span { width: 0.7em; height: 0.7em; border-radius: 50%; background: rgba(250,250,249,0.18); }
.uc-panel__bar em { font-style: normal; margin-left: 0.6em; color: var(--gray-500); font-size: 0.9em; }
.uc-panel__body { padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: 0.6em; }
.uc-row { display: grid; grid-template-columns: 1.4fr 0.8fr 1.4fr 0.9fr; gap: 0.8em; padding: 0.75em 0.8em; border-radius: 0.5em; background: rgba(250,250,249,0.04); align-items: center; }
.uc-row--head { background: none; color: var(--gray-500); font-size: 0.85em; padding-top: 0; padding-bottom: 0.2em; }
.uc-row--new { outline: 1px solid rgba(250,250,249,0.35); animation: uc-new 0.6s var(--ease-soft) both; }
.uc-panel.is-active .uc-row--new { animation-delay: 0.9s; }
@keyframes uc-new { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.uc-badge { display: inline-flex; align-items: center; justify-self: start; padding: 0.2em 0.6em; border-radius: 99px; font-size: 0.82em; font-weight: 500; }
.uc-badge--ok { background: rgba(47,158,107,0.18); color: #7fd6ac; }
.uc-badge--warn { background: rgba(217,146,43,0.18); color: #f0bc6a; }
.uc-badge--new { background: var(--ivory); color: var(--ink); }
.uc-matrix { gap: 0.4em; }
.uc-matrix__head, .uc-matrix__row { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); align-items: center; gap: 0.6em; }
.uc-matrix__head { color: var(--gray-500); font-size: 0.85em; text-align: center; }
.uc-matrix__head span:first-child { text-align: left; }
.uc-matrix__row { padding: 0.55em 0; border-top: 1px solid rgba(250,250,249,0.08); }
.uc-matrix__row i { justify-self: center; width: 1.2em; height: 1.2em; border-radius: 50%; border: 1px solid rgba(250,250,249,0.25); }
.uc-matrix__row i.on { background: var(--ivory); border-color: var(--ivory); }
.uc-matrix__foot { margin-top: 0.8em; color: var(--gray-500); font-size: 0.85em; }
.uc-lic { padding: 0.5em 0; }
.uc-lic__head { display: flex; justify-content: space-between; font-size: 0.95em; font-variant-numeric: tabular-nums; }
.uc-lic .mock-bar { margin-top: 0.5em; }
.uc-lic--hl { margin-top: 0.4em; padding: 0.9em 1em; border-radius: 0.5em; background: rgba(250,250,249,0.08); }
.uc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.uc-stats div { padding: 0.9em 1em; border-radius: 0.5em; background: rgba(250,250,249,0.05); }
.uc-stats b { display: block; font-size: 2em; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.25em; }
.uc-stats span { color: var(--gray-500); font-size: 0.85em; }
.uc-chart { display: flex; align-items: flex-end; gap: 0.5em; height: 9em; margin-top: 1em; padding-bottom: 0.4em; border-bottom: 1px solid rgba(250,250,249,0.12); }
.uc-chart i { flex: 1; background: linear-gradient(to top, rgba(250,250,249,0.35), rgba(250,250,249,0.9)); border-radius: 0.2em 0.2em 0 0; transform-origin: bottom; transform: scaleY(0); transition: transform 0.6s var(--ease-soft); }
.uc-panel.is-active .uc-chart i, .pv.is-inview .uc-chart i { transform: none; }
.uc-panel.is-active .uc-chart i:nth-child(n) { transition-delay: calc(0.05s * var(--n, 1)); }
.uc-chart__label { color: var(--gray-500); font-size: 0.85em; margin-top: 0.6em; }
.uc-log { display: grid; grid-template-columns: 1.3fr 0.9fr 2fr; gap: 0.8em; padding: 0.65em 0; border-top: 1px solid rgba(250,250,249,0.08); font-size: 0.95em; font-variant-numeric: tabular-nums; }
.uc-log:first-child { border-top: 0; }
.uc-log span:first-child { color: var(--gray-500); }
.uc-log__foot { padding-top: 0.8em; }
.uc-log__foot .mock-chip--dark { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

/* =========================================================
   Carousel (case studies)
   ========================================================= */
.carousel { position: relative; overflow: hidden; }
.carousel__track {
  display: flex;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  transition: transform 0.6s var(--ease-soft);
}
.carousel__track.is-dragging { cursor: grabbing; transition: none; }
.carousel__slide { width: 100%; min-width: 100%; flex-shrink: 0; margin-right: 32px; }
.quote { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
@media (min-width: 768px) { .quote { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1440px) { .quote { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 20px; } }
.quote__visual {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-image);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  color: var(--ivory);
}
.quote__visual { background: #171a38; }
@media (max-width: 767px) {
  .quote__visual { aspect-ratio: 3 / 2; padding: 24px; }
}
.quote__aurora { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; filter: blur(26px); }
.quote__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,30,0) 45%, rgba(10,10,30,0.45) 100%); pointer-events: none; }
.quote__visual-label { position: relative; font-size: 14px; color: rgba(250,250,249,0.7); margin-bottom: 20px; }
.quote__visual-logo { position: relative; display: flex; align-items: flex-end; height: clamp(44px, 6vw, 80px); }
.quote__visual-logo img { height: 100%; width: auto; max-width: 70%; object-fit: contain; object-position: left bottom; filter: brightness(0) invert(1); opacity: 0.96; }
.quote__visual--a .quote__visual-logo img { height: 85%; }
.quote__visual--d .quote__visual-logo img { max-width: 92%; height: 55%; }
.quote__visual-title { position: relative; font-family: var(--font-heading); font-weight: 500; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -0.02em; }
.quote__text { display: flex; flex-direction: column; justify-content: center; gap: 40px; }
@media (min-width: 768px) {
  .quote__visual { grid-column: span 3; }
  .quote__text { grid-column: span 3; padding-left: 16px; }
}
@media (min-width: 1440px) {
  .quote__visual { grid-column: span 4; }
  .quote__text { grid-column: 6 / span 5; padding-left: 0; }
}
.quote blockquote { text-wrap: pretty; }
.quote__name { font-weight: 500; }
.quote__logo { height: 72px; display: flex; align-items: center; }
.quote__logo img { max-height: 44px; width: auto; max-width: 240px; object-fit: contain; filter: grayscale(1) invert(1) brightness(0.95); opacity: 0.9; }
.carousel__progress { display: flex; gap: 16px; margin-top: calc(var(--sp-lg) - 20px); position: relative; }
.carousel__dot { flex: 1; display: flex; flex-direction: column; height: 24px; }
.carousel__bar { position: relative; display: block; height: 2px; background: var(--gray-700); width: 100%; overflow: hidden; margin-top: 11px; }
.carousel__bar i { position: absolute; inset: 0; background: var(--ivory); transform-origin: left; transform: scaleX(0); }
.carousel__dot.is-active .carousel__bar i { animation: carousel-progress var(--carousel-duration, 7s) linear forwards; }
.carousel__dot.is-done .carousel__bar i { transform: scaleX(1); }
.carousel.is-paused .carousel__dot.is-active .carousel__bar i { animation-play-state: paused; }
@keyframes carousel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================
   Products
   ========================================================= */
.products { padding-top: var(--sp-2xl); }
@media (max-width: 767px) { .products { padding-top: 96px; } }
.products__head { grid-column: 1 / -1; margin-bottom: var(--sp-xl); }
@media (min-width: 768px) { .products__head { grid-column: 1 / -1; } }
@media (min-width: 1440px) { .products__head { grid-column: 1 / -1; } }
@media (max-width: 767px) { .products__head { margin-bottom: 72px; } }
.products__lead { color: var(--gray-500); line-height: 1.12 !important; font-size: clamp(40px, 3.2vw + 14px, 60px) !important; letter-spacing: -0.02em; text-wrap: pretty; }
.products__lead strong { font-weight: 500; color: var(--ivory); }
html[lang="ja"] .products__lead { word-break: auto-phrase; line-height: 1.25 !important; }   /* Japanese wraps between phrases, not inside a word */
.products__list { grid-column: 1 / -1; }
.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
  align-items: center;
}
@media (min-width: 1024px) { .product { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.product__visual { width: 100%; }
.product__text { display: flex; flex-direction: column; }
.product__text-inner { width: 100%; }
@media (min-width: 768px) and (max-width: 1023px) { .product { margin-bottom: 96px; } .product__text-inner { max-width: 600px; } }   /* tablets: the visual runs full width and the copy sits under it */
@media (min-width: 1024px) and (max-width: 1199px) { .product__text-inner { width: 80% !important; } }
@media (min-width: 1024px) {
  .product__text-inner { width: 60%; margin: 0 auto; }
  .product--reverse .product__visual { order: 2; }
  .product--reverse .product__text { order: 1; }
}
@media (max-width: 1023px) { .product__visual { margin-bottom: 16px; } }
.product__eyebrow { margin-bottom: 12px; }
.product h3 { margin-bottom: var(--sp-xs); }
.product__cta { margin-top: var(--sp-md); }

/* product visuals */
.pv {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
  overflow: hidden;
  border: 1px solid rgba(250,250,249,0.08);
  background: #0b0b1a;
  color: #1a1917;
  display: flex; align-items: center; justify-content: center;
  container-type: inline-size;
}
.pv__aurora { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; filter: blur(26px); }
.pv .tm--card { position: relative; inset: auto; z-index: 1; width: 80%; max-width: 560px; font-size: clamp(6.5px, 1.6cqw, 12px); border-radius: 0.8em; box-shadow: 0 30px 80px rgba(0,0,0,0.45); background: #fff; }
.pv .tm--card .tm__view { position: relative; inset: auto; padding: 1.6em 1.8em; gap: 0.9em; }
.pv .tm--card .tm__view > .tm__table { gap: 0.4em; }
.pv .tm__bar b { transform: none; }
.tm__team-head { display: flex; align-items: center; gap: 0.9em; }
.tm__ico--xl { width: 3em; height: 3em; border-radius: 0.4em; }
.tm__team-name { font-size: 1.35em; font-weight: 600; letter-spacing: -0.01em; }
.tm__team-id { font-size: 0.78em; color: var(--tm-muted); }
.tm__ok-line { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; font-weight: 600; }
.tm__lead { font-size: 0.9em; color: var(--tm-text); }
.tm__section-title { font-size: 1.1em; font-weight: 600; margin-top: 0.3em; }
.tm__field-row--3 { display: grid; grid-template-columns: 1.6fr 1.4fr 0.9fr; gap: 0.7em; }
.tm__field--select > span { justify-content: space-between; }
.tm__alert { display: flex; gap: 0.7em; align-items: flex-start; padding: 0.8em 1em; border-radius: 0.4em; background: #e8f1fb; color: #0b4a8b; font-size: 0.82em; line-height: 1.45; }
.tm__alert i { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; border: 1px solid currentColor; font-style: normal; font-size: 0.85em; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1em; }
.tm__modal-foot--left { justify-content: flex-start; }
.pv__window { transform: translateY(10px); opacity: 0; transition: transform 0.8s var(--ease-soft), opacity 0.8s var(--ease-soft); }
.pv.is-inview .pv__window { transform: none; opacity: 1; }

/* ecosystem visual */
.pv__eco { position: relative; z-index: 1; width: 100%; height: 100%; }
.pv--4 .pv__eco-center { box-shadow: 0 0 0 1.2em rgba(250,250,249,0.10), 0 0 0 2.4em rgba(250,250,249,0.05); }
.pv__eco-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8em; height: 8em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ivory); color: var(--ink);
  font-family: var(--font-heading); font-weight: 500; font-size: 1.5em; letter-spacing: -0.02em;
  box-shadow: 0 0 0 1.2em rgba(250,250,249,0.06), 0 0 0 2.4em rgba(250,250,249,0.03);
}
.pv__eco-node {
  position: absolute; left: 50%; top: 50%;
  --r: 13.5em;
  --a: calc(var(--i) * 60deg);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
  padding: 0.55em 0.9em;
  border-radius: 99px;
  background: rgba(15,14,13,0.6);
  border: 1px solid rgba(250,250,249,0.25);
  color: var(--ivory);
  font-size: 0.95em;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.pv__eco::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 27em; height: 27em; border-radius: 50%;
  border: 1px dashed rgba(250,250,249,0.25);
  animation: eco-spin 60s linear infinite;
}
@keyframes eco-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* =========================================================
   Security section
   ========================================================= */
.security { position: relative; background: #0e0d17; }
.security__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.security__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,23,0.35) 0%, rgba(14,13,23,0.15) 40%, rgba(14,13,23,0.45) 100%); pointer-events: none; }
.security__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 72px; }
@media (min-width: 768px) { .security__inner { gap: var(--sp-xl); } }
.security__title { grid-column: 1 / -1; margin-bottom: 0; text-wrap: balance; }
.security__desc { grid-column: 1 / -1; }
.security__desc .btn { margin-top: var(--sp-md); }
@media (min-width: 768px) and (max-width: 1199px) {   /* stacked: the title runs the full width, the copy sits under it */
  .security__title { margin-bottom: var(--sp-sm); }
  .security__desc { grid-column: 1 / span 5; }
}
@media (min-width: 1200px) {   /* side by side only once the column holds the longest phrase (11 characters) on one line */
  .security__title { grid-column: span 3; padding-right: 24px; }
  .security__desc { grid-column: 4 / span 3; }
}
@media (min-width: 1440px) {
  .security__title { grid-column: span 5; }
  .security__desc { grid-column: 6 / span 5; }
}
/* Japanese headings, card titles and short labels wrap between phrases, never inside a word (Chromium; other browsers keep their default) */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .heading-1, html[lang="ja"] .heading-2, html[lang="ja"] .heading-3, html[lang="ja"] .heading-4,
html[lang="ja"] .scene__title, html[lang="ja"] .sol-card__title, html[lang="ja"] .fsteps__text, html[lang="ja"] .problem__label, html[lang="ja"] .feat-x__title { word-break: auto-phrase; }
.security__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px var(--grid-gap);
}
@media (min-width: 640px) { .security__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; } }
@media (min-width: 1024px) { .security__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 24px; } }
.policy { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.policy__badge { width: 88px; color: var(--ivory); }
@media (min-width: 1024px) { .policy__badge { width: clamp(88px, 8vw, 112px); } }
.policy__badge svg { width: 100%; height: auto; }
.policy__title { margin-bottom: 6px; font-size: 16px; line-height: 1.35; font-weight: 500; }
.policy__link { display: inline-flex; align-items: center; gap: 4px; color: var(--gray-300); font-size: 14px; opacity: 0.8; transition: var(--t-colors); }
.policy__link:hover { color: var(--ivory); opacity: 1; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--ink); color: var(--white); }
.site-footer .container { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.site-footer__cta {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--ink-3);
}
@media (min-width: 768px) { .site-footer__cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } }
.site-footer__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.site-footer__cta .btn--outline { color: var(--ivory); border-color: rgba(250,250,249,0.5); background: transparent; }
.site-footer__cta .btn--outline:hover { border-color: var(--ivory); background: rgba(250,250,249,0.08); }
.site-footer__cta-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 24px; line-height: 1.2; text-wrap: balance; margin-bottom: var(--sp-md); }
@media (min-width: 768px) { .site-footer__cta-title { margin-bottom: 0; } }
.site-footer__body { display: flex; flex-direction: column; margin-top: var(--sp-lg); }
@media (min-width: 1024px) { .site-footer__body { flex-direction: row; } }   /* tablets keep the phone layout with three link columns: five columns beside the logo leave 2-3 characters a line */
.site-footer__meta { display: none; flex-direction: column; align-items: flex-start; justify-content: space-between; margin-right: var(--sp-md); }
.site-footer__meta p { max-width: 224px; text-wrap: balance; }
.site-footer__logo { height: 26px; width: auto; align-self: flex-start; margin-bottom: var(--sp-md); }
.site-footer__meta--mobile { display: flex; margin-top: var(--sp-md); }
@media (min-width: 1024px) {
  .site-footer__meta { display: flex; }
  .site-footer__meta--mobile { display: none; }
  .site-footer__meta:not(.site-footer__meta--mobile) { min-width: 256px; }
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-md) var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
@media (min-width: 640px) { .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-sm); margin: 0 0 0 auto; width: 100%; max-width: 940px; } }
.site-footer__col { display: flex; flex-direction: column; gap: var(--sp-sm); }
.site-footer__heading { font-size: 16px; font-weight: 500; }
.footer-link { font-size: 16px; color: var(--gray-300); transition: var(--t-colors); display: inline-flex; align-items: center; }
.footer-link:hover { color: var(--white); }

/* =========================================================
   Motion preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* =========================================================
   Heading font presets (preview via ?font=<key>, see design/typography.html)
   ========================================================= */
html[data-font] { --heading-weight: 500; --heading-lh: 1.14; --heading-ls: -0.02em; }
html[data-font="zen"] { --font-heading: "Inter", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; }
html[data-font="plex"] { --font-heading: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; --heading-ls: -0.025em; }
html[data-font="murecho"] { --font-heading: "Murecho", "Noto Sans JP", sans-serif; }
html[data-font="noto"] { --font-heading: "Noto Sans JP", sans-serif; }
html[data-font="biz"] { --font-heading: "BIZ UDPGothic", "Noto Sans JP", sans-serif; --heading-weight: 700; }
html[data-font="mplus"] { --font-heading: "M PLUS 2", "Noto Sans JP", sans-serif; }
html[data-font="antique"] { --font-heading: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif; }
html[data-font="serif"] { --font-heading: "Instrument Serif", "Noto Serif JP", "Hiragino Mincho ProN", serif; --heading-weight: 400; --heading-lh: 1.05; --heading-ls: -0.0125em; }
html[data-font]:not([data-font="serif"]) .quote__visual-title, html[data-font]:not([data-font="serif"]) .logos__stats b, html[data-font]:not([data-font="serif"]) .problem__stat, html[data-font]:not([data-font="serif"]) .pv__eco-center { font-family: var(--font-heading); font-weight: 500; }

/* ---- Tactna window: extra parts used in use-case panels ---- */
.tm__topbar { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 1.2em; background: #fff; border-bottom: 1px solid var(--tm-border); }
.tm__topbar img { height: 1.5em; width: auto; filter: none; }
.tm__topbar-sub { color: var(--tm-muted); font-size: 1.05em; }
.tm__topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.6em; }
.tm__grid-ico { width: 1.3em; height: 1.3em; border-radius: 0.25em; background: linear-gradient(var(--tm-primary), var(--tm-primary)) 0 0/45% 45% no-repeat, linear-gradient(var(--tm-primary), var(--tm-primary)) 100% 0/45% 45% no-repeat, linear-gradient(var(--tm-primary), var(--tm-primary)) 0 100%/45% 45% no-repeat, linear-gradient(var(--tm-primary), var(--tm-primary)) 100% 100%/45% 45% no-repeat; opacity: 0.8; }
.tm__side--light { background: #fff; color: var(--tm-text); border-right: 1px solid var(--tm-border); }
.tm__side--light .tm__nav li { color: var(--tm-muted); }
.tm__side--light .tm__nav li.is-active { background: #ece9f8; color: var(--tm-primary); }
.tm__side--light .tm__nav-label { color: var(--tm-muted); }
.tm__team { display: flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.95em; padding: 0.2em 0 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm__tr--highlight { border-color: var(--tm-primary); background: #f6f3ff; }
.tm__table--apps .tm__tr { grid-template-columns: 1.8fr 0.9fr 1fr 1.4fr; }
.tm__table--log .tm__tr { grid-template-columns: 0.9fr 1fr 2fr 1.1fr; }
.tm__app { width: 1.6em; height: 1.6em; border-radius: 0.35em; flex: none; }
.tm__app--a { background: linear-gradient(135deg, #5036bb, #7f5af0); }
.tm__app--b { background: linear-gradient(135deg, #2196f3, #59c4ef); }
.tm__app--c { background: linear-gradient(135deg, #ed6c02, #f9a825); }
.tm__bar { display: block; width: 100%; height: 0.5em; border-radius: 99px; background: var(--tm-bg-2); overflow: hidden; }
.tm__bar b { display: block; height: 100%; background: var(--tm-primary); border-radius: 99px; transform-origin: left; transform: scaleX(0); transition: transform 0.7s var(--ease-soft); }
.uc-panel.is-active .tm__bar b { transform: none; }
.tm__callout { display: flex; align-items: center; gap: 0.8em; margin-top: auto; padding: 0.8em 1em; border-radius: 0.45em; background: #fff; border: 1px solid var(--tm-border); font-size: 0.92em; }
.tm__callout > span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm__btn--sm { height: 2.1em; padding: 0 0.9em; font-size: 0.85em; }
.tm__btn--outline { background: #fff; color: var(--tm-primary); border: 1px solid var(--tm-primary); }
.tm__chip--err { background: #fdecea; color: #c62828; }
.tm__policy { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tm-border); border-radius: 0.45em; overflow: hidden; }
.tm__policy-row { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); align-items: center; gap: 0.6em; padding: 0.7em 1em; border-top: 1px solid var(--tm-sep); font-size: 0.92em; }
.tm__policy-row:first-child { border-top: 0; }
.tm__policy-row--head { color: var(--tm-muted); font-size: 0.8em; background: var(--tm-bg); text-align: center; }
.tm__policy-row--head span:first-child { text-align: left; }
.tm__policy-row i { justify-self: center; width: 2.2em; height: 1.2em; border-radius: 99px; background: #d5d9e6; position: relative; transition: background 0.3s; }
.tm__policy-row i::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 0.9em; height: 0.9em; border-radius: 50%; background: #fff; transition: transform 0.3s; }
.tm__policy-row i.on { background: var(--tm-primary); }
.tm__policy-row i.on::after { transform: translateX(1em); }
.tm__cards { display: grid; gap: 0.8em; }
.tm__cards--2 { grid-template-columns: 1fr 1fr; }
.tm__cards--3 { grid-template-columns: repeat(3, 1fr); }
.tm__card { display: flex; flex-direction: column; gap: 0.3em; padding: 0.9em 1.1em; background: #fff; border: 1px solid var(--tm-border); border-radius: 0.45em; min-width: 0; }
.tm__card--warn { border-color: #f5c58a; background: #fff8f0; }
.tm__card-label { font-size: 0.8em; color: var(--tm-muted); }
.tm__card-value { font-size: 1.05em; font-weight: 600; }
.tm__card-value small { font-weight: 400; color: var(--tm-muted); margin-left: 0.4em; }
.tm__card-big { font-size: 2em; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.tm__card-note { font-size: 0.78em; color: var(--tm-muted); }
.tm__card--chart { flex: 1; }
.uc-chart--tm { height: 7em; border-bottom-color: var(--tm-sep); }
.uc-chart--tm i { background: linear-gradient(to top, rgba(80,54,187,0.55), #5036bb); }
@media (max-width: 767px) {
  .uc-panel .tm__side { display: none; }
  .tm__table--apps .tm__tr { grid-template-columns: 1.8fr 0.9fr 1fr; }
  .tm__table--apps .tm__tr > span:nth-child(4), .tm__table--log .tm__tr > span:nth-child(4) { display: none; }
  .tm__table--log .tm__tr { grid-template-columns: 0.9fr 1fr 2fr; }
}

/* =========================================================
   Company page
   ========================================================= */
.nav-item__button.is-current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.eyebrow--light { color: var(--gray-300); }
.company-hero { padding-bottom: var(--sp-lg); }
.company-hero .hero__title { font-size: clamp(40px, 3vw + 14px, 52px); }
@media (max-width: 767px) { .company-hero .hero__title { font-size: clamp(30px, 8.6vw, 40px); } }
.company-mission { position: relative; }
.company-mission__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.company-mission__bg canvas { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; filter: blur(28px); }
.company-mission__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,23,0.35), rgba(14,13,23,0.5)); }
.company-mission__inner { position: relative; z-index: 1; }
.company-mission__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.company-mission__head h2 { text-wrap: balance; }
.company-mission__body { grid-column: 1 / -1; }
@media (min-width: 768px) { .company-mission__head { grid-column: span 3; margin-bottom: 0; padding-right: 32px; } .company-mission__body { grid-column: 4 / span 3; } }
@media (min-width: 1440px) { .company-mission__head { grid-column: span 5; } .company-mission__body { grid-column: 6 / span 5; } }
.company-pillars { margin-top: var(--sp-lg); display: grid; gap: var(--sp-md); }
.company-pillars li { display: grid; grid-template-columns: 48px 1fr; gap: 8px 16px; padding-top: 20px; border-top: 1px solid rgba(250,250,249,0.2); }
.company-pillars__no { font-family: var(--font-heading); font-weight: 500; font-size: 14px; color: var(--gray-300); padding-top: 4px; }
.company-pillars h3 { grid-column: 2; }
.company-pillars p { grid-column: 2; max-width: 52ch; }
.company-facts { border-bottom: 1px solid var(--gray-200); }
.company-facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
@media (min-width: 900px) { .company-facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.company-facts__list li { display: flex; flex-direction: column; gap: 12px; padding-left: 24px; border-left: 1px solid var(--gray-200); }
.company-facts__list b { font-family: var(--font-heading); font-weight: 500; font-size: clamp(36px, 3.4vw, 56px); line-height: 0.95; letter-spacing: -0.03em; white-space: nowrap; }
.company-facts__list span { font-size: 15px; color: var(--gray-450); }
.company-team__head { grid-column: 1 / -1; margin-bottom: var(--sp-md); }
.company-team__head h2 { text-wrap: balance; }
.company-team__lead { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.company-team__lead p { max-width: 60ch; }
@media (min-width: 768px) { .company-team__head { grid-column: span 3; margin-bottom: var(--sp-lg); padding-right: 32px; } .company-team__lead { grid-column: 4 / span 3; } }
@media (min-width: 1440px) { .company-team__head { grid-column: span 5; } .company-team__lead { grid-column: 6 / span 5; } }
.company-team__grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: var(--sp-lg) var(--sp-md); }
@media (min-width: 640px) { .company-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .company-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.member__avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--ivory); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 500; font-size: 20px; letter-spacing: 0.02em; margin-bottom: 20px; }
.member__avatar--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.member__avatar { width: 96px; height: 96px; overflow: hidden; }
.member__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member__name { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.member__name small { font-size: 14px; font-weight: 400; color: var(--gray-450); margin-left: 8px; }
.member__role { font-size: 14px; font-weight: 500; color: #0061ec; margin-bottom: 12px; }
.member--advisor .member__role { color: var(--gray-450); }
.member__bio { font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 42ch; }
@media (max-width: 639px) {
  .member { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: center; }
  .member__avatar { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .member__identity { grid-column: 2; grid-row: 1; min-width: 0; }
  .member__role { margin-bottom: 0; font-size: clamp(12px, 3.2vw, 14px); letter-spacing: -0.02em; white-space: nowrap; }
  .member__bio { grid-column: 1 / -1; margin-top: 0; }
}
.company-history__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.company-history__head h2 { text-wrap: balance; }
.company-history__figure { display: block; grid-column: 1 / -1; margin: var(--sp-lg) 0 0; max-width: 420px; }
.company-history__figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.company-history__figure figcaption { margin-top: 12px; font-size: 13px; color: var(--gray-450); }
@media (min-width: 768px) {
  /* the photo comes after the timeline in the markup; keep it in the left column under the heading, not in a new row below the list */
  .company-history .content { grid-template-rows: auto 1fr; }
  .company-history__head { grid-row: 1; }
  .company-history__figure { grid-column: span 3; grid-row: 2; align-self: start; padding-right: 32px; }
  .company-history .timeline { grid-row: 1 / span 2; }
}
.timeline { grid-column: 1 / -1; display: grid; gap: 0; }
@media (min-width: 768px) { .company-history__head { grid-column: span 3; margin-bottom: 0; padding-right: 32px; } .timeline { grid-column: 4 / span 3; } }
@media (min-width: 1440px) { .company-history__head, .company-history__figure { grid-column: span 5; } .timeline { grid-column: 6 / span 5; } }
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid rgba(250,250,249,0.18); }
.timeline li:last-child { border-bottom: 1px solid rgba(250,250,249,0.18); }
.timeline__year { font-family: var(--font-heading); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.timeline__title { font-size: 20px; font-weight: 500; line-height: 1.3; margin-bottom: 8px; }
.timeline__desc { font-size: 16px; line-height: 1.6; color: var(--gray-300); max-width: 56ch; }
.company-profile__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.company-profile__table { grid-column: 1 / -1; margin: 0; }
@media (min-width: 768px) { .company-profile__head { grid-column: span 3; margin-bottom: 0; } .company-profile__table { grid-column: 4 / span 3; } }
@media (min-width: 1440px) { .company-profile__head { grid-column: span 5; } .company-profile__table { grid-column: 6 / span 5; } }
.company-profile__table > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--gray-200); font-size: 16px; line-height: 1.5; }
.company-profile__table > div:last-child { border-bottom: 1px solid var(--gray-200); }
.company-profile__table dt { color: var(--gray-450); font-weight: 500; }
.company-profile__table dd { margin: 0; }
.company-profile__table a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .company-profile__table > div { grid-template-columns: 1fr; gap: 4px; } .timeline li { grid-template-columns: 64px 1fr; } }

/* =========================================================
   Company page v2 — layouts borrowed from the reference's Company / Careers pages
   ========================================================= */
.section--gray { --bg: #f2f1f0; }
/* editorial hero: one wide statement, no aside */
.editorial-hero { padding-top: calc(var(--header-height) + var(--sp-lg)); padding-bottom: var(--sp-xl); transition: padding 0.3s var(--ease-out-soft-in); }
.editorial-hero__body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-md); }
@media (min-width: 768px) { .editorial-hero__body { grid-column: span 5; } }
@media (min-width: 1440px) { .editorial-hero__body { grid-column: span 7; } }
.editorial-hero .breadcrumb { margin-bottom: 0; }
.editorial-hero__title { font-size: clamp(36px, 2.6vw + 14px, 56px); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.editorial-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.editorial-hero__figure { margin: var(--sp-lg) 0 0; overflow: hidden; border-radius: 4px; background: #ecebe9; }
.editorial-hero__figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 35%; }
@media (min-width: 768px) { .editorial-hero__figure { margin-top: var(--sp-xl); } .editorial-hero__figure img { aspect-ratio: 2.2 / 1; } }
/* stats band: top-border columns */
.stats-band { padding-bottom: var(--sp-xl); }
.stats-band__list { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 768px) { .stats-band__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats-band__list li { display: flex; flex-direction: column; gap: 16px; padding: 28px 0; border-top: 2px solid var(--ink); }
.stats-band__num { font-family: var(--font-heading); font-weight: 500; font-size: clamp(36px, 2.5vw + 16px, 48px); line-height: 1; letter-spacing: -0.03em; }
.stats-band__label { font-size: 16px; line-height: 1.5; color: var(--ink-3); max-width: 34ch; }
/* founder pull quote */
.founder { position: relative; }
.founder__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.founder__bg canvas { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; filter: blur(28px); }
.founder__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,23,0.4), rgba(14,13,23,0.55)); }
.founder__inner { position: relative; z-index: 1; }
.pullquote { grid-column: 1 / -1; display: grid; gap: var(--sp-md); }
@media (min-width: 768px) { .pullquote { grid-column: span 5; } }
@media (min-width: 1440px) { .pullquote { grid-column: span 7; } }
.pullquote__text { position: relative; font-family: var(--font-heading); font-weight: 400; font-size: clamp(24px, 1.6vw + 12px, 36px); line-height: 1.5; letter-spacing: -0.01em; text-indent: -0.5em; }
.pullquote__by { display: flex; align-items: center; gap: 16px; }
.pullquote__portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid rgba(255,255,255,0.18); }
.pullquote__by p { font-size: 16px; color: var(--gray-300); line-height: 1.5; }
.pullquote__by p:first-child { color: var(--ivory); font-weight: 500; }
/* Mission section: the statement leads, the founder's comment follows at reading size */
.founder__mission { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.founder__label { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-300); margin-bottom: 20px; }
.founder__statement { font-family: "Inter", sans-serif; font-weight: 500; font-size: clamp(26px, 1.2vw + 16px, 32px); line-height: 1.2; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; word-break: normal; }   /* kept well under the hero line: "Own your ecosystem." is the loudest line on the page */
.pullquote--note { gap: 24px; max-width: 760px; padding-top: var(--sp-md); border-top: 1px solid rgba(250,250,249,0.18); }
.pullquote--note .pullquote__text { font-size: clamp(17px, 0.4vw + 15px, 20px); line-height: 1.85; letter-spacing: 0; color: var(--gray-300); }
.pullquote--note .pullquote__portrait { width: 48px; height: 48px; }
.pullquote--note .pullquote__by p { font-size: 14px; }
@media (min-width: 1024px) { .founder__mission { grid-column: 1 / span 4; margin-bottom: 0; } .pullquote--note { grid-column: 5 / -1; align-self: end; } }
@media (min-width: 1440px) { .founder__mission { grid-column: 1 / span 6; } .pullquote--note { grid-column: 7 / -1; } }
/* numbered values list */
/* What we see: a full-width heading, then three cards in a row (icon, title, copy) separated by hairlines */
.values__intro { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.values__heading { max-width: 22em; text-wrap: balance; }
.values__cards { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }   /* no rules: the cards stand on their own */
.values__card { display: flex; flex-direction: column; padding: 32px 0 36px; }
.values__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gray-300); display: grid; place-items: center; margin-bottom: 28px; }
.values__icon svg { width: 20px; height: 20px; }
.values__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 24px; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 14px; text-wrap: balance; }
.values__card p { line-height: 1.75; text-wrap: pretty; }
@media (min-width: 900px) {
  .values__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .values__card { padding: 36px 36px 8px 0; border-bottom: 0; }
  .values__card + .values__card { padding-left: 36px; }
  .values__card:last-child { padding-right: 0; }
}
/* timeline light variant */
.timeline--light li { border-top-color: var(--gray-300); }
.timeline--light li:last-child { border-bottom-color: var(--gray-300); }
.timeline--light .timeline__desc { color: var(--ink-3); }
/* profile grid: full-width two columns */
.company-profile__top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: var(--sp-md); }
.company-profile__map { font-size: 16px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.profile-grid { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-lg); }
@media (min-width: 900px) { .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profile-grid > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--gray-300); font-size: 16px; line-height: 1.5; }
.profile-grid dt { color: var(--gray-450); font-weight: 500; }
.profile-grid dd { margin: 0; }
.profile-grid a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .profile-grid > div { grid-template-columns: 1fr; gap: 4px; } }
/* CTA with gallery */
.cta-gallery { padding: var(--sp-2xl) 0 var(--sp-lg); }
@media (max-width: 767px) { .cta-gallery { padding: 96px 0 40px; } }
.cta-gallery__text { grid-column: 1 / -1; }
@media (min-width: 768px) { .cta-gallery__text { grid-column: span 4; } }
@media (min-width: 1440px) { .cta-gallery__text { grid-column: 2 / span 5; } }
.cta-gallery__lead { color: var(--gray-500); line-height: 1.15 !important; }
.cta-gallery__lead strong { font-weight: 500; color: var(--ink); }
.cta-gallery__actions { margin-top: var(--sp-md); }
.cta-gallery__tiles { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: var(--sp-lg); }
@media (min-width: 768px) { .cta-gallery__tiles { grid-template-columns: 2fr 1fr; } }
.cta-gallery__tile { position: relative; overflow: hidden; border-radius: 4px; background: #171a38; aspect-ratio: 1 / 1; display: flex; align-items: flex-end; padding: 24px; color: var(--ivory); font-size: 14px; }
.cta-gallery__tile--wide { aspect-ratio: 2 / 1; }
.cta-gallery__tile canvas { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; filter: blur(26px); }
.cta-gallery__tile span { position: relative; }
.cta-gallery__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* two photos side by side at the photos' own proportion (about 3:2), so nobody's face is cropped */
@media (min-width: 768px) { .cta-gallery__tiles--photos { grid-template-columns: 1fr 1fr; } }
.cta-gallery__tiles--photos .cta-gallery__tile, .cta-gallery__tiles--photos .cta-gallery__tile--wide { aspect-ratio: 1060 / 669; }

/* ---------- Solution pages (structure after the reference solution page) ---------- */
.sol-hero { padding-top: calc(var(--header-height) + var(--sp-xl)); padding-bottom: 0; text-align: center; }
/* full-bleed photo under the hero copy: 16:9 on phones, a wide 21:9 band on desktop, kept under 560px tall */
.sol-hero__photo { margin: var(--sp-lg) 0 0; width: 100%; }
.sol-hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 38%; }
@media (min-width: 768px) { .sol-hero__photo { margin-top: var(--sp-xl); } .sol-hero__photo img { aspect-ratio: 21 / 9; max-height: 560px; } }
.sol-hero__inner { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (min-width: 1440px) { .sol-hero__inner { grid-column: 2 / span 8; } }
.sol-hero .eyebrow { margin-bottom: 4px; }
.sol-hero__title { max-width: 20ch; text-wrap: balance; }
.sol-hero__lead { max-width: 58ch; margin-top: 8px; }
.logos--center { padding-top: var(--sp-md); padding-bottom: var(--sp-lg); text-align: center; }
.logos--center .logos__list { justify-content: center; gap: 24px 56px; }
.logos--center .logos__marquee { border-bottom: 0; padding-bottom: 0; }
.logos--center .logos__label { margin-bottom: 28px; }

.sfeat { padding: var(--sp-xl) 0; }
.sfeat__text { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sfeat__visual { grid-column: 1 / -1; align-self: center; }
@media (min-width: 900px) { .sfeat__text { grid-column: span 3; padding-right: 32px; } .sfeat__visual { grid-column: 4 / span 3; } }
@media (min-width: 1440px) { .sfeat__text { grid-column: span 4; } .sfeat__visual { grid-column: 6 / span 5; } }
@media (max-width: 899px) { .sfeat__visual { margin-top: var(--sp-md); } }
.sfeat .eyebrow { margin-bottom: 0; }
.sfeat__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(30px, 1.9vw + 14px, 42px); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.sfeat__desc { max-width: 48ch; }
.sfeat__cta { margin-top: 4px; }
.sfeat__list { list-style: none; margin: var(--sp-md) 0 0; padding: 0; display: grid; gap: 18px; }
.sfeat__list li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.sfeat__list b { color: var(--ink); font-weight: 500; }
.sfeat__ico { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #eaf1fd; color: #0061ec; margin-top: 1px; }
.sfeat__visual .pv { aspect-ratio: 5 / 4; }

.sfeat--center .sfeat__head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
@media (min-width: 1440px) { .sfeat--center .sfeat__head { grid-column: 2 / span 8; } }
.sfeat--center .sfeat__desc { max-width: 52ch; }
.sfeat__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.sfeat__link .arrow { transition: transform 0.2s var(--ease-soft); }
.sfeat__link:hover .arrow { transform: translateX(4px); }
.sfeat__cards { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: var(--sp-lg); }
@media (min-width: 768px) { .sfeat__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scard { display: flex; flex-direction: column; gap: 12px; padding: 44px 32px 0; border-radius: 4px; background: #f2f1f0; text-align: center; overflow: hidden; }
.scard h3 { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.scard p { max-width: 44ch; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.scard__visual { margin-top: 28px; }
.scard__visual .pv { aspect-ratio: auto; height: 300px; align-items: flex-start; justify-content: center; padding-top: 32px; border-radius: 4px 4px 0 0; border-bottom: 0; }
.scard__visual .pv .tm--card { width: 84%; }
.scard__visual .pv .pv__eco { top: 32px; }

.resources { padding: var(--sp-xl) 0; }
.resources__head { grid-column: 1 / -1; }
.resources__desc { grid-column: 1 / -1; align-self: end; max-width: 40ch; }
@media (min-width: 768px) { .resources__head { grid-column: span 4; } .resources__desc { grid-column: 5 / span 2; padding-bottom: 8px; } }
@media (min-width: 1440px) { .resources__head { grid-column: span 6; } .resources__desc { grid-column: 7 / span 4; } }
.resources__head .eyebrow { margin-bottom: 16px; }
.res-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: var(--sp-lg); }
@media (min-width: 640px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.res-card { display: flex; flex-direction: column; gap: 18px; min-height: 200px; padding: 28px; border-radius: 4px; background: rgba(250,250,249,0.06); border: 1px solid rgba(250,250,249,0.08); color: var(--ivory); text-decoration: none; transition: background 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft); }
.res-card:hover { background: rgba(250,250,249,0.1); border-color: rgba(250,250,249,0.2); }
.res-card > svg { color: var(--gray-300); }
.res-card__title { flex: 1; font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.res-card__link { font-size: 14px; font-weight: 500; color: var(--gray-300); }
.res-card__link .arrow { display: inline-block; margin-left: 6px; transition: transform 0.2s var(--ease-soft); }
.res-card:hover .res-card__link .arrow { transform: translateX(4px); }

.compliance { padding: 0; }
.compliance__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--gray-200); }
@media (min-width: 900px) { .compliance__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.compliance__list li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; border-right: 1px solid var(--gray-200); color: var(--ink-3); }
.compliance__list svg { color: var(--gray-450); flex: none; }

.sol-cta { padding: var(--sp-xl) 0; }
.sol-cta__mark { grid-column: 1 / -1; color: rgba(250,250,249,0.2); }
.sol-cta__mark svg { width: 120px; height: 120px; }
.sol-cta__body { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
@media (min-width: 768px) { .sol-cta__mark { grid-column: span 2; } .sol-cta__mark svg { width: 200px; height: 200px; } .sol-cta__body { grid-column: 3 / span 4; } }
@media (min-width: 1440px) { .sol-cta__mark { grid-column: 1 / span 3; } .sol-cta__body { grid-column: 4 / span 7; } }
.sol-cta__title { text-wrap: balance; }
.sol-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sol-cta__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--gray-300); }
.sol-cta__notes li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb ol li + li::before { content: "/"; margin: 0 8px; color: var(--gray-450); }

/* ---------- Product pages (structure after the reference platform page) ---------- */
.prod-hero { padding-top: calc(var(--header-height) + var(--sp-xl)); padding-bottom: var(--sp-xl); }
@media (max-width: 767px) { .prod-hero { padding-top: calc(var(--header-height) + var(--sp-lg)); } }
.prod-hero__text { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.prod-hero__visual { grid-column: 1 / -1; align-self: center; }
@media (min-width: 900px) { .prod-hero__text { grid-column: span 3; padding-right: 32px; } .prod-hero__visual { grid-column: 4 / span 3; } }
@media (min-width: 1440px) { .prod-hero__text { grid-column: span 5; } .prod-hero__visual { grid-column: 6 / span 5; } }
@media (max-width: 899px) { .prod-hero__visual { margin-top: var(--sp-md); } }
.prod-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--gray-450); }
.prod-hero__eyebrow svg { color: #0061ec; }
.prod-hero__title { font-size: clamp(40px, 2.8vw + 12px, 52px); text-wrap: balance; }
.prod-hero__lead { max-width: 46ch; }
.prod-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.prod-hero__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--gray-450); }
.prod-hero__notes li { display: inline-flex; align-items: center; gap: 6px; }
.prod-hero__visual .pv { aspect-ratio: 5 / 4; }

.bento { padding: var(--sp-xl) 0; }
.bento--gray { --bg: var(--ivory); }
.bento__head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
@media (min-width: 1440px) { .bento__head { grid-column: 2 / span 8; } }
.bento__head .sfeat__desc { max-width: 52ch; }
.bento__grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: var(--sp-lg); }
@media (min-width: 768px) { .bento__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .tile--2 { grid-column: span 2; } .tile--3 { grid-column: span 3; } .tile--6 { grid-column: span 6; } }
.tile { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 380px; padding: 40px 32px 0; border-radius: 4px; background: #f2f1f0; text-align: center; overflow: hidden; }
.tile h3 { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.tile p { max-width: 44ch; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.tile__visual { margin-top: auto; padding-top: 28px; }
.tile--2 h3 { font-size: 20px; }
.tm--mini { position: relative; inset: auto; width: 100%; max-width: 420px; margin: 0 auto; font-size: 9.5px; background: #fff; border: 1px solid var(--tm-border); border-radius: 0.8em 0.8em 0 0; border-bottom: 0; box-shadow: 0 20px 50px rgba(0,0,0,0.10); text-align: left; }
.tm--mini .tm__view { position: relative; inset: auto; padding: 1.5em 1.6em; gap: 0.8em; }
.tm--mini-wide { max-width: 720px; }
.tile--wide .tile__visual { padding-top: 24px; }
.tm__chips { display: flex; flex-wrap: wrap; gap: 0.5em; }
.tm__chips .tm__chip { font-size: 0.95em; padding: 0.35em 0.9em; }
.tm--mini .tm__val2 { opacity: 1; }
.tile__steps { list-style: none; margin: 0 auto; padding: 0 0 32px; max-width: 900px; display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; }
@media (min-width: 768px) { .tile__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile__steps li { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fff; border: 1px solid var(--gray-200); border-radius: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.tile__steps b { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--ivory); font-size: 12px; font-weight: 500; }
.tile__steps strong { display: block; font-weight: 500; color: var(--ink); font-size: 14px; margin-bottom: 4px; }

.tile--dark { background: #0b0b1a; color: var(--ivory); text-align: left; padding: 0; min-height: 0; gap: 0; }
.tile--dark p { color: var(--gray-300); margin: 0; max-width: none; }
.tile__visual--aurora { position: relative; order: -1; margin: 0; padding: 36px 32px 0; height: 300px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; container-type: inline-size; }
.tile__visual--aurora > .pv__aurora { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; filter: blur(26px); }
.pv--bare { aspect-ratio: auto; height: auto; background: transparent; border: 0; overflow: visible; display: block; width: 88%; max-width: 560px; container-type: inline-size; }
.pv--bare > .pv__aurora { display: none; }
.pv--bare .tm--card { width: 100%; max-width: none; font-size: clamp(6.5px, 1.9cqw, 11px); }
.pv--bare .pv__eco { position: relative; height: 240px; }
.tile__body { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px 36px; }
.tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: rgba(250,250,249,0.1); color: var(--ivory); margin-bottom: 6px; }
.tile--security { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; min-height: 0; background: var(--ink); color: var(--ivory); text-align: left; }
@media (min-width: 900px) { .tile--security { grid-template-columns: 1fr 1fr; align-items: center; padding: 48px 56px; } }
.tile--security .tile__body { padding: 0; gap: 12px; }
.tile--security p { color: var(--gray-300); margin: 0; max-width: 48ch; }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 110px)); gap: 10px; justify-content: center; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 14px; border-radius: 6px; background: rgba(250,250,249,0.06); border: 1px solid rgba(250,250,249,0.08); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-align: center; color: var(--gray-300); }
.badge .policy__badge { width: 48px; height: 48px; margin: 0; }
.badge svg { width: 48px; height: 48px; color: var(--ivory); }
.tile__bullets { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 14px; line-height: 1.5; color: var(--gray-300); }
.tile__bullets li { display: flex; flex-direction: column; gap: 10px; }
.tile__bullets svg { color: var(--ivory); }

.testimonials { padding: var(--sp-xl) 0; }
.tcards { grid-column: 1 / -1; display: flex; gap: 16px; margin-top: var(--sp-lg); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.tcards::-webkit-scrollbar { display: none; }
.tcard { flex: 0 0 min(100%, 400px); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 4px; background: rgba(250,250,249,0.06); border: 1px solid rgba(250,250,249,0.08); }
.tcard__quote { flex: 1; padding: 28px; font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.tcard__foot { display: flex; align-items: center; gap: 12px; padding: 18px 28px; border-top: 1px solid rgba(250,250,249,0.08); }
.tcard__foot > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.tcard__av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ivory); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 500; font-size: 14px; }
.tcard__name { font-size: 14px; font-weight: 500; }
.tcard__role { font-size: 12px; color: var(--gray-300); line-height: 1.4; }
.tcard__logo { margin-left: auto; flex: none; }
.tcard__logo img { height: 20px; width: auto; max-width: 96px; object-fit: contain; filter: grayscale(1) invert(1) brightness(0.95); opacity: 0.85; }
.tnav { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 20px; }
.tnav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(250,250,249,0.3); background: transparent; color: var(--ivory); font-size: 16px; cursor: pointer; transition: background 0.2s var(--ease-soft); }
.tnav button:hover { background: rgba(250,250,249,0.12); }

/* ---------- Site-map rework: product / solution page components ---------- */
.nav-panel__label { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--gray-450); margin: 0; padding: 10px 14px 4px; }
.sol-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.sol-hero .eyebrow { max-width: 60ch; }
.prod-intro { padding: var(--sp-lg) 0 var(--sp-xl); }
.prod-intro__inner { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .prod-intro__inner { grid-column: 2 / span 4; } }
@media (min-width: 1440px) { .prod-intro__inner { grid-column: 2 / span 8; } }
.prod-intro .eyebrow { margin-bottom: 0; }
.prod-intro__text { font-family: var(--font-heading); font-weight: 400; font-size: clamp(20px, 1vw + 12px, 26px); line-height: 1.6; letter-spacing: -0.01em; text-wrap: pretty; }
@media (min-width: 900px) { .sfeat--reverse .sfeat__text { grid-column: 4 / span 3; order: 2; padding-right: 0; padding-left: 32px; } .sfeat--reverse .sfeat__visual { grid-column: 1 / span 3; order: 1; } }
@media (min-width: 1440px) { .sfeat--reverse .sfeat__text { grid-column: 7 / span 4; } .sfeat--reverse .sfeat__visual { grid-column: 1 / span 5; } }
.sfeat--mech { --bg: #f2f1f0; }
.sfeat__visual--flow { align-self: start; }
.flow { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
@media (min-width: 640px) { .flow { grid-template-columns: 1fr auto 1.15fr auto 1fr; } }
.flow__col { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 4px; background: var(--ivory); border: 1px solid var(--gray-200); }
.flow__col--main { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.flow__label { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--gray-450); margin-bottom: 4px; }
.flow__col--main .flow__label { color: var(--gray-300); }
.flow__node { display: block; padding: 10px 12px; border-radius: 4px; background: #fff; border: 1px solid var(--gray-200); font-size: 14px; line-height: 1.35; font-weight: 500; }
.flow__node--main { background: rgba(250,250,249,0.08); border-color: rgba(250,250,249,0.14); }
.flow__arrow { display: none; align-self: center; font-style: normal; color: var(--gray-450); font-size: 18px; }
@media (min-width: 640px) { .flow__arrow { display: block; } }
.flow__notes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.flow__notes li { display: flex; gap: 8px; align-items: flex-start; }
.flow__notes svg { flex: none; margin-top: 3px; color: #0061ec; }
.spec__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.spec__head .eyebrow { margin-bottom: 12px; }
.spec__table-wrap { grid-column: 1 / -1; overflow-x: auto; }
.spec__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; background: var(--ivory); border: 1px solid var(--gray-200); border-radius: 4px; }
.spec__table th, .spec__table td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--gray-200); }
.spec__table thead th { font-size: 13px; font-weight: 500; letter-spacing: 0.03em; color: var(--gray-450); border-top: 0; background: #f7f6f5; }
.spec__table tbody th { font-weight: 500; white-space: nowrap; width: 22%; }
.spec__table td:last-child { color: var(--ink-3); width: 28%; }
.spec__table a { text-decoration: underline; text-underline-offset: 3px; }
.bento__grid--flat { margin-top: 0; }
.tile__cta { margin-top: 24px; }
.sol-nav__head { display: flex; flex-direction: column; gap: 12px; }
.sol-nav__head .eyebrow { margin-bottom: 0; }
@media (min-width: 1024px) { .sol-nav__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sol-nav__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ba__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.ba__head .eyebrow { margin-bottom: 12px; }
.ba__list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ba__row { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 28px; background: var(--ivory); border: 1px solid var(--gray-200); border-radius: 4px; }
@media (min-width: 900px) { .ba__row { grid-template-columns: 1fr 1.2fr 1.4fr; gap: 32px; padding: 32px 36px; } }
.ba__label { display: flex; flex-direction: column; gap: 10px; }
.ba__no { font-size: 13px; color: var(--gray-450); }
.ba__label h3 { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.ba__before, .ba__after { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.ba__tag { align-self: flex-start; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: #ecebe9; color: var(--gray-700); }
.ba__tag--after { background: var(--ink); color: var(--ivory); }
.ba__after p:first-of-type { color: var(--ink); }
.ba__link { margin-top: 4px; font-size: 14px; font-weight: 500; }
.ba__link a { color: var(--ink); }
.ba__link .arrow { display: inline-block; margin-left: 6px; }
.scenes__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.scenes__head .eyebrow { margin-bottom: 12px; }
.scenes__grid { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .scenes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scene { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; border-top: 2px solid var(--ink); }
.scene__no { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--gray-450); }
.scene__title { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.scene__story { font-size: 15px; line-height: 1.7; color: var(--ink-3); flex: 1; }
.scene__tactna { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; font-weight: 500; padding-top: 14px; border-top: 1px solid var(--gray-200); }
.scene__tactna svg { flex: none; margin-top: 3px; color: #0061ec; }
@media (max-width: 767px) { .scene { padding-inline: 0; } }
.quote--case .quote__text { gap: 24px; }
.quote--case .eyebrow { margin-bottom: 0; }
.case__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case__stats li { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(250,250,249,0.2); }
.case__stats b { font-family: var(--font-heading); font-weight: 500; font-size: clamp(26px, 2.2vw, 36px); line-height: 1; letter-spacing: -0.02em; }
.case__stats span { font-size: 13px; color: var(--gray-300); line-height: 1.4; }
.quote--case .btn { align-self: flex-start; }
.faq__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.faq__head .eyebrow { margin-bottom: 12px; }
.faq__list { grid-column: 1 / -1; border-top: 1px solid var(--gray-200); }
@media (min-width: 768px) { .faq__head { grid-column: span 2; margin-bottom: 0; } .faq__list { grid-column: 3 / span 4; } }
@media (min-width: 1440px) { .faq__head { grid-column: span 3; } .faq__list { grid-column: 4 / span 7; } }
.faq__item { border-bottom: 1px solid var(--gray-200); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: var(--font-heading); font-weight: 500; font-size: 18px; line-height: 1.4; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gray-200); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.2s var(--ease-soft); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item p { padding: 0 48px 24px 0; font-size: 15px; line-height: 1.7; color: var(--ink-3); max-width: 70ch; }

/* solution / product cards */
.sol-nav__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.sol-nav__grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .sol-nav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sol-nav__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sol-nav__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sol-nav__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sol-card { display: flex; flex-direction: column; gap: 12px; min-height: 220px; padding: 28px 24px; border: 1px solid var(--gray-200); border-radius: 4px; background: var(--ivory); color: inherit; text-decoration: none; transition: border-color 0.2s var(--ease-soft), transform 0.3s var(--ease-soft); }
.sol-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.sol-card__eyebrow { font-size: 12px; letter-spacing: 0.04em; color: var(--gray-450); }
.sol-card__title { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.sol-card__desc { flex: 1; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.sol-card__link { font-size: 14px; font-weight: 500; }
@media (max-width: 767px) {
  .sol-card { min-height: 0; }
  .sol-card__desc { flex: none; }
  .sol-card__link { margin-top: 12px; }
}
.sol-card__link .arrow { display: inline-block; margin-left: 6px; transition: transform 0.2s var(--ease-soft); }
.sol-card:hover .sol-card__link .arrow { transform: translateX(4px); }

.tile--security .btn--outline { color: var(--ivory); border-color: rgba(250,250,249,0.6); }
.tile--security .btn--outline:hover { background: var(--ivory); color: var(--ink); }
.sfeat__screen { display: inline-block; margin-left: 10px; padding: 2px 8px; border: 1px solid var(--gray-200); border-radius: 99px; font-size: 12px; color: var(--ink-3); vertical-align: middle; }

/* ---------- Case-study article pages ---------- */
.case-hero { padding-top: calc(var(--header-height) + var(--sp-xl)); padding-bottom: var(--sp-lg); }
.case-hero__text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; }
.case-hero__visual { grid-column: 1 / -1; }
@media (min-width: 900px) { .case-hero__text { grid-column: span 4; padding-right: 32px; } .case-hero__visual { grid-column: 5 / span 2; } }
@media (min-width: 1440px) { .case-hero__text { grid-column: span 6; } .case-hero__visual { grid-column: 7 / span 4; } }
.case-hero .breadcrumb { margin-bottom: 0; }
.case-hero .breadcrumb a { color: inherit; }
.case-hero__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(28px, 1.8vw + 14px, 40px); line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.case-hero__sub { font-size: 18px; line-height: 1.6; color: var(--ink-3); max-width: 50ch; }
.case-hero__figures { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case-hero__figures li { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 2px solid var(--ink); }
.case-hero__figures b { font-family: var(--font-heading); font-weight: 500; font-size: clamp(30px, 2.6vw, 44px); line-height: 1; letter-spacing: -0.02em; }
.case-hero__figures span { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.case-hero__visual .quote__visual { aspect-ratio: 4 / 3; min-height: 0; }
@media (max-width: 899px) { .case-hero__visual { margin-top: var(--sp-md); } }
.case-article { --bg: var(--ivory); }
.case-facts { grid-column: 1 / -1; align-self: start; display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--gray-200); border-radius: 4px; background: #f7f6f5; }
.case-facts__logo img { height: 32px; width: auto; }
.case-facts dl { margin: 0; display: flex; flex-direction: column; }
.case-facts__row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--gray-200); }
.case-facts dt { font-size: 12px; letter-spacing: 0.04em; color: var(--gray-450); }
.case-facts dd { margin: 0; font-size: 14px; line-height: 1.55; }
.case-facts__note { font-size: 12px; color: var(--gray-450); }
.article { grid-column: 1 / -1; font-size: 16px; line-height: 1.85; }
@media (min-width: 900px) { .case-facts { grid-column: span 2; position: sticky; top: calc(var(--header-height) + 24px); } .article { grid-column: 3 / span 4; } }
@media (min-width: 1440px) { .case-facts { grid-column: span 3; } .article { grid-column: 4 / span 6; } }
.article > p { margin: 0 0 20px; color: var(--ink-3); max-width: 70ch; }
.article__lead { font-size: 18px; color: var(--ink) !important; }
.article__h2 { display: flex; align-items: baseline; gap: 14px; margin: 56px 0 20px; font-family: var(--font-heading); font-weight: 500; font-size: clamp(22px, 1.2vw + 14px, 28px); line-height: 1.35; letter-spacing: -0.01em; }
.article__no { flex: none; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--gray-450); }
.article__items { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; gap: 12px; }
.article__items li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--gray-200); border-radius: 4px; background: var(--ivory); }
.article__items b { font-weight: 500; font-size: 16px; }
.article__items span { font-size: 15px; line-height: 1.7; color: var(--ink-3); }
.article__table { width: 100%; border-collapse: collapse; margin: 8px 0 32px; font-size: 15px; line-height: 1.6; border: 1px solid var(--gray-200); }
.article__table th, .article__table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--gray-200); }
.article__table thead th { font-size: 12px; letter-spacing: 0.04em; color: var(--gray-450); font-weight: 500; background: #f7f6f5; border-top: 0; }
.article__table tbody th { font-weight: 500; width: 36%; }
.article__table td { color: var(--ink-3); }
.article__label { font-size: 12px; letter-spacing: 0.06em; color: var(--gray-450); margin: 40px 0 12px !important; }
.article__quote { margin: 0 0 20px; padding: 28px 32px; border-left: 2px solid var(--ink); background: #f7f6f5; }
.article__quote p { margin: 0 0 16px; font-family: var(--font-heading); font-weight: 400; font-size: 17px; line-height: 1.8; }
.article__quote footer { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-3); }
.article__quote footer b { font-weight: 500; color: var(--ink); font-size: 14px; }
.quote__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Top page: scroll-driven problem section ---------- */
.problem-x { position: relative; background: #0f0e0d; color: var(--ivory); }
.problem-x__track { height: auto; }   /* one screen, scrolled past like any section; js/main.js switches the chapters on a timer */
.problem-x__stage { position: relative; height: 100vh; min-height: 640px; max-height: 900px; overflow: hidden; }
.problem-x__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.problem-x__vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(15,14,13,0.92) 0%, rgba(15,14,13,0.75) 34%, rgba(15,14,13,0.05) 60%, rgba(15,14,13,0) 100%); }
.problem-x__overlay { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.problem-x__overlay .container, .problem-x__overlay .content { width: 100%; }
.problem-x__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
@media (min-width: 1024px) { .problem-x__head { grid-column: span 3; } }   /* half of the 6-column grid: the doors start at 52% of the stage (js/main.js layoutRegion), so wider copy and tabs ran into them */
@media (min-width: 1440px) { .problem-x__head { grid-column: span 4; } }
.problem-x .eyebrow { margin-bottom: 8px; }
.problem-x__num { display: flex; align-items: baseline; font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.04em; line-height: 0.9; font-size: clamp(88px, 11vw, 168px); font-variant-numeric: tabular-nums; }
.problem-x__unit { font-size: 0.42em; margin-left: 0.06em; letter-spacing: -0.02em; }
.problem-x__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(30px, 2.4vw + 10px, 48px); line-height: 1.15; letter-spacing: -0.02em; margin-top: 4px; }
.problem-x__lead { font-size: 16px; font-weight: 500; color: var(--gray-300); margin-top: 12px; max-width: 40ch; }
.problem-x__hud { position: absolute; right: 40px; bottom: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(250,250,249,0.2); border-radius: 99px; background: rgba(15,14,13,0.6); backdrop-filter: blur(8px); font-size: 12px; letter-spacing: 0.02em; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.problem-x__hud-dot { width: 6px; height: 6px; border-radius: 50%; background: #59c4ef; box-shadow: 0 0 10px #59c4ef; animation: problem-pulse 1.6s ease-in-out infinite; }
.problem-x__hud.is-warn .problem-x__hud-dot { background: #ff4d4f; box-shadow: 0 0 10px #ff4d4f; }
.problem-x__hud.is-flat .problem-x__hud-dot { background: var(--gray-450); box-shadow: none; animation: none; }
@keyframes problem-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.problem-x__ctrl { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }   /* sits where the step list used to be: the tabs are the chapter list */
.problem-x__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.problem-x__tabs button { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 0 0; border: 0; background: none; color: rgba(250,250,249,0.5); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer; transition: color 0.2s var(--ease-soft); }
.problem-x__tabs button::before, .problem-x__tabs i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; }
.problem-x__tabs button::before { background: rgba(250,250,249,0.18); }
.problem-x__tabs i { background: var(--ivory); transform: scaleX(0); transform-origin: left center; }   /* js/main.js sets scaleX to the time spent on the chapter */
.problem-x__tabs button:hover, .problem-x__tabs button:focus-visible { color: var(--gray-300); }
.problem-x__tabs button.is-active { color: var(--ivory); }
.problem-x__tab-num { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; opacity: 0.7; }
.problem-x__buttons { display: flex; align-items: center; gap: 8px; }
.problem-x__arrow, .problem-x__pause { display: inline-flex; align-items: center; justify-content: center; height: 34px; border: 1px solid rgba(250,250,249,0.24); border-radius: 99px; background: rgba(15,14,13,0.6); backdrop-filter: blur(8px); color: var(--gray-300); font: inherit; font-size: 12px; letter-spacing: 0.02em; cursor: pointer; transition: color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft); }
.problem-x__arrow { width: 34px; padding: 0; }
.problem-x__arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.problem-x__pause { gap: 8px; padding: 0 14px 0 12px; margin-left: 4px; }
.problem-x__arrow:hover, .problem-x__arrow:focus-visible, .problem-x__pause:hover, .problem-x__pause:focus-visible { color: var(--ivory); border-color: rgba(250,250,249,0.5); }
.problem-x__pause-icon { position: relative; width: 10px; height: 10px; }
.problem-x__pause-icon::before, .problem-x__pause-icon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; border-radius: 1px; }
.problem-x__pause-icon::before { left: 1px; } .problem-x__pause-icon::after { right: 1px; }
.problem-x__pause.is-paused .problem-x__pause-icon::before { left: 1px; width: 0; background: none; border-radius: 0; border-style: solid; border-color: transparent transparent transparent currentColor; border-width: 5px 0 5px 9px; }
.problem-x__pause.is-paused .problem-x__pause-icon::after { display: none; }
@media (prefers-reduced-motion: reduce) { .problem-x__pause { display: none; } }   /* no timer runs there; the tabs still switch chapters */
/* phones and tablets: the doors get their own square at the top (js/main.js layoutRegion draws there) and the copy runs under it, never on top of it */
@media (max-width: 1023px) {
  .problem-x__track { height: auto; }
  .problem-x__stage { position: relative; height: auto; min-height: 0; max-height: none; padding: calc(min(66.88vw, 400px) + 88px) 0 56px; }
  .problem-x__canvas { position: absolute; inset: 0; }
  .problem-x__vignette { display: none; }
  .problem-x__lead { min-height: 4lh; }
  .problem-x__overlay { position: relative; inset: auto; }
  .problem-x__hud { position: static; margin: 24px 28px 0; }
}
@media (prefers-reduced-motion: reduce) { .problem-x__hud-dot { animation: none; } }

.problem-x__title, .problem-x__lead, .problem-x__unit { transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft); }
.problem-x__head.is-switching .problem-x__title, .problem-x__head.is-switching .problem-x__lead, .problem-x__head.is-switching .problem-x__unit { opacity: 0; transform: translateY(6px); }
.problem-x__num { min-width: 3.2ch; }

/* number hit state: pop, glow, underline sweep */
.problem-x__num { position: relative; transform-origin: left center; margin-bottom: 6px; }
.problem-x__num.is-hit { animation: problem-hit 0.9s var(--ease-soft); }
.problem-x__num .problem-x__count, .problem-x__num .problem-x__unit { transition: color 0.5s var(--ease-soft), text-shadow 0.5s var(--ease-soft); }
.problem-x__num.is-hit .problem-x__count { text-shadow: 0 0 48px rgba(250,250,249,0.35); }
.problem-x__num.is-hit.is-warn .problem-x__count, .problem-x__num.is-hit.is-warn .problem-x__unit { color: #ff4d4f; text-shadow: 0 0 56px rgba(255,77,79,0.45); }
@keyframes problem-hit { 0% { transform: scale(1); } 30% { transform: scale(1.07); } 60% { transform: scale(0.985); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .problem-x__num.is-hit { animation: none; } }

/* ---------- Top page: features as editorial rows with drawn diagrams ---------- */
.feat-x { border-top: 1px solid var(--gray-200); }
.feat-x__head { grid-column: 1 / -1; }
.feat-x__intro { grid-column: 1 / -1; max-width: 44ch; align-self: end; }
@media (min-width: 768px) { .feat-x__intro { grid-column: 3 / span 4; margin-top: var(--sp-md); } }
@media (min-width: 1440px) { .feat-x__intro { grid-column: 7 / span 4; } }
@media (min-width: 900px) { .rl > span { white-space: nowrap; } }
.feat-x__h2 { display: flex; flex-direction: column; }
.rl { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rl > span { display: block; transform: translateY(110%); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rl:nth-child(2) > span { transition-delay: 0.12s; }
[data-reveal].is-in .rl > span { transform: none; }
.feat-x__intro { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease-soft) 0.35s, transform 0.8s var(--ease-soft) 0.35s; }
.feat-x__intro.is-in { opacity: 1; transform: none; }
.feat-x__rows { grid-column: 1 / -1; margin-top: var(--sp-xl); border-top: 1px solid var(--ink); }
.feat-x__rows.feat-x__cols { margin-top: var(--sp-md); border-top: 0; }
.feat-x__row { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 48px 0; border-bottom: 1px solid var(--gray-200); opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft); }
.feat-x__row.is-in { opacity: 1; transform: none; }
@media (min-width: 900px) { .feat-x__row { grid-template-columns: 3fr 6fr 3fr; gap: 48px; padding: 64px 0; align-items: center; } }
@media (min-width: 1440px) { .feat-x__row { grid-template-columns: 3fr 6fr 3fr; gap: 64px; padding: 80px 0; } }
.feat-x__cols { display: grid; grid-template-columns: 1fr; gap: 48px; padding-top: 16px; }
@media (min-width: 768px) { .feat-x__cols { grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 16px; } }
@media (min-width: 1440px) { .feat-x__cols { gap: 48px; padding-top: 24px; } }
.feat-x__col { display: flex; flex-direction: column; gap: 20px; }
.feat-x__col .feat-x__fig { aspect-ratio: 6 / 5; margin-bottom: 8px; }
.feat-x__col .feat-x__fig svg { width: 100%; height: 100%; overflow: visible; }
.feat-x__col .feat-x__meta { gap: 12px; }
.feat-x__col .feat-x__desc p { max-width: 34ch; }
.feat-x__cols--4 { gap: 40px 24px; }
@media (min-width: 768px) { .feat-x__cols--4 { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; } }
@media (min-width: 1100px) { .feat-x__cols--4 { grid-template-columns: repeat(4, 1fr); gap: 48px 28px; } }
.feat-x__cols--4 .feat-x__col { gap: 16px; }
.feat-x__cols--4 .feat-x__meta { gap: 10px; }
.feat-x__name { font-size: 13px; font-weight: 500; color: var(--gray-450); }
.feat-x__cols--4 .feat-x__title { font-size: clamp(22px, 1.1vw + 10px, 28px); }
.feat-x__cols--4 .feat-x__desc { display: flex; flex-direction: column; gap: 14px; }
.feat-x__cols--4 .feat-x__desc p.body-1 { font-size: 15px; line-height: 1.65; max-width: none; }
.feat-x__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.feat-x__list li { position: relative; padding-left: 14px; }
.feat-x__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: #0061ec; }
.feat-x__stat { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--gray-200); }
.feat-x__stat b { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.feat-x__stat span { font-size: 12px; color: var(--gray-450); }
.feat-x__cols--4 .feat-x__more { margin-top: 2px; }
.fx-pulse { opacity: 0; transform-origin: 160px 160px; animation: fx-pulse 2.6s ease-out infinite; }
.fx-pulse--2 { animation-delay: 1.3s; }
@keyframes fx-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feat-x__col { transition: none; opacity: 1; transform: none; } .fx-pulse { animation: none; } }
.feat-x__meta { display: flex; flex-direction: column; gap: 16px; }
.feat-x__no { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--gray-450); }
.feat-x__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(24px, 1.3vw + 10px, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.feat-x__fig { margin: 0; color: var(--ink); }
.feat-x__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Homepage stories: consistent vector geometry, then a finite draw-on sequence. */
.home-art { color: #242b36; }
.home-art text { font-family: "Inter", "Noto Sans JP", sans-serif; stroke: none; }
.home-art .hf-label { font-size: 10px; font-weight: 500; fill: #58667a; letter-spacing: .07em; }
.home-art .hf-weekday { font-size: 9px; font-weight: 500; fill: #8995a6; }
.home-art .hf-day { font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.home-art .hf-caption { font-size: 11px; font-weight: 500; fill: #45546a; }
.home-art .hf-today { font-size: 10px; font-weight: 500; fill: #0061ec; }
.is-art-ready .hf-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.is-art-ready .hf-reveal { opacity: 0; }
.is-art-drawing .hf-stroke { animation: home-art-line var(--hf-duration, 900ms) cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--hf-delay, 0ms); }
.is-art-drawing .hf-reveal { animation: home-art-detail 500ms ease-out both; animation-delay: var(--hf-delay, 0ms); }
@keyframes home-art-line {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes home-art-detail {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce), print {
  .is-art-ready .hf-stroke, .is-art-ready .hf-reveal { animation: none; opacity: 1; transform: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}
.feat-x__desc p { max-width: 36ch; }
.fx-t { font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 500; fill: var(--ink); letter-spacing: 0.01em; }
.fx-s { font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 11px; fill: var(--gray-450); letter-spacing: 0.02em; }
.fx-big { font-family: var(--font-heading); font-size: 20px; font-weight: 500; fill: var(--ink); letter-spacing: -0.01em; }
.fx-tag { font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 11px; font-weight: 500; fill: #fff; }
.fx-inv { fill: var(--ivory); }
.fx-inv.fx-s { fill: rgba(250,250,249,0.7); }
.fx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur, 1.2s) cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0.2s); }
.is-in .fx-draw { stroke-dashoffset: 0; }
.fx-node, .fx-slab { opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease-soft) var(--d, 0.3s), transform 0.6s var(--ease-soft) var(--d, 0.3s); }
.is-in .fx-node, .is-in .fx-slab { opacity: 1; transform: none; }
.fx-dot { opacity: 0; transition: opacity 0.4s 1.4s; }
.is-in .fx-dot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rl > span, .feat-x__intro, .feat-x__row, .fx-node, .fx-slab, .fx-dot { transition: none; opacity: 1; transform: none; } .fx-draw { stroke-dashoffset: 0; transition: none; } }

.fx-doors { color: var(--ivory); }
.feat-x__fig use { color: currentColor; }

/* debug: ?instant disables transitions for screenshots */
html.is-instant *, html.is-instant *::before, html.is-instant *::after { transition: none !important; transition-delay: 0s !important; }

/* ---------- Rise-in reveal. [data-rise] lifts the element itself; [data-rise-stagger] lifts its children one after another.
   --d delays the whole element, --i (set by js/main.js) staggers children. ---------- */
[data-rise] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft); transition-delay: var(--d, 0s); }
[data-rise].is-in { opacity: 1; transform: none; }
[data-rise-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft); transition-delay: calc(var(--i, 0) * 0.09s + var(--d, 0s)); }
[data-rise-stagger].is-in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rise], [data-rise-stagger] > * { transition: none !important; opacity: 1 !important; transform: none !important; } }

/* Tactna UI mock: System Log / Custom Queries (after the Figma screens) */
.tm__sec { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4em; font-size: 1em; font-weight: 600; color: var(--tm-text); }
.tm__sec b { font-weight: 600; }
.tm__btn--dl { background: #fff; color: var(--tm-primary); border: 1px solid var(--tm-primary); }
.tm__btn--dl::before { content: "⤓"; margin-right: 0.4em; font-size: 0.95em; }
.tm__table--syslog .tm__tr { grid-template-columns: 1.5fr 0.5fr 3fr 1.3fr; font-size: 0.82em; padding: 0.55em 0.9em; }
.tm__table--authlog .tm__tr { grid-template-columns: 1.5fr 0.5fr 2fr 1.3fr 1.2fr; font-size: 0.82em; padding: 0.55em 0.9em; }
.tm__table--queries .tm__tr { grid-template-columns: 1.4fr 3fr auto; padding: 0.7em 1em; }
.tm__lvl { font-weight: 500; color: var(--tm-link); }
.tm__lvl--warn { color: var(--tm-warn); }
.tm__msg { color: var(--tm-link); }
.tm__qt { font-weight: 600; color: var(--tm-link); }
.tm__table--syslog .tm__tr--head, .tm__table--authlog .tm__tr--head, .tm__table--queries .tm__tr--head { font-size: 0.72em; }

.tm__table--memb .tm__tr { grid-template-columns: 2.4fr 1.2fr 1fr 1.1fr 1fr; }
.tm__table--memb4 .tm__tr { grid-template-columns: 2.4fr 1fr 1.2fr 1fr; }
.tm__who { display: inline-flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.tm__who small { font-size: 0.78em; color: var(--tm-muted); }
.tm__table--memb .tm__tr, .tm__table--memb4 .tm__tr { max-height: 5em; }

/* ---------- Product visuals: full screen base + floating key UI (stacked) ---------- */
.pv--stack { display: block; }
.pv--stack .pv__screen { position: absolute; left: 6%; top: 8%; width: 100%; height: 100%; border-radius: 0.9em 0 0 0; box-shadow: 0 30px 80px rgba(0,0,0,0.45); font-size: clamp(5.5px, 1.1cqw, 9.5px); overflow: hidden; transform: perspective(1600px) rotateY(-2deg); transform-origin: left top; }
.pv--stack .pv__screen .tm__view { position: relative; inset: auto; height: 100%; padding: 1.6em 1.8em; }
.pv--stack .pv__screen .tm__body { height: calc(100% - 2.6em); }
.pv--stack .pv__screen .tm__side { width: 20%; min-width: 0; padding: 1.2em 0.9em; }
.pv--stack .pv__screen .tm__logo img { height: 1.4em; margin-bottom: 0.8em; }
.pv--stack .pv__screen .tm__nav li { padding: 0.5em 0.7em; }
.pv--stack .pv__float { position: absolute; left: 37%; top: 52%; width: 82%; height: 60%; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.5)); }
.pv--stack .pv__float .tm--card { border-radius: 0.8em 0 0 0; }
.pv--stack .pv__float .tm--card { width: 100%; height: 100%; max-width: none; font-size: clamp(6.5px, 1.45cqw, 12px); box-shadow: none; border: 1px solid rgba(15,14,13,0.08); }
.pv--stack .pv__float .tm--card .tm__view { padding: 1.4em 1.6em; gap: 0.8em; }
.pv--stack .pv__float .tm__modal-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.15em; }
.pv--stack .pv__window { transform: translate(0, 16px); }
.pv--stack.is-inview .pv__window { transform: none; }
.tm__av--xl { width: 3em; height: 3em; font-size: 1.1em; }
.tm__team-head .tm__head-right { margin-left: auto; }
.tm__team-head .tm__av { flex: none; }
.pv--stack .tm__tr { max-height: none; }
.pv--stack .pv__float .tm__table--queries .tm__tr { grid-template-columns: 1.6fr 2.4fr auto; }
.pv--stack .pv__float .tm__table--queries .tm__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* feat-x diagrams v2 */
.fx-walker { opacity: 0; animation: fx-walk 5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.is-in .fx-walker { opacity: 1; }
.fx-walker .fx-wkey { opacity: 0; animation: fx-wkey 5s linear infinite; }
@keyframes fx-walk {
  0% { transform: translate(56px, 100px); opacity: 0; }
  6% { opacity: 1; }
  22% { transform: translate(56px, 176px); }
  38% { transform: translate(110px, 176px); }
  52% { transform: translate(110px, 176px); }
  86% { transform: translate(268px, 176px); opacity: 1; }
  100% { transform: translate(300px, 176px); opacity: 0; }
}
@keyframes fx-wkey { 0%, 44% { opacity: 0; transform: translateY(6px); } 52%, 100% { opacity: 1; transform: none; } }
.fx-q { animation: fx-queue 5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes fx-queue { 0%, 18% { transform: translateY(0); } 30%, 100% { transform: translateY(44px); } }
.fx-q--2 { animation-name: fx-queue2; }
@keyframes fx-queue2 { 0%, 18% { transform: translateY(0); opacity: 1; } 30%, 100% { transform: translateY(44px); opacity: 0; } }
.fx-akey { animation: fx-akey 5s ease-in-out infinite; }
@keyframes fx-akey { 0%, 38% { opacity: 1; } 46%, 60% { opacity: 0; } 70%, 100% { opacity: 1; } }
.fx-hand { transform-origin: 160px 160px; animation: fx-hand 4.5s linear infinite; }
@keyframes fx-hand { to { transform: rotate(360deg); } }
.feat-x__fig use[href="#logo-auth0"], .feat-x__fig use[href="#logo-cognito"] { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .fx-walker, .fx-walker .fx-wkey, .fx-q, .fx-akey, .fx-hand { animation: none; opacity: 1; } .fx-walker { transform: translate(110px, 176px); } }

/* security: 4 concrete icons */
@media (min-width: 640px) { .security__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .security__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; } }
.policy__badge--icon { width: 72px; }
@media (min-width: 1024px) { .policy__badge--icon { width: clamp(72px, 6vw, 88px); } }
.policy__badge--icon svg { overflow: visible; }

/* language toggle */
.site-nav__lang { white-space: nowrap; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--gray-500); padding: 6px 10px; margin-right: 4px; border-radius: 6px; transition: var(--t-colors); }
.site-nav__lang:hover { color: var(--ink); background: var(--gray-100); }
.theme-dark .site-nav__lang:hover, .site-header.is-dark .site-nav__lang:hover { color: var(--ivory); background: rgba(250,250,249,0.08); }
.mobile-menu__lang { font-family: "Inter", sans-serif; }
.editorial-hero__title--en { font-family: "Inter", sans-serif; letter-spacing: -0.03em; text-wrap: balance; }
html[lang="en"] { --font-heading: "Inter", sans-serif; }
html[lang="en"] .problem-x__unit { margin-left: 0.2em; }   /* "3,000 dealers", not "3,000dealers" */
.fx-walker { transform: translate(56px, 100px); }

/* ---------- Feature detail pages (features/): hero figure, problem stat + today's steps, 3-step mechanism, tables, CTA text ---------- */
.fhero__visual .pv { width: 100%; }
.fhero__visual .pv--stack .pv__float { left: 27%; width: 74%; top: 50%; }   /* keep the Add Member modal's role selects inside the frame */
/* the big number is set exactly like .problem-x__num on the top page (type, size, unit, glow); the caption sits under it */
.fprob__stat { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: var(--sp-md); font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.04em; line-height: 0.9; font-size: clamp(88px, 11vw, 168px); font-variant-numeric: tabular-nums; }
.fprob__stat b { font-weight: 500; }
.fprob__stat span { font-size: 0.42em; margin-left: 0.06em; letter-spacing: -0.02em; }
html[lang="en"] .fprob__stat span { margin-left: 0.2em; }
.fprob__stat small { flex-basis: 100%; margin-top: 16px; font-family: var(--font-sans); font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--gray-450); }
.fsteps__label { grid-column: 1 / -1; margin: var(--sp-lg) 0 12px; }
.fprob__sub { margin-top: var(--sp-md); font-size: 18px; line-height: 1.5; color: var(--gray-300); }
/* per-app burden matrix (feature 02): one row per lifecycle moment, one column per app, the total on the right */
.fmat { grid-column: 1 / -1; border-top: 1px solid rgba(250,250,249,0.18); }
.fmat__row { display: grid; grid-template-columns: 7em repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); column-gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(250,250,249,0.12); font-size: 15px; }
.fmat__row--head { padding: 10px 0; }
.fmat__head { font-size: 12px; letter-spacing: 0.06em; color: var(--gray-450); }
.fmat__when { font-weight: 500; }
.fmat__cell { display: flex; align-items: center; gap: 8px; color: var(--gray-300); }
.fmat__cell svg { width: 18px; height: 18px; flex: none; }
.fmat__total { font-weight: 500; }
.fmat__row--hit .fmat__total, .fmat__cell--hit { color: #ff4d4f; }
.fmat__cell--hit { font-weight: 500; }
/* maker-side pains (feature 02): three cards under the matrix */
.fpain { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .fpain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.fpain li { padding: 24px 24px 26px; border: 1px solid rgba(250,250,249,0.16); border-radius: 6px; background: rgba(250,250,249,0.04); }
.fpain__icon { width: 26px; height: 26px; color: var(--gray-300); margin-bottom: 18px; }
.fpain h3 { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 500; font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.fpain p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gray-300); }
@media (max-width: 767px) {
  /* Keep every per-app column available on phones; swipe horizontally to compare them. */
  .fmat { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .fmat__row {
    min-width: 760px;
    grid-template-columns: 7em repeat(3, minmax(9em, 1fr)) minmax(12em, 1.5fr);
  }
  .fmat__cell { display: flex; }
  .fmat__head:not(:first-child):not(.fmat__head--total) { display: block; }
}
/* the feature pages' problem section is dark, like the top page's problem stage */
.fprob { background: #0f0e0d; color: var(--ivory); }
.fprob .text-secondary { color: var(--gray-300); }
.fprob .fprob__stat b, .fprob .fprob__stat span { color: #ff4d4f; text-shadow: 0 0 56px rgba(255,77,79,0.45); }
.fprob .fprob__stat small { color: var(--gray-300); }
.fprob .fsteps { --fsteps-line: rgba(250,250,249,0.2); --fsteps-tile: #0f0e0d; --fsteps-tile-border: rgba(250,250,249,0.24); }
.fprob .fsteps__no { color: var(--gray-450); }
.fprob .fsteps li:last-child .fsteps__no { color: #ff4d4f; }
/* dark product-features row 02: the architecture figure on a white card */
.pv--fd { aspect-ratio: auto; min-height: 320px; padding: 12px; background: var(--ivory); border-color: var(--gray-200); }
.pv--fd > .pv__aurora { display: none; }
.product__visual:has(> .pv--fd) { container-type: inline-size; }
@container (min-width: 500px) { .pv--fd { aspect-ratio: 4 / 3; } }   /* once the diagram lies flat it fits a 4:3 frame: the same height as the other product rows; narrower, it stacks and the frame follows it */
.pv--fd .fd-card { position: relative; z-index: 1; width: 100%; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.pv--fd .idflow { border: 0; }
.fsteps { --fsteps-gap: 20px; --fsteps-tile-size: 48px; --fsteps-line: var(--gray-300); --fsteps-tile: var(--ivory); --fsteps-tile-border: var(--gray-300); grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--fsteps-gap); }
.fsteps li { position: relative; display: grid; grid-template-columns: var(--fsteps-tile-size) 1fr; column-gap: 16px; align-items: start; font-size: 15px; line-height: 1.5; font-weight: 500; }
.fsteps__icon { grid-row: 1 / 3; width: var(--fsteps-tile-size); height: var(--fsteps-tile-size); border-radius: 50%; display: grid; place-items: center; background: var(--fsteps-tile); border: 1px solid var(--fsteps-tile-border); position: relative; z-index: 1; }
.fsteps__icon svg { width: 22px; height: 22px; }
.fsteps li:last-child .fsteps__icon { background: #ff4d4f; border-color: #ff4d4f; color: var(--ivory); }
.fsteps__no { font-size: 12px; letter-spacing: 0.06em; color: var(--gray-450); line-height: 1; margin-top: 4px; }
.fsteps__text { margin-top: 4px; }
/* the hairline runs from each tile to the next one (so it works for 4 or 5 steps) */
.fsteps li:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--fsteps-tile-size) / 2); top: var(--fsteps-tile-size); bottom: calc(-1 * var(--fsteps-gap)); width: 1px; background: var(--fsteps-line); }
/* desktop: a centred stepper. Each column centres its tile and label, and the line joins tile centre to tile centre */
@media (min-width: 900px) {
  .fsteps { --fsteps-gap: 16px; --fsteps-tile-size: 60px; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .fsteps li { grid-template-columns: 1fr; row-gap: 0; justify-items: center; text-align: center; padding: 0 8px; }
  .fsteps__icon { grid-row: auto; margin-bottom: 20px; }
  .fsteps__icon svg { width: 24px; height: 24px; }
  .fsteps__no { margin-top: 0; }
  .fsteps__text { margin-top: 8px; max-width: 16em; text-wrap: balance; }
  .fsteps li:not(:last-child)::before { left: calc(50% + var(--fsteps-tile-size) / 2 + 8px); right: calc(-50% - var(--fsteps-gap) + var(--fsteps-tile-size) / 2 + 8px); top: calc(var(--fsteps-tile-size) / 2); bottom: auto; width: auto; height: 1px; }
}
.fmech__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-lg); }
.fmech__head .eyebrow { margin-bottom: 0; }
.fmech__lead { max-width: 60ch; }
.fmech__steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .fmech__steps { grid-template-columns: repeat(3, 1fr); } }
.fmech__steps > li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px 28px; background: var(--ivory); border: 1px solid var(--gray-200); border-radius: 4px; }
.fmech__no { font-size: 13px; color: var(--gray-450); }
.fmech__actor { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 99px; color: var(--ivory); background: var(--ink); }
.fmech__actor--partner { background: #0061ec; }
.fmech__steps > li > h3 { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.fmech__steps > li > p { font-size: 15px; line-height: 1.7; color: var(--ink-3); }
.spec__table--2 tbody th { width: 26%; white-space: normal; }
.spec__table--2 td:last-child { width: auto; color: var(--ink-3); }
.spec__table--effect { table-layout: fixed; }   /* 指標 / 導入前 / 導入後 share the width evenly */
.spec__table--effect tbody th { width: 34%; white-space: normal; }
.spec__table--effect td { width: 33%; }
.spec__table--effect td:last-child { color: var(--ink); font-weight: 500; }
.feffect__case { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--gray-200); }
.feffect__case .eyebrow { margin-bottom: 0; }
.feffect__case .body-1 { max-width: 70ch; }
.sol-cta__text { max-width: 60ch; font-size: 16px; line-height: 1.7; color: var(--gray-300); }
.feat-x__more { margin-top: 12px; font-size: 14px; font-weight: 500; }
.feat-x__more a { color: var(--ink); }
.feat-x__more .arrow { display: inline-block; margin-left: 6px; transition: transform 0.2s var(--ease-soft); }
.feat-x__more a:hover .arrow { transform: translateX(4px); }
.nav-panel__label--sub { margin-top: 14px; }
/* feature page: Figma-derived screens in the hero (Members + Add Member) and the 3 mechanism steps */
.fhero__visual .pv { aspect-ratio: 5 / 4; }
@media (max-width: 899px) { .fhero__visual .pv { aspect-ratio: 4 / 3; } }
.fmech__shot { align-self: stretch; height: 260px; margin: -32px -28px 8px; padding: 24px 24px 0; border-radius: 4px 4px 0 0; background: var(--tm-bg-2, #ebeff6); border-bottom: 1px solid var(--gray-200); overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
.fmech__shot .tm--mini { font-size: 8.5px; max-width: 100%; box-shadow: 0 16px 40px rgba(15,14,13,0.10); }
.fmech__shot .tm--mini .tm__view { gap: 0.7em; }
.tm__field-row--am { display: grid; grid-template-columns: 1fr 0.32fr; gap: 0.7em; }
.tm__dd { margin-left: auto; width: 0; height: 0; border-left: 0.35em solid transparent; border-right: 0.35em solid transparent; border-top: 0.4em solid var(--tm-text); }
.tm__btn--disabled { background: #e6e8ef; color: #9aa1b4; }
.tm__btn--wide { padding: 0 2.6em; }
.tm__modal-foot--center { justify-content: center; }
.tm__ico--team { width: 2.4em; height: 2.4em; border-radius: 0.3em; }
.tm__ok { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; font-weight: 600; }
.tm__p { font-size: 0.88em !important; line-height: 1.5; margin: 0; color: var(--tm-text); }
.tm__signup-head { display: flex; flex-direction: column; align-items: center; gap: 0.35em; padding: 0.4em 0 0.6em; }
.tm__signup-head b { font-size: 1.15em; }
.tm__signup-head span { font-size: 0.9em; font-weight: 600; }
.tm__field .tm__field--plain { border: 0; padding-left: 0; min-height: 1.6em; }
.tm__eye { margin-left: auto; width: 1em; height: 0.6em; border: 1px solid #767c8c; border-radius: 50%; }
.tm__req { font-size: 0.82em; color: var(--tm-muted); }
.tm__req small { display: block; margin-bottom: 0.4em; }
.tm__req ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3em; }
.tm__req li { display: flex; align-items: center; gap: 0.5em; }
.tm--signup { max-width: 360px; }
.ftwo__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-lg); }
.ftwo__head .eyebrow { margin-bottom: 0; }
.ftwo__head h2 .nb { white-space: normal; }
@media (min-width: 900px) { .ftwo__head h2 .nb { white-space: nowrap; } }
.ftwo__lead { max-width: 60ch; }
.ftwo__grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 40px 32px; }
@media (min-width: 900px) { .ftwo__grid { grid-template-columns: repeat(2, 1fr); } }
.ftwo__col { display: flex; flex-direction: column; gap: 14px; }
.ftwo__col .body-1 { max-width: 52ch; }
.ftwo__pv { aspect-ratio: 4 / 3; }
.ftwo__pv .tm--full { position: relative; inset: auto; width: 94%; aspect-ratio: 16 / 9.6; font-size: clamp(5.5px, 1.3cqw, 11px); border-radius: 0.8em; box-shadow: 0 30px 80px rgba(0,0,0,0.45); background: var(--tm-bg); }
.ftwo__pv .tm--full .tm__chrome { padding: 0.55em 0.9em; }
.ftwo__pv .tm--full .tm__side { width: 22%; min-width: 0; padding: 1.2em 0.9em; }
.ftwo__pv .tm--full .tm__logo img { height: 1.4em; margin-bottom: 0.8em; }
.ftwo__pv .tm--full .tm__nav li { padding: 0.5em 0.7em; }
.ftwo__pv .tm--full .tm__view { padding: 1.4em 1.6em; gap: 0.8em; overflow: hidden; }
.ftwo__pv .tm--full .tm__tr { max-height: none; }
/* feature 02: diagrams (fd), TC3 actor tag, IdP choice / migration / login mocks, architecture section */
.fhero__visual--fig { display: flex; align-items: center; justify-content: center; }
@media (min-width: 900px) { .fhero__visual--fig .idflow { width: 112%; flex: none; } }   /* the frameless diagram may spill 6% past the column on each side (into the text column's padding and the page gutter) */
.fd { margin: 0; width: 100%; color: var(--ink); }
.fd svg { display: block; width: 100%; height: auto; overflow: visible; }
.fd__label { font-family: var(--font-heading); font-weight: 500; font-size: 14px; fill: var(--ink); }
.fd__label--sm { font-size: 13px; }
.fd__label--xs { font-size: 11px; }
.fd__label--inv { fill: #fff; font-family: "Inter", sans-serif; }
.fd__sub { font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 10.5px; fill: var(--gray-450); }
.fd use { color: currentColor; }
.fd use[href="#logo-auth0"], .fd use[href="#logo-cognito"] { color: var(--ink); }
.fd--hero { max-width: 560px; }
/* Shared diagram palette: site neutrals, with Tactna blue as the only accent. */
.idflow, .idarch {
  --diagram-bg: var(--ivory);
  --diagram-surface: var(--white);
  --diagram-soft: #f2f1ef;
  --diagram-line: var(--gray-200);
  --diagram-ink: var(--ink);
  --diagram-muted: var(--gray-450);
  --diagram-accent: #0061ec;
  --diagram-accent-soft: #edf3fd;
}
/* Authentication overview: HTML cards and labels, SVG portraits and paths.
   Desktop proportions follow the 1774 × 887 reference image. */
.idflow { container-type: inline-size; width: 100%; min-width: 0; margin: 0; scroll-margin-top: 88px; font-family: var(--font-sans); font-feature-settings: normal; color: var(--diagram-ink); background: var(--diagram-bg); border-radius: 8px; }
.idflow__canvas { position: relative; isolation: isolate; aspect-ratio: 2 / 1; background: none; }
.idflow__connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1;  color: var(--diagram-accent); }
.idflow h3, .idflow p { margin: 0; line-height: 1.4; }
.idflow h3 { font-size: 1.85cqw; font-weight: 500;  font-family: var(--font-heading); }
.idflow .idflow__icon { width: 3.7cqw; height: 3.7cqw; flex: none;  color: var(--diagram-ink); }
.idflow__user { position: absolute; left: 6.2%; top: 32.35%; width: 15.1%; text-align: center; }
.idflow__avatar { width: 9.25cqw; height: 9.25cqw; margin: 0 auto .55cqw; background: var(--diagram-bg); border-radius: 50%; overflow: hidden;  display: grid;  place-items: center;  border: 1px solid var(--diagram-line); }
.idflow .idflow__portrait { width: 60%; height: 60%; color: var(--diagram-accent); }
.idflow__badge { height: 3.7cqw; display: flex; align-items: center; justify-content: center; gap: .95cqw; border-radius: 4px; color: #fff; background: var(--diagram-accent); font-size: 1.75cqw; font-weight: 500; }
.idflow .idflow__key { width: 1.8cqw; height: 1.8cqw; flex: none;  color: inherit; }
.idflow__user > p { margin-top: 1.05cqw; font-size: 1.5cqw; color: var(--diagram-muted); white-space: nowrap; }
.idflow__platform { position: absolute; left: 31.4%; top: 15.1%; width: 33.94%; height: 68.35%; border: 1px solid var(--diagram-line); border-radius: 8px; background: var(--diagram-surface); box-shadow: 0 4px 16px #0f0e0d05; }
.idflow__brand { height: 11.05cqw; padding-top: 2.1cqw; text-align: center; }
.idflow__brand img { width: 16.35cqw; height: auto; margin: 0 auto; }
.idflow__brand p { margin-top: 1.02cqw; color: var(--diagram-muted); font-size: 1.58cqw; font-weight: 500; white-space: nowrap; }
.idflow__authentication { height: 20.96cqw; margin: 0 2.3cqw; padding: .95cqw 2cqw 1.9cqw; border: 1px solid var(--diagram-line); border-radius: 6px; background: var(--diagram-bg); text-align: center; }
.idflow__authentication h3 { font-size: 1.68cqw; margin-bottom: .9cqw; }
.idflow__provider { display: flex; align-items: center; justify-content: center; gap: 1.65cqw; height: 5.68cqw; background: var(--diagram-surface); border-radius: 4px; box-shadow: none; font-size: 2cqw; font-weight: 500;  border: 1px solid var(--diagram-line); }
.idflow__provider .idflow__icon { width: 3.45cqw; height: 3.45cqw; }
.idflow__or { height: 3.45cqw; display: grid; place-items: center; color: var(--diagram-muted); font-size: 1.65cqw; }
.idflow__apps { position: absolute; left: 74.85%; top: 20.6%; width: 21.87%; }
.idflow__apps > ul { display: grid; gap: 2.18cqw; }
.idflow__app { display: flex; align-items: center; gap: 2.1cqw; height: 7.62cqw; padding: 1.3cqw 2.15cqw; border: 1px solid var(--diagram-line); border-radius: 6px;  background: var(--diagram-surface); }
.idflow__app .idflow__icon { width: 4.2cqw; height: 4.2cqw; }
.idflow__app h3 { font-size: 1.9cqw; white-space: nowrap; }
.idflow__app p { margin-top: .25cqw; font-size: 1.47cqw; color: var(--diagram-muted); }
.idflow__protocol { margin-top: 3.25cqw !important; padding-right: 1.2cqw; font-size: 1.47cqw; text-align: right; color: var(--diagram-muted); }
html[lang="en"] .idflow__brand p { font-size: 1.32cqw; }
@container (max-width: 460px) {
  /* phones: a compact, roughly square stack (user row → Tactna with both providers side by side → three apps in a row) */
  .idflow__canvas { aspect-ratio: auto; padding: 20px 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .idflow__connections { display: none; }
  .idflow__user, .idflow__platform, .idflow__apps { position: relative; inset: auto; width: 100%; height: auto; }
  .idflow__user { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .idflow__avatar { width: 36px; height: 36px; margin: 0; }
  .idflow__badge { height: 28px; gap: 6px; padding: 0 12px; font-size: 13px; }
  .idflow .idflow__key { width: 14px; height: 14px; }
  .idflow__user > p { font-size: 12px; margin: 0; }
  .idflow__platform { padding: 14px 12px 12px; border-radius: 6px; }
  .idflow__platform::before, .idflow__apps::before { content: ""; position: absolute; width: 2px; height: 14px; background: var(--diagram-accent); left: calc(50% - 1px); top: -26px; }
  .idflow__platform::after, .idflow__apps::after { content: ""; position: absolute; width: 8px; height: 8px; border-right: 2px solid var(--diagram-accent); border-bottom: 2px solid var(--diagram-accent); transform: rotate(45deg); left: calc(50% - 4px); top: -17px; }
  .idflow__brand { height: auto; padding: 0; }
  .idflow__brand img { width: 104px; max-width: 60%; }
  .idflow__brand p, html[lang="en"] .idflow__brand p { font-size: 11px; white-space: normal; text-wrap: balance; margin-top: 6px; }
  .idflow__authentication { height: auto; margin: 12px 0 0; padding: 10px; border-radius: 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 6px; }
  .idflow__authentication h3 { grid-column: 1 / -1; font-size: 12px; margin-bottom: 8px; }
  .idflow__provider { height: 36px; gap: 6px; font-size: 13px; border-radius: 4px; }
  .idflow__provider .idflow__icon { width: 18px; height: 18px; }
  .idflow__or { height: auto; font-size: 11px; }
  .idflow__apps > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .idflow__app { flex-direction: column; justify-content: center; height: auto; padding: 10px 4px; gap: 6px; border-radius: 6px; text-align: center; }
  .idflow__app .idflow__icon { width: 20px; height: 20px; }
  .idflow__app h3 { font-size: 12px; }
  .idflow__app p { margin-top: 1px; font-size: 11px; }
  .idflow__protocol { display: none; }   /* each app already shows its protocol */
}
.fmech__actor--tc3 { background: var(--ivory); color: var(--ink); border: 1px solid var(--ink); }
.farch__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-md); }
.farch__head .eyebrow { margin-bottom: 0; }
.farch__body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-lg); }
@media (min-width: 900px) { .farch__body { grid-column: span 4; padding-right: 24px; } }
@media (min-width: 1440px) { .farch__body { grid-column: span 7; } }
.farch__body .body-1 { max-width: 64ch; }
.farch__future { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.7; color: var(--ink-3); max-width: 64ch; padding-top: 12px; border-top: 1px solid var(--gray-200); }
.farch__future-tag { flex: none; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--ink); color: var(--ink); margin-top: 3px; }
.farch__fig { grid-column: 1 / -1; min-width: 0; background: var(--ivory); border-radius: 8px;  border: 1px solid var(--gray-200); }
/* Architecture: selectable HTML labels and cards, vector icons and connection paths.
   Container units retain the reference's 1774 × 887 proportions on desktop. */
.idarch { scroll-margin-top: 88px; container-type: inline-size; margin: 0; color: var(--diagram-ink); font-family: var(--font-sans); font-feature-settings: normal; }
.idarch__canvas { position: relative; aspect-ratio: 2 / 1; isolation: isolate; }
.idarch h3, .idarch h4, .idarch h5 { margin: 0; font-family: var(--font-heading); font-weight: 500; line-height: 1.45; letter-spacing: 0; }
.idarch p { color: var(--diagram-muted); line-height: 1.45; }
.idarch__icon { flex: none; width: 3.2cqw; height: 3.2cqw; color: var(--diagram-ink); }
.idarch__connections { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;  color: var(--diagram-accent); }
.idarch__left { position: absolute; left: 2.2%; top: 8.9%; width: 27.15%; }
.idarch__employees { height: 6.05cqw; display: flex; align-items: center; gap: .9cqw; padding: 1.25cqw 1.1cqw 1.25cqw 1.5cqw; background: var(--diagram-soft); border-radius: 6px; }
.idarch__employees .idarch__icon { width: 2.65cqw; height: 2.65cqw; }
.idarch__employees h3 { font-size: 1.3cqw; white-space: nowrap; }
.idarch__employees p { font-size: 1.04cqw; margin-top: .15cqw; }
.idarch__badge { display: inline-flex; align-items: center; justify-content: center; padding: .28cqw 1cqw; border-radius: 100px; font-size: .92cqw; line-height: 1.45; color: var(--diagram-accent); background: var(--diagram-accent-soft); white-space: nowrap; }
.idarch__badge--internal { margin-left: auto; color: var(--diagram-muted); background: var(--diagram-soft); font-weight: 600; padding-inline: 1.1cqw; }
.idarch__employees::after { content: ""; position: absolute; left: 0; right: 0; top: 7.4cqw; border-top: 1px dashed var(--diagram-line); }
.idarch__partner { width: 21.15cqw; height: 28.3cqw; margin-top: 3.05cqw; padding: 2.05cqw 1.3cqw 1.4cqw; border: 1px solid var(--diagram-line); border-radius: 6px; background: var(--diagram-surface); box-shadow: none; }
.idarch__person { display: flex; align-items: flex-start; gap: 1.25cqw; }
.idarch__avatar { display: grid; place-items: center; flex: none; width: 6.45cqw; height: 6.45cqw; border-radius: 50%; background: var(--diagram-bg);  border: 1px solid var(--diagram-line); }
.idarch__avatar .idarch__icon { width: 4.3cqw; height: 4.3cqw;  color: var(--diagram-accent); }
.idarch__person h3 { font-size: 1.33cqw; margin: .7cqw 0 .3cqw; white-space: nowrap; }
.idarch__person p { font-size: 1.12cqw; white-space: nowrap; }
.idarch__person .idarch__badge { margin-top: .55cqw; }
.idarch__sources { margin-top: 2.1cqw; }
.idarch__sources > h4 { font-size: 1.3cqw; margin-bottom: .85cqw; white-space: nowrap; }
.idarch__sources > h4 span { font-size: 1.12cqw; }
.idarch__source { display: flex; align-items: center; gap: 1.25cqw; height: 5.25cqw; padding: .75cqw .95cqw; background: var(--diagram-surface); border: 1px solid var(--diagram-line); border-radius: 4px; }
.idarch__source + .idarch__source { margin-top: 1cqw; }
.idarch__source .diagram-icon--brand { padding: .28cqw; }
.idarch__source h5 { font-size: 1.16cqw; white-space: nowrap; }
.idarch__source p { font-size: 1.03cqw; margin-top: .2cqw; white-space: nowrap; }
.idarch__left-note { position: absolute; top: 39.3cqw; left: .9cqw; font-size: 1.04cqw; white-space: nowrap; }
.idarch__flow-label { position: absolute; font-size: 1.07cqw; color: var(--diagram-accent); font-weight: 500; }
.idarch__flow-label--login { left: 25.6%; top: 36.3%; }
.idarch__flow-label--auth { left: 25.6%; top: 66.1%; }
.idarch__platform { position: absolute; left: 32%; top: 6.8%; width: 36.05%; height: 86.6%; display: flex; flex-direction: column; padding: 1.3cqw; border: 1px solid var(--diagram-line); border-radius: 8px; background: var(--diagram-surface); box-shadow: 0 4px 16px #0f0e0d05;  border-top: 2px solid var(--diagram-accent); }
.idarch__brand { flex: none; height: 8.75cqw; padding-top: .45cqw; text-align: center; }
.idarch__brand img { width: 17.4cqw; height: auto; margin: 0 auto; }
.idarch__brand p { color: var(--diagram-ink); font-size: 1.28cqw; font-weight: 500; margin-top: .8cqw; white-space: nowrap; }
.idarch__management { flex: 1; min-height: 0; padding: 1.2cqw 1.3cqw .95cqw; background: var(--diagram-surface); border: 0; border-radius: 0;  border-top: 1px solid var(--diagram-line); }
.idarch__management > h3 { text-align: center; font-size: 1.35cqw; color: var(--diagram-ink); }
.idarch__features { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1cqw; row-gap: 1.35cqw; margin-top: 1.3cqw; padding: 0 .35cqw 1.5cqw; border-bottom: 1px solid var(--diagram-line); }
.idarch__feature { display: flex; align-items: center; gap: .9cqw; min-width: 0; }
.idarch__feature-icon { width: 3.4cqw; height: 3.4cqw; border-radius: 6px; display: grid; place-items: center; flex: none; background: var(--diagram-bg); }
.idarch__feature-icon .idarch__icon { width: 2.35cqw; height: 2.35cqw; }
.idarch__feature h4 { font-size: 1.13cqw; white-space: nowrap; }
.idarch__feature p { font-size: .84cqw; margin-top: .2cqw; white-space: nowrap; }
.idarch__authentication { margin-top: 1.3cqw; padding: .75cqw .9cqw .7cqw; text-align: center; background: var(--diagram-bg); border-radius: 6px; }
.idarch__authentication h4 { font-size: 1.13cqw; color: var(--diagram-ink); }
.idarch__authentication h4 span { color: var(--diagram-muted); font-weight: 400; }
.idarch__providers { display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw; margin-top: .6cqw; }
.idarch__providers li { display: flex; align-items: center; justify-content: center; gap: 1.1cqw; height: 4.4cqw; background: #fff; border: 1px solid var(--diagram-line); border-radius: 4px; font-size: 1.4cqw; font-weight: 500; }
.idarch__providers .idarch__icon { width: 2.7cqw; height: 2.7cqw; }
.idarch__authentication > p { font-size: 1.02cqw; margin-top: .8cqw; white-space: nowrap; }
.idarch__apps { position: absolute; left: 75.15%; top: 12.9%; width: 22.65%; }
.idarch__apps > h3 { margin-left: -.25cqw; margin-bottom: 1.25cqw; font-size: 1.35cqw; white-space: nowrap; }
.idarch__apps > h3 span { font-size: .98cqw; font-weight: 500; }
.idarch__apps > ul { display: grid; gap: 1.85cqw; }
.idarch__app { height: 6.3cqw; display: flex; align-items: center; gap: 2.7cqw; padding: 1cqw 2.5cqw; border: 1px solid var(--diagram-line); border-radius: 6px;  background: var(--diagram-surface); }
.idarch__app .idarch__icon { width: 3.6cqw; height: 3.6cqw; }
.idarch__app > div { display: flex; align-items: baseline; gap: .8cqw; min-width: 0; }
.idarch__app h4 { font-size: 1.4cqw; }
.idarch__app p { flex: none; font-size: 1.16cqw; margin: 0; }
@container (min-width: 1051px) {
  .idarch__apps > ul { gap: 1.2cqw; }
  .idarch__app { height: 5cqw; padding: .8cqw 1.5cqw; gap: 1.6cqw; }
  .idarch__app .idarch__icon { width: 3cqw; height: 3cqw; }
}
.idarch__apps-note { position: absolute; top: 37.3cqw; left: -1cqw; font-size: 1.04cqw; white-space: nowrap; }
@container (min-width: 1051px) { .idarch__apps-note { top: 31.5cqw; } }
/* English uses the same component with slightly tighter type for longer labels. */
html[lang="en"] .idarch__employees h3 { font-size: 1.15cqw; }
html[lang="en"] .idarch__badge { font-size: .83cqw; padding-inline: .7cqw; }
html[lang="en"] .idarch__person h3 { font-size: 1.18cqw; }
html[lang="en"] .idarch__person p { font-size: 1cqw; }
html[lang="en"] .idarch__brand p { font-size: 1.12cqw; }
html[lang="en"] .idarch__management > h3 { font-size: 1.23cqw; }
html[lang="en"] .idarch__feature h4 { font-size: 1.02cqw; }
html[lang="en"] .idarch__feature p { font-size: .8cqw; white-space: normal; }
html[lang="en"] .idarch__apps > h3 { font-size: 1.13cqw; }
html[lang="en"] .idarch__apps > h3 span { font-size: .78cqw; }
html[lang="en"] .idarch__sources > h4 span { margin-left: .25em; }
@container (min-width: 1051px) {
  html[lang="en"] .idarch__sources > h4 { font-size: 1.17cqw; }
  html[lang="en"] .idarch__sources > h4 span { font-size: .95cqw; }
}
/* Reflow the diagram in reading order when the three-column type gets too small. */
@container (max-width: 1050px) {
  /* narrow: one compact column (left side → Tactna → apps), sized like the rest of the page's figures rather than blown up */
  .idarch__canvas { aspect-ratio: auto; max-width: 560px; margin: 0 auto; padding: 18px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .idarch__connections, .idarch__flow-label { display: none; }
  .idarch__left, .idarch__platform, .idarch__apps { position: relative; inset: auto; width: 100%; height: auto; }
  .idarch__icon { width: 22px; height: 22px; }
  .idarch__employees { height: auto; gap: 10px; padding: 10px 12px; border-radius: 6px; }
  .idarch__employees .idarch__icon { width: 22px; height: 22px; }
  .idarch__employees h3, html[lang="en"] .idarch__employees h3 { font-size: 13px; white-space: normal; }
  .idarch__employees p { font-size: 11px; margin-top: 1px; }
  .idarch__badge, html[lang="en"] .idarch__badge { padding: 2px 8px; font-size: 10px; }
  .idarch__employees::after { display: none; }
  .idarch__partner { width: 100%; height: auto; margin-top: 10px; padding: 14px 12px 12px; border-radius: 6px; }
  .idarch__person { gap: 12px; align-items: center; }
  .idarch__avatar { width: 44px; height: 44px; }
  .idarch__avatar .idarch__icon { width: 28px; height: 28px; }
  .idarch__person h3, html[lang="en"] .idarch__person h3 { font-size: 14px; margin: 0 0 2px; white-space: normal; }
  .idarch__person p, html[lang="en"] .idarch__person p { font-size: 11px; white-space: normal; }
  .idarch__person p br { display: none; }
  .idarch__person .idarch__badge { margin-top: 5px; }
  .idarch__sources { margin-top: 14px; }
  .idarch__sources > h4, html[lang="en"] .idarch__sources > h4 { font-size: 12px; margin-bottom: 8px; white-space: normal; }
  .idarch__sources > h4 span, html[lang="en"] .idarch__sources > h4 span { font-size: 11px; }
  .idarch__sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  .idarch__sources > h4 { grid-column: 1 / -1; }
  .idarch__source { gap: 8px; height: auto; padding: 8px 10px; border-radius: 4px; }
  .idarch__source + .idarch__source { margin-top: 0; }
  .idarch__source .idarch__icon { width: 20px; height: 20px; }
  .idarch__source h5 { font-size: 11.5px; white-space: normal; }
  .idarch__source p { font-size: 10px; margin-top: 1px; white-space: normal; }
  .idarch__left-note, .idarch__apps-note { position: static; margin: 10px 2px 0; font-size: 11px; white-space: normal; }
  .idarch__left-note br, .idarch__apps-note br { display: none; }
  .idarch__platform { padding: 14px 12px 12px; border-radius: 6px; margin-top: 0; }
  .idarch__platform::before, .idarch__apps::before { content: ""; position: absolute; height: 14px; width: 2px; background: var(--diagram-accent); left: calc(50% - 1px); top: -26px; }
  .idarch__platform::after, .idarch__apps::after { content: ""; position: absolute; width: 8px; height: 8px; border-right: 2px solid var(--diagram-accent); border-bottom: 2px solid var(--diagram-accent); transform: rotate(45deg); left: calc(50% - 4px); top: -17px; }
  .idarch__brand { height: auto; padding: 0 0 12px; }
  .idarch__brand img { width: 120px; max-width: 60%; }
  .idarch__brand p, html[lang="en"] .idarch__brand p { font-size: 11px; margin-top: 6px; white-space: normal; text-wrap: balance; }
  .idarch__management { padding: 12px 0 0; }
  .idarch__management > h3, html[lang="en"] .idarch__management > h3 { font-size: 12.5px; text-wrap: balance; }
  .idarch__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; margin-top: 10px; padding: 0 0 12px; }
  .idarch__feature { gap: 8px; }
  .idarch__feature-icon { width: 28px; height: 28px; border-radius: 5px; }
  .idarch__feature-icon .idarch__icon { width: 18px; height: 18px; }
  .idarch__feature h4, html[lang="en"] .idarch__feature h4 { font-size: 11.5px; white-space: normal; }
  .idarch__feature p, html[lang="en"] .idarch__feature p { font-size: 9.5px; margin-top: 1px; white-space: normal; }
  .idarch__authentication { margin-top: 12px; padding: 10px; border-radius: 6px; }
  .idarch__authentication h4 { font-size: 12px; }
  .idarch__authentication h4 span { display: inline-block; font-size: 11px; }
  .idarch__providers { gap: 8px; margin-top: 8px; }
  .idarch__providers li { gap: 6px; height: 36px; border-radius: 4px; font-size: 13px; }
  .idarch__providers .idarch__icon { width: 18px; height: 18px; }
  .idarch__authentication > p { font-size: 10px; margin-top: 8px; white-space: normal; }
  .idarch__apps > h3, html[lang="en"] .idarch__apps > h3 { font-size: 13px; text-align: center; margin: 0 0 10px; white-space: normal; }
  .idarch__apps > h3 span, html[lang="en"] .idarch__apps > h3 span { display: inline-block; font-size: 10.5px; }
  .idarch__apps > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .idarch__app { height: auto; padding: 8px 10px; gap: 8px; border-radius: 6px; }
  .idarch__app > div { gap: 6px; }
  .idarch__app .idarch__icon { width: 20px; height: 20px; }
  .idarch__app h4 { font-size: 12.5px; }
  .idarch__app p { font-size: 10.5px; margin: 0; }
  .idarch__apps-note { text-align: center; }
}
@container (max-width: 540px) {
  /* phones: give the words the room; the feature icons go and the login methods put their logo on top */
  .idarch__feature-icon { display: none; }
  html[lang="ja"] .idarch__feature h4, html[lang="ja"] .idarch__feature p, html[lang="ja"] .idarch__source h5, html[lang="ja"] .idarch__source p { word-break: auto-phrase; }
  .idarch__source { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.tm__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
.tm__choice { display: flex; flex-direction: column; gap: 0.35em; padding: 1em; border: 1px solid #b6beda; border-radius: 0.5em; background: #fff; position: relative; }
.tm__choice.is-selected { border-color: var(--tm-primary); box-shadow: 0 0 0 1px var(--tm-primary); }
.tm__choice small { font-size: 0.78em; color: var(--tm-muted); }
.tm__choice-name { font-weight: 600; }
.tm__choice-logo { width: 2em; height: 2em; color: var(--tm-text); }
.tm__radio { position: absolute; right: 0.9em; top: 0.9em; width: 1em; height: 1em; border-radius: 50%; border: 1px solid #b6beda; }
.tm__radio.on { border-color: var(--tm-primary); box-shadow: inset 0 0 0 0.25em #fff, inset 0 0 0 1em var(--tm-primary); }
.tm__prog { height: 0.5em; border-radius: 99px; background: var(--tm-bg-2); overflow: hidden; }
.tm__prog span { display: block; height: 100%; background: var(--tm-ok); }
.tm__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; font-size: 0.9em; }
.tm__checklist li { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.8em; background: #fff; border: 1px solid var(--tm-border); border-radius: 0.4em; }
.tm__checklist li b { margin-left: auto; font-weight: 600; }
.tm__sep { display: flex; align-items: center; gap: 0.8em; font-size: 0.85em; font-weight: 600; color: var(--tm-text); margin-top: 0.3em; }
.tm__sep::before, .tm__sep::after { content: ""; flex: 1; height: 1px; background: var(--tm-sep); }
.tm__btn--block { justify-content: center; width: 100%; }
.tm--login { max-width: 340px; margin-left: 0; }
.tm__applist { position: absolute; right: -5em; top: 30%; width: 58%; background: #fff; border: 1px solid var(--tm-border); border-radius: 0.6em; box-shadow: 0 16px 40px rgba(0,0,0,0.18); padding: 0.7em 0.8em; display: flex; flex-direction: column; gap: 0.5em; }
.tm__applist-head { font-size: 0.78em; color: var(--tm-muted); }
.tm__applist-row { display: flex; align-items: center; gap: 0.7em; font-size: 0.95em; font-weight: 500; }
.fmech__shot .tm--login { overflow: visible; }
/* app picker after login (feature 02, step 03): the card floats in the middle of the shot instead of rising from its bottom edge */
.tm--appselect { max-width: 300px; }
.fmech__shot .tm--appselect { margin: auto; border-radius: 0.9em; border-bottom: 1px solid var(--tm-border); box-shadow: 0 18px 44px rgba(15,14,13,0.14); }
.tm--appselect .tm__view { padding: 1.2em 1.2em 1.1em; gap: 0.9em; }
.tm__aps-user { display: flex; align-items: center; gap: 0.7em; font-size: 0.95em; color: var(--tm-muted); }
.tm__aps-user .tm__av { width: 2.2em; height: 2.2em; }
.tm__aps { display: flex; flex-direction: column; }
.tm__aps-row { display: flex; align-items: center; gap: 1.1em; height: 5em; padding: 0 0.6em; border-top: 1px solid var(--tm-border); font-size: 1.25em; font-weight: 600; color: #3d4a66; }
.tm__aps-row:first-child { border-top: 0; }
.tm__aps-icon { width: 2.6em; height: 2.6em; border-radius: 0.55em; display: grid; place-items: center; color: #fff; }
.tm__aps-icon svg { width: 1.45em; height: 1.45em; }
.tm__aps-go { margin-left: auto; font-weight: 400; color: var(--tm-muted); }
/* feature 03: clock hero figure, release note under a step, ID-state section with the delete dialog, big effect stats */
.fhero__fig { width: 100%; max-width: 460px; }
.fhero__fig .feat-x__fig svg { width: 100%; height: auto; overflow: visible; }
.fmech__note { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 10px 12px; border-radius: 4px; background: #eaf1fd; color: #0b3d91; font-size: 13px; line-height: 1.5; }
.fmech__note svg { flex: none; margin-top: 2px; }
.fstate__grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1100px) { .fstate__grid { grid-template-columns: 1.1fr 1fr; } }
.fstate__grid .spec__table-wrap { grid-column: auto; }
.spec__table--state tbody th { width: 26%; white-space: normal; }
.spec__table--state td:last-child { width: 30%; }
.fstate__screen .pv { aspect-ratio: 4 / 3; }
.tm__modal-static { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(32, 36, 47, 0.35); z-index: 3; }
.tm__modal-static .tm__modal-card { width: 64%; max-width: 420px; opacity: 1; transform: none; padding: 0; }
.tm__modal-static .tm__view { position: relative; inset: auto; padding: 1.4em 1.6em; gap: 0.8em; }
.tm__btn--danger { background: #d32f2f; }
.tm__checklist--apps li b { color: var(--tm-muted); font-weight: 500; }
.tm__table--rules .tm__tr, .tm__table--lock .tm__tr { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
/* feature pages: capabilities as an icon grid */
.fcaps__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-xl); }
.fcaps__head .eyebrow { margin-bottom: 0; }
.fcaps__grid { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 56px 48px; }
@media (min-width: 640px) { .fcaps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fcaps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 64px; } }
.fcaps__item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fcaps__ico { display: block; width: 56px; height: 56px; color: var(--ink); margin-bottom: 12px; }
.fcaps__svg { width: 100%; height: 100%; display: block; }
.fcaps__accent { color: #0061ec; }
/* The complete SVG is the default; JS opts into drawing only when supported. */
.fcaps__svg.is-draw-ready .fcaps__stroke { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; fill-opacity: 0; }
.fcaps__svg.is-drawing .fcaps__stroke {
  animation: capability-draw 800ms cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--icon-delay, 0ms) + var(--stroke-delay, 0ms));
}
@keyframes capability-draw {
  0% { stroke-dashoffset: 1; opacity: 0; fill-opacity: 0; }
  1% { opacity: 1; }
  75% { fill-opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; fill-opacity: 1; }
}
@media (prefers-reduced-motion: reduce), print {
  .fcaps__svg.is-draw-ready .fcaps__stroke { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; fill-opacity: 1; }
}
.fcaps__item h3 { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.fcaps__item p { font-size: 15px; line-height: 1.75; color: var(--gray-450); max-width: 36ch; }
@media (max-width: 767px) {
  .fcaps__head { margin-bottom: 48px; }
  .fcaps__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
  }
  .fcaps__ico { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .fcaps__item h3 { grid-column: 2; margin: 0; align-self: end; }
  .fcaps__item p { grid-column: 2; margin: 0; max-width: none; }
}
.feffect__big { grid-column: 1 / -1; list-style: none; margin: 0 0 var(--sp-lg); padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .feffect__big { grid-template-columns: 1fr 1fr; } }
.feffect__big li { display: flex; flex-direction: column; gap: 6px; padding: 28px 28px 24px; background: var(--ivory); border: 1px solid var(--gray-200); border-radius: 4px; }
.feffect__big b { font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 4.5vw, 72px); line-height: 1; letter-spacing: -0.03em; }
.feffect__big span { font-size: 14px; color: var(--gray-450); }
@media (max-width: 767px) {
  #effect .spec__head { margin-bottom: 48px; }
  #effect .feffect__big { margin-bottom: 40px; }
  #effect .feffect__case { margin-top: 40px; padding-top: 24px; }
}
/* feature 04: calendar figure labels, record types with the standard reports list */
.cal__dow { font-family: "Inter", sans-serif; font-size: 9px; font-weight: 500; fill: var(--gray-450); }
.cal__today { font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 10px; font-weight: 500; fill: #0061ec; }
.frec__reports { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.frec__reports-label { font-size: 13px; font-weight: 500; letter-spacing: 0.03em; color: var(--gray-450); margin-bottom: 12px; }
.frec__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.frec__list li { display: flex; gap: 8px; align-items: flex-start; }
.frec__list svg { flex: none; margin-top: 3px; color: #0061ec; }
.tm__table--state .tm__tr { grid-template-columns: 1.6fr 1.1fr 0.8fr 1.6fr; }
.tm__table--queries3 .tm__tr { grid-template-columns: 1.4fr 1.8fr 0.9fr auto; }
.ftwo__label { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; margin-top: 6px; }

/* company profile: offices */
.profile-offices { display: flex; flex-direction: column; gap: 10px; }
.profile-offices > span { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; align-items: baseline; }
.profile-offices b { font-weight: 500; color: var(--gray-450); }
.profile-map { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; font-size: 14px; color: var(--ink-3); text-decoration: none !important; white-space: nowrap; }
.profile-offices > span > span { display: flex; flex-direction: column; align-items: flex-start; }
.profile-map:hover { color: var(--ink); }
@media (max-width: 767px) { .profile-offices > span { grid-template-columns: 1fr; gap: 4px; align-items: start; } }

/* =========================================================
   Company page: manifesto hero / manifesto / statement
   ========================================================= */
.mhero { position: relative; min-height: 100svh; background: var(--ink); color: var(--ivory); display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--header-height); overflow: hidden; }
.mhero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,14,13,0.55) 0%, rgba(15,14,13,0) 35%, rgba(15,14,13,0) 55%, rgba(15,14,13,0.75) 100%); pointer-events: none; }
.mhero__inner { position: relative; z-index: 1; padding: var(--sp-xl) 0 var(--sp-xl); }
.mhero__body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; }
.mhero__crumb { margin-bottom: 8px; }
.mhero__crumb li { color: rgba(250,250,249,0.6); }
.mhero__title { font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(60px, 11vw, 176px); line-height: 0.94; letter-spacing: -0.05em; display: flex; flex-direction: column; }
.mhero__title .rl { padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mhero__sub { font-family: "Inter", sans-serif; font-size: clamp(17px, 1.1vw + 9px, 24px); line-height: 1.4; color: rgba(250,250,249,0.72); max-width: 36ch; letter-spacing: -0.01em; opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--ease-soft) 0.5s, transform 0.9s var(--ease-soft) 0.5s; }
.mhero__actions { display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; transition: opacity 0.9s var(--ease-soft) 0.7s; }
.mhero__body.is-in .mhero__sub, .mhero__body.is-in .mhero__actions { opacity: 1; transform: none; }
.btn--invert { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--invert:hover { background: #fff; }
.btn--outline-invert { color: var(--ivory); border-color: rgba(250,250,249,0.5); }
.btn--outline-invert:hover { border-color: var(--ivory); background: rgba(250,250,249,0.08); }
.mhero__legend { position: absolute; right: 24px; bottom: 24px; z-index: 1; display: flex; gap: 18px; font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 12px; letter-spacing: 0.04em; color: rgba(250,250,249,0.6); }
.mhero__legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg { width: 9px; height: 9px; border: 1.3px solid rgba(250,250,249,0.85); display: inline-block; }
.lg--person { border-radius: 50%; }
.lg--team { border-radius: 2.5px; }
.lg--ai { transform: rotate(45deg); width: 8px; height: 8px; }
@media (max-width: 767px) { .mhero__legend { display: none; } }

.manifesto { padding: 0; }
.manifesto__grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .manifesto__grid { grid-template-columns: 6fr 4fr; gap: 64px; } }
.manifesto__stanzas { display: flex; flex-direction: column; gap: clamp(140px, 26vh, 300px); padding: clamp(96px, 18vh, 200px) 0; }
.manifesto__stanza { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; transition: opacity 0.6s var(--ease-soft); }
@media (min-width: 900px) { .manifesto__stanza { opacity: 0.28; } .manifesto__stanza.is-active { opacity: 1; } }
.manifesto__no { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--gray-450); padding-top: 0.55em; }
.manifesto__lines { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(23px, 2.4vw + 8px, 50px); line-height: 1.4; letter-spacing: -0.02em; }
@media (max-width: 767px) { .manifesto__stanza { grid-template-columns: 1fr; gap: 10px; } .manifesto__no { padding-top: 0; } }
.manifesto__lines .rl { padding-bottom: 0.06em; margin-bottom: -0.06em; }
.manifesto__lines .rl:nth-child(2) > span { transition-delay: 0.1s; }
.manifesto__lines .rl:nth-child(3) > span { transition-delay: 0.2s; }
.manifesto__lines .rl:nth-child(4) > span { transition-delay: 0.3s; }
.manifesto__lines .rl:nth-child(5) > span { transition-delay: 0.4s; }
.manifesto__visual { display: none; }
@media (min-width: 900px) { .manifesto__visual { display: block; position: sticky; top: calc(var(--header-height) + 24px); height: calc(100vh - var(--header-height) - 48px); align-self: start; } }
.manifesto__visual canvas { width: 100%; height: 100%; display: block; }
.manifesto__close { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 28px; padding: 0 0 clamp(96px, 16vh, 180px); border-top: 1px solid var(--ink); padding-top: 40px; }
.manifesto__close-title { font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(40px, 6.5vw, 112px); line-height: 1; letter-spacing: -0.045em; }
.manifesto__close-logo { height: 28px; width: auto; align-self: flex-start; filter: none; }
@media (min-width: 900px) { .manifesto__close { flex-direction: row; align-items: flex-end; justify-content: space-between; } .manifesto__close-logo { height: 34px; margin-bottom: 0.25em; } }

.statement { position: relative; }
.statement__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.statement__bg canvas { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; filter: blur(28px); }
.statement__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,23,0.45), rgba(14,13,23,0.6)); }
.statement__inner { position: relative; z-index: 1; }
.statement__head { grid-column: 1 / -1; margin-bottom: var(--sp-xl); }
.statement__eyebrow { font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250,250,249,0.6); margin-bottom: 20px; }
.statement__title { font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(30px, 3.2vw + 6px, 64px); line-height: 1.05; letter-spacing: -0.04em; display: flex; flex-direction: column; }
.statement__title .rl { padding-bottom: 0.12em; margin-bottom: -0.12em; }
@media (max-width: 899px) { .statement__title .rl > span { white-space: normal; } }
.statement__quote { grid-column: 1 / -1; }
@media (min-width: 768px) { .statement__quote { grid-column: 2 / span 4; } }
@media (min-width: 1440px) { .statement__quote { grid-column: 4 / span 6; } }
@media (prefers-reduced-motion: reduce) { .mhero__sub, .mhero__actions { opacity: 1; transform: none; transition: none; } .manifesto__stanza { opacity: 1 !important; } }
/* capture helper */
html.is-flat .mhero { min-height: 900px; }
html.is-flat .manifesto__visual { height: 720px; top: 24px; }

/* company page: restrained sizes (previous tonality) */
.editorial-hero__sub { font-family: "Inter", sans-serif; font-size: clamp(17px, 0.9vw + 10px, 22px); line-height: 1.45; color: var(--ink-3); max-width: 44ch; margin-top: -8px; }
.editorial-hero__figure--graph { position: relative; background: var(--ink); aspect-ratio: 16 / 7; border-radius: 4px; }
.editorial-hero__figure--graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.editorial-hero__figure--graph .mhero__legend { right: 20px; bottom: 16px; }
@media (max-width: 767px) { .editorial-hero__figure--graph { aspect-ratio: 4 / 3; } }
.manifesto__stanzas { gap: clamp(72px, 12vh, 140px); padding: clamp(56px, 9vh, 112px) 0; }
.manifesto__lines { font-size: clamp(20px, 0.9vw + 14px, 28px); line-height: 1.6; letter-spacing: -0.01em; font-weight: 400; }
.manifesto__stanza { grid-template-columns: 40px 1fr; }
@media (min-width: 900px) { .manifesto__stanza { opacity: 0.45; } .manifesto__stanza.is-active { opacity: 1; } }
.manifesto__no { padding-top: 0.45em; }
@media (min-width: 900px) { .manifesto__grid { grid-template-columns: 5fr 5fr; gap: 48px; } }
.manifesto__visual { border: 1px solid var(--gray-200); border-radius: 4px; background: #fff; }
@media (min-width: 900px) { .manifesto__visual { height: min(560px, calc(100vh - var(--header-height) - 48px)); } }
.manifesto__close { padding-top: 28px; padding-bottom: clamp(56px, 9vh, 112px); border-top: 1px solid var(--gray-200); gap: 20px; }
.manifesto__close-title { font-size: clamp(28px, 2.2vw + 10px, 44px); letter-spacing: -0.03em; }
.manifesto__close-logo { height: 24px; }
@media (min-width: 900px) { .manifesto__close-logo { height: 26px; margin-bottom: 0.15em; } }
.statement__title { font-size: clamp(24px, 1.5vw + 10px, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; max-width: 30ch; }
.statement__head { margin-bottom: var(--sp-lg); }

/* company page: vision & mission */
.vm__head { grid-column: 1 / -1; margin-bottom: var(--sp-lg); }
.vm__grid { align-items: start; }
.vm__text { display: flex; flex-direction: column; }
.vm__label { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-450); margin-bottom: 12px; }
.vm__title { font-family: "Inter", sans-serif; font-weight: 500; font-size: clamp(26px, 1.2vw + 16px, 32px); line-height: 1.15; letter-spacing: -0.02em; }
/* a poem: no numbers, one ink, open lines, a blank line between stanzas. On desktop the type follows the viewport height
   (the poem and its closing line are about 28 em tall), so the whole poem is on screen at once without scrolling */
.vm { --poem: clamp(17px, 0.7vw + 13px, 20px); }
@media (min-width: 900px) { .vm { --poem: clamp(15px, calc((100vh - var(--header-height) - 300px) / 28.2), 20px); padding-top: 72px; padding-bottom: 72px; } .vm .vm__head { margin-bottom: 32px; } }
.vm__stanzas { padding: 40px 0 0; gap: 1.8em; font-size: var(--poem); }
.vm__stanzas--first { padding-top: 0; }
/* the two English statements of the page (Vision, Mission): one size, under the hero line and over the section headings */
.statement-en { font-family: "Inter", sans-serif; font-weight: 500; font-size: clamp(30px, 1.8vw + 14px, 40px) !important; line-height: 1.15; letter-spacing: -0.025em; word-break: normal !important; }
.vm__head .vm__label { margin-bottom: 10px; }
.vm__close { margin-top: 2.4em; font-size: var(--poem); }   /* the closing line follows the poem after a longer pause, with no rule */
.vm__close .vm__sign { margin-top: 10px; }
.vm__sign { margin-top: 12px; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; color: var(--gray-450); }
.vm__stanzas .manifesto__stanza { display: block; opacity: 1; }
.vm__stanzas .manifesto__lines { font-size: 1em; font-weight: 400; line-height: 1.9; letter-spacing: 0.04em; color: var(--ink); }
@media (max-width: 899px) { .vm__stanzas .manifesto__lines .rl > span { white-space: normal; } }
.vm__visual { position: relative; border: 0; background: none; }
@media (min-width: 900px) { .vm__grid { grid-template-columns: minmax(0, 4.3fr) minmax(0, 5.7fr); gap: 16px; align-items: stretch; } .vm { overflow: hidden; } .vm .vm__visual { position: relative; top: auto; height: auto; min-height: 100%; align-self: stretch; margin: -72px -14vw -72px -22%; pointer-events: none; z-index: 0; } .vm .vm__text { position: relative; z-index: 1; }   /* the canvas reaches under the poem: the membrane may brush its line ends now and then */ .vm .vm__visual canvas { position: absolute; inset: 0; } }   /* the graph fills the space beside the poem, right up to it */   /* the graph sits straight on the page: no frame, no panel, no legend (the nodes are icons) */
@media (min-width: 900px) { .vm__visual { height: min(520px, calc(100vh - var(--header-height) - 48px)); } }
.vm__legend { color: var(--gray-450); }
.vm__legend .lg { border-color: var(--ink-3); }
/* vision, glass look: a pale blue field with drifting glass bubbles and a glass membrane around the graph (WebGL, #vision-glass),
   the icons on white discs over it (2D, #manifesto-graph). Without WebGL the field is a CSS gradient and the membrane the 2D hull */
.vm--glass { position: relative; isolation: isolate; overflow: hidden;
  background: var(--ivory); }
.vm__glass { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none; }
.vm--glass .container { position: relative; z-index: 1; }
.vm--glass .vm__label { color: var(--gray-450); letter-spacing: 0.28em; }
.vm--glass .vm__head .vm__label { margin-bottom: 20px; }
.vm__title-xl { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(48px, 5.4vw + 8px, 104px) !important; line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); }   /* the site heading font, all in ink */
.vm__title-xl span { display: block; }
.vm--glass .vm__stanzas .manifesto__lines { color: #141a2b; }
.vm__sig-logo { display: block; height: 1.5em; width: auto; margin-top: 0.5em; }   /* the signature is the Tactna logo */
@media (max-width: 899px) {
  /* The live graph remains an unframed background field above the vision copy. */
  .vm--glass.vm--top {
    --vm-mobile-graph-height: min(62vw, 260px);
    padding-top: calc(var(--header-height) + var(--vm-mobile-graph-height) + 32px);
  }
  .vm--glass .container { position: static; z-index: auto; }
  .vm--glass .vm__head { position: relative; z-index: 1; margin-bottom: 24px; }
  .vm--glass .vm__grid { position: relative; z-index: 1; }
  .vm--glass .vm__visual {
    display: block;
    position: absolute;
    top: calc(var(--header-height) + 8px);
    left: 50%;
    width: min(100vw, 560px);
    height: var(--vm-mobile-graph-height);
    margin: 0;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    pointer-events: none;
    z-index: 0;
  }
  .vm--glass .vm__visual canvas { width: 100%; height: 100%; display: block; }
}
/* vision as the first view of the company page: clear the fixed header, and the team photo follows it */
.vm--top { padding-top: calc(var(--header-height) + 40px); }
@media (min-width: 900px) { .vm.vm--top { padding-top: calc(var(--header-height) + 40px); padding-bottom: 56px; min-height: 100vh; --poem: clamp(14px, calc((100vh - var(--header-height) - 520px) / 22), 19px); } .vm--top .vm__visual { margin-top: calc(-48px - var(--header-height)); } }
.company-photo { padding-top: 8px; padding-bottom: var(--sp-lg); }   /* the vision fades into the page colour, so the photo needs no background of its own */
@media (min-width: 900px) { .vm--glass .vm__head { margin-bottom: 40px; } .vm--glass { --poem: clamp(15px, calc((100vh - var(--header-height) - 420px) / 26), 19px); } }   /* the larger title takes more height: the poem stays on one screen */

.vm__mission { grid-column: 1 / -1; margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid var(--gray-200); display: grid; grid-template-columns: 1fr; gap: 12px 48px; }
@media (min-width: 900px) { .vm__mission { grid-template-columns: 1fr 1fr; } .vm__mission .vm__label { grid-column: 1 / -1; } .vm__mission-desc { max-width: 52ch; } }

/* ---------- Demo-request form (contact/): headline left, question-style form right, inside the content grid ---------- */
.contact { padding-top: calc(var(--header-height) + var(--sp-xl)); padding-bottom: var(--sp-xl); }
.contact__contents { list-style: none; margin: var(--sp-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.contact__contents li { position: relative; padding-left: 18px; }
.contact__contents li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 1px; background: var(--ink); }
.cq__done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.contact__intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; margin-bottom: var(--sp-lg); }
.contact__form { grid-column: 1 / -1; }
/* own two-column split inside the content width: the form column is a little wider than the headline column */
@media (min-width: 900px) {
  .contact .content { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6vw, 120px); }
  .contact__intro { grid-column: auto; margin-bottom: 0; position: sticky; top: calc(var(--header-height) + 48px); align-self: start; }
  .contact__form { grid-column: auto; }
}
.contact__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(36px, 3vw + 12px, 64px); line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); }
html[lang="en"] .contact__title { font-size: clamp(34px, 2.4vw + 12px, 54px); }
html[lang="en"] .contact__title .nb { white-space: normal; }   /* long English lines must wrap inside the headline column */
.contact__lead { font-size: clamp(16px, 0.5vw + 13px, 20px); line-height: 1.7; color: var(--gray-450); max-width: 30em; }
.cq { display: flex; flex-direction: column; gap: 56px; }
.cq__group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cq__group legend { padding: 0; margin-bottom: 20px; font-family: var(--font-heading); font-weight: 500; font-size: clamp(18px, 0.6vw + 14px, 22px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.cq__group legend span { color: var(--gray-450); font-weight: 400; margin-left: 6px; }
.cq__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cq__box { grid-column: 1 / -1; width: 100%; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: #f2f1f0; border: 1px solid var(--gray-200); border-radius: 10px; padding: 19px 22px; transition: border-color 0.2s var(--ease-soft), background 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft); }
@media (min-width: 560px) { .cq__box--half { grid-column: auto; } }
.cq__box::placeholder { color: #8f8b85; }
.cq__box:hover { border-color: #c9c6c1; }
.cq__box:focus { outline: none; background: #fff; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15,14,13,0.08); }
.cq__box--area { resize: vertical; min-height: 200px; line-height: 1.7; }
.cq.is-validated .cq__box:invalid { border-color: #d32f2f; background: #fdf3f3; }
.cq__choices { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .cq__choices--4 { grid-template-columns: repeat(4, 1fr); } }
.cq__choice { position: relative; display: block; cursor: pointer; }
.cq__choice--wide { grid-column: 1 / -1; }
.cq__choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.cq__choice span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 14px 16px; white-space: nowrap; background: #ebe9e7; border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); text-align: center; transition: background 0.2s var(--ease-soft), color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft); user-select: none; }
.cq__choice--left span { justify-content: flex-start; text-align: left; white-space: normal; }
.cq__choice span i { font-style: normal; font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: 0.06em; color: var(--gray-450); }
.cq__choice:hover span { background: #e2dfdc; }
.cq__choice input:checked + span { background: var(--ink); color: var(--ivory); }
.cq__choice input:checked + span i { color: var(--gray-300); }
.cq__choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(15,14,13,0.18); }
@media (max-width: 767px) { .cq__choice { display: flex; } .cq__choice span { flex: 1; } }
.cq__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); cursor: pointer; margin-top: -16px; }
.cq__consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.cq__consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cq.is-validated .cq__consent input:invalid { outline: 2px solid #d32f2f; outline-offset: 1px; }
.cq__submit { width: 100%; min-height: 72px; margin-top: -24px; background: var(--ink); color: var(--ivory); border: 0; border-radius: 10px; font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; transition: background 0.2s var(--ease-soft), transform 0.2s var(--ease-soft); }
.cq__submit:hover { background: #2a2826; }
.cq__submit:active { transform: scale(0.995); }
.cq__submit:disabled { opacity: 0.55; cursor: wait; }
.cq__error { font-size: 14px; color: #d32f2f; margin-top: -36px; }
.cq__note { font-size: 13px; color: var(--gray-450); margin-top: -40px; text-align: center; }
.cq[hidden], .cq__done[hidden] { display: none; }
.cq__done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 48px; background: #f2f1f0; border-radius: 10px; }
.cq__done-mark { width: 56px; height: 56px; color: #0061ec; }
.cq__done-mark svg { width: 100%; height: 100%; }
.cq__done-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(28px, 2vw + 12px, 40px); letter-spacing: -0.02em; color: var(--ink); }

/* ---------- Careers (careers/): recruiting page and position pages. Reuses the company-page parts (editorial hero, stats band,
   pull quote, head-left / body-right splits, timeline, definition table) and the contact form; the parts below are new. ---------- */
.editorial-hero .breadcrumb a, .job-hero .breadcrumb a { color: inherit; }
.editorial-hero .breadcrumb a:hover { color: var(--ink); }
.editorial-hero__sub--jp { font-family: var(--font-sans); font-size: clamp(16px, 0.5vw + 13px, 20px); line-height: 1.75; max-width: 40em; margin-top: 0; }
#about, #message, #mission, #workstyle, #members, #positions, #terms, #process, #apply { scroll-margin-top: calc(var(--nav-height) - 8px); }
/* head left / body right */
.csplit__head { grid-column: 1 / -1; margin-bottom: var(--sp-md); }
.csplit__body { grid-column: 1 / -1; }
@media (min-width: 768px) { .csplit__head { grid-column: span 3; margin-bottom: 0; padding-right: 32px; } .csplit__body { grid-column: 4 / span 3; } }
@media (min-width: 1440px) { .csplit__head { grid-column: span 5; } .csplit__body { grid-column: 6 / span 5; } }
.cprose { display: flex; flex-direction: column; gap: 22px; font-size: 17px; line-height: 1.9; color: var(--fg-secondary); }
.cprose p { max-width: 38em; text-wrap: pretty; }
.cprose p:first-child { font-size: clamp(20px, 0.6vw + 16px, 24px); line-height: 1.6; color: var(--fg); font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.01em; }
.cprose__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 10px; }
.clink { display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; color: var(--fg); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
/* CEO message: a pulled first line, then the rest of the letter */
.cmessage { gap: 28px; }
.cmessage__label { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: rgba(250,250,249,0.62); }
.cmessage__quote { text-indent: -0.5em; margin-bottom: 8px; }
.cmessage__p { font-size: 17px; line-height: 1.95; color: rgba(250,250,249,0.82); max-width: 40em; }
.cmessage .pullquote__by { margin-top: 12px; }
/* mission: one large line, the explanation beside it */
.cmission { grid-column: 1 / -1; margin-bottom: var(--sp-md); }
.cmission__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(34px, 3.4vw + 10px, 68px); line-height: 1.22; letter-spacing: -0.03em; }
.cmission__body { grid-column: 1 / -1; }
.cmission__body.cprose p:first-child { font-size: 17px; line-height: 1.9; font-family: var(--font-sans); font-weight: 400; color: var(--fg-secondary); letter-spacing: 0; }
@media (min-width: 900px) { .cmission { grid-column: span 3; margin-bottom: 0; padding-right: 32px; } .cmission__body { grid-column: 4 / span 3; align-self: end; padding-bottom: 0.5em; } }
@media (min-width: 1440px) { .cmission { grid-column: span 6; } .cmission__body { grid-column: 7 / span 4; } }
/* work style: three ruled columns */
.cwork { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: var(--sp-md) 16px; }
@media (min-width: 900px) { .cwork { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cwork__col { border-top: 2px solid var(--ink); padding-top: 24px; }
.cwork__title { font-family: var(--font-heading); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 12px; }
.cwork__col li { padding: 14px 0; border-bottom: 1px solid var(--gray-300); font-size: 16px; line-height: 1.6; color: var(--ink-3); padding-right: 24px; }
.cwork__col li:last-child { border-bottom: 0; }
/* members: landscape portraits, monogram until the photo is in place */
.cmembers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-md) 16px; }
@media (min-width: 768px) { .cmembers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cmembers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cmember__photo { position: relative; aspect-ratio: 7 / 4; border-radius: 4px; overflow: hidden; background: #ecebe9; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cmember__photo span { font-family: "Inter", sans-serif; font-weight: 500; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; color: var(--gray-500); }
.cmember__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-soft); }
.cmember:hover .cmember__photo img { transform: scale(1.03); }
.cmember__name { font-family: "Inter", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.cmember__role { font-size: 14px; color: var(--gray-450); margin-top: 2px; }
/* open positions: grouped, full-width rows */
.jobs__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: var(--sp-lg); }
.jobs__count { font-size: 16px; color: var(--fg-muted); white-space: nowrap; }
.jobs__count b { font-family: "Inter", sans-serif; font-weight: 500; font-size: 22px; color: var(--fg); margin-right: 4px; }
.jobs { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-lg); }
.jobs__dept { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--fg-muted); padding-bottom: 14px; }
.jobs__dept span { font-family: "Inter", sans-serif; font-size: 12px; min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 11px; }
.jobs__list { border-top: 1px solid var(--fg); }
.jobs__row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 28px 0; border-bottom: 1px solid var(--border); transition: padding 0.4s var(--ease-soft), background-color 0.3s var(--ease-soft); }
.jobs__name { grid-column: 1; font-family: var(--font-heading); font-weight: 500; font-size: clamp(22px, 1.2vw + 14px, 30px); line-height: 1.3; letter-spacing: -0.015em; }
.jobs__line { grid-column: 1; font-size: 15px; line-height: 1.7; color: var(--fg-secondary); max-width: 46em; }
.jobs__tags { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jobs__tags i, .job-hero__tags li { font-style: normal; font-size: 13px; line-height: 1; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg-secondary); }
.jobs__go { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), transform 0.4s var(--ease-soft); }
.jobs__row:hover .jobs__go { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translateX(4px); }
@media (min-width: 1024px) {
  .jobs__row { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto auto; align-items: center; gap: 8px 32px; padding: 32px 0; }
  .jobs__row:hover { padding-left: 12px; }
  .jobs__name { grid-column: 1; } .jobs__line { grid-column: 2; grid-row: 1; } .jobs__tags { grid-column: 3; grid-row: 1; margin-top: 0; flex-wrap: nowrap; } .jobs__go { grid-column: 4; grid-row: 1; }
}
.jobs__note { grid-column: 1 / -1; margin-top: var(--sp-md); font-size: 15px; line-height: 1.7; color: var(--fg-muted); max-width: 44em; }
/* terms + process */
.cterms > div { grid-template-columns: 140px 1fr; line-height: 1.8; }
.cterms dd { color: var(--ink-3); }
@media (max-width: 767px) { .cterms > div { grid-template-columns: 1fr; gap: 4px; } }
.cprocess__head { display: flex; flex-direction: column; gap: 20px; }
.cprocess__head p { line-height: 1.8; max-width: 34em; }
.cprocess .timeline__year { font-family: "Inter", sans-serif; font-size: 15px; letter-spacing: 0.06em; color: var(--gray-450); padding-top: 5px; }
.cprocess li { grid-template-columns: 56px 1fr; }
.cprocess .timeline__desc { line-height: 1.8; }
@media (max-width: 767px) { .cprocess li { grid-template-columns: 40px 1fr; gap: 12px; } }
/* application form inside the page (the contact layout without the header offset) */
.capply { padding-top: var(--sp-xl); }
.capply .contact__title { font-size: clamp(32px, 2.2vw + 12px, 52px); }
.capply__docs { font-size: 14px; line-height: 1.7; color: var(--gray-450); padding-top: 20px; border-top: 1px solid var(--gray-200); max-width: 30em; }
.capply__docs a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cq__choice input:disabled + span { opacity: 0.4; cursor: not-allowed; }
/* position page */
.job-hero { padding-bottom: var(--sp-lg); border-bottom: 1px solid var(--gray-200); }
.job-hero__title { font-size: clamp(32px, 2.4vw + 14px, 52px); }
.job-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
.job-article .case-facts .btn { width: 100%; }
.job-article .case-facts dl > :first-child { border-top: 0; padding-top: 0; }
.job-article .case-facts__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article__list { list-style: none; margin: 4px 0 28px; padding: 0; border-top: 1px solid var(--gray-200); max-width: 70ch; }
.article__list li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--gray-200); color: var(--ink-3); line-height: 1.75; }
.article__list li::before { content: ""; position: absolute; left: 4px; top: 1.62em; width: 8px; height: 1px; background: var(--ink); }
.cstack { list-style: none; margin: 4px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cstack li { font-family: "Inter", sans-serif; font-size: 14px; line-height: 1; padding: 9px 13px; border: 1px solid var(--gray-200); border-radius: 999px; background: #f7f6f5; color: var(--ink-3); }
.ccta__lead { color: var(--gray-500); } .ccta__lead strong { color: var(--ivory); }
.ccta__note { margin-top: 20px; max-width: 56ch; font-size: 13px; line-height: 1.6; color: var(--gray-450); }

/* =========================================================
   Blog (blog/, en/blog/) — list, post, rich-editor body
   ========================================================= */
.blog-hero { padding-bottom: var(--sp-lg); }
.blog-hero__lead { max-width: 46ch; line-height: 1.6; }
.blog-list { padding-bottom: var(--sp-xl); }
.blog-empty { padding: var(--sp-lg) 0; border-top: 1px solid var(--gray-200); color: var(--gray-450); }
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-md); }
.blog-filter button { height: 36px; padding: 0 16px; border: 1px solid var(--gray-200); border-radius: 999px; background: transparent; font: inherit; font-size: 14px; color: var(--ink-3); cursor: pointer; transition: var(--t-colors); }
.blog-filter button:hover { border-color: var(--ink); }
.blog-filter button.is-active { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.post-grid { display: grid; grid-template-columns: 1fr; gap: 48px var(--grid-gap); }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 24px; } }
.post-card { display: flex; flex-direction: column; gap: 18px; color: inherit; text-decoration: none; }
.post-card[hidden] { display: none; }
.post-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #ecebe9; }
.post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-soft); }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__media--plain { display: flex; align-items: flex-end; padding: 20px; background: linear-gradient(135deg, #171a38 0%, #2b2f6b 55%, #4a5bb8 100%); color: rgba(250,250,249,0.86); font-size: 14px; }
.post-card__text { display: flex; flex-direction: column; gap: 10px; }
.post-card__meta { display: flex; gap: 12px; font-size: 13px; color: var(--gray-450); }
.post-card__meta time { font-family: "Inter", sans-serif; }
.post-card__title { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.post-card:hover .post-card__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-card__desc { font-size: 14px; line-height: 1.7; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1024px) {
  .post-grid:not(.is-filtered) > .post-card--lead { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid var(--gray-200); }
  .post-grid:not(.is-filtered) > .post-card--lead .post-card__media { flex: 0 0 58%; }
  .post-grid:not(.is-filtered) > .post-card--lead .post-card__text { gap: 16px; }
  .post-grid:not(.is-filtered) > .post-card--lead .post-card__title { font-size: clamp(26px, 1.4vw + 12px, 34px); line-height: 1.35; }
  .post-grid:not(.is-filtered) > .post-card--lead .post-card__desc { font-size: 16px; }
}
.blog-related .sol-nav__head { margin-bottom: var(--sp-lg); }

.post-hero { padding-top: calc(var(--header-height) + var(--sp-lg)); padding-bottom: var(--sp-lg); }
.post-hero__text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) { .post-hero__text { grid-column: span 5; } }
@media (min-width: 1440px) { .post-hero__text { grid-column: span 8; } }
.post-hero .breadcrumb { margin-bottom: 0; }
.post-hero .breadcrumb a { color: inherit; }
.post-hero__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(28px, 2vw + 14px, 44px); line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.post-hero__desc { font-size: 18px; line-height: 1.7; color: var(--ink-3); max-width: 60ch; }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--gray-450); }
.post-hero__figure { grid-column: 1 / -1; margin: var(--sp-md) 0 0; overflow: hidden; border-radius: 4px; background: #ecebe9; }
.post-hero__figure img { display: block; width: 100%; height: auto; }   /* no crop: many eyecatches are diagrams */
.post { padding-bottom: var(--sp-xl); }
.post-aside { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 28px; margin-bottom: var(--sp-md); }
.post-aside__label { font-size: 12px; letter-spacing: 0.06em; color: var(--gray-450); margin-bottom: 12px; }
.post-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--gray-200); }
.post-toc li { border-bottom: 1px solid var(--gray-200); }
.post-toc a { display: block; padding: 11px 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-decoration: none; }
.post-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.post-author__row { display: flex; align-items: center; gap: 12px; }
.post-author__photo { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ivory); font-size: 16px; }
.post-author__photo img { width: 100%; height: 100%; object-fit: cover; }
.post-author__name { display: block; font-size: 14px; font-weight: 500; }
.post-author__role { display: block; font-size: 13px; color: var(--gray-450); }
.post-aside__back { font-size: 14px; font-weight: 500; color: inherit; text-decoration: none; }
.post-aside__arrow { display: inline-block; margin-right: 6px; transition: transform 0.2s var(--ease-soft); }
.post-aside__back:hover .post-aside__arrow { transform: translateX(-4px); }
@media (min-width: 900px) {
  .post-aside { grid-column: span 2; align-self: start; position: sticky; top: calc(var(--header-height) + 24px); margin-bottom: 0; padding-right: 24px; }
  .post .post-body { grid-column: 3 / span 4; }
}
@media (min-width: 1440px) { .post-aside { grid-column: span 3; padding-right: 48px; } .post .post-body { grid-column: 4 / span 6; } }
.post-preview-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; margin: 0; padding: 12px var(--gutter); background: var(--ink); color: var(--ivory); font-size: 14px; text-align: center; }

/* rich-editor output */
.post-body { font-size: 17px; line-height: 1.95; }
.post-body > * { max-width: 70ch; }
.post-body > p { margin: 0 0 24px; color: var(--ink-3); }
.post-body > p:first-child { font-size: 19px; color: var(--ink); }
.post-body h2 { margin: 64px 0 20px; padding-top: 20px; border-top: 1px solid var(--ink); font-family: var(--font-heading); font-weight: 500; font-size: clamp(22px, 1.2vw + 14px, 28px); line-height: 1.4; letter-spacing: -0.01em; scroll-margin-top: calc(var(--header-height) + 24px); }
.post-body h3 { margin: 40px 0 14px; font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.5; scroll-margin-top: calc(var(--header-height) + 24px); }
.post-body h4 { margin: 32px 0 12px; font-weight: 500; font-size: 17px; }
.post-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body strong, .post-body b { font-weight: 600; color: var(--ink); }
.post-body ul, .post-body ol { margin: 0 0 28px; padding-left: 1.4em; color: var(--ink-3); }
.post-body ul { list-style: disc; } .post-body ol { list-style: decimal; }
.post-body li { margin: 6px 0; padding-left: 4px; }
.post-body li::marker { color: var(--gray-450); }
.post-body blockquote { margin: 32px 0; padding: 24px 28px; border-left: 2px solid var(--ink); background: #f7f6f5; }
.post-body blockquote p { margin: 0; font-family: var(--font-heading); font-size: 18px; line-height: 1.8; color: var(--ink); }
.post-body img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.post-body figure { margin: 36px 0; max-width: none; }
.post-body figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--gray-450); }
.post-body hr { margin: 48px 0; border: 0; border-top: 1px solid var(--gray-200); }
.post-body code { padding: 2px 6px; border-radius: 3px; background: #efeeec; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; }
.post-body pre { margin: 28px 0; padding: 20px 24px; border-radius: 4px; background: var(--ink); color: var(--ivory); overflow-x: auto; font-size: 14px; line-height: 1.7; }
.post-body pre code { padding: 0; background: none; font-size: inherit; }
.post-body iframe { max-width: 100%; }
.post-table { max-width: none; margin: 28px 0 32px; overflow-x: auto; }
.post-table table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; line-height: 1.6; border: 1px solid var(--gray-200); }
.post-table th, .post-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--gray-200); }
.post-table thead th { font-size: 12px; letter-spacing: 0.04em; color: var(--gray-450); font-weight: 500; background: #f7f6f5; border-top: 0; }
.post-table td { color: var(--ink-3); }

/* company page type scale: 51 (hero) / 48 (figures) / 32 (section headings, mission, closing line) / 24 (card titles) / 20 (lead, poem, names) / 16 (body) / 14 (labels) */
@media (max-width: 767px) {
  .careers-hero__title { font-size: clamp(27px, 7vw, 32px); line-height: 1.25; text-wrap: wrap; }
  .cprose__links .arrow { margin-left: 6px; opacity: 1; }
  .values__card { padding: 24px 0; }
  .values__icon { margin-bottom: 20px; }
  .values__title { font-size: 20px; }
}
@media (min-width: 376px) and (max-width: 767px) { .careers-hero__title .nb { white-space: nowrap; } }

/* ---------- Policies and terms (legal/): title, a short list of the three documents, then the text in one reading column ---------- */
.legal { padding-top: calc(var(--header-height) + var(--sp-lg)); padding-bottom: var(--sp-xl); }
.legal__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; margin-bottom: var(--sp-lg); }
.legal__head .breadcrumb a { color: inherit; }
.legal__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(32px, 2.2vw + 14px, 48px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.legal__nav { grid-column: 1 / -1; margin-bottom: var(--sp-md); }
.legal__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.legal__nav a { color: var(--gray-450); }
.legal__nav a:hover, .legal__nav a[aria-current] { color: var(--ink); }
.legal__nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.legal__body { grid-column: 1 / -1; max-width: 760px; font-size: 15.5px; line-height: 1.9; color: var(--ink-3); }
@media (min-width: 900px) {
  .legal .content { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 64px; }
  .legal__nav { grid-column: 1; margin: 0; position: sticky; top: calc(var(--header-height) + 32px); align-self: start; }
  .legal__nav ul { flex-direction: column; gap: 12px; }
  .legal__body { grid-column: 2; }
}
.legal__body h2 { margin: 56px 0 16px; font-family: var(--font-heading); font-weight: 500; font-size: clamp(20px, 0.8vw + 14px, 24px); line-height: 1.4; color: var(--ink); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin: 0 0 16px; }
.legal__body .legal__article { margin: 28px 0 6px; font-weight: 500; color: var(--ink); }
.legal__body ul, .legal__body ol { margin: 0 0 20px; padding-left: 1.6em; }
.legal__body li { margin: 0 0 6px; padding-left: 0.2em; }
.legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* =========================================================
   Phones and tablets (2026-09-30)
   ========================================================= */
/* the connector arrows between the stacked diagram blocks follow the tighter gap */
@container (max-width: 460px) {
  .idflow__platform::before, .idflow__apps::before { height: 20px; top: -32px; }
}
@media (max-width: 767px) {
  /* Two side-by-side CTAs share the full content width on phones. */
  .hero__actions,
  .prod-hero__actions,
  .sol-hero__actions,
  .sol-cta__actions,
  .site-footer__cta-actions,
  .editorial-hero__actions,
  .mhero__actions,
  .quote__actions:has(> .btn:nth-child(2)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .hero__actions .btn,
  .prod-hero__actions .btn,
  .sol-hero__actions .btn,
  .sol-cta__actions .btn,
  .site-footer__cta-actions .btn,
  .editorial-hero__actions .btn,
  .mhero__actions .btn,
  .quote__actions:has(> .btn:nth-child(2)) .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 12px;
  }

  /* Case-study actions retain two equal slots, even if one link is omitted. */
  .quote--case .quote__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .quote--case .quote__actions .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 12px;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .products__lead { font-size: 30px !important; }
  html[lang="ja"] .products__lead { word-break: normal; line-break: strict; }   /* phrase wrapping leaves ragged half-empty lines at this width */
  .quote blockquote.heading-3 { font-size: 22px; line-height: 1.45; }
  .security__title { font-size: 28px; }
  .product__text h3 { margin-bottom: 16px; }
  .footer-link { font-size: 14px; }
  .site-footer__col { gap: 12px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .products__lead { font-size: 40px !important; }
  .product__text h3 { margin-bottom: 16px; }
}
/* never start a line with ー or a small kana (プライバシーポリシ／ー) */
html[lang="ja"] .site-footer, html[lang="ja"] .heading-3 { line-break: strict; }
/* nothing may push the page sideways on a phone: a phrase longer than the line (auto-phrase), a kept-together
   heading run (.nb) or a long URL breaks inside instead of running past the edge */
h1, h2, h3, .heading-1, .heading-2, .heading-3, .legal__body, .article { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .heading-2 { font-size: clamp(28px, 8vw, 36px); }
  h1 .nb, h2 .nb { white-space: normal; }

  /* Keep the Japanese homepage feature headings on one line. */
  html[lang="ja"] .feat-x__title {
    width: 100%;
    font-size: clamp(20px, 6.5vw, 24px);
    white-space: nowrap;
  }
  html[lang="ja"] .feat-x__title br { display: none; }
  .feat-x__col .feat-x__desc p { max-width: none; }
}

/* Feature-page problem sections: compact the phone layout and keep each step on one line. */
@media (max-width: 767px) {
  .fprob.section--xl { padding-block: 64px; }
  .fprob .content { row-gap: 24px; }
  .fprob .problem__head { margin-bottom: 0; }
  .fprob .fsteps__label { margin: 16px 0 0; }
  .fprob .fsteps { --fsteps-gap: 14px; }
  .fprob .fsteps li {
    grid-template-columns: var(--fsteps-tile-size) max-content minmax(0, 1fr);
    grid-template-rows: var(--fsteps-tile-size);
    column-gap: 12px;
    align-items: center;
  }
  .fprob .fsteps__icon { grid-column: 1; grid-row: 1; }
  .fprob .fsteps__no { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .fprob .fsteps__text { grid-column: 3; grid-row: 1; align-self: center; margin-top: 0; white-space: nowrap; }
}

/* contact/: the HubSpot form (rendered by HubSpot in an iframe; its own look is set in HubSpot's form style) */
.hsf { min-height: 480px; }
.hsf__status { font-size: 14px; color: var(--gray-450); }
.hsf.is-ready .hsf__status { display: none; }
.hsf .hs-form-frame { width: 100%; }
@media (max-width: 767px) { html[lang="en"] .contact__title br { display: none; } }   /* "How Tactna would run / across…" left "run" alone on a line */

/* case articles: sub-heads, figures and the comparison table carried over from the published case studies (cases/gsearch, cases/cpa) */
.article .article__h3 { font-family: var(--font-heading); font-weight: 500; font-size: 18px; line-height: 1.5; margin: 32px 0 12px; }
.article__figure { margin: 8px 0 32px; }
.article__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--gray-200); border-radius: 4px; background: #fff; }
.article__figure figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--gray-450); }
.article__figures { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 768px) { .article__figures { grid-template-columns: 1fr 1fr; } }
.article__table-wrap { overflow-x: auto; margin: 8px 0 32px; }
.article__table-wrap .article__table { margin: 0; min-width: 520px; }
.article__table--compare tbody th { width: auto; }
.article__table--compare th[scope="rowgroup"] { background: #f7f6f5; vertical-align: middle; }
.article__link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* case hero figures: a value never breaks inside (約80万人, 2/3削減); on phones the three figures stack as rows, value beside its caption */
.case-hero__figures b { white-space: nowrap; }
@media (max-width: 559px) {
  .case-hero__figures { grid-template-columns: 1fr; gap: 0; }
  .case-hero__figures li { display: grid; grid-template-columns: 7.5em 1fr; align-items: baseline; column-gap: 16px; padding: 14px 0; border-top: 1px solid var(--gray-200); }
  .case-hero__figures li:first-child { border-top: 2px solid var(--ink); }
  .case-hero__figures b { font-size: 26px; }
}
.breadcrumb li:not(:last-child) { flex: none; white-space: nowrap; }   /* the parent link stays whole when the page name is long (導入事例 / CPAエクセレントパートナーズ株式会社) */

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: flex; align-items: center; }
.notfound > .container { width: 100%; }
.notfound .heading-1 { margin-bottom: var(--sp-md); }
.notfound__lead { max-width: 640px; margin-bottom: var(--sp-md); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; }