/* Veedma Women lab panels page: its own rules, loaded after css/womens.css. Every class is prefixed lp-; the page also uses the shared header, button, trust row, FAQ and footer styles. */
  /* Veedma Women lab panels page, phones first (started 2026-10-14). The home stylesheet (css/womens-home.css) supplies the header, footer, buttons, FAQ and type; this block styles the page's own sections, all prefixed lp-. Desktop is not designed yet: from 721 px the phone layout simply widens. */
  .lp h1,.lp h2{font-size:var(--title);font-weight:400;line-height:1.05;letter-spacing:-.015em;color:#102f29;max-width:none;text-wrap:balance}
  /* section titles on one line (user, 2026-10-14): one shared size, small enough for the longest, "What your labs can explain" (11.1em), to fit the 16 px gutters with 3% to spare: 29.8 px at 375, 25 at 320, 34.6 at 430; wider screens keep --title. The green card's title keeps its two lines at this size */
  .lp h2,.lp-faq.faqsec h2{font-size:min(var(--title),calc((100vw - 32px) / 11.5));white-space:nowrap}
  .lp h1 .hl,.lp h2 .hl{background:none;padding:0;font-weight:500;color:#ab874a}
  .lp-lead{margin:1.2rem 0 0;font-family:var(--display);font-weight:400;font-size:1.18rem;line-height:1.2;color:#0f2a22;text-wrap:balance}
  .lp .small{font-size:.8rem;line-height:1.5;color:#6e6e88;margin:0}
  .lp-sec{position:relative;padding-block:2.75rem 0}
  /* phones: every title sits 44 px (2.75rem) under the last content of the block before it, the trust line to symptom title gap on the home page */
  .lp .nw{white-space:nowrap}
  /* the 11 areas lead in the user's two lines, broken after "biomarkers" (2026-10-14). The page script sizes it on the device: it measures both lines and sets the font so the longer one fills 97% of the column, at most 1.45rem; under 13 px (the narrowest phones) it lets the lines wrap at 15 px instead. Without the script the lines wrap at the size below */
  .lp .lp-lead2{font-size:calc((100vw - 32px) / 24.5);line-height:1.3;text-wrap:wrap}
  .lp-lead2 > span{display:block}
  .lp-lead2.fit > span{white-space:nowrap}
  .lp-caps{margin:0;font-family:var(--display);font-weight:500;font-size:.8rem;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:#86672f}

  /* 1 hero, set as the home hero on phones (user, 2026-10-14): her photo first, the title starting on the photo's faded foot, then the one button; the home hero's rules (.hero, .hero-photo, .hero-grid, .hero-ph, .ctas, .hero-waves) do the layout. The title is two sentences, each starting on a new line, "why." alone in the hero gold (user, 2026-10-14); plain wrapping (not balance) keeps "Your symptoms tell us / how you feel." and "Your labs tell us why." whole (user, 2026-10-14) */
  /* title size (user, 2026-10-14): as large as the three lines allow; "Your symptoms tell us", the widest line, is 9.09em, so column / 9.4 keeps it on one line with 3% to spare: 34.8 px at 375, 28.9 at 320, 40.6 at 430, 3rem at most */
  /* line spacing 1.15 (user, 2026-10-14: a little more air between the lines so it reads easier; the section titles keep 1.05) */
  /* a step smaller again (user, 2026-10-14, so the title, the panels and the button read as one block): column / 10.4, 32.9 px at 390, 31.8 at 375, 26.2 at 320 */
  .lp-hero h1{white-space:normal;text-wrap:wrap;font-size:min(3rem,calc(100cqi / 10.4));line-height:1.15}
  .lp-hero h1 > span{display:block}
  /* "why." 20% larger than the title (user, 2026-10-14, variant B of three); line-height 0 so the larger word does not push its line apart. Only this hero title uses a size accent; other titles keep colour and italic only */
  .lp-hero h1 .hl{background:none;padding:0;font-weight:500;color:#ab874a;font-size:1.2em;line-height:0}
  /* the hero photo (user, 2026-10-14): a landscape portrait, a woman in a mustard sweater outdoors, 1536 x 1024, shown whole at 3:2, as on the home hero (user chose this over the taller 1086:1235 face crop, 2026-10-14), so the hero is shorter and the trust line and the next section show on the first screen. Earlier photos (glasses, caramel and peach sweaters, black-and-white) stay in images/ */
  .lp-hero .hero-ph{aspect-ratio:3/2}
  .lp-hero .hero-ph img{object-position:50% 50%}
  /* the title starts 1.25rem under the photo instead of on its faded foot (the home hero pulls it 5.33vw up), so it never sits on the picture; the hero grows by that much (user, 2026-10-14) */
  /* the title starts under the photo; the photo's last quarter fades into the white page on an eased curve (slow at first, then faster), so there is no visible edge (user, 2026-10-14: still too sharp; the last 4% faded before) */
  @media (max-width:900px){.lp-hero .hero-ph{margin-bottom:.75rem;aspect-ratio:3/2;-webkit-mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.85) 81%,rgba(0,0,0,.55) 88%,rgba(0,0,0,.22) 95%,transparent 100%);mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.85) 81%,rgba(0,0,0,.55) 88%,rgba(0,0,0,.22) 95%,transparent 100%)}}

  /* the two panels inside the hero (user, 2026-10-14): Essential 71 and Complete 100 biomarkers between the title and the button, as two columns split by a hairline, names in bronze capitals, counts in Newsreader 500 dark green. The price and the Quest locations run in the trust line under the hero. Spacing kept tight so the button stays on the first screen of a 375 x 812 or 390 x 844 phone */
  .lp-hero .lp-hp p{margin:0}
  /* the panels and the button sit lower in the hero (user, 2026-10-14): more air under the title and above the button, the hero's bottom padding 1.5rem (was 2.5rem), so the hero ends where it did */
  .lp-hero .lp-hp{grid-area:l;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));text-align:center;margin-top:1.5rem}
  @media (max-width:900px){.lp-hero.hero.hero-photo .ctas{margin-top:1.35rem}.lp-hero.hero.hero-photo{padding-bottom:1.5rem}}
  /* the two panels centred in their halves, the hairline between them (user, 2026-10-14: the edge-flush try looked wrong) */
  .lp-gl-p{padding:.15rem .4rem .2rem}
  .lp-hp > div + div{border-left:1px solid rgba(16,47,41,.16)}
  /* the trust row: the home page's static row (home v3, 2026-10-14), no motion (user, 2026-10-14: stop the running line), three points: gold line icons, the page serif, the key word in 500. Phones: three columns, the icon above two short lines, a little larger than the home's four (.86rem) since there are three; wide screens: one row across the column */
  .lp-trust{background:#fff;border-block:1px solid #e3e6dd}
  .lp-trust .tq{list-style:none;margin:0 auto;max-width:74rem;padding:1.1rem clamp(1rem,4vw,2.5rem);display:flex;justify-content:space-between;gap:1.5rem}
  .lp-trust .tq li{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-variation-settings:"opsz" 48;font-size:1.08rem;line-height:1.2;color:#102f29}
  .lp-trust .tq b{font-weight:500}
  .lp-trust .tq svg{flex:none;width:24px;height:24px;color:#ab874a}
  .lp-trust .tq li.tq-d{display:none}
  @media (max-width:720px){
    .lp-trust .tq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,4rem),1fr));gap:.5rem;padding:1rem .75rem 1.05rem}
    .lp-trust .tq li{flex-direction:column;gap:.45rem;text-align:center;font-size:.95rem}
    .lp-trust .tq li > span{display:flex;flex-direction:column}
    .lp-trust .tq svg{width:26px;height:26px}
  }
  @media (max-width:359px){.lp-trust .tq li{font-size:.86rem}}
  /* the panel names over the counts (user, 2026-10-14): the card names with "panel", so the gold line reads as a name, then the number, then "Biomarkers" ("Essential 71" alone read like a promo code); one line at every phone width */
  .lp-gl-cap{font-family:var(--body);font-size:min(.88rem,3.7vw);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#86672f}
  .lp-gl-n{margin-top:.55rem!important;font-family:var(--display);font-variation-settings:"opsz" 48;font-weight:500;font-size:2rem;line-height:1;letter-spacing:-.02em;color:#102f29}
  .lp-gl-l{margin-top:.2rem!important;font-family:var(--body);font-size:1rem;line-height:1.3;color:#4f524c}

  /* 3 areas: one row per area (user's list, 2026-10-14), one open at a time as the warm card with the gold check (the home timeline's look); inside only the biomarkers, as chips under "Essential" and "Complete adds" */
  .lp-why{background:linear-gradient(#fff 0,#f5f8ef 8.75rem)}
  /* satin waves at the foot of the areas, the home "How it works" waves (user, 2026-10-14): the home .how-waves rule places them behind the rows, the last row ends 96 px above the section foot (52 px as on the home page until the user asked for more air, 2026-10-14), so it sits just over the first crest; the lowest wave ends in white, where the panel photo begins */
  .lp-why{isolation:isolate;padding-bottom:6rem}
  .lp-acc{display:flex;flex-direction:column;gap:.6rem;margin-top:1.1rem}
  /* the rows sit in two column wrappers for desktop; up to 900 px the wrappers have no box, so the rows stay one list */
  .lp-acol{display:contents}
  .lp-ai{background:rgba(255,255,255,.4);border:1px solid #d8d8d0;border-radius:18px}
  .lp-ai.on{background:#fff;border-color:#cfccbd;box-shadow:0 10px 24px rgba(40,60,45,.07)}
  .lp-ah{margin:0;font:inherit}
  .lp-ah button{display:flex;align-items:center;gap:1rem;width:100%;padding:.5rem 1.1rem .5rem .95rem;background:none;border:0;border-radius:18px;text-align:left;cursor:pointer;color:inherit}
  .lp-ai.on .lp-ah button{padding:.8rem 1.1rem .5rem .95rem}
  .lp-ok{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:#e2e3d4;color:#2a3a2e}
  .lp-ok svg{width:.95rem;height:.95rem}
  /* the open card's gold check is 2.25rem, a little over the closed grey one (2.1rem); it was 2.6rem and stood out too much (user, 2026-10-14) */
  .lp-ai.on .lp-ok{width:2.25rem;height:2.25rem;box-sizing:border-box;border:1.5px solid #ecd9a8;background:radial-gradient(circle at 35% 30%,#f4e1b6 0%,#d4b27a 55%,#b48d4f 100%);color:#1f4d36;box-shadow:0 2px 6px rgba(0,0,0,.16)}
  .lp-ai.on .lp-ok svg{width:1.05rem;height:1.05rem}
  .lp-an{flex:1;min-width:0;font-family:var(--display);font-weight:500;font-size:1.08rem;line-height:1.25;color:#1f4d36}
  .lp-ai.on .lp-an{font-size:1.3rem}
  .lp-cv{flex:none;width:1.15rem;height:1.15rem;color:#5d6b60;transition:transform .2s}
  .lp-ai.on .lp-cv{transform:rotate(180deg)}
  .lp-ap{padding:0 1.1rem 1.1rem}
  /* "Essential" sits .75rem under the card's title row (user, 2026-10-14: a little more space; was .15rem) */
  .lp-ap > .lp-tag:first-child{margin-top:.75rem}
  .lp-tag{margin:1.35rem 0 0;font-family:var(--display);font-weight:500;font-size:.74rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#86672f}
  /* the chips start .95rem under their panel name (user, 2026-10-14: more space between the names and the biomarkers; was .55rem) */
  .lp-chips{list-style:none;margin:.95rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
  .lp-chips li{font-family:var(--display);font-size:.95rem;line-height:1.2;padding:.34rem .75rem;border-radius:999px;border:1px solid #d4d6cc;background:#f1f2ec;color:#0f2a22;text-align:center;white-space:nowrap}
  .lp-chips.add li{border-color:#e2cfa5;background:#fcfbf6;color:#3d3420}
  /* the footnote under the last area: the testosterone method in plain words, set as a source line, for whoever wants it (user, 2026-10-15: not a third text under the title and lead) */
  .lp-why .small{margin-top:1rem}

  /* 4 the two panels: Membership card look (warm white, gold border), stacked on phones */
  .lp-panels{background:#fff}
  /* the photo that opened this section (v38 to v45) was removed (user, 2026-10-14); the title now comes the section padding under the areas' waves */
  .lp-pcs{display:flex;flex-direction:column;gap:1.25rem;margin-top:1.3rem}
  .lp-pc{background:#fefdf9;border:1.5px solid #cfae6e;border-radius:24px;box-shadow:0 14px 32px rgba(40,60,45,.1);padding:1.25rem 1.1rem 1.1rem;display:flex;flex-direction:column}
  /* the panel name opens the card; the "Start here" and "Most complete" labels above it were removed (user, 2026-10-14). It stays about three quarters of the section title (user, 2026-10-14: the name was bigger than the title): 1.9rem until then */
  .lp-pc h3{margin:0;font-family:var(--display);font-weight:500;font-size:min(1.5rem,calc((100vw - 32px) / 15.5));line-height:1.1;letter-spacing:-.01em;color:#102f29}
  /* the card (user, 2026-10-14): a payment card, set like the home Membership card: the name ("Essential" and "Complete", user, 2026-10-14; were "Hormone essentials", "Health essentials", "Complete health panel" and "Complete health"), three gold-check items (no "What’s included" label: the checks already say it, user, 2026-10-14) (the biomarker count, the written report, the medical consultation), a line, the button with the price in it. The areas above already show which biomarkers each panel holds, so "Best for", the five-item lists and the biomarker drawer are gone (the drawer is parked in womens-labs/parked/biomarker-drawer.md) */
  .lp-pc > ul{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-family:var(--body);font-size:1.02rem;line-height:1.4;color:#252724}
  .lp-pc > ul > li{display:flex;gap:.8rem;align-items:flex-start}
  .lp-pc > ul > li::before{content:"";flex:none;margin-top:.08rem;width:1.2rem;height:1.2rem;border-radius:50%;box-sizing:border-box;border:1.2px solid #ecd9a8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d36' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.66rem no-repeat,radial-gradient(circle at 35% 30%,#f4e1b6 0%,#d4b27a 55%,#b48d4f 100%);box-shadow:0 1px 4px rgba(0,0,0,.14)}
  /* a chip too long for the row wraps onto two lines as a rounded box instead of a pill */
  .lp-chips li.wr{border-radius:14px}
  .lp-pc hr{align-self:stretch;height:1px;margin:1.05rem 0 0;border:0;background:#e2e1d8}
  /* the price lives in the button ("Order now for $79"), so the price line and "one-time" are gone (user, 2026-10-14: shorter cards) */
  .lp-pc .btn{width:100%;margin-top:1.05rem}
  .lp-pc .pc-elig{align-self:center}
  .lp-pnote{margin-top:1rem!important;text-align:center}

  /* 6 results she already has (user, 2026-10-15): no cards; the page's sage ground again, fading in from the white above as the areas section does, with the same home "How it works" waves at its foot, ending in the white FAQ. The title, a short lead (the free review and the minimum markers for a treatment decision), one button, and no photo (user, 2026-10-15: one whole block that ends here). "Labs are where your care starts" and its "Choose your panel" button were cut: the page has said both by here */
  .lp-up{isolation:isolate;background:linear-gradient(#fff 0,#f5f8ef 8.75rem);padding-bottom:6rem}
  .lp-up .lp-lead{margin-top:1.2rem;line-height:1.32;text-wrap:pretty}
  .lp-up .btn{width:100%;margin-top:1.5rem}
  /* the full upload copy (user, 2026-10-15): the lead says where results can come from; "See the tests we need" opens the required tests by group (a native details element, closed on load, set like a closed area row; open it is the white area card); then what happens next and the reassurance line in Arimo, the reading face, then the button */
  /* the dropdown is an area row of "What your labs can explain" (user, 2026-10-15: the plain label was too small and stood apart): the grey check circle, the name in Newsreader 500, the chevron; open, the white card with the gold check and the name at 1.3rem */
  .lp-need{margin-top:1.3rem;background:rgba(255,255,255,.4);border:1px solid #d8d8d0;border-radius:18px}
  .lp-need[open]{background:#fff;border-color:#cfccbd;box-shadow:0 10px 24px rgba(40,60,45,.07)}
  .lp-need summary{list-style:none;display:flex;align-items:center;gap:1rem;padding:.5rem 1.1rem .5rem .95rem;border-radius:18px;cursor:pointer}
  .lp-need[open] summary{padding:.8rem 1.1rem .5rem .95rem}
  .lp-need summary::-webkit-details-marker{display:none}
  .lp-need[open] .lp-ok{width:2.25rem;height:2.25rem;box-sizing:border-box;border:1.5px solid #ecd9a8;background:radial-gradient(circle at 35% 30%,#f4e1b6 0%,#d4b27a 55%,#b48d4f 100%);color:#1f4d36;box-shadow:0 2px 6px rgba(0,0,0,.16)}
  .lp-need[open] .lp-ok svg{width:1.05rem;height:1.05rem}
  .lp-need[open] .lp-an{font-size:1.3rem}
  .lp-need[open] .lp-cv{transform:rotate(180deg)}
  .lp-need summary:focus-visible{outline:3px solid #43593c;outline-offset:3px}
  .lp-need-b{padding:0 1.1rem 1.1rem}
  .lp-need dl{margin:0}
  .lp-need dt{margin:1rem 0 0;font-family:var(--display);font-weight:500;font-size:.74rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#86672f}
  .lp-need dt:first-child{margin-top:.75rem}
  .lp-need dd{margin:.45rem 0 0;font-family:var(--body);font-size:.97rem;line-height:1.45;color:#252724}
  /* one test per line, as in the checkout (2026-10-18): the tests of a group sit closer than a group to its name; a two-line group name (the CMP at 320 to 430 px) gets room between its lines */
  .lp-need dd + dd{margin-top:.25rem}
  .lp-need dt{line-height:1.3}
  .lp-up .lp-after{margin-top:1.3rem;font-family:var(--body);font-size:1rem;line-height:1.5;color:#252724}
  .lp-up .lp-safe{margin-top:.8rem;font-family:var(--body);font-size:.88rem;line-height:1.45;color:#61625d}
  @media (prefers-reduced-motion: reduce){.lp-cv{transition:none}}

  /* 7 FAQ: the home FAQ as it is; this page's section starts on white after the upload card */
  .lp-faq.sec{padding-top:2.75rem}

  /* desktop (2026-10-15, the user: adapt the desktop the way the home page was adapted; the phone version is locked at v55): every rule below applies from 901 px only, so phones and the 721 to 900 px range keep the v55 layout. As on the home page: titles at the shared --title on the shared left edge, leads on one line, every section title the standard distance under the last content of the section before it (clamp(3.5rem,8vw,6.5rem) less 2rem: 72 px at 1440, 50 at 1024, 40 at 901; about 100 px where satin waves sit between), each section within one 1440 x 800 window, no empty half, priced cards centred like Membership, buttons at the shared 25.7rem */
  @media (min-width:901px){
    /* hero: the phones' set lines, "Your symptoms tell us / how you feel. / Your labs tell us why.", kept by sizing the title to its column as on phones (column / 10.4), up to the shared title size */
    .lp-hero h1{font-size:min(var(--title),calc(100cqi / 10.4))}
    /* her photo cropped narrower than the home hero's whole 3:2 frame (user, 2026-10-15: the title ran onto the photo): 44% of the screen wide at the home hero's height (55vw / 1.5), so it starts at 56% of the width, clear of the title at every desktop width; cut from both sides, her face near the frame's middle; the home hero's left and bottom fades stay */
    .lp-hero .hero-ph{width:44%;aspect-ratio:6/5}
    .lp-hero .hero-ph img{object-position:55% 50%}
    /* the two panel counts and the button as one block on the title's left edge (user, 2026-10-15: the counts sat off centre from the button): the counts at the shared button width, 25.7rem, the button's width from the home stylesheet, the counts centred in its two halves over the button */
    .lp-hero .lp-hp{justify-self:start;width:25.7rem;max-width:100%;margin-top:2rem}
    /* the trust row's fourth point on desktop only, as on the home page: HIPAA compliant (phones keep their three points) */
    .lp-trust .tq li.tq-d{display:flex}
    /* areas: the title the standard distance under the trust line; the lead on one line in the shared desktop lead size (the phone script's inline size is overridden); the eleven rows in two columns of six and five, each column its own stack, so opening a row moves only its column */
    .lp-why.lp-sec{padding-top:calc(clamp(3.5rem,8vw,6.5rem) - 2rem)}
    .lp .lp-lead2{font-size:1.45rem!important;line-height:1.2;text-wrap:wrap}
    .lp-lead2 > span{display:inline}
    .lp-lead2.fit > span{display:inline-block;max-width:100%;white-space:normal}
    .lp-acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.25rem;align-items:start;margin-top:1.4rem}
    .lp-acol{display:flex;flex-direction:column;gap:.6rem}
    .lp-why{padding-bottom:3.5rem}
    /* the two panels: set like Membership, centred: the title, the two cards side by side at the Membership card's 28rem, the members note */
    .lp-panels > .wrap{display:flex;flex-direction:column;align-items:center}
    .lp-panels h2{text-align:center}
    .lp-pcs{flex-direction:row;justify-content:center;align-items:stretch;gap:1.5rem;width:100%;margin-top:1.6rem}
    .lp-pc{flex:0 1 28rem;padding:1.5rem 1.4rem 1.3rem}
    .lp-pnote{margin-top:1.2rem!important}
    /* results she already has: the title the standard distance under the members note and spanning the column; the text on the left, the tests on the right from the lead's top (as the home symptom map puts its widget beside the chips); the button at the shared width under the text */
    .lp-up.lp-sec{padding-top:calc(clamp(3.5rem,8vw,6.5rem) - 2rem);padding-bottom:3.5rem}
    .lp-up > .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"h h" "l n" "a n" "s n" "b n" ". n";grid-template-rows:auto auto auto auto auto 1fr;column-gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
    .lp-up h2{grid-area:h}
    .lp-up .lp-lead{grid-area:l;font-size:1.45rem;line-height:1.2}
    .lp-up .lp-need{grid-area:n;margin-top:1.2rem}
    .lp-up .lp-after{grid-area:a;font-size:1.02rem}
    .lp-up .lp-safe{grid-area:s}
    .lp-up .btn{grid-area:b;width:25.7rem;max-width:100%}
  }