/* ===== ORDER BLOCK · product journey (Wave 2026-10-09 rebuild) =====
   Know first (Tap Score) -> Water Trinity: house (Perfect Filter) -> drink (Echo Flow) -> bath (Echo Revive)
   + take-it-with-you (Echo Flask) + complete-Trinity panel + our rule. Built by _journey_build.py. */
.ob{--ob-ink:#2E5C6C; --ob-deep:#0b2a33; --ob-teal:#108474; --ob-aqua:#42efd8; --ob-text:#374957; --ob-mute:#64798a; --ob-hair:rgba(46,92,108,.16); --ob-orange:#FFA400;
  background:#F7F5F0; color:var(--ob-text); border:1px solid var(--ob-hair); border-radius:8px; padding:40px 34px 30px;
  font-family:'Bricolage Grotesque',system-ui,sans-serif; line-height:1.5; text-align:left}
.ob.flat{background:transparent; border:0; padding:0}
.ob *{box-sizing:border-box; margin:0}
.ob-k{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--ob-teal); margin-bottom:14px}
.ob-h{font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:clamp(32px,4.8vw,56px); line-height:1.03; letter-spacing:-.025em; color:var(--ob-ink); max-width:17ch; text-wrap:balance}
.ob-h em{font-style:italic; color:var(--ob-teal)}
.ob-lead{margin-top:16px; font-size:17px; color:var(--ob-mute); max-width:60ch; line-height:1.62}
.ob-eye{display:inline-flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ob-teal); font-weight:500}
.ob-eye b{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ob-ink); color:#fff; font-size:12.5px; letter-spacing:0; font-weight:500}
.ob-eye-soft{color:var(--ob-mute)}
.ob-prod{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--ob-ink); margin:4px 0 10px; font-weight:500}
.ob h3{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:23px; line-height:1.15; letter-spacing:-.012em; color:var(--ob-ink); margin:14px 0 6px; text-wrap:balance}
.ob-p{font-size:14.5px; color:var(--ob-mute); line-height:1.6}
.ob-btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ob-orange); color:#3a2800 !important; text-decoration:none !important;
  font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; font-size:14.5px; padding:14px 18px; border-radius:3px; text-align:center; border:0; transition:transform .25s, box-shadow .25s}
.ob-btn::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s}
.ob-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(46,92,108,.6)}
.ob-btn:hover::after{transform:translateX(120%)}
.ob-btn:focus-visible{outline:2px solid var(--ob-teal); outline-offset:3px}
.ob-btn.alt{background:var(--ob-ink); color:#fff !important}
.ob-btn.ghost{background:transparent; color:var(--ob-ink) !important; box-shadow:inset 0 0 0 1.5px var(--ob-ink)}
.ob-btn svg{width:12px; height:12px; flex:none}
.ob-aff{margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:10.5px; line-height:1.6; color:var(--ob-mute)}
.ob-alt{margin-top:10px; font-size:13px; color:var(--ob-mute); line-height:1.6}
.ob-alt a{color:var(--ob-ink); text-decoration:none; border-bottom:1px solid var(--ob-orange)}

/* 1 · start here */
.ob-start{margin-top:32px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px 40px; align-items:center;
  background:#fff; border:1px solid var(--ob-hair); border-left:4px solid var(--ob-orange); border-radius:6px; padding:28px 30px;
  box-shadow:0 18px 44px -30px rgba(46,92,108,.45)}
.ob-start h3{font-size:clamp(24px,2.6vw,30px)}
.ob-start-act{display:flex; flex-direction:column; align-items:stretch}
/* then */
.ob-then{display:flex; flex-direction:column; align-items:center; gap:6px; margin:18px 0 10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ob-teal)}
.ob-then span{display:block; width:1px; height:18px; background:linear-gradient(var(--ob-hair),var(--ob-teal))}
.ob-then span:last-child{height:22px; background:linear-gradient(var(--ob-teal),var(--ob-hair))}
/* 2 · the trinity */
.ob-tri-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; margin:6px 0 16px; padding-bottom:12px; border-bottom:1px solid var(--ob-hair)}
.ob-tri-k{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(26px,3vw,34px); color:var(--ob-ink); letter-spacing:-.01em}
.ob-tri-flow{display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ob-mute)}
.ob-tri-flow i{font-style:normal; color:var(--ob-teal)}
.ob-tri{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 34px; align-items:stretch}
.ob-c{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--ob-hair); border-radius:6px; padding:24px 22px 20px;
  box-shadow:0 14px 40px -28px rgba(46,92,108,.4); transition:transform .3s, box-shadow .3s}
