/* ============================================================
   CASE STUDY — standalone redesign stylesheet
   Warm Sunset system. Used by the redesigned case-study pages.
   Self-contained: does NOT depend on main.css.

   CONTENTS
     1.  Tokens + base
     2.  Layout wrappers
     3.  Header
     4.  Hero
     5.  Sections (kicker + h2, lists, pull quote)
     6.  Media (browser frame, phone mockup)
     7.  Screen showcase (alternating phone + annotation rows)
     8.  Takeaways (numbered cards)
     9.  Design impact (stat card + chart)
     10. UX approach (phase cards + detail modal)
     11. Image lightbox
     12. Side-nav layout (sticky rail, view toggle, scroll-spy)
     13. CTA
     14. Ported rich components (detailed view: carousel, personas, etc.)
     15. Callout
     16. Teacher Portal ported visuals
============================================================ */

/* ============================================================
   TOKENS — same warm system as the homepage
============================================================ */
:root{
  --bg:#FFFFFF; --bg-2:#F6F6F7; --surface:#FFFFFF;
  --text:#0A0A0A; --text-2:#444A52; --text-3:#6B7280;
  --border:rgba(10,10,10,0.08); --border-h:rgba(10,10,10,0.20);
  --coral:#FF8A4B; --rose:#B33A82; --plum:#6E3C97;
  --coral-ink:#E85D2A;   /* deeper coral used only where the gradient is clipped to TEXT, so the light end keeps a readable contrast on white */
  --accent:#B33A82; --accent-rgb:179,58,130;
  --f-head:'Barlow',system-ui,sans-serif;
  --f-body:'Mulish',system-ui,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --r-md:14px; --r-lg:20px; --r-xl:999px;
  --max:760px;     /* text column */
  --max-wide:1120px; /* media column */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{ scroll-behavior:smooth; }
body{ font-family:var(--f-body); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; line-height:1.75; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
mark{ background:transparent; color:var(--text); font-weight:700; }
.grad{
  background:linear-gradient(120deg,var(--coral-ink),var(--rose) 58%,var(--plum));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ============================================================
   LAYOUT WRAPPERS
============================================================ */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 28px; }
.wrap-wide{ width:100%; max-width:var(--max-wide); margin:0 auto; padding:0 28px; }
@media(min-width:768px){ .wrap,.wrap-wide{ padding:0 40px; } }

/* ============================================================
   HEADER
============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.85);
  -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--border);
}
.nav{ max-width:var(--max-wide); margin:0 auto; padding:0 28px;
  height:64px; display:flex; align-items:center; justify-content:space-between; }
@media(min-width:768px){ .nav{ padding:0 40px; } }
.brand{ font-family:var(--f-head); font-weight:900; font-size:20px; letter-spacing:-1px; display:flex; align-items:center; }
.brand span{ color:var(--rose); }
.nav-sig{ height:40px; width:auto; display:block; opacity:0.9; transition:opacity .2s ease; }
.brand:hover .nav-sig{ opacity:1; }
.nav-back{ font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--rose) 60%,var(--plum));
  border:0; padding:9px 18px; border-radius:var(--r-xl);
  transition:transform .15s var(--ease); }
.nav-back:hover{ transform:translateY(-1px); }

/* ============================================================
   HERO
============================================================ */
.cs-hero{ position:relative; overflow:hidden; padding:84px 0 92px; }
.cs-hero-inner{ position:relative; z-index:1; }
/* full-bleed light, warm pastel background with a dotted mesh fading in from the right.
   Swap the linear-gradient for background-image:url(...) to use a real photo. */
.cs-hero-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(58% 80% at 80% 42%, rgba(255,138,75,0.10), transparent 65%),
    linear-gradient(120deg, #FFFAF6 0%, #FEF4F8 52%, #F8F3FC 100%);
  background-size:cover; background-position:center;
}
.cs-hero-bg::after{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(10,10,10,0.05) 1px, transparent 1.5px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 35%);
  mask-image:linear-gradient(to right, transparent, #000 35%);
  opacity:.6;
}
/* photo hero: a real screenshot behind the hero, faded to the warm light on the
   LEFT so the dark title/subtitle stay readable, kept soft (a faint texture) on
   the right. The scrim is shared; each page sets its own image below. Scoped per
   page so other case studies keep the pastel default. */
.cs-hero--photo .cs-hero-bg{
  /* strong white veil so the dark title, subtitle AND the full-width meta row
     keep WCAG-safe contrast; the photo reads as a gentle texture, not a competitor */
  --cs-scrim: linear-gradient(100deg, #FFFAF6 34%, rgba(255,250,246,0.94) 62%, rgba(255,248,244,0.84) 100%);
  background-size:cover;
  background-position:right center;
}
.cs-hero--photo .cs-hero-bg::after{ opacity:.3; }     /* calm the dot mesh over the photo */
.cs-hero--admin   .cs-hero-bg{ background-image: var(--cs-scrim), url('../img/Admintoolcover.png'); }
.cs-hero--teacher .cs-hero-bg{ background-image: var(--cs-scrim), url('../img/teacherportalcover.png'); }
.cs-hero--peduli  .cs-hero-bg{ background-image: var(--cs-scrim), url('../img/pedulilindungicover.png'); }
.cs-hero--shopper .cs-hero-bg{
  background-image: var(--cs-scrim), url('../img/shopperappcover.png');
  background-size: auto, 150% auto;            /* widen the photo so it can slide */
  background-position: center, right center;   /* push the photo further to the right */
}
.cs-hero--moodlet .cs-hero-bg{
  /* this cover is bright, so use a stronger veil than the shared default for readability */
  --cs-scrim: linear-gradient(100deg, #FFFAF6 42%, rgba(255,250,246,0.97) 66%, rgba(255,248,244,0.91) 100%);
  background-image: var(--cs-scrim), url('../img/Moodletcover.png');
  background-size: auto, 130% auto;   /* widen the photo (scrim stays default) so it can slide */
  background-position: center, left center;  /* push the phone ~right */
}
/* two columns: text left, illustration right */
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
@media(max-width:880px){
  .cs-hero{ padding:36px 0 44px; }
  .hero-grid{ grid-template-columns:1fr; gap:16px; }
  .hero-art{ order:-1; min-height:auto; }
  .hero-art img{ max-width:340px; }
}
.cs-kicker{ font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--rose); margin-bottom:22px; }
.cs-hero .cs-kicker{ display:flex; align-items:center; gap:18px; color:var(--rose); margin-bottom:26px; }
.cs-hero .cs-kicker::after{ content:''; flex:1; height:1px; background:rgba(10,10,10,0.14); }
.cs-title{ font-family:var(--f-head); font-weight:900; letter-spacing:-2px; color:var(--text);
  font-size:clamp(40px,5.6vw,76px); line-height:0.98; margin-bottom:24px; }
.cs-title .grad{ background:linear-gradient(120deg,var(--coral-ink),var(--rose) 58%,var(--plum));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.cs-subtitle{ font-size:clamp(16px,1.7vw,20px); color:var(--text-2); line-height:1.6;
  max-width:480px; margin-bottom:0; }

.hero-art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; }
.hero-art img{ position:relative; z-index:1; width:100%; max-width:600px; height:auto; }

/* meta row INSIDE the hero — full width, no card, divider lines, faint icons */
.cs-meta{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:56px;
}
.cs-meta-item{ position:relative; overflow:hidden; padding:0 28px 6px; }
.cs-meta-item:first-child{ padding-left:0; }
.cs-meta-item + .cs-meta-item{ border-left:1px solid rgba(10,10,10,0.12); }
.cs-meta-item .k{ font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px; }
.cs-meta-item .v{ font-family:var(--f-head); font-size:16px; font-weight:700; color:var(--text); }
.cs-meta-item::after{
  font-family:'Material Icons Round'; font-size:52px; line-height:1;
  position:absolute; right:12px; bottom:-10px; color:var(--accent); opacity:.13; pointer-events:none;
}
.cs-meta-item:nth-child(1)::after{ content:'badge'; }
.cs-meta-item:nth-child(2)::after{ content:'groups'; }
.cs-meta-item:nth-child(3)::after{ content:'category'; }
.cs-meta-item:nth-child(4)::after{ content:'rocket_launch'; }
@media(max-width:600px){
  .cs-meta{ grid-template-columns:1fr 1fr; }
  .cs-meta-item:nth-child(odd){ padding-left:0; border-left:none; }
  .cs-meta-item:nth-child(3), .cs-meta-item:nth-child(4){ border-top:1px solid rgba(10,10,10,0.12); }
}

/* ============================================================
   SECTIONS — big numbered anchors, image-led
============================================================ */
.sec{ padding:64px 0; }
.sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:24px; }
.sec-no{ font-family:var(--f-head); font-weight:800; font-size:clamp(28px,4vw,44px);
  letter-spacing:-1px; line-height:1; }
.sec-kicker{ display:block; margin-bottom:16px; font-size:12px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent); }
.sec h2{ font-family:var(--f-head); font-weight:800; letter-spacing:-1px; line-height:1.12;
  font-size:clamp(28px,3.6vw,44px); margin-bottom:24px; }
.sec h3{ font-family:var(--f-head); font-weight:700; font-size:20px; margin:40px 0 12px; }
.sec p{ color:var(--text-2); font-size:17px; line-height:1.8; margin-bottom:18px; }
.sec ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:8px 0 22px; }
.sec ul li{ position:relative; padding-left:26px; color:var(--text-2); font-size:17px; line-height:1.7; }
.sec ul li::before{ content:''; position:absolute; left:4px; top:11px; width:7px; height:7px;
  border-radius:50%; background:linear-gradient(135deg,var(--coral),var(--rose)); }

