/* PAII Decision Brief demo section. Every rule is scoped under .dbd (or .pv-* for the preview-only
   header) so it can sit inside paii.ai's css/style.css without collisions. Brand values mirror
   style.css :root (navy, off-white, orange-dark, focus ring). */

.dbd, .dbd *, .dbd *::before, .dbd *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- tokens */
.dbd {
  --navy: #0b1a2b; --navy-deep: #081321; --off-white: #f6f5f1; --orange: #d9622a;
  --orange-dark: #b84f1f; --orange-darker: #9c4419; --muted-on-navy: #b9c4d1;
  --focus: #f0a477;
  /* tone tokens, dark set (the section itself is navy in both color schemes) */
  --fav: #72CD9C; --fav-bg: #143021; --fav-line: #2C5E42;
  --trd: #E5BE5F; --trd-bg: #33290B; --trd-line: #63501B;
  --con: #F09A93; --con-bg: #3B1714; --con-line: #78302B;
  --evi: #7EBDE5; --evi-bg: #0F2639; --evi-line: #2A5674;
  --unk: #A9B2AD; --unk-bg: #262B29; --unk-line: #454C48;
}
/* phone screen: light by default, follows the system color scheme like the briefs do */
.dbd-screen {
  --p-bg: #F1F3F0; --p-surface: #FFFFFF; --p-s2: #E4E8E4; --p-ink: #1A201E; --p-ink2: #48524D;
  --p-ink3: #5C6661; --p-line: #D2D8D3; --p-line2: #BFC7C1; --p-accent: #2C3B36; --p-accent-ink: #FFFFFF;
  --p-orange: #C4611F; --p-pill-bg: #FBE9DD; --p-pill-ink: #8A3A10; --p-ex-bg: #EBEEEB;
  --p-shadow: 0 1px 2px rgba(26,32,30,.06), 0 6px 18px rgba(26,32,30,.07);
  --fav: #1D6640; --fav-bg: #E1F0E7; --fav-line: #9CC9B1;
  --trd: #795500; --trd-bg: #F8EED3; --trd-line: #D7BC74;
  --con: #A01F18; --con-bg: #FAE3E1; --con-line: #DE9C97;
  --evi: #16507C; --evi-bg: #DDEAF5; --evi-line: #8CB9D8;
  --unk: #4F5853; --unk-bg: #E9ECE9; --unk-line: #B6BDB8;
}
@media (prefers-color-scheme: dark) {
  .dbd-screen {
    --p-bg: #121614; --p-surface: #1A201E; --p-s2: #252D2A; --p-ink: #E9EEEB; --p-ink2: #B3BCB7;
    --p-ink3: #8F9A94; --p-line: #303935; --p-line2: #3D4742; --p-accent: #C7D4CD; --p-accent-ink: #131816;
    --p-orange: #E08A4E; --p-pill-bg: #3A2312; --p-pill-ink: #F2B080; --p-ex-bg: #171C1A;
    --p-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
    --fav: #72CD9C; --fav-bg: #143021; --fav-line: #2C5E42;
    --trd: #E5BE5F; --trd-bg: #33290B; --trd-line: #63501B;
    --con: #F09A93; --con-bg: #3B1714; --con-line: #78302B;
    --evi: #7EBDE5; --evi-bg: #0F2639; --evi-line: #2A5674;
    --unk: #A9B2AD; --unk-bg: #262B29; --unk-line: #454C48;
  }
}
.dbd .t-fav { --tc: var(--fav); --tb: var(--fav-bg); --tl: var(--fav-line); }
.dbd .t-trd { --tc: var(--trd); --tb: var(--trd-bg); --tl: var(--trd-line); }
.dbd .t-con { --tc: var(--con); --tb: var(--con-bg); --tl: var(--con-line); }
.dbd .t-evi { --tc: var(--evi); --tb: var(--evi-bg); --tl: var(--evi-line); }
.dbd .t-unk { --tc: var(--unk); --tb: var(--unk-bg); --tl: var(--unk-line); }

