/* /earn, the session fee calculator (earn-page 24 Oct 2026).
   Tokens copied from the live public pages (html.tf-e on /expert, read 24 Oct 2026), so the page sits beside
   /expert without a seam: black ground, cream ink, Geist, 18px cards with a hairline and no shadow, white
   capsule primary button, the site --ease curve and .18s/.24s durations.
   Dials for this page: DESIGN_VARIANCE 5 (inputs and result side by side at unequal widths, left-aligned
   type, no card grid), MOTION_INTENSITY 2 (motion only confirms a state change: the result fading in, button
   press), VISUAL_DENSITY 4 (one task on the page, generous spacing, one result block). */
@font-face { font-family: Geist; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/Geist-Variable.woff2") format("woff2"); }

:root {
  --ground: #000000;           /* live body background on tf-e */
  --panel: #0D0D0D;            /* live .glass.card fill */
  --panel-2: #161716;          /* --char-2, inputs */
  --ink: #F6F1E7;              /* live body text, 19.6:1 on ground */
  --ink-2: rgba(246,241,231,.68); /* live .lead, 9.4:1 on ground */
  --ink-3: rgba(246,241,231,.52); /* live .eyebrow, 6.0:1 on ground, labels only */
  --hair: rgba(255,255,255,.08);  /* live card border */
  --edge: rgba(246,241,231,.24);  /* input edge, 3:1 non-text on panel */
  --focus: #C9A87A;            /* --accent-2 / --gold, focus ring and Founding mark */
  --btn: #FFFFFF;              /* live .btn-primary fill */
  --btn-ink: #000000;          /* 21:1 */
  --error: #F1B8B5;            /* night --n-stop, 11.9:1 on panel */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .18s;
  --t-base: .24s;
  --r-card: 18px;
  --r-input: 12px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --pad: clamp(16px, 4vw, 40px);
  --maxw: 1140px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--btn); color: var(--btn-ink); padding: 8px 14px; border-radius: 999px; z-index: 10; text-decoration: none; font-weight: 600; }
.skip:focus { left: 16px; }

.top { max-width: var(--maxw); margin: 0 auto; padding: var(--s-5) var(--pad) 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; min-height: 44px; }

main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.intro { padding: clamp(40px, 8vw, 88px) 0 clamp(32px, 5vw, 56px); max-width: 760px; }
.eyebrow { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); }
h1 { font-weight: 400; font-size: clamp(2.3rem, 5.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 var(--s-4); text-wrap: balance; }
.lead { font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.62; color: var(--ink-2); margin: 0; max-width: 56ch; }

.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); align-items: start; }

.inputs { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-card); padding: clamp(20px, 3vw, 36px); display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); min-width: 0; }
.row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s-4); }
label { font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
input, select { font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--panel-2); border: 1px solid var(--edge); border-radius: var(--r-input); height: 52px; padding: 0 var(--s-4); width: 100%; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
input::placeholder { color: rgba(246,241,231,.46); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23F6F1E7' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--focus); }
@media (hover: hover) and (pointer: fine) { input:hover, select:hover { border-color: rgba(246,241,231,.4); } }
input[aria-invalid="true"] { border-color: var(--error); }
.hint { margin: calc(var(--s-1) * -1) 0 0; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.row + .hint { margin-top: calc(var(--s-3) * -1); }

.result { position: sticky; top: var(--s-5); background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-card); padding: clamp(20px, 3vw, 36px); display: grid; gap: var(--s-5); }
.result h2 { font-size: .9rem; font-weight: 600; margin: 0 0 var(--s-2); letter-spacing: -.01em; }
.empty p { margin: 0; color: var(--ink-2); font-size: .95rem; max-width: 34ch; }
.filled { animation: rise var(--t-base) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rate { margin: 0 0 var(--s-5); color: var(--ink-2); font-size: .92rem; }
.rate b { color: var(--focus); font-weight: 600; }
.figures { margin: 0; display: grid; gap: var(--s-4); }
.fig { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.fig-main { display: block; border-top: 0; padding-top: 0; }
.fig dt { font-size: .9rem; color: var(--ink-2); }
.fig dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; text-align: right; overflow-wrap: anywhere; }
.fig-main dd { text-align: left; font-size: clamp(2.2rem, 4.4vw, 3.2rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; margin-top: var(--s-1); }
.small { margin: var(--s-4) 0 0; font-size: .84rem; color: var(--ink-2); }
.error { margin: 0; color: var(--error); font-size: .9rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #F1EBE0; } }

.how { padding: clamp(56px, 9vw, 112px) 0 var(--s-7); max-width: 820px; }
.how h2 { font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 var(--s-6); }
.terms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.terms li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-4); }
.terms b { font-weight: 600; font-size: .98rem; }
.terms span { color: var(--ink-2); }
.note { margin: var(--s-7) 0 0; font-size: .9rem; color: var(--ink-2); max-width: 62ch; }
.note a { color: var(--ink); text-underline-offset: 3px; }

.foot { max-width: var(--maxw); margin: 0 auto; padding: var(--s-6) var(--pad) var(--s-7); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); font-size: .84rem; color: var(--ink-3); border-top: 1px solid var(--hair); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.foot a { color: var(--ink-2); text-decoration: none; min-height: 24px; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--ink); } }

@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .result { position: static; }
}
@media (max-width: 560px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .terms li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}