/* ============================================================
   Magic Cards — Responsive Foundation
   Breakpoints: mobile <=767 | tablet 768-1199 | desktop >=1200
   RTL-safe: uses logical properties only.

   STATUS: Linked into the approved public-page responsive retrofit.

   DESKTOP-SAFE CONTRACT:
   - The base layer (no media query) must not change >=1200 rendering.
   - Shared layout rules are gated to <=1199px or <=767px.
   - Page-specific desktop fixes are allowed only when measured overflow
     proves the existing desktop page already leaks horizontally.
   - This file intentionally does NOT style `.wrap` (it is polymorphic
     in the existing pages) and uses `.mc-actions` (not `.actions`,
     which already exists in account.html / order-failed.html).
   ============================================================ */

:root{
  --bp-mobile-max: 767px;
  --bp-tablet-max: 1199px;
  --bp-desktop-min: 1200px;
  --wrap-pad-mobile: 18px;
}

/* ---------- 7A. BASE LAYER (desktop-inert only) ---------- */

/* page can never exceed the screen; no desktop effect */
html, body{ max-width:100%; }

/* Everything that could shift desktop layout is gated below 1200. */
@media (max-width:1199px){
  *{ min-width:0; }                 /* let grid/flex children shrink instead of overflowing */
  img, video, svg, canvas{ max-width:100%; height:auto; }
}

/* generic grid utilities — OPT-IN only (must be added to a section deliberately;
   cannot affect existing markup that does not use these classes) */
.grid{ display:grid; gap:22px; }
.col-2{ grid-template-columns:repeat(2,1fr); }
.col-3{ grid-template-columns:repeat(3,1fr); }
.col-4{ grid-template-columns:repeat(4,1fr); }
.col-5{ grid-template-columns:repeat(5,1fr); }

/* action groups stack and go full-width on mobile (opt-in class).
   Named .mc-actions, NOT .actions — `.actions` already exists in
   pages/account.html and pages/order-failed.html. */
@media (max-width:767px){
  .mc-actions{ display:flex; flex-direction:column; gap:12px; }
  .mc-actions > *{ width:100%; }
}

/* intentional scroll containers (use instead of overflow-x:hidden band-aids) */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- 7A-bis. VISIBILITY UTILITIES (all four states) ---------- */
/* Assume block-level elements; set a different display alongside if needed.
   Matrix:
     .desktop-only     shown / hidden / hidden
     .tablet-up-only   shown / shown  / hidden
     .not-desktop-only hidden/ shown  / shown
     .mobile-only      hidden/ hidden / shown   (desktop / tablet / mobile)  */

/* BASE = desktop (>=1200) */
.desktop-only    { display:block; }
.not-desktop-only{ display:none;  }
.tablet-up-only  { display:block; }
.mobile-only     { display:none;  }

@media (max-width:1199px){            /* tablet and below */
  .desktop-only    { display:none;  }
  .not-desktop-only{ display:block; }
  .tablet-up-only  { display:block; }
  .mobile-only     { display:none;  }
}

@media (max-width:767px){             /* mobile only */
  .tablet-up-only  { display:none;  }
  .mobile-only     { display:block; }
}

/* ---------- 7B. HEADING TIERS + DECORATIVE TYPE POLICY ---------- */
/* Recurring heading tiers. Fixed per-breakpoint sizes, no vw scaling.
   Values are safe starting points; tune per page from screenshots. */
@media (max-width:1199px){   /* tablet */
  .hero h1{ font-size:60px; }
  .statement h2, .atb-h2, .aud-h2, .problem h2{ font-size:46px; }
}
@media (max-width:767px){    /* mobile */
  .hero h1{ font-size:40px; letter-spacing:-.02em; }
  .statement h2, .atb-h2, .aud-h2, .problem h2{ font-size:32px; }
}

/* Decorative oversized pseudo-elements (120-300px giant numerals/letters)
   are decoration, not headings — shrink so they never force horizontal scroll.
   If one still overlaps content on a page, hide it in that page's overrides. */
@media (max-width:767px){
  .b-hero::before{ font-size:120px; }
  .b-hero::after,
  .b-script::before,
  .auth-art-side::before,
  .auth-art-side::after{ font-size:96px; }
}

/* ---------- 7C. CARD AND FORM SAFETY ---------- */
/* form rows stack on mobile, inputs full width */
@media (max-width:767px){
  .acc-form-row,
  .pay-grid{ grid-template-columns:1fr; }
  input, select, textarea, .field{ width:100%; }
}

/* ---------- Phase 2+ public-page responsive layer ---------- */

.nav-toggle{ display:none; }

