:root{
  --stone:#F6F2EB;
  --paper:#FFFDFA;
  --ink:#141312;
  --muted:#5A5A5A;
  --border:#E6DFD6;
  --brass:#A38A54;
  --brass-dark:#786741;

  --radius:10px;
  --radius-sm:8px;

  --container:1240px;
  --pad:24px;

  --shadow: 0 10px 30px rgba(20,19,18,.06);
  --shadow-soft: 0 6px 18px rgba(20,19,18,.05);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--stone);
  line-height:1.6;
}

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

.container{
  width:min(var(--container), calc(100% - (var(--pad) * 2)));
  margin-inline:auto;
}

.section{
  padding: 104px 0;
}

.section-paper{
  background:var(--paper);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.eyebrow{
  margin:0 0 14px 0;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--brass);
  font-weight:600;
}

h1,h2,h3{
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing:-.02em;
  margin:0;
}

h1{
  font-size: clamp(40px, 4.6vw, 64px);
  line-height:1.05;
  margin-bottom:18px;
}

h2{
  font-size: clamp(30px, 3.4vw, 46px);
  line-height:1.1;
  margin-bottom:14px;
}

h3{
  font-size:22px;
  line-height:1.25;
  margin-bottom:10px;
}

.lead{
  font-size:18px;
  color:var(--muted);
  max-width:56ch;
  margin:0 0 18px 0;
}

.subhead{
  margin:0;
  color:var(--muted);
  max-width:70ch;
}

.fineprint{
  margin:14px 0 0 0;
  font-size:13px;
  color:var(--muted);
}

.center{ display:flex; justify-content:center; margin-top:26px; }

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,242,235,.72);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  transition: color .2s ease;
}
.brand:hover{
  color:var(--brass);
}
.brand-logo{
  height: 70px;
  width:auto;
  flex-shrink:0;
  transition: opacity 0.2s ease;
}
.brand:hover .brand-logo{
  opacity:0.85;
}
.brand-name{ 
  font-family: "Playfair Display", Georgia, serif; 
  font-weight:600; 
  font-size:22px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-links a{
  text-decoration:none;
  color:var(--ink);
  font-size:14px;
}
.nav-links a:not(.btn):hover{
  text-decoration:underline;
  text-underline-offset: 6px;
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--paper);
  padding:10px;
  border-radius:999px;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  margin:4px 0;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  cursor:pointer;
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background:var(--brass);
  border-color:var(--brass);
  color:#fff;
}
.btn-primary:hover{ filter: brightness(.96); }

.btn-secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--border);
}
.btn-secondary:hover{ background:rgba(255,253,250,.65); }

.btn-link{
  background:transparent;
  border:none;
  color:var(--brass);
  font-weight:600;
  padding:10px 0;
}
.btn-link:hover{
  transform:none;
  text-decoration:underline;
  text-underline-offset: 6px;
}

/* Utility Classes */
.mr-2{ margin-right: 8px; }
.mt-2{ margin-top: 8px; }
.mb-3{ margin-bottom: 12px; }
.text-brass{ color: var(--brass); }
.text-muted{ color: var(--muted); }
.text-sm{ font-size: 14px; }
.text-3xl{ font-size: 32px; }

/* Challenge Section */
.challenge-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}
.challenge-card{
  background:rgba(255,253,250,.72);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:28px 24px;
  text-align:center;
}
.challenge-icon{
  width:56px;
  height:56px;
  margin:0 auto 16px auto;
  border-radius:999px;
  background:var(--stone);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}
.challenge-icon i{
  font-size:24px;
  color:var(--brass);
}
.challenge-card h3{
  font-size:20px;
  margin-bottom:10px;
}
.challenge-card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

/* Features List (redesigned) */
.features-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.features-list .feature-item{
  background:rgba(255,253,250,.72);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:24px 20px;
  text-align:center;
}
.features-list .feature-item i{
  font-size:32px;
  color:var(--brass);
  margin-bottom:12px;
  display:block;
}
.features-list .feature-item h3{
  font-size:18px;
  margin-bottom:8px;
}
.features-list .feature-item p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

