/* Demian homepage. Tokens from 02-demian/brand/demian.tokens.json and demian.css; composition from the revised homepage preview. */

@font-face {
  font-family: "Demian Display";
  src: url("/assets/fonts/SignylDisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.demian-app {
  --canvas: #F4F5EE;
  --surface: #FCFCF6;
  --ink: #17372F;
  --muted: #65736A;
  --owner: #E2EBD8;
  --separator: #D8E0D4;
  --control: #7D8C80;
  --pear: #D7EB6D;
  --ever: #17372F;
  --ever-deep: #0F211D;
  --chalk: #EDF3E5;
  --chalk-muted: #A9B9AC;
  --celadon: #E5ECDC;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Demian Display", ui-sans-serif, system-ui, sans-serif;
  --max: 1440px;
  /* one CSS pixel at 1200 wide, growing to 1.28 so the fixed sizes keep the preview's proportions on wide screens */
  --u: clamp(1px, calc(100vw / 1200), 1.28px);
  --gutter: clamp(16px, 4.4vw, 64px);
  --ease: cubic-bezier(.2, 0, 0, 1);
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:400 calc(16 * var(--u))/calc(24 * var(--u)) var(--font-body);
  font-synthesis:none;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.demian-app *, .demian-app *::before, .demian-app *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(96 * var(--u)); -webkit-text-size-adjust:100%; }
img, svg { display:block; max-width:100%; }
p { margin:0; }
a { color:inherit; text-underline-offset: 4px; }
:where(a, button):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.skip { position:absolute; left: 12px; top: -60px; z-index:60; padding:calc(10 * var(--u)) calc(16 * var(--u)); background:var(--ink); color:var(--surface); border-radius: 8px; }
.skip:focus { top: 12px; }

.d-wrap { max-width:var(--max); margin-inline:auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.d-display { margin:0; font-family:var(--font-display); font-weight:900; letter-spacing:0; word-spacing:.1em; font-synthesis:none; font-kerning:normal; line-height:.98; text-wrap:balance; }
/* The display face's space is 0.115em, about half the gap the previews show between words; word-spacing restores it
   without touching letter spacing, which the type README fixes at 0. */
.d-h1 { font-size: clamp(52px, 7.4vw, 112px); line-height: .86; }
.d-h2 { font-size: clamp(40px, 5.6vw, 84px); }
.d-lede { font-size: clamp(18px, 1.68vw, 25px); line-height:1.45; color:var(--muted); }
.d-eyebrow { font-size: clamp(18px, 1.75vw, 25px); line-height:1.4; color:var(--muted); }

/* pills */
.d-pill { display:inline-flex; align-items:center; justify-content:center; gap:calc(10 * var(--u)); min-height:calc(48 * var(--u)); padding:calc(12 * var(--u)) calc(24 * var(--u)); border-radius: 999px; font:600 calc(16 * var(--u))/calc(22 * var(--u)) var(--font-body); text-decoration: none; border: 1.5px solid transparent; transition: transform .16s var(--ease), box-shadow .16s var(--ease); white-space:nowrap; }
.d-pill:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px currentColor; }
.d-pill-pear { background:var(--pear); color:var(--ink); }
.d-pill-ink { background:var(--ink); color:var(--surface); }
.d-pill-ghost { border-color: var(--pear); color:var(--chalk); }
.d-pill-lg { min-height:calc(60 * var(--u)); padding:calc(16 * var(--u)) calc(34 * var(--u)); font-size:calc(19 * var(--u)); }
.d-pill-sm { min-height:calc(40 * var(--u)); padding:calc(8 * var(--u)) calc(18 * var(--u)); font-size:calc(15 * var(--u)); }
.d-pill .i-arrow { width:calc(20 * var(--u)); height:calc(20 * var(--u)); }
.d-textlink { display:inline-flex; align-items:center; gap:calc(12 * var(--u)); min-height:calc(48 * var(--u)); font-size:calc(19 * var(--u)); font-weight:500; text-decoration: underline; text-decoration-thickness: 1.5px; }
.d-textlink .i-arrow { width:calc(22 * var(--u)); height:calc(22 * var(--u)); transition: transform .2s var(--ease); }
.d-textlink:hover .i-arrow { transform: translateX(4px); }

/* header */
.d-header { position:sticky; top: 0; z-index:30; background:var(--canvas); border-bottom: 1px solid var(--separator); padding-top: env(safe-area-inset-top, 0px); }
.d-bar { display:flex; align-items:center; justify-content:space-between; gap:calc(24 * var(--u)); min-height:calc(84 * var(--u)); }
.d-wordmark img { width: clamp(124px, 13vw, 184px); height:auto; }
.d-nav { display:flex; gap: clamp(20px, 3.4vw, 52px); margin:0; padding:0; list-style:none; }
.d-nav a { display:inline-flex; align-items:center; min-height:calc(44 * var(--u)); font-size:calc(17 * var(--u)); font-weight:500; text-decoration: none; }
.d-nav a:hover { text-decoration: underline; }
.d-head-actions { display:flex; align-items:center; gap:calc(12 * var(--u)); }
.d-menu { display:none; }

/* hero */
.d-hero { padding-top: clamp(24px, 2.4vw, 36px); }
.d-hero-grid { display:grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1fr); gap: clamp(24px, 2.4vw, 36px); align-items:center; }
.d-hero-copy .d-eyebrow { margin-bottom:calc(18 * var(--u)); }
.d-hero-copy .d-h1 { margin-bottom:calc(30 * var(--u)); }
.d-hero-copy .d-lede { max-width:25em; margin-bottom:calc(36 * var(--u)); color:var(--ink); opacity:.86; }
.d-actions { display:flex; align-items:center; flex-wrap:wrap; gap:calc(18 * var(--u)) calc(36 * var(--u)); }

