@font-face{font-family:"Kanit";src:url("./fonts/Kanit-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Kanit";src:url("./fonts/Kanit-Medium.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Kanit";src:url("./fonts/Kanit-SemiBold.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Kanit";src:url("./fonts/Kanit-Bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
:root{--paper:#f6f5ef;--ink:#22251f;--muted:#606458;--line:#d4d7ca;--olive:#687451;--soft:#e6e9de;--green:#3d644b;--amber:#805c22;--red:#934f40}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Kanit",sans-serif;font-size:16px;line-height:1.85}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--olive);outline-offset:5px}header,main,footer{max-width:1440px;margin:auto}header{padding:25px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}header img{object-fit:contain;mix-blend-mode:multiply;height:62px;width:142px}.brand-line,.eyebrow{font-family:"Kanit",sans-serif;font-size:12px;letter-spacing:2px;font-weight:600}.nav-start{font-size:14px;text-decoration:none}.hero{padding:88px 6% 70px;display:grid;grid-template-columns:1.1fr 1fr;gap:7%;align-items:center}.eyebrow{color:var(--muted);line-height:1.7}h1{font-size:clamp(48px,5.4vw,78px);line-height:1.45;font-weight:500;letter-spacing:-2px;margin:25px 0}h1 span{color:var(--olive)}h2{font-size:clamp(28px,3vw,40px);line-height:1.55;font-weight:500;margin:15px 0 24px}h3{font-size:21px;line-height:1.65;margin:10px 0}p{margin:12px 0}.lead{font-size:20px;color:var(--muted)}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;background:var(--ink);color:white;padding:17px 24px;border:1px solid var(--ink);text-decoration:none;margin-top:25px;font-size:16px}.button:hover{background:#414936}.button.secondary{background:transparent;color:var(--ink)}.button.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.small{font-size:13px;color:var(--muted);line-height:1.8}.hero-art{text-align:center}.pyramid{display:flex;flex-direction:column;align-items:center;gap:5px;margin:35px auto 28px;max-width:510px}.tier{border:0;color:var(--ink);background:#d1d8c4;min-height:59px;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 100%,0 100%);width:var(--width);padding:9px 20px;line-height:1.45;transition:background .2s,transform .2s;font-size:15px}.tier:first-child{padding-top:22px;clip-path:polygon(50% 0,100% 100%,0 100%);min-height:81px}.tier:nth-child(2){background:#c2cbb0}.tier:nth-child(3){background:#b0bc9b}.tier:nth-child(4){background:#95a581}.tier:nth-child(5){background:#6e805c;color:white}.tier[aria-pressed=true]{background:var(--ink);color:white}.tier:hover{transform:translateY(-2px)}.tier:focus-visible{clip-path:none;outline-offset:1px}.tier small{display:block;font-size:12px}.layer-detail{text-align:left;border-top:1px solid var(--line);padding:20px 0;min-height:157px}.layer-detail h3{font-size:20px}.layer-detail p{font-size:15px;color:var(--muted)}.philosophy{display:grid;grid-template-columns:.8fr 1fr 1fr;gap:40px;border-top:1px solid var(--line);padding:52px 6%;align-items:center}.philosophy h2{font-size:31px;margin:0}.philosophy>p:last-child{color:var(--muted)}.assessment{background:#eeefe7;padding:65px 6%;scroll-margin-top:20px;min-height:440px}.privacy{padding:42px 6%;max-width:1000px;color:var(--muted);font-size:14px}.privacy h3{color:var(--ink);font-size:19px}footer{padding:30px 6%;border-top:1px solid var(--line);display:flex;gap:24px;justify-content:space-between;font-size:14px}.skip{position:absolute;left:10px;top:-100px;background:white;padding:10px}.skip:focus{top:0}.wizard{display:grid;grid-template-columns:230px 1fr;gap:55px}.steps{list-style:none;padding:0;margin:25px 0}.steps li{border-bottom:1px solid var(--line);padding:13px 0;font-size:15px}.steps .current{font-weight:bold;color:var(--green)}.step-num{font-family:"Kanit",sans-serif;font-style:italic;margin-right:15px;color:var(--muted)}.step-main{max-width:760px}.progress{height:3px;background:var(--line);margin:0 0 30px}.progress span{display:block;height:3px;background:var(--olive)}fieldset{border:0;padding:0;margin:28px 0 36px}legend{font-size:18px;line-height:1.7;margin-bottom:14px;width:100%}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.option{background:#f9f9f4;border:1px solid var(--line);display:flex;align-items:flex-start;gap:11px;padding:14px 16px;cursor:pointer;line-height:1.65;font-size:15px}.option:has(input:checked){border-color:var(--olive);background:#e0e6d5;box-shadow:inset 0 0 0 1px var(--olive)}input[type=radio],input[type=checkbox]{accent-color:var(--olive);width:18px;height:18px;flex:0 0 18px;margin:5px 0 0}.consent{display:flex;align-items:flex-start;gap:12px;max-width:700px;margin:24px 0}.actions{display:flex;gap:15px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:25px}.error{color:var(--red);font-size:15px}.note{padding:18px 22px;background:var(--soft);border-left:3px solid var(--olive);font-size:15px}.results-head{display:flex;justify-content:space-between;gap:25px;align-items:end}.result-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;margin:35px 0}.result-list{border-top:1px solid var(--line)}.result-row{padding:22px 0;border-bottom:1px solid var(--line)}.result-row h3{display:inline;margin-right:12px;font-size:19px}.badge{font-size:14px;display:inline-block}.badge:before{content:'●';margin-right:7px}.strong{color:var(--green)}.review{color:var(--amber)}.gap{color:var(--red)}.na{color:var(--muted)}.result-row p{color:var(--muted);font-size:15px}.summary-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px}.summary-columns section{border-top:1px solid var(--line);padding-top:22px}.summary-columns li{margin:10px 0}.priority-box{padding:30px;background:var(--paper);margin-top:35px}.consult{background:var(--ink);color:var(--paper);padding:35px;margin-top:35px}.consult .eyebrow{color:#bcc7ad}.consult p{max-width:700px}.consult a{color:inherit}.summary-sheet{border:1px solid var(--line);padding:28px;margin:25px 0}.summary-sheet dt{font-size:13px;color:var(--muted)}.summary-sheet dd{margin:0 0 15px}.save-options{display:flex;gap:14px;flex-wrap:wrap}.result-tier{clip-path:none;border-left:3px solid currentColor!important}.empty{color:var(--muted)}[hidden]{display:none!important}@media(max-width:850px){.brand-line{display:none}.hero{gap:35px;padding-top:45px}.philosophy{grid-template-columns:1fr 1fr}.philosophy .eyebrow{grid-column:1/-1}.wizard{grid-template-columns:1fr;gap:15px}.steps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}.steps li{font-size:13px;padding:6px}.step-num{margin-right:5px}.wizard aside>p{display:none}.result-grid{gap:25px}}@media(max-width:600px){header{padding:15px 5%}header img{width:115px;height:48px}.nav-start{font-size:13px}.hero{grid-template-columns:1fr;padding:35px 6%}.hero h1{font-size:52px}.lead{font-size:18px}.hero-art{margin-top:10px}.hero-art>.eyebrow{font-size:11px}.philosophy{grid-template-columns:1fr;gap:18px;padding:35px 6%}.philosophy .eyebrow{grid-column:auto}.assessment{padding:35px 5%}.options,.result-grid,.summary-columns{grid-template-columns:1fr}.result-grid{margin-top:15px}.results-head{display:block}.priority-box,.consult,.summary-sheet{padding:22px}.button{gap:15px;font-size:15px;padding:14px 18px}.actions .button{margin-top:18px}.steps li{font-size:12px}.privacy{padding:30px 6%}footer{flex-wrap:wrap;gap:12px}footer span{order:3;width:100%}.desktop{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{header,.hero,.philosophy,.privacy,footer,.actions,.save-options,.consult,.priority-box,button{display:none!important}.assessment{background:white;padding:0}.result-grid{grid-template-columns:1fr 1fr}.summary-sheet{break-inside:avoid}body{font-size:12px}.badge{font-size:12px}.result-row{padding:8px 0}}

/* Original, friendly editorial illustrations — September 2026 */
.hero{grid-template-columns:1fr 1.15fr;gap:3%;padding-top:58px;padding-bottom:58px}
.hero-illustration,.conversation-illustration{min-width:0}
.hero-illustration img,.conversation-illustration img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;mix-blend-mode:multiply}
.hero-illustration{margin:0 -3% 0 -1%}
.philosophy{grid-template-columns:1fr 1fr;gap:7%;padding-top:30px;padding-bottom:30px}
.philosophy-copy .eyebrow{color:#947147}
.philosophy-copy h2{margin:15px 0 20px}
.philosophy-copy>p:last-child{color:var(--muted)}
.pyramid-explainer{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;padding:48px 6% 60px;border-top:1px solid var(--line)}
.pyramid-explainer .hero-art{min-width:0}
.pyramid-explainer .pyramid{margin-top:20px}
@media(max-width:850px){.hero{gap:20px}.philosophy{gap:30px}.pyramid-explainer{gap:35px}}
@media(max-width:600px){.hero{grid-template-columns:1fr;padding:32px 6% 20px;gap:10px}.hero-illustration{margin:0 -3%}.philosophy{grid-template-columns:1fr;padding:25px 6% 35px;gap:12px}.conversation-illustration{max-width:340px;margin:auto}.philosophy-copy h2{font-size:30px}.pyramid-explainer{grid-template-columns:1fr;padding:35px 6%;gap:15px}.pyramid-explainer h2{font-size:30px}}
@media print{.pyramid-explainer{display:none!important}}

/* A single triangle, sliced into five bands. Shared coordinates keep edges collinear. */
.pyramid{position:relative;display:block;width:100%;aspect-ratio:1.15;gap:0}
.pyramid .tier,.pyramid .tier:first-child{position:absolute;left:0;top:var(--top);width:100%;height:var(--height);min-height:0;margin:0;padding:0;clip-path:var(--shape);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;line-height:1.5}
.pyramid .tier:first-child{justify-content:flex-end;padding-bottom:8px}
.pyramid .tier:hover{transform:none;filter:brightness(.94)}
.pyramid .tier:focus-visible{clip-path:var(--shape);outline:none;filter:brightness(.85);text-decoration:underline;text-underline-offset:4px}
.pyramid .tier small{font-size:12px;line-height:1.5}
@media(max-width:600px){.pyramid{aspect-ratio:1}.pyramid .tier{font-size:15px}.pyramid .tier:first-child{font-size:14px;padding-bottom:5px}}

/* Static geometry classes preserve the host Content Security Policy. */
.tier[data-tier="0"]{--top:83.5%;--height:16.5%;--shape:polygon(8.25% 0,91.75% 0,100.0% 100%,0.0% 100%)}
.tier[data-tier="1"]{--top:66.5%;--height:16.0%;--shape:polygon(16.75% 0,83.25% 0,91.25% 100%,8.75% 100%)}
.tier[data-tier="2"]{--top:49.5%;--height:16.0%;--shape:polygon(25.25% 0,74.75% 0,82.75% 100%,17.25% 100%)}
.tier[data-tier="3"]{--top:32.5%;--height:16.0%;--shape:polygon(33.75% 0,66.25% 0,74.25% 100%,25.75% 100%)}
.tier[data-tier="4"]{--top:0%;--height:31.5%;--shape:polygon(50.0% 0,50.0% 0,65.75% 100%,34.25% 100%)}
.progress span[data-progress="0"]{width:0.0%}
.progress span[data-progress="1"]{width:16.666666666666664%}
.progress span[data-progress="2"]{width:33.33333333333333%}
.progress span[data-progress="3"]{width:50.0%}
.progress span[data-progress="4"]{width:66.66666666666666%}
.progress span[data-progress="5"]{width:83.33333333333334%}

/* Match the shared Beyond11 header logo used by the Sales Toolkit. */
header .header-logo{display:flex;align-items:center;width:132px;height:60px;overflow:hidden;flex:0 0 auto}
header .header-logo img{display:block;width:100%;height:auto;object-fit:contain;mix-blend-mode:normal}
@media(max-width:600px){header .header-logo{width:108px;height:52px}header .header-logo img{width:100%;height:auto}}

/* Use the shared Beyond11 wordmark in the footer. */
footer{align-items:center}
.footer-logo{display:flex;align-items:center;width:104px;height:48px;overflow:hidden;flex:0 0 auto}
.footer-logo img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:600px){.footer-logo{width:90px;height:42px}}
