/* ============================================================================
   Govt Services Made Simple — one stylesheet for the public guides and the
   editor screens. Built for reading on a phone first: one column, large type,
   generous spacing. Always a white page (no dark mode), built to WCAG 2.2 AA:
   text contrast of at least 4.5:1, underlined links in text, a visible focus
   ring and tap targets of at least 24px. Each colour is an oklch "L C H"
   triple used as oklch(var(--x)). Change a token here, never a raw colour in
   a page.
   ========================================================================== */

:root {
  color-scheme: light;
  /* Noto Sans: built for readability in every script, so English and
     Malayalam pages share one family */
  --font-body: "Noto Sans", "Noto Sans Malayalam", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;

  --background-50: 1 0 0;
  --background-100: 0.975 0.004 200;
  --background-200: 0.930 0.009 200;
  --background-300: 0.880 0.012 200;

  --foreground-400: 0.680 0.014 220;
  --foreground-500: 0.550 0.016 220;
  --foreground-600: 0.450 0.016 220;
  --foreground-700: 0.370 0.015 220;
  --foreground-800: 0.290 0.014 220;
  --foreground-900: 0.210 0.013 220;

  /* deep teal: calm, official-feeling without copying any government site */
  --primary-50: 0.970 0.020 195;
  --primary-100: 0.935 0.040 195;
  --primary-300: 0.800 0.090 195;
  --primary-500: 0.600 0.110 195;
  --primary-600: 0.520 0.105 195;
  --primary-700: 0.450 0.095 195;
  --primary-800: 0.380 0.080 195;
  --primary-900: 0.300 0.060 200;

  /* saffron accent, used sparingly for dates and highlights */
  --accent-50: 0.975 0.030 80;
  --accent-100: 0.945 0.060 80;
  --accent-500: 0.780 0.160 70;
  --accent-800: 0.470 0.100 55;

  --success-50: 0.970 0.025 150;
  --success-100: 0.935 0.050 150;
  --success-600: 0.560 0.140 150;
  --success-800: 0.430 0.110 150;

  --danger-50: 0.970 0.018 27;
  --danger-100: 0.935 0.040 27;
  --danger-600: 0.560 0.190 27;
  --danger-800: 0.440 0.160 27;

  --info-50: 0.970 0.018 255;
  --info-100: 0.935 0.040 255;
  --info-800: 0.420 0.140 255;

  --header-h: 64px;
  --container: 96rem;
  --reading: 46rem;
  --radius: 10px;
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  background: oklch(var(--background-50));
  color: oklch(var(--foreground-900));
  -webkit-font-smoothing: antialiased;
}

