:root {
  /* The mark, the favicon, the og card and the brief's own closing tile are all
     this teal; the site chrome used to be a navy that matched none of them
     (audit U1-12). --steel-dark stays as the heading ink so the page does not
     go monotone. */
  --brand: #0e4b5a;
  --brand-dark: #093642;
  --steel: #2b4c6f;
  --steel-dark: #1d3550;
  --ink: #1a1f24;
  --dim: #5a6b7a;
  --line: #dde3e8;
  --bg: #f7f9fb;
  --card: #ffffff;
  --accent: #c98a2c;
  /* Text weight of the amber. #c98a2c is 2.93:1 on white, below AA; this is
     5.4:1. The lighter tone stays for list markers and panel fills only. */
  --accent-text: #8a5c12;
  /* Light only, stated rather than left to the browser, so form controls,
     scrollbars and the address bar do not guess (audit U3-11). */
  color-scheme: light;
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id] { scroll-margin-top: 80px; }
/* Column flex on body keeps the footer at the bottom of a short page (the 404). */
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
.draft-banner {
  background: var(--steel-dark);
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  padding: 8px 16px;
  letter-spacing: 0.02em;
}
.draft-banner strong { color: #ffd889; }

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brand);
  letter-spacing: 0.01em;
}
.brand-mark { width: 38px; height: 38px; display: block; flex: none; }
.brand .tag {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--dim);
  letter-spacing: 0.02em;
}
.nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.nav a { color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.nav a:hover { color: var(--brand); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--brand);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  /* Transparent border of the same width as the outlined variant, so the two
     sit on the same baseline in a row and neither drops under 44px. */
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--brand-dark); }
.btn.secondary {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn.secondary:hover { background: var(--brand); color: #fff; }
.btn:active { transform: translateY(1px); }
/* .nav a is (0,1,1) and beats .btn at (0,1,0), which painted the header CTA
   near-black on the brand fill at 1.87:1 (audit U3-01). Both rules below are
   (0,2,0), so they win the cascade without !important. */
.nav .btn { color: #fff; }
.nav .btn.secondary { color: var(--brand); }

/* One owned focus ring. #8a5c12 is 5.5:1 on the page background and 5.8:1 on a
   white card, both above the 3:1 floor for a focus indicator; the ring sits
   outside the button so it is the background it has to clear, not the fill. */
:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible { outline-offset: 3px; }

main { max-width: 1080px; margin: 0 auto; padding: 0 24px; width: 100%; }
main a:not(.btn) {
  color: var(--steel);
  text-decoration: underline;
  text-decoration-color: rgba(43, 76, 111, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main a:not(.btn):hover {
  color: var(--steel-dark);
  text-decoration-color: currentColor;
}
main a.shot-link, main a.shot-link:hover { text-decoration: none; }

section { padding: 64px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: none; }
.no-rule { border-bottom: none; }

/* Uppercase tracked label, lifted from the brief's own section labels. */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 12px;
}

.hero { padding-top: 56px; text-align: left; }
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--steel-dark);
  max-width: 24ch;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.hero p.lede { font-size: 1.06rem; color: var(--dim); max-width: 46ch; margin: 0 0 24px; }
.hero .cta-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.hero .assurance { font-size: 0.85rem; color: var(--dim); margin: 0 0 8px; max-width: 52ch; }
.hero-shot { margin: 0; }
.hero-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(20, 40, 60, .16);
}
.hero-shot figcaption { margin-top: 8px; font-size: 0.82rem; color: var(--dim); }

h2.section-title {
  font-size: 1.5rem;
  color: var(--steel-dark);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
/* Reading measure. Not ch: ch is the advance width of "0", about 0.62em in the
   system UI face, so a 68ch cap renders 93 characters. 32em lands near 70. */
p.section-sub { color: var(--dim); margin-top: 0; margin-bottom: 32px; max-width: 32em; }
/* Sections with no subtitle would otherwise leave 8px between the title and the
   content. Structural, so no subtitle has to be invented to create the gap. */
h2.section-title + .steps,
h2.section-title + ul,
h2.section-title + .grid3,
h2.section-title + .deliverable,
h2.section-title + .pricing,
h2.section-title + .sample-panel,
h2.section-title + details { margin-top: 32px; }

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
}
.card h3 { margin-top: 0; font-size: 1.02rem; color: var(--steel-dark); }
.card p { color: var(--dim); font-size: 0.94rem; margin-bottom: 0; }
.grid-note { color: var(--dim); font-size: 0.94rem; margin: 24px 0 0; max-width: 32em; }

.trust ul { margin: 0; padding-left: 20px; }
.trust li { margin-bottom: 12px; color: var(--ink); max-width: 32em; }
.trust li::marker { color: var(--brand); }

/* The section a sceptic reads before believing anything else. Framed, two up,
   amber rule because here "pay attention" is the right meaning of the colour. */
.notdo ul {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
}
.notdo li {
  color: var(--ink);
  margin: 0;
  padding: 14px 16px 14px 44px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-text);
  border-radius: 8px;
  font-size: 0.95rem;
}
.notdo li::before {
  content: "";
  position: absolute;
  left: 18px; top: 21px;
  width: 12px; height: 2px;
  background: var(--accent-text);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.step h3 { margin: 0 0 4px; font-size: 1rem; color: var(--steel-dark); }
.step p { color: var(--dim); font-size: 0.92rem; margin: 0; max-width: 32em; }

.sample-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.sample-panel .sample-note {
  background: #eef2f6;
  color: var(--dim);
  font-size: 0.82rem;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}
.sample-body {
  padding: 24px;
  font-size: 0.92rem;
}
.sample-body h1, .sample-body h3 { color: var(--steel-dark); }
.sample-body h1 { font-size: 1.15rem; margin-top: 0; }
.sample-body h3 { font-size: 1rem; margin-top: 20px; }
.sample-body ul { padding-left: 20px; }
.sample-body li { margin-bottom: 6px; }
.sample-body strong { color: var(--steel-dark); }
.sample-body p { max-width: 32em; }
.sample-body p:first-child { margin-top: 0; }

.send-cta { margin: 0 0 12px; }
.send-hint { font-size: 0.85rem; color: var(--dim); margin: 0 0 24px; max-width: 32em; }
.send-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 32px;
  max-width: 640px;
}
.send-panel p { margin: 0; }
.send-note {
  font-size: 0.82rem;
  color: var(--dim);
  margin: 12px 0 0;
  max-width: 32em;
}

/* 16px of padding on the summary, not the details, so the visible row and the
   hit area are the same 44px+ box. */
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  list-style: none;
  padding: 16px 40px 16px 0;
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: calc(50% - 6px);
  width: 8px; height: 8px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
}
details.faq[open] summary::after { transform: rotate(-135deg); }
details.faq p { color: var(--dim); margin: 0 0 16px; max-width: 32em; }

