/* EONS shared interface: brand tokens, type, buttons, badges, cards, forms, notices and dialogs.
   Every public page loads this first, then its own layout sheet, so one look applies everywhere.
   Brand: near-black ground, ivory text, copper for the mark and emphasis, cyan only as a live signal.
   Type: Rajdhani for headings, Inter for reading, IBM Plex Mono for labels, ids and numbers. */
@font-face{font-family:Rajdhani;src:url('/landing-assets/fonts/rajdhani-Rajdhani-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Rajdhani;src:url('/landing-assets/fonts/rajdhani-Rajdhani-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('/landing-assets/fonts/inter-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/landing-assets/fonts/ibmplexmono-IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/landing-assets/fonts/ibmplexmono-IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{color-scheme:light;
  /* Brand palette */
  --ink:#101415;--ivory:#f2e9d3;--copper:#a6533b;--cyan:#00d7df;
  /* Surfaces: ivory ground, a lighter panel, a warmer second lift for nested blocks, and a code well */
  --paper:var(--ivory);--panel:#faf5e8;--panel-2:#ece3cd;--code:#e9dfc7;--dark:#101415;
  /* Text on ivory */
  --text:var(--ink);--muted:rgba(16,20,21,.66);--faint:rgba(16,20,21,.42);
  /* Lines */
  --line:rgba(16,20,21,.16);--line-soft:rgba(16,20,21,.08);--line-strong:rgba(16,20,21,.32);
  /* Copper scale for interaction */
  --red:var(--copper);--red-dark:#8f4632;--copper-bright:#8f4632;--copper-soft:rgba(166,83,59,.12);--soft:rgba(166,83,59,.1);
  /* Turquoise: pure cyan for marks, dots and rules; a deeper teal where it has to carry text */
  --teal:#0e8a91;--cyan-soft:rgba(0,215,223,.16);
  /* Semantic states: live/ok is turquoise, waiting is copper, warnings are copper on a copper wash */
  --ok:var(--teal);--ok-bg:var(--cyan-soft);--ok-line:rgba(0,190,200,.6);
  --wait:#a8642e;--wait-bg:rgba(166,83,59,.1);--wait-line:rgba(166,83,59,.35);
  --error:#b5412c;
  /* Type */
  --font:'Inter','Arial','Helvetica',sans-serif;--display:'Rajdhani','Arial Narrow',Arial,sans-serif;--mono:'IBM Plex Mono','Courier New',monospace;
  --radius:3px;--frame:12px;
  font:16px/1.55 var(--font);background:var(--paper);color:var(--text);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--paper) radial-gradient(rgba(16,20,21,.07) 1px,transparent 1px) 0 0/28px 28px;min-height:100svh}

/* Type: display headings are uppercase Rajdhani; body stays Inter; small labels are mono. */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.02em;line-height:1.05;margin:0 0 12px;color:var(--text);text-transform:uppercase}
h1{font-size:2.6rem;font-weight:700}h2{font-size:1.5rem;font-weight:600}h3{font-size:1.15rem;font-weight:600}
p,li{color:var(--muted);line-height:1.6}p{margin:0 0 12px}p:last-child{margin-bottom:0}
strong{color:var(--text);font-weight:600}
a{color:var(--copper);text-decoration:none}a:hover{text-decoration:underline;text-decoration-color:var(--cyan)}
.eyebrow{font:500 .7rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.muted{color:var(--muted)}.fine,.field-help,.help{font-size:.8rem;color:var(--muted);line-height:1.55;margin:6px 0 0}
[hidden]{display:none!important}:focus-visible{outline:2px solid var(--teal);outline-offset:3px}::selection{background:var(--cyan);color:var(--ink)}
button,input,select,textarea,summary{font:inherit}button,a,summary,input{touch-action:manipulation}summary{cursor:pointer;color:var(--teal);font-size:.9rem}
.skip-link{position:fixed;top:8px;left:16px;transform:translateY(-180%);background:var(--panel);color:var(--text);padding:10px 16px;z-index:10;border:1px solid var(--line);border-radius:var(--radius)}.skip-link:focus{transform:none}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(16,20,21,.22);border-radius:0}::-webkit-scrollbar-track{background:transparent}

/* Clipped corner: the brand's E has one cut corner; cards and primary buttons echo it top-right. */
.clip,.card,.modal{clip-path:polygon(0 0,calc(100% - var(--frame)) 0,100% var(--frame),100% 100%,0 100%)}
/* Corner brackets frame a block the way the identity board frames its panels. */
.frame{position:relative}
.frame::before,.frame::after{content:'';position:absolute;width:14px;height:14px;border:1px solid var(--copper);pointer-events:none}
.frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-color:var(--cyan)}

