/* ==========================================================================
   Base
   ========================================================================== */
* {
  box-sizing: border-box;
}
/* Anchor jumps stop a little below the sticky header, so a section's heading
   doesn't land flush against it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Guard against any rule below overriding [hidden]'s display:none at equal
   specificity (author rules win ties over the UA stylesheet). */
[hidden] {
  display: none !important;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: var(--color-blueprint);
  text-decoration: none;
  transition: color var(--speed-regular) var(--ease-out-quad);
}
a:hover {
  color: var(--text-1);
}
:focus-visible {
  outline: 2px solid var(--color-blueprint);
  outline-offset: 3px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2 {
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
}
h3 {
  font-weight: var(--weight-medium);
}
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
input,
textarea,
select,
button {
  font: inherit;
  letter-spacing: inherit;
}
.mono {
  font-family: var(--font-mono);
}
/* Keeps a phrase on one line so CJK headings break between phrases, not mid-word */
.keep {
  display: inline-block;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}
.section {
  padding-block: var(--section-y);
}
.section--divided {
  border-top: 1px solid var(--line-1);
}
.section--flush-top {
  padding-top: 0;
}
.section--paper {
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.section-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.section-head h2 {
  font-size: var(--fs-h2);
}
.section-head p {
  font-size: var(--fs-body);
  color: var(--text-3);
  max-width: 460px;
}
@media (min-width: 960px) {
  .section-head {
    grid-template-columns: 1fr 380px;
    align-items: end;
    gap: var(--space-16);
  }
  .section-head p {
    font-size: 16px;
  }
}

/* ==========================================================================
   Drafting-sheet background
   The Blueprint brand colour read literally: on desktop, two column rails
   run the full page at the content edges and a CAD registration crosshair
   marks where each hairline divider meets a rail. The scenes (#pain) sit on
   a faded blueprint grid, washed out toward the centre so text stays on
   clean white. Background rhythm alternates white and Paper bands
   (.section--paper: product, FAQ); sections with their own background
   (paper bands, trial, trust) simply paint over the rails.
   ========================================================================== */
@media (min-width: 960px) {
  main {
    --rail-x: calc(50% - var(--container) / 2);
    background:
      linear-gradient(var(--line-1), var(--line-1)) left var(--rail-x) top 0 / 1px 100% no-repeat,
      linear-gradient(var(--line-1), var(--line-1)) right var(--rail-x) top 0 / 1px 100% no-repeat;
  }
  .section--divided,
  .section--paper,
  .trial {
    position: relative;
  }
  .section--divided::before,
  .section--divided::after,
  .section--paper::before,
  .section--paper::after,
  .trial::before,
  .trial::after {
    content: "";
    position: absolute;
    top: -6px;
    width: 11px;
    height: 11px;
    background:
      linear-gradient(var(--text-4), var(--text-4)) center / 1px 100% no-repeat,
      linear-gradient(var(--text-4), var(--text-4)) center / 100% 1px no-repeat;
    pointer-events: none;
  }
  .section--divided::before,
  .section--paper::before,
  .trial::before {
    left: calc(50% - var(--container) / 2 - 5px);
  }
  .section--divided::after,
  .section--paper::after,
  .trial::after {
    right: calc(50% - var(--container) / 2 - 5px);
  }
}
#pain {
  background-image:
    radial-gradient(ellipse 60% 70% at 50% 45%, var(--bg-0) 35%, transparent 75%),
    linear-gradient(var(--grid-blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-blue) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}

/* ==========================================================================
   Buttons and chips
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--speed-regular) var(--ease-out-quad),
    border-color var(--speed-regular) var(--ease-out-quad), color var(--speed-regular) var(--ease-out-quad),
    transform var(--speed-quick) var(--ease-out-quad);
}
.btn:active:not(:disabled) {
  transform: scale(var(--press-scale));
}
.btn--primary {
  background: var(--color-ink);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn--secondary {
  background: var(--bg-0);
  color: var(--text-1);
  border-color: var(--line-4);
}
.btn--secondary:hover {
  border-color: var(--text-4);
  color: var(--text-1);
}
.btn--sm {
  min-height: 34px;
  padding: 0 var(--space-4);
  font-size: var(--fs-small);
}
.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  white-space: nowrap;
}
.chip--pilot {
  background: var(--accent-tint);
  color: var(--color-blueprint);
}
.chip--approval {
  background: var(--human-tint);
  color: var(--human-text);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-1);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.site-header__logo {
  height: 21px;
  width: auto;
}
.site-nav {
  display: none;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-header__contact {
  display: none;
}
.nav-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--text-1);
  cursor: pointer;
}
.mobile-nav {
  border-top: 1px solid var(--line-1);
  background: var(--bg-0);
}
.mobile-nav a {
  display: block;
  padding: var(--space-3) 0;
  font-size: 16px;
  color: var(--text-1);
  border-bottom: 1px solid var(--line-1);
}
/* the other offer's link carries its marker: dot = product, diamond = advisory */
.site-nav__switch--product::before,
.site-nav__switch--advisory::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  vertical-align: 0.15em;
}
.site-nav__switch--product::before {
  border-radius: var(--radius-pill);
  background: var(--color-blueprint);
}
.site-nav__switch--advisory::before {
  border: 1.5px solid var(--color-navy);
  transform: rotate(45deg);
}
.mobile-nav a[aria-current="page"] {
  font-weight: var(--weight-medium);
  color: var(--color-navy);
}
@media (min-width: 960px) {
  .site-nav {
    display: flex;
    gap: var(--space-6);
    margin-left: auto;
    font-size: var(--fs-small);
  }
  .site-nav a,
  .site-header__contact {
    color: var(--text-3);
  }
  .site-nav a:hover,
  .site-header__contact:hover {
    color: var(--text-1);
  }
  .site-nav a[aria-current="page"] {
    color: var(--text-1);
  }
  /* the link to the other offer, set off from this page's own links */
  .site-nav__switch {
    padding-left: var(--space-6);
    border-left: 1px solid var(--line-3);
  }
  .site-header__actions {
    gap: var(--space-6);
    font-size: var(--fs-small);
  }
  .site-header__actions::before {
    content: "";
    width: 1px;
    height: 16px;
    background: var(--line-3);
  }
  .site-header__contact {
    display: inline;
  }
  .nav-toggle,
  .mobile-nav {
    display: none !important;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__grid-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1120px;
  background-image: linear-gradient(var(--grid-blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-blue) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  padding-top: clamp(56px, 9vw, 128px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3) 4px 5px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-3);
  background: var(--bg-0);
  font-size: var(--fs-small);
  color: var(--text-2);
}
.hero__pill:hover {
  border-color: var(--line-4);
  color: var(--text-1);
}
.hero__title {
  font-size: var(--fs-h1);
  max-width: 900px;
}
.hero__title-sub {
  display: block;
  color: var(--text-3);
}
.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-3);
  max-width: 620px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-1);
}
@media (max-width: 639px) {
  .hero__actions {
    width: 100%;
    flex-direction: column;
  }
  .hero__actions .btn {
    width: 100%;
  }
}
.hero__stage {
  position: relative;
  margin-top: var(--space-18);
  padding-bottom: clamp(64px, 9vw, 128px);
  background: radial-gradient(ellipse 60% 50% at 50% 55%, var(--glow-blue), transparent 70%);
}
.hero__figure {
  margin: 0;
}
.hero__caption {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--fs-label);
  color: var(--text-4);
}
/* Load sequence (plays once): title lines rise out of a mask one after
   another, then the supporting copy, then the product mock. The rail line
   (see "Motion & micro-interactions") draws down at the same time. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .keep,
  .hero__title-sub {
    animation: line-rise var(--speed-reveal) var(--ease-out-quart) both;
  }
  .hero__title .keep:nth-of-type(2) {
    animation-delay: 0.08s;
  }
  .hero__title-sub {
    animation-delay: 0.16s;
  }
  .hero__pill,
  .hero__lead,
  .hero__actions,
  .hero__stage {
    animation: hero-reveal var(--speed-reveal) var(--ease-out-quart) both;
  }
  .hero__pill {
    animation-delay: 0.05s;
  }
  .hero__lead {
    animation-delay: 0.3s;
  }
  .hero__actions {
    animation-delay: 0.38s;
  }
  .hero__stage {
    animation-delay: 0.55s;
  }
}
@keyframes line-rise {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.35em);
  }
  to {
    clip-path: inset(0 0 -0.2em 0);
    transform: none;
  }
}
@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Product mock — an illustration built in HTML, not a working UI */
.mock {
  border: 1px solid var(--line-3);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.mock__sidebar {
  display: none;
}
.mock__main {
  position: relative;
  display: flex;
  flex-direction: column;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line-1);
}
.mock__id {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-3);
}
.mock__subject {
  font-weight: var(--weight-medium);
  color: var(--text-1);
}
.mock__source {
  margin-left: auto;
  font-size: var(--fs-label);
  color: var(--text-4);
}
.mock__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mock__question {
  font-size: 17px;
  font-weight: var(--weight-medium);
  color: var(--text-1);
}
.mock__summary {
  font-size: 14px;
  color: var(--text-3);
}
.mock__log-title {
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  color: var(--text-1);
  padding-top: var(--space-2);
}
.mock__log li {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: var(--space-2);
  padding: 9px 0;
  color: var(--text-3);
}
.mock__dot {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--color-blueprint);
}
.mock__dot--idle {
  background: none;
  border: 1.5px solid var(--text-4);
}
.mock__time {
  color: var(--text-4);
}
.mock__result {
  color: var(--text-1);
}
.mock__approval {
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line-3);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mock__approval-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--weight-medium);
  color: var(--text-1);
}
.mock__draft {
  padding: var(--space-3) 14px;
  border-radius: var(--radius-md);
  background: var(--bg-2);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}
