/* Automation Pro page only. Shared components come from system.css.
   Candidates to promote into system.css later:
   .ap-wide (extra-wide container for a hero canvas), .ap-ul (underlined keyword),
   .ap-chapter (U-18 feature row), .ap-steps (L-17 vertical timeline),
   .ap-player (click-to-play framed video), .ap-assure / .ap-micro (one-time-cost line). */

/* ---------- Hero (U-13) ---------- */
.ap-hero { --ap-pb: clamp(48px, 5.4vw, 80px); position: relative; overflow-x: clip; padding-top: clamp(44px, 5vw, 72px); padding-bottom: var(--ap-pb); background: var(--paper); }
/* Warm-black band: starts at the vertical middle of the product frame and runs to the bottom of the hero, so the frame straddles the light-to-dark edge */
.ap-wide { position: relative; isolation: isolate; }
.ap-wide::before { content: ''; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: 50%; bottom: calc(-1 * var(--ap-pb)); background: radial-gradient(60% 100% at 50% 8%, #2C231E 0%, #211B17 48%, var(--dark) 85%); }
.ap-hero__head { gap: 22px; margin-bottom: clamp(32px, 3.6vw, 52px); }
.ap-hero__head .display { max-width: 12.5em; }
.ap-hero__head .btn-row { margin-top: 12px; }
.ap-wide { max-width: calc(1360px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ap-wide .frame--xl { max-width: none; }
.ap-hero .frame { border-color: rgba(242, 239, 230, .2); box-shadow: 0 0 0 1px rgba(20, 20, 19, .08), 0 40px 80px -28px rgba(0, 0, 0, .6); }   /* light hairline for the dark half, faint dark ring for the paper half */
.ap-hero .frame__bar { height: 44px; }

/* One-time cost line (D-025): quiet, with coral ticks */
.ap-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.ap-assure span { display: inline-flex; align-items: center; gap: 8px; }
.ap-assure .icon { width: 18px; height: 18px; stroke-width: 2.25; color: var(--coral-text); }

/* ---------- Feature chapters (U-18) ---------- */
.ap-chapter { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ap-chapter--flip { grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.4fr); }
.ap-chapter--flip .ap-chapter__text { order: 2; }
.ap-chapter + .ap-chapter { margin-top: clamp(56px, 6.4vw, 96px); }
.ap-chapter__label { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-text); }
.ap-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--coral); font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0; color: var(--coral-text); }
.ap-title { font-size: clamp(1.875rem, 1.9vw + 1.2rem, 2.75rem); max-width: 12em; }
.ap-ul { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-skip-ink: none; }
.ap-points { margin-top: clamp(32px, 3.4vw, 48px); border-top: 1px solid var(--line-strong); }
.ap-points li { position: relative; padding: 18px 0 18px 28px; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.5; }
.ap-points li::before { content: ''; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--coral); }
.ap-chapters__more { margin-top: clamp(40px, 4.4vw, 64px); text-align: center; }

/* ---------- Grid trust note ---------- */
.ap-trust { max-width: 40em; margin-top: 40px; text-wrap: balance; }
.section--paper-2 .section__head { margin-bottom: clamp(28px, 3.2vw, 44px); }

/* ---------- How it works (L-17) ---------- */
.ap-how { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 6.6fr); gap: clamp(48px, 8vw, 128px); align-items: start; }
.ap-how__head { position: sticky; top: calc(var(--header-h) + 56px); display: grid; gap: 20px; }
.ap-steps { counter-reset: none; }
.ap-step { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 28px; padding-bottom: clamp(32px, 3.4vw, 48px); }
.ap-step:last-child { padding-bottom: 0; }
.ap-step:not(:last-child)::after { content: ''; position: absolute; left: 29px; top: 68px; bottom: 8px; width: 1.5px; background: linear-gradient(var(--coral), rgba(201, 106, 90, .25)); }
.ap-step__node { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--coral); background: var(--paper); font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; color: var(--coral-text); }
.ap-step__body { padding-top: 10px; display: grid; gap: 10px; }
.ap-step__body .h3 { font-size: clamp(1.5rem, 1vw + 1.2rem, 1.875rem); }
.ap-step__body p { max-width: 30em; color: var(--ink-2); text-wrap: pretty; }
.hgrid__cell p { text-wrap: pretty; }

