/* ===== Noid Health shared design system (merged from redesign concept files) ===== */
/* Base tokens + index.html components */

  /* =========================================================
     FÄRGPALETT — samma grundfärger som noidhealth.se idag
     (vit/ljusgrå bakgrund, mörk text, rosa/magenta brandfärg).
     Här mörklagd för en "high-tech wellness"-känsla.
     OBS: exakt rosa-nyans kunde inte 100% verifieras utan
     webbläsartillgång — justera --pink nedan vid behov.
     ========================================================= */
  :root{
    --bg-0:#eee4cd;
    --bg-1:#eee4cd;
    --nav-footer-bg:#19162c;
    --bg-2:#d3bf95;
    --surface:rgba(255,255,255,0.55);
    --surface-strong:rgba(255,255,255,0.82);
    --border:rgba(33,30,58,0.12);
    --pink:#e4b1cc;
    --pink-2:#c2578f;
    --pink-glow:rgba(228,177,204,0.55);
    --white:#211e3a;
    --text-dim:#5c5346;
    --text-dimmer:#948a79;
    --light-bg:#f7f6f8;
    --charcoal:#2a2645;
    --mono:'Prata', serif;
    --sans:'Urbanista', sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-0);
    color:var(--white);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  section{position:relative;}

  ::selection{background:var(--pink);color:#fff;}

  /* ---------- background texture ---------- */
  .grid-overlay{
    position:absolute;top:0;left:0;right:0;height:380px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, black 0%, black 55%, transparent 92%);
    mask-image:linear-gradient(180deg, black 0%, black 55%, transparent 92%);
    pointer-events:none;
  }
  .ri0{
    position:absolute;top:-10px;left:-6%;width:54%;height:230px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade0 17s ease-in-out 0s infinite;
  }
  .rb0{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob0 7.5s ease-in-out infinite;
  }
  .rd0{
    position:absolute;top:0;left:0;
    animation:ribbonDrift0 34s linear infinite;
  }
  @keyframes ribbonDrift0{
    from{transform:translateX(0px);}
    to{transform:translateX(-700px);}
  }
  @keyframes ribbonBob0{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(11px);}
  }
  @keyframes ribbonFade0{
    0%,100%{opacity:0;}
    35%{opacity:0.5;}
    65%{opacity:0.5;}
  }
  .ri1{
    position:absolute;top:55px;left:42%;width:58%;height:210px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade1 22s ease-in-out 6s infinite;
  }
  .rb1{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob1 9.5s ease-in-out infinite;
  }
  .rd1{
    position:absolute;top:0;left:0;
    animation:ribbonDrift1 41s linear infinite;
  }
  @keyframes ribbonDrift1{
    from{transform:translateX(-700px);}
    to{transform:translateX(0px);}
  }
  @keyframes ribbonBob1{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(15px);}
  }
  @keyframes ribbonFade1{
    0%,100%{opacity:0;}
    35%{opacity:0.4;}
    65%{opacity:0.4;}
  }
  .ri2{
    position:absolute;top:140px;left:-9%;width:50%;height:210px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade2 19s ease-in-out 11s infinite;
  }
  .rb2{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob2 6s ease-in-out infinite;
  }
  .rd2{
    position:absolute;top:0;left:0;
    animation:ribbonDrift2 27s linear infinite;
  }
  @keyframes ribbonDrift2{
    from{transform:translateX(0px);}
    to{transform:translateX(-700px);}
  }
  @keyframes ribbonBob2{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(8px);}
  }
  @keyframes ribbonFade2{
    0%,100%{opacity:0;}
    35%{opacity:0.35;}
    65%{opacity:0.35;}
  }
  .ri3{
    position:absolute;top:175px;left:46%;width:60%;height:230px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade3 25s ease-in-out 3s infinite;
  }
  .rb3{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob3 10.5s ease-in-out infinite;
  }
  .rd3{
    position:absolute;top:0;left:0;
    animation:ribbonDrift3 48s linear infinite;
  }
  @keyframes ribbonDrift3{
    from{transform:translateX(-700px);}
    to{transform:translateX(0px);}
  }
  @keyframes ribbonBob3{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(17px);}
  }
  @keyframes ribbonFade3{
    0%,100%{opacity:0;}
    35%{opacity:0.45;}
    65%{opacity:0.45;}
  }
  .orb{
    position:absolute;border-radius:50%;
    filter:blur(80px);
    pointer-events:none;
    opacity:0.55;
  }

  /* ---------- nav ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:18px 0;
    background:var(--nav-footer-bg);
    transition:padding .3s ease, box-shadow .3s ease;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  header.scrolled{
    padding:12px 0;
    box-shadow:0 8px 24px -14px rgba(0,0,0,0.45);
  }
  nav{display:flex;align-items:center;justify-content:space-between;}
  .logo{
    font-family:var(--mono);
    font-weight:700;
    font-size:19px;
    letter-spacing:0.5px;
    display:flex;align-items:center;gap:9px;
  }
  .logo .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--pink);
    box-shadow:0 0 10px 2px var(--pink-glow);
  }
  .logo-img{height:42px;width:auto;display:block;}
  .nav-links{display:flex;gap:34px;align-items:center;}
  .nav-links a{
    font-size:14.5px;color:rgba(255,255,255,0.75);
    transition:color .2s ease;
    font-weight:500;
  }
  .nav-links a:hover{color:#ffffff;}
  .nav-links a.active{color:#ffffff;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 24px;
    border-radius:999px;
    font-size:14.5px;font-weight:600;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background:linear-gradient(135deg, var(--pink), #c98aab);
    color:var(--white);
    box-shadow:0 0 0 rgba(228,177,204,0), 0 8px 24px -8px var(--pink-glow);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 0 26px 4px var(--pink-glow), 0 14px 30px -10px var(--pink-glow);
  }
  .btn-ghost{
    background:var(--surface);
    color:var(--white);
    border-color:var(--border);
    backdrop-filter:blur(8px);
  }
  .btn-ghost:hover{
    background:var(--surface-strong);
    border-color:rgba(33,30,58,0.22);
    transform:translateY(-2px);
  }
  .btn-sm{padding:9px 18px;font-size:13.5px;}
  .pkg-soon{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 24px;
    border-radius:999px;
    font-size:14.5px;font-weight:600;
    color:var(--text-dimmer);
    background:rgba(33,30,58,0.05);
    border:1px solid var(--border);
    white-space:nowrap;
  }

  /* ---------- hero ---------- */
  .hero{
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:120px;padding-bottom:80px;
    overflow:hidden;
  }
  .orb-1{width:520px;height:520px;background:radial-gradient(circle, var(--pink) 0%, transparent 70%); top:-160px; left:-120px;}
  .orb-2{width:460px;height:460px;background:radial-gradient(circle, #c98aab 0%, transparent 70%); top:120px; right:-160px; opacity:0.3;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--mono);
    font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
    color:var(--pink-2);
    background:rgba(228,177,204,0.08);
    border:1px solid rgba(228,177,204,0.25);
    padding:7px 14px;border-radius:999px;
    margin-bottom:26px;
  }
  .pulse-dot{
    width:6px;height:6px;border-radius:50%;background:var(--pink);
    box-shadow:0 0 8px 2px var(--pink-glow);
    animation:pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.4;transform:scale(0.7);}
  }
  .hero h1{
    font-family:var(--mono);
    font-size:clamp(38px, 6vw, 74px);
    line-height:1.04;
    font-weight:400;
    letter-spacing:-0.5px;
    max-width:820px;
  }
  .hero h1 .grad{
    background:linear-gradient(90deg, #c2578f, #8a3665);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p.lead{
    margin-top:26px;
    font-size:18px;line-height:1.65;
    color:var(--text-dim);
    max-width:560px;
  }
  .hero-cta{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;}
  /* Sized to the section's own height (top+bottom, not a fixed width) so the
     image's built-in top/bottom fade always lands exactly at the hero's
     edges — previously a fixed width produced a natural height taller than
     the section, and overflow:hidden chopped straight through the pattern
     instead of showing its fade. */
  .hero-illustration{position:absolute;right:-20px;top:0;bottom:0;width:auto;z-index:0;pointer-events:none;}
  .hero-illustration img{height:100%;width:auto;max-width:44vw;display:block;}
  .hero .wrap{position:relative;z-index:1;}
  @media (max-width:1100px){ .hero-illustration{display:none;} }

  .stat-row{
    display:flex;gap:0;margin-top:76px;
    border-top:1px solid var(--border);
    padding-top:32px;
    max-width:720px;
    flex-wrap:wrap;
  }
  .stat{flex:1;min-width:150px;padding-right:24px;}
  .stat .num{
    font-family:var(--mono);
    font-size:32px;font-weight:400;
    background:linear-gradient(90deg,#211e3a,#4a4568);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat .label{font-size:13px;color:var(--text-dimmer);margin-top:4px;}

  /* ---------- about-page hero (text + photo) ---------- */
  .about-hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:center;}
  .about-hero-photo{position:relative;}
  .about-hero-orb{
    position:absolute; width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle, var(--pink) 0%, transparent 70%);
    opacity:0.4; top:-70px; right:-70px; z-index:0; pointer-events:none;
  }
  .about-hero-photo .photo-card{position:relative;z-index:1;height:420px;}
  @media (max-width:920px){
    .about-hero-grid{grid-template-columns:1fr;gap:32px;}
    .about-hero-photo .photo-card{height:280px;}
  }

  /* ---------- section heading ---------- */
  .section-pad{padding:120px 0;}
  .section-head{max-width:640px;margin-bottom:64px;}
  .section-head .eyebrow{margin-bottom:18px;}
  .section-head h1, .section-head h2{
    font-family:var(--mono);
    font-size:clamp(28px,4vw,42px);
    font-weight:400;
    letter-spacing:0;
    line-height:1.15;
  }
  .section-head p{
    margin-top:16px;color:var(--text-dim);font-size:16.5px;line-height:1.6;
  }
  .center{text-align:center;margin-left:auto;margin-right:auto;}

  /* ---------- how it works ---------- */
  .steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    position:relative;
  }
  /* steps-4: pages with a 4-step sequence instead of 3 — 2x2 instead of a
     3-col grid that would strand the 4th step alone on its own row. */
  .steps-4{
    grid-template-columns:repeat(2,1fr);
  }
  .step-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:34px 28px;
    position:relative;
    transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .step-card:hover{
    border-color:rgba(228,177,204,0.4);
    transform:translateY(-4px);
    background:var(--surface-strong);
  }
  .step-num{
    font-family:var(--mono);
    font-size:13px;color:var(--pink-2);
    letter-spacing:1px;
    margin-bottom:18px;
    display:block;
  }
  .step-card h3{font-size:20px;font-weight:600;margin-bottom:10px;}
  .step-card p{color:var(--text-dim);font-size:14.5px;line-height:1.6;}

  /* ---------- tech / data section (light-on-dark visualization) ---------- */
  .tech-section{
    background:var(--bg-1);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .tech-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
  }
  .rings{
    position:relative;
    width:100%;aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;
  }
  .rings svg{width:100%;height:100%;}
  .ring-center{
    position:absolute;text-align:center;
  }
  .ring-center .big{
    font-family:var(--mono);font-size:40px;font-weight:400;
  }
  .ring-center .small{font-size:12px;color:var(--text-dimmer);margin-top:4px;letter-spacing:1px;text-transform:uppercase;}

  .feature-list{display:flex;flex-direction:column;gap:22px;margin-top:30px;}
  .feature-item{display:flex;gap:16px;}
  .feature-icon{
    width:38px;height:38px;flex:none;
    border-radius:10px;
    background:rgba(228,177,204,0.1);
    border:1px solid rgba(228,177,204,0.25);
    display:flex;align-items:center;justify-content:center;
    color:var(--pink-2);
  }
  .feature-item h4{font-size:15.5px;font-weight:600;margin-bottom:4px;}
  .feature-item p{font-size:14px;color:var(--text-dim);line-height:1.55;}

  /* ---------- pricing / undersökningar ---------- */
  .plans{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  }
  .plan{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px 24px;
    display:flex;flex-direction:column;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
    position:relative;
  }
  .plan:hover{transform:translateY(-6px);border-color:rgba(33,30,58,0.2);}
  .plan.popular{
    border-color:var(--pink);
    background:linear-gradient(180deg, rgba(228,177,204,0.09), var(--surface) 40%);
    box-shadow:0 0 40px -12px var(--pink-glow);
  }
  .badge{
    position:absolute;top:-13px;left:24px;
    background:linear-gradient(135deg,var(--pink),#c98aab);
    color:var(--white);font-size:11.5px;font-weight:700;
    padding:5px 12px;border-radius:999px;
    letter-spacing:0.5px;
  }
  .plan-name{font-size:15px;color:var(--text-dim);font-weight:600;margin-bottom:10px;}
  .plan-price{font-family:var(--mono);font-size:30px;font-weight:400;margin-bottom:2px;}
  .plan-price span{font-size:14px;color:var(--text-dimmer);font-weight:500;}
  .plan-desc{font-size:13.5px;color:var(--text-dim);margin:14px 0 20px;line-height:1.55;min-height:56px;}
  .plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1;}
  .plan li{font-size:13.5px;color:var(--text-dim);display:flex;gap:9px;align-items:flex-start;}
  .plan li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pink-2);margin-top:6px;flex:none;}
  .plans-3{grid-template-columns:repeat(3,1fr);}
  .plans-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto;}

  /* ---------- tre ingångar (entry cards) ---------- */
  .entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;}
  .entry-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:32px 26px;
    display:flex;flex-direction:column;
    min-width:0;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .entry-card:hover{transform:translateY(-4px);border-color:rgba(228,177,204,0.4);background:var(--surface-strong);}
  .entry-icon{
    width:40px;height:40px;border-radius:10px;
    background:rgba(228,177,204,0.14);
    border:1px solid rgba(228,177,204,0.3);
    display:flex;align-items:center;justify-content:center;
    color:#8a3665;font-size:18px;
    margin-bottom:18px;
  }
  .entry-card h3{font-size:19px;font-weight:600;margin-bottom:8px;}
  .entry-tag{font-size:13px;color:var(--pink-2);font-weight:600;margin-bottom:12px;}
  .entry-desc{font-size:14px;color:var(--text-dim);line-height:1.6;margin-bottom:20px;flex:1;}
  .entry-price{font-family:var(--mono);font-size:20px;margin-bottom:18px;}
  .entry-bridge{
    margin-top:40px;
    background:var(--surface-strong);
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px 34px;
    text-align:center;
  }
  .entry-bridge h4{font-family:var(--mono);font-weight:400;font-size:20px;margin-bottom:8px;}
  .entry-bridge p{font-size:14.5px;color:var(--text-dim);max-width:560px;margin:0 auto 20px;}

  /* ---------- thermalytix / blodanalys feature blocks ---------- */
  .therm-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:520px;}
  .therm-mini{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;}
  .therm-mini.highlight{border-color:var(--pink);background:linear-gradient(180deg, rgba(228,177,204,0.09), var(--surface) 60%);}
  .therm-mini h4{font-size:14.5px;font-weight:600;margin-bottom:6px;}
  .therm-mini p{font-size:13px;color:var(--text-dim);line-height:1.5;margin:0;}
  .feature-photo{
    position:relative;width:100%;border-radius:20px;overflow:hidden;
    aspect-ratio:4/3;
    background:linear-gradient(135deg, rgba(228,177,204,0.24), rgba(211,191,149,0.20));
  }
  .feature-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .feature-photo.placeholder-photo{
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:24px;font-size:13.5px;color:var(--text-dimmer);
  }

  /* ---------- quiz prompt (under undersökningar) ---------- */
  .quiz-prompt{
    margin-top:40px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    background:var(--surface-strong);
    border:1px solid var(--border);
    border-radius:20px;
    padding:28px 32px;
  }
  .quiz-prompt h4{font-family:var(--mono);font-weight:400;font-size:20px;margin-bottom:6px;}
  .quiz-prompt p{font-size:14.5px;color:var(--text-dim);}
  @media (max-width:600px){.quiz-prompt{flex-direction:column;align-items:flex-start;}.quiz-prompt .btn{width:100%;}}

  /* ---------- modalities ---------- */
  .modal-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  }
  .modal-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:26px 20px;
    text-align:center;
    transition:transform .25s ease, border-color .25s ease;
  }
  .modal-card:hover{transform:translateY(-4px);border-color:rgba(228,177,204,0.35);}
  .modal-card .ic{font-size:26px;margin-bottom:14px;}
  .modal-card h4{font-size:14px;font-weight:600;}

  /* ---------- section header row (heading + right-aligned link) ---------- */
  .section-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:50px;}
  .section-head-row .section-head{margin-bottom:0;}
  .section-link{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--pink-2);white-space:nowrap;transition:color .2s ease;}
  .section-link:hover{color:#8a3665;}
  button.section-link{background:none;border:none;padding:0;cursor:pointer;font:inherit;}

  /* ---------- mätinstrument ---------- */
  .instrument-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  /* instrument-grid-7: 7 cards in a 3-col track leaves a lone orphan on row 3 —
     switch to a 6-col track and let the last card span the full width. */
  .instrument-grid-7{grid-template-columns:repeat(6,1fr);}
  .instrument-grid-7 .instrument-card{grid-column:span 2;}
  .instrument-grid-7 .instrument-card:nth-child(7){grid-column:span 6;}
  /* instrument-grid-5: 5 cards in a 3-col track leaves a half-empty row 2 —
     same 6-col treatment as photo-grid-5, 3 then 2 filling the row edge-to-edge. */
  .instrument-grid-5{grid-template-columns:repeat(6,1fr);}
  .instrument-grid-5 .instrument-card{grid-column:span 2;}
  .instrument-grid-5 .instrument-card:nth-child(4),
  .instrument-grid-5 .instrument-card:nth-child(5){grid-column:span 3;}
  .instrument-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:28px 24px;
    transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .instrument-card:hover{border-color:rgba(228,177,204,0.4);transform:translateY(-4px);background:var(--surface-strong);}
  .instrument-card .ic{
    width:36px;height:36px;border-radius:10px;
    background:rgba(228,177,204,0.14);
    border:1px solid rgba(228,177,204,0.3);
    display:flex;align-items:center;justify-content:center;
    color:#8a3665;font-family:var(--mono);font-size:15px;
    margin-bottom:16px;
  }
  .instrument-card h4{font-size:16px;font-weight:600;margin-bottom:8px;}
  .instrument-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;}
  .instrument-card .img-tile{
    position:relative;
    width:100%;aspect-ratio:3/4;border-radius:12px;
    margin-bottom:18px;overflow:hidden;
    background:linear-gradient(135deg, rgba(228,177,204,0.24), rgba(211,191,149,0.20));
  }
  .instrument-card .img-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .scanscroll-note{max-width:760px;margin:40px auto 0;text-align:center;font-size:13.5px;color:var(--text-dimmer);line-height:1.7;}

  /* ---------- vad vi gör med det vi hittar ---------- */
  .treat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .treat-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px 26px;
    display:flex;flex-direction:column;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .treat-card:hover{transform:translateY(-4px);border-color:rgba(228,177,204,0.4);background:var(--surface-strong);}
  .treat-card h4{font-size:18px;font-weight:600;margin-bottom:10px;}
  .treat-card p{font-size:14px;color:var(--text-dim);line-height:1.6;flex:1;margin-bottom:20px;}
  .treat-meta{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--border);}
  .treat-price{font-family:var(--mono);font-size:19px;font-weight:400;}
  .treat-duration{font-size:12.5px;color:var(--text-dimmer);}

  /* ---------- testimonials ---------- */
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .testi-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:28px;
  }
  .testi-card p{font-size:14.5px;line-height:1.65;color:#4a4436;margin-bottom:20px;}
  .testi-who{display:flex;align-items:center;gap:12px;}
  .testi-avatar{
    width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg,var(--pink),#211e3a);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;
    color:#fff;
  }
  .testi-name{font-size:13.5px;font-weight:600;}
  .testi-meta{font-size:12px;color:var(--text-dimmer);}
  .placeholder-note{
    font-size:11.5px;color:var(--text-dimmer);margin-top:20px;font-style:italic;
  }

  /* ---------- reviews: rating strip + auto-scrolling marquee ---------- */
  .reviews-rating-strip{
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    margin:-10px auto 34px;
  }
  .reviews-rating-strip .rating-stars{color:#dfa02f;font-size:17px;letter-spacing:2px;}
  .reviews-rating-strip .rating-score{font-family:var(--mono);font-size:19px;font-weight:600;color:#211e3a;}
  .reviews-rating-strip .rating-count{font-size:13.5px;color:var(--text-dimmer);}
  .reviews-rating-strip .rating-divider{width:1px;height:15px;background:var(--border);}
  .reviews-marquee{
    position:relative;overflow:hidden;
    margin:0 -20px;padding:6px 0 10px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
  }
  .reviews-track{
    display:flex;gap:20px;width:max-content;
    animation:reviewsScroll 60s linear infinite;
  }
  .reviews-marquee:hover .reviews-track{ animation-play-state:paused; }
  @keyframes reviewsScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .reviews-cta{ display:flex; justify-content:center; margin-top:22px; }
  .review-btn{ gap:10px; }
  .review-btn .google-g{ flex:none; }
  .testi-card-mini{
    background:var(--surface);border:1px solid var(--border);border-radius:18px;
    padding:26px;width:320px;flex:0 0 auto;
  }
  .testi-card-mini p{font-size:14px;line-height:1.6;color:#4a4436;margin-bottom:18px;min-height:100px;}

  /* ---------- client stories: horizontal scroll (videos + story cards) ---------- */
  .stories-scroll{
    display:flex;gap:22px;overflow-x:auto;
    padding:8px 4px 22px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .stories-scroll::-webkit-scrollbar{height:8px;}
  .stories-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
  .stories-scroll::-webkit-scrollbar-track{background:transparent;}
  .video-story-card{ flex:0 0 auto;width:220px;scroll-snap-align:start; }
  .video-story-card .video-frame{
    position:relative;width:100%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
    background:#141126;box-shadow:0 16px 40px -18px rgba(20,17,38,0.35);
  }
  .video-story-card video{ width:100%;height:100%;object-fit:cover;display:block; }
  .video-play-btn{
    position:absolute;inset:0;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,rgba(20,17,38,0.05) 40%,rgba(20,17,38,0.55) 100%);
    border:none;cursor:pointer;padding:0;transition:opacity .25s ease;
  }
  .video-play-btn .play-circle{
    width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.94);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px -6px rgba(0,0,0,0.4);transition:transform .2s ease;
  }
  .video-play-btn .play-circle svg{ margin-left:3px; }
  .video-play-btn:hover .play-circle{ transform:scale(1.08); }
  .video-frame.playing .video-play-btn{ opacity:0;pointer-events:none; }
  .video-story-card .video-cap{ margin-top:10px;font-size:12.5px;color:var(--text-dimmer);text-align:center; }
  .story-card{
    flex:0 0 auto;width:300px;scroll-snap-align:start;
    background:var(--surface);border:1px solid var(--border);border-radius:18px;
    padding:26px;display:flex;flex-direction:column;
  }
  .story-card .story-eyebrow{
    font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
    color:var(--pink-2);margin-bottom:8px;
  }
  .story-card h4{font-size:17px;font-weight:600;margin-bottom:12px;line-height:1.3;}
  .story-card p{font-size:14px;line-height:1.6;color:#4a4436;margin-bottom:20px;flex:1;}

  /* ---------- om oss: team ---------- */
  /* flex + a fixed basis (not grid auto-fit) so a partial last row — 7 people
     doesn't divide evenly into any column count — centers instead of leaving a
     one-sided gap where a trailing grid track would sit empty. */
  .team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
  .team-card{
    flex:0 1 260px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:22px 20px 26px;
    text-align:center;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .team-card:hover{transform:translateY(-4px);border-color:rgba(228,177,204,0.4);background:var(--surface-strong);}
  .team-photo{
    width:100%;aspect-ratio:4/5;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:16px;
    background:linear-gradient(135deg, rgba(228,177,204,0.22), rgba(211,191,149,0.24));
  }
  .team-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .team-card h4{font-size:16px;font-weight:600;margin-bottom:4px;}
  .team-role{
    display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:0.8px;text-transform:uppercase;
    color:var(--pink-2);margin-bottom:12px;
  }
  .team-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;}
  @media (max-width:700px){.team-card{flex-basis:calc(50% - 10px);}}
  @media (max-width:460px){.team-card{flex-basis:100%;}}

  /* ---------- CTA banner ---------- */
  .cta-banner{
    margin:0 auto;
    padding:70px 60px;
    border-radius:28px;
    background:
      radial-gradient(ellipse 90% 140% at 20% 0%, rgba(228,177,204,0.35), transparent 60%),
      linear-gradient(135deg, #272244, #19162c);
    border:1px solid rgba(228,177,204,0.3);
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .cta-banner h2{
    font-family:var(--mono);
    font-size:clamp(26px,4vw,40px);
    font-weight:400;
    max-width:620px;margin:0 auto 18px;
    color:#fff;
  }
  .cta-banner p{color:#c9c2da;max-width:480px;margin:0 auto 34px;font-size:16px;}

  /* ---------- footer ---------- */
  footer{
    padding:60px 0 34px;
    background:var(--nav-footer-bg);
    --text-dim:rgba(255,255,255,0.68);
    --text-dimmer:rgba(255,255,255,0.48);
    --white:#ffffff;
    --border:rgba(255,255,255,0.14);
  }
  .foot-grid{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
    margin-bottom:50px;
  }
  .foot-brand p{color:var(--text-dim);font-size:14px;line-height:1.6;margin-top:16px;max-width:260px;}
  .foot-col h5{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dimmer);margin-bottom:16px;}
  .foot-col a{display:block;font-size:14px;color:var(--text-dim);margin-bottom:11px;transition:color .2s ease;}
  .foot-col a:hover{color:var(--white);}
  .foot-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:28px;border-top:1px solid var(--border);
    font-size:12.5px;color:var(--text-dimmer);flex-wrap:wrap;gap:12px;
  }

  /* ---------- reveal on scroll ---------- */
  /* .reveal used to fade+slide every section in on scroll — the scattered-
     effect default the frontend-design skill flags. The motion budget now
     goes to one place only: the hero, on load (see .hero-in below). Scroll
     no longer triggers anything; .reveal/.in are inert but left in the
     markup so the JS observer has no effect rather than needing removal
     everywhere at once. */
  .reveal, .reveal.in{opacity:1;transform:none;transition:none;}

  /* ---------- one orchestrated moment: hero entrance on page load ---------- */
  @media (prefers-reduced-motion: no-preference){
    .hero .eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero .stat-row{
      opacity:0;
      animation:heroIn .6s cubic-bezier(.16,.8,.3,1) forwards;
    }
    .hero .eyebrow{animation-delay:.05s;}
    .hero h1{animation-delay:.15s;}
    .hero p.lead{animation-delay:.3s;}
    .hero-cta{animation-delay:.42s;}
    .hero .stat-row{animation-delay:.52s;}
  }
  @keyframes heroIn{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:translateY(0);}
  }

  /* ---------- preview banner ---------- */
  .preview-banner{
    position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
    z-index:200;
    background:rgba(20,19,25,0.9);
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter:blur(12px);
    padding:10px 18px;border-radius:999px;
    font-size:12.5px;color:#b2aebc;
    display:flex;align-items:center;gap:9px;
  }
  .preview-banner .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px 2px rgba(74,222,128,0.6);}

  /* ---------- mobile ---------- */
  @media (max-width:920px){
    .nav-links{display:none;}
    .steps,.plans,.plans-3,.plans-2,.modal-grid,.testi-grid,.instrument-grid,.treat-grid,.entry-grid{grid-template-columns:1fr 1fr;}
    .instrument-grid-7 .instrument-card, .instrument-grid-5 .instrument-card{grid-column:span 1;}
    .instrument-grid-7 .instrument-card:nth-child(7), .instrument-grid-5 .instrument-card:nth-child(5){grid-column:span 2;}
    .tech-grid{grid-template-columns:1fr;gap:40px;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .cta-banner{padding:50px 26px;}
    .section-head-row{align-items:flex-start;}
    .plans-2{max-width:none;}
  }
  @media (max-width:600px){
    .steps,.plans,.plans-3,.plans-2,.modal-grid,.testi-grid,.foot-grid,.instrument-grid,.treat-grid,.entry-grid,.therm-mini-grid{grid-template-columns:1fr;}
    .instrument-grid-7 .instrument-card, .instrument-grid-5 .instrument-card{grid-column:span 1;}
    .stat-row{gap:20px;}
  }

/* papimi.html extra components (not already defined above) */

  :root{
    --bg-0:#eee4cd;
    --bg-1:#eee4cd;
    --nav-footer-bg:#19162c;
    --bg-2:#d3bf95;
    --surface:rgba(255,255,255,0.55);
    --surface-strong:rgba(255,255,255,0.82);
    --border:rgba(33,30,58,0.12);
    --pink:#e4b1cc;
    --pink-2:#c2578f;
    --pink-glow:rgba(228,177,204,0.55);
    --blue:#c98aab;
    --blue-glow:rgba(201,138,171,0.45);
    --white:#211e3a;
    --text-dim:#5c5346;
    --text-dimmer:#948a79;
    --mono:'Prata', serif;
    --sans:'Urbanista', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg-0);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  section{position:relative;}
  ::selection{background:var(--pink);color:#fff;}

        .grid-overlay{
    position:absolute;top:0;left:0;right:0;height:380px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, black 0%, black 55%, transparent 92%);
    mask-image:linear-gradient(180deg, black 0%, black 55%, transparent 92%);
    pointer-events:none;
  }
  .ri0{
    position:absolute;top:-10px;left:-6%;width:54%;height:230px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade0 17s ease-in-out 0s infinite;
  }
  .rb0{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob0 7.5s ease-in-out infinite;
  }
  .rd0{
    position:absolute;top:0;left:0;
    animation:ribbonDrift0 34s linear infinite;
  }
  @keyframes ribbonDrift0{
    from{transform:translateX(0px);}
    to{transform:translateX(-700px);}
  }
  @keyframes ribbonBob0{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(11px);}
  }
  @keyframes ribbonFade0{
    0%,100%{opacity:0;}
    35%{opacity:0.5;}
    65%{opacity:0.5;}
  }
  .ri1{
    position:absolute;top:55px;left:42%;width:58%;height:210px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade1 22s ease-in-out 6s infinite;
  }
  .rb1{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob1 9.5s ease-in-out infinite;
  }
  .rd1{
    position:absolute;top:0;left:0;
    animation:ribbonDrift1 41s linear infinite;
  }
  @keyframes ribbonDrift1{
    from{transform:translateX(-700px);}
    to{transform:translateX(0px);}
  }
  @keyframes ribbonBob1{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(15px);}
  }
  @keyframes ribbonFade1{
    0%,100%{opacity:0;}
    35%{opacity:0.4;}
    65%{opacity:0.4;}
  }
  .ri2{
    position:absolute;top:140px;left:-9%;width:50%;height:210px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade2 19s ease-in-out 11s infinite;
  }
  .rb2{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob2 6s ease-in-out infinite;
  }
  .rd2{
    position:absolute;top:0;left:0;
    animation:ribbonDrift2 27s linear infinite;
  }
  @keyframes ribbonDrift2{
    from{transform:translateX(0px);}
    to{transform:translateX(-700px);}
  }
  @keyframes ribbonBob2{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(8px);}
  }
  @keyframes ribbonFade2{
    0%,100%{opacity:0;}
    35%{opacity:0.35;}
    65%{opacity:0.35;}
  }
  .ri3{
    position:absolute;top:175px;left:46%;width:60%;height:230px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade3 25s ease-in-out 3s infinite;
  }
  .rb3{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob3 10.5s ease-in-out infinite;
  }
  .rd3{
    position:absolute;top:0;left:0;
    animation:ribbonDrift3 48s linear infinite;
  }
  @keyframes ribbonDrift3{
    from{transform:translateX(-700px);}
    to{transform:translateX(0px);}
  }
  @keyframes ribbonBob3{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(17px);}
  }
  @keyframes ribbonFade3{
    0%,100%{opacity:0;}
    35%{opacity:0.45;}
    65%{opacity:0.45;}
  }
  .orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:0.55;}

  header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;background:var(--nav-footer-bg);transition:padding .3s ease, box-shadow .3s ease;border-bottom:1px solid rgba(255,255,255,0.1);}
  header.scrolled{padding:12px 0;box-shadow:0 8px 24px -14px rgba(0,0,0,0.45);}
  nav{display:flex;align-items:center;justify-content:space-between;}
  .logo{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:0.5px;display:flex;align-items:center;gap:9px;}
  .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px 2px var(--pink-glow);}
  .logo-img{height:42px;width:auto;display:block;}
  .nav-links{display:flex;gap:34px;align-items:center;}
  .nav-links a{font-size:14.5px;color:rgba(255,255,255,0.75);transition:color .2s ease;font-weight:500;}
  .nav-links a:hover{color:#ffffff;}
  .nav-links a.active{color:#ffffff;}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:999px;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;white-space:nowrap;}
  .btn-primary{background:linear-gradient(135deg, var(--pink), #c98aab);color:var(--white);box-shadow:0 8px 24px -8px var(--pink-glow);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 26px 4px var(--pink-glow), 0 14px 30px -10px var(--pink-glow);}
  .btn-ghost{background:var(--surface);color:var(--white);border-color:var(--border);backdrop-filter:blur(8px);}
  .btn-ghost:hover{background:var(--surface-strong);border-color:rgba(33,30,58,0.22);transform:translateY(-2px);}
  .btn-sm{padding:9px 18px;font-size:13.5px;}

  /* ---------- hero ---------- */
  .hero{min-height:96vh;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:70px;overflow:hidden;}
  .orb-1{width:520px;height:520px;background:radial-gradient(circle, var(--blue) 0%, transparent 70%); top:-160px; left:-140px; opacity:0.3;}
  .orb-2{width:460px;height:460px;background:radial-gradient(circle, var(--pink) 0%, transparent 70%); top:60px; right:-160px; opacity:0.32;}
  .hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:center;}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--pink-2);background:rgba(228,177,204,0.08);border:1px solid rgba(228,177,204,0.25);padding:7px 14px;border-radius:999px;margin-bottom:26px;}
  .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px 2px var(--pink-glow);animation:pulse 1.8s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.7);}}
  .hero h1{font-family:var(--mono);font-size:clamp(34px, 4.4vw, 58px);line-height:1.08;font-weight:400;letter-spacing:-1.2px;}
  .hero h1 .grad{background:linear-gradient(90deg, #c2578f, #8a3665);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero p.lead{margin-top:24px;font-size:17.5px;line-height:1.65;color:var(--text-dim);max-width:520px;}
  .hero-cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
  .stat-row{display:flex;gap:0;margin-top:60px;border-top:1px solid var(--border);padding-top:28px;max-width:580px;flex-wrap:wrap;}
  .stat{flex:1;min-width:150px;padding-right:20px;}
  .stat .num{font-family:var(--mono);font-size:26px;font-weight:400;background:linear-gradient(90deg,#211e3a,#4a4568);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .stat .label{font-size:12.5px;color:var(--text-dimmer);margin-top:4px;}

  /* ---------- pulse device visual ---------- */
  .pulse-visual{position:relative;display:flex;align-items:center;justify-content:center;height:460px;}
  .pulse-core{
    position:relative;width:100px;height:100px;border-radius:50%;
    background:radial-gradient(circle, #fff, var(--pink) 55%, transparent 75%);
    box-shadow:0 0 60px 10px var(--pink-glow);
    z-index:3;
    display:flex;align-items:center;justify-content:center;
  }
  .pulse-core .core-icon{font-family:var(--mono);font-weight:400;font-size:13px;color:#211e3a;letter-spacing:0.5px;}
  .pulse-ring{
    position:absolute;border-radius:50%;
    border:1.5px solid var(--pink-2);
    opacity:0;
    animation:ripple 3.2s cubic-bezier(.2,.6,.3,1) infinite;
  }
  .pulse-ring.r2{border-color:var(--blue);animation-delay:1.07s;}
  .pulse-ring.r3{border-color:#e4b1cc;animation-delay:2.13s;}
  @keyframes ripple{
    0%{width:100px;height:100px;opacity:0.9;}
    100%{width:440px;height:440px;opacity:0;}
  }
  .applicator-arm{
    position:absolute;bottom:30px;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    z-index:2;
  }
  .applicator-arm .coil{
    width:70px;height:70px;border-radius:50%;
    border:6px solid rgba(255,255,255,0.15);
    border-top-color:var(--pink-2);
    border-right-color:var(--blue);
  }
  .applicator-label{font-family:var(--mono);font-size:11px;color:var(--text-dimmer);letter-spacing:1px;text-transform:uppercase;margin-top:8px;}

  /* ---------- section shared ---------- */
  .section-pad{padding:110px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head .eyebrow{margin-bottom:18px;}
  .section-head h1, .section-head h2{font-family:var(--mono);font-size:clamp(26px,3.6vw,38px);font-weight:400;letter-spacing:-0.5px;line-height:1.15;}
  .section-head p{margin-top:16px;color:var(--text-dim);font-size:16px;line-height:1.6;}
  .center{text-align:center;margin-left:auto;margin-right:auto;}

  /* ---------- how it works split ---------- */
  .how-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
  .how-grid p{color:var(--text-dim);font-size:16px;line-height:1.7;margin-bottom:18px;}
  .feature-list{display:flex;flex-direction:column;gap:22px;margin-top:26px;}
  .feature-item{display:flex;gap:16px;}
  .feature-icon{width:38px;height:38px;flex:none;border-radius:10px;background:rgba(228,177,204,0.1);border:1px solid rgba(228,177,204,0.25);display:flex;align-items:center;justify-content:center;color:var(--pink-2);}
  .feature-item h4{font-size:15.5px;font-weight:600;margin-bottom:4px;}
  .feature-item p{font-size:14px;color:var(--text-dim);line-height:1.55;margin:0;}

  .use-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  .use-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 22px;display:flex;gap:14px;align-items:flex-start;transition:border-color .25s ease, transform .25s ease;}
  .use-card:hover{transform:translateY(-3px);border-color:rgba(194,87,143,0.35);}
  .use-icon{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(194,87,143,0.12);border:1px solid rgba(194,87,143,0.3);display:flex;align-items:center;justify-content:center;color:#8a3665;font-size:15px;}
  .use-card p{font-size:14px;color:var(--text-dim);line-height:1.5;margin:0;}
  .use-card strong{display:block;color:var(--white);font-size:14.5px;margin-bottom:3px;}

  /* ---------- benefits ---------- */
  .tech-section{background:var(--bg-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .benefit-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px 26px;transition:border-color .25s ease, transform .25s ease, background .25s ease;}
  .benefit-card:hover{border-color:rgba(228,177,204,0.35);transform:translateY(-4px);background:var(--surface-strong);}
  .benefit-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg, rgba(228,177,204,0.28), rgba(194,87,143,0.14));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:20px;}
  .benefit-card h3{font-size:18.5px;font-weight:600;margin-bottom:10px;}
  .benefit-card p{color:var(--text-dim);font-size:14.5px;line-height:1.6;}

  /* ---------- clinical stat highlight ---------- */
  .stat-highlight{
    display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;
    background:linear-gradient(135deg, rgba(228,177,204,0.18), rgba(194,87,143,0.08));
    border:1px solid rgba(228,177,204,0.4);
    border-radius:24px;
    padding:40px 44px;
  }
  .stat-highlight .big-num{font-family:var(--mono);font-size:64px;font-weight:400;line-height:1;background:linear-gradient(135deg,#c2578f,#8a3665);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;}
  .stat-highlight .copy h3{font-size:19px;font-weight:600;margin-bottom:8px;}
  .stat-highlight .copy p{color:var(--text-dim);font-size:14.5px;line-height:1.6;max-width:560px;}

  /* ---------- certification strip ---------- */
  .cert-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .cert-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px 20px;text-align:center;}
  .cert-card .ic{
    width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 12px;
    font-size:16px;color:#8a3665;
  }
  .cert-card h4{font-size:13.5px;font-weight:600;margin-bottom:6px;}
  .cert-card p{font-size:12px;color:var(--text-dimmer);line-height:1.5;}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
  .faq-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
  .faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;font-size:15.5px;font-weight:600;}
  .faq-q .plus{font-family:var(--mono);color:var(--pink-2);font-size:18px;transition:transform .3s ease;flex:none;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .faq-a p{padding:0 24px 20px;color:var(--text-dim);font-size:14.5px;line-height:1.65;margin:0;}
  .faq-item.open .faq-a{max-height:220px;}

  /* ---------- CTA ---------- */
  .cta-banner{margin:0 auto;padding:70px 60px;border-radius:28px;background:radial-gradient(ellipse 90% 140% at 20% 0%, rgba(201,138,171,0.28), transparent 60%),radial-gradient(ellipse 80% 120% at 90% 100%, rgba(228,177,204,0.22), transparent 60%),linear-gradient(135deg, #272244, #19162c);border:1px solid rgba(228,177,204,0.3);text-align:center;position:relative;overflow:hidden;}
  .cta-banner h2{font-family:var(--mono);font-size:clamp(24px,3.6vw,36px);font-weight:400;max-width:600px;margin:0 auto 16px;color:#fff;}
  .cta-banner p{color:#c9c2da;max-width:480px;margin:0 auto 30px;font-size:15.5px;}
  .cta-contact{display:flex;gap:26px;justify-content:center;margin-top:30px;flex-wrap:wrap;font-size:13.5px;color:#8b85a0;}
  .cta-contact span{color:#c9c2da;}

  footer{padding:50px 0 34px;background:var(--nav-footer-bg);--text-dim:rgba(255,255,255,0.68);--text-dimmer:rgba(255,255,255,0.48);--white:#ffffff;--border:rgba(255,255,255,0.14);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:0;font-size:12.5px;color:var(--text-dimmer);flex-wrap:wrap;gap:12px;}

  /* .reveal used to fade+slide every section in on scroll — the scattered-
     effect default the frontend-design skill flags. The motion budget now
     goes to one place only: the hero, on load (see .hero-in below). Scroll
     no longer triggers anything; .reveal/.in are inert but left in the
     markup so the JS observer has no effect rather than needing removal
     everywhere at once. */
  .reveal, .reveal.in{opacity:1;transform:none;transition:none;}

  /* ---------- one orchestrated moment: hero entrance on page load ---------- */
  @media (prefers-reduced-motion: no-preference){
    .hero .eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero .stat-row{
      opacity:0;
      animation:heroIn .6s cubic-bezier(.16,.8,.3,1) forwards;
    }
    .hero .eyebrow{animation-delay:.05s;}
    .hero h1{animation-delay:.15s;}
    .hero p.lead{animation-delay:.3s;}
    .hero-cta{animation-delay:.42s;}
    .hero .stat-row{animation-delay:.52s;}
  }
  @keyframes heroIn{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:translateY(0);}
  }

  .disclaimer{font-size:12px;color:var(--text-dimmer);line-height:1.6;max-width:760px;margin:40px auto 0;text-align:center;}

  .preview-banner{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;background:rgba(20,19,25,0.9);border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(12px);padding:10px 18px;border-radius:999px;font-size:12.5px;color:#b2aebc;display:flex;align-items:center;gap:9px;}
  .preview-banner .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px 2px rgba(74,222,128,0.6);}

  /* ---------- photo gallery ---------- */
  .photo-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;}
  .photo-card{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);min-height:340px;}
  .photo-card img{width:100%;height:100%;object-fit:cover;display:block;}
  .photo-card .photo-tag{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(0deg, rgba(20,18,35,0.88) 0%, rgba(20,18,35,0.55) 55%, transparent 100%);font-size:14px;font-weight:600;color:#fff;}
  .photo-card::after{content:"";position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(228,177,204,0.18);pointer-events:none;}
  a.photo-card{display:block;text-decoration:none;color:inherit;}

  /* photo-grid-5: denser gallery variant for pages showing several treatments/technologies at once.
     6-column track so 3 items (row 1) and 2 items (row 2) each fill the full row edge-to-edge —
     no dangling half-empty last row. */
  .photo-grid-5{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;}
  /* height (not min-height) so object-fit:cover always has a definite box to
     clip to — a portrait-oriented source photo would otherwise blow out the
     row, since a percentage-height <img> needs a definite parent height. */
  .photo-grid-5 .photo-card{height:230px;grid-column:span 2;}
  .photo-grid-5 .photo-card:nth-child(4),
  .photo-grid-5 .photo-card:nth-child(5){grid-column:span 3;}
  .photo-grid-5 .photo-card .photo-tag{font-size:13px;padding:16px 18px;}

  .cell-photo-card{border-radius:20px;background:var(--surface);border:1px solid var(--border);padding:36px;display:flex;align-items:center;justify-content:center;}
  .cell-photo-caption-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;}
  .cell-photo-caption-grid h4{font-size:15.5px;font-weight:600;margin-bottom:8px;color:var(--pink-2);}
  .cell-photo-caption-grid p{font-size:14px;color:var(--text-dim);line-height:1.6;}

  /* ---------- cell visual ---------- */
  .cell-visual{margin:28px 0;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px;display:flex;gap:20px;align-items:center;}
  .cell-visual img{width:104px;height:auto;flex-shrink:0;filter:drop-shadow(0 8px 20px rgba(228,177,204,0.3));}
  .cell-visual p{color:var(--text-dim);font-size:14px;line-height:1.6;margin:0;}

  /* ---------- table banner ---------- */
  .table-banner{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:36px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
  .table-banner img{width:100%;max-width:820px;height:auto;}
  .table-banner .banner-caption{font-size:13.5px;color:var(--text-dimmer);max-width:560px;}

  @media (max-width:920px){
    .nav-links{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .pulse-visual{height:340px;}
    .how-grid{grid-template-columns:1fr;gap:40px;}
    .benefit-grid,.use-grid{grid-template-columns:1fr 1fr;}
    .cert-strip{grid-template-columns:1fr 1fr;}
    .stat-highlight{grid-template-columns:1fr;text-align:center;}
    .cta-banner{padding:50px 26px;}
    .photo-grid{grid-template-columns:1fr;}
    .photo-card{min-height:280px;}
    .photo-grid-5{grid-template-columns:1fr 1fr;}
    .photo-grid-5 .photo-card{grid-column:span 1;height:200px;min-height:0;}
    .photo-grid-5 .photo-card:nth-child(4){grid-column:span 1;}
    .photo-grid-5 .photo-card:nth-child(5){grid-column:span 2;}
    .cell-photo-caption-grid{grid-template-columns:1fr;}
    .cell-visual{flex-direction:column;text-align:center;}
  }
  @media (max-width:600px){
    .benefit-grid,.use-grid,.cert-strip{grid-template-columns:1fr;}
    .stat-highlight .big-num{font-size:48px;}
  }

/* tryckkammare.html extra components (not already defined above) */

  /* Samma färgsystem som startsidans redesign-preview */
  :root{
    --bg-0:#eee4cd;
    --bg-1:#eee4cd;
    --nav-footer-bg:#19162c;
    --bg-2:#d3bf95;
    --surface:rgba(255,255,255,0.55);
    --surface-strong:rgba(255,255,255,0.82);
    --border:rgba(33,30,58,0.12);
    --pink:#e4b1cc;
    --pink-2:#c2578f;
    --pink-glow:rgba(228,177,204,0.55);
    --blue:#c98aab;
    --blue-glow:rgba(201,138,171,0.45);
    --white:#211e3a;
    --text-dim:#5c5346;
    --text-dimmer:#948a79;
    --mono:'Prata', serif;
    --sans:'Urbanista', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg-0);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  section{position:relative;}
  ::selection{background:var(--pink);color:#fff;}

              .grid-overlay{
    position:absolute;top:0;left:0;right:0;height:380px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, black 0%, black 55%, transparent 92%);
    mask-image:linear-gradient(180deg, black 0%, black 55%, transparent 92%);
    pointer-events:none;
  }
  .ri0{
    position:absolute;top:-10px;left:-6%;width:54%;height:230px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade0 17s ease-in-out 0s infinite;
  }
  .rb0{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob0 7.5s ease-in-out infinite;
  }
  .rd0{
    position:absolute;top:0;left:0;
    animation:ribbonDrift0 34s linear infinite;
  }
  @keyframes ribbonDrift0{
    from{transform:translateX(0px);}
    to{transform:translateX(-700px);}
  }
  @keyframes ribbonBob0{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(11px);}
  }
  @keyframes ribbonFade0{
    0%,100%{opacity:0;}
    35%{opacity:0.5;}
    65%{opacity:0.5;}
  }
  .ri1{
    position:absolute;top:55px;left:42%;width:58%;height:210px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade1 22s ease-in-out 6s infinite;
  }
  .rb1{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob1 9.5s ease-in-out infinite;
  }
  .rd1{
    position:absolute;top:0;left:0;
    animation:ribbonDrift1 41s linear infinite;
  }
  @keyframes ribbonDrift1{
    from{transform:translateX(-700px);}
    to{transform:translateX(0px);}
  }
  @keyframes ribbonBob1{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(15px);}
  }
  @keyframes ribbonFade1{
    0%,100%{opacity:0;}
    35%{opacity:0.4;}
    65%{opacity:0.4;}
  }
  .ri2{
    position:absolute;top:140px;left:-9%;width:50%;height:210px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade2 19s ease-in-out 11s infinite;
  }
  .rb2{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob2 6s ease-in-out infinite;
  }
  .rd2{
    position:absolute;top:0;left:0;
    animation:ribbonDrift2 27s linear infinite;
  }
  @keyframes ribbonDrift2{
    from{transform:translateX(0px);}
    to{transform:translateX(-700px);}
  }
  @keyframes ribbonBob2{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(8px);}
  }
  @keyframes ribbonFade2{
    0%,100%{opacity:0;}
    35%{opacity:0.35;}
    65%{opacity:0.35;}
  }
  .ri3{
    position:absolute;top:175px;left:46%;width:60%;height:230px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 20%, transparent 78%);
    animation:ribbonFade3 25s ease-in-out 3s infinite;
  }
  .rb3{
    position:absolute;top:0;left:0;right:0;height:100%;
    animation:ribbonBob3 10.5s ease-in-out infinite;
  }
  .rd3{
    position:absolute;top:0;left:0;
    animation:ribbonDrift3 48s linear infinite;
  }
  @keyframes ribbonDrift3{
    from{transform:translateX(-700px);}
    to{transform:translateX(0px);}
  }
  @keyframes ribbonBob3{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(17px);}
  }
  @keyframes ribbonFade3{
    0%,100%{opacity:0;}
    35%{opacity:0.45;}
    65%{opacity:0.45;}
  }
  .orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:0.55;}

  header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;background:var(--nav-footer-bg);transition:padding .3s ease, box-shadow .3s ease;border-bottom:1px solid rgba(255,255,255,0.1);}
  header.scrolled{padding:12px 0;box-shadow:0 8px 24px -14px rgba(0,0,0,0.45);}
  nav{display:flex;align-items:center;justify-content:space-between;}
  .logo{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:0.5px;display:flex;align-items:center;gap:9px;}
  .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px 2px var(--pink-glow);}
  .logo-img{height:42px;width:auto;display:block;}
  .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dimmer);}
  .breadcrumb a:hover{color:var(--text-dim);}
  .nav-links{display:flex;gap:34px;align-items:center;}
  .nav-links a{font-size:14.5px;color:rgba(255,255,255,0.75);transition:color .2s ease;font-weight:500;}
  .nav-links a:hover{color:#ffffff;}
  .nav-links a.active{color:#ffffff;}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:999px;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;white-space:nowrap;}
  .btn-primary{background:linear-gradient(135deg, var(--pink), #c98aab);color:var(--white);box-shadow:0 8px 24px -8px var(--pink-glow);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 26px 4px var(--pink-glow), 0 14px 30px -10px var(--pink-glow);}
  .btn-ghost{background:var(--surface);color:var(--white);border-color:var(--border);backdrop-filter:blur(8px);}
  .btn-ghost:hover{background:var(--surface-strong);border-color:rgba(33,30,58,0.22);transform:translateY(-2px);}
  .btn-sm{padding:9px 18px;font-size:13.5px;}

  /* ---------- hero ---------- */
  .hero{min-height:96vh;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:70px;overflow:hidden;}
  .orb-1{width:520px;height:520px;background:radial-gradient(circle, var(--blue) 0%, transparent 70%); top:-160px; left:-140px; opacity:0.3;}
  .orb-2{width:460px;height:460px;background:radial-gradient(circle, var(--pink) 0%, transparent 70%); top:60px; right:-160px; opacity:0.32;}
  .hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:center;}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--pink-2);background:rgba(228,177,204,0.08);border:1px solid rgba(228,177,204,0.25);padding:7px 14px;border-radius:999px;margin-bottom:26px;}
  .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px 2px var(--pink-glow);animation:pulse 1.8s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.7);}}
  .hero h1{font-family:var(--mono);font-size:clamp(36px, 4.6vw, 60px);line-height:1.08;font-weight:400;letter-spacing:-1.2px;}
  .hero h1 .grad{background:linear-gradient(90deg, #c2578f, #8a3665);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero p.lead{margin-top:24px;font-size:17.5px;line-height:1.65;color:var(--text-dim);max-width:520px;}
  .hero-cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
  .stat-row{display:flex;gap:0;margin-top:60px;border-top:1px solid var(--border);padding-top:28px;max-width:560px;flex-wrap:wrap;}
  .stat{flex:1;min-width:130px;padding-right:20px;}
  .stat .num{font-family:var(--mono);font-size:28px;font-weight:400;background:linear-gradient(90deg,#211e3a,#4a4568);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .stat .label{font-size:12.5px;color:var(--text-dimmer);margin-top:4px;}

  /* ---------- chamber visual ---------- */
  .chamber-visual{position:relative;display:flex;align-items:center;justify-content:center;height:460px;}
  .capsule{
    position:relative;width:190px;height:400px;border-radius:100px;
    background:linear-gradient(180deg, rgba(221,203,168,0.14), rgba(228,177,204,0.10));
    border:1.5px solid rgba(255,255,255,0.16);
    box-shadow:0 0 60px -10px var(--blue-glow), inset 0 0 40px rgba(255,255,255,0.04);
    overflow:hidden;
  }
  .capsule:before{
    content:"";position:absolute;inset:10px;border-radius:90px;
    border:1px solid rgba(255,255,255,0.1);
  }
  .bubble{
    position:absolute;bottom:-20px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(221,203,168,0.35));
    animation:rise 5s linear infinite;
  }
  @keyframes rise{
    0%{transform:translateY(0) translateX(0);opacity:0;}
    10%{opacity:0.9;}
    90%{opacity:0.5;}
    100%{transform:translateY(-420px) translateX(var(--dx,0px));opacity:0;}
  }
  .gauge-ring{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;}
  .gauge-center{position:absolute;text-align:center;}
  .gauge-center .big{font-family:var(--mono);font-size:34px;font-weight:600;}
  .gauge-center .small{font-size:11px;color:var(--text-dimmer);letter-spacing:1px;text-transform:uppercase;margin-top:2px;}

  /* ---------- real chamber photo frame ---------- */
  .photo-frame{
    position:relative;height:100%;aspect-ratio:740/1110;border-radius:34px;overflow:hidden;
    border:1.5px solid rgba(33,30,58,0.14);
    box-shadow:0 0 0 1px rgba(33,30,58,0.03), 0 30px 70px -20px rgba(0,0,0,0.35), 0 0 70px -10px var(--blue-glow);
  }
  .chamber-photo{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.05) brightness(1.02);}
  .photo-frame:after{
    content:"";position:absolute;inset:0;border-radius:34px;
    background:linear-gradient(180deg, rgba(221,203,168,0.12), transparent 30%, transparent 70%, rgba(228,177,204,0.14));
    mix-blend-mode:screen;pointer-events:none;
  }
  .photo-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
  .o2-badge{
    position:absolute;bottom:18px;right:18px;width:84px;height:84px;border-radius:50%;
    background:rgba(10,10,16,0.55);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.18);
    display:flex;align-items:center;justify-content:center;
  }
  .o2-badge svg{position:absolute;width:100%;height:100%;top:0;left:0;}
  .o2-badge-center{position:relative;text-align:center;}
  .o2-badge-center .big{font-family:var(--mono);font-size:17px;font-weight:400;line-height:1;color:#fff;}
  .o2-badge-center .small{font-size:8px;color:#b8b2c4;letter-spacing:1px;text-transform:uppercase;margin-top:1px;}
  .photo-tag{
    position:absolute;top:18px;left:18px;
    display:flex;align-items:center;gap:7px;
    background:rgba(10,10,16,0.55);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.18);
    padding:7px 12px;border-radius:999px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#d8d3e0;
  }
  .photo-tag-bottom{top:auto;left:auto;bottom:18px;right:18px;}

  /* ---------- in-page quick nav ---------- */
  .hbot-quicknav-wrap{background:var(--bg-1);border-bottom:1px solid var(--border);}
  .hbot-quicknav{display:flex;gap:10px;padding:16px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .hbot-quicknav::-webkit-scrollbar{display:none;}
  .hbot-quicknav a{
    flex-shrink:0;font-family:var(--mono);font-size:12.5px;letter-spacing:0.3px;white-space:nowrap;
    color:var(--text-dim);background:var(--surface);border:1px solid var(--border);
    border-radius:999px;padding:9px 18px;
    transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
  }
  .hbot-quicknav a:hover{border-color:var(--pink);color:var(--pink-2);transform:translateY(-1px);}
  .hbot-quicknav a.hbot-quicknav-highlight{
    background:linear-gradient(135deg, var(--pink), #c98aab);color:#fff;border-color:transparent;font-weight:600;
  }
  .hbot-quicknav a.hbot-quicknav-highlight:hover{color:#fff;}
  @media (max-width:640px){
    .hbot-quicknav{padding:12px 0;gap:8px;}
    .hbot-quicknav a{font-size:12px;padding:8px 14px;}
  }

  /* ---------- site-wide floating oxygen bubbles ---------- */
  .global-bubbles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
  .global-bubble{
    position:absolute;bottom:-60px;border-radius:50%;
    background:radial-gradient(circle at 35% 28%, rgba(255,255,255,0.95), rgba(201,138,171,0.3) 55%, rgba(194,87,143,0.14) 82%, transparent);
    border:1px solid rgba(33,30,58,0.14);
    box-shadow:0 3px 8px -2px rgba(33,30,58,0.18), inset 0 0 5px rgba(255,255,255,0.7);
    animation:globalRise linear infinite;
    opacity:0;
  }
  @keyframes globalRise{
    0%{transform:translateY(0) translateX(0);opacity:0;}
    10%{opacity:0.75;}
    90%{opacity:0.4;}
    100%{transform:translateY(-115vh) translateX(var(--dx,0px));opacity:0;}
  }

  /* ---------- equipment spec section ---------- */
  .equip-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:center;}
  .equip-photo{position:relative;border-radius:28px;overflow:hidden;border:1.5px solid rgba(33,30,58,0.14);box-shadow:0 20px 60px -20px rgba(0,0,0,0.35), 0 0 50px -14px var(--pink-glow);}
  .equip-photo img{width:100%;display:block;filter:saturate(1.08) contrast(1.05);}
  .spec-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;}
  .spec-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 18px;transition:border-color .25s ease, transform .25s ease;}
  .spec-item:hover{border-color:rgba(194,87,143,0.35);transform:translateY(-3px);}
  .spec-item .spec-label{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dimmer);margin-bottom:8px;}
  .spec-item .spec-value{font-size:14.5px;font-weight:600;color:var(--white);}
  .spec-item .spec-sub{font-size:12px;color:var(--text-dim);margin-top:3px;}

  /* ---------- BIBS mask mini-section ---------- */
  .bibs-mini{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 24px;display:flex;gap:20px;align-items:center;}
  .bibs-mini-icon{width:96px;height:96px;flex:none;border-radius:18px;background:radial-gradient(circle, rgba(228,177,204,0.24), rgba(228,177,204,0.06));border:1px solid rgba(228,177,204,0.35);display:flex;align-items:center;justify-content:center;padding:12px;}
  .bibs-mini-icon img{width:100%;height:100%;object-fit:contain;display:block;}
  .bibs-mini h4{font-size:15px;font-weight:600;margin-bottom:5px;}
  .bibs-mini p{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin:0;}
  @media (max-width:600px){ .bibs-mini{flex-direction:column;text-align:center;} }

  /* ---------- ambient bubble field (hero background) ---------- */
  .bubble-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
  .ambient-bubble{
    position:absolute;bottom:-40px;border-radius:50%;
    background:radial-gradient(circle at 35% 28%, rgba(255,255,255,0.95), rgba(228,177,204,0.35) 55%, rgba(194,87,143,0.16) 82%, transparent);
    border:1px solid rgba(33,30,58,0.12);
    box-shadow:0 2px 6px -1px rgba(33,30,58,0.15), inset 0 0 4px rgba(255,255,255,0.7);
    animation:ambientRise linear infinite;
    opacity:0;
  }
  @keyframes ambientRise{
    0%{transform:translateY(0) translateX(0);opacity:0;}
    8%{opacity:0.7;}
    92%{opacity:0.32;}
    100%{transform:translateY(-108vh) translateX(var(--dx,0px));opacity:0;}
  }

  /* ---------- count-up numbers ---------- */
  .count-up{font-variant-numeric:tabular-nums;}

  /* ---------- tech showcase widgets ---------- */
  .showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .showcase-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px 24px 24px;transition:border-color .25s ease, transform .25s ease, background .25s ease;}
  .showcase-card:hover{border-color:rgba(228,177,204,0.35);transform:translateY(-4px);background:var(--surface-strong);}
  .showcase-card h3{font-size:16px;font-weight:600;margin-bottom:6px;}
  .showcase-card p{font-size:13px;color:var(--text-dim);line-height:1.55;margin-bottom:18px;}
  .widget{position:relative;height:130px;border-radius:14px;background:#241f3d;border:1px solid rgba(255,255,255,0.08);overflow:hidden;}

  /* --- diffusion widget --- */
  .vessel{position:absolute;top:50%;left:6%;right:6%;height:3px;background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(221,203,168,0.45), rgba(255,255,255,0.08));transform:translateY(-50%);border-radius:2px;}
  .rbc{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #f6ddec, #e4b1cc 70%);transform:translate(-50%,-50%);box-shadow:0 0 8px -1px var(--pink-glow);animation:flow 3.6s linear infinite;}
  @keyframes flow{0%{left:4%;opacity:0;}8%{opacity:1;}90%{opacity:1;}100%{left:96%;opacity:0;}}
  .o2mol{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff6ec;box-shadow:0 0 10px 3px rgba(221,203,168,0.55);animation:o2pulse 2s ease-in-out infinite;}
  @keyframes o2pulse{0%,100%{opacity:0.15;transform:translateY(0) scale(0.7);}50%{opacity:1;transform:translateY(-3px) scale(1);}}
  .widget-tag{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8b85a0;}

  /* --- gauge widget --- */
  .gauge-widget{display:flex;align-items:center;justify-content:center;}
  .mini-gauge{position:relative;width:150px;height:90px;}
  .needle{position:absolute;left:50%;bottom:0;width:2.5px;height:66px;background:linear-gradient(180deg, var(--pink), var(--pink-2));transform-origin:bottom center;border-radius:2px;transform:translateX(-50%) rotate(-70deg);animation:needleSweep 4.2s ease-in-out infinite;box-shadow:0 0 8px 1px var(--pink-glow);}
  @keyframes needleSweep{0%,100%{transform:translateX(-50%) rotate(-70deg);}50%{transform:translateX(-50%) rotate(70deg);}}
  .needle-pivot{position:absolute;left:50%;bottom:-4px;width:9px;height:9px;border-radius:50%;background:#fff;transform:translateX(-50%);box-shadow:0 0 6px 1px var(--pink-glow);}
  .gauge-caption{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#8b85a0;}

  /* --- session ring widget --- */
  .ring-widget{display:flex;align-items:center;justify-content:center;}
  .mini-ring{position:relative;width:96px;height:96px;}
  .mini-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
  .mini-ring .track{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:8;}
  .mini-ring .fill{fill:none;stroke:url(#ringGradMini);stroke-width:8;stroke-linecap:round;stroke-dasharray:264;animation:ringLoop 5s cubic-bezier(.45,0,.55,1) infinite;}
  @keyframes ringLoop{0%{stroke-dashoffset:264;}55%{stroke-dashoffset:0;}100%{stroke-dashoffset:0;}}
  .mini-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .mini-ring-center .n{font-family:var(--mono);font-size:15px;font-weight:400;color:#fff;}
  .mini-ring-center .u{font-size:9px;color:#8b85a0;letter-spacing:0.5px;text-transform:uppercase;}

  /* ---------- pricing bar chart ---------- */
  .chart-block{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:30px 30px 26px;margin-bottom:36px;}
  .chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
  .chart-head h3{font-size:16.5px;font-weight:600;}
  .chart-sub{font-size:12.5px;color:var(--text-dimmer);}
  .bars{display:flex;flex-direction:column;gap:16px;}
  .bar-row{display:grid;grid-template-columns:110px 1fr 90px;align-items:center;gap:14px;position:relative;}
  .bar-label{font-size:13px;color:var(--text-dim);}
  .bar-track{height:10px;background:rgba(33,30,58,0.08);border-radius:999px;overflow:hidden;position:relative;}
  .bar-fill{width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--pink-2));box-shadow:0 0 14px -2px var(--pink-glow);transition:width 1.2s cubic-bezier(.16,.84,.32,1), opacity .7s ease, transform .7s ease;}
  .bar-fill.in{width:var(--w);}
  .bar-value{font-family:var(--mono);font-size:13.5px;font-weight:600;text-align:right;}
  .bar-row[data-tooltip]{cursor:default;}
  .bar-row[data-tooltip]:hover .bar-tip{opacity:1;transform:translate(-50%,-6px);}
  .bar-tip{position:absolute;left:50%;top:-6px;transform:translate(-50%,0);background:var(--bg-2);border:1px solid var(--border);color:var(--text-dim);font-size:11.5px;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:5;}

  /* ---------- section shared ---------- */
  .section-pad{padding:110px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head .eyebrow{margin-bottom:18px;}
  .section-head h1, .section-head h2{font-family:var(--mono);font-size:clamp(26px,3.6vw,38px);font-weight:400;letter-spacing:-0.5px;line-height:1.15;}
  .section-head p{margin-top:16px;color:var(--text-dim);font-size:16px;line-height:1.6;}
  .center{text-align:center;margin-left:auto;margin-right:auto;}

  /* ---------- how it works split ---------- */
  .how-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
  .how-grid p{color:var(--text-dim);font-size:16px;line-height:1.7;margin-bottom:18px;}
  .mini-steps{display:flex;flex-direction:column;gap:16px;margin-top:26px;}
  .mini-step{display:flex;gap:14px;align-items:flex-start;}
  .mini-step .n{font-family:var(--mono);color:var(--pink-2);font-size:13px;flex:none;width:26px;}
  .mini-step p{margin:0;font-size:14.5px;color:var(--text-dim);}

  .use-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  .use-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 22px;display:flex;gap:14px;align-items:flex-start;transition:border-color .25s ease, transform .25s ease;}
  .use-card:hover{transform:translateY(-3px);border-color:rgba(194,87,143,0.35);}
  .use-icon{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(194,87,143,0.12);border:1px solid rgba(194,87,143,0.3);display:flex;align-items:center;justify-content:center;color:#8a3665;font-size:15px;}
  .use-card p{font-size:14px;color:var(--text-dim);line-height:1.5;}
  .use-card strong{display:block;color:var(--white);font-size:14.5px;margin-bottom:3px;}

  /* ---------- benefits ---------- */
  .tech-section{background:var(--bg-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .benefit-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px 26px;transition:border-color .25s ease, transform .25s ease, background .25s ease;}
  .benefit-card:hover{border-color:rgba(228,177,204,0.35);transform:translateY(-4px);background:var(--surface-strong);}
  .benefit-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg, rgba(228,177,204,0.28), rgba(194,87,143,0.14));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:20px;}
  .benefit-card h3{font-size:18.5px;font-weight:600;margin-bottom:10px;}
  .benefit-card p{color:var(--text-dim);font-size:14.5px;line-height:1.6;}

  /* ---------- pricing ---------- */
  .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .price-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 22px;display:flex;flex-direction:column;text-align:center;transition:transform .25s ease, border-color .25s ease, background .25s ease;position:relative;}
  .price-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,0.18);}
  .price-card.best{border-color:var(--pink);background:linear-gradient(180deg, rgba(228,177,204,0.09), var(--surface) 45%);box-shadow:0 0 40px -12px var(--pink-glow);}
  .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--pink),#c98aab);color:var(--white);font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:0.5px;white-space:nowrap;}
  .price-name{font-size:13.5px;color:var(--text-dim);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:14px;}
  .price-value{font-family:var(--mono);font-size:28px;font-weight:400;}
  .price-per{font-size:12px;color:var(--text-dimmer);margin-top:4px;}
  .price-save{margin-top:12px;font-size:12px;color:#1a7a4a;background:rgba(26,122,74,0.08);border:1px solid rgba(26,122,74,0.25);border-radius:999px;padding:5px 10px;display:inline-block;}
  .price-card .btn{margin-top:22px;width:100%;}
  .price-desc{font-size:13.5px;line-height:1.55;margin-top:6px;}
  .price-card ul{list-style:none;margin:16px 0 4px;padding:0;text-align:left;display:flex;flex-direction:column;gap:9px;}
  .price-card ul li{font-size:13.5px;padding-left:20px;position:relative;line-height:1.4;}
  .price-card ul li::before{content:"✓";position:absolute;left:0;color:var(--pink-2);font-weight:700;}

  /* ---------- "hitta din undersökning" quiz ---------- */
  .quiz-section{padding:20px 0 110px;}
  .quiz-shell{max-width:680px;margin:0 auto;}
  .quiz-progress-track{width:100%;height:6px;border-radius:999px;background:rgba(33,30,58,0.08);overflow:hidden;margin-bottom:36px;}
  .quiz-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--pink-2));transition:width .4s ease;width:12.5%;}
  .quiz-step-label{font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink-2);margin-bottom:14px;text-align:center;}
  .quiz-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:44px 40px;text-align:center;}
  .quiz-question{font-family:var(--mono);font-weight:400;font-size:clamp(20px,2.6vw,26px);letter-spacing:-0.3px;margin-bottom:30px;line-height:1.35;}
  .quiz-options{display:flex;flex-direction:column;gap:12px;}
  .quiz-option{background:var(--surface-strong);border:1.5px solid var(--border);border-radius:14px;padding:16px 20px;text-align:left;font-size:15px;font-weight:500;color:var(--white);cursor:pointer;transition:border-color .2s ease, background .2s ease, transform .15s ease;font-family:inherit;width:100%;}
  .quiz-option:hover{border-color:rgba(194,87,143,0.4);transform:translateY(-1px);}
  .quiz-option.selected{border-color:var(--pink-2);background:linear-gradient(90deg, rgba(228,177,204,0.16), rgba(228,177,204,0.05));box-shadow:0 0 0 1px var(--pink-2) inset;}
  .quiz-nav{display:flex;align-items:center;justify-content:space-between;margin-top:34px;}
  .quiz-back{background:none;border:none;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--text-dim);cursor:pointer;padding:10px 6px;}
  .quiz-back:disabled{opacity:0;pointer-events:none;}
  .quiz-fade{animation:quizFadeIn .35s ease;}
  @keyframes quizFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  [hidden]{display:none !important;}
  .quiz-result-head{text-align:center;max-width:640px;margin:0 auto 46px;}
  .quiz-result-tag{display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--pink-2);background:rgba(228,177,204,0.08);border:1px solid rgba(228,177,204,0.25);padding:7px 16px;border-radius:999px;margin-bottom:20px;}
  .quiz-result-head h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:14px;}
  .quiz-result-head p{color:var(--text-dim);font-size:16px;line-height:1.6;}
  .quiz-price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1240px;margin:0 auto;}
  .quiz-restart{text-align:center;margin-top:40px;}
  .quiz-restart button{background:none;border:none;font-size:14px;font-weight:600;color:var(--text-dim);text-decoration:underline;cursor:pointer;font-family:inherit;}
  @media (max-width:980px){ .quiz-price-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .quiz-card{padding:32px 22px;} .quiz-price-grid{grid-template-columns:1fr;} }

  /* ---------- "hitta din undersökning" v2 — guided quiz + fallback form ---------- */
  .quiz-progress-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .quiz-progress-label{font-family:var(--mono);font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--pink-2);}
  .quiz-hint{font-size:13px;color:var(--text-dimmer);margin:-16px 0 20px;}
  .quiz-result-empty{grid-column:1/-1;text-align:center;color:var(--text-dim);font-size:15px;padding:20px 0;}
  .quiz-result-empty a{color:var(--pink-2);font-weight:600;}

  .guide-help{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:52px 44px;text-align:center;}
  .guide-help-lead{color:var(--text-dim);font-size:15.5px;line-height:1.65;max-width:560px;margin:14px auto 0;}
  .guide-help-toggle{margin-top:26px;}
  .guide-help-panel{max-height:0;overflow:hidden;transition:max-height .45s ease;}
  .guide-help.open .guide-help-panel{max-height:1300px;}
  .guide-help-panel-inner{padding-top:36px;max-width:560px;margin:0 auto;text-align:left;}
  .guide-help-fields{display:flex;flex-direction:column;gap:22px;}

  .chip-check-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
  .chip-check{position:relative;display:inline-flex;}
  .chip-check input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
  .chip-check span{display:inline-block;padding:9px 16px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface-strong);font-size:13.5px;font-weight:500;color:var(--text-dim);transition:border-color .2s ease, background .2s ease, color .2s ease;}
  .chip-check input:checked + span{border-color:var(--pink-2);background:linear-gradient(90deg, rgba(228,177,204,0.16), rgba(228,177,204,0.05));color:var(--white);}
  .chip-check input:focus-visible + span{outline:2px solid var(--pink-2);outline-offset:2px;}
  @media (max-width:600px){ .guide-help{padding:40px 22px;} }

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
  .faq-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
  .faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;font-size:15.5px;font-weight:600;}
  .faq-q .plus{font-family:var(--mono);color:var(--pink-2);font-size:18px;transition:transform .3s ease;flex:none;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .faq-a p{padding:0 24px 20px;color:var(--text-dim);font-size:14.5px;line-height:1.65;}
  .faq-item.open .faq-a{max-height:220px;}

  /* ---------- CTA ---------- */
  .cta-banner{margin:0 auto;padding:70px 60px;border-radius:28px;background:radial-gradient(ellipse 90% 140% at 20% 0%, rgba(201,138,171,0.28), transparent 60%),radial-gradient(ellipse 80% 120% at 90% 100%, rgba(228,177,204,0.22), transparent 60%),linear-gradient(135deg, #272244, #19162c);border:1px solid rgba(228,177,204,0.3);text-align:center;position:relative;overflow:hidden;}
  .cta-banner h2{font-family:var(--mono);font-size:clamp(24px,3.6vw,36px);font-weight:400;max-width:600px;margin:0 auto 16px;color:#fff;}
  .cta-banner p{color:#c9c2da;max-width:460px;margin:0 auto 30px;font-size:15.5px;}
  .cta-contact{display:flex;gap:26px;justify-content:center;margin-top:30px;flex-wrap:wrap;font-size:13.5px;color:#8b85a0;}
  .cta-contact span{color:#c9c2da;}

  footer{padding:50px 0 34px;background:var(--nav-footer-bg);--text-dim:rgba(255,255,255,0.68);--text-dimmer:rgba(255,255,255,0.48);--white:#ffffff;--border:rgba(255,255,255,0.14);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:0;font-size:12.5px;color:var(--text-dimmer);flex-wrap:wrap;gap:12px;}

  /* .reveal used to fade+slide every section in on scroll — the scattered-
     effect default the frontend-design skill flags. The motion budget now
     goes to one place only: the hero, on load (see .hero-in below). Scroll
     no longer triggers anything; .reveal/.in are inert but left in the
     markup so the JS observer has no effect rather than needing removal
     everywhere at once. */
  .reveal, .reveal.in{opacity:1;transform:none;transition:none;}

  /* ---------- one orchestrated moment: hero entrance on page load ---------- */
  @media (prefers-reduced-motion: no-preference){
    .hero .eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero .stat-row{
      opacity:0;
      animation:heroIn .6s cubic-bezier(.16,.8,.3,1) forwards;
    }
    .hero .eyebrow{animation-delay:.05s;}
    .hero h1{animation-delay:.15s;}
    .hero p.lead{animation-delay:.3s;}
    .hero-cta{animation-delay:.42s;}
    .hero .stat-row{animation-delay:.52s;}
  }
  @keyframes heroIn{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:translateY(0);}
  }

  .preview-banner{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;background:rgba(20,19,25,0.9);border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(12px);padding:10px 18px;border-radius:999px;font-size:12.5px;color:#b2aebc;display:flex;align-items:center;gap:9px;}
  .preview-banner .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px 2px rgba(74,222,128,0.6);}

  @media (max-width:920px){
    .nav-links{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .chamber-visual{height:360px;}
    .how-grid{grid-template-columns:1fr;gap:40px;}
    .benefit-grid,.price-grid,.use-grid,.showcase-grid{grid-template-columns:1fr 1fr;}
    .cta-banner{padding:50px 26px;}
    .bar-row{grid-template-columns:90px 1fr 76px;}
    .equip-grid{grid-template-columns:1fr;}
    .spec-list{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .benefit-grid,.price-grid,.use-grid,.showcase-grid{grid-template-columns:1fr;}
    .spec-list{grid-template-columns:1fr;}
    .breadcrumb{display:none;}
    .bar-row{grid-template-columns:80px 1fr 70px;gap:10px;}
    .chart-block{padding:24px 18px 20px;}
  }

/* ===== Additions for real site integration (shared header/footer/announce) ===== */
.announce{
  background: var(--nav-footer-bg);
  color: #f2ede2;
  font-size: 12.5px;
  padding: 9px 0;
  position: relative;
  z-index: 101;
}
.announce-inner{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; text-align:center; }
.announce-sep{ opacity:0.4; }
header#header{ top:32px; }
header#header.scrolled{ top:0; }
body{ padding-top:0; }
.nav-actions{ display:flex; align-items:center; gap:12px; }

/* ---- nav dropdowns ("Tjänster", "Kunskap") ---- */
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{
  font:inherit; font-size:14.5px; font-weight:500; color:rgba(255,255,255,0.75);
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  display:flex; align-items:center; gap:5px; transition:color .2s ease;
}
.nav-dropdown-trigger:hover, .nav-dropdown-trigger.active{ color:#ffffff; }
.nav-chevron{ transition:transform .2s ease; flex:none; }
.nav-dropdown.open .nav-chevron{ transform:rotate(180deg); }
.nav-dropdown-menu{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:200px; background:var(--bg-0); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--border); border-radius:14px; padding:8px;
  margin-top:10px;
  box-shadow:0 24px 50px -18px rgba(33,30,58,0.28);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:200;
}
.nav-dropdown::after{
  /* invisible hover bridge: keeps :hover alive while the cursor crosses
     the visual gap between the trigger and the floating menu card below it.
     Sized to .nav-dropdown's own (in-flow) width, which equals the trigger
     button's width — NOT the wider, centered .nav-dropdown-menu box — so
     hovering elsewhere in the nav bar near the trigger no longer opens it. */
  content:""; position:absolute; left:0; right:0; top:100%; height:10px;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
  display:block; padding:9px 12px; border-radius:9px;
  font-size:14px; font-weight:500; color:var(--text-dim); white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active{ background:rgba(33,30,58,0.06); color:var(--white); }
@media (max-width:920px){
  .nav-hide-sm{ display:none; }
  /* NOTE: header keeps the same top:34px as desktop here (no override) — it was
     previously forced to top:0, which sat it directly on top of the in-flow
     .announce bar (position:relative, so it doesn't get pushed out of the way
     by a fixed sibling). That put the higher z-index announce bar physically
     over the header's nav row, silently swallowing every click on the logo,
     nav links and hamburger button on mobile until the user scrolled past it. */
  .announce{ font-size:11.5px; padding:7px 0; }
  header#header{ top:26px; }
}
@media (max-width:480px){
  /* keep the announce bar to a single line on narrow phones so it reliably
     matches header's top:34px offset instead of wrapping to two lines and
     re-creating the overlap above. */
  .announce-inner span:last-child, .announce-sep{ display:none; }
}
.breadcrumb-strip{ padding:150px 0 0; }
.breadcrumb{ font-size:13px; color:var(--text-dimmer); }
.breadcrumb a{ color:var(--text-dimmer); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--pink-2); }
.prose{ max-width:760px; margin:0 auto; }
.prose h2{ font-family:var(--mono); font-size:26px; font-weight:400; margin:44px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--text-dim); font-size:15.5px; line-height:1.75; margin-bottom:14px; }
.prose ul{ color:var(--text-dim); font-size:15.5px; line-height:1.75; margin:0 0 14px 22px; }
.table-wrap{ overflow-x:auto; position:relative; }
table.cmp{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:16px; overflow:hidden; }
table.cmp th, table.cmp td{ padding:14px 16px; text-align:center; border-bottom:1px solid var(--border); font-size:13.5px; }
table.cmp th:first-child, table.cmp td:first-child{ text-align:left; color:var(--text-dim); }
table.cmp thead th{ font-family:var(--mono); font-weight:400; font-size:14px; background:rgba(228,177,204,0.08); }
table.cmp tbody tr:last-child td{ border-bottom:none; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid.full, .form-field.full{ grid-column:1/-1; }
.form-field label{ display:block; font-size:12.5px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-dimmer); margin-bottom:8px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); font-family:var(--sans); font-size:14.5px; color:var(--white);
}
.form-field textarea{ min-height:120px; resize:vertical; }
.contact-info-row{ display:flex; flex-direction:column; gap:22px; }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-item .ic{ width:38px;height:38px;flex:none;border-radius:10px;background:rgba(228,177,204,0.1);border:1px solid rgba(228,177,204,0.25);display:flex;align-items:center;justify-content:center;color:var(--pink-2); }
.contact-info-item h4{ font-size:15px; font-weight:600; margin-bottom:3px; }
.contact-info-item p{ font-size:14px; color:var(--text-dim); }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.hero{ padding-top:154px !important; }
@media (max-width:920px){ .hero{ padding-top:130px !important; } .breadcrumb-strip{ padding-top:120px; } }

/* ===================================================================
   ROUND 2 FIXES — 2026-09-03
   CSS-collision fixes (page-scoped), dark card redesign, mobile nav,
   package pricing, mobile hero fix, general mobile optimization.
   =================================================================== */

/* ---------- 1. .photo-tag collision fix (blurred PAPIMI photos) ----------
   Bare .photo-tag (tryckkammare's pill-badge rule) was leaking backdrop-filter,
   border-radius and border into .photo-card .photo-tag on the PAPIMI page.
   This rule is more specific AND declared last, so it wins outright and
   fully re-states every property — nothing leaks through anymore. */
.photo-card .photo-tag{
  position:absolute; top:auto; left:0; right:0; bottom:0;
  display:block;
  padding:20px 22px;
  background:linear-gradient(0deg, rgba(20,18,35,0.88) 0%, rgba(20,18,35,0.55) 55%, transparent 100%);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:none; border-radius:0;
  font-family:var(--sans); font-size:14px; font-weight:600;
  letter-spacing:normal; text-transform:none;
  color:#fff;
}

/* ---------- 2. .badge collision fix (position depends on card type) ---------- */
.plan .badge{ top:-13px; left:24px; right:auto; transform:none; }
.price-card .badge{ top:-13px; left:50%; transform:translateX(-50%); }

/* ---------- 3. .orb-1 / .orb-2 collision fix (page-scoped, restores each
   source page's intended hero glow instead of one page's rule winning globally) ---------- */
body.pg-index .orb-1{background:radial-gradient(circle, var(--pink) 0%, transparent 70%); top:-160px; left:-120px; opacity:0.55;}
body.pg-index .orb-2{background:radial-gradient(circle, #c98aab 0%, transparent 70%); top:120px; right:-160px; opacity:0.3;}
body.pg-papimi .orb-1, body.pg-tryckkammare .orb-1{background:radial-gradient(circle, var(--blue) 0%, transparent 70%); top:-160px; left:-140px; opacity:0.3;}
body.pg-papimi .orb-2, body.pg-tryckkammare .orb-2{background:radial-gradient(circle, var(--pink) 0%, transparent 70%); top:60px; right:-160px; opacity:0.32;}

/* ---------- 4. hero h1 / lead collision fix — restore INDEX's larger type
   (was silently capped at tryckkammare's smaller clamp because that rule
   loaded last in the merged stylesheet and every .hero h1 rule has equal
   specificity) ---------- */
body.pg-index .hero h1{font-size:clamp(38px, 6vw, 74px); line-height:1.04; letter-spacing:-0.5px; max-width:820px;}
body.pg-index .hero p.lead{font-size:18px; max-width:560px;}
body.pg-papimi .hero h1, body.pg-tryckkammare .hero h1{font-size:clamp(34px, 4.6vw, 60px); line-height:1.08; letter-spacing:-1.2px;}

/* ---------- 5. mobile hero fix ("för liten och centrerar") — don't force
   the heading to vertically float in a full-viewport-height flex column on
   small screens; give it a real, generously-sized, top-anchored block instead ---------- */
@media (max-width:680px){
  .hero{min-height:auto !important; justify-content:flex-start !important; padding-bottom:56px !important;}
  .hero h1{font-size:clamp(32px, 9vw, 46px) !important; max-width:100% !important; text-align:left;}
  .hero p.lead{max-width:100% !important;}
  .hero .eyebrow{margin-bottom:20px;}
}

/* ===================================================================
   6. CARD HIERARCHY — decision vs. reference vs. narrative
   Previously every repeating card (steps, instruments, treatments,
   testimonials, benefits, certifications, modalities, FAQ, pricing —
   14 different content types) shared one identical dark-glass box with
   the same border-radius, shadow and hover-lift. That reads as a
   template, not a choice, and it buries the one place that actually
   deserves visual weight: a pricing decision. Now only pricing/package
   content — the thing you're choosing between — keeps the bold dark
   "glass" treatment; everything else (facts, process, quotes) is quiet.
   =================================================================== */
:root{
  --dcard-bg: radial-gradient(ellipse 120% 140% at 15% -10%, rgba(201,138,171,0.20), transparent 55%), linear-gradient(160deg, #272244 0%, #201c38 45%, #19162c 100%);
  --dcard-bg-strong: radial-gradient(ellipse 120% 140% at 15% -10%, rgba(228,177,204,0.26), transparent 55%), linear-gradient(160deg, #2e2952 0%, #252041 45%, #19162c 100%);
  --dcard-border: rgba(228,177,204,0.22);
  --dcard-border-hover: rgba(228,177,204,0.45);
  --card-text: rgba(255,255,255,0.95);
  --card-text-dim: rgba(235,231,244,0.72);
  --card-text-dimmer: rgba(235,231,244,0.5);
}

/* ---- Decision cards: pricing & packages. The one bold, dark moment. ---- */
.plan, .price-card{
  background:var(--dcard-bg);
  border:1px solid var(--dcard-border);
  color:var(--card-text-dim);
}
.plan:hover{
  background:var(--dcard-bg-strong) !important;
  border-color:var(--dcard-border-hover) !important;
}
.plan.popular, .price-card.best{
  background:var(--dcard-bg-strong);
  border-color:var(--pink);
  box-shadow:0 0 40px -12px var(--pink-glow);
}
.plan-name, .plan-price, .price-name, .price-value{ color:var(--card-text) !important; }
.plan-desc, .plan li, .price-per{ color:var(--card-text-dim) !important; }
.plan-price span{ color:var(--card-text-dimmer) !important; }
.treat-meta, .plan li:before{ border-color:var(--dcard-border); }
.plan li:before{ background:var(--pink-2); }
.plan .btn-ghost, .price-card .btn-ghost{
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-color:rgba(255,255,255,0.22);
}
.plan .btn-ghost:hover, .price-card .btn-ghost:hover{ background:rgba(255,255,255,0.16); }

/* ---- Reference cards: instruments, treatments, certifications, modalities —
   factual/clinical content. Quiet: thin border, no shadow, no hover-lift,
   tighter radius so it doesn't compete with a decision card's roundness. ---- */
.instrument-card, .treat-card, .benefit-card, .use-card, .cert-card,
.modal-card, .spec-item, .chart-block, .bibs-mini, .team-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:none;
  transition:border-color .2s ease, background .2s ease;
}
.instrument-card:hover, .treat-card:hover, .benefit-card:hover, .use-card:hover,
.modal-card:hover, .spec-item:hover, .team-card:hover{
  background:var(--surface-strong) !important;
  border-color:rgba(33,30,58,0.2) !important;
  transform:none !important;
}

/* ---- Narrative cards: process steps & testimonials — whitespace-led,
   no box at all. A step is a beat in a story, not a product tile. ---- */
.step-card, .testi-card{
  background:transparent;
  border:none;
  border-left:2px solid var(--border);
  border-radius:0;
  padding-left:24px;
  box-shadow:none;
}
.step-card:hover{ background:transparent !important; border-color:var(--pink-2) !important; transform:none !important; }
.step-num{ color:var(--pink-2); }

/* ---- FAQ and the comparison table stay functional UI, not "cards" ---- */
.faq-item{ background:var(--surface); border:1px solid var(--border); color:inherit; }
.faq-q{ color:var(--white) !important; }
.faq-a p{ color:var(--text-dim) !important; }
table.cmp{ background:transparent; }
table.cmp thead th{ background:rgba(228,177,204,0.14); color:var(--white); }
table.cmp td, table.cmp th{ border-bottom:1px solid var(--border); color:var(--text-dim); }
table.cmp th:first-child, table.cmp td:first-child{ color:var(--white); }

/* form fields (kontakt/boka) keep the dark-glass treatment — a booking
   form is a decision too */
.form-field input, .form-field select, .form-field textarea{
  background:var(--dcard-bg);
  border:1px solid var(--dcard-border);
  color:var(--card-text);
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--card-text-dimmer); }

/* icon chips — kept consistent regardless of card tier, they're small enough
   not to read as "the card treatment" */
.instrument-card .ic, .contact-info-item .ic, .feature-icon, .use-icon,
.cert-card .ic, .benefit-icon{
  background:rgba(228,177,204,0.16);
  border-color:rgba(228,177,204,0.32);
  color:#8a3665;
}

/* ---------- price-group heading (package pricing rows) ---------- */
.price-group-head{ display:flex; flex-direction:column; align-items:center; }
/* .price-save sits inside .plan/.price-card, which the card-hierarchy rules
   above make dark navy — so this needs light-on-dark, not the dark-on-light
   scheme that suited the old light card background. */
.price-save{ margin-top:10px; font-size:12px; color:#bff0d4; background:rgba(74,222,128,0.16); border:1px solid rgba(74,222,128,0.35); border-radius:999px; padding:5px 10px; display:inline-block; }

/* ===================================================================
   7. MOBILE NAV (hamburger)
   =================================================================== */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:38px;height:38px;flex:none;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  padding:0;
}
.menu-toggle span{
  display:block;width:18px;height:2px;
  background:#ffffff;
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  display:none;
  flex-direction:column;
  max-height:0;overflow:hidden;
  background:rgba(233,223,196,0.98);
  backdrop-filter:blur(16px) saturate(140%);
  border-top:0 solid transparent;
  transition:max-height .35s ease;
}
.mobile-nav a{
  padding:15px 28px;font-size:15.5px;font-weight:500;color:var(--white);
  border-bottom:1px solid var(--border);
}
.mobile-nav a.active{color:var(--pink-2);}
.mobile-nav-group-label{
  padding:14px 28px 4px; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-dimmer);
}
.mobile-nav a.mobile-nav-sub{ padding-left:40px; font-size:14.5px; }
.mobile-nav .btn{margin:14px 28px 0;}
.mobile-nav .btn:last-of-type{margin-bottom:22px;}
.mobile-nav.open{max-height:80vh; overflow-y:auto; border-top:1px solid var(--border);}
body.menu-open{overflow:hidden;}

@media (max-width:920px){
  .menu-toggle{display:flex;}
  .mobile-nav{display:flex;}
}

/* ===================================================================
   8. GENERAL MOBILE OPTIMIZATION — consolidated grid collapse for every
   card-grid component (including the new package pricing grid), plus
   layout safety nets that weren't covered by the original per-section
   media queries.
   =================================================================== */
@media (max-width:900px){
  .plans, .instrument-grid, .treat-grid, .testi-grid, .modal-grid,
  .price-grid, .showcase-grid, .entry-grid, .compare-grid, .price-grid-2,
  .pkg-grid, .pkg-cat-grid, .pkg-addon-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .instrument-grid-7 .instrument-card, .instrument-grid-5 .instrument-card{ grid-column:span 1 !important; }
  .instrument-grid-7 .instrument-card:nth-child(7), .instrument-grid-5 .instrument-card:nth-child(5){ grid-column:span 2 !important; }
  .tech-grid, .how-grid, .equip-grid, .pkg-intro-grid{ grid-template-columns:1fr !important; gap:40px !important; }
  .section-pad{ padding:80px 0; }
  .testi-card-mini{ width:270px; }
  .story-card{ width:260px; }
}
@media (max-width:560px){
  .plans, .instrument-grid, .treat-grid, .testi-grid, .modal-grid,
  .price-grid, .showcase-grid, .benefit-grid, .use-grid, .cert-strip,
  .spec-list, .steps, .foot-grid, .entry-grid, .compare-grid, .price-grid-2,
  .pkg-grid, .pkg-cat-grid, .pkg-addon-grid{ grid-template-columns:1fr !important; }
  .instrument-grid-7 .instrument-card, .instrument-grid-5 .instrument-card,
  .instrument-grid-7 .instrument-card:nth-child(7), .instrument-grid-5 .instrument-card:nth-child(5){ grid-column:span 1 !important; }
  /* padding-left/right only — a shorthand here would zero out any element that
     combines .wrap with a class needing its own top padding (e.g. .breadcrumb-strip,
     which relies on padding-top to clear the fixed header on mobile). */
  .wrap{ padding-left:20px; padding-right:20px; }
  .section-pad{ padding:64px 0; }
  .cta-banner{ padding:44px 22px !important; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; text-align:left; }
  table.cmp{ font-size:12.5px; }
  .testi-card-mini{ width:250px;padding:22px; }
  .video-story-card{ width:170px; }
  .story-card{ width:230px;padding:22px; }
  .reviews-marquee{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%); }
}

/* ===================================================================
   ROUND 3 FIXES — 2026-09-03 (HBOT / tryckkammare page)
   =================================================================== */

/* The native [hidden] attribute has UA-stylesheet priority only — any author
   rule (e.g. .benefit-grid{display:grid}) otherwise wins and the element
   would stay visible. Force it explicitly wherever we toggle .hidden via JS. */
[hidden]{ display:none !important; }

/* expand/collapse toggle button used for "Se alla hälsofördelar" etc. */
.expand-toggle{ cursor:pointer; }

/* ---- pressure-profile chart ("Så ser en 65-minuters HBOT-session ut") ---- */
.pressure-chart{ position:relative; margin-top:12px; padding:74px 4% 46px; }
.pressure-chart-svg{ width:100%; height:auto; display:block; }
.pressure-chart-label{ position:absolute; left:4%; font-family:var(--mono); font-size:12px; letter-spacing:0.5px; color:var(--text-dimmer); }
.pressure-chart-label-top{ top:38px; }
.pressure-chart-label-bottom{ bottom:14px; }
.pressure-chart-tag{ position:absolute; font-size:12px; font-weight:600; letter-spacing:1.2px; color:var(--white); text-transform:uppercase; white-space:nowrap; }
.pressure-chart-tag-left{ left:7%; top:60%; }
.pressure-chart-tag-right{ right:5%; top:60%; }
.pressure-chart-tag-mid{ left:50%; top:35%; transform:translateX(-50%); text-align:center; }
@media (max-width:680px){
  .pressure-chart{ padding:60px 2% 40px; }
  .pressure-chart-tag{ font-size:10.5px; letter-spacing:0.6px; }
  .pressure-chart-tag-left{ left:2%; }
  .pressure-chart-tag-right{ right:2%; }
  .pressure-chart-tag-mid{ top:30%; white-space:normal; max-width:70%; }
}

/* ---- hero decorative background bleeds up to the header (HBOT page only) ----
   Previously the breadcrumb row sat in its own plain box ABOVE .hero, so the
   wave/orb graphic only started after the breadcrumb's 150px top-padding —
   a flat cream gap under the header. .hbot-hero-wrap now wraps the orb/wave
   background together with the breadcrumb AND the hero section, so the
   decorative layer starts at the very top (right under the header) and the
   breadcrumb text sits on top of it. Scoped to this wrapper only — .grid-overlay
   and .orb-1/.orb-2 are shared classes used unmodified on other pages. */
.hbot-hero-wrap, .hero-bg-wrap{ position:relative; overflow:hidden; }
.hbot-hero-wrap .grid-overlay, .hero-bg-wrap .grid-overlay{ height:560px; }
.hbot-hero-wrap .breadcrumb-strip, .hero-bg-wrap .breadcrumb-strip{ position:relative; z-index:1; }

/* ---- site-wide floating oxygen bubbles, instantiated on the HBOT page ----
   .global-bubbles/.global-bubble/@keyframes globalRise already existed in the
   shared stylesheet (position:fixed, so it floats across the whole page while
   scrolling) but was never added to a live page until now. */
.global-bubbles{ z-index:2; }

/* ===================================================================
   ROUND 4 FIXES — 2026-09-03 (behandlingar-sidan: "Läs mer"-modal)
   Ett delat modal-skal (samma dark-glass-kort som resten av sajten)
   som fylls med innehåll från en dold <div id="detail-{slug}"> per
   behandling. JS-logiken ligger i SCRIPT_TAIL i shared_components.py.
   =================================================================== */
.detail-modal-backdrop{
  position:fixed; inset:0; z-index:300;
  background:rgba(20,17,38,0.6);
  display:flex; align-items:flex-start; justify-content:center;
  padding:80px 20px 40px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.detail-modal-backdrop.open{
  opacity:1; visibility:visible;
  transition:opacity .25s ease, visibility 0s linear 0s;
}
.detail-modal{
  background:var(--dcard-bg-strong);
  border:1px solid var(--dcard-border-hover);
  border-radius:22px;
  max-width:600px; width:100%; max-height:80vh;
  position:relative;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.5);
  transform:translateY(12px);
  transition:transform .25s ease;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.detail-modal-backdrop.open .detail-modal{ transform:translateY(0); }
.detail-modal-scroll{
  overflow-y:auto;
  min-height:0;
  padding:40px 40px 44px;
  scrollbar-width:thin;
  scrollbar-color:var(--dcard-border-hover) transparent;
}
.detail-modal-scroll::-webkit-scrollbar{ width:8px; }
.detail-modal-scroll::-webkit-scrollbar-track{ background:transparent; }
.detail-modal-scroll::-webkit-scrollbar-thumb{ background:var(--dcard-border-hover); border-radius:4px; }
.detail-modal-scroll::-webkit-scrollbar-thumb:hover{ background:var(--pink-2); }
.detail-modal-fade{
  position:absolute; left:1px; right:1px; bottom:1px; height:52px;
  background:linear-gradient(to bottom, rgba(25,22,44,0), rgba(25,22,44,0.98) 75%);
  pointer-events:none; border-radius:0 0 21px 21px;
  opacity:1; transition:opacity .2s ease;
}
.detail-modal-fade.is-hidden{ opacity:0; }
.detail-modal-close{
  position:absolute; top:18px; right:18px; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--dcard-border);
  background:rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:center;
  color:var(--card-text-dim); cursor:pointer;
  transition:background .2s ease, color .2s ease;
  z-index:2;
}
.detail-modal-close:hover{ background:rgba(255,255,255,0.12); color:var(--card-text); }
.detail-modal .detail-eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--pink-2); margin-bottom:10px; display:block;
}
.detail-modal h3{
  font-family:var(--mono); font-size:24px; font-weight:400;
  color:var(--card-text); margin-bottom:14px; padding-right:30px;
}
.detail-modal p{ font-size:14.5px; line-height:1.7; color:var(--card-text-dim); margin-bottom:14px; }
.detail-modal p:last-of-type{ margin-bottom:0; }
.detail-indications{
  margin:18px 0 0; padding:16px 18px;
  background:rgba(255,255,255,0.04); border:1px solid var(--dcard-border);
  border-radius:14px; list-style:none;
}
.detail-indications li{
  font-size:13.5px; color:var(--card-text-dim); padding-left:18px;
  position:relative; margin-bottom:8px;
}
.detail-indications li:last-child{ margin-bottom:0; }
.detail-indications li:before{
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px;
  border-radius:50%; background:var(--pink-2);
}
.detail-note{
  margin-top:16px; font-size:12.5px; color:var(--card-text-dimmer) !important;
  border-top:1px solid var(--dcard-border); padding-top:14px;
}
.detail-modal .detail-subhead{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--card-text); font-weight:600; margin-top:20px; margin-bottom:8px;
}
body.modal-open{ overflow:hidden; }
@media (max-width:560px){
  .detail-modal{ padding:32px 24px 36px; }
  .detail-modal-backdrop{ padding:60px 14px 30px; }
}

/* ---- anchor links land below the fixed header, not under it ----
   No page had scroll-padding-top, so every #anchor link sitewide (footer
   links into /behandlingar/#..., /halsoundersokningar/#bas etc., in-page
   nav like #pris, #hur) scrolled the target flush to the very top of the
   viewport — hidden behind the fixed header + announce bar. This applies
   the offset once, globally, instead of per-anchor. */
html{ scroll-padding-top:132px; }
@media (max-width:920px){ html{ scroll-padding-top:110px; } }
@media (max-width:480px){ html{ scroll-padding-top:96px; } }

/* ---- scroll hint on comparison tables ----
   The pricing/comparison tables (kontakt, boka, program, halsoundersokningar)
   have 3-6 columns and overflow their wrapper on phones. .table-wrap already
   scrolls (overflow-x:auto), but nothing signaled that more columns existed
   off-screen, so the extra columns looked simply missing rather than
   reachable by swiping. Adds a fading edge + small hint text on narrow
   viewports only, where these tables reliably overflow. */
@media (max-width:720px){
  .table-wrap::after{
    content:'';
    position:absolute; top:0; right:0; bottom:0; width:34px;
    pointer-events:none;
    background:linear-gradient(to right, transparent, var(--bg-0));
  }
  .table-scroll-hint{
    display:block; text-align:center; font-size:11.5px; color:var(--text-dimmer);
    margin-top:8px; letter-spacing:0.3px;
  }
}
@media (min-width:721px){ .table-scroll-hint{ display:none; } }

/* ---- international-clients callout (homepage hero) ----
   A clean, self-contained pill bar linking to /international/ so visitors
   who aren't based in Sweden immediately see there's a dedicated path for
   them, without competing with the top .announce bar or the hero's own
   CTAs. Whole bar is one link; hover lifts it slightly and nudges the
   arrow, consistent with the site's existing hover language on cards. */
.intl-note-bar{
  display:flex; align-items:center; gap:14px;
  max-width:600px;
  background:var(--surface-strong);
  border:1px solid var(--border);
  border-radius:999px;
  padding:13px 24px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.intl-note-bar:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px -14px var(--pink-glow);
  border-color:rgba(228,177,204,0.5);
}
.intl-note-icon{
  flex:none; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(228,177,204,0.18);
  color:var(--pink-2);
}
.intl-note-text{ flex:1; font-size:14.5px; color:var(--text-dim); line-height:1.4; }
.intl-note-text strong{ color:var(--white); }
.intl-note-arrow{ flex:none; color:var(--pink-2); font-size:17px; transition:transform .25s ease; }
.intl-note-bar:hover .intl-note-arrow{ transform:translateX(4px); }
@media (max-width:600px){
  .intl-note-bar{ padding:12px 16px; gap:10px; max-width:none; }
  .intl-note-text{ font-size:13px; }
}

/* ---- compact variant: pinned directly under the nav bar (homepage hero) ----
   .hero centers its content vertically as a group (justify-content:center),
   which would otherwise drag this badge down into the middle of the page
   along with the H1. Taking it out of that flow and pinning it just below
   the fixed header keeps it exactly where it reads first, independent of
   how the rest of the hero content is vertically centered. Below the
   680px breakpoint .hero itself switches to a top-anchored, non-centered
   layout (see ROUND 2 FIXES), so the badge can simply sit back in normal
   flow there — no absolute positioning needed. */
.intl-note-inline.compact{
  position:absolute; top:96px; left:0; right:0; z-index:2;
}
.intl-note-inline.compact .intl-note-bar{ max-width:540px; margin-inline:auto; gap:9px; padding:7px 16px 7px 7px; }
.intl-note-inline.compact .intl-note-icon{ width:24px; height:24px; }
.intl-note-inline.compact .intl-note-icon svg{ width:13px; height:13px; }
.intl-note-inline.compact .intl-note-text{ font-size:12.5px; }
.intl-note-inline.compact .intl-note-arrow{ font-size:14px; }
@media (max-width:920px){
  .intl-note-inline.compact{ top:84px; }
}
@media (max-width:680px){
  .intl-note-inline.compact{ position:static; margin:0 0 16px; }
  .intl-note-inline.compact .intl-note-bar{ padding:7px 14px 7px 7px; }
}

/* ===================================================================
   MOTION SYSTEM — 2026-09-10
   One motion language for the whole site, driven by /assets/js/motion.js.
   Principles: transform + opacity only; one easing curve; reveals are
   quiet and finish quickly; ambient layers (ribbons, orbs, hero art)
   keep their own continuous animation and additionally shift with
   scroll depth. Everything collapses to static under reduced-motion.
   Overrides the earlier inert .reveal rules by cascade position.
   =================================================================== */
:root{
  --ease-out-expo: cubic-bezier(.19,1,.22,1);
  --ease-out-quint: cubic-bezier(.22,1,.36,1);
  --rv-dur: .95s;
  --rv-dist: 26px;
}

/* Lenis housekeeping (from lenis.css) */
html.lenis, html.lenis body{ height:auto; }
html.lenis{ scroll-behavior:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

/* ---- base reveal: settle up, no bounce ---- */
.js-motion .reveal{
  opacity:0;
  transform:translate3d(0, var(--rv-dist), 0);
  transition:
    opacity var(--rv-dur) var(--ease-out-quint) var(--rv-delay, 0s),
    transform var(--rv-dur) var(--ease-out-quint) var(--rv-delay, 0s);
  will-change:opacity, transform;
}
.js-motion .reveal.in{ opacity:1; transform:none; will-change:auto; }

/* Section headings settle a touch slower — they lead the section. */
.js-motion .section-head.reveal{ --rv-dur:1.15s; --rv-dist:22px; }

/* Photographic surfaces: the frame settles while the image eases from a
   slight zoom, and the bottom edge unmasks — a single, deliberate gesture. */
.js-motion .photo-card.reveal,
.js-motion .equip-photo.reveal,
.js-motion .cell-photo-card.reveal,
.js-motion .chamber-visual.reveal,
.js-motion .table-banner.reveal{
  --rv-dur:1.25s; --rv-dist:18px;
  clip-path:inset(0 0 14% 0);
  transition:
    opacity var(--rv-dur) var(--ease-out-quint) var(--rv-delay, 0s),
    transform var(--rv-dur) var(--ease-out-quint) var(--rv-delay, 0s),
    clip-path 1.3s var(--ease-out-expo) var(--rv-delay, 0s);
}
.js-motion .photo-card.reveal img,
.js-motion .equip-photo.reveal img,
.js-motion .chamber-visual.reveal .chamber-photo,
.js-motion .table-banner.reveal img{
  transform:scale(1.06);
  transition:transform 1.6s var(--ease-out-expo) var(--rv-delay, 0s);
}
.js-motion .photo-card.reveal.in,
.js-motion .equip-photo.reveal.in,
.js-motion .cell-photo-card.reveal.in,
.js-motion .chamber-visual.reveal.in,
.js-motion .table-banner.reveal.in{ clip-path:inset(0 0 0 0); }
.js-motion .photo-card.reveal.in img,
.js-motion .equip-photo.reveal.in img,
.js-motion .chamber-visual.reveal.in .chamber-photo,
.js-motion .table-banner.reveal.in img{ transform:scale(1); }

/* Wide banners rise less and breathe in from 98% instead. */
.js-motion .cta-banner.reveal{
  --rv-dist:0px;
  transform:scale(.985);
  --rv-dur:1.1s;
}
.js-motion .cta-banner.reveal.in{ transform:scale(1); }

/* Small pills/badges: minimal travel, quicker. */
.js-motion .intl-note-bar.reveal{ --rv-dist:10px; --rv-dur:.7s; }

/* The hero's stat divider draws in with the stats. */
@media (prefers-reduced-motion: no-preference){
  .js-motion .hero .stat-row{ position:relative; border-top-color:transparent !important; }
  .js-motion .hero .stat-row::before{
    content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
    background:var(--border); transform-origin:left center;
    transform:scaleX(0);
    animation:lineDraw 1.2s var(--ease-out-expo) .55s forwards;
  }
  @keyframes lineDraw{ to{ transform:scaleX(1); } }

  /* Retune the load-time hero entrance to the same curve as the scroll reveals. */
  .hero .eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero .stat-row{
    animation-duration:.95s;
    animation-timing-function:var(--ease-out-quint);
  }
  .hero h1{ animation-delay:.12s; }
  .hero p.lead{ animation-delay:.26s; }
  .hero-cta{ animation-delay:.38s; }
  .hero .stat-row{ animation-delay:.48s; }
}

/* Parallax layers: ambient art carries GPU hints; hero content fades as it leaves. */
.js-motion .hero > .wrap{ will-change:transform, opacity; }
[data-px]{ backface-visibility:hidden; }

/* Header: settle in a touch more calmly than the default .3s */
header#header{ transition:background .45s var(--ease-out-quint), border-color .45s var(--ease-out-quint), padding .45s var(--ease-out-quint); }

/* Card hover lift — same curve, so hover and scroll feel like one system. */
.step-card, .instrument-card, .benefit-card, .treat-card, .plan, .price-card, .cert-card, .team-card, .use-card, .modal-card, .testi-card{
  transition-timing-function:var(--ease-out-quint);
}

/* Mobile: shorter travel, faster settle — touch scrolling is quicker. */
@media (max-width:680px){
  :root{ --rv-dist:16px; --rv-dur:.75s; }
}

/* Reduced motion: everything static, immediately. */
@media (prefers-reduced-motion: reduce){
  .js-motion .reveal, .js-motion .reveal.in{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .js-motion .reveal img, .js-motion .reveal .chamber-photo{ transform:none !important; transition:none !important; }
  .hero .eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero .stat-row{ animation:none !important; opacity:1 !important; }
  .ribbon-inst, .ribbon-bob, .ribbon-drift, .pulse-dot, .rbc, .o2mol, .needle, .ambient-bubble, .global-bubble{ animation:none !important; }
}

/* ===================================================================
   2026-09-22 (elfte omgången): Thermalytix omarbetad + ny Blodanalyser-sida.
   Nya komponenter för de två undersökningssidorna — byggda på samma
   färgtoner, kantradie och kort-hierarki (beslut/referens/berättande)
   som redan finns i resten av stilmallen, inte nya mönster.
   =================================================================== */

/* ---------- page-kicker: informativ ingressrad ovanför en rubrik
   (bär egen information, inte en dekorativ ALL-CAPS-etikett) ---------- */
.page-kicker{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  color:var(--pink-2);
  line-height:1.5;
  margin-bottom:14px;
}

/* ---------- bred bildbanner ---------- */
.feature-photo-wide{
  position:relative;width:100%;border-radius:24px;overflow:hidden;
  aspect-ratio:21/8;
  margin-top:36px;
  background:linear-gradient(135deg, rgba(228,177,204,0.24), rgba(211,191,149,0.20));
}
.feature-photo-wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.feature-photo.placeholder-photo, .feature-photo-wide.placeholder-photo{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  font-size:13.5px;color:var(--text-dimmer);
}
@media (max-width:600px){ .feature-photo-wide{aspect-ratio:4/3;} }

/* ---------- entry-card highlight-variant (t.ex. Premium-alternativ) ---------- */
.entry-card.highlight{border-color:var(--pink);background:linear-gradient(180deg, rgba(228,177,204,0.09), var(--surface) 60%);}

/* ---------- ikonlistor: check (medhåll) / dash (neutral jämförelsepunkt) ---------- */
.check-list, .dash-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.check-list li, .dash-list li{font-size:14.5px;line-height:1.5;padding-left:26px;position:relative;color:var(--text-dim);}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--pink-2);font-weight:700;}
.dash-list li::before{content:"–";position:absolute;left:0;top:0;color:var(--text-dimmer);font-weight:700;}

/* ---------- jämförelse: traditionell metod vs Thermalytix ---------- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;}
.compare-col{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:30px 28px;}
.compare-col.highlight{border-color:var(--pink);background:linear-gradient(180deg, rgba(228,177,204,0.09), var(--surface) 55%);}
.compare-col h4{font-family:var(--mono);font-weight:400;font-size:19px;margin-bottom:16px;}
.compare-col .check-list, .compare-col .dash-list{margin-top:0;}

/* ---------- note-box: viktig-ruta på ljus bakgrund (kontraindikationer m.m.) ---------- */
.note-box{
  background:var(--surface-strong);
  border:1px solid var(--border);
  border-left:3px solid var(--pink-2);
  border-radius:16px;
  padding:22px 26px;
  margin-top:26px;
}
.note-box strong{display:block;font-family:var(--mono);font-weight:400;font-size:15.5px;margin-bottom:8px;color:var(--white);}
.note-box p{font-size:14px;line-height:1.6;color:var(--text-dim);margin:0;}
.note-box p + p{margin-top:8px;}

/* ---------- price-grid 2-kolumnsvariant + grupperade priskort-etiketter ---------- */
.price-grid-2{grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto;}
.price-group-label{font-size:12.5px;font-weight:700;letter-spacing:.3px;color:var(--card-text-dimmer);margin:14px 0 2px;text-align:left;}

/* ---------- blodprovspaket (pkg-*) ---------- */
.pkg-intro-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pkg-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:28px 24px;display:flex;flex-direction:column;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.pkg-card:hover{transform:translateY(-4px);border-color:rgba(228,177,204,0.4);background:var(--surface-strong);}
.pkg-name{font-family:var(--mono);font-size:18px;font-weight:400;margin-bottom:8px;}
.pkg-desc{font-size:14px;color:var(--text-dim);line-height:1.55;margin-bottom:16px;flex:1;}
.pkg-toggle{align-self:flex-start;}
.pkg-toggle .chev{display:inline-block;margin-left:4px;transition:transform .2s ease;}
.pkg-card.open .pkg-toggle .chev, .plan.open .pkg-toggle .chev{transform:rotate(180deg);}
.pkg-details{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.pkg-card.open .pkg-details, .plan.open .pkg-details{max-height:600px;}
.pkg-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.pkg-list li{font-size:13.5px;color:var(--text-dim);padding-left:18px;position:relative;line-height:1.4;}
.pkg-list li::before{content:"•";position:absolute;left:0;color:var(--pink-2);}
.pkg-note{font-size:12.5px;color:var(--text-dimmer);line-height:1.55;margin-top:12px;font-style:italic;}
.pkg-price{font-family:var(--mono);font-size:22px;margin:18px 0 14px;}
.pkg-card.pkg-addon .pkg-details{max-height:none;overflow:visible;}
.plan .pkg-details + .btn{margin-top:18px;}
#hbot-start-pkg.open .pkg-details{max-height:900px;}

.pkg-featured{
  background:var(--dcard-bg);
  border:1px solid var(--pink);
  border-radius:26px;padding:40px 40px 34px;position:relative;
  color:var(--card-text-dim);
  box-shadow:0 0 40px -12px var(--pink-glow);
}
.pkg-featured .badge{top:-13px;left:40px;transform:none;}
.pkg-featured h3{font-family:var(--mono);font-weight:400;font-size:24px;color:var(--card-text);margin-bottom:4px;}
.pkg-featured-desc{font-size:14.5px;color:var(--card-text-dim);max-width:640px;margin-bottom:28px;}
.pkg-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px;margin-bottom:30px;}
.pkg-cat h5{font-family:var(--mono);font-weight:400;font-size:14.5px;color:var(--card-text);margin-bottom:8px;}
.pkg-cat ul{list-style:none;margin:0;padding:0;}
.pkg-cat li{font-size:13px;color:var(--card-text-dim);line-height:1.6;}
.pkg-featured-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--dcard-border);padding-top:26px;}
.pkg-featured-price{font-family:var(--mono);font-size:26px;color:var(--card-text);}
.pkg-addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
/* .pkg-card:hover sets a light background for the plain (light) card variant;
   when .pkg-featured is combined onto a .pkg-card (e.g. HBOT Start), that hover
   rule would wash out the dark gradient card, so restore the dark styling on hover. */
.pkg-featured.pkg-card:hover{background:var(--dcard-bg);border-color:var(--pink);}

/* ---------- pick-list: "vilket passar dig"-frågor ---------- */
.pick-list{display:flex;flex-direction:column;gap:2px;margin-top:30px;}
.pick-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:18px 4px;border-bottom:1px solid var(--border);
}
.pick-row:last-child{border-bottom:none;}
.pick-q{font-size:15px;color:var(--white);}
.pick-a{font-size:14px;font-weight:600;color:var(--pink-2);white-space:nowrap;}
.pick-a:hover{text-decoration:underline;}

/* ---------- tag-chip: liten pill-etikett ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.tag-chip{
  font-size:13px;color:var(--white);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:7px 16px;
}

@media (max-width:920px){
  .pkg-cat-grid,.pkg-grid,.pkg-addon-grid,.compare-grid,.price-grid-2{grid-template-columns:1fr 1fr;}
  .pkg-intro-grid{grid-template-columns:1fr;gap:40px;}
  .pkg-featured{padding:32px 28px 28px;}
}
@media (max-width:600px){
  .pkg-cat-grid,.pkg-grid,.pkg-addon-grid,.compare-grid,.price-grid-2{grid-template-columns:1fr;}
  .pick-row{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* ---- homepage "Vad vi tittar på i våra Hälsocheck-ups" instrument grid:
   on mobile this becomes a swipeable horizontal carousel instead of a very
   long vertical stack of all 8 cards. Scoped to .instrument-carousel-mobile
   only, so every other .instrument-grid usage sitewide (teknologier, om oss,
   kontakt, etc.) is unaffected and keeps its normal single-column stack. */
@media (max-width:600px){
  .instrument-grid.instrument-carousel-mobile{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    margin:0 -20px;
    padding:4px 20px 6px;
    scrollbar-width:none;
  }
  .instrument-grid.instrument-carousel-mobile::-webkit-scrollbar{display:none;}
  .instrument-carousel-mobile .instrument-card{
    scroll-snap-align:start;
    flex:0 0 80%;
    min-width:80%;
  }
}
@media (min-width:601px){ #matinstrument .table-scroll-hint{display:none;} }

/* =====================================================================
   HOMEPAGE v2 (2026-09-29): "Så går en Health Check-up till" (navy),
   "Vad vill du veta mer om?" (behovskort) och "Människorna bakom
   mätningarna" (scrollande teambilder). Alla klasser har prefixet hp-
   och används bara på startsidan (SV + EN).
   ===================================================================== */
.hp-eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--text-dim);margin:0 0 14px;
}

