/* pnew-biolanding.css — generated by tools/build_css.sh, do not edit (the landing section of the bio page only) */
/* src-css/biolanding/landing.css → app/assets/css/pnew-biolanding.css (tools/build_css.sh): the landing section "Your own
   page" (owner 08.10., templates/partials/bio_landing.php) = design/v5/biopage/landing-feature.html 1:1. Loaded only by a
   page that renders the section (pnew_head_css_add), i.e. only while pnew/switch/bio exists: the guest bundles stay as
   they are. The shared kit (pc-wrap, pc-kicker, pc-h-l, pc-btn, pc-more) comes from the page's own bundle; colours are the
   site's role tokens, so the light theme follows (the mockup is the dark theme, the default). */

.pn-lp-page{--pg-box:var(--lp-box-cr);--pg-hi:var(--lp-inner-hi);--pg-lift:var(--lp-card-lift);--pg-glow:color-mix(in srgb,var(--pink) 16%,transparent);
  --pg-glow-soft:color-mix(in srgb,var(--pink) 9%,transparent);--pg-frame:var(--anthracite);
  position:relative;padding:var(--lp-pad,clamp(56px,6vw,80px)) 0;overflow:clip;color:var(--ink)}
[data-theme="dark"] .pn-lp-page{--pg-box:var(--lp-box-dk);--pg-hi:var(--lp-inner-hi-dk)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lp-page{--pg-box:var(--lp-box-dk);--pg-hi:var(--lp-inner-hi-dk)}}

.pn-lp-page__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;
  grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:". fan" "head fan" "plans fan" "cta fan" ". fan"}
