/* Leaders Loop — design system.
   Self-contained tokens; distinct brand from the alfords.xyz family.
   Deep indigo primary, warm amber accent, ink/paper neutrals. */

:root {
	--ink: #15131f;
	--ink-soft: #3a3650;
	--muted: #6c6880;
	--line: #e7e4ef;            /* decorative dividers / card + table edges */
	--line-strong: #8c84a8;     /* interactive boundaries (form fields, ghost-button borders) — WCAG 1.4.11 >=3:1 */
	--paper: #ffffff;
	--paper-2: #f7f6fb;
	--paper-3: #f0eef8;

	--primary: #4f2dc7; /* indigo/violet */
	--primary-700: #3c1ea0;
	--primary-300: #8f74ef;
	--accent: #f5a524; /* amber — decorative fills/dots only */
	--accent-700: #9a6000; /* amber-as-text (kickers, pills): darkened to clear AA 4.5:1 on paper + the pill fill */

	--grad: linear-gradient(135deg, #4f2dc7 0%, #6d3bd6 45%, #9333ea 100%);
	--grad-soft: linear-gradient(135deg, #f0eafb 0%, #f7f2fe 100%);

	--radius: 16px;
	--radius-sm: 10px;
	--shadow: 0 1px 2px rgba(21, 19, 31, .04), 0 12px 32px rgba(79, 45, 199, .08);
	--shadow-lg: 0 24px 60px rgba(79, 45, 199, .16);
	--maxw: 1120px;
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--serif: "Newsreader", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--paper);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-700); }

/* Visible keyboard-focus indicator (2.4.7 / 1.4.11). Primary outline on light
   surfaces; white on the purple gradient bands where primary would vanish. */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.masthead :focus-visible, .cta-band :focus-visible { outline-color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

.eyebrow {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: .9rem;
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: inherit;  /* <button> defaults to the UA font otherwise */
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;         /* anchors inherit body 1.6, buttons use normal — pin both */
	padding: .8rem 1.4rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--ink); border-color: var(--primary-300); background: var(--paper-2); }
.btn-lg { padding: 1rem 1.8rem; font-size: 1.02rem; }

.pill {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--accent-700); background: #fff6e6; border: 1px solid #f6e2b8;
	padding: .25rem .6rem; border-radius: 999px;
}

/* ---------- header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.82);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 1px 2px rgba(21, 19, 31, .05), 0 6px 20px rgba(79, 45, 199, .06);
}
.nav { display: flex; align-items: center; gap: 1.25rem; height: 68px; }
/* Brand sits hard left; the nav and the auth control cluster on the right. */
.nav .brand { margin-right: auto; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand .mark { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: .3rem; }
.nav-links a { color: var(--ink-soft); font-weight: 500; font-size: .95rem; padding: .4rem .7rem; border-radius: 999px; transition: background-color .15s ease, color .15s ease; }
.nav-links a:hover { color: var(--primary); background: var(--paper-3); }
.nav-links a.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--paper)); }
.nav-links a.is-active:hover { background: color-mix(in srgb, var(--primary) 16%, var(--paper)); }
.nav-sep { color: var(--line); font-weight: 300; margin: 0 .15rem; user-select: none; pointer-events: none; }
/* Auth links live in the nav for the mobile dropdown; on desktop the buttons in
   .nav-cta carry Sign in / Sign up instead, so hide the in-menu copies. */
.nav-auth { display: none; }
.nav-cta { display: flex; align-items: center; gap: .6rem; }
/* Signed-in account control: an initials avatar that opens a <details> menu
   (Reports / Profile / learning groups / Sign out). Shared by the public site
   and the signed-in app so the header is identical everywhere. */
.nav-menu { position: relative; }
.nav-avatar {
	width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff;
	display: grid; place-items: center; font-weight: 700; font-size: .82rem; letter-spacing: .02em;
	cursor: pointer; user-select: none; list-style: none;
	box-shadow: var(--shadow); transition: box-shadow .15s ease, transform .15s ease;
}
.nav-avatar::-webkit-details-marker { display: none; }
.nav-avatar:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.nav-menu[open] > .nav-avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.nav-menu-pop {
	position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg); padding: .5rem; z-index: 60;
}
.nav-menu-head { padding: .5rem .7rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.nav-menu-name { display: block; font-weight: 700; color: var(--ink); line-height: 1.3; }
.nav-menu-email { display: block; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.nav-menu form { margin: 0; }
.nav-menu-item {
	display: block; width: 100%; text-align: left; box-sizing: border-box;
	background: none; border: 0; font: inherit; color: var(--ink-soft); cursor: pointer;
	padding: .55rem .7rem; border-radius: var(--radius-sm); text-decoration: none;
}
.nav-menu-item:hover { background: var(--paper-3); color: var(--primary); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: .2s; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--grad-soft); border-bottom: 1px solid var(--line); }
.hero::after {
	content: ""; position: absolute; right: -10%; top: -30%;
	width: 520px; height: 520px; border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(147,51,234,.18), transparent 60%);
	pointer-events: none;
}
.hero-inner { padding: clamp(32px, 5vw, 60px) 24px clamp(56px, 8vw, 96px); max-width: var(--maxw); position: relative; z-index: 1; }
.hero h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-note { margin-top: 1.4rem; font-size: .9rem; color: var(--muted); }

/* two-column hero: copy left, flywheel right-aligned on a white card */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-copy h1 { font-size: clamp(2rem, 3.3vw, 3rem); }
.hero-figure {
	margin: 0; justify-self: end; width: 100%; max-width: 460px; aspect-ratio: 1;
	display: grid; place-items: center;
	background: var(--paper); border: 1px solid var(--line); border-radius: 50%;
	padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow-lg);
}
.hero-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
	.hero-split { grid-template-columns: 1fr; }
	.hero-figure { justify-self: center; max-width: 380px; margin-top: 1rem; }
}

/* ---------- sections ---------- */
.section { padding: clamp(32px, 4.5vw, 55px) 0; }
.section-alt { background: var(--paper-2); }
.section-head { max-width: none; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.pillar {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 2rem 1.8rem; box-shadow: var(--shadow);
	display: flex; flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-300); }
.pillar .icon {
	width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
	background: var(--grad-soft); color: var(--primary); margin-bottom: 1.2rem;
}
.pillar .icon svg { width: 26px; height: 26px; }
.pillar h3 { margin-bottom: .5rem; }
.pillar p { color: var(--muted); font-size: .98rem; flex: 1; }
.pillar .more { margin-top: 1.2rem; font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; }
.pillar .more svg { width: 16px; height: 16px; transition: transform .15s ease; }
.pillar:hover .more svg { transform: translateX(3px); }

/* ---------- cards / placeholders ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card-media { aspect-ratio: 3 / 2; background: var(--grad-soft); display: grid; place-items: center; color: var(--primary-300); overflow: hidden; }
.card-media svg { width: 40px; height: 40px; opacity: .6; }
/* Photo cards: show the full uncropped portrait (contain), and fill the
   surrounding gaps with a blurred, lightly-frosted copy of the same image so
   the photo sits on a matching, softly-coloured backdrop instead of a band. */
.card-media-photo { position: relative; }
.card-media-blur {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(22px) saturate(1.35) brightness(1.08);
  transform: scale(1.2); /* overscan so the blur never bleeds a soft edge in */
}
.card-media-blur::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.38); }
.card-media-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
/* Generated cover art fills the whole tile (overrides the 40px icon rule). */
.card-media-art { padding: 0; }
.card-media svg.card-art { width: 100%; height: 100%; opacity: 1; display: block; }
.card-body { padding: 1.4rem 1.5rem; }
.card-body .kicker { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-700); }
.card-body h3 { margin: .4rem 0 .5rem; }
.card-body p { color: var(--muted); font-size: .95rem; margin: 0; }
.card-body .meta { margin-top: 1rem; font-size: .85rem; color: var(--muted); }

