/* ===========================================================================
   EstiMate landing v2 — hero device demo + plain-sentence sections.
   Loads on top of styles.css (tokens, fonts, .nav, .btn, footer, .disclaimer).
   The laptop is drawn: silver aluminium body, black bezel, notch, CSS keyboard.
   Only transform / opacity are animated.
   =========================================================================== */

body.lv2 { background: var(--paper); }

/* ---------------------------------------------------------------- hero ---- */
.lv2-hero {
  background:
    radial-gradient(760px 420px at 8% 0%, rgba(184,199,58,.10), transparent 60%),
    linear-gradient(#fdfefe, var(--bg));
  border-bottom: 1px solid var(--line);
}
.lv2-stage-pin {
  padding: 54px 0 78px;
  overflow-x: clip;            /* the panel and the flying photos bleed, the page does not */
}
.lv2-stage {
  position: relative;
  --rep-w: 380px;              /* the finished report, once it replaces the machine */
  --fly: 1;                    /* flight-distance multiplier */
}


.lv2-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 48px;
  align-items: center;
}
.lv2-col-text { align-self: start; padding: 14px 0 0; }
.lv2-col-text h1 {
  color: var(--navy);
  font-size: clamp(2.05rem, 3.5vw, 3rem);
  line-height: 1.06;
  max-width: 16ch;
  text-wrap: balance;
  margin: 0 0 18px;
}
.lv2-sub {
  font-size: clamp(1rem, 1.2vw, 1.09rem);
  color: var(--muted);
  max-width: 40ch;
  line-height: 1.62;
  margin: 0 0 26px;
}
/* the machine runs slightly past the content grid, the way product heroes do */
/* Two backdrops, cross-faded: one sized to the machine, one sized to the
   finished report that replaces it. The column's bottom padding reserves the
   space for both, so the stage height never changes. */
.lv2-col-device { position: relative; padding: 48px 0 360px; }
.lv2-panel {
  position: absolute; z-index: -1;
  left: -58px; right: -58px;
  border-radius: 26px;
  background:
    radial-gradient(380px 240px at 24% 0%, rgba(184,199,58,.16), transparent 62%),
    var(--navy);
  box-shadow: 0 30px 70px -40px rgba(3,29,49,.6);
}
/* ONE navy backdrop, always fully opaque: only its height is animated, from
   hugging the machine to wrapping the report. Nothing ever fades over the
   light page, so the navy can never wash out to grey. */
.lv2-panel { top: 0; height: var(--panel-a-h, calc(100% - 278px)); }
/* a third smaller than before; sits at the left of its column so the report
   can settle on the panel to its lower right */
.device { max-width: 560px; margin: 0 auto; }
/* the quiet replay, only after the sequence has run */
.lv2-replay {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  position: absolute; left: 0; right: 0; top: calc(100% + 46px);   /* under the report's caption */
  width: auto; margin: 0; padding: 4px 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  color: #8ea4b4; opacity: 0; pointer-events: none;
  transition: color .15s ease;
}
.lv2-replay svg {
  width: 1.05em; height: 1.05em; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.lv2-replay:hover { color: var(--green); }
.stage-done .lv2-replay { opacity: 1; pointer-events: auto; }
.stage-reduced .lv2-replay { display: none; }

/* ------------------------------------------------------------- the laptop -- */
/* A photographed MacBook frame (transparent PNG, body only) with our live DOM
   screen laid over the dark display area at the percentages the asset's JSON
   records. The frame scales with the column; everything inside scales with it. */
.device {
  position: relative;
  container-type: inline-size;   /* so the screen radius can track the body width */
}
.device__frame {
  display: block; position: relative; z-index: 2;
  width: 100%; height: auto;
}
.device__screen {
  position: absolute; z-index: 3;
  left: 10.672%; top: 2.136%; width: 78.633%; height: 86.587%;
  border-radius: 1.05cqi;        /* ~1% of the body width, as in the photograph */
  overflow: hidden;
  background: #0d0e11;
  isolation: isolate;
  container-type: inline-size;
}
.device__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 18%, rgba(255,255,255,0) 35%);
}
/* our own contact shadow: the body PNG ships without one */
.device__shadow {
  position: absolute; z-index: 0; left: 7%; right: 7%; bottom: -1.2%; height: 5%;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
  filter: blur(9px);
}

