/* My Humdum · pre-launch site: the pages beyond the home page
   (Pricing, About us, Contact us, the legal pages) and the Pricing section on the
   home page itself.

   WHY A SEPARATE FILE. home.css is generated from the app's stylesheet by
   tools/build-home-css.mjs, and keeps only the rules index.html uses at the moment
   it is built. That tool can no longer run against today's app (its Font Awesome
   source was removed in the app's switch to Phosphor icons), so these rules are
   written here instead. Wherever the app already styles the same thing, the rule is
   the app's own, copied from core_app/app/public/style.css: the price cards (the
   landing glimpse), the struck price, and the legal reading layout. Everything else
   uses the tokens home.css already declares.

   House rules, as everywhere: no em dashes, gold never sets type on a light surface,
   nothing a visitor reads under 11px. No inline style anywhere: the server's
   Content Security Policy allows stylesheets from this folder only. */

/* ---------- phone / desktop halves (the app's lp-mob / lp-dsk) ---------- */
.pl-mob { display: none; }
@media (max-width: 640px) {
  .pl-mob { display: revert; }
  .pl-dsk { display: none; }
}

/* ---------- THE MAIN BUTTON, everywhere: cream #FBF7EF, a gold ring, dark type ----------
   home.css (the app's landing styles, generated) fills the header's "Notify me" with ink
   and the contact band's button with maroon. This site has no filled dark buttons, so
   both wear the main button here. pages.css loads last, so equal specificity wins. */
.lp .lp-join-btn,
.lp .lp-btn-accent {
  background: #FBF7EF; color: #2D1B22;
  border: 1px solid rgba(184,150,46,0.7);
  box-shadow: none;
}
.lp .lp-join-btn:hover,
.lp .lp-btn-accent:hover { background: #F6EFDF; color: #2D1B22; }

/* ---------- header: five links need a little less air on a narrow desktop ---------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .lp .lp-nav-left { gap: 32px; }
  .lp .lp-links { gap: 24px; }
  .lp .lp-links a { letter-spacing: 0.12em; }
}

/* ---------- footer: four columns, the Legal column back in ---------- */
@media (min-width: 981px) {
  .lp .pl-footer-grid { grid-template-columns: 4fr 2fr 3fr 3fr; gap: 48px; }
}
.lp .lp-footer-addr .pl-co { color: rgba(255, 255, 255, 0.82); font-weight: 600; }
.lp .pl-footer-legal { flex-wrap: wrap; }

/* ======================================================================
   PRICE CARDS: the app's landing glimpse (core_app style.css "pricing"),
   reused on the home page and, with the full feature lists, on /pricing.
   ====================================================================== */
.lp .lp-pricing { padding: 120px 0; }
.lp .lp-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.lp .lp-price-card { position: relative; display: flex; flex-direction: column; padding: 40px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--lp-line); box-shadow: 0 2px 4px rgba(26,26,26,0.03); }
.lp .lp-price-selected { border: 1.5px solid var(--lp-accent); box-shadow: 0 36px 70px -30px rgba(139,38,53,0.38); }
.lp .lp-price-selected .lp-price-name { color: var(--lp-accent); }
.lp .lp-price-name { margin: 0 0 12px; font-size: 1.6rem; font-weight: 600; }
.lp .lp-price-amt { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.6rem; font-weight: 700; color: var(--lp-ink); line-height: 1; }
.lp .lp-price-per { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--lp-muted); margin-left: 6px; }
.lp .lp-price-was { font-size: 1.3rem; font-weight: 500; color: var(--lp-muted); margin-right: 4px; }
/* THE STRUCK PRICE, the app's one look (.mh-strike): lining figures, and a thin line
   drawn across the figure at an angle, so the old price stays readable. */
.mh-strike {
  position: relative; display: inline-block; white-space: nowrap;
  text-decoration: none; font-variant-numeric: lining-nums; padding: 0 2px;
}
.mh-strike::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
  height: 1px; border-radius: 1px; background: var(--strike-line, var(--mh-accent));
  opacity: 0.85; transform: rotate(-14deg); pointer-events: none;
}
.lp .lp-price-sub { margin: 8px 0 0; font-size: 0.78rem; font-weight: 500; color: var(--lp-muted); letter-spacing: 0.01em; }
.lp .lp-price-feats { list-style: none; margin: 26px 0; padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.lp .lp-price-feats li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.92rem; color: rgba(26,26,26,0.72); }
.lp .lp-price-feats i { color: var(--lp-gold); font-size: 12px; margin-top: 4px; flex-shrink: 0; }
/* The card's button. Main buttons are cream with a gold ring (the featured card);
   the others are white with a hairline. Before launch every one of them leads to the
   email box, because nothing can be bought yet. */