/* ---------- Så går en Health Check-up till: samma blå som menyn ---------- */
.hp-flow{background:var(--nav-footer-bg);color:#eee4cd;}
.hp-flow-head{text-align:center;max-width:640px;margin:0 auto 56px;}
.hp-flow .hp-eyebrow{color:var(--pink);}
.hp-flow h2{
  font-family:var(--mono);font-weight:400;color:#f6efdf;
  font-size:clamp(30px,3.8vw,46px);letter-spacing:-0.5px;line-height:1.1;margin:0 0 16px;
}
.hp-flow-head p:last-child{color:rgba(238,228,205,0.74);font-size:16px;line-height:1.6;margin:0;}
.hp-flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.hp-flow-step{border-top:1px solid rgba(238,228,205,0.22);padding-top:22px;min-width:0;}
.hp-flow-num{
  display:block;font-family:var(--mono);font-size:13px;letter-spacing:1.5px;
  color:var(--pink);margin-bottom:18px;
}
.hp-flow-step h3{
  font-family:var(--mono);font-weight:400;font-size:20px;line-height:1.25;
  color:#f6efdf;margin:0 0 10px;
}
.hp-flow-step p{color:rgba(238,228,205,0.72);font-size:14.5px;line-height:1.65;margin:0;}

/* ---------- Vad vill du veta mer om? ---------- */
.hp-needs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px;}
.hp-needs h2,.hp-people h2{
  font-family:var(--mono);font-weight:400;color:var(--white);
  font-size:clamp(30px,3.8vw,46px);letter-spacing:-0.5px;line-height:1.1;margin:0;
}
.hp-needs-head p:last-child{max-width:380px;color:var(--text-dim);font-size:15.5px;line-height:1.6;margin:0;}
.hp-needs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.hp-need{
  background:var(--surface-strong);border:1px solid var(--border);border-radius:16px;
  padding:32px;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  transition:transform .25s ease, box-shadow .25s ease;
}
.hp-need:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(33,30,58,0.3);}
.hp-need-icon{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:26px;color:var(--charcoal);
}
.hp-need-icon.hp-i1{background:var(--pink);}
.hp-need-icon.hp-i2{background:var(--bg-2);}
.hp-need-icon.hp-i3{background:#e3ded0;}
.hp-need-tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink-2);font-weight:700;margin:0 0 10px;}
.hp-need h3{font-family:var(--mono);font-weight:400;font-size:20px;line-height:1.3;color:var(--white);margin:0 0 10px;}
.hp-need-desc{font-size:14.5px;line-height:1.6;color:var(--text-dim);margin:0 0 20px;}
.hp-need-price{font-family:var(--mono);font-size:22px;color:var(--text-dim);margin:auto 0 18px;padding-top:16px;}
.hp-need .btn{width:100%;}
.hp-needs-help{text-align:center;margin:30px 0 0;font-size:14px;color:var(--text-dim);}
.hp-needs-help a{color:var(--pink-2);font-weight:600;}

