/* Fluid Canopy card. Everything inside is sized in em; the font-size comes from the card's
   own width and height, so the same markup reads well from a 320px phone to a 1400px desktop. */
.cc { --ink:#292a2d; --muted:#62656d; --line:#d9dde3; --lime:#6bf1f5; --green:#355f52; --ease:cubic-bezier(.22,1,.36,1); --ios:cubic-bezier(.32,.72,0,1); }

.cc { container:cc / size; position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:var(--cc-r,26px); background:#fff; color:var(--ink); isolation:isolate; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; box-shadow:var(--cc-shadow,0 40px 60px -40px #31363c70,0 0 0 1px #1d1f2410); transform-origin:50% 0; backface-visibility:hidden; }
.cc *, .cc *::before, .cc *::after { box-sizing:border-box; min-width:0; }
.cc::after { content:""; position:absolute; inset:0; background:var(--dim-color,#14181c); opacity:var(--dim,0); pointer-events:none; z-index:20; border-radius:inherit; }
.cc svg.ic { width:1.25em; height:1.25em; flex-shrink:0; }
.cc button { font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.cc button:focus-visible { outline:3px solid #3464cb; outline-offset:3px; }
.cc img { display:block; }
.cc ::selection { background:var(--lime); color:var(--ink); }

.cc-tab { display:none; }
.cc-in { display:grid; grid-template-columns:36% 64%; grid-template-rows:minmax(0,1fr); height:100%; font-size:min(clamp(11.5px,calc(100cqw / 76),16.5px), calc(100cqh / 43)); line-height:1.5; }

/* Copy column */
.cc-copy { position:relative; display:flex; flex-direction:column; justify-content:center; padding:3em 2.6em; background:var(--pg); z-index:2; overflow:hidden; }
.cc-copy::before { content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .4 0 0 0 0 .35 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cc-copy > * { position:relative; }
.cc-copy h2 { margin:0 0 .8em; font-size:2.5em; line-height:1.12; font-weight:400; letter-spacing:-.028em; color:var(--ph); text-wrap:balance; }
.cc-copy p { margin:0; max-width:23em; font-size:1.06em; line-height:1.65; color:var(--pt); }
.cc-foot { display:flex; align-items:flex-start; gap:.7em; margin-top:3.6em; max-width:23em; font-size:.8em; line-height:1.55; color:var(--pt); }
.cc-foot svg.ic { width:1.5em; height:1.5em; margin-top:-.1em; }

/* Scene shell */
.cc-scene { position:relative; min-height:0; display:flex; flex-direction:column; padding:4.3em 2em 5.8em; background:#e8ebf0; }
.cc-sample { position:absolute; top:1.7em; left:2em; right:2em; display:flex; align-items:center; justify-content:space-between; gap:1em; font-size:.76em; line-height:1.4; color:var(--muted); z-index:4; }
.cc-sample > span { font-size:.92em; }
.cc-subject { position:relative; flex:1; min-height:0; }
.cc-controls { position:absolute; left:2em; right:2em; bottom:1.7em; display:flex; gap:.4em; z-index:6; }
.cc-controls button { min-height:2.9em; padding:.7em 1.3em; border:0; border-radius:.55em; background:#fff; color:var(--ink); font-size:.8em; line-height:1.3; transition:background-color .3s var(--ease), transform .5s var(--ease), box-shadow .3s; box-shadow:0 1px 0 #1d1f2410; }
.cc-controls button:hover { background:#dfe5dc; }
.cc-controls button:active { transform:scale(.96); }
.cc-controls button[aria-pressed=true] { background:var(--green); color:#fff; box-shadow:0 8px 16px -10px #355f5299; }
.cc-live { position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }

/* State panels cross-fade and rise; only opacity and transform animate. */
.cc-panels { display:grid; }
.cc-panel { grid-area:1 / 1; opacity:0; visibility:hidden; transform:translate3d(0,.8em,0) scale(.985); transition:opacity .42s var(--ease), transform .7s var(--ease), visibility 0s .42s; }
.cc[data-sel="0"] .cc-panel[data-p="0"], .cc[data-sel="1"] .cc-panel[data-p="1"], .cc[data-sel="2"] .cc-panel[data-p="2"] { opacity:1; visibility:visible; transform:none; transition-delay:0s; }

.cc-label { display:block; font-size:.86em; line-height:1.45; }
.cc-label small { display:block; margin-top:.25em; font-size:.82em; color:var(--muted); }
.cc-note { display:flex; align-items:flex-start; gap:.7em; font-size:.8em; line-height:1.45; color:var(--muted); }
.cc-note svg.ic { width:1.5em; height:1.5em; }
.cc blockquote { margin:1em 0 1.3em; font-size:1.75em; line-height:1.4; font-weight:400; text-wrap:pretty; }
.cc h3, .cc h4 { margin:0; font-weight:400; line-height:1.2; }
.cc-person { display:flex; align-items:center; gap:.8em; font-size:.98em; line-height:1.35; }
.cc-person small { display:block; margin-top:.2em; font-size:.72em; color:var(--muted); }
.cc-avatar { display:grid; place-items:center; width:2.8em; height:2.8em; flex-shrink:0; border-radius:50%; background:#e1e6ee; color:#414957; font-size:.85em; }

/* 1. Call */
.cc-photo { position:absolute; right:0; top:0; bottom:0; width:74%; border-radius:.9em; overflow:hidden; background:linear-gradient(90deg,#dde2ea 0 21%,#edf0f4 21% 63%,#dde2ea 63%); }
.cc-portrait { position:absolute; right:-2%; bottom:0; height:104%; width:auto; max-width:none; -webkit-mask-image:linear-gradient(#000 84%,transparent); mask-image:linear-gradient(#000 84%,transparent); }
.cc-photocap { position:absolute; left:1.5em; top:1.35em; font-size:1.18em; line-height:1.3; }
.cc-photocap small { display:block; margin-top:.4em; font-size:.6em; color:var(--muted); }
.cc-bubble { position:absolute; left:0; bottom:7%; width:64%; z-index:3; transform:rotate(-3deg); }
.cc-bubble-card { display:flex; flex-direction:column; min-height:17em; padding:1.7em; border-radius:.9em; background:#fff; box-shadow:0 26px 34px -22px #1f253a66, 0 0 0 1px #1d1f2410; }
.cc-bubble-card blockquote { flex:1; margin:.9em 0 1em; font-size:1.58em; }
.cc-stamp { position:absolute; right:1%; bottom:23%; z-index:4; display:grid; grid-template-columns:auto 1fr; gap:.1em .6em; align-items:center; padding:1em 1.3em; border-radius:.6em; background:var(--green); color:#fff; font-size:1.02em; line-height:1.3; transform:rotate(3deg); box-shadow:0 22px 28px -18px #1e3a30aa; }
.cc-stamp small { grid-column:2; font-size:.72em; color:#d6e5dd; }
.cc-stamp svg.ic { grid-row:1 / 3; }

/* 2. Record */
.cc-record .cc-subject { display:grid; grid-template-columns:1.18fr .82fr; gap:1.3em; align-items:start; }
.cc-transcript { padding:2.2em 2em; border-radius:.7em; background:#fff; box-shadow:0 22px 34px -26px #252a4660, 0 0 0 1px #1d1f2410; }
.cc-dochead { display:flex; align-items:center; gap:1em; padding-bottom:1.5em; margin-bottom:1.5em; border-bottom:1px solid var(--line); font-size:.85em; }
.cc-dochead small { display:block; margin-top:.3em; font-size:.82em; color:var(--muted); }
.cc-transcript blockquote { min-height:5.4em; margin:.8em 0 1.4em; font-size:1.68em; line-height:1.52; }
.cc mark { padding:.05em .18em; margin:0 -.06em; border-radius:.2em; background:transparent; color:inherit; box-decoration-break:clone; -webkit-box-decoration-break:clone; transition:background-color .5s var(--ease); }
.cc[data-sel="0"] mark[data-f="0"], .cc[data-sel="1"] mark[data-f="1"], .cc[data-sel="2"] mark[data-f="2"] { background:var(--lime); }
.cc-reply { display:flex; align-items:center; gap:1.1em; padding-top:1.4em; border-top:1px solid var(--line); font-size:.82em; line-height:1.55; }
.cc-reply img { width:1.9em; height:auto; }
.cc-reply p { margin:0; }
.cc-sheet { margin-top:2.6em; padding:1.9em; border-radius:.7em; background:#35363b; color:#fff; box-shadow:0 26px 34px -24px #101216cc; }
.cc-seldetail > .cc-panel { }
.cc-seldetail span { font-size:.78em; color:#d5d8df; }
.cc-seldetail strong { display:block; margin:.5em 0 .35em; font-size:2.1em; font-weight:400; line-height:1.15; letter-spacing:-.02em; }
.cc-seldetail p { margin:0; max-width:17em; font-size:.82em; line-height:1.6; color:#d5d8df; min-height:3.2em; }
.cc-dl { display:grid; margin:1.2em 0 0; }
.cc-dl > div { display:grid; grid-template-columns:1fr 1.1fr; gap:1em; padding:.95em 0; border-top:1px solid #ffffff2b; font-size:.82em; line-height:1.4; transition:color .4s, opacity .4s; opacity:.58; }
.cc-dl > div:last-child { padding-bottom:0; }
.cc-dl dt { color:#cdd1d8; } .cc-dl dd { margin:0; }
.cc[data-sel="0"] .cc-dl > [data-f="0"], .cc[data-sel="1"] .cc-dl > [data-f="1"], .cc[data-sel="2"] .cc-dl > [data-f="2"] { opacity:1; color:var(--lime); }
.cc[data-sel="0"] .cc-dl > [data-f="0"] dt, .cc[data-sel="1"] .cc-dl > [data-f="1"] dt, .cc[data-sel="2"] .cc-dl > [data-f="2"] dt { color:inherit; }

/* 3. CRM */
.cc-crm .cc-subject { display:grid; grid-template-columns:1.4fr .6fr; gap:1.4em; align-items:stretch; }
.cc-crmsheet { display:flex; flex-direction:column; padding:2em; border-radius:.7em; background:#fff; box-shadow:0 22px 34px -26px #252a4660, 0 0 0 1px #1d1f2410; }
.cc-recordhead { display:flex; align-items:center; justify-content:space-between; gap:1em; padding-bottom:1.3em; border-bottom:1px solid var(--line); font-size:.9em; }
.cc-recordhead > span:last-child { font-size:.8em; color:var(--muted); }
.cc-crmsheet h3 { margin:1.2em 0 .5em; font-size:2.05em; letter-spacing:-.022em; }
.cc-crmsheet .cc-dl { margin:0; }
.cc-crmsheet .cc-dl > div { border-top:1px solid var(--line); opacity:1; font-size:.88em; padding:.9em .6em; margin:0 -.6em; border-radius:.4em; transition:background-color .5s var(--ease); }
.cc-crmsheet .cc-dl > div:last-child { padding-bottom:.9em; }
.cc-crmsheet .cc-dl dt { color:var(--muted); }
.cc[data-sel="0"] .cc-crmsheet .cc-dl > [data-f="0"], .cc[data-sel="1"] .cc-crmsheet .cc-dl > [data-f="1"], .cc[data-sel="2"] .cc-crmsheet .cc-dl > [data-f="2"] { background:#c9f8f9; color:var(--ink); }
.cc-recordfoot { display:flex; align-items:center; gap:.8em; margin-top:auto; padding-top:1.2em; font-size:.76em; color:var(--muted); }
.cc-side { display:flex; flex-direction:column; justify-content:space-between; gap:1.2em; }
.cc-ribbon { position:relative; padding:1.2em 1.2em 1.3em; border-radius:.8em; background:#fff; box-shadow:0 22px 30px -22px #252a4670, 0 0 0 1px #1d1f2410; }
.cc-ribbon > img { width:1.9em; height:auto; margin-bottom:.6em; }
.cc-ribbon-k { display:block; margin-bottom:.8em; font-size:.74em; color:var(--muted); }
.cc-ribbon strong { display:block; font-size:1.18em; font-weight:500; letter-spacing:-.01em; }
.cc-ribbon p { margin:.4em 0 0; min-height:3.3em; font-size:.8em; line-height:1.55; color:var(--muted); }
.cc-rail { display:flex; flex-direction:column; align-items:flex-start; gap:.4em; padding-left:.4em; font-size:.8em; color:#454a52; }
.cc-rail .cc-avatar { margin-bottom:.4em; background:#d3d8e2; }
.cc-rail i { display:block; width:1.5px; height:1.5em; margin-left:1.35em; background:linear-gradient(#8b92a0,#c3c8d1); }

/* 4. Follow-up */
.cc-followup .cc-subject { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr); gap:1.4em; align-items:center; }
.cc-followup .cc-subject > * { min-height:0; }
.cc-intro h3 { margin:.8em 0 .4em; font-size:1.65em; letter-spacing:-.02em; }
.cc-intro blockquote { margin:.5em 0 1.1em; font-size:1.2em; color:#444a53; }
.cc-intro-p { align-items:center; }
.cc-phone { position:relative; justify-self:center; align-self:stretch; height:100%; max-height:100%; aspect-ratio:9 / 17.4; padding:.55em; border-radius:2.5em; background:#202227; box-shadow:0 34px 40px -26px #14161bcc, inset 0 0 0 1.5px #494c55; }
.cc-speaker { position:absolute; z-index:3; top:1.1em; left:50%; width:3.4em; height:.4em; margin-left:-1.7em; border-radius:1em; background:#14161a; }
.cc-screen { height:100%; padding:2.4em 1.1em 1em; border-radius:2em; background:#fff; overflow:hidden; font-size:.92em; }
.cc-draft { height:100%; }
.cc-draft > .cc-panel { display:flex; flex-direction:column; gap:.9em; }
.cc-drafthead { display:flex; align-items:center; gap:.7em; padding-bottom:.8em; border-bottom:1px solid var(--line); font-size:.82em; line-height:1.35; }
.cc-drafthead small { display:block; margin-top:.15em; font-size:.82em; color:var(--muted); }
.cc-msg-in { align-self:flex-start; max-width:80%; padding:.7em .9em; border-radius:1em 1em 1em .3em; background:#eef0f4; font-size:.86em; line-height:1.45; }
.cc-msg-out { align-self:flex-end; width:92%; padding:.8em; border-radius:1em 1em .3em 1em; background:#dff3e6; font-size:.86em; line-height:1.45; }
.cc-msg-out p { margin:0 0 .7em; }
.cc-attach { display:grid; grid-template-columns:3.2em 1fr auto; gap:.8em; align-items:center; padding:.5em; border-radius:.7em; background:#fff; }
.cc-attach img { width:3.2em; height:3.2em; object-fit:cover; border-radius:.5em; }
.cc-attach span { font-size:.88em; line-height:1.3; } .cc-attach small { display:block; font-size:.8em; color:var(--muted); }
.cc-callback { padding:1.1em; border-radius:.9em; background:#f1f3f8; font-size:.84em; line-height:1.5; }
.cc-callback span { display:block; color:var(--muted); font-size:.9em; }
.cc-callback strong { display:block; margin:.2em 0; font-size:2.4em; font-weight:400; letter-spacing:-.03em; }
.cc-callback p { margin:0 0 .7em; }
.cc-handoff { padding:1.1em; border-radius:.9em; background:#35363b; color:#fff; font-size:.84em; line-height:1.5; }
.cc-handoff > span { color:#cfd3da; font-size:.85em; }
.cc-handoff h4 { margin:.5em 0; font-size:1.55em; letter-spacing:-.02em; }
.cc-handoff p { margin:0 0 .8em; color:#dfe2e8; }
.cc-handoff dl { display:grid; margin:0; }
.cc-handoff dl > div { display:grid; gap:.1em; padding:.6em 0; border-top:1px solid #ffffff2b; }
.cc-handoff dt { color:#cfd3da; font-size:.85em; } .cc-handoff dd { margin:0; }
.cc-chip { position:absolute; left:0; bottom:0; z-index:3; display:grid; grid-template-columns:auto 1fr; gap:0 .7em; align-items:center; padding:.8em 1.1em; border-radius:.7em; background:#fff; font-size:.86em; line-height:1.3; box-shadow:0 18px 26px -18px #252a4670, 0 0 0 1px #1d1f2410; }
.cc-chip small { grid-column:2; font-size:.78em; color:var(--muted); }
.cc-chip svg.ic { grid-row:1 / 3; color:var(--green); }

/* ---- Narrow cards: copy on top, scene below ---- */
@container cc (max-width:719px) {
  .cc-in { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); font-size:min(clamp(11.5px,calc(100cqw / 25.5),17px), calc(100cqh / 47)); }
  .cc-copy { justify-content:flex-start; padding:1.55em 1.5em 1.25em; }
  .cc-copy h2 { margin:0 0 .4em; font-size:1.78em; }
  .cc-copy p { max-width:none; font-size:.98em; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .cc-foot { display:none; }
  .cc-scene { padding:2.9em 1.1em 4.5em; }
  .cc-sample { top:1.05em; left:1.5em; right:1.5em; font-size:.74em; }
  .cc-sample > span { display:none; }
  .cc-controls { left:1.1em; right:1.1em; bottom:1.1em; gap:.35em; }
  .cc-controls button { flex:1 1 0; min-height:2.7em; padding:.6em .4em; font-size:.78em; }
  .cc blockquote { font-size:1.3em; }

  .cc-photo { left:0; width:auto; bottom:30%; }
  .cc-portrait { right:0; }
  .cc-photocap { left:1.1em; top:.9em; font-size:1.05em; }
  .cc-bubble { left:0; right:7%; width:auto; bottom:0; transform:rotate(-1.6deg); }
  .cc-bubble-card { min-height:0; padding:1.2em 1.3em; }
  .cc-bubble-card blockquote { margin:.55em 0 .7em; font-size:1.18em; }
  .cc-stamp { right:0; bottom:auto; top:36%; padding:.7em .95em; font-size:.92em; }

  .cc-record .cc-subject { grid-template-columns:1fr; gap:.8em; align-content:start; }
  .cc-transcript { padding:1.3em 1.3em 1.1em; }
  .cc-dochead { padding-bottom:.9em; margin-bottom:.9em; }
  .cc-transcript blockquote { min-height:0; margin:.5em 0 1em; font-size:1.22em; }
  .cc-reply { padding-top:.9em; }
  .cc-sheet { margin-top:0; padding:1.1em 1.3em; }
  .cc-seldetail strong { font-size:1.6em; margin:.3em 0 .2em; }
  .cc-seldetail p { min-height:0; }
  .cc-sheet .cc-dl { display:none; }

  .cc-crm .cc-subject { grid-template-columns:1fr; gap:.8em; grid-template-rows:auto 1fr; }
  .cc-side { order:-1; flex-direction:row; align-items:stretch; }
  .cc-rail { display:none; }
  .cc-ribbon { flex:1; display:grid; grid-template-columns:auto 1fr; gap:0 .9em; padding:.9em 1.1em; }
  .cc-ribbon > img { grid-row:1 / 4; width:1.7em; margin:0; }
  .cc-ribbon-k { margin:0 0 .3em; }
  .cc-ribbon-p { grid-column:2; }
  .cc-ribbon p { min-height:0; margin:.2em 0 0; }
  .cc-crmsheet { padding:1.3em; }
  .cc-crmsheet h3 { margin:.9em 0 .3em; font-size:1.4em; }
  .cc-crmsheet .cc-dl > div { padding:.6em .5em; }
  .cc-recordfoot { padding-top:.8em; }

  .cc-followup .cc-subject { grid-template-columns:minmax(0,1fr) auto; gap:.8em; }
  .cc-intro h3 { font-size:1.2em; }
  .cc-intro blockquote { display:none; }
  .cc-intro .cc-note { display:none; }
  .cc-chip { display:none; }
}
@container cc (max-width:719px) and (min-width:520px) {
  .cc-in { font-size:min(clamp(12px,calc(100cqw / 36),16px), calc(100cqh / 46)); }
  .cc-copy { padding:1.9em 2.2em 1.4em; }
  .cc-copy p { -webkit-line-clamp:3; }
  .cc-scene { padding-left:1.8em; padding-right:1.8em; }
  .cc-sample { left:2.2em; right:2.2em; }
  .cc-sample > span { display:inline; }
}
@container cc (max-width:420px) {
  .cc-copy p { -webkit-line-clamp:2; }
  .cc-followup .cc-subject { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); justify-items:center; }
  .cc-intro { display:none; }
  .cc-intro-p { display:block; }
  .cc-phone { height:100%; }
  .cc-screen { padding-top:2.1em; font-size:.8em; }
}
@container cc (max-height:560px) and (min-width:720px) {
  .cc-copy { padding:2em 2.2em; }
  .cc-foot { margin-top:2em; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-panel, .cc-controls button, .cc mark, .cc-dl > div { transition:none !important; }
}