/* ═══════════════════════════════════════════════════════════════════
   /about: About the programme (templates/about.html, static/js/about.js).
   Approved design "about-full-r6", 2026-10-07, the starred option in each
   section: hero "Airy panel" with four callouts, mission "Proof objects",
   six months "Wall calendar", gives one focused app view, gain
   keycaps + CV, ready "Your CV, carried" (gives, gain and ready re-picked
   2026-10-08).

   Scoped to .dfab. Every colour is a token from df-tokens.css
   (tests/test_theme_tokens.py forbids raw values here). Buttons are the
   shared .dff-b1 / .dff-b2 from df-forms.css. Inter for text and numbers,
   Bricolage condensed caps for the one headline per section.
   Without JS the markup is already in its end state; about.js only
   replays it (`.is-js` is set by the script).
   ═══════════════════════════════════════════════════════════════════ */

.dfab {
    --dfab-sans: Inter, system-ui, sans-serif;
    --dfab-card: var(--df-surface);
    --dfab-sheet: var(--df-surface);
    --dfab-on: var(--df-on-navy);
    --dfab-sh: var(--df-shadow);
    --dfab-sh2: 0 30px 60px -18px color-mix(in srgb, var(--df-navy) 32%, transparent);
    --dfab-sh-sm: 0 1px 2px color-mix(in srgb, var(--df-navy) 6%, transparent), 0 8px 20px -14px color-mix(in srgb, var(--df-navy) 30%, transparent);
    --dfab-ease: var(--df-ease);
    --dfab-spring: cubic-bezier(.3, 1.45, .5, 1);
    --dfab-navy: var(--df-navy);
    --dfab-grid: color-mix(in srgb, var(--df-ink) 6%, transparent);
    --dfab-wg: color-mix(in srgb, var(--df-on-navy) 4.5%, transparent);
    --dfab-chh: clamp(580px, calc(100svh - var(--df-nav-h) - 36px), 716px);
    /* the six months, blue to teal: the logo's stops */
    --dfab-m1: var(--df-brand-blue);
    --dfab-m2: color-mix(in srgb, var(--df-brand-blue) 50%, var(--df-brand-cyan));
    --dfab-m3: var(--df-brand-cyan);
    --dfab-m4: color-mix(in srgb, var(--df-brand-cyan) 45%, color-mix(in srgb, var(--df-brand-teal) 80%, var(--df-navy)));
    --dfab-m5: color-mix(in srgb, var(--df-brand-teal) 78%, var(--df-navy));
    --dfab-m6: color-mix(in srgb, var(--df-brand-teal) 60%, var(--df-navy));
    --dfab-teal: var(--df-achieve-fill);
    --dfab-now: color-mix(in srgb, var(--df-brand-teal) 72%, var(--df-navy));
    font-family: var(--dfab-sans);
    font-optical-sizing: auto;
    padding-bottom: clamp(28px, 6vh, 56px);
    overflow-x: clip;
}
[data-theme="dark"] .dfab {
    --dfab-card: color-mix(in srgb, var(--df-line) 55%, var(--df-surface));
    --dfab-sheet: color-mix(in srgb, var(--df-line) 55%, var(--df-surface));
    --dfab-sh2: 0 30px 60px -18px color-mix(in srgb, var(--df-navy) 85%, transparent);
    --dfab-sh-sm: 0 8px 20px -14px color-mix(in srgb, var(--df-navy) 80%, transparent);
    --dfab-navy: color-mix(in srgb, var(--df-navy-line) 18%, var(--df-navy));
}

.dfab :focus-visible { outline: 3px solid var(--df-accent); outline-offset: 3px; }
.dfab .dfab-dk :focus-visible { outline-color: var(--df-on-navy-accent-deep); }
.dfab-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.dfab-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.dfab-sec { padding: 12px 0 14px; scroll-margin-top: calc(var(--df-nav-h) + 8px); }
.dfab-sec-hero { padding-top: clamp(14px, 2.4vh, 24px); }

/* Display recipe and sizes come from the shared type system (df-tokens.css). */
body.public .dfab-disp {
    font-family: var(--df-font-display);
    font-stretch: var(--df-display-stretch); font-variation-settings: var(--df-display-wdth); font-weight: var(--df-display-weight);
    text-transform: uppercase; line-height: var(--df-display-lh); letter-spacing: var(--df-display-ls); margin: 0; color: inherit; max-width: none;
}
body.public .dfab-h2 { font-size: var(--df-type-h2); }
.dfab-lede { font-family: var(--df-font-text); font-size: var(--df-type-lede); line-height: var(--df-type-lede-lh); color: var(--df-ink-2); max-width: 46ch; margin: 0; }
.dfab-cta { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.dfab-cta .dff-b1, .dfab-cta .dff-b2 { min-height: 48px; }
.dfab-ar { display: inline-block; transition: transform .25s var(--dfab-ease); }
.dff-b1:hover .dfab-ar { transform: translateX(3px); }
.dfab-ey { font: 600 12px/1.3 var(--dfab-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--df-accent); margin: 0 0 12px; }

/* ── Grounds ──────────────────────────────────────────────────── */
.dfab-ch { position: relative; border-radius: 30px; overflow: hidden; height: var(--dfab-chh); isolation: isolate; }
.dfab-ch::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dfab-panel, .dfab-hero { background: var(--df-panel); color: var(--df-ink); }
.dfab-panel::before, .dfab-hero::before {
    background-image: linear-gradient(var(--dfab-grid) 1px, transparent 1px), linear-gradient(90deg, var(--dfab-grid) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask: radial-gradient(ellipse at center, black 30%, transparent 88%);
    mask: radial-gradient(ellipse at center, black 30%, transparent 88%);
}
.dfab-grad { background: var(--df-brand-gradient); color: var(--dfab-on); }
.dfab-navy { background: var(--dfab-navy); color: var(--dfab-on); }
.dfab-grad::before, .dfab-navy::before {
    background-image: linear-gradient(var(--dfab-wg) 1px, transparent 1px), linear-gradient(90deg, var(--dfab-wg) 1px, transparent 1px);
    background-size: 48px 48px;
}
[data-theme="dark"] .dfab-grad, [data-theme="dark"] .dfab-navy { box-shadow: inset 0 0 0 1px var(--df-navy-line); }
.dfab-in { position: relative; z-index: 1; height: 100%; padding: clamp(26px, 5vh, 50px) clamp(20px, 4.2vw, 56px); }
.dfab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4.4vw, 64px); align-items: center; }
.dfab-dk .dfab-h2 { color: var(--dfab-on); }
.dfab-dk .dff-b1 { background: var(--df-on-navy); color: var(--df-navy); }
.dfab-dk .dff-b2 { background: color-mix(in srgb, var(--df-on-navy) 14%, transparent); color: var(--df-on-navy); border-color: transparent; }
.dfab-dk .dff-b2:hover { background: color-mix(in srgb, var(--df-on-navy) 22%, transparent); }
.dfab .dff-b2 { border-color: transparent; box-shadow: var(--dfab-sh-sm); }
.dfab .dff-b2:hover { transform: translateY(-1px); }
.dfab-rb {
    width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--dfab-card); color: var(--df-ink);
    cursor: pointer; display: grid; place-items: center; box-shadow: var(--dfab-sh-sm); flex: none;
    transition: transform .15s var(--dfab-ease), opacity .2s;
}
.dfab-rb:hover { transform: translateY(-2px); }
.dfab-rb:active { transform: scale(.94); }
.dfab-rb:disabled { opacity: .35; cursor: default; transform: none; }