.mock__buttons {
  display: flex;
  gap: var(--space-2);
}
.mock__button {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-4);
  font-size: var(--fs-small);
  color: var(--text-2);
}
.mock__button--approve {
  background: var(--color-brass);
  border-color: var(--color-brass);
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}
@media (min-width: 960px) {
  .mock {
    height: 560px;
    display: grid;
    grid-template-columns: 220px 1fr;
  }
  .mock__sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4) var(--space-3);
    border-right: 1px solid var(--line-1);
    background: var(--bg-1);
  }
  .mock__sidebar span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
  }
  .mock__workspace {
    font-weight: var(--weight-medium);
    color: var(--text-1);
    padding-bottom: 14px !important;
  }
  .mock__count {
    margin-left: auto;
    color: var(--text-4);
  }
  .mock__nav--active {
    background: var(--bg-3);
    color: var(--text-1);
  }
  .mock__nav--active .mock__count {
    color: var(--human-text);
    font-weight: var(--weight-medium);
  }
  .mock__group {
    padding-top: var(--space-5) !important;
    font-size: var(--fs-label);
    color: var(--text-4);
  }
  .mock__channel {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-blueprint);
    padding: 0 !important;
  }
  .mock__channel--line {
    background: var(--color-line-green);
  }
  .mock__body {
    padding: var(--space-8) var(--space-12);
    max-width: 560px;
    gap: var(--space-5);
  }
  .mock__question {
    font-size: 20px;
  }
  .mock__approval {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    width: 368px;
    margin: 0;
  }
}

/* ==========================================================================
   Problem
   ========================================================================== */
/* Four scenes, each a "today" pane and a "with Dialon" pane drawn in the same
   HTML illustration language as the hero mock: grey for the person's manual
   work, blueprint dots for what Dialon did, brass for the one approval.
   Without JS (.is-enhanced absent) every scene and description stays visible;
   pain-scenes.js turns the list into rotating tabs. */
