/*
Theme Name: ChatRx Blocks
Description: Block theme for chatrx.md. Replaces The7. Design tokens live in theme.json; this file carries component styles only.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: chatrx
*/

/* Aliases onto the theme.json palette. theme.json stays the single source of
   truth for values; these keep the component rules below readable. */
:root{
	--teal:var(--wp--preset--color--crx-teal);
	--teal-deep:var(--wp--preset--color--crx-teal-deep);
	--navy:var(--wp--preset--color--crx-navy);
	--navy-deep:var(--wp--preset--color--crx-navy-deep);
	--aqua:var(--wp--preset--color--crx-aqua);
	--orange:var(--wp--preset--color--crx-orange);
	--blue:var(--wp--preset--color--crx-blue);
	--slate:var(--wp--preset--color--crx-slate);
	--mist:var(--wp--preset--color--crx-mist);

	--text-muted:#6C7C90;
	--text-on-dark:#C2D6E4;
	--rule:#DCE7EA;
	--rule-strong:#BFD3D8;
	--rule-dark:rgba(174,214,226,.22);
	--wrap:var(--wp--style--global--wide-size);
}

*{box-sizing:border-box}
body{-webkit-font-smoothing:antialiased}
/* Heading sizes are declared here, not via theme.json styles.elements, which
   did not apply on the first real render (colour and the aqua <em> landed,
   font-size did not). Explicit clamps are deterministic; theme.json still
   carries the same steps so the editor size picker matches. */
h1,h1.wp-block-heading{font-size:clamp(38px,6.8vw,72px);font-weight:700;letter-spacing:-.035em;line-height:1.08}
h2,h2.wp-block-heading{font-size:clamp(27px,4.2vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
h3,h3.wp-block-heading{font-size:clamp(19px,2.3vw,23px);font-weight:600;letter-spacing:-.015em;line-height:1.15}
h4,h4.wp-block-heading{font-size:19.5px;font-weight:600;line-height:1.2}
h1,h2,h3,h4{text-wrap:balance;margin:0;color:var(--navy)}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:5px}

.crx-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.crx-narrow{max-width:var(--wp--style--global--content-size)}
.crx-section{padding-block:var(--wp--preset--spacing--90)}
.crx-alt{background:var(--mist)}
.crx-dark{background:var(--navy)}
.crx-dark h1,.crx-dark h2,.crx-dark h3,.crx-dark h4{color:#fff}

.crx-kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:15px;display:flex;align-items:center;gap:10px}
.crx-kicker::before{content:'';width:24px;height:3px;border-radius:2px;background:var(--orange);flex:0 0 auto}
.crx-dark .crx-kicker{color:var(--aqua)}

/* ---- CTA. Navy on orange, 5.43:1. Never wraps: a pill that breaks to two
   lines strands the arrow against a slab of orange. */
.wp-block-button.is-style-crx-cta .wp-block-button__link,
.crx-cta{
	display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
	background:var(--orange);color:var(--navy);
	font-weight:600;font-size:clamp(15px,3.4vw,18px);text-decoration:none;
	padding:16px clamp(22px,4vw,34px);border-radius:999px;
	box-shadow:0 3px 0 rgba(19,40,74,.2);
	transition:transform .16s ease, box-shadow .16s ease;
}
.wp-block-button.is-style-crx-cta .wp-block-button__link:hover,
.crx-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(245,124,0,.42)}
.crx-cta .arw{font-size:20px;line-height:1;transition:transform .16s ease}
.crx-cta:hover .arw{transform:translateX(4px)}
.crx-cta-sub{margin-top:14px;font-size:14.5px;color:var(--text-muted)}
.crx-cta-ghost{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;text-decoration:none;font-size:16.5px;border-bottom:2px solid rgba(255,255,255,.35)}
.crx-cta-ghost:hover{border-bottom-color:var(--aqua)}