@keyframes dfab-popin { from { opacity: 0; transform: translateY(12px) scale(.6); } }
@keyframes dfab-fadein { from { opacity: 0; } }
@keyframes dfab-grow { from { height: 0; } }
@keyframes dfab-growx { from { width: 0; } }
@keyframes dfab-draw { from { stroke-dashoffset: 1; } }
@keyframes dfab-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes dfab-swap { from { opacity: 0; transform: translateY(8px); } }

/* ── 1 · Hero: airy panel + callouts ─────────────────────────── */
.dfab-hero { position: relative; border-radius: 30px; overflow: hidden; height: clamp(560px, calc(100svh - var(--df-nav-h) - 40px), 660px); display: grid; place-items: center; padding: 48px 24px; text-align: center; }
.dfab-mid { position: relative; z-index: 1; max-width: 760px; }
body.public .dfab-hero h1 { font-size: var(--df-type-hero); }
.dfab-hero .dfab-lede { margin: 22px auto 28px; }
.dfab-hero .dfab-cta { justify-content: center; }
.dfab-callwrap { position: absolute; inset: 0; pointer-events: none; }
.dfab-callout {
    position: absolute; pointer-events: auto; background: var(--dfab-card); color: var(--df-ink); border-radius: 16px;
    box-shadow: var(--dfab-sh); padding: 13px 16px 14px; text-align: left; transform: rotate(var(--r, 0deg));
    transition: transform .3s var(--dfab-ease), box-shadow .3s; z-index: 2; max-width: 230px;
}
.dfab-callout:hover, .dfab-callout:focus-within { transform: rotate(0deg) translateY(-4px); box-shadow: var(--dfab-sh2); }
.dfab-c1 { left: 4.5%; top: 11%; }
.dfab-c2 { right: 4.5%; top: 13%; max-width: none; }
.dfab-c3 { left: 6%; bottom: 12%; }
.dfab-c4 { right: 6.5%; bottom: 14%; }
.dfab-callout small { display: block; font: 600 10.5px var(--dfab-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--df-ink-3); margin-bottom: 5px; }
.dfab-big { display: block; font: 700 34px/1 var(--dfab-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dfab-callout b { font-size: 16px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dfab-callout p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--df-ink-2); }
.dfab-wk { display: grid; grid-template-columns: repeat(24, 7px); gap: 2px; margin-top: 9px; }
.dfab-wk i { height: 7px; border-radius: 2px; background: var(--df-line); }
.dfab-wk i.on { background: var(--dfab-teal); }
.dfab-wk i.now { background: var(--df-accent); }
.dfab.is-js .dfab-callout { animation: dfab-calin .8s var(--dfab-ease) backwards; animation-delay: calc(.25s + var(--d, 0) * .13s); }
@keyframes dfab-calin { from { opacity: 0; transform: translateY(26px) rotate(calc(var(--r, 0deg) * 2.4)) scale(.94); } }
.dfab.is-js .dfab-wk i.on, .dfab.is-js .dfab-wk i.now { animation: dfab-wkin .35s var(--dfab-ease) backwards; animation-delay: calc(.9s + var(--i) * .06s); }
@keyframes dfab-wkin { from { background: var(--df-line); } }

/* ── 2 · Mission: proof objects ──────────────────────────────── */
.dfab-mission .dfab-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.dfab-say { font-size: clamp(1.12rem, 1.55vw, 1.4rem); line-height: 1.42; font-weight: 500; color: var(--dfab-on); margin: 22px 0 14px; max-width: 34ch; }
.dfab-proof { font-size: clamp(.9rem, 1.05vw, 1rem); line-height: 1.62; color: color-mix(in srgb, var(--dfab-on) 84%, transparent); margin: 0; max-width: 50ch; }
.dfab-objs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dfab-obj {
    position: relative; display: flex; flex-direction: column; min-width: 0; border: 0; text-align: left; font: inherit;
    background: var(--dfab-card); color: var(--df-ink); border-radius: 20px; padding: 16px 18px; box-shadow: var(--dfab-sh);
    transform: rotate(var(--r, 0deg)); transition: transform .35s var(--dfab-ease), box-shadow .3s; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dfab .dfab-dk .dfab-obj:focus-visible { outline: 3px solid var(--df-on-navy-accent-deep); outline-offset: 3px; }
.dfab-obj.live, .dfab-obj[aria-pressed="true"] { transform: rotate(0) translateY(-4px); box-shadow: var(--dfab-sh2); }
@media (hover: hover) { .dfab-obj:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--dfab-sh2); } }
.dfab-obj .vis { height: clamp(84px, 15vh, 118px); display: flex; align-items: flex-end; position: relative; }
.dfab-obj .lab { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.dfab-obj .n { font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--dfab-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dfab-obj .lab b { font-size: 15px; font-weight: 650; }
.dfab-obj .sub { margin: 4px 0 0; font-size: 13px; color: var(--df-ink-3); line-height: 1.4; }
/* the 24-week strip */
.o-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; width: 100%; height: 100%; align-items: end; }
.o-strip .m { display: grid; grid-template-rows: repeat(4, 1fr); gap: 4px; height: 100%; }
.o-strip i { border-radius: 4px; background: var(--df-panel); transition: background .25s; transition-delay: 0s; }
.dfab-obj.live .o-strip i, .dfab-obj[aria-pressed="true"] .o-strip i { background: var(--c); transition-delay: calc(var(--k) * 28ms); }
@media (hover: hover) { .dfab-obj:hover .o-strip i { background: var(--c); transition-delay: calc(var(--k) * 28ms); } }
/* the deck of 24 real covers */
.o-deck { position: relative; width: 100%; height: 100%; }
.o-deck img, .o-deck .ph {
    position: absolute; left: 50%; bottom: 0; width: var(--tw, 50px); margin-left: calc(var(--tw, 50px) / -2); aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 5px; background: color-mix(in srgb, var(--df-ink) 9%, var(--dfab-card)); display: block;
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--df-navy) 55%, transparent);
    transform: translate(calc(var(--i) * .7px), calc(var(--i) * -.9px)) rotate(calc((var(--i) - 12) * .5deg));
    transition: transform .55s var(--dfab-ease); transition-delay: calc((23 - var(--i)) * 8ms);
}
.dfab-obj.live .o-deck > *, .dfab-obj[aria-pressed="true"] .o-deck > * { transform: translate(calc((var(--c8) - 3.5) * var(--fx, 24px)), calc(var(--r8) * var(--fy, -27px))) rotate(0); transition-delay: calc(var(--i) * 14ms); }
@media (hover: hover) { .dfab-obj:hover .o-deck > * { transform: translate(calc((var(--c8) - 3.5) * var(--fx, 24px)), calc(var(--r8) * var(--fy, -27px))) rotate(0); transition-delay: calc(var(--i) * 14ms); } }
/* the hours dial */
.o-ring { height: 100%; aspect-ratio: 1; display: block; margin: 0 auto; }
.o-ring circle { fill: none; stroke-width: 12; }
.o-ring .bg { stroke: var(--df-panel); }
.o-ring .a2 { stroke: var(--df-on-navy-accent); stroke-opacity: .55; stroke-linecap: round; }
.o-ring .a1 { stroke: var(--df-achieve-fill); stroke-linecap: round; }
.o-ring .nd line { stroke: var(--df-ink); stroke-width: 3; stroke-linecap: round; }
.o-ring .hub { fill: var(--df-ink); stroke: none; }
.o-ring .nd { transition: transform .9s var(--dfab-ease); transform-origin: 60px 60px; transform: rotate(0deg); }
.dfab-obj.live .o-ring .nd, .dfab-obj[aria-pressed="true"] .o-ring .nd { transform: rotate(var(--deg)); }
@media (hover: hover) { .dfab-obj:hover .o-ring .nd { transform: rotate(var(--deg)); } }
/* the project folders */
.o-fold { position: relative; width: 100%; height: 100%; }
.o-fold i {
    position: absolute; bottom: 0; left: 50%; width: var(--fw, 64px); margin-left: calc(var(--fw, 64px) / -2); height: calc(var(--fw, 64px) * .7);
    border-radius: 3px 9px 9px 9px; background: var(--c); transform: translateX(calc((var(--i) - 3) * 7px)) rotate(calc((var(--i) - 3) * 2deg));
    transition: transform .5s var(--dfab-ease); transition-delay: calc(var(--i) * 30ms);
}
.o-fold i::before { content: ""; position: absolute; left: 0; top: -7px; width: 44%; height: 9px; border-radius: 5px 5px 0 0; background: inherit; }
.o-fold i::after { content: ""; position: absolute; left: 12%; right: 12%; top: 8%; height: 70%; border-radius: 4px; background: var(--df-paper-fixed); z-index: -1; transform: translateY(0); transition: transform .45s var(--dfab-ease); transition-delay: calc(var(--i) * 40ms + .1s); }
.o-fold i.plus { background: var(--df-panel); display: grid; place-items: center; font: 600 22px var(--dfab-sans); font-style: normal; color: var(--df-ink-3); }
.o-fold i.plus::before { background: var(--df-panel); }
.o-fold i.plus::after { display: none; }
.dfab-obj.live .o-fold i, .dfab-obj[aria-pressed="true"] .o-fold i { transform: translateX(calc((var(--i) - 3) * var(--fs, 30px))) rotate(0); }
.dfab-obj.live .o-fold i::after, .dfab-obj[aria-pressed="true"] .o-fold i::after { transform: translateY(-34%); }
@media (hover: hover) { .dfab-obj:hover .o-fold i { transform: translateX(calc((var(--i) - 3) * var(--fs, 30px))) rotate(0); } .dfab-obj:hover .o-fold i::after { transform: translateY(-34%); } }

