/* UWIN33 English user-needs guide — layout v2.
   This stylesheet intentionally changes the page composition from a sidebar + long article
   into an editorial masthead, horizontal navigation dock and multi-column information clusters. */

/* ---------- HERO: editorial masthead ---------- */
.uwin33-guide-hero{position:relative;padding:54px 0 76px;background:radial-gradient(circle at 82% 18%,rgba(255,194,62,.16),transparent 26%),linear-gradient(120deg,#090a0c 0%,#141519 56%,#241b0e 100%);border-bottom:1px solid rgba(255,194,62,.22);overflow:hidden}
.uwin33-guide-hero::before{content:"UWIN33";position:absolute;right:-24px;bottom:-50px;color:rgba(255,255,255,.025);font-size:clamp(120px,20vw,300px);font-weight:900;line-height:.75;letter-spacing:-.08em;pointer-events:none}
.uwin33-hero-shell{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);gap:0;align-items:stretch}
.uwin33-hero-copy{position:relative;z-index:2;min-height:390px;padding:58px 58px 122px;border:1px solid rgba(255,194,62,.24);border-right:0;border-radius:32px 0 0 32px;background:linear-gradient(145deg,rgba(24,25,29,.96),rgba(10,11,13,.96));box-shadow:0 28px 70px rgba(0,0,0,.28);overflow:hidden}
.uwin33-hero-copy::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(180deg,var(--uwin-yellow-bright),var(--uwin-yellow-deep))}
.uwin33-hero-copy::after{content:"";position:absolute;width:340px;height:340px;right:-120px;top:-145px;border:54px solid rgba(255,194,62,.075);border-radius:50%}
.uwin33-eyebrow{display:inline-block;color:#b87300!important;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.uwin33-guide-hero .uwin33-eyebrow{position:relative;z-index:1;color:var(--uwin-yellow)!important}
.uwin33-hero-copy h1{position:relative;z-index:1;max-width:880px;margin:16px 0 0;color:#fff;font-size:clamp(44px,5.5vw,76px);font-weight:900;line-height:.96;letter-spacing:-.055em;text-wrap:balance}
.uwin33-hero-copy p{position:relative;z-index:1;max-width:760px;margin:22px 0 0;color:#d8d9d4!important;font-size:16px;line-height:1.72}
.uwin33-hero-tags{position:absolute;z-index:2;left:58px;right:36px;bottom:42px;display:flex;flex-wrap:wrap;gap:8px;margin:0}.uwin33-hero-tags span{padding:8px 12px;border:1px solid rgba(255,194,62,.28);border-radius:8px;color:#ffe1a1!important;background:rgba(255,194,62,.06);font-size:10px;font-weight:900;letter-spacing:.04em}
.uwin33-hero-start{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:38px 34px;border:1px solid #e6a829;border-radius:0 32px 32px 0;background:linear-gradient(155deg,#ffd56f 0%,#ffc23e 52%,#e49a12 100%);box-shadow:0 28px 70px rgba(0,0,0,.22)}
.uwin33-start-label{display:block;margin-bottom:16px;color:#281a05!important;font-size:10px;font-weight:900;letter-spacing:.17em}
.uwin33-hero-start ol{list-style:none;margin:0;padding:0}.uwin33-hero-start li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:18px 0;border-top:1px solid rgba(39,25,5,.18)}.uwin33-hero-start li:first-child{border-top:0}
.uwin33-hero-start li>b{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:#111214;color:var(--uwin-yellow)!important;font-size:10px;box-shadow:0 6px 16px rgba(0,0,0,.18)}.uwin33-hero-start strong{display:block;color:#181108;font-size:14px;font-weight:900}.uwin33-hero-start p{margin:5px 0 0;color:#4d3511!important;font-size:12px;line-height:1.5}

/* ---------- GUIDE SHELL: full-width navigation dock ---------- */
.uwin33-guide-page{display:block;margin-bottom:40px}
.uwin33-guide-sidebar{position:relative;z-index:8;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;margin:-42px 0 28px}
.uwin33-sidebar-card,.uwin33-sidebar-rule{border:1px solid rgba(0,0,0,.10);box-shadow:0 18px 42px rgba(0,0,0,.09)}
.uwin33-sidebar-card{padding:20px 22px;border-radius:22px;background:rgba(255,255,255,.97);backdrop-filter:blur(10px)}.uwin33-sidebar-kicker{color:#9a6100!important;font-size:9px;font-weight:900;letter-spacing:.18em}.uwin33-sidebar-card h2{margin:5px 0 4px;color:#151515;font-size:20px;font-weight:900;line-height:1.08}.uwin33-sidebar-card>p{margin:0 0 14px;color:#6d6f69!important;font-size:12px;line-height:1.5}
.uwin33-sidebar-nav{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 7px;scrollbar-width:thin}.uwin33-sidebar-nav button{display:inline-grid;grid-template-columns:25px max-content;gap:7px;align-items:center;flex:0 0 auto;padding:8px 11px;border:1px solid #deded8;border-radius:999px;background:#f7f7f3;color:#363636;text-align:left;font-size:11px;font-weight:900;transition:.2s ease}.uwin33-sidebar-nav button span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e7e7e1;color:#6d6d68;font-size:8px}.uwin33-sidebar-nav button:hover,.uwin33-sidebar-nav button.is-active{border-color:#111214;background:#111214;color:#fff;transform:translateY(-1px)}.uwin33-sidebar-nav button:hover span,.uwin33-sidebar-nav button.is-active span{background:var(--uwin-yellow);color:#111}
.uwin33-sidebar-rule{display:flex;flex-direction:column;justify-content:center;padding:22px;border-radius:22px;background:linear-gradient(145deg,#17181b,#090a0b)}.uwin33-sidebar-rule>span{color:var(--uwin-yellow)!important;font-size:9px;font-weight:900;letter-spacing:.16em}.uwin33-sidebar-rule strong{display:block;margin:7px 0;color:#fff;font-size:16px;line-height:1.25}.uwin33-sidebar-rule p{margin:0;color:#cfd0ca!important;font-size:11px;line-height:1.5}

/* ---------- MAIN COMPOSITION: clustered magazine grid ---------- */
.uwin33-guide-content{display:block;min-width:0}
.uwin33-layout-cluster{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin:0 0 16px;padding:16px;border-radius:30px}
.uwin33-layout-cluster::before{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.06);border-radius:inherit;pointer-events:none}
.uwin33-cluster-foundation{background:linear-gradient(135deg,#eeeeda,#f8f8f3 46%,#fff8e9)}
.uwin33-cluster-usage{background:linear-gradient(135deg,#111214,#1e2024)}
.uwin33-cluster-validation{background:linear-gradient(135deg,#f7f7f2,#ecece7)}
.uwin33-cluster-decisions{background:linear-gradient(135deg,#fff9ed,#f1f1ec)}

.uwin33-chapter{position:relative;z-index:1;padding:32px;border:1px solid rgba(0,0,0,.10);border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.055);scroll-margin-top:20px;overflow:hidden}
.uwin33-chapter::after{content:"";position:absolute;width:110px;height:4px;right:24px;top:0;border-radius:0 0 99px 99px;background:linear-gradient(90deg,transparent,var(--uwin-yellow));opacity:.7}
.uwin33-chapter-dark{background:#111214;border-color:#292b30;box-shadow:0 15px 36px rgba(0,0,0,.18)}.uwin33-chapter-compact{padding:28px}.uwin33-conclusion{background:linear-gradient(135deg,#fff8e8,#fff,#f4f2ed)}
.uwin33-section-head{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:start}.uwin33-section-no{display:grid;place-items:center;min-height:48px;padding:0 7px;border:1px solid #d99512;border-radius:12px;background:var(--uwin-yellow);color:#0b0b0b!important;font-size:10px;font-weight:900;box-shadow:0 8px 18px rgba(189,119,0,.15)}.uwin33-section-head h2,.uwin33-split-title h2,.uwin33-conclusion h2{margin:5px 0 0;color:#171717;font-size:clamp(25px,2.5vw,38px);font-weight:900;line-height:1.04;letter-spacing:-.036em}.uwin33-section-head p,.uwin33-split-title p{max-width:880px;margin:9px 0 0;color:#6a6c66!important;line-height:1.64}.uwin33-chapter-dark .uwin33-section-head h2{color:#fff}.uwin33-chapter-dark .uwin33-section-head p{color:#d0d1cc!important}.uwin33-chapter-dark .uwin33-eyebrow{color:var(--uwin-yellow)!important}

/* Cluster widths: intentionally asymmetric to create a new page rhythm. */
.uwin33-cluster-foundation #user-needs{grid-column:span 5}.uwin33-cluster-foundation #need-map{grid-column:span 7}.uwin33-cluster-foundation #feature-meaning{grid-column:span 8}.uwin33-cluster-foundation #feature-fit{grid-column:span 4}
.uwin33-cluster-usage #info-types{grid-column:1/-1}.uwin33-device-pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.uwin33-device-pair>section{min-width:0}
.uwin33-cluster-validation #verify{grid-column:span 7}.uwin33-cluster-validation #third-party{grid-column:span 5}.uwin33-cluster-validation #what-to-find{grid-column:span 5}.uwin33-cluster-validation #checklist{grid-column:span 7}
.uwin33-cluster-decisions #user-questions{grid-column:span 5}.uwin33-cluster-decisions #faq{grid-column:span 7}.uwin33-cluster-decisions .uwin33-conclusion{grid-column:1/-1}

/* ---------- COMPONENTS ---------- */
.uwin33-priority-stack{display:grid;gap:9px;margin-top:22px}.uwin33-priority-stack article{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border:1px solid rgba(255,194,62,.18);border-radius:13px;background:#18191c}.uwin33-priority-stack b{display:grid;place-items:center;min-height:50px;border-radius:10px;background:linear-gradient(145deg,var(--uwin-yellow-bright),var(--uwin-yellow));color:#111!important;font-size:9px;letter-spacing:.09em}.uwin33-priority-stack h3{margin:0 0 4px;color:#fff;font-size:15px;font-weight:900}.uwin33-priority-stack p{margin:0;color:#c9cac5!important;line-height:1.54;font-size:12px}

.uwin33-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}.uwin33-bento article{min-height:145px;padding:18px;border:1px solid rgba(0,0,0,.09);border-radius:14px;background:#f7f7f3}.uwin33-bento .uwin33-bento-wide{grid-column:span 2;background:linear-gradient(135deg,#f2f2ee,#fff6e4)}.uwin33-bento article>span{display:inline-block;margin-bottom:16px;padding:5px 8px;border-radius:999px;background:#111214;color:var(--uwin-yellow)!important;font-size:8px;font-weight:900;letter-spacing:.1em}.uwin33-bento h3{margin:0 0 7px;color:#181818;font-size:16px;font-weight:900}.uwin33-bento p{margin:0;color:#6b6d67!important;line-height:1.58;font-size:12px}

.uwin33-split-chapter{display:block;background:linear-gradient(145deg,#fff,#f3f2ed)}.uwin33-split-title{padding-right:0}.uwin33-split-title .uwin33-section-no{width:50px;margin-bottom:16px}.uwin33-timeline{position:relative;display:grid;gap:8px;margin-top:22px}.uwin33-timeline::before{content:"";position:absolute;left:21px;top:24px;bottom:24px;width:2px;background:#d7d7d1}.uwin33-timeline article{position:relative;z-index:1;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:13px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff}.uwin33-timeline article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#111214;color:var(--uwin-yellow)!important;font-weight:900}.uwin33-timeline h3{margin:0 0 3px;color:#191919;font-size:14px;font-weight:900}.uwin33-timeline p{margin:0;color:#6b6d67!important;line-height:1.52;font-size:12px}

.uwin33-signal-matrix{display:grid;gap:7px;margin-top:22px;border:0;border-radius:0;overflow:visible}.uwin33-matrix-row{display:grid;grid-template-columns:minmax(135px,.72fr) minmax(0,1fr) minmax(0,1.05fr);border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff;overflow:hidden}.uwin33-matrix-row>*{padding:13px 14px;border-left:1px solid rgba(0,0,0,.07)}.uwin33-matrix-row>*:first-child{border-left:0}.uwin33-matrix-head{border-color:#1c1d20;background:#111214;color:#fff}.uwin33-matrix-head span{color:#fff!important;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.uwin33-matrix-row strong{color:#181818;font-size:12px}.uwin33-matrix-row span{color:#646660!important;line-height:1.5;font-size:12px}

.uwin33-scan-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:21px}.uwin33-scan-strip article{padding:15px;border:1px solid rgba(0,0,0,.08);border-radius:13px;background:#f4f4ef}.uwin33-scan-strip article:nth-child(5){grid-column:1/-1}.uwin33-scan-strip b{display:block;color:#a86b00;font-size:17px}.uwin33-scan-strip strong{display:block;margin:7px 0 4px;color:#1b1b1b}.uwin33-scan-strip span{display:block;color:#70716d!important;font-size:11px;line-height:1.43}

.uwin33-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:22px}.uwin33-link-grid article{padding:16px;border:1px solid rgba(255,194,62,.15);border-radius:13px;background:#18191c}.uwin33-link-grid article>span{display:inline-block;margin-bottom:13px;padding:5px 7px;border-radius:6px;background:var(--uwin-yellow);color:#101010!important;font-size:8px;font-weight:900}.uwin33-link-grid h3{margin:0 0 6px;color:#fff;font-size:14px;font-weight:900}.uwin33-link-grid p{margin:0;color:#c8c9c4!important;line-height:1.52;font-size:11px}

.uwin33-question-board{display:grid;grid-template-columns:1fr;gap:8px;margin-top:22px}.uwin33-question-board article{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#f8f8f5}.uwin33-question-board article>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--uwin-yellow);color:#111!important;font-size:9px;font-weight:900}.uwin33-question-board h3{grid-column:2;margin:0;color:#191919;font-size:14px;font-weight:900}.uwin33-question-board p{grid-column:2;margin:-3px 0 0;color:#696b66!important;line-height:1.48;font-size:11px}.uwin33-question-board article:nth-child(5){grid-column:auto}

.uwin33-checklist{background:linear-gradient(145deg,#111214,#1f2125);border-color:#2d2f34}.uwin33-checklist .uwin33-section-head h2{color:#fff}.uwin33-checklist .uwin33-section-head p{color:#cccdc7!important}.uwin33-checklist .uwin33-eyebrow{color:var(--uwin-yellow)!important}.uwin33-checklist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px}.uwin33-checklist-grid article{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;padding:12px;border:1px solid rgba(255,194,62,.15);border-radius:11px;background:#17181b}.uwin33-checklist-grid article>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--uwin-yellow);color:#111!important;font-weight:900}.uwin33-checklist-grid strong{color:#fff;font-size:12px}.uwin33-checklist-grid p{grid-column:2;margin:-1px 0 0;color:#c5c6c1!important;line-height:1.46;font-size:11px}

.uwin33-faq-list{display:grid;grid-template-columns:1fr;gap:8px;margin-top:22px}.uwin33-faq-list details{border:1px solid rgba(0,0,0,.10);border-radius:12px;background:#f8f8f5;overflow:hidden}.uwin33-faq-list details[open]{background:#fff;border-color:rgba(230,156,25,.4);box-shadow:0 8px 20px rgba(0,0,0,.05)}.uwin33-faq-list summary{position:relative;padding:15px 42px 15px 16px;color:#181818;cursor:pointer;list-style:none;font-size:12px;font-weight:900;line-height:1.4}.uwin33-faq-list summary::-webkit-details-marker{display:none}.uwin33-faq-list summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#875500;font-size:20px}.uwin33-faq-list details[open] summary::after{content:"−"}.uwin33-faq-list details p{margin:0;padding:0 16px 15px;color:#676963!important;line-height:1.58;font-size:11px}

.uwin33-conclusion{padding:34px}.uwin33-conclusion h2{max-width:930px}.uwin33-conclusion p{max-width:980px;margin:11px 0 0;color:#666861!important;font-size:14px;line-height:1.7}
.uwin33-footer-guide-note{padding:24px 0}.uwin33-footer-guide-note strong{display:block;margin-bottom:7px;color:var(--uwin-yellow)!important;font-size:18px}.uwin33-footer-guide-note p{max-width:940px;margin:0;color:#e5e5df!important;line-height:1.7}

/* Preserve original banner dimensions; only the surrounding guide layout changes. */
.uwin33-signal-theme .banner{min-height:0!important}.uwin33-signal-theme .banner-carousel,.uwin33-signal-theme .banner-carousel .slick-list,.uwin33-signal-theme .banner-carousel .slick-track,.uwin33-signal-theme .banner-carousel .slick-slide{min-height:0!important}.uwin33-signal-theme .banner .slick-slide img,.uwin33-signal-theme .banner-carousel>div:first-child img{min-height:0!important;object-fit:cover}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1180px){
  .uwin33-hero-shell{grid-template-columns:1fr}.uwin33-hero-copy{border-right:1px solid rgba(255,194,62,.24);border-radius:28px 28px 0 0;padding-bottom:54px}.uwin33-hero-tags{position:relative;left:auto;right:auto;bottom:auto;margin-top:22px}.uwin33-hero-start{border-radius:0 0 28px 28px;display:block}.uwin33-hero-start ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.uwin33-hero-start li{display:block;padding:15px}.uwin33-hero-start li+li{border-top:0;border-left:1px solid rgba(39,25,5,.18)}.uwin33-hero-start li>b{margin-bottom:9px}
  .uwin33-guide-sidebar{grid-template-columns:1fr;margin-top:-36px}.uwin33-sidebar-rule{display:grid;grid-template-columns:100px 240px minmax(0,1fr);gap:12px;align-items:center}.uwin33-sidebar-rule strong{margin:0}.uwin33-sidebar-rule p{margin:0}
  .uwin33-layout-cluster{grid-template-columns:repeat(2,minmax(0,1fr))}.uwin33-layout-cluster>section,.uwin33-cluster-foundation #user-needs,.uwin33-cluster-foundation #need-map,.uwin33-cluster-foundation #feature-meaning,.uwin33-cluster-foundation #feature-fit,.uwin33-cluster-validation #verify,.uwin33-cluster-validation #third-party,.uwin33-cluster-validation #what-to-find,.uwin33-cluster-validation #checklist,.uwin33-cluster-decisions #user-questions,.uwin33-cluster-decisions #faq{grid-column:span 1}.uwin33-cluster-usage #info-types,.uwin33-cluster-decisions .uwin33-conclusion,.uwin33-device-pair{grid-column:1/-1}
  .uwin33-device-pair{grid-template-columns:1fr 1fr}.uwin33-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .uwin33-guide-hero{padding:28px 0 58px}.uwin33-hero-copy{min-height:0;padding:34px 26px 34px}.uwin33-hero-copy h1{font-size:clamp(38px,10vw,58px)}.uwin33-hero-copy p{font-size:14px}.uwin33-hero-start{padding:24px 20px}.uwin33-hero-start ol{grid-template-columns:1fr}.uwin33-hero-start li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:13px 0}.uwin33-hero-start li+li{border-left:0;border-top:1px solid rgba(39,25,5,.18)}.uwin33-hero-start li>b{margin-bottom:0}
  .uwin33-guide-sidebar{margin-top:-30px}.uwin33-sidebar-rule{display:block}.uwin33-sidebar-rule strong{margin:7px 0}.uwin33-layout-cluster{display:block;padding:10px;border-radius:22px}.uwin33-layout-cluster>.uwin33-chapter,.uwin33-device-pair>.uwin33-chapter{margin-bottom:10px}.uwin33-device-pair{display:block}.uwin33-chapter{padding:24px 18px;border-radius:17px}.uwin33-section-head{grid-template-columns:44px minmax(0,1fr);gap:10px}.uwin33-section-no{min-height:40px}.uwin33-bento,.uwin33-checklist-grid,.uwin33-link-grid{grid-template-columns:1fr}.uwin33-bento .uwin33-bento-wide{grid-column:auto}.uwin33-signal-matrix{overflow-x:auto}.uwin33-matrix-row{min-width:680px}.uwin33-priority-stack article{grid-template-columns:64px minmax(0,1fr)}
}
@media(max-width:520px){
  .uwin33-hero-copy{padding:30px 20px}.uwin33-sidebar-card{padding:18px 15px}.uwin33-sidebar-nav button{grid-template-columns:22px max-content;padding:7px 9px}.uwin33-sidebar-nav button span{width:21px;height:21px}.uwin33-question-board article{grid-template-columns:36px minmax(0,1fr)}.uwin33-question-board article>span{width:32px;height:32px}.uwin33-priority-stack article{grid-template-columns:1fr}.uwin33-priority-stack b{min-height:34px;width:max-content;padding:0 10px}.uwin33-scan-strip{grid-template-columns:1fr}.uwin33-scan-strip article:nth-child(5){grid-column:auto}
}
