/* How It Works: page-local extension of the approved ClaraStream system. */
.work-page{--bronze:#7a5a3a}
.work-page .hw-inner{max-width:1284px;margin:0 auto;width:100%}
.work-page .hw-section,.work-page .hw-hero{padding:80px clamp(28px,7vw,118px)}
.work-page .hw-section{border-top:1px solid rgba(21,26,31,.14)}
.work-page .hw-hero,.work-page .hw-dark{background:#151a1f;color:#f4f7f8}
.work-page .hw-eyebrow{margin:0 0 18px;font:500 .78rem/1.45 "IBM Plex Mono",monospace;letter-spacing:.09em;color:#7a5a3a}
.work-page .hw-hero .hw-eyebrow,.work-page .hw-dark .hw-eyebrow{color:#9fb8d8}
.work-page .hw-hero-copy{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.work-page .hw-hero h1{max-width:720px;font-size:clamp(2.5rem,3.6vw,3.6rem);line-height:1.1;font-weight:300;letter-spacing:-.038em}
.work-page .hw-body p{margin:0;color:#50585e;font-size:1.0625rem;line-height:1.7}
.work-page .hw-body p+p{margin-top:19px}
.work-page .hw-hero .hw-body p,.work-page .hw-dark .hw-body p{color:rgba(244,247,248,.76)}
.work-page .hw-reinforcement{margin:28px 0 0;font-size:1.08rem;font-weight:600;line-height:1.45;color:#7a5a3a}
.work-page .hw-hero .hw-body .hw-reinforcement{color:#9fb8d8;margin-top:24px}
.work-page .hw-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.work-page .hw-actions .button{min-height:48px;background:transparent}
.work-page .hw-actions .button-primary{background:#7a5a3a;border-color:#7a5a3a}
.work-page .hw-contract{display:grid;grid-template-columns:1fr 36px 1.2fr 36px 1.4fr;align-items:center;gap:20px;margin-top:54px;padding:30px 0;border-top:1px solid rgba(244,247,248,.22);border-bottom:1px solid rgba(244,247,248,.22);font:500 .78rem/1.6 "IBM Plex Mono",monospace;letter-spacing:.035em}
.work-page .hw-contract>strong{font-weight:500;text-align:center;padding:19px 12px;border-left:2px solid #9fb8d8;border-right:2px solid #7a5a3a}
.work-page .hw-contract p{font:400 .875rem/1.7 "IBM Plex Sans",sans-serif;letter-spacing:0;color:#b6aea1;margin:12px 0 0}
.work-page .hw-contract i{font:400 1.7rem "IBM Plex Sans",sans-serif;font-style:normal;text-align:center}
.work-page .hw-in-arrow{color:#9fb8d8}.work-page .hw-out-arrow{color:#7a5a3a}
.work-page .hw-intro{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,7vw,104px)}
.work-page .hw-heading h2{max-width:650px;margin:0;font-size:clamp(2rem,3vw,3rem);line-height:1.12;letter-spacing:-.035em;font-weight:300}
.work-page .hw-comparison{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(21,26,31,.22);border-bottom:1px solid rgba(21,26,31,.22);margin-top:44px}
.work-page .hw-comparison article{padding:28px 30px 32px;min-width:0}
.work-page .hw-comparison article+article{border-left:1px solid rgba(21,26,31,.22)}
.work-page .hw-comparison h3{font-size:1.25rem;font-weight:400;line-height:1.35;margin:0;min-height:54px}
.work-page .hw-source{font:500 .75rem/1.6 "IBM Plex Mono",monospace;letter-spacing:.03em;margin:24px 0;padding:15px 12px;border-left:2px solid #9fb8d8;border-top:1px solid #b6aea1;border-bottom:1px solid #b6aea1}
.work-page .hw-repeated,.work-page .hw-subscribers,.work-page .hw-stream ul{list-style:none;margin:0;padding:0}
.work-page .hw-repeated li{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;padding:12px 0;border-bottom:1px solid rgba(21,26,31,.12)}
.work-page .hw-repeated li>span{font:400 .78rem/1.5 "IBM Plex Mono",monospace;border-left:2px solid #9fb8d8;padding-left:10px}
.work-page .hw-repeated b{position:relative;font-size:.9rem;font-weight:400;line-height:1.5}
.work-page .hw-repeated b:before{content:"";position:absolute;left:-20px;top:50%;width:14px;border-top:1px solid #7a5a3a}
.work-page .hw-shared-plane{background:#151a1f;color:#f4f7f8;padding:22px 16px;border-top:2px solid #9fb8d8;border-bottom:2px solid #7a5a3a;text-align:center}
.work-page .hw-shared-plane>span{display:block;font:500 .75rem/1.5 "IBM Plex Mono",monospace;letter-spacing:.06em;color:#b6aea1}
.work-page .hw-shared-plane strong{display:block;font:500 .8rem/1.6 "IBM Plex Mono",monospace;margin-top:10px}
.work-page .hw-shared-plane i{font-style:normal;color:#9fb8d8}.work-page .hw-shared-plane i+i{color:#b6aea1}
.work-page .hw-subscribers{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:24px;padding-top:18px;border-top:1px solid #7a5a3a}
.work-page .hw-subscribers li{font-size:.9rem;line-height:1.5;border-left:1px solid #7a5a3a;padding-left:10px}
.work-page .hw-listen-section{background:#edf1f3}
.work-page .hw-listen{display:grid;grid-template-columns:1.4fr 1fr;gap:0;align-items:center;max-width:900px;margin:42px auto 0;padding:24px 0}
.work-page .hw-incoming{position:relative;min-height:160px;border-right:2px solid #9fb8d8}
.work-page .hw-incoming span{font:500 .75rem/1.5 "IBM Plex Mono",monospace;letter-spacing:.04em}
.work-page .hw-incoming i{position:absolute;left:0;right:0;border-top:1px solid #9fb8d8;top:60%;transform-origin:right}
.work-page .hw-incoming i:nth-of-type(1){transform:rotate(7deg)}.work-page .hw-incoming i:nth-of-type(3){transform:rotate(-7deg)}
.work-page .hw-listen-target{border-top:1px solid #9fb8d8;border-bottom:1px solid #9fb8d8;padding:28px;font:500 .85rem/1.5 "IBM Plex Mono",monospace;text-align:center}
.work-page .hw-support{margin:26px 0 0;font-size:1.08rem;line-height:1.5;font-weight:500;color:#49545d}
.work-page .transformation-labels,.work-page .transformation-visual{grid-template-columns:minmax(0,1fr) minmax(170px,.65fr) minmax(0,1fr)}
.work-page .transformation-labels{font-size:.75rem;line-height:1.5}
.work-page .transformation-visual{overflow:visible}
.work-page .data-specimen{font-size:.8rem}
.work-page .data-specimen span{white-space:normal;overflow:visible;min-height:46px}
.work-page .data-specimen b{overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.work-page .specimen-in span{grid-template-columns:40px 1fr 40px 1fr;gap:7px;padding:8px}
.work-page .specimen-in span:nth-child(4){grid-template-columns:40px 1fr}
.work-page .specimen-out span{grid-template-columns:1fr 1.4fr;gap:10px;padding:8px}
.work-page .gate-copy{font-size:.75rem}
.work-page .hw-stream{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:900px;margin:44px auto 0}
.work-page .hw-stream-origin{position:relative;border-top:1px solid #b6aea1;border-bottom:1px solid #b6aea1;padding:28px 0}
.work-page .hw-stream-origin strong{display:block;font:500 .85rem/1.5 "IBM Plex Mono",monospace}
.work-page .hw-stream-origin span{display:block;margin-top:12px;font:500 .75rem/1.5 "IBM Plex Mono",monospace;color:#7a5a3a}
.work-page .hw-stream-origin:after{content:"";position:absolute;left:100%;width:64px;top:50%;border-top:2px solid #7a5a3a}
.work-page .hw-stream ul{border-left:2px solid #7a5a3a}
.work-page .hw-stream li{position:relative;padding:12px 0 12px 28px;font-size:1rem;line-height:1.5}
.work-page .hw-stream li:before{content:"";position:absolute;left:0;top:50%;width:18px;border-top:1px solid #7a5a3a}
.work-page .hw-use-rows{margin-top:42px;border-top:1px solid rgba(21,26,31,.2)}
.work-page .hw-use-row{display:grid;grid-template-columns:.65fr 1.35fr;gap:40px;padding:25px 0;border-bottom:1px solid rgba(21,26,31,.2)}
.work-page .hw-use-row h3{font-size:1.2rem;font-weight:500;margin:0;line-height:1.45}
.work-page .hw-use-row p{font-size:1rem;line-height:1.65;color:#50585e;margin:0}
.work-page .hw-deployment{background:#e6e7e6}
.work-page .hw-environment{margin:40px 0 0;height:340px;background:#151a1f}
.work-page .hw-environment img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:grayscale(1) brightness(.75)}
.work-page .hw-family{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:42px;border-top:1px solid #9fb8d8;border-bottom:1px solid rgba(21,26,31,.2)}
.work-page .hw-family>div{padding:26px 28px;border-left:1px solid rgba(21,26,31,.2)}
.work-page .hw-family>div:first-child{padding-left:0;border-left:0}
.work-page .hw-family span{font:500 .75rem/1.5 "IBM Plex Mono",monospace;color:#7a5a3a}
.work-page .hw-family h3{margin:13px 0 0;font-size:2rem;line-height:1.2;font-weight:300}
.work-page .hw-text-link{display:inline-flex;gap:28px;align-items:center;margin-top:28px;padding:12px 0;border-bottom:1px solid #7a5a3a;font-weight:500;line-height:1.5}
.work-page .hw-text-link span{color:#7a5a3a}
.work-page .hw-boundaries{background:#edf1f3}
.work-page .site-header a[aria-current="page"]{color:#7a5a3a}
@media(max-width:1100px){
 .work-page .hw-hero-copy,.work-page .hw-intro{grid-template-columns:1fr;gap:28px}
 .work-page .hw-heading h2,.work-page .hw-hero h1{max-width:820px}
 .work-page .hw-body{max-width:850px}
 .work-page .hw-contract{grid-template-columns:1fr 24px 1.1fr 24px 1.25fr;gap:12px}
 .work-page .hw-comparison{grid-template-columns:1fr}
 .work-page .hw-comparison article+article{border-left:0;border-top:1px solid rgba(21,26,31,.22)}
 .work-page .hw-comparison h3{min-height:0}
 .work-page .transformation-labels,.work-page .transformation-visual{grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr);column-gap:20px}
 .work-page .specimen-in span{grid-template-columns:38px 1fr}
}
@media(max-width:700px){
 .work-page .hw-section,.work-page .hw-hero{padding:58px 26px}
 .work-page .hw-hero h1{font-size:clamp(2.4rem,8.6vw,3rem)}
 .work-page .hw-heading h2{font-size:2.1rem}
 .work-page .hw-contract{grid-template-columns:1fr;text-align:center;margin-top:38px;gap:18px}
 .work-page .hw-contract i{transform:rotate(90deg)}
 .work-page .hw-contract>strong{padding:18px 8px}
 .work-page .hw-comparison article{padding:26px 0}
 .work-page .hw-repeated li{gap:22px;grid-template-columns:1fr 1fr}
 .work-page .hw-repeated li>span{font-size:.75rem}
 .work-page .hw-subscribers{grid-template-columns:1fr;gap:12px}
 .work-page .hw-shared-plane{padding:22px 10px}
 .work-page .hw-shared-plane strong{font-size:.75rem;letter-spacing:0}
 .work-page .hw-listen{grid-template-columns:1fr;margin-top:24px}
 .work-page .hw-incoming{border-right:0;border-bottom:2px solid #9fb8d8;min-height:135px}
 .work-page .hw-listen-target{border-top:0}
 .work-page .transformation-labels{display:none}
 .work-page .transformation-visual{grid-template-columns:1fr;gap:0;padding:0}
 .work-page .specimen-in span{grid-template-columns:40px 1fr 40px 1fr}
 .work-page .data-specimen:before,.work-page .transformation-gate:before{font-size:.75rem}
 .work-page .gate-field{inset:0}
 .work-page .hw-stream{grid-template-columns:1fr;gap:28px;margin-top:30px}
 .work-page .hw-stream-origin:after{left:50%;top:100%;height:28px;width:0;border-top:0;border-left:2px solid #7a5a3a}
 .work-page .hw-use-row{grid-template-columns:1fr;gap:10px;padding:23px 0}
 .work-page .hw-environment{height:280px}
 .work-page .hw-family{grid-template-columns:1fr}
 .work-page .hw-family>div,.work-page .hw-family>div:first-child{padding:24px 0;border-left:0}
 .work-page .hw-family>div+div{border-top:1px solid rgba(21,26,31,.2)}
}
@media(max-width:430px){
 .work-page .hw-actions{flex-direction:column;align-items:stretch}
 .work-page .hw-actions .button{width:100%}
 .work-page .specimen-in span{grid-template-columns:40px 1fr}
 .work-page .hw-stream li{padding-left:24px}
}

/* Review copy: explanatory captions and representative-use lead-in. */
.work-page .transformation-labels small{display:block;margin-top:7px;font:400 .875rem/1.45 "IBM Plex Sans",Arial,sans-serif;letter-spacing:0;color:#b6aea1}
.work-page .hw-representative{margin:42px 0 0;font-size:1.0625rem;line-height:1.7;color:#50585e}
.work-page .hw-representative+.hw-use-rows{margin-top:12px}
@media(max-width:700px){
 .work-page .specimen-in:before{content:"INCOMING DATA\A Data in its source form";white-space:pre-line;line-height:1.6}
 .work-page .specimen-out:before{content:"PREPARED DATA\A Structured · Preprocessed · Ready for downstream use";white-space:pre-line;line-height:1.6}
 .work-page .transformation-gate:before{content:"TRANSFORM"}
}