/* Case study pages (22 Sep 2026). Loaded after ../styles.css, reuses its tokens, nav, buttons and footer. */

/* Hero */
.csx-hero{position:relative;padding:64px 0 72px;overflow:hidden}
.csx-hero__glow{position:absolute;width:780px;height:780px;right:-220px;top:-280px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.26),rgba(255,105,0,0));filter:blur(40px);pointer-events:none}
.csx-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--n500);margin-bottom:36px;transition:color .2s}
.csx-back:hover{color:var(--black)}
.csx-hero__logo img{height:48px;width:auto;margin-bottom:28px}
.csx-hero h1{font-size:clamp(38px,5vw,66px);line-height:1.04;max-width:18ch}
.csx-hero h1 em{font-style:normal;color:var(--orange-600)}
.csx-hero .lead{margin-top:24px}
.csx-meta{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:40px;padding-top:28px;border-top:1px solid var(--n200)}
.csx-meta div{display:flex;flex-direction:column}
.csx-meta dt{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--n500)}
.csx-meta dd{font-size:17px;font-weight:500;margin-top:4px}

/* Big numbers band */
.csx-stats{background:var(--black);color:var(--white);padding:72px 0;position:relative;overflow:hidden}
.csx-stats__glow{position:absolute;width:700px;height:700px;left:-260px;bottom:-460px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.4),rgba(255,105,0,0));filter:blur(50px);pointer-events:none}
.csx-stats__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.csx-stat{border-left:2px solid var(--orange);padding-left:20px}
.csx-stat__n{font-family:var(--head);font-weight:700;font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:-.03em}
.csx-stat__n small{font-size:.5em;letter-spacing:-.01em;margin-left:2px}
.csx-stat__l{margin-top:12px;font-size:15px;line-height:1.45;color:var(--n300);max-width:24ch}
.csx-stats__note{position:relative;margin-top:36px;font-size:13px;color:var(--n500)}

/* Before */
.csx-before__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.csx-pains{display:grid;gap:14px}
.csx-pains li{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;background:var(--white);border:1px solid var(--n200);border-radius:var(--r);font-size:17px;line-height:1.5}
.csx-pains li::before{content:"";flex-shrink:0;width:10px;height:10px;margin-top:8px;border-radius:50%;background:var(--n300)}

/* A day with the assistant */
.csx-day__head{max-width:720px}
.csx-day__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.csx-moment{display:flex;flex-direction:column;background:var(--n50);border:1px solid var(--n200);border-radius:22px;padding:22px 18px 20px;min-height:100%}
.csx-moment__time{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:-.02em}
.csx-moment__time::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--orange-100)}
.csx-moment__who{font-size:13px;color:var(--n500);margin-top:4px;margin-bottom:18px}
.csx-chat{display:flex;flex-direction:column;gap:8px;margin-top:auto;background:#EFE7DD;border-radius:16px;padding:14px 12px}
.csx-b{max-width:92%;padding:9px 12px 7px;border-radius:12px;font-size:14px;line-height:1.4;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.csx-b--in{align-self:flex-start;background:var(--white);border-top-left-radius:4px}
.csx-b--out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:4px}
.csx-b time{display:block;text-align:right;font-size:11px;color:var(--n500);margin-top:2px}
.csx-voice{display:flex;align-items:center;gap:8px}
.csx-voice__play{width:0;height:0;border-left:9px solid var(--n600);border-top:6px solid transparent;border-bottom:6px solid transparent}
.csx-voice__wave{flex:1;height:18px;min-width:80px;background:repeating-linear-gradient(90deg,var(--n400) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(0deg,transparent 20%,#000 20% 80%,transparent 80%);mask:linear-gradient(0deg,transparent 20%,#000 20% 80%,transparent 80%)}
.csx-voice small{font-size:12px;color:var(--n500)}
.csx-file{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.05);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:13px;font-weight:500}
.csx-file i{flex-shrink:0;width:26px;height:32px;border-radius:4px;background:#E5484D;color:var(--white);font-style:normal;font-size:9px;font-weight:700;display:grid;place-items:center}
.csx-day__foot{margin-top:28px;font-size:14px;color:var(--n500)}

/* Stories */
.csx-stories__list{display:grid;gap:24px;margin-top:56px}
.csx-story{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:40px;background:var(--white);border:1px solid var(--n200);border-radius:24px}
.csx-story__num{font-family:var(--head);font-weight:700;font-size:clamp(44px,4.6vw,64px);line-height:1;letter-spacing:-.03em;color:var(--orange-600)}
.csx-story__numl{margin-top:10px;font-size:14px;color:var(--n500);line-height:1.45}
.csx-story h3{font-family:var(--head);font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.csx-story__body p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--n700);max-width:62ch}
.csx-ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;max-width:620px}
.csx-ba div{border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.45}
.csx-ba b{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px}
.csx-ba__was{background:var(--n100);color:var(--n600)}
.csx-ba__now{background:var(--orange-50);color:var(--n900);border:1px solid var(--orange-200)}
.csx-ba__now b{color:var(--orange-600)}

/* Quote wall */
.csx-quotes__main{font-family:var(--head);font-size:clamp(28px,3.4vw,46px);line-height:1.18;letter-spacing:-.02em;max-width:26ch}
.csx-quotes__main::before{content:"\201C"}
.csx-quotes__main::after{content:"\201D"}
.csx-by{display:flex;align-items:center;gap:14px;margin-top:30px}
.csx-by img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--orange)}
.csx-by span{display:flex;flex-direction:column;line-height:1.35}
.csx-by small{color:var(--n400);font-size:14px}
.csx-quotes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.csx-q{background:var(--n900);border:1px solid var(--n800);border-radius:20px;padding:26px 24px}
.csx-q p{font-family:var(--head);font-size:19px;line-height:1.4;letter-spacing:-.01em}
.csx-q p::before{content:"\201C"}
.csx-q p::after{content:"\201D"}
.csx-q small{display:block;margin-top:14px;color:var(--n400);font-size:14px}