/* ---------- Människorna bakom mätningarna ---------- */
.hp-people-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center;}
.hp-people-visual{min-width:0;}
.hp-people-marquee{
  position:relative;overflow:hidden;padding:4px 0 6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
}
.hp-people-track{
  list-style:none;margin:0;padding:0;display:flex;gap:16px;width:max-content;
  animation:hpPeopleScroll 50s linear infinite;
}
.hp-people-marquee:hover .hp-people-track,
.hp-people-marquee:focus-within .hp-people-track{animation-play-state:paused;}
@keyframes hpPeopleScroll{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 8px));}}
.hp-person{width:220px;flex:0 0 auto;margin:0;padding:0;}
.hp-person-photo{
  aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid var(--border);
  background:#e5ddcb;box-shadow:0 18px 40px -22px rgba(33,30,58,0.45);
}
.hp-person-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.hp-person b{display:block;font-size:15px;font-weight:700;color:var(--white);margin-top:14px;}
.hp-person span{display:block;font-size:12.5px;line-height:1.4;color:var(--text-dimmer);margin-top:3px;}
.hp-people-copy p:not(.hp-eyebrow){color:var(--text-dim);font-size:15.5px;line-height:1.7;}
.hp-people-copy h2{margin:0 0 20px;}
.hp-quote{border-left:3px solid var(--pink-2);padding-left:22px;margin:26px 0 0;}
.hp-quote p{font-family:var(--mono);font-size:20px !important;line-height:1.45 !important;color:var(--white) !important;margin:0 0 8px;}
.hp-quote cite{font-size:12.5px;font-style:normal;color:var(--text-dimmer);}
.hp-people-meta{border-top:1px solid var(--border);padding-top:18px;margin-top:22px;font-size:14px;color:var(--white);}
.hp-people-meta a{color:var(--pink-2);font-weight:600;}

