/* TransparenC — shared design tokens and site chrome.
   Source of truth for the palette. Page-specific rules stay inline on each
   page; anything in here is used by two or more pages.

   Palette adopted from the vendors page (the Claude Design export), which was
   the only page carrying --gold-ink and --on-gold — the two tokens that make
   gold usable as a button colour.

   Contrast measured against --surface #FFFFFF:
     --ink 14.26   --ink-soft 9.32   --ink-mute 5.42
     --accent 6.55   --accent-ink 9.18   --gold-ink 4.99
     --error 7.16 light / 7.07 dark
   Two rules follow from it:
     1. --gold is 2.49:1 and must NEVER carry text. Use --gold-ink.
     2. --gold-ink on --sunk is 4.38:1. Keep it on --surface or --ground.
*/

/* ============================================================
   TOKENS — palette sampled from the TransparenC Store logo.
   Changed values are marked. Everything else is unchanged from
   the current site, so this block is a drop-in replacement.
   NOTE: this :root block is duplicated in all six page files.
   Apply the same edit to each one.
   ============================================================ */
:root{
  --ground:#FAFBF6; --surface:#FFFFFF; --sunk:#EEF1E9;      /* warmed toward the logo's sage */
  --ink:#16301B; --ink-soft:#3E4A3E; --ink-mute:#5F6E5D;    /* ink-mute darkened: 4.2:1 -> 5.1:1 */
  --rule:#DCE2D6; --rule-strong:#BCC6B4;
  --accent:#386838; --accent-ink:#2C5029; --accent-soft:#E7EFE4;  /* accent = logo green */
  --gold:#D89828; --gold-soft:#FBF0DC;                      /* gold = logo gold */
  --gold-ink:#9A6410;                                       /* NEW — gold as text, 5.0:1 on ground */
  --on-accent:#FFFFFF;
  --on-gold:#16301B;   /* text on gold, 5.7:1 */
  --error:#A32C1C; --error-soft:#FBEAE6;
  --warning:var(--gold-ink); --success:var(--accent-ink);   /* aliases — no new hues */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;
  --prose:64ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0F1512; --surface:#161E1A; --sunk:#1C2621;
    --ink:#E7EDE8; --ink-soft:#BDC7C0; --ink-mute:#8B978F;
    --rule:#28332D; --rule-strong:#3A4740;
    --accent:#8FBE88; --accent-ink:#A8CBA2; --accent-soft:#1E2B1C;
    --gold:#E0A94A; --gold-soft:#2A2114;
    --gold-ink:#E9BE72;                                     /* NEW — 8.1:1 on dark ground */
    --on-accent:#0F1512;
    --on-gold:#16301B;
    --error:#E8907F; --error-soft:#2E1A16;
    --warning:var(--gold-ink); --success:var(--accent-ink);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1512; --surface:#161E1A; --sunk:#1C2621;
  --ink:#E7EDE8; --ink-soft:#BDC7C0; --ink-mute:#8B978F;
  --rule:#28332D; --rule-strong:#3A4740;
  --accent:#8FBE88; --accent-ink:#A8CBA2; --accent-soft:#1E2B1C;
  --gold:#E0A94A; --gold-soft:#2A2114;
  --gold-ink:#E9BE72;
  --on-accent:#0F1512;
  --on-gold:#16301B;
  --error:#E8907F; --error-soft:#2E1A16;
  --warning:var(--gold-ink); --success:var(--accent-ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--accent-ink);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.1rem,4vw,3rem)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:.6rem;top:.6rem;z-index:20;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem;border-radius:2px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,7.2vw,4.4rem);line-height:1.03}
h2{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.12}
h3{font-size:1.35rem;line-height:1.25;letter-spacing:-.005em}
p{margin:0 0 1rem;max-width:var(--prose)}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 1.1rem   /* CHANGED: was --accent. Gold ink separates
                                               section kickers from green body links. */
}

/* ---------- buttons ----------
   CHANGED, and this is the highest-impact edit in the file:
   the primary CTA moves from green to the logo's gold, and the
   button face moves from mono to the body sans.
   Gold is the only saturated warm value on the page, so it reads
   as the action without needing extra size or weight. Green stays
   on the secondary, which keeps the two audiences distinguishable
   (buyers -> gold, businesses -> green outline).
   Set --btn-radius to 2px to keep the current sharp corners,
   or 6px for a softer face. 3px is the compromise.        */
