/* RESET */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
      /* Base Styles */
      html {
        font-size: 16px; /* Baseline font-size */
      }
      body {
        font-family: 'Manrope', sans-serif;
        background-color: #fff;
        color: #333;
        line-height: 1.5;
      }
  
      a {
        text-decoration: none;
        color: inherit;
      }

      /* Utility class to prevent line breaks within elements */
      .nowrap {
        white-space: nowrap;
      }
  
      /* HEADER */
      header {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        background-color: #fff;
      }
  
      .header-left img {
        height: 36px;
        width: auto;
      }
  
      .header-right {
        display: flex;
        align-items: center;
        gap: 1.5rem;
      }
  
      .header-link {
        font-size: 1rem;
        font-weight: 500;
        position: relative;
        cursor: pointer;
      }
  
      .header-link::after {
        content: "▾";
        font-size: 0.7rem;
        margin-left: 0.25rem;
        color: #666;
        display: inline-block;
        vertical-align: middle;
      }
  
      .phone-link {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 1rem;
        text-decoration: none;
        font-weight: 500;
      }
  
      .phone-icon {
        font-style: normal;
      }
  
      .login-link {
        font-size: 1rem;
        font-weight: 500;
      }
  
      .cta-button {
        padding: 0.5rem 1.25rem;
        background-color: #38a4fb;
        color: #fff;
        font-weight: 500;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s;
        font-size: 1rem;
      }
  
      .cta-button:hover {
        background-color: #2892e0;
      }
  
      /* HERO SECTION */
      .hero {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0 2rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;

    /* Provide vertical space for the plane animation.  A minimum height ensures
       there is enough scroll distance for the plane to travel from its
       start point to its end point.  Without this, short hero content
       would prevent scrolling and the animation would never run. */
    min-height: 50vh;

    /* Establish a containing block for the plane pins.  This allows the
       absolute positioning of the invisible pins used to calculate the
       flight path relative to the hero section. */
    position: relative;
      }
  
      .hero-left {
        flex: 1;
      }
  
      .hero-left h1 {
        font-weight: 700;
        /* Increase the size of the hero heading to better capture attention */
        font-size: 3rem;
        line-height: 1.3;
        color: #000;
        margin-bottom: 1rem;
      }

      /* Colour only non-nowrap spans in the hero heading blue.  The first part of the title
         (“Set Your Business Up Right”) is wrapped in a span with the class `nowrap` so that
         it remains black while the rest of the heading (e.g. “Day One”) uses the accent
         colour. */
      .hero-left h1 span:not(.nowrap) {
        color: #38a4fb;
      }

      /* Override the default colour for the nowrap span so it stays black even though
         general span styling colours spans blue. */
      .hero-left h1 .nowrap {
        color: #000;
      }
  
      .hero-right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

  /* Paper plane styles */
  .plane {
    /* Use a fixed position so the plane stays in view while the hero
       section scrolls past.  The transform is updated via JavaScript. */
    position: fixed;
    left: 0;
    top: 0;
    /* Make the plane slightly smaller so it integrates better with
       the surrounding hero content.  The clamp ensures the plane
       scales fluidly across viewport sizes while capping it at a
       reasonable minimum and maximum size. */
    width: clamp(70px, 7vw, 120px);
    height: auto;
    transform: translate(-9999px, -9999px);
    will-change: transform;
    transition: transform 0.08s linear;
    pointer-events: none;
    opacity: 0;
    z-index: 3;
  }

  /* Invisible pins used to define the flight path.  They are placed
     relative to the hero section and hidden from view. */
  .plane-pin {
    position: absolute;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    /* Keep the pins in the layout so their positions can be measured via
       getBoundingClientRect.  Set visibility and opacity to 0 so they
       remain invisible but still occupy space. */
    visibility: hidden;
    opacity: 0;
  }

      /* Image inside hero section */
      .hero-image {
        max-width: 100%;
        height: auto;
        object-fit: contain;
      }

      /* Subtitle styling within hero */
      .hero-subtitle {
        max-width: 450px;
        font-weight: 500;
        color: #666;
        font-size: 1.25rem;
        line-height: 1.6;
        margin-top: 0.5rem;
      }
  
      /* SUB NAV WRAPPER */
      .sub-nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        margin-bottom: 2rem;
      }
  
      .sub-nav {
        display: flex;
        gap: 1.5rem;
        font-size: 1rem;
        color: #666;
        font-weight: 500;
      }
  
      .sub-nav-item {
        position: relative;
        cursor: pointer;
      }
  
      .sub-nav-item.active {
        font-weight: 700;
        color: #38a4fb;
      }
  
      .sub-nav-item.active::after {
        content: "";
        position: absolute;
        height: 2px;
        width: 100%;
        background-color: #38a4fb;
        bottom: -4px;
        left: 0;
      }
  
      /* Bizee-Style Box */
      .bizee-style-box {
        background-color: #fafafa;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        padding: 1.5rem;
        margin-bottom: 2rem;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
      }
  
      .bizee-style-box h2 {
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
        color: #333;
      }
  
      .bizee-style-box p {
        font-weight: 500;
        font-size: 1rem;
        color: #666;
        margin-bottom: 1rem;
        line-height: 1.4;
      }
  
      .box-form {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        margin-bottom: 1rem;
      }
  
      .dropdown-wrapper {
        position: relative;
        flex: 1;
        min-width: 200px;
      }
  
      .circle-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 700;
        color: #fff;
      }
  
      .circle-icon.orange {
        background-color: #38a4fb;
      }
  
      .circle-icon.blue {
        background-color: #38a4fb;
      }
  
      .dropdown-select {
        width: 100%;
        padding: 0.5rem 0.5rem 0.5rem 2.5rem;
        border: 1px solid #276EF1;
        border-radius: 8px;
        font-size: 1rem;
        color: #333;
        background-color: #fff;
        appearance: none;
        font-weight: 500;
      }
  
      .start-button {
        background-color: #38a4fb;
        color: #fff;
        font-weight: 500;
        border: none;
        border-radius: 4px;
        padding: 0.75rem 1.5rem;
        cursor: pointer;
        transition: background-color 0.2s;
        margin-left: 0.5rem;
        font-size: 1rem;
      }
  
      .start-button:hover {
        background-color: #2892e0;
      }
  
      /* Info Tiles */
      .info-tiles {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
      }
  
      .info-tile {
        flex: 1;
        min-width: 220px;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 1rem;
        transition: box-shadow 0.2s;
      }
  
     .info-tile:hover {
        transform: translateY(-2px);
         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
         border-color: #38a4fb;
      }
      .info-tile-title {
        font-weight: 700;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: #333;
      }
  
      .info-tile-desc {
        font-weight: 500;
        font-size: 1rem;
        color: #666;
        line-height: 1.4;
      }
  
      /* FOUNDER INFO */
      .founder-info {
        text-align: center;
        margin: 2rem auto;
        font-size: 1rem;
        color: #666;
        font-weight: 500;
        line-height: 1.4;
        max-width: 1200px;
        padding: 0 2rem;
      }
  
      .founder-info span {
        color: #38a4fb;
        font-weight: 700;
      }

      /* SECTION 2: centered headline + subheader + button + video */
      
      :root{ --brand-blue:#38a4fb; }

      .hero-video-section{
        padding:3.5rem 0;
      }
      .hv-inner{
        max-width:1200px;
        margin:0 auto;
        padding:0 2rem;
        text-align:center;
      }
      .hv-title{
        font-weight:900;
        letter-spacing:-.02em;
        line-height:1.1;
        font-size:clamp(1.65rem,3.35vw,2.7rem);
        margin:0 0 .6rem;
      }
      .brand-accent{ color:var(--brand-blue); } /* “Open for Business” in blue */

      .hv-subtitle{
        color:#444;
        font-size:clamp(1.05rem,2vw,1.3rem);
        max-width:68ch;
        margin:0 auto 1.25rem;
      }

      .brand-cta{
        display:inline-block;
        background:var(--brand-blue);
        color:#fff;
        text-decoration:none;
        font-weight:800;
        padding:.95rem 1.35rem;
        border-radius:999px;
        box-shadow:0 6px 16px rgba(11,114,255,.25);
        transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
        margin-bottom:1.5rem;       /* space before video */
      }
      .brand-cta:hover{
        transform:translateY(-2px);
        box-shadow:0 10px 24px rgba(11,114,255,.3);
      }

      /* Video frame */
      .brand-video-wrap{
        border-radius:28px;
        overflow:hidden;
        box-shadow:0 10px 28px rgba(0,0,0,.12);
        max-width:920px;
        margin:0 auto;
      }
      .brand-video{
        width:100%;
        height:auto;
        display:block;
        aspect-ratio:16/9;
        object-fit:cover;
      }

      /* Respect reduced motion */
      @media (prefers-reduced-motion: reduce){
        .brand-video{ animation:none; }
      }

      /* FOOTER */
      footer {
        text-align: center;
        padding: 1rem;
        border-top: 1px solid #eee;
        font-size: 1rem;
        color: #777;
        font-weight: 500;
      }

/* =============================================================
   Quiz Page Styling
   -------------------------------------------------------------
   These styles define the look and feel of the quiz page.  The
   page includes a hero heading, a container for the quiz
   questions and interactive buttons for each answer.  The
   appearance aligns with the rest of the site by using the same
   fonts, colours and spacing conventions defined above.  The
   quiz container uses a light background and subtle shadow to
   separate it from the page background.
   ============================================================= */

/* Hero section for the quiz.  Provides a centred title and
   description. */
.quiz-hero {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 2rem;
  text-align: center;
}
.quiz-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
}
.quiz-hero p {
  font-size: 1.2rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}

