/* RAVL CSS */

/*
 * PR26-488 / PR26-487 - design tokens.
 *
 * There was no `:root` block, so the brand blue was typed literally in 29 places. That is why
 * PR26-487 exists as a separate ticket from this one: a contrast fix spread over 29 hand-edits is
 * a fix that gets applied to 27 of them. Every literal is now a token, so changing a colour is one
 * line and cannot be partially applied.
 *
 * `--ravl-blue` is unchanged - it is the brand colour and it is correct on dark backgrounds and as
 * a decorative rule. `--ravl-cta` is the same blue darkened to clear WCAG AA against white text
 * (4.70:1, was 2.56:1) and is used wherever white text sits on it. They are separate tokens rather
 * than one changed value because darkening the brand blue everywhere would repaint the site; the
 * contrast problem is specifically white-on-blue.
 */
:root {
    /* PR26-675. This read `--ravl-blue: var(--ravl-blue);` — the find-and-replace in 41793ef that
       turned 29 literals into tokens also rewrote the definition line. A self-referential custom
       property is a cyclic dependency, so the token resolved to guaranteed-invalid: every
       `color: var(--ravl-blue)` fell back to inherit and every `background-color` to transparent.
       That is the missing first star and the missing blue column, and 29 other places besides. */
    --ravl-blue: #11AAFF;
    --ravl-cta: #0077C8;
    --ravl-cta-hover: #005C9E;

    /* PR26-488. Layout containers were `75vw` with no ceiling, so a line of body copy on a 27in
       display ran to roughly 200 characters. `min()` keeps the proportional behaviour that made
       75vw attractive and stops it past the point where a line stops being readable. */
    --ravl-container-max: 1200px;
}
/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
}

/* Navigation styles */
.site-header {
    position: fixed; /* Fix the header to the top of the page */
    top: 0; /* Align it to the top */
    left: 0; /* Align it to the left edge */
    width: 100%; /* Make it full-width */
    z-index: 100; /* Ensure it's above other content */
    
}

.site-navbar {
    padding: 10px 15px; /* Adjust padding for spacing inside the navbar */
    margin-left: 5vw;
    margin-right: 5vw;
    padding-bottom: 8px;
    padding-top: 8px;
  }
  
  .site-navbar-dark-border {
  border: 2px white solid;
  border-radius: 25px;
  background-color: rgba(0, 0, 0, 0.55);
  }
  
  .site-navbar-light-border {
  border: 2px black solid;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.80);
  }
  
  
  .sitenavbar-brand img {
    max-height: 35px; /* Maintain the height of the logo */
  }
  
  .site-navbar-nav .site-menu-link {
    color: white; /* Text color for links */
    padding: 10px 15px; /* Padding for better clickable area */
    text-decoration: none;
    font-weight: 500;
  }
  
  .site-navbar-nav .site-menu-link:hover {
    color: #007bff; /* Highlight color on hover */
  }
  
  .site-nav-item {
  margin-right: 2.5vw;
  margin-left:2.5vw;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  }
  
  .navbar {
    margin-left: 5vw;
    margin-right: 5vw;
  }

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-logo {
    height: 48px;
}

.logo {
    height: 100%;
    width: auto;
}

.dark-logo {
    display: none;
}

.menu-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.menu-link a {
    height: 100%;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    transition: color 0.3s ease;
  }
  
  /* Individual link hover colors */
  .menu-link a[href="/"]:hover {
    color: var(--ravl-blue);
  }
  
  .menu-link a[href="/about"]:hover {
    color: #A4B3F1;
  }
  
  .menu-link a[href="/events"]:hover {
    color: #EFB7A3;
  }
  
  .menu-link a[href="/articles"]:hover {
    color: #F3D68D;
  }
  
  .menu-link a[href="/join"]:hover {
    color: #8EF1DA;
  }

/* Light section navigation */
.nav-links {
    display: flex;
    gap: 0;
    border: 2px solid black;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.55); /* White background for light sections */
    padding: 0;
    height: 48px;
    transition: background-color 0.3s ease;
}

.nav-links a {
    height: 100%;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    transition: color 0.3s ease;
}

/* Individual link hover colors */
.nav-links a[href="/"]:hover {
    color: var(--ravl-blue);
}

.nav-links a[href="/about"]:hover {
    color: #A4B3F1;
}

.nav-links a[href="/events"]:hover {
    color: #EFB7A3;
}

.nav-links a[href="/articles"]:hover {
    color: #F3D68D;
}

.nav-links a[href="/join"]:hover {
    color: #8EF1DA;
}

/* Dark section navigation */
.dark-section .nav-links {
    border-color: white;
    background-color: rgba(0, 0, 0, 0.55); /* Black background for dark sections */
}

.dark-section .nav-links a {
    color: white;
}

.dark-section .nav-links a:hover {
    background-color: transparent;
}

.dark-section .dark-logo {
    display: block;
}

.dark-section .light-logo {
    display: none;
}

/* Hamburger menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 48px;
    height: 48px;
    padding: 12px;
    border: 2px solid black;
    border-radius: 25px;
    background: none;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: black;
}

/* Dark section hamburger menu - light/white style (base styles) */
.site-header.dark-section .hamburger-menu {
    border-color: white;
}

.site-header.dark-section .hamburger-menu span {
    background-color: white;
}

/* Mobile styles */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        border: none;
        background: none;
        height: auto;
    }

    .hamburger-menu {
        display: flex;
    }

    /* Dark section hamburger menu - light/white style (mobile override) */
    .site-header.dark-section .hamburger-menu {
        border-color: white;
    }

    .site-header.dark-section .hamburger-menu span {
        background-color: white;
    }

    .nav-links.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
    }

    .nav-links a {
        padding: 0.5rem 1.5rem;
        color: black;
        border: 2px solid black;
        border-radius: 25px;
        margin: 0.25rem 1rem;
        background-color: rgba(255, 255, 255, 0.55); /* White background for light sections */
    }

    .dark-section .nav-links.active {
        background: #262626;
    }

    .dark-section .nav-links a {
        border-color: white;
        color: white;
        background-color: rgba(0, 0, 0, 0.55); /* Black background for dark sections */
    }

    .nav-links a:hover {
        background-color: transparent;
    }
    
    .dark-section .nav-links a:hover {
        color: inherit; /* Prevents the text from turning black on hover */
    }
}

