/* Lanepost — showcase section styles. Tokens only; loads after ombra.css + mockups.css. */
:root { --accent-soft: rgba(var(--accent-rgb), .2); }
.lp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Header-d: announcement strip + bar, links grouped right ── */
.lp-strip { display: flex; justify-content: center; align-items: center; gap: 10px; height: 36px; padding: 0 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 -1px 0 var(--line); font: 500 13px/1 var(--font); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.lp-strip a { display: inline-flex; align-items: center; gap: 4px; color: var(--text); transition: color .25s var(--ease); }
.lp-strip a:hover { color: var(--accent-ink); }
.lp-head__in { grid-template-columns: auto 1fr auto; gap: 24px; }
.lp-head__in .nav { justify-self: end; }

/* ── Hero (hero-d) ── */
.lp-hero { padding: 204px 0 120px; }
.lp-hero__grid { grid-template-columns: minmax(0, 530px) minmax(0, 510px); }
.lp-hero__plate { min-height: 640px; padding: 56px 36px; align-items: end; }
.lp-hero__plate::after { content: ""; position: absolute; inset: auto 0 0; height: 70%; background: linear-gradient(0deg, rgba(4,8,12,.55), rgba(4,8,12,0)); pointer-events: none; }
.lp-hero__win { position: relative; z-index: 2; padding: 0 !important; gap: 0 !important; }
.lp-hero__copy .t-h1 { max-width: 510px; }
.lp-hero__copy .v-hd2__stats b { font-family: var(--font-display); }

/* ── New · A Thursday: time ruler over a ridge plate ── */
.lp-ruler { height: 540px; }
.lp-ruler::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(0deg, rgba(4,8,12,.72), rgba(4,8,12,0)); pointer-events: none; }
.lp-ruler__events { position: absolute; inset: 0; z-index: 2; list-style: none; margin: 0; padding: 0; }
.lp-evt { position: absolute; left: var(--at); top: 56px; width: 232px; display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--r); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); font-size: 14px; color: var(--text-2); margin-left: 24px; }
.lp-evt--low { top: 196px; }
.lp-evt b { font: 500 16px/1.45 var(--font); color: var(--text); }
.lp-evt::after { content: ""; position: absolute; left: 18px; top: 100%; width: 1px; height: calc(540px - 56px - 64px - 100%); background: linear-gradient(180deg, var(--line-2), rgba(255,255,255,.04)); }
.lp-evt--low::after { height: calc(540px - 196px - 64px - 100%); }
.lp-evt__time { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1 var(--font); color: var(--text); }
.lp-evt__time--on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lp-ruler__scale { position: absolute; inset: auto 24px 26px; z-index: 2; display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line-2); font: 500 13px/1 var(--font); color: var(--text-2); }

/* ── Three jobs ── */
.lp-srow__top { display: grid; gap: 20px; justify-items: start; }
.lp-row-win { padding: 18px; display: grid; gap: 12px; }
.lp-row-win:has(.mk-bar) { padding: 0; gap: 0; }

/* ── New · One late delivery: timed chain ── */
.lp-relay { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 300px; gap: 24px; align-items: start; position: relative; }
.lp-relay::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 1px; background: var(--line-2); }
.lp-relay__step { position: relative; display: grid; gap: 28px; }
.lp-relay__time { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font); color: var(--text); }
.lp-relay__step:last-child .lp-relay__time::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lp-relay__step--phone { justify-items: start; }
.lp-relay__phone { position: relative; width: 100%; max-width: 300px; }
.lp-relay__toast { left: -48px; bottom: -34px; }

/* ── New · Guard rails bento ── */
.lp-rails { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; }
.lp-rail--tall { grid-row: span 2; }
.lp-rail { min-height: 0; }
.lp-rail .icard__art { padding: 8px 16px 0; }
.lp-rail .icard__art img { width: 250px; }
.lp-rail--tall .icard__art img { width: 440px; }

