/* Rostify — "Pricing" v4 (29.09.2026, on the v1 layout): price discreetly in a box as a split-flap board counting down,
   the twelve modules as tiles, add-on modules as dashed tiles, tier bars in percent, services, dark closing band.
   Uses the v4 tokens and classes from rostify.css (.v4, .v4-head, .v4-ch, .v4-lede, .v4-btn, .v4-r, .v4-mini). */
.pr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr .v4-head .v4-ch{margin-bottom:clamp(14px,1.8vw,22px)}
.pr-h1{margin:0;font-stretch:78%;font-weight:700;font-size:clamp(42px,5.4vw,84px);line-height:.92;letter-spacing:-.022em;text-wrap:balance;max-width:14ch}
.pr-k{margin:0;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}

/* ---- package: price box left, module tiles right */
.pr-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,44px);align-items:stretch}
.pr-card{display:flex;flex-direction:column;padding:clamp(24px,2.8vw,38px);border-radius:22px;border:1px solid var(--rule);background:var(--bg)}
.pr-price{display:flex;align-items:center;gap:.14em;margin:20px 0 0;font-stretch:80%;font-weight:700;font-size:clamp(40px,4.3vw,64px);line-height:1;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.pr-cur{margin-right:.06em}
.pr-board{display:inline-flex;align-items:center}
.pr-unit{margin:12px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pr-per{margin:6px 0 0;font-size:clamp(16px,1.25vw,18px);color:var(--ink2)}
.pr-facts{list-style:none;margin:clamp(20px,2.2vw,28px) 0 0;padding:0;border-top:1px solid var(--rule)}
.pr-facts li{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink2)}
.pr-facts li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--teal);flex:none}
.pr-card .v4-ctas{margin-top:auto;padding-top:clamp(22px,2.4vw,30px)}

/* split-flap digits: white tiles in the grey box, a hairline across the middle, flaps fall downward */
.fl{position:relative;display:inline-block;width:.64em;height:1.14em;margin-right:.045em;border-radius:.1em;background:light-dark(#FFFFFF,#16262A);
  box-shadow:0 1px 0 light-dark(rgba(14,32,35,.08),rgba(0,0,0,.4)),inset 0 0 0 1px light-dark(rgba(14,32,35,.06),rgba(230,239,238,.06));perspective:3.2em}
.fl > span{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:light-dark(#FFFFFF,#16262A);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fl-t,.fl-ft{top:0;border-radius:.1em .1em 0 0}
.fl-b,.fl-fb{bottom:0;border-radius:0 0 .1em .1em}
.fl i{position:absolute;left:0;right:0;height:200%;display:flex;align-items:center;justify-content:center;font-style:normal;line-height:1}
.fl-t i,.fl-ft i{top:0}
.fl-b i,.fl-fb i{bottom:0}
.fl-ft{z-index:2;transform-origin:50% 100%}
.fl-fb{z-index:2;transform-origin:50% 0;transform:rotateX(90deg)}
.fl::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:light-dark(rgba(14,32,35,.16),rgba(0,0,0,.55));z-index:3}
.fl.go .fl-ft{animation:fl-top 48ms ease-in forwards}
.fl.go .fl-fb{animation:fl-bot 48ms ease-out 48ms forwards}
@keyframes fl-top{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes fl-bot{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
.fl-sep{display:inline-block;width:.22em;text-align:center}

/* module tiles */
.pr-core{display:flex;flex-direction:column}
.pr-k--line{padding-bottom:12px;border-bottom:1px solid var(--rule2)}
.pr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none;flex:1}
.pr-tile{display:flex;flex-direction:column;justify-content:space-between;gap:14px;height:100%;min-height:96px;padding:14px 16px 15px;border-radius:14px;border:1px solid var(--rule);background:var(--paper);
  text-decoration:none;color:var(--ink);transition:border-color .2s,transform .25s,box-shadow .25s}
.pr-tile:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 14px 30px -20px light-dark(rgba(14,32,35,.45),rgba(0,0,0,.9))}
.pr-tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.pr-tile-top{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--mute)}
.pr-tile-top .v4-mini{width:20px;height:20px}
.pr-tile-top em{margin-left:auto;font-style:normal;color:var(--teal);font-size:13px}
.pr-tile-name{font-size:15.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em;text-wrap:balance}
.pr-core-note{margin:12px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--mute)}

