/* Samir GenAI Academy (by SkaiLabin): the one look for every page.
 *
 * Warm off-white page, black and green pill buttons, a floating white nav,
 * pastel pink/purple mountains with clouds and sparkles, blob avatars and a
 * yellow robot mascot. All artwork is our own (CSS, and the SVG that
 * site-theme.js draws into [data-art] placeholders).
 *
 * Pages link this file in the <head> so nothing flashes on load. Page-only
 * rules stay in the page.
 */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Funnel+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #FBF6F2; --bg2: #F5EFEA; --ink: #111111; --soft: #5B5B66; --mute: #8A8A94; --line: #ECE3DC; --card: #FFFFFF;
    --green: #00A88B; --green-d: #008F76; --coral: #FF6E6E; --lilac: #945BB8; --lilac-bg: rgba(164,125,197,.18);
    --pink: #F7A8C8; --pink2: #F48FB8; --pink3: #E88FC0; --purple: #A983CF; --purple2: #9B6BC6; --purple3: #8E5BC0;
    --peach: #FFE7D6; --mint: #DDF5EE; --lav: #EFE4F7; --sky: #DCE6F7; --sky2: #D8E3F3; --navy: #1E3A8A; --sun: #FF6E6E;
    --r-card: 30px; --r-btn: 20px;
    --shadow: 0 30px 70px -34px rgba(80,20,60,.45);
    --shadow-s: 0 14px 34px -22px rgba(40,20,10,.4);
    --fh: 'Funnel Sans', 'Inter', system-ui, sans-serif;
    --fb: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fc: 'Caveat', cursive;
}