/* --------------------------------------------- the intake, live on screen -- */
.ui {
  position: absolute; inset: 0;
  background: #fbfcfd;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: clamp(7px, 2.5cqi, 16px);
  line-height: 1.5;
  display: flex; flex-direction: column;
}
.ui-top {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: .5em .9em; background: var(--navy-ink); color: #fff;
}
.ui-notch {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 18%; height: 62%; border-radius: 0 0 .5em .5em; background: #000;
}
.ui-logo { height: 1.55em; width: auto; display: block; }
.ui-topright { display: flex; align-items: center; gap: .55em; }
.ui-status {
  font-size: .76em; color: #cfe0ea; letter-spacing: .01em;
  white-space: nowrap; opacity: 0;
}
.ui-ring { width: 1.1em; height: 1.1em; display: block; opacity: 0; }
.ui-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ui-ring circle { fill: none; stroke-width: 3; }
.ui-ring .rbg { stroke: rgba(255,255,255,.18); }
.ui-ring .rfg { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 56.55; stroke-dashoffset: 56.55; }
.ui-dots { display: flex; gap: .3em; }
.ui-dots i { width: 1.5em; height: .28em; border-radius: 2px; background: rgba(255,255,255,.2); display: block; transition: background .18s ease; }
.ui-dots i.on { background: var(--green); }

.ui-body { flex: 1; min-height: 0; overflow: hidden; padding: .8em 1.1em .9em; display: flex; flex-direction: column; }
.ui-label { font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: .4em; }
.ui-label-2 { margin-top: .95em; }

.ui-field {
  position: relative;
  border: 1px solid var(--line); border-radius: .4em; background: #fff;
  padding: .5em .7em; min-height: 2.3em;
  font-size: .95em; color: var(--ink);
  box-shadow: 0 1px 2px rgba(3,29,49,.04);
}
.ui-typed { white-space: pre; }
.ui-caret {
  display: inline-block; width: 1px; height: 1.05em; background: var(--navy);
  vertical-align: -.18em; opacity: 0;
}
.ui-caret.blink { animation: lv2blink 1.06s steps(1, end) infinite; }
@keyframes lv2blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

.ui-ac {
  position: absolute; left: -1px; right: -1px; top: calc(100% + .25em);
  margin: 0; padding: .25em 0; list-style: none; z-index: 4;
  background: #fff; border: 1px solid var(--line); border-radius: .4em;
  box-shadow: 0 10px 24px -12px rgba(3,29,49,.4);
  opacity: 0; transform: translateY(-.3em); pointer-events: none;
}
.ui-ac li { padding: .36em .7em; font-size: .88em; color: var(--muted); }
.ui-ac li.sel { background: var(--green-p); color: var(--ink); font-weight: 600; }

