/* The ad landing pages, /redesign and /new-website (pipeline/krm/public.py, templates landing_*.html). Loaded after
   site.css, whose look they share: paper, ink, teal, Bricolage Grotesque, yellow only as a highlighter. site.css holds
   the enquiry form's fields and the points list (the homepage uses them too); this file adds the hero, the form's
   errors, the cookie banner and the made-up examples (our real work reuses site.css .work). No
   scripts or style="" attributes (the CSP forbids them). Phone first: text and inputs 16px or more, taps 44px or
   more, nothing scrolls sideways at 390px.
   Bump ?v= in landing_base.html when this changes. */

:root { --error: #9b2c1f; --warn: #fdf3d6; --warn-edge: #b07b00; }
html { scroll-padding-top: 1rem; }             /* no sticky header here */

/* Header: the logo only, so nothing leads away from the form */
.lp-head .wrap { display: flex; align-items: center; min-height: 64px; }

/* Hero: the promise, a button down to the form and the no-catch points in the first screen on a phone, then the
   form. On a wide screen the form runs down the right and the button goes (the form is already in view). */
.lp-hero { padding-block: 0.5rem clamp(3rem, 2rem + 4vw, 5rem); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "form"; gap: 2.5rem; }
.lp-hero-copy { grid-area: copy; }
.lp-hero-grid > .panel { grid-area: form; }
.lp-hero h1 { font-size: clamp(2.35rem, 1.6rem + 3.4vw, 4.1rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 13em; }
.lp-hero .lede { margin-top: 1.25rem; }
.lp-jump { width: 100%; min-height: 56px; margin-top: 1.5rem; font-size: 1.15rem; }
.lp-why { margin: 1.25rem 0 0; color: var(--soft); max-width: 34rem; }
.panel-sub { margin: -0.5rem 0 1.25rem; color: var(--soft); }

/* The form's sheet of paper */
.panel { background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px;
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); box-shadow: 0 1px 2px rgba(16, 41, 42, 0.08); }
.panel-h { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem); margin: 0 0 1rem; }
.section-teal .panel h2 { color: var(--ink); margin-bottom: 1rem; }
.section-teal .panel a { color: var(--teal); }
.section-teal .panel :focus-visible { outline-color: var(--teal); }
.next { padding-left: 1.4rem; margin: 0 0 1rem; }
.next li { margin-bottom: 0.6rem; padding-left: 0.25rem; }
.muted { color: var(--soft); font-weight: 400; }

/* The enquiry form's errors (only these pages show them; the homepage's form posts here) */
.field-error { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; color: var(--error); }
.has-error input { border: 2px solid var(--error); }
.problem { padding: 0.75rem 1rem; margin: 1rem 0 0; border-radius: 6px; background: var(--warn); border-left: 4px solid var(--warn-edge); }
.problem p { margin: 0; font-weight: 600; }
.problem ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.problem a { color: var(--ink); display: block; padding-block: 0.4rem; }
.panel .small a { display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }   /* 44px tap, same line height */
.panel .small { margin-top: 0.75rem; }

/* What you get */
.lp-get { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem var(--gap); }
.faq p a, .consent p a { display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }   /* 44px tap, same line height */

/* The made-up example, in its own section under our real work. Its photos are drawn in CSS so they read as photos
   (timber for the joiner, glass for the window cleaner), not as an empty box. */
.lp-example { max-width: 64rem; }
.lp-example .o-photo.ph-wood { background:
  repeating-linear-gradient(90deg, rgba(40, 20, 5, 0.28) 0 2px, transparent 2px 38px),
  repeating-linear-gradient(0deg, rgba(255, 235, 200, 0.07) 0 3px, transparent 3px 11px),
  linear-gradient(160deg, #5e3a1e, #7d5130 55%, #4f301a); }
.lp-example .n-photo.ph-wood { background:
  repeating-linear-gradient(90deg, rgba(90, 55, 25, 0.22) 0 2px, transparent 2px 46px),
  repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 3px, transparent 3px 12px),
  linear-gradient(160deg, #c99a68, #e2bf93 50%, #b98552); }
.lp-example .n-photo.ph-glass { border: 5px solid #fff; box-shadow: 0 0 0 1px var(--rule); background:
  linear-gradient(90deg, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
  linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 31% 37%, rgba(255, 255, 255, 0) 38%),
  linear-gradient(160deg, #7fb2cc, #cfe6f0 55%, #9cc6d9); }

/* The made-up search listing: a business with no website, next to one with */
.sheet-list { display: grid; gap: 0.9rem; padding: 1rem; font-size: 0.95rem; }
.l-q { margin: 0; padding: 0.5rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--soft); }
.l-item { padding-top: 0.8rem; border-top: 1px solid #e3e8e6; }
.l-name { margin: 0; font-weight: 700; font-size: 1.05rem; }
.l-meta { margin: 0 0 0.55rem; color: var(--soft); }
.l-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.l-btn { position: relative; display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; border: 1px solid var(--rule);
  border-radius: 999px; font-weight: 600; font-size: 0.85rem; color: var(--teal); }
.l-none { color: var(--soft); border-style: dashed; }
.sheet-list .key { top: -0.75rem; right: -0.9rem; }

/* Last call to act, on the teal band */
.lp-end-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.lp-end h2 { font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4rem); letter-spacing: -0.035em; max-width: 13ch; }
.section-teal .section-lede { color: #c8d8d5; }
.lp-chat { margin-top: 1rem; }
.lp-chat a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.section-teal .lp-chat { margin-top: 1.5rem; }
.section-teal .lp-chat a { color: #fff; }

/* Cookie choice (only when a pixel id is set). First in the page's order, pinned to the foot of the screen until
   the visitor picks one; the two choices look exactly alike. Kept to a few lines: it sits over the first screen. */
body.has-banner { display: flex; flex-direction: column; }
.consent { order: 99; position: sticky; bottom: 0; z-index: 20; background: var(--ink); color: #e3ecea;
  padding: 0.7rem 0 calc(0.7rem + env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(16, 41, 42, 0.25); }
.consent h2 { font-size: 1rem; line-height: 1.3; letter-spacing: 0; color: #fff; margin: 0 0 0.15rem; }
.consent p { margin: 0; font-size: 1rem; line-height: 1.4; }
.consent a { color: #fff; }
.consent :focus-visible { outline-color: var(--marker); }
.consent .consent-now { margin-top: 0.3rem; font-weight: 600; color: #fff; }
.consent-row { display: grid; gap: 0.55rem; }
.consent-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0; }
.btn-choice { min-height: 44px; padding: 0.4rem 0.75rem; white-space: normal; text-align: center; line-height: 1.2;
  background: #fff; color: var(--ink); border: 2px solid #fff; font: 600 1rem/1.2 var(--font); cursor: pointer; }
.btn-choice:hover { background: var(--mist); border-color: var(--mist); color: var(--ink); }

@media (min-width: 52rem) {
  .steps.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .consent-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; }
  .consent-choice { grid-template-columns: repeat(2, 9rem); }
}

@media (min-width: 60rem) {
  .lp-hero { padding-top: 2rem; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); grid-template-areas: "copy form";
    column-gap: clamp(2.5rem, 4vw, 5rem); align-items: start; }
  .lp-hero-copy { padding-top: 1.5rem; }
  .lp-jump { display: none; }
  .lp-get { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .lp-end-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); align-items: start; }
}