/* ============================================================
   CASE STUDY — TABLET (768px fixed canvas)
   Values traced to Figma file kswfK4pEmcAqyCK11PqS1c
   ============================================================ */

:root{
  --brand-primary:#ff6600;
  --text-secondary:#35ff83;
  --green-title:#2eff99;
  --paper:#f7faff;
  --muted:#a6b8db;
  --blue-soft:#7eaee9;
  --page-bg:#080a29;
  --screen-bg:#0e1236;
  --shadow-t:13px 18px 8px 0px rgba(0,0,0,0.25);
  --shadow-card-sm:13px 18px 8px 0px rgba(0,0,0,0.25);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--screen-bg)}
body{
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;border:0}
a{text-decoration:none;color:inherit}

.tcase-canvas{position:relative;width:768px;margin:0 auto;background:var(--page-bg);overflow:hidden}

/* ---------- nav (768 x 38.4) ---------- */
.tnav{
  position:absolute;left:0;top:0;width:768px;height:38.4px;
  background:rgba(126,174,233,0.14);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);z-index:40;
}
.tnav-brand{
  position:absolute;left:36px;top:13.2px;width:320px;
  font-size:12px;line-height:1.2;letter-spacing:0.36px;color:#fff;white-space:nowrap;
}
.tnav-brand b{font-weight:800}
.tnav-brand span{font-weight:700;color:var(--brand-primary)}
.tnav-link{position:absolute;top:0;height:38.4px;display:block}
.tnav-link .lbl{
  position:absolute;left:0;right:0;top:13px;
  font-weight:700;font-size:12px;line-height:1.2;color:#fff;text-align:right;white-space:nowrap;
  transition:color .18s ease;
}
.tnav-link .u-bar{position:absolute;left:0;top:29px;height:2px;width:100%;background:transparent;transition:background .18s ease}
.tnav-link.is-active .lbl{color:var(--brand-primary)}
.tnav-link.is-active .u-bar{background:var(--brand-primary)}
.tnav-link:hover .lbl{color:var(--brand-primary)}
.tnav-link:hover .u-bar{background:var(--brand-primary)}

/* While another nav item is hovered, the current-page item steps back so only
   one item reads as highlighted. It returns to orange as soon as the pointer
   leaves the nav. */
