/* The three SEO landing pages — uk, mobile-valeting-software and
   detailing-studio-software. Loaded after css/site.css.

   They share only one CSS selector between them but they are the same shape: a
   hero, then a run of sections with a heading, prose and card grids. Each keeps
   its own class prefix in the markup (.uk-, .lp-, .st-) and they all read from
   here via body.lp-page, so the three cannot drift apart the way they had.

   ── the rhythm ────────────────────────────────────────────────────────────
   Every section used to carry site.css's .s default of 96px top AND bottom.
   Because sections are adjacent, that is not 96px of space between them, it is
   192px — measured identically at all thirteen boundaries on the studio page,
   about 2,450px of the scroll. Uniform spacing carries no information: nothing
   told you which sections belonged together and which started a new idea, and a
   tinted section opening with 96px of empty lavender before its heading read as
   a component that had failed to load rather than as deliberate space.

   So spacing is now four steps, and sections CLOSE tighter than the next one
   OPENS. A tint opens tighter still, because the change of colour is already
   doing the separating that the padding was duplicating. */
body.lp-page{
  --lp-rel:14px;          /* a heading and its own paragraph */
  --lp-content:24px;      /* paragraph to list; rows within a block */
  --lp-sub:48px;          /* between ideas inside one section */
  --lp-open:72px;         /* a white section opens */
  --lp-tint-open:56px;    /* a tint opens tighter — the fill separates already */
  --lp-close:56px;        /* every section closes */

  /* Prose wants a reading measure; structured grids do not. Carried as a custom
     property rather than a second max-width rule because the two would fight on
     specificity — body.lp-page .st-section > * is 0,2,1 and silently outranks
     body.lp-page .st-grid at 0,2,0, which is why the grids were being clamped
     to 760px despite already asking for 940. A variable has no specificity. */
  --lp-measure:760px;
  --lp-wide:940px;

  /* Panels invert against the fill they sit on, so a bordered block is legible
     on both white and tint without a second set of selectors. */
  --lp-panel:var(--tint);
}

/* Top and bottom only, never the shorthand: the horizontal gutter below is a
   separate declaration, and a shorthand here would reset it to zero every time
   .s.tint won on specificity. */
body.lp-page .s{padding-top:var(--lp-open);padding-bottom:var(--lp-close)}
body.lp-page .s.tint{padding-top:var(--lp-tint-open);padding-bottom:var(--lp-close);
  --lp-panel:#fff}

/* Sections carry the page gutter themselves. They used to rely on the window
   being wider than the 760px measure, so at narrow widths the text ran flush to
   the viewport edge. Invisible on desktop, load-bearing on a phone. */
body.lp-page .uk-section,
body.lp-page .lp-section,
body.lp-page .st-section{padding-left:20px;padding-right:20px}

/* site.css's .narrow caps the SECTION at 720px, and a section has no auto side
   margins — so the studio page's opening argument was rendering as a 720px
   column pinned to the left edge while every other section on the page was
   centred. It reads as a layout that has come apart, and it predates this pass.
   The section goes back to full width and .narrow becomes what it was meant to
   be: a tighter reading measure for the column inside it. */
body.lp-page .s.narrow{max-width:none;--lp-measure:720px}

/* ── hero ─────────────────────────────────────────────────────────────────
   Clears the 108px fixed nav. The breadcrumb used to sit BELOW the hero as a
   bare div between two sections, which detached the hero from the article; it
   now opens the page above the eyebrow. */
body.lp-page .uk-hero,
body.lp-page .lp-hero,
body.lp-page .st-hero{padding:150px 0 var(--lp-close);text-align:center}
body.lp-page .uk-hero > *,
body.lp-page .lp-hero > *,
body.lp-page .st-hero > *{max-width:820px;margin-left:auto;margin-right:auto;padding:0 32px}
body.lp-page .uk-hero h1,
body.lp-page .lp-hero h1,
body.lp-page .st-hero h1{font-size:44px;font-weight:800;letter-spacing:-.03em;
  line-height:1.12;color:var(--ink);margin:0 auto var(--lp-rel);text-wrap:balance}
body.lp-page .uk-hero p,
body.lp-page .lp-hero p,
body.lp-page .st-hero p{font-size:17.5px;line-height:1.7;color:var(--body);
  max-width:660px;text-wrap:pretty;margin:0 auto}

body.lp-page .st-eyebrow{display:inline-block;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pu);margin-bottom:12px}

