/* bioQ · flagship sections on a product page (src/_flagship.py). Only hero products carry them, switched on per SKU.
   The split band, the numbered piece, the comparison, the sample steps and the look-closer frame. Site tokens throughout. */

.pf-tag{position:absolute;left:14px;bottom:14px}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the split band: the whole square photograph sits right (never cropped, Saurabh's rule of 18 Oct), its left edge
   fading into a ground matched to its own backdrop; the words sit on the plain side */
.pf-band{position:relative;margin:0 var(--bq-gut) var(--bq-sec);border-radius:var(--bq-r);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;background:linear-gradient(172deg,#fcf0e2 0%,#efdfcd 34%,#ead9c7 52%,#f5e9de 78%,#f6ebe1 100%)}
.pf-band__txt{position:relative;z-index:1;padding:clamp(24px,5vw,72px);padding-right:clamp(12px,2vw,32px);display:flex;flex-direction:column;gap:16px}
.pf-band__im{position:relative;margin:0;height:min(60vh,520px);aspect-ratio:1/1}   /* 27 Oct: a band's picture is never taller than 520 px */
.pf-band__im img{display:block;width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%);mask-image:linear-gradient(90deg,transparent 0,#000 6%)}
.pf-band .pf-tag{left:auto;right:18px;bottom:18px}

/* chapter names: a short label over each flagship headline (the craft study of 19 Oct, after NOTE and Jalkumbhi) */
.pf-eyebrow{margin:0 0 -6px;font:600 var(--bq-cap)/1.2 var(--bq-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bq-teal-deep)}
.bq-onink .pf-eyebrow,.pf-dark .pf-eyebrow{color:var(--bq-green)}
.pf-bot__head .pf-eyebrow,.pf-band .pf-eyebrow{margin-bottom:0}
.pf-dark .pf-eyebrow{margin-bottom:8px}

/* statement headlines keep the site's --bq-d2 (27 Oct: no size of their own); only the line and the tracking are tighter */
.pf-band .bq-d2,.pf-bot .bq-d2,.pp-end .bq-d2{line-height:1.15;letter-spacing:-.015em}

/* real plants, nothing to water: the close-ups run to the edge, the big one first, the numbers on an ink tile */
.pf-bot{padding:var(--bq-sec) 0;display:flex;flex-direction:column;gap:clamp(24px,3.4vw,48px)}
.pf-bot__head{padding-inline:var(--bq-gut);display:flex;flex-direction:column;gap:16px;max-width:calc(56em + 2 * var(--bq-gut))}
.pf-bot__head .bq-lead{max-width:38em}
.pf-bot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.pf-bot__pic{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;background:#F3E6D6}
.pf-bot__pic:first-child{grid-column:span 2;grid-row:span 2}
.pf-bot__pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--bq-ease)}
.pf-bot__pic:hover img{transform:scale(1.04)}
.pf-bot__pic figcaption{position:absolute;left:12px;bottom:12px;right:12px;max-width:max-content;padding:7px 12px;border-radius:var(--bq-pill);background:rgba(255,253,249,.9);color:var(--bq-ink);font:500 var(--bq-small)/1.35 var(--bq-sans);backdrop-filter:blur(6px)}
.pf-nums{list-style:none;margin:0;padding:clamp(20px,2.6vw,40px);background:var(--bq-ink);color:var(--bq-on-ink);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.8vw,26px)}
.pf-nums li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:16px;padding-top:clamp(10px,1.4vw,18px);border-top:1px solid rgba(238,243,238,.22)}
.pf-nums li:first-child{border-top:0;padding-top:0}
.pf-nums b{font:300 var(--bq-d1)/1 var(--bq-serif);letter-spacing:-.02em;color:var(--bq-green);min-width:1.4ch}
.pf-nums span{font-size:var(--bq-small);line-height:1.4;color:var(--bq-on-ink-soft)}
.pf-bot__note{padding-inline:var(--bq-gut);color:var(--bq-soft);display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* tiers (22 Oct 2026): other pieces' bands. A longer fade, because their photographs are scenes, not a set matched to the
   linen; a dark ground taken from the photograph's own edge when it is a night scene; a landscape photograph keeps its shape */
.pf-band--soft .pf-band__im img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.pf-band--wide .pf-band__im{height:auto;width:min(60vw,1040px,calc(520px * var(--ar)));aspect-ratio:var(--ar)}
.pf-band--dark{background:var(--pf-ground);color:var(--bq-on-ink)}
.pf-band--dark .bq-d2{color:var(--bq-on-ink)}
.pf-band--dark .bq-lead{color:var(--bq-on-ink-soft)}
.pf-band--dark .pf-eyebrow{color:var(--bq-green)}
/* real plants with fewer than four close-ups: the grid closes up; with none, the numbers run across */
.pf-bot--n1 .pf-bot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-bot--n2 .pf-bot__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-bot--n3 .pf-bot__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pf-bot--n1 .pf-bot__pic:first-child,.pf-bot--n2 .pf-bot__pic:first-child,.pf-bot--n3 .pf-bot__pic:first-child{grid-column:auto;grid-row:auto}
.pf-bot--n0 .pf-bot__grid{grid-template-columns:minmax(0,1fr);padding-inline:var(--bq-gut)}
.pf-bot--n0 .pf-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--bq-r);gap:clamp(16px,3vw,48px)}
.pf-bot--n0 .pf-nums li{border-top:0;padding-top:0}
.pf-tag--top{top:12px;bottom:auto;left:12px}

