@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=swap");

/* Factify components. Values come from tokens.css; nothing here redefines a token. */
body{margin:0;background:var(--surface-page);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.fx-pad{padding:20px}
.fx-row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.fx-stack{display:grid;gap:var(--space-3)}
.fx-label{font-family:var(--font-sans);font-size:12px;line-height:1.35;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.fx-label-s{font-family:var(--font-sans);font-size:11px;line-height:1.35;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.fx-display{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em}
/* grade classes come after .fx-display so they win on the same element */
.g10,.fx-display.g10{font-family:var(--font-grade10)}.g20,.fx-display.g20{font-family:var(--font-grade20)}.g35,.fx-display.g35{font-family:var(--font-grade35)}.g50,.fx-display.g50{font-family:var(--font-grade50)}.g70,.fx-display.g70{font-family:var(--font-grade70)}.g0{font-family:var(--font-display)}
.fx-ch{display:inline-block;text-align:center}

/* Icon: Material Symbols Sharp, weight 400 */
.fx-icon{font-family:"Material Symbols Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle}
.fx-icon--20{font-size:20px;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 20}
.fx-icon--40{font-size:40px;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 40}
.fx-icon--muted{color:var(--text-muted)}

/* Button */
.fx-btn{font-family:var(--font-sans);font-size:15px;line-height:1.2;font-weight:500;display:inline-flex;align-items:center;gap:var(--space-2);padding:13px 20px;border:1px solid transparent;border-radius:var(--radius-0);background:none;color:var(--text);cursor:pointer;text-decoration:none}
.fx-btn:focus-visible,.fx-input:focus-visible,.fx-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fx-btn--primary{background:var(--seal);color:var(--on-seal)}
.fx-btn--primary:hover{background:var(--seal-hover)}
.fx-btn--secondary{border-color:var(--line-strong)}
.fx-btn--secondary:hover{border-color:var(--text)}
.fx-btn--quiet{padding:4px 0;border:0;border-bottom:1px solid var(--line-strong);text-decoration:none}
.fx-btn--quiet:hover{border-bottom-color:var(--text)}
.fx-btn--s{font-size:14px;padding:9px 14px}
.fx-btn[disabled]{opacity:.45;cursor:not-allowed}

/* Status pill */
.fx-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border:1px solid var(--line-strong);background:var(--surface-raised);font-size:13px;line-height:1.3;font-weight:500;color:var(--text);border-radius:var(--radius-0)}
.fx-pill img{width:16px;height:16px;display:block}
.fx-pill--sealed{border-color:var(--gold);color:var(--gold-text)}

/* Rule card */
.fx-rule{position:relative;background:var(--surface-raised);border:1px solid var(--line);padding:var(--space-6);display:grid;gap:var(--space-3);align-content:start;min-height:180px}
.fx-rule__body{font-size:15px;line-height:1.45;max-width:30ch}
.fx-rule__foot{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-top:var(--space-2)}
.fx-rule__seal{position:absolute;right:16px;bottom:16px;width:64px;height:64px;image-rendering:pixelated}

/* Nav */
.fx-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:18px 24px;border-bottom:1px solid var(--line);background:var(--surface-page)}
.fx-nav__logo{height:28px;width:auto;display:block}
.fx-nav__links{display:flex;gap:var(--space-6);font-size:15px;font-weight:500}
.fx-link{color:var(--text-muted);text-decoration:none}
.fx-link:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.fx-link[aria-current="page"]{color:var(--text)}

/* Footer */
.fx-footer{background:var(--surface-page);color:var(--text);padding:40px 24px 28px;display:grid;gap:28px}
.fx-footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-6)}
.fx-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.fx-footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}

/* Table */
.fx-table{width:100%;border-collapse:collapse;background:var(--surface-raised);font-size:14px}
.fx-table th{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-strong)}
.fx-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.fx-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* Field */
.fx-field{display:grid;gap:6px;max-width:360px}
.fx-input{font-family:var(--font-sans);font-size:15px;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-0);background:var(--surface-raised);color:var(--text)}
.fx-input::placeholder{color:var(--text-muted)}
.fx-field__help{font-size:13px;color:var(--text-muted)}
.fx-field--error .fx-input{border-color:var(--seal)}
.fx-field--error .fx-field__help{color:var(--seal)}

/* Ink band */
.fx-band{background:var(--surface-page);color:var(--text);padding:48px 32px;display:grid;gap:28px;position:relative;overflow:hidden}
.fx-band__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);position:relative}
.fx-band__steps > div{background:var(--surface-page);padding:22px;display:grid;gap:8px}
.fx-band__steps p{font-size:14px;color:var(--text-muted);margin:0}
.fx-gold{color:var(--gold)}