.ui-counters { display: flex; gap: .55em; margin-top: .9em; }
.ui-counter { flex: 1; border: 1px solid var(--line); border-radius: .4em; background: #fff; padding: .4em .5em; text-align: center; }
.ui-counter .cl { display: block; font-size: .72em; color: var(--slate); margin-bottom: .15em; }
.ui-counter .cv { display: flex; align-items: center; justify-content: space-between; }
.ui-counter .cv b { font-weight: 500; color: var(--slate); font-size: .95em; width: 1.4em; height: 1.4em; line-height: 1.35em; border: 1px solid var(--line); border-radius: 50%; }
.ui-counter .cv em { font-style: normal; font-weight: 700; font-size: 1.05em; color: var(--navy); }
.ui-counter.tapped { border-color: var(--green-d); }

.ui-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4em; }
.ui-slot { aspect-ratio: 4 / 3; border-radius: .25em; background: #eef2f5; border: 1px dashed #d6dee5; }
.ui-tag {
  margin-top: .3em; font-size: .6em; line-height: 1.25; color: var(--slate);
  opacity: 0; text-align: center;
}
.ui-tag b { color: var(--navy); font-weight: 700; }

.ui-bar { height: .3em; border-radius: 2px; background: #e8edf1; margin-top: .7em; overflow: hidden; }
.ui-bar i { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left center; }

.ui-foot { margin-top: auto; padding-top: .7em; display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.ui-hint { font-size: .78em; color: var(--slate); }
.ui-go { background: var(--green); color: var(--navy-ink); font-size: .8em; font-weight: 700; padding: .5em 1.1em; border-radius: .35em; }

/* the six photos open into this while they are read */
.ui-big {
  position: absolute; z-index: 4; left: 0; right: 0; top: 2.35em; bottom: 0;
  background: #fbfcfd;
  padding: .5em .9em .7em;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .45em 1em; align-content: center;
  font-size: 1.22em;              /* the review view has room for bigger type */
  opacity: 0; pointer-events: none;
}
/* the viewfinder: four corner brackets that snap on around one photo */
.ui-shotwrap {
  position: relative;
  background: #e8edf1; border-radius: .2em;   /* the slot a photo lands in */
}
.ui-frame { position: absolute; inset: -4%; opacity: 0; pointer-events: none; z-index: 2; }
.ui-frame i { position: absolute; width: 24%; height: 30%; border: 2px solid var(--green); }
.ui-frame i:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.ui-frame i:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.ui-frame i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.ui-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
/* the tick that stays once a photo has been read */
.ui-tick {
  position: absolute; top: 5%; right: 5%; z-index: 3;
  width: 1.35em; height: 1.35em; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 1px 4px rgba(3,29,49,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.ui-tick svg {
  width: .85em; height: .85em; display: block;
  fill: none; stroke: var(--navy-ink); stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ui-bigshot {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 3; border-radius: .2em;
  background: #eef2f5 center / cover no-repeat;
  opacity: 0;            /* the flying photos hand over to these once landed */
  box-shadow: 0 1px 3px rgba(3,29,49,.16);
}
.ui-bigtag {
  margin-top: .28em; font-size: .62em; line-height: 1.2; color: var(--slate);
  text-align: center; opacity: 0;
}
.ui-bigtag b { color: var(--navy); font-weight: 700; }

/* the delivery moment, drawn on the screen */
.ui-dim { position: absolute; inset: 0; z-index: 6; background: rgba(3,29,49,.55); opacity: 0; pointer-events: none; }
.ui-mail {
  position: absolute; z-index: 7; top: 2.9em; right: .9em; width: 57.5%;
  background: #fff; border-radius: .5em;
  padding: .7em .85em;
  font-size: 1.12em;
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.6),
              0 6px 14px -6px rgba(0,0,0,.35),
              0 0 0 1px rgba(3,29,49,.08);
  opacity: 0;
}
.um-top { display: flex; align-items: baseline; justify-content: space-between; }
.um-from { font-size: .8em; font-weight: 700; color: var(--navy); }
.um-now { font-size: .68em; color: var(--slate); }
.um-sub { font-size: .78em; color: var(--ink); margin-top: .2em; line-height: 1.35; }
.um-att { font-size: .7em; color: var(--green-d); font-weight: 600; margin-top: .3em; }

/* ------------------------------------------------- the photos and the scan - */
/* The container is a full-stage positioning layer (children are placed by JS in
   stage coordinates). It must NOT share the photo rule: sharing it left the
   container at opacity 0, which hid every flight while the photos themselves
   animated to opacity 1 underneath it (23 Sep bug). */
.flyers { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.flyer {
  position: absolute; width: 10px; height: 10px;   /* set by JS from the slots */
  object-fit: cover; border-radius: 3px;
  box-shadow: 0 8px 18px -8px rgba(3,29,49,.55);
  opacity: 0; will-change: transform;
}


/* ---------------------------------- the report that replaces the machine -- */
.repwrap {
  position: absolute; z-index: 5; top: var(--rep-top, 78px);
  left: 50%; margin-left: calc(var(--rep-w) / -2);   /* centred on the column */
  width: var(--rep-w); height: calc(var(--rep-w) * 1287 / 909);
}
.fanpage, .report {
  position: absolute; top: 0; left: 0; width: 100%;
  aspect-ratio: 909 / 1287;
}
.fanpage {
  object-fit: cover; object-position: top center;
  border-radius: 5px; opacity: 0;
  box-shadow: 0 12px 30px -16px rgba(3,29,49,.6);
  z-index: 1; will-change: transform;
}
.report {
  z-index: 3; border-radius: 6px; overflow: hidden;
  background: var(--navy-ink);
  box-shadow: 0 40px 80px -28px rgba(3,29,49,.7), 0 6px 14px -6px rgba(3,29,49,.4);
  opacity: 0; will-change: transform;
}
.report-stack { position: absolute; inset: 0; perspective: 1400px; }
.rpage {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transform-origin: left center; backface-visibility: hidden;
  will-change: transform;
}
.rpage:nth-child(1) { z-index: 4; }
.rpage:nth-child(2) { z-index: 3; }
.rpage:nth-child(3) { z-index: 2; }
.rpage:nth-child(4) { z-index: 1; }
.stage-done .report { cursor: pointer; }
.rnav {
  position: absolute; z-index: 6; bottom: 12px;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(3,29,49,.72); color: #fff;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, background .15s ease;
}
.rnav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rnav-prev { left: 12px; }
.rnav-next { right: 12px; }
.stage-done .rnav { opacity: 1; pointer-events: auto; }
.stage-done .rnav:hover { background: rgba(3,29,49,.92); }
.rnav[disabled] { opacity: .28 !important; pointer-events: none; cursor: default; }
.stage-done .report:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.rep-cap {
  position: absolute; left: 0; right: 0; top: calc(100% + 18px);
  margin: 0; text-align: center;
  font-size: .86rem; color: #9fb3c2; letter-spacing: .01em;
  opacity: 0;
}

/* ------------------------------------------------------------- sections --- */
/* Below the hero: dark bands and light bands alternating, each section built
   around one real thing from the sample report. Uneven lengths on one grid. */

.lv2-inbox { background: var(--paper); padding: 96px 0 88px; }
.lv2-inbox-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 72px; align-items: center;
}
.lv2-inbox-copy h2 { color: var(--navy); font-size: clamp(1.8rem, 2.6vw, 2.5rem); margin: 0 0 24px; }
.lv2-inbox-copy p { font-size: 1.06rem; line-height: 1.75; color: #2b3a46; margin: 0 0 1.2em; }
.lv2-kicker {
  margin: 26px 0 0 !important; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-weight: 600; color: var(--navy) !important;
}

/* two real pages, one leaning on the other */
.lv2-pages { position: relative; margin: 0; padding: 26px 0 0; }
.lv2-pages .pg { border-radius: 6px; background: #fff; }
/* the sales page upright and legible, the reasoning page tucked behind it */
.lv2-pages .pg-front {
  position: relative; z-index: 2; display: block;
  width: 84%; margin-left: 4%;
  box-shadow: 0 40px 70px -30px rgba(3,29,49,.55), 0 2px 8px rgba(3,29,49,.14);
}
.lv2-pages .pg-back {
  position: absolute; z-index: 1; top: 0; right: 0;
  width: 72%; transform: rotate(6deg);
  box-shadow: 0 24px 46px -26px rgba(3,29,49,.45);
}
.lv2-pages figcaption {
  margin-top: 20px; font-size: .84rem; color: var(--slate);
  letter-spacing: .02em;
}
.lv2-mark {
  position: absolute; left: 6%; bottom: 52px; z-index: 3;
  background: var(--navy); color: #e6ecf1;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px;
}

/* the dark evidence band */
.lv2-band {
  background:
    radial-gradient(760px 420px at 80% 0%, rgba(184,199,58,.12), transparent 62%),
    var(--navy);
  color: #fff; padding: 92px 0 96px;
}
.lv2-band-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.lv2-band h2 {
  color: #fff; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.1;
  margin: 0 0 20px; text-wrap: balance;
}
.lv2-band p { color: #b6c5d1; font-size: 1.05rem; line-height: 1.72; margin: 0; max-width: 46ch; }
.lv2-table { margin: 0; text-align: center; }
/* A deterministic window onto one block of a page: the page is 909x1287, so a
   top offset of N% of the page height is -N * 1.4158% of the container width.
   Nothing is ever cut mid-row. */
.lv2-crop { overflow: hidden; border-radius: 8px; background: #fff; }
.lv2-crop img { width: 100%; display: block; }
.lv2-crop-range { aspect-ratio: 1 / .62; box-shadow: 0 26px 54px -26px rgba(3,29,49,.45); }
.lv2-crop-range img { margin-top: -5.7%; }         /* from 4% of the page */
/* the whole side-by-side page, nothing clipped: no crop box, natural aspect */
.lv2-fullpage {
  display: block; width: min(520px, 100%); height: auto;
  object-fit: contain; margin: 0 auto;
  border-radius: 8px; background: #fff;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.lv2-table figcaption,
.lv2-detail figcaption {
  margin-top: 14px; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: #8ca2b2;
}

/* what a free estimate misses: two columns, one dark, one light */
.lv2-compare { background: #fff; padding: 92px 0 88px; border-bottom: 1px solid var(--line); }
.lv2-compare h2 {
  color: var(--navy); font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  margin: 0 0 40px; max-width: 22ch; text-wrap: balance;
}
.lv2-compare-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.lv2-col { border-radius: 14px; padding: 34px 32px 30px; }
.lv2-col h3 {
  font-family: "Inter", sans-serif; font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 22px;
}
.lv2-col ul { list-style: none; margin: 0; padding: 0; }
.lv2-col li {
  padding: 15px 0 15px 30px; position: relative;
  font-size: 1.02rem; line-height: 1.5;
}
.lv2-col li + li { border-top: 1px solid rgba(255,255,255,.1); }
.lv2-col-light li + li { border-top-color: var(--line); }
.lv2-col li::before {
  position: absolute; left: 0; top: 15px;
  font-size: 1.05rem; line-height: 1.5;
}
.lv2-col-dark {
  background: var(--navy); color: #c3d0da;
  box-shadow: 0 26px 54px -30px rgba(3,29,49,.5);
}
.lv2-col-dark h3 { color: #8ca2b2; }
.lv2-col-dark li::before { content: "\2014"; color: #6f8496; }
.lv2-col-light {
  background: var(--green-p); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(184,199,58,.45);
}
.lv2-col-light h3 { color: var(--green-d); }
.lv2-col-light li { font-weight: 550; }
.lv2-col-light li::before { content: "\2713"; color: var(--green-d); font-weight: 700; }
.lv2-compare-note {
  margin: 34px 0 0; font-size: 1.02rem; color: var(--muted);
}

/* how it's made */
.lv2-made { background: var(--paper); padding: 84px 0 88px; }
.lv2-made-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: 64px; align-items: center;
}
.lv2-made h2 { color: var(--navy); font-size: clamp(1.6rem, 2.2vw, 2.1rem); margin: 0 0 18px; }
.lv2-made p { font-size: 1.06rem; line-height: 1.78; color: #2b3a46; margin: 0; max-width: 54ch; }
.lv2-detail { margin: 0; }

.lv2-detail figcaption { color: var(--slate); }

/* the price card */
.lv2-price { background: var(--paper); padding: 0 0 96px; }
.lv2-price-card {
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(184,199,58,.16), transparent 60%),
    var(--navy-ink);
  border-radius: 18px; color: #fff;
  padding: 56px 60px;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 48px; align-items: center;
  box-shadow: 0 40px 80px -40px rgba(3,29,49,.6);
}
.lv2-amount {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 600;
  font-size: clamp(2.6rem, 3.6vw, 3.9rem); line-height: 1.02; color: var(--green);
  letter-spacing: -.02em; overflow-wrap: anywhere;
}
.lv2-plabel { color: #cdd9e2; font-size: 1rem; margin-top: 14px; max-width: 26ch; }
.lv2-price-right p { color: #b6c5d1; font-size: 1.05rem; line-height: 1.7; margin: 0 0 26px; max-width: 46ch; }

/* ------------------------------------------------------------- phone ------ */
@media (max-width: 900px) {
  .lv2-stage-pin { padding: 30px 0 60px; }
  .lv2-stage { --rep-w: 300px; --fly: .34; }
  .lv2-grid { grid-template-columns: 1fr; gap: 26px; }
  .lv2-col-text { align-self: auto; padding: 6px 0 0; }
  .device { max-width: none; margin: 0; }
  .lv2-col-text h1 { max-width: 20ch; }
  .lv2-col-device {
    margin-right: 0;
    background:
      radial-gradient(360px 220px at 20% 0%, rgba(184,199,58,.15), transparent 60%),
      var(--navy);
    background: none;                 /* the navy is panel-a now, so it can
                                         hug the machine while the column
                                         reserves the report's space */
    margin-inline: -10px; padding: 16px 8px 430px;
  }
  .lv2-panel { display: block; left: -8px; right: -8px; border-radius: 16px; }
    /* the photographed frame eats ~21% of the column, so the screen is tighter:
     claw the vertical back so the intake still fits inside it */
  .ui-body { padding: .7em .8em .75em; }
  .ui-counters { margin-top: .7em; }
  .ui-label-2 { margin-top: .7em; }
  .ui-bar { margin-top: .5em; }
  .ui-foot { padding-top: .5em; }
  .device__screen { border-radius: 1.2cqi; }
  .device__shadow { filter: blur(6px); }
  .rep-cap { font-size: .8rem; top: calc(100% + 12px); }
  .report-mark { font-size: 7px; padding: 2px 5px; letter-spacing: .06em; }
  .lv2-replay { margin-top: 14px; text-align: center; width: 100%; }
  .ui-big { font-size: 1.15em; gap: .35em .6em; padding: .4em .5em .5em; }

  /* below the hero: every band becomes one column */
  .lv2-inbox { padding: 54px 0 48px; }
  .lv2-inbox-grid, .lv2-band-grid, .lv2-made-grid, .lv2-compare-grid { grid-template-columns: 1fr; gap: 34px; }
  .lv2-inbox-copy h2 { font-size: 1.75rem; }
  .lv2-inbox-copy p, .lv2-made p, .lv2-price-right p { font-size: 1rem; }
  .lv2-pages { padding: 4px 0 28px; }
  .lv2-pages .pg-front { width: 88%; margin-left: 0; }
  .lv2-pages .pg-back { width: 62%; }
  .lv2-mark { left: 2%; }
  .lv2-band { padding: 54px 0 58px; }
  .lv2-band h2 { font-size: 1.8rem; }
  .lv2-band p { max-width: none; }
  .lv2-fullpage { width: 100%; }
  .lv2-compare { padding: 52px 0 54px; }
  .lv2-compare h2 { font-size: 1.7rem; margin-bottom: 26px; }
  .lv2-compare-grid { gap: 18px; }
  .lv2-col { padding: 26px 22px 22px; border-radius: 12px; }
  .lv2-col li { font-size: .98rem; padding: 13px 0 13px 26px; }
  .lv2-compare-note { margin-top: 26px; font-size: .98rem; }
  .lv2-made { padding: 52px 0 56px; }
  .lv2-made p { max-width: none; }
  .lv2-price { padding: 0 0 58px; }
  .lv2-price-card { grid-template-columns: 1fr; padding: 32px 24px; gap: 22px; border-radius: 14px; }
  .lv2-amount { font-size: 2.8rem; }
  .lv2-plabel { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ui-caret.blink { animation: none; opacity: 0; }
}