/* ==========================================================================
   KJ Invoice — Design System
   Palette:
     --white:      #FFFFFF
     --paper:      #FFF9F9  (warm paper background)
     --red:        #C8102E  (primary brand red)
     --red-deep:   #7A0C1E  (deep stamp red)
     --red-soft:   #FDECEE  (tint backgrounds)
     --ink:        #1B1418  (near-black text)
     --slate:      #6E6469  (secondary text)
     --line:       #EFE3E4  (hairline borders)
   Type:
     Display: 'Manrope' (headlines, weight 700-800)
     Body:    'Inter'
     Utility: none — numbers use the body font (Inter) at medium/semibold weight
   ========================================================================== */

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

:root{
  --white:#FFFFFF;
  --paper:#FFF9F9;
  --red:#C8102E;
  --red-deep:#7A0C1E;
  --red-soft:#FDECEE;
  --red-line: rgba(200,16,46,0.18);
  --ink:#1B1418;
  --slate:#6E6469;
  --line:#EFE3E4;
  --shadow: 0 20px 50px -25px rgba(122,12,30,0.25);
  --radius: 14px;
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Manrope', sans-serif;
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; color:var(--slate); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.mono{ font-family:'Inter', sans-serif; font-weight:600; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:10px; font-weight:600; font-size:15px;
  cursor:pointer; border:1.5px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family:'Inter', sans-serif;
}
.btn-primary{ background:var(--red); color:var(--white); box-shadow: 0 12px 24px -10px rgba(200,16,46,0.55); }
.btn-primary:hover{ background:var(--red-deep); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:8px; }

/* ---------- Navbar ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,249,249,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:800; font-size:20px; color:var(--ink); }
.brand-mark{
  width:34px; height:34px; border-radius:8px; background:var(--red);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; font-family:'Manrope',sans-serif;
  box-shadow: 0 8px 16px -6px rgba(200,16,46,0.6);
}
.nav-links{ display:flex; gap:32px; align-items:center; }
.nav-links a{ font-size:14.5px; font-weight:600; color:var(--slate); transition:color .15s; }
.nav-links a:hover, .nav-links a.active{ color:var(--red); }
.nav-actions{ display:flex; gap:12px; align-items:center; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer;
  width:44px; height:44px; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; margin:0; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-mobile-cta{ display:none; }

@media (max-width: 900px){
  .nav-inner{ height:68px; gap:12px; }
  /* Absolute (not fixed): the nav's backdrop-filter makes it the containing block */
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    height:calc(100vh - 68px); height:calc(100dvh - 68px); overflow-y:auto;
    background:var(--white); flex-direction:column; align-items:stretch;
    padding:12px 20px 28px; gap:0; border-top:1px solid var(--line);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .2s ease, transform .2s ease; }
  .nav-links a{ font-size:17px; color:var(--ink); padding:16px 4px; border-bottom:1px solid var(--line); }
  .nav-links a.nav-mobile-cta{
    display:flex; margin-top:24px; border-bottom:none; color:#fff; padding:15px 24px; font-size:15.5px;
  }
  .nav-toggle{ display:flex; }
  .nav-actions{ margin-left:auto; }
}
@media (max-width: 560px){
  .nav-actions{ display:none; }
  .brand{ font-size:18px; }
}
body.nav-open{ overflow:hidden; }

/* ---------- Eyebrow (shared) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--red); background:var(--red-soft);
  padding:7px 14px; border-radius:100px; margin-bottom:18px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:56px 0 calc(min(10vw, 130px) + 48px);
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* Soft brand shapes behind the visual */
.hero::before{
  content:''; position:absolute; z-index:-2;
  width:min(62vw, 860px); aspect-ratio:1; right:-14vw; top:-28%;
  border-radius:50%; background:var(--red-soft);
}
.hero::after{
  content:''; position:absolute; z-index:-2;
  width:min(30vw, 420px); aspect-ratio:1; right:22%; top:20%;
  border-radius:50%; background:rgba(253,236,238,0.7);
}
.hero-wave{
  position:absolute; left:0; bottom:-1px; z-index:-1;
  width:min(36vw, 520px); height:min(10vw, 130px);
  fill:var(--red);
}

.hero-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:36px; align-items:center; }
.hero-copy{ min-width:0; }

/* Brand lockup */
.hero-lockup{ display:flex; align-items:center; gap:14px; margin-bottom:40px; }
.hero-lockup-icon{
  width:58px; height:58px; flex-shrink:0; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--red); background:var(--white); border:2.5px solid var(--red);
}
.hero-lockup-icon svg{ width:32px; height:32px; }
.hero-lockup-text{
  display:block; font-family:'Manrope',sans-serif; font-weight:800; font-size:26px;
  line-height:1.15; letter-spacing:-0.02em; color:var(--ink);
}
.hero-lockup-text span{ color:var(--red); }
/* Decorative tagline kept out of the H1 text content */
.hero-lockup-text::after{
  content:'Create \2022  Download \2022  Send'; display:block; margin-top:4px;
  font-family:'Inter',sans-serif; font-weight:400; font-size:16px; letter-spacing:.01em; color:#A89CA0;
}
.hero-title-main{ display:block; }

.hero h1{
  font-size:clamp(34px, 4.6vw, 56px); font-weight:800; line-height:1.06;
  letter-spacing:-0.035em; margin-bottom:24px; color:var(--ink);
}
.hero-accent{ color:var(--red); display:block; }

.hero .lede{ font-size:clamp(16.5px, 1.6vw, 20px); line-height:1.6; max-width:540px; margin-bottom:0; }

/* Feature row */
.hero-features{
  list-style:none; padding:0; margin:36px 0 0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
}
.hero-features li{ min-width:0; }
.hf-icon{
  width:64px; height:64px; border-radius:50%; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--red-soft); color:var(--red);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.hf-icon svg{ width:28px; height:28px; }
