/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{
  /* Fonts */
  --font-title:"Luckiest Guy", cursive;
  --font-body:"Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Font Sizes */
  --fs-xxs: 1rem;
  --fs-xs: 1.25rem;
  --fs-sm: 1.5rem;
  --fs-md: 1.75rem;
  --fs-lg: 2rem;
  --fs-xl: 2.5rem;
  --fs-xxl: 3rem;

  /* Text align */
  --txt-cen: center;

  /* =========================
     MAIN BRAND COLOURS
     ========================= */
  --beyond-blue:#5D31FF;
  --beyond-purple:#9146FF;
  --beyond-yellow:#FCEE41;
  --beyond-white:#FFFFFF;

  /* =========================
     DARK / ANCHOR COLOURS
     ========================= */
  --ink-plum:#2E1F31;
  --midnight-grape:#2F164E;
  --deep-school-blue:#0014A5;

  --black:  #07110f;
  --grey: #D6D6D6;
  --light-grey: #F3F3F3;

  /* =========================
     PALE COLOURS
     ========================= */
  --cloud-lilac:#F0F0FF;
  --soft-periwinkle:#D2D2E6;
  --candy-pink:#FAB4FF;
  --peach-blush:#FACDCD;
  --butter-glow:#FEEE85;
  --apple-mist:#A4EDA4;
  --lavender-tint:#BFABFF;
  --soft-gold:#FFCA5F;
  --sky-wash:#57BEE6;
  --rose-pop:#F08BA9;
  --mint-cream:#BEFAE1;
  --sky-milk:#E6F0FF;

  /* =========================
     BRIGHT COLOURS
     ========================= */
  --electric-violet:#8205B4;
  --fire-red:#FA1E2D;
  --tangerine-blast:#FF7A02;
  --royal-purple:#6435D6;
  --slime-green:#BEFF00;
  --neon-aqua:#00FAFA;
  --laser-green:#00FA05;
  --mint-flash:#69FFC3;
  --hero-blue:#1E69FF;
  --hot-pop-pink:#FF2FA6;
  --deep-plum:#41145F;
  --hot-berry:#BE0078;

  /* Layout */
  --bp-sm:576px;
  --bp-md:768px;
  --bp-lg:992px;
  --bp-xl:1200px;
  --bp-xxl:1400px;

  /* Spacing Scale */
  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:2rem;
  --space-lg:4rem;
  --space-xl:6rem;

  --section-pad:var(--space-xl);
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-plum);
}

img{
  max-width:100%;
  display:block;
}

/* =========================================================
   CONTAINER
========================================================= */

.container{
  width:min(var(--bp-xxl), 92vw);
  margin-inline:auto;
}

/* =========================================================
   SPACING UTILITIES
========================================================= */

/* TOP */
.pT_sm{ padding-top:var(--space-sm); }
.pT_md{ padding-top:var(--space-md); }

.mT_md{ margin-top:var(--space-md); }

/* BOTTOM */
.pB_sm{ padding-bottom:var(--space-sm); }
.pB_md{ padding-bottom:var(--space-md); }

/* TOP AND BOTTOM */
.pTB_xl{ padding:var(--space-xl) 0; }

/* ALL */

.pad_sm{ padding:var(--space-sm); }

/* =========================================================
   NAVIGATION
========================================================= */

.navBar{
  background:var(--beyond-white);
  padding:var(--space-sm) 0;
  position:relative;
  z-index:10; /* keep nav above overlapping header panel */
}

.navBar__inner{
  width:min(var(--bp-xxl), 92vw);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.navBrand__logo{ height:90px; }

/* Desktop Nav */
.navLinks{
  display:flex;
  align-items:center;
  gap:var(--space-lg);
}

.navLinks__item{
  font-family:var(--font-title);
  font-size: var(--fs-md);
  color:var(--midnight-grape);
  text-decoration:none;
  position:relative;
}

.navLinks__item.is-active::after,
.navLinks__item:hover::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:6px;
  background:var(--midnight-grape);
}

/* Login Button */
.login-btn{
  background:var(--beyond-yellow);
  color:var(--midnight-grape);
  border-radius:999px;
  padding:0.5rem 1.5rem;
  font-family:var(--font-title);
  font-size: var(--fs-md);
  text-decoration:none;
}

.login-btn:hover,
.login-btn:focus-visible{
  background:var(--midnight-grape);
  color:var(--beyond-yellow);
}

/* Burger */
.navBurger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
}

.navBurger__lines,
.navBurger__lines::before,
.navBurger__lines::after{
  content:"";
  display:block;
  width:30px;
  height:3px;
  background:var(--ink-plum);
  position:relative;
}

.navBurger__lines::before{ position:absolute; top:-8px; }
.navBurger__lines::after{ position:absolute; top:8px; }

/* ================================
   MOBILE OVERLAY
================================ */

.navOverlay{
  position:fixed;
  inset:0;
  background:var(--midnight-grape);
  color:#fff;
  padding:var(--space-lg);
  z-index:1000;
}

