/* BeginThings Visuals v4 (full rollout r1, 22 Oct 2026). Product-true visuals: mini UI demos, light diagrams, typographic cards.
   All copy is real HTML (site i18n translates it). Animations start on view and respect reduced motion (OS + site setting). */
.v4,.v4c{--v-ink:#14202e;--v-mut:#4d6078;--v-line:#d9dfea;--v-card:#fff;--v-soft:#f3f5fb;--v-ind:#6842b5;--v-ind2:#8a6be0;--v-tint:#efeafb;
  --v-blue:#285bb7;--v-ok:#15803d;--v-saf:#d9861c;--v-shadow:0 18px 40px -24px rgba(20,32,60,.35),0 2px 6px rgba(20,32,60,.06);
  font-family:'DM Sans',Inter,system-ui,sans-serif;color:var(--v-ink);box-sizing:border-box;margin:0;min-width:0}
html[data-bt-theme="dark"] .v4,html[data-bt-theme="dark"] .v4c{--v-ink:#eef2f8;--v-mut:#a9b5c7;--v-line:#2c3548;--v-card:#121a2a;--v-soft:#18213400;--v-tint:#231c3d;--v-ind2:#a98cf5;--v-shadow:0 18px 40px -24px rgba(0,0,0,.7)}
.v4 *,.v4c *{box-sizing:border-box}
.v4 :where(p,ul,ol,h3,h4,figcaption){margin:0}
.v4 :where(ul,ol){list-style:none;padding:0}
.v4-cap{font-size:12px;line-height:1.4;color:var(--v-mut);margin-top:10px;display:flex;gap:8px;align-items:flex-start}
.v4-cap::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--v-ind);flex:none;margin-top:.45em}
.v4-pill{font-size:11px;line-height:1.2;padding:4px 8px;border-radius:999px;background:var(--v-tint);color:var(--v-ind);font-weight:600;min-width:0;overflow-wrap:anywhere}
.v4-sr{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* window shell (mini app) */
.v4-win{background:var(--v-card);border:1px solid var(--v-line);border-radius:18px;box-shadow:var(--v-shadow);overflow:hidden}
.v4-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--v-line);font-size:12.5px;font-weight:600}
.v4-bar>i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--v-line);flex:none}
.v4-bar>span:first-of-type{margin-inline-start:6px}
.v4-bar .v4-pill{margin-inline-start:auto}

/* 1. NOTES mini app (home #beginnotes) */
.v4-notes{inline-size:min(400px,100%)}
.v4-search{display:flex;align-items:center;gap:8px;margin:12px 12px 6px;padding:8px 10px;border:1px solid var(--v-line);border-radius:10px;background:var(--v-soft);font-size:13px}
.v4-search svg{inline-size:15px;block-size:15px;flex:none;stroke:var(--v-mut);fill:none;stroke-width:2}
.v4-search input{all:unset;flex:1;min-inline-size:0;font:inherit;color:var(--v-ink)}
.v4-search input::placeholder{color:var(--v-mut)}
.v4-count{font-size:11.5px;color:var(--v-ind);font-weight:600;white-space:nowrap}
.v4-list{padding:4px 8px 10px!important;display:grid;gap:2px;align-content:start}
.v4-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:start;padding:8px 8px;border-radius:10px;transition:background .3s,opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.v4-list li>.v4-ico{grid-row:span 2;inline-size:26px;block-size:26px;border-radius:8px;display:grid;place-items:center;background:var(--v-tint);color:var(--v-ind);font-size:12px;font-weight:700;margin-top:1px}
.v4-list li b{font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.v4-list li .v4-meta{font-size:11.5px;color:var(--v-mut);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.v4-meta em{font-style:normal;font-weight:600;color:var(--v-ind)}
.v4-list li.is-hit{background:var(--v-tint)}
.v4-list li.is-hit mark{background:#ffe7a8;color:inherit;border-radius:3px;padding:0 1px}
.v4-list li.is-out{display:none!important}
.v4-list li.is-new{animation:v4drop .55s cubic-bezier(.2,.7,.2,1) both}
.v4-list li .v4-check{inline-size:14px;block-size:14px;border:1.6px solid var(--v-mut);border-radius:4px;display:none;flex:none}
.v4-list li.is-task .v4-check{display:inline-block}
.v4-list li.is-task .v4-today{display:inline-flex}
.v4-list li.is-task .v4-meta em:not(.v4-today){display:none}
.v4-meta .v4-today{color:#fff}
.v4-today{display:none;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--v-ind);border-radius:999px;padding:2px 7px}
.v4-list li[data-src="mail"]{display:none}
.v4-list li[data-src="mail"].is-in{display:grid;animation:v4drop .55s cubic-bezier(.2,.7,.2,1) both}
.v4-list li[data-src="quick"]{display:none}
.v4-list li[data-src="quick"].is-in{display:grid}
.v4-list li[data-src="quick"].is-in b{animation:v4type 1.1s steps(28) both}
@keyframes v4drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes v4type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.cv-stack.v4-stack{display:grid;min-width:0;justify-items:start}
.v4-stack .v4-notes .v4-list{padding-bottom:40px!important}
.v4-stack .bnx-stage{margin-top:-30px;margin-inline-start:clamp(20px,12%,80px);position:relative;z-index:3}
@media (max-width:960px){.v4-stack .bnx-stage{margin-inline-start:16px}}

/* 2. TRAIL (home #rooms): one sample project, its six faces as a flat step list + detail panel. No 3D. */
.v4-trail{inline-size:min(470px,100%);background:var(--v-card);border:1px solid var(--v-line);border-radius:20px;box-shadow:var(--v-shadow);overflow:hidden}
.v4-trail .v4-bar span:first-of-type{overflow-wrap:anywhere;min-width:0}
.v4-trail-body{display:grid;grid-template-columns:minmax(6.6em,34%) minmax(0,1fr);min-block-size:236px}
.v4-trail-rail{position:relative;display:grid;align-content:start;gap:2px;padding:12px 8px 12px 10px!important;border-inline-end:1px solid var(--v-line);background:var(--v-soft)}
.v4-trail-rail::before,.v4-trail-rail::after{content:"";position:absolute;inset-inline-start:23px;top:26px;inline-size:2px;border-radius:2px;background:var(--v-line)}
.v4-trail-rail::before{block-size:calc(100% - 52px)}
.v4-trail-rail::after{background:var(--v-ind);block-size:calc((100% - 52px)*var(--p,0));transition:block-size .6s cubic-bezier(.3,.7,.2,1)}
.v4-trail-rail button{position:relative;z-index:1;display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;align-items:center;inline-size:100%;padding:5px 4px;border:0;border-radius:9px;background:none;color:var(--v-mut);font:600 12.5px/1.2 'DM Sans',system-ui,sans-serif;text-align:start;cursor:pointer;transition:color .3s,background .3s}
.v4-trail-rail button b{display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;border:2px solid var(--v-line);background:var(--v-card);font-size:10.5px;font-weight:700;color:var(--v-mut);transition:background .3s,border-color .3s,color .3s,transform .3s}
.v4-trail-rail button span{overflow-wrap:anywhere;hyphens:auto;min-width:0}
.v4-trail-rail button.is-done b{border-color:var(--v-ind);color:var(--v-ind)}
.v4-trail-rail button[aria-pressed="true"]{color:var(--v-ink);background:var(--v-card)}
.v4-trail-rail button[aria-pressed="true"] b{background:var(--v-ind);border-color:var(--v-ind);color:#fff;transform:scale(1.08)}
.v4-trail-rail button:focus-visible{outline:2px solid var(--v-blue);outline-offset:1px}
.v4-trail-panes{display:grid;padding:14px 16px 14px;min-width:0}
.v4-pane{grid-area:1/1;display:flex;flex-direction:column;gap:7px;min-width:0;font-size:13px;line-height:1.3;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.v4-pane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s .05s,transform .45s .05s cubic-bezier(.2,.7,.2,1),visibility 0s}
.v4-pane>*{min-width:0;overflow-wrap:anywhere}
.v4-pane-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ind)}
.v4-pane>b{font-size:16px;line-height:1.2}
.v4-pane .v4-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 10px;padding:5px 0;border-bottom:1px dashed var(--v-line)}
.v4-pane .v4-row>span:last-child{font-weight:600;color:var(--v-ind);font-variant-numeric:tabular-nums;margin-inline-start:auto}
.v4-pane .v4-row.tot{border-bottom:0;font-weight:700}
.v4-pane .v4-st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--v-tint);color:var(--v-ind)!important}
.v4-pane .v4-st.ok{background:rgba(21,128,61,.12);color:var(--v-ok)!important}
.v4-pane .v4-next{margin-top:auto;align-self:flex-start;font-weight:600;font-size:12.5px;color:var(--v-ind);background:var(--v-tint);padding:5px 9px;border-radius:8px}
.v4-pane .v4-gantt{display:grid;gap:7px;margin-top:2px}
.v4-pane .v4-gantt>span{display:grid;grid-template-columns:minmax(4.8em,auto) minmax(40%,1fr);gap:8px;align-items:center;font-size:12.5px}
.v4-pane .v4-gantt i{display:block;block-size:8px;border-radius:4px;background:var(--v-ind2)}
.v4-pane .v4-wk{display:flex;justify-content:space-between;font-size:10.5px;color:var(--v-mut);font-weight:600;padding-inline-start:calc(4.8em + 8px)}
.v4-trail-meter{display:flex;gap:4px;padding:10px 14px 0;border-top:1px solid var(--v-line)}
.v4-trail-meter i{flex:1;block-size:4px;border-radius:2px;background:var(--v-line);transition:background .35s}
.v4-trail-meter i.is-on{background:var(--v-ind)}
.v4-trail .v4-cap{margin:8px 14px 12px}
@media (max-width:359px){.v4-trail-body{grid-template-columns:1fr}.v4-trail-rail{grid-template-columns:repeat(3,minmax(0,1fr));border-inline-end:0;border-bottom:1px solid var(--v-line)}.v4-trail-rail::before,.v4-trail-rail::after{display:none}}

/* 3. SHELF (home #products): typographic index of what follows */
.v4-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0;border-block:1px solid var(--v-line);margin-top:clamp(22px,3vw,32px)}
.v4-shelf a{display:flex;gap:14px;align-items:center;padding:16px 18px 16px 4px;text-decoration:none;color:inherit;border-inline-end:1px solid var(--v-line);transition:background .25s}
.v4-shelf a:last-child{border-inline-end:0}
.v4-shelf a:hover{background:var(--v-tint)}
.v4-shelf .v4-big{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(34px,3.2vw,44px);line-height:.9;color:var(--v-ind);min-inline-size:1.3em;text-align:center;flex:none}
.v4-shelf b{display:block;font-size:14.5px;line-height:1.25}
.v4-shelf small{display:block;font-size:12.5px;line-height:1.35;color:var(--v-mut);margin-top:2px}
.v4-shelf code{font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--v-ink);background:var(--v-tint);padding:1px 5px;border-radius:4px}
@media (max-width:899px){.v4-shelf a{border-inline-end:0;border-bottom:1px solid var(--v-line)}.v4-shelf a:last-child{border-bottom:0}}

