/* ===========================================================================
   lab-pricing.css - primitives shared by all three pricing concepts.
   Structure, accessibility and the neutral skin only. Each concept re-skins
   what it needs in its own file; nothing here is allowed to bake in a look.
   Depends on ../shared.css for every token.
   ========================================================================= */

/* Smooth scroll OFF on pricing, at the founder's request. shared.css sets
   scroll-behavior:smooth globally; this is a local opt-out. There is no Lenis
   on any of these pages either. */
html { scroll-behavior: auto; }

/* ---- accessibility ------------------------------------------------------ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* shared.css paints .btn-green as white on --dw. Measured, that is 4.01:1
   behind 14.5px button text: half a point short of AA, and it is every primary
   CTA on the site, including the one in the header these pages inherit.
   shared.css is out of scope for this lab, so the fix is local and as small as
   it can be: the same hue and chroma, 0.065 darker in oklch L, which measures
   4.9:1. If the founder takes any of these concepts, this belongs in
   shared.css rather than here. */
.btn-green{background:oklch(0.515 0.14 156);border-color:oklch(0.515 0.14 156)}

/* shared.css paints .eyebrow in --dw, which measures 3.84:1 on the cream page
   and fails AA at 11.5px. --dw-deep measures 7.64:1. Same for any other small
   green text in this lab. The dark hero keeps shared.css's white eyebrow. */
.eyebrow{color:var(--dw-deep)}
.eyebrow::before,.eyebrow::after{background:var(--dw-deep)}
.hero.dark-hero .eyebrow{color:#fff}
.hero.dark-hero .eyebrow::before,.hero.dark-hero .eyebrow::after{background:rgba(255,255,255,.85)}

/* --ink-3 measures 2.96:1 on cream and fails AA outright, so no label in this
   lab uses it. --ink-2 is 6.95:1. */

/* ---- section rhythm ----------------------------------------------------- */
.sec-lead{margin-bottom:clamp(26px,3.2vw,40px);display:flex;flex-direction:column;gap:14px}
.sec-lead h2{max-width:20ch}

/* ---- icons -------------------------------------------------------------- */
.ic-yes{width:15px;height:15px;flex:none;color:var(--dw-deep);margin-top:4px}
.ic-no{display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--line-2)}

/* ---- tier cards --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}

.tcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh-sm)}
/* One height for all three heads so the three CTAs sit on a single line.
   Without it the Free card (a big figure plus a sub-label) pushes its button
   30px below the other two and the row reads as an accident. */
.t-head{display:flex;flex-direction:column;gap:4px;min-height:116px}
@media(max-width:900px){.t-head{min-height:0}}
.t-name{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em;color:var(--ink)}
.t-flag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dw-deep);margin-top:2px}
.t-price{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;color:var(--ink);
  font-size:44px;line-height:1.05;margin-top:8px;text-wrap:balance}
/* "Available on request" is a phrase, not a figure, so it steps down and stops
   outshouting the tier name it sits under. */
