/* site-pricing-page: the DEDICATED pricing stylesheet, ported VERBATIM from the founder-approved mock
   docs/design-mocks/pricing-craft-v13/pricing-craft-mock-v1.html (v13). Loaded ONLY on /pricing so the
   mock's generic class names stay isolated from the shared /styles.css — the same isolation pattern the
   v9 landing uses (/landing.css). The nav / wordmark / glow / btn-hero rules below are byte-identical to
   /landing.css (both v-locked from the same mock family) so the founder rule "the nav never changes
   between pages" holds literally. The ONLY additions beyond the mock <style> are the .nav .account
   cluster (copied from landing.css — the mock predates the signed-in chip; main.js's renderNav shows it
   when a creator is signed in). Price COPY amendments live in pricing.html per PRICING-AMENDMENT.md;
   this CSS ports unchanged. */
:root{
  --accent:#F4593A; --accent-2:#C03623; --amber:#FFB27A; --cream:#FFF9F3;
  --ink:#231A14; --sec:#6E5F55; --faint:#9C8D82; --line:rgba(120,90,70,.14);
  --card:rgba(255,255,255,.66);
  --serif:Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.4,0,.2,1); --t-fast:200ms; --t-med:300ms; --t-slow:500ms;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 60% at 50% -15%, rgba(244,89,58,.13), transparent 60%),
             linear-gradient(180deg,#FBF7F4 0%,#F4ECE6 100%);
  background-attachment:fixed;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
/* site-pricing-page: the [hidden] attribute must win over explicit display (e.g. .btn-hero's inline-flex)
   so main.js renderNav can hide the nav CTA / Log in / Dashboard on the signed-in swap. Ported from
   landing.css — the raw v13 mock lacked it (it predates the logged-in nav cluster), so without this the
   signed-in nav CTA stayed visible and overlapped the Pricing link. */
[hidden]{display:none!important}
/* the morphing nav — identical to landing: wide + integrated at rest,
   shrinks into the compact floating pill on slight scroll (creed width-collapse) */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  width:calc(100vw - 48px);max-width:760px;padding:12px 18px 12px 26px;border-radius:99px;
  background:rgba(255,255,255,.55);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 20px -14px rgba(60,40,25,.18), inset 0 1px 0 rgba(255,255,255,.8);
  white-space:nowrap;
  transition:max-width .8s var(--ease), padding .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease)}
.nav.scrolled{max-width:520px;padding:10px 12px 10px 22px;
  background:rgba(255,255,255,.85);
  box-shadow:0 12px 32px -14px rgba(60,40,25,.3), inset 0 1px 0 rgba(255,255,255,.9)}
@media (prefers-reduced-motion: reduce){.nav{transition:none}}
/* the §7 lockup: gradient house mark at 1.08em on the baseline, gap .30em,
   gradient "Home" + warm-ink "screen" */
