/* ── Pricing ──────────────────────────────────────────────────────────
 * WHAT THIS PAGE IS NOT. It is not a graphics exercise. The owner asked for a
 * serious page, and the seriousness is structural, not decorative: one accent
 * colour, one typeface, tabular numerals on every price so the three columns
 * align on the decimal, no gradient that is not carrying information, and no
 * shadow deeper than the card it lifts.
 *
 * WHAT IT OBEYS, from the documents rather than from taste:
 *   PRICING-MODEL.md:88   three tracks - free planning, Trip Pass, Trip Pack.
 *   PRICING-MODEL.md:80   every "unlimited" reads FAIR USE with a ceiling.
 *   PRICING-PAGE-RECOMMENDATIONS.md:2  the hero sentence is the competitive
 *                          difference itself - paid once, not every month.
 *   PRICING-PAGE-RECOMMENDATIONS.md:3  kosher is NOT a row in this table. It is
 *                          dietary and religious safety, identical on every
 *                          track, and pricing it would be both wrong and ugly.
 *   BUSINESS-PLAN.md:95   no live purchase button before Grow is connected.
 *
 * Three environments, one design language: the cards are a single column on a
 * phone with the recommended track FIRST, two-up on a tablet, three-up from
 * 901. The comparison table becomes a stack of per-track cards below 700px,
 * because a five-column table on a 390px screen is how a field disappears. */

/* The product's typeface. Without this line the page fell back to the system sans and
 * looked like it came from somewhere else - which is exactly what "serious, not a
 * graphics site" is about. The other standalone pages load the same six font files. */
.pricing{
  font-family:'Noto Sans Hebrew', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  margin:0;
  background:var(--solid);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.6;
}
.pricing-shell{ inline-size:min(1120px, 100% - 32px);margin-inline:auto; }

/* ── hero ─────────────────────────────────────────────────────────── */
.pricing-hero{
  background:var(--solid);
  color:var(--ink);
  padding-block:0 24px;
  text-align:center;
}
.pricing-hero h1{
  font-size:32px;
  line-height:1.3;margin:0 0 12px;font-weight:800;letter-spacing:0;
}
.pricing-hero p{
  margin:0 auto;max-inline-size:68ch;
  color:var(--soft);
  font-size:16px;
}
.pricing-hero .pricing-kicker{
  display:inline-block;margin-block-end:8px;
  font-size:var(--fs-small);font-weight:700;letter-spacing:0;
  color:var(--acc2);
}

/* ── the three tracks ─────────────────────────────────────────────── */
.pricing-tracks{
  display:grid;gap:16px;
  margin-block:0;
  position:relative;z-index:1;
  grid-template-columns:1fr;
}
@media (min-width: 701px){ .pricing-tracks{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 901px){ .pricing-tracks{ grid-template-columns:repeat(3, 1fr); } }

.pricing-track{
  display:flex;flex-direction:column;gap:8px;position:relative;
  background:var(--solid);
  border:1px solid var(--line);
  border-radius:8px;
  padding:20px;
  min-inline-size:0;
}
/* The recommended track is first on a phone - the owner reads the page on one -
   and the middle column on a desktop, where the eye lands centre. */
.pricing-track[data-recommended]{ order:-1;border-color:var(--acc);border-width:2px;padding:19px; }
@media (min-width: 901px){ .pricing-track[data-recommended]{ order:0; } }

.pricing-track h2{ font-size:var(--fs-h2);margin:0;font-weight:800; }
.pricing-badge{
  align-self:center;
  position:absolute;inset-block-start:-15px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--acc2);color:var(--solid);
  border-radius:999px;padding:4px 10px;
  font-size:var(--fs-small);font-weight:800;
}
.pricing-amount{
  display:flex;align-items:baseline;gap:6px;
  font-variant-numeric:tabular-nums;
}
.pricing-amount b{ font-size:36px;line-height:1.15;font-weight:800;letter-spacing:0; }
.pricing-amount span{ color:var(--soft);font-size:var(--fs-small); }
.pricing-amount s{ color:var(--faint);text-decoration-thickness:1px; }
/* The difference between the two paid tracks is the price PER TRIP, and it was a
 * footnote beside the total - which is why the two columns read as the same column with
 * a different number. It is now a line of its own, and it is the line a reader compares. */
