/* requestable.co.uk: the public site.
   Separate from the platform's stylesheet on purpose. It shares the palette so the
   site and the product read as one thing, but a marketing page and an approvals
   screen want different rhythm, and coupling them would mean every copy change
   risked the application's CSS.

   Nothing here loads from another host: no font service, no analytics, no tag
   manager. That is what lets the privacy notice say this site sets no cookies and
   tracks nobody, and it means the Google consent screen points at a page that keeps
   its promises. */

:root {
  --navy: #0a3a68;
  --navy-dark: #072a4d;
  --teal: #3ab1a2;
  --teal-dark: #2d8b7f;
  --green: #93ba32;
  --grey-bg: #f4f6f8;
  --grey-line: #dde3e9;
  --text: #1a2733;
  --text-muted: #5c6b7a;
  --surface: #ffffff;
  --max: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { border-bottom: 1px solid var(--grey-line); background: var(--surface); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; max-width: var(--max); margin: 0 auto; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 34px; width: auto; }
.site-nav { display: flex; gap: 26px; align-items: center; }
.site-nav a { color: var(--text-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.site-nav a:hover { color: var(--navy); }
.site-nav a.nav-cta {
  background: var(--teal); color: #fff; padding: 8px 16px; border-radius: 6px;
}
.site-nav a.nav-cta:hover { background: var(--teal-dark); color: #fff; }
@media (max-width: 720px) {
  .site-nav a:not(.nav-cta) { display: none; }
}

/* Hero */
.hero { padding: 76px 0 64px; background: linear-gradient(180deg, var(--grey-bg), var(--surface)); }
.hero h1 {
  font-size: 46px; line-height: 1.12; letter-spacing: -0.02em; color: var(--navy);
  max-width: 20ch; margin-bottom: 20px;
}
.hero .lede { font-size: 19px; color: var(--text-muted); max-width: 62ch; }
.hero .lede strong { color: var(--text); font-weight: 600; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 640px) { .hero h1 { font-size: 34px; } .hero { padding: 48px 0 40px; } }

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 6px; text-decoration: none;
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-secondary { background: var(--surface); color: var(--navy); border-color: var(--grey-line); }
.btn-secondary:hover { border-color: var(--navy); }

/* Sections */
section { padding: 62px 0; }
section.tint { background: var(--grey-bg); border-top: 1px solid var(--grey-line); border-bottom: 1px solid var(--grey-line); }
.section-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal-dark); margin-bottom: 12px;
}
h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; color: var(--navy); margin-bottom: 16px; max-width: 30ch; }
h3 { font-size: 17px; color: var(--navy); margin-bottom: 6px; }
.section-intro { font-size: 17.5px; color: var(--text-muted); max-width: 66ch; }
section > .wrap > p + p { margin-top: 14px; }

/* Before and after */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.compare > div { background: var(--surface); border: 1px solid var(--grey-line); border-radius: 10px; padding: 22px 24px; }
.compare .now { border-left: 3px solid #e8641a; }
.compare .after { border-left: 3px solid var(--green); }
.compare h3 { margin-bottom: 12px; }
.compare ul { list-style: none; }
.compare li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: 15px; color: var(--text-muted); }
.compare li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--grey-line); }
.compare .after li::before { background: var(--green); }
.compare .now li::before { background: #e8641a; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 36px; }
.card { background: var(--surface); border: 1px solid var(--grey-line); border-radius: 10px; padding: 24px; }
section.tint .card { background: var(--surface); }
.card p { font-size: 15px; color: var(--text-muted); }
.card-icon {
  width: 34px; height: 34px; border-radius: 8px; background: rgba(58, 177, 162, 0.14);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.card-icon svg { width: 19px; height: 19px; fill: var(--teal-dark); }

/* Numbered steps */
.steps { counter-reset: step; margin-top: 34px; display: grid; gap: 18px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num {
  flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.step p { font-size: 15.5px; color: var(--text-muted); }

/* Plain list of assurances */
.assurances { margin-top: 30px; display: grid; gap: 16px; }
.assurance { display: flex; gap: 14px; align-items: flex-start; }
.tick { flex: 0 0 20px; margin-top: 3px; }
.tick svg { width: 20px; height: 20px; fill: var(--green); }
.assurance p { font-size: 15.5px; color: var(--text-muted); }
.assurance strong { color: var(--text); }

/* Contact */
.contact-box {
  margin-top: 30px; background: var(--navy); color: #fff; border-radius: 12px;
  padding: 34px 36px; display: flex; justify-content: space-between; align-items: center; gap: 26px;
}
.contact-box h2 { color: #fff; margin-bottom: 8px; }
.contact-box p { color: rgba(255, 255, 255, 0.78); font-size: 16px; max-width: 46ch; }
.contact-box a.btn { background: var(--teal); color: #fff; white-space: nowrap; }
.contact-box a.btn:hover { background: var(--teal-dark); }
@media (max-width: 760px) { .contact-box { flex-direction: column; align-items: flex-start; } }

/* Footer */
.site-footer { border-top: 1px solid var(--grey-line); padding: 30px 0; background: var(--grey-bg); }
.footer-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
.site-footer p, .site-footer a { font-size: 14px; color: var(--text-muted); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--navy); text-decoration: underline; }
.footer-links { display: flex; gap: 20px; }

/* Long-form pages (the privacy notice) */
.doc { padding: 54px 0 70px; max-width: 76ch; }
.doc h1 { font-size: 34px; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 10px; }
.doc .updated { color: var(--text-muted); font-size: 14.5px; margin-bottom: 30px; }
.doc h2 { font-size: 21px; margin: 34px 0 10px; max-width: none; }
.doc h3 { font-size: 16.5px; margin: 22px 0 6px; }
.doc p, .doc li { color: var(--text); font-size: 15.5px; }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { margin: 12px 0 0 22px; }
.doc li { margin-bottom: 7px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14.5px; }
.doc th, .doc td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--grey-line); vertical-align: top; }
.doc th { color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.doc a { color: var(--teal-dark); }
.doc .callout {
  background: var(--grey-bg); border-left: 3px solid var(--teal); border-radius: 6px;
  padding: 16px 20px; margin-top: 18px;
}
/* Anything the operator still has to fill in before this page is published. Loud on
   purpose: a placeholder that looks like prose is a placeholder that ships. */
.fill { background: #ffe9a8; border-bottom: 1px dashed #b58900; padding: 0 3px; font-weight: 600; }