/* App pages: real screens, facts and hands on demos. Tokens come from styles.css.
   Without JavaScript every tab panel stays visible, stacked, so nothing is lost. */
.ax-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,5vw,80px);align-items:center;padding-block:48px 72px;min-height:640px}
.ax-hero h1{margin-bottom:24px;font-size:clamp(2.9rem,4.4vw,4.4rem)}
.ax-hero .lead{max-width:560px}
.ax-hero .button-row{margin-top:30px;gap:26px}
.ax-hero .feature-tag{margin-bottom:22px}
.ax-trust{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.ax-trust li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid #87ead033;border-radius:999px;background:#87ead00d;color:var(--ink);font-size:.8125rem;font-weight:600}
.ax-trust li::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--mint)}

.ax-phone{margin:0;inline-size:min(300px,76vw);aspect-ratio:720/1479;padding:9px;border-radius:44px;background:linear-gradient(165deg,#222a3d,#0a0d16 60%);border:1px solid #333b50;box-shadow:0 40px 90px -40px #bba5ff66,0 12px 40px -18px #000c,inset 0 0 0 1px #ffffff0a}
.ax-phone img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top;border-radius:35px;background:#f1ecf9}
.ax-phone-hero{justify-self:center;inline-size:min(320px,78vw)}

.ax-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--line);margin-block:8px 24px}
.ax-fact{background:var(--surface);padding:28px 26px}
.ax-fact-value{font-size:clamp(2rem,3.2vw,2.75rem);font-weight:680;letter-spacing:-.04em;line-height:1;margin:0 0 10px;background:linear-gradient(110deg,#e6dcff,#bba5ff 55%,#87ead0);-webkit-background-clip:text;background-clip:text;color:transparent}
.ax-fact-label{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.45}

.ax-tablist{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:34px}
.ax-tab{appearance:none;border:1px solid #3a4157;background:transparent;color:var(--ink);border-radius:999px;padding:10px 18px;font-size:.9375rem;font-weight:620;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.ax-tab:hover{border-color:var(--purple)}
.ax-tab[aria-selected="true"]{background:var(--purple);border-color:var(--purple);color:#171223}
.ax-tab:focus-visible,.ax-say:focus-visible,.ax-card:focus-visible,.ax-letter:focus-visible,.ax-reply:focus-visible,.ax-choice:focus-visible,.ax-form-cell:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.ax-panels>.ax-panel+.ax-panel{margin-block-start:48px}
.ax-ready .ax-panels>.ax-panel+.ax-panel{margin-block-start:0}
[role="tabpanel"][hidden]{display:none!important}

.ax-tour .ax-panel{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center}
.ax-tour .ax-panel-copy{max-width:520px}
.ax-tour .ax-panel-copy h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:16px}
.ax-tour .ax-panel-copy p{color:var(--muted);font-size:1.0625rem}
.ax-points{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.ax-points li{position:relative;padding-inline-start:30px;line-height:1.5}
.ax-points li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.45em;inline-size:14px;block-size:14px;border-radius:50%;border:2px solid var(--mint);box-shadow:0 0 0 4px #87ead01f}

.ax-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;counter-reset:step}
.ax-steps li{counter-increment:step;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px}
.ax-steps li::before{content:counter(step,decimal-leading-zero);display:block;color:var(--purple);font-size:.8125rem;font-weight:700;letter-spacing:.1em;margin-bottom:26px}
.ax-steps h3{font-size:1.25rem;margin-bottom:10px}
.ax-steps p{color:var(--muted);margin:0;font-size:.97rem}

.ax-demo-section{padding-block:40px 90px}
.ax-demo{position:relative;border:1px solid #3a3f58;border-radius:28px;background:radial-gradient(120% 90% at 0 0,#bba5ff17,transparent 55%),radial-gradient(100% 80% at 100% 100%,#87ead012,transparent 60%),var(--surface);padding:clamp(24px,4vw,48px)}
.ax-demo-head{max-width:680px;margin-bottom:30px}
.ax-demo-head h2{margin-bottom:14px}
.ax-demo-head p:last-child{color:var(--muted);margin:0}
.ax-demo-note{margin:26px 0 0;color:var(--muted)}
.ax-status{min-block-size:1.6em;margin:18px 0 0;font-weight:650;color:var(--mint)}

.ax-say{appearance:none;inline-size:42px;block-size:42px;border-radius:50%;border:1px solid #4a5068;background:#1b2132 center/20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bba5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");cursor:pointer;flex:none;transition:transform .15s,background-color .15s}
.ax-say-slow{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387ead0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15c0-4 3.5-7 8-7s8 3 8 7'/%3E%3Cpath d='M3 15h18M7 15l-1 3M17 15l1 3M20 12.5l2-1'/%3E%3Cpath d='M9 8l1.5 3.5L12 8l1.5 3.5L15 8'/%3E%3C/svg%3E")}
.ax-say:hover{background-color:#262d42}
.ax-say.is-playing{transform:scale(1.12);background-color:#2d2748}
.ax-no-speech .ax-say,.ax-no-speech .ax-demo-note{display:none}
.ax-audio-row{display:inline-flex;gap:8px;align-items:center}

/* Conversation */
.ax-scene{color:var(--muted);max-width:640px}
.ax-scene strong{color:var(--ink);display:block;font-size:1.1rem}
.ax-script{display:grid;gap:18px}
.ax-bubble{max-inline-size:min(560px,92%);padding:16px 20px;border-radius:22px;background:#1d2336;border:1px solid #333a50}
.ax-partner{border-end-start-radius:6px}
.ax-mine{justify-self:end;background:#2a2446;border-color:#4b3f7a;border-end-end-radius:6px}
.ax-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:1.3rem;font-weight:620}
.ax-gloss{margin:0;color:var(--muted);font-size:.95rem}
.ax-choose{margin:14px 0 8px;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);font-weight:650}
.ax-replies{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-inline-size:560px;justify-self:end;inline-size:100%}
.ax-reply{appearance:none;inline-size:100%;text-align:start;border:1px solid #4b4f6a;background:#161b29;color:var(--ink);border-radius:16px;padding:12px 16px;cursor:pointer;display:grid;gap:2px;transition:border-color .15s,background .15s}
.ax-reply:hover:not(:disabled){border-color:var(--purple);background:#1d2133}
.ax-reply:disabled{opacity:.45;cursor:default}
.ax-reply-text{font-size:1.08rem;font-weight:640}
.ax-reply-gloss{color:var(--muted);font-size:.9rem}
.ax-node .ax-node-mine{justify-self:end}
.ax-ready .ax-node{display:grid;gap:10px}
.ax-node+.ax-node{border-block-start:1px dashed #333a50;padding-block-start:18px}
.ax-ready .ax-node+.ax-node{border:0;padding:0}
.ax-chat-end{margin-block-start:22px}
.ax-done{font-weight:650;color:var(--mint)}

/* Dictionary */
.ax-search input{inline-size:100%;max-inline-size:520px;padding:15px 20px;border-radius:14px;border:1px solid #454b62;background:#0f1320;color:var(--ink);font-size:1rem}
.ax-search input:focus{outline:3px solid var(--mint);outline-offset:2px}
.ax-entries{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ax-entry details{border:1px solid #363c52;border-radius:16px;background:#151a28;overflow:hidden}
.ax-entry summary{list-style:none;cursor:pointer;padding:14px 18px;display:grid;gap:2px}
.ax-entry summary::-webkit-details-marker{display:none}
.ax-entry details[open]{border-color:var(--purple)}
.ax-headword{font-size:1.25rem;font-weight:660;color:var(--ink)}
.ax-entry-gloss{color:var(--muted);font-size:.95rem}
.ax-entry-body{padding:0 18px 16px}
.ax-entry-note{color:var(--muted);font-size:.9rem;margin:12px 0 0}
.ax-forms-title{margin:14px 0 6px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);font-weight:650}
.ax-forms{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ax-forms li{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;border-block-end:1px solid #262c3e;padding-block:4px}
.ax-form{font-weight:620}
.ax-form-label{color:var(--muted);text-align:end}
.ax-empty{color:var(--muted);margin-top:14px}

/* Phrases and course tastes */
.ax-phrase-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ax-phrase-list li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"text audio" "gloss audio";gap:2px 14px;align-items:center;background:#151a28;border:1px solid #363c52;border-radius:16px;padding:14px 16px}
.ax-phrase-text{grid-area:text;font-size:1.15rem;font-weight:650}
.ax-phrase-gloss{grid-area:gloss;color:var(--muted);font-size:.92rem}
.ax-phrase-list .ax-audio-row{grid-area:audio}
.ax-roman{grid-area:gloss;color:var(--purple);font-size:.85rem}
.ax-taste li{grid-template-areas:"text audio" "roman audio" "gloss audio"}
.ax-taste .ax-roman{grid-area:roman}

/* Conjugation */
.ax-verb-list .ax-tab{font-size:1rem}
.ax-toggle{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;color:var(--muted);font-size:.95rem;cursor:pointer}
.ax-toggle input{inline-size:18px;block-size:18px;accent-color:var(--purple)}
.ax-verb-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:18px}
.ax-pattern{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);border:1px solid #87ead044;border-radius:6px;padding:2px 8px}
.ax-tenses{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ax-tense{background:#151a28;border:1px solid #363c52;border-radius:16px;padding:14px 16px}
.ax-tense table{inline-size:100%;border-collapse:collapse}
.ax-tense caption{text-align:start;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);font-weight:650;padding-block-end:6px}
.ax-tense th{text-align:start;font-weight:500;color:var(--muted);font-size:.85rem;padding-block:4px;padding-inline-end:10px;white-space:nowrap}
.ax-tense td{text-align:end}
.ax-form-cell{appearance:none;border:0;background:none;color:var(--ink);font-size:1rem;font-weight:640;padding:4px 6px;border-radius:8px;cursor:pointer}
.ax-form-cell:hover{background:#232a3d}
.ax-quiz .ax-form-cell:not(.is-revealed){color:transparent;background:#232a3d;text-shadow:0 0 12px #bba5ff99;min-inline-size:5.5em}

/* Alphabets */
.ax-script-title{font-weight:650;color:var(--muted);margin-bottom:14px}
.ax-script-title span{color:var(--purple);margin-inline-start:6px}
.ax-letters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.ax-letters-small{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
.ax-letter{appearance:none;inline-size:100%;aspect-ratio:1/1.05;border:1px solid #3a4057;border-radius:18px;background:#161b29;color:var(--ink);display:grid;place-items:center;align-content:center;gap:2px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.ax-letter:hover{border-color:var(--purple);transform:translateY(-2px)}
.ax-letter.is-playing{background:#2a2446;border-color:var(--purple)}
.ax-glyph{font-size:1.9rem;font-weight:600;line-height:1.1}
.ax-letter-name{font-size:.78rem;color:var(--muted);max-inline-size:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-example{min-block-size:1.7em;margin:18px 0 0;font-size:1.05rem}
.ax-example [lang]{font-weight:650;color:var(--purple)}

/* Match Rush */
.ax-game-bar{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-bottom:20px}
.ax-game-bar p{margin:0;font-size:1.05rem}
.ax-timer,.ax-score{font-size:1.7rem;font-weight:700;color:var(--ink)}
.ax-unit{color:var(--muted)}
.ax-game-bar .button{margin-inline-start:auto}
.ax-board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ax-card{appearance:none;inline-size:100%;min-block-size:84px;border-radius:16px;border:1px solid #3a4057;background:#161b29;color:var(--ink);font-size:1.05rem;font-weight:640;padding:10px;cursor:pointer;transition:transform .15s,border-color .15s,opacity .3s,background .15s}
.ax-card-meaning{font-weight:520;color:#dfe3ee;font-size:.95rem}
.ax-board[data-state="idle"] .ax-card{opacity:.55;cursor:default}
.ax-card.is-selected{border-color:var(--purple);background:#2a2446;transform:translateY(-2px)}
.ax-card.is-matched{border-color:#87ead066;background:#87ead014;opacity:.5}
.ax-card.is-wrong{border-color:#ff8fa3;animation:ax-shake .35s}
@keyframes ax-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Spaced review */
.ax-review{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ax-review-card{display:grid;gap:8px;background:#151a28;border:1px solid #363c52;border-radius:18px;padding:18px}
.ax-review-card.is-missed{border-color:#ffb38a}
.ax-track{display:block;block-size:8px;border-radius:99px;background:#262c3e;overflow:hidden;margin-block-start:8px}
.ax-track span{display:block;block-size:100%;inline-size:25%;border-radius:inherit;background:linear-gradient(90deg,#bba5ff,#87ead0);transition:inline-size .4s ease}
.ax-when{font-size:.85rem;color:var(--mint);font-weight:650}
.ax-review-actions{display:flex;gap:8px;margin-block-start:4px}
.ax-review-actions button{appearance:none;flex:1;border-radius:12px;padding:9px 10px;font-weight:650;cursor:pointer;border:1px solid #454b62;background:#1b2132;color:var(--ink)}
.ax-knew:hover{border-color:var(--mint)}
.ax-missed:hover{border-color:#ffb38a}

/* Practice mix quiz */
.ax-question{font-size:1.2rem;font-weight:650;margin-bottom:14px}
.ax-choices{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ax-choice{appearance:none;inline-size:100%;padding:16px 18px;border-radius:16px;border:1px solid #454b62;background:#161b29;color:var(--ink);font-weight:640;font-size:1rem;cursor:pointer;text-align:start}
.ax-choice[aria-pressed="true"]{border-color:var(--purple);background:#2a2446}
.ax-result{border:1px solid #87ead044;background:#87ead00d;border-radius:18px;padding:22px 24px}
.ax-result h3{margin-bottom:8px}
.ax-result p:last-child{margin:0;color:var(--muted)}

/* Evidence ladder */
.ax-ladder-word{display:grid;gap:2px;margin-bottom:18px}
.ax-rungs{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;max-inline-size:560px}
.ax-rungs li{border:1px solid #363c52;border-radius:16px;padding:14px 18px;background:#151a28;transition:border-color .3s,background .3s}
.ax-rungs li.is-reached{border-color:var(--mint);background:#87ead012}
.ax-rung-title{margin:0;font-weight:680}
.ax-rung-text{margin:0;color:var(--muted);font-size:.92rem}
.ax-ladder .text-link{background:none;border:0;color:var(--purple);cursor:pointer;padding:0}

/* Course pages */
.ax-journey{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-inline-size:720px}
.ax-journey li{display:flex;gap:16px;align-items:center;background:#151a28;border:1px solid #363c52;border-radius:14px;padding:12px 16px}
.ax-step-number{font-weight:700;color:var(--purple);font-size:.9rem;min-inline-size:2ch}
.ax-chapter{flex:1}
.ax-level{font-size:.75rem;font-weight:700;color:var(--mint);border:1px solid #87ead044;border-radius:6px;padding:2px 8px}
.ax-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px;align-items:start}
.ax-columns h3{font-size:1.35rem;margin-bottom:14px}
.ax-topic-list{margin:0;padding-inline-start:20px;display:grid;gap:6px;color:var(--ink)}
.ax-lesson-links{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.ax-lesson-links a{display:inline-block;padding:9px 14px;border:1px solid #3a4157;border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:600}
.ax-lesson-links a:hover{border-color:var(--purple);color:var(--purple)}

/* Sticky get the app bar (small, dismissible, never a full screen interstitial) */
.ax-sticky{position:fixed;inset-inline:16px;inset-block-end:16px;z-index:30;display:flex;align-items:center;gap:16px;padding:12px 12px 12px 20px;border-radius:18px;background:#141927f2;border:1px solid #3a4157;box-shadow:0 18px 50px -20px #000;backdrop-filter:blur(14px);max-inline-size:640px;margin-inline:auto;transform:translateY(0);transition:transform .3s,opacity .3s}
.ax-sticky[hidden]{display:none}
.ax-sticky.is-away{transform:translateY(140%);opacity:0;pointer-events:none}
.ax-sticky p{margin:0;flex:1;font-size:.9rem;line-height:1.35}
.ax-sticky p span{color:var(--muted);display:block}
.ax-sticky .button{min-block-size:44px;padding:10px 16px;margin:0}
.ax-sticky-close{appearance:none;inline-size:36px;block-size:36px;border-radius:50%;border:0;background:#232a3d center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23b0b8cb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");cursor:pointer;flex:none}

@media (max-width:980px){
 .ax-hero{grid-template-columns:1fr;gap:44px;min-height:0;padding-block:30px 56px;text-align:center}
 .ax-hero .lead{margin-inline:auto}
 .ax-hero .ax-trust,.ax-hero .button-row{justify-content:center}
 .ax-hero .feature-tag{margin-inline:auto}
 .ax-tour .ax-panel{grid-template-columns:1fr;gap:30px;justify-items:center}
 .ax-tour .ax-panel-copy{text-align:start}
 .ax-board{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
 .ax-board{grid-template-columns:repeat(3,1fr);gap:8px}
 .ax-card{min-block-size:68px;font-size:.95rem;padding:8px}
 .ax-card-meaning{font-size:.85rem}
 .ax-letters{grid-template-columns:repeat(5,1fr);gap:7px}
 .ax-letter{border-radius:14px}
 .ax-glyph{font-size:1.45rem}
 .ax-letter-name{font-size:.68rem}
 .ax-demo{border-radius:22px}
 .ax-sticky{inset-inline:10px;inset-block-end:10px;padding-inline-start:14px}
 .ax-game-bar .button{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
 .ax-card,.ax-letter,.ax-say,.ax-track span,.ax-sticky,.ax-rungs li{transition:none}
 .ax-card.is-wrong{animation:none}
}

/* App stage: the light app screens sit on the app's own pastel gradient. */
.ax-stage{position:relative;justify-self:center;display:grid;place-items:center;padding:clamp(28px,4vw,54px);border-radius:36px;background:radial-gradient(90% 70% at 15% 10%,#e9d9ff,transparent 60%),radial-gradient(80% 70% at 90% 30%,#d4f5ea,transparent 62%),radial-gradient(90% 80% at 50% 100%,#fff3d6,transparent 60%),linear-gradient(160deg,#efe7fb,#e3f3ee);box-shadow:inset 0 0 0 1px #ffffff55,0 40px 90px -45px #bba5ff88}
.ax-stage .ax-phone{background:linear-gradient(165deg,#2a3147,#10131e 70%);box-shadow:0 30px 60px -28px #2b1f5aaa,0 8px 22px -12px #0008}
.ax-float{position:absolute;inset-inline-start:-18px;inset-block-end:18%;max-inline-size:230px;padding:13px 16px;border-radius:16px;background:#ffffffee;color:#1d1b33;box-shadow:0 18px 40px -18px #2b1f5a99;backdrop-filter:blur(8px)}
.ax-float-title{margin:0 0 2px;font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#5b55a0}
.ax-float-text{margin:0;font-size:.9rem;line-height:1.35;font-weight:600;color:#26243d}
.ax-stage-home{padding:clamp(22px,3vw,40px)}
.ax-cta-row .button{gap:14px}
.ax-try{color:var(--mint)}
.ax-try:hover{color:#b6f5e4}

/* Desktop only: a QR code bridges the laptop to the phone. */
.ax-qr{display:none;align-items:center;gap:16px;margin:30px 0 0;padding:12px 16px 12px 12px;max-inline-size:420px;border:1px solid #3a4157;border-radius:16px;background:#131826}
.ax-qr img{inline-size:88px;block-size:88px;border-radius:10px;background:#fff;padding:6px}
.ax-qr figcaption{font-size:.9rem;color:var(--muted);line-height:1.45}
.ax-qr strong{display:block;color:var(--ink)}
@media (min-width:981px) and (hover:hover){.ax-qr{display:flex}}

/* Clips play only when asked, muted, in the same phone frame. */
.ax-clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,300px));gap:28px;justify-content:start}
.ax-clip{margin:0}
.ax-phone-clip{inline-size:100%;aspect-ratio:540/1098}
.ax-phone-clip video{inline-size:100%;block-size:100%;object-fit:cover;border-radius:35px;background:#efe7fb}
.ax-clip figcaption{margin-top:14px;color:var(--muted);font-size:.95rem;line-height:1.5}

/* Feature cards with a real screen. */
.ax-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.ax-feature{position:relative;display:grid;grid-template-rows:170px auto;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--surface);text-decoration:none;color:var(--ink);transition:transform .2s,border-color .2s}
.ax-feature:hover{transform:translateY(-3px);border-color:#5a5f82}
.ax-feature-shot{display:block;overflow:hidden;background:linear-gradient(160deg,#efe7fb,#e3f3ee)}
.ax-feature-shot img{inline-size:72%;margin:18px auto 0;border-radius:18px 18px 0 0;box-shadow:0 -2px 24px -10px #2b1f5a66;transform:translateY(var(--y,0%))}
.ax-feature-copy{display:grid;gap:8px;padding:20px 22px 24px}
.ax-feature-copy h3{font-size:1.2rem;margin:0}
.ax-feature-copy p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.ax-icon{color:var(--purple);flex:none}

/* Compact benefits with icons. */
.ax-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;padding-block:24px 60px}
.ax-benefit{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:24px}
.ax-benefit h3{font-size:1.2rem;margin:14px 0 8px}
.ax-benefit p{margin:0;color:var(--muted);font-size:.97rem}

/* The win moment: the CTA appears when a demo is completed. */
.ax-win{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:26px;padding:18px 20px;border-radius:18px;background:linear-gradient(120deg,#bba5ff22,#87ead01c);border:1px solid #bba5ff55}
.ax-win[hidden]{display:none}
.ax-win p{margin:0;flex:1 1 260px;font-weight:620}
.ax-win .button{margin:0}
@media (prefers-reduced-motion:no-preference){.ax-win:not([hidden]){animation:ax-rise .35s ease-out}@keyframes ax-rise{from{opacity:0;transform:translateY(8px)}}}

/* Courses */
.ax-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ax-course-card{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-decoration:none;color:var(--ink)}
.ax-course-card:hover{border-color:#5a5f82}
.ax-course-name{font-weight:680}
.ax-course-count{font-size:1.4rem;font-weight:700;color:var(--purple)}
.ax-course-card ul{grid-column:1/-1;margin:4px 0 0;padding-inline-start:18px;color:var(--muted);font-size:.88rem;display:grid;gap:2px}
.ax-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.ax-table{inline-size:100%;border-collapse:collapse;min-inline-size:620px}
.ax-table caption{text-align:start;padding:16px 18px 6px;color:var(--muted);font-size:.9rem}
.ax-table th,.ax-table td{padding:12px 18px;border-block-start:1px solid var(--line);text-align:start}
.ax-table thead th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);border-block-start:0}
.ax-table td{color:var(--muted)}
.ax-table td:not(:last-child){font-variant-numeric:tabular-nums;color:var(--ink)}
.ax-table a{text-decoration:none;font-weight:650}
.ax-table a:hover{color:var(--purple)}
.ax-taste-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ax-taste-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:18px}
.ax-taste-card .ax-course-name{margin:0 0 12px}
.ax-taste-card .ax-phrase-list{grid-template-columns:1fr}
.ax-taste-card .ax-phrase-list li{background:#10141f}
.ax-section .lead{max-width:640px}

/* Platform aware install guide: the visitor's platform comes first. */
.ax-ios .platform-picker a[href="#ios-beta"],.ax-android .platform-picker a[href="#android-beta"]{border-color:var(--mint);box-shadow:0 0 0 3px #87ead033}

@media (max-width:980px){
 .ax-float{inset-inline-start:-6px;inset-block-end:10%;max-inline-size:200px}
 .ax-stage{margin-inline:auto}
}
/* Phones: tours become a swipe gallery with the next screen peeking in. */
@media (max-width:760px){
 .ax-gallery .ax-tablist{display:none}
 .ax-gallery .ax-panels{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:4px 16px 18px;scrollbar-width:none}
 .ax-gallery .ax-panels::-webkit-scrollbar{display:none}
 .ax-gallery .ax-panel,.ax-gallery .ax-panel[hidden]{display:grid;flex:0 0 82%;scroll-snap-align:center;gap:18px;justify-items:start;margin:0!important}
 .ax-gallery .ax-phone{inline-size:min(250px,64vw)}
 .ax-gallery .ax-panel-copy h3{font-size:1.35rem}
 .ax-counter{display:flex;justify-content:center;gap:8px;margin-top:4px;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
 .ax-hero{padding-block:18px 44px}
 .ax-hero h1{font-size:clamp(2.35rem,10vw,3rem)}
 .ax-hero .eyebrow{margin-bottom:12px}
 .ax-stage{padding:22px;border-radius:28px}
 .ax-phone-hero{inline-size:min(250px,66vw)}
 .ax-float{position:static;margin-top:16px;max-inline-size:none;inline-size:100%}
 .ax-cta-row{flex-direction:column;align-items:stretch}
 .ax-cta-row .button{inline-size:100%;justify-content:center;min-block-size:54px}
 .ax-cta-row .text-link{justify-content:center}
 .ax-facts{grid-template-columns:1fr 1fr}
 .ax-fact:last-child:nth-child(odd){grid-column:1/-1}
 .ax-fact{padding:20px 18px}
 .ax-feature{grid-template-rows:130px auto}
 .ax-clips{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:70%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 12px}
 .ax-clip{scroll-snap-align:center}
 .ax-tablist{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0}
 .ax-section{padding-block:44px}
 .ax-section h2,.ax-demo-head h2,.ax-tour h2,.ax-steps h2,.ax-clips-section h2{font-size:clamp(1.8rem,7.5vw,2.3rem)}
}
.ax-counter{display:none}
@media (max-width:760px){.ax-gallery .ax-counter{display:flex}}

/* A course choice leads the experience page, beside its real app screens. */
.ax-language-explorer{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);align-items:center;gap:clamp(40px,6vw,90px);padding-block:44px 64px}
.ax-explorer-copy h1{font-size:clamp(3rem,5.2vw,4.7rem);margin-bottom:24px}
.ax-explorer-copy .lead{max-inline-size:530px;color:var(--muted)}
.ax-course-picker{margin-block:30px 24px;max-inline-size:410px}
.ax-course-picker label{display:block;font-weight:650;font-size:.9rem;margin-bottom:10px;color:var(--ink)}
.ax-course-select{position:relative}
.ax-course-select select{appearance:none;inline-size:100%;min-block-size:62px;padding:14px 52px 14px 18px;padding-inline-end:52px;padding-inline-start:18px;border:1px solid #bba5ff99;border-radius:15px;color:var(--ink);background:#211e34;font:inherit;font-size:1.15rem;font-weight:650;cursor:pointer;box-shadow:0 0 0 4px #bba5ff0b}
.ax-course-select select:hover{border-color:var(--purple);background:#29233e}
.ax-course-select>span{pointer-events:none;position:absolute;inset-inline-end:20px;top:50%;transform:translateY(-60%);color:var(--purple);font-size:1.7rem}
.ax-course-picker>p{font-size:.82rem;color:var(--muted);margin:10px 0 0}
.ax-course-trigger{display:flex;align-items:center;justify-content:space-between;gap:18px;inline-size:100%;min-block-size:62px;padding:14px 18px;border:1px solid #bba5ff99;border-radius:15px;color:var(--ink);background:#211e34;font:inherit;font-size:1.15rem;font-weight:650;text-align:start;cursor:pointer;box-shadow:0 0 0 4px #bba5ff0b}
.ax-course-trigger:hover,.ax-course-trigger[aria-expanded="true"]{border-color:var(--purple);background:#29233e}
.ax-course-chevron{flex:none;inline-size:9px;block-size:9px;margin-inline-end:4px;border-right:2px solid var(--purple);border-bottom:2px solid var(--purple);transform:rotate(45deg) translateY(-3px)}
.course-picker-open{overflow:hidden}
.ax-course-dialog{inline-size:min(580px,calc(100% - 32px));max-inline-size:none;max-block-size:85dvh;padding:24px;border:1px solid #bba5ff45;border-radius:26px;background:radial-gradient(ellipse at 0% 0%,#bba5ff13,transparent 65%),#111522;color:var(--ink);box-shadow:0 24px 90px #0008;overflow:hidden}
.ax-course-dialog[open]{display:flex;flex-direction:column}
.ax-course-dialog::backdrop{background:#030611b8;backdrop-filter:blur(5px)}
.ax-course-dialog-top{display:flex;align-items:start;justify-content:space-between;gap:24px;margin-bottom:20px;flex:none}
.ax-course-dialog-top h2{font-size:1.45rem;line-height:1.25;margin:5px 0 0;max-inline-size:310px;text-wrap:balance}
.ax-course-close{display:grid;place-items:center;flex:none;inline-size:44px;block-size:44px;border:1px solid #ffffff25;border-radius:50%;background:#ffffff06;color:var(--muted);font-size:1.65rem;cursor:pointer}
.ax-course-close:hover{color:var(--ink);background:#ffffff10}
.ax-course-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-block-size:0;padding:4px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#51476c transparent}
.ax-course-option{position:relative;min-inline-size:0;min-block-size:62px;padding:12px 16px;padding-inline-end:36px;border:1px solid #ffffff15;border-radius:13px;background:#ffffff04;color:var(--ink);font:inherit;font-size:1rem;line-height:1.35;text-align:start;overflow-wrap:anywhere;cursor:pointer}
.ax-course-option:hover{background:#bba5ff10;border-color:#bba5ff65}
.ax-course-option[aria-pressed="true"]{background:#bba5ff20;border-color:var(--purple);color:#e3d9ff}
.ax-course-check{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);color:var(--mint);font-size:1rem;visibility:hidden}
.ax-course-option[aria-pressed="true"] .ax-course-check{visibility:visible}
.ax-course-trigger:focus-visible,.ax-course-option:focus-visible,.ax-course-close:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
@media(max-width:600px){.ax-course-dialog{inset:auto 0 0;margin:0;inline-size:100%;max-block-size:85dvh;border-radius:26px 26px 0 0;padding:22px 16px max(20px,env(safe-area-inset-bottom));border-bottom:0}.ax-course-dialog-top{gap:18px;padding-inline:4px;margin-bottom:16px}.ax-course-dialog-top h2{font-size:1.35rem;max-inline-size:240px}.ax-course-option{font-size:.94rem;padding-inline-start:12px}}
@media(max-width:340px){.ax-course-options{grid-template-columns:1fr}}
.ax-explorer-notes{display:grid;gap:8px;list-style:none;padding:0;margin:24px 0 28px;color:var(--muted);font-size:.92rem}
.ax-explorer-notes li::before{content:"";display:inline-block;inline-size:6px;block-size:6px;border-radius:50%;background:var(--mint);margin-inline-end:10px;vertical-align:middle}
.ax-explorer-after .button-row{gap:18px 24px;align-items:center}
.ax-explorer-after .text-link{font-size:.92rem}
.ax-preview-stage{min-inline-size:0;padding:22px 22px 24px;border:1px solid #bba5ff38;border-radius:30px;background:radial-gradient(ellipse at 15% 0,#bba5ff1a,transparent 60%),radial-gradient(ellipse at 95% 90%,#87ead010,transparent 50%),var(--surface);box-shadow:0 28px 65px -45px #bba5ff65}
.ax-preview-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 20px}
.ax-preview-top p{color:var(--ink);font-weight:650;margin:0;line-height:1.3}
.ax-preview-top>span{font-size:.72rem;color:var(--mint);text-align:end;line-height:1.4}
.ax-preview-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:12px}
.ax-preview-strip::-webkit-scrollbar{display:none}
.ax-preview-slide{flex:0 0 100%;min-inline-size:0;margin:0;padding:0 6px;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center}
.ax-preview-slide .ax-phone{inline-size:238px;max-inline-size:100%;padding:7px;border-radius:36px;box-shadow:0 18px 45px -30px #bba5ff80}
.ax-preview-slide .ax-phone img{border-radius:28px}
.ax-preview-slide figcaption{text-align:center;inline-size:100%;padding:18px 4px 0;min-block-size:90px;line-height:1.35}
.ax-preview-slide figcaption>span{display:block;color:var(--purple);font-size:.75rem;font-weight:650;letter-spacing:.02em;margin-bottom:7px}
.ax-preview-slide figcaption>strong{display:block;color:var(--ink);font-size:1rem;font-weight:600;text-wrap:balance}
.ax-preview-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin:4px 0 16px}
.ax-preview-controls button{display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:50%;border:1px solid #4c4468;background:#bba5ff12;color:var(--purple);font-size:1.2rem;cursor:pointer}
.ax-preview-controls button:hover:not(:disabled){background:#bba5ff2b;border-color:var(--purple)}
.ax-preview-controls button:disabled{opacity:.3;cursor:default}
.ax-preview-count{margin:0;min-inline-size:42px;text-align:center;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums;direction:ltr}
.ax-preview-link{display:flex;justify-content:center;text-align:center;font-size:.88rem;color:var(--mint);padding-top:14px;border-top:1px solid var(--line);line-height:1.5}
.ax-course-fallback{margin:24px 0;border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.ax-course-fallback summary{cursor:pointer;color:var(--purple);font-weight:600}
.ax-course-fallback nav{display:flex;flex-wrap:wrap;gap:10px 18px;padding-top:18px}
.ax-course-fallback a{font-size:.9rem}
.ax-language-explorer [hidden]{display:none!important}
[data-course-details][hidden]{display:none!important}
[data-course-details] .ax-gallery .ax-panel{scroll-snap-stop:always}
.ax-features-icons .ax-feature{grid-template-rows:auto;background:linear-gradient(145deg,#bba5ff0b,transparent),var(--surface)}
.ax-course-select select:focus-visible,.ax-preview-controls button:focus-visible,.ax-preview-strip:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
[dir="rtl"] .ax-preview-controls button span{transform:scaleX(-1)}
@media(max-width:980px){.ax-language-explorer{gap:30px;grid-template-columns:minmax(0,1fr) minmax(290px,360px)}.ax-explorer-copy h1{font-size:clamp(2.7rem,5vw,3.8rem)}.ax-explorer-after .button-row{align-items:start;flex-direction:column}}
@media(max-width:760px){.ax-language-explorer{grid-template-columns:1fr;gap:28px;padding-block:24px 44px}.ax-explorer-copy h1{font-size:clamp(2.6rem,10.8vw,4rem);margin-bottom:18px}.ax-explorer-copy .lead{font-size:1.04rem;margin-bottom:0}.ax-course-picker{max-inline-size:none;margin-block:24px 0}.ax-explorer-notes{margin-block:20px;font-size:.84rem;gap:5px}.ax-explorer-after .button-row{flex-direction:row;align-items:center;gap:18px}.ax-explorer-after .button{font-size:.88rem;padding:13px 18px}.ax-explorer-after .text-link{font-size:.82rem}.ax-preview-stage{inline-size:100%;max-inline-size:460px;justify-self:center;padding:20px 14px;border-radius:24px}.ax-preview-slide .ax-phone{inline-size:min(238px,66vw)}.ax-preview-top{padding-inline:6px}.ax-preview-slide figcaption{min-block-size:84px}.ax-preview-controls{margin-block:0 14px}.ax-preview-link{font-size:.85rem}}
.ax-language-explorer{row-gap:0}
.ax-explorer-copy{grid-column:1;grid-row:1;align-self:end}
.ax-preview-stage{grid-column:2;grid-row:1 / span 2}
.ax-explorer-after{grid-column:1;grid-row:2;align-self:start}
@media(max-width:760px){
 .ax-language-explorer{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .ax-explorer-copy,.ax-explorer-after{align-self:stretch}
 .ax-explorer-copy>.eyebrow{margin-bottom:14px}
 .ax-course-picker{margin-bottom:26px}
 .ax-preview-stage{align-self:center}
 .ax-explorer-notes{margin-block:24px 18px}
 .ax-explorer-after .button-row{justify-content:center}
}

.ax-compare-link{display:inline-flex;align-items:center;min-height:44px;color:var(--purple);font-size:.9rem;text-underline-offset:4px;margin-bottom:12px}
#app-features{scroll-margin-top:110px}