.scenes {
  display: grid;
  gap: var(--space-8);
}
.scenes__list {
  display: grid;
  border-top: 1px solid var(--line-2);
}
.scene-tab {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: none;
  text-align: left;
  font: inherit;
  color: var(--text-3);
  cursor: pointer;
}
.scene-tab__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 16px;
  font-weight: var(--weight-medium);
  color: var(--text-1);
}
.scene-tab__title .chip {
  margin-left: auto;
}
.scene-tab__desc {
  font-size: var(--fs-small);
  color: var(--text-3);
}
.scene-tab__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--text-1);
}
.scenes.is-enhanced .scene-tab:not(.is-active) .scene-tab__title {
  color: var(--text-3);
  transition: color var(--speed-regular) var(--ease-out-quad);
}
.scenes.is-enhanced .scene-tab:not(.is-active):hover .scene-tab__title {
  color: var(--text-1);
}
.scenes.is-enhanced .scene-tab:not(.is-active) .scene-tab__desc {
  display: none;
}
.scene-tab.is-active .scene-tab__bar {
  width: 100%;
}
.scene-tab.is-active .scene-tab__bar.is-running {
  width: 0;
  animation: scene-progress var(--scene-interval) linear forwards;
}
.scenes.is-paused .scene-tab__bar.is-running {
  animation-play-state: paused;
}
/* Accordion mode (below 960px): the open scene sits under its button, so the
   button's own divider moves to the bottom of the panel, and a +/− marker
   (as in the FAQ) shows the row expands. */
.scenes.is-accordion {
  gap: 0;
}
.scenes.is-accordion .scene-tab__bar {
  display: none;
}
.scenes.is-accordion .scene-tab__title::after {
  content: "+";
  flex: none;
  width: 1em;
  text-align: center;
  font-weight: var(--weight-regular);
  color: var(--text-4);
}
.scenes.is-accordion .scene-tab.is-active .scene-tab__title::after {
  content: "−";
}
.scenes.is-accordion .scene-tab.is-active {
  border-bottom-color: transparent;
}
.scenes__list > .scene {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line-2);
}
@keyframes scene-progress {
  to {
    width: 100%;
  }
}
.scenes__pause {
  margin-top: var(--space-4);
  padding: 4px var(--space-3);
  border: 1px solid var(--line-4);
  border-radius: var(--radius-pill);
  background: var(--bg-0);
  font: inherit;
  font-size: var(--fs-label);
  color: var(--text-2);
  cursor: pointer;
}
.scenes__pause:hover {
  border-color: var(--text-4);
}

/* Stage */
.scenes__stage {
  display: grid;
  gap: var(--space-6);
}
.scenes.is-enhanced .scenes__stage {
  gap: 0;
}
.scene {
  display: grid;
  gap: var(--space-4);
}
@media (prefers-reduced-motion: no-preference) {
  .scenes.is-enhanced .scene:not([hidden]) {
    animation: scene-in var(--speed-scene) var(--ease-out-quart);
  }
}
@keyframes scene-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.scene__pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-5) var(--space-6);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  background-color: var(--bg-0); /* a white sheet on the section's drawing grid */
  background-image: linear-gradient(var(--grid-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-soft) 1px, transparent 1px);
  background-size: 24px 24px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.scene__pane--after {
  background-color: var(--bg-pilot);
  background-image: linear-gradient(var(--grid-blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-blue) 1px, transparent 1px);
}
.scene__tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-5);
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  color: var(--text-3);
}
.scene__pane--after .scene__tag {
  color: var(--color-blueprint);
}
.scenes__caption {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-label);
  color: var(--text-4);
}

/* "Today" pieces */
.msg {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px 14px 14px 4px;
  background: var(--bg-0);
  color: var(--text-1);
}
.msg--plain {
  border-radius: var(--radius-md);
  color: var(--text-3);
}
.msg__from {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-tag);
  color: var(--text-4);
}
.msg__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--text-4);
}
.msg__dot--line {
  background: var(--color-line-green);
}
.file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  font-size: var(--fs-label);
  color: var(--text-2);
}
.file__type {
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--text-3);
  color: var(--color-white);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
}
.sheet {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-0);
  font-size: var(--fs-tag);
  color: var(--text-3);
  overflow: hidden;
}
.sheet span {
  padding: 4px 8px;
  border-top: 1px solid var(--line-1);
}
.sheet span:nth-child(-n + 3) {
  border-top: 0;
  background: var(--bg-1);
  color: var(--text-4);
}
.todo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.todo span {
  padding: 3px 10px;
  border: 1px dashed var(--line-4);
  border-radius: var(--radius-sm);
  background: var(--bg-0);
  font-size: var(--fs-label);
  color: var(--text-3);
}
.pending {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-label);
  color: var(--text-4);
}
.pending::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--text-4);
  border-radius: var(--radius-pill);
}
.quote-line {
  color: var(--text-1);
}
.candidates,
.calls {
  display: grid;
  gap: 6px;
}
.candidates > span,
.calls > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-0);
  font-size: var(--fs-label);
  color: var(--text-2);
}
.candidates > span {
  border-style: dashed;
  border-color: var(--line-4);
}
.calls > span {
  justify-content: flex-start;
}
.calls b {
  min-width: 40px;
  font-size: var(--fs-tag);
  font-weight: var(--weight-medium);
  color: var(--text-4);
}
.scene .mono {
  font-size: var(--fs-tag);
}

