/* =========================================================
   DGFari Studio  |  Editorial Luxury design system
   Palette: Deep Navy / Warm Terracotta / Warm Cream / Charcoal
   ========================================================= */

:root{
  /* Brand core */
  --navy:        #1B2838;
  --navy-900:    #131d29;
  --navy-800:    #1B2838;
  --navy-700:    #243648;
  --navy-600:    #324a60;
  --terra:       #C4715B;
  --terra-600:   #b35f49;
  --terra-400:   #d18b78;
  --terra-300:   #e2ab9a;
  --cream:       #F5F0EB;
  --cream-50:    #FAF7F2;
  --cream-100:   #F0E9E0;
  --sand:        #E7DDD0;
  --charcoal:    #2D3436;
  --ink:         #20282c;

  /* Semantic */
  --bg:          var(--cream-50);
  --bg-alt:      var(--cream);
  --text:        var(--charcoal);
  --muted:       #6a6660;
  --muted-light: rgba(245,240,235,.66);
  --line:        rgba(45,52,54,.12);
  --line-light:  rgba(245,240,235,.16);

  /* Type */
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --disp: 'Petrona', Georgia, serif;

  /* Rhythm */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Shadow (soft, expensive) */
  --sh-sm: 0 1px 2px rgba(27,40,56,.05), 0 4px 12px rgba(27,40,56,.05);
  --sh-md: 0 4px 14px rgba(27,40,56,.07), 0 18px 40px rgba(27,40,56,.09);
  --sh-lg: 0 10px 30px rgba(27,40,56,.10), 0 40px 80px rgba(27,40,56,.14);
  --sh-terra: 0 10px 30px rgba(196,113,91,.28);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--serif);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:clamp(16px,1.05vw,17.5px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.inline-link{ color:var(--terra-600); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:rgba(196,113,91,.45); transition:color .25s var(--ease-out), text-decoration-color .25s var(--ease-out); }
.inline-link:hover{ color:var(--terra); text-decoration-color:var(--terra); }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input{ font-family:inherit; }
em{ font-style:italic; }
::selection{ background:var(--terra); color:var(--cream-50); }

/* ---------- Branded scrollbar ---------- */
html{ scrollbar-width:thin; scrollbar-color:var(--terra) var(--cream-100); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--cream-100); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--terra-400),var(--terra-600));
  border-radius:100px; border:3px solid var(--cream-100); background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--terra),var(--terra-600)); border-color:var(--cream-100); }
::-webkit-scrollbar-corner{ background:var(--cream-100); }

/* ---------- Branded cursors ---------- */
/* Default: navy arrow with cream edge (readable on cream and navy sections). Hotspot 4,2 */
body{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M4%202%20L4%2020%20L9%2015%20L12.5%2021.5%20L15%2020.5%20L11.7%2014.3%20L18%2014%20Z'%20fill='%231B2838'%20stroke='%23F5F0EB'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto; }
/* Clickable: the DGFari terracotta star with cream edge. Hotspot center 14,14 */
a, button, summary, label, .btn, .magnetic, .nav__burger, [role="button"], details summary{
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M14%201%20C15%209%2019%2013%2027%2014%20C19%2015%2015%2019%2014%2027%20C13%2019%209%2015%201%2014%20C9%2013%2013%209%2014%201%20Z'%20fill='%23C4715B'%20stroke='%23F5F0EB'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, pointer; }
/* Keep the text caret where users type */
input, textarea, select{ cursor:text; }

/* ---------- Grain ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(72px,9vw,140px); }
.section__head{ max-width:760px; margin-bottom:clamp(40px,5vw,68px); }
.section__head--center{ margin-inline:auto; text-align:center; }

/* ---------- Type system ---------- */
.eyebrow,.kicker{
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--terra-600);
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker--light{ color:var(--terra-300); }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 4px rgba(196,113,91,.18); }

.section__title{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.9rem,4vw,3.1rem);
  line-height:1.08; letter-spacing:-.02em; color:var(--navy);
  margin-top:.5em;
}
.section__title em{ font-family:var(--disp); font-weight:400; font-style:italic; color:var(--terra-600); letter-spacing:-.01em; }
.section__title--light{ color:var(--cream-50); }
.section__title--light em{ color:var(--terra-300); }

.lead{
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.6; color:var(--muted); max-width:62ch; margin-top:1.4rem;
}
.lead em{ font-family:var(--disp); font-style:italic; color:var(--charcoal); }