@media (max-width:980px){
  .hp-flow-steps{grid-template-columns:1fr 1fr;}
  .hp-needs-head{display:block;}
  .hp-needs-head p:last-child{margin-top:14px;max-width:none;}
  .hp-needs-grid{grid-template-columns:1fr;}
  .hp-people-grid{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:560px){
  .hp-flow-steps{grid-template-columns:1fr;}
  .hp-person{width:190px;}
}
@media (prefers-reduced-motion:reduce){
  .hp-people-track{animation:none;}
  .hp-people-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;}
  .hp-person{scroll-snap-align:start;}
  .hp-person[aria-hidden="true"]{display:none;}
}

/* ===================================================================
   HOMEPAGE HERO v2 (2026-09-29)
   Copy column + photo with report card, replacing the old single-column
   hero content. The background layer (wave ribbons, orbs, data-point
   illustration, international note) is untouched; the buttons, quiz line
   and stat row keep their original markup and styles.
   =================================================================== */
.hero .hp-hero-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center;}
.hp-hero-copy{min-width:0;}
.hp-hero-eyebrow{color:var(--pink-2);margin-bottom:18px;}
body.pg-index .hero .hp-hero-copy h1{font-size:clamp(36px,4.5vw,62px);line-height:1.06;max-width:none;}
body.pg-index .hero .hp-hero-copy p.lead{font-size:18px;max-width:520px;}
.hero .hp-hero-copy .stat-row{margin-top:48px;padding-top:26px;max-width:none;}
.hero .hp-hero-copy .stat .num{font-size:28px;}
.hp-hero-art{position:relative;border-radius:32px;overflow:hidden;min-height:520px;background:radial-gradient(ellipse at 30% 20%,rgba(228,177,204,0.55),transparent 60%),var(--bg-2);box-shadow:0 30px 70px -34px rgba(25,22,44,.55);}
.hp-hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;}
.hp-hero-art::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(25,22,44,.55),rgba(25,22,44,0) 55%);pointer-events:none;}
.hp-report{position:absolute;z-index:1;left:26px;right:26px;bottom:26px;background:var(--dcard-bg-strong);border:1px solid var(--dcard-border);color:#fff;border-radius:18px;padding:24px;box-shadow:0 26px 60px -20px rgba(0,0,0,.55);}
.hp-report-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:14px;margin-bottom:14px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.65);}
.hp-report-title b{font-family:var(--mono);font-size:16px;text-transform:none;letter-spacing:0;color:#fff;font-weight:400;}
.hp-report-row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;margin-bottom:10px;color:rgba(255,255,255,.9);}
.hp-report-row:last-child{margin-bottom:0;}
.hp-check{width:20px;height:20px;border-radius:50%;background:var(--pink);color:#19162c;display:grid;place-items:center;flex-shrink:0;font-size:11px;font-weight:700;}
@media (max-width:1100px){
  .hero .hp-hero-wrap{grid-template-columns:1fr;gap:44px;}
  .hp-hero-art{min-height:420px;}
}
@media (max-width:560px){
  .hp-hero-art{min-height:340px;border-radius:24px;}
  .hp-report{left:14px;right:14px;bottom:14px;padding:18px;}
  .hero .hp-hero-copy .stat-row{margin-top:36px;}
}
@media (max-width:1100px){ .hp-hero-copy{padding-top:22px;} }

/* ===================================================================
   THERMALYTIX IMAGERY v2 (2026-09-30)
   New transparent cut-out (woman + thermal map) replaces the old garden
   photos on the home page and the top of /thermalytix/. It is shown
   uncropped on the page background with a soft pink glow behind it.
   =================================================================== */
.th-cutout{position:relative;width:100%;max-width:640px;margin-inline:auto;}
.th-cutout::before{content:'';position:absolute;z-index:0;inset:4% 0 0 22%;background:radial-gradient(ellipse at 55% 45%,rgba(228,177,204,.5),rgba(228,177,204,0) 68%);pointer-events:none;}
.th-cutout img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 24px 34px rgba(25,22,44,.15));}
.feature-photo.portrait{aspect-ratio:4/5;max-width:440px;margin-left:auto;}
.feature-photo.portrait img{object-position:50% 30%;}
@media (max-width:920px){ .feature-photo.portrait{margin:0 auto;max-width:400px;} }
/* CTA banner with photo (Thermalytix page) */
.cta-banner.cta-photo{display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;padding:0 !important;overflow:hidden;text-align:left;}
.cta-photo-copy{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;}
.cta-banner.cta-photo h2{margin:0 0 16px;max-width:520px;}
.cta-banner.cta-photo p{margin:0 0 30px;max-width:480px;}
.cta-banner.cta-photo .cta-contact{text-align:left;justify-content:flex-start;}
.cta-photo-img{position:relative;min-height:340px;}
.cta-photo-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;}
.cta-photo-img::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(25,22,44,.55),rgba(25,22,44,0) 45%);pointer-events:none;}
@media (max-width:820px){
  .cta-banner.cta-photo{grid-template-columns:1fr;}
  .cta-photo-copy{padding:44px 26px;order:2;}
  .cta-photo-img{order:1;min-height:0;aspect-ratio:4/3;}
  .cta-photo-img::before{background:linear-gradient(0deg,rgba(25,22,44,.55),rgba(25,22,44,0) 45%);}
}
.cta-banner.cta-photo .hero-cta{margin-top:0;}

