/* Jevity OS — Platform Onboarding journey. Calm, simple, dual-track. */
:root{--ob-teal:#2dd4a7;--ob-soft:#7cf0cf;--ob-bronze:#e0a962;--ob-bronze-soft:#f0c690;--ob-ink:#f3f6f5;--ob-mut:#a9b3b8;--ob-faint:#6a747a;--ob-line:rgba(255,255,255,.09);--ob-card:rgba(255,255,255,.028)}
body.obbody{background:#05070c}
.ob{color:var(--ob-ink);font-family:"Inter",system-ui,sans-serif;padding-bottom:5rem}
.ob-hero{max-width:760px;margin:0 auto;padding:clamp(2.4rem,6vw,4.5rem) clamp(1.2rem,5vw,2rem) 1rem;text-align:center}
.ob-kicker{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ob-teal);font-weight:600}
.ob-hero h1{font-family:"Fraunces",Georgia,serif;font-weight:300;letter-spacing:-.02em;font-size:clamp(2.3rem,6.5vw,4rem);line-height:1.04;margin:.6rem 0 1rem}
.ob-hero h1 em{font-style:italic;color:var(--ob-teal)}
.ob-sub{color:var(--ob-mut);max-width:52ch;margin:0 auto;font-size:1.06rem;line-height:1.7}

/* legend */
.ob-legend{max-width:1000px;margin:2.4rem auto 0;padding:0 clamp(1.2rem,5vw,2rem);display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,4vw,3rem);align-items:center}
.ob-legend__side{display:flex;align-items:center;gap:.6rem;font-weight:600}
.ob-legend__side--clinic{justify-content:flex-end}
.ob-legend__side i{width:11px;height:11px;border-radius:50%}
.ob-legend__side small{display:block;font-weight:400;font-size:.78rem;color:var(--ob-faint)}
.ob-legend__spacer{width:44px}

/* timeline */
.ob-flow{max-width:1000px;margin:1.4rem auto 0;padding:0 clamp(1.2rem,5vw,2rem)}
.ob-step{display:grid;grid-template-columns:1fr 44px 1fr;gap:clamp(1rem,4vw,3rem);align-items:stretch;position:relative}
.ob-axis{display:flex;flex-direction:column;align-items:center}
.ob-axis__line{flex:1;width:2px;background:linear-gradient(var(--ob-teal),var(--ob-bronze));opacity:.4}
.ob-step:first-child .ob-axis__line--top{opacity:0}
.ob-step:last-child .ob-axis__line--bottom{opacity:0}
.ob-num{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:"Fraunces",serif;font-size:1.2rem;color:#04130d;background:radial-gradient(circle at 34% 28%,#fff,var(--ob-teal) 74%);box-shadow:0 0 20px rgba(45,212,167,.4);margin:.4rem 0;position:relative;z-index:2}
.ob-num small{position:absolute;top:-1.15rem;font-family:"Inter";font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ob-faint);white-space:nowrap}

.ob-card{background:var(--ob-card);border:1px solid var(--ob-line);border-radius:18px;padding:1.4rem 1.5rem;margin:.9rem 0;transition:transform .25s cubic-bezier(.16,.84,.34,1),border-color .25s}
.ob-card:hover{transform:translateY(-3px)}
.ob-card--patient{border-top:3px solid var(--ob-teal)}
.ob-card--patient:hover{border-color:rgba(45,212,167,.4)}
.ob-card--clinic{border-top:3px solid var(--ob-bronze)}
.ob-card--clinic:hover{border-color:rgba(224,169,98,.45)}
.ob-card__role{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:.4rem}
.ob-card--patient .ob-card__role{color:var(--ob-soft)}
.ob-card--clinic .ob-card__role{color:var(--ob-bronze-soft)}
.ob-card__role i{font-size:1rem}
.ob-card h3{font-family:"Fraunces",serif;font-weight:500;font-size:1.25rem;margin:.5rem 0 .5rem}
.ob-card p{color:var(--ob-mut);font-size:.94rem;line-height:1.6;margin:0}

/* close */
.ob-close{max-width:680px;margin:3rem auto 0;padding:0 clamp(1.2rem,5vw,2rem);text-align:center}
.ob-close h2{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em}
.ob-close p{color:var(--ob-mut);max-width:48ch;margin:.9rem auto 1.4rem;line-height:1.7}
.ob-cta{display:inline-block;background:var(--ob-teal);color:#04130d;font-weight:600;text-decoration:none;padding:.9rem 2rem;border-radius:999px;transition:transform .2s,box-shadow .2s}
.ob-cta:hover{transform:translateY(-2px);box-shadow:0 16px 44px -16px rgba(45,212,167,.6)}
.ob-foot{max-width:760px;margin:2.4rem auto 0;padding:0 1.4rem;text-align:center;font-size:.76rem;color:var(--ob-faint)}

@media(max-width:760px){
  .ob-legend{grid-template-columns:1fr;gap:.4rem;text-align:center}
  .ob-legend__side--clinic{justify-content:center}
  .ob-legend__spacer{display:none}
  .ob-step{grid-template-columns:32px 1fr;gap:1rem}
  .ob-axis{order:0}
  .ob-card{margin:.5rem 0}
  .ob-card--patient{order:1}.ob-card--clinic{order:2}
  .ob-num{width:32px;height:32px;font-size:.95rem}
  .ob-num small{display:none}
}