/* ENOK Patterns — Wave 3. Seven marketing surfaces. Zero deps, CSP-safe.
   Standalone: carries its own theme root, and the vars are byte-identical to
   Wave 1 / Wave 2 — one theme skins all three, loading any combination is safe.
   House rules: no gradients, no glow, no invented numbers. Flip
   [data-pat-theme="dark"] on .pat-root for the Studio dark palette. */
.pat-root{
  --pat-bg:#FBF8F1; --pat-panel:#FFFFFF; --pat-line:#E5DECF;
  --pat-ink:#2A2622; --pat-ink2:#7A7266; --pat-accent:#46708C;
  --pat-good:#77754B; --pat-warn:#B4654A; --pat-r:16px;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--pat-ink); line-height:1.5;
}
.pat-root[data-pat-theme="dark"]{
  --pat-bg:#191713; --pat-panel:#221F1A; --pat-line:#3A352C;
  --pat-ink:#F2EDE2; --pat-ink2:#A79D8C; --pat-accent:#7FA6C2; --pat-good:#A9A671; --pat-warn:#C8836B;
}
.pat-card{background:var(--pat-panel);border:1px solid var(--pat-line);border-radius:var(--pat-r);
  padding:24px;box-shadow:0 8px 24px rgba(0,0,0,.06);}
.pat-h{font-size:18px;font-weight:700;margin:0 0 4px;}
.pat-sub{font-size:13px;color:var(--pat-ink2);margin:0 0 16px;}
.pat-btn{font:inherit;font-size:14px;border:1px solid var(--pat-line);background:var(--pat-panel);
  color:var(--pat-ink);border-radius:999px;padding:9px 18px;cursor:pointer;transition:transform .12s,border-color .15s;}
.pat-btn:hover{border-color:var(--pat-accent);}
.pat-btn:active{transform:scale(.97);}
.pat-btn.primary{background:var(--pat-ink);border-color:var(--pat-ink);color:var(--pat-bg);}
.pat-root[data-pat-theme="dark"] .pat-btn.primary{color:#191713;}
.pat-btn[disabled]{opacity:.45;cursor:not-allowed;}
a.pat-btn{display:inline-block;text-decoration:none;}
.pat-eyebrow{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--pat-ink2);margin:0 0 10px;}

/* 13 · Hero — needs no JavaScript at all. Type and one rule do the work. */
.pat-hero{padding:56px 32px 48px;text-align:left;}
.pat-hero .pat-display{font-size:clamp(30px,5.2vw,52px);line-height:1.06;letter-spacing:-.02em;
  font-weight:700;margin:0 0 16px;max-width:16ch;}
.pat-hero .pat-lede{font-size:clamp(15px,1.6vw,18px);color:var(--pat-ink2);margin:0 0 26px;max-width:52ch;}
.pat-hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.pat-hero-note{font-size:12px;color:var(--pat-ink2);margin:16px 0 0;padding-top:16px;
  border-top:1px solid var(--pat-line);max-width:52ch;}
.pat-hero-note b{font-weight:600;color:var(--pat-ink);}

/* 14 · Feature grid */
.pat-features{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.pat-feature{border:1px solid var(--pat-line);border-radius:14px;padding:18px;background:var(--pat-panel);}
.pat-feature .glyph{font-size:18px;color:var(--pat-accent);display:block;margin-bottom:10px;}
.pat-feature h3{margin:0 0 6px;font-size:15px;font-weight:650;}
.pat-feature p{margin:0;font-size:13px;color:var(--pat-ink2);}
/* Reveal-on-scroll is ARMED BY JS — CSS never hides content on its own, so a
   failed or blocked script leaves everything visible instead of blank. */
[data-pat-reveal][data-reveal-armed] > *{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease;}
[data-pat-reveal][data-reveal-armed] > [data-in]{opacity:1;transform:none;}

/* 15 · Testimonial */
.pat-quote{max-width:640px;}
.pat-quote blockquote{margin:0 0 14px;font-size:clamp(16px,2vw,20px);line-height:1.45;
  border-left:2px solid var(--pat-line);padding-left:18px;}
.pat-quote figcaption{display:flex;align-items:center;gap:10px;font-size:13px;}
.pat-avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--pat-line);
  background:var(--pat-bg);display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--pat-ink2);flex:none;}
.pat-cite{color:var(--pat-ink2);}
.pat-cite b{color:var(--pat-ink);font-weight:600;}
.pat-quote[data-unattributed] blockquote{border-left-color:var(--pat-warn);}
.pat-quote[data-unattributed] .pat-cite{color:var(--pat-warn);}
.pat-stars{display:inline-flex;gap:2px;vertical-align:-1px;}
.pat-stars .st{position:relative;color:var(--pat-line);font-size:14px;line-height:1;}
.pat-stars .st i{position:absolute;left:0;top:0;overflow:hidden;width:0;
  font-style:normal;color:var(--pat-accent);}
.pat-stars .st[data-fill="half"] i{width:50%;}
.pat-stars .st[data-fill="full"] i{width:100%;}
.pat-rating-text{font-size:12.5px;color:var(--pat-ink2);margin-left:8px;}
[data-pat-rating][data-unrated] .pat-rating-text{color:var(--pat-warn);}

