/* MaqLabs enquiry — shared styles for the category picker (index.html)
   and the data-driven enquiry app (enquiry.html). */
:root{
  /* MaqLabs brand system (matches maqlabs.com) */
  --paper:#f9f9fb;          /* page background */
  --card:#ffffff;
  --ink:#1a1a2e;            /* navy — headings & strong text */
  --ink-soft:#555555;       /* body text */
  --ink-faint:#999999;      /* muted */
  --accent:#e63027;         /* MaqLabs red */
  --accent-dark:#c4251e;
  --accent-tint:#fde8e7;    /* red-light */
  --amber:#c4781f;
  --line:#ececf1;
  --line-strong:#dcdce4;
  --error:#c4251e;
  --radius:14px;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  --font-mono:'SF Mono','Fira Code',Consolas,'Liberation Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:
    radial-gradient(1100px 480px at 100% -10%, #fdecea 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #eef0f6 0%, transparent 55%),
    var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:32px 18px 64px;
}
.wrap{max-width:720px;margin:0 auto}

/* Header */
.brandbar{display:inline-flex;align-items:center;gap:12px;margin-bottom:28px;text-decoration:none}
.brand-logo{height:30px;width:auto;display:block}
.brandbar .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding-left:13px;border-left:1px solid var(--line-strong)}
@media(max-width:560px){.brandbar .tag{display:none}}

.hero{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px 30px 28px;
  margin-bottom:22px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -28px rgba(26,26,46,.4);
}
.hero::before{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,var(--accent-tint) 0%,transparent 70%);
}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px}
.hero h1{font-family:var(--font-sans);font-size:30px;line-height:1.15;font-weight:600;margin-bottom:12px;letter-spacing:-.01em}
.hero p{color:var(--ink-soft);font-size:15.5px;max-width:54ch}
.hero .meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.pill{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);background:#f0f0f4;border:1px solid var(--line);border-radius:99px;padding:4px 11px}

/* Sections */
.section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 26px 24px;
  margin-bottom:18px;
}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.sec-num{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-tint);border-radius:7px;padding:2px 9px}
.sec-head h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.sec-sub{color:var(--ink-faint);font-size:13.5px;margin-bottom:20px}

.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
label.q{display:block;font-weight:600;font-size:14.5px;margin-bottom:7px}
label.q .req{color:var(--accent);margin-left:2px}
.hint{font-weight:400;color:var(--ink-faint);font-size:12.5px;margin-top:-3px;margin-bottom:9px}

input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line-strong);border-radius:11px;
  padding:11px 13px;transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical;min-height:90px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356615a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.two{grid-template-columns:1fr}}

/* Card choices */
.cards{display:grid;gap:10px}
.cards.cols2{grid-template-columns:1fr 1fr}
@media(max-width:560px){.cards.cols2{grid-template-columns:1fr}}
.opt{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:12px;
  padding:13px 14px;transition:all .14s;user-select:none;
}
.opt:hover{border-color:var(--accent);background:#fff}
.opt .tick{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-strong);margin-top:1px;display:grid;place-items:center;transition:all .14s;
}
.opt.sq .tick{border-radius:6px}
.opt .tick::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .14s}
.opt.sq .tick::after{border-radius:2px}
.opt .txt{font-size:14.5px;font-weight:500}
.opt .txt small{display:block;font-weight:400;color:var(--ink-faint);font-size:12.5px;margin-top:1px}
.opt[data-sel="1"]{border-color:var(--accent);background:var(--accent-tint)}
.opt[data-sel="1"] .tick{border-color:var(--accent);background:var(--accent)}
.opt[data-sel="1"] .tick::after{transform:scale(1)}

.callout{
  display:flex;gap:11px;background:#f4f4f8;border:1px solid var(--line-strong);
  border-radius:12px;padding:13px 15px;font-size:13px;color:var(--ink-soft);margin-bottom:18px;
}
.callout b{color:var(--ink)}
.callout svg{color:var(--accent)}
.callout svg{flex:0 0 auto;margin-top:1px}

