/* 2026-10-19 home page redesign (templates/home.html, static/home.js). Light by default, in the site's cream; the hero
   band takes the exact beige of Todi's portrait so the picture sits without a frame. Dark mode is the brand teal, with
   the same portrait framed on it. */

/* Karantina (display) and Assistant (text), served from /static/fonts (SIL Open Font License, see the LICENSE files there). */
@font-face { font-family: "Karantina"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/karantina-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Karantina"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/karantina-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/assistant-hebrew-400-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/assistant-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/assistant-hebrew-600-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/assistant-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/assistant-hebrew-800-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/assistant-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.lp {
  --lp-page: #FBF7EF;
  --lp-band: #E7D2BA;
  --lp-band-text: #173C40;
  --lp-band-muted: #5A5A4E;
  --lp-heading: #173C40;
  --lp-text: #1E2A29;
  --lp-muted: #66787C;
  --lp-teal: #0E8A82;
  --lp-gold: #D9A441;
  --lp-gold-deep: #B9842A;
  --lp-gold-hot: #FFF4D6;
  --lp-new: #E9A23A;
  --lp-new-hot: #E0821C;
  --lp-glow: #F4A531;
  --lp-glow-a: .62;
  --lp-glow-add: 0;
  --lp-surface: #FFFFFF;
  --lp-surface-2: #F3EDE1;
  --lp-rule: #E6E1D4;
  --lp-land: #0E8A82;
  --lp-land-a: .2;
  --lp-dot-old: #0E8A82;
  --lp-dot-old-a: .34;
  --lp-city: #4D5B58;
  --lp-own: #DCF2D0;
  --lp-own-text: #1E2A29;
  --lp-link: #2563C9;
  --lp-h1: #173C40;
  background: var(--lp-page);
  color: var(--lp-text);
  font-family: "Assistant", "Heebo", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
:root[data-theme="dark"] .lp {
  --lp-page: #0F1715;
  --lp-band: #163C3F;
  --lp-band-text: #F4F0E4;
  --lp-band-muted: rgba(244, 240, 228, .74);
  --lp-heading: #E9F4F1;
  --lp-text: #EEF3F1;
  --lp-muted: #9DB2AD;
  --lp-teal: #2BBCAE;
  --lp-gold: #EAB54D;
  --lp-gold-deep: #D9A441;
  --lp-gold-hot: #FFF0C2;
  --lp-new: #F5C45A;
  --lp-new-hot: #FFE9B0;
  --lp-glow: #E9A33A;
  --lp-glow-a: .85;
  --lp-glow-add: 1;
  --lp-surface: #182422;
  --lp-surface-2: #1C2725;
  --lp-rule: #2B3937;
  --lp-land: #7DB8AD;
  --lp-land-a: .3;
  --lp-dot-old: #7DB8AD;
  --lp-dot-old-a: .4;
  --lp-city: rgba(244, 240, 228, .7);
  --lp-own: #2B5278;
  --lp-own-text: #FFFFFF;
  --lp-link: #7DB3FF;
  --lp-h1: #EAB54D;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp {
    --lp-page: #0F1715;
    --lp-band: #163C3F;
    --lp-band-text: #F4F0E4;
    --lp-band-muted: rgba(244, 240, 228, .74);
    --lp-heading: #E9F4F1;
    --lp-text: #EEF3F1;
    --lp-muted: #9DB2AD;
    --lp-teal: #2BBCAE;
    --lp-gold: #EAB54D;
    --lp-gold-deep: #D9A441;
    --lp-gold-hot: #FFF0C2;
    --lp-new: #F5C45A;
    --lp-new-hot: #FFE9B0;
    --lp-glow: #E9A33A;
    --lp-glow-a: .85;
    --lp-glow-add: 1;
    --lp-surface: #182422;
    --lp-surface-2: #1C2725;
    --lp-rule: #2B3937;
    --lp-land: #7DB8AD;
    --lp-land-a: .3;
    --lp-dot-old: #7DB8AD;
    --lp-dot-old-a: .4;
    --lp-city: rgba(244, 240, 228, .7);
    --lp-own: #2B5278;
    --lp-own-text: #FFFFFF;
    --lp-link: #7DB3FF;
    --lp-h1: #EAB54D;
  }
}