.pricing-per-trip{
  margin:0;padding-block:6px;
  border-block:1px solid var(--line2);
  color:var(--soft);font-size:var(--fs-small);font-variant-numeric:tabular-nums;
}
.pricing-per-trip b{ color:var(--ink);font-size:var(--fs-h2);font-weight:800;letter-spacing:0; }
.pricing-track > p{ margin:0;color:var(--soft); }
.pricing-track > p:not(.pricing-per-trip){ min-block-size:3em; }
.pricing-features{ list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px; }
.pricing-features li{ display:block;position:relative;padding-inline-start:26px; }
.pricing-features li::before{ content:"";inline-size:18px;block-size:18px;border-radius:50%;
  background:var(--fill-state-soft);
  box-shadow:inset 0 0 0 1.5px var(--acc);position:absolute;inset-inline-start:0;inset-block-start:3px; }
.pricing-track .pricing-cta{ margin-block-start:auto;padding-block-start:8px; }

/* No purchase exists yet, so no button pretends to be one. A disabled control
   that says why is honest; a live-looking button that does nothing is not. */
.pricing-cta button[disabled]{
  inline-size:100%;min-block-size:46px;padding:10px 16px;border-radius:6px;box-sizing:border-box;
  border:1px solid var(--line);background:var(--page);color:var(--soft);
  font-family:inherit;line-height:inherit;font-weight:700;font-size:var(--fs-body);cursor:not-allowed;
}
.pricing-cta .pricing-cta-note{ display:block;margin-block-start:8px;color:var(--faint);font-size:var(--fs-small); }
.pricing-cta a.pricing-start{
  display:block;text-align:center;padding:12px 16px;border-radius:6px;
  background:var(--fill-on);color:#fff;font-weight:800;text-decoration:none;
}
.pricing-cta a.pricing-start:hover{ background:var(--acc2); }
.pricing-cta a.pricing-start:focus-visible{ outline:2px solid var(--focus);outline-offset:2px; }

/* ── comparison ───────────────────────────────────────────────────── */
.pricing-compare{ margin-block:40px; }
.pricing-compare h2{ font-size:var(--fs-h1);margin:0 0 4px;font-weight:800; }
.pricing-compare > p{ margin:0 0 20px;color:var(--soft);max-inline-size:60ch; }
.pricing-matrix{ inline-size:100%;border-collapse:collapse;text-align:start; }
.pricing-matrix caption{ text-align:start;color:var(--faint);font-size:var(--fs-small);padding-block-end:8px; }
.pricing-matrix th,.pricing-matrix td{ padding:12px 10px;border-block-end:1px solid var(--line2);vertical-align:top; }
.pricing-matrix thead th{ border-block-end:1px solid var(--line);font-weight:800; }
.pricing-matrix tbody th{ font-weight:600;color:var(--ink); }
.pricing-matrix td{ color:var(--soft); }
.pricing-matrix [data-has="yes"]{ color:var(--acc2);font-weight:800; }
.pricing-matrix [data-has="no"]{ color:var(--faint); }

/* A five-column table at 390px is how a column disappears. Below the tablet
   threshold the same data is read row by row, with the track named in the cell
   itself rather than in a header the reader has scrolled away from. */
@media (max-width: 700px){
  .pricing-matrix thead{ position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%); }
  .pricing-matrix tr{ display:block;border:1px solid var(--line);border-radius:12px;padding:12px;margin-block-end:12px; }
  .pricing-matrix tbody th{ display:block;padding:0 0 8px;border:0;font-weight:800; }
  .pricing-matrix td{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;padding:6px 0;border:0;overflow-wrap:anywhere; }
  .pricing-matrix td::before{ content:attr(data-track);color:var(--faint);font-size:var(--fs-small); }
}