/* ===================================================================
   HOMEPAGE v3 (2026-10-01): shorter homepage, four entry cards, hero film
   =================================================================== */

/* ===================================================================
   HOMEPAGE v3 (2026-09-30): clearer path to booking
   One booking logic, merged choice, plain-language hero, proof higher up,
   compact "what we look at" list, and homepage-scoped accessibility fixes.
   =================================================================== */
/* --- accessibility: contrast + skip link (homepage only) --- */
body.pg-index{--text-dimmer:#6f6553;--pink-text:#a03f6b;}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:#19162c;color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .15s;}
.skip-link:focus{top:12px;}
body.pg-index a:focus-visible,body.pg-index button:focus-visible,body.pg-index summary:focus-visible{outline:2px solid var(--pink-text);outline-offset:3px;border-radius:6px;}
body.pg-index .hp-eyebrow{color:var(--text-dim);}
body.pg-index .hp-hero-eyebrow{color:var(--pink-text);}
body.pg-index .hp-flow .hp-eyebrow{color:#e4b1cc;}

/* --- header: "Min sida" becomes a quiet text link, Boka tid stays the only strong button --- */
.nav-quiet{font-size:13px;font-weight:600;color:#c9c2da;text-decoration:none;padding:10px 8px;white-space:nowrap;}
.nav-quiet:hover{color:#fff;text-decoration:underline;}
.mobile-nav .nav-quiet{display:block;text-align:center;margin-top:6px;font-size:14px;}

/* --- hero --- */
.hp-hero-sub{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--text-dim);}
.hp-hero-sub a{color:var(--pink-text);font-weight:600;text-underline-offset:3px;}
.hp-rating{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:14px;font-size:14px;color:var(--text-dim);text-decoration:none;}
.hp-rating .rating-stars{letter-spacing:1px;}
.hp-rating b{color:var(--white);font-weight:700;}
.hp-rating:hover span:last-child{text-decoration:underline;}
.hero .hp-hero-copy .stat-row{margin-top:36px;}

/* --- merged choice: cards flow straight into the levels --- */
.hp-need-more{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--pink-text);text-underline-offset:3px;}
.hp-need .btn{width:100%;justify-content:center;}
.hp-needs{padding-bottom:64px;}
#undersokningar{padding-top:56px;}
#undersokningar .section-head{margin-bottom:36px;}
.quiz-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none;}
@media (max-width:600px){ .quiz-actions{width:100%;} .quiz-actions .btn{flex:1 1 100%;} }

/* --- compact "what we look at" --- */
.hp-look-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;}
.hp-look{background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:border-color .2s,background .2s;}
.hp-look:hover,.hp-look[open]{border-color:rgba(194,87,143,.45);background:var(--surface-strong);}
.hp-look summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;min-height:64px;}
.hp-look summary::-webkit-details-marker{display:none;}
.hp-look img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;display:block;}
.hp-look-title{flex:1;font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.3;color:var(--white);}
.hp-look-chev{flex:none;color:var(--pink-text);transition:transform .2s;}
.hp-look[open] .hp-look-chev{transform:rotate(180deg);}
.hp-look p{margin:0;padding:0 14px 16px;font-size:13.5px;line-height:1.6;color:var(--text-dim);}
.hp-look-hint{margin:18px 0 0;font-size:13.5px;color:var(--text-dim);}
@media (max-width:1100px){ .hp-look-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .hp-look-grid{grid-template-columns:1fr;gap:10px;} }
#matinstrument .section-head-row{margin-bottom:32px;}

