/* ============================================================================
   gm-dept.css - shared pieces for the department pages that opted into the
   scroll-craft layer (/ai-chatbots, /automation, /web-apps).
   ----------------------------------------------------------------------------
   Loads AFTER scrollcraft.css and gs-motion.css. Everything is scoped to
   .gs-sc.gm-dept (on <main>), so the header, footer and chatbot widget keep
   their own styles. Classes are prefixed gd- (department); the gm-* layer
   (panes, labels, hero planes, rails) is used as-is.
   Animate only transform / opacity / clip-path. No transition: all.
   ========================================================================== */

body:has(.gm-dept) { background: #070b09; }
.gm-dept { --gd-card: #0c1310; }
.gm-dept p, .gm-dept h2, .gm-dept h3, .gm-dept ul, .gm-dept ol, .gm-dept figure { margin: 0; }

/* ------------------------------------------------------------ hero tweak --
   Photos from the Central Coast sit on the far plane. A darkening veil keeps
   the headline above 4.5:1 whatever the photo does. */
.gm-dept .gm-hero__far::after { content: ""; position: absolute; inset: 0; background: hsl(150 30% 3% / var(--gd-dim, .38)); }
.gm-dept .gm-hero__title--md { font-size: clamp(2.5rem, 1.2rem + 3.9vw, 4.8rem); }
.gm-dept .gm-hero__copy { max-width: 38rem; }
.gm-dept .gm-hero__line { max-width: 30ch; }
.gm-dept .gm-hero__meta { color: #f1f5f2; display: inline-flex; }
.gm-dept .gm-hero__credit { color: #b7c2bb; }

/* ---------------------------------------------------------- section head -- */
.gd-head { display: grid; gap: var(--sc-4); max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.gd-head .gm-room-p { margin: 0; max-width: 46ch; }
.gd-head--split { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 6vw, 6rem); }
.gd-head a:not(.gm-btn) { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 4px; }

/* ----------------------------------------------------------------- lede -- */
.gd-lede { padding-block: clamp(4rem, 8vw, 8rem) clamp(2rem, 4vw, 4rem); }
.gd-lede p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.5rem); line-height: 1.22; letter-spacing: -0.015em;
  color: var(--sc-ink); max-width: 34ch; text-wrap: pretty; }
.gd-lede p + p { margin-top: var(--sc-5); font-family: var(--sc-font-text); font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 52ch; letter-spacing: 0; }
.gd-lede strong { color: var(--sc-accent); font-weight: 500; }

/* ----------------------------------------------------------- card grid -- */
.gd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-card { position: relative; overflow: hidden; border: 1px solid var(--gm-line); border-radius: 18px; background: var(--gd-card); padding: clamp(1.5rem, 2.4vw, 2.25rem); display: grid; align-content: start; gap: 12px; }
.gd-card h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); line-height: 1.15; letter-spacing: -0.012em; color: var(--sc-ink); }
.gd-card p { color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.65; }
.gd-card a { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 3px; }
.gd-card::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--sc-accent);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gd-card:hover::before { transform: scaleX(1); } }
.gd-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px;
  background: color-mix(in oklab, var(--sc-accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--sc-accent) 28%, transparent); color: var(--sc-accent); }
.gd-ico svg { width: 20px; height: 20px; display: block; }

/* ---------------------------------------------------------------- steps --
   A line that draws itself across the steps (data-gm-reveal="left" on
   .gd-steps__line), with the steps settling in on top. */
.gd-steps-box { position: relative; }
.gd-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); list-style: none; padding: 0; }
.gd-steps__line { position: absolute; left: 23px; right: 10%; top: 23px; height: 1px; background: linear-gradient(90deg, var(--sc-accent), color-mix(in oklab, var(--sc-accent) 25%, transparent)); }
.gd-step { position: relative; z-index: 1; display: grid; gap: 10px; align-content: start; }
.gd-step__n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--sc-accent); background: var(--gd-step-bg, var(--gm-deep)); border: 1px solid var(--sc-accent); margin-bottom: 8px; }
.gd-step h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; color: var(--sc-ink); }
.gd-step p { color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.65; }

/* ------------------------------------------------------------ note band -- */
.gd-band { border-left: 2px solid var(--sc-accent); padding: 6px 0 6px 20px; color: var(--sc-ink-soft); max-width: 70ch; line-height: 1.7; }
.gd-band strong { color: var(--sc-ink); }
.gd-band a { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- stats -- */
.gd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--gm-line); }
.gd-stat { padding: 22px 20px 0 0; display: grid; gap: 6px; align-content: start; }
.gd-stat + .gd-stat { padding-left: 20px; border-left: 1px solid var(--gm-line); }
.gd-stat b { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.gd-stat span { font-size: .92rem; font-weight: 600; color: var(--sc-ink); }
.gd-stat small { font-size: .82rem; color: var(--sc-ink-soft); line-height: 1.5; }

/* ----------------------------------------------------------------- quote -- */
.gd-quote { margin: 0; padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: 20px; border: 1px solid var(--gm-line); background: var(--gd-card); }
.gd-quote blockquote { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--sc-ink); text-wrap: pretty; }
.gd-quote figcaption { margin-top: 18px; color: var(--sc-ink-soft); font-size: .9rem; }
.gd-quote figcaption strong { color: var(--sc-ink); }

/* ------------------------------------------------------------------ FAQ --
   Keeps the page's original markup and toggle (onclick toggles .open). */