/* the numbered piece */
.pf-anat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(12px,1.6vw,22px)}
.pf-anat__fig{position:relative;margin:0;border-radius:var(--bq-r);overflow:hidden;background:#F8EADA;display:flex;align-items:center}
.pf-anat__pic{position:relative;width:100%}
.pf-anat__pic img{display:block;width:100%;height:auto}
.pf-dot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;color:var(--bq-ink);cursor:pointer}
/* the button is the 44 px target; the small white disc inside it is what the eye sees */
.pf-dot>span{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;font:600 var(--bq-small)/1 var(--bq-sans);box-shadow:0 4px 14px -4px rgba(10,46,48,.45);transition:background .2s,color .2s,transform .3s var(--bq-ease)}
.pf-dot>span::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);opacity:0;transition:opacity .25s}
.pf-dot.is-on>span,.pf-dot:hover>span,.pf-dot:focus-visible>span{background:var(--bq-ink);color:var(--bq-on-ink);transform:scale(1.12)}
.pf-dot.is-on>span::before{opacity:1}
.pf-dot--mark>span{background:var(--bq-green-soft);outline:1px solid var(--bq-teal-deep)}
.mo .pf-dot>span{animation:pf-pulse 2.8s var(--bq-ease) infinite}
.mo .pf-dot:nth-of-type(2)>span{animation-delay:.4s}.mo .pf-dot:nth-of-type(3)>span{animation-delay:.8s}.mo .pf-dot:nth-of-type(4)>span{animation-delay:1.2s}.mo .pf-dot:nth-of-type(5)>span{animation-delay:1.6s}
@keyframes pf-pulse{0%,100%{box-shadow:0 4px 14px -4px rgba(10,46,48,.45),0 0 0 0 rgba(255,255,255,.7)}50%{box-shadow:0 4px 14px -4px rgba(10,46,48,.45),0 0 0 9px rgba(255,255,255,0)}}
.pf-anat__txt{border-radius:var(--bq-r);padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;gap:24px;justify-content:center}
.pf-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pf-key li{position:relative;padding:16px 0 16px 48px;border-top:1px solid rgba(238,243,238,.16);color:var(--bq-on-ink-soft);font-size:var(--bq-small);line-height:1.5;transition:color .2s}
.pf-key li::before{content:attr(data-n);position:absolute;left:0;top:14px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(238,243,238,.4);font:600 var(--bq-cap)/26px var(--bq-sans);text-align:center;color:var(--bq-on-ink);transition:background .2s,color .2s,border-color .2s}
.pf-key li b{color:var(--bq-on-ink);font-weight:500}
.pf-key li.is-on{color:var(--bq-on-ink)}
.pf-key li.is-on::before{background:var(--bq-green);border-color:var(--bq-green);color:var(--bq-ink)}

/* the comparison */
.pf-dark{margin:0 var(--bq-gut) var(--bq-sec);border-radius:var(--bq-r);background:var(--bq-ink);color:var(--bq-on-ink);overflow:hidden;position:relative}
.pf-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 0% 0%,rgba(62,171,168,.22),transparent 60%),radial-gradient(60% 80% at 100% 100%,rgba(162,208,79,.12),transparent 60%);pointer-events:none}
.pf-dark__in{position:relative;max-width:none;margin-inline:auto;padding:var(--bq-sec) var(--bq-gut);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:start}
.pf-dark .bq-lead{color:var(--bq-on-ink-soft);margin-top:16px}
.pf-tablewrap{overflow-x:auto}
.pf-tablewrap:focus-visible{outline:2px solid var(--bq-green);outline-offset:4px}
.pf-table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:var(--bq-small)}
.pf-table th,.pf-table td{padding:16px 14px;text-align:center;border-bottom:1px solid rgba(238,243,238,.14);vertical-align:middle;color:var(--bq-on-ink-soft);font-weight:400}
.pf-table thead th{font:500 var(--bq-small)/1.3 var(--bq-sans);letter-spacing:.02em;border-bottom-color:rgba(238,243,238,.3)}
.pf-table tbody th{text-align:left;color:var(--bq-on-ink);padding-left:0}
.pf-table .pf-us{background:rgba(162,208,79,.12);color:var(--bq-on-ink);font-weight:500}
.pf-table thead .pf-us{border-radius:var(--bq-r) var(--bq-r) 0 0;color:var(--bq-green)}
.pf-table tbody tr:last-child .pf-us{border-radius:0 0 var(--bq-r) var(--bq-r)}
.pf-yes{display:inline-block;vertical-align:middle;width:18px;height:18px;margin:0 8px 0 0;border-radius:50%;background:var(--bq-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='%230A2E30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

/* the sample steps, inside "Rate and making time" */
.pf-steps{border-top:1px solid var(--bq-line);padding-top:var(--bq-5)}
.pf-steps .pp-opt__label{margin-bottom:16px}
.pf-time{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);position:relative}
.pf-time::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--bq-line)}
.pf-time li{position:relative;display:flex;flex-direction:column;gap:8px}
.pf-chip{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;border-radius:var(--bq-pill);background:var(--bq-ink);color:var(--bq-on-ink);font:500 var(--bq-cap)/1 var(--bq-sans)}
.pf-time li:last-child .pf-chip{background:var(--bq-field);color:var(--bq-ink);border:1px solid var(--bq-line)}
.pf-time h3{margin:8px 0 0;font:500 var(--bq-lead)/1.25 var(--bq-sans)}
.pf-time p{margin:0;color:var(--bq-soft);font-size:var(--bq-small);line-height:1.5}