/* ---------- base ---------- */
.st *, .st *::before, .st *::after { box-sizing: border-box; }
html.st-html, html.st-html body { overflow-x: clip; }
html.st-html { scroll-behavior: smooth; }
body.st { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--fb); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.st h1, .st h2, .st h3, .st h4 { font-family: var(--fh); letter-spacing: -.045em; line-height: 1.04; margin: 0; color: inherit; }
.st p { margin: 0; }
.st a { color: inherit; }
.st img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.kicker { font-family: var(--fc); color: var(--coral); font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1; font-weight: 600; }
.hl { background: var(--lilac-bg); color: var(--lilac); border-radius: 8px; padding: 0 .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.muted { color: var(--soft); }
.center { text-align: center; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none; cursor: pointer;
    font: 600 1rem/1.75 var(--fb); letter-spacing: -.02em; padding: .85rem 2.2rem; border-radius: var(--r-btn);
    border: 1.5px solid transparent; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .7; cursor: default; transform: none; }
.btn-green { background: var(--green); color: #fff !important; }
.btn-green:hover { background: var(--green-d); }
.btn-line { background: #fff; color: var(--ink) !important; border-color: #E3DAD3; }
.btn-line:hover { border-color: #CFC4BB; }
.btn-dark { background: var(--ink); color: #fff !important; }
.btn-dark:hover { background: #2A2A2A; }
.btn-white { background: #fff; color: var(--ink) !important; }
.btn-sm { padding: .55rem 1.2rem; font-size: .92rem; border-radius: 16px; }
.btn-full { width: 100%; }

/* ---------- floating nav ---------- */
.st-top { position: sticky; top: 12px; z-index: 50; padding: 0 16px; }
.st-nav { max-width: 1180px; margin: 12px auto 0; background: #fff; border-radius: 26px; box-shadow: 0 10px 30px -18px rgba(40,20,10,.35);
    display: flex; align-items: center; gap: 22px; padding: 10px 12px 10px 20px; position: relative; }
.st-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--fh);
    font-weight: 800; font-size: 1.12rem; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.st-logo i { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--green), #34D399);
    display: grid; place-items: center; color: #fff; font-style: normal; font-size: 1rem; flex: none; }
.st-logo small { display: block; font: 600 .64rem var(--fb); color: var(--soft); letter-spacing: .02em; }
.st-links { display: flex; gap: 22px; font-size: .95rem; color: #6A6A74; }
.st-links a { text-decoration: none; white-space: nowrap; }
.st-links a:hover, .st-links a.on { color: var(--ink); }
/* Everything sits on the left: logo, links, then Log in straight after FAQ
   (and on phones, Log in and the menu button straight after the logo).
   Pushed to the far right edge, Log in was cut off on some phones. Tighter
   between 1081 and 1200px, and below that the links fold into the menu
   button, so the row never pushes Log in out of the bar. */
.st-acts { margin-left: 0; display: flex; gap: 8px; align-items: center; }
@media (min-width: 1081px) and (max-width: 1200px) { .st-nav { gap: 14px; } .st-links { gap: 14px !important; font-size: .9rem; } }
.st-burger { display: none; width: 42px; height: 42px; border-radius: 14px; border: 1.5px solid #E3DAD3; background: #fff; cursor: pointer; place-items: center; }
.st-burger span, .st-burger span::before, .st-burger span::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; content: ""; }
.st-burger span::before { position: absolute; top: -6px; } .st-burger span::after { position: absolute; top: 6px; }
@media (max-width: 1080px) {
    .st-links { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 22px;
        box-shadow: var(--shadow-s); flex-direction: column; gap: 0; padding: 8px; }
    .st-links a { padding: 12px 14px; border-radius: 12px; }
    .st-links a:hover { background: var(--bg2); }
    .st-nav.open .st-links { display: flex; }
    .st-burger { display: grid; }

}
@media (max-width: 600px) { .st-nav { gap: 10px; padding: 8px 8px 8px 12px; } .st-logo { font-size: 1rem; gap: 8px; } .st-logo small, .xs-hide { display: none; }
    .st-acts { gap: 6px; } .st-acts .btn { padding: .5rem .95rem; } }
/* Small phones: the logo gives way so Log in and the menu always fit. */
@media (max-width: 600px) {
    .st-top { padding: 0 10px; }
    .st-logo { min-width: 0; flex: 0 1 auto; }
    .st-logo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .st-acts { flex: none; margin-left: 0; }
}
@media (max-width: 380px) {
    .st-logo { font-size: .9rem; gap: 6px; }
    .st-logo i { width: 28px; height: 28px; border-radius: 9px; font-size: .9rem; }
    .st-burger { width: 38px; height: 38px; }
    .st-acts .btn { padding: .45rem .8rem; }
}

/* ---------- hero + scene ---------- */
.st-hero { position: relative; text-align: center; padding: 62px 0 0; }
.st-hero h1 { font-size: clamp(2.5rem, 7vw, 4.9rem); font-weight: 700; margin: 14px auto 18px; max-width: 960px; }
.st-hero .sub { font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--soft); max-width: 740px; margin: 0 auto 30px; letter-spacing: -.01em; }
.st-hero .ctas { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.st-hero .ctas .btn { min-width: 300px; }
.st-hero.small { padding: 50px 0 0; }
.st-hero.small h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); }

.scene { position: relative; height: 640px; margin-top: 40px; overflow: hidden; }
.scene.short { height: 300px; margin-top: 10px; }
.mtns { position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 640' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpattern id='s' width='60' height='60' patternUnits='userSpaceOnUse' patternTransform='rotate(35)'%3E%3Crect width='26' height='60' fill='rgba(255,255,255,.09)'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M0 300 L220 120 L420 330 L0 640 Z' fill='%23F4A8C8'/%3E%3Cpath d='M0 300 L220 120 L420 330 L0 640 Z' fill='url(%23s)'/%3E%3Cpath d='M1160 330 L1460 110 L1600 200 L1600 640 L1100 640 Z' fill='%23F29BC4'/%3E%3Cpath d='M1160 330 L1460 110 L1600 200 L1600 640 L1100 640 Z' fill='url(%23s)'/%3E%3Cpath d='M0 470 C300 380 520 520 800 470 C1080 420 1300 500 1600 430 L1600 640 L0 640 Z' fill='%23E88FC0'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.wave { position: absolute; left: -5%; right: -5%; bottom: -40px; height: 240px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpattern id='s' width='60' height='60' patternUnits='userSpaceOnUse' patternTransform='rotate(35)'%3E%3Crect width='26' height='60' fill='rgba(255,255,255,.08)'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M0 120 C400 20 700 60 1000 30 C1300 0 1450 90 1600 70 L1600 240 L0 240 Z' fill='%23A983CF'/%3E%3Cpath d='M0 120 C400 20 700 60 1000 30 C1300 0 1450 90 1600 70 L1600 240 L0 240 Z' fill='url(%23s)'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.cloud { position: absolute; background: #FBD6E6; border-radius: 40px; opacity: .9; pointer-events: none; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cl1 { width: 220px; height: 58px; right: 6%; top: 150px; animation: st-drift 14s ease-in-out infinite alternate; }
.cl1::before { width: 90px; height: 90px; left: 30px; top: -46px; } .cl1::after { width: 70px; height: 70px; left: 100px; top: -30px; }
.cl2 { width: 90px; height: 28px; right: 16%; top: 250px; animation: st-drift 10s ease-in-out infinite alternate-reverse; }
.cl3 { width: 160px; height: 44px; left: 4%; top: 210px; animation: st-drift 12s ease-in-out infinite alternate; }
.cl3::before { width: 64px; height: 64px; left: 24px; top: -32px; } .cl3::after { width: 50px; height: 50px; left: 78px; top: -22px; }
.spark { position: absolute; width: 22px; height: 22px; background: var(--pink2); pointer-events: none;
    clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); animation: st-twinkle 2.6s ease-in-out infinite; }
.sp1 { left: 7%; top: 70px; } .sp2 { left: 10%; top: 40px; width: 12px; height: 12px; animation-delay: .8s; }
.sp3 { right: 22%; top: 60px; width: 14px; height: 14px; animation-delay: 1.4s; }
.sp4 { right: 8%; top: 30px; width: 18px; height: 18px; animation-delay: .4s; background: var(--purple); }
.tcard { position: absolute; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow); text-align: left; z-index: 2; }
.tc1 { width: min(560px, 46vw); left: 8%; top: 36px; transform: rotate(-6deg); animation: st-floatA 7s ease-in-out infinite; padding: 26px 26px 30px; }
.tc2 { width: min(540px, 44vw); right: 7%; top: 16px; transform: rotate(4deg); animation: st-floatB 8s ease-in-out infinite; padding: 18px; }
.tcard h3 { font-size: 1.9rem; font-weight: 700; }
.tcard video { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 16px; background: #111; object-fit: cover; }
.tcard .sec { margin-top: 16px; } .tcard .sec b { display: block; font-family: var(--fh); font-size: 1.2rem; letter-spacing: -.03em; }
.tcard .sec span { color: var(--soft); font-size: .95rem; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 14px; }
.pill { color: #fff; font-weight: 700; font-size: .9rem; border-radius: 999px; padding: 5px 15px; background: var(--ink); }
.p1 { background: var(--coral); } .p2 { background: var(--purple); } .p3 { background: var(--pink2); } .p4 { background: var(--green); }
.row { display: flex; align-items: center; gap: 18px; background: #F6F4F2; border-radius: 22px; padding: 18px 20px; margin-bottom: 12px; text-decoration: none; }
.row:last-child { margin-bottom: 0; }
.row b { display: block; font-family: var(--fh); font-size: 1.4rem; letter-spacing: -.03em; line-height: 1.1; }
.row span { color: var(--soft); }
.ava { flex: none; width: 70px; height: 70px; display: block; position: relative; }
.ava svg { width: 100%; height: 100%; display: block; }
.mascot { position: absolute; right: 5%; bottom: 60px; width: 190px; height: 190px; animation: st-peek 5s ease-in-out infinite; transform-origin: 50% 100%; z-index: 3; pointer-events: none; }
.mascot svg, .peeker svg, .arm svg { width: 100%; height: 100%; display: block; overflow: visible; }
.st .eye { animation: st-blink 4.5s infinite; transform-origin: center; transform-box: fill-box; }
.scene .under { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4; }

@keyframes st-floatA { 0%,100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-12px); } }
@keyframes st-floatB { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(3deg) translateY(10px); } }
@keyframes st-drift { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes st-twinkle { 0%,100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.6) rotate(20deg); opacity: .6; } }
@keyframes st-peek { 0%,100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-18px) rotate(-3deg); } 60% { transform: translateY(-14px) rotate(2deg); } }
@keyframes st-blink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes st-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 900px) {
    .scene { height: auto; padding: 30px 16px 210px; }
    .scene.short { height: 220px; padding: 0; }
    .tcard { position: relative; width: 100%; left: auto; right: auto; top: auto; margin: 0 auto 20px; max-width: 560px; }
    .mascot { width: 130px; height: 130px; right: 10px; bottom: 30px; }
}
@media (max-width: 520px) { .st-hero .ctas .btn { min-width: 0; width: 100%; } .row b { font-size: 1.15rem; } .ava { width: 56px; height: 56px; } }

/* ---------- strip, sections, headings ---------- */
.strip { text-align: center; padding: 50px 0 10px; }
.strip .nums { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; margin-top: 14px;
    font-family: var(--fh); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: #3A3A44; }
.stars { color: #FF6E6E; letter-spacing: 3px; font-size: 1.15rem; }
section.block { padding: 90px 0 10px; }
.head { text-align: center; max-width: 800px; margin: 0 auto 40px; }
.head h2 { font-size: clamp(2rem, 4.8vw, 3.4rem); font-weight: 700; margin-top: 10px; }
.head p { color: var(--soft); margin-top: 14px; font-size: 1.05rem; }
.head.left { text-align: left; margin-left: 0; }

/* ---------- board (the mascot's arm grabs the middle card) ---------- */
.boardwrap { position: relative; border-radius: 34px; overflow: hidden; padding: 60px 5% 70px;
    background: linear-gradient(160deg, #F7B5D0 0%, #E79BC8 40%, #A983CF 100%); }
.board { position: relative; background: #fff; border-radius: 30px; padding: 30px; max-width: 1060px; margin: 0 auto; box-shadow: 0 30px 70px -40px rgba(60,20,80,.6); }
.board h3 { font-size: 1.9rem; font-weight: 700; }
.board .viewing { color: #9A9AA4; margin: 6px 0 22px; }
.board .viewing b { color: var(--ink); font-weight: 500; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.colh { display: flex; align-items: center; gap: 10px; background: #F4F2F0; border-radius: 16px; padding: 14px 18px; font-weight: 700; font-size: 1.1rem; }
.colh .dots { margin-left: auto; letter-spacing: 2px; color: #777; }
.bcard { background: #fff; border: 1.5px solid #EEE9E5; border-radius: 22px; margin-top: 14px; overflow: hidden; position: relative; }
.bcard .top-in { padding: 20px; }
.bcard .star { position: absolute; right: 16px; top: 16px; font-size: 1.5rem; color: #D6D2CE; }
.bcard b { display: block; font-size: 1.2rem; margin-top: 12px; }
.bcard .lab { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #9A9AA4; margin-top: 12px; }
.bcard .val { font-weight: 500; }
.bcard .score { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #EEE9E5; padding: 14px 20px; color: #9A9AA4; }
.bcard .score em { font-style: normal; font-weight: 700; border-radius: 10px; padding: 4px 12px; }
.s-green { background: #D6F5EC; color: var(--green); } .s-amber { background: #FDE2EE; color: #D6457F; } .s-lilac { background: #EFE4F7; color: var(--lilac); }
.bcard .acts { display: flex; gap: 10px; border-top: 1px solid #EEE9E5; padding: 14px 20px; }
.bcard .acts span { flex: 1; text-align: center; background: #F2F0EE; border-radius: 12px; padding: 10px; font-weight: 600; }
.bcard.lift { animation: st-lift 6s ease-in-out infinite; z-index: 2; box-shadow: 0 30px 60px -30px rgba(60,20,80,.55); }
.bcard.lift .star { color: var(--sun); }
.bcard.lift .acts span:first-child { background: var(--green); color: #fff; }
.bcard.lift .acts span:last-child { background: var(--coral); color: #fff; }
.arm { position: absolute; left: 30%; bottom: -30px; width: 180px; height: 300px; z-index: 3; animation: st-grab 6s ease-in-out infinite; transform-origin: 50% 100%; pointer-events: none; }
@keyframes st-lift { 0%,30% { transform: translateY(0) rotate(0); } 45%,85% { transform: translateY(-26px) rotate(2deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes st-grab { 0%,30% { transform: translateY(120%) rotate(-8deg); } 45%,80% { transform: translateY(0) rotate(4deg); } 95%,100% { transform: translateY(120%) rotate(-8deg); } }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } .arm { display: none; } .board { padding: 20px; } }

/* ---------- purple product panel ---------- */
.products { background: var(--purple); color: #fff; border-radius: 36px; padding: 60px 4% 50px; position: relative; overflow: hidden; }
.products .kicker { color: #FFD1E2; }
.products h2 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; margin: 10px 0 14px; max-width: 900px; }
.products > p { color: #EFE3FA; max-width: 720px; }
.acc { display: flex; gap: 12px; margin-top: 40px; min-height: 500px; }
.acc .panel { flex: 0 0 76px; border-radius: 28px; background: #9559BE; cursor: pointer; transition: flex .5s ease, background .3s; position: relative; overflow: hidden; }
.acc .panel:hover { background: #8C4FB8; }
.acc .panel .vlabel { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
    font-family: var(--fh); font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; white-space: nowrap; transition: opacity .3s; }
.acc .panel .inner { opacity: 0; pointer-events: none; transition: opacity .3s ease .15s; display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px;
    height: 100%; padding: 22px; color: var(--ink); }
.acc .panel.open { flex: 1 1 auto; background: #fff; cursor: default; }
.acc .panel.open .vlabel { opacity: 0; }
.acc .panel.open .inner { opacity: 1; pointer-events: auto; }
.mock { border: 1.5px solid #EEE9E5; border-radius: 22px; overflow: hidden; background: #FCFBFA; align-self: start; }
.mock .mh { padding: 18px 20px; border-bottom: 1px solid #EEE9E5; }
.mock .mh b { font-size: 1.15rem; } .mock .mh span { display: block; color: #8A8A94; font-size: .92rem; }
.mock .stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
.stg { background: #EFE8F7; border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: .85rem; display: flex; justify-content: space-between; gap: 6px; }
.stg i { font-style: normal; background: var(--purple3); color: #fff; border-radius: 999px; padding: 0 8px; }
.mcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px 14px; }
.mc { background: #fff; border: 1px solid #EEE9E5; border-radius: 14px; padding: 12px; font-size: .85rem; }
.mc .ava { width: 46px; height: 46px; }
.mc b { display: block; margin: 8px 0 4px; font-size: .95rem; line-height: 1.25; }
.mc small { display: block; font-size: .68rem; letter-spacing: .06em; color: #9A9AA4; text-transform: uppercase; line-height: 1.35; }
.mc.done { background: var(--green); color: #fff; border-color: var(--green); }
.mc.done small { color: #CFF5EA; }
.mlist { list-style: none; margin: 0; padding: 6px 14px 14px; }
.mlist li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px dashed #EEE9E5; font-size: .92rem; }
.mlist li:last-child { border-bottom: 0; }
.mlist li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); margin-top: 2px;
    box-shadow: inset 0 0 0 5px var(--mint), inset 0 0 0 9px var(--green); }
.ptext { padding: 20px 10px; display: flex; flex-direction: column; }
.ptext h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; }
.ptext .free { color: var(--coral); font-size: 1.1rem; margin: 12px 0; font-weight: 600; }
.ptext p { color: #4A4A55; font-size: 1.05rem; flex: 1; }
.ptext .btn { align-self: flex-start; margin-top: 18px; }
@media (max-width: 860px) {
    .products { padding: 40px 18px 24px; border-radius: 28px; }
    .acc { flex-direction: column; min-height: 0; }
    .panel { flex: none; min-height: 78px; }
    .panel .vlabel { writing-mode: horizontal-tb; transform: translate(-50%, 0); bottom: 22px; font-size: 1.3rem; }
    .panel .inner { grid-template-columns: 1fr; display: none; }
    .panel.open .inner { display: grid; }
}

/* ---------- without / with slider ---------- */
.vs { position: relative; border-radius: 34px; overflow: hidden; height: 560px; background: var(--sky); user-select: none; }
.vs .side { position: absolute; inset: 0; padding: 50px; }
.vs .without { background: #DCE6F7; }
.vs .with { background: #D9E4F4; clip-path: inset(0 0 0 50%); }
.vs .tagv { display: inline-block; font-family: var(--fh); font-weight: 700; font-size: 1.8rem; letter-spacing: -.03em; color: #fff; border-radius: 14px; padding: 8px 22px; }
.vs .without .tagv { background: #111; } .vs .with .tagv { background: var(--green); }
.vs .side p.lead { color: #4A4A55; margin-top: 12px; max-width: 300px; font-size: 1.05rem; }
.vs .with .hdr { text-align: right; } .vs .with p.lead { margin-left: auto; }
.tool { position: absolute; background: #fff; border-radius: 24px; padding: 18px 28px; font-family: var(--fh); font-weight: 600;
    font-size: 1.55rem; letter-spacing: -.02em; box-shadow: 0 16px 40px -24px rgba(20,40,90,.5); white-space: nowrap; }
.t1 { left: 24%; top: 150px; } .t2 { left: 6%; top: 330px; transform: rotate(-24deg); } .t3 { left: 28%; top: 440px; transform: rotate(24deg); }
.scribble { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hex { position: absolute; width: 190px; height: 210px; background: #fff; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 600; padding: 20px; line-height: 1.3; }
.hex i { width: 38px; height: 38px; border-radius: 50%; background: var(--green); display: grid; place-items: center; margin-bottom: 10px; }
.hex i::after { content: ""; width: 14px; height: 8px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px,-2px); }
.h1x { left: 53%; top: 140px; } .h2x { left: 69%; top: 140px; } .h3x { left: 61%; top: 340px; }
.hand { position: absolute; right: 6%; bottom: 50px; font-family: var(--fc); font-size: 2rem; color: var(--navy); line-height: 1.15; }
.vs .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; }
.vs .knob { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #111;
    color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: 6px; pointer-events: none; }
.vs input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
@media (max-width: 860px) {
    .vs { height: 640px; } .vs .side { padding: 26px; } .tool { font-size: 1.05rem; padding: 12px 18px; }
    .t1 { left: 6%; top: 190px; } .t2 { left: 3%; top: 310px; } .t3 { left: 10%; top: 430px; }
    .hex { width: 130px; height: 145px; font-size: .78rem; padding: 12px; } .h1x { left: 52%; top: 200px; } .h2x { left: 72%; top: 200px; } .h3x { left: 62%; top: 340px; }
    .hex i { width: 28px; height: 28px; }
    .hand { font-size: 1.35rem; bottom: 30px; }
}

/* ---------- the flow (scroll-driven) ---------- */
.flow { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 30px; align-items: start; }
.flow .lbl { padding: 16px 20px; border-radius: 22px; transition: opacity .4s, background .4s; opacity: .28; margin-bottom: 150px; }
.flow .lbl.on { opacity: 1; background: #F3F0ED; }
.flow .lbl h3 { font-size: 1.9rem; font-weight: 700; }
.flow .lbl p { color: var(--soft); margin-top: 8px; }
.flow .left .lbl { text-align: right; } .flow .right .lbl:first-child { margin-top: 170px; }
.stagepanel { position: sticky; top: 110px; background: #F1F4FA; border-radius: 34px; padding: 30px; min-height: 520px; }
.lane { display: flex; align-items: center; gap: 10px; background: #DCE6F7; border-radius: 24px; padding: 14px; margin-bottom: 16px;
    opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.lane.on { opacity: 1; transform: none; }
.lane .ava { width: 64px; height: 64px; }
.lane .tick { position: absolute; right: -4px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: #22C55E; display: grid; place-items: center; }
.lane .tick::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }
.lane .doc { width: 64px; height: 64px; border-radius: 16px; background: #8DBBF5; position: relative; flex: none; }
.lane .doc::before { content: ""; position: absolute; left: 14px; right: 14px; top: 26px; height: 5px; border-radius: 3px; background: #4F86D6; box-shadow: 0 12px 0 #4F86D6; }
.lane .plus { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 1.5rem; flex: none; }
.lane .cap { margin-left: auto; font-weight: 700; color: var(--navy); font-size: .9rem; text-align: right; line-height: 1.3; }
.lane .arr { font-size: 1.4rem; color: var(--navy); }
.flow-mob { display: none; }
@media (max-width: 860px) {
    .flow { grid-template-columns: 1fr; } .flow .left, .flow .right { display: none; }
    .stagepanel { position: static; min-height: 0; padding: 18px; } .lane { opacity: 1; transform: none; } .lane .ava { width: 48px; height: 48px; }
    .flow-mob { display: grid; gap: 10px; margin-top: 16px; }
    .flow-mob div { background: #F3F0ED; border-radius: 18px; padding: 14px 18px; } .flow-mob b { font-family: var(--fh); font-size: 1.2rem; }
}

/* ---------- why cards (handwritten titles, a peeking mascot) ---------- */
.whyhead { max-width: 820px; margin-bottom: 70px; position: relative; }
.whyhead h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; margin-top: 8px; }
.whyhead p { color: var(--soft); margin-top: 14px; font-size: 1.05rem; }
.whycards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wcard { background: var(--sky2); border-radius: 30px; padding: 40px 36px 42px; min-height: 420px; display: flex; flex-direction: column; position: relative; }
.wcard .hw { font-family: var(--fc); font-size: 2.3rem; color: #1B2A4A; line-height: 1; flex: 1; font-weight: 600; }
.wcard h3 { font-size: clamp(1.7rem, 2.5vw, 2.3rem); font-weight: 700; }
.wcard p { color: #4A4A55; margin-top: 16px; font-size: 1.05rem; }
.peeker { position: absolute; right: 30px; top: -84px; width: 190px; height: 95px; animation: st-bob 4s ease-in-out infinite; pointer-events: none; }
@media (max-width: 860px) { .whycards { grid-template-columns: 1fr; } .wcard { min-height: 280px; } .peekhost { margin-top: 80px; } }

/* ---------- numbers, chips ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats.four { grid-template-columns: repeat(4, 1fr); }
body:not(.st-app) .stat { border-radius: 26px; padding: 34px 26px; background: var(--peach); }
body:not(.st-app) .stat .n { font-family: var(--fh); font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.stat .n small { font-size: .42em; margin-left: 4px; }
body:not(.st-app) .stat p { color: var(--soft); margin-top: 8px; }
body:not(.st-app) .stat:nth-child(4n+2) { background: var(--mint); }
body:not(.st-app) .stat:nth-child(4n+3) { background: var(--lav); }
body:not(.st-app) .stat:nth-child(4n+4) { background: var(--sky); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto; }
.chips span, .chips a { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .95rem; text-decoration: none; }
.chips a:hover { border-color: var(--green); }
@media (max-width: 860px) { .stats, .stats.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stats, .stats.four { grid-template-columns: 1fr; } }

/* ---------- plain cards and grids (used across inner pages) ---------- */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .grid3, .grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1.5px solid #EEE9E5; border-radius: 26px; padding: 26px; position: relative; }
.card.soft { background: #F6F4F2; border-color: transparent; }
.card.sky { background: var(--sky2); border-color: transparent; }
.card.peach { background: var(--peach); border-color: transparent; }
.card.mint { background: var(--mint); border-color: transparent; }
.card.lav { background: var(--lav); border-color: transparent; }
.card.purple { background: var(--purple); border-color: transparent; color: #fff; }
.card h3 { font-size: 1.45rem; font-weight: 700; }
.card p { color: var(--soft); margin-top: 8px; }
.card.purple p { color: #F3E9FB; }
a.card { text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; display: block; }
a.card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-s); }
.tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 11px;
    background: rgba(0,168,139,.1); color: var(--green); }
.tag.lilac { background: var(--lilac-bg); color: var(--lilac); } .tag.coral { background: #FFE9E9; color: #E04848; } .tag.dark { background: var(--ink); color: #fff; }

/* ---------- testimonials ---------- */
.tgrid { columns: 3 300px; column-gap: 16px; }
.tq { break-inside: avoid; background: #fff; border: 1.5px solid #EEE9E5; border-radius: 26px; padding: 26px; margin: 0 0 16px; display: block; }
.tq blockquote { margin: 12px 0 18px; font-size: 1.05rem; line-height: 1.55; }
.tq figcaption { display: flex; align-items: center; gap: 12px; }
.tq figcaption .ava { width: 46px; height: 46px; }
.tq figcaption b { display: block; line-height: 1.2; } .tq figcaption span { color: var(--soft); font-size: .9rem; }
.tq.hi { background: var(--purple); border-color: var(--purple); color: #fff; }
.tq.hi figcaption span { color: #EEDFFB; } .tq.hi .stars { color: #FFFFFF; }
.tq.big blockquote { font-family: var(--fh); font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.25; }
.rating { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 26px; margin: 34px auto 0; background: #fff;
    border: 1.5px solid #EEE9E5; border-radius: 999px; padding: 14px 28px; width: fit-content; max-width: 100%; font-weight: 600; }
.rating b { font-family: var(--fh); font-size: 1.3rem; }

/* ---------- dark sign-up / checkout block ---------- */
.signup { background: var(--ink); color: #fff; border-radius: 34px; padding: 56px 44px;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; position: relative; overflow: hidden; overflow: clip; }
.signup::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; right: -120px; top: -150px;
    background: radial-gradient(circle, rgba(0,168,139,.45), transparent 70%); pointer-events: none; }
.signup::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; left: -120px; bottom: -150px;
    background: radial-gradient(circle, rgba(169,131,207,.45), transparent 70%); pointer-events: none; }
.signup .kicker { color: #FF9A9A; }
.signup h2 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 700; margin: 10px 0 16px; }
.signup .lead { color: #C9C9D2; font-size: 1.05rem; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; }
.ticks li { padding: 6px 0 6px 30px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 12px; height: 7px; border-left: 2.5px solid var(--green);
    border-bottom: 2.5px solid var(--green); transform: rotate(-45deg); }
.signup .ticks li { color: #E6E6EC; }
.fcard { background: #fff; color: var(--ink); border-radius: 24px; padding: 28px; position: relative; z-index: 1; }
.fcard h3 { font-size: 1.6rem; font-weight: 700; }
.fcard .sub { color: var(--soft); font-size: .92rem; margin: 4px 0 14px; }
.st label.fl, .fcard label { display: block; font-size: .85rem; font-weight: 600; color: #3A3A44; margin: 12px 0 6px; }
.st .in, .fcard input[type=text], .fcard input[type=email], .fcard input[type=tel], .fcard input[type=password], .fcard input:not([type]), .fcard select, .fcard textarea {
    width: 100%; padding: .85rem 1rem; font: inherit; color: var(--ink); background: #FBF8F6; border: 1.5px solid #E6DDD6; border-radius: 14px; }
.st .in:focus, .fcard input:focus, .fcard select:focus, .fcard textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,168,139,.15); background: #fff; }
.fcard button[type=submit] { width: 100%; margin-top: 18px; }
.fine { color: #8A8A94; font-size: .78rem; margin-top: 12px; text-align: center; }
.alert { display: none; margin-top: 12px; padding: .7rem .9rem; border-radius: 12px; font-size: .88rem; background: #FFF0F0; color: #C0392B; border: 1px solid #F5C6C6; }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; padding: 36px 20px; border-radius: 26px; } .fcard { padding: 22px; } }

/* ---------- checkout (pricing card + form, used with app.js) ---------- */
.pricing-badge { display: inline-block; background: var(--green); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .04em; border-radius: 999px; padding: 5px 14px; }
.pricing-title { font-size: 1.5rem; font-weight: 700; margin-top: 12px; }
.pricebox2 { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 24px; margin-top: 22px; position: relative; z-index: 1; }
.pp-plan { color: #C9C9D2; font-weight: 600; margin-top: 8px; }
.pp-price { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.pp-now { font-family: var(--fh); font-size: 3.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1.05; }
.pp-was { color: #8A8A94; text-decoration: line-through; font-size: 1.2rem; font-weight: 600; }
.pp-save { display: flex; gap: 12px; align-items: center; margin-top: 10px; background: rgba(0,168,139,.16); border-radius: 16px; padding: 10px 14px; }
.pp-save-pct { flex: none; background: var(--green); color: #fff; font-weight: 800; border-radius: 10px; padding: 3px 10px; font-size: .85rem; }
.pp-save-txt { font-size: .9rem; color: #E6E6EC; } .pp-save-txt small { display: block; color: #A8A8B3; }
.pp-tax { color: #A8A8B3; font-size: .88rem; margin-top: 6px; }
.pp-terms { list-style: none; padding: 0; margin: 12px 0 0; font-size: .9rem; color: #C9C9D2; }
.pp-terms li { padding: 3px 0 3px 20px; position: relative; } .pp-terms li::before { content: "\2022"; position: absolute; left: 6px; color: var(--green); }
.pricing-features h4 { font-family: var(--fb); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #C9C9D2; margin: 26px 0 4px; }
.form-group { margin-top: 2px; }
.checkbox-label { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; line-height: 1.45; margin-top: 16px !important; cursor: pointer; }
.checkbox-label input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.checkbox-label a { color: var(--green-d); }
.pay-note { display: flex; gap: 10px; align-items: flex-start; background: #FFF0F0; border: 1px solid #F5C6C6; color: #A8322A; border-radius: 14px; padding: 10px 12px; font-size: .86rem; margin-top: 14px; }
.pay-note svg { flex: none; margin-top: 2px; }
.secure-badge { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--soft); font-size: .85rem; margin-top: 12px; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font-size: .8rem; color: var(--soft); }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { width: 14px; height: 14px; }
.trust-methods { text-align: center; color: var(--mute); font-size: .78rem; margin-top: 8px; }
.wa-help { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; padding: 11px 14px; border-radius: 16px;
    background: #25D366; color: #06301a !important; font-weight: 700; text-decoration: none; font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { background: #fff; border: 1.5px solid #EEE9E5; border-radius: 22px; margin-bottom: 12px; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; font-family: var(--fh); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg2); display: grid; place-items: center; font-size: 1.3rem; font-weight: 600; transition: transform .25s, background .25s; }
.faq details[open] summary::after { content: "\2013"; background: var(--green); color: #fff; }
.faq details p { padding: 0 24px 22px; color: var(--soft); }

/* ---------- final CTA ---------- */
.final { text-align: center; padding: 110px 0 60px; position: relative; }
.final h2 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); font-weight: 700; margin: 12px auto 16px; max-width: 920px; }
.final p { color: var(--soft); max-width: 660px; margin: 0 auto 28px; font-size: 1.05rem; }
.final .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.final .price { font-family: var(--fh); font-weight: 800; color: var(--ink); }
.final .spark { opacity: .9; }

/* ---------- footer on a purple hill ---------- */
.st-foot { position: relative; margin-top: 60px; padding: 150px 0 34px; color: #fff; overflow: hidden;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C300 40 520 150 820 90 C1120 30 1330 120 1600 60 L1600 200 L0 200 Z' fill='%23A983CF'/%3E%3C/svg%3E") top center / 100% 140px no-repeat,
        linear-gradient(var(--bg), var(--bg)) top / 100% 139px no-repeat, var(--purple); }
.st-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 139px; bottom: 0; pointer-events: none;
    background: repeating-linear-gradient(125deg, rgba(255,255,255,.06) 0 26px, transparent 26px 60px); }
.st-foot .wrap { position: relative; }
.st-foot .fmascot { position: absolute; right: 6%; top: -158px; width: 150px; height: 150px; animation: st-peek 5s ease-in-out infinite; }
.st-foot .fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.st-foot .st-logo { color: #fff; } .st-foot .st-logo small { color: #EEDFFB; }
.st-foot .st-logo i { background: #fff; color: var(--purple3); }
.st-foot p { color: #F3E9FB; margin-top: 14px; max-width: 320px; font-size: .95rem; }
.st-foot h4 { font-family: var(--fb); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #EEDFFB; margin-bottom: 12px; }
.st-foot ul { list-style: none; margin: 0; padding: 0; }
.st-foot li { margin: 7px 0; }
.st-foot li a { text-decoration: none; color: #fff; opacity: .92; }
.st-foot li a:hover { opacity: 1; text-decoration: underline; }
.st-foot .fbar { border-top: 1px solid rgba(255,255,255,.25); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px;
    justify-content: space-between; font-size: .85rem; color: #F3E9FB; }
@media (max-width: 860px) { .st-foot .fgrid { grid-template-columns: 1fr 1fr; } .st-foot .fmascot { width: 104px; height: 104px; top: -120px; } }

/* ---------- side pane (tool previews, help) ---------- */
.st-veil { position: fixed; inset: 0; background: rgba(30,15,40,.35); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 90; }
.st-veil.on { opacity: 1; pointer-events: auto; }
.st-pane { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(520px, calc(100% - 24px)); background: var(--bg); border-radius: 28px;
    box-shadow: 0 30px 80px -30px rgba(40,10,60,.6); z-index: 91; transform: translateX(110%); transition: transform .35s ease; overflow-y: auto; }
.st-pane.on { transform: none; }
.st-pane .ph { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 1; }
.st-pane .ph b { font-family: var(--fh); font-size: 1.1rem; }
.st-pane .ph .x { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; font-size: 1.4rem; cursor: pointer; }
.st-pane .pb { padding: 22px 24px 30px; }
.st-pane h2 { font-size: 2rem; font-weight: 700; }
.st-pane .lede { color: var(--soft); margin: 10px 0 8px; }
.st-pane .h { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 22px 0 8px; }
.st-pane ul, .st-pane ol { margin: 0; padding-left: 20px; } .st-pane li { margin: 6px 0; }
.st-pane .demo { background: #fff; border: 1.5px solid #EEE9E5; border-radius: 20px; padding: 18px; }
.st-pane .demo .q { font-family: var(--fh); font-weight: 700; font-size: 1.15rem; margin: 6px 0 12px; letter-spacing: -.02em; }
.st-pane .demo .a { margin-top: 12px; color: #3A3A44; font-size: .95rem; }
.st-pane .rate { display: flex; gap: 8px; margin-top: 12px; } .st-pane .rate span { flex: 1; text-align: center; background: #F2F0EE; border-radius: 12px; padding: 8px; font-weight: 600; font-size: .9rem; opacity: .6; }
.st-pane .cta { margin-top: 24px; width: 100%; }

/* ---------- scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .st *, .st *::before, .st *::after { animation: none !important; transition: none !important; }
    .lane, .rv { opacity: 1; transform: none; }
}

/* slim footer for app pages */
.st-foot.slim { padding-top: 150px; margin-top: 40px; }
.st-foot.slim .fbar { margin-top: 0; border-top: 0; padding-top: 0; }
.st-foot .fbar a { color: #fff; }

/* auth and status pages: a card floating over the mountains */
.st-backdrop { position: fixed; left: 0; right: 0; bottom: 0; height: 48vh; min-height: 260px; z-index: 0; pointer-events: none; overflow: hidden; }
.st-backdrop .wave { bottom: -70px; height: 42%; }
.st-backdrop .cl1 { top: 10%; }
body.st-auth > :not(.st-backdrop):not(.st-top):not(script):not(style) { position: relative; z-index: 1; }
body.st-auth { display: block !important; min-height: 100vh; }
body.st .login-bg, body.st .orb { display: none !important; }
body.st-auth .btn-login, body.st-auth form button[type=submit]:not(.btn) { background: var(--green) !important; color: #fff !important; border: 0 !important;
    border-radius: var(--r-btn) !important; font: 600 1rem/1.75 var(--fb) !important; padding: .8rem 1.4rem !important; box-shadow: none !important; }
body.st-auth .btn-login:hover, body.st-auth form button[type=submit]:not(.btn):hover { background: var(--green-d) !important; }
body.st-auth .login-card, body.st-auth .card { border-radius: 30px !important; box-shadow: var(--shadow) !important; border: 0 !important; background: #fff !important; }
body.st-auth .login-title, body.st-auth .card h1, body.st-auth .card h2 { font-family: var(--fh); letter-spacing: -.04em; }
body.st-auth a:not(.btn):not(.st-logo) { color: var(--green-d); }
body.st-auth > .card, body.st-auth > .wrap > .card { margin: 70px auto 40px !important; }
body.st .login-logo { display: none !important; }
body.st .peek-card { position: absolute; left: 50%; top: -78px; width: 160px; height: 80px; margin-left: -80px; animation: st-bob 4s ease-in-out infinite; pointer-events: none; }
body.st .login-card, body.st-auth .card { overflow: visible !important; }
body.st .policy-title, body.st .page-title { font-family: var(--fh); font-size: clamp(2.4rem, 5.4vw, 3.8rem) !important; letter-spacing: -.045em; line-height: 1.02; margin-bottom: 8px; }
body.st .policy-container, body.st .page-container { padding-top: 60px !important; }
body.st .policy-section h2 { font-family: var(--fh); letter-spacing: -.03em; }
body.st .highlight-box { border-radius: 18px; }

/* app pages: their own header, restyled as the floating white nav */
body.st-app > header.top, body.st-app > header:first-of-type:not(.st-hero) {
    background: #fff !important; border: 0 !important; border-radius: 24px; box-shadow: 0 10px 30px -18px rgba(40,20,10,.35) !important;
    margin: 12px 16px 0 !important; backdrop-filter: none !important; }
body.st-app > header.top { position: sticky !important; top: 12px !important; z-index: 40 !important; }
body.st-app header.top .logo, body.st-app .brand, body.st-app .brandname { font-family: var(--fh) !important; font-weight: 800 !important; letter-spacing: -.03em; color: var(--ink) !important; display: inline-flex; align-items: center; gap: 10px; }
body.st-app header.top .logo::before { content: "S"; width: 30px; height: 30px; border-radius: 10px; flex: none; display: inline-grid; place-items: center;
    background: linear-gradient(135deg, var(--green), #34D399); color: #fff; font-size: .95rem; }
body.st-app .mark { background: linear-gradient(135deg, var(--green), #34D399) !important; color: #fff !important; border-radius: 10px !important; }
body.st-app header.top .toplinks a, body.st-app header.top .toplinks button { border-radius: 14px; }
body.st-app header.top .toplinks .cta { background: var(--ink) !important; color: #fff !important; border-radius: 14px; }
body.st-app h1, body.st-app h2, body.st-app h3 { font-family: var(--fh); letter-spacing: -.035em; }
.st-corner { position: fixed; right: 18px; bottom: 14px; width: 64px; height: 64px; z-index: 30; pointer-events: none; animation: st-peek 5s ease-in-out infinite; opacity: .95; }
@media (max-width: 700px) { .st-corner { display: none; } }
@media print { .st-corner, .st-top, .st-foot { display: none !important; } }

/* ---------- right-hand drawers with edge tabs ---------- */
.st-dveil { position: fixed; inset: 0; background: rgba(30,15,40,.28); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 88; }
.st-dveil.on { opacity: 1; pointer-events: auto; }
.st-drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(600px, calc(100% - 20px)); background: var(--bg); border-radius: 28px;
    box-shadow: 0 30px 80px -30px rgba(40,10,60,.6); z-index: 89; transform: translateX(calc(100% + 30px)); transition: transform .38s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto; overscroll-behavior: contain; }
.st-drawer.on { transform: none; }
.st-drawer .dh { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; padding: 14px 16px 14px 22px; background: var(--bg); border-bottom: 1px solid var(--line); }
.st-drawer .dh b { font-family: var(--fh); font-size: 1.15rem; letter-spacing: -.02em; }
.st-drawer .dh .x { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow-s); }
.st-drawer > section, .st-drawer > section.block { padding: 16px 14px 24px !important; max-width: none; }
.st-drawer .signup { grid-template-columns: 1fr !important; padding: 30px 20px !important; gap: 24px; border-radius: 24px; }
.st-drawer .signup h2 { font-size: 2.2rem; }
.st-drawer .founder { grid-template-columns: 1fr; padding: 24px; }
.st-drawer .head { margin-bottom: 20px; } .st-drawer .head h2 { font-size: 2rem; }
.st-tabs { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 87; display: flex; flex-direction: column; gap: 8px; }
.st-tab { border: 0; cursor: pointer; background: var(--ink); color: #fff; border-radius: 16px 0 0 16px; padding: 16px 10px 16px 12px;
    font: 700 .9rem var(--fb); letter-spacing: .02em; box-shadow: -8px 10px 24px -14px rgba(40,10,60,.6); transition: padding .2s, background .2s; }
.st-tab span { writing-mode: vertical-rl; transform: rotate(180deg); display: block; white-space: nowrap; }
.st-tab:hover { padding-right: 16px; }
.st-tab.green { background: var(--green); } .st-tab.coral { background: var(--coral); } .st-tab.lilac { background: var(--purple); }
.st-tab.on { background: var(--ink); }
html.st-locked, html.st-locked body { overflow: hidden; }
@media (max-width: 700px) { .st-drawer { top: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; } .st-tab { padding: 12px 7px 12px 9px; font-size: .78rem; } }
@media print { .st-tabs, .st-dveil { display: none !important; } }
/* drawer sections stay out of the page flow until the script moves them (no flash on load) */
body > [data-drawer] { display: none; }
.st-drawer .signup > form { order: -1; }

/* ---------- announcement pill (top of the home page) ---------- */
.st-announce { display: flex; justify-content: center; padding: 14px 16px 0; }
.st-announce a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; text-decoration: none; background: var(--coral); color: #fff;
    font-weight: 700; font-size: .95rem; letter-spacing: -.01em; border-radius: 999px; padding: 8px 10px 8px 16px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,110,110,.35), 0 14px 30px -14px rgba(224,72,72,.7); transition: transform .15s; }
.st-announce a:hover { transform: translateY(-1px); }
.st-announce .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: st-pulse 1.6s ease-out infinite; }
.st-announce s { opacity: .75; font-weight: 600; }
.st-announce .go { flex: none; background: #fff; color: #E04848; border-radius: 999px; padding: 3px 12px; font-size: .85rem; }
.st-announce .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes st-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
@media (max-width: 600px) { .st-announce a { font-size: .8rem; } .st-announce .long { display: none; }
    /* phones: keep the full class name in view, drop the struck price */
    .st-announce .txt { white-space: normal; line-height: 1.3; } .st-announce .offerbit s { display: none; } }

/* ---------- "Master Claude" highlighted in every menu ---------- */
.st-links a[href*="claude-code-masterclass"] { color: #E04848 !important; font-weight: 700; background: #FFE9E9; border-radius: 999px; padding: 4px 12px; margin: -4px 0; }
.st-links a[href*="claude-code-masterclass"]::after { content: "BONUS"; margin-left: 6px; font-size: .62rem; letter-spacing: .08em; background: var(--coral); color: #fff; border-radius: 999px; padding: 2px 6px; vertical-align: 2px; }
.st-foot a[href*="claude-code-masterclass"] { font-weight: 700; }
@media (max-width: 1080px) { .st-links a[href*="claude-code-masterclass"] { margin: 0; padding: 12px 14px; border-radius: 12px; } }
#register { scroll-margin-top: 90px; }
@media (min-width: 861px) { .signup > form.fcard { position: sticky; top: 100px; } }

/* compact hero: heading, buttons and the floating cards all on the first screen */
.st-hero { padding-top: 26px; }
.st-hero h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); margin: 8px auto 12px; max-width: 1000px; }
.st-hero .sub { font-size: clamp(1rem, 1.6vw, 1.1rem); margin-bottom: 20px; max-width: 760px; }
.st-hero .ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.st-hero .ctas .btn { min-width: 250px; }
.st-hero .coursename { margin-top: 10px; }
.st-hero .scene { margin-top: 14px; }
.st-announce { padding-top: 10px; }
.st-announce + .st-top .st-nav { margin-top: 10px; }
.ticker { margin-bottom: 14px !important; }

/* compact checkout form: every field, the pay button and WhatsApp fit on one screen */
.signup > form.fcard { padding: 22px 24px; }
.signup > form.fcard h3 { font-size: 1.4rem; }
.signup > form.fcard .sub { margin: 2px 0 6px; font-size: .88rem; }
.signup > form.fcard label { margin: 8px 0 4px; font-size: .82rem; }
.signup > form.fcard input[type=text], .signup > form.fcard input[type=email], .signup > form.fcard input[type=tel] { padding: .62rem .9rem; border-radius: 12px; }
.signup > form.fcard .checkbox-label { margin-top: 10px !important; font-size: .86rem; }
.signup > form.fcard .pay-note { margin-top: 10px; padding: 8px 12px; font-size: .8rem; }
.signup > form.fcard button[type=submit] { margin-top: 12px; padding: .7rem 1.2rem; }
.signup > form.fcard .secure-badge { margin-top: 8px; font-size: .8rem; }
.signup > form.fcard .trust-row { margin-top: 4px; font-size: .74rem; }
.signup > form.fcard .trust-methods { margin-top: 4px; font-size: .72rem; }
.signup > form.fcard .wa-help { margin-top: 10px; padding: 9px 14px; font-size: .9rem; }
@media (min-width: 861px) { .signup > form.fcard { position: sticky; top: 84px; } }
#register { scroll-margin-top: 76px; }
section.block#register { padding-top: 26px; }
.signup > form.fcard { padding: 18px 22px; }
.signup > form.fcard .sub { display: none; }

/* links land just under the floating menu, never behind it */
body.st [id] { scroll-margin-top: 92px; }
body.st section.block[id] { scroll-margin-top: 10px; }   /* the section's own top padding clears the menu */
body.st #register { scroll-margin-top: 76px; }

/* three more menu items as coloured pills, readable from across the room */
.st-links a[href$="#plan"], .st-links a[href*="free-chapter"], .st-links a[href*="genai-interview-questions"] {
    font-weight: 700; border-radius: 999px; padding: 4px 12px; margin: -4px 0; }
.st-links a[href$="#plan"] { color: #007A65 !important; background: #D6F5EC; }
.st-links a[href*="free-chapter"] { color: #7A3FA6 !important; background: #EFE4F7; }
.st-links a[href*="genai-interview-questions"] { color: #1D5FC4 !important; background: #DCE8FA; }
.st-links { gap: 14px; }
@media (max-width: 1080px) {
    .st-links a[href$="#plan"], .st-links a[href*="free-chapter"], .st-links a[href*="genai-interview-questions"] { margin: 2px 0; padding: 12px 14px; border-radius: 12px; }
}
.st-links a[href$="#curriculum"], .st-links a[href$="#faq"] { font-weight: 700; border-radius: 999px; padding: 4px 12px; margin: -4px 0; }
.st-links a[href$="#curriculum"] { color: #B8266A !important; background: #FDE3EE; }
.st-links a[href$="#faq"] { color: #00795F !important; background: #DDF5EE; }
@media (max-width: 1080px) { .st-links a[href$="#curriculum"], .st-links a[href$="#faq"] { margin: 2px 0; padding: 12px 14px; border-radius: 12px; } }

/* ---------- checkout section: both sides, whole thing, one screen ---------- */
@media (min-width: 861px) {
    .signup { padding: 30px 34px; gap: 30px; align-items: stretch; }
    .signup > div:first-child { display: flex; flex-direction: column; }
    .signup .kicker { font-size: 1.6rem; }
    .signup h2 { font-size: clamp(1.9rem, 2.9vw, 2.6rem); margin: 6px 0 8px; }
    .signup .lead { font-size: .93rem; line-height: 1.5; }
    .signup .pricebox2 { padding: 16px 18px; margin-top: 14px; flex: 1; }
    .signup .pricing-title { font-size: 1.2rem; margin-top: 8px; }
    .signup .pp-plan { display: none; }
    .signup .pp-price { margin-top: 2px; } .signup .pp-now { font-size: 2.6rem; }
    .signup .pp-save { margin-top: 6px; padding: 6px 10px; } .signup .pp-save-txt { font-size: .8rem; }
    .signup .pp-tax { margin-top: 4px; font-size: .8rem; }
    .signup .pp-terms { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-size: .78rem; }
    .signup .pp-terms li { padding: 0 0 0 14px; }
    .signup .pricing-features h4 { margin: 12px 0 4px; }
    .signup .pricing-features .ticks, .signup .pricebox2 > .ticks { columns: 2; column-gap: 18px; margin-top: 4px; }
    .signup .pricing-features .ticks li, .signup .pricebox2 > .ticks li { break-inside: avoid; font-size: .8rem; line-height: 1.35; padding: 3px 0 3px 22px; }
    .signup .ticks li::before { top: 8px; width: 10px; height: 6px; }
    .signup .next { margin-top: 10px; padding: 12px 16px; } .signup .next p { font-size: .85rem; }

    .signup > form.fcard { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-content: start; padding: 20px 22px; }
    .signup > form.fcard > * { grid-column: 1 / -1; }
    .signup > form.fcard > .form-group:nth-of-type(1), .signup > form.fcard > .form-group:nth-of-type(2) { grid-column: auto; }
    .signup > form.fcard h3 { font-size: 1.35rem; margin-bottom: 2px; }
    .signup > form.fcard .pay-note { font-size: .76rem; padding: 7px 10px; }
    .signup > form.fcard .trust-methods { display: none; }
    .signup > form.fcard .trust-row { margin-top: 2px; }
}
body.st #register { scroll-margin-top: 80px; }
section.block#register { padding-top: 8px; }
@media (min-width: 861px) {
    .signup .pricebox2 { flex: none; }
    .signup .pricing-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .signup .pricing-title { margin-top: 0; }
    .signup .pp-save { display: none; }
    .signup .pp-terms { font-size: .74rem; gap: 0 12px; }
    .signup .pricing-features { border-top: 1px dashed rgba(255,255,255,.18); margin-top: 10px; padding-top: 6px; }
    .signup .pricing-features h4 { display: none; }
}
@media (min-width: 861px) {
    .signup { padding: 22px 30px; }
    .signup .lead { font-size: .88rem; line-height: 1.42; }
    .signup .pricebox2 { padding: 14px 16px; margin-top: 12px; }
    .signup .pricing-features .ticks li, .signup .pricebox2 > .ticks li { line-height: 1.3; padding: 2px 0 2px 20px; }
    .signup .ticks li::before { top: 6px; }
}
/* Curriculum and FAQ: plain black, bold, no pill */
.st-links a[href$="#curriculum"], .st-links a[href$="#faq"] { color: var(--ink) !important; background: none !important; font-weight: 700; padding: 4px 4px; }

/* ---------- "All included" panel: compact, colourful, opens tab by tab as you scroll ---------- */
.acc .panel:nth-child(6n+1) { --acc: #FF6E6E; --acc-bg: #FFEAEA; }
.acc .panel:nth-child(6n+2) { --acc: #00A88B; --acc-bg: #DDF5EE; }
.acc .panel:nth-child(6n+3) { --acc: #945BB8; --acc-bg: #EFE4F7; }
.acc .panel:nth-child(6n+4) { --acc: #2F6FD6; --acc-bg: #DCE8FA; }
.acc .panel:nth-child(6n+5) { --acc: #E0457B; --acc-bg: #FDE3EE; }
.acc .panel:nth-child(6n+6) { --acc: #00A88B; --acc-bg: #DDF5EE; }
.acc .panel.open { box-shadow: inset 0 6px 0 var(--acc); }
.acc .panel .inner { align-items: center; }
.ptext { justify-content: center; }
.ptext h3 { color: var(--ink); }
.ptext .free { display: inline-block; align-self: flex-start; color: var(--acc); background: var(--acc-bg); border-radius: 999px; padding: 4px 14px; font-size: .95rem; font-weight: 700; margin: 12px 0 14px; }
.ptext p { flex: none; }
.ptext .btn { background: var(--acc); color: #fff !important; border-color: var(--acc); }
.acc .panel .mock .mh { border-top: 5px solid var(--acc); }
.acc .panel .stg { background: var(--acc-bg); } .panel .stg i { background: var(--acc); }
.acc .panel .mc.done { background: var(--acc); border-color: var(--acc); }
.acc .panel .mlist li::before { box-shadow: inset 0 0 0 5px var(--acc-bg), inset 0 0 0 9px var(--acc); background: var(--acc-bg); }
.acc-steps { display: flex; gap: 8px; margin-top: 16px; }
.acc-steps i { height: 6px; flex: 1; border-radius: 3px; background: rgba(255,255,255,.3); transition: background .3s; }
.acc-steps i.on { background: #fff; }
@media (min-width: 861px) {
    .products.compact { padding: 30px 34px 26px; }
    .products.compact h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin: 6px 0 8px; }
    .products.compact > p { font-size: .98rem; }
    .products.compact .acc { margin-top: 20px; min-height: 0; height: clamp(340px, calc(100vh - 330px), 470px); }
    .products.compact .ptext h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
    .products.compact .ptext p { font-size: .98rem; }
    .products.compact .mock .mh { padding: 14px 16px; }
    /* pinned while its tabs open one by one */
    .scrolly .products { position: sticky; top: 84px; }
}

/* ---------- the payment pop-up: wide, white, two outlined cards side by side ---------- */
.st-drawer.wide { width: min(1160px, calc(100% - 20px)); background: #fff; }
.st-drawer.wide .dh { background: #fff; }
.st-drawer.wide > section, .st-drawer.wide > section.block { padding: 18px 22px 26px !important; }
.st-drawer.wide .signup { background: #fff !important; color: var(--ink); padding: 0 !important; gap: 22px; border-radius: 0; overflow: visible; }
.st-drawer.wide .signup::before, .st-drawer.wide .signup::after { display: none; }
@media (min-width: 900px) {
    .st-drawer.wide .signup { grid-template-columns: 1.08fr .92fr !important; align-items: stretch; }
    .st-drawer.wide .signup > form { order: 0; }
}
.st-drawer.wide .signup > div:first-child, .st-drawer.wide .signup > form.fcard {
    border: 2px solid #111; border-radius: 24px; box-shadow: 6px 6px 0 #111; padding: 22px 24px !important; }
.st-drawer.wide .signup > div:first-child { background: linear-gradient(160deg, #FFF3EF 0%, #FBF0F6 45%, #F3ECFC 100%); }
.st-drawer.wide .signup > form.fcard { background: #fff; }
.st-drawer.wide .signup .kicker { color: #E0457B; }
.st-drawer.wide .signup h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); background: linear-gradient(90deg, #FF6E6E 0%, #E0457B 45%, #945BB8 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #E0457B; padding-bottom: 4px; }
.st-drawer.wide .signup .lead { color: #4A4A55; }
.st-drawer.wide .pricebox2 { background: #fff; border: 1.5px solid #EADFF3; border-radius: 20px; }
.st-drawer.wide .pricing-title { color: var(--ink); }
.st-drawer.wide .pp-now { color: var(--ink); } .st-drawer.wide .pp-was { color: #9A9AA4; }
.st-drawer.wide .pp-tax, .st-drawer.wide .pp-terms, .st-drawer.wide .pp-plan { color: var(--soft); }
.st-drawer.wide .pp-terms li::before { color: #E0457B; }
.st-drawer.wide .pricing-features { border-top-color: #EADFF3; }
.st-drawer.wide .signup .ticks li { color: var(--ink); }
.st-drawer.wide .signup .ticks li:nth-child(4n+1)::before { border-color: #00A88B; }
.st-drawer.wide .signup .ticks li:nth-child(4n+2)::before { border-color: #E0457B; }
.st-drawer.wide .signup .ticks li:nth-child(4n+3)::before { border-color: #945BB8; }
.st-drawer.wide .signup .ticks li:nth-child(4n+4)::before { border-color: #2F6FD6; }
.st-drawer.wide .next { background: #F3ECFC; border: 0; } .st-drawer.wide .next h4 { color: #945BB8; } .st-drawer.wide .next p { color: #4A4A55; }

/* Log in: its own colour on every page */
.st-acts a[href$="login.html"], .st-acts a[href$="login"] { background: #2F6FD6; border-color: #2F6FD6; color: #fff !important; }
.st-acts a[href$="login.html"]:hover, .st-acts a[href$="login"]:hover { background: #2458B0; border-color: #2458B0; }

/* a real screen of the tool, in a colourful frame that matches its tab */
.shot { margin: 0; align-self: center; border-radius: 22px; padding: 14px 14px 16px; position: relative;
    background: linear-gradient(145deg, var(--acc-bg, #EFE4F7) 0%, #fff 55%, var(--acc-bg, #EFE4F7) 100%);
    box-shadow: inset 0 0 0 2px var(--acc, #945BB8); transform: rotate(-1.2deg); }
.shot .bar { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 12px 12px 0 0; padding: 8px 12px;
    border: 1.5px solid #EEE9E5; border-bottom: 0; }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF6E6E; } .shot .bar i:nth-child(2) { background: #FFB36B; } .shot .bar i:nth-child(3) { background: #00A88B; }
.shot .bar span { margin-left: 8px; font-size: .72rem; color: var(--mute); background: #F6F4F2; border-radius: 999px; padding: 2px 10px; }
.shot img { display: block; width: 100%; height: auto; border: 1.5px solid #EEE9E5; border-radius: 0 0 12px 12px;
    max-height: calc(100% - 40px); object-fit: cover; object-position: top; background: #fff; }
.acc .panel.open .shot { animation: shotin .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes shotin { from { opacity: 0; transform: rotate(-4deg) translateY(18px); } to { opacity: 1; transform: rotate(-1.2deg); } }
@media (min-width: 861px) {
    .products.compact .shot img { max-height: clamp(220px, calc(100vh - 470px), 330px); }
}
.st-drawer.wide .dh { padding: 8px 12px 8px 22px; }
@media (min-width: 900px) {
    .st-drawer.wide { overflow: hidden; }
    .st-drawer.wide > section, .st-drawer.wide > section.block { padding: 14px 22px 22px !important; }
}
@media (min-width: 861px) {
    .products.compact .panel { flex-basis: 62px; }
    .products.compact .panel .vlabel { font-size: 1.3rem; }
    .products.compact .panel .inner { grid-template-columns: 1.5fr 1fr; gap: 18px; padding: 16px 18px; }
    .products.compact .shot img { max-height: clamp(240px, calc(100vh - 400px), 420px); }
    .products.compact .ptext { padding: 8px 4px; }
    .products.compact .ptext p { font-size: .92rem; line-height: 1.5; }
}

/* ---------- payment pop-up: a colourful price card ---------- */
.st-drawer.wide .pp-now { background: linear-gradient(90deg, #FF6E6E 0%, #E0457B 45%, #945BB8 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #E0457B; }
.st-drawer.wide .pp-was { color: #E04848; text-decoration-color: #E04848; opacity: .75; }
.st-drawer.wide .pp-tax { display: inline-block; background: #DDF5EE; color: #007A65; font-weight: 700; border-radius: 999px; padding: 2px 10px; font-size: .74rem; }
.st-drawer.wide .pp-terms { gap: 6px !important; margin-top: 8px; }
.st-drawer.wide .pp-terms li { padding: 3px 10px !important; border-radius: 999px; font-weight: 600; font-size: .72rem; }
.st-drawer.wide .pp-terms li::before { display: none; }
.st-drawer.wide .pp-terms li:nth-child(1) { background: #FFEAEA; color: #C0392B; }
.st-drawer.wide .pp-terms li:nth-child(2) { background: #EFE4F7; color: #7A3FA6; }
.st-drawer.wide .pp-terms li:nth-child(3) { background: #DCE8FA; color: #1D5FC4; }
.st-drawer.wide .pricing-features .ticks { columns: auto !important; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-drawer.wide .pricing-features .ticks li { padding: 6px 10px 6px 28px !important; border-radius: 12px; border-left: 4px solid; line-height: 1.3; }
.st-drawer.wide .pricing-features .ticks li::before { left: 10px; top: 11px !important; }
.st-drawer.wide .pricing-features .ticks li:nth-child(4n+1) { background: #E8F8F3; border-color: #00A88B; }
.st-drawer.wide .pricing-features .ticks li:nth-child(4n+2) { background: #FDEBF2; border-color: #E0457B; }
.st-drawer.wide .pricing-features .ticks li:nth-child(4n+3) { background: #F3EBFA; border-color: #945BB8; }
.st-drawer.wide .pricing-features .ticks li:nth-child(4n+4) { background: #E8F0FC; border-color: #2F6FD6; }
.st-drawer.wide .pricing-features .ticks li b { color: #E0457B; }

/* the price is always plain black */
.st-drawer.wide .pp-now { background: none !important; -webkit-text-fill-color: #111 !important; color: #111 !important; }

/* ---------- phone only: tighter top gaps, headings that wrap cleanly ---------- */
@media (max-width: 700px) {
    body.st .policy-container, body.st .page-container { padding-top: 26px !important; }
    body.st .policy-title, body.st .page-title { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
    body.st-auth .login-card, body.st-auth > .card, body.st-auth > .wrap > .card { margin-top: 40px !important; }
    body.st-auth .st-backdrop { height: 42vh; }
    section.block { padding-top: 56px; }
    .head { margin-bottom: 26px; }
    .st-foot .fgrid { gap: 22px; }
}
/* 14-Day Plan and Interview Q&A: plain bold black, like Curriculum and FAQ */
.st-links a[href$="#plan"], .st-links a[href*="genai-interview-questions"] { color: var(--ink) !important; background: none !important; font-weight: 700; padding: 4px 4px; }

/* ---------- code blocks read as a console again (light theme kept everywhere else) ---------- */
body.st .codewrap { border-color: #23263A; border-radius: 14px; }
body.st .codewrap pre, body.st pre.cmd { background: #14161F; color: #D8DEE9; }
body.st .codebar { background: #1D2030; }
body.st .codebar .cap { color: #B9BFD4; }
body.st .codebar .lang { background: #FF6E6E; color: #fff; }
body.st .codebar button, body.st .codebar .copy { background: transparent; color: #D8DEE9; border: 1px solid #3A3F57; border-radius: 10px; }
body.st .codebar button:hover, body.st .codebar .copy:hover { background: #262A41; }

/* the student area sits on white; the marketing pages keep the warm off-white */
body.st-app { background: #FFFFFF; }

/* announcement bar: dark, so it carries across the room */
.st-announce a { background: #2F6FD6; color: #fff;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(47,111,214,.30), 0 16px 32px -18px rgba(31,78,160,.8);
    font-size: 1rem; padding: 10px 12px 10px 18px; }
.st-announce a:hover { filter: brightness(1.06); }
.st-announce .dot { background: #fff; }
.st-announce s { color: rgba(255,255,255,.72); opacity: 1; }
.st-announce .go { background: #fff; color: #1F4FA0; font-weight: 800; }
.st-announce .txt b, .st-announce .txt strong { color: #fff; }
.st-announce .offerbit { color: #fff; font-weight: 800; }

/* Offer box on the free pages the ads send people to: the two paid classes, side by side. */
.offer2 { max-width: 980px; margin: 28px auto; padding: 22px; border-radius: 26px; background: #fff;
    border: 1px solid #EFE7E1; box-shadow: 0 24px 50px -34px rgba(60,30,20,.45); text-align: left; }
.offer2 .o2head { text-align: center; margin-bottom: 16px; }
.offer2 .o2head b { display: block; font-family: var(--fh, inherit); font-size: 1.35rem; letter-spacing: -.02em; color: #111; }
.offer2 .o2head span { display: block; margin-top: 4px; color: #5B5B66; font-size: .92rem; }
.offer2 .o2cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.offer2 .o2 { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 20px;
    text-decoration: none; color: #111; border: 2px solid transparent; transition: transform .15s, box-shadow .15s; }
.offer2 .o2:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(40,20,10,.45); }
.offer2 .o2a { background: #E9F7F3; border-color: #00A88B; }
.offer2 .o2b { background: #FFF0EF; border-color: #FF6E6E; }
.offer2 .o2 em { align-self: flex-start; font-style: normal; font: 800 .68rem/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; padding: 5px 9px; border-radius: 999px; background: #00A88B; }
.offer2 .o2b em { background: #FF6E6E; }
.offer2 .o2 b { font-size: 1.15rem; letter-spacing: -.01em; }
.offer2 .o2 > span { color: #4A4A55; font-size: .88rem; line-height: 1.45; }
.offer2 .o2p { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.offer2 .o2p s { color: #8A8A93; font-size: .9rem; }
.offer2 .o2p strong { font-size: 1.6rem; letter-spacing: -.02em; }
.offer2 .o2 i { font-style: normal; margin-top: auto; align-self: stretch; text-align: center; font-weight: 800; color: #fff;
    background: #00A88B; border-radius: 14px; padding: 11px 14px; }
.offer2 .o2b i { background: #111; }
@media (max-width: 640px) { .offer2 { padding: 16px; margin: 20px 12px; } .offer2 .o2cards { grid-template-columns: 1fr; } }