/* /pricing - page components only. Loads on template-pricing.php and nowhere else.
   Every class is prefixed p- so nothing here can collide with a theme class.
   Colours come from the theme's token variables. No raw hex except the two
   receipt tints, which are noted below and belong in inc/tokens.php. */

/* SHARED - filled in 13 Aug 2026 from the section 2 inventory check.
   Checked against what actually reaches THIS page, not the theme as a whole:
   header.php inlines tokens + base.css everywhere, but home-critical.css and
   home.css are front-page only. Of the fourteen classes the template assumes,
   only .lede was already present, so the other thirteen are defined here.
   The grounds mirror the homepage's own .band / .light / .light.alt rules so
   the two pages cannot drift apart. No new colour is introduced. */

/* The style spec names colours accent / ink / clay-ink; inc/tokens.php
   implements them as --awd-color-*. These are aliases onto the existing
   tokens, not new values - raw hex still lives only in inc/tokens.php. */
:root {
--accent:var(--awd-color-accent); --accent-ink:var(--awd-color-accent-ink);
--clay:var(--awd-color-clay); --clay-ink:var(--awd-color-clay-ink);
--clay-body:var(--awd-color-clay-body); --clay-kicker:var(--awd-color-clay-kicker);
--dark:var(--awd-color-bg-dark); --dark-2:var(--awd-color-dark-2);
--rail:var(--awd-color-rail); --cream:var(--awd-color-bg);
--warm:var(--awd-color-bg-alt); --edge:var(--awd-color-border);
--ink:var(--awd-color-text); --body:var(--awd-color-body);
--muted:var(--awd-color-text-muted); --dim:var(--awd-color-dim);
/* base.css:161 fixes the header at 76px and base.css:162 offsets the body by
   the same. The theme has no variable for it, so this names the real value. */
--awd-header-h:76px;
}

/* --- layout --- */
.wrap { max-width:1240px; margin:0 auto; padding:0 32px; position:relative; z-index:3; }
.narrow { max-width:calc(64ch + 64px); } /* style spec 3: body text never wider than 64ch */

/* --- type --- */
.kicker { font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); font-weight:600; }

/* --- buttons, copied from home-critical.css so both pages agree --- */
.btn { background:var(--accent); color:var(--dark-2); padding:15px 30px; border-radius:8px; font-size:15px; font-weight:600; min-height:48px; display:inline-flex; align-items:center; gap:9px; transition:background .22s,transform .22s; cursor:pointer; border:0; font-family:inherit; text-decoration:none; }
.btn:hover { background:var(--awd-color-accent-hover); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); }
.btn-ghost:hover { background:color-mix(in srgb,var(--accent) 12%,transparent); transform:none; }

/* --- grounds, style spec 2 --- */
section[class*="ground-"] { padding:96px 0; position:relative; overflow:hidden; }
.ground-hero { background:var(--awd-gradient-hero); color:var(--awd-color-text-inverse); }
.ground-hero .lede, .ground-dark .lede { color:var(--dim); }
.ground-dark { background:var(--dark); color:var(--awd-color-text-inverse); }
.ground-clay { background:var(--clay); color:var(--clay-ink); }
.ground-clay h2, .ground-clay h3 { color:var(--clay-ink); }
.ground-clay h2 em, .ground-clay .kicker { color:var(--clay-kicker); }
.ground-clay .lede { color:var(--clay-body); }
.ground-cream { background:var(--cream); color:var(--ink); }
.ground-warm { background:var(--warm); color:var(--ink); }
.ground-cream .lede, .ground-warm .lede { color:var(--body); }
.ground-cream::before, .ground-warm::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 60% at 85% -10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 60%); }
.ground-warm::before { background:radial-gradient(70% 60% at 10% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%); }

/* film grain on the light grounds - style spec 2, "never flat paper" */
.grain::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* Entrance motion. .reveal and .up carry NO initial hidden state on purpose -
   spec v1.1 section 5, difference 3: the page must be complete with
   JavaScript off. pricing.js adds .in; menu.js adds .visible to the same
   sections site-wide, which is inert here because nothing styles .visible. */
.reveal.in .up, .reveal.in [data-rise] { animation:p-up .5s ease backwards; }
@keyframes p-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* --- hero --- */
.p-hero { display:grid; grid-template-columns:14px 1fr; gap:36px; align-items:start; }
.p-rail { background:var(--rail); border-radius:2px; align-self:stretch; min-height:220px; position:relative; overflow:hidden; }
.p-rail::after { content:""; position:absolute; left:0; right:0; height:38%; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent); animation:p-travel 7s ease-in-out infinite; }
@keyframes p-travel { 0% { top:-40%; } 100% { top:100%; } }
.p-hero-note { font-size:14px; margin-left:14px; }