/* ── sections ─────────────────────────────────────────────────────────────
   The inner column and the typography; .s above supplies the rhythm and fill. */
body.lp-page .uk-section > *,
body.lp-page .lp-section > *,
body.lp-page .st-section > *{max-width:var(--lp-measure);margin-left:auto;margin-right:auto}
body.lp-page .uk-section h2,
body.lp-page .lp-section h2,
body.lp-page .st-section h2{font-size:31px;font-weight:800;letter-spacing:-.028em;
  line-height:1.2;color:var(--ink);margin:0 auto var(--lp-rel);text-wrap:balance}
body.lp-page .uk-section h3,
body.lp-page .lp-section h3,
body.lp-page .st-section h3{font-size:20px;font-weight:700;letter-spacing:-.018em;
  color:var(--ink);margin:var(--lp-sub) auto 10px}
body.lp-page .uk-section h3:first-child,
body.lp-page .lp-section h3:first-child,
body.lp-page .st-section h3:first-child{margin-top:0}
body.lp-page .uk-section p,
body.lp-page .lp-section p,
body.lp-page .st-section p{font-size:17px;line-height:1.78;color:var(--body);
  margin:0 auto var(--lp-content)}
/* The standfirst introduces the whole section, so it closes at subsection
   distance rather than paragraph distance. */
body.lp-page .lp-section > p.lead,
body.lp-page .st-section > p.lead{font-size:17.5px;line-height:1.7;color:var(--body);
  margin-bottom:var(--lp-sub)}
/* A heading that runs straight into a block with no standfirst between them is
   introducing that block, so the distance is subsection, not relationship.
   Sibling margins collapse, so this reads as 48px rather than 14 + 48. */
body.lp-page h2 + .st-grid,body.lp-page h2 + .lp-grid,
body.lp-page h2 + .st-split,body.lp-page h2 + .st-steps,body.lp-page h2 + .lp-steps,
body.lp-page h2 + .st-list,body.lp-page h2 + .st-price{margin-top:var(--lp-sub)}

body.lp-page strong{color:var(--ink);font-weight:700}
body.lp-page .uk-section a,
body.lp-page .lp-section a,
body.lp-page .st-section a{color:var(--pu);font-weight:600}
body.lp-page ul,body.lp-page ol{margin:0 auto var(--lp-content);padding-left:22px;
  max-width:var(--lp-measure)}
body.lp-page li{font-size:17px;line-height:1.75;color:var(--body);margin-bottom:9px}

/* ── card grids are hairline grids ────────────────────────────────────────
   Were bordered, shadowed boxes; now the device used across the site — one
   container rule, 1px of the line colour showing through the gaps. */
body.lp-page .lp-grid,
body.lp-page .st-grid{--lp-measure:var(--lp-wide);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;margin:0 auto}
body.lp-page .lp-card,
body.lp-page .st-card{background:#fff;border:0;border-radius:0;box-shadow:none;
  padding:28px 26px;min-width:0}
body.lp-page .lp-card h3,
body.lp-page .st-card h3{font-size:18.5px;font-weight:700;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 10px}
body.lp-page .lp-card p,
body.lp-page .st-card p{font-size:15.5px;line-height:1.68;color:var(--body);margin:0}
body.lp-page .lp-card p + p,
body.lp-page .st-card p + p{margin-top:var(--lp-rel)}

/* The small caps label above a card heading. It had no rule at all, so it
   rendered as an unstyled inline span running into the heading beneath it. */
body.lp-page .tag{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pu);margin-bottom:9px}

/* ── two-column blocks ────────────────────────────────────────────────────
   .st-split was a two-column grid in the page's private stylesheet, which the
   migration deleted wholesale. It has been an unstyled div ever since: five
   sections built for two columns were rendering as one 760px stack, which is
   most of why the page was 21,900px long and why sections looked half-empty
   beside their own headings. */
body.lp-page .st-split{--lp-measure:var(--lp-wide);
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;
  margin:0 auto var(--lp-content)}
body.lp-page .st-split > *{min-width:0}
body.lp-page .st-split.reverse > :first-child{order:2}
body.lp-page .st-split.reverse > :last-child{order:1}

/* A card standing on its own rather than as a cell in a hairline grid needs to
   carry its own border, and to invert against whatever fill it sits on. */
body.lp-page .st-split .st-card{background:var(--lp-panel);border:1px solid var(--line);
  border-radius:18px;padding:26px 26px}

