/* Capital Anesthesia case study. Chaptered editorial on the site's four brand values.
   Every tone below is a stated mix of navy, copper, ivory, slate (see pages.css). */
.cs{
  --copper-deep:color-mix(in srgb,var(--copper) 78%,var(--navy)); /* copper that holds 4.5:1 on paper */
  --ink-soft:color-mix(in srgb,var(--slate) 88%,var(--navy));
  --wk-w:clamp(330px,26vw,380px);
  --left:clamp(200px,15vw,250px);
  background:var(--navy);
}

/* Draft strip: removed at publish */
.cs-draft{background:var(--copper-wash);color:var(--navy);font-size:13px;line-height:1.5;padding:10px 20px;text-align:center;border-bottom:1px solid var(--line-light)}
.tk{background:var(--copper-wash);color:var(--navy);box-shadow:inset 0 -2px 0 var(--copper);padding:1px 4px;border-radius:3px}
.cs-ch--navy .tk{background:var(--navy-raised);color:var(--ivory)}

.cs-hero .pg-hero-inner h1{max-width:19ch;font-size:clamp(42px,5.4vw,80px)}

/* Chapters: each lands on its own ground. Hard cuts, no gradients between them. */
.cs-ch{padding:clamp(72px,9vw,140px) 0}
.cs-ch--paper{background:var(--paper);color:var(--navy)}
.cs-ch--ivory{background:var(--ivory);color:var(--navy)}
.cs-ch--navy{background:var(--navy);color:var(--ivory)}
.cs-inner{width:min(1180px,calc(100% - 112px));margin-inline:auto}
.cs-ch h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,54px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance;max-width:18ch;margin-bottom:36px}
.cs-ch h2 em{font-style:italic;color:var(--copper-deep)}
.cs-prose{display:grid;gap:20px;max-width:62ch;color:var(--ink-soft);font-size:18px;line-height:1.7;text-wrap:pretty}
.cs-prose strong{color:var(--navy);font-weight:600}
.cs-prose + .cs-prose,.cs-roles + .cs-prose,.wk-slot + .cs-prose{margin-top:28px}