.coming { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.coming::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- app teaser ---------- */
.app-teaser { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.plan { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.3rem; background: var(--paper); }
.plan.featured { border-color: var(--primary-300); box-shadow: var(--shadow); position: relative; }
.plan h4 { margin: 0 0 .2rem; font-size: 1.05rem; }
.plan .price { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: .4rem 0; }
.plan .price small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: .8rem 0 0; }
.plan li { font-size: .9rem; color: var(--ink-soft); padding: .3rem 0 .3rem 1.4rem; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.mock {
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
	box-shadow: var(--shadow-lg); overflow: hidden;
}
.mock-bar { display: flex; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.mock-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); display: block; }
.mock-body { padding: 1.5rem; }
.gauge { height: 10px; border-radius: 999px; background: var(--paper-3); overflow: hidden; margin: .6rem 0 1.2rem; }
.gauge i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.skel { height: 12px; border-radius: 6px; background: var(--paper-3); margin: .5rem 0; }
.skel.w-70 { width: 70%; } .skel.w-50 { width: 50%; } .skel.w-90 { width: 90%; }
.mock-label { font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- signup / CTA band ---------- */
.cta-band { background: var(--grad); color: #fff; border-radius: var(--radius); padding: clamp(36px, 5vw, 60px); text-align: center; box-shadow: var(--shadow-lg); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 540px; margin: 0 auto 1.6rem; }
/* High-contrast buttons on the purple band: solid white primary (purple text),
   white-outlined secondary (white text) — the default purple/ink buttons vanish. */
.cta-band .btn-primary { background: #fff; color: var(--primary-700); box-shadow: var(--shadow); }
.cta-band .btn-primary:hover { background: #fff; color: var(--primary-700); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.signup { display: flex; gap: .6rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.signup input {
	flex: 1; min-width: 220px; padding: .85rem 1.1rem; border-radius: 999px; border: 0;
	font-size: .98rem; font-family: inherit; outline: none;
}
.signup .btn-primary { background: var(--ink); }
.signup .btn-primary:hover { background: #000; }
.form-note { font-size: .82rem; color: rgba(255,255,255,.92); margin-top: 1rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--paper-2); padding: 3rem 0 2.5rem; margin-top: 0; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.footer-brand { max-width: 320px; }
.footer-brand p { color: var(--muted); font-size: .92rem; }
.footer-cols { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.footer-col h5 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin: 0 0 .8rem; }
.footer-col a { display: block; color: var(--muted); font-size: .92rem; padding: .25rem 0; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: .85rem; }

/* region (UK/AU) switcher in the footer */
.region-switch { margin-top: 2rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.region-switch-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .25rem; }
.region-opt { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .85rem; line-height: 1; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.region-opt:hover { color: var(--primary); border-color: var(--primary); }
.region-opt.is-active { color: #fff; background: var(--primary); border-color: var(--primary); }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- inner page (insights / profiles / assessment) ---------- */
.page-hero { background: var(--grad-soft); border-bottom: 1px solid var(--line); padding: clamp(28px, 4vw, 45px) 0; }
.page-hero .lede { font-size: 1.15rem; color: var(--ink-soft); }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--muted); }
.empty-state { text-align: center; max-width: 520px; margin: 0 auto; padding: 2rem 0; }
.empty-state .icon { width: 64px; height: 64px; border-radius: 18px; background: var(--grad-soft); color: var(--primary); display: grid; place-items: center; margin: 0 auto 1.4rem; }
.empty-state .icon svg { width: 32px; height: 32px; }

/* ---------- article / editorial profile ---------- */
.article-hero { background: var(--grad-soft); border-bottom: 1px solid var(--line); padding: clamp(48px, 7vw, 84px) 0 clamp(40px, 6vw, 64px); }
.article-hero .wrap { max-width: var(--maxw); }
.article-kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; }
.article-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -.01em; line-height: 1.1; margin: 0 0 1rem; }
.article-standfirst { font-size: clamp(1.12rem, 2vw, 1.35rem); color: var(--ink-soft); line-height: 1.5; margin: 0 0 1.6rem; }
.byline { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; color: var(--muted); font-size: .92rem; }
.byline .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.byline b { color: var(--ink); font-weight: 600; }
.byline .sep { opacity: .5; }

.article-lead { max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 4vw, 44px) 24px 0; }
.article-lead figure { margin: 0 auto; max-width: 380px; }
.article-lead img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block; }
.article-lead figcaption { font-size: .85rem; color: var(--muted); margin-top: .7rem; text-align: center; }

.article-body { max-width: var(--maxw); margin: 0 auto; padding: clamp(36px, 5vw, 56px) 24px clamp(48px, 7vw, 88px); }
.article-body > p, .article-body > ul, .article-body > ol { font-size: 1.12rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 1.4rem; }
.article-body > p:first-of-type::first-letter {
	float: left; font-family: var(--serif); font-size: 3.6rem; line-height: .82; font-weight: 600;
	padding: .1rem .6rem .1rem 0; color: var(--primary);
}
.article-body h2 { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; letter-spacing: -.01em; margin: 2.6rem 0 1rem; color: var(--ink); }
.article-body h3 { font-size: 1.15rem; margin: 2rem 0 .6rem; color: var(--ink); }
.article-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--primary-700); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body blockquote {
	margin: 2rem 0; padding: .4rem 0 .4rem 1.6rem; border-left: 4px solid var(--primary-300);
	font-family: var(--serif); font-size: 1.45rem; line-height: 1.4; color: var(--ink); font-style: italic;
}
.article-body blockquote cite { display: block; font-style: normal; font-family: var(--font); font-size: .9rem; color: var(--muted); margin-top: .7rem; }
.article-body ul { padding-left: 1.3rem; }
.article-body li { margin: .4rem 0; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }

.article-fig { margin: 2.4rem 0; }
.article-fig img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.article-fig figcaption { font-size: .85rem; color: var(--muted); margin-top: .6rem; line-height: 1.45; }
.article-fig figcaption .credit { display: block; opacity: .72; font-size: .8rem; margin-top: .15rem; }

.article-pullquote {
	font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.32; color: var(--primary-700); text-align: center;
	margin: 2.8rem auto; max-width: 600px;
}

.article-note {
	background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.4rem 1.6rem; margin-top: 2rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.6;
}
.article-note h4 { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }

.factbox {
	background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.6rem 1.8rem; margin: 2.2rem 0; box-shadow: var(--shadow);
}
.factbox h4 { margin: 0 0 1rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.factbox dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.4rem; margin: 0; font-size: .96rem; }
.factbox dt { color: var(--muted); font-weight: 600; }
.factbox dd { margin: 0; color: var(--ink); }

.article-footer { max-width: var(--maxw); margin: 0 auto; padding: 0 24px clamp(56px, 8vw, 96px); }
.article-footer .note { font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.6rem; }
.article-sources { font-size: .85rem; color: var(--muted); margin-top: 1.2rem; }
.article-sources a { color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
	.pillars, .grid-2, .grid-3, .app-teaser, .plans { grid-template-columns: 1fr; }
	.app-teaser { gap: 2rem; }
	.nav-links { position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem 24px; display: none; box-shadow: var(--shadow); }
	.nav-links.open { display: flex; }
	.nav-links a { padding: .8rem 0; width: 100%; border-bottom: 1px solid var(--line); }
	.nav-sep { display: none; }
	.nav-toggle { display: block; }
	.nav-cta .btn-ghost { display: none; }
	/* On mobile the "My Dashboard" link moves into the dropdown (.nav-auth); the
	   header keeps just the avatar beside the hamburger. */
	.nav-dash { display: none; }
	.nav-auth { display: block; }
	.factbox dl { grid-template-columns: 1fr; gap: .15rem; }
	.factbox dt { margin-top: .6rem; }
}

/* ===================================================================
   ADMIN — login + editorial workspace (Profiles / Insights).
   Self-contained, reuses the Leaders Loop tokens above. Element IDs and
   class names here are contracts with public/admin.js + public/login.js.
   =================================================================== */

