/* Protection (/protection), Oct 21, 2026.
 *
 * Origin's Estate Planning page (useorigin.com/products/estate-planning),
 * section by section, in Lessen's brand. Every size here was measured on
 * Origin's live page at 1440 x 900 and 390 x 844 (Origin study, Oct 21,
 * 2026, "B - other pages/estate"), then built on the shared system in
 * os.css. Only Estate's own geometry lives here: its 120 / 60 intro, the
 * 30px rule cards, the plans panel on a colour field (now one price card),
 * the 124px Download title. Everything is scoped to .pt-page and
 * uses the os.css tokens; no new colours.
 */

/* ---------------------------------------------------------------- shared bits */
.pt-page .pt-sub { max-width: 460px; margin: 24px auto 0; font: 300 16px/24px var(--os-sans); color: var(--os-fg-2); }
.pt-page .pt-head { max-width: 980px; margin: 0 auto 120px; text-align: center; }
.pt-page .pt-head--flush { margin-bottom: 0; }
.pt-page .pt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- 1. hero
   The shared hero (Spending's, with the Les bar): 900 tall, copy centred.
   Estate's has no bar; the brief asks for Les speaking first here. */

/* ---------------------------------------------------------------- 2. Your rules, your decision
   Estate's intro: 918 tall at 1440 (padding 120 / 32 / 60), the h2 in two
   lines, the 460px text 24 below, the cards 120 below that. Cards 448 x 338,
   radius 30, padding 96 / 40, the label 11px and the sentence 24 / 36.
   Text only, as Origin's. */
.pt-page .pt-intro { position: relative; padding: 120px 32px 60px; }
.pt-page .pt-pillar { justify-content: flex-start; min-height: 338px; padding: 96px 40px 40px; gap: 0; }
.pt-page .pt-pillar .os-eyebrow { color: var(--os-fg-2); }
.pt-page .pt-pillar .os-p-xl { margin-top: 16px; font-weight: 400; }

/* ---------------------------------------------------------------- 3. one membership, one card
   Kene, Oct 21, 2026: "condense that into one all-encompassing card". The
   plans panel keeps its colour field and title; the three price cards and
   the "what the membership includes" table became the one price card
   (assets/lr/pricing/price-card.css), shared with /pricing. */
.pt-page .pt-plans-sec { padding: 0 32px 24px; }
.pt-page .pt-plans { position: relative; isolation: isolate; overflow: hidden; padding: 140px 60px 120px; border-radius: 24px; text-align: center;
  background: #2E7D5B url(/assets/lr/protection/plans-field.webp) center / cover no-repeat; }
.pt-page .pt-plans-in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.pt-page .pt-plans .os-h1 { max-width: 980px; margin: 0 auto; text-shadow: 0 2px 30px rgba(9, 40, 27, .18); }
.pt-page .pt-plans .pt-sub { margin-top: 25px; color: rgba(255, 255, 255, .84); }
.pt-page .pt-plans .lpc { margin-top: 56px; }
/* ---------------------------------------------------------------- 5. important moments + the moving row
   Estate: padding 120 / 32, the h2 in two lines, the text 24 below; a
   1400px hairline, the row of 400 x 230 cards 24 below it, 48 under it. */
.pt-page .pt-moments-head { padding: 120px 32px; }
.pt-page .pt-moments-rule { margin-bottom: 24px; }
.pt-page .pt-moments { padding-bottom: 48px; }
.pt-page .pt-moments .os-moment figcaption { text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }

/* ---------------------------------------------------------------- 6. recommended reading
   Estate: padding 24 / 32, the 48px h2, three 448 x 390 cards 73 below it
   (radius 30, padding 96 / 40): the label, the title 24 / 36, READ MORE. */
.pt-page .pt-reading { padding: 24px 32px; text-align: center; }
.pt-page .pt-reading-title { margin: 0 auto 73px; max-width: 980px; }
.pt-page .pt-read { min-height: 390px; padding: 96px 40px 40px; gap: 0; }
.pt-page .pt-read .os-eyebrow { color: var(--os-fg-2); }
.pt-page .pt-read-t { margin-top: 16px; font: 300 24px/36px var(--os-sans); letter-spacing: -.01em; color: #FAFAFA; }
.pt-page .pt-read .os-btn { margin-top: 24px; }

/* ---------------------------------------------------------------- 7. the self-check card
   Estate's assessment band: 1376 x 500, the shared glowing card. */
.pt-page .pt-glow-sec { padding: 0 32px; }

/* ---------------------------------------------------------------- 8. answers (Estate's FAQ)
   A 578-tall 4% panel (padding 60): the 48px title left in a 592 column;
   questions right, 24 / 36, each a 4% row (radius 8, padding 16, 14 apart),
   the + 16px in from the right edge and 22 from the top. */
.pt-page .pt-faq-sec { padding: 24px 32px; }
.pt-page .pt-faq .os-faq-q button { padding: 16px 64px 16px 16px; font: 400 24px/36px var(--os-sans); letter-spacing: -.01em; }
.pt-page .pt-faq .os-plus { top: 22px; right: 16px; }
.pt-page .pt-faq .os-faq-a { padding: 0 64px 18px 16px; margin-top: -2px; }
.pt-page .pt-faq .os-faq-a p { font: 300 16px/24px var(--os-sans); color: var(--os-fg-2); }
.pt-page .pt-faq .os-faq-a p + p { margin-top: 12px; }
.pt-page .pt-faq .os-faq-item { transition: background-color .2s var(--os-io); }
.pt-page .pt-faq .os-faq-item:hover { background: rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------------- Download Lessen (Estate's band)
   1064 tall at 1440 x 900: the 124px title at 17vh, the laurels 24 below,
   the store line 24 below them, Get started 15 below, the phone 48 below,
   its foot on the band's bottom edge. */
.pt-page .pt-download { min-height: 0; }
.pt-page .pt-download .os-h1 { font-size: clamp(40px, 7.92vw + 9.1px, 124px); line-height: 1; }
.pt-page .pt-download .os-laurels { margin-top: 24px; }
.pt-page .pt-dl-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; margin-top: 24px; font: 300 14px/19px var(--os-sans); color: rgba(250, 250, 250, .9); }
.pt-page .pt-dl-line .os-tag { line-height: 19px; }
.pt-page .pt-download .os-btn { margin-top: 15px; }
.pt-page .pt-download .os-download-phone { margin-top: 48px; }

/* ---------------------------------------------------------------- 1024 and down */
@media (max-width: 1199px) {
  .pt-page .pt-plans { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 991px) {
  .pt-page .pt-read { padding: 72px 32px 32px; }
}

/* ---------------------------------------------------------------- phones (Origin's 390 layout) */
@media (max-width: 767px) {
  .pt-page .pt-head { margin-bottom: 70px; }
  .pt-page .pt-sub { max-width: none; margin-top: 24px; }

  /* 2: padding 70 / 16 / 60; the cards 358 x 320, radius 24, padding 30, content centred */
  .pt-page .pt-intro { padding: 70px 16px 60px; }
  .pt-page .pt-pillar { justify-content: center; min-height: 320px; padding: 30px; border-radius: 24px; }
  .pt-page .pt-pillar .os-p-xl { font-size: 18px; line-height: 27px; }

  /* 3: the panel 358 wide, the one price card inside it */
  .pt-page .pt-plans-sec { padding: 0 16px 24px; }
  .pt-page .pt-plans { padding: 85px 12px 12px; background-image: url(/assets/lr/protection/plans-field-tall.webp); }
  .pt-page .pt-plans .lpc { margin-top: 40px; }
  .pt-page .pt-plans .pt-sub { margin-top: 16px; }


  /* 5: padding 70 / 16; cards 300 x 170 */
  .pt-page .pt-moments-head { padding: 70px 16px; }
  .pt-page .pt-moments-rule { margin-left: 0; margin-right: 0; }

  /* 6: the 38px h2, cards 72 below it, 358 x 320, padding 30, centred */
  .pt-page .pt-reading { padding: 24px 16px; }
  .pt-page .pt-reading-title { margin-bottom: 72px; }
  .pt-page .pt-read { justify-content: center; min-height: 320px; padding: 30px; border-radius: 24px; }
  .pt-page .pt-read-t { font-size: 18px; line-height: 27px; }

  /* 7: the glowing card, padding 70 / 24 */
  .pt-page .pt-glow-sec { padding: 0 16px; }

  /* 8: the panel 358 wide, padding 26 / 20, questions 16 / 24 */
  .pt-page .pt-faq-sec { padding: 24px 16px; }
  .pt-page .pt-faq .os-faq-in { gap: 48px; }
  .pt-page .pt-faq .os-faq-q button { padding: 16px 60px 16px 20px; font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .pt-page .pt-faq .os-plus { top: 20px; right: 20px; }
  .pt-page .pt-faq .os-faq-a { padding: 0 20px 18px 20px; }
  .pt-page .pt-faq .os-faq-a p { font-size: 14px; line-height: 21px; }

  /* Download: 844 tall, the title 214 from the top, the line straight under the laurels, Get started 16 below */
  .pt-page .pt-download { min-height: 844px; padding-top: 214px; }
  .pt-page .pt-download .os-h1 { line-height: 40px; }
  .pt-page .pt-download .os-laurels { margin-top: 24px; }
  .pt-page .pt-dl-line { margin-top: 6px; font-size: 13px; }
  .pt-page .pt-download .os-btn { margin-top: 16px; }
  .pt-page .pt-download .os-download-phone { margin-top: 48px; }
}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion: reduce) {
}

/* ---------------------------------------------------------------- hero film (Oct 21, 2026)
   "The guardrails": rails draw along a path, four checkpoints light the
   protection plan's steps in the row at the film's foot. The film fades
   its own foot to ink, so the shared fade is eased to keep that row legible,
   and the hero keeps room under the copy for it on short screens. */
.pt-page .os-art.pt-film { background-image: url(/assets/lr/protection/hero.webp); }
@media (max-aspect-ratio: 1/1) { .pt-page .os-art.pt-film { background-image: url(/assets/lr/protection/hero-tall.webp); } }
.pt-page .os-art.pt-film::after { background: linear-gradient(180deg, rgba(12, 14, 13, 0) 70%, rgba(12, 14, 13, .25)); }
.pt-page .pt-hero { min-height: max(100svh, 820px); }
@media (max-width: 767px) { .pt-page .pt-hero { min-height: max(100svh, 760px); } }
/* the Download phone: a protection screen */
.pt-page .pt-ph { display: flex; flex-direction: column; gap: 10px; padding: 64px 18px 18px; text-align: left; font-family: var(--os-sans); }
.pt-page .pt-ph-t { font: 500 11px/1 var(--os-sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pt-page .pt-ph-les { padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, #164832, #3F936E 70%, #87CCAA); color: #fff; font: 400 13px/18px var(--os-sans); }
.pt-page .pt-ph-les b { display: block; margin-bottom: 4px; font: 500 10px/1 var(--os-sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.pt-page .pt-ph-les em { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 8px; background: #fff; color: #0C0E0D; font: 500 11px/1 var(--os-sans); font-style: normal; }
.pt-page .pt-ph-row { display: flex; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; font: 400 13px/17px var(--os-sans); }
.pt-page .pt-ph-row span { color: #A8EDC4; white-space: nowrap; }