/* ---------------------------------------------------------------- preview-only page frame */
body.dbd-preview { margin: 0; background: var(--off-white, #f6f5f1); color: #0b1a2b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.pv-bar { background: #0b1a2b; color: #f6f5f1; border-bottom: 1px solid rgba(255,255,255,.08); }
.pv-in { max-width: 1120px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.pv-brand { font-weight: 800; letter-spacing: .14em; font-size: 18px; }
.pv-note { font-size: 12px; color: #b9c4d1; letter-spacing: .04em; }

/* ---------------------------------------------------------------- section */
.dbd {
  position: relative;
  background: radial-gradient(circle at 15% 10%, #13253c 0%, var(--navy) 50%, var(--navy-deep) 100%);
  color: var(--off-white);
  padding: 64px 0 56px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
.dbd-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; display: grid; gap: 44px; }
.dbd-copy { max-width: 640px; }
.dbd-kicker { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 700;
  color: var(--focus); margin: 0 0 .6rem; }
.dbd-h { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 1rem; color: #fff; text-wrap: balance; }
.dbd-sub { font-size: 1.32rem; line-height: 1.45; font-weight: 600; color: #fff; margin: 0 0 .7rem; max-width: 32em; }
.dbd-sub2 { display: block; margin-top: .3rem; font-size: 1.15rem; line-height: 1.5; font-weight: 400; color: #d3dbe4; }
.dbd-sub2 strong { color: #fff; font-weight: 650; }
.dbd-lede { font-size: 1.19rem; line-height: 1.6; color: #dbe2ea; margin: 0 0 1.5rem; max-width: 34em; }
.dbd-points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .9rem; }
.dbd-points li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; color: var(--muted-on-navy);
  font-size: 1.125rem; line-height: 1.6; color: #cbd4de; }
.dbd-points strong { color: #fff; font-weight: 650; }
.dbd-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .75rem; font-weight: 600;
  color: var(--focus); padding-top: .3rem; letter-spacing: .06em; font-size: .8rem; }
.dbd-keyrow { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.1rem; margin-bottom: 1.1rem; }
.dbd-keyhd { margin: 0 0 .6rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-on-navy); font-weight: 600; }
.dbd-key { display: flex; flex-wrap: wrap; gap: 6px; }
/* "Try the Decision Briefs": two-level instruction placed directly above the phone (founder copy, 2026-10-07).
   No arrows, animation or popups. Phone wording swaps in at <=480px, where the visitor is already in the phone view. */
.dbd-try { width: 470px; max-width: 100%; margin: 0 0 14px; text-align: center; }
.dbd-try-h { margin: 0; font-size: 1.2rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #fff; line-height: 1.25; }
.dbd-try-b { margin: .4rem auto 0; max-width: 34em; font-size: 1.125rem; line-height: 1.55; color: #dbe2ea; }
.dbd-try-b strong { color: #fff; font-weight: 650; }
.dbd-try-narrow { display: none; }

/* tone tag (same component as inside the briefs) */
.dbd .tg { display: inline-flex; align-items: center; gap: 5px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
  color: var(--tc); background: var(--tb); border: 1px solid var(--tl); border-radius: 6px; padding: 4px 8px;
  white-space: nowrap; }
.dbd .tg-g { font-size: 9.5px; line-height: 1; }

/* ---------------------------------------------------------------- stage + phone */
.dbd-stage { display: flex; flex-direction: column; align-items: center; min-width: 0; }
#decision-briefs { scroll-margin-top: var(--dbd-hdr, 0px); }
.dbd-phone {
  position: relative; width: 400px; max-width: 100%;
  height: clamp(540px, calc(100vh - 290px), 812px);
  padding: 11px; border-radius: 56px;
  background: linear-gradient(150deg, #34404d 0%, #151d26 45%, #0a1018 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 0 1.5px #2b3642,
              0 40px 90px rgba(0,0,0,.50), 0 12px 30px rgba(0,0,0,.35);
}
.dbd-phone::before, .dbd-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: #2b3642; }
.dbd-phone::before { left: -3px; top: 150px; height: 64px; box-shadow: 0 84px 0 #2b3642; }
.dbd-phone::after { right: -3px; top: 190px; height: 92px; }
.dbd-screen { position: relative; isolation: isolate; height: 100%; border-radius: 46px; overflow: hidden;
  background: var(--p-bg); color: var(--p-ink); display: flex; flex-direction: column;
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.dbd-status { flex: 0 0 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 4px 30px 0 34px; font-size: 15px; font-weight: 600; color: var(--p-ink); position: relative;
  background: var(--p-bg); }
.dbd-island { position: absolute; left: 50%; top: 11px; width: 112px; height: 31px; border-radius: 20px;
  background: #05080b; transform: translateX(-50%); }
.dbd-sys { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.dbd-sys i { display: block; width: 3px; background: var(--p-ink); border-radius: 1px; }
.dbd-sys i:nth-child(1) { height: 4px; } .dbd-sys i:nth-child(2) { height: 6px; }
.dbd-sys i:nth-child(3) { height: 8px; } .dbd-sys i:nth-child(4) { height: 10px; }
.dbd-sys b { display: block; width: 22px; height: 11px; margin-left: 6px; border: 1.5px solid var(--p-ink);
  border-radius: 3px; position: relative; opacity: .9; }
.dbd-sys b::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: var(--p-ink); border-radius: 1px; }
.dbd-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dbd-bar { flex: 0 0 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 14px; border-bottom: 1px solid var(--p-line); background: var(--p-bg); }
.dbd-bar-t { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--p-ink2); }
.dbd-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbd-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--p-orange); flex: 0 0 auto; }
.dbd--open .dbd-mark { display: none; }
.dbd-back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 10px 0 4px; margin-left: -4px; border: 0; background: none; cursor: pointer;
  font: 600 15px/1 "Public Sans", -apple-system, sans-serif; color: var(--p-accent); border-radius: 10px; }
.dbd-back:hover { background: var(--p-s2); }
.dbd-back[hidden] { display: none; }
.dbd--open .dbd-bar-t { max-width: 46%; }
/* SHARE THIS BRIEF (shell bar): visible only while a shareable brief is open. visibility, not display,
   so the bar never changes size. Shares the canonical public URL from the TOP document. */
.dbd-share { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--p-accent); cursor: pointer;
  visibility: hidden; }
.dbd-share[hidden] { display: inline-flex; }
.dbd--open.dbd--shareable .dbd-share { visibility: visible; }
.dbd-share:hover { background: var(--p-s2); }
.dbd-share svg { width: 20px; height: 20px; }
.dbd-share:focus-visible, .dbd-fb input:focus-visible, .dbd-fb-x:focus-visible { outline: 3px solid var(--p-orange); outline-offset: 2px; }
.dbd-fb { flex: 0 0 auto; padding: 10px 14px 12px; border-bottom: 1px solid var(--p-line); background: var(--p-surface);
  font-size: 14px; line-height: 1.45; color: var(--p-ink2); }
.dbd-fb[hidden] { display: none; }
.dbd-fb label { display: block; font-weight: 600; color: var(--p-ink); }
.dbd-fb input { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px;
  font: 14px/1.4 "IBM Plex Mono", ui-monospace, monospace; color: var(--p-ink); background: var(--p-s2);
  border: 1px solid var(--p-line2); border-radius: 8px; }
.dbd-fb-h { margin: 6px 0 0; }
.dbd-fb-x { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 16px; cursor: pointer;
  font: 600 14px/1 "Public Sans", -apple-system, sans-serif; color: var(--p-ink); background: var(--p-surface);
  border: 1px solid var(--p-line2); border-radius: 8px; }
.dbd-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 40; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px; border-radius: 10px;
  background: #FFFFFF; color: #1A201E; font: 500 14px/1.4 "Public Sans", -apple-system, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s; }
.dbd-toast.on { opacity: 1; }
@media (max-width: 480px) { .dbd-toast { bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* library */
.dbd-lib { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dbd-lib[hidden], .dbd-view[hidden] { display: none; }
.dbd-seg { flex: 0 0 auto; margin: 12px 14px 2px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); gap: 3px;
  background: var(--p-s2); border-radius: 13px; padding: 3px; }
.dbd-seg [role="tab"] { min-height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: 600 12px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--p-ink2); transition: background .2s, color .2s, box-shadow .2s; }
/* PERSONAL | WORK | KNOW THE ROOM (2026-10-08): three full labels at 12px down to 360px; columns size to
   their label, tracking tightened from .14em, padding keeps every tab >= 44px tall and >= 44px wide. */
.dbd-seg [role="tab"] { padding: 0 8px; letter-spacing: .06em; white-space: nowrap; }
.dbd-seg [role="tab"][aria-selected="true"] { background: var(--p-surface); color: var(--p-ink); box-shadow: var(--p-shadow); }
.dbd-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 6px 14px 34px; scrollbar-width: thin; outline: none; }
.dbd-panel[hidden] { display: none; }
.dbd-intro { margin: 14px 2px 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--p-ink3); }

.dbd-feat { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 16px 16px 15px;
  border-radius: 18px; background: var(--p-surface); border: 1px solid var(--p-line); color: var(--p-ink);
  text-decoration: none; box-shadow: var(--p-shadow); overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.dbd-feat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--fav) 0 20%, var(--trd) 20% 40%, var(--con) 40% 60%, var(--evi) 60% 80%, var(--unk) 80% 100%); }
.dbd-feat:hover { border-color: var(--p-line2); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.10); }
.dbd-feat:focus-visible, .dbd-seg [role="tab"]:focus-visible, .dbd-back:focus-visible,
.dbd-scroll:focus-visible { outline: 3px solid var(--p-orange); outline-offset: 2px; }
.dbd-feat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.dbd-feat-top .dbd-ic { color: var(--p-ink2); }
.dbd-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  background: var(--p-pill-bg); color: var(--p-pill-ink); font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase; }
.dbd-live { width: 7px; height: 7px; border-radius: 50%; background: var(--p-orange);
  box-shadow: 0 0 0 0 rgba(196,97,31,.5); animation: dbd-pulse 2.4s ease-out infinite; }
@keyframes dbd-pulse { 0% { box-shadow: 0 0 0 0 rgba(196,97,31,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(196,97,31,0); } }
.dbd-feat-t { font-family: Fraunces, Georgia, serif; font-size: 21px; font-weight: 600; line-height: 1.2;
  letter-spacing: -.01em; }
.dbd-feat-s { font-size: 14px; line-height: 1.45; color: var(--p-ink2); }
.dbd-feat-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--p-ink3); }
.dbd-dots { display: inline-flex; gap: 3px; }
.dbd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.dbd-open { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--p-accent); color: var(--p-accent-ink);
  font-weight: 600; font-size: 14.5px; }
.dbd-ph { position: absolute; right: 14px; bottom: 16px; font: 600 9.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--p-ink3); border: 1px dashed var(--p-line2);
  border-radius: 5px; padding: 4px 6px; }
.dbd-more { margin: 24px 2px 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--p-ink3); }
.dbd-more span { text-transform: none; letter-spacing: 0; font-family: "Public Sans", sans-serif; font-weight: 400; font-size: 12px; }
.dbd-exs { display: flex; flex-direction: column; gap: 8px; }
.dbd-ex { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 14px; background: var(--p-ex-bg); border: 1px dashed var(--p-line2);
  color: var(--p-ink2); cursor: default; user-select: none; -webkit-user-select: none; }
.dbd-ex .dbd-ic { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--p-bg);
  color: var(--p-ink3); }
