/* ===================== Design tokens ===================== */
:root{
  --navy:#151530;
  --navy-soft:#3b3b5c;
  --grey:#6b6b7c;
  --grey-light:#8b8b9a;
  --bg-warm:#f7f5f3;
  --line:#e9e5e1;
  --orange-1:#ff4d2e;
  --orange-2:#ff9a44;
  --orange-solid:#ff5a2a;
  --orange-tint:#fff1ea;
  --app-bg:#eef0f5;
  --panel-bg:#ffffff;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Helvetica Neue', Arial, sans-serif;
  color:var(--navy);
  background:var(--app-bg);
  -webkit-font-smoothing:antialiased;
}

/* ===================== App shell (builder UI, not printed) ===================== */
.app-shell{
  display:flex;
  min-height:100vh;
}
.form-panel{
  width:400px;
  flex-shrink:0;
  background:var(--panel-bg);
  border-right:1px solid var(--line);
  padding:24px 22px 60px 22px;
  overflow-y:auto;
  height:100vh;
  position:sticky;
  top:0;
}
.form-panel h1{
  font-size:16px;
  font-weight:800;
  margin:0 0 2px 0;
  color:var(--navy);
}
.form-panel .sub{
  font-size:11.5px;
  color:var(--grey);
  margin-bottom:20px;
}
.form-group{
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.form-group:last-of-type{ border-bottom:none; }
.form-group h2{
  font-size:10.5px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--orange-solid);
  font-weight:800;
  margin:0 0 10px 0;
}
.field{ margin-bottom:10px; }
.field label{
  display:block;
  font-size:10.5px;
  font-weight:700;
  color:var(--navy-soft);
  margin-bottom:3px;
}
.field input[type=text],
.field input[type=date],
.field input[type=tel],
.field input[type=email]{
  width:100%;
  padding:7px 9px;
  font-size:12.5px;
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--navy);
  background:#fff;
  font-family:inherit;
}
.field input:focus{ outline:2px solid var(--orange-solid); outline-offset:1px; }
.plan-toggle{ display:flex; gap:8px; }
.plan-opt{
  flex:1;
  border:1.5px solid var(--line);
  border-radius:7px;
  padding:9px 8px;
  cursor:pointer;
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:var(--navy-soft);
  background:#fff;
  transition:all .15s ease;
}
.plan-opt input{ display:none; }
.plan-opt.active{
  border-color:var(--orange-solid);
  background:var(--orange-tint);
  color:var(--orange-solid);
}
.plan-opt .pname{ display:block; }
.plan-opt .pprice{ display:block; font-size:13px; margin-top:2px; }
.gen-btn{
  width:100%;
  padding:13px;
  background:linear-gradient(90deg, var(--orange-1), var(--orange-2));
  color:#fff;
  border:none;
  border-radius:7px;
  font-size:13.5px;
  font-weight:800;
  cursor:pointer;
  letter-spacing:0.3px;
  margin-top:6px;
}
.gen-btn:hover{ opacity:0.92; }
.gen-btn:disabled{ opacity:0.6; cursor:wait; }
.gen-status{
  font-size:10.5px;
  color:var(--grey);
  margin-top:8px;
  text-align:center;
  min-height:14px;
}
.hint{ font-size:9.5px; color:var(--grey-light); margin-top:3px; line-height:1.4; }

/* ===================== Preview area ===================== */
.preview-wrap{
  flex:1;
  padding:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.preview-wrap .zoom-note{
  font-size:11px;
  color:var(--grey);
  margin-bottom:-6px;
}
#pages-root{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

/* ===================== Printable page ===================== */
.page{
  width:210mm;
  height:297mm;
  position:relative;
  background:#ffffff;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(20,20,40,0.12);
  flex-shrink:0;
}
.topbar{
  position:absolute; top:0; left:0; right:0; height:6mm;
  background:linear-gradient(90deg, var(--orange-1), var(--orange-2));
}
.content{
  position:absolute; top:6mm; left:0; right:0; bottom:0;
  padding:14mm 16mm 16mm 16mm;
}
.header{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:9mm;
}
.logo{ height:9mm; }
.doclabel{
  font-size:8.5pt; letter-spacing:2px; color:var(--grey);
  font-weight:600; text-transform:uppercase; margin-top:2mm;
}
.footer{
  position:absolute; bottom:10mm; left:16mm; right:16mm;
  display:flex; justify-content:space-between;
  font-size:8pt; color:var(--grey-light);
  border-top:0.5px solid var(--line); padding-top:3mm;
}
.eyebrow{
  font-size:9pt; font-weight:700; letter-spacing:2px; color:var(--orange-solid);
  text-transform:uppercase; margin-bottom:4mm;
}
h1.headline{
  font-size:24pt; font-weight:800; line-height:1.2; color:var(--navy);
  margin:0 0 5mm 0; letter-spacing:-0.3px;
}
.rule{ width:16mm; height:2.4pt; background:var(--orange-solid); margin:5mm 0 6mm 0; }
p.lead{ font-size:10.5pt; line-height:1.6; color:var(--navy-soft); max-width:150mm; margin:0; }

/* ---- Page 1: cover ---- */
.prep-box{
  margin-top:7mm; background:var(--bg-warm); border-radius:2.5mm;
  padding:5mm 6mm; font-size:9.5pt; line-height:2;
}
.prep-box b{ color:var(--navy); }
.plan-row{ display:flex; gap:6mm; margin-top:7mm; }
.plan-card{
  flex:1; border-radius:3mm; padding:7mm 6mm; border:1px solid var(--line);
  background:var(--bg-warm);
}
.plan-card.hi{
  background:linear-gradient(135deg, var(--orange-1), var(--orange-2));
  border:none; color:#fff;
}
.plan-tag{ font-size:8pt; letter-spacing:1.5px; font-weight:700; text-transform:uppercase; opacity:0.75; }
.plan-price{ font-size:22pt; font-weight:800; margin:2.5mm 0 1mm 0; }
.plan-price small{ font-size:9pt; font-weight:500; opacity:0.7; }
.plan-divider{ height:1px; background:rgba(0,0,0,0.08); margin:3.5mm 0; }
.plan-card.hi .plan-divider{ background:rgba(255,255,255,0.28); }
.plan-lead{ font-size:9.5pt; font-weight:700; }
.badges{ display:flex; gap:4mm; margin-top:6mm; }
.badge{
  background:var(--bg-warm); border-radius:20mm; padding:2.4mm 5mm;
  font-size:8pt; font-weight:700; color:var(--navy-soft);
}

/* ---- stat rows (why avs) ---- */
.stat-row{ display:flex; gap:6mm; padding:4mm 0; border-bottom:0.5px solid var(--line); align-items:flex-start;}
.stat-row:first-of-type{ border-top:0.5px solid var(--line); margin-top:7mm; }
.stat-num{ width:26mm; flex-shrink:0; font-size:15pt; font-weight:800; color:var(--orange-solid); }
.stat-body{ font-size:9.7pt; line-height:1.55; color:var(--grey); padding-top:1mm;}
.stat-body b{ color:var(--navy); }
.info-box{
  margin-top:8mm; background:var(--bg-warm); border-radius:2.5mm; padding:6mm 7mm;
}
.info-box .ititle{ font-size:10.5pt; font-weight:700; margin-bottom:2mm; color:var(--navy); }
.info-box .ibody{ font-size:9pt; line-height:1.55; color:var(--grey); }

/* ---- why-grid (4pt list) ---- */
.why-list{ margin-top:7mm; }
.why-item{ display:flex; gap:5mm; padding:4mm 0; }
.why-icon{
  width:9mm; height:9mm; border-radius:2mm; background:var(--orange-tint); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11pt;
}
.why-title{ font-size:10.5pt; font-weight:700; margin-bottom:1.5mm; color:var(--navy); }
.why-body{ font-size:9pt; line-height:1.55; color:var(--grey); }

/* ---- Top5 mockup ---- */
.mock-panel{
  margin-top:7mm; background:var(--bg-warm); border-radius:3mm; padding:6mm;
}
.mock-card{
  background:#fff; border-radius:2.5mm; padding:5mm 5.5mm; position:relative;
  box-shadow:0 2px 6px rgba(20,20,40,0.06); margin-bottom:3.5mm;
}
.mock-tags{ display:flex; gap:2mm; margin-bottom:2.5mm; }
.mtag{ font-size:6.8pt; font-weight:700; padding:1mm 2.5mm; border-radius:8mm; }
.mtag.verified{ background:#e7f4ee; color:#1c8a55; }
.mtag.trending{ background:var(--orange-tint); color:var(--orange-solid); }
.mock-toprank{
  position:absolute; top:5mm; right:5.5mm; background:var(--orange-solid); color:#fff;
  font-size:7pt; font-weight:800; padding:1.2mm 3mm; border-radius:8mm;
}
.mock-bname{ font-size:11pt; font-weight:800; color:var(--navy); }
.mock-bmeta{ font-size:8pt; color:var(--grey); margin:1mm 0 3mm 0; }
.mock-buttons{ display:flex; gap:2mm; }
.mbtn{ flex:1; text-align:center; font-size:7.5pt; font-weight:700; padding:2.3mm 0; border-radius:1.5mm; color:#fff; }
.mbtn.call{ background:var(--navy); }
.mbtn.wa{ background:#25d366; }
.mbtn.dir{ background:#eceef2; color:var(--navy-soft); }
.mock-competitor{ background:#fff; border-radius:2.5mm; padding:4mm 5.5mm; opacity:0.55; }
.rank-tag{ font-size:6.8pt; font-weight:700; padding:1mm 2.5mm; border-radius:8mm; background:#f0f0f2; color:var(--grey);}
.feat-list{ margin-top:8mm; }
.feat-item{ display:flex; gap:5mm; margin-bottom:5mm; }
.feat-emoji{ width:9mm; height:9mm; flex-shrink:0; background:var(--orange-tint); border-radius:2mm; display:flex; align-items:center; justify-content:center; font-size:10pt;}
.feat-title{ font-size:10.3pt; font-weight:700; color:var(--navy); margin-bottom:1mm;}
.feat-body{ font-size:9pt; color:var(--grey); line-height:1.55; }

/* ---- Plan detail pages ---- */
.plandetail-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6mm; }
.pd-eyebrow{ font-size:8pt; letter-spacing:2px; color:var(--grey-light); font-weight:700; text-transform:uppercase; }
.pd-title{ font-size:19pt; font-weight:800; color:var(--navy); margin:1.5mm 0 3mm 0; }
.pd-tag{ display:inline-block; background:var(--orange-tint); color:var(--orange-solid); font-size:8.3pt; font-weight:700; padding:1.5mm 4mm; border-radius:10mm;}
.pd-price{ font-size:20pt; font-weight:800; color:var(--navy); text-align:right; }
.pd-price small{ display:block; font-size:8pt; font-weight:500; color:var(--grey); text-align:right; margin-top:0.5mm;}
.pd-desc{ font-size:9.7pt; color:var(--grey); line-height:1.6; max-width:150mm; margin:4mm 0 6mm 0;}
.pd-stitle{ font-size:8pt; letter-spacing:1px; text-transform:uppercase; color:var(--grey-light); font-weight:700; margin-bottom:3mm;}
.pd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 8mm; }
.pd-feat{ font-size:9pt; line-height:1.5; color:var(--navy-soft); padding-left:4mm; position:relative; margin-bottom:3mm;}
.pd-feat:before{ content:"✓"; position:absolute; left:0; color:var(--orange-solid); font-weight:800; font-size:8pt; top:0.3mm;}
.pd-feat .sub{ display:block; font-size:8pt; color:var(--grey-light); font-weight:400; margin-top:0.6mm; }
.pd-value{
  margin-top:8mm; background:var(--bg-warm); border-radius:2.5mm; padding:5mm 6mm;
}
.pd-value .vline{ font-size:11pt; font-weight:800; color:var(--navy); }
.pd-value .vdesc{ font-size:8.5pt; color:var(--grey); margin-top:1.5mm; }
.pd-value .vnote{ font-size:7.8pt; color:var(--grey-light); font-style:italic; margin-top:2mm; }

/* ---- comparison table ---- */
table.cmp{ width:100%; border-collapse:collapse; margin-top:7mm; font-size:8.6pt; }
table.cmp th{ text-align:left; padding:3mm; font-size:7.5pt; letter-spacing:0.6px; text-transform:uppercase; color:var(--grey-light); border-bottom:1px solid var(--navy); font-weight:700;}
table.cmp th.hi{ color:var(--orange-solid); }
table.cmp td{ padding:2.6mm 3mm; border-bottom:0.5px solid var(--line); color:var(--navy-soft); }
table.cmp tr td:first-child{ color:var(--navy); font-weight:600; }
table.cmp td.hi{ font-weight:700; color:var(--navy); background:var(--orange-tint); }
.cmp-note{ margin-top:6mm; background:var(--bg-warm); border-radius:2.5mm; padding:5mm 6mm; font-size:8.4pt; color:var(--grey); line-height:1.55;}

/* ---- app mockup (leads dashboard / CRM) ---- */
.phone-wrap{ display:flex; justify-content:center; margin:6mm 0 8mm 0;}
.phone{
  width:82mm; border:2.5px solid var(--navy); border-radius:8mm; overflow:hidden;
  box-shadow:0 10px 26px rgba(20,20,40,0.18);
}
.phone-head{
  background:linear-gradient(90deg, var(--orange-1), var(--orange-2)); color:#fff;
  font-size:8.5pt; font-weight:700; padding:4mm 5mm;
}
.phone-body{ background:#fff; padding:5mm; min-height:36mm; }
.stat-tiles{ display:flex; gap:2.5mm; margin-bottom:3mm;}
.stat-tile{ flex:1; background:var(--bg-warm); border-radius:2mm; text-align:center; padding:3mm 1mm;}
.stat-tile .tval{ font-size:12pt; font-weight:800; color:var(--navy);}
.stat-tile .tlabel{ font-size:6pt; color:var(--grey-light); font-weight:700; text-transform:uppercase; margin-top:0.5mm;}
.hot-banner{ background:#fdeaea; border-radius:2mm; padding:2.5mm 3mm; font-size:7.3pt; color:#b0362f; font-weight:700; display:flex; gap:2mm; align-items:flex-start;}
.enquiry-row{ display:flex; align-items:center; gap:2.5mm; padding:2mm 0; border-bottom:0.5px solid var(--line); }
.enquiry-row:last-child{ border-bottom:none; }
.avatar{ width:7mm; height:7mm; border-radius:50%; background:var(--orange-tint); color:var(--orange-solid); font-size:6.5pt; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.enq-name{ font-size:8pt; font-weight:700; color:var(--navy); }
.enq-meta{ font-size:6.8pt; color:var(--grey-light); }
.enq-tag{ margin-left:auto; font-size:6.3pt; font-weight:800; padding:0.8mm 2.2mm; border-radius:8mm; }
.enq-tag.hot{ background:#fdeaea; color:#c0392b; }
.enq-tag.new{ background:#eef2ff; color:#3b4dcc; }
.enq-tag.closed{ background:#eceef2; color:var(--grey); }

/* ---- badges page ---- */
.badge-row{ display:flex; justify-content:center; gap:16mm; margin:10mm 0; }
.badge-circle{ text-align:center; }
.circ{
  width:32mm; height:32mm; border-radius:50%; margin:0 auto 4mm auto;
  display:flex; align-items:center; justify-content:center; font-size:16pt; font-weight:800;
  border:2.5px dashed;
}
.circ.trusted{ border-color:#e0a415; color:#e0a415; background:#fff8e8; }
.circ.verified{ border-color:#2a6df4; color:#2a6df4; background:#eaf1ff; }
.badge-circle .bname{ font-size:10pt; font-weight:800; color:var(--navy); margin-bottom:1.5mm;}
.badge-circle .bdesc{ font-size:8.3pt; color:var(--grey); line-height:1.5; max-width:44mm; margin:0 auto;}

/* ---- website mockup (page 11) ---- */
.browser-mock{ border:1px solid var(--line); border-radius:3mm; overflow:hidden; margin-top:7mm; box-shadow:0 4px 14px rgba(20,20,40,0.08);}
.browser-bar{ background:var(--bg-warm); padding:2.5mm 4mm; display:flex; gap:1.5mm; align-items:center;}
.browser-dot{ width:2mm; height:2mm; border-radius:50%; background:var(--line);}
.browser-url{ margin-left:3mm; background:#fff; border:1px solid var(--line); border-radius:8mm; padding:1mm 4mm; font-size:7pt; color:var(--grey-light); flex:1;}
.site-nav{ display:flex; justify-content:space-between; align-items:center; padding:4mm 6mm; background:#fff;}
.site-brand{ font-size:9.5pt; font-weight:800; color:var(--navy); }
.site-links{ display:flex; gap:5mm; font-size:7pt; color:var(--grey); font-weight:600; }
.site-hero{
  background:linear-gradient(120deg, var(--navy) 0%, var(--orange-1) 100%);
  color:#fff; padding:8mm 6mm;
}
.site-hero .swelcome{ font-size:7pt; letter-spacing:1.5px; opacity:0.7; text-transform:uppercase; font-weight:700;}
.site-hero .shead{ font-size:14pt; font-weight:800; margin:2mm 0 4mm 0; line-height:1.3; max-width:100mm;}
.site-cta{ display:inline-block; background:#fff; color:var(--navy); font-size:7.5pt; font-weight:700; padding:2.2mm 5mm; border-radius:8mm;}
.site-feats{ display:flex; gap:3mm; padding:5mm 6mm; background:var(--bg-warm);}
.site-feat{ flex:1; text-align:center; font-size:6.6pt; font-weight:700; color:var(--navy-soft); }
.site-feat .sf-ico{ font-size:11pt; margin-bottom:1.5mm; }
.deliv-row{ display:flex; gap:6mm; margin-top:7mm; }
.deliv-card{ flex:1; background:var(--bg-warm); border-radius:2.5mm; padding:5mm 5.5mm; }
.deliv-card .dtitle{ font-size:9.7pt; font-weight:700; color:var(--navy); margin-bottom:1.5mm; }
.deliv-card .dbody{ font-size:8.3pt; color:var(--grey); line-height:1.5; }
.mini-grid{ display:flex; gap:2mm; margin-top:3mm; }
.mini-block{ flex:1; height:12mm; border-radius:1.5mm; background:linear-gradient(135deg, var(--navy), var(--orange-1)); }
.mini-stats{ display:flex; gap:4mm; margin-top:3mm; }
.mini-stat .mval{ font-size:11pt; font-weight:800; color:var(--navy); }
.mini-stat .mlabel{ font-size:6.5pt; color:var(--grey-light); font-weight:700; text-transform:uppercase; }

/* ---- keywords / areas ---- */
.kw-tags{ display:flex; gap:3mm; margin-top:6mm; flex-wrap:wrap; }
.kw-tag{ background:#fff; border:1.3px solid var(--line); border-radius:10mm; padding:2mm 5mm; font-size:9pt; font-weight:700; color:var(--navy);}
.kw-note{ margin-top:5mm; background:var(--bg-warm); border-radius:2.5mm; padding:4.5mm 6mm; font-size:8.5pt; color:var(--grey); line-height:1.5;}
.areas-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2mm 6mm; margin-top:6mm; font-size:9pt; color:var(--navy-soft); }
.areas-cols div{ padding:1.4mm 0; }

/* ---- testimonials ---- */
.testi-card{ background:var(--bg-warm); border-radius:2.5mm; padding:6mm; margin-bottom:5mm; }
.testi-quote{ font-size:9.5pt; font-style:italic; color:var(--navy-soft); line-height:1.6; margin-bottom:4mm;}
.testi-who{ display:flex; align-items:center; gap:3mm; }
.testi-name{ font-size:9.5pt; font-weight:800; color:var(--navy); }
.testi-role{ font-size:8pt; color:var(--grey); }
.testi-invest{ font-size:8.3pt; color:var(--grey); margin-top:3mm; padding-top:3mm; border-top:0.5px solid var(--line);}
.testi-invest b{ color:var(--navy); }

/* ---- terms ---- */
.term-box{ background:var(--bg-warm); border-left:3px solid var(--orange-solid); border-radius:0 2mm 2mm 0; padding:4mm 5mm; margin-bottom:3.5mm; }
.term-box .ttitle{ font-size:9.7pt; font-weight:700; color:var(--navy); margin-bottom:1.5mm; }
.term-box .tbody{ font-size:8.3pt; color:var(--grey); line-height:1.55; }

/* ---- summary table ---- */
table.summary{ width:100%; border-collapse:collapse; margin-top:7mm; font-size:10pt; }
table.summary td{ padding:4mm 4mm; border-bottom:1px solid var(--line); color:var(--navy-soft); }
table.summary tr td:last-child{ text-align:right; font-weight:700; color:var(--navy); }
table.summary tr.hi td{ background:var(--orange-tint); font-weight:800; color:var(--navy); }
.summary-note{ margin-top:5mm; font-size:8.3pt; color:var(--grey-light); line-height:1.5; }

/* ---- get started page ---- */
.cta-box{
  background:linear-gradient(90deg, var(--orange-1), var(--orange-2)); color:#fff;
  border-radius:3mm; padding:7mm 8mm; margin-bottom:9mm;
}
.cta-box .ctitle{ font-size:13.5pt; font-weight:800; margin-bottom:2mm; }
.cta-box .cbody{ font-size:9.3pt; opacity:0.92; }
.contact-line{ display:flex; gap:5mm; align-items:flex-start; margin-bottom:6mm; }
.contact-ico{ width:9mm; height:9mm; border-radius:2mm; background:var(--bg-warm); display:flex; align-items:center; justify-content:center; font-size:10pt; flex-shrink:0;}
.contact-line .clabel{ font-size:7.5pt; text-transform:uppercase; letter-spacing:0.6px; color:var(--grey-light); font-weight:700;}
.contact-line .cval{ font-size:10.5pt; font-weight:800; color:var(--navy); margin-top:0.5mm;}
.brand-footer{ text-align:center; margin-top:8mm; padding-top:6mm; border-top:0.5px solid var(--line);}
.brand-footer .bname{ font-size:10.5pt; font-weight:800; color:var(--navy); }
.brand-footer .bcontact{ font-size:8.5pt; color:var(--grey); margin-top:1.5mm;}

/* ===================== Print ===================== */
@media print{
  .form-panel, .preview-wrap .zoom-note{ display:none !important; }
  body{ background:#fff; }
  .page{ box-shadow:none; margin:0; }
}