/* ── 3 · Six months: tear-off wall calendar ───────────────────── */
.dfab-months .dfab-split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.dfab-idx { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 2px; }
.dfab-idx button { width: 100%; display: flex; gap: 14px; align-items: baseline; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 12px; color: var(--df-ink-3); cursor: pointer; font-family: var(--dfab-sans); transition: background .2s, color .2s; }
.dfab-idx button small { font: 600 11px var(--dfab-sans); letter-spacing: .08em; text-transform: uppercase; min-width: 62px; }
.dfab-idx button span { font-size: 16px; font-weight: 600; }
.dfab-idx button:hover { background: color-mix(in srgb, var(--dfab-card) 70%, transparent); color: var(--df-ink); }
.dfab-idx button[aria-current="true"] { background: var(--dfab-card); color: var(--df-ink); box-shadow: var(--dfab-sh-sm); }
.dfab-idx button[aria-current="true"] small { color: var(--df-accent); }
.dfab-cal { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.dfab-cal .bind { height: 26px; border-radius: 12px 12px 0 0; background: var(--df-navy); position: relative; z-index: 4; }
.dfab-cal .bind::before, .dfab-cal .bind::after { content: ""; position: absolute; top: -11px; width: 14px; height: 28px; border-radius: 7px; background: var(--df-line-strong); left: 27%; }
.dfab-cal .bind::after { left: auto; right: 27%; }
.dfab-cal .stub {
    position: relative; z-index: 3; height: 14px; margin-bottom: -14px; background: var(--dfab-sheet); opacity: 0; transition: opacity .3s;
    -webkit-mask: conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) 50% / 16px 100%;
    mask: conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) 50% / 16px 100%;
}
.dfab-cal.torn .stub { opacity: 1; }
.dfab-cal .pages { position: relative; height: clamp(350px, 52vh, 430px); outline: none; }
.dfab-cal .pages:focus-visible { outline: 3px solid var(--df-accent); outline-offset: 6px; border-radius: 0 0 18px 18px; }
.dfab-cal .depth { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; }
.dfab-cal .depth i { position: absolute; left: calc(var(--k) * 5px); right: calc(var(--k) * 5px); bottom: calc(var(--k) * -5px); height: 40px; border-radius: 0 0 18px 18px; background: color-mix(in srgb, var(--dfab-sheet) calc(100% - var(--k) * 12%), var(--df-line)); }
.dfab-cal .pg {
    position: absolute; inset: 0; background: var(--dfab-sheet); color: var(--df-ink); border-radius: 0 0 18px 18px; overflow: hidden;
    display: none; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto minmax(0, 1fr);
    transform-origin: 50% 0; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.dfab-cal .pg.top, .dfab-cal .pg.under { display: grid; }
.dfab-cal .pg.top { z-index: 2; box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--df-navy) 50%, transparent); cursor: grab; }
.dfab-cal .pg.under { z-index: 1; }
.dfab-cal .pg::before { content: ""; grid-row: 1; grid-column: 1 / -1; background: var(--c); }
.dfab-cal .pg > small { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 1; padding: 0 0 16px 24px; font: 600 12px var(--dfab-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dfab-on); opacity: .92; }
.dfab-cal .pg > .bn { grid-row: 1; grid-column: 2; position: relative; z-index: 1; padding: 18px 24px 16px; font: 800 clamp(62px, 10vh, 92px)/.8 var(--dfab-sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--dfab-on); }
body.public .dfab-cal .pg > h3 { grid-row: 2; grid-column: 1 / -1; margin: 0; padding: 18px 24px 0; font: 700 clamp(1.3rem, 2.1vw, 1.7rem)/1.15 var(--dfab-sans); letter-spacing: -.02em; color: var(--df-ink); }
.dfab-cal .sum { grid-row: 3; grid-column: 1 / -1; margin: 8px 0 0; padding: 0 24px; color: var(--df-ink-2); font-size: 15px; line-height: 1.5; }
.dfab-cal .tops { grid-row: 4; grid-column: 1 / -1; list-style: none; padding: 0 24px; margin: 12px 0; display: grid; gap: 6px; }
.dfab-cal .tops li { display: flex; gap: 10px; align-items: center; font-size: 15.5px; font-weight: 500; }
.dfab-cal .tops li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.dfab-cal .wks { grid-row: 5; grid-column: 1 / -1; align-self: end; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 24px 18px; }
.dfab-cal .wks div { border-radius: 10px; background: var(--df-panel); padding: 8px 10px; font: 600 10.5px var(--dfab-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--df-ink-3); }
.dfab-cal .wks div b { display: block; font: 700 19px var(--dfab-sans); letter-spacing: -.02em; color: var(--df-ink); margin-top: 2px; text-transform: none; font-variant-numeric: tabular-nums; }
.dfab-cal .wks div.done { background: color-mix(in srgb, var(--c) 14%, var(--dfab-sheet)); }
.dfab-cal .wks div.now { background: var(--dfab-now); color: var(--dfab-on); }
.dfab-cal .wks div.now b { color: var(--dfab-on); }
.dfab-cal .pg.drag { cursor: grabbing; transition: none; }
.dfab-cal .pg.back { transition: transform .35s var(--dfab-spring); }
.dfab-cal .pg.tear { transition: transform .55s var(--dfab-ease), opacity .5s; opacity: 0; pointer-events: none; }
.dfab-cal .pg.drop { animation: dfab-drop .5s var(--dfab-ease); }
@keyframes dfab-drop { from { transform: translateY(-70px) rotate(-5deg); opacity: 0; } }
.dfab-cal .nav2 { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; }
.dfab-cal .dots { display: flex; gap: 6px; }
.dfab-cal .dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--df-ink) 18%, transparent); transition: background .2s, width .3s var(--dfab-ease); }
.dfab-cal .dots i.on { background: var(--df-ink); width: 22px; border-radius: 4px; }