/* "With Dialon" draft card */
.draft-card {
  display: grid;
  border: 1px solid var(--line-3);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
  box-shadow: var(--shadow-float);
}
.draft-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-1);
  font-weight: var(--weight-medium);
  color: var(--text-1);
}
.draft-card__body {
  display: grid;
  gap: var(--space-3);
  padding: 12px 14px 14px;
}
.draft-card__text {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-2);
  color: var(--text-1);
}
.ai-log {
  display: grid;
  gap: 6px;
}
.ai-log span {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-label);
  color: var(--text-3);
}
.ai-log span::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-blueprint);
}
.matched {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  font-size: var(--fs-label);
  color: var(--color-blueprint);
}
.draft-card__actions {
  display: flex;
  gap: var(--space-2);
}
.draft-card__approve,
.draft-card__ghost {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
}
.draft-card__approve {
  background: var(--color-brass);
  color: var(--color-white);
}
.draft-card__ghost {
  border: 1px solid var(--line-4);
  color: var(--text-2);
}

@media (min-width: 640px) {
  .scene {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scene__pane {
    min-height: 320px;
  }
}
@media (min-width: 960px) {
  .scenes {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }
  .scene__pane {
    min-height: 360px;
  }
}

/* ==========================================================================
   Product — 無需更換 ERP ＋ Dialon 能為您做的事
   First the ERP bridge: the claim, three plain facts, and a demo of Dialon
   operating an existing ERP window. Then every job Dialon takes on as six
   cards in business order. Level 1: mini-UI illustration, title, one
   sentence, 2–4 points. Level 2: a native <details> with one worked example
   (who does what). No status chips — the caption notes scope is confirmed
   per client.
   ========================================================================== */

/* --- ERP bridge: cause → action → result ---------------------------------
   A customer's LINE question arrives; Dialon's named cursor (like a
   collaborator's cursor) operates a deliberately plain, older-looking ERP
   window while its action log streams below, ending on a reply draft that
   waits for approval. Dashed blueprint boxes label what it read on screen.
   erp-demo.js plays it once; the markup is the finished state. */
.erp-bridge {
  display: grid;
  gap: var(--space-12);
  margin-bottom: var(--space-20);
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--line-2);
}
.erp-bridge__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
}
.erp-bridge__lead {
  margin-top: var(--space-4);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: var(--tracking-display);
  color: var(--text-3);
}
.erp-facts {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.erp-facts li {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-2);
}
.erp-facts h3 {
  font-size: 16px;
  font-weight: var(--weight-medium);
}
.erp-facts p {
  margin-top: var(--space-2);
  color: var(--text-3);
}
.erp-bridge__note {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-4);
}

/* --- the ERP window ------------------------------------------------------ */
.erp-demo {
  margin: 0;
}
.erp-win {
  position: relative;
  overflow: hidden;
  background: var(--bg-0);
  border: 1px solid var(--line-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-frame);
  font-size: 12px;
  color: var(--text-2);
}
.erp-win__title,
.erp-win__menu,
.erp-win__status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-3);
}
.erp-win__title {
  justify-content: space-between;
  height: 30px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line-3);
  font-size: var(--fs-label);
  color: var(--text-3);
}
.erp-win__ctrl {
  display: flex;
  gap: 6px;
}
.erp-win__ctrl i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line-4);
  background: var(--bg-0);
}
.erp-win__menu {
  height: 30px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-3);
}
.erp-win__menu span {
  padding: 2px 4px;
}
.erp-win__body {
  padding: var(--space-4) var(--space-3) var(--space-5);
}
.erp-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-width: 360px;
}
.erp-form label {
  color: var(--text-3);
}
.erp-input {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line-4);
  border-radius: 2px;
  background: var(--bg-0);
  font-family: var(--font-mono);
  color: var(--text-1);
}
.erp-input--muted {
  background: var(--bg-1);
}
.erp-caret {
  width: 1px;
  height: 14px;
  margin-left: 1px;
  background: var(--text-1);
  opacity: 0;
}
.erp-demo.is-typing .erp-caret {
  opacity: 1;
}
.erp-btn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-4);
  border-radius: 2px;
  background: var(--bg-3);
  transition: background-color var(--speed-quick) var(--ease-out-quad);
}
.erp-btn.is-pressed {
  background: var(--line-3);
}

.erp-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  margin-top: var(--space-4);
  border: 1px solid var(--line-3);
}
.erp-grid > span:not(.erp-grid__row),
.erp-grid__row > span {
  padding: 6px var(--space-2);
  border-top: 1px solid var(--line-1);
  white-space: nowrap;
}
.erp-grid__head {
  background: var(--bg-1);
  color: var(--text-3);
}
.erp-grid > .erp-grid__head {
  border-top: 0;
}
.erp-grid__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  transition: opacity var(--speed-scene) var(--ease-out-quad);
}
.erp-mono {
  font-family: var(--font-mono);
}
.erp-win__status {
  justify-content: space-between;
  height: 26px;
  background: var(--bg-1);
  border-top: 1px solid var(--line-3);
  font-size: 11px;
  color: var(--text-4);
}

/* what the AI read on screen: dashed blueprint box + step number */
.erp-scan {
  position: relative;
  outline: 1.5px dashed transparent;
  outline-offset: 3px;
  transition: outline-color var(--speed-regular) var(--ease-out-quad);
}
.erp-scan::after {
  content: attr(data-erp-label);
  position: absolute;
  left: -4px;
  bottom: calc(100% + 5px);
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--color-blueprint);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--speed-regular) var(--ease-out-quad);
}
/* label beside the box (menu sits right under the title bar) */
.erp-scan--side::after {
  left: calc(100% + 8px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
/* label over the empty middle of the row, clear of the row above's data */
.erp-scan--mid::after {
  left: 45%;
}
.erp-scan.is-scanned {
  outline-color: var(--color-blueprint);
}
.erp-scan.is-scanned::after {
  opacity: 1;
}
.erp-grid__row.is-scanned {
  background: var(--accent-tint);
}

/* Dialon's cursor: a collaborator-style pointer with a name tag */
.erp-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--cx, 70%), var(--cy, 70%));
  transition: transform 0.7s var(--ease-out-quart), opacity var(--speed-regular) var(--ease-out-quad);
}
.erp-cursor svg {
  width: 16px;
  height: 20px;
}
.erp-cursor path {
  fill: var(--color-blueprint);
  stroke: var(--color-white);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.erp-cursor__tag {
  margin: 14px 0 0 -2px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-blueprint);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--weight-medium);
  line-height: 1.5;
}
/* click ripple at the pointer tip */
.erp-cursor::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-blueprint);
  border-radius: 50%;
  opacity: 0;
}
.erp-cursor.is-clicking::before {
  animation: erp-click 0.45s var(--ease-out-quad);
}
@keyframes erp-click {
  from { opacity: 0.9; transform: scale(0.3); }
  to { opacity: 0; transform: scale(1.4); }
}
.erp-demo.is-playing .erp-cursor {
  opacity: 1;
}

