/* ============================================================
   Pricing page section CSS — the shared block library stylesheet.

   PUBLISHED, NOT PASTED. This file is uploaded to the public bucket as
   pricing-page.css on every publish, and every generated block links it at
   https://storage.googleapis.com/agency-pricing-public/pricing-page.css
   Edit it HERE and publish. Do not paste it into WordPress and do not edit a
   copy inside a page — a page-local copy silently forks the design and stops
   receiving fixes.

   Extracted verbatim (behavior-wise) from wordpress/pricing-test2.html, which
   remains the reference implementation of the design. Rules below are grouped
   and commented; none were restyled.

   Scope: everything is under .tc-pricing, the wrapper class the generated
   blocks put around the whole surface. Nothing here leaks into the theme, and
   theme CSS has to beat two classes to reach in.

   Theming: per-agency values live in the custom-property blocks at the top.
   The --pricing-* properties are read by the cart embed (configurator.js);
   the section rules below still carry literal colors exactly as the reference
   page did — wiring them to the variables is a follow-up for when the Storage
   Agency and Thread & Co. palettes are actually set.
   ============================================================ */

/* ---- theme: shared defaults (Tribal Core) ---------------------------- */
/* --pricing-muted is #5F676D, not the lighter #7A8288 it started as: every
   secondary text style in the embed reads from it, and at #7A8288 ten of them
   failed WCAG AA (3.91:1 on white, 3.53:1 on the tinted section headers).
   #5F676D is the lightest value that clears 4.5:1 in both contexts. Audited
   2026-09-05 after Chris Foley's review; do not lighten without re-measuring. */
/* The --pricing-* set is the embed's contract; keep names and values in sync
   with what configurator.js documents. */
.tc-pricing{
  --pricing-accent:#1C7C8C; --pricing-text:#1F2326; --pricing-border:#D9D9D4;
  --pricing-muted:#5F676D; --pricing-bg:#fff; --pricing-radius:3px;
  --pricing-tile-seo:#1C7C8C; --pricing-tile-ads:#C9972C; --pricing-tile-local:#2F6A36;
  color:#1F2326; font-size:16px; line-height:1.5;
}

/* ---- theme: The Storage Agency -------------------------------------- */
/* PLACEHOLDER — identical to Tribal Core until the TSA palette is set.
   Change values here only; do not fork the rules below. */
.tc-pricing.tc-storage{
  --pricing-accent:#1C7C8C; --pricing-text:#1F2326; --pricing-border:#D9D9D4;
  --pricing-muted:#5F676D; --pricing-bg:#fff; --pricing-radius:3px;
  --pricing-tile-seo:#1C7C8C; --pricing-tile-ads:#C9972C; --pricing-tile-local:#2F6A36;
}

/* ---- theme: Thread & Co. -------------------------------------------- */
/* PLACEHOLDER — identical to Tribal Core until the TCO palette is set. */
.tc-pricing.tc-threadco{
  --pricing-accent:#1C7C8C; --pricing-text:#1F2326; --pricing-border:#D9D9D4;
  --pricing-muted:#5F676D; --pricing-bg:#fff; --pricing-radius:3px;
  --pricing-tile-seo:#1C7C8C; --pricing-tile-ads:#C9972C; --pricing-tile-local:#2F6A36;
}

