/* PRICING (Leonardo's website brief v2, 2026-11-02): the plan cards on the home page and the pricing page, the
   monthly/yearly switch and the comparison table. Loaded after v2.css; nothing here changes the rest of V2. */

/* ------------------------------------------------------------- pricing ---- */
.priceTop { padding: calc(var(--bar-h) + 64px) 0 24px; }
.priceTop h1 { font-size: clamp(36px, 4.6vw, 56px); }
.priceTop .lede { color: var(--ink-2); font-size: 19px; max-width: 52ch; margin: 18px auto 10px; }
.pilotLine { margin: 0; }
.pilotLine a { color: var(--blue-7); font-weight: 600; }
.plansWrap { padding: 20px 0 80px; }
.pgroup { margin-top: 56px; }
.pgHead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.pgHead h2 { font-size: clamp(24px, 2.6vw, 32px); }
.pgSub { margin: 6px 0 0; color: var(--dim); }
.billSw { display: inline-flex; background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.billSw button { font: 600 14.5px "Figtree", sans-serif; border: 0; background: transparent; color: var(--ink-2);
                 padding: 9px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.billSw button em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--good); }
.billSw button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.15); }
.billSw button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.pgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pgrid.n1 { grid-template-columns: minmax(0, 420px); }
.homePrice { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); margin-top: 34px; }
@media (max-width: 1080px) { .homePrice { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .homePrice { grid-template-columns: 1fr; } }
.pcard { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 26px; padding: 28px 26px 24px;
         display: flex; flex-direction: column; }
.pcard.hot { border-color: var(--blue); box-shadow: 0 20px 44px rgba(37,99,235,.14); }
.badge { position: absolute; top: -13px; left: 22px; background: var(--blue); color: #fff; font: 700 12.5px/1 var(--head);
         letter-spacing: .02em; padding: 7px 12px 5px; border-radius: 999px; }
.pcard h3 { font-size: 22px; }
.pfor { color: var(--dim); margin: 6px 0 14px; font-size: 15.5px; }
.pprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pprice b { font: 700 clamp(30px, 3vw, 38px)/1.05 var(--head); }
.pprice .per { color: var(--dim); font-weight: 600; }
.pprice .extra { flex-basis: 100%; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.pbill { color: var(--faint); font-size: 14px; margin: 6px 0 14px; }
.pfeat { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--ink-2); }
.pfeat li { display: flex; gap: 9px; }
.pfeat svg { width: 17px; height: 17px; flex: none; color: var(--good); margin-top: 3px; }
.pcard .pill { margin-top: auto; align-self: stretch; }
.allPlans { margin-top: 30px; }

/* the comparison table scrolls inside its own box; the page never scrolls sideways */
.tableBox { margin-top: 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px;
            border: 1px solid var(--line); background: #fff; max-width: 100%; }
.tableBox:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
table.cmp { border-collapse: collapse; min-width: 1160px; width: 100%; font-size: 14.5px; }
.cmp th, .cmp td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { font: 700 15px var(--head); background: var(--wash); }
.cmp .rowH { position: sticky; left: 0; background: #fff; font-weight: 600; color: var(--ink); min-width: 170px;
             box-shadow: 1px 0 0 var(--line); z-index: 1; }
.cmp thead .rowH { background: var(--wash); }
.cmp td.no { color: var(--faint); }
.cmp td.yes { color: var(--good); font-weight: 600; }
.notes { margin: 22px 0 0; padding-left: 20px; color: var(--dim); font-size: 15px; display: grid; gap: 6px; }

/* PLACEHOLDERS (brief v2: "marked TODO in code and visibly flagged on a staging build only") */
[data-todo] { position: relative; }
.staging [data-todo] { outline: 2px dashed #f59e0b; outline-offset: 4px; }
.staging [data-todo]::after { content: "TODO: " attr(data-todo); position: absolute; top: -12px; right: 10px; max-width: 80%;
  background: #f59e0b; color: #111; font: 700 11px/1.2 "Figtree", sans-serif; padding: 4px 7px; border-radius: 6px; }
html:not(.staging) [data-todo-hide] { display: none; }

/* a plain link in the copy */
.textLink { color: var(--blue-7); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero .acts .textLink { margin-left: 4px; }
.pricing h2 { margin-bottom: 8px; }

/* THE COMPARISON USES THE SCREEN (Leonardo, 2026-11-02: "make this fit the width of the screen so more space") */
#compare .wrap { max-width: none; padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px); }

/* THE LANGUAGE SWITCH (Dutch default, English at /en/, 2026-11-02): a quiet two-letter link in the menu */
.bar nav a.lang { font-weight: 600; letter-spacing: .06em; font-size: 13px; padding: 4px 9px; border: 1.5px solid var(--line); border-radius: 999px; }
/* two cards (Kiosk, Enterprise) keep a card's width instead of half the page each */
.pgrid.n2 { grid-template-columns: repeat(auto-fit, minmax(240px, 420px)); }

/* PRICING FIX v2 (2026-11-02): one heading over the two education rows, smaller row titles, notes under the cards */
.pSection { margin-bottom: 30px; }
.pSection h2 { font-size: clamp(26px, 3vw, 36px); }
.pgTitle { font-size: clamp(20px, 2.2vw, 26px); }
.cardNotes { margin: 28px 0 64px; }
.pgrid.n3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* every row on the same three columns on a wide screen, so a two-card row lines up under a three-card one */
@media (min-width: 900px) { .pgrid.n2, .pgrid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* FIVE IN A ROW (2026-11-02): the plans get a wider box than the text, and five equal columns when there is room */
.plansWrap > .wrap { max-width: 1480px; }
@media (min-width: 1180px) { .pgrid.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .pgrid.n5 .pcard { padding: 26px 20px 22px; } }
@media (min-width: 900px) and (max-width: 1179px) { .pgrid.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }