/* Oculith Draw product page (templates/draw.html). Loaded after home.css and
   uses its tokens, buttons, nav, sections, reveal and footer, so the page reads
   as part of the landing. This file adds only what the page has of its own:
   the drawn app window in the hero, the feature grid, the two editions, the
   Linux panel with its terminal, the credits and the screenshot gallery.
   Motion is transform / opacity / stroke draws that play once on reveal, the
   same as the landing, and all of it stops under prefers-reduced-motion. */

/* ---------- hero ---------- */
.dw-hero{padding-top:clamp(84px,11vh,112px);}
/* the landing's hero stage (monolith, eye, smoke, sight lines, datum), set
   above the title here, with drawing call-outs on the chips */
.dw-hero .dw-hx-stage{margin-top:clamp(-8px,-1vw,0px);}
.dw-copy{margin-top:clamp(18px,3vw,36px);}
.dw-pill{margin:24px 0 0;}
.dw-rust{color:var(--ink); font-weight:600;}
.dw-title{font-size:clamp(2.9rem,7.4vw,6.4rem);}
.dw-title .hx-serif{font-size:1.06em;}

.dw-os{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px;}
.dw-os li{display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:10px; border:1px solid var(--line-ui);
  background:var(--s1); font-size:.84rem; color:var(--ink2);}
.dw-os li b{color:var(--ink); font-weight:600;}
.dw-os li i{font-style:normal; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--ink3);}
.dw-os li.now{border-color:color-mix(in srgb,var(--ok) 45%,var(--line-ui));}
.dw-os li.now i{color:var(--ok-ink);}
.dw-os--col{flex-direction:column; align-items:flex-start; justify-content:flex-start;}

.dw-stage{position:relative; z-index:1; width:min(1120px,calc(100% - 2 * var(--gut))); margin:clamp(44px,6vw,72px) auto 0;}
.dw-glow{position:absolute; left:8%; right:8%; bottom:-12%; height:40%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 40%,rgba(255,122,0,.22),transparent 70%); filter:blur(30px);}

/* ---------- the drawn app window (partials/_draw_app.html) ---------- */
.da-win{position:relative; border-radius:16px; border:1px solid var(--line2); overflow:hidden; background:#0f1013;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 60px 120px -40px rgba(0,0,0,.9);
  font-size:12px; line-height:1.3; color:var(--ink2); user-select:none;}
.da-win::before{content:""; position:absolute; left:10%; right:10%; top:0; height:1px; z-index:5;
  background:linear-gradient(90deg,transparent,rgba(255,154,60,.7),transparent);}
