/* Utility class to center text */
.center-text {
  text-align: center;
  margin-top: 1.5rem;
}
/* Utility black text class for section titles */
.black {
  color: #000;
}
/* Italic Go Rizzy styling for section titles */
.go-italic {
  font-style: italic;
  color: #000;
  margin-right: 0.15em;
}
.rizzy-italic {
  font-style: italic;
  color: var(--brand-red);
}
/* Wrapper for rizzy to allow positioning of TM */
.rizzy-wrapper { position: relative; display: inline-block; }

/* Small TM positioned bottom-right of the 'y' in Rizzy */
.tm {
  position: absolute;
  /* place TM near the bottom-right of the 'y' (slightly above the bottom edge) */
  right: -0.02em;
  bottom: 0.06em;
  /* match footer TM size (footer p font-size: 1.25rem) */
  font-size: 1.25rem;
  color: #666; /* match footer grey */
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 600px) {
  .tm { font-size: 1rem; right: -0.02em; bottom: 0.04em; }
}
/* Go Rizzy — World-Class Landing Page Styles */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root {
  --brand-red: #FF2300;
  --brand-red-dark: #CC1900;
  --brand-red-hover: #FF4400;
  --brand-red-rgb: 255,35,0;
  --box-heading-size: 1.6rem; /* unified size for white-box headings */
}
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  /* Use pure black for a unified page background */
  background: #000000;
  color: #fff;
  line-height: 1.7;

}

/* Hero Section */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem 3rem 1.5rem;
  /* solid black background to match page */
  background: #000000;
}
.hero-content {
  max-width: 600px;
}
.hero-title {
  /* bumped to next step for stronger visual hierarchy */
  font-size: 6rem;
  font-weight: 800;
  margin: 0 0 0.3rem 0;
  letter-spacing: -2px;
}
.be { color: #fff; display: inline-block; margin-right: 0.15em; font-style: italic; }
.rizzy { color: var(--brand-red); margin-left: 0; font-style: italic; }
.hero-subtitle {
  font-size: 1.6rem;
  color: #fff;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  letter-spacing: 1px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

/* Confirmation page: ensure subtitle is centered and matches index sizing */
body.delete-confirmation .hero-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure subtitle on confirmation matches delete page subtitle size */
body.delete-confirmation .hero-subtitle { font-size: 1.6rem; }
/* Strong: make sure subtitle is a block and truly centered under the title */
body.delete-confirmation .hero-content .hero-subtitle {
  display: block;
  margin: 0 auto;
  text-align: center;
}
/* Ensure the confirmation hero section centers its content both horizontally and vertically */
body.delete-confirmation .hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.delete-confirmation .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Force the confirmation hero content to use the same max-width as the index/delete pages
   and ensure the subtitle matches size and centering exactly. */
body.delete-confirmation .hero-content {
  max-width: 600px; /* match .hero-content on index and delete pages */
}

body.delete-confirmation .hero-subtitle {
  font-size: 1.6rem !important; /* ensure same size as delete_account page */
  display: block;
  margin: 0 auto;
  text-align: center;
  color: #fff; /* explicit so removing inline style doesn't change color */
}
.hero-tagline {
  font-size: 1.25rem;
  color: #ccc;
  margin: 0 0 2rem 0;
}
.hero-cta {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0.9em 2.5em;
  border-radius: 2rem;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(var(--brand-red-rgb), 0.25);
  transition: background 0.2s, transform 0.2s;
}
.small-cta {
  font-size: 1rem;
  padding: 0.6em 1.5em;
}
.hero-cta:hover {
  background: var(--brand-red-hover);
  transform: translateY(-2px) scale(1.03);
}
.hero-images {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2.5rem;
}
.hero-phone {
  width: 160px;
  max-width: 40vw;
  height: auto;
  border-radius: 1.2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  background: #222;
}

/* Problem / Empathy Section */
.problem-section {
  background: #fff;
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 1.5rem;
  margin-top: -1.5rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
}
.problem-section h2 {
  color: var(--brand-red);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.7rem 0;
}

/* Value Proposition Section */
.value-section {
  text-align: center;
  max-width: 700px;
  margin: 3rem auto 2rem auto;
  padding: 3rem 1.5rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
}
.value-section h2 {
  color: var(--brand-red);
  font-size: var(--box-heading-size);
  font-weight: 800;
  margin-bottom: 1.2rem;
}
.value-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  text-align: left;
  display: inline-block;
}
.value-list li {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #000;
}

/* Match the small 'Join Wait List' label under the value list to the list item size */
.value-section .join-waitlist-label {
  font-size: 1.2rem;
  margin: 0.6rem 0 0.4rem 0;
  color: #000;
  font-weight: 600;
}
.value-list .check {
  color: var(--brand-red);
  margin-right: 0.4em;
  font-weight: 700;
}
.red-check {
  color: var(--brand-red) !important;
}
.value-statement {
  font-size: 1.05rem;
  color: #bbb;
  margin-top: 1rem;
}
.value-statement b {
  color: var(--brand-red);
}

/* Perfect For Section */
.perfect-section {
  text-align: center;
  max-width: 700px;
  margin: 2rem auto 2.5rem auto;
  padding: 3rem 1.5rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  color: #000;
}
.perfect-section h2 {
  color: #000;
  font-size: var(--box-heading-size);
  font-weight: 700;
  margin-bottom: 0.7rem;
}

/* About / App Description Section */
.about-section {
  text-align: left;
  max-width: 700px;
  margin: 2rem auto 2.5rem auto;
  padding: 3rem 1.5rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  color: #000;
  font-size: 1.2rem;
  line-height: 1.7;
}
.about-section h2 {
  color: var(--brand-red);
  font-size: var(--box-heading-size);
  font-weight: 800;
  margin-bottom: 1.2rem;
  text-align: center;
}
.about-section p {
  margin: 0;
}
.perfect-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  text-align: left;
  display: inline-block;
  color: #000;
  font-size: 1.2rem;
}
.perfect-list li {
  margin-bottom: 0.5rem;
  color: #000;
}