/* ── questions ────────────────────────────────────────────────────── */
.pricing-faq{ margin-block-end:40px; }
.pricing-faq h2{ font-size:var(--fs-h1);margin:0 0 16px;font-weight:800; }
.pricing-faq details{ border-block-end:1px solid var(--line2);padding-block:0; }
.pricing-faq summary{ cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:52px; }
.pricing-faq summary::-webkit-details-marker{ display:none; }
.pricing-faq summary::after{ content:"+";color:var(--acc);font-weight:800; }
.pricing-faq details[open] summary::after{ content:"\2013"; }
.pricing-faq p{ margin:0 0 16px;color:var(--soft);max-inline-size:70ch; }

.pricing-note{
  border-inline-start:3px solid var(--acc);
  background:var(--fill-state-soft);
  padding:16px;border-radius:0;
  margin-block-end:40px;
  color:var(--acc2);
}
.pricing-note b{ display:block;margin-block-end:4px; }

/* ── the bar, and the way back ────────────────────────────────────────
 * A pricing page with no brand and no way back to the site reads as a page from
 * somewhere else, whatever the cards look like. Logo hard to the right, the way
 * back hard to the left. The approved pricing concept uses a light header;
 * theme-specific brand assets preserve the mark on dark surfaces. */
.pricing-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-block-size:64px;margin-block-end:16px;
  border-block-end:1px solid var(--line);
}
.pricing-brand{ display:inline-flex;align-items:center;min-block-size:44px; }
.pricing-brand img{ block-size:28px;inline-size:auto;display:block; }
.pricing-brand .pricing-logo-dark{ display:none; }
:root:is([data-theme="dark"], [data-theme="contrast"]) .pricing-logo-light{ display:none; }
:root:is([data-theme="dark"], [data-theme="contrast"]) .pricing-logo-dark{ display:block; }
:root[data-theme="dark"] .pricing-start{ color:var(--page); }
:root[data-theme="contrast"] .pricing-start{ color:var(--ink); }
:root:is([data-theme="dark"], [data-theme="contrast"]) .pricing-start:hover{ color:var(--solid); }
.pricing-back{
  color:var(--acc2);text-decoration:none;font-weight:700;
  font-size:var(--fs-small);padding:10px 12px;border-radius:10px;
  min-block-size:44px;box-sizing:border-box;display:inline-flex;align-items:center;
}
.pricing-back:hover{ color:var(--ink);text-decoration:underline; }
.pricing-back:focus-visible{ outline:2px solid var(--acc-hi);outline-offset:2px; }

.pricing-footer{
  border-block-start:1px solid var(--line);
  padding-block:24px 48px;color:var(--faint);font-size:var(--fs-small);
}
.pricing-footer p{ margin:0 0 6px; }
.pricing-footer a{ color:var(--acc2);text-decoration:none;display:inline-flex;align-items:center;min-block-size:44px;min-inline-size:44px; }
.pricing-footer a:hover{ text-decoration:underline; }

.pricing :is(a, summary):focus-visible{ outline:2px solid var(--focus);outline-offset:3px; }
.pricing-track > :is(h2, .pricing-amount, .pricing-per-trip){ text-align:center;justify-content:center; }
.pricing-amount{ flex-wrap:wrap; }
@media (min-width:901px){
  .pricing-cta-note{ min-block-size:4.8em; }
}
@media (max-width:700px){
  .pricing-hero h1{ font-size:26px; }
  .pricing-hero p{ font-size:15px; }
  .pricing-hero{ padding-block-end:24px; }
  .pricing-bar{ margin-block-end:20px; }
  .pricing-compare{ margin-block:32px; }
}
@media (prefers-reduced-motion:no-preference){
  .pricing a{ transition:color 160ms, background-color 160ms; }
}

