:root{--bg:#f3f7f5;--surface:#fff;--soft:#edf5f2;--ink:#173f3b;--muted:#6d807c;--line:#dbe7e3;--green:#206b67;--gold:#b88b3f;--goldsoft:#f7efdf;--success:#2d7a62;--shadow:0 22px 58px rgba(23,63,59,.11);--shadow-sm:0 10px 28px rgba(23,63,59,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.container{max-width:1160px;margin:auto;padding:0 22px}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:950}.mark{width:39px;height:39px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px}.brand small{display:block;font-size:9px;color:var(--gold);letter-spacing:.13em}.links{display:flex;gap:21px;font-size:13px;font-weight:800;color:#566d68}.actions{display:flex;gap:8px;align-items:center}
.btn{border:0;border-radius:13px;padding:11px 16px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.primary{background:var(--ink);color:#fff}.secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.gold{background:var(--gold);color:#fff}
.page{padding:44px 0 72px}.eyebrow{font-size:10px;color:var(--gold);font-weight:950;letter-spacing:.13em;text-transform:uppercase}h1{font-size:clamp(36px,5vw,56px);line-height:1;letter-spacing:-.05em;margin:8px 0 10px}h2{letter-spacing:-.025em}.lead{color:var(--muted);font-size:15px;max-width:700px}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow-sm)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.metric{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px}.metric span{display:block;font-size:10px;color:var(--muted);font-weight:850}.metric strong{display:block;font-size:27px;margin-top:4px}.metric small{font-size:10px;color:#93a19e}
.hero{padding:72px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.hero h1{font-size:clamp(48px,6vw,78px)}.hero p{font-size:18px;color:#5b716d}.hero-demo{background:rgba(255,255,255,.72);border:1px solid #fff;border-radius:30px;padding:14px;box-shadow:var(--shadow)}.demo-card{min-height:430px;border:1px solid var(--line);border-radius:22px;background:#fff;padding:24px;display:flex;flex-direction:column;cursor:pointer;outline:none}.demo-card:focus-visible{box-shadow:0 0 0 3px rgba(32,107,103,.18)}.demo-prompt{text-align:center;color:#84938f;font-size:13px;margin-top:28px}.demo-front{font-size:34px;font-weight:950;text-align:center;margin:46px auto 18px}.demo-back{font-size:29px;font-weight:950;color:var(--green);text-align:center;margin:8px 0 22px;opacity:0;transform:translateY(8px);transition:.18s}.demo-card.revealed .demo-back{opacity:1;transform:none}.demo-hint{text-align:center;color:#94a29f;font-size:11px;margin-top:auto;margin-bottom:12px}.chip{display:inline-flex;padding:6px 9px;border-radius:999px;background:var(--soft);color:var(--green);font-size:9px;font-weight:950;text-transform:uppercase}
.learn-shell{max-width:760px;margin:auto}.learn-card{min-height:570px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:25px;box-shadow:var(--shadow);display:flex;flex-direction:column;cursor:pointer}.learn-head,.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.progress{height:6px;border-radius:999px;background:#e6eeeb;overflow:hidden;margin:16px 0}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold))}.prompt{text-align:center;color:#84938f;font-size:14px;margin-top:20px}.front{text-align:center;font-size:40px;font-weight:950;letter-spacing:-.035em;margin:36px 0 22px}.answer-wrap{opacity:0;transform:translateY(8px);transition:.18s;text-align:center}.learn-card.revealed .answer-wrap{opacity:1;transform:none}.answer{font-size:34px;color:var(--green);font-weight:950;white-space:pre-line}.usage{margin:15px auto 0;max-width:580px;font-size:13px;color:#617571}.hint{text-align:center;color:#94a29f;font-size:11px;margin-top:auto}.ratings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.ratings button{background:#fff;border:1px solid var(--line);padding:14px 8px;border-radius:14px;font-weight:900;color:#48615d;cursor:pointer}.ratings button:hover{transform:translateY(-1px)}
.chapter-list{display:grid;gap:10px}.chapter{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px;display:grid;grid-template-columns:70px 1fr auto;gap:15px;align-items:center}.num{font-size:11px;font-weight:950;color:var(--gold)}.chapter h3{margin:0;font-size:15px}.chapter p{margin:3px 0 0;color:var(--muted);font-size:11px}.pill{padding:5px 8px;border-radius:999px;background:var(--soft);color:var(--green);font-size:9px;font-weight:950}.pill.gold{background:var(--goldsoft);color:#876426}
.auth{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:35px 18px}.auth-card{width:min(480px,100%);background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:var(--shadow)}.input{display:grid;gap:6px;margin-top:12px}.input label{font-size:11px;font-weight:850}.input input,.input select{border:1px solid var(--line);border-radius:12px;padding:12px 13px;outline:none}.error{background:#faeeee;color:#944848;border-radius:12px;padding:11px 13px;font-size:12px;margin-top:14px}.notice{background:var(--soft);border-radius:14px;padding:14px;color:#526b66;font-size:12px}.table{width:100%;border-collapse:collapse}.table td,.table th{padding:12px;border-bottom:1px solid var(--line);font-size:12px;text-align:left}.table th{font-size:10px;color:#8b9a97;text-transform:uppercase}
footer{padding:28px 0;color:#8b9a97;font-size:10px}
@media(max-width:850px){.links{display:none}.hero{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}.grid3,.grid2{grid-template-columns:1fr}}@media(max-width:600px){.container{padding:0 15px}.nav{height:68px}.actions .secondary{display:none}.page{padding-top:28px}.front{font-size:34px}.answer{font-size:29px}.learn-card{min-height:520px;padding:19px}.chapter{grid-template-columns:52px 1fr}.chapter>.pill{grid-column:2}.ratings{gap:5px}.ratings button{font-size:11px;padding:12px 4px}}
.section-title{font-size:clamp(30px,4vw,46px);line-height:1.05;margin:8px 0 10px}.method-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.method-card{min-height:230px}.method-card .step{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--green);font-size:10px;font-weight:950}.method-card h2{font-size:19px;margin:18px 0 8px}.method-card p{color:var(--muted);font-size:13px;margin:0}.system-band{border-top:1px solid var(--line)}.flow-list{display:grid;gap:0}.flow-list>div{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.flow-list>div:last-child{border-bottom:0}.flow-list strong{color:var(--green)}.flow-list span{color:var(--muted);font-size:13px}
@media(max-width:1050px){.method-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.method-grid{grid-template-columns:1fr}.method-card{min-height:auto}}

/* v0.5.11 — product-level UI, motion, A1+, pricing and checkout */
body{transition:opacity .16s ease,transform .16s ease}body.page-leaving{opacity:0;transform:translateY(5px)}
.site-loader{display:none;position:fixed;inset:0;z-index:9999;background:var(--bg);place-items:center}.show-intro .site-loader{display:grid}.loader-lockup{display:grid;justify-items:center;gap:11px;animation:loaderRise .52s cubic-bezier(.2,.8,.2,1) both}.loader-mark{width:58px;height:58px;border-radius:18px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:950;box-shadow:var(--shadow)}.loader-name{font-size:12px;font-weight:950;letter-spacing:.02em}.loader-lockup i{display:block;width:92px;height:2px;border-radius:999px;background:#d8e5e1;overflow:hidden;position:relative}.loader-lockup i:after{content:"";position:absolute;inset:0;background:var(--green);transform:translateX(-100%);animation:loaderLine .56s ease forwards}@keyframes loaderRise{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}@keyframes loaderLine{to{transform:none}}
.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:950;cursor:pointer}.mobile-menu{display:none;padding-bottom:14px}.mobile-menu a{padding:11px 0;border-top:1px solid var(--line);font-size:13px;font-weight:850;color:#566d68}

.product-hero{padding:66px 0 42px;max-width:920px}.product-hero h1{font-size:clamp(46px,6vw,76px);max-width:900px}.product-hero>p{font-size:18px;color:#5b716d;max-width:770px}.level-section{padding:26px 0 60px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px}.availability-note{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:900;color:var(--green);white-space:nowrap}.availability-note i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(32,107,103,.09)}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}.level-card{min-height:310px;border:1px solid var(--line);border-radius:24px;padding:21px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s,background .24s}.level-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.level-code{font-size:32px;font-weight:950;letter-spacing:-.05em}.level-status{display:inline-flex;padding:6px 8px;border-radius:999px;background:#edf0ef;color:#879591;font-size:8px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}.level-status.live{background:var(--soft);color:var(--green)}.level-card h3{font-size:21px;margin:35px 0 7px;letter-spacing:-.03em}.level-card p{font-size:12px;color:var(--muted);margin:0}.active-level{background:#fff;box-shadow:0 24px 60px rgba(8,32,28,.10);border-color:#cfe0db;border-radius:22px}.active-level:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-58px;top:-65px;background:radial-gradient(circle,rgba(32,107,103,.10),rgba(32,107,103,0) 70%)}.active-level:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#bcd3cc}.active-level .level-code{color:var(--green)}.level-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}.level-stats span{font-size:9px;color:var(--muted)}.level-stats b{color:var(--ink);font-size:11px}.level-enter{margin-top:14px;font-size:11px;font-weight:950;color:var(--green);display:flex;justify-content:space-between}.level-enter span{transition:transform .2s}.active-level:hover .level-enter span{transform:translateX(4px)}.locked-level{background:#edf1ef;border-color:#e3e9e6;color:#75827e;box-shadow:none;filter:saturate(.35)}.locked-level .level-code{color:#8f9a97}.locked-level h3{color:#77827f}.locked-level p{color:#98a19f}.locked-line{margin-top:auto;font-size:9px;font-weight:900;color:#9aa4a1;padding-top:20px;border-top:1px solid #e1e6e4}

.sample-section{border-top:1px solid var(--line)}.sample-layout{align-items:center;gap:44px}.method-strip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:24px;font-size:10px;font-weight:950;color:var(--green)}.method-strip i{font-style:normal;color:#a4b0ad}.bonus-demo{min-height:490px}.bonus-demo .demo-back{margin-bottom:10px}.sample-bonus{opacity:0;transform:translateY(7px);pointer-events:none;transition:.2s;margin:0 0 10px;border:1px solid #eadabb;border-radius:15px;background:linear-gradient(180deg,#fffaf1,#fff);overflow:hidden}.demo-card.revealed .sample-bonus{opacity:1;transform:none;pointer-events:auto}.sample-bonus-head{width:100%;border:0;background:transparent;padding:11px 12px;display:flex;align-items:center;gap:9px;text-align:left;color:var(--ink);cursor:pointer}.sample-bonus-head span:nth-child(2){flex:1}.sample-bonus-head b{display:block;font-size:10px}.sample-bonus-head small{display:block;font-size:8px;color:#8a7b61;margin-top:2px}.sample-bonus-head em{font-style:normal;color:#8a7b61;transition:.18s}.sample-bonus.open .sample-bonus-head em{transform:rotate(180deg)}.bonus-plus{width:24px;height:24px;border-radius:8px;background:var(--goldsoft);color:#8a6832;display:grid;place-items:center;font-size:16px;font-weight:950}.sample-bonus-body{display:none;border-top:1px solid #efe2c8;padding:11px}.sample-bonus.open .sample-bonus-body{display:block}.sample-bonus-body p{font-size:9px!important;line-height:1.55;color:#665c49!important;margin:0}.compare{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.variant{border:1px solid #e8deca;border-radius:10px;padding:9px;background:#fff}.variant.everyday{background:var(--goldsoft)}.variant span{display:block;font-size:7px;text-transform:uppercase;color:#927b55;font-weight:900}.variant strong{display:block;font-size:11px;margin-top:3px;color:var(--ink)}

.conversation-band{border-top:1px solid var(--line)}.conversation-card{background:var(--ink);color:#fff;border-radius:25px;padding:25px;box-shadow:var(--shadow)}.conversation-card .chip{background:rgba(255,255,255,.1);color:#dceae7}.conversation-card>strong{display:block;font-size:64px;line-height:1;margin-top:30px;letter-spacing:-.06em}.conversation-card h3{font-size:22px;margin:6px 0}.conversation-card p{font-size:12px;color:#c2d2ce}.future-track{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13);font-size:10px;display:flex;justify-content:space-between;gap:10px;color:#dce5e2}.future-track span{color:#d8bd8a;font-weight:900}.home-cta{margin:10px 0 54px;border:1px solid var(--line);border-radius:25px;background:#fff;padding:25px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--shadow-sm)}.home-cta h2{font-size:32px;margin:3px 0}.home-cta p{font-size:12px;color:var(--muted);margin:0}

.a1-hero{padding:68px 0 55px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}.a1-hero h1{font-size:clamp(46px,6vw,72px)}.a1-hero p{font-size:17px;color:#5b716d;max-width:690px}.a1-title-row{display:flex;align-items:center;gap:10px;margin-top:15px}.a1-badge{font-size:48px;font-weight:950;letter-spacing:-.06em;color:var(--green)}.a1-stat-panel{display:grid;grid-template-columns:1fr 1fr;gap:11px}.a1-stat-panel .metric{min-height:126px;display:flex;flex-direction:column;justify-content:center}.plus-explain{border-top:1px solid var(--line)}.definition-card{min-height:210px}.definition-card.plus{background:linear-gradient(145deg,#fffaf1,#fff);border-color:#eadabb}.definition-letter{width:46px;height:46px;border-radius:14px;background:var(--soft);color:var(--green);display:grid;place-items:center;font-size:19px;font-weight:950}.definition-card.plus .definition-letter{background:var(--goldsoft);color:#8a6832}.definition-card h3{font-size:22px;margin:23px 0 7px}.definition-card p{font-size:13px;color:var(--muted)}.product-flow{border-top:1px solid var(--line)}.flow-steps{display:grid;margin-top:23px}.flow-steps div{display:grid;grid-template-columns:34px 1fr;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}.flow-steps b{font-size:9px;color:var(--gold)}.flow-steps span{font-size:12px;font-weight:800;color:#506763}.journey-section{border-top:1px solid var(--line)}.journey{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;align-items:start;margin-top:28px}.journey>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;min-height:180px}.journey>i{height:1px;background:var(--line);margin-top:37px}.journey span{font-size:9px;color:var(--gold);font-weight:950}.journey b{display:block;font-size:15px;margin-top:16px}.journey p{font-size:10px;color:var(--muted);margin:6px 0}.smart-review-section{border-top:1px solid var(--line)}.smart-review-section .card h2{font-size:28px}.rating-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:24px}.rating-preview span{border:1px solid var(--line);border-radius:11px;padding:9px 5px;text-align:center;font-size:9px;font-weight:900}.price-inline{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:18px 0}.price-inline b{font-size:25px}.price-inline span{font-size:9px;color:var(--muted)}.price-inline i{font-style:normal;font-size:9px;color:#9aa7a4;margin:0 4px}

.pricing-page{max-width:980px}.pricing-intro{text-align:center}.pricing-intro .lead{margin-left:auto;margin-right:auto}.billing-switch{width:330px;max-width:100%;height:50px;background:#e8efec;border:1px solid var(--line);border-radius:15px;padding:4px;display:grid;grid-template-columns:1fr 1fr;position:relative;margin:26px auto 30px}.billing-switch button{position:relative;z-index:2;border:0;background:transparent;border-radius:11px;color:#73837f;font-weight:950;font-size:12px;cursor:pointer;transition:color .22s}.billing-switch button.active{color:var(--ink)}.billing-switch button small{font-size:7px;background:var(--goldsoft);color:#8a6832;border-radius:999px;padding:3px 5px;margin-left:3px}.switch-glider{position:absolute;z-index:1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 5px 14px rgba(23,63,59,.08);transition:transform .3s cubic-bezier(.2,.85,.25,1)}.billing-switch.annual .switch-glider{transform:translateX(100%)}.pricing-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:15px;align-items:stretch}.free-plan,.premium-plan{padding:27px}.premium-plan{border-color:#c7dcd5;box-shadow:var(--shadow);position:relative;overflow:hidden}.premium-plan:before{content:"";position:absolute;right:-65px;top:-65px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(32,107,103,.11),rgba(32,107,103,0) 70%)}.premium-ribbon{display:flex;align-items:center;justify-content:space-between;gap:10px}.save-line{font-size:9px;font-weight:950;color:#8a6832;background:var(--goldsoft);padding:6px 8px;border-radius:999px}.price-main{display:flex;align-items:flex-start;margin:18px 0 5px;letter-spacing:-.04em}.price-main>span{font-size:20px;font-weight:950;margin-top:7px}.price-main strong{font-size:52px;line-height:1;font-weight:950}.price-main small{font-size:10px;color:var(--muted);letter-spacing:0;margin:26px 0 0 6px}.equivalent{min-height:21px;color:var(--gold);font-size:10px;font-weight:850}.feature-list{padding:0;list-style:none;margin:23px 0;display:grid;gap:10px}.feature-list li{font-size:12px;color:#566d68;position:relative;padding-left:19px}.feature-list li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:950}.feature-list.compact{margin:18px 0}.full{width:100%}.pricing-foot,.gateway-note{font-size:9px;color:var(--muted);line-height:1.55;margin-top:12px}.pricing-note{margin-top:15px;text-align:center}

.checkout-page{max-width:1000px}.checkout-head{display:flex;align-items:end;justify-content:space-between;gap:24px}.checkout-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:15px;margin-top:28px}.checkout-plan,.order-summary{padding:27px}.checkout-plan-top{display:flex;align-items:start;justify-content:space-between;gap:12px}.checkout-plan-top h2{margin:8px 0}.checkout-toggle{display:grid;grid-template-columns:1fr 1fr;background:#edf2f0;border-radius:13px;padding:4px;margin-top:18px}.checkout-toggle button{border:0;border-radius:10px;padding:10px;background:transparent;color:#7c8a87;font-size:11px;font-weight:950;cursor:pointer}.checkout-toggle button.active{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(23,63,59,.07)}.checkout-toggle small{font-size:7px;color:#8a6832}.checkout-price{display:flex;align-items:flex-start;margin:24px 0 2px}.checkout-price>span{font-weight:950;font-size:20px;margin-top:7px}.checkout-price strong{font-size:52px;line-height:1}.checkout-price small{font-size:10px;color:var(--muted);margin:26px 0 0 6px}.checkout-saving{font-size:10px;font-weight:900;color:#8a6832;background:var(--goldsoft);display:inline-flex;padding:6px 9px;border-radius:999px}.order-summary .eyebrow{margin-bottom:16px}.summary-row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:11px}.summary-row span{color:var(--muted)}.summary-row b{text-align:right}.saving-row b{color:#8a6832}.summary-total{display:flex;align-items:end;justify-content:space-between;gap:15px;padding:22px 0}.summary-total span{font-size:12px;font-weight:900}.summary-total strong{font-size:27px}.consent{display:flex;align-items:flex-start;gap:8px;font-size:10px;color:var(--muted);margin:12px 0}.consent a{font-weight:900;color:var(--ink)}.secure-note{display:flex;align-items:center;gap:10px;margin-top:20px;padding:13px;border-radius:13px;background:var(--soft)}.secure-note>span{width:28px;height:28px;border-radius:50%;background:#dcebe6;color:var(--green);display:grid;place-items:center;font-weight:950}.secure-note p{font-size:9px;color:#5d726e;margin:0}

@media(max-width:1020px){.level-grid{grid-template-columns:1fr 1fr}.journey{grid-template-columns:1fr 14px 1fr}.journey>div:nth-of-type(3),.journey>div:nth-of-type(4){margin-top:14px}.journey>i:nth-of-type(2),.journey>i:nth-of-type(3){display:none}.journey>div:nth-of-type(3){grid-column:1}.journey>div:nth-of-type(4){grid-column:3}.pricing-layout,.checkout-grid{grid-template-columns:1fr}.a1-hero{grid-template-columns:1fr}.a1-stat-panel{max-width:680px}}
@media(max-width:850px){.menu-btn{display:grid;place-items:center}.mobile-menu:not([hidden]){display:grid}.nav>.actions>.primary:not(:last-child){display:none}.home-cta,.section-head,.checkout-head{align-items:flex-start;flex-direction:column}.sample-layout{gap:25px}}
@media(max-width:650px){.product-hero{padding-top:42px}.product-hero h1,.a1-hero h1{font-size:43px}.level-grid{grid-template-columns:1fr}.level-card{min-height:245px}.locked-level{min-height:215px}.level-card h3{margin-top:24px}.sample-section{padding-top:34px}.bonus-demo{min-height:470px}.compare{grid-template-columns:1fr}.conversation-band{padding-top:34px}.a1-hero{padding-top:42px}.a1-stat-panel{grid-template-columns:1fr 1fr}.a1-stat-panel .metric{min-height:105px}.journey{grid-template-columns:1fr;gap:10px}.journey>div,.journey>div:nth-of-type(3),.journey>div:nth-of-type(4){grid-column:auto;margin:0;min-height:auto}.journey>i{display:none}.rating-preview{grid-template-columns:1fr 1fr}.pricing-page,.checkout-page{padding-top:30px}.billing-switch{width:100%}.free-plan,.premium-plan,.checkout-plan,.order-summary{padding:20px}.home-cta .actions{width:100%;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.site-loader{display:none!important}body.page-leaving{opacity:1;transform:none}.active-level:hover{transform:none}}
.price-pop{animation:pricePop .24s cubic-bezier(.2,.85,.25,1)}@keyframes pricePop{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
.level-flight-veil{position:fixed;inset:0;z-index:4998;background:rgba(243,247,245,0);backdrop-filter:blur(0);transition:.36s ease;pointer-events:none}.level-flight-veil.show{background:rgba(243,247,245,.78);backdrop-filter:blur(4px)}.level-flight{position:fixed!important;z-index:4999!important;margin:0!important;pointer-events:none!important;transition:top .38s cubic-bezier(.2,.82,.2,1),left .38s cubic-bezier(.2,.82,.2,1),width .38s cubic-bezier(.2,.82,.2,1),height .38s cubic-bezier(.2,.82,.2,1),border-radius .38s,box-shadow .38s!important}.level-flight.expand{top:18px!important;left:18px!important;width:calc(100vw - 36px)!important;height:calc(100vh - 36px)!important;border-radius:30px!important;box-shadow:0 28px 90px rgba(23,63,59,.20)!important}
@keyframes introShell{to{opacity:0;visibility:hidden;pointer-events:none}}


/* v0.5.12 — B2+ path + premium G identity + polished intro motion */
:root{--premium-teal:#15979c;--premium-orange:#ea8a46;--premium-gold:#b98a32;--premium-gold-dark:#956b20;--premium-cream:#fbf6e8}
.mark,.loader-mark{position:relative;isolation:isolate;background:linear-gradient(145deg,#cba958 0%,var(--premium-gold) 48%,#a97825 100%);color:#fff;border:1px solid rgba(122,84,17,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(108,70,12,.15),0 8px 18px rgba(148,104,30,.20);font-family:Georgia,"Times New Roman",serif;font-weight:900;text-shadow:0 1px 1px rgba(90,56,4,.28)}
.mark:before,.loader-mark:before{content:"";position:absolute;inset:2px;border-radius:inherit;border:1px solid rgba(255,247,221,.50);pointer-events:none}
.mark:after,.loader-mark:after{content:"";position:absolute;left:15%;right:15%;top:5px;height:1px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:.72;pointer-events:none}
.mark{font-size:20px;border-radius:12px;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.brand:hover .mark{transform:translateY(-1px) rotate(-1deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(108,70,12,.15),0 11px 24px rgba(148,104,30,.26)}
.brand{position:relative}.brand:after{content:"";position:absolute;left:49px;bottom:-7px;width:56px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--premium-teal),#35aaa2 48%,var(--premium-orange));opacity:.72;transform:scaleX(.55);transform-origin:left;transition:transform .24s ease,opacity .24s}.brand:hover:after{transform:scaleX(1);opacity:1}

.site-loader{background:radial-gradient(circle at 50% 44%,#fff 0%,#f6f8f6 30%,var(--bg) 72%)}
.loader-lockup{gap:12px;animation:loaderPremiumRise .62s cubic-bezier(.18,.86,.22,1) both}
.loader-lockup:before{content:"";display:block;width:112px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--premium-teal),#36aaa3 48%,var(--premium-orange));box-shadow:0 7px 22px rgba(21,151,156,.15);transform:scaleX(0);animation:premiumAccent .48s cubic-bezier(.2,.8,.2,1) .08s forwards}
.loader-mark{width:64px;height:64px;border-radius:18px;font-size:34px;animation:premiumMarkIn .62s cubic-bezier(.16,.86,.25,1) both}
.loader-name{font-size:12px;letter-spacing:.035em;opacity:0;transform:translateY(4px);animation:premiumNameIn .32s ease .22s forwards}
.loader-lockup i{width:112px;height:2px;background:#e5e8e4}.loader-lockup i:after{background:linear-gradient(90deg,var(--premium-teal),var(--premium-gold),var(--premium-orange));animation:loaderLine .62s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes premiumAccent{to{transform:scaleX(1)}}
@keyframes premiumMarkIn{0%{opacity:0;transform:translateY(10px) scale(.86) rotate(-5deg)}65%{opacity:1;transform:translateY(-2px) scale(1.035) rotate(.8deg)}100%{opacity:1;transform:none}}
@keyframes premiumNameIn{to{opacity:1;transform:none}}
@keyframes loaderPremiumRise{from{opacity:0}to{opacity:1}}

.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.level-card{padding:19px;min-height:320px}.level-code{font-size:30px}.level-card h3{font-size:19px}
.active-level{background:linear-gradient(180deg,#fff 0%,#fff 78%,#fbf8ef 100%)}
.active-level:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--premium-teal),#35aaa2 52%,var(--premium-orange));opacity:.88}
@media(max-width:1120px){.level-grid{grid-template-columns:repeat(3,1fr)}.level-card{min-height:285px}}
@media(max-width:760px){.level-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.level-grid{grid-template-columns:1fr}.level-card{min-height:245px}.locked-level{min-height:215px}}

/* v0.5.13 — homepage focus + single-source pricing + card audio controls */
.home-hero-compact{padding-bottom:42px}.home-sample-compact{border-top:1px solid var(--line);padding-bottom:58px}
.demo-back-row,.answer-row,.variant-line{display:flex;align-items:center;justify-content:center;gap:10px}.variant-line{justify-content:space-between;gap:8px}.variant-line strong{flex:1}
.sound-btn{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid rgba(21,151,156,.18);background:linear-gradient(145deg,#15979c,#238f87);color:#fff;display:inline-grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px rgba(21,151,156,.17),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.sound-btn:hover{transform:translateY(-1px);box-shadow:0 10px 23px rgba(21,151,156,.22),inset 0 1px 0 rgba(255,255,255,.25)}.sound-btn:active{transform:scale(.95)}.sound-btn svg{width:18px;height:18px;fill:currentColor}.sound-btn.playing{animation:soundPulse .75s ease}.sample-bonus .sound-btn{width:30px;height:30px;flex-basis:30px;background:linear-gradient(145deg,#c69a45,#a97925);border-color:rgba(122,84,17,.18);box-shadow:0 6px 14px rgba(148,104,30,.16)}.sample-bonus .sound-btn svg{width:15px;height:15px}.learn-sound{width:42px;height:42px;flex-basis:42px}.answer-row{margin:0 auto}.a1-end-cta{margin:8px 0 56px;border:1px solid var(--line);border-radius:25px;background:#fff;padding:25px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--shadow-sm)}.a1-end-cta h2{font-size:30px;margin:4px 0}.a1-end-cta p{font-size:12px;color:var(--muted);max-width:650px;margin:0}.smart-review-wide{max-width:760px;margin:0 auto}
@keyframes soundPulse{0%{box-shadow:0 0 0 0 rgba(21,151,156,.27)}55%{box-shadow:0 0 0 10px rgba(21,151,156,0)}100%{box-shadow:0 0 0 0 rgba(21,151,156,0)}}
@media(max-width:650px){.home-hero-compact{padding-bottom:28px}.home-sample-compact{padding-bottom:40px}.demo-back-row{gap:7px}.demo-back-row .sound-btn{width:34px;height:34px;flex-basis:34px}.a1-end-cta{align-items:flex-start;flex-direction:column}.a1-end-cta .actions{width:100%;flex-wrap:wrap}.answer-row{gap:7px}.learn-sound{width:38px;height:38px;flex-basis:38px}}


/* v0.5.14 — premium sample-card hierarchy + +A1 exploration CTA */
.premium-demo-shell{position:relative;background:linear-gradient(135deg,rgba(21,151,156,.18),rgba(255,255,255,.9) 37%,rgba(185,138,50,.16) 72%,rgba(234,138,70,.15));border:1px solid rgba(255,255,255,.95);box-shadow:0 26px 72px rgba(23,63,59,.13),0 10px 34px rgba(185,138,50,.07)}
.premium-sample-card{position:relative;min-height:520px;border-color:#d6e4df;background:linear-gradient(180deg,#ffffff 0%,#ffffff 69%,#fcfaf4 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.premium-sample-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,var(--premium-teal),#40aaa3 42%,var(--premium-gold) 72%,var(--premium-orange));opacity:.95}
.sample-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.premium-chip{background:linear-gradient(135deg,#eaf7f4,#f5f1e6);border:1px solid #dde9e3}.premium-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0;text-align:right}.premium-meta b{font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8b7753}.premium-meta small{font-size:9px;font-weight:700;color:#9ca8a5;letter-spacing:.01em}
.premium-sample-card .demo-prompt{margin-top:34px;font-size:11px;font-weight:800;letter-spacing:.035em;text-transform:uppercase;color:#93a29e}
.premium-sample-card .demo-front{margin:22px auto 20px;font-size:27px;line-height:1.18;font-weight:620;letter-spacing:-.025em;color:#526965}.premium-sample-card .demo-front>span{display:block}.premium-sample-card .demo-front small{display:block;margin-top:7px;font-size:12px!important;font-weight:650;color:#9aa7a4!important}
.premium-answer-zone{position:relative;margin:5px 0 12px;padding:17px 15px 15px;border-radius:18px;background:linear-gradient(180deg,#f5faf8,#eff7f4);border:1px solid #dceae5;opacity:0;transform:translateY(8px) scale(.99);transition:opacity .22s ease,transform .22s ease}.premium-sample-card.revealed .premium-answer-zone{opacity:1;transform:none}.answer-label{display:block;text-align:center;font-size:8px;font-weight:950;letter-spacing:.13em;text-transform:uppercase;color:#78908b;margin-bottom:4px}
.premium-sample-card .demo-back{font-size:40px;line-height:1.06;font-weight:950;letter-spacing:-.045em;color:#167d7b;margin:4px 0;opacity:1;transform:none;text-shadow:0 1px 0 rgba(255,255,255,.7)}.premium-sample-card .demo-back-row{gap:12px;align-items:center}.premium-sample-card .main-sound{width:44px;height:44px;flex-basis:44px;box-shadow:0 10px 24px rgba(21,151,156,.20),inset 0 1px 0 rgba(255,255,255,.25)}
.premium-bonus{margin-top:8px;border-color:#e5d4af;border-radius:18px;background:linear-gradient(180deg,#fffaf0,#fffdf9);box-shadow:0 10px 28px rgba(148,104,30,.07)}.premium-bonus .sample-bonus-head{padding:13px 14px}.premium-bonus .sample-bonus-head b{font-size:11px}.premium-bonus .sample-bonus-head small{font-size:8px}.premium-bonus .bonus-plus{background:linear-gradient(145deg,#d6b66c,#b6842d);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px rgba(148,104,30,.14)}.premium-bonus .sample-bonus-body{padding:14px;border-top-color:#ecdfc4}.bonus-transform{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;font-size:8px;color:#927b55}.bonus-transform span{text-transform:uppercase;font-weight:900;letter-spacing:.05em}.bonus-transform b{font-size:10px;color:#5d523f}.bonus-transform i{font-style:normal;color:var(--premium-gold);font-weight:950}.premium-bonus .sample-bonus-body p{font-size:9px!important;text-align:center;margin:0 0 11px;color:#75684f!important}.spoken-bonus-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border-radius:13px;background:linear-gradient(135deg,#fff,#f8f0dc);border:1px solid #eadbb9}.spoken-bonus-row>div{min-width:0}.spoken-bonus-row span{display:block;font-size:7px;text-transform:uppercase;font-weight:950;letter-spacing:.08em;color:#9a7b42}.spoken-bonus-row strong{display:block;margin-top:3px;font-size:22px;line-height:1.15;color:var(--ink);letter-spacing:-.025em}.spoken-bonus-row small{display:block;margin-top:3px;font-size:8px;color:#9a8a6e}.premium-bonus .bonus-sound{width:38px;height:38px;flex-basis:38px}
.premium-sample-card .demo-hint{margin-top:auto;padding-top:12px;font-size:10px}.explore-a1-link{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;padding:10px 14px;width:max-content;max-width:100%;font-size:12px;font-weight:950;color:var(--ink);border-radius:999px;transition:transform .2s ease,color .2s ease,background .2s ease}.explore-a1-link b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:linear-gradient(145deg,#cba958,#a97825);color:#fff;box-shadow:0 6px 14px rgba(148,104,30,.15);transition:transform .2s ease}.explore-a1-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.7);color:var(--premium-teal)}.explore-a1-link:hover b{transform:translateX(2px)}
/* The production Learn card uses the same hierarchy: prompt lighter, German answer dominant. */
.learn-card .front{font-size:34px;font-weight:650;color:#405a56;letter-spacing:-.025em}.learn-card .answer{font-size:40px;font-weight:950;letter-spacing:-.04em;color:#167d7b}
@media(max-width:650px){.premium-sample-card{min-height:500px;padding:20px}.premium-sample-card .demo-front{font-size:24px;margin-top:20px}.premium-sample-card .demo-back{font-size:36px}.premium-sample-card .main-sound{width:40px;height:40px;flex-basis:40px}.spoken-bonus-row strong{font-size:20px}.explore-a1-link{font-size:11px}.learn-card .front{font-size:30px}.learn-card .answer{font-size:36px}}


/* v0.5.15 — cleaner premium sample answer: German stays dominant, audio sits below */
.premium-sample-card .main-answer-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;width:100%;padding:0 4px}
.premium-sample-card .main-answer-stack .demo-back{width:100%;max-width:100%;white-space:normal;overflow-wrap:break-word;text-wrap:balance;text-align:center;margin:3px 0 0;font-size:clamp(24px,6vw,38px);line-height:1.15;font-weight:950;letter-spacing:-.042em;color:#167d7b}
.premium-sample-card .main-answer-stack .main-sound{width:38px;height:38px;flex:0 0 38px;margin:0 auto;box-shadow:0 8px 20px rgba(21,151,156,.18),inset 0 1px 0 rgba(255,255,255,.26)}
.premium-sample-card .main-answer-stack .main-sound svg{width:16px;height:16px}
@media(max-width:650px){.premium-sample-card .main-answer-stack{gap:10px}.premium-sample-card .main-answer-stack .demo-back{font-size:clamp(18px,5.8vw,25px);letter-spacing:-.03em}.premium-sample-card .main-answer-stack .main-sound{width:36px;height:36px;flex-basis:36px}.premium-sample-card .main-answer-stack .main-sound svg{width:15px;height:15px}}
@media(max-width:360px){.premium-sample-card .main-answer-stack .demo-back{font-size:clamp(16px,5.2vw,21px)}}


.chapter-menu-shell{margin-top:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#fff,#fffaf3);box-shadow:0 18px 42px rgba(16,78,73,.06);overflow:hidden}
.chapter-menu-trigger{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;cursor:pointer}
.chapter-menu-trigger::-webkit-details-marker{display:none}
.chapter-menu-intro{display:flex;align-items:center;gap:12px;min-width:0}
.chapter-menu-intro i{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#c9a24b,#ae7c24);color:#fff;font-style:normal;font-size:13px;font-weight:950;letter-spacing:.04em;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 8px 18px rgba(163,113,28,.18)}
.chapter-menu-intro b{display:block;font-size:15px;line-height:1.15;color:var(--green)}
.chapter-menu-intro small{display:block;margin-top:3px;font-size:11px;line-height:1.45;color:#7b8c89}
.chapter-menu-meta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.chapter-menu-meta strong{font-size:12px;font-weight:900;color:#8b7753;text-transform:uppercase;letter-spacing:.07em}
.chapter-menu-meta em{font-style:normal;font-size:11px;color:var(--muted)}
.chapter-menu-chevron{width:24px;height:24px;border-radius:999px;background:#eef4f2;display:grid;place-items:center;color:var(--green);font-size:13px;transition:transform .28s ease, background .28s ease}
.chapter-menu-shell[open] .chapter-menu-chevron{transform:rotate(180deg);background:#e2f0ed}
.chapter-menu-body{padding:0 20px 20px;border-top:1px solid var(--line)}
.chapter-menu-note{padding:14px 0 6px;font-size:11px;line-height:1.55;color:#738784}
.chapter-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.chapter-menu-item{background:#fff;border:1px solid #e6ece9;border-radius:18px;padding:14px;display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.chapter-menu-item:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(18,74,70,.06);border-color:#d7e6e1}
.chapter-menu-num{width:46px;height:46px;border-radius:14px;background:#f4f7f6;display:grid;place-items:center;color:#b08a36;font-size:12px;font-weight:950}
.chapter-menu-copy h3{margin:1px 0 5px;font-size:14px;line-height:1.2;color:var(--green);font-weight:900}
.chapter-menu-copy p{margin:0;font-size:11px;line-height:1.5;color:#7e8d8a}
@media(max-width:900px){.chapter-menu-grid{grid-template-columns:1fr}.chapter-menu-item{grid-template-columns:42px 1fr}}
@media(max-width:650px){.chapter-menu-trigger{flex-direction:column;align-items:flex-start}.chapter-menu-meta{width:100%;justify-content:space-between}.chapter-menu-intro i{width:38px;height:38px;border-radius:12px;font-size:12px}.chapter-menu-copy h3{font-size:13px}}


.value-section{margin-top:70px}
.feature-grid,.example-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.feature-card,.example-card,.compare-box>div{background:#fff;border:1px solid #e3ece8;border-radius:22px;padding:24px}
.feature-card h3,.example-card b,.compare-box h3{color:var(--green);margin:0 0 10px}
.feature-card p,.example-card small,.compare-box p{color:#687a76;line-height:1.6;margin:0}
.example-grid{grid-template-columns:repeat(3,1fr)}
.example-card span{display:block;font-size:12px;color:#b08a36;font-weight:800;margin-bottom:15px}
.example-card b{display:block;font-size:22px}
.compare-box{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}
@media(max-width:900px){.feature-grid,.example-grid,.compare-box{grid-template-columns:1fr}}


/* ==================================================
   PREMIUM HOME EXPERIENCE - v1
   ================================================== */
.premium-reveal{
  opacity:0;
  transform:translateY(34px);
  filter:blur(4px);
  transition:opacity .75s ease,transform .75s ease,filter .75s ease;
}
.premium-reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

.home-hero-compact{
  position:relative;
  overflow:hidden;
}
.home-hero-compact:before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:-120px;
  top:-80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(216,168,59,.18),transparent 65%);
  pointer-events:none;
}

/* v12: hero trust-stat row (fills the gap under the CTA), and a distinct
   "band" treatment for the journey section so it doesn't read as a repeat
   of the hero above it. */
.level-section-band{background:var(--soft);border-radius:28px;padding:34px 30px 40px;margin-top:8px}
.section-title-sm{font-size:clamp(24px,3vw,34px)}
@media(max-width:650px){.level-section-band{padding:24px 18px 30px;border-radius:20px}}

.premium-sample-card{
  backdrop-filter:blur(12px);
  box-shadow:0 30px 80px rgba(8,32,28,.12);
}

.sample-bonus-body{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .45s ease,opacity .35s ease,padding .35s ease;
}
.sample-bonus.open .sample-bonus-body{
  max-height:260px;
  opacity:1;
}

.feature-card,.example-card,.compare-box>div,.level-card{
 transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.feature-card:hover,.example-card:hover,.level-card:hover{
 transform:translateY(-5px);
 box-shadow:0 22px 55px rgba(15,70,65,.10);
}

.loader-mark-img{width:96px;height:96px;object-fit:contain;border-radius:24px;animation:gicPulse 1.6s ease both}
.brand-logo{width:42px;height:42px;object-fit:contain;border-radius:10px;vertical-align:middle}
@keyframes gicPulse{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.email-box{display:flex;gap:12px;align-items:center}

/* ==================================================
   HOME EXPERIENCE v4 — flip cards, FAQ, contact, footer
   ================================================== */
.brand-wordmark-wrap{gap:14px}
.brand-wordmark,.wordmark-badge{display:inline-flex;align-items:flex-end;gap:0;font-weight:950;line-height:1;color:var(--ink);letter-spacing:-.04em}
.brand-wordmark{font-size:34px}
.wordmark-badge{font-size:72px}
.brand-wordmark b,.wordmark-badge b{font-weight:950}
.brand-wordmark i,.wordmark-badge i{font-style:normal;font-size:.72em;line-height:1;color:var(--gold);margin:0 -.02em .1em}
.loader-lockup-wordmark{gap:18px}
.loader-lockup-wordmark .loader-name{font-size:14px;letter-spacing:.02em}
.loader-mark-img,.brand-logo{display:none!important}

/* v11: the real GiC gold badge lives on the splash only (bigger, with a soft glow
   bloom + one light-sweep across it before the wordmark settles in). The header
   goes back to the clean text lockup (G·i·C) sized into the brand line — no boxed
   icon, just the mark sitting quietly in front of "German in Context". */
.loader-badge-wrap{position:relative;width:132px;height:132px;display:grid;place-items:center}
.loader-badge-glow{position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(circle,rgba(216,169,74,.5) 0%,rgba(216,169,74,.2) 42%,rgba(216,169,74,0) 74%);filter:blur(1px);opacity:0;animation:gicGlowBloom 1.05s cubic-bezier(.2,.7,.2,1) .05s both}
.loader-badge-img{position:relative;z-index:1;width:132px;height:132px;object-fit:contain;border-radius:28px;animation:gicBadgeIn .62s cubic-bezier(.18,.86,.22,1) .1s both;filter:drop-shadow(0 16px 32px rgba(148,104,30,.28))}
.loader-badge-shine{position:absolute;inset:0;z-index:2;border-radius:28px;overflow:hidden;pointer-events:none}
.loader-badge-shine:before{content:"";position:absolute;top:-45%;left:-65%;width:42%;height:190%;background:linear-gradient(75deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);opacity:0;animation:gicShineSweep .62s cubic-bezier(.4,.05,.2,1) .68s both}
.loader-name{animation:gicNameIn .42s ease .42s both}
.loader-lockup-wordmark i{animation:gicBarIn .4s ease .78s both}
@keyframes gicGlowBloom{0%{opacity:0;transform:scale(.6)}48%{opacity:1;transform:scale(1.06)}100%{opacity:.5;transform:scale(1)}}
@keyframes gicBadgeIn{0%{opacity:0;transform:translateY(12px) scale(.82) rotate(-5deg)}62%{opacity:1;transform:translateY(-3px) scale(1.04) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes gicShineSweep{0%{opacity:0;transform:translateX(-30%)}10%{opacity:1}60%{opacity:1}100%{opacity:0;transform:translateX(230%)}}
@keyframes gicNameIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gicBarIn{from{opacity:0}to{opacity:1}}
.show-intro .site-loader{animation:introShell .28s ease 1.35s forwards}
@media(prefers-reduced-motion:reduce){.loader-badge-img,.loader-badge-glow,.loader-badge-shine:before,.loader-name,.loader-lockup-wordmark i{animation:none;opacity:1}}
.brand-wordmark{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-wordmark{transform:translateY(-1px) rotate(-2deg)}

.home-cards-head{align-items:center}
.showcase-controls{display:flex;gap:10px;align-self:flex-end}
.showcase-arrow{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:18px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,color .2s ease,border-color .2s ease}
.showcase-arrow:hover{transform:translateY(-2px);color:var(--premium-teal);border-color:#bfe4e2;box-shadow:0 14px 30px rgba(21,151,156,.16)}

.home-card-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,1fr);gap:22px;overflow-x:auto;padding:10px 4px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}
.home-card-track::-webkit-scrollbar{display:none}
.home-card-track .premium-sample-card{scroll-snap-align:start;margin:0;transition:transform .25s ease,box-shadow .25s ease}
.home-card-track .premium-sample-card:hover{transform:translateY(-4px)}

/* home deck bonus colors: gold = pronunciation (.premium-bonus, already defined), green = grammar, red = possible answers */
.grammar-bonus{margin-top:8px;border-color:#bfe0d3;border-radius:18px;background:linear-gradient(180deg,#f2fbf6,#fefffd);box-shadow:0 10px 28px rgba(32,107,103,.07)}
.grammar-bonus .sample-bonus-head b{font-size:11px}
.grammar-bonus .sample-bonus-head small{font-size:8px;color:#5c8f7d}
.grammar-bonus .sample-bonus-head em{color:#5c8f7d}
.grammar-bonus .bonus-plus{background:linear-gradient(145deg,#3fae86,#1f7d5c);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px rgba(32,107,103,.14)}
.grammar-bonus .sample-bonus-body{padding:14px;border-top-color:#dcefe4}
.grammar-bonus .sample-bonus-body>p{font-size:10px!important;line-height:1.6;text-align:center;margin:0 0 11px;color:#33574c!important}
.grammar-bonus .bonus-sound{background:linear-gradient(145deg,#3fae86,#1f7d5c);border-color:rgba(31,125,92,.18);box-shadow:0 6px 14px rgba(31,125,92,.16)}

.answers-bonus{margin-top:8px;border-color:#f2c9c9;border-radius:18px;background:linear-gradient(180deg,#fdf3f3,#fffdfd);box-shadow:0 10px 28px rgba(178,58,58,.06)}
.answers-bonus .sample-bonus-head b{font-size:11px}
.answers-bonus .sample-bonus-head small{font-size:8px;color:#b06868}
.answers-bonus .sample-bonus-head em{color:#b06868}
.answers-bonus .bonus-plus{background:linear-gradient(145deg,#e08a8a,#c85a5a);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px rgba(178,58,58,.14)}
.answers-bonus .sample-bonus-body{padding:14px;border-top-color:#f4dcdc}
.answers-bonus .sample-bonus-body>p{font-size:10px!important;line-height:1.6;text-align:center;margin:0 0 10px;color:#7a3a3a!important}
.answers-bonus .bonus-sound{background:linear-gradient(145deg,#e08a8a,#c85a5a);border-color:rgba(178,58,58,.18);box-shadow:0 6px 14px rgba(178,58,58,.16)}

/* neutral translation row usable inside any bonus box: lighter/smaller English gloss + its own tiny audio icon */
.bonus-translate-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:12px;background:rgba(0,0,0,.03)}
.bonus-translate-row div{min-width:0}
.bonus-translate-row span{display:block;font-size:7px;text-transform:uppercase;font-weight:900;letter-spacing:.08em;color:#93a29e}
.bonus-translate-row strong{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#5c6864}
.bonus-translate-row .sound-btn{width:26px;height:26px;flex:0 0 26px}
.bonus-translate-row .sound-btn svg{width:13px;height:13px}

/* home deck: tab switcher instead of stacked accordions, so a card only shows ONE bonus panel at a time (keeps cards short) */
[data-sample-bonus]{opacity:0;transform:translateY(7px);pointer-events:none;transition:.2s;margin-top:8px}
.demo-card.revealed [data-sample-bonus]{opacity:1;transform:none;pointer-events:auto}
.bonus-tabs{display:flex;gap:5px;padding:4px;border-radius:14px;background:#eef1ef;overflow-x:auto;scrollbar-width:none}
.bonus-tabs::-webkit-scrollbar{display:none}
.bonus-tab{flex:1;white-space:nowrap;border:0;background:transparent;padding:9px 8px;border-radius:10px;font-size:10.5px;font-weight:900;color:#8a948e;cursor:pointer;transition:background .18s ease,color .18s ease}
.bonus-tab.active{background:#fff;box-shadow:0 4px 10px rgba(8,32,28,.09)}
.bonus-tab[data-type="pronunciation"].active{color:#9a7b42}
.bonus-tab[data-type="grammar"].active{color:#1f7d5c}
.bonus-tab[data-type="answers"].active{color:#c85a5a}
/* v6: the panel content itself no longer lives inline inside the card — it only feeds the detail modal below.
   This is what keeps every home card the same fixed height regardless of how long its bonus text is. */
[data-sample-bonus] .bonus-panel{display:none!important}
.bonus-tab::after{content:" \203A";opacity:.55;font-weight:900}
.bonus-panel p{font-size:10px!important;line-height:1.6;text-align:center;margin:0 0 10px;color:inherit}
.bonus-panel[data-type="pronunciation"]{border-color:#e5d4af;background:linear-gradient(180deg,#fffaf0,#fffdf9);color:#75684f}
.bonus-panel[data-type="grammar"]{border-color:#bfe0d3;background:linear-gradient(180deg,#f2fbf6,#fefffd);color:#33574c}
.bonus-panel[data-type="answers"]{border-color:#f2c9c9;background:linear-gradient(180deg,#fdf3f3,#fffdfd);color:#7a3a3a}
.bonus-panel .bonus-sound.gold-sound{background:linear-gradient(145deg,#c69a45,#a97925);border-color:rgba(122,84,17,.18)}
.bonus-panel .bonus-sound.green-sound{background:linear-gradient(145deg,#3fae86,#1f7d5c);border-color:rgba(31,125,92,.18)}
.bonus-panel .bonus-sound.red-sound{background:linear-gradient(145deg,#e08a8a,#c85a5a);border-color:rgba(178,58,58,.18)}

/* v7: flip — the front (English prompt) and back (German answer) are two faces of one
   card that rotates in 3D. Only used on the home cards (.flip-stage), so every other
   page keeps its old .demo-front/.demo-back fade behaviour untouched. */
.home-card-track .premium-sample-card,.bonus-tabs,.bonus-tab{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.flip-stage{position:relative;perspective:1500px;min-height:172px;margin-top:6px}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.15,.2,1);transform-style:preserve-3d}
.premium-sample-card.revealed .flip-inner{transform:rotateY(180deg)}
.flip-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-face.flip-front{position:relative}
.flip-face.flip-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 2px}
.premium-sample-card .flip-front .demo-prompt{margin-top:6px}
.premium-sample-card .flip-front .demo-front{margin:16px auto 0}
.flip-back .answer-label{margin-bottom:6px}
.flip-back .main-answer-stack .demo-back{font-weight:800}
/* character-count tiers keep long German sentences in harmony with the card instead of overflowing or shrinking English below it */
.premium-sample-card .main-answer-stack .demo-back.glen-s{font-size:clamp(22px,5.4vw,30px)}
.premium-sample-card .main-answer-stack .demo-back.glen-m{font-size:clamp(19px,4.4vw,25px)}
.premium-sample-card .main-answer-stack .demo-back.glen-l{font-size:clamp(16.5px,3.6vw,20px)}
.answer-translation{margin-top:11px;font-size:12px;font-weight:600;color:#8a9894;letter-spacing:.01em;text-align:center;opacity:.9}
@media(max-width:650px){.flip-stage{min-height:160px}.answer-translation{font-size:11px}}

/* v7: bonus detail sheet — slides up from the bottom of the SAME card (no separate
   overlay), so the card's own footprint never changes when a tab is tapped. */
.bonus-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:0 -14px 32px rgba(10,30,26,.14);max-height:84%;display:flex;flex-direction:column;padding:8px 18px 18px;transform:translateY(102%);visibility:hidden;transition:transform .32s cubic-bezier(.4,.1,.2,1),visibility 0s linear .32s}
.premium-sample-card.sheet-open .bonus-sheet{transform:translateY(0);visibility:visible;transition:transform .32s cubic-bezier(.4,.1,.2,1),visibility 0s linear 0s}
.bonus-sheet-handle{width:34px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 10px;user-select:none;-webkit-tap-highlight-color:transparent}
.bonus-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex:0 0 auto}
.bonus-sheet-title{margin:0;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;padding:5px 11px;border-radius:999px;display:inline-block;user-select:none;-webkit-tap-highlight-color:transparent}
.bonus-sheet-title.gold{color:#8a6425;background:#fdf1dc}
.bonus-sheet-title.green{color:#1f7d5c;background:#e6f5ee}
.bonus-sheet-title.red{color:#a83f3f;background:#fbe9e9}
.bonus-sheet-close{width:26px;height:26px;flex:0 0 26px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;color:var(--muted);user-select:none;-webkit-tap-highlight-color:transparent}
.bonus-sheet-close:hover{color:var(--ink);border-color:#cfd8d5}
.bonus-sheet-body{overflow-y:auto}
.bonus-sheet-body p{font-size:12px!important;line-height:1.65;text-align:start;margin:0 0 12px;color:var(--ink)}
.bonus-sheet-body .bonus-transform,.bonus-sheet-body .bonus-translate-row,.bonus-sheet-body .spoken-bonus-row,.bonus-sheet-body .answer-item{margin-bottom:10px}
.bonus-sheet-body .answer-item:last-child{margin-bottom:0}

/* possible-answers list: one row per answer, each with its own English gloss + audio icon */
.answer-item{padding:10px 11px;border-radius:12px;background:#fff;border:1px solid #f4dcdc;margin-bottom:8px}
.answer-item:last-child{margin-bottom:0}
.answer-item-main{display:flex;align-items:center;justify-content:space-between;gap:10px}
.answer-item-main strong{font-size:13px;font-weight:800;color:#5c3030}
.answer-item small{display:block;margin-top:4px;font-size:9px;font-weight:600;color:#b98a8a}
.answer-item .sound-btn{width:26px;height:26px;flex:0 0 26px}
.answer-item .sound-btn svg{width:13px;height:13px}

.feature-grid-landing{grid-template-columns:repeat(4,1fr)}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;align-items:start}
.faq-item{background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.faq-item:nth-child(even){border-left-color:var(--gold)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:900;color:var(--ink);display:flex;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-num{flex:0 0 auto;font-size:11px;font-weight:950;color:var(--gold);letter-spacing:.04em}
.faq-q{flex:1}
.faq-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#eef4f1;color:var(--green);flex:0 0 28px;transition:transform .2s ease,background .2s ease}
.faq-item[open] summary .faq-icon{background:#e6f1ed;transform:rotate(45deg)}
.faq-item>div{padding:0 22px 20px 49px}
.faq-item p{margin:0;color:var(--muted);line-height:1.7}
@media(max-width:800px){.faq-list{grid-template-columns:1fr}}

.contact-panel-landing{background:linear-gradient(180deg,#fff,#fbfaf7);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
.contact-panel-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:24px}
.contact-icon{width:56px;height:56px;border-radius:13px;background:var(--goldsoft);display:grid;place-items:center;font-size:24px;color:var(--ink);flex:0 0 56px}
.contact-panel-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px;align-items:start}
.landing-contact-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm)}
.landing-contact-form textarea{min-height:160px;border:1px solid var(--line);border-radius:11px;padding:14px 15px;resize:vertical;outline:none;font-family:inherit}
.landing-contact-form .input input{border-radius:11px;padding:14px 15px}
.landing-contact-form .input label{color:#48615d;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.landing-send-btn{border-radius:12px;padding:13px 20px}
.landing-send-btn{margin-top:16px;border-radius:16px;padding:14px 20px}
.landing-contact-side{display:grid;gap:14px}
.side-note-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm)}
.side-note-card strong{display:block;color:var(--ink);font-size:15px;margin-bottom:6px;font-weight:900}
.side-note-card p{margin:0;color:var(--muted);line-height:1.6;font-size:13px}
.side-note-card p a{color:var(--green);font-weight:800}

.site-footer-dark{margin-top:70px;background:radial-gradient(circle at 18% 18%,rgba(45,83,136,.24),transparent 18%),radial-gradient(circle at 62% 42%,rgba(22,61,103,.18),transparent 18%),linear-gradient(180deg,#0f2237,#0b1a2a 60%,#08131f);color:#dce5ef;padding:60px 0 50px}
.footer-shell{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.footer-brand-title{font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.045em;font-weight:950}
.footer-brand-title span{color:#d9ba69}
.footer-branding p{margin:14px 0 24px;color:#c8d3de;font-size:17px;max-width:420px}
.footer-socials{display:flex;gap:16px;margin-bottom:32px}
.footer-socials a{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:22px}
.footer-email{display:inline-block;color:#d9ba69;font-size:14px;font-weight:850;margin-bottom:10px;text-decoration:none}
.footer-email:hover{text-decoration:underline}
.footer-copy{font-size:12px;color:#b6c1cd}
.footer-links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer-links-grid h4{margin:0 0 18px;color:#fff;font-size:18px}
.footer-links-grid a{display:block;margin:0 0 12px;color:#cfdae6;font-size:16px}
.footer-links-grid a:hover{color:#fff}

@media(max-width:1050px){
  .home-card-track{grid-auto-columns:minmax(360px,88%)}
  .contact-panel-grid,.footer-shell,.feature-grid-landing{grid-template-columns:1fr}
  .footer-links-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .brand-wordmark{font-size:28px}
  .wordmark-badge{font-size:54px}
  .showcase-controls{display:none}
  .home-card-track{grid-auto-columns:92%;gap:16px}
  .contact-panel-landing{padding:22px}
  .contact-panel-head{flex-direction:column}
  .site-footer-dark{padding:44px 0}
  .footer-links-grid{grid-template-columns:1fr}
  .footer-brand-title{font-size:36px}
  .footer-branding p,.footer-links-grid a{font-size:15px}
}

/* GiC premium intro splash */
#gic-splash{position:fixed;inset:0;background:#070707;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99999;animation:gicFadeOut 0.6s ease 2.4s forwards}
.gic-logo-splash{font-size:88px;font-weight:800;letter-spacing:-5px;color:#d6a84b;opacity:0;animation:gicLogoIn .7s ease .2s forwards;position:relative}
.gic-logo-splash .dot{display:inline-block;animation:gicDot 1s cubic-bezier(.2,1.5,.5,1) .7s forwards;transform:translateY(-45px);opacity:0}
.gic-tagline{color:#d8c08a;opacity:0;animation:gicText .5s ease 1.4s forwards;letter-spacing:2px;margin-top:15px;font-size:14px}
@keyframes gicLogoIn{to{opacity:1}}
@keyframes gicDot{to{transform:translateY(0);opacity:1}}
@keyframes gicText{to{opacity:1}}
@keyframes gicFadeOut{to{opacity:0;visibility:hidden}}

/* ===== A1+ premium comparison & outcome blocks ===== */
.gic-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
@media(max-width:800px){.gic-compare{grid-template-columns:1fr}}
.gic-compare-col{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px;box-shadow:var(--shadow-sm)}
.gic-compare-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.gic-compare-head b{font-size:17px;color:var(--ink)}
.gic-compare-badge{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;font-size:16px;flex:0 0 34px}
.gic-compare-col.is-bad .gic-compare-badge{background:#fdecec;color:#c85a5a}
.gic-compare-col.is-good{background:linear-gradient(180deg,#fbfff9,#fff);border-color:#d9ecdf}
.gic-compare-col.is-good .gic-compare-badge{background:#e6f4ea;color:var(--green)}
.gic-compare-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid #f0f3f1}
.gic-compare-row:last-child{border-bottom:none}
.gic-compare-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;flex:0 0 24px;font-size:12px;font-weight:900;margin-top:1px}
.gic-compare-col.is-bad .gic-compare-icon{background:#fdecec;color:#c85a5a}
.gic-compare-col.is-good .gic-compare-icon{background:#e6f4ea;color:var(--green)}
.gic-compare-row span{color:#48615d;line-height:1.55;font-size:15px}
.gic-compare-col.is-bad .gic-compare-row span{color:#7a6f6f}

.gic-outcome-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:8px 26px;box-shadow:var(--shadow-sm);max-width:640px;margin-top:22px}
.gic-outcome-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #f0f3f1}
.gic-outcome-row:last-child{border-bottom:none}
.gic-outcome-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#e6f4ea;color:var(--green);flex:0 0 30px;font-size:14px;font-weight:900}
.gic-outcome-row span{font-weight:750;color:var(--ink);font-size:15px}

/* ===== Curriculum level roadmap ===== */
.gic-roadmap{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;align-items:stretch;margin-top:30px}
.gic-roadmap-arrow{align-self:center;text-align:center;color:#c7d6d0;font-size:18px}
.gic-roadmap-step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;min-height:220px}
.gic-roadmap-step.is-live{border-color:#cfe0db;background:linear-gradient(180deg,#fbfffb,#fff);box-shadow:0 20px 44px rgba(8,32,28,.09)}
.gic-roadmap-code{font-size:19px;font-weight:950;color:var(--ink)}
.gic-roadmap-step.is-live .gic-roadmap-code{color:var(--green)}
.gic-roadmap-badge{display:inline-block;margin-top:9px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--muted);width:fit-content}
.gic-roadmap-step.is-live .gic-roadmap-badge{background:#e6f4ea;color:var(--green)}
.gic-roadmap-step h3{margin:14px 0 6px;font-size:16px;color:var(--ink)}
.gic-roadmap-step p{margin:0;color:#687a76;font-size:12.5px;line-height:1.55;flex:1}
.gic-roadmap-step .gic-roadmap-link{margin-top:14px;font-size:12px;font-weight:950;color:var(--green);text-decoration:none;display:flex;align-items:center;gap:6px}
@media(max-width:1050px){.gic-roadmap{grid-template-columns:1fr 1fr;gap:14px}.gic-roadmap-arrow{display:none}}
@media(max-width:620px){.gic-roadmap{grid-template-columns:1fr}}

/* 4-level roadmap variant (no C1+) */
.gic-roadmap-4{grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr}
@media(max-width:1050px){.gic-roadmap-4{grid-template-columns:1fr 1fr}.gic-roadmap-4 .gic-roadmap-arrow{display:none}}
@media(max-width:620px){.gic-roadmap-4{grid-template-columns:1fr}}

/* =========================================================
   GiC card engine v8 — final interaction baseline
   Keeps the existing visual design; changes only reveal/layer behavior.
   ========================================================= */

/* 1) Reveal: no 3D flip. Front fades away and German fades into the same space. */
.flip-stage{perspective:none}
.flip-inner{transform:none!important;transform-style:flat!important;transition:none!important}
.flip-face{backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
.flip-face.flip-front{
  position:relative;
  opacity:1;
  transform:translateY(0);
  transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1);
  pointer-events:auto;
}
.flip-face.flip-back{
  position:absolute;
  inset:0;
  transform:translateY(8px)!important;
  opacity:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6px 2px;
  pointer-events:none;
  transition:opacity .28s ease,transform .30s cubic-bezier(.2,.8,.2,1);
}
.premium-sample-card.revealed .flip-front{
  opacity:0;
  transform:translateY(-5px);
  pointer-events:none;
}
.premium-sample-card.revealed .flip-back{
  opacity:1;
  transform:translateY(0)!important;
  pointer-events:auto;
}

/* 2) Learning-layer buttons: appear after reveal, but NONE is selected/opened automatically. */
[data-sample-bonus]{margin-top:8px}
.bonus-tabs{
  display:flex;
  gap:5px;
  padding:4px;
  border-radius:14px;
  background:#eef1ef;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.bonus-tabs::-webkit-scrollbar{display:none}
.bonus-tab{
  flex:1 0 auto;
  min-width:max-content;
  white-space:nowrap;
  border:0;
  background:transparent;
  padding:9px 10px;
  border-radius:10px;
  font-size:10.5px;
  font-weight:900;
  color:#8a948e;
  cursor:pointer;
  scroll-snap-align:start;
  transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
.bonus-tab.active{
  background:#fff;
  box-shadow:0 4px 11px rgba(8,32,28,.10);
  transform:translateY(-1px) scale(1.015);
  animation:gicTabSelect .28s cubic-bezier(.18,.88,.25,1);
}
@keyframes gicTabSelect{
  0%{transform:scale(.97);box-shadow:0 1px 3px rgba(8,32,28,.03)}
  60%{transform:translateY(-1px) scale(1.025)}
  100%{transform:translateY(-1px) scale(1.015)}
}
.bonus-tab[data-type="pronunciation"].active{color:#9a7b42}
.bonus-tab[data-type="grammar"].active{color:#1f7d5c}
.bonus-tab[data-type="related"].active{color:#b44f58}
.bonus-tab[data-type="culture"].active{color:#6f5da7}
.bonus-tab[data-type="social"].active{color:#397a72}
.bonus-tab[data-type="work"].active{color:#3e7896}

/* 3) Detail sheet: natural height for short notes; long content can rise only to
      the bottom edge of the tab row. JS sets --bonus-sheet-max-height per card. */
.bonus-sheet{
  height:auto;
  max-height:var(--bonus-sheet-max-height,72%);
  overflow:hidden;
  padding:8px 18px 18px;
  transform:translateY(102%);
  visibility:hidden;
  transition:transform .32s cubic-bezier(.18,.86,.24,1),visibility 0s linear .32s;
}
.premium-sample-card.sheet-open .bonus-sheet{
  transform:translateY(0);
  visibility:visible;
  transition:transform .32s cubic-bezier(.18,.86,.24,1),visibility 0s linear 0s;
}
.bonus-sheet-body{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.bonus-sheet.sheet-switch .bonus-sheet-body{animation:gicSheetSwap .20s ease both}
@keyframes gicSheetSwap{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Layer title colors */
.bonus-sheet-title.related{color:#a83f49;background:#fbe9eb}
.bonus-sheet-title.culture{color:#67559c;background:#f1edfb}
.bonus-sheet-title.social{color:#2f766d;background:#eaf6f3}
.bonus-sheet-title.work{color:#3e7896;background:#edf5fb}

/* Related-phrase badges: deliberately tiny, contextual, not visually dominant. */
.relation-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:0 0 6px;
  padding:3px 7px;
  border-radius:999px;
  font-size:7px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.relation-badge.reply{color:#397b67;background:#eaf5ef}
.relation-badge.variation{color:#80652f;background:#f7f0e1}
.relation-badge.opposite{color:#7355a0;background:#f1ecfb}

/* New layer utility colors */
.bonus-panel .bonus-sound.blue-sound{background:linear-gradient(145deg,#5b9ab8,#3e7896);border-color:rgba(62,120,150,.18)}

/* Keep English as a small reference under German, not a competing headline. */
.answer-translation{font-size:11px!important;font-weight:600!important;color:#97a3a0!important;opacity:.86!important}

@media(max-width:650px){
  .bonus-tab{font-size:10px;padding:9px 9px}
  .bonus-sheet{padding-left:16px;padding-right:16px}
  .relation-badge{font-size:6.8px}
}


/* === GIC MOBILE DRAWER PHASE2 === */
.mobile-menu-backdrop{display:none}
@media(max-width:850px){
  body.mobile-nav-open{overflow:hidden;overscroll-behavior:none}
  .mobile-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:1498;border:0;background:rgba(10,35,32,.24);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .24s ease;cursor:pointer}
  .mobile-menu-backdrop.is-open{opacity:1}
  .mobile-menu{display:flex!important;position:fixed;z-index:1499;top:0;right:0;bottom:0;width:min(88vw,390px);padding:18px 22px calc(24px + env(safe-area-inset-bottom,0px));margin:0;background:rgba(251,253,252,.985);border-left:1px solid rgba(219,231,227,.92);box-shadow:-24px 0 54px rgba(15,52,48,.16);flex-direction:column;transform:translateX(104%);opacity:.98;visibility:hidden;transition:transform .25s cubic-bezier(.2,.82,.2,1),visibility .25s ease;overflow-y:auto;overscroll-behavior:contain}
  .mobile-menu[hidden]{display:none!important}
  .mobile-menu.is-open{transform:translateX(0);visibility:visible}
  .mobile-menu-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:4px 0 20px;border-bottom:1px solid var(--line)}
  .mobile-menu-head strong{display:block;color:var(--ink);font-size:18px;letter-spacing:-.02em}
  .mobile-menu-head small{display:block;margin-top:2px;color:var(--gold);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
  .mobile-menu-close{width:46px;height:46px;border-radius:15px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:25px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px rgba(23,63,59,.06)}
  .mobile-menu-links{display:grid;padding-top:12px}
  .mobile-menu-links a{display:flex;align-items:center;min-height:60px;padding:0 4px;border-top:0;border-bottom:1px solid var(--line);font-size:16px;font-weight:800;color:#536b66;transition:color .18s ease,padding .18s ease,background .18s ease}
  .mobile-menu-links a.active{color:var(--ink);padding-left:12px;background:linear-gradient(90deg,rgba(32,107,103,.065),transparent 72%)}
  .menu-btn{position:relative;z-index:1400}
}
@media(min-width:851px){.mobile-menu-backdrop,.mobile-menu{display:none!important}}
/* === END GIC MOBILE DRAWER PHASE2 === */

/* ===== GIC MOBILE DRAWER HOTFIX ===== */

@media (max-width:850px){

  /* closed */
  #mobileNav.mobile-menu[hidden]{
    display:none !important;
  }

  /* fullscreen overlay */
  #mobileNav.mobile-menu:not([hidden]){
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;

    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;

    margin:0 !important;
    padding:22px 18px !important;

    overflow-y:auto !important;

    background:rgba(8,42,38,.28) !important;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    /* hides stray raw text nodes */
    font-size:0 !important;

    animation:gicBackdropIn .18s ease both;
  }

  /* white drawer panel */
  #mobileNav.mobile-menu:not([hidden])::after{
    content:"";
    position:fixed;

    top:0;
    right:0;
    bottom:0;

    width:min(86vw,380px);

    background:#f7fbfa;
    border-left:1px solid rgba(20,77,71,.10);

    box-shadow:
      -18px 0 50px rgba(8,44,40,.18);

    z-index:-1;

    animation:gicDrawerPanelIn .24s
      cubic-bezier(.22,.80,.25,1) both;
  }

  /* everything inside drawer */
  #mobileNav.mobile-menu:not([hidden]) > *{
    position:relative !important;
    z-index:2 !important;

    width:min(78vw,340px) !important;
    margin-left:auto !important;

    animation:gicDrawerContentIn .26s
      cubic-bezier(.22,.80,.25,1) both;
  }

  /* close button */
  #mobileNav.mobile-menu button{
    display:grid !important;
    place-items:center !important;

    width:54px !important;
    height:54px !important;

    margin-left:auto !important;
    margin-bottom:22px !important;

    border:1px solid rgba(21,78,72,.14) !important;
    border-radius:18px !important;

    background:#fff !important;
    color:#164f49 !important;

    font-size:26px !important;

    box-shadow:0 6px 20px rgba(11,58,53,.07);
  }

  /* navigation links */
  #mobileNav.mobile-menu a{
    display:flex !important;
    align-items:center !important;

    min-height:62px !important;

    margin:0 !important;
    padding:0 8px !important;

    border:0 !important;
    border-bottom:
      1px solid rgba(30,91,84,.11) !important;

    border-radius:0 !important;
    background:transparent !important;

    color:#456b66 !important;

    font-family:
      Inter,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif !important;

    font-size:19px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    text-decoration:none !important;
  }

  #mobileNav.mobile-menu a:hover,
  #mobileNav.mobile-menu a:active{
    color:#0e5c54 !important;
    background:rgba(25,126,116,.055) !important;
  }

  #mobileNav.mobile-menu a[aria-current="page"]{
    color:#075b52 !important;
    font-weight:800 !important;
  }

  /* prevent page moving underneath */
  body:has(#mobileNav:not([hidden])),
  html:has(#mobileNav:not([hidden])){
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  @keyframes gicBackdropIn{
    from{opacity:0}
    to{opacity:1}
  }

  @keyframes gicDrawerPanelIn{
    from{transform:translateX(105%)}
    to{transform:translateX(0)}
  }

  @keyframes gicDrawerContentIn{
    from{
      opacity:0;
      transform:translateX(40px);
    }
    to{
      opacity:1;
      transform:translateX(0);
    }
  }
}