/* pull quote — tinted card with a big gradient quote mark */
.pull{ position:relative; overflow:hidden; margin:36px 0;
  padding:40px 40px 34px; border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(255,138,75,0.10), rgba(179,58,130,0.07));
  border:1px solid var(--border); }
.pull::before{ content:'\201C'; position:absolute; top:-26px; left:18px;
  font-family:var(--f-head); font-weight:900; font-size:150px; line-height:1; pointer-events:none;
  background:linear-gradient(135deg,var(--coral),var(--rose) 60%,var(--plum));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  opacity:0.22; }
.pull p{ position:relative; font-family:var(--f-head); font-weight:600; font-size:clamp(20px,2.4vw,26px);
  line-height:1.45; color:var(--text); letter-spacing:-0.4px; margin:0; }
.pull cite{ position:relative; display:flex; align-items:center; gap:10px; margin-top:18px;
  font-style:normal; font-size:13px; font-weight:600; color:var(--text-3); }
.pull cite::before{ content:''; width:24px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--coral),var(--rose)); }

/* ============================================================
   MEDIA — full, larger than text (the image-led move)
============================================================ */
.media{ margin:8px auto 0; }
.browser{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--surface); }
.browser-bar{ display:flex; align-items:center; gap:12px; padding:11px 16px;
  background:var(--bg-2); border-bottom:1px solid var(--border); }