/* Unified body text inside white boxes (not headings) */
.value-section .value-list li,
.perfect-section .perfect-list li,
.about-section p,
.value-section .value-statement {
  font-size: 1.2rem; /* unified size */
  line-height: 1.6;   /* improve readability */
  color: #000;
}

/* CTA Section */
.cta-section {
  background: #000000;
  text-align: center;
  padding: 3rem 1.5rem 2.5rem 1.5rem;
  margin-top: 1rem;
}
.cta-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.cta-section p {
  font-size: 1.08rem;
  color: #bbb;
  margin-bottom: 1.5rem;
}
.store-icons {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1rem;
}
.store-icons img {
  width: 160px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  background: #222;
  padding: 6px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: transform 0.2s;
}
.store-icons img:hover {
  transform: scale(1.07);
}
.coming-soon {
  color: var(--brand-red);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Waitlist form styles (used on index CTA) */
.waitlist-form { margin: 0 auto; max-width: 720px; margin-bottom: 0.6rem; }
.waitlist-row { display: flex; gap: 0.6rem; justify-content: center; align-items: center; }
.waitlist-row input[type="email"] {
  min-width: 220px;
  max-width: 420px;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-size: 1rem;
}
.waitlist-row input::placeholder { color: #ddd; opacity: 0.9; }
.waitlist-row .hero-cta { padding: 0.6rem 1.25rem; }
@media (max-width: 600px) {
  .waitlist-row { flex-direction: column; gap: 0.6rem; }
  .waitlist-row input[type="email"] { width: 100%; max-width: 100%; }
}

/* When the waitlist form appears inside white boxes (e.g. .value-section),
   invert colors and add borders/shadows so inputs and buttons remain visible. */
.value-section .waitlist-form {
  /* Make the form break to its own line under the list; transparent container */
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0.8rem auto 0.8rem auto;
  padding: 0.6rem;
  border-radius: 10px;
  background: transparent; /* do not draw a white box behind inputs */
  box-shadow: none;
}
.value-section .waitlist-row { gap: 0.5rem; }
.value-section .waitlist-row input[type="email"] {
  background: #ffffff;
  color: #111;
  border: 1px solid #e6e6e6;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}
.value-section .waitlist-row input::placeholder { color: #777; }
.value-section .waitlist-row .hero-cta {
  background: var(--brand-red);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(var(--brand-red-rgb), 0.18);
}
.value-section .waitlist-row .hero-cta:hover { background: var(--brand-red-dark); }

/* Footer */
footer {
  text-align: center;
  padding: 2rem 1rem 1.5rem 1rem;
  background: #000000;
}
.footer-link {
  color: var(--brand-red);
  font-size: 1.25rem;
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.footer-link:hover {
  text-decoration: underline;
}
footer p {
  color: #666;
  font-size: 1.25rem;
  margin: 0.5rem 0 0 0;
}

/* Responsive */
@media (max-width: 600px) {
  /* increased for mobile readability — next step up */
  .hero-title { font-size: 3.6rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-tagline { font-size: 1rem; }
  .hero-images { flex-direction: column; gap: 1rem; }
  .hero-phone { width: 60vw; max-width: 200px; }
  .problem-section, .value-section, .perfect-section, .cta-section { padding: 2rem 1rem; }
}

/* Scoped layout and color theme for the Terms & Policies page */
/* Page-level background + base text color */
body.terms-page {
  background: #ffffff; /* white page background for printable/legal pages */
  color: #000000;
}

/* Ensure header/footer on this page remain visually consistent */
body.terms-page header,
body.terms-page footer {
  background: #ffffff;
  color: #000000;
}

/* Main content container for comfortable reading */
body.terms-page main {
  max-width: 920px; /* comfortable reading width */
  margin: 2rem auto; /* center and give top/bottom breathing room */
  padding: 0 24px; /* standard left/right indent */
  color: #000000; /* dark text on white background */
}

@media (max-width: 600px) {
  body.terms-page main { padding: 0 16px; }
}

/* Increase readable body text for Terms & Policies page */
body.terms-page main,
body.terms-page main p,
body.terms-page main li,
body.terms-page main dd {
  font-size: 1.125rem; /* ~18px for easier reading */
  line-height: 1.75;
  color: #000000;
}

@media (max-width: 600px) {
  body.terms-page main,
  body.terms-page main p,
  body.terms-page main li,
  body.terms-page main dd {
    font-size: 1.0625rem; /* ~17px on small screens */
  }
}

/* Headings and links on the terms page */
body.terms-page h2,
body.terms-page h3,
body.terms-page h4,
body.terms-page h5 {
  color: #000000; /* titles on terms page should be black */
}

body.terms-page a {
  color: var(--brand-red);
  text-decoration: underline;
}

/* Centered layout for the Delete Account page */
body.delete-page {
  display: flex;
  align-items: flex-start; /* align main to the top so hero starts near the page top */
  justify-content: center; /* center main horizontally to match index title position */
  min-height: 100vh; /* ensure full viewport height */
  padding: 0; /* remove default body padding if any */
}

body.delete-page main {
  max-width: 920px;
  /* keep width/spacing but ensure children are centered vertically/horizontally */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 640px; /* same width as index hero/content */
  margin: 0 auto;
  padding-top: 4rem; /* match index spacing */
  text-align: center; /* center the paragraphs and button */
}

/* Match the index page top spacing for the hero: 4rem top padding */
body.delete-page main { padding-top: 4rem; }

/* Google sign-in image button styling */
.google-signin {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 0.5rem; /* keep previous spacing */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.google-signin img {
  height: 40px; /* industry-standard recognizable height */
  width: auto;
  display: block;
}
@media (max-width: 480px) {
  .google-signin img { height: 36px; }
}

/* Slightly raise the page title on the delete page so it sits higher in the viewport */
/* Ensure hero title is not additionally translated on the delete page (we match index spacing) */
body.delete-page .hero-title {
  display: inline-block;
  transform: none;
}
@media (max-width: 600px) {
  body.delete-page .hero-title { transform: none; }
}

/* Ensure hero title on confirmation page matches index spacing (no extra transforms) */
body.delete-confirmation .hero-title {
  display: inline-block;
  transform: none;
}


/* White button style (used for Return to Home on confirmation page) */
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #ffffff;
  color: #000000;
  border: 1px solid #e6e6e6;
  height: 40px; /* match Google logo button */
  padding: 0 12px; /* horizontal padding only; vertical centering via height */
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}
.btn-white:hover,
.btn-white:focus {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .btn-white { height: 36px; padding: 0 10px; font-size: 0.92rem; }
}

/* Confirmation page: slightly larger body text for better readability */
body.delete-confirmation .confirmation p {
  font-size: 1.2rem; /* match index white-box body size */
  line-height: 1.6;
  margin: 0.6rem 0;
  color: #e6e6e6; /* keep readable on dark background */
}

/* Center confirmation page paragraphs and actions */
body.delete-confirmation .confirmation {
  max-width: 640px; /* same width as index hero/content */
  margin: 0 auto;
  /* Match index hero top spacing so the title sits the same distance from the page top */
  padding-top: 4rem; /* same top padding as .hero-section on index.html */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center; /* center the paragraphs and button */
}
.confirmation .actions { margin-top: 1.5rem; }
.confirmation .actions a, .confirmation .actions button { margin: 0 .5rem; }

/* Message box: center lead, left-align follow-up paragraphs to lead's left edge */
.confirmation .msg-box {
  max-width: 640px;
  margin: 0 auto;
}
.confirmation .msg-box .lead {
  text-align: center;
  font-size: 1.2rem; /* matches confirmation body size */
  margin: 0.4rem 0 0.8rem 0;
}
.confirmation .msg-box .follow-left {
  text-align: center;
  margin: 0.35rem 0;
  max-width: 640px;
  padding-left: 0; /* remove left nudge — center everything */
}
.confirmation .msg-box .follow-left p {
  margin: 0.35rem 0;
  font-size: 1.2rem; /* match index white-box body size */
  line-height: 1.6;
  color: #e6e6e6;
}
.confirmation .msg-box .follow-left p { margin: 0.35rem 0; }
.confirmation .msg-box .msg-inner {
  display: block;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

/* Footer text slightly muted on white */
body.terms-page footer p {
  color: #666666;
}