/* ZIEL PRODUCT R10R6 — expanded red-box media stage + full-image fit */
:root{
  --pr-navy:#061826;
  --pr-navy-2:#0b2232;
  --pr-teal:#00856F;
  --pr-teal-dark:#007A67;
  --pr-mint:#7fdcc6;
  --pr-bg:#ffffff;
  --pr-soft:#f6f8fb;
  --pr-line:#e6eaf0;
  --pr-ink:#0f172a;
  --pr-muted:#64748b;
  --pr-ease:cubic-bezier(.16,1,.3,1);
  --pr-ease-soft:cubic-bezier(.22,.61,.36,1);
}
body.product-r10{background:#fff;color:var(--pr-ink);overflow-x:hidden}
body.product-r10 .site-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(230,234,240,.92)}
body.product-r10 .nav-inner{height:76px}
body.product-r10 .mobile-menu{display:none}
/* R10R2: horizontal clipping only. overflow:hidden on the main element created
   a scroll/containing context that could break the sticky product story and leave
   the large story spacer visible as an empty white block. */
body.product-r10 main{overflow:visible;overflow-x:clip}
.pr-shell{width:min(1320px,calc(100% - 64px));margin:0 auto}
.pr-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--pr-teal);font-size:11px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.pr-eyebrow:before{content:"";width:22px;height:1px;background:currentColor}