.lp .lp-price-cta { display: block; text-align: center; padding: 13px; border-radius: 999px; border: 1.5px solid var(--lp-line); background: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-ink); transition: border-color 0.25s ease, background 0.25s ease; }
.lp .lp-price-cta:hover { border-color: rgba(26,26,26,0.32); }
.lp .lp-price-selected .lp-price-cta { background: #FBF7EF; color: #2D1B22; border-color: rgba(184,150,46,0.7); }
.lp .lp-price-selected .lp-price-cta:hover { background: #F6EFDF; }
.lp .lp-price-note { margin: 40px 0 0; text-align: center; font-size: 0.82rem; color: var(--lp-muted); letter-spacing: 0.02em; line-height: 1.7; }
.lp .lp-price-note a { color: var(--lp-ink); text-decoration: underline; text-underline-offset: 2px; }
.lp .lp-price-note a:hover { color: var(--lp-accent); }
.lp .lp-price-note b { color: var(--lp-ink); font-weight: 600; }

/* the Pricing page's fuller card: tagline, the two fine-print lines, the plus line */
.lp .lp-price-tagline { margin: -4px 0 22px; font-size: 0.95rem; line-height: 1.5; color: var(--lp-muted); }
.lp .lp-price-once { margin: 12px 0 0; font-size: 0.86rem; font-weight: 600; color: var(--lp-ink); }
.lp .lp-price-fine { margin: 4px 0 24px; font-size: 0.78rem; line-height: 1.55; color: var(--lp-muted); min-height: 2.4em; }
.lp .lp-price-plus { margin: 26px 0 -12px; font-size: 0.86rem; font-weight: 600; color: var(--lp-ink); }

@media (max-width: 900px) {
  .lp .lp-price-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .lp .lp-price-grid { column-gap: 16px; }
  .lp .lp-price-card { padding-left: 20px; padding-right: 20px; }
}
/* ONE ROW PER PART, ACROSS ALL THREE CARDS (the app's own subgrid). Every card has the
   same five parts in the same order, so the ticks start level whatever wraps above. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .lp .lp-price-grid { row-gap: 0; }
    .lp .lp-price-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  }
}
@media (max-width: 640px) {
  .lp .lp-pricing { padding: 64px 0 56px; }
  .lp .lp-price-grid { display: block; max-width: none; }
  .lp .lp-price-card { margin-bottom: 12px; padding: 24px 22px; }
  .lp .lp-price-amt { font-size: 2.3rem; }
  .lp .lp-price-feats { margin: 18px 0; gap: 10px; }
  .lp .lp-price-cta { padding: 14px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .lp .lp-price-fine { min-height: 0; }
}

/* ======================================================================
   THE INNER PAGES: one head, then content, on the landing's cream
   ====================================================================== */
.lp .pg { padding: 170px 0 110px; }
.lp .pg-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px); }
.lp .pg-narrow { max-width: 760px; }
.lp .pg-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.lp .pg-head h1 { margin: 14px 0 0; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
.lp .pg-head .lp-italic { color: var(--lp-accent); }
.lp .pg-lede { margin: 20px auto 0; max-width: 620px; font-size: 1.08rem; line-height: 1.65; color: var(--lp-muted); }

/* the plain-words notice: nothing is sold before launch */
.lp .pg-notice {
  max-width: 760px; margin: 0 auto 48px; padding: 18px 24px;
  border: 1px solid rgba(184,150,46,0.55); border-radius: 16px; background: #FBF7EF;
  font-size: 0.98rem; line-height: 1.6; color: var(--lp-ink); text-align: center;
}
.lp .pg-notice a { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 2px; }

.lp .pg-sec { margin-top: 72px; }
.lp .pg-sec > h2 { margin: 0 0 22px; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.15; }
.lp .pg-sec > h2 .lp-italic { color: var(--lp-accent); }
.lp .pg-text p { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.8; color: rgba(26,26,26,0.82); }
.lp .pg-text p:last-child { margin-bottom: 0; }
.lp .pg-text { margin-bottom: 24px; }
.lp .pg-text:last-child { margin-bottom: 0; }
.lp .pg-text a { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lp .pg-text a:hover { color: var(--lp-ink); }

/* white cards in a grid */
.lp .pg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.lp .pg-card { padding: 30px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--lp-line); }
.lp .pg-card :is(h3, .pg-h) { margin: 0 0 12px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-muted); }
.lp .pg-card p { margin: 0 0 8px; font-size: 1rem; line-height: 1.65; color: var(--lp-ink); }
.lp .pg-card p:last-child { margin-bottom: 0; }
.lp .pg-card .pg-big { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.lp .pg-card .pg-small { font-size: 0.9rem; color: var(--lp-muted); }
.lp .pg-card a { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.lp .pg-card a:hover { color: var(--lp-ink); }

/* a definition list for the company's registered details */
.lp .pg-facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; }
.lp .pg-facts dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-muted); padding-top: 3px; }
.lp .pg-facts dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--lp-ink); overflow-wrap: anywhere; }
.lp .pg-facts a { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 3px; }

