/* ============================================================================
 * declare-parcel.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Loads only via the media-gated <link> and applies only beside the AppShell
 * sidebar (body.ptshell). MOBILE Source-of-Truth (declare-parcel.css) is never
 * touched — phone view stays byte-equal. Direction ref = account-hub.css:
 * neutral canvas (#F4F5F7); the in-body branded header (shell provides its own
 * topbar) is hidden; the dark coffee hero + its feature/price tiles become light
 * white cards; content goes 2-column (form beside an info rail). Accent stays the
 * page's own ORANGE (--sun / --sun-deep) — used sparingly.
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}
  /* in-body branded topbar → replaced by the shell topbar/sidebar on desktop */
  body.ptshell header{display:none}

  /* content: the declare FORM leads on the left (sticky), the why/benefits/history/
     contact stack as an info rail on the right */
  body.ptshell main.page{max-width:1180px;margin-inline:auto;padding:14px 24px 48px;
    display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:18px 24px;align-items:start}
  body.ptshell main.page>*{grid-column:2;margin:0}
  body.ptshell main.page>.card:first-child{grid-column:1;grid-row:1/span 20;position:sticky;top:96px;align-self:start}
  body.ptshell main.page>.btn.ghost{justify-self:stretch;width:auto}

  /* --- dark coffee hero → light-2026 white card --- */
  body.ptshell .hero{max-width:1180px;margin:16px 24px 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 h1{color:var(--ink)}
  body.ptshell .hero .en{color:var(--ink-2)}
  body.ptshell .hero p{color:var(--ink-2)}
  body.ptshell .hero .hicon{box-shadow:0 14px 24px -12px rgba(239,95,6,.45)}
  body.ptshell .hero .hicon .db{border-color:#fff}
  /* hero feature tiles → light surfaces (were translucent-on-dark) */
  body.ptshell .hfeat{background:#F7F8FA;border-color:#EEE7DF}
  body.ptshell .hfeat b{color:var(--ink)}
  body.ptshell .hfeat span{color:var(--muted)}
  body.ptshell .hprice{background:linear-gradient(100deg,#FFF3EA,#FFF8F3);border-color:#FFD8BE}
  body.ptshell .hprice .hp-l{color:var(--muted)}
  body.ptshell .hprice .hp-v{color:var(--ink)}
  body.ptshell .hprice .hp-v small{color:var(--muted)}

  /* --- cards: hairline + soft shadow --- */
  body.ptshell .card{border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}

  /* --- inputs light-2026: soft fill + orange focus ring --- */
  body.ptshell .field input,body.ptshell .field select{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .field input:focus,body.ptshell .field select:focus{background:#fff;border-color:var(--sun-deep);box-shadow:0 0 0 3px rgba(242,86,11,.12)}

  /* --- 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}
}

/* wider column beside the expanded sidebar */
@media (min-width:1280px){
  body.ptshell main.page,body.ptshell .hero{max-width:1240px}
}