.d-hero-figure { position:relative; margin:0; }
.d-frame { position:relative; z-index:1; padding: clamp(14px, 1.7vw, 24px); border-radius: 28px; background:#E6EDDD; }
.d-app { background:var(--surface); border-radius: 18px; border: 1px solid var(--separator); padding:calc(8 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); }
.d-app-head { display:flex; align-items:center; gap:calc(12 * var(--u)); min-height:calc(64 * var(--u)); border-bottom: 1px solid var(--separator); }
.d-sym { width:calc(26 * var(--u)); height:calc(32 * var(--u)); color:var(--ink); flex:none; }
.d-app-word { width:calc(104 * var(--u)); height:auto; }
.d-active { display:inline-flex; align-items:center; gap:calc(8 * var(--u)); margin-left:auto; padding:calc(6 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--separator); border-radius: 999px; font:500 calc(14 * var(--u))/calc(20 * var(--u)) var(--font-body); }
.d-active .dot { width:calc(10 * var(--u)); height:calc(10 * var(--u)); border-radius: 50%; background:var(--pear); box-shadow: 0 0 0 1px #9DB13A inset; }
.d-tab { font:500 calc(14 * var(--u))/calc(20 * var(--u)) var(--font-body); color:var(--ink); padding-inline:calc(6 * var(--u)); }
.d-goal { display:flex; align-items:center; gap:calc(14 * var(--u)); margin:calc(14 * var(--u)) 0 calc(6 * var(--u)); padding:calc(12 * var(--u)) calc(14 * var(--u)); border-radius: 12px; background:#EEF2E8; font:500 calc(17 * var(--u))/calc(24 * var(--u)) var(--font-body); }
.d-goal svg:first-child { width:calc(30 * var(--u)); height:calc(30 * var(--u)); color:#6E7E72; flex:none; }
.d-goal .i-chev { width:calc(18 * var(--u)); height:calc(18 * var(--u)); margin-left:auto; }
.d-timeline { position:relative; margin:0; padding:calc(6 * var(--u)) 0 calc(4 * var(--u)); list-style:none; }
.d-timeline::before { content:""; position:absolute; left: 15px; top: 22px; bottom: 26px; width:2px; background:var(--separator); }
.d-timeline li { position:relative; display:grid; grid-template-columns: 32px minmax(0, 1fr); gap:calc(16 * var(--u)); align-items:start; padding:calc(10 * var(--u)) 0; }
.d-timeline .i-check { width:calc(28 * var(--u)); height:calc(28 * var(--u)); margin:2px 0 0 2px; position:relative; }
.d-timeline .d-sym-sm { width:calc(22 * var(--u)); height:calc(28 * var(--u)); margin:2px 0 0 calc(5 * var(--u)); color:var(--ink); background:var(--surface); position:relative; }
.d-timeline .d-avatar { width:calc(34 * var(--u)); height:calc(40 * var(--u)); margin-left:-1px; position:relative; background:var(--surface); }
.d-timeline strong, .d-decision strong { display:block; font:600 calc(17 * var(--u))/calc(24 * var(--u)) var(--font-body); }
.d-timeline span, .d-decision span { display:block; font:400 calc(15 * var(--u))/calc(22 * var(--u)) var(--font-body); color:var(--muted); }
.d-decision { display:grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap:calc(14 * var(--u)); align-items:center; margin:calc(6 * var(--u)) 0 calc(10 * var(--u)); padding:calc(14 * var(--u)); border: 1.5px solid var(--control); border-radius: 14px; background:var(--surface); }
.d-decision-ic { display:grid; place-items:center; width:calc(48 * var(--u)); height:calc(48 * var(--u)); border-radius: 10px; background:#EEF2E8; }
.d-decision-ic svg { width:calc(24 * var(--u)); height:calc(24 * var(--u)); }
.d-decision .d-pill { color:var(--ink); }
.d-follow { display:flex; align-items:center; gap:calc(12 * var(--u)); padding:calc(10 * var(--u)) calc(6 * var(--u)) 0; font:400 calc(15 * var(--u))/calc(22 * var(--u)) var(--font-body); color:var(--muted); }
.d-follow strong { color:var(--ink); font-weight:500; }
.d-follow svg:first-child { width:calc(22 * var(--u)); height:calc(22 * var(--u)); flex:none; }
.d-follow .i-chev { width:calc(16 * var(--u)); height:calc(16 * var(--u)); margin-left:auto; flex:none; }
.d-hero-figure figcaption { margin-top:calc(10 * var(--u)); text-align:right; font:400 calc(14 * var(--u))/calc(20 * var(--u)) var(--font-body); color:var(--muted); }
.d-peek { position:absolute; z-index:0; left:calc(-112 * var(--u)); bottom:calc(14 * var(--u)); width:calc(150 * var(--u)); pointer-events:none; }
.d-peek .d-robot { width:calc(150 * var(--u)); height:auto; transform: rotate(-8deg); }
.d-peek .d-ticks { position:absolute; left: 18px; top: -14px; width:calc(40 * var(--u)); }

.d-strip { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(36px, 4.4vw, 60px) 0 0; padding:0; list-style:none; border-top: 1px solid var(--separator); }
.d-strip li { display:flex; align-items:center; justify-content:center; min-height:calc(92 * var(--u)); font:500 calc(19 * var(--u))/calc(24 * var(--u)) var(--font-body); }
.d-strip li + li { border-left: 1px solid var(--separator); }
.d-strip li { position:relative; }
.d-strip li + li::before { content:""; position:absolute; left: -1px; top: 30%; bottom: 30%; width:1px; background:var(--control); opacity:.5; }
.d-strip li + li { border-left-color: transparent; }

/* sections */
.d-section { padding-block: clamp(40px, 3.8vw, 60px); }
.d-section + .d-section { border-top: 1px solid var(--separator); }
.d-band { padding-block: clamp(40px, 3.8vw, 60px); }
.d-band-ever { background:var(--ever); color:var(--chalk); }
.d-band-ever .d-lede { color:#C9D6C9; }
.d-band-celadon { background:var(--celadon); }
/* muted green falls under 4.5:1 on celadon, so body text there uses softened ink */
.d-band-celadon .d-lede { color:var(--ink); opacity:.86; }
.d-split { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items:center; }
.d-split .d-h2 { margin-bottom:calc(26 * var(--u)); }
.d-split-top { align-items:start; margin-bottom: clamp(36px, 4vw, 56px); }
.d-split-top .d-h2 { margin-bottom:0; }
.d-split-top .d-lede { padding-top:calc(12 * var(--u)); color:var(--ink); opacity:.86; }
.d-context-wrap .d-context { width:100%; height:auto; }

.d-card { background:var(--surface); border: 1px solid var(--separator); border-radius: 18px; padding:calc(22 * var(--u)) calc(26 * var(--u)); }
.d-card-title { display:flex; align-items:center; justify-content:space-between; gap:calc(12 * var(--u)); padding-bottom:calc(14 * var(--u)); border-bottom: 1px solid var(--separator); font:600 calc(17 * var(--u))/calc(24 * var(--u)) var(--font-body); }
.d-tag { display:inline-block; padding:2px calc(10 * var(--u)); border-radius: 999px; background:#EEF2E8; color:var(--muted); font:500 calc(13 * var(--u))/calc(20 * var(--u)) var(--font-body); }
.d-tag-dark { background:#274236; color:var(--chalk-muted); }
.d-watch ul { margin:0; padding:0; list-style:none; }
.d-watch li { display:grid; grid-template-columns: 52px minmax(0, 1fr) auto 20px; align-items:center; gap:calc(14 * var(--u)); min-height:calc(76 * var(--u)); border-bottom: 1px solid var(--separator); }
.d-watch li > svg:first-child { width:calc(48 * var(--u)); height:calc(48 * var(--u)); padding:calc(12 * var(--u)); border-radius: 12px; background:#EEF2E8; }
.d-watch .t { font:600 calc(18 * var(--u))/calc(24 * var(--u)) var(--font-body); }
.d-watch .s { display:inline-flex; align-items:center; gap:calc(10 * var(--u)); min-width:calc(120 * var(--u)); color:var(--muted); font:500 calc(16 * var(--u))/calc(22 * var(--u)) var(--font-body); }
.d-watch .dot { width:calc(12 * var(--u)); height:calc(12 * var(--u)); border-radius: 50%; background:var(--pear); box-shadow: 0 0 0 1px #9DB13A inset; }
.d-watch .dot-ring { background:transparent; box-shadow: 0 0 0 2.5px #9DB13A inset; }
.d-watch .i-chev { width:calc(18 * var(--u)); height:calc(18 * var(--u)); }
.d-card-foot { padding-top:calc(14 * var(--u)); color:var(--muted); font:400 calc(14 * var(--u))/calc(20 * var(--u)) var(--font-body); }

.d-team { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin:0; padding:0; list-style:none; }
.d-member { display:grid; grid-template-columns: minmax(0, .64fr) minmax(0, 1fr); gap:calc(14 * var(--u)); align-items:end; }
.d-member .who .name { font:600 calc(26 * var(--u))/calc(30 * var(--u)) var(--font-body); }
.d-member .who .role { margin-bottom:calc(8 * var(--u)); color:var(--muted); font-size:calc(18 * var(--u)); }
.d-member .d-robot { width:100%; height:auto; margin-left:-10px; }
.d-work { align-self:stretch; padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); }
.d-work .d-card-title { font-size:calc(17 * var(--u)); }
.d-prepared { display:inline-flex; align-items:center; gap:calc(10 * var(--u)); margin:calc(14 * var(--u)) 0 calc(12 * var(--u)); padding:calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u)); border-radius: 10px; background:#EEF2E8; font:500 calc(16 * var(--u))/calc(22 * var(--u)) var(--font-body); }
.d-prepared .i-check { width:calc(24 * var(--u)); height:calc(24 * var(--u)); }
.d-work .desc { color:var(--muted); font-size:calc(16 * var(--u)); line-height:calc(24 * var(--u)); }

.d-approval { margin:0; padding:calc(22 * var(--u)); border-radius: 20px; background:var(--ever); color:var(--chalk); }
.d-approval-head { display:flex; align-items:center; gap:calc(16 * var(--u)); padding-bottom:calc(18 * var(--u)); font:500 calc(20 * var(--u))/calc(26 * var(--u)) var(--font-body); }
.d-approval-head .d-sym { color:var(--chalk); padding-right:calc(16 * var(--u)); border-right: 1px solid #355047; width:calc(42 * var(--u)); height:calc(34 * var(--u)); }
.d-approval-head .d-tag { margin-left:auto; }
.d-approval-body { padding:calc(14 * var(--u)); border: 1px solid #355047; border-radius: 16px; }
.d-approval-item { display:grid; grid-template-columns: 64px minmax(0, 1fr); gap:calc(18 * var(--u)); align-items:center; padding:calc(6 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u)); }
.d-approval .ic { display:grid; place-items:center; width:calc(64 * var(--u)); height:calc(64 * var(--u)); border-radius: 12px; background:#274236; }
.d-approval .ic svg { width:calc(28 * var(--u)); height:calc(28 * var(--u)); }
.d-approval-item strong { display:block; font:600 calc(21 * var(--u))/calc(28 * var(--u)) var(--font-body); }
.d-approval-item span { color:var(--chalk-muted); font-size:calc(16 * var(--u)); }
.d-approval-row { display:grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap:calc(16 * var(--u)); align-items:center; padding:calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid #355047; border-radius: 12px; background:#1B3A31; font:500 calc(17 * var(--u))/calc(24 * var(--u)) var(--font-body); }
.d-approval-row .ic { width:calc(40 * var(--u)); height:calc(40 * var(--u)); background:var(--chalk); color:var(--ink); border-radius: 8px; }
.d-approval-row .ic svg { width:calc(22 * var(--u)); height:calc(22 * var(--u)); }
.d-approval-row .i-chev { width:calc(18 * var(--u)); height:calc(18 * var(--u)); }
.d-approval-actions { display:grid; grid-template-columns:1.3fr 1fr; gap:calc(14 * var(--u)); margin-top:calc(18 * var(--u)); }
.d-approval-actions .d-pill { min-height:calc(58 * var(--u)); font-size:calc(18 * var(--u)); }

.d-outcome dl { margin:0; }
.d-outcome dl > div { display:grid; grid-template-columns: 52px 130px minmax(0, 1fr); align-items:center; gap:calc(12 * var(--u)); min-height:calc(70 * var(--u)); border-bottom: 1px solid var(--separator); }
.d-outcome dl > div:last-child { border-bottom: 0; }
.d-outcome dl svg { width:calc(46 * var(--u)); height:calc(46 * var(--u)); padding:calc(11 * var(--u)); border-radius: 50%; background:#EEF2E8; }
.d-outcome dt { font:600 calc(17 * var(--u))/calc(24 * var(--u)) var(--font-body); }
.d-outcome dd { margin:0; color:var(--muted); font-size:calc(16 * var(--u)); }
.d-pending { display:inline-flex; align-items:center; gap:calc(8 * var(--u)); padding:2px calc(12 * var(--u)); border-radius: 999px; border: 1.5px dashed var(--control); color:var(--ink); font-weight:500; }

.d-closing { padding-bottom:0; }
.d-close-row { display:flex; align-items:flex-start; justify-content:space-between; gap:calc(32 * var(--u)); }
.d-close-row .d-h2 { margin-bottom:calc(14 * var(--u)); }
.d-close-row .d-lede { color:var(--chalk); opacity:.9; }
.d-bigmark { width:100%; height:auto; margin-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid #4E6B60; }
.d-footer { background:var(--ever); color:var(--chalk); padding-bottom: env(safe-area-inset-bottom, 0px); }
.d-footer ul { display:flex; flex-wrap:wrap; gap: 8px clamp(24px, 3.4vw, 52px); margin:0; padding:calc(16 * var(--u)) 0 calc(36 * var(--u)); list-style:none; }
.d-footer a { display:inline-flex; align-items:center; min-height:calc(44 * var(--u)); font:500 calc(17 * var(--u))/calc(24 * var(--u)) var(--font-body); text-decoration: none; }
.d-footer a:hover { text-decoration: underline; }

/* robots */
.d-robot .r-eyes { transform-box: view-box; transition: transform .09s ease-in; }
.robot.blink .r-eyes { transform: scaleY(.12); }
.motion .d-robot .r-antenna { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }
.motion .d-peek .d-robot { animation: peek 5s ease-in-out infinite; }
.motion .d-peek .d-ticks { animation: tick 2.4s ease-in-out infinite; }
.motion .d-active .dot, .motion .d-watch .dot:not(.dot-ring) { animation: pulse 2.4s ease-in-out infinite; }
@keyframes sway { 0%, 72%, 100% { transform: rotate(0); } 80% { transform: rotate(-7deg); } 90% { transform: rotate(5deg); } }
@keyframes peek { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-4px); } }
@keyframes tick { 0%, 100% { opacity:1; } 50% { opacity:.4; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 1px #9DB13A inset, 0 0 0 0 rgba(215, 235, 109, .9); } 60% { box-shadow: 0 0 0 1px #9DB13A inset, 0 0 0 7px rgba(215, 235, 109, 0); } }

/* the hero sequence: each state arrives in order once the view is on screen */
.js.motion .story .step { opacity:0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--n) * 520ms + 200ms); }
.js.motion .story.played .step { opacity:1; transform: none; }
.js.motion .story .i-check { transform: scale(.4); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--n) * 520ms + 420ms); }
.js.motion .story.played .i-check { transform: none; }
.js.motion .story.played .d-decision { animation: ring 1.6s ease-out calc(4 * 520ms + 700ms) 1 both; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(215, 235, 109, 0); } 30% { box-shadow: 0 0 0 6px rgba(215, 235, 109, .95); } 100% { box-shadow: 0 0 0 0 rgba(215, 235, 109, 0); } }
.js.motion [data-reveal] { opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js.motion [data-reveal].is-in { opacity:1; transform: none; }

@media (max-width: 1099px) {
  .d-hero-grid, .d-split { grid-template-columns: 1fr; }
  .d-team { grid-template-columns: 1fr; max-width: 640px; }
  .d-peek { left: -10px; bottom: -40px; width: 96px; }
  .d-peek .d-robot { width: 96px; }
}

@media (max-width: 767px) {
  .br-wide { display: none; }
  .demian-app { --gutter: 16px; }
  .d-bar { min-height: 64px; gap: 10px; }
  .d-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px 16px 16px; background: var(--canvas); border-bottom: 1px solid var(--separator); }
  .d-nav.open { display: flex; }
  .d-nav a { min-height: 52px; font-size: 18px; }
  .d-menu { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--control); border-radius: 999px; background: none; color: inherit; font: 500 15px/20px var(--font-body); }
  .d-header .d-pill { min-height: 44px; padding: 10px 16px; font-size: 15px; }
  .d-display.d-h2 { font-size: clamp(36px, 10vw, 48px); }
  .d-app { padding: 6px 14px 14px; }
  .d-tab { display: none; }
  .d-decision { grid-template-columns: 40px minmax(0, 1fr); }
  .d-decision-ic { width: 40px; height: 40px; }
  .d-decision .d-pill { grid-column: 1 / -1; }
  .d-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-strip li { min-height: 60px; font-size: 16px; }
  .d-strip li:nth-child(4)::before { display: none; }
  .d-watch li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .d-watch li > svg:first-child { width: 40px; height: 40px; padding: 9px; }
  .d-watch .i-chev { display: none; }
  .d-watch .s { min-width: 0; font-size: 15px; }
  .d-member { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .d-approval-actions { grid-template-columns: 1fr; }
  .d-outcome dl > div { grid-template-columns: 44px minmax(0, 1fr); padding-block: 10px; }
  .d-outcome dl svg { width: 40px; height: 40px; padding: 9px; grid-row: span 2; }
  .d-close-row { flex-direction: column; }
  .d-peek { display: none; }
}

/* Phones: Daydream's mobile spacing, measured on withdaydream.com at 390 px (23 Oct 2026), in Demian's own type and
   colours (the same numbers as Amory's phones): 24 px side margins; sections open about 80 px above their first line and
   close about 60 px below their last; body 17/1.5; headings 48 and 32; heading to text 16; text to button 32; buttons
   full width. Kept from Demian on purpose: the display face, the sentence-case kicker, the pill buttons. */
@media (max-width: 767px) {
  .demian-app { --gutter: 24px; }
  .d-hero { padding-top: 72px; }
  .d-section, .d-band { padding-block: 80px 64px; }
  .d-band.d-closing { padding-bottom: 0; }
  .d-h1 { font-size: 48px; line-height: 1.02; }
  .d-display.d-h2, .d-h2 { font-size: 32px; line-height: 1.06; }
  .d-lede, .d-eyebrow { font-size: 17px; line-height: 1.5; }
  .d-hero-copy .d-eyebrow { margin-bottom: 16px; }
  .d-hero-copy .d-h1 { margin-bottom: 16px; }
  .d-hero-copy .d-lede { margin-bottom: 32px; }
  .d-split .d-h2, .d-close-row .d-h2 { margin-bottom: 16px; }
  .d-split-top { margin-bottom: 48px; }
  .d-split-top .d-lede { padding-top: 16px; }
  .d-split { gap: 48px; }
  .d-hero-grid { gap: 64px; }
  .d-actions { flex-direction: column; align-items: stretch; gap: 20px; }
  .d-actions .d-textlink { align-self: flex-start; }
  .d-pill-lg { width: 100%; min-height: 48px; padding: 12px 20px; font-size: 17px; }
  .d-close-row .d-pill-lg { margin-top: 32px; }
  .d-team { gap: 44px; }
  .d-split.d-split-top { gap: 0; }
  /* each specialist: the robot beside their name, then their card at full width */
  .d-member { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .d-member .who { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; }
  .d-member .who .d-robot { grid-column: 1; grid-row: 1 / span 2; width: 88px; margin-left: 0; }
  .d-member .who .name { grid-column: 2; align-self: end; }
  .d-member .who .role { grid-column: 2; align-self: start; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}