.tcard:not(#tier-free) .t-price{font-size:23px;letter-spacing:-.02em;line-height:1.2;padding:11px 0 10px}
.t-sub{font-size:16px;color:var(--ink-2);margin-top:4px}
.t-cta{width:100%;margin-top:20px}
.t-fx{list-style:none;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:11px}
.t-fx li{display:flex;gap:10px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.t-fx li.t-carry{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);padding-bottom:2px}

/* ---- comparison matrix -------------------------------------------------- */
.mx-scroll{overflow:visible}
.mx{width:100%;border-collapse:separate;border-spacing:0;text-align:left}
.mx-corner{width:40%;vertical-align:bottom;padding:0 16px 16px 0}
.mx-corner-l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2)}
.mx-th{width:20%;vertical-align:bottom;padding:0 14px 16px;font-weight:400}
.mx-tn{display:block;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.mx-tp{display:block;font-size:15px;color:var(--ink-2);margin:2px 0 12px;min-height:1.4em}
.mx-cta{width:100%}
.mx thead th{background:var(--bg)}
.mx-sticky thead th{position:sticky;top:66px;z-index:6;padding-top:18px;
  box-shadow:0 1px 0 var(--line-2)}
.mx-sec th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);padding:30px 0 10px;font-weight:400;border-bottom:1px solid var(--line-2)}
.mx tbody th[scope=row]{font-weight:400;font-size:16px;line-height:1.45;color:var(--ink);
  padding:13px 24px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
/* position:relative is load-bearing. The "Included" / "Not included" text for
   screen readers is a .sr-only span, i.e. position:absolute. With a static td
   its containing block is the initial one, so it escapes the horizontal
   scroller at phone width and pushes documentElement.scrollWidth past the
   viewport even though it is one clipped pixel. Anchoring it to its own cell
   keeps it inside the scroller. */
.mx tbody td{position:relative;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:center}
.mx tbody td.mx-t{text-align:left}
.mx .ic-yes{margin:2px auto 0;display:block}
.mx-txt{font-size:16px;line-height:1.4;color:var(--ink-2);display:block}
.mx td.is-hi{background:var(--dw-tint-2)}
.mx th.is-hi{background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 100%)}
.mx-sticky th.is-hi{background:var(--bg)}
.mx tbody tr:last-child th,.mx tbody tr:last-child td{border-bottom:0}

@media(max-width:760px){
  /* position:sticky cannot work inside a horizontal scroller, so below this
     width the head stops sticking and the table scrolls sideways in its own
     box. Precedent: shared.css does the same to .dtable at 640px. */
  .mx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--s6) * -1);padding-inline:var(--s6)}
  .mx{min-width:600px}
  .mx-sticky thead th{position:static;box-shadow:none}
  .mx-corner{width:44%}
}

/* ---- FAQ ---------------------------------------------------------------- */
/* <details> so it is keyboard operable and open by default without JS if the
   browser has no support. No motion library, no accordion script. */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-i summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:24px;
  justify-content:space-between;padding:20px 0;font-size:16.5px;line-height:1.45;color:var(--ink);
  font-weight:500}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:hover{color:var(--dw-deep)}
.faq-i summary:focus-visible{outline:3px solid var(--dw-deep);outline-offset:2px;border-radius:6px}
.faq-c{width:18px;height:18px;flex:none;margin-top:3px;color:var(--ink-2);transition:transform .2s}
.faq-i[open] .faq-c{transform:rotate(180deg)}
.faq-a{padding:0 0 22px;max-width:72ch}
.faq-a p{font-size:16px;line-height:1.65;color:var(--ink-2)}

/* ---- closing CTA -------------------------------------------------------- */
/* Content is untouched: "Ready to let your data run itself?" with Book a Demo
   and View on GitHub (Open Source). Only the styling is v6. */
.cta-panel{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,56px);align-items:end}
@media(max-width:900px){.cta-panel{grid-template-columns:1fr;align-items:start;gap:30px}}
.cta-h{font-size:clamp(36px,5.2vw,66px);line-height:1.02;letter-spacing:-.035em;max-width:15ch}
.cta-acts{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta-acts .btn{width:100%;justify-content:center}
@media(max-width:900px){.cta-acts .btn{width:auto;min-width:220px}}
.cta-gh{font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.cta-gh span{color:var(--dw-deep)}
.cta-gh:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cta-gh:focus-visible{outline:3px solid var(--dw-deep);outline-offset:3px;border-radius:4px}

/* ---- focus, everywhere -------------------------------------------------- */
/* shared.css gives .btn a 3px --dw-ring glow at 35% alpha. Every control that
   is a plan CTA gets a solid ring on top of it so the focused control is
   unmistakable, which is what an enterprise buyer keyboarding the page needs. */
.t-cta:focus-visible,.mx-cta:focus-visible,.jz-links .btn:focus-visible{
  outline:3px solid var(--dw-deep);outline-offset:3px;box-shadow:0 0 0 6px var(--dw-ring)}
a:focus-visible{outline:2px solid var(--dw-deep);outline-offset:2px}

/* ---- page shell --------------------------------------------------------- */
main{display:block}
section[class$="-cta"]{padding-bottom:clamp(60px,7vw,110px)}