/* Container for the quiz questions.  Uses a light background,
   rounded corners and a subtle shadow similar to other card-like
   components on the site. */
.quiz-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fafafa;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Individual quiz question wrapper.  Only one question is shown
   at a time; others are hidden via the .hidden class. */
.quiz-question {
  margin-bottom: 2rem;
}
.quiz-question p {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

/* Style for quiz answer options.  Buttons expand to fill the
   container’s width for ease of tapping on mobile.  They share
   visual cues with other buttons on the site (rounded corners,
   border) but remain more neutral by default, turning blue on
   hover to invite interaction. */
.quiz-option {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.quiz-option:hover {
  background-color: #f0f7ff;
  border-color: #38a4fb;
  color: #333;
}

/* Hide elements when not in use.  This class is toggled via JS
   to show only the relevant question. */
.hidden {
  display: none;
}

/* =============================================================
   Quiz Results Page Styling
   -------------------------------------------------------------
   These rules define the look and feel of the results page.  They
   reuse the same fonts, colours and spacing conventions as the
   quiz page and broader site.  Sections are presented in a clean
   card-like container with clear headings for each recommendation.
   ============================================================= */

/* Hero section for the results page */
.result-hero {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 2rem;
  text-align: center;
}
.result-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
}
.result-hero p {
  font-size: 1.2rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}

/* Container that wraps all result sections */
.result-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fafafa;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Each individual result section.  Sections are separated by
   spacing but share similar typography. */
.result-section {
  margin-bottom: 1.75rem;
}
.result-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}
.result-section p {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

/* Actions beneath the results: includes a call‑to‑action button
   and a link to retake the quiz. */
.result-actions {
  max-width: 800px;
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.retake-link {
  font-size: 1rem;
  color: #38a4fb;
  text-decoration: underline;
  cursor: pointer;
}
.retake-link:hover {
  text-decoration: none;
}