/* =====================================================================
   DESKTOP LAYOUT  (loaded ONLY at >= 1024px: <link media="(min-width:1024px)">)
   ---------------------------------------------------------------------
   The mobile UI is the source of truth and is never touched. This file
   only re-flows the same markup for wide screens:
     - the floating bottom nav becomes a vertical rail on the RIGHT edge
     - the 448px phone column opens up to a wide, centred canvas
     - stacked sections sit side by side (landscape)
   Every selector is prefixed `html body` so it out-ranks Tailwind's
   runtime utilities without touching any markup classes.
   ===================================================================== */

:root{
    --pp-rail: 96px;
    --pp-wrap: 1280px;
}

/* ---------- Shell: phone column -> full width canvas ---------- */
html body[data-pp="rail"] #app{
    max-width:none;
    margin:0;
    padding-right:var(--pp-rail);
    min-height:100vh;
}
html body[data-pp="rail"] #header > header{
    max-width:var(--pp-wrap);
    margin-left:auto;
    margin-right:auto;
    padding:20px 32px;
}
html body[data-pp="rail"] main{
    max-width:var(--pp-wrap);
    margin-left:auto;
    margin-right:auto;
    padding-left:16px;
    padding-right:16px;
    padding-bottom:56px;
}

/* admin + classic customer pages (no #page-home): a readable centred column rather than edge to edge */
html body[data-pp="rail"] #app:not(:has(#page-home)) #header > header,
html body[data-pp="rail"] #app:not(:has(#page-home)) main{
    max-width:1040px;
}

/* tab pages (Cards / History / Profile) read best as a centred column */
html body #page-tab{
    max-width:880px;
    margin-left:auto;
    margin-right:auto;
}

/* ---------- Bottom nav  ->  vertical rail, right-hand side ---------- */
html body nav.fixed.bottom-4{
    top:0; bottom:0; left:auto; right:0;
    width:var(--pp-rail);
    display:block;
}
html body nav.fixed.bottom-4 > div{
    width:100%;
    max-width:none;
    height:100%;
    border-radius:0;
    padding:0 12px;
    display:flex;
    align-items:center;
    box-shadow:-12px 0 32px rgba(15,23,42,.10);
}
html body nav.fixed.bottom-4 #bottomNavGrid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:14px;
    width:100%;
    height:auto;
}
html body nav.fixed.bottom-4 .nav-btn{
    width:100%;
    padding:12px 0;
    border-radius:18px;
    gap:4px;
    transition:background-color .15s ease;
}
html body nav.fixed.bottom-4 .nav-btn:hover{
    background:rgba(255,255,255,.10);
}

/* floating support bubble sits left of the rail */
html body #floatingSupportBtn{
    bottom:28px;
    right:calc(var(--pp-rail) + 24px);
}

/* ---------- Home: two columns ---------- */
html body #page-home{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    column-gap:16px;
    align-items:start;
}
html body #page-home.hidden,
html body #page-tab.hidden{
    display:none;
}
html body #home-main,
html body #home-side{
    min-width:0;
}
/* horizontally-scrolling icon rows wrap instead of scrolling */
html body #services .overflow-x-auto{
    flex-wrap:wrap;
    overflow:visible;
    row-gap:16px;
}

/* ---------- Slide-in pages & full-screen panels -> right-docked drawer ---------- */
html body #fullpage-panel,
html body .fixed.inset-0.w-screen.h-screen.bg-white,
html body #giftcardSuccessPage,
html body #paymentSuccessPage{
    left:auto;
    right:var(--pp-rail);
    width:min(620px, calc(100vw - var(--pp-rail)));
    height:100vh;
}
html body #fullpage-panel{
    transform:translate3d(calc(100% + var(--pp-rail)),0,0);
    -webkit-transform:translate3d(calc(100% + var(--pp-rail)),0,0);
}
html body #fullpage-panel.open{
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
}
html body #fullpage-panel.open,
html body .fixed.inset-0.w-screen.h-screen.bg-white{
    box-shadow:0 0 0 100vmax rgba(15,23,42,.45);
}


/* =====================================================================
   AUTH  (sign in / sign up / recovery / reset / verify)
   Phone: header block on top, form below.  Desktop: split screen.
   ===================================================================== */
