/* `hidden` must win over the component rules below (e.g. .signup { display:flex }), or the closed
   panel and the form both show. */
[hidden] { display: none !important; }

/* Page layer for the Orion signup page, in Orion's look (tokens.css): a warm white canvas, white
   cards, coral for actions, and Orion navy for the enterprise band, the same navy as the app icon.
   Everything here uses the tokens; the few literal colours are the sign-in screen's own. */

html { background: var(--outer); }
body { margin: 0; padding: var(--s2); background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--paper-2) 58%, var(--outer) 100%) fixed; }
@media (max-width: 640px) { body { padding: 0; } .shell { border-radius: 0; } }

/* The card shell: white on the warm canvas, with the sign-in card's soft coral shadow. */
.shell { background: var(--paper); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 18px 50px rgba(200,67,58,.10), 0 2px 8px rgba(0,0,0,.05); }

/* Orion mark (the app icon, rendered from orion-store-assets/graphics/icon/icon-1024.png) + name. */
.orion-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--tx-on-light); }
.orion-brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 3px 10px rgba(11,30,45,.22); }
.orion-brand span { font-family: var(--ff-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }

/* Header: static, white with a hairline, like the app's own header. */
.nav-bar { background: var(--paper); color: var(--tx-on-light); border-bottom: 1px solid var(--line-light); }
.nav-bar .nav-inner { flex-wrap: wrap; }
.nav-quiet { display: flex; gap: var(--s3); margin-left: auto; }
.nav-quiet a { color: var(--tx-mid); font-size: .92rem; }
.nav-quiet a:hover { color: var(--tx-on-light); }
@media (max-width: 480px) { .nav-quiet { display: none; } }

/* Buttons in Orion's coral (the sign-in button's gradient, deepened so white text passes AA). */
.btn-primary { background: linear-gradient(180deg, #dd4a36, var(--accent)); color: #fff; box-shadow: 0 4px 12px rgba(232,80,63,.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232,80,63,.34); }
.btn-quiet { border: 1px solid rgba(0,0,0,.16); color: var(--tx-on-light); background: var(--paper); }
.btn-quiet:hover { border-color: rgba(0,0,0,.3); }
.nav-cta { padding: 10px 18px; min-height: 40px; font-size: .9rem; }

/* Hero: the sign-in screen's warm white. */
.sec-hero { background: radial-gradient(120% 120% at 50% 0%, #ffffff 0%, var(--paper-2) 58%, #f3ece9 100%); color: var(--tx-on-light); }
.hero { padding-top: var(--s7); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s6); align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s5); } }
.sec-hero .kicker { color: var(--accent); }
.hero-copy h1 { color: var(--tx-on-light); margin: var(--s2) 0 var(--s3); max-width: 18ch; }
.sec-hero .lead { color: var(--tx-mid); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s4); }
.facts li { font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-mid); background: var(--paper); border: 1px solid var(--line-light); border-radius: 999px; padding: 6px 12px; }
.facts li:first-child { color: var(--accent); border-color: rgba(232,80,63,.34); }

/* Signup card: the sign-in card. */
.signup { background: var(--paper); border: 1px solid rgba(0,0,0,.08); border-radius: 20px; padding: var(--s4); display: flex; flex-direction: column; gap: 10px; color: var(--tx-on-light);
  box-shadow: 0 18px 50px rgba(200,67,58,.12), 0 2px 8px rgba(0,0,0,.05); }
