/* Intellica — components. Two families that must sit together on every screen:
   UI (bubbles, notifications, chips, tags, console rows) and PAPER (polaroids, index cards,
   sticky notes, tape, torn edges, cut-outs, hand marks). */

/* ---------- UI: card base ---------- */
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); font-size: 14px; line-height: 1.35; }

/* iOS notification banner */
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; width: 300px; border-radius: 18px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.notif .icon { width: 36px; height: 36px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.notif .icon.shopify { background: var(--shopify); }
.notif .icon.slack { background: var(--slack); }
.notif .icon svg { width: 20px; height: 20px; }
.notif .t { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; }
.notif .t time { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.notif .b { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.notif .b b { color: var(--ink); font-weight: 500; }
.notif.pulse { animation: pulse .9s var(--ease) 1; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(20,123,255,.45); } 100% { box-shadow: 0 0 0 18px rgba(20,123,255,0); } }

/* thread (console side: our messages blue, customer gray) */
.thread { width: 320px; padding: 0; overflow: hidden; }
.thread .head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.thread .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#F2C4A1,#D98C6A); flex: none; overflow: hidden; }
.thread .avatar img { width: 100%; height: 100%; object-fit: cover; }
.thread .who { font-weight: 600; font-size: 13px; white-space: nowrap; flex: 1; min-width: 0; text-align: left; }
.thread .who small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11px; font-family: var(--mono); }
.thread .head .tag { flex-basis: 100%; margin-left: 40px; align-self: flex-start; }
.thread .msgs { padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: var(--r-bubble); font-size: 14px; line-height: 1.35; position: relative; animation: arrive var(--t-arrive) var(--ease) both; }
.bubble.in { align-self: flex-start; background: var(--bubble-in); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.out { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
/* SMS / Android thread: boxier, no tail, Android type + emoji, green-cast received */
.bubble.sms { align-self: flex-end; background: var(--sms); color: #fff; border-radius: 10px; border-bottom-right-radius: 3px; font-family: var(--android), var(--emoji-android), sans-serif; line-height: 1.3; }
.bubble.sms-in { align-self: flex-start; background: var(--sms-in); color: var(--ink); border-radius: 10px; border-bottom-left-radius: 3px; font-family: var(--android), var(--emoji-android), sans-serif; line-height: 1.3; }
.receipt-line { align-self: flex-end; font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin: -2px 6px 0 0; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 10px 12px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.composer { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; }
.composer .field { flex: 1; min-height: 34px; border: 1px solid var(--line-2); border-radius: 17px; padding: 7px 12px; font-size: 13px; color: var(--ink); background: var(--paper-2); }
.composer .field:empty::before { content: "iMessage"; color: var(--ink-3); }
.composer .field .caret { display: inline-block; width: 1px; height: 14px; background: var(--ink); vertical-align: -2px; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.composer .send { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; flex: none; opacity: .35; transition: opacity .2s; }
.composer .send.on { opacity: 1; }
.composer .send svg { width: 14px; height: 14px; }
.sysrow { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--green-tint); font-size: 12px; animation: arrive var(--t-arrive) var(--ease) both; }
.sysrow .ck { width: 18px; height: 18px; border-radius: 50%; background: var(--receipt); display: grid; place-items: center; flex: none; }
.sysrow .ck svg { width: 10px; height: 10px; }
.sysrow b { font-weight: 600; }
.sysrow span { color: var(--ink-2); margin-left: auto; font-family: var(--mono); font-size: 11px; }

/* stand-alone bubbles */
.solo { padding: 10px 14px; border-radius: var(--r-bubble); font-size: 14px; max-width: 260px; box-shadow: var(--shadow-1); }
.solo.out { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.cb.sms { background: var(--sms); color: #fff; align-self: flex-end; border-radius: 12px; border-bottom-right-radius: 4px; font-family: var(--android), var(--emoji-android), sans-serif; }
.cb.sms::before, .cb.sms::after { display: none; }
.solo.in { background: var(--paper-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.solo.sms { background: var(--sms); color: #fff; border-radius: 10px; border-bottom-right-radius: 3px; font-family: var(--android), var(--emoji-android), sans-serif; line-height: 1.3; }
.solo.sms-in { background: var(--sms-in); color: var(--ink); border-radius: 10px; border-bottom-left-radius: 3px; font-family: var(--android), var(--emoji-android), sans-serif; line-height: 1.3; }
.solo.sms small, .solo.spam small { display: block; font-family: var(--mono); font-size: 10px; opacity: .8; margin-bottom: 3px; letter-spacing: .02em; }
/* the villain: a green blast, crossed out in red pen */
.solo.spam, .solo.sms.dead { background: var(--sms); color: #fff; border-radius: 10px; border-bottom-right-radius: 3px; position: relative; max-width: 230px; font-family: var(--android), var(--emoji-android), sans-serif; line-height: 1.3; }
.solo.spam::after, .solo.sms.dead::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 2.5px; background: var(--red-pen); transform: rotate(-4deg); }
.typing-solo { display: inline-flex; gap: 5px; padding: 12px 16px; background: var(--bubble-in); border-radius: var(--r-bubble); border-bottom-left-radius: 4px; box-shadow: var(--shadow-1); }
.typing-solo i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.typing-solo i:nth-child(2) { animation-delay: .2s; } .typing-solo i:nth-child(3) { animation-delay: .4s; }

/* chips / tags */
.chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); white-space: nowrap; }
.chip b { font-family: var(--display); font-weight: 400; font-variation-settings: var(--display-fvs); font-size: 22px; letter-spacing: -.01em; }
.chip span { font-size: 12px; color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; background: var(--hero-tint); color: var(--hero); white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.warm { background: var(--yellow-tint); color: #8A5A00; }
.tag.gray { background: #EEEEF0; color: var(--ink-2); }
.tags { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tags .tag { box-shadow: var(--shadow-1); background: var(--paper-2); border: 1px solid var(--line); }
.tags .tag.blue { color: var(--hero); }

/* console queue rows (how-it-works 2) */
.queue { width: 390px; padding: 8px; }
.qrow { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; animation: arrive var(--t-arrive) var(--ease) both; }
.qrow + .qrow { border-top: 1px solid var(--line); }
.qrow .av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#D9E3EE,#A9BBD0); flex: none; }
.qrow .n { font-size: 13px; font-weight: 500; flex: 1 1 96px; min-width: 96px; white-space: nowrap; overflow: hidden; }
.qrow .n small { display: block; font-weight: 400; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.qrow .tag { flex: none; }
.qrow.hot { background: var(--hero-tint); }
.qrow .picked { display: none; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--hero); }
.qrow.hot .picked { display: inline-flex; }
.qrow .picked img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

/* draft cards (how-it-works 3) */
.drafts { display: grid; gap: 8px; }
.draft { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper-2); font-size: 13px; line-height: 1.35; position: relative; animation: arrive var(--t-arrive) var(--ease) both; }
.draft small { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-bottom: 4px; letter-spacing: .04em; }
.draft.pick { border-color: var(--hero); box-shadow: 0 0 0 3px var(--hero-tint); }
.draft.dim { opacity: .35; }

/* ledger (how-it-works 4) */
.ledger { width: 320px; padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; background: var(--green-paper); border-color: color-mix(in oklab, var(--green-ui) 22%, transparent); }
.ledger:empty { display: none; }
.ledger .row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); animation: arrive var(--t-arrive) var(--ease) both; }
.ledger .row:last-child { border: 0; }
.ledger .row b { font-weight: 600; }
.ledger .row.you { color: var(--receipt); font-weight: 600; }
.ledger .row.fee { color: var(--hero); }

/* connect rig (how-it-works 1) */
.connect { width: 320px; padding: 14px 16px; display: grid; gap: 10px; }
.connect .field { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink); min-height: 36px; }
.connect .field .lbl { color: var(--ink-3); flex: none; }
.connect .field .val { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect .field .ok { display: none; width: 16px; height: 16px; border-radius: 50%; background: var(--receipt); }
.connect .field.done .ok { display: block; }
.connect .live { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); opacity: 0; transition: opacity .4s; }
.connect .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.connect .live.on { opacity: 1; color: var(--receipt); }
.connect .live.on i { background: var(--green); box-shadow: 0 0 0 4px rgba(40,200,64,.22); }

/* ---------- PAPER ---------- */
/* polaroid v2: real photo + optional scanline twin on hover */
.polaroid { background: #fff; padding: 10px 10px 12px; width: 170px; box-shadow: var(--shadow-paper); border-radius: 3px; position: relative; }
.polaroid .ph { aspect-ratio: 1; border-radius: 2px; overflow: hidden; position: relative; background: #DCE4EC; }
.polaroid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid .ph img.scan { position: absolute; inset: 0; background: #fff; object-fit: contain; padding: 6%; opacity: 0; transition: opacity .45s var(--ease); }
.polaroid:hover .ph img.scan, .polaroid.show-scan .ph img.scan { opacity: 1; }
.polaroid.scan-only .ph { background: #fff; }
.polaroid.scan-only .ph img { object-fit: contain; padding: 6%; }
.polaroid .cap { font-family: var(--hand); font-size: 19px; margin-top: 9px; color: var(--ink); line-height: 1; }
.polaroid .cap small { font-family: var(--mono); font-size: 10px; color: var(--ink-3); display: block; margin-top: 4px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.polaroid.sm { width: 130px; padding: 8px 8px 10px; }
.polaroid.sm .cap { font-size: 16px; }

/* tape strip */
.tape { position: relative; }
.tape::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: -11px; width: 66px; height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 3px, transparent 3px 6px);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); mix-blend-mode: multiply;
}
.tape.tape-corner::before { left: auto; right: -14px; top: 10px; transform: rotate(38deg); }

/* torn edge (bottom) */
.torn { clip-path: polygon(0 0, 100% 0, 100% 96%, 97% 100%, 94% 97%, 90% 100%, 86% 98%, 82% 100%, 78% 97%, 74% 100%, 70% 98%, 66% 100%, 62% 97%, 58% 99%, 54% 100%, 50% 97%, 46% 100%, 42% 98%, 38% 100%, 34% 97%, 30% 100%, 26% 98%, 22% 100%, 18% 97%, 14% 100%, 10% 98%, 6% 100%, 3% 97%, 0 100%); }
.torn-top { clip-path: polygon(0 3%, 3% 0, 6% 3%, 10% 1%, 14% 3%, 18% 0, 22% 3%, 26% 1%, 30% 3%, 34% 0, 38% 3%, 42% 1%, 46% 3%, 50% 0, 54% 3%, 58% 1%, 62% 3%, 66% 0, 70% 3%, 74% 1%, 78% 3%, 82% 0, 86% 3%, 90% 1%, 94% 3%, 97% 0, 100% 3%, 100% 100%, 0 100%); }

/* sticky note */
.note { width: 190px; padding: 16px 16px 22px; background: var(--note); box-shadow: var(--shadow-paper); font-family: var(--hand); font-size: 20px; line-height: 1.1; color: var(--ink); }
.note small { display: block; font-family: var(--mono); font-size: 10px; margin-top: 10px; color: #8A6D00; letter-spacing: .04em; }

/* index card (3x5, ruled) */
.index-card { width: 250px; padding: 14px 16px 16px; background: var(--sheet); box-shadow: var(--shadow-paper); border-radius: 2px; position: relative;
  background-image: linear-gradient(#F2B6B0 0 1px, transparent 1px), repeating-linear-gradient(transparent 0 23px, #D7DEE8 23px 24px);
  background-size: 100% 100%, 100% 24px; background-position: 0 30px, 0 34px; background-repeat: no-repeat, repeat; }
.index-card p { font-family: var(--hand); font-size: 20px; line-height: 24px; margin: 0; padding-top: 12px; color: #1E2430; }
.index-card .by { margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }

/* cut-out (scissors) */
.cutout { background: #fff; padding: 6px; box-shadow: 2px 3px 0 rgba(2,11,36,.14), 0 10px 24px rgba(2,11,36,.10);
  clip-path: polygon(3% 2%, 30% 0, 62% 3%, 100% 0, 98% 40%, 100% 70%, 97% 100%, 60% 98%, 28% 100%, 0 97%, 2% 60%, 0 30%); }
.cutout .img { width: 130px; aspect-ratio: 1; background: #EEF0F4; display: grid; place-items: center; }
.cutout .img svg { width: 70%; height: 70%; }
.cutout .n { margin-top: 6px; font-size: 13px; font-weight: 500; padding: 0 4px; }
.cutout .p { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding: 0 4px 4px; }

/* review card (Trustpilot-ish) */
.review { width: 250px; padding: 14px 16px; }
.review .stars { color: var(--green-ui); letter-spacing: 2px; font-size: 13px; }
.review p { margin: 6px 0 8px; font-size: 14px; }
.review .by { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* hand marks */
.doodle svg { width: 70px; height: 50px; overflow: visible; }
.doodle path, .circle-word svg path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.circle-word { position: relative; display: inline-block; }
.circle-word svg { position: absolute; inset: -14% -8%; width: 116%; height: 128%; overflow: visible; pointer-events: none; }
.circle-word svg path { stroke: var(--red-pen); stroke-width: 2.5; }

/* scanline face (the mark treatment, on people) */
.scan-face { width: 100%; height: 100%; object-fit: contain; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 72px; width: max-content; animation: scroll 48s linear infinite; padding: 0 36px; align-items: center; }
.marquee.rev .track { animation-direction: reverse; }
.marquee img.logo { height: 26px; width: auto; opacity: .78; }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }

/* ---------- FAQ (native details) ---------- */
.faq details { border-top: 1px solid var(--line-2); }
.faq details:last-child { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--sans); font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--ink-3); font-size: 26px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 24px; color: var(--ink-2); max-width: 680px; font-size: 17px; }

/* ---------- how-it-works rigs (round 3 flow) ---------- */
.events { padding: 10px 12px 0; display: grid; gap: 6px; }
.event { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--paper-3); font-size: 12px; animation: arrive var(--t-arrive) var(--ease) both; }
.event .tag { flex: none; }
.event span { color: var(--ink-2); }
.event b { font-weight: 600; margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.ai-note { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; align-self: flex-end; margin: 0 6px 2px 0; animation: arrive var(--t-arrive) var(--ease) both; }
.ai-note b { color: var(--hero); font-weight: 500; }
.abtest { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.abtest b { font-weight: 600; color: var(--ink); }
.abtest i { width: 1px; height: 14px; background: var(--line-2); }
.abtest span { color: var(--receipt); }

.queue .qhead { display: flex; justify-content: space-between; padding: 8px 10px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.queue .qhead .cnt { color: var(--hero); }
.qrow .wait { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); min-width: 40px; text-align: right; }
.qrow .wait.long { color: var(--red-pen); font-weight: 500; }
.qrow .reply { display: none; }
.qrow.new { background: #FFF8EC; }
.qrow.new .reply { display: block; font-size: 12px; color: var(--ink); margin-top: 2px; font-weight: 400; white-space: normal; }

.console { display: grid; gap: 12px; width: 340px; }
.context { padding: 12px 14px; font-size: 12px; }
.context .ch { font-weight: 600; font-size: 13px; margin-bottom: 8px; display: flex; justify-content: space-between; }
.context .ch span { font-family: var(--mono); font-size: 10px; color: var(--ink-3); font-weight: 400; }
.context .kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.context .kv.on { opacity: 1; transform: none; }
.context .kv span { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; }
.context .kv b { font-weight: 500; text-align: right; }
.actions { display: flex; gap: 6px; padding: 0 12px 6px; }
.act { flex: 1; padding: 7px 0; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper-2); font-size: 12px; font-weight: 500; color: var(--ink-2); transition: all .2s; }
.act.hot { background: var(--hero); border-color: var(--hero); color: #fff; box-shadow: 0 0 0 3px var(--hero-tint); }
.act.dim { opacity: .35; }
.draft.again { border-style: dashed; }
.timeskip { align-self: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); padding: 2px 10px; border-radius: 999px; background: var(--paper-3); animation: arrive var(--t-arrive) var(--ease) both; }
.sysrow.sched { background: var(--hero-tint); }
.sysrow.sched .ck { background: var(--hero); }

/* ---------- chat above copy (big modern iMessage) ---------- */
.chat { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 36px; max-width: 420px; }
.cb { position: relative; font-size: 18px; line-height: 1.3; padding: 11px 16px; border-radius: 20px; max-width: 330px; box-shadow: var(--shadow-1); letter-spacing: -.005em; }
.cb.in { background: var(--bubble-in); color: var(--ink); border-bottom-left-radius: 6px; }
.cb.out { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.cb.in::before { content: ""; position: absolute; left: -7px; bottom: 0; width: 20px; height: 20px; background: var(--bubble-in); border-bottom-right-radius: 16px; z-index: -1; }
.cb.in::after { content: ""; position: absolute; left: -12px; bottom: 0; width: 12px; height: 22px; background: var(--ground); border-bottom-right-radius: 12px; }
.cb.out::before { content: ""; position: absolute; right: -7px; bottom: 0; width: 20px; height: 20px; background: var(--blue); border-bottom-left-radius: 16px; z-index: -1; }
.cb.out::after { content: ""; position: absolute; right: -12px; bottom: 0; width: 12px; height: 22px; background: var(--ground); border-bottom-left-radius: 12px; }
.cb-note { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.cb-note.right { align-self: flex-end; }
.pulse-line { display: inline-flex; gap: 5px; padding: 12px 16px; background: var(--bubble-in); border-radius: 22px; border-bottom-left-radius: 6px; }
.pulse-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.pulse-line i:nth-child(2) { animation-delay: .2s; } .pulse-line i:nth-child(3) { animation-delay: .4s; }

/* ---------- media panel + window frame ---------- */
.panel { position: relative; border-radius: 28px; aspect-ratio: 16 / 10; min-height: 460px; display: grid; place-items: center; box-shadow: var(--shadow-1); isolation: isolate; }
.panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2; background: var(--panel-bg, linear-gradient(180deg, #F1EEE6, #E4DFD3)); }
.panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: var(--panel-grain, .18); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); background-size: 260px 260px; }
.panel .watermark { position: absolute; right: 2%; bottom: 0; height: 62%; opacity: var(--panel-mark, .06); pointer-events: none; z-index: -1; }
.panel .beside { position: absolute; z-index: 3; }
.frame { position: relative; width: 84%; aspect-ratio: 16 / 10; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 34px 80px rgba(2,11,36,.28), 0 0 0 1px rgba(2,11,36,.08); }
.frame .ftb { height: 34px; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-2); background: color-mix(in oklab, var(--ground) 95%, transparent); border-bottom: 1px solid var(--line); }
.frame .vid { display: none; position: absolute; top: 34px; left: 0; width: 100%; height: calc(100% - 34px); object-fit: cover; background: #000; }
.frame.has-video .vid { display: block; }
.frame.has-video .stage { display: none; }
.frame .stage { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; display: grid; place-items: center; overflow: hidden; background: var(--ground); }
.frame .stage .scaler { transform-origin: center center; }
.frame .mute { position: absolute; right: 12px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(2,11,36,.55); display: grid; place-items: center; z-index: 2; }
.frame .mute svg { width: 14px; height: 14px; }

/* panel background presets: Calvin picks; switch with data-panel-bg on <body> */
body[data-panel-bg="vapour"] { --panel-bg: radial-gradient(70% 80% at 12% 8%, color-mix(in oklab, var(--hero) 16%, transparent) 0%, transparent 70%), radial-gradient(60% 60% at 90% 92%, color-mix(in oklab, var(--wash) 55%, transparent) 0%, transparent 72%), linear-gradient(180deg, #EEF2F6, #E3E9F0); --panel-grain: .07; --panel-mark: .05; }
/* accent (Calvin, 2026-10-13: "kill the gradients"): flat brand-kit colours, one per how-it-works step, no grain */
body[data-panel-bg="accent"] { --panel-grain: 0; --panel-mark: 0; }
body[data-panel-bg="accent"] .how .step:nth-of-type(1) .panel { --panel-bg: var(--hero-tint); }      /* we text first: the brand blue tint */
body[data-panel-bg="accent"] .how .step:nth-of-type(2) .panel { --panel-bg: var(--wash); }           /* a human takes over: the warm cream */
body[data-panel-bg="accent"] .how .step:nth-of-type(3) .panel { --panel-bg: var(--green-paper); }    /* your customer leaves happy: money green */
body[data-panel-bg="paper"] { --panel-bg: linear-gradient(180deg, #F1EEE6, #E4DFD3); --panel-grain: .22; --panel-mark: .07; }
body[data-panel-bg="sky"]   { --panel-bg: linear-gradient(180deg, #A9CDF3 0%, #D7E8F7 48%, #E7EFDC 60%, #8FB86A 100%); --panel-grain: .08; --panel-mark: 0; }
body[data-panel-bg="blue"]  { --panel-bg: linear-gradient(160deg, #DCEAFF, #B8D3FF); --panel-grain: .12; --panel-mark: .05; }
body[data-panel-bg="photo"] { --panel-bg: url("../panel/bg.jpg") center / cover; --panel-grain: .06; --panel-mark: 0; }

/* chat playback (home.js types the bubbles in when the row scrolls into view) */
.chat.armed .cb, .chat.armed .cb-note, .chat.armed .pulse-line { visibility: hidden; }
.chat.armed .cb.on, .chat.armed .cb-note.on, .chat.armed .pulse-line.on { visibility: visible; }
.chat .cb { min-width: 56px; min-height: 46px; transform-origin: bottom left; }
.chat .cb.out { transform-origin: bottom right; }
.chat .cb.pop { animation: pop .42s cubic-bezier(.2, 1.4, .3, 1) both; }
.chat .cb .caret { display: inline-block; width: 2px; height: .9em; background: currentColor; vertical-align: -.1em; margin-left: 2px; animation: caret 1s steps(1) infinite; }
.chat .cb-note.on, .chat .pulse-line.on { animation: arrive .3s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* ---------- tech × human objects (2026-09-17) ----------
   Two ways to be warm on the cool ground. .sheet is physical paper: warm stock, real shadow, half a degree of
   rotation, grain, optional tape. .wc is pigment: layered oklab washes of the brand blue and mint under the same grain. */
.sheet { position: relative; background: var(--sheet); border-radius: 4px; padding: 24px 22px 26px; min-height: 200px;
  box-shadow: var(--shadow-paper); transform: rotate(-.5deg); isolation: isolate; }
.sheet.alt { transform: rotate(.6deg); }
.sheet .sk { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #918B7D; margin: 0 0 8px; }
.sheet .st { font-family: var(--display); font-variation-settings: var(--display-fvs); font-weight: var(--display-w); font-size: 30px; letter-spacing: -.02em; line-height: 1; margin: 0; color: #1E1A14; }
.sheet .sp { font-size: 13.5px; line-height: 1.5; color: #5B564B; margin: 8px 0 0; }
.sheet .sh { font-family: var(--hand); font-size: 19px; line-height: 1.25; margin: 12px 0 0; color: var(--ink); }
.sheet .tape-strip { position: absolute; z-index: 3; width: 86px; height: 22px; background: var(--tape); top: -9px; left: 50%; margin-left: -43px; transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(22,32,58,.06);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 3px, transparent 3px 6px); mix-blend-mode: multiply; }
.sheet .pin { position: absolute; z-index: 3; top: 12px; right: 14px; width: 34px; height: 16px; background: var(--note); transform: rotate(6deg); }

.wc { position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; isolation: isolate; min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background: var(--surface); }
.wc .wp { position: absolute; inset: -14%; z-index: 0; pointer-events: none; filter: blur(24px) saturate(1.25); opacity: .95; }
.wc .wg { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
.wc .wcc { position: relative; z-index: 2; }
.wc .sk { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.wc .st { font-family: var(--display); font-variation-settings: var(--display-fvs); font-weight: var(--display-w); font-size: 30px; letter-spacing: -.02em; line-height: 1; margin: 0; color: var(--ink); }
.wc .sp { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 8px 0 0; }
.wc.a .wp { background: radial-gradient(36% 42% at 20% 22%, color-mix(in oklab, var(--hero) 74%, transparent) 0%, transparent 64%), radial-gradient(42% 46% at 88% 76%, color-mix(in oklab, var(--wash) 70%, transparent) 0%, transparent 72%); }
.wc.b .wp { background: linear-gradient(124deg, color-mix(in oklab, var(--hero) 58%, transparent) 0%, transparent 56%), radial-gradient(54% 58% at 86% 86%, color-mix(in oklab, var(--wash) 76%, transparent) 0%, transparent 70%); }
.wc.c .wp { opacity: .55; background: radial-gradient(66% 72% at 10% 6%, color-mix(in oklab, var(--hero) 46%, transparent) 0%, transparent 72%); }