.role-showcase{background:#e7efe5;color:var(--ink)}
.role-showcase .showcase-copy h2 em{color:#648966}
.role-showcase .eyebrow{color:#678768}
.role-showcase .showcase-halo{background:radial-gradient(circle,#99c8ab66,transparent 65%)}
.story-intro{font-size:13px;line-height:1.85;color:#b5cdca;margin-top:24px;max-width:420px}
.role-showcase .story-intro{color:#6c7e6c}
.role-tour-nav{display:grid;gap:10px;margin-top:30px}
.role-tour-nav button{display:flex;align-items:center;gap:15px;background:#f7faf2;border:1px solid #cddcc5;border-radius:10px;padding:16px 20px;text-align:left;color:#55715a;transition:transform .4s,background .4s,color .4s}
.role-tour-nav button[aria-pressed=true]{background:#2b5b4d;color:#fff;border-color:#2b5b4d;transform:translateX(8px);box-shadow:0 8px 22px #244b4615}
.role-tour-nav button>span{display:flex}
.role-tour-nav svg{width:24px;height:24px}
.role-tour-nav strong{font-size:18px;font-weight:500}
.role-tour-nav small{font-size:9px;letter-spacing:1px;opacity:.6;margin-left:auto}
.role-showcase .showcase-hint{color:#789275}
.role-story-card{padding:34px;border-radius:22px;border:1px solid #c7d8bd;background:linear-gradient(140deg,#fff,#eef5e6);box-shadow:0 30px 70px #3a63451c;transform:perspective(1400px) rotateY(calc(6deg - var(--story-progress,0)*12deg));min-width:0}
.role-story-meta{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #dce6d3;padding-bottom:18px;margin-bottom:24px;font-size:8px;letter-spacing:1.3px;color:#849a7a}
.role-story-card h3{font-size:32px;line-height:1.15;letter-spacing:-1px;margin-top:15px}
.role-story-card>p:not(.eyebrow):not(.story-caption){font-size:12px;line-height:1.85;color:#70806a;margin-top:18px;min-height:66px}
.role-story-chat{margin-top:23px;padding:18px;background:white;border:1px solid #d7e2d0;border-radius:12px}
.role-story-chat>div{display:flex;align-items:center;gap:8px}
.role-story-chat strong{font-size:12px;font-weight:500}
.role-story-chat small{font-size:6px;color:#94a38a;letter-spacing:1px;margin-left:auto}
.role-story-chat p{font-size:12px;line-height:1.8;color:#687d60}
.role-story-chat .role-story-question{padding:10px 12px;background:#eaf2e4;border-radius:9px 9px 0 9px;margin:15px 0 12px 20px;color:#3c6849;font-size:11px}
.role-story-card>.button{font-size:11px;padding:13px 18px;min-height:46px;margin-top:23px}
.story-caption{font-size:8px;line-height:1.8;color:#91a282;margin-top:13px}
.story-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#7fa68d25}
.story-progress i{display:block;height:100%;background:#94bb98;transform:scaleX(var(--story-progress,0));transform-origin:left}
.role-choice-hint{font-size:12px;color:#678266;margin-bottom:16px}
.role-choice-hint span{margin-left:15px;display:inline-block;animation:scroll-arrow 1.8s infinite}
.ai-role-tabs>button{flex:1;font-size:14px;min-height:55px}
.ai-role-tabs svg{width:21px;height:21px}
.portal-showcase{background:linear-gradient(145deg,#153e4d,#102d36)}
.portal-showcase .showcase-inner{grid-template-columns:1fr 1fr}
.portal-network{display:inline-flex;align-items:center;gap:8px;font-size:9px;border:1px solid #b4d2bb44;padding:8px 12px;border-radius:24px;color:#bdd6bd;margin-top:16px}
.portal-network .status-dot{background:#adcf9a}
.portal-story-description{margin-top:28px;min-height:180px}
.portal-story-description>span{font-size:10px;letter-spacing:2px;color:#99baa4}
.portal-story-description h3{font-size:27px;line-height:1.2;letter-spacing:-.5px;margin-top:15px}
.portal-story-description>p{font-size:13px;line-height:1.8;color:#adc6c6;margin-top:14px;max-width:450px}
.portal-device-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.portal-rings{position:absolute;top:50%;left:50%;width:570px;height:570px;border:1px solid #91baa43b;border-radius:50%;transform:translate(-50%,-50%) scale(calc(.85 + var(--story-progress,0)*.3));box-shadow:0 0 0 55px #91baa409,0 0 0 110px #91baa407;pointer-events:none}
.portal-phone{position:relative;width:310px;height:520px;border:7px solid #275052;border-radius:39px;padding:34px 17px 15px;background:#f5f8ef;box-shadow:0 30px 70px #0005,0 0 0 1px #8db49d77;color:#2b5149;display:flex;flex-direction:column;transform:perspective(1400px) rotateY(calc(-12deg + var(--story-progress,0)*22deg)) rotateZ(calc(-3deg + var(--story-progress,0)*6deg))}
.portal-camera{position:absolute;left:50%;transform:translateX(-50%);width:65px;height:8px;top:11px;border-radius:10px;background:#254a47}
.portal-phone-header{display:flex;align-items:center;gap:8px;padding-bottom:17px;border-bottom:1px solid #d7e1cd;font-size:16px;letter-spacing:-.4px}
.portal-phone-header small{display:block;font-size:8px;letter-spacing:.3px;color:#7b9270;margin-top:4px}
.portal-initial{margin-left:auto;width:28px;height:28px;border:1px solid #cbdac1;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#729366}
.portal-view[hidden]{display:none}
.portal-view{padding-top:20px;flex:1}
.portal-view>p:first-child{font-size:12px;color:#849575;margin-bottom:17px}
.portal-appointment{padding:16px;border:1px solid #d7e2cc;background:white;border-radius:12px}
.portal-appointment>small,.portal-question>small{font-size:7px;letter-spacing:1.2px;color:#8da07f}
.portal-appointment>strong{font-size:23px;letter-spacing:-.5px;font-weight:500;display:block;margin-top:12px}
.portal-appointment>p{font-size:12px;margin-top:4px}
.portal-appointment>span{display:inline-block;font-size:8px;padding:5px 8px;border-radius:13px;background:#f4edc9;color:#8c7850;margin-top:12px}
.portal-action-preview{padding:11px;background:#356b53;border-radius:7px;font-size:10px;color:#f5f9ed;text-align:center;margin-top:10px}
.portal-action-preview.secondary{background:#eaf1e1;color:#7b916a;border:1px solid #d3dfc7;margin-top:7px}
.portal-waiting{margin-top:18px}
.portal-waiting strong{font-size:11px;font-weight:500}
.portal-waiting p{font-size:9px;color:#7e9470;margin-top:5px}
.portal-phone-footer{border-top:1px solid #d8e3cf;display:flex;justify-content:space-between;gap:5px;margin-top:14px;padding-top:13px;font-size:7px;color:#93a087}
.portal-phone-footer .current{font-weight:700;color:#466e46}
.portal-step small{font-size:9px;letter-spacing:1px;color:#82a167}
.portal-step strong{font-size:22px;letter-spacing:-.5px;line-height:1.2;font-weight:500;display:block;margin-top:10px}
.portal-step>div{height:4px;background:#dce8d0;border-radius:6px;margin-top:15px}
.portal-step i{height:100%;width:14%;background:#81a260;display:block}
.portal-question{padding:15px;border:1px solid #d4e2c6;border-radius:10px;background:white;margin-top:20px}
.portal-question strong{display:block;font-size:14px;font-weight:500;margin-top:10px}
.portal-question p{font-size:10px;line-height:1.8;color:#87987b;margin-top:8px}
.portal-saved{font-size:9px;line-height:1.8;color:#799663;margin-top:18px}
.portal-file{display:flex;align-items:center;gap:11px;padding:14px 10px;border:1px solid #d4e0c9;background:white;border-radius:10px;margin-top:10px}
.portal-file>span{font-size:8px;border:1px solid #d6e3cb;border-radius:4px;padding:8px 5px;color:#7d9b69}
.portal-file strong{display:block;font-size:12px;font-weight:500}
.portal-file small{display:block;font-size:8px;color:#8a9b7d;margin-top:6px}
.portal-device-wrap>.story-caption{position:relative;color:#98b6a5;font-size:9px;text-align:center;margin-top:20px}
.portal-advantages{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding-top:50px;padding-bottom:65px}
.portal-advantages article{border-top:1px solid #d8e2cf;padding-top:23px}
.portal-advantages article>span{display:flex;color:#6a8b5a}
.portal-advantages svg{width:23px;height:23px}
.portal-advantages h3{font-size:20px;letter-spacing:-.5px;margin-top:18px}
.portal-advantages p{font-size:12px;line-height:1.85;color:#7c8d70;margin-top:12px}
.portal-advantages>a{grid-column:1/-1;font-size:12px}
@media(max-width:1150px){.role-story-card{padding:26px}.role-story-card h3{font-size:28px}.desktop-nav{gap:18px}.desktop-nav a{font-size:11px}.portal-showcase .showcase-inner{gap:35px}}
@media(max-width:900px){.role-story-card{padding:22px}.role-story-card h3{font-size:25px}.role-story-chat{padding:14px}.role-story-chat p{font-size:11px}.role-tour-nav button{padding:14px}.role-tour-nav strong{font-size:16px}.portal-phone{width:280px;height:495px}.portal-story-description h3{font-size:23px}.portal-story-description p{font-size:12px}.portal-network{font-size:8px}}
@media(max-width:640px){
 .role-showcase .showcase-inner,.portal-showcase .showcase-inner{display:flex;flex-direction:column;gap:18px;align-items:stretch}
 .role-showcase .showcase-copy h2,.portal-showcase .showcase-copy h2{font-size:32px;margin-top:12px}
 .story-intro{font-size:11px;line-height:1.7;margin-top:12px}
 .role-tour-nav{display:flex;gap:6px;margin-top:18px}
 .role-tour-nav button{flex:1;min-width:0;display:block;text-align:center;padding:10px 4px}
 .role-tour-nav strong{font-size:12px}.role-tour-nav small{display:none}
 .role-tour-nav button>span{justify-content:center;margin-bottom:6px}
 .role-tour-nav svg{width:20px;height:20px}
 .role-tour-nav button[aria-pressed=true]{transform:translateY(-3px)}
 .role-story-card{padding:20px;border-radius:15px;transform:none}
 .role-story-meta{padding-bottom:12px;margin-bottom:16px;font-size:7px}
 .role-story-card h3{font-size:24px;margin-top:10px}
 .role-story-card>p:not(.eyebrow):not(.story-caption){font-size:11px;line-height:1.7;margin-top:12px;min-height:0}
 .role-story-chat{margin-top:15px;padding:12px}
 .role-story-chat p{font-size:10px;line-height:1.7}
 .role-story-chat .role-story-question{font-size:10px;margin:12px 0 10px 15px}
 .role-story-chat strong{font-size:11px}.role-story-chat small{font-size:5px}
 .role-story-card>.button{font-size:10px;margin-top:15px;padding:11px 16px;min-height:44px}
 .story-caption{font-size:7px;margin-top:10px}
 .ai-role-tabs>button{flex:none;font-size:12px;min-height:50px}
 .role-choice-hint{font-size:11px}
 .portal-network{font-size:8px;padding:6px 9px;margin-top:10px}
 .portal-story-description{margin-top:16px;min-height:110px}
 .portal-story-description>span{font-size:8px}
 .portal-story-description h3{font-size:20px;margin-top:7px}
 .portal-story-description p{font-size:10px;line-height:1.75;margin-top:9px}
 .portal-showcase .showcase-controls{margin-top:9px}
 .portal-phone{width:210px;height:340px;border-width:5px;border-radius:28px;padding:24px 12px 10px;transform:none}
 .portal-camera{width:45px;height:6px;top:8px}
 .portal-phone-header{font-size:12px;padding-bottom:10px;gap:6px}
 .portal-phone-header img{width:22px;height:22px}
 .portal-phone-header small{font-size:6px}
 .portal-initial{width:22px;height:22px;font-size:8px}
 .portal-view{padding-top:12px}.portal-view>p:first-child{font-size:9px;margin-bottom:10px}
 .portal-appointment{padding:10px;border-radius:8px}
 .portal-appointment>small,.portal-question>small{font-size:5px;letter-spacing:1px}
 .portal-appointment>strong{font-size:17px;margin-top:7px}
 .portal-appointment>p{font-size:9px}.portal-appointment>span{font-size:6px;padding:4px 6px;margin-top:7px}
 .portal-action-preview{font-size:7px;padding:7px;margin-top:8px}
 .portal-action-preview.secondary{margin-top:5px}
 .portal-waiting{margin-top:11px}.portal-waiting strong{font-size:8px}.portal-waiting p{font-size:7px;margin-top:3px}
 .portal-phone-footer{font-size:5px;margin-top:9px;padding-top:8px}
 .portal-device-wrap>.story-caption{font-size:7px;margin-top:10px}
 .portal-rings{width:350px;height:350px}
 .portal-step small{font-size:7px}.portal-step strong{font-size:16px;margin-top:6px}
 .portal-step>div{height:3px;margin-top:10px}
 .portal-question{padding:10px;margin-top:12px}
 .portal-question strong{font-size:10px;margin-top:6px}.portal-question p{font-size:8px;margin-top:5px}
 .portal-saved{font-size:7px;margin-top:10px}
 .portal-file{gap:7px;padding:9px 7px;margin-top:7px}
 .portal-file>span{font-size:6px;padding:6px 4px}.portal-file strong{font-size:9px}.portal-file small{font-size:6px;margin-top:4px}
 .portal-advantages{grid-template-columns:1fr;gap:24px;padding-top:35px;padding-bottom:45px}
 .portal-advantages h3{margin-top:13px}.portal-advantages p{font-size:12px;margin-top:10px}
}
@media(prefers-reduced-motion:reduce),(max-width:640px) and (max-height:760px){
 .role-showcase,.portal-showcase{height:auto;min-height:0;padding:60px 0}
 .role-showcase .showcase-sticky,.portal-showcase .showcase-sticky{position:relative;top:0;height:auto;min-height:0;max-height:none}
 .role-story-card,.portal-phone,.portal-rings{transform:none}
 .role-tour-nav button{transition:none}
 .role-choice-hint span{animation:none}
}
.showcase.role-showcase{background:#e7efe5;color:var(--ink)}
.role-story-card{color:var(--ink)}