/* ---- add-on modules: dashed tiles that plug in */
.pr-mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin:0;padding:0;list-style:none}
.pr-mods > li{display:flex}
.pr-mod{display:flex;flex-direction:column;gap:10px;width:100%;padding:clamp(20px,2.2vw,28px);border-radius:18px;border:1.5px dashed var(--rule2);background:transparent;color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s,transform .25s}
.pr-mod--link:hover{border-color:var(--teal);background:light-dark(rgba(255,255,255,.6),rgba(255,255,255,.03));transform:translateY(-2px)}
.pr-mod--link:hover h3{color:var(--teal)}
.pr-mod--link:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.pr-mod-top{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--mute)}
.pr-mod-top .v4-mini{width:20px;height:20px}
.pr-mod-top b{margin-left:auto;font-family:Archivo,sans-serif;font-stretch:78%;font-weight:700;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.02em;line-height:1;color:var(--teal);white-space:nowrap}
.pr-mod-top s{margin-right:6px;font-size:.55em;font-weight:600;color:var(--mute)}
.pr-mod h3{margin:10px 0 0;font-stretch:80%;font-weight:700;font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;line-height:1.05}
.pr-mod h3{transition:color .2s}
.pr-mod-text{display:block;margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.pr-mod-more{margin-top:auto;padding-top:10px;display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink)}
.pr-mod-more span{color:var(--teal);transition:transform .2s}
.pr-mod--link:hover .pr-mod-more span{transform:translateX(3px)}
.pr-bundle{border:1.5px solid transparent;background:#1F4F53!important;color:#F2F8F7}
.pr-bundle .pr-mod-top{color:#9FC0C0}
.pr-bundle .pr-mod-top b{color:#9FD3D2}
.pr-bundle .pr-mod-top s{color:#9FC0C0}
.pr-bundle h3{color:#F2F8F7}
.pr-bundle .pr-mod-text{color:#C9DBDB}
.pr-mini-all path{fill:rgba(242,248,247,.18)}
.pr-mini-all path[data-cell="2"],.pr-mini-all path[data-cell="4"],.pr-mini-all path[data-cell="6"]{fill:#9FD3D2}

/* ---- tiers: bars = price per user relative to the entry tier, labels = discount in percent */
.pr-tiers{margin:0}
.pr-tiers ol{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(8px,1.4vw,22px);align-items:end;margin:0;padding:0;list-style:none;height:clamp(200px,21vw,270px)}
.pr-tiers li{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.pr-tiers b{display:block;margin-bottom:10px;font-stretch:78%;font-weight:700;font-size:clamp(17px,2vw,30px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.pr-tiers li.first b{font-family:var(--mono);font-stretch:100%;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.pr-tiers i{display:block;flex:none;height:calc((100% - 86px) * var(--hf));border-radius:10px 10px 3px 3px;background:light-dark(rgba(31,79,83,.12),rgba(134,195,196,.12));overflow:hidden}
.pr-tiers i span{display:block;height:100%;width:100%;background:linear-gradient(180deg,var(--teal),light-dark(#1F4F53,#3E767C));transform:scaleY(0);transform-origin:bottom;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.pr-tiers li:nth-child(2) i span{transition-delay:.05s}.pr-tiers li:nth-child(3) i span{transition-delay:.1s}.pr-tiers li:nth-child(4) i span{transition-delay:.15s}
.pr-tiers li:nth-child(5) i span{transition-delay:.2s}.pr-tiers li:nth-child(6) i span{transition-delay:.25s}.pr-tiers li:nth-child(7) i span{transition-delay:.3s}.pr-tiers li:nth-child(8) i span{transition-delay:.35s}
.pr-tiers.in i span{transform:none}
.pr-tiers li.first i span{background:linear-gradient(180deg,#0E2023,#1F4F53)}
.pr-tiers .pr-users{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule2);font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink2);white-space:nowrap}
.pr-tiers figcaption{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--mute)}
.pr-tiers figcaption span:first-child{text-transform:uppercase;letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){.pr-tiers i span{transform:none;transition:none}}

/* ---- services */
.pr-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);margin:0;padding:0;list-style:none;border-top:1px solid var(--rule2)}
.pr-svc li{padding-top:18px}
.pr-svc p{margin:0}
.pr-val{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:12px 0 10px!important}
.pr-val b{font-stretch:78%;font-weight:700;font-size:clamp(32px,3.2vw,48px);line-height:.95;letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-val span{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.pr-svc-text{font-size:15px;line-height:1.5;color:var(--ink2)}
.pr-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0}
.pr-rows div{padding:10px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--rule)}
.pr-rows dt{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--mute);white-space:nowrap}
.pr-rows dd{margin:4px 0 0;font-weight:600;font-size:15px;white-space:nowrap}

/* ---- final band */
.pr-final-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:center}
.pr-sum{display:grid;margin:0;padding:clamp(20px,2.4vw,30px);border-radius:20px;border:1px solid rgba(242,248,247,.16);background:rgba(255,255,255,.06)}
.pr-sum div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(242,248,247,.12)}
.pr-sum div:first-child{padding-top:0}
.pr-sum div:last-child{border-bottom:0;padding-bottom:0}
.pr-sum dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#9FC0C0}
.pr-sum dd{margin:0;font-stretch:78%;font-weight:700;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;color:#F2F8F7;text-align:right;white-space:nowrap}

@media (max-width:1180px){
  .pr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .pr-grid{grid-template-columns:minmax(0,1fr)}
  .pr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr-final-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .pr-svc{grid-template-columns:minmax(0,1fr)}
  .pr-tiers ol{gap:6px}
  .pr-tiers .pr-users{font-size:11px}
}
@media (max-width:640px){
  .pr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-tile{min-height:88px;padding:12px 13px}
  .pr-tile-name{font-size:14.5px}
  .pr-mods{grid-template-columns:minmax(0,1fr)}
  .pr-tiers ol{grid-template-columns:repeat(4,minmax(0,1fr));height:auto;row-gap:22px}
  .pr-tiers li{height:150px}
  .pr-tiers b{font-size:18px}
  .pr-rows{grid-template-columns:minmax(0,1fr)}
  .pr-sum dd{text-align:left;white-space:normal}
  .pr-sum div{grid-template-columns:minmax(0,1fr);gap:4px}
}