/* ── 4 · Gives: one focused app view (Linear's issue-page structure) ──
   Sidebar | one item's detail (breadcrumb, title, copy, Activity) |
   Properties. 13px everywhere, hairline dividers, one accent. */
.dfab-ch.dfab-gives { height: auto; }
.dfab-gives .dfab-in { padding: 24px clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px); }
body.public .dfab-gh { font-size: var(--df-type-h2); padding: 0 4px; color: var(--dfab-on); }
.dfab-app {
    --a-bg: var(--df-surface);
    --a-side: color-mix(in srgb, var(--df-panel) 55%, var(--df-surface));
    --a-line: color-mix(in srgb, var(--df-line) 85%, transparent);
    --a-soft: color-mix(in srgb, var(--df-ink) 5%, transparent);
    --a-hover: color-mix(in srgb, var(--df-ink) 4%, transparent);
    margin-top: 20px; height: clamp(540px, calc(100svh - var(--df-nav-h) - 150px), 580px);
    display: grid; grid-template-columns: 220px minmax(0, 1fr);
    background: var(--a-bg); color: var(--df-ink); border-radius: 12px; overflow: hidden;
    box-shadow: 0 0 0 1px var(--a-line), 0 2px 4px color-mix(in srgb, var(--df-navy) 6%, transparent),
                0 16px 32px -12px color-mix(in srgb, var(--df-navy) 22%, transparent), 0 48px 80px -32px color-mix(in srgb, var(--df-navy) 45%, transparent);
    font: 400 13px/1.5 var(--dfab-sans); font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .dfab-app {
    --a-bg: color-mix(in srgb, var(--df-ink) 4%, var(--df-paper));
    --a-side: var(--df-paper);
    --a-soft: color-mix(in srgb, var(--df-ink) 7%, transparent);
    --a-hover: color-mix(in srgb, var(--df-ink) 6%, transparent);
}
/* status dots and label dots */
.dfab-app .sd { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--df-ink-3); }
.dfab-app .sd.prog { background: var(--df-warn); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--df-warn) 60%, var(--a-bg)); }
.dfab-app .sd.live { background: var(--df-achieve-fill); }
/* sidebar */
.dfab-app .side { display: flex; flex-direction: column; padding: 12px 8px; background: var(--a-side); border-right: 1px solid var(--a-line); min-width: 0; overflow: hidden; }
.dfab-app .ws { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; margin-bottom: 12px; font-size: 13px; }
.dfab-app .ws img { width: 15px; height: auto; }
.dfab-app .ws b { font-weight: 600; }
.dfab-app .ws .chev { width: 14px; height: 14px; color: var(--df-ink-3); }
.dfab-app .gl { display: block; padding: 0 8px; margin: 8px 0 4px; font: 500 12px var(--dfab-sans); color: var(--df-ink-3); }
.nav6 { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nav6 button {
    width: 100%; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none;
    font: 500 13px var(--dfab-sans); color: var(--df-ink-2); cursor: pointer; text-align: left; white-space: nowrap; transition: background .15s, color .15s;
}
.nav6 button svg { width: 15px; height: 15px; flex: none; color: var(--df-ink-3); }
.nav6 button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav6 button:hover { background: var(--a-hover); color: var(--df-ink); }
.nav6 button[aria-selected="true"] { background: color-mix(in srgb, var(--df-ink) 8%, transparent); color: var(--df-ink); }
.nav6 button[aria-selected="true"] svg { color: var(--df-ink); }
.dfab .nav6 button:focus-visible { outline: 2px solid var(--df-accent); outline-offset: -2px; }
.dfab-app .coh { list-style: none; margin: 0; padding: 0; }
.dfab-app .coh li { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; font-size: 13px; color: var(--df-ink-2); white-space: nowrap; }
.dfab-app .coh li .sd { margin: 0 4px; }
.dfab-app .coh svg { width: 15px; height: 15px; color: var(--df-ink-3); }
/* main: one item */
.dfab-app .main { position: relative; min-width: 0; min-height: 0; display: grid; }
.dfab-app .it { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 0; }
.dfab-app .it[hidden] { display: none; }
.dfab.is-js .dfab-app .it.in { animation: dfab-xfade .35s var(--dfab-ease); }
@keyframes dfab-xfade { from { opacity: 0; } }
.dfab-app .top { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--a-line); flex: none; }
.dfab-app .crumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--df-ink-3); white-space: nowrap; overflow: hidden; }
.dfab-app .crumb b { font-weight: 500; color: var(--df-ink); overflow: hidden; text-overflow: ellipsis; }
.dfab-app .crumb .sep { opacity: .6; }
.dfab-app .star { width: 14px; height: 14px; flex: none; color: var(--df-on-navy-closed); }
.dfab-app .pg { margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--df-ink-3); }
.dfab-app .pg .n { margin-right: 6px; }
.dfab-app .ud { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--df-ink-3); display: grid; place-items: center; cursor: pointer; }
.dfab-app .ud:hover { background: var(--a-hover); color: var(--df-ink); }
.dfab .dfab-app .ud:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 0; }
.dfab-app .ud svg { width: 14px; height: 14px; }
.dfab-app .body {
    flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "ttl props" "act props";
}
.dfab-app .ttl { grid-area: ttl; padding: 28px 40px 0 40px; }
body.public .dfab-app .ttl h3 { margin: 0; font: 600 20px/1.3 var(--dfab-sans); letter-spacing: -.01em; color: var(--df-ink); }
.dfab-app .ttl p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--df-ink-2); max-width: 62ch; }
.dfab-app .act { grid-area: act; padding: 28px 40px 20px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.dfab-app .tl { gap: 12px; }
.dfab-app .cd { margin-top: 18px; }
.dfab-app .act .end { margin-top: 18px; }
.dfab-app .cmp {
    margin-top: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; max-width: 560px; padding: 0 8px 0 14px;
    border-radius: 10px; box-shadow: inset 0 0 0 1px var(--a-line); background: var(--a-bg); color: var(--df-ink-3); font-size: 13px; flex: none;
}
.dfab-app .cmp > span:first-child { flex: 1; }
.dfab-app .cmp > svg { width: 15px; height: 15px; }
.dfab-app .cmp .snd { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--a-soft); color: var(--df-ink-3); }
.dfab-app .cmp .snd svg { width: 13px; height: 13px; }
body.public .dfab-app .act h4 { margin: 0 0 12px; font: 600 13px var(--dfab-sans); color: var(--df-ink); letter-spacing: 0; }
.dfab-app .tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dfab-app .tl li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--df-ink-3); min-width: 0; }
.dfab-app .tl .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfab-app .tl .tx b { font-weight: 500; color: var(--df-ink-2); }
.dfab-app .tl time { flex: none; }
.dfab-app .tl time::before { content: "·"; margin-right: 8px; }
.dfab-app .av { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: end center; overflow: hidden; background: var(--a-soft); color: var(--df-ink-3); object-fit: cover; }
.dfab-app .av svg { width: 82%; height: 82%; }
.dfab-app .av.lg { place-items: center; background: var(--a-bg); box-shadow: inset 0 0 0 1px var(--a-line); }
.dfab-app .av.lg img { width: 10px; height: auto; }
.dfab-app .cd { margin-top: 14px; padding: 12px 14px; border-radius: 8px; box-shadow: 0 0 0 1px var(--a-line); background: color-mix(in srgb, var(--a-soft) 40%, var(--a-bg)); max-width: 560px; }
.dfab-app .act .end { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--df-ink-3); }
.dfab-app .act .end .sd { margin: 0 5px; }
.dfab-app .act .end b { font-weight: 500; color: var(--df-ink-2); margin-right: -4px; }
.dfab-app .act .end time::before { content: "·"; margin-right: 8px; }
.dfab.is-js .dfab-app .it.in .cd { animation: dfab-swap .4s var(--dfab-ease) backwards .1s; }
/* properties */
.dfab-app .props { grid-area: props; margin: 0; padding: 24px 20px; border-left: 1px solid var(--a-line); display: flex; flex-direction: column; gap: 2px; }
.dfab-app .props::before { content: "Properties"; display: block; margin-bottom: 8px; font: 500 12px var(--dfab-sans); color: var(--df-ink-3); }
.dfab-app .props > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; min-height: 30px; gap: 8px; }
.dfab-app .props dt { font-size: 12.5px; color: var(--df-ink-3); font-weight: 400; }
.dfab-app .props dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--df-ink); min-width: 0; }
.dfab-app .props .lbs { align-items: start; padding-top: 4px; }
.dfab-app .lb { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--a-line); font-size: 12px; color: var(--df-ink-2); white-space: nowrap; }
.dfab-app .lb i { width: 6px; height: 6px; border-radius: 50%; background: var(--df-accent); }
.dfab-app .lb.l1 i { background: var(--df-warn); }
/* the one card per item */
.lbx { display: flex; flex-direction: column; gap: 4px; }
.lbx .r { display: grid; grid-template-columns: 18px 64px minmax(0, 1fr); gap: 8px; align-items: center; height: 26px; padding: 0 6px; margin: 0 -6px; border-radius: 6px; }
.lbx .r b { font-weight: 500; font-size: 13px; }
.lbx .r.you { background: color-mix(in srgb, var(--df-accent) 8%, transparent); }
.lbx .r.you b { color: var(--df-accent); font-weight: 600; }
.lbx .tr { height: 5px; border-radius: 3px; background: var(--a-soft); overflow: hidden; }
.lbx .tr span { display: block; height: 100%; width: var(--w); border-radius: 3px; background: color-mix(in srgb, var(--df-ink-3) 50%, transparent); }
.lbx .r.you .tr span { background: var(--df-accent); }
.dfab.is-js .it.in .lbx .tr span { animation: dfab-growx .7s var(--dfab-ease) backwards .15s; }
.cm { display: flex; flex-direction: column; gap: 6px; }
.cm .hd { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--df-ink-3); }
.cm .hd b { font-weight: 600; color: var(--df-ink); }
.cm .mt { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--df-accent-soft); color: var(--df-accent); font: 600 10px var(--dfab-sans); }
.cm .q { font-size: 13px; color: var(--df-ink); }
.cm .ref { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; height: 28px; padding: 0 10px 0 3px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--a-line); background: var(--a-bg); font-size: 12.5px; color: var(--df-ink-2); }
.cm .ref img, .cm .ref .fbk { width: 30px; height: 22px; border-radius: 4px; object-fit: cover; flex: none; padding: 0; }
.cm .ref .fbk b { display: none; }
.cm .ref span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arts { display: flex; flex-direction: column; }
.arts .ar { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; }
.arts .ar + .ar { border-top: 1px solid var(--a-line); }
.arts img, .arts .fbk { width: 48px; height: 34px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px var(--a-line); }
.arts .t { font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arts .pub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--df-ink-3); }
.arts .pub i { width: 6px; height: 6px; border-radius: 50%; background: var(--df-achieve-fill); }
.spk { display: flex; flex-direction: column; gap: 8px; }
.spk .h { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--df-ink-3); }
.spk .h b { font-weight: 500; color: var(--df-ink); }
.spk svg { width: 100%; height: 48px; display: block; overflow: visible; }
.spk .ah { fill: none; stroke: var(--df-line-strong); stroke-width: 1.25; stroke-dasharray: 3 4; opacity: .5; vector-effect: non-scaling-stroke; }
.spk .ln { fill: none; stroke: var(--df-accent); stroke-width: 1.75; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dfab.is-js .it.in .spk svg { animation: dfab-wipe .9s var(--dfab-ease) backwards .1s; }
@keyframes dfab-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.grpc { display: flex; align-items: center; gap: 12px; }
.grpc .fs { display: flex; }
.grpc .fs > * { width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--a-bg); object-fit: cover; }
.grpc .fs > :first-child { margin-left: 0; }
.grpc b { display: block; font-size: 13px; font-weight: 600; }
.grpc small { display: block; font-size: 12px; color: var(--df-ink-3); }
.chat { display: flex; flex-direction: column; gap: 8px; }
.chat .u { align-self: flex-end; max-width: 80%; padding: 6px 10px; border-radius: 10px 10px 3px 10px; background: var(--df-accent); color: var(--df-on-status); font-size: 13px; }
.chat .a { align-self: flex-start; max-width: 92%; padding: 6px 10px; border-radius: 10px 10px 10px 3px; background: var(--a-bg); box-shadow: inset 0 0 0 1px var(--a-line); font-size: 13px; color: var(--df-ink-2); }
.chat code { font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 4px; border-radius: 4px; background: var(--a-soft); color: var(--df-ink); }
/* designed fallback for an article picture: brand tint + its short title */
.dfab-app .fbk {
    display: grid; place-items: center; align-content: center; gap: 4px; padding: 4px; text-align: center; overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--df-brand-blue) 78%, var(--df-navy)), color-mix(in srgb, var(--df-brand-teal) 70%, var(--df-navy)));
    color: var(--df-on-navy);
}
.dfab-app .fbk b { font: 600 8.5px/1.2 var(--dfab-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dfab-app .fbk img { width: 14px; height: auto; }

/* ── 5 · Gain: one list of skills feeds the CV ────────────────── */
.dfab-gain .dfab-split { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); }
.dfab-pick { min-width: 0; max-width: 520px; }
.dfab-seg { display: inline-flex; gap: 2px; padding: 3px; margin-top: 20px; border-radius: 9px; background: color-mix(in srgb, var(--df-ink) 7%, transparent); }
.dfab-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font: 500 13px var(--dfab-sans); color: var(--df-ink-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.dfab-seg button:hover { color: var(--df-ink); }
.dfab-seg button[aria-selected="true"] { background: var(--dfab-card); color: var(--df-ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--df-navy) 12%, transparent), 0 0 0 1px var(--df-line); }
.dfab .dfab-seg button:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 1px; }
.dfab-skp { margin-top: 14px; }
.dfab-skp[hidden] { display: none; }
.dfab-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dfab-skills .sk {
    width: 100%; min-height: 44px; display: grid; grid-template-columns: 16px minmax(0, 1fr) 22px; gap: 12px; align-items: center;
    padding: 9px 12px; border: 0; border-radius: 10px; background: var(--dfab-card); color: var(--df-ink); text-align: left;
    font: 500 14px/1.3 var(--dfab-sans); cursor: pointer; box-shadow: 0 0 0 1px var(--df-line); transition: box-shadow .15s, background .15s;
}
.dfab-skills .sk:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-line-strong) 60%, var(--df-line)); }
.dfab .dfab-skills .sk:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
.dfab-skills .ic { display: grid; place-items: center; color: var(--df-ink-3); }
.dfab-skills .ic svg { width: 16px; height: 16px; }
.dfab-skills .nm { min-width: 0; overflow-wrap: anywhere; }
.dfab-skills .add { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--df-ink-3); opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.dfab-skills .add svg { width: 14px; height: 14px; grid-area: 1 / 1; }
.dfab-skills .add .tick { display: none; }
.dfab-skills .sk:hover .add, .dfab-skills .sk:focus-visible .add { opacity: 1; background: color-mix(in srgb, var(--df-ink) 7%, transparent); }
@media (hover: none) { .dfab-skills .add { opacity: 1; } }
.dfab-skills .sk[aria-pressed="true"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-accent) 45%, var(--df-line)); }
.dfab-skills .sk[aria-pressed="true"] .ic { color: var(--df-accent); }
.dfab-skills .sk[aria-pressed="true"] .add { opacity: 1; background: var(--df-accent); color: var(--df-on-status); }
.dfab-skills .sk[aria-pressed="true"] .add .plus { display: none; }
.dfab-skills .sk[aria-pressed="true"] .add .tick { display: block; }

