/* Buy Back Your Week, editorial skin for every page that still runs on the
   old graphite design system (app.css): audit, sample, tools, library,
   answers, legal, report, workspace, checkout, 404.

   Loaded after app.css by the server on the English site only. It changes
   the tokens and the few components that carry the look, so the pages keep
   their structure and behaviour and read as the same document as the
   homepage: warm paper, near-black ink, one green that only sits on buttons,
   one family (Geist). Remove = drop the link the server injects. */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Geist-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Geist-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/Newsreader-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- tokens: one palette for console pages and reading pages alike ---- */
:root,body,body.page-answer{
  --paper:#F6F3EC; --sheet:#FFFDF8; --ink-e:#17160F;
  --accent:#1D5A4A; --accent-ink:#FFFFFF; --accent-hover:#154536;
  --ease:cubic-bezier(.22,.61,.36,1);

  --graphite:#F6F3EC;
  --panel:#FFFDF8;
  --panel-2:#FBF8F1;
  --raised:#EFEBE2;
  --seam:#DCD6C9;
  --seam-soft:#E9E4D9;
  --rule:#DCD6C9;
  --rule-soft:#E9E4D9;
  --ink:#17160F;
  --ink-2:#47443C;
  --muted:#5F5B52;
  --faint:#6A665C;
  --panel-ink:#17160F;

  /* the old lime "live" signal becomes ink: selection, progress, focus */
  --live:#17160F;
  --live-dim:rgba(23,22,15,.06);

  /* the four decisions, in the same restrained inks as the homepage shots;
     eliminate doubles as the error colour, so it keeps a readable rust */
  --keep:#17160F;
  --delegate:#3F5E52;
  --automate:#5C5950;
  --eliminate:#9C3B22;
  --signal:#8A6420;

  --display:'Geist',ui-sans-serif,'Helvetica Neue',Arial,sans-serif;
  --sans:'Geist',ui-sans-serif,'Helvetica Neue',Arial,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'Geist',ui-sans-serif,'Helvetica Neue',Arial,sans-serif;
  --r:8px;
  --r-lg:10px;
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6}
::selection{background:#17160F;color:#F6F3EC}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:750;letter-spacing:-.035em}
h1{line-height:1.02;letter-spacing:-.045em}
h2{line-height:1.08}
h3{letter-spacing:-.02em;font-weight:700}
.lede{color:var(--ink-2)}
.muted{color:var(--muted)}
.fine{color:var(--faint)}

/* labels: the console's mono tags become the homepage's small caps */
.mono{font-family:var(--sans);font-weight:600;letter-spacing:.08em;font-size:12px}
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--faint);gap:0}
.eyebrow::before{display:none}

