/* duc-join.css — WP-3 Join section (BUILD_PLAN §3 WP-3). Source of truth: dc/SiteJoin.dc.html
   (every value below is measured there) with the founder rulings A-10/A-11/A-14/A-15/A-16/A-25.
   Tokens come from duc-core.css; each has its DC fallback so the section renders on its own.
   Keyframes are namespaced duc-join-* (the join DC's in-up is a 56px rise, duc-core's is the 18px
   auth rise — never share the name). */

/* #join anchors land at header + 24: duc-core's html{scroll-padding-top:96px} plus the 16px margin below. A full
   header-height margin added up with the padding (the label landed at 208px) — I1a */
.duc-join{position:relative;width:var(--rail,calc(100% - clamp(48px,(100% - 700px) * 10,232px)));margin:0 auto;font-family:var(--font-ui,-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,'Segoe UI',Roboto,Arial,sans-serif);color:var(--ink,#12161B);scroll-margin-top:16px;box-sizing:border-box}
.duc-join *,.duc-join *::before,.duc-join *::after{box-sizing:border-box}
.duc-join [hidden]{display:none!important}
.duc-join :where(button){font-family:inherit;margin:0}   /* :where keeps this reset below any BEM class */
/* focus ring: duc-core :focus-visible (3px blue, offset 2) applies unchanged */
.duc-join__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.duc-join .duc-mono{font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace)}

/* ── email start (SiteJoin.dc.html:40-57) ─────────────────────────────────── */
.duc-join__start{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0}
.duc-join__label{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.75);border:1px solid rgba(18,22,27,.16);border-radius:999px;padding:8px 17px}
.duc-join__label-star{font-size:13px;color:var(--teal,#056A61);animation:duc-join-pulse 5s ease-in-out infinite;line-height:0}
.duc-join__label-text{font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:11px;font-weight:600;letter-spacing:1.3px;color:var(--mono-4,#5D6355)}
.duc-join__title{margin:20px 0 0;font-size:clamp(36px,6vw,78px);line-height:1.03;letter-spacing:-.035em;font-weight:800;color:var(--ink,#12161B);max-width:900px}
.duc-join__title-accent{color:var(--teal,#056A61)}
.duc-join__sub{margin:20px auto 0;max-width:600px;font-size:18.5px;line-height:1.6;color:var(--body2,#3E4A55);text-wrap:pretty}

.duc-join__email{margin:34px auto 0;width:100%;max-width:580px;display:flex;align-items:center;gap:10px;background:#FFFFFF;border:1px solid rgba(18,22,27,.2);border-radius:18px;padding:8px 8px 8px 18px;box-shadow:0 18px 40px rgba(24,44,84,.12)}
.duc-join__email:focus-within{border-color:var(--blue,#0070A0);box-shadow:0 18px 40px rgba(24,44,84,.12),0 0 0 4px var(--focus-ring,rgba(0,112,160,.14))}
.duc-join__email-icon{flex:none}
.duc-join__email-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:16px;font-weight:500;color:var(--ink,#12161B);padding:12px 0;margin:0;font-family:inherit;border-radius:0}
.duc-join__email-input::placeholder{color:var(--placeholder,#8E8E93);opacity:1}
.duc-join__email-input:focus-visible{outline:none}

/* tactile button = Start my scan / Unlock my results (DC tactile(), :457) */
.duc-join__tactile{flex:none;min-height:50px;padding:0 24px;border-radius:12px;background:var(--teal,#056A61);color:#FFFFFF;font-size:15.5px;font-weight:800;border:2px solid var(--ink,#12161B);box-shadow:0 5px 0 var(--ink,#12161B);cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:transform .08s ease,box-shadow .08s ease,background .15s ease,opacity .15s ease}
.duc-join__tactile:hover{background:#04766C}
.duc-join__tactile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink,#12161B)}
.duc-join__tactile:disabled{opacity:.45;pointer-events:none;cursor:default}
.duc-join__tactile[aria-busy="true"]{opacity:.7}
.duc-join__tactile svg{flex:none}
/* founder item 2 (2026-09-12): the button inside the field clipped the placeholder on a phone — the input was
   93.6px wide at 390 and 63.6px at 360 for a 140px placeholder. Below 480px the label is the short one and the
   arrow goes; below 360px the decorative envelope goes too. Input after: 205.9px at 390, 175.9px at 360,
   161.9px at 320 — the placeholder always fits. Desktop is untouched. */
.duc-join__tactile-short{display:none}
@media (max-width:479px){
  .duc-join__email{gap:8px;padding:8px 8px 8px 14px}
  .duc-join__email .duc-join__tactile{padding:0 18px}
  .duc-join__email .duc-join__tactile svg{display:none}
  .duc-join__tactile-long{display:none}
  .duc-join__tactile-short{display:inline}
}
@media (max-width:359px){
  .duc-join__email-icon{display:none}
}

.duc-join__consent{margin:16px auto 0;width:100%;max-width:580px;display:flex;align-items:flex-start;gap:11px;text-align:left;padding:0 6px}
.duc-join .duc-check{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #B9B3A6;background:#FFFFFF;flex:none;margin:1px 0 0;padding:0;cursor:pointer;display:inline-block;transition:background .15s ease,border-color .15s ease}
.duc-join .duc-check:checked{border-color:var(--ink,#12161B);background:var(--ink,#12161B) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.duc-join__consent-label{flex:1;font-size:13px;line-height:1.55;color:var(--body2,#3E4A55);cursor:pointer;text-wrap:pretty}
.duc-join__consent-label a{color:var(--ink,#12161B);font-weight:600;text-decoration:underline}
.duc-join__todo{font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:9.5px;font-weight:600;letter-spacing:.8px;color:var(--mono-4,#5D6355);white-space:nowrap}
.duc-join__err{margin:10px auto 0;max-width:580px;font-size:12.5px;font-weight:600;line-height:18px;color:var(--warm-hover,#B03A15);text-align:center}
.duc-join__err:empty{display:none}
.duc-join__small{margin:14px auto 0;max-width:540px;font-size:11.5px;line-height:1.65;color:var(--body3,#5D6A75)}
.duc-join__small a{color:var(--body3,#5D6A75);font-weight:600;text-decoration:underline}
.duc-join__lock{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace);font-size:11px;font-weight:600;letter-spacing:1.1px;color:var(--mono-4,#5D6355)}
.duc-join__lock svg{flex:none}

/* ── stage + sticky status bar (:62-72) ───────────────────────────────────── */
.duc-join__stage{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:110px 0 100px}
.duc-join__bar{position:sticky;top:100px;z-index:5;width:100%;max-width:780px;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 0}
.duc-join__strip{box-sizing:content-box;flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;background:#FFFFFF;border:1px solid var(--hair,#E5E5EA);box-shadow:0 8px 24px rgba(24,44,84,.08)}
.duc-join__strip-dot{width:8px;height:8px;border-radius:4px;background:var(--blue,#0070A0);flex:none}
.duc-join__strip-line{flex:1;min-width:0;font-size:13px;font-weight:400;color:var(--muted,#6D6D72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duc-join__progress{width:52px;height:5px;border-radius:3px;background:rgba(18,22,27,.10);overflow:hidden;flex:none;display:block}
.duc-join__progress-fill{display:block;height:5px;width:14%;border-radius:3px;background:var(--blue,#0070A0);transition:width .9s ease}
.duc-join__dots{flex:none;display:flex;gap:3px;align-items:center}
.duc-join__dots span{display:inline-block;height:6px;width:6px;border-radius:3px;background:rgba(18,48,74,.18);transition:all .4s ease}
.duc-join__dots span.is-past{background:rgba(0,112,160,.45)}
.duc-join__dots span.is-cur{width:18px;background:var(--blue,#0070A0)}
.duc-join__step{flex:none;font-size:12px;font-weight:600;color:var(--body3,#5D6A75)}   /* sits beside the strip on the page ground — F1 */
.duc-join__body{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding-top:28px}

/* ── question card (cardBase :421, cardS/cardCenterS :483-484) ───────────── */
.duc-join__card{width:100%;max-width:780px;background:#FFFFFF;border:1px solid var(--hair,#E5E5EA);border-radius:16px;padding:30px 32px;outline:none}
.duc-join__card--center{padding:38px 32px;text-align:center}
@media (max-width:479px){.duc-join__card--center{padding:38px 18px}}   /* founder item 4: the code row needs the width */
.duc-join__card.is-in-up{animation:duc-join-in-up .36s cubic-bezier(.2,.7,.2,1) both}
.duc-join__card.is-in-down{animation:duc-join-in-down .36s cubic-bezier(.2,.7,.2,1) both}
.duc-join__card.is-out-up{animation:duc-join-out-up .18s ease-in both}
.duc-join__card.is-out-down{animation:duc-join-out-down .18s ease-in both}
.duc-join__q{margin:0;font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:32px;color:var(--ink,#12161B);text-wrap:pretty}
.duc-join__qsub{margin:3px 0 0;font-size:14px;line-height:20px;color:var(--muted,#6D6D72);max-width:560px;text-wrap:pretty}
.duc-join__vlabel{font-size:13px;font-weight:400;letter-spacing:-.08px;color:var(--muted,#6D6D72)}
.duc-join__vlabel + .duc-join__q{margin-top:4px}
.duc-join__col{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.duc-join__group{display:flex;flex-direction:column;gap:8px}
.duc-join .duc-group-label{padding-left:12px;font-size:13px;font-weight:400;letter-spacing:-.08px;color:var(--muted,#6D6D72)}
.duc-join__chips{display:flex;flex-wrap:wrap;gap:8px}
.duc-join__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--field,#F2F2F7);flex-wrap:wrap}
.duc-join__caption{font-size:12px;font-weight:400;color:var(--muted,#6D6D72)}
.duc-join__btns{display:flex;align-items:center;gap:6px}
.duc-join__continue{min-height:48px;padding:0 26px;border-radius:999px;background:var(--ink,#12161B);color:#FFFFFF;font-size:15px;font-weight:600;letter-spacing:-.2px;border:none;display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:background .15s ease}
.duc-join__continue:hover{background:var(--ink-hover,#28313B)}
.duc-join__continue:active{transform:translateY(2px)}
.duc-join__skip{min-height:48px;background:none;border:none;font-size:14px;font-weight:600;color:var(--muted,#6D6D72);cursor:pointer;padding:0 14px}
.duc-join__skip:hover{text-decoration:underline}
.duc-join__hint{font-size:12px;color:var(--muted,#6D6D72);white-space:nowrap;padding-left:4px}
.duc-join__hint b{font-weight:600;color:var(--ink,#12161B)}

/* choice chip — A-14 / CL-036 item 1 (:380): 32px, r999, 0 14px, no border, no +/tick */
.duc-join .duc-chip{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s ease;background:var(--field,#F2F2F7);color:var(--chip-fg,#12304A);white-space:nowrap}
.duc-join .duc-chip::before{content:"";position:absolute;inset:-4px 0}   /* hit area 40px on the 40px row pitch */
.duc-join .duc-chip:hover{filter:brightness(.96)}
.duc-join .duc-chip[aria-pressed="true"]{background:var(--ink,#12161B);color:#FFFFFF;font-weight:600}

/* selection tile — CL-036 item 2 (:387, :86-90) */
.duc-join__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.duc-join__tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 12px;border-radius:14px;border:1px solid var(--hair,#E5E5EA);background:#FFFFFF;cursor:pointer;position:relative;transition:background .15s ease;text-align:center;color:var(--ink,#12161B)}
.duc-join__tile:hover{background:var(--card-hover,#FCFCFD)}
.duc-join__tile-disc{width:40px;height:40px;border-radius:20px;background:var(--blue-tint,#E1EEF5);color:var(--blue,#0070A0);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}
.duc-join__tile-name{font-size:12px;font-weight:600;color:var(--ink,#12161B);line-height:15px}
.duc-join__tile-badge{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:10px;background:var(--blue,#0070A0);display:none;align-items:center;justify-content:center}
.duc-join__tile[aria-pressed="true"] .duc-join__tile-badge{display:flex}

/* Q1 search (:80-82) */
.duc-join__search{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:10px;background:var(--field,#F2F2F7)}
.duc-join__search:focus-within{outline:3px solid var(--blue,#0070A0);outline-offset:2px}   /* same ring as duc-core :focus-visible */
.duc-join__search svg{flex:none}
.duc-join__search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:16px;color:var(--ink,#12161B);font-family:inherit;padding:0;margin:0;-webkit-appearance:none;appearance:none;border-radius:0}
.duc-join__search input::-webkit-search-decoration,.duc-join__search input::-webkit-search-cancel-button{-webkit-appearance:none}
.duc-join__search input::placeholder{color:var(--placeholder,#8E8E93);opacity:1}
.duc-join__search input:focus-visible{outline:none}

/* Q2 habits grid + section card (:112-113) — detail line #6D6D72 per A-16 (DC :115 drew #8E8E93) */
.duc-join__habits{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:18px}
.duc-join__sec{display:flex;flex-direction:column;padding:14px 15px 15px;border-radius:16px;background:#FFFFFF;border:1px solid var(--hair,#E5E5EA)}
.duc-join__sec-q{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:20px;color:var(--ink,#12161B);text-wrap:pretty}
.duc-join__sec-d{padding-top:3px;font-size:13px;line-height:18px;color:var(--muted,#6D6D72);text-wrap:pretty}

/* slider — CL-036 item 3 (:408-413, :116-124) */
.duc-join__dial{max-width:520px}
.duc-join__slider{position:relative;height:36px;margin-top:12px;touch-action:none;cursor:pointer;outline-offset:2px;border-radius:8px}
.duc-join__slider::before{content:"";position:absolute;inset:-4px 0}   /* hit area 44px */
.duc-join__slider-rail{position:absolute;left:0;right:0;top:16px;height:4px;border-radius:2px;background:var(--hair,#E5E5EA)}
.duc-join__slider-fill{position:absolute;left:0;top:16px;width:50%;height:4px;border-radius:2px;background:var(--blue,#0070A0)}
.duc-join__slider-thumb{position:absolute;left:50%;top:4px;width:28px;height:28px;margin-left:-14px;border-radius:14px;background:#FFFFFF;box-shadow:0 2px 6px rgba(18,30,50,.25),0 0 0 .5px rgba(18,30,50,.08);pointer-events:none}
.duc-join__ends{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted,#6D6D72)}
.duc-join__readout{padding-top:9px;font-size:13px;font-weight:600;color:var(--ink,#12161B)}

/* Q5 page icon + segmented control — CL-036 item 5 (:198-204, seg :464) */
.duc-join__icon{box-sizing:content-box;width:76px;height:76px;border-radius:20px;background:#FFFFFF;border:1px solid var(--hair,#E5E5EA);box-shadow:var(--sh-icon,0 6px 18px rgba(18,22,27,.10));display:flex;align-items:center;justify-content:center;margin:0 auto}
.duc-join__card--center .duc-join__q{margin:16px auto 0;max-width:440px}
.duc-join__card--center .duc-join__qsub{margin:6px auto 0;max-width:430px}
.duc-join .duc-seg{display:flex;align-items:center;gap:2px;border:none;height:34px;margin:24px auto 0;max-width:360px;padding:2px;border-radius:9px;background:rgba(118,118,128,.12)}
.duc-join .duc-seg > button{position:relative;display:flex;align-items:center;justify-content:center;flex:1;height:30px;border-radius:7px;font-size:13px;letter-spacing:-.1px;color:var(--ink,#12161B);cursor:pointer;border:none;padding:0;background:transparent;font-weight:500;box-shadow:none;transition:background .15s ease}
.duc-join .duc-seg > button::before{content:"";position:absolute;inset:-7px 0}   /* hit area 44px */
.duc-join .duc-seg > button[aria-checked="true"]{background:#FFFFFF;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* verify card (:240-256) */
.duc-join__lockdisc{width:64px;height:64px;border-radius:50%;background:#F4F1E9;display:flex;align-items:center;justify-content:center;margin:0 auto}
.duc-join__vtitle{margin:16px 0 0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink,#12161B)}
.duc-join__vsub{margin:10px auto 0;max-width:420px;font-size:15px;line-height:1.6;color:var(--body2,#3E4A55)}
.duc-join__vemail{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.duc-join__vemail-addr{font-size:14px;font-weight:600;color:var(--ink,#12161B);overflow-wrap:anywhere}   /* UI face, as the board draws it (D-6). overflow-wrap keeps a long address inside the card, which the board never handled */
.duc-join__textbtn{position:relative;background:none;border:none;font-size:13px;font-weight:600;color:var(--blue,#0070A0);text-decoration:underline;cursor:pointer;padding:2px}
.duc-join__textbtn::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}   /* hit area 44px */
/* founder item 4 (2026-09-12): six 46px cells + 10px gaps need 326px, so the row wrapped onto a second line on
   every phone (measured: 2 rows at 390, 360 and 320). The cells are sized from the row now — they grow to the
   46px the board draws and shrink below it when the card is narrow, never wrap, and stay ≥ 48px tall.
   Measured after: 44.2px cells at 390, 39.7px at 360, 33.7px at 320, all on one row (46 × 56 at 1440,
   exactly as before). */
.duc-join .duc-code-cells{display:flex;justify-content:center;gap:clamp(6px,2vw,10px);margin-top:22px;flex-wrap:nowrap;width:100%}
.duc-join .duc-code-cells > input{flex:1 1 0;width:auto;min-width:0;max-width:46px;height:clamp(48px,13.5vw,56px);border-radius:10px;border:1.5px solid var(--code-border,#D8D2C6);box-shadow:none;text-align:center;font-size:22px;font-weight:700;color:var(--ink,#12161B);background:#FFFFFF;outline:none;font-family:inherit;padding:0;margin:0;-moz-appearance:textfield;appearance:textfield}
.duc-join .duc-code-cells > input::-webkit-outer-spin-button,.duc-join .duc-code-cells > input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.duc-join .duc-code-cells > input:focus,.duc-join .duc-code-cells > input:focus-visible{border:2px solid var(--blue,#0070A0);box-shadow:0 0 0 4px var(--focus-ring,rgba(0,112,160,.14));outline:none}
.duc-join__verr{margin:12px auto 0;max-width:420px;font-size:12.5px;font-weight:600;line-height:18px;color:var(--warm,#C8471F)}
.duc-join__verr:empty{display:none}
.duc-join__resend{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-size:12.5px;flex-wrap:wrap}
.duc-join__resend .duc-join__textbtn{font-size:12.5px;text-decoration:none}
.duc-join__resend .duc-join__textbtn:hover{text-decoration:underline}
.duc-join__sep{color:#8C9099}
.duc-join__expire{font-size:12.5px;font-weight:500;color:#51606E}
.duc-join__expire.is-expired{font-weight:600;color:var(--warm,#C8471F)}
.duc-join__expire.is-sent{font-weight:600;color:var(--teal-status,#01A99D)}
.duc-join__unlock{margin:24px auto 0;display:inline-flex}

/* ── the floating ▲▼ nav's LAYER ───────────────────────────────────────────────────────────────────
   PRE-EXISTING DEFECT, proved with a real touch tap by lane V2 and re-proved here at 390 and 360: once the
   visitor scrolled past the questionnaire the pill stopped responding, and what took the tap was whatever came
   NEXT on the page — `.duc-story__ctas` at scrollY 1600 on /join, `.duc-ftr__bar` at the bottom, `.duc-sec--scenery`
   on the home page.
   `position:fixed` pins the pill to the viewport but does NOT lift it out of its section: z-index is resolved
   inside the nearest stacking context, and every page section is `.duc-sec{position:relative;z-index:1}`
   (`.duc-join-first` on /join, `.duc-ftr` for the footer). Equal z-index means DOM order decides, so every
   section BELOW the join section paints over the whole of it — the pill's own z-index:40 only ever ranked it
   against its own siblings. No value on `.duc-join__nav` can fix that from inside; the section itself has to
   outrank the ones that follow it, which is what this does. 2 is the smallest number that works and still sits
   far below the fixed header (`.duc-hdr`, z-index 50) and the skip link (100), so nothing else moves: the
   sections do not overlap in flow, and the only thing this lifts is the fixed pill.
   Lives here, with the nav it repairs, rather than in duc-core.css where the two wrappers are drawn. */
.duc-sec--join,.duc-join-first{z-index:2}

/* floating ▲▼ nav (:33-36, navBtn :422) — pill 90×48: padding 4, buttons drawn 40, hit area 44 via ::after */
.duc-join__nav{position:fixed;right:28px;bottom:28px;z-index:40;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--ink,#12161B);box-shadow:0 10px 30px rgba(18,22,27,.28)}
.duc-join__nav > button{position:relative;width:40px;height:40px;border-radius:999px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s ease,opacity .15s ease}
.duc-join__nav > button::after{content:"";position:absolute;inset:-2px}   /* 40px drawn → 44px hit target (README) */
.duc-join__nav > button:hover{background:rgba(255,255,255,.12)}
.duc-join__nav > button:disabled{opacity:.3;cursor:default;background:transparent}
.duc-join__nav > button:focus-visible{outline:2px solid #FFFFFF;outline-offset:-4px}

/* ── report (:266-293) ────────────────────────────────────────────────────── */
.duc-join__report{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:40px 0 0}
.duc-join__report-in{display:flex;flex-direction:column;align-items:center;animation:duc-join-fadeup .5s ease both;outline:none}
.duc-join__rpill{display:flex;align-items:center;gap:9px;background:#EAF6F4;border:1px solid #BFE2D9;border-radius:999px;padding:8px 16px}
.duc-join__rpill span{font-size:13px;font-weight:600;color:#1D6F60}
.duc-join__birds{width:76px;height:auto;margin-top:34px}
.duc-join__rtitle{margin:22px 0 0;font-size:clamp(34px,5vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:var(--ink,#12161B);text-align:center}
.duc-join__rsub{margin:14px 0 0;max-width:600px;font-size:18px;line-height:1.5;color:var(--body2,#3E4A55);text-align:center;text-wrap:pretty}
.duc-join__rdate{font-size:15px;font-weight:600;color:#51606E}
.duc-join__tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.duc-join__tab{position:relative;min-height:40px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;color:var(--body2,#3E4A55);transition:background .15s ease}
.duc-join__tab::before{content:"";position:absolute;inset:-2px 0}   /* hit area 44px */
.duc-join__tab:hover{filter:brightness(.97)}
.duc-join__tab[aria-selected="true"]{background:var(--blue-tint,#E1EEF5);color:var(--blue,#0070A0);font-weight:600}
.duc-join__tab-count{font-size:12px;font-weight:600;color:var(--body3,#5D6A75)}   /* DC #8C9099 was 2.7:1 on paper — F1 */
.duc-join__tab[aria-selected="true"] .duc-join__tab-count{color:var(--blue,#0070A0)}
.duc-join__panel{width:100%;display:flex;flex-direction:column;align-items:center}   /* tabindex=0 (no focusables inside) → keeps the core focus ring */
.duc-join__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:16px;width:100%;margin-top:30px}
.duc-join__grid:empty{display:none}
.duc-join__rcard{display:flex;flex-direction:column;gap:20px;background:#FFFFFF;border:1px solid var(--hair,#E5E5EA);border-radius:16px;padding:18px}
.duc-join__rhead{display:flex;align-items:flex-start;gap:12px}
.duc-join__rbody{flex:1;min-width:0}
.duc-join .duc-mono-disc{width:44px;height:44px;border-radius:22px;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--blue-tint,#E1EEF5);color:var(--blue,#0070A0);position:relative;overflow:hidden}
/* the company's real mark inside the disc — D-12 brand logos, FOUNDER OVERRIDE 2026-09-12 ("i also dont see
   brandfetch logos"). Identical to the member area's rule (duc-member.css, lane Q1) so the report's cards and the
   Network tiles cannot drift: the monogram is drawn first and always, and the mark covers it only once it has
   loaded AND cleared the fit rule. join.js sizes the image — the box is derived from the mark's own aspect ratio,
   because `cover` crops a wordmark and plain `contain` smears one. No transition, so prefers-reduced-motion has
   nothing to suppress. Disc geometry and the four tints are untouched. */
.duc-join .duc-disc__logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;max-width:none;object-fit:contain}
.duc-join .duc-mono-disc.is-logo .duc-disc__mono{visibility:hidden}
.duc-join .duc-mono-disc--warm{background:var(--warm-tint,#FDEAE2);color:var(--warm-hover,#B03A15)}
.duc-join .duc-mono-disc--teal{background:var(--teal-tint,#DBEEEB);color:var(--teal,#056A61)}
.duc-join .duc-mono-disc--broker{background:var(--broker-bg,#ECEDF0);color:var(--broker-fg,#4A5560)}
.duc-join__rname{font-size:15px;font-weight:600;line-height:20px;color:var(--ink,#12161B)}
.duc-join__rdetail{font-size:13px;line-height:18px;color:var(--muted,#6D6D72);margin-top:2px;text-wrap:pretty}
.duc-join__empty{width:100%;margin:30px 0 0;text-align:center;font-size:14px;line-height:20px;color:var(--body3,#5D6A75)}
.duc-join__note{font-size:13px;color:var(--body3,#5D6A75);margin:16px 0 0;text-align:center;text-wrap:pretty}   /* report sits on paper — F1 */
.duc-join__pricing{width:100%;margin-top:56px}

/* ── keyframes (namespaced) ───────────────────────────────────────────────── */
@keyframes duc-join-pulse{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes duc-join-fadeup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes duc-join-in-up{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes duc-join-in-down{from{opacity:0;transform:translateY(-56px)}to{opacity:1;transform:none}}
@keyframes duc-join-out-up{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-44px)}}
@keyframes duc-join-out-down{from{opacity:1;transform:none}to{opacity:0;transform:translateY(44px)}}

/* ── reduced motion (A-32): no slide, no pulse, instant swaps ─────────────── */
@media (prefers-reduced-motion:reduce){
  .duc-join__label-star,.duc-join__card,.duc-join__report-in{animation:none!important}
  .duc-join *,.duc-join *::before,.duc-join *::after{transition:none!important}
}