/* the page runs edge to edge: no centred column and no ambient colour blobs behind it */
main#main-content:has(> .lp) { max-width: none; padding: 0; }
body:has(.lp) .site-ambient { display: none; }

.lp a { color: inherit; }
.lp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.lp :focus-visible { outline: 3px solid var(--lp-teal); outline-offset: 3px; }

/* ---------- hero ---------- */
.lp-hero { background: var(--lp-band); color: var(--lp-band-text); overflow: hidden; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: 24px; }
.lp-hero-copy { padding: 64px 0 76px; align-self: center; }
.lp h1 { font-family: "Karantina", "Rubik", sans-serif; font-weight: 700; color: var(--lp-h1); margin: 0; font-size: clamp(92px, 12vw, 172px); line-height: .8; }
.lp-lede { max-width: 30ch; margin: 28px 0 30px; font-size: 21px; color: var(--lp-band-muted); }
.lp-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.lp-btn { display: inline-block; text-decoration: none; font-weight: 800; font-size: 19px; padding: 16px 26px; border-radius: 10px; background: var(--lp-gold); color: #173C40 !important; }
.lp-btn:hover { background: var(--lp-gold-deep); }
.lp-textlink { font-weight: 600; text-underline-offset: 5px; }
.lp-fine { margin: 18px 0 0; font-size: 15px; color: var(--lp-band-muted); }

.lp-todi { position: relative; justify-self: start; width: 100%; max-width: 440px; }
.lp-portrait {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* 2026-10-21: a cut-out version on the green was tried and dropped (owner: it looked cut out and blurry; the source
   picture is only 640px wide). The dark theme keeps the framed card.
   2026-10-22 (owner: "the whole site moves up or down when switching dark/light"): the card used to get its breathing
   room from margins, which made the dark page 80px taller (30px on phones). It is scaled down instead - a transform
   takes no room - so both themes have exactly the same layout.
   Later the same day (owner: "now it's too small"): no shrinking either - the card is exactly the light picture's size
   and place, only framed. */
:root[data-theme="dark"] .lp-portrait { -webkit-mask-image: none; mask-image: none; border-radius: 22px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-portrait { -webkit-mask-image: none; mask-image: none; border-radius: 22px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
}

/* one phone notification at a time: it drops in from the top, stays, and slides back up for the next one */
.lp-notif {
  /* 2026-10-21 (owner: on a computer it sat on Todi's face): on wide screens it sits on the cape above the picture's title, centred and
     inside its width, so it never covers the face or reaches the text. Phones put it above the crown (max-width: 860px). */
  position: absolute; bottom: 21%; inset-inline: 0; margin-inline: auto; width: min(300px, 84%);
  background: #fff; color: #1E2A29; border-radius: 18px; padding: 11px 14px;
  box-shadow: 0 14px 34px rgba(23, 60, 64, .22); display: grid; grid-template-columns: 38px 1fr; gap: 0 10px;
}
.lp-notif[hidden] { display: none; }
.lp-notif img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; grid-row: span 3; }
.lp-notif-who { display: flex; justify-content: space-between; font-size: 13px; color: #66787C; }
.lp-notif-who b { color: #1E2A29; font-size: 14px; }
.lp-notif-what { font-weight: 800; font-size: 16px; line-height: 1.3; }
.lp-notif-detail { font-size: 15px; color: #66787C; }
.lp-notif-what, .lp-notif-detail { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* one line each, so the card's height never changes */

/* ---------- live map ---------- */
.lp-live { padding: 84px 0 90px; }
.lp-live[hidden] { display: none; }
.lp-live-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start;
  grid-template-areas: "head map" "feed map" "mycity map"; grid-template-rows: auto auto 1fr;
}
.lp-live-head { grid-area: head; }
.lp-live-feed { grid-area: feed; }
.lp-live-grid .lp-map { grid-area: map; }
.lp-live-grid .lp-mycity { grid-area: mycity; }
.lp-live h2 { font-weight: 600; font-size: clamp(27px, 3.4vw, 40px); line-height: 1.3; margin: 0 0 18px; max-width: 18ch; color: var(--lp-heading); }
.lp-live h2 b { display: inline-block; text-align: start; font-family: "Karantina", "Rubik", sans-serif; font-weight: 700; color: var(--lp-gold-deep); font-size: 1.85em; line-height: .8; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .lp-live h2 b { color: var(--lp-gold); }
.lp-legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; color: var(--lp-muted); margin: 0 0 30px; }
.lp-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 8px; vertical-align: 1px; }
.lp-legend .lp-new::before { background: var(--lp-new); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-glow) 35%, transparent), 0 0 10px var(--lp-glow); }
.lp-legend .lp-old::before { background: var(--lp-dot-old); opacity: .7; }

.lp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 360px; }
.lp-feed li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--lp-surface); border: 1px solid var(--lp-rule); font-size: 16px; }
.lp-feed li b { font-weight: 800; color: var(--lp-heading); }
.lp-feed li span { color: var(--lp-muted); white-space: nowrap; }
.lp-feed li.fresh { border-color: var(--lp-gold); box-shadow: 0 0 0 3px rgba(217, 164, 65, .22); }
.lp-feed-note { margin: 16px 0 0; font-size: 14px; color: var(--lp-muted); }
/* 2026-10-22 (owner): your city - how many came in, and when the last one came in (home.js cityCheck). Not .lp-city: that is the town names on the map. */
.lp-mycity { margin-top: 28px; max-width: 360px; display: grid; gap: 10px; }
.lp-last { margin: 0; font-size: 15px; color: var(--lp-muted); display: flex; align-items: center; gap: 8px; }
.lp-last::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-gold); box-shadow: 0 0 0 4px rgba(217, 164, 65, .22); }
.lp-mycity-label { font-weight: 800; font-size: 18px; color: var(--lp-heading); margin-top: 6px; }
.lp-mycity-in { font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--lp-rule); background: var(--lp-surface); color: var(--lp-heading); width: 100%; box-sizing: border-box; }
.lp-mycity-in:focus { outline: 2px solid var(--lp-gold); outline-offset: 1px; }
.lp-mycity-out { margin: 0; font-size: 16px; color: var(--lp-heading); min-height: 1.4em; }
.lp-mycity-out:empty { min-height: 0; }
.lp-mycity-go { justify-self: start; font-size: 17px; padding: 12px 20px; }
.lp-mycity-go[hidden] { display: none; }

