/* How It Works — services & direction overview. Depends on system.css + keystone.css. */

/* hero */
.hiw-hero{background:linear-gradient(180deg,var(--paper-2),var(--paper));border-bottom:1px solid var(--line-2);padding-block:clamp(var(--s7),7vw,var(--s9))}
.hiw-hero h1{max-width:20ch}
.hiw-hero .lede{max-width:60ch}

/* the maze — chips of fragmented pros */
.maze{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s5) 0}
.maze .m-chip{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 16px;font-family:var(--sans);font-weight:560;font-size:.92rem;color:var(--teal-800);box-shadow:var(--shadow-sm)}
.maze .m-chip.you{background:var(--clay-500);color:#fff;border-color:transparent;font-weight:640}

/* stat tiles */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin:var(--s5) 0}
@media(max-width:820px){.stat-row{grid-template-columns:1fr 1fr}}
.stat-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s5);box-shadow:var(--shadow-sm);text-align:center}
.stat-tile .num{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--teal-800)}
.stat-tile .lab{font-size:.9rem;color:var(--ink-soft);margin-top:8px}

/* "sold what's in front of you" comparison box */
.vs-box{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--card)}
@media(max-width:640px){.vs-box{grid-template-columns:1fr}}
.vs-col{padding:var(--s5)}
.vs-col h4{font-size:1rem;margin-bottom:var(--s3)}
.vs-col.a{background:var(--paper-2);border-right:1px solid var(--line-2)}
@media(max-width:640px){.vs-col.a{border-right:0;border-bottom:1px solid var(--line-2)}}
.vs-col.b{background:var(--sage-100)}
.vs-col ul{list-style:none;padding:0;margin:0}
.vs-col li{font-size:.93rem;color:var(--ink-soft);padding:6px 0 6px 22px;position:relative}
.vs-col.a li::before{content:"\2192";position:absolute;left:0;color:var(--ink-mute)}
.vs-col.b li::before{content:"\2713";position:absolute;left:0;color:var(--teal-600);font-weight:700}

/* generic tab widget (levels + describe-versions) */
.tabw .tabbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4);border-bottom:1px solid var(--line-2);padding-bottom:var(--s3)}
.tabw .tab{border:1.5px solid var(--line);background:var(--glass);border-radius:var(--radius-pill);padding:9px 16px;font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--teal-800);cursor:pointer;transition:.12s}
.tabw .tab:hover{border-color:var(--clay-500)}
.tabw .tab.on{background:var(--pine);color:#fff;border-color:transparent}
.tabw .tabpanel{display:none;animation:fade .25s var(--ease)}
.tabw .tabpanel.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* level system — number rail inside a card */
.level-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(var(--s5),3vw,var(--s6))}
.level-panel .lv-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s3)}
.level-panel .lv-n{width:44px;height:44px;border-radius:50%;background:var(--pine);color:#fff;font-family:var(--serif);font-size:1.3rem;display:flex;align-items:center;justify-content:center;flex:none}
.level-panel h3{font-size:1.35rem;color:var(--teal-900);margin:0}
.level-panel .lv-sub{color:var(--clay-600);font-weight:600;font-size:.9rem}

/* service blocks */
.svc-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(var(--s5),4vw,var(--s7));margin-bottom:var(--s5);position:relative;overflow:hidden}
.svc-block::before{content:attr(data-n);position:absolute;top:-18px;right:8px;font-family:var(--serif);font-size:7rem;color:rgba(255,255,255,.035);line-height:1;z-index:0;pointer-events:none}
.svc-block>*{position:relative;z-index:1}
.svc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:var(--s2)}
.svc-tag{font-family:var(--sans);font-weight:680;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-600)}
.svc-block h3{font-size:1.5rem;color:var(--teal-900);margin:0}
.svc-cta{margin-top:var(--s4)}

/* horizontal scroll rail (individual services categories) */
.rail-wrap{position:relative}
.rail{display:flex;gap:var(--s4);overflow-x:auto;padding:4px 4px var(--s4);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--sage-300);border-radius:999px}
.rail-card{flex:0 0 300px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--s5)}
.rail-card h4{color:var(--teal-900);font-size:1.05rem;margin-bottom:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line-2)}
.rail-card ul{list-style:none;padding:0;margin:0}
.rail-card li{font-size:.9rem;color:var(--ink-soft);padding:5px 0 5px 18px;position:relative}
.rail-card li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--teal-600)}
.rail-hint{font-size:.82rem;color:var(--ink-mute);margin-top:4px}

/* phase timeline reuse .timeline from keystone.css; add detail lists */
.phase-list .col-list{margin-top:8px}

/* emotional value two-col */
.feel-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:720px){.feel-grid{grid-template-columns:1fr}}
.feel-card{border-radius:var(--radius-lg);padding:var(--s5)}
.feel-card.bad{background:var(--paper-2);border:1px solid var(--line)}
.feel-card.good{background:var(--sage-100);border:1px solid var(--sage-300)}
.feel-card h4{margin-bottom:var(--s3)}
.feel-card ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.feel-card li{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 13px;font-size:.88rem;color:var(--teal-800)}
.feel-card.good li{background:var(--glass);border-color:var(--sage-300)}

/* is / isn't / becoming */
.iib-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:720px){.iib-grid{grid-template-columns:1fr}}
.iib{border-radius:var(--radius-lg);padding:var(--s5);border:1px solid var(--line)}
.iib.not{background:var(--paper-2)}
.iib.is{background:var(--sage-100);border-color:var(--sage-300)}
.iib h4{margin-bottom:var(--s3)}
.iib ul{margin:0;padding-left:18px}
.iib li{font-size:.92rem;color:var(--ink-soft);margin-bottom:7px}

/* closing-promise + service-button styles moved to editorial.css (shared with the homepage) */