/* Final CTA Section (redesigned) */
.final-cta-section{
  background: linear-gradient(135deg, var(--ink) 0%, #1a1918 100%);
  color: var(--paper);
  padding: 88px 0;
}
.final-cta-content{
  text-align:center;
  max-width:700px;
  margin:0 auto;
}
.final-cta-content h2{
  color:var(--paper);
  margin-bottom:16px;
  font-size: clamp(32px, 4vw, 48px);
}
.final-cta-content p{
  color: rgba(255,255,255,.75);
  font-size:18px;
  margin:0 0 32px 0;
}
.final-cta-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-large{
  padding:16px 32px;
  font-size:16px;
}
.final-cta-section .btn-secondary{
  border-color: rgba(255,255,255,.3);
  color: var(--paper);
}
.final-cta-section .btn-secondary:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
}

/* Page Hero */
.page-hero{
  padding-top: 86px;
  padding-bottom: 44px;
}
.page-hero-content{
  text-align: center;
  max-width: 66ch;
  margin: 0 auto;
}

/* Comparison Table */
.comparison-wrapper{
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,253,250,.72);
}
.comparison-table{
  width: 100%;
  border-collapse: collapse;
}
.comparison-table th{
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 16px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
}
.comparison-table td{
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.comparison-table tr:last-child td{
  border-bottom: none;
}
.comparison-table .feature-name{
  font-weight: 500;
  color: var(--ink);
}
.comparison-table .feature-value{
  color: var(--muted);
  text-align: center;
}
.comparison-group-header td{
  background: var(--paper);
  padding: 12px 18px !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brass);
  border-bottom: 1px solid var(--border) !important;
}
.comparison-group-header td strong{
  font-weight: 700;
}

/* Addons Grid */
.addons-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.addon-card{
  background: rgba(255,253,250,.72);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}
