/* Home v4 (v11): the left panel is one stage for Prova S1 and Prova N1, switched by an Apple-style segmented pill.
   Each product owns its copy, CTAs, render (feathered to black on every edge), quiet trace and floating product bar
   (float-bar-home.css); one shared status line. S1 violet, N1 plum (hue 285 to 305), no pink, no starfield, no dashboard.
   Loads after home-v3.css. The right side (V1 order form, magenta) is untouched. */
.hs{--hs-pad:clamp(24px,3.4vw,56px);--hs-ease:cubic-bezier(.2,.7,.2,1);container-type:inline-size}
.hs :focus-visible{outline-color:#b8a8ff}

/* ---------- Copy ---------- */
.hs-copy{position:relative;z-index:3;flex:none;text-align:center;padding:clamp(14px,2.2vh,22px) var(--hs-pad) 0}
.hs-h{margin:0;display:flex;flex-direction:column;align-items:center}
.hs-name{font-size:clamp(19px,2.9cqw,26px);line-height:1.1;font-weight:600;letter-spacing:.004em;color:#f5f5f7}
.hs-tag{margin-top:0;font-size:clamp(40px,8.4cqw,84px);line-height:1.02;letter-spacing:-.026em;font-weight:500;text-wrap:balance;
  background:linear-gradient(100deg,#e4ddff 0%,#b3a4ff 34%,#8a86ff 62%,#6fa6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.hs-sub{margin:14px auto 0;max-width:29em;font-size:clamp(17px,2.6cqw,21px);line-height:1.38;letter-spacing:.004em;color:#a1a1a6;text-wrap:balance}
.hs-ctas{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 26px;margin-top:clamp(20px,3vh,28px)}
.hs-explore{background:#f5f5f7;color:#000}
.hs-explore:hover{background:#fff;box-shadow:0 0 0 6px rgba(139,123,255,.16),0 10px 40px -8px rgba(139,123,255,.5)}
.hs-link{display:inline-flex;align-items:center;gap:4px;font-size:17px;font-weight:500;letter-spacing:-.01em;color:#b8a8ff}
.hs-link::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:rotate(45deg);margin-left:3px}
.hs-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Hero render: base + LED (screen), feathered to black on all four edges ----------
   Render geometry (3:2): the slide spans x 12.8 to 87.4 %, y 42.6 to 84.6 %; its centre sits at 0.424 x the image width
   from the top. The image is sized from the visual band (.hs-shot is a size container) so the slide always fits it. */
.hs-shot{position:relative;z-index:1;flex:1 1 auto;min-height:150px;container-type:size;pointer-events:none}
.hs-img{--w:min(118cqw,300cqh);position:absolute;left:50%;top:calc(56cqh - var(--w) * .424);width:var(--w);aspect-ratio:3/2;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 30%,#000 40%,#000 86%,transparent 98%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 30%,#000 40%,#000 86%,transparent 98%);
  mask-composite:intersect}
.hs-img picture,.hs-img img{display:block;width:100%;height:auto}
.hs-led{position:absolute;inset:0;mix-blend-mode:screen}
.hs-led img{display:block;width:100%;height:auto}

/* ---------- S1 temperature trace (illustrative), journey style ---------- */
.hs-trace{position:relative;z-index:3;flex:none;margin:0 var(--hs-pad);padding-top:26px}
.hs-now{position:absolute;right:0;top:0;display:flex;gap:7px;align-items:baseline;margin:0;font-size:13px;line-height:1.2;color:#a1a1a6;white-space:nowrap}
.hs-now b{font-size:14px;font-weight:600;color:#f5f5f7}
.hs-plot{position:relative;height:clamp(32px,5vh,52px)}
.hs-plot svg{display:block;width:100%;height:100%;overflow:visible}
.hs-grid path{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.hs-grid .sep{stroke:rgba(255,255,255,.14);stroke-dasharray:2 4}
.hs-all{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hs-line{fill:none;stroke:#f5f5f7;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:opacity .7s ease}
.hs-dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(160,148,255,.95),0 0 18px 4px rgba(139,123,255,.4);transition:opacity .7s ease}
.hs-trace.fade .hs-line,.hs-trace.fade .hs-dot{opacity:0}
.hs-ticks{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));font-size:12px;line-height:1.2;color:#6e6e73}
.hs-ticks li{padding-left:2px;white-space:nowrap;transition:color .4s}
.hs-ticks li.on{color:#f5f5f7}

/* ---------- Floating product bar + status line ---------- */
.hs-bar{position:relative;z-index:4;flex:none;width:min(calc(100% - 32px),600px);margin:clamp(16px,2.6vh,24px) auto 0}
.hs-fine{flex:none;margin:0;padding:12px 24px 14px;text-align:center;font-size:12px;line-height:1.5;letter-spacing:.022em;color:#86868b}

/* ---------- Motion: the same entrance and LED fade-in as the S1 hero ---------- */
@media (prefers-reduced-motion:no-preference){
  .hs-copy{animation:hs-up 1.1s var(--hs-ease) backwards}
  .hs-img{animation:hs-in 1.6s var(--hs-ease) .15s backwards}
  .hs-led{animation:hs-led 2.2s cubic-bezier(.3,.1,.2,1) 1.1s backwards}
  @keyframes hs-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes hs-in{from{opacity:0;transform:translate(-50%,24px) scale(.985)}to{opacity:1;transform:translate(-50%,0)}}
  @keyframes hs-led{0%{opacity:0}55%{opacity:1}72%{opacity:.82}100%{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.hs-line,.hs-dot,.hs-ticks li{transition:none}}

/* ---------- Header: the S1 link in S1 violet (V1 unchanged this round) ---------- */
.gn-g.gn-s1{background-image:linear-gradient(90deg,#b3a4ff,#8a86ff)}

/* ---------- Short desktop windows ---------- */
@media (min-width:1069px) and (max-height:780px){
  .hs .hs-top{padding-top:calc(var(--nav-h) + 18px)}
  .hs-copy{padding-top:12px}
  .hs-sub{margin-top:10px;font-size:17px}
  .hs-ctas{margin-top:18px}
  .hs-trace{padding-top:22px}
  .hs-bar{margin-top:14px}
  .hs-fine{padding:10px 24px 10px}
}

/* ---------- Stacked (tablet and phone): short panel above the order form ---------- */
@media (max-width:1068px){
  .hs{height:auto;min-height:0;max-height:none}
  .hs .hs-top{padding-top:calc(var(--nav-h) + clamp(28px,4vh,48px))}
  .hs .hs-stage{flex:none;grid-template-rows:auto}
  .hs-shot{flex:1 0 auto;height:clamp(160px,44cqw,400px);min-height:0}   /* definite base height (cq units), grows in the shorter product */
  .hs-plot{height:44px}
  .hs-bar{margin-top:22px}
  .hs-fine{padding-bottom:18px}
}
@media (max-width:734px){
  .hs .hs-top{padding-top:calc(var(--nav-h) + 16px)}
  .hs-copy{padding:14px 20px 0}
  .hs-shot{height:clamp(150px,40cqw,240px)}
  .hs-fine{padding-bottom:14px}
  .hs-tag{font-size:clamp(40px,11.6vw,52px);max-width:9em}
  .hs-sub{margin-top:12px;max-width:21em;font-size:17px}
  .hs-ctas{flex-direction:column;gap:12px;margin-top:18px}
  .hs-img{--w:min(120cqw,300cqh)}
  .hs-trace{margin:0 20px;padding-top:24px}
  .hs-plot{height:36px}
  .hs-now{font-size:12px}
  .hs-now b{font-size:13px}
  .hs-ticks{font-size:10px}
  .hs-bar{width:calc(100% - 24px);margin-top:16px}
}

/* =========================================================
   v11: product switch (Prova S1 | Prova N1) and the shared stage
   ========================================================= */
.hs-top{position:relative;z-index:6;flex:none;display:flex;justify-content:center;padding:calc(var(--nav-h) + clamp(24px,4.6vh,56px)) 20px 0}
.hs-sw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;
  background:rgba(22,22,24,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hs-sw button{position:relative;z-index:1;height:32px;padding:0 18px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;font-weight:600;letter-spacing:.004em;
  color:#86868b;white-space:nowrap;cursor:pointer;transition:color .4s}
.hs-sw button:hover{color:#d2d2d7}
.hs-sw button[aria-selected="true"]{color:#f5f5f7}
.hs-sw button:focus-visible{outline:2px solid #b8a8ff;outline-offset:2px}
.hs[data-p="n1"] .hs-sw button:focus-visible{outline-color:#c7a3cf}
/* the active fill slides between the segments; S1 violet, N1 plum */
.hs-sw-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;overflow:hidden;
  background:rgba(139,123,255,.2);box-shadow:inset 0 0 0 1px rgba(167,150,255,.3);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),background-color .55s,box-shadow .55s}
.hs[data-p="n1"] .hs-sw-thumb{transform:translateX(100%);background:rgba(138,79,140,.34);box-shadow:inset 0 0 0 1px rgba(199,163,207,.3)}
/* auto-advance progress: a thin fill inside the active segment */
.hs-sw-prog{position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;border-radius:2px;background:#b8a8ff;opacity:.8;transform-origin:left center;transform:scaleX(var(--p,0));transition:opacity .4s}
.hs[data-p="n1"] .hs-sw-prog{background:#c7a3cf}
.hs.hs-manual .hs-sw-prog{opacity:0}

/* one stage: both products sit in the same cell and cross-dissolve (transform + opacity only) */
.hs-stage{position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.hs-prod{position:relative;z-index:0;grid-area:1/1;display:flex;flex-direction:column;min-width:0;min-height:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .8s cubic-bezier(.4,0,.2,1),visibility 0s .8s}
.hs-prod.on{z-index:1;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .8s cubic-bezier(.4,0,.2,1),visibility 0s}
.hs-prod .hs-copy,.hs-prod .hs-trace,.hs-prod .hs-bar{transition:transform .8s var(--hs-ease)}
.hs-prod .hs-img{transition:transform 1s var(--hs-ease)}
.hs-prod:not(.on) .hs-copy{transform:translateY(10px)}
.hs-prod:not(.on) .hs-trace,.hs-prod:not(.on) .hs-bar{transform:translateY(6px)}
.hs-prod:not(.on) .hs-img{transform:translateX(-50%) scale(.985)}

/* ---------- N1: plum, the dark jar render, fixative trace ---------- */
.hs-n1{--fb-acc:#6e3a6c;--fb-acc-h:#8a4f8c;--fb-ring:#c7a3cf}
.hs-n1 :focus-visible{outline-color:#c7a3cf}
.hs-n1 .hs-tag{background-image:linear-gradient(100deg,#f3e9f5 0%,#d7b9de 34%,#b083bb 64%,#8a62b0 100%)}
.hs-n1 .hs-explore:hover{box-shadow:0 0 0 6px rgba(138,79,140,.2),0 10px 40px -8px rgba(138,79,140,.55)}
.hs-n1 .hs-link{color:#c7a3cf}
/* Render geometry (16:9): the jar spans x 36 to 64 %, y 12.3 to 90.1 %; its centre sits 0.288 x the image width from the
   top and it stands 0.4375 x the width tall, so 200cqh keeps the whole jar inside the band with room to spare. */
.hs-n1 .hs-img{--w:min(210cqw,200cqh);top:calc(50cqh - var(--w) * .288);aspect-ratio:16/9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 93%,transparent 100%)}
.hs-n1 .hs-dot{box-shadow:0 0 6px 1px rgba(199,163,207,.95),0 0 18px 4px rgba(176,131,187,.45)}
.hs-ev{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.25;vector-effect:non-scaling-stroke;transition:stroke .4s}
.hs-ev.on{stroke:rgba(239,227,242,.85)}

/* header: N1 after S1, in plum */
.gn-g.gn-n1{background-image:linear-gradient(90deg,#d7b9de,#b083bb)}

@media (max-width:734px){
  .hs-sw button{height:34px;padding:0 20px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .hs-prod,.hs-prod.on,.hs-prod .hs-copy,.hs-prod .hs-trace,.hs-prod .hs-bar,.hs-prod .hs-img,.hs-sw-thumb{transition:none}
  .hs-prod:not(.on) .hs-copy,.hs-prod:not(.on) .hs-trace,.hs-prod:not(.on) .hs-bar{transform:none}
  .hs-prod:not(.on) .hs-img{transform:translateX(-50%)}
}

/* v12: the switch's layers exist before the cross-fade starts, so the first frame of a swap never stalls on layer setup */
@media (prefers-reduced-motion:no-preference){.hs-prod{will-change:opacity}.hs-prod .hs-img{will-change:transform}.hs-dot{will-change:transform}}

/* v12: with reduced motion the "other 89 days" missed-day beat holds still (look unchanged otherwise) */
@media (prefers-reduced-motion:reduce){.y89.seen .y-v{animation:none}}