/* Task 123 -- Glenn's walkthrough of 18 Oct: the landing page.

   A LAYER, not an edit: `landing-v6.css` is the approved design and its sha256
   is a test (`tests/test_landing_round_six.py`), so the look is overridden here
   and only where the walkthrough named it. The colours are the approved file's
   own hex values, because the landing page is a fixed light document (the theme
   script runs on it, but the design does not have a dark face).

   1. Every main section is one screen tall and its content is centred, so the
      first screen holds the whole first section at any laptop height.
   2. The pricing cards are in one view at 1366x768 (the gap above them halved).
   3. The send / "yes" animations are triggered at 30% visible and run once, in
      2.2 s; `landing-fit.js` adds `.is-playing`.
   4. Every other oversized gap comes down to the 48 px section step. */

:root{--lp-header:77px}

/* 1. Task 129c: a section is as tall as what it holds, never a screenful of
   empty navy. The hero keeps one screen less the header (`min-h-` of
   `calc(100svh - 4rem)`) with 4rem of padding; every other section is 4rem top
   and bottom, 5rem from md up (`py-16 md:py-20`), so "After you hit send" and
   the closing call to action have no empty band above or below them.
   `min-height` and not `height`: a section whose content is taller (the
   insurance pair is) still grows and still scrolls. */
.lp-fit{box-sizing:border-box;min-height:0}
/* As a flex item `.in`'s `margin:0 auto` stops it stretching, so it shrank to
   its content (1000 px) and the two-column sections wrapped. Restore the
   design's 1200 px container.
   Task 123b: `width:100%` is a CONTENT-box width, so the 24 px (16 px on a
   phone) padding sat outside it and every `.in` ran 32-48 px past the window --
   at 375 the hero paragraph's last words were cut off. The box is the border
   box, and its cap is the design's 1200 px of content plus the 48 px of
   padding, so wide screens keep the approved 1200 px column. */
.lp-fit > .in{width:100%;box-sizing:border-box;max-width:1248px}

/* The hero: one screen less the header, its own 4rem above and below (the
   section carries no padding of its own, so nothing doubles up). */
.lp-hero{padding:0!important;min-height:calc(100svh - 4rem)}
.lp-hero > .in{padding-top:4rem!important;padding-bottom:4rem!important}
.lp-hero-copy{gap:16px!important}
/* The mock is a drawing, not a fixed 560 px panel: on a laptop it shrinks to
   its own content so the hero fits under a 768 px screen. */
.lp-mock{min-height:0!important}

/* The badge (Task 123b) rests on the phone's top edge, not over it. It used to
   sit at `left:-96px`, 96 px into the frame and 83 px into the white panel,
   right on top of the mock's "Review and send" button. Now its bottom edge
   stops 6 px inside the frame's 13 px black border, so it never reaches the
   white panel (which starts 13 px down) and cannot cover a button or a word
   inside the mock. The frame is centred in `.lp-phone` at every width, so the
   horizontal position is measured from that centre: the frame's half width
   (168 px) plus the badge's own 251 px, less 7 px, puts its right edge 7 px
   into the frame's left edge; a stacked tablet clamps to the 16 px gutter
   instead. `width:max-content` keeps it on one line. */
.lp-phone .lp-chipL{left:max(16px,calc(50% - 412px))!important;right:auto!important;
  top:auto!important;bottom:calc(100% - 6px)!important;width:max-content!important}

/* 4. Task 129c: 4rem above and below every band (5rem from md up), so no
   section carries a screen of empty navy. The closer keeps room for its wave
   (160 px) under the last line. */
.lp-marquee{padding:4rem 0!important}
.lp-insurance{padding:4rem 0!important}
.lp-features{padding:4rem 0!important}
.lp-pricing{padding:4rem 0!important}
.lp-journey{padding:4rem 0!important}
@media (min-width:768px){
  .lp-marquee,.lp-insurance,.lp-features,.lp-pricing,.lp-journey{padding:5rem 0!important}
}
.lp-closing{padding:0!important}
.lp-closing > .in{padding-top:4rem!important;padding-bottom:11rem!important}
.lp-features .fg{margin-top:32px}

/* 2. Pricing: half the gap above the cards, and a compact card, so at
   1366x768 the three cards are whole when the section is at the top. */
.lp-pricing > .in.tg{gap:8px!important}
.lp-plans{margin-top:24px!important}
.lp-pricing .plan{padding:24px;gap:12px}
.lp-pricing .price{font-size:52px}
.lp-pricing .plan ul{font-size:15px;gap:8px}

