/* Mohamad Charafeddine — site styles. Logical properties throughout so RTL and LTR share one sheet. */

:root {
  /* Graphite, silver, white and one cobalt accent. Contrast checked in the redesign notes. */
  --graphite: #14171B;       /* deep background */
  --graphite-2: #20252C;     /* secondary dark surface */
  --graphite-3: #2B313A;     /* raised dark surface, dark borders */
  --surface: #F4F5F6;        /* main light surface */
  --white: #FFFFFF;
  --tint: #E9ECEF;
  --line: #DCE0E5;
  --ink: #161A20;            /* 16.9:1 on --surface */
  --ink-2: #3A414B;
  --muted: #59616D;          /* 5.9:1 on --surface */
  --accent: #2455E6;         /* buttons, white text 5.9:1 */
  --accent-ink: #1E47C4;     /* accent text on light, 7.0:1 on --surface */
  --accent-soft: #8CA8FF;    /* accent text on graphite, 7.3:1 */
  --on-dark: #F4F5F6;
  --on-dark-muted: #B6BEC9;  /* 9.6:1 on --graphite */

  --f-display: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1296px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 10px;
  --radius-media: 16px;
  --shadow: 0 24px 60px -28px rgba(8, 12, 20, .55);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 240ms;

  --s-display: clamp(2.2rem, 1.3rem + 3.4vw, 4.1rem);
  --s-display-sm: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  --s-h2: clamp(1.75rem, 1.2rem + 2vw, 2.8rem);
  --s-h3: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  --s-lead: clamp(1.1rem, 1rem + .45vw, 1.35rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.75;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[lang="en"] body, html[lang="en"] body { line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: #C9D6FF; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: var(--radius); }
.skip:focus { top: 12px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 820px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* ─── Type ─── */
.display, .h2, .h3, .h4, .wordmark, .hero-name { font-family: var(--f-display); }
.display { font-size: var(--s-display); line-height: 1.32; font-weight: 700; letter-spacing: -.01em; margin: .2em 0 .35em; text-wrap: balance; }
.display.small { font-size: var(--s-display-sm); }
html[lang="en"] .display { letter-spacing: -.025em; line-height: 1.05; }
.h2 { font-size: var(--s-h2); line-height: 1.25; font-weight: 700; margin: 0 0 .6em; text-wrap: balance; }
.h3 { font-size: var(--s-h3); line-height: 1.35; font-weight: 600; margin: 0 0 .4em; }
.h4 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .5em; }
.lead { font-size: var(--s-lead); line-height: 1.7; color: var(--ink-2); margin: 0 0 1.4em; max-width: 60ch; }
.narrow-lead { max-width: 52ch; }
.body-l { font-size: 1.12rem; color: var(--ink-2); max-width: 58ch; }
.big-text { font-family: var(--f-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); line-height: 1.55; font-weight: 500; margin: 0 0 1em; text-wrap: pretty; }
.kicker { display: inline-flex; align-items: center; gap: .6em; font-size: .88rem; font-weight: 600; color: var(--accent-ink); margin: 0 0 .6em; letter-spacing: .01em; }
html[lang="en"] .kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.kicker-num { font-family: var(--f-display); color: var(--muted); font-weight: 500; }
.kicker-num::after { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; margin-inline-start: .6em; vertical-align: middle; opacity: .6; }

/* ─── Buttons & links ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em; border-radius: var(--radius);
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-ink); }
.btn-dark { background: var(--ink); color: var(--surface); }
.btn-dark:hover { background: var(--graphite-2); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--surface); }
.btn-light { background: var(--surface); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-small { min-height: 44px; padding: .45em 1em; font-size: .92rem; }
.btn .ico { width: 18px; height: 18px; }
.dl-size { font-weight: 400; opacity: .75; font-size: .85em; }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.text-link { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; transition: gap var(--t) var(--ease), color var(--t); }
.text-link:hover { gap: .7em; color: var(--accent-ink); }
.text-link.quiet { border-bottom-color: var(--line); font-weight: 500; color: var(--ink-2); }
.text-link.light { color: var(--on-dark); }
.text-link .ico { width: 18px; height: 18px; }
.prose a:not(.btn) { color: var(--accent-ink); text-underline-offset: 3px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 1.6em 0 1.2em; }
.cta-row.center { justify-content: center; }

/* ─── Header ─── */
.staging-bar { background: var(--ink); color: var(--on-dark-muted); font-size: .8rem; text-align: center; padding: 6px var(--gutter); }
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--t); }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.wordmark { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; margin-inline-end: auto; }
.wm-main { font-weight: 700; font-size: 1.2rem; letter-spacing: -.005em; }
.wm-alt { font-family: var(--f-body); font-size: .72rem; color: var(--muted); letter-spacing: .06em; font-weight: 500; }
html[lang="en"] .wm-main { font-size: 1.1rem; letter-spacing: -.02em; }
.nav-main { display: flex; gap: 4px; }
.nav-main a { text-decoration: none; padding: 8px 12px; border-radius: var(--radius); font-weight: 500; font-size: .98rem; color: var(--ink-2); position: relative; transition: color var(--t); }
.nav-main a:hover, .nav-main a[aria-current="page"] { color: var(--ink); }
.nav-main a[aria-current="page"]::after { content: ''; position: absolute; inset-inline: 12px; bottom: 2px; height: 2px; background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { text-decoration: none; font-weight: 600; font-size: .92rem; padding: 8px 10px; border-radius: var(--radius); }
.lang-switch:hover { background: var(--tint); }
.lang-switch[lang="en"] { font-family: var(--f-body); letter-spacing: .02em; }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius); }
.menu-btn .ico { width: 26px; height: 26px; }
.drawer { border-top: 1px solid var(--line); background: var(--surface); }
.drawer-nav { display: flex; flex-direction: column; padding-block: 12px 24px; }
.drawer-nav a:not(.btn) { text-decoration: none; padding: 12px 0; font-size: 1.15rem; font-weight: 500; border-bottom: 1px solid var(--tint); }
.drawer-nav a[aria-current="page"] { color: var(--accent-ink); }
.drawer-sep { height: 12px; }
.drawer-nav .btn { margin-top: 20px; }

@media (max-width: 1080px) {
  .nav-main, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ─── Sections ─── */
.section { padding-block: clamp(64px, 9vw, 128px); }
.section.tight { padding-block: clamp(24px, 4vw, 48px); }
.section.tint { background: var(--white); border-block: 1px solid var(--tint); }
.section.dark { background: var(--ink); color: var(--on-dark); }
.section.olive { background: var(--graphite-2); color: var(--on-dark); }
.section.dark .body-l, .section.olive .body-l { color: var(--on-dark-muted); }
.section.dark .kicker, .section.olive .kicker { color: #E49A7A; }
.section.dark .kicker-num, .section.olive .kicker-num { color: var(--on-dark-muted); }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; align-items: start; }
.split + .split { margin-top: clamp(40px, 6vw, 72px); }
@media (max-width: 860px) { .split, .split-head { grid-template-columns: 1fr; } }

.page-head { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 clamp(24px, 4vw, 48px); font-size: .88rem; color: var(--muted); }
.crumbs li:not(:last-child)::after { content: '/'; margin-inline-start: 6px; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ─── Work / projects ─── */
.flagships { display: grid; gap: clamp(32px, 5vw, 56px); }
.flagship { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.fl-kind { font-size: .9rem; color: var(--muted); margin: 0 0 .4em; }
.status { color: var(--graphite-2); font-weight: 600; }
.fl-body .h3 a { text-decoration: none; }
.fl-body .h3 a:hover { color: var(--accent-ink); }
.fl-role { color: var(--ink-2); font-size: .98rem; }
.fl-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 1em; }
@media (max-width: 760px) { .flagship { grid-template-columns: 1fr; } }

/* ─── Programmes ─── */
.program-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.program-list a { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr) 28px; gap: 16px 32px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background var(--t) var(--ease), padding var(--t) var(--ease); }
.program-list a:hover { background: var(--white); padding-inline: 16px; }
.program-list a:hover .pl-title { color: var(--accent-ink); }
.pl-num { font-family: var(--f-display); color: var(--muted); }
.pl-title { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600; line-height: 1.35; }
.pl-short { color: var(--ink-2); font-size: .98rem; }
.program-list .ico-arrow { align-self: center; }
@media (max-width: 760px) { .program-list a { grid-template-columns: 40px 1fr 24px; } .pl-short { grid-column: 2 / 3; grid-row: 2; } .program-list .ico-arrow { grid-column: 3; grid-row: 1; } }

/* ─── Consultations ─── */
.consult-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.consult-grid.big { grid-template-columns: repeat(2, 1fr); }
.consult-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 36px); background: var(--white); text-decoration: none; min-height: 260px; transition: background var(--t); }
.consult-card:hover { background: #fff; }
.consult-card:hover .cc-title { color: var(--accent-ink); }
.cc-num { font-family: var(--f-display); color: var(--accent-ink); font-size: .9rem; }
.cc-title { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; line-height: 1.35; }
.cc-text { color: var(--ink-2); font-size: .98rem; flex: 1; }
.cc-min { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 1000px) { .consult-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .consult-grid, .consult-grid.big { grid-template-columns: 1fr; } .consult-card { min-height: 0; } }

.booking-steps { list-style: none; padding: 0; margin: 0 0 1em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.booking-steps li { border-top: 2px solid var(--ink); padding-top: 16px; }
.booking-steps strong { display: block; font-family: var(--f-display); font-weight: 600; margin: 8px 0 4px; }
.booking-steps p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.bs-n { font-family: var(--f-display); color: var(--accent-ink); }
@media (max-width: 860px) { .booking-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .booking-steps { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 28px 0 8px; border-block: 1px solid var(--line); }
.facts > div { padding: 16px 0; padding-inline-end: 20px; }
.facts > div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 20px; }
.facts dt { font-size: .82rem; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-weight: 500; font-size: .98rem; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } .facts > div + div { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); } }

.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
@media (max-width: 860px) { .three-col { grid-template-columns: 1fr; gap: 28px; } }

/* ─── Definition blocks (case studies, programme details) ─── */
.case { margin: 0; border-top: 1px solid var(--ink); }
.case > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px 48px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.case dt { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; }
.case dd { margin: 0; color: var(--ink-2); }
.case dd p { margin: 0 0 .6em; }
@media (max-width: 760px) { .case > div { grid-template-columns: 1fr; } }
.plain-list { margin: 0; padding-inline-start: 1.2em; }
.plain-list li { margin-bottom: .45em; }
.plain-list li::marker { color: var(--accent); }
.status-line { color: var(--ink-2); }
.callout-box { margin-top: 32px; padding: 20px 24px; background: var(--tint); border-inline-start: 3px solid var(--graphite-2); border-radius: var(--radius); }

.modules { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.modules li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.modules strong { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; }
.modules p { margin: .3em 0 0; }
.mod-n { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; }

.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.principles strong { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; line-height: 1.4; margin: 10px 0 6px; }
.principles p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.pr-n { font-family: var(--f-display); color: var(--accent-ink); font-size: .9rem; }
@media (max-width: 960px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principles { grid-template-columns: 1fr; } }

.formats { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.format { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4px 32px; }
.format .fmt-len { margin: 0; font-family: var(--f-display); color: var(--accent-ink); font-weight: 600; grid-row: span 2; }
.format h3 { margin: 0; }
.format p:last-child { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .format { grid-template-columns: 1fr; } }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: .95rem; }

/* ─── Resource cards & library ─── */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .res-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .res-grid { grid-template-columns: 1fr; } }
.res-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--white); border: 1px solid var(--tint); border-radius: var(--radius); text-decoration: none; position: relative; transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.res-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 30px -18px rgba(32, 35, 32, .45); }
.res-num { font-family: var(--f-display); font-weight: 700; color: var(--accent-ink); font-size: .95rem; }
.res-meta { font-size: .82rem; color: var(--muted); }
.res-title { font-family: var(--f-display); font-weight: 600; font-size: 1.18rem; line-height: 1.4; }
.res-sum { color: var(--ink-2); font-size: .95rem; flex: 1; }
.res-foot { font-size: .82rem; color: var(--muted); border-top: 1px solid var(--tint); padding-top: 12px; margin-top: 6px; }
.res-card[hidden] { display: none; }

.tools-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 32px 0; padding: 20px 0; border-block: 1px solid var(--line); }
.tools-strip.boxed { margin-top: 0; }
.tools-title { margin: 0; font-weight: 600; color: var(--muted); font-size: .9rem; margin-inline-end: auto; }
.tools-strip a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600; text-decoration: none; }
.tools-strip a:hover { color: var(--accent-ink); }

.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin: 0; min-width: 150px; }
.filters .grow { flex: 1 1 260px; }
.result-count { color: var(--muted); font-size: .9rem; margin: 0 0 16px; }
.empty { padding: 40px; text-align: center; background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ─── Resource document / prose ─── */
.doc-wrap { max-width: 900px; }
.prose { font-size: 1.07rem; }
.prose h2 { font-family: var(--f-display); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); line-height: 1.35; font-weight: 700; margin: 2.2em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; margin: 1.6em 0 .4em; }
.prose p { margin: 0 0 1em; max-width: 72ch; }
.prose ul, .prose ol { padding-inline-start: 1.4em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--accent-ink); }
.prose code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .9em; background: var(--tint); padding: .1em .35em; border-radius: 3px; direction: ltr; unicode-bidi: isolate; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; font-size: .95rem; display: block; overflow-x: auto; }
.prose thead th { background: var(--ink); color: var(--surface); font-weight: 600; text-align: start; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; text-align: start; min-width: 110px; }
.prose tbody tr:nth-child(even) td { background: var(--white); }
.story p:first-child::first-letter { font-family: var(--f-display); }

.callout { margin: 1.4em 0; padding: 18px 22px; background: var(--tint); border-inline-start: 3px solid var(--accent); border-radius: var(--radius); }
.callout > :last-child { margin-bottom: 0; }
.example { margin: 1.6em 0; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); position: relative; }
.example > :last-child { margin-bottom: 0; }
.tag { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--graphite-2); background: #E3E8E1; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.template { margin: 1.4em 0; border: 1px solid var(--ink); border-radius: var(--radius); background: #fff; overflow: hidden; }
.tpl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; background: var(--ink); color: var(--surface); font-size: .88rem; font-weight: 600; }
html[dir="rtl"] .tpl-bar { padding: 8px 16px 8px 8px; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(246, 242, 234, .35); color: var(--surface); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; font-size: .85rem; min-height: 36px; }
.copy-btn:hover { background: rgba(246, 242, 234, .12); }
.copy-btn .ico { width: 16px; height: 16px; }
.copy-btn.done { border-color: #9FC3A9; color: #CFE6D4; }
.template pre { margin: 0; padding: 18px 20px; white-space: pre-wrap; word-break: break-word; font-family: var(--f-body); font-size: .98rem; line-height: 1.8; max-height: 560px; overflow: auto; }
.checklist { list-style: none; padding: 0 !important; }
.checklist li { position: relative; padding-inline-start: 34px; margin-bottom: .7em; }
.checklist li::before { content: ''; position: absolute; inset-inline-start: 0; top: .35em; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; }
.mistakes { margin: 1.6em 0; padding: 22px 24px; border: 1px solid #E2C3B5; background: #FBF1EC; border-radius: var(--radius); }
.mistakes h3 { margin-top: 0; color: var(--accent-ink); }
.mistakes ul { margin-bottom: 0; }
.fill { margin: 1em 0 1.4em; }
.fill .q { font-weight: 600; margin-bottom: .4em; }
.fill .lines { height: calc(var(--n, 3) * 2.1em); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2.1em - 1px), var(--line) calc(2.1em - 1px) 2.1em); }
.fill .lines[data-n="1"] { --n: 1; } .fill .lines[data-n="2"] { --n: 2; } .fill .lines[data-n="3"] { --n: 3; } .fill .lines[data-n="4"] { --n: 4; }
.fill .lines[data-n="5"] { --n: 5; } .fill .lines[data-n="6"] { --n: 6; } .fill .lines[data-n="7"] { --n: 7; } .fill .lines[data-n="8"] { --n: 8; }
.steps ol { list-style: none; counter-reset: st; padding: 0 !important; }
.steps li { counter-increment: st; position: relative; padding-inline-start: 52px; padding-bottom: 1.2em; margin: 0; }
.steps li::before { content: counter(st); position: absolute; inset-inline-start: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: .9rem; }
.steps li::after { content: ''; position: absolute; inset-inline-start: 16.5px; top: 38px; bottom: 2px; width: 1px; background: var(--line); }
.steps li:last-child::after { display: none; }

.dl-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ─── Articles ─── */
.article-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.article-list a { display: grid; gap: 6px; padding: 28px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.article-list a:hover .al-title { color: var(--accent-ink); }
.al-meta { font-size: .85rem; color: var(--muted); }
.al-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.4; }
.al-sum { color: var(--ink-2); max-width: 70ch; }
.draft-tag { color: var(--accent-ink); font-weight: 600; }
.draft-banner { display: inline-block; background: #FBF1EC; border: 1px solid #E2C3B5; color: var(--accent-ink); padding: 8px 14px; border-radius: var(--radius); font-size: .9rem; font-weight: 500; }

/* ─── About ─── */
.about-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
@media (max-width: 860px) { .about-head { grid-template-columns: 1fr; } .about-head .portrait { max-width: 340px; } }
.timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 1.5px solid var(--ink); }
.timeline li { position: relative; padding: 0 28px 28px; display: grid; gap: 4px; }
.timeline li::before { content: ''; position: absolute; inset-inline-start: -6px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink); }
.timeline li:last-child::before { background: var(--accent); border-color: var(--accent); }
.tl-year { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; }
.roles { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.roles dt { font-family: var(--f-display); font-weight: 600; color: var(--accent-ink); font-size: .95rem; }
.roles dd { margin: 4px 0 0; font-size: 1.05rem; }
@media (max-width: 560px) { .roles { grid-template-columns: 1fr; } }

/* ─── AI page ─── */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.area { padding: 32px 28px 36px 0; border-bottom: 1px solid var(--line); }
html[dir="rtl"] .area { padding: 32px 0 36px 28px; }
.area:not(:nth-child(3n+1)) { border-inline-start: 1px solid var(--line); padding-inline-start: 28px; }
.area-n { font-family: var(--f-display); color: var(--accent-ink); }
.area .h3 { margin-top: 10px; }
.area p { color: var(--ink-2); }
@media (max-width: 960px) { .areas { grid-template-columns: 1fr 1fr; } .area:not(:nth-child(3n+1)) { border-inline-start: 0; padding-inline-start: 0; } .area:nth-child(even) { border-inline-start: 1px solid var(--line); padding-inline-start: 28px; } }
@media (max-width: 620px) { .areas { grid-template-columns: 1fr; } .area:nth-child(even) { border-inline-start: 0; padding-inline-start: 0; } }
.flow { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 40px); }
.flow-biz { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; margin-top: 0; }
.flow-steps { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: f; }
.flow-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 18px; background: var(--white); border-radius: var(--radius); border-top: 2px solid var(--graphite-2); }
.flow-steps strong { font-family: var(--f-display); }
.flow-steps p { margin: .3em 0 0; font-size: .95rem; color: var(--ink-2); }
.fs-n { width: 32px; height: 32px; border-radius: 50%; background: var(--graphite-2); color: var(--surface); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: .9rem; }
@media (max-width: 960px) { .flow-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .flow-steps { grid-template-columns: 1fr; } }

