/*
 * Global styles for the Ripl marketing site.
 *
 * This stylesheet defines a shared design system used by both the venue
 * and investor pages. It implements the warm, airy café vibe
 * specified in the build brief: soft background colours, clear
 * typography using Inter, generous whitespace and subtle motion
 * effects. Components such as cards, forms and stat tiles are
 * modular and responsive, scaling gracefully from desktop down to
 * mobile breakpoints. All colours meet WCAG AA contrast ratios.
 */

/* Root palette definition. Changing these values will update colours
   throughout the site. */
:root {
  --bg: #efede1;
  --blue-light: #b0e2e8;
  --blue-mid: #7fb0b6;
  --blue-dark: #508086;
  --orange: #ff8f53;
  --orange-light: #ffc081;
  --orange-dark: #c76026;
  --text-color: #10263e;
  --white: #ffffff;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Basic reset and typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg);
  color: var(--text-color);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.2;
}

/* Hero heading sizing: bigger on the venue page for emphasis,
   slightly smaller on investor page to accommodate the longer line. */
h1.hero-heading {
  font-size: 3.5rem;
  line-height: 1.1;
}

@media (min-width: 600px) {
  h1.hero-heading {
    font-size: 4.8rem;
  }
}

/* Investor hero headings use a more modest size and colour to fit the
   longer string comfortably on one line. */
.investor-hero .hero-heading {
  font-size: 2.8rem;
  color: var(--blue-dark);
}

@media (min-width: 600px) {
  .investor-hero .hero-heading {
    font-size: 3.6rem;
  }
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

small {
  font-size: 0.8rem;
}

/* Visually hidden class for accessible labels */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Container to centralise content and limit width */
.container {
  width: 90%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Accent colours applied to selected text fragments */
.accent-orange {
  color: var(--orange);
}
.accent-blue {
  color: var(--blue-dark);
}

/* Lighten the blue accent specifically in hero headings to reduce the
   orange dominance without altering the investor page palette.  The
   mid‑tone blue better balances the warm background while still
   drawing attention. */
.hero-heading .accent-blue {
  color: var(--blue-mid);
}

/* Navigation bar */
.page-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  padding-top: 1rem;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.nav a {
  text-decoration: none;
  color: var(--text-color);
  padding: 0.5rem 0.75rem;
  transition: color 0.15s ease;
}

/* Active navigation link styling */
.nav a.active {
  text-decoration: underline;
  color: var(--orange);
}

.nav a:hover {
  color: var(--orange);
}

.nav .logo {
  font-weight: 800;
  font-size: 1.4rem;
}

/* Hero styles */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 4rem 0;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../assets/hero_blurred.png');
  background-size: cover;
  background-position: center;
  z-index: -3;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: -2;
}

/* Subtle ripple animation behind the hero content */
.hero-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%);
  animation: ripple 12s infinite ease-in-out;
  z-index: -1;
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  70% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-animation {
    animation: none;
    opacity: 0;
  }
}

.hero-content {
  z-index: 1;
}

.subheadline {
  font-size: 1.125rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  font-weight: 600;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Form styles */
/* Legacy form layout retained for compatibility with old sections */
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.fields-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 600px) {
  .fields-group {
    flex-direction: row;
  }
}

.input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.input-wrapper input,
.input-wrapper select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--text-color);
  box-shadow: var(--shadow-sm);
}

.input-wrapper input::placeholder,
.input-wrapper select {
  color: var(--blue-dark);
}

.input-wrapper select {
  appearance: none;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D"http%3A//www.w3.org/2000/svg"%20viewBox%3D"0%200%20512%20512"%3E%3Cpath%20fill%3D%22%23508086%22%20d%3D%22M256%20320L96%20160h320L256%20320z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.65rem;
}

/* Hide default select arrow on Firefox */
@-moz-document url-prefix() {
  .input-wrapper select {
    background-image: none;
  }
}