.addon-header{
  margin-bottom: 14px;
}
.addon-header h3{
  margin-bottom: 10px;
  font-size: 20px;
}
.addon-price{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--brass);
  margin-top: 8px;
}
.addon-unit{
  font-size: 16px;
  color: var(--muted);
  font-family: Inter, sans-serif;
  font-weight: 400;
}
.addon-card p{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.btn-small{ padding:10px 14px; font-size:13px; color:#fff !important; }
.btn-block{ width:100%; }

/* HERO */
.hero{
  padding-top:86px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:44px;
  align-items:center;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.hero-media .media-frame{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.media-frame img{
  width:100%;
  height:440px;
  object-fit:cover;
}
.media-caption{
  padding:14px 16px;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--border);
  background: rgba(255,253,250,.85);
}

.trust-strip{
  margin-top:34px;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:14px;
}
.trust-item{
  border:1px solid var(--border);
  background:rgba(255,253,250,.7);
  border-radius: var(--radius-sm);
  padding:16px 16px;
}
.trust-title{
  display:block;
  font-weight:600;
  font-size:14px;
  margin-bottom:4px;
}
.trust-text{
  display:block;
  font-size:13px;
  color:var(--muted);
}

/* SPLIT + PROSE */
.split{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:44px;
  align-items:start;
}
.prose p{ margin:0 0 14px 0; color:var(--muted); }
.prose p:last-child{ margin-bottom:0; }

/* SECTION HEAD */
.section-head{
  margin-bottom:34px;
}

/* CARDS */
.cards{
  display:grid;
  gap:16px;
}
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }

.card{
  background:rgba(255,253,250,.72);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:22px 20px;
}
.card-eyebrow{
  margin:0 0 10px 0;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
}
.card p{ margin:0; color:var(--muted); }

/* SECTION HEADER */
.section-header{
  text-align:center;
  max-width:72ch;
  margin: 0 auto 44px auto;
}
.section-lead{
  margin:14px 0 0 0;
  font-size:16px;
  color:var(--muted);
}
.section-cta{
  margin-top:34px;
  text-align:center;
}

/* USE CASES */
.use-cases-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.use-case-card{
  background:rgba(255,253,250,.72);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
}
.use-case-image img{
  width:100%;
  height:280px;
  object-fit:cover;
}
.use-case-content{
  padding:22px 20px;
}
.use-case-content h3{
  margin-bottom:10px;
}
.use-case-content p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

/* FEATURE CATALOG */
.feature-catalog{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:34px 44px;
  max-width:1060px;
  margin:0 auto;
}
.feature-item{
  padding:0;
}
.feature-label{
  margin:0 0 8px 0;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
}
.feature-item h3{
  margin-bottom:10px;
  font-size:20px;
}
.feature-item p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

/* TEMPLATES GRID */
.templates-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:20px;
}
.template-card{
  background:rgba(255,253,250,.72);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.template-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.template-image img{
  width:100%;
  height:240px;
  object-fit:cover;
}
.template-content{
  padding:18px 18px 20px 18px;
}
.template-content h3{
  margin-bottom:8px;
  font-size:18px;
}
.template-content p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

/* PROCESS STEPS */
.process-steps{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:34px 44px;
  max-width:1000px;
  margin:0 auto;
}
.process-step{
  display:flex;
  gap:18px;
}
.step-number{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:999px;
  background:var(--brass);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-family: "Playfair Display", Georgia, serif;
  font-size:20px;
}
.process-step h3{
  margin-bottom:8px;
  font-size:18px;
}
.process-step p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

/* BILLING TOGGLE */
.billing-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:32px auto 48px;
  max-width:400px;
}
.billing-option{
  font-size:16px;
  font-weight:500;
  color:var(--muted);
  transition:color .2s ease;
  cursor:pointer;
  user-select:none;
}
.billing-option.active{
  color:var(--ink);
  font-weight:600;
}
.billing-badge{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:var(--brass);
  padding:3px 8px;
  border-radius:12px;
  margin-left:6px;
  vertical-align:middle;
}
.toggle-switch{
  position:relative;
  width:56px;
  height:28px;
  background:var(--border);
  border:none;
  border-radius:14px;
  cursor:pointer;
  transition:background .2s ease;
}
.toggle-switch:hover{
  background:rgba(163,138,84,.2);
}
.toggle-switch.active{
  background:var(--brass);
}
.toggle-slider{
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s ease;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.toggle-switch.active .toggle-slider{
  transform:translateX(28px);
}

/* PRICING GRID */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  align-items:stretch;
}
.pricing-card{
  background:rgba(255,253,250,.72);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:26px 22px;
  position:relative;
  display:flex;
  flex-direction:column;
}
.pricing-card-recommended{
  border-color: rgba(163,138,84,.8);
  box-shadow: var(--shadow);
  background: rgba(255,253,250,.92);
}
.pricing-badge{
  position:absolute;
  top:16px;
  right:16px;
  font-size:11px;
  border:1px solid rgba(163,138,84,.45);
  color:var(--brass);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(163,138,84,.10);
  font-weight:600;
  letter-spacing:.08em;
}
.pricing-header h3{
  margin-bottom:8px;
  font-size:22px;
}
.pricing-amount{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:12px 0 8px 0;
}
.pricing-amount .price{
  font-family:"Playfair Display", Georgia, serif;
  font-size:44px;
  letter-spacing:-.02em;
}
.pricing-amount .period{
  color:var(--muted);
  font-size:16px;
}
.pricing-description{
  margin:0 0 20px 0;
  color:var(--muted);
  font-size:14px;
}
.pricing-savings{
  display:block;
  font-size:13px;
  color:var(--brass);
  font-weight:600;
  margin-top:8px;
  margin-bottom:12px;
}
.pricing-features{
  margin:0 0 24px 0;
  padding-left:0;
  list-style:none;
  color:var(--muted);
  flex-grow:1;
  font-size:14px;
  line-height:1.6;
}
.pricing-features li{
  margin:10px 0;
  list-style:none;
}
.pricing-card .btn{
  margin-top:auto;
}
.pricing-view-all{
  display: block;
  text-align: center;
  color: var(--brass);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  transition: color 0.2s ease;
}
.pricing-view-all:hover{
  color: var(--brass-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.price-prefix{
  font-size: 18px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  color: var(--muted);
}

/* Templates Grid */
.templates-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:32px;
  margin-top:48px;
}
.template-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:block;
}
.template-preview{
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
}
.template-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.template-info{
  padding:24px;
}
.template-info h3{
  font-size:20px;
  font-weight:600;
  margin:0 0 8px;
}
.template-info p{
  font-size:15px;
  color:var(--muted);
  margin:0;
}

/* Process Timeline */
.process-timeline{
  display:grid;
  gap:40px;
  margin-top:48px;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
.process-step{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:32px;
  align-items:start;
}
.process-number{
  width:64px;
  height:64px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--brass) 0%, var(--brass-dark) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:600;
  font-family:'Playfair Display', serif;
  box-shadow: 0 4px 12px rgba(163,138,84,.25);
  position:relative;
}
.process-number::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.2);
  pointer-events:none;
}
.process-content h3{
  font-size:24px;
  margin:0 0 12px;
}
.process-content p{
  font-size:16px;
  color:var(--muted);
  margin:0 0 16px;
  line-height:1.7;
}
.process-time{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  color:var(--brass);
  background:rgba(163,138,84,.1);
  padding:6px 12px;
  border-radius:20px;
}
.process-summary{
  text-align:center;
  margin-top:56px;
  padding:40px 48px;
  background:linear-gradient(135deg, rgba(163,138,84,.08) 0%, rgba(163,138,84,.03) 100%);
  border:2px solid var(--brass);
  border-radius:16px;
  font-size:17px;
  position:relative;
  overflow:hidden;
}
.process-summary::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--brass) 0%, var(--brass-dark) 50%, var(--brass) 100%);
}
.process-summary strong{
  font-size:22px;
  color:var(--brass);
  font-family:'Playfair Display', serif;
  font-weight:600;
  display:block;
  margin-bottom:8px;
}
.text-muted{
  color:var(--muted);
}