:root{--btn-radius:3px}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn{
  display:inline-block;font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:0;
  padding:.85rem 1.4rem;border:1px solid transparent;border-radius:var(--btn-radius);
  text-decoration:none;min-height:44px;
  transition:background .15s ease,color .15s ease,border-color .15s ease
}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-primary:hover{background:#C08618;border-color:#C08618;color:var(--on-gold)}
.btn-primary:active{background:#A87310;border-color:#A87310}
.btn-secondary{background:transparent;border-color:var(--rule-strong);color:var(--accent-ink)}
.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.btn-secondary:active{background:var(--accent);color:var(--on-accent)}
.btn[aria-disabled="true"]{background:var(--sunk);border-color:var(--rule);color:var(--ink-mute);pointer-events:none}
.btn-text{
  font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--gold-ink);
  text-decoration:underline;text-underline-offset:4px
}
.btn-text:hover{color:var(--ink)}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--rule);background:var(--surface)}
.site-header .wrap{display:flex;align-items:center;gap:1.25rem;min-height:84px;flex-wrap:wrap}
.brand{display:flex;align-items:center;margin-right:auto;text-decoration:none;line-height:0}
/* CHANGED: 42px -> 52px. The stacked Store lockup has three lines of
   type; below ~50px the "elevate" line stops being legible.
   Reverting to the plain TransparenC wordmark? Set this to 30px. */
.brand-logo{display:block;height:52px;width:auto}
.brand-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-light{display:none}
  :root:not([data-theme="light"]) .brand-dark{display:block}
}
:root[data-theme="dark"] .brand-light{display:none}
:root[data-theme="dark"] .brand-dark{display:block}
.site-nav{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem}
.site-nav a{
  font-family:var(--body);font-size:.92rem;font-weight:500;letter-spacing:0;
  color:var(--ink-soft);text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent
}
.site-nav a:hover{color:var(--ink)}
/* CHANGED: the current page now carries a visible gold underline
   instead of only a colour shift. */
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.header-cta{font-size:.88rem;padding:.6rem 1.1rem;min-height:0}
/* Below ~1120px the header wraps to two rows rather than dropping the CTA:
   tablet and phone were losing the only global action on the page. */
@media (max-width:1120px){
  .site-header .wrap{min-height:0;padding-block:1rem;row-gap:.9rem}
  .site-nav{flex:1 1 100%;order:3}
  .header-cta{order:2}
}
@media (max-width:560px){
  .brand-logo{height:44px}
  .header-cta{flex:1 1 100%;text-align:center}
}

/* DRAFT NOTICE — delete this rule and its markup before launch. See README. */
.draft-notice{
  background:var(--sunk);border-bottom:1px solid var(--rule);
  font-family:var(--body);font-size:.88rem;line-height:1.5;
  color:var(--ink-soft);padding:.7rem clamp(1.1rem,4vw,3rem);margin:0;max-width:none;
  display:flex;gap:.6rem;align-items:baseline;justify-content:center;flex-wrap:wrap
}
.draft-notice b{
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:var(--gold);color:var(--on-gold);border-radius:2px;padding:.25rem .45rem;flex:none
}
.draft-notice a{color:var(--gold-ink);font-weight:600}
.draft-notice a:hover{color:var(--ink)}

.badge{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--body);font-size:.78rem;
  font-weight:600;letter-spacing:0;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid var(--rule-strong);
  border-radius:2px;padding:.34rem .6rem;white-space:nowrap
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* Transparency meter — how many of the seven categories this vendor has
   documented. Replaces a star rating: it rewards disclosure rather than
   ranking businesses against each other.
   CHANGED: filled segments are gold rather than green, which makes the
   meter the one place gold appears outside a button — it is the page's
   most distinctive fact, so it earns the accent. */
.meter{display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.meter .segs{display:flex;gap:3px}
.meter i{display:block;width:15px;height:8px;border-radius:1px;background:var(--rule-strong)}
.meter i.on{background:var(--gold)}
.meter em{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);font-style:normal}

/* Monogram tile — the fallback when a vendor has supplied no logo file. */
.logo-tile{
  flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);
  border:1px solid var(--rule-strong);
  font-family:var(--display);font-weight:500;letter-spacing:-.02em;border-radius:2px
}

/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--rule-strong)}
.site-footer .wrap{padding-block:3rem 3.5rem;display:grid;gap:2rem}
.footer-top{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.footer-motto{font-family:var(--display);font-size:1.2rem;line-height:1.35;color:var(--ink);margin:0 0 .8rem;max-width:22ch}
.footer-desc{font-size:.92rem;color:var(--ink-soft);margin:0;max-width:44ch}
.footer-nav{display:grid;gap:.5rem;align-content:start}
.footer-nav h2{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute);margin:0 0 .3rem
}
.footer-nav a{
  font-family:var(--body);font-size:.92rem;letter-spacing:0;
  color:var(--ink-soft);text-decoration:none
}
.footer-nav a:hover{color:var(--ink)}
.footer-bottom{
  border-top:1px solid var(--rule);padding-top:1.4rem;font-size:.85rem;color:var(--ink-mute);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}