/* SaaS money case study — light theme on the site design system (canvas/card/ink/accent). Scoped under .cs; rendered inside layout-tw. */
.cs{--ink:#161613;--sub:#8B8B85;--line:#E8E8E3;--card:#F7F7F5;--acc:#12A150;--mint:#DBF0E2;--blue:#2A78D6;--amber:#B87A00;--red:#CA3A2E;color:var(--ink)}
.cs .kick{color:var(--acc);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
html[dir=rtl] .cs .kick{letter-spacing:0}
.cs h1{font-size:36px;line-height:1.25;margin:10px 0 8px;font-weight:800;letter-spacing:-.5px}
html[dir=rtl] .cs h1{letter-spacing:0}
.cs .sub{color:rgba(22,22,19,.72);font-size:16.5px;max-width:780px;line-height:1.9}
.cs .toc{margin:18px 0 0;color:var(--sub);font-size:14px;line-height:2}
.cs .toc a{color:var(--acc);font-weight:700;text-decoration:none;margin-inline-end:4px}
.cs .toc a:hover{text-decoration:underline}
.cs .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:26px 0 8px}
.cs .stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 14px}
.cs .stat .v{font-family:"IBM Plex Mono",monospace;font-size:23px;font-weight:600;letter-spacing:-.03em;direction:ltr;unicode-bidi:isolate}
.cs .stat .v small{font-size:13px;color:var(--acc);font-weight:700}
.cs .stat .l{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.5}
.cs section{margin-top:46px;scroll-margin-top:70px}
.cs h2{font-size:24px;margin:0 0 6px;font-weight:800;letter-spacing:-.3px}
html[dir=rtl] .cs h2{letter-spacing:0}
.cs .lead{color:rgba(22,22,19,.72);font-size:15.5px;margin:0 0 16px;max-width:840px;line-height:1.9}
.cs .grid{display:grid;gap:16px}.cs .g2{grid-template-columns:1fr 1fr}.cs .g3{grid-template-columns:1fr 1fr 1fr}
.cs .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.cs .card h3{margin:0 0 4px;font-size:16.5px;font-weight:800}
.cs .card .cap{color:var(--sub);font-size:13px;margin:0 0 12px;line-height:1.7}
.cs .chartbox{position:relative;height:300px}.cs .chartbox.tall{height:360px}
.cs .note{background:#EDF7F1;border:1px solid rgba(18,161,80,.25);border-inline-start:3px solid var(--acc);border-radius:12px;padding:13px 15px;color:#24523A;font-size:14.5px;margin-top:14px;line-height:1.9}
.cs .note b{color:#123B28}
.cs .note.blue{background:#EEF4FC;border-color:rgba(42,120,214,.25);border-inline-start-color:var(--blue);color:#24405E}
.cs .note.blue b{color:#152C44}
.cs .note.warn{background:#FBF3E3;border-color:rgba(184,122,0,.3);border-inline-start-color:var(--amber);color:#6C4A10}
.cs .note.warn b{color:#4A3208}
.cs table{width:100%;border-collapse:collapse;font-size:13.5px}
.cs th,.cs td{text-align:start;padding:9px 10px;border-bottom:1px solid var(--line)}
.cs th{color:var(--sub);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
html[dir=rtl] .cs th{letter-spacing:0}
.cs td.num,.cs th.num{text-align:end;font-variant-numeric:tabular-nums}
.cs td.num{font-family:"IBM Plex Mono",monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate}
.cs tbody tr:hover{background:rgba(22,22,19,.03)}
.cs table a{color:var(--ink);font-weight:700;text-decoration:none}
.cs table a:hover{color:var(--acc);text-decoration:underline}
.cs .tag{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:11px;color:var(--sub);white-space:nowrap}
.cs .pos{color:var(--acc);font-weight:700}.cs .neg{color:var(--red)}.cs .mut{color:var(--sub)}
.cs .ltr{direction:ltr;unicode-bidi:isolate}
.cs .seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.cs .seg button{background:transparent;border:0;color:var(--sub);font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:999px;cursor:pointer;font-family:inherit;transition:color .15s}
.cs .seg button:hover{color:var(--ink)}
.cs .seg button.on{background:var(--ink);color:#fff}
.cs .play{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs .play .item{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.cs .play .item .n{color:var(--acc);font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px}
.cs .play .item h4{margin:7px 0 5px;font-size:16px;font-weight:800}
.cs .play .item p{margin:0;color:rgba(22,22,19,.66);font-size:14px;line-height:1.9}
.cs .cs-foot{margin-top:50px;color:var(--sub);font-size:13px;border-top:1px solid var(--line);padding-top:20px;line-height:2}
.cs .cs-foot a{color:var(--acc);font-weight:700;text-decoration:none}
.cs .cs-foot a:hover{text-decoration:underline}
.cs .cs-foot code{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 5px;font-size:11.5px}
@media(max-width:820px){.cs .stats{grid-template-columns:repeat(2,1fr)}.cs .g2,.cs .g3,.cs .play{grid-template-columns:1fr}.cs h1{font-size:28px}}