/* 16 · FAQ accordion */
.pat-faq{max-width:680px;}
.pat-faq-item{border-bottom:1px solid var(--pat-line);}
.pat-faq-item:last-child{border-bottom:0;}
.pat-faq-q{display:flex;align-items:center;gap:12px;width:100%;font:inherit;font-size:15px;
  text-align:left;color:var(--pat-ink);background:transparent;border:0;cursor:pointer;padding:16px 2px;}
.pat-faq-q:hover{color:var(--pat-accent);}
.pat-faq-q .mark{margin-left:auto;flex:none;color:var(--pat-ink2);font-size:13px;
  transition:transform .2s ease;}
.pat-faq-item[data-open] .pat-faq-q .mark{transform:rotate(90deg);}
/* Collapse is a GRID ROW, not display:none — the answer ships in the HTML and
   is never fetched or injected on open. */
.pat-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease;}
.pat-faq-item[data-open] .pat-faq-a{grid-template-rows:1fr;}
.pat-faq-a > .in{overflow:hidden;}
.pat-faq-a p{margin:0 0 16px;font-size:13.5px;color:var(--pat-ink2);max-width:60ch;}

/* 17 · Footer */
.pat-footer{border-top:1px solid var(--pat-line);padding:32px 0 0;}
.pat-foot-cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.pat-foot-col h4{margin:0 0 10px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--pat-ink2);font-weight:600;}
.pat-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.pat-foot-col a{font-size:13.5px;color:var(--pat-ink);text-decoration:none;}
.pat-foot-col a:hover{color:var(--pat-accent);text-decoration:underline;}
.pat-fine{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:26px;
  padding-top:16px;border-top:1px solid var(--pat-line);font-size:12px;color:var(--pat-ink2);}
.pat-fine .sig{margin-left:auto;}

/* 18 · CTA banner */
.pat-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--pat-line);border-radius:var(--pat-r);background:var(--pat-panel);padding:18px 20px;}
.pat-cta .body{flex:1;min-width:200px;}
.pat-cta h3{margin:0 0 3px;font-size:15px;font-weight:650;}
.pat-cta p{margin:0;font-size:13px;color:var(--pat-ink2);}
.pat-cta-close{border:0;background:transparent;color:var(--pat-ink2);font:inherit;font-size:14px;
  cursor:pointer;padding:4px 6px;border-radius:8px;flex:none;}
.pat-cta-close:hover{color:var(--pat-ink);}
.pat-cta[hidden]{display:none;}

/* 19 · Pricing comparison */
.pat-pricing{max-width:820px;}
.pat-cycle{display:inline-flex;gap:4px;border:1px solid var(--pat-line);border-radius:999px;padding:3px;
  margin-bottom:20px;}
.pat-cycle button{font:inherit;font-size:12.5px;border:0;background:transparent;color:var(--pat-ink2);
  border-radius:999px;padding:6px 14px;cursor:pointer;}
.pat-cycle button[aria-pressed="true"]{background:var(--pat-ink);color:var(--pat-bg);}
.pat-root[data-pat-theme="dark"] .pat-cycle button[aria-pressed="true"]{color:#191713;}
.pat-plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.pat-plan{border:1px solid var(--pat-line);border-radius:14px;padding:20px;background:var(--pat-panel);
  display:flex;flex-direction:column;}
.pat-plan[data-featured]{border-color:var(--pat-accent);}
.pat-plan h3{margin:0 0 2px;font-size:14px;font-weight:650;}
.pat-plan .blurb{margin:0 0 14px;font-size:12.5px;color:var(--pat-ink2);min-height:2.6em;}
.pat-price{display:flex;align-items:baseline;gap:4px;}
.pat-amount{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.pat-period{font-size:13px;color:var(--pat-ink2);}
.pat-basis{font-size:11.5px;color:var(--pat-ink2);margin:5px 0 16px;min-height:1.4em;}
.pat-save{display:inline-block;font-size:11px;border:1px solid var(--pat-good);color:var(--pat-good);
  border-radius:999px;padding:1px 9px;margin-top:8px;}
.pat-save[hidden]{display:none;}
/* margin-top:auto lines every plan's CTA up on one baseline, whatever the copy */
.pat-plan .pat-btn{margin-top:auto;width:100%;box-sizing:border-box;text-align:center;}
.pat-compare{width:100%;border-collapse:collapse;font-size:13px;margin-top:26px;}
.pat-compare caption{text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--pat-ink2);padding-bottom:8px;}
.pat-compare th,.pat-compare td{padding:9px 10px;border-bottom:1px solid var(--pat-line);text-align:left;}
.pat-compare thead th{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--pat-ink2);font-weight:600;}
.pat-compare td.mark{text-align:center;width:96px;}
.pat-compare .yes{color:var(--pat-good);}
/* "Not included" is a drawn dash, never an ambiguous blank cell. */
.pat-compare .no{color:var(--pat-ink2);}
.pat-compare tbody tr:last-child th,.pat-compare tbody tr:last-child td{border-bottom:0;}

@media (prefers-reduced-motion: reduce){
  .pat-btn,.pat-faq-a,.pat-faq-q .mark{transition:none;}
  [data-pat-reveal][data-reveal-armed] > *{opacity:1;transform:none;transition:none;}
}