/* ─── Paths / final CTA ─── */
.paths, .cta-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.path { display: grid; grid-template-columns: 1fr 24px; gap: 6px 12px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color var(--t), background var(--t); }
.path:hover { border-color: var(--ink); background: #fff; }
.path strong { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; }
.path span { grid-column: 1; color: var(--ink-2); }
.path .ico { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); }
@media (max-width: 860px) { .paths, .cta-cards { grid-template-columns: 1fr; } }
.final { background: var(--tint); }

/* ─── Forms ─── */
.form-section { background: var(--white); border-top: 1px solid var(--tint); }
.req-form { margin-top: 24px; }
.form-intro { font-size: 1.08rem; color: var(--ink-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: .95rem; }
.req { color: var(--accent-ink); }
.opt { color: var(--muted); font-weight: 400; font-size: .85rem; }
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color var(--t);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
input:hover, select:hover, textarea:hover { border-color: #BDB3A1; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(190, 84, 47, .18); }
[aria-invalid="true"] { border-color: #B3261E !important; }
.err { color: #B3261E; font-size: .88rem; margin: 0; }
.hint { color: var(--muted); font-size: .85rem; margin: 0; }
fieldset.field { border: 0; padding: 0; margin: 0 0 18px; }
fieldset.field legend { margin-bottom: 8px; padding: 0; }
.radio { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 18px; min-height: 40px; cursor: pointer; font-weight: 400; }
.radio input, .check input { width: 18px; height: 18px; accent-color: var(--accent); }
.radio.chip { border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 16px; margin: 0 6px 8px 0; background: #fff; transition: border-color var(--t), background var(--t); }
html[dir="rtl"] .radio.chip { margin: 0 0 8px 6px; }
.radio.chip:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.radio.chip input { position: absolute; opacity: 0; pointer-events: none; }
.radio.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; cursor: pointer; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { padding: 14px 18px; background: var(--tint); border-radius: var(--radius); font-size: .95rem; }
.form-privacy { color: var(--muted); font-size: .85rem; }
.form-status { margin-top: 16px; padding: 16px 20px; border-radius: var(--radius); }
.form-status.ok { background: #E3EEE5; color: #1F4A2C; }
.form-status.fail { background: #FBE9E7; color: #8C1D18; }
.req-form.sent .grid-2, .req-form.sent > .field, .req-form.sent fieldset, .req-form.sent .form-actions, .req-form.sent .form-intro, .req-form.sent .form-note { display: none; }

.tabs .tablist { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 8px; overflow-x: auto; }
.tabs [role="tab"] { background: none; border: 0; padding: 12px 18px; font-weight: 600; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; min-height: 48px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; }
.contact-side { border-inline-start: 1px solid var(--line); padding-inline-start: 32px; }
.social-list { display: grid; gap: 4px; margin-bottom: 20px; }
.social-list a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 8px 0; font-weight: 500; }
.social-list a:hover { color: var(--accent-ink); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .contact-side { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); padding-top: 24px; } }

/* ─── Tools ─── */
.tool { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: start; }
.tool-out { position: sticky; top: 96px; }
@media (max-width: 900px) { .tool { grid-template-columns: 1fr; } .tool-out { position: static; } }
.calc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 520px) { .calc-form { grid-template-columns: 1fr; } }
.with-unit { position: relative; }
.with-unit input { padding-inline-end: 64px; }
.unit { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .88rem; pointer-events: none; }
.stat { padding: 22px 24px; background: var(--ink); color: var(--surface); border-radius: var(--radius); margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: .9rem; color: var(--on-dark-muted); }
.stat-value { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); direction: ltr; text-align: start; unicode-bidi: plaintext; }
.stat.neg { background: #6E2A16; }
.calc-msg { padding: 14px 16px; background: #FBF1EC; border-radius: var(--radius); color: var(--accent-ink); font-weight: 500; }
.formula { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.formula summary { cursor: pointer; font-weight: 600; }
.rec-out { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.rec-card { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rec-card:last-child { border-bottom: 0; }
.rec-card .rc-kind { font-size: .82rem; color: var(--accent-ink); font-weight: 600; }
.rec-card a { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; text-decoration: none; }
.rec-card a:hover { color: var(--accent-ink); }
.rec-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ─── Footer ─── */
.site-footer { background: var(--ink); color: var(--on-dark); padding-top: clamp(56px, 7vw, 88px); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 40px; padding-bottom: 48px; }
.footer-name { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; margin: 0; }
.footer-line { color: var(--on-dark-muted); margin: 4px 0 20px; }
.social { display: flex; gap: 6px; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(243, 238, 228, .22); border-radius: 50%; transition: background var(--t), border-color var(--t); }
.social a:hover { background: rgba(243, 238, 228, .1); border-color: var(--on-dark); }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; align-content: start; }
.footer-nav a { text-decoration: none; color: var(--on-dark-muted); padding: 6px 0; }
.footer-nav a:hover { color: var(--on-dark); }
.footer-cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 28px; border-top: 1px solid rgba(243, 238, 228, .14); font-size: .85rem; color: var(--on-dark-muted); }
.footer-base a { color: var(--on-dark-muted); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

/* ─── Motion ─── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(10px); transition: opacity 320ms var(--ease) var(--d, 0ms), transform 320ms var(--ease) var(--d, 0ms); }
  .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}

.nf { min-height: 50vh; }

@media print {
  .site-header, .site-footer, .staging-bar, .dl-row, .copy-btn, .crumbs, .form-section { display: none !important; }
  body { background: #fff; }
}

/* ═══════════════════ Redesign (Sept 2026): work-led, graphite + cobalt ═══════════════════ */

/* Dark header over the dark hero on the home page; light elsewhere. */
.dark-top .site-header { background: color-mix(in srgb, var(--graphite) 94%, transparent); color: var(--on-dark); }
.dark-top .site-header.scrolled { border-bottom-color: var(--graphite-3); }
.dark-top .wm-alt, .dark-top .nav-main a { color: var(--on-dark-muted); }
.dark-top .nav-main a:hover, .dark-top .nav-main a[aria-current="page"] { color: var(--on-dark); }
.dark-top .lang-switch:hover { background: var(--graphite-3); }
.dark-top .drawer { background: var(--graphite); border-top-color: var(--graphite-3); }
.dark-top .drawer-nav a:not(.btn) { border-bottom-color: var(--graphite-3); }
.dark-top .staging-bar { background: #0B0D10; }
.btn-outline-light { border-color: rgba(244, 245, 246, .35); color: var(--on-dark); background: transparent; }
.btn-outline-light:hover { border-color: var(--on-dark); background: rgba(244, 245, 246, .06); }
.text-link.light { border-bottom-color: var(--accent-soft); }
.text-link.light:hover { color: var(--accent-soft); }

/* Inner page heads: a graphite band keeps the identity; reading content below stays light. */
.page-head { background: var(--graphite); color: var(--on-dark); border-bottom: 0; }
.page-head .kicker { color: var(--accent-soft); }
.page-head .kicker-num { color: var(--on-dark-muted); }
.page-head .lead, .page-head .status-line { color: var(--on-dark-muted); }
.page-head .crumbs ol { color: var(--on-dark-muted); }
.page-head .crumbs a:hover { color: var(--on-dark); }
.page-head .facts { border-color: var(--graphite-3); }
.page-head .facts > div + div, .page-head .facts > div:nth-child(n+3) { border-color: var(--graphite-3); }
.page-head .facts dt { color: var(--on-dark-muted); }
.page-head .status { color: #8FD3A8; }
.page-head .text-link { color: var(--on-dark); border-bottom-color: var(--accent-soft); }
.page-head .btn-ghost { border-color: rgba(244, 245, 246, .35); color: var(--on-dark); }
.page-head .btn-ghost:hover { background: var(--on-dark); color: var(--ink); }
.page-head .draft-banner { background: #2A2416; border-color: #5C4A1E; color: #F2D591; }
.page-head .muted { color: var(--on-dark-muted); }
.display { font-weight: 600; line-height: 1.3; }
html[lang="en"] .display { line-height: 1.12; }

/* Softer geometry for media and cards */
.template { border-color: var(--graphite-3); }
.tpl-bar { background: var(--graphite-2); }
.tag { color: var(--accent-ink); background: #E3E9FB; }
.status { color: #1D7A45; }

/* ── Hero ── */
.h-hero { background: radial-gradient(120% 90% at 85% 0%, #252B34 0%, var(--graphite) 55%); color: var(--on-dark); padding-block: clamp(40px, 6vw, 88px) clamp(36px, 5vw, 64px); overflow: hidden; }
html[dir="rtl"] .h-hero { background: radial-gradient(120% 90% at 15% 0%, #252B34 0%, var(--graphite) 55%); }
.h-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.h-hero-text { grid-column: 1 / span 5; }
.h-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 1.2rem + 3.3vw, 4.6rem); line-height: 1.22; letter-spacing: -.01em; margin: 0 0 22px; text-wrap: balance; }
html[lang="en"] .h-title { line-height: 1.06; letter-spacing: -.03em; }
.h-lead { color: var(--on-dark-muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.8; max-width: 46ch; margin: 0 0 28px; }
.h-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.h-quiet { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--on-dark-muted); text-decoration: none; font-weight: 500; }
.h-quiet:hover { color: var(--on-dark); }
.h-quiet .ico { width: 18px; height: 18px; }

.c-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px; background: #E9ECEF; direction: ltr; }
.c-bar i { width: 9px; height: 9px; border-radius: 50%; background: #C5CBD3; }
.c-bar span { margin-inline-start: 12px; font-size: .72rem; color: #59616D; background: #fff; padding: 1px 10px; border-radius: 6px; font-family: system-ui, sans-serif; }

@media (max-width: 1080px) {
  .h-hero-text { grid-column: 1 / -1; }
}

/* ── Home sections ── */
.h-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.h-head.split-head { max-width: none; }
.h-work { background: var(--surface); padding-block: clamp(64px, 8vw, 120px); }
.w-media { display: block; position: relative; border-radius: var(--radius-media); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px -32px rgba(8, 12, 20, .5); }
.w-media img { width: 100%; height: auto; transition: transform 500ms var(--ease); }
.w-media:hover img { transform: scale(1.02); }

/* ── Signature interaction ── */
.h-demo { background: var(--graphite); color: var(--on-dark); padding-block: clamp(64px, 8vw, 120px); }
.demo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.demo-side { grid-column: 1 / span 4; position: sticky; top: 110px; }
.demo-side .kicker { color: var(--accent-soft); }
.demo-stage { grid-column: 6 / span 7; min-height: 580px; }
.demo-tabs { display: grid; gap: 4px; margin: 28px 0 20px; }
.demo-tabs [role="tab"] { display: flex; align-items: center; gap: 14px; text-align: start; background: transparent; border: 1px solid transparent; color: var(--on-dark-muted); padding: 14px 16px; border-radius: var(--radius); font-family: var(--f-display); font-weight: 500; font-size: 1.12rem; cursor: pointer; min-height: 52px; transition: background var(--t), color var(--t), border-color var(--t); }
.demo-tabs [role="tab"]:hover { color: var(--on-dark); background: var(--graphite-2); }
.demo-tabs [role="tab"][aria-selected="true"] { color: var(--on-dark); background: var(--graphite-2); border-color: var(--graphite-3); }
.demo-tabs [role="tab"][aria-selected="true"] .dt-n { color: #fff; background: var(--accent); border-color: var(--accent); }
.dt-n { font-size: .75rem; font-family: var(--f-body); font-weight: 600; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--graphite-3); display: grid; place-items: center; flex: none; }
.demo-note { font-size: .85rem; color: var(--on-dark-muted); }
.demo-panel { display: grid; gap: 24px; }
.demo-panel[hidden] { display: none; }
.demo-panel.enter { animation: demoIn 280ms var(--ease) both; }
@keyframes demoIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.demo-art { background: var(--graphite-2); border: 1px solid var(--graphite-3); border-radius: var(--radius-media); padding: clamp(18px, 3vw, 32px); min-height: 420px; display: grid; place-items: center; }
.demo-copy { max-width: 60ch; }
.demo-copy p { color: var(--on-dark-muted); }
.art-doc { width: 100%; background: var(--white); color: var(--ink); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.art-doc pre { margin: 0; padding: 20px 22px; white-space: pre-wrap; font-family: var(--f-body); font-size: .98rem; line-height: 1.9; }
.art-video { display: grid; justify-items: center; gap: 10px; }
.art-video video { width: min(240px, 60vw); height: auto; aspect-ratio: 9 / 16; border-radius: 14px; background: #000; box-shadow: var(--shadow); }
.art-cap { margin: 0; font-size: .8rem; color: var(--on-dark-muted); }
.art-platform { width: 100%; display: grid; grid-template-columns: 1fr 160px; gap: 18px; align-items: end; }
.art-platform figure { margin: 0; }
.art-platform img { border-radius: 12px; box-shadow: var(--shadow); }
.ap-b img { aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border: 4px solid #0B0D10; border-radius: 18px; }
.art-platform figcaption { font-size: .78rem; color: var(--on-dark-muted); margin-top: 8px; }
.art-session { width: 100%; background: var(--white); color: var(--ink); border-radius: 12px; padding: 22px 24px; box-shadow: var(--shadow); }
.as-title { margin: 0 0 12px; font-family: var(--f-display); font-weight: 600; }
.art-session ol { list-style: none; margin: 0; padding: 0; }
.art-session li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.art-session li.hot { background: #EEF2FE; margin-inline: -24px; padding-inline: 24px; border-top-color: #D5DFFB; }
.as-t { font-variant-numeric: tabular-nums; color: var(--muted); direction: ltr; text-align: end; }
@media (max-width: 960px) {
  .demo-side, .demo-stage { grid-column: 1 / -1; position: static; }
  .demo-tabs { grid-template-columns: repeat(2, 1fr); }
  .demo-stage { min-height: 0; }
  .demo-art { min-height: 340px; }
}
@media (max-width: 520px) { .art-platform { grid-template-columns: 1fr 104px; } .demo-tabs [role="tab"] { font-size: 1rem; padding: 12px; gap: 10px; } }

/* ── Training feature ── */

/* ── Consultations list ── */

/* ── Resources: covers + live mini tool ── */

/* ── Story ── */
.h-story { background: var(--white); padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); }

/* ── Final ── */
.h-final { background: var(--graphite-2); color: var(--on-dark); padding-block: clamp(56px, 7vw, 96px); }
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.final-grid p { color: var(--on-dark-muted); margin: 0; max-width: 52ch; }
@media (max-width: 860px) { .final-grid { grid-template-columns: 1fr; } }

.site-footer { background: var(--graphite); }
.site-footer .text-link { color: var(--on-dark); border-bottom-color: var(--accent-soft); }

/* Project pages and project list: real screenshots instead of name-only panels */
.proj-shots { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: end; padding-top: clamp(24px, 4vw, 48px); }
.ps-mob { border: 5px solid var(--graphite) !important; border-radius: 20px !important; }
.ps-mob img { aspect-ratio: 1 / 2; object-fit: cover; object-position: top; }
@media (max-width: 720px) { .proj-shots { grid-template-columns: 1fr 120px; gap: 14px; } }
.flagship.alt .fl-shot { order: 2; }
@media (max-width: 760px) { .flagship.alt .fl-shot { order: 0; } }
.about-head:has(> div:only-child) { grid-template-columns: 1fr; }

/* Small optional portrait (about page) */
.portrait-small { margin: 0; width: 100%; max-width: 280px; border-radius: var(--radius-media); overflow: hidden; }
.portrait-small img { width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .h-hero .h-hero-text { animation: rise 350ms var(--ease) both; }
  .h-hero .h-stage-wrap { animation: rise 350ms var(--ease) 90ms both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ── Hero 3D stage: portrait at the centre, real work floating at different depths ── */
.h-stage-wrap { grid-column: 6 / span 7; perspective: 1500px; perspective-origin: 50% 40%; }
.h-stage {
  --rx: 3deg; --ry: -9deg;
  position: relative; height: clamp(500px, 42vw, 620px);
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}
html[dir="rtl"] .h-stage { --ry: 9deg; }
.st { position: absolute; margin: 0; transform-style: preserve-3d; }
.st img { display: block; width: 100%; height: auto; }
.st figcaption { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; font-size: .72rem; font-weight: 600; background: rgba(20, 23, 27, .84); color: var(--on-dark); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.st-glow { position: absolute; inset: 12% 18% 8%; background: radial-gradient(closest-side, rgba(36, 85, 230, .45), transparent 70%); filter: blur(30px); transform: translateZ(-160px); }

.st-screen { width: 58%; inset-block-start: 4%; inset-inline-end: 0; transform: translateZ(-90px); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.st-screen figcaption { inset-block: 40px auto; inset-inline: auto 10px; }
.st-portrait { width: 44%; inset-block-start: 7%; inset-inline-start: 22%; transform: translateZ(40px); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75); border: 1px solid rgba(255, 255, 255, .1); }
.st-portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.st-phone { width: 19%; inset-block-end: 3%; inset-inline-start: 4%; transform: translateZ(120px); border-radius: 18px; overflow: hidden; border: 5px solid #0B0D10; background: #0B0D10; box-shadow: var(--shadow); }
.st-phone img { aspect-ratio: 1 / 2; object-fit: cover; object-position: top; }
.st-phone figcaption { display: none; }
.st-video { width: 17%; inset-block-end: 6%; inset-inline-end: 6%; transform: translateZ(95px); border-radius: 14px; overflow: hidden; background: #000; box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .12); }
.st-video img, .st-video video { display: block; width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
.st-video figcaption { position: static; display: block; border-radius: 0; text-align: center; background: var(--graphite-2); font-size: .66rem; padding: 5px 4px; }
.st-prompt { width: 34%; inset-block-start: 0; inset-inline-start: 0; transform: translateZ(150px); background: rgba(32, 37, 44, .94); border: 1px solid var(--graphite-3); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.st-prompt span { font-size: .7rem; font-weight: 700; color: var(--accent-soft); letter-spacing: .04em; }
.st-prompt pre { margin: 6px 0 0; font-family: var(--f-body); font-size: .78rem; line-height: 1.7; white-space: pre-wrap; color: var(--on-dark); }

/* Lively but calm: each layer drifts on its own rhythm (independent `translate` keeps the 3D transform). */
@media (prefers-reduced-motion: no-preference) {
  /* Calmed (Sept 29): ~5px travel on slower, independent rhythms. */
  .st-portrait { animation: drift 9s ease-in-out infinite; }
  .st-screen { animation: drift 12s ease-in-out -2s infinite reverse; }
  .st-phone { animation: drift 8s ease-in-out -1s infinite; }
  .st-video { animation: drift 10s ease-in-out -3s infinite reverse; }
  .st-prompt { animation: drift 8.5s ease-in-out -4s infinite; }
  @keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
}
@media (prefers-reduced-motion: reduce) { .h-stage { transition: none; } }

@media (max-width: 1080px) {
  .h-stage-wrap { grid-column: 1 / -1; margin-top: 36px; }
  .h-stage { height: min(78vw, 600px); max-width: 760px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .h-stage { --rx: 2deg; --ry: -5deg; height: 108vw; }
  html[dir="rtl"] .h-stage { --ry: 5deg; }
  .st-portrait { width: 62%; inset-inline-start: 19%; inset-block-start: 8%; }
  .st-screen { width: 70%; inset-block-start: 0; }
  .st-phone { width: 25%; inset-inline-start: 0; }
  .st-video { width: 23%; inset-inline-end: 0; }
  .st-prompt, .st-screen figcaption, .st-video figcaption { display: none; }
}

/* ═══════════════════ Personal brand platform (positioning brief, 21 Sept 2026) ═══════════════════ */
.btn-lg { min-height: 54px; padding: .8em 1.7em; font-size: 1.05rem; }
.nav-main a { padding: 8px 10px; font-size: .95rem; }
@media (max-width: 1240px) { .nav-main a { padding: 8px 7px; font-size: .9rem; } }
.footer-role { color: var(--accent-soft); font-weight: 600; margin: 2px 0 10px; font-size: .95rem; }
.footer-line { max-width: 40ch; line-height: 1.7; }

/* Hero */
.h-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 20px; font-size: .82rem; font-weight: 700; letter-spacing: .14em; color: var(--on-dark-muted); }
html[lang="ar"] .h-eyebrow { letter-spacing: .02em; font-size: .95rem; }
.h-eyebrow-alt { font-weight: 500; letter-spacing: .12em; opacity: .7; font-size: .76rem; }
.h-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--accent); }
.h-title { font-size: clamp(2.2rem, 1.1rem + 3vw, 4rem); line-height: 1.24; }
html[lang="en"] .h-title { line-height: 1.08; }

/* Value proposition */

/* Case studies */
.case-n { font-size: .78rem; color: var(--accent-ink); font-family: var(--f-body); font-weight: 700; }
.cs-result { font-weight: 600; color: var(--ink); }

/* How I work — tabs with subtitles */
.dt-l { display: flex; flex-direction: column; line-height: 1.35; }
.dt-l strong { font-weight: 600; }
.dt-l small { font-family: var(--f-body); font-size: .8rem; color: var(--on-dark-muted); font-weight: 400; }
.demo-tabs [role="tab"] { align-items: center; padding-block: 12px; }
.art-auto li { grid-template-columns: 110px 1fr; }
.art-auto .as-t { direction: inherit; text-align: start; color: var(--accent-ink); font-weight: 600; }
@media (max-width: 520px) { .dt-l small { display: none; } }

/* Services pillars */

/* Training outputs */
.outputs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.outputs li { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; }
.outputs li:nth-child(3n+1) { background: #EEF2FE; border-color: #D5DFFB; }

/* Resources */

/* Story */
.h-story { background: var(--surface); }
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.journey li { position: relative; padding: 22px 16px 0 0; display: grid; gap: 4px; }
html[dir="rtl"] .journey li { padding: 22px 0 0 16px; }
.journey li::before { content: ''; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink); }
.journey li:nth-last-child(-n+2)::before { background: var(--accent); border-color: var(--accent); }
.jr-n { font-size: .72rem; color: var(--muted); font-weight: 600; }
.journey strong { font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; }
.journey span:last-child { color: var(--muted); font-size: .88rem; }
@media (max-width: 960px) { .journey { grid-template-columns: repeat(3, 1fr); row-gap: 24px; } }
@media (max-width: 560px) { .journey { grid-template-columns: 1fr 1fr; } }

/* Trust */
.trust-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; }
.trust-sub { margin-top: 28px; }
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.quote { margin: 0; padding: 28px; background: var(--surface); border-radius: var(--radius-media); }
.quote blockquote { margin: 0 0 14px; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.6; }
.quote figcaption { color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) { .trust-grid, .quotes { grid-template-columns: 1fr; } }

/* Services page */
.pillar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; align-items: start; }
.pillar-n { display: block; font-size: .85rem; color: var(--accent-ink); font-weight: 700; margin-bottom: 10px; }
.pillar-does { font-size: 1.12rem; line-height: 1.8; margin-top: 0; }
.pillar-proof { margin: 24px 0; padding: 16px 18px; background: var(--white); border-inline-start: 3px solid var(--accent); border-radius: 8px; }
.pillar-sec.tint .pillar-proof { background: var(--surface); }
.pillar-proof span { display: block; font-size: .75rem; font-weight: 700; color: var(--accent-ink); margin-bottom: 4px; }
.pillar-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pillar-res { margin-top: 20px; font-size: .9rem; color: var(--muted); }
.pillar-res a { color: var(--ink-2); }
@media (max-width: 860px) { .pillar { grid-template-columns: 1fr; } }

/* Start (project inquiry) */
.start-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: start; }
.start-side { position: sticky; top: 100px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); }
.start-form .req-form { margin-top: 0; }
.step { border: 0; margin: 0 0 8px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.step + .step { padding-top: 24px; }
.step legend { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; padding: 0; margin-bottom: 16px; float: inline-start; width: 100%; }
.step legend + * { clear: both; }
.step-n { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .9rem; flex: none; }
.need-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.need-chips .radio.chip { min-height: 48px; padding-inline: 20px; font-size: 1rem; }
@media (max-width: 860px) { .start-grid { grid-template-columns: 1fr; } .start-side { position: static; } }
/* Longer positioning headline: give the text half the grid */
.h-hero-text { grid-column: 1 / span 6; }
.h-stage-wrap { grid-column: 7 / span 6; }
.h-title { font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.55rem); }
.st-video figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1080px) { .h-hero-text, .h-stage-wrap { grid-column: 1 / -1; } }
.split-head > .text-link { justify-self: end; align-self: end; }
.h-eyebrow { flex-wrap: nowrap; white-space: nowrap; min-height: 1.6em; }
@media (max-width: 560px) { .h-eyebrow-alt { display: none; } }

/* ═══════════════════ Final refinement (positioning · authority · conversion) ═══════════════════ */

/* Authority strip: a credibility layer right under the hero, not a statistics dashboard */

/* "What sets my approach apart": four statements, each backed by a real example */

/* Role tags on projects: only roles recorded in content */
.role-tags { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.role-tags li { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--accent-ink); border: 1px solid #C9D6FF; background: #EEF2FE; border-radius: 4px; padding: 3px 8px; line-height: 1.5; }
html[lang="en"] .role-tags li { text-transform: uppercase; font-size: .66rem; letter-spacing: .1em; }
.fl-body .role-tags { margin-bottom: 14px; }
.page-head .role-tags li { color: var(--accent-soft); border-color: rgba(140, 168, 255, .35); background: rgba(36, 85, 230, .16); }

/* Strategic advisory: consultative lead beside the title */

/* Training: the promise as a pull statement */
.train-pull { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.45; margin: 0 0 14px; padding-inline-start: 16px; border-inline-start: 3px solid var(--accent); color: var(--ink); text-wrap: balance; }

/* Resource covers: what each one is for, not just a title */

/* Story: AI as the next layer, not a sudden turn */
.story-lead { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.5; margin: 0 0 14px; max-width: 34ch; text-wrap: pretty; }
html[lang="en"] .story-lead { max-width: 44ch; }

/* Case study page */
.cs-meta { margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--graphite-3); max-width: 1040px; }
.cs-meta > div { padding: 18px 20px 4px 0; border-inline-start: 1px solid var(--graphite-3); padding-inline-start: 20px; }
.cs-meta > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.cs-meta dt { font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--on-dark-muted); margin-bottom: 8px; }
html[lang="en"] .cs-meta dt { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.cs-meta dd { margin: 0; font-size: .95rem; color: var(--on-dark); }
.cs-meta .role-tags { margin: 0; }
@media (max-width: 860px) { .cs-meta { grid-template-columns: 1fr 1fr; } .cs-meta > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .cs-meta > div:nth-child(n+3) { border-top: 1px solid var(--graphite-3); } }
@media (max-width: 480px) { .cs-meta { grid-template-columns: 1fr; } .cs-meta > div { border-inline-start: 0; padding-inline-start: 0; } .cs-meta > div + div { border-top: 1px solid var(--graphite-3); } }
.cs-shots { background: var(--white); border-bottom: 1px solid var(--line); padding-bottom: clamp(32px, 5vw, 56px); }
.cs-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 32px 64px; align-items: start; }
.cs-nav { position: sticky; top: 100px; }
.cs-nav ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cs-nav a { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--f-display); font-weight: 500; font-size: .98rem; color: var(--ink-2); transition: color var(--t), padding var(--t) var(--ease); }
.cs-nav a span { font-family: var(--f-body); font-size: .74rem; font-weight: 700; color: var(--accent-ink); }
.cs-nav a:hover { color: var(--ink); padding-inline-start: 6px; }
.cs-body { display: grid; gap: 0; }
.cs-sec { padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.cs-sec:first-child { border-top: 0; padding-top: 0; }
.cs-sec h2 { display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px; }
.cs-sec p, .cs-sec li { font-size: 1.08rem; line-height: 1.8; color: var(--ink-2); max-width: 64ch; }
.cs-sec p { margin: 0 0 .6em; }
.cs-sec .cs-result { color: var(--ink); font-weight: 600; font-family: var(--f-display); font-size: 1.2rem; }
.cs-sec .role-tags { margin-top: 12px; }
.cs-foot-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 64px; align-items: center; }
.cs-foot .big-text { margin-bottom: .6em; }
.cs-foot .cta-row { margin: 0; }
.cs-next { display: grid; grid-template-columns: 1fr 24px; gap: 4px 12px; padding: 24px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); text-decoration: none; transition: border-color var(--t), transform var(--t) var(--ease); }
.cs-next:hover { border-color: var(--ink); transform: translateY(-2px); }
.cs-next-l { grid-column: 1; font-size: .74rem; font-weight: 700; color: var(--accent-ink); letter-spacing: .04em; }
.cs-next strong { grid-column: 1; font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; }
.cs-next .muted { grid-column: 1; font-size: .9rem; }
.cs-next .ico { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--accent); }
@media (max-width: 900px) { .cs-layout { grid-template-columns: 1fr; } .cs-nav { position: static; } .cs-nav ol { display: flex; flex-wrap: wrap; gap: 0 20px; border-top: 0; } .cs-nav a { border-bottom: 0; padding: 6px 0; } .cs-foot-grid { grid-template-columns: 1fr; } }

/* Services page: four questions, answered in order */
.pillar-lab { font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink); margin: 18px 0 4px; }
html[lang="en"] .pillar-lab { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.pillar-head .pillar-lab:first-of-type { margin-top: 0; }
.pillar-head .body-l { margin: 0 0 6px; font-size: 1.05rem; }
.pillar-body .pillar-lab:first-child { margin-top: 0; }
.pillar-body h3.pillar-lab { margin: 22px 0 8px; }
.pillar-covers li { margin-bottom: .55em; }

/* Premium details: consistent card geometry, calmer hover, tighter section transitions */
.w-media { border-radius: 14px; }

/* ═══════════════════ Filtered redesign (29 Sept 2026): shorter home, one CTA system ═══════════════════ */

/* Header: five main links; contact lives in the drawer, footer and CTAs */
.nav-main { gap: 2px; }
.nav-main a { padding: 8px 12px; font-size: .98rem; }
@media (max-width: 1240px) { .nav-main a { padding: 8px 9px; font-size: .95rem; } }
.btn-light { border-color: transparent; }
.page-head .btn-light { color: var(--ink); }
.page-head .btn-light:hover { background: #fff; }
.w-media img { transition: transform 320ms var(--ease); }

/* Hero headline: Arabic ~61px at 1440 (three lines max), English ~72px, 34–40px on phones */
.h-title { font-size: clamp(2.125rem, 1.2rem + 2.75vw, 3.55rem); line-height: 1.3; }
html[lang="en"] .h-title { font-size: clamp(2.375rem, 1rem + 3.9vw, 4.6rem); line-height: 1.04; letter-spacing: -.03em; }
.h-hero { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.h-lead { line-height: 1.85; }
html[lang="en"] .h-lead { line-height: 1.65; }

/* 2 · Statement + credibility strip */
.h-statement { background: var(--white); padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.hs-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; }
.hs-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.05rem + 2.3vw, 3rem); line-height: 1.38; margin: 0; text-wrap: balance; }
html[lang="en"] .hs-title { line-height: 1.12; letter-spacing: -.02em; }
.hs-text { margin: 0; font-size: 1.1rem; line-height: 1.85; color: var(--ink-2); max-width: 44ch; }
html[lang="en"] .hs-text { line-height: 1.65; }
.hs-cred { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: center; margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--ink); }
.hs-line { margin: 0 0 12px; font-size: .98rem; line-height: 1.8; color: var(--ink-2); }
.hs-domains { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.hs-domains li { font-size: .82rem; font-weight: 600; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.hs-facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-facts > div { padding-inline: 18px; border-inline-start: 1px solid var(--line); }
.hs-facts > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hs-facts dt { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem); line-height: 1; }
.hs-facts dd { margin: 8px 0 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 960px) { .hs-grid, .hs-cred { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .hs-facts { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .hs-facts > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
}

/* 3 · Selected work */
.h-work { padding-block: clamp(56px, 7vw, 104px); }
.wk-media { display: block; position: relative; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px -32px rgba(8, 12, 20, .5); }
.wk-media img { width: 100%; height: auto; transition: transform 320ms var(--ease); }
.wk-media:hover img { transform: scale(1.015); }
.wk-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(28px, 4vw, 56px); align-items: center; padding: clamp(18px, 2.4vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: 20px; }
.wk-lead-media { overflow: visible; border: 0; box-shadow: none; background: none; }
.wk-desk { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 50px -32px rgba(8, 12, 20, .5); }
.wk-detail { position: absolute; inset-block-end: -18px; inset-inline-end: -14px; width: 36%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.wk-kind { font-size: .86rem; color: var(--muted); margin: 0 0 6px; line-height: 1.6; }
.wk-status { color: #1D7A45; font-weight: 600; }
.wk-title { margin: 0 0 8px; }
.wk-title a { text-decoration: none; }
.wk-title a:hover { color: var(--accent-ink); }
.wk-line { color: var(--ink-2); margin: 0 0 4px; line-height: 1.85; }
html[lang="en"] .wk-line { line-height: 1.65; }
.wk-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 14px; }
.wk-info .role-tags, .wk-card .role-tags, .wk-small .role-tags { margin: 0 0 10px; }
.wk-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(32px, 4vw, 48px); }
.wk-card .wk-media { margin-bottom: 18px; }
.wk-more { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: clamp(24px, 3vw, 32px) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wk-thumb { margin-bottom: 14px; box-shadow: none; }
.wk-small .wk-line { font-size: .95rem; }
.wk-panel { aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 20px; background: var(--graphite-2); color: var(--on-dark); position: relative; }
.wk-panel::before { content: ''; position: absolute; top: 20px; inset-inline-start: 20px; width: 40px; height: 2px; background: var(--accent-soft); }
.wk-panel-name { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.2; }
.wk-panel-sub { font-size: .82rem; color: var(--on-dark-muted); }
.wk-panel.is-private { background: var(--tint); color: var(--ink); }
.wk-panel.is-private .wk-panel-sub { color: var(--muted); }
.wk-panel.is-private::before { background: var(--accent); }
.wk-thumb:has(.is-private), .rel-media:has(.is-private) { border-style: dashed; border-color: #B9C1CC; }
@media (max-width: 960px) { .wk-lead { grid-template-columns: minmax(0, 1fr); } .wk-detail { width: 40%; inset-inline-end: -6px; } .wk-info { padding-top: 12px; } }
@media (max-width: 760px) { .wk-pair, .wk-more { grid-template-columns: minmax(0, 1fr); } }

/* 4 · How I can help: pillars + strategy session as the entry point */
.h-help { background: var(--white); padding-block: clamp(56px, 7vw, 104px); border-block: 1px solid var(--line); }
.help-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.help-pillars a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 20px 24px; padding-inline-start: 0; text-decoration: none; transition: color var(--t); }
.help-pillars li + li a { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.hp-n { font-size: .78rem; font-weight: 700; color: var(--accent-ink); }
.hp-t { font-family: var(--f-display); font-weight: 600; font-size: 1.16rem; line-height: 1.45; }
.hp-w { color: var(--ink-2); font-size: .94rem; line-height: 1.8; flex: 1; }
html[lang="en"] .hp-w { line-height: 1.6; }
.hp-go { color: var(--muted); }
.help-pillars a:hover .hp-t, .help-pillars a:hover .hp-go { color: var(--accent-ink); }
@media (max-width: 1000px) { .help-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .help-pillars li:nth-child(3) a { padding-inline-start: 0; border-inline-start: 0; } .help-pillars li:nth-child(n+3) a { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .help-pillars { grid-template-columns: minmax(0, 1fr); } .help-pillars li + li a { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--line); } }

.advisory { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(36px, 5vw, 56px); padding: clamp(22px, 3.5vw, 44px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.adv-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); line-height: 1.45; margin: 0 0 10px; text-wrap: balance; }
html[lang="en"] .adv-title { line-height: 1.2; letter-spacing: -.01em; }
.adv-lead { color: var(--ink-2); margin: 0 0 16px; line-height: 1.85; max-width: 52ch; }
html[lang="en"] .adv-lead { line-height: 1.65; }
.adv-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.adv-funnel li { display: inline-flex; align-items: center; font-size: .86rem; font-weight: 600; }
.adv-funnel li:not(:last-child)::after { content: ''; width: 22px; height: 1px; background: var(--ink-2); margin-inline: 10px; }
.adv-funnel li:last-child { color: var(--accent-ink); }
.advisory .cta-row { margin: 22px 0 0; gap: 10px 18px; }
.adv-topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.adv-topics a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 20px; gap: 4px 12px; align-items: center; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.adv-topics a:hover strong { color: var(--accent-ink); }
.at-n { font-size: .78rem; font-weight: 700; color: var(--muted); }
.adv-topics strong { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; line-height: 1.5; }
.at-m { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.adv-topics .ico { width: 18px; height: 18px; color: var(--muted); }
@media (max-width: 900px) { .advisory { grid-template-columns: minmax(0, 1fr); } }
.svc-advisory .advisory { margin-top: 0; }
.svc-advisory .adv-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }

/* 5 · How I work: one compact row */
.h-how { background: var(--graphite); color: var(--on-dark); padding-block: clamp(56px, 7vw, 96px); }
.h-how .kicker { color: var(--accent-soft); }
.h-how .h2 { max-width: 30ch; }
.how-row { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.how-row li { display: grid; gap: 4px; align-content: start; padding: 18px 20px 4px; padding-inline-start: 0; border-top: 1px solid var(--graphite-3); position: relative; }
.how-row li + li { padding-inline-start: 20px; }
.how-row li::before { content: ''; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent-soft); background: var(--graphite); }
.how-row li + li::before { inset-inline-start: 20px; }
.how-row li:last-child::before { background: var(--accent); border-color: var(--accent); }
.how-n { font-size: .74rem; font-weight: 700; color: var(--accent-soft); }
.how-row strong { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; }
.how-row span:last-child { color: var(--on-dark-muted); font-size: .92rem; line-height: 1.7; }
@media (max-width: 760px) { .how-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; } .how-row li:nth-child(3) { padding-inline-start: 0; } .how-row li:nth-child(3)::before { inset-inline-start: 0; } }

/* 6 · Training + free tools */
.h-learn { background: var(--surface); padding-block: clamp(56px, 7vw, 104px); }
.learn-train { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 72px); align-items: center; }
.lt-pull { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.4; margin: 0 0 14px; padding-inline-start: 18px; border-inline-start: 3px solid var(--accent); text-wrap: balance; }
html[lang="en"] .lt-pull { line-height: 1.15; letter-spacing: -.02em; }
.lt-intro .body-l { line-height: 1.85; }
.lt-intro .cta-row { margin-bottom: 0; }
.lt-outputs { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.lt-out-title { margin: 0; font-size: .82rem; font-weight: 700; color: var(--muted); }
.outputs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.outputs li { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; line-height: 1.5; }
.outputs li:nth-child(3n+1) { background: #EEF2FE; border-color: #D5DFFB; }
.outputs.big li { font-size: 1rem; padding: 9px 16px; background: var(--white); }
.outputs.big li:nth-child(3n+1) { background: #EEF2FE; }
.learn-res { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.lr-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 22px; }
.lr-head .h3 { margin: 0 0 4px; }
.lr-head p { margin: 0; }
.tool-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tool-cards a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color var(--t), transform var(--t) var(--ease); }
.tool-cards a:hover { border-color: var(--ink); transform: translateY(-2px); }
.tc-cat { font-size: .76rem; font-weight: 700; color: var(--accent-ink); }
.tool-cards strong { font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; line-height: 1.45; }
.tc-short { color: var(--ink-2); font-size: .9rem; line-height: 1.75; flex: 1; }
.tc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .88rem; font-weight: 600; color: var(--accent-ink); }
.tc-go .ico { width: 16px; height: 16px; }
@media (max-width: 1000px) { .learn-train { grid-template-columns: minmax(0, 1fr); } .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tool-cards { grid-template-columns: minmax(0, 1fr); } }

/* 7 · Short story */
.h-story { background: var(--white); padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.h-story .story-lead { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); line-height: 1.5; max-width: 40ch; margin: 0 0 clamp(28px, 4vw, 44px); text-wrap: pretty; }
html[lang="en"] .h-story .story-lead { line-height: 1.3; max-width: 46ch; }
.journey { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.journey li { position: relative; padding: 20px 14px 0 0; display: grid; gap: 2px; align-content: start; }
html[dir="rtl"] .journey li { padding: 20px 0 0 14px; }
.journey li::before { content: ''; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--ink); }
.journey li:nth-last-child(-n+2)::before { background: var(--accent); border-color: var(--accent); }
.jr-n { font-size: .72rem; color: var(--muted); font-weight: 600; }
.journey strong { font-family: var(--f-display); font-weight: 600; font-size: 1.04rem; line-height: 1.5; }
.journey span:last-child { color: var(--muted); font-size: .86rem; line-height: 1.6; }
@media (max-width: 960px) { .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; } }
@media (max-width: 560px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Footer: simpler — identity, five links, CTA, language, legal */
.footer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
.footer-nav { grid-template-columns: 1fr 1fr; gap: 0 24px; }
.footer-nav a { padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.footer-legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.footer-lang { font-weight: 600; color: var(--on-dark) !important; text-decoration: none; padding: 10px 14px; margin-inline-end: 10px; border: 1px solid var(--graphite-3); border-radius: var(--radius); }
.footer-lang:hover { border-color: var(--on-dark-muted); }
.footer-base a { display: inline-block; padding-block: 10px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Project cards: related work, about page, projects index */
.rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.rel-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rel-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rel-card .w-media { width: 100%; margin-bottom: 10px; }
.rel-card .h4 { margin: 0; }
.rel-card .h4 a { text-decoration: none; }
.rel-card .h4 a:hover { color: var(--accent-ink); }
.rel-line { color: var(--ink-2); font-size: .95rem; line-height: 1.8; margin: 0 0 8px; }
html[lang="en"] .rel-line { line-height: 1.6; }
.minor-row { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.cs-related .h2 { margin-bottom: 0; }
.fl-shot { box-shadow: none; }
@media (max-width: 860px) { .rel-grid.three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .rel-grid { grid-template-columns: minmax(0, 1fr); } }

/* About: narrative + a path, not a CV */
.about-now { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; line-height: 1.8; color: var(--on-dark); max-width: 56ch; margin: 0; padding-inline-start: 16px; border-inline-start: 3px solid var(--accent-soft); }
html[lang="en"] .about-now { line-height: 1.6; }
.story p { line-height: 1.9; }
html[lang="en"] .story p { line-height: 1.7; }
.path-line { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.path-line li { position: relative; display: grid; gap: 4px; align-content: start; padding: 22px 16px 0 0; }
html[dir="rtl"] .path-line li { padding: 22px 0 0 16px; }
.path-line li::before { content: ''; position: absolute; top: -6px; inset-inline-start: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--ink); }
.path-line li:last-child::before { background: var(--accent); border-color: var(--accent); }
.pl-mark { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; }
.path-line strong { font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.5; color: var(--accent-ink); }
.path-line span:last-child { color: var(--ink-2); font-size: .92rem; line-height: 1.75; }
@media (max-width: 1000px) { .path-line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 600px) {
  .path-line { grid-template-columns: minmax(0, 1fr); border-top: 0; border-inline-start: 1.5px solid var(--ink); row-gap: 0; }
  .path-line li, html[dir="rtl"] .path-line li { padding: 0 24px 24px; }
  .path-line li::before { top: 8px; inset-inline-start: -6px; }
}
.trust-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; margin-top: 24px; }
.trust-sub { margin-top: 28px; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* Training: formats you can see at a glance */
.aud-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aud-chips li { padding: 6px 14px; border: 1px solid var(--graphite-3); border-radius: 999px; font-size: .9rem; color: var(--on-dark); background: var(--graphite-2); }
.fmt-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fmt-cards li { display: flex; flex-direction: column; gap: 6px; padding: 26px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 16px; }
.fmt-cards li:nth-child(2) { border-top-color: var(--accent); }
.fc-n { font-size: .78rem; font-weight: 700; color: var(--muted); }
.fc-len { margin: 4px 0 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.35; }
.fmt-cards .h4 { margin: 0; color: var(--accent-ink); }
.fmt-cards p:last-child { margin: 0; color: var(--ink-2); line-height: 1.8; }
@media (max-width: 860px) { .fmt-cards { grid-template-columns: minmax(0, 1fr); } }
.train-pull { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); line-height: 1.45; margin: 0 0 14px; padding-inline-start: 16px; border-inline-start: 3px solid var(--accent); text-wrap: balance; }

/* Contact: choose first, then one short form */
.cx-q { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 14px; }
.cx-choices { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cx-choice { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 10px; height: 100%; min-height: 120px; padding: 20px; background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; text-decoration: none; transition: border-color var(--t), box-shadow var(--t); }
.cx-choice:hover { border-color: var(--ink); }
.cx-n { grid-column: 1 / -1; font-size: .76rem; font-weight: 700; color: var(--muted); }
.cx-choice strong { grid-column: 1; font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.4; }
.cx-choice span:not(.cx-n) { grid-column: 1; color: var(--ink-2); font-size: .92rem; line-height: 1.75; }
.cx-choice .ico { grid-column: 2; grid-row: 2; align-self: center; color: var(--muted); transition: transform var(--t) var(--ease); }
.cx-choice.on { border-color: var(--ink); border-width: 2px; box-shadow: 0 0 0 3px #E3E9FB; }
.cx-choice.on .cx-n::after { content: '  \2713'; color: var(--accent-ink); }
.cx-choice.on .ico { color: var(--accent-ink); transform: rotate(-90deg); }
.cx-panel + .cx-panel { margin-top: 40px; }
.cx-js .cx-panel + .cx-panel { margin-top: 0; }
.cx-panel[hidden] { display: none; }
.cx-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cx-panel-head .h3 { margin: 0; }
.cx-panel-head .h3:focus { outline: none; }
.cx-panel-head .h3:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cx-change { display: none; min-height: 44px; align-items: center; }
.cx-js .cx-change { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) { .cx-js .cx-panel:not([hidden]) { animation: rise 280ms var(--ease) both; } }
@media (max-width: 1000px) { .cx-choices { grid-template-columns: minmax(0, 1fr); } .cx-choice { min-height: 0; } }

/* Forms: visible states, not colour alone */
.form-status { border-inline-start: 4px solid currentColor; font-weight: 500; }
.form-status.ok::before { content: '\2713  '; font-weight: 700; }
.form-status.fail::before { content: '!  '; font-weight: 700; }
.err::before { content: '!  '; font-weight: 700; }
.err[hidden] { display: none; }
.hint { line-height: 1.6; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(36, 85, 230, .18); }
.hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html[dir="ltr"] .cx-choice.on .ico { transform: rotate(90deg); }
@media (max-width: 760px) {
  .wk-small { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .wk-small > * { grid-column: 2; }
  .wk-small .wk-thumb { grid-column: 1; grid-row: 1 / span 5; margin: 0; }
  .wk-small .wk-panel { aspect-ratio: 1 / 1; padding: 12px; }
  .wk-small .wk-panel::before, .wk-small .wk-panel-sub { display: none; }
  .wk-small .wk-panel-name { font-size: 1.05rem; }
  .wk-small .wk-thumb img { aspect-ratio: 1 / 1; object-fit: cover; object-position: top; }
  .wk-small .wk-links { margin-top: 6px; }
  .wk-more { gap: 20px; }
}
/* Density pass: keep the home page about a third shorter than before */
.wk-media { text-decoration: none; color: inherit; }
.hs-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.hs-title { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.6rem); }
.wk-thumb img, .wk-thumb .wk-panel { aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }
.h-story .story-lead { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem); max-width: 52ch; }
.h-work, .h-help, .h-learn { padding-block: clamp(56px, 6.5vw, 92px); }
.h-how, .h-story { padding-block: clamp(52px, 6vw, 84px); }
.h-how .h2 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem); }
@media (max-width: 960px) { .hs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .help-pillars a { flex-direction: column; padding-block: 18px; }
  .hp-go { display: none; }
  .tool-cards a { padding: 16px 18px; }
}

/* ═══════════════════ Tool kit (src/tools/): one visual language for every interactive tool ═══════════════════ */

/* Privacy note in the tool head: a trust feature, not fine print */
.tk-private { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 22px 0 0; padding: 12px 16px; max-width: 720px; border: 1px solid rgba(140, 168, 255, .35); background: rgba(36, 85, 230, .12); border-radius: var(--radius); font-size: .95rem; color: var(--on-dark-muted); }
.tk-private strong { color: var(--on-dark); font-family: var(--f-display); font-weight: 600; }
.tk-private strong::before { content: '🔒'; margin-inline-end: 6px; font-size: .9em; }
html[lang="en"] .tk-private strong { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }

.tk-section { padding-top: clamp(32px, 5vw, 64px); }
.tk { max-width: 880px; }
.tk.wide, .tk-wide { max-width: none; }

/* Stepper */
.tk-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); padding: clamp(20px, 4vw, 40px); }
.tk-progress { height: 4px; background: var(--tint); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.tk-progress-bar { display: block; height: 100%; inline-size: 0; background: var(--accent); transition: inline-size 250ms var(--ease); }
.tk-stepcount { margin: 0 0 18px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.tk-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.tk-step[hidden] { display: none; }
.tk-step-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.35; padding: 0; margin: 0 0 8px; outline: none; }
.tk-step-intro { color: var(--ink-2); margin: 0 0 22px; max-width: 60ch; }
.tk-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.tk-nav [data-tk-back] { margin-inline-end: auto; }
.tk-nav [hidden] { display: none; }
.tk-nav .btn { min-width: 128px; }
.tk .field .hint { margin-top: -2px; }
.tk .field textarea { min-height: 88px; }

/* Choice lists: large targets, visible selected state that does not rely on colour alone */
.tk-choices { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.tk-choices legend { font-weight: 600; font-size: .95rem; margin-bottom: 10px; padding: 0; }
.tk-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.tk-choices.cols .tk-options { grid-template-columns: 1fr; }
.tk-option { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; font-weight: 500; line-height: 1.45; transition: border-color var(--t), background var(--t); }
.tk-option:hover { border-color: #AEB6C2; }
.tk-option input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); margin: 0; }
.tk-option:has(input:checked) { border-color: var(--ink); background: #EEF2FE; }
.tk-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-choices[aria-invalid="true"] .tk-option { border-color: #B3261E; }

/* Results */
.tk-result { outline: none; }
.tk-result[hidden] { display: none; }
.tk-result-head { margin-bottom: 24px; }
.tk-result-head .kicker { margin-bottom: 4px; }
.tk-result-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.3; margin: 0 0 10px; }
.tk-sub { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; margin: 32px 0 14px; }
.tk-sub:first-child { margin-top: 0; }
.tk-cards { display: grid; gap: 14px; }
.tk-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .tk-cards.two { grid-template-columns: 1fr; } }
.tk-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); padding: clamp(18px, 3vw, 26px); }
.tk-card-k { margin: 0 0 4px; font-size: .78rem; font-weight: 700; color: var(--accent-ink); letter-spacing: .02em; }
.tk-card-t { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.4; margin: 0 0 8px; }
.tk-card p { margin: 0 0 .6em; color: var(--ink-2); }
.tk-dl { margin: 12px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.tk-dl > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tk-dl dt { font-size: .85rem; font-weight: 600; color: var(--muted); }
.tk-dl dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .tk-dl > div { grid-template-columns: 1fr; } }

/* Status badges: tone in words + symbol, colour only reinforces */
.tk-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 4px; border: 1px solid; line-height: 1.5; vertical-align: middle; }
.tk-badge > span { font-family: var(--f-body); }
.tk-badge[data-tone="critical"] { color: #8C1D18; background: #FBE9E7; border-color: #F0B8B2; }
.tk-badge[data-tone="high"] { color: #7A4A00; background: #FFF4DE; border-color: #F1D398; }
.tk-badge[data-tone="medium"], .tk-badge[data-tone="info"] { color: var(--accent-ink); background: #EEF2FE; border-color: #C9D6FF; }
.tk-badge[data-tone="low"] { color: var(--ink-2); background: var(--tint); border-color: var(--line); }
.tk-badge[data-tone="ok"] { color: #1F5A33; background: #E6F2E9; border-color: #B8DAC2; }
.tk-meter { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.tk-meter i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-2); margin-inline-end: 3px; }
.tk-meter i.on { background: var(--ink-2); }

/* Big numbers in estimate tools */
.tk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; margin-bottom: 16px; }
.tk-stat { background: var(--graphite); color: var(--on-dark); border-radius: var(--radius-media); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.tk-stat-l { font-size: .85rem; color: var(--on-dark-muted); }
.tk-stat-v { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem); line-height: 1.1; direction: ltr; text-align: start; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
.tk-estimate { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #7A4A00; background: #FFF4DE; border: 1px solid #F1D398; border-radius: 4px; padding: 2px 8px; margin-bottom: 10px; }
.tk-assume { margin-top: 16px; padding: 14px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: .92rem; color: var(--ink-2); }
.tk-assume summary { cursor: pointer; font-weight: 600; color: var(--ink); }

/* Documents produced by builder tools (brief, SOP): printable */
.tk-doc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-media); padding: clamp(20px, 4vw, 40px); }
.tk-doc h2, .tk-doc h3 { font-family: var(--f-display); }
.tk-doc h2 { font-size: 1.5rem; margin: 0 0 4px; }
.tk-doc h3 { font-size: 1rem; font-weight: 700; color: var(--accent-ink); margin: 20px 0 4px; letter-spacing: .02em; }
.tk-doc p, .tk-doc li { white-space: pre-wrap; }
.tk-doc .muted { font-size: .9rem; }

/* Actions under results */
.tk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.tk-actions .btn.done { background: #1F5A33; border-color: #1F5A33; color: #fff; }

/* Next steps (inside results and at page end) */
.tk-next-inline { margin-top: 32px; }
.tk-next-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.tk-next-card { display: grid; grid-template-columns: 1fr 20px; gap: 4px 10px; align-content: start; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color var(--t), transform var(--t) var(--ease); }
.tk-next-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.tk-next-k { grid-column: 1; font-size: .74rem; font-weight: 700; color: var(--accent-ink); letter-spacing: .02em; }
.tk-next-card strong { grid-column: 1; font-family: var(--f-display); font-weight: 600; line-height: 1.4; }
.tk-next-card > span:not(.tk-next-k) { grid-column: 1; font-size: .9rem; color: var(--ink-2); }
.tk-next-card .ico { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--accent); width: 18px; height: 18px; }
.tk-next { padding-block: clamp(48px, 6vw, 88px); }
.tk-next .cta-row { gap: 10px 20px; margin-top: 28px; }

/* About the tool (crawlable explanation) */
.tk-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.tk-about-grid p, .tk-about-grid li { color: var(--ink-2); }
@media (max-width: 760px) { .tk-about-grid { grid-template-columns: 1fr; gap: 24px; } }

@media (prefers-reduced-motion: reduce) { .tk-progress-bar { transition: none; } }

/* Print only the tool result */
@media print {
  body.tk-printing .site-header, body.tk-printing .site-footer, body.tk-printing .staging-bar, body.tk-printing .page-head,
  body.tk-printing .tk-about, body.tk-printing .tk-next, body.tk-printing .tk-form, body.tk-printing .tk-actions, body.tk-printing .tk-next-inline, body.tk-printing .skip { display: none !important; }
  body.tk-printing .tk-section { padding: 0; }
  body.tk-printing .tk-doc, body.tk-printing .tk-card { border-color: #999; box-shadow: none; break-inside: avoid; }
  body.tk-printing .tk-stat { background: #fff; color: #000; border: 1px solid #999; }
  body.tk-printing .tk-stat-l { color: #333; }
}

/* Touch targets: small buttons inside tools still meet 44px */
.tk .btn-small, .tk-actions .btn-small { min-height: 44px; }
/* Screen-reader-only text for tools (same as the site's .sr) */
.tk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══════════════════ Resources ecosystem (src/library.mjs) ═══════════════════ */

/* Hub head: search is the first action */
.lib-search { display: flex; gap: 10px; margin: 28px 0 0; max-width: 640px; }
.lib-search input { flex: 1; min-height: 52px; background: var(--graphite-2); border: 1px solid var(--graphite-3); color: var(--on-dark); border-radius: var(--radius); padding: 10px 16px; font-size: 1.02rem; }
.lib-search input::placeholder { color: #8A94A1; }
.lib-search input:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(36, 85, 230, .3); outline: none; }
.lib-search .btn { min-height: 52px; }
.lib-jump { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; }
.lib-jump a { color: var(--on-dark-muted); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 6px 0; border-bottom: 1px solid transparent; }
.lib-jump a:hover { color: var(--on-dark); border-bottom-color: var(--accent-soft); }
@media (max-width: 520px) { .lib-search { flex-direction: column; } }

/* Sections */
.lib-sec { padding-block: clamp(56px, 7vw, 104px); }
.lib-sec.tint { background: var(--white); border-block: 1px solid var(--line); }
.lib-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 48px; align-items: end; margin-bottom: clamp(24px, 4vw, 40px); }
.lib-sec-head .h2 { margin-bottom: .25em; }
.lib-sec-head .body-l { margin: 0; }
@media (max-width: 760px) { .lib-sec-head { grid-template-columns: 1fr; } }

/* Cards: one card system for tools, guides, courses, websites */
.lib-grid { display: grid; gap: 16px; }
.lib-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .lib-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lib-grid.three { grid-template-columns: 1fr; } }
.lib-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); transition: border-color var(--t), transform var(--t) var(--ease); }
.lib-sec.tint .lib-card { background: var(--surface); }
.lib-card:hover { border-color: #AEB6C2; }
.lib-card[hidden] { display: none; }
.lib-card.is-pick { border-color: #C9D6FF; box-shadow: inset 0 3px 0 var(--accent); }
.lib-card-k { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .78rem; font-weight: 600; color: var(--muted); }
.lib-card-k span:first-child { color: var(--accent-ink); }
.lib-card-t { font-family: var(--f-display); font-weight: 600; font-size: 1.18rem; line-height: 1.4; margin: 0; }
.lib-card-t a { text-decoration: none; }
.lib-card-t a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.lib-card-t a:hover { color: var(--accent-ink); }
.lib-card-t a:focus-visible { outline: none; }
.lib-card-t a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.lib-sum { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.7; }
.lib-why, .lib-best { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.65; }
.lib-why { padding: 10px 12px; background: #EEF2FE; border-radius: 8px; }
.lib-why strong, .lib-best strong { color: var(--ink); font-weight: 600; }
.lib-pick { position: absolute; inset-block-start: -11px; inset-inline-start: 18px; margin: 0; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 3px 10px; border-radius: 4px; }
.lib-pick::before { content: '★ '; }
.lib-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lib-chips li { font-size: .76rem; font-weight: 600; color: var(--ink-2); background: var(--tint); border-radius: 4px; padding: 2px 8px; }
.lib-sec.tint .lib-chips li { background: var(--white); border: 1px solid var(--line); }
.lib-cta { margin: auto 0 0; padding-top: 10px; position: relative; z-index: 1; }
.lib-cta .text-link { font-size: .95rem; }
.lib-cta .ico { width: 16px; height: 16px; }
.lib-dl { margin: 6px 0 0; display: grid; border-top: 1px solid var(--line); }
.lib-dl > div { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.lib-dl.stacked > div { grid-template-columns: 1fr; }
.lib-dl dt { font-weight: 600; color: var(--muted); font-size: .82rem; }
.lib-dl dd { margin: 0; color: var(--ink); }
.lib-course .lib-card-t, .lib-website .lib-card-t { position: static; }
.lib-verified { margin-top: 16px; max-width: 70ch; }

/* Learning paths list */
.lib-paths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.lib-paths a { display: grid; grid-template-columns: auto minmax(0, 1fr) 22px; gap: 4px 14px; align-items: start; height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--white); text-decoration: none; transition: border-color var(--t), transform var(--t) var(--ease); }
.lib-paths a:hover { border-color: var(--ink); transform: translateY(-2px); }
.lib-paths .lp-n { grid-row: span 3; font-family: var(--f-display); font-weight: 700; color: var(--accent-ink); font-size: 1.05rem; }
.lib-paths strong { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.4; }
.lib-paths .lp-goal { grid-column: 2; color: var(--ink-2); font-size: .93rem; line-height: 1.6; }
.lib-paths .lp-meta { grid-column: 2; font-size: .8rem; font-weight: 600; color: var(--muted); }
.lib-paths .ico { grid-column: 3; grid-row: 1 / span 3; align-self: center; color: var(--accent); }
.lib-paths.big { grid-template-columns: 1fr; }
.lib-paths.big a { padding: 26px 28px; }

/* Path page */
.lp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 820px; margin: 24px 0; border-top: 1px solid var(--graphite-3); }
.lp-facts > div { padding: 14px 20px 4px 0; }
.lp-facts > div + div { border-inline-start: 1px solid var(--graphite-3); padding-inline-start: 20px; }
.lp-facts dt { font-size: .78rem; font-weight: 700; color: var(--on-dark-muted); margin-bottom: 4px; }
.lp-facts dd { margin: 0; color: var(--on-dark); }
@media (max-width: 560px) { .lp-facts { grid-template-columns: 1fr; } .lp-facts > div + div { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--graphite-3); } }
.narrow-wide { max-width: 900px; }
.lp-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.lp-step { position: relative; padding: 0 0 36px; padding-inline-start: 44px; scroll-margin-top: 100px; }
.lp-step::before { content: ''; position: absolute; inset-inline-start: 11px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.lp-step:last-child::before { display: none; }
.lp-step::after { content: ''; position: absolute; inset-inline-start: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); }
.lp-step.lp-practice::after { background: var(--accent); border-color: var(--accent); }
.lp-k { display: flex; gap: 12px; margin: 0 0 4px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.lp-kind { color: var(--accent-ink); }
.lp-step .h4 { font-size: 1.25rem; margin-bottom: 6px; }
.lp-step p { margin: 0 0 8px; color: var(--ink-2); max-width: 64ch; }
.lp-link { margin-top: 10px !important; }
.lp-finish { margin-top: 16px; padding: 24px 28px; background: var(--graphite); color: var(--on-dark); border-radius: var(--radius-media); }
.lp-finish .kicker { color: var(--accent-soft); }
.lp-finish .big-text { margin: 0; }

/* Library filters */
.lib-filters { display: grid; gap: 16px; margin-bottom: 18px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); }
.lib-filters .field { margin: 0; }
.lib-cats { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.lib-cat { position: relative; cursor: pointer; }
.lib-cat input { position: absolute; opacity: 0; pointer-events: none; }
.lib-cat span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .92rem; background: #fff; transition: border-color var(--t), background var(--t); }
.lib-cat input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.lib-cat input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lib-selects { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.lib-selects .field { min-width: 150px; flex: 1 1 150px; }
.lib-checks { display: flex; flex-wrap: wrap; gap: 0 18px; flex: 2 1 320px; }
.lib-checks .check { margin: 6px 0; }
@media (max-width: 620px) { .lib-selects .field { flex-basis: 100%; } }

/* Browse CTA */
.lib-browse { background: var(--graphite-2); color: var(--on-dark); }
.lib-browse .body-l, .lib-browse .muted { color: var(--on-dark-muted); }
.lib-browse-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 56px; align-items: center; }
.lib-browse .btn-dark { background: var(--surface); color: var(--ink); }
.lib-browse .btn-dark:hover { background: #fff; }
@media (max-width: 860px) { .lib-browse-grid { grid-template-columns: 1fr; } }

/* Guide pages: link to the interactive companion tool */
.tool-companion { display: grid; gap: 10px; padding: 20px 22px; border: 1px solid #C9D6FF; background: #EEF2FE; border-radius: var(--radius-media); }
.tool-companion .kicker { margin: 0; }
.tool-companion .tk-next-card { background: #fff; }

.lib-note { margin: 0; font-size: .82rem; color: var(--muted); }
.lib-note::before { content: 'ⓘ '; }
.lib-orig { margin-inline-start: 12px; font-size: .85rem; }

/* FAQ (services, training): native details, readable, no JS */
.faq-sec { border-top: 1px solid var(--line); }
.faq-wrap { max-width: 900px; }
.faq-list { border-top: 1px solid var(--ink); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 56px; padding: 14px 0; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-family: var(--f-body); font-weight: 500; transition: transform var(--t); }
.faq[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--accent-ink); }
.faq p { margin: 0 0 18px; color: var(--ink-2); max-width: 68ch; }

/* Digital 2026 page: stat tiles + single-hue bar tables (one series per country, direct labels) */
.dg-take { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.dg-take li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.dg-take .dg-n { grid-row: span 2; font-size: .8rem; font-weight: 700; color: var(--accent-ink); padding-top: 4px; }
.dg-take strong { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.4; }
.dg-take p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .dg-take { grid-template-columns: 1fr; } }
.dg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
@media (max-width: 960px) { .dg-grid { grid-template-columns: 1fr; } }
.dg-country { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); padding: clamp(20px, 3vw, 32px); min-width: 0; }
.dg-country .h3 { margin-bottom: 14px; }
.dg-country .h4 { margin: 24px 0 8px; }
.dg-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dg-stats.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
@media (max-width: 760px) { .dg-stats, .dg-stats.wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .dg-stats, .dg-stats.wide { grid-template-columns: 1fr; } }
.dg-stat { padding: 14px 16px; background: var(--surface); border-radius: var(--radius); }
.dg-stat dt { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.dg-stat dd { margin: 0; display: grid; gap: 2px; }
.dg-stat strong { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1.25; }
.dg-stat span { font-size: .82rem; color: var(--ink-2); }
.dg-bars { width: 100%; border-collapse: collapse; }
.dg-bars th, .dg-bars td { padding: 7px 0; border-bottom: 1px solid var(--tint); vertical-align: middle; text-align: start; }
.dg-bars tbody tr:hover { background: var(--surface); }
.dg-bars th[scope="row"] { width: 7.5em; font-weight: 600; font-size: .92rem; white-space: nowrap; direction: ltr; text-align: start; }
html[dir="rtl"] .dg-bars th[scope="row"] { text-align: right; }
.dg-bars sup { color: var(--muted); }
.dg-val { display: flex; align-items: center; gap: 10px; padding-inline-end: 12px !important; }
.dg-bar { display: block; height: 14px; inline-size: var(--w); min-inline-size: 4px; background: var(--accent); border-start-end-radius: 4px; border-end-end-radius: 4px; }
.dg-num { font-size: .86rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dg-pct { width: 4.5em; font-size: .84rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dg-note, .dg-src { font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
.dg-src a { color: var(--ink-2); }
.dg-facts li { color: var(--ink-2); }
.lib-data-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--white); }
.lib-data-card strong { font-family: var(--f-display); font-size: 1.25rem; }
.lib-data-card p { margin: 4px 0 0; color: var(--ink-2); }
@media (max-width: 700px) { .lib-data-card { grid-template-columns: 1fr; } }

/* Home: courses, paths and data under the featured tools */
.lr-more { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.lr-more a { background: var(--surface); }
@media (max-width: 1000px) { .lr-more { grid-template-columns: minmax(0, 1fr); } }

/* "Learn on your own" block (training page, tools index) */
.self-learn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--white); }
.self-learn .h3 { margin: 0 0 6px; }
.self-learn p { margin: 0; color: var(--ink-2); }
.self-learn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (max-width: 860px) { .self-learn { grid-template-columns: 1fr; } }

/* Ad Copy Builder (prefix acb-) */
.acb-intro { margin: 0; color: var(--ink-2); max-width: 62ch; }
.acb-tip { margin: 0 0 12px; padding: 10px 14px; background: var(--tint); border-radius: var(--radius); font-size: .95rem; color: var(--ink-2); }
.acb-arabic { margin: 0 0 8px; }
.acb-arabic p { margin: 8px 0 0; }

/* Drafts */
.acb-draft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 12px; }
.acb-draft { display: flex; flex-direction: column; gap: 8px; }
.acb-draft .tk-card-t { font-size: 1.05rem; margin: 0; }
.acb-draft .btn { align-self: flex-start; min-height: 44px; margin-top: auto; }
.acb-pre { margin: 0; font-family: var(--f-body); font-size: .92rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); background: var(--tint); border-radius: var(--radius); padding: 10px 12px; }
.acb-lang-t { font-family: var(--f-display); font-weight: 600; font-size: 1rem; margin: 14px 0 8px; }

/* Editor */
.acb-editor { display: grid; gap: 18px; }
.acb-plat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); padding: clamp(16px, 3vw, 26px); }
.acb-plat-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.acb-plat-head h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; margin: 0; }
.acb-plat-head p { margin: 2px 0 0; font-size: .9rem; }
.acb-plat-head .btn { min-height: 44px; }
.acb-lang + .acb-lang { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.acb-field { margin-bottom: 14px; }
.acb-field input, .acb-field textarea { width: 100%; }
.acb-meter { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; font-size: .85rem; color: var(--ink-2); }
.acb-n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.acb-lim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.acb-lim-t { color: var(--muted); }
.acb-src { font-size: .8rem; }
.acb-add { min-height: 44px; margin: -4px 0 14px; }
.acb-add[hidden] { display: none; }
.acb-note { margin: -6px 0 14px; font-size: .85rem; color: var(--muted); }
.acb-checks { margin-top: 6px; padding: 12px 14px; background: var(--tint); border-radius: var(--radius); }
.acb-checks-t { margin: 0 0 8px; font-weight: 700; font-size: .9rem; }
.acb-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acb-checks li { font-size: .92rem; line-height: 1.6; }
.acb-checks li > span:not(.tk-badge) { overflow-wrap: anywhere; }
.acb-pol-inline { display: block; margin-top: 4px; font-size: .82rem; }
[data-acb-copy].done, .acb-draft .btn.done { background: #1F5A33; border-color: #1F5A33; color: #fff; }

/* Limits and sources (static, below the tool) */
.acb-sources { margin-top: 24px; }
.acb-sources p { margin: 10px 0 0; }
.acb-src-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .88rem; }
.acb-src-table th, .acb-src-table td { text-align: start; vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.acb-src-table thead th { font-size: .8rem; color: var(--muted); }
.acb-src-table a { overflow-wrap: anywhere; }
.acb-lim { display: block; white-space: nowrap; }
.acb-lim small { color: var(--muted); }
.acb-pol { margin: 6px 0 0; padding-inline-start: 1.2em; }
@media (max-width: 720px) {
  .acb-src-table, .acb-src-table tbody, .acb-src-table tr, .acb-src-table td { display: block; width: 100%; }
  .acb-src-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .acb-src-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .acb-src-table td { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: 8px; border: 0; padding: 3px 0; }
  .acb-src-table td::before { content: attr(data-l); font-weight: 600; font-size: .8rem; color: var(--muted); }
  .acb-lim { white-space: normal; }
}

/* Print: a clean list of the copy instead of the editor */
.acb-print { display: none; }
.acb-print-dl { margin: 6px 0 12px; display: grid; gap: 8px; }
.acb-print-dl > div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 4px 12px; }
.acb-print-dl dt { font-weight: 600; font-size: .9rem; }
.acb-print-dl dd { margin: 0; white-space: pre-wrap; }
.acb-print-dl small { display: block; color: #555; font-size: .8rem; }
@media print {
  body.tk-printing .acb-print, .acb-print { display: block; }
  .acb-editor, .acb-drafts, .acb-tip, .acb-arabic, .acb-sources, [data-tk="ad-copy-builder"] .tk-sub, [data-tk="ad-copy-builder"] .tk-result-head { display: none !important; }
}

/* Advertising Plan Builder (prefix apb-) */
.apb-note { margin: 0 0 22px; padding: 10px 12px 10px 16px; background: var(--tint); border-radius: var(--radius); font-size: .95rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; }
.apb-note .btn { min-height: 44px; }
.apb-doc-head { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--ink); }
.apb-doc-kicker { margin: 0 0 6px; font-family: var(--f-display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; color: var(--accent-ink); }
html[lang="ar"] .apb-doc-kicker { letter-spacing: 0; font-size: 1rem; }
.apb-doc h2 { overflow-wrap: anywhere; }
.apb-doc-head .muted { margin: 4px 0 0; }
.apb-sec { padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.apb-sec:last-child { border-bottom: 0; }
.apb-sec p { margin: 0 0 6px; overflow-wrap: anywhere; }
.apb-rows { margin: 0; display: grid; gap: 8px; }
.apb-rows > div { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 2px 14px; }
.apb-rows dt { font-weight: 600; font-size: .9rem; color: var(--muted); }
.apb-rows dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .apb-rows > div { grid-template-columns: 1fr; } }
.apb-callout { margin-top: 10px !important; padding: 10px 14px; background: var(--tint); border-radius: var(--radius); font-size: .95rem; color: var(--ink-2); }
.apb-count { display: block; margin-top: 2px; font-size: .88rem; font-weight: 600; color: var(--accent-ink); }
.apb-list { margin: 4px 0 0; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.apb-list li { white-space: normal; }

/* Budget table: a real table on wide screens, stacked label/value rows on phones */
.apb-est { margin: 4px 0 6px; }
.apb-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0 0 12px; }
.apb-table th, .apb-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.apb-table thead th { font-size: .8rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--ink); }
.apb-table tbody th { font-weight: 400; min-width: 10em; }
.apb-table tbody th strong { display: block; font-family: var(--f-display); font-weight: 600; }
.apb-why { display: block; font-size: .82rem; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.apb-weak { display: block; margin-top: 6px; }
.apb-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.apb-reach { display: block; white-space: nowrap; }
.apb-reach + .apb-reach { margin-top: 4px; }
.apb-reach b { display: block; font-weight: 600; font-size: .82rem; }
.apb-reach small { display: block; font-size: .78rem; color: var(--muted); }
@media (max-width: 720px) {
  .apb-table, .apb-table tbody, .apb-table tr, .apb-table th, .apb-table td { display: block; width: 100%; }
  .apb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .apb-table tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 14px; margin-bottom: 10px; }
  .apb-table tbody th { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .apb-table td { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
  .apb-table td:last-child { border-bottom: 0; }
  .apb-table td::before { content: attr(data-l); font-size: .82rem; font-weight: 600; color: var(--muted); white-space: normal; }
  .apb-reach { white-space: normal; }
}
.apb-later-t { margin-top: 8px !important; }
.apb-later { margin: 0 0 12px; padding-inline-start: 1.2em; }
.apb-source { font-size: .88rem; color: var(--ink-2); padding: 10px 14px; border-inline-start: 3px solid var(--accent); background: var(--tint); border-radius: 0 var(--radius) var(--radius) 0; }
html[dir="rtl"] .apb-source { border-radius: var(--radius) 0 0 var(--radius); }
.apb-source ul { margin: 4px 0 0; padding-inline-start: 1.2em; }
.apb-source a { overflow-wrap: anywhere; }
.apb-assume-h { margin-top: 10px !important; }
.apb-doc .tk-assume ul { margin: 6px 0 0; padding-inline-start: 1.2em; display: grid; gap: 4px; }

/* Checklists that print as boxes to tick */
.apb-checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.apb-checks li { display: flex; gap: 10px; align-items: flex-start; white-space: normal; }
.apb-box { flex: none; width: 16px; height: 16px; margin-top: .3em; border: 1.5px solid var(--ink-2); border-radius: 3px; }

.apb-gaps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.apb-gaps li { padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); white-space: normal; }
.apb-gaps strong { font-weight: 600; margin-inline-start: 6px; }
.apb-gaps p { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; }

.apb-prompt { margin: 8px 0 10px; padding: 14px 16px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--f-body); font-size: .9rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22em; overflow: auto; }
.apb-prompt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-apb-copyprompt] { min-height: 44px; }
[data-apb-copyprompt].done { background: #1F5A33; border-color: #1F5A33; color: #fff; }

@media print {
  body.tk-printing .apb-sec { break-inside: auto; }
  body.tk-printing .apb-table tr, body.tk-printing .apb-gaps li { break-inside: avoid; }
  body.tk-printing .apb-prompt { max-height: none; overflow: visible; }
  body.tk-printing [data-apb-copyprompt] { display: none; }
  body.tk-printing .tk-assume { display: block; }
  body.tk-printing .apb-doc-head { border-bottom-color: #000; }
}

/* AI marketing readiness (amr-) */
.amr-level-h { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--accent-ink); margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.tk-step-intro + .amr-level-h { margin-top: 8px; padding-top: 0; border-top: 0; }
.amr-qs .tk-choices { margin-bottom: 26px; }
.amr-qs .tk-choices legend { line-height: 1.55; }
.amr-qs .tk-choices .hint { margin: -4px 0 10px; line-height: 1.6; }
.amr-qs .tk-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.amr-qs .tk-option { min-height: 46px; padding: 8px 12px; }
@media (max-width: 600px) { .amr-qs .tk-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Result */
.amr-meta { margin: 0 0 12px; color: var(--ink-2); font-weight: 500; }
.amr-sec { margin-top: 32px; }
.amr-sec-intro { margin: -6px 0 12px; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.amr-note { margin: 12px 0 0; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.7; }
.amr-tag { font-size: .82rem; color: var(--muted); font-weight: 500; }
.amr-sub-how { margin-top: 24px; }

/* Track map: stage in words + symbol; the bar only repeats it visually */
.amr-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.amr-row { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); padding: 16px 20px; }
.amr-row-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.amr-track { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; margin: 0; }
.amr-stage { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--ink-2); color: var(--ink); background: #fff; }
.amr-sym { font-size: 1.05rem; line-height: 1; font-family: var(--f-body); }
.amr-stage[data-stage="0"] { border-style: dashed; color: var(--ink-2); }
.amr-stage[data-stage="1"] { background: #FFF4DE; border-color: #D9A94A; color: #6B4100; }
.amr-stage[data-stage="2"] { background: #EEF2FE; border-color: #9FB4F5; color: var(--accent-ink); }
.amr-stage[data-stage="3"] { background: #E6F2E9; border-color: #8CC19E; color: #1F5A33; }
.amr-bar { display: flex; gap: 4px; margin: 12px 0 8px; }
.amr-bar i { display: block; flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--tint); border: 1px solid var(--line); }
.amr-bar i.on { background: var(--ink-2); border-color: var(--ink-2); }
.amr-row-c { margin: 0; font-size: .88rem; color: var(--muted); font-weight: 600; }
.amr-row-d { margin: 4px 0 0; color: var(--ink-2); line-height: 1.65; }
.amr-row-n { margin: 10px 0 0; line-height: 1.7; color: var(--ink-2); }
.amr-legend ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.amr-legend li { line-height: 1.7; }
.amr-legend .amr-stage { margin-inline-end: 6px; }

.amr-next { margin: 0; padding-inline-start: 1.4em; display: grid; gap: 12px; }
.amr-next > li { padding: 14px 16px; background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius); line-height: 1.7; color: var(--ink-2); }
.amr-next > li::marker { font-weight: 700; color: var(--ink); }
.amr-next p { margin: 0; }
.amr-next .amr-next-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; color: var(--ink); }
.amr-next strong { color: var(--ink); }

.amr-later, .amr-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.amr-later li, .amr-check li { background: var(--white); border: 1px solid var(--line); border-inline-start: 4px solid var(--ink-2); border-radius: var(--radius); padding: 12px 16px; }
.amr-check li { border-inline-start-color: var(--accent); }
.amr-later p, .amr-check p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.7; }

.amr-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .amr-weeks { grid-template-columns: 1fr; } }
.amr-week { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); padding: 16px 20px; }
.amr-week-h { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; }
.amr-week-h span { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--accent-ink); margin-inline-end: 6px; }
.amr-week ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; color: var(--ink-2); line-height: 1.65; }

@media print {
  body.tk-printing .amr-row, body.tk-printing .amr-week, body.tk-printing .amr-next > li, body.tk-printing .amr-later li { break-inside: avoid; border-color: #999; }
  body.tk-printing .amr-bar i.on { background: #333; }
  body.tk-printing .amr-legend { display: none; }
}

/* AI search visibility check (asv-) */
.asv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 640px) { .asv-grid { grid-template-columns: 1fr; } }
.asv-group-h { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--accent-ink); margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.tk-step-intro + .asv-group-h { margin-top: 8px; padding-top: 0; border-top: 0; }
.asv-qs .tk-choices { margin-bottom: 26px; }
.asv-qs .tk-choices legend { line-height: 1.55; }
.asv-qs .tk-choices .hint { margin: -4px 0 10px; line-height: 1.6; }
.asv-qs .tk-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.asv-qs .tk-option { min-height: 46px; padding: 8px 12px; }
@media (max-width: 600px) { .asv-qs .tk-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Crawler reference (in the crawl step and in the result) */
.asv-crawl { margin: 0 0 22px; }
.asv-crawl p { margin: 10px 0 0; }
.asv-crawl-list { margin: 12px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.asv-crawl-list > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.asv-crawl-list dt { font-weight: 600; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.asv-crawl-list code { font-size: .92rem; background: var(--tint); padding: 1px 6px; border-radius: 4px; }
.asv-crawl-list dd { margin: 4px 0 0; line-height: 1.65; overflow-wrap: anywhere; }
.asv-crawl-list a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; }
.asv-org { font-size: .82rem; color: var(--muted); font-weight: 500; }

/* Result */
.asv-meta { margin: 0 0 12px; color: var(--ink-2); font-weight: 500; }
.asv-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.asv-note { margin: 0 0 14px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.7; }
.asv-stop { border-color: #F0B8B2; background: #FFF8F7; }
.asv-sec { margin-top: 32px; }
.asv-sec-intro { margin: -6px 0 12px; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.asv-n { font-weight: 500; color: var(--muted); font-size: .95rem; }
.asv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.asv-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.asv-item p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.7; overflow-wrap: anywhere; }
.asv-item .asv-item-h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink); }
.asv-item-h strong { font-weight: 600; }
.asv-area { font-size: .82rem; color: var(--muted); font-weight: 500; }
.asv-ans { font-size: .88rem; }
.asv-ok { padding: 10px 16px; }
.asv-sec[data-tier="critical"] .asv-item { border-inline-start: 4px solid #B3261E; }
.asv-sec[data-tier="high"] .asv-item { border-inline-start: 4px solid #B7791F; }

.asv-next-list, .asv-qlist { margin: 0; padding-inline-start: 1.6em; display: grid; gap: 12px; }
.asv-next-list li { padding: 14px 16px; background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius); line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.asv-next-list li::marker, .asv-qlist li::marker { font-weight: 700; color: var(--ink); }
.asv-next-list strong { color: var(--ink); }
.asv-qlist { gap: 8px; }
.asv-qlist li { padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.65; overflow-wrap: anywhere; }
.asv-q { display: block; font-weight: 600; color: var(--ink); }
.asv-q[dir="ltr"] { text-align: left; }
.asv-q[dir="rtl"] { text-align: right; }
.asv-log { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); direction: ltr; text-align: start; unicode-bidi: plaintext; }

.asv-areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.asv-areas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.asv-area-name { font-weight: 600; }
.asv-area-c { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }

.asv-file { margin: 0; padding: 16px 18px; background: var(--graphite, #1d2025); color: var(--on-dark, #fff); border-radius: var(--radius); font-size: .86rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; text-align: left; }
.asv-file:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asv-file-act { margin: 10px 0 0; }
.asv-file-act .btn.done { background: #1F5A33; border-color: #1F5A33; color: #fff; }

@media print {
  body.tk-printing .asv-item, body.tk-printing .asv-next-list li, body.tk-printing .asv-qlist li { break-inside: avoid; border-color: #999; }
  body.tk-printing .asv-file { background: #fff; color: #000; border: 1px solid #999; }
  body.tk-printing .asv-file-act { display: none; }
  body.tk-printing .asv-crawl { display: none; }
}

/* AI Use-Case Finder (ucf-): only what the shared kit does not cover */
.ucf-profile { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.ucf-profile span { font-size: .85rem; font-weight: 600; color: var(--ink-2); background: var(--tint); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; }
.ucf-intro { margin: -6px 0 16px; color: var(--ink-2); max-width: 64ch; }
.ucf-because { display: block; margin-top: 6px; font-size: .88rem; color: var(--muted); }
.ucf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }

/* Start here: the single first action stands out by position, border and label, not colour alone */
.ucf-start { margin-bottom: 8px; }
.ucf-start .tk-card { border: 2px solid var(--ink); border-inline-start-width: 6px; border-inline-start-color: var(--accent); }
.ucf-start .tk-card-k { font-size: .85rem; text-transform: none; }

/* Sensitive-data warning */
.ucf-warn { margin-top: 20px; }
.ucf-warn .tk-card { background: #FFFBF2; border-color: #F1D398; }
.ucf-warn .tk-card-k { color: #7A4A00; }
.ucf-list { margin: 10px 0 0; padding-inline-start: 1.2em; color: var(--ink); }
.ucf-list li { margin-bottom: 6px; line-height: 1.6; }

/* Not everything needs AI: kind shown in the kicker; a side rule helps scanning */
.ucf-other { display: flex; }
.ucf-other > .tk-card { flex: 1; border-inline-start-width: 4px; }
.ucf-other[data-kind="auto"] > .tk-card { border-inline-start-color: #8FA3C8; }
.ucf-other[data-kind="process"] > .tk-card { border-inline-start-color: #D4A64A; }
.ucf-other[data-kind="human"] > .tk-card { border-inline-start-color: #B3261E; }
.ucf-how { margin-top: 28px; }
.ucf-how p { margin: 10px 0 0; }

@media print {
  body.tk-printing .ucf-start .tk-card, body.tk-printing .ucf-warn .tk-card { background: #fff; }
}

/* Two-column cards are narrow: stack label above value */
.ucf-others .tk-dl > div { grid-template-columns: 1fr; gap: 2px; }

/* Arabic Font Previewer (prefix afp-) */
[data-tk="arabic-font-previewer"] { max-width: 1240px; }
.afp-form { padding: clamp(18px, 3vw, 30px); }
.afp-controls-l { margin: 0 0 14px; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.afp-texts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 18px; }
@media (max-width: 760px) { .afp-texts { grid-template-columns: minmax(0, 1fr); } }
.afp-texts textarea { min-height: 72px; }
.afp-texts input[dir="ltr"] { text-align: left; }
.afp-knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px 20px; align-items: end; padding-top: 6px; }
.afp-knobs .field { margin: 0; }
.afp-range label { display: flex; justify-content: space-between; gap: 8px; }
.afp-range output { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.afp-range input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--accent); margin: 0; }
.afp-weight select { min-height: 44px; }

.afp-chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.afp-chips legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 6px; }
.afp-form > .afp-chips { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.afp-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.afp-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 600; font-size: .92rem; }
.afp-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.afp-chip:hover { border-color: #AEB6C2; }
.afp-chip:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.afp-chip:has(input:checked) span::before { content: '✓ '; }
.afp-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.afp-count { margin: 18px 0 12px; font-weight: 600; color: var(--ink-2); min-height: 1.5em; }
.afp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.afp-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2.5vw, 22px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); min-width: 0; }
.afp-card[hidden] { display: none; }
.afp-card-h { display: flex; flex-direction: column; gap: 6px; }
.afp-name { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; text-align: left; }
html[dir="rtl"] .afp-name { text-align: right; }
.afp-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; font-size: .86rem; }
.afp-tag { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; }
.afp-k { font-weight: 600; color: var(--muted); }
.afp-stage { padding: 18px 16px; background: var(--surface); border-radius: var(--radius); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.afp-grid[data-bg="dark"] .afp-stage { background: var(--graphite); color: var(--on-dark); }
.afp-sample { margin: 0; white-space: pre-wrap; text-align: right; }
.afp-latin { margin: 10px 0 0; text-align: left; opacity: .9; white-space: pre-wrap; }
.afp-small { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.afp-grid[data-bg="dark"] .afp-small { border-top-color: #3A4049; }
.afp-small-k { font-family: var(--f-body); font-size: .75rem; font-weight: 600; opacity: .75; }
.afp-small-t { font-size: 13px; line-height: 1.6; text-align: right; }
.afp-status, .afp-wnote { margin: 0; font-size: .86rem; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
.afp-status-i { display: inline-grid; place-items: center; min-width: 1.3em; font-weight: 700; }
.afp-status[data-state="ready"] .afp-status-i { color: #1F5A33; }
.afp-status[data-state="error"] { color: #8C1D18; }
.afp-wnote { color: #7A4A00; }
.afp-wnote::before { content: '!'; font-weight: 700; min-width: 1.3em; text-align: center; }
.afp-wnote[hidden] { display: none; }
.afp-note { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.7; }
.afp-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: .9rem; }
.afp-dl > div { display: contents; }
.afp-dl dt { font-weight: 600; color: var(--muted); }
.afp-dl dd { margin: 0; text-align: start; }
html[dir="rtl"] .afp-dl dd { text-align: right; }
.afp-css summary { cursor: pointer; font-weight: 600; font-size: .9rem; min-height: 44px; display: flex; align-items: center; }
.afp-css pre { margin: 4px 0 0; padding: 12px; background: var(--graphite); color: var(--on-dark); border-radius: var(--radius); overflow-x: auto; font-size: .78rem; line-height: 1.55; text-align: left; white-space: pre; }
.afp-css code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.afp-card-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: auto; }
.afp-card-a .btn.done { background: #1F5A33; border-color: #1F5A33; color: #fff; }
.afp-spec { font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }

.afp-tip { margin-top: 24px; padding: 18px 20px; background: #FFF8EA; border: 1px solid #F1D398; border-radius: var(--radius-media); }
.afp-tip-t { margin: 0 0 6px; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.afp-tip p { margin: 0 0 8px; color: var(--ink-2); max-width: 80ch; }
.afp-tip-l { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 0 !important; }
.afp-tip-l .text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .afp-chip { transition: none; } }
.afp-css summary { list-style: none; gap: 8px; }
.afp-css summary::-webkit-details-marker { display: none; }
.afp-css summary::before { content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 50%; font-weight: 700; line-height: 1; flex: none; }
.afp-css[open] summary::before { content: '−'; }

/* Automation Opportunity Calculator (aoc-) */
.aoc-freq, .aoc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
.aoc-freq { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 560px) { .aoc-freq, .aoc-pair { grid-template-columns: 1fr; } }
.aoc-summary { font-size: 1.08rem; line-height: 1.75; color: var(--ink-2); max-width: 68ch; margin: 0; }
.aoc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 6px; }
.aoc-stake { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--muted); }
.aoc-cards { margin-top: 20px; }
.aoc-cards .tk-dl dd p { margin: 0; color: var(--ink); }
.aoc-extras { margin: 8px 0 0; padding-inline-start: 1.2em; color: var(--ink-2); }
.aoc-extras li { margin-bottom: 4px; }
[data-tk="automation-opportunity-calculator"] .tk-assume ul { margin: 10px 0 0; padding-inline-start: 1.2em; }
[data-tk="automation-opportunity-calculator"] .tk-assume li { margin-bottom: 6px; }
[data-tk="automation-opportunity-calculator"] .tk-actions .btn { min-height: 44px; }

/* Brand Positioning Builder (prefix bpb-) */
.bpb-note { margin: 0 0 22px; padding: 12px 16px; background: #FFF8E8; border: 1px solid #F1D398; border-inline-start: 4px solid #B7791F; border-radius: var(--radius); font-size: .95rem; color: var(--ink-2); }
.bpb-pillar { margin: 0 0 18px; padding: 16px 16px 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.bpb-pillar-t { margin: 0 0 12px; font-family: var(--f-display); font-weight: 700; font-size: 1rem; }
.bpb-pillar .field select { width: 100%; }
.bpb-doc-head { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--ink); }
.bpb-doc-kicker { margin: 0 0 6px; font-family: var(--f-display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; color: var(--accent-ink); }
html[lang="ar"] .bpb-doc-kicker { letter-spacing: 0; font-size: 1rem; }
.bpb-doc h2 { overflow-wrap: anywhere; }
.bpb-doc-head .muted { margin: 4px 0 0; overflow-wrap: anywhere; }
.bpb-sec { padding: 4px 0 12px; border-bottom: 1px solid var(--line); break-inside: avoid; }
.bpb-sec:last-child { border-bottom: 0; }
.bpb-sec p { margin: 0 0 6px; overflow-wrap: anywhere; }
.bpb-key { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; line-height: 1.75; }
.bpb-slot { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.bpb-value { font-weight: 600; }
.bpb-lead { font-weight: 600; }
.bpb-pillars { margin: 4px 0 0; padding-inline-start: 1.3em; display: grid; gap: 12px; }
.bpb-pillars li { white-space: normal; overflow-wrap: anywhere; }
.bpb-pillars strong { font-weight: 600; margin-inline-end: 6px; }
.bpb-list { margin: 4px 0 10px; padding-inline-start: 1.2em; }
.bpb-rows { margin: 8px 0 0; display: grid; gap: 6px; }
.bpb-rows > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 2px 14px; }
.bpb-rows dt { font-weight: 600; font-size: .9rem; color: var(--muted); }
.bpb-rows dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 560px) { .bpb-rows > div { grid-template-columns: 1fr; } }
.bpb-voice { width: 100%; border-collapse: collapse; margin: 6px 0 4px; table-layout: fixed; font-size: .95rem; }
.bpb-voice th, .bpb-voice td { text-align: start; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bpb-voice th { font-size: .85rem; color: var(--muted); font-weight: 700; }
.bpb-voice td:last-child { color: var(--ink-2); }
.bpb-ai { margin-top: 28px; padding: clamp(18px, 3vw, 26px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); }
.bpb-ai-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bpb-ai-head .tk-sub { margin: 0; }
.bpb-ai .btn.done { background: #1F5A33; border-color: #1F5A33; color: #fff; }
.bpb-ai-text { margin: 10px 0 0; padding: 14px 16px; background: var(--tint); border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--f-body); font-size: .92rem; line-height: 1.8; max-width: 100%; }
.bpb-gaps { margin-top: 28px; }
.bpb-gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bpb-gap-list li { padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.bpb-gap-list strong { display: inline; font-weight: 600; margin-inline-start: 6px; }
.bpb-gap-list p { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; overflow-wrap: anywhere; }
[data-tk="brand-positioning-builder"] .tk-actions .btn { min-height: 44px; }
@media print {
  body.tk-printing .bpb-ai-head .btn { display: none !important; }
  body.tk-printing .bpb-ai, body.tk-printing .bpb-gap-list li { break-inside: avoid; border-color: #999; }
  body.tk-printing .bpb-doc-head { border-bottom-color: #000; }
}

/* Buyer Persona Builder (prefix bpr-) */
[data-bpr-for][hidden] { display: none; }
.bpr-doc-head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid var(--ink); }
.bpr-doc-kicker { margin: 0 0 6px; font-family: var(--f-display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; color: var(--accent-ink); }
html[lang="ar"] .bpr-doc-kicker { letter-spacing: 0; font-size: 1rem; }
.bpr-doc h2 { overflow-wrap: anywhere; }
.bpr-summary { margin: 6px 0 10px; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; line-height: 1.6; overflow-wrap: anywhere; }
.bpr-date { margin: 10px 0 0; }
.bpr-assume { margin: 0 0 12px; padding: 12px 16px; background: #EEF2FE; border: 1px solid #C9D6FF; border-radius: var(--radius); color: var(--ink); font-size: .95rem; }
.bpr-assume-k { margin-inline-end: 4px; }
.bpr-sec { padding: 4px 0 12px; border-bottom: 1px solid var(--line); break-inside: avoid; min-width: 0; }
.bpr-sec:last-child { border-bottom: 0; }
.bpr-sec p { margin: 0 0 6px; overflow-wrap: anywhere; }
.bpr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.bpr-two > .bpr-sec { border-bottom: 1px solid var(--line); }
@media (max-width: 720px) { .bpr-two { grid-template-columns: 1fr; } }
.bpr-list { margin: 4px 0 8px; padding-inline-start: 1.2em; }
.bpr-list li { white-space: normal; overflow-wrap: anywhere; margin-bottom: 4px; }
.bpr-rows { margin: 8px 0 0; display: grid; gap: 6px; }
.bpr-rows > div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 2px 14px; }
.bpr-rows dt { font-weight: 600; font-size: .9rem; color: var(--muted); }
.bpr-rows dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bpr-more { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
@media (max-width: 560px) { .bpr-rows > div { grid-template-columns: 1fr; } }
.bpr-lead { margin: 8px 0 4px; }
.bpr-table { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: .95rem; }
.bpr-table th, .bpr-table td { text-align: start; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bpr-table thead th { font-size: .85rem; color: var(--muted); font-weight: 700; }
.bpr-table tbody th { font-weight: 600; width: 26%; }
.bpr-table td:last-child { color: var(--ink-2); }
@media (max-width: 640px) {
  .bpr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bpr-table, .bpr-table tbody, .bpr-table tr, .bpr-table th, .bpr-table td { display: block; width: auto; }
  .bpr-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .bpr-table tbody th, .bpr-table td { border: 0; padding: 4px 0; width: auto; }
  .bpr-table td::before { content: attr(data-l); display: block; font-size: .8rem; font-weight: 700; color: var(--muted); }
}
.bpr-stage { margin: 8px 0 10px; }
.bpr-stage-t { display: flex; align-items: baseline; gap: 10px; font-weight: 600; margin: 10px 0 4px; }
.bpr-num { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: .85rem; font-weight: 700; }
.bpr-q { margin: 6px 0 0; padding-inline-start: 1.4em; }
.bpr-q li { margin-bottom: 6px; white-space: normal; }
.bpr-gaps { margin-top: 28px; }
.bpr-gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bpr-gap-list li { padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.bpr-gap-list strong { display: inline; font-weight: 600; margin-inline-start: 6px; }
.bpr-gap-list p { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; overflow-wrap: anywhere; }
[data-tk="buyer-persona-builder"] .tk-actions .btn { min-height: 44px; }
@media print {
  body.tk-printing .bpr-gap-list li, body.tk-printing .bpr-table tr { break-inside: avoid; border-color: #999; }
  body.tk-printing .bpr-doc-head { border-bottom-color: #000; }
  body.tk-printing .bpr-assume { background: #fff; border-color: #999; }
}

/* Content Ideas Generator (prefix cig-) */
.cig-meta { margin: 0; display: grid; gap: 6px; }
.cig-meta > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 2px 14px; }
.cig-meta dt { font-weight: 600; font-size: .9rem; color: var(--muted); }
.cig-meta dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .cig-meta > div { grid-template-columns: 1fr; } }
.cig-honesty, .cig-season-note { margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius); line-height: 1.7; }
.cig-honesty { background: #FFF8EA; border: 1px solid #F1D398; }
.cig-season-note { background: #EEF2FE; border: 1px solid #C9D6FF; }

.cig-controls { margin: 20px 0 8px; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); }
.cig-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px 14px; align-items: end; }
.cig-filter { margin: 0; }
.cig-filter label { font-size: .85rem; }
.cig-filter select { min-height: 44px; }
.cig-favonly { min-height: 44px; }
.cig-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cig-btns .btn[disabled] { opacity: .55; cursor: not-allowed; }
.cig-btns .btn.done { background: #1F5A33; border-color: #1F5A33; color: #fff; }
.cig-status { margin: 8px 0 14px; font-size: .92rem; font-weight: 600; color: var(--ink-2); min-height: 1.5em; }
.cig-empty { padding: 16px; background: var(--tint); border-radius: var(--radius); }

.cig-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cig-idea { padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); break-inside: avoid; }
.cig-idea.is-fav { border-color: var(--ink); border-inline-start: 5px solid var(--accent); }
.cig-idea-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; }
.cig-num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 50%; background: var(--tint); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.cig-title { margin: 2px 0 0; font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; line-height: 1.5; overflow-wrap: anywhere; }
.cig-fav { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cig-fav:hover { border-color: #AEB6C2; }
.cig-fav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cig-fav[aria-pressed="true"] { border-color: var(--ink); background: #EEF2FE; }
.cig-fav [aria-hidden] { font-size: 1.05rem; color: var(--accent-ink); }
@media (max-width: 520px) {
  .cig-idea-top { grid-template-columns: auto minmax(0, 1fr); }
  .cig-fav { grid-column: 1 / -1; justify-self: start; }
}
.cig-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; font-size: .88rem; }
.cig-tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; color: var(--ink-2); }
.cig-st { border-style: dashed; }
.cig-season { background: #EEF2FE; border-color: #C9D6FF; color: var(--accent-ink); }
.cig-hook { margin: 10px 0 0; padding: 10px 12px; background: var(--surface); border-radius: var(--radius); line-height: 1.7; }
.cig-hook-l { display: block; font-size: .78rem; font-weight: 700; color: var(--accent-ink); letter-spacing: .02em; }
.cig-hook-t { overflow-wrap: anywhere; }
.cig-note { margin: 10px 0 0; font-size: .9rem; color: var(--ink-2); line-height: 1.7; }

@media print {
  body.tk-printing .cig-controls, body.tk-printing .cig-status, body.tk-printing .cig-fav { display: none !important; }
  body.tk-printing .cig-idea { border-color: #999; }
}
@media (prefers-reduced-motion: reduce) { .cig-fav { transition: none; } }

/* Content Repurposing Planner (prefix crp-) */
.crp-meta { margin: 0; display: grid; gap: 6px; }
.crp-meta > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 2px 14px; }
.crp-meta dt { font-weight: 600; font-size: .9rem; color: var(--muted); }
.crp-meta dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .crp-meta > div { grid-template-columns: 1fr; } }
.crp-warn { margin: 0 0 18px; padding: 12px 16px; background: #FFF8EA; border: 1px solid #F1D398; border-radius: var(--radius); }
.crp-map { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.crp-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.crp-pieces > li + li { padding-top: 16px; border-top: 1px dashed var(--line); }
.crp-fmt { margin: 0 0 2px !important; font-family: var(--f-display); font-weight: 600; color: var(--ink) !important; }
.crp-pieces .tk-dl > div { grid-template-columns: minmax(0, 8em) minmax(0, 1fr); }
@media (max-width: 520px) { .crp-pieces .tk-dl > div { grid-template-columns: 1fr; } }
.crp-note { margin: 10px 0 0 !important; font-size: .9rem; }
.crp-intro { margin: -6px 0 14px; font-size: .95rem; max-width: 70ch; }
.crp-days { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--white); overflow: hidden; }
.crp-days > li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); break-inside: avoid; }
.crp-days > li:last-child { border-bottom: 0; }
.crp-day-orig { background: #EEF2FE; }
.crp-day { font-weight: 700; font-size: .9rem; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.crp-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crp-what strong { font-weight: 600; }
.crp-what span { color: var(--ink-2); font-size: .93rem; }
@media (max-width: 560px) { .crp-days > li { grid-template-columns: 1fr; } }
.crp-later, .crp-dont { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; }
.crp-later li, .crp-dont li { color: var(--ink-2); }
.crp-dont li::marker { content: '✕  '; color: #8C1D18; font-weight: 700; }
[data-tk="content-repurposing-planner"] .tk-actions .btn { min-height: 44px; }
@media print {
  body.tk-printing .crp-days, body.tk-printing .crp-warn { border-color: #999; }
  body.tk-printing .crp-pf { break-inside: auto; }
}

/* Email Signature Generator (prefix esg-) */
[data-tk="email-signature-generator"] { max-width: 1160px; }
.esg-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) {
  .esg-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .esg-out { position: sticky; top: 88px; }
}
.esg-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.esg-group + .esg-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.esg-group > legend, .esg-social > summary { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; padding: 0; margin: 0 0 12px; }
.esg-sub { margin: 4px 0 8px !important; padding: 14px 16px 2px !important; background: var(--tint); border-radius: var(--radius); }
.esg-sub[hidden] { display: none; }
.esg-sub > legend { float: left; width: 100%; font-weight: 600; font-size: .95rem; margin: 0 0 4px; padding: 0; }
html[dir="rtl"] .esg-sub > legend { float: right; }
.esg-sub > .hint { clear: both; margin-bottom: 10px; }
.esg-sub input { background: #fff; }
.esg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 620px) { .esg-grid { grid-template-columns: minmax(0, 1fr); } }
.esg-form input[dir="ltr"] { text-align: left; }
.esg-choices { margin-bottom: 16px; }
.esg-choices .tk-options { grid-template-columns: 1fr; }

.esg-social > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; }
.esg-social > summary::-webkit-details-marker { display: none; }
.esg-social > summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 50%; font-weight: 700; font-size: 1rem; line-height: 1; flex: none; }
.esg-social[open] > summary::before { content: '−'; }
.esg-social[open] > summary { margin-bottom: 6px; }
.esg-social > .hint { margin-bottom: 12px; }

.esg-color-row { display: flex; align-items: center; gap: 12px; }
.esg-color input[type="color"] { width: 64px; height: 44px; padding: 2px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; }
.esg-color input[type="color"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.esg-color code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .95rem; }
.esg-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.esg-swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.esg-swatch:hover { border-color: #AEB6C2; }
.esg-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.esg-swatch[aria-pressed="true"] { border-color: var(--ink); background: #EEF2FE; }
.esg-swatch[aria-pressed="true"]::after { content: '✓'; color: var(--accent-ink); }
.esg-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

.esg-out { padding: clamp(18px, 3vw, 26px); background: var(--graphite); color: var(--on-dark); border-radius: var(--radius-media); min-width: 0; }
.esg-out-l { margin: 0 0 10px; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--on-dark); }
.esg-example { margin: 0 0 10px; font-size: .88rem; color: var(--on-dark-muted); }
.esg-example[hidden] { display: none; }
.esg-canvas { background: #fff; color: #1F2328; border-radius: var(--radius); padding: 22px 20px; overflow-x: auto; }
.esg-preview { min-height: 90px; }
.esg-preview[data-example="true"] { opacity: .7; }
.esg-preview img { display: block; max-width: 80px; }
.esg-preview a { text-decoration: none; }
.esg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.esg-actions .btn { min-height: 48px; }
.esg-actions .btn-ghost { border-color: var(--on-dark-muted); color: var(--on-dark); }
.esg-actions .btn-ghost:hover { background: var(--on-dark); color: var(--ink); }
.esg-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }
.esg-actions .btn.done { background: #1F5A33; border-color: #1F5A33; color: #fff; }
.esg-status { margin: 12px 0 0; font-weight: 600; color: var(--on-dark); min-height: 1.5em; }
.esg-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.esg-notes li { padding: 10px 12px; background: var(--graphite-2); border-radius: var(--radius); color: var(--on-dark); font-size: .92rem; line-height: 1.6; }
.esg-notes li > span:last-child { overflow-wrap: anywhere; }
.esg-code { margin-top: 12px; }
.esg-code summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.esg-code textarea { width: 100%; margin-top: 6px; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .8rem; line-height: 1.5; text-align: left; background: #fff; color: var(--ink); }
.esg-local { margin: 12px 0 0; font-size: .85rem; color: var(--on-dark-muted); line-height: 1.6; }
.esg-local::before { content: '🔒 '; }

.esg-help { margin-top: 36px; }
.esg-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; align-items: start; }
.esg-how { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
.esg-how summary { cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; }
.esg-how[open] { padding-bottom: 12px; }
.esg-how ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px; color: var(--ink-2); font-size: .95rem; }
.esg-fonts-t { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; margin: 26px 0 6px; }
.esg-fonts { margin: 0; color: var(--ink-2); max-width: 75ch; }
.esg-code summary, .esg-how summary { list-style: none; gap: 8px; }
.esg-code summary::-webkit-details-marker, .esg-how summary::-webkit-details-marker { display: none; }
.esg-code summary::before, .esg-how summary::before { content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 700; line-height: 1; flex: none; }
.esg-code[open] summary::before, .esg-how[open] summary::before { content: '−'; }

/* Marketing Brief Builder (prefix mbb-) */
.mbb-note { margin: 0 0 22px; padding: 10px 12px 10px 16px; background: var(--tint); border-radius: var(--radius); font-size: .95rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; }
.mbb-note .mbb-guide { min-height: 44px; }
.mbb-doc-head { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--ink); }
.mbb-doc-kicker { margin: 0 0 6px; font-family: var(--f-display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; color: var(--accent-ink); }
html[lang="ar"] .mbb-doc-kicker { letter-spacing: 0; font-size: 1rem; }
.mbb-doc h2 { overflow-wrap: anywhere; }
.mbb-doc-head .muted { margin: 4px 0 0; }
.mbb-sec { padding: 4px 0 10px; border-bottom: 1px solid var(--line); break-inside: avoid; }
.mbb-sec:last-child { border-bottom: 0; }
.mbb-sec p { margin: 0 0 6px; overflow-wrap: anywhere; }
.mbb-key { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; line-height: 1.6; }
.mbb-rows { margin: 0; display: grid; gap: 6px; }
.mbb-rows > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 2px 14px; }
.mbb-rows dt { font-weight: 600; font-size: .9rem; color: var(--muted); }
.mbb-rows dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 560px) { .mbb-rows > div { grid-template-columns: 1fr; } }
.mbb-list { margin: 4px 0 8px; padding-inline-start: 1.2em; columns: 2 14em; column-gap: 28px; }
.mbb-list li { break-inside: avoid; white-space: normal; }
.mbb-gaps { margin-top: 28px; }
.mbb-gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mbb-gap-list li { padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.mbb-gap-list strong { display: inline; font-weight: 600; margin-inline-start: 6px; }
.mbb-gap-list p { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; }
[data-tk="marketing-brief-builder"] .tk-actions .btn { min-height: 44px; }
@media print {
  body.tk-printing .mbb-gap-list li { break-inside: avoid; border-color: #999; }
  body.tk-printing .mbb-doc-head { border-bottom-color: #000; }
}

/* Prompt Critic (pcr-) */
.tk[data-tk="prompt-critic"] { max-width: 1180px; }
.pcr-grid { display: grid; gap: 28px; }
@media (min-width: 980px) {
  .pcr-grid .pcr-in textarea { min-height: 300px; }
  .pcr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 36px; }
  .pcr-in { position: sticky; top: 96px; }
}
.pcr-in { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-media); padding: clamp(18px, 3vw, 28px); }
.pcr-in .field { margin-bottom: 12px; }
.pcr-in textarea { min-height: 180px; font-size: 1rem; line-height: 1.7; resize: vertical; unicode-bidi: plaintext; }
.pcr-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.pcr-bar .btn { min-height: 44px; }
.pcr-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }
.pcr-bar [hidden] { display: none; }
.pcr-status { margin: 12px 0 0; min-height: 1.5em; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.pcr-status:empty { margin: 0; min-height: 0; }
.pcr-disclaimer { margin: 12px 0 0; padding: 10px 12px; font-size: .85rem; line-height: 1.6; color: var(--ink-2); background: var(--tint); border-radius: var(--radius); }

.pcr-out .tk-sub { margin-top: 0; }
.pcr-about { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; color: var(--ink-2); }
.pcr-about strong { color: var(--ink); margin-inline-end: 4px; }
.pcr-summary { margin: 0 0 16px; font-weight: 600; }
.pcr-group { margin-bottom: 22px; }
.pcr-group-h { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; margin: 0 0 10px; }
.pcr-n { color: var(--muted); font-weight: 500; font-size: .92rem; }
.pcr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pcr-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pcr-item > p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.65; }
.pcr-item > .pcr-item-h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink); }
.pcr-item[data-state="strong"] { padding-block: 10px; }
.pcr-warn { border-color: #F1D398; background: #FFFBF2; }
.pcr-warn[data-warn="pii"] { border-color: #F0B8B2; background: #FFF8F7; }
.pcr-snip { margin: 10px 0 0 !important; padding: 10px 12px; background: var(--tint); border-radius: 8px; font-size: .9rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink) !important; }
.pcr-insert { margin-top: 10px; min-height: 44px; }
.pcr-structure { margin: 4px 0 18px; }
.pcr-rules { margin-top: 8px; }
.pcr-rules ul { margin: 10px 0 0; padding-inline-start: 1.2em; display: grid; gap: 8px; line-height: 1.6; }
[data-pcr-next]:empty { display: none; }

/* SOP Builder (sop-) */
.sop-live { min-height: 1.5em; margin: -6px 0 8px; }
.sop-live p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink-2); }

.sop-notes { display: grid; gap: 10px; margin-bottom: 18px; }
.sop-notes p { margin: 0; padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.7; color: var(--ink-2); }

.sop-doc { line-height: 1.75; }
.sop-doc h2 { overflow-wrap: anywhere; }
.sop-doc p, .sop-doc li { overflow-wrap: anywhere; }
.sop-kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink); }
.sop-version { margin: 0 0 8px; }
.sop-doc h3 + p { margin-top: 0; }
.sop-small { font-size: .92rem; color: var(--ink-2); margin: 4px 0 0; }
.sop-list, .sop-check, .sop-exc { margin: 4px 0 0; padding-inline-start: 1.3em; }
.sop-steps { margin: 4px 0 0; padding-inline-start: 1.6em; display: grid; gap: 6px; }
.sop-steps li::marker { font-weight: 700; }
.sop-flag { display: inline-block; margin-inline-start: 4px; }
.sop-check { list-style: none; padding-inline-start: 0; display: grid; gap: 6px; }
.sop-check li { position: relative; padding-inline-start: 1.8em; }
.sop-check li::before { content: '☐'; content: '☐' / ''; position: absolute; inset-inline-start: 0; top: 0; font-size: 1.1em; line-height: 1.6; }
.sop-exc { list-style: none; padding-inline-start: 0; display: grid; gap: 10px; }
.sop-exc li { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; }
.sop-exc li p { margin: 0; }
.sop-lbl { font-weight: 700; color: var(--ink); }
.sop-gap { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; color: var(--ink-2); }

@media print {
  body.tk-printing .sop-notes, body.tk-printing .sop-flag, body.tk-printing .sop-live { display: none !important; }
  body.tk-printing .sop-doc { border: 0; padding: 0; }
  body.tk-printing .sop-exc li { break-inside: avoid; border-color: #999; }
}

/* UTM Builder (prefix utm-) */
.utm-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.utm-form legend { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; padding: 0; margin: 0 0 8px; }
.utm-presets, .utm-params { margin-top: 26px !important; }
.utm-presets { margin-bottom: 22px !important; }
.utm-presets .hint { margin-bottom: 12px; }
.utm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 620px) { .utm-grid { grid-template-columns: minmax(0, 1fr); } }
.utm-form input[dir="ltr"] { text-align: left; font-variant-ligatures: none; }
.utm-form input[dir="ltr"]::placeholder { text-align: left; }

.utm-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.utm-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; text-align: start; font: inherit; color: var(--ink); transition: border-color var(--t), background var(--t); }
.utm-preset:hover { border-color: #AEB6C2; }
.utm-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.utm-preset-l { font-weight: 600; font-size: .93rem; line-height: 1.4; }
.utm-preset-v { font-size: .8rem; color: var(--muted); font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.utm-preset[aria-pressed="true"] { border-color: var(--ink); background: #EEF2FE; }
.utm-preset[aria-pressed="true"] .utm-preset-l::before { content: '✓ '; color: var(--accent-ink); }

.utm-helper { margin: -4px 0 22px; padding: 0 16px; background: var(--tint); border-radius: var(--radius); }
.utm-helper summary { cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; gap: 8px; list-style: none; }
.utm-helper summary::-webkit-details-marker { display: none; }
.utm-helper summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 50%; font-weight: 700; line-height: 1; flex: none; }
.utm-helper[open] summary::before { content: '−'; }
.utm-helper[open] { padding-bottom: 16px; }
.utm-helper > .hint { margin: 0 0 14px; }
.utm-helper input, .utm-helper select { background: #fff; }
.utm-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.utm-suggest-l { margin: 0; font-size: .85rem; font-weight: 600; color: var(--muted); flex-basis: 100%; }
.utm-suggest-v { flex: 1 1 220px; min-width: 0; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .95rem; word-break: break-all; }
.utm-suggest-v[data-empty="true"] { font-family: var(--f-body); color: var(--muted); word-break: normal; }
.utm-suggest .btn { min-height: 44px; }

.utm-out { margin-top: 20px; padding: clamp(18px, 3vw, 28px); background: var(--graphite); color: var(--on-dark); border-radius: var(--radius-media); }
.utm-out-l { margin: 0 0 10px; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--on-dark); }
.utm-url { padding: 14px 16px; background: #fff; color: var(--ink); border-radius: var(--radius); font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .95rem; line-height: 1.6; word-break: break-all; overflow-wrap: anywhere; user-select: all; min-height: 52px; }
.utm-url[data-empty="true"] { font-family: var(--f-body); color: var(--muted); user-select: text; word-break: normal; }
.utm-out-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.utm-out-actions .btn { min-height: 48px; }
.utm-out-actions .btn-ghost { border-color: var(--on-dark-muted); color: var(--on-dark); }
.utm-out-actions .btn-ghost:hover { background: var(--on-dark); color: var(--ink); }
.utm-out-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }
.utm-out-actions .btn.done { background: #1F5A33; border-color: #1F5A33; color: #fff; }
.utm-status { margin: 12px 0 0; font-weight: 600; color: var(--on-dark); min-height: 1.5em; }
.utm-notes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.utm-notes li { padding: 10px 12px; background: var(--graphite-2); border-radius: var(--radius); color: var(--on-dark); font-size: .93rem; line-height: 1.6; }
.utm-notes li > span:last-child { overflow-wrap: anywhere; }
.utm-local { margin: 14px 0 0; font-size: .85rem; color: var(--on-dark-muted); }
.utm-local::before { content: '🔒 '; }

.utm-table-wrap { margin-top: 32px; }
.utm-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.utm-table caption { text-align: start; margin: 0 0 12px; }
.utm-table th, .utm-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; font-size: .95rem; }
.utm-table thead th { font-size: .85rem; color: var(--muted); background: var(--tint); }
.utm-table tbody th { white-space: nowrap; font-weight: 600; }
.utm-table code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .88rem; overflow-wrap: anywhere; }
.utm-req { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); }
@media (max-width: 640px) {
  .utm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .utm-table, .utm-table tbody, .utm-table tr, .utm-table th, .utm-table td { display: block; }
  .utm-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .utm-table th, .utm-table td { border: 0; padding: 4px 14px; }
  .utm-table td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) { .utm-preset { transition: none; } }

/* Website self-audit (wsa-) */
.wsa-group-h { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--accent-ink); margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.tk-step-intro + .wsa-group-h { margin-top: 8px; padding-top: 0; border-top: 0; }
.wsa-qs .tk-choices { margin-bottom: 26px; }
.wsa-qs .tk-choices legend { line-height: 1.55; }
.wsa-qs .tk-choices .hint { margin: -4px 0 10px; line-height: 1.6; }
.wsa-qs .tk-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wsa-qs .tk-option { min-height: 46px; padding: 8px 12px; }
@media (max-width: 600px) { .wsa-qs .tk-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wsa-meta { margin: 0 0 12px; color: var(--ink-2); font-weight: 500; }
.wsa-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.wsa-note { margin: 0 0 14px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.7; }
.wsa-stop { border-color: #F0B8B2; background: #FFF8F7; }
.wsa-sec { margin-top: 32px; }
.wsa-sec-intro { margin: -6px 0 12px; color: var(--muted); font-size: .95rem; }
.wsa-n { font-weight: 500; color: var(--muted); font-size: .95rem; }
.wsa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wsa-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.wsa-item p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.7; }
.wsa-item .wsa-item-h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink); }
.wsa-item-h strong { font-weight: 600; }
.wsa-area { font-size: .82rem; color: var(--muted); font-weight: 500; }
.wsa-ans { font-size: .88rem; }
.wsa-ok { padding: 10px 16px; }
.wsa-sec[data-tier="critical"] .wsa-item { border-inline-start: 4px solid #B3261E; }
.wsa-sec[data-tier="high"] .wsa-item { border-inline-start: 4px solid #B7791F; }

.wsa-next-list { margin: 0; padding-inline-start: 1.4em; display: grid; gap: 12px; }
.wsa-next-list li { padding: 14px 16px; background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius); line-height: 1.7; color: var(--ink-2); }
.wsa-next-list li::marker { font-weight: 700; color: var(--ink); }
.wsa-next-list strong { color: var(--ink); }

.wsa-areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wsa-areas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wsa-area-name { font-weight: 600; }
.wsa-area-c { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }

@media print {
  body.tk-printing .wsa-item, body.tk-printing .wsa-next-list li { break-inside: avoid; border-color: #999; }
}

/* Workflow Mapper (wfm-) */
.wfm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Builder */
.wfm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 10px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.wfm-head > div { flex: 1 1 320px; min-width: 0; }
.wfm-h { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin: 0 0 6px; }
.wfm-intro { margin: 0; color: var(--ink-2); max-width: 62ch; }
.wfm-example { flex: none; min-height: 44px; }
.wfm-note { margin: 0 0 12px; padding: 10px 14px; font-size: .92rem; font-weight: 600; color: #7A4A00; background: #FFF4DE; border: 1px solid #F1D398; border-radius: var(--radius); }
.wfm-note[hidden] { display: none; }
.wfm-key { margin: 0 0 16px; font-size: .92rem; }
.wfm-key summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.wfm-key dl { margin: 6px 0 0; display: grid; gap: 8px; }
.wfm-key dl > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.wfm-key dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .wfm-key dl > div { grid-template-columns: 1fr; } }

.wfm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wfm-row { min-width: 0; }
.wfm-step { margin: 0; min-width: 0; padding: 14px 16px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.wfm-n { padding: 0 6px; margin-inline-start: -6px; font-family: var(--f-display); font-weight: 700; font-size: .95rem; }
.wfm-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 12px; align-items: end; }
.wfm-fields .field { margin-bottom: 10px; }
.wfm-fields label { font-size: .88rem; }
@media (max-width: 900px) { .wfm-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wfm-f-name { grid-column: 1 / -1; } }
@media (max-width: 520px) { .wfm-fields { grid-template-columns: 1fr; } }
.wfm-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.wfm-move { display: flex; flex-wrap: wrap; gap: 8px; }
.wfm-btn { min-height: 44px; min-width: 44px; }
.wfm-btn[disabled] { opacity: .4; cursor: not-allowed; }
.wfm-btn[disabled]:hover { background: transparent; color: var(--ink); }
.wfm-sug { margin-top: 12px; padding: 14px 16px; background: var(--white); border: 1px dashed #AEB6C2; border-radius: var(--radius); }
.wfm-sug[hidden] { display: none; }
.wfm-sug .tk-choices { margin-bottom: 14px; }
.wfm-proposal { margin: 0 0 10px; color: var(--ink-2); }
.wfm-proposal strong { color: var(--ink); }
.wfm-sug [data-act="accept"][hidden] { display: none; }
.wfm-err { margin: 12px 0 0; font-weight: 600; }
.wfm-err[hidden] { display: none; }
.wfm-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Result: vertical flow with numbered nodes and connector lines */
.wfm-result { margin-top: clamp(28px, 4vw, 44px); }
.wfm-flow { list-style: none; margin: 0 0 8px; padding: 0; }
.wfm-node { position: relative; padding-inline-start: 58px; padding-bottom: 16px; }
.wfm-node::before { content: ''; position: absolute; inset-inline-start: 19px; top: 0; bottom: 0; width: 2px; background: #AEB6C2; }
.wfm-node:first-child::before { top: 20px; }
.wfm-node:last-child::before { bottom: auto; height: 20px; }
.wfm-node:only-child::before { display: none; }
.wfm-node-row { position: relative; }
.wfm-num { position: absolute; inset-inline-start: -58px; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--graphite); color: var(--on-dark); font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; z-index: 1; }
.wfm-handoff { margin: 0 0 8px; font-size: .86rem; font-weight: 600; color: var(--accent-ink); }
.wfm-card { background: var(--white); border: 1px solid var(--line); border-inline-start-width: 5px; border-radius: var(--radius); padding: 12px 16px; }
.wfm-node[data-cls="auto"] .wfm-card { border-inline-start-color: #1F5A33; }
.wfm-node[data-cls="ai"] .wfm-card { border-inline-start-color: var(--accent); border-inline-start-style: dashed; }
.wfm-node[data-cls="approval"] .wfm-card { border-inline-start-color: #B7791F; border-inline-start-style: double; border-inline-start-width: 6px; }
.wfm-node[data-cls="manual"] .wfm-card { border-inline-start-color: var(--ink-2); }
.wfm-node[data-cls="none"] .wfm-card { border-inline-start-style: dotted; }
.wfm-node[data-hot] .wfm-card { box-shadow: 0 0 0 2px #F1D398; }
.wfm-card-t { margin: 0 0 6px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.wfm-badges { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.wfm-hot { font-size: .8rem; font-weight: 700; color: #7A4A00; }
.wfm-meta { margin: 8px 0 0; font-size: .88rem; color: var(--ink-2); overflow-wrap: anywhere; }
.wfm-meta-k { color: var(--muted); font-weight: 600; }
.wfm-counts-t { margin: 4px 0 8px; font-weight: 600; font-size: .95rem; }
.wfm-counts { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wfm-counts li { display: inline-flex; align-items: center; gap: 8px; }
.wfm-obs { margin: 0; padding-inline-start: 1.2em; color: var(--ink-2); }
.wfm-obs li { margin-bottom: 8px; }
.wfm-cards .tk-card p { color: var(--ink-2); }

@media print {
  body.tk-printing .wfm-node { break-inside: avoid; }
  body.tk-printing .wfm-num { background: #fff; color: #000; border: 1.5px solid #000; }
}

/* The shared result buttons are 40px (.btn-small); keep them at 44px on touch screens. */
[data-tk="workflow-mapper"] .tk-actions .btn { min-height: 44px; }
@media (max-width: 560px) { [data-tk="workflow-mapper"] .wfm-result .tk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }