/* ============================================================================
 * import-rate.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Loads only via the media-gated <link> and only applies beside the AppShell
 * sidebar (body.ptshell). MOBILE Source-of-Truth (import-rate.css) is untouched
 * — phone view stays byte-equal. Dark coffee hero → white light-2026 card;
 * 2-column content grid (rate table WIDE on top with level tables 2×2, then
 * how-to-calc | example side-by-side via `order`, CTA + contact full-width);
 * dark contact strip → light card. Accent stays the page's own orange (--sun).
 * Rate figures are demo/local — see BACKEND GAP in import-rate.js.
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}

  /* --- dark hero (body-level sibling) → centred light-2026 white card --- */
  body.ptshell .hero{max-width:1080px;margin:12px auto 0;border-radius:20px;padding:26px 30px;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{display:none}
  body.ptshell .hero .xblob{display:none}
  body.ptshell .hero .hicon .db{border-color:#fff}
  body.ptshell .hero .eyebrow{background:#FFF3EA;border-color:#FFD8BE;color:var(--sun-deep)}
  body.ptshell .hero h1{color:var(--ink)}
  body.ptshell .hero .en{color:var(--muted)}
  body.ptshell .hero p{color:var(--ink-2)}
  /* feature chips → light on white */
  body.ptshell .hfeat{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .hfeat b{color:var(--ink)}
  /* price strip → light tinted */
  body.ptshell .hprice{background:linear-gradient(100deg,#FFF3EA,#FFF8F3);border-color:#FFD8BE}
  body.ptshell .hprice .hp-l{color:var(--ink-2)}
  body.ptshell .hprice .hp-v{color:var(--ink)}
  body.ptshell .hprice .hp-v small{color:var(--muted)}
  body.ptshell .hprice .hp-badge{background:var(--leaf)}

  /* --- content column + 2-col grid (DOM order kept; visual order via `order`) --- */
  body.ptshell main.page{max-width:1080px;margin-inline:auto;padding:20px 0 0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  body.ptshell main.page>.card{margin-top:0;border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
  body.ptshell main.page>.card:nth-of-type(1){grid-column:1/-1}   /* rate table — wide */
  body.ptshell main.page>.card:nth-of-type(2){order:1}            /* how-to-calc */
  body.ptshell main.page>.card:nth-of-type(3){order:2}            /* worked example */
  body.ptshell main.page>.btn{order:3;grid-column:1/-1;width:auto;justify-self:start;margin-top:0;padding-left:30px;padding-right:30px}
  body.ptshell main.page>.ctstrip{order:4;grid-column:1/-1;margin-top:0}

  /* rate level tables 2×2 inside the wide card */
  body.ptshell #rateBody{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  body.ptshell #rateBody .lvl{margin-bottom:0}

  /* dark contact strip → light card (no dark backgrounds on desktop) */
  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)}
}