/* Long-form document page (the Terms). 68ch keeps the measure near 68
   characters; unwrapped it ran to 131. */
section.doc { max-width: 32em; }
section.doc h1 { font-size: 2rem; line-height: 1.2; color: var(--steel-dark); margin: 0 0 8px; }
section.doc h2 { font-size: 1.25rem; color: var(--steel-dark); margin: 40px 0 8px; }
section.doc p { margin: 0 0 16px; }
section.doc > p:first-of-type { color: var(--dim); font-size: 0.92rem; margin-bottom: 32px; }
section.doc ul { padding-left: 20px; }
section.doc li { margin-bottom: 8px; }

footer.site {
  flex: none;
  padding: 40px 24px 56px;
  text-align: center;
  color: var(--dim);
  font-size: 0.85rem;
}
footer.site a { color: var(--steel); display: inline-block; padding: 6px 4px; }

.deliverable{display:grid;grid-template-columns:1fr 1.05fr;gap:36px;align-items:start}
.deliverable .shot picture{display:block}
.deliverable .shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(20,40,60,.12)}
.deliverable ol.contents{padding-left:22px;margin:0;padding-top:4px}
.deliverable ol.contents li{margin-bottom:12px;color:var(--dim);font-size:.95rem;max-width:32em}
.deliverable ol.contents li strong{color:var(--steel-dark)}
.deliverable ol.contents li::marker{color:var(--brand);font-weight:700}
.deliverable-note{color:var(--dim);font-size:.95rem;margin:24px 0 0;max-width:32em}
.shot-link{display:block;text-decoration:none}
.shot-cap{display:block;margin-top:8px;font-size:.85rem;color:var(--dim)}
.shot-link:hover .shot-cap{color:var(--brand)}
.pdf-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.pdf-links .btn{text-align:center}
.sample-generated{font-size:.82rem;color:var(--dim);margin:12px 0 0}
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.price-card{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:28px 24px;text-align:left;max-width:none;display:flex;flex-direction:column;position:relative}
.price-card h3{margin:0 0 4px;font-size:1.05rem;color:var(--steel-dark)}
.price-card .price{font-size:2.1rem;font-weight:700;color:var(--steel-dark);line-height:1.15}
.price-card .price .unit{font-size:1rem;color:var(--dim);font-weight:500}
.price-card .price .qual{font-size:1rem;font-weight:500;color:var(--dim);display:block}
.price-card .price-note{font-size:.82rem;color:var(--dim);margin:8px 0 16px}
.price-card ul{flex:1;text-align:left;padding-left:20px;color:var(--dim);font-size:.9rem;margin:0 0 20px}
.price-card li{margin-bottom:6px}
.price-card .btn{width:100%;margin-top:0}
.price-card.featured{border-color:var(--accent-text);border-width:2px;box-shadow:0 14px 34px rgba(20,40,60,.14)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent-text);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:4px 12px;border-radius:999px;white-space:nowrap}

