/* Tato Decor: one wide system, navigable by work area. */
.tato-section{padding-block:65px 100px}
.tato-intro{max-width:850px;margin-bottom:42px}
.tato-intro h2{font-size:clamp(36px,4.5vw,62px)}
.tato-intro>p:last-child{max-width:680px;margin-top:24px;color:var(--muted);font-size:18px}
.crm-book{position:relative;margin:0 10px 38px;isolation:isolate}
.crm-book::before{content:"";position:absolute;inset:25px -8px -12px;background:var(--mint);border:1px solid var(--line);border-radius:10px;transform:rotate(-1.2deg);z-index:-1}
.crm-tabs{display:none;gap:6px;align-items:stretch;padding-inline:15px}
.crm-ready .crm-tabs{display:flex}
.crm-tabs button{position:relative;flex:1;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--mint);color:var(--muted);padding:20px 18px;cursor:pointer;font-size:17px;transition:background .2s,color .2s}
.crm-tabs button:hover{background:var(--peach);color:var(--ink)}
.crm-tabs button[aria-selected=true]{background:var(--card);color:var(--ink);font-weight:600;z-index:2}
.crm-tabs button[aria-selected=true]::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:3px;background:var(--card)}
.crm-panels{border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:8px 10px 0 var(--shadow);padding:44px}
.crm-panel{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:55px;min-height:230px}
.crm-panel[hidden]{display:none}
.crm-panel h3{font-size:clamp(30px,3vw,42px);margin-bottom:22px}
.crm-panel p{color:var(--muted);font-size:18px}
.crm-map{display:flex;align-items:center;justify-content:center;gap:0;min-height:190px;padding:25px 0;position:relative}
.crm-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse,#000,transparent 72%)}
.crm-map span{position:relative;padding:18px 24px;background:var(--mint);border:1px solid var(--line);border-radius:5px;font-size:18px;transform:rotate(-3deg)}
.crm-map span:last-child{background:var(--action);color:var(--action-ink);transform:rotate(3deg)}
.crm-map i{width:38px;height:1px;background:var(--blue);flex-shrink:0;z-index:1}
.crm-foot{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.crm-foot a{color:var(--blue);text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.tato-extra{margin:0 10px;padding:22px 0;border-block:1px solid var(--line)}
.tato-extra summary{cursor:pointer;display:flex;align-items:center;gap:24px;list-style:none;min-height:44px}
.tato-extra summary::-webkit-details-marker{display:none}
.tato-extra summary span{font-size:14px;color:var(--muted)}
.tato-extra summary strong{font-size:21px;font-weight:500}
.tato-extra summary::after{content:"+";margin-left:auto;font-size:28px;color:var(--blue)}
.tato-extra[open] summary::after{content:"−"}
.tato-extra summary:hover strong{color:var(--blue)}
.tato-extra>p{max-width:760px;margin-top:18px;color:var(--muted);font-size:16px}
@media(max-width:750px){
 .tato-section{padding-block:35px 65px}.tato-intro{margin-bottom:28px}.tato-intro>p:last-child{font-size:16px}.crm-book{margin-inline:3px}
 .crm-tabs{gap:3px;padding-inline:4px}.crm-tabs button{padding:14px 6px;font-size:12px;border-radius:8px 8px 0 0}
 .crm-panels{padding:25px 21px}.crm-panel{grid-template-columns:1fr;gap:14px;min-height:330px;align-content:start}.crm-panel h3{font-size:30px;margin-bottom:17px}.crm-panel p{font-size:16px}.crm-map{min-height:140px}.crm-map span{font-size:14px;padding:15px}.crm-map i{width:24px}
 .crm-foot{flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;padding-top:18px}.tato-extra{margin-inline:3px}.tato-extra summary{flex-wrap:wrap;gap:7px 16px}.tato-extra summary span{width:100%}.tato-extra summary strong{font-size:18px;max-width:85%}
}
@media(prefers-reduced-motion:reduce){.crm-tabs button{transition:none}.crm-map span,.crm-book::before{transform:none}}
/* Actual mock-CRM captures replace the initial conceptual diagrams. */
.crm-demo-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 15px 18px;font-size:13px;color:var(--muted)}
.crm-play{background:var(--action);color:var(--action-ink);border:0;border-radius:22px;padding:11px 18px;cursor:pointer;font-size:13px;min-height:44px}
.crm-play:hover{filter:brightness(1.1)}
.crm-panels{padding:10px;overflow:hidden}
.crm-panel{display:block;min-height:0;margin:0}
.crm-panel>a{display:block;cursor:zoom-in}
.crm-panel img{display:block;width:100%;height:auto;border-radius:4px}
.crm-ready .crm-panel:not([hidden]){animation:crm-reveal .25s ease-out}
.crm-panel figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 15px;font-size:14px;color:var(--muted)}
.crm-panel figcaption a{color:var(--blue);text-decoration:underline;white-space:nowrap;text-underline-offset:4px}
.crm-foot{margin-top:22px;border:0;padding:0 8px}
@keyframes crm-reveal{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:750px){.crm-demo-bar{padding-inline:0;gap:10px}.crm-demo-bar p{font-size:11px}.crm-play{font-size:11px;padding:8px 12px;flex-shrink:0}.crm-panels{padding:4px}.crm-tabs button{font-size:11px}.crm-panel figcaption{align-items:flex-start;flex-direction:column;gap:8px;font-size:13px;padding:14px 10px}.crm-panel figcaption a{min-height:32px;display:flex;align-items:center}}
@media(prefers-reduced-motion:reduce){.crm-ready .crm-panel:not([hidden]){animation:none}}
.crm-crop{display:block;width:100%;aspect-ratio:5/3;overflow:hidden;border:0;padding:0;background:transparent;cursor:zoom-in;border-radius:4px}
.crm-crop img{width:100%;height:auto;align-self:start}
.crm-enlarge{border:0;background:transparent;color:var(--blue);font:inherit;padding:6px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px;cursor:zoom-in;white-space:nowrap}
.crm-enlarge:hover{color:var(--ink)}
.crm-dialog{width:min(96vw,1600px);max-width:96vw;max-height:94vh;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.crm-dialog::backdrop{background:#080f20c9}
.crm-dialog form{display:flex;justify-content:flex-end;margin-bottom:12px;position:sticky;top:0}
.crm-dialog form button{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);padding:10px 18px;cursor:pointer;min-height:44px}
.crm-dialog-crop{aspect-ratio:5/3;overflow:hidden}.crm-dialog img{display:block;width:100%;height:auto}
html:has(.crm-dialog[open]){overflow:hidden}
.crm-book::before{display:none}
.crm-tabs{gap:4px;padding-inline:10px}
.crm-tabs button{flex:0 1 auto;padding:12px 22px;font-size:14px;min-height:44px;border-radius:8px 8px 0 0}
.case-actions{margin-top:30px}
.result-note{display:block;border:0;padding-top:0;font-size:15px;color:var(--ink)}
@media(max-width:750px){.crm-tabs{padding-inline:4px;gap:3px}.crm-tabs button{flex:1;padding:8px 5px;font-size:11px}}
.tato-intro>p:not(.case-label){max-width:680px;margin-top:24px;font-size:18px;color:var(--muted)}
.tato-intro>p.tato-positioning{margin-top:14px;font-size:16px}
.crm-dialog{padding:0;border:0;background:transparent;border-radius:10px;overflow:auto;box-shadow:0 24px 90px #0005}
.crm-dialog form{position:sticky;top:12px;height:0;margin:0 12px 0 0;z-index:2;pointer-events:none}
.crm-dialog form button{pointer-events:auto;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #ffffff60;border-radius:50%;background:#192c49;color:white;box-shadow:0 3px 12px #0003;transition:background .15s,transform .15s}
.crm-dialog form button:hover{background:#2458a6;transform:scale(1.06)}
.crm-dialog form button:focus-visible{outline:3px solid #8bb4ed;outline-offset:3px}
.crm-dialog form svg{width:22px;height:22px}
.crm-dialog-crop{border-radius:10px}
@media(max-width:750px){.tato-intro>p:not(.case-label){font-size:16px}.tato-intro>p.tato-positioning{font-size:15px}.crm-dialog form{top:8px;margin-right:8px}}
@media(prefers-reduced-motion:reduce){.crm-dialog form button{transition:none}.crm-dialog form button:hover{transform:none}}
/* Compact case introduction and annotations inside the product viewport. */
.tato-intro{max-width:none;display:grid;grid-template-columns:1.25fr 1fr;column-gap:65px;align-items:end;margin-bottom:32px}
.tato-intro .case-label{grid-column:1/-1;margin-bottom:20px}
.tato-intro h2{font-size:clamp(34px,3.7vw,50px)}
.tato-intro>p.tato-summary{margin:0;font-size:18px;max-width:490px;padding-bottom:4px}
.crm-panel{position:relative}
.crm-panel figcaption{position:absolute;inset:0;display:block;padding:0;pointer-events:none}
.crm-enlarge{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #ffffff60;border-radius:10px;background:#192c49;color:#fff;box-shadow:0 3px 12px #0003;pointer-events:auto;cursor:zoom-in}
.crm-enlarge:hover{background:#2458a6;color:#fff}
.crm-enlarge svg{width:22px;height:22px}
.crm-callout{position:absolute;right:24px;bottom:24px;max-width:70%;padding:14px 22px;background:var(--action);color:var(--action-ink);box-shadow:5px 6px 0 var(--shadow);border-radius:4px;transform:rotate(-1deg);font-size:16px;font-weight:500}
.crm-ready .crm-panel:not([hidden]) .crm-callout{animation:crm-annotation .4s ease-out both}
@keyframes crm-annotation{from{opacity:0;transform:translateY(10px) rotate(1deg)}to{opacity:1;transform:translateY(0) rotate(-1deg)}}
@media(max-width:900px){.tato-intro{column-gap:30px}.tato-intro>p.tato-summary{font-size:16px}}
@media(max-width:750px){.tato-intro{grid-template-columns:1fr;gap:0}.tato-intro>p.tato-summary{margin-top:20px}.crm-enlarge{top:8px;right:8px;width:40px;height:40px;min-height:40px}.crm-callout{right:10px;bottom:10px;max-width:83%;padding:9px 12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.crm-ready .crm-panel:not([hidden]) .crm-callout{animation:none;transform:none}}