/* At a glance: a typeset fact line, not stat cards */
.cs-facts-band{padding-top:clamp(48px,6vw,88px)}
.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--line-light)}
.cs-facts div{padding:22px 20px 24px 0;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.cs-facts div + div{padding-left:20px;border-left:1px solid var(--line-light)}
.cs-facts dt{font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.cs-facts dd{margin:0;font-family:var(--display);font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.cs-facts-note{font-size:13px;color:var(--ink-soft);margin-top:12px}
.cs-pull{margin:56px 0 0;max-width:36ch}
.cs-pull p{font-family:var(--display);font-style:italic;font-size:clamp(24px,2.3vw,32px);line-height:1.3;letter-spacing:-.01em}
.cs-pull footer{margin-top:14px;font-size:14px;color:var(--ink-soft)}

/* Roles: a numbered list, because it is a real sequence of views */
.cs-roles{list-style:none;padding:0;margin:0;display:grid;gap:0;max-width:62ch;counter-reset:role}
.cs-roles li{counter-increment:role;display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:20px 0;border-top:1px solid var(--line-light)}
.cs-roles li:last-child{border-bottom:1px solid var(--line-light)}
.cs-roles li::before{content:counter(role);grid-row:span 2;font-family:var(--display);font-size:30px;line-height:1;color:var(--copper-deep)}
.cs-roles h3{font-size:18px;font-weight:600;margin-bottom:4px}
.cs-roles p{color:var(--ink-soft)}

.cs-callout{margin-top:40px;max-width:40ch;font-family:var(--display);font-size:clamp(24px,2.2vw,30px);line-height:1.3;padding-top:20px;border-top:2px solid var(--copper)}

/* Intertitle: authored silence before the peak */
.cs-intertitle{background:var(--navy);padding:clamp(120px,22vh,220px) 0 0}
.cs-intertitle p{width:min(1180px,calc(100% - 112px));margin-inline:auto;font-family:var(--display);font-style:italic;font-size:clamp(28px,3vw,40px);color:var(--copper-light)}

/* Peak: reviews at reading size, the office's voice first */
#words{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(120px,16vw,200px)}
.cs-review{margin:0 0 clamp(80px,10vw,140px);max-width:62ch}
.cs-review blockquote{margin:0;display:grid;gap:18px;color:var(--muted-dark);font-size:18px;line-height:1.7}
.cs-review-big{font-family:var(--display);font-size:clamp(30px,3.2vw,46px);line-height:1.2;letter-spacing:-.02em;color:var(--ivory);text-wrap:balance}
.cs-review--lead{max-width:none}
.cs-review-big{max-width:22ch}
.cs-review--lead blockquote > p:not(.cs-review-big){max-width:62ch}
.cs-stars{color:var(--copper-light);letter-spacing:.2em;font-size:15px;margin-bottom:18px}
.cs-review figcaption{margin-top:22px;font-size:15px;color:var(--ivory)}
.cs-review figcaption strong{font-weight:600}
.cs-source{color:var(--muted-dark)}
.cs-aside-note{margin-top:22px;font-size:15px;color:var(--muted-dark);padding-left:16px;border-left:1px solid var(--copper)}
.cs-reviews-link a{color:var(--ivory);border-bottom:1px solid var(--copper-light);font-weight:600;font-size:15px}
.cs-reviews-link a:hover{color:var(--copper-light)}
.cs-ch--navy :focus-visible{outline-color:var(--copper-light)}

/* Result ledger */
.cs-ledger-wrap{overflow-x:auto;max-width:820px;margin-bottom:36px}
.cs-ledger{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.5}
.cs-ledger th,.cs-ledger td{text-align:left;vertical-align:top;padding:16px 18px 16px 0;border-bottom:1px solid var(--line-light)}
.cs-ledger thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;border-bottom-color:var(--navy)}
.cs-ledger tbody th{font-weight:600;color:var(--navy);width:28%}
.cs-ledger td{color:var(--ink-soft)}
.cs-ledger td:last-child{color:var(--navy)}

/* Colophon: small type, the CTA as running text */
.cs-colophon h2{font-size:clamp(30px,3vw,44px)}
.cs-colophon-line{max-width:52ch;font-size:19px;line-height:1.7;color:var(--muted-dark)}
.cs-run-link{color:var(--ivory);font-weight:600;border-bottom:2px solid var(--copper-light);transition:color .16s var(--ease),border-color .16s var(--ease)}
.cs-run-link:hover{color:var(--copper-light)}
.cs-run-link:active{color:var(--copper)}
.cs-method{margin-top:64px;padding-top:20px;border-top:1px solid var(--line-dark);max-width:62ch}
.cs-method h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-light);font-weight:600;margin-bottom:10px}
.cs-method p{font-size:13px;line-height:1.65;color:var(--muted-dark)}

/* Folio: chapter number and name in the margin, wide screens only */
.cs-folio{display:none}