.dots{ display:flex; gap:6px; }
.dots span{ width:11px; height:11px; border-radius:50%; }
.dots span:nth-child(1){ background:#FF5F57; }
.dots span:nth-child(2){ background:#FEBC2E; }
.dots span:nth-child(3){ background:#28C840; }
.browser-url{ flex:1; max-width:360px; margin:0 auto; text-align:center;
  font-size:11px; color:var(--text-2); background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:5px 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.browser video{ width:100%; background:#000; }

/* phone mockup — portrait device frame for app prototypes */
.phone{ margin:0 auto; width:-moz-fit-content; width:fit-content; max-width:100%;
  background:#0A0A0A; border-radius:42px; padding:12px; border:1px solid rgba(10,10,10,0.2);
  box-shadow:0 26px 60px -26px rgba(10,10,10,0.5); }
.phone-screen{ position:relative; border-radius:30px; overflow:hidden; background:#000; line-height:0; }
.phone-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:46%; max-width:150px; height:20px; background:#0A0A0A; border-radius:0 0 14px 14px; z-index:2; }
.phone video, .phone img{ display:block; height:500px; max-height:72vh; width:auto; max-width:100%; }

.media figcaption{ font-size:13px; color:var(--text-3); font-style:italic; margin-top:14px; line-height:1.5; }

/* ============================================================
   SCREEN SHOWCASE — alternating phone mockup + annotation rows
============================================================ */
.screen-rows{ display:flex; flex-direction:column; gap:60px; margin-top:40px; }
.screen-row{ display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:center; }
.screen-row.reverse{ grid-template-columns:1fr 280px; }
.screen-row.reverse .screen-phone{ order:2; }
.screen-row.reverse .screen-copy{ order:1; }
.screen-phone{ justify-self:center; }
.screen-phone .phone img{ height:440px; }
.screen-phone .screen-shot{ height:470px; max-height:74vh; width:auto; display:block; margin:0 auto; }
.screen-copy .sc-step{ display:inline-block; font-family:var(--f-head); font-weight:700;
  font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.screen-copy h3{ font-family:var(--f-head); font-weight:700; font-size:20px; line-height:1.25; margin-bottom:12px; }
.screen-copy p{ color:var(--text-2); font-size:17px; line-height:1.8; max-width:46ch; }
.screen-note{ display:flex; align-items:flex-end; gap:6px; margin-top:18px; }
.screen-row .screen-note{ margin-left:-12px; }
.screen-row.reverse .screen-note{ flex-direction:row-reverse; margin-left:0; margin-right:-12px; }
.sc-arrow{ width:106px; height:66px; flex:none; color:var(--rose); }
.screen-row.reverse .sc-arrow{ transform:scaleX(-1); }
.sc-anno{ font-family:'Caveat',cursive; font-weight:700; font-size:17px; color:var(--rose); line-height:1.2; }
@media(max-width:760px){
  .screen-row, .screen-row.reverse{ grid-template-columns:1fr; gap:20px; justify-items:center; text-align:center; }
  .screen-row.reverse .screen-phone{ order:1; }
  .screen-row.reverse .screen-copy{ order:2; }
  .screen-copy{ display:flex; flex-direction:column; align-items:center; }
  .screen-copy p{ max-width:52ch; }
  .screen-note{ order:-1; justify-content:center; }
  .screen-row .screen-note, .screen-row.reverse .screen-note{ margin:2px 0 18px; }
}

/* ============================================================
   TAKEAWAYS — numbered cards
============================================================ */
.takeaways{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
@media(max-width:680px){ .takeaways{ grid-template-columns:1fr; } }
.take{ background:rgba(var(--accent-rgb),0.05); border-radius:var(--r-lg); padding:30px 28px; }
.take-no{ font-family:var(--f-head); font-weight:800; font-size:30px; line-height:1; margin-bottom:14px; }
.take h4{ font-family:var(--f-head); font-weight:700; font-size:18px; margin-bottom:10px; }
.take p{ font-size:16px; color:var(--text-3); line-height:1.7; }

/* ============================================================
   DESIGN IMPACT — light stat card + rising-chart illustration
============================================================ */
.di-card{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  background:linear-gradient(150deg, rgba(255,138,75,0.10), rgba(179,58,130,0.07));
  border:1px solid var(--border); border-radius:26px; min-height:380px; margin-top:24px;
}
@media(max-width:720px){ .di-card{ grid-template-columns:1fr; }
  .di-card-chart{ min-height:240px; order:-1; } }

.di-card-left{ padding:42px 40px; display:flex; flex-direction:column; }
.di-theme{ font-family:var(--f-head); font-weight:700; font-size:22px; color:var(--text); margin-bottom:auto; }
.di-stats{ display:flex; flex-direction:column; gap:22px; margin-top:32px; }
.di-stat{ display:flex; align-items:center; gap:18px; }
.di-ic{ color:var(--coral); display:flex; flex-shrink:0; }
.di-ic .material-icons-round{ font-size:30px; }
.di-num{ display:block; font-family:var(--f-head); font-weight:800; font-size:clamp(26px,2.8vw,36px); line-height:1;
  background:linear-gradient(120deg,var(--coral-ink),var(--rose)); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.di-cap{ display:block; font-size:14px; color:var(--text-3); margin-top:5px; }

.di-card-chart{ position:relative; }
.di-card-chart svg{ position:absolute; inset:0; width:100%; height:100%; }

.di-text{ max-width:760px; margin:46px 0 0; }
.di-text p{ font-size:18px; color:var(--text-2); line-height:1.7; margin-bottom:6px; }
.di-text p strong{ color:var(--text); font-weight:700; }

/* ============================================================
   UX APPROACH — clickable phase cards + detail modal
============================================================ */
.ux-intro{ max-width:680px; }
.ux-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
@media(max-width:820px){ .ux-grid{ grid-template-columns:1fr; } }
.ux-col{
  background:linear-gradient(150deg, rgba(255,138,75,0.10), rgba(179,58,130,0.07));
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:22px 7px 12px; display:flex; flex-direction:column; gap:12px;
}
.ux-col-head{ text-align:center; padding:0 10px; }
.ux-col-no{ font-family:var(--f-head); font-weight:800; font-size:13px; color:var(--accent); letter-spacing:1px; }
.ux-col-head h3{ font-family:var(--f-head); font-weight:800; font-size:19px; letter-spacing:0.5px;
  text-transform:uppercase; margin:6px 0 4px; }
.ux-col-sub{ font-size:13px; color:var(--text-3); margin:0; }
.ux-col-head::after{ content:''; display:block; width:42px; height:2px; margin:16px auto 4px;
  background:linear-gradient(90deg,var(--coral),var(--rose)); border-radius:2px; }
.ux-methods{ display:flex; flex-direction:column; gap:4px; }
.ux-method{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  font:inherit; color:inherit; cursor:pointer; background:transparent; border:0;
  border-radius:12px; padding:12px 12px; transition:background .18s var(--ease);
}
.ux-method:hover{ background:rgba(var(--accent-rgb),0.10); }
.ux-method:focus-visible{ outline:2px solid var(--rose); outline-offset:2px; }
.ux-method-ic{ flex-shrink:0; width:34px; height:34px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; background:rgba(var(--accent-rgb),0.10); color:var(--accent); }
.ux-method-ic .material-icons-round{ font-size:19px; }
.ux-method-text{ min-width:0; }
.ux-method-text strong{ font-family:var(--f-head); font-weight:700; font-size:15px; color:var(--text); line-height:1.3; }
.ux-method-arrow{ margin-left:auto; align-self:center; font-size:16px; color:var(--accent);
  opacity:0; transform:translateX(-3px); transition:opacity .18s, transform .18s; flex-shrink:0; }
.ux-method:hover .ux-method-arrow{ opacity:1; transform:translateX(0); }

/* modal */
.ux-modal{ position:fixed; inset:0; z-index:200; display:none; }
.ux-modal.open{ display:block; }
.ux-modal-backdrop{ position:absolute; inset:0; background:rgba(10,10,10,0.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ux-modal-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px, calc(100vw - 40px)); max-height:calc(100vh - 72px); overflow:hidden;
  background:var(--bg); border-radius:22px; display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(10,10,10,0.32); }
.ux-modal-card.fullscreen{ width:100vw; height:100vh; max-height:100vh; left:0; top:0; transform:none; border-radius:0; }
.ux-modal-head{ display:flex; align-items:center; gap:12px; padding:18px 20px 18px 26px;
  border-bottom:1px solid var(--border); flex-shrink:0; }
.ux-modal-titles{ flex:1; min-width:0; }
.ux-modal-kicker{ font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); }
.ux-modal-title{ font-family:var(--f-head); font-weight:800; font-size:21px; letter-spacing:-0.3px; line-height:1.2; }
.ux-modal-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg); cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--text-2); transition:background .2s, color .2s, border-color .2s; flex-shrink:0; }
.ux-modal-btn:hover{ background:var(--bg-2); color:var(--text); border-color:var(--border-h); }
.ux-modal-btn .material-icons-round{ font-size:20px; }
.ux-modal-body{ padding:28px 32px 40px; overflow-y:auto; }
.ux-modal-card.fullscreen .ux-modal-body{ max-width:820px; margin:0 auto; width:100%; }
.ux-modal-body h4{ font-family:var(--f-head); font-weight:700; font-size:18px; margin:26px 0 8px; color:var(--text); }
.ux-modal-body h4:first-child{ margin-top:0; }
.ux-modal-body p{ color:var(--text-2); font-size:16px; line-height:1.75; margin-bottom:14px; }
.ux-modal-body ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:6px 0 18px; padding:0; }
.ux-modal-body li{ position:relative; padding-left:22px; color:var(--text-2); font-size:15.5px; line-height:1.65; }
.ux-modal-body li::before{ content:''; position:absolute; left:2px; top:10px; width:6px; height:6px;
  border-radius:50%; background:linear-gradient(135deg,var(--coral),var(--rose)); }
.ux-modal-body mark{ background:transparent; color:var(--text); font-weight:700; }
body.modal-open{ overflow:hidden; }

/* ============================================================
   IMAGE LIGHTBOX — click any case-study image to view full screen
============================================================ */
.cs-zoomable{ cursor:zoom-in; }
.cs-lightbox{ position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(10,10,10,0.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cs-lightbox.open{ display:flex; }
.cs-lightbox img{ max-width:96vw; max-height:92vh; width:auto; height:auto;
  border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.6); cursor:default; }
.cs-lightbox-close{ position:absolute; top:18px; right:18px; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,0.14); color:#fff; transition:background .2s ease; }
.cs-lightbox-close:hover{ background:rgba(255,255,255,0.26); }
.cs-lightbox-close .material-icons-round{ font-size:26px; }

/* ============================================================
   SIDE-NAV LAYOUT (sticky section rail + content, scroll-spy)
============================================================ */
.cs-layout{
  max-width:var(--max-wide); margin:80px auto 0; padding:0 40px;
  display:grid; grid-template-columns:220px 1fr; gap:64px; align-items:start;
}
.cs-sidenav{ position:sticky; top:96px; }
@media(min-width:1025px){
  .cs-sidenav{ max-height:calc(100vh - 120px); overflow-y:auto; overflow-x:hidden;
    scrollbar-width:thin; padding-right:4px; }
}
.cs-nav-list{ display:flex; flex-direction:column; gap:14px; }
.cs-nav-toggle{ display:none; }
/* view toggle (summary / detailed) + dynamic views */
.cs-view-toggle{ display:flex; gap:4px; padding:4px; background:var(--bg-2);
  border:1px solid var(--border); border-radius:var(--r-xl); margin-bottom:22px; }
.cs-view-toggle button{ flex:1; padding:9px 8px; border:0; background:transparent; cursor:pointer;
  font-family:var(--f-head); font-weight:700; font-size:12.5px; letter-spacing:.3px; color:var(--text-2);
  border-radius:var(--r-xl); transition:background .2s, color .2s; }
.cs-view-toggle button.is-active{ background:linear-gradient(135deg,var(--coral),var(--rose)); color:#fff; }
.cs-view{ display:none; }
.cs-view.is-active{ display:block; }
.cs-content [data-subnav]{ scroll-margin-top:96px; }
.cs-nav-list a.sub{ padding-left:60px; gap:12px; align-items:center; }
.cs-nav-list a.sub .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--border-h); transition:background .25s, transform .25s; }
.cs-nav-list a.sub .label{ font-size:14px; font-weight:600; color:var(--text-3); }
.cs-nav-list a.sub:hover .label{ color:var(--text-2); }
.cs-nav-list a.sub.active .label{ color:var(--rose); }
.cs-nav-list a.sub.active .dot{ background:var(--rose); transform:scale(1.3); }
.cs-nav-list a.sub.is-collapsed{ display:none; }
.cs-nav-list a:not(.sub) + a.sub{ margin-top:-8px; }
.cs-sidenav a{ display:flex; align-items:center; gap:14px; }
.cs-sidenav .num{
  width:46px; height:46px; flex-shrink:0; border-radius:50%;
  border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-family:var(--f-head); font-weight:800; font-size:16px; color:var(--text-2);
  transition:border-color .25s, color .25s, background .25s;
}
.cs-sidenav .label{ font-family:var(--f-head); font-weight:600; font-size:18px; color:var(--text-2);
  transition:color .25s; }
.cs-sidenav a:hover .label{ color:var(--text); }
.cs-sidenav a.active .num{ border-color:transparent; color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--rose)); }
.cs-sidenav .num{ flex-shrink:0; }
.cs-sidenav .label{ flex-shrink:0; transition:color .25s; }
.cs-sidenav a.active .label{ color:var(--rose); }

/* ===== responsive: section nav collapses into a hamburger (tablet + mobile) ===== */
@media(max-width:1024px){
  .cs-layout{ grid-template-columns:1fr; gap:0; padding:0 28px; }
  .cs-sidenav{
    position:sticky; top:64px; z-index:60; margin:0 -28px 28px;
    background:rgba(255,255,255,0.92);
    -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
    border-bottom:1px solid var(--border);
  }
  .cs-nav-toggle{
    display:flex; align-items:center; gap:10px; width:100%; padding:14px 28px;
    background:transparent; border:0; cursor:pointer;
    font-family:var(--f-head); font-weight:700; font-size:15px; color:var(--text);
  }
  .cs-nav-toggle .material-icons-round{ color:var(--rose); font-size:22px; }
  .cs-view-toggle{ margin:14px 28px 4px; }
  .cs-nav-list{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:2px; padding:8px 16px 14px;
    background:var(--bg); border-bottom:1px solid var(--border);
    box-shadow:0 16px 32px rgba(10,10,10,0.10);
  }
  .cs-sidenav.open .cs-nav-list{ display:flex; }
  .cs-nav-list a{ padding:10px 12px; border-radius:10px; }
  .cs-nav-list a:hover{ background:rgba(var(--accent-rgb),0.06); }
  .cs-sidenav .num{ width:34px; height:34px; font-size:14px; }
  .cs-sidenav .label{ font-size:16px; }
  .cs-content .sec, .cs-content [data-subnav]{ scroll-margin-top:120px; }
}

.cs-content{ min-width:0; }
.cs-content .sec{ padding:56px 0; scroll-margin-top:96px; }
.cs-content .sec:first-child{ padding-top:8px; }
.cs-content .media{ margin:28px 0 8px; }

/* ============================================================
   CTA
============================================================ */
.cs-cta{ text-align:center; padding:120px 0 140px; }
.cs-cta .cs-kicker{ margin-bottom:24px; }
.cs-cta h2{ font-family:var(--f-head); font-weight:800; letter-spacing:-1.5px;
  font-size:clamp(32px,5vw,60px); line-height:1.05; margin-bottom:36px; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:var(--r-xl); transition:transform .15s var(--ease); }
.btn-primary{ background:linear-gradient(135deg,var(--coral),var(--rose)); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); }

.section-rule{ max-width:var(--max-wide); margin:0 auto; height:1px; background:var(--border); }

/* ============================================================
   PORTED RICH COMPONENTS (detailed view) — scoped under .cs-view
   so they win over the generic .sec p / .sec ul styles
============================================================ */
/* service blueprint image */
.cs-view .artefact-figure{ margin:28px 0 8px; }
.cs-view .artefact-img{ width:100%; border-radius:var(--r-lg); border:1px solid var(--border); display:block; }

/* image carousel */
.cs-view .cs-carousel{ position:relative; margin:28px 0 8px; }
.cs-view .cs-carousel-viewport{ overflow:hidden; border-radius:var(--r-lg); }
.cs-view .cs-carousel-track{ display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); }
.cs-view .cs-carousel-slide{ flex:0 0 100%; margin:0; }
.cs-view .cs-carousel-slide .artefact-img{ max-height:600px; object-fit:contain; background:var(--surface,#fafaf9); }
.cs-view .cs-carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,0.92); backdrop-filter:blur(4px); color:#1a1a1a; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.12); transition:transform .15s ease, background .15s ease; z-index:2; }
.cs-view .cs-carousel-btn:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.cs-view .cs-carousel-btn.prev{ left:14px; }
.cs-view .cs-carousel-btn.next{ right:14px; }
.cs-view .cs-carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.cs-view .cs-carousel-dots button{ width:9px; height:9px; padding:0; border-radius:50%; border:none; background:rgba(10,10,10,0.18); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.cs-view .cs-carousel-dots button.is-active{ background:linear-gradient(135deg,var(--coral),var(--rose)); transform:scale(1.25); }

/* personas */
.cs-view .persona-set{ display:flex; flex-direction:column; gap:20px; margin:28px 0; }
.cs-view .persona-card{ border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,0.09); background:var(--surface,#fafaf9); }
.cs-view .persona-card.pc-purchaser{ --pc:#C97D4A; --pc-rgb:201,125,74; --pc-grad:linear-gradient(135deg,#F4C19A 0%,#E89F70 100%); --pc-glow:rgba(232,159,112,0.14); --pc-shadow:rgba(232,159,112,0.28); }
.cs-view .persona-card.pc-teacher{ --pc:#5BA39C; --pc-rgb:91,163,156; --pc-grad:linear-gradient(135deg,#B5DDD8 0%,#7FBDB6 100%); --pc-glow:rgba(127,189,182,0.14); --pc-shadow:rgba(127,189,182,0.28); }
.cs-view .persona-card.pc-student{ --pc:#7E61A0; --pc-rgb:126,97,160; --pc-grad:linear-gradient(135deg,#C9B5DB 0%,#9F86B8 100%); --pc-glow:rgba(159,134,184,0.14); --pc-shadow:rgba(159,134,184,0.28); }
.cs-view .persona-head{ display:flex; align-items:flex-start; gap:22px; padding:24px 26px 20px; border-left:4px solid var(--pc); border-bottom:1px solid rgba(0,0,0,0.07); }
.cs-view .persona-avatar{ width:48px; height:48px; border-radius:50%; background:var(--pc-grad); color:#fff; font-family:'Barlow',sans-serif; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:0.02em; box-shadow:0 0 0 5px var(--pc-glow),0 3px 10px var(--pc-shadow); }
.cs-view .persona-meta{ flex:1; }
.cs-view .persona-badge{ display:inline-block; font-family:'Mulish',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--pc); background:rgba(var(--pc-rgb),0.12); padding:3px 9px; border-radius:99px; margin-bottom:6px; }
.cs-view .persona-pname{ font-family:'Barlow',sans-serif; font-size:18px; font-weight:700; margin:0 0 3px; line-height:1.2; color:#1a1a1a; }
.cs-view .persona-context{ font-family:'Mulish',sans-serif; font-size:13px; color:#767676; margin:0; line-height:1.4; }
.cs-view .persona-quote{ font-style:italic; font-size:14px; color:var(--pc); margin:0; padding:12px 26px; border-left:4px solid var(--pc); background:rgba(var(--pc-rgb),0.05); border-bottom:1px solid rgba(0,0,0,0.06); font-family:'Barlow',sans-serif; line-height:1.5; }
.cs-view .persona-body{ display:grid; grid-template-columns:1fr 1fr 1fr; }
@media (max-width:680px){ .cs-view .persona-body{ grid-template-columns:1fr; } .cs-view .persona-col{ border-right:none !important; border-bottom:1px solid rgba(0,0,0,0.06); } .cs-view .persona-col:last-child{ border-bottom:none; } }
.cs-view .persona-col{ padding:18px 22px; border-right:1px solid rgba(0,0,0,0.06); }
.cs-view .persona-col:last-child{ border-right:none; }
.cs-view .persona-col-label{ font-family:'Mulish',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#6B7280; margin-bottom:11px; }
.cs-view .persona-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.cs-view .persona-list li{ font-family:'Mulish',sans-serif; font-size:13px; color:#555; line-height:1.45; display:flex; gap:8px; align-items:flex-start; padding-left:0; }
.cs-view .persona-list li::before{ content:''; position:static; width:5px; height:5px; border-radius:50%; background:var(--pc); flex-shrink:0; margin-top:5px; }
.cs-view .persona-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.cs-view .persona-tag-chip{ font-family:'Mulish',sans-serif; font-size:12px; padding:3px 9px; border-radius:99px; background:rgba(0,0,0,0.05); color:#666; }

/* how-might-we sticky notes */
.cs-view .hmw-notes{ display:flex; flex-wrap:wrap; gap:28px; margin:28px 0 8px; padding:10px 4px 20px; list-style:none; }
.cs-view .hmw-note{ width:206px; min-height:206px; padding:20px 18px 24px; position:relative; display:flex; flex-direction:column; gap:10px; border-radius:2px; box-shadow:3px 5px 12px rgba(0,0,0,0.13),0 1px 3px rgba(0,0,0,0.07); cursor:default; transition:transform 0.32s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.28s ease; z-index:1; }
.cs-view .hmw-note::after{ content:''; position:absolute; top:0; left:0; right:0; height:7px; border-radius:2px 2px 0 0; background:rgba(0,0,0,0.07); pointer-events:none; }
.cs-view .hmw-note.hmw-n1{ background:linear-gradient(155deg,#F4C19A 0%,#E89F70 100%); transform:rotate(-2.6deg); }
.cs-view .hmw-note.hmw-n2{ background:linear-gradient(155deg,#B5DDD8 0%,#7FBDB6 100%); transform:rotate(1.9deg); }
.cs-view .hmw-note.hmw-n3{ background:linear-gradient(155deg,#C9B5DB 0%,#9F86B8 100%); transform:rotate(-1deg); }
/* hover effect removed */
.cs-view .hmw-badge{ font-family:'Caveat',cursive; font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(0,0,0,0.32); line-height:1; margin-bottom:2px; }
.cs-view .hmw-q{ font-family:'Caveat',cursive; font-size:19px; font-weight:500; line-height:1.45; color:rgba(0,0,0,0.78); margin:0; }

/* design-process roadmap */
.cs-view .roadmap-outer{ margin:32px 0 0; padding:8px 0 8px; width:100%; box-sizing:border-box; }
.cs-view .roadmap-row{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:start; width:100%; }
.cs-view .rm-curve{ position:absolute; top:4px; left:0; width:100%; height:56px; pointer-events:none; z-index:0; overflow:visible; }
.cs-view .rm-step{ display:flex; flex-direction:column; align-items:center; min-width:0; position:relative; z-index:1; }
.cs-view .rm-node{ width:48px; height:48px; border-radius:50%; color:#fff; font-family:'Barlow',sans-serif; font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; flex-shrink:0; transition:transform 0.22s ease,box-shadow 0.22s ease; }
.cs-view .rm-step:nth-of-type(1) .rm-node{ background:linear-gradient(135deg,#F4C19A 0%,#E89F70 100%); box-shadow:0 0 0 5px rgba(232,159,112,0.14),0 3px 10px rgba(232,159,112,0.28); }
.cs-view .rm-step:nth-of-type(2) .rm-node{ background:linear-gradient(135deg,#B5DDD8 0%,#7FBDB6 100%); box-shadow:0 0 0 5px rgba(127,189,182,0.14),0 3px 10px rgba(127,189,182,0.28); }
.cs-view .rm-step:nth-of-type(3) .rm-node{ background:linear-gradient(135deg,#C9B5DB 0%,#9F86B8 100%); box-shadow:0 0 0 5px rgba(159,134,184,0.14),0 3px 10px rgba(159,134,184,0.28); }
.cs-view .rm-step:nth-of-type(4) .rm-node{ background:linear-gradient(135deg,#F2B5B5 0%,#DC8E8E 100%); box-shadow:0 0 0 5px rgba(220,142,142,0.14),0 3px 10px rgba(220,142,142,0.28); }
.cs-view .rm-step:nth-of-type(5) .rm-node{ background:linear-gradient(135deg,#ECD49A 0%,#C9A878 100%); box-shadow:0 0 0 5px rgba(201,168,120,0.14),0 3px 10px rgba(201,168,120,0.28); }
/* hover effect removed */
.cs-view .rm-stem{ width:1px; height:14px; background:rgba(0,0,0,0.12); margin-top:8px; }
.cs-view .rm-card{ width:100%; box-sizing:border-box; background:#faf8f6; border:1px solid rgba(0,0,0,0.07); border-radius:10px; padding:12px 12px 14px; transition:box-shadow 0.22s ease,transform 0.22s ease; text-align:center; }
/* hover effect removed */
.cs-view .rm-card-title{ font-family:'Barlow',sans-serif; font-size:13px; font-weight:700; color:#1e1510; line-height:1.35; margin-bottom:7px; }
.cs-view .rm-card-note{ font-family:'Mulish',sans-serif; font-size:11.5px; color:#6B6B6B; line-height:1.55; }
@media (max-width:640px){ .cs-view .roadmap-row{ grid-template-columns:1fr; gap:18px; } .cs-view .rm-curve{ display:none; } .cs-view .rm-stem{ display:none; } .cs-view .rm-step{ flex-direction:row; align-items:flex-start; gap:14px; } .cs-view .rm-card{ text-align:left; } }

/* findings -> iteration table */
.cs-view .ft-wrap{ margin:32px 0 8px; width:100%; box-sizing:border-box; }
.cs-view .ft-headrow{ display:grid; grid-template-columns:78px 1fr 1fr; gap:20px; padding:0 0 10px; border-bottom:1px solid rgba(0,0,0,0.08); margin-bottom:4px; }
.cs-view .ft-headrow span{ font-family:'Mulish',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; color:#767676; }
.cs-view .ft-headrow span:first-child{ grid-column:2; }
.cs-view .ft-row{ display:grid; grid-template-columns:78px 1fr 1fr; gap:20px; padding:28px 0; border-bottom:1px solid rgba(0,0,0,0.06); align-items:start; }
.cs-view .ft-row:last-child{ border-bottom:none; }
.cs-view .ft-rail{ display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:4px; }
.cs-view .ft-num{ width:48px; height:48px; border-radius:50%; color:#fff; font-family:'Barlow',sans-serif; font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 0.22s ease,box-shadow 0.22s ease; }
/* hover effect removed */
.cs-view .ft-tag{ font-family:'Mulish',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#7A6A50; text-align:center; line-height:1.3; }
.cs-view .ft-row.f1 .ft-num{ background:linear-gradient(135deg,#F4C19A 0%,#E89F70 100%); box-shadow:0 0 0 5px rgba(232,159,112,0.14),0 3px 10px rgba(232,159,112,0.28); }
.cs-view .ft-row.f2 .ft-num{ background:linear-gradient(135deg,#B5DDD8 0%,#7FBDB6 100%); box-shadow:0 0 0 5px rgba(127,189,182,0.14),0 3px 10px rgba(127,189,182,0.28); }
.cs-view .ft-row.f3 .ft-num{ background:linear-gradient(135deg,#C9B5DB 0%,#9F86B8 100%); box-shadow:0 0 0 5px rgba(159,134,184,0.14),0 3px 10px rgba(159,134,184,0.28); }
.cs-view .ft-row.f4 .ft-num{ background:linear-gradient(135deg,#F2B5B5 0%,#DC8E8E 100%); box-shadow:0 0 0 5px rgba(220,142,142,0.14),0 3px 10px rgba(220,142,142,0.28); }
.cs-view .ft-cell{ font-family:'Mulish',sans-serif; font-size:13.5px; color:#444; line-height:1.6; }
.cs-view .ft-cell strong{ font-family:'Barlow',sans-serif; font-weight:700; color:#1e1510; }
.cs-view .ft-cell.action{ color:#1e1510; font-weight:500; }
@media (max-width:720px){ .cs-view .ft-headrow{ display:none; } .cs-view .ft-row{ grid-template-columns:1fr; gap:12px; padding:24px 0; } .cs-view .ft-rail{ flex-direction:row; align-items:center; gap:14px; } .cs-view .ft-cell.observed::before{ content:'What we observed'; display:block; font-family:'Mulish',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; color:#767676; margin-bottom:4px; } .cs-view .ft-cell.action::before{ content:'What we changed'; display:block; font-family:'Mulish',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; color:#767676; margin-bottom:4px; } }

/* ============================================================
   CALLOUT — problem statement / key decision / context note
============================================================ */
.callout{ margin:28px 0 8px; padding:22px 26px; border-radius:var(--r-lg);
  background:rgba(var(--accent-rgb),0.05); border-left:4px solid var(--rose); }
.callout p{ margin:0; font-size:16px; line-height:1.7; color:var(--text-2); }
.callout strong{ color:var(--text); font-weight:700; }
.cs-view .callout p{ font-size:16px; line-height:1.7; color:var(--text-2); margin:0; }

/* ============================================================
   TEACHER PORTAL — ported bespoke visuals (scoped under .cs-view)
   fonts rewired to the design tokens; palette already matches
============================================================ */
/* diary-study term cycle */
.cs-view .term-cycle{ margin:32px 0; background:#faf8f6; border:1px solid rgba(0,0,0,0.07); border-radius:14px; padding:28px 30px 26px; }
.cs-view .term-eyebrow{ font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(184,114,46,0.7); margin-bottom:6px; }
.cs-view .term-title{ font-family:var(--f-head); font-size:18px; font-weight:700; color:#1e1510; margin:0 0 4px; line-height:1.35; }
.cs-view .term-sub{ font-family:var(--f-body); font-size:13px; color:#6B6B6B; margin:0 0 28px; line-height:1.5; }
.cs-view .term-row{ position:relative; display:flex; flex-direction:column; gap:16px; }
.cs-view .term-row::before{ content:''; position:absolute; left:25px; top:30px; bottom:30px; width:0; border-left:2px dashed #C8B5A2; z-index:0; pointer-events:none; }
.cs-view .term-step{ display:flex; flex-direction:row; align-items:center; gap:20px; position:relative; z-index:1; min-width:0; }
.cs-view .term-icon{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; z-index:2; flex-shrink:0; transition:transform 0.22s ease; }
.cs-view .term-icon .material-icons-round{ font-size:24px; }
/* hover effect removed */
.cs-view .term-s1 .term-icon{ background:linear-gradient(135deg,#F4C19A 0%,#E89F70 100%); box-shadow:0 0 0 5px rgba(232,159,112,0.14),0 3px 10px rgba(232,159,112,0.28); }
.cs-view .term-s2 .term-icon{ background:linear-gradient(135deg,#B5DDD8 0%,#7FBDB6 100%); box-shadow:0 0 0 5px rgba(127,189,182,0.14),0 3px 10px rgba(127,189,182,0.28); }
.cs-view .term-s3 .term-icon{ background:linear-gradient(135deg,#C9B5DB 0%,#9F86B8 100%); box-shadow:0 0 0 5px rgba(159,134,184,0.14),0 3px 10px rgba(159,134,184,0.28); }
.cs-view .term-s4 .term-icon{ background:linear-gradient(135deg,#ECD49A 0%,#C9A878 100%); box-shadow:0 0 0 5px rgba(201,168,120,0.14),0 3px 10px rgba(201,168,120,0.28); }
.cs-view .term-card{ flex:1; min-width:0; box-sizing:border-box; background:#fff; border:1px solid rgba(0,0,0,0.07); border-radius:10px; padding:14px 20px 16px; text-align:left; transition:box-shadow 0.22s ease,transform 0.22s ease; display:flex; flex-direction:column; gap:4px; }
/* hover effect removed */
.cs-view .term-card-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.cs-view .term-card-phase{ font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#767676; }
.cs-view .term-card-area{ font-family:var(--f-head); font-size:15px; font-weight:700; line-height:1.3; }
.cs-view .term-s1 .term-card-area{ color:#C97D4A; }
.cs-view .term-s2 .term-card-area{ color:#5BA39C; }
.cs-view .term-s3 .term-card-area{ color:#7E61A0; }
.cs-view .term-s4 .term-card-area{ color:#B8722E; }
.cs-view .term-card-desc{ font-family:var(--f-body); font-size:12.5px; color:#666; line-height:1.55; margin:4px 0 0; }
.cs-view .term-insight{ margin-top:26px; padding:16px 20px; background:rgba(126,97,160,0.05); border-left:3px solid #9F86B8; border-radius:0 8px 8px 0; font-family:'Caveat',cursive; font-size:18px; color:#5e4a7d; line-height:1.45; }
@media (max-width:540px){ .cs-view .term-step{ gap:14px; } .cs-view .term-icon{ width:44px; height:44px; } .cs-view .term-icon .material-icons-round{ font-size:20px; } .cs-view .term-row::before{ left:21px; } .cs-view .term-card{ padding:12px 16px 14px; } .cs-view .term-card-area{ font-size:14px; } }

/* cognitive-load before/after bar chart */
.cs-view .cog-load{ margin:32px 0; background:#faf8f6; border:1px solid rgba(0,0,0,0.07); border-radius:14px; padding:28px 30px 26px; }
.cs-view .cog-load-eyebrow{ font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(184,114,46,0.7); margin-bottom:6px; }
.cs-view .cog-load-title{ font-family:var(--f-head); font-size:18px; font-weight:700; color:#1e1510; margin:0 0 4px; line-height:1.35; }
.cs-view .cog-load-sub{ font-family:var(--f-body); font-size:13px; color:#6B6B6B; margin:0 0 26px; }
.cs-view .cog-row{ display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:center; padding:18px 0; border-top:1px solid rgba(0,0,0,0.06); }
.cs-view .cog-row:first-of-type{ border-top:none; padding-top:4px; }
.cs-view .cog-row-label{ font-family:var(--f-head); font-size:14px; font-weight:700; color:#1e1510; line-height:1.35; }
.cs-view .cog-row-label small{ display:block; font-family:var(--f-body); font-size:11.5px; font-weight:400; color:#767676; margin-top:4px; line-height:1.4; }
.cs-view .cog-bars{ position:relative; }
.cs-view .cog-bar-line{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.cs-view .cog-bar-line:last-child{ margin-bottom:0; }
.cs-view .cog-bar-tag{ font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#767676; width:50px; flex-shrink:0; text-align:right; }
.cs-view .cog-bar-track{ flex:1; height:24px; position:relative; background:rgba(0,0,0,0.04); border-radius:4px; overflow:visible; }
.cs-view .cog-bar-fill{ height:100%; border-radius:4px; display:flex; align-items:center; justify-content:flex-end; padding:0 11px; box-sizing:border-box; color:#fff; font-family:var(--f-head); font-size:12px; font-weight:800; letter-spacing:0.02em; transition:filter 0.22s ease; position:relative; z-index:1; }
.cs-view .cog-bar-before{ background:linear-gradient(90deg,#F2B5B5 0%,#DC8E8E 100%); box-shadow:0 2px 6px rgba(220,142,142,0.28); }
.cs-view .cog-bar-after{ background:linear-gradient(90deg,#B5DDD8 0%,#7FBDB6 100%); box-shadow:0 2px 6px rgba(127,189,182,0.28); }
/* hover effect removed */
.cs-view .cog-miller-line{ position:absolute; top:-10px; bottom:-42px; width:0; border-left:2px dashed #B8722E; z-index:3; pointer-events:none; }
.cs-view .cog-miller-label{ position:absolute; top:-22px; left:50%; transform:translateX(-50%); background:#faf8f6; padding:0 8px; font-family:'Caveat',cursive; font-size:16px; font-weight:700; color:#B8722E; white-space:nowrap; line-height:1; }
.cs-view .cog-callout{ margin-top:22px; padding:14px 18px; background:rgba(127,189,182,0.07); border-left:3px solid #7FBDB6; border-radius:0 8px 8px 0; font-family:var(--f-body); font-size:13px; color:#555; line-height:1.6; }
.cs-view .cog-callout strong{ font-family:var(--f-head); font-weight:700; color:#1e1510; }
@media (max-width:640px){ .cs-view .cog-row{ grid-template-columns:1fr; gap:14px; padding:18px 0; } .cs-view .cog-row-label{ font-size:13px; } .cs-view .cog-bar-tag{ width:48px; font-size:9px; } }

/* before/after decision cards */
.cs-view .dec-stack{ display:flex; flex-direction:column; gap:22px; margin:28px 0 8px; }
.cs-view .dec-card{ border-radius:14px; background:#faf8f6; border:1px solid rgba(0,0,0,0.07); overflow:hidden; }
.cs-view .dec-card.dec-c1{ --dec:#C97D4A; --dec-rgb:201,125,74; --dec-grad:linear-gradient(135deg,#F4C19A 0%,#E89F70 100%); }
.cs-view .dec-card.dec-c2{ --dec:#5BA39C; --dec-rgb:91,163,156; --dec-grad:linear-gradient(135deg,#B5DDD8 0%,#7FBDB6 100%); }
.cs-view .dec-card.dec-c3{ --dec:#7E61A0; --dec-rgb:126,97,160; --dec-grad:linear-gradient(135deg,#C9B5DB 0%,#9F86B8 100%); }
.cs-view .dec-card-header{ display:flex; gap:18px; align-items:flex-start; padding:22px 26px 20px; border-left:4px solid var(--dec); border-bottom:1px solid rgba(0,0,0,0.07); }
.cs-view .dec-card-num{ width:44px; height:44px; border-radius:50%; background:var(--dec-grad); color:#fff; font-family:var(--f-head); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 5px rgba(var(--dec-rgb),0.13),0 3px 10px rgba(var(--dec-rgb),0.26); }
.cs-view .dec-card-meta{ flex:1; }
.cs-view .dec-card-eyebrow{ font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--dec); margin-bottom:4px; }
.cs-view .dec-card-q{ font-family:var(--f-head); font-size:19px; font-weight:700; color:#1e1510; margin:0; line-height:1.3; }
.cs-view .dec-card-body{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid rgba(0,0,0,0.07); }
.cs-view .dec-option{ padding:22px 24px; position:relative; }
.cs-view .dec-option:first-child{ border-right:1px solid rgba(0,0,0,0.07); background:rgba(0,0,0,0.02); }
.cs-view .dec-option-chosen{ background:rgba(var(--dec-rgb),0.05) !important; }
.cs-view .dec-option-label{ font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#767676; margin-bottom:8px; }
.cs-view .dec-option-chosen .dec-option-label{ color:var(--dec); }
.cs-view .dec-option-name{ font-family:var(--f-head); font-size:15px; font-weight:700; color:#1e1510; margin:0 0 10px; line-height:1.3; }
.cs-view .dec-option:not(.dec-option-chosen) .dec-option-name{ color:#6B6B6B; }
.cs-view .dec-option-desc{ font-family:var(--f-body); font-size:13px; color:#555; line-height:1.6; margin:0 0 14px; }
.cs-view .dec-option:not(.dec-option-chosen) .dec-option-desc{ color:#6B6B6B; }
.cs-view .dec-option-tag{ display:inline-block; font-family:var(--f-body); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:4px 11px; border-radius:99px; }
.cs-view .dec-option-tag-no{ background:rgba(0,0,0,0.06); color:#6B6B6B; }
.cs-view .dec-option-tag-yes{ background:var(--dec-grad); color:#fff; box-shadow:0 2px 6px rgba(var(--dec-rgb),0.32); }
.cs-view .dec-card-rationale{ padding:18px 26px 20px; font-family:var(--f-body); font-size:13px; color:#555; line-height:1.65; background:rgba(var(--dec-rgb),0.03); }
.cs-view .dec-card-rationale strong{ font-family:var(--f-body); font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--dec); display:inline-block; margin-right:8px; }
@media (max-width:640px){ .cs-view .dec-card-body{ grid-template-columns:1fr; } .cs-view .dec-option:first-child{ border-right:none; border-bottom:1px solid rgba(0,0,0,0.07); } .cs-view .dec-card-q{ font-size:17px; } }

/* post-launch iteration sticky board */
.cs-view .pi-head{ margin-top:32px; }
.cs-view .pi-eyebrow{ font-family:var(--f-body); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(184,114,46,0.7); margin-bottom:6px; }
.cs-view .pi-title{ font-family:var(--f-head); font-size:18px; font-weight:700; color:#1e1510; margin:0 0 4px; line-height:1.35; }
.cs-view .pi-sub{ font-family:var(--f-body); font-size:13px; color:#6B6B6B; margin:0 0 20px; line-height:1.5; }
.cs-view .pi-board{ display:flex; flex-direction:column; gap:30px; margin:28px 0 8px; padding:12px 4px 20px; }
.cs-view .pi-row{ display:grid; grid-template-columns:1fr 64px 1fr; gap:8px; align-items:center; }
.cs-view .pi-note{ min-height:168px; padding:22px 20px 26px; position:relative; display:flex; flex-direction:column; gap:10px; border-radius:2px; box-shadow:3px 5px 12px rgba(0,0,0,0.13),0 1px 3px rgba(0,0,0,0.07); transition:transform 0.32s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.28s ease; z-index:1; }
.cs-view .pi-note::after{ content:''; position:absolute; top:0; left:0; right:0; height:7px; border-radius:2px 2px 0 0; background:rgba(0,0,0,0.07); pointer-events:none; }
/* hover effect removed */
.cs-view .pi-observed{ background:linear-gradient(155deg,#F4C19A 0%,#E89F70 100%); }
.cs-view .pi-changed{ background:linear-gradient(155deg,#B5DDD8 0%,#7FBDB6 100%); }
.cs-view .pi-r1 .pi-observed{ transform:rotate(-2.2deg); }
.cs-view .pi-r1 .pi-changed{ transform:rotate(1.4deg); }
.cs-view .pi-badge{ font-family:'Caveat',cursive; font-size:13px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(0,0,0,0.36); line-height:1; margin-bottom:4px; }
.cs-view .pi-text{ font-family:'Caveat',cursive; font-size:19px; font-weight:500; line-height:1.4; color:rgba(0,0,0,0.8); margin:0; }
.cs-view .pi-arrow{ display:flex; align-items:center; justify-content:center; }
.cs-view .pi-arrow img{ width:56px; height:auto; }
@media (max-width:720px){ .cs-view .pi-row{ grid-template-columns:1fr; gap:18px; } .cs-view .pi-note{ transform:rotate(0) !important; } .cs-view .pi-arrow img{ transform:rotate(90deg); width:36px; } }

/* ---- Design-system text presets (applied by the content editor) ---- */
.cs-content .c-muted{ color:#5a5a5a; }
.cs-content .c-accent{ color:#c2641f; }
.cs-content .c-accent2{ color:#B33A82; }
.cs-content .f-caveat{ font-family:'Caveat',cursive; }
.cs-content .t-sm{ font-size:0.85em; }
.cs-content .t-lg{ font-size:1.25em; }