/* ─────────────────────────────────────────────────────────────
   Pickly case study — reuses the .nc-* building blocks from nope-case.css,
   re-themed with Pickly's palette (Assets.xcassets colorsets).
   ───────────────────────────────────────────────────────────── */
.project[data-case="pickly"]{
  --nc-lime:#D0FF96;            /* PicklyBrandLime */
  --pk-aqua:#9CFFFF;            /* PicklyBrandAqua */
  --pk-lemon:#FFED92;           /* PicklyBrandLemon */
  --pk-olive:#7C8A57;           /* PicklyPrimary (light) */
  --pk-tomato:#FC5B6A;          /* PicklyTomato (dark) */
  --pk-good:#0CE07A; --pk-good-fill:#93FFC4;
  --pk-okay:#FFD211;  --pk-okay-fill:#FFED92;
  --pk-bad:#F32F5F;   --pk-bad-fill:#FFBBBB;
  --pk-great:#7D8A58; --pk-great-fill:#D0FF96;
  --nc-ink:#F1F4F4;
  --nc-soft:rgba(241,244,244,.64);
  --nc-faint:rgba(241,244,244,.38);
  --nc-card:#1C1C1C;            /* PicklyCard (dark) */
  --nc-line:rgba(241,244,244,.09);
  --nc-sf:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  --nc-rd:"SF Pro Rounded",ui-rounded,"Nunito",-apple-system,BlinkMacSystemFont,sans-serif;
  --nc-ease:cubic-bezier(.22,1,.36,1);
  --nc-spring:cubic-bezier(.34,1.56,.64,1);
}
.project[data-case="pickly"] .project__eyebrow{ color:var(--nc-lime); font-family:var(--nc-sf); font-weight:600; }
.project[data-case="pickly"] .project__tags span{ border-color:rgba(208,255,150,.22); }
.project[data-case="pickly"] .project__lead{ font-family:var(--nc-sf); letter-spacing:-.01em; }
.project[data-case="pickly"] .project__results .r b{ font-family:var(--nc-sf); font-weight:800; color:var(--nc-lime); }
.project[data-case="pickly"] .project__next:hover strong{ color:var(--nc-lime); }
.project[data-case="pickly"] .project__cover{ border-radius:20px; overflow:hidden; }

/* Pickly sections use SF Pro (no rounded display face in the app UI) */
.project[data-case="pickly"] .nc-h em, .project[data-case="pickly"] .nc-stat b,
.project[data-case="pickly"] .nc-kicker{ font-family:var(--nc-sf); }
.project[data-case="pickly"] .nc-h em{ font-weight:800; }
.project[data-case="pickly"] .nc-stat b{ font-weight:800; }

