/* Academia Elena — catalogue pages: /courses, /course, /route. Language: organic. Tokens only (site.css). */

/* ── shared bits ─────────────────────────────────────────────────────────── */
.cat-head{max-width:720px;margin-bottom:clamp(40px,6vw,72px)}
.cat-head-r{margin-left:auto}
.cat-head .lead{margin-bottom:0}
.meta{color:var(--muted);font-size:.93rem}
.pr{white-space:nowrap}
.pr .price{font-size:1.4rem}
.pr small{color:var(--muted);font-size:.8rem}
.add{margin:0}
.btn-s{padding:.65em 1.1em;font-size:.92rem}
.more{font-weight:700;text-underline-offset:4px}
.buy-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:10px}
.cat-intro,.crs-top,.rt-intro{position:relative;overflow:hidden}
.cat-intro .wrap,.crs-top .wrap,.rt-intro .wrap{position:relative;z-index:1}

/* ── /courses: intro ─────────────────────────────────────────────────────── */
.cat-intro{padding:clamp(56px,8vw,110px) 0 clamp(8px,2vw,24px)}
.cat-intro-in{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.cat-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.cat-jump a{padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:500;transition:background .25s,border-color .25s}
.cat-jump a:hover{background:var(--sand);border-color:transparent;color:var(--ink)}
.cat-jump .es{margin-right:3px}
.cat-route-hint{display:grid;gap:8px;padding:28px 28px 26px;border-radius:44px 22px 44px 22px;background:var(--sea);color:#fff;text-decoration:none;rotate:-1.5deg;box-shadow:var(--shadow);transition:rotate .5s ease-out,background .25s,opacity .8s ease-out,transform .8s ease-out}
.cat-route-hint:hover{color:#fff;background:var(--sea-d);rotate:0deg}
.cat-route-hint b{font:600 1.45rem/1.2 var(--serif)}
.cat-route-hint span{color:rgba(255,255,255,.88);font-size:.98rem}
.cat-route-hint i{font-style:normal;font-weight:700}

/* levels: the ladder — each riser is taller than the one before, so the higher level sits higher */
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end}
.step{display:flex;flex-direction:column;min-width:0}
.step-card{position:relative;z-index:1;margin-bottom:-22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.step-photo{display:block;margin:10px 10px 0;border-radius:calc(var(--r) - 8px) calc(var(--r) - 8px) 40% 60% / calc(var(--r) - 8px) calc(var(--r) - 8px) 14% 18%;overflow:hidden}
.step-photo img{width:100%;aspect-ratio:10/7;object-fit:cover}
.step-body{padding:14px 18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.step-body h3{margin:0}
.step-body h3 a,.ov-card h3 a,.xname h3 a,.next h2 a{color:var(--ink);text-decoration:none}
.step-body h3 a:hover,.ov-card h3 a:hover,.xname h3 a:hover,.next h2 a:hover{color:var(--terra)}
.step-sub{min-height:2.9em;margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}
.step .add{margin-top:6px}
.step-riser{height:calc(84px + var(--i) * 70px);padding-top:22px;background:var(--sand);border-top:3px solid var(--olive);border-radius:0 0 var(--r-s) var(--r-s);display:flex;align-items:flex-end;justify-content:flex-end}
.step-riser span{padding:0 18px 12px;font:italic 500 2.4rem/1 var(--serif);color:var(--terra)}
.ladder-note{margin:28px 0 0;color:var(--muted)}

/* life here: overlap cards, proportions change from one to the next */
.ov{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;margin-bottom:clamp(64px,9vw,120px)}
.ov:last-child{margin-bottom:0}
.ov-photo{grid-row:1;display:block;border-radius:var(--blob);overflow:hidden}
.ov-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ov-card{grid-row:1;position:relative;z-index:1;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(24px,3vw,40px)}
.ov-card h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:10px 0 2px}
.ov-sub{color:var(--muted);margin-bottom:14px}
.ov-es{padding:12px 0 12px 16px;border-left:2px solid var(--gold);margin-bottom:14px}
.ov-es .es{font-size:1.15rem}
.ov-es small{color:var(--muted);font-size:.9rem}
.ov-1 .ov-photo{grid-column:1/9}
.ov-1 .ov-card{grid-column:7/13}
.ov-2 .ov-photo{grid-column:6/13;border-radius:45% 55% 40% 60% / 55% 45% 55% 45%}
.ov-2 .ov-photo img{aspect-ratio:5/4}
.ov-2 .ov-card{grid-column:1/8;border-radius:44px 22px 44px 22px}
.ov-3 .ov-photo{grid-column:1/7}
.ov-3 .ov-photo img{aspect-ratio:4/5}
.ov-3 .ov-card{grid-column:5/13}

/* nationality: one wide panel */
.exam-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;background:var(--sea);color:#fff;border-radius:56px 22px 56px 22px;padding:clamp(24px,4vw,56px)}
.exam-panel a{color:#fff}
.exam-panel h2{margin-bottom:6px}
.exam-panel h2 a{text-decoration:none}
.exam-panel .eyebrow{color:var(--sand)}
.exam-photo{border-radius:var(--blob);overflow:hidden}
.exam-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.exam-sub{font-size:1.1rem;color:rgba(255,255,255,.9)}
.exam-two{list-style:none;padding:0;margin:22px 0 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.exam-two li{border:1px solid rgba(255,255,255,.3);border-radius:var(--r-s);padding:14px 16px}
.exam-two b{display:block;font:600 1.1rem/1.2 var(--serif);margin-bottom:6px}
.exam-two span{display:block;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.88)}
.exam-fine{font-size:.92rem;color:rgba(255,255,255,.85)}
.exam-panel .meta,.exam-panel .pr small{color:rgba(255,255,255,.85)}
.exam-panel .btn-ghost{color:#fff}
.exam-panel .btn-ghost:hover{background:#fff;color:var(--sea)}

/* full route: sand band with its parts and the saving */
.cat-route{background:var(--sand);padding:clamp(72px,10vw,140px) 0}
.cat-route-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.route-parts{list-style:none;counter-reset:rp;padding:0;margin:28px 0 30px;max-width:560px}
.route-parts li{display:flex;align-items:center;gap:10px;padding:9px 0}
.route-parts li::before{counter-increment:rp;content:counter(rp);flex:none;width:30px;height:30px;display:grid;place-items:center;border:1.5px solid var(--olive);border-radius:var(--blob);font-size:.85rem;font-weight:700;color:var(--olive)}
.route-parts a{color:var(--ink);font-weight:700;text-decoration:none}
.route-parts a:hover{color:var(--terra)}
.route-parts .tag{background:var(--surface)}
.route-parts i{flex:1;min-width:16px;border-bottom:2px dotted rgba(31,42,34,.3);transform:translateY(4px)}
.route-sum{margin:0;display:grid;gap:10px;max-width:560px}
.route-sum div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.route-sum dt,.route-sum dd{margin:0}
.route-sum>div:first-child{color:var(--muted)}
.route-sum-main{border-top:2px solid var(--ink);padding-top:12px}
.route-sum-main dt a{color:var(--ink);font:600 1.3rem/1.2 var(--serif);text-decoration:none}
.route-sum-main small{color:var(--muted);font-size:.8rem}
.route-sum-main dd{font-size:2.2rem;color:var(--terra)}
.route-save{background:var(--olive);color:#fff;border-radius:999px;padding:10px 20px;font-weight:700}
.route-save dd{font-size:1.3rem}
.route-photo{border-radius:var(--blob);overflow:hidden;box-shadow:var(--shadow)}
.route-photo img{width:100%;aspect-ratio:8/9;object-fit:cover}
.route-buy{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:22px}
.route-buy .meta{flex-basis:100%}

/* add-ons: compact rows */
.xrows{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.xrow{display:grid;grid-template-columns:64px minmax(0,2.4fr) auto minmax(0,1.1fr) auto auto;grid-template-areas:"th nm tg mt pr ad";gap:12px 24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.xthumb{grid-area:th;display:block;width:64px;height:64px;border-radius:var(--blob);overflow:hidden}
.xthumb img{width:100%;height:100%;object-fit:cover}
.xname{grid-area:nm;min-width:0}
.xname h3{margin:0;font-size:1.2rem}
.xname p{margin:0;color:var(--muted);font-size:.95rem}
.xrow .tag{grid-area:tg;justify-self:start}
.xrow .meta{grid-area:mt}
.xrow .pr{grid-area:pr}
.xrow .add{grid-area:ad}
.cat-close{margin:32px 0 0;font-size:1.05rem}

/* ── /course ─────────────────────────────────────────────────────────────── */
.crs-top{padding:clamp(32px,5vw,64px) 0 clamp(56px,8vw,110px)}
.crs-top-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.crumbs{font-size:.92rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted)}
.crs-top h1{font-size:clamp(2.2rem,4.3vw,3.5rem);margin-bottom:0}
.crs-sub{display:block;margin-top:10px;font:500 clamp(1.05rem,1.6vw,1.3rem)/1.4 var(--sans);color:var(--muted);letter-spacing:0}
.phrase{margin:34px 0 28px;padding:clamp(28px,4vw,52px);background:var(--sand);border-radius:44px 44px 44px 10px}
.phrase-mark{color:var(--terra);margin-bottom:12px}
.phrase blockquote{margin:0;font:italic 500 clamp(1.7rem,3.3vw,2.7rem)/1.25 var(--serif);color:var(--terra)}
.phrase figcaption{margin-top:14px;font-size:1.12rem}
.phrase-note{margin:20px 0 0;padding-top:14px;border-top:1px dashed rgba(31,42,34,.25);font-size:.92rem;color:var(--muted)}
.crs-pitch{max-width:60ch;font-size:1.1rem}
.crs-side{position:relative;padding-top:clamp(0px,3vw,40px)}
.crs-photo{border-radius:var(--blob);overflow:hidden;animation:morph 26s ease-in-out infinite alternate}
.crs-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pbox{position:relative;z-index:2;width:min(100%,360px);margin:-120px 0 0 -40px;padding:26px 26px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pbox-price{margin:0}
.pbox-price .price{font-size:2.4rem;line-height:1}
.pbox-price small{color:var(--muted)}
.pbox-save{margin:8px 0 0;font-size:.92rem;color:var(--olive)}
.pbox-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:16px 0 20px;padding:14px 0;border-block:1px solid var(--line)}
.pbox-facts div{margin:0}
.pbox-facts dt{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pbox-facts dd{margin:2px 0 0;font-weight:700}
.pbox .btn{width:100%;justify-content:center}
.pbox .add{margin-top:10px}
.pbox-fine{margin:14px 0 0;font-size:.88rem;color:var(--muted);text-align:center}

/* you now → you after */
.crs-shift h2{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.shift{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;gap:20px;max-width:1040px;margin:0 auto}
.shift-col{padding:clamp(24px,3vw,44px);border:1.5px dashed rgba(31,42,34,.28);border-radius:var(--r)}
.shift-col p{margin:0;font:500 clamp(1.25rem,2vw,1.6rem)/1.45 var(--serif)}
.shift-after{background:var(--olive);color:#fff;border:0;border-radius:44px 22px 44px 22px;position:relative;top:24px}
.shift-after .eyebrow{color:var(--sand)}
.shift-arrow{color:var(--terra);width:100%;height:auto}

/* unit map: a winding path of numbered stones (4 per row, the second row walks back) */
.crs-map{background:var(--sand)}
.umap{--g:28px;--rg:52px;list-style:none;margin:0;padding:0 48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);row-gap:var(--rg)}
.u{grid-row:var(--r);grid-column:var(--c);position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.u::after{content:"";position:absolute;top:30px;border-top:2px dashed var(--terra);opacity:.55;pointer-events:none}
.u-right::after{left:50%;width:calc(100% + var(--g))}
.u-left::after{right:50%;width:calc(100% + var(--g))}
.u-down-r::after,.u-down-l::after{width:calc(50% + 36px);height:calc(100% + var(--rg));border:2px dashed var(--terra)}
.u-down-r::after{left:50%;border-left:0;border-radius:0 64px 64px 0}
.u-down-l::after{right:50%;border-right:0;border-radius:64px 0 0 64px}
.u-stone{position:relative;z-index:1;flex:none;width:60px;height:60px;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--terra);border-radius:var(--blob);font:600 1.35rem/1 var(--serif);color:var(--terra)}
.u:nth-child(3n+2) .u-stone{border-radius:45% 55% 50% 50% / 55% 45% 55% 45%}
.u:nth-child(3n) .u-stone{border-radius:55% 45% 60% 40% / 45% 55% 45% 55%}
.u-end .u-stone{background:var(--terra);color:#fff}
.u-t{max-width:24ch;font-size:.98rem;line-height:1.45}
.js .u.reveal.in .u-stone{animation:stone-in .9s ease-out both}

/* sample lesson: horizontal scroll-snap strip */
.strip{--pad:max(clamp(16px,4vw,48px),calc((100% - var(--wrap)) / 2 + clamp(16px,4vw,48px)));list-style:none;margin:0;padding:8px var(--pad) 48px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);counter-reset:st;scrollbar-width:thin;scrollbar-color:var(--sand) transparent}
.strip li{counter-increment:st;position:relative;flex:0 0 min(78%,290px);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:26px 24px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.strip li:nth-child(even){transform:translateY(24px);border-radius:36px 22px 36px 22px}
.strip li::after{content:counter(st);position:absolute;top:16px;right:22px;font:italic 500 2.4rem/1 var(--serif);color:var(--terra);opacity:.35}
.strip svg{color:var(--sea)}
.strip b{font:600 1.2rem/1.25 var(--serif)}
.strip span{color:var(--muted);font-size:.96rem}

/* next step */
.next{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center;max-width:1000px;margin:0 auto;padding:clamp(20px,3vw,36px);background:var(--surface);border-radius:56px 22px 56px 22px;box-shadow:var(--shadow)}
.next-photo{display:block;border-radius:var(--blob);overflow:hidden}
.next-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.next-sub{color:var(--muted)}
.next-meta{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline}

/* small print */
.crs-fine{padding:0 0 clamp(72px,10vw,130px)}
.crs-fine-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 28px;align-items:center;padding-top:32px;border-top:1px solid var(--line)}
.crs-fine svg{color:var(--olive)}
.crs-fine p{margin:0;max-width:62ch;font-size:.95rem;color:var(--muted)}
.crs-fine-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.crs-fine-buy .price{font-size:1.5rem;margin-right:6px}

/* ── /route builder ──────────────────────────────────────────────────────── */
.rt-intro{padding:clamp(56px,8vw,110px) 0 clamp(48px,7vw,90px)}
.rt-intro-text{max-width:720px}
.presets{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.preset{display:flex;flex-direction:column;gap:6px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:40px 22px 40px 22px}
.preset:nth-child(2){margin-top:36px;background:var(--sand);border-color:transparent;border-radius:22px 40px 22px 40px}
.preset:nth-child(3){margin-top:14px}
.preset h2{font-size:1.5rem;margin:0}
.preset-es{font-size:1.05rem}
.preset>p{margin:0 0 4px;color:var(--muted);font-size:.96rem}
.preset-list{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:6px}
.preset-list li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--paper);border-radius:var(--r-s);font-weight:500}
.preset-list small{color:var(--muted);font-weight:700}
.preset-total{margin:6px 0 8px}
.preset-total .price{font-size:1.35rem}
.preset-total small{color:var(--muted);font-size:.8rem}
.preset-btn{display:none;align-self:flex-start}
.js .preset-btn{display:inline-flex}
.preset-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.rt-group{min-width:0;margin:0 0 clamp(48px,6vw,80px);padding:0;border:0}
.rt-group legend{padding:0;margin-bottom:6px;font:600 clamp(1.5rem,2.6vw,2.1rem)/1.2 var(--serif)}
.rt-group legend .es{margin-right:8px}
.rt-lead{margin:0 0 20px;color:var(--muted)}
.rt-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}
.rt-item{position:relative;display:block;cursor:pointer}
.rt-item input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rt-card{height:100%;display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"th nm tk" "th mt pr";gap:6px 14px;align-items:center;padding:14px 16px 14px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);transition:border-color .25s,box-shadow .25s,transform .25s}
.rt-item:hover .rt-card{transform:translateY(-2px);border-color:rgba(31,42,34,.35)}
.rt-thumb{grid-area:th;width:64px;height:64px;border-radius:var(--blob);overflow:hidden}
.rt-thumb img{width:100%;height:100%;object-fit:cover}
.rt-name{grid-area:nm;display:flex;flex-direction:column;min-width:0}
.rt-name b{font:600 1.08rem/1.25 var(--serif)}
.rt-name small{color:var(--muted);font-size:.86rem;line-height:1.35}
.rt-meta{grid-area:mt;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.rt-meta small{color:var(--muted);font-size:.85rem}
.rt-price{grid-area:pr;justify-self:end;font-size:1.15rem}
.rt-tick{grid-area:tk;justify-self:end;width:28px;height:28px;display:grid;place-items:center;border:1.5px solid var(--muted);border-radius:50%;color:transparent;transition:background .25s,border-color .25s,color .25s}
.rt-item input:checked+.rt-card{border-color:var(--terra);box-shadow:inset 0 0 0 1px var(--terra),var(--shadow)}
.rt-item input:checked+.rt-card .rt-tick{background:var(--terra);border-color:var(--terra);color:#fff;animation:tick-pop .4s ease-out}
.rt-item input:focus-visible+.rt-card{outline:3px solid var(--gold);outline-offset:3px}
.rt-hint{margin:14px 0 0;font-size:.95rem;color:var(--muted)}

.rt-bar{position:sticky;bottom:0;z-index:40;padding:12px clamp(16px,4vw,48px) calc(14px + env(safe-area-inset-bottom,0px))}
.rt-bar-in{max-width:calc(var(--wrap) - 96px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"nt nt nt" "sm fn bt";align-items:center;gap:10px 24px;padding:12px 12px 12px 28px;background:var(--ink);color:#fff;border-radius:30px;box-shadow:0 -12px 40px -18px rgba(31,42,34,.55)}
.rt-sum{grid-area:sm;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 20px}
.rt-count b{font-size:1.2rem}
.rt-total .price{font-size:1.6rem}
.rt-total small,.rt-fine{color:rgba(255,255,255,.78);font-size:.85rem}
.rt-fine{grid-area:fn;margin:0}
.rt-sum .rt-count,.rt-sum .rt-total{white-space:nowrap}
.rt-bar .btn{grid-area:bt}
.rt-bar.has .btn{animation:glow 2.8s ease-in-out infinite}
.rt-bar.nudge .rt-bar-in{animation:nudge .5s ease-in-out}
.rt-note{grid-area:nt;margin:0;display:flex;gap:10px;align-items:flex-start;padding:10px 14px;background:var(--sand);color:var(--ink);border-radius:var(--r-s);font-size:.93rem;line-height:1.45;animation:rise .5s ease-out}
.rt-note[hidden]{display:none}
.rt-note svg{flex:none;color:var(--sea);margin-top:1px}

/* ── own motion ──────────────────────────────────────────────────────────── */
@keyframes morph{0%{border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}50%{border-radius:48% 52% 42% 58% / 58% 44% 56% 42%}100%{border-radius:55% 45% 48% 52% / 44% 56% 50% 50%}}
@keyframes stone-in{0%{transform:scale(.6) rotate(-12deg);opacity:0}70%{transform:scale(1.06) rotate(3deg);opacity:1}100%{transform:none}}
@keyframes tick-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:none}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(226,176,74,0)}50%{box-shadow:0 0 0 6px rgba(226,176,74,.28)}}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

@media (prefers-reduced-motion:reduce){
  .crs-photo,.rt-bar.has .btn,.js .u.reveal.in .u-stone{animation:none}
  .cat-route-hint,.cat-route-hint:hover{rotate:0deg}
  .rt-item:hover .rt-card{transform:none}
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (min-width:641px) and (max-width:1300px){.rt-bar{padding-right:88px}}  /* keep the chat button clear of the submit button */
@media (max-width:1080px){
  .ladder{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px;column-gap:20px}
  .step-riser{height:calc(76px + var(--j) * 64px)}
  .xrow{grid-template-columns:64px auto minmax(0,1fr) auto;grid-template-areas:"th nm nm pr" "th tg mt ad"}
  .exam-two{grid-template-columns:1fr}
  .rt-bar-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nt nt" "sm bt" "fn fn";padding:12px 12px 12px 20px;border-radius:24px}
}
@media (max-width:900px){
  .cat-intro-in,.cat-route-in,.crs-top-in,.exam-panel,.next{grid-template-columns:minmax(0,1fr)}
  .cat-route-hint{rotate:0deg;max-width:480px}
  .exam-photo,.next-photo{max-width:420px}
  .route-side{max-width:480px}
  .crs-side{max-width:520px;padding-top:0}
  .pbox{margin:-90px 0 0 16px;width:calc(100% - 32px)}
  .crs-fine-in{grid-template-columns:auto minmax(0,1fr)}
  .crs-fine-buy{grid-column:1/-1}
  .presets{grid-template-columns:minmax(0,1fr)}
  .preset:nth-child(n){margin-top:0}
}
@media (max-width:760px){
  .ov{grid-template-columns:minmax(0,1fr)}
  .ov .ov-photo,.ov .ov-card{grid-column:1}
  .ov .ov-card{grid-row:2;margin:-56px 12px 0}
  .ov .ov-photo img{aspect-ratio:4/3}
  .shift{grid-template-columns:minmax(0,1fr)}
  .shift-arrow{width:90px;margin:0 auto;transform:rotate(90deg)}
  .shift-after{top:0}
  /* the path becomes a vertical trail */
  .umap{grid-template-columns:minmax(0,1fr);row-gap:0;padding:0}
  .u{grid-row:auto;grid-column:auto;flex-direction:row;align-items:flex-start;gap:16px;padding-bottom:22px;text-align:left}
  .u::after,.u-right::after,.u-left::after,.u-down-r::after,.u-down-l::after{top:60px;left:29px;right:auto;width:0;height:calc(100% - 60px);border:0;border-left:2px dashed var(--terra);border-radius:0}
  .u-end::after{display:none}
  .u-t{max-width:none;padding-top:16px}
}
@media (max-width:640px){
  .ladder{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .step-card{margin-bottom:-18px}
  /* on a phone the risers grow sideways: a longer bar for a higher level */
  .step-riser{height:72px;width:calc(40% + var(--i) * 20%)}
  .xrow{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"th nm nm" "th tg tg" "mt mt mt" "pr pr ad";gap:8px 14px}
  .xthumb{width:56px;height:56px}
  .rt-bar-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"nt" "sm" "bt";gap:8px}
  .rt-fine{display:none}
  .rt-bar .btn{justify-content:center;margin-right:56px}  /* the chat button sits in the bar's corner */
  .rt-note{font-size:.85rem}
  .rt-card{grid-template-columns:56px minmax(0,1fr) auto}
  .rt-thumb{width:56px;height:56px}
}