/* ==========================================================================
   CYZOR design system v3
   One type scale, one spacing rhythm, one neutral ramp, one primary, one accent.
   ========================================================================== */

:root{
  /* ---- neutral ramp: the house cool-grey scale already used by ~485 pages
     (home / store / /p / /extensions / /guides). Adopted as THE ramp so the
     three divergent families converge on it rather than inventing a fourth. */
  --cz-ink:#131316; --cz-ink2:#3f3f46; --cz-mut:#71717a; --cz-dim:#a1a1aa;
  --cz-line:#ececef; --cz-line2:#e0e0e4; --cz-paper:#f7f7f8; --cz-surface:#fff;

  /* ---- BENCHMARK: neither Linear (#e5e5e6 on dark) nor Vercel (#171717 on light)
     uses its accent colour for the primary CTA — the accent is reserved for links,
     focus and selection. Only Stripe uses its indigo, and Stripe has no dark mode.
     So: near-black primary, indigo accent, and never the reverse. */
  --cz-primary:#18181b; --cz-primary-d:#000;
  --cz-accent:#4f46e5; --cz-accent-soft:#eef2ff; --cz-accent-line:#c7d2fe;

  /* ---- radius. BENCHMARK: Stripe 4px, Vercel 6px (8px marketing), Linear 6-8px +
     full pills. Nothing in the 14-22px range. The domain was running nine values
     (3,4,6,9,10,11,12,14,16,22). Collapsed to three. */
  --cz-r:12px; --cz-r-sm:9px; --cz-pill:999px;

  /* ---- depth. BENCHMARK: separation is done with hairlines, not elevation —
     Linear's dominant border is 0.8px rgba(255,255,255,.05), Vercel has no borders
     at all (1px inset shadow at 8% black), Stripe 0.8px #e5edf5. Where shadows
     exist they are 3-12% opacity. Two steps, both under 16%. No coloured glows. */
  --cz-sh:0 1px 2px rgba(9,9,11,.04),0 4px 16px -12px rgba(9,9,11,.10);
  --cz-sh-h:0 1px 3px rgba(9,9,11,.05),0 14px 34px -16px rgba(9,9,11,.16);

  /* ---- rhythm. BENCHMARK: section rhythm is 96-128px vertical on containers of
     1200-1450px, with prose capped at 624-736px (Linear --prose-max-width:624px,
     /method 736px). Vercel's whole spacing scale is multiples of 4px. */
  --cz-gut:24px; --cz-sec:96px; --cz-measure:68ch;

  --cz-ease:.16s cubic-bezier(.4,0,.2,1);
  --cz-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --cz-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ==========================================================================
   1. UNIVERSAL HYGIENE — specificity 0, so any family rule still wins.
      These are defaults the well-designed families already set for themselves
      and the neglected ones never did.
   ========================================================================== */

/* BENCHMARK: display line-height collapses to exactly 1.0 at 48px+ (Linear h1
   64/64, Vercel h1 64/64 and h2 56/56) and negative tracking scales with size
   (Vercel -.06em, Linear -.022em display / -.012em small, Stripe -.02em).
   /apps/* was shipping a 32px h1 at line-height 1.6 with letter-spacing:normal —
   the exact opposite. A direct declaration beats an inherited one, so this fixes
   that family without outranking anyone who made a real choice. */
:where(h1){line-height:1.08;letter-spacing:-.028em}
:where(h2){line-height:1.18;letter-spacing:-.022em}
:where(h3){line-height:1.3;letter-spacing:-.014em}
:where(h4,h5,h6){line-height:1.4;letter-spacing:-.008em}
:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}
:where(p,li,dd,figcaption,blockquote){text-wrap:pretty}

/* a wide child must not scroll the whole page sideways on a phone. Deliberately
   NOT overflow-x on html/body — that creates a clipping context and would kill
   the sticky product rail added in section 7. */
:root img,:root svg,:root video,:root canvas,:root iframe{max-width:100%}
:root img,:root video{height:auto}
:root table{max-width:100%}
:root pre{overflow-x:auto}

/* money and data columns line up only with lining tabular figures */
:root .price,:root .pr,:root .bb-price,:root .bundle-price,:root .card .price,
:root td,:root th,:root time,:root .stat,:root .num{font-variant-numeric:tabular-nums}