/* ---- Header */
.crx-top{position:absolute;inset:0 0 auto 0;z-index:20}
.crx-top .crx-wrap{display:flex;align-items:center;gap:18px;padding-block:20px}
.crx-brand{font-weight:700;color:#fff;font-size:24px;letter-spacing:-.04em;text-decoration:none;line-height:1}
.crx-brand i{font-style:normal;color:var(--aqua)}
.crx-brand small{display:block;font-size:8.5px;letter-spacing:.2em;font-weight:500;color:rgba(255,255,255,.75);margin-top:3px}
.crx-top .crx-states{margin-left:auto;font-size:13.5px;color:rgba(255,255,255,.82)}
.crx-top .crx-cta{padding:11px 22px;font-size:15px;box-shadow:none}
@media (max-width:680px){ .crx-top .crx-states{display:none} }

/* ---- Hero. Real <img>, eager + fetchpriority=high. Loading this as a CSS
   background-image is what puts the live page's LCP at 12.2s: a background
   is invisible to the preload scanner. */
.crx-hero{position:relative;overflow:hidden;background:var(--navy);isolation:isolate;
	padding-block:clamp(120px,15vw,168px) clamp(56px,8vw,96px)}
.crx-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%;z-index:-3}
.crx-hero__scrim{position:absolute;inset:0;z-index:-2;background:
	linear-gradient(100deg, rgba(8,26,40,.94) 0%, rgba(8,26,40,.86) 34%, rgba(0,114,126,.52) 62%, rgba(0,151,167,.28) 100%)}
.crx-blob{position:absolute;z-index:-1;pointer-events:none;mix-blend-mode:screen;border-radius:46% 54% 60% 40% / 52% 44% 56% 48%}
.crx-blob.b1{width:32rem;height:28rem;right:-7rem;top:-10rem;background:rgba(30,216,230,.2)}
.crx-blob.b2{width:22rem;height:22rem;right:16%;bottom:-11rem;background:rgba(59,83,147,.42);border-radius:58% 42% 40% 60% / 46% 58% 42% 54%}
.crx-blob.b3{width:13rem;height:13rem;right:34%;top:-4rem;background:rgba(19,40,74,.6);border-radius:50%}
@media (max-width:860px){ .crx-blob{display:none} }