/* "looking at the screen": one hairline sweeps the window */
.erp-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--color-blueprint);
  box-shadow: 0 0 0 3px var(--accent-tint);
  opacity: 0;
  pointer-events: none;
}
.erp-demo.is-sweeping .erp-sweep {
  animation: erp-sweep 0.9s var(--ease-out-quad);
}
@keyframes erp-sweep {
  0% { opacity: 0; transform: translateY(30px); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(300px); }
}

/* the cause: a customer's LINE question */
.erp-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: fit-content;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-0);
  border: 1px solid var(--line-3);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  transition: opacity var(--speed-scene) var(--ease-out-quad), transform var(--speed-scene) var(--ease-out-quart);
}
.erp-msg__from {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-label);
  color: var(--text-4);
}
.erp-msg__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-line-green);
}
.erp-msg__text {
  font-size: 14px;
  color: var(--text-1);
}

/* the agent's action log, streaming below the window */
.erp-log {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--color-blueprint);
  display: grid;
  gap: var(--space-1);
}
.erp-log li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-2);
  transition: opacity var(--speed-regular) var(--ease-out-quad), transform var(--speed-regular) var(--ease-out-quart);
}
.erp-log time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-4);
  padding-top: 1px;
}

/* the result: a reply draft waiting for approval */
.erp-reply {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-0);
  border: 1px solid var(--line-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  transition: opacity var(--speed-scene) var(--ease-out-quad), transform var(--speed-scene) var(--ease-out-quart);
}
.erp-reply__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--text-1);
}
.erp-reply p {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--text-2);
}

/* hidden-until-played states (set by erp-demo.js) */
.erp-demo .is-pending {
  opacity: 0;
  transform: translateY(6px);
}

.erp-demo__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-4);
}
.erp-demo__control {
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--color-blueprint);
  cursor: pointer;
}
.erp-demo__control:hover {
  color: var(--color-navy);
}
.erp-demo__control:focus-visible {
  outline: 2px solid var(--color-blueprint);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.erp-grid__qty {
  display: none;
}
@media (min-width: 640px) {
  .erp-grid {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  }
  .erp-grid__qty {
    display: block;
  }
}

@media (min-width: 960px) {
  .erp-bridge {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-16);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .erp-cursor,
  .erp-scan,
  .erp-scan::after,
  .erp-grid__row,
  .erp-btn,
  .erp-msg,
  .erp-log li,
  .erp-reply {
    transition: none;
  }
}

/* --- jobs ---------------------------------------------------------------- */
.jobs {
  display: grid;
  gap: var(--space-4);
}
.job {
  --job-pad: var(--space-6);
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--job-pad) var(--job-pad) var(--space-4);
}
/* illustration strip bleeds to the card edges */
.job__stage {
  margin: calc(var(--job-pad) * -1) calc(var(--job-pad) * -1) var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-2);
}
.job__fig {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}
.jobs__caption {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-4);
}

/* --- Mini-UI illustrations (direction B) --------------------------------
   Tiny product fragments drawn in SVG; every colour comes from a token. */
.job__fig text {
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.job__fig .ui-mono { font-family: var(--font-mono); }
.ui-card { fill: var(--bg-0); stroke: var(--line-3); stroke-width: 1; }
.ui-card--thick { stroke-width: 1.5; }
.ui-file { fill: var(--bg-1); stroke: var(--line-3); stroke-width: 1; }
.ui-bubble-you { fill: var(--bg-3); }
.ui-bar { fill: var(--bg-3); }
.ui-bar-soft { fill: var(--bg-1); }
.ui-level { fill: var(--text-4); }
.ui-rule { fill: none; stroke: var(--line-3); stroke-width: 1; }
.ui-track { fill: none; stroke: var(--line-3); stroke-width: 1.5; }
.ui-track--done { stroke: var(--color-blueprint); }
.ui-threshold { fill: none; stroke: var(--text-4); stroke-width: 1; stroke-dasharray: 2 2; }
.ui-ai-fill { fill: var(--color-blueprint); }
.ui-ai-tint { fill: var(--accent-tint); stroke: var(--accent-tint); stroke-width: 0.75; }
.ui-human-tint { fill: var(--human-tint); stroke: var(--color-brass); stroke-width: 0.75; }
.ui-brass { fill: var(--color-brass); }
.ui-line-dot { fill: var(--color-line-green); }
.ui-check { fill: none; stroke: var(--color-white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-t1 { fill: var(--text-1); }
.ui-t2 { fill: var(--text-2); }
.ui-t3 { fill: var(--text-3); }
.ui-t4 { fill: var(--text-4); }
.ui-ai { fill: var(--color-blueprint); }
.ui-human { fill: var(--human-text); }
/* navy line work for the advisory icons */
.ui-ink-line { fill: none; stroke: var(--color-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-ink-shape { fill: var(--bg-3); stroke: var(--color-navy); stroke-width: 1.6; stroke-linejoin: round; }
.ui-ink-dot { fill: var(--color-navy); }
.ui-ai-lens { fill: var(--bg-0); stroke: var(--color-blueprint); stroke-width: 2; }
.ui-ai-line { fill: none; stroke: var(--color-blueprint); stroke-width: 2.2; stroke-linecap: round; }
.job__title {
  font-size: 20px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
  line-height: 1.4;
}
.job__text {
  margin-top: var(--space-3);
  color: var(--text-3);
}

/* the points take up the slack so every card's 看例子 sits on one line */
.job__points {
  flex-grow: 1;
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: var(--space-2);
}
.job__points li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-2);
}
.job__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--text-4);
}
.job__example {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line-1);
}
.job__example summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  color: var(--color-blueprint);
  cursor: pointer;
  list-style: none;
}
.job__example summary::-webkit-details-marker {
  display: none;
}
.job__example summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--speed-regular) var(--ease-out-quad);
}
.job__example[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.job__example summary:hover {
  color: var(--color-navy);
}
.job__example summary:focus-visible {
  outline: 2px solid var(--color-blueprint);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* who-did-what trace: grey = incoming, blue = Dialon, brass = you */
.trace {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}
.trace__step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-2);
}
.trace__step::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
}
.trace__step + .trace__step::after {
  content: "";
  position: absolute;
  left: 6px;
  top: -7px;
  height: 18px;
  border-left: 1px solid var(--line-3);
}
.trace__step--ai::before {
  background: var(--color-blueprint);
}
.trace__step--human::before {
  background: var(--color-brass);
}
.trace__who {
  color: var(--text-4);
}
.trace__step--ai .trace__who {
  color: var(--color-blueprint);
}
.trace__step--human .trace__who {
  color: var(--human-text);
}

@media (min-width: 640px) {
  .jobs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Line up stage / title / text / points / 看例子 across a row, so opening
     one example adds space below its neighbours instead of moving them. */
  @supports (grid-template-rows: subgrid) {
    .job {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-content: start;
    }
    .job__points {
      flex-grow: 0;
    }
  }
}

@media (min-width: 960px) {
  .jobs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .job {
    --job-pad: var(--space-8);
    padding-bottom: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .job__example summary::after {
    transition: none;
  }
}

/* ==========================================================================
   Trust — the only dark band
   ========================================================================== */
.trust {
  padding-bottom: var(--section-y);
}
.trust__panel {
  display: grid;
  gap: var(--space-10);
  padding: var(--space-14) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-paper);
}
.trust__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.trust__label {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  color: var(--accent-on-dark);
}
.trust__intro h2 {
  font-size: var(--fs-h2-band);
}
.trust__intro p {
  font-size: 16px;
  color: var(--dark-text-2);
}
.trust__intro .trust__note {
  font-size: var(--fs-small);
  color: var(--dark-text-3);
}
.stages {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--dark-panel);
  border: 1px solid var(--dark-line);
}
.stage--human {
  border-color: var(--dark-brass-line);
}
.stage__label {
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--accent-on-dark);
}
.stage--human .stage__label {
  color: var(--human-on-dark);
}
.stage h3 {
  font-size: var(--fs-h3);
}
.stage p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--dark-text-2);
}
.safeguards {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-10);
  border-top: 1px solid var(--dark-line-strong);
}
.safeguard h3 {
  font-size: 16px;
  margin-bottom: var(--space-2);
}
.safeguard p {
  font-size: 14px;
  color: var(--dark-text-2);
}
@media (min-width: 640px) {
  .stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .safeguards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .trust__panel {
    grid-template-columns: 400px 1fr;
    gap: var(--space-18);
    padding: var(--space-20) var(--space-12);
  }
  .safeguards {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/* ==========================================================================
   Trial
   ========================================================================== */
.trial {
  background-color: var(--bg-2);
  background-image: linear-gradient(var(--grid-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}
.trial__head {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.trial__head h2 {
  font-size: var(--fs-h2-band);
  margin-bottom: var(--space-4);
}
.trial__head p {
  color: var(--text-3);
  max-width: 620px;
}
.trial__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.trial__steps {
  display: grid;
  gap: var(--space-4);
}
.trial-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
  border: 1px solid var(--line-2);
}
.trial-step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 16px;
  font-weight: var(--weight-medium);
}
.trial-step__time {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-regular);
  color: var(--text-4);
}
.trial-step p {
  font-size: 14px;
  color: var(--text-3);
}
@media (min-width: 640px) {
  .trial__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .trial__head {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-16);
  }
}

/* ==========================================================================
   Product vs. advisory — two offers, told apart at a glance
   Dialon 產品 is the system (homepage: UI illustrations, Blueprint = AI,
   Brass = your approval). AI 顧問服務 is people planning with you
   (advisory.html: line icons on dashed rails, drafting-grid grounds, no
   product UI). The offer tag is the shared marker: a filled Blueprint dot
   for the product, an outlined navy diamond for advisory.
   ========================================================================== */
.offer-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-1) 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.offer-tag::before {
  content: "";
  width: 6px;
  height: 6px;
}
.offer-tag--product {
  background: var(--accent-tint);
  color: var(--color-blueprint);
}
.offer-tag--product::before {
  border-radius: var(--radius-pill);
  background: var(--color-blueprint);
}
.offer-tag--advisory {
  border: 1px solid var(--color-navy);
  background: var(--bg-0);
  color: var(--color-navy);
}
.offer-tag--advisory::before {
  border: 1.5px solid var(--color-navy);
  transform: rotate(45deg);
}