.dbd-ex-b { display: flex; flex-direction: column; min-width: 0; }
.dbd-ex-t { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--p-ink2); }
.dbd-ex-s { font-size: 12.5px; line-height: 1.35; color: var(--p-ink3); }
.dbd-ex-g { font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--p-ink3); margin: 1px 0 2px; }
.dbd-note { margin: 12px 2px 0; font-size: 13px; line-height: 1.45; color: var(--p-ink2); }
.dbd-ex-l { font: 600 9.5px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-ink3); border: 1px solid var(--p-line2); border-radius: 5px; padding: 4px 6px; }

/* brief viewer */
.dbd-view { flex: 1; min-height: 0; position: relative; background: var(--p-bg); }
.dbd-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--p-bg); }
.dbd-loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  transition: opacity .25s; }
.dbd-loading span { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--p-line);
  border-top-color: var(--p-orange); animation: dbd-spin .8s linear infinite; }
.dbd-view.is-loaded .dbd-loading { opacity: 0; }
@keyframes dbd-spin { to { transform: rotate(360deg); } }
.dbd-home { position: absolute; left: 50%; bottom: 8px; width: 132px; height: 5px; border-radius: 3px;
  background: var(--p-ink); opacity: .82; transform: translateX(-50%); pointer-events: none; z-index: 3; }