.signup h2 { color: var(--tx-on-light); }
.form-note { color: var(--tx-mid); font-size: .92rem; margin-bottom: var(--s1); }
.signup label { font-size: .86rem; color: var(--tx-mid); }
.signup .opt { color: var(--tx-mid); opacity: .8; }
.signup input[type=email], .signup input[type=text] {
  font: inherit; font-size: 1rem; color: var(--tx-on-light); background: #faf8f7;
  border: 1px solid rgba(0,0,0,.14); border-radius: 12px; padding: 12px 14px; min-height: 44px;
}
.signup input[type=email]:focus, .signup input[type=text]:focus { border-color: var(--accent-fill); background: #fff; }
.signup input:focus-visible, .btn:focus-visible, .linklike:focus-visible, summary:focus-visible, .nav-quiet a:focus-visible, .orion-brand:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.signup .check { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; line-height: 1.45; margin-top: var(--s1); }
.signup .check input { margin-top: 3px; accent-color: var(--accent-fill); }
.signup .check a { text-decoration: underline; }
.signup .btn { justify-content: center; margin-top: var(--s1); border-radius: 12px; }
.signup .btn[disabled] { opacity: .6; cursor: progress; }
.form-status { font-size: .9rem; min-height: 1.4em; }
.form-status.ok { color: #0b7a57; }
.form-status.err { color: var(--accent); }
.signup .micro { margin-top: 0; color: var(--tx-mid); }

/* Sections */
.section h2.aj-display { margin: var(--s2) 0 var(--s3); max-width: 22ch; }
.sec-ink h2.aj-display, .sec-ink h3.aj-display { color: var(--tx-on-dark); }
.sec-paper .kicker, .sec-paper-2 .kicker { color: var(--accent); }
/* The dark band is the app icon's own gradient. */
.sec-ink { background: linear-gradient(145deg, var(--ink-2), var(--ink)); }
.sec-ink .kicker { color: var(--accent-glow); }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); }
@media (max-width: 800px) { .cols3 { grid-template-columns: 1fr; } }
.col { border-top: 1px solid var(--line-light); padding-top: var(--s3); }
.col h3 { margin: var(--s1) 0; }
.col p { color: var(--tx-mid); }
.mono-i { font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .1em; }

.byok { margin-top: var(--s6); background: var(--paper-2); border: 1px solid var(--line-light); border-radius: 18px; padding: var(--s4); }
.byok h3 { margin-bottom: var(--s2); }
.byok ol { list-style: decimal; padding-left: 1.3em; display: grid; gap: var(--s1); color: var(--tx-on-light); }
.byok p { margin-top: var(--s2); color: var(--tx-mid); }

/* Compare table (components.css .dtable supplies borders on ink) */
.dtable-wrap { overflow-x: auto; margin-top: var(--s4); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line-dark); vertical-align: top; font-size: .94rem; }
.compare thead th { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.compare tbody th { font-weight: 600; color: var(--tx-on-dark); width: 18%; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }

/* FAQ */
.faq { margin-top: var(--s4); display: grid; }
.faq details { border-bottom: 1px solid var(--line-light); padding: var(--s3) 0; }
.faq summary { cursor: pointer; font-family: var(--ff-display); font-size: 1.2rem; color: var(--tx-on-light); list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--ff-mono); color: var(--tx-mid); }
.faq details[open] summary::after { content: "−"; color: var(--accent); }
.faq details p { color: var(--tx-mid); margin-top: var(--s2); max-width: 62ch; }

/* Footer: light, Orion first; AJ Projects only as the small creator credit. */
.footer.orion-foot { background: var(--paper); color: var(--tx-on-light); border-top: 1px solid var(--line-light); padding: var(--s6) 0 var(--s4); }
.orion-foot .footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.orion-foot .footer-top p { color: var(--tx-mid); font-size: .92rem; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); }
@media (max-width: 700px) { .footer-links { grid-template-columns: 1fr; } }
.orion-foot h4 { color: var(--tx-mid); }
.orion-foot a, .orion-foot li { color: var(--tx-mid); }
.orion-foot a:hover { color: var(--tx-on-light); }
.footer .sel { user-select: all; color: var(--tx-on-light); }
.orion-foot .footer-bottom { border-top-color: var(--line-light); color: var(--tx-mid); margin-top: var(--s5); }
.credit a { text-decoration: underline; text-underline-offset: 2px; }
.linklike { color: var(--tx-mid); font-size: .92rem; text-decoration: underline; }
.linklike:hover { color: var(--tx-on-light); }

/* Cookie consent */
.consent { position: fixed; left: var(--s2); right: var(--s2); bottom: var(--s2); max-width: 560px; margin: 0 auto; z-index: 200;
  background: var(--paper); color: var(--tx-on-light); border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: var(--s3);
  box-shadow: 0 20px 60px rgba(42,35,32,.22); font-family: var(--ff-body); }
.consent p { font-size: .92rem; margin: 0 0 var(--s2); }
.consent-actions { display: flex; gap: var(--s1); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { .btn, .btn .arr { transition: none; } }

/* The /legal/ holding page (no inline styles: the CSP is style-src 'self'). */
.legal-holding { max-width: 44rem; padding: 4rem 16px; color: var(--tx-on-light); font-family: var(--ff-body); line-height: 1.6; }
.legal-holding p { margin: 0 0 1rem; }
.legal-holding h1 { margin: 1.5rem 0 1rem; }