/* ============================================================================
 * shipping-channels.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Media-gated; applies only beside the AppShell (body.ptshell). MOBILE SoT
 * (shipping-channels.css) untouched — phone view byte-equal. Neutral canvas
 * (#F4F5F7); in-body branded header hidden (shell topbar replaces it); the dark
 * coffee hero → light white card; the two channel cards (.cmpcard in .grid2)
 * stay a responsive 2-up grid; content 2-column (compare + schedule left, the two
 * CTAs + contact rail right). Accent stays the page's own ORANGE (--sun /
 * --sun-deep) — used sparingly.
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}
  body.ptshell header{display:none}

  body.ptshell main.page{max-width:1180px;margin-inline:auto;padding:10px 24px 44px;
    display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px 22px;align-items:start}
  body.ptshell main.page>*{grid-column:1}
  body.ptshell main.page>.btn,body.ptshell main.page>.ctstrip{grid-column:2}

  /* --- dark coffee hero → light-2026 white card --- */
  body.ptshell .hero{max-width:1180px;margin:16px auto 0;padding:28px 30px;border-radius:20px;color:var(--ink);
    background:#fff;border:1px solid #E8EAEF;box-shadow:0 22px 48px -30px rgba(20,25,35,.28)}
  body.ptshell .hero::before,body.ptshell .hero::after,body.ptshell .hero .xblob{display:none}
  body.ptshell .hero .eyebrow{background:#FFF3EA;border-color:#FFD8BE;color:var(--sun-deep)}
  body.ptshell .hero .eyebrow svg{color:var(--sun-deep)}
  body.ptshell .hero h1{color:var(--ink)}
  body.ptshell .hero p{color:var(--ink-2)}
  body.ptshell .hero .hbadge{box-shadow:0 14px 22px -12px rgba(239,95,6,.4)}

  /* --- cards: hairline + soft shadow --- */
  body.ptshell .card{border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
  /* channel compare cards: keep 2-up, add hover affordance */
  body.ptshell .grid2{gap:14px}
  body.ptshell .cmpcard{transition:transform .14s ease,box-shadow .14s ease}
  body.ptshell .cmpcard:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(20,25,35,.3)}

  /* CTAs live in the right rail */
  body.ptshell main.page>.btn{margin-top:0}
  body.ptshell main.page>.btn+.btn{margin-top:12px}

  /* --- dark contact strip → light card (right rail) --- */
  body.ptshell .ctstrip{background:#fff;border:1px solid #E8EAEF;color:var(--ink);box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
  body.ptshell .ctstrip .ci{background:#FFF3EA;color:var(--sun-deep)}
  body.ptshell .ctstrip b{color:var(--ink)}
  body.ptshell .ctstrip span{color:var(--ink-2)}
  body.ptshell .ctstrip a{background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff}
}

@media (min-width:1280px){
  body.ptshell main.page,body.ptshell .hero{max-width:1240px}
}

@media (min-width:768px){ html body.ptshell main.page{ padding-left:0 !important; padding-right:0 !important; } } /* hero==content: fill grid to hero width */