body.lp-page .st-split-media{border:1px solid var(--line);border-radius:18px;
  overflow:hidden;background:#fff}
body.lp-page .st-split-media img{display:block;width:100%;height:auto}

/* A phone screenshot goes in the site's own handset, not a bare white card.
   The maintenance-plan email is the same 1320x2868 as the SMS screenshot the
   homepage already shows in a .db-iphone, so it seats in the screen exactly.

   --ph-scale is the component's sizing API and the ONLY thing allowed to be set
   from here: 1 = 420px wide, and every inset, radius and button scales off it.
   Setting width on .db-iphone instead is what warped every mockup on the site
   once already, and .db-iphone is on the isolation list because of it. Nothing
   below touches .db-screen, .db-bezel or any button. */
body.lp-page .st-phone{display:flex;justify-content:center}
body.lp-page .st-phone .db-iphone{--ph-scale:.68}

/* A screenshot with real detail in it does not belong in half a column. The
   calendar is a week view — seven day columns, times down the side, booking
   cards inside them — and at 452px none of that is legible, which makes the
   image decoration rather than evidence. It also left about 500px of empty
   space under itself, because the list beside it runs to seven items.
   Full width beneath the list instead. */
body.lp-page .st-split.reverse{grid-template-columns:1fr}
body.lp-page .st-split.reverse > :first-child,
body.lp-page .st-split.reverse > :last-child{order:0}
/* Distance comes from the grid gap alone. Adding a margin here as well stacked
   on top of the list's own bottom margin AND the gap — three spacings for one
   boundary, about 108px for a 48px job. */
body.lp-page .st-split.reverse .st-list:last-child{margin-bottom:0}

/* ── structured rows ──────────────────────────────────────────────────────
   These lists are label-then-explanation pairs, not bullet points. Set as
   divided rows they read as a specification; set as discs at 17px they read as
   an essay someone forgot to finish. Must follow the base ul/li rules above,
   which carry the same specificity and would otherwise win on source order. */
body.lp-page .st-list,
body.lp-page .lp-list{list-style:none;padding-left:0;
  margin:0 auto var(--lp-content);border-top:1px solid var(--line)}
body.lp-page .st-list > li,
body.lp-page .lp-list > li{margin:0;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.65;color:var(--body)}
body.lp-page .st-em{color:var(--ink);font-weight:700}

/* ── numbered steps ───────────────────────────────────────────────────────
   Same hairline container as the grids; the number is a quiet token, not a
   gradient medallion. */
body.lp-page .st-steps,
body.lp-page .lp-steps{--lp-measure:var(--lp-wide);
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;margin:0 auto}
body.lp-page .st-step,
body.lp-page .lp-step{background:#fff;display:grid;grid-template-columns:34px 1fr;
  gap:20px;align-items:start;padding:24px 28px}
body.lp-page .num{width:34px;height:34px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--tint);
  color:var(--pu);font-size:14px;font-weight:800;line-height:1}
body.lp-page .st-step h3,
body.lp-page .lp-step h3{font-size:18px;font-weight:700;letter-spacing:-.018em;
  color:var(--ink);margin:5px 0 8px}
body.lp-page .st-step p,
body.lp-page .lp-step p{font-size:15.5px;line-height:1.68;color:var(--body);margin:0}

/* ── the honest note ──────────────────────────────────────────────────────
   Margin is written as a shorthand with auto sides intact: writing
   "margin:48px 0 0" here would silently kill the auto centring inherited from
   the section's > * rule. */
body.lp-page .st-quote{margin:var(--lp-sub) auto 0;padding:4px 0 4px 24px;
  border-left:2px solid var(--line)}
body.lp-page .st-quote p{font-size:16.5px;line-height:1.72;color:var(--body);margin:0 0 12px}
body.lp-page .st-quote span{display:block;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}

/* ── the price panel ──────────────────────────────────────────────────────
   The figure is the only large thing in it; everything else is support. */
body.lp-page .st-price{--lp-measure:520px;background:var(--lp-panel);
  border:1px solid var(--line);border-radius:20px;padding:34px 32px;
  margin:0 auto;text-align:center}
body.lp-page .st-price .plan{font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pu);margin-bottom:10px}
body.lp-page .st-price .amount{font-size:46px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);line-height:1}
body.lp-page .st-price .amount span{font-size:16px;font-weight:600;color:var(--mute);
  letter-spacing:0}