.lp-map { position: relative; justify-self: center; width: 100%; max-width: 340px; }
.lp-map canvas { display: block; width: 100%; }
.lp-map-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.lp-map.lp-on .lp-map-layer { opacity: 1; }
.lp-city {
  position: absolute; transform: translate(calc(-100% - 10px), -50%); white-space: nowrap;
  font: 600 14px/1 "Assistant", sans-serif; color: var(--lp-city);
  text-shadow: 0 0 3px var(--lp-page), 0 0 3px var(--lp-page), 0 0 6px var(--lp-page);
}
.lp-city.e { transform: translate(10px, -50%); }
.lp-spark {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: 0;
  background: radial-gradient(circle, #FFFFFF 0 16%, var(--lp-gold-hot) 34%, var(--lp-new) 60%, transparent 72%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
.lp-ring { position: absolute; display: block; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--lp-gold-deep); }
.lp-ring[hidden] { display: none; }
:root[data-theme="dark"] .lp-ring { border-color: var(--lp-gold-hot); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-ring { border-color: var(--lp-gold-hot); } }

/* ---------- how it works ---------- */
.lp-paper { padding: 76px 20px 40px; }
.lp-big { font-family: "Karantina", "Rubik", sans-serif; font-weight: 700; font-size: clamp(54px, 8vw, 88px); line-height: .9; margin: 0 0 34px; color: var(--lp-heading); }
.lp-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.lp-how-text p { margin: 0 0 18px; font-size: 19px; line-height: 1.6; color: var(--lp-muted); max-width: 46ch; }
.lp-how-text b { color: var(--lp-heading); font-weight: 800; }

.lp-phone { background: var(--lp-surface-2); border: 1px solid var(--lp-rule); border-radius: 26px; overflow: hidden; max-width: 380px; justify-self: center; width: 100%; }
.lp-phone-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--lp-surface); border-bottom: 1px solid var(--lp-rule); }
.lp-phone-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.lp-phone-head b { display: block; color: var(--lp-heading); line-height: 1.2; }
.lp-phone-head span { font-size: 13px; color: var(--lp-muted); }
.lp-phone-body { padding: 16px 14px; min-height: 484px; display: flex; flex-direction: column; gap: 10px; transition: opacity .35s; }
.lp-phone-body.fading { opacity: 0; }
.lp-bubble { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 16px; line-height: 1.45; background: var(--lp-surface); color: var(--lp-text); }
.lp-bubble.lp-own { align-self: flex-start; background: var(--lp-own); color: var(--lp-own-text); border-start-end-radius: 4px; min-height: 44px; }
.lp-bubble.lp-bot { align-self: flex-end; border-start-start-radius: 4px; }
.lp-bubble[hidden] { display: none; }
.lp-caret { display: inline-block; width: 2px; height: 1.1em; background: currentColor; vertical-align: -3px; margin-inline-start: 1px; animation: lp-blink 1s steps(1) infinite; }
@keyframes lp-blink { 50% { opacity: 0; } }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lp-chips span { border: 1px solid var(--lp-teal); color: var(--lp-teal); border-radius: 999px; padding: 2px 12px; font-size: 14px; font-weight: 600; }
/* the alert is the bot's real Telegram message: its lines, then its three buttons underneath */
.lp-alert { align-self: flex-end; width: 94%; display: grid; gap: 4px; }
.lp-alert[hidden] { display: none; }
.lp-alert .lp-bubble { max-width: none; border-start-start-radius: 4px; }
.lp-tg p { margin: 0; font-size: 15px; line-height: 1.55; }
.lp-tg .lp-tg-features { margin-top: 10px; }
.lp-tg-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.lp-tg-buttons span {
  text-align: center; font-size: 13px; font-weight: 600; padding: 7px 4px; border-radius: 10px;
  background: var(--lp-surface); color: var(--lp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-alert-link { color: var(--lp-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- prices, questions, end ---------- */
.lp-prices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.lp-prices p { margin: 0 0 14px; max-width: 40ch; }
.lp-plans { margin: 0; display: grid; grid-template-columns: 1fr auto auto; font-size: 20px; }
.lp-plans dt, .lp-plans dd { padding: 14px 0; border-bottom: 1px solid var(--lp-rule); margin: 0; }
.lp-plans dt { color: var(--lp-heading); font-weight: 600; }
.lp-plans dd { font-weight: 800; text-align: left; color: var(--lp-heading); }
.lp-plans dd.lp-per { font-weight: 400; color: var(--lp-muted); font-size: 15px; padding-inline-start: 18px; align-self: center; }
.lp-said-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.lp-said figure { margin: 0; padding: 22px 24px; background: var(--lp-surface); border: 1px solid var(--lp-rule); border-radius: 18px; }
.lp-said blockquote { margin: 0; font-size: 18px; line-height: 1.6; color: var(--lp-text); }
.lp-said figcaption { margin-top: 12px; font-weight: 800; color: var(--lp-teal); }
.lp-founder { max-width: 760px; margin-inline: auto; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }
.lp-founder > div { grid-column: 1 / -1; }
.lp-founder-photo + div { grid-column: auto; }
.lp-founder-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid var(--lp-surface); box-shadow: 0 8px 24px rgba(23, 60, 64, .15); }
.lp-founder p { margin: 0 0 14px; font-size: 18px; line-height: 1.7; color: var(--lp-text); max-width: 60ch; }
.lp-founder a { color: var(--lp-teal); font-weight: 700; }
.lp-founder-sign { font-weight: 800; color: var(--lp-heading); }
@media (max-width: 640px) {
  .lp-founder { grid-template-columns: 1fr; gap: 18px; }
  .lp-founder-photo { width: 120px; height: 120px; }
}
.lp-faq { max-width: 760px; margin-inline: auto; }
.lp-faq details { padding: 16px 0; border-bottom: 1px solid var(--lp-rule); }
.lp-faq summary { cursor: pointer; font-weight: 800; font-size: 20px; list-style: none; color: var(--lp-heading); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq p { margin: 10px 0 0; color: var(--lp-muted); max-width: 60ch; }
.lp-end { background: var(--lp-band); color: var(--lp-band-text); margin-top: 60px; }
.lp-end-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 44px 20px; }
.lp-end-inner div { display: flex; align-items: center; gap: 18px; }
.lp-end-inner img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.lp-end h2 { font-family: "Karantina", "Rubik", sans-serif; font-weight: 700; font-size: clamp(48px, 7vw, 76px); line-height: .9; margin: 0; color: var(--lp-h1); }

/* ---------- motion (off for reduced motion and for the accessibility menu's "stop motion") ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-no-motion) .lp-notif { transition: transform .55s cubic-bezier(.2, .9, .25, 1.08), opacity .45s; }
  html:not(.a11y-no-motion) .lp-notif.out { transform: translateY(-46px) scale(.96); opacity: 0; transition-timing-function: cubic-bezier(.5, 0, .75, 0), ease-in; }
  html:not(.a11y-no-motion) .lp-map-layer { transition: opacity .6s ease-out 1.1s; }
  html:not(.a11y-no-motion) .lp-map.lp-on .lp-spark { animation: lp-glint 3.4s ease-in-out var(--td) infinite; }
  html:not(.a11y-no-motion) .lp-ring.go { animation: lp-ping 1.5s ease-out 2 both; }
  html:not(.a11y-no-motion) .lp-feed li.fresh { animation: lp-drop .45s ease-out; }
  html:not(.a11y-no-motion) .lp-chips span { animation: lp-pop .3s ease-out both; }
  html:not(.a11y-no-motion) .lp-bubble.arrive, html:not(.a11y-no-motion) .lp-alert.arrive { animation: lp-drop .4s ease-out; }
}
@keyframes lp-glint { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(.4) rotate(90deg); opacity: 0; } }
@keyframes lp-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.8); opacity: 0; } }
@keyframes lp-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes lp-pop { from { transform: scale(.6); opacity: 0; } }

@media (max-width: 860px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .lp-hero-copy { padding: 32px 0 16px; }
  .lp-lede { font-size: 19px; margin: 22px 0 26px; }
  /* 2026-10-20 (owner): on a phone the notification sat on Todi's chest, the middle of the picture. It now drops in
     at the top, over the plain backdrop above the crown, the way a phone's own notifications come down. */
  .lp-todi { justify-self: center; max-width: 360px; padding-top: 82px; }
  .lp-notif { top: 0; bottom: auto; inset-inline: 0; margin-inline: auto; width: min(300px, 86%); }
  .lp-live { padding: 60px 0 64px; }
  .lp-live-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 14px; grid-template-areas: "head head" "feed map" "mycity mycity"; grid-template-rows: auto; }
  .lp-mycity { max-width: none; }
  .lp-live-grid .lp-map { max-width: none; }
  .lp-city { font-size: 12px; transform: translate(calc(-100% - 7px), -50%); }
  .lp-city.e { transform: translate(7px, -50%); }
  .lp-feed { max-width: none; }
  .lp-feed li { flex-direction: column; gap: 0; padding: 10px 12px; font-size: 15px; }
  .lp-how, .lp-prices { grid-template-columns: 1fr; gap: 30px; }
  .lp-paper { padding: 58px 20px 24px; }
}