/* ============================================================================
   Own Dine — landing site look (owndine.com home + Sell your food)
   ----------------------------------------------------------------------------
   PREVIEW, 2026-10-10 — LOOK-AND-FEEL §8 (ideas L1–L8). Not live.

   Loaded AFTER each page's own <style>, and only restyles: no word, link or
   form field is changed by it. Colours come from brand/tokens.css; the few
   literal ones are the night-hero surfaces, which have no token because no
   other page uses them (named once, below, in --lp-*).

   Motion rules: every animation starts from the finished, readable page;
   anyone who asks their device for less motion gets none (last block).
   ========================================================================== */

:root {
  --lp-night: #07100B;          /* the night hero's ground, green-black */
  --lp-night-2: #0C1A12;
  --lp-night-glow: #14402A;
  --lp-night-text: #C2D0C6;     /* 12.4:1 on --lp-night */
  --lp-night-subtle: #8FA196;   /* 6.9:1 on --lp-night */
  --lp-ease: cubic-bezier(.2,.8,.2,1);
  --lp-spring: cubic-bezier(.34,1.56,.64,1);
}

/* a faint grid of the square full stop, used as texture on dark grounds */
.lp-dots {
  background-image: conic-gradient(from 270deg at 2px 2px, rgb(255 255 255 / .055) 90deg, transparent 0);
  background-size: 24px 24px;
}

/* ---------------------------------------------------------------------------
   L3 — the wordmark arrives
   --------------------------------------------------------------------------- */