.hero-features li:hover .hf-icon{ transform:translateY(-3px); background:var(--red); color:#fff; }
.hero-features .hf-text{ display:block; min-width:0; }
.hero-features strong{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.hero-features small{ display:block; font-size:13.5px; color:var(--slate); margin-top:3px; line-height:1.4; }

.hero-cta{ display:flex; gap:12px; margin-top:40px; flex-wrap:wrap; }
.btn-hero{ padding:19px 34px; font-size:17px; border-radius:16px; }
.btn-lg{ padding:16px 28px; font-size:15.5px; border-radius:12px; }
.btn svg{ width:17px; height:17px; flex-shrink:0; }
.btn-hero svg{ width:20px; height:20px; }
.btn-primary svg{ transition:transform .15s ease; }
.btn-primary:hover svg{ transform:translateX(3px); }

/* ---------- Hero visual (scales as one unit via container units) ---------- */
.hero-visual{
  position:relative; min-width:0; width:100%;
  container-type:inline-size;
}

/* Handwritten tagline */
.hv-script{
  position:absolute; top:-1cqw; right:1cqw; z-index:3;
  display:flex; flex-direction:column; align-items:flex-start;
  font-family:'Caveat', cursive; font-weight:700; color:var(--red);
  font-size:6.4cqw; line-height:.95; transform:rotate(-10deg); transform-origin:right top;
}
.hv-script span:nth-child(2){ margin-left:4cqw; }
.hv-script span:nth-child(3){ margin-left:0; }
.hv-script-line{ width:30cqw; height:3cqw; margin-top:.6cqw; margin-left:6cqw; color:var(--red); }
.hv-script-dash{ position:absolute; left:-7cqw; top:15cqw; width:5cqw; height:5cqw; color:var(--red); }

/* Laptop */
.hv-laptop{ position:relative; z-index:2; width:84cqw; margin:27cqw 0 7cqw 6cqw; container-type:inline-size; }
.hl-screen{
  position:relative; background:#1B1418; border-radius:3.2cqw 3.2cqw 0 0;
  padding:2.6cqw 2.4cqw 2.4cqw;
  box-shadow:0 0 0 .35cqw #3A3035 inset, 0 40px 70px -40px rgba(122,12,30,0.55);
}
.hl-cam{ position:absolute; top:1cqw; left:50%; width:.8cqw; height:.8cqw; margin-left:-.4cqw; border-radius:50%; background:#3A3035; }
.hl-display{
  display:grid; grid-template-columns:28% 1fr; aspect-ratio:16/10;
  background:#fff; border-radius:.6cqw; overflow:hidden;
}
.hl-side{ background:#241A1F; color:#E9DFE1; padding:3.2cqw 1.6cqw; font-size:1.75cqw; }
.hl-side-brand{ display:flex; align-items:center; gap:1cqw; font-family:'Manrope',sans-serif; font-weight:700; font-size:2cqw; color:#fff; margin-bottom:3.4cqw; white-space:nowrap; }
.hl-side-logo{ width:3.4cqw; height:3.4cqw; border-radius:.8cqw; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hl-side-logo svg{ width:2.2cqw; height:2.2cqw; }
.hl-side ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9cqw; }
.hl-side li{ display:flex; align-items:center; gap:1.2cqw; padding:1.2cqw 1.2cqw; border-radius:.9cqw; white-space:nowrap; }
.hl-side li svg{ width:2.2cqw; height:2.2cqw; flex-shrink:0; opacity:.85; }
.hl-side li i{ margin-left:auto; width:.7cqw; height:.7cqw; border-right:.25cqw solid #8A7C80; border-bottom:.25cqw solid #8A7C80; transform:rotate(-45deg); }
.hl-side li.is-active{ background:var(--red); color:#fff; }

.hl-doc{ padding:3.4cqw 3.6cqw 2.6cqw; font-size:1.55cqw; color:var(--ink); line-height:1.35; display:flex; flex-direction:column; min-width:0; }
.hl-doc-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:3cqw; }
.hl-doc-title{ font-family:'Manrope',sans-serif; font-weight:800; font-size:3.6cqw; letter-spacing:.02em; line-height:1; }
.hl-doc-meta{ text-align:right; display:flex; flex-direction:column; }
.hl-doc-meta b{ font-size:1.55cqw; }
.hl-doc-meta span{ color:var(--slate); }
.hl-doc-parties{ display:grid; grid-template-columns:1fr 1fr; gap:2cqw; margin-bottom:2.6cqw; }
.hl-doc-parties div{ display:flex; flex-direction:column; }
.hl-doc-parties div:last-child{ padding-left:4cqw; }
.hl-doc-parties b{ margin-bottom:.5cqw; }
.hl-doc-parties span{ color:var(--slate); }
.hl-doc-parties .hl-strong{ color:var(--ink); font-weight:600; }
.hl-table{ margin-bottom:1.6cqw; }
.hl-row{ display:grid; grid-template-columns:1fr 12% 18% 18%; padding:.9cqw 1cqw; border-bottom:.15cqw solid var(--line); }
.hl-row span:not(:first-child){ text-align:right; }
.hl-row span:nth-child(2){ text-align:center; }
.hl-th{ background:var(--red-soft); font-weight:700; border-radius:.5cqw; border-bottom:none; }
.hl-totals{ margin-left:auto; width:48%; display:flex; flex-direction:column; gap:.5cqw; }
.hl-totals div{ display:flex; justify-content:space-between; padding:0 1cqw; }
.hl-totals .hl-grand{ background:var(--red); color:#fff; border-radius:.6cqw; padding:1cqw; margin-top:.4cqw; }
.hl-thanks{ margin:auto 0 0; font-size:1.45cqw; color:var(--ink); font-weight:500; }

.hl-base{
  position:relative; width:112%; margin-left:-6%; height:3.2cqw;
  background:#E7E1E2; border-radius:0 0 4cqw 4cqw;
  box-shadow:inset 0 .5cqw 0 #F5F1F1, 0 26px 40px -18px rgba(27,20,24,0.35);
}
.hl-base span{ position:absolute; left:50%; top:0; width:16%; height:1.2cqw; transform:translateX(-50%); background:#D4CBCD; border-radius:0 0 1.2cqw 1.2cqw; }

/* Plant */
.hv-plant{ position:absolute; z-index:1; right:-5cqw; top:52cqw; width:22cqw; }
.hv-plant svg{ width:100%; height:auto; display:block; }
.hv-plant .leaf-dark path{ fill:#3E7B4F; }
.hv-plant .leaf-light path{ fill:#62A86F; }
.hv-plant .pot{ fill:#fff; stroke:var(--line); stroke-width:2; }
.hv-plant .pot-rim{ fill:#F6F0F0; }

/* PDF badge */
.hv-pdf{ position:absolute; z-index:3; left:-4cqw; top:58cqw; width:17cqw; animation:hvFloat 6s ease-in-out infinite; }
.hv-pdf-card{
  position:relative; aspect-ratio:1; background:#fff; border-radius:2.4cqw;
  box-shadow:0 24px 40px -18px rgba(27,20,24,0.35); transform:rotate(-6deg);
  border:1px solid var(--line);
}
.hv-pdf-lines{ position:absolute; left:16%; right:16%; bottom:16%; display:flex; flex-direction:column; gap:1cqw; }
.hv-pdf-lines i{ display:block; height:.9cqw; border-radius:1cqw; background:#E4DADC; }
.hv-pdf-lines i:last-child{ width:60%; }
.hv-pdf-tag{
  position:absolute; left:10%; top:16%; padding:1cqw 1.8cqw; border-radius:1cqw;
  background:var(--red); color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:3.4cqw; line-height:1;
  transform:rotate(-8deg); box-shadow:0 8px 16px -8px rgba(200,16,46,0.7);
}
.hv-pdf-dl{
  position:absolute; right:-2cqw; bottom:8%; width:6.4cqw; height:6.4cqw; border-radius:50%;
  background:#fff; color:var(--red); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -8px rgba(27,20,24,0.4);
}
.hv-pdf-dl svg{ width:3.6cqw; height:3.6cqw; }
.hv-pdf-burst{ position:absolute; right:-8cqw; top:9cqw; width:7cqw; height:7cqw; color:var(--ink); }

/* Mug */
.hv-mug{ position:absolute; z-index:4; right:-1cqw; bottom:-3cqw; width:17cqw; }
.hv-mug-body{
  position:relative; aspect-ratio:.86; background:#fff; border-radius:1.4cqw 1.4cqw 3cqw 3cqw;
  border:1px solid var(--line); box-shadow:0 26px 40px -22px rgba(27,20,24,0.4), inset -1.4cqw 0 0 #F6F0F0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:'Caveat', cursive; font-weight:700; color:var(--ink); font-size:3.4cqw; line-height:1;
}
.hv-mug-body::before{ content:''; position:absolute; top:0; left:0; right:0; height:2.4cqw; border-radius:50%; background:#EFE6E7; transform:translateY(-50%); }
.hv-mug-body svg{ width:11cqw; height:2cqw; color:var(--red); margin-top:.6cqw; }
.hv-mug-handle{
  position:absolute; left:-5cqw; top:22%; width:7cqw; height:9cqw;
  border:1.8cqw solid #fff; border-right:none; border-radius:4cqw 0 0 4cqw;
  box-shadow:-6px 10px 18px -10px rgba(27,20,24,0.3);
}

@keyframes hvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){
  .hv-pdf{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* Hero — responsive */
@media (max-width:1180px){
  .hero-features{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 20px; max-width:440px; }
  .hero-features li{ display:flex; align-items:center; gap:12px; }
  .hf-icon{ width:52px; height:52px; margin:0; flex-shrink:0; }
  .hf-icon svg{ width:24px; height:24px; }
  .hero-features small{ margin-top:1px; }
}
@media (max-width:960px){
  .hero{ padding-top:48px; }
  .hero-grid{ grid-template-columns:1fr; gap:20px; }
  .hero-lockup{ margin-bottom:32px; }
  .hero-features{ grid-template-columns:repeat(4, minmax(0,1fr)); max-width:none; gap:16px; }
  .hero-features li{ display:block; }
  .hf-icon{ width:60px; height:60px; margin-bottom:12px; }
  .hero-visual{ max-width:640px; margin:0 auto; }
  .hero::before{ width:110vw; right:-50vw; top:auto; bottom:-20%; }
  .hero::after{ display:none; }
  .hero-wave{ width:50vw; height:16vw; }
  .hero{ padding-bottom:calc(16vw + 24px); }
}
@media (max-width:640px){
  .hero{ padding-top:32px; }
  .hero-lockup{ gap:12px; margin-bottom:26px; }
  .hero-lockup-icon{ width:48px; height:48px; border-radius:12px; border-width:2px; }
  .hero-lockup-icon svg{ width:26px; height:26px; }
  .hero-lockup-text{ font-size:21px; }
  .hero-lockup-text::after{ font-size:14px; }
  .hero h1{ margin-bottom:18px; }
  .hero-features{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 14px; margin-top:28px; }
  .hero-features li{ display:flex; align-items:center; gap:10px; }
  .hf-icon{ width:46px; height:46px; margin:0; flex-shrink:0; }
  .hf-icon svg{ width:21px; height:21px; }
  .hero-features strong{ font-size:14.5px; }
  .hero-features small{ font-size:12.5px; margin-top:1px; }
  .hero-cta{ margin-top:30px; }
  .hero-cta .btn{ width:100%; }
  .btn-hero{ padding:17px 24px; font-size:16px; border-radius:14px; }
  .hv-laptop{ margin-top:28cqw; margin-bottom:9cqw; }
  .hv-mug{ bottom:-4cqw; }
}
@media (max-width:380px){
  .hero-features{ grid-template-columns:1fr; }
}

/* ---------- Feature Grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.card-icon{
  width:44px; height:44px; border-radius:10px; background:var(--red-soft); color:var(--red);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px;
}
.card h3{ font-size:18px; }
.card p{ font-size:14.5px; margin-bottom:0; }

.section-head{ max-width:620px; margin-bottom:48px; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(26px,3vw,36px); }

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .grid-3, .grid-4{ grid-template-columns:1fr; }
  .section{ padding:56px 0; }
}

/* ---------- Invoice Generator Tool ---------- */
.tool{
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); padding:36px; margin-top:8px;
}
.tool-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label{ font-size:12.5px; font-weight:600; color:var(--slate); text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:6px; }
input, textarea, select{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:9px;
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); background:var(--paper);
  transition:border-color .15s;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--red); }
.form-group{ margin-bottom:16px; }
.form-block{ border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:18px; background:var(--paper); }
.form-block h4{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--red); margin-bottom:14px; }

.items-table{ width:100%; border-collapse:collapse; margin-bottom:10px; }
.items-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); padding:6px 6px; }
.items-table td{ padding:6px 6px; }
.items-table input{ padding:8px 10px; font-size:13.5px; }
.item-remove{ background:none; border:none; color:var(--red); cursor:pointer; font-size:18px; line-height:1; padding:4px; }
.add-item{ font-size:13.5px; font-weight:600; color:var(--red); background:none; border:1.5px dashed var(--red-line); border-radius:8px; padding:9px 14px; cursor:pointer; width:100%; }
.add-item:hover{ background:var(--red-soft); }

/* Live preview invoice */
.preview{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:32px;
  position:sticky; top:96px; min-height:520px;
}
.preview-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--ink); padding-bottom:18px; margin-bottom:18px; }
.preview-logo{ font-family:'Manrope',sans-serif; font-weight:800; font-size:22px; }
.preview-logo span{ color:var(--red); }
.preview-meta{ text-align:right; font-size:12.5px; color:var(--slate); }
.preview-cols{ display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; font-size:13.5px; }
.preview-cols h5{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--red); margin:0 0 6px; }
table.preview-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:18px; }
table.preview-table th{ text-align:left; border-bottom:2px solid var(--ink); padding:8px 4px; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
table.preview-table td{ padding:9px 4px; border-bottom:1px solid var(--line); }
.preview-totals{ margin-left:auto; width:220px; }
.preview-totals .row{ display:flex; justify-content:space-between; padding:5px 0; font-size:13.5px; }
.preview-totals .row.grand{ border-top:2px solid var(--ink); margin-top:6px; padding-top:10px; font-weight:800; font-size:16px; }
.preview-actions{ display:flex; gap:10px; margin-top:22px; }
.preview-stamp-badge{
  display:inline-block; margin-top:16px; font-size:11px; color:var(--red); border:1.5px dashed var(--red); border-radius:6px; padding:4px 10px; letter-spacing:.05em; text-transform:uppercase;
}

@media (max-width:960px){
  .tool-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .preview{ position:static; }
}

/* ==========================================================================
   Invoice Builder — Redesigned (ultra-modern)
   ========================================================================== */
.builder-section{ background: radial-gradient(circle at 15% 0%, var(--red-soft) 0%, transparent 45%), var(--paper); }
.builder{ padding:0; background:transparent; border:none; box-shadow:none; }
.builder-grid{ display:block; }
.builder-form{ display:flex; flex-direction:column; gap:18px; max-width:100%; margin:0 auto; }

/* Bottom action bar */
.builder-actions{ max-width:100%; margin:26px auto 0; }
.builder-actions .preview-actions{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.builder-actions .preview-actions .btn{ flex:1; min-width:160px; }
.builder-actions #open-preview{ flex:0 0 auto; min-width:150px; }

/* Live preview modal */
.preview-modal-overlay{
  position:fixed; inset:0; background:rgba(27,20,24,0.6); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center; z-index:1000;
  padding:64px 20px; overflow-y:auto;
}
.preview-modal-overlay.open{ display:flex; }
.preview-modal{ max-width:600px; width:100%; animation: modalIn .2s ease; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.pf-close{
  margin-left:10px; background:none; border:none; cursor:pointer; font-size:22px; line-height:1;
  color:var(--slate); width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center;
}
.pf-close:hover{ background:var(--red-soft); color:var(--red); }
.pf-label{ margin-left:auto; margin-right:2px; font-size:11.5px; font-weight:600; color:var(--slate); letter-spacing:.03em; text-transform:uppercase; }

/* Step cards */
.step-block{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px;
  box-shadow: 0 1px 3px rgba(122,12,30,0.04);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.step-block:hover{ border-color: var(--red-line); box-shadow: 0 10px 28px -20px rgba(122,12,30,0.35); }
.step-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.step-num{
  flex-shrink:0; width:32px; height:32px; border-radius:9px;
  background: linear-gradient(145deg, var(--red), var(--red-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:14px;
  box-shadow: 0 6px 14px -6px rgba(200,16,46,0.55);
}
.step-head h4{ font-size:16.5px; margin:0 0 3px; font-family:'Manrope',sans-serif; text-transform:none; letter-spacing:0; color:var(--ink); }
.step-sub{ font-size:12.5px; color:var(--slate); margin:0; }

/* Icon-prefixed inputs */
.input-icon{ position:relative; display:flex; align-items:center; }
.input-icon svg{ position:absolute; left:12px; width:16px; height:16px; color:var(--red); opacity:.75; pointer-events:none; }
.input-icon input, .input-icon select{ padding-left:36px; }

/* Items table wrap */
.items-table-wrap{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:14px; }
.items-table{ margin:0; }
.items-table thead tr{ background:var(--paper); }
.items-table th{ padding:10px 10px; }
.items-table tbody tr{ border-top:1px solid var(--line); }
.items-table tbody tr:hover{ background: var(--red-soft); }
.items-table td{ padding:8px 10px; }
.add-item{ display:flex; align-items:center; justify-content:center; gap:8px; }
.add-item svg{ width:15px; height:15px; }

.preview-frame{
  border-radius:20px; overflow:hidden; border:1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(122,12,30,0.35);
  background:#fff;
}
.preview-frame-bar{
  display:flex; align-items:center; gap:7px; padding:12px 16px;
  background: linear-gradient(180deg, #FBF3F3, #F7EBEB); border-bottom:1px solid var(--line);
}
.pf-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.preview-frame .preview{ border:none; border-radius:0; max-height:70vh; overflow-y:auto; }

/* Total strip */
.total-strip{
  margin-top:18px; display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(120deg, var(--red-deep), var(--red));
  border-radius:16px; padding:20px 24px; color:#fff;
  box-shadow: 0 16px 30px -16px rgba(122,12,30,0.6);
}
.total-strip-label{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; opacity:.85; margin-bottom:4px; }
.total-strip-amount{ display:block; font-family:'Inter', sans-serif; font-weight:700; font-size:28px; }
.total-strip-badge{ font-size:11px; background:rgba(255,255,255,0.18); padding:6px 12px; border-radius:100px; letter-spacing:.03em; }

.preview-actions{ margin-top:16px; }
.preview-actions .btn{ display:flex; align-items:center; justify-content:center; gap:8px; }
.preview-actions .btn svg{ width:16px; height:16px; }

@media (max-width: 960px){
  .preview-modal-overlay{ padding:40px 12px; }
}

/* ---------- Text overflow safety (fixes long unbroken strings breaking layout) ---------- */
.preview, .tool, .card, .items-table td, table.preview-table td,
#p-from, #p-to, #p-notes, #p-rows td, .item-desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}
textarea{ overflow-wrap: anywhere; word-break: break-word; resize: vertical; }
.preview-cols{ min-width:0; }
.preview-cols > div{ min-width:0; flex:1; }
table.preview-table td, table.preview-table th{ word-break: break-word; }

/* ---------- Logo upload ---------- */
.logo-dropzone{
  display:flex; align-items:center; gap:14px; padding:18px; border:1.5px dashed var(--red-line);
  border-radius:12px; cursor:pointer; background:#fff; color:var(--slate); transition:border-color .15s, background .15s;
}
.logo-dropzone svg{ color:var(--red); flex-shrink:0; }
.logo-dropzone strong{ color:var(--ink); }
.logo-dropzone span{ font-size:12.5px; }
.logo-dropzone:hover, .logo-dropzone.drag{ border-color:var(--red); background:var(--red-soft); }
.logo-preview-wrap{ display:none; align-items:center; gap:14px; padding:14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; }
.logo-preview-wrap img{ width:52px; height:52px; object-fit:contain; border-radius:8px; border:1px solid var(--line); background:var(--paper); padding:4px; }
#p-logo img{ max-height:44px; max-width:160px; object-fit:contain; margin-bottom:8px; }

/* ---------- Modern UI polish ---------- */
.nav{ box-shadow: 0 1px 0 rgba(122,12,30,0.04); }
.brand-mark{ background: linear-gradient(145deg, var(--red), var(--red-deep)); }
.btn-primary{ background: linear-gradient(145deg, var(--red), var(--red-deep)); }
.tool{
  background: linear-gradient(180deg, #ffffff, #fffbfb);
  border: 1px solid var(--line);
}
.form-block{
  transition: border-color .15s ease;
}
.form-block:focus-within{ border-color: var(--red-line); }
input, textarea, select{ transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, textarea:focus, select:focus{ box-shadow: 0 0 0 4px var(--red-soft); }
.preview{
  background: linear-gradient(180deg, #ffffff, #fffdfd);
}
.card{ box-shadow: 0 1px 2px rgba(122,12,30,0.03); }
.add-item{ transition: background .15s, border-color .15s, transform .1s; }
.add-item:active{ transform: scale(0.98); }
.item-remove{ transition: transform .1s, color .15s; }
.item-remove:hover{ transform: scale(1.15); }
::selection{ background: var(--red-soft); color: var(--red-deep); }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#EDE3E4; padding:64px 0 28px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer h4{ color:#fff; font-size:14px; margin-bottom:16px; }
.footer a{ display:block; font-size:14px; color:#C9BDBF; padding:6px 0; }
.footer a:hover{ color:var(--red); }
.footer-brand{ font-family:'Manrope',sans-serif; font-weight:800; font-size:20px; color:#fff; margin-bottom:12px; }
.footer-brand span{ color:var(--red); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:22px; font-size:13px; color:#A79294; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; } .footer-grid > div:first-child{ grid-column:1 / -1; } }

/* ---------- Page header (inner pages) ---------- */
.page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(30px,4vw,44px); }
.breadcrumb{ font-size:13px; color:var(--slate); margin-bottom:14px; }
.breadcrumb a{ color:var(--red); }

/* ---------- Blog ---------- */
.blog-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.chip{ padding:8px 16px; border-radius:100px; font-size:13px; font-weight:600; border:1.5px solid var(--line); color:var(--slate); cursor:pointer; }
.chip.active, .chip:hover{ border-color:var(--red); color:var(--red); background:var(--red-soft); }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.post-thumb{ height:150px; background:linear-gradient(135deg, var(--red-soft), var(--paper)); display:flex; align-items:center; justify-content:center; color:var(--red); font-size:34px; font-weight:800; font-family:'Manrope',sans-serif; }
.post-body{ padding:20px; }
.post-cat{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--red); font-weight:700; margin-bottom:8px; }
.post-body h3{ font-size:16.5px; margin-bottom:8px; }
.post-body p{ font-size:13.5px; margin-bottom:10px; }
.post-meta{ font-size:12px; color:var(--slate); display:flex; justify-content:space-between; }
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:48px; }
.pagination button{ width:38px; height:38px; border-radius:8px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-weight:600; }
.pagination button.active, .pagination button:hover{ border-color:var(--red); color:var(--red); }
@media (max-width:960px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---------- Article page ---------- */
.article{ max-width:760px; margin:0 auto; }
.article h1{ font-size:clamp(28px,4vw,40px); }
.article-meta{ display:flex; gap:16px; color:var(--slate); font-size:13.5px; margin-bottom:28px; flex-wrap:wrap; }
.article-body h2{ font-size:24px; margin-top:36px; }
.article-body h3{ font-size:19px; margin-top:26px; }
.article-body p{ color:var(--ink); font-size:16px; }
.article-body ul, .article-body ol{ color:var(--ink); font-size:16px; padding-left:22px; }
.article-body li{ margin-bottom:8px; }
.article-body blockquote{ border-left:4px solid var(--red); padding:6px 20px; color:var(--slate); font-style:italic; margin:24px 0; }

/* ---------- Contact / forms ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.info-item{ display:flex; gap:14px; margin-bottom:22px; }
.info-icon{ width:42px; height:42px; border-radius:10px; background:var(--red-soft); color:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Legal pages ---------- */
.legal-body h2{ font-size:21px; margin-top:34px; }
.legal-body p, .legal-body li{ font-size:15px; }
.legal-updated{ font-size:13px; color:var(--slate); margin-bottom:36px; }

/* Utility */
.text-center{ text-align:center; margin:0 auto; }
.mt-0{ margin-top:0; }
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.badge{ font-size:12.5px; color:var(--slate); border:1px solid var(--line); padding:6px 12px; border-radius:100px; display:flex; align-items:center; gap:6px; }
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--red); }

/* ==========================================================================
   Responsive layer — tablet & mobile
   ========================================================================== */
html, body{ overflow-x:hidden; }
@supports (overflow:clip){ html, body{ overflow-x:clip; } }
html{ -webkit-text-size-adjust:100%; }
.hero-copy h1, .page-hero h1, .article h1{ overflow-wrap:break-word; }

/* Line-item column widths (desktop) */
.items-table .col-qty{ width:80px; }
.items-table .col-price{ width:120px; }
.items-table .col-total{ width:110px; white-space:nowrap; }
.items-table .col-remove{ width:40px; text-align:center; }
.item-remove{ width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.item-remove:hover{ background:var(--red-soft); }

/* Inputs: consistent height for date/select on iOS & Android */
input, select{ min-height:44px; }
input[type="date"]{ -webkit-appearance:none; appearance:none; display:block; }
input[type="date"]::-webkit-date-and-time-value{ text-align:left; }
.items-table input{ min-height:40px; }

/* Article content safety */
.article-body img, .article-body video, .article-body iframe{ max-width:100%; height:auto; }
.article-body table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse; }
.article-body pre{ overflow-x:auto; }
.article-body a{ overflow-wrap:anywhere; }

.pagination{ flex-wrap:wrap; }

/* ---------- ≤ 960px (tablet) ---------- */
@media (max-width:960px){
  .section{ padding:72px 0; }
  .field-row{ grid-template-columns:1fr 1fr; }
  .section-head{ margin-bottom:36px; }
}

/* ---------- ≤ 768px ---------- */
@media (max-width:768px){
  .wrap{ padding:0 20px; }
  .section{ padding:60px 0; }
  .section-tight{ padding:44px 0; }
  .page-hero{ padding:44px 0 36px; }
  .page-hero p{ font-size:16px !important; }
  .card{ padding:24px; }
  .footer{ padding:52px 0 24px; margin-top:40px; }
  .footer-grid{ gap:32px; margin-bottom:36px; }
  .article-body p, .article-body ul, .article-body ol{ font-size:15.5px; }
  .article-body h2{ font-size:21px; margin-top:30px; }
  .contact-grid{ gap:36px; }
}

/* ---------- ≤ 640px (phones) ---------- */
@media (max-width:640px){
  .wrap{ padding:0 16px; }
  .section{ padding:48px 0; }
  .section-tight{ padding:36px 0; }
  .section-head{ margin-bottom:28px; }
  .section-head h2{ font-size:26px; }
  .card{ padding:20px; }
  .card h3{ font-size:17px; }

  /* Prevent iOS zoom-on-focus: inputs need 16px text */
  input, textarea, select{ font-size:16px; }

  /* Generator */
  .builder-form{ gap:14px; }
  .step-block{ padding:18px 16px; border-radius:14px; }
  .step-head{ gap:12px; margin-bottom:16px; }
  .step-head h4{ font-size:15.5px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .logo-dropzone{ padding:14px; font-size:14px; }

  /* Line items become stacked cards */
  .items-table-wrap{ border:none; border-radius:0; overflow:visible; }
  .items-table thead{ display:none; }
  .items-table, .items-table tbody{ display:block; width:100%; }
  .items-table tbody tr{
    display:grid; grid-template-columns:1fr 1fr 40px; gap:10px 10px; align-items:end;
    border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; background:var(--white);
  }
  .items-table tbody tr:hover{ background:var(--white); }
  .items-table td{ display:block; padding:0; width:auto !important; }
  .items-table td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:5px;
    font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--slate);
  }
  .items-table .col-desc{ grid-column:1 / -1; }
  .items-table .col-qty{ grid-column:1; grid-row:2; }
  .items-table .col-price{ grid-column:2; grid-row:2; }
  .items-table .col-remove{ grid-column:3; grid-row:2; display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px; }
  .items-table .col-total{
    grid-column:1 / -1; grid-row:3; display:flex; justify-content:space-between; align-items:center;
    padding-top:10px; border-top:1px dashed var(--line); font-size:15px;
  }
  .items-table .col-total::before{ margin:0 !important; }
  .item-remove{ width:40px; height:40px; border:1px solid var(--line); font-size:20px; }

  /* Total + actions */
  .total-strip{ padding:16px 18px; border-radius:14px; gap:12px; flex-wrap:wrap; }
  .total-strip-amount{ font-size:24px; }
  .builder-actions .preview-actions{ flex-direction:column; }
  .builder-actions .preview-actions .btn,
  .builder-actions #open-preview{ width:100%; flex:1 1 auto; min-width:0; }

  /* Preview modal */
  .preview-modal-overlay{ padding:16px 10px; align-items:flex-start; }
  .preview-frame{ border-radius:14px; }
  .preview-frame .preview{ max-height:calc(100dvh - 90px); }
  .preview{ padding:20px 16px; min-height:0; }
  .preview-head{ flex-direction:column; gap:14px; }
  .preview-meta{ text-align:left; }
  .preview-cols{ flex-direction:column; gap:12px; }
  table.preview-table{ font-size:12.5px; }
  table.preview-table th{ font-size:10.5px; padding:6px 3px; }
  table.preview-table td{ padding:8px 3px; }
  table.preview-table th:nth-child(n+2), table.preview-table td:nth-child(n+2){ white-space:nowrap; }
  .preview-totals{ width:100%; }

  /* Blog */
  .blog-filter{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 28px; padding:0 16px 4px; scrollbar-width:none; }
  .blog-filter::-webkit-scrollbar{ display:none; }
  .chip{ flex-shrink:0; white-space:nowrap; }
  .blog-grid{ gap:18px; }
  .post-thumb{ height:120px; }
  .pagination{ margin-top:36px; }

  /* Article */
  .article-meta{ gap:8px 12px; font-size:13px; margin-bottom:22px; }
  .article-body blockquote{ padding:4px 14px; margin:18px 0; }
  .article .card .btn{ width:100%; }

  /* Contact */
  .info-item{ margin-bottom:18px; }

  /* Footer */
  .footer-bottom{ flex-direction:column; text-align:left; }
}

/* ---------- ≤ 380px (small phones) ---------- */
@media (max-width:380px){
  .wrap{ padding:0 14px; }
  .brand{ font-size:17px; gap:8px; }
  .brand-mark{ width:30px; height:30px; font-size:13px; }
  .total-strip-badge{ display:none; }
}

/* ==========================================================================
   Invoice summary panel (total + actions)
   ========================================================================== */
/* The generator wrapper should not draw its own box */
.tool.builder{ background:transparent; border:none; box-shadow:none; padding:0; }

.builder-actions{ margin-top:22px; }
.summary-card{
  display:grid; grid-template-columns:minmax(0,1fr) 340px;
  background:var(--white); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:0 1px 2px rgba(27,20,24,0.04), 0 30px 60px -40px rgba(122,12,30,0.4);
}
.summary-main{ padding:28px 32px; position:relative; min-width:0; }
.summary-main::before{
  content:''; position:absolute; left:0; top:28px; bottom:28px; width:4px;
  background:var(--red); border-radius:0 4px 4px 0;
}
.summary-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.summary-label{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.summary-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--slate);
  background:var(--paper); border:1px solid var(--line); padding:4px 10px; border-radius:100px; white-space:nowrap;
}
.summary-chip i{ width:6px; height:6px; border-radius:50%; background:#1F9D5A; box-shadow:0 0 0 3px rgba(31,157,90,0.15); }
.summary-amount{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:44px; line-height:1.1;
  letter-spacing:-0.03em; color:var(--ink); margin-top:8px; overflow-wrap:anywhere;
}
.summary-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; font-size:13px; color:var(--slate); }
.summary-meta .dot{ width:3px; height:3px; border-radius:50%; background:#C9BDBF; }

.summary-breakdown{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:22px 0 0;
  border:1px solid var(--line); border-radius:12px; background:var(--paper);
}
.summary-breakdown > div{ padding:12px 16px; border-left:1px solid var(--line); min-width:0; }
.summary-breakdown > div:first-child{ border-left:none; }
.summary-breakdown dt{ font-size:11.5px; color:var(--slate); white-space:nowrap; }
.summary-breakdown dd{ margin:2px 0 0; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.summary-actions{
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:28px; background:var(--paper); border-left:1px solid var(--line);
}
.summary-actions .btn{ width:100%; min-width:0; }
.summary-download{ padding:17px 24px; font-size:16px; }
.summary-download.is-loading{ opacity:.85; cursor:progress; }
.summary-secondary{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.summary-secondary .btn{ background:var(--white); padding:12px 14px; font-size:14px; }
.summary-secondary .btn svg{ width:16px; height:16px; }
.btn-reset{ color:var(--slate); }
.summary-note{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:4px 0 0; font-size:12px; color:var(--slate); text-align:center;
}
.summary-note svg{ width:13px; height:13px; flex-shrink:0; }

@media (max-width:900px){
  .summary-card{ grid-template-columns:1fr; }
  .summary-actions{ border-left:none; border-top:1px solid var(--line); }
}
@media (max-width:640px){
  .summary-card{ border-radius:16px; }
  .summary-main{ padding:22px 20px; }
  .summary-main::before{ top:22px; bottom:auto; height:56px; }
  .summary-amount{ font-size:34px; }
  .summary-breakdown{ grid-template-columns:1fr; }
  .summary-breakdown > div{ display:flex; justify-content:space-between; align-items:center; gap:12px; border-left:none; border-top:1px solid var(--line); padding:11px 14px; }
  .summary-breakdown > div:first-child{ border-top:none; }
  .summary-breakdown dd{ margin:0; }
  .summary-actions{ padding:18px 20px 20px; }
}

/* Summary panel — full-width total, actions in one row below */
.summary-card{ grid-template-columns:1fr; }
.summary-actions{
  flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px;
  padding:18px 32px; border-left:none; border-top:1px solid var(--line);
}
.summary-actions .summary-download{ flex:2 1 0; width:auto; padding:15px 24px; font-size:15.5px; }
.summary-secondary{ display:contents; }
.summary-secondary .btn{ flex:1 1 0; width:auto; padding:14px 18px; font-size:15px; }
.summary-note{ flex-basis:100%; margin:0; }
@media (min-width:901px){
  .summary-main::before{ top:28px; bottom:28px; }
}
@media (max-width:640px){
  .summary-actions{ padding:16px 20px 18px; gap:10px; }
}
/* Very narrow phones: Download on its own row, Preview + Reset share the next */
@media (max-width:520px){
  .summary-actions .summary-download{ flex:1 1 100%; }
  .summary-secondary .btn{ padding:13px 12px; font-size:14px; }
}
.summary-actions #open-preview,
.summary-actions #reset-form{ flex:1 1 0; width:auto; min-width:0; }
@media (max-width:520px){
  .summary-actions #open-preview,
  .summary-actions #reset-form{ flex:1 1 calc(50% - 5px); }
}

/* ==========================================================================
   Homepage content sections (how it works, features, audience, countries, FAQ)
   ========================================================================== */
.seo-section{ background:var(--paper); }
.seo-alt{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.seo-more{ margin:28px 0 0; font-size:15px; }
.seo-more a, .seo-note a, .faq-list a{ color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.seo-note{ margin:24px 0 0; font-size:14px; max-width:760px; }

.steps-row{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.steps-row li{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.steps-num{
  width:40px; height:40px; border-radius:12px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:17px;
}
.steps-row h3{ font-size:18px; }
.steps-row p{ font-size:14.5px; margin:0; }

.feature-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.feature-list > div{ border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; background:var(--paper); position:relative; }
.feature-list > div::before{ content:''; display:block; width:28px; height:4px; border-radius:4px; background:var(--red); margin-bottom:14px; }
.feature-list h3{ font-size:16.5px; margin-bottom:6px; }
.feature-list p{ font-size:14px; margin:0; }

.audience-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.audience-card{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.audience-card:hover{ border-color:var(--red-line); box-shadow:var(--shadow); transform:translateY(-3px); }
.audience-card h3{ font-size:21px; }
.audience-card p{ font-size:15px; }
.audience-link{ color:var(--red); font-weight:600; font-size:14.5px; }
.tag-list{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.tag-list li{ font-size:13.5px; font-weight:500; color:var(--ink); background:var(--white); border:1px solid var(--line); padding:7px 14px; border-radius:100px; }

.country-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.country-grid > div{ display:flex; flex-direction:column; gap:2px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.country-grid strong{ font-size:15px; }
.country-grid span{ font-size:13.5px; color:var(--slate); }

.guide-links{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.guide-links a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; background:var(--white); border:1px solid var(--line); border-radius:12px;
  font-weight:600; font-size:14.5px; transition:border-color .15s ease, color .15s ease;
}
.guide-links a::after{ content:'\2192'; color:var(--red); flex-shrink:0; }
.guide-links a:hover{ border-color:var(--red); color:var(--red); }

.faq-wrap{ max-width:860px; }
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-list details{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:0 22px; }
.faq-list details[open]{ border-color:var(--red-line); }
.faq-list summary{
  cursor:pointer; list-style:none; padding:18px 0; font-family:'Manrope',sans-serif; font-weight:700; font-size:16.5px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:'+'; color:var(--red); font-size:22px; font-weight:600; line-height:1; flex-shrink:0; }
.faq-list details[open] summary::after{ content:'\2212'; }
.faq-list details p{ margin:0 0 18px; font-size:15px; }

/* Landing pages */
.lp-hero .lede{ font-size:18px; max-width:640px; }
.lp-hero .hero-cta{ margin-top:28px; }
.lp-checks{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.lp-checks li{ position:relative; padding-left:30px; font-size:15px; color:var(--ink); }
.lp-checks li::before{
  content:''; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.prose{ max-width:760px; }
.prose p, .prose li{ color:var(--ink); font-size:16px; }
.prose h2{ margin-top:36px; font-size:clamp(22px,2.4vw,28px); }
.prose h2:first-child{ margin-top:0; }

/* Blog post: related guides + crawlable index */
.related-guides{ margin-top:40px; }
.related-guides h2{ font-size:20px; margin-bottom:14px; }
.related-guides ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.related-guides a{ display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--white); font-weight:600; font-size:15px; }
.related-guides a:hover{ border-color:var(--red); color:var(--red); }
.cta-card a.cta-inline{ color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.all-guides{ margin-top:64px; padding-top:40px; border-top:1px solid var(--line); }
.all-guides h2{ font-size:22px; }
.all-guides ul{ columns:3; column-gap:32px; padding:0; margin:0; list-style:none; }
.all-guides li{ break-inside:avoid; padding:5px 0; font-size:14px; }
.all-guides a:hover{ color:var(--red); }

@media (max-width:960px){
  .steps-row, .feature-list, .country-grid, .guide-links{ grid-template-columns:1fr 1fr; }
  .all-guides ul{ columns:2; }
}
@media (max-width:640px){
  .steps-row, .feature-list, .audience-grid, .guide-links, .lp-checks{ grid-template-columns:1fr; }
  .country-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .country-grid > div{ padding:12px 14px; }
  .steps-row li, .audience-card{ padding:22px; }
  .faq-list details{ padding:0 16px; }
  .faq-list summary{ font-size:15.5px; padding:16px 0; }
  .all-guides ul{ columns:1; }
}
@media (max-width:380px){
  .country-grid{ grid-template-columns:1fr; }
}

/* In-content links (articles and landing pages) */
.article-body a, .prose a{
  color:var(--red); font-weight:500; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}
.article-body a:hover, .prose a:hover{ color:var(--red-deep); }
.cta-card .btn{ margin-top:6px; }