/* Breakpoints last, so they win over every component rule above. 1000 splits
   the deliverable, 900 splits the hero, 820 is the phone tier (the header stops
   being sticky there so the nav chips do not eat the viewport), 560 is one up. */
@media (min-width:821px){
  /* Levels the three bullet lists in a three-up row. Below 821 the featured card
     spans the row on its own and the floor is only a gap (W1 open item 7). */
  .price-card .price-note{min-height:60px}
}
@media (max-width:1000px){
  .deliverable{grid-template-columns:1fr}
  .deliverable .shot{max-width:420px}
}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:32px}
  .hero{padding-top:40px}
  .hero h1{font-size:1.9rem}
}
@media (max-width:820px){
  .grid3,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-card.featured{grid-column:span 2}
  .notdo ul{grid-template-columns:1fr}
  .pdf-links{grid-template-columns:1fr}
  .deliverable .shot{display:none}
  .card{padding:20px}
  .send-panel{padding:24px}
  header.site{position:static}
  section[id]{scroll-margin-top:24px}
  .nav{flex-wrap:wrap;padding-bottom:12px}
  .nav > nav,.nav > ul{order:3;width:100%;margin-top:12px}
  .nav ul{display:flex;width:100%;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav ul::-webkit-scrollbar{display:none}
  .nav ul li{flex:none}
  .nav ul a{display:block;padding:8px 12px;min-height:36px;border:1px solid var(--line);border-radius:999px;background:var(--card);white-space:nowrap}
}
@media (max-width:560px){
  /* Keeps the brand and the CTA on one row at 390; without this the button
     wraps and the static header runs to 200px before the hero starts. */
  .nav > .btn{padding:10px 14px;font-size:.85rem}
  .grid3,.steps{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .price-card.featured{grid-column:auto}
}

/* Print last of all. Without the details override a printed copy carries the
   FAQ questions and none of the answers (audit U3-09). */
@media print{
  header.site{position:static;background:#fff;backdrop-filter:none}
  .nav ul,.nav .btn,.cta-row,.pdf-links{display:none}
  details.faq > *:not(summary){display:block !important}
  /* Chrome 131 and later put the disclosure body behind ::details-content with
     content-visibility:hidden, so the rule above alone printed ten of eleven
     questions with no answer. Its own rule: an unknown pseudo-element would
     invalidate a whole selector list. */
  details.faq::details-content{content-visibility:visible !important;display:block !important}
  details.faq,.price-card,.card,.step{break-inside:avoid}
  section{padding:20px 0}
  body{background:#fff}
  .deliverable .shot img{max-width:55%;box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:0.8em;color:#5a6b7a}
}