/* a ticked list on a page (the app's checklist look) */
.lp .pg-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lp .pg-ticks li { display: flex; gap: 12px; font-size: 1rem; line-height: 1.6; color: rgba(26,26,26,0.82); }
.lp .pg-ticks b { font-weight: 600; color: var(--lp-ink); }
.lp .pg-ticks i { flex-shrink: 0; margin-top: 5px; font-size: 12px; color: var(--lp-gold); }

/* the four steps, as a numbered list */
.lp .pg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lp .pg-steps li { padding: 26px 26px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--lp-line); }
.lp .pg-steps b { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--lp-ink); }
.lp .pg-steps span { display: block; margin-top: 6px; font-size: 0.98rem; line-height: 1.6; color: var(--lp-muted); }
.lp .pg-steps em { font-style: normal; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; color: var(--lp-accent); }

/* the closing link row on a page */
.lp .pg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 64px; }
.lp .pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; background: #fff; border: 1px solid rgba(26,26,26,0.14); color: var(--lp-ink); font-size: 14px; font-weight: 600; transition: border-color 0.2s ease; }
.lp .pg-btn:hover { border-color: rgba(26,26,26,0.32); }
.lp .pg-btn-main { background: #FBF7EF; border-color: rgba(184,150,46,0.7); color: #2D1B22; }
.lp .pg-btn-main:hover { background: #F6EFDF; border-color: rgba(184,150,46,0.7); }

/* ---------- Pricing page: the promises, the upgrade, the comparison ---------- */
.lp .pp-notes { list-style: none; max-width: 760px; margin: 44px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.lp .pp-notes li { position: relative; padding-left: 20px; font-size: 0.95rem; line-height: 1.6; color: rgba(26,26,26,0.78); }
.lp .pp-notes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-gold); }
.lp .pp-upgrade { max-width: 760px; margin: 44px auto 0; padding: 26px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--lp-line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lp .pp-upgrade h2 { margin: 0; font-size: 1.6rem; font-weight: 600; }
.lp .pp-upgrade p { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--lp-muted); }
.lp .pp-upgrade .pp-amt { flex-shrink: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.4rem; font-weight: 700; color: var(--lp-ink); line-height: 1; }
.lp .pp-cmp { margin-top: 80px; }
.lp .pp-cmp > h2 { margin: 0 0 24px; text-align: center; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; }
.lp .pp-swipe { margin: -10px 0 14px; text-align: center; font-size: 0.86rem; color: var(--lp-muted); }
/* the app's scrolling-shadow table wrapper: the edge shadow shows only while more
   columns sit off to that side, so a phone reader can see the table scrolls */
.lp .pp-tw {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--lp-line); border-radius: 24px;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(26, 26, 26, 0.18), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(26, 26, 26, 0.18), transparent) 100% 0;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.lp .pp-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; }
/* position: relative keeps the visually hidden labels inside the scrolling box;
   without it they hang off the page and give the whole site a sideways scroll */