/* ─────────── The sample week (signature) ─────────── */
.wk{display:none}
.js .wk{display:block}
.wk{background:var(--ivory);color:var(--navy);border:1px solid var(--line-light);border-radius:14px;padding:18px 18px 16px;box-shadow:0 2px 4px #0a193014,0 14px 34px -10px #0a193040}
.wk-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.wk-title{font-family:var(--display);font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.wk-status{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;text-align:right}
.wk-status .wk-filled{color:var(--navy);font-weight:600}
.wk-grid{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed;font-size:11px}
.wk-grid thead th{font-weight:600;color:var(--ink-soft);padding-bottom:2px}
.wk-grid thead th:first-child{width:62px}
.wk-grid tbody th{font-weight:500;text-align:left;color:var(--ink-soft);white-space:nowrap;padding-right:4px}
.wk-grid td{height:20px;border-radius:4px;text-align:center;font-weight:600;letter-spacing:.02em;position:relative}
.wk-grid td.is-closed::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--line-light)}
.wk-grid td.is-open{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--slate) 45%,var(--ivory))}
.wk-grid td .wk-chip{position:absolute;inset:0;display:grid;place-items:center;border-radius:4px;background:var(--navy);color:var(--ivory);opacity:0;transform:scale(.95);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.wk-grid td.is-filled .wk-chip{opacity:1;transform:none}
.wk-grid td.is-pinned .wk-chip{box-shadow:inset 0 0 0 2px var(--copper)}
.wk-grid td.is-flagged{box-shadow:inset 0 0 0 1.5px var(--copper-deep);color:var(--copper-deep)}
.wk-grid td.is-flagged::before{content:"Open";font-size:10px}
.wk-grid tr{transition:opacity .3s var(--ease)}
.wk.is-office tbody tr:not(.is-focus){opacity:.16}
.wk.is-office tbody tr.is-focus th{color:var(--navy);font-weight:700}
.wk-rules{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.wk-rules li{font-size:11.5px;line-height:1.3;padding:5px 9px;border-radius:999px;background:var(--copper-wash);color:var(--navy);opacity:.35;transition:opacity .3s var(--ease)}
.wk-rules li.is-on{opacity:1}
.wk-note{margin-top:12px;font-size:11.5px;line-height:1.45;color:var(--ink-soft)}
.wk-office-label{display:none;margin-top:10px;font-size:12px;color:var(--navy);font-weight:600}
.wk.is-office .wk-office-label{display:block}

/* Inline (phones, tablets, no JS): the week sits in the scheduler chapter */
.wk-slot .wk{margin:32px 0 36px;max-width:440px}
.wk-slot{max-width:62ch}

/* Wide screens: one centered frame holds the folio, the reading column, and the fixed week */
@media(min-width:1200px){
  .cs{--frame:min(1240px,calc(100vw - 64px));--fl:calc((100vw - var(--frame)) / 2);--wk-w:clamp(320px,26vw,360px)}
  .cs-inner,.cs-facts-band .cs-inner,.cs-colophon .cs-inner{width:calc(var(--frame) - 236px - var(--wk-w));margin-left:calc(var(--fl) + 180px);margin-right:0}
  .cs-intertitle p{width:auto;margin-left:calc(var(--fl) + 180px)}
  .cs-folio{display:block;position:fixed;left:var(--fl);top:50%;transform:translateY(-50%);width:150px;z-index:30;opacity:0;transition:opacity .3s var(--ease)}
  .cs-folio.is-on{opacity:1}
  .cs-folio-n{display:block;font-family:var(--display);font-size:44px;line-height:1;color:var(--copper)}
  .cs-folio-t{display:block;margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--slate)}
  .cs-folio.on-navy .cs-folio-t{color:var(--muted-dark)}
  .cs-folio.on-navy .cs-folio-n{color:var(--copper-light)}
  .wk.is-fixed{position:fixed;right:var(--fl);top:50%;width:var(--wk-w);transform:translateY(-50%);z-index:30;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
  .wk.is-fixed.is-on{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
}

@media(max-width:900px){
  .cs-inner,.cs-intertitle p{width:calc(100% - 40px)}
  .cs-facts{grid-template-columns:1fr 1fr}
  .cs-facts div:nth-child(3){padding-left:0;border-left:0}
  .cs-facts div:nth-child(n+3){border-top:1px solid var(--line-light)}
  .cs-prose,.cs-review blockquote{font-size:17px}
  .cs-draft{text-align:left}
}
@media(max-width:420px){
  .wk{padding:14px 12px 12px}
  .wk-grid thead th:first-child{width:52px}
}

/* No JS: everything is visible; the week shows its finished state from markup-free fallback text */
.js [data-sc-in],.js [data-sc-stagger]>*{opacity:0;transform:translate3d(0,14px,0);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js [data-sc-in].sc-in,.js [data-sc-stagger]>.sc-in{opacity:1;transform:none}
[data-sc-stagger][data-sc-in]{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .js [data-sc-in],.js [data-sc-stagger]>*{transform:none;transition-duration:.2s}
  .wk-grid td .wk-chip{transform:none;transition-duration:.12s}
  .cs-run-link{transition:none}
}

/* Phones: the sunrise sits under the lede, so shade the text band, not the whole frame */
@media(max-width:900px){
  .cs-hero .dawn-shade{background:linear-gradient(180deg,#0a1930f5 0%,#0a1930e6 62%,#0a193000 88%)}
  .wk-head{flex-direction:column;gap:2px}
  .wk-status{text-align:left}
}
@media(max-width:700px){
  .cs-ledger{min-width:0}
  .cs-ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .cs-ledger tr{display:grid;gap:6px;padding:16px 0;border-bottom:1px solid var(--line-light)}
  .cs-ledger th,.cs-ledger td{display:block;padding:0;border:0;width:auto}
  .cs-ledger tbody th{width:auto}
  .cs-ledger td::before{content:attr(data-label) ": ";font-weight:600;color:var(--navy)}
}

/* Demo screenshot in the scheduler chapter */
.cs-demo{margin:48px 0 0;max-width:620px}
.cs-demo img{width:100%;height:auto;border-radius:14px;box-shadow:0 2px 4px #0a193014,0 18px 40px -14px #0a193045;transition:transform .2s var(--ease)}
@media(hover:hover) and (pointer:fine){.cs-demo a:hover img{transform:translateY(-2px)}}
.cs-demo a:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:14px}
.cs-demo figcaption{margin-top:14px;font-size:15px;color:var(--ink-soft)}
.cs-demo-link{color:var(--navy);font-weight:600;border-bottom:2px solid var(--copper)}
.cs-demo-link:hover{color:var(--copper-deep)}

/* Pull quote is a button that opens the owner's full review */
.cs-pull{display:block;text-align:left;background:none;border:0;padding:0;margin:56px 0 0;max-width:36ch;color:inherit;font:inherit;cursor:pointer}
.cs-pull-quote{display:block;font-family:var(--display);font-style:italic;font-size:clamp(24px,2.3vw,32px);line-height:1.3;letter-spacing:-.01em}
.cs-pull-by{display:block;margin-top:14px;font-size:14px;color:var(--ink-soft)}
.cs-pull-more{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--navy);border-bottom:2px solid var(--copper);transition:color .16s var(--ease)}
.cs-pull:hover .cs-pull-more{color:var(--copper-deep)}
.cs-pull:active .cs-pull-more{transform:translateY(1px)}
.cs-pull:focus-visible{outline:2px solid var(--navy);outline-offset:6px;border-radius:4px}

/* Google-style review card: the full review, links to it on Google */
.gr{display:grid;gap:12px;max-width:62ch;background:var(--ivory);color:var(--navy);border-radius:16px;padding:24px 26px;box-shadow:0 2px 4px #00000022,0 18px 40px -14px #00000066;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media(hover:hover) and (pointer:fine){.gr:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000022,0 24px 48px -14px #00000077}}
.gr:active{transform:translateY(0)}
.gr:focus-visible{outline:2px solid var(--copper-light);outline-offset:4px}
.gr-head{display:flex;align-items:center;gap:12px}
.gr-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--ivory);font-weight:700}
.gr-who{display:grid;gap:2px;font-size:15px}
.gr-who span{font-size:13px;color:var(--ink-soft)}
.gr-stars{color:var(--copper);letter-spacing:.15em;font-size:16px}
.gr-body{display:grid;gap:12px;font-size:16px;line-height:1.65;color:var(--slate)}
.gr-link{justify-self:start;font-size:14px;font-weight:600;border-bottom:2px solid var(--copper)}
.gr-link::after{content:" ↗";font-weight:400}
.cs-ch--navy .gr + .cs-aside-note,#words .cs-aside-note{max-width:62ch}
#words > .cs-inner > div[data-sc-in]{margin-bottom:clamp(56px,7vw,96px)}

.gr-dialog{border:0;padding:0;background:transparent;width:min(620px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto}
.gr-dialog::backdrop{background:#0a1930b3}
.gr-dialog .gr{max-width:none}
.gr-dialog form{display:flex;justify-content:center;margin-top:14px}
.gr-close{background:none;border:0;color:var(--ivory);font:600 14px var(--text);border-bottom:1px solid currentColor;cursor:pointer;padding:4px 0}
.gr-close:focus-visible{outline:2px solid var(--copper-light);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.gr,.cs-pull-more{transition:none}}

/* Demo button: big enough to find and tap */
.cs-demo-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:20px}
.cs-demo-btn{font-size:16px;padding:15px 30px;border:0}
.cs-demo-btn:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.cs-demo-cta span{font-size:14px;color:var(--ink-soft)}

/* Client logo on the title page: black artwork, so it sits on an ivory plate */
.cs-client-logo{display:inline-block;background:var(--ivory);border-radius:12px;padding:10px 16px;margin-bottom:26px;box-shadow:0 2px 6px #00000033}
.cs-client-logo img{height:56px;width:auto}
@media(max-width:900px){.cs-client-logo img{height:44px}.cs-client-logo{margin-bottom:20px}}

/* Review carousel. Slides share one grid cell, so the box never jumps in height. */
.rv{max-width:62ch}
.rv-track{display:grid}
.rv-slide{display:grid;gap:14px;margin-bottom:24px}
.rv--js .rv-slide{display:none;margin:0}
.rv--js .rv-slide.is-active{display:grid;animation:rv-in .35s var(--ease)}
@keyframes rv-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.rv-controls{display:none;align-items:center;gap:14px;margin-bottom:18px}
.rv--js .rv-controls{display:flex}
.rv-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-dark);background:transparent;color:var(--ivory);cursor:pointer;transition:background-color .16s var(--ease),border-color .16s var(--ease)}
.rv-btn:hover{border-color:var(--copper-light);background:var(--navy-raised)}
.rv-btn:active{transform:scale(.96)}
.rv-btn:focus-visible,.rv-dot:focus-visible,.rv-pause:focus-visible{outline:2px solid var(--copper-light);outline-offset:3px}
.rv-dots{display:flex;gap:8px}
.rv-dot{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:var(--line-dark);cursor:pointer;position:relative}
.rv-dot::after{content:"";position:absolute;inset:-10px}
.rv-dot.is-active{background:var(--copper-light)}
.rv-pause{margin-left:auto;background:none;border:0;color:var(--muted-dark);font:600 13px var(--text);border-bottom:1px solid currentColor;cursor:pointer;padding:4px 0}
.rv-pause:hover{color:var(--ivory)}
@media(prefers-reduced-motion:reduce){.rv--js .rv-slide.is-active{animation:none}}

/* Testimonial cards (replace the Google look-alike cards) */
.rv-card{margin:0;display:grid;gap:18px;background:var(--ivory);color:var(--navy);border-radius:18px;padding:30px 30px 24px;box-shadow:inset 0 1px 0 #ffffff,0 2px 4px #00000026,0 22px 50px -18px #00000080}
.rv-stars{display:flex;align-items:center;gap:8px;color:var(--copper);font-size:15px;letter-spacing:.18em}
.rv-on{letter-spacing:.04em;font-size:12px;font-weight:600;color:var(--slate);text-transform:uppercase}
.rv-quote{margin:0;display:grid;gap:14px;font-size:16px;line-height:1.7;color:var(--slate)}
.rv-lead{font-family:var(--display);font-size:clamp(21px,2vw,25px);line-height:1.35;letter-spacing:-.01em;color:var(--navy);text-wrap:pretty}
.rv-by{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line-light)}
.rv-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--ivory),0 0 0 3px var(--copper-light)}
.rv-avatar--initials{display:grid;place-items:center;background:var(--copper-wash);color:var(--copper-deep);font-family:var(--display);font-size:19px;letter-spacing:.02em}
.rv-who{display:grid;gap:2px;line-height:1.35}
.rv-who strong{font-size:16px;font-weight:600}
.rv-who span{font-size:13px;color:var(--slate)}
.rv-google{font-size:13px;font-weight:600;color:var(--navy);border-bottom:1.5px solid var(--copper);white-space:nowrap;transition:color .16s var(--ease)}
.rv-google:hover{color:var(--copper-deep)}
.rv-google:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media(max-width:560px){
  .rv-card{padding:24px 20px 20px}
  .rv-by{grid-template-columns:auto 1fr}
  .rv-google{grid-column:1/-1;justify-self:start}
}
.gr-dialog .rv-card{max-width:none}

/* Readability: the display serif's hairlines vanish at review size, so reviews use the text face, darker */
.rv-quote{color:color-mix(in srgb,var(--slate) 55%,var(--navy));font-size:16.5px;line-height:1.7}
.rv-lead{font-family:var(--text);font-weight:600;font-size:clamp(18px,1.6vw,20px);line-height:1.5;letter-spacing:0;color:var(--navy)}
.rv-who span{color:color-mix(in srgb,var(--slate) 70%,var(--navy))}
.rv-on{color:color-mix(in srgb,var(--slate) 70%,var(--navy))}

/* The headline result */
.cs-big-number{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 36px;font-family:var(--display);color:var(--navy)}
.cs-big-from{font-size:clamp(34px,4vw,52px);color:var(--slate);text-decoration:line-through;text-decoration-color:var(--copper);text-decoration-thickness:2px}
.cs-big-arrow{font-size:clamp(28px,3vw,40px);color:var(--copper)}
.cs-big-to{font-size:clamp(46px,5.4vw,72px);letter-spacing:-.03em}
.cs-big-label{flex-basis:100%;font-family:var(--text);font-size:15px;color:var(--ink-soft)}
.cs-result-quote{margin:0;padding-left:18px;border-left:2px solid var(--copper)}
.cs-result-quote p{font-family:var(--display);font-style:italic;font-size:clamp(21px,2vw,26px);line-height:1.35;color:var(--navy)}
.cs-result-quote footer{margin-top:10px;font-size:14px;color:var(--ink-soft)}

/* Summary band: the short version beside the result */
.cs-summary{padding-top:clamp(48px,6vw,88px)}
.cs-summary-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.cs-summary-text{display:grid;gap:16px;color:var(--ink-soft);font-size:18px;line-height:1.7}
.cs-summary-text h2{margin-bottom:4px}
.cs-facts-line{font-size:15px;font-weight:600;color:var(--navy);padding:12px 0;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);line-height:1.5}
.cs-facts-line span{display:block;font-weight:400;font-size:13px;color:var(--ink-soft)}
.cs-summary-text .cs-pull{margin:8px 0 0;max-width:none}
.cs-read-more{display:inline-block;font-size:15px;font-weight:600;color:var(--navy);border-bottom:2px solid var(--copper);transition:color .16s var(--ease)}
.cs-read-more:hover{color:var(--copper-deep)}
.cs-read-more:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.cs-summary-result{background:var(--ivory);border:1px solid var(--line-light);border-radius:18px;padding:28px 28px 12px;box-shadow:0 2px 4px #0a193010,0 18px 40px -18px #0a193035}
.cs-summary-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--copper-deep);margin-bottom:10px}
.cs-summary-result .cs-big-number{margin-bottom:18px}
.cs-ledger-wrap--stacked{margin:0;max-width:none;overflow:visible}
.cs-ledger-wrap--stacked .cs-ledger{min-width:0}
.cs-ledger-wrap--stacked .cs-ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cs-ledger-wrap--stacked .cs-ledger tr{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line-light)}
.cs-ledger-wrap--stacked .cs-ledger th,.cs-ledger-wrap--stacked .cs-ledger td{display:block;padding:0;border:0;width:auto;font-size:15px}
.cs-ledger-wrap--stacked .cs-ledger td::before{content:attr(data-label) ": ";font-weight:600;color:var(--navy)}
@media(min-width:1200px){
  .cs-summary .cs-inner{width:calc(var(--frame) - 180px)}
}
@media(max-width:900px){
  .cs-summary-grid{grid-template-columns:1fr}
  .cs-summary-text{font-size:17px}
  .cs-summary-result{padding:22px 20px 8px}
}