/* ---------------------------------------------------------------- CTA (persistent) */
.dbd-cta-wrap { display: contents; }
/* >480px: only the button is sticky, floating over the phone's lower edge while the stage scrolls */
.dbd-cta { position: sticky; bottom: 18px; z-index: 5; margin-top: 22px;
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 300px;
  padding: 0 28px; border-radius: 999px; border: 2px solid rgba(246,245,241,.6); background: var(--navy-deep);
  color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.dbd-cta:hover { background: #13253c; border-color: rgba(246,245,241,.85); }
.dbd-cta[data-state="active"] { background: var(--orange-dark); border-color: var(--orange-dark);
  box-shadow: 0 10px 30px rgba(184,79,31,.40), 0 4px 12px rgba(0,0,0,.3); }
.dbd-cta[data-state="active"]:hover { background: var(--orange-darker); border-color: var(--orange-darker); }
.dbd-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.dbd-cta-n { margin: 10px 0 0; font-size: .95rem; color: #cbd4de; text-align: center; }
.dbd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ---------------------------------------------------------------- no-JS fallback */
.dbd-nojs { width: 100%; max-width: 520px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 20px 22px; }
.dbd-nojs-h { margin: 0 0 10px; font-weight: 700; color: #fff; font-size: 1.05rem; }
.dbd-nojs ul { margin: 0 0 12px; padding-left: 1.1rem; }
.dbd-nojs li { margin: 6px 0; }
.dbd-nojs a { color: #fff; display: inline-block; min-height: 32px; padding: 4px 0; }
.dbd-nojs-n { margin: 0; color: var(--muted-on-navy); font-size: .9rem; }

/* ---------------------------------------------------------------- layout */
@media (min-width: 980px) {
  .dbd-wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 72px; }
  /* READABILITY > INFORMATION DENSITY (founder, 2026-10-08): the copy column may be taller than the phone;
     it scrolls normally (no sticky) and is never shrunk to match the phone's height. */
  .dbd-copy { padding-top: 16px; }
  .dbd-h { font-size: clamp(2.2rem, 3.3vw, 2.6rem); }
}
@media (min-width: 481px) and (max-width: 979px) {
  .dbd-copy { margin: 0 auto; }
}
@media (max-width: 480px) {
  .dbd { padding: 40px 0 0; }
  .dbd-wrap { padding: 0; gap: 26px; }
  .dbd-copy { padding: 0 16px; }
  .dbd-try { width: auto; margin: 0 16px 14px; text-align: left; }
  .dbd-try-h { font-size: 1.1rem; }
  .dbd-try-wide { display: none; }
  .dbd-try-narrow { display: inline; }
  .dbd-h { font-size: 1.85rem; }
  .dbd-lede { font-size: 1.12rem; }
  .dbd-points li { font-size: 1.08rem; }
  .dbd-sub2 { font-size: 1.1rem; }
  /* the bezel collapses: the "phone" becomes the viewport's own content area */
  .dbd-phone { width: 100%; height: calc(100vh - 78px - var(--dbd-hdr, 0px)); height: calc(100svh - 78px - var(--dbd-hdr, 0px)); min-height: 420px;
    scroll-margin-top: var(--dbd-hdr, 0px);
    padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .dbd-phone::before, .dbd-phone::after, .dbd-status, .dbd-home { display: none; }
  .dbd-screen { border-radius: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .dbd-cta-wrap { display: block; position: sticky; bottom: 0; z-index: 5; width: 100%;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--navy-deep);
    border-top: 1px solid rgba(255,255,255,.12); }
  .dbd-cta { position: static; display: flex; width: 100%; min-width: 0; margin: 0; box-shadow: none; }
  .dbd-cta-n { display: none; }
  .dbd-nojs { margin: 0 16px 16px; width: auto; }
  .pv-in { padding: 12px 16px; }
}
@media (max-width: 360px) { .dbd .tg { font-size: 10px; padding: 3px 6px; } }

@media (prefers-reduced-motion: reduce) {
  .dbd *, .dbd *::before, .dbd *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .dbd-feat:hover { transform: none; }
}
@media (forced-colors: active) {
  .dbd .tg, .dbd-cta, .dbd-feat, .dbd-ex { border: 1px solid CanvasText; }
}
/* WORK holds two featured briefs (Know the Room first) since 2026-10-08: space between stacked cards. */
.dbd-note + .dbd-feat, .dbd-feat + .dbd-feat { margin-top: 14px; }