/* the CV card (Gain fills it, Ready carries it) */
.dfab-cvx {
    position: relative; display: block; max-width: 460px; width: 100%; justify-self: center; text-align: left; text-decoration: none;
    background: var(--dfab-sheet); color: var(--df-ink); border-radius: 12px; padding: 24px 24px 24px; font-family: var(--dfab-sans);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-line) 70%, transparent), 0 2px 4px color-mix(in srgb, var(--df-navy) 6%, transparent),
                0 16px 32px -12px color-mix(in srgb, var(--df-navy) 22%, transparent), 0 40px 72px -32px color-mix(in srgb, var(--df-navy) 40%, transparent);
    transform: rotate(var(--tilt, .8deg)); transition: transform .4s var(--dfab-ease), box-shadow .3s; overflow: hidden;
}
[data-theme="dark"] .dfab-cvx { box-shadow: 0 0 0 1px var(--df-line), 0 40px 72px -32px color-mix(in srgb, var(--df-navy) 90%, black); }
.dfab-cvx::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--df-brand-blue), var(--df-brand-cyan), var(--df-brand-teal)); }
.dfab-cvx .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dfab-cvx .brand { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--dfab-sans); }
.dfab-cvx .brand img { width: 16px; height: auto; display: block; }
.dfab-cvx .lbl { font: 500 11px var(--dfab-sans); letter-spacing: .04em; color: var(--df-ink-3); padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--df-line); white-space: nowrap; }
.dfab-cvx .who { display: block; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--df-line); }
.dfab-cvx .yn { display: block; font: italic 500 22px/1.2 var(--dfab-sans); letter-spacing: -.01em; color: color-mix(in srgb, var(--df-ink-3) 80%, transparent); }
.dfab-cvx .rl { display: block; margin-top: 4px; font-size: 13px; color: var(--df-ink-2); }
.dfab-cvx .sh { display: block; margin: 16px 0 8px; font: 600 11px var(--dfab-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--df-ink-3); }
.dfab-cvx .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.dfab-cvx .col { display: block; min-width: 0; }
.dfab-cvx .h5 { display: block; margin: 0 0 8px; font: 600 12px var(--dfab-sans); color: var(--df-ink-2); }
.dfab-cvx .ul { display: grid; gap: 6px; }
.dfab-cvx .li { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 6px; font: 500 12px/1 var(--dfab-sans); min-width: 0; }
.dfab-cvx .li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfab-cvx .li .ck { width: 12px; height: 12px; flex: none; color: var(--df-achieve); }
.dfab-cvx .li.e { background: none; outline: 1px dashed color-mix(in srgb, var(--df-line-strong) 40%, transparent); outline-offset: -1px; }
.dfab-cvx .li.e span, .dfab-cvx .li.e .ck { display: none; }
.dfab-cvx .li.f { background: color-mix(in srgb, var(--df-achieve-fill) 12%, var(--dfab-sheet)); color: var(--df-ink); }
.dfab-cvx .li.f.pop { animation: dfab-lpop .42s var(--dfab-spring); }
@keyframes dfab-lpop { 0% { transform: scale(.7); opacity: .3; } 60% { transform: scale(1.06); } 100% { transform: none; } }
.dfab-cvx .tg { display: flex; flex-wrap: wrap; gap: 6px; min-height: 58px; align-content: flex-start; }
.dfab-cvx .tg span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; font: 500 12px var(--dfab-sans); background: color-mix(in srgb, var(--df-achieve-fill) 12%, var(--dfab-sheet)); animation: dfab-popin .35s var(--dfab-spring) backwards; animation-delay: calc(var(--k, 0) * .05s); }
.dfab-cvx .tg span.ex { background: var(--df-panel); color: var(--df-ink-2); animation: none; }
.dfab-cvx .pw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-right: 88px; }
.dfab-cvx .pw > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--df-panel); font-size: 11.5px; color: var(--df-ink-3); line-height: 1.25; }
.dfab-cvx .pw b { font: 700 18px/1.1 var(--dfab-sans); color: var(--df-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dfab-cvx .seal { position: absolute; right: 18px; bottom: 16px; width: 76px; height: 76px; color: var(--df-accent); transform: rotate(-12deg); }
.dfab-cvx .seal svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.dfab-cvx .seal .o { fill: var(--dfab-sheet); stroke: currentColor; stroke-width: 1.5; }
.dfab-cvx .seal .i { fill: var(--dfab-sheet); stroke: currentColor; stroke-width: 1; stroke-opacity: .35; }
.dfab-cvx .seal text { font: 700 9px var(--dfab-sans); letter-spacing: .4px; fill: currentColor; }
.dfab-cvx .seal .disc { position: absolute; left: 50%; top: 50%; width: 32%; transform: translate(-50%, -50%) rotate(12deg); }
.dfab-cvx .seal .disc img { width: 100%; height: auto; display: block; }
.dfab-cvx.over { transform: rotate(0) scale(1.02); box-shadow: 0 0 0 2px var(--dfab-teal), 0 40px 70px -30px color-mix(in srgb, var(--df-navy) 55%, transparent); }
.dfab-cvx.snap { animation: dfab-snap .3s var(--dfab-ease); }
@keyframes dfab-snap { 40% { transform: rotate(var(--tilt, .8deg)) translateY(4px) scale(.992); } }
.dfab-flyer {
    position: fixed; z-index: 300; pointer-events: none; border-radius: 999px; background: color-mix(in srgb, var(--df-brand-teal) 72%, var(--df-navy)); color: var(--df-on-navy);
    font: 500 13px Inter, system-ui, sans-serif; padding: 7px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 18px 30px -14px color-mix(in srgb, var(--df-navy) 50%, transparent);
    transition: transform .5s cubic-bezier(.55, 0, .25, 1), width .5s cubic-bezier(.55, 0, .25, 1), height .5s, border-radius .5s;
}

/* ── 6 · Ready: your CV, carried ─────────────────────────────── */
.dfab-ch.dfab-ready { height: auto; }
.dfab-ready .dfab-in { gap: 30px; padding-top: clamp(40px, 7vh, 64px); padding-bottom: clamp(40px, 7vh, 64px); }
.dfab-end { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: color-mix(in srgb, var(--dfab-on) 84%, transparent); max-width: 44ch; margin: 16px 0 26px; }
.dfab-cvx.is-ready { --tilt: 2.5deg; max-width: 440px; }
.dfab-cvx.is-ready:hover, .dfab-cvx.is-ready:focus-visible { transform: rotate(0) translateY(-6px); color: var(--df-ink); }
.dfab-cvx.is-ready.go { transform: rotate(-1deg) translate(-18px, -6px); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .dfab-callout { position: static; max-width: none; }
    .dfab-callwrap { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; max-width: 560px; margin-inline: auto; pointer-events: auto; }
    .dfab-wk { grid-template-columns: repeat(24, minmax(0, 1fr)); }
    .dfab-hero { display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 900px) {
    .dfab { --dfab-chh: clamp(600px, calc(100svh - var(--df-nav-h) - 24px), 740px); }
    .dfab-ch { border-radius: 24px; }
    .dfab-split, .dfab-months .dfab-split, .dfab-gain .dfab-split { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 16px; }
    .dfab-in { padding: 24px 18px; }
    .dfab-say { font-size: 1.02rem; margin: 12px 0 8px; }
    .dfab-proof { font-size: .83rem; line-height: 1.5; }
    .dfab-mission .dfab-split { grid-template-columns: minmax(0, 1fr); }
    .dfab-objs { gap: 10px; }
    .dfab-obj { padding: 11px 12px; border-radius: 16px; }
    .dfab-obj .vis { height: 58px; }
    .dfab-obj .lab { margin-top: 7px; gap: 6px; }
    .dfab-obj .n { font-size: 1.35rem; }
    .dfab-obj .lab b { font-size: 13px; }
    .dfab-obj .sub { font-size: 11.5px; }
    .o-deck { --tw: 34px; --fx: 15px; --fy: -12px; }
    .o-fold { --fw: 40px; --fs: 17px; }
    .o-strip { gap: 4px; }
    .o-strip .m { gap: 3px; }
    .dfab-idx { display: none; }
    .dfab-cal .pages { height: 400px; }
    .dfab-cal .pg > small { padding: 0 0 14px 18px; }
    .dfab-cal .pg > .bn { padding: 14px 18px; }
    body.public .dfab-cal .pg > h3 { font-size: 1.3rem; padding: 14px 18px 0; }
    .dfab-cal .sum, .dfab-cal .tops { padding-left: 18px; padding-right: 18px; }
    .dfab-cal .wks { padding: 0 18px 14px; }
    .dfab-cal .sum, .dfab-cal .tops li { font-size: 14px; }
    .dfab-cal .nav2 { margin-top: 16px; }
    .dfab-gives .dfab-in { padding: 20px 12px 12px; }
    .dfab-app { height: auto; grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
    .dfab-app .side { flex-direction: row; align-items: center; padding: 8px; border-right: 0; border-bottom: 1px solid var(--a-line); overflow-x: auto; scrollbar-width: none; }
    .dfab-app .side::-webkit-scrollbar { display: none; }
    .dfab-app .ws, .dfab-app .gl, .dfab-app .coh { display: none; }
    .nav6 { flex-direction: row; gap: 6px; margin: 0; }
    .nav6 li { flex: none; }
    .nav6 button { height: 30px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--a-line); }
    .nav6 button span { overflow: visible; }
    .nav6 button .sd { display: none; }
    .dfab-app .top { padding: 0 6px 0 14px; }
    .dfab-app .crumb > span:not(.sep) { display: none; }
    .dfab-app .crumb .sep { display: none; }
    .dfab-app .star { display: none; }
    .dfab-app .body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "ttl" "props" "act"; }
    .dfab-app .ttl { padding: 18px 16px 0; }
    body.public .dfab-app .ttl h3 { font-size: 18px; }
    .dfab-app .props { border-left: 0; padding: 12px 16px 0; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
    .dfab-app .props::before { display: none; }
    .dfab-app .props > div { display: flex; min-height: 24px; gap: 6px; }
    .dfab-app .props .lbs { padding-top: 0; }
    .dfab-app .act { padding: 16px 16px 18px; }
    .dfab-app .cmp { margin-top: 18px; }
    .dfab-app .tl .tx { white-space: normal; }
    .dfab-app .tl li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; }
    .dfab-app .tl li .av { margin-top: 1px; }
    .dfab-app .tl time::before { content: none; }
    .dfab-app .act .end { display: block; }
    .dfab-app .act .end .sd { display: inline-block; margin: 0 8px 1px 5px; vertical-align: middle; }
    .dfab-app .act .end b { margin-right: 0; }
    .dfab-app .act .end time::before { margin: 0 6px; }
    .dfab-ch.dfab-gain { height: auto; }
    .dfab-seg { margin-top: 14px; }
    .dfab-skp { margin-top: 12px; }
    .dfab-skills { gap: 6px; }
    .dfab-skills .sk { min-height: 40px; padding: 8px 12px; font-size: 13.5px; }
    .dfab-cvx { padding: 20px 16px 16px; --tilt: 0deg; }
    .dfab-cvx .yn { font-size: 19px; }
    .dfab-cvx .who { margin-top: 12px; padding-bottom: 12px; }
    .dfab-cvx .sh { margin: 12px 0 8px; }
    .dfab-cvx .li { height: 24px; font-size: 11.5px; padding: 0 6px; }
    .dfab-cvx .ul { gap: 4px; }
    .dfab-cvx .pw { padding-right: 64px; gap: 6px; }
    .dfab-cvx .pw > span { padding: 6px 8px; font-size: 11px; }
    .dfab-cvx .pw b { font-size: 16px; }
    .dfab-cvx .seal { width: 56px; height: 56px; right: 12px; bottom: 14px; }
    .dfab-cvx.is-ready { --tilt: 2deg; }
    .dfab-cvx.is-ready.go { transform: rotate(0) translateY(-6px); }
    .dfab-end { margin: 12px 0 20px; }
}
@media (max-width: 560px) {
    .dfab-wrap { padding: 0 16px; }
    .dfab-sec { padding: 8px 0 10px; }
    .dfab-hero { border-radius: 24px; height: auto; min-height: 0; padding: 30px 16px 18px; }
    .dfab-hero .dfab-lede { margin: 14px auto 18px; }
    .dfab-cta .dff-b1, .dfab-cta .dff-b2 { min-height: 44px; padding: 10px 16px; font-size: 14.5px; }
    .dfab-callwrap { gap: 8px; margin-top: 20px; }
    .dfab-callout { padding: 10px 12px 11px; border-radius: 14px; }
    .dfab-big { font-size: 26px; }
    .dfab-callout b { font-size: 15px; }
    .dfab-callout p { font-size: 12.5px; margin-top: 4px; }
    .dfab-callout small { font-size: 9.5px; margin-bottom: 3px; }
    /* Phone reading sizes: the mission's second paragraph was 13.3px and
       the stat cards' notes 11.5px. */
    .dfab-proof { font-size: 15px; line-height: 1.5; }
    .dfab-obj .sub { font-size: 12.5px; }
    .dfab-objs { gap: 8px; }
    /* Technical / Professional: a 30px switch is too small to tap. */
    .dfab-seg button { height: 40px; padding: 0 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .dfab *, .dfab *::before, .dfab *::after, .dfab-flyer { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
    .dfab-callout:hover, .dfab-callout:focus-within { transform: rotate(var(--r, 0deg)); }
}

/* Flat sections: no card, just the page (Tassy, 2026-10-09: "not everything is a card"). */
.dfab-ch.dfab-flat { --dfab-on: var(--df-ink); background: none; color: var(--df-ink); border-radius: 0; overflow: visible; height: auto; box-shadow: none; }
.dfab-ch.dfab-flat::before { display: none; }
.dfab-flat > .dfab-in { padding: clamp(56px, 9vh, 96px) 0; }
.dfab-flat .dfab-proof { color: var(--df-ink-2); }
body.public .dfab-flat .dfab-gh { padding: 0; }
.dfab-gsub { margin: 14px 0 32px; max-width: 62ch; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; color: var(--df-ink-2); }
@media (max-width: 600px) { .dfab-flat > .dfab-in { padding: 40px 0; } .dfab-gsub { margin: 10px 0 22px; } }

/* "What the programme gives you", flat but alive (Tassy, 2026-10-09): header + one-system diagram, app on a glow. */
.dfab-ghd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; margin-bottom: 40px; }
.dfab-ghd .dfab-gsub { margin-bottom: 0; }
.dfab-geb { margin: 0 0 12px; font: 600 12px/1.3 var(--df-font-text); letter-spacing: .12em; text-transform: uppercase; background: var(--df-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dfab-sys { position: relative; height: 220px; }
.dfab-sys .wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dfab-sys .wires path { fill: none; stroke: url(#wiregrad); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .55; }
.dfab-sys .wires .s0 { stop-color: var(--df-brand-blue); } .dfab-sys .wires .s1 { stop-color: var(--df-brand-cyan); } .dfab-sys .wires .s2 { stop-color: var(--df-brand-teal); }
.dfab-sys .pulse { fill: var(--df-brand-cyan); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--df-brand-cyan) 80%, transparent)); }
.dfab-sys .hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: var(--df-surface); box-shadow: 0 0 0 8px color-mix(in srgb, var(--df-brand-cyan) 10%, transparent), 0 10px 30px -8px color-mix(in srgb, var(--df-navy) 35%, transparent); animation: dfab-hub 3s ease-in-out infinite; }
@keyframes dfab-hub { 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--df-brand-cyan) 6%, transparent), 0 10px 30px -8px color-mix(in srgb, var(--df-navy) 35%, transparent); } }
.dfab-role { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; font: 600 14px var(--df-font-text); color: var(--df-ink); background: var(--df-surface); box-shadow: 0 1px 0 color-mix(in srgb, var(--df-ink) 8%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--df-navy) 35%, transparent); transform: translate(-50%, -50%); white-space: nowrap; }
.dfab-role svg { width: 16px; height: 16px; color: var(--df-brand-cyan); }
.dfab-role.r0 { left: 17.5%; top: 18%; } .dfab-role.r1 { left: 82.5%; top: 18%; } .dfab-role.r2 { left: 17.5%; top: 82%; } .dfab-role.r3 { left: 82.5%; top: 82%; }
.dfab-stage { position: relative; isolation: isolate; padding: 8px 0 0; }
.dfab-stage::before { content: ""; position: absolute; inset: -60px -40px -40px; z-index: -2; pointer-events: none;
    background-image: linear-gradient(color-mix(in srgb, var(--df-ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--df-ink) 7%, transparent) 1px, transparent 1px); background-size: 48px 48px;
    -webkit-mask: radial-gradient(ellipse at center, var(--df-ink) 35%, transparent 75%); mask: radial-gradient(ellipse at center, var(--df-ink) 35%, transparent 75%); }
