/* The learn-more template (design_handoff_learn_more_and_kit, Part 2), on top of the homepage's home.css: the byline,
   the H1 and lead, groups on a 260px | 1fr grid under a 1px rule, item cards, the "Show me" lens, the seasons, straight
   answers, the small callsign band and the More row. Real tokens; dark comes from cloudbase.css. */
.lm-head { padding-top: 72px; padding-bottom: 40px; }
.lm-by { display: flex; align-items: center; gap: 14px; }
.lm-by img { width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--line); object-fit: cover; display: block; }
.lm-h1 { font-family: var(--serif); font-weight: 600; font-size: 52px; line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin: 24px 0 18px; max-width: 18ch; }
.lm-lead { font-size: 20px; line-height: 1.7; margin: 0; max-width: 56ch; }
.lm-lens { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.lm-lens .hm3-lbl { margin-right: 6px; }
.lm-lens-b { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 0 14px; min-height: 36px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--ink-body); cursor: pointer; }
.lm-lens-b[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent-line); color: var(--ink); }
.lm-lens-b:focus-visible, .lm a:focus-visible, .lm button:focus-visible, .lm summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.lm-groups { padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
.lm-grp { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding-top: 30px; border-top: 1px solid var(--line); }
.lm-grp[hidden], .lm-item[hidden] { display: none; }
.lm-h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.15; color: var(--ink); margin: 0 0 8px; }
.lm-grp-sub { font-size: 15px; line-height: 1.65; color: var(--ink-quiet); margin: 0; }
.lm-grp-sub.lm-body { color: var(--ink-body); line-height: 1.7; }
.lm-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.lm-item { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
a.lm-item:hover { border-color: var(--line-strong); color: inherit; }
.lm-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lm-item-n { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); }
.lm-tag { font-size: 10px; white-space: nowrap; }
.lm-tag-ok { color: var(--ok); } .lm-tag-ink { color: var(--ink); } .lm-tag-warn { color: var(--warn); }
.lm-item-l { display: block; font-size: 15px; line-height: 1.6; margin-top: 6px; }
.lm-item-h { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }
/* What's inside: a card with a page says Read more ›, lifts a pixel and nudges its › (design L1, "telling people the
   cards open"); the phone's short line and › show only in the L3 list below 860px */