/* CTA button */
.cta-btn {
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: linear-gradient(to right, var(--orange-light), var(--orange));
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.cta-btn:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.honeypot {
  display: none;
}

/* Status message shown after form submission */
.form-status {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--blue-dark);
  min-height: 1.2rem;
}

/* New waitlist form styles */
/*
 * The waitlist form container constrains its maximum width on larger
 * screens to avoid sprawling inputs.  On mobile the form takes the full
 * width of the viewport, while on desktop it tops out around 600px.
 */
.waitlist-form {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.waitlist-form .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.5rem;
  /* Center the form row horizontally within the form container */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 600px) {
  .waitlist-form .form-row {
    flex-direction: row;
    align-items: center;
  }
}

.waitlist-form input[type="email"] {
  flex: 1;
  max-width: 100%;
  /* Reduce height to a modern 48px and horizontal padding for clarity */
  height: 3rem;
  padding: 0 0.9rem;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--text-color);
  box-shadow: var(--shadow-sm);
}

.waitlist-form input[type="email"]::placeholder {
  color: var(--blue-dark);
}

.waitlist-form .cta-btn {
  /* Match the button height to the input so they align neatly */
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Cards (used in patterns, value etc.) */
.cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 600px) {
  .cards.three-col {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.card {
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 2rem 1.5rem;
  text-align: center;
  flex: 1 1 250px;
}

.card-icon {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.card p {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Proof (stat) tiles */
.proof {
  padding: 4rem 0;
  text-align: center;
}

.proof-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.stat {
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  flex: 1;
}

.stat h3 {
  font-size: 2rem;
  color: var(--orange);
  margin-bottom: 0.5rem;
}

.stat p {
  font-size: 1rem;
  line-height: 1.4;
}

.stat small {
  font-size: 0.8rem;
  color: var(--blue-dark);
}

/* Benefits snapshot list */
/* Benefits snapshot section */
.benefits {
  padding: 4rem 0;
}

/* Highlights section on the investor page adopts the same vertical spacing
   as the benefits section on the venue page for visual harmony. */
.highlights {
  padding: 4rem 0;
}

/* New benefit grid layout */
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.benefit-item {
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  text-align: center;
}

.benefit-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--orange);
}

.benefit-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.benefit-item p {
  font-size: 1rem;
  line-height: 1.4;
}

@media (min-width: 600px) {
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .benefit-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* How it works flow list */
.flow {
  padding: 4rem 0;
}

.flow-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: step;
  font-size: 1rem;
}

.flow-list li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.flow-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Community vision section */
.community {
  padding: 4rem 0;
  text-align: center;
}

.community-tagline {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--blue-dark);
}

.testimonial {
  font-style: italic;
  font-size: 1rem;
  color: var(--blue-dark);
  max-width: 600px;
  margin: 0 auto;
}

/* Keep the typed text element a fixed width to avoid layout shift */
/* The typed text container maintains a fixed width equal to the longest word
   (“coworking spaces”), preventing layout shift as words change. */
.typed-target {
  display: inline-block;
  width: 16ch;
  text-align: left;
}

/* Growth list on investor page */
.growth {
  padding: 4rem 0;
}

.growth-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
  font-size: 1rem;
}