/* Footer styles */
.site-footer {
    background: linear-gradient(to bottom, #262626, #0D0D0D);
    color: white;
    padding: 0 0 2rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 0;
}

.footer-logo {
    margin-bottom: 2rem;
}

.footer-logo img {
    height: 48px;
    width: auto;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-column h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-column:nth-child(1) {
    text-align: left;
}

.footer-column:nth-child(2) {
    text-align: center;
}

.footer-column:nth-child(3) {
    text-align: right;
}

.footer-column a {
    display: block;
    color: white;
    text-decoration: none;
    margin-bottom: 0.5rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-column a:hover {
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Mobile footer styles */
@media (max-width: 768px) {
    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-column {
        margin-bottom: 2rem;
        text-align: center !important;
    }

    .footer-column:last-child {
        margin-bottom: 0;
    }

    .footer-column:nth-child(1),
    .footer-column:nth-child(2),
    .footer-column:nth-child(3) {
        text-align: center;
    }
}

/* Hero section styles */
.hero {
    min-height: 75vh;
    display: flex;
    width: 100%;
}

/* PR26-674. The text column was 40% wide with everything ranged RIGHT — a ragged left edge on a
   three-sentence paragraph, which is the hardest thing there is to read back to. Ranged left now,
   and the column widened to 45% so the measure lands around 560px rather than 358px: D1's headline
   sets on two lines at 3.5rem instead of running to four. `ch` caps the body so the measure holds
   on a wide display rather than growing with the column. */
.hero-content {
    flex: 0 0 45%;
    padding: 4rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: white;
    background: linear-gradient(to bottom, #262626, #0D0D0D);
}

.hero h1 {
    /* PR26-674. A fixed 3.5rem set D1 in SIX lines at 900px — the dead zone between the 768px
       mobile breakpoint and the width at which a 45% column is roomy. `clamp` ties the headline to
       the column it sits in: 3.5rem from ~1435px up, scaling down to a 2rem floor. */
    font-size: clamp(2rem, 3.9vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-align: left;
    max-width: 100%;
    line-height: 1.1;
}

/* PR26-674. D1 is two sentences and it is meant to land as two beats. Left to wrap on its own the
   break fell mid-sentence ("Add your trip. See / who else is going / to be there."), which reads
   as one long line that happened to contain a full stop. Each sentence is its own block so the
   break is always at the full stop, at every width — the space between the spans in the markup is
   what keeps it one sentence to a screen reader and to anyone copying the text. */
.hero h1 span {
    display: block;
}

.hero-line {
    width: 85px;
    height: 6px;
    background-color: var(--ravl-blue);
    margin: 1.5rem 0;
}

.hero p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: left;
    max-width: 46ch;
}

.join-button {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 25px;
    /* PR26-487: was `--ravl-blue`, which is 2.56:1 against the white label - below the 4.5:1 AA
       floor for normal text, on the site's primary call to action. */
    background-color: var(--ravl-cta);
    color: white;
    cursor: pointer;
    /* 0.3s is long enough to still be animating when a fast tapper has moved on. */
    transition: transform 0.15s ease, background-color 0.15s ease;
    text-decoration: none;
    display: inline-block;
}

/*
 * PR26-487. Every button on the site had exactly one state - a 2px lift on hover - and no focus
 * style at all. Two separate problems in that:
 *
 *   1. `transform` is invisible to a keyboard user, so a button that is focused looked identical
 *      to one that was not. There was no way to tell where you were on the page without a mouse.
 *   2. A colour that only moves on hover gives a pointer user no confirmation that a tap landed,
 *      which on a slow connection reads as a dead button and produces a second tap.
 *
 * `:focus-visible` rather than `:focus`, so a mouse click does not leave a ring behind it. The
 * outline is drawn in the brand blue with an offset so it reads against both the button and the
 * dark sections it sits on.
 */
.join-button:hover {
    background-color: var(--ravl-cta-hover);
    transform: translateY(-2px);
}

.join-button:focus-visible {
    outline: 2px solid var(--ravl-blue);
    outline-offset: 3px;
}

.join-button:active {
    background-color: var(--ravl-cta-hover);
    transform: translateY(0);
}

/* PR26-484: the hero's second action. Same shape, no fill, so it reads as secondary without
   introducing a third colour. The border carries the contrast rather than a background. */
.join-button-secondary {
    background-color: transparent;
    border: 2px solid white;
    color: white;
}

.join-button-secondary:hover,
.join-button-secondary:active {
    background-color: rgba(255, 255, 255, 0.12);
}

/* PR26-672: the poster frame.

   This wrapper was `background: #000`, so any load where the Vimeo player did not paint - autoplay
   refused, a slow connection, the embed failing outright - left 1618x959 of solid black inside a
   dark section. It did not read as broken, it read as a deliberate black panel, which is how it
   survived unreported.

   The image is the film's own first frame, from the same CDN that already serves the film, so this
   adds no third party the page did not already depend on. It is referenced rather than vendored
   because the egress rules on the machine this was fixed from could not download it - a locally
   hosted still under /images is strictly better and is a one-line swap once someone exports one.

   `background-color` stays black underneath: it is the correct colour behind a letterboxed 16:9
   still, and it is what shows for the few hundred milliseconds before the poster itself arrives. */
.hero-video {
    flex: 0 0 60%;
    position: relative;
    min-height: 60vh;
    overflow: hidden;
    background-color: #000;
    background-image: url('https://i.vimeocdn.com/video/2023681080-577a4116ecab7f6d29c07429ed808f72487f07a6bce09d28a2658af4fa92781c-d_1280?region=us');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.77777778vh; /* 16:9 aspect ratio */
    height: 56.25vw; /* 16:9 aspect ratio */
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* PR26-674. Between the mobile breakpoint and a comfortable desktop the 45% column is too narrow
   for a two-sentence headline and squeezed the body copy to a 277px measure. The video gives up
   ten points through this range; it is a background loop and loses nothing by it. */
@media (min-width: 769px) and (max-width: 1100px) {
    .hero-content {
        flex: 0 0 55%;
    }
}

/* Mobile hero styles */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
    }

    .hero-content {
        width: 100%;
        min-height: 60vh;
        align-items: center;
        text-align: center;
        padding: 6rem 1rem 2rem;
    }

    /* PR26-674. 3rem set D1 in four lines at 390px and left "there." alone on the last one.
       2.25rem gives three, with the second sentence on two. */
    .hero h1 {
        font-size: 2.25rem;
        text-align: center;
    }

    .hero p {
        text-align: center;
    }

    .hero-video {
        width: 100%;
        min-height: 40vh;
    }
}

/* Quote section styles */
.quote-section {
    min-height: 50vh;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.quote-content {
    width: min(75vw, var(--ravl-container-max));
    text-align: center;
    position: relative;
    padding: 2rem;
}

.quote-content p {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

/* Background quotes image */
.quote-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url('https://static.ravl.social/public/images/big-quotes.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 0;
}

/* Mobile quote styles */
@media (max-width: 768px) {
    .quote-content {
        width: 90vw;
    }
    
    .quote-content p {
        font-size: 1.8rem;
    }
}

/* Update Make The Most section styles */
.make-most-section {
    background: linear-gradient(to bottom, #F7F9FF, #D9D9D9);
    padding: 6rem 2rem;
    color: black;
}

.make-most-container {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
    text-align: center;
}

.make-most-section h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 4rem;
}

.benefits-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    border-radius: 12.5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 200px;
}

.benefit-card-1 {
    background: linear-gradient(135deg, #a8e0ff 0%, #d2d9f8 100%);
}

.benefit-card-2 {
    background: linear-gradient(135deg, #d2d9f8 0%, #c6f8ed 100%);
}

.benefit-card-3 {
    background: linear-gradient(135deg, #c6f8ed 0%, #a8e0ff 100%);
}

.checkmark {
    font-size: 2rem;
    color: black;
}

.benefit-card p {
    font-size: 1.5rem;
    line-height: 1.4;
    max-width: 80%;
    color: black;
    text-align: center;
    font-weight: 500;
}

/* Add to Make The Most section styles */
.make-most-intro {
    margin: 0 auto 4rem;
}

.make-most-intro p {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.make-most-intro p:last-child {
    margin-bottom: 0;
}

/* Update mobile styles */
@media (max-width: 768px) {
    .make-most-section {
        padding: 4rem 1rem;
    }

    .make-most-section h2 {
        font-size: 2.5rem;
        margin-bottom: 3rem;
    }

    .benefits-cards {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        padding: 2rem 1rem;
    }

    .benefit-card p {
        font-size: 1.2rem;
        max-width: 100%;
    }

    .make-most-container {
        width: 90vw;
    }

    .make-most-intro {
        margin-bottom: 3rem;
    }

    .make-most-intro p {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
}

/* Love RAVL section styles */
.love-ravl-section {
    background-color: white;
    padding: 3vh 2rem;
}

.love-ravl-container {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
    text-align: center;
}

.love-ravl-section h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 4rem;
}

.testimonials-grid {
    display: grid;
    /* PR26-488: was `repeat(3, 1fr)`, which held three columns all the way down to the single
       768px breakpoint - so a 800px-wide window got three unreadable columns. Mirrors
       `.events-list`, which already does this. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background-color: black;
    border-radius: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    color: white;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.95));
}

.testimonial-content {
    position: relative;
    z-index: 1;
}

.testimonial-text {
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.testimonial-author {
    margin-top: 0.5rem;
}

.author-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.author-role {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Mobile styles for Love RAVL section */
@media (max-width: 768px) {
    .love-ravl-section {
        padding: 4rem 1rem;
    }

    .love-ravl-container {
        width: 90vw;
    }

    .love-ravl-section h2 {
        font-size: 1.8rem;
        margin-bottom: 3rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .testimonial-text {
        font-size: 1.1rem;
    }
}

.stars {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--ravl-blue);
}

.stars span {
    margin: 0 0.25rem;
}

.stars span:nth-child(1) {
    color: var(--ravl-blue);
}

.stars span:nth-child(2) {
    color: #A4B3F1;
}

.stars span:nth-child(3) {
    color: #EFB7A3;
}

.stars span:nth-child(4) {
    color: #F3D68D;
}

.stars span:nth-child(5) {
    color: #8EF1DA;
}

@media (max-width: 768px) {
    .stars {
        font-size: 1.2rem;
    }
}

.join-button-container {
    margin-top: 4rem;
    text-align: center;
}

.love-ravl-section .join-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    height: 45px;
    font-size: 1.1rem;
    border: none;
    border-radius: 25px;
    background-color: var(--ravl-blue);
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.love-ravl-section .join-button:hover {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .join-button-container {
        margin-top: 3rem;
    }
}

/* Features section styles */
.features-section {
    background: white;
    padding: 0;
}

.features-container {
    width: 100%;
    margin: 0;
}

.features-grid {
    display: flex;
    flex-direction: column;
}

.feature-card {
    text-align: left;
    border-radius: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    width: min(75vw, var(--ravl-container-max));
    height: 50vh;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    border: 1px solid #D5F5E8;
    background-color: #EDFAF7;
}

.feature-card:last-child {
    margin-bottom: 0;
}

.feature-content {
    padding-right: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    width: 50%;
}

.feature-image {
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-radius: 50px;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-card:nth-child(even) {
    flex-direction: row-reverse;
}

.feature-card:nth-child(even) .feature-content {
    padding-right: 0;
    padding-left: 2rem;
}

.feature-category {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    color: var(--ravl-blue);
}

.feature-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.feature-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #333;
}

.feature-card h4:first-of-type {
    margin-top: 0;
}

.feature-card a {
    color: var(--ravl-blue);
    text-decoration: underline;
}

.feature-card a:hover {
    color: #0d8fcc;
}

.feature-cta-button {
    display: inline-block;
    margin-top: 2rem;
    text-decoration: none;
    color: white;
}

.feature-cta-button:hover {
    color: white;
}

/* Override feature-card link styles for the CTA button */
.feature-card a.feature-cta-button,
.feature-card a.feature-cta-button:hover {
    color: white;
    text-decoration: none;
}

.feature-card p {
    font-size: 1.25rem;
    line-height: 1.5;
    color: #666;
    margin-bottom: 1rem;
}

.feature-card p:last-child {
    margin-bottom: 0;
}

/* Spacing between beta page feature sections */
#whats-new {
    margin-top: 25px;
    margin-bottom: 25px;
}

#who-its-for,
#how-it-works,
#beta-benefits,
#safety,
#beta-expectations {
    margin-bottom: 25px;
}

/* Content-only feature cards (no image) */
.feature-card-content-only {
    height: auto;
    min-height: auto;
    padding: 3rem;
}

.feature-card-content-only .feature-content {
    width: 100%;
}

.feature-card-content-only .feature-image {
    display: none;
}

.feature-card ul,
.feature-card ol {
    font-size: 1.25rem;
    line-height: 1.5;
    color: #666;
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.feature-card li {
    margin-bottom: 0.5rem;
}

.feature-card ul:last-child,
.feature-card ol:last-child {
    margin-bottom: 0;
}

/* Mobile styles for Features section */
@media (max-width: 768px) {
    .feature-card {
        flex-direction: column;
        padding: 2rem 1rem;
        width: 90vw;
        height: auto;
    }

    .feature-content,
    .feature-image {
        width: 100%;
        padding: 0;
    }

    .feature-image {
        height: 340px;
        margin-top: 2rem;
    }

    .feature-card:nth-child(even) {
        flex-direction: column;
    }

    .feature-card:nth-child(even) .feature-content {
        padding: 0;
    }

    .feature-category,
    .feature-title {
        width: 90vw;
    }

    .feature-title {
        font-size: 1.8rem;
    }

    .feature-card p {
        font-size: 1.1rem;
    }
}

/* Large text section styles */
.large-text-section {
    background: white;
    padding-top: 8vh;
    padding-bottom: 8vh;
    color: black;
    text-align: center;
}

.large-text-container {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
}

.large-text {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.large-text:last-child {
    margin-bottom: 0;
}

/* Mobile styles */
@media (max-width: 768px) {
    .large-text-section {
        padding: 4rem 1rem;
    }

    .large-text-container {
        width: 90vw;
    }

    .large-text {
        font-size: 2rem;
    }
}

/* Form section styles */
.form-section {
    background: linear-gradient(to bottom, #262626, #0D0D0D);
    padding: 0 2rem;
    color: white;
    background-size: cover;
    background-position: center;
    position: relative;
    height: 50vh;
    display: flex;
    align-items: center;
}

.form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.form-container {
    position: relative;
    z-index: 1;
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
    text-align: center;
}

.form-section h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.form-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

.signup-form-inputs {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.signup-form input {
    flex: 1;
    padding: 0 1rem;
    height: 45px;
    border: none;
    border-radius: 25px;
    font-size: 1.1rem;
}

.signup-form .join-button {
    padding: 0 2.5rem;
    height: 45px;
    white-space: nowrap;
    min-width: fit-content;
    align-self: center;
}

/* Mobile styles */
@media (max-width: 768px) {
    .form-section {
        height: auto;
        min-height: 50vh;
        padding: 4rem 1rem;
    }

    .form-container {
        width: 90vw;
    }

    .signup-form-inputs {
        flex-direction: column;
    }

    .signup-form input {
        width: 100%;
        padding: 1vh 1rem;
    }
}

/* Hide mobile layout on desktop */
.story-mobile {
    display: none;
}

/* Story Hero Section */
.story-hero {
    height: 60vh;
    display: flex;
    width: 100%;
}

.story-hero-content {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #262626, #0D0D0D);
    color: white;
}

.story-hero-content h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: left;
}

.story-hero-content p {
    font-size: 1.25rem;
    line-height: 1.6;
}

/* Container for both h1 and p */
.story-hero-content h1,
.story-hero-content p {
    width: 80%;
}

.story-hero-content .beta-cta-row {
    width: 80%;
    margin-top: 2rem;
}

.story-hero-image {
    flex: 1;
    background-size: cover;
    background-position: center;
}

/* Mobile styles */
@media (max-width: 768px) {
    /* Hide desktop layout on mobile */
    .story-desktop {
        display: none;
    }

    /* Show mobile layout */
    .story-mobile {
        display: flex;
        flex-direction: column;
    }

    /* Mobile heading (Purple) */
    .story-mobile-heading {
        background-color: #A4B3F1;
        padding: 3rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .story-mobile-heading h2 {
        font-size: 3rem;
        font-weight: 600;
        color: rgb(147, 161, 217);
        margin: 0;
    }

    /* Mobile image */
    .story-mobile-image {
        height: 50vh;
        width: 100%;
        background-size: cover;
        background-position: center;
    }

    /* Mobile blue section */
    .story-mobile-blue {
        background-color: var(--ravl-blue);
        color: white;
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .story-mobile-blue p {
        font-size: 1.1rem;
        line-height: 1.6;
        width: 80%;
        margin: 0;
    }

    /* Mobile white section */
    .story-mobile-white {
        background-color: white;
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .story-mobile-white p {
        font-size: 1.1rem;
        line-height: 1.6;
        width: 80%;
        margin: 0;
    }

    /* Mobile mint section */
    .story-mobile-mint {
        background-color: #8EF1DA;
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .story-mobile-mint p {
        width: 80%;
        font-size: 1.1rem;
        line-height: 1.6;
        text-align: left;
        margin: 0;
    }
}

/* Story sections */
.story-sections {
    display: flex;
    width: 100%;
    height: 50vh;
}

.story-left {
    width: 25%;
    background-color: #A4B3F1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-left h2 {
    transform: rotate(-90deg);
    font-size: 6rem;
    font-weight: 600;
    color: rgb(147, 161, 217);  /* This is the RGB equivalent of (0.578, 0.631, 0.85) */
    white-space: nowrap;
}

.story-middle {
    width: 50%;
    background-color: white;
    padding: 4rem;
    display: flex;
    align-items: center;
}

.story-middle p {
    font-size: 1.25rem;
    line-height: 1.6;
}

.story-right {
    width: 25%;
    background-color: #EFB7A3;
}

/* Mobile styles */
@media (max-width: 768px) {
    .story-left {
        width: 100%;
        padding: 2rem;
    }

    .story-left h2 {
        transform: none;
        font-size: 3rem;
    }

    .story-middle {
        width: 100%;
        padding: 2rem;
    }

    .story-middle p {
        font-size: 1.1rem;
    }

    .story-right {
        display: none; /* Hide empty right section on mobile */
    }
}

/* Add to Story Hero Section styles */
.story-hero-reversed {
    flex-direction: row-reverse;
}

/* Update mobile styles */
@media (max-width: 768px) {
    /* Events page hero: content on top, image below (like home page) */
    main > .story-hero:first-child {
        flex-direction: column;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    main > .story-hero:first-child .story-hero-content {
        width: 100%;
        padding: calc(3rem + 1vh) 1rem 3rem 1rem;
    }

    main > .story-hero:first-child .story-hero-image {
        width: 100%;
        height: 50vh;
        flex: none;
        display: block;
        background-size: cover;
        background-position: center;
    }
    
    /* Join page hero image override - automatic height based on aspect ratio, edge-to-edge */
    main > .story-hero:first-child .story-hero-image.join-hero-image {
        height: auto;
        aspect-ratio: 16 / 9; /* Adjust based on your actual image aspect ratio */
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0;
    }

    .story-hero-reversed {
        flex-direction: column;
        height: auto;
    }

    /* Second story-hero: image first, then content */
    .story-hero-reversed .story-hero-image {
        order: 1;
        height: 50vh;
    }

    .story-hero-reversed .story-hero-content {
        order: 2;
        padding: 2rem 1rem;
    }

}

.story-impact {
    height: 50vh;
    width: 100%;
    background-color: #8EF1DA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.story-impact p {
    width: 60%;  /* This creates the 20% margin on each side */
    font-size: 1.25rem;
    line-height: 1.6;
    text-align: center;
}

/* Mobile styles */
@media (max-width: 768px) {
    .story-impact p {
        width: 90%;
        font-size: 1.1rem;
    }
}

/* Color bar section */
.color-bar {
    height: 10px;
    width: 100%;
    display: flex;
}

.color-column {
    flex: 1;
}

.color-blue {
    background-color: var(--ravl-blue);
}

.color-purple {
    background-color: #A4B3F1;
}

.color-pink {
    background-color: #EFB7A3;
}

.color-yellow {
    background-color: #F3D68D;
}

.color-green {
    background-color: #8EF1DA;
}

/* Events page styles */
.events-hero {
    height: 40vh;
    background: linear-gradient(to bottom, #262626, #0D0D0D);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 2rem;
}

.events-hero h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.events-hero p {
    font-size: 1.25rem;
    max-width: 600px;
}


.events-grid {
    padding: 4rem 2rem;
}

.events-container {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
}

.events-container h2 {
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
}

.events-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 4rem 2rem;
}

.events-placeholder-content {
    text-align: center;
    max-width: 800px;
    padding: 3rem;
    background: linear-gradient(135deg, #A4B3F1 0%, #11AAFF 100%);
    border-radius: 10px;
}

.events-placeholder-content h3 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: white;
}

.events-placeholder-content p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: white;
    margin-bottom: 1rem;
}

.events-placeholder-content p:last-child {
    margin-bottom: 0;
}

.events-placeholder-content strong {
    color: white;
    font-weight: 600;
}

.events-notify-form {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
}

.events-notify-form h4 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: white;
}

.events-form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.events-form-fields input {
    padding: 0.75rem 1rem;
    border: 2px solid #ddd;
    border-radius: 25px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.events-form-fields input:focus {
    outline: none;
    border-color: #11AAFF;
}

.events-notify-button {
    padding: 0.75rem 2rem;
    background-color: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.events-notify-button:hover {
    background-color: white;
    color: #11AAFF;
    border-color: white;
}

.events-placeholder-success {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #8EF1DA;
    color: #262626;
    border-radius: 25px;
}

.events-placeholder-success p {
    margin: 0;
    color: #262626;
    font-weight: 500;
}

.events-placeholder-error {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #f44336;
    color: white;
    border-radius: 25px;
}

.events-placeholder-error p {
    margin: 0;
    color: white;
}

@media (max-width: 768px) {
    .events-placeholder-content {
        padding: 2rem 1.5rem;
    }

    .events-placeholder-content h3 {
        font-size: 2rem;
    }

    .events-placeholder-content p {
        font-size: 1.1rem;
    }

    .events-notify-form h4 {
        font-size: 1.5rem;
    }

    .events-form-fields {
        max-width: 100%;
    }
}

.event-teaser-section {
	height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
    align-items: center; /* Horizontally centers the content */
    width: 100%;
    overflow: hidden;
    background-color: #353e43;
}

.event-teaser-content {
	position: relative;
    width: 70vw;
    animation: fadeIn 0.5s forwards;
    text-align: center; /* Ensures text inside is also centered */
}

.event-teaser-content p {
	font-size: 3rem;
	color: white;
}

.event-why-section {
	height: 60vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
    align-items: left; /* Horizontally centers the content */
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

.event-why-content {
	position: relative;
    animation: fadeIn 0.5s forwards;
    text-align: left; /* Ensures text inside is also centered */
}

.event-why-row {
	width: 60%;
}
.event-why-content h2 {
	font-size: 6rem;
	color: black;
}

.event-why-content p {
	font-size: 1.2rem;
	color: black;
	text-align: left;
}

.event-included-section {
	position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
    align-items: left; /* Horizontally centers the content */
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

.event-included-content {
	position: relative;
    animation: fadeIn 0.5s forwards;
    text-align: left; /* Ensures text inside is also centered */
}

.event-included-row {
	width: 60%;
}
.event-included-content h2 {
	font-size: 6rem;
	color: black;
}

.event-included-content p {
	font-size: 1.2rem;
	color: black;
	text-align: left;
}


.event-accordion-button {
	font-size: 1.5rem;
	padding-top: 30px;
	padding-bottom: 30px;
}

.event-accordion-section {
	padding-bottom: 5vh;
}


.event-venue {
    margin-bottom: 1rem;
}

.venue-name {
    font-size: 0.9rem;
    margin-top: 0;
    margin-bottom: 0;
    color: #ffffff;
}

.venue-address {
    color: #666;
    font-size: 0.9rem;
}

.event-date {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.event-time {
    color: #666;
}

.event-price {
    font-weight: 600;
    color: var(--ravl-blue);
    margin-top: 0;
    margin-bottom: 0;
}

.events-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.event-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.event-card:hover {
    transform: translateY(-2px);
}

.event-card__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease;
    pointer-events: none;
}

.event-card:hover .event-card__overlay {
    background-color: rgba(0, 0, 0, 0.65);
}

.event-content {
    position: relative;
    z-index: 1;
    padding: 20px;
    width: 100%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.event-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #666;
}

.event-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.7;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.event-description {
    color: #666;
}

.event-datetime {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.event-time {
    color: var(--ravl-blue);
    font-size: 0.85rem;
}

.event-price {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
}

/* Single event page styles */
.single-event {
    min-height: 100vh;
}

.event-header {
    height: 50vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.event-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
}

.event-header-content {
    position: relative;
    color: white;
    padding: 2rem;
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
}

.event-header h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.event-body {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
    padding: 4rem 0;
}

.event-registration {
    margin-top: 2rem;
    text-align: center;
}

.event-button {
	background: none;
	border: 2px solid white;
	border-radius: 2rem;
	margin-top: 3vh;
}


#buy-button {
	background-color: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	z-index: 10000;
}

#buy-button-top {
	background-color: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	z-index: 10000;
	margin-top: 0px;
	margin-right: 0.9vw;
	visibility: hidden;
}


#buy-button:hover {
    background-color: black;
    color: var(--ravl-blue);
    border-color: var(--ravl-blue);
    z-index: 10000;
}

.adjust-buy-button {
	position: fixed;
	width: 89vw;
	z-index: 1;
}
.fixed-buy-button {
    position: fixed; /* Fixed position at the top */
    top: 0;
    width: 100%; /* Optional: Full width */
    z-index: 10000; /* Stay above other content */
    padding: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Shadow */
    margin-top: 10px;
}

.register-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--ravl-cta);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1.1rem;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

/*
 * PR26-487. Every button on the site had exactly one state - a 2px lift on hover - and no focus
 * style at all. Two separate problems in that:
 *
 *   1. `transform` is invisible to a keyboard user, so a button that is focused looked identical
 *      to one that was not. There was no way to tell where you were on the page without a mouse.
 *   2. A colour that only moves on hover gives a pointer user no confirmation that a tap landed,
 *      which on a slow connection reads as a dead button and produces a second tap.
 *
 * `:focus-visible` rather than `:focus`, so a mouse click does not leave a ring behind it. The
 * outline is drawn in the brand blue with an offset so it reads against both the button and the
 * dark sections it sits on.
 */
.register-button:hover {
    background-color: var(--ravl-cta-hover);
    transform: translateY(-2px);
}

.register-button:focus-visible {
    outline: 2px solid var(--ravl-blue);
    outline-offset: 3px;
}

.register-button:active {
    background-color: var(--ravl-cta-hover);
    transform: translateY(0);
}


/* Mobile styles */
@media (max-width: 768px) {
    .events-container {
        width: 90vw;
    }

    .events-hero h1 {
        font-size: 2rem;
    }

    .event-header-content {
        width: 90vw;
    }

    .event-header h1 {
        font-size: 2rem;
    }

    .event-body {
        width: 90vw;
        padding: 2rem 0;
    }
}

/* Unsubscribe page styles */
.unsubscribe-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(to bottom, #F7F9FF, #D9D9D9);
}

.unsubscribe-container {
    background: white;
    padding: 3rem;
    border-radius: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.unsubscribe-logo {
    margin-bottom: 2rem;
}

.unsubscribe-logo img {
    height: 48px;
    width: auto;
}

.unsubscribe-confirmation h1,
.unsubscribe-form h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #262626;
}

.unsubscribe-confirmation p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
}

.unsubscribe-form .form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.unsubscribe-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #262626;
}

.unsubscribe-form input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.unsubscribe-form input:focus {
    outline: none;
    border-color: var(--ravl-blue);
}

.unsubscribe-button {
    background: var(--ravl-cta);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

/*
 * PR26-487. Every button on the site had exactly one state - a 2px lift on hover - and no focus
 * style at all. Two separate problems in that:
 *
 *   1. `transform` is invisible to a keyboard user, so a button that is focused looked identical
 *      to one that was not. There was no way to tell where you were on the page without a mouse.
 *   2. A colour that only moves on hover gives a pointer user no confirmation that a tap landed,
 *      which on a slow connection reads as a dead button and produces a second tap.
 *
 * `:focus-visible` rather than `:focus`, so a mouse click does not leave a ring behind it. The
 * outline is drawn in the brand blue with an offset so it reads against both the button and the
 * dark sections it sits on.
 */
.unsubscribe-button:hover {
    background-color: var(--ravl-cta-hover);
    transform: translateY(-2px);
}

.unsubscribe-button:focus-visible {
    outline: 2px solid var(--ravl-blue);
    outline-offset: 3px;
}

.unsubscribe-button:active {
    background-color: var(--ravl-cta-hover);
    transform: translateY(0);
}


/* Mobile styles for unsubscribe page */
@media (max-width: 768px) {
    .unsubscribe-container {
        padding: 2rem;
    }

    .unsubscribe-confirmation h1,
    .unsubscribe-form h1 {
        font-size: 1.75rem;
    }

    .unsubscribe-confirmation p {
        font-size: 1rem;
    }
}

/* Articles page styles */
.article-hero {
    position: relative;
    width: 100%;
    max-width: 2000px;
    height: 800px;
    margin: 0 auto;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), var(--article-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.article-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 3rem;
    color: #ffffff;
    text-align: left;
}

.article-hero__title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

@media (max-width: 1024px) {
    .article-hero {
        height: 600px;
    }
}

@media (max-width: 768px) {
    .article-hero {
        height: 60vh;
    }

    .article-hero__content {
        padding: 2rem;
    }
}

.articles-grid {
    padding: 4rem 2rem;
    background-color: white;
}

.articles-container {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
}

/* Primary Article */
.primary-article {
    margin-bottom: 4rem;
}

.primary-article .article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.primary-article .article-card:hover {
    transform: translateY(-2px);
}

.primary-article .article-image {
    height: 500px;
    background-size: cover;
    background-position: center;
}

.primary-article .article-content {
    padding: 1vh 2rem 2rem 2rem;
}

.primary-article .article-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 1rem 0;
    line-height: 1.2;
    color: black;
}

/* Secondary Articles */
.secondary-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.secondary-articles .article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.secondary-articles .article-card:hover {
    transform: translateY(-2px);
}

.secondary-articles .article-image {
    height: 300px;
    background-size: cover;
    background-position: center;
}

.secondary-articles .article-content {
    padding: 1vh 1.5rem 1.5rem 1.5rem;
}

.secondary-articles .article-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0.75rem 0;
    line-height: 1.2;
}

/* Other Articles (Tertiary) */
.other-articles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.other-articles .article-card {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: inherit;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.other-articles .article-card:hover {
    transform: translateY(-2px);
}

.other-articles .article-image {
    width: 40%;
    min-width: 300px;
    height: auto;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.other-articles .article-content {
    padding: 1vh 1.5rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.other-articles .article-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 1rem 0;
    line-height: 1.2;
}

/* Common Article Styles */
.article-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: #666;
}

.article-date {
    color: var(--ravl-blue);
}

.article-category {
    color: #666;
}

.article-excerpt {
    color: #666;
    line-height: 1.5;
    margin-top: 0.5rem;
}

.no-articles {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    padding: 2rem;
}

/* Infinite Scroll Loading Indicator */
.articles-loading {
    text-align: center;
    padding: 3rem 1rem;
    margin: 2rem 0;
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--ravl-blue);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.articles-loading p {
    color: #666;
    font-size: 1rem;
    margin: 0;
}

.articles-end {
    text-align: center;
    padding: 3rem 1rem;
    margin: 2rem 0;
    color: #666;
    font-size: 1rem;
}

.article-cta-card {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    margin-top: 4rem;
    margin-bottom: 5vh;
    border-radius: 30px;
    padding: 3rem;
    background: linear-gradient(315deg, rgba(17, 170, 255, 0.12), rgba(0, 0, 0, 0.65));
    color: white;
    position: relative;
    overflow: hidden;
}

.article-cta-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), transparent 45%);
    pointer-events: none;
}

.article-cta-card__content {
    position: relative;
    z-index: 1;
    max-width: 520px;
    flex: 1;
}

.article-cta-card__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.75);
}

.article-cta-card h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.article-cta-card p {
    font-size: 1.1rem;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.9);
}

.article-cta-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.article-cta-form-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.article-cta-form input {
    flex: 1;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    background: white;
    color: #262626;
}

.article-cta-form input::placeholder {
    color: #666;
}

.article-cta-form input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(17, 170, 255, 0.5);
}

.article-cta-card__button {
    border-radius: 999px;
    padding: 0.85rem 2.5rem;
    border: none;
    background-color: var(--ravl-blue);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    align-self: flex-start;
}

.article-cta-card__button:hover {
    transform: translateY(-2px);
    background-color: #0d8fcc;
}

.article-cta-card__media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-cta-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
    .article-cta-card {
        padding: 2rem;
        flex-direction: column;
    }

    .article-cta-card__media {
        order: -1;
    }

    .article-cta-card__media img {
        height: auto;
    }

    .article-cta-form-inputs {
        flex-direction: column;
    }

    .article-cta-card__button {
        width: 100%;
        align-self: stretch;
    }
}

/* ARTICLES */

/* Single Article */
.article-header-row {
	padding: 0;
}
.article-header {
	width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns the content to the bottom */
	background-position: top; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    margin-bottom: 2vh;
   	color: white;
}

.article-header-content {
    margin-top: auto;
	padding: 3vh 1vh;
	max-width: 70%;
	color: white;
}

.article-header-content h1 {
	font-size: 1.8rem;
	font-weight: 600;
	background-color: rgba(0, 0, 0, 0.55);
	padding: 1vh 2vh;
}

.article-header-content h2 {
	font-size: 1.2rem;
	font-weight: 600;
	background-color: rgba(0, 0, 0, 0.55);
	padding: 1vh 2vh;
}

.article-byline {
    width: 100%;
	text-align: left;
	font-style: italic;
}

.article-byline p {
	margin-bottom: 0px;
}

.article-content p {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.article-content h2 {
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-weight: 600;
    color: var(--ravl-blue);
}

.article-content h3 {
    padding-top: 1vh;
    font-size: 1.6rem;
    font-weight: 600;
}

.article-content h4 {
    padding-top: 3vh;
    font-size: 1.4rem;
    font-weight: 600;
}



.lead-paragraph {
	font-size: 1.6rem !important;
	font-weight: 600;
}

/* End of Single Article */

/* Mobile styles for Articles page */
@media (max-width: 768px) {
    .articles-grid {
        padding: 2rem 1rem;
    }

    .articles-container {
        width: 90vw;
    }

    .primary-article .article-image {
        height: 300px;
    }

    .primary-article .article-title {
        font-size: 2rem;
    }

    .secondary-articles {
        grid-template-columns: 1fr;
    }

    .other-articles {
        grid-template-columns: 1fr;
    }

    .other-articles .article-card {
        flex-direction: column;
    }

    .other-articles .article-image {
        width: 100%;
        min-width: unset;
        height: 250px;
    }

    .secondary-articles .article-image {
        height: 250px;
    }
}

/* Safety page styles */
.safety-content-section {
    background: white;
    padding: 6rem 2rem;
    color: black;
}

.safety-content-container {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
    max-width: 1200px;
}

.safety-content-container p {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.safety-content-container h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-top: 4rem;
    margin-bottom: 2rem;
    color: var(--ravl-blue);
}

.safety-content-container h2:first-of-type {
    margin-top: 2rem;
}

.safety-content-container ul {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.safety-content-container li {
    margin-bottom: 0.75rem;
}

.safety-content-container strong {
    font-weight: 600;
}

/* Mobile styles for Safety page */
@media (max-width: 768px) {
    .safety-content-section {
        padding: 4rem 1rem;
    }

    .safety-content-container {
        width: 90vw;
    }

    .safety-content-container p {
        font-size: 1.2rem;
    }

    .safety-content-container h2 {
        font-size: 2rem;
        margin-top: 3rem;
        margin-bottom: 1.5rem;
    }

    .safety-content-container ul {
        font-size: 1.2rem;
        padding-left: 1.5rem;
    }
}

/* Beta page styles */
.beta-cta-row {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.story-hero-content .beta-cta-row {
    width: 80%;
}

.beta-button-secondary {
    background-color: transparent;
    border: 2px solid white;
    color: white;
}

.beta-button-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.beta-content-section {
    background: white;
    padding: 1.5rem 2rem;
    color: black;
}

.beta-content-container {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
    max-width: 1200px;
}

.beta-content-container p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.beta-content-container h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 2rem;
    color: var(--ravl-blue);
}

.beta-content-container h2:first-of-type {
    margin-top: 0.5rem;
}

.beta-content-container h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.beta-content-container ul {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.beta-content-container ol {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.beta-content-container li {
    margin-bottom: 0.75rem;
}

.beta-content-container strong {
    font-weight: 600;
}

.beta-content-container em {
    font-style: italic;
}

.beta-content-container a {
    color: var(--ravl-blue);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.beta-content-container a:hover {
    color: #0d8fcc;
}

.beta-how-it-works-list {
    list-style: decimal;
}

.beta-how-it-works-list li {
    margin-bottom: 2rem;
}

.beta-fine-print {
    font-size: 1rem;
    color: #666;
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-style: italic;
}

.beta-signup-form {
    max-width: 600px;
    margin: 2rem auto 0;
}

.beta-form-group {
    margin-bottom: 1rem;
}

.beta-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.3s ease;
    font-family: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.beta-form-control:focus {
    outline: none;
    border-color: var(--ravl-blue);
}

.beta-form-control::placeholder {
    color: #999;
}

.beta-form-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #333;
    text-align: left;
}

.beta-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.beta-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: #333;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.beta-radio-label:hover {
    background-color: #f5f5f5;
}

.beta-radio-label input[type="radio"] {
    margin-right: 0.75rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--ravl-blue);
}

.beta-radio-label span {
    flex: none;
}

.beta-other-phone {
    margin-top: 1rem;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.beta-form-submit {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
}

.beta-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.beta-form-success {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    text-align: center;
    font-size: 1.1rem;
}

.beta-form-error {
    background-color: #f44336;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    text-align: center;
    font-size: 1.1rem;
}

.beta-form-embed {
    margin-top: 2rem;
    min-height: 200px;
}

.beta-faq-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.beta-faq-item summary {
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 0.5rem;
    color: #333;
}

.beta-faq-item summary:hover {
    color: var(--ravl-blue);
}

.beta-faq-item p {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0;
    padding-left: 1rem;
}

.beta-footer-section {
    background: linear-gradient(to bottom, #262626, #0D0D0D);
    padding: 1rem 2rem;
    color: white;
}

.beta-footer-section p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    text-align: center;
}

.beta-footer-section a {
    color: white;
    text-decoration: underline;
}

.beta-footer-section a:hover {
    color: var(--ravl-blue);
}

/* Mobile styles for Beta page */
@media (max-width: 768px) {
    .beta-cta-row {
        flex-direction: column;
        align-items: center;
    }

    .beta-button-secondary {
        width: 100%;
        text-align: center;
    }

    .beta-content-section {
        padding: 1rem 1rem;
    }

    .beta-content-container {
        width: 90vw;
    }

    .beta-content-container p {
        font-size: 1rem;
    }

    .beta-content-container h2 {
        font-size: 1.8rem;
        margin-top: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .beta-content-container h3 {
        font-size: 1.3rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .beta-content-container ul,
    .beta-content-container ol {
        font-size: 1rem;
        padding-left: 1.5rem;
    }

    .beta-how-it-works-list li {
        margin-bottom: 1.5rem;
    }

    .beta-faq-item summary {
        font-size: 1rem;
    }

    .beta-faq-item p {
        font-size: 1rem;
    }

    .beta-signup-form {
        max-width: 100%;
    }

    .beta-form-control {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .beta-form-label {
        font-size: 1rem;
    }

    .beta-radio-label {
        font-size: 1rem;
    }

    .beta-radio-label input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    .beta-form-submit {
        font-size: 1rem;
    }

    .beta-form-success,
    .beta-form-error {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .beta-footer-section {
        padding: 0.75rem 1rem;
    }

    .beta-footer-section p {
        font-size: 1rem;
    }
} 

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/*
 * PR26-487. Every transition and transform above is decorative. `prefers-reduced-motion` is a
 * stated accessibility need - vestibular disorders, migraine - and there was no such block
 * anywhere in this file. Movement off, colour and focus states kept: they carry meaning.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .join-button:hover,
    .join-button:active,
    .register-button:hover,
    .register-button:active,
    .unsubscribe-button:hover,
    .unsubscribe-button:active {
        transform: none;
    }
}


/* PR26-483. The safety strip. Reuses the existing container width token and button, so it inherits
   the max-width cap from PR26-488 and the focus states from PR26-487 rather than growing its own. */
.safety-strip {
    /* PR26-677. The strip had no background of its own and sat between two white sections, so
       there was no visual break at all. The mint tint is the hero ground, already in the palette;
       #212529 body ink clears AA against it comfortably. Padding goes up with the background —
       4rem read as generous with no ground behind it and mean once there is one. */
    background-color: #EDFAF7;
    padding: 5rem 0;
}

.safety-strip-container {
    width: min(75vw, var(--ravl-container-max));
    margin: 0 auto;
    max-width: 65ch;
    text-align: center;
}

/* PR26-677. The h2 read lighter and smaller than everything around it. The ticket recorded it as
   32px/500, but it in fact had no font-size rule at all and was falling through to the browser
   default 24px — `.feature-title` and `.love-ravl-container h2`, its peers, are both 2rem/600, so
   it is set to match them explicitly rather than left to inherit.
   The body was the smallest copy on the page at 16px. 20px sits below `.make-most-container p`
   (24px), which suits a four-line paragraph better than matching it outright would. */
.safety-strip h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.safety-strip p {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.safety-strip .join-button {
    margin-top: 1.5rem;
}