/* look closer */
.pf-closer{max-width:min(100%,960px);margin-inline:auto}
.pf-closer .cs-frame__stage{border-radius:var(--bq-r) var(--bq-r) 0 0;background:#fff}
.pf-closer .cs-frame__bar{border-radius:0 0 var(--bq-r) var(--bq-r)}

/* photographs to the edge: the band and the comparison span the window, no card round them */
.pf-band,.pf-dark{margin-left:0;margin-right:0;border-radius:0}

@media (max-width:1020px){
  /* the band stacks: words above, the whole photograph below at full width (side by side, a tablet left the words a 60 px column) */
  .pf-band{grid-template-columns:minmax(0,1fr);min-height:0}
  .pf-band__txt{padding:clamp(28px,5vw,48px) clamp(22px,5vw,48px) 0;margin-right:0}
  .pf-band__im{height:auto;width:min(100%,520px);justify-self:center}
  .pf-band--wide .pf-band__im{width:100%;max-width:calc(520px * var(--ar))}
  .pf-band__im img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%);mask-image:linear-gradient(180deg,transparent 0,#000 8%)}
  .pf-band--soft .pf-band__im img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%)}
  .pf-anat,.pf-dark__in{grid-template-columns:minmax(0,1fr)}
  .pf-time{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-time::before{display:none}
}
@media (max-width:720px){
  .pf-bot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-bot__pic figcaption{left:8px;bottom:8px;right:8px;padding:8px 12px;font-size:var(--bq-cap)}
  .pf-nums{padding:14px 14px;gap:10px}
  .pf-nums li{gap:10px;padding-top:10px}
  .pf-nums span{font-size:var(--bq-cap);line-height:1.3}
  .pf-bot--n1 .pf-bot__grid,.pf-bot--n2 .pf-bot__grid,.pf-bot--n3 .pf-bot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-bot--n2 .pf-nums{grid-column:span 2}
  .pf-bot--n0 .pf-nums{gap:10px}
  .pf-dot>span{width:28px;height:28px;font-size:var(--bq-cap)}
  .pf-anat__fig .pf-tag{top:12px;bottom:auto;left:12px}
  .pf-time{grid-template-columns:minmax(0,1fr)}
  /* the comparison: one card per question, ours first, the others beneath */
  .pf-tablewrap{overflow:visible}
  .pf-table{min-width:0;font-size:var(--bq-small)}
  .pf-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pf-table,.pf-table tbody,.pf-table tr,.pf-table th,.pf-table td{display:block;text-align:left}
  .pf-table tr{padding:16px 0;border-top:1px solid rgba(238,243,238,.16)}
  .pf-table th,.pf-table td{border:0;padding:0}
  .pf-table tbody th{font-weight:500;margin-bottom:10px}
  .pf-table td.pf-us,.pf-table tbody tr:last-child .pf-us{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--bq-r);margin-bottom:8px}
  .pf-table td.pf-us::before{content:attr(data-l) ":";color:var(--bq-green);font-weight:500}
  .pf-yes{display:none}
  .pf-table td:not(.pf-us){display:inline;font-size:var(--bq-small)}
  .pf-table td:not(.pf-us)::before{content:attr(data-l) ": "}
  .pf-table td:not(.pf-us):not(:last-child)::after{content:" · "}
}
@media (prefers-reduced-motion:reduce){
  .pf-dot>span{animation:none!important}
  .pf-bot__pic img{transition:none}
  .pf-bot__pic:hover img{transform:none}
}

/* a square picture beside its numbered key (22 Oct): .pg-band's column flow would stack it a screen and a half tall */
@media (min-width:900px){.pg-band.pf-anat--side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .pf-anat--side .pf-anat__fig{align-self:start}}