/* =========================================================
   BeeProton AI — design system
   Honey amber on deep navy · light & dark themes
   ========================================================= */
:root {
  --amber-50: #FFF8E6; --amber-100: #FFEDC2; --amber-300: #FFCF5C; --amber-400: #FFBE2E;
  --amber-500: #F5A524; --amber-600: #D98A0B; --amber-700: #A86608;
  --navy-950: #060B16; --navy-900: #0A1222; --navy-850: #0E1830; --navy-800: #131F3B;
  --navy-700: #1C2B4F; --navy-600: #2A3C66; --navy-400: #6B7FA8; --navy-300: #9AA9C7;

  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px;
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --container: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* light theme tokens */
  --bg: #F7F8FC; --bg-alt: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F3F9; --surface-3: #E7EAF3;
  --border: #E2E6F0; --border-strong: #CBD2E1;
  --text: #0E1830; --text-2: #3B4865; --muted: #66728D;
  --accent: #D98A0B; --accent-strong: #A86608; --accent-bg: #FFF4DA; --on-accent: #1A1203;
  --brand-grad: linear-gradient(135deg, #FFCF5C 0%, #F5A524 45%, #E07B0A 100%);
  --hero-bg: radial-gradient(1200px 500px at 80% -10%, rgba(245,165,36,.18), transparent 60%),
             radial-gradient(900px 500px at -10% 10%, rgba(42,60,102,.10), transparent 60%);
  --shadow-sm: 0 1px 2px rgba(14,24,48,.06), 0 1px 1px rgba(14,24,48,.04);
  --shadow: 0 10px 30px -12px rgba(14,24,48,.18), 0 2px 6px rgba(14,24,48,.05);
  --shadow-lg: 0 30px 60px -20px rgba(14,24,48,.28);
  --ok: #0E9F6E; --ok-bg: #E3F8EF; --warn: #B45309; --warn-bg: #FEF3C7; --err: #DC2626; --err-bg: #FEE2E2;
  --info: #2563EB; --info-bg: #DBEAFE;
  --code-bg: #0E1830; --code-text: #E6EBF5;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--navy-950); --bg-alt: var(--navy-900); --surface: var(--navy-900); --surface-2: var(--navy-850); --surface-3: var(--navy-800);
    --border: #1C2946; --border-strong: #2A3C66;
    --text: #EEF2FA; --text-2: #C3CCE0; --muted: #8E9BBA;
    --accent: #FFBE2E; --accent-strong: #FFCF5C; --accent-bg: rgba(245,165,36,.12); --on-accent: #1A1203;
    --hero-bg: radial-gradient(1100px 520px at 85% -10%, rgba(245,165,36,.20), transparent 60%),
               radial-gradient(900px 600px at -10% 20%, rgba(42,60,102,.55), transparent 60%);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 12px 30px -12px rgba(0,0,0,.6); --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.7);
    --ok-bg: rgba(14,159,110,.15); --warn-bg: rgba(180,83,9,.18); --err-bg: rgba(220,38,38,.15); --info-bg: rgba(37,99,235,.18);
    --ok: #34D399; --warn: #FBBF24; --err: #F87171; --info: #60A5FA;
    --code-bg: #070C18;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--navy-950); --bg-alt: var(--navy-900); --surface: var(--navy-900); --surface-2: var(--navy-850); --surface-3: var(--navy-800);
  --border: #1C2946; --border-strong: #2A3C66;
  --text: #EEF2FA; --text-2: #C3CCE0; --muted: #8E9BBA;
  --accent: #FFBE2E; --accent-strong: #FFCF5C; --accent-bg: rgba(245,165,36,.12); --on-accent: #1A1203;
  --hero-bg: radial-gradient(1100px 520px at 85% -10%, rgba(245,165,36,.20), transparent 60%),
             radial-gradient(900px 600px at -10% 20%, rgba(42,60,102,.55), transparent 60%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 12px 30px -12px rgba(0,0,0,.6); --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.7);
  --ok-bg: rgba(14,159,110,.15); --warn-bg: rgba(180,83,9,.18); --err-bg: rgba(220,38,38,.15); --info-bg: rgba(37,99,235,.18);
  --ok: #34D399; --warn: #FBBF24; --err: #F87171; --info: #60A5FA;
  --code-bg: #070C18;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 98px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--text); font-weight: 750; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
code, pre, kbd { font-family: var(--mono); font-size: .9em; }
::selection { background: var(--amber-300); color: #1a1203; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 820px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-sm { padding: 48px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xs { font-size: .78rem; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; }
.ic { flex-shrink: 0; vertical-align: middle; }
.text-grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- section heads ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; }
.section-head.center .eyebrow::before { display: none; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-2); }

/* ---------- buttons ---------- */
.btn { --b: var(--surface); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px;
  font: 650 .95rem/1.1 var(--font); border: 1px solid var(--border); background: var(--b); color: var(--text); cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s; white-space: nowrap; text-decoration: none; }
