/* ==========================================================================
   SharpSkill — SharpCodeIT training brand
   Shared by sharpskill(_bd).php, sharpskill-course(_bd).php, sharpskill-pay.php.
   Sits on top of style.css + theme-v2 + theme-v3 and reuses their tokens.

   2026-09-12 compact pass: the hub and course pages were rebuilt as dense,
   scan-at-a-glance layouts (sx-* = hub, cp-* = course page). Rules for the
   removed long-form sections were deleted along with their markup.
   ========================================================================== */

.ss, .ss-lm { --ss-ink:#111827; --ss-muted:#6b7280; --ss-line:rgba(0,0,0,.08); --ss-red:#dc2626; --ss-red-d:#b91c1c; }

/* Bangla scope: the global h1–h6 rule's negative tracking and tight leading
   clip Bangla matras, so Bangla pages reset both. Small uppercase labels are
   meaningless in Bangla, so they drop the transform and gain a little size. */
.ss-bn, .ss-bn .btn, .ss-bn input, .ss-bn select, .ss-bn textarea { font-family:'Hind Siliguri','Noto Sans Bengali','Inter',system-ui,sans-serif; }
.ss-bn h1, .ss-bn h2, .ss-bn h3, .ss-bn h4, .ss-bn h5, .ss-bn h6 { letter-spacing:0 !important; line-height:1.4 !important; }
.ss-bn p, .ss-bn li { line-height:1.75; }
.ss-bn .g-lbl, .ss-bn .ss-card .cat, .ss-bn .ss-count .u, .ss-bn .ss-count-lbl, .ss-bn .ss-mini .st,
.ss-bn .cp-facts span, .ss-bn .cp-kv span, .ss-bn .cp-outcome span, .ss-bn .cp-road .lv, .ss-bn .cp-tools .lbl
    { text-transform:none; letter-spacing:0; font-size:.78rem; }

/* ---------- Brand chip + language switch ---------- */
.ss-brand { display:inline-flex; align-items:center; gap:.55rem; background:#fff; border:1px solid var(--ss-line); border-radius:999px; padding:.3rem .95rem .3rem .35rem; box-shadow:0 6px 18px rgba(17,24,39,.06); text-decoration:none; }
.ss-brand .mk { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#ef4444,#991b1b); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.ss-brand .nm { font-weight:800; color:var(--ss-ink); letter-spacing:-.01em; font-size:.95rem; }
.ss-brand .nm b { color:var(--ss-red); }
.ss-brand .by { font-size:.72rem; color:var(--ss-muted); font-weight:600; border-left:1px solid var(--ss-line); padding-left:.55rem; }
@media (max-width:420px) { .ss-brand .by { display:none; } }

.ss-langsw { display:inline-flex; background:#fff; border:1px solid var(--ss-line); border-radius:50px; padding:3px; box-shadow:0 4px 14px rgba(0,0,0,.06); flex-shrink:0; }
.ss-langsw a { padding:.2rem .8rem; border-radius:50px; font-size:.78rem; font-weight:700; color:var(--ss-muted); text-decoration:none; }
.ss-langsw a.active { background:var(--ss-ink); color:#fff; }
.ss-langsw a:hover:not(.active) { color:var(--ss-ink); }

/* ---------- Shared bits ---------- */
.ss-sec { padding:1.9rem 0; }
.sx-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.3rem 1rem; margin-bottom:1.15rem; }
.sx-head h2 { font-size:clamp(1.15rem,2.4vw,1.4rem); font-weight:800; color:var(--ss-ink); margin:0; display:flex; align-items:center; gap:.5rem; }
.sx-head h2 i { color:var(--ss-red); font-size:.95em; }
.sx-head > span { font-size:.85rem; color:var(--ss-muted); }

.ss-flow { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin:.1rem 0 .7rem; }
.ss-flow span { background:var(--ss-ink); color:#fff; border-radius:50px; padding:.22rem .7rem; font-size:.75rem; font-weight:700; }
.ss-flow span:last-child { background:var(--ss-red); }
.ss-flow i { color:#9ca3af; font-size:.7rem; }

.ss-note { font-size:.8rem; color:var(--ss-muted); margin:.6rem 0 0; line-height:1.6; }

.btn-wa { background:#128c7e; color:#fff !important; border:0; border-radius:50px; font-weight:700; }
.btn-wa:hover { background:#0f766e; }
.btn-ghost-light { border:1px solid rgba(255,255,255,.35); color:#fff !important; border-radius:50px; font-weight:700; background:transparent; }
.btn-ghost-light:hover { background:rgba(255,255,255,.08); }

/* Collapsible policy (hub, course form, payment page) */
.sx-policy { background:#fffbeb; border:1px solid #fcd34d; border-radius:12px; padding:.55rem .9rem; margin-top:.8rem; }
.sx-policy summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:.45rem; font-weight:700; font-size:.88rem; color:#92400e; }
.sx-policy summary::-webkit-details-marker { display:none; }
.sx-policy summary::after { content:"\F64D"; font-family:"bootstrap-icons"; margin-left:auto; font-size:.85rem; }
.sx-policy[open] summary::after { content:"\F63B"; }
.sx-policy ul { list-style:none; padding:0; margin:.5rem 0 .15rem; }
.sx-policy li { padding:.2rem 0 .2rem 1.4rem; position:relative; color:#78350f; font-size:.84rem; line-height:1.6; }
.sx-policy li::before { content:"\F26B"; font-family:"bootstrap-icons"; position:absolute; left:0; top:.22rem; color:#d97706; }
.sx-warn { display:flex; align-items:center; gap:.45rem; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:10px; padding:.5rem .8rem; font-size:.84rem; font-weight:600; margin-bottom:0; }

/* Class-day bar: four proportional segments (hub "how it works" + course page) */
.sx-dayrow { display:flex; gap:3px; border-radius:10px; overflow:hidden; }
.sx-dayrow .sg { min-width:0; padding:.45rem .5rem; color:#fff; }
.sx-dayrow .sg b { display:block; font-size:.8rem; font-weight:800; white-space:nowrap; }
.sx-dayrow .sg span { display:block; font-size:.7rem; line-height:1.3; opacity:.92; overflow-wrap:anywhere; }
.sx-dayrow .s0 { background:#111827; } .sx-dayrow .s1 { background:#dc2626; } .sx-dayrow .s2 { background:#ea580c; } .sx-dayrow .s3 { background:#4b5563; }

/* ==========================================================================
   Hub
   ========================================================================== */
.sx-hero { padding:108px 0 .9rem; }
.sx-hero .ss-top { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.sx-hero-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr); gap:2.2rem; align-items:start; }
@media (max-width:991px) { .sx-hero-grid { grid-template-columns:minmax(0,1fr); gap:1.5rem; } }
.sx-hero h1 { font-size:clamp(1.65rem,3.6vw,2.55rem); font-weight:900; color:var(--ss-ink); margin:0 0 .85rem; line-height:1.15; }
.sx-hero .lead { color:#4b5563; font-size:1rem; max-width:560px; margin-bottom:1.2rem; line-height:1.7; }
.sx-hero .ss-ctas { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.3rem; }
.ss-trust { display:flex; flex-wrap:wrap; gap:.4rem; }
.ss-trust span { display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1px solid var(--ss-line); border-radius:50px; padding:.24rem .75rem; font-size:.76rem; font-weight:600; color:#374151; }
.ss-trust i { color:var(--ss-red); }

.ss-glance { background:var(--ss-ink); color:#fff; border-radius:18px; padding:1rem; box-shadow:0 20px 44px rgba(17,24,39,.2); position:relative; overflow:hidden; }
.ss-glance::after { content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(239,68,68,.35),transparent 70%); pointer-events:none; }
.ss-glance .g-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; position:relative; }
@media (min-width:480px) { .ss-glance .g-row { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sx-hero .ss-glance { margin-bottom:1.2rem; padding:.9rem; }
.ss-glance .g-box { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:.55rem .7rem; min-width:0; }
.ss-glance .g-num { font-size:1.3rem; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; }
.ss-glance .g-lbl { font-size:.68rem; color:#9ca3af; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.ss-glance .g-next { position:relative; margin-top:.7rem; font-size:.8rem; color:#d1d5db; border-top:1px dashed rgba(255,255,255,.15); padding-top:.6rem; }
.ss-glance .g-next a { color:#fff; font-weight:700; text-decoration:none; }
.ss-glance .g-next a:hover { color:#fca5a5; }

/* Filters */
.ss-filters { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.7rem; }
.ss-chip { border:1px solid var(--ss-line); background:#fff; color:#374151; border-radius:50px; padding:.35rem .9rem; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .15s; font-family:inherit; }
.ss-chip:hover { border-color:#9ca3af; }
.ss-chip.on { background:var(--ss-ink); color:#fff; border-color:var(--ss-ink); }

/* Course cards — fixed columns (not auto-fill) so a catalogue of 6 reads as two even rows */
.ss-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; }
.ss-grid.ss-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:991px) { .ss-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .ss-grid, .ss-grid.ss-grid-2 { grid-template-columns:1fr; } }
.ss-card { background:#fff; border:1px solid var(--ss-line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.ss-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(17,24,39,.1); }
.ss-cover { --acc:#dc2626; position:relative; height:96px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--acc), #1f2937); /* fallback where color-mix() is unsupported */
    background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.28), transparent 45%),
    linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #111827)); overflow:hidden; }
.ss-cover::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size:14px 14px; }
.ss-cover i { position:relative; font-size:2.3rem; color:#fff; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.ss-cover.has-img { background:#f3f4f6; height:140px; }
.ss-cover.has-img::before { display:none; }
.ss-cover img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
/* Portrait / square artwork (a sales poster) — shown WHOLE at its own shape
   instead of cropped to the wide strip. --ar carries the real width÷height, so
   the box never letterboxes and never cuts the headline or the price off.
   The height cap keeps one tall poster from dwarfing the cards beside it.
   These rules sit after every fixed height above and repeat the class for the
   contexts that set their own, so the natural shape always wins. */
.ss-cover.is-full, .ss-enroll-card .ss-cover.is-full, .cp-aside .ss-enroll-card .ss-cover.is-full,
.cp-rel .ss-cover.is-full { height:auto; aspect-ratio:var(--ar, 1.9); background:#f7f6f3; }
.ss-cover.is-full img { position:relative; z-index:1; object-fit:contain; object-position:50% 50%; }
/* The space left beside a portrait poster is filled with a blurred, dimmed copy
   of the poster itself, so the slot reads as designed rather than letterboxed. */
.ss-cover.is-full::after { content:""; position:absolute; inset:0; z-index:0;
    background:var(--bg) center/cover no-repeat; filter:blur(22px) saturate(1.15); transform:scale(1.2); opacity:.6; }
/* In a card grid the poster gets a fixed strip instead of its own shape, so every
   card in a row keeps the same picture height — the natural-shape box left a tall
   poster with dead space beside it and made the row ragged. The aside on a course
   page is narrow, so there the poster keeps its own shape and fills the card. */
.ss-card .ss-cover.is-full { aspect-ratio:auto; height:300px; }
.cp-rel .ss-cover.is-full { aspect-ratio:auto; height:210px; }
@media (max-width:575px) { .ss-card .ss-cover.is-full { height:380px; } }

/* ---- Hub hero: WhatsApp panel (fills the column under the trust chips) ---- */
.sx-wa { margin-top:1.1rem; border:1.5px solid #bfe9d3; border-radius:16px; background:linear-gradient(135deg,#f0fbf5,#ffffff); overflow:hidden; }
.sx-wa-main { display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; flex-wrap:wrap; }
.sx-wa-ic { flex:0 0 auto; width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:#25d366; color:#fff; font-size:1.7rem; box-shadow:0 8px 20px rgba(37,211,102,.35); }
.sx-wa-tx { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.sx-wa-tx .k { font-size:.74rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#0f7a42; }
.ss-bn .sx-wa-tx .k { text-transform:none; letter-spacing:0; font-size:.85rem; }
.sx-wa-tx .num { font-size:1.45rem; font-weight:900; color:#111827; text-decoration:none; letter-spacing:.01em; line-height:1.15; }
.sx-wa-tx .num:hover { color:#0f7a42; }
.sx-wa-tx .s { font-size:.84rem; color:#4b5563; }
.sx-wa-btn { flex:0 0 auto; white-space:nowrap; }
.sx-wa-foot { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; padding:.6rem 1.1rem; border-top:1px dashed #bfe9d3; background:#f7fdf9; font-size:.8rem; color:#374151; }
.sx-wa-foot span { display:inline-flex; align-items:center; gap:.35rem; }
.sx-wa-foot i { color:#0f7a42; }
.sx-wa-foot a { color:inherit; text-decoration:none; font-weight:600; }
@media (max-width:575px) { .sx-wa-btn { width:100%; } .sx-wa-tx .num { font-size:1.3rem; } }

/* ---- Bonus with every course ---- */
.ss-bonus { display:flex; gap:.85rem; align-items:flex-start; margin-top:.9rem; padding:.85rem 1rem; border-radius:14px;
    background:linear-gradient(135deg,#fff7ed,#fffbeb); border:1.5px solid #fcd9a8; }
.ss-bonus .ic { flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#f59e0b; color:#fff; font-size:1.25rem; box-shadow:0 6px 16px rgba(245,158,11,.35); }
.ss-bonus .tx { display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.ss-bonus .k { font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#b45309; }
.ss-bn .ss-bonus .k { text-transform:none; letter-spacing:0; font-size:.82rem; }
.ss-bonus b { font-size:1rem; color:#111827; line-height:1.25; }
.ss-bonus .s { font-size:.86rem; font-weight:700; color:#92400e; }
.ss-bonus em { font-style:normal; font-size:.8rem; color:#6b7280; margin-top:.2rem; }
.ss-bonus-line { display:flex; align-items:center; gap:.45rem; margin:.55rem 0 .2rem; padding:.45rem .7rem; border-radius:10px;
    background:#fff7ed; border:1px solid #fcd9a8; font-size:.8rem; color:#78350f; line-height:1.3; }
.ss-bonus-line i { color:#f59e0b; font-size:1rem; flex:0 0 auto; }
.ss-bonus-line b { color:#b45309; }

/* ---- Class days + shift picker on the short enrol form ---- */
.cp-when { display:flex; align-items:center; gap:.9rem; margin:1.1rem 0 .35rem; padding:.75rem .9rem;
    border:1px solid #e6e7ea; border-left:4px solid var(--ss-red,#dc2626); border-radius:12px; background:#fcfcfd; }
.cp-when-hd { display:flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:800; letter-spacing:.05em;
    text-transform:uppercase; color:#6b7280; white-space:nowrap; }
.ss-bn .cp-when-hd { text-transform:none; letter-spacing:0; font-size:.85rem; }
.cp-when-hd i { font-size:1rem; color:var(--ss-red,#dc2626); }
.cp-when-days { display:flex; flex-direction:column; min-width:0; }
.cp-when-days b { font-size:.95rem; color:#111827; }
.cp-when-days span { font-size:.82rem; color:#6b7280; }
.cp-shifts { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.cp-shifts input { position:absolute; opacity:0; pointer-events:none; }
.cp-shifts label { display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; cursor:pointer;
    padding:.7rem .85rem; border:1.5px solid #e4e4e8; border-radius:12px; background:#fff; transition:border-color .15s, background .15s; }
.cp-shifts label i { font-size:1.15rem; color:#9ca3af; margin-bottom:.15rem; }
.cp-shifts label b { font-size:.92rem; color:#111827; }
.cp-shifts label span { font-size:.83rem; color:#6b7280; }
.cp-shifts label:hover { border-color:#c9cad0; }
.cp-shifts input:checked + label { border-color:var(--ss-red,#dc2626); background:#fff5f5; }
.cp-shifts input:checked + label i { color:var(--ss-red,#dc2626); }
.cp-shifts input:focus-visible + label { outline:2px solid #111827; outline-offset:2px; }
@media (max-width:479px) { .cp-shifts { grid-template-columns:1fr; } .cp-when { flex-direction:column; align-items:flex-start; gap:.35rem; } }
.ss-cover-wrap { position:relative; }
.ss-card .ss-badges { position:absolute; top:.55rem; left:.6rem; right:.6rem; display:flex; justify-content:space-between; gap:.4rem; z-index:2; }

.ss-badge { display:inline-flex; align-items:center; gap:.3rem; border-radius:50px; padding:.2rem .65rem; font-size:.7rem; font-weight:800; letter-spacing:.02em; background:#fff; color:var(--ss-ink); box-shadow:0 4px 10px rgba(0,0,0,.12); }
.ss-badge .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.ss-badge.open { color:#047857; }
.ss-badge.open .dot { background:#10b981; animation:ssPulse 1.6s infinite; }
.ss-badge.running { color:#1d4ed8; }
.ss-badge.upcoming { color:#b45309; }
.ss-badge.closed, .ss-badge.draft { color:#6b7280; }
.ss-badge.off { background:var(--ss-red); color:#fff; }
@keyframes ssPulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5);} 50%{box-shadow:0 0 0 5px rgba(16,185,129,0);} }

.ss-card .body { padding:1.1rem 1.25rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.ss-card .cat { font-size:.68rem; font-weight:800; color:var(--ss-red); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
.ss-card h3 { font-size:1.05rem; font-weight:800; color:var(--ss-ink); margin:0 0 .25rem; line-height:1.3; }
.ss-card h3 a { color:inherit; text-decoration:none; }
.ss-card h3 a:hover { color:var(--ss-red); }
.ss-card .tag { font-size:.8rem; font-weight:800; color:#7c3aed; margin-bottom:.3rem; }
.ss-card .sub { font-size:.83rem; color:var(--ss-muted); margin-bottom:.6rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.5; }
.ss-meta { display:flex; flex-wrap:wrap; gap:.3rem .8rem; font-size:.78rem; color:#4b5563; margin-bottom:.65rem; }
.ss-meta span { display:inline-flex; align-items:center; gap:.3rem; }
.ss-meta i { color:#9ca3af; }
.ss-price { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-top:auto; }
.ss-price .now { font-size:1.3rem; font-weight:900; color:var(--ss-ink); font-variant-numeric:tabular-nums; }
.ss-price .was { font-size:.85rem; color:#9ca3af; text-decoration:line-through; }
.ss-price .emi { font-size:.74rem; color:#047857; font-weight:700; background:#ecfdf5; border-radius:6px; padding:.1rem .45rem; }
.ss-seats { margin-top:.5rem; }
.ss-seats .bar { height:6px; border-radius:6px; background:#f3f4f6; overflow:hidden; }
.ss-seats .bar b { display:block; height:100%; background:linear-gradient(90deg,#f97316,#dc2626); border-radius:6px; }
.ss-seats .txt { font-size:.74rem; color:#4b5563; margin-top:.25rem; font-weight:600; }
.ss-seats .txt.low { color:#b91c1c; }
.ss-card .acts { display:flex; gap:.45rem; margin-top:.75rem; }
.ss-card .acts .btn { flex:1; font-size:.85rem; padding:.45rem .6rem; }
.ss-card.dim .ss-cover { filter:saturate(.85); }

/* Mini course tiles — dark inside the upcoming slab, light in .sx-mini-grid.light */
.sx-upwrap { background:linear-gradient(135deg,#1e1b4b,#111827); border-radius:18px; padding:1.5rem 1.6rem 1.6rem; position:relative; overflow:hidden; }
.sx-upwrap::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 0%, rgba(124,58,237,.35), transparent 50%), radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:auto, 16px 16px; pointer-events:none; }
.sx-upwrap > * { position:relative; }
.sx-upwrap .sx-head h2 { color:#fff !important; }
.sx-upwrap .sx-head h2 i { color:#a78bfa; }
.sx-upwrap .sx-head > span { color:#c7d2fe; }
.sx-mini-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.8rem; }
.ss-mini { --acc:#7c3aed; display:flex; align-items:center; gap:.7rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:.65rem .8rem; text-decoration:none; transition:transform .2s, background .2s, border-color .2s; min-width:0; }
.ss-mini:hover { transform:translateY(-2px); background:rgba(255,255,255,.1); border-color:var(--acc); }
.ss-mini .ic { width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.ss-mini .tx { display:flex; flex-direction:column; min-width:0; flex:1; }
.ss-mini .st { font-size:.64rem; font-weight:800; color:#fbbf24; text-transform:uppercase; letter-spacing:.07em; }
.ss-mini b { color:#fff; font-size:.9rem; line-height:1.3; }
.ss-mini em { color:#c4b5fd; font-style:normal; font-weight:600; font-size:.76rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ss-mini .go { width:28px; height:28px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:background .2s; }
.ss-mini:hover .go { background:var(--acc); }
.sx-mini-grid.light .ss-mini { background:#fff; border-color:var(--ss-line); }
.sx-mini-grid.light .ss-mini:hover { box-shadow:0 12px 28px rgba(17,24,39,.08); background:#fff; }
.sx-mini-grid.light .ss-mini b { color:var(--ss-ink); }
.sx-mini-grid.light .ss-mini em { color:var(--ss-muted); }
.sx-mini-grid.light .ss-mini .st { color:#b45309; }
.sx-mini-grid.light .ss-mini.open .st { color:#047857; }
.sx-mini-grid.light .ss-mini .go { background:#f3f4f6; color:var(--ss-ink); }
.sx-mini-grid.light .ss-mini:hover .go { background:var(--acc); color:#fff; }

/* How it works: why · class day · enrol steps */
.sx-how { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap:1.2rem; }
@media (max-width:991px) { .sx-how { grid-template-columns:repeat(2,minmax(0,1fr)); } .sx-how .col-why { grid-column:1 / -1; } }
@media (max-width:600px) { .sx-how { grid-template-columns:1fr; } }
.sx-how > div { background:#fff; border:1px solid var(--ss-line); border-radius:16px; padding:1.35rem 1.45rem; min-width:0; }
.sx-how h3 { font-size:1rem; font-weight:800; color:var(--ss-ink); margin:0 0 .95rem; display:flex; align-items:center; gap:.45rem; }
.sx-how h3 i { color:var(--ss-red); }
.sx-ticks { list-style:none; padding:0; margin:0; display:grid; gap:.3rem; }
@media (max-width:991px) and (min-width:601px) { .sx-ticks { grid-template-columns:1fr 1fr; column-gap:1rem; } }
.sx-ticks li { display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:#374151; font-weight:600; padding:.2rem 0; line-height:1.45; }
.sx-ticks i { color:var(--ss-red); width:1.1rem; text-align:center; }
.sx-sm { font-size:.8rem; color:var(--ss-muted); margin:.6rem 0 0; line-height:1.55; }
.sx-steps { list-style:none; padding:0; margin:0; counter-reset:sx; }
.sx-steps li { counter-increment:sx; position:relative; padding:.28rem 0 .28rem 2rem; font-size:.86rem; font-weight:600; color:#374151; line-height:1.45; }
.sx-steps li::before { content:counter(sx); position:absolute; left:0; top:.3rem; width:22px; height:22px; border-radius:50%; background:var(--ss-ink); color:#fff; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.ss-bn .sx-steps li::before { content:counter(sx, bengali); }
.sx-steps li:last-child::before { background:var(--ss-red); }

.ss-methods { display:flex; flex-wrap:wrap; gap:.4rem; }
.ss-method { display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--ss-line); border-radius:10px; padding:.3rem .6rem; font-weight:700; font-size:.78rem; color:#374151; }
.ss-method .lg { min-width:26px; height:22px; padding:0 5px; border-radius:6px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:800; letter-spacing:.01em; }
.sx-methods { margin-top:.75rem; }

/* FAQ — the hub lays the collapsed questions out in two columns */
.ss-faq .accordion-item { background:#fff; border:1px solid var(--ss-line); border-radius:12px !important; margin-bottom:.5rem; overflow:hidden; }
.ss-faq .accordion-button { font-size:.9rem; font-weight:700; color:var(--ss-ink); background:#fff; padding:.75rem 1rem; box-shadow:none; line-height:1.4; }
.ss-faq .accordion-button:not(.collapsed) { color:var(--ss-red); background:#fef2f2; }
.ss-faq .accordion-button:focus { box-shadow:none; }
.ss-faq .accordion-body { font-size:.88rem; color:#374151; line-height:1.7; padding:.75rem 1rem; }
.sx .ss-faq { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; align-items:start; }
.sx .ss-faq .accordion-item { margin:0; }
@media (max-width:767px) { .sx .ss-faq { grid-template-columns:1fr; } }

/* ==========================================================================
   Lead capture — .ss-lead forms (hub hero card, counselling, modal)
   ========================================================================== */
.ss-lead .ld-fields { display:grid; gap:.75rem; }
.ss-lead.full .ld-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; }
@media (max-width:575px) { .ss-lead.full .ld-fields { grid-template-columns:1fr; } }
.ss-lead label { display:block; margin:0; min-width:0; }
.ss-lead label > span:first-child, .ss-lead legend { display:block; font-size:.78rem; font-weight:700; color:#1f2937; margin-bottom:.3rem; }
.ss-lead input[type=text], .ss-lead input[type=tel], .ss-lead input[type=email], .ss-lead select, .ss-lead textarea {
    width:100%; box-sizing:border-box; padding:.6rem .8rem; border:1.5px solid #e5e7eb; border-radius:10px; font-size:.92rem; color:var(--ss-ink); background:#fff; font-family:inherit; min-height:0; }
.ss-lead textarea { resize:vertical; }
.ss-lead input:focus, .ss-lead select:focus, .ss-lead textarea:focus { outline:none; border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.ss-lead .is-bad { border-color:#dc2626 !important; background:#fef2f2; }
.ss-lead .ph { display:flex; }
.ss-lead .ph .pfx { display:flex; align-items:center; padding:0 .65rem; background:#f3f4f6; border:1.5px solid #e5e7eb; border-right:0; border-radius:10px 0 0 10px; font-weight:700; font-size:.84rem; color:#4b5563; }
.ss-lead .ph input { border-radius:0 10px 10px 0; min-width:0; }
.ss-lead .ld-set { border:0; padding:0; margin:.95rem 0 0; min-width:0; }
.ss-lead .ld-set legend { float:none; width:auto; padding:0; }
.ss-lead .ld-msg { margin-top:.95rem; }
.ld-wants { display:flex; flex-direction:column; gap:.4rem; }
.ss-lead.full .ld-wants { flex-direction:row; flex-wrap:wrap; }
.ld-wants label { display:flex !important; align-items:center; gap:.5rem; flex-wrap:wrap; cursor:pointer; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.5rem .7rem; font-size:.85rem; color:#374151; transition:background .15s, border-color .15s; }
.ld-wants label:has(input:checked) { background:#fef2f2; border-color:#fecaca; }
.ld-wants input { accent-color:#dc2626; margin:0; width:16px; height:16px; }
.ld-wants b { font-weight:700; color:var(--ss-ink); }
.ld-wants small { color:var(--ss-muted); font-size:.76rem; }
.ss-lead.full .ld-wants label { border-radius:999px; padding:.4rem .85rem; }
.ss-lead.full .ld-wants small { display:none; }
.ld-err { margin-top:.8rem; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:10px; padding:.55rem .8rem; font-size:.85rem; }
.ss-lead .cp-btn.big { margin-top:1rem; }
.ss-lead .cp-btn.busy { opacity:.65; pointer-events:none; }
.ld-fine { margin:.65rem 0 0; font-size:.74rem; color:var(--ss-muted); text-align:center; line-height:1.55; }
.ld-fine i { color:var(--ss-red); margin-right:.25rem; }
.ld-ok { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:14px; padding:1.1rem 1.2rem; }
.ld-ok .t { display:flex; align-items:flex-start; gap:.5rem; color:#15803d; font-size:1rem; margin-bottom:.4rem; line-height:1.4; }
.ld-ok .t i { margin-top:.15rem; }
.ld-ok p { margin:0 0 .9rem; font-size:.88rem; color:#166534; line-height:1.65; }

/* Hub hero: "Hold my seat — free" card */
.sx-hold { background:#fff; border:1px solid var(--ss-line); border-radius:20px; overflow:hidden; box-shadow:0 22px 48px rgba(17,24,39,.12); scroll-margin-top:96px; }
.sx-hold .hd { background:var(--ss-ink); color:#fff; padding:1.2rem 1.4rem; position:relative; overflow:hidden; }
.sx-hold .hd::after { content:""; position:absolute; right:-60px; top:-70px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(239,68,68,.45),transparent 70%); pointer-events:none; }
.sx-hold .hd > * { position:relative; }
.sx-hold .k, .ss-lm .k, .sx-couns .k { font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#fca5a5; }
.ss-bn .sx-hold .k, .ss-bn.ss-lm .k, .ss-bn .sx-couns .k { text-transform:none; letter-spacing:0; font-size:.8rem; }
.sx-hold h2 { color:#fff !important; font-size:1.25rem; font-weight:800; margin:.3rem 0 .35rem; letter-spacing:-.02em; }
.sx-hold .hd p { margin:0; font-size:.85rem; color:#d1d5db; line-height:1.6; }
.sx-hold .bd { padding:1.25rem 1.4rem 1.3rem; }
.sx-hold .ft { border-top:1px dashed #e5e7eb; padding:.75rem 1.4rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem .8rem; font-size:.8rem; color:#4b5563; font-weight:600; }
.sx-hold .ft i { color:var(--ss-red); margin-right:.3rem; }
.sx-hold .ft a { font-weight:700; color:var(--ss-red); text-decoration:none; }

/* Hub: free-counselling section (dark pitch + full form) */
.sx-last { padding-bottom:3rem; }
.sx-couns { background:#fff; border:1px solid var(--ss-line); border-radius:22px; overflow:hidden; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); scroll-margin-top:96px; }
@media (max-width:991px) { .sx-couns { grid-template-columns:1fr; } }
.sx-couns .l { background:var(--ss-ink); color:#fff; padding:1.8rem 1.7rem; position:relative; overflow:hidden; }
.sx-couns .l::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 10%, rgba(239,68,68,.3), transparent 55%), radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:auto, 16px 16px; pointer-events:none; }
.sx-couns .l > * { position:relative; }
.sx-couns .k { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.12); color:#fff; border-radius:999px; padding:.3rem .85rem; }
.sx-couns h2 { color:#fff !important; font-size:clamp(1.25rem,2.6vw,1.55rem); font-weight:800; letter-spacing:-.02em; margin:.9rem 0 .7rem; line-height:1.3; }
.sx-couns .l p { color:#d1d5db; font-size:.92rem; line-height:1.7; margin:0 0 1.1rem; }
.sx-couns ul { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.sx-couns li { display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; color:#e5e7eb; line-height:1.55; }
.sx-couns li i { color:#34d399; margin-top:.15rem; }
.sx-couns .call { margin-top:1.4rem; border-top:1px dashed rgba(255,255,255,.16); padding-top:1rem; font-size:.86rem; color:#d1d5db; }
.sx-couns .call b { display:block; color:#fff; margin-bottom:.25rem; }
.sx-couns .call a { color:#fff; font-weight:700; text-decoration:none; }
.sx-couns .call a.wa { color:#34d399; }
.sx-couns .r { padding:1.8rem 1.7rem; }

/* "Hold a seat" links: hub cards + course-page sticky card */
.ss-card-hold { margin-top:.7rem; border:1px dashed #fecaca; background:#fff7f7; color:var(--ss-red-d); border-radius:10px; padding:.45rem .6rem; font-size:.8rem; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:.4rem; transition:background .15s; }
.ss-card-hold:hover { background:#fef2f2; }

/* Lead modal — appended to <body> by ssLeadScript() */
.ss-lm { position:fixed; inset:0; z-index:2147483000; background:rgba(10,10,14,.6); display:flex; align-items:center; justify-content:center; padding:1rem; overflow-y:auto; }
.ss-lm[hidden] { display:none !important; }
.ss-lm-box { background:#fff; border-radius:20px; width:100%; max-width:440px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); position:relative; margin:auto; font-family:'Inter',system-ui,sans-serif; }
.ss-bn .ss-lm-box, .ss-lm.ss-bn .ss-lm-box { font-family:'Hind Siliguri','Noto Sans Bengali','Inter',system-ui,sans-serif; }
.ss-lm .hd { background:var(--ss-ink); color:#fff; padding:1.15rem 3rem 1.1rem 1.4rem; }
.ss-lm h2 { color:#fff !important; font-size:1.2rem; font-weight:800; margin:.3rem 0 .3rem; line-height:1.35; }
.ss-lm .hd p { margin:0; font-size:.84rem; color:#d1d5db; line-height:1.6; }
.ss-lm .bd { padding:1.2rem 1.4rem 1.3rem; }
.ss-lm .x { position:absolute; top:.7rem; right:.8rem; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; z-index:2; }
.ss-lm .x:hover { background:rgba(255,255,255,.22); }

/* ==========================================================================
   Course page — cp-*, from the Claude Design "SharpSkill Course Page" (tabbed
   revision). Desktop: content + sticky enrol card. ≤991px: the enrol card
   moves under the hero (grid areas) — so the one-field "call me back" box is
   the first thing a phone visitor reaches after the title.
   ========================================================================== */
.cp { padding:100px 0 1.2rem; }
@media (max-width:991px) { .cp { padding-top:90px; } }

/* Promo bar */
.cp-bar { background:#0c0c0e; color:#fff; border-radius:12px; padding:.5rem 1rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.3rem .8rem; font-size:.8rem; font-weight:600; margin-bottom:1.1rem; text-align:center; }
.cp-bar .lb { display:inline-flex; align-items:center; gap:.35rem; color:#fca5a5; font-weight:800; }
.cp-bar .tx { color:#e5e7eb; }
.cp-bar .cd { display:inline-flex; align-items:center; gap:.3rem; background:rgba(255,255,255,.1); border-radius:999px; padding:.12rem .65rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp-bar .cd i { color:#fbbf24; }

/* Breadcrumb · course switcher · language */
.cp-top { display:flex; justify-content:space-between; align-items:center; gap:.6rem 1rem; margin-bottom:1.3rem; min-width:0; }
.cp-top .ss-crumb { flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-crumb { font-size:.8rem; color:var(--ss-muted); min-width:0; }
.ss-crumb a { color:var(--ss-muted); text-decoration:none; }
.ss-crumb a:hover { color:var(--ss-red); }
.ss-crumb .sep { margin:0 .35rem; opacity:.5; }
.cp-top-r { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; flex:1 1 auto; min-width:0; max-width:100%; }
@media (max-width:991px) { .ss-crumb .cur { display:none; } }
@media (max-width:767px) { .cp-top { flex-wrap:wrap; } .cp-top-r { justify-content:flex-end; } }

/* Grid: intro + main on the left, sticky card on the right */
.cp-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(320px,1fr); grid-template-areas:"intro aside" "main aside"; gap:0 1.6rem; align-items:start; }
.cp-intro { grid-area:intro; margin-bottom:1.2rem; min-width:0; }
.cp-main  { grid-area:main; min-width:0; }
.cp-aside { grid-area:aside; position:sticky; top:92px; align-self:start; }
@media (max-width:991px) {
  .cp-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "aside" "main"; }
  .cp-aside { position:static; margin-bottom:1.4rem; }
  .cp-aside .ss-enroll-card .ss-cover { height:96px; }
  /* Phones/tablets: the one-field call-back box comes straight after the price. */
  .cp-aside .ss-enroll-card .in { display:flex; flex-direction:column; }
  .cp-aside .ss-enroll-card .in > .ss-price { order:-3; }
  .cp-aside .ss-enroll-card .in > .cp-emi { order:-2; }
  .cp-aside .ss-enroll-card .in > .cp-quick { order:-1; margin:0 0 .4rem; padding:.9rem 0 .95rem; border-top:1px dashed #e5e7eb; border-bottom:1px dashed #e5e7eb; }
  .cp-aside .ss-enroll-card .in > .cp-hold-link { order:-1; margin:0 0 .6rem; }
}

/* Hero */
.cp-badges { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.8rem; }
.cp-intro h1 { font-size:clamp(1.7rem,3.9vw,2.5rem); font-weight:900; color:#111827; letter-spacing:-.035em; line-height:1.15; margin:0 0 .6rem; }
.ss-tagline { display:inline-block; font-weight:800; font-size:1.02rem; color:#7c3aed; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:10px; padding:.2rem .7rem; margin-bottom:.8rem; }
.cp-intro .lead { color:#374151; font-size:1rem; line-height:1.7; margin-bottom:1rem; }
.ss-chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.ss-chips span { display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1px solid var(--ss-line); border-radius:9px; padding:.38rem .75rem; font-size:.8rem; font-weight:600; color:#374151; }
.ss-chips i { color:var(--ss-red); }

/* Sticky enrol card */
.ss-enroll-card { background:#fff; border:1px solid var(--ss-line); border-radius:20px; overflow:hidden; box-shadow:0 22px 48px rgba(17,24,39,.1); }
.ss-enroll-card .ss-cover { height:118px; }
.ss-enroll-card .ss-cover i { font-size:3.2rem; }
.ss-enroll-card .in { padding:1.1rem 1.25rem 1.2rem; }
.ss-enroll-card .ss-price .now { font-size:1.8rem; }
.ss-price .now.soon { font-size:1.15rem; }
.ss-enroll-card .save { display:inline-block; background:#fef2f2; color:var(--ss-red-d); border:1px solid #fecaca; border-radius:6px; font-size:.74rem; font-weight:800; padding:.08rem .45rem; }
.cp-emi { margin-top:.25rem; font-size:.84rem; color:#047857; font-weight:700; }
.ss-count-lbl { font-size:.72rem; font-weight:800; color:var(--ss-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:.9rem; }
.ss-count { display:flex; gap:.35rem; margin:.3rem 0 0; }
.ss-count .b { flex:1; background:var(--ss-ink); color:#fff; border-radius:9px; text-align:center; padding:.35rem .2rem; }
.ss-count .n { font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; }
.ss-count .u { font-size:.6rem; color:#9ca3af; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.ss-enroll-card .rows { margin:.8rem 0; border-top:1px solid #f3f4f6; }
.ss-enroll-card .rows div { display:flex; justify-content:space-between; gap:.75rem; padding:.4rem 0; border-bottom:1px solid #f3f4f6; font-size:.83rem; color:#4b5563; }
.ss-enroll-card .rows b { color:var(--ss-ink); text-align:right; }
.cp-aside .ss-seats { margin:0 0 .95rem; }
.cp-methods { gap:.35rem; margin-top:.95rem; }
.cp-fine { font-size:.75rem; color:#6b7280; margin:.8rem 0 0; line-height:1.6; }
.cp-fine i { color:#dc2626; margin-right:.3rem; }

/* Urgency strip — rendered only when the real seat count is low or the deadline
   is inside 48h, so the blink always stands for something true. */
.cp-urgent { display:flex; align-items:center; gap:.5rem; margin:0 0 .9rem; padding:.55rem .8rem; border-radius:12px;
    background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; font-size:.84rem; animation:ssUrgent 1.6s ease-in-out infinite; }
.cp-urgent .dot { width:9px; height:9px; border-radius:50%; background:#dc2626; flex-shrink:0; animation:ssPulse 1.2s infinite; }
.cp-urgent b { font-weight:800; line-height:1.4; }
@keyframes ssUrgent { 0%,100% { background:#fef2f2; border-color:#fecaca; } 50% { background:#fee2e2; border-color:#fca5a5; } }
/* Low seat counts blink on the cards too (same rule: only when actually low). */
.ss-seats .txt.low { animation:ssBlinkText 1.8s ease-in-out infinite; }
@keyframes ssBlinkText { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* Course picker: admission-open rows read green, announced ones amber */
.ld-course optgroup { font-weight:800; color:var(--ss-ink); }
.ld-course .ss-opt-open { color:#047857; font-weight:700; }
.ld-course .ss-opt-upcoming { color:#b45309; }
.ld-course .ss-opt-other { color:var(--ss-muted); }

/* One-field quick lead: mobile number → "Call me" */
.cp-quick { margin-top:.9rem; padding-top:.9rem; border-top:1px dashed #e5e7eb; }
.cp-quick .q-lbl { display:flex; align-items:center; gap:.4rem; font-size:.84rem; font-weight:800; color:var(--ss-ink); margin:0 0 .45rem; }
.cp-quick .q-lbl i { color:var(--ss-red); }
.cp-quick .q-row { display:flex; align-items:stretch; }
.cp-quick .q-row .pfx { display:flex; align-items:center; padding:0 .6rem; background:#f3f4f6; border:1.5px solid #e5e7eb; border-right:0; border-radius:12px 0 0 12px; font-weight:700; font-size:.84rem; color:#4b5563; }
.cp-quick .q-row input { flex:1; min-width:0; border:1.5px solid #e5e7eb; border-left:0; border-right:0; padding:.62rem .7rem; font-size:1rem; font-family:inherit; color:var(--ss-ink); background:#fff; }
.cp-quick .q-row input:focus { outline:none; background:#fffafa; }
.cp-quick .q-row:focus-within .pfx, .cp-quick .q-row:focus-within input { border-color:#ef4444; }
.cp-quick .q-row .cp-btn { border-radius:0 12px 12px 0; padding:.6rem 1rem; font-size:.9rem; box-shadow:none; flex-shrink:0; }
.cp-quick .q-row .cp-btn:hover { transform:none; }
.cp-quick .q-row input.is-bad { background:#fef2f2; }
.cp-quick .ld-fine { text-align:left; margin-top:.45rem; }
.cp-quick .ld-err { margin-top:.5rem; }
.cp-quick .ld-ok { padding:.85rem 1rem; }
.cp-hold-link { background:none; border:0; padding:0; margin-top:.55rem; font-family:inherit; font-size:.8rem; font-weight:700; color:var(--ss-red-d); cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; }
.cp-hold-link:hover { text-decoration:underline; }

/* Buttons */
.cp-btn { display:flex; align-items:center; justify-content:center; gap:.45rem; border:0; border-radius:999px; padding:.7rem 1rem; font-weight:800; font-size:.95rem; text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s; font-family:inherit; }
.cp-btn:hover { transform:translateY(-1px); }
.cp-btn.red { background:#dc2626; color:#fff !important; box-shadow:0 10px 26px rgba(220,38,38,.28); }
.cp-btn.red:hover { background:#b91c1c; }
.cp-btn.ink { background:#111827; color:#fff !important; box-shadow:0 10px 26px rgba(17,24,39,.22); }
.cp-btn.wa { background:#128c7e; color:#fff !important; font-weight:700; font-size:.9rem; padding:.6rem 1rem; margin-top:.5rem; }
.cp-btn.wa:hover { background:#0f766e; }
.cp-btn.big { width:100%; margin-top:1.1rem; padding:.9rem; font-size:1.02rem; }

/* Tabs — every panel is in the HTML; .cp-tabbed (set by JS) shows one at a time */
.cp-tabs { display:flex; gap:.3rem; background:#fff; border:1px solid var(--ss-line); border-radius:999px; padding:4px; overflow-x:auto; scrollbar-width:none; margin-bottom:1.1rem; scroll-margin-top:88px; }
.cp-tabs::-webkit-scrollbar { display:none; }
.cp-tabs button { flex:1; border:0; cursor:pointer; white-space:nowrap; padding:.55rem .9rem; border-radius:999px; font-size:.86rem; font-weight:700; background:transparent; color:#4b5563; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; transition:background .15s, color .15s; }
.cp-tabs button:hover { color:var(--ss-ink); background:#f3f4f6; }
.cp-tabs button.on { background:#0c0c0e; color:#fff; }
.cp-tabs button:focus-visible { outline:2px solid var(--ss-red); outline-offset:2px; }
@media (max-width:575px) { .cp-tabs button { flex:0 0 auto; padding:.5rem .8rem; font-size:.82rem; } }
.cp-main.cp-tabbed .cp-panel { display:none; }
.cp-main.cp-tabbed .cp-panel.on { display:block; animation:cpIn .25s ease; }
@keyframes cpIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Content boxes */
.ss-box { background:#fff; border:1px solid var(--ss-line); border-radius:16px; padding:1.3rem 1.45rem; margin-bottom:1rem; scroll-margin-top:96px; }
.ss-box > h2 { font-size:1.12rem; font-weight:800; color:var(--ss-ink); display:flex; align-items:center; gap:.5rem; margin:0 0 .85rem; }
.ss-box > h2 i { color:var(--ss-red); }
.ss-box .desc p { color:#374151; font-size:.94rem; line-height:1.75; margin:0 0 .8rem; }
.ss-box .desc p:last-child { margin-bottom:0; }
.cp-h2-split { justify-content:space-between; flex-wrap:wrap; }
.cp-h2-split > span { display:inline-flex; align-items:center; gap:.5rem; }
.cp-h2-split small { font-size:.78rem; font-weight:600; color:#6b7280; }
.cp-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; }
@media (max-width:640px) { .cp-two { grid-template-columns:1fr; } }
.ss-objective { border-left:4px solid var(--ss-red); }
.ss-objective p { color:#374151; font-size:.94rem; line-height:1.75; margin:0 0 .85rem; }
.ss-objective .ss-flow span { padding:.3rem .8rem; font-size:.79rem; }
.ss-outcomes { display:grid; grid-template-columns:1fr 1fr; gap:.1rem 1.3rem; list-style:none; padding:0; margin:0; }
@media (max-width:640px) { .ss-outcomes { grid-template-columns:1fr; } }
.ss-outcomes li { position:relative; padding:.3rem 0 .3rem 1.6rem; font-size:.9rem; color:#374151; line-height:1.55; }
.ss-outcomes li::before { content:"\F26B"; font-family:"bootstrap-icons"; position:absolute; left:0; top:.32rem; color:var(--ss-red); }
.ss-tools { display:flex; flex-wrap:wrap; gap:.45rem; }
.ss-tools span { background:#f9fafb; border:1px solid var(--ss-line); border-radius:8px; padding:.32rem .7rem; font-size:.8rem; font-weight:600; color:#374151; }
.ss-notcov { background:#f9fafb; }
.ss-notcov > p { color:#374151; font-size:.9rem; line-height:1.7; margin:0 0 .7rem; }
.ss-notcov .ss-tools span { background:#fff; color:#6b7280; }
.ss-notcov .ss-tools i { color:#dc2626; }
.ss-instr { display:flex; gap:.9rem; align-items:flex-start; }
.ss-instr .av { width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,#111827,#374151); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.ss-instr b { display:block; color:var(--ss-ink); font-size:.98rem; }
.ss-instr span { font-size:.84rem; color:var(--ss-muted); }
.ss-instr p { font-size:.88rem; color:#374151; margin:.35rem 0 0; line-height:1.7; }

/* Curriculum accordion + FAQ (+/−) */
.cp-acc .accordion-item { border:1px solid rgba(0,0,0,.08) !important; border-radius:12px !important; margin-bottom:.55rem; overflow:hidden; background:#fff; }
.cp-acc .accordion-button { font-weight:700; font-size:.91rem; color:#111827; background:#f9fafb; box-shadow:none !important; padding:.8rem 1rem; gap:.6rem; line-height:1.4; }
.cp-faq .accordion-button { background:#fff; }
.cp-acc .accordion-button:not(.collapsed) { background:#fef2f2; color:#b91c1c; }
.cp-faq .accordion-button:not(.collapsed) { color:#dc2626; }
.cp-acc .accordion-button .t { flex:1; min-width:0; }
.cp-acc .accordion-button .cnt { font-size:.74rem; font-weight:700; color:#6b7280; white-space:nowrap; }
.cp-acc .accordion-button::after { background-image:none !important; content:"\F64D"; font-family:"bootstrap-icons"; font-size:.95rem; width:auto; height:auto; transform:none !important; margin-left:.4rem; color:inherit; }
.cp-acc .accordion-button:not(.collapsed)::after { content:"\F63B"; }
.cp-acc .accordion-body { padding:.6rem 1.1rem 1rem; font-size:.88rem; color:#374151; line-height:1.75; }
.cp-acc ol { margin:0; padding-left:1.2rem; }
.cp-acc ol li { font-size:.87rem; color:#374151; padding:.22rem 0; }
.ss-practical { display:flex; gap:.55rem; align-items:flex-start; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; padding:.6rem .8rem; margin-top:.65rem; font-size:.86rem; font-weight:700; color:#9a3412; }
.ss-practical i { color:#ea580c; margin-top:.1rem; }
.ss-fr { display:flex; gap:.7rem; align-items:center; padding:.55rem 0; border-bottom:1px dashed #e5e7eb; }
.ss-fr:last-child { border-bottom:0; }
.ss-fr .m { flex:0 0 78px; font-weight:800; color:var(--ss-red); font-size:.86rem; }
.ss-fr .t { font-size:.88rem; color:#374151; font-weight:600; }

/* Outcome tab */
.ss-offer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
@media (max-width:640px) { .ss-offer { grid-template-columns:1fr; } }
.ss-offer .of { background:#f9fafb; border:1px solid var(--ss-line); border-radius:12px; padding:.75rem .9rem; }
.ss-offer .of b { display:block; color:var(--ss-ink); font-size:.9rem; }
.ss-offer .of span { font-size:.82rem; color:var(--ss-muted); line-height:1.5; }
.ss-final { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; background:linear-gradient(135deg,#065f46,#059669); color:#fff; border-radius:16px; padding:1rem 1.25rem; margin-bottom:1rem; }
.ss-final .lbl { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.15); border-radius:50px; padding:.25rem .75rem; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.ss-bn .ss-final .lbl { text-transform:none; letter-spacing:0; font-size:.84rem; }
.ss-final b { font-size:1.02rem; color:#fff; }
.ss-road { list-style:none; padding:0; margin:0 0 .4rem; position:relative; }
.ss-road::before { content:""; position:absolute; left:15px; top:10px; bottom:10px; width:2px; background:#e5e7eb; }
.ss-road li { position:relative; padding:.5rem 0 .5rem 2.6rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; }
.ss-road li::before { content:""; position:absolute; left:8px; top:.8rem; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid #d1d5db; }
.ss-road li.now::before { border-color:var(--ss-red); background:var(--ss-red); box-shadow:0 0 0 4px #fee2e2; }
.ss-road .lv { font-size:.72rem; font-weight:800; color:var(--ss-muted); text-transform:uppercase; letter-spacing:.05em; min-width:58px; }
.ss-bn .ss-road .lv { text-transform:none; letter-spacing:0; font-size:.8rem; }
.ss-road b { color:var(--ss-ink); font-size:.92rem; }
.ss-road em { font-style:normal; font-size:.8rem; color:#047857; font-weight:700; }
.ss-road li.now b { color:var(--ss-red); }

/* Admission & FAQ tab */
.ss-sched { width:100%; border-collapse:collapse; font-size:.9rem; }
.ss-sched th { width:38%; text-align:left; font-weight:700; color:var(--ss-muted); padding:.6rem .2rem; border-bottom:1px solid #f3f4f6; font-size:.84rem; vertical-align:top; }
.ss-sched td { padding:.6rem .2rem; border-bottom:1px solid #f3f4f6; color:var(--ss-ink); font-weight:600; }
.ss-policy { background:#fffbeb; border:1px solid #fcd34d; border-radius:16px; padding:1.2rem 1.4rem; margin-bottom:1rem; scroll-margin-top:96px; }
.ss-policy h3 { font-size:1rem; font-weight:800; color:#92400e; display:flex; align-items:center; gap:.5rem; margin:0 0 .6rem; }
.ss-policy ul { list-style:none; padding:0; margin:0; }
.ss-policy li { padding:.28rem 0 .28rem 1.6rem; position:relative; color:#78350f; font-size:.87rem; line-height:1.65; }
.ss-policy li::before { content:"\F26B"; font-family:"bootstrap-icons"; position:absolute; left:0; top:.32rem; color:#d97706; }

/* Gallery + lightbox */
.ss-gal { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }
@media (max-width:640px) { .ss-gal { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ss-gal-it { border:0; padding:0; border-radius:10px; overflow:hidden; aspect-ratio:4/3; background:#f3f4f6; cursor:zoom-in; }
.ss-gal-it img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.ss-gal-it:hover img { transform:scale(1.05); }
.ss-lb { position:fixed; inset:0; z-index:2147483000; background:rgba(10,10,14,.9); display:flex; align-items:center; justify-content:center; padding:1rem; }
.ss-lb[hidden] { display:none !important; }
.ss-lb img { max-width:min(1100px,92vw); max-height:86vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.ss-lb button { position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:50%; width:44px; height:44px; font-size:1.6rem; line-height:1; cursor:pointer; }
.ss-lb .x { top:16px; right:16px; }
.ss-lb .p { left:16px; top:50%; transform:translateY(-50%); }
.ss-lb .n { right:16px; top:50%; transform:translateY(-50%); }

/* Enrol form */
.ss-form-card { background:#fff; border:1px solid var(--ss-line); border-radius:20px; padding:1.5rem 1.6rem; margin-top:.4rem; scroll-margin-top:96px; }
.cp-form-hd { text-align:center; margin-bottom:1.2rem; }
.cp-kicker { display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid #e4e4e8; color:#0c0c0e; border-radius:999px; font-weight:700; font-size:.78rem; padding:.35rem .9rem; box-shadow:0 1px 2px rgba(12,12,14,.04), 0 12px 32px rgba(12,12,14,.06); }
.cp-kicker i { color:#dc2626; }
.cp-form-hd h2 { font-size:1.4rem; font-weight:800; margin:.55rem 0 .35rem; color:#111827; letter-spacing:-.02em; }
.cp-form-hd p { color:#6b7280; margin:0; font-size:.9rem; line-height:1.65; }
.ss-form-card .err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:10px; padding:.65rem .9rem; font-size:.88rem; margin-bottom:1rem; }
.ss-form-card .ok { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; border-radius:10px; padding:.65rem .9rem; font-size:.88rem; margin-bottom:1rem; }
.cp-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; }
@media (max-width:640px) { .cp-fields { grid-template-columns:1fr; } }
.cp-fields label { display:block; margin:0; min-width:0; }
.cp-form .form-label { display:block; font-size:.83rem; font-weight:600; color:#1f2937; margin-bottom:.3rem; }
.cp-form .form-control, .cp-form .form-select { border:1.5px solid #e5e7eb; border-radius:10px; font-size:.92rem; padding:.6rem .8rem; }
.cp-form textarea.form-control { min-height:0; height:auto; resize:vertical; }
.cp-form .form-control:focus, .cp-form .form-select:focus { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.cp-form .ph { display:flex; }
.cp-form .ph .pfx { display:flex; align-items:center; padding:0 .7rem; background:#f3f4f6; border:1.5px solid #dee2e6; border-right:0; border-radius:10px 0 0 10px; font-weight:700; font-size:.85rem; color:#4b5563; }
.cp-form .ph .form-control { border-radius:0 10px 10px 0; min-width:0; }
.cp-set { border:0; padding:0; margin:1rem 0 0; min-width:0; }
.cp-set legend { float:none; width:auto; padding:0; }
.cp-slots { display:flex; flex-wrap:wrap; gap:.4rem; }
.cp-slots input { position:absolute; opacity:0; pointer-events:none; }
.cp-slots label { cursor:pointer; border:1.5px solid #e5e7eb; background:#fff; color:#374151; border-radius:999px; padding:.4rem .95rem; font-size:.84rem; font-weight:700; margin:0; transition:all .15s; }
.cp-slots label:hover { border-color:#9ca3af; }
.cp-slots input:checked + label { border-color:#dc2626; background:#fef2f2; color:#b91c1c; }
.cp-slots input:focus-visible + label { outline:2px solid #dc2626; outline-offset:2px; }
.ss-plan { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:576px) { .ss-plan { grid-template-columns:1fr; } }
.ss-plan label { display:block; border:1.5px solid #e5e7eb; border-radius:12px; padding:.75rem .9rem; cursor:pointer; margin:0; transition:border-color .15s, background .15s; }
.ss-plan input { position:absolute; opacity:0; pointer-events:none; }
.ss-plan input:checked + label { border-color:var(--ss-red); background:#fef2f2; }
.ss-plan input:focus-visible + label { outline:2px solid var(--ss-red); outline-offset:2px; }
.ss-plan .t { font-weight:800; color:var(--ss-ink); font-size:.92rem; display:flex; justify-content:space-between; gap:.5rem; }
.ss-plan .d { font-size:.8rem; color:var(--ss-muted); margin-top:.15rem; }
.ss-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Other courses — cover cards */
.cp-related { padding:1.6rem 0 2.6rem; }
.cp-rel-head { text-align:center; margin-bottom:1.1rem; }
.cp-rel-head h2 { font-size:clamp(1.3rem,3vw,1.8rem); font-weight:800; color:#111827; letter-spacing:-.035em; margin:0 0 .3rem; }
.cp-rel-head a { font-weight:700; font-size:.9rem; color:#dc2626; text-decoration:none; }
.cp-rel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
@media (max-width:991px) { .cp-rel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .cp-rel-grid { grid-template-columns:1fr; } }
.cp-rel { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s; }
.cp-rel:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(17,24,39,.1); color:inherit; }
.cp-rel .ss-cover { height:120px; }
.cp-rel .ss-cover i { font-size:2.4rem; }
.cp-rel-badge { position:absolute; top:.6rem; left:.6rem; border-radius:50px; padding:.18rem .6rem; font-size:.68rem; font-weight:800; background:#fff; z-index:2; }
.cp-rel-badge.open { color:#047857; } .cp-rel-badge.soon { color:#b45309; }
.cp-rel .bd { padding:.95rem 1rem 1.05rem; display:flex; flex-direction:column; flex:1; }
.cp-rel .cat { font-size:.68rem; font-weight:800; color:#dc2626; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; }
.ss-bn .cp-rel .cat { text-transform:none; letter-spacing:0; font-size:.78rem; }
.cp-rel h3 { font-size:1rem; font-weight:800; color:#111827; margin:0 0 .3rem; line-height:1.3; }
.cp-rel p { font-size:.82rem; color:#6b7280; margin:0 0 .8rem; line-height:1.5; }
.cp-rel .go { margin-top:auto; border:1.5px solid #e4e4e8; border-radius:999px; padding:.5rem .8rem; font-weight:700; font-size:.85rem; text-align:center; color:#0c0c0e; }
.cp-rel:hover .go { border-color:#0c0c0e; }

/* Bottom bar: price · call me · WhatsApp · enrol (every screen size, as designed) */
.cp-bottom { position:fixed; left:0; right:0; bottom:0; z-index:1030; background:#fff; border-top:1px solid rgba(0,0,0,.08); box-shadow:0 -8px 24px rgba(0,0,0,.08); padding:.6rem max(1rem, calc((100vw - 1140px) / 2)); display:flex; align-items:center; gap:.6rem; }
.cp-bottom .p { min-width:0; margin-right:auto; }
.cp-bottom .p b { display:block; font-weight:900; font-size:1.05rem; color:#111827; line-height:1.15; }
.cp-bottom .p small { display:block; font-size:.72rem; color:#6b7280; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-bb-ic { flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; text-decoration:none; }
.cp-bb-ic.wa { background:#128c7e; color:#fff !important; }
.cp-bb-ic.wa:hover { background:#0f766e; }
.cp-bb-ic.call { background:#fef2f2; color:#b91c1c !important; border:1.5px solid #fecaca; }
.cp-bb-ic.call:hover { background:#fee2e2; }
.cp-bottom .cp-btn { padding:.6rem 1.3rem; font-size:.9rem; white-space:nowrap; flex-shrink:0; }
.cp-bottom .cp-btn .sm { display:none; }
@media (max-width:520px) { .cp-bottom .cp-btn .lg { display:none; } .cp-bottom .cp-btn .sm { display:inline; } .cp-bottom .cp-btn { padding:.6rem 1rem; } }
@media (max-width:360px) { .cp-bottom .p small { display:none; } }
body.cp-body { padding-bottom:70px; }
body.cp-body #aiw { bottom:84px !important; }
body.cp-body .btn-back-top { display:none !important; }

/* ==========================================================================
   Payment page
   ========================================================================== */
.ss-list { list-style:none; padding:0; margin:0; }
.ss-list li { position:relative; padding:.3rem 0 .3rem 1.6rem; font-size:.9rem; color:#374151; line-height:1.55; }
.ss-list li::before { content:"\F26B"; font-family:"bootstrap-icons"; position:absolute; left:0; top:.32rem; color:var(--ss-red); }
.ss-list.teal li::before { color:#0d9488; }
.ss-pay { padding:6.5rem 0 3rem; }
.ss-pay .wrap { max-width:860px; margin:0 auto; }
.ss-okbox { background:linear-gradient(135deg,#065f46,#059669); color:#fff; border-radius:16px; padding:1.3rem 1.5rem; margin-bottom:1.1rem; }
.ss-okbox h2 { color:#fff !important; font-size:1.15rem; font-weight:800; margin-bottom:.35rem; }
.ss-okbox p { margin:0; font-size:.92rem; color:#ecfdf5 !important; }
.ss-okbox p strong { color:#fff; }
.ss-msg { border-radius:12px; padding:.8rem 1rem; font-size:.9rem; margin-bottom:1rem; }
.ss-msg.ok { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
.ss-msg.err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.ss-doc { background:#fff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; }
.ss-doc .hd { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.3rem 1.5rem; border-bottom:1px solid #e5e7eb; }
.ss-doc .hd .meta { text-align:right; font-size:.85rem; color:#4b5563; line-height:1.85; }
.ss-doc .hd .meta b { color:var(--ss-ink); }
@media (max-width:576px) { .ss-doc .hd .meta { text-align:left; } }
.ss-doc .to { padding:1rem 1.5rem; border-bottom:1px solid #e5e7eb; font-size:.9rem; color:#4b5563; line-height:1.9; }
.ss-doc .to b { color:var(--ss-ink); }
.ss-items { width:100%; border-collapse:collapse; font-size:.9rem; }
.ss-items th { background:#f9fafb; text-align:left; padding:.6rem 1.5rem; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; border-bottom:1px solid #e5e7eb; }
.ss-items td { padding:.8rem 1.5rem; border-bottom:1px solid #f3f4f6; color:#374151; vertical-align:top; }
.ss-items .amt { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ss-tot { padding:1rem 1.5rem; background:#fafafa; }
.ss-tot .l { display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; font-size:.92rem; color:#4b5563; }
.ss-tot .l b { color:var(--ss-ink); font-variant-numeric:tabular-nums; }
.ss-tot .l.grand { border-top:1px solid #e5e7eb; margin-top:.35rem; padding-top:.6rem; font-size:1.02rem; }
.ss-tot .l.grand b { color:var(--ss-red); font-size:1.25rem; }
.ss-tot .l.due b { color:#b45309; }
.ss-pbadge { display:inline-block; padding:3px 11px; border-radius:50px; font-size:.75rem; font-weight:800; }
.ss-pbadge.unpaid { background:#fef2f2; color:#b91c1c; }
.ss-pbadge.pending { background:#fffbeb; color:#b45309; }
.ss-pbadge.partial { background:#eff6ff; color:#1d4ed8; }
.ss-pbadge.paid { background:#f0fdf4; color:#15803d; }
.ss-panel { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1.2rem 1.35rem; margin-top:1.1rem; }
.ss-panel h3 { font-size:1rem; font-weight:800; color:var(--ss-ink); margin-bottom:.6rem; }
.ss-paygrid { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
@media (max-width:768px) { .ss-paygrid { grid-template-columns:1fr; } }
.ss-mtabs { display:flex; gap:.4rem; margin-bottom:.7rem; flex-wrap:wrap; }
.ss-mtabs button { flex:1; min-width:84px; border:1.5px solid #e5e7eb; background:#fff; border-radius:10px; padding:.45rem .5rem; font-weight:800; font-size:.85rem; cursor:pointer; font-family:inherit; color:#374151; }
.ss-mtabs button.on { border-color:var(--mc,#e2136e); color:var(--mc,#e2136e); background:color-mix(in srgb, var(--mc,#e2136e) 7%, #fff); }
.ss-mbox { --mc:#e2136e; border:1px solid color-mix(in srgb, var(--mc) 35%, #fff); background:color-mix(in srgb, var(--mc) 6%, #fff); border-radius:13px; padding:.9rem 1rem; }
.ss-mbox[hidden] { display:none !important; }
.ss-mbox .top { display:flex; align-items:center; gap:.6rem; margin-bottom:.65rem; }
.ss-mbox .lg { width:36px; height:36px; border-radius:9px; background:var(--mc); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; flex-shrink:0; }
.ss-mbox .num { font-size:1.28rem; font-weight:800; color:var(--mc); letter-spacing:.02em; line-height:1.2; }
.ss-mbox .typ { font-size:.76rem; color:#4b5563; }
.ss-mbox .cp { margin-left:auto; background:var(--mc); color:#fff; border:0; border-radius:7px; padding:.35rem .7rem; font-size:.78rem; font-weight:700; cursor:pointer; font-family:inherit; }
.ss-two { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.ss-cell { background:#fff; border:1px dashed color-mix(in srgb, var(--mc) 45%, #fff); border-radius:9px; padding:.45rem .65rem; position:relative; }
.ss-cell span { display:block; font-size:.72rem; color:#4b5563; font-weight:600; }
.ss-cell b { display:block; font-size:1.08rem; color:var(--mc); line-height:1.35; }
.ss-cell.ref b { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.ss-steps-mini { list-style:none; padding:0; margin:.65rem 0 0; counter-reset:m; }
.ss-steps-mini li { counter-increment:m; position:relative; padding:.2rem 0 .2rem 1.65rem; font-size:.84rem; color:#374151; line-height:1.6; }
.ss-steps-mini li::before { content:counter(m); position:absolute; left:0; top:.28rem; width:18px; height:18px; border-radius:50%; background:var(--mc,#e2136e); color:#fff; font-size:.66rem; display:flex; align-items:center; justify-content:center; font-weight:800; }
.ss-pay label { display:block; font-weight:600; font-size:.88rem; margin:.75rem 0 .3rem; color:#1f2937; }
.ss-pay .fld { width:100%; padding:.65rem .85rem; border:1.5px solid #e5e7eb; border-radius:10px; font-size:.94rem; font-family:inherit; color:var(--ss-ink); background:#fff; }
.ss-pay .fld:focus { outline:none; border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.ss-pay .ph { display:flex; }
.ss-pay .ph .pfx { display:flex; align-items:center; padding:0 .75rem; background:#f3f4f6; border:1.5px solid #e5e7eb; border-right:0; border-radius:10px 0 0 10px; font-weight:700; font-size:.86rem; color:#4b5563; }
.ss-pay .ph .fld { border-radius:0 10px 10px 0; }
.ss-pay .hint { color:#6b7280; font-size:.78rem; margin:.3rem 0 0; }
.ss-send { width:100%; margin-top:1rem; padding:.85rem; border:0; border-radius:11px; background:linear-gradient(135deg,#dc2626,#f97316); color:#fff; font-family:inherit; font-weight:800; font-size:1rem; cursor:pointer; }
.ss-hist { width:100%; border-collapse:collapse; font-size:.86rem; }
.ss-hist th { text-align:left; padding:.5rem .6rem; background:#f9fafb; color:#6b7280; font-size:.75rem; text-transform:uppercase; }
.ss-hist td { padding:.55rem .6rem; border-bottom:1px solid #f3f4f6; color:#374151; }
.st-pending { color:#b45309; font-weight:700; } .st-verified { color:#15803d; font-weight:700; } .st-rejected { color:#b91c1c; font-weight:700; }
.ss-join { background:linear-gradient(135deg,#eff6ff,#eef2ff); border:1px solid #bfdbfe; }
.ss-join .body { font-size:.92rem; color:#1e3a8a; line-height:1.8; word-break:break-word; }
.ss-join .body a { color:#1d4ed8; font-weight:700; }
.ss-pay .sx-policy summary { margin:0; }
.ss-pay-acts { display:flex; gap:.55rem; flex-wrap:wrap; justify-content:center; margin-top:1.1rem; }
.ss-pay-acts a, .ss-pay-acts button { border:1px solid #e5e7eb; background:#fff; color:#374151; border-radius:10px; padding:.55rem 1rem; font-family:inherit; font-size:.86rem; font-weight:700; text-decoration:none; cursor:pointer; }
@media print {
  nav, footer, .ss-pay-acts, .ss-pay form, .ss-mtabs, .ss-mbox .cp, #aiw, #aiwPanel, .btn-back-top { display:none !important; }
  .ss-pay { padding:0; } .ss-doc { border:0; }
  .sx-policy ul { display:block !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-badge.open .dot, .cp-urgent, .cp-urgent .dot, .ss-seats .txt.low { animation:none; }
  .ss-card, .ss-card:hover, .ss-mini, .ss-mini:hover, .cp-btn, .cp-btn:hover { transition:none; transform:none; }
}