/* ==========================================================================
   ORANGE ZEN — page bodies. ONE sheet for this whitelabel, not one per page.
   ==========================================================================

   Hoisted from the design exports' inline styles; declarations are the export's
   own, and only the `:hover` rules are added, because the export's
   `style-hover` attribute has no inline equivalent.

   THIS WAS TWO FILES. `faq.css` and `landing.css` each carried the whole design
   base AND its own copy of the header, the page-title band and the footer under
   separate generated names — so this partner alone declared its chrome four
   times. The chrome is now `../../orange/css/brand.css` (one file for both
   Orange whitelabels) and the global element rules are `../../orange/css/base.css`;
   what is left here is only what is genuinely this partner's page BODY.

   The two prefixes are the two page templates and they never collide, which is
   why one sheet serves both surfaces.
   ========================================================================== */

/* --- landing ------------------------------------------------------------- */
.zen-landing-1 { background:#f6f9fa; }
.zen-landing-11 { background:#f6f9fa; }
.zen-landing-12 { position:relative; }
.zen-landing-13 { display:flex;min-height:500px; }
.zen-landing-14 { width:50%;background:#000; }
.zen-landing-15 { width:50%;background:#ff7900;background-image:url(/assets/sites/partners/img/U300833-md.jpg);background-position:right top;background-size:cover;background-repeat:no-repeat; }
.zen-landing-16 { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;max-width:1140px;padding:0 15px; }
.zen-landing-17 { width:50%;padding-right:15px;color:#fff; }
.zen-landing-18 { font-size:3em;margin-bottom:.5rem; }
.zen-landing-19 { color:#ff7900; }
.zen-landing-20 { font-size:1.75rem;margin-bottom:1rem; }
.zen-landing-21 { position:relative;top:-.5em;font-size:75%; }
.zen-landing-22 { display:flex;gap:.5rem;flex-wrap:wrap; }
.zen-landing-23 { display:inline-block;border:3px solid #fff;background:#fff;color:#000;padding:.375rem 1rem;font-size:1.2em;line-height:1.5;border-radius:0; }
.zen-landing-23:hover { background:#000;border-color:#fff;color:#fff; }
.zen-landing-24 { padding:0 1rem;font-weight:700; }
.zen-landing-25 { max-width:1140px;margin:0 auto;padding:1rem .5rem 0;display:grid;grid-template-columns:repeat(4,1fr); }
.zen-landing-26 { position:relative;text-align:center;z-index:0; }
.zen-landing-27 { position:absolute;top:.5em;right:.5em;bottom:.5em;left:.5em;background:#fff;z-index:-1; }
.zen-landing-28 { padding:1rem; }
.zen-landing-29 { width:40%;margin:.5rem; }
.zen-landing-30 { font-size:1.4em;font-weight:700;padding-bottom:1rem;margin:0; }
.zen-landing-31 { max-width:1140px;margin:1rem auto;padding:0 15px; }
.zen-landing-32 { background-image:url(/assets/sites/orange-zen/img/orange.esim.bg.jpg);background-position:top left;background-repeat:no-repeat;background-size:cover;background-color:#000;padding:3rem 0;display:flex; }
.zen-landing-33 { width:33.333%;padding:3rem 0; }
.zen-landing-34 { margin:1.5rem 0;padding-left:1rem; }
.zen-landing-35 { font-size:2.5rem;font-weight:700;color:#fff;line-height:0.9;letter-spacing:0.075em;margin-bottom:.5rem; }
.zen-landing-36 { color:#fff; }
.zen-landing-37 { margin:0; }
.zen-landing-38 { display:inline-block;border:3px solid #fff;background:transparent;color:#fff;padding:.375rem 3rem;font-size:0.9em;line-height:1.5;border-radius:0; }
.zen-landing-38:hover { background:#fff;color:#000;border-color:#000; }
.zen-landing-39 { font-weight:700; }
.zen-landing-40 { max-width:1140px;margin:0 auto;padding-top:1rem; }
.zen-landing-41 { display:flex;padding:0 15px; }
.zen-landing-42 { width:50%;background:#fff;padding:0 15px; }
.zen-landing-43 { padding:1rem 0; }
.zen-landing-44 { font-size:1.75rem; }
.zen-landing-45 { text-wrap:pretty; }
.zen-landing-46 { width:50%;background:#fff;padding:0 15px;display:flex;align-items:center; }
.zen-landing-47 { padding:1rem 0;width:100%; }
.zen-landing-48 { width:100%;display:block; }
.zen-landing-49 { max-width:1140px;margin:0 auto;padding:1rem 0;display:flex; }
.zen-landing-50 { width:50%;padding:1rem; }
.zen-landing-51 { background:#fff;padding:1rem;height:100%; }
.zen-landing-52 { text-wrap:pretty;margin:0; }
.zen-landing-53 { background:#000; }
.zen-landing-54 { max-width:1140px;margin:0 auto;padding:3rem 15px;color:#fff;display:flex;align-items:center; }
.zen-landing-55 { font-size:2rem;color:#ff7900; }
.zen-landing-56 { font-size:1.75rem;color:#fff;margin:0; }
.zen-landing-57 { width:50%;text-align:center;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap; }
.zen-landing-58 { display:inline-block;border:3px solid #fff;background:#fff;color:#000;padding:.375rem 1rem;font-size:1.2em;line-height:1.5;border-radius:0; }
.zen-landing-58:hover { background:#000;color:#fff;border-color:#fff; }
.zen-landing-59 { padding:0 3rem;font-weight:700; }
.zen-landing-60 { background:#fff; }
.zen-landing-61 { max-width:1140px;margin:0 auto;padding:1rem 15px; }
.zen-landing-62 { display:flex;margin-top:.5rem;gap:0; }
.zen-landing-63 { width:50%;padding:0 15px;margin-bottom:1.5rem; }
.zen-landing-64 { padding:1.5rem;height:100%;border:1px solid #dee2e6; }
.zen-landing-65 { display:flex;justify-content:space-between;align-items:center;opacity:.7; }
.zen-landing-66 { font-size:0.9em; }
.zen-landing-67 { color:#ffc107;letter-spacing:1px; }
.zen-landing-68 { margin:1.5rem 0;text-align:justify; }
.zen-landing-69 { margin:1rem 0 0; }
.zen-landing-70 { opacity:.7; }
.zen-landing-71 { background:#f6f9fa;padding:1rem 0; }
.zen-landing-72 { max-width:1140px;margin:0 auto;padding:1rem 15px;display:flex; }
.zen-landing-73 { width:50%;padding:1rem 15px;margin:auto 0; }
.zen-landing-74 { font-size:2rem;font-weight:700; }
.zen-landing-75 { font-size:14px; }
.zen-landing-76 { width:50%;padding:1rem 15px; }
.zen-landing-77 { border:1px solid #dee2e6;padding:.5rem 1.5rem;display:flex;flex-direction:column;gap:.25rem; }
.zen-landing-78 { color:#212529; }

/* White copy keeps its colour on hover — these sit on black or on the photo. */
.zen-landing-17:hover { color: #fff; }
.zen-landing-35:hover { color: #fff; }
.zen-landing-36:hover { color: #fff; }
.zen-landing-38:hover { color: #fff; }
.zen-landing-54:hover { color: #fff; }
.zen-landing-56:hover { color: #fff; }

/* --- FAQ -----------------------------------------------------------------
   `-25` onwards are ANSWER wrappers: the stored answer HTML carries its own
   `div.zen-faq-25` or `div.zen-faq-30 > table.zen-faq-31`, so these class names
   appear in the database rather than in the component. */
.zen-faq-1 { background:#fff; }
.zen-faq-16 { background:#fff; }
.zen-faq-17 { max-width:1140px;margin:0 auto;padding:1.5rem 15px; }
.zen-faq-18 { text-align:center;margin-bottom:.5rem;font-size:2rem; }
.zen-faq-19 { font-weight:700;color:#ff7900; }
.zen-faq-20 { margin-bottom:3rem; }
.zen-faq-21 { border-bottom:2px solid #eee; }
.zen-faq-22 { display:block;padding:1rem;color:#6c757d; }
.zen-faq-23 { float:right; }
.zen-faq-24 { font-size:1.1em; }
.zen-faq-25 { padding:0 1.5rem 1rem; }
.zen-faq-26 { color:#007bff; }
.zen-faq-27 { max-width:420px;height:150px;margin:.5rem 0;border:1px dashed #ced4da;background-image:repeating-linear-gradient(135deg,#f1f3f5 0 10px,#fff 10px 20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px; }
.zen-faq-28 { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.08em;color:#ff7900; }
.zen-faq-29 { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#6c757d; }
.zen-faq-30 { padding:0 1.5rem 1rem;overflow-x:auto; }
.zen-faq-31 { width:100%;margin-top:1.5rem;text-align:center;border-collapse:collapse;border:1px solid #dee2e6; }
.zen-faq-32 { width:140px;padding:.75rem;border:1px solid #dee2e6;text-align:inherit; }
.zen-faq-33 { padding:.75rem;border:1px solid #dee2e6; }
.zen-faq-34 { padding:.75rem;border:1px solid #dee2e6;text-align:inherit; }
.zen-faq-35 { padding:.75rem;border:1px solid #dee2e6;text-align:left; }
.zen-faq-36 { margin:0; }
.zen-faq-37 { text-align:center;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap; }
.zen-faq-38 { display:inline-block;background:#343a40;border:1px solid #343a40;color:#fff;padding:.375rem 3rem;font-size:1em;line-height:1.5;border-radius:0; }
.zen-faq-38:hover { background:#23272b;border-color:#1d2124;color:#fff; }
.zen-faq-39 { padding:0 .5rem; }
.zen-faq-40 { display:inline-block;background:#000;border:1px solid #000;color:#fff;padding:.375rem 3rem;font-size:1em;line-height:1.5;border-radius:0; }
.zen-faq-40:hover { background:#000000e3;border-color:#000000e3;color:#fff; }

/* ==========================================================================
   RESPONSIVE

   The design exports were hoisted DESKTOP-ONLY: the live partner stylesheet
   (partners-engine.simoptions.com/assets/cache/orange-zen.*.css) carries 98
   media queries and a full Bootstrap grid; these carried ZERO. Measured in
   Brave at 390px, the landing rendered 5902px tall against live's 3451px, the
   nav wrapped over two lines with its contact icons on top of the hero, and the
   four USP tiles were crushed to ~90px with their text clipped.

   The header, its nav and the mobile panel are NOT here — they are the shared
   foundation (`src/styles/foundation/nav.css`).

   Everything below is calibrated against the LIVE mobile page, not invented:
     - the hero collapses to its BLACK column; the orange/photo half is hidden,
       which is what live does (it does not stack them)
     - the CTA goes full width
     - the USP strip becomes 2x2
     - the remaining two-column bands stack
   Breakpoints are the foundation's five (576/768/1024/1200/1510).
   ========================================================================== */

@media (max-width: 1024px) {
  /* Containers: the design's fixed 1140px rows need to breathe on a tablet. */
  .zen-landing-16,
  .zen-landing-25,
  .zen-landing-31,
  .zen-landing-40,
  .zen-faq-17 { padding-inline: var(--space-4); }
}

@media (max-width: 767px) {
  /* ---- hero: one column, black ----------------------------------------
     The desktop hero is a two-colour BAND (`-13`: black half + photo half) with
     the copy ABSOLUTELY CENTRED over it (`-16`). On a phone live drops the photo
     half and shows the copy on black.

     So the black moves onto the SECTION and the band goes away entirely. Making
     `-16` static while `-13` still supplied the background put the white copy on
     the page's own near-white ground — invisible. The section has to own the
     colour for the copy to flow on it. */
  .zen-landing-12 { background: #000; }
  .zen-landing-13 { display: none; }
  .zen-landing-16 {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    max-width: none;
    padding-block: var(--space-6);
  }
  .zen-landing-17 { width: 100%; padding-right: 0; }
  /* 3em is 48px here; live's heading measures ~34px on a phone. */
  .zen-landing-18 { font-size: 2.25em; }
  .zen-landing-20 { font-size: 1.25rem; }
  /* Full-width CTA, as live draws it. */
  .zen-landing-22 { flex-direction: column; align-items: stretch; }
  .zen-landing-23 { text-align: center; }

  /* ---- USP strip: 2 x 2, like live ------------------------------------
     Kept at TWO columns rather than one: the icon is an <img> at width:40% of
     the tile, so a single full-width column renders a ~340px-wide "4G+". */
  .zen-landing-25 { grid-template-columns: repeat(2, 1fr); }
  .zen-landing-29 { width: auto; max-height: 3.5rem; }
  .zen-landing-30 { font-size: 1.1em; }

  /* ---- the remaining two-column bands stack -------------------------- */
  .zen-landing-32 { display: block; padding-block: var(--space-6); }
  .zen-landing-33 { width: 100%; padding-block: var(--space-4); }
  .zen-landing-41 { display: block; padding-inline: 0; }
  .zen-landing-42,
  .zen-landing-46 { width: 100%; }

  /* The coverage table has fixed 140px cells and cannot reflow — let it scroll
     inside its own box rather than widening the page. */
  .zen-faq-31 { display: block; overflow-x: auto; white-space: nowrap; }
  /* The device mock-up is a fixed 420x150 panel; cap it to the column. */
  .zen-faq-27 { max-width: 100%; height: auto; min-height: 9.375rem; }
}

@media (max-width: 575px) {
  /* Still two columns — live keeps 2x2 all the way down. Only the label tightens. */
  .zen-landing-30 { font-size: 1em; }
}