.btn:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }
.btn-primary { background: var(--brand-grad); color: var(--on-accent); border-color: transparent; box-shadow: 0 8px 24px -10px rgba(245,165,36,.7); }
.btn-primary:hover { color: var(--on-accent); border-color: transparent; box-shadow: 0 14px 30px -10px rgba(245,165,36,.8); }
.btn-dark { background: var(--navy-900); color: #fff; border-color: var(--navy-700); }
.btn-dark:hover { color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 8px 13px; font-size: .85rem; border-radius: 10px; }
.btn-lg { padding: 16px 26px; font-size: 1.02rem; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-icon { padding: 9px; border-radius: 10px; }

/* ---------- badges & chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 650;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.badge-accent { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.badge-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge-warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge-err { background: var(--err-bg); color: var(--err); border-color: transparent; }
.badge-info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .875rem; font-weight: 600; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; gap: 14px; height: 78px; }
.site-header .container { max-width: 1320px; }
.logo { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.2rem; color: var(--text); letter-spacing: -.02em; }
/* name on the first line, the descriptor on a second — the same lockup as the full logo, so the
   header reads as the brand rather than as a word beside a picture */
.logo-words { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.12; }
/* the name has to stay one flex item, or "AI" drops onto a line of its own */
.logo-name { display: block; white-space: nowrap; }
/* the footer sits on a dark panel in both themes and has room, so it carries the mark larger */
.logo-lg { font-size: 1.32rem; gap: 13px; }
.logo-lg .logo-img { width: 62px; height: 62px; }
.logo-lg small { font-size: .72rem; }
.logo:hover { color: var(--text); }
.logo-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-grad); display: grid; place-items: center; color: #1A1203; box-shadow: 0 6px 18px -6px rgba(245,165,36,.8); }
.logo-img { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; border-radius: 50%; }
/* The mark is drawn for a light background: two lobes of the atom ring are filled white, so on a
   dark header they read as a fault rather than as artwork. The logo itself is left exactly as it
   is — instead, dark surfaces put a deliberate light disc behind it, so that white belongs to a
   badge. The footer is dark in both themes, so it always takes the disc. */
:root[data-theme="dark"] .logo-img, .site-footer .logo-img {
  padding: 2px; box-sizing: border-box;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f4f9ff 68%, #e9f2ff 100%);
  border: 1px solid rgba(125,193,255,.55);
  box-shadow: 0 3px 12px -3px rgba(43,142,255,.5);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-img {
  padding: 2px; box-sizing: border-box;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f4f9ff 68%, #e9f2ff 100%);
  border: 1px solid rgba(125,193,255,.55);
  box-shadow: 0 3px 12px -3px rgba(43,142,255,.5);
} }
.logo small { display: block; font-size: .67rem; font-weight: 650; color: var(--muted); letter-spacing: .055em;
  text-transform: uppercase; margin-top: 1px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; list-style: none; padding: 0; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 3px; padding: 8px 10px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: .92rem; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav-link:hover, .nav-item:focus-within > .nav-link, .nav-link.active { color: var(--text); background: var(--surface-2); }
.nav-link .star { color: var(--accent); margin-left: 2px; }
.mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); min-width: 280px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; opacity: 0; visibility: hidden;
  transition: .18s var(--ease); display: grid; gap: 2px; }
