/* Publicators pricing page 2026.
   Everything is scoped under .pp26 so no global stylesheet or shared component is touched.
   Palette, font rules and slider geometry come from the approved spec and are not to be
   re-derived: see publicators-pricing-page-spec.md sections 0, 4 and 11. */

/* Heebo carries only the Hebrew range, so every Latin character falls through to Rubik,
   the site font. Mixed lines need no manual tagging. U+20AA keeps the shekel sign in Heebo. */
@font-face{
  font-family:'HeeboPP';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/heebo-hebrew.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'HeeboPP';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/heebo-hebrew.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'HeeboPP';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/heebo-hebrew.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

.pp26{
  --font:'HeeboPP','Rubik','Segoe UI',Arial,sans-serif;
  --brand:#000000; --brand-2:#CD4C00; --tint:#FFFFFF;
  --wa:#25D366; --wa-tint:#E8F4EE; --wa-ink:#0B5D3B; --wa-on:#08281A;
  --sms:#32ADE6; --sms-tint:#EEF3F9; --sms-ink:#0A5A80; --sms-on:#06344A;
  --ink-2:#4A4A4A; --ink-3:#8A8A8A; --rule:#E5E5E5; --th:16px;

  width:100%; max-width:1180px; margin:0 auto; background:var(--tint);
  /* Direction comes from the dir attribute on .pp26 (rtl on /pricing-heb/, ltr on /pricing/).
     Declaring direction here would override that attribute, so it must not be set. */
  padding:44px 48px; text-align:start;
  font-family:var(--font); color:#000; line-height:1.45;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
/* .pp26 is in the selector on purpose: without it the wrapper stays content-box and the page
   renders 1276px wide instead of the 1180px the image slot and column widths are drawn for. */
.pp26,.pp26 *,.pp26 *::before,.pp26 *::after{box-sizing:border-box}
/* Panels, the unit tag and the form states are toggled with the hidden attribute, so it has to
   win over any display rule the theme puts on a div. */
.pp26 [hidden]{display:none !important}
.pp26 p,.pp26 h1,.pp26 h2,.pp26 ul{margin:0}
.pp26 ul{padding:0}
.pp26 button,.pp26 input{font-family:inherit; font-size:inherit; line-height:inherit}

/* Latin runs stay LTR but keep hugging the start edge of the column, whichever side that is. */
.pp26 .en{direction:ltr; text-align:right}
.pp26[dir=ltr] .en{text-align:left}
.pp26 .mid,.pp26 .en.mid{text-align:center}
.pp26 .pp-vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
             clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.pp26 .ic{width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:2;
          stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ---------------------------------------------------------------- hero */
.pp26 .eyebrow{font-size:12px; letter-spacing:.18em; color:var(--brand-2); margin-bottom:12px; font-weight:600}
.pp26 h1{font-size:42px; font-weight:700; line-height:1.1; margin-bottom:14px; letter-spacing:.01em; color:#000}
.pp26 .sub{font-size:15px; color:var(--ink-2); max-width:52ch; line-height:1.6; margin-inline:auto}

.pp26 .hero{display:grid; grid-template-columns:280px 1fr; gap:34px; margin-bottom:34px}
/* aspect-ratio, never min-height: the slot must not stretch to the height of the copy column,
   otherwise the exported file size stops matching what is rendered. */
.pp26 .imgph{position:relative; overflow:hidden; border-radius:3px; background:#F4F1EF;
             aspect-ratio:3/4; align-self:start}
.pp26 .imgph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.pp26 .hero > .herocopy{align-self:center}

/* ---------------------------------------------------------------- tabs */
.pp26 .tabwrap{position:relative; scroll-margin-top:82px; border-bottom:2px solid var(--rule); margin-bottom:16px}
.pp26 .tabs{display:flex; gap:2px; flex-wrap:wrap}
.pp26 .tab{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; padding:13px 22px;
           border:none; background:none; cursor:pointer; color:var(--ink-3); text-align:start;
           border-radius:3px 3px 0 0; transition:color .2s ease, background-color .2s ease}
.pp26 .tab .ic{font-size:18px}
.pp26 .tab:hover{color:var(--brand); background:#FAF6F3}
.pp26 .tab[aria-selected=true]{color:var(--brand)}
.pp26 .tab:focus-visible{outline:2px solid var(--brand-2); outline-offset:-2px}
/* One moving rule rather than a static underline per tab: the eye follows the travel and
   understands the panel swapped. Width, x offset and row are all set in JS from the active tab.
   top is driven rather than bottom because the tabs wrap to two rows on a phone, and an
   indicator pinned to the bottom of the list would sit under the wrong row. */
.pp26 .tabind{position:absolute; left:0; top:0; height:3px; width:0; background:var(--brand-2);
              border-radius:2px; transition:transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1)}
.pp26 .pitch{font-size:13px; color:var(--ink-2); line-height:1.7; margin-bottom:24px; max-width:84ch;
             border-inline-start:3px solid var(--brand-2); padding-inline-start:14px}

/* ---------------------------------------------------------------- slider control */
.pp26 .ctrl{border:1px solid var(--rule); border-radius:3px; padding:16px 18px 14px}
/* The single hairline sits under the heading row, never above it, so the heading reads as
   belonging to the track it describes. */
.pp26 .ctrl-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
                 padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--rule)}
.pp26 .lbl{font-size:12.5px; letter-spacing:.06em; color:var(--ink-3)}
.pp26 .read{font-size:18px; font-weight:700}

/* Track and thumb are drawn by hand. The native track is near invisible on white and the
   native thumb inherits its surroundings, which leaves a dot floating over nothing. */
.pp26 input[type=range]{-webkit-appearance:none; appearance:none; width:100%; display:block;
  height:var(--th); background:transparent; margin:0; padding:0; cursor:pointer; --p:0; border:none}
.pp26 input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:2px;
  background:linear-gradient(to left, var(--fill) 0%,
    var(--fill) calc(var(--th)/2 + (100% - var(--th))*var(--p)),
    var(--rule)  calc(var(--th)/2 + (100% - var(--th))*var(--p)), var(--rule) 100%)}
.pp26 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:var(--th); height:var(--th); border-radius:50%; background:var(--fill); border:none;
  margin-top:calc((4px - var(--th))/2)}