/* --- tighter vertical rhythm on the homepage --- */
body.pg-index .section-pad{padding:88px 0;}
body.pg-index .hp-needs{padding-bottom:56px;}
body.pg-index #undersokningar{padding-top:48px;}
@media (max-width:680px){
  body.pg-index .section-pad{padding:60px 0;}
  body.pg-index .hp-needs{padding-bottom:40px;}
  body.pg-index #undersokningar{padding-top:36px;}
  .hp-need{padding:24px;}
  .hp-need-desc{display:none;}
}

/* --- accessibility round 2: contrast, headings, touch targets --- */
body.pg-index .hp-need-tag,body.pg-index .section-link,body.pg-index .hp-people-copy a,body.pg-index .hp-people-link{color:var(--pink-text);}
body.pg-index .hp-people-copy a{color:var(--pink-text);}
.therm-mini h3,.hp-h3-small{font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1.3;margin:0 0 6px;letter-spacing:0;}
.hp-need-more{padding:12px 0;margin-top:2px;}
.hp-rating{padding:10px 0;margin-top:4px;}
@media (max-width:680px){
  body.pg-index .btn-sm{min-height:44px;}
  body.pg-index header .btn-sm{min-height:40px;}
  body.pg-index .hp-look summary{min-height:64px;}
}
.story-card h3{font-family:inherit;font-size:17px;font-weight:600;margin-bottom:12px;line-height:1.3;letter-spacing:0;}
@media (max-width:680px){
  body.pg-index .section-link{display:inline-block;padding:13px 0;}
  body.pg-index .hp-people-copy a{display:inline-block;padding:10px 0;}
}
/* anchors land just under the sticky header instead of leaving a large empty gap */
body.pg-index main > section[id]{scroll-margin-top:-132px;}
@media (max-width:920px){ body.pg-index main > section[id]{scroll-margin-top:-110px;} }
@media (max-width:680px){ body.pg-index main > section[id]{scroll-margin-top:-87px;} }
@media (max-width:480px){ body.pg-index main > section[id]{scroll-margin-top:-73px;} }