/* FAQ */
.faq-container{
  max-width:860px;
  margin:0 auto;
}
.faq-list{
  display:grid;
  gap:12px;
}
.faq-item{
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,253,250,.72);
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px;
  background:none;
  border:none;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  color:var(--ink);
}
.faq-icon{
  flex-shrink:0;
  transition: transform .2s ease;
}
.faq-item.is-open .faq-icon{
  transform: rotate(180deg);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .3s ease;
}
.faq-item.is-open .faq-answer{
  max-height:600px;
}
.faq-answer p{
  margin:0;
  padding:0 18px 18px 18px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

/* FINAL CTA */
.final-cta{
  text-align:center;
  max-width:66ch;
  margin:0 auto;
}
.final-cta h2{
  margin-bottom:14px;
}
.final-cta .lead{
  margin:0 auto 22px auto;
}
.cta-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* PROOF STRIP */
.proof-strip{
  margin-top:44px;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:14px;
}
.proof-item{
  border:1px solid var(--border);
  background:rgba(255,253,250,.7);
  border-radius: var(--radius-sm);
  padding:16px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.proof-item strong{
  display:block;
  font-weight:600;
  font-size:14px;
  color:var(--ink);
}
.proof-item span{
  display:block;
  font-size:13px;
  color:var(--muted);
}

/* PRICING */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  align-items:stretch;
}
.price-card{
  background:rgba(255,253,250,.72);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:22px 20px;
  position:relative;
}
.price-card--featured{
  border-color: rgba(163,138,84,.8);
  box-shadow: var(--shadow);
  background: rgba(255,253,250,.92);
}
.badge{
  position:absolute;
  top:14px;
  right:14px;
  font-size:12px;
  border:1px solid rgba(163,138,84,.45);
  color:var(--brass);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(163,138,84,.10);
}
.price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:10px 0 6px 0;
}
.price-value{
  font-family:"Playfair Display", Georgia, serif;
  font-size:42px;
  letter-spacing:-.02em;
}
.price-unit{ color:var(--muted); }
.price-note{ margin:0 0 14px 0; color:var(--muted); }

.price-card ul{
  margin:0 0 18px 0;
  padding-left:18px;
  color:var(--muted);
}
.price-card li{ margin:8px 0; }

.notice{
  margin-top:18px;
  padding:16px 16px;
  border:1px solid var(--border);
  background: rgba(255,253,250,.75);
  border-radius: var(--radius-sm);
  color:var(--muted);
}

