@charset "UTF-8";
:root{--bg:#f9f9f9;--white:#fff;--ink:#24282a;--muted:#4e6f6e;--accent:#3e4649;--line:#e0e0e0;--soft:#efefef;--blue:#f2f2f2}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure,blockquote{margin:0}img,video{display:block;width:100%;max-width:100%;height:auto;max-height:none;object-fit:contain;aspect-ratio:auto}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #2daaa6;outline-offset:5px}p{font-size:17px;line-height:1.65;color:var(--muted)}.container{max-width:1240px;padding-left:48px;padding-right:48px;margin:auto}.site-header{position:sticky;top:0;z-index:10;background:#fffffff5;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.header-inner{max-width:1340px;margin:auto;padding:16px 40px;display:flex;justify-content:space-between;align-items:center;gap:30px}.portfolio-mark{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600}.mark{width:35px;height:35px;background:var(--ink);color:#fff;border-radius:10px;display:grid;place-items:center;font-size:26px;font-family:Georgia,serif;line-height:1;padding-bottom:5px}.portfolio-mark small{display:block;font-size:8px;color:var(--muted);font-weight:400;letter-spacing:1.4px;margin-top:5px}.section-nav{display:flex;gap:30px;align-items:center}.section-nav a{font-size:12px;line-height:44px;position:relative;color:var(--muted)}.section-nav a[aria-current]{color:var(--accent);font-weight:600}.section-nav a[aria-current]:after{content:'';position:absolute;height:2px;bottom:0;left:0;right:0;background:var(--accent)}.reading-progress{height:2px;background:var(--accent);width:0;position:absolute;bottom:-1px;left:0}.eyebrow{display:block;color:var(--accent);font-size:10px;font-weight:600;letter-spacing:1.4px;line-height:1.5}.hero{display:grid;grid-template-columns:1fr 1.2fr;gap:38px 50px;align-items:center;padding-top:66px;padding-bottom:0}.hero h1{font-size:54px;line-height:1.07;font-weight:600;letter-spacing:-2.7px;margin-top:18px}.hero-title{font-size:27px;line-height:1.28;letter-spacing:-.7px;color:var(--ink);margin:20px 0 18px}.hero-description{font-size:16px;max-width:440px}.primary-link{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;background:var(--accent);color:white;font-size:13px;font-weight:600;min-height:46px;padding:13px 19px;border-radius:7px;margin-top:26px}.primary-link:hover{background:#343a3c}.hero-visual{background:var(--blue);border:1px solid #e2e2e2;border-radius:14px;padding:28px 22px 21px;min-width:0}.screen{background:#fff;border:1px solid #dcdcdc;border-radius:6px;box-shadow:0 14px 30px #2b303212}.screen-bar{border-radius:6px 6px 0 0;padding:10px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f5f5f5;font-size:8px;color:#5a7f7e;border-bottom:1px solid #e8e8e8}.window-dots{display:flex;gap:4px}.window-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#c2c2c2}.hero-visual figcaption{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:20px;font-size:11px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}.project-facts{grid-column:1/-1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:24px;margin:12px 0 0;padding:25px 0}.project-facts dt{font-size:10px;color:var(--muted);margin-bottom:8px}.project-facts dd{font-size:13px;margin:0;line-height:1.5}.section{padding-top:76px;padding-bottom:76px}.section-heading{margin-bottom:32px}.section-heading .eyebrow{margin-bottom:15px}h2{font-size:36px;line-height:1.2;font-weight:500;letter-spacing:-1.3px}h3{font-size:28px;font-weight:500;letter-spacing:-.7px;line-height:1.2}.section-heading>p{margin-top:16px;max-width:640px;font-size:16px}.research-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center}.research-grid figure{min-width:0}.image-button{position:relative;display:block;width:100%;border:0;padding:0;background:transparent;text-align:left;cursor:zoom-in}.image-expand{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:30px;height:30px;background:var(--white);border:1px solid var(--line);border-radius:50%;font-size:16px;box-shadow:0 2px 6px #0001}.research-grid figcaption{font-size:11px;margin-top:12px;color:var(--muted);line-height:1.5}.research-copy>p{font-size:16px;margin-top:17px}.research-copy blockquote{font:italic 19px/1.45 Georgia,serif;color:var(--ink);margin:23px 0;border-left:3px solid #cacaca;padding-left:18px}.research-copy cite{display:block;font:10px/1.5 Arial,sans-serif;margin-top:8px;color:var(--muted)}.design-goal{padding:17px 19px;background:var(--soft);border-radius:6px}.design-goal .eyebrow{font-size:9px;margin-bottom:8px}.design-goal p{font-size:15px;color:var(--ink);line-height:1.5}.design-section{padding:66px 0;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.design-section>.container>.section-heading{margin-bottom:8px}.design-row{display:grid;grid-template-columns:1fr 2.1fr;gap:55px;align-items:center;padding:38px 0;border-bottom:0}.design-copy{min-width:0}.step-label{display:flex;gap:10px;align-items:center;color:var(--accent);font-size:10px;letter-spacing:1.4px;font-weight:600;margin-bottom:18px}.step-label>span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--soft);font-size:13px;letter-spacing:0}.design-copy>p{font-size:16px;line-height:1.65;margin-top:17px}.look-for{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}.look-for>span{font-size:9px;font-weight:600;letter-spacing:1.1px;color:var(--accent)}.look-for p{font-size:13px;line-height:1.6;margin-top:8px}.design-screen{min-width:0;background:#f3f3f3;border:1px solid var(--line);border-radius:8px;padding:17px 17px 0}.design-screen .image-button{border:1px solid #e1e1e1;background:#fff}.design-screen figcaption{display:flex;justify-content:space-between;gap:15px;padding:13px 0;font-size:10px;line-height:1.5;color:var(--muted)}.design-screen figcaption strong{font-weight:600;color:var(--ink)}.guide-card{display:grid;grid-template-columns:1.45fr 1fr;gap:38px;align-items:center;padding:25px;margin-top:35px;border-radius:9px;background:var(--soft)}.guide-card figure{border:1px solid #d7d7d7;min-width:0}.guide-card .eyebrow{font-size:9px;margin-bottom:12px}.guide-card h3{font-size:26px;margin-bottom:14px}.guide-card p{font-size:15px}.walkthrough-layout{display:grid;grid-template-columns:2.55fr 1fr;gap:28px;align-items:center}.flow-player{min-width:0;border:1px solid #dcdcdc;border-radius:8px;background:#fff}.flow-toolbar{border-radius:8px 8px 0 0;border-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:#f3f3f3}.flow-toolbar>span{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.8px;color:var(--muted)}.flow-toolbar button{font-size:11px;background:#fff;border:1px solid #d2d2d2;border-radius:5px;padding:8px 12px;min-width:78px;cursor:pointer}.flow-toolbar button:hover{background:var(--soft)}.flow-player video{aspect-ratio:1200/676;background:#fff}.video-footer{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-top:0;font-size:10px;color:var(--muted)}.flow-steps{list-style:none;padding:0;margin:0}.flow-steps li{display:flex;align-items:start;gap:12px;padding:15px 12px;border:1px solid transparent;border-radius:7px;margin:5px 0}.flow-steps li>span{display:grid;place-items:center;width:27px;height:27px;border:1px solid #d3d3d3;border-radius:50%;font-size:11px;flex-shrink:0;margin-top:1px;background:white}.flow-steps strong{font-size:13px;font-weight:500;line-height:1.5}.flow-steps p{font-size:11px;line-height:1.5;margin-top:5px}.flow-steps li[aria-current]{background:var(--soft);border-color:#d4d4d4}.flow-steps li[aria-current]>span{background:var(--accent);color:white;border-color:var(--accent)}.flow-note{font-size:11px;color:#5b8180;margin-top:17px;line-height:1.5}.takeaway-section{background:#ececec;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;padding:53px 0}.takeaway{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:60px}.takeaway .eyebrow{margin-bottom:14px}.takeaway h2{font-size:33px}.takeaway p{font-size:16px}.takeaway .small{font-size:11px;line-height:1.5;margin-top:18px;color:#597d7c}.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:29px;padding-bottom:29px;font-size:11px;color:var(--muted)}.footer strong{display:block;font-size:13px;font-weight:500;color:var(--ink)}.footer>div>span{display:block;font-size:10px;margin-top:6px}.footer a{padding:10px 0}.footer a:hover{text-decoration:underline;text-underline-offset:4px}.skip{position:fixed;left:15px;top:-100px;z-index:50;padding:15px;background:white}.skip:focus{top:15px}dialog{border:0;background:var(--bg);color:var(--ink);padding:53px 22px 18px;max-width:min(1260px,94vw);max-height:94vh;overflow:auto;border-radius:7px}dialog::backdrop{background:#202426e8}.dialog-controls{position:absolute;top:10px;left:20px;right:15px;display:flex;justify-content:space-between;gap:30px}.dialog-controls button{background:white;border:1px solid var(--line);font-size:12px;padding:8px 11px;border-radius:4px;cursor:pointer}.dialog-controls .close-dialog{border:0;background:transparent}.image-viewport{max-height:75vh;overflow:auto}dialog img{width:auto;max-width:100%;max-height:73vh;object-fit:contain;margin:auto}dialog p{font-size:12px;line-height:1.5;margin-top:15px}dialog.full-size{width:94vw}dialog.full-size img{max-width:none;max-height:none;width:auto;height:auto;margin:0}
@media(max-width:1050px){.container{padding-left:30px;padding-right:30px}.hero{gap:30px;grid-template-columns:1fr 1.1fr}.hero h1{font-size:46px;letter-spacing:-2px}.hero-title{font-size:25px}.hero-visual{padding:22px 14px 17px}.research-grid{gap:30px;grid-template-columns:1.2fr 1fr}.design-row{gap:32px;grid-template-columns:1fr 1.85fr}.design-copy h3{font-size:26px}.guide-card{gap:28px}.walkthrough-layout{grid-template-columns:2.4fr 1fr;gap:20px}.flow-steps li{padding:12px 8px;gap:9px}.flow-steps strong{font-size:12px}.takeaway{gap:40px}}
@media(max-width:760px){html{scroll-padding-top:126px}.container{padding-left:22px;padding-right:22px}.header-inner{padding:12px 22px 0;gap:6px;flex-wrap:wrap}.portfolio-mark{font-size:13px}.mark{height:29px;width:29px;font-size:23px;border-radius:8px}.portfolio-mark small{display:inline;font-size:8px;margin-left:10px;letter-spacing:1px}.section-nav{width:100%;justify-content:space-between;gap:12px;margin-top:2px}.section-nav a{font-size:11px;line-height:42px}.hero{grid-template-columns:1fr;gap:28px;padding-top:36px}.hero h1{font-size:47px;letter-spacing:-2px;margin-top:14px}.hero .eyebrow{font-size:9px}.hero-title{font-size:27px;margin:17px 0 15px}.hero-title br{display:none}.hero-description{font-size:16px;max-width:100%}.primary-link{margin-top:22px;min-height:44px;font-size:12px;padding:12px 17px}.hero-visual{padding:22px 14px 18px}.hero-visual figcaption{font-size:10px;margin-top:16px}.project-facts{grid-template-columns:1fr 1fr;gap:19px;margin-top:0;padding:23px 0}.project-facts>div:last-child{grid-column:1/-1}.project-facts dt{font-size:9px;margin-bottom:6px}.project-facts dd{font-size:12px}.section{padding-top:48px;padding-bottom:48px}.section-heading{margin-bottom:26px}.section-heading .eyebrow{font-size:9px;margin-bottom:12px}h2{font-size:30px;letter-spacing:-.9px;line-height:1.2}h3{font-size:27px}.section-heading>p{font-size:15px;margin-top:14px}.research-grid{grid-template-columns:1fr;gap:26px}.research-grid figcaption{font-size:10px}.research-copy h3 br{display:none}.research-copy>p{font-size:16px;margin-top:13px}.research-copy blockquote{font-size:19px;margin:20px 0}.design-goal{padding:16px}.design-section{padding:48px 0}.design-row{grid-template-columns:1fr;gap:22px;padding:29px 0}.step-label{margin-bottom:14px;font-size:9px}.step-label>span{width:29px;height:29px;font-size:12px}.design-copy h3{font-size:28px}.design-copy h3 br{display:none}.design-copy>p{font-size:16px;margin-top:13px}.look-for{margin-top:16px;padding-top:13px}.look-for>span{font-size:8px}.look-for p{font-size:13px;margin-top:6px}.design-screen{padding:10px 10px 0}.design-screen figcaption{font-size:9px;gap:10px;padding:11px 0}.guide-card{grid-template-columns:1fr;padding:17px;gap:22px;margin-top:26px}.guide-card>div{order:-1}.guide-card h3{font-size:27px;margin-bottom:11px}.guide-card p{font-size:15px}.walkthrough-layout{grid-template-columns:1fr;gap:17px}.flow-toolbar{padding:10px}.flow-toolbar>span{font-size:7px;letter-spacing:.45px;gap:6px}.flow-toolbar button{font-size:10px;min-width:70px;padding:8px 9px}.video-footer{font-size:9px;padding:10px;gap:10px}.flow-steps{display:grid;grid-template-columns:1fr 1fr;gap:7px}.flow-steps li{margin:0;padding:12px 8px;gap:8px;min-width:0;align-items:start}.flow-steps strong{font-size:11px}.flow-steps p{font-size:10px}.flow-steps li>span{width:23px;height:23px;font-size:10px}.flow-note{font-size:10px;margin-top:13px}.takeaway-section{padding:40px 0}.takeaway{grid-template-columns:1fr;gap:22px}.takeaway h2{font-size:30px}.takeaway p{font-size:16px}.takeaway .small{font-size:10px;margin-top:17px}.footer{flex-wrap:wrap;gap:12px;font-size:10px;padding-top:24px;padding-bottom:24px}.footer>div{width:100%}.footer>a:last-child{margin-left:auto}.image-expand{width:27px;height:27px;right:7px;bottom:7px;font-size:14px}.image-viewport{max-height:70vh}dialog img{max-height:68vh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{.site-header,.primary-link,.image-expand,.flow-toolbar button,.footer a:last-child{display:none}.section,.design-section{padding-top:30px;padding-bottom:30px}.design-row{break-inside:avoid}.hero-visual{break-inside:avoid}.hero{padding-top:20px}.takeaway-section{padding-top:30px;padding-bottom:30px}}
/* Narrative: research evidence, design implication, then one task. */
.hero h1{font-size:51px}.story-intro{margin-top:24px}.hero-description+.hero-description{margin-top:13px}.story-summary{grid-column:1/-1;background:var(--soft);border-left:3px solid var(--accent);padding:23px 28px;margin-top:10px}.story-summary p{font-size:18px;max-width:870px;color:var(--ink);margin-top:8px}.story-summary strong{font-weight:600}.discovery-panel{margin-top:64px;padding-top:54px;border-top:1px solid var(--line)}.discovery-heading{max-width:690px}.discovery-heading .eyebrow{margin-bottom:15px}.discovery-heading p{margin-top:18px;font-size:16px}.evidence-comparison{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;margin-top:30px}.evidence-comparison>blockquote,.evidence-comparison>div{padding:28px 30px;border-radius:8px}.evidence-comparison>blockquote{background:#ececec;font:italic 28px/1.4 Georgia,serif;display:flex;flex-direction:column;justify-content:center}.evidence-label{display:block;font:600 9px/1.5 Arial,sans-serif;letter-spacing:1.2px;color:var(--muted);margin-bottom:20px}.evidence-comparison cite{display:block;font:11px/1.5 Arial,sans-serif;margin-top:16px;color:var(--muted)}.evidence-comparison>div{background:var(--soft)}.finding-numbers{display:flex;gap:28px;align-items:center}.finding-numbers>div{display:flex;flex-direction:column;gap:5px;flex:1}.finding-numbers strong{font-size:56px;font-weight:500;line-height:1;color:var(--accent);letter-spacing:-2px}.finding-numbers div span{font-size:13px;line-height:1.4}.finding-divider{font-size:42px;font-weight:300;color:#bebebe}.evidence-comparison p{font-size:13px;margin-top:20px}.evidence-source{max-width:880px;margin:30px auto 0;padding:15px;background:white;border:1px solid var(--line);border-radius:8px}.evidence-source figcaption{font-size:11px;color:var(--muted);padding-top:12px;line-height:1.5}.insight{border-left:3px solid var(--accent);padding:12px 24px;margin-top:30px}.insight p{font-size:23px;color:var(--ink);max-width:780px;line-height:1.4;margin-top:9px}.response-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:44px;align-items:center;margin-top:32px}.response-copy p{font-size:16px;margin-top:17px}.response-copy p:last-child{font-size:13px}.story-transition{max-width:750px;text-align:center;margin:56px auto 0;padding-top:32px;border-top:1px solid var(--line)}.story-transition p{font-size:24px;line-height:1.4;color:var(--ink);margin-top:12px}.story-transition>span:last-child{display:block;font-size:30px;color:var(--accent);margin-top:18px}.story-detail{padding:48px 0}.story-detail:first-of-type{margin-top:32px}.story-detail .eyebrow{margin-bottom:15px}
@media(max-width:1050px){.hero h1{font-size:44px}.response-grid{gap:30px;grid-template-columns:1.6fr 1fr}.evidence-comparison>blockquote,.evidence-comparison>div{padding:25px}.finding-numbers{gap:18px}}
@media(max-width:760px){.hero h1{font-size:43px}.story-summary{padding:20px;margin-top:0}.story-summary p{font-size:16px}.discovery-panel{margin-top:38px;padding-top:38px}.discovery-heading .eyebrow{font-size:9px}.discovery-heading h2 br{display:none}.evidence-comparison{grid-template-columns:1fr;gap:14px;margin-top:24px}.evidence-comparison>blockquote,.evidence-comparison>div{padding:24px}.evidence-comparison>blockquote{font-size:26px}.evidence-label{margin-bottom:17px}.finding-numbers strong{font-size:50px}.evidence-source{padding:8px;margin-top:22px}.evidence-source figcaption{font-size:10px;padding:10px 3px 3px}.insight{padding:8px 18px;margin-top:24px}.insight p{font-size:21px}.response-grid{grid-template-columns:1fr;gap:25px;margin-top:28px}.response-copy{order:-1}.response-copy h3 br{display:none}.story-transition{margin-top:36px;padding-top:28px}.story-transition .eyebrow{font-size:9px}.story-transition p{font-size:22px}.story-detail{padding:32px 0}.story-detail:first-of-type{margin-top:20px}.story-detail .eyebrow{font-size:9px}}
/* Present the support journey before the two concrete examples. */
.hero h1{font-size:48px;line-height:1.12}.journey-overview{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:24px;align-items:center;border-left:0;border:1px solid #dddddd;border-radius:8px;padding:25px 30px}.journey-overview p{font-size:18px;margin-top:7px}.journey-overview>span{color:var(--accent);font-size:24px}.research-bridge{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}.research-bridge>div{padding:22px 25px;border-radius:7px;background:var(--soft)}.research-bridge>div:first-child{background:#ececec}.research-bridge p{color:var(--ink);font-size:18px;margin-top:12px;line-height:1.5}.source-note{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:15px}.design-section .design-row{grid-template-columns:1fr 2.1fr}.research-copy>p:first-child{margin-top:0}
@media(max-width:1050px){.hero h1{font-size:42px}.journey-overview{gap:17px;padding:23px}.journey-overview p{font-size:16px}.research-bridge{gap:22px}.design-section .design-row{grid-template-columns:1fr 1.85fr}}
@media(max-width:760px){.hero h1{font-size:40px;letter-spacing:-1.7px}.hero h1 br{display:none}.journey-overview{grid-template-columns:1fr;gap:13px;padding:22px}.journey-overview>div{display:grid;grid-template-columns:105px 1fr;gap:10px;align-items:center}.journey-overview p{margin:0;font-size:16px}.journey-overview>span{display:none}.research-bridge{grid-template-columns:1fr;gap:14px;margin-top:25px;padding-top:25px}.research-bridge>div{padding:21px}.research-bridge p{font-size:17px}.design-section .design-row{grid-template-columns:1fr}.section-heading h2 br{display:none}}
/* Short narrative with screens carrying the detail. */
.compact-insight{display:flex;align-items:center;gap:24px;padding:22px 0;margin-top:28px;border-bottom:1px solid var(--line)}.compact-insight p{font-size:22px;margin:0;flex:1}.compact-insight>span:last-child{font-size:28px;color:var(--accent)}.design-row,.design-section .design-row{grid-template-columns:1fr 2.5fr;gap:45px}.design-copy h3{font-size:27px}.design-copy>p{font-size:16px}.design-section .section-heading{margin-bottom:12px}.takeaway{grid-template-columns:1.2fr 1fr}.takeaway h2{font-size:34px}
@media(max-width:760px){.compact-insight{flex-wrap:wrap;gap:12px}.compact-insight .eyebrow{width:100%}.compact-insight p{font-size:21px}.design-row,.design-section .design-row{grid-template-columns:1fr;gap:18px}.design-copy h3{font-size:26px}.design-copy>p{margin-top:10px}.takeaway{grid-template-columns:1fr}.takeaway h2{font-size:28px}.hero{padding-top:30px}.hero h1{font-size:46px}.hero h1 br{display:block}}
/* Selected process artifacts, integrated with the case-study story. */
.inline-journey{grid-column:1/-1;background:#f1f1f1;border:1px solid #d9d9d9;border-radius:12px;padding:22px 26px;margin-top:8px}.inline-journey>figcaption,.inline-task>figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:23px}.artifact-note{font-size:11px;color:#4e6d6c}.inline-journey ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:40px}.inline-journey li{position:relative;min-width:0}.journey-number{font-size:11px;color:var(--accent);display:block;margin-bottom:10px}.inline-journey h3{font-size:23px;letter-spacing:-.5px}.inline-journey p{font-size:13px;margin-top:7px}.journey-touchpoint{display:block;font-size:12px;margin-top:18px;background:white;border:1px solid #dcdcdc;border-radius:5px;padding:10px 12px;color:var(--ink)}.inline-journey li+li:before{content:'\2192';position:absolute;left:-28px;top:32px;font-size:21px;color:var(--accent)}.inline-task{padding:25px 0 9px}.inline-task ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:27px}.inline-task li{position:relative;background:#f5f5f5;border:1px solid #dcdcdc;border-radius:8px;padding:17px;min-width:0}.inline-task li+li:before{content:'\2192';position:absolute;left:-23px;top:43%;color:var(--accent)}.task-symbol{display:block;font-size:10px;color:#5a7e7d;margin-bottom:10px}.inline-task strong{display:block;font-size:15px;font-weight:500}.inline-task small{display:block;font-size:11px;color:var(--muted);margin-top:7px;line-height:1.4}.inline-task .task-key{background:var(--accent);border-color:var(--accent);color:white}.task-key .task-symbol,.task-key small{color:#f3f3f3}.prototype-link{display:inline-flex;align-items:center;gap:18px;font-size:13px;color:#33393b;text-decoration:underline;text-underline-offset:4px;margin-top:14px;min-height:44px}
@media(max-width:760px){.inline-journey{padding:20px;margin-top:0}.inline-journey>figcaption,.inline-task>figcaption{gap:10px;align-items:start}.inline-journey .eyebrow,.inline-task .eyebrow{font-size:9px}.artifact-note{font-size:10px;white-space:nowrap}.inline-journey ol{grid-template-columns:1fr;gap:26px}.inline-journey li{display:grid;grid-template-columns:30px 1fr;gap:0 10px}.journey-number{grid-column:1;grid-row:1/4;margin-top:6px}.inline-journey h3,.inline-journey p,.journey-touchpoint{grid-column:2}.inline-journey h3{font-size:21px}.inline-journey p{margin-top:4px}.journey-touchpoint{margin-top:9px}.inline-journey li+li:before{content:'\2193';left:4px;top:-25px;font-size:18px}.inline-task{padding-top:18px}.inline-task ol{grid-template-columns:1fr;gap:25px}.inline-task li{display:grid;grid-template-columns:28px 1fr;gap:0 10px;padding:14px 16px}.task-symbol{grid-column:1;grid-row:1/3;margin:3px 0 0}.inline-task strong,.inline-task small{grid-column:2}.inline-task small{margin-top:4px}.inline-task li+li:before{content:'\2193';left:23px;top:-24px}.inline-task>figcaption{margin-bottom:17px}}
/* Research and follow-up explanations stay visible beside their evidence. */
.empathy-inline>.eyebrow{font-size:9px}.empathy-pair{display:grid;gap:12px}.empathy-pair>div{padding:16px 18px;background:#ececec;border-radius:6px}.empathy-pair>div:last-child{background:var(--soft)}.empathy-pair span{font-size:9px;letter-spacing:1px;font-weight:600;color:#4b6a69}.empathy-pair p{font-size:17px;line-height:1.4;color:var(--ink);margin-top:8px}.empathy-pair small{display:block;font-size:10px;color:var(--muted);margin-top:9px}.reply-sequence{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:15px}.reply-sequence li{display:flex;gap:10px;align-items:flex-start}.reply-sequence li>span{width:24px;height:24px;border:1px solid #d2d2d2;background:var(--soft);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:10px;color:var(--accent)}.reply-sequence strong{font-size:13px;font-weight:500;display:block;line-height:1.5}.reply-sequence small{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px}
@media(max-width:760px){.empathy-pair{grid-template-columns:1fr}.reply-sequence{margin-top:18px;gap:12px}}
/* Recognizable UX/UI artifacts with visible titles and native diagrams. */
.ux-artifact>figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.ux-artifact>figcaption h2{font-size:27px;letter-spacing:-.7px;margin-top:7px}.ux-artifact .artifact-note{font-size:11px}.journey-matrix{display:grid;grid-template-columns:140px repeat(3,minmax(0,1fr));gap:1px;background:#dcdcdc;border:1px solid #dcdcdc;border-radius:7px;overflow:hidden}.matrix-labels,.journey-column{display:grid;grid-template-rows:50px 55px 55px 58px;background:white}.matrix-labels{background:#e9e9e9}.matrix-labels span,.journey-column>*{padding:14px 16px;display:flex;align-items:center;margin:0;border-bottom:1px solid #e4e4e4;font-size:12px;line-height:1.4}.journey-column h3{font-size:15px;color:var(--accent);background:#f6f6f6}.journey-column strong{font-weight:500;background:#f3f3f3;font-size:12px}.empathy-map{margin-top:38px;padding:26px;background:white;border:1px solid var(--line);border-radius:12px}.empathy-quadrants{display:grid;grid-template-columns:1fr 1fr;gap:14px}.empathy-quadrants>div{padding:24px;background:#f0f0f0;border:1px solid #e2e2e2;border-radius:7px}.empathy-quadrants>div:nth-child(2),.empathy-quadrants>div:nth-child(4){background:#efefef;border-color:#dedede}.map-label{font-size:11px;letter-spacing:1.2px;font-weight:600;color:var(--accent)}.empathy-quadrants p{font-size:19px;color:var(--ink);margin-top:13px;line-height:1.4}.empathy-quadrants small{display:block;font-size:11px;color:var(--muted);margin-top:12px}.inline-task{margin-top:26px;padding:26px;background:#f8f8f8;border:1px solid var(--line);border-radius:12px}.wireframe-comparison{padding:26px;border:1px solid var(--line);border-radius:12px;margin-top:32px;background:#fff}.wireframe-layout{display:grid;grid-template-columns:2.1fr 1fr;gap:30px;align-items:center}.account-wireframe{border:2px solid #80a5a4;border-radius:4px;padding:20px;background:#fafafa;min-width:0}.wf-nav{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #99b7b6;padding-bottom:15px;font-size:11px;font-weight:600;color:#454e52}.wf-breadcrumb{font-size:10px;color:#597d7c;margin:18px 0}.wf-body{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}.wf-body h3{font-size:21px;color:#363d40;margin-bottom:20px}.wf-line{height:7px;background:#d6d6d6;margin-top:8px;width:95%}.wf-line.short{width:65%;margin-bottom:20px}.wf-step{padding:12px 0;border-bottom:1px solid #d4d4d4;font-size:11px;color:#4f706f}.wf-note{font-size:9px;letter-spacing:1px;color:#517170}.wf-action{background:#424b4e;border:1px solid #424b4e;color:white;border-radius:3px;text-align:center;padding:12px 7px;font-size:11px;margin-top:9px}.wf-related{border:1px solid #bdbdbd;margin-top:12px;padding:13px 8px;font-size:11px;color:#4d6d6c}.wireframe-rationale h3{font-size:24px}.wireframe-rationale p{font-size:15px;margin-top:14px}.wireframe-rationale small{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:17px}
@media(max-width:760px){.ux-artifact>figcaption{align-items:start;flex-direction:column;gap:8px}.ux-artifact>figcaption h2{font-size:25px}.journey-matrix{grid-template-columns:1fr;background:none;border:0;gap:15px;overflow:visible}.matrix-labels{display:none}.journey-column{grid-template-rows:auto;border:1px solid #dcdcdc;border-radius:6px;overflow:hidden}.journey-column>*{padding:12px 14px;min-height:42px}.journey-column p,.journey-column strong{display:block}.journey-column p:nth-child(2):before{content:'STUDENT QUESTION';display:block;font-size:8px;letter-spacing:.8px;color:#567978;margin-bottom:5px}.journey-column p:nth-child(3):before{content:'TOUCHPOINT';display:block;font-size:8px;letter-spacing:.8px;color:#567978;margin-bottom:5px}.journey-column strong:before{content:'DESIGN OPPORTUNITY';display:block;font-size:8px;letter-spacing:.8px;color:#567978;margin-bottom:5px}.empathy-map,.inline-task,.wireframe-comparison{padding:20px;margin-top:25px}.empathy-quadrants{grid-template-columns:1fr;gap:10px}.empathy-quadrants>div{padding:18px}.empathy-quadrants p{font-size:17px;margin-top:9px}.wireframe-layout{grid-template-columns:1fr;gap:22px}.account-wireframe{padding:13px}.wf-body{grid-template-columns:1.2fr 1fr;gap:12px}.wf-body h3{font-size:17px}.wf-step,.wf-action,.wf-related{font-size:10px}.wf-nav{font-size:10px}.wireframe-rationale h3{font-size:22px}}
/* Explain the need first; place the design evidence directly beneath its decision. */
.hero h1{font-size:46px}.research .inline-journey{margin-top:36px}.research-grid{grid-template-columns:1.1fr 1fr;gap:30px}.research-copy .empathy-quadrants{margin-top:17px;gap:10px}.research-copy .empathy-quadrants>div{padding:17px}.research-copy .empathy-quadrants p{font-size:15px;margin-top:9px}.research-copy .empathy-quadrants small{font-size:10px}.research-copy .evidence-footnote{font-size:11px;line-height:1.5;margin-top:15px}.ux-artifact>figcaption h2{font-size:25px}.scenario-caption{max-width:650px}.design-row,.design-section .design-row{grid-template-columns:1fr;gap:24px;padding:38px 0}.design-copy{max-width:710px}.design-copy h3{font-size:30px}.design-copy>p{max-width:660px}.design-row>.design-screen{max-width:950px;width:100%;margin:auto}.wire-to-screen{display:grid;grid-template-columns:1fr 1.75fr;gap:24px;align-items:start}.wire-to-screen>div{min-width:0}.comparison-label{display:block;font-size:10px;letter-spacing:.8px;color:var(--muted);margin-bottom:12px}.wire-to-screen .account-wireframe{padding:16px}.wire-to-screen .wf-body{grid-template-columns:1fr;gap:20px}.wire-to-screen .wf-body aside{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wire-to-screen .wf-note{grid-column:1/-1}.wire-to-screen .wf-action,.wire-to-screen .wf-related{margin:0}.wire-to-screen .wf-step{padding:8px 0}.wire-to-screen .wf-body h3{font-size:19px;margin-bottom:12px}.wire-to-screen .wf-breadcrumb{margin:14px 0}.wire-to-screen .wf-line.short{margin-bottom:12px}.reply-sequence{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.story-detail:last-child .design-copy{max-width:950px;width:100%}.section-heading h2{max-width:850px}.inline-task{margin-bottom:0}.wire-study .account-wireframe{box-shadow:none}
@media(max-width:760px){.hero h1{font-size:39px}.research-grid{grid-template-columns:1fr}.research-copy .empathy-quadrants{grid-template-columns:1fr 1fr}.research-copy .empathy-quadrants>div{padding:13px}.research-copy .empathy-quadrants p{font-size:14px}.wire-to-screen{grid-template-columns:1fr;gap:25px}.wire-to-screen .wf-body{grid-template-columns:1.2fr 1fr;gap:12px}.wire-to-screen .wf-body aside{display:block}.wire-to-screen .wf-action,.wire-to-screen .wf-related{margin-top:9px}.design-copy h3{font-size:25px}.reply-sequence{grid-template-columns:1fr;gap:12px}.ux-artifact>figcaption h2{font-size:23px}.design-row,.design-section .design-row{gap:20px;padding:30px 0}}
/* More artifact-led content; prose is replaced by compact visual specimens. */
.persona-strip{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;padding:25px 28px;margin-bottom:30px;background:#eeeeee;border:1px solid #dadada;border-radius:12px}.persona-profile{display:flex;gap:18px;align-items:center}.persona-profile svg{flex-shrink:0}.persona-profile h3{font-size:22px;margin:7px 0}.persona-profile small{font-size:10px;color:var(--muted)}.persona-strip dl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;align-items:center}.persona-strip dt{font-size:9px;letter-spacing:1px;color:var(--accent);margin-bottom:9px}.persona-strip dd{font-size:15px;line-height:1.4;margin:0}.visual-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.visual-tags span{padding:8px 13px;background:var(--soft);border:1px solid #dadada;border-radius:6px;font-size:13px}.site-tree{padding:26px;background:#f6f6f6;border:1px solid var(--line);border-radius:12px;margin-top:30px}.tree-root{max-width:270px;padding:15px 20px;background:var(--ink);color:white;text-align:center;margin:0 auto 35px;border-radius:6px;font-size:15px;position:relative}.tree-root:after{content:'';height:20px;width:1px;background:#93b3b2;position:absolute;left:50%;top:100%}.tree-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.tree-branches>div{position:relative;text-align:center;border-top:1px solid #93b3b2;padding-top:20px}.tree-branches>div:before{content:'';position:absolute;top:0;left:50%;height:20px;width:1px;background:#93b3b2}.tree-branches h3{font-size:16px;padding:13px 8px;border:1px solid #d2d2d2;background:white;border-radius:6px}.tree-leaf,.tree-end{position:relative;margin-top:22px;padding:12px 9px;background:white;border:1px solid #dadada;border-radius:5px;font-size:13px;line-height:1.4}.tree-leaf:before,.tree-end:before{content:'\2193';position:absolute;left:calc(50% - 5px);top:-21px;color:var(--accent);font-size:14px}.tree-end{background:#e6e6e6;border-color:#cbcbcb}.tree-branches small{display:block;font-size:10px;margin-top:16px;color:var(--muted)}.ui-foundation{padding-top:5px;padding-bottom:50px}.ui-foundation>.ux-artifact{border:1px solid var(--line);border-radius:12px;padding:26px;background:white}.system-board{display:grid;grid-template-columns:1.4fr .75fr 1fr;gap:30px}.system-label{display:block;font-size:10px;letter-spacing:1px;color:var(--muted);margin-bottom:16px}.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.palette i{height:74px;border-radius:7px;display:block;border:1px solid #dcdcdc}.palette code{display:block;font-size:10px;margin-top:9px;color:var(--muted)}.type-board strong{font-size:65px;line-height:1;letter-spacing:-3px;display:block;font-weight:500}.type-board>span:last-child{display:block;font-size:11px;color:var(--muted);margin-top:15px}.button-specimen,.input-specimen{display:block;padding:12px 14px;border-radius:6px;font-size:12px}.button-specimen{background:var(--accent);color:white}.input-specimen{border:1px solid #87aaa9;color:var(--muted);margin-top:12px}.component-board small{display:block;font-size:10px;color:var(--muted);margin-top:8px}.evidence-footnote{display:block;margin-top:15px;color:var(--muted);font-size:11px}
@media(max-width:760px){.persona-strip{grid-template-columns:1fr;padding:20px;gap:24px}.persona-profile h3{font-size:20px}.persona-profile{gap:13px}.persona-profile svg{width:52px;height:52px}.persona-strip dl{gap:13px}.persona-strip dd{font-size:13px}.site-tree{padding:20px}.tree-branches{grid-template-columns:1fr;gap:24px}.tree-root{margin-bottom:28px}.tree-branches>div{padding:20px 14px 14px;background:#f0f0f0;border:1px solid #d3d3d3;border-radius:7px}.tree-branches>div:before{height:20px;top:-20px}.tree-branches h3{font-size:16px}.tree-leaf,.tree-end{margin-top:20px}.system-board{grid-template-columns:1fr;gap:25px}.ui-foundation>.ux-artifact{padding:20px}.type-board{display:grid;grid-template-columns:1fr 1fr;align-items:center}.type-board .system-label{grid-column:1/-1}.type-board>span:last-child{margin:0}.palette i{height:65px}.ui-foundation{padding-bottom:36px}.visual-tags{gap:7px}.visual-tags span{font-size:12px}}
.screen-journey,.screen-task{margin-top:30px;padding:26px;background:#f3f3f3;border:1px solid #dcdcdc;border-radius:12px}.screen-task{background:#f6f6f6}.journey-screens,.task-screens{list-style:none;padding:0;margin:0;display:grid;gap:24px}.journey-screens{grid-template-columns:repeat(3,minmax(0,1fr))}.task-screens{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}.journey-screens>li,.task-screens>li{position:relative;min-width:0}.screen-step{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:38px}.screen-step>span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--ink);color:white;font-size:12px;flex-shrink:0}.screen-step h3{font-size:16px;letter-spacing:-.25px;line-height:1.35}.map-screen{border:1px solid #d6d6d6;background:white;border-radius:4px;padding:5px;box-shadow:0 5px 12px #24282a09}.map-screen img{width:100%;height:auto;max-height:none;object-fit:contain}.screen-caption{padding:17px 0 0}.screen-caption>span{font-size:9px;letter-spacing:1px;color:var(--accent)}.screen-caption p{font-size:16px;line-height:1.35;color:var(--ink);margin-top:7px}.screen-caption strong{display:block;font-size:12px;font-weight:400;line-height:1.5;color:var(--muted);margin-top:8px}.journey-screens>li+li:before{content:'\2192';position:absolute;left:-20px;top:105px;font-size:20px;color:var(--accent)}.screen-action{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 13px;margin-top:11px;background:white;border:1px solid #dbdbdb;border-radius:5px;font-size:12px;color:var(--ink)}.screen-action>span{color:var(--accent)}.action-emphasis{background:var(--accent);border-color:var(--accent);color:white}.action-emphasis>span{color:white}.map-source{font-size:10px;line-height:1.5;margin-top:21px;color:var(--muted)}.task-screens>li:nth-child(odd):after{content:'\2192';position:absolute;right:-25px;top:48%;font-size:22px;color:var(--accent)}
@media(max-width:1050px){.journey-screens{gap:20px}.screen-journey,.screen-task{padding:22px}.screen-step h3{font-size:14px}.screen-caption p{font-size:15px}.journey-screens>li+li:before{left:-17px;font-size:17px}}
@media(max-width:760px){.screen-journey,.screen-task{padding:18px;margin-top:25px}.journey-screens,.task-screens{grid-template-columns:1fr;gap:36px}.screen-step h3{font-size:17px}.screen-step{margin-bottom:12px;min-height:0}.screen-caption{padding-top:13px}.screen-caption p{font-size:16px}.screen-caption strong{font-size:12px;margin-top:5px}.journey-screens>li+li:before{content:'\2193';top:-30px;left:calc(50% - 6px);font-size:22px}.task-screens>li:nth-child(odd):after{display:none}.task-screens>li+li:before{content:'\2193';position:absolute;top:-30px;left:calc(50% - 6px);font-size:22px;color:var(--accent)}.screen-action{font-size:11px;gap:10px}.map-source{font-size:10px;margin-top:20px}}
/* Visual edit: fewer repeated screens, larger artifacts, shorter captions. */
.screen-journey{margin-top:40px}.journey-screens{grid-template-columns:1fr;gap:26px}.journey-screens>li{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:25px;align-items:center;padding:20px;background:white;border:1px solid #e0e0e0;border-radius:9px}.journey-screens .map-screen{grid-column:2;grid-row:1/3}.journey-screens .screen-step{grid-column:1;margin:0;align-self:end}.journey-screens .screen-step h3{font-size:23px}.journey-screens>li+li:before{content:'\2193';left:35px;top:-26px;font-size:22px}.micro-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;align-self:start}.micro-tags span{background:#ededed;border:1px solid #dadada;border-radius:5px;padding:7px 10px;font-size:11px;color:#434c4f}.journey-screens .micro-tags{grid-column:1}.task-screens{gap:32px}.task-screens .map-screen{padding:0}.screen-task,.screen-journey,.site-tree{padding:25px}.research{padding-bottom:48px}.decision-panel .design-copy .eyebrow{margin-bottom:12px}.screen-step{margin-bottom:11px}.screen-task .screen-step h3{font-size:17px}.persona-strip{margin-bottom:24px}.research-copy .empathy-quadrants p{font-size:18px}.site-tree{margin-top:22px}.map-source{margin-top:16px}.screen-journey .map-screen{padding:0}.wire-to-screen{grid-template-columns:1fr 1.8fr}.flow-steps li{padding:12px}.design-section{padding-bottom:35px}.walkthrough.section{padding-bottom:40px}
@media(max-width:1050px){.journey-screens>li{grid-template-columns:170px minmax(0,1fr);gap:20px}.journey-screens .screen-step h3{font-size:20px}}
@media(max-width:760px){.screen-task,.screen-journey,.site-tree{padding:17px}.journey-screens>li{grid-template-columns:1fr;padding:14px;gap:13px}.journey-screens .map-screen{grid-column:1;grid-row:auto}.journey-screens .screen-step{align-self:auto}.journey-screens .screen-step h3{font-size:19px}.journey-screens .micro-tags{margin:0}.journey-screens>li+li:before{left:calc(50% - 6px);top:-26px}.wire-to-screen{grid-template-columns:1fr}.research-copy .empathy-quadrants p{font-size:16px}.screen-task .screen-step h3{font-size:16px}.task-screens{gap:33px}.hero h1{font-size:45px}.research{padding-bottom:36px}}
/* Method artifacts: structured analysis and decisions, with screens as evidence. */
.method-journey,.method-flow{padding:26px;margin-top:32px;border:1px solid #d6d6d6;border-radius:12px;background:#f6f6f6}.journey-goal{display:flex;gap:17px;align-items:center;padding:15px 18px;margin-bottom:22px;background:#e8e8e8;border-radius:6px;font-size:14px}.journey-goal>span{font-size:9px;letter-spacing:1px;color:#486665}.journey-goal strong{font-weight:500}.journey-method-grid{display:grid;grid-template-columns:130px repeat(3,minmax(0,1fr));gap:1px;background:#d7d7d7;border:1px solid #d7d7d7}.journey-axis,.method-stage{display:grid;grid-template-rows:52px 58px 58px 70px 80px auto;background:white;min-width:0}.journey-axis{background:#ececec}.journey-axis>span,.method-stage>div,.method-stage>h3{padding:15px 14px;border-bottom:1px solid #e0e0e0;font-size:13px;line-height:1.4;margin:0}.journey-axis>span{font-size:9px;letter-spacing:.5px;display:flex;align-items:center}.method-stage>h3{background:var(--ink);color:white;font-size:15px;font-weight:500}.method-stage .barrier-cell{background:#ececec}.method-stage .opportunity-cell{background:#eaeaea}.method-stage img{border:1px solid #dbdbdb}.flow-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:10px;color:#4e6f6e;margin-bottom:22px}.flow-legend>span{display:flex;gap:7px;align-items:center}.flow-legend i{display:block;width:15px;height:12px;border:1px solid #779f9e;background:white}.flow-legend .legend-pill{border-radius:10px}.flow-legend .legend-diamond{transform:rotate(45deg);width:11px;height:11px}.hypothesis-key{border-bottom:1px dashed #88abaa}.flow-canvas{padding:25px;background-color:#fff;background-image:radial-gradient(#d2d2d2 .8px,transparent .8px);background-size:16px 16px;border:1px solid #dcdcdc;border-radius:8px}.flow-entry{display:flex;flex-direction:column;align-items:center}.flow-terminal{display:block;max-width:330px;width:100%;padding:13px 20px;border:1px solid #557978;border-radius:40px;background:#e8e8e8;text-align:center;font-size:13px}.flow-process{width:100%;max-width:350px;background:white;border:1px solid #88aaa9;padding:14px 20px;border-radius:4px;text-align:center;font-size:14px}.flow-connector{display:block;text-align:center;font-size:23px;line-height:1.4;color:#587c7b}.decision-shape{width:160px;height:110px;margin:20px 0 27px;border:1px solid #739c9b;background:#ececec;transform:skewY(-12deg);display:grid;place-items:center}.decision-shape>span{transform:skewY(12deg);font-size:13px;text-align:center;line-height:1.5}.decision-branches{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:780px;margin:auto;border-top:1px solid #789f9e}.branch-path{display:flex;flex-direction:column;align-items:center;position:relative;padding-top:28px}.branch-path:before{content:'';height:22px;width:1px;background:#789f9e;position:absolute;top:0;left:50%}.branch-answer{font-size:10px;color:#486564;background:white;padding:5px 12px;margin-bottom:10px}.hypothetical .flow-process,.hypothetical .flow-terminal{border-style:dashed;background:#f9f9f9}.branch-path small{font-size:10px;margin-top:13px;color:#5c8281}.key-process{background:var(--accent);color:white;border-color:var(--accent)}.wire-zone{position:relative;border:1px dashed #7da2a1!important;padding:14px 10px!important}.zone-marker{position:absolute;top:-10px;left:8px;display:grid;place-items:center;width:21px;height:21px;font-size:11px;background:#3e4649;color:white;border-radius:50%}.wf-related .zone-marker{left:auto;right:6px}.wire-to-screen .wf-body{grid-template-columns:1.35fr 1fr;gap:16px}.wire-to-screen .wf-body aside{display:block}.wire-to-screen .wf-related{margin-top:22px}.wire-decisions{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.wire-decisions li{display:flex;align-items:start;gap:12px;border-top:1px solid #d6d6d6;padding-top:16px}.wire-decisions li>span{background:var(--accent);color:white;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:11px;flex-shrink:0}.wire-decisions strong{display:block;font-size:14px;font-weight:500}.wire-decisions small{display:block;font-size:12px;line-height:1.5;margin-top:7px;color:var(--muted)}
@media(max-width:760px){.method-journey,.method-flow{padding:18px}.journey-goal{align-items:start;font-size:13px;padding:13px;gap:12px}.journey-method-grid{grid-template-columns:1fr;gap:20px;background:transparent;border:0}.journey-axis{display:none}.method-stage{grid-template-rows:auto;border:1px solid #d3d3d3;border-radius:6px;overflow:hidden}.method-stage>div:before{content:attr(data-label);display:block;font-size:9px;letter-spacing:.8px;margin-bottom:7px;color:#557776}.method-stage>div,.method-stage>h3{padding:13px 15px}.flow-canvas{padding:18px 10px}.decision-branches{gap:15px}.flow-process,.flow-terminal{font-size:11px;padding:12px 9px}.branch-answer{font-size:9px;padding:5px}.flow-legend{gap:13px}.wire-decisions{grid-template-columns:1fr;gap:15px}.wire-to-screen .wf-body{grid-template-columns:1.2fr 1fr}.decision-shape{width:140px;height:100px}.method-stage img{width:100%}}
/* Standard decision diamond. */
.decision-shape{width:125px;height:125px;transform:rotate(45deg);margin:28px 0 38px}.decision-shape>span{transform:rotate(-45deg);font-size:12px;width:150px;margin-left:-12px}.flow-entry .decision-shape{border-style:dashed}
@media(max-width:760px){.decision-shape{width:110px;height:110px}.decision-shape>span{font-size:11px;width:135px}}

/* Persona facts stack on phones instead of three narrow columns. */
@media (max-width: 600px) { .persona-strip dl { grid-template-columns: 1fr; gap: 16px; } }