/* =========================================================
   BrandMerchLab — Global Styles (mobile-first)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* Palette, radii, spacing */
:root{
  --bg:#f5f2ed;
  --ink:#1c1c1c;
  --muted:#666666;
  --accent:#5e7d75;
  --accent-2:#4d6b63;
  --paper:#ffffff;
  --stroke:#e8e5e0;
  --shadow:0 12px 28px rgba(0,0,0,.06);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:20px;
  --space:16px;
}

/* keep widths sane everywhere */
*, *::before, *::after { box-sizing: border-box; }

/* images/SVG never overflow */
img, svg { max-width: 100%; height: auto; }


/* =========================================================
   Base + layout
   ========================================================= */
html, body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
h1, h2{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  color:var(--accent);
  margin:0 0 8px;
}
h1{ font-size:clamp(28px,5vw,44px); line-height:1.15; }
h2{ font-size:clamp(22px,3.5vw,32px); }
p{ color:var(--muted); font-size:1rem; }

.page-content{
  width:100%;
  max-width:1100px;
  padding:24px 16px 40px;
  margin:0 auto;
  flex:1 0 auto;
}

/* =========================================================
   NAVBAR (flex: burger left | logo centered | auth right)
   ========================================================= */
.navbar{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--accent); color: #fff;
  min-height: 64px;
}
.navbar > * { min-width: 0; }

/* your wrapper inside nav (supports your base.html) */
.navbar .nav-inner{
  display:flex; align-items:center; gap:12px;
  width:100%;
  position:relative; /* so the absolute-centered logo is centered in this row */
}

/* Burger (left) */
.menu-button{
  width:28px; height:22px; position:relative; z-index:2;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
}
.menu-button span{
  position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px;
}
.menu-button span:nth-child(1){ top:3px; }
.menu-button span:nth-child(2){ top:10px; }
.menu-button span:nth-child(3){ top:17px; }

/* Logo (centered absolutely within .nav-inner) */
.navbar .logo{
  position:absolute; left:50%; transform:translateX(-50%);
  margin:0;
}
.navbar .logo img{ height:30px; display:block; }

/* Auth pill (right) */
.auth-links{
  margin-left:auto;        /* push to far right */
  display:flex; align-items:center; gap:4px;
  font-weight:600; font-size:13.5px;
  color:#fff; white-space:nowrap;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  padding:3px 8px;
}
.auth-links a{ color:#fff; text-decoration:none; padding:3px 2px; }
.auth-links a:hover{ text-decoration:underline; }
.auth-links .slash{ opacity:.75; margin:0 -2px; }
.navbar .auth-links form{ display:inline; }
.navbar .auth-links form button{
  padding:0; background:none; border:none; color:#fff; cursor:pointer;
  text-decoration:underline; font:inherit;
}
.navbar .auth-links form button:hover{ text-decoration:none; }

/* =========================================================
   Drawer + backdrop (mobile and desktop)
   ========================================================= */
.dropdown{
  position:fixed; inset:0 auto 0 0;
  width:92%; max-width:420px; height:100svh;
  background:var(--accent); color:#fff;
  padding:16px;
  transform:translateX(-105%);
  transition:transform .22s ease;
  box-shadow:20px 0 40px rgba(0,0,0,.25);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  z-index:60;
}
.dropdown.open{ transform:translateX(0); }
.dropdown a{
  display:block; color:#fff; text-decoration:none;
  padding:14px 10px; border-bottom:1px solid rgba(255,255,255,.18);
  font-weight:500;
}
.dropdown a:hover{ background:rgba(0,0,0,.08); }
body.drawer-open{ overflow:hidden; }

.backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:55;
}
.dropdown.open + .backdrop{ opacity:1; pointer-events:auto; }