/* Hero — natural, open, not a box grid */
.pr-hero{position:relative;min-height:calc(100vh - 76px);display:flex;align-items:center;background:
  radial-gradient(circle at 77% 36%,rgba(0,133,111,.085),transparent 30%),
  linear-gradient(180deg,#fff 0%,#fff 72%,#f8fbfa 100%)}
.pr-hero:after{content:"";position:absolute;inset:auto -10% -25% 44%;height:54%;background:radial-gradient(circle,rgba(0,169,142,.10),transparent 67%);filter:blur(22px);pointer-events:none}
.pr-hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:46px;padding:34px 0 42px}
.pr-hero-copy{position:relative;z-index:2}
.pr-hero h1{margin:14px 0 17px;max-width:650px;font-size:clamp(48px,5vw,74px);line-height:.95;letter-spacing:-.052em;color:var(--pr-navy);font-weight:770}
.pr-hero h1 span{color:var(--pr-teal)}
.pr-hero-copy>p{margin:0;max-width:570px;color:var(--pr-muted);font-size:16.5px;line-height:1.58}
.pr-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:23px}
.pr-btn{min-height:48px;padding:0 21px;border:1px solid #d7e0e5;border-radius:999px;background:#fff;color:var(--pr-navy);font-size:14px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .25s var(--pr-ease),box-shadow .25s,border-color .25s}
.pr-btn:hover{transform:translateY(-2px);border-color:#b9c8d0;box-shadow:0 12px 30px rgba(6,24,38,.07)}
.pr-btn.primary{background:var(--pr-teal);border-color:var(--pr-teal);color:#fff}
.pr-btn.primary:hover{background:var(--pr-teal-dark)}
.pr-hero-proof{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:19px;padding-top:17px;border-top:1px solid var(--pr-line);color:#526474;font-size:11.5px;font-weight:700}
.pr-hero-proof span{display:flex;align-items:center;gap:8px}
.pr-hero-proof i{width:6px;height:6px;border-radius:99px;background:var(--pr-teal)}
.pr-hero-art{position:relative;z-index:1;min-width:0;perspective:1300px}
.pr-hero-glow{position:absolute;inset:8% 5% -8% 8%;background:radial-gradient(circle at 45% 50%,rgba(0,133,111,.18),transparent 62%);filter:blur(30px)}
.pr-hero-image{position:relative;width:100%;max-width:760px;margin-inline:auto;border-radius:22px;overflow:hidden;box-shadow:0 34px 76px -36px rgba(6,24,38,.32);transform:translateZ(0) rotateY(-2deg) rotateX(.7deg);transform-origin:50% 60%;transition:transform .6s var(--pr-ease)}
.pr-hero-image:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(6,24,38,.08),inset 0 1px rgba(255,255,255,.65)}
.pr-hero-image img{display:block;width:100%;height:auto}
.pr-hero-tag{position:absolute;right:-18px;bottom:34px;padding:11px 14px;border:1px solid rgba(215,224,229,.8);border-radius:14px;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 38px rgba(6,24,38,.1);color:#536674;font-size:11px}
.pr-hero-tag strong{display:block;color:var(--pr-navy);font-size:13px;margin-bottom:2px}

/* Intro — text floats naturally */
.pr-intro{padding:82px 0 68px;background:#fff}
.pr-intro-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:72px;align-items:start}
.pr-intro h2{margin:0;font-size:clamp(40px,4.3vw,62px);line-height:.98;letter-spacing:-.047em;color:var(--pr-navy)}
.pr-intro h2 span{color:var(--pr-teal)}
.pr-intro-copy{padding-top:9px;color:#526474;font-size:17px;line-height:1.72;max-width:660px}
.pr-intro-line{margin-top:28px;padding-top:22px;border-top:1px solid var(--pr-line);display:flex;flex-wrap:wrap;gap:12px 22px;color:#3c5060;font-size:12px;font-weight:760}
.pr-intro-line span:not(:last-child):after{content:"·";margin-left:22px;color:#9badb8}

/* Cinematic sticky product story */
.pr-story{--count:12;position:relative;height:calc(var(--count) * 46vh + 90vh);background:#fff}
.pr-story-pin{position:sticky;top:var(--pr-nav-h,76px);height:calc(100dvh - var(--pr-nav-h,76px));display:grid;align-items:stretch;overflow:clip;isolation:isolate;contain:paint}
.pr-story-pin:before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 84% 50%,rgba(0,133,111,.075),transparent 27%),
  radial-gradient(circle at 16% 78%,rgba(6,24,38,.035),transparent 30%),
  linear-gradient(180deg,#fff 0%,#fbfcfd 100%);pointer-events:none}
.pr-story .pr-shell{width:min(1840px,calc(100% - 20px))}
.pr-story-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(350px,.25fr) minmax(0,.75fr);
  gap:16px;
  align-items:center;
  height:100%;
  padding:0 0 4px;
  box-sizing:border-box;
}
.pr-copy-stack,.pr-media-stack{position:relative;height:100%}
.pr-media-stack{
  align-self:center;
  justify-self:end;
  width:var(--pr-media-w,100%);
  height:var(--pr-media-h,560px);
  min-width:0;
  min-height:0;
  max-width:none;
  overflow:visible;
  border-radius:24px;
  transform:scaleX(var(--pr-media-x-scale,1));
  transform-origin:left center;
}
.pr-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translate3d(0,16px,0);will-change:transform,opacity;pointer-events:none}
.pr-copy.is-near{pointer-events:auto}
.pr-chapter{display:flex;align-items:center;gap:10px;margin-bottom:17px;color:var(--pr-teal);font-size:11px;line-height:1;font-weight:850;text-transform:uppercase;letter-spacing:.14em}
.pr-chapter b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:1px solid #bcded6;font-size:10px}
.pr-copy h3{margin:0;color:var(--pr-navy);font-size:clamp(38px,3.7vw,56px);line-height:.99;letter-spacing:-.045em;font-weight:760}
.pr-copy h3 span{color:var(--pr-teal)}
.pr-copy p{margin:16px 0 0;max-width:470px;color:var(--pr-muted);font-size:15px;line-height:1.62}
.pr-points{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--pr-line);max-width:470px;color:#415667;font-size:11.5px;font-weight:760}
.pr-points span{display:flex;align-items:center;gap:8px}
.pr-points span:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pr-teal)}
.pr-shot{
  position:absolute;
  inset:0;
  margin:0;
  display:grid;
  place-items:center;
  opacity:0;
  transform:none;
  clip-path:inset(0 0 0 0 round 22px);
  will-change:clip-path;
  pointer-events:none;
}
.pr-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 50%;
  border-radius:22px;
  box-shadow:0 30px 70px -42px rgba(6,24,38,.28),0 0 0 1px rgba(6,24,38,.055);
  background:#fff;
  image-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
.pr-shot-hq img{image-rendering:auto}
.pr-shot-marketing img{width:100%;height:100%;max-width:none;max-height:none}
.pr-shot:after{display:none}
.pr-story-progress{position:absolute;right:calc(var(--pr-media-right-inset,0px) - 14px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:5}
.pr-story-progress i{display:block;width:5px;height:5px;border-radius:50%;background:#cad5db;transition:transform .35s var(--pr-ease),background .35s}
.pr-story-progress i.active{background:var(--pr-teal);transform:scale(1.7)}
.pr-story-counter{position:absolute;right:var(--pr-media-right-inset,0px);bottom:18px;color:#8a9aa6;font-size:11px;font-weight:750;letter-spacing:.08em}

/* Natural bridge */
.pr-bridge{padding:120px 0 130px;background:linear-gradient(180deg,#fff,#f7faf9)}
.pr-bridge-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end}
.pr-bridge h2{margin:12px 0 0;color:var(--pr-navy);font-size:clamp(46px,5.6vw,76px);line-height:.98;letter-spacing:-.052em}
.pr-bridge h2 span{color:var(--pr-teal)}
.pr-bridge p{margin:0;color:#526474;font-size:17px;line-height:1.72;max-width:560px}
.pr-flow-line{grid-column:1/-1;margin-top:18px;padding-top:28px;border-top:1px solid #dfe7ea;display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:#324757;font-size:13px;font-weight:760}
.pr-flow-line span{display:flex;align-items:center;gap:12px}
.pr-flow-line span:not(:last-child):after{content:"→";color:var(--pr-teal)}

/* Dark ticker retained from old product page, refined */
.pr-included{position:relative;padding:118px 0 74px;background:
  radial-gradient(circle at 18% 0,rgba(0,133,111,.18),transparent 34%),
  radial-gradient(circle at 85% 78%,rgba(18,78,91,.26),transparent 36%),
  linear-gradient(180deg,#071923 0%,#061826 100%);color:#fff;overflow:hidden}
.pr-included-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:end;margin-bottom:62px}
.pr-included h2{margin:12px 0 0;max-width:640px;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(52px,7vw,94px);line-height:.92;letter-spacing:-.045em}
.pr-included-head p{margin:0;max-width:560px;color:#a9bdc9;font-size:16px;line-height:1.7}
.pr-ticker-wrap{overflow:hidden;margin:0 -1px;padding:22px 0 24px;border-top:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.11);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.pr-ticker{display:flex;width:max-content;animation:prTicker 52s linear infinite;will-change:transform}
.pr-ticker:hover{animation-play-state:paused}
.pr-ticker-group{display:flex;align-items:center;flex-shrink:0}
.pr-ticker span{display:flex;align-items:center;white-space:nowrap;font-family:Georgia,"Times New Roman",serif;font-size:clamp(25px,3vw,43px);font-weight:400;color:#dbe7ec;padding-right:.7em}
.pr-ticker span:after{content:"";width:.17em;height:.17em;border-radius:50%;background:#43c8b0;margin-left:.7em}
@keyframes prTicker{to{transform:translate3d(-50%,0,0)}}
.pr-storage{display:grid;grid-template-columns:.6fr 1.4fr;gap:48px;margin-top:54px;padding-top:30px;border-top:1px solid rgba(255,255,255,.11)}
.pr-storage strong{font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:400;color:#fff}
.pr-storage span{color:#9eb3c0;line-height:1.72;max-width:760px}
.pr-final{padding:72px 0 80px;background:#061826;color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.pr-final-grid{display:flex;align-items:center;justify-content:space-between;gap:40px}
.pr-final h3{margin:0;color:#fff;font-size:clamp(35px,4vw,58px);line-height:1;letter-spacing:-.045em}
.pr-final h3 span{color:#61d9c3}
.pr-final p{margin:13px 0 0;color:#9fb4c0;max-width:620px;line-height:1.65}
.pr-final .pr-btn{background:transparent;border-color:rgba(255,255,255,.23);color:#fff}
.pr-final .pr-btn.primary{background:var(--pr-teal);border-color:var(--pr-teal)}

/* motion */
html:not(.pr-ready) .pr-hero-copy{opacity:0;transform:translateY(14px)}
html:not(.pr-ready) .pr-hero-art{opacity:0;transform:translateY(18px) scale(.985)}
.pr-hero-copy,.pr-hero-art{transition:opacity .9s var(--pr-ease),transform .9s var(--pr-ease)}


/* R10R1 desktop viewport fit: keep the complete composition visible without browser zoom hacks. */
@media(min-width:981px){
  .pr-hero{min-height:calc(100dvh - var(--pr-nav-h,76px))}
  .pr-hero-grid{min-height:calc(100dvh - var(--pr-nav-h,76px));box-sizing:border-box}
  .pr-hero-art{display:flex;align-items:center;justify-content:center}
  .pr-hero-image img{max-height:min(540px,calc(100dvh - 126px));object-fit:contain}
  .pr-story-grid{min-height:0;align-items:center}
  .pr-copy-stack,.pr-media-stack{min-height:0}
}
@media(min-width:981px) and (max-height:760px){
  .pr-hero-grid{padding:22px 0 28px}
  .pr-hero h1{font-size:clamp(44px,4.55vw,66px);margin-top:10px;margin-bottom:14px}
  .pr-hero-copy>p{font-size:15px;line-height:1.5}
  .pr-actions{margin-top:18px}
  .pr-hero-proof{margin-top:14px;padding-top:13px}
  .pr-hero-image img{max-height:500px}
  .pr-intro{padding:68px 0 56px}
  .pr-story-grid{padding-top:6px;padding-bottom:10px}
  .pr-copy h3{font-size:clamp(36px,3.45vw,50px)}
  .pr-copy p{font-size:14px}
}

@media(max-width:980px){
  .pr-media-stack{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4/3;
    overflow:visible;
  }

  .pr-hero{min-height:auto}.pr-hero-grid{grid-template-columns:1fr;gap:42px;padding:62px 0 70px}.pr-hero h1{font-size:clamp(48px,10vw,72px)}.pr-hero-art{max-width:820px}.pr-hero-tag{right:12px}
  .pr-intro-grid{grid-template-columns:1fr;gap:30px}.pr-story{height:auto}.pr-story-pin{position:relative;top:auto;height:auto;padding:0}.pr-story-grid{height:auto;display:block}.pr-copy-stack,.pr-media-stack{height:auto}.pr-copy,.pr-shot{position:relative;inset:auto;opacity:1!important;transform:none!important;filter:none!important}.pr-copy{padding:92px 0 30px}.pr-shot{padding:0 0 24px}.pr-copy:not(:first-child){padding-top:96px}.pr-story-progress,.pr-story-counter{display:none}.pr-bridge-grid,.pr-included-head,.pr-storage{grid-template-columns:1fr;gap:30px}.pr-final-grid{align-items:flex-start;flex-direction:column}
}
@media(max-width:760px){
  body.product-r10 .nav-links{display:none}.pr-shell{width:min(100% - 28px,1240px)}.pr-hero-grid{padding:44px 0 56px}.pr-hero h1{font-size:48px}.pr-hero-copy>p{font-size:16px}.pr-hero-proof{gap:12px 16px}.pr-hero-image{border-radius:18px;transform:none}.pr-hero-tag{display:none}.pr-intro{padding:74px 0 50px}.pr-intro h2{font-size:44px}.pr-intro-copy{font-size:15px}.pr-copy{padding-top:70px}.pr-copy h3{font-size:44px}.pr-copy p{font-size:15px}.pr-shot img{border-radius:16px}.pr-bridge{padding:82px 0 90px}.pr-bridge h2{font-size:48px}.pr-flow-line{gap:10px}.pr-included{padding:84px 0 56px}.pr-included h2{font-size:58px}.pr-included-head p{font-size:15px}.pr-storage strong{font-size:26px}.pr-final{padding:54px 0 64px}
}
@media(prefers-reduced-motion:reduce){
  .pr-ticker{animation:none}.pr-copy,.pr-shot{transition:none!important}.pr-hero-copy,.pr-hero-art{transition:none!important}.pr-hero-image{transform:none!important}
}

/* R10R13 final-fit patch
   Goal approved by user:
   - move ONLY the LEFT edge of the product image stage so it begins under the end of “Features”
   - keep the image stage top/right/bottom visually anchored
   - center the left copy block in its own area
   - keep screenshots undistorted and crisp */
@media (min-width: 981px) {
  .pr-story .pr-shell {
    --pr-copy-col: clamp(500px, 31.2vw, 540px);
    --pr-copy-max: 430px;
  }

  .pr-story-grid {
    grid-template-columns: var(--pr-copy-col) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
  }

  .pr-copy-stack,
  .pr-media-stack {
    min-height: 0;
  }

  .pr-copy {
    left: 0;
    right: 0;
    width: min(var(--pr-copy-max), calc(100% - 52px));
    margin-inline: auto;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    font-family: inherit;
  }

  .pr-copy .pr-chapter,
  .pr-copy h3,
  .pr-copy p,
  .pr-copy .pr-points {
    width: 100%;
    max-width: 100%;
  }

  .pr-copy h3 {
    margin: 0;
    line-height: .99;
    letter-spacing: -.045em;
  }

  .pr-copy p {
    margin-top: 16px;
    line-height: 1.62;
  }

  .pr-points {
    margin-top: 18px;
    padding-top: 16px;
  }

  .pr-media-stack {
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-width: calc((100dvh - var(--pr-nav-h, 76px) - 8px) * 4 / 3);
    min-height: 0;
    overflow: visible;
    border-radius: 24px;
    transform: none !important;
    transform-origin: center center !important;
  }

  .pr-shot {
    inset: 0;
  }

  .pr-shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }
}


/* R10R14 — restore right edge + eliminate empty frame areas without distortion.
   The main screenshot is NEVER stretched. The wider frame is filled by a soft,
   cropped continuation layer while the real UI remains sharp and proportional. */
@media (min-width: 981px) {
  .pr-media-stack {
    justify-self: end !important;
    align-self: center !important;
    width: var(--pr-media-w, 100%) !important;
    height: var(--pr-media-h, auto) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin-right: var(--pr-frame-gutter, 34px) !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    transform: translateY(var(--pr-frame-y-shift,0px)) !important;
  }

  .pr-shot {
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #f8fbfc !important;
  }

  .pr-shot::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -18px;
    background-image: var(--pr-shot-image, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(18px) saturate(.82);
    opacity: .30;
    transform: scale(1.04);
    pointer-events: none;
  }

  .pr-shot::after {
    content: "";
    display: block !important;
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
      linear-gradient(90deg,
        rgba(248,251,252,.72) 0%,
        rgba(255,255,255,.08) 11%,
        rgba(255,255,255,.02) 89%,
        rgba(248,251,252,.72) 100%);
    pointer-events: none;
  }

  .pr-shot img {
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translate3d(var(--pr-img-x,0px),var(--pr-img-y,0px),0) scale(var(--pr-img-zoom,1)) !important;
    transform-origin: center center !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    background: transparent !important;
    image-rendering: auto !important;
  }
}


/* ============================================================
   R10R15 MANUAL PRODUCT TUNING
   Edit ONLY the values below when you want to fine-tune Product.

   FRAME CONTROLS
   --pr-frame-left-adjust:
      negative = move LEFT border farther left
      positive = move LEFT border right

   --pr-frame-right-adjust:
      positive = move RIGHT border farther right
      negative = move RIGHT border left

   --pr-frame-top-adjust:
      negative = move TOP border upward
      positive = move TOP border downward

   --pr-frame-bottom-adjust:
      positive = move BOTTOM border downward
      negative = move BOTTOM border upward

   IMAGE CONTROLS
   --pr-img-zoom:
      1.00 = show the full source image, no crop
      1.03 = tiny crop
      1.08 = moderate crop
      NEVER changes aspect ratio.

   --pr-img-x:
      positive = move image right
      negative = move image left

   --pr-img-y:
      positive = move image down
      negative = move image up
   ============================================================ */

.pr-story{
  --pr-frame-left-adjust:0px;
  --pr-frame-right-adjust:0px;
  --pr-frame-top-adjust:0px;
  --pr-frame-bottom-adjust:0px;
}

/* Per-slide image crop / position.
   Keep zoom at 1.00 whenever you want the COMPLETE screenshot visible. */
.pr-shot:nth-child(1)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Today */
.pr-shot:nth-child(2)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Patients */
.pr-shot:nth-child(3)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Calendar */
.pr-shot:nth-child(4)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Care Plan */
.pr-shot:nth-child(5)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Finance */
.pr-shot:nth-child(6)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Reports */
.pr-shot:nth-child(7)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Communications */
.pr-shot:nth-child(8)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Self-booking */
.pr-shot:nth-child(9)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Perio */
.pr-shot:nth-child(10) {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Implant Registry */
.pr-shot:nth-child(11) {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Lab */
.pr-shot:nth-child(12) {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Admin */


/* ============================================================
   R10R18 FINAL VISUAL FINISH
   Geometry intentionally remains the approved R10R15 geometry.
   These rules ONLY refine the frame appearance.
   ============================================================ */
@media (min-width:981px){
  .pr-media-stack{
    background:linear-gradient(180deg,rgba(246,251,253,.98),rgba(250,252,253,.98)) !important;
    border:1px solid rgba(6,24,38,.075) !important;
    box-shadow:
      0 22px 54px -38px rgba(6,24,38,.28),
      0 0 0 1px rgba(255,255,255,.82) inset !important;
  }

  .pr-shot{
    background:#f8fbfc !important;
    box-shadow:inset 0 0 0 1px rgba(6,24,38,.045) !important;
  }

  /* Keep the full screenshot proportional and undistorted.
     A subtle background continuation fills unused wide-frame space. */
  .pr-shot::before{
    opacity:.18 !important;
    filter:blur(22px) saturate(.72) !important;
  }

  .pr-shot::after{
    background:
      linear-gradient(90deg,
        rgba(248,251,252,.50) 0%,
        rgba(255,255,255,.04) 14%,
        rgba(255,255,255,.02) 86%,
        rgba(248,251,252,.50) 100%) !important;
  }

  .pr-shot img{
    object-fit:contain !important;
    object-position:center center !important;
    transform:
      translate3d(var(--pr-img-x,0px),var(--pr-img-y,0px),0)
      scale(var(--pr-img-zoom,1)) !important;
    transform-origin:center center !important;
    border:1px solid rgba(6,24,38,.06) !important;
    border-radius:20px !important;
    box-shadow:0 14px 34px -28px rgba(6,24,38,.30) !important;
    background:#fff !important;
  }
}


/* ============================================================
   R10R19 — FRAME AND IMAGE ARE COMPLETELY INDEPENDENT

   IMPORTANT:
   .pr-media-stack = OUTER FRAME. Its position/size is controlled only by
   the existing frame geometry / JS. Image tuning does not touch it.

   .pr-shot img = INNER SCREENSHOT. It may be moved or zoomed independently.
   Width and height are NEVER scaled independently, preventing distortion.
   ============================================================ */

@media (min-width:981px){

  /* OUTER FRAME — preserve current borders/geometry exactly. */
  .pr-media-stack{
    position:relative !important;
    isolation:isolate !important;
  }

  /* Each slide is only an inner viewport. It cannot change frame geometry. */
  .pr-shot{
    position:absolute !important;
    inset:0 !important;
    overflow:hidden !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  /* Soft continuation fills the wide frame behind the full 4:3 screenshot.
     This layer may crop because it is only decorative; the real UI never crops. */
  .pr-shot::before{
    content:"" !important;
    position:absolute !important;
    inset:-24px !important;
    z-index:0 !important;
    background-image:var(--pr-shot-image,none) !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    filter:blur(24px) saturate(.74) brightness(1.03) !important;
    opacity:.20 !important;
    transform:scale(1.06) !important;
    pointer-events:none !important;
  }

  .pr-shot::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:
      linear-gradient(90deg,
        rgba(248,251,252,.56) 0%,
        rgba(255,255,255,.10) 15%,
        rgba(255,255,255,.04) 50%,
        rgba(255,255,255,.10) 85%,
        rgba(248,251,252,.56) 100%) !important;
    pointer-events:none !important;
  }

  /* REAL SCREENSHOT — independent from frame.
     max-width/max-height fit the entire source image INSIDE the anchored frame.
     width:auto + height:auto preserves the source aspect ratio exactly. */
  .pr-shot img{
    position:absolute !important;
    z-index:2 !important;
    top:50% !important;
    left:50% !important;

    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;
    aspect-ratio:auto !important;

    transform:
      translate(-50%,-50%)
      translate3d(var(--pr-img-x,0px),var(--pr-img-y,0px),0)
      scale(var(--pr-img-zoom,1)) !important;
    transform-origin:center center !important;

    border:1px solid rgba(6,24,38,.055) !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:0 12px 32px -26px rgba(6,24,38,.32) !important;

    image-rendering:auto !important;
  }
}

/* IMAGE-ONLY tuning.
   These values move/zoom ONLY the screenshot. The outer frame never moves. */
.pr-shot:nth-child(1)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Today */
.pr-shot:nth-child(2)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Patients */
.pr-shot:nth-child(3)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Calendar */
.pr-shot:nth-child(4)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Care Plan */
.pr-shot:nth-child(5)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Finance */
.pr-shot:nth-child(6)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Reports */
.pr-shot:nth-child(7)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Communications */
.pr-shot:nth-child(8)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Self-booking */
.pr-shot:nth-child(9)  {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Perio */
.pr-shot:nth-child(10) {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Implant Registry */
.pr-shot:nth-child(11) {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Lab */
.pr-shot:nth-child(12) {--pr-img-zoom:1.00;--pr-img-x:0px;--pr-img-y:0px;} /* Admin */


/* ============================================================
   R10R22 — TALL INDEPENDENT PRODUCT FRAME

   The OUTER FRAME and INNER SCREENSHOT are independent.
   The frame now uses almost all available vertical Product-story space.
   Left and right geometry stays unchanged.
   ============================================================ */
.pr-story{
  /* Space intentionally left above and below the outer frame. */
  --pr-frame-vertical-inset:14px;

  /* Optional fine tuning. Keep 0px for the approved centered frame. */
  --pr-frame-top-adjust:0px !important;
  --pr-frame-bottom-adjust:0px !important;
}

/* The real screenshot remains independent and fully contained.
   Never stretch width and height independently. */
@media (min-width:981px){
  .pr-media-stack{
    overflow:hidden !important;
  }

  .pr-shot img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    aspect-ratio:auto !important;
  }
}


/* ============================================================
   R10R24 — PRODUCT COPY + TYPOGRAPHY CONSISTENCY
   The Product page now uses the same inherited site typeface as Pricing.
   ============================================================ */
body.product-r10,
body.product-r10 :where(h1,h2,h3,h4,p,span,a,strong,b,button,input,select,textarea,label,li){
  font-family:inherit !important;
}
body.product-r10 .pr-included h2,
body.product-r10 .pr-ticker span,
body.product-r10 .pr-storage strong,
body.product-r10 .pr-eyebrow,
body.product-r10 .pr-chapter,
body.product-r10 .pr-hero h1 span,
body.product-r10 .pr-intro h2 span,
body.product-r10 .pr-copy h3 span,
body.product-r10 .pr-final h3 span{
  font-family:inherit !important;
}
body.product-r10 .pr-eyebrow,
body.product-r10 .pr-chapter{
  letter-spacing:.08em;
}


/* ============================================================
   R10R29 — WHITE PRODUCT STORY COPY + SIZING ONLY

   IMPORTANT:
   - Does NOT change font-family anywhere.
   - Does NOT change the website top navigation.
   - Does NOT change the dark "Included in Ziel Practice" section.
   - Does NOT change screenshots, frames, animation or JS.

   It only refines the 12 white Product story text panels.
   ============================================================ */

body.product-r10 .pr-copy .pr-chapter{
  gap:11px !important;
  margin-bottom:19px !important;
  font-size:12.75px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.095em !important;
}

body.product-r10 .pr-copy .pr-chapter b{
  width:35px !important;
  height:35px !important;
  flex:0 0 35px !important;
  font-size:11px !important;
  font-weight:850 !important;
  border-width:1px !important;
}

/* Slightly more presence without changing the R10R24 typeface. */
body.product-r10 .pr-copy h3{
  max-width:505px !important;
}

/* Main paragraph: larger and calmer. */
body.product-r10 .pr-copy p{
  max-width:500px !important;
  margin-top:18px !important;
  font-size:16.5px !important;
  line-height:1.66 !important;
}

/* Supporting feature points: larger, clearer and more premium. */
body.product-r10 .pr-copy .pr-points{
  max-width:500px !important;
  gap:10px 19px !important;
  margin-top:21px !important;
  padding-top:18px !important;
  font-size:12.75px !important;
  line-height:1.4 !important;
  font-weight:760 !important;
}

body.product-r10 .pr-copy .pr-points span{
  gap:9px !important;
}

body.product-r10 .pr-copy .pr-points span:before{
  width:6px !important;
  height:6px !important;
  flex:0 0 6px !important;
}

@media (max-width:980px){
  body.product-r10 .pr-copy .pr-chapter{
    font-size:12px !important;
  }
  body.product-r10 .pr-copy .pr-chapter b{
    width:33px !important;
    height:33px !important;
    flex-basis:33px !important;
  }
  body.product-r10 .pr-copy p{
    font-size:16px !important;
    line-height:1.64 !important;
  }
  body.product-r10 .pr-copy .pr-points{
    font-size:12.25px !important;
    gap:9px 16px !important;
  }
}


/* ============================================================
   R10R30 — DARK "INCLUDED IN ZIEL PRACTICE" SECTION FIT

   ONLY spacing and size are adjusted so the entire section fits
   comfortably within a normal desktop viewport.

   IMPORTANT:
   - Font families are untouched.
   - Copy is untouched.
   - Top navigation is untouched.
   - White Product story sections are untouched.
   - Ticker animation is untouched.
   - Images / frames / JS / auth / billing are untouched.
   ============================================================ */

@media (min-width:981px){
  body.product-r10 .pr-included{
    box-sizing:border-box !important;
    min-height:calc(100svh - 96px) !important;
    padding:clamp(46px,5.1vh,62px) 0 clamp(42px,4.6vh,56px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  body.product-r10 .pr-included-head{
    grid-template-columns:.92fr 1.08fr !important;
    gap:clamp(54px,5vw,76px) !important;
    align-items:end !important;
    margin-bottom:clamp(28px,3.3vh,40px) !important;
  }

  body.product-r10 .pr-included h2{
    max-width:590px !important;
    margin-top:10px !important;
    font-size:clamp(60px,5.65vw,80px) !important;
    line-height:.93 !important;
  }

  body.product-r10 .pr-included-head p{
    max-width:590px !important;
    font-size:15.5px !important;
    line-height:1.56 !important;
  }

  body.product-r10 .pr-ticker-wrap{
    padding:14px 0 16px !important;
  }

  body.product-r10 .pr-ticker span{
    font-size:clamp(25px,2.35vw,35px) !important;
    padding-right:.66em !important;
  }

  body.product-r10 .pr-ticker span:after{
    margin-left:.66em !important;
  }

  body.product-r10 .pr-storage{
    grid-template-columns:.62fr 1.38fr !important;
    gap:44px !important;
    margin-top:30px !important;
    padding-top:21px !important;
  }

  body.product-r10 .pr-storage strong{
    font-size:27px !important;
    line-height:1.18 !important;
  }

  body.product-r10 .pr-storage span{
    max-width:800px !important;
    font-size:15px !important;
    line-height:1.56 !important;
  }
}

/* Extra fit for shorter laptop/browser viewports. */
@media (min-width:981px) and (max-height:900px){
  body.product-r10 .pr-included{
    padding:34px 0 36px !important;
  }

  body.product-r10 .pr-included-head{
    margin-bottom:24px !important;
    gap:48px !important;
  }

  body.product-r10 .pr-included h2{
    font-size:clamp(54px,5.1vw,70px) !important;
    line-height:.92 !important;
  }

  body.product-r10 .pr-included-head p{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  body.product-r10 .pr-ticker-wrap{
    padding:11px 0 12px !important;
  }

  body.product-r10 .pr-ticker span{
    font-size:clamp(23px,2.15vw,32px) !important;
  }

  body.product-r10 .pr-storage{
    margin-top:24px !important;
    padding-top:18px !important;
  }

  body.product-r10 .pr-storage strong{
    font-size:25px !important;
  }

  body.product-r10 .pr-storage span{
    font-size:14.5px !important;
    line-height:1.5 !important;
  }
}


/* ============================================================
   R10R31 — FINAL CTA BUTTON FONT ONLY
   Make "View plans" and "Talk to us" use the exact same
   inherited font family as "One workspace. A clearer way to work."
   Nothing else is changed.
   ============================================================ */
body.product-r10 .pr-final .pr-btn{
  font-family:inherit !important;
  font-style:normal !important;
}


/* ============================================================
   R10R32 — TOP WEBSITE BAR FONT ONLY

   Match the Product top navigation typography to Pricing.
   ONLY the website header/nav typography is touched.
   No Product section/body typography is changed.
   ============================================================ */
body.product-r10 .site-nav,
body.product-r10 .site-nav .nav-inner,
body.product-r10 .site-nav .brand,
body.product-r10 .site-nav .brand-word,
body.product-r10 .site-nav .nav-links,
body.product-r10 .site-nav .nav-links a,
body.product-r10 .site-nav .nav-actions,
body.product-r10 .site-nav .nav-actions a,
body.product-r10 .site-nav .nav-actions button,
body.product-r10 .site-nav .mobile-menu,
body.product-r10 .site-nav .mobile-menu a{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-style:normal !important;
}

/* Match the clean Pricing header weights without changing size/layout. */
body.product-r10 .site-nav .brand-word{
  font-weight:760 !important;
  letter-spacing:-.02em !important;
}
body.product-r10 .site-nav .nav-links a{
  font-weight:700 !important;
  letter-spacing:-.012em !important;
}
body.product-r10 .site-nav .nav-actions a,
body.product-r10 .site-nav .nav-actions button,
body.product-r10 .site-nav .mobile-menu a{
  font-weight:700 !important;
}


/* ============================================================
   R10R33 — PRODUCT CHAPTER LABEL + COUNTER FONT ONLY

   Match:
   - 01 / Today
   - 02 / Patients
   - ...
   - 12 / Admin
   - the 01 / 12 story counter

   to the same clean sans-serif family used by Pricing.
   NOTHING ELSE is changed.
   ============================================================ */
body.product-r10 .pr-copy .pr-chapter,
body.product-r10 .pr-copy .pr-chapter b,
body.product-r10 .pr-story-counter{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-style:normal !important;
}

/* ============================================================
   R10R34 — CHAPTER LABELS BIGGER + BOLDER

   Only changes:
   - 01 / Today ... 12 / Admin chapter labels on the left
   - the circular number badge
   - the 01 / 12 counter on the right

   Does NOT change:
   - story title font
   - story paragraph font
   - story point descriptions
   - top bar
   - dark included section
   - screenshots/images
   ============================================================ */
body.product-r10 .pr-copy .pr-chapter{
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

body.product-r10 .pr-copy .pr-chapter b{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 999px !important;
  border-width: 1.5px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.product-r10 .pr-story-counter{
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
}

@media (max-width: 1100px){
  body.product-r10 .pr-copy .pr-chapter{
    font-size: 13px !important;
    gap: 12px !important;
  }
  body.product-r10 .pr-copy .pr-chapter b{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 12px !important;
  }
  body.product-r10 .pr-story-counter{
    font-size: 13px !important;
  }
}


/* ============================================================
   R10R35 — PRODUCT HEADER MATCH + PREMIUM CHAPTER LABELS

   Product top bar typography now matches the shared website header.
   Separate "Features" navigation item is removed in HTML; Product remains.
   Product story chapter labels + number badges are strengthened.

   No screenshots, image frames, story titles, story paragraphs,
   dark section, animation, auth, Supabase or billing are changed.
   ============================================================ */

/* Product website header: match the same typography metrics used by
   the standard site header in assets/styles.css. */
body.product-r10 .site-nav .brand,
body.product-r10 .site-nav .brand-word,
body.product-r10 .site-nav .nav-links,
body.product-r10 .site-nav .nav-links a,
body.product-r10 .site-nav .nav-actions,
body.product-r10 .site-nav .nav-actions a,
body.product-r10 .site-nav .nav-actions button,
body.product-r10 .site-nav .ziel-user-trigger,
body.product-r10 .site-nav .ziel-user-email,
body.product-r10 .site-nav .mobile-menu,
body.product-r10 .site-nav .mobile-menu a{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-style:normal !important;
}

body.product-r10 .site-nav .brand-word{
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
}

body.product-r10 .site-nav .nav-links{
  font-size:14px !important;
  font-weight:650 !important;
  letter-spacing:normal !important;
}

body.product-r10 .site-nav .nav-links a{
  font-size:14px !important;
  font-weight:650 !important;
  letter-spacing:normal !important;
}

/* Keep signed-in account text consistent with the same site header system. */
body.product-r10 .site-nav .ziel-user-email{
  font-size:12px !important;
  font-weight:720 !important;
  letter-spacing:normal !important;
}

body.product-r10 .site-nav .nav-actions > .btn{
  font-weight:760 !important;
  letter-spacing:normal !important;
}

/* Premium Product chapter marker: larger and more deliberate, without
   moving or changing the story content beside it. */
body.product-r10 .pr-copy .pr-chapter{
  gap:14px !important;
  margin-bottom:21px !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.115em !important;
}

body.product-r10 .pr-copy .pr-chapter b{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  flex:0 0 46px !important;
  border:1.5px solid rgba(0,133,111,.30) !important;
  border-radius:999px !important;
  background:rgba(0,133,111,.035) !important;
  color:#007a67 !important;
  font-size:13.5px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.025em !important;
  box-shadow:0 5px 16px rgba(6,24,38,.035) !important;
}

body.product-r10 .pr-story-counter{
  font-size:14px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.09em !important;
}

@media (max-width:1100px){
  body.product-r10 .pr-copy .pr-chapter{
    gap:12px !important;
    font-size:13.5px !important;
  }
  body.product-r10 .pr-copy .pr-chapter b{
    width:41px !important;
    height:41px !important;
    min-width:41px !important;
    flex-basis:41px !important;
    font-size:12px !important;
  }
  body.product-r10 .pr-story-counter{
    font-size:13px !important;
  }
}