/* The whole stylesheet for greensready.co.uk. One file, no build step.

   The look goes beyond docs/design/DESIGN.md on purpose, on the sales page only
   (Kamil chose this version on 15 November 2026): giant red section numbers,
   capitals, tilted plaques, whole sentences on colour bars, a dark button.
   The colours and typefaces are the design system's, copied by hand because the
   site shares no bundle with the app. If DESIGN.md changes a value, change it
   here too. */

:root {
  --paper: #f6f1e6;
  --overprint: #1c250c;
  --overprint-soft: #1d4724;
  --green: #1f6f43;
  --green-wash: #e5e7d9;
  --red: #e8552f;

  --font-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --gutter: 22px;
  --section-y: 76px;
  --measure: 1080px;
  --rule: 4px solid var(--overprint);
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("./assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
/* The bottom padding keeps a focused element clear of the bar that follows the reader. */
html { -webkit-text-size-adjust: 100%; scroll-padding: 24px 0 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--overprint);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-x: hidden;
}
/* Paper grain. One fixed layer over the page, never in the way of a tap. No
   blend mode: a blended full-screen layer is re-composited on every scroll
   frame (inferred from how compositing works, not measured on a phone). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.15 0 0 0 0 0.05 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; text-wrap: balance; }
h1, h2 { text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.96; }
h1 { font-size: clamp(2.5rem, 11.4vw, 5.8rem); }
h2 { font-size: clamp(2.1rem, 9.6vw, 4.4rem); }

:focus-visible { outline: 3px solid var(--overprint); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--overprint); color: var(--paper); padding: 12px 16px; }
.skip:focus { top: 12px; }

/* Every band of the page is full width; its content sits in one column. */
.site-header, main > section, .site-footer { padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap { max-width: var(--measure); margin-inline: auto; }

/* Header */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-header .logo img { width: 150px; }
.site-header nav { display: flex; gap: 6px; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Sections. Each is its own stacking context, so a decoration can sit behind
   the text with a negative z-index and never fall behind the section itself. */
main > section { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-y); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 26px;
  background: var(--overprint); color: var(--paper); box-shadow: 4px 4px 0 var(--red);
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
}
.cta:hover { background: var(--overprint-soft); }
.cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--red); }

/* The one phrase per heading that carries the colour. */
.hl { display: inline-block; background: var(--overprint); color: var(--paper); padding: 0.02em 0.2em 0.06em; transform: rotate(-2deg); margin-top: 0.12em; }

/* The number is the loudest thing in the section and sits behind the text. */
main > section:has(.eyebrow) { padding-top: calc(var(--section-y) + 96px); }
.eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.eyebrow + h2 { margin-bottom: 34px; }
.eyebrow .num { position: absolute; z-index: -1; top: 6px; right: 14px; font-family: var(--font-display); font-weight: 800; font-size: 11.5rem; line-height: 0.9; letter-spacing: -0.05em; color: var(--red); pointer-events: none; }

/* Top */
.top { padding-top: 44px; padding-bottom: 0; }
.top .wrap { display: flex; flex-direction: column; align-items: flex-start; min-height: min(80svh, 700px); }
.top h1 { margin-bottom: 22px; }
.top .hl { background: var(--green); }
.top .lede { max-width: 30ch; margin-bottom: 26px; }
.top .blob { position: absolute; z-index: -1; border-radius: 50%; background: var(--red); width: 400px; height: 400px; right: -120px; bottom: -190px; }
/* The panel of geese sits on the bottom edge of the section, desk flush with it. */
.top .hero-panel { width: 100%; max-width: 480px; margin: auto 0 0 auto; padding-top: 34px; }

/* Problem */
.lines li { display: table; padding: 0.14em 0.4em 0.2em; background: var(--red); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 5.2vw, 2rem); line-height: 1.25; }
.lines li:nth-child(2) { background: var(--green); color: var(--paper); transform: rotate(-1.2deg); }
.lines li + li { margin-top: 12px; }

/* How it works */
.how, .pricing { background-image: radial-gradient(rgba(28, 37, 12, 0.2) 1.3px, transparent 1.8px); background-size: 12px 12px; }
.steps { counter-reset: step; margin-bottom: 30px; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.steps li + li { margin-top: 12px; }
.steps li::before { content: counter(step); flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--overprint); font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; }
.steps li.is-now { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-color: var(--red); }
.phone { max-width: 380px; border: 3px solid var(--overprint); border-radius: 30px; background: var(--paper); padding: 26px 20px 24px; box-shadow: 8px 8px 0 var(--overprint); transform: rotate(1deg); }
.ex-q { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; margin-bottom: 18px; }
.ex-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.ex-a { font-size: 0.95rem; line-height: 1.5; margin-bottom: 18px; }
.ex-score { margin-bottom: 14px; }
.ex-n { display: inline-block; background: var(--red); padding: 0 0.16em; transform: rotate(-3deg); font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; }
.ex-fix { font-size: 0.95rem; line-height: 1.5; }