:root ::selection{background:var(--cz-accent);color:#fff}
html{-webkit-text-size-adjust:100%}
:root [id]{scroll-margin-top:88px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root *,:root *::before,:root *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   2. FOCUS — was visible on exactly one family (/tools) out of six.
      currentColor is used deliberately: it always contrasts with whatever it
      sits on, so the same rule is correct on the light pages AND on the dark
      /rx, /free and /membership surfaces. The accent halo carries the brand.
   ========================================================================== */
:root a:focus-visible,:root button:focus-visible,:root summary:focus-visible,
:root input:focus-visible,:root select:focus-visible,:root textarea:focus-visible,
:root [role="button"]:focus-visible,:root [tabindex]:focus-visible,
:root details:focus-visible,:root label:focus-visible{
  outline:2px solid currentColor;outline-offset:2px;
  box-shadow:0 0 0 5px rgba(79,70,229,.28);border-radius:var(--cz-r-sm)}
:root :focus:not(:focus-visible){outline:none}

/* ==========================================================================
   3. TOUCH TARGETS — WCAG 2.2 target size. Several families shipped 28-32px
      controls; on a phone every one of them was a miss-tap. Scoped to navigation
      and action controls only — a blanket rule on every button would distort
      segmented controls and icon buttons that are correctly small by design.
   ========================================================================== */
@media (pointer:coarse){
  :root a.nl,:root a.cz-nl,:root .btn,:root .nav-cta,:root .bb-cta,:root .btn-buy,
  :root summary,:root [role="button"],:root button[type="submit"]{min-height:44px}
}

/* ==========================================================================
   4. /apps/* — 59 pages that had 1,113 bytes of CSS total and no design at all.
      This is the single largest gap on the domain. Everything below is scoped
      to this family, so nothing else can be affected.
   ========================================================================== */

/* Its palette tokens are kept, NOT replaced, because this is the only family
   with a working prefers-color-scheme dark mode. Recolouring to hard hexes
   would break dark mode for the users who have it; re-pointing the tokens
   keeps both themes correct. --accent was #0066ff / #3399ff (browser-default
   link blue) and was applied to every h1 and h2 on the page. */
[data-cz="apps"]{--accent:#4f46e5;--code-bg:#f7f7f8;--code-text:#3f3f46;--bg2:#f7f7f8}
@media (prefers-color-scheme:dark){
  [data-cz="apps"]{--accent:#a5b4fc;--code-bg:#1b1b1f;--code-text:#d4d4d8;--bg2:#1b1b1f}
}

[data-cz="apps"] body{
  padding:0;font-family:var(--cz-sans);font-size:16px;line-height:1.65;
  letter-spacing:-.006em}
/* 720px at 16px is ~68 characters — the container does the measuring, so prose
   and code blocks share one right edge instead of leaving a ragged gutter. */
[data-cz="apps"] .container{
  max-width:720px;margin:0 auto;padding:40px var(--cz-gut) var(--cz-sec)}

/* headings were bright blue at every level, which reads as unstyled hyperlinks.
   Colour comes from the family's own --text token so dark mode still resolves. */
[data-cz="apps"] h1{
  font-size:clamp(30px,4.4vw,40px);font-weight:800;letter-spacing:-.03em;
  line-height:1.06;color:var(--text);margin:0 0 12px}
[data-cz="apps"] h2{
  font-size:23px;font-weight:750;letter-spacing:-.022em;line-height:1.22;
  color:var(--text);margin:64px 0 4px;padding-top:26px;
  border-top:1px solid var(--cz-line)}
[data-cz="apps"] h3{
  font-size:16.5px;font-weight:700;letter-spacing:-.012em;line-height:1.35;
  color:var(--text);margin:32px 0 10px}
[data-cz="apps"] p{margin:0 0 14px;opacity:.86}
/* Geometry and type only — deliberately NO background. Some pages in this
   family ship a syntax-highlight theme (near-white Monokai text on #272822),
   and an earlier version of this rule repainted the block light while the
   highlighted <code> kept its light text: invisible code. Measured live by
   toggling this sheet on and off — AA failures went 1 -> 25 on
   /apps/ponytail-lazy-senior-dev-prompt-pack. The token retarget above still
   improves the plain blocks; themed blocks keep the theme they came with. */
[data-cz="apps"] pre{
  border:1px solid var(--cz-line);border-radius:var(--cz-r);
  padding:14px 16px;margin:0;font-family:var(--cz-mono);font-size:13px;line-height:1.62}
[data-cz="apps"] pre code{font-family:inherit;font-size:inherit}

/* THE BUG: every one of the 21 "Copy" buttons on this page was
   position:absolute inside a .container that is not a positioned ancestor, so
   all 21 resolved against the initial containing block and stacked on top of
   each other in the top-right corner of the viewport. Verified in a real
   browser: 21 <pre> blocks at 21 distinct y positions, 21 buttons at ONE.
   Every copy control on all 59 pages was unreachable. */
[data-cz="apps"] button.copy{
  position:static;display:inline-flex;align-items:center;gap:6px;
  margin:10px 0 22px;padding:8px 13px;
  background:var(--cz-surface);color:var(--cz-ink2);
  border:1px solid var(--cz-line2);border-radius:var(--cz-r-sm);
  font-family:inherit;font-size:12.5px;font-weight:650;line-height:1;
  box-shadow:var(--cz-sh);cursor:pointer;transition:all var(--cz-ease)}
[data-cz="apps"] button.copy:hover{
  border-color:var(--cz-accent-line);color:var(--cz-accent);
  background:var(--cz-accent-soft);transform:translateY(-1px)}
[data-cz="apps"] button.copy:active{transform:translateY(0)}
@media (prefers-color-scheme:dark){
  [data-cz="apps"] button.copy{background:transparent;color:var(--text);
    border-color:rgba(255,255,255,.14);box-shadow:none}
  [data-cz="apps"] button.copy:hover{background:rgba(255,255,255,.06)}
}

[data-cz="apps"] ul,[data-cz="apps"] ol{margin:0 0 16px;padding-left:22px}
[data-cz="apps"] li{margin:0 0 7px}
[data-cz="apps"] footer{
  margin-top:var(--cz-sec);padding-top:26px;border-top:1px solid var(--cz-line);
  font-size:13.5px;color:var(--cz-mut)}
[data-cz="apps"] footer a{color:var(--cz-ink2);text-decoration:none}
[data-cz="apps"] footer a:hover{color:var(--cz-accent)}

/* the shared header this family never had — markup injected by the onSend hook */
.cz-chrome{
  border-bottom:1px solid var(--cz-line);background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(14px);position:sticky;top:0;z-index:50}
.cz-chrome .cz-in{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  max-width:1160px;margin:0 auto;padding:12px var(--cz-gut)}
.cz-chrome .cz-bd{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:15px;
  letter-spacing:-.02em;color:var(--cz-ink);text-decoration:none;margin-right:auto}
.cz-chrome .cz-mk{
  width:26px;height:26px;border-radius:7px;background:var(--cz-primary);
  display:grid;place-items:center;flex:none}
.cz-chrome .cz-mk svg{width:15px;height:15px;color:#fff;display:block}
.cz-chrome a.cz-nl{
  color:var(--cz-mut);font-size:13.5px;font-weight:600;text-decoration:none;
  transition:color var(--cz-ease)}
.cz-chrome a.cz-nl:hover{color:var(--cz-ink)}
@media (prefers-color-scheme:dark){
  [data-cz="apps"] .cz-chrome{background:rgba(18,18,18,.86);border-bottom-color:rgba(255,255,255,.1)}
  [data-cz="apps"] .cz-chrome .cz-bd{color:var(--text)}
  [data-cz="apps"] .cz-chrome .cz-mk{background:#fff}
  [data-cz="apps"] .cz-chrome .cz-mk svg{color:#121212}
  [data-cz="apps"] .cz-chrome a.cz-nl{color:#a1a1aa}
  [data-cz="apps"] .cz-chrome a.cz-nl:hover{color:var(--text)}
}
@media (max-width:560px){
  .cz-chrome .cz-in{gap:14px;padding:10px 16px}
  .cz-chrome a.cz-nl{font-size:12.5px}
}

/* ==========================================================================
   5. /services/* — 140 pages carrying a second brand: warm stone neutrals, a
      forest-green accent and ui-serif headings, against the cool-grey
      near-black monochrome of the other 485. Same variable NAMES as the house
      system, so re-pointing the tokens converges the whole family without
      touching r765-services.ts (which stays available to its owner).
   ========================================================================== */
[data-cz="services"]{
  --bg:#fff; --surface:#fff; --paper:var(--cz-paper);
  --ink:var(--cz-ink); --ink2:var(--cz-ink2); --mut:var(--cz-mut);
  --line:var(--cz-line); --line2:var(--cz-line2); --field:var(--cz-mut);
  --accent:var(--cz-primary); --accent-d:var(--cz-primary-d); --accent-w:var(--cz-paper);
  --ok:#15803d;
  --r:var(--cz-r); --rs:var(--cz-r-sm);
  --sh:var(--cz-sh);
  /* the serif was the loudest signal that this family belonged to a different
     site. Everything else on the domain is the system sans. */
  --serif:var(--cz-sans);
}
/* h1 was 38px/600 in a serif; bring it onto the house display scale */
:root [data-cz="services"] h1,[data-cz="services"] h1{
  font-weight:800;letter-spacing:-.03em;line-height:1.08}
/* a green 60%-opacity glow is the one shadow on the domain that broke the
   3-12% discipline every benchmark holds to */
[data-cz="services"] .btn:hover,[data-cz="services"] button:hover{box-shadow:var(--cz-sh-h)}

/* ==========================================================================
   6. /guides/* — 74 long-form pages. The copy is fine; it was set as one
      undifferentiated wall. Rhythm and measure are what make long text read
      as edited rather than dumped.
      BENCHMARK: Linear caps prose at 624px (--prose-max-width) and 736px on
      /method; both bump body size on prose pages. 700px at 16px is ~78ch,
      past the comfortable range.
   ========================================================================== */
[data-cz="guides"] article{font-size:16.5px;line-height:1.72}
[data-cz="guides"] article p,[data-cz="guides"] article li{max-width:66ch}
[data-cz="guides"] article h2{margin-top:52px;padding-top:26px;border-top:1px solid var(--cz-line)}
[data-cz="guides"] article h3{margin-top:32px}
[data-cz="guides"] article li{margin-bottom:8px}
[data-cz="guides"] article ul,[data-cz="guides"] article ol{margin-block:14px}
[data-cz="guides"] article ul ul,[data-cz="guides"] article ol ul{margin-block:7px}
[data-cz="guides"] article strong{font-weight:680;color:var(--cz-ink)}
/* a prose outline was being rendered in a monospace <pre>, which reads as a
   terminal dump in the middle of an article. Same block, set as prose. */
[data-cz="guides"] article pre{
  font-family:var(--cz-sans);font-size:14.5px;line-height:1.7;
  background:var(--cz-paper);border:1px solid var(--cz-line);
  border-radius:var(--cz-r);padding:18px 20px}
[data-cz="guides"] article pre code{font-family:inherit}

/* ==========================================================================
   7. /p/* product pages — 383 of them. The media column is short and the buy
      column is tall, so roughly 700px of empty white sat under the product
      image on every single one. Making the media rail sticky is the pattern
      every serious commerce page uses, and it keeps the product in view
      alongside the FAQ instead of leaving a hole.
   ========================================================================== */
@media (min-width:900px){
  :root .pdp-media{position:sticky;top:88px}
}
/* three consecutive full-width grey pills carrying the trust lines read as one
   undifferentiated block. Hairline rules separate them the way the benchmarks
   separate everything — with a line, not a filled box. */
:root .pdp-trust li{border-radius:var(--cz-r-sm)}

/* ==========================================================================
   7b. EMAIL CAPTURE — the shared newsletter widget renders a near-black submit
       on the home page and an indigo one on /guides/*. That inverts hierarchy:
       the indigo made the SECONDARY action (subscribe) louder than the primary
       one right above it (the near-black "Create my eulogy — $19" CTA). Same
       component, one treatment, and it is the house primary.
       The widget writes its colours as an INLINE style attribute, which
       outranks every selector — !important is the only thing that reaches it,
       and it is scoped to these properties on exactly this one control.
   ========================================================================== */
:root form.ccap button[type="submit"],
:root form:has(input[type="email"]) button[type="submit"]{
  background:var(--cz-primary) !important;color:#fff !important;
  border-radius:var(--cz-r-sm) !important;transition:opacity var(--cz-ease)}
:root form.ccap button[type="submit"]:hover,
:root form:has(input[type="email"]) button[type="submit"]:hover{opacity:.88}
:root form.ccap input[type="email"]{border-radius:var(--cz-r-sm) !important}

/* ==========================================================================
   8. CARD GRIDS — home and /store. The media box is already a fixed 16/10, but
      card bodies were free-height, so titles, descriptions and prices landed
      at different baselines across a row. Pinning the price to the bottom of
      the card is what makes a grid look set rather than poured.
   ========================================================================== */
:root .grid .card{display:flex;flex-direction:column}
:root .grid .card .price{margin-top:auto}
:root .thumb img{object-fit:cover;width:100%;height:100%}

/* ==========================================================================
   9. SECTION RHYTHM. BENCHMARK: measured section padding is 96px and 80px on
      stripe.com, 128px on stripe.com/pricing, and a flat 128px top and bottom
      on every linear.app homepage section. This domain was running 20-40px,
      which is the single biggest reason it read as cramped. Applied only where
      a family has not set its own, so nothing that was considered is overruled.
   ========================================================================== */
:where(section){padding-block:var(--cz-sec)}
@media (max-width:760px){:root{--cz-sec:56px;--cz-gut:16px}}

/* ==========================================================================
   10. HAIRLINE + RADIUS DISCIPLINE across the families that invented their own.
       /apps shipped 3px and 4px radii and a #ccc footer rule; /rx shipped
       14/16/11px. Everything converges on the house 12 / 9 / pill.
   ========================================================================== */
[data-cz="apps"] :where(pre,.card,figure,blockquote,table){border-radius:var(--cz-r)}
[data-cz="apps"] :where(button,input,select,textarea){border-radius:var(--cz-r-sm)}