.pn-lp-page__head{grid-area:head}
.pn-lp-page__h{margin:14px 0 0}
.pn-lp-page__lede{margin:18px 0 0;max-width:470px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.pn-lp-page__fan{grid-area:fan;margin:0}
.pn-lp-page__plans{grid-area:plans;align-self:start;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pn-lp-page__cta{grid-area:cta;align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}
.pn-lp-page__cta .pc-more{display:inline-block;padding:9px 0 10px}

/* the fan: three real looks in phone frames, tilted, overlapping; the address floats over the middle phone */
.pn-lp-fan{--pw:252px;--sw:.86;--spread:182px;--tilt:7deg;--drop:34px;position:relative;height:calc(var(--pw) * 844 / 390 + 14px + 30px)}
.pn-lp-fan::before{content:"";position:absolute;inset:-6% -10% -2%;z-index:0;pointer-events:none;
  background:radial-gradient(42% 46% at 50% 46%,var(--pg-glow),transparent 72%)}
.pn-lp-fan__phone{position:absolute;top:30px;left:50%;z-index:1;width:var(--pw);padding:7px;border-radius:38px;background:var(--pg-frame);
  border:1px solid var(--line);box-shadow:0 30px 60px -24px color-mix(in srgb,var(--anthracite) 85%,transparent),0 10px 24px -12px color-mix(in srgb,var(--anthracite) 60%,transparent)}
.pn-lp-fan__phone img{display:block;width:100%;height:auto;aspect-ratio:390/844;border-radius:31px;background:var(--sunken)}
.pn-lp-fan__phone--c{z-index:3;transform:translateX(-50%)}
.pn-lp-fan__phone--l,.pn-lp-fan__phone--r{width:calc(var(--pw) * var(--sw));padding:6px;border-radius:34px}
.pn-lp-fan__phone--l img,.pn-lp-fan__phone--r img{border-radius:28px}
.pn-lp-fan__phone--l{z-index:2;transform:translateX(calc(-50% - var(--spread))) translateY(var(--drop)) rotate(calc(-1 * var(--tilt)))}
.pn-lp-fan__phone--r{z-index:2;transform:translateX(calc(-50% + var(--spread))) translateY(var(--drop)) rotate(var(--tilt))}
.pn-lp-fan__url{position:absolute;top:0;left:50%;z-index:4;transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px 11px 14px;border-radius:999px;background:color-mix(in srgb,var(--bg) 90%,transparent);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 32px -14px color-mix(in srgb,var(--anthracite) 80%,transparent);
  font:700 20px/1 var(--font-sans);letter-spacing:-.015em;white-space:nowrap;color:var(--ink)}
.pn-lp-fan__url svg{flex:none;width:16px;height:16px;color:var(--ink-2)}
.pn-lp-fan__url b{font-weight:700;color:var(--pink)}

/* Free and Premium, compact (homepage): two tonal tiles with the grey-50 % line */
.pn-lp-page__plan{padding:18px 18px 20px;border-radius:14px;border:1px solid var(--line);background:var(--pg-box);box-shadow:var(--pg-hi),var(--pg-lift)}
.pn-lp-page__plantop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pn-lp-page__planname{margin:0;font:700 16px/1.2 var(--font-sans);color:var(--ink)}
.pn-lp-page__plan--prem .pn-lp-page__planname{color:var(--pink-glyph)}
.pn-lp-page__price{font:700 14px/1.2 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-lp-page__plan p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pn-lp-page__plan p strong{font-weight:600;color:var(--ink)}

/* the seller landing: the fuller version (steps + a check table) */
.pn-lp-page--sell{border-top:1px solid var(--line);
  background:var(--lp-grain) 0 0/160px 160px,radial-gradient(46% 60% at 80% 36%,var(--pg-glow-soft),transparent 72%),linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)}
.pn-lp-page--sell .pn-lp-page__grid{grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"head fan" "steps fan" "cta fan" ". fan" "table table";align-items:start}
.pn-lp-page--sell .pn-lp-page__head{align-self:start;padding-top:32px}
.pn-lp-page__steps{grid-area:steps;margin:28px 0 0;padding:0;list-style:none;max-width:500px;counter-reset:st}
.pn-lp-page__step{display:grid;grid-template-columns:40px 1fr;padding:16px 0;border-top:1px dashed var(--line)}
.pn-lp-page__step:last-child{border-bottom:1px dashed var(--line)}
.pn-lp-page__step::before{counter-increment:st;content:"0" counter(st);font:700 14px/1.45 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--pink-glyph)}
.pn-lp-page__step h3{margin:0;font:700 16px/1.35 var(--font-sans);color:var(--ink)}
.pn-lp-page__step p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pn-lp-page__table{grid-area:table;margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:stretch;
  border-radius:14px;border:1px solid var(--line);background:var(--pg-box);box-shadow:var(--pg-hi),var(--pg-lift)}
.pn-lp-page__cmp{padding:22px 24px 14px}
.pn-lp-page__cmph{margin:0;font:700 17px/1.3 var(--font-sans);color:var(--ink)}
.pn-lp-page__cmp table{width:100%;margin-top:10px;border-collapse:collapse;font-size:14px}
.pn-lp-page__cmp th,.pn-lp-page__cmp td{padding:11px 0;border-bottom:1px dashed var(--line);text-align:left;vertical-align:middle}
.pn-lp-page__cmp tr:last-child td,.pn-lp-page__cmp tr:last-child th{border-bottom:0}
.pn-lp-page__cmp thead th{padding-top:4px;font-weight:600;font-size:13px;color:var(--ink-2);vertical-align:bottom}
.pn-lp-page__cmp thead th.pn-lp-page__col{color:var(--ink);font-size:15px;font-weight:700}
.pn-lp-page__cmp thead th.pn-lp-page__col--prem{color:var(--pink-glyph)}
.pn-lp-page__cmp thead small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pn-lp-page__cmp tbody th{font-weight:500;color:var(--ink)}
.pn-lp-page__col,.pn-lp-page__cmp td{width:120px;text-align:center !important}
.pn-lp-page__yes,.pn-lp-page__no{display:inline-block;width:20px;height:20px;vertical-align:middle}
.pn-lp-page__yes{color:var(--ink)}
.pn-lp-page__no{color:var(--ink-2)}
.pn-lp-page__go{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:28px;border-left:1px solid var(--line)}
.pn-lp-page__go h3{margin:0;font:700 21px/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.pn-lp-page__go p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pn-lp-page__go .pc-more{align-self:flex-start;display:inline-block;padding:9px 0 10px}

/* homepage: the lace hem of the pink block moves onto this section (as it sat on the buying guide before) */
.pn-lp-page--home{border-bottom:1px solid var(--line);
  background:radial-gradient(circle,var(--pink) 1.6px,transparent 2.3px) 0 3px/calc(2 * var(--lp-lace-r)) 8px repeat-x,
    var(--lp-grain) 0 0/160px 160px,radial-gradient(40% 50% at 78% 50%,var(--pg-glow-soft),transparent 72%),
    radial-gradient(60% 40% at 50% 0%,color-mix(in srgb,var(--pink) 10%,transparent),transparent 72%),linear-gradient(180deg,var(--lp-lace) 0%,var(--surface) 260px,var(--surface) 100%)}
.pn-lp-sell + .pn-lp-page--home{z-index:4}
.pn-lp-sell + .pn-lp-page--home::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--lp-lace-r));height:var(--lp-lace-r);pointer-events:none;
  background:radial-gradient(circle at 50% 100%,var(--lp-lace) calc(var(--lp-lace-r) - .5px),transparent var(--lp-lace-r)) 0 0/calc(2 * var(--lp-lace-r)) var(--lp-lace-r) repeat-x}