.lead--center{ margin-inline:auto; }
.lead--light{ color:var(--muted-light); }
.lead--light em{ color:var(--cream-50); }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:.96rem;
  padding:.92em 1.5em; border-radius:100px;
  transition:transform .5s var(--ease-out), background .35s var(--ease-soft), color .35s var(--ease-soft), box-shadow .45s var(--ease-out);
  white-space:nowrap; will-change:transform;
}
.btn__icon{
  display:grid; place-items:center; width:1.7em; height:1.7em; border-radius:50%;
  background:rgba(255,255,255,.16); transition:transform .5s var(--ease-spring);
}
.btn:hover .btn__icon{ transform:translateX(3px) rotate(-8deg); }
.btn--primary{ background:var(--terra); color:var(--cream-50); box-shadow:var(--sh-terra); }
.btn--primary:hover{ background:var(--terra-600); box-shadow:0 14px 38px rgba(196,113,91,.4); }

/* Premium hover scoped to the large terracotta CTAs only (hero, plan, pricing flagship, final CTA). No vertical movement. Nav button untouched. */
.btn--primary.magnetic{ transition:background .3s var(--ease-soft), box-shadow .38s var(--ease-out); }
.btn--primary.magnetic:hover{ box-shadow:0 16px 38px rgba(196,113,91,.42); }
.btn--primary.magnetic:hover .btn__icon{ transform:translateX(4px); }

