/* ==========================================================================
   BASE — mobile-first tokens, reset, typography, shared components
   Optimized for 95% mobile traffic
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@400;500;600&display=swap");

:root {
  /* Brand */
  --navy: #0e2a5a;
  --navy-deep: #0b1f45;
  --gold: #c7a86f;
  --gold-bright: #d4af37;
  --gold-soft: #cda567;
  --gold-deep: #8a6f3a;

  /* Surfaces */
  --cream: #fffbf7;
  --cream-light: #fffcf8;
  --sand: #f6f1e8;
  --sand-warm: #f7eddc;
  --white: #fff;

  /* Text */
  --ink: #1a1f2e;
  --muted: #5a6478;
  --muted-soft: #9aa3b2;
  --muted-cool: #8a90a2;
  --on-dark: #e8e6e1;

  /* Lines */
  --line-navy: rgba(14, 42, 90, 0.06);
  --line-black: rgba(0, 0, 0, 0.05);
  --line-gold: rgba(199, 168, 111, 0.2);
  --line-default: #e5e7eb;

  /* Type */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", serif;

  /* Radii */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 26px;
  --r-3xl: 28px;
  --r-pill: 999px;
  --r-organic: 45% 75% 50% 60% / 45% 45% 75% 55%;
  --r-photo: 18px;

  /* Elevation */
  --sh-card: 0 12px 36px rgba(14, 42, 90, 0.07);
  --sh-card-sm: 0 10px 30px rgba(14, 42, 90, 0.06);
  --sh-card-hover: 0 18px 40px rgba(14, 42, 90, 0.1);
  --sh-media: 0 16px 40px rgba(14, 42, 90, 0.1);
  --sh-media-sm: 0 10px 24px rgba(14, 42, 90, 0.08);
  --sh-panel: 0 18px 48px rgba(14, 42, 90, 0.12);
  --sh-float: 0 18px 40px rgba(14, 42, 90, 0.12);
  --sh-hero: 0 24px 60px rgba(14, 42, 90, 0.14);
  --sh-gold: 0 8px 20px rgba(199, 168, 111, 0.35);
  --sh-gold-hover: 0 12px 28px rgba(199, 168, 111, 0.45);
  --sh-navy: 0 12px 30px rgba(14, 42, 90, 0.28);
  --sh-toast: 0 16px 40px rgba(0, 0, 0, 0.28);
  --sh-sticky: 0 -8px 24px rgba(14,42,90,0.12);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.2s;

  /* Section rhythm — mobile first */
  --pad-lg: 48px;
  --pad-md: 44px;
  --pad-sm: 40px;

  /* CTA */
  --cta-h: 56px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  width:100%;max-width:100vw;overflow-x:hidden;
  background:var(--cream);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:hsla(39,44%,61%,0.3)}
img,svg{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Typography */
h1,h2,h3,.serif{font-family:var(--font-serif);font-weight:400}
.display-gold{
  font-family:var(--font-serif);font-style:italic;font-weight:500;line-height:1.2;
  color:var(--gold);font-size:24px;
}
.display-navy{
  font-family:var(--font-serif);font-style:italic;font-weight:500;line-height:1.2;
  color:var(--navy);font-size:22px;
}
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);
}
.eyebrow--lg{font-size:12px}
.eyebrow--on-dark{letter-spacing:0.18em;font-weight:400}
.eyebrow--pill{
  display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(14,42,90,0.06);color:var(--navy);letter-spacing:0.16em;font-weight:500;
  font-size:11px;
}
.section-title{
  margin-top:10px;font-size:30px;line-height:1.05;color:var(--navy);letter-spacing:-0.01em;
}
.section-title--tight{line-height:0.95;font-size:32px}
.section-lede{margin-top:16px;font-size:15px;line-height:1.7;color:var(--muted)}

/* Layout */
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
.container--1150{max-width:1150px}
.container--1100{max-width:1100px}
.container--900{max-width:900px}
.section{padding-block:var(--pad-lg)}
.section--md{padding-block:var(--pad-md)}
.section--sm{padding-block:var(--pad-sm)}
.section--cream{background:var(--cream)}
.section--cream-light{background:var(--cream-light)}
.section--sand{background:var(--sand)}
.section--white{background:var(--white)}
.stack{display:grid;gap:28px}