a { color: oklch(var(--primary-700)); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
/* links inside text must not rely on colour alone (WCAG 1.4.1) */
.prose a, .msg a, .notice-strip a, .sources a, .policy a {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.prose a:hover, .msg a:hover, .notice-strip a:hover, .sources a:hover, .policy a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
h1 { font-size: clamp(1.6rem, 3.4vw, 2.125rem); line-height: 1.25; letter-spacing: -0.02em; }
h2 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; line-height: 1.4; }

img { max-width: 100%; height: auto; }

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible { outline: 3px solid oklch(var(--primary-700)); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
.reading { max-width: var(--reading); }
.muted { color: oklch(var(--foreground-500)); }
.small { font-size: 0.875rem; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: oklch(var(--primary-700)); color: #fff; padding: 8px 14px; border-radius: 6px;
}
.skip-link:focus { left: 8px; }

/* ---- independent-site note (last line of the footer, on every page) ------ */

.notice-strip {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid oklch(var(--background-200));
  font-size: 0.8125rem; line-height: 1.5; color: oklch(var(--foreground-600));
}
.notice-strip strong { color: oklch(var(--foreground-800)); }
.notice-strip i { font-size: 1rem; flex: none; }

/* ---- header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(var(--background-50) / 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid oklch(var(--background-200));
}
.site-header .container { display: flex; align-items: center; gap: 24px; height: var(--header-h); }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem; color: oklch(var(--foreground-900)); white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: oklch(var(--primary-700)); color: #fff; font-size: 1.1rem;
}

.main-nav { margin-left: auto; }
.nav { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.nav a {
  display: block; padding: 8px 12px; border-radius: 8px;
  color: oklch(var(--foreground-700)); font-weight: 500; font-size: 0.9375rem;
}
.nav a:hover { background: oklch(var(--background-200)); text-decoration: none; }
.nav a.active { color: oklch(var(--primary-700)); background: oklch(var(--primary-50)); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.menu-toggle {
  display: none; border: 1px solid oklch(var(--background-300)); background: transparent;
  color: inherit; border-radius: 8px; width: 40px; height: 40px; font-size: 1.25rem; cursor: pointer;
}

.account-menu { position: relative; }
.account-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 999px; font-size: 0.875rem; font-weight: 500;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: oklch(var(--background-200)); }
.avatar, .avatar-fallback { width: 30px; height: 30px; border-radius: 50%; }
.avatar-fallback { display: grid; place-items: center; background: oklch(var(--primary-100)); color: oklch(var(--primary-800)); }
.account-panel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; padding: 6px;
  background: oklch(var(--background-50)); border: 1px solid oklch(var(--background-200));
  border-radius: var(--radius); box-shadow: 0 12px 32px oklch(0 0 0 / 0.14);
}
.account-panel a, .account-panel button {
  display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 6px;
  color: oklch(var(--foreground-800)); font: inherit; font-size: 0.875rem; font-weight: 500;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.account-panel a:hover, .account-panel button:hover { background: oklch(var(--background-200)); text-decoration: none; }
.account-panel a.active { color: oklch(var(--primary-700)); }
.account-panel hr { border: 0; border-top: 1px solid oklch(var(--background-200)); margin: 6px 0; }

/* the header's Pages menu: the published pages, newest first */
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 2px;
  padding: 8px 12px; border-radius: 8px; color: oklch(var(--foreground-700)); font-weight: 500; font-size: 0.9375rem;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover { background: oklch(var(--background-200)); }
.nav-menu summary.active { color: oklch(var(--primary-700)); background: oklch(var(--primary-50)); }
.nav-menu[open] summary i { transform: rotate(180deg); }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 22rem; max-height: 70vh; overflow-y: auto;
  padding: 6px; display: grid; gap: 2px;
  background: oklch(var(--background-50)); border: 1px solid oklch(var(--background-200));
  border-radius: var(--radius); box-shadow: 0 12px 32px oklch(0 0 0 / 0.14);
}
.nav .nav-menu-panel a { padding: 9px 10px; border-radius: 6px; font-size: 0.875rem; line-height: 1.4; color: oklch(var(--foreground-800)); }
.nav .nav-menu-panel a:hover { background: oklch(var(--background-200)); text-decoration: none; }
.nav .nav-menu-panel a.active { color: oklch(var(--primary-700)); background: oklch(var(--primary-50)); }
.nav-menu-empty { padding: 9px 10px; font-size: 0.875rem; color: oklch(var(--foreground-500)); }

@media (max-width: 860px) {
  .menu-toggle { display: inline-grid; place-items: center; }
  .main-nav { margin-left: 0; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; padding: 8px 16px 16px; gap: 2px;
    background: oklch(var(--background-50)); border-bottom: 1px solid oklch(var(--background-200));
  }
  .nav-open .nav { display: flex; }
  .nav a { padding: 12px; }
  .nav-menu summary { padding: 12px; }
  .nav-menu-panel { position: static; width: auto; max-height: none; box-shadow: none; border: 0; padding: 0 0 0 12px; }
  .header-actions { margin-left: auto; }
  .hide-sm { display: none; }
}

/* ---- main / footer ------------------------------------------------------ */

.site-main { flex: 1; }
/* top/bottom only: .page sits on .container, whose side gutter must survive */
.page { padding-top: 32px; padding-bottom: 56px; }
.section { padding: 40px 0; }
.section + .section { padding-top: 8px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head p { color: oklch(var(--foreground-600)); margin-top: 4px; }

.site-footer {
  margin-top: 48px; padding: 40px 0 24px; font-size: 0.875rem;
  background: oklch(var(--background-100)); border-top: 1px solid oklch(var(--background-200));
  color: oklch(var(--foreground-600));
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid p { margin-top: 10px; max-width: 32rem; }
.footer-head { font-weight: 600; color: oklch(var(--foreground-900)); margin-bottom: 8px; }
.footer-links { list-style: none; padding: 0; display: grid; gap: 6px; }
.footer-links a { color: oklch(var(--foreground-700)); font-weight: 400; }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  margin-top: 32px; padding-top: 16px; border-top: 1px solid oklch(var(--background-200));
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid oklch(var(--background-300)); background: oklch(var(--background-50));
  color: oklch(var(--foreground-800)); font: inherit; font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: oklch(var(--background-200)); text-decoration: none; }
.btn-primary { background: oklch(var(--primary-700)); border-color: oklch(var(--primary-700)); color: #fff; }
.btn-primary:hover { background: oklch(var(--primary-800)); }
.btn-danger { background: oklch(var(--danger-600)); border-color: oklch(var(--danger-600)); color: #fff; }
.btn-danger:hover { background: oklch(var(--danger-800)); }
.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 0.8125rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn i { font-size: 1.1em; }

/* ---- messages ----------------------------------------------------------- */

.msg {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid; font-size: 0.9375rem; margin-bottom: 16px;
}
.msg > i { font-size: 1.2rem; line-height: 1.4; flex: none; }
.msg > span, .msg > div { flex: 1; }
.msg.good { background: oklch(var(--success-50)); border-color: oklch(var(--success-100)); color: oklch(var(--success-800)); }
.msg.bad { background: oklch(var(--danger-50)); border-color: oklch(var(--danger-100)); color: oklch(var(--danger-800)); }
.msg.warn { background: oklch(var(--accent-50)); border-color: oklch(var(--accent-100)); color: oklch(var(--accent-800)); }
.msg.info { background: oklch(var(--info-50)); border-color: oklch(var(--info-100)); color: oklch(var(--info-800)); }
.msg ul { margin: 6px 0 0; padding-left: 18px; }
.msg-close { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.1rem; padding: 0; }
.flash { padding-top: 16px; }

/* ---- badges ------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: oklch(var(--background-200)); color: oklch(var(--foreground-700));
}
.badge.primary, .badge.Published { background: oklch(var(--primary-100)); color: oklch(var(--primary-900)); }
.badge.good, .badge.Approved { background: oklch(var(--success-100)); color: oklch(var(--success-800)); }
.badge.warn, .badge.InReview { background: oklch(var(--accent-100)); color: oklch(var(--accent-800)); }
.badge.bad { background: oklch(var(--danger-100)); color: oklch(var(--danger-800)); }
.badge.info, .badge.Draft { background: oklch(var(--info-100)); color: oklch(var(--info-800)); }
.badge.Superseded { background: oklch(var(--background-200)); color: oklch(var(--foreground-500)); }

/* ---- home: one screen that says what the site is ------------------------- */

.intro {
  display: grid; align-items: center; text-align: center;
  min-height: calc(100vh - var(--header-h));
  padding: 48px 0 56px;
  /* soft shade: teal light from the top left, warm light from the bottom
     right, fading to white, so the page has depth without colour blocks */
  background:
    radial-gradient(60rem 36rem at 10% -10%, oklch(var(--primary-100) / 0.9) 0%, transparent 60%),
    radial-gradient(50rem 30rem at 95% 110%, oklch(var(--accent-100) / 0.8) 0%, transparent 60%),
    linear-gradient(180deg, oklch(var(--primary-50)) 0%, oklch(var(--background-50)) 70%);
}
.intro-inner { display: grid; justify-items: center; gap: 18px; }
.intro-note { display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 1rem; font-weight: 600; color: oklch(var(--foreground-800)); }
.intro-note i { color: oklch(var(--primary-700)); }
.intro h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); line-height: 1.1; letter-spacing: -0.025em; }
.intro-accent { display: block; color: oklch(var(--primary-700)); }
.intro-lead { font-size: clamp(1.125rem, 1.8vw, 1.375rem); color: oklch(var(--foreground-700)); max-width: 40rem; }

/* The scene: red tape runs from a government building to her, she frets over
   her phone, then the tangle gives way to three clear, checked steps and she
   waves. One 10-second loop: 0-55% worried, 58-94% clear, then again. */
.intro-scene { width: 100%; max-width: 680px; height: auto; margin-top: 8px; overflow: visible; }
.intro-scene * { transform-box: fill-box; transform-origin: center; }

.sc-shadow { fill: oklch(0.25 0.03 200 / 0.12); }
.sc-sleeve { fill: none; stroke: url(#scSweater); stroke-width: 28; stroke-linecap: round; }
/* soft brown outlines, like a hand-drawn illustration */
.sc-ink { stroke: #7a4e44; stroke-width: 1.6; stroke-linejoin: round; }
.sc-sleeve-ink { fill: none; stroke: #7a4e44; stroke-width: 31; stroke-linecap: round; }
.sc-finger-ink { stroke: #7a4e44; stroke-width: 11; stroke-linecap: round; }
.sc-finger { stroke: #f6cfb2; stroke-width: 8; stroke-linecap: round; }
.sc-fluff { fill: #fdfcff; filter: drop-shadow(0 0 0.6px #8f7f9f) drop-shadow(0 1.5px 1px rgb(120 100 150 / 0.25)); }
.sc-clip { fill: #f9d66b; }
.sc-knit { fill: #6f90cc; opacity: 0.5; }
.sc-deco-heart { fill: #f6a6bd; opacity: 0.8; }
.sc-deco-star { fill: #f9d66b; opacity: 0.85; }
.sc-blush { fill: #f6a0a6; opacity: 0.45; }
.sc-lash-flick { fill: none; stroke: #141721; stroke-width: 2.5; stroke-linecap: round; }
.sc-lid { fill: none; stroke: #2a1d1a; stroke-width: 3.5; stroke-linecap: round; }
.sc-crease { fill: none; stroke: #b07a64; stroke-width: 1.4; stroke-linecap: round; }
.sc-eye-glow { fill: none; stroke: #bff0e6; stroke-width: 2.5; stroke-linecap: round; opacity: 0.8; }
.sc-brow-soft { fill: none; stroke: #5a3a2e; stroke-width: 2.5; stroke-linecap: round; }
.sc-nose-dot { fill: #c98d6a; }
.sc-freckle { fill: #c98d6a; opacity: 0.55; }
.sc-mouth-o { fill: #b4475a; }
.sc-smile-open { fill: #b4475a; }
.sc-tongue { fill: #f29aa6; }
.sc-shine { fill: #fff; }
.sc-sweat { fill: url(#scSweat); }
.sc-spark { fill: oklch(var(--accent-500)); }

/* the building, its paperwork and the red tape */
.sc-roof { fill: oklch(var(--primary-700)); }
.sc-door { fill: oklch(var(--primary-800)); }
.sc-puff { fill: #fff; stroke: oklch(var(--background-300)); stroke-width: 1.5; }
.sc-tangle { fill: none; stroke: #e0727a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1600; }

/* the clear path and its three steps */
.sc-road { fill: none; stroke: oklch(var(--primary-600)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 12; }
.sc-step-dot { fill: #fff; stroke: oklch(var(--primary-600)); stroke-width: 3; }
.sc-step-num { fill: oklch(var(--primary-700)); font: 800 15px var(--font-body); text-anchor: middle; }
.sc-step-label { fill: oklch(var(--foreground-700)); font: 700 13px var(--font-body); text-anchor: middle; }
.sc-tick-bg { fill: oklch(var(--success-600)); }
.sc-tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* her phone */
.sc-phone { fill: #2b3040; stroke: #7a4e44; stroke-width: 1.6; }
.sc-screen { fill: #eef6f6; }
.sc-screen-line { fill: oklch(var(--background-300)); }
.sc-screen-q { fill: #e0727a; font: 800 15px var(--font-body); text-anchor: middle; }
.sc-screen-tick { fill: none; stroke: oklch(var(--success-600)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sc-confused { animation: sc-confused 10s ease-in-out infinite; }
.sc-clear { opacity: 0; animation: sc-clear 10s ease-in-out infinite; }
.sc-head { transform-origin: 50% 100%; animation: sc-tilt 10s ease-in-out infinite; }
.sc-eye { animation: sc-blink 4s infinite; }
.sc-sweat { animation: sc-sweat 10s ease-in infinite 0.8s; opacity: 0; }
/* hood ears swing, long locks sway, hearts and stars twinkle */
.sc-ear-l { transform-origin: 85% 4%; animation: sc-swing-l 2.6s ease-in-out infinite alternate; }
.sc-ear-r { transform-origin: 15% 4%; animation: sc-swing-r 2.6s ease-in-out infinite alternate; }
.sc-lock { transform-origin: 50% 0%; animation: sc-lock 3.2s ease-in-out infinite alternate; }
.sc-lock + .sc-lock { animation-delay: -1.6s; }
.sc-deco > * { animation: sc-twinkle 2.4s ease-in-out infinite alternate; }
.sc-deco > :nth-child(2n) { animation-delay: -1.2s; }
.sc-spark { animation: sc-twinkle 1.4s ease-in-out infinite alternate; }
.sc-spark:nth-of-type(2) { animation-delay: -0.5s; }
.sc-puff { opacity: 0; animation: sc-puff 10s ease-out infinite; }
.sc-puff:nth-child(2) { animation-delay: 0.6s; }
.sc-puff:nth-child(3) { animation-delay: 1.2s; }
.sc-tangle { animation: sc-tangle 10s ease-in-out infinite; }
.sc-road { opacity: 0; animation: sc-road 10s ease-out infinite; }
.sc-step { opacity: 0; animation: sc-step 10s ease-out infinite; animation-delay: var(--d); }
.sc-step-done { opacity: 0; animation: sc-done 10s ease-out infinite; animation-delay: var(--d); }
.sc-wave { transform-origin: 0% 100%; animation: sc-wave 0.6s ease-in-out infinite alternate; }

@keyframes sc-confused { 0%, 55% { opacity: 1; } 60%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-clear { 0%, 57% { opacity: 0; } 62%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes sc-tilt { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(-6deg); } 26% { transform: rotate(5deg); } 40% { transform: rotate(-4deg); } 55% { transform: rotate(0); } 63% { transform: rotate(3deg); } 70% { transform: rotate(0); } }
@keyframes sc-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes sc-sweat { 0% { opacity: 0; transform: translateY(-4px); } 6% { opacity: 1; } 28% { opacity: 1; transform: translateY(12px); } 34%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes sc-swing-l { from { transform: rotate(-6deg); } to { transform: rotate(5deg); } }
@keyframes sc-swing-r { from { transform: rotate(6deg); } to { transform: rotate(-5deg); } }
@keyframes sc-lock { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes sc-twinkle { from { transform: scale(0.6); opacity: 0.5; } to { transform: scale(1.1); opacity: 1; } }
@keyframes sc-puff {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  5% { opacity: 1; }
  30% { opacity: 0; transform: translate(var(--dx), -60px) rotate(25deg); }
  100% { opacity: 0; transform: translate(var(--dx), -60px) rotate(25deg); }
}
@keyframes sc-tangle {
  0% { stroke-dashoffset: 1600; opacity: 1; }
  32%, 48% { stroke-dashoffset: 0; opacity: 1; }
  56%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sc-road { 0%, 52% { opacity: 0; stroke-dashoffset: 120; } 60%, 94% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; } }
@keyframes sc-step { 0%, 54% { opacity: 0; transform: scale(0.5); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-done { 0%, 63% { opacity: 0; transform: scale(0.4); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-wave { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }

@media (prefers-reduced-motion: reduce) {
  .intro-scene *, .intro-scene *::before { animation: none !important; }
  /* stand still on the happy ending: three checked steps */
  .sc-confused, .sc-sweat, .sc-tangle, .sc-puff { opacity: 0; }
  .sc-clear, .sc-road, .sc-step, .sc-step-done { opacity: 1; }
}

.search {
  display: flex; gap: 8px; margin-top: 24px; max-width: 44rem;
}
.search .input { flex: 1; min-height: 48px; font-size: 1rem; }
.search .btn { min-height: 48px; }

/* ---- guide cards / lists ------------------------------------------------- */

.guide-list { display: grid; gap: 12px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 14px; }
.guide-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid oklch(var(--background-200)); background: oklch(var(--background-50)); color: inherit;
}
.guide-card:hover { border-color: oklch(var(--primary-300)); text-decoration: none; }
.guide-card h3 { color: oklch(var(--foreground-900)); }
.guide-card p { color: oklch(var(--foreground-600)); font-weight: 400; font-size: 0.9375rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.8125rem; color: oklch(var(--foreground-500)); font-weight: 400; }
.card-meta i { margin-right: 2px; }

.layout-side { display: grid; grid-template-columns: 15rem 1fr; gap: 32px; align-items: start; }
.side-nav { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 2px; }
.side-nav a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 6px; color: oklch(var(--foreground-700)); font-size: 0.875rem; }
.side-nav a:hover { background: oklch(var(--background-200)); text-decoration: none; }
.side-nav a.active { background: oklch(var(--primary-50)); color: oklch(var(--primary-800)); }
.side-nav .side-head { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: oklch(var(--foreground-500)); margin: 14px 10px 4px; }
@media (max-width: 860px) { .layout-side { grid-template-columns: minmax(0, 1fr); } .side-nav { position: static; display: none; } }

.empty {
  padding: 32px 20px; text-align: center; border: 1px dashed oklch(var(--background-300));
  border-radius: var(--radius); color: oklch(var(--foreground-600));
}
.empty i { font-size: 1.8rem; display: block; margin-bottom: 6px; color: oklch(var(--foreground-400)); }

/* ---- the guide article ---------------------------------------------------- */

.breadcrumbs { font-size: 0.8125rem; color: oklch(var(--foreground-500)); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs a { color: oklch(var(--foreground-600)); font-weight: 500; }

.article-head .summary { font-size: 1.125rem; color: oklch(var(--foreground-700)); margin-top: 12px; }
.facts {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding: 12px 0;
  border-top: 1px solid oklch(var(--background-200)); border-bottom: 1px solid oklch(var(--background-200));
  font-size: 0.875rem; color: oklch(var(--foreground-600));
}
.facts span { display: inline-flex; gap: 6px; align-items: center; }
.facts strong { color: oklch(var(--foreground-900)); font-weight: 600; }

/* Wide screens: contents | article | official link and safety, so the page
   fills the width while the text column stays near 85 characters a line.
   Laptops: two columns with both boxes on the right. Phones: one column,
   contents first. */
.article-layout {
  display: grid; gap: 24px 40px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 18rem;
  grid-template-areas: "main toc" "main side";
  grid-template-rows: auto 1fr;
}
.article-main { grid-area: main; }
.article-toc { grid-area: toc; }
.side-box.article-toc { position: static; }
@media (min-width: 1280px) { .side-box.article-toc { position: sticky; } }
.article-side { grid-area: side; }
@media (min-width: 1280px) {
  .article-layout {
    grid-template-columns: 15rem minmax(0, 52rem) 18rem; justify-content: space-between;
    grid-template-areas: "toc main side"; grid-template-rows: auto;
  }
}
.article-head { margin-bottom: 28px; }
@media (max-width: 960px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "main" "side"; grid-template-rows: auto; }
}

/* A jump from "On this page" stops below the sticky header, level with the side boxes. */
.part { margin-top: 32px; scroll-margin-top: calc(var(--header-h) + 16px); }
.part:first-child { margin-top: 0; }
.part > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.part-no {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.8125rem; background: oklch(var(--primary-700)); color: #fff;
}
.part h3 { margin: 18px 0 6px; }

.prose p, .prose ul, .prose ol { margin-bottom: 12px; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 6px; }
.prose ol li::marker { font-weight: 700; color: oklch(var(--primary-700)); }
.prose h2 { margin: 28px 0 10px; }
.prose h3 { margin: 20px 0 8px; }

.steps ol { counter-reset: step; list-style: none; padding: 0; }
.steps ol > li {
  counter-increment: step; position: relative; padding: 10px 12px 10px 48px; margin-bottom: 8px;
  border-radius: 8px; background: oklch(var(--background-100));
}
.steps ol > li::before {
  content: counter(step); position: absolute; left: 12px; top: 10px; width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem;
  background: oklch(var(--primary-100)); color: oklch(var(--primary-900));
}

.faq details { border: 1px solid oklch(var(--background-200)); border-radius: 8px; margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 12px 14px; font-weight: 600; }
.faq details > div { padding: 0 14px 12px; color: oklch(var(--foreground-700)); }

/* ---- a guide from Ananta, drawn as pictures (Views/GuidePages/Show) -------
   One card look everywhere: soft background, thin border, round corners.
   Colour only where it means something: the date that counts now, how soon
   it is, a problem and its fix. */

.part-icon { color: oklch(var(--primary-700)); font-size: 1.25rem; }

/* At a glance: each date as a small calendar, an old date crossed out. */
.glance { display: grid; gap: 10px; margin-top: 16px; }
.glance-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px;
  border: 1px solid oklch(var(--background-200)); border-radius: 14px; background: oklch(var(--background-50));
}
.glance-label { flex: 1 1 10rem; font-weight: 700; font-size: 1.0625rem; color: oklch(var(--foreground-900)); }
.glance-dates { display: inline-flex; align-items: center; gap: 10px; }
.glance-arrow { font-size: 1.4rem; color: oklch(var(--foreground-400)); }
.date-tile {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 4.25rem; padding: 4px 8px 6px;
  border: 1px solid oklch(var(--background-300)); border-radius: 10px; background: oklch(var(--background-50)); line-height: 1.1;
}
.date-tile .mon { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: oklch(var(--foreground-600)); }
.date-tile .day { font-size: 1.75rem; font-weight: 800; color: oklch(var(--foreground-900)); }
.date-tile .yr { font-size: 0.6875rem; color: oklch(var(--foreground-500)); }
.date-tile.old { opacity: .55; }
.date-tile.old .day { text-decoration: line-through; text-decoration-thickness: 2px; }
.date-tile.now { border-color: oklch(var(--primary-300)); background: oklch(var(--primary-50)); }
.date-tile.now .mon, .date-tile.now .day { color: oklch(var(--primary-800)); }
.date-tile.rule { font-size: 0.8125rem; font-weight: 600; padding: 8px; max-width: 8rem; text-align: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
}
.chip.soon { background: oklch(var(--accent-100)); color: oklch(var(--accent-800)); }
.chip.later { background: oklch(var(--success-100)); color: oklch(var(--success-800)); }
.chip.passed { background: oklch(var(--background-200)); color: oklch(var(--foreground-600)); }
.glance-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; }
.count-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid oklch(var(--background-200)); background: oklch(var(--background-50));
}
.count-tile i { font-size: 1.4rem; color: oklch(var(--primary-700)); }
.count-tile strong { font-size: 1.5rem; color: oklch(var(--foreground-900)); }
.count-tile span { font-size: 0.875rem; color: oklch(var(--foreground-600)); }
.in-words { margin-top: 10px; font-size: 0.9375rem; color: oklch(var(--foreground-700)); }
.in-words summary { cursor: pointer; color: oklch(var(--primary-700)); font-weight: 600; }
.in-words p { margin-top: 8px; }

/* Steps: a path of numbered circles joined by a line; the last stop is a tick. */
.stepper { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.stepper > li { counter-increment: step; position: relative; padding: 0 0 18px 52px; }
.stepper > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; background: oklch(var(--primary-700)); color: #fff;
}
.stepper > li::after {
  content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: oklch(var(--primary-100));
}
.stepper > li:last-child::after { display: none; }
.stepper > li.step-done::before { content: "\2713"; background: oklch(var(--success-600)); }
.step-title { font-weight: 700; font-size: 1.0625rem; color: oklch(var(--foreground-900)); padding-top: 4px; }
.step-detail { color: oklch(var(--foreground-700)); margin-top: 2px; }
.link-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; background: oklch(var(--primary-50)); color: oklch(var(--primary-800)); text-decoration: none;
}
.link-pill:hover { background: oklch(var(--primary-100)); }

/* Key dates: calendars down a line, past ones faded. */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.timeline li { display: flex; gap: 14px; align-items: center; }
.timeline li.past { opacity: .65; }
.tl-label { font-weight: 700; color: oklch(var(--foreground-900)); }
.tl-note { font-size: 0.875rem; color: oklch(var(--foreground-600)); }

/* Cards: who it is for, fees, help, words. */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 10px; }
.tile {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  border: 1px solid oklch(var(--background-200)); background: oklch(var(--background-50));
}
.tile > i { font-size: 1.3rem; color: oklch(var(--primary-700)); flex: none; }
.tile.contact strong { font-size: 1.0625rem; }
.tile.term { flex-direction: column; gap: 2px; }
.tile.term span { font-size: 0.875rem; color: oklch(var(--foreground-700)); }
.card-note {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: oklch(var(--info-50)); color: oklch(var(--info-800));
}
.card-note i { font-size: 1.3rem; flex: none; }

/* What you need: a checklist the reader ticks in their head. */
.checklist { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 8px; }
.checklist li {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
  border: 1px solid oklch(var(--background-200)); background: oklch(var(--background-50));
}
.checklist i { color: oklch(var(--primary-700)); font-size: 1.1rem; margin-top: 2px; }

/* Where to find it: the menu path as pills. */
.crumb-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumb { padding: 4px 12px; border-radius: 999px; background: oklch(var(--background-100)); font-weight: 600; font-size: 0.9375rem; }
.crumb-path .link-pill { margin-top: 0; margin-left: 6px; }

/* An example: tiles joined by + = signs. */
.equation { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.eq-op { align-self: center; font-size: 1.5rem; font-weight: 800; color: oklch(var(--foreground-500)); }
.eq-tile {
  display: flex; flex-direction: column; gap: 2px; min-width: 9rem; flex: 1 1 9rem; padding: 12px 14px; border-radius: 12px;
  border: 1px solid oklch(var(--background-200)); background: oklch(var(--background-50));
}
.eq-tile i { font-size: 1.4rem; color: oklch(var(--primary-700)); }
.eq-tile strong { font-size: 1.25rem; }
.eq-tile small { color: oklch(var(--foreground-600)); }

/* If something goes wrong: the problem, then its fix. */
.fix-cards { display: grid; gap: 10px; }
.fix-card { border: 1px solid oklch(var(--background-200)); border-radius: 12px; overflow: hidden; }
.fix-problem, .fix-answer { display: flex; gap: 10px; padding: 10px 14px; }
.fix-problem { background: oklch(var(--accent-50)); color: oklch(var(--accent-800)); font-weight: 600; }
.fix-answer { background: oklch(var(--background-50)); color: oklch(var(--foreground-700)); }
.fix-problem i, .fix-answer i { font-size: 1.2rem; flex: none; }
.fix-answer i { color: oklch(var(--success-600)); }

.article-toc li a { display: inline-flex; gap: 6px; align-items: center; }

@media (max-width: 600px) {
  .glance-row { padding: 12px; }
  .date-tile { min-width: 3.75rem; }
  .date-tile .day { font-size: 1.5rem; }
  .stepper > li { padding-left: 46px; }
}

.sources { list-style: none; padding: 0; display: grid; gap: 8px; }
.sources li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: oklch(var(--background-100)); }
.sources i { color: oklch(var(--primary-700)); margin-top: 3px; }
.sources a { word-break: break-word; }

.side-box {
  position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 14px; padding: 16px;
  border-radius: var(--radius); border: 1px solid oklch(var(--background-200)); background: oklch(var(--background-100));
  font-size: 0.875rem;
}
.side-box h3 { font-size: 0.875rem; }
.side-box ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.side-box ul a { display: block; padding: 4px 0; min-height: 24px; }
@media (max-width: 960px) { .side-box { position: static; } }

mark.check-mark { background: oklch(var(--danger-100)); color: oklch(var(--danger-800)); padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* ---- cards, tables, page heads (editor screens) -------------------------- */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head p { color: oklch(var(--foreground-600)); margin-top: 6px; max-width: 46rem; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; }

.card { border: 1px solid oklch(var(--background-200)); border-radius: var(--radius); background: oklch(var(--background-50)); margin-bottom: 20px; overflow: hidden; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  font-weight: 600; background: oklch(var(--background-100)); border-bottom: 1px solid oklch(var(--background-200));
}
.card-body { padding: 16px; }
.card-body > :last-child { margin-bottom: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { padding: 14px 16px; border-radius: var(--radius); border: 1px solid oklch(var(--background-200)); background: oklch(var(--background-50)); color: inherit; }
a.stat:hover { border-color: oklch(var(--primary-300)); text-decoration: none; }
.stat .num { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: oklch(var(--foreground-900)); font-variant-numeric: tabular-nums; }
.stat .label { font-size: 0.8125rem; color: oklch(var(--foreground-500)); font-weight: 500; }
.stat.alert .num { color: oklch(var(--danger-600)); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid oklch(var(--background-200)); vertical-align: top; }
.table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: oklch(var(--foreground-500)); font-weight: 600; background: oklch(var(--background-100)); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid oklch(var(--background-200)); font-size: 0.875rem; }
.simple-list li:last-child { border-bottom: 0; }
.simple-list .empty-row { color: oklch(var(--foreground-500)); justify-content: flex-start; }

.bar { height: 8px; border-radius: 999px; background: oklch(var(--background-200)); overflow: hidden; }
.bar > span { display: block; height: 100%; background: oklch(var(--primary-600)); border-radius: 999px; }
.bar.done > span { background: oklch(var(--success-600)); }
.mix-row { display: grid; grid-template-columns: 6rem 1fr 6.5rem; gap: 12px; align-items: center; font-size: 0.875rem; margin-bottom: 10px; }
.mix-row:last-child { margin-bottom: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tabs a { padding: 6px 12px; border-radius: 999px; font-size: 0.8125rem; border: 1px solid oklch(var(--background-300)); color: oklch(var(--foreground-700)); }
.tabs a.active { background: oklch(var(--primary-700)); border-color: oklch(var(--primary-700)); color: #fff; }
.tabs a:hover { text-decoration: none; }

.workflow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; font-size: 0.8125rem; }
.workflow .stage { padding: 4px 10px; border-radius: 999px; background: oklch(var(--background-200)); color: oklch(var(--foreground-500)); font-weight: 600; }
.workflow .stage.done { background: oklch(var(--success-100)); color: oklch(var(--success-800)); }
.workflow .stage.now { background: oklch(var(--primary-700)); color: #fff; }
.workflow i { color: oklch(var(--foreground-400)); }

.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form .input { flex: 1; min-width: 12rem; min-height: 36px; padding: 6px 10px; }
.action-stack { display: grid; gap: 12px; }

/* ---- forms ------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: oklch(var(--foreground-800)); }
.field .hint { font-weight: 400; color: oklch(var(--foreground-500)); font-size: 0.8125rem; }
.input, select.input, textarea.input {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: 8px; font: inherit; font-weight: 400;
  border: 1px solid oklch(var(--background-300)); background: oklch(var(--background-50)); color: oklch(var(--foreground-900));
}
textarea.input { min-height: 7rem; resize: vertical; line-height: 1.55; }
textarea.input.tall { min-height: 12rem; }
.input:focus { outline: 2px solid oklch(var(--primary-300)); border-color: oklch(var(--primary-600)); }
.input[readonly] { background: oklch(var(--background-100)); color: oklch(var(--foreground-600)); }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 0.875rem; }
.check input { margin-top: 4px; }
.field-validation-error { color: oklch(var(--danger-600)); font-weight: 500; font-size: 0.8125rem; }
.validation-summary-valid { display: none; }
.validation-summary-errors {
  padding: 12px 14px; margin-bottom: 16px; border-radius: var(--radius); font-size: 0.875rem;
  background: oklch(var(--danger-50)); border: 1px solid oklch(var(--danger-100)); color: oklch(var(--danger-800));
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.input-validation-error { border-color: oklch(var(--danger-600)); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

fieldset.part-set { border: 1px solid oklch(var(--background-200)); border-radius: var(--radius); padding: 16px; margin: 0 0 20px; }
fieldset.part-set legend { padding: 0 8px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

.source-rows { display: grid; gap: 10px; }
.source-row { display: grid; grid-template-columns: 1.2fr 1.6fr 10rem; gap: 8px; }
@media (max-width: 720px) { .source-row { grid-template-columns: 1fr; padding-bottom: 10px; border-bottom: 1px dashed oklch(var(--background-300)); } }

.channel-post { position: relative; }
.channel-post pre {
  margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-body); font-size: 0.9rem;
  padding: 14px; border-radius: 8px; background: oklch(var(--background-100)); border: 1px solid oklch(var(--background-200));
}
.channel-post .btn { position: absolute; top: 8px; right: 8px; }
.slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 10px; }
.slide {
  aspect-ratio: 4 / 5; padding: 14px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center;
  white-space: pre-line; font-weight: 600; font-size: 0.875rem; line-height: 1.45;
  background: oklch(var(--primary-700)); color: #fff; position: relative;
}
.slide small { position: absolute; top: 8px; left: 12px; opacity: 0.7; font-weight: 500; }

/* ---- policy pages --------------------------------------------------------- */

.policy { max-width: var(--reading); }
.policy .updated { color: oklch(var(--foreground-500)); font-size: 0.875rem; margin-top: 8px; }
.callout {
  display: flex; gap: 12px; padding: 16px; border-radius: var(--radius); margin: 20px 0;
  background: oklch(var(--primary-50)); border: 1px solid oklch(var(--primary-100));
}
.callout i { font-size: 1.4rem; color: oklch(var(--primary-700)); flex: none; }

/* ---- info pages (About, Careers, Contact): shaded header band, then cards --- */

.page-hero {
  padding: 56px 0 44px; text-align: center;
  background:
    radial-gradient(50rem 24rem at 10% -20%, oklch(var(--primary-100) / 0.9) 0%, transparent 60%),
    radial-gradient(40rem 20rem at 95% 120%, oklch(var(--accent-100) / 0.7) 0%, transparent 60%),
    linear-gradient(180deg, oklch(var(--primary-50)) 0%, oklch(var(--background-50)) 100%);
  border-bottom: 1px solid oklch(var(--background-200));
}
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.02em; }
.page-hero-lead { margin: 12px auto 0; max-width: 44rem; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: oklch(var(--foreground-700)); }
.page-body { padding-top: 36px; padding-bottom: 56px; }
.page-body > .callout { margin-top: 0; }

.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.info-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .info-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .info-grid, .info-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.info-card {
  display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 14px;
  background: oklch(var(--background-50)); border: 1px solid oklch(var(--background-200));
  box-shadow: 0 10px 28px oklch(0.3 0.04 200 / 0.06);
}
.info-card h2 { font-size: 1.2rem; }
.info-card p, .info-card li { color: oklch(var(--foreground-700)); }
.info-card ul { padding-left: 1.2rem; display: grid; gap: 6px; }
.info-card a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.info-card .btn { justify-self: start; }
.info-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem;
  background: oklch(var(--primary-50)); color: oklch(var(--primary-700)); border: 1px solid oklch(var(--primary-100));
}

.cta-strip {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between;
  margin-top: 24px; padding: 24px 28px; border-radius: 14px;
  background: oklch(var(--primary-50)); border: 1px solid oklch(var(--primary-100));
}
.cta-strip h2 { font-size: 1.2rem; }
.cta-strip p { color: oklch(var(--foreground-700)); margin-top: 4px; max-width: 46rem; }

/* contact: the form on the left, what to expect on the right */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 32px; align-items: start; }
.contact-side { display: grid; gap: 16px; }
.contact-side .info-card { padding: 20px; }
@media (max-width: 960px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---- Pages (/pages): every guide page, one section per topic ------------------ */

.pages-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.pages-jump a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: oklch(var(--background-50)); border: 1px solid oklch(var(--background-200));
  color: oklch(var(--foreground-800)); font-weight: 600; font-size: 0.9375rem;
}
.pages-jump a:hover { border-color: oklch(var(--primary-300)); text-decoration: none; }
.pages-jump a i { color: oklch(var(--primary-700)); }
.pages-jump a span { padding: 0 7px; border-radius: 999px; font-size: 0.75rem; background: oklch(var(--primary-50)); color: oklch(var(--primary-800)); }
.pages-filter { max-width: 36rem; margin: 0 auto 28px; }
.pages-none { text-align: center; margin-bottom: 24px; }
.pages-section { scroll-margin-top: calc(var(--header-h) + 16px); }
.pages-section + .pages-section { margin-top: 40px; }
.pages-section .section-head { align-items: center; border-bottom: 1px solid oklch(var(--background-200)); padding-bottom: 12px; }
.pages-section h2 { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; }
.pages-section .guide-grid { grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.page-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.page-card .card-meta { margin-top: auto; }
.pages-section[hidden], .page-card[hidden] { display: none; }

/* ---- AdSense units (placed by Ananta's Ad Placer) ------------------------------
   A calm, premium pause between two blocks of reading: a quiet card in the site's
   own look, a small centred label, the space held while the ad loads (no jump),
   and nothing at all when Google has no ad to show. */

.ad-slot {
  margin: 40px 0; padding: 10px 16px 16px; display: grid; gap: 10px; justify-items: center;
  background: oklch(var(--background-100)); border: 1px solid oklch(var(--background-200)); border-radius: 14px;
}
.ad-label {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(var(--foreground-400));
}
.ad-label::before, .ad-label::after { content: ""; flex: 1; height: 1px; background: oklch(var(--background-200)); }
.ad-slot ins.adsbygoogle { width: 100%; min-height: 250px; }
.ad-slot ins.adsbygoogle[data-ad-status="filled"] { min-height: 0; }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
@media (max-width: 640px) { .ad-slot { margin: 32px -4px; padding: 8px 10px 12px; } }

/* Ananta's preview: the same card, so the editor sees the real footprint. */
.ad-slot-preview .ad-box {
  width: 100%; min-height: 200px; display: grid; place-items: center; gap: 4px; text-align: center;
  border: 1px dashed oklch(var(--background-300)); border-radius: 10px;
  color: oklch(var(--foreground-500)); font-size: 0.875rem;
}
.ad-slot-preview .ad-box i { font-size: 1.5rem; color: oklch(var(--foreground-400)); }

/* Side-column units, beside the guide on wide screens only. Each column holds its
   box and, under it, the ad card; the contents stay pinned while reading unless a
   unit sits under them, so an ad never floats. The columns stack before the guide
   on a phone, so there the side units are not shown at all. */
.article-rail { display: grid; gap: 24px; align-content: start; align-self: stretch; }
.article-rail-toc { grid-area: toc; }
.article-rail-side { grid-area: side; }
/* Inside its column the box is an ordinary item, not placed by the page grid's names. */
.article-rail > .article-toc, .article-rail > .article-side { grid-area: auto; }
.article-rail.has-ad .side-box.article-toc { position: static; }
.ad-slot.ad-rail { margin: 0; padding: 10px 12px 12px; }
.ad-slot.ad-rail ins.adsbygoogle { min-height: 250px; }
.ad-slot-preview.ad-rail .ad-box { min-height: 250px; padding: 12px; }
@media (max-width: 1279px) { .ad-rail-left { display: none; } }
@media (max-width: 960px) { .ad-rail { display: none; } }