/* FAQ */
.faq{
  display:grid;
  gap:10px;
  max-width: 860px;
}
.faq-item{
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,253,250,.72);
  padding: 14px 14px;
}
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-body{
  margin-top:10px;
  color:var(--muted);
}

/* FINAL CTA */
.final-cta{
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgba(255,255,255,.08);
}
.final-cta .eyebrow{ color: rgba(255,255,255,.65); }
.final-cta h2{ color: var(--paper); }
.final-cta .subhead{ color: rgba(255,255,255,.70); }
.final-cta-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.final-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.final-cta .btn-secondary{
  border-color: rgba(255,255,255,.22);
  color: var(--paper);
}
.final-cta .btn-secondary:hover{
  background: rgba(255,255,255,.08);
}

/* FOOTER */
.site-footer{
  background: var(--ink);
  color: rgba(255,255,255,.78);
  padding: 56px 0 32px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.5fr 2fr;
  gap:48px;
  margin-bottom:32px;
}
.footer-brand{
  max-width:320px;
}
.footer-tagline{
  margin:16px 0;
  color: rgba(255,255,255,.65);
  font-size:15px;
  line-height:1.6;
}
.footer-contact{
  margin:12px 0 0 0;
}
.footer-contact a{
  color: rgba(255,255,255,.75);
  text-decoration:none;
  font-size:14px;
}
.footer-contact a:hover{
  color:#fff;
  text-decoration:underline;
  text-underline-offset: 4px;
}
.footer-columns{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
}
.footer-columns > div{
  /* Individual column styling */
}
.site-footer a{
  color: rgba(255,255,255,.75);
  text-decoration:none;
  display:block;
  margin:8px 0;
  font-size:14px;
}
.site-footer a:hover{ 
  text-decoration:underline; 
  text-underline-offset: 6px;
  color:#fff;
}
.footer-title{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  color: rgba(255,255,255,.55);
  margin:0 0 12px 0;
  font-weight:600;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:24px;
  text-align:center;
}
.footer-bottom p{
  margin:0;
  font-size:13px;
  color: rgba(255,255,255,.5);
}
.muted{ color: rgba(255,255,255,.62); }

.brand--footer .brand-logo{ height:38px; }
.brand--footer .brand-name{ color: var(--paper); }

/* RESPONSIVE */
@media (max-width: 1100px){
  .hero-grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .proof-strip{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid{ grid-template-columns: 1fr; }
  .use-cases-grid{ grid-template-columns: repeat(2, 1fr); }
  .challenge-grid{ grid-template-columns: 1fr; }
  .features-list{ grid-template-columns: repeat(2, 1fr); }
  .feature-catalog{ grid-template-columns: 1fr; gap:24px; }
  .templates-grid{ grid-template-columns: repeat(2, 1fr); }
  .process-steps{ grid-template-columns: 1fr; }
  .addons-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap:32px; }
  .footer-columns{ grid-template-columns: repeat(2, 1fr); }
  .features-grid-3col{ grid-template-columns: 1fr; gap:32px; }
  .custom-template-banner{ grid-template-columns: 1fr; gap:40px; padding:48px; }
}