/* ── New · Rollout ── */
.lp-roll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; align-items: start; }
.lp-weeks { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.lp-week { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.lp-week__n { font: 500 15px/1.45 var(--font); color: var(--muted); }
.lp-week--on .lp-week__n { color: var(--text); }
.lp-week p { margin-top: 6px; font-size: 15px; color: var(--text-2); max-width: 30em; }
.lp-roll__side { position: sticky; top: 140px; }
.lp-roll__win .mk-body { gap: 16px; }

/* ── Proof ── */
.lp-who { width: 52px; height: 52px; font-size: 15px; }

/* ── New · Pricing ── */
.lp-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 16px; }
.lp-price__card { display: grid; gap: 28px; align-content: start; padding: 40px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lp-price__card .plan__name { font: 500 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.lp-price__fig { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lp-price__fig b { font: 400 76px/1 var(--font-display); letter-spacing: -.05em; color: var(--tint); }
.lp-price__fig span { font-size: 15px; color: var(--text-2); }
.lp-price__list { list-style: none; margin: 0; padding: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; border-top: 1px solid var(--line); }
.lp-price__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.lp-price__list .ic { color: var(--text); margin-top: 2px; }
.lp-price__side { display: grid; gap: 20px; align-content: start; padding: 40px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lp-price__note { font-size: 15px; color: var(--text-2); }

/* ── CTA + footer ── */
.lp-cta { padding-bottom: 0; }
.lp-foot { margin-top: 24px; }
.lp-foot__line { max-width: 560px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .lp-hero { padding-top: 172px; }
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-evt { width: 200px; }
  .lp-relay { grid-template-columns: 1fr 1fr; }
  .lp-relay__step--phone { grid-column: 1 / -1; }
  .lp-roll { grid-template-columns: 1fr; gap: 40px; }
  .lp-roll__side { position: relative; top: auto; max-width: 520px; }
  .lp-price { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lp-head__in { grid-template-columns: 1fr auto; }
  .lp-ruler { height: auto; padding: 32px 20px 72px; }
  .lp-ruler__events { position: relative; inset: auto; display: grid; gap: 12px; }
  .lp-evt, .lp-evt--low { position: relative; left: auto; top: auto; width: auto; margin-left: 0; }
  .lp-evt::after { display: none; }
  .lp-ruler::after { height: 100%; background: linear-gradient(0deg, rgba(4,8,12,.5), rgba(4,8,12,.1)); }
  .lp-relay { grid-template-columns: 1fr; }
  .lp-relay::before { display: none; }
  .lp-rails { grid-template-columns: 1fr; }
  .lp-rail--tall { grid-row: auto; }
  .lp-rail--tall .icard__art img { width: 300px; }
}
@media (max-width: 560px) {
  .lp-strip { justify-content: flex-start; font-size: 13px; }
  .lp-strip__txt { overflow: hidden; text-overflow: ellipsis; }
  .lp-hero { padding: 148px 0 88px; }
  .lp-hero__plate { min-height: 0; padding: 24px 14px; }
  .lp-week { grid-template-columns: 1fr; gap: 8px; }
  .lp-relay__toast { left: auto; right: -8px; bottom: -22px; }
  .lp-price__card, .lp-price__side { padding: 28px 22px; }
  .lp-price__list { grid-template-columns: 1fr; }
  .lp-price__fig b { font-size: 60px; }
  .lp-foot { margin-top: 72px; }
}

/* contrast: small captions inside windows over bright fog, and the footer line on the dawn photo */
.lp-row-win .mk-li small, .lp-row-win .mk-cap, .lp-row-win label, .lp-row-win dt { color: var(--text-2); }
.lp-foot__line .dim { color: var(--text-2); }
.srow__txt .t-h3 { line-height: 1.25; }
.lp-hero__copy .t-h1 { font-size: 54px; }
@media (max-width: 560px) { .lp-hero__copy .t-h1 { font-size: 40px; } }
.lp-foot::before { background: linear-gradient(180deg, rgba(4,8,12,.08), rgba(4,8,12,.22) 35%, rgba(4,8,12,.7) 62%, var(--bg) 100%); }
.mk-src span b { color: #FF9452; }
.lp-foot__line .dim { color: var(--text); }

/* 2026-10-14 (Farhan): "Max section gaps can be 150px, but that's rare. Regular website's section gaps are between
   90px-130px." Ombra's --section (176px) was applied as top AND bottom padding (282–352px between sections).
   One gap between sections, counted once; the hero gets none above it. */
:root { --sec-gap: 112px; }
main > section + section:is(.sec.sec, .v-cb.v-cb, .cta.cta, section) { padding-top: 0; margin-top: var(--sec-gap); }   /* (0,2,3): beats Ombra's .sec / .sec--tight / .v-cb.x */
main > section:not(:last-child):is(.sec.sec, .v-cb.v-cb, .cta.cta, section) { padding-bottom: 0; }
main > section:last-child:is(.sec.sec, .v-cb.v-cb, .cta.cta, section) { padding-bottom: var(--sec-gap); }
@media (max-width: 1100px) { :root { --sec-gap: 104px; } }
@media (max-width: 760px) { :root { --sec-gap: 88px; } }