/* ==========================================================================
   Data Union Café — duc-core.css
   Tokens, fonts, base reset (new pages), site chrome (header · footer · ground ·
   legal banner), shared primitives. Plan of record: tasks/design_handoff_site/BUILD_PLAN.md
   §2.2 (chrome contract), §2.3 (tokens + primitives), D11 (self-hosted IBM Plex Mono),
   D13 (legacy pages: body.duc-legacy), D15 (footer identity), D16 (no analytics/cookies).
   Every value below is measured from the dc/*.dc.html boards or the README; the map
   file:line is cited where a value is not obvious.
   Class prefix `duc-` throughout — nothing here matches legacy site.css selectors.
   ========================================================================== */

/* ---------- 1. Fonts — IBM Plex Mono v20, latin + latin-ext, 400–700 (D11) ---------- */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/site/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/site/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/site/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/site/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/site/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/site/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/site/fonts/ibm-plex-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/site/fonts/ibm-plex-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Tokens (plan §2.3, verbatim) ---------- */
/* Contrast (F1, WCAG 2.2 AA): text on --warm-tint or on paper takes --warm-hover (--warm stays for dots, borders and text on
   white); small --muted text on paper takes --body3 (--muted stays on white cards); --mono-1…3 are blueprint decor — mono
   text takes --mono-4. */
:root{
  --paper:#EFEDE6; --white:#FFFFFF; --ink:#12161B; --ink-hover:#28313B; --nav:#2A3540; --body2:#3E4A55;
  --body3:#5D6A75; --muted:#6D6D72; --placeholder:#8E8E93; --hair:#E5E5EA; --field:#F2F2F7; --card-hover:#FCFCFD;
  --teal:#056A61; --teal-hover:#04544C; --teal-status:#01A99D; --teal-tint:#DBEEEB;
  --blue:#0070A0; --blue-tint:#E1EEF5; --warm:#C8471F; --warm-tint:#FDEAE2; --warm-border:#F3D3C8; --warm-hover:#B03A15;
  --broker-bg:#ECEDF0; --broker-fg:#4A5560; --chip-fg:#12304A;
  --mono-1:#A29C8D; --mono-2:#9A947F; --mono-3:#8F8A79; --mono-4:#5D6355; --code-border:#D8D2C6;
  --focus-ring:rgba(0,112,160,.14); --rule:rgba(18,22,27,.07); --hair-hdr:rgba(18,22,27,.10);
  --glass-16:rgba(18,22,27,.16); --glass-18:rgba(18,22,27,.18);
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --header-h:88px; --container:1280px; --gutter:clamp(20px,3.5vw,40px);
  --rail:calc(100% - clamp(48px,(100% - 700px) * 10,232px));
  --sh-icon:0 6px 18px rgba(18,22,27,.10); --sh-menu:0 22px 50px rgba(24,44,84,.18); --sh-seg:0 8px 20px rgba(24,44,84,.12);
  --sh-knob:0 1px 3px rgba(0,0,0,.2); --sh-cta:0 14px 30px rgba(5,106,97,.28); --sh-phone:0 22px 44px -14px rgba(18,22,27,.36);
}

/* ---------- 3. Base reset — new pages only (legacy bodies keep site.css; D13) ---------- */
/* Base rules are wrapped in :where() so they carry ZERO specificity — every prefixed class
   (.duc-ftr__link, .duc-hdr__link, …) wins over them, which is what A-6 needs. */