html body[data-pp="auth"] > div.min-h-screen.flex.flex-col{
    flex-direction:row;
}
html body[data-pp="auth"] > div.min-h-screen > div.bg-gray-100{
    flex:0 0 46%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:64px 72px;
}
html body[data-pp="auth"] > div.min-h-screen > div.bg-gray-100 > div:first-child{
    position:absolute;
    top:32px;
    left:40px;
    margin:0;
}
html body[data-pp="auth"] > div.min-h-screen > div.bg-gray-100 h1{
    font-size:40px;
    line-height:1.1;
    letter-spacing:-.02em;
}
html body[data-pp="auth"] > div.min-h-screen > div.bg-gray-100 p{
    font-size:16px;
    margin-top:12px;
    max-width:380px;
}
html body[data-pp="auth"] > div.min-h-screen > div.flex-1{
    flex:1 1 0;
    min-width:0;
    align-items:center;
    justify-content:center;
    padding:48px 40px;
}
html body[data-pp="auth"] > div.min-h-screen > div.flex-1 > *{
    width:100%;
    max-width:440px;
    flex:0 0 auto;
}

/* =====================================================================
   CENTRED SHELLS  (installer + classic guest pages): the phone column
   becomes a centred card instead of stretching edge to edge.
   ===================================================================== */
html body[data-pp="center"] #app{
    max-width:560px;
    margin:48px auto;
    min-height:0;
    border-radius:28px;
    box-shadow:0 20px 60px rgba(15,23,42,.10);
}

/* =====================================================================
   LANDING PAGE
   Phone: single centred column, hamburger menu, stacked scroll cards.
   Desktop: inline nav links, two-column hero, card grid, multi-column
   steps / FAQ / footer.
   ===================================================================== */

/* ---- Navbar: hamburger -> inline links ---- */
html body[data-pp="landing"] #navbar > header{
    padding:14px max(32px, calc((100% - 1180px) / 2 + 32px));
}
html body[data-pp="landing"] #navbar button[aria-label="Open menu"]{
    display:none;
}
html body[data-pp="landing"] #zecc-menu{
    inset:auto;
    top:0;
    left:auto;
    right:max(32px, calc((100vw - 1180px) / 2 + 32px));
    bottom:auto;
    width:auto;
    height:61px;
    display:flex;
    align-items:center;
    visibility:visible !important;
    opacity:1 !important;
    background:transparent !important;
}
html body[data-pp="landing"] #zecc-menu > div{
    min-height:0;
    flex-direction:row;
    align-items:center;
}
html body[data-pp="landing"] #zecc-menu > div > div:first-child{
    display:none;
}
html body[data-pp="landing"] #zecc-menu nav{
    display:flex;
    align-items:center;
    gap:30px;
    padding:0;
}
html body[data-pp="landing"] #zecc-menu nav a{
    width:auto;
    padding:0;
    font-size:14px;
    line-height:1.2;
}
html body[data-pp="landing"] #zecc-menu nav a:last-child{
    margin:0 0 0 8px;
    padding:11px 22px;
    border-radius:9999px;
}

/* ---- Hero: text left, phone right ---- */
html body[data-pp="landing"] #hero > div{
    padding-left:32px;
    padding-right:32px;
    padding-top:72px;
    text-align:left;
}
html body[data-pp="landing"] #hero > div > div.relative{
    max-width:1180px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    grid-template-rows:1fr auto auto auto 1fr;
    column-gap:64px;
    align-items:start;
}
html body[data-pp="landing"] #hero h1{
    grid-column:1; grid-row:2;
    font-size:60px;
    line-height:1.06;
}
html body[data-pp="landing"] #hero p{
    grid-column:1; grid-row:3;
    font-size:18px;
    line-height:1.65;
    max-width:520px;
    margin-top:20px;
}
html body[data-pp="landing"] #hero > div > div.relative > div.flex:not(:last-child){
    grid-column:1; grid-row:4;
    justify-content:flex-start;
    margin-top:32px;
}
html body[data-pp="landing"] #hero > div > div.relative > div.flex:last-child{
    grid-column:2; grid-row:1 / span 5;
    align-self:end;
    margin-top:0;
}
html body[data-pp="landing"] #hero img{
    max-width:340px;
}