/* ---- the one accent: buttons only ---- */
.btn{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:999px;
  min-height:48px;padding:0 22px;font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;
  justify-content:center;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn-ghost,.btn-light{background:transparent;color:var(--ink);border-color:var(--seam)}
.btn-ghost:hover,.btn-light:hover{background:var(--sheet);border-color:var(--ink);color:var(--ink)}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.btn[disabled]{opacity:.5}

/* selected states that painted dark text on the lime: now paper on ink */
.artifact-tab.selected,.peek-tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.option.selected .box::after{border-color:var(--paper)}
.flag-opts button.on[data-v=yes],.flag-opts button.on[data-v=sometimes],.flag-opts button.on[data-v=no]{color:#FFFFFF}
.vs-plan.is-lead{background:var(--sheet);box-shadow:inset 0 2px 0 var(--ink)}
.vs-cell.is-lead{box-shadow:inset 1px 0 0 var(--seam)}
.credit-law,.calc-verdict{background:var(--sheet);border-left-color:var(--ink)}
.ai-example{border-color:var(--seam)}

/* seam grids: on paper the 1px-gap trick left any empty cell as a solid
   beige block. Here every cell draws its own right and bottom rule. */
.tool-grid,.cards,.link-list,.score-grid,.bottleneck-grid,.sys-grid{gap:0;background:transparent;border:0;border-top:1px solid var(--seam);border-left:1px solid var(--seam);border-radius:0}
.tool-grid > *,.cards > *,.link-list > *,.score-grid > *,.bottleneck-grid > *,.sys-grid > *{border-right:1px solid var(--seam);border-bottom:1px solid var(--seam)}
.ai-stance,.auto-est,.sample-note{background:var(--sheet);border-left-color:var(--ink)}

/* fields */
input[type=text],input[type=email],input[type=number],select,textarea{background:var(--sheet);border-color:var(--seam);color:var(--ink);border-radius:8px;font-family:var(--sans)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);background:#FFFFFF}
input[type=range]{background:var(--seam)}
input[type=range]::-webkit-slider-thumb{background:var(--ink);border-color:var(--paper)}
input[type=range]::-moz-range-thumb{background:var(--ink);border-color:var(--paper)}

/* panels and cards read as paper sheets, not consoles */
.lib-card,.panel,.card,.tool-card,.price-panel,.peek,.report-card,.load-card{border-color:var(--seam)}

/* ---- header: same as the homepage ---- */
.site-head{max-width:1200px;height:68px;border-bottom:1px solid var(--seam);background:rgba(246,243,236,.94)}
.wordmark{font-family:var(--sans);font-weight:750;flex-direction:row;gap:5px;font-size:17px;align-items:baseline}
.wordmark span{font-family:var(--sans);font-size:17px;letter-spacing:-.03em;text-transform:none;font-weight:500;color:var(--faint)}
.site-nav a{border-radius:999px}
.eh{position:sticky;top:0;z-index:60;background:rgba(246,243,236,.94);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.eh.scrolled{border-bottom-color:var(--seam)}
.eh-in{max-width:1200px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:28px}
.eh-mark{font-family:var(--sans);font-weight:750;letter-spacing:-.03em;font-size:17px;text-decoration:none;white-space:nowrap;color:var(--ink)}
.eh-mark span{color:var(--faint);font-weight:500}
.eh-nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.eh-nav a{text-decoration:none;font-size:15px;color:var(--ink-2);font-weight:500}
.eh-nav a:hover,.eh-nav a[aria-current="page"]{color:var(--ink)}
.eh-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.eh-nav a.btn,.eh-nav a.btn:hover{color:var(--accent-ink);text-decoration:none}
.eh-menu{display:none;margin-left:auto;font:inherit;font-family:var(--sans);font-size:15px;font-weight:600;background:none;border:1px solid var(--seam);border-radius:999px;padding:8px 16px;min-height:40px;color:var(--ink);cursor:pointer}

/* ---- footer: same as the homepage ---- */
.ef{border-top:1px solid var(--seam);margin-top:96px;padding:44px 0 56px}
.ef-in{max-width:1200px;margin:0 auto;padding:0 24px}
.ef nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:18px}
.ef nav a{font-size:15px;color:var(--ink-2);text-decoration:none}
.ef nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ef p{font-size:14px;color:var(--faint);margin:22px 0 0;max-width:62ch;line-height:1.55}

@media (max-width:860px){
  .eh-in{height:60px;gap:12px}
  .eh-nav{display:none}
  .eh-menu{display:block}
  .eh-nav.open{display:flex;position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--seam);padding:4px 24px 18px}
  .eh-nav.open a{padding:14px 0;border-bottom:1px solid var(--seam-soft);font-size:17px}
  .eh-nav.open a[aria-current="page"]{text-decoration:none;font-weight:650}
  .eh-nav.open .btn{margin-top:16px;border-bottom:0;justify-content:center}
  .ef{margin-top:72px}
}
@media (prefers-reduced-motion:reduce){
  .eh,.btn{transition:none}
}

/* answers index: question and its one-line summary as one readable row */
.link-list li{padding:18px 22px}
.link-list a{padding:0;font-weight:600;color:var(--ink)}
.link-list a:hover{background:none;text-decoration:underline;text-underline-offset:4px}
.link-list li > .muted{display:block;margin-top:4px;font-size:15px;line-height:1.5}
