/* ==========================================================================
   Uppen theme v7: bright, modern, brand-led
   Brand blue #0057C2 (from the logo) · Poppins headings · Inter body
   ========================================================================== */
:root {
  --brand:#0057C2; --brand-600:#00469C; --brand-400:#2F7BE0; --brand-50:#EEF4FD; --brand-100:#DCE8FB;
  --ink:#0F172A; --body:#334155; --muted:#64748B; --line:#E6EAF2; --soft:#F6F8FC; --card:#FFFFFF; --page:#FFFFFF;
  --sun:#FDB022;
  --r-card:18px; --sh-card:0 1px 2px rgba(15,23,42,.04), 0 6px 24px -10px rgba(15,23,42,.12);
  --sh-hover:0 2px 4px rgba(15,23,42,.05), 0 22px 44px -18px rgba(0,87,194,.32);
  /* map the older design tokens onto the new brand */
  --primary:var(--brand); --primary-hi:var(--brand-600); --primary-lo:var(--brand-50);
  --accent:var(--brand); --accent-lo:var(--brand-50);
  --teal-700:var(--brand); --teal-600:var(--brand-600); --teal-500:var(--brand-400); --teal-50:var(--brand-50); --teal-100:var(--brand-100);
  --text:var(--ink); --text-body:var(--body); --border:var(--line); --bg:var(--page); --bg-alt:var(--soft); --surface:var(--card);
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif:'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --display:'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --grad:linear-gradient(135deg,#0057C2 0%,#2F7BE0 100%);
}
[data-theme=dark] {
  --brand:#5B9BF5; --brand-600:#7AAEF7; --brand-400:#5B9BF5; --brand-50:#12213F; --brand-100:#1A2D52;
  --ink:#EEF2F9; --body:#C3CDDC; --muted:#8C9AB0; --line:#1F2A40; --soft:#0E1628; --card:#121B2E; --page:#0A101E;
  --sh-card:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --sh-hover:0 2px 6px rgba(0,0,0,.35), 0 24px 48px -18px rgba(0,0,0,.7);
  --text:var(--ink); --text-body:var(--body); --border:var(--line); --bg:var(--page); --bg-alt:var(--soft); --surface:var(--card); --surface-2:var(--soft); --surface-3:#16213A;
  --primary:var(--brand); --primary-hi:var(--brand-600); --primary-lo:var(--brand-50); --accent:var(--brand); --accent-lo:var(--brand-50);
}
body { font-family:var(--sans); color:var(--body); background:var(--page); letter-spacing:-.003em; }
h1,h2,h3,h4,h5 { font-family:var(--display); color:var(--ink); letter-spacing:-.02em; font-weight:700; }
.btn { font-family:var(--sans); border-radius:12px; }
.btn-primary, .btn-accent { background:var(--brand); }
[data-theme=dark] .btn-primary, [data-theme=dark] .btn-accent { color:#06122B; }

/* ---------- header */
.topbar { background:color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line); }
[data-theme=dark] .topbar { background:color-mix(in srgb, var(--page) 82%, transparent); }
.topbar-in { gap:10px; max-width:1200px; height:64px; }
.brand { display:flex; align-items:center; }
.brand-logo { height:26px !important; width:auto; }
.brand .logo-dark { display:none; }
[data-theme=dark] .brand .logo-light { display:none; }
[data-theme=dark] .brand .logo-dark { display:block; }
.menu-btn { display:inline-grid !important; border-radius:12px; }
.topnav { display:none; gap:2px; margin-left:22px; }
.topnav a { padding:8px 14px; border-radius:10px; font-weight:600; font-size:14.5px; color:var(--body); text-decoration:none; }
.topnav a:hover { background:var(--soft); color:var(--ink); text-decoration:none; }
.topnav a.on { color:var(--brand); background:var(--brand-50); }
.top-cta { display:inline-flex; align-items:center; padding:9px 16px; border-radius:12px; background:var(--brand); color:#fff !important; font-weight:700; font-size:14px; text-decoration:none !important; white-space:nowrap; box-shadow:0 6px 16px -6px rgba(0,87,194,.6); }
.top-cta:hover { background:var(--brand-600); }
[data-theme=dark] .top-cta { color:#06122B !important; }
@media (min-width:900px) { .topnav { display:flex; } }
@media (max-width:420px) { .top-cta { padding:8px 12px; font-size:13px; } .brand-logo { height:22px !important; } }

/* theme switch: always visible, top-right, next to Sign in */
.theme-sw { display:inline-flex !important; align-items:center; position:relative; width:60px; height:32px; flex:none; border-radius:999px; border:1px solid var(--line); background:var(--soft); cursor:pointer; padding:0; }
.theme-sw .knob { position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(15,23,42,.2); display:grid; place-items:center; transition:transform .25s cubic-bezier(.3,.7,.4,1), background .25s; color:var(--sun); }
.theme-sw .knob svg { width:15px; height:15px; }
.theme-sw .ic-moon { display:none; }
.theme-sw .track-ic { position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--muted); display:flex; }
.theme-sw .track-ic svg { width:13px; height:13px; }
[data-theme=dark] .theme-sw { background:#16213A; border-color:#24324F; }
[data-theme=dark] .theme-sw .knob { transform:translateX(28px); background:#0A101E; color:#A9C8FF; }
[data-theme=dark] .theme-sw .ic-sun { display:none; }
[data-theme=dark] .theme-sw .ic-moon { display:block; }
[data-theme=dark] .theme-sw .track-ic { right:auto; left:9px; }
.theme-sw:focus-visible { outline:3px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset:2px; }

/* drawer polish */
.drawer { font-family:var(--sans); }
.drawer a { border-radius:10px; }

/* ---------- layout helpers */
.pro-wrap { max-width:1200px; margin:0 auto; padding:0 20px; }
.pro-sec { padding:64px 0; }
.pro-sec.alt { background:var(--soft); }
.pro-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--brand); background:var(--brand-50); padding:6px 12px; border-radius:999px; margin-bottom:14px; letter-spacing:.01em; }
.pro-h2 { font-size:clamp(26px,3.2vw,36px); line-height:1.15; margin:0 0 10px; font-weight:700; }
.pro-lead { color:var(--muted); font-size:17px; max-width:680px; margin:0 0 30px; }
.pro-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; border-radius:14px; font-weight:700; font-size:15px; text-decoration:none !important; border:1.5px solid transparent; cursor:pointer; font-family:var(--sans); transition:transform .15s, box-shadow .15s, background .15s; }
.pro-btn:hover { transform:translateY(-1px); }
.pro-btn.primary { background:var(--brand); color:#fff; box-shadow:0 10px 24px -10px rgba(0,87,194,.7); }
.pro-btn.primary:hover { background:var(--brand-600); }
[data-theme=dark] .pro-btn.primary { color:#06122B; }
.pro-btn.ghost { border-color:var(--line); color:var(--ink); background:var(--card); }
.pro-btn.ghost:hover { border-color:var(--brand); color:var(--brand); }

/* ---------- hero */
.pro-hero { position:relative; overflow:hidden; padding:64px 0 72px; background:
  radial-gradient(700px 380px at 92% 8%, rgba(47,123,224,.16), transparent 70%),
  radial-gradient(520px 320px at 0% 100%, rgba(0,87,194,.08), transparent 70%), var(--page); }
[data-theme=dark] .pro-hero { background:radial-gradient(700px 380px at 92% 8%, rgba(91,155,245,.18), transparent 70%), radial-gradient(520px 320px at 0% 100%, rgba(91,155,245,.08), transparent 70%), var(--page); }
.hero-grid { display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
@media (min-width:1000px) { .hero-grid { grid-template-columns:1.15fr .85fr; } }
.pro-hero h1 { font-size:clamp(34px,5.4vw,60px); line-height:1.05; margin:0 0 18px; font-weight:800; letter-spacing:-.035em; }
.pro-hero h1 .hl { color:var(--brand); position:relative; white-space:nowrap; }
.pro-hero h1 .hl::after { content:""; position:absolute; left:0; right:0; bottom:.04em; height:.22em; background:color-mix(in srgb, var(--brand) 18%, transparent); border-radius:6px; z-index:-1; }
.pro-hero p.sub { font-size:clamp(16.5px,2vw,19px); color:var(--muted); max-width:580px; margin:0 0 28px; }
.hero-search { position:relative; max-width:580px; margin-bottom:22px; }
.hero-search input { width:100%; box-sizing:border-box; padding:17px 18px 17px 52px; border-radius:16px; border:1.5px solid var(--line); font-size:16px; background:var(--card); color:var(--ink); box-shadow:var(--sh-card); font-family:var(--sans); transition:border-color .15s, box-shadow .15s; }
.hero-search input:focus { outline:0; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.hero-search > svg { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--muted); }
.hero-results { position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-hover); overflow:hidden; z-index:30; }
.hero-results a { display:flex; gap:12px; align-items:center; padding:12px 16px; color:var(--ink); text-decoration:none; border-top:1px solid var(--line); font-weight:600; }
.hero-results a:first-child { border-top:0; }
.hero-results a:hover, .hero-results a.sel { background:var(--brand-50); }
.hr-code { font:700 11.5px/1 ui-monospace,monospace; background:var(--brand-50); color:var(--brand); padding:6px 8px; border-radius:8px; }
.hr-none { padding:14px 16px; color:var(--muted); }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; }
.hero-trust { display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; color:var(--muted); font-size:14px; font-weight:600; }
.hero-trust span { display:inline-flex; align-items:center; gap:7px; }
.hero-trust i { width:20px; height:20px; border-radius:50%; background:#E7F7EE; color:#0E9F55; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:800; }
[data-theme=dark] .hero-trust i { background:#0F2A1D; color:#5FD48A; }
.hero-continue { margin-top:24px; display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-card); color:var(--ink); text-decoration:none !important; max-width:580px; }
.hero-continue .hc-ic { width:42px; height:42px; border-radius:12px; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none; }
.hero-continue small { display:block; color:var(--brand); font-weight:700; font-size:12px; }
.hero-continue span.t { display:block; color:var(--muted); font-size:13.5px; }

/* hero visual: stacked app preview cards (desktop) */
.hero-art { display:none; position:relative; height:430px; }
@media (min-width:1000px) { .hero-art { display:block; } }
.ha-card { position:absolute; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-hover); padding:20px; }
.ha-q { left:4%; right:8%; top:30px; }
.ha-q .ha-tag { font-size:11.5px; font-weight:700; color:var(--brand); background:var(--brand-50); padding:5px 10px; border-radius:999px; display:inline-block; }
.ha-q h4 { margin:12px 0 14px; font-size:16px; line-height:1.4; font-family:var(--display); }
.ha-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--line); border-radius:12px; margin-bottom:8px; font-size:14px; font-weight:600; color:var(--ink); }
.ha-opt b { width:24px; height:24px; border-radius:8px; background:var(--soft); display:grid; place-items:center; font-size:12px; color:var(--muted); }
.ha-opt.ok { border-color:#16A34A; background:color-mix(in srgb, #16A34A 8%, var(--card)); }
.ha-opt.ok b { background:#16A34A; color:#fff; }
.ha-m { right:0; bottom:20px; width:210px; }
.ha-m .big { font:800 34px/1 var(--display); color:var(--ink); }
.ha-m small { color:var(--muted); font-weight:600; font-size:12.5px; }
.ha-ring { display:flex; gap:4px; margin-top:12px; }
.ha-ring i { flex:1; height:8px; border-radius:4px; background:var(--brand-100); }
.ha-ring i.on { background:var(--brand); }
.ha-s { left:0; bottom:48px; width:200px; display:flex; gap:12px; align-items:center; }
.ha-s .ic { width:40px; height:40px; border-radius:12px; background:#FFF4E0; color:#D97706; display:grid; place-items:center; flex:none; }
[data-theme=dark] .ha-s .ic { background:#2A1E08; }
.ha-s b { display:block; color:var(--ink); font-size:14px; }
.ha-s small { color:var(--muted); font-size:12.5px; }

/* ---------- stats */
.pro-stats { padding:0 0 8px; background:var(--page); }
.pro-stats .pro-wrap { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:760px) { .pro-stats .pro-wrap { grid-template-columns:repeat(4,1fr); } }
.pro-stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; box-shadow:var(--sh-card); }
.pro-stat b { display:block; font:800 30px/1.1 var(--display); color:var(--ink); letter-spacing:-.02em; }
.pro-stat span { font-size:13.5px; color:var(--muted); font-weight:600; }
.pro-stat .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--brand); margin-right:6px; }

/* ---------- subject areas (each has its own colour) */
.area-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.area-card { --ac:var(--brand); display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:var(--r-card); border:1px solid var(--line); background:var(--card); text-decoration:none !important; color:inherit; box-shadow:var(--sh-card); transition:transform .18s, box-shadow .18s, border-color .18s; }
.area-card:hover { transform:translateY(-4px); box-shadow:var(--sh-hover); border-color:color-mix(in srgb, var(--ac) 40%, var(--line)); }
.area-ic { width:48px; height:48px; border-radius:14px; background:color-mix(in srgb, var(--ac) 13%, var(--card)); color:var(--ac); display:grid; place-items:center; }
.area-card h3 { margin:6px 0 0; font-size:17px; }
.area-card p { margin:0; font-size:14px; color:var(--muted); flex:1; line-height:1.55; }
.area-card .area-n { font-size:13.5px; font-weight:700; color:var(--ac); }

/* ---------- catalogue */
.cat-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:24px; }
.chip { padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-weight:600; font-size:14px; cursor:pointer; color:var(--body); font-family:var(--sans); transition:all .15s; }
.chip:hover { border-color:var(--brand); color:var(--brand); }
.chip.on { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 6px 14px -6px rgba(0,87,194,.6); }
[data-theme=dark] .chip.on { color:#06122B; }
.cat-bar select { padding:9px 14px; border-radius:999px; border:1px solid var(--line); font-weight:600; font-size:14px; background:var(--card); color:var(--body); font-family:var(--sans); }
.cat-count { margin-left:auto; font-size:13.5px; color:var(--muted); font-weight:600; }
.pc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px; }
.pc { --ac:var(--brand); display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); text-decoration:none !important; color:inherit; box-shadow:var(--sh-card); transition:transform .18s, box-shadow .18s, border-color .18s; position:relative; }
.pc:hover { transform:translateY(-4px); box-shadow:var(--sh-hover); border-color:color-mix(in srgb, var(--ac) 35%, var(--line)); }
.pc-head { display:flex; align-items:center; gap:12px; }
.pc-ic { width:44px; height:44px; border-radius:13px; background:color-mix(in srgb, var(--ac) 13%, var(--card)); color:var(--ac); display:grid; place-items:center; flex:none; }
.pc-code { font:700 11.5px/1 ui-monospace,monospace; color:var(--muted); letter-spacing:.04em; }
.pc-area { font-size:12px; font-weight:700; color:var(--ac); }
.pc h3 { margin:0; font-size:17px; line-height:1.3; font-weight:600; }
.pc p { margin:0; font-size:14px; color:var(--muted); flex:1; line-height:1.55; }
.pc-meta { display:flex; flex-wrap:wrap; gap:6px; }
.pc-meta span { font-size:12px; font-weight:600; color:var(--body); background:var(--soft); padding:5px 9px; border-radius:8px; }
.pc-foot { display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:700; padding-top:12px; border-top:1px solid var(--line); }
.pc-foot .free { color:#0E9F55; }
[data-theme=dark] .pc-foot .free { color:#5FD48A; }
.pc-foot .go { color:var(--brand); }
.pc-bar { height:6px; background:var(--soft); border-radius:6px; overflow:hidden; }
.pc-bar i { display:block; height:100%; background:var(--ac); border-radius:6px; }
.pc-empty { padding:36px; text-align:center; color:var(--muted); border:1.5px dashed var(--line); border-radius:var(--r-card); }

/* card inner link (card is now a div wrapper so it can hold a pin/remove button) */
.pc-link { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; color:inherit; text-decoration:none; }
/* pin / remove button on course cards (my-courses) */
.pc-pin { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer;
  display:grid; place-items:center; font-size:15px; line-height:1; padding:0; }
.pc-pin:hover { color:var(--brand); border-color:var(--brand); }
.pc-pin.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.pc-pin.pc-remove { width:auto; padding:0 12px; font-size:12.5px; font-weight:700; border-radius:9px; }
.pc-pin.pc-remove:hover { color:var(--bad-700); border-color:var(--bad-700); }

/* ---------- steps + cta */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.step { padding:26px; border-radius:var(--r-card); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-card); }
.step .n { width:46px; height:46px; border-radius:14px; background:var(--brand-50); color:var(--brand); display:grid; place-items:center; margin-bottom:14px; }
.step h3 { margin:0 0 6px; font-size:18px; }
.step p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.cta-band { background:var(--grad); color:#fff; border-radius:24px; padding:40px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.1); }
.cta-band h2 { margin:0 0 6px; font-size:28px; color:#fff; }
.cta-band p { margin:0; color:rgba(255,255,255,.85); }
.cta-band .pro-btn { background:#fff; color:#0057C2; position:relative; z-index:1; }

/* ---------- course page */
.cp-hero { --ac:var(--brand); padding:30px 0 40px; background:
  radial-gradient(640px 300px at 95% 0%, color-mix(in srgb, var(--ac) 14%, transparent), transparent 70%), var(--soft); border-bottom:1px solid var(--line); }
.crumbs { font-size:13.5px; color:var(--muted); margin-bottom:18px; font-weight:500; }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--brand); }
.cp-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cp-badges span { font:700 12px/1 ui-monospace,monospace; padding:7px 10px; border-radius:8px; background:var(--card); border:1px solid var(--line); color:var(--ink); }
.cp-badges .area { font-family:var(--sans); color:var(--ac); background:color-mix(in srgb, var(--ac) 12%, var(--card)); border-color:transparent; }
.cp-hero h1 { font-size:clamp(30px,4.4vw,46px); margin:0 0 10px; line-height:1.1; letter-spacing:-.03em; font-weight:800; }
.cp-hero .cp-tag { font-size:17.5px; color:var(--muted); max-width:760px; margin:0 0 24px; }
.facts { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:860px; margin-bottom:24px; }
@media (min-width:700px) { .facts { grid-template-columns:repeat(5,1fr); } }
.facts div { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.facts b { display:block; font:700 20px/1.2 var(--display); color:var(--ink); }
.facts span { font-size:12px; color:var(--muted); font-weight:600; }
.cp-hero .ch-act { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0; }
.cp-hero .ch-act .btn { background:var(--brand); color:#fff; border:0; padding:14px 22px; border-radius:14px; font-weight:700; box-shadow:0 10px 24px -10px rgba(0,87,194,.7); }
[data-theme=dark] .cp-hero .ch-act .btn { color:#06122B; }
.cp-body { display:grid; grid-template-columns:1fr; gap:32px; padding:40px 0 64px; }
@media (min-width:980px) { .cp-body { grid-template-columns:minmax(0,1fr) 340px; } .cp-side { position:sticky; top:84px; align-self:start; } }
.cp-sec { margin-bottom:40px; }
.cp-sec h2 { font-size:22px; margin:0 0 16px; }
.learn { display:grid; grid-template-columns:1fr; gap:12px 24px; list-style:none; padding:0; margin:0; }
@media (min-width:700px) { .learn { grid-template-columns:1fr 1fr; } }
.learn li { display:flex; gap:10px; font-size:15px; color:var(--body); }
.learn li::before { content:"✓"; flex:none; width:22px; height:22px; border-radius:50%; background:#E7F7EE; color:#0E9F55; font-weight:800; display:grid; place-items:center; font-size:12px; margin-top:1px; }
[data-theme=dark] .learn li::before { background:#0F2A1D; color:#5FD48A; }
.dom { border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; margin-bottom:14px; background:var(--card); box-shadow:var(--sh-card); }
.dom-h { display:flex; align-items:center; gap:14px; padding:16px 18px; }
.dom-n { width:34px; height:34px; border-radius:10px; background:var(--brand-50); color:var(--brand); display:grid; place-items:center; font:700 14px/1 var(--display); }
.dom-h b { flex:1; font-size:16px; color:var(--ink); font-family:var(--display); font-weight:600; }
.dom-w { font-size:13px; font-weight:700; color:var(--brand); background:var(--brand-50); padding:5px 10px; border-radius:999px; }
.wbar { height:4px; background:var(--soft); margin:0 18px 6px; border-radius:4px; overflow:hidden; }
.wbar i { display:block; height:100%; background:var(--brand); border-radius:4px; }
.dom .trow { border-top:1px solid var(--line); }
.trow-n { background:var(--soft) !important; color:var(--ink) !important; }
.side-card { border:1px solid var(--line); border-radius:22px; padding:24px; background:var(--card); box-shadow:var(--sh-hover); }
.side-card .price { font:800 26px/1.2 var(--display); color:var(--ink); }
.side-card ul { list-style:none; padding:0; margin:18px 0; display:grid; gap:10px; }
.side-card li { display:flex; gap:10px; font-size:14.5px; color:var(--body); }
.side-card li::before { content:"✓"; color:#0E9F55; font-weight:800; }
.side-card .free-note { font-size:13px; color:var(--muted); margin-top:10px; }
.side-card .ownd { display:inline-block; background:#E7F7EE; color:#0B7A41; font-weight:700; padding:6px 12px; border-radius:999px; font-size:13px; }
.side-card .btn { width:100%; justify-content:center; border-radius:14px; }
.info-tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); }
.info-tbl th, .info-tbl td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.info-tbl tr:last-child th, .info-tbl tr:last-child td { border-bottom:0; }
.info-tbl th { width:34%; color:var(--muted); font-weight:600; background:var(--soft); }
.res-list a { display:flex; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; margin-bottom:10px; color:var(--ink); background:var(--card); text-decoration:none !important; transition:border-color .15s; }
.res-list a:hover { border-color:var(--brand); }
.res-list a small { color:var(--muted); }

/* ---------- footer */
.pro-foot { background:#0A101E; color:#9AA8BF; padding:56px 0 24px; }
.pro-foot .cols { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (min-width:800px) { .pro-foot .cols { grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.pro-foot h4 { color:#fff; font:600 14px/1.2 var(--display); margin:0 0 14px; letter-spacing:0; }
.pro-foot a { display:block; color:#9AA8BF; text-decoration:none; font-size:14px; padding:5px 0; }
.pro-foot a:hover { color:#fff; text-decoration:none; }
.pro-foot .about img { height:26px; width:auto; }
.pro-foot .about p { font-size:14px; margin:14px 0 0; max-width:320px; line-height:1.6; }
.pro-foot .legal { border-top:1px solid rgba(255,255,255,.08); margin-top:36px; padding-top:20px; font-size:13px; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; }
.pro-foot .legal span a { display:inline; margin-left:16px; }