/* ============================================================
   TDOT.CSS
   Page-specific styles for the TDOT case study.
   Requires: tokens.css, base.css, case-study.css
   ============================================================ */

/* ── PLATFORM GRID ── */

.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);margin:32px 0}
.platform-cell{background:var(--white);padding:28px 24px}
.platform-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--d30);margin-bottom:10px}
.platform-name{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-0.01em;color:var(--black);margin-bottom:6px;line-height:1.1}
.platform-years{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;color:var(--d30);margin-bottom:12px}
.platform-desc{font-family:var(--sans);font-size:12px;font-weight:300;color:var(--d70);line-height:1.65}
.platform-users{font-family:var(--mono);font-size:9px;letter-spacing:0.08em;color:var(--d50);margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}


/* ── CONNECTOR ── */

.system-connector{max-width:850px;margin:0 auto;padding:0 48px 32px;display:flex;align-items:center;gap:12px}
.connector-line{flex:1;height:1px;background:var(--rule)}
.connector-label{font-family:var(--mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--d30);white-space:nowrap}


/* ── STACKED IPHONE PAIR — constrain backlight to phone width ── */

@media(min-width:561px) and (max-width:860px){
  .frame-pair--phones .frame-entry {
    /* Shrink frame-entry to match iphone-wrap so ::before is scoped to it */
    width: 100%;
    max-width: 260px;
  }
}



/* ── DWR WORKSHEET PAIR — tablet sizing ── */
.dell-wrap--pair { width: 220px; max-width: 100%; }

@media(max-width:560px){
  .platform-grid{grid-template-columns:1fr}
}