/* Article-page redesign shared by Use cases and How it works (2026-09-26), matching the Pricing page
   (pricing-refresh.css) and the homepage hero. Loaded after each page's generated CSS (build_wp.py).
   Markup additions (title accents, removed dead "script" links) come from inc/pricing.php. */

/* ---------- canvas + centred hero ---------- */
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works){position:relative;isolation:isolate}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works)::before{content:"";position:absolute;left:0;right:0;top:0;height:760px;z-index:-1;pointer-events:none;
  background:radial-gradient(700px 360px at 50% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),
             radial-gradient(520px 300px at 18% 20%,color-mix(in srgb,#22d3ee 11%,transparent),transparent 70%)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works)::after{content:"";position:absolute;left:0;right:0;top:0;height:640px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--text) 8%,transparent) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(760px 380px at 50% 10%,#000 25%,transparent 75%);mask-image:radial-gradient(760px 380px at 50% 10%,#000 25%,transparent 75%)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .hero{padding:44px 0 8px;text-align:center}
.cwc-page-use-cases .hero::before{content:"Use cases"}
.cwc-page-use-cases .hero::before,.cwc-page-how-it-works .hero-sub{display:inline-block;margin:0 0 18px;padding:5px 14px;border:1px solid var(--border);border-radius:999px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) h1{font-size:clamp(40px,5.2vw,66px);line-height:1.02;letter-spacing:-.045em;margin:0 auto 20px;max-width:980px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) h1 .hl{background:linear-gradient(100deg,#2563eb 5%,#22d3ee 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .lede{max-width:760px;margin:0 auto;font-size:18.5px;line-height:1.65}

/* jump links: centred pills */
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .jump{justify-content:center;gap:10px;margin-top:30px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .jump a{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 90%,transparent);font-size:14.5px;font-weight:600;color:var(--text);box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .15s,transform .15s,box-shadow .15s}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .jump a:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transform:translateY(-1px);box-shadow:0 12px 24px -16px rgba(37,99,235,.5)}
.cwc-page-use-cases .jump i{width:9px;height:9px;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 0%,transparent)}

/* How it works: the install box becomes the same elevated card as the homepage */
.cwc-page-how-it-works .install{max-width:540px;margin:30px auto 0;padding:6px;border:1px solid var(--border);border-radius:18px;background:var(--surface);text-align:left;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 40px -24px rgba(15,23,42,.25)}
.cwc-page-how-it-works .tabs{margin-bottom:6px;border:0;border-radius:12px}
.cwc-page-how-it-works .tab{padding:7px 0;border-radius:9px}
.cwc-page-how-it-works .tab[aria-selected="true"]{box-shadow:0 1px 2px rgba(15,23,42,.08),0 0 0 1px var(--border)}
.cwc-page-how-it-works .cmdbox{border:0;border-radius:12px;background:#0b1120;font-size:15px}
.cwc-page-how-it-works .cmdbox button{padding:7px 12px;border-radius:8px}

/* ---------- article: centred reading column with a quiet sidebar ---------- */
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .article{grid-template-columns:230px minmax(0,840px);justify-content:center;gap:80px;margin-top:80px;padding-top:0;border-top:0}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .prose{max-width:840px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .prose section{padding-bottom:72px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .prose h2{font-size:clamp(28px,3.2vw,38px);letter-spacing:-.032em;margin-bottom:16px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .prose section > p{font-size:16.5px;line-height:1.75}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .toc{top:104px;padding:20px 20px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .toc ol{border-left:0;display:flex;flex-direction:column;gap:2px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .toc a{padding:8px 12px;margin:0;border-left:0;border-radius:9px;font-size:14px;transition:background .15s,color .15s}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .toc a:hover{background:var(--surface-2)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .toc a.active{background:var(--accent-soft);color:var(--accent)}

/* status labels: "Reads only" / "Changes resources" as pills */
.cwc-page-use-cases .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;margin-bottom:14px;font-size:11.5px}
.cwc-page-use-cases .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.cwc-page-use-cases .eyebrow.read{background:color-mix(in srgb,var(--good) 12%,transparent)}
.cwc-page-use-cases .eyebrow.write{background:color-mix(in srgb,var(--bad) 11%,transparent)}

/* example questions: a terminal-style prompt panel */
.cwc-page-use-cases .asks{gap:0;margin:22px 0 22px!important;padding:8px!important;border-radius:18px;background:#0b1120;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 30px 60px -40px rgba(2,6,23,.7)}
.cwc-page-use-cases .asks li{padding:13px 16px 13px 44px;border:0;border-radius:11px;background:transparent;color:#e2e8f0;font-size:14px;line-height:1.55;transition:background .15s}
.cwc-page-use-cases .asks li + li{box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.cwc-page-use-cases .asks li:hover{background:rgba(255,255,255,.04)}
.cwc-page-use-cases .asks li::before{left:18px;top:12px;color:#67e8f9;font-size:16px}
.cwc-page-use-cases .asks .src{display:inline-block;margin:6px 0 0;padding:2px 8px;border-radius:999px;background:rgba(103,232,249,.12);color:#67e8f9;font-size:11.5px;font-weight:600}

/* "How it works" numbered flow: gradient step numbers on elevated rows */
.cwc-page-how-it-works .ol-snippet li{padding:16px 18px 16px 60px;margin-bottom:10px;border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cwc-page-how-it-works .ol-snippet li::before{left:16px;top:15px;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#22d3ee,#2563eb);color:#fff;box-shadow:0 6px 14px -6px #2563eb}
/* first-run setup questions: a 2 x 2 card grid (each dt/dd pair is wrapped in a div by inc/pricing.php) */
.cwc-page-how-it-works dl.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}
.cwc-page-how-it-works dl.qa > div{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cwc-page-how-it-works dl.qa dt{margin:0 0 6px;font-size:16px}
.cwc-page-how-it-works dl.qa dd{margin:0;font-size:15px;line-height:1.6}

/* tables */
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .tbl-wrap{margin:24px 0 20px;border-radius:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -36px rgba(15,23,42,.3)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .tbl{font-size:15px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .tbl th,.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .tbl td{padding:15px 18px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .tbl thead th{color:var(--text);background:var(--surface-2)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .tbl tbody tr:hover th,.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .tbl tbody tr:hover td{background-color:color-mix(in srgb,var(--accent) 4%,transparent)}

/* "When to use something else": 2 x 2 cards */
.cwc-page-use-cases #not-for ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0;margin-top:22px;list-style:none}
.cwc-page-use-cases #not-for li{margin:0;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);font-size:15px;line-height:1.6}
.cwc-page-use-cases #not-for li strong{display:block;margin-bottom:6px;font-size:16px}

/* figures */
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) figure{margin:28px 0 8px}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) figure img{border-radius:18px;box-shadow:0 30px 60px -36px rgba(15,23,42,.45)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) figcaption{margin-top:12px;font-size:13.5px}

/* callouts: warning card with an icon tile (red on Use cases = changes, amber on How it works = limits) */
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .callout{position:relative;border:1px solid color-mix(in srgb,var(--c) 28%,transparent);border-radius:16px;
  background:color-mix(in srgb,var(--c) 7%,var(--surface));padding:20px 22px 20px 64px}
.cwc-page-use-cases .callout{--c:var(--bad)}
.cwc-page-how-it-works .callout{--c:var(--warn)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .callout::before{content:"!";position:absolute;left:20px;top:19px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--c);color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 14px -6px var(--c)}

/* FAQ */
.cwc-page-use-cases .qa{gap:10px;margin-top:20px}
.cwc-page-use-cases .qa details{border-radius:14px}

/* closing banner */
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .cli{position:relative;overflow:hidden;padding:40px;border-radius:24px;background:#0b1120;border:1px solid rgba(255,255,255,.06);box-shadow:0 40px 80px -48px rgba(37,99,235,.6)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .cli::before{content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:420px;pointer-events:none;background:radial-gradient(closest-side,rgba(37,99,235,.35),transparent)}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .cli > *{position:relative}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .cli h2{font-size:clamp(24px,2.6vw,30px)!important;letter-spacing:-.03em}
.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .cli .cmd{padding:14px 16px;font-size:15px;border-radius:12px}

/* ---------- responsive ---------- */
@media (max-width:1100px){.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .article{grid-template-columns:200px minmax(0,1fr);gap:48px}}
@media (max-width:900px){.cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .article{grid-template-columns:minmax(0,1fr);margin-top:56px}}
@media (max-width:640px){
  .cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .hero{padding:28px 0 4px}
  .cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .lede{font-size:17px}
  .cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .jump a{height:38px;padding:0 14px;font-size:13.5px}
  .cwc-page-use-cases #not-for ul,.cwc-page-how-it-works dl.qa{grid-template-columns:minmax(0,1fr)}
  .cwc-page-use-cases .asks li{padding-left:38px;font-size:13px}
  .cwc-page-use-cases .asks li::before{left:14px}
  .cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .cli{padding:26px}
  .cwc-page:is(.cwc-page-use-cases,.cwc-page-how-it-works) .prose section{padding-bottom:56px}
}