.navOverlay__top{
  display:flex;
  justify-content:flex-end;
}

.navClose{
  background:none;
  border:none;
  font-size: var(--fs-xl);
  color:#fff;
  cursor:pointer;
}

.navOverlay__links{
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
  margin-top:var(--space-xl);
}

.navOverlay__item{
  font-family:var(--font-title);
  font-size: var(--fs-lg);
  color:#fff;
  text-decoration:none;
}

/* Mobile */
@media (max-width: 900px){
  .navLinks{ display:none; }
  .navBurger{ display:block; }
}

/* =========================================================
   SECTION SYSTEM
========================================================= */

.section{ padding-block:var(--section-pad); }

.pad-y-sm{ padding-block:var(--space-sm); }
.pad-y-md{ padding-block:var(--space-md); }
.pad-y-lg{ padding-block:var(--space-lg); }

.flow-sm > * + *{ margin-top:var(--space-sm); }
.flow-md > * + *{ margin-top:var(--space-md); }
.flow-lg > * + *{ margin-top:var(--space-lg); }

/* =========================================================
   GRID SYSTEM (12 COLUMN)
========================================================= */

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--space-md);
}

.grid-center{
  justify-content: center;
}

[class^="col-"]{ grid-column:span 12; }

.col-1{ grid-column:span 1; }
.col-2{ grid-column:span 2; }
.col-3{ grid-column:span 3; }
.col-4{ grid-column:span 4; }
.col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; }
.col-7{ grid-column:span 7; }
.col-8{ grid-column:span 8; }
.col-9{ grid-column:span 9; }
.col-10{ grid-column:span 10; }
.col-11{ grid-column:span 11; }
.col-12{ grid-column:span 12; }

@media (min-width: 768px){
  .col-md-1{ grid-column:span 1; }
  .col-md-2{ grid-column:span 2; }
  .col-md-3{ grid-column:span 3; }
  .col-md-4{ grid-column:span 4; }
  .col-md-5{ grid-column:span 5; }
  .col-md-6{ grid-column:span 6; }
  .col-md-7{ grid-column:span 7; }
  .col-md-8{ grid-column:span 8; }
  .col-md-9{ grid-column:span 9; }
  .col-md-10{ grid-column:span 10; }
  .col-md-11{ grid-column:span 11; }
  .col-md-12{ grid-column:span 12; }
}

/* ================================
   CENTER UTILITY
================================ */

