/* IBA Year 1 landing: the page layer on top of the live V3 CSS (assets/v3, copied from
   apps/web/app/styles/v3). LAYOUT ONLY, plus the one button override block below. Components come from
   the bank as the V3 site uses them; nothing here restyles one. */

/* ===== Button: the spaceOS button, chosen by Dima at 16:54 on 7 Oct ("this is the one!! we build this.") =====
   Copied from lab/buttons/d-spaceos-mcp.html (.sb, its .pty skin, the phone-hero version .sb--l .sb--block):
   46 px (large 56), 12 px radius, gradient btn-top to btn, inset highlight plus coloured shadow, a chevron
   after the label, full width on phone. Applied to the bank's .v3-btn while body[data-btn="spaceos"];
   ?btn=flat (body[data-btn="flat"]) shows the bank's flat pill as is, chevron hidden. */
body[data-btn="spaceos"].lp .v3-btn:not(.v3-btn--secondary):not(.v3-btn--tertiary) {
  --btn: var(--v3-anchor); --btn-top: var(--v3-l-500, #4f8a6c); --glow: color-mix(in srgb, var(--v3-anchor) 60%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 12px;
  font: 600 16px/1 var(--v3-font-body); color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, var(--btn-top), var(--btn)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px -8px var(--glow);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body[data-btn="spaceos"].lp .v3-btn:not(.v3-btn--secondary):not(.v3-btn--tertiary):hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px -10px var(--glow); }
body[data-btn="spaceos"].lp .v3-btn:not(.v3-btn--secondary):not(.v3-btn--tertiary):active { transform: translateY(1px) scale(.99); filter: brightness(.95); }
html body[data-btn="spaceos"].lp .v3-btn:not(.v3-btn--secondary):not(.v3-btn--tertiary):focus-visible { border-radius: 12px; outline: 2px solid var(--btn-top); outline-offset: 0; }
body[data-btn="spaceos"].lp .v3-btn.v3-btn--l:not(.v3-btn--secondary):not(.v3-btn--tertiary) { height: 56px; padding: 0 30px; font-size: 17px; }
body[data-btn="spaceos"].lp .v3-btn.v3-btn--s:not(.v3-btn--secondary):not(.v3-btn--tertiary) { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
body[data-btn="spaceos"].lp .v3-btn svg.lp-chev { width: 18px; height: 18px; flex: none; }
@media (max-width: 639px) { body[data-btn="spaceos"].lp .v3-btn.v3-btn--l:not(.v3-btn--secondary):not(.v3-btn--tertiary) { display: flex; width: 100%; max-width: 420px; } }
body[data-btn="flat"].lp .lp-chev { display: none; }
/* ===== end of the button override ===== */

/* The live CSS reads these two from Next's font loader; a static page names the faces directly. */
body.lp { --font-display: Guton; --font-v3-body: Inter; margin: 0; overflow-x: hidden; }
.lp img { max-width: 100%; }

/* Header: logo and the exam clock, no menu */
.lp-top__in { display: flex; align-items: center; justify-content: space-between; height: var(--v3-size-header); }
.lp-logo { height: 20px; width: auto; display: block; }

/* S1 */
.lp-s1 { padding-bottom: 24px; }
.lp-eyebrow { font-weight: 600; color: var(--v3-anchor); }

/* S2 video frame: a well card at 16:9 until the file arrives */
.lp-video { margin: 0; display: grid; gap: 10px; max-width: 880px; }
.lp-video__frame { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 0; overflow: hidden; }
.lp-video__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* S5 value stack: item and value side by side inside the offer's points */
.lp-points li { align-items: flex-start; }
.lp-point { display: grid; gap: 2px; flex: 1; min-width: 0; }
.lp-point__val { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

/* S7 grid */
.lp-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-grid .v3-quote__by { margin-bottom: 10px; }

/* Footer clearance for the phone bar */
@media (max-width: 899px) { .lp .v3-footer { padding-bottom: 110px; } }
@media (min-width: 900px) { .lp-bar { display: none; } }

/* Consent card: bottom left on laptop, above the phone bar on phones */
.lp-consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 420px; display: grid; gap: 12px; box-shadow: inset 0 0 0 1px var(--v3-line-strong), var(--v3-shadow-soft); }
.lp-consent[hidden] { display: none; }
.lp-consent .v3-card__text { margin: 0; }
@media (max-width: 899px) { .lp-consent { bottom: 92px; } }