.lp .pp-table th, .lp .pp-table td { position: relative; padding: 14px 18px; border-bottom: 1px solid var(--lp-line); text-align: center; vertical-align: middle; }
.lp .pp-table thead th { background: #F1F0EC; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-ink); }
.lp .pp-table tbody th { text-align: left; font-weight: 500; color: var(--lp-ink); }
.lp .pp-table tbody tr:last-child th, .lp .pp-table tbody tr:last-child td { border-bottom: 0; }
.lp .pp-table td { color: rgba(26,26,26,0.78); }
.lp .pp-table td.yes i { color: var(--lp-gold); font-size: 13px; }
.lp .pp-table td.no svg { width: 14px; height: 14px; color: rgba(26,26,26,0.3); vertical-align: middle; }
.lp .pl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (min-width: 641px) { .lp .pp-swipe { display: none; } }

/* ---------- Contact page ---------- */
.lp .ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lp .ct-grid .ct-wide { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .lp .pg { padding: 120px 0 72px; }
  .lp .pg-head { margin-bottom: 40px; }
  .lp .pg-sec { margin-top: 52px; }
  .lp .pg-steps, .lp .ct-grid, .lp .pp-notes { grid-template-columns: minmax(0, 1fr); }
  .lp .pp-upgrade { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 22px; }
  .lp .pg-facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .lp .pg-facts dd { margin-bottom: 12px; }
  .lp .pg-card { padding: 24px 22px; }
}

/* ======================================================================
   LEGAL PAGES (/legal/*): the app's reading layout, copied rule for rule
   from core_app style.css "LEGAL PAGES" and its phone block.
   ====================================================================== */
.lp .lg-page { padding: 170px 0 110px; }
.lp .lg-wrap { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px); }
.lp .lg-head { padding-bottom: 30px; margin-bottom: 44px; border-bottom: 1px solid var(--lp-line); }
.lp .lg-title { margin: 0; font-size: clamp(2.1rem, 4.2vw, 3.1rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
.lp .lg-meta { margin: 16px 0 0; font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em; color: var(--lp-muted); }
.lp .lg-doc { font-size: 1.02rem; line-height: 1.85; color: rgba(26,26,26,0.82); }
.lp .lg-doc > :first-child { margin-top: 0; }
.lp .lg-doc h1 { margin: 64px 0 20px; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; line-height: 1.2; color: var(--lp-ink); }
.lp .lg-doc h2 { margin: 52px 0 16px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 600; line-height: 1.25; color: var(--lp-ink); }
.lp .lg-doc h3 { margin: 38px 0 12px; font-size: 1.16rem; font-weight: 700; letter-spacing: 0.01em; color: var(--lp-ink); font-family: "Plus Jakarta Sans", sans-serif; }
.lp .lg-doc p { margin: 0 0 18px; }
.lp .lg-doc strong { font-weight: 700; color: var(--lp-ink); }
.lp .lg-doc ul { margin: 0 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.lp .lg-doc li { padding-left: 4px; }
.lp .lg-doc li::marker { color: var(--lp-gold); }
.lp .lg-doc hr { margin: 44px 0; border: 0; border-top: 1px solid var(--lp-line); }
.lp .lg-doc blockquote { margin: 0 0 22px; padding: 18px 26px; border-left: 2px solid var(--lp-gold); background: #F1F0EC; border-radius: 0 14px 14px 0; }
.lp .lg-doc blockquote p:last-child { margin-bottom: 0; }
.lp .lg-doc a { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.lp .lg-doc a:hover { color: var(--lp-ink); }
.lp .lg-tw {
  margin: 0 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--lp-line); border-radius: 16px;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(26, 26, 26, 0.18), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(26, 26, 26, 0.18), transparent) 100% 0;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.lp .lg-doc table { width: 100%; border-collapse: collapse; font-size: 0.94rem; line-height: 1.6; }
.lp .lg-doc th, .lp .lg-doc td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lp-line); min-width: 150px; }
.lp .lg-doc thead th { background: #F1F0EC; font-weight: 700; color: var(--lp-ink); white-space: nowrap; }
.lp .lg-doc tbody tr:last-child td { border-bottom: 0; }
/* the app's copy protection on the document body only; links stay selectable */
.legal-body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.legal-body a, .legal-body .selectable { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
.lp .lgx-ico { width: 1em; height: 1em; flex: none; }

@media (max-width: 620px) {
  .lp .lg-page { padding: 130px 0 80px; }
  .lp .lg-wrap { padding: 0 20px; }
  .lp .lg-head { margin-bottom: 34px; }
  .lp .lg-doc { font-size: 0.98rem; line-height: 1.8; }
  .lp .lg-doc h1 { margin-top: 48px; }
  .lp .lg-doc h2 { margin-top: 40px; }
  .lp .lg-doc th, .lp .lg-doc td { padding: 12px 14px; }
}

/* the app's phone layout for a legal page (board 22_Small_pages): a solid header, a
   slim sticky bar with the name and a Contents button, a :target Contents sheet that
   needs no script, and a round back-to-top button */
@media (max-width: 640px) {
  body.lp:has(.lg-page, .pg) header.lp-header { background: rgba(250,247,241,.97); border-bottom: 1px solid rgba(26,26,26,.06); }
  /* a slimmer bar on the inner pages, as the app does; --pl-head is its measured height,
     which the legal page's sticky bar and its section jumps sit under */
  body.lp:has(.lg-page, .pg) .lp-nav { padding-top: 14px; padding-bottom: 14px; }
  body.lp { --pl-head: 69px; }
  body.lp .lg-page { padding: var(--pl-head) 0 60px; background: #F7F3EC; }
  body.lp .lgx-bar { position: sticky; top: var(--pl-head); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #FAF7F1; border-bottom: 1px solid rgba(26,26,26,.06); }
  body.lp .lgx-tt { min-width: 0; }
  body.lp .lgx-tt b { display: block; font-size: 14.5px; font-weight: 600; color: #1A1A1A; }
  body.lp .lgx-tt span { display: block; font-size: 11.5px; color: #8E8E96; }
  body.lp .lgx-jb { flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; background: #fff; border: 1px solid rgba(26,26,26,.12); color: #1A1A1A; font-size: 12.5px; font-weight: 600; text-decoration: none; }
  body.lp .lgx-jb .lgx-ico { font-size: 16px; }
  body.lp .lg-page .lg-wrap { padding: 16px 20px 0; }
  body.lp .lg-doc { font-size: 15px; line-height: 1.65; color: #27272A; }
  body.lp .lg-doc p, body.lp .lg-doc li { font-size: 15px; line-height: 1.65; }
  body.lp .lg-doc :is(h1, h2) { margin: 22px 0 8px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; font-weight: 600; line-height: 1.2; }
  body.lp .lg-doc :is(h1, h2):first-child { margin-top: 4px; }
  body.lp .lg-doc .lgx-n { color: #8E7A3E; font-weight: 600; }
  body.lp .lg-doc [id^="s-"] { scroll-margin-top: calc(var(--pl-head) + 70px); }
  body.lp .lgx-top { position: fixed; right: 16px; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 60; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid rgba(26,26,26,.1); box-shadow: 0 8px 20px -8px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; color: #1A1A1A; font-size: 20px; }
  body.lp .lgx-sheet { display: none; position: fixed; inset: 0; z-index: 420; }
  body.lp .lgx-sheet:target { display: block; }
  body.lp:has(.lgx-sheet:target) { overflow: hidden; }
  body.lp .lgx-scrim { position: absolute; inset: 0; background: rgba(20,14,16,.42); }
  body.lp .lgx-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82dvh; overflow-y: auto; padding: 10px 20px calc(30px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: #fff; }
  body.lp .lgx-grab { display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: rgba(26,26,26,.15); }
  body.lp .lgx-sh { display: flex; justify-content: space-between; align-items: center; }
  body.lp .lgx-sh h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; font-weight: 600; color: #1A1A1A; }
  body.lp .lgx-x { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid rgba(26,26,26,.08); display: flex; align-items: center; justify-content: center; color: #1A1A1A; font-size: 18px; }
  body.lp .lgx-toc { display: flex; flex-direction: column; margin-top: 8px; }
  body.lp .lgx-toc a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid rgba(26,26,26,.06); font-size: 14px; line-height: 1.35; color: #1A1A1A; text-decoration: none; }
  body.lp .lgx-toc a .n { flex: none; width: 24px; color: #8E7A3E; font-weight: 600; font-size: 13px; }
  body.lp .lgx-count { margin: 10px 0 0; font-size: 12.5px; color: #8E8E96; }
}