/* ---- Section headings a touch larger ---- */
html body[data-pp="landing"] #stats h2,
html body[data-pp="landing"] #cta h2,
html body[data-pp="landing"] #faq h2,
html body[data-pp="landing"] #services .landing-container h2{
    font-size:38px;
}
html body[data-pp="landing"] #stats > div,
html body[data-pp="landing"] #cta > div,
html body[data-pp="landing"] #faq > div,
html body[data-pp="landing"] #services > div:first-of-type{
    padding-top:72px;
}

/* ---- Services: pinned stack -> 2x2 grid (JS inline styles beaten with !important) ---- */
html body[data-pp="landing"] #services{
    height:auto !important;
}
html body[data-pp="landing"] #services .services-sticky{
    position:static;
    height:auto !important;
    min-height:0;
    overflow:visible;
    display:block;
    max-width:1180px;
    margin:0 auto;
    padding:32px 32px 24px;
}
html body[data-pp="landing"] #services .service-stack{
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
/* the services markup has a stray, unclosed <div> wrapping the first card; flatten it so all four cards are grid items */
html body[data-pp="landing"] #services .service-stack > div{
    display:contents !important;
}
html body[data-pp="landing"] #services .service-card{
    position:relative;
    inset:auto;
    height:auto;
    padding:0;
    opacity:1 !important;
    transform:none !important;
}
html body[data-pp="landing"] #services .service-card-inner{
    height:400px !important;
    max-width:none;
    border-radius:28px;
}
html body[data-pp="landing"] #services .service-card-content{
    padding:32px;
}

/* ---- Steps: four across ---- */
html body[data-pp="landing"] #cta .landing-container > div.flex.flex-col{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:32px;
    margin-top:40px;
}

/* ---- FAQ: two columns ---- */
html body[data-pp="landing"] #faq .landing-container > div.flex.flex-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start;
    margin-top:36px;
}

/* ---- Closing call-to-action: text left, phone right ---- */
html body[data-pp="landing"] #cta-footer > div{
    padding-left:32px;
    padding-right:32px;
    padding-top:72px;
    text-align:left;
}
html body[data-pp="landing"] #cta-footer .landing-container{
    padding-left:64px;
    padding-right:64px;
    padding-top:56px;
}
html body[data-pp="landing"] #cta-footer .landing-container > div.relative{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    grid-template-rows:1fr auto auto auto 1fr;
    column-gap:48px;
    align-items:start;
}
html body[data-pp="landing"] #cta-footer h2{
    grid-column:1; grid-row:2;
    font-size:44px;
}
html body[data-pp="landing"] #cta-footer p{
    grid-column:1; grid-row:3;
    font-size:17px;
    max-width:480px;
}
html body[data-pp="landing"] #cta-footer .landing-container > div.relative > div.flex.items-center{
    grid-column:1; grid-row:4;
    justify-content:flex-start;
}
html body[data-pp="landing"] #cta-footer .landing-container > div.relative > div.flex:last-child{
    grid-column:2; grid-row:1 / span 5;
    align-self:end;
    margin-top:0;
}

/* ---- Footer: columns ---- */
html body[data-pp="landing"] #footer > footer,
html body[data-pp="landing"] footer#footer{
    padding-left:32px;
    padding-right:32px;
}
html body[data-pp="landing"] #footer > footer > div{
    max-width:1180px;
    display:grid;
    grid-template-columns:1.2fr 1.5fr 1.2fr;
    grid-template-rows:auto auto auto 1fr;
    column-gap:64px;
    align-items:start;
}
html body[data-pp="landing"] #footer > footer > div > *{
    grid-column:1 / -1;
}
html body[data-pp="landing"] #footer > footer > div > a:first-child,
html body[data-pp="landing"] #footer > footer > div > p:nth-of-type(1),
html body[data-pp="landing"] #footer > footer > div > p:nth-of-type(2),
html body[data-pp="landing"] #footer > footer > div > div:nth-child(4){
    grid-column:1;
}
html body[data-pp="landing"] #footer > footer > div > div.grid{
    grid-column:2;
    grid-row:1 / span 4;
    margin-top:0;
}
html body[data-pp="landing"] #footer > footer > div > div.grid + div{
    grid-column:3;
    grid-row:1 / span 4;
    margin-top:0;
}

/* the oversized decorative logo at the very bottom: cap its height */
html body[data-pp="landing"] #footer > footer > div > div:last-child{
    max-height:220px;
}