/* Honest bit */
.csx-honest{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;padding:40px;border:1px dashed var(--n300);border-radius:24px;background:var(--white)}
.csx-honest h2{font-size:clamp(26px,2.6vw,34px)}
.csx-honest p{font-size:17px;line-height:1.6;color:var(--n700)}
.csx-honest p+p{margin-top:14px}

/* Video */
.csx-video{margin-top:0}

/* Final CTA */
.csx-final{text-align:center;overflow:hidden}
.csx-final__glow{position:absolute;width:900px;height:900px;left:50%;top:40%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.3),rgba(255,105,0,0));filter:blur(50px);pointer-events:none}
.csx-final .container{position:relative}
.csx-final h2{margin:0 auto;max-width:20ch}
.csx-final p{margin:20px auto 0;max-width:46ch;color:var(--n300);font-size:18px}
.csx-final .cta{display:flex;flex-direction:column;align-items:center}
.csx-next{display:inline-block;margin-top:40px;font-size:15px;color:var(--n400);border-bottom:1px solid var(--n700);padding-bottom:2px;transition:color .2s,border-color .2s}
.csx-next:hover{color:var(--white);border-color:var(--orange)}

@media (max-width:1080px){
  .csx-stats__grid{grid-template-columns:repeat(2,1fr);gap:40px 28px}
  .csx-day__grid{grid-template-columns:repeat(2,1fr)}
  .csx-before__grid,.csx-honest{grid-template-columns:1fr;gap:28px}
  .csx-story{grid-template-columns:1fr;gap:20px}
  .csx-quotes__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .csx-hero{padding:40px 0 56px}
  .csx-stats{padding:56px 0}
  .csx-day__grid{grid-template-columns:1fr}
  .csx-story,.csx-honest{padding:26px 22px}
  .csx-ba{grid-template-columns:1fr}
  .csx-meta{gap:18px 28px}
}

/* Photos (22 Sep 2026) */
.csx-hero__img{margin-top:48px;border-radius:24px;overflow:hidden;aspect-ratio:21/9;background:var(--n100);box-shadow:0 40px 80px -48px rgba(10,10,10,.45)}
.csx-hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.csx-hero__img--right img{object-position:50% 12%}
.csx-story__img{grid-column:1/-1;margin:-40px -40px 0;aspect-ratio:2/1;overflow:hidden;border-radius:24px 24px 0 0;background:var(--n100)}
.csx-story__img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (max-width:1080px){.csx-story__img{margin:-40px -40px 0}}
@media (max-width:640px){
  .csx-hero__img{aspect-ratio:4/3;margin-top:36px;border-radius:18px}
  .csx-hero__img img{object-position:78% 40%}
  .csx-hero__img--right img{object-position:55% 20%}
  .csx-story__img{margin:-26px -22px 0;aspect-ratio:16/10}
}
.csx-story__img img[src*="security-2-roof"]{object-position:50% 12%}
.csx-story__img img[src*="security-3-win"]{object-position:50% 70%}
.csx-story__img img[src*="security-4-paperwork"]{object-position:50% 55%}