body.lp-page .st-price .st-list{max-width:340px;margin:24px auto;text-align:left}
body.lp-page .note{font-size:14px;line-height:1.6;color:var(--mute);
  margin:10px auto 0;text-align:center}
body.lp-page .st-price .note:first-of-type{margin-bottom:4px}
/* The note under the trial button was sitting on top of it. */
body.lp-page .st-price .st-btn + .note{margin-top:18px}

/* A trailing aside beneath a block, not a paragraph of the argument. */
body.lp-page .lp-section > .note,
body.lp-page .st-section > .note{margin-top:var(--lp-content)}

/* ── buttons and trust rows ───────────────────────────────────────────────
   Were gradient pills of varying sizes; now one primary and one quiet. */
body.lp-page .lp-cta-row,
body.lp-page .st-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-top:26px}
body.lp-page .lp-btn,
body.lp-page .st-btn{display:inline-block;background:#fff;border:1px solid var(--line);
  color:var(--ink);font-size:15.5px;font-weight:700;padding:15px 28px;border-radius:13px;
  box-shadow:none;transition:border-color .2s ease,color .2s ease}
body.lp-page .lp-btn:hover,
body.lp-page .st-btn:hover{border-color:var(--pu);color:var(--pu)}
body.lp-page .lp-btn.solid,body.lp-page .st-btn.solid,
body.lp-page .lp-cta-row .lp-btn:first-child,
body.lp-page .st-cta-row .st-btn:first-child{background:var(--grad);border-color:transparent;
  color:#fff;box-shadow:0 6px 18px rgba(102,126,234,.32)}
body.lp-page .lp-btn.solid:hover,body.lp-page .st-btn.solid:hover,
body.lp-page .lp-cta-row .lp-btn:first-child:hover,
body.lp-page .st-cta-row .st-btn:first-child:hover{color:#fff}
/* The inline trial button sits under a block, so it needs its own approach. */
body.lp-page .st-cta-line{text-align:center;margin:var(--lp-sub) auto 0}

body.lp-page .lp-trust,
body.lp-page .st-trust,
body.lp-page .uk-trust{margin-top:20px;font-size:13.5px;font-weight:600;color:var(--mute)}

/* The UK page's closing CTA. Its button carried class="btn-primary", which no
   stylesheet it loads defines — the migration moved the page onto landing.css,
   where the button is .uk-btn, and the markup was left behind. The main call to
   action on the page was rendering as a plain underlined text link with an
   inline font-size. Now the same centred close as the other two. */
body.lp-page .uk-final{text-align:center}
body.lp-page .uk-final > *{margin-left:auto;margin-right:auto}
/* a.uk-btn, not .uk-btn. The link-colour rule above is
   "body.lp-page .uk-section a" — two classes AND two elements, (0,2,2) — and it
   beats a plain "body.lp-page .uk-btn" at (0,2,1), because element selectors
   count toward specificity too. Written the obvious way, this button rendered
   with a purple label on a purple gradient: measured at rgb(102,126,234) on the
   gradient, near invisible. The other buttons on these pages escape it only by
   accident — the hero is not a .uk-section, and the rest carry .solid, which
   lifts them to (0,3,1). */
body.lp-page a.uk-btn{display:inline-block;background:var(--grad);border:1px solid transparent;
  color:#fff;font-size:15.5px;font-weight:700;padding:15px 28px;border-radius:13px;
  box-shadow:0 6px 18px rgba(102,126,234,.32);
  transition:transform .2s ease,box-shadow .2s ease}
body.lp-page a.uk-btn:hover{color:#fff;transform:translateY(-1px)}
body.lp-page .st-hero-points{display:flex;justify-content:center;flex-wrap:wrap;
  gap:10px 22px;margin-top:22px;font-size:14px;color:var(--body);list-style:none;padding:0}

/* Now the first thing on the page rather than a bare div wedged between two
   sections with no wrapper, which is how it came to run flush to the edge. */
body.lp-page .lp-breadcrumb,
body.lp-page .st-breadcrumb{font-size:13px;color:var(--mute);margin:0 auto 18px}
body.lp-page .lp-breadcrumb a,
body.lp-page .st-breadcrumb a{color:var(--mute);font-weight:600}

/* ── closing CTA ──────────────────────────────────────────────────────────
   .lp-final and .st-final were given a width but never their own typography, so
   they inherited nothing: left-aligned, tight, and the button rendered as the
   quiet variant rather than the primary action. Now the same centred close used
   on the homepage, pricing and about. */
body.lp-page .lp-final,
body.lp-page .st-final{text-align:center;padding-left:32px;padding-right:32px}
body.lp-page .lp-final > *,
body.lp-page .st-final > *{max-width:680px;margin-left:auto;margin-right:auto}
body.lp-page .lp-final h2,
body.lp-page .st-final h2{font-size:40px;font-weight:800;letter-spacing:-.03em;
  line-height:1.14;color:var(--ink);margin:0 auto 18px;text-wrap:balance}
body.lp-page .lp-final p,
body.lp-page .st-final p{font-size:17.5px;line-height:1.7;color:var(--body);
  margin:0 auto 32px;text-wrap:pretty}
/* The last action on the page is the primary one. */
body.lp-page .lp-final .lp-btn,
body.lp-page .st-final .st-btn{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(102,126,234,.32)}
body.lp-page .lp-final .lp-btn:hover,
body.lp-page .st-final .st-btn:hover{color:#fff;transform:translateY(-1px)}
body.lp-page .lp-final .lp-trust,
body.lp-page .st-final .st-trust{margin-top:18px}

/* Key facts on the UK page — a definition list, kept as one. */
body.lp-page .key-facts{background:var(--lp-panel);border:1px solid var(--line);
  border-radius:18px;padding:28px 30px;margin:0 auto var(--lp-content)}
body.lp-page .key-facts h3{margin-top:0}
body.lp-page .key-facts dt{font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);margin-top:14px}
body.lp-page .key-facts dd{font-size:16px;color:var(--ink);margin:4px 0 0}

/* ── narrow viewports ─────────────────────────────────────────────────────
   Every desktop gap is proportionally worse on a phone, so the four steps
   compress together rather than the section padding alone. */
@media (max-width:860px){
  body.lp-page{
    --lp-rel:12px;
    --lp-content:20px;
    --lp-sub:34px;
    --lp-open:52px;
    --lp-tint-open:40px;
    --lp-close:40px;
  }
  body.lp-page .uk-hero,body.lp-page .lp-hero,body.lp-page .st-hero{padding:126px 0 var(--lp-close)}
  body.lp-page .uk-hero > *,body.lp-page .lp-hero > *,body.lp-page .st-hero > *{padding:0 20px}
  body.lp-page .uk-hero h1,body.lp-page .lp-hero h1,body.lp-page .st-hero h1{font-size:31px}
  body.lp-page .uk-hero p,body.lp-page .lp-hero p,body.lp-page .st-hero p{font-size:16.5px}
  body.lp-page .uk-section h2,body.lp-page .lp-section h2,body.lp-page .st-section h2{font-size:25px}
  body.lp-page .lp-btn,body.lp-page .st-btn{width:100%;text-align:center}
  /* One column, and the hairline containers lose their outer box so the rules
     run edge to edge rather than boxing 20px-wide gutters. */
  body.lp-page .st-split{grid-template-columns:1fr;gap:24px}
  /* Squeezed to 350px the week calendar is a dark rectangle — seven columns of
     nothing anyone can read. It keeps a legible width and pans inside its own
     frame instead, so the page itself never scrolls sideways. */
  body.lp-page .st-split-media{overflow-x:auto}
  body.lp-page .st-split-media img{width:760px;max-width:none}
  body.lp-page .st-split.reverse > :first-child,
  body.lp-page .st-split.reverse > :last-child{order:0}
  body.lp-page .lp-grid,body.lp-page .st-grid,
  body.lp-page .st-steps,body.lp-page .lp-steps{grid-template-columns:1fr}
  body.lp-page .lp-card,body.lp-page .st-card{padding:22px 20px}
  body.lp-page .st-split .st-card{padding:22px 20px;border-radius:14px}
  body.lp-page .st-step,body.lp-page .lp-step{padding:20px;gap:16px;
    grid-template-columns:30px 1fr}
  body.lp-page .num{width:30px;height:30px;font-size:13px}
  body.lp-page .st-price{padding:28px 22px}
  body.lp-page .st-price .amount{font-size:40px}
  body.lp-page .st-list > li,body.lp-page .lp-list > li{font-size:15.5px;padding:12px 0}
  body.lp-page .st-quote{padding-left:18px}
  body.lp-page .lp-final h2,body.lp-page .st-final h2{font-size:27px}
  body.lp-page .lp-final,body.lp-page .st-final{padding-left:20px;padding-right:20px}
}