/* Buttons — mobile conversion optimized */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:48px;padding-inline:24px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;letter-spacing:0.02em;text-align:center;white-space:nowrap;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
  min-height:48px; /* accessibility */
}
.btn:active{transform:scale(0.98)}
.btn--navy{background:var(--navy);color:var(--white);box-shadow:var(--sh-navy)}
.btn--navy:hover{transform:translateY(-1px)}
.btn--outline{background:var(--white);border:1.5px solid var(--line-default);color:var(--navy)}
.btn--gold{
  height:48px;padding-inline:24px;background:var(--gold);color:var(--navy);
  font-size:14px;font-weight:600;letter-spacing:0.02em;box-shadow:var(--sh-gold);
}
.btn--gold:hover{box-shadow:var(--sh-gold-hover);transform:translateY(-1px)}
.btn--plan{
  width:100%;height:48px;padding-inline:0;font-size:14px;font-weight:600;line-height:1;
  background:var(--white);border:1.5px solid rgba(14,42,90,0.15);color:var(--navy);
}
.btn--plan.is-featured{background:var(--navy);border-color:var(--navy);color:var(--white);box-shadow:0 10px 24px rgba(14,42,90,0.25)}

/* Mobile full-width primary */
.btn--full{width:100%;height:var(--cta-h);font-size:16px;border-radius:var(--r-pill)}
.btn--hero-primary{width:100%;height:56px;font-size:16px;font-weight:600}

.section-cta{display:flex;justify-content:center;margin-top:32px}
.section-cta--stack{flex-direction:column;gap:12px}
.stack>.section-cta{margin-top:8px}

/* Tags */
.tag{
  display:inline-flex;align-items:center;height:28px;padding-inline:12px;border-radius:var(--r-pill);
  border:1px solid rgba(199,168,111,0.3);background:var(--white);font-size:11.5px;color:var(--navy);
}
.tag--theme{height:32px;padding-inline:14px;border-color:var(--gold);background:var(--cream);font-size:12px}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}

/* Checks */
.check{display:grid;place-items:center;flex-shrink:0;border-radius:var(--r-pill);color:var(--navy);background:rgba(199,168,111,0.18)}
.check--sm{width:18px;height:18px;margin-top:2px;font-size:11px}
.check--md{width:22px;height:22px;margin-top:2px;font-size:12px;font-weight:600}
.check-list__item{display:flex;gap:12px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.callout{border-radius:var(--r-lg);background:var(--sand);border:1px solid var(--line-gold);padding:18px}

/* Photo */
.photo-frame{width:100%;border-radius:var(--r-photo);overflow:hidden;aspect-ratio:16/10}
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Stats */
.stat-tile{border-radius:14px;padding:12px;background:var(--sand-warm)}
.stat-tile__value{display:block;font-size:18px;font-weight:600;line-height:1;color:var(--navy)}
.stat-tile__label{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.stat-card{
  border-radius:var(--r-md);background:var(--white);border:1px solid var(--line-black);
  padding:14px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
.stat-card__value{display:block;font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--navy)}
.stat-card__label{display:block;font-size:11px;color:var(--muted)}

.rule{height:1px;width:100px;margin-inline:auto;background:linear-gradient(to right,transparent,rgba(199,168,111,0.6),transparent)}
.gradient-animated{
  background:linear-gradient(270deg,var(--gold),var(--navy),var(--gold));background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 4px rgba(199,168,111,0.25));animation:gradient-shift 5s ease-in-out infinite;
}
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.blob{position:absolute;border-radius:var(--r-pill);filter:blur(42px);pointer-events:none}

/* Sticky mobile CTA bar — conversion law: always accessible */
.m-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,251,247,0.92);backdrop-filter:blur(16px);
  border-top:1px solid var(--line-navy);box-shadow:var(--sh-sticky);
  display:flex;gap:10px;align-items:center;
}
.m-cta-bar__text{flex:1;min-width:0}
.m-cta-bar__title{font-size:13px;font-weight:600;color:var(--navy);line-height:1.2}
.m-cta-bar__sub{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-cta-bar .btn{height:48px;flex:0 0 auto;padding-inline:20px;font-size:14px}
@media(min-width:1024px){.m-cta-bar{display:none}}

/* Hide scrollbar for horizontal scroll areas */
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* Responsive primitives */
@media(min-width:640px){
  .container{padding-inline:24px}
  .btn--hero-primary{width:auto}
}
@media(min-width:1024px){
  :root{--pad-lg:96px;--pad-md:84px;--pad-sm:72px}
  .container{padding-inline:32px}
  .display-gold{font-size:36px}
  .display-navy{font-size:30px}
  .section-title{font-size:44px}
  .section-title--tight{font-size:46px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

.eyebrow--gold{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:#c7a86f;color:#0e2a5a;font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase}

/* fix eyebrow gold stretch */
.eyebrow--gold{width:fit-content; max-width:max-content;}