/* ============================================================
   AITHRIX — Onboarding / engagement process page
   Inherits tokens + nav/footer/buttons from style.css.
   ============================================================ */
/* compact editorial page head — deliberately NOT a landing hero:
   back link on top, title left, lede right, hairline underneath */
.ob-hero{padding:118px 0 10px;position:relative;overflow:hidden}
.ob-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(620px 360px at 84% 0%, rgba(55,224,176,.13), transparent 60%)}
.ob-hero .wrap{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:64px;align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:30px}
.ob-hero .eyebrow{grid-column:1;margin-bottom:12px;font-size:11px;letter-spacing:.18em;opacity:.85}
.ob-hero h1{grid-column:1;font-size:clamp(22px,2.5vw,32px);max-width:none;letter-spacing:-.01em;line-height:1.25}
.ob-hero h1 .accent{color:var(--accent)}
.ob-hero .lede{grid-column:2;grid-row:2 / span 2;align-self:end;color:var(--dim);
  font-size:14px;line-height:1.65;max-width:46ch;margin:0}
.ob-back{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;letter-spacing:.04em;margin-bottom:34px}
@media(max-width:760px){
  .ob-hero .wrap{grid-template-columns:1fr;row-gap:0}
  .ob-hero .eyebrow,.ob-hero h1{grid-column:1}
  .ob-hero .lede{grid-column:1;grid-row:auto;margin-top:14px}
  .ob-back{margin-bottom:26px}
}
.ob-back:hover{color:var(--accent)}
/* cross-link into the AI Plumbing practice page */
.ob-cross{grid-column:2;justify-self:start;margin-top:14px;font-size:13px;color:var(--accent);
  letter-spacing:.02em;opacity:.85;transition:opacity .2s}
.ob-cross:hover{opacity:1}
@media(max-width:760px){.ob-cross{grid-column:1;margin-top:12px}}

/* ===== interactive stepper ===== */
.ob-stepper{padding:46px 0 36px}
.ob-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:46px}
.ob-rail-line{position:absolute;left:12.5%;right:12.5%;top:22px;height:2px;background:var(--line);border-radius:2px}
.ob-rail-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .6s var(--ease)}
.ob-node{position:relative;z-index:1;background:none;border:0;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:13px;padding:0}
.ob-node .dot{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:"Courier New",monospace;font-size:14px;color:var(--dim);transition:.3s var(--ease)}
.ob-node .when{font-family:"Courier New",monospace;font-size:11px;letter-spacing:.06em;color:var(--dim);transition:color .3s}
.ob-node .nm{font-size:13.5px;font-weight:600;color:var(--dim);text-align:center;max-width:15ch;line-height:1.3;transition:color .3s}
.ob-node:hover .dot{border-color:var(--accent);color:var(--ink)}
.ob-node.done .dot{border-color:var(--accent);color:var(--accent)}
.ob-node.on .dot{background:var(--accent);border-color:var(--accent);color:#06231b;box-shadow:0 0 0 6px rgba(55,224,176,.13)}
.ob-node.on .when{color:var(--accent)}
.ob-node.on .nm{color:var(--ink)}

.ob-detail{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg));padding:46px;min-height:296px;
  display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:center;
  box-shadow:0 30px 70px -46px rgba(0,0,0,.85)}
.ob-detail .d-auto{position:absolute;left:0;top:0;height:3px;background:var(--accent);width:0;opacity:.7}
.ob-detail .d-num{font-weight:800;font-size:clamp(64px,8vw,120px);line-height:.86;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--accent2)}
.ob-detail .d-when{display:inline-block;font-family:"Courier New",monospace;font-size:12px;letter-spacing:.1em;color:var(--accent);
  border:1px solid rgba(55,224,176,.3);border-radius:20px;padding:5px 13px;margin:18px 0 14px}
.ob-detail .d-title{font-size:clamp(25px,2.9vw,36px);font-weight:800;letter-spacing:-.01em;line-height:1.14}
.ob-detail .d-desc{color:var(--dim);font-size:15.5px;line-height:1.72;margin-bottom:24px}
.ob-detail .d-bullets{display:flex;flex-direction:column;gap:13px}
.ob-detail .d-bullets span{font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:12px}
.ob-detail .d-bullets span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
/* enter animation when the active step changes */
.ob-detail .d-left,.ob-detail .d-right{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ob-detail.in .d-left,.ob-detail.in .d-right{opacity:1;transform:none}
.ob-detail.in .d-right{transition-delay:.08s}
.ob-detail .d-bullets span{opacity:0;transform:translateX(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ob-detail.in .d-bullets span{opacity:1;transform:none;transition-delay:calc(var(--i)*.09s + .25s)}

@media(max-width:760px){
  .ob-rail{margin-bottom:32px}
  .ob-node{gap:0}
  .ob-node .dot{width:38px;height:38px;font-size:12px}
  .ob-node .when,.ob-node .nm{display:none}
  .ob-rail-line{top:18px}
  .ob-detail{grid-template-columns:1fr;gap:20px;padding:28px}
  .ob-detail .d-num{font-size:54px}
}
@media(prefers-reduced-motion:reduce){
  .ob-rail-fill{transition:none}
  .ob-detail .d-left,.ob-detail .d-right,.ob-detail .d-bullets span{opacity:1;transform:none;transition:none}
  .ob-detail .d-auto{display:none}
}

/* principle + CTA */
.ob-principle{padding:96px 0;border-top:1px solid var(--line);text-align:center}
.ob-principle .q{font-family:var(--serif);font-size:clamp(24px,3.4vw,40px);line-height:1.3;max-width:24ch;margin:0 auto;color:var(--ink)}
body.zh .ob-principle .q{font-family:var(--cjk);font-style:normal;font-weight:600}
.ob-principle .q .accent{color:var(--accent)}
.ob-cta{padding:100px 0;border-top:1px solid var(--line);text-align:center}
.ob-cta .big{font-size:clamp(30px,5vw,60px);font-weight:800;letter-spacing:-.02em;line-height:1.06}
.ob-cta .big .accent{color:var(--accent)}
.ob-cta .btn{margin-top:32px}