/* 4. NET (BeginRooms tour head): where each face sits */
.v4-net{inline-size:min(360px,100%);justify-self:center}
.v4-net-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.v4-net-grid button{aspect-ratio:1;border:1px solid var(--v-line);border-radius:10px;background:var(--v-card);color:var(--v-ink);font:600 12px/1.15 'DM Sans',system-ui,sans-serif;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:8px;cursor:pointer;transition:background .35s,border-color .35s,transform .35s,color .35s;text-align:start;overflow-wrap:anywhere;min-inline-size:0}
.v4-net-grid button small{font-size:10px;color:var(--v-mut);font-weight:700}
.v4-net-grid button.is-on{background:var(--v-ind);border-color:var(--v-ind);color:#fff;transform:translateY(-3px)}
.v4-net-grid button.is-on small{color:#e7defc}
.v4-net-grid .n1{grid-column:2;grid-row:1}.v4-net-grid .n4{grid-column:1;grid-row:2}.v4-net-grid .n2{grid-column:2;grid-row:2}
.v4-net-grid .n3{grid-column:3;grid-row:2}.v4-net-grid .n6{grid-column:4;grid-row:2}.v4-net-grid .n5{grid-column:2;grid-row:3}
.v4-net-say{display:grid;margin-top:14px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(20px,2vw,24px);line-height:1.15;color:var(--v-ind)}
.v4-net-say span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.v4-net-say span.is-on{opacity:1;transform:none}
.v4-net .v4-cap{margin-top:8px}

/* 5. CONVERGE (BeginRooms who): many places -> one cube */
.v4-conv{position:relative;inline-size:min(560px,100%);justify-self:end;background:var(--v-card);border:1px solid var(--v-line);border-radius:22px;box-shadow:var(--v-shadow);padding:18px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr);gap:14px;align-items:center;overflow:hidden}
.v4-conv-from{display:grid;gap:7px}
.v4-conv-from li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;overflow-wrap:anywhere;font-size:13px;line-height:1.25;padding:7px 10px;border:1px dashed var(--v-line);border-radius:10px;background:var(--v-soft);transition:transform .6s cubic-bezier(.3,.7,.2,1),opacity .5s;transition-delay:calc(var(--i)*120ms)}
.v4-conv-from li i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--v-mut);text-transform:uppercase;letter-spacing:.06em;margin-inline-start:auto;overflow-wrap:anywhere}
.v4-conv-arrow{inline-size:34px;block-size:2px;background:linear-gradient(90deg,var(--v-line),var(--v-ind));position:relative}
.v4-conv-arrow::after{content:"";position:absolute;inset-inline-end:-1px;top:-4px;border:5px solid transparent;border-inline-start:7px solid var(--v-ind);border-inline-end:0}
.v4-conv-to{display:grid;justify-items:center;gap:10px;text-align:center}
.v4-iso{--c:64px;inline-size:calc(var(--c)*1.75);block-size:calc(var(--c)*1.75);position:relative;transform:scale(.6);opacity:.35;transition:transform .7s cubic-bezier(.3,1.4,.4,1) .7s,opacity .5s .7s}
.v4-iso i{position:absolute;inline-size:var(--c);block-size:var(--c);left:50%;top:50%;border-radius:6px;border:1.5px solid var(--v-ind)}
.v4-iso i:nth-child(1){transform:translate(-50%,-100%) rotate(-30deg) skewX(30deg) scaleY(.86);background:var(--v-tint)}
.v4-iso i:nth-child(2){transform:translate(-93%,-18%) skewY(30deg) scaleX(.86);background:#fff;background:color-mix(in srgb,var(--v-card) 70%,var(--v-tint))}
.v4-iso i:nth-child(3){transform:translate(-7%,-18%) skewY(-30deg) scaleX(.86);background:var(--v-ind2);opacity:.85}
.v4-conv-to b{font-size:15px;line-height:1.2}
.v4-conv-to p{font-size:12.5px;color:var(--v-mut);line-height:1.35}
.v4-conv.is-on .v4-iso{transform:none;opacity:1}
.v4-conv.is-on .v4-conv-from li{transform:translateX(12px);border-style:solid;border-color:rgba(104,66,181,.35);background:var(--v-tint)}
.v4-conv.is-on .v4-conv-from li i{color:var(--v-ind)}
.v4-replay{grid-column:1/-1;justify-self:start;font:600 12px/1 'DM Sans',system-ui,sans-serif;border:0;background:none;color:var(--v-blue);cursor:pointer;padding:4px 0}
@media (max-width:560px){.v4-conv{grid-template-columns:1fr;justify-items:stretch}.v4-conv-arrow{transform:rotate(90deg);justify-self:center;margin:4px 0}.v4-conv.is-on .v4-conv-from li{transform:none}}

/* 6. REAL CAPTURE (BeginRooms client project) */
.v4-shot{inline-size:min(460px,100%);margin-top:clamp(22px,3vw,32px)}
.v4-shot .v4-win{background:#0d1220;border-color:#263049}
.v4-shot .v4-bar{color:#cfd7e6;border-color:#263049}
.v4-shot .v4-bar>i{background:#33405c}
.v4-shot .v4-bar .v4-pill{background:rgba(169,140,245,.18);color:#d8cbff}
.v4-shot picture,.v4-shot img{display:block;inline-size:100%;block-size:auto}

/* 7. TYPOGRAPHIC: day out of order (BeginNotes #inside) */
.v4-day{inline-size:min(390px,100%);background:var(--v-card);border:1px solid var(--v-line);border-radius:18px;box-shadow:var(--v-shadow);padding:16px 16px 14px}
.v4-day ol{display:grid;gap:8px}
.v4-day li{display:grid;grid-template-columns:3.6em minmax(0,1fr);gap:12px;align-items:baseline;font-size:16px;line-height:1.3;opacity:0;transform:translateX(-8px);transition:opacity .45s,transform .45s;transition-delay:calc(var(--i)*160ms)}
.v4-day li time{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--v-mut)}
.v4-day li:nth-child(2){margin-inline-start:14px}.v4-day li:nth-child(3){margin-inline-start:6px}
.v4-day hr{border:0;border-top:1px dashed var(--v-line);margin:12px 0 10px}
.v4-day .v4-one{display:flex;align-items:center;gap:8px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:26px;line-height:1.1;color:var(--v-ind)}
.v4-day .v4-one svg{inline-size:18px;block-size:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.v4-day.is-on li{opacity:1;transform:none}

/* layout helpers replacing the v3 split classes */
.v4-split{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:900px){.v4-split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.v4-split>.v4{justify-self:end}}
.v4-aside{display:flex;gap:clamp(16px,2.4vw,32px);align-items:center;flex-wrap:wrap;min-width:0}
.v4-aside>p{flex:1 1 16em;min-width:0;margin:0}

/* BLOG COVERS (.v4c): HTML covers in 5 templates, no images */
.v4c{position:relative;display:grid;align-content:center;gap:10px;aspect-ratio:1.89;min-block-size:100%;padding:clamp(14px,6%,26px);border-radius:inherit;overflow:hidden;
  background:radial-gradient(circle at 96% 118%,var(--c-glow,rgba(104,66,181,.12)) 0 32%,transparent 32.4%),var(--c-bg,linear-gradient(150deg,#f6f3fe,#e9eefb));color:var(--c-ink,#1b2234);container-type:inline-size;line-height:1.2}
.v4c>*{position:relative;z-index:1;min-width:0}
.v4c-k{font:700 calc(clamp(9.5px,3.2cqi,12.5px)*var(--k,1))/1 'DM Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--c-acc,#6842b5)}
.v4c-big{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:calc(clamp(26px,13cqi,68px)*var(--k,1));line-height:.95;color:var(--c-acc,#6842b5);overflow-wrap:anywhere}
.v4c-h{font-weight:650;font-size:calc(clamp(14px,6.2cqi,26px)*var(--k,1));line-height:1.15;overflow-wrap:anywhere}
.v4c-s{font-size:calc(clamp(11px,4cqi,15px)*var(--k,1));color:var(--c-mut,#4d5d72);line-height:1.3}
.v4c-strike{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--c-acc,#6842b5);opacity:.65}
/* theme variants */
.v4c.t-money{--c-bg:linear-gradient(150deg,#f3fbf5,#e6f2ec);--c-acc:#16794a;--c-glow:rgba(22,121,74,.12)}
.v4c.t-priv{--c-bg:linear-gradient(150deg,#1d1838,#2b2257);--c-ink:#f2eefe;--c-mut:#c9bfeb;--c-acc:#c4b0ff;--c-glow:rgba(196,176,255,.14)}
.v4c.t-wa{--c-bg:linear-gradient(150deg,#effaf7,#e2f1ee);--c-acc:#0d7a66;--c-glow:rgba(13,122,102,.12)}
.v4c.t-speed{--c-bg:linear-gradient(150deg,#eef5ff,#e3ebfb);--c-acc:#285bb7;--c-glow:rgba(40,91,183,.12)}
.v4c.t-work{--c-bg:linear-gradient(150deg,#f6f3fe,#ebe5fa);--c-acc:#6842b5}
.v4c.t-ink{--c-bg:linear-gradient(150deg,#14202e,#1e2c44);--c-ink:#eef2f8;--c-mut:#b3c0d4;--c-acc:#9fc0ff;--c-glow:rgba(159,192,255,.12)}
/* rows (calc/table) */
.v4c-rows{display:grid;gap:clamp(3px,1.2cqi,7px);background:var(--c-card,rgba(255,255,255,.75));border-radius:12px;padding:clamp(8px,3cqi,14px);box-shadow:0 10px 24px -18px rgba(20,32,60,.5)}
.t-priv .v4c-rows,.t-ink .v4c-rows{--c-card:rgba(255,255,255,.07)}
.v4c-rows>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 10px;font-size:calc(clamp(11px,4.4cqi,17px)*var(--k,1));align-items:baseline}
.v4c-rows>div>span:last-child{font-variant-numeric:tabular-nums;font-weight:650;margin-inline-start:auto}
.v4c-rows>div.tot{border-top:1px solid currentColor;border-color:rgba(127,127,127,.3);padding-top:clamp(3px,1.2cqi,7px);font-weight:700;color:var(--c-acc)}
.v4c-f{font:500 calc(clamp(10px,3.4cqi,13px)*var(--k,1))/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-mut)}
.v4c-bar{display:flex;block-size:clamp(8px,2.6cqi,12px);border-radius:99px;overflow:hidden;gap:2px}
.v4c-bar i{flex:var(--w);background:var(--c-acc);opacity:calc(1 - var(--n,0)*.25)}
/* checklist */
.v4c-check{display:grid;gap:clamp(4px,1.6cqi,9px);list-style:none;margin:0;padding:0}
.v4c-check li{display:flex;gap:clamp(6px,2cqi,10px);align-items:flex-start;font-size:calc(clamp(11.5px,4.6cqi,18px)*var(--k,1));line-height:1.25}
.v4c-check li::before{content:"";flex:none;inline-size:1.05em;block-size:1.05em;margin-top:.1em;border-radius:.3em;border:2px solid var(--c-acc);background:var(--c-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.v4c-check li.open::before{background:transparent}
/* flow */
.v4c-flow{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(4px,1.6cqi,8px)}
.v4c-flow>span{background:var(--c-card,rgba(255,255,255,.8));border:1px solid rgba(127,127,127,.22);border-radius:10px;padding:clamp(5px,1.8cqi,9px) clamp(7px,2.4cqi,12px);font-size:calc(clamp(11px,4.4cqi,17px)*var(--k,1));font-weight:600;line-height:1.2;box-shadow:0 8px 18px -14px rgba(20,32,60,.6)}
.t-priv .v4c-flow>span,.t-ink .v4c-flow>span{--c-card:rgba(255,255,255,.08)}
.v4c-flow>span.hot{background:var(--c-acc);color:#fff;border-color:transparent}
.t-priv .v4c-flow>span.hot,.t-ink .v4c-flow>span.hot{color:#141026}
.v4c-flow>i{font-style:normal;color:var(--c-acc);font-weight:700;font-size:calc(clamp(12px,4cqi,18px)*var(--k,1))}
.v4c-flow>span.x{opacity:.6;text-decoration:line-through}
/* ui bits */
.v4c-grid{display:grid;grid-template-columns:1.4em repeat(4,minmax(0,1fr));gap:2px;font:600 clamp(9px,2.9cqi,13px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(127,127,127,.25);border-radius:8px;overflow:hidden}
.v4c-grid>*{background:#fff;color:#1b2234;padding:clamp(4px,1.6cqi,8px) 4px;text-align:end;font-variant-numeric:tabular-nums}
.v4c-grid>.hd{background:#e9edf5;text-align:center;color:#4d5d72}
.v4c-grid>span:nth-child(7){text-align:start}
.v4c-grid>.src{outline:2px solid #6842b5;outline-offset:-2px;color:#6842b5}
.v4c-grid>.sel{background:#6842b5;color:#fff}
.v4c-tags{display:flex;flex-wrap:wrap;gap:clamp(4px,1.4cqi,7px)}
.v4c-tags span{font-size:calc(clamp(10px,3.2cqi,14px)*var(--k,1));font-weight:600;padding:.35em .7em;border-radius:999px;background:var(--c-card,rgba(255,255,255,.8));border:1px solid rgba(127,127,127,.2)}
.v4c-phone{justify-self:center;inline-size:clamp(84px,30cqi,160px);border-radius:16px;border:2px solid rgba(20,32,46,.18);background:#fff;padding:9px 8px;display:grid;gap:5px}
.v4c-phone>span{display:block;font-size:calc(clamp(9.5px,3cqi,13px)*var(--k,1));font-weight:600;text-align:center;padding:.45em;border-radius:8px;background:var(--c-acc);color:#fff}
.v4c-phone>span+span{background:#eef0f6;color:#1b2234}
.v4c-phone>i{display:block;inline-size:26%;aspect-ratio:1;border-radius:50%;background:var(--c-glow);margin:2px auto 4px}
.v4c-bubble{justify-self:start;max-inline-size:86%;background:#dcf8c6;color:#14202e;border-radius:12px 12px 12px 3px;padding:.55em .8em;font-size:calc(clamp(10.5px,3.5cqi,16px)*var(--k,1));box-shadow:0 8px 18px -14px rgba(20,32,60,.6)}
.v4c-url{font:600 calc(clamp(9.5px,3cqi,14px)*var(--k,1))/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-acc);overflow-wrap:anywhere}
.v4c-meter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2cqi,10px)}
.v4c-meter>div{background:var(--c-card,rgba(255,255,255,.8));border-radius:10px;padding:clamp(6px,2.2cqi,12px);display:grid;gap:3px}
.v4c-meter b{font-size:calc(clamp(15px,7cqi,28px)*var(--k,1));line-height:1;color:var(--c-acc);font-variant-numeric:tabular-nums}
.v4c-meter span{font-size:calc(clamp(10.5px,3.6cqi,13px)*var(--k,1));color:var(--c-mut);font-weight:600}
.v4c-doc{background:#fff;color:#1b2234;border-radius:10px;padding:clamp(8px,3cqi,14px);display:grid;gap:clamp(4px,1.4cqi,7px);font-size:calc(clamp(10.5px,4cqi,15px)*var(--k,1))}
.v4c-doc>div{display:flex;gap:8px;align-items:center}
.v4c-doc>div>span:first-child{min-inline-size:5em;color:#4d5d72}
.v4c-doc s{flex:1;block-size:1em;background:#14202e;border-radius:2px;text-decoration:none}
.v4c-doc em{font-style:normal;flex:1;color:#9aa3b5}
.v4c-tabs{display:flex;gap:2px;overflow:hidden}
.v4c-tabs i{flex:1 1 0;min-inline-size:6px;block-size:clamp(10px,3.4cqi,16px);border-radius:5px 5px 0 0;background:rgba(127,127,127,.28)}
.v4c-canvas{border-radius:10px;border:1.5px solid var(--c-acc);background:var(--c-card,rgba(255,255,255,.75));padding:clamp(6px,2cqi,10px);display:flex;flex-wrap:wrap;gap:clamp(4px,1.4cqi,8px)}
.v4c-canvas span{font-size:calc(clamp(9.5px,3cqi,13px)*var(--k,1));font-weight:600;padding:.4em .6em;border-radius:4px;background:#fff3c4;color:#3a2f05;transform:rotate(var(--r,0deg))}
.v4c-canvas span:nth-child(2n){background:#e6dcff;color:#2a1a5c}
.v4c-canvas span:nth-child(3n){background:#d7f0e4;color:#0f3d29}
.v4c-qr{inline-size:clamp(40px,22cqi,96px);aspect-ratio:1;flex:none;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:4px;background:#fff;border-radius:6px}
.v4c-qr i{background:#14202e;border-radius:1px}.v4c-qr i.o{background:transparent}
.v4c-two{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(8px,3cqi,16px);align-items:center}
/* list-card sizing: cover fills the card's cover slot */
.rh-resource-cover>.v4c{inline-size:100%;block-size:100%;min-block-size:0}
/* post hero */
.v4-hero{margin:clamp(18px,3vw,28px) 0;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(20,32,60,.45)}
.v4-hero>.v4c{aspect-ratio:auto;min-block-size:clamp(200px,26vw,290px);border-radius:18px;padding:clamp(18px,5%,36px)}
@media (max-width:520px){.v4-hero>.v4c{aspect-ratio:auto;min-block-size:220px}}
/* live GST calculator inside the post hero */
.v4-gst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(12px,3cqi,26px);align-items:center}
.v4-gst-in{display:grid;gap:8px}
.v4-gst-in label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--c-mut)}
.v4-gst-in input{font:600 16px/1.2 'DM Sans',system-ui,sans-serif;padding:8px 10px;border-radius:9px;border:1px solid rgba(22,121,74,.35);background:#fff;color:#14202e;inline-size:100%}
.v4-gst-mode{display:inline-flex;border:1px solid rgba(22,121,74,.35);border-radius:999px;padding:2px;background:#fff;justify-self:start;flex-wrap:wrap}
.v4-gst-mode button{font:600 12px/1 'DM Sans',system-ui,sans-serif;border:0;background:none;padding:7px 10px;border-radius:999px;cursor:pointer;color:#14202e}
.v4-gst-mode button[aria-pressed="true"]{background:var(--c-acc);color:#fff}
.v4-gst .v4c-rows output{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
@media (max-width:620px){.v4-gst{grid-template-columns:1fr}}

/* motion */
@media (prefers-reduced-motion:reduce){.v4 *,.v4c *{transition:none!important;animation:none!important}}
html[data-bt-motion="reduce"] .v4 *,html[data-bt-motion="reduce"] .v4c *{transition:none!important;animation:none!important}
.v4-day.v4-still li,.v4-conv.v4-still li{opacity:1;transform:none}

/* heading + visual as one block (replaces v3 .cvh) */
.v4h>div:first-child,.v4h>.v4-aside{display:contents}
.v4h>div:first-child>:first-child{grid-area:eb}
.v4h>div:first-child>h2{grid-area:h2;margin-bottom:0}
.v4h>.section-aside,.v4h>.v4-aside>p{grid-area:as;margin-top:clamp(18px,3vw,26px);padding-bottom:0}
.v4h .v4{grid-area:fig;margin-top:clamp(22px,4vw,32px);justify-self:start}
.v4h.v4h-side{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"eb" "h2" "as" "fig";row-gap:0;align-items:start;max-width:none}
@media (min-width:900px){
 .v4h.v4h-side{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:". fig" "eb fig" "h2 fig" "as fig" ". fig";column-gap:clamp(40px,5vw,80px)}
 .v4h-side .v4{margin-top:0;justify-self:end;align-self:center}
 .v4h-side>.section-aside,.v4h-side>.v4-aside>p{max-width:460px}
}

/* ---- r1 additions: real-capture covers, animated covers, interactive post heroes ---- */
/* real product captures as covers */
.v4c.k-shot{padding:0;align-content:stretch;gap:0;background:#0d1220}
.v4c.k-shot picture{display:block;inline-size:100%;block-size:100%;min-block-size:0}
.v4c.k-shot img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:var(--op,50% 0)}
.v4c.k-shot .v4c-pill{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:2;font:700 calc(clamp(9.5px,3cqi,12px)*var(--k,1))/1.2 'DM Sans',system-ui,sans-serif;letter-spacing:.04em;padding:5px 9px;border-radius:999px;background:#fff;color:#14202e;box-shadow:0 2px 8px rgba(0,0,0,.25);max-inline-size:calc(100% - 20px);overflow-wrap:anywhere}
.v4-hero>.v4c.k-shot{min-block-size:0;padding:0;border-radius:18px}
.v4-hero .v4-capfig{margin:0;display:grid;gap:0;background:#0d1220;border-radius:18px;overflow:hidden}
.v4-hero .v4-capfig .v4-bar{color:#cfd7e6;border-color:#263049;background:#111827}
.v4-hero .v4-capfig .v4-bar>i{background:#33405c}
.v4-hero .v4-capfig .v4-pill{background:rgba(169,140,245,.18);color:#d8cbff}
.v4-hero .v4-capfig picture{display:block;inline-size:100%;background:#0d1220}
.v4-hero .v4-capfig img{display:block;inline-size:100%!important;block-size:auto!important;max-block-size:none!important;max-inline-size:100%!important;aspect-ratio:auto!important;object-fit:contain;margin:0!important;border-radius:0!important;border:0!important}
.v4-hero .v4-capfig figcaption{font-size:12.5px;line-height:1.4;color:#c9d2e3;padding:10px 14px 12px}
/* calendar bit (deep work) */
.v4c-cal{display:grid;gap:clamp(3px,1.1cqi,6px)}
.v4c-cal>div{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:8px;align-items:center;font-size:calc(clamp(10.5px,3.8cqi,15px)*var(--k,1))}
.v4c-cal time{font:600 .85em/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-mut)}
.v4c-cal span{padding:.4em .65em;border-radius:8px;background:var(--c-card,rgba(255,255,255,.75));border:1px solid rgba(127,127,127,.2);overflow-wrap:anywhere}
.v4c-cal .hot span{background:var(--c-acc);color:#fff;border-color:transparent;font-weight:650;padding-block:.75em}
.v4c-cal .x span{opacity:.55;text-decoration:line-through}

/* animated covers: start state only when JS is running (html.v4-js); end state is the default */
html.v4-js .v4c.k-anim:not(.is-on) .v4c-flow>*{opacity:.18;transform:translateY(5px)}
.v4c.k-anim .v4c-flow>*{transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.v4c.k-anim .v4c-flow>*:nth-child(2){transition-delay:.25s}.v4c.k-anim .v4c-flow>*:nth-child(3){transition-delay:.5s}.v4c.k-anim .v4c-flow>*:nth-child(4){transition-delay:.75s}.v4c.k-anim .v4c-flow>*:nth-child(5){transition-delay:1s}.v4c.k-anim .v4c-flow>*:nth-child(6){transition-delay:1.25s}.v4c.k-anim .v4c-flow>*:nth-child(7){transition-delay:1.5s}
.v4c.k-anim .v4c-flow+.v4c-flow>*{transition-delay:calc(1.1s + var(--d,0s))}
html.v4-js .v4c.k-anim:not(.is-on) .v4c-rows>div,html.v4-js .v4c.k-anim:not(.is-on) .v4c-cal>div,html.v4-js .v4c.k-anim:not(.is-on) .v4c-canvas>span,html.v4-js .v4c.k-anim:not(.is-on) .v4c-meter>div,html.v4-js .v4c.k-anim:not(.is-on) .v4c-bubble{opacity:0;transform:translateY(6px)}
.v4c.k-anim :is(.v4c-rows>div,.v4c-cal>div,.v4c-canvas>span,.v4c-meter>div,.v4c-bubble){transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.v4c.k-anim :is(.v4c-rows,.v4c-cal,.v4c-canvas,.v4c-meter)>:nth-child(2){transition-delay:.2s}.v4c.k-anim :is(.v4c-rows,.v4c-cal,.v4c-canvas,.v4c-meter)>:nth-child(3){transition-delay:.4s}.v4c.k-anim :is(.v4c-rows,.v4c-cal,.v4c-canvas,.v4c-meter)>:nth-child(4){transition-delay:.6s}.v4c.k-anim :is(.v4c-rows,.v4c-cal,.v4c-canvas,.v4c-meter)>:nth-child(5){transition-delay:.8s}
.v4c.k-anim .v4c-bubble{transition-delay:.5s}
.v4c.k-anim .v4c-canvas>span{transform:rotate(var(--r,0deg))}
html.v4-js .v4c.k-anim:not(.is-on) .v4c-canvas>span{transform:translateY(-8px) rotate(var(--r,0deg))}
html.v4-js .v4c.k-anim:not(.is-on) .v4c-doc s{transform:scaleX(0)}
.v4c.k-anim .v4c-doc s{transform-origin:left center;transition:transform .6s cubic-bezier(.3,.7,.2,1) .4s}
.v4c.k-anim .v4c-doc div+div s{transition-delay:.75s}
html.v4-js .v4c.k-anim:not(.is-on) .v4c-bar i{flex-grow:0.001}
.v4c.k-anim .v4c-bar i{transition:flex-grow .7s cubic-bezier(.3,.7,.2,1)}
.v4c.k-anim .v4c-bar i:nth-child(2){transition-delay:.25s}.v4c.k-anim .v4c-bar i:nth-child(3){transition-delay:.5s}
html.v4-js .v4c.k-anim:not(.is-on) .v4c-tabs i{transform:none}
.v4c.k-anim .v4c-tabs i{transition:transform .5s,opacity .5s;transition-delay:calc(var(--n,0)*40ms)}
.v4c.k-anim.is-on .v4c-tabs i{transform:scaleY(.35);opacity:.45}
html.v4-js .v4c.k-anim:not(.is-on) .v4c-grid>.src,html.v4-js .v4c.k-anim:not(.is-on) .v4c-grid>.sel{outline-color:transparent;background:#fff;color:#1b2234}
.v4c.k-anim .v4c-grid>*{transition:background .4s .5s,color .4s .5s,outline-color .4s .2s}

/* interactive post heroes (all run in the page, nothing is sent anywhere) */
.v4-try{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(12px,3cqi,26px);align-items:center}
.v4-try-in{display:grid;gap:8px;align-content:start}
.v4-try-in label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--c-mut)}
.v4-try input[type=text],.v4-try input[type=number],.v4-try input[type=tel],.v4-try input:not([type]){font:600 16px/1.2 'DM Sans',system-ui,sans-serif;padding:8px 10px;border-radius:9px;border:1px solid rgba(127,127,127,.35);background:#fff;color:#14202e;inline-size:100%;min-inline-size:0}
.v4-try .v4c-rows output,.v4-try output{font-variant-numeric:tabular-nums;font-weight:650;overflow-wrap:anywhere}
.v4-try .v4c-url{display:block;background:#fff;border-radius:9px;padding:9px 11px;border:1px solid rgba(127,127,127,.25)}
.v4-try-btns{display:flex;flex-wrap:wrap;gap:6px}
.v4-try-btns button,.v4-try .v4-chip{font:600 12.5px/1 'DM Sans',system-ui,sans-serif;border:1px solid rgba(127,127,127,.35);background:#fff;color:#14202e;padding:8px 12px;border-radius:999px;cursor:pointer}
.v4-try-btns button[aria-pressed="true"],.v4-try-btns button.pri{background:var(--c-acc);border-color:var(--c-acc);color:#fff}
.v4-try button:focus-visible,.v4-try input:focus-visible{outline:2px solid var(--c-acc);outline-offset:2px}
.v4-try .v4-ok{font-size:12px;font-weight:600;color:var(--c-acc)}
.v4-try .v4-warn{font-size:12px;font-weight:600;color:#b4501a}
.v4-try .v4c-a{font-size:12.5px;font-weight:600;color:var(--c-acc)}
.t-priv .v4-try .v4c-a,.t-ink .v4-try .v4c-a{color:var(--c-acc)}
/* focus timer */
.v4-timer{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(48px,14cqi,92px);line-height:.9;color:var(--c-acc);font-variant-numeric:tabular-nums}
.v4-timer-bar{block-size:6px;border-radius:3px;background:rgba(127,127,127,.2);overflow:hidden}
.v4-timer-bar i{display:block;block-size:100%;inline-size:calc(var(--p,0)*100%);background:var(--c-acc)}
/* lead tracker */
.v4-leads{display:grid;gap:6px}
.v4-leads button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-align:start;inline-size:100%;padding:9px 11px;border-radius:10px;border:1px solid rgba(127,127,127,.25);background:var(--c-card,rgba(255,255,255,.8));color:inherit;font:inherit;cursor:pointer}
.v4-leads button b{font-size:14px}
.v4-leads button small{grid-column:1;font-size:12px;color:var(--c-mut)}
.v4-leads button .v4-stage{grid-row:1/span 2;grid-column:2;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--c-acc);color:#fff;white-space:nowrap}
.v4-leads button[data-s="0"] .v4-stage{background:#6b7a90}
/* spreadsheet trace */
.v4-sheet .v4c-grid input{all:unset;inline-size:100%;text-align:end;font:inherit;color:#6842b5;cursor:text}
.v4-sheet .v4c-grid>.src{position:relative}
@media (max-width:620px){.v4-try{grid-template-columns:1fr}}

/* for-freelancers: a sample week of "where was I?" (text-led, reveals on view) */
.v4-week{inline-size:min(380px,100%);background:var(--v-card);border:1px solid var(--v-line);border-radius:18px;box-shadow:var(--v-shadow);padding:16px 16px 12px}
.v4-week .v4-week-k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v-ind);margin-bottom:10px;overflow-wrap:anywhere}
.v4-week ol{display:grid;gap:6px}
.v4-week li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:14px;line-height:1.3;padding-bottom:6px;border-bottom:1px dashed var(--v-line);transition:opacity .45s,transform .45s;transition-delay:calc(var(--i)*150ms)}
.v4-week li span{min-width:0;overflow-wrap:anywhere}
.v4-week li time{font:600 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--v-mut);margin-inline-start:auto;white-space:nowrap}
html.v4-js .v4-week:not(.is-on) li{opacity:0;transform:translateX(-8px)}
.v4-week .v4-week-tot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-top:10px}
.v4-week .v4-week-tot span{font:600 14px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.v4-week .v4-week-tot b{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:28px;line-height:1;color:var(--v-ind)}
.v4-week.v4-still li{opacity:1;transform:none}
.v4-hero:has(.v4-capfig){box-shadow:none;overflow:visible}
.v4-hero .v4-capfig{box-shadow:0 18px 40px -26px rgba(20,32,60,.45)}
.v4-hero{inline-size:100%;box-sizing:border-box}
.v4-hero .v4c p{color:inherit;margin:0}
.v4-hero .v4c p.v4c-s,.v4-hero .v4c .v4c-s{color:var(--c-mut,#4d5d72)}
.v4-hero .v4c p.v4-ok{color:var(--c-acc)}
.v4-hero .v4c p.v4-warn{color:#b4501a}
.t-ink .v4-try label,.t-priv .v4-try label{color:var(--c-mut)}
.v4c-url{word-break:break-all}
.v4-week .v4-week-tot>*{min-width:0;overflow-wrap:anywhere}