/* The example in motion. These classes exist only while the script is running
   it; without script, or with reduced motion, nothing below ever applies. */
.phone.is-playing .w { visibility: hidden; }
.phone.is-playing .w.is-on { visibility: visible; }
.phone.is-playing .ex-score, .phone.is-playing .ex-fixlabel, .phone.is-playing .ex-fix { visibility: hidden; }
.phone.is-playing.has-score .ex-score { visibility: visible; }
.phone.is-playing.has-fix .ex-fixlabel, .phone.is-playing.has-fix .ex-fix { visibility: visible; }

/* What you get */
.list li { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 5.4vw, 2rem); line-height: 1.2; text-transform: uppercase; padding: 16px 0; border-top: var(--rule); }
.list li:last-child { border-bottom: var(--rule); }
.list li:nth-child(odd) { padding-left: 0.4em; background: var(--green-wash); }

/* Roles */
.role-note { margin: -16px 0 30px; font-size: 1.125rem; }
.role-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 10px; }
.role-row li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 600; font-size: 0.875rem; line-height: 1.25; }
.role-row img { height: 108px; width: auto; }

/* Pricing */
.plans { margin-bottom: 34px; }
.plan { padding: 18px 0; border-top: var(--rule); }
.plan:last-child { border-bottom: var(--rule); }
.plan h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; margin-bottom: 10px; }
.plan .dots { flex: 1; border-bottom: 3px dotted var(--overprint); transform: translateY(-5px); min-width: 20px; }
.plan .price { font-size: 2.4rem; background: var(--red); padding: 0 0.14em; transform: rotate(-2deg); }
.plan li { font-size: 1rem; line-height: 1.45; }
.plan li + li { margin-top: 2px; }

/* Questions */
.questions details { border-top: var(--rule); }
.questions details:last-of-type { border-bottom: var(--rule); }
.questions summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; text-transform: uppercase; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; flex: none; font-size: 1.6rem; line-height: 1; font-weight: 700; }
.questions details[open] summary::after { content: "\2212"; }
.questions details p { padding: 0 0 18px; max-width: 60ch; }

/* Last call */
.start { background: var(--red); }
.start h2 { margin-bottom: 30px; }
.start { padding-bottom: 0; }
/* The goose stands on the footer's top edge and says the bubble's words. */
.goose-call { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; margin: 40px 0 0 auto; text-decoration: none; }
.goose-call img { height: 210px; width: auto; }
.goose-call .bubble { position: relative; margin: 0 0 14px 18px; padding: 10px 18px 11px; background: var(--paper); border: 3px solid var(--overprint); border-radius: 22px; font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.1; transform: rotate(-3deg); }
.goose-call .bubble::after { content: ""; position: absolute; left: 34px; bottom: -13px; width: 18px; height: 18px; background: var(--paper); border-right: 3px solid var(--overprint); border-bottom: 3px solid var(--overprint); transform: rotate(45deg); }

/* Footer */
.site-footer { background: var(--overprint); color: var(--paper); padding-top: 44px; padding-bottom: 120px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 22px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.site-footer p { font-size: 0.9rem; line-height: 1.5; max-width: 46ch; }
.site-footer :focus-visible { outline-color: var(--paper); }

/* The bar that follows the reader. Present only once the script shows it. */
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 2px solid var(--overprint); }
.stickybar[hidden] { display: none; }
.stickybar .cta { width: 100%; }

/* Declared here, used only inside the motion query below. */
@keyframes stamp { from { transform: rotate(-3deg) scale(2.2); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .cta { transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease; }
  .phone.has-score .ex-n { animation: stamp 0.28s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
}

@media (min-width: 900px) {
  :root { --gutter: 48px; --section-y: 120px; }
  body { font-size: 1.125rem; }
  main > section:has(.eyebrow) { padding-top: calc(var(--section-y) + 60px); }
  .eyebrow .num { font-size: 19rem; right: 20px; top: 0; }
  .site-header .logo img { width: 180px; }
  .top { padding-top: 70px; }
  .top .wrap { min-height: 590px; padding-bottom: 80px; }
  .top h1 { max-width: 13ch; }
  .top .lede { max-width: 36ch; font-size: 1.25rem; }
  .top .blob { width: 760px; height: 760px; right: -140px; bottom: -420px; }
  .top .hero-panel { position: absolute; right: var(--gutter); bottom: 0; width: 44%; max-width: 600px; margin: 0; padding: 0; }
  .how .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; align-items: start; }
  .how .phone { grid-column: 2; grid-row: 1 / span 3; }
  .steps li { font-size: 1.6rem; }
  .role-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .role-row img { height: 170px; }
  .role-row li { font-size: 1rem; }
  .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
  .plan, .plan:last-child { border-bottom: 0; }
  .stickybar { display: none; }
  .site-footer { padding-bottom: 60px; }
}