body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #0b0b0d;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
}

/* =========================================================
   Home + Product Landing Pages
   Scope: body.page-home, body.page-product
   Notes:
   - Preserves existing global centered layout as default.
   - Pages that need scroll/layout should opt-in via body class.
   ========================================================= */


body.page-home,
body.page-product {
  justify-content: flex-start; /* override center */
  text-align: left;            /* override center */
  padding: 38px 0 60px;
}

body.page-home .brand-header,
body.page-product .brand-header {
  width: 100%;
  max-width: 1180px;
  justify-content: flex-start;
  padding: 0 24px;
  margin: 0 auto 18px;
}

body.page-home .content,
body.page-product .content {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

body.page-home .hero,
body.page-product .hero {
  position: relative;
  border: 1px solid #2a2a2f;
  border-radius: 16px;
  background:
    radial-gradient(900px 420px at 20% 5%, rgba(245,196,0,0.18), transparent 55%),
    radial-gradient(700px 420px at 80% 10%, rgba(245,196,0,0.10), transparent 60%),
    rgba(255,255,255,0.02);
  padding: 22px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.page-home .hero-grid,
body.page-product .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}

@media (min-width: 920px) {
  body.page-home .hero-grid,
  body.page-product .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 22px;
  }
}

body.page-home h1,
body.page-product h1 {
  font-size: 2.0rem;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

@media (min-width: 920px) {
  body.page-home h1,
  body.page-product h1 {
    font-size: 2.35rem;
  }
}

body.page-home .lead,
body.page-product .lead {
  color: #d1d1d6;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 14px;
}

body.page-home .pill-row,
body.page-product .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

body.page-home .pill,
body.page-product .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #2a2a2f;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  color: #e6e6ec;
  font-size: 12px;
}

body.page-home .btn-row,
body.page-product .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

body.page-home .btn,
body.page-product .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2a2a2f;
  background: rgba(0,0,0,0.20);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

body.page-home .btn-primary,
body.page-product .btn-primary {
  border-color: #f5c400;
  background: #f5c400;
  color: #111;
}

body.page-home .btn:hover,
body.page-product .btn:hover {
  border-color: rgba(245,196,0,0.65);
}

body.page-home .btn-primary:hover,
body.page-product .btn-primary:hover {
  background: #ffdc40;
}

body.page-home .btn-demo,
body.page-product .btn-demo {
  border-color: #7c5cff;
  background: #7c5cff;
  color: #fff;
}

body.page-home .btn-demo:hover,
body.page-product .btn-demo:hover {
  border-color: #9f8aff;
  background: #9f8aff;
}

/* Visual mosaic (image-heavy without forcing missing assets) */
body.page-home .mosaic,
body.page-product .mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

body.page-home .tile,
body.page-product .tile {
  border: 1px solid #2a2a2f;
  border-radius: 14px;
  background:
    radial-gradient(220px 160px at 20% 20%, rgba(245,196,0,0.20), transparent 60%),
    rgba(0,0,0,0.22);
  min-height: 90px;
  overflow: hidden;
  position: relative;
}

body.page-home .tile img,
body.page-product .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

/* Mosaic layout */
body.page-home .t1 { grid-column: span 3; min-height: 160px; }
body.page-home .t2 { grid-column: span 3; min-height: 160px; }
body.page-home .t3 { grid-column: span 2; min-height: 110px; }
body.page-home .t4 { grid-column: span 2; min-height: 110px; }
body.page-home .t5 { grid-column: span 2; min-height: 110px; }

@media (max-width: 520px) {
  body.page-home .mosaic { grid-template-columns: repeat(2, 1fr); }
  body.page-home .t1,
  body.page-home .t2,
  body.page-home .t3,
  body.page-home .t4,
  body.page-home .t5 { grid-column: span 2; }
}

/* Product grid (your “4 columns” idea; responsive down) */
body.page-home .product-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 780px) {
  body.page-home .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  body.page-home .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

body.page-home .product-card {
  border: 1px solid #2a2a2f;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  padding: 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-home .product-card:hover {
  border-color: rgba(245,196,0,0.55);
}

body.page-home .product-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #b9b9bf;
}