/* Templates Showcase Page */
.templates-showcase{
  display:flex;
  flex-direction:column;
  gap:80px;
}
.template-showcase-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.template-showcase-card.template-reverse{
  direction:rtl;
}
.template-showcase-card.template-reverse > *{
  direction:ltr;
}
.template-preview-large{
  aspect-ratio:3/2;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.template-preview-large img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.template-details-large h2{
  font-size:32px;
  font-family:'Playfair Display', serif;
  margin:0 0 16px;
}
.template-description{
  font-size:17px;
  color:var(--muted);
  margin:0 0 24px;
  line-height:1.7;
}
.template-features{
  list-style:none;
  padding:0;
  margin:0 0 32px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.template-features li{
  font-size:15px;
  color:var(--muted);
  line-height:1.6;
}
.template-features strong{
  color:var(--ink);
  font-weight:600;
}

/* Custom Template Banner */
.custom-template-banner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:64px;
  align-items:center;
  background:linear-gradient(135deg, rgba(163,138,84,.08) 0%, rgba(163,138,84,.03) 100%);
  border:2px solid var(--brass);
  border-radius:var(--radius);
  padding:64px;
}
.custom-template-content h2{
  font-size:36px;
  font-family:'Playfair Display', serif;
  margin:0 0 16px;
  color:var(--ink);
}
.custom-template-content .lead{
  font-size:17px;
  color:var(--muted);
  margin:0 0 32px;
  line-height:1.7;
}
.custom-template-features{
  list-style:none;
  padding:0;
  margin:0 0 32px;
  display:grid;
  gap:12px;
}
.custom-template-features li{
  font-size:16px;
  display:flex;
  align-items:center;
}
.custom-template-pricing{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:24px;
}
.custom-price{
  font-size:48px;
  font-weight:700;
  font-family:'Playfair Display', serif;
  color:var(--brass);
}
.custom-price-note{
  font-size:16px;
  color:var(--muted);
}
.custom-template-image{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
}
.custom-template-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Features Grid 3 Column */
.features-grid-3col{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  margin-top:48px;
}
.feature-block{
  text-align:center;
}
.feature-icon{
  margin-bottom:20px;
}
.feature-block h3{
  font-size:20px;
  font-weight:600;
  margin:0 0 12px;
}
.feature-block p{
  font-size:15px;
  color:var(--muted);
  margin:0;
  line-height:1.6;
}

@media (max-width: 720px){
  .section{ padding: 72px 0; }
  .hero{ padding-top: 54px; }
  .page-hero{ padding-top: 54px; padding-bottom: 34px; }
  .final-cta-section{ padding: 64px 0; }
  .nav-toggle{ display:inline-block; }
  .nav-links{
    position:absolute;
    right:24px;
    top:62px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,253,250,.95);
    box-shadow: var(--shadow-soft);
    min-width: 220px;
  }
  .nav-links.is-open{ display:flex; }
  .proof-strip{ grid-template-columns: 1fr; }
  .use-cases-grid{ grid-template-columns: 1fr; }
  .challenge-grid{ grid-template-columns: 1fr; }
  .features-list{ grid-template-columns: 1fr; }
  .templates-grid{ grid-template-columns: 1fr; }
  .process-step{ grid-template-columns: 1fr; gap:20px; text-align:center; }
  .process-number{ margin:0 auto; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .final-cta-actions{ flex-direction:column; }
  .media-frame img{ height: 320px; }
  .use-case-image img{ height: 220px; }
  .template-image img{ height: 200px; }
  .comparison-table{ font-size: 13px; }
  .comparison-table th,
  .comparison-table td{ padding: 10px 12px; }
  .footer-columns{ grid-template-columns: 1fr; gap:24px; }
  .template-showcase-card{ grid-template-columns: 1fr; gap:32px; }
  .template-showcase-card.template-reverse{ direction:ltr; }
  .features-grid-3col{ grid-template-columns: 1fr; gap:24px; }
  .custom-template-banner{ grid-template-columns: 1fr; padding:32px; gap:32px; }
}

/* Legal Pages */
.legal-page{ padding:80px 0; }
.legal-container{ max-width:860px; }
.legal-updated{ color:var(--muted); font-size:14px; margin-bottom:32px; }
.legal-page h1{ font-size:36px; margin-bottom:16px; }
.legal-page h2{ font-size:24px; margin:40px 0 16px 0; padding-top:16px; border-top:1px solid var(--border); }
.legal-page h3{ font-size:18px; margin:24px 0 12px 0; }
.legal-page p{ margin:0 0 16px 0; line-height:1.7; }
.legal-page ul{ margin:0 0 16px 0; padding-left:24px; }
.legal-page ul li{ margin-bottom:8px; line-height:1.6; }
.legal-page a{ color:var(--brass); text-decoration:underline; }
.legal-page a:hover{ color:var(--ink); }

/* Contact Form */
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.form-group{ display:flex; flex-direction:column; }
.form-group label{ font-weight:500; margin-bottom:6px; font-size:14px; }
.form-group input,
.form-group select,
.form-group textarea{ 
  padding:12px 14px; 
  border:1px solid var(--border); 
  border-radius:6px; 
  font-family:inherit; 
  font-size:15px; 
  transition:border-color 0.2s;
  background:var(--paper);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{ 
  outline:none; 
  border-color:var(--brass); 
}
.form-group textarea{ resize:vertical; }

/* Template Custom Card */
.template-card-custom{ 
  border:2px solid var(--brass); 
  background:rgba(163,138,84,0.05); 
}
.template-card-custom a{
  text-decoration:none;
  color:inherit;
}
.template-card-custom a:hover{
  text-decoration:none;
}
.template-card-custom .template-custom-visual{
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(163,138,84,0.1) 0%, rgba(163,138,84,0.2) 100%);
}
.template-card-custom .template-custom-visual i{
  font-size:120px;
  color:var(--brass);
  opacity:1;
  filter:drop-shadow(0 4px 20px rgba(163,138,84,0.3));
}
.template-card-custom .template-info{
  padding:24px;
}
.template-card-custom .template-info h3{
  color:var(--ink);
  text-decoration:none;
}
.template-card-custom .template-subtitle{
  color:var(--muted);
  font-size:14px;
  margin-bottom:12px;
}
.template-card-custom .template-price{
  color:var(--brass);
  font-weight:600;
  font-size:18px;
}

/* Cookie Banner */
.cookie-banner{
  position:fixed;
  left:24px;
  bottom:24px;
  max-width:400px;
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  z-index:9999;
  animation:slideInLeft 0.3s ease-out;
}
@keyframes slideInLeft{
  from{ transform:translateX(-100%); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
.cookie-banner.hidden{ display:none; }
.cookie-banner h3{
  font-size:18px;
  margin:0 0 12px 0;
  display:flex;
  align-items:center;
  gap:8px;
}
.cookie-banner p{
  margin:0 0 16px 0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}
.cookie-banner-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cookie-banner-actions .btn{
  width:100%;
  justify-content:center;
  font-size:14px;
  padding:10px 16px;
}
.cookie-banner-actions .btn-link{
  background:transparent;
  color:var(--muted);
  border:none;
  padding:8px;
}
.cookie-banner-actions .btn-link:hover{
  color:var(--ink);
  background:rgba(0,0,0,0.03);
}

/* Addon Grid Full Width */
.addon-full-width{
  grid-column:1 / -1;
  background:rgba(163,138,84,0.05);
  border:2px solid var(--brass);
}
.addon-full-width .addon-header h3{
  font-size:20px;
}
.addon-full-width .addon-price{
  font-size:28px;
}

/* ============================================================================
   PREMIUM MOTION & ANIMATION ENGINE
   Enterprise-grade scroll-driven animations with staggered reveals
   ============================================================================ */

/* --- Base reveal system: all animated elements start hidden --- */
[data-motion]{
  opacity:0;
  will-change:transform, opacity;
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* expo ease-out */
}

/* Revealed state */
[data-motion].is-visible{
  opacity:1;
  transform:none !important;
  filter:none !important;
}

/* --- Motion variants --- */
[data-motion="fade-up"]{
  transform:translateY(48px);
}
[data-motion="fade-down"]{
  transform:translateY(-40px);
}
[data-motion="fade-left"]{
  transform:translateX(60px);
}
[data-motion="fade-right"]{
  transform:translateX(-60px);
}
[data-motion="fade-in"]{
  transform:scale(0.97);
}
[data-motion="zoom-in"]{
  transform:scale(0.88);
  filter:blur(4px);
}
[data-motion="zoom-out"]{
  transform:scale(1.06);
  filter:blur(2px);
}
[data-motion="slide-up"]{
  transform:translateY(100px);
}
[data-motion="flip-up"]{
  transform:perspective(1200px) rotateX(8deg) translateY(30px);
}
[data-motion="clip-up"]{
  clip-path:inset(100% 0 0 0);
  transform:none;
}
[data-motion="clip-up"].is-visible{
  clip-path:inset(0 0 0 0);
}

/* --- Duration modifiers --- */
[data-duration="fast"]  { transition-duration: 0.5s; }
[data-duration="normal"]{ transition-duration: 0.8s; }
[data-duration="slow"]  { transition-duration: 1.1s; }
[data-duration="slower"]{ transition-duration: 1.5s; }

/* Default duration */
[data-motion]{ transition-duration: 0.85s; }

/* --- Hero-specific cinematic entrance --- */
.hero [data-motion="hero-headline"]{
  opacity:0;
  transform:translateY(30px);
  filter:blur(6px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s ease;
}
.hero [data-motion="hero-headline"].is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

.hero [data-motion="hero-media"]{
  opacity:0;
  transform:translateY(40px) scale(0.96);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.hero [data-motion="hero-media"].is-visible{
  opacity:1;
  transform:none;
}

/* --- Media frame premium hover --- */
.media-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.media-frame img{
  transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.media-frame:hover img{
  transform:scale(1.03);
}

/* --- Proof strip counter animation --- */
.proof-item strong{
  display:inline-block;
}

/* --- Challenge cards stagger entrance --- */
.challenge-card{
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.challenge-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(20,19,18,.1);
}

/* --- Use-case cards premium reveal --- */
.use-case-card{
  overflow:hidden;
}
.use-case-image{
  overflow:hidden;
}
.use-case-image img{
  transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.use-case-card:hover .use-case-image img{
  transform:scale(1.06);
}

/* --- Template cards hover micro-interaction --- */

.template-preview{
  overflow:hidden;
}
.template-preview img{
  transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.template-card:hover .template-preview img{
  transform:scale(1.05);
}

/* --- Process timeline progressive reveal --- */
.process-step{
  transition:none;
}
.process-number{
  transition:none;
}

/* --- Feature items hover glow --- */
.feature-item, .feature-block{
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.feature-item:hover, .feature-block:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(163,138,84,.1);
  border-color:var(--brass);
}

/* --- Pricing cards premium entrance --- */
.pricing-card{
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 0.4s ease;
}
.pricing-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 56px rgba(20,19,18,.12);
}
.pricing-card-recommended{
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 0.4s ease;
}
.pricing-card-recommended:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 28px 64px rgba(163,138,84,.18);
}

/* --- FAQ smooth accordion enhancement --- */
.faq-item{
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item.is-open{
  border-color:var(--brass);
  box-shadow:0 8px 24px rgba(163,138,84,.08);
}
.faq-answer{
  transition:max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
             opacity 0.4s ease;
}

/* --- Final CTA section parallax shimmer --- */
.final-cta-section{
  position:relative;
  overflow:hidden;
}
.final-cta-section::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(ellipse at 30% 50%, rgba(163,138,84,.06) 0%, transparent 60%);
  animation:shimmerBg 12s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes shimmerBg{
  0%  { transform:translate(0, 0); }
  100%{ transform:translate(5%, -3%); }
}

/* --- Smooth scroll behavior --- */
html{
  scroll-behavior:smooth;
}

/* --- Section divider accent line --- */
.section-header::after{
  content:'';
  display:block;
  width:48px;
  height:2px;
  background:var(--brass);
  margin:20px auto 0 auto;
  transition:width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-header.is-visible::after{
  width:72px;
}
.section-header:has(+ *){
  /* centers the line when section header text is centered */
}

/* --- Parallax-lite on hero media --- */
.hero-media{
  transition:transform 0.1s linear;
}

/* --- Template showcase cards (templates.html) large hover --- */

.template-preview-large{
  overflow:hidden;
  border-radius:var(--radius);
}
.template-preview-large img{
  transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.template-showcase-card:hover .template-preview-large img{
  transform:scale(1.04);
}

/* --- Reduce motion for accessibility --- */
@media(prefers-reduced-motion:reduce){
  [data-motion]{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    clip-path:none !important;
  }
  .media-frame:hover img,
  .use-case-card:hover .use-case-image img,
  .template-card:hover .template-preview img,
  .template-showcase-card:hover .template-preview-large img{
    transform:none !important;
  }
  .final-cta-section::before{
    animation:none;
  }
  html{ scroll-behavior:auto; }
}