.col-v-center{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.mAuto{ margin:auto; }

/* =========================================================
   TYPOGRAPHY
========================================================= */

.font-title{ font-family:var(--font-title); }
.font-body{ font-family:var(--font-body); }

.h1{
  font-family:var(--font-title);
  font-size: var(--fs-xxl);
  line-height:1;
  margin:0;
}

.h2{
  font-family:var(--font-title);
  font-size: var(--fs-xl);
  line-height:1.1;
  margin:0;
}

.h2_sub{
  font-family:var(--font-body);
  font-size: var(--fs-xxl);
  line-height:1.1;
  margin:0;
}

.h3{
  font-family:var(--font-title);
  font-size: var(--fs-md);
  line-height:1.2;
  margin:0;
}

.body-rg{
  font-size: var(--fs-xs);
  line-height:1.5;
  margin:0;
}

.body-sm{
  font-size: var(--fs-xxs);
  line-height:1.5;
  margin:0;
}

/* =========================================================
   TEXT UTILITIES
========================================================= */

.text-white{ color:var(--beyond-white); }
.text-yellow{ color:var(--beyond-yellow); }

.text-orange{ color:var(--tangerine-blast); }
.text-violet{ color:var(--electric-violet); }

.text-plum{ color:var(--ink-plum); }
.text-grape{ color:var(--midnight-grape); }
.text-center{ text-align:center; }

/* =========================================================
   BACKGROUND UTILITIES
========================================================= */

.bg-white{ background:#fff; }
.bg-plum{ background:var(--midnight-grape); }
.bg-lilac{ background:var(--cloud-lilac); }
.bg-yellow{ background:var(--beyond-yellow); }

.bg-orange{ background:var(--tangerine-blast); }
.bg-violet{ background:var(--electric-violet); }
.bg-pink{ background:var(--hot-berry); }
.bg-purple{ background:var(--midnight-grape); }

.bg-tile{
  background-image:url("../img/doodle-tile.png");
  background-repeat:repeat;
  background-size:auto;
}

/* =========================================================
   BUTTON SYSTEM
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family:var(--font-title);
  font-size: var(--fs-md);

  padding:0.75rem 2rem;

  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
}

.btn-primary{
  background:var(--beyond-blue);
  color:var(--beyond-white);
}

.btn-secondary{
  background:var(--beyond-yellow);
  color:var(--ink-plum);
}

/* =========================================================
   CARD SYSTEM
========================================================= */

.card{
  padding:var(--space-md);
  background:var(--beyond-white);
}

.card-dark{
  background:var(--midnight-grape);
  color:var(--beyond-white);
}

.is-hidden{ display:none; }

/* =========================================================
   FORM SYSTEM (GLOBAL)
========================================================= */

.form-group{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}

.input{
  padding:var(--space-sm);
  border:2px solid var(--grey);
  font-family:var(--font-body);
  font-size: var(--fs-xs);
}

.input:focus{
  outline:3px solid var(--beyond-yellow);
  border-color:var(--midnight-grape);
}

/* ================================
   HERO
================================ */

.hero{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height:650px;
  display:flex;
  align-items:center;
  width:100%;
  max-width:2000px;
  margin:auto;
}

.hero .container{
  width:min(var(--bp-xxl), 92vw);
}

.hero-panel{
  background:var(--beyond-yellow);
  padding:var(--space-lg);
  max-width:700px;
}

/* ================================
   PAGE HEADER: PANEL (for Subscribe)
================================ */

/* Wrapper (no full-height background allowed) */
.page-header--panel{
  position:relative;
  padding: 140px 0 120px; /* extra top so panel never overlaps nav */
  background:none !important;
  background-image:none !important;
}

/* The tile band only */
.page-header--panel::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:360px;
  background-image:url("../img/doodle-tile.png");
  background-repeat:repeat;
  background-size:auto;
  z-index:0;
}

/* Floating white panel */
.page-panel{
  position:relative;
  z-index:1;

  background: var(--beyond-white);
  width:min(var(--bp-lg), 92vw);
  margin:-60px auto 0; /* overlap into band */
  padding:var(--space-lg);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

@media (max-width: 768px){
  .page-panel{
    margin-top:-120px;
    padding:var(--space-lg);
  }
}

/* Form bits (Subscribe page) */
.section-title{
  font-family:var(--font-title);
  color: var(--beyond-white);
  padding:30px 0px;
  font-size: var(--fs-md);
  text-align: var(--txt-cen);
}

/* Subscribe form inputs (kept separate from global form styles, as per your file) */
.page-panel .form-group{ gap:0px; }

.page-panel .input{
  font-family:var(--font-body);
  font-weight:600;
  font-size: var(--fs-xs);
  padding:10px;
  border:2px solid var(--soft-periwinkle);
  background: var(--beyond-white);
}

/* ================= PLAN CARDS (Subscribe) ================= */

.plan-option{
  display:block;
  cursor:pointer;
}

.plan-option input{ display:none; }

.plan-card{
  display:grid;
  grid-template-columns: 38% 62%;
  border:4px solid var(--midnight-grape);
  border-radius:10px;
  background: var(--cloud-lilac);
  overflow:hidden;
  position:relative;
}

.plan-option input:not(:checked) + .plan-card{
  background: var(--light-grey);
  border-color: var(--grey);
}

.plan-left{
  padding:20px;
  text-align:center;
  border-right:4px solid var(--midnight-grape);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.plan-option input:not(:checked) + .plan-card .plan-left{
  border-right:4px solid var(--grey);
}

.plan-price{
  font-family:var(--font-title);
  font-size: var(--fs-xxl);
  line-height:0.75;
}

.plan-period{
  font-family:var(--font-title);
  font-size: var(--fs-lg);
}

.plan-save{
  color: var(--beyond-white);
  padding: 5px;
}

.plan-right{
  padding:10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.plan-paypal img{
  height:20px;
  width:auto;
  display:block;
}

.plan-right p{
  font-size: var(--fs-xxs);
  line-height:1.45;
  margin:16px 0 0 0;
  max-width:none;
}

.plan-check{
  position:absolute;
  top:-20px;
  right:-20px;
  width:70px;
  height:70px;
  background: var(--black);
  border-radius:50%;
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: var(--fs-xl);
}

.plan-option input:checked + .plan-card .plan-check{
  display:flex;
}

.plan-notes{
  margin-top:1.5rem;
  padding-left:1.2rem;
  font-weight:600;
}

.plan-notes li{ margin-bottom:0rem; }

.plan-home__body{
  background: var(--beyond-white);
}

.plan-home__image{
  width: 75%;
  padding: var(--space-md);
  margin: auto;
}

/* =========================================================
   MOBILE GALLERY SWIPE
========================================================= */

.media-grid{ gap:var(--space-md); }

@media (max-width: 768px){
  .media-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:0;
  }

  .media-grid > div{
    flex:0 0 100%;
    scroll-snap-align:start;
  }
}

/* =========================================================
   RESPONSIVE SCALING
========================================================= */

@media (max-width: 768px){
  :root{
    --section-pad:var(--space-lg);
    --space-md:1.5rem;

    --fs-xxs: 0.75rem;
    --fs-xs: 1rem;
    --fs-sm: 1rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.75rem;
    --fs-xl: 2rem;
    --fs-xxl: 2.5rem;
  }
}