.wordmark{display:inline-block;font-weight:800;font-size:17px;letter-spacing:-.025em;line-height:1}
.wordmark img{height:1.08em;width:auto;vertical-align:baseline;margin-right:.30em}
.wordmark .hm{background:linear-gradient(46deg,#F4593A 0%,#F15F46 38%,#F0726B 68%,#FB8A60 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .sc{color:#2B211C}
/* the center links are pinned to the nav's CENTER (which never moves) so they
   stay perfectly still while the edges slide during the morph */
.nav .links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:34px}
.nav a.link,.nav button.link{font-size:14px;font-weight:600;color:var(--sec);transition:color var(--t-fast) var(--ease)}
.nav a.link:hover,.nav button.link:hover{color:var(--accent-2)}
.nav a.link.active{color:var(--accent-2)}
.nav .spacer{flex:1}

.head{max-width:760px;margin:0 auto;text-align:center;padding:140px 32px 26px}
.head h1{font-size:46px;letter-spacing:-.035em;line-height:1.06}
.head .sub{margin-top:14px;font-size:17px;line-height:1.55;color:var(--sec)}
.head .sub b{color:var(--ink)}
.head .why{margin:14px auto 0;max-width:56ch;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.55;color:var(--faint)}

/* billing toggle — Swiss: color/opacity only */
.billing{display:flex;justify-content:center;gap:4px;margin:26px auto 8px;width:max-content;
  background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:99px;padding:4px}
.billing button{padding:8px 18px;border-radius:99px;font-size:14px;font-weight:600;color:var(--sec);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.billing button.on{background:#fff;color:var(--accent-2);box-shadow:0 2px 8px -3px rgba(40,25,15,.2)}
.billing .save{font-size:11px;color:var(--accent-2);font-weight:700;margin-left:6px}

.tiers{max-width:1180px;margin:0 auto;padding:28px 32px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.tier{position:relative;border-radius:20px;background:var(--card);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 6px rgba(255,255,255,.42), 0 24px 50px -30px rgba(40,25,15,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:28px;display:flex;flex-direction:column}
.tier .name{font-size:15px;font-weight:800;letter-spacing:.02em}
.tier .for{font-size:13px;color:var(--faint);margin-top:2px}
.tier .price{margin-top:18px;display:flex;align-items:baseline;gap:6px}
.tier .price .n{font-size:44px;font-weight:800;letter-spacing:-.04em}
.tier .price .per{font-size:14px;color:var(--faint)}
.tier .annualnote{font-size:12px;color:var(--faint);min-height:16px;margin-top:2px}
.tier ul{list-style:none;margin:20px 0 26px;display:grid;gap:10px}
.tier li{font-size:14px;line-height:1.45;color:var(--sec);padding-left:22px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--accent))}
.tier li b{color:var(--ink)}
.tier .cta{margin-top:auto;text-align:center;padding:13px 20px;border-radius:99px;font-weight:700;font-size:15px;
  border:1px solid var(--line);color:var(--ink);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.tier .cta:hover{color:var(--accent-2);border-color:rgba(244,89,58,.4)}
/* Huly-pricing lift: ambient life INSIDE the card — faint, behind content, alive on arrival */
.tier .amb{position:absolute;right:14px;bottom:64px;width:120px;height:70px;opacity:.5;pointer-events:none}
.amb .mini{position:absolute;border-radius:6px;background:linear-gradient(135deg,var(--amber),var(--accent));opacity:0}
@keyframes ambCycle{0%,6%{opacity:0;transform:translateY(8px)}14%,60%{opacity:.35;transform:none}74%,100%{opacity:0}}
.amb .mini{animation:ambCycle 9s var(--ease) infinite}
@media (prefers-reduced-motion: reduce){.amb .mini{animation:none;opacity:.25}}

/* the recommended tier gets THE glow (the only loud thing on the page) */
.glow-wrap{position:relative;isolation:isolate;display:flex}
.glow-wrap .ring{position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:linear-gradient(var(--cream),var(--cream)) padding-box,
             linear-gradient(140deg, rgba(244,89,58,0) 40%, rgba(244,89,58,.5) 75%, var(--accent) 99%) border-box;
  border:2px solid transparent}
.glow-wrap .r1{filter:blur(2px)}.glow-wrap .r2{filter:blur(7px)}.glow-wrap .r3{filter:blur(15px);border-width:3px}
.tier.reco{border-color:rgba(244,89,58,.35)}
.tier.reco .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;
  letter-spacing:.06em;color:#fff;background:var(--accent);border-radius:99px;padding:4px 12px;white-space:nowrap}
/* ONE primary-button language, identical to landing: the cream glow-button.
   The reco CARD keeps the rings; its CTA is the house btn-hero (no second solid-coral voice). */
.tier.reco .cta{position:relative;overflow:hidden;background:var(--cream);color:var(--accent-2);
  border:1px solid rgba(244,89,58,.25);
  box-shadow:0 10px 30px -12px rgba(244,89,58,.35), inset 0 1px 1px rgba(255,255,255,.9)}
.tier.reco .cta:hover{color:#8f2413;border-color:rgba(244,89,58,.35)}

/* nav glow CTA — same recipe as landing (pill radius, 92deg sweep) */
.glow-wrap.pill{display:inline-block}
.glow-wrap.pill .ring{border-radius:99px;
  background:linear-gradient(var(--cream),var(--cream)) padding-box,
             linear-gradient(92deg, rgba(244,89,58,0) 40%, rgba(244,89,58,.55) 78%, var(--accent) 99%) border-box}
.btn-hero{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  padding:10px 20px;border-radius:99px;font-weight:700;font-size:14px;color:var(--accent-2);
  background:var(--cream);border:1px solid rgba(244,89,58,.25);
  box-shadow:0 10px 30px -12px rgba(244,89,58,.35), inset 0 1px 1px rgba(255,255,255,.9);
  transition:color var(--t-fast) var(--ease)}
.btn-hero:hover{color:#8f2413}
.hotspot{position:absolute;top:50%;left:50%;width:150px;height:80px;z-index:-1;
  transform:translate(calc(-50% + var(--bx,0px)),-50%);
  transition:transform var(--t-med) var(--ease);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, #FFFDF5 4%, rgba(255,170,129,.75) 30%, rgba(255,218,159,.4) 55%, transparent 75%);
  filter:blur(6px)}

.takerate{max-width:760px;margin:0 auto;text-align:center;padding:10px 32px 40px}
.takerate p{font-family:var(--serif);font-size:24px;line-height:1.5;color:var(--ink)}
.takerate .hl{background-image:linear-gradient(rgba(244,89,58,.26),rgba(244,89,58,.26));
  background-repeat:no-repeat;background-size:100% 88%;background-position:0 92%}
.takerate .small{margin-top:10px;font-size:13px;color:var(--faint)}

.faq{max-width:680px;margin:0 auto;padding:20px 32px 90px}
.faq h2{font-size:22px;letter-spacing:-.02em;margin-bottom:16px;text-align:center}
.qa{border-bottom:1px solid var(--line);padding:16px 4px}
.qa summary{font-size:15px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.qa summary::after{content:"+";color:var(--faint);font-weight:400}
.qa[open] summary::after{content:"–"}
.qa p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--sec)}
/* flex-wrap: the footer gained the Companies House trading disclosure (a 5th child), and without
   wrapping a single no-wrap row squashes every item on a phone. Kept byte-identical to landing.css. */
.footer{border-top:1px solid var(--line);padding:34px;display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-size:13px;color:var(--faint)}
@media (max-width:900px){.tiers{grid-template-columns:1fr}.head h1{font-size:34px}}
/* site-pricing-page: match the v9 landing's mobile nav. This block is kept BYTE-IDENTICAL to the one in
   landing.css — the nav is shared markup and the founder rule is that it never changes between pages, so
   the two copies must not drift. If you edit one, edit the other.
   20260726-0100-mobile-nav-unreachable: this used to be `.nav .links{display:none}`, which took Pricing,
   Log in and Dashboard off the phone entirely. The links are absolutely centred (line 53) and the centre
   is taken at this width, so un-centre them into the flex row; the room comes from hiding the wordTEXT
   (~140px of a ~298px box), which leaves space for the links AND the CTA (founder picked C, 2026-07-26).
   ⚠️ All inside <=560px: >=561px and desktop are untouched. */
@media (max-width:560px){
  .nav{gap:6px;padding:6px 12px}
  .nav .links{position:static;transform:none;display:flex;gap:2px;align-items:center;
    flex:1;justify-content:flex-end}
  .nav .link{font-size:13px;display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
  .nav .wordmark span{display:none}
  .nav .wordmark img{margin-right:0}
  .nav .btn-hero{padding:9px 13px;font-size:12px}
}

/* .nav .account cluster — copied from /landing.css (the mock predates the signed-in chip). main.js
   renderNav() toggles [data-account] (Sign out) + the Dashboard link when a creator is signed in. */
.nav .account{ display:flex; align-items:center; gap:10px }
.nav .account[hidden]{ display:none }
.nav .account__signout{ border:1px solid var(--line); border-radius:99px; padding:8px 16px;
  font-size:13px; font-weight:600; color:var(--sec); background:rgba(255,255,255,.5);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) }
.nav .account__signout:hover{ color:var(--ink); border-color:rgba(120,90,70,.3) }