/* ── context ────────────────────────────────────────────────────────── */
.ctx{margin-top:44px;display:grid;grid-template-columns:minmax(0,636px) minmax(0,488px);gap:0;align-items:start}
.ctx__copy p{margin:0 0 26px;font-size:18px;line-height:29.7px;letter-spacing:-.44px;color:var(--ink-4)}
.ctx__copy p:last-child{margin-bottom:0}
.ctx__art{margin:0}
.ctx__art img{width:100%;height:auto}
.bleed{margin-right:calc(-1 * var(--bleed,0px))}

/* ── thesis cards ───────────────────────────────────────────────────── */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
.tcard{
  padding:28px;border-radius:18px;background:#f4f8fd;border:1px solid #e2e8f2;
}
.tcard__k{
  display:block;font-weight:900;font-size:12px;line-height:19.8px;
  letter-spacing:2.16px;color:var(--brand);
}
.tcard h3{
  margin:12px 0 0;font-weight:700;font-size:20px;line-height:25px;
  letter-spacing:-.45px;color:var(--ink);
}
.tcard p{margin:14px 0 0;font-size:16px;line-height:26.4px;letter-spacing:-.31px;color:var(--ink-4)}

/* ── three pillars ──────────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:39px;margin-top:70px}
.pillar{margin:0;border-radius:22px;overflow:hidden;color:#fff;display:flex;flex-direction:column}
.pillar--blue{background:linear-gradient(157.73deg,#1b82f1,#0c65bd)}
.pillar--teal{background:linear-gradient(157.73deg,#1b82f1,#0aa7a1)}
.pillar--purple{background:linear-gradient(157.73deg,#9752ff,#6c42dc)}
.pillar img{width:100%;height:auto;display:block}
.pillar figcaption{padding:22px 26px 28px;text-align:center}
.pillar figcaption b{display:block;font-weight:700;font-size:15px;line-height:24.8px;letter-spacing:-.23px}
.pillar__tag{
  display:block;margin-top:4px;font-weight:900;font-size:12px;line-height:19.8px;
  letter-spacing:1.44px;text-transform:uppercase;
}
.pillar figcaption p{margin:8px 0 0;font-size:14px;line-height:23.1px;letter-spacing:-.15px;color:rgba(255,255,255,.9)}

/* ── personas ───────────────────────────────────────────────────────── */
.personas{display:flex;flex-direction:column;gap:20px;margin-top:56px}
.persona{
  display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;align-items:center;
  padding:26px 30px;border-radius:18px;background:#f4f8fd;border:1px solid #e2e8f2;
}
.persona--lead{border-color:var(--brand);background:#eef6ff}
.persona img{width:100%;height:auto;justify-self:end;max-height:190px;object-fit:contain}
.persona__k{
  display:block;font-family:Cousine,ui-monospace,monospace;font-weight:700;
  font-size:11px;line-height:11px;letter-spacing:1.32px;color:var(--kick);
  text-transform:uppercase;
}
.persona__k--blue{color:var(--brand)}
.persona h3{margin:12px 0 0;font-weight:700;font-size:19px;line-height:23.8px;letter-spacing:-.45px}
.persona p{margin:10px 0 0;font-size:15px;line-height:24.8px;letter-spacing:-.23px;color:var(--ink-4)}
.persona__badge{
  display:inline-block;margin-top:14px;padding:6px 12px;border-radius:999px;
  background:var(--brand);color:#fff;font-family:Cousine,ui-monospace,monospace;
  font-weight:700;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;
}
.callout{
  margin:44px 0 0;max-width:708px;font-size:17px;line-height:28px;
  letter-spacing:-.43px;color:#506076;
}
.field{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:26px}
.field img{width:100%;height:auto;border-radius:14px}

/* ── loops ──────────────────────────────────────────────────────────── */
.loops{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:60px}
.loop{padding:24px;border-radius:22px;background:#f4f8fd;border:1px solid #e2e8f2}
.loop__k{
  display:block;font-weight:900;font-size:12px;line-height:19.8px;
  letter-spacing:2.16px;color:var(--brand);
}
.loop h3{margin:10px 0 0;font-weight:700;font-size:18px;line-height:22.5px;letter-spacing:-.44px}
.loop > p{margin:12px 0 0;font-size:16px;line-height:29.7px;letter-spacing:-.44px;color:var(--ink-4)}
.loop ol{margin:20px 0 0;padding:0;list-style:none;counter-reset:s}
.loop li{
  counter-increment:s;position:relative;padding-left:22px;margin-bottom:6px;
  font-weight:800;font-size:13px;line-height:21.5px;letter-spacing:-.08px;color:var(--ink-3);
}
.loop li::before{
  content:counter(s);position:absolute;left:0;top:0;
  font-family:Cousine,ui-monospace,monospace;font-size:11px;color:var(--brand);
}
.loop__r{margin:18px 0 0;font-weight:700;font-size:17px;line-height:30px;color:var(--brand)}
.loop__r span{display:block;font-weight:900;font-size:11px;letter-spacing:1.6px;text-transform:uppercase}

/* ── dark motivation band ───────────────────────────────────────────── */
.sec--dark{
  padding:66px;border-radius:40px;margin-top:96px;color:#fff;
  background:
    radial-gradient(60% 80% at 82% 8%,rgba(151,82,255,.26),transparent 60%),
    radial-gradient(50% 70% at 12% 12%,rgba(255,255,255,.24),transparent 60%),
    linear-gradient(120.73deg,#087ceb,#06cbc4);
}
.sec--dark h2,.sec--dark .body{color:#fff;max-width:900px}
.sec--dark .body{color:rgba(255,255,255,.86)}
.h3--band{
  margin:56px 0 0;font-family:var(--serif);font-weight:700;font-size:28px;
  line-height:35px;color:#fff;max-width:1030px;
}
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:34px 0 0;padding:0;list-style:none}
.chain li{
  padding:20px;border-radius:16px;background:rgba(255,255,255,.13);
  backdrop-filter:blur(12px);
}
.chain b{display:block;font-weight:700;font-size:18px;line-height:29.7px}
.chain span{display:block;margin-top:6px;font-size:14px;line-height:23.1px;color:rgba(255,255,255,.84)}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:37px;margin-top:56px;align-items:start}
.phones img{
  width:100%;height:auto;border-radius:18px;
  /* the three screenshots are different lengths in the file; one shared box
     makes them read as a set. The long leaderboard crops from the bottom. */
  aspect-ratio:339 / 652;object-fit:cover;object-position:top;
}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
.chips article{padding:22px;border-radius:16px;background:rgba(255,255,255,.13);backdrop-filter:blur(12px)}
.chips b{display:block;font-weight:700;font-size:16px;line-height:23.8px}
.chips p{margin:10px 0 0;font-size:12px;line-height:18px;color:rgba(255,255,255,.9)}
.ladder{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin:40px 0 0;padding:0;list-style:none}
.ladder li{
  padding:18px 12px;border-radius:16px;background:rgba(255,255,255,.88);
  box-shadow:0 14px 28px rgba(9,52,101,.12);text-align:center;color:var(--ink-4);
}
.ladder img{width:auto;max-width:100%;height:74px;object-fit:contain;margin:0 auto 12px}
.ladder span{display:block;font-weight:900;font-size:11px;line-height:18.1px;color:var(--kick)}
.ladder b{display:block;margin-top:4px;font-weight:700;font-size:13px;line-height:21.5px}

/* ── Q4 screen cards ────────────────────────────────────────────────
   The file has no band here: three white cards, radius 22, each with its own
   soft shadow and a gradient strip only in the footer.                      */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:43px;margin-top:64px;align-items:start}
.scard{
  margin:0;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 18px 46px rgba(31,45,71,.067);
}
.scard__shot{aspect-ratio:339 / 652;overflow:hidden}
.scard__shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.scard__shot--tint{
  background:linear-gradient(180deg,#eef7ff,#f8fbff);
  display:flex;align-items:flex-start;justify-content:center;
}
/* the Wabu Work phone is wider than its card and floats over the tint */
.scard__shot--tint img{width:111.5%;max-width:none;height:auto;object-fit:contain;margin-top:-4px}
.scard figcaption{
  background:linear-gradient(180deg,#1b82f1,#0c65bd);color:#fff;
  padding:16px 18px 20px;min-height:87px;
}
.scard figcaption b{display:block;font-weight:700;font-size:16px;line-height:23.8px}
.scard figcaption span{
  display:block;margin-top:4px;font-weight:900;font-size:12px;line-height:19.8px;
  letter-spacing:1.6px;text-transform:uppercase;color:#ececec;
}

/* ── rhythm strip ───────────────────────────────────────────────────── */
.rhythm{display:grid;grid-template-columns:repeat(3,1fr);gap:68px;margin-top:44px;align-items:start}
.rhythm h3{margin:0;font-family:var(--serif);font-weight:400;font-size:24px;line-height:24px;color:var(--ink)}
.rhythm__sub{display:block;margin-top:8px;font-size:13px;line-height:21.5px;color:var(--ink-4)}
.rhythm__k{
  display:block;margin-top:14px;font-family:Cousine,ui-monospace,monospace;
  font-weight:700;font-size:10.5px;line-height:10.5px;letter-spacing:.9px;text-transform:uppercase;
}
.rhythm__k--blue{color:var(--brand)}
.rhythm__k--teal{color:#0aa7a1}
.rhythm__k--purple{color:#6c42dc}
.rhythm img{width:100%;height:auto;border-radius:16px;margin-top:22px}
.rhythm b{display:block;margin-top:26px;font-weight:700;font-size:15px;line-height:24.8px;color:var(--ink-2)}
.rhythm p{margin:8px 0 0;font-size:13.5px;line-height:22.3px;color:var(--ink-4)}

/* ── operations ─────────────────────────────────────────────────────── */
.ops{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.ops article{padding:24px;border-radius:18px;background:#f4f8fd;border:1px solid #e2e8f2}
.ops span{font-family:Cousine,ui-monospace,monospace;font-weight:700;font-size:18px;color:var(--brand)}
.ops b{display:block;margin-top:10px;font-weight:700;font-size:20px;line-height:25px;color:var(--ink)}
.ops p{margin:12px 0 0;font-size:18px;line-height:29.7px;letter-spacing:-.44px;color:var(--ink-4)}
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.duo img{width:100%;height:auto;border-radius:18px}

/* ── impact ─────────────────────────────────────────────────────────── */
.sec--impact{
  padding:66px;border-radius:34px;margin-top:110px;color:#fff;
  background:radial-gradient(55% 70% at 90% 4%,rgba(6,203,196,.28),transparent 62%),
             linear-gradient(117.9deg,#1b82f1,#0d59ad);
}
.sec--impact h2{color:#fff;max-width:907px}
.sec--impact .body{color:rgba(255,255,255,.86);max-width:760px}
.sec--impact .body strong,.sec--dark .body strong{color:#fff}
.impact__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 0;margin-top:56px}
.impact__stats b{
  display:block;font-family:var(--serif);font-weight:700;font-size:48px;line-height:48px;
}
.impact__stats span{display:block;margin-top:6px;font-size:14px;line-height:23.1px;color:rgba(255,255,255,.74)}
.press{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.press img{width:100%;height:auto;border-radius:14px}

@media (max-width:1240px){
  .ctx{grid-template-columns:1fr;gap:36px}
  .tri,.loops,.chain,.ladder,.impact__stats,.ops{grid-template-columns:repeat(2,1fr)}
  .sec--dark,.sec--impact{padding:38px;border-radius:26px}
  .persona{grid-template-columns:minmax(0,1fr) 140px}
}
@media (max-width:760px){
  .tri,.loops,.chain,.ladder,.impact__stats,.ops,.pillars,.phones,.rhythm,
  .field,.duo,.chips,.cards3{grid-template-columns:1fr}
  .press{grid-template-columns:repeat(2,1fr)}
  .persona{grid-template-columns:1fr}
  .persona img{justify-self:start;max-height:150px}
  .sec--dark,.sec--impact{padding:26px;border-radius:20px}
}