.da-menu{display:flex; align-items:center; gap:14px; height:30px; padding:0 12px; background:#0b0c0e; border-bottom:1px solid var(--line);}
.da-menu b{color:var(--ink); font-weight:600;}
.da-logo{display:block; width:14px; height:14px; filter:drop-shadow(0 0 6px rgba(255,122,0,.35));}
.da-wc{margin-left:auto; display:flex; gap:8px;}
.da-wc i{width:9px; height:9px; border-radius:50%; background:var(--s4);}
.da-file{display:flex; align-items:center; gap:10px; height:28px; padding:0 12px; background:#0d0e11; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden;}
.da-file b{color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis;}
.da-save{margin-left:auto; display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--ok-ink);}
.da-save i{width:7px; height:7px; border-radius:50%; background:var(--ok); transition:background .3s;}
.da-save em{font-style:normal;}
.da-save.saving{color:var(--accent-hi);} .da-save.saving i{background:var(--accent); animation:live 1s ease-out infinite;}
.da-tabs{display:flex; gap:2px; padding:4px 8px 0; background:#0d0e11; border-bottom:1px solid var(--line);}
.da-tabs span{padding:6px 12px; border-radius:7px 7px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;}
.da-tabs span.on{background:#16171b; color:var(--ink); box-shadow:inset 0 2px 0 var(--accent);}
.da-body{display:grid; grid-template-columns:112px 1fr 38px; min-height:0; aspect-ratio:1120/470;}
.da-thumbs{display:flex; flex-direction:column; gap:9px; padding:8px; background:#111216; border-right:1px solid var(--line); overflow:hidden;}
.da-th-h{font-weight:600; color:var(--ink); font-size:11px;}
.da-th{position:relative; display:block; flex:none; border-radius:4px; background:#fbfbf9; border:2px solid transparent; transition:border-color .3s, transform .3s var(--ease);}
.da-th svg{display:block; width:100%; height:auto;}
.da-th em{position:absolute; right:3px; bottom:1px; font-style:normal; font-family:var(--mono); font-size:8px; color:#666; background:#fbfbf9; padding:0 2px;}
.da-th.on{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,0,.15);}
.t-fr{fill:none; stroke:#333; stroke-width:.9;}
.t-wall{fill:none; stroke:#2a2a2a; stroke-width:1.6;}
.t-dev{fill:#fff; stroke:#333; stroke-width:.8;}
.t-mk{fill:rgba(255,122,0,.12); stroke:#ff7a00; stroke-width:1.1;}
.t-dim{stroke:#1d7fd6; stroke-width:1.1;}
.t-tx{stroke:#555; stroke-width:1.6; stroke-linecap:round;}
.t-tx2{stroke:#999; stroke-width:1.1; stroke-linecap:round;}
.t-img{fill:#eceae4; stroke:#777; stroke-width:.6;}
.t-hatch{fill:#c9c6bd;}
.t-lum rect{fill:#fff; stroke:#333; stroke-width:.7;}
.t-lvl{stroke:#aaa; stroke-width:.6; stroke-dasharray:3 2;}
.t-box{fill:#fff; stroke:#333; stroke-width:.8;}
.t-tbl{fill:#fff; stroke:#333; stroke-width:.8;}
.t-tl{stroke:#9a9a9a; stroke-width:.45;}

.da-sheet{position:relative; display:grid; place-items:center; padding:3% 4%; background:#e9e9e6; overflow:hidden;
  background-image:linear-gradient(#e3e3df 1px,transparent 1px),linear-gradient(90deg,#e3e3df 1px,transparent 1px); background-size:24px 24px;}
.da-plan{width:100%; height:100%; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.25);}
.da-frame{fill:none; stroke:#222; stroke-width:1.2;}
.da-walls path{fill:none; stroke:#2a2a2a; stroke-width:3; stroke-linecap:square;}
.da-doors path{fill:none; stroke:#555; stroke-width:.9;}
.da-rooms text{font:600 8.5px var(--mono); fill:#777; text-anchor:middle; letter-spacing:.04em;}
.da-grid circle{fill:#fff; stroke:#444; stroke-width:1;}
.da-grid text{font:600 9px var(--mono); fill:#333; text-anchor:middle;}
.da-gl{stroke:#bbb; stroke-width:.6; stroke-dasharray:10 4 2 4;}
.da-tb rect,.da-tb path{fill:none; stroke:#333; stroke-width:.9;}
.da-tb text{font:600 7px var(--mono); fill:#777; letter-spacing:.05em;}
.da-tb .da-tb-co{font-size:10px; fill:#111;}
.da-tb .da-tb-v{font-size:7.5px; fill:#222;}
.da-tb .da-tb-rl{stroke:#bbb;}
.da-tb .da-tb-n{font-size:22px; fill:#111;}
.da-dev circle,.da-dev rect{fill:#fff; stroke:#333; stroke-width:1.4;}
.da-dev .da-panel{fill:#333;}
.da-dev text{font:700 8px var(--mono); fill:#222; text-anchor:middle;}
.da-north path{fill:#333;} .da-north text{font:700 8px var(--mono); fill:#333; text-anchor:middle;}
.da-cloud{fill:rgba(255,122,0,.07); stroke:#ff7a00; stroke-width:2.4;}
.da-leader{fill:none; stroke:#ff7a00; stroke-width:1.6;}
.da-dim-l,.da-tick{fill:none; stroke:#1d7fd6; stroke-width:1.6;}
.da-dim-tag{fill:#1d7fd6;}
.da-dim-t{font:600 10px var(--mono); fill:#fff; text-anchor:middle;}
.da-area{fill:rgba(60,200,120,.16); stroke:#2eaa63; stroke-width:2;}
.da-areatag rect{fill:#2eaa63;}
.da-areatag text{font:600 9px var(--mono); fill:#fff; text-anchor:middle;}
.da-areatag text.v{font-size:10px;}
.da-counts circle{fill:none; stroke:#e5484d; stroke-width:2;}
.da-cbadge rect{fill:#e5484d;} .da-cbadge text{font:700 8.5px var(--mono); fill:#fff; text-anchor:middle;}
.da-run{fill:none; stroke:#8b5cf6; stroke-width:2.4; stroke-linejoin:round;}
.da-pull{fill:#fff; stroke:#8b5cf6; stroke-width:1.6;}
.da-runtag rect{fill:#8b5cf6;} .da-runtag text{font:600 8.5px var(--mono); fill:#fff; text-anchor:middle;}
.da-stamp rect{fill:rgba(46,170,99,.06); stroke:#2eaa63; stroke-width:2;}
.da-stamp text{font:800 12px var(--mono); fill:#2eaa63; text-anchor:middle; letter-spacing:.12em;}
.da-stamp text.s{font-size:7.5px; font-weight:600; letter-spacing:.04em;}
.da-note{position:absolute; right:7%; top:9%; display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:8px;
  background:#16171b; border:1px solid var(--line2); box-shadow:0 10px 30px rgba(0,0,0,.45); max-width:46%;}
.da-note b{color:var(--ink); font-weight:600;}
.da-note span{font-size:11px; color:var(--ink3);}
/* the cursor that draws the markups (positioned by draw.js) */
.da-cursor{position:absolute; left:0; top:0; z-index:4; display:none; pointer-events:none;
  transform:translate(calc(var(--cx,50%) - 12px),calc(var(--cy,50%) - 12px)); transition:transform .9s var(--ease);}
.da-cursor svg{display:block; width:24px; height:24px; fill:none; stroke:#111; stroke-width:1.6; filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);}
.da-cursor span{position:absolute; left:20px; top:20px; padding:2px 7px; border-radius:6px; background:#16171b; border:1px solid var(--line2);
  color:var(--ink); font-family:var(--mono); font-size:10px; white-space:nowrap;}
.da-win.anim .da-cursor{display:block;}
.da-cursor.drag{transition-duration:1.3s; transition-timing-function:linear;}
.da-rail{display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0; background:#111216; border-left:1px solid var(--line);}
.da-rail i{display:grid; place-items:center; width:26px; height:26px; border-radius:6px; transition:background .25s,box-shadow .25s;}
.da-rail svg{width:15px; height:15px; fill:none; stroke:#8a8d96; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s;}
.da-rail i.on{background:rgba(255,122,0,.16); box-shadow:inset 0 0 0 1px rgba(255,122,0,.6);}
.da-rail i.on svg{stroke:var(--accent-hi);}
.da-status{display:flex; gap:16px; align-items:center; height:26px; padding:0 12px; background:#0d0e11; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px;}
.da-scale{color:var(--accent-hi);}
.da-xy{margin-left:auto;}
.da-list{border-top:1px solid var(--line2); background:#0f1013;}
.da-list-h{display:flex; align-items:center; gap:14px; padding:7px 12px; border-bottom:1px solid var(--line);}
.da-list-h b{color:var(--ink);}
.da-search{padding:3px 10px; border-radius:6px; border:1px solid var(--line-ui); background:var(--surface-ui); min-width:120px; color:var(--ink3);}
.da-n{margin-left:auto; font-family:var(--mono); font-size:11px;}
.da-rows{height:calc(6 * 27px); overflow:hidden;}
.da-row{display:grid; grid-template-columns:1.6fr .8fr 1fr .9fr 1.1fr; gap:10px; align-items:center; height:27px; padding:0 12px; border-bottom:1px solid var(--line);}
.da-row--h{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3);}
.da-row span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.da-row span i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:8px; vertical-align:0;}
.c-acc{background:var(--accent);} .c-blue{background:#1d7fd6;} .c-ok{background:var(--ok);} .c-warn{background:#e5484d;} .c-vio{background:#8b5cf6;} .c-stamp{background:#2eaa63;}
.da-rows .da-row span:first-child{color:var(--ink);}
.da-row.new{background:rgba(255,122,0,.07);}
.st{display:inline-block; padding:1px 8px; border-radius:999px; font-style:normal; font-size:11px; border:1px solid var(--line3);}
.st.open{color:var(--accent-hi); border-color:color-mix(in srgb,var(--accent) 50%,transparent);}
.st.done{color:var(--ok-ink); border-color:color-mix(in srgb,var(--ok) 50%,transparent);}

/* the session (draw.js adds .anim, then .on to each markup and its row in turn) */
.da-win.anim .mk{opacity:0; transition:opacity .35s ease;}
.da-win.anim .mk.on{opacity:1;}
.da-win.anim .mk [pathLength]{stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.3s linear;}
.da-win.anim .mk.on [pathLength]{stroke-dashoffset:0;}
.da-win.anim .mk :is(.da-dim-tag,.da-dim-t,.da-areatag,.da-cbadge,.da-runtag,.da-pull,.da-tick){opacity:0; transition:opacity .4s ease 1.2s;}
.da-win.anim .mk.on :is(.da-dim-tag,.da-dim-t,.da-areatag,.da-cbadge,.da-runtag,.da-pull,.da-tick){opacity:1;}
.da-win.anim .da-counts circle{transform-box:fill-box; transform-origin:center; transform:scale(.2); opacity:0;
  transition:transform .4s var(--ease),opacity .3s; transition-delay:calc(var(--i) * 170ms);}
.da-win.anim .da-counts.on circle{transform:none; opacity:1;}
.da-win.anim .da-stamp{transform-box:fill-box; transform-origin:center; transform:scale(1.6); transition:transform .35s cubic-bezier(.3,1.6,.5,1);}
.da-win.anim .mk.on .da-stamp{transform:none;}
.da-win.anim .da-note{opacity:0; transform:translateY(6px); transition:opacity .4s,transform .4s var(--ease);}
.da-win.anim .da-note.on{opacity:1; transform:none;}
.da-win.anim .da-rows .da-row{display:none;}
.da-win.anim .da-rows .da-row.on{display:grid; animation:rise .45s var(--ease) both;}

@media(max-width:760px){
  .da-hide-sm{display:none !important;}
  .da-body{grid-template-columns:70px 1fr 30px; aspect-ratio:auto; height:clamp(230px,64vw,340px);}
  .da-menu span:not(.da-logo):not(.da-wc){display:none;}
  .da-row{grid-template-columns:1.6fr .8fr .9fr 1.1fr;}
  .da-note{display:none;}
  .da-win{font-size:11px;}
  .da-rail i{width:22px; height:22px;} .da-rail{gap:4px;}
  .da-save em{display:none;}
}

/* ---------- mission ---------- */
.dw-mission{max-width:900px; margin:0 auto; text-align:center;}
.dw-mission h2{font-size:clamp(2rem,4.4vw,3.6rem); font-weight:580; letter-spacing:-.045em; text-wrap:balance;}
.dw-mission > p{margin:20px auto 0; max-width:42rem; color:var(--ink2); font-size:1.1rem; text-wrap:pretty;}
.dw-goals{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(32px,4vw,48px); text-align:left;}
.dw-goal{padding:22px; border-radius:18px; border:1px solid var(--line); background:linear-gradient(180deg,var(--s2),var(--s1) 70%);}
.dw-goal b{display:block; color:var(--ink); font-size:1.02rem; letter-spacing:-.02em;}
.dw-goal span{display:block; margin-top:8px; color:var(--ink2); font-size:.92rem; line-height:1.55;}
@media(max-width:820px){ .dw-goals{grid-template-columns:1fr;} }
.dw-om{color:var(--accent-hi); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); text-underline-offset:3px;}
.dw-om:hover{color:var(--ink);}

/* ---------- features ---------- */
.dw-feats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.dw-feat{position:relative; padding:22px 22px 24px; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--s2),var(--s1) 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .3s,transform .5s var(--ease);}
.dw-feat:hover{border-color:var(--line3); transform:translateY(-2px);}
.dw-feat-n{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line3); font-size:.7rem; color:var(--accent-hi);}
.dw-feat h3{margin-top:16px; font-size:1.08rem; letter-spacing:-.02em;}
.dw-feat p{margin-top:8px; color:var(--ink2); font-size:.92rem; line-height:1.55;}
.dw-pdf{display:flex; align-items:center; gap:14px; max-width:760px; margin:clamp(28px,4vw,44px) auto 0; padding:16px 20px;
  border-radius:14px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); background:rgba(255,122,0,.05);}
.dw-pdf svg{width:26px; height:26px; flex:none; color:var(--accent-hi);}
.dw-pdf p{color:var(--ink2);}
.dw-pdf b{color:var(--ink); font-weight:600;}
@media(max-width:1000px){ .dw-feats{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .dw-feats{grid-template-columns:1fr;} }

/* ---------- screenshots ---------- */
.dw-shots{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.dw-shot{margin:0; border-radius:16px; border:1px solid var(--line2); overflow:hidden; background:var(--s1);}
.dw-shot--wide{grid-column:1 / -1;}
.dw-shot img{display:block; width:100%; height:auto;}
.dw-shot figcaption{padding:12px 16px; font-size:.88rem; color:var(--ink2); border-top:1px solid var(--line);}
@media(max-width:760px){ .dw-shots{grid-template-columns:1fr;} }

/* ---------- editions ---------- */
.dw-eds{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1040px; margin:0 auto;}
.dw-ed{display:flex; flex-direction:column; gap:14px; padding:clamp(22px,3vw,34px); border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--s2),var(--s1) 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.dw-ed--apex{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  background:radial-gradient(80% 60% at 100% 0%,rgba(255,122,0,.10),transparent 60%),linear-gradient(180deg,var(--s2),var(--s1) 70%);}
.dw-ed-hd{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.dw-ed-tag{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-hi);}
.dw-ed-price{font-style:normal; font-family:var(--mono); font-size:.74rem; color:var(--ink3); padding:3px 9px; border-radius:999px; border:1px solid var(--line2);}
.dw-ed h3{font-size:clamp(1.5rem,2.4vw,2rem); font-weight:560; letter-spacing:-.035em;}
.dw-ed h3 b{font-weight:650;}
.dw-ed > p{color:var(--ink2);}
.dw-ticks{display:flex; flex-direction:column; gap:9px; margin:4px 0 8px; flex:1;}
.dw-ticks li{position:relative; padding-left:24px; color:var(--ink2); font-size:.94rem;}
.dw-ticks li::before{content:""; position:absolute; left:2px; top:.42em; width:10px; height:6px; border-left:1.6px solid var(--accent-hi);
  border-bottom:1.6px solid var(--accent-hi); transform:rotate(-45deg);}
.dw-ed .hp-btn{align-self:flex-start;}
.dw-ed-legal{margin:-2px 0 6px; padding:12px 14px; border-radius:12px; border:1px solid var(--line2); background:rgba(0,0,0,.22);
  font-size:.84rem; line-height:1.55; color:var(--ink2);}
@media(max-width:820px){ .dw-eds{grid-template-columns:1fr;} }

/* ---------- Linux + Omarchy ---------- */
.dw-lx-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,64px); align-items:center;}
.dw-lx-copy h2{font-size:clamp(2.1rem,4.4vw,3.6rem); font-weight:580; letter-spacing:-.045em;}
.dw-lx-copy > p{margin-top:18px; color:var(--ink2); font-size:1.06rem; max-width:34rem;}
.dw-lx-copy > p b{color:var(--ink);}
.dw-lx-copy .dw-os{margin-top:24px;}
.dw-term{margin:0; border-radius:16px; border:1px solid var(--line2); overflow:hidden; background:#0b0c0e;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85);}
.dw-term-hd{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--s2);}
.dw-term-hd i{width:10px; height:10px; border-radius:50%; background:var(--s4);}
.dw-term-hd i:first-child{background:var(--accent);}
.dw-term-hd span{margin-left:8px; font-size:.74rem; color:var(--ink3);}
.dw-term pre{margin:0; padding:18px 18px 20px; font-size:.84rem; line-height:1.75; color:var(--ink); white-space:pre-wrap; word-break:break-all;}
.dw-term .p{color:var(--accent-hi);}
.dw-term .ok{color:var(--ok-ink);}
.dw-caret{display:inline-block; width:8px; height:1.05em; vertical-align:-.18em; background:var(--ink2);}
.dw-term figcaption{padding:12px 18px; border-top:1px solid var(--line); font-size:.84rem; color:var(--ink3);}
@media(max-width:900px){ .dw-lx-grid{grid-template-columns:1fr;} }

/* ---------- engineering (reuses .dv-points / .dv-pt from home.css) ---------- */
.dw-eng{max-width:1100px;}

/* ---------- credits ---------- */
/* flex, not a fixed grid: the cards in the last row grow to fill it, so there
   is never an empty cell, whatever the number of projects */
.dw-credits{display:flex; flex-wrap:wrap; gap:1px; max-width:1100px; margin:0 auto;
  border-radius:18px; overflow:hidden; border:1px solid var(--line);}
.dw-credits li{flex:1 1 300px;}
.dw-credits li{background:var(--bg); box-shadow:0 0 0 1px var(--line); transition:background .25s;}
.dw-credits li:hover{background:var(--s1);}
.dw-credits a{display:flex; flex-direction:column; gap:3px; height:100%; padding:16px 20px;}
.dw-credits b svg{width:12px; height:12px; margin-left:6px; vertical-align:-1px; color:var(--ink3); transition:color .2s,transform .2s var(--ease);}
.dw-credits a:hover b svg{color:var(--accent-hi); transform:translate(2px,-2px);}
.dw-credits a:hover b{color:var(--accent-hi);}
.dw-credits b{color:var(--ink); font-weight:600;}
.dw-credits span{color:var(--ink2); font-size:.88rem;}
.dw-credits em{font-style:normal; font-size:.74rem; color:var(--accent-hi);}
.dw-credits-note{max-width:720px; margin:22px auto 0; text-align:center; color:var(--ink3); font-size:.82rem; line-height:1.55;}
.dw-credits-ft{max-width:1100px; margin:10px auto 0; text-align:center; color:var(--ink3); font-size:.88rem;}

/* ---------- closing call to action ---------- */
.dw-cta-in{max-width:760px; margin:0 auto; text-align:center;}
.dw-cta-in h2{font-size:clamp(2.1rem,4.6vw,3.9rem); font-weight:580; letter-spacing:-.045em;}
.dw-cta-in p{margin-top:14px; color:var(--ink2); font-size:1.08rem;}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:no-preference){
  html.js .dw-os{animation:hxUp 1s var(--ease) both .8s;}
  html.js .dw-stage{animation:dwRise 1.4s var(--ease) both .45s;}
  .dw-caret{animation:dwBlink 1.1s steps(1) infinite;}
  .dw-stage.off *{animation-play-state:paused;}
}
@keyframes dwRise{from{opacity:0; transform:translateY(40px) scale(.98);}to{opacity:1; transform:none;}}
@keyframes dwPin{from{opacity:0; transform:scale(.3);}to{opacity:1; transform:none;}}
@keyframes dwBlink{50%{opacity:0;}}