/* The four marketing pages. Thirty lines, because .legal in design.css already carries the type
   scale, the 70ch measure, the heading scroll-margin and the bordered table these pages use.
   What is left is three grids and a call to action band.

   Every value is a token from tokens.css. No colour, space or radius is written literally here,
   so the accessibility widget's four palettes reach these pages without knowing they exist. */

/* The document column. body.lp .wrap is 1120 for the homepage that used to live on .wrap; these
   pages carry body.lp for the header and inherited the width with it, so their paragraphs stopped
   at 70ch while the band, the table and the cards ran on to 1120. One column for everything on
   the page: the product's 760 reading column, which is what 70ch was sized for. */
body.lp main.mkp-main{width:min(760px, 100% - 48px)}

.mkp-lede{font-size:1.22rem; line-height:1.65; color:var(--ink-2); max-width:62ch; margin:0 0 2em}

/* One rule for the three card grids on these pages (related links, the day-in-the-life four, and
   anything else that is a row of equal cards). auto-fit rather than a breakpoint: the cards
   reflow at whatever width they stop fitting, which is the width the CONTENT decides and not one
   this file guesses. */
.mkp-grid{display:grid; gap:var(--s3); margin:1.2em 0;
          grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
/* 280 and not 240: on the 760 column 240 gave three across and, with four related pages, an
   orphan under them. 280 gives two by two on the column and one column on a phone. */
.mkp-rel{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit}
.mkp-rel:hover{border-color:var(--border-strong)}
.mkp-rel strong{font-weight:600}

/* The three price plans. Same auto-fit rule, a wider floor: a plan box holds a price and a
   sentence, and below ~260px the amount and its period wrap apart. */
.mkp-plans{display:grid; gap:var(--s3); margin:1.2em 0;
           grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
/* On the 760 column auto-fit gives two plans and an orphan. Three across from 640, where each
   plan still has ~220px, enough for the amount and its period on one line. */
@media (min-width:640px){ .mkp-plans{grid-template-columns:repeat(3, 1fr)} }
.mkp-plan{display:flex; flex-direction:column; gap:8px}
.mkp-plan .btn{margin-top:auto}
.mkp-cap{font-weight:600; margin:0}
/* The amount, and NO dir/unicode-bidi anywhere near it: forcing LTR moves the sheqel sign to the
   right of the digits and prints "₪ 50" (docs/landing/02-copy.md 2). */
.mkp-amount{font-size:2rem; font-weight:600; margin:0; line-height:1.2}

/* The two "when to pick which" columns on /calendly-hebrew. They stack below 640. */
.mkp-two{display:grid; gap:var(--s5); margin:1.2em 0;
         grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.mkp-two h2{margin-top:.6em}

.mkp-steps li{margin:.9em 0}

.mkp-cta{margin:2.4em 0 1em; padding:var(--s5); border-radius:var(--r-lg);
         background:var(--brand-subtle); text-align:center}
.mkp-cta p{margin:.7em 0 0}

/* ---------------------------------------------------------------- the public content header
   These pages carry `body.lp` and landing.css, so `.mk-head`, `.mk-brand`, `.mk-nav` and
   `.mk-btn` are already drawn. Only two things are theirs alone. */

/* The page you are on, marked rather than removed from the nav. A weight change and the ink,
   not a colour swap: the nav is five items at most and a coloured item in it reads as a link
   of a different kind rather than as "you are here". */
.mkp-nav a[aria-current="page"]{color:var(--mk-ink); font-weight:600}

/* body.lp strips the underline from every anchor, which is right for the homepage, where every
   link is a button or a nav item. It is wrong inside a paragraph: an in-context link to another
   page has to look like one, and colour alone is not an accessible affordance. Restored for the
   document column only, and only for links inside running text. */
.mkp p a,.mkp li a,.mkp td a{text-decoration:underline; text-underline-offset:.18em;
  text-decoration-thickness:from-font; color:var(--mk-brand)}
.mkp p a:hover,.mkp li a:hover,.mkp td a:hover{color:var(--mk-brand-hover)}

/* ---------------------------------------------------------------- /working-days
   The free calculator. No new visual system: it is a form and a table inside the .mkp document
   column, using the same tokens as everything else on the public surface. */

.wd-form{display:grid; gap:var(--s4); margin:1.4em 0; padding:var(--s5);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg)}
.wd-form fieldset{border:0; padding:0; margin:0}
.wd-form legend{font-weight:600; padding:0; margin-bottom:6px}
.wd-modes{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s5)}
.wd-modes label{display:inline-flex; align-items:center; gap:8px; cursor:pointer}
/* auto-fit rather than a breakpoint: three date fields sit in a row where they fit and stack
   where they do not, at whatever width the content decides. */
.wd-fields{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
.wd-fields p{margin:0; display:flex; flex-direction:column; gap:5px}
.wd-fields label{font-weight:600}
/* 44px is the phone floor for a tap target, and a date input is the one control on this page a
   person on a phone will actually fight with. */
.wd-fields input{min-height:44px; padding:0 12px; font:inherit; color:var(--ink);
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md)}
.wd-fields input:focus-visible{outline:2px solid var(--brand); outline-offset:1px}

.wd-answer{margin:1.6em 0 1em; padding:var(--s5); border-radius:var(--r-lg);
  background:var(--brand-subtle)}
.wd-number{font-size:1.6rem; font-weight:600; margin:0; line-height:1.3}
.wd-answer p+p{margin-top:.6em}

/* The two states that must not look like the answer. Both carry role="alert" in the markup, so
   the colour is reinforcement and never the only signal. */
.wd-error,.wd-warn{margin:1.2em 0; padding:var(--s4); border-radius:var(--r-md);
  border:1px solid var(--border-strong)}
.wd-error{color:var(--bad); border-color:var(--bad)}
.wd-warn{background:var(--warn-subtle, var(--brand-subtle))}