.tnav:hover .tnav-link.is-active:not(:hover) .lbl{color:#fff}
.tnav:hover .tnav-link.is-active:not(:hover) .u-bar{background:transparent}

/* ---------- primitives ---------- */
.tback-hit{position:absolute;display:block}
.tback{position:absolute;font-style:italic;font-weight:400;font-size:13.93px;line-height:normal;
  color:var(--brand-primary);transition:color .18s ease}
.tback-hit .u-bar{position:absolute;left:0;height:2px;width:100%;background:transparent;
  transition:background .18s ease}
.tback-hit:hover .u-bar,.tback-hit:focus-visible .u-bar{background:var(--brand-primary)}
.tback-hit:hover .tback{color:#ff8a3d}

.teyebrow{position:absolute;font-weight:700;font-size:16px;line-height:1.25;color:var(--green-title);white-space:pre-wrap}
.teyebrow .o{color:var(--brand-primary)}
.teyebrow .w{color:#fff}

.theadline{position:absolute;font-weight:700;font-size:44px;color:var(--paper)}
.theadline .o{color:var(--brand-primary)}

.tsub{position:absolute;font-weight:500;font-size:16px;line-height:1.43;color:var(--muted)}
.tsub .hl{font-weight:800;font-style:italic;color:var(--text-secondary)}

.thero{position:absolute;border-radius:9.6px;overflow:hidden}
.thero img{position:absolute;max-width:none}

.tproof{position:absolute;border-radius:8.533px;overflow:hidden}
.tproof-v{position:absolute;font-family:'Racing Sans One',cursive;font-weight:400;font-size:20px;line-height:1.25}
.tproof-l{position:absolute;font-weight:700;font-size:12px;line-height:1.25;color:#fff}
.tproof-l .g{color:var(--text-secondary)}
.tproof-l .tight{letter-spacing:-0.96px}
.tproof-l p+p{margin-top:6px}

.twin{position:absolute;border-radius:9.6px}
.twin-t{position:absolute;font-family:'Racing Sans One',cursive;font-weight:400;font-size:20px;line-height:1.25}
.twin-b{position:absolute;font-weight:700;font-size:18.93px;line-height:1.15;color:var(--paper)}
.twin-b .n{font-weight:900;font-size:24px;color:var(--text-secondary);letter-spacing:-0.72px}
.twin-b .xb{font-weight:800;font-size:21px}
.twin-b .b{font-weight:700;font-size:21px}

.tmod{position:absolute;border-radius:8.533px}
.tmod-t{position:absolute;font-weight:700;font-size:10.4px;line-height:1.25;letter-spacing:1.04px;color:var(--green-title);text-transform:uppercase}
.tmod-b{position:absolute;font-weight:500;font-size:10.53px;line-height:1.45;color:var(--paper)}

.tgal-t{position:absolute;font-weight:700;font-size:44px;line-height:1.08;color:var(--paper)}
.tgal-s{position:absolute;font-weight:500;font-size:16px;line-height:1.43;color:var(--muted)}
.tgal-tile{position:absolute;border-radius:9.6px;overflow:hidden}
.tgal-tile img{position:absolute;max-width:none}

.tnext{
  position:absolute;display:block;background:rgba(255,102,0,0.3);
  border-radius:9.6px;box-shadow:var(--shadow-t);
  transition:transform .2s ease, background .2s ease;
}
.tnext:hover{background:rgba(255,102,0,0.42);transform:translateY(-2px)}
.tnext-e{position:absolute;font-weight:700;letter-spacing:1.04px;line-height:1.25;font-size:10.4px}
.tnext-e .lbl{color:var(--brand-primary)}
.tnext-e .nm{color:#fff}
.tnext-t{position:absolute;font-weight:700;font-size:18.93px;line-height:1.15;color:var(--paper)}
.tnext-b{
  position:absolute;background:var(--text-secondary);border-radius:7px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Racing Sans One',cursive;font-size:16px;line-height:normal;color:#000;white-space:nowrap;
}

.tcf{position:absolute;background:rgba(53,255,131,0.17);border-radius:9.6px;box-shadow:var(--shadow-t);overflow:hidden}
.tcf-pitch{position:absolute;left:16px;top:14.93px;width:293.333px;color:var(--paper)}
.tcf-pitch .p1{font-style:italic;font-weight:400;font-size:16px;line-height:normal}
.tcf-pitch .p2{font-weight:700;font-size:16px;line-height:normal;color:var(--text-secondary)}
.tcf-link{position:absolute;font-weight:700;font-size:10.4px;line-height:1.25;letter-spacing:1.04px;color:var(--paper)}
.tcf-link.is-green{color:var(--green-title)}
.tcf-link.is-white{color:#fff}
.tcf-link::before{content:"";position:absolute;left:0;right:0;top:-15px;height:44px}
.tcf-link::after{content:"";position:absolute;left:0;right:0;top:calc(100% + 2px);
  height:2px;background:transparent;transition:background .18s ease}
.tcf-link:hover::after,.tcf-link:focus-visible::after{background:var(--text-secondary)}

.tcopy{position:absolute;font-weight:500;font-size:12px;line-height:1.3;color:var(--blue-soft);white-space:nowrap}

.sr-only-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#35ff83;color:#0e1236;padding:8px 14px;border-radius:6px;font-weight:700;font-size:13px;
}
.sr-only-skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--text-secondary);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion: reduce){*{transition-duration:0ms !important;animation-duration:0ms !important}}