/* Sample pieces and shared parts for prototypes F to K. Tune with the --p-* and --k-* variables. */
.k-piece{--_bg:var(--p-bg,#fff);background:var(--_bg);color:var(--p-ink,#1F1B16);border-radius:var(--p-r,14px);border:var(--p-bd,0);box-shadow:var(--p-sh,0 1px 0 rgba(0,0,0,.04),0 12px 30px -18px rgba(0,0,0,.3));overflow:hidden;font:16px/1.5 var(--p-font,system-ui,sans-serif);text-align:left;position:relative}
.k-piece b,.k-piece h4,.k-piece h5{color:inherit}
.k-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 14px/1 var(--p-font,system-ui,sans-serif);flex:none}
.k-ph{display:flex;gap:10px;align-items:center;padding:14px 16px 10px}
.k-ph b{display:block;font-size:15px}
.k-ph small{display:block;color:var(--p-muted,#7A7166);font-size:13px}
.k-cap{margin:0;padding:0 16px 12px;font-size:15px}
.k-graphic{aspect-ratio:5/4;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff}
.k-graphic::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.35);border-radius:4px}
.k-graphic span{position:relative;font:400 clamp(20px,1.9vw,26px)/1.14 var(--p-head,Georgia,serif)}
.k-graphic i{position:relative;font-style:normal;font-size:13px;opacity:.8;margin-top:10px}
.k-bar{display:flex;justify-content:space-around;border-top:1px solid rgba(0,0,0,.08);padding:10px 0;color:#65676b;font-size:14px;font-weight:700}
.k-blog{padding:18px 20px 20px}
.k-url,.k-meta,.k-where,.k-bot{font-size:13px;color:var(--p-muted,#7A7166)}
.k-blog h4{font:400 21px/1.22 var(--p-head,Georgia,serif);margin:8px 0 6px}
.k-blog p{margin:10px 0 10px}
.k-lines i{display:block;height:9px;border-radius:5px;background:rgba(0,0,0,.07);margin-top:9px}
.k-ai{padding:16px 18px 18px;overflow:visible}
.k-bot{font-weight:700}
.k-ask{margin:10px 0 12px auto;background:rgba(0,0,0,.055);border-radius:16px 16px 4px 16px;padding:9px 13px;width:fit-content;max-width:85%;font-size:15px}
.k-ai p{margin:0;opacity:.85}
.k-ai ol{margin:6px 0 0;padding-left:20px}
.k-ai li{margin-bottom:8px;opacity:.8}
.k-ai li.us{opacity:1}
.k-ai li.us b{background:linear-gradient(transparent 58%,var(--k-hl,rgba(200,67,43,.25)) 58%)}
.k-video{aspect-ratio:4/5;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.k-vt{display:flex;justify-content:space-between;font-size:13px;opacity:.9;position:relative}
.k-vbot{position:relative}
.k-vc span{background:#fff;color:#1F1B16;font:700 18px/1.45 var(--p-font,system-ui,sans-serif);padding:3px 8px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k-handle{font-size:14px;font-weight:700;margin-top:10px}
.k-vb{height:4px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden;margin-top:12px}
.k-vb i{display:block;height:100%;width:0;background:#fff;animation:k-play 9s linear infinite}
@keyframes k-play{to{width:100%}}
.k-scene{position:absolute;left:50%;top:40%;width:44%;transform:translate(-50%,-50%);opacity:.3}
.k-scene path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.k-email{padding:4px 2px 16px}
.k-email h5{font:700 17px/1.3 var(--p-font,system-ui,sans-serif);margin:2px 16px 4px}
.k-email p{margin:0 16px;opacity:.8}
.k-thread{padding:16px 18px 18px}
.k-thread h5{font:700 16px/1.35 var(--p-font,system-ui,sans-serif);margin:6px 0 12px}
.k-draft{background:rgba(0,0,0,.035);border:1px dashed rgba(0,0,0,.18);border-radius:10px;padding:12px 14px}
.k-dl{font-size:13px;font-weight:700;color:var(--k-accent,#C8432B)}
.k-draft p{margin:6px 0 10px;font-size:15px}
.k-acts{display:flex;gap:8px}
.k-acts span{font-size:13px;font-weight:700;border:1px solid rgba(0,0,0,.2);border-radius:999px;padding:6px 12px}
.k-acts span:first-child{background:#1F1B16;border-color:#1F1B16;color:#fff}
.k-before{display:grid;gap:14px}
.k-old{filter:grayscale(1);opacity:.75;--p-sh:none;border:1px dashed rgba(0,0,0,.2)}
.k-old .k-cap{padding-bottom:4px}
.k-ago{display:block;font-size:13px;color:var(--p-muted,#7A7166);padding:0 16px 14px}
.k-status{list-style:none;margin:0;padding:6px 16px;border:1px dashed var(--k-dash,rgba(0,0,0,.2));border-radius:var(--p-r,14px);font-size:15px}
.k-status li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--k-dash,rgba(0,0,0,.15))}
.k-status li:last-child{border-bottom:0}
.k-status span{text-align:right;opacity:.8}
.k-note{position:absolute;right:-6px;top:-48px;font:500 26px/1 Caveat,cursive;color:var(--k-accent,#C8432B);transform:rotate(-3deg);display:flex;align-items:flex-start;gap:4px;pointer-events:none;white-space:nowrap;z-index:2}
.k-note svg{width:44px;height:54px;margin-top:10px}
.k-note path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k-tab{position:relative;overflow:hidden;cursor:pointer}
.k-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--k-accent,#C8432B)}
.k-fade{opacity:0!important}
.k-swap{transition:opacity .22s}
/* Before / a month later */
.k-ba{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:36px;align-items:start}
.k-colh{margin:0 0 14px;font-size:20px;display:flex;align-items:baseline;gap:10px}
.k-colh small{font-size:14px;opacity:.65}
.k-wall{columns:2;column-gap:20px}
.k-item{break-inside:avoid;margin-bottom:22px}
.k-item.has-note{padding-top:44px}
.k-lbl{font-size:14px;margin:0 0 8px;opacity:.65}
@media (max-width:980px){
  .k-ba{grid-template-columns:minmax(0,1fr);gap:24px}
  .k-before .k-old{display:none}
  .k-wall{columns:auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 0 12px;scrollbar-width:none;align-items:flex-start}
  .k-item{flex:0 0 min(310px,80vw);scroll-snap-align:start;margin:0}
}
/* SMS */
.k-sms{background:var(--s-bg,#fff);color:#1F1B16;border-radius:28px;padding:22px 18px 24px;box-shadow:0 24px 50px -30px rgba(0,0,0,.45);max-width:420px;width:100%;font:16px/1.45 var(--p-font,system-ui,sans-serif)}
.k-who{text-align:center;font-size:14px;color:#7A7166;margin-bottom:16px}
.k-who b{display:block;color:#1F1B16;font-size:16px}
.k-bub{max-width:80%;padding:10px 14px;border-radius:18px;margin-bottom:8px;width:fit-content}
.k-me{margin-left:auto;background:var(--s-me,#1F1B16);color:#fff;border-bottom-right-radius:5px}
.k-them{background:#F1EEE9;border-bottom-left-radius:5px}
.k-pic{width:190px;max-width:100%;aspect-ratio:4/3;border-radius:12px;background:rgba(255,255,255,.14);margin-bottom:8px;display:grid;place-items:center}
.k-pic svg{width:58%}
.k-pic path,.k-pic rect{fill:none;stroke:#F3EDE3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k-bub q{display:block;margin:6px 0;padding-left:10px;border-left:3px solid var(--k-accent,#C8432B);font-style:italic}
.k-time{text-align:center;font-size:12px;color:#7A7166;margin:10px 0}
/* FAQ + form base */
.k-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary::after{content:"+";flex:none;transition:transform .2s}
.k-faq[open] summary::after{transform:rotate(45deg)}
.k-form{display:grid;gap:18px}
.k-form label{display:block;font-weight:700;margin-bottom:6px}
.k-form input{width:100%;font:inherit}
.k-err{color:var(--k-accent,#C8432B);font-size:15px;margin-top:4px}
.k-under{font-size:15px;opacity:.7;margin:10px 0 0}
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
html.js .rv.in{opacity:1;transform:none}
@media (max-width:640px){.k-note{right:4px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js .rv{opacity:1;transform:none}}