/* 2026 site theme: dark studio look shared with the homepage, layered over styles.css,
   agency-page.css, app-page.css and home-2026.css through their own tokens. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/Geist-var-latin.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: 400 700; font-display: swap; src: url("/assets/fonts/Geist-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, 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: "Geist Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/GeistMono-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --t-bg: #f6f6f7; --t-surface: #ffffff; --t-surface-2: #eeeef0; --t-text: #0b0b0c; --t-muted: #55555c;
  --t-line: #dcdce0; --t-line-soft: #e6e6e9; --t-footer: #eeeef0; --t-nav: #3a3a40;
  --t-link: #c2410c; --t-link-hover: #9a3412;
  --t-header: rgba(255, 255, 255, 0.8); --t-glass-line: rgba(0, 0, 0, 0.1); --t-glass-hi: rgba(255, 255, 255, 0.7);
  --t-ghost-line: rgba(0, 0, 0, 0.28); --t-ink-80: rgba(11, 11, 12, 0.82); --t-ink-70: rgba(11, 11, 12, 0.72);
  --t-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); --t-mint: #e3f1ea;
  --ink-blue: #2b4f86; --ink-amber: #8a5a14; --ink-slate: #5b524c; --ink-emerald: #1f6b45;
  --ink-rose: #9f2a3c; --ink-purple: #5e3f80; --ink-cyan: #1d6470; --ink-teal: #1f5f52; --ink-orange: #b4400f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --t-bg: #060607; --t-surface: #0c0c0e; --t-surface-2: #151518; --t-text: #ededed; --t-muted: #a9a9ad;
  --t-line: #26262b; --t-line-soft: #1c1c20; --t-footer: #0a0a0c; --t-nav: #c2c2c2;
  --t-link: #ff8a5c; --t-link-hover: #ffb08f;
  --t-header: rgba(12, 12, 14, 0.74); --t-glass-line: rgba(255, 255, 255, 0.13); --t-glass-hi: rgba(255, 255, 255, 0.06);
  --t-ghost-line: rgba(255, 255, 255, 0.28); --t-ink-80: rgba(237, 237, 237, 0.82); --t-ink-70: rgba(237, 237, 237, 0.72);
  --t-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); --t-mint: #16231d;
  --ink-blue: #a9bfe0; --ink-amber: #f0c58a; --ink-slate: #cfc6c0; --ink-emerald: #9fd2b2;
  --ink-rose: #f0aab4; --ink-purple: #c9b8db; --ink-cyan: #a8d4da; --ink-teal: #a3cbbf; --ink-orange: #ffb08f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --t-bg: #060607; --t-surface: #0c0c0e; --t-surface-2: #151518; --t-text: #ededed; --t-muted: #a9a9ad;
  --t-line: #26262b; --t-line-soft: #1c1c20; --t-footer: #0a0a0c; --t-nav: #c2c2c2;
  --t-link: #ff8a5c; --t-link-hover: #ffb08f;
  --t-header: rgba(12, 12, 14, 0.74); --t-glass-line: rgba(255, 255, 255, 0.13); --t-glass-hi: rgba(255, 255, 255, 0.06);
  --t-ghost-line: rgba(255, 255, 255, 0.28); --t-ink-80: rgba(237, 237, 237, 0.82); --t-ink-70: rgba(237, 237, 237, 0.72);
  --t-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); --t-mint: #16231d;
  --ink-blue: #a9bfe0; --ink-amber: #f0c58a; --ink-slate: #cfc6c0; --ink-emerald: #9fd2b2;
  --ink-rose: #f0aab4; --ink-purple: #c9b8db; --ink-cyan: #a8d4da; --ink-teal: #a3cbbf; --ink-orange: #ffb08f;
}

:root, html {
  --brand-primary: #ff5a1f;
  --brand-primary-soft: var(--t-link);
  --brand-cta: #ff5a1f;
  --bg: var(--t-bg);
  --surface: var(--t-surface);
  --surface-muted: var(--t-surface-2);
  --text: var(--t-text);
  --text-muted: var(--t-muted);
  --border: var(--t-line);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--t-shadow);
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* home-2026.css tokens (training page) */
  --page: var(--t-bg);
  --ink: var(--t-text);
  --ink-80: var(--t-ink-80);
  --ink-70: var(--t-ink-70);
  --muted: var(--t-muted);
  --label: var(--t-muted);
  --accent: var(--t-link);
  --rust: #ff5a1f;
  --rust-dark: #e2480f;
  --rule: var(--t-glass-line);
  --slot: var(--t-surface-2);
  --radius: 2px;
}
html { background: var(--t-bg); }
body { font-family: var(--font-sans); background: var(--t-bg); color: var(--text); letter-spacing: -0.005em; }
::selection { background: #ff5a1f; color: #000; }
:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #ff5a1f; outline-offset: 3px; border-radius: 0; }

h1, h2, h3 { font-family: var(--font-sans); letter-spacing: -0.03em; }
h1 { font-weight: 500; }
h2 { font-weight: 500; }
main a:not([class]), .policy-page a:not([class]), article a:not([class]) { color: var(--t-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
main a:not([class]):hover { color: var(--t-link-hover); }

/* header: floating bar like the homepage */
.site-header {
  position: sticky; top: 12px; z-index: 40; margin: 12px auto 0; width: min(1100px, calc(100% - 24px));
  background: var(--t-header); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--t-glass-line); box-shadow: inset 0 1px 0 var(--t-glass-hi);
}
.site-header .header-row, .site-header .header-inner { padding-top: 6px; padding-bottom: 6px; }
.brand-logo { display: none !important; }
.brand-word, .brand { font-size: 22px; font-weight: 600; letter-spacing: -0.04em; color: var(--t-text); }
.brand-word::after { content: "."; color: #ff5a1f; }
.nav a, .main-nav a { color: var(--t-nav); border-radius: 0; font-size: 14px; font-weight: 600; }
.nav a:hover, .main-nav a:hover { color: var(--t-text); background: transparent; }
.nav .nav-cta, .header-inner .btn { background: #ff5a1f; color: #000 !important; border: 1px solid #ff5a1f; box-shadow: none; border-radius: 0; font-weight: 700; }
.nav .nav-cta:hover { background: #000; color: #ff5a1f !important; }

/* buttons */
.btn { border-radius: 0 !important; font-weight: 700; letter-spacing: -0.01em; box-shadow: none !important; transition: background-color .2s, color .2s, transform .2s cubic-bezier(.16, 1, .3, 1); }
.btn-primary { background: #ff5a1f !important; color: #000 !important; border: 1px solid #ff5a1f !important; }
.btn-primary:hover { background: #000 !important; color: #ff5a1f !important; }
.btn-ghost { background: transparent !important; color: var(--t-text) !important; border: 1px solid var(--t-ghost-line) !important; }
.btn-ghost:hover { border-color: #ff5a1f !important; color: #ff5a1f !important; }
.btn:active { transform: scale(.98); }

/* hero areas */
.hero::before, .app-hero::before, .agency-hero::before { background: radial-gradient(60% 80% at 80% 0%, rgba(255, 90, 31, 0.10), transparent 70%) !important; }
.hero-title, .agency-hero h1, .app-hero-text h1, .policy-page h1 { font-size: clamp(2.2rem, 5vw, 4.4rem) !important; line-height: 1 !important; letter-spacing: -0.045em !important; font-weight: 500 !important; text-wrap: balance; }
.eyebrow, .eyebrow-inline, .pill { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }

/* cards and panels: hairline frames with corner ticks */
.package-card, .faq-block, .process-card, .service-item, .proof-item, .metric, .principle, .audit-panel,
.home-cta-inner, .agency-summary, .feature-grid li, .faq-item, .code-sample, .hero-service, .policy-card,
.app-card, .tile, .bento > *, .apps-grid > *, .post-card, .article-card {
  background: var(--t-surface) !important; border: 1px solid var(--t-line) !important; border-radius: 2px !important; box-shadow: none !important; position: relative;
}
.package-card::after, .faq-block::after, .process-card::after, .agency-summary::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; pointer-events: none;
  border-right: 1px solid var(--t-text); border-bottom: 1px solid var(--t-text);
}
.package-card:hover, .feature-grid li:hover, .faq-item:hover, .service-item:hover, .bento > *:hover { border-color: #ff5a1f !important; }
.package-price { font-family: var(--font-mono); color: var(--t-link) !important; }

/* sections */
.agency-section, .app-features, .app-faq, .app-policies { border-top: 1px solid var(--t-line-soft); }
.section-head h2, .agency-section h2, .app-features h2, .app-faq h2 { font-size: clamp(1.7rem, 3.4vw, 2.8rem) !important; letter-spacing: -0.035em !important; }

/* tables (pricing) */
table { border-color: var(--t-line) !important; }
th, td { border-color: var(--t-line) !important; }

/* footer */
.site-footer { background: var(--t-footer) !important; border-top: 1px solid var(--t-line-soft) !important; }
.footer-nav a, .footer-links a { border-radius: 0 !important; color: var(--t-muted) !important; }
.footer-nav a:hover, .footer-links a:hover { color: #ff5a1f !important; background: transparent !important; }

/* motion layer hooks (site-motion.js) */
.sm .sm-hide { opacity: 0; }
.sl { padding-bottom: 0.08em; }
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; background: #ff5a1f; transform: scaleX(0); transform-origin: left; z-index: 60; pointer-events: none; }

@media (max-width: 760px) {
  .site-header { top: 8px; margin-top: 8px; width: calc(100% - 16px); }
}

.brand:not(:has(.brand-word)):not(:has(span))::before { content: "trei"; }
.brand:not(:has(.brand-word))::after { content: "."; color: #ff5a1f; }
.brand > span:not(.brand-word) { color: var(--t-text); }
.article-hero { background: linear-gradient(180deg, var(--t-surface) 0%, var(--bg) 100%) !important; }
html.article-page, html .article-page { --article-soft: var(--t-surface-2); --article-border: var(--t-line); --article-green: var(--t-text); --article-blue: var(--t-link); }

html.mfamily-page { --family-soft: var(--t-surface); --family-border: var(--t-line); --family-ink: var(--t-text); --family-muted: var(--t-muted); --family-mint: var(--t-mint); }
html.mfamily-page .family-policy-links a, html.mfamily-page .family-final, html.mfamily-page .family-section.alt, html.mfamily-page .family-feature-card, html.mfamily-page .family-use-card, html.mfamily-page .family-trust-list li { background: var(--t-surface); color: var(--t-text); }
html.mmoney-page { --mmoney-muted: var(--t-muted); --mmoney-gold: #8a5a14; --mmoney-ink: var(--t-text); --mmoney-surface: var(--t-surface); --mmoney-soft: var(--t-surface-2); --mmoney-border: var(--t-line); }
html.mmoney-page, html.mmoney-page body { background: var(--t-bg); }
html.mmoney-page .mmoney-note, html.mmoney-page .mmoney-note-list li, html.mmoney-page .mmoney-compliance-card, html.mmoney-page .mmoney-guide-card { background: var(--t-surface); color: var(--t-text); }

:root { --brand: var(--t-link); --sans: var(--font-sans); --mono: var(--font-mono); }

.theme-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; margin: 0 4px; background: transparent; color: var(--t-nav); border: 1px solid var(--t-ghost-line); border-radius: 0; font-family: var(--font-mono, var(--mono)); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.theme-toggle:hover { color: var(--t-text); border-color: #ff5a1f; }
.theme-toggle-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.theme-toggle[data-mode="auto"] .theme-toggle-dot { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-toggle[data-mode="dark"] .theme-toggle-dot { background: currentColor; }
@media (max-width: 640px) { .theme-toggle { min-height: 44px; min-width: 44px; justify-content: center; padding: 0; } .theme-toggle-label { display: none; } }
.site-header .header-row { gap: 8px; }
.site-header .brand { flex: none; }
.site-header .theme-toggle { flex: none; }
.brand:not(:has(.brand-word)) { gap: 0; }
@media (max-width: 960px) {
  .site-header .nav { flex: 0 1 auto; min-width: 0; max-width: none; margin-left: auto; }
}
@media (max-width: 560px) {
  .site-header .nav:has(.nav-cta) a:not(.nav-cta) { display: none; }
}
.site-header .brand-word { display: inline !important; }
.site-header .brand-word, .site-header .brand > span:not(.brand-word) { text-transform: lowercase; }