body.page-home .product-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
}

body.page-home .product-desc {
  margin: 0;
  color: #d1d1d6;
  line-height: 1.55;
  font-size: 0.95rem;
}

body.page-home .mini-media {
  border-radius: 14px;
  border: 1px solid #2a2a2f;
  background: rgba(0,0,0,0.22);
  overflow: hidden;
  min-height: 140px;
  position: relative;
}

body.page-home .mini-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.95;
}

body.page-home .mini-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* FAQ on home/product */
body.page-home .faq,
body.page-product .faq {
  margin-top: 16px;
  border: 1px solid #2a2a2f;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

body.page-home details,
body.page-product details {
  border-top: 1px solid #2a2a2f;
  padding: 14px 14px;
}
body.page-home details:first-child,
body.page-product details:first-child { border-top: 0; }

body.page-home summary,
body.page-product summary {
  cursor: pointer;
  font-weight: 800;
  color: #fff;
}

body.page-home details p,
body.page-product details p {
  margin: 10px 0 0;
  color: #d1d1d6;
  line-height: 1.6;
}

/* Product landing page hero media */
body.page-product .product-hero-media {
  border-radius: 16px;
  border: 1px solid #2a2a2f;
  background: rgba(0,0,0,0.22);
  overflow: hidden;
  min-height: 240px;
}

body.page-product .product-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.95;
}

body.page-product .section {
  margin-top: 18px;
  padding: 16px 14px;
  border: 1px solid #2a2a2f;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
}