/* --- four entry cards --- */
body.pg-index .hp-needs-grid{grid-template-columns:repeat(4,1fr);gap:18px;}
body.pg-index .hp-need{padding:26px 22px;}
body.pg-index .hp-need h3{font-size:19px;line-height:1.25;}
.hp-i4{background:#cfc4e6;}
.hp-needs .quiz-prompt{margin-top:36px;}
.hp-quiz-title{font-family:var(--mono);font-weight:400;font-size:20px;margin:0 0 6px;}
@media (max-width:1100px){ body.pg-index .hp-needs-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ body.pg-index .hp-needs-grid{grid-template-columns:1fr;} }

/* ===================================================================
   HOMEPAGE HERO FILM (v2b, 2026-09-30)
   Silent, looping film as the hero background, edge to edge. It fades
   out to the page colour behind the headline (left), at the top under
   the header and at the bottom into the next section.
   =================================================================== */
.hero{position:relative;}
.hp-film-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 38%,rgba(0,0,0,.3) 54%,#000 78%),linear-gradient(180deg,transparent 0,#000 16%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,transparent 38%,rgba(0,0,0,.3) 54%,#000 78%),linear-gradient(180deg,transparent 0,#000 16%,#000 76%,transparent 100%);
  mask-composite:intersect;}