/* Pricing flagship CTA deepens to a richer terracotta on hover. Stays the warm standout, distinct from the navy-filling outline tiers. */
.tier--feature .btn--primary:hover{ background:#9f4a35; color:var(--cream-50); box-shadow:0 16px 38px rgba(159,74,53,.45); }
.btn--ghost{ color:var(--navy); border:1px solid var(--line); background:rgba(255,255,255,.4); }
.btn--ghost:hover{ background:#fff; box-shadow:var(--sh-sm); }
.btn--outline{ color:var(--navy); border:1px solid rgba(27,40,56,.22); background:transparent; }
.btn--outline:hover{ background:var(--navy); color:var(--cream-50); border-color:var(--navy); }
.btn--outline-light{ color:var(--cream-50); border-color:rgba(245,240,235,.4); }
.btn--outline-light:hover{ background:var(--cream-50); color:var(--navy); border-color:var(--cream-50); }
.btn--lg{ padding:1.08em 1.8em; font-size:1.02rem; }
.btn--block{ width:100%; justify-content:center; }
.btn--nav{ padding:.7em 1.2em; font-size:.88rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:transform .5s var(--ease-out), background .4s var(--ease-soft), box-shadow .4s var(--ease-soft), backdrop-filter .4s;
}
.nav.is-scrolled{ background:rgba(250,247,242,.78); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 1px 0 var(--line); }
.nav.is-hidden{ transform:translateY(-100%); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:1.05rem var(--gutter);
  display:flex; align-items:center; gap:2rem;
}
.brand{ display:inline-flex; align-items:center; gap:.6em; color:var(--navy); }
.brand__mark{ color:var(--terra); display:grid; place-items:center; }
.brand__mark img{ display:block; width:24px; height:24px; object-fit:contain; }
.brand--footer .brand__mark img{ width:28px; height:28px; }
.brand__type{ font-family:var(--sans); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; }
.brand__studio{ font-weight:500; color:var(--muted); margin-left:.18em; }
.nav__links{ display:flex; gap:1.9rem; margin-left:auto; }
.nav__links a{
  font-family:var(--sans); font-weight:500; font-size:.92rem; color:var(--charcoal);
  position:relative; padding-bottom:2px; transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--terra);
  transition:width .4s var(--ease-out);
}
.nav__links a:hover{ color:var(--navy); }
.nav__links a:hover::after{ width:100%; }
.nav .btn--nav{ margin-left:0; }
.nav__burger{ display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.nav__burger span{ width:24px; height:2px; background:var(--navy); border-radius:2px; transition:transform .4s var(--ease-out), opacity .3s; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:999;
  background:var(--navy); padding:6rem 2rem 2rem; display:flex; flex-direction:column; gap:1.4rem;
  transform:translateX(100%); transition:transform .55s var(--ease-out); box-shadow:var(--sh-lg);
}
.mobile-menu.is-open{ transform:translateX(0); }
.mobile-menu a{ font-family:var(--sans); font-weight:500; font-size:1.15rem; color:var(--cream); }
.mobile-menu .btn{ margin-top:1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding-top:7rem; overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--cream-50) 46%,var(--cream) 100%);
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.hero__glow--1{ width:46vw; height:46vw; top:-12vw; right:-8vw; background:radial-gradient(circle,rgba(196,113,91,.4),transparent 65%); }
.hero__glow--2{ width:40vw; height:40vw; bottom:-14vw; left:-10vw; background:radial-gradient(circle,rgba(27,40,56,.22),transparent 65%); }
.hero__horizon{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg,transparent,rgba(231,221,208,.5));
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.hero__title{
  font-family:var(--sans); font-weight:800; color:var(--navy);
  font-size:clamp(2.5rem,6.4vw,5rem); line-height:1.02; letter-spacing:-.035em;
  margin-top:1.4rem; max-width:16ch;
}
.hero__title-accent{ display:block; color:var(--terra-600); font-family:var(--disp); font-weight:400; font-style:italic; letter-spacing:-.02em; }
.hero__sub{ font-size:clamp(1.08rem,1.7vw,1.36rem); color:var(--muted); max-width:60ch; margin-top:1.8rem; line-height:1.62; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero__reassure{ font-family:var(--sans); font-size:.86rem; color:var(--muted); margin-top:1.4rem; letter-spacing:.01em; }

/* ticker */
.ticker{
  position:relative; z-index:2; margin-top:clamp(3rem,6vw,5rem);
  border-block:1px solid var(--line); padding-block:1.1rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{ display:flex; align-items:center; width:max-content; animation:ticker 40s linear infinite; }
.ticker__item{ font-family:var(--sans); font-size:.96rem; color:var(--charcoal); white-space:nowrap; padding:0 1.6rem; flex:none; }
.ticker__item b{ color:var(--terra-600); font-weight:700; }
.ticker__sep{ color:var(--terra); opacity:.5; flex:none; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem{ background:var(--bg); }
.problem .lead{ max-width:70ch; }
.problem__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
  margin-top:clamp(2.6rem,5vw,4rem);
}
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.6rem; box-shadow:var(--sh-sm);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s;
}
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:rgba(196,113,91,.32); }
.pcard__stat{ display:flex; align-items:baseline; gap:.12em; font-family:var(--sans); font-weight:800; color:var(--navy); font-size:clamp(2.2rem,3.4vw,2.9rem); letter-spacing:-.03em; line-height:1; }
.pcard__stat i{ font-style:normal; font-size:1.05rem; color:var(--terra); font-weight:700; }
.pcard h3{ font-family:var(--sans); font-weight:700; font-size:1.12rem; color:var(--navy); margin-top:1rem; }
.pcard p{ font-size:.98rem; color:var(--muted); margin-top:.5rem; line-height:1.58; }
.pull{
  font-family:var(--disp); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.35; color:var(--navy);
  max-width:24ch; margin-top:clamp(3rem,5vw,4.5rem); padding-left:1.4rem;
  border-left:3px solid var(--terra);
}
.pull{ max-width:46ch; }

/* ============================================================
   GUIDE
   ============================================================ */
.guide{ background:linear-gradient(180deg,var(--bg) 0%,var(--cream) 100%); }
.guide__layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.guide__pillars{ margin-top:2.6rem; display:flex; flex-direction:column; gap:1.4rem; }
.pillar{ display:flex; gap:1.1rem; align-items:flex-start; }
.pillar__num{ font-family:var(--sans); font-weight:700; font-size:.82rem; color:var(--terra); border:1px solid rgba(196,113,91,.4); border-radius:50%; width:2.4em; height:2.4em; display:grid; place-items:center; flex:none; letter-spacing:.02em; }
.pillar h4{ font-family:var(--sans); font-weight:700; font-size:1.08rem; color:var(--navy); }
.pillar p{ font-size:.98rem; color:var(--muted); margin-top:.3rem; }

.quotecard{
  position:relative; background:var(--navy); color:var(--cream);
  border-radius:var(--radius-lg); padding:2.6rem 2.2rem; box-shadow:var(--sh-lg);
  overflow:hidden;
}
.quotecard::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0%,rgba(196,113,91,.34),transparent 60%); pointer-events:none; }
.quotecard__top{ position:relative; }
.quotecard__quote{ font-family:var(--disp); font-size:4.5rem; line-height:.6; color:var(--terra-400); display:block; }
.quotecard__text{ font-family:var(--disp); font-style:italic; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.4; margin-top:1rem; }
.quotecard__foot{ position:relative; margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line-light); }
.quotecard__tag{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terra-300); display:block; }
.quotecard__name{ font-family:var(--sans); font-weight:700; font-size:1.05rem; margin-top:.35rem; display:block; }

