/* novel pdf studio — shared styles for the inner pages (buy, how-to, enquiry, support). */
:root{
  --blue:#0057B8; --blue-deep:#003E85; --blue-bright:#0a6ad4; --blue-soft:#E8F0FA;
  --emerald:#0E8A5F; --emerald-soft:#E3F3EC;
  --gold:#B07D12; --gold-soft:#F7EFDA;
  --saffron:#FF9933; --india-green:#138808; --chakra:#0A3A8F;
  --ink:#14202E; --muted:#51617A; --faint:#7C8AA0;
  --bg:#FFFFFF; --wash:#F3F7FB; --line:#DCE4EE;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,32,56,.05), 0 12px 32px rgba(16,32,56,.07);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink); line-height:1.65;
  font-family:"Manrope","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.narrow{ max-width:760px; }
a{ color:var(--blue); }
img{ max-width:100%; }
.tricolour{ height:4px; background:linear-gradient(90deg,var(--saffron) 0 33.4%,#fff 33.4% 66.7%,var(--india-green) 66.7% 100%); }

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin:0 0 14px;
}
h1{ font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0 0 14px; text-wrap:balance; }
h2{ font-size:clamp(20px,2.6vw,27px); font-weight:800; letter-spacing:-.015em; margin:42px 0 10px; }
h3{ font-size:17px; font-weight:700; margin:0 0 6px; }
.lead{ font-size:17px; color:var(--muted); max-width:64ch; margin:0 0 26px; }

header.site{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.bar{ display:flex; align-items:center; gap:28px; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand svg{ width:40px; height:40px; }
.brand .word{ font-size:22px; letter-spacing:-.02em; white-space:nowrap; }
.word b{ font-weight:800; color:var(--emerald); }
.word span{ font-weight:700; color:var(--blue); }
nav.main{ display:flex; gap:24px; margin-left:auto; }
nav.main a{ color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px; }
nav.main a:hover{ color:var(--blue); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:15px; text-decoration:none; border-radius:10px;
  padding:12px 22px; border:1.5px solid transparent; transition:.15s; cursor:pointer;
  font-family:inherit;
}
.btn:focus-visible{ outline:3px solid var(--blue-bright); outline-offset:2px; }
.btn.primary{ background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(0,87,184,.28); }
.btn.primary:hover{ background:var(--blue-deep); }
.btn.primary:disabled{ background:var(--faint); box-shadow:none; cursor:not-allowed; }
.btn.ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn.ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn.small{ padding:9px 18px; font-size:14px; }

main.page{ padding:56px 0 88px; }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.grid{ display:grid; gap:18px; }

.ticklist{ list-style:none; margin:10px 0 0; padding:0; }
.ticklist li{ position:relative; padding:4px 0 4px 26px; color:var(--muted); font-size:14.5px; }
.ticklist li::before{
  content:""; position:absolute; left:0; top:9px; width:15px; height:15px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.5 8.5l3.5 3.5 7-8" fill="none" stroke="%230E8A5F" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
.ticklist b{ color:var(--ink); font-weight:600; }

/* forms */
form .field{ margin-bottom:16px; }
label{ display:block; font-weight:700; font-size:13.5px; margin-bottom:6px; }
label .opt{ color:var(--faint); font-weight:500; }
input,select,textarea{
  width:100%; font:15px "Manrope","Segoe UI",system-ui,sans-serif; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:11px 13px;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
textarea{ min-height:130px; resize:vertical; }
.formnote{ color:var(--faint); font-size:13px; }
.msg{ border-radius:10px; padding:13px 16px; font-weight:600; font-size:14.5px; margin-top:16px; display:none; }
.msg.ok{ display:block; background:var(--emerald-soft); color:var(--emerald); }
.msg.err{ display:block; background:#FBEAEA; color:#B3362E; }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* steps (how-to) */
.steps{ counter-reset:step; list-style:none; margin:14px 0 0; padding:0; }
.steps li{ counter-increment:step; position:relative; padding:6px 0 6px 44px; color:var(--muted); }
.steps li b{ color:var(--ink); font-weight:600; }
.steps li::before{
  content:counter(step); position:absolute; left:0; top:8px; width:28px; height:28px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--blue-soft); color:var(--blue); font-weight:800; font-size:14px;
}
kbd{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px;
  background:var(--wash); border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--ink);
}

footer.site{ padding:44px 0 40px; border-top:1px solid var(--line); background:var(--wash); }
footer .wrap{ display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between; }
footer .brand svg{ width:30px; height:30px; }
footer .brand .word{ font-size:17px; }
.foot-meta{ color:var(--faint); font-size:13px; line-height:1.7; }
.foot-meta a{ color:var(--muted); }
.foot-flag{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--india-green); font-size:13px; }
.foot-flag svg{ border-radius:1.5px; }

@media (max-width:920px){ nav.main{ display:none; } }