/* tablet and phone */
@media (max-width:1100px){
  .pn-lp-page__grid{column-gap:40px}
  .pn-lp-fan{--pw:220px;--spread:150px}
}
@media (max-width:900px){
  .pn-lp-page__grid,.pn-lp-page--sell .pn-lp-page__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "fan" "plans" "cta"}
  .pn-lp-page--sell .pn-lp-page__grid{grid-template-areas:"head" "fan" "steps" "cta" "table"}
  .pn-lp-page--sell .pn-lp-page__head{padding-top:0}
  .pn-lp-page__fan{margin:32px calc(-1 * var(--gutter,16px)) 0;overflow:clip}
  .pn-lp-page__table{grid-template-columns:minmax(0,1fr)}
  .pn-lp-page__go{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:700px){
  .pn-lp-page__h{margin-top:12px}
  .pn-lp-page__lede{margin-top:14px;font-size:16px}
  .pn-lp-fan{--pw:172px;--sw:.81;--spread:104px;--tilt:7deg;--drop:26px;height:calc(var(--pw) * 844 / 390 + 10px + 26px)}
  .pn-lp-fan__phone{padding:5px;border-radius:28px;top:26px}
  .pn-lp-fan__phone img{border-radius:23px}
  .pn-lp-fan__phone--l,.pn-lp-fan__phone--r{padding:5px;border-radius:25px}
  .pn-lp-fan__phone--l img,.pn-lp-fan__phone--r img{border-radius:20px}
  .pn-lp-fan__url{padding:10px 15px 10px 12px;font-size:17px;gap:7px}
  .pn-lp-fan__url svg{width:14px;height:14px}
  .pn-lp-page__plans{margin-top:24px;gap:10px}
  .pn-lp-page__plan{padding:14px 14px 16px;border-radius:12px}
  .pn-lp-page__planname{font-size:15px}
  .pn-lp-page__plan p{font-size:13.5px}
  .pn-lp-page__cta{margin-top:20px;gap:4px 20px}
  .pn-lp-page__cta .pc-more{padding:11px 0 12px}
  .pn-lp-page__steps{margin-top:24px}
  .pn-lp-page__table{margin-top:36px;border-radius:12px}
  .pn-lp-page__cmp{padding:16px 16px 6px}
  .pn-lp-page__col,.pn-lp-page__cmp td{width:76px}
  .pn-lp-page__cmp tbody th{padding-right:8px}
  .pn-lp-page__go{padding:20px 16px}
  .pn-lp-page__go h3{font-size:18px}
  .pn-lp-page__go .pc-more{padding:11px 0 12px}
}
@media (max-width:370px){
  .pn-lp-page__plans{grid-template-columns:1fr}
  .pn-lp-page__col,.pn-lp-page__cmp td{width:66px}
}
.pn-lp-page .pc-kicker{color:var(--pink)}