/* Brand stage: the icon's lime → green → aqua glass gradient, toned down for a dark page */
.project[data-case="pickly"] .nc-stage{ border-color:rgba(208,255,150,.12);
  background:
   radial-gradient(60% 55% at 22% 18%, rgba(140,198,63,.42), transparent 70%),
   radial-gradient(55% 50% at 88% 92%, rgba(80,190,200,.38), transparent 70%),
   radial-gradient(40% 40% at 80% 10%, rgba(255,237,146,.14), transparent 70%),
   #0b120c; }

/* ── Title ── */
.pk-title{ display:flex; flex-direction:column; gap:.2em; }
.pk-title b{ font-family:var(--nc-sf); font-weight:800; font-size:clamp(3.4rem,15vw,7.2rem); letter-spacing:-.045em; line-height:.95; color:var(--nc-ink); }
.pk-title b i{ font-style:normal; color:var(--nc-lime); }
.pk-title span{ font-family:var(--nc-sf); font-weight:600; font-size:clamp(1.3rem,4.6vw,2.3rem); letter-spacing:-.03em; line-height:1.05; color:var(--nc-ink); }
.pk-title span em{ font-style:normal; color:var(--nc-lime); }

/* ── HERO ── */
.pk-hero{ position:relative; width:100%; container-type:inline-size; overflow:hidden; isolation:isolate; background:linear-gradient(135deg,#C4D270 0%,#A6CA4F 35%,#63A360 62%,#6EB2C2 100%); }
.pk-hero::before{ content:""; display:block; padding-top:118%; }
.pk-hero__bg{ position:absolute; inset:-20%; z-index:-3;
  background:
   radial-gradient(40% 46% at 10% 10%, rgba(214,229,138,.9), transparent 70%),
   radial-gradient(40% 46% at 92% 92%, rgba(121,187,199,.85), transparent 70%),
   radial-gradient(34% 40% at 70% 20%, rgba(140,203,99,.7), transparent 70%);
  animation:nc-drift 22s ease-in-out infinite alternate; }
.pk-shelf{ position:absolute; left:-1px; right:-1px; top:calc(50% + 7cqw); bottom:-4cqw; z-index:0; border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1.5px solid rgba(255,255,255,.7); }
.pk-hero__ghost{ position:absolute; left:0; right:0; bottom:-6cqw; z-index:-2; text-align:center; white-space:nowrap;
  font-family:var(--nc-sf); font-weight:800; font-size:34cqw; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(180deg,rgba(208,255,150,.085) 10%,rgba(120,170,90,.02) 75%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pk-hero .nc-hero__grain{ z-index:9; opacity:.05; }

/* scanner + verdict (ScannerOverlay / VerdictBadge in OnboardingCarouselPage.swift) */
.pk-scan{ position:absolute; z-index:6; pointer-events:none; }
.pk-scan__box{ position:absolute; inset:0; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 2px rgba(255,255,255,.82); }
.pk-scan svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pk-scan svg path{ fill:none; stroke:var(--acc,#0CE07A); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; transition:stroke .4s; }
.pk-scan__line{ position:absolute; left:12%; right:12%; height:4px; border-radius:4px; background:var(--acc,#0CE07A); box-shadow:0 0 14px var(--acc,#0CE07A); top:22%; transition:background .4s, box-shadow .4s; }
.pk-verdict{ position:absolute; left:50%; z-index:7; translate:-50% 0; display:inline-flex; align-items:center; gap:.6em;
  padding:.45em 1.1em .45em .5em; border-radius:999px; background:var(--fill,#93FFC4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.72), 0 1.4cqw 2.6cqw -.6cqw var(--acc,#0CE07A);
  font-family:var(--nc-sf); font-weight:700; color:#000; white-space:nowrap; opacity:0; scale:.92; transition:opacity .34s ease, scale .34s cubic-bezier(.34,1.4,.64,1), background .3s; }
.pk-verdict.is-on{ opacity:1; scale:1; }
.pk-verdict i{ width:1.9em; height:1.9em; border-radius:50%; display:grid; place-items:center; background:var(--acc,#0CE07A); color:var(--ic,#000); font-style:normal; font-weight:800; font-size:.9em; }
.project__cover .pk-hero span{ font:inherit; color:inherit; }
.project__cover .pk-cam__bar span{ font-size:3.6cqw; color:rgba(241,244,244,.6); }

.pk-cam__btn{ position:absolute; left:7cqw; right:7cqw; top:182cqw; z-index:5; padding:4.2cqw 0; border-radius:99px; background:#D0FF96; color:#000; text-align:center; font-family:var(--nc-sf); font-weight:600; font-size:4.4cqw; }

/* produce flat-lay from the app's SearchBackground, framing both sides and fading into the gradient */
.pk-produce{ position:absolute; top:0; bottom:0; aspect-ratio:470/1254; z-index:-1; pointer-events:none; background:var(--img) center/cover no-repeat; opacity:.95;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 35%,#000 70%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 35%,#000 70%); }
.pk-produce--r{ right:0; }
.pk-produce--l{ left:0; transform:scale(-1,-1); }
/* shelf labels: Pickly score instead of a price */
.pk-tag{ position:absolute; left:50%; bottom:calc(100% + 1.6cqw); top:auto; translate:-50% 0; display:inline-flex; align-items:center; gap:1.1cqw; padding:.7cqw 1.6cqw .7cqw .9cqw; border-radius:1.4cqw;
  background:#fff; box-shadow:0 .8cqw 1.6cqw -.6cqw rgba(10,40,20,.35); font-family:var(--nc-sf); color:#0E1A0B; white-space:nowrap; }
.pk-tag i{ width:2.2cqw; height:2.2cqw; border-radius:50%; background:var(--acc); }
.pk-tag b{ font-weight:800; font-size:3.6cqw; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pk-tag small{ font-weight:600; font-size:2.4cqw; color:rgba(14,26,11,.6); }
/* floating interface cards */
.pk-float{ position:absolute; z-index:5; display:none; opacity:0; translate:0 3cqw; transition:opacity 1s var(--nc-ease) .5s, translate 1.2s var(--nc-ease) .5s; }
.pk-hero.is-in .pk-float{ opacity:1; translate:0 0; }
.pk-mini{ width:100%; padding:1.4cqw 1.5cqw; border-radius:1.8cqw; background:rgba(255,255,255,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2cqw 4cqw -1.6cqw rgba(10,40,20,.45), inset 0 0 0 1px rgba(255,255,255,.7); font-family:var(--nc-sf); color:#0E1A0B; }
.pk-mini__h{ font-weight:700; font-size:1.25cqw; margin-bottom:.8cqw; }
.pk-mini__row{ display:flex; align-items:center; gap:.8cqw; padding:.55cqw 0; font-size:1.05cqw; border-top:1px solid rgba(14,26,11,.08); }
.pk-mini__row i{ width:1.5cqw; height:1.5cqw; border-radius:50%; }
.pk-mini__row span{ flex:1; font-weight:600; }
.pk-mini__row em{ font-style:normal; font-weight:700; font-size:.9cqw; padding:.25cqw .7cqw; border-radius:99px; background:var(--fill); }
.pk-mini__prod{ display:flex; align-items:center; gap:1cqw; }
.pk-mini__prod img{ width:3.6cqw; }
.pk-mini__prod b{ display:block; font-size:1.15cqw; }
.pk-mini__prod small{ display:block; font-size:.9cqw; color:rgba(14,26,11,.55); }
.pk-mini__prod > div{ flex:1; }
.pk-mini__score{ font-style:normal; font-weight:800; font-size:1.6cqw; padding:.5cqw .7cqw; border-radius:1cqw; background:#D0FF96; text-align:center; line-height:1; }
.pk-hero .pk-tag b, .pk-hero .pk-mini b, .pk-hero .pk-mini__h, .pk-hero .pk-mini span{ color:#0E1A0B; }
.pk-hero .pk-tag small, .pk-hero .pk-mini small{ color:rgba(14,26,11,.58); }
.pk-mini__score small{ display:block; font-size:.7cqw; font-weight:700; color:rgba(14,26,11,.6); margin-top:.15cqw; }

/* shelf behind the phone */
.pk-belt{ position:absolute; inset:0; z-index:1; --bs:30cqw;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.pk-belt__item{ position:absolute; left:50%; top:50%; width:26cqw; margin-left:-13cqw; translate:0 -50%; transition:transform 1.2s cubic-bezier(.45,0,.2,1), opacity .6s; }
.pk-belt__item img{ display:block; width:100%; filter:drop-shadow(0 2cqw 2.2cqw rgba(10,40,20,.35)); user-select:none; -webkit-user-drag:none; }

/* the phone = camera view */
.pk-hero__phone{ position:absolute; left:50%; top:50%; width:52cqw; translate:-50% -50%; z-index:4; opacity:0; scale:.94; transition:opacity 1s var(--nc-ease), scale 1.2s var(--nc-ease); }
.pk-hero.is-in .pk-hero__phone{ opacity:1; scale:1; }
.pk-hero__phone .nc-dev{ box-shadow:0 0 0 .3cqw rgba(0,0,0,.4), 0 10cqw 18cqw -6cqw rgba(10,40,20,.6); }
.pk-cam{ position:absolute; inset:0; overflow:hidden; background:radial-gradient(90% 60% at 50% 46%, #2a2f24, #0c0e0b 75%); }
.pk-cam__bar{ position:absolute; left:7cqw; right:7cqw; top:15cqw; z-index:5; color:#F1F4F4; font-family:var(--nc-sf); }
.pk-cam__bar b{ display:block; font-weight:700; font-size:7.6cqw; letter-spacing:-.02em; }
.pk-cam__bar span{ display:block; font-size:3.6cqw; color:rgba(241,244,244,.6); margin-top:1cqw; }
.pk-cam__strip{ position:absolute; left:0; right:0; top:44cqw; height:76cqw; }
.pk-cam__item{ position:absolute; left:50%; top:0; width:76cqw; margin-left:-38cqw; transition:transform 1.2s cubic-bezier(.45,0,.2,1), opacity .6s; }
.pk-cam__item img{ display:block; width:100%; filter:drop-shadow(0 3cqw 3cqw rgba(0,0,0,.5)); user-select:none; -webkit-user-drag:none; }
.pk-hero__phone .pk-scan{ left:50%; width:60cqw; margin-left:-30cqw; height:24cqw; top:calc(44cqw + 76cqw * .78 - 12cqw); }
.pk-hero__phone .pk-scan__box{ border-radius:5cqw; }
.pk-hero__phone .pk-verdict{ top:132cqw; font-size:5cqw; }

@container (min-width:760px){
  .pk-hero::before{ padding-top:56.25%; }
  .pk-shelf{ top:calc(58% + 5.2cqw); }
  .pk-belt__item{ top:58%; }
  .pk-hero__phone{ width:22cqw; }
  .pk-belt{ --bs:19cqw; }
  .pk-belt__item{ width:15cqw; margin-left:-7.5cqw; }
  .pk-tag{ top:auto; bottom:calc(100% + 1cqw); padding:.45cqw 1cqw .45cqw .55cqw; border-radius:.9cqw; gap:.6cqw; }
  .pk-tag i{ width:1.2cqw; height:1.2cqw; } .pk-tag b{ font-size:1.9cqw; } .pk-tag small{ font-size:1.25cqw; }
  .pk-float{ display:block; }
  .pk-float--why{ left:6cqw; top:6cqw; width:17cqw; }
  .pk-float--pick{ right:6cqw; top:7cqw; width:19cqw; }
}

/* ── Verdict meter: one card — product, score, 0–100 scale with the four bands ── */
.pk-meter{ margin-top:clamp(2.5rem,6vw,4rem); padding:clamp(1.6rem,5vw,3.4rem); border-radius:28px; }
.pk-meter__top{ display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:center; justify-items:center; text-align:center; }
.pk-meter__prod{ position:relative; width:min(58vw,300px); aspect-ratio:1; }
.pk-meter__prod img{ position:absolute; inset:0; width:100%; opacity:0; transform:scale(.88) translateY(12px) rotate(-3deg); transition:opacity .5s, transform .8s var(--nc-ease); filter:drop-shadow(0 26px 30px rgba(0,0,0,.55)); }
.pk-meter__prod img.is-on{ opacity:1; transform:none; }
.pk-meter__info{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.pk-meter__score{ display:flex; align-items:baseline; gap:.3rem; line-height:.9; }
.pk-meter__score b{ font-family:var(--nc-sf); font-weight:800; font-size:clamp(5.5rem,24vw,9.5rem); letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--nc-ink); }
.pk-meter__score small{ font-family:var(--nc-sf); font-weight:600; font-size:clamp(1.1rem,4vw,1.6rem); color:var(--nc-faint); }
.pk-meter__name{ font-family:var(--nc-sf); font-weight:600; font-size:clamp(1.05rem,3.6vw,1.35rem); color:var(--nc-soft); }
.pk-chip{ display:inline-flex; align-items:center; gap:.5em; padding:.42em 1em .42em .45em; border-radius:999px; background:var(--fill); color:#000; font-family:var(--nc-sf); font-weight:700; font-size:clamp(.95rem,3.4vw,1.15rem); white-space:nowrap; transition:background .4s; }
.pk-chip i{ width:1.6em; height:1.6em; border-radius:50%; background:var(--acc); color:var(--ic,#000); display:grid; place-items:center; font-style:normal; font-size:.85em; font-weight:800; transition:background .4s; }
.pk-bar{ position:relative; margin-top:clamp(2rem,5vw,3rem); }
.pk-bar__track{ display:flex; gap:4px; height:12px; }
.pk-bar__track i{ border-radius:12px; background:var(--acc); opacity:.28; transition:opacity .45s; }
.pk-bar__track i.is-on{ opacity:1; box-shadow:0 0 18px -2px var(--acc); }
.pk-bar__pin{ position:absolute; top:-7px; left:0; width:26px; height:26px; margin-left:-13px; border-radius:50%; background:#fff; box-shadow:0 0 0 5px var(--acc), 0 8px 18px rgba(0,0,0,.5); transition:left 1s var(--nc-ease), box-shadow .45s; }
.pk-bar__labels{ display:flex; gap:4px; margin-top:.9rem; }
.pk-bar__labels span{ min-width:0; display:flex; flex-direction:column; gap:.1rem; color:var(--nc-faint); transition:color .45s; }
.pk-bar__labels b{ font-family:var(--nc-sf); font-weight:700; font-size:clamp(.72rem,2.6vw,.95rem); white-space:nowrap; }
.pk-bar__labels small{ font-size:clamp(.66rem,2.2vw,.8rem); font-variant-numeric:tabular-nums; }
.pk-bar__labels span.is-on{ color:var(--nc-ink); }
@media (min-width:900px){
  .pk-meter__top{ grid-template-columns:1fr 1fr; justify-items:stretch; text-align:left; gap:4vw; }
  .pk-meter__prod{ justify-self:center; width:min(26vw,340px); }
  .pk-meter__info{ align-items:flex-start; gap:.6rem; }
}

/* ── Goals ── */
.pk-goals{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem; }
.pk-goal{ display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .95rem .55rem .6rem; border-radius:999px; background:var(--nc-card); border:1px solid var(--nc-line); font-size:.92rem; color:var(--nc-soft); transition:background .45s, color .45s, border-color .45s, transform .5s var(--nc-spring); }
.pk-goal i{ width:1.6rem; height:1.6rem; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; }
.pk-goal i::before{ content:""; width:.95rem; height:.95rem; background:currentColor; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; }
.pk-goal.is-on{ background:rgba(208,255,150,.14); border-color:rgba(208,255,150,.55); color:var(--nc-ink); transform:translateY(-2px); }
.pk-goal.is-on i{ background:var(--nc-lime); color:#000; }

/* ── Better Choices: phone + a clear from → to swap (nothing overlaps the screen) ── */
.pk-better{ margin-top:clamp(2.5rem,6vw,4rem); padding:clamp(2rem,6vw,3.6rem) clamp(1.2rem,5vw,4rem); border-radius:28px; display:grid; gap:2.4rem; align-items:center; justify-items:center; }
.pk-better__phone{ width:min(62vw,290px); }
.pk-better__swap{ width:100%; max-width:30rem; display:flex; flex-direction:column; align-items:stretch; }
.pk-card{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:1rem 1.1rem; border-radius:22px; background:#1C1C1C; border:1px solid var(--nc-line); box-shadow:0 1.6rem 2.6rem -1.4rem rgba(0,0,0,.8); }
.pk-card img{ width:3.6rem; height:3.6rem; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.pk-card small{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--nc-faint); }
.pk-card b{ display:block; font-family:var(--nc-sf); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; color:var(--nc-ink); margin-top:.2rem; }
.pk-card span{ display:block; font-size:.88rem; color:var(--nc-soft); margin-top:.15rem; }
.pk-score{ font-style:normal; min-width:3.4rem; padding:.55rem .6rem; border-radius:14px; text-align:center; background:var(--fill); color:#000; font-family:var(--nc-sf); font-weight:800; font-size:1.5rem; line-height:1; font-variant-numeric:tabular-nums; }
.pk-card--to{ border-color:rgba(208,255,150,.45); }
.pk-better__arrow{ display:flex; align-items:center; gap:.8rem; padding:.7rem 0 .7rem 2.7rem; color:var(--nc-lime); font-size:.85rem; font-weight:600; }
.pk-better.is-in .pk-better__arrow i{ animation:pk-pulse 1.4s ease-in-out .5s 2; }
@keyframes pk-pulse{ 50%{ box-shadow:0 0 16px var(--nc-lime); } }
.pk-better.is-in .pk-card--to{ animation:pk-glow 1.6s ease .9s; }
@keyframes pk-glow{ 30%{ box-shadow:0 0 0 2px var(--nc-lime), 0 0 40px -6px var(--nc-lime); } }
.pk-better__arrow i{ width:2px; height:2.6rem; background:linear-gradient(var(--nc-faint),var(--nc-lime)); position:relative; }
.pk-better__arrow i::after{ content:""; position:absolute; left:50%; bottom:-2px; width:10px; height:10px; border-right:2px solid var(--nc-lime); border-bottom:2px solid var(--nc-lime); transform:translateX(-50%) rotate(45deg); }
/* swap animation */
.pk-better .pk-card--from{ transition:opacity .6s, transform .8s var(--nc-ease); }
.pk-better .pk-card--to{ transition:opacity .6s .5s, transform .9s var(--nc-spring) .5s; }
.pk-better .pk-better__arrow{ transition:opacity .5s .3s; }
.pk-better:not(.is-in) .pk-card--from{ opacity:0; transform:translateY(12px); }
.pk-better:not(.is-in) .pk-better__arrow{ opacity:0; }
.pk-better:not(.is-in) .pk-card--to{ opacity:0; transform:translateY(18px) scale(.94); }
@media (min-width:900px){ .pk-better{ grid-template-columns:1fr 1fr; gap:3vw; } .pk-better__phone{ width:min(22vw,300px); } .pk-better__swap{ max-width:32rem; } .pk-card{ padding:1.2rem 1.3rem; } .pk-card b{ font-size:1.3rem; } .pk-card img{ width:4.2rem; height:4.2rem; } }

/* ── Light ↔ dark comparison ── */
.pk-compare{ position:relative; width:min(66vw,300px); margin-inline:auto; }
.pk-compare .nc-dev__screen{ position:relative; }
.pk-compare__top{ position:absolute; inset:0; clip-path:inset(0 0 0 var(--cut,50%)); }
.pk-compare__top img{ width:100%; height:100%; object-fit:cover; display:block; }
.pk-compare__handle{ position:absolute; top:0; bottom:0; left:var(--cut,50%); width:2px; margin-left:-1px; background:rgba(255,255,255,.9); z-index:4; }
.pk-compare__handle::after{ content:"◐"; position:absolute; top:50%; left:50%; translate:-50% -50%; width:2.4rem; height:2.4rem; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; font-size:1.1rem; box-shadow:0 .6rem 1.4rem rgba(0,0,0,.4); }
.pk-compare input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:5; margin:0; }

/* ── Icon set ── */
.pk-icons{ display:grid; grid-template-columns:repeat(6,1fr); gap:.55rem; margin-top:1.2rem; }
.pk-icons i{ aspect-ratio:1; border-radius:16px; background:rgba(255,255,255,.04); display:grid; place-items:center; opacity:0; transform:scale(.6); transition:opacity .4s, transform .6s var(--nc-spring), background .3s; transition-delay:calc(var(--i) * 30ms); }
.pk-icons i::before{ content:""; width:46%; height:46%; background:var(--nc-lime); -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; }
.is-in .pk-icons i, .pk-icons.is-in i{ opacity:1; transform:none; }
@media (hover:hover){ .pk-icons i:hover{ background:rgba(208,255,150,.14); } }
@media (min-width:900px){ .pk-icons{ grid-template-columns:repeat(8,1fr); } }

@media (prefers-reduced-motion:reduce){
  .pk-hero__bg{ animation:none; }
  .pk-hero__phone{ opacity:1; scale:1; transition:none; } .pk-belt__item, .pk-cam__item{ transition:none; }
  .pk-meter__prod img, .pk-bar__pin{ transition:none; }
  .pk-icons i{ opacity:1; transform:none; transition:none; }
}

/* ── Poster hero: Figma panorama + real hand-held iPhone; shelf carousel behind it ── */
.pk-hero--poster{ background:#6E9A3A; }
.pk-hero--poster::before{ padding-top:118%; }
.pk-pbg{ position:absolute; inset:-25%; z-index:-3; background:var(--img) center/cover no-repeat; filter:brightness(.78) saturate(1.2); animation:nc-drift 24s ease-in-out infinite alternate; }
.pk-hero--poster .pk-shelf{ top:68cqw; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06)); }
.pk-hero--poster .pk-belt__item{ top:53cqw; width:30cqw; margin-left:-15cqw; }
.pk-hero--poster .pk-belt{ --bs:34cqw; z-index:1; -webkit-mask-image:none; mask-image:none; }
.pk-hero--poster .pk-belt__item img{ filter:drop-shadow(0 1.2cqw .8cqw rgba(20,50,10,.28)); }
.pk-hand{ position:absolute; z-index:4; left:-48.9cqw; top:-2cqw; width:200cqw; opacity:0; translate:0 8cqw; transition:opacity 1s var(--nc-ease), translate 1.2s var(--nc-ease); pointer-events:none; }
.pk-hero.is-in .pk-hand{ opacity:1; translate:0 0; }
.pk-hand__img{ display:block; width:100% !important; height:auto; }
/* screen = the black area of the photo (1556–2495 × 404–2381 of 4096 × 2731) */
.pk-hand__screen{ position:absolute; left:37.99%; top:14.79%; width:22.95%; height:72.39%; border-radius:13.5% / 6.4%; overflow:hidden; container-type:inline-size; background:#000; }
.pk-hand__screen .pk-cam{ inset:0; }
.pk-hand__screen .pk-cam__strip{ top:34cqw; height:84cqw; }
.pk-hand__screen .pk-cam__item{ width:84cqw; margin-left:-42cqw; transition:transform .9s cubic-bezier(.45,0,.2,1), opacity .5s; }
.pk-hand__screen .pk-scan{ left:12cqw; width:76cqw; height:32cqw; top:calc(34cqw + 84cqw * .78 - 16cqw); margin:0; }
.pk-hand__screen .pk-scan__box{ border-radius:5cqw; }
.pk-hand__screen .pk-verdict{ top:132cqw; font-size:5.4cqw; }
.pk-verdict__n{ font-weight:800; margin-left:.2em; padding-left:.55em; border-left:1px solid rgba(0,0,0,.18); }
.pk-hero .pk-verdict b, .pk-hero .pk-verdict span{ color:#000; }
.pk-hand__screen .pk-cam__btn{ top:186cqw; }
@container (min-width:760px){
  .pk-hero--poster::before{ padding-top:56.25%; }
  .pk-hand{ left:6.97cqw; top:.8cqw; width:87cqw; }
  .pk-hero--poster .pk-belt{ --bs:19cqw; }
  .pk-hero--poster .pk-belt__item{ top:27cqw; width:16cqw; margin-left:-8cqw; }
  .pk-hero--poster .pk-shelf{ top:35.4cqw; }
}
@media (prefers-reduced-motion:reduce){ .pk-pbg{ animation:none; } .pk-hand{ opacity:1; translate:0 0; transition:none; } }

/* levitating poster props: big, partly out of focus, cropped by the frame */
.pk-deco{ position:absolute; pointer-events:none; translate:calc(var(--mx,0) * var(--d,1) * -1.6cqw) calc(var(--my,0) * var(--d,1) * -1.6cqw); transition:translate 1s var(--nc-ease); }
.pk-deco img{ display:block; width:100%; transform:rotate(var(--r,0deg)); animation:pk-sway 7s ease-in-out infinite alternate; animation-delay:var(--sd,0s); }
@keyframes pk-sway{ from{ rotate:-4deg } to{ rotate:5deg } }
.pk-deco--peas{ z-index:0; left:-7cqw; top:-6cqw; width:30cqw; --r:-38deg; --sd:-2s; --d:.5; filter:blur(.9cqw) saturate(.9); opacity:.85; }
.pk-deco--orange{ z-index:0; right:-5cqw; top:-9cqw; width:24cqw; --r:16deg; --d:.4; filter:blur(.8cqw); opacity:.8; }
.pk-deco--alpro{ z-index:0; right:-10cqw; bottom:-6cqw; width:40cqw; --r:28deg; --sd:-5s; --d:.6; filter:blur(1.1cqw); opacity:.8; }
.pk-deco--mintL{ z-index:3; left:14cqw; top:20cqw; width:22cqw; --r:-30deg; --d:1.2; }
.pk-deco--mintR{ z-index:5; left:62cqw; top:40cqw; width:24cqw; --r:24deg; --d:1.6; }
/* infographic cards (desktop) */
.pk-ig{ position:absolute; z-index:6; display:none; padding:1.4cqw 1.6cqw; border-radius:1.8cqw; background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 2cqw 4cqw -2cqw rgba(20,60,20,.45), inset 0 0 0 1px rgba(255,255,255,.8); font-family:var(--nc-sf); color:#0E1A0B; opacity:0; translate:0 2cqw; transition:opacity 1s var(--nc-ease) .7s, translate 1.2s var(--nc-ease) .7s; }
.pk-hero.is-in .pk-ig{ opacity:1; translate:0 0; }
.pk-ig p{ font-weight:600; font-size:.85cqw; letter-spacing:.12em; text-transform:uppercase; color:rgba(14,26,11,.55); margin-bottom:.4cqw; }
.pk-ig__row{ display:grid; grid-template-columns:4.4cqw 1fr 3.4cqw; align-items:center; gap:.7cqw; padding:.22cqw 0; font-size:1cqw; font-weight:600; }
.pk-ig__row i{ height:.7cqw; border-radius:1cqw; background:rgba(14,26,11,.1); overflow:hidden; }
.pk-ig__row b{ display:block; height:100%; width:3%; border-radius:inherit; background:#0CE07A; transition:width 1s var(--nc-ease), background .5s; }
.pk-ig__row em{ font-style:normal; text-align:right; font-variant-numeric:tabular-nums; color:rgba(14,26,11,.7); font-size:1cqw; }
.pk-ig--score{ align-items:center; gap:1.4cqw; }
.pk-ig__ring{ position:relative; width:7cqw; aspect-ratio:1; }
.pk-ig__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.pk-ig__ring circle{ fill:none; stroke-width:9; stroke:rgba(14,26,11,.1); }
.pk-ig__ring .fg{ stroke-linecap:round; stroke-dasharray:264; stroke-dashoffset:264; transition:stroke-dashoffset 1s var(--nc-ease), stroke .5s; }
.pk-ig__ring b{ position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:2.4cqw; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pk-ig--score strong{ display:block; font-weight:800; font-size:1.9cqw; letter-spacing:-.02em; }
.pk-ig--score small{ display:block; font-size:.95cqw; color:rgba(14,26,11,.55); margin-top:.3cqw; }
.pk-hero .pk-ig span, .pk-hero .pk-ig b, .pk-hero .pk-ig strong{ color:#0E1A0B; }
@container (min-width:760px){
  .pk-ig{ display:block; }
  .pk-ig--score{ display:flex; }
  .pk-ig, .pk-ig--score{ top:41cqw; width:20cqw; height:12.6cqw; box-sizing:border-box; }
  .pk-ig--facts{ left:4cqw; padding-top:1.1cqw; }
  .pk-ig--score{ right:4cqw; }
  .pk-deco--peas{ left:-1cqw; top:-3cqw; width:19cqw; filter:blur(.22cqw); opacity:1; }
  .pk-deco--orange{ display:none; }
  .pk-deco--alpro{ right:-2cqw; bottom:auto; top:-5cqw; width:20cqw; filter:blur(.18cqw); opacity:1; }
  .pk-deco--mintL{ left:30cqw; top:8cqw; width:10cqw; }
  .pk-deco--mintR{ left:58cqw; top:28cqw; width:11cqw; }
}
@media (prefers-reduced-motion:reduce){ .pk-deco img{ animation:none; } .pk-ig{ opacity:1; translate:0 0; transition:none; } }