/* TL;DR band: centered halves, counters across, one big button */
@media(min-width:1200px){
  .cs-summary .cs-inner{width:var(--frame);margin-left:var(--fl)}
}
.cs-summary-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cs-summary-text h2{font-size:clamp(40px,4.4vw,60px);letter-spacing:-.02em}
.cs-summary-foot{grid-column:1/-1;margin-top:clamp(8px,2vw,24px)}
.cs-summary-foot .cs-facts{margin:0}
.cs-story-cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}
.cs-story-btn{font-size:18px;padding:18px 40px;border:0}
.cs-story-btn:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.cs-ledger-wrap--box{margin:0;max-width:none;overflow:visible}
.cs-ledger-wrap--box .cs-ledger{min-width:0;font-size:15px}
.cs-ledger-wrap--box .cs-ledger tbody th{width:30%}
@media(max-width:900px){.cs-summary-grid{grid-template-columns:1fr}}

/* Sample week, restyled like the demo calendar */
.wk-steps{list-style:none;counter-reset:wkstep;margin:10px 0 0;padding:0;display:grid;gap:6px}
.wk-steps li{counter-increment:wkstep;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--slate);opacity:.45;transition:opacity .3s var(--ease),color .3s var(--ease)}
.wk-steps li::before{content:counter(wkstep);display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font-size:12px;background:var(--copper-wash);color:var(--copper-deep)}
.wk-steps li.is-on{opacity:1;color:var(--navy)}
.wk-steps li.is-on::before{background:var(--navy);color:var(--ivory)}
.wk .wk-rules{margin-top:12px}
.wk-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:14px;border:1px solid color-mix(in srgb,var(--slate) 22%,var(--ivory));border-radius:8px;overflow:hidden}
.wk-day{display:grid;align-content:start;gap:3px;padding:0 3px 6px;min-height:150px;border-left:1px solid color-mix(in srgb,var(--slate) 22%,var(--ivory))}
.wk-day:first-child{border-left:0}
.wk-day-name{margin:0 -3px 3px;padding:6px 0;text-align:center;font-size:11px;font-weight:600;color:var(--slate);border-bottom:1px solid color-mix(in srgb,var(--slate) 22%,var(--ivory))}
.wk-ev{display:grid;padding:3px 5px;border-radius:5px;font-size:10px;line-height:1.25;color:var(--slate);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--slate) 35%,var(--ivory));background:transparent;transition:background-color .25s var(--ease),opacity .3s var(--ease);overflow:hidden}
.wk-ev b{font-weight:700;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-ev span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.wk-ev:not(.is-filled):not(.is-flagged){border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--slate) 30%,var(--ivory));background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--slate) 8%,transparent) 5px 6px)}
.wk-ev.is-filled{color:var(--ivory);box-shadow:none}
.wk-ev.is-pinned{box-shadow:inset 0 0 0 2px #fff8f0aa}
.wk-ev.is-flagged{color:var(--copper-deep);box-shadow:inset 0 0 0 1.5px var(--copper-deep);background:transparent}
.wk.is-office .wk-ev:not(.is-focus){opacity:.15}
.wk .wk-status{margin-top:10px;font-size:12px;color:var(--navy);font-weight:600;text-align:left}
.wk-demo{display:block;text-align:center;margin-top:14px;font-size:16px;padding:14px 20px;border:0}
.wk-demo:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.wk.is-fixed{top:50%}
.wk .wk-note{margin-top:10px}
/* Bigger demo button in the scheduler chapter */
.cs-demo-btn{font-size:18px;padding:18px 40px}