.gm-dept .gs-faq-list { display: grid; gap: 0; border-top: 1px solid var(--gm-line); max-width: 56rem; }
.gm-dept .gs-faq-item { background: none; border: 0; border-bottom: 1px solid var(--gm-line); border-radius: 0; overflow: visible; }
.gm-dept .gs-faq-item.open { border-color: var(--gm-line); border-bottom: 1px solid var(--gm-line); }
.gm-dept .gs-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 22px 0; font: 600 clamp(1rem, .95rem + .3vw, 1.15rem)/1.4 var(--sc-font-text); color: var(--sc-ink); transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gm-dept .gs-faq-q:hover { color: var(--sc-accent); } }
.gm-dept .gs-faq-toggle { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; font-weight: 400;
  background: none; border: 1px solid var(--gm-line); color: var(--sc-ink-soft); transition: transform 240ms var(--sc-ease-out); }
.gm-dept .gs-faq-item.open .gs-faq-toggle { transform: rotate(45deg); background: none; color: var(--sc-accent); border-color: color-mix(in oklab, var(--sc-accent) 50%, transparent); }
.gm-dept .gs-faq-a { max-height: none; overflow: visible; display: none; transition: none; }
.gm-dept .gs-faq-item.open .gs-faq-a { display: block; max-height: none; animation: gd-fade 320ms var(--sc-ease-out); }
.gm-dept .gs-faq-a-inner { padding: 0 48px 24px 0; font-size: .98rem; color: var(--sc-ink-soft); line-height: 1.75; max-width: 70ch; }
.gm-dept .gs-faq-a-inner a { color: var(--sc-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
@keyframes gd-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- closing -- */
.gd-close { padding-block: clamp(5rem, 11vw, 10rem); }
.gd-close__inner { display: grid; gap: var(--sc-5); max-width: 46rem; }
.gd-close h2 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: .98; letter-spacing: -0.03em; color: var(--sc-ink); text-wrap: balance; }
.gd-close p { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 46ch; }
.gd-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gm-dept .gm-btn svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- web or app -- */
.gd-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 2rem); }
.gd-compare .gm-surface h3 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.8rem); }
.gd-compare .gm-ticks { font-size: .95rem; gap: 10px; margin-top: 20px; }
.gd-compare .gm-note { margin-top: 20px; font-size: .88rem; line-height: 1.65; }
.gd-compare a { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------ rails (pan acts) -- */
.gm-dept .gm-rail__lead .gm-room-p { max-width: 30ch; }
.gm-dept .gm-rail__end h3 { margin-bottom: 4px; }
.gm-dept .gm-rail__end p { color: var(--sc-ink-soft); margin-top: 12px; }

/* ================================================================ phones == */
@media (max-width: 1024px) {
  .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .gd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .gd-steps__line { display: none; }
}
@media (max-width: 760px) {
  .gd-head--split { grid-template-columns: 1fr; row-gap: var(--sc-4); }
  .gd-grid, .gd-grid--2 { grid-template-columns: 1fr; }
  .gd-compare { grid-template-columns: 1fr; }
  .gd-steps { grid-template-columns: 1fr; row-gap: 0; }
  .gd-step { grid-template-columns: 46px 1fr; column-gap: 16px; padding-bottom: 28px; }
  .gd-step__n { grid-row: span 2; margin: 0; }
  .gd-step:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 50px; bottom: 4px; width: 1px; background: color-mix(in oklab, var(--sc-accent) 40%, transparent); }
  .gd-stat { padding-right: 12px; }
  .gd-stat + .gd-stat { padding-left: 12px; }
  .gm-dept .gs-faq-a-inner { padding-right: 0; }
  .gd-actions .gm-btn { flex: 1 1 auto; }
}

/* ======================================================== reduced motion == */
@media (prefers-reduced-motion: reduce) {
  .gd-card::before, .gm-dept .gs-faq-toggle { transition: none; }
  .gm-dept .gs-faq-item.open .gs-faq-a { animation: none; }
}

/* ---- odd card counts: the last card stretches so no empty cell shows ---- */
@media (min-width: 1025px) {
  .gd-grid:not(.gd-grid--2) > :last-child:nth-child(3n+2) { grid-column: span 2; }
  .gd-grid:not(.gd-grid--2) > :last-child:nth-child(3n+1) { grid-column: span 3; }
  .gd-grid--2 > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .gd-grid > :last-child:nth-child(odd) { grid-column: span 2; }
}
.gd-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .gd-stats--3 { grid-template-columns: 1fr; }
  .gd-stats--3 .gd-stat, .gd-stats--3 .gd-stat + .gd-stat { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--gm-line); }
}
.gd-stat small a { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 3px; }
main.gm-dept + .gs-site-footer, main.gm-dept ~ .gs-site-footer { margin-top: 0; }
@media (max-width: 760px) {
  /* one meta item on phones: the separator dot reads as a stray bullet when it wraps */
  .gm-dept .gm-hero__meta > * + * { display: none; }
}

/* A pan rail without the engine (no JS) or calmed for reduced motion is an
   ordinary swipeable row, so every item stays reachable with no held scroll. */
.gm-dept [data-sc-act] > .gm-rail-stage:not(.sc-stage) { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding-block: var(--sc-section); min-height: 0; scrollbar-width: thin; }
.gm-dept [data-sc-act] > .gm-rail-stage:not(.sc-stage) .gm-rail { padding-top: 0; }
.gm-dept [data-sc-act] > .gm-rail-stage:not(.sc-stage) .gm-rail > * { scroll-snap-align: start; }
/* Mid-width screens: the copy column narrows so the floating panes never sit behind text. */
@media (min-width: 761px) and (max-width: 1200px) {
  .gm-dept .gm-hero__copy { max-width: 30rem; }
  .gm-dept .gm-hero__title--md { font-size: clamp(2.4rem, 1rem + 3.6vw, 3.6rem); }
  .gm-dept .gm-hero__near { width: min(40vw, 520px); }
}