.crx-hero .crx-inner{position:relative;max-width:62ch}
.crx-hero h1{color:#fff}
.crx-hero h1 em{font-style:normal;color:var(--aqua);display:block}
.crx-hero .crx-lede{margin-top:22px;font-size:clamp(17.5px,2.05vw,20.5px);color:#DCE9F2;max-width:52ch;line-height:1.5}
.crx-signal{margin-top:26px;display:flex;gap:13px;align-items:flex-start;max-width:52ch}
.crx-signal .mark{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--aqua);color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:13px;margin-top:2px}
.crx-signal p{color:#fff;font-size:17px;font-weight:500;line-height:1.45}
.crx-signal p span{display:block;font-weight:400;color:#C8DCE8;font-size:15.5px;margin-top:4px}
.crx-hero .crx-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.crx-hero .crx-avail{margin-top:24px;font-size:15px;color:#C8DCE8}
.crx-hero .crx-avail b{color:#fff;font-weight:600}
.crx-hero .crx-fine{margin-top:18px;font-size:13px;color:rgba(255,255,255,.62);max-width:56ch;line-height:1.5}

.crx-counter{background:var(--teal);color:#fff;text-align:center;padding-block:15px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}

/* ---- Trust chips */
.crx-trust{background:var(--mist);border-bottom:1px solid var(--rule)}
.crx-trust .crx-wrap{display:flex;flex-wrap:wrap;gap:11px 32px;padding-block:18px;align-items:center;justify-content:center}
.crx-trust span{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--navy)}
.crx-trust span::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal);flex:0 0 auto;box-shadow:0 0 0 3px rgba(0,151,167,.16)}

/* ---- Content */
.crx-body{margin-top:18px;max-width:64ch;font-size:17.5px}
.crx-lead-in{margin-top:20px;max-width:58ch;font-size:clamp(18px,2.1vw,21px);color:var(--navy);font-weight:500;line-height:1.45}
.crx-split{display:grid;gap:clamp(26px,4vw,54px)}
@media (min-width:900px){ .crx-split{grid-template-columns:.86fr 1.14fr;align-items:start} }

.crx-list{list-style:none;margin:0;padding:0}
.crx-list li{position:relative;padding:14px 0 14px 32px;font-size:17px;border-bottom:1px solid var(--rule);color:var(--navy);font-weight:500}
.crx-list li:first-child{border-top:1px solid var(--rule)}
.crx-list li::before{content:'';position:absolute;left:3px;top:1.42em;width:10px;height:10px;border-radius:3px;background:var(--teal)}

.crx-ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.crx-ticks li{position:relative;padding-left:33px;font-size:17.5px}
.crx-ticks li::before{content:'';position:absolute;left:2px;top:.5em;width:16px;height:9px;border-left:3px solid var(--aqua);border-bottom:3px solid var(--aqua);transform:rotate(-45deg) translateY(-2px)}

/* ---- Steps */
.crx-steps{counter-reset:s;display:grid;gap:clamp(22px,3vw,34px);margin-top:44px}
@media (min-width:860px){ .crx-steps{grid-template-columns:repeat(3,minmax(0,1fr))} }
.crx-step{counter-increment:s;position:relative;background:#fff;border-radius:14px;padding:28px 26px 30px;border:1px solid var(--rule)}
.crx-step::before{content:counter(s);position:absolute;top:-17px;left:26px;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.crx-step h4{margin:10px 0 9px}
.crx-step p{font-size:16px}

/* ---- Price */
.crx-price{position:relative;overflow:hidden;border-radius:18px;padding:clamp(32px,5vw,56px);
	background:radial-gradient(48rem 26rem at 90% 6%, rgba(30,216,230,.22), transparent 62%), var(--navy)}
.crx-price .fig{font-size:clamp(66px,11vw,112px);font-weight:700;color:var(--orange);line-height:.84;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.crx-price h2{color:#fff;margin-top:16px}
.crx-price .grid2{display:grid;gap:clamp(24px,4vw,48px)}
@media (min-width:820px){ .crx-price .grid2{grid-template-columns:1fr 1fr;align-items:center} }
.crx-price .crx-ticks li{color:rgba(255,255,255,.92)}
.crx-price .crx-fine{margin-top:24px;font-size:15px;color:var(--text-on-dark);max-width:50ch}

/* ---- Why cards */
.crx-cards{display:grid;gap:18px;margin-top:40px}
@media (min-width:760px){ .crx-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.crx-card{position:relative;overflow:hidden;background:#fff;padding:34px 30px;border:1px solid var(--rule);border-radius:16px;
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.crx-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--teal),var(--aqua))}
.crx-card:hover{transform:translateY(-3px);border-color:var(--rule-strong);box-shadow:0 12px 30px rgba(19,40,74,.11)}
.crx-card .num{font-size:34px;font-weight:700;color:var(--teal);opacity:.26;letter-spacing:-.04em;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.crx-card h4{margin-bottom:10px}
.crx-card p{font-size:16.5px}

/* ---- Founder */
.crx-founder{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
@media (min-width:880px){ .crx-founder{grid-template-columns:1.18fr .82fr} }
.crx-quote{font-size:clamp(23px,3.3vw,34px);font-weight:600;font-style:italic;color:#fff;line-height:1.28;letter-spacing:-.025em;text-wrap:balance}
.crx-quote .mark{font-size:62px;color:var(--aqua);line-height:.6;display:block;margin-bottom:8px}
.crx-attrib{margin-top:22px;font-size:16.5px;color:var(--text-on-dark);max-width:54ch}
.crx-creds{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);border-radius:12px;overflow:hidden}
.crx-creds li{background:var(--navy);padding:16px 20px;font-size:15.5px;font-weight:500;color:#fff;display:flex;align-items:center;gap:13px}
.crx-creds li::before{content:'';width:5px;height:19px;border-radius:3px;background:var(--aqua);flex:0 0 auto}

/* ---- Testimonials */
.crx-quotes{display:grid;gap:20px;margin-top:36px}
@media (min-width:780px){ .crx-quotes{grid-template-columns:repeat(2,minmax(0,1fr))} }
.crx-tcard{border:1px solid var(--rule);border-top:4px solid var(--teal);border-radius:0 0 12px 12px;padding:26px;background:#fff}
.crx-tcard p{font-size:16.5px;color:var(--navy);line-height:1.55}
.crx-tcard .who{margin-top:16px;font-size:14px;color:var(--text-muted);font-weight:600}

/* ---- Closer */
.crx-closer{position:relative;overflow:hidden;text-align:center;
	background:radial-gradient(58rem 32rem at 50% 118%, rgba(30,216,230,.3), transparent 62%), var(--teal-deep)}
.crx-closer h2{color:#fff;max-width:19ch;margin-inline:auto}
.crx-closer p{margin-top:19px;max-width:52ch;margin-inline:auto;font-size:17.5px;color:#D6F1F5}
.crx-closer .crx-cta{margin-top:30px}

/* ---- Footer */
.crx-footer{background:var(--navy-deep);color:var(--text-on-dark);padding-block:46px 38px;font-size:14.5px}
.crx-footer .crx-wrap{display:grid;gap:24px}
.crx-footer .req{display:grid;gap:14px;max-width:80ch}
.crx-footer strong{color:#fff;font-weight:600}
.crx-footer .meta{border-top:1px solid var(--rule-dark);padding-top:20px;font-size:13.5px;color:#8FA9BC}

/* ---- Mobile sticky CTA */
.crx-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--navy);border-top:1px solid var(--rule-dark);padding:11px 16px;display:none}
.crx-sticky .crx-cta{width:100%}
@media (max-width:640px){ .crx-sticky{display:block} body{padding-bottom:80px} }

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------------------------------------------------------------------
   Core block reconciliation.
   The pattern uses core blocks so editors can edit normally, which means core
   wraps things the hand-written mockup did not: figures around images, list
   padding, button wrappers. These rules bridge that gap and are the only
   place the block markup leaks into the design.
   ------------------------------------------------------------------------ */

/* core/image renders <figure><img>; the figure becomes the absolute layer. */
.crx-hero__img{position:absolute;inset:0;margin:0;width:100%;height:100%;z-index:-3}
.crx-hero__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 50%}

/* core/list ships its own padding-inline-start and margins. */
.crx-list.wp-block-list,
.crx-ticks.wp-block-list,
.crx-creds.wp-block-list{list-style:none;margin:0;padding:0}
.crx-ticks.wp-block-list{margin-top:26px}

/* core/group applies its own block gap inside our grid containers. */
.crx-split.wp-block-group,
.crx-steps.wp-block-group,
.crx-cards.wp-block-group,
.crx-quotes.wp-block-group,
.crx-founder.wp-block-group{margin-block:0}

/* The hero action row: core/buttons sits beside the ghost link. */
.crx-actions.wp-block-group{margin-top:32px;gap:22px;align-items:center}
.crx-actions .wp-block-buttons{margin:0}
.crx-cta-ghost-wrap{margin:0}

/* core/button wrapper should not add its own spacing inside the pill. */
.wp-block-button.is-style-crx-cta .wp-block-button__link{text-decoration:none}

/* Paragraph-as-banner: the counter strip spans the viewport. */
p.crx-counter{margin:0}

/* Section groups must not inherit core's default vertical margins, since
   .crx-section already owns the rhythm. */
section.crx-section{margin-block:0}