body:not(.duc-legacy){margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui)}   /* no font-smoothing override: the boards compute `auto` and antialiased rendered every glyph lighter — D-1 */
:where(body:not(.duc-legacy)) :where(*,*::before,*::after){box-sizing:border-box}
:where(body:not(.duc-legacy) a){color:var(--teal);text-decoration:none}
@media (hover:hover){:where(body:not(.duc-legacy) a:hover){color:var(--teal-hover)}}
:where(body:not(.duc-legacy) :is(img,svg)){display:inline-block;vertical-align:middle}
:where(body:not(.duc-legacy) img){max-width:100%}
:where(body:not(.duc-legacy) :is(button,input)){font:inherit;color:inherit}
:where(body:not(.duc-legacy) input)::placeholder{color:var(--placeholder);opacity:1}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
body.duc-legacy{padding-top:var(--header-h)}
body.duc-legacy .duc-ground{display:none}
.duc-skip{position:absolute;left:16px;top:-120px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--ink);color:#FFFFFF;font-weight:600;font-size:14px;text-decoration:none}
.duc-skip:focus{top:100px}
@media (hover:hover){.duc-skip:hover{color:#FFFFFF}}
.duc-mono{font-family:var(--font-mono)}
.duc-pretty{text-wrap:pretty}

/* ---------- 4. Header — dc/WEB signin.dc.html :38-87 · WEB home v2.dc.html :74-92 · README L51-L53 ---------- */
/* Solid at every width: paper ground + the 1px hairline partition, on every page (founder override 2026-09-12, item 5) */
.duc-hdr{position:fixed;left:0;right:0;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--hair-hdr);font-family:var(--font-ui);color:var(--ink);line-height:normal}
/* content-box as the DC container (dc/WEB signin.dc.html :40): 1280px of content plus the gutters, so above 1360px the brand
   and the pill sit on the 1280 column edges (1440: logo x 80, pill right edge 1360) — I1a */
.duc-hdr__inner{max-width:var(--container);margin:0 auto;padding:21px var(--gutter) 22px;min-height:44px;box-sizing:content-box;display:flex;align-items:center;gap:18px}
.duc-hdr__brand{display:flex;align-items:center;gap:11px;flex:1;min-width:0;color:var(--ink);text-decoration:none;border-radius:8px}
@media (hover:hover){.duc-hdr__brand:hover{color:var(--ink)}}
.duc-hdr__logo{width:44px;height:44px;flex:none;display:block}
.duc-hdr__brand-text{display:block;min-width:0}
.duc-hdr__brand-name{display:block;font-size:15.5px;font-weight:800;letter-spacing:.2px;color:var(--ink);white-space:nowrap}
.duc-hdr__tm{font-size:9px;vertical-align:super}
.duc-hdr__brand-sub{display:block;font-size:11px;font-weight:600;color:var(--body2);margin-top:1px;white-space:nowrap}
.duc-hdr__nav{display:flex;align-items:center;gap:6px}
.duc-hdr__link{position:relative;min-height:44px;display:inline-flex;align-items:center;padding:0 18px;font-size:15px;font-weight:600;color:var(--nav);text-decoration:none;white-space:nowrap;border-radius:8px}
@media (hover:hover){.duc-hdr__link:hover{color:var(--nav)}}
.duc-hdr__link[aria-current="page"]{font-weight:700;color:var(--teal)}
.duc-hdr__link[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--teal);transform:translateX(-50%)}
.duc-hdr__right{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
/* the DC pill is an <a> in content-box: min-height 44 + its 1px borders = 46px, so the bar is 90px while it shows; the
   signed-in chip is a border-box <button> in the DC and stays 44 (dc/WEB signin.dc.html :59, :62) — I1a */
.duc-hdr__signin{box-sizing:content-box;min-height:44px;display:inline-flex;align-items:center;gap:9px;padding:0 22px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--glass-16);font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .15s ease}
@media (hover:hover){.duc-hdr__signin:hover{background:#FFFFFF;color:var(--ink)}}
.duc-hdr__signin-ico{flex:none}
body[data-page="signin"] .duc-hdr__signin{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
@media (hover:hover){body[data-page="signin"] .duc-hdr__signin:hover{background:var(--ink);color:#FFFFFF}}
/* FOUNDER OVERRIDE 2026-09-12 — "in the account page I'm seeing three logos - its too much. just the main logo is fine".
   The only logo on a member screen is the header brand mark, so the chip's 28px birds disc and the 44px birds button that
   sat beside the burger are both gone (reverses that detail of CL-046/CL-048). The chip is now the address alone: the
   left padding goes 8 → 16 so it is symmetric, and the 9px gap that spaced the disc from the address goes with it.
   Height is unchanged at 44px, and below 900px the chip is still display:none — the dropdown's Account item is the
   phone entry point. */
.duc-hdr__chip{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--glass-16);color:var(--ink);text-decoration:none;max-width:100%;transition:background .15s ease}
@media (hover:hover){.duc-hdr__chip:hover{background:#FFFFFF;color:var(--ink)}}
.duc-hdr__chip-email{font-size:12.5px;font-weight:500;color:var(--ink);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duc-hdr__menu-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.78);border:1px solid var(--glass-16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;cursor:pointer;flex:none;font-family:inherit}
.duc-hdr__bar{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s ease}
.duc-hdr__menu-btn[aria-expanded="true"] .duc-hdr__bar:first-child{transform:translateY(3.5px) rotate(45deg)}
.duc-hdr__menu-btn[aria-expanded="true"] .duc-hdr__bar:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.duc-hdr__scrim{position:fixed;inset:0;z-index:-1;background:transparent}
.duc-hdr__menu{position:absolute;left:16px;right:16px;top:calc(100% + 8px);display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.97);border:1px solid rgba(18,22,27,.12);border-radius:22px;padding:8px;box-shadow:var(--sh-menu);animation:duc-fade .2s ease both}
.duc-hdr__menu-item{min-height:48px;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:14px;font-size:16px;font-weight:600;color:var(--nav);text-decoration:none}
@media (hover:hover){.duc-hdr__menu-item:hover{color:var(--nav)}}
.duc-hdr__menu-item[aria-current="page"]{background:#F3F1EA;color:var(--teal);font-weight:700}
.duc-hdr__menu-item[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.duc-hdr__menu--has-current .duc-hdr__menu-item:not([aria-current="page"]){padding-left:32px}
.duc-hdr__menu-pills{display:flex;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid rgba(18,22,27,.1)}
.duc-hdr__menu-pill{flex:1;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-size:14.5px;cursor:pointer;font-family:inherit;text-decoration:none;padding:0;transition:background .15s ease}
.duc-hdr__menu-pill--outline{border:1px solid var(--glass-18);background:transparent;color:var(--ink);font-weight:600}
@media (hover:hover){.duc-hdr__menu-pill--outline:hover{background:#FFFFFF;color:var(--ink)}}
.duc-hdr__menu-pill--teal{border:none;background:var(--teal);color:#FFFFFF;font-weight:700}
@media (hover:hover){.duc-hdr__menu-pill--teal:hover{background:var(--teal-hover);color:#FFFFFF}}
/* wide ≥ 900: no menu button, no dropdown — the chip is the account entry */
@media (min-width:900px){
  .duc-hdr__menu-btn,.duc-hdr__menu,.duc-hdr__scrim{display:none!important}
}
/* compact < 900: nav + pill collapse into the menu (CL-048) */
@media (max-width:899px){
  .duc-hdr__nav,.duc-hdr__signin,.duc-hdr__chip{display:none!important}
  /* home + join: FOUNDER OVERRIDE 2026-09-12 (item 5) — reverses I1a and the board (dc/WebHomeMobile.dc.html :28-37).
     The board's see-through overlay nav with its paper-to-nothing gradient let headings and cards show through as the page
     scrolled under it. The bar is now the solid paper bar every other page uses — paper ground, 1px hairline partition —
     inheriting both from .duc-hdr above. Only the compact geometry of the mobile board is kept: a 78px strip
     (12 + 44 + 22) + the hairline, the 40px brand mark, the menu button where it sits. Every other page keeps the 88px bar. */
  body[data-page="home"] .duc-hdr__inner,body[data-page="join"] .duc-hdr__inner{min-height:0;padding:12px 20px 22px;gap:12px}
  body[data-page="home"] .duc-hdr__brand,body[data-page="join"] .duc-hdr__brand{gap:12px;min-height:44px}   /* 40px mark, 44px link target */
  body[data-page="home"] .duc-hdr__logo,body[data-page="join"] .duc-hdr__logo{width:40px;height:40px}
  body[data-page="home"] .duc-hdr__brand-name,body[data-page="join"] .duc-hdr__brand-name{font-size:14px}
  body[data-page="home"] .duc-hdr__tm,body[data-page="join"] .duc-hdr__tm{font-size:8px}
  body[data-page="home"] .duc-hdr__brand-sub,body[data-page="join"] .duc-hdr__brand-sub{font-size:10.5px}
  body[data-page="home"] .duc-hdr__right,body[data-page="join"] .duc-hdr__right{flex:none}
  /* the dropdown hangs off the bar's own bottom edge (the shared calc(100% + 8px) = 86px); the board's 72px belonged to
     the transparent overlay and would now cross the solid bar — founder override 2026-09-12 */
  /* /join only: 96px is right for the 88px bar, but this page's bar is the 78px compact one and #story is the pinned hero
     act, whose own copy starts 94px in — so it lands at 0 and the h1 still clears the bar by 15px, while a 96px offset left
     the "Not convinced yet?" pill's target 96px off-frame (board: #story lands at 0) — F5, re-measured under the
     2026-09-12 solid bar. Home keeps the 96px offset: its #join anchor is a build addition the mobile board does not draw
     (the board's hero CTA navigates to the join PAGE), and R-fid-mob measured that landing as correct. */
  html:has(body[data-page="join"]){scroll-padding-top:0}
}

/* ---------- 5. Blueprint ground — README L55 · dc/WEB home v2.dc.html :31-71 ---------- */
.duc-ground{position:fixed;inset:0;pointer-events:none;z-index:0}
.duc-ground__forest{position:absolute;inset:0;opacity:0}            /* WP-2 drives this layer (scenery → blog) */
.duc-ground__grid{position:absolute;inset:0;background:radial-gradient(rgba(18,22,27,.055) 1px,transparent 1px);background-size:26px 26px;opacity:.5}
.duc-ground__rule{position:absolute;background:var(--rule)}
.duc-ground__rule--l{left:84px;top:0;bottom:0;width:1px}
.duc-ground__rule--r{right:84px;top:0;bottom:0;width:1px}
.duc-ground__rule--h{left:0;right:0;top:88px;height:1px}
.duc-ground__decor{position:absolute;inset:0}                       /* WP-1 story decor hook (DC :39-60) */
.duc-ground__mark{position:absolute;font-family:var(--font-mono);line-height:normal}
.duc-ground__mark--01{left:24px;top:20px;font-size:11px;font-weight:600;color:var(--blue)}
.duc-ground__mark--id{right:24px;top:20px;font-size:11px;font-weight:600;letter-spacing:.8px;color:var(--mono-3)}
.duc-ground__mark--section{left:24%;top:94px;font-size:10px;font-weight:500;letter-spacing:1.4px;color:var(--mono-2);white-space:nowrap}
.duc-ground__mark--axis{font-size:10px;font-weight:500;letter-spacing:1px;color:var(--mono-2);display:flex;flex-direction:column;gap:4px}
.duc-ground__mark--yl{left:24px;top:44%}
.duc-ground__mark--yr{right:24px;top:44%}
.duc-ground__mark--xl{left:24px;bottom:8%}
.duc-ground__mark--xr{right:24px;bottom:8%}
/* < 900: the mobile board's ground — grid @.04, guide rules 20px in (dc/WebHomeMobile.dc.html:24) */
@media (max-width:899px){
  .duc-ground__grid{background:radial-gradient(rgba(18,22,27,.04) 1px,transparent 1px);background-size:26px 26px;opacity:1}
  .duc-ground__rule--l{left:20px}
  .duc-ground__rule--r{right:20px}
  /* home + join: the mobile board has no page-level marks — the story panel draws its own (dc/WebHomeMobile.dc.html :101-102) */
  body[data-page="home"] .duc-ground__mark,body[data-page="join"] .duc-ground__mark{display:none}
  /* home + join: no ground rule at 88px — this bar is 78 + 1, so its own hairline is the partition and a second line 9px
     below it would read as a stray. The mobile board's ground stays the dot grid and the two 20px guides
     (dc/WebHomeMobile.dc.html :24) — I1a, kept under the founder's 2026-09-12 solid-bar override */
  body[data-page="home"] .duc-ground__rule--h,body[data-page="join"] .duc-ground__rule--h{display:none}
}

/* ---------- 6. Page composition wrappers (dc/WEB home v2.dc.html :95-114 · WEB join.dc.html :95-117 · WebHomeMobile :196-206) ---------- */
.duc-main{position:relative}
.duc-sec{position:relative;z-index:1}
.duc-sec--pricing{padding:40px 116px 80px}
.duc-sec--pricing-join{padding-bottom:40px}
.duc-sec--join{padding:100px 0 40px}
.duc-sec--scenery{margin-top:60px}
.duc-sec--blog{padding:150px 0 120px}
@media (max-width:899px){
  .duc-sec--pricing,.duc-sec--pricing-join{padding:64px 24px 16px}
  .duc-sec--join{padding:72px 0 16px}
  .duc-sec--scenery{margin-top:32px}
  .duc-sec--blog{padding:110px 0 90px}
}
.duc-join-first{position:relative;z-index:1;min-height:96vh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 40px;box-sizing:border-box}
/* < 900: no mobile /join board — README L42 "the mobile-home layout with the join section first": the join box starts where
   the mobile hero's h1 does, 94px from the top under the overlay nav (dc/WebHomeMobile.dc.html :76), not centred in 96vh — I1a */
@media (max-width:899px){
  .duc-join-first{min-height:0;justify-content:flex-start;padding-top:94px}
}
.duc-join-more{position:relative;z-index:1;display:flex;justify-content:center;padding:24px 24px 90px}
.duc-join-more__pill{box-sizing:content-box;min-height:48px;display:inline-flex;align-items:center;gap:10px;padding:0 24px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(18,22,27,.2);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .15s ease}
@media (hover:hover){.duc-join-more__pill:hover{background:#FFFFFF;color:var(--ink)}}
/* placeholder document pages (privacy · terms — D12) */
.duc-doc{position:relative;z-index:1;padding:calc(var(--header-h) + 48px) var(--gutter) 96px;min-height:60vh}
.duc-doc__inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.duc-doc__title{margin:0;font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:32px;color:var(--ink)}
.duc-doc__line{margin:0;font-size:15px;line-height:1.55;color:var(--body2);max-width:620px;text-wrap:pretty}
.duc-doc__link{color:var(--blue);font-weight:600;text-decoration:underline}
@media (hover:hover){.duc-doc__link:hover{color:var(--blue)}}
.duc-doc .duc-legal-banner{align-self:flex-start}

/* ---------- 7. Legal draft banner (plan §2.2 — build notice, not legal copy) ---------- */
.duc-legal-banner{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.4px;line-height:1.5;padding:10px 14px;border-radius:10px;background:var(--warm-tint);color:var(--warm-hover);border:1px solid var(--warm-border);text-wrap:pretty}

/* ---------- 8. Footer — dc/SiteFooter.dc.html :19-67 · D12 routes · D15 identity · A-6 link colour ---------- */
.duc-ftr{position:relative;z-index:1;width:100%;background:#12161B;color:#FFFFFF;font-family:var(--font-ui);line-height:normal}
.duc-ftr__inner{width:var(--rail);max-width:var(--container);margin:0 auto;padding:72px 0 36px;box-sizing:border-box;display:flex;flex-direction:column;gap:56px}
.duc-ftr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(150px,(100% - 96px) / 4)),1fr));gap:40px 32px}
.duc-ftr__col{display:flex;flex-direction:column;gap:14px}
.duc-ftr__col--brand{gap:22px;min-width:0}
.duc-ftr__brand{display:flex;align-items:center;gap:12px}
.duc-ftr__logo{width:44px;height:44px;flex:none;filter:brightness(0) invert(1);display:block}
.duc-ftr__brand-name{font-size:15.5px;font-weight:800;letter-spacing:.2px;color:#FFFFFF}
.duc-ftr__tm{font-size:9px;vertical-align:super}
.duc-ftr__brand-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,.6);margin-top:1px}
.duc-ftr__strap{margin:0;max-width:360px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);text-wrap:pretty}
.duc-ftr__company{display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.55)}
.duc-ftr__todo{text-decoration:underline dotted rgba(253,234,226,.7);text-underline-offset:3px}
.duc-ftr__label{font-size:13px;letter-spacing:-.08px;color:rgba(255,255,255,.5)}
.duc-ftr__link{font-size:15px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.78);text-decoration:none;min-height:0}   /* stretches to the column as the board does — F7 */
@media (hover:hover){.duc-ftr__link:hover{color:#FFFFFF}}
.duc-ftr .duc-legal-banner{margin-bottom:-32px}
.duc-ftr__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.duc-ftr__copy{font-size:12px;color:rgba(255,255,255,.55)}
.duc-ftr__gdpr{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.55)}
.duc-ftr__gdpr svg{flex:none}

/* ---------- 9. Shared primitives (plan §2.3 — class names fixed) ---------- */
/* Buttons. Base = the 48px ink pill of the sign-in page (dc/WEB signin.dc.html S:114/170, primary()). */
.duc-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 26px;border-radius:999px;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.2px;border:none;cursor:pointer;text-decoration:none;box-sizing:border-box;white-space:nowrap;transition:background .15s ease,opacity .15s ease,color .15s ease}
.duc-btn--ink{background:var(--ink);color:#FFFFFF}
@media (hover:hover){.duc-btn--ink:hover{background:var(--ink-hover);color:#FFFFFF}}
.duc-btn--ink:active{transform:translateY(2px)}
.duc-btn--teal{min-height:52px;padding:0 30px;gap:10px;background:var(--teal);color:#FFFFFF;font-size:16.5px;font-weight:700;letter-spacing:0;box-shadow:var(--sh-cta)}   /* hero CTA, dc/SiteStory.dc.html:36 */
@media (hover:hover){.duc-btn--teal:hover{background:var(--teal-hover);color:#FFFFFF}}
.duc-btn--outline{background:#FFFFFF;color:var(--ink);border:1px solid var(--ink)}                 /* pricing outline CTA, SitePricing :63-64 */
@media (hover:hover){.duc-btn--outline:hover{filter:brightness(.96);color:var(--ink)}}
.duc-btn--ghost{background:#FFFFFF;color:var(--ink);border:1px solid var(--hair)}                  /* pricing ghost CTA */
@media (hover:hover){.duc-btn--ghost:hover{background:var(--card-hover);color:var(--ink)}}
.duc-btn--paper{background:rgba(255,255,255,.72);color:var(--ink);border:1px solid rgba(18,22,27,.2);font-size:16.5px;font-weight:700;letter-spacing:0;min-height:52px;padding:0 28px;gap:10px}   /* "See how it works", SiteStory :37 */
@media (hover:hover){.duc-btn--paper:hover{background:#FFFFFF;color:var(--ink)}}
.duc-btn--current{background:var(--field);color:var(--muted);cursor:default;pointer-events:none}   /* "Your current plan" */
.duc-btn--warm{background:var(--warm);color:#FFFFFF}                                               /* "Yes, delete my account" */
@media (hover:hover){.duc-btn--warm:hover{background:var(--warm-hover);color:#FFFFFF}}
.duc-btn--warm-outline{background:#FFFFFF;color:var(--warm);border:1px solid var(--warm-border)}   /* "Delete account…" */
@media (hover:hover){.duc-btn--warm-outline:hover{background:var(--warm-tint);color:var(--warm-hover)}}
.duc-btn--warm-tint{background:var(--warm-tint);color:var(--warm-hover)}                                 /* "Change password ↗" */
@media (hover:hover){.duc-btn--warm-tint:hover{filter:brightness(.97);color:var(--warm-hover)}}
.duc-btn--hair{background:#FFFFFF;color:var(--ink);border:1px solid var(--hair);font-weight:500}   /* "Mark as fixed" / "Keep my account" */
@media (hover:hover){.duc-btn--hair:hover{background:var(--card-hover);color:var(--ink)}}
.duc-btn--sm{min-height:36px;padding:0 14px;border-radius:10px;font-size:13.5px;gap:7px;letter-spacing:0}          /* 36px secondary actions (README §5) */
.duc-btn--xs{min-height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;gap:6px;letter-spacing:0} /* "Add" / "Re-scan now" */
.duc-btn--block{width:100%}
.duc-btn--text{min-height:0;background:none;border:none;padding:0;font-size:13px;font-weight:600;color:var(--blue);letter-spacing:0;border-radius:4px} /* text links (S:115/137) */
@media (hover:hover){.duc-btn--text:hover{text-decoration:underline;color:var(--blue)}}
.duc-btn:disabled,.duc-btn[aria-disabled="true"],.duc-btn.is-off{opacity:.45;pointer-events:none;cursor:default}
.duc-btn--xs:disabled,.duc-btn--xs[aria-disabled="true"]{opacity:1;border-color:transparent;background:transparent;color:var(--placeholder)} /* "In your network" */

/* Status pills — mono 10.5/600 tracking .8 (dc/WEB signin.dc.html pill()) */
.duc-pill{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.8px;padding:4px 9px;border-radius:999px;white-space:nowrap;flex:none}
.duc-pill--blue{background:var(--blue-tint);color:var(--blue)}
.duc-pill--teal{background:var(--teal-tint);color:var(--teal)}
.duc-pill--warm{background:var(--warm-tint);color:var(--warm-hover)}
.duc-pill--neutral{background:var(--broker-bg);color:var(--broker-fg)}
/* Count badge in the rail (breachBadgeS) */
.duc-badge{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--teal-tint);color:var(--teal)}
.duc-badge--warm{background:var(--warm-tint);color:var(--warm-hover)}

/* Field — 48px, r10, #F2F2F7 (S:109-112); --search = 44px r10 (S:252-256) */
.duc-field{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:10px;background:var(--field);box-sizing:border-box;transition:box-shadow .15s ease}
.duc-field:focus-within{box-shadow:0 0 0 4px var(--focus-ring)}
.duc-field > input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:16px;color:var(--ink);font-family:inherit;padding:0;height:100%}
.duc-field__ico{flex:none;color:var(--placeholder);display:inline-flex}
.duc-field--search{height:44px;padding:0 12px;gap:8px}
.duc-field__clear{width:28px;height:28px;border-radius:14px;border:none;background:rgba(18,22,27,.08);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex:none;color:var(--ink)}

/* Six code cells — flex 1, 56px, r10 (S:163-167, c.s) */
.duc-code-cells{display:flex;gap:8px}
.duc-code-cells > input{flex:1 1 0;width:0;min-width:0;height:56px;border-radius:10px;border:1.5px solid var(--code-border);box-shadow:none;text-align:center;font-size:22px;font-weight:700;color:var(--ink);background:#FFFFFF;outline:none;font-family:inherit;padding:0;box-sizing:border-box}
.duc-code-cells > input:focus,.duc-code-cells > input:focus-visible{border:2px solid var(--blue);box-shadow:0 0 0 4px var(--focus-ring);outline:none}
.duc-code-cells--fixed{justify-content:center;gap:10px;flex-wrap:wrap}     /* join section: 46px cells (SiteJoin :526) */
.duc-code-cells--fixed > input{flex:none;width:46px}

/* Consent check — 20px r6 (S:150-153, SiteJoin :49-51) */
.duc-check-row{display:flex;align-items:flex-start;gap:11px}
.duc-check{width:20px;height:20px;border-radius:6px;border:1.5px solid #B9B3A6;background:#FFFFFF;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-top:1px;transition:background .15s ease,border-color .15s ease;font-family:inherit}
.duc-check svg{display:none}
.duc-check[aria-checked="true"]{border-color:var(--ink);background:var(--ink)}
.duc-check[aria-checked="true"] svg{display:block}
.duc-check-label{flex:1;font-size:13px;line-height:1.55;color:var(--body2);cursor:pointer;text-wrap:pretty}
.duc-check-label a{color:var(--ink);font-weight:600;text-decoration:underline}
@media (hover:hover){.duc-check-label a:hover{color:var(--ink)}}
.duc-todo-legal{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.8px;color:var(--mono-4);white-space:nowrap}

/* Radio card — plan choice (S:120-139, p.s / p.ringS) */
.duc-radio-group{display:flex;flex-direction:column;gap:8px}
.duc-radio-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--hair);box-shadow:none;background:#FFFFFF;cursor:pointer;font-family:inherit;text-align:left;box-sizing:border-box;color:var(--ink);transition:border-color .15s ease,background .15s ease}
@media (hover:hover){.duc-radio-card:hover{background:var(--card-hover)}}
.duc-radio-card[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.duc-radio-card__ring{width:20px;height:20px;border-radius:10px;flex:none;border:1.5px solid #C7C2B6;background:#FFFFFF;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.duc-radio-card__ring svg{display:none}
.duc-radio-card[aria-checked="true"] .duc-radio-card__ring{border:none;background:var(--blue)}
.duc-radio-card[aria-checked="true"] .duc-radio-card__ring svg{display:block}
.duc-radio-card__body{flex:1;min-width:0}
.duc-radio-card__name{font-size:15px;font-weight:600;line-height:20px;color:var(--ink)}
.duc-radio-card__sub{display:block;font-size:13px;line-height:18px;color:var(--muted);margin-top:2px;text-wrap:pretty}
.duc-radio-card__price{font-size:17px;font-weight:700;letter-spacing:-.4px;color:var(--ink);white-space:nowrap}
.duc-radio-card__per{font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0}
.duc-radio-card__badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-size:11px;font-weight:600;margin-left:8px;vertical-align:middle}

/* Switch — 44×26, ink when on (A-30), 20px knob (S:532-533) */
.duc-switch{position:relative;width:44px;height:26px;border-radius:13px;border:none;padding:0;background:var(--hair);cursor:pointer;flex:none;transition:background .2s ease;font-family:inherit}
.duc-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:10px;background:#FFFFFF;box-shadow:var(--sh-knob);transition:left .2s ease}
.duc-switch[aria-checked="true"]{background:var(--ink)}
.duc-switch[aria-checked="true"]::after{left:21px}

/* Choice chip — 32px r999, no prefix/tick/glow (A-14; SiteJoin :380, S:535) */
.duc-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.duc-chip-row--tight{gap:6px}
.duc-chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:none;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s ease;background:var(--field);color:var(--chip-fg);white-space:nowrap}
@media (hover:hover){.duc-chip:hover{filter:brightness(.96)}}
.duc-chip[aria-pressed="true"],.duc-chip[aria-checked="true"],.duc-chip.is-on{background:var(--ink);color:#FFFFFF;font-weight:600}

/* Card · row · group label (README §5 card vocabulary; S:349-364) */
.duc-card{background:#FFFFFF;border:1px solid var(--hair);border-radius:16px}
.duc-card--rows{padding:2px 15px}
.duc-card--pad{padding:14px 15px 15px}
.duc-card--flat{padding:14px 16px}
.duc-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0}
.duc-row + .duc-row{border-top:1px solid var(--field)}
.duc-row__body{flex:1;min-width:180px}
.duc-row__title{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:20px;color:var(--ink)}
.duc-row__sub{font-size:13px;line-height:18px;color:var(--muted);margin-top:2px;text-wrap:pretty}
.duc-row__end{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.duc-row--link{min-height:48px;padding:0;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;flex-wrap:nowrap}
@media (hover:hover){.duc-row--link:hover{color:var(--ink)}}
.duc-row--link > span{flex:1}
.duc-group{display:flex;flex-direction:column;gap:8px}
.duc-group-label{display:flex;align-items:baseline;gap:8px;padding-left:12px;font-size:13px;font-weight:400;letter-spacing:-.08px;color:var(--muted)}
.duc-group-label .duc-mono{font-size:12px;font-weight:600}
.duc-note{padding-left:12px;font-size:12px;line-height:17px;color:var(--muted);text-wrap:pretty}

/* Monogram disc — two letters, 600, UI font (house rule 1); sizes 32/40/44 (disc()) */
.duc-mono-disc{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;font-weight:600;font-size:13px;background:var(--blue-tint);color:var(--blue);font-family:var(--font-ui);letter-spacing:0}
.duc-mono-disc--32{width:32px;height:32px;font-size:12px}
.duc-mono-disc--40{width:40px;height:40px;font-size:13px}
.duc-mono-disc--44{width:44px;height:44px;font-size:13px}
.duc-mono-disc--blue{background:var(--blue-tint);color:var(--blue)}
.duc-mono-disc--warm{background:var(--warm-tint);color:var(--warm-hover)}
.duc-mono-disc--teal{background:var(--teal-tint);color:var(--teal)}
.duc-mono-disc--broker{background:var(--broker-bg);color:var(--broker-fg)}

/* Segmented control — pill track (member strip, S:227-231, seg()); --ios = the 34px iOS-style track (SitePricing :24-26, SiteJoin :464) */
.duc-seg{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(18,22,27,.14);background:rgba(255,255,255,.4);box-sizing:border-box}
.duc-seg__btn{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border:none;padding:0 8px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--body3);background:transparent;box-shadow:none;transition:background .3s ease,box-shadow .3s ease}
.duc-seg__btn[aria-selected="true"],.duc-seg__btn[aria-checked="true"],.duc-seg__btn.is-on{font-weight:700;color:var(--ink);background:#FFFFFF;box-shadow:var(--sh-seg)}
.duc-seg--ios{height:34px;gap:2px;padding:2px;border-radius:9px;border:none;background:rgba(118,118,128,.12)}
.duc-seg--ios .duc-seg__btn{min-height:0;height:30px;border-radius:7px;font-size:13px;letter-spacing:-.1px;color:var(--ink);font-weight:500;transition:background .15s ease}
.duc-seg--ios .duc-seg__btn[aria-selected="true"],.duc-seg--ios .duc-seg__btn[aria-checked="true"],.duc-seg--ios .duc-seg__btn.is-on{background:#FFFFFF;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12);color:var(--ink)}

/* Scan strip — r12, #F2F2F7, min 44 (S:308-317) */
.duc-scan-strip{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px 6px 14px;border-radius:12px;background:var(--field);flex-wrap:wrap;box-sizing:border-box}
.duc-scan-strip__text{flex:1;min-width:180px;font-size:13px;line-height:18px;color:var(--muted)}
.duc-scan-strip__text .duc-mono{color:var(--ink)}
.duc-scan-strip__bar{width:52px;height:5px;border-radius:3px;background:rgba(18,22,27,.10);overflow:hidden;flex:none;display:block}
.duc-scan-strip__fill{display:block;height:5px;width:100%;border-radius:3px;background:rgba(18,22,27,.22);transition:width .12s linear}
.duc-scan-strip__fill--blue{background:var(--blue)}
.duc-scan-strip__fill--teal{background:var(--teal-status)}
/* Status dots — colour only for status (house rule 2) */
.duc-dot{width:8px;height:8px;border-radius:4px;flex:none;background:var(--teal-status)}
.duc-dot--blue{background:var(--blue)}
.duc-dot--teal{background:var(--teal-status)}
.duc-dot--warm{background:var(--warm)}
.duc-dot--neutral{background:var(--placeholder)}
.duc-dot--pulse{animation:duc-pulse 1.4s ease-in-out infinite}
.duc-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--teal)}
/* Page icon (member tabs, Q5) — 76px r20, shadow --sh-icon */
.duc-page-icon{width:76px;height:76px;border-radius:20px;background:#FFFFFF;border:1px solid var(--hair);box-shadow:var(--sh-icon);display:flex;align-items:center;justify-content:center;position:relative}
/* Error / resend lines (S:113, 168, 169) */
.duc-error{margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--warm-hover)}
.duc-sent{margin:12px 0 0;font-size:12.5px;font-weight:600;color:var(--teal-status)}
.duc-footnote{margin:22px 0 0;font-size:13px;line-height:18px;color:var(--body3)}
.duc-mono-foot{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:1px;color:var(--mono-4)}

/* ---------- 10. Keyframes (README §Interactions; dc helmets) ---------- */
@keyframes duc-fade{from{opacity:0}to{opacity:1}}
@keyframes duc-in-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes duc-pulse{0%,100%{opacity:.35}50%{opacity:.9}}
.duc-fade{animation:duc-fade .3s ease both}
.duc-in-up{animation:duc-in-up .36s cubic-bezier(.2,.7,.2,1) both}

/* ---------- 11. Reduced motion (A-32) — every package inherits this ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}