.wm-arrive > b { position: relative; border-bottom-color: transparent !important; }
.wm-arrive > b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.078em; height: .078em;
  background: var(--wm-line, var(--od-grey-900)); transform-origin: left;
  animation: wm-line .7s var(--lp-ease) .15s both;
}
.wm-arrive[data-on="dark"] > b::after { --wm-line: #fff; }
.wm-arrive .wm-dine { display: inline-block; animation: wm-dine .6s var(--lp-ease) .35s both; }
.wm-arrive > i { animation: wm-dot .9s .6s both; }
@keyframes wm-line { from { transform: scaleX(0); } to { transform: none; } }
@keyframes wm-dine { from { opacity: 0; transform: translateX(-.25em); } to { opacity: 1; transform: none; } }
@keyframes wm-dot {
  0% { opacity: 0; transform: translateY(-1.4em); animation-timing-function: cubic-bezier(.5,0,1,.5); }
  40% { opacity: 1; transform: translateY(0) scale(1.3, .7); animation-timing-function: ease-out; }
  60% { transform: translateY(-.3em) scale(.9, 1.15); animation-timing-function: ease-in; }
  80% { transform: translateY(0) scale(1.08, .92); }
  100% { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   L7 — arrive on scroll (classes added by landing.js, below the fold only)
   --------------------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--lp-ease), transform .8s var(--lp-ease); transition-delay: var(--rv-delay, 0ms); }
.rv.rv-in { opacity: 1; transform: none; }

/* ===========================================================================
   HOME PAGE  (body.lp-home)
   =========================================================================== */

/* L8 — the night-time front door: the bar and the hero share one dark ground */
.lp-home .topbar { background: var(--lp-night); border-bottom-color: rgb(255 255 255 / .08); position: relative; z-index: 2; }
.lp-home .topbar nav a:not(.btn) { color: var(--od-green-300); }
.lp-home .topbar .btn--ghost { color: #fff; border-color: rgb(255 255 255 / .32); background: rgb(255 255 255 / .04); }
.lp-home .topbar .btn--ghost:hover { background: rgb(255 255 255 / .1); }

.lp-home .hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(28px, 5vw, 64px) 0 clamp(36px, 6vw, 80px);
  color: #fff;
  background:
    radial-gradient(ellipse 55% 75% at 76% 46%, var(--lp-night-glow) 0%, rgb(20 64 42 / 0) 70%),
    radial-gradient(ellipse 80% 70% at 0% 110%, #0E2A1B 0%, rgb(14 42 27 / 0) 60%),
    linear-gradient(180deg, var(--lp-night) 0%, #050B07 100%);
}
.lp-home .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: conic-gradient(from 270deg at 2px 2px, rgb(255 255 255 / .05) 90deg, transparent 0);
  background-size: 24px 24px;
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 90%); mask: linear-gradient(180deg, #000 0%, transparent 90%);
}
.lp-home .hero .wrap { max-width: 76rem; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: center; }
.lp-stage { position: relative; height: clamp(420px, 44vw, 560px); }
.lp-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 52rem) {
  .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-home .lp-stage { order: -1; height: 280px; margin: -8px calc(-1 * var(--od-space-5)) 0; }
}

.lp-home .hero h1 { font-size: clamp(40px, 6.2vw, 80px); font-weight: var(--od-weight-bold); letter-spacing: -0.04em; line-height: .98; max-width: 9ch; color: #fff; }
.lp-home .hero h1 em { font-style: normal; color: var(--od-green-400); }
.lp-home .hero .lede { color: var(--lp-night-text); font-size: clamp(17px, 1.6vw, 20px); max-width: 34ch; margin-top: var(--od-space-5); }

/* Your favourites (2026-11-13) — shown only when the diner saved some (favourites.js). */
.favs[hidden] { display: none; }
.lp-home .favs { margin-top: var(--od-space-6); }
.lp-home .favs h2 { font-size: var(--od-text-base); font-weight: var(--od-weight-semibold); color: #fff; margin: 0 0 var(--od-space-2); letter-spacing: 0; }
.lp-home .favs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--od-space-2); }
.lp-home .favs a {
  display: grid; gap: 2px; min-height: 48px; padding: var(--od-space-2) var(--od-space-4);
  border: 1px solid rgb(255 255 255 / .22); border-radius: var(--od-radius-lg);
  background: rgb(255 255 255 / .06); color: #fff; text-decoration: none;
}
.lp-home .favs a:hover { border-color: var(--od-green-400); background: rgb(255 255 255 / .1); }
.lp-home .favs a:focus-visible { outline: 3px solid var(--od-green-400); outline-offset: 2px; }
.favs__name { font-weight: var(--od-weight-semibold); }
.favs__when { font-size: var(--od-text-sm); color: var(--lp-night-text); }
.favs__when:empty { display: none; }
.favs__when--now { color: var(--od-green-400); }

.lp-home .find { margin-top: var(--od-space-8); }
.lp-home .find label, .lp-home .find legend { color: #fff; }
.lp-home .find input[type="text"] {
  min-height: 54px; max-width: 16rem; padding: 0 var(--od-space-4);
  font-family: var(--od-font-mono); font-weight: var(--od-weight-semibold); font-size: 18px; letter-spacing: .06em;
  color: #fff; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .26); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); transition: border-color .2s, box-shadow .2s, background .2s;
}
.lp-home .find input[type="text"]::placeholder { color: rgb(255 255 255 / .42); }
.lp-home .find input[type="text"]:focus { outline: none; border-color: var(--od-green-400); background: rgb(255 255 255 / .1); box-shadow: 0 0 0 4px rgb(63 224 127 / .22); }
.lp-home .find .btn {
  min-height: 54px; padding: 0 var(--od-space-6); border-radius: 12px; font-size: 16px; gap: 10px;
  box-shadow: 0 10px 30px rgb(37 211 102 / .28), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .2s var(--lp-ease), background .2s, box-shadow .2s;
}
.lp-home .find .btn::after { content: ""; width: 7px; height: 7px; background: var(--od-action-text); transition: transform .3s var(--lp-spring); }
.lp-home .find .btn:hover { background: var(--od-action-hover); box-shadow: 0 14px 36px rgb(37 211 102 / .38), inset 0 1px 0 rgb(255 255 255 / .4); }
.lp-home .find .btn:hover::after { transform: translateX(3px) rotate(90deg); }
.lp-home .find .btn:active { transform: scale(.97); }
.lp-home .find .btn:focus-visible { outline: 3px solid var(--od-green-300); outline-offset: 3px; }
.lp-home .find fieldset .ticks { gap: var(--od-space-3); margin-top: var(--od-space-2); }
.lp-home .find fieldset label {
  min-height: var(--od-target-min); padding: 0 var(--od-space-4) 0 var(--od-space-3); border-radius: var(--od-radius-pill);
  border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .04); font-weight: var(--od-weight-semibold);
  transition: border-color .2s, background .2s;
}
.lp-home .find fieldset label:has(input:checked) { border-color: rgb(63 224 127 / .55); background: rgb(63 224 127 / .1); }
.lp-home .find fieldset label:has(input:focus-visible) { outline: 3px solid var(--od-green-300); outline-offset: 2px; }
.lp-home .find input[type="checkbox"] { accent-color: var(--od-green-400); }
/* Food type (2026-11-06): the same night box as the postcode, in ordinary type. */
.lp-home .find select {
  min-height: 54px; padding: 0 var(--od-space-4); font-size: 17px;
  color: #fff; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .26); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); transition: border-color .2s, box-shadow .2s, background .2s;
}
.lp-home .find select option { color: var(--od-text); background: var(--od-surface); }
.lp-home .find select:focus { outline: none; border-color: var(--od-green-400); background: rgb(255 255 255 / .1); box-shadow: 0 0 0 4px rgb(63 224 127 / .22); }
.lp-home .hero .reassure { color: var(--lp-night-subtle); }

/* the three promises, lifted off a softer page */
.lp-home .points { background: var(--od-grey-100); padding: clamp(56px, 8vw, 104px) 0; }
.lp-home .points h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: var(--od-weight-bold); letter-spacing: -0.03em; max-width: 18ch; }
.lp-home .points ul { margin-top: var(--od-space-10); gap: var(--od-space-5); }
.lp-home .points li {
  position: relative; background: var(--od-surface); border-radius: var(--od-radius-xl); padding: var(--od-space-8) var(--od-space-6) var(--od-space-6);
  box-shadow: var(--od-shadow); transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease);
}
.lp-home .points li:hover { transform: translateY(-4px); box-shadow: var(--od-shadow-lg); }
.lp-home .points li::before { content: ""; display: block; width: 14px; height: 14px; background: var(--od-green-500); margin-bottom: var(--od-space-5); box-shadow: 18px 0 0 var(--od-green-200), 36px 0 0 var(--od-green-100); }
.lp-home .points li h3 { font-size: var(--od-text-xl); letter-spacing: -0.02em; }
.lp-home .points li p { margin-top: var(--od-space-2); }