.ob-c:hover{transform:translateY(-2px); box-shadow:0 22px 48px -28px rgba(46,92,108,.55)}
.ob-c .ob-p{flex:1; margin-bottom:16px}
.ob-house{grid-column:1; grid-row:1; border-top:3px solid var(--ob-ink)}
.ob-drink{grid-column:2; grid-row:1; border-top:3px solid var(--ob-teal)}
.ob-bath{grid-column:3; grid-row:1; border-top:3px solid var(--ob-aqua)}
.ob-go{grid-column:2; grid-row:2; background:#fbfaf7; border-style:dashed; box-shadow:none; padding:20px 22px 18px}
.ob-go h3{font-size:19px; margin-top:10px}
.ob-house::after,.ob-drink::after{content:"→"; position:absolute; right:-25px; top:46px; font-size:18px; color:var(--ob-teal); font-family:'JetBrains Mono',monospace}
.ob-go::before{content:""; position:absolute; left:50%; top:-17px; width:1px; height:17px; border-left:1px dashed var(--ob-teal)}
.ob-tri .ob-btn{white-space:nowrap; font-size:14px; padding:14px 12px}
@media(min-width:981px){ .ob:not(.compact) .ob-tri .ob-c:not(.ob-go) .ob-aff{min-height:5em} }
/* 3 · complete */
.ob-full{margin-top:30px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px 44px; align-items:center;
  background:radial-gradient(120% 140% at 0% 0%,#123d48 0%,var(--ob-deep) 55%,#061a20 100%); color:#cfe6e6; border-radius:8px; padding:34px 34px;
  box-shadow:0 26px 60px -34px rgba(6,26,32,.9); position:relative; overflow:hidden}
.ob-full::before{content:""; position:absolute; inset:0; border:1px solid rgba(66,239,216,.18); border-radius:8px; pointer-events:none}
.ob-full-k{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ob-aqua)}
.ob-full h3{color:#fff; font-weight:400; font-size:clamp(28px,3.4vw,40px); margin:10px 0 8px}
.ob-full h3 em{font-style:italic; color:var(--ob-aqua)}
.ob-full-sub{font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.06em; color:#e7f3f2}
.ob-full-sub i{font-style:normal; color:var(--ob-aqua); padding:0 4px}
.ob-full-p{margin-top:12px; font-size:14.5px; line-height:1.62; color:#a9c6c8; max-width:58ch}
.ob-full-act{display:flex; flex-direction:column; gap:16px}
.ob-value{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:17px; line-height:1.5; color:#e7f3f2; border-left:2px solid var(--ob-orange); padding-left:14px}
/* rule */
.ob-rule{margin-top:18px; display:flex; gap:14px; align-items:baseline; font-size:13.5px; line-height:1.6; color:var(--ob-mute); padding:12px 16px; border:1px solid var(--ob-hair); border-radius:4px; background:rgba(255,255,255,.55)}
.ob-rule b{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ob-teal); white-space:nowrap}

/* compact (end of a ZIP report) */
.ob.compact{padding:26px 20px 20px; margin-top:18px}
.ob.compact .ob-h{font-size:clamp(26px,3.2vw,34px)}
.ob.compact .ob-lead{font-size:15px}
.ob.compact .ob-start,.ob.compact .ob-full{grid-template-columns:1fr}
.ob.compact .ob-tri{grid-template-columns:1fr; gap:14px}
.ob.compact .ob-c{grid-column:auto; grid-row:auto}
.ob.compact .ob-house::after,.ob.compact .ob-drink::after,.ob.compact .ob-go::before{display:none}

@media(max-width:980px){
  .ob-start,.ob-full{grid-template-columns:1fr}
  .ob-tri{grid-template-columns:1fr; gap:14px}
  .ob-c{grid-column:auto !important; grid-row:auto !important}
  .ob-house::after,.ob-drink::after,.ob-go::before{display:none}
}
@media(max-width:620px){ .ob{padding:26px 16px 20px} .ob.flat{padding:0} .ob-start,.ob-full{padding:22px 18px} .ob-rule{flex-direction:column; gap:4px} .ob-tri-flow{font-size:10.5px; gap:7px} }
@media(prefers-reduced-motion:reduce){ .ob-btn,.ob-c{transition:none} .ob-btn::after{display:none} }