/* 3. The send / "yes" animations, on the screen that shows them.

   At rest every element is in its FINISHED state -- the strike through "0 ft",
   the highlighted line, the new figures, the code, the stamp, the filled bar,
   the three notices. That is what a still picture, a no-JavaScript visitor and
   a reduced-motion visitor see, and it is the first frame: nothing waits on an
   asset (the textures are 8 KB SVGs, preloaded). `landing-fit.js` adds
   `.is-playing` when 30% of the section is visible, and these keyframes then
   play ONCE over 2.2 s, ending exactly where the rest state was. */
.lp-insurance .ins-hl{background:#FFF1CF}
.lp-insurance .ins-strike{width:100%}
.lp-insurance .ins-new,.lp-insurance .ins-code{opacity:1}
.lp-insurance .ins-sent{opacity:1;transform:scale(1) rotate(-8deg)}
.lp-insurance .stp{background:#1B3550;color:#fff}
.lp-journey .lp-fill{width:100%}
.lp-journey .nt0,.lp-journey .nt1,.lp-journey .nt2{opacity:1}
.lp-journey .st0,.lp-journey .st1,.lp-journey .st2,.lp-journey .st3{opacity:1}

.lp-insurance:not(.is-playing) .ins-cycle *,
.lp-journey:not(.is-playing) .st0,
.lp-journey:not(.is-playing) .st1,
.lp-journey:not(.is-playing) .st2,
.lp-journey:not(.is-playing) .st3,
.lp-journey:not(.is-playing) .nt0,
.lp-journey:not(.is-playing) .nt1,
.lp-journey:not(.is-playing) .nt2,
.lp-journey:not(.is-playing) .lp-fill{animation:none!important}

/* The design's own names, at the design's own colours, compressed to 2.2 s and
   ending on the rest state (the design's cycles ended on a blank frame). */
@keyframes hl{0%{background:transparent}25%,100%{background:#FFF1CF}}
@keyframes strike{0%{width:0}30%,100%{width:100%}}
@keyframes newv{0%{opacity:.3}30%,100%{opacity:1}}
@keyframes codein{0%{opacity:.3;transform:translateY(6px)}35%,100%{opacity:1;transform:none}}
@keyframes press{0%,34%{transform:none;box-shadow:0 2px 0 #8F6A00}
  42%{transform:scale(.96);box-shadow:0 0 0 #8F6A00}
  50%,100%{transform:none;box-shadow:0 2px 0 #8F6A00}}
@keyframes sent{0%,50%{opacity:0;transform:scale(1.8) rotate(-14deg)}
  62%,100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes s1{0%{background:#FFFFFF;color:#4B5160}22%,100%{background:#1B3550;color:#fff}}
@keyframes s2{0%,18%{background:#FFFFFF;color:#4B5160}44%,100%{background:#1B3550;color:#fff}}
@keyframes s3{0%,40%{background:#FFFFFF;color:#4B5160}66%,100%{background:#1B3550;color:#fff}}
@keyframes s4{0%,62%{background:#FFFFFF;color:#4B5160}88%,100%{background:#1B3550;color:#fff}}
@keyframes fill{0%{width:0}90%,100%{width:100%}}
@keyframes st0{0%{opacity:.35;transform:translateY(6px)}15%,100%{opacity:1;transform:none}}
@keyframes st1{0%,20%{opacity:.35;transform:translateY(6px)}35%,100%{opacity:1;transform:none}}
@keyframes st2{0%,35%{opacity:.35;transform:translateY(6px)}50%,100%{opacity:1;transform:none}}
@keyframes st3{0%,50%{opacity:.35;transform:translateY(6px)}65%,100%{opacity:1;transform:none}}
@keyframes nt0{0%{opacity:.4;transform:translateX(-10px)}20%,100%{opacity:1;transform:none}}
@keyframes nt1{0%,30%{opacity:.4;transform:translateX(-10px)}50%,100%{opacity:1;transform:none}}
@keyframes nt2{0%,45%{opacity:.4;transform:translateX(-10px)}65%,100%{opacity:1;transform:none}}

.lp-insurance.is-playing .ins-cycle *,
.lp-journey.is-playing .st0,
.lp-journey.is-playing .st1,
.lp-journey.is-playing .st2,
.lp-journey.is-playing .st3,
.lp-journey.is-playing .nt0,
.lp-journey.is-playing .nt1,
.lp-journey.is-playing .nt2,
.lp-journey.is-playing .lp-fill{
  animation-duration:2.2s!important;
  animation-iteration-count:1!important;
  animation-fill-mode:both!important}

/* Phone: the header is 64 px + its line, the mock is the visitor's own device
   (a phone inside a phone), and the first section is the copy, whole. Task
   129c: the same 4rem above and below as every other width. */
@media (max-width:767px){
  :root{--lp-header:65px}
  .lp-hero > .in{padding-top:4rem!important;padding-bottom:4rem!important;gap:24px!important}
  .lp-hero-copy{gap:16px!important}
  .lp-phone{display:none!important}
  .lp-marquee{padding:4rem 0!important}
  .lp-journey > .in{gap:32px!important}
  .lp-closing > .in{padding-top:4rem!important;padding-bottom:7.5rem!important;gap:16px!important}
  .lp-closing .bigwave{height:120px!important}
  .lp-closing .disp{font-size:clamp(34px,10.5vw,52px)!important}
  /* The legal footnote reads left, under the copyright, not as a right-aligned
     block squeezed beside it. */
  .lp-legal{display:block!important}
  .lp-legal > span{display:block;margin-top:8px;max-width:none!important;text-align:left!important}
}

/* Task 129c: the giant "clavoz" outline at the bottom of the footer is shown
   whole at any width (it used to run off the glass at 375) and never hangs
   below the footer's last pixel. */
.lp-wordmark{font-size:clamp(64px,28vw,260px)!important;line-height:.9!important;
  margin:24px 0 0!important;padding-bottom:8px}

.lp-pricing .plan .btn{min-height:48px;font-size:16px}

/* Task 128c item 6: the hero phone's own corner. The "Signed 4:12 pm" card used
   to hang 84 px past the phone container's right edge; it now rests on the
   frame's bottom-right corner and stays inside the container at every width. */
.lp-phone .lp-chipR{right:0!important;bottom:-18px!important}

/* The phone mock's first frame is not blank: four priced lines are already on
   the sheet, and only the fifth draws in. */
.lp-mock .ln0,.lp-mock .ln1,.lp-mock .ln2,.lp-mock .ln3{
  animation:none!important;opacity:1!important;transform:none!important}

/* Task 129b: on a phone the letterhead mock's "To: Bluebonnet Mutual / Claim
   04-77812-A" drops under the company name instead of squeezing it into three
   lines -- the name takes the first row beside the logo, the addressee the
   second, left-aligned under the name (past the 50 px logo and its 16 px gap). */
@media (max-width:639px){
  .lp-letterhead{flex-wrap:wrap!important;row-gap:8px!important}
  .lp-letterhead-to{flex:1 0 100%!important;text-align:left!important;padding-left:66px}
}

/* The "SENT TO ADJUSTER" stamp sits over the letterhead's top-right corner on a
   laptop and no longer touches the AMOUNT column header. On a phone the
   letterhead is narrow and the stamp covers its mock header, so it is hidden. */
@media (max-width:639px){
  .ins-sent{display:none!important}
}

/* Task 153: the landing page's display face is Barlow Semi Condensed -- its
   headings, plan names and big prices -- while body copy stays Public Sans and
   the app's own headings stay Space Grotesk (`tokens.css`, untouched). The
   face is self-hosted in `fonts.css`, and `landing-v6.css` is still the
   approved design, byte for byte, so this layer is what changes it. Tracking is
   0: Barlow Semi Condensed is already narrow, and the design's -0.035em closed
   it up. */
.plan-name, .lp-cond, .disp, .fc h3, .price{
  font-family:'Barlow Semi Condensed', 'Space Grotesk', sans-serif;
  letter-spacing:0}

/* Money never drifts: the plan prices, the line totals in the mocks and every
   money figure carry tabular numerals, so a column of cents lines up. */
.price, .tab{font-variant-numeric:tabular-nums}
.money{font-variant-numeric:tabular-nums}

/* The hero headline is about 12% larger than the design's 88px, and the phone
   grows with it (36px at 375, where the design's own clamp starts at 32px).
   "Nail the quote." still fits on its line of the two with no sideways scroll. */
.lp-hero h1{font-size:98px!important}
@media (max-width:767px){
  .lp-hero h1{font-size:clamp(36px, 10.75vw, 58px)!important}
}