/* Approved compact pricing layout; the early action has one responsive DOM owner. */
.pricing .pricing-bar{min-height:64px;margin-bottom:12px;padding:0;gap:12px}
.pricing .pricing-hero{padding-bottom:20px}
.pricing .pricing-hero h1{margin-bottom:8px}
.pricing .pricing-hero p{max-width:66ch;line-height:1.6}
.pricing .pricing-kicker{display:none}
.pricing-early-start{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.pricing-early-start a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:6px;background:var(--fill-on);color:#fff;font-weight:700;text-decoration:none}
.pricing-early-start a:hover{background:var(--acc2)}
.pricing-early-start span{font-size:var(--fs-small);color:var(--soft)}
.pricing .pricing-track{padding:16px;gap:7px}
.pricing .pricing-track[data-recommended]{
  padding:15px;border-color:transparent;
  background:linear-gradient(var(--solid),var(--solid)) padding-box,
    linear-gradient(135deg,var(--go),color-mix(in srgb,var(--go) 25%,white) 28%,var(--go) 52%,color-mix(in srgb,var(--go) 55%,white) 76%,var(--go)) border-box;
}
.pricing .pricing-features{gap:5px}
.pricing .pricing-features li::before{display:none}
.pricing-check{position:absolute;inset-inline-start:0;top:3px;width:18px;height:18px;fill:none;stroke:var(--acc2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pricing-compare>summary{cursor:pointer;min-height:52px;padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;border-block:1px solid var(--line)}
.pricing-compare>summary::-webkit-details-marker{display:none}
.pricing-compare>summary::after{content:'+';font-size:22px;color:var(--acc2)}
.pricing-compare[open]>summary::after{content:'\2212'}
.pricing-compare>summary h2{font-size:22px;margin:0}
.pricing-compare>summary span{font-size:var(--fs-small);color:var(--soft);line-height:1.6}
.pricing-compare>p{margin-top:16px}
.pricing :is(a,summary):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:root[data-theme="contrast"] .pricing .pricing-track[data-recommended]{background:var(--solid);border-color:var(--go)}
:root[data-theme="contrast"] .pricing-early-start a{border:1px solid var(--ink)}
@media(min-width:901px){
  .pricing .pricing-bar .pricing-early-start{margin:0;gap:10px}
  .pricing .pricing-hero{padding-bottom:12px}
}
@media(max-width:700px){
  .pricing .pricing-bar{min-height:60px;margin-bottom:8px}
  .pricing .pricing-brand img{height:24px}
  .pricing .pricing-back{padding-inline:4px;font-size:12px}
  .pricing .pricing-hero h1{line-height:1.35}
  .pricing-early-start{gap:8px;flex-wrap:wrap;margin-top:10px}
  .pricing-compare>summary{display:grid;grid-template-columns:1fr 24px;gap:6px}
  .pricing-compare>summary h2{font-size:20px}
  .pricing-compare>summary span{grid-column:1;grid-row:2}
  .pricing-compare>summary::after{grid-column:2;grid-row:1/3}
}
@media(forced-colors:active){
  .pricing .pricing-track[data-recommended]{background:Canvas;border-color:Highlight}
}

/* The ring covers the existing perimeter; the badge paints above it. */
.pricing .pricing-track::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;z-index:1;
  pointer-events:none;opacity:0;background:var(--go);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.pricing .pricing-track[data-recommended]::after{inset:-2px}
.pricing .pricing-track>.pricing-badge{z-index:2}
.pricing .pricing-track:focus-within::after{opacity:1}
@media(hover:hover) and (pointer:fine){
  .pricing .pricing-track:hover::after{opacity:1}
}
@property --pricing-border-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pricing .pricing-track:hover::after{
    animation:pricing-border-sweep 600ms linear 1;
  }
}
@keyframes pricing-border-sweep{
  0%{
    --pricing-border-angle:0deg;
    background-image:conic-gradient(from var(--pricing-border-angle),var(--go) 0deg 225deg,var(--acc-hi) 260deg,cyan 290deg,white 315deg,var(--acc) 340deg,var(--go) 360deg);
  }
  99%{
    --pricing-border-angle:360deg;
    background-image:conic-gradient(from var(--pricing-border-angle),var(--go) 0deg 225deg,var(--acc-hi) 260deg,cyan 290deg,white 315deg,var(--acc) 340deg,var(--go) 360deg);
  }
  100%{--pricing-border-angle:360deg;background-image:none}
}
:root[data-theme="contrast"] .pricing .pricing-track::after{
  background:none;animation:none;-webkit-mask:none;mask:none;
  padding:0;border:2px solid var(--go);
}
@media(forced-colors:active){
  .pricing .pricing-track::after{
    background:none!important;animation:none!important;-webkit-mask:none;mask:none;
    padding:0;border:2px solid Highlight;
  }
}