.lp-home footer { background: var(--od-grey-900); border-top: 0; padding: var(--od-space-10) 0; }
.lp-home footer p { color: var(--od-grey-400); }
.lp-home footer a { color: var(--od-green-300); }
/* The statutory company identification. Quieter than the rest of the footer -
   it has to be permanently reachable, not prominent. */
.lp-home footer .lp-company {
  margin-top: var(--od-space-3);
  font-size: var(--od-text-sm);
  color: var(--od-grey-500);
  max-width: 60ch;
}

/* ===========================================================================
   SELL YOUR FOOD  (body.lp-sell)
   =========================================================================== */
.lp-sell .hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 clamp(36px, 6vw, 72px);
  background:
    radial-gradient(ellipse 50% 70% at 82% 40%, var(--od-green-100) 0%, rgb(201 245 221 / 0) 70%),
    linear-gradient(180deg, var(--od-green-50) 0%, var(--od-surface) 100%); }
.lp-sell .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: conic-gradient(from 270deg at 2px 2px, rgb(15 90 50 / .07) 90deg, transparent 0); background-size: 24px 24px;
  -webkit-mask: radial-gradient(ellipse 60% 80% at 80% 40%, #000, transparent 75%); mask: radial-gradient(ellipse 60% 80% at 80% 40%, #000, transparent 75%);
}
.lp-sell .hero .wrap { position: relative; max-width: 1180px; }
.lp-sell .hero h1 { font-size: clamp(38px, 5.6vw, 68px); font-weight: var(--od-weight-bold); letter-spacing: -0.04em; line-height: 1.0; }
.lp-sell .hero .lp-stage { height: clamp(360px, 38vw, 480px); }
@media (max-width: 52rem) { .lp-sell .hero .lp-stage { height: 300px; margin-top: var(--od-space-6); } }

.lp-sell .section-head h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: var(--od-weight-bold); letter-spacing: -0.03em; }
.lp-sell .kicker { display: inline-flex; align-items: center; gap: 10px; }
.lp-sell .kicker::before { content: ""; width: 8px; height: 8px; background: var(--od-green-500); }
.lp-sell section.dark .kicker::before { background: var(--od-green-300); }

/* L2 — the bill, drawn, sits between the heading and the two cards */
.lp-bill { display: block; width: 100%; height: 380px; margin: 0 0 var(--od-space-8); }
@media (max-width: 40rem) { .lp-bill { height: 300px; } }
.lp-sell .card { border-radius: var(--od-radius-xl); box-shadow: var(--od-shadow); transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease); }
.lp-sell .card--us { box-shadow: 0 0 0 4px var(--od-green-50), var(--od-shadow-brand); }
.lp-sell .figure { font-size: clamp(40px, 6vw, 64px); letter-spacing: -0.05em; }

