/* ── Sample Work page (ported from portfolio, site tokens) ── */
.pw{--bg:#fff;--bg-2:var(--soft);--surface:#fff;--surface-2:var(--soft);--border:var(--line);--text:var(--navy);--text-2:var(--slate);--text-3:var(--grey);--accent:var(--purple);--accent-2:var(--orange);--accent-bg:var(--purple-soft);--teal-bg:#FFF1E6;--tag-text:#3D35C9;--tag-bg:var(--purple-soft);color:var(--navy);font-size:15px;line-height:1.6;padding-bottom:96px}
.pw *{box-sizing:border-box}
.pw .trust-bar,.pw .method-banner,.pw .tabs-wrap .tabs,.pw .sections{max-width:var(--w)}
.pw .sections{padding:0 32px}
@media(max-width:620px){.pw .sections{padding:0 16px}}
.pw .method-steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pw .eyebrow{font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px;}
/* ─── TRUST BAR ─── */
.pw .trust-bar{background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.pw .trust-inner{max-width: 900px; margin: 0 auto; display: flex; padding: 0 16px; overflow-x: auto; scrollbar-width: none;}
.pw .trust-inner::-webkit-scrollbar{display: none;}
.pw .trust-stat{flex: 1; min-width: 130px; text-align: center; padding: 14px 12px; border-right: 1px solid var(--border);}
.pw .trust-stat:last-child{border-right: none;}
.pw .trust-num{font-family:var(--sans); font-size: 20px; font-weight:600; color: var(--accent); display: block; line-height: 1;}
.pw .trust-label{font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.3;}
/* ─── METHODOLOGY BANNER ─── */
.pw .method-banner{max-width: 900px; margin: 28px auto 0; padding: 0 16px;}
.pw .method-card{background: var(--navy); border-radius: 16px; padding: 24px 28px; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;}
.pw .method-left{flex: 1; min-width: 220px;}
.pw .method-eyebrow{font-size: 10px; font-weight:600; letter-spacing: .12em; text-transform: uppercase; color: #7B9FFF; margin-bottom: 6px;}
.pw .method-title{font-family:var(--sans); font-size: 20px; font-weight:600; color: #fff; line-height: 1.2; margin-bottom: 8px;}
.pw .method-desc{font-size: 13px; color: #A5B4FC; line-height: 1.6;}
.pw .method-phases{display: flex; gap: 8px; flex-wrap: wrap; flex: 2; min-width: 280px; align-items: center; justify-content: flex-end;}
.pw .phase{background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 14px; min-width: 100px; text-align: center;}
.pw .phase-num{font-size: 10px; font-weight:600; color: #7B9FFF; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px;}
.pw .phase-name{font-family:var(--sans); font-size: 14px; font-weight:600; color: #fff;}
.pw .phase-arrow{font-size: 18px; color: rgba(255,255,255,0.25);}
@media (max-width: 560px){.pw .method-phases{justify-content: flex-start;}
.pw .phase-arrow{display: none;}}
/* ─── TABS ─── */
.pw .tabs-wrap{position: sticky; top:68px; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 28px;}
.pw .tabs-wrap::-webkit-scrollbar{display: none;}
.pw .tabs{display: flex; padding: 0 16px; min-width: max-content; margin: 0 auto; max-width: 900px;}
.pw .tab-btn{background: none; border: none; border-bottom: 2px solid transparent; padding: 14px 18px; font-family:var(--sans); font-size: 13px; font-weight: 500; color: var(--text-3); cursor: pointer; white-space: nowrap; transition: color .18s, border-color .18s; margin-bottom: -1px;}
.pw .tab-btn:hover{color: var(--text-2);}
.pw .tab-btn.active{color: var(--accent); border-bottom-color: var(--accent);}
/* ─── SECTIONS ─── */
.pw .sections{max-width: 900px; margin: 0 auto; padding: 0 16px;}
.pw .section{display: none; padding-top: 36px;}
.pw .section.active{display: block;}
.pw .category-label{display: flex; align-items: center; gap: 10px; margin-bottom: 8px;}
.pw .category-label h2{font-family:var(--sans); font-size: 22px; font-weight:600;}
.pw .cat-dot{width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;}
.pw .method-tag{font-size: 11px; color: var(--text-3); margin-bottom: 22px;}
.pw .method-tag strong{color: var(--accent);}
/* ─── CASE CARD ─── */
.pw .case-card{background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 20px;}
.pw .case-header{padding: 20px 24px 16px; border-bottom: 1px solid var(--border);}
.pw .case-type{font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px;}
.pw .case-title{font-family:var(--sans); font-size: 17px; font-weight:600; line-height: 1.3; margin-bottom: 8px;}
.pw .case-tags{display: flex; gap: 6px; flex-wrap: wrap;}
.pw .tag{background: var(--tag-bg); color: var(--tag-text); border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 500;}
/* ─── FUNNEL CHAIN ─── */
.pw .funnel-chain{display: flex; align-items: stretch; border-bottom: 1px solid var(--border); overflow-x: auto;}
.pw .funnel-step{flex: 1; min-width: 100px; padding: 16px 20px; border-right: 1px solid var(--border); position: relative;}
.pw .funnel-step:last-child{border-right: none;}
.pw .funnel-step.highlight{background: var(--accent-bg);}
.pw .funnel-step.highlight .f-num{color: var(--accent);}
.pw .f-phase{font-size: 9px; font-weight:600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px;}
.pw .f-num{font-family:var(--sans); font-size: 22px; font-weight:600; color: var(--text-2); line-height: 1; font-variant-numeric: tabular-nums;}
.pw .f-label{font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.3;}
.pw .f-arrow{position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--accent); z-index: 2; background: var(--surface); padding: 0 2px;}
.pw .funnel-step.highlight .f-arrow{background: var(--accent-bg);}
@media (max-width: 620px){.pw .funnel-chain{flex-direction: column;}
.pw .funnel-step{border-right: none; border-bottom: 1px solid var(--border);}
.pw .funnel-step:last-child{border-bottom: none;}
.pw .f-arrow{display: none;}}
/* ─── CASE BODY ─── */
.pw .case-body{padding: 20px 24px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
@media (max-width: 620px){.pw .case-body{grid-template-columns: 1fr;}}
.pw .body-section-title{font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;}
.pw .story-text{font-size: 14px; color: var(--text-2); line-height: 1.7;}
.pw .story-text strong{color: var(--text); font-weight: 600;}
/* ─── TESTIMONIAL ─── */
.pw .testimonial-wrap{padding: 0 24px 20px; border-top: 1px solid var(--border); padding-top: 16px;}
.pw .testimonial{background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 14px 16px;}
.pw .testimonial-text{font-size: 13px; font-style: italic; color: var(--text-2); line-height: 1.7; margin-bottom: 10px;}
.pw .testimonial-footer{display: flex; align-items: center; gap: 10px;}
.pw .testimonial-avatar{width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight:600; color: #fff; flex-shrink: 0;}
.pw .testimonial-meta{flex: 1;}
.pw .testimonial-name{font-size: 13px; font-weight: 600; color: var(--text);}
.pw .testimonial-role{font-size: 11px; color: var(--text-3);}
.pw .testimonial-verified{font-size: 10px; color: var(--accent-2); font-weight: 600; margin-top: 1px;}
/* ─── DELIVERABLE CARD ─── */
.pw .deliverable-card{background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 24px;}
.pw .deliverable-header{padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;}
.pw .deliverable-label{font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);}
.pw .del-badges{display: flex; gap: 6px;}
.pw .del-badge{border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600;}
.pw .badge-teal{background: var(--teal-bg); color: var(--accent-2);}
.pw .badge-method{background: var(--accent-bg); color: var(--accent);}
/* ─── DIAG TABLE ─── */
.pw .diag-table{width: 100%; border-collapse: collapse; font-size: 13px;}
.pw .diag-table th{text-align: left; padding: 10px 16px; background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;}
.pw .diag-table td{padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top;}
.pw .diag-table tr:last-child td{border-bottom: none;}
.pw .status-pill{display: inline-block; border-radius: 20px; padding: 2px 8px; font-size: 11px; font-weight: 600;}
.pw .pill-red{background: #FEE2E2; color: #9B1C1C;}
.pw .pill-amber{background: #FEF3C7; color: #92400E;}
.pw .pill-green{background: #D1FAE5; color: #065F46;}
/* ─── EMAIL SEQ ─── */
.pw .email-seq{padding: 16px 20px;}
.pw .email-item{border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2);}
.pw .email-day{font-size: 10px; font-weight: 600; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px;}
.pw .email-subj{font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px;}
.pw .email-preview{font-size: 12px; color: var(--text-3); line-height: 1.5;}
/* ─── WORKFLOW ─── */
.pw .workflow-viz{padding: 20px 16px;}
.pw .wf-row{display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;}
.pw .wf-node{display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--surface-2); font-size: 12px; font-weight: 500; color: var(--text-2);}
.pw .wf-node .icon{width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight:600; flex-shrink: 0;}
.pw .wf-node.trigger .icon{background: #DBEAFE; color: #1D4ED8;}
.pw .wf-node.ai .icon{background: #EDE9FE; color: #5B21B6;}
.pw .wf-node.action .icon{background: #D1FAE5; color: #065F46;}
.pw .wf-node.filter .icon{background: #FEF3C7; color: #92400E;}
.pw .wf-arrow{color: var(--text-3); font-size: 14px; flex-shrink: 0;}
.pw .wf-sub{font-size: 10px; color: var(--text-3); margin-top: 2px;}
/* ─── SITE MOCK ─── */
.pw .site-preview{padding: 16px;}
.pw .site-mock{border: 1px solid #D1D5DB; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); font-family:var(--sans);}
.pw .site-bar{background: #F3F4F6; padding: 9px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #E5E7EB;}
.pw .site-dots{display: flex; gap: 5px;}
.pw .dot{width: 9px; height: 9px; border-radius: 50%;}
.pw .dot-r{background: #FF5F57;}
.pw .dot-y{background: #FFBD2E;}
.pw .dot-g{background: #28CA41;}
.pw .site-url{font-size: 10px; color: #6B7280; background: #fff; border: 1px solid #E5E7EB; border-radius: 5px; padding: 3px 10px; flex: 1; text-align: center;}
/* NAV — light */
.pw .site-nav{background: #fff; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F0F0F0;}
.pw .site-nav-logo{font-family:var(--sans); font-size: 13px; font-weight:600; color: var(--navy); padding: 12px 0; display: flex; align-items: center; gap: 6px;}
.pw .site-nav-logo .logo-dot{width: 8px; height: 8px; background: var(--purple); border-radius: 2px;}
.pw .site-nav-links{display: flex; gap: 20px;}
.pw .site-nav-links a,.pw .site-nav-links span{font-size: 10px; color: #6B7280; text-decoration: none; font-weight: 500;}
.pw .site-nav-right{display: flex; align-items: center; gap: 8px;}
.pw .site-nav-login{font-size: 10px; color: #374151; font-weight: 500;}
.pw .site-nav-cta{background: var(--navy); color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 10px; font-weight: 600; cursor: pointer;}
/* HERO — clean light */
.pw .site-hero{background: #FAFBFF; padding: 30px 24px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; border-bottom: 1px solid #F0F0F0;}
@media (max-width: 540px){.pw .site-hero{grid-template-columns: 1fr;}
.pw .site-hero-img{display: none;}}
.pw .site-hero-text{}
.pw .site-hero-badge{display: inline-flex; align-items: center; gap: 5px; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 20px; padding: 3px 10px; font-size: 9px; font-weight: 600; color: #3730A3; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px;}
.pw .site-hero h3{font-family:var(--sans); font-size: 18px; font-weight:600; color: var(--navy); line-height: 1.25; margin-bottom: 10px; text-wrap: balance;}
.pw .site-hero h3 em{font-style: normal; color: var(--purple);}
.pw .site-hero-sub{font-size: 11px; color: #6B7280; line-height: 1.65; margin-bottom: 16px;}
.pw .site-hero-btns{display: flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.pw .site-btn-primary{background: var(--purple); color: #fff; border: none; border-radius: 7px; padding: 8px 14px; font-size: 10px; font-weight: 600; cursor: pointer;}
.pw .site-btn-ghost{background: #fff; color: #374151; border: 1px solid #E5E7EB; border-radius: 7px; padding: 8px 14px; font-size: 10px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 5px;}
.pw .site-hero-img{background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.07);}
.pw .site-mini-card{background: #F8FAFF; border: 1px solid #E5E7EB; border-radius: 7px; padding: 8px 10px; margin-bottom: 7px;}
.pw .site-mini-card:last-child{margin-bottom: 0;}
.pw .site-mini-card-top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;}
.pw .site-mini-label{font-size: 9px; font-weight: 600; color: #374151;}
.pw .site-mini-badge{font-size: 8px; font-weight:600; border-radius: 10px; padding: 1px 6px;}
.pw .badge-green{background: #D1FAE5; color: #065F46;}
.pw .badge-blue{background: #DBEAFE; color: #1E40AF;}
.pw .badge-amber{background: #FEF3C7; color: #92400E;}
.pw .site-mini-bar-track{background: #E5E7EB; border-radius: 4px; height: 5px; overflow: hidden;}
.pw .site-mini-bar-fill{height: 100%; border-radius: 4px;}
/* LOGO STRIP */
.pw .site-logos{background: #fff; border-bottom: 1px solid #F0F0F0; padding: 10px 20px; display: flex; align-items: center; gap: 8px; overflow: hidden;}
.pw .site-logos-label{font-size: 9px; color: #9CA3AF; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; margin-right: 4px;}
.pw .site-logo-pill{background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 5px; padding: 4px 9px; font-size: 9px; font-weight: 600; color: #9CA3AF; white-space: nowrap;}
/* FEATURES STRIP */
.pw .site-features{background: #fff; padding: 20px; border-bottom: 1px solid #F0F0F0;}
.pw .site-features-label{font-size: 9px; font-weight:600; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); text-align: center; margin-bottom: 14px;}
.pw .site-features-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.pw .site-feat{border: 1px solid #F0F0F0; border-radius: 8px; padding: 12px; background: #FAFBFF;}
.pw .site-feat-icon{width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 7px;}
.pw .site-feat-icon.blue{background: #EEF2FF;}
.pw .site-feat-icon.teal{background: #ECFDF5;}
.pw .site-feat-icon.purple{background: #F5F3FF;}
.pw .site-feat-icon.amber{background: #FFFBEB;}
.pw .site-feat h4{font-size: 10px; font-weight:600; color: #111827; margin-bottom: 3px;}
.pw .site-feat p{font-size: 9px; color: #9CA3AF; line-height: 1.5;}
/* SOCIAL + CTA BOTTOM */
.pw .site-reviews{background: #F9FAFB; padding: 14px 20px; border-bottom: 1px solid #F0F0F0;}
.pw .site-reviews-label{font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #9CA3AF; margin-bottom: 10px;}
.pw .site-review-cards{display: flex; gap: 8px; overflow-x: auto;}
.pw .site-review-card{background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 12px; min-width: 160px; flex-shrink: 0;}
.pw .site-review-stars{font-size: 9px; color: #F59E0B; margin-bottom: 4px;}
.pw .site-review-text{font-size: 9px; color: #374151; line-height: 1.5; font-style: italic; margin-bottom: 5px;}
.pw .site-review-by{font-size: 8px; color: #9CA3AF; font-weight: 600;}
.pw .site-cta-section{background: var(--navy); padding: 18px 20px; text-align: center;}
.pw .site-cta-section h4{font-family:var(--sans); font-size: 14px; font-weight:600; color: #fff; margin-bottom: 5px;}
.pw .site-cta-section p{font-size: 10px; color: #9CA3AF; margin-bottom: 12px;}
.pw .site-cta-form{display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;}
.pw .site-input{background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 7px 12px; font-size: 10px; color: rgba(255,255,255,0.5); width: 160px; outline: none;}
.pw .site-cta-btn{background: var(--purple); color: #fff; border: none; border-radius: 6px; padding: 7px 14px; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap;}
.pw .site-footer-note{font-size: 9px; color: rgba(255,255,255,0.2); margin-top: 8px;}
/* ─── TIMELINE ─── */
.pw .timeline-wrap{padding: 16px 20px;}
.pw .timeline-item{display: flex; gap: 12px; margin-bottom: 16px;}
.pw .timeline-item:last-child{margin-bottom: 0;}
.pw .tl-line-wrap{display: flex; flex-direction: column; align-items: center;}
.pw .tl-dot{width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 4px;}
.pw .tl-dot.teal{background: var(--accent-2);}
.pw .tl-line{width: 1px; background: var(--border); flex: 1; margin-top: 4px; min-height: 20px;}
.pw .tl-content{flex: 1;}
.pw .tl-month{font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 2px;}
.pw .tl-heading{font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px;}
.pw .tl-detail{font-size: 12px; color: var(--text-3); line-height: 1.5;}
.pw .tl-result{font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 3px;}
/* ─── BAR CHART ─── */
.pw .bar-chart{padding: 16px 20px;}
.pw .bar-row{display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.pw .bar-label{font-size: 11px; color: var(--text-3); width: 80px; flex-shrink: 0; text-align: right;}
.pw .bar-track{flex: 1; background: var(--surface-2); border-radius: 4px; height: 20px; overflow: hidden;}
.pw .bar-fill{height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 8px; font-size: 10px; font-weight: 600; color: #fff;}
.pw .trust-inner,.pw .method-banner,.pw .tabs,.pw .sections{max-width:var(--w);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}
@media(max-width:620px){.pw .trust-inner,.pw .method-banner,.pw .tabs,.pw .sections{padding-left:16px;padding-right:16px}}