/* ============================================================
   PLAN
   ============================================================ */
.plan{ background:var(--cream); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:clamp(2.6rem,5vw,4rem); }
.step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem 1.9rem 2.4rem; box-shadow:var(--sh-sm); transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.step:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.step__num{ width:3.2rem; height:3.2rem; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--terra),var(--terra-600)); box-shadow:var(--sh-terra); }
.step__num span{ font-family:var(--sans); font-weight:800; font-size:1.4rem; color:var(--cream-50); }
.step__body h3{ font-family:var(--sans); font-weight:700; font-size:1.3rem; color:var(--navy); margin-top:1.3rem; }
.step__body p{ font-size:1rem; color:var(--muted); margin-top:.6rem; }
.step__line{ position:absolute; top:3.3rem; right:-1.4rem; width:1.4rem; height:1.5px; background:repeating-linear-gradient(90deg,var(--terra) 0 5px,transparent 5px 10px); opacity:.5; }
.plan__cta{ display:flex; justify-content:center; margin-top:clamp(2.6rem,4vw,3.5rem); }

/* ============================================================
   VALUE
   ============================================================ */
.value{ background:var(--navy); color:var(--cream); overflow:hidden; }
.value__bg{ position:absolute; inset:0; }
.value__glow{ position:absolute; width:55vw; height:55vw; top:-20vw; right:-15vw; background:radial-gradient(circle,rgba(196,113,91,.26),transparent 62%); filter:blur(40px); }
.value__layout{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.value__intro .lead{ color:var(--muted-light); }

.compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:stretch; }
.compare__col{ border-radius:var(--radius); padding:1.8rem 1.5rem; display:flex; flex-direction:column; }
.compare__col--bad{ background:rgba(245,240,235,.05); border:1px solid var(--line-light); }
.compare__col--good{ position:relative; background:var(--cream-50); color:var(--charcoal); box-shadow:var(--sh-lg); border:1px solid #fff; }
.compare__label{ font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.compare__col--bad .compare__label{ color:var(--terra-300); }
.compare__col--good .compare__label{ color:var(--terra-600); }
.compare__big{ font-family:var(--sans); font-weight:800; font-size:clamp(2.2rem,4vw,3rem); letter-spacing:-.03em; margin-top:.5rem; line-height:1; }
.compare__col--bad .compare__big{ color:var(--cream); text-decoration:line-through; text-decoration-color:rgba(196,113,91,.7); text-decoration-thickness:2px; }
.compare__col--good .compare__big{ color:var(--navy); }
.compare__unit{ font-size:.9rem; opacity:.7; margin-top:.3rem; }
.compare__list{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.compare__list li{ font-size:.95rem; padding-left:1.5rem; position:relative; line-height:1.4; }
.compare__col--bad .compare__list li::before{ content:'\00d7'; position:absolute; left:0; color:var(--terra-300); font-weight:700; }
.compare__col--good .compare__list li::before{ content:''; position:absolute; left:0; top:.55em; width:.7rem; height:.4rem; border-left:2px solid var(--terra-600); border-bottom:2px solid var(--terra-600); transform:rotate(-45deg); }
.compare__flag{ margin-top:1.6rem; font-family:var(--sans); font-weight:700; font-size:.9rem; color:var(--cream-50); background:var(--terra); padding:.6em 1em; border-radius:100px; text-align:center; box-shadow:var(--sh-terra); }
.compare__vs{ align-self:center; font-family:var(--disp); font-style:italic; font-size:1.3rem; color:var(--terra-300); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing{ background:var(--cream); }
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:clamp(2.6rem,5vw,4rem); align-items:stretch; }
.tier{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:2rem 1.7rem;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s;
}
.tier:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }
.tier--feature{ background:linear-gradient(180deg,#fff,var(--cream-50)); border-color:rgba(196,113,91,.4); box-shadow:var(--sh-md); position:relative; }
.tier--feature::before{ content:''; position:absolute; inset:0; border-radius:var(--radius-lg); padding:1.5px; background:linear-gradient(160deg,var(--terra),transparent 55%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.tier--dark{ background:var(--navy); border-color:var(--navy-700); color:var(--cream); }
.tier__badge{ position:absolute; top:-.8rem; left:50%; transform:translateX(-50%); font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-50); background:var(--terra); padding:.45em 1em; border-radius:100px; box-shadow:var(--sh-terra); white-space:nowrap; }
.tier__name{ font-family:var(--sans); font-weight:800; font-size:1.4rem; color:var(--navy); letter-spacing:-.02em; }
.tier--dark .tier__name{ color:var(--cream-50); }
.tier__for{ font-size:.9rem; color:var(--muted); margin-top:.4rem; min-height:2.6em; line-height:1.35; }
.tier--dark .tier__for{ color:var(--muted-light); }
.tier__price{ margin-top:1.4rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.tier--dark .tier__price{ border-color:var(--line-light); }
.tier__amt{ font-family:var(--sans); font-weight:800; font-size:2.2rem; color:var(--navy); letter-spacing:-.03em; }
.tier--dark .tier__amt{ color:var(--cream-50); }
.tier__per{ display:block; font-size:.86rem; color:var(--muted); margin-top:.2rem; }
.tier--dark .tier__per{ color:var(--muted-light); }
.tier__pitch{ font-size:.98rem; color:var(--charcoal); margin-top:1.2rem; line-height:1.5; }
.tier--dark .tier__pitch{ color:var(--cream); }
.tier__list{ margin-top:1.2rem; margin-bottom:1.8rem; display:flex; flex-direction:column; gap:.62rem; flex:1; }
.tier__list li{ font-size:.93rem; color:var(--muted); padding-left:1.5rem; position:relative; line-height:1.4; }
.tier--dark .tier__list li{ color:var(--muted-light); }
.tier__list li::before{ content:''; position:absolute; left:0; top:.5em; width:.62rem; height:.34rem; border-left:2px solid var(--terra); border-bottom:2px solid var(--terra); transform:rotate(-45deg); }
.pricing__note{ font-family:var(--sans); text-align:center; max-width:64ch; margin:clamp(2.4rem,4vw,3.4rem) auto 0; font-size:.98rem; color:var(--muted); line-height:1.6; }

/* ============================================================
   SUCCESS
   ============================================================ */
.success{ background:linear-gradient(180deg,var(--cream) 0%,var(--cream-50) 100%); }
.success__layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.success__copy .lead + .lead{ margin-top:1.2rem; }
.resultcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1rem 1.8rem 1.8rem; box-shadow:var(--sh-md); }
.resultcard__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line); }
.resultcard__k{ font-family:var(--sans); font-weight:500; color:var(--muted); font-size:.98rem; }
.resultcard__v{ font-family:var(--sans); font-weight:700; color:var(--navy); display:flex; align-items:baseline; gap:.6rem; }
.resultcard__v b{ color:var(--terra-600); font-size:1.12rem; }
.resultcard__v s{ color:var(--muted); font-weight:400; font-size:.85rem; opacity:.7; }
.resultcard__foot{ margin-top:1.4rem; text-align:center; font-family:var(--disp); font-style:italic; font-size:1.2rem; color:var(--navy); }

/* ============================================================
   STAKES
   ============================================================ */
.stakes{ background:var(--navy-900); color:var(--cream); }
.stakes__inner{ max-width:800px; margin-inline:auto; text-align:center; }
.stakes__quote{ font-family:var(--disp); font-style:italic; font-weight:400; font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.34; color:var(--cream-50); margin-top:1.4rem; letter-spacing:-.01em; }
.stakes__q{ color:var(--terra-400); }
.stakes__after{ font-size:1.05rem; color:var(--muted-light); margin-top:1.8rem; max-width:60ch; margin-inline:auto; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background:var(--cream-50); }
.faq__layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.faq__head{ position:sticky; top:7rem; align-self:start; }
.faq__list{ display:flex; flex-direction:column; gap:.8rem; }
.faq__item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out); }
.faq__item:hover{ border-color:rgba(196,113,91,.4); box-shadow:var(--sh-md); transform:translateY(-2px); }
.faq__item[open]{ box-shadow:var(--sh-md); border-color:rgba(196,113,91,.3); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:1.3rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--sans); font-weight:600; font-size:1.04rem; color:var(--navy);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__plus{ position:relative; width:18px; height:18px; flex:none; }
.faq__plus::before,.faq__plus::after{ content:''; position:absolute; background:var(--terra); border-radius:2px; transition:transform .45s var(--ease-out), opacity .45s var(--ease-out); }
.faq__plus::before{ top:8px; left:0; width:18px; height:2px; }
.faq__plus::after{ left:8px; top:0; width:2px; height:18px; }
.faq__item[open] .faq__plus::after{ transform:rotate(90deg); opacity:0; }
.faq__answer{ padding:0 1.5rem 1.4rem; }
.faq__answer p{ color:var(--muted); font-size:1rem; line-height:1.6; max-width:60ch; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ background:var(--navy); color:var(--cream); overflow:hidden; }
.cta__bg{ position:absolute; inset:0; }
.cta__glow{ position:absolute; border-radius:50%; filter:blur(70px); }
.cta__glow--1{ width:45vw; height:45vw; top:-15vw; left:-10vw; background:radial-gradient(circle,rgba(196,113,91,.3),transparent 62%); }
.cta__glow--2{ width:40vw; height:40vw; bottom:-18vw; right:-12vw; background:radial-gradient(circle,rgba(50,74,96,.5),transparent 62%); }
.cta__inner{ position:relative; z-index:2; max-width:760px; margin-inline:auto; text-align:center; }
.cta__title{ font-family:var(--sans); font-weight:800; font-size:clamp(2rem,4.5vw,3.4rem); line-height:1.06; letter-spacing:-.03em; color:var(--cream-50); margin-top:.6rem; }
.cta__sub{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--muted-light); margin-top:1.4rem; max-width:60ch; margin-inline:auto; }
.cta__form{ margin-top:2.6rem; text-align:left; }
.cta__chat{ margin-top:2.6rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.cta__fields{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.9rem; margin-bottom:1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.field__label{ font-family:var(--sans); font-weight:500; font-size:.82rem; color:var(--terra-300); letter-spacing:.04em; }
.field input{
  width:100%; min-width:0;
  background:rgba(245,240,235,.06); border:1px solid var(--line-light); border-radius:var(--radius-sm);
  padding:.9em 1em; color:var(--cream-50); font-size:1rem; transition:border-color .3s, background .3s;
}
.field input::placeholder{ color:rgba(245,240,235,.4); }
.field input:focus{ outline:none; border-color:var(--terra); background:rgba(245,240,235,.1); }
.cta__formnote{ font-family:var(--sans); text-align:center; font-size:.86rem; color:var(--terra-300); margin-top:1.2rem; }
.cta__formnote.is-success{ color:#9fd6a9; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--navy-900); color:var(--cream); padding-top:clamp(3.5rem,6vw,5rem); }
.footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line-light); }
.brand--footer .brand__type{ color:var(--cream-50); }
.brand--footer .brand__studio{ color:var(--muted-light); }
.footer__tag{ font-family:var(--disp); font-style:italic; font-size:1.2rem; color:var(--terra-300); margin-top:1rem; }
.footer__blurb{ font-size:.96rem; color:var(--muted-light); margin-top:.8rem; max-width:42ch; }
.footer__col h5{ font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--terra-300); margin-bottom:1.1rem; }
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col a,.footer__loc{ font-family:var(--sans); font-size:.96rem; color:var(--muted-light); transition:color .3s; }
.footer__col a:hover{ color:var(--cream-50); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:1.6rem 2rem; flex-wrap:wrap; gap:.6rem; }
.footer__bottom span{ font-family:var(--sans); font-size:.84rem; color:var(--muted-light); }
.footer__legal{ display:inline-flex; gap:1.4rem; }
.footer__legal a{ font-family:var(--sans); font-size:.84rem; color:var(--muted-light); transition:color .3s; }
.footer__legal a:hover{ color:var(--cream-50); }

/* ============================================================
   REVEAL (JS-driven; graceful no-JS fallback)
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(24px); filter:blur(6px); }
.reveal-in{ opacity:1 !important; transform:none !important; filter:none !important; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.no-js [data-reveal]{ opacity:1; transform:none; filter:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .problem__grid{ grid-template-columns:repeat(2,1fr); }
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .tier__badge{ font-size:.66rem; }
}
@media (max-width:880px){
  .nav__links{ display:none; }
  .nav .btn--nav{ display:none; }
  .nav__burger{ display:flex; }
  .guide__layout,.value__layout,.success__layout,.faq__layout{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step__line{ display:none; }
  .faq__head{ position:static; }
  .compare{ grid-template-columns:1fr; }
  .compare__vs{ justify-self:center; }
  .footer__inner{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:560px){
  .problem__grid{ grid-template-columns:1fr; }
  .tiers{ grid-template-columns:1fr; }
  .cta__fields{ grid-template-columns:1fr; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
}

/* Bold the italic accent type (Petrona) */
.hero__title-accent,
.section__title em,
.lead em,
.pull,
.quotecard__quote,
.quotecard__text,
.compare__vs,
.resultcard__foot,
.stakes__quote,
.footer__tag{ font-weight:600; }