.pp26 input[type=range]::-moz-range-track{height:4px; border-radius:2px; background:var(--rule)}
.pp26 input[type=range]::-moz-range-progress{height:4px; border-radius:2px; background:var(--fill)}
.pp26 input[type=range]::-moz-range-thumb{width:var(--th); height:var(--th); border:none;
  border-radius:50%; background:var(--fill)}
.pp26 input[type=range]:focus-visible{outline:2px solid var(--brand-2); outline-offset:4px}

/* Absolute positioning by percentage, not space-between: a flexed row spreads labels by their
   own width and none of them ends up under the stop it names. */
.pp26 .ticks{position:relative; height:15px; margin-top:11px; font-size:11px; color:var(--ink-3)}
.pp26 .ticks span{position:absolute; top:0; white-space:nowrap; transform:translateX(50%)}

/* ---------------------------------------------------------------- billing toggle */
.pp26 .billing{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.pp26 .tog{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; padding:6px 12px;
           border:1px solid var(--rule); border-radius:3px; cursor:pointer;
           background:var(--tint) !important; color:var(--brand) !important}
.pp26 .tog[aria-checked=true]{background:var(--brand) !important; color:#fff !important; border-color:var(--brand)}
.pp26 .tog:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}
/* The saving tag lives inside the annual button, not beside the pair, so it can only be read as
   belonging to that option. Solid orange keeps it legible on both the white and black states. */
.pp26 .save{font-size:11px; font-weight:700; background:var(--brand-2); color:#fff;
            padding:2px 8px; border-radius:3px; white-space:nowrap}

/* ---------------------------------------------------------------- plan cards */
/* The CTA sits directly under the price, not at the foot of the card, so the ask is next to
   the number it belongs to. Everything above it has a reserved height (.pdesc, .brk), so the
   three buttons still land on one line even though Pro lists 9 features and Lite lists 15.
   No align-items:start on the grid: the cards stay equal height regardless. */
.pp26 .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0 12px}
.pp26 .card{border:1px solid var(--rule); border-radius:3px; padding:0 18px 18px;
            display:flex; flex-direction:column; background:var(--tint)}
.pp26 .card.feat{border-color:var(--brand-2)}
.pp26 .bar{height:4px; margin:0 -18px 16px; background:var(--brand)}
.pp26 .bar-f{background:var(--brand-2)}
.pp26 .pname{font-size:20px; font-weight:700}
.pp26 .pnamerow{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
/* min-height is exactly two lines (13px x 1.5 x 2), not 38px: with the CTA now sitting in flow
   under the price, a one-line description floored at 38px and a two-line one at 39px put that
   card's button a pixel off the other two. */
.pp26 .pdesc{font-size:13px; color:var(--ink-2); margin:3px 0 14px; min-height:39px; line-height:1.5}
.pp26 .price{font-size:30px; font-weight:700; display:block; white-space:nowrap}
.pp26 .price.quote{font-size:22px}
.pp26 .pnote{font-size:11.5px; color:var(--ink-3); margin-top:3px}
/* Rendered in all three cards even when empty. Drop it from Lite and Standard and the rule above
   their feature list lands a line higher than Pro's, which reads as a layout bug. */
.pp26 .brk{font-size:12.5px; font-weight:600; color:var(--brand-2); margin-top:4px; min-height:19px}
.pp26 .feats{list-style:none; padding:14px 0 0; margin:16px 0 0; border-top:1px solid var(--rule)}
.pp26 .feats li{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.5;
                color:var(--ink-2); margin-bottom:7px}
.pp26 .feats .ic{font-size:14px; margin-top:2px; color:var(--brand-2)}
.pp26 .feats .inh{color:var(--brand); font-weight:700}
.pp26 .feats .xsell{border-top:1px solid var(--rule); padding-top:11px; margin-top:3px}
.pp26 .feats .xsell a{color:var(--brand); font-weight:600; text-decoration:none;
                      display:flex; gap:8px; align-items:flex-start}
.pp26 .feats .xsell a:hover,.pp26 .feats .xsell a:hover .ic{color:var(--brand-2)}
.pp26 .feats .xsell a:focus-visible{outline:2px solid var(--brand-2); outline-offset:3px; border-radius:2px}
.pp26 .feats .xsell .arrow{margin-inline-start:auto; flex:none; font-size:15px; transition:transform .2s ease}
.pp26 .feats .xsell a:hover .arrow{transform:translateX(-3px)}

/* Background and colour are declared, never inherited, and forced past the theme's global
   button rules. A button that only appears on hover is a button that does not exist. */
.pp26 .cta{border:none; border-radius:3px; width:100%; font-size:13.5px; font-weight:700;
           padding:11px; margin-top:16px; cursor:pointer; text-align:center;
           background:var(--brand-2) !important; color:#fff !important}
.pp26 .cta:hover{filter:brightness(.92)}
.pp26 .cta:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.pp26 .cta[disabled]{opacity:.6; cursor:default}
.pp26 .cta-sms{background:var(--sms) !important; color:var(--sms-on) !important}
.pp26 .cta-wa{background:var(--wa) !important; color:var(--wa-on) !important}
.pp26 .tag{font-size:11px; letter-spacing:.08em; font-weight:700; background:var(--brand-2);
           color:#fff; padding:3px 9px; border-radius:3px}
.pp26 .vat{font-size:11.5px; color:var(--ink-3)}

/* ---------------------------------------------------------------- channel cards */
/* Same skeleton in both, and the same one the plan cards use: icon and title, lead line, the
   price, then the CTA directly under it, then the small print.
   Colour is the only difference so moving between tabs does not feel like moving between pages. */
.pp26 .box{border-radius:3px; padding:18px; display:flex; flex-direction:column}
.pp26 .smsbox{background:var(--sms-tint); color:var(--sms-ink)}
.pp26 .smsbox .ctrl{border-color:#CFDDE9}
.pp26 .smsbox .ctrl-head{border-bottom-color:#CFDDE9}
.pp26 .smsbox .lbl,.pp26 .smsbox .ticks{color:var(--sms-ink); opacity:.75}
.pp26 .wabox{background:var(--wa-tint); color:var(--wa-ink)}
.pp26 .chead{display:flex; align-items:center; gap:9px; margin-bottom:3px}
.pp26 .chead .ic{font-size:21px}
.pp26 .cdesc{font-size:13px; margin-bottom:16px; line-height:1.5}
.pp26 .result{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
              flex-wrap:wrap; margin:18px 0 0}
.pp26 .result .price{font-size:28px}
.pp26 .rfor{font-size:13px; font-weight:400}
/* The per-message tag sits at the far end of the row because it is the argument the page makes:
   the unit price falls as the volume rises. */
.pp26 .unit{font-size:12.5px; font-weight:700; background:var(--sms); color:var(--sms-on);
            padding:4px 11px; border-radius:3px; white-space:nowrap}
.pp26 .paylbl{font-size:11.5px; letter-spacing:.08em; opacity:.8; margin-bottom:6px}
.pp26 .row{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
           padding:11px 0; border-bottom:1px solid #CFE3D8; font-size:13px}
.pp26 .amt{font-size:18px; font-weight:700; white-space:nowrap}
.pp26 .rnote{font-size:11.5px}
.pp26 .note{display:flex; gap:8px; align-items:flex-start; margin:16px 0 0; font-size:12px; line-height:1.65}
.pp26 .note .ic{font-size:15px; margin-top:2px}
.pp26 .boxvat{font-size:11.5px; margin-top:14px; opacity:.85}

/* ---------------------------------------------------------------- lead form */
.pp26 .lead{border:2px solid var(--brand-2); border-radius:3px; padding:20px; margin-top:24px; scroll-margin-top:82px}
.pp26 .lead h2{font-size:17px; font-weight:700; margin-bottom:4px; color:#000}
.pp26 .lead .ls{font-size:13px; color:var(--ink-2); margin-bottom:14px}
/* Without this box the customer cannot tell what they are ordering and sales cannot tell what
   to call back about. */
.pp26 .sumbox{background:#FAF6F3; border-radius:3px; padding:12px 14px; margin-bottom:16px;
              display:flex; flex-wrap:wrap; gap:8px 26px}
.pp26 .sumbox div{font-size:12px; color:var(--ink-2)}
.pp26 .sumbox b{font-size:13.5px; color:var(--brand); display:block; margin-top:2px}
.pp26 .fields{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:start}
.pp26 .field{display:flex; flex-direction:column; gap:4px}
.pp26 .fields input[type=text],
.pp26 .fields input[type=email],
.pp26 .fields input[type=tel]{width:100%; padding:9px 11px; border:1px solid var(--rule);
  border-radius:3px; background:#fff !important; color:#000 !important; font-size:13px}
.pp26 .fields input::placeholder{color:var(--ink-3); opacity:1}
.pp26 .fields input:focus-visible{outline:2px solid var(--brand-2); outline-offset:1px}
.pp26 .fields input[aria-invalid=true]{border-color:#B3261E}
.pp26 .err{font-size:11.5px; color:#B3261E; min-height:0}
.pp26 .fields .cta{grid-column:1/-1; margin-top:0}
.pp26 .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.pp26 .ok{font-size:13.5px; font-weight:700; color:var(--wa-ink)}
.pp26 .formerr{font-size:12.5px; color:#B3261E; margin-top:10px; grid-column:1/-1}
.pp26 .formerr a{color:inherit}

.pp26 .noscript{border:1px solid var(--rule); border-radius:3px; padding:14px 16px;
                font-size:13px; color:var(--ink-2); margin-bottom:16px}

/* ---------------------------------------------------------------- responsive */
/* Hero stacks at 1000px because that is where the image slot swaps from the 3:4 portrait crop
   to the 4:3 landscape banner. Cards hold three columns down to 768px. */
@media (max-width:1023px){
  .pp26 .feats li{font-size:11.5px}
}
@media (max-width:1000px){
  .pp26{padding:30px 22px}
  .pp26 .hero{grid-template-columns:1fr; gap:22px}
  /* Spec section 2: on a phone the picture is a full width banner above the heading, so no
     order override here. The image is first in the DOM and stays first when the grid stacks. */
  .pp26 .imgph{aspect-ratio:4/3; align-self:stretch}
  .pp26 h1{font-size:32px}
  .pp26 .tab{padding:10px 12px; font-size:13px}
  .pp26 .fields{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  /* Standard leads on mobile. Mid-list is where the eye rests on desktop and where the
     thumb scrolls past on a phone. */
  .pp26 .cards{grid-template-columns:1fr}
  .pp26 .card.feat{order:-1}
  .pp26 .pdesc{min-height:0}
  .pp26 .feats li{font-size:12.5px}
  .pp26 .fields{grid-template-columns:1fr}
  .pp26 .tabwrap,.pp26 .lead{scroll-margin-top:74px}
  /* 44px touch targets. The track stays 4px and stays centred inside the taller hit area. */
  .pp26 input[type=range]{height:44px}
  .pp26 .tog{min-height:44px; padding:6px 14px}
}
@media (max-width:560px){
  .pp26 h1{font-size:26px}
}

@media (prefers-reduced-motion: reduce){
  .pp26 .tabind,.pp26 .tab,.pp26 .cta,.pp26 .feats .xsell .arrow{transition:none}
}

/* ---------------------------------------------------------------- social row
   Last block inside .pp26, under the lead form. Uses logical properties and a plain flex row,
   so it needs no [dir=ltr] override: the row reverses with the page on its own. */
.pp26 .social{display:flex; align-items:center; flex-wrap:wrap; gap:10px;
              border-top:1px solid var(--rule); margin-top:28px; padding-top:18px}
.pp26 .sociallbl{font-size:12.5px; letter-spacing:.06em; color:var(--ink-3); margin-inline-end:4px}
.pp26 .soclink{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
               color:var(--ink-2); text-decoration:none; border:1px solid var(--rule);
               /* 13px + 16px text + 13px + 2px border = 44px, the touch-target guideline. */
               border-radius:3px; padding:13px 14px; line-height:1.2;
               transition:color .2s ease, border-color .2s ease}
.pp26 .soclink:hover{color:var(--brand-2); border-color:var(--brand-2)}
.pp26 .soclink:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}
/* The sprite is stroke-drawn; brand marks are solid, so they opt out of that. */
.pp26 .ic-brand{fill:currentColor; stroke:none; font-size:16px}

/* ================================================================ English page (LTR)
   Only the handful of rules that carry a physical direction. Everything else above is either
   logical (border-inline-start, margin-inline-start) or direction-neutral, so it needs nothing.
   Scoped to .pp26[dir=ltr], which only the English template sets. */

/* The hand-drawn WebKit track is filled by a gradient that runs from the start edge, so the
   direction of the gradient has to flip with the page. Firefox needs nothing: its native
   ::-moz-range-progress already fills from the start. */
.pp26[dir=ltr] input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(to right, var(--fill) 0%,
    var(--fill) calc(var(--th)/2 + (100% - var(--th))*var(--p)),
    var(--rule)  calc(var(--th)/2 + (100% - var(--th))*var(--p)), var(--rule) 100%);
}

/* Ticks are anchored with `left` in LTR (JS switches the property), so they centre the other way. */
.pp26[dir=ltr] .ticks span{transform:translateX(-50%)}

/* The cross-sell chevron points along the reading direction and nudges the way it points. */
.pp26[dir=ltr] .feats .xsell .arrow{transform:scaleX(-1)}
.pp26[dir=ltr] .feats .xsell a:hover .arrow{transform:scaleX(-1) translateX(-3px)}