/* ============================================================
   Deeprion Labs, showcase ("Gece Hattı")
   ------------------------------------------------------------
   Shared by the homepage and About. The small stepped
   illustrations ("vignettes") of what an agent does, the proof
   vignettes of our own agents and the field notes, and the
   "How we build" stack with its approval gate. Behaviour lives in
   js/home.js on the homepage and js/about.js on About.
   ============================================================ */
.ap-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--acc-glow);flex:none}
/* ---------- vignettes ---------- */
.sol-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sol{display:flex;flex-direction:column;gap:10px;padding:14px 14px 22px;border-radius:14px;background:#171522;border:1px solid var(--line);min-width:0}
.sol h3{margin:10px 8px 0;font:500 17px/24px var(--sans);letter-spacing:-.2px}
.sol > p{margin:0 8px;color:var(--muted);font-size:15px;line-height:24px;flex:1}
.sol .link-arrow{margin:4px 8px 0;font-size:14px;align-self:flex-start}
.vig{position:relative;height:204px;border-radius:10px;overflow:hidden;padding:14px;font-size:12px;line-height:16px;color:#d6d5e2;background-color:var(--deep2);background-image:radial-gradient(var(--wash-hover) 1px,transparent 1.3px);background-size:14px 14px;border:1px solid var(--line)}
.vig-tag{position:absolute;right:10px;top:10px;font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9b99b3}
.vig [data-s],.vig [data-hl]{transition:opacity .24s var(--ease),transform .24s var(--ease),background-color .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease),color .24s var(--ease)}
.vig.play [data-s]:not(.on){opacity:0;transform:translateY(5px)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:5px;background:var(--wash-hover);border:1px solid var(--line);font:500 10.5px/14px var(--mono);letter-spacing:.03em;color:#c8c6d6;white-space:nowrap}
.chip--agent{background:var(--agent-soft);border-color:color-mix(in srgb,var(--ajan) 30%,transparent);color:#d6d3fa}
.chip--acc{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-text)}
.v-approval{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;border:1px solid var(--acc-line);background:var(--acc-soft);color:var(--acc-text);font:500 11px/14px var(--mono)}
/* leads */
.vl-src{display:flex;gap:6px}
.vl-src .chip.hl{border-color:color-mix(in srgb,var(--ajan) 50%,transparent);color:#fff}
.vl-card{margin-top:12px;padding:10px;border-radius:8px;background:#171521;border:1px solid var(--line2)}
.vl-row{display:flex;align-items:center;gap:10px}
.vl-row b{display:block;font-weight:500;font-size:12.5px}
.vl-row small{display:block;color:var(--faint);font-size:11px}
.vl-row > div{flex:1;min-width:0}
.vl-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#3c3960,#27253c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint-on) 10%,transparent)}
.vl-crm{font:500 10px/1 var(--mono);color:#8c8aa4;letter-spacing:.08em}
.vl-tags{display:flex;gap:6px;margin-top:9px}
.v-leads .v-approval{margin-top:10px}
/* docs */
.v-docs{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center}
.vd-file{display:grid;justify-items:center;gap:6px;color:#8d8ba3;font-size:10px}
.vd-pdf{width:42px;height:52px;border-radius:4px;background:#1c1a28;border:1px solid var(--line2);display:grid;place-items:end center;padding-bottom:7px;font:600 9px/1 var(--mono);color:var(--ajan-text);position:relative}
.vd-pdf::before{content:"";position:absolute;right:-1px;top:-1px;width:12px;height:12px;background:linear-gradient(225deg,var(--deep2) 50%,#2a2838 50%)}
.vd-file.hl{transform:translateX(8px)}
.vd-file.hl .vd-pdf{border-color:var(--ajan-line);box-shadow:0 0 16px -4px color-mix(in srgb,var(--ajan) 60%,transparent)}
.vd-table{border:1px solid var(--line2);border-radius:7px;overflow:hidden;background:#141320}
.vd-r{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:6px;align-items:center;padding:6px 8px;font-size:11px;line-height:14px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.vd-r span:last-child{text-align:right}
.vd-r .chip{justify-self:end;padding:1px 6px}
.vd-h{border-top:0;color:#77758c;font:500 9.5px/12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.vd-new.on{background:color-mix(in srgb,var(--ajan) 7%,transparent)}
/* inbox */
.v-inbox{display:grid;gap:5px;align-content:start;padding-top:28px}
.vi-msg{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;background:#161420;border:1px solid var(--line)}
.vi-msg i{width:6px;height:6px;border-radius:50%;background:#56536e;flex:none}
.vi-msg b{font-weight:500;font-size:11.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vi-msg.hl{border-color:color-mix(in srgb,var(--ajan) 30%,transparent)}
.vi-msg.hl i{background:var(--agent)}
.vi-draft{display:flex;align-items:center;gap:8px;margin-top:2px;padding:7px 9px;border-radius:7px;border:1px dashed var(--line-strong);color:#bcbad0;font-size:11.5px}
.vi-draft svg{width:14px;height:14px;flex:none}
.vi-draft span:first-of-type{flex:1}
.vi-send{padding:3px 9px;border-radius:5px;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc-text);font:500 10.5px/14px var(--mono)}
/* finance */
.v-fin{display:grid;gap:5px;align-content:start}
.vf-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.vf-head span{font-weight:500;font-size:12.5px}
.vf-head small{color:var(--faint);font:400 10.5px/1 var(--mono)}
.vf-l{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#161420;border:1px solid var(--line);font:400 11px/14px var(--mono);font-variant-numeric:tabular-nums}
.vf-b{color:#77758c}
.vf-s{color:var(--ajan-text);font-size:10.5px}
.vf-s::before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--agent);vertical-align:1px}
.vf-s--acc{color:var(--acc-text)}
.vf-s--acc::before{background:var(--accent)}
.vf-miss{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
/* brief */
.v-brief{display:grid;place-items:center}
.vb-doc{width:100%;max-width:280px;padding:12px;border-radius:8px;background:#e9e7f1;color:#1a1826;box-shadow:0 20px 40px -18px color-mix(in srgb,var(--shadow) 90%,transparent)}
.vb-title{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid rgba(20,18,30,.12);margin-bottom:6px}
.vb-title b{font:500 13px/1 var(--serif)}
.vb-title small{font:500 9.5px/1 var(--mono);color:#6d6a80;text-transform:uppercase;letter-spacing:.08em}
.vb-row{position:relative;display:grid;grid-template-columns:74px 1fr;align-items:center;gap:8px;padding:6px;border-radius:5px;font-size:11px;border:1px solid transparent}
.vb-bars{display:flex;align-items:flex-end;gap:3px;height:20px}
.vb-bars i{flex:1;height:calc(var(--h) * 100%);border-radius:1.5px;background:#a9a6c0}
.vb-row em{position:absolute;right:6px;top:-7px;font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:3px 5px;border-radius:4px;background:#4d4596;color:#fff;opacity:0;transition:opacity .24s var(--ease)}
.vb-dev.hl{border-color:#6c63c9;background:rgba(108,99,201,.08)}
.vb-dev.hl em{opacity:1}
.vb-dev.hl .vb-bars i:nth-child(n+4){background:#5b52b8}
/* memory */
.v-mem{display:grid;gap:10px;align-content:center}
.vm-q{justify-self:end;max-width:86%;padding:8px 11px;border-radius:10px 10px 3px 10px;background:var(--ajan-dim);color:var(--ajan-glow);font-size:12px;line-height:16px}
.vm-a{justify-self:start;max-width:92%;display:grid;gap:6px;padding:9px 10px;border-radius:10px 10px 10px 3px;background:#161420;border:1px solid var(--line2)}
.vm-a small{font:500 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8e8ca6}
.vm-doc{display:flex;align-items:center;gap:7px;font-size:11.5px}
.vm-doc i{width:10px;height:12px;border-radius:2px;border:1px solid #8f8cb4;flex:none}
.vm-doc em{font-style:normal;color:#9d9bb5;font-size:10.5px;margin-left:auto;padding-left:8px}
/* ---------- how we build ---------- */
.rule{margin-top:18px;max-width:820px;font:400 28px/38px var(--serif);letter-spacing:-.5px;color:#9FB2AD;text-wrap:pretty}
.rule em{font-style:normal;color:var(--text)}
/* the stack: four separate layer cards. A signal rail stands on its own to their right, with a node level with each
   card; one packet glides down it, each node and its card light softly as it passes, and it settles into the
   approval gate before leaving in the accent colour. Nothing crosses the cards or the gaps between them. */
.stack{position:relative;margin-top:56px;max-width:900px;display:grid;gap:14px}
.layer{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 176px;align-items:center}
.slab{position:relative;display:grid;grid-template-columns:28px 240px minmax(0,1fr);gap:8px 22px;align-items:center;padding:24px 28px 24px 24px;border-radius:12px;background:rgba(10,16,18,.46);border:1px solid color-mix(in srgb,var(--tint-on) 10%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tint-on) 5%,transparent)}
.layer--ai .slab{background:rgba(22,27,36,.62);border-color:color-mix(in srgb,var(--ajan) 16%,transparent)}
.slab::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(214,208,255,.42);box-shadow:0 0 24px -6px var(--ajan-halo);opacity:var(--gl,0);pointer-events:none}
.layer--gate .slab::after{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 26px -6px var(--acc-glow)}
.slab-i{font:500 11px/28px var(--sans);letter-spacing:.15em;color:#72898a}
.slab p{color:#AEBDB9;font-size:15px;line-height:24px;text-wrap:pretty}
.slab-k{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.slab-n{font:400 20px/28px var(--serif);letter-spacing:-.3px}
.tag{font:500 11px/1 var(--mono);padding:5px 7px;border-radius:5px;background:color-mix(in srgb,var(--ajan) 12%,transparent);color:#d5d2fa;border:1px solid var(--ajan-ring)}
.lane{position:absolute;z-index:1;top:0;bottom:0;right:146px;width:1px;background:linear-gradient(rgba(255,255,255,0),color-mix(in srgb,var(--tint-on) 14%,transparent) 12%,color-mix(in srgb,var(--tint-on) 14%,transparent) 88%,rgba(255,255,255,0));pointer-events:none}
.node{position:relative;z-index:2;justify-self:start;margin-left:25.5px;width:9px;height:9px;border-radius:50%;background:#1c2629;border:1px solid color-mix(in srgb,var(--ajan) 45%,transparent)}
.node::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid #dcd7ff;background:var(--ajan-halo);box-shadow:0 0 14px 1px color-mix(in srgb,var(--ajan) 60%,transparent);opacity:var(--gl,0)}
.node--code{border-radius:2px;border-color:color-mix(in srgb,var(--tint-on) 36%,transparent)}
.node--code::after{border-color:#f2f1f7;background:rgba(236,234,255,.25);box-shadow:0 0 12px rgba(236,234,255,.4)}
.packet{position:absolute;z-index:3;right:143px;top:0;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--ajan-glow);box-shadow:0 0 12px 1px color-mix(in srgb,var(--ajan) 75%,transparent);opacity:0;pointer-events:none;transform:translate3d(0,var(--py,0px),0);will-change:transform,opacity}
.packet::before{content:"";position:absolute;left:3px;bottom:3.5px;width:1px;height:calc(var(--pv,0) * 56px);border-radius:1px;background:linear-gradient(rgba(214,208,255,0),rgba(214,208,255,.55))}
.packet::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);box-shadow:0 0 14px 2px var(--acc-glow);opacity:var(--pk,0)}
.gate{position:relative;z-index:2;justify-self:start;margin-left:17px;display:flex;align-items:center;gap:8px;height:26px;white-space:nowrap;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc-text)}
.gate i,.gate-m i{position:relative;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 18%,#16201f);box-shadow:0 0 calc(18px + var(--gl,0) * 16px) calc(-2px + var(--gl,0) * 4px) var(--acc-glow)}
.gate i::after,.gate-m i::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--accent)}
.gate-m{display:none}
.stack.is-ok .slab::after{border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 26px -6px var(--acc-glow)}
.stack.is-ok .node::after{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:0 0 14px 1px var(--acc-glow)}
.note-box{margin-top:40px;max-width:900px;display:flex;align-items:flex-start;gap:16px;padding:18px 20px;border-radius:10px;border:1px solid color-mix(in srgb,var(--tint-on) 12%,transparent);background:rgba(10,16,18,.3)}
.note-k{flex:none;margin-top:2px;font:500 11px/20px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9FB2AD;padding:0 8px;border-radius:5px;background:var(--wash-hover)}
.note-box p{color:#C3CFCC;font-size:15px;line-height:24px}
/* ---------- In house: our sales tracking (an agent message with two follow-up drafts) ---------- */
/* sales-b: the sales agent messages us in a chat thread; two follow-up drafts follow as quoted replies, then Approve both / Edit keys.
   Every row keeps its place from step 0; later rows only fade in where they sit, so nothing on screen moves. */
.v-sales-b{display:flex;flex-direction:column}
.v-sales-b .vig-tag{top:12px}
.v-sales-b .vsb-head{display:flex;align-items:center;gap:7px;margin:-14px -14px 0;padding:7px 14px;min-width:0;background:linear-gradient(color-mix(in srgb,var(--tint-on) 3%,transparent),color-mix(in srgb,var(--tint-on) 3%,transparent)),var(--deep2);border-bottom:1px solid var(--line)}
.v-sales-b .vsb-back{width:8px;height:12px;flex:none;color:var(--faint)}
.v-sales-b .vsb-head b{font:500 12.5px/16px var(--sans);color:var(--text);white-space:nowrap}
.v-sales-b .vsb-head small{font:500 10px/14px var(--mono);color:var(--faint);letter-spacing:.04em}
.v-sales-b .vsb-av{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;color:var(--agent);background:var(--agent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--agent) 34%,transparent)}
.v-sales-b .vsb-av svg{width:12px;height:12px}
.v-sales-b .vsb-thread{margin-top:auto;display:grid;grid-template-columns:20px minmax(0,1fr);gap:7px;align-items:start}
.v-sales-b .vsb-col{min-width:0}
.v-sales-b .vsb-bubble{display:flow-root;padding:7px 9px 8px;border-radius:3px 10px 10px 10px;background:var(--card);border:1px solid var(--line2);font:400 12px/15px var(--sans);color:var(--text)}
.v-sales-b .vsb-time{float:right;margin:3px 0 0 8px;font:400 10px/12px var(--mono);color:var(--faint)}
/* each draft is a follow-on message from the agent, drawn as a reply quote with a lavender bar */
.v-sales-b .vsb-draft{display:flex;align-items:center;gap:5px;min-width:0;margin-top:4px;padding:4px 7px 4px 8px;background:var(--card);border:1px solid var(--line2);border-left:2px solid color-mix(in srgb,var(--agent) 64%,transparent);border-radius:3px 10px 10px 3px}
.v-sales-b .vsb-draft b{flex:none;font:500 11.5px/14px var(--sans);color:var(--text)}
.v-sales-b .vsb-draft em{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 10px/14px var(--mono);font-style:normal;color:var(--muted)}
.v-sales-b .vsb-draft .chip{flex:none;display:inline-grid;justify-items:center;padding:0 5px;font-size:10px;line-height:14px}
/* two labels share one grid cell, so a chip or key keeps its width when its label changes */
.v-sales-b .vsb-draft .chip > span,.v-sales-b .vsb-lab > span{grid-area:1/1}
.v-sales-b .vsb-draft .chip > span + span,.v-sales-b .vsb-lab > span + span{visibility:hidden}
.v-sales-b .vsb-draft .chip.hl{background:var(--wash-hover);border-color:var(--line2);color:var(--muted)}
.v-sales-b .vsb-draft .chip.hl > span,.v-sales-b .vsb-key--ok.hl .vsb-lab > span{visibility:hidden}
.v-sales-b .vsb-draft .chip.hl > span + span,.v-sales-b .vsb-key--ok.hl .vsb-lab > span + span{visibility:visible}
.v-sales-b .vsb-keys{display:grid;grid-template-columns:1.35fr 1fr;gap:5px;margin-top:5px}
.v-sales-b .vsb-key{display:flex;align-items:center;justify-content:center;gap:5px;height:24px;min-width:0;border-radius:7px;background:color-mix(in srgb,var(--tint-on) 5%,transparent);border:1px solid var(--line2);color:var(--muted);font:500 12px/1 var(--sans);white-space:nowrap}
.v-sales-b .vsb-key svg{width:11px;height:11px;flex:none}
.v-sales-b .vsb-lab{display:inline-grid;justify-items:center}
.v-sales-b .vsb-key--ok{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-text)}
.v-sales-b .vsb-key--ok.hl{background:color-mix(in srgb,var(--accent) 28%,var(--deep2));border-color:var(--accent);color:var(--text);box-shadow:0 0 18px -4px var(--acc-line)}
.v-sales-b .vsb-key--edit.hl{background:color-mix(in srgb,var(--tint-on) 3%,transparent);border-color:var(--line);color:var(--faint)}
@media (prefers-reduced-motion: reduce){.v-sales-b [data-s],.v-sales-b [data-hl]{transition:none}}
/* ---------- In house: our content pipeline (the week, filled with drafts) ---------- */
/* content-c: our content pipeline, week calendar with draft slots */
.v-content-c{display:flex;flex-direction:column}
.v-content-c .cc-head{display:flex;align-items:baseline;gap:9px;min-width:0;padding-right:76px;margin-bottom:9px}
.v-content-c .cc-head b{font:500 12.5px/16px var(--sans);color:var(--text);white-space:nowrap}
.v-content-c .cc-head small{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.v-content-c .cc-cal{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line2);border-radius:8px;background:#141320;overflow:hidden;container:cc-cal / inline-size}
.v-content-c .cc-day{min-width:0;display:grid;grid-template-rows:auto 1fr}
.v-content-c .cc-day + .cc-day{border-left:1px solid var(--line)}
.v-content-c .cc-dh{display:grid;justify-items:center;gap:2px;padding:5px 0 4px;border-bottom:1px solid var(--line)}
.v-content-c .cc-dh small{font:500 10px/13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.v-content-c .cc-dh b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;font:500 12.5px/1 var(--sans);color:color-mix(in srgb,var(--text) 78%,var(--muted));font-variant-numeric:tabular-nums}
.v-content-c .cc-today .cc-dh small{color:var(--text)}
.v-content-c .cc-today .cc-dh b{background:var(--line2);color:var(--text)}
.v-content-c .cc-db{position:relative;display:block;min-height:0;padding:6px 3px 0}
.v-content-c .cc-slot{display:grid}
.v-content-c .cc-ghost,.v-content-c .cc-fill{grid-area:1 / 1;display:grid;gap:1px;min-width:0;padding:5px 3px 5px 4px;border-radius:5px}
.v-content-c .cc-ghost{border:1px dashed var(--line3);background:rgba(255,255,255,.015)}
.v-content-c .cc-fill{border:1px solid color-mix(in srgb,var(--agent) 30%,transparent);border-left:2px solid var(--agent);padding-left:3px;background:color-mix(in srgb,var(--agent) 15%,#141320)}
.v-content-c .cc-slot b{font:500 11px/14px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-content-c .cc-slot em{font:500 10px/12px var(--mono);font-style:normal;white-space:nowrap}
.v-content-c .cc-ghost b{color:var(--muted)}
.v-content-c .cc-ghost em{color:color-mix(in srgb,var(--muted) 55%,var(--faint))}
.v-content-c .cc-fill b{color:var(--text)}
.v-content-c .cc-fill em{color:var(--agent)}
.v-content-c .cc-fill.hl{border-color:var(--acc-line);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,#141320);box-shadow:0 0 16px -5px var(--acc-glow)}
.v-content-c .cc-fill.hl b,.v-content-c .cc-fill.hl em{color:var(--acc-text)}
.v-content-c .cc-ask{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;background:color-mix(in srgb,var(--accent) 13%,#141320);box-shadow:0 12px 26px -10px color-mix(in srgb,var(--shadow) 85%,transparent)}
.v-content-c .cc-ask::before{content:"";position:absolute;top:-5px;left:calc(30% - 7.2px);width:8px;height:8px;background:inherit;border-top:1px solid var(--acc-line);border-left:1px solid var(--acc-line);transform:rotate(45deg)}
.v-content-c .cc-ask-t{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.v-content-c .cc-ask-t span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-content-c .cc-ask-t em{flex:none;font:500 10px/16px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 60%,var(--muted));white-space:nowrap}
.v-content-c .cc-ask-n{display:none}
/* narrow cards: one plain line that still says the draft is not published */
@container cc-cal (max-width:292px){
  .v-content-c .cc-ask-t .cc-ask-w,.v-content-c .cc-ask-t em{display:none}
  .v-content-c .cc-ask-t .cc-ask-n{display:block}
}
/* ---------- In house: our morning briefing (one Telegram message at 06:45) ---------- */
/* brief-a: our morning briefing as a lock-screen notification. At 06:45 a Telegram message from the
   briefing agent arrives collapsed, then expands line by line: today's calls, follow-up drafts held back,
   and last the decisions that wait for a person (the one accent moment). */
.v-brief-a{display:flex;flex-direction:column}
/* lock screen clock */
.v-brief-a .ba-lock{align-self:flex-start;display:flex;align-items:center;gap:9px;min-width:0;margin:0 0 9px 2px}
.v-brief-a .ba-lock b{font:300 21px/24px var(--sans);letter-spacing:-.2px;color:#e6e4ef;font-variant-numeric:tabular-nums}
.v-brief-a .ba-day{display:inline-flex;align-items:center;gap:5px;min-width:0;margin-top:2px;font:400 12px/14px var(--sans);letter-spacing:0;text-transform:none;color:#a9a7bb;white-space:nowrap}
.v-brief-a .ba-day svg{flex:none;color:#77758c}
/* the notification */
.v-brief-a .ba-note{width:100%;max-width:330px;min-width:0;padding:8px 10px 4px;border-radius:12px;background:#1d1b2b;border:1px solid var(--line2);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tint-on) 5%,transparent),0 16px 30px -18px color-mix(in srgb,var(--shadow) 95%,transparent)}
.v-brief-a .ba-head{display:flex;align-items:center;gap:6px;min-width:0}
.v-brief-a .ba-app{flex:none;display:grid;place-items:center;width:15px;height:15px;border-radius:4px;background:#2c2a42;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint-on) 10%,transparent);color:#d9d7ea}
.v-brief-a .ba-appn{flex:1;min-width:0;font:500 11px/14px var(--sans);letter-spacing:.02em;color:#8c8aa4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-brief-a .ba-now{flex:none;font:400 10px/14px var(--mono);color:var(--muted)}
.v-brief-a .ba-from{display:block;margin-top:5px;font-weight:500;font-size:12.5px;line-height:16px;color:#d6d3fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-brief-a .ba-pre{margin:0 0 4px;font-size:11.5px;line-height:15px;color:#a9a7bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* message lines: collapsed while the notification is closed, they open one by one */
.v-brief-a .ba-row{display:flex;align-items:baseline;gap:7px;min-width:0;max-height:22px;margin:0 -6px;padding:3px 6px;border:1px solid transparent;border-top-color:var(--line);overflow:hidden;
  transition:max-height .3s var(--ease),padding .3s var(--ease),border-color .24s var(--ease),background-color .24s var(--ease),box-shadow .24s var(--ease),opacity .24s var(--ease) .08s,transform .24s var(--ease) .08s}
.v-brief-a.play .ba-row:not(.on){max-height:0;padding-block:0;border-top-color:transparent;border-width:0}
.v-brief-a .ba-row svg{flex:none;align-self:center;color:var(--agent)}
.v-brief-a .ba-k{flex:1;min-width:0;font-size:11.5px;line-height:14px;color:#dddbe8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-brief-a .ba-v{flex:none;font:400 10px/14px var(--mono);color:var(--ajan-text)}
.v-brief-a .ba-v b{font-weight:500;color:#eceaf5}
/* the decisions line: neutral when it arrives, then it is the person's turn */
.v-brief-a .ba-dec svg{color:#8e8ca6;transition:color .24s var(--ease)}
.v-brief-a .ba-badge{flex:none;align-self:center;display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:color-mix(in srgb,var(--tint-on) 8%,transparent);border:1px solid var(--line2);font:500 10px/1 var(--mono);color:#d6d5e2;transition:background-color .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease)}
.v-brief-a .ba-dec.hl{border-color:var(--acc-line);border-radius:7px;background:var(--acc-soft)}
.v-brief-a .ba-dec.hl svg{color:var(--accent)}
.v-brief-a .ba-dec.hl .ba-k{color:var(--acc-text)}
.v-brief-a .ba-dec.hl .ba-badge{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 10px var(--acc-glow)}
/* phone home indicator */
.v-brief-a .ba-home{position:absolute;left:50%;bottom:6px;width:64px;height:3px;margin-left:-32px;border-radius:2px;background:color-mix(in srgb,var(--tint-on) 16%,transparent)}
@media (prefers-reduced-motion: reduce){
  .v-brief-a .ba-row,.v-brief-a .ba-dec svg,.v-brief-a .ba-badge{transition:none}
}
/* ---------- Field notes: the program log card ---------- */
/* field-a: a field note as a logbook page. A bound page with a ruled label column; step 0 already holds the
   header and the starting point, the other lines are blank write-in rules with a caret on the next one.
   Each step writes one line: the review's grade tally, the first build (lavender, the agent's work), what stays
   human (the single accent moment, marked on the column rule), and the status line. On the homepage the cards are
   examples, so the header reads "Example log", the status "Illustration" and the footer "Not a client record".
   Slot length: keep each client value to about 36 characters (two lines at the 270px width). Starting point,
   First build and Stays human wrap to two lines and clamp with an ellipsis after that; the grade counts are
   one or two digits; the start month is a short date such as "March 2026".
   The [sector] slot in the h3 sits outside .v-field-a: replace it with the owner's value before publishing
   (or style .slot on the host page), since this file only styles slots inside the vignette. */
.v-field-a{
  --fa-paper:color-mix(in srgb,var(--deep2) 70%,var(--card));
  --fa-spine:color-mix(in srgb,var(--deep2) 82%,black);
  --fa-ink:color-mix(in srgb,var(--text) 88%,var(--muted));
  --fa-label:color-mix(in srgb,var(--muted) 55%,var(--faint));
  display:flex;flex-direction:column}
/* client placeholders: a faint band and a thin underline, drawn inside the line box so a clamp never cuts them */
.v-field-a .slot{padding:0 2px;border-radius:3px;color:inherit;
  background:linear-gradient(color-mix(in srgb,var(--tint-on) 5.5%,transparent),color-mix(in srgb,var(--tint-on) 5.5%,transparent)) 0 50%/100% 13px no-repeat;
  text-decoration:underline dotted 1px color-mix(in srgb,var(--tint-on) 34%,transparent);text-underline-offset:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* header, kept clear of the tag */
.v-field-a .fa-head{display:flex;align-items:baseline;gap:8px;min-width:0;padding-right:70px;margin:-5px 0 4px}
.v-field-a .fa-head b{flex:none;font:500 12.5px/16px var(--sans);color:var(--text);white-space:nowrap}
.v-field-a .fa-head small{min-width:0;font:400 10px/16px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the page: a bound spine with one punched hole per row, five equal ruled rows, a column rule between label and value */
.v-field-a .fa-page{position:relative;flex:1;min-height:0;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));padding:0 8px 0 24px;border-radius:8px;border:1px solid var(--line2);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tint-on) 3%,transparent);
  background:linear-gradient(90deg,var(--fa-spine) 0 15px,color-mix(in srgb,var(--tint-on) 10%,transparent) 15px 16px,transparent 16px),var(--fa-paper)}
.v-field-a .fa-page::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:8px;
  background:radial-gradient(circle at 4px 50%,color-mix(in srgb,var(--deep2) 40%,black) 0 2.2px,color-mix(in srgb,var(--tint-on) 9%,transparent) 2.5px 3px,transparent 3.3px) 0 0/8px 20% repeat-y}
.v-field-a .fa-row{display:grid;grid-template-columns:clamp(74px,calc(100% - 172px),94px) minmax(0,1fr);min-width:0;min-height:0;border-top:1px solid var(--line)}
.v-field-a .fa-row:first-child{border-top:0}
.v-field-a .fa-k{display:flex;align-items:center;min-width:0;padding:2px 8px 2px 0;font:500 10px/11px var(--mono);letter-spacing:0;text-transform:uppercase;text-wrap:balance;color:var(--faint);transition:color .24s var(--ease)}
.v-field-a .fa-row:first-child .fa-k,.v-field-a .fa-row.hl .fa-k{color:var(--fa-label)}
.v-field-a .fa-v{position:relative;display:flex;align-items:center;min-width:0;padding:2px 0 2px 9px;border-left:1px solid var(--line);font:400 11.5px/16px var(--sans);color:var(--fa-ink)}
/* row text: the marker stays outside the clamp, so its glow is never cut; the value wraps to two lines at most */
.v-field-a .fa-tx{display:flex;align-items:center;min-width:0;overflow:visible}
.v-field-a .fa-tx > i,.v-field-a .fa-tx > svg{flex:none}
.v-field-a .fa-tx--w{align-items:flex-start;font-size:11px;line-height:13px}
.v-field-a .fa-cl{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere}
/* blank write-in rule and the caret on the next line to be written */
.v-field-a.play .fa-row[data-hl]:not(.hl) .fa-v::before{content:"";position:absolute;left:9px;right:22%;top:50%;margin-top:4px;border-top:1px dotted color-mix(in srgb,var(--tint-on) 16%,transparent)}
.v-field-a.play .fa-row:first-child + .fa-row:not(.hl) .fa-v::after,
.v-field-a.play .fa-row.hl + .fa-row:not(.hl) .fa-v::after{content:"";position:absolute;left:10px;top:50%;width:1px;height:12px;margin-top:-7px;background:var(--muted);animation:v-field-a-caret 1.1s linear infinite}
@keyframes v-field-a-caret{0%,58%{opacity:1}62%,96%{opacity:0}100%{opacity:1}}
/* found in the review: one segmented tally, green / yellow / red; inside it the slot keeps only its underline */
.v-field-a .fa-grades{display:inline-flex;min-width:0;max-width:100%;border-radius:5px;background:color-mix(in srgb,var(--tint-on) 3.5%,transparent);border:1px solid var(--line2);overflow:hidden}
.v-field-a .fa-g{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;font:500 10.5px/14px var(--mono);color:var(--fa-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.v-field-a .fa-g + .fa-g{border-left:1px solid var(--line)}
.v-field-a .fa-g i{flex:none;width:6px;height:6px;border-radius:50%}
.v-field-a .fa-g--g i{background:var(--ok)}
.v-field-a .fa-g--y i{background:var(--hold)}
.v-field-a .fa-g--r i{background:var(--stop)}
.v-field-a .fa-g .slot{padding:0;background:none}
/* first build: the agent's work, lavender. #d6d3fa is the global .chip--agent text colour. */
.v-field-a .fa-ag{display:inline-block;width:6px;height:6px;margin:3.5px 7px 0 0;border-radius:50%;background:var(--agent);box-shadow:0 0 8px color-mix(in srgb,var(--agent) 60%,transparent)}
.v-field-a .fa-row--ag .fa-tx{color:#d6d3fa}
/* stays human: the one accent moment, marked on the column rule with a soft band */
.v-field-a .fa-row--hum .fa-v{transition:border-color .24s var(--ease),background-color .24s var(--ease)}
.v-field-a .fa-row--hum.hl .fa-v{border-left-color:var(--accent);background-color:var(--acc-soft);background-image:linear-gradient(90deg,transparent 40%,var(--fa-paper))}
.v-field-a .fa-hum{color:var(--acc-text);font-weight:500}
.v-field-a .fa-hum .ap-dot{width:6px;height:6px;margin:3.5px 7px 0 0}
/* status */
.v-field-a .fa-st{color:var(--text);font-weight:500}
/* footer line under the page */
.v-field-a .fa-foot{margin-top:3px;padding-left:25px;font:400 10px/12px var(--mono);color:var(--fa-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion: reduce){
  .v-field-a .fa-v::after{animation:none!important}
  .v-field-a .fa-k,.v-field-a .fa-row--hum .fa-v{transition:none}
}
/* ---------- About: the stack on its own petrol panel ---------- */
.build-panel{padding:48px 44px;border-radius:16px;background:var(--petrol);border:1px solid var(--line)}
.build-panel .stack{margin-top:0}
.dl-section .sol-grid{margin-top:0}
/* Futura capitals on labels, as in the homepage polish pass */
.vig-tag,.note-k,.gate,.vd-h,.vb-title small,.vm-a small,.vl-crm{font-family:var(--sans);letter-spacing:.15em}
.v-approval{font-family:var(--sans);letter-spacing:.01em;font-size:12.5px;line-height:16px}
.stack{max-width:none}
.note-box{max-width:none}
/* ---------- motion toggle (added by js/home.js and js/about.js) ---------- */
.motion-toggle{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:7px 13px;border-radius:7px;border:1px solid var(--line2);background:var(--wash);color:var(--ink-2);font:500 13px/18px var(--sans);letter-spacing:.01em;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.motion-toggle:hover{background:color-mix(in srgb,var(--tint-on) 8%,transparent);border-color:var(--line3);color:var(--text)}
.motion-toggle::before{content:"";flex:none;box-sizing:border-box;width:8px;height:10px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.motion-toggle[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
@media (prefers-reduced-motion: reduce){.motion-toggle{display:none}}
@media (max-width:1024px){
  .sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slab{grid-template-columns:28px minmax(0,1fr);gap:6px 16px}
  .slab p{grid-column:2}
}
@media (min-width:721px) and (max-width:1024px){
  .sol-grid > .sol:last-child:nth-child(odd){grid-column:1 / -1}
  /* a vignette card lays out side by side: the vignette keeps its two-column width, the text sits beside it */
  .sol-grid > .sol:last-child:nth-child(odd):not(.founder-card){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:30px;row-gap:10px;align-content:start}
  .sol-grid > .sol:last-child:nth-child(odd):not(.founder-card) > .vig{grid-column:1;grid-row:1 / span 2}
  .sol-grid > .sol:last-child:nth-child(odd):not(.founder-card) > :not(.vig){grid-column:2}
  .sol-grid > .sol:last-child:nth-child(odd):not(.founder-card) > h3{margin-top:4px}
}
@media (max-width:720px){
  .build-panel{padding:24px 16px}
  .sol-grid{grid-template-columns:1fr}
  .rule{font-size:22px;line-height:31px}
  .layer{grid-template-columns:minmax(0,1fr)}
  .slab{padding:20px 18px;gap:6px 14px}
  .lane,.node,.packet,.gate{display:none}
  .gate-m{display:flex;align-items:center;gap:8px;grid-column:2;justify-self:start;margin-top:6px;font:500 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--acc-text)}
  .gate-m i{width:18px;height:18px}
  .gate-m i::after{inset:4.5px}
  .note-box{flex-direction:column;gap:10px}
}