/* Buttons: one filled primary, one outlined secondary, one text-only quiet. Legacy class names map onto them. */
.btn,.primary,.secondary,.quiet,.flow-primary,.flow-secondary,.flow-text,.primary-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .9rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;min-height:40px;padding:9px 18px;border-radius:var(--radius);border:1px solid var(--copper);background:var(--copper);color:var(--ivory);cursor:pointer;text-decoration:none;white-space:nowrap;width:auto;box-shadow:none}
.btn:hover:not(:disabled),.primary:hover:not(:disabled),.flow-primary:hover,.primary-link:hover{background:var(--copper-bright);border-color:var(--copper-bright);color:var(--ink);text-decoration:none}
.btn-secondary,.secondary,.quiet,.flow-secondary{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover:not(:disabled),.secondary:hover:not(:disabled),.quiet:hover:not(:disabled),.flow-secondary:hover:not(:disabled){background:rgba(16,20,21,.06);border-color:var(--ink);color:var(--text)}
.btn-quiet,.flow-text{background:none;border-color:transparent;color:var(--copper);padding:9px 8px}.btn-quiet:hover:not(:disabled),.flow-text:hover:not(:disabled){background:var(--copper-soft);color:var(--copper-bright)}
.btn-sm{min-height:32px;padding:5px 12px;font-size:.78rem}
.btn:disabled,.primary:disabled,.secondary:disabled,.quiet:disabled,.flow-primary:disabled,.flow-secondary:disabled,.flow-text:disabled{opacity:.4;cursor:not-allowed}
.btn-block{width:100%;justify-content:space-between}

/* Badges are quiet mono status chips; a dot carries the state colour. */
.badge{display:inline-flex;align-items:center;gap:7px;font:500 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:2px;border:1px solid var(--line);background:rgba(16,20,21,.03);color:var(--muted);white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;flex:none}
.badge-ok{color:var(--teal);background:var(--ok-bg);border-color:var(--ok-line)}.badge-ok::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.badge-wait{color:var(--wait);background:var(--wait-bg);border-color:var(--wait-line)}.badge-warn{color:var(--copper);background:var(--soft);border-color:rgba(166,83,59,.45)}
.badge-reward{color:var(--copper);background:var(--copper-soft);border-color:rgba(166,83,59,.4);font-variant-numeric:tabular-nums}.badge-reward::before{display:none}
.badge-plain::before{display:none}
button.badge-button{background:none;border:0;padding:0;cursor:pointer;border-radius:2px}button.badge-button:hover .badge{border-color:var(--cyan);color:var(--text)}button.badge-button .badge::after{content:'›';font-size:.9rem;line-height:0;opacity:.7}

/* Cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.card-head,.heading,.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line-soft)}.card-head h2,.heading h2,.panel-heading h2{margin:0}
.card-subtitle{margin:4px 0 0;font-size:.85rem}

/* Forms */
label{display:block;font:500 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
input:not([type=checkbox]):not([type=radio]),select,textarea{font:inherit;color:var(--text);background:#fffaf0;border:1px solid var(--line-strong);border-radius:var(--radius);padding:11px 12px;width:100%;max-width:100%;min-width:0;margin:0;caret-color:var(--cyan)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--cyan-soft)}
textarea{resize:vertical}input:read-only{background:var(--panel-2)}
input:disabled,textarea:disabled{background:var(--panel-2);color:var(--muted)}
input[aria-invalid=true]{border-color:var(--error)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.field-error{font-size:.85rem;color:var(--error);margin:6px 0 0}

/* Notices: one bar, one dismiss. */
.notice-area{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px}.notice-area:has(>[hidden]:first-child){display:none}
.notice,#notice{flex:1;margin:0;font-size:.9rem;line-height:1.5;padding:12px 16px;border-radius:var(--radius);border:1px solid rgba(166,83,59,.35);border-left:3px solid var(--copper);background:var(--copper-soft);color:var(--text)}
.notice-area>button{flex:none;min-height:44px}

/* Dialogs */
.modal{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);color:var(--text);padding:0;width:min(600px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:0 30px 80px rgba(16,20,21,.35);overflow:auto}
.modal::backdrop{background:rgba(16,20,21,.5);backdrop-filter:blur(2px)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 14px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--panel)}.modal-head h2{margin:0;font-size:1.3rem}.modal-head .eyebrow{margin-bottom:6px}
.modal-body{padding:20px 24px 24px}.modal-body>section{border:0;padding:0;background:none;margin:0 0 20px;border-radius:0;box-shadow:none}.modal-body>section:last-child{margin-bottom:0}.modal-body>section+section{padding-top:20px;border-top:1px solid var(--line-soft)}

/* Code */
code,pre{font:.85rem/1.5 var(--mono)}code{background:var(--code);padding:2px 6px;border-radius:2px;color:var(--text);border:1px solid var(--line-soft)}
.code-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--code);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:12px 0}.code-box pre,.code-box code{flex:1;min-width:0;margin:0;background:none;border:0;padding:0;overflow-wrap:anywhere;white-space:pre-wrap;font-size:1rem}.code-box .help{flex-basis:100%;margin:0}.code-box pre.verification-code{font-size:1.75rem;font-weight:500;letter-spacing:.18em;color:var(--teal)}

/* Small definition rows and numbered steps */
.details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;margin:0;font-size:.875rem;align-items:baseline}.details dt{font:500 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.details dd{margin:0;overflow-wrap:anywhere;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}.details .address{font-family:var(--mono);font-weight:400;font-size:.8rem}
.steps{padding-left:20px;margin:0 0 16px}.steps li{margin:0 0 8px;font-size:.9rem}
@media(prefers-reduced-motion:no-preference){.btn,.primary,.secondary,.quiet,a{transition:background-color .14s ease,color .14s ease,border-color .14s ease}}
@media(max-width:600px){h1{font-size:2.1rem}h2{font-size:1.3rem}}

/* Quiet, semantic status colors shared across the website. */
.badge.badge-ok{color:#405e46;background:#e9eee5;border-color:#c8d4c1}
.badge.badge-ok::before{background:currentColor;box-shadow:none}
.badge.badge-wait,.badge.badge-plain{color:#666b65;background:#eeefeb;border-color:#d6d8d0}
.badge.badge-warn{color:#8b443c;background:#f4e7e2;border-color:#dfbeb4}
.badge-button:hover .badge{border-color:currentColor;color:inherit}