/* Home page marquee is intentionally full-bleed. Use viewport math instead
   of negative margins so it keeps the same band behavior without creating
   document-level horizontal overflow. */
.marquee{
  box-sizing:border-box;
  width:100vw !important;
  max-width:100vw;
  margin-inline:calc(50% - 50vw) !important;
}

@media (max-width:1199px){
  .wrap,
  .aud .wrap,
  .atb .wrap,
  .b-final-inner,
  .checkout-grid,
  .kits-grid,
  .acc-grid{
    padding-inline:24px;
  }

  .site-header{ position:relative; z-index:50; }
  .util-row{
    flex-wrap:nowrap;
    gap:12px;
    padding:12px 18px;
  }
  .util-row .brand img{
    width:88px;
    height:88px;
    margin-bottom:-12px;
  }
  .util-row .brand .tagline{ font-size:12px; }
  .util-promo{ display:none; }
  .util-tools{ gap:10px; margin-inline-start:auto; }
  .util-tools .util-item{ gap:8px; }
  .util-tools .util-item .ico{
    width:38px;
    height:38px;
  }

  .nav-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:10px;
    border:2px solid var(--ink);
    border-radius:12px;
    background:var(--paper);
    box-shadow:2px 2px 0 var(--ink);
    cursor:pointer;
    flex-shrink:0;
  }
  .nav-toggle span{
    display:block;
    height:3px;
    border-radius:999px;
    background:var(--ink);
  }

  .menu-row{ display:none; }
  .menu-row.is-open{
    display:block;
    border-top:2px solid var(--ink);
  }
  .menu-inner{
    padding:12px 18px 16px;
    display:block;
  }
  .menu-list{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    width:100%;
    gap:2px;
    padding-top:0;
  }
  .menu-list a,
  .menu-list a.two-line{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 10px;
    border-bottom:0;
    white-space:normal;
    text-align:center;
  }
  .menu-list .featured a{
    margin:6px auto;
    width:min(100%, 320px);
  }

  .hero-grid,
  .p-hero-wrap,
  .e-hero-wrap,
  .p-strip-inner,
  .story-grid,
  .cta-final .wrap,
  .checkout-grid,
  .acc-grid,
  .auth-layout,
  .e-anat-grid,
  .e-founder-grid,
  .b-founder-grid{
    grid-template-columns:1fr;
  }

  .hero-grid,
  .p-hero-wrap,
  .e-hero-wrap,
  .story-grid,
  .cta-final .wrap{
    gap:40px;
    text-align:center;
    justify-items:center;
  }

  .hero p.lead,
  .p-sub,
  .e-sub,
  .s-hero p.lead,
  .page-hero p.lead,
  .t-hero p.lead,
  .b-sub{
    margin-inline:auto;
  }

  .pile{
    width:min(100%, 600px);
    margin-inline:auto;
  }

  .b-founder-photo,
  .e-founder-photo{
    width:min(100%, 520px);
    max-width:calc(100% - 28px);
    margin-inline:auto;
    justify-self:center;
  }

  .blobs,
  .steps,
  .benefit-grid,
  .tests-grid,
  .p-get-grid,
  .p-box-grid,
  .p-guarantee-grid,
  .e-pain-grid,
  .e-out-grid,
  .e-steps,
  .e-cont-grid,
  .e-who-list,
  .pillars,
  .stats-grid,
  .ts,
  .b-clock-grid,
  .b-pain-grid,
  .b-pillars,
  .b-plug-grid,
  .item-grid,
  .tips-grid,
  .art-grid,
  .ns-grid,
  .shortcuts{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .aud-card-row,
  .b-founder-grid,
  .e-founder-grid,
  .e-anat-grid,
  .p-out-row,
  .p-strip-inner,
  .checkout-grid,
  .acc-grid,
  .auth-layout{
    grid-template-columns:1fr;
  }

  .hero h1,
  .p-title,
  .e-title,
  .s-hero h1,
  .page-hero h1,
  .t-hero h1,
  .b-title{
    font-size:60px;
    line-height:1;
  }

  .statement h2,
  .problem h2,
  .aud-h2,
  .atb-h2,
  .p-who h2,
  .p-get h2,
  .p-box h2,
  .p-guarantee .head h3,
  .story h2,
  .mission .head h2,
  .timeline h2,
  .cta-block h2,
  .b-time h2,
  .b-pain h2,
  .b-model h2,
  .b-questions h2,
  .b-script h2,
  .b-plug h2,
  .b-founder h2,
  .b-final h2,
  .e-pain h2,
  .e-out-head h2,
  .e-how .head h2,
  .e-anatomy h2,
  .e-contents h2,
  .e-who h2,
  .p-out-head h2,
  .p-who-head h2,
  .faq h2,
  .cta-final h2{
    font-size:44px;
    line-height:1.05;
  }
}

@media (max-width:767px){
  .wrap,
  .aud .wrap,
  .atb .wrap,
  .b-final-inner,
  .checkout-grid,
  .kits-grid,
  .acc-grid{
    padding-inline:var(--wrap-pad-mobile);
  }

  .util-row{
    padding:10px 14px;
    gap:8px;
  }
  .util-row .brand img{
    width:72px;
    height:72px;
    margin-bottom:-8px;
  }
  .util-row .brand .tagline{
    font-size:10px;
    max-width:86px;
    white-space:normal;
    text-align:center;
  }
  .util-tools .util-item .lbl,
  .util-tools .util-item > span:not(.ico){
    display:none;
  }
  .util-tools .util-item .ico{
    width:36px;
    height:36px;
  }
  .nav-toggle{
    width:42px;
    height:42px;
    padding:9px;
  }

  .ch-header,
  .checkout-header{
    padding-block:12px;
  }
  .ch-header .wrap,
  .checkout-header .wrap{
    gap:12px;
    padding-inline:18px;
    flex-wrap:nowrap;
  }
  .ch-header .brand,
  .checkout-header .brand{
    gap:8px;
    min-width:0;
    flex-shrink:0;
  }
  .ch-header .brand img,
  .checkout-header .brand img{
    width:52px;
    height:52px;
  }
  .ch-header .brand strong,
  .checkout-header .brand strong{
    font-size:18px;
  }
  .ch-header .brand small,
  .checkout-header .brand small{
    font-size:11px;
  }
  .ch-header .user{
    gap:8px;
    min-width:0;
    justify-content:flex-start;
  }
  .ch-header .user > div:not(.avatar){
    min-width:0;
  }
  .ch-header .user > div:not(.avatar) > div{
    max-width:96px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ch-header .user > div:not(.avatar) > div:nth-child(2){
    display:none;
  }
  .ch-header .avatar{
    width:40px;
    height:40px;
    font-size:16px;
    flex-shrink:0;
  }
  .ch-header .logout{
    padding:7px 10px;
    font-size:12px;
    flex-shrink:0;
  }

  .hero,
  .statement,
  .problem,
  .aud,
  .atb,
  .p-hero,
  .e-hero,
  .s-hero,
  .page-hero,
  .b-hero,
  .t-hero,
  .benefits,
  .tests,
  .price-teaser,
  .faq,
  .p-who,
  .p-outcomes,
  .e-pain,
  .e-outcomes,
  .e-how,
  .e-anatomy,
  .e-contents,
  .e-who,
  .e-price,
  .e-founder,
  .p-strip,
  .p-get,
  .p-box,
  .p-price,
  .p-guarantee,
  .story,
  .mission,
  .stats,
  .timeline,
  .cta-block,
  .b-time,
  .b-pain,
  .b-model,
  .b-questions,
  .b-script,
  .b-plug,
  .b-founder,
  .b-final,
  .kits,
  .upsell,
  .c-hero,
  .succ-hero,
  .fail-hero{
    padding-block:42px;
  }

  .hero-grid,
  .p-hero-wrap,
  .e-hero-wrap{
    gap:28px;
  }

  .hero .hero-grid > div:first-child > div:first-child{
    justify-content:center;
    flex-wrap:wrap;
  }

  .hero h1,
  .p-title,
  .e-title,
  .s-hero h1,
  .page-hero h1,
  .t-hero h1,
  .b-title,
  .c-hero h1,
  .succ-hero h1,
  .fail-hero h1,
  .acc-hero h1,
  .hero h1{
    font-size:40px;
    line-height:1.05;
    letter-spacing:-.02em;
  }

  .statement h2,
  .problem h2,
  .aud-h2,
  .atb-h2,
  .p-who h2,
  .p-get h2,
  .p-box h2,
  .p-guarantee .head h3,
  .story h2,
  .mission .head h2,
  .timeline h2,
  .cta-block h2,
  .b-time h2,
  .b-pain h2,
  .b-model h2,
  .b-questions h2,
  .b-script h2,
  .b-plug h2,
  .b-founder h2,
  .b-final h2,
  .e-pain h2,
  .e-out-head h2,
  .e-how .head h2,
  .e-anatomy h2,
  .e-contents h2,
  .e-who h2,
  .p-out-head h2,
  .p-who-head h2,
  .faq h2,
  .cta-final h2,
  .pt-card h2{
    font-size:34px;
    line-height:1.08;
    letter-spacing:-.02em;
  }

  .hero p.lead,
  .statement p.sub,
  .problem .sub,
  .aud-lead,
  .atb-lead,
  .p-sub,
  .e-sub,
  .s-hero p.lead,
  .page-hero p.lead,
  .t-hero p.lead,
  .b-sub,
  .c-hero p,
  .succ-hero p.lead,
  .fail-hero p.lead{
    font-size:17px;
    line-height:1.55;
    max-width:100%;
  }

  .btn,
  .aud-cta,
  .atb-cta,
  .p-cta-main,
  .e-cta-main,
  .next-btn,
  .submit-btn{
    width:100%;
    justify-content:center;
    text-align:center;
    padding-inline:18px;
  }

  .pile{
    position:relative;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding-block:8px;
    width:100%;
  }
  .pile .stk{
    position:static;
    inset:auto;
    width:min(78vw, 300px);
    height:auto;
    aspect-ratio:3 / 4;
  }
  .pile .s1{ transform:rotate(2deg); }
  .pile .s2{ transform:rotate(-2deg); }
  .pile .s3{ transform:rotate(1.5deg); }
  .badge-float.bf1{
    position:relative;
    inset:auto;
    margin-inline:auto;
    margin-block-end:4px;
  }

  .marquee{
    width:100% !important;
    margin-inline:0 !important;
    transform:rotate(-1deg);
  }
  .marquee-track{
    font-size:15px;
    gap:34px;
  }
  .marquee-track span{ gap:34px; }

  .blobs,
  .steps,
  .benefit-grid,
  .tests-grid,
  .p-get-grid,
  .p-box-grid,
  .p-guarantee-grid,
  .e-pain-grid,
  .e-out-grid,
  .e-steps,
  .e-cont-grid,
  .e-who-list,
  .pillars,
  .stats-grid,
  .ts,
  .b-clock-grid,
  .b-pain-grid,
  .b-pillars,
  .b-plug-grid,
  .item-grid,
  .tips-grid,
  .art-grid,
  .ns-grid,
  .shortcuts,
  .p-who-list,
  .kits-grid,
  .pay-grid,
  .form-row.cols-2,
  .form-row.cols-3,
  .field-row{
    grid-template-columns:1fr;
  }

  .trust-card,
  .order-row,
  .order-line,
  .order-item,
  .upsell-card,
  .b-q-item,
  .reasons-list li,
  .p-out-row{
    grid-template-columns:1fr;
    text-align:start;
  }

  .aud-card,
  .atb-card,
  .trust-card,
  .pt-card,
  .e-price-card,
  .p-price-card,
  .confirm-card,
  .reasons-card,
  .auth-form{
    padding:24px 20px;
    border-radius:22px;
    box-shadow:5px 5px 0 var(--ink);
  }
  .atb-card{ box-shadow:5px 5px 0 var(--yellow); }

  .aud-photo,
  .p-polaroid,
  .e-polaroid,
  .b-founder-photo,
  .e-founder-photo{
    max-width:320px;
    margin-inline:auto;
  }
  .p-polaroid-photo,
  .e-polaroid-photo{
    font-size:82px;
  }

  .p-price-now,
  .e-price-now{
    font-size:58px;
  }

  .checkout-grid{
    padding-inline:18px;
  }
  .progress-step span{
    font-size:11px;
  }
  .progress-bar{
    gap:8px;
  }
  .progress-line{
    max-width:28px;
  }
  .next-bar .wrap{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .acc-stats{
    gap:10px;
  }
  .acc-stat{
    min-width:calc(50% - 8px);
  }
  .acc-nav ul{
    display:grid;
    grid-template-columns:1fr;
  }
  .order-row .thumb,
  .order-item .thumb,
  .order-line .thumb{
    margin-inline:auto;
  }
  .order-row .price,
  .order-item .price{
    text-align:start;
  }

  .auth-art-side{
    min-height:220px;
  }
  .auth-art-side::before,
  .auth-art-side::after{
    font-size:96px;
  }
  .auth-form{
    width:calc(100% - 36px);
    max-width:440px;
  }

  .b-hero::before,
  .b-hero::after,
  .b-script::before,
  .page-hero::before,
  .page-hero::after,
  .cta-block::before,
  .cta-block::after,
  .s-hero::before,
  .s-hero::after,
  .t-hero::before,
  .t-hero::after,
  .cta-final::before,
  .cta-final::after{
    font-size:72px;
    opacity:.22;
  }

  .a11y{
    bottom:14px;
    left:14px;
    padding:9px 12px;
    font-size:12px;
  }
}