/* drafting-sheet ground shared by advisory surfaces (same grid as .trial) */
.advisory-hero,
.advisory-teaser__panel {
  background-color: var(--bg-2);
  background-image: linear-gradient(var(--grid-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-soft) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* --- homepage: the one pointer to advisory.html --------------------------- */
.advisory-teaser__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  border: 1px dashed var(--line-4);
  border-radius: var(--radius-lg);
}
.advisory-teaser__text {
  display: grid;
  gap: var(--space-3);
}
.advisory-teaser__text h2 {
  font-size: var(--fs-h2-band);
}
.advisory-teaser__text p {
  max-width: 600px;
  color: var(--text-3);
}
@media (min-width: 960px) {
  .advisory-teaser__panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-10);
  }
}

/* --- advisory.html ------------------------------------------------------- */
.advisory-hero {
  padding-block: var(--space-20) var(--space-16);
  border-bottom: 1px solid var(--line-1);
}
.advisory-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.advisory-hero__title {
  font-size: var(--fs-h1);
  max-width: 900px;
}
.advisory-hero__sub {
  display: block;
  color: var(--text-3);
}
.advisory-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-3);
  max-width: 620px;
}
.advisory__grid {
  display: grid;
  row-gap: var(--space-10);
}
.advisory-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-6) var(--space-2);
  border-left: 1px dashed var(--line-4);
}
.advisory-item__icon {
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-2);
}
.advisory-item__title {
  position: relative;
  font-size: var(--fs-h3);
}
/* the tick sits on the rail, as on a drawing */
.advisory-item__title::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: calc(var(--space-6) * -1 - 1px);
  width: 2px;
  height: 1.1em;
  background: var(--color-navy);
}
.advisory-item__scene {
  line-height: 1.75;
  color: var(--text-2);
}
.advisory-item__offer {
  font-size: 14px;
  color: var(--text-3);
}
.advisory-item__deliv {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--text-1);
}
.advisory-item__deliv span {
  margin-right: var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--weight-regular);
  color: var(--text-4);
}
.advisory-start__inner {
  display: grid;
  gap: var(--space-10);
}
.advisory-start__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.advisory-start__intro h2 {
  font-size: var(--fs-h2);
}
.advisory-start__intro p {
  max-width: 460px;
  color: var(--text-3);
}
/* the steps are a real sequence, so they are numbered */
.advisory-steps {
  list-style: none;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
}
.advisory-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-4);
  padding: var(--space-6);
}
.advisory-steps li + li {
  border-top: 1px solid var(--line-2);
}
.advisory-steps__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-navy);
}
.advisory-steps h3 {
  font-size: 16px;
  margin-bottom: var(--space-1);
}
.advisory-steps p {
  font-size: 14px;
  color: var(--text-3);
}
.offer-switch {
  padding-block: var(--space-6);
  border-top: 1px solid var(--line-1);
}
.offer-switch__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  font-size: 14px;
  color: var(--text-3);
}
.offer-switch__inner a {
  font-weight: var(--weight-medium);
}
@media (min-width: 640px) {
  .advisory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .advisory__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .advisory-start__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--space-16);
  }
}

/* ==========================================================================
   About
   ========================================================================== */
.about {
  display: grid;
  gap: var(--space-8);
}
.about h2 {
  font-size: var(--fs-h2);
}
.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.about__body > p {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--text-2);
}
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.team__member {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-5);
}
.team__member + .team__member {
  padding-left: var(--space-5);
  border-left: 1px solid var(--line-2);
}
.team__name {
  font-size: 16px;
  font-weight: var(--weight-medium);
}
.team__title {
  font-size: var(--fs-small);
  color: var(--text-4);
}
.team__focus {
  padding-top: 6px;
  font-size: 14px;
  color: var(--text-3);
}
@media (min-width: 960px) {
  .about {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  display: grid;
  gap: var(--space-8);
}
.faq h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-4);
}
.faq__aside p {
  color: var(--text-3);
}
.faq-item {
  border-top: 1px solid var(--line-2);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line-2);
}
.faq-item h3 {
  font-size: 16px;
}
.faq-item__trigger {
  width: 100%;
  min-height: 56px;
  padding: var(--space-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border: 0;
  background: none;
  color: var(--text-1);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
}
.faq-item__trigger:hover .faq-item__marker {
  color: var(--text-1);
}
.faq-item__marker {
  flex-shrink: 0;
  color: var(--text-4);
  transition: color var(--speed-regular) var(--ease-out-quad);
}
.faq-item__answer {
  max-width: 620px;
  padding-bottom: var(--space-5);
  color: var(--text-3);
  line-height: 1.75;
}
@media (min-width: 960px) {
  .faq {
    grid-template-columns: 320px 1fr;
    gap: var(--space-16);
  }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  display: grid;
  gap: var(--space-10);
}
.contact h2 {
  font-size: var(--fs-h2);
  margin-bottom: 14px;
}
.contact__lead {
  color: var(--text-3);
}
.contact-form {
  display: grid;
  gap: var(--space-5);
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-row label {
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--text-2);
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-4);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: 16px;
  transition: border-color var(--speed-regular) var(--ease-out-quad);
}
.form-row textarea {
  resize: vertical;
  min-height: 120px;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--color-blueprint);
}
.form-row--error input,
.form-row--error select {
  border-color: var(--color-error);
}
.form-row__error,
.form-error-banner {
  font-size: var(--fs-small);
  color: var(--color-error);
}
.form-row--full {
  grid-column: 1 / -1;
}
.contact-form__footer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-4);
  align-items: stretch;
}
.contact-form__mail {
  font-size: var(--fs-small);
  color: var(--text-4);
  text-align: center;
}
.contact-form__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 640px) {
  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }
  .form-error-banner {
    grid-column: 1 / -1;
  }
  .contact-form__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .contact-form__mail {
    text-align: left;
  }
}
@media (min-width: 960px) {
  /* intro left, form right — the inquiry topic is chosen in the form, so
     no product-only side box here */
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: var(--space-16);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-block: var(--space-10) var(--space-12);
  background: var(--bg-1);
  border-top: 1px solid var(--line-1);
  font-size: var(--fs-small);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--text-3);
}
.site-footer__logo {
  align-self: flex-start;
  height: 18px;
  width: auto;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: center;
}
.site-footer__links a {
  color: var(--text-3);
}
.site-footer__links a:hover,
.site-footer__links a[aria-current="page"] {
  color: var(--text-1);
}
.site-footer__meta {
  color: var(--text-4);
}
@media (min-width: 960px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .site-footer__brand {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }
}