/* Optional: keep drawer fixed + full-height on desktop too */
@media (min-width:960px){
  .dropdown{
    position:fixed; inset:0 auto 0 0;
    width:420px; max-width:92vw; height:100svh;
    display:block; /* JS toggles with .open */
    border-radius:0;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ text-align:center; padding:72px 16px 24px; }
.hero .logo-text{
  font-family:'Playfair Display',serif !important;
  font-weight:700;
  font-size:clamp(56px,9vw,96px) !important;
  line-height:1.08;
  color:var(--ink);
  display:inline-block;
  white-space:nowrap;
  margin:0 0 8px;
}
.hero .logo-text span{ color:var(--accent); }
.hero .brandmark img{
  width:100%;
  max-width:380px;   /* cap the hero logo size */
  height:auto;
  display:block;
  margin:0 auto 8px;
}
.hero .tagline{ font-size:clamp(15px,2.2vw,20px); color:var(--muted); }

/* =========================================================
   Forms / buttons
   ========================================================= */
.auth-card{
  max-width:440px; margin:56px auto;
  background:var(--paper); border-radius:var(--r-md);
  padding:28px 28px 30px; box-shadow:var(--shadow);
  border:1px solid var(--stroke);
}
.auth-card h2{ margin:0 0 16px; font-size:26px; }

.form .field{ margin-bottom:12px; }
.form label{ display:block; font-weight:600; margin-bottom:6px; }
.input,
.form input[type="text"],
.form input[type="password"],
.form input[type="email"]{
  width:100%; padding:12px 14px; border:1px solid #cfd8d3;
  border-radius:var(--r-sm); outline:none; font-size:15px; background:#fff;
}
.input:focus, .form input:focus{
  border-color:#6d8f85; box-shadow:0 0 0 3px rgba(109,143,133,.18);
}
.help{ display:block; margin-top:6px; color:#6b7280; font-size:13px; }
.form-errors .error, .field.has-error .error{ margin-top:6px; color:#b00020; font-size:13px; }
.field.has-error .input, .field.has-error input{
  border-color:#b00020; box-shadow:0 0 0 3px rgba(176,0,32,.12);
}

.btn{
  display:inline-block; padding:10px 16px; border:none;
  border-radius:var(--r-sm); background:var(--accent); color:#fff;
  font-weight:700; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 14px rgba(95,129,118,.22);
  transition:transform .06s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(.96); transform:translateY(-1px); }
.btn-secondary{ background:#556e66; }

/* =========================================================
   Dashboard
   ========================================================= */
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.card{
  background:var(--paper); border:1px solid var(--stroke);
  border-radius:var(--r-md); box-shadow:var(--shadow); padding:18px;
}
.card h3{ margin:0 0 10px; color:#27433e; }
.card-ghost{
  background:linear-gradient(180deg,#fff,#faf8f4);
  border:1px dashed #e6e0d6; min-height:140px; opacity:.8;
}
.card-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.icon{
  width:36px; height:36px; border-radius:12px;
  display:inline-grid; place-items:center;
  background:#e9f3f0; border:1px solid #d6ebe5;
}
.icon svg{ width:20px; height:20px; fill:none; stroke:#3c6b60; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.kv{ display:grid; gap:8px; }
.kv > div{ display:flex; justify-content:space-between; gap:12px; }
.kv span{ color:var(--muted); }
.kv strong{ color:var(--ink); font-weight:700; }
.links{ display:flex; flex-direction:column; gap:8px; }
.links a{ color:#1f2f2c; text-decoration:underline; }
.mt{ margin-top:12px; } .mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; }
.muted{ color:var(--muted); } .sm{ font-size:13px; }

/* =========================================================
   Pricing
   ========================================================= */
.pricing-hero{ text-align:center; max-width:900px; margin:8px auto 24px; padding:0 12px; }
.pricing-hero p{ font-size:clamp(15px,2.6vw,18px); }

.pricing-grid{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); } }

.plan{
  background:var(--paper);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:20px 18px;
  box-shadow:var(--shadow);
}
.plan .head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.plan .title{ margin:0; color:#27433e; font-family:'Playfair Display',serif; }
.plan .icon{
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  background:#e9f3f0; border:1px solid #d6ebe5;
}
.plan .icon svg{ width:18px; height:18px; stroke:#3c6b60; fill:none; }
.plan .price{ font-weight:800; font-size:clamp(24px,4.8vw,34px); color:var(--ink); margin:8px 0 2px; }
.plan .price-note{ color:var(--muted); font-size:14px; margin-bottom:10px; }
.plan ul{ margin:10px 0 0; padding-left:20px; }
.plan li{ margin:6px 0; }
.plan .cta{ margin-top:12px; }

.plan.recommended{ border-color:#cfe1da; box-shadow:0 18px 50px rgba(0,0,0,.08); }
.badge{
  display:inline-block; background:#e9f3f0; color:#27433e;
  border:1px solid #d6ebe5; border-radius:999px;
  font-size:12px; padding:4px 10px; margin-bottom:8px;
}

/* =========================================================
   Footer (unchanged)
   ========================================================= */
.footer{ margin-top:auto; width:100%; background:#111; color:var(--accent); border-top:1px solid #0d0d0d; overflow-x:hidden; }
.footer .inner{
  max-width:1100px; margin:0 auto; padding:12px 10px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  white-space:normal; font-size:13.5px;
}
.footer a{ color:var(--accent); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.footer .sep{ opacity:.6; }

/* --- Mobile navbar compaction (make room for the burger) --- */
@media (max-width: 420px){
  .auth-links {
    font-size: 12.5px;
    padding: 2px 6px;
    gap: 4px;
  }
  .auth-links .slash,
  .auth-links .signup-link { display: none; }   /* show only “Sign in” */
  .navbar .logo img { height: 24px; }           /* slightly smaller logo */
  .menu-button { width: 26px; height: 20px; display: block; }
}

/* --- Signup/Login: prevent any right-edge overflow --- */
.auth-card {
  max-width: min(440px, 92vw);
  overflow-wrap: anywhere;        /* break long validation messages/URLs */
  word-wrap: break-word;
}

/* Default: show full label, hide short */
.auth-links .label-short { display: none; }

/* Mobile: shrink pill, hide signup & slash, show short “Sign” */
@media (max-width: 480px){
  .auth-links {
    padding: 2px 8px;
    gap: 4px;
    font-size: 12.5px;
  }
  .auth-links .signup-link,
  .auth-links .slash { display: none; }

  .auth-links .label-full { display: none; }
  .auth-links .label-short { display: inline; }

  /* make the logo a touch smaller on tight screens */
  .navbar .logo img { height: 26px; }
}

/* Prevent long text from spilling on the signup form */
.page-content, .auth-card { overflow-wrap: anywhere; word-break: break-word; }

/* Show/hide labels per viewport */
.only-desktop { display: inline; }
.only-mobile  { display: none; }

@media (max-width: 480px){
  .only-desktop { display: none !important; }  /* hides Dashboard + slash on mobile */
  .only-mobile  { display: inline !important; }/* keeps compact “Sign” when logged out */
  .auth-links   { font-size: 13px; padding: 3px 8px; gap: 4px; } /* keep pill tight */
}

/* (already have these, but repeating to be safe) */
.navbar .auth-links form{ display:inline; }
.navbar .auth-links form button{
  padding:0; background:none; border:none; color:#fff; cursor:pointer;
  text-decoration: underline; font: inherit;
}
.navbar .auth-links form button:hover{ text-decoration: none; }

/* --- Pricing: align cards & CTAs, don't let badge shift layout --- */
.pricing-grid { align-items: stretch; }

.plan{
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Put the badge on the card corner so it doesn't affect height */
.plan .badge{
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;         /* ignore previous margin */
}

/* Keep some room near the title so badge never overlaps long headings */
.plan .head{ padding-right: 84px; }

/* Push the CTA to the bottom so all buttons line up */
/* Push CTA to the bottom and prevent flex stretching */
.plan .cta{
  margin-top: auto;
  align-self: flex-start;   /* key fix: stop full-width stretch */
}

/* --- Pricing: featured + hover/focus dynamics --- */
.plan{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  transform-origin: center;
}

/* Recommended: subtly popped by default */
.plan.recommended{
  border-color:#b9d6cc;
  box-shadow: 0 18px 50px rgba(0,0,0,.08), 0 0 0 2px #d6ebe5;
  transform: translateY(-2px) scale(1.01);
  background: linear-gradient(180deg, #ffffff, #fbfaf7);
}

/* Other cards: pop on hover/focus */
.plan:not(.recommended):hover,
.plan:not(.recommended):focus-within{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}

/* When ANY card is hovered/focused, gently un-pop the recommended (unless it's the one hovered) */
/* :has() is supported in Chrome/Edge/Safari; in unsupported browsers the recommended just stays popped */
.pricing-grid:has(.plan:hover) .plan.recommended:not(:hover),
.pricing-grid:has(.plan:focus-within) .plan.recommended:not(:focus-within){
  transform: translateY(0) scale(0.995);
  box-shadow: var(--shadow);
  filter: saturate(.96);
}

/* Make the “Recommended” badge a touch brighter */
.plan.recommended .badge{
  background:#dff3ec;
  border-color:#bfe5d7;
  color:#27433e;
  font-weight:700;
}

/* keep our earlier CTA alignment fix */
.plan .cta{ margin-top:auto; align-self:flex-start; }
/* Plan titles — make them bigger again */
.plan .title{
  font-size: clamp(24px, 2.6vw, 32px);
}

/* =============================
   TILES — CLEAN REWRITE
   (Drop-in replacement for your current tile rules)
   ============================= */

/* --- Home tiles: full-width, clean, spaced ---------------------------- */
.tile-stack{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 44px);      /* spacing BETWEEN tiles */
  margin: 0;
  padding-block: clamp(8px, 2vw, 16px);
}

/* 100% width, hero height, no dim overlays */
.hero-tile{
  position: relative;
  display: block;
  width: 100%;
  height: 72vh;                     /* desktop hero feel */
  height: 72svh;                    /* mobile viewport-aware */
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.hero-tile img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Centered content; NO background wash */
.tile-overlay{
  position: absolute; inset: 0;
  display: grid; place-content: center;
  text-align: center; padding: 24px;
  background: transparent;          /* <- important */
}

/* Titles pop more */
.hero-tile h1{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 2px 16px rgba(0,0,0,.45),
    0 1px 3px rgba(0,0,0,.35);
}

.hero-tile p{
  margin: .5rem 0 1rem;
  color:#fff;
  font-size: clamp(14px, 2.6vw, 18px);
  opacity:.96;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.hero-tile .btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:12px;
  background: rgba(94,125,117,.98);  /* your accent */
  color:#fff; font-weight:700; text-decoration:none;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* Tile CTA must hug content */
.hero-tile .tile-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers the CTA horizontally */
  text-align: center;
  gap: 10px;
}

.hero-tile .tile-overlay .btn,
.hero-tile .tile-overlay a.btn {
  display: inline-flex !important; /* beat any block rules */
  align-items: center;
  justify-content: center;
  width: auto !important;          /* never stretch */
  max-width: max-content;
  padding: 10px 16px;              /* your normal button padding */
}

/* Guard: if any global "a { display:block }" leaks in */
.hero-tile .tile-overlay a.btn { display: inline-flex !important; }

.tile-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;           /* space between tiles */
}
@media (min-width: 900px){
  .tile-stack { gap: 36px; }
}

/* --- Tile tagline legibility (no full-tile wash) --- */
.hero-tile .tile-overlay p{
  color:#fff;
  font-weight:600;
  letter-spacing:.2px;
  margin:.25rem 0 .75rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);      /* stronger than before */
  display:inline-block;
  padding:6px 10px;                              /* "chip" */
  border-radius:999px;
  background:rgba(0,0,0,.26);                    /* subtle, only behind text */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Tone it down a hair on wider screens */
@media (min-width: 900px){
  .hero-tile .tile-overlay p{
    background:rgba(0,0,0,.20);
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
  }
}
/* 1) One place to control tile height */
:root {
  --tile-h: 72svh;              /* your current tile height */
}

/* 2) Tile base (keeps full width and adds a light shadow under) */
.tile-stack .hero-tile{
  height: var(--tile-h);
  display: block;
  position: relative;
  overflow: hidden;              /* keep edges clean */
  border-radius: 20px;
  /* light shadow mostly below the tile */
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.10));
}

/* 3) Gap between tiles = 50% of tile height */
.tile-stack .hero-tile:not(:last-child){
  margin-bottom: calc(var(--tile-h) * .5);  /* 36svh with --tile-h:72svh */
}

/* --- Tiles: simple + full-bleed, no effects --- */
:root { --tile-h: 72svh; }                 /* mobile-safe viewport height */

.tile-stack { 
  position: relative; 
  isolation: isolate;                      /* keep tiles' layers contained */
  margin: 0 0 64px;                        /* space before footer */
}

/* Each tile fills the screen height; add spacing = 50% of tile height */
.hero-tile{
  position: relative;
  display: block;
  height: var(--tile-h);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  margin: calc(var(--tile-h) * .5) 0;      /* <- 50% of tile height */
}

.hero-tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay: center content, but NO gradient/wash at all */
.tile-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: none !important;             /* kill grey overlay everywhere */
}

/* Title: white + soft shadow for legibility */
.hero-tile h1{
  color: #fff;
  text-shadow: 0 3px 16px rgba(0,0,0,.45);
}

/* CTA should hug its content, not stretch */
.hero-tile .btn{
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
}

/* Footer: ensure it sits above any tile layers */
.footer{
  position: relative;
  z-index: 20;
}

/* --- Footer always shows --- */
body{ display:flex; flex-direction:column; min-height:100vh; }
.page-content{ flex:1 0 auto; }

/* keep the tile stack in the flow and below the footer */
.tile-stack{ margin:0 0 56px; position:relative; z-index:0; }  /* adds gap above footer */
.footer{ position:relative; z-index:10; }                     /* sit above anything */

/* Stop page-content from stretching on pages that use the tile stack */
.tile-stack ~ .page-content{
  flex: 0 0 auto;   /* was: flex: 1 0 auto; */
  min-height: 0;    /* ensure no implicit min-height */
}

/* Keep a sane gap between the last tile and the footer */
.tile-stack{ margin-bottom: clamp(32px, 6vh, 72px); }

/* Make sure the footer sits above any tile overlays/shadows */
.footer{ position: relative; z-index: 10; }

/* 1) Stop flex stretching on tile pages */
.tile-stack ~ .page-content,
.tile-stack ~ .footer{
  flex: 0 0 auto !important;
}

/* 2) Kill any accidental big margins under tiles */
.hero-tile{ margin: 0 !important; }

/* 3) Keep tile spacing modest (not 50% height) */
.tile-stack{
  gap: clamp(24px, 4vh, 48px) !important;
  margin-bottom: clamp(24px, 4vh, 48px) !important;
}

/* 4) Make sure the footer renders right after content */
.footer{
  position: relative;      /* sits above any overlays */
  z-index: 1;
  margin-top: 24px;        /* small, predictable gap */
}

/* =========================================================
   LAYOUT FIXES — footer always shows + kill horiz scroll
   (append to end of file)
   ========================================================= */

/* No accidental horizontal scrollbar */
html, body { overflow-x: clip; }

/* 3-row page grid: header | content | footer */
body{
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;          /* safe on mobile too */
}

/* Middle row is where page content lives */
.page-content,
.tile-stack,
.hero,
.hero-banner{

}

/* Footer always in last row */
.footer{
  grid-row: 3;
  margin-top: 0;               /* override earlier auto margins */
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Guard against width-induced overflow */
.page-content,
.tile-stack,
.hero-banner{
  width: min(1100px, 100%);
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 0px;
}

/* Media never pushes layout wider */
img, video{ display:block; max-width:100%; height:auto; }

/* Buttons/links never overflow horizontally */
.btn, a.btn{ max-width:100%; }

/* If any section used 100vw, force content width instead */
[class*="full-bleed"], [class*="hero"]{ width:100%; }

/* ===============================
   1) Make the home tiles full-bleed
   (removes the beige side gutters)
   =============================== */
.tile-stack{
  width: 100vw;                                 /* span the viewport */
  margin-inline: calc(50% - 50vw);              /* break out of centered wrapper */
  padding-inline: 0;
  max-width: 100vw;                             
  overflow-x: clip;                              /* no horizontal scrollbars */
}

/* Keep your rounded corners / shadow on the tiles themselves */
.tile-stack .hero-tile{
  border-radius: 20px;
}

/* ======================================
   2) Footer: always push to the bottom.
   (Fixes footer missing on /pricing)
   ====================================== */
.footer{
  margin-top: auto !important;   /* restore sticky-footer behavior */
  position: relative;
  z-index: 10;
}

/* Small breathing room above the footer comes from content, not the footer */
.page-content { padding-bottom: 24px; }

/* --- HOTFIX: remove full-bleed math and prevent overlay/stacking issues --- */

/* Tiles should be normal 100% width, not 100vw with negative margins */
.tile-stack{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-inline: 0 !important;
  gap: clamp(24px, 4vh, 48px) !important;   /* keep your spacing */
  margin-bottom: clamp(24px, 4vh, 48px) !important;
}

/* Keep each tile clean and below the navbar */
.hero-tile{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  z-index: 0;                                  /* base layer */
}

/* Don’t let any filter/transform create new stacking contexts above navbar */
.hero-tile, .hero-tile *{
  transform: none !important;
  filter: none !important;
}

/* Overlay sits inside the tile, never above the navbar */
.tile-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Navbar must always be the top dog */
.navbar{
  position: sticky;
  top: 0;
  z-index: 999 !important;
}

/* Belt-and-suspenders: no horizontal overflow artifacts */
html, body{
  overflow-x: hidden !important;
}

.dropdown a[aria-current="page"]{
  background: rgba(0,0,0,.12);
  font-weight: 700;
}

/* Space between tiles = 25% of tile height (72svh → 18svh) */
.tile-stack .hero-tile:not(:last-child){ margin-bottom: 18svh; }

/* Make the big 'price' line subtle, like a pill-label */
.pricing-grid .plan .price{
  display:inline-block;
  font-size: 0.95rem;           /* was big — now small */
  line-height: 1.2;
  font-weight: 600;
  color: #5b6670;               /* muted */
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 8px 12px;
  margin: 6px 0 8px;
}

/* Smaller, calmer fine print */
.pricing-grid .plan .price-note{
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 12px;
}

/* Make the recommended card pop a touch (still subtle) */
.pricing-grid .plan.recommended{
  border-color: rgba(107,143,134,.45);         /* teal-ish accent */
  box-shadow: 0 10px 28px rgba(0,0,0,.08), 
              0 0 0 3px rgba(107,143,134,.08);
}

/* Nicer bullets without changing markup */
.pricing-grid .plan ul{ list-style:none; padding-left:0; margin-top:10px; }
.pricing-grid .plan ul li{
  position: relative; margin: 8px 0; padding-left: 26px;
}
.pricing-grid .plan ul li::before{
  content: "✓";
  position: absolute; left: 0; top: 0; line-height: 1.2;
  font-weight: 700; opacity: .7;
}

/* Slightly calmer title weight/spacing */
.pricing-grid .plan .head .title{ letter-spacing:.2px; }


.badge{ background:#eaf2ef; color:#2f5b52; }

/* Slightly tighter list rhythm + consistent checks */
.pricing-grid .plan ul { margin-top: 8px; }
.pricing-grid .plan ul li { margin: 8px 0; line-height: 1.45; }

/* Keep the pill subtle */
.pricing-grid .plan .price { opacity: .9; }

/* Ensure CTAs align at the bottom of equal-height cards */
.pricing-grid .plan { display: flex; flex-direction: column; }
.pricing-grid .plan .btn.cta { margin-top: auto; }

/* 1) Keep cards as flex columns but don't stretch children */
.pricing-grid .plan{
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* <— stops full-width stretching */
}

/* 2) Make the pill shrink-to-fit */
.pricing-grid .plan .price{
  align-self: flex-start;
  display: inline-flex;
  white-space: nowrap;       /* keep on one line */
  width: auto;               /* override any width:100% */
  max-width: max-content;    /* fallback for odd cascades */
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  font-size: .95rem;
  font-weight: 600;
  color: #5b6670;
  margin: 6px 0 8px;
}

/* 3) Make the fine line sit nicely too (if you keep it) */
.pricing-grid .plan .price-note{
  align-self: flex-start;
  font-size: .85rem;
  color: #6b7280;
}

/* 4) Keep the CTA glued to the bottom */
.pricing-grid .plan .btn.cta{ margin-top: auto; }
.pricing-addons { margin: 48px auto; max-width: 1100px; padding: 0 16px; }
.pricing-addons h2 { text-align: center; margin-bottom: 12px; }
.addons-list { list-style: none; padding: 0; margin: 8px auto 0; max-width: 800px; }
.addons-list li { margin: 10px 0; padding-left: 26px; position: relative; line-height: 1.5; }
.addons-list li::before { content: "＋"; position: absolute; left: 0; top: 0; opacity: .6; }
.addons-list .note { color: #6b7280; font-size: .95rem; }
.addon-link { margin-top: 8px; font-size: .95rem; }
.pricing-addons .btn.cta{ margin-top:12px; }
@media (max-width:600px){ .pricing-addons .btn.cta{ width:100%; justify-content:center; } }

/* Make the upgrades section a horizontal card */
.pricing-addons{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:24px;
  max-width:1100px;
  margin:36px auto;
  display:grid;
  grid-template-columns: minmax(420px,1fr) 260px; /* list | CTA */
  gap:14px 24px;
  align-items:start;
}

/* Title spans the card */
.pricing-addons h2{
  grid-column: 1 / -1;
  margin:0 0 6px;
  text-align:left; /* keep centered if you prefer */
}

/* List lives on the left column */
.pricing-addons .addons-list{
  grid-column:1;
  margin:0;
}

/* CTA sits on the right inside the card */
.pricing-addons .btn.cta{
  grid-column:2;
  justify-self:end;
  align-self:start;
  margin-top:6px;          /* tiny offset from top */
}

/* Mobile: stack with full-width CTA */
@media (max-width: 720px){
  .pricing-addons{
    grid-template-columns: 1fr;
    padding:18px;
  }
  .pricing-addons .btn.cta{
    grid-column:1;
    justify-self:stretch;
    text-align:center;
    width:100%;
    margin-top:10px;
  }
}

/* How it works grid */
.grid.grid-3 .card p,
.grid.grid-3 .card li { color: var(--muted, #5b6670); }

.grid.grid-3 .card ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin-top: 8px;
}
.grid.grid-3 .card ol li { margin: 6px 0; line-height: 1.45; }

/* Contact page form: stack neatly, match card style */
.grid.grid-2 .card form .fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px,1fr));
  gap: 12px 16px;
}

.grid.grid-2 .card form input[type="text"],
.grid.grid-2 .card form input[type="email"],
.grid.grid-2 .card form select,
.grid.grid-2 .card form textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  background: #fafafa;
  font: inherit;
}

.grid.grid-2 .card form textarea{
  grid-column: 1 / -1;      /* make message full width */
  min-height: 140px;
}

.grid.grid-2 .card form .btn,
.grid.grid-2 .card form button{
  margin-top: 8px;
}

/* Mobile: single column */
@media (max-width: 720px){
  .grid.grid-2 .card form .fields{
    grid-template-columns: 1fr;
  }
}

/* Optional: tidy the list in the left card */
.grid.grid-2 .card ul{ margin: 6px 0 0; padding-left: 0; list-style: none; }
.grid.grid-2 .card ul li{ margin: 8px 0; }

.footer .inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px;
}

.footer .socials-footer{
  display:flex; gap:8px; margin-right:8px;
}
.footer .socials-footer .social{
  width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.2);
  color:#e8f3ee; background:transparent;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.footer .socials-footer .social:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.footer .socials-footer .social svg{
  width:18px; height:18px; display:block; stroke:currentColor; fill:none;
}
.footer .socials-footer .social svg path[fill="currentColor"]{ fill:currentColor; } /* FB icon */
/* Put socials to the right of the contact info inside the card */
.contact-card .contact-top{
  display:flex; gap:16px; align-items:flex-start;
}

.contact-card .contact-info{ flex:1 1 auto; }
.contact-card .contact-info ul{ margin:6px 0 0; padding:0; list-style:none; }
.contact-card .contact-info li{ margin:8px 0; }

/* Social icons grid on the right */
.contact-card .socials.in-card{
  flex:0 0 auto;
  display:grid; grid-template-columns: repeat(3, 40px); gap:8px;
}

.contact-card .socials.in-card .social{
  width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.12);
  color:#2f5b52; background:#fff;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.contact-card .socials.in-card .social:hover{
  transform:translateY(-1px); background:#f6faf8; box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.contact-card .socials.in-card .social svg{
  width:18px; height:18px; stroke:currentColor; fill:none; display:block;
}
.contact-card .socials.in-card .social svg path[fill="currentColor"]{ fill:currentColor; }

/* Stack on mobile */
@media (max-width: 720px){
  .contact-card .contact-top{ flex-direction:column; }
  .contact-card .socials.in-card{ grid-template-columns: repeat(6, 40px); }
}

/* Bigger socials in the contact card */
.contact-card .socials.in-card{
  grid-template-columns: repeat(3, 52px); /* was 40px */
  gap: 12px;
  justify-items: center;
  align-content: start;
}

.contact-card .socials.in-card .social{
  width: 48px;   /* was 36px */
  height: 48px;  /* was 36px */
  border-width: 1.5px;
}

.contact-card .socials.in-card .social svg{
  width: 24px;   /* was 18px */
  height: 24px;  /* was 18px */
}

/* Mobile: keep them on one row if you like */
@media (max-width: 720px){
  .contact-card .socials.in-card{
    grid-template-columns: repeat(6, 52px);
  }
}

/* Make the card split 50/50 so the divider sits in the middle */
.contact-card .contact-top{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* left = info, right = socials */
  align-items:start;
}

/* Socials block: pull left, add divider, more padding */
.contact-card .socials.in-card{
  border-left: 1px solid rgba(0,0,0,.12);
  padding: 8px 16px 8px 24px;       /* a bit more left padding */
  margin-right: 0;                  /* no hugging the edge */
  display:grid;
  grid-template-columns: repeat(3, 56px);  /* bigger icons, 3×2 grid */
  gap: 14px;
  justify-content:start;
  justify-items:center;
  align-content:start;
}

/* Icon size bump */
.contact-card .socials.in-card .social{
  width:56px; height:56px;          /* was 48 */
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(0,0,0,.12);
  color:#2f5b52; background:#fff;
}
.contact-card .socials.in-card .social svg{
  width:28px; height:28px;          /* was 24 */
  stroke:currentColor; fill:none; display:block;
}
.contact-card .socials.in-card .social svg path[fill="currentColor"]{ fill:currentColor; }

/* Mobile: stack, center the row of six */
@media (max-width:720px){
  .contact-card .contact-top{ grid-template-columns:1fr; }
  .contact-card .socials.in-card{
    border-left:0; padding:10px 0 0;
    grid-template-columns: repeat(6, 56px);
    justify-content:center;
  }
}