.dfab-glow { position: absolute; left: 8%; right: 8%; top: 14%; bottom: -4%; z-index: -1; border-radius: 50%; background: var(--df-brand-gradient); filter: blur(80px); opacity: .4; pointer-events: none; }
.dfab-flat .dfab-app { box-shadow: 0 1px 0 color-mix(in srgb, var(--df-ink) 6%, transparent), 0 40px 80px -30px color-mix(in srgb, var(--df-navy) 45%, transparent); }
.dfab-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font: 500 13px var(--df-font-text); color: var(--df-ink); background: var(--df-surface); box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--df-navy) 45%, transparent); animation: dfab-float 6s ease-in-out infinite; }
.dfab-chip b { font-weight: 700; }
.dfab-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--df-brand-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--df-brand-teal) 20%, transparent); }
.dfab-chip.c1 { top: -14px; right: 6%; }
.dfab-chip.c2 { bottom: -18px; left: 4%; animation-delay: -3s; }
@keyframes dfab-float { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .dfab-chip, .dfab-sys .hub { animation: none; } .dfab-sys .pulse { display: none; } }
@media (max-width: 900px) { .dfab-ghd { grid-template-columns: minmax(0, 1fr); gap: 20px; } .dfab-sys { height: 180px; max-width: 420px; } }
@media (max-width: 600px) { .dfab-chip { display: none; } .dfab-role { font-size: 12px; padding: 6px 10px 6px 8px; } .dfab-glow { filter: blur(40px); } }