/* steps: the green rule draws in, the number sits large */
.lp-sell .step { border-top: 0; padding-top: var(--od-space-8); }
.lp-sell .step::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--od-green-200); }
.lp-sell .step::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--od-green-500); transform-origin: left; transform: scaleX(.18); transition: transform 1.1s var(--lp-ease) .2s; }
.lp-sell .step.rv-in::after, .lp-sell .step:hover::after { transform: scaleX(1); }
.lp-sell .step .n { font-size: 40px; letter-spacing: -0.04em; line-height: 1; display: block; color: var(--od-green-700); }
.lp-sell .codeline { border-radius: var(--od-radius-lg); padding: var(--od-space-4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), var(--od-shadow); }
.type-caret { display: inline-block; width: .55em; height: 1.1em; background: var(--od-green-400); vertical-align: -.2em; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* L4 — "a wet tablet on a hot Friday night": the section goes dark, the board
   becomes a tablet that straightens as it is scrolled to, steam drifts past */
.lp-sell #hub {
  position: relative; overflow: hidden; border: 0; color: #fff;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, #163524 0%, rgb(22 53 36 / 0) 70%), linear-gradient(180deg, var(--lp-night) 0%, #091510 100%);
}
.lp-sell #hub .section-head h2 { color: #fff; }
.lp-sell #hub .section-head p, .lp-sell #hub .wrap > p { color: var(--lp-night-text) !important; }
.lp-sell #hub .kicker { color: var(--od-green-300); }
.lp-tablet-stage { perspective: 1500px; position: relative; }
.lp-sell #hub .screen {
  --tilt: 0;
  position: relative; border-radius: 30px; padding: 18px; background: #050806;
  box-shadow: 0 0 0 1.5px #2C3830, inset 0 0 0 2px #19211C, 0 60px 120px rgb(0 0 0 / .55);
  transform: rotateX(calc(var(--tilt) * 24deg)) rotateZ(calc(var(--tilt) * -3deg)) scale(calc(1 - var(--tilt) * .08));
  transform-origin: 50% 100%; transition: transform .2s linear; will-change: transform;
}
.lp-sell #hub .board { background: var(--od-surface-inverse); border-radius: 16px; padding: var(--od-space-5); }
/* drops on the glass */
.lp-sell #hub .screen::after {
  content: ""; position: absolute; inset: 18px; border-radius: 16px; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / .5) 0 2px, transparent 3px),
    radial-gradient(circle at 18.6% 23.2%, rgb(255 255 255 / .14) 0 7px, transparent 8px),
    radial-gradient(circle at 63% 71%, rgb(255 255 255 / .45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 63.5% 72%, rgb(255 255 255 / .12) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 14%, rgb(255 255 255 / .4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 41% 88%, rgb(255 255 255 / .38) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 58%, rgb(255 255 255 / .35) 0 2px, transparent 3px),
    linear-gradient(115deg, rgb(255 255 255 / .09) 0%, transparent 34%);
}
.lp-steam { position: absolute; inset: auto 0 -40px 0; height: 70%; pointer-events: none; z-index: 2; }
.lp-steam i { position: absolute; bottom: 0; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgb(235 245 238 / .32), transparent 65%); filter: blur(14px); opacity: 0; animation: lp-steam 7s ease-out infinite; }
.lp-steam i:nth-child(1) { left: 6%; }
.lp-steam i:nth-child(2) { left: 30%; animation-delay: 1.6s; }
.lp-steam i:nth-child(3) { left: 55%; animation-delay: 3.1s; }
.lp-steam i:nth-child(4) { left: 78%; animation-delay: 4.6s; }
.lp-steam i:nth-child(5) { left: 44%; animation-delay: 5.8s; }
@keyframes lp-steam { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(30px, -420px) scale(2.4); } }

/* the board's late tile breathes here too, as a preview of H4 */
.lp-sell .tile { border-radius: 12px; }
.lp-sell .tile--late { animation: lp-breathe 2.4s ease-in-out infinite; }
@keyframes lp-breathe { 0%, 100% { box-shadow: 0 1px 2px rgb(0 0 0 / .24), 0 0 0 0 rgb(217 45 32 / 0); } 50% { box-shadow: 0 1px 2px rgb(0 0 0 / .24), 0 0 0 7px rgb(217 45 32 / .35); } }

/* features: the square markers */
.lp-sell .feat .mk { width: 36px; height: 36px; border-radius: 10px; background: var(--od-green-50); box-shadow: inset 0 0 0 1px var(--od-green-100); transition: transform .4s var(--lp-spring), background .3s; }
.lp-sell .feat .mk .sq { width: 10px; height: 10px; background: var(--od-green-500); transition: transform .5s var(--lp-spring); }
.lp-sell .feat:hover .mk { transform: translateY(-2px); background: var(--od-green-100); }
.lp-sell .feat:hover .mk .sq { transform: rotate(90deg) scale(1.2); }
.lp-sell .feat h3 { font-size: var(--od-text-lg); }