.lm-item-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lm-item-foot .lm-item-h { margin-top: 10px; }
.lm-rm { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.lm-ch { display: inline-block; transition: transform .15s; }
a.lm-item.go { transition: border-color .15s, box-shadow .15s, transform .15s; }
a.lm-item.go:hover { border-color: var(--accent-line); box-shadow: 0 6px 18px rgba(17,32,59,.08); transform: translateY(-1px); }
a.lm-item.go:hover .lm-item-n { color: var(--accent); }
a.lm-item.go:hover .lm-ch { transform: translateX(3px); }
.lm-item-s, .lm-go { display: none; }
@media (prefers-reduced-motion: reduce) { a.lm-item.go, .lm-ch { transition: none; } a.lm-item.go:hover { transform: none; } a.lm-item.go:hover .lm-ch { transform: none; } }
.lm-lens-note { font-size: 15px; color: var(--ink-quiet); margin: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.lm-lens-note[hidden] { display: none; }
.lm-lens-note button { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.lm-seasons { padding-top: 8px; padding-bottom: 64px; }
.lm-sn { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-content: start; }
.lm-sn figure { margin: 0; }
.lm-sn img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.lm-sn figcaption { margin-top: 8px; }
.lm-sn figcaption b { display: block; font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink); }
.lm-sn figcaption > span { font-size: 13px; color: var(--ink-quiet); }
.lm-rw { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lm-rw-in { padding-top: 56px; padding-bottom: 56px; }
.lm-rw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.lm-rw-head .lm-h2 { margin: 0; }
.lm-rw-more { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lm-rw-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lm-rw-grid > :only-child { grid-column: 1 / -1; }
.lm-rw-v { padding: 0; display: grid; grid-template-columns: 240px 1fr; min-height: 135px; overflow: hidden; }
.lm-rw-thumb { position: relative; display: block; background: var(--surface-quiet); border-right: 1px solid var(--line); }
.lm-rw-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-rw-play { color: var(--accent); }
.lm-rw-b { padding: 14px 16px; }
.lm-rw-t { display: block; font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); margin: 6px 0 4px; }
.lm-rw-x { font-size: 14px; line-height: 1.55; }
.lm-answers { padding-top: 56px; padding-bottom: 56px; }
.lm-answers .lm-h2 { margin-bottom: 14px; }
.lm-ans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
.lm-ans details { border-top: 1px solid var(--line); padding: 4px 0 14px; }
.lm-ans summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); gap: 12px; }
.lm-ans summary::-webkit-details-marker { display: none; }
.lm-ans summary i { font-style: normal; font-family: var(--mono); color: var(--ink-faint); }
.lm-ans summary i::before { content: "▸"; }
.lm-ans details[open] summary i::before { content: "▾"; }
.lm-ans p { font-size: 16px; line-height: 1.7; margin: 4px 0 0; }
.lm-more { padding-top: 52px; padding-bottom: 64px; }
.lm-more .hm3-lbl { font-weight: 400; margin: 0 0 14px; }
.lm-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.lm-more-row { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; padding: 12px 0; border-top: 1px solid var(--line-quiet); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lm-more-row i { font-style: normal; font-family: var(--mono); color: var(--ink-faint); }
a.lm-more-row:hover { color: var(--accent); }
.lm-more-here { color: var(--ink-quiet); }
.lm-more-here .hm3-lbl, .lm-more-soon .hm3-lbl { font-size: 10px; margin: 0; }
.lm-more-soon .hm3-lbl { color: var(--warn); }
@media (max-width: 860px) {
  .lm-grp, .lm-items, .lm-ans, .lm-more-grid, .lm-rw-grid { grid-template-columns: minmax(0, 1fr); }
  .lm-rw-v { grid-template-columns: 1fr; } .lm-rw-thumb { aspect-ratio: 16 / 9; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .lm-sn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lm-h1 { font-size: 40px; }
  .lm-head { padding-top: 48px; }
}
/* L3: on a phone each group is one box of rows: the name, its tag and a › when it has a page, then the short line */
@media (max-width: 860px) {
  [data-lens-grp].lm-grp { gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); margin-top: 14px; overflow: hidden; }
  [data-lens-grp] > div:first-child { padding: 14px 14px 8px; }
  [data-lens-grp] .lm-h2 { font-size: 20px; }
  [data-lens-grp] .lm-grp-sub { font-size: 14px; }
  [data-lens-grp] .lm-items { gap: 0; }
  [data-lens-grp] .lm-item, [data-lens-grp] a.mucard { display: block; border: 0; border-top: 1px solid var(--line-quiet); border-radius: 0; padding: 12px 14px; background: transparent; box-shadow: none; transform: none; min-height: 44px; }
  [data-lens-grp] .lm-item-n, [data-lens-grp] .mucard .mt { font-family: var(--serif); font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
  [data-lens-grp] .lm-item-top, [data-lens-grp] .mucard .mt { display: flex; align-items: baseline; gap: 8px; }
  [data-lens-grp] .lm-item-n { margin-right: auto; }
  [data-lens-grp] .mucard .mt > .mtag { margin-left: auto; color: var(--warn); }
  [data-lens-grp] .lm-go { display: inline; font-style: normal; color: var(--accent); font-size: 18px; line-height: 1; }
  [data-lens-grp] .lm-item-l, [data-lens-grp] .lm-item-foot, [data-lens-grp] .mucard .ml, [data-lens-grp] .mucard .mfoot,
  [data-lens-grp] .mucard .glow, [data-lens-grp] .mucard .disc { display: none; }
  [data-lens-grp] .lm-item-s { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-body); margin-top: 3px; }
}
@media (max-width: 520px) { .lm-sn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Price (P1): the month as a calculator, the free things beside it, and Want a hand */
.pr-h1 { max-width: 20ch; }
.pr-quiet { font-size: 18px; line-height: 1.7; margin: 14px 0 0; max-width: 58ch; color: var(--ink-quiet); }
.pr-month { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 56px; }
.pr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.pr-base { padding: 20px 20px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pr-h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); margin: 0; }
.pr-sub { font-size: 14px; line-height: 1.55; color: var(--ink-quiet); margin-top: 4px; }
.pr-base .pr-sub { font-size: 15px; }
.pr-amt { text-align: right; font-size: 14px; color: var(--ink-quiet); white-space: nowrap; }
.pr-amt span { font-family: var(--fig); font-size: 34px; font-weight: 500; color: var(--ink); }
.pr-bar { padding: 10px 20px; border-top: 1px solid var(--line); background: var(--surface-quiet); }
.pr-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line-quiet); }
.pr-row[hidden] { display: none; }
.pr-gc { background: var(--surface-quiet); }
.pr-n { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); }
.pr-fig { font-family: var(--fig); font-size: 15px; color: var(--ink); white-space: nowrap; }
.pr-count { font-weight: 400; }
.pr-tog { width: 38px; height: 22px; border-radius: 4px; border: 0; background: var(--line-strong); position: relative; cursor: pointer; padding: 0; }
.pr-tog i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 2px; background: #fff; transition: left .12s; }
.pr-tog.on { background: var(--accent); }
.pr-tog.on i { left: 19px; }
.pr-step { width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 15px; cursor: pointer; vertical-align: middle; }
.pr-n .pr-step { margin-left: 6px; }
@media (pointer: coarse) { .pr-step { width: 44px; height: 44px; } }
.pr-total { padding: 16px 20px; border-top: 2px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pr-total .pr-n { font-size: 18px; }
.pr-big { font-family: var(--fig); font-size: 24px; font-weight: 500; color: var(--ink); }
.pr-beta { padding: 0 20px 18px; font-size: 14px; line-height: 1.6; color: var(--ink-quiet); margin: 0; }
.pr-side { display: flex; flex-direction: column; gap: 12px; }
.pr-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.pr-mini .hm3-lbl { font-size: 10px; }
.pr-mini p { font-size: 15px; line-height: 1.6; margin: 8px 0 0; }
.pr-mini p b { font-weight: 500; color: var(--ink); }
.pr-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; font-size: 15px; }
.pr-mini .pr-line:first-of-type { margin-top: 10px; }
.pr-mini > .pr-line:first-child { margin-top: 0; }
.pr-line b { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.pr-ok { color: var(--ok); } .pr-warn { color: var(--warn); } .pr-q { color: var(--ink-quiet); font-size: 14px; }
.pr-hand { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pr-hand > .hm3-in { padding-top: 64px; padding-bottom: 64px; }
.pr-hand-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.pr-hand-h { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.12; color: var(--ink); margin: 12px 0 14px; }
.pr-hand-p { font-size: 17px; line-height: 1.75; margin: 0 0 12px; }
.pr-hand-q { font-size: 15px; margin: 0; }
.pr-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pr-svc { border: 1px solid var(--line); border-radius: 6px; padding: 20px; background: var(--surface-quiet); display: flex; flex-direction: column; }
.pr-svc .pr-line { margin-top: 0; }
.pr-svc-n { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink); }
.pr-svc .hm3-lbl { font-size: 10px; }
.pr-svc-p { margin: 10px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-svc-p .pr-big { font-size: 30px; }
.pr-was { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-quiet); }
.pr-free { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.pr-svc p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.pr-svc ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.55; }
.pr-svc li { display: grid; grid-template-columns: 20px 1fr; padding: 4px 0; }
.pr-svc li > span:first-child { font-family: var(--mono); color: var(--ok); }
.pr-hand-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-quiet); }
.pr-hand-f p { font-size: 15px; line-height: 1.6; color: var(--ink-quiet); margin: 0; }
.pr-ask { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 11px 20px; border-radius: 3px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; min-height: 44px; box-sizing: border-box; white-space: nowrap; }
.pr-ask:hover { background: var(--accent-wash); }
@media (max-width: 860px) {
  .pr-month, .pr-hand-g, .pr-svcs, .pr-hand-f { grid-template-columns: 1fr; }
  .pr-row { grid-template-columns: 44px 1fr; } .pr-row > .pr-fig { grid-column: 2; }
  .pr-amt span { font-size: 28px; }
}