.btn-sm { font-size: .8125rem; padding: .4rem .7rem; }
.btn-danger { background: #fff; color: #c0362c; border-color: var(--line); }
.btn-danger:hover { background: #fde8e6; color: #8f231c; }

.page-admin { background: var(--paper-2); }
.page-admin .container { max-width: 1120px; margin: 0 auto; padding: 2rem 24px 5rem; }

.masthead { background: var(--grad); color: #fff; position: relative; z-index: 1; box-shadow: 0 2px 6px rgba(21, 19, 31, .08), 0 8px 24px rgba(79, 45, 199, .22); }
.masthead-inner { max-width: 1120px; margin: 0 auto; padding: 1.4rem 24px; }
/* Admin masthead — match the public header height (~68px) */
.masthead-inner.compact { padding-top: .9rem; padding-bottom: .9rem; }
.back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: rgba(255,255,255,.9); }
.back-link:hover { color: #fff; }

/* Login card */
.auth-wrap { display: flex; justify-content: center; padding: 4rem 24px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.4rem; width: 100%; max-width: 400px; }
.auth-title { margin: 0 0 .2rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.auth-sub { margin: 0 0 1.4rem; color: var(--muted); font-size: .94rem; }
.auth-error, .modal-error { background: #fde8e6; border: 1px solid #f3b5af; color: #8f231c; padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .875rem; margin-bottom: 1rem; }

/* Generic auth-card form fields — used by the self-serve app sign-in / register
   (The Loop) and the admin login. The admin #login-form keeps its own
   higher-specificity overrides below; these provide the block layout every
   auth-card form needs (without them, labels and inputs collapse inline). */
.auth-card form { margin: 0; }
.auth-card label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin: 1.1rem 0 .4rem; }
.auth-card label:first-of-type { margin-top: 0; }
.auth-card input { width: 100%; font-family: inherit; font-size: .94rem; padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.auth-card input:focus { outline: none; border-color: var(--primary-300); box-shadow: 0 0 0 3px rgba(79,45,199,.12); }
.auth-card form > button[type="submit"] { width: 100%; margin-top: 1.6rem; justify-content: center; }

#login-form label, .modal label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin: 1rem 0 .4rem; }
#login-form input, .modal input, .modal textarea { width: 100%; font-family: inherit; font-size: .94rem; padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
#login-form input:focus, .modal input:focus, .modal textarea:focus { outline: none; border-color: var(--primary-300); box-shadow: 0 0 0 3px rgba(79,45,199,.12); }
#login-form button { width: 100%; margin-top: 1.4rem; justify-content: center; }
#passkey-btn { width: 100%; margin-top: .8rem; justify-content: center; }

/* Admin bar + head */
.admin-bar { display: flex; align-items: center; justify-content: space-between; }
.admin-bar-right { display: flex; align-items: center; gap: 1.4rem; }
/* lighter "| ADMIN" tag after the wordmark */
.admin-wordmark-tag { font-weight: 400; opacity: .8; font-size: .8rem; letter-spacing: 0; }
/* section nav in the masthead (right side, left of the avatar) — top-level items
   stretch to the full header height so the hover mega-menu has no dead gap. */
.admin-nav { align-self: stretch; }
.adminmenu { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 1.4rem; height: 100%; }
.adminmenu-item { display: flex; align-items: center; }
.adminmenu-item > a { color: rgba(255,255,255,.82); font-weight: 600; font-size: .9rem; text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.adminmenu-item > a:hover { color: #fff; }
.adminmenu-item > a.is-active { color: #fff; border-bottom-color: #fff; }
/* full-width dropdown panel that drops from the bottom of the header row. It is
   anchored to .masthead (position:relative) so left/right:0 spans the page; the
   transparent padding-top bridges the masthead's bottom padding so moving the
   cursor from the menu item into the panel never crosses an un-hoverable gap. */
.adminmega { position: absolute; left: 0; right: 0; top: calc(100% - .9rem); padding-top: .9rem; display: none; z-index: 50; }
.adminmenu-item.has-mega:hover > .adminmega,
.adminmenu-item.has-mega:focus-within > .adminmega { display: block; }
.adminmega-inner { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(21,19,31,.18); padding: 1.6rem 24px 1.8rem; }
.adminmega-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.adminmega-card { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; }
.adminmega-card:hover { border-color: var(--primary-300); box-shadow: 0 6px 18px rgba(79,45,199,.12); }
.adminmega-card-title { font-weight: 700; color: var(--ink); font-size: .95rem; }
.adminmega-card-desc { font-size: .82rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 760px) { .adminmega-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .adminmenu { gap: .9rem; } .adminmenu-item > a { font-size: .82rem; } }
/* content-card grids on the admin section landing pages */
.admin-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.admin-card-grid.is-2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px) { .admin-card-grid.is-2x2 { grid-template-columns: 1fr; } }
.admin-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; min-height: 130px; }
a.admin-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
a.admin-card:hover { border-color: var(--primary-300); box-shadow: 0 8px 24px rgba(79,45,199,.12); transform: translateY(-1px); }
.admin-card.is-placeholder { border-style: dashed; background: var(--paper); }
.admin-card-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.admin-card-desc { margin: 0; font-size: .9rem; line-height: 1.5; }
.admin-card-go { margin-top: auto; font-weight: 600; color: var(--primary); font-size: .9rem; }
.admin-crumb { margin: 0 0 -.6rem; font-size: .85rem; color: var(--muted); }
.admin-crumb a { color: var(--primary); font-weight: 600; text-decoration: none; }
.admin-crumb a:hover { text-decoration: underline; }
.admin-crumb span { color: var(--muted); }
/* Users & Subscriptions — edit column + edit dialog */
.lg-flash.is-error { background: #fde8e6; color: #8f231c; border-color: #f4c9c4; }
.data-table td.t-edit, .data-table th.t-edit { text-align: right; }
.user-dialog { width: min(92vw, 480px); border: none; border-radius: var(--radius); padding: 0; box-shadow: 0 24px 60px rgba(21,19,31,.28); color: var(--ink); }
.user-dialog::backdrop { background: rgba(21,19,31,.45); }
.user-form { padding: 1.5rem 1.6rem 1.4rem; display: grid; gap: .85rem; }
.user-dialog-title { margin: 0 0 .2rem; font-size: 1.2rem; font-weight: 700; }
.user-dialog-error { margin: 0; padding: .55rem .75rem; background: #fde8e6; color: #8f231c; border: 1px solid #f4c9c4; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600; }
.user-field { display: grid; gap: .3rem; }
.user-field > span { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.user-field input, .user-field select { font: inherit; padding: .55rem .65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.user-field input:focus, .user-field select:focus { outline: 2px solid var(--primary-300); outline-offset: 1px; border-color: var(--primary); }
.user-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; }
.user-dialog-actions-right { display: inline-flex; gap: .5rem; }
.admin-user { color: rgba(255,255,255,.92); font-size: .8125rem; }
/* "Enterprise enquiries" link (top-right of Users & Subscriptions) + unread badge */
.admin-enq-link { display: inline-flex; align-items: center; gap: .5rem; }
.admin-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; font-size: .72rem; font-weight: 700; line-height: 1; color: #fff; background: var(--primary); border-radius: 999px; }
/* Plan filter tabs on the Users & Subscriptions page (server-side, no JS) */
.admin-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; border-bottom: 1px solid var(--line); }
.admin-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; font-size: .875rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tab:hover { color: var(--primary); }
.admin-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.admin-tab-count { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .4rem; font-variant-numeric: tabular-nums; }
.admin-tab.is-active .admin-tab-count { color: var(--primary); background: #ece8fb; border-color: var(--primary-300); }
.admin-bar .btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.65); }
.admin-bar .btn-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }
/* Account avatar + popup menu (replaces the inline email + sign-out) */
.admin-acct { position: relative; }
.admin-acct > summary { list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: var(--primary); background: #fff; border: 1px solid rgba(255,255,255,.65); box-shadow: var(--shadow); transition: box-shadow .15s ease, transform .15s ease; }
.admin-acct > summary::-webkit-details-marker { display: none; }
.admin-acct > summary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.admin-acct[open] > summary { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.admin-acct-menu { position: absolute; right: 0; top: calc(100% + .55rem); min-width: 232px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .9rem; z-index: 60; }
.admin-acct-email { font-size: .85rem; font-weight: 600; color: var(--ink); word-break: break-all; margin-bottom: .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
/* Sign-out sits in the white popup now — use the normal ghost style, not the masthead variant */
.admin-acct-menu .btn-ghost { width: 100%; background: transparent; color: var(--ink); border-color: var(--line-strong); }
.admin-acct-menu .btn-ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--primary-300); }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 1.4rem; }
.admin-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }

.passkey-prompt { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; background: var(--grad-soft); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1.4rem; font-size: .875rem; }
/* Respect the hidden attribute — the class rule above otherwise overrides UA [hidden] */
.passkey-prompt[hidden] { display: none; }
.passkey-prompt span { flex: 1 1 auto; }

/* Role filter chips (profiles index) — no-JS links, ?role= drives the list */
/* Single full-width row of equal-size filter boxes, divided from the cards by a
   light rule. flex:1 1 0 keeps the boxes equal and full-width for any count. */
.role-filters {
  display: flex; flex-wrap: nowrap; gap: .6rem;
  margin: 0 0 2rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.role-chip {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: .82rem; font-weight: 600; line-height: 1.2;
  color: var(--ink-soft); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem .7rem; min-height: 66px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.role-chip:hover { color: var(--primary); border-color: var(--primary-300); background: #fff; }
/* Count as a badge straddling the top-right corner (half in, half out).
   Non-selected chip: gradient badge, white text. Selected chip: white badge,
   purple text + a thin purple border. */
.role-chip-count {
  position: absolute; top: 0; right: 0; transform: translate(38%, -45%);
  font-size: .72rem; font-weight: 700; line-height: 1; color: #fff;
  background: var(--grad); border: 1px solid transparent; border-radius: 999px;
  padding: .15rem .42rem; min-width: 1.35em; text-align: center; box-shadow: var(--shadow);
}
.role-chip.is-active { color: #fff; background: var(--grad); border-color: transparent; box-shadow: var(--shadow); }
.role-chip.is-active:hover { color: #fff; }
.role-chip.is-active .role-chip-count { color: var(--primary); background: #fff; border-color: var(--primary); }
/* Narrow screens: fall back to wrapped pill chips with a plain inline count. */
@media (max-width: 760px) {
  .role-filters { flex-wrap: wrap; gap: .5rem; }
  .role-chip { flex: 0 1 auto; gap: .45rem; min-height: 0; border-radius: 999px; padding: .5rem .9rem; font-size: .88rem; line-height: 1; }
  .role-chip-count { position: static; transform: none; box-shadow: none; border: 0; background: none; color: var(--muted); padding: .1rem .45rem; }
  .role-chip.is-active .role-chip-count { color: rgba(255,255,255,.92); background: none; border: 0; }
}

/* Section toggle (Profiles | Insights) */
.kind-tabs { display: inline-flex; gap: .3rem; background: var(--paper-3); border-radius: 999px; padding: .3rem; margin-bottom: 1.2rem; }
.kind-tab { font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); background: none; border: none; padding: .5rem 1.2rem; border-radius: 999px; cursor: pointer; }
.kind-tab.is-active { color: var(--primary); background: #fff; box-shadow: var(--shadow); }

/* Status tabs */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; overflow-x: auto; }
.tab { font-family: inherit; font-size: .875rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: .7rem 1rem; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--primary); }
.tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* Table */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .875rem; }
.data-table th, .data-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--paper-2); }
.data-table tr:last-child td { border-bottom: none; }
/* Content column fills remaining width; small columns shrink to fit so dates
   and actions never squeeze the title/standfirst. */
.data-table td:not(.t-content), .data-table th:not(:first-child) { width: 1%; white-space: nowrap; }
.t-content { width: auto; min-width: 280px; }
/* Actions hold up to 6 buttons. Forcing them onto one nowrap line consumed the
   table width and squeezed .t-content into a narrow column with absurdly tall
   rows. Cap the column and let the buttons wrap instead. */
.data-table td.t-actions { width: 300px; white-space: normal; }
.t-title { font-weight: 600; font-size: .94rem; }
.t-excerpt { margin: .3rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-date { color: var(--muted); }
.t-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.t-actions .btn { width: 130px; justify-content: center; text-align: center; }
.muted { color: var(--muted); font-weight: 400; }
.empty { padding: 3rem; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- admin: booking dashboard summary cards ---------- */
.lg-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 0 0 2.4rem; }
.lg-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.lg-stat-label { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; }
.lg-stat-big { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--ink); }
.lg-stat-sub { font-size: .85rem; color: var(--muted); margin: .45rem 0 0; }
.lg-stat-lines { display: grid; gap: .35rem; }
.lg-stat-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.lg-stat-line .k { color: var(--ink-soft); }
.lg-stat-line .v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-stat-line.is-total { border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .45rem; }
.lg-stat-line.is-total .v { font-size: .88rem; }
/* booked-people count column on the upcoming-events table */
.data-table th.t-booked, .data-table td.t-booked { text-align: right; white-space: nowrap; }
.lg-booked-count { font-weight: 700; font-size: 1.05rem; color: var(--primary-700); font-variant-numeric: tabular-nums; }
/* Bookings → Upcoming events: track pill in its own column. Auto table layout
   sizes every column to its content (Date, Type, Price, Booked stay compact via
   the base .data-table width:1% + nowrap rule); Session and Location are the
   flexible columns that absorb the leftover width, so they grow widest. Cells
   stay single-line (nowrap) so the row height is a consistent two lines; very
   long session titles truncate (ellipsis + tooltip). */
.data-table.lg-book-events th, .data-table.lg-book-events td { white-space: nowrap; vertical-align: middle; }
.data-table.lg-book-events .lg-ev-session { width: auto; }
.data-table.lg-book-events .lg-ev-loc { width: auto; }
.lg-ev-title, .lg-ev-aud { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30rem; }
.lg-ev-aud { font-size: .82rem; margin-top: .1rem; }

/* ---------- admin: upcoming events + generation rules ---------- */
.admin-subtitle { font-size: 1.15rem; margin: 0 0 1rem; }
.lg-admin-intro { margin: 0 0 1.6rem; }
.lg-admin-sec { margin: 0 0 2.4rem; }
.lg-admin-sub { font-size: 1rem; margin: 1.6rem 0 .8rem; }
.lg-admin-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.lg-flash { background: #e3f4ea; color: #1d7a4d; border: 1px solid #b8e3c9; border-radius: var(--radius-sm); padding: .7rem 1rem; margin: 0 0 1.4rem; font-weight: 600; font-size: .9rem; }
.lg-admin-sec input, .lg-admin-sec select { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.lg-admin-sec input[type="checkbox"] { padding: 0; }

/* Generation rules — region cards + topic-slot table */
.lg-rule-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.lg-rule-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.lg-rule-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.lg-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.lg-rule-price { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); }
.lg-rule-price input { width: 92px; }
.lg-rule-price .lg-cur { font-weight: 700; color: var(--ink); }
.lg-rule-lbl { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .4rem; }
.lg-cad-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.lg-cad { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; padding: .2rem .3rem; border-radius: var(--radius-sm); cursor: pointer; }
.lg-cad input { margin: 0; }
.data-table.lg-topic-rules td { vertical-align: middle; white-space: normal; width: auto; }
.lg-topic-rules select { min-width: 110px; }

/* Add a session + the editable event list */
.lg-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto; gap: .9rem; align-items: end; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.lg-add-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--muted); }
.data-table.lg-events-table td { vertical-align: middle; white-space: normal; width: auto; }
.lg-events-table select, .lg-events-table input[type="date"], .lg-events-table input[type="number"] { width: 100%; min-width: 92px; }
.lg-events-table input[type="number"] { max-width: 110px; }
.lg-events-table tr.lg-grp td { background: var(--paper-3); font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.lg-ev-act { white-space: nowrap; }
.lg-ev-act .btn { margin: 2px; }
.lg-del { color: #b42318; border-color: #f0c4be; }
.lg-del:hover { color: #b42318; background: #fdecea; border-color: #e79a90; }

/* Status badges */
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.badge-live { background: #e3f4ea; color: #1d7a4d; }
.badge-scheduled { background: #e6ecfd; color: #2f4fc9; }
.badge-draft { background: #fbefcd; color: #8a6500; }
.badge-idea { background: var(--paper-3); color: var(--muted); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(21,19,31,.5); display: flex; align-items: flex-start; justify-content: center; padding: 2.5rem 1rem; overflow-y: auto; z-index: 50; }
.modal { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 2rem; width: 100%; max-width: 680px; }
.modal-title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; }
.modal-actions { display: flex; justify-content: flex-end; gap: .8rem; margin-top: 1.4rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
#m-editor { background: #fff; }
.ql-container { min-height: 260px; font-family: var(--font); font-size: 1rem; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--line-strong); }

/* Lead-image credit on article pages */
.article-lead figcaption .credit { display: block; opacity: .72; font-size: .8rem; margin-top: .2rem; }

/* ===================================================================
   Book a learning group (/learning-groups/)
   =================================================================== */

/* Tabbed widget — no-JS, driven by hidden radios + sibling selectors */
.lg-tabs { position: relative; }
.lg-tab-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lg-tablist { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.8rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.lg-tab { font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: .8rem 1.1rem; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.lg-tab:hover { color: var(--primary); }
.lg-panel { display: none; }
/* Show the panel whose radio is checked; highlight its tab. */
#lgtab-topics:checked ~ .lg-panels #lgpanel-topics,
#lgtab-events:checked ~ .lg-panels #lgpanel-events,
#lgtab-prices:checked ~ .lg-panels #lgpanel-prices,
#lgtab-facilitator:checked ~ .lg-panels #lgpanel-facilitator,
#lgtab-book:checked ~ .lg-panels #lgpanel-book { display: block; }
#lgtab-topics:checked ~ .lg-tablist label[for="lgtab-topics"],
#lgtab-events:checked ~ .lg-tablist label[for="lgtab-events"],
#lgtab-prices:checked ~ .lg-tablist label[for="lgtab-prices"],
#lgtab-facilitator:checked ~ .lg-tablist label[for="lgtab-facilitator"],
#lgtab-book:checked ~ .lg-tablist label[for="lgtab-book"] { color: var(--primary); border-bottom-color: var(--primary); }
.lg-tab-input:focus-visible ~ .lg-tablist label[for] { outline: none; }
#lgtab-topics:focus-visible ~ .lg-tablist label[for="lgtab-topics"],
#lgtab-events:focus-visible ~ .lg-tablist label[for="lgtab-events"],
#lgtab-prices:focus-visible ~ .lg-tablist label[for="lgtab-prices"],
#lgtab-facilitator:focus-visible ~ .lg-tablist label[for="lgtab-facilitator"],
#lgtab-book:focus-visible ~ .lg-tablist label[for="lgtab-book"] { box-shadow: 0 0 0 3px rgba(79,45,199,.18); border-radius: var(--radius-sm); }
.lg-inline-link { color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Topic tracks */
.lg-track { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.lg-track-product { color: var(--primary-700); background: #ece8fb; }
.lg-track-innovation { color: var(--accent-700); background: #fbeed4; }
.lg-track-leadership { color: #1d4ed8; background: #e6eefc; }

/* Topic track filter (no-JS, radio + sibling selectors) */
.lg-tf-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lg-tf-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.lg-tf { font-size: .85rem; font-weight: 600; color: var(--ink-soft); background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: .45rem 1.1rem; cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.lg-tf:hover { border-color: var(--primary-300); }
#tf-all:checked ~ .lg-tf-bar label[for="tf-all"],
#tf-product:checked ~ .lg-tf-bar label[for="tf-product"],
#tf-innovation:checked ~ .lg-tf-bar label[for="tf-innovation"],
#tf-leadership:checked ~ .lg-tf-bar label[for="tf-leadership"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.lg-tf-input:focus-visible ~ .lg-tf-bar label { box-shadow: 0 0 0 3px rgba(79,45,199,.18); }
/* Hide the cards that don't match the chosen track ("all" hides nothing) */
#tf-product:checked ~ .lg-topics .lg-topic:not(.t-product),
#tf-innovation:checked ~ .lg-topics .lg-topic:not(.t-innovation),
#tf-leadership:checked ~ .lg-topics .lg-topic:not(.t-leadership) { display: none; }

/* Learning-topic cards — full-width, with a coloured icon panel on the left */
.lg-topics { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.lg-topic { display: grid; grid-template-columns: 150px 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.lg-topic-visual { display: flex; align-items: flex-start; justify-content: center; color: #fff; min-height: 100%; padding-top: 52px; }
.lg-topic.t-product .lg-topic-visual { background: linear-gradient(150deg, #4f2dc7 0%, #6d3bd6 100%); }
.lg-topic.t-innovation .lg-topic-visual { background: linear-gradient(150deg, #f5a524 0%, #ec7a1c 100%); }
.lg-topic.t-leadership .lg-topic-visual { background: linear-gradient(150deg, #2563eb 0%, #1e40af 100%); }
.lg-topic-visual svg { width: 46px; height: 46px; opacity: .95; }
.lg-topic-body { padding: 1.5rem 1.7rem; }
.lg-topic-head h3 { margin: .6rem 0 0; font-size: 1.2rem; }
.lg-topic-meta { list-style: none; padding: 0; margin: .9rem 0; display: grid; gap: .35rem; }
.lg-topic-meta li { font-size: .88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-meta-k { display: inline-block; min-width: 3.4rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lg-topic-sum { margin: 0 0 .9rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; max-width: 70ch; }
.lg-topic-outline { list-style: none; padding: 0; margin: 0 0 1.2rem; columns: 2; column-gap: 2rem; }
.lg-topic-outline li { font-size: .88rem; color: var(--ink-soft); padding: .25rem 0 .25rem 1.3rem; position: relative; line-height: 1.4; break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-topic-outline li::before { content: ""; position: absolute; left: 0; top: .6rem; width: 6px; height: 6px; border-radius: 2px; background: var(--primary-300); }
.lg-topic-foot { margin-top: .2rem; }
@media (max-width: 620px) {
  .lg-topic { grid-template-columns: 1fr; }
  .lg-topic-visual { min-height: 88px; align-items: center; padding-top: 0; }
  .lg-topic-outline { columns: 1; }
}

/* Upcoming events — filters + paginated list of session row-cards */
.lg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.4rem; }
.lg-dd { position: relative; }
.lg-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .55rem 1rem; white-space: nowrap; }
.lg-dd > summary::-webkit-details-marker { display: none; }
.lg-dd > summary::after { content: "▾"; color: var(--muted); font-size: .75rem; margin-left: .15rem; }
.lg-dd[open] > summary { border-color: var(--primary-300); box-shadow: 0 0 0 3px rgba(79,45,199,.12); }
.lg-dd[open] > summary::after { content: "▴"; }
.lg-dd-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; font-size: .72rem; font-weight: 700; color: #fff; background: var(--primary); border-radius: 999px; }
.lg-dd-panel { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; min-width: 248px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .4rem; display: flex; flex-direction: column; gap: .05rem; }
.lg-dd-opt { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius-sm); font-size: .88rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.lg-dd-opt:hover { background: var(--paper-2); }
.lg-dd-opt input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.lg-filter-clear { font-size: .85rem; font-weight: 600; color: var(--primary); margin-left: .2rem; }
.lg-results-count { font-size: .85rem; color: var(--muted); margin: 0 0 1rem; }
@media (max-width: 560px) { .lg-filters > .lg-dd { flex: 1 1 100%; } .lg-dd > summary { width: 100%; } .lg-dd-panel { width: 100%; } }

.lg-scards { display: grid; gap: .7rem; }
.lg-scard { display: grid; grid-template-columns: 1.4fr 1.8fr 1.1fr 1fr .8fr auto; align-items: center; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1.1rem; box-shadow: var(--shadow); }
.lg-sc-topic h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.lg-sc-desc { min-width: 0; }
.lg-sc-desc p { margin: 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.4; }
.lg-sc-aud { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 700; font-style: italic; letter-spacing: .02em; color: var(--accent-700); }
.lg-sc-loc { font-size: .88rem; color: var(--ink); display: flex; align-items: center; gap: .4rem; }
.lg-flag { font-size: 1.15rem; line-height: 1; }
.lg-sc-when { line-height: 1.3; }
.lg-sc-date { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
.lg-sc-time { display: block; font-size: .76rem; color: var(--muted); }
.lg-sc-price { font-size: .92rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.lg-sc-price small { font-size: .7rem; font-weight: 500; color: var(--muted); }
.lg-sc-act { justify-self: end; }
/* Sold-out badge — same pill shape as the Book-now button, greyed out */
.lg-soldout { display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: .4rem .9rem; white-space: nowrap; }
.lg-scard.is-soldout { opacity: .85; }
@media (max-width: 860px) {
  .lg-scard { grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; gap: .5rem .9rem; }
  .lg-sc-topic { grid-column: 1 / -1; }
  .lg-sc-desc { grid-column: 1 / -1; }
  .lg-sc-act { grid-column: 1 / -1; justify-self: stretch; }
  .lg-sc-act .btn, .lg-sc-act .lg-soldout { width: 100%; }
}

/* Pagination */
.lg-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.lg-page-list { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.lg-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lg-page-num:hover { border-color: var(--primary-300); color: var(--primary); }
.lg-page-num.is-cur { background: var(--primary); border-color: var(--primary); color: #fff; }
.lg-page-btn { font-size: .85rem; font-weight: 600; color: var(--primary); }
.lg-page-btn.is-disabled { color: var(--muted); opacity: .5; cursor: default; }

/* Prices */
.lg-price-sub { margin: 1.8rem 0 .4rem; font-size: 1.1rem; }
.lg-price-sub:first-child { margin-top: 0; }
.lg-price-intro { margin: .4rem 0 1rem; color: var(--ink-soft); line-height: 1.6; }
.lg-tier-day { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--primary); margin-bottom: .2rem; }
.lg-tier-note { font-size: .88rem; color: var(--muted); margin: .3rem 0 .2rem; }
.lg-price-table { overflow-x: auto; }
.lg-price-table table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lg-price-table th, .lg-price-table td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.lg-price-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--paper-2); }
.lg-price-table tbody tr:last-child td { border-bottom: none; }
.lg-price-table td:not(:first-child) { font-weight: 700; color: var(--ink); }
.lg-note { font-size: .85rem; color: var(--muted); margin-top: 1.4rem; max-width: 74ch; line-height: 1.6; }

/* Facilitator */
.lg-facilitator { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 2rem; box-shadow: var(--shadow); max-width: 76ch; }
.lg-facilitator p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.65; }
.lg-facilitator p:last-child { margin-bottom: 0; }

/* Public form */
.ll-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); }
.ll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.ll-field { display: flex; flex-direction: column; }
.ll-field.ll-full { grid-column: 1 / -1; }
.ll-field label { font-size: .8125rem; font-weight: 600; color: var(--ink); margin: 0 0 .4rem; }
.ll-field .opt { font-weight: 400; color: var(--muted); }
.ll-field input, .ll-field select, .ll-field textarea { width: 100%; font-family: inherit; font-size: .94rem; padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.ll-field textarea { resize: vertical; }
.ll-field input:focus, .ll-field select:focus, .ll-field textarea:focus { outline: none; border-color: var(--primary-300); box-shadow: 0 0 0 3px rgba(79,45,199,.12); }
.ll-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.ll-actions-note { font-size: .82rem; color: var(--muted); }
.lg-error { background: #fdeaea; border: 1px solid #f3c2c2; color: #9a2727; border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1.2rem; }
/* Collapsed "private session" disclosure below the main booking form */
.lg-private { margin-top: 1.6rem; }
.lg-private-toggle { cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; display: inline-flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.lg-private-toggle::-webkit-details-marker { display: none; }
.lg-private-toggle::before { content: "+"; font-weight: 700; font-size: 1.1em; line-height: 1; }
.lg-private[open] > .lg-private-toggle::before { content: "\2013"; }
.lg-private-body { margin-top: 1.2rem; }
@media (max-width: 560px) { .ll-grid { grid-template-columns: 1fr; } }

/* Request-received summary */
.lg-summary { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }
.lg-summary h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.lg-dl { margin: 0; display: grid; gap: .7rem; }
.lg-dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; }
.lg-dl dt { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lg-dl dd { margin: 0; color: var(--ink); font-weight: 500; }
.lg-estimate { margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 560px) { .lg-dl > div { grid-template-columns: 1fr; gap: .15rem; } }

/* ===================================================================
   Toolkit index (/toolkit/) — accordion topics + article list
   =================================================================== */
.tk-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tk-grid { display: grid; grid-template-columns: 3fr 7fr; gap: 2rem; align-items: start; }

/* Left: accordion of domains → modules */
.tk-nav { position: sticky; top: 1.2rem; }
.tk-dom { border-bottom: 1px solid var(--line); }
.tk-dom:first-child { border-top: 1px solid var(--line); }
.tk-dom > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .3rem; font-weight: 700; font-size: .98rem; color: var(--ink); }
/* Reserve two lines so every domain row is the same height regardless of title length */
.tk-dom-t { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 2.6em; line-height: 1.3; }
.tk-dom > summary::-webkit-details-marker { display: none; }
.tk-dom > summary::after { content: "⌄"; color: var(--muted); font-size: 1rem; transition: transform .15s ease; }
.tk-dom[open] > summary::after { transform: rotate(180deg); }
.tk-dom-n { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--paper-3); border-radius: 999px; padding: .1rem .5rem; }
.tk-dom > summary::after { margin-left: .3rem; }
.tk-mods { list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.tk-mod { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .65rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-soft); font-size: .9rem; line-height: 1.3; }
.tk-mod:hover { background: var(--paper-2); }
.tk-mod-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-mod-n { flex-shrink: 0; font-size: .76rem; color: var(--muted); }

/* Right: one panel per module (only the selected one shows — see generated CSS) */
.tk-panel { display: none; }
.tk-panel-h { font-size: 1.2rem; margin: 0 0 1.1rem; }
.tk-panel-n { font-size: .82rem; font-weight: 500; color: var(--muted); }
.tk-articles { display: grid; gap: .7rem; }
/* Card = a left "read" link + a right actions column (two stacked buttons). */
.tk-art { display: grid; grid-template-columns: 1fr 168px; align-items: stretch; gap: 1rem; min-height: 132px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem; box-shadow: var(--shadow); color: inherit; transition: border-color .15s ease, transform .15s ease; }
.tk-art:hover { border-color: var(--primary-300); transform: translateY(-1px); }
.tk-art-link { display: grid; grid-template-columns: 48px 1fr; gap: .9rem; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.tk-art-link:hover { color: inherit; }
.tk-art-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tk-art-visual { box-sizing: border-box; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--grad-soft); border: 1.5px solid transparent; flex-shrink: 0; align-self: center; }
.tk-art-visual svg, .tk-art-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tk-art-title { font-weight: 700; font-size: .98rem; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-art-desc { font-size: .85rem; color: var(--ink-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-art-read { font-size: .8rem; font-weight: 600; color: var(--muted); line-height: 1.2; margin-top: .15rem; }
.tk-art-actions { display: grid; grid-template-rows: 1fr 1fr; gap: .5rem; align-content: stretch; border-left: 1px solid var(--line); padding-left: 1rem; }
.tk-art-actions .btn, .tk-art-done, .tk-art-soon { width: 100%; justify-content: center; text-align: center; }
.tk-art-btn { display: inline-flex; align-items: center; justify-content: center; }
.tk-art-done { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; background: #e3f4ea; color: #1d7a4d; font-weight: 700; font-size: .85rem; border: 1px solid #bfe6cf; border-radius: var(--radius-sm); cursor: default; }
.tk-art-done svg { width: 16px; height: 16px; }
.tk-art-soon { display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
@media (max-width: 860px) {
  .tk-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .tk-nav { position: static; }
}
@media (max-width: 560px) {
  .tk-art { grid-template-columns: 1fr; min-height: 0; }
  .tk-art-actions { grid-template-rows: auto; grid-template-columns: 1fr 1fr; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: .6rem; }
}

/* ----- Toolkit semantic search ----- */
.tk-search-band { background: var(--paper-2); padding-top: 60px; padding-bottom: 60px; }
.tk-search { display: flex; align-items: center; gap: .6rem; max-width: 680px; margin: 0 auto; }
.tk-search-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1rem;
  padding: .8rem 1.05rem; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tk-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100, rgba(99,102,241,.18)); }
.tk-search-btn { flex: 0 0 auto; border-radius: 999px; padding-left: 1.5rem; padding-right: 1.5rem; }
.tk-results-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .7rem 1rem; margin-bottom: 1.2rem; color: var(--ink-soft); font-size: .95rem;
}
.tk-results-count strong { color: var(--ink); }
.tk-clear { font-weight: 600; color: var(--primary); white-space: nowrap; }
.tk-clear:hover { text-decoration: underline; }
.tk-search-err { color: var(--ink); background: var(--grad-soft); }
/* Search results: full-width, roomier cards. */
.tk-results.tk-articles { width: 100%; gap: 1rem; }
.tk-results .tk-art { padding: 1.1rem 1.3rem; }
.tk-results .tk-art-title { font-size: 1.05rem; -webkit-line-clamp: 3; }
.tk-results .tk-art-desc { font-size: .9rem; -webkit-line-clamp: 3; }
@media (max-width: 560px) {
  .tk-results .tk-art { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tk-search { flex-direction: column; }
  .tk-search-input, .tk-search-btn { width: 100%; }
}

/* ===================== Plans / subscriptions ===================== */

/* The price ladder (shared by /plans and the home #app teaser). Four tiers:
   Free, Leader, Senior Leader, Enterprise. */
.plan-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; box-shadow: var(--shadow); }
.plan-card.featured { border-color: var(--primary-300); box-shadow: var(--shadow-lg); }
.plan-card.is-current { outline: 2px solid var(--primary); outline-offset: 2px; }
.plan-card-top { min-height: 1.6rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.pill-prem { color: #fff; background: var(--grad); border-color: transparent; }
.plan-current-tag { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.plan-name { font-size: 1.3rem; margin: 0 0 .2rem; }
.plan-price { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: .2rem; }
.plan-price small { font-size: .9rem; font-weight: 500; color: var(--muted); }
.plan-price-annual { font-size: .85rem; color: var(--muted); margin-bottom: .8rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-height: 1.4em; }
.plan-price-annual small { font-size: .8rem; }
.plan-annual-tag { font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-700); background: #fff6e6; border: 1px solid #f6e2b8; border-radius: 999px; padding: .1rem .4rem; }
.plan-tagline { color: var(--ink-soft); font-size: .92rem; margin: 0 0 1rem; min-height: 2.4em; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .5rem; flex: 1; }
.plan-feats li { position: relative; padding-left: 1.5rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.4; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--primary); font-weight: 700; }
.plan-feats li.plan-no { color: var(--muted); }
.plan-feats li.plan-no::before { content: "✕"; color: #c2381f; font-weight: 700; }
.plan-cta { margin-top: auto; }
.plan-cta .btn, .plan-cta form, .plan-cta form .btn { width: 100%; }
.plan-current-note { background: var(--paper-3); border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .92rem; margin: 0 0 1.4rem; }
.plan-card { padding: 1.4rem 1.25rem; }
.plan-price { font-size: 1.9rem; }
@media (max-width: 1080px) { .plan-ladder { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; } }
@media (max-width: 560px) { .plan-ladder { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* Account menu: current-plan label. */
.nav-menu-plan { display: inline-block; margin-top: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--paper)); padding: .15rem .5rem; border-radius: 999px; }

/* Booking: plan discount banner + saving line. */
.lg-plan-banner { background: #e9f7ef; border: 1px solid #b8e3c9; color: #1d7a4d; border-radius: var(--radius-sm); padding: .7rem 1rem; margin: 0 0 1.2rem; font-size: .9rem; }
.lg-plan-banner.is-upsell { background: var(--paper-3); border-color: var(--line); color: var(--ink-soft); }
.lg-plan-save { display: inline-block; margin-top: .3rem; color: #1d7a4d; font-weight: 600; }

/* Register: inline plan picker. */
.reg-plans { border: 0; padding: 0; margin: .6rem 0 1.1rem; }
.reg-plans legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: .5rem; }
.reg-plan-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 520px) { .reg-plan-row { grid-template-columns: repeat(2, 1fr); } }
.reg-plan { display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .6rem .5rem; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.reg-plan:hover { border-color: var(--primary-300); }
.reg-plan.is-sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--paper)); }
.reg-plan input { margin: 0 auto; }
.reg-plan-name { font-weight: 700; font-size: .86rem; }
.reg-plan-tag { display: inline-block; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--primary); border-radius: 999px; padding: 0 .35rem; vertical-align: middle; }
.reg-plan-price { font-size: .82rem; color: var(--muted); }
.reg-plan-note { font-size: .82rem; color: var(--muted); margin: .6rem 0 0; }

/* App: upgrade prompts, report lock, dashboard plan chip. */
.loop-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--grad-soft); border: 1px solid var(--primary-300); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0; }
.loop-report-lock { text-align: center; background: var(--grad-soft); border: 1px dashed var(--primary-300); border-radius: var(--radius); padding: 2.2rem 1.5rem; }
/* The lede inside the lock panel is a max-width block; centre it (and its text). */
.loop-report-lock .loop-section-lede { text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }
.loop-lock-icon { font-size: 1.8rem; margin-bottom: .4rem; }
.loop-invite-count { margin-left: .6rem; font-size: .82rem; }
.loop-plan-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.loop-plan-chip { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--paper)); padding: .25rem .7rem; border-radius: 999px; }
.loop-plan-up { font-size: .88rem; font-weight: 600; }

/* ===================== Free vs Pro report comparison ===================== */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; margin: 2.4rem 0 3rem; }
.cmp-col { display: flex; flex-direction: column; }
.cmp-col-head { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; }
.cmp-badge { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-3); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; }
.cmp-badge-pro { color: #fff; background: var(--grad); border-color: transparent; box-shadow: var(--shadow); }
.cmp-col-sub { font-size: .9rem; color: var(--muted); }

.cmp-report { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.4rem 1.5rem; }
.cmp-report-pro { border-color: var(--primary-300); box-shadow: var(--shadow-lg); position: relative; }
.cmp-report-pro::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; background: linear-gradient(135deg, var(--primary-300), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.cmp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.cmp-chip { font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .5rem; }
.cmp-chip.is-on { color: var(--primary-700); background: color-mix(in srgb, var(--primary) 10%, var(--paper)); border-color: var(--primary-300); }

.cmp-sec { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--line); }
.cmp-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.cmp-sec-title { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); margin-bottom: .6rem; }
.cmp-why { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }

.cmp-bar-row { display: grid; grid-template-columns: 1fr 90px 2.2rem; align-items: center; gap: .6rem; padding: .22rem 0; font-size: .86rem; }
.cmp-bar-label { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-bar { height: 8px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.cmp-bar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.cmp-bar-score { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }

.cmp-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.cmp-item:last-child { border-bottom: 0; }
.cmp-item-body { display: flex; flex-direction: column; }
.cmp-item-name { color: var(--ink); }
.cmp-item-detail { font-size: .78rem; color: var(--muted); }
.cmp-score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary-700); background: color-mix(in srgb, var(--primary) 8%, var(--paper)); border-radius: 999px; padding: .1rem .5rem; font-size: .8rem; }
.cmp-gap { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .78rem; border-radius: 999px; padding: .12rem .5rem; white-space: nowrap; }
.cmp-gap.is-blind { color: #9a3412; background: #fff1e7; border: 1px solid #f6d3bd; }
.cmp-gap.is-hidden { color: #1d7a4d; background: #e3f4ea; border: 1px solid #b8e3c9; }
.cmp-gap.is-spread { color: var(--primary-700); background: color-mix(in srgb, var(--primary) 9%, var(--paper)); border: 1px solid var(--primary-300); }
.cmp-gap.is-even { color: var(--muted); background: var(--paper-2); border: 1px solid var(--line); }

.cmp-mtx-wrap { overflow-x: auto; }
.cmp-mtx { width: 100%; border-collapse: collapse; font-size: .8rem; }
.cmp-mtx th, .cmp-mtx td { padding: .35rem .4rem; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cmp-mtx th:first-child, .cmp-mtx td:first-child { text-align: left; }
.cmp-mtx th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.cmp-mtx tbody tr:last-child td { border-bottom: 0; }
.cmp-mtx .cmp-gap { font-size: .72rem; padding: .06rem .4rem; }

.cmp-deltas { display: flex; flex-wrap: wrap; gap: .5rem; }
.cmp-delta { font-size: .8rem; border-radius: 999px; padding: .2rem .6rem; border: 1px solid var(--line); }
.cmp-delta b { font-variant-numeric: tabular-nums; }
.cmp-delta-up { color: #1d7a4d; background: #e3f4ea; border-color: #b8e3c9; }
.cmp-delta-down { color: #9a3412; background: #fff1e7; border-color: #f6d3bd; }

/* Locked stack on the Free column: the same Pro depth, blurred under an overlay. */
.cmp-locked { position: relative; margin-top: 1rem; }
.cmp-locked-inner { filter: blur(4px); opacity: .55; pointer-events: none; user-select: none; }
.cmp-lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .5rem; padding: 1.5rem; border-radius: var(--radius); background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 55%, transparent) 0%, var(--paper) 45%); }
.cmp-lock-overlay strong { font-size: 1.05rem; }
.cmp-lock-overlay span { font-size: .86rem; color: var(--muted); max-width: 34ch; }
.cmp-lock-overlay .btn { margin-top: .4rem; }
.cmp-lock-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: var(--shadow); }
.cmp-lock-ic svg { width: 20px; height: 20px; }

@media (max-width: 820px) {
  .cmp-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===== Skill Checks ======================================================= */

/* --- Toolkit hero: left copy + right card --- */
.tk-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
.tk-hero-copy { align-self: center; }
.tk-hero-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.7rem; display: flex; flex-direction: column; justify-content: center; }
.tk-hero-pitch h2 { margin: .6rem 0 .4rem; font-size: 1.4rem; }
.tk-hero-pitch p { color: var(--ink-soft); margin: 0 0 1rem; }
.tk-hero-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; }
.tk-hero-steps li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .92rem; color: var(--ink); }
.tk-step-ic { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; border-radius: 8px; background: var(--paper-3); color: var(--primary); }
.tk-step-ic svg { width: 18px; height: 18px; }
.tk-cert-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--paper-3); color: var(--primary); border-radius: 999px; padding: .3rem .7rem; font-weight: 700; font-size: .8rem; }
.tk-cert-ic { display: inline-flex; width: 18px; height: 18px; }
.tk-cert-ic svg { width: 100%; height: 100%; }
.tk-cert-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.tk-hero-progress { display: flex; gap: 1.2rem; align-items: center; }
.tk-hero-prog-body { min-width: 0; flex: 1; }
.tk-hero-prog-body h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.tk-hero-mods { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .5rem; }
.tk-hero-mods li { display: grid; grid-template-columns: 1fr 70px auto; gap: .5rem; align-items: center; font-size: .82rem; }
.tk-hero-mod-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.tk-hero-mod-n { color: var(--muted); font-weight: 600; }
.tk-mini-bar, .sc-mini-bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.tk-mini-bar i, .sc-mini-bar i { display: block; height: 100%; background: var(--grad, var(--primary)); }
.tk-hero-ring, .sc-ring, .sc-dash-ring .sc-ring { --pct: 0; width: 92px; height: 92px; flex: 0 0 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--line) 0); position: relative; }
.tk-hero-ring::before, .sc-ring::before { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.tk-hero-ring span, .sc-ring span { position: relative; font-weight: 800; color: var(--primary); font-size: 1.05rem; }
@media (max-width: 780px) { .tk-hero-grid { grid-template-columns: 1fr; } }

/* --- article Skill Check panel --- */
.tk-sc-panel { background: var(--grad-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 2rem 0; }
.tk-sc-head .eyebrow { color: var(--primary); }
.tk-sc-head h2 { margin: .2rem 0 .6rem; font-size: 1.25rem; }
.tk-sc-lede { color: var(--ink-soft); margin: 0 0 1rem; }
.tk-sc-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tk-sc-panel .tk-art-done { display: inline-flex; padding: .2rem .5rem; }

/* --- assessment modal --- */
.sc-overlay { position: fixed; inset: 0; background: rgba(21,19,31,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 2vh 2vw; }
.sc-modal { width: 80vw; height: 80vh; max-width: 1100px; max-height: 900px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; }
.sc-x { position: absolute; top: .7rem; right: 1rem; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); z-index: 2; }
.sc-x:hover { color: var(--ink); }
.sc-top { padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--line); background: var(--grad-soft); }
.sc-title { margin: 0 0 .6rem; font-size: 1rem; color: var(--primary); }
.sc-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.sc-bar i { display: block; height: 100%; background: var(--grad, var(--primary)); transition: width .25s ease; }
.sc-track-meta { display: block; margin-top: .4rem; font-size: .82rem; color: var(--ink-soft); }
.sc-body { flex: 1 1 auto; overflow-y: auto; padding: 1.6rem 1.8rem; }
.sc-bar-actions { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.6rem; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); }
.sc-q { display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem; align-items: start; }
.sc-q-illustration { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; }
.sc-q-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: var(--paper-3); border-radius: 999px; padding: .15rem .55rem; margin-bottom: .6rem; }
.sc-q fieldset { border: 0; padding: 0; margin: 0; }
.sc-q-stem { font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: var(--ink); margin-bottom: .8rem; }
.sc-q-hint { font-size: .85rem; color: var(--muted); margin: 0 0 .7rem; }
.sc-opts { display: grid; gap: .55rem; }
.sc-opt { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.sc-opt:hover { border-color: var(--primary-300); }
.sc-opt.is-sel { border-color: var(--primary); background: var(--paper-3); }
.sc-opt input { margin-top: .2rem; accent-color: var(--primary); }
.sc-opt-text { font-size: .95rem; color: var(--ink); }
@media (max-width: 640px) { .sc-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; } .sc-q { grid-template-columns: 1fr; } .sc-q-illustration { width: 52px; height: 52px; } }

/* --- review / summary --- */
.sc-review-h { font-size: 1.3rem; margin: 0 0 .3rem; }
.sc-review-lede { color: var(--ink-soft); margin: 0 0 1.2rem; }
.sc-review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: none; }
.sc-review-q { display: grid; grid-template-columns: 28px 1fr auto; gap: .8rem; align-items: center; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; cursor: pointer; color: inherit; }
.sc-review-q:hover { border-color: var(--primary-300); }
.sc-review-row.is-unanswered .sc-review-q { border-color: #e6a23f; background: #fff8ec; }
.sc-review-n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-3); color: var(--primary); font-weight: 700; font-size: .8rem; }
.sc-review-stem { font-weight: 600; font-size: .9rem; color: var(--ink); }
.sc-review-ans { grid-column: 2; font-size: .82rem; color: var(--ink-soft); }
.sc-review-edit { color: var(--primary); font-weight: 700; font-size: .8rem; }

/* --- results --- */
.sc-result { text-align: center; padding: 1rem 0 1.4rem; }
.sc-result h1 { font-size: 1.8rem; margin: .4rem 0; }
.sc-result-mark { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #e3f4ea; color: #1d7a4d; display: grid; place-items: center; }
.sc-result-mark svg { width: 34px; height: 34px; }
.sc-result-pass h1 { color: #1d7a4d; }
.sc-result-fail h1 { color: #b4452b; }
.sc-milestone { text-align: center; background: var(--grad-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; margin: 1.2rem 0; }
.sc-milestone-badge, .sc-cert-badge, .sc-milestone .sc-cert-badge { width: 72px; height: 72px; margin: 0 auto .6rem; }
.sc-milestone h2 { margin: .3rem 0; }
.sc-milestone-cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.sc-wrong-h { font-size: 1.15rem; margin: 1.4rem 0 .8rem; }
.sc-wrong-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.sc-wrong { border: 1px solid var(--line); border-left: 3px solid #b4452b; border-radius: var(--radius-sm); padding: .9rem 1.1rem; }
.sc-wrong-stem { font-weight: 700; margin: 0 0 .5rem; }
.sc-wrong-yours, .sc-wrong-correct { margin: .15rem 0; font-size: .9rem; }
.sc-wrong-yours span, .sc-wrong-correct span { font-weight: 700; }
.sc-wrong-yours { color: #b4452b; }
.sc-wrong-correct { color: #1d7a4d; }
.sc-wrong-why { font-size: .85rem; color: var(--ink-soft); margin: .5rem 0 0; }
.sc-result-ctas { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.sc-exit-confirm { text-align: center; padding: 2rem 1rem; }
.sc-exit-confirm h2 { margin: 0 0 .6rem; }
.sc-exit-confirm p { color: var(--ink-soft); max-width: 36rem; margin: 0 auto; }

/* --- skill landing / runner / dashboard / cert pages --- */
.sc-landing { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.sc-gate { background: var(--grad-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.sc-passed-banner { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.sc-done { display: inline-flex; align-items: center; gap: .35rem; background: #e3f4ea; color: #1d7a4d; font-weight: 700; border: 1px solid #bfe6cf; border-radius: var(--radius-sm); padding: .35rem .7rem; }
.sc-done svg { width: 16px; height: 16px; }
.sc-runner .sc-q { margin: 1.4rem 0; }
.sc-runner .sc-top { background: transparent; border: 0; padding: 0 0 1rem; }
.sc-runner .sc-bar-actions { position: static; border: 0; padding: 1.2rem 0 0; background: transparent; }
.sc-dash-summary { display: flex; gap: 1.4rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow); }
.sc-dash-nums p { margin: .15rem 0; }
.sc-mod-card.is-complete { border-color: #bfe6cf; }
.sc-mod-pct { font-weight: 800; color: var(--primary); }
.sc-mod-stat { font-size: .85rem; color: var(--ink-soft); margin: .4rem 0 0; }
.sc-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-top: 1rem; }
.sc-rec-card { display: flex; flex-direction: column; gap: .3rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.sc-rec-card:hover { border-color: var(--primary-300); transform: translateY(-1px); color: inherit; }
.sc-rec-eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.sc-rec-title { font-weight: 700; color: var(--ink); }
.sc-rec-why { font-size: .82rem; color: var(--ink-soft); }
.sc-rec-cta { font-size: .82rem; font-weight: 700; color: var(--primary); margin-top: .3rem; }
.sc-upsell { background: var(--grad-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-top: 1.6rem; }
.sc-upsell h3 { margin: 0 0 .4rem; }
.sc-cert { text-align: center; max-width: 40rem; margin: 1rem auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.sc-cert-date { color: var(--muted); font-size: .85rem; }

/* Managed-leader seats: accept-terms checkbox + seat/invoice pages. */
.loop-accept { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); margin: .6rem 0 1rem; line-height: 1.45; }
.loop-accept input { margin-top: .2rem; flex: 0 0 auto; }

/* Pro-forma invoice sheet (downloadable / printable). */
.inv-actions { display: flex; gap: .6rem; margin-bottom: 1.2rem; }
.inv-sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 2.2rem; box-shadow: var(--shadow); max-width: 720px; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1.2rem; margin-bottom: 1.2rem; }
.inv-brand { font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.inv-by { color: var(--muted); font-size: .85rem; }
.inv-meta { text-align: right; font-size: .9rem; color: var(--ink-soft); }
.inv-title { font-weight: 700; color: var(--ink); margin-bottom: .2rem; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.4rem; }
.inv-parties h4 { margin: 0 0 .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.inv-parties p { margin: 0; font-size: .92rem; }
.inv-lines tfoot .inv-total-label { text-align: right; font-weight: 700; }
.inv-lines tfoot .inv-total { font-weight: 800; }
.inv-foot { margin-top: 1.4rem; color: var(--ink-soft); font-size: .85rem; }
@media print {
  .site-header, .site-footer, .no-print, .inv-actions { display: none !important; }
  .inv-sheet { border: 0; box-shadow: none; padding: 0; max-width: none; }
  body { background: #fff; }
}

/* Plan comparison matrix (shared: /plans, home teaser, in-app upgrade page).
   Five columns — a feature column + the four plans. Scrolls horizontally on
   narrow screens; the feature column and header row stay pinned. */
.plan-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.plan-matrix { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .92rem; }
.plan-matrix th, .plan-matrix td { padding: .65rem .8rem; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.plan-matrix thead th { vertical-align: top; border-bottom: 2px solid var(--line-strong); position: sticky; top: 0; background: #fff; z-index: 3; }
.plan-matrix tbody tr:last-child th, .plan-matrix tbody tr:last-child td { border-bottom: 0; }
.pm-corner { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.pm-feat { text-align: left; font-weight: 500; color: var(--ink-soft); line-height: 1.35; position: sticky; left: 0; background: #fff; z-index: 1; white-space: nowrap; }
.plan-matrix tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper) 55%, #fff); }
.plan-matrix tbody tr:nth-child(even) .pm-feat { background: color-mix(in srgb, var(--paper) 55%, #fff); }
.pm-plan { min-width: 158px; }
.pm-plan.is-featured { background: var(--grad-soft); }
.pm-plan.is-current { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Fixed-height header slots so badge · name · price · CTA line up across columns. */
.pm-head { display: flex; flex-direction: column; align-items: center; }
.pm-badge { display: flex; align-items: center; justify-content: center; height: 1.7rem; margin-bottom: .15rem; }
.pm-current-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.pm-name { display: flex; align-items: center; justify-content: center; height: 1.6rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.pm-price { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 3.2rem; margin: .1rem 0 .5rem; }
.pm-price-main { display: block; height: 1.7rem; line-height: 1.7rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pm-price-main small { font-size: .7rem; font-weight: 500; color: var(--muted); }
.pm-price-sub { display: block; height: 1rem; line-height: 1rem; font-size: .68rem; color: var(--muted); }
.pm-cta { width: 100%; }
.pm-cta .btn { width: 100%; }
.pm-cta form { margin: 0; }
.pm-cell.is-current { background: color-mix(in srgb, var(--primary) 6%, #fff); }
.pm-yes { color: #1d7a4d; font-weight: 800; font-size: 1.05rem; }
.pm-no { color: #c2381f; font-weight: 700; font-size: 1.05rem; }
.pm-txt { font-weight: 600; color: var(--ink); font-size: .84rem; line-height: 1.3; display: inline-block; }
@media (max-width: 720px) { .plan-matrix { font-size: .85rem; } .pm-name { font-size: .95rem; } .pm-price-main { font-size: 1.1rem; } }