/* ---- base + section shell ------------------------------------------- */
.tc-pricing *{box-sizing:border-box}
.tc-pricing .tc-sec{padding:56px 24px; border-bottom:1px solid #E4E4DF; max-width:1200px; margin:0 auto}

/* ---- type ------------------------------------------------------------ */
.tc-pricing .tc-eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#5F676D; font-weight:700; margin:0 0 6px}
.tc-pricing h1.tc-h1{font-size:44px; line-height:1.05; letter-spacing:-.02em; margin:10px 0 14px; font-weight:700}
.tc-pricing h2.tc-h2{font-size:26px; letter-spacing:-.01em; margin:8px 0; font-weight:700}

/* ---- hero router: the three path cards ------------------------------- */
.tc-pricing .tc-paths{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:26px}
@media(max-width:760px){.tc-pricing .tc-paths{grid-template-columns:1fr}.tc-pricing h1.tc-h1{font-size:32px}}
.tc-pricing .tc-path{display:flex; flex-direction:column; gap:12px; background:#fff; border:2px solid #1F2326; border-radius:3px; padding:26px; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:box-shadow 120ms ease}
.tc-pricing .tc-path:hover{box-shadow:0 0 0 4px #E1EEF1}
.tc-pricing .tc-path:focus-visible{outline:3px solid #1C7C8C; outline-offset:2px}
.tc-pricing .tc-path.tc-both{background:#F5F8F9}
.tc-pricing .tc-pathq{display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#1C7C8C}
.tc-pricing .tc-pathw{display:block; font-size:30px; line-height:1.1; font-weight:700; letter-spacing:-.01em; margin:2px 0 0}
.tc-pricing .tc-pathline{display:block; font-size:14px; line-height:1.45; color:#4B5257; margin:0}
.tc-pricing .tc-go{display:flex; align-items:flex-start; gap:10px; margin-top:2px}
.tc-pricing .tc-go .tc-arrow{color:#1C7C8C; font-weight:700; line-height:1.25}
.tc-pricing .tc-go .tc-verb{display:block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#1C7C8C}
.tc-pricing .tc-go .tc-obj{display:block; font-size:15px; font-weight:700; color:#1F2326}

/* ---- service-family tiles (same palette the embed uses) -------------- */
.tc-pricing .tc-tiles{display:flex; flex-wrap:wrap; gap:6px}
.tc-pricing .tc-tile{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; padding:6px 10px; border-radius:3px}
.tc-pricing .tc-tile.seo{background:#E1EEF1; color:#155E6B; border:1px solid #B8D8DE}
.tc-pricing .tc-tile.ads{background:#F4EBD3; color:#8A5E10; border:1px solid #E3D2A8}
.tc-pricing .tc-tile.loc{background:#E3EFE3; color:#2F6A36; border:1px solid #C4DCC6}

/* ---- "from $X / month" ------------------------------------------------ */
.tc-pricing .tc-from{font-size:28px; font-weight:700; margin-top:auto}
.tc-pricing .tc-from small{font-size:13px; font-weight:400; color:#5F676D}

/* ---- buttons ---------------------------------------------------------- */
.tc-pricing .tc-btn{display:inline-block; padding:12px 20px; background:#1F2326; color:#fff; font-weight:700; font-size:14px; border-radius:3px; text-align:center; text-decoration:none; border:0; cursor:pointer; font-family:inherit}
.tc-pricing .tc-btn:hover{opacity:.9; color:#fff}
.tc-pricing .tc-btn.tc-ghost{background:transparent; color:#1F2326; border:1.5px solid #1F2326}

/* ---- dark band (Enterprise AIO story) --------------------------------- */
.tc-pricing .tc-band{background:#1F2326; color:#fff; border-bottom:0}
.tc-pricing .tc-band-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center}
@media(max-width:860px){.tc-pricing .tc-band-grid{grid-template-columns:1fr; gap:28px}}
.tc-pricing .tc-band h2{color:#fff; font-size:32px; margin:14px 0 10px; font-weight:700}
.tc-pricing .tc-band p{color:#C9CED2; font-size:16px; max-width:52ch; margin:0}
.tc-pricing .tc-pill{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:3px; background:#fff; color:#1F2326}
.tc-pricing .tc-pill.tc-promo{background:#B23A3A; color:#fff}
.tc-pricing .tc-offer{background:#2A2F33; border:1px solid #3D4347; border-radius:3px; padding:22px}
.tc-pricing .tc-offer .tc-price{font-size:28px; font-weight:700; margin-top:10px}
.tc-pricing .tc-offer .tc-price small{font-size:13px; font-weight:400; color:#9AA1A7}
.tc-pricing .tc-offer p{color:#C9CED2; font-size:14px; margin-top:8px}
.tc-pricing .tc-strike{text-decoration:line-through; color:#8A9096; font-weight:400}

/* ---- included-with-everything grid ------------------------------------ */
.tc-pricing .tc-inc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 24px; font-size:14px; margin-top:14px}
@media(max-width:860px){.tc-pricing .tc-inc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tc-pricing .tc-inc-grid div{padding:8px 0; border-bottom:1px solid #E4E4DF}

/* ---- closing CTA ------------------------------------------------------ */
.tc-pricing .tc-close{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; border-bottom:0}
.tc-pricing .tc-close p{margin:6px 0 0; color:#4B5257}