.err{color:var(--error);font-size:12.5px;margin-top:6px;display:none;font-weight:500}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:var(--error)}
.field.invalid .cards .opt{border-color:#eeb4b0}

/* Submit */
.submit-wrap{margin-top:6px}
.btn{
  font-family:var(--font-sans);font-size:15.5px;font-weight:600;cursor:pointer;
  border:none;border-radius:12px;padding:14px 22px;transition:transform .08s, box-shadow .15s, background .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;width:100%;box-shadow:0 10px 24px -12px rgba(230,48,39,.7)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn-ghost{background:#fff;border:1.5px solid var(--line-strong);color:var(--ink);flex:1;min-width:150px}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.foot{text-align:center;color:var(--ink-faint);font-size:12px;margin-top:26px;font-family:var(--font-mono);letter-spacing:.04em}

/* Result */
#result{display:none}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 18px 40px -28px rgba(26,26,46,.4)}
.result-card h2{font-family:var(--font-sans);font-size:24px;margin-bottom:6px}
.result-card .sub{color:var(--ink-soft);font-size:14.5px;margin-bottom:20px}
.glance{background:var(--accent-tint);border:1px solid #f5cbc8;border-radius:13px;padding:15px 17px;margin-bottom:18px}
.glance .gt{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:9px}
.glance .grow{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0}
.glance .grow span:first-child{color:var(--ink-soft)}
.glance .grow span:last-child{font-weight:600;text-align:right}
pre.summary{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;white-space:pre-wrap;color:var(--ink-soft);max-height:320px;overflow:auto}
.copied{color:var(--accent);font-weight:600}

/* ===== Category picker (index.html) ===== */
.pickgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.pickgrid{grid-template-columns:1fr}}
a.pick{
  display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:inherit;
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  padding:18px 18px;transition:transform .1s, border-color .14s, box-shadow .15s;
}
a.pick:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 16px 34px -24px rgba(230,48,39,.4)}
.pick .picon{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;
  background:var(--accent-tint);color:var(--accent);
  display:grid;place-items:center;
}
.pick .picon svg{width:22px;height:22px}
.pick .ptxt b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:2px}
.pick .ptxt small{color:var(--ink-faint);font-size:12.8px;line-height:1.45}
.pick .parrow{margin-left:auto;align-self:center;color:var(--ink-faint);transition:transform .14s,color .14s}
a.pick:hover .parrow{color:var(--accent);transform:translateX(3px)}

/* Privacy policy prose */
.prose h2{font-size:16px;font-weight:600;margin:22px 0 8px;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-soft);font-size:14.5px;margin-bottom:10px}
.prose ul{color:var(--ink-soft);font-size:14.5px;margin:0 0 12px;padding-left:20px}
.prose li{margin-bottom:6px}
.prose a{color:var(--accent);font-weight:500}

/* Privacy note by the submit button */
.privacy-note{font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:12px}
.privacy-note a{color:var(--ink-soft)}
.foot a{color:var(--ink-faint);text-decoration:underline}

/* Cookie-consent banner */
.consent{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:50;max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line-strong);border-radius:14px;
  padding:14px 16px;box-shadow:0 18px 40px -20px rgba(26,26,46,.45);
}
.consent-txt{flex:1;min-width:200px;font-size:13px;color:var(--ink-soft)}
.consent-txt a{color:var(--accent);font-weight:500}
.consent-btns{display:flex;gap:8px}
.consent .btn{padding:9px 16px;font-size:13.5px;width:auto}
.consent .btn-primary{box-shadow:none}

/* Back link (enquiry.html) */
.backlink{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--ink-soft);margin-bottom:16px;transition:color .14s;
}
.backlink:hover{color:var(--accent)}
.backlink svg{width:14px;height:14px}