/* L6 — prices you can read across a room */
.lp-sell .grid-4 { isolation: isolate; }
.lp-sell .plan { border-radius: var(--od-radius-xl); box-shadow: var(--od-shadow); transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease); position: relative; }
.lp-sell .plan:hover { transform: translateY(-6px); box-shadow: var(--od-shadow-lg); }
.lp-sell .grid-4 .plan .price { font-size: clamp(44px, 4.4vw, 56px); letter-spacing: -0.05em; line-height: 1; margin-top: var(--od-space-4); }
.lp-sell .grid-4 .plan .price span { display: block; font-size: var(--od-text-sm); margin-top: 6px; letter-spacing: 0; }
.lp-sell .plan--mid { border-color: transparent; background: var(--od-surface); box-shadow: var(--od-shadow-brand); }
.lp-sell .plan--mid::before {
  /* A ring, cut out with a mask — NOT a block behind the card at z-index -1:
     the card moves (hover, arrive-on-scroll), which gives it its own stacking
     layer, and a -1 child then paints over the card's own background. */
  content: ""; position: absolute; inset: -2px; border-radius: calc(var(--od-radius-xl) + 2px); padding: 2.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background: conic-gradient(from var(--lp-spin, 0deg), var(--od-green-500), var(--od-green-200), var(--od-green-700), var(--od-green-400), var(--od-green-500));
  animation: lp-spin 5s linear infinite;
}
@property --lp-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes lp-spin { to { --lp-spin: 360deg; } }

.lp-sell .faq { transition: background .25s; border-radius: 0; }
.lp-sell .faq h3 { font-size: var(--od-text-xl); letter-spacing: -0.02em; }

/* the closing call to action, over a field of squares */
.lp-sell #start { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--od-green-700) 0%, var(--od-green-900) 100%); padding: clamp(72px, 10vw, 128px) 0; }
.lp-sell #start .lp-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.lp-sell #start h2 { font-size: clamp(32px, 4.6vw, 56px) !important; font-weight: var(--od-weight-bold); letter-spacing: -0.035em; }

/* ===========================================================================
   Less motion: still pictures, nothing moves
   =========================================================================== */
/* (:root:not([data-motion="on"]) lets the PREVIEW force motion on — see landing.js) */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) :is(.wm-arrive .wm-dine, .wm-arrive > i, .lp-steam i, .lp-sell .tile--late, .type-caret) { animation: none !important; }
  :root:not([data-motion="on"]) .wm-arrive > b::after,
  :root:not([data-motion="on"]) .lp-sell .plan--mid::before,
  :root:not([data-motion="on"]) .lp-tagline::after { animation: none !important; }
  :root:not([data-motion="on"]) .lp-steam { display: none; }
  :root:not([data-motion="on"]) .lp-sell #hub .screen { transform: none !important; }
  :root:not([data-motion="on"]) .rv { opacity: 1 !important; transform: none !important; }
  :root:not([data-motion="on"]) :is(.lp-home .points li, .lp-sell .plan, .lp-sell .card) { transition: none; }
}

/* The diner slogan (MARKETING §8b-3), above the search question. "Own" is set
   the way the wordmark sets it: bold, green, with the underscore. */
.lp-tagline {
  display: inline-block;
  font-size: clamp(19px, 2vw, 24px); font-weight: var(--od-weight-semibold); letter-spacing: -0.015em;
  color: #fff; margin: 0 0 var(--od-space-5);
  padding: 8px 16px 9px; border-radius: var(--od-radius-pill);
  background: rgb(255 255 255 / .05); border: 1px solid rgb(63 224 127 / .28);
}
.lp-tagline b { font-weight: var(--od-weight-bold); color: var(--od-green-400); border-bottom: .078em solid #fff; padding-bottom: .04em; line-height: 1; }
.lp-tagline::after { content: ""; display: inline-block; width: .3em; height: .3em; background: var(--od-green-400); vertical-align: .12em; margin-left: .35em; animation: lp-tag 2.6s ease-in-out infinite; }
@media (max-width: 52rem) {
  /* on a phone the postcode box must still be on the first screen */
  .lp-home .hero { padding-top: 8px; }
  .lp-home .lp-stage { height: 210px !important; }
  .lp-tagline { font-size: 16px; margin-bottom: var(--od-space-4); }
  .lp-home .hero h1 { font-size: 40px; }
  .lp-home .find { margin-top: var(--od-space-6); }
}
@keyframes lp-tag { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }