/* From the design export (made by make_template.py, do not edit). */
body{margin:0;background:#FFFFFF}
h1,h2{text-transform:uppercase}
a{color:var(--ink)}a:hover{color:var(--brand-deep)}

/* Mobile layer from df360-review, recolored. */
/* DF360 review pages: mobile conversion layer.
   Everything sits behind the 760px breakpoint, so the desktop design is untouched.
   The pages carry inline styles from the design export, hence the !important overrides. */

.mcta { display: none; }

@media (max-width: 760px) {
  html { scroll-behavior: smooth; }

  /* Header: one slim row that scrolls away; the bottom bar takes over as the always-there button */
  header { position: relative !important; }
  header > div { flex-wrap: nowrap !important; padding: 10px 16px !important; gap: 12px !important; }
  header > div > div:first-child { gap: 10px !important; min-width: 0; }
  header > div > div:first-child > img { height: 26px !important; }
  header > div > div:first-child > span { padding-left: 10px !important; gap: 6px !important; font-size: 8px !important; letter-spacing: 0.12em !important; white-space: nowrap; }
  header > div > div:first-child > span img { height: 14px !important; }
  header a[href="#plans"] { display: none !important; }
  header a[data-cta="header"] { min-height: 40px !important; padding: 0 14px !important; font-size: 13px !important; white-space: nowrap; }

  /* Hero: shorter headline and tighter spacing so the main button sits near the top of the screen */
  section[aria-labelledby="hero-title"] > div[aria-hidden="true"] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 78%, transparent) 0%, color-mix(in srgb, var(--ink) 88%, transparent) 45%, color-mix(in srgb, var(--ink) 96%, transparent) 100%) !important;
  }
  section[aria-labelledby="hero-title"] > div[style*="max-width"] { padding: 24px 20px 0 !important; gap: 8px !important; }
  section[aria-labelledby="hero-title"] > div[style*="max-width"] > div:first-child { gap: 16px !important; padding-bottom: 20px !important; }
  section[aria-labelledby="hero-title"] > div[style*="max-width"] > div:first-child > span:first-child { padding: 6px 12px 6px 8px !important; font-size: 11px !important; letter-spacing: 0.1em !important; }
  #hero-title { font-size: 38px !important; line-height: 1.02 !important; }
  #hero-title + p { font-size: 16px !important; line-height: 1.5 !important; }
  #hero-title ~ div:nth-of-type(1) { align-self: stretch !important; padding: 14px 16px !important; gap: 8px 16px !important; border-radius: 14px !important; }
  #hero-title ~ div:nth-of-type(1) > span[aria-hidden="true"] { display: none !important; }
  #hero-title ~ div:nth-of-type(1) > div:first-child > span:nth-child(2) { font-size: 38px !important; }
  #hero-title ~ div:nth-of-type(1) > div:last-child { font-size: 14px !important; }
  #hero-title ~ div:nth-of-type(2) { flex-direction: column !important; gap: 2px !important; }
  #hero-title ~ div:nth-of-type(2) a[data-cta="hero"] { width: 100% !important; justify-content: center !important; min-height: 56px !important; padding: 0 20px !important; font-size: 17px !important; }
  #hero-title ~ div:nth-of-type(2) a[href="#plans"] { border: 0 !important; min-height: 44px !important; padding: 0 !important; justify-content: center !important; font-size: 14px !important; text-decoration: underline !important; text-underline-offset: 4px; }
  #hero-title ~ span { font-size: 13px !important; text-align: center; }
  section[aria-labelledby="hero-title"] > div[style*="max-width"] > div:last-child img { max-width: 280px !important; }

  /* Sections: less dead space and smaller headings, so people reach the next button sooner */
  section[aria-labelledby]:not([aria-labelledby="hero-title"]) > div[style*="max-width"],
  #plans > div[style*="max-width"] { padding-top: 48px !important; padding-bottom: 48px !important; gap: 32px !important; }
  section h2 { font-size: 34px !important; line-height: 1.06 !important; }
  section p[style*="font-size: 19px"], section p[style*="font-size: 20px"], section p[style*="font-size: 22px"] { font-size: 17px !important; }

  /* In-page "Start" buttons go full width for an easy thumb tap (tagged by mobile.js) */
  .mcta-wide { display: flex !important; width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }

  /* Bottom button bar */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .mcta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--dark); border-top: 1px solid var(--dark-line); box-shadow: 0 -8px 24px color-mix(in srgb, var(--ink) 25%, transparent);
    font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif; color: #FFFFFF;
    transform: translateY(110%); transition: transform 0.25s ease;
  }
  .mcta.is-on { transform: none; }
  .mcta-price { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; min-width: 0; }
  .mcta-price span { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #BDBDBD; white-space: nowrap; }
  .mcta-price b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
  .mcta-price small { font-size: 13px; font-weight: 600; color: #BDBDBD; }
  .mcta a, .mcta a:hover {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; box-sizing: border-box;
    background: var(--brand); color: var(--on-brand); text-decoration: none; white-space: nowrap;
    font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em;
  }
}