/* ==========================================================================
   Contact success modal
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--overlay);
}
.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
  box-shadow: var(--shadow-float);
  text-align: center;
}
.modal:focus {
  outline: none;
}
.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--text-4);
  cursor: pointer;
}
.modal__close svg {
  width: 18px;
  height: 18px;
}
.modal__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--color-blueprint);
}
.modal__icon svg {
  width: 22px;
  height: 22px;
}
.modal__title {
  font-size: 20px;
  margin-bottom: var(--space-2);
}
.modal__body {
  color: var(--text-3);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Legal pages (privacy.html, terms.html)
   ========================================================================== */
.legal {
  padding-block: var(--section-y);
}
.legal .container {
  max-width: calc(760px + var(--gutter) * 2);
}
.legal__label {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  color: var(--text-4);
  margin-bottom: var(--space-4);
}
.legal h1 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-3);
}
.legal__updated {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-4);
  margin-bottom: var(--space-12);
}
.legal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  color: var(--text-2);
}
.legal__body h2 {
  font-size: 20px;
  margin-bottom: var(--space-3);
}
.legal__body p + p,
.legal__body ul + p,
.legal__body p + ul {
  margin-top: var(--space-3);
}
.legal__body ul {
  list-style: disc;
  padding-left: var(--space-6);
}
.legal__back {
  margin-top: var(--space-12);
}

/* ==========================================================================
   Motion & micro-interactions
   One signature moment (the hero load sequence above, plus the rail line
   below); everything else only answers what the visitor does. Nothing here
   runs under prefers-reduced-motion.
   ========================================================================== */

/* A Blueprint progress line runs down the margin just outside the left rail
   as the page scrolls — its leading end rests ~60% down the viewport, like
   following a drawing sheet by sheet. It sits one step out from the rail so
   it never touches the text that starts on the rail. Like the rails, it shows
   on white sections and is covered by Paper / dark bands. Desktop only;
   unsupported browsers keep the static grey rails. */
@property --rail-p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rail-lead {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes rail-lead {
  to {
    --rail-lead: var(--rail-lead-end);
  }
}
@keyframes rail-progress {
  to {
    --rail-p: 1;
  }
}
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    main {
      background:
        linear-gradient(var(--color-blueprint), var(--color-blueprint)) left calc(var(--rail-x) - var(--space-8)) top 0 /
          var(--rail-width) calc(var(--rail-p) * (100% - 100vh) + var(--rail-lead)) no-repeat,
        linear-gradient(var(--line-1), var(--line-1)) left var(--rail-x) top 0 / 1px 100% no-repeat,
        linear-gradient(var(--line-1), var(--line-1)) right var(--rail-x) top 0 / 1px 100% no-repeat;
      animation: rail-lead var(--speed-reveal) var(--ease-out-quart) both, rail-progress linear both;
      animation-timeline: auto, scroll(root block);
    }
  }
}

/* Links inside running text: an underline draws in from the left on hover */
p a,
.contact-form__mail a {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: color var(--speed-regular) var(--ease-out-quad),
    background-size var(--speed-regular) var(--ease-out-quad);
}
p a:hover,
.contact-form__mail a:hover {
  background-size: 100% 1px;
}

/* FAQ: + turns into × when open; the answer and 看例子 content ease in */
.faq-item__marker {
  transition: color var(--speed-regular) var(--ease-out-quad), transform var(--speed-disclose) var(--ease-out-quart);
}
.faq-item__trigger[aria-expanded="true"] .faq-item__marker {
  transform: rotate(45deg);
  color: var(--color-blueprint);
}
@keyframes disclose {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .faq-item__answer:not([hidden]),
  .job__example[open] > :not(summary) {
    animation: disclose var(--speed-disclose) var(--ease-out-quart);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .faq-item__marker,
  p a,
  .contact-form__mail a {
    transition: none;
  }
  .btn:active:not(:disabled) {
    transform: none;
  }
}

/* ==========================================================================
   Phones (<640px)
   ========================================================================== */

/* The six job cards become a swipeable row with a "1 / 6" pager
   (assets/js/jobs-carousel.js), instead of ~3,000px of stacked cards. */
.jobs__pager {
  display: none;
}
@media (max-width: 639.98px) {
  .jobs {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .jobs::-webkit-scrollbar {
    display: none;
  }
  .job {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .jobs__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--color-blueprint);
  }
  .jobs__dots {
    display: flex;
    gap: 6px;
  }
  .jobs__dots span {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--line-4);
    transition: width var(--speed-regular) var(--ease-out-quad), background-color var(--speed-regular) var(--ease-out-quad);
  }
  .jobs__dots span[data-active] {
    width: 18px;
    background: var(--color-blueprint);
  }
}

/* Bottom CTA bar: appears once the hero has scrolled away, hides again as
   the contact section comes into view (assets/js/mobile-cta.js). */
.mobile-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-2);
  box-shadow: var(--shadow-float);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--speed-scene) var(--ease-out-quart), visibility 0s linear var(--speed-scene);
}
.mobile-cta[data-visible] {
  transform: none;
  visibility: visible;
  transition: transform var(--speed-scene) var(--ease-out-quart), visibility 0s;
}
.mobile-cta .btn--primary {
  flex-grow: 1;
}
@media (min-width: 640px) {
  .mobile-cta {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta,
  .mobile-cta[data-visible],
  .jobs__dots span {
    transition: none;
  }
}