/* ---------- Product video ---------- */
.ap-player { max-width: 1100px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); border-color: var(--line-dark-strong); }
.ap-player .frame__bar { background: #EFE9DF; }
.ap-player video { cursor: pointer; }
.ap-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(72px, 8vw, 104px); aspect-ratio: 1; margin: calc(clamp(72px, 8vw, 104px) / -2) 0 0 calc(clamp(72px, 8vw, 104px) / -2); border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, .35), 0 20px 40px -16px rgba(20, 20, 19, .5); transition: background var(--t), transform var(--t); }
.ap-play:hover { background: var(--coral-hover); transform: scale(1.06); }
.ap-play .icon { width: 36%; height: 36%; fill: currentColor; stroke: none; margin-left: 6%; }
.ap-time { position: absolute; right: 18px; bottom: 16px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(20, 20, 19, .82); color: #fff; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.ap-player.is-playing .ap-play, .ap-player.is-playing .ap-time { display: none; }
.ap-credit { margin-top: 24px; }

/* ---------- FAQ (L-19) ---------- */
.ap-faq { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.ap-faq__head { position: sticky; top: calc(var(--header-h) + 56px); }

/* ---------- Closing CTA microcopy ---------- */
.ap-micro { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: var(--fs-small); font-weight: 500; letter-spacing: .02em; color: var(--on-dark-2); }
.ap-micro i { font-style: normal; color: var(--coral-lt); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ap-chapter, .ap-chapter--flip { grid-template-columns: 1fr; gap: 40px; }
  .ap-chapter--flip .ap-chapter__text { order: 0; }
  .ap-title { max-width: 14em; }
  .ap-how, .ap-faq { grid-template-columns: 1fr; gap: 48px; }
  .ap-how__head, .ap-faq__head { position: static; }
}
@media (max-width: 640px) {
  .ap-hero .frame__bar, .ap-player .frame__bar { height: 32px; }
  .ap-step { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
  .ap-step__node { width: 44px; height: 44px; font-size: .9375rem; }
  .ap-step:not(:last-child)::after { left: 21.5px; top: 52px; }
  .ap-step__body { padding-top: 6px; }
  .ap-time { right: 12px; bottom: 10px; }
  .ap-micro { flex-direction: column; align-items: center; gap: 4px; }
  .ap-micro i { display: none; }
  .ap-hero .btn-row .btn { white-space: normal; text-align: center; }
}

/* ---------- Chapter note + Connections (D-03L) ---------- */
.ap-note { margin-top: 24px; max-width: 28em; }
.ap-conn { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
.ap-conn__group { padding: clamp(32px, 4vw, 56px) clamp(0px, 3vw, 48px) clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--line-strong); }
.ap-conn__group:nth-child(even) { padding-left: clamp(0px, 3vw, 48px); padding-right: 0; border-left: 1px solid var(--line-strong); }
.ap-conn__label { margin-bottom: 24px; font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-text); }
.ap-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 24px; }
.ap-lg li { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ap-lg img { flex: none; display: block; width: 34px; height: 24px; object-fit: contain; object-position: left center; filter: brightness(0); opacity: .6; }
.ap-lg__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ap-lg b { font-weight: 500; font-size: .9375rem; color: var(--ink-2); }
.ap-lg small { font-size: var(--fs-micro); color: var(--ink-3); }
.ap-lg .ap-lg__wm img { width: auto; height: 18px; max-width: 100%; }
.ap-conn__note { margin-top: 32px; }
@media (max-width: 860px) {
  .ap-conn { grid-template-columns: 1fr; }
  .ap-conn__group, .ap-conn__group:nth-child(even) { padding-inline: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .ap-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .ap-lg li { gap: 8px; }
  .ap-lg img { width: 30px; }
  .ap-lg b { font-size: .875rem; }
}
.ap-conn__cap { margin-bottom: 20px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }