/* /pricing only (linked from its head block, after site.css). v14 of the pricing page, approved by Lior on 31 Oct
   (artifact P8Zg5ZiRccW8bpAzQm3dGm), as UI/UX handed it to the site lanes: parts/pricing.css as it is, with the
   handoff's renames (.bill → .pr-bill, .seg → .pr-seg, .pnote → .pr-note, .plans dropped) plus .team → .pr-team
   (a global section padding on this site), the English values only, and the sections.css rules the handoff lists. */
/* The pricing page, Hebrew and English, on the CTO's visual lock "Dusk lift" (31 Oct, Refero: Front as the primary,
   Acuity's straddling cards, Framer's one-line unit and featured glow). v14 (Lior, after v13): four cards in one row,
   so the recommended Guided is neither the last card nor hidden, and Agency is seen without scrolling; ONE width for the
   whole page, 1440, header and footer included, so the H1, the cards, the sections and the chrome share the same edges;
   a centred hero with room to breathe. Logical properties throughout, for RTL and LTR. */
:root{--wrap:1440px;--lav-hi:#c4baff;--hair-2:#cdc8de;--mint-night:#5fe0ad}

/* ── 1 · the hero: solid night, centred, the H1 a step larger with tight leading. Its glows and dot grid fade out before
   its bottom edge, so no line shows where the deck's night takes over ── */
.phero{position:relative;text-align:center;padding-block:clamp(56px,5.6vw,88px) clamp(40px,3.4vw,52px)}
.phero h1{font-size:clamp(40px,5.4vw,80px);letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.phero .sub{margin:24px auto 0;max-width:60ch;font-size:clamp(17px,1.4vw,19.5px);line-height:1.55;color:var(--night-muted);text-wrap:balance}
.night.top::before{-webkit-mask-image:linear-gradient(#000 45%,transparent 100%);mask-image:linear-gradient(#000 45%,transparent 100%)}
.night.top::after{
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 85%),linear-gradient(#000 40%,transparent 92%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 85%),linear-gradient(#000 40%,transparent 92%);
  mask-composite:intersect}

/* ── 2 · the deck. Night down to the line where the cards begin (--line: the toggle row plus the label row), then the
   ramp to paper over --ramp, behind the cards' upper half only, so it shows in the gaps and the side margins. A plain
   sRGB ramp first, for browsers without oklab interpolation or color-mix. ── */
.deck{
  --r1:66px; --r2:56px; --line:calc(var(--r1) + var(--r2)); --ramp:clamp(380px,34vw,480px);
  /* the deck overlaps the hero by a pixel: two antialiased edges at a fractional height would let the paper show.
     overflow-x: Guided's glow reaches past a full-width card on phones; the page must not pan sideways */
  position:relative;isolation:isolate;overflow-x:clip;margin-top:-1px;padding-block:0 clamp(36px,4vw,56px);
  background:linear-gradient(180deg,#0b0917 0,#0b0917 var(--line),#1f1b49 calc(var(--line) + var(--ramp) * .2),#5a4c9d calc(var(--line) + var(--ramp) * .42),#c4baff calc(var(--line) + var(--ramp) * .64),#f2effd calc(var(--line) + var(--ramp) * .84),#f6f4fb calc(var(--line) + var(--ramp)));
  background:linear-gradient(in oklab,#0b0917 0,#0b0917 var(--line),color-mix(in oklab,#0b0917 70%,#5546d6) calc(var(--line) + var(--ramp) * .2),color-mix(in oklab,#8b76f2 65%,#0b0917) calc(var(--line) + var(--ramp) * .42),#c4baff calc(var(--line) + var(--ramp) * .64),#f2effd calc(var(--line) + var(--ramp) * .84),#f6f4fb calc(var(--line) + var(--ramp)));
}
.deck .btn{justify-content:center;white-space:nowrap}

/* four cards in one row; the DOM runs Guided first for phones, and grid-column places the desktop order */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:var(--r1) var(--r2) repeat(7,auto) auto;column-gap:18px}
.pr-bill{grid-row:1;grid-column:1 / span 3;justify-self:center;align-self:start}
.grp.self{grid-row:2;grid-column:1 / span 2}
.grp.pr-team{grid-row:2;grid-column:3}
.grp.ag{grid-row:2;grid-column:4}
.g-growth{grid-column:1} .g-scale{grid-column:2} .g-guided{grid-column:3} .g-agency{grid-column:4}

/* the monthly / annual toggle, on night, centred over the three plans it changes: Growth, Scale and Guided */
.pr-seg{position:relative;display:inline-flex;align-items:center;gap:4px;padding:5px;border:1px solid var(--night-hair);border-radius:999px;background:rgba(255,255,255,.06)}
.pr-seg > button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--night-muted);font-size:15px;font-weight:600;transition:background .2s,color .2s}
.pr-seg > .on{background:#fff;color:var(--night)}
.save{padding:2px 8px;border-radius:999px;background:var(--mint-night);color:var(--night);font-size:12px;font-weight:700}

/* group labels, by who directs the agents: on night above the cards, with a thin bracket over the columns they name */
.grp{align-self:start;display:flex;align-items:center;gap:12px;color:var(--night-muted);font-size:13px;font-weight:700;letter-spacing:.03em}
.grp::after{content:"";flex:1;block-size:9px;margin-top:9px;border-top:1px solid var(--night-hair);border-inline-end:1px solid var(--night-hair);border-start-end-radius:5px}

/* ── the cards: 12px radius against pill buttons, a hairline as an inset ring, a light deck with Guided the only night
   card. Each card is a subgrid of seven rows, so the same part sits at the same height across the row ── */
.card{grid-row:3 / span 7;display:grid;grid-template-rows:subgrid;position:relative;padding:26px 24px 20px;background:var(--card);border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--hair),0 1px 2px rgba(23,21,31,.05),0 16px 40px -28px rgba(33,28,134,.3)}
.card h3{font-size:26px;letter-spacing:-.03em;line-height:1.05}
/* the price, with one unit line under it (Framer) */
.price{display:flex;flex-direction:column;align-items:flex-start;margin-top:14px;color:var(--ink)}
/* the $ and the number sit together in an LTR island, or the $ jumps sides in a Hebrew line */
.price .amt{display:inline-flex;align-items:baseline;gap:3px;direction:ltr;unicode-bidi:isolate}
.price .cur{font-size:26px;font-weight:600;color:var(--mv)}
.price b{font-size:clamp(56px,5.2vw,76px);font-weight:600;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.price .per{margin-top:8px;color:var(--muted);font-size:13.5px;font-weight:500}
.p-yr{display:none}
.yearly .p-mo{display:none}
.yearly .p-yr{display:inline}
.pr-note{margin-top:6px;color:var(--mv);font-size:13px;font-weight:500;line-height:1.45}
.line{position:relative;margin-top:14px;color:var(--muted);font-size:15px;font-weight:500;line-height:1.5}
.nums{list-style:none;padding:0;margin-top:18px;border-top:1px solid var(--hair);font-size:15px}
.nums li{display:flex;justify-content:space-between;gap:14px;padding-block:11px;border-bottom:1px solid var(--hair);color:var(--muted)}
.nums li b{color:var(--ink);font-weight:600;text-align:end;white-space:nowrap}
/* the engines row is stacked in every card: four names do not fit beside the label at this width */
.nums li.stack{flex-direction:column;gap:2px}
.nums li.stack b{text-align:start;white-space:normal}
.nums li.stack .at{align-self:flex-start}
.plus{margin-top:18px}
.plus-k{color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.02em}
.plus ul{list-style:none;padding:0;margin-top:8px;display:grid;gap:7px}
.plus li{position:relative;padding-inline-start:22px;color:var(--ink);font-size:14.5px;font-weight:500;line-height:1.45}
/* the tick does not mirror in RTL, so physical border-left, as on the site */
.plus li::before{content:"";position:absolute;inset-inline-start:2px;top:.42em;inline-size:11px;block-size:6px;border-left:2px solid var(--mint-text);border-bottom:2px solid var(--mint-text);transform:rotate(-45deg)}
/* SUN is the only action colour: every plan's button. On light cards an inset hairline holds the shape on white */
.card .btn{margin-top:22px;align-self:end;background:var(--sun);color:var(--on-sun);border-color:transparent;box-shadow:inset 0 0 0 1px rgba(23,21,31,.14)}
.card .btn:hover{background:#ffe94d}

/* the full list under each card: only what the plan includes; one toggle opens all four */
.full{margin-top:14px}
.full summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;padding-top:14px;border-top:1px solid var(--hair);color:var(--accent);font-size:14.5px;font-weight:600;cursor:pointer}
.full summary::-webkit-details-marker{display:none}
.chev{flex:none;transition:transform .25s var(--ease)}
.full[open] .chev{transform:rotate(180deg)}
.fl{padding-bottom:6px}
.fl-h{margin-top:16px;color:var(--mv);font-size:12px;font-weight:700;letter-spacing:.04em}
.fl ul{list-style:none;padding:0;margin-top:4px}
.fl li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-block:8px;border-bottom:1px solid var(--hair);color:var(--ink);font-size:14px;line-height:1.45}
.mk{flex:none;position:relative;inline-size:14px;block-size:14px;margin-top:.2em}
.mk.y::before{content:"";position:absolute;inset-inline-start:2px;top:2px;inline-size:10px;block-size:5px;border-left:2px solid var(--mint-text);border-bottom:2px solid var(--mint-text);transform:rotate(-45deg)}

/* Guided: the only night card. "Recommended" is a lav-hi band fused to its top (no yellow tag), a 1px lavender ring,
   no drop shadow, no lift; the glow sits behind it, centred on its column, and fades out below the cards' line */
.card.guided{color:var(--night-ink);border-start-start-radius:0;border-start-end-radius:0;box-shadow:inset 0 0 0 1px var(--lav);
  background:radial-gradient(90% 40% at 88% 0%,rgba(85,70,214,.42),transparent 70%),radial-gradient(70% 30% at 0% 100%,rgba(139,118,242,.16),transparent 70%),var(--night)}
.card.guided::before{content:"";position:absolute;z-index:-1;inset-inline:-38%;top:-190px;block-size:470px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(139,118,242,.5),rgba(85,70,214,.18) 55%,transparent);
  -webkit-mask-image:linear-gradient(#000 50%,transparent 82%);mask-image:linear-gradient(#000 50%,transparent 82%)}
.reco{position:absolute;inset-inline:0;bottom:100%;block-size:28px;display:grid;place-items:center;border-radius:12px 12px 0 0;background:var(--lav-hi);color:var(--night);font-size:12px;font-weight:700;letter-spacing:.04em}
.guided h3,.guided .price{color:#fff}
.guided .price .cur,.guided .price .per,.guided .line{color:var(--night-muted)}
.guided .nums,.guided .nums li{border-color:var(--night-hair)}
.guided .nums li{color:var(--night-muted)}
.guided .nums li b,.guided .plus-k,.guided .plus li{color:#fff}
.guided .plus li::before,.guided .mk.y::before{border-color:var(--mint-night)}
.card.guided .btn{box-shadow:none}
.guided .full summary{border-color:var(--night-hair);color:var(--lav-hi)}
.guided .fl-h{color:var(--night-muted)}
.guided .fl li{border-color:var(--night-hair);color:#fff}

/* Agency: "×5" at price scale, read as a multiplier (accent, a smaller ×), on the wash surface, no shadow. Its own note
   line sits in its price block, under the unit, so the four cards keep the same rows */
.card.g-agency{background:var(--wash);box-shadow:inset 0 0 0 1px var(--soft)}
.g-agency .price b{color:var(--accent)}
.g-agency .price .x{font-size:.62em;margin-inline-end:.04em;letter-spacing:0}
.g-agency .price .pr-note{margin-top:4px}

/* ── fine print ── */
.fine{list-style:none;padding:0;margin-top:26px;display:grid;gap:2px;color:var(--mv);font-size:13.5px;font-weight:500;line-height:1.7}

/* ── below 1180 the deck is one column: Guided first, so the hero's night runs into it; then the toggle on paper,
   Growth and Scale, and Agency ── */
@media (max-width:1180px){
  .deck{--line:54px}
  .cards{display:flex;flex-direction:column;max-width:560px;margin-inline:auto}
  .grp.pr-team{block-size:var(--line);align-items:flex-start;padding-top:6px}
  .card{grid-row:auto;display:flex;flex-direction:column}
  .card .btn{align-self:stretch}
  .pr-bill{margin-block:34px 22px;align-self:center}
  .pr-seg{background:#eeedf5;border-color:var(--hair)}
  .pr-seg > button{color:var(--muted)}
  .pr-seg > .on{background:#fff;color:var(--accent);box-shadow:0 2px 10px -4px rgba(33,28,134,.3)}
  .save{background:var(--mint-text);color:#fff}
  .grp.self,.grp.ag{color:var(--mv);margin-bottom:14px}
  .grp.self::after,.grp.ag::after{border-color:var(--hair-2)}
  .grp.ag{margin-top:34px}
  .g-scale{margin-top:18px}
}
@media (max-width:640px){ .card{padding-inline:22px} }
@media (prefers-reduced-motion:reduce){.pr-seg > button,.chev{transition:none}}

/* The sections after the cards (Dusk lift, item 10): "without / with Scayla", the FAQ in two columns, and the way into
   the closing night band. The FAQ accordion, kicker, lede and link rules are the sites' own (mirror.css / site.css). */
.sec{padding-block:clamp(72px,8vw,120px) 0}
.sec h2{font-size:clamp(30px,3.6vw,50px)}

/* ── without / with Scayla: paired columns, the rows are jobs, qualitative only. "With" is a white pane ── */
.vs-head{max-width:820px}
.vs{width:100%;margin-top:clamp(36px,4vw,56px);border-collapse:separate;border-spacing:0;table-layout:fixed}
.vs col.job{width:22%}
.vs th,.vs td{padding:18px 22px;text-align:start;vertical-align:top;font-size:16px;line-height:1.5;border-bottom:1px solid var(--hair)}
.vs thead th{padding-block:16px;border-bottom:1px solid var(--hair);font-size:13.5px;font-weight:700;letter-spacing:.02em}
.vs thead .k-without{color:var(--mv)}
.vs thead .k-with{color:var(--accent)}
.vs tbody th{color:var(--ink);font-weight:600;font-size:16.5px;letter-spacing:-.01em}
.vs td.without{color:var(--muted)}
.vs td.with{color:var(--ink);font-weight:500}
/* the "with" column reads as one white pane: white cells, the hairline ring drawn on its outer edges */
.vs .with{background:var(--card);box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair)}
.vs thead .with{border-start-start-radius:12px;border-start-end-radius:12px;box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair),inset 0 1px 0 var(--hair)}
.vs tbody tr:last-child .with{border-end-start-radius:12px;border-end-end-radius:12px}
.vs tbody tr:last-child th,.vs tbody tr:last-child td.without{border-bottom:0}

/* ── FAQ: a heading row, then the questions in two columns, billing first ── */
.faq-top{display:flex;align-items:end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.faq-top .lede{max-width:52ch}
.faq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,64px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.faq-cols .q{border-top:1px solid var(--ink)}
.faq-cols .q:last-child{border-bottom:1px solid var(--ink)}
.faq-cols .q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer}
.faq-cols .q summary::-webkit-details-marker{display:none}
.faq-cols .q h3{font-size:clamp(18px,1.55vw,21px);letter-spacing:-.025em;line-height:1.25}
.faq-cols .q i{flex:none;inline-size:14px;block-size:14px;position:relative}
.faq-cols .q i::before,.faq-cols .q i::after{content:"";position:absolute;inset:6px 0;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.faq-cols .q i::after{transform:rotate(90deg)}
.faq-cols .q[open] i::after{transform:none}
.faq-cols .q p{color:var(--muted);font-size:16px;line-height:1.6;max-width:62ch;padding-bottom:24px}

/* ── the way out: the deck's ramp reversed, paper into the closing night band ── */
.ramp-up{block-size:280px;margin-top:clamp(64px,7vw,104px);
  background:linear-gradient(180deg,#f6f4fb 0,#f2effd 16%,#c4baff 36%,#5a4c9d 58%,#1f1b49 80%,#0b0917 100%);
  background:linear-gradient(in oklab,#f6f4fb 0,#f2effd 16%,#c4baff 36%,color-mix(in oklab,#8b76f2 65%,#0b0917) 58%,color-mix(in oklab,#0b0917 70%,#5546d6) 80%,#0b0917 100%)}
/* the closing band's own glow and dots start below its top edge, so the ramp meets plain night */
#check{margin-top:-1px}
#check::before{-webkit-mask-image:linear-gradient(transparent,#000 140px);mask-image:linear-gradient(transparent,#000 140px)}

/* ── phones and tablets ── */
@media (max-width:900px){
  .faq-cols{grid-template-columns:minmax(0,1fr)}
  .faq-cols .qs + .qs .q:first-child{border-top:0}
}
@media (max-width:760px){
  /* the table becomes one block per job: the job, then what it takes without and with Scayla */
  .vs,.vs tbody,.vs tr,.vs th,.vs td{display:block;width:auto}
  .vs thead{display:none}
  .vs tbody tr{padding-block:18px;border-bottom:1px solid var(--hair)}
  .vs tbody tr:last-child{border-bottom:0}
  .vs th,.vs td{padding:0;border:0;font-size:15.5px}
  .vs tbody th{font-size:17px;margin-bottom:10px}
  .vs td::before{content:attr(data-k);display:block;margin-bottom:2px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
  .vs td.without::before{color:var(--mv)}
  .vs td.with::before{color:var(--accent)}
  .vs td.with{margin-top:10px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--hair)}
}