body.page-product .two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 920px) {
  body.page-product .two-col { grid-template-columns: 1fr 1fr; }
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.logo {
  max-width: 80px; /* 50% reduction */
  height: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sub {
  line-height: 1.2;
}

.sub .line-1 {
  font-size: 1.5em;
  font-style: italic;
  font-weight: 600;
}

.sub .line-2 {
  font-size: 1.0em;
  opacity: 0.85;
}

.coming-soon {
  font-size: 1.1rem;
  font-weight: 500;
  white-space: nowrap;
}

.content {
  max-width: 720px;
  padding: 0 24px;
}

p {
  color: #d1d1d6;
  margin-bottom: 20px;
}

.subtle {
  color: #9b9ba0;
}

.cta {
  margin-top: 40px;
  padding: 24px;
  border: 1px solid #2a2a2f;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}

.cta a {
  color: #f5c400;
  text-decoration: none;
  font-weight: 600;
}

.cta a:hover {
  text-decoration: underline;
}

/* =========================================================
   Feedback Page (/feedback/)
   Moved from /feedback/index.html inline <style> (2026-01-22)
   Scope: body.page-feedback
   ========================================================= */

body.page-feedback {
  justify-content: flex-start; /* override center layout for long pages */
  text-align: left;           /* override center for feedback text */
  padding: 48px 0;
}

/* Layout container */
body.page-feedback .content {
  width: 100%;
  max-width: 920px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Header alignment (preserve existing header/footer structure) */
body.page-feedback .brand-header,
body.page-support .brand-header,
body.page-support-thanks .brand-header {
  width: 100%;
  max-width: 920px;
  justify-content: flex-start;
  padding: 0 24px;
  margin-bottom: 18px;
}

body.page-feedback .page-title,
body.page-support .page-title,
body.page-support-thanks .page-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 8px 0 10px;
  letter-spacing: -0.02em;
}

body.page-feedback p,
body.page-feedback li,
body.page-support p,
body.page-support li,
body.page-support-thanks p,
body.page-support-thanks li {
  color: #d1d1d6;
  line-height: 1.6;
}

/* Feedback form card */
body.page-feedback .form-card,
body.page-support .form-card,
body.page-subscribe .form-card {
  margin-top: 18px;
  padding: 18px 16px;
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

body.page-feedback .form-grid,
body.page-support .form-grid,
body.page-subscribe .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px) {
  body.page-feedback .form-grid.two,
  body.page-support .form-grid.two {
    grid-template-columns: 1fr 1fr;
  }
}

body.page-feedback label,
body.page-support label,
body.page-subscribe label {
  display: block;
  font-size: 12px;
  color: #b9b9bf;
  margin-bottom: 6px;
}

body.page-feedback input[type="text"],
body.page-feedback input[type="email"],
body.page-feedback select,
body.page-feedback textarea,
body.page-support input[type="text"],
body.page-support input[type="email"],
body.page-support select,
body.page-support textarea,
body.page-subscribe input[type="text"],
body.page-subscribe input[type="email"],
body.page-subscribe input[type="tel"],
body.page-subscribe select,
body.page-subscribe textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #2a2a2f;
  background: rgba(0,0,0,0.20);
  color: #fff;
  outline: none;
  font-size: 14px;
}

/* Subscribe extras */
body.page-subscribe .choice-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
body.page-subscribe .choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  background: rgba(0,0,0,0.20);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: #fff;
}
body.page-subscribe .choice input { margin: 0; }
body.page-subscribe .btn-primary {
  display: inline-block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #f5c400;
  background: #f5c400;
  color: #111;
  font-weight: 800;
  cursor: pointer;
}
body.page-subscribe .hint {
  color: #b9b9bf;
  font-size: 12px;
  line-height: 1.4;
}

/* Dropdown readability:
   - closed select stays white (dark field background)
   - opened option list uses dark text (OS dropdown background is typically light) */
body.page-feedback select,
body.page-support select,
body.page-subscribe select { color: #ffffff; }
body.page-feedback select option,
body.page-support select option,
body.page-subscribe select option { color: #111; }

body.page-feedback textarea,
body.page-support textarea {
  min-height: 140px;
  resize: vertical;
}

body.page-feedback input:focus,
body.page-feedback select:focus,
body.page-feedback textarea:focus,
body.page-support input:focus,
body.page-support select:focus,
body.page-support textarea:focus {
  border-color: rgba(245,196,0,0.65);
  box-shadow: 0 0 0 3px rgba(245,196,0,0.10);
}



body.page-subscribe input:focus,
body.page-subscribe select:focus,
body.page-subscribe textarea:focus {
  border-color: rgba(245,196,0,0.65);
  box-shadow: 0 0 0 3px rgba(245,196,0,0.10);
}

body.page-feedback .req,
body.page-support .req { color: #f5c400; }

body.page-feedback .form-actions,
body.page-support .form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
  flex-wrap: wrap;
}

body.page-feedback .btn-primary,
body.page-support .btn-primary,
body.page-support-thanks .btn-primary {
  appearance: none;
  border: 1px solid rgba(245,196,0,0.55);
  background: rgba(245,196,0,0.10);
  color: #f5c400;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
}

body.page-support .btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }

body.page-feedback .status,
body.page-support .status {
  font-size: 13px;
  color: #d1d1d6;
}
body.page-feedback .status.ok,
body.page-support .status.ok { color: #9be28f; }
body.page-feedback .status.err,
body.page-support .status.err { color: #ff8a8a; }

/* Support page intro block */
body.page-support .support-intro {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

body.page-support .support-intro a {
  color: #f5c400;
  text-decoration: none;
}

body.page-support-thanks .thanks-card {
  margin-top: 18px;
  padding: 18px 16px;
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

body.page-feedback .tiny-note,
body.page-support .tiny-note {
  font-size: 12px;
  color: #9b9ba0;
  margin-top: 10px;
  line-height: 1.5;
}

/* Honeypot hidden field wrapper */
body.page-feedback .hp-wrap,
body.page-support .hp-wrap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body.page-feedback .coming-soon { color: #d1d1d6; }

body.page-feedback .meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 18px;
}

body.page-feedback .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #2a2a2f;
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  color: #d1d1d6;
  font-size: 0.92rem;
  white-space: nowrap;
}

body.page-feedback .toc {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #2a2a2f;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}

body.page-feedback .toc a {
  color: #f5c400;
  text-decoration: none;
  font-weight: 600;
}
body.page-feedback .toc a:hover { text-decoration: underline; }

body.page-feedback h2 {
  font-size: 1.25rem;
  margin: 22px 0 10px;
  letter-spacing: -0.01em;
}

body.page-feedback h3 {
  font-size: 1.05rem;
  margin: 18px 0 8px;
  color: #ffffff;
}

body.page-feedback ul {
  margin: 10px 0 18px 22px;
  padding: 0;
}

body.page-feedback .divider {
  height: 1px;
  background: #2a2a2f;
  margin: 22px 0;
}

body.page-feedback .note {
  border-left: 3px solid #f5c400;
  padding: 10px 14px;
  background: rgba(245,196,0,0.06);
  border-radius: 10px;
  margin: 14px 0 20px;
}
body.page-feedback .note strong { color: #ffffff; }

body.page-feedback .footer {
  width: 100%;
  max-width: 920px;
  padding: 0 24px;
  margin-top: 18px;
  color: #9b9ba0;
  font-size: 0.95rem;
  text-align: center;
}

body.page-feedback .footer a {
  color: #f5c400;
  text-decoration: none;
  font-weight: 600;
}
body.page-feedback .footer a:hover { text-decoration: underline; }

/* =========================================================
   Plans Page (/plans/)
   Scope: body.page-plans
   Matches /feedback + /subscribe styling conventions
   ========================================================= */

body.page-plans {
  justify-content: flex-start;
  text-align: left;
  padding: 48px 0;
}

body.page-plans .brand-header {
  width: 100%;
  max-width: 1180px;
  justify-content: flex-start;
  padding: 0 24px;
  margin-bottom: 18px;
}

body.page-plans .content {
  width: 100%;
  max-width: 1180px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.page-plans .page-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 8px 0 10px;
  letter-spacing: -0.02em;
}

body.page-plans p,
body.page-plans li {
  color: #d1d1d6;
  line-height: 1.6;
}

/* Billing toggle */
body.page-plans .plans-billing {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #2a2a2f;
  background: rgba(0,0,0,0.18);
  margin: 4px auto 18px;
}

body.page-plans .billing-pill {
  appearance: none;
  border: 1px solid #2a2a2f;
  background: rgba(0,0,0,0.22);
  color: #ffffff;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}

body.page-plans .billing-pill .pill-note {
  font-weight: 700;
  font-size: 12px;
  opacity: 0.9;
  margin-left: 6px;
  color: #f5c400;
}

body.page-plans .billing-pill.is-active {
  border-color: #f5c400;
  background: rgba(245,196,0,0.12);
  box-shadow: 0 0 0 3px rgba(245,196,0,0.08);
}

/* Desktop-only row that holds the "Most Popular" pill directly under the billing toggle,
   aligned above the Professional column while keeping all 3 plan cards on the same plane. */
body.page-plans .plans-popular-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 0 0 8px;
}

/* Hide the "Most Popular" row when the pricing grid collapses to fewer columns. */
@media (max-width: 920px) {
  body.page-plans .plans-popular-row { display: none; }
}

/* Pricing grid
   - auto-fit: reaches 3 columns naturally on desktop without relying on a single breakpoint
   - min width keeps cards readable; grid will wrap as space reduces
*/
body.page-plans .plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 0;
}

body.page-plans .plan-card {
  position: relative;
  border: 1px solid #2a2a2f;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  padding: 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Prevent padding/width overflow within pricing cards */
body.page-plans .plan-card,
body.page-plans .plan-card * {
  box-sizing: border-box;
}

body.page-plans .plan-card:hover {
  border-color: rgba(245,196,0,0.55);
}

body.page-plans .plan-card.is-popular {
  border-color: rgba(245,196,0,0.65);
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(245,196,0,0.16), transparent 60%),
    rgba(255,255,255,0.02);
}

body.page-plans .plan-badge {
  position: static;
  transform: none;
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #f5c400;
  background: #f5c400;
  color: #111;
  font-size: 13px;
  font-weight: 900;
  margin: 0;
}

/* ===== REVISION: Constrain "Most Popular" pill width so it never exceeds the Professional column.
   - Keep centered in its grid cell
   - Allow it to be narrower than the column (acceptable per request)
   - Caps at 280px to align with the card min-width used by .plans-grid
*/
body.page-plans .plans-popular-row .plan-badge {
  max-width: 280px;
  margin: 0 auto;
}

/* (Optional safety) If your cards are narrower on very small screens, keep it responsive */
@media (max-width: 980px) {
  body.page-plans .plans-popular-row .plan-badge {
    max-width: 92%;
  }
}

body.page-plans .plan-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

body.page-plans .plan-name {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

body.page-plans .plan-price {
  text-align: left;
}

body.page-plans .price-main {
  font-size: 1.05rem;
  font-weight: 900;
  color: #f5c400;
}

body.page-plans .price-sub {
  font-size: 12px;
  color: #b9b9bf;
  margin-top: 4px;
}

/* Keep plan subtitles on one line on desktop; allow wrapping on smaller screens */
@media (min-width: 980px) {
  body.page-plans .price-sub {
    white-space: nowrap;
  }
}

/* On desktop widths, keep the plan tagline on a single line (it can wrap on mobile). */
@media (min-width: 980px) {
  body.page-plans .price-sub {
    white-space: nowrap;
  }
}

body.page-plans .plan-section-title {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 900;
  color: #b9b9bf;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.page-plans .plan-list {
  margin: 10px 0 0 18px;
  padding: 0;
}

body.page-plans .plan-list.subtle {
  color: #9b9ba0;
}

body.page-plans .plan-cta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: center;
}

body.page-plans .btn-primary {
  display: inline-flex;
  width: 220px;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  padding: 12px 14px;
  border-radius: 999px; /* pill */
  border: 1px solid #f5c400;
  background: #f5c400;
  color: #111;
  font-weight: 900;
  text-decoration: none;
}

body.page-plans .btn-primary:hover {
  background: #ffdc40;
  border-color: rgba(245,196,0,0.85);
}

body.page-plans .footer {
  width: 100%;
  max-width: 1180px;
  padding: 0 24px;
  margin-top: 18px;
  color: #9b9ba0;
  font-size: 0.95rem;
  text-align: center;
}

body.page-plans .footer a {
  color: #f5c400;
  text-decoration: none;
  font-weight: 600;
}

body.page-plans .footer a:hover { text-decoration: underline; }

/* =========================================================
   Subscribe — Phone Input Full Width Fix
   Scope: body.page-subscribe only
   No JS or layout changes
   ========================================================= */

body.page-subscribe .iti {
  width: 100%;
  display: block;
}

body.page-subscribe .iti input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
}


/* ================================
   Subscribe – Phone Input Normalize
   ================================ */

.subscribe-form .iti {
  width: 100%;
}

.subscribe-form .iti input[type="tel"] {
  width: 100%;
  height: 44px; /* match other inputs */
  padding: 10px 12px 10px 88px; /* room for dial code */
  font-size: 14px;
  line-height: 1.4;
  color: #111;
  background-color: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-sizing: border-box;
}

.subscribe-form .iti input[type="tel"]:focus {
  width: 100%;
  outline: none;
  border-color: #7c3aed; /* match your focus color */
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2);
}

.subscribe-form .iti__flag-container {
  border-right: 1px solid #d0d5dd;
}

.subscribe-form .iti--separate-dial-code .iti__selected-flag {
  padding: 0 10px;
  background: transparent;
}

.subscribe-form .iti__country-list {
  border-radius: 6px;
  font-size: 14px;
}

    /* Product selection radios: make checked state unmistakable on dark UI */
    .choices .choice.is-selected{
      outline: 2px solid #f5c400;
      outline-offset: 2px;
      background: rgba(245,196,0,0.10);
      border-radius: 12px;
    }
    .choices .choice input[type="radio"]{
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.65);
      background: transparent;
      display: inline-block;
      position: relative;
      vertical-align: middle;
      margin-right: 10px;
      flex: 0 0 auto;
    }
    .choices .choice input[type="radio"]::after{
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      transform: translate(-50%, -50%) scale(0);
      background: #f5c400;
      transition: transform 120ms ease;
    }
    .choices .choice input[type="radio"]:checked{
      border-color: #f5c400;
    }
    .choices .choice input[type="radio"]:checked::after{
      transform: translate(-50%, -50%) scale(1);
    }
    .choices .choice input[type="radio"]:disabled{
      border-color: rgba(255,255,255,0.30);
      cursor: not-allowed;
      opacity: 0.85;
    }
    .choices .choice input[type="radio"]:disabled::after{
      background: rgba(245,196,0,0.55);
    }

/* =========================================================
   Wait List Page (/wait-list/)
   Scope: body.page-waitlist
   Matches /feedback styling with slightly wider max-width.
   ========================================================= */

body.page-waitlist {
  justify-content: flex-start;
  text-align: left;
  padding: 48px 0;
}

/* Layout container */
body.page-waitlist .content {
  width: 100%;
  max-width: 980px; /* slightly wider than /feedback */
  background: rgba(255,255,255,0.02);
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Header alignment: logo left on desktop, centered on mobile */
body.page-waitlist .brand-header {
  width: 100%;
  max-width: 980px;
  justify-content: flex-start;
  padding: 0 24px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  body.page-waitlist .brand-header {
    justify-content: center;
    text-align: center;
  }
  body.page-waitlist .brand-header .sub {
    align-items: center;
  }
}

/* Title + lead */
body.page-waitlist .page-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 8px 0 10px;
  letter-spacing: -0.02em;
}

body.page-waitlist p,
body.page-waitlist li {
  color: #d1d1d6;
  line-height: 1.6;
}

body.page-waitlist .lead {
  color: #d1d1d6;
  line-height: 1.6;
}

/* Form card */
body.page-waitlist .form-card {
  margin-top: 18px;
  padding: 18px 16px;
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

body.page-waitlist .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px) {
  body.page-waitlist .form-grid.two {
    grid-template-columns: 1fr 1fr;
  }
}

body.page-waitlist label {
  display: block;
  font-size: 12px;
  color: #b9b9bf;
  margin-bottom: 6px;
}

body.page-waitlist input[type="text"],
body.page-waitlist input[type="email"],
body.page-waitlist input[type="tel"],
body.page-waitlist input[type="number"],
body.page-waitlist select,
body.page-waitlist textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #2a2a2f;
  background: rgba(0,0,0,0.20);
  color: #fff;
  outline: none;
  font-size: 14px;
}

body.page-waitlist select { color: #ffffff; }
body.page-waitlist select option { color: #111; }

body.page-waitlist input:focus,
body.page-waitlist select:focus,
body.page-waitlist textarea:focus {
  border-color: rgba(245,196,0,0.65);
  box-shadow: 0 0 0 3px rgba(245,196,0,0.10);
}

body.page-waitlist .req { color: #f5c400; }

body.page-waitlist .hint {
  color: #b9b9bf;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
}

/* Product choices (reusing subscribe choice styles) */
body.page-waitlist .choice-row {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

body.page-waitlist .choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  background: rgba(0,0,0,0.20);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: #fff;
}

body.page-waitlist .choice input { margin: 0; }

/* Checkbox rows */
body.page-waitlist .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #d1d1d6;
}

body.page-waitlist .check input { margin-top: 3px; }

/* Optional blocks */
body.page-waitlist .wl-block {
  padding: 14px 16px;
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

body.page-waitlist .block-title {
  font-weight: 700;
  margin-bottom: 10px;
  color: #ffffff;
}

/* Honeypot */
body.page-waitlist .hp-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Actions (match /feedback) */
body.page-waitlist .form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
  flex-wrap: wrap;
}

body.page-waitlist .btn-primary {
  appearance: none;
  border: 1px solid rgba(245,196,0,0.55);
  background: rgba(245,196,0,0.10);
  color: #f5c400;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
}

body.page-waitlist .btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }

body.page-waitlist .status {
  font-size: 13px;
  color: #d1d1d6;
}
body.page-waitlist .status.ok { color: #9be28f; }
body.page-waitlist .status.err { color: #ff8a8a; }

body.page-waitlist .tiny-note {
  margin-top: 12px;
  font-size: 12px;
  color: #b9b9bf;
  line-height: 1.4;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 18px;
}

.footer-social a {
  color: #f5c400;
  font-size: 22px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social a:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.product-hero-media img{
  width:100%;
  height:auto;
  display:block;
  transition:opacity .4s ease;
}



/* =========================================================
   Magify Moments Booking Page (/get_moments/)
   Scope: body.page-moments-booking
   ========================================================= */

body.page-moments-booking {
  background:
    radial-gradient(circle at top, #1b2855 0%, #0b1020 48%, #070b16 100%);
  color: #eef3ff;
}

body.page-moments-booking .content.wrap {
  max-width: 980px;
  padding: 0 18px;
}

body.page-moments-booking .brand-header.wrap {
  max-width: 980px;
  padding: 0 18px;
}

body.page-moments-booking .hero {
  margin-bottom: 24px;
}

body.page-moments-booking .moments-booking-hero-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 920px) {
  body.page-moments-booking .moments-booking-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

body.page-moments-booking .moments-booking-hero-card,
body.page-moments-booking .card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 24px;
}

body.page-moments-booking .moments-booking-hero-card h2,
body.page-moments-booking .section h2 {
  margin: 0 0 10px;
}

body.page-moments-booking .moments-steps {
  margin: 0;
  padding-left: 20px;
  color: #d1d1d6;
  line-height: 1.7;
}

body.page-moments-booking .moments-steps li + li {
  margin-top: 10px;
}

body.page-moments-booking .section {
  margin-top: 18px;
}

body.page-moments-booking .section p {
  margin: 0;
  line-height: 1.7;
}

body.page-moments-booking .moments-booking-form-wrap {
  padding: 0;
  border: 0;
  background: transparent;
}

body.page-moments-booking .moments-booking-form {
  margin: 0;
}

body.page-moments-booking .section-title {
  margin: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #f5c400;
}

body.page-moments-booking .moments-form-intro {
  margin: 0 0 16px;
  color: #aab5d6;
  line-height: 1.6;
}

body.page-moments-booking .moments-section-title-spacer {
  margin-top: 24px;
}

body.page-moments-booking .grid,
body.page-moments-booking .radio-grid {
  display: grid;
  gap: 16px;
}

body.page-moments-booking .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-moments-booking .radio-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-moments-booking .plan-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.03);
  height: 100%;
}

body.page-moments-booking .plan-card h3 {
  margin: 12px 0 8px;
}

body.page-moments-booking .plan-option input {
  display: none;
}

body.page-moments-booking .plan-option .plan-card {
  cursor: pointer;
}

body.page-moments-booking .plan-option input:checked + .plan-card {
  border-color: rgba(245,196,0,.9);
  box-shadow: 0 0 0 4px rgba(245,196,0,.12);
}

body.page-moments-booking .label {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  margin: 0 0 8px;
}

body.page-moments-booking .muted,
body.page-moments-booking .help {
  color: #aab5d6;
}

body.page-moments-booking .help {
  margin-top: 6px;
  font-size: .82rem;
}

body.page-moments-booking .input-shell {
  position: relative;
}

body.page-moments-booking .field,
body.page-moments-booking .select-field {
  width: 100%;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: #0f1630;
  color: #eef3ff;
  padding: 0 16px;
  font-size: 15px;
  outline: none;
  transition: .18s ease;
}

body.page-moments-booking .field:focus,
body.page-moments-booking .select-field:focus {
  border-color: rgba(245,196,0,.85);
  box-shadow: 0 0 0 4px rgba(245,196,0,.12);
}

body.page-moments-booking .field::placeholder {
  color: #93a0c6;
}

body.page-moments-booking .select-field {
  appearance: none;
  padding-right: 44px;
}

body.page-moments-booking .select-wrap::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #c7d1ef;
  font-size: 18px;
}

body.page-moments-booking .date-shell .field {
  padding-right: 48px;
  color-scheme: light;
}

body.page-moments-booking .field[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  filter: invert(1);
}

body.page-moments-booking .price-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

body.page-moments-booking .offer {
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
}

body.page-moments-booking .reg {
  color: #94a2ca;
  text-decoration: line-through;
}

body.page-moments-booking .pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245,196,0,.14);
  color: #ffd84d;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}

body.page-moments-booking .moments-plan-hint {
  margin-top: 12px;
}

body.page-moments-booking .moments-booking-actions {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

body.page-moments-booking .btn {
  min-height: 54px;
}

body.page-moments-booking .success {
  display: none;
  margin-top: 16px;
}

body.page-moments-booking .faq {
  margin-top: 12px;
}

body.page-moments-booking .footer {
  text-align: center;
  color: #aab5d6;
  font-size: .9rem;
  margin-top: 18px;
  line-height: 1.7;
}

body.page-moments-booking .footer a {
  color: #f5c400;
  text-decoration: none;
}

body.page-moments-booking .iti {
  width: 100%;
  display: block;
}

body.page-moments-booking .iti input[type="tel"] {
  width: 100%;
  padding-left: 88px;
}

@media (max-width: 820px) {
  body.page-moments-booking .grid,
  body.page-moments-booking .radio-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Try Demo Page
   ========================================================= */
body.page-try-demo .try-grid {
  align-items: stretch;
}

body.page-try-demo .try-card-wrap {
  display: flex;
  align-items: stretch;
}

body.page-try-demo .try-card {
  width: 100%;
  border: 1px solid #2a2a2f;
  border-radius: 18px;
  background: rgba(0,0,0,0.24);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  text-align: center;
}

body.page-try-demo .try-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
}

body.page-try-demo .try-card-sub {
  color: #d1d1d6;
  line-height: 1.5;
  margin-bottom: 16px;
}

body.page-try-demo .try-qr-wrap {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid #2a2a2f;
  background: #ffffff;
  padding: 18px;
}

body.page-try-demo .try-qr-wrap.is-loading::before {
  content: 'Loading QR code…';
  color: #555;
  font-weight: 600;
}

body.page-try-demo .try-qr-canvas,
body.page-try-demo .try-qr-canvas canvas {
  width: 100%;
  max-width: 320px;
  height: auto;
}

body.page-try-demo .try-link-wrap {
  margin-top: 14px;
}

body.page-try-demo .try-fallback-link {
  color: #f5c400;
  text-decoration: none;
  font-weight: 700;
}

body.page-try-demo .try-help-text {
  margin-top: 14px;
  color: #bdbdc7;
  line-height: 1.6;
}

.try-qr-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:340px;
}

.try-qr-canvas{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:320px;
  min-width:320px;
}

.try-qr-canvas img{
  display:block;
  width:320px;
  max-width:100%;
  height:auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

white-space: pre-line;

/* =========================================================
   SEO/AIEO Use-Case Pages
   Release: Magify Moments v1.13.0 — SEO/AIEO Ignition & Baseline Normalization
   Timestamp: 2026-05-30 (America/Jamaica)
   Author: Nova, Senior Developer
   ========================================================= */

body.page-product .eyebrow {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,196,0,0.35);
  background: rgba(245,196,0,0.10);
  color: #f5c400;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}

body.page-product .feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

@media (min-width: 820px) {
  body.page-product .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

body.page-product .feature-card {
  border: 1px solid #2a2a2f;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  padding: 14px;
}

body.page-product .feature-card h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1rem;
}

body.page-product .feature-card p {
  margin: 0;
  color: #d1d1d6;
  line-height: 1.55;
}

body.page-product .seo-hero-card {
  border: 1px solid #2a2a2f;
  border-radius: 16px;
  background:
    radial-gradient(260px 200px at 20% 20%, rgba(245,196,0,0.20), transparent 60%),
    rgba(0,0,0,0.22);
  padding: 18px;
}

body.page-product .seo-hero-card h2 {
  margin: 0 0 10px;
  color: #ffffff;
}

body.page-product .seo-hero-card ol,
body.page-product .seo-list {
  margin: 0;
  padding-left: 22px;
  color: #d1d1d6;
  line-height: 1.7;
}

body.page-product .use-case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 720px) {
  body.page-product .use-case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.page-product .use-case-link {
  display: block;
  border: 1px solid #2a2a2f;
  border-radius: 12px;
  padding: 12px 14px;
  color: #ffffff;
  text-decoration: none;
  background: rgba(0,0,0,0.18);
  font-weight: 750;
}

body.page-product .use-case-link:hover {
  border-color: rgba(245,196,0,0.65);
  color: #f5c400;
}