.mega::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.mega.cols-2 { grid-template-columns: repeat(2, minmax(220px, 1fr)); min-width: 520px; }
.mega.cols-3 { grid-template-columns: repeat(3, minmax(180px, 1fr)); min-width: 620px; }
.nav-item:hover > .mega, .nav-item:focus-within > .mega, .nav-item.open > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; color: var(--text); font-weight: 600; font-size: .9rem; }
.mega a:hover { background: var(--surface-2); color: var(--text); }
.mega a .mi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); flex-shrink: 0; }
.mega a span small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; line-height: 1.35; }
.mega .mega-foot { grid-column: 1 / -1; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-toggle { display: none; }
.theme-toggle span { display: inline-flex; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: inline; }

@media (max-width: 1360px) { .nav-actions .portal-label { display: none; } }
.nav-mobile-cta, .nav-toggle .i-close { display: none; }
@media (max-width: 1200px) {
  .nav { height: 64px; }
  .nav-links { position: fixed; top: 64px; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px);
    background: var(--bg); flex-direction: column; align-items: stretch; padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; margin: 0; gap: 0; z-index: 99;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
  body.nav-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  body.nav-open { overflow: hidden; }
  .nav-item { border-bottom: 1px solid var(--border); }
  .nav-link { width: 100%; justify-content: space-between; padding: 15px 6px; font-size: 1.02rem; border-radius: 0; background: none !important; }
  .nav-link .ic { transition: transform .2s; margin-left: auto; }
  .nav-link .star { margin-right: 0; }
  .nav-item.open > .nav-link { color: var(--accent); }
  .nav-item.open > .nav-link .ic { transform: rotate(180deg); }
  .mega, .mega.cols-2, .mega.cols-3 { position: static; transform: none !important; opacity: 1; visibility: visible; display: none; min-width: 0;
    box-shadow: none; border: 0; background: transparent; padding: 0 0 12px; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; border-radius: 0; }
  .mega::before { display: none; }
  .nav-item.open > .mega { display: grid; }
  .mega a { padding: 9px 8px; font-size: .88rem; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); }
  .mega a .mi { width: 28px; height: 28px; border-radius: 8px; }
  .mega a .mi .ic { width: 15px; height: 15px; }
  .mega a span small { display: none; }
  .mega .mega-foot { border-top: 0; margin-top: 4px; padding-top: 0; display: flex; flex-wrap: wrap; gap: 12px; }
  .mega .mega-foot a { background: none; border: 0; padding: 6px 2px; color: var(--accent); }
  .nav-mobile-cta { display: grid; gap: 10px; padding: 20px 0 8px; }
  .nav-search { max-width: none; }
  .nav-search input { padding: 12px 14px 12px 44px; border-radius: 12px; font-size: 1rem; }
  .nav-toggle { display: inline-flex; }
  body.nav-open .nav-toggle .i-open { display: none; }
  body.nav-open .nav-toggle .i-close { display: inline-flex; }
  .nav-toggle span { display: inline-flex; }
  .nav-actions .hide-m { display: none; }
  .messages { top: 76px; }
}
@media (max-width: 520px) {
  .mega, .mega.cols-2, .mega.cols-3 { grid-template-columns: 1fr; }
  .nav-actions .hide-xs { display: none; }
  .nav-actions { gap: 4px; }
  .logo { font-size: 1.04rem; gap: 9px; }
  .logo-mark { width: 32px; height: 32px; }
  .logo small { font-size: .6rem; letter-spacing: .04em; }
  .logo-img { width: 44px; height: 44px; }
  .container { padding: 0 16px; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); background: var(--hero-bg); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0l28 16v33L28 65 0 49V16zM28 98V65' fill='none' stroke='%23F5A524' stroke-opacity='.10'/%3E%3C/svg%3E");
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%); pointer-events: none; }
.hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 600px; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.hero-trust div { font-size: .85rem; color: var(--muted); }
.hero-trust strong { display: block; font-size: 1.6rem; color: var(--text); letter-spacing: -.02em; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.pill b { background: var(--brand-grad); color: #1a1203; padding: 3px 10px; border-radius: 999px; font-size: .75rem; }
.hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 22px; position: relative; }
.hero-card .hc-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); margin-bottom: 10px; font-weight: 600; font-size: .92rem; }
.hero-card .hc-row .mi { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
.hero-card .hc-row .badge { margin-left: auto; }
.hero-float { position: absolute; right: -18px; bottom: -22px; background: var(--navy-900); color: #fff; padding: 14px 18px; border-radius: 16px; box-shadow: var(--shadow-lg); font-size: .85rem; display: flex; gap: 10px; align-items: center; border: 1px solid var(--navy-700); }
.hero-float .ic { color: var(--amber-400); }
.page-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(36px, 5vw, 56px); background: var(--hero-bg); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-hero .lead { max-width: 720px; }

.hero-grid-service { grid-template-columns: 1.3fr .7fr; gap: 40px; }
.upload-grid { grid-template-columns: 1fr 2fr auto; align-items: end; }
.support-grid { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 960px) { .support-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .upload-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .hero-grid, .hero-grid-service { grid-template-columns: 1fr; }
  .hero-float { right: 10px; }
}

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; color: var(--muted); margin-bottom: 18px; list-style: none; padding: 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g-auto-sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 1000px) { .g-4 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.card-link { color: inherit; display: block; }
.card-link:hover, a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: inherit; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: .95rem; }
.card .card-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); margin-bottom: 18px; }
.card .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: .9rem; color: var(--accent); margin-top: 6px; }
.card-flat { background: var(--surface-2); border-color: transparent; }
.card-sm { padding: 18px; border-radius: var(--radius); }
.card .price-from { font-size: .85rem; color: var(--muted); margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; justify-content: space-between; align-items: center; }
.card .price-from b { color: var(--text); font-size: 1.05rem; }