/* --- answer-first --- */
.p-answer { border-left:3px solid var(--accent); padding-left:26px; }
.p-answer p { font-size:20px; line-height:1.55; color:var(--ink); max-width:60ch; }
.p-answer strong { color:var(--accent-ink); font-weight:500; }

/* --- jump bar --- */
.p-jump { position:sticky; top:var(--awd-header-h,0px); z-index:20; background:color-mix(in srgb,var(--dark) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid color-mix(in srgb,var(--accent) 16%,transparent); transform:translateY(-100%); transition:transform .3s ease; }
.p-jump.stuck { transform:none; }
.p-jump .wrap { display:flex; gap:22px; align-items:center; padding-top:12px; padding-bottom:12px; overflow-x:auto; }
.p-jump a { color:var(--dim); font-size:13.5px; border:0; white-space:nowrap; text-decoration:none; }
.p-jump a:hover,.p-jump a.on { color:var(--accent); }
.p-jump-cta { margin-left:auto; color:var(--accent); }

/* --- calculator --- */
.p-calc { display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:start; margin-top:40px; }
.p-calc fieldset { border:0; padding:0; margin:0 0 26px; }
.p-calc legend { font-size:11.5px; text-transform:uppercase; letter-spacing:.24em; font-weight:600; color:var(--clay-kicker); margin-bottom:12px; }
.p-opts { display:flex; flex-wrap:wrap; gap:8px; }
.p-opt { position:relative; }
.p-opt input { position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; cursor:pointer; margin:0; }
.p-opt span { display:flex; align-items:center; padding:12px 16px; min-height:48px; background:color-mix(in srgb,var(--clay-ink) 7%,transparent); border:1px solid color-mix(in srgb,var(--clay-ink) 16%,transparent); border-radius:2px; font-size:15px; color:var(--clay-ink); transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.p-opt:hover span { border-color:color-mix(in srgb,var(--clay-ink) 34%,transparent); }
.p-opt input:checked + span { background:var(--clay-ink); color:var(--clay); border-color:var(--clay-ink); transform:translateY(-1px); }
.p-opt input:focus-visible + span { outline:2px solid var(--clay-ink); outline-offset:2px; }
.p-mods { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.p-mods .p-opt span { font-size:14.5px; justify-content:space-between; gap:10px; }
/* .85 is the lowest opacity that clears WCAG AA 4.5:1 in BOTH chip states:
   unchecked #2f2217 on #bb8056 = 4.65:1, checked #ae7850 on #16110c = 5.00:1.
   Measured against the live page, not estimated. .80 fails at 4.31:1. */
.p-mods .p-opt span i { font-style:normal; opacity:.85; font-size:13px; }
.p-mods .p-opt input:checked + span i { opacity:.85; }
.p-out { background:var(--clay-ink); color:#E7DED5; padding:32px; border-radius:2px; position:sticky; top:calc(var(--awd-header-h,0px) + 20px); }
.p-label { font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:color-mix(in srgb,var(--clay) 75%,transparent); margin:0 0 6px; }
.p-fig { font-family:'Playfair Display',Georgia,serif; font-size:clamp(30px,3.6vw,42px); line-height:1.05; color:var(--clay); margin:0 0 4px; font-variant-numeric:tabular-nums; }
.p-fig-sm { font-size:26px; }
.p-sub { font-size:14px; color:#A79A8E; margin:0 0 24px; max-width:none; min-height:2.6em; }
.p-out hr { border:0; border-top:1px solid color-mix(in srgb,var(--clay) 22%,transparent); margin:0 0 20px; }
.p-out .btn { margin-top:10px; width:100%; text-align:center; }
.p-flash { animation:p-flash .5s ease; }
@keyframes p-flash { 0% { color:#fff; } 100% { color:var(--clay); } }
.p-picked { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; min-height:4px; }
.p-chip { font-size:12px; letter-spacing:.04em; background:color-mix(in srgb,var(--clay) 16%,transparent); color:var(--clay); padding:5px 10px; border-radius:2px; animation:p-pop .28s cubic-bezier(.3,1.4,.5,1); }
@keyframes p-pop { from { opacity:0; transform:scale(.86); } to { opacity:1; transform:none; } }

/* --- tables --- */
.p-tbl { width:100%; border-collapse:collapse; margin:26px 0 0; }
/* Column headers only ever live in a thead. The Build and Fix tables have no
   visible header row by design, so their first cell is a th[scope=row] instead
   - it names the row for a screen reader without drawing anything. Every rule
   below therefore matches the row header alongside td:first-child, so the two
   render identically. */
.p-tbl thead th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.18em; font-weight:600; color:var(--muted); padding:0 12px 12px 0; border-bottom:1px solid var(--edge); }
.p-tbl td, .p-tbl tbody th[scope="row"] { padding:18px 12px 18px 0; border-bottom:1px solid var(--edge); vertical-align:top; font-size:16px; color:var(--body); transition:color .2s ease; }
.p-tbl tbody tr { position:relative; }
.p-tbl tbody td:first-child, .p-tbl tbody th[scope="row"] { position:relative; text-align:left; padding-left:0; color:var(--ink); font-weight:500; width:24%; }
.p-tbl tbody td:first-child::before, .p-tbl tbody th[scope="row"]::before { content:""; position:absolute; left:-14px; top:18px; bottom:18px; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .28s ease; }
.p-tbl tbody tr:hover td:first-child::before, .p-tbl tbody tr:hover th[scope="row"]::before { transform:scaleY(1); }
.p-tbl tbody tr:hover td, .p-tbl tbody tr:hover th[scope="row"] { color:var(--ink); }
.p-price { font-family:'Playfair Display',Georgia,serif; font-size:22px; color:var(--ink); white-space:nowrap; width:20%; }
.p-inc { font-size:14px; color:var(--accent-ink); font-weight:500; }
.p-alt { font-size:14px; }
.p-pending { opacity:.55; }
.p-note { font-size:15px; color:var(--body); border-left:2px solid var(--accent); padding-left:16px; margin-top:28px; max-width:62ch; }
.p-note-clay { border-left-color:var(--clay-kicker); color:var(--clay-body); }
.p-muted-link { color:var(--muted); border-bottom:1px dotted color-mix(in srgb,var(--muted) 50%,transparent); }
.p-own { font-family:'Playfair Display',Georgia,serif; font-size:clamp(21px,2.4vw,27px); line-height:1.35; color:var(--ink); margin-top:36px; max-width:24ch; }

/* --- run tiers --- */
.p-tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge); margin-top:32px; }
.p-tier { background:var(--cream); padding:28px 22px; transition:background .25s ease; }
.p-tier:hover { background:#fff; }
.p-tier-mark { background:#fff; box-shadow:0 0 0 2px var(--accent) inset; }
.p-tier-nm { font-size:12px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); margin:0 0 14px; }
.p-tier-pr { font-family:'Playfair Display',Georgia,serif; font-size:38px; line-height:1; color:var(--ink); margin:0 0 4px; font-variant-numeric:tabular-nums; }
.p-tier-per { font-size:13px; color:var(--muted); margin:0 0 18px; }
.p-tier ul { list-style:none; margin:0; padding:0; }
.p-tier li { font-size:14.5px; color:var(--body); padding:8px 0 8px 20px; position:relative; line-height:1.45; }
.p-tier li::before { content:""; position:absolute; left:0; top:15px; width:9px; height:1px; background:var(--accent); }
.p-flag { display:inline-block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); padding:3px 8px; margin-bottom:12px; }

/* --- two receipts --- */
.p-recs { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:36px; align-items:start; }
.p-rec { padding:30px 28px 26px; border-radius:2px; position:relative; }
.p-rec-a { background:var(--clay-ink); color:#C9BFB4; }
.p-rec-b { background:#F7F1E9; color:var(--body); }
.p-rec-hd { font-size:11.5px; text-transform:uppercase; letter-spacing:.22em; font-weight:600; margin:0 0 22px; }
.p-rec-a .p-rec-hd { color:color-mix(in srgb,var(--clay) 80%,transparent); }
.p-rec-b .p-rec-hd { color:var(--accent-ink); }
.p-line { display:flex; justify-content:space-between; gap:16px; padding:11px 0; font-size:15.5px; }
.in .p-line { animation:p-line-in .45s ease backwards; }
@keyframes p-line-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.p-rec-a .p-line { border-bottom:1px dashed color-mix(in srgb,var(--clay) 22%,transparent); }
.p-rec-b .p-line { border-bottom:1px dashed var(--edge); }
.p-line b { font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-rec-a .p-line b { color:#E3D8CC; }
.p-rec-b .p-line b { color:var(--ink); }
.p-tot { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:20px; padding-top:18px; border-top:1px solid; }
.p-rec-a .p-tot { border-color:color-mix(in srgb,var(--clay) 30%,transparent); }
.p-rec-b .p-tot { border-color:var(--edge); }
.p-tot span { font-size:12px; text-transform:uppercase; letter-spacing:.18em; }
.p-tot b { font-family:'Playfair Display',Georgia,serif; font-size:clamp(30px,3.4vw,40px); font-weight:400; line-height:1; font-variant-numeric:tabular-nums; }
.p-rec-a .p-tot b { color:var(--clay); }
.p-rec-b .p-tot b { color:var(--accent-ink); }
.p-yr { font-size:14px; margin:10px 0 0; opacity:.8; }
.p-foot { font-size:14.5px; margin:20px 0 0; line-height:1.5; }
.p-rec-a .p-foot { color:#A2968A; }
.p-rec-b .p-foot { color:var(--body); }
.p-rec-b::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:8px; background:repeating-linear-gradient(-45deg,#F7F1E9 0 8px,transparent 8px 16px); }
.p-pull { font-family:'Playfair Display',Georgia,serif; font-size:clamp(23px,2.9vw,34px); line-height:1.3; color:var(--clay-ink); max-width:22ch; margin:42px 0 0; }
.p-pull-note { font-size:15.5px; margin-top:14px; }

/* --- what moves it, how paying works --- */
.p-two { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.p-list { list-style:none; padding:0; margin:0; }
.p-list li { padding:14px 0; border-bottom:1px solid var(--edge); font-size:16px; color:var(--body); }
.p-list li strong { color:var(--ink); font-weight:500; }
.p-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px; counter-reset:p-s; }
.p-step { position:relative; padding-top:34px; }
.p-step::before { counter-increment:p-s; content:counter(p-s); position:absolute; top:0; left:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--accent); color:var(--accent-ink); font-size:12px; display:flex; align-items:center; justify-content:center; background:var(--warm); }
.p-step::after { content:""; position:absolute; top:13px; left:32px; right:-24px; height:1px; background:var(--edge); }
.p-step:last-child::after { display:none; }
.p-step h3 { font-size:17px; margin-bottom:6px; }
.p-step p { font-size:14.5px; margin:0; }

/* --- trust --- */
.p-trust { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:color-mix(in srgb,var(--accent) 18%,transparent); border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); }
.p-trust div { background:var(--dark-2); padding:26px 20px; transition:background .25s ease; }
.p-trust div:hover { background:#181C20; }
.p-trust-n { font-family:'Playfair Display',Georgia,serif; font-size:32px; color:var(--accent); line-height:1; margin:0 0 8px; font-variant-numeric:tabular-nums; }
.p-trust-t { font-size:13.5px; color:var(--dim); line-height:1.45; margin:0; }

/* --- faq --- */
.p-faq { border-top:1px solid var(--edge); margin-top:28px; }
.p-faq details { border-bottom:1px solid var(--edge); }
.p-faq summary { cursor:pointer; list-style:none; padding:22px 40px 22px 0; font-size:18px; color:var(--ink); font-weight:400; position:relative; min-height:48px; transition:color .2s ease; }
.p-faq summary:hover { color:var(--accent-ink); }
.p-faq summary::-webkit-details-marker { display:none; }
.p-faq summary::after { content:""; position:absolute; right:10px; top:31px; width:11px; height:1px; background:var(--accent-ink); }
.p-faq summary::before { content:""; position:absolute; right:15px; top:26px; width:1px; height:11px; background:var(--accent-ink); transition:transform .25s ease,opacity .25s ease; }
.p-faq details[open] summary::before { transform:rotate(90deg); opacity:0; }
.p-ans { overflow:hidden; }
.p-ans p { padding:0 60px 22px 0; margin:0; animation:p-slide .32s ease; }
@keyframes p-slide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* --- close --- */
.p-offers { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:34px 0 30px; }
.p-offer { background:var(--dark-2); padding:28px; border:1px solid color-mix(in srgb,var(--accent) 15%,transparent); transition:border-color .25s ease,transform .25s ease; }
.p-offer:hover { border-color:color-mix(in srgb,var(--accent) 40%,transparent); transform:translateY(-2px); }
.p-offer h3 { color:#F4F2EE; margin-bottom:8px; }
.p-offer p { font-size:15px; margin-bottom:18px; }

@media (max-width:1000px) {
.p-tiers { grid-template-columns:1fr 1fr; }
.p-steps { grid-template-columns:1fr 1fr; }
.p-step:nth-child(2)::after { display:none; }
}
@media (max-width:900px) {
.p-calc { grid-template-columns:1fr; gap:30px; }
.p-out { position:static; }
.p-two { grid-template-columns:1fr; gap:34px; }
.p-trust { grid-template-columns:1fr 1fr; }
.p-offers { grid-template-columns:1fr; }
.p-mods { grid-template-columns:1fr; }
.p-tbl tbody td:first-child, .p-tbl tbody th[scope="row"] { width:auto; }
.p-hero { grid-template-columns:8px 1fr; gap:22px; }
.p-steps { grid-template-columns:1fr; }
.p-step::after { display:none; }
}
@media (max-width:820px) {
.p-recs { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
.p-rail::after { display:none; }
.p-chip,.p-line,.p-ans p,.p-flash { animation:none !important; }
.reveal.in .up,.reveal.in [data-rise] { animation:none !important; }
}