.growth-list li {
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.growth-list li strong {
  color: var(--orange);
}

@media (min-width: 600px) {
  .growth-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 600px) {
  .proof-grid {
    flex-direction: row;
  }
  .stat {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* Narrative section on investor page */
.narrative {
  padding: 4rem 0;
  text-align: center;
}

.narrative-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.narrative-item {
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  flex: 1;
}

.narrative-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.narrative-item p {
  font-size: 0.95rem;
  line-height: 1.4;
}

@media (min-width: 600px) {
  .narrative-grid {
    flex-direction: row;
  }
  .narrative-item {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* Mission section */
.mission {
  padding: 4rem 0;
  text-align: center;
}

.mission-text {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--blue-dark);
}

/* Final CTA section */
.final-cta {
  padding: 4rem 0;
  text-align: center;
}

.final-cta h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta-tagline {
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* New How It Works styles */
.how-it-works {
  padding: 4rem 0;
}

.how-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.steps-list li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.steps-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.mockups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mockup {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mockup-placeholder {
  width: 100%;
  height: 220px;
  /* Use a subtle dashed border and soft shadow to suggest a device frame */
  background-color: var(--white);
  border: 1.5px dashed var(--blue-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-dark);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.mockup-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--blue-dark);
}

@media (min-width: 600px) {
  /* On larger screens, switch to a flex layout so the steps and mockups
     sit side‑by‑side and share the same height.  Stretch children to
     match heights and provide equal spacing. */
  /* Use a two‑column grid on larger screens: text on the left, images on the right */
  .how-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
  }
  .steps {
    /* Let the list itself control the spacing; just ensure it fills the available height */
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /*
   * Spread the How It Works steps evenly top to bottom using a CSS grid.
   * Setting repeat(4, 1fr) allocates equal space for each list item.
   */
  .steps-list {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
  }
  .steps-list li {
    counter-increment: step;
    position: relative;
    padding-left: 2.5rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    margin: 0;
  }
  .steps-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--orange);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }
  .mockups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    height: 100%;
  }
  .mockup-placeholder {
    height: 250px;
  }
}

@media (min-width: 900px) {
  .mockup-placeholder {
    height: 280px;
  }
}

/* Social proof styles */
.social-proof {
  padding: 4rem 0;
  text-align: center;
}

.proof-quote {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue-dark);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.testimonial-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--blue-light);
}

.testimonial-text {
  font-style: italic;
  color: var(--blue-dark);
}

/* Effortless setup styles */
.setup-section {
  padding: 4rem 0;
}

.setup-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.setup-text {
  flex: 1;
}

.setup-list {
  list-style: none;
  margin-top: 1rem;
  padding: 0;
}

.setup-list li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
  color: var(--text-color);
}

@media (min-width: 600px) {
  /* Spread the setup list items evenly to match the illustration height */
  .setup-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .setup-list li {
    margin-bottom: 0;
  }
}

.setup-illustration {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.illustration-placeholder {
  width: 100%;
  max-width: 400px;
  height: 250px;
  background-color: var(--white);
  border: 2px dashed var(--blue-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-dark);
  font-size: 0.9rem;
}

@media (min-width: 600px) {
  .setup-wrapper {
    flex-direction: row;
    /* Stretch children so the text column matches the illustration height */
    align-items: stretch;
  }
  .setup-text {
    margin-right: 2rem;
    /* Allow the list inside to grow and evenly space its items */
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}

/* FAQ styles */
.faq-section {
  padding: 4rem 0;
}

.faq-item {
  margin-bottom: 1rem;
}

.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  padding: 0.75rem 1rem;
  background-color: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin: 0.5rem 0 0 0;
  padding: 0.75rem 1rem;
  background-color: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* CTA section styles */
.cta-section {
  padding: 4rem 0;
  background: linear-gradient(to right, var(--blue-light), var(--blue-mid));
  color: var(--white);
  text-align: center;
  /* Remove bottom margin so the gradient flows into the footer */
  margin-bottom: 0;
}

.cta-section h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.cta-section .form-row {
  max-width: 600px;
  margin: 0 auto;
}

.cta-section input[type="email"] {
  background-color: var(--white);
  color: var(--text-color);
}

.cta-section .cta-btn {
  background: linear-gradient(to right, var(--orange-light), var(--orange));
  color: var(--white);
}

.cta-section .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Footer */
.site-footer {
  padding: 2rem 0;
  text-align: center;
  /* Extend the blue gradient from the final CTA through the footer */
  background: linear-gradient(to right, var(--blue-light), var(--blue-mid));
  color: var(--white);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.footer-link {
  text-decoration: none;
  color: var(--white);
  margin-left: auto;
  font-weight: 500;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--orange);
}

@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .footer-link {
    margin-left: 0;
  }
}