.hp-film-video{position:absolute;top:0;bottom:0;right:0;left:36%;width:64%;height:100%;object-fit:cover;object-position:60% 50%;display:block;background:transparent;}
.hero .grid-overlay,.hero .orb{z-index:1;}
.hero .wrap{position:relative;z-index:2;width:100%;}
.hero .hp-hero-wrap{display:block;}
.hero .hp-hero-copy{max-width:560px;}
body.pg-index .hero .hp-hero-copy h1{font-size:clamp(38px,4.4vw,62px);}
.hero .hp-hero-copy .stat-row{margin-top:44px;}
.hero .hp-hero-copy .hero-cta{display:flex;flex-wrap:wrap;gap:12px 14px;}

@media (max-width:900px){
  .hp-film-bg{top:206px;bottom:auto;height:min(54vw,320px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 56%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 56%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add;}
  .hp-film-video{left:0;width:100%;object-position:60% 50%;}
  .hero .hp-hero-copy{padding-top:min(44vw,190px);}
}
@media (prefers-reduced-motion:reduce){.hp-film-video{animation:none;}}

/* ===================================================================
   QA PASS (2026-10-01) – contrast, nowrap, alignment, small fixes
   =================================================================== */
body{--text-dimmer:#6f6553;--pink-text:#a03f6b;}
footer{--text-dimmer:rgba(255,255,255,0.48);}
.nb{white-space:nowrap;}
h1,h2,h3,.section-head p{text-wrap:balance;}
p,li{text-wrap:pretty;}
/* pink text on cream: use darker pink for AA */
.step-num,.page-kicker,.entry-tag,.team-role,.eyebrow:not(.on-dark){color:var(--pink-text);}
a[href^="mailto:"][style*="pink-2"],a[href^="tel:"][style*="pink-2"]{color:var(--pink-text) !important;}
.placeholder-note{font-size:13px;line-height:1.6;}
/* breadcrumb aligns with the content column */
.breadcrumb-strip{padding-left:28px;padding-right:28px;}
@media (max-width:920px){.breadcrumb-strip{padding-left:20px;padding-right:20px;}}
/* about-hero orb must not create horizontal scroll */
.about-hero-photo{overflow:visible;}
@media (max-width:920px){.about-hero-orb{width:220px;height:220px;top:-40px;right:-20px;}}
/* tables on phones: keep numbers/units on one line */
@media (max-width:720px){
  .table-wrap td,.table-wrap th{white-space:nowrap;}
  .table-wrap td:first-child,.table-wrap th:first-child{white-space:normal;min-width:150px;}
}
.table-wrap:focus-visible{outline:2px solid var(--pink-text);outline-offset:2px;}
/* cards that follow "Continuing your progress" use the same type as other cards */
.modal-card.reveal h4{font-size:16px;margin:0 0 8px;}
.modal-card.reveal p{font-size:14px;line-height:1.6;color:var(--text-dim);}
/* hero stats on phones: breathing room when they wrap */
@media (max-width:600px){
  .stat{margin-bottom:6px;}
  .stat .label{line-height:1.4;}
}
/* team cards: equal role-label height so the copy lines up */
@media (min-width:921px){.team-role{display:block;min-height:2.6em;}}
/* privacy policy sub-headings */
.legal-body h3,.prose h3{margin-bottom:8px;}
a[style*="color:var(--pink-2)"]:not(footer a),p[style*="color:var(--pink-2)"]:not(footer p){color:var(--pink-text) !important;}
.section-link,.pick-a{color:var(--pink-text);}
.video-story-card .video-cap{color:#665c4b;}
.widget-tag{color:#a8a3bd;}
.cell-photo-caption-grid h4{color:var(--pink-text);}
.prose a,.placeholder-note a,.legal-body a,.hp-hero-sub a,.section-head p a{text-decoration:underline;text-underline-offset:3px;}
.breadcrumb{display:block;}
@media (max-width:720px){
  .table-wrap td:first-child,.table-wrap th:first-child{min-width:128px;}
  .table-wrap td,.table-wrap th{padding-left:10px;padding-right:10px;}
}
@media (min-width:921px){.cert-strip.cert-3{grid-template-columns:repeat(3,1fr);}}
p a[style*="color:var(--pink-2)"],.use-card p a,.faq-a a{text-decoration:underline;text-underline-offset:3px;}
.hp-tagline{font-family:var(--mono);font-size:clamp(18px,1.6vw,21px);font-weight:500;letter-spacing:.2px;color:var(--text);margin:16px 0 28px;}

/* =====================================================================
   /program/ — omdesignad programsida (layout efter noid-behandlingsprogram_4,
   färger = sajtens egna tokens). Allt scopat till .pg.
   ===================================================================== */
.pg [hidden]{display:none !important;}
.pg-hero{padding:34px 0 22px;}
.pg-hero h1{font-size:clamp(34px,4.8vw,58px);line-height:1.08;max-width:19em;margin:0 0 28px;}
.pg-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px;}
.pg-idea{padding:30px 0 8px;}
.pg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center;}
.pg-split-top{align-items:start;}
.pg-split-l h2{font-size:clamp(26px,3vw,36px);line-height:1.15;margin:0 0 16px;}
.pg-split-l p{color:var(--text-dim);font-size:16.5px;line-height:1.7;max-width:34em;}
.pg-feats{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);}
.pg-feat{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--border);}
.pg-feat-ico{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--nav-footer-bg);color:var(--pink);}
.pg-feat h3{font-size:18px;margin:0 0 6px;}
.pg-feat p{margin:0;color:var(--text-dim);font-size:15px;line-height:1.65;}
/* filters */
.pg-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 28px;}
.pg-filter{font:inherit;font-size:14px;font-weight:600;color:var(--white);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.pg-filter:hover{border-color:var(--pink-2);background:var(--surface-strong);}
.pg-filter.is-on{background:var(--nav-footer-bg);border-color:var(--nav-footer-bg);color:#fff;}
.pg-filter:focus-visible,.pg-tab:focus-visible,.pg-acc-q:focus-visible,.pg-card .btn:focus-visible{outline:2px solid var(--pink-text);outline-offset:2px;}
.pg-card .btn:focus-visible{outline-color:var(--pink);}
.pg-count{margin-left:auto;font-size:13.5px;color:var(--text-dim);}
/* program cards: the site's dark decision-card treatment */
.pg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;row-gap:30px;}
.pg-card{position:relative;display:flex;flex-direction:column;padding:26px 24px 22px;border-radius:22px;background:var(--dcard-bg);border:1px solid var(--dcard-border);color:var(--card-text-dim);transition:border-color .25s,transform .25s;}
.pg-card:hover{border-color:var(--dcard-border-hover);background:var(--dcard-bg-strong);}
.pg-card.is-top{border-color:var(--pink);background:var(--dcard-bg-strong);box-shadow:0 0 40px -12px var(--pink-glow);}
.pg-tag{position:absolute;top:-13px;left:22px;background:var(--pink);color:#211e3a;font-size:11px;font-weight:700;letter-spacing:1.2px;padding:5px 12px;border-radius:999px;}
.pg-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.pg-num{font-family:var(--mono);font-size:15px;color:var(--pink);}
.pg-dur{font-size:12.5px;font-weight:600;color:var(--card-text);border:1px solid var(--dcard-border);border-radius:999px;padding:4px 12px;background:rgba(255,255,255,.05);}
.pg-name{font-family:var(--mono);font-weight:400;font-size:28px;line-height:1.1;color:var(--card-text);margin:0 0 10px;}
.pg-desc{font-size:14.5px;line-height:1.6;color:var(--card-text-dim);margin:0 0 20px;min-height:3.2em;}
.pg-rows{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--dcard-border);}
.pg-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--dcard-border);font-size:14px;}
.pg-row-k{color:var(--card-text-dim);}
.pg-row-v{color:var(--card-text);font-weight:600;text-align:right;}
.pg-row.is-off .pg-row-k,.pg-row.is-off .pg-row-v{color:var(--card-text-dimmer);font-weight:400;}
.pg-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pg-price{font-family:var(--mono);font-size:25px;color:var(--card-text);}
.pg-card .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22);}
.pg-card .btn-ghost:hover{background:rgba(255,255,255,.16);}
/* price chart */
.pg-chart-h{font-size:22px;margin:56px 0 18px;}
.pg-chart{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.pg-bar{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;align-items:center;gap:16px;font-size:14.5px;}
.pg-bar-k{color:var(--white);font-weight:600;}
.pg-bar-track{height:14px;border-radius:7px;background:rgba(33,30,58,.09);overflow:hidden;}
.pg-bar-fill{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--pink),var(--pink-2));}
.pg-bar-v{text-align:right;color:var(--text-dim);white-space:nowrap;}
/* treatment explorer */
.pg-explore{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start;}
.pg-tabs{display:flex;flex-direction:column;gap:8px;}
.pg-tab{display:flex;align-items:center;gap:12px;font:inherit;font-size:15.5px;font-weight:600;text-align:left;color:var(--white);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.pg-tab:hover{border-color:var(--pink-2);background:var(--surface-strong);}
.pg-tab.is-on{background:var(--nav-footer-bg);border-color:var(--nav-footer-bg);color:#fff;}
.pg-tab-ico{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--pink-text);background:rgba(194,87,143,.12);}
.pg-tab.is-on .pg-tab-ico{color:var(--pink);background:rgba(255,255,255,.1);}
.pg-panel{background:var(--surface-strong);border:1px solid var(--border);border-radius:20px;padding:34px 36px;}
.pg-panel h3{font-size:clamp(22px,2.4vw,28px);margin:0 0 12px;}
.pg-lead{font-size:17px;line-height:1.65;color:var(--white);margin:0 0 22px;max-width:36em;}
.pg-fact{border-left:3px solid var(--pink-2);padding:2px 0 2px 16px;margin:0 0 24px;}
.pg-fact-k{display:block;font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--pink-text);margin-bottom:4px;}
.pg-fact p{margin:0;color:var(--text-dim);font-size:15.5px;line-height:1.65;}
.pg-incl-k{display:block;font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--text-dim);margin-bottom:10px;}
.pg-chips{display:flex;flex-wrap:wrap;gap:8px;}
.pg-chip{font-size:13px;color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.5);}
.pg-chip b{color:var(--white);font-weight:700;}
.pg-link{display:inline-block;margin-top:22px;font-weight:600;color:var(--pink-text);text-decoration:underline;text-underline-offset:3px;}
/* accordions (steps + FAQ) */
.pg-acc{border-top:1px solid var(--border);}
.pg-acc-item{border-bottom:1px solid var(--border);}
.pg-acc-h{margin:0;font-size:inherit;font-weight:inherit;}
.pg-acc-q{width:100%;display:flex;align-items:center;gap:16px;text-align:left;font:inherit;color:var(--white);background:none;border:0;padding:22px 4px;cursor:pointer;}
.pg-acc-t{flex:1;font-family:var(--mono);font-size:19px;line-height:1.3;}
.pg-acc-n{flex:none;font-family:var(--mono);font-size:15px;color:var(--pink-text);min-width:28px;}
.pg-acc-i{flex:none;position:relative;width:16px;height:16px;}
.pg-acc-i:before,.pg-acc-i:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--pink-text);transition:transform .25s;}
.pg-acc-i:after{transform:rotate(90deg);}
.is-open .pg-acc-i:after{transform:rotate(0);}
.pg-acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.pg-acc-a>div{overflow:hidden;}
.is-open .pg-acc-a{grid-template-rows:1fr;}
.pg-acc-a p{margin:0;padding:0 36px 24px 4px;color:var(--text-dim);font-size:15.5px;line-height:1.7;}
.pg-steps .pg-acc-a p{padding-left:48px;}
.pg-faqsec .pg-split-l .nb{white-space:nowrap;}
/* modal extras */
.pg-mstats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 4px;}
.pg-mstats>div{background:rgba(255,255,255,.05);border:1px solid var(--dcard-border);border-radius:14px;padding:14px 16px;}
.pg-mstats span{display:block;font-size:12px;color:var(--card-text-dimmer);margin-bottom:4px;}
.pg-mstats b{font-family:var(--mono);font-weight:400;font-size:19px;color:var(--card-text);}
.detail-indications li.is-off{color:var(--card-text-dimmer);}
.detail-modal .btn-primary{color:#211e3a;}
@media (max-width:1000px){
  .pg-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-split{grid-template-columns:1fr;gap:30px;}
}
@media (max-width:820px){
  .pg-explore{grid-template-columns:1fr;}
  .pg-tabs{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px;}
  .pg-tab{flex:none;}
  .pg-panel{padding:26px 22px;}
}
@media (max-width:640px){
  .pg-grid{grid-template-columns:1fr;}
  .pg-count{margin-left:0;width:100%;}
  .pg-bar{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;}
  .pg-bar-track{grid-column:1 / -1;order:3;}
  .pg-acc-t{font-size:17px;}
  .pg-steps .pg-acc-a p{padding-left:4px;}
  .pg-hero .hero-cta .btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){.pg-acc-a,.pg-acc-i:after,.pg-card,.pg-filter,.pg-tab{transition:none;}}

.pg-split-l h2,.pg-panel h3,.pg-chart-h,.pg-hero h1{font-family:var(--mono);font-weight:400;}
.pg-hero h1{letter-spacing:-.2px;}
.pg-stepsec .wrap,.pg-faqsec .wrap{padding-top:0;}
/* ---- program page: behandlingsutforskaren med bilder och längre texter ---- */
.pg-tabs-label{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--text-dim);margin:10px 4px 0;}
.pg-tabs-label:first-child{margin-top:0;}
.pg-panel{padding:30px 30px 32px;}
.pg-panel.has-img{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:30px;align-items:start;}
.pg-panel-txt{min-width:0;}
.pg-kicker{display:block;font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--pink-text);margin-bottom:8px;}
.pg-fig{margin:0;position:sticky;top:140px;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2);}
.pg-fig img{display:block;width:100%;height:100%;object-fit:cover;}
#pg-pan-papimi .pg-fig img{object-position:78% 40%;}
.pg-body{color:var(--text-dim);font-size:15.5px;line-height:1.72;margin:0 0 14px;max-width:38em;}
.pg-points{display:grid;gap:12px;margin:20px 0 22px;}
.pg-point{background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.pg-point b{display:block;font-size:14.5px;color:var(--white);margin-bottom:6px;}
.pg-point p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-dim);}
.pg-prep{margin:0 0 24px;}
.pg-prep ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;}
.pg-prep li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--text-dim);}
.pg-prep li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--pink-2);}
.pg-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.pg-tag-chip{font-size:13px;font-weight:600;color:var(--pink-text);background:rgba(194,87,143,.1);border:1px solid rgba(194,87,143,.22);border-radius:999px;padding:6px 13px;}
.pg-note{font-size:13.5px;line-height:1.65;color:var(--text-dim);border-top:1px solid var(--border);padding-top:14px;margin:0 0 20px;max-width:38em;}
.pg-note b{color:var(--white);}
.pg-incl{margin:0 0 4px;}
@media (max-width:1100px){
  .pg-panel.has-img{grid-template-columns:1fr;}
  .pg-fig{order:-1;position:static;aspect-ratio:16/10;}
  #pg-pan-hbot .pg-fig img,#pg-pan-lymf .pg-fig img{object-position:50% 30%;}
}
@media (max-width:820px){
  .pg-tabs-label{display:none;}
  .pg-panel{padding:22px 20px 26px;}
}

/* ---- "Behandlingar" flyout inside the Tjänster dropdown (desktop hover/focus) ---- */
.nav-sub{ position:static; }
.nav-dropdown-menu .nav-sub-trigger{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.nav-sub-arrow{ flex:none; opacity:.55; transition:transform .15s ease, opacity .15s ease; }
.nav-sub:hover .nav-sub-arrow, .nav-sub:focus-within .nav-sub-arrow{ opacity:1; transform:translateX(2px); }
.nav-sub:hover > .nav-sub-trigger, .nav-sub:focus-within > .nav-sub-trigger{ background:rgba(33,30,58,0.06); color:var(--white); }
.nav-flyout{
  position:absolute; top:-1px; left:100%; margin-left:8px; min-width:268px;
  background:var(--bg-0); border:1px solid var(--border); border-radius:14px; padding:8px;
  box-shadow:0 24px 50px -18px rgba(33,30,58,0.28);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:210;
}
.nav-flyout::before{ /* hover bridge across the gap to the parent menu */
  content:""; position:absolute; top:0; bottom:0; left:-14px; width:14px;
}
.nav-sub:hover > .nav-flyout, .nav-sub:focus-within > .nav-flyout{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);
}
.nav-flyout a.nav-flyout-all{ font-weight:700; color:var(--white); border-bottom:1px solid var(--border); border-radius:9px 9px 0 0; margin-bottom:4px; }
.mobile-nav a.mobile-nav-subsub{ padding-left:60px; font-size:13.5px; padding-top:11px; padding-bottom:11px; color:var(--text-dim); }
@media (prefers-reduced-motion:reduce){ .nav-flyout,.nav-sub-arrow{ transition:none; } }
.pg-sec{margin:22px 0 4px;}
.pg-sec-h{font-family:var(--mono);font-weight:400;font-size:18px;margin:0 0 8px;color:var(--white);}
.pg-bullets{list-style:none;margin:6px 0 14px;padding:16px 18px;display:grid;gap:8px;background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:14px;}
.pg-bullets li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;color:var(--text-dim);}
.pg-bullets li:before{content:"";position:absolute;left:0;top:.58em;width:6px;height:6px;border-radius:50%;background:var(--pink-2);}