@import url("../tokens.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f6f2e9;color:#202238;font-family:var(--font-body);font-size:var(--text-md);line-height:1.68;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em}svg{display:block;width:100%;height:100%}.shell{width:min(76rem,calc(100% - 3rem));margin-inline:auto}
.skip-link{position:fixed;inset:1rem auto auto 1rem;z-index:30;padding:.7rem 1rem;background:#191f36;color:white;transform:translateY(-180%)}.skip-link:focus{transform:none}
.site-header{border-bottom:1px solid #d3cec2;background:#f6f2e9}.nav{min-height:4.75rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.brand{display:inline-flex;align-items:center;gap:.65rem;font-weight:700;text-decoration:none;letter-spacing:-.02em}.brand-mark{width:2rem;height:2rem;padding:.25rem;border-radius:50%;background:#191f36;color:#f6f2e9}.nav-links,.footer-inner div{display:flex;align-items:center;gap:1.35rem}.nav-links a{font-size:var(--text-sm);font-weight:600;text-decoration:none}
.hero,.hub-hero{padding-block:clamp(3.5rem,8vw,7rem);background:#191f36;color:#f9f5ec}.breadcrumbs{display:flex;gap:.6rem;margin-bottom:clamp(2.5rem,7vw,5rem);color:#bfc5d9;font-size:var(--text-xs)}.breadcrumbs a{text-decoration:none}.eyebrow,.section-label{margin:0 0 .9rem;color:#bd4b42;font-size:var(--text-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase}.hero .eyebrow,.hub-hero .eyebrow{color:#f3a39c}h1,h2{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.025em}h1{max-width:14ch;font-size:clamp(3.1rem,7vw,6.5rem);line-height:.96}h2{font-size:clamp(2.05rem,4.2vw,3.55rem);line-height:1.05}.lede{max-width:50rem;margin:1.5rem 0 0;color:#cbd0e0;font-size:clamp(1.1rem,2vw,1.35rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:3.2rem;padding:.75rem 1.1rem;border:1px solid #aeb5ce;border-radius:.4rem;color:#fff;font-weight:700;text-decoration:none}.button-primary{border-color:#f3a39c;background:#f3a39c;color:#191f36}
.content{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(3rem,8vw,8rem);align-items:start;padding-block:4rem 7rem}.contents{position:sticky;top:2rem;display:grid;gap:.5rem}.contents p{margin:0 0 .4rem;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase}.contents a{color:#626579;font-size:var(--text-sm);text-decoration:none}.contents a:hover{text-decoration:underline}.article-body{min-width:0}.article-body>section,.article-body>aside{padding-block:3.75rem;border-bottom:1px solid #d3cec2}.article-body>section:first-child{padding-top:0}.article-body h2+p,.article-body>section>p:not(.section-label){max-width:48rem}.quick-answer>p:not(.section-label){font-size:var(--text-lg)}
.structure-strip{display:grid;grid-template-columns:repeat(6,1fr);margin-top:2rem;border:1px solid #c9c3b8;border-radius:.5rem;overflow:hidden}.structure-strip span{padding:.85rem .55rem;border-right:1px solid #c9c3b8;background:#efe8dc;text-align:center;font-size:var(--text-xs);font-weight:700}.structure-strip span:last-child{border:0}
.scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:2rem;background:#d3cec2;border:1px solid #d3cec2;border-radius:.6rem;overflow:hidden}.scenario-grid>div{padding:1.35rem;background:#fffaf1}.scenario-grid span{color:#bd4b42;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.scenario-grid p{margin:.35rem 0 0}.boundary-note{margin-top:1rem;padding:1rem 1.2rem;background:#f4ddd6;font-size:var(--text-sm)}
.transcript{margin-top:2rem;padding:clamp(1.5rem,4vw,2.4rem);border-radius:.65rem;background:#191f36;color:#f9f5ec;box-shadow:0 1.2rem 2.8rem rgba(25,31,54,.16)}.transcript header{display:flex;align-items:center;gap:.65rem;padding-bottom:1.25rem;border-bottom:1px solid #42485f;color:#bfc5d9;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.live-dot{width:.55rem;height:.55rem;border-radius:50%;background:#f3a39c}.transcript p{margin:1.35rem 0 0;font-size:var(--text-lg);line-height:1.65}.practice-cue{display:grid;grid-template-columns:10rem 1fr;gap:1rem;margin-top:1rem;padding:1.1rem 1.25rem;border:1px dashed #9d9589;border-radius:.5rem}.practice-cue span{color:#626579;font-size:var(--text-sm)}
.presentation-steps{display:grid;gap:1rem;margin-top:2rem}.presentation-step{padding:clamp(1.25rem,3vw,2rem);border:1px solid #d3cec2;border-radius:.65rem;background:#fffaf1}.presentation-step>header{display:flex;gap:1.1rem;align-items:flex-start}.presentation-step>header>span{color:#bd4b42;font-size:var(--text-xs);font-weight:700;letter-spacing:.1em}.presentation-step header p{margin:0;color:#bd4b42;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.presentation-step h3{margin:.15rem 0 0;font-size:var(--text-lg)}.presentation-step blockquote{margin:1.3rem 0 0;padding:1.1rem 1.25rem;border-left:3px solid #bd4b42;background:#f2ece1}.presentation-step blockquote p{margin:0;font-family:var(--font-display);font-size:clamp(1.4rem,2.7vw,2rem);line-height:1.34}.presentation-step .why{color:#626579;font-size:var(--text-sm)}
.language-contrast{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding-top:1rem;border-top:1px solid #d3cec2}.language-contrast>div{padding:1rem;background:#f6f2e9}.language-contrast span{color:#bd4b42;font-size:var(--text-xs);font-weight:700;text-transform:uppercase}.language-contrast p{margin:.3rem 0 0}.language-contrast>p{grid-column:1/-1;color:#626579;font-size:var(--text-sm)}
.gap-grid,.follow-ups,.repairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2rem}.gap-grid article,.follow-ups article,.repairs article{padding:1.35rem;border:1px solid #d3cec2;border-radius:.55rem;background:#fffaf1}.gap-grid h3,.follow-ups h3{margin:0;font-size:var(--text-md)}.gap-grid p,.follow-ups p,.repairs p{margin:.55rem 0 0}.gap-grid .say{color:#8f332e;font-weight:600}.follow-ups h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;line-height:1.25}
.table-wrap{margin-top:2rem;overflow-x:auto}table{width:100%;border-collapse:collapse;background:#fffaf1}th,td{padding:1rem;text-align:left;vertical-align:top;border:1px solid #d3cec2}th{background:#ebe5da;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em}.decision{display:inline-block;padding:.2rem .5rem;border-radius:99px;background:#dce4f4;font-size:var(--text-xs);font-weight:700}.decision-lead{background:#f1c8c3}.decision-omit{background:#e6e1d8;color:#626579}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 2rem;margin:2rem 0 0;padding:0;list-style:none;counter-reset:item}.checklist li{position:relative;padding:.9rem 0 .9rem 2.6rem;border-top:1px solid #d3cec2;counter-increment:item}.checklist li::before{content:counter(item);position:absolute;left:0;top:.75rem;width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:50%;background:#191f36;color:white;font-size:var(--text-xs);font-weight:700}.mistake{color:#8f332e;font-weight:700}.faq-list{margin-top:2rem}.faq-list details{border-top:1px solid #d3cec2}.faq-list details:last-child{border-bottom:1px solid #d3cec2}.faq-list summary{padding:1.1rem 0;cursor:pointer;font-weight:700}.faq-list details p{margin:0;padding:0 0 1.2rem;color:#626579}
.cta-panel{margin-top:3rem;padding:clamp(1.5rem,4vw,3rem)!important;border:0!important;border-radius:.65rem;background:#191f36;color:#f9f5ec}.cta-panel h2{max-width:16ch}.cta-panel>div>p:not(.section-label){max-width:40rem;color:#cbd0e0}.cta-actions{display:flex;align-items:center;gap:1.2rem;margin-top:1.5rem}.store-badge{display:inline-flex;height:3.25rem;line-height:0}.store-badge img{display:block;width:auto;height:100%}.cta-actions>a:last-child{font-weight:700}.sources{display:grid;gap:1rem;margin:1.5rem 0 0;padding:0;list-style:none}.sources li{display:grid}.sources a{font-weight:700}.sources span,.review-date{color:#626579;font-size:var(--text-sm)}.disclaimer{color:#626579;font-size:var(--text-sm)}
.site-footer{padding-block:2rem;border-top:1px solid #d3cec2;font-size:var(--text-sm)}.footer-inner{display:flex;justify-content:space-between;gap:1.5rem}.footer-inner div{flex-wrap:wrap}
.hub-hero h1 em{color:#f3a39c;font-weight:400}.hub-hero>div>p:nth-of-type(2){max-width:50rem;color:#cbd0e0;font-size:var(--text-xl)}.hub-hero .structure-strip{max-width:52rem;border-color:#51576d}.hub-hero .structure-strip span{border-color:#51576d;background:#272d47}.what-is{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding-block:4rem}.what-is p:last-child{max-width:46rem;font-size:var(--text-lg)}.guide-library{padding-block:4rem 7rem;border-top:1px solid #d3cec2}.library-heading{display:grid;grid-template-columns:1fr 2fr;gap:2rem;margin-bottom:2.5rem}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.guide-card{min-height:23rem;display:flex;flex-direction:column;padding:2rem;border:1px solid #d3cec2;border-radius:.65rem;background:#fffaf1;text-decoration:none}.card-index{color:#bd4b42;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em}.guide-card h2{max-width:16ch;margin:2.3rem 0 1rem;font-size:var(--text-2xl)}.guide-card p{margin:0;color:#626579}.card-link{margin-top:auto;padding-top:1.5rem;font-weight:700}.method{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding-block:4rem 7rem;border-top:1px solid #d3cec2}.method ol{margin:0;padding:0;list-style:none}.method li{display:grid;grid-template-columns:2rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid #d3cec2}.method li span{color:#bd4b42;font-weight:700}.method li p{margin:0}.hub-boundary{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding-block:3rem;border-top:1px solid #d3cec2}.hub-boundary p{margin:0;color:#626579}
@media (hover:hover){.button,.guide-card{transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}.button:hover,.guide-card:hover{transform:translateY(-2px);box-shadow:0 .8rem 2rem rgba(25,31,54,.12)}}
@media (max-width:52rem){.shell{width:min(100% - 2rem,76rem)}.nav{min-height:4.25rem}.nav-links a:nth-child(n+2){display:none}.content{display:block;padding-top:2rem}.contents{position:static;display:flex;overflow-x:auto;gap:1rem;padding-bottom:1.5rem;border-bottom:1px solid #d3cec2}.contents p{display:none}.contents a{white-space:nowrap}.structure-strip{grid-template-columns:repeat(3,1fr)}.structure-strip span:nth-child(3){border-right:0}.structure-strip span:nth-child(-n+3){border-bottom:1px solid #c9c3b8}.scenario-grid,.gap-grid,.follow-ups,.repairs,.checklist,.guide-grid{grid-template-columns:1fr}.practice-cue,.what-is,.library-heading,.method,.hub-boundary{grid-template-columns:1fr}.footer-inner{display:grid}}
@media (max-width:34rem){.hero-actions{align-items:stretch}.button{width:100%}.language-contrast{grid-template-columns:1fr}.language-contrast>p{grid-column:auto}.cta-actions{align-items:flex-start;flex-direction:column}.table-wrap{margin-inline:-.5rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}

/* Landing launch badges; shared placement for Android and browser practice. */
.cta-panel .cta-actions{display:flex;flex-direction:column;align-items:flex-start}
.cta-launch{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs);max-width:100%}
.cta-launch .store-badge{height:3.5rem;flex:0 0 auto}
.cta-launch .store-badge img{display:block;height:100%;width:auto}
.cta-launch .launch-web{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);height:3.5rem;padding:0 1.125rem;border:1px solid var(--color-rule-strong);border-radius:.375rem;background:var(--color-launch-bg);color:var(--color-paper-3);text-decoration:none;white-space:nowrap;font-family:var(--font-body);transition:background var(--dur-short) var(--ease-out)}
.cta-launch .launch-web:hover{background:var(--color-launch-hover)}
.cta-launch .launch-web:active{opacity:.85}
.cta-launch a:focus-visible{outline:3px solid var(--color-paper-3);outline-offset:4px}
.cta-launch .browser-icon{width:1.625rem;height:1.625rem;flex:0 0 auto}
.cta-launch .badge-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem;line-height:1.15}
.cta-launch .badge-copy>span{font-size:.9375rem;font-weight:650;letter-spacing:-.02em}
.cta-launch .badge-copy small{font-size:.625rem;font-weight:500;letter-spacing:.015em;opacity:.8}
@media(max-width:450px){.cta-launch{gap:var(--space-2xs)}.cta-launch .store-badge,.cta-launch .launch-web{height:3rem}.cta-launch .launch-web{padding:0 var(--space-xs);gap:var(--space-2xs)}.cta-launch .badge-copy>span{font-size:.8125rem}.cta-launch .badge-copy small{font-size:.5625rem}.cta-launch .browser-icon{width:1.375rem;height:1.375rem}}
@media(max-width:22rem){.cta-launch .store-badge,.cta-launch .launch-web{height:2.75rem}.cta-launch .launch-web{padding:0 var(--space-2xs);gap:.375rem}.cta-launch .badge-copy>span{font-size:var(--text-xs)}.cta-launch .badge-copy small{font-size:.5rem}.cta-launch .browser-icon{width:1.25rem;height:1.25rem}}
@media(prefers-reduced-motion:reduce){.cta-launch .launch-web{transition:none}}

/* Keep both badges side by side inside a narrow CTA copy column. */
.cta-panel .cta-actions{container-type:inline-size;width:100%}
@container(max-width:26rem){.cta-launch{gap:var(--space-2xs)}.cta-launch .store-badge,.cta-launch .launch-web{height:2.75rem}.cta-launch .launch-web{padding:0 var(--space-2xs);gap:var(--space-2xs)}.cta-launch .badge-copy>span{font-size:.8125rem}.cta-launch .badge-copy small{font-size:.5625rem}.cta-launch .browser-icon{width:1.375rem;height:1.375rem}}