/* L4–L6, one subject: back link, the price said once, the show and tell, the honest limit, answers shown open */
.lp-back { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin: -12px 0 12px; }
.lp-back:hover { color: var(--ink); }
.lp-price { margin-top: 30px; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.lp-price p { font-size: 16px; line-height: 1.65; margin: 6px 0 0; color: var(--ink-body); }
.lp-price a { color: var(--accent); }
.lp-show { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-show-in { border-top: 0; padding-top: 56px; padding-bottom: 56px; }
.lp-mono { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); }
.lp-sub { font-size: 13px; color: var(--ink-quiet); margin-top: 3px; }
.lp-faint { color: var(--ink-faint); margin-top: 12px; }
.lp-fig { font-family: var(--fig); font-size: 12px; color: var(--ink-quiet); }
.lp-note { font-size: 13px; color: var(--ink-faint); margin: 10px 0 0; }
.lp-ppl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.lp-roster, .lp-seat { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.lp-roster { padding: 6px 0; }
.lp-roster-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 10px; gap: 8px; }
.lp-add { font-family: var(--mono); font-size: 11px; color: var(--accent); white-space: nowrap; }
.lp-who { padding: 12px 16px; border-top: 1px solid var(--line-quiet); }
.lp-who b { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); }
.lp-who .lp-mono { margin-top: 3px; }
.lp-on { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.lp-total { margin: 6px 16px 8px; padding-top: 12px; border-top: 2px solid var(--line); font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink); }
.lp-seat { padding: 16px 18px; }
.lp-seat-h { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.lp-sw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 11px 0; border-top: 1px solid var(--line-quiet); align-items: center; }
.lp-sw > span:first-child { font-size: 15px; color: var(--ink); }
.lp-said { font-size: 13px; line-height: 1.55; color: var(--ink-quiet); grid-column: 1 / -1; }
.lp-only { margin-top: 10px; padding: 12px 14px; background: var(--surface-quiet); border: 1px solid var(--line-quiet); border-radius: 6px; font-size: 13px; line-height: 1.55; }
.lp-only .lp-mono { margin-bottom: 4px; }
.lp-room { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.lp-room-v { background: #0d1117; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 380px; }
.lp-room-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8b9ab3; }
.lp-live { color: #4dbb6a; }
.lp-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-tile { background: #1e2830; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; min-height: 140px; }
.lp-talk { box-shadow: 0 0 0 2px #4dbb6a; }
.lp-face { width: 64px; height: 64px; border-radius: 50%; background: #3a5470; color: #f4f6fb; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 26px; }
.lp-face-2 { background: #243444; }
.lp-name { position: absolute; left: 10px; bottom: 8px; font-size: 13px; color: #d8e0ee; }
.lp-ctl { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lp-ctl span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #d8e0ee; border: 1px solid #3a5470; border-radius: 3px; padding: 8px 12px; }
.lp-ctl i { font-style: normal; color: #2f9bff; }
.lp-room-n { padding: 16px 18px; border-left: 1px solid var(--line); }
.lp-room-t { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); margin: 8px 0 10px; }
.lp-room-n p { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.lp-acts { border-top: 1px solid var(--line-quiet); padding-top: 10px; margin-top: 4px; }
.lp-acts .lp-mono { margin-bottom: 6px; }
.lp-act { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 14px; line-height: 1.5; }
.lp-act small { font-size: 12px; color: var(--ink-quiet); }
.lp-star { font-family: var(--mono); color: var(--accent); } .lp-box { font-family: var(--mono); color: var(--ink-faint); }
.lp-saved { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok); }
.lp-req-w { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.lp-req { max-width: 600px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; }
.lp-req-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lp-req-t { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink); margin: 8px 0 4px; }
.lp-thread { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.lp-msg { border: 1px solid var(--line-quiet); border-radius: 6px; padding: 12px 14px; font-size: 14px; line-height: 1.6; }
.lp-msg .lp-mono { margin-bottom: 4px; }
.lp-them { background: var(--surface-quiet); }
.lp-verify { margin-top: 16px; padding: 16px; background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 6px; }
.lp-verify b { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); }
.lp-verify div { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.lp-yes, .lp-no { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 11px 18px; border-radius: 3px; min-height: 44px; box-sizing: border-box; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.lp-yes { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-limit-w { padding-top: 56px; }
.lp-limit { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 22px; max-width: 760px; }
.lp-limit .lm-h2 { margin: 8px 0 8px; }
.lp-limit p { font-size: 17px; line-height: 1.7; margin: 0; }
.lp-ans > div { border-top: 1px solid var(--line); padding: 14px 0 16px; }
.lp-ans h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.lp-ans p { margin: 0; }
@media (max-width: 860px) {
  .lp-ppl, .lp-room { grid-template-columns: 1fr; }
  .lp-room-n { border-left: 0; border-top: 1px solid var(--line); }
  .lp-room-v { min-height: 300px; }
}

/* L7 Programs: the sign-up page in a workspace's own look (green on paper), and Want it first */
.lp-prog { max-width: 620px; margin: 0 auto; background: #fbf8f1; border: 1px solid #e6dfcf; border-radius: 6px; padding: 22px 24px; color: #2b3a35; }
.lp-prog .lp-mono { color: #5f6f69; }
.lp-prog-h { display: flex; align-items: center; gap: 10px; }
.lp-prog-m { width: 28px; height: 28px; border-radius: 50%; background: #2f6f62; color: #fbf8f1; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 14px; }
.lp-prog-t { font-family: var(--serif); font-weight: 600; font-size: 24px; color: #1f2d28; margin: 12px 0 4px; }
.lp-prog-s { font-size: 14px; color: #5f6f69; }
.lp-prog-kids { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.lp-prog-k { background: #fff; border: 1px solid #e6dfcf; border-radius: 6px; padding: 12px 14px; font-size: 15px; }
.lp-prog-k .lp-mono { margin-bottom: 4px; }
.lp-prog-add { font-size: 14px; color: #2f6f62; text-decoration: underline; text-underline-offset: 3px; }
.lp-prog-tot { margin-top: 16px; padding-top: 14px; border-top: 2px solid #e6dfcf; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lp-prog-tot b { font-family: var(--serif); font-weight: 600; font-size: 18px; color: #1f2d28; }
.lp-prog-tot .lp-prog-s { font-size: 13px; }
.lp-prog-go { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 0 18px; min-height: 44px; border-radius: 3px; background: #2f6f62; color: #fff; }
.lp-prog-q { font-size: 13px; margin-top: 12px; }
.lp-want { border-left-color: var(--accent); }
.lp-want .pr-ask { margin-top: 16px; }


/* Files and What I've shipped keep their own page bodies; the shared chrome sits in a see-through wrapper */
.lm-chrome { background: transparent; }

/* the Music card on What's inside (L1): a small piece of M1 — night ground, glows, a record, Instrument Serif. The same
   in light and dark, on purpose. */
a.mucard { position: relative; overflow: hidden; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; align-items: center; text-decoration: none; border-radius: 6px; padding: 16px 18px; background: #120a24; border: 1px solid #2a1a4a; color: #e9dcf5; }
a.mucard:hover { border-color: #8a4dff; color: #e9dcf5; }
a.mucard[hidden] { display: none; }
.mucard .glow { position: absolute; inset: 0; background: radial-gradient(120px 90px at 10% 0%, rgba(255,61,139,.55), transparent 70%), radial-gradient(160px 110px at 100% 100%, rgba(138,77,255,.55), transparent 70%); pointer-events: none; }
.mucard .disc { grid-row: 1 / 4; width: 64px; height: 64px; border-radius: 50%; background: repeating-radial-gradient(circle, #120c22 0 1.5px, #2e2350 1.5px 3px); box-shadow: 0 0 0 1px rgba(233,220,245,.22), 0 0 26px rgba(255,61,139,.32), 0 0 44px rgba(138,77,255,.28), 0 8px 18px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; position: relative; }
/* the M1 record, small. Light stays put on a real record and the label's print turns, so the sheen holds still
   and only the label spins, with a printed mark you can watch go round. */
.mucard .disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 40deg, rgba(255,255,255,.22) 55deg, transparent 75deg 220deg, rgba(255,255,255,.14) 235deg, transparent 255deg); }
.mucard .disc i { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#ffd23d, #ff7a3d, #ff3d8b, #8a4dff, #2fe0c8, #ffd23d); display: block; position: relative; z-index: 1; animation: mucard-spin 6s linear infinite; }
.mucard .disc i::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, #120a24 0 9%, #fff7ef 10% 100%); }
.mucard .disc i::before { content: ""; position: absolute; z-index: 1; top: 29%; left: 50%; width: 9px; height: 2px; margin-left: -4.5px; border-radius: 1px; background: #8a4dff; }
@keyframes mucard-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mucard .disc i { animation: none; } }
.mucard .mt { position: relative; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 28px; line-height: 1; color: #fff7ef; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mucard .mtag { font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #ffd23d; }
.mucard .ml { position: relative; font-size: 15px; line-height: 1.6; color: #e9dcf5; }
.mucard .mfoot { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mucard .mgo { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #ffd23d; white-space: nowrap; }
.mucard .mh { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #bfaed6; }

/* See it work (design_handoff_launch_plan §11, drawn on L9): between the show and tell and the limit */
.lp-vid { padding-top: 56px; }
.lp-vid-in { border-top: 0; padding-top: 0; }
.lp-vid-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, #16283c, #101828 60%, #1d4ed8); }
.lp-vid-play { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0; background-size: cover; background-position: center; }
.lp-vid-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.lp-vid-btn { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: #ffffff; color: #11203b; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding-left: 4px; box-sizing: border-box; }
/* the title is the H2 beside the card, and thumbnails carry their own words, so the card shows only the length */
.lp-vid-foot { position: absolute; z-index: 1; right: 18px; bottom: 16px; }
.lp-vid-len { font-family: var(--fig); font-size: 13px; color: #ffffff; background: rgba(13,17,23,.78); border-radius: 4px; padding: 3px 8px; }
.lp-vid-if { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .lp-vid-btn { width: 60px; height: 60px; } .lp-vid-foot { right: 12px; bottom: 10px; } }