/* tool cards */
.tool-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: .18s var(--ease); }
.tool-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); }
.tool-card .ti { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); flex-shrink: 0; }
.tool-card b { display: block; font-size: .95rem; margin-bottom: 2px; }
.tool-card small { color: var(--muted); font-size: .8rem; line-height: 1.4; display: block; }
.cat-image .ti { background: rgba(236,72,153,.12); color: #DB2777; }
.cat-pdf .ti { background: rgba(239,68,68,.12); color: #DC2626; }
.cat-excel .ti { background: rgba(16,185,129,.12); color: #059669; }
.cat-document .ti { background: rgba(59,130,246,.12); color: #2563EB; }
.cat-data .ti { background: rgba(139,92,246,.12); color: #7C3AED; }
.cat-ai .ti { background: var(--accent-bg); color: var(--accent); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: relative; }
.plan.hl { border: 2px solid var(--accent); box-shadow: 0 20px 50px -24px rgba(245,165,36,.6); }
.plan.hl::before { content: "Most popular"; position: absolute; top: -13px; left: 24px; background: var(--brand-grad); color: #1a1203; font-size: .72rem; font-weight: 750; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
.plan h3 { font-size: 1.05rem; color: var(--text-2); }
.plan .amount { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 6px 0 4px; }
.plan .amount sup { font-size: 1.1rem; vertical-align: top; margin-right: 2px; position: relative; top: 6px; }
.plan .amount span { font-size: .9rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: .92rem; color: var(--text-2); }
.plan li .ic { color: var(--ok); margin-top: 3px; }
.gst-note { font-size: .8rem; color: var(--muted); }

/* ---------- lists ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist li .ic { color: var(--ok); margin-top: 3px; }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { position: relative; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.step::before { counter-increment: step; content: "0" counter(step); font: 800 2rem/1 var(--font); color: transparent; -webkit-text-stroke: 1.5px var(--accent); display: block; margin-bottom: 14px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- stats band ---------- */
.band { background: var(--navy-900); color: #fff; border-radius: var(--radius-xl); padding: clamp(32px, 5vw, 56px); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(245,165,36,.35), transparent 65%); }
.band h2, .band h3 { color: #fff; }
.band p { color: #C3CCE0; }
.band > * { position: relative; z-index: 1; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 650; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 18px; color: var(--text-2); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
label, .label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--text-2); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search],
input[type=date], input[type=datetime-local], select, textarea, .input {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: 500 .95rem/1.4 var(--font); transition: border-color .15s, box-shadow .15s; }
textarea { resize: vertical; min-height: 110px; }
textarea.mono, .mono { font-family: var(--mono); font-size: .86rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=range] { width: 100%; accent-color: var(--accent); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 17px; height: 17px; vertical-align: middle; }
input[type=color] { width: 44px; height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 3px; background: var(--surface); }
.field { margin-bottom: 16px; }
.field .help, .helptext { font-size: .8rem; color: var(--muted); margin-top: 4px; display: block; }
.errorlist { list-style: none; padding: 0; margin: 6px 0 0; color: var(--err); font-size: .85rem; }
.hp { position: absolute !important; left: -9999px !important; }
.inline-check { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; margin: 0 14px 8px 0; color: var(--text); }

/* ---------- alerts / toast ---------- */
.alert { padding: 14px 18px; border-radius: var(--radius); border: 1px solid transparent; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.alert-success { background: var(--ok-bg); color: var(--ok); }
.alert-error { background: var(--err-bg); color: var(--err); }
.alert-info { background: var(--info-bg); color: var(--info); }
.alert-warning { background: var(--warn-bg); color: var(--warn); }
.messages { position: fixed; top: 84px; right: 20px; z-index: 200; width: min(420px, calc(100vw - 40px)); }
.messages .alert { box-shadow: var(--shadow-lg); animation: slidein .3s var(--ease); background-clip: padding-box; }
@keyframes slidein { from { opacity: 0; transform: translateY(-8px); } }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--navy-900); color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 300; box-shadow: var(--shadow-lg); font-size: .9rem; border: 1px solid var(--navy-700); animation: slidein .25s; }

/* ---------- prose (markdown) ---------- */
.prose { font-size: 1.04rem; line-height: 1.75; color: var(--text-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; color: var(--text); }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; color: var(--text); }
.prose p { margin: 0; }
/* the resets above out-rank ".prose > * + *", so paragraphs and lists sat flush against each other */
.prose > * + :is(p, ul, ol, blockquote, table) { margin-top: 1.1em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0; }
.prose li + li { margin-top: .35em; }
.prose strong { color: var(--text); }
.prose blockquote { margin: 0; padding: 10px 20px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 12px 12px 0; }
.prose :not(pre) > code { background: var(--surface-2); border: 1px solid var(--border); padding: .12em .4em; border-radius: 6px; color: var(--text); font-size: .86em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.prose th { background: var(--surface-2); color: var(--text); }
.prose img { border-radius: var(--radius); }
/* Images inserted into posts/lessons: always fit the column, whatever size was typed or pasted.
   Fixed width/height (attributes or inline styles copied from Word, Docs or another site) used to
   overflow the column or stretch the picture once the width was capped. */
.prose img, .prose video { max-width: 100% !important; height: auto !important; max-height: 80vh;
  object-fit: contain; margin-inline: auto; }
.prose p > img:only-child { margin-block: .4em; }
.prose figure { margin: 1.6em 0; max-width: 100%; }
.prose figure img { margin-bottom: 0; }
.prose figcaption { margin-top: 8px; font-size: .88rem; color: var(--text-2); text-align: center; }
.prose iframe, .prose embed, .prose object { display: block; max-width: 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.prose td img, .prose th img { max-height: none; }
/* cover photo at the top of a post */
.post-hero-img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); margin: 20px 0; }
@media (max-width: 640px) { .prose img, .prose video { max-height: 70vh; } .post-hero-img { max-height: 260px; margin: 14px 0; } }
.prose .admonition { padding: 14px 18px; border-radius: 12px; background: var(--accent-bg); border-left: 3px solid var(--accent); }
.prose .admonition-title { font-weight: 700; color: var(--text); margin-bottom: 4px; }
pre { background: var(--code-bg); color: var(--code-text); padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; font-size: .86rem; line-height: 1.65; position: relative; border: 1px solid rgba(255,255,255,.06); margin: 0; }
pre code { background: none !important; padding: 0 !important; border: 0 !important; color: inherit; font-size: inherit; }
.copy-btn { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.08); color: #C3CCE0; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 4px 10px; font-size: .75rem; cursor: pointer; font-family: var(--font); opacity: 0; transition: opacity .15s; }
pre:hover .copy-btn, .copy-btn:focus { opacity: 1; }
.hljs { background: transparent !important; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }
.table td.wrap { white-space: normal; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- layout with sidebar ---------- */
.with-sidebar { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.with-sidebar.right { grid-template-columns: minmax(0, 1fr) 300px; }
.sidebar { position: sticky; top: 98px; max-height: calc(100vh - 118px); overflow-y: auto; }
.side-nav { display: grid; gap: 2px; }
.side-nav a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-size: .9rem; font-weight: 550; }
.side-nav a:hover { background: var(--surface-2); color: var(--text); }
.side-nav a.active { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.side-nav .num { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.side-nav a.active .num { background: var(--accent); color: var(--on-accent); }
.side-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 750; color: var(--muted); margin: 0 12px 10px; }
@media (max-width: 960px) { .with-sidebar, .with-sidebar.right { grid-template-columns: 1fr; } .sidebar { position: static; max-height: none; } }

/* ---------- roadmap timeline ---------- */
.timeline { position: relative; display: grid; gap: 22px; padding-left: 38px; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 10%, transparent)); }
.tl-item { position: relative; }
.tl-dot { position: absolute; left: -38px; top: 22px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--accent); }
.tl-item .card { padding: 24px; }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.topic-list li { padding: 6px 12px; border-radius: 10px; background: var(--surface-2); font-size: .85rem; font-weight: 550; color: var(--text-2); display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.topic-list li.done { background: var(--ok-bg); color: var(--ok); text-decoration: line-through; }

/* ---------- quiz ---------- */
.q-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.q-card .q-num { font-size: .78rem; font-weight: 750; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.q-card .q-text { font-weight: 650; font-size: 1.05rem; margin: 6px 0 14px; color: var(--text); }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; font-weight: 500; transition: .15s; margin: 0; color: var(--text); }
.opt:hover { border-color: var(--accent); }
.opt .k { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-weight: 750; font-size: .8rem; flex-shrink: 0; text-transform: uppercase; }
.opt input { display: none; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.opt.right { border-color: var(--ok); background: var(--ok-bg); }
.opt.wrong { border-color: var(--err); background: var(--err-bg); }
.explain { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: .92rem; color: var(--text-2); }
.score-ring { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-3) 0); }
.score-ring span { width: 112px; height: 112px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; }

/* ---------- blog ---------- */
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; color: var(--text); transition: .2s var(--ease); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--text); }
.post-cover { aspect-ratio: 16/9; background: var(--brand-grad); display: grid; place-items: center; color: #1a1203; overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }   /* people and products sit above centre in most photos */
.post-cover.gen { background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: var(--amber-400); }
.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-body h3 { font-size: 1.1rem; margin: 0; }
.post-meta { font-size: .8rem; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- pagination ---------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: .9rem; }
.pagination .current { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- ads ---------- */
.ad-slot { display: block; margin: 28px auto; text-align: center; min-height: 90px; padding: 10px; border-radius: var(--radius); background: var(--surface-2); border: 1px dashed var(--border); overflow: hidden; max-width: 100%; }
.ad-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 6px; }
/* Hide the box when AdSense has no ad to serve (e.g. while the account is under review). */
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* ---------- CTA ---------- */
.cta { text-align: center; }
.cta .band { padding: clamp(40px, 6vw, 72px); }
.cta .hero-cta { justify-content: center; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-950); color: #9AA9C7; padding: 72px 0 28px; margin-top: 0; border-top: 1px solid #16213B; }
.site-footer a { color: #C3CCE0; }
.site-footer a:hover { color: var(--amber-400); }
.site-footer .logo { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.foot-grid h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .92rem; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #16213B; margin-top: 48px; padding-top: 24px; font-size: .85rem; }
.newsletter { display: flex; gap: 8px; margin-top: 18px; max-width: 380px; }
.newsletter input { background: #0E1830; border-color: #1C2B4F; color: #fff; }
.socials { display: flex; gap: 8px; margin-top: 18px; }
.socials a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #1C2B4F; display: grid; place-items: center; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- cookie banner & floating ---------- */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 250; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-lg); font-size: .9rem; display: none; }
.cookie.show { display: block; animation: slidein .3s; }
@media (max-width: 520px) { .cookie { left: 12px; right: 12px; bottom: 12px; } }
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 150; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 25px -8px rgba(37,211,102,.7); }
.wa-float:hover { color: #fff; transform: scale(1.05); }
.to-top { position: fixed; right: 20px; bottom: 86px; z-index: 150; opacity: 0; pointer-events: none; transition: .2s; }
.to-top.show { opacity: 1; pointer-events: auto; }

/* ---------- search ---------- */
.search-box { position: relative; max-width: 620px; }
.search-box input { padding: 16px 20px 16px 50px; border-radius: 16px; font-size: 1.02rem; box-shadow: var(--shadow-sm); }
.search-box .ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.kbd { display: inline-block; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); font-size: .72rem; font-family: var(--mono); }

/* ---------- misc ---------- */
.stat { padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.stat .v { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.stat .l { font-size: .85rem; color: var(--muted); }
.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand-grad); border-radius: 99px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tech { font-size: .78rem; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); font-weight: 600; border: 1px solid var(--border); }
.empty { text-align: center; padding: 56px 20px; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.empty .ic { color: var(--accent); margin-bottom: 10px; }
.divider-text { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .85rem; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.privacy-strip { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-size: .88rem; font-weight: 600; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; } }
.logo-cloud { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; }
.logo-cloud span { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-weight: 650; color: var(--text-2); font-size: .9rem; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .ad-slot, .cookie, .wa-float, .to-top, .no-print, .portal-side { display: none !important; }
  body { background: #fff; color: #000; }
  .portal-main { padding: 0 !important; }
}

/* ---------- overflow safety: let grid/flex children shrink on small screens ---------- */
.with-sidebar > *, .grid > *, .hero-grid > *, .feature-row > *, .two-pane > *, .form-grid > *, .opts-panel > * { min-width: 0; }
.prose pre, .prose table { max-width: 100%; }
.seg { max-width: 100%; }
@media (max-width: 640px) {
  .card { padding: 20px; }
  .plan { padding: 22px; }
  .tool-head h1 { font-size: 1.35rem; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .pagination a, .pagination span { padding: 8px 12px; }
}
body.nav-open .wa-float, body.nav-open .to-top, body.nav-open .cookie { display: none !important; }

/* ================= Mobile refinements ================= */
@media (max-width: 900px) {
  .hero-float { display: none !important; }
}
@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .page-hero { padding: 36px 0 28px; }
  .section-head { margin-bottom: 26px; }
  .lead { font-size: 1rem; }
  h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  h2 { font-size: clamp(1.45rem, 6.5vw, 1.8rem); }
  .hero { padding: 36px 0 44px; }
  .hero .lead { margin-bottom: 22px; }
  .pill { font-size: .78rem; margin-bottom: 16px; }
  .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-cta .btn { padding: 13px 10px; font-size: .9rem; white-space: normal; text-align: center; }
  .hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
  .hero-trust strong { font-size: 1.35rem; }
  .hero-card { padding: 16px; border-radius: 22px; }
  .hero-card .hc-row { padding: 10px; font-size: .85rem; }
  .hero-card .hc-row:nth-of-type(n+4) { display: none; }
  /* compact 2-column card grids */
  .m-compact { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .m-compact .card { padding: 16px; border-radius: 16px; }
  .m-compact .card .card-icon { width: 38px !important; height: 38px !important; margin-bottom: 10px; border-radius: 11px; }
  .m-compact .card h3 { font-size: .95rem !important; margin-bottom: 4px; }
  .m-compact .card p { display: none; }
  .m-compact .card .price-from { margin-top: 8px; padding-top: 8px; display: block; font-size: .75rem; }
  .m-compact .card .price-from b { display: block; font-size: 1rem; }
  .m-limit > :nth-child(n+7) { display: none; }
  .m-posts .post-cover { aspect-ratio: 21/9; }
  .steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .step { padding: 16px; }
  .step::before { font-size: 1.5rem; margin-bottom: 8px; }
  .step h3 { font-size: 1rem; }
  .band { border-radius: 22px; padding: 30px 20px; }
  .cta .band { padding: 34px 20px; }
  .cta .hero-cta { grid-template-columns: 1fr; }
  .plans { gap: 16px; }
  .plan .amount { font-size: 2rem; }
  .faq details { padding: 0 16px; }
  .faq summary { padding: 14px 0; font-size: .95rem; }
  .chips { gap: 6px; }
  .chip { padding: 6px 12px; font-size: .82rem; }
  .flex.between.mb-3 { align-items: flex-start !important; }
  /* footer */
  .site-footer { padding: 48px 0 24px; }
  .foot-grid { gap: 28px 16px; }
  .newsletter { flex-direction: column; max-width: none; }
  .foot-bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 32px; }
  .wa-float { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .to-top { right: 14px; bottom: 72px; }
  .messages { right: 12px; width: calc(100vw - 24px); }
  /* tool pages */
  .dropzone { padding: 28px 14px; }
  .opts-panel { padding: 14px; gap: 12px; grid-template-columns: 1fr; }
  .tool-actions .btn-lg { flex: 1; }
  .out-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .page-thumbs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .with-sidebar { gap: 24px; }
  /* learn sidebar collapses under content on mobile */
  .with-sidebar > .sidebar:first-child { order: 2; }
  .search-box input { font-size: 1rem; }
  .timeline { padding-left: 32px; }
  .tl-dot { left: -32px; width: 28px; height: 28px; }
  .timeline::before { left: 13px; }
  .table th, .table td { padding: 10px 12px; }
}
/* Two buttons side by side fit a 360px phone only if both labels are short; on a
   375-430px iPhone the longer one wraps to two lines and the pair stops looking
   deliberate. One full-width button per row reads better and is easier to hit. */
@media (max-width: 430px) {
  .hero-cta { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .m-compact { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .tool-head { gap: 10px 12px; }
  .tool-head .ti { width: 40px; height: 40px; }
  .tool-head .grow { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .tool-head .badge { order: 3; }
  .tool-head p { font-size: .85rem; }
  .opts-panel > div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
  .opts-panel > div[style*="grid-template-columns"] > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .opts-panel .seg { width: 100%; }
  .two-pane textarea, .out-box { min-height: 200px; }
}

/* ---------- personal portfolio ---------- */
.pf-hero { padding: clamp(48px, 7vw, 96px) 0; }
.pf-hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.pf-avatar-wrap { display: grid; justify-items: center; gap: 14px; }
.pf-avatar { width: 200px; height: 200px; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 6px var(--surface), 0 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-lg); flex-shrink: 0; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar span { font-size: 4rem; font-weight: 800; color: #1a1203; letter-spacing: -.04em; }
.pf-avatar.sm { width: 56px; height: 56px; box-shadow: none; }
.pf-avatar.sm span { font-size: 1.3rem; }
.pf-headline { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 650; color: var(--text-2); margin-bottom: 12px; }
.pf-card .post-body { flex: 1; }
.pf-two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.pf-two > * { min-width: 0; }
@media (max-width: 900px) {
  .pf-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .pf-hero-grid .eyebrow::before { display: none; }
  .pf-hero-grid .flex { justify-content: center; }
  .pf-hero-grid .hero-cta { justify-content: center; }
  .pf-avatar { width: 140px; height: 140px; }
  .pf-avatar span { font-size: 3rem; }
  .pf-two { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .pf-hero-grid .hero-cta { grid-template-columns: 1fr 1fr; }
  .pf-hero-grid .hero-cta .btn-primary { grid-column: 1 / -1; }
}
.pf-cover { position: relative; flex-direction: column; gap: 12px; display: flex; align-items: center; justify-content: center; }
.pf-cover::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M14 0l14 8v16.5L14 32.5 0 24.5V8zM14 49V32.5' fill='none' stroke='%23FFBE2E' stroke-opacity='.12'/%3E%3C/svg%3E"); pointer-events: none; }
.pf-cover-ic { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,190,46,.14); border: 1px solid rgba(255,190,46,.35); color: var(--amber-400); position: relative; z-index: 1; }
.pf-cover-t { font: 600 .78rem var(--mono); color: #C3CCE0; letter-spacing: .02em; position: relative; z-index: 1; }
.post-cover.pf-dl { background: linear-gradient(135deg, #1a1440, #3b2a7a); }
.post-cover.pf-ml { background: linear-gradient(135deg, #0c2a3a, #155e75); }
.post-cover.pf-ai { background: linear-gradient(135deg, #2a1a08, #7a4a0c); }
.post-cover.pf-ds { background: linear-gradient(135deg, #0b2a1f, #166534); }
@media (max-width: 640px) { .pf-cover { aspect-ratio: 21/9; } .pf-cover-ic { width: 52px; height: 52px; } }
.post-cover.pf-web { background: linear-gradient(135deg, #0c2a3a, #155e75); }
.post-cover.pf-automation { background: linear-gradient(135deg, #0b2a1f, #166534); }
.post-cover.pf-custom { background: linear-gradient(135deg, #2a0f1a, #8a2a3a); }

/* ---------- clean home ---------- */
.home-hero { padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 7vw, 88px); }
.home-hero h1 { max-width: 900px; margin-inline: auto; }
.home-lead { max-width: 680px; margin: 0 auto 30px; }
.home-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 36px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.home-trust span { display: inline-flex; align-items: center; gap: 6px; }
.home-trust .ic { color: var(--accent); }
.svc-card { display: flex; flex-direction: column; }
.svc-card p { flex: 1; }
.price-tease { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.price-tease .blur { filter: blur(6px); font-weight: 800; color: var(--text); user-select: none; font-size: 1.05rem; transition: filter .25s; }
.price-tease .more { margin: 0; font-size: .88rem; }
.svc-card:hover .price-tease .blur { filter: blur(4px); }
.cat-grid .tool-card { align-items: center; }
.cat-grid .tool-card > .ic { color: var(--muted); }
.show-sm { display: none; }
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .show-sm { display: block; }
  .home-hero { padding: 44px 0 40px; }
  .home-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; font-size: .82rem; margin-top: 26px; }
  .home-trust span { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; }
  .price-tease { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 8px; padding-top: 8px; }
  .price-tease .blur { font-size: .9rem; }
  .price-tease .more { font-size: .8rem; }
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .cat-grid .tool-card { padding: 12px; gap: 10px; }
  .cat-grid .tool-card .ti { width: 34px; height: 34px; }
  .cat-grid .tool-card b { font-size: .85rem; }
  .cat-grid .tool-card > .ic { display: none; }
}
@media (max-width: 640px) { .m-limit4 > :nth-child(n+5) { display: none; } }

/* ---------- testimonials ---------- */
.stars { color: var(--border-strong); letter-spacing: 1px; font-size: 1rem; line-height: 1; }
.stars .on { color: #F5A524; }
.stars.big { font-size: 1.4rem; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.tcard { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.tcard::before { content: "“"; position: absolute; top: 6px; right: 20px; font: 800 4.5rem/1 Georgia, serif; color: var(--accent-bg); }
.tcard blockquote { margin: 0; flex: 1; }
.tcard blockquote strong { display: block; color: var(--text); margin-bottom: 6px; font-size: 1.02rem; }
.tcard blockquote p { margin: 0; color: var(--text-2); font-size: .95rem; }
.tcard figcaption { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--border); padding-top: 14px; }
.tcard figcaption small { display: block; color: var(--muted); font-size: .8rem; }
.tcard .tproj { color: var(--accent); font-weight: 600; margin-top: 2px; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { font-size: 2.2rem; line-height: 1; color: var(--border-strong); cursor: pointer; margin: 0; transition: color .12s, transform .12s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #F5A524; }
.star-input label:hover { transform: scale(1.1); }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); border-radius: 6px; }
@media (max-width: 640px) { .tgrid { grid-template-columns: 1fr; } .tcard { padding: 18px; } }
.tcard .avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-grad); color: #1a1203; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }

/* ---------- author credit under articles & lessons ---------- */
.author-box { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface-2); }
.author-box .author-av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--accent);
  color: #10131a; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; }
.author-box p { margin: 0; }
.author-name { font-weight: 650; }
.author-role { color: var(--text-2); font-size: .88rem; margin-top: 2px !important; }
.author-links { margin-top: 6px !important; display: flex; gap: 14px; font-size: .85rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH DEVICES — and iPhone in particular

   Three things make a page that is fine on Android and on a desktop feel wrong
   on an iPhone. None of them are visible in a desktop browser, which is why
   they survive normal testing:

   1. Safari zooms the whole page in whenever a text field smaller than 16px
      takes focus — and it does not zoom back out when the field is left. Chrome
      on Android never does this, so the identical form feels broken on one
      phone and fine on the other. Every field is therefore exactly 16px on
      touch devices; the tighter desktop size is kept where there is no zoom.
   2. 100vh on iOS counts the area behind the address bar, so a "full height"
      panel ends up taller than the screen and its last rows hide under the
      toolbar. dvh measures what is actually visible; the plain vh line stays
      first as the fallback for older browsers.
   3. The page is served with viewport-fit=cover, so in landscape it runs under
      the notch. The gutters have to clear the safe area rather than being a
      flat 20px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 — no involuntary zoom when a field is tapped */
@media (max-width: 900px), (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
  input[type=tel], input[type=search], input[type=date], input[type=datetime-local], input[type=time],
  select, textarea, .input, textarea.mono, input.mono,
  .nav-search input, .search-box input, .two-pane textarea, .out-box {
    font-size: 16px;
  }
}

/* 3 — gutters clear the notch in landscape */
.container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (max-width: 640px) {
  .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* A select is the one control iOS styles entirely on its own — no arrow, text
   aligned differently, a different height. Drawing our own makes the three
   platforms agree. */
select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237B8AA5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
select::-ms-expand { display: none; }

/* iOS puts its own rounded grey chrome on submit buttons, and flashes a grey
   box over anything tapped. Both are removed; the :active states already give
   the feedback. */
input[type=submit], input[type=button], input[type=reset], .btn, button.chip { -webkit-appearance: none; appearance: none; }
a, button, summary, label, [role=button] { -webkit-tap-highlight-color: transparent; }

/* 2 — anything asked to fill the screen measures the visible screen */
.sidebar { max-height: calc(100dvh - 118px); }

/* Tap targets. Apple asks for 44px; a single line of text is about 17-20px, so
   a plain text link is half the size a fingertip needs. Where the link stands
   on its own the padding simply makes it bigger; where it sits in a line of
   text, a matching negative margin cancels the padding again so nothing around
   it shifts. The hit area grows, the layout does not. */
@media (pointer: coarse), (max-width: 900px) {
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .card .more, .price-tease .more { min-height: 40px; display: inline-flex; align-items: center; }
  .topic-list li { min-height: 40px; }
  .faq summary, .care-not summary { min-height: 44px; display: flex; align-items: center; }

  .post-meta a, .foot-bottom a, .author-links a, a.small, .d-demobar-cta,
  a[href^="mailto:"], a[href^="tel:"], details a {
    display: inline-block; padding: 9px 5px; margin: -9px -5px;
  }
  /* in a table the row grows instead — a negative margin there would let one
     row's hit area sit on top of the row above it */
  td a { display: inline-block; padding: 8px 0; }
  /* a card whose only link is its heading */
  .post-body h3 a, .card h3 a, .pf-card h3 a { display: inline-block; padding: 7px 0; margin: -7px 0; }
  /* a slider's track is 16px tall, which is a thin thing to catch with a thumb.
     The browser centres the track inside the box, so a taller box is a bigger
     grab area and looks identical. */
  input[type=range] { height: 36px; }
}

/* ---------- sample datasets (/resources/datasets/) ---------- */
.ds-card-title { font-size: 1.1rem; margin: 12px 0 6px; }
.ds-form { margin-top: 22px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ds-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ds-form-foot { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 8px; }
.ds-cols td.ds-wrap { white-space: normal; min-width: 240px; }
.ds-preview th, .ds-preview td { padding: 8px 12px; font-size: .84rem; }
@media (max-width: 640px) { .ds-form-grid { grid-template-columns: 1fr; } .ds-form { padding: 16px; } }

/* ---------- consultation cards (/services/#consultation) ---------- */
.consult-plans { max-width: 820px; margin: 0 auto; }
.consult-plans .plan.hl::before { content: "Deducted if you hire us"; }
.consult-plans .amount span { font-size: .95rem; }