/* ==========================================================================
   CiteJury v5: the orb. Landing page, console and check pages.
   White page, #E5E7EB lines, #111827 text, #1D4ED8 for actions. Verdict
   colours only ever mean a verdict. Loaded after citejury.css.
   ========================================================================== */
:root { --g1: #111827; --g2: #374151; --g3: #6B7280; --g4: #9CA3AF; --l1: #E5E7EB; --l2: #EEF0F3; --p1: #F9FAFB; --p2: #F3F4F6; }
.mono5 { font-family: var(--mono); }
.eyebrow5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--g3); }
.pill5 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.pill5.v-ok, .pill5.v-info { background: #DCFCE7; color: #15803D; } .pill5.v-bad { background: #FEE2E2; color: #B91C1C; }
.pill5.v-warn { background: #FEF3C7; color: #B45309; } .pill5.v-none { background: #EEF0F4; color: #4B5563; } .pill5.v-off { background: #F3F4F6; color: #6B7280; }
.glyph5 { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; flex: none; }
.glyph5.v-ok, .glyph5.v-info { background: #DCFCE7; color: #15803D; } .glyph5.v-bad { background: #FEE2E2; color: #B91C1C; }
.glyph5.v-warn { background: #FEF3C7; color: #B45309; } .glyph5.v-none, .glyph5.v-off { background: #EEF0F4; color: #4B5563; }
.btn5 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--l1); background: #fff; color: var(--g1); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn5:hover { background: var(--p2); color: var(--g1); text-decoration: none; }
.btn5.pri { background: var(--brand); border-color: var(--brand); color: #fff; } .btn5.pri:hover { background: var(--brand-hover); color: #fff; }
.btn5.quiet { border-color: transparent; background: transparent; } .btn5.quiet:hover { background: var(--p2); }
.btn5.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn5:disabled { background: var(--l1); border-color: var(--l1); color: var(--g4); cursor: default; }
.fav5 { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; overflow: hidden; font-size: 11px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(17,24,39,.08); background: #fff; flex: none; }
.fav5 img { display: block; width: 16px; height: 16px; object-fit: contain; }
.fav5 b { display: none; } .fav5.fail img { display: none; } .fav5.fail b { display: inline; }
.ai5 { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--l1); color: var(--g1); flex: none; }
.ai5 svg { width: 17px; height: 17px; display: block; } .ai5.letter { font-size: 12px; font-weight: 700; background: #E0E7FF; color: #3730A3; border-color: #E0E7FF; }
@keyframes cj-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cj-pop { from { opacity: 0; transform: translate(-50%,-50%) scale(.7); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes cj-pop2 { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes cj-blink { 50% { opacity: .35; } }
@keyframes cj-ring { 0% { box-shadow: 0 0 0 0 rgba(29,78,216,.35); } 100% { box-shadow: 0 0 0 14px rgba(29,78,216,0); } }
@keyframes cj-marquee { to { transform: translateX(-50%); } }
@keyframes cj-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Site header and footer (marketing) ---------- */
.h5 { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid #E6E9EF; color: var(--ink); }
.h5-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 36px; }
.h5-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; flex: none; font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.h5-brand:hover { text-decoration: none; color: var(--ink); } .h5-brand svg { width: 22px; height: 22px; }
.h5-nav { flex: 1; min-width: 0; height: 64px; display: flex; align-items: center; gap: 28px; }
.h5-nav > a, .h5-nav > details > summary { font-size: 14.5px; color: #334155; white-space: nowrap; text-decoration: none; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 5px; height: 64px; }
.h5-nav > a:hover, .h5-nav > details > summary:hover, .h5-nav [aria-current] { color: var(--ink); text-decoration: none; }
.h5-nav details { position: static; } .h5-nav summary::-webkit-details-marker { display: none; }
.h5-nav summary .i { width: 12px; height: 12px; transition: transform .15s; } .h5-nav details[open] summary .i { transform: rotate(180deg); }
.h5-mega { position: absolute; left: 0; right: 0; top: 64px; background: #fff; border-bottom: 1px solid #E6E9EF; box-shadow: 0 24px 40px -24px rgba(15,23,42,.25); }
.h5-mega-in { max-width: 1200px; margin: 0 auto; padding: 24px 24px 26px; display: flex; flex-wrap: wrap; gap: 24px 48px; }
.h5-mega-col { flex: 1 1 240px; min-width: 0; } .h5-mega-col p { margin: 0 0 8px; }
.h5-mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }
.h5-mega-col li a { display: flex; align-items: center; gap: 6px; padding: 7px 8px; margin: 0 -8px; border-radius: 7px; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.h5-mega-col li a:hover { background: #F4F6FA; }
.h5-mega-card { flex: 0 1 240px; min-width: 200px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: #F6F8FB; }
.h5-mega-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #4B5563; } .h5-mega-card p:first-child { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.h5-mega-card a { margin-top: auto; font-size: 14px; font-weight: 500; }
.h5-end { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.h5-signin { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; font-size: 14.5px; font-weight: 500; color: var(--ink); border-radius: 8px; text-decoration: none; }
.h5-signin:hover { background: #F4F6FA; text-decoration: none; color: var(--ink); }
.h5-start { height: 38px; padding: 0 15px; display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 500; color: #fff; background: var(--brand); border-radius: 8px; white-space: nowrap; text-decoration: none; }
.h5-start:hover { filter: brightness(.88); color: #fff; text-decoration: none; }
.h5-menu { display: none; } .h5-menu summary { list-style: none; width: 40px; height: 38px; border: 1px solid #D3D8E0; border-radius: 8px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.h5-menu summary::-webkit-details-marker { display: none; } .h5-menu summary span { width: 16px; height: 1.8px; border-radius: 1px; background: var(--ink); }
.h5-mob { position: absolute; left: 0; right: 0; top: 64px; display: flex; flex-direction: column; padding: 8px 24px 18px; border-top: 1px solid #E6E9EF; background: #fff; box-shadow: 0 24px 40px -24px rgba(15,23,42,.25); }
.h5-mob a, .h5-mob button { padding: 12px 0; font-size: 16px; color: var(--ink); border: 0; border-bottom: 1px solid #EEF0F4; text-decoration: none; background: none; text-align: left; cursor: pointer; }
.h5-mob a:last-child { border-bottom: 0; color: var(--brand); font-weight: 500; }
@media (max-width: 900px) { .h5-nav { display: none; } .h5-menu { display: block; } .h5-in { gap: 16px; } }
@media (max-width: 520px) { .h5-signin { display: none; } }
.f5 { border-top: 1px solid #E6E9EF; padding: 56px 0 44px; background: #fff; color: var(--ink); }
.f5-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 40px 48px; }
.f5-brand { flex: 1.4 1 260px; max-width: 340px; } .f5-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: #4B5563; }
.f5-brand .xs { margin-top: 18px; font-size: 13px; line-height: 1.7; color: var(--g3); } .f5-brand .xs a { color: var(--g3); } .f5-brand .xs a:hover { color: var(--ink); }
.f5-col { flex: 1 1 170px; display: flex; flex-direction: column; gap: 9px; }
.f5-col p { margin: 0 0 4px; font-size: 13px; font-weight: 600; } .f5-col a, .f5-col button { font-size: 14px; color: #4B5563; text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.f5-col a:hover, .f5-col button:hover { color: var(--ink); text-decoration: none; }
.f5-word { max-width: 1200px; margin: 56px auto -40px; padding: 0 24px; overflow: hidden; }
.f5-word p { margin: 0; font-size: clamp(72px, 16.5vw, 290px); font-weight: 600; letter-spacing: -.06em; line-height: .85; color: rgba(28,25,21,.06); white-space: nowrap; user-select: none; text-align: center; }

/* ---------- Landing page ---------- */
body.landing5 { background: #fff; color: var(--g1); }
.l5 { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.l5-gap { margin-top: clamp(96px, 12vw, 160px); }
.l5-h2 { margin: 0; text-align: center; font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; color: var(--g1); text-wrap: balance; }
.l5-h2 em, .l5-h1 em, .l5-h3 em { font-style: normal; color: var(--brand); }
.l5-sub { margin: 16px auto 0; text-align: center; font-size: 15.5px; line-height: 1.55; color: var(--g2); max-width: 58ch; text-wrap: pretty; }
.hero5 { padding-top: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px 48px; align-items: center; }
@media (max-width: 980px) { .hero5 { grid-template-columns: minmax(0, 1fr); } }
.hero5-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.l5-h1 { margin: 0; font-size: clamp(38px, 4.6vw, 64px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; color: var(--g1); text-wrap: balance; }
.l5-h1.typed { min-height: 2.1em; }
.l5-h1 .caret { display: inline-block; width: 3px; height: .9em; margin-left: 4px; background: var(--brand); vertical-align: -0.08em; animation: cj-blink 1s steps(2) infinite; }
.hero5-tag { margin: -6px 0 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.02em; color: var(--g1); } .hero5-tag em { font-style: normal; color: var(--brand); }
.hero5-lede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--g2); max-width: 46ch; text-wrap: pretty; }
.ask5 { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--l1); box-shadow: 0 18px 40px -24px rgba(17,24,39,.25); transition: border-color .2s, box-shadow .2s; }
.ask5:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(29,78,216,.14), 0 18px 40px -24px rgba(17,24,39,.25); }
.ask5 input { flex: 1 1 220px; min-width: 0; height: 46px; border: 0; outline: none; font-family: var(--serif); font-size: 17px; color: var(--g1); padding: 0 12px; background: transparent; }
.ask5 .btn5 { height: 46px; padding: 0 20px; border-radius: 11px; font-size: 15px; }
.hero5-fine { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--g3); text-wrap: pretty; }
.by5 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--g3); }
.by5 span.ai { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 9px; border-radius: 999px; border: 1px solid var(--l1); background: #fff; color: var(--g1); font-weight: 500; }
.by5 span.ai svg { width: 15px; height: 15px; } .by5 span.ai small { font-weight: 400; color: var(--g3); font-size: inherit; }
.stage5 { position: relative; height: 580px; border-radius: 28px; border: 1px solid var(--l1); background-color: #fff; background-image: radial-gradient(rgba(17,24,39,.08) 1px, transparent 1.3px); background-size: 22px 22px; overflow: hidden; user-select: none; -webkit-user-select: none; box-shadow: 0 40px 80px -48px rgba(17,24,39,.25); }
@media (max-width: 980px) { .stage5 { height: 460px; } }
.stage5 canvas, .orb-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.st5-feed { position: absolute; left: 20px; top: 18px; display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--g3); pointer-events: none; max-width: 60%; }
.st5-feed b { display: flex; align-items: center; gap: 8px; color: var(--g1); font-weight: 500; } .st5-feed i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: cj-blink 1.2s ease-in-out infinite; }
.st5-feed.done i { animation: none; }
.st5-corner { position: absolute; right: 20px; top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g3); pointer-events: none; }
.st5-corner.bottom { top: auto; bottom: 24px; color: var(--g4); }
.st5-centre { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transition: top .7s cubic-bezier(.2,.8,.2,1); }
.st5-claim { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: var(--cw, 360px); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px; border-radius: 40px; background: radial-gradient(closest-side, rgba(255,255,255,.97), rgba(255,255,255,.86) 62%, rgba(255,255,255,0)); }
.st5-claim p.q { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--g1); text-wrap: pretty; }
.st5-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; animation: cj-in .4s ease both; }
.st5-parts span { padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--l1); font-size: 11px; color: var(--g2); }
.st5-status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--g1); }
.st5-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: cj-blink 1.2s ease-in-out infinite; }
.st5-verdict { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.st5-verdict .pill5 { animation: cj-pop2 .35s ease both; } .st5-verdict p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--g1); animation: cj-in .4s .1s ease both; }
.st5-verdict small { font-size: 12px; color: var(--g3); animation: cj-in .4s .2s ease both; } .st5-verdict a { pointer-events: auto; font-size: 12.5px; font-weight: 500; animation: cj-in .4s .3s ease both; }
.ring5 { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; animation: cj-pop .4s ease both; pointer-events: none; transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1); }
.ring5 .av { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--l1); color: var(--g1); font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px -10px rgba(17,24,39,.35); }
.ring5 .av svg { width: 20px; height: 20px; display: block; } .ring5 .av.jev { background: #E0E7FF; color: #3730A3; border-color: #E0E7FF; }
.ring5 .av.wait { animation: cj-ring 1.4s ease-out infinite; }
.ring5 .vote { position: absolute; right: -6px; bottom: -6px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; border: 2px solid #fff; box-sizing: content-box; animation: cj-pop2 .3s ease both; }
.ring5 .lbl { font-size: 11px; font-weight: 500; color: var(--g2); white-space: nowrap; }
.st5-log { position: absolute; left: 20px; bottom: 20px; width: min(300px, 46%); display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 11px; line-height: 1.45; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
.st5-log div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; } .st5-log .t { color: var(--g4); } .st5-log .m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g2); }
.st5-picks { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 6px; }
.st5-picks button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--l1); background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.st5-picks button.on { color: #fff; }
.hero5-cap { margin: 0; text-align: center; font-size: 13px; color: var(--g3); }
.how5 { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.how5 li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--p1); border: 1px solid var(--l1); }
.how5 .n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--g1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; }
.how5 li:last-child .n { background: var(--brand); } .how5 strong { display: block; font-size: 15.5px; font-weight: 600; } .how5 span.d { display: block; font-size: 13.5px; line-height: 1.45; color: var(--g2); }
.cards5 { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.rc5 { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--l1); color: var(--g1); box-shadow: 0 24px 50px -36px rgba(17,24,39,.3); transition: border-color .2s; text-decoration: none; }
.rc5:hover { border-color: var(--brand); color: var(--g1); text-decoration: none; }
.rc5 .q { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--g2); text-wrap: pretty; }
.rc5 .head { margin: 0; font-size: 15.5px; line-height: 1.5; font-weight: 500; }
.rc5 .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .rc5 .row small { font-size: 13px; color: var(--g3); }
.safe5 { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 11px 14px; }
.safe5 .eyebrow5 { color: #15803D; } .safe5 p { margin: 5px 0 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--g1); text-wrap: pretty; }
.rc5 .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--l2); font-family: var(--mono); font-size: 11px; color: var(--g3); }
.rc5 .foot .jury { display: flex; gap: 6px; }
.minij { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--l1); color: var(--g1); }
.minij svg { width: 14px; height: 14px; display: block; } .minij i { position: absolute; right: -5px; bottom: -5px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 8px; font-weight: 700; font-style: normal; border: 2px solid #fff; box-sizing: content-box; }
.quad5 { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; }
@media (max-width: 760px) { .quad5 { grid-template-columns: 1fr; } }
.quad5 > div { background: var(--p2); border-radius: 22px; padding: 22px 24px; min-height: 200px; display: flex; flex-direction: column; }
.quad5 > div.on { background: #EFF6FF; border: 1px solid #DBEAFE; } .quad5 > div.on .eyebrow5 { color: var(--brand); }
.quad5 .mid { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 0; }
.quad5 .mid strong { font-size: 16px; font-weight: 500; } .quad5 .mid span { font-size: 13.5px; line-height: 1.5; color: var(--g2); max-width: 30ch; }
.quad5 .on .mid span { color: #1E3A8A; font-size: 14px; max-width: 34ch; } .quad5 .mid .logos { display: flex; align-items: center; gap: 12px; } .quad5 .mid .logos svg { width: 20px; height: 20px; }
.quad5 .mid .brandline { display: flex; align-items: center; gap: 9px; font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.catch5 { background: var(--p1); border: 1px solid var(--l1); border-radius: 26px; padding: 26px 30px 24px; display: flex; flex-direction: column; gap: 18px; min-height: 240px; }
.catch5.hi { background: #EFF6FF; border-color: #DBEAFE; }
.catch5 .was { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--g3); text-decoration: line-through; text-decoration-color: #B91C1C; text-decoration-thickness: 1.5px; }
.catch5 .now { margin: 8px 0 0; display: flex; gap: 10px; font-family: var(--serif); font-size: 21px; line-height: 1.38; color: var(--g1); } .catch5 .now b { font-family: var(--sans); font-weight: 400; color: var(--brand); flex: none; }
.catch5 .where { margin-top: auto; display: flex; flex-direction: column; gap: 2px; } .catch5 .where strong { font-size: 13px; font-weight: 600; } .catch5 .where span { font-size: 12.5px; color: var(--g3); }
.verd5 { background: var(--p1); border: 1px solid var(--l1); border-radius: 30px; padding: clamp(28px, 4.5vw, 56px); display: flex; flex-wrap: wrap; gap: 28px 56px; }
.verd5 .copy { flex: 1 1 280px; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.verd5 .copy h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; } .verd5 .copy p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--g2); }
.verd5 .grid { flex: 2 1 400px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.verd5 .grid > div { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--l1); font-size: 13.5px; line-height: 1.45; color: var(--g2); }
.verd5 .grid .pill5 { align-self: flex-start; font-size: 12.5px; padding: 3px 10px; }
.mq5 { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); overflow: hidden; }
.mq5-row { display: flex; width: max-content; gap: 12px; padding: 0 6px; animation: cj-marquee var(--dur, 72s) linear infinite; } .mq5-row.rev { animation-direction: reverse; } .mq5-row:hover { animation-play-state: paused; }
.mq5-row span.d { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 9px; border-radius: 999px; background: var(--p1); border: 1px solid var(--l1); white-space: nowrap; font-family: var(--mono); font-size: 12.5px; color: var(--g2); }
.who5 { margin-top: 48px; display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px); }
.who5-row { display: flex; flex-wrap: wrap; align-items: center; gap: 36px 56px; }
.who5-copy { flex: 1 1 300px; max-width: 420px; } .who5-copy .eyebrow5 { font-size: 11.5px; letter-spacing: .08em; } .who5-copy .eyebrow5 b { margin-right: 10px; font-weight: 500; }
.l5-h3 { margin: 14px 0 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.who5-copy p.sub { margin: 16px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--g2); } .who5-copy a.more { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 500; }
.who5-card { flex: 2 1 440px; min-width: 0; } .who5-card .box { background: #fff; border: 1px solid var(--l1); border-radius: 20px; overflow: hidden; box-shadow: 0 34px 70px -40px rgba(17,24,39,.3); }
.who5-card .bar { display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-bottom: 1px solid var(--l2); background: var(--p1); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--g3); }
.who5-card .bar i { width: 7px; height: 7px; border-radius: 50%; } .who5-card .bar .r { margin-left: auto; text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who5-card .q { margin: 0; padding: 18px 20px 0; font-family: var(--serif); font-size: 18px; line-height: 1.5; } .who5-card .row { padding: 14px 20px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--g2); }
.who5-card .head { margin: 10px 20px 0; font-size: 15.5px; line-height: 1.5; font-weight: 500; } .who5-card .safe5 { margin: 14px 20px 0; }
.who5-card .tiles { margin: 16px 20px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.tile5 { border: 1px solid var(--l1); background: var(--p1); border-radius: 9px; padding: 8px 10px 9px; min-width: 0; }
.tile5 .n { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; } .tile5 .n svg { width: 13px; height: 13px; flex: none; }
.tile5 .s { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; white-space: nowrap; } .tile5 .s b { font-weight: 700; }
.tile5.v-ok { background: #F0FDF4; border-color: #BBF7D0; } .tile5.v-ok .s { color: #15803D; } .tile5.v-bad { background: #FEF2F2; border-color: #FECACA; } .tile5.v-bad .s { color: #B91C1C; }
.tile5.v-none .s { color: var(--g3); } .tile5.deep { border-style: dashed; border-color: #D1D5DB; background: #fff; } .tile5.deep .s { color: var(--g4); } .tile5.deep .n svg { opacity: .55; }
.priv5 { background: var(--p1); border: 1px solid var(--l1); border-radius: 26px; padding: clamp(24px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 24px 56px; }
.priv5 h2 { margin: 0; flex: 1 1 220px; max-width: 300px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.priv5 div { flex: 2 1 380px; min-width: 0; display: flex; flex-direction: column; } .priv5 div p { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--l1); font-size: 17px; line-height: 1.5; } .priv5 div p:first-child { padding-top: 0; } .priv5 div a { margin-top: 16px; font-size: 14px; font-weight: 500; }
.faq5 { display: flex; flex-wrap: wrap; gap: 32px 72px; } .faq5 h2 { margin: 0; flex: 1 1 260px; max-width: 360px; font-size: clamp(40px, 4.6vw, 58px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.faq5 .list { flex: 2 1 460px; min-width: 0; } .faq5 .list > div { border-top: 1px solid var(--l1); } .faq5 details { border-bottom: 1px solid var(--l1); }
.faq5 summary { list-style: none; width: 100%; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--g1); }
.faq5 summary::-webkit-details-marker { display: none; } .faq5 summary:hover { color: var(--brand); }
.faq5 summary i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #D1D5DB; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; font-style: normal; color: var(--g2); transition: transform .25s ease; }
.faq5 details[open] summary i { transform: rotate(45deg); } .faq5 details p { margin: -4px 0 20px; font-size: 15px; line-height: 1.65; color: var(--g2); max-width: 62ch; }
.faq5 .all { display: inline-flex; align-items: center; margin-top: 20px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--p2); color: var(--g1); font-size: 13.5px; font-weight: 500; text-decoration: none; } .faq5 .all:hover { background: var(--l1); }
.cta5 { background: var(--brand); border-radius: 34px; padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px); text-align: center; }
.cta5 h2 { margin: 0; font-size: clamp(34px, 4.6vw, 58px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; color: #fff; text-wrap: balance; }
.cta5 .ask5 { margin: 32px auto 0; max-width: 640px; box-shadow: 0 24px 50px -24px rgba(17,24,39,.45); } .cta5 .ask5 .btn5 { background: var(--g1); border-color: var(--g1); } .cta5 .ask5 .btn5:hover { background: #1F2937; }
.cta5 p { margin: 18px 0 0; font-size: 14.5px; line-height: 1.5; color: #DBEAFE; } .cta5 p + p { margin-top: 8px; font-size: 13.5px; } .cta5 p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.price5 { margin-top: 44px; } .price5 .packs { margin-top: 0; }

/* ---------- Console and check pages (the app) ---------- */
body.orb-page { background: #fff; color: var(--g1); }
.ch5 { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--l1); background: #fff; position: relative; z-index: 8; }
.ch5 .brand5 { display: flex; align-items: center; gap: 10px; color: var(--g1); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .ch5 .brand5 svg { width: 28px; height: 28px; display: block; }
.ch5 .tag5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--g3); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--l1); }
.ch5 .end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ch5 .hb { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 9px; border: 0; background: transparent; color: var(--g1); font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; }
.ch5 .hb:hover, .ch5 .hb[aria-expanded="true"] { background: var(--p2); text-decoration: none; color: var(--g1); } .ch5 .hb .i { width: 16px; height: 16px; } .ch5 .hb .n { font-family: var(--mono); font-size: 11px; color: var(--g3); }
.ch5 .credits5 { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--l1); background: var(--p1); color: var(--g1); font-family: var(--mono); font-size: 11.5px; text-decoration: none; } .ch5 .credits5:hover { background: var(--p2); }
.ch5 .icon5 { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: var(--g1); text-decoration: none; background: none; border: 0; cursor: pointer; } .ch5 .icon5:hover { background: var(--p2); } .ch5 .icon5 .i { width: 18px; height: 18px; }
.ch5 .av5 { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #DBEAFE; color: #1E40AF; font-size: 12.5px; font-weight: 600; margin-left: 4px; text-decoration: none; }
.ch5 details.more5 { position: relative; } .ch5 details.more5 summary { list-style: none; } .ch5 details.more5 summary::-webkit-details-marker { display: none; }
.ch5 .more5-pop { position: absolute; right: 0; top: 40px; z-index: 20; width: 220px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--l1); box-shadow: 0 18px 40px -20px rgba(17,24,39,.45); display: flex; flex-direction: column; }
.ch5 .more5-pop a, .ch5 .more5-pop button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; border: 0; background: none; text-align: left; font-size: 13.5px; color: var(--g1); text-decoration: none; cursor: pointer; font-family: inherit; } .ch5 .more5-pop a:hover, .ch5 .more5-pop button:hover { background: var(--p2); }
.ch5 .more5-pop hr { border: 0; border-top: 1px solid var(--l2); margin: 4px 0; }
.orb-app { display: flex; flex-direction: column; height: calc(100vh - 0px); min-height: 560px; overflow: hidden; }
.orb-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: row; overflow: hidden; background-image: radial-gradient(rgba(17,24,39,.09) 1px, transparent 1.3px); background-size: 22px 22px; }
.orb-col { position: relative; z-index: 1; flex: 1 1 0%; min-width: 0; min-height: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
.orb-feed { position: absolute; left: 24px; top: 20px; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--g3); pointer-events: none; max-width: 46%; }
.orb-feed b { display: flex; align-items: center; gap: 8px; color: var(--g1); font-weight: 500; } .orb-feed i { width: 7px; height: 7px; border-radius: 50%; background: #15803D; animation: cj-blink 1.6s ease-in-out infinite; flex: none; } .orb-feed.run i { background: var(--brand); animation-duration: 1.2s; }
.orb-feed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orb-corner { position: absolute; right: 24px; top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g3); pointer-events: none; }
.orb-corner.bottom { top: auto; bottom: 24px; color: var(--g4); }
.orb-centre { position: absolute; left: 50%; top: 44%; width: 0; height: 0; transition: top .7s cubic-bezier(.2,.8,.2,1); }
.orb-app.is-running .orb-centre { top: 47%; }
.orb-box { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: var(--cw, 420px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 20px; border-radius: 40px; background: radial-gradient(closest-side, rgba(255,255,255,.97), rgba(255,255,255,.86) 62%, rgba(255,255,255,0)); }
.orb-input { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 22px 14px; border-radius: 22px; background: rgba(255,255,255,.95); border: 1.5px solid var(--l1); box-shadow: 0 18px 40px -24px rgba(17,24,39,.25); transition: border-color .2s, box-shadow .2s; pointer-events: auto; cursor: text; }
.orb-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(29,78,216,.14), 0 18px 40px -24px rgba(17,24,39,.3); }
.orb-input textarea { width: 100%; background: transparent; border: 0; outline: none; resize: none; text-align: center; font-family: var(--serif); font-size: 20px; line-height: 1.35; color: var(--g1); max-height: 200px; overflow-y: hidden; padding: 0; display: block; }
.orb-input textarea::placeholder { color: var(--g4); }
.orb-input .hint { font-size: 12.5px; color: var(--g4); }
.orb-att { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 10px; border-radius: 9px; background: #fff; border: 1px solid var(--l1); font-size: 12.5px; pointer-events: auto; } .orb-att .i { width: 13px; height: 13px; color: var(--g3); }
.orb-att button { display: flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--g3); font-size: 14px; line-height: 1; cursor: pointer; } .orb-att button:hover { background: var(--l1); }
.orb-claim { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.35; color: var(--g1); text-wrap: pretty; }
.orb-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; animation: cj-in .4s ease both; } .orb-parts span { padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--l1); font-size: 12px; color: var(--g2); }
.orb-status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g1); } .orb-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: cj-blink 1.2s ease-in-out infinite; }
.orb-centre .ring5 .av { width: 44px; height: 44px; font-size: 15px; } .orb-centre .ring5 .av svg { width: 22px; height: 22px; } .orb-centre .ring5 .vote { width: 21px; height: 21px; border-color: var(--p1); } .orb-centre .ring5 .lbl { font-size: 11.5px; }
.orb-log { position: absolute; left: 24px; bottom: 26px; width: min(340px, 42%); display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
.orb-log div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; } .orb-log .t { color: var(--g4); } .orb-log .m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g2); }
.orb-log .m.ok { color: #1D4ED8; } .orb-log .m.warn { color: #B45309; } .orb-log .m.sys { color: var(--g1); }
.orb-bin { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; background: #fff; border: 1px solid #FECACA; color: #B91C1C; font-family: var(--mono); font-size: 11.5px; box-shadow: 0 10px 24px -14px rgba(185,28,28,.45); animation: cj-in .3s ease both; }
.orb-bin .i { width: 15px; height: 15px; } .orb-bin b { font-weight: 700; }
.orb-bin.bump { animation: bin-bump .35s ease; } @keyframes bin-bump { 30% { transform: translateY(-50%) scale(1.12) rotate(-4deg); } 60% { transform: translateY(-50%) scale(.98) rotate(2deg); } 100% { transform: translateY(-50%); } }
.orb-app.is-result .orb-bin { top: 20px; right: 18px; transform: none; }
.orb-screen { position: absolute; right: 24px; bottom: 26px; width: min(300px, 38%); max-height: 46%; overflow: hidden; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.92); border: 1px solid var(--l1); box-shadow: 0 18px 40px -24px rgba(17,24,39,.35); animation: cj-in .3s ease both; }
.orb-screen .screen-list { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.scr5 { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; align-items: center; color: var(--g2); }
.scr5 .mk { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--l1); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.scr5.ok .mk { background: #DCFCE7; color: #15803D; border-color: #BBF7D0; } .scr5.off .mk { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; } .scr5.off span.t { text-decoration: line-through; color: var(--g4); }
.scr5 span.t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.orb-tools { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 48px); pointer-events: none; }
.orb-replays { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; pointer-events: auto; }
.orb-replays .eyebrow5 { margin-right: 4px; }
.rep5 { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--l1); background: rgba(255,255,255,.82); font-size: 12.5px; color: var(--g1); max-width: 260px; cursor: pointer; font-family: inherit; }
.rep5:hover { background: #fff; border-color: var(--g1); } .rep5 .glyph5 { width: 18px; height: 18px; font-size: 10px; } .rep5 span.t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.orb-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--l1); box-shadow: 0 18px 40px -24px rgba(17,24,39,.45); pointer-events: auto; }
.orb-bar .plus { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--g1); cursor: pointer; } .orb-bar .plus:hover, .orb-bar .plus[aria-expanded="true"] { background: var(--p2); } .orb-bar .plus .i { width: 18px; height: 18px; }
.tiers5 { display: flex; padding: 3px; border-radius: 999px; background: var(--p2); border: 1px solid var(--l1); }
.tiers5 label { cursor: pointer; } .tiers5 input { position: absolute; opacity: 0; pointer-events: none; }
.tiers5 span { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; color: var(--g2); }
.tiers5 input:checked + span { background: #fff; color: var(--g1); font-weight: 600; box-shadow: 0 1px 3px rgba(17,24,39,.12), 0 0 0 1px var(--l1); }
.tiers5.sm span { height: 24px; padding: 0 9px; font-size: 11.5px; }
.orb-bar .cost { font-family: var(--mono); font-size: 11.5px; color: var(--g3); white-space: nowrap; padding: 0 4px; }
.orb-bar .go { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 18px; border-radius: 999px; border: 0; background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s; font-family: inherit; } .orb-bar .go:hover { background: var(--brand-hover); }
.orb-bar .go:disabled { background: var(--l1); color: var(--g4); cursor: default; } .orb-bar .go .i { width: 15px; height: 15px; }
.orb-menu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 4; width: 260px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid var(--l1); box-shadow: 0 18px 40px -20px rgba(17,24,39,.45); display: flex; flex-direction: column; animation: cj-in .18s ease both; }
.orb-menu button { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 9px; border: 0; background: transparent; text-align: left; color: var(--g1); cursor: pointer; font-family: inherit; } .orb-menu button:hover { background: var(--p2); }
.orb-menu button b { font-size: 13.5px; font-weight: 500; } .orb-menu button small { font-size: 12px; color: var(--g3); }
.orb-fine { font-size: 12px; color: var(--g4); text-align: center; }
.orb-confirm { position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 5; width: min(640px, calc(100% - 48px)); background: #fff; border: 1px solid var(--l1); border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(17,24,39,.4); padding: 18px 20px; animation: cj-in .25s ease both; }
.orb-confirm h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; } .orb-confirm .help { font-size: 13px; color: var(--g3); }
.orb-confirm .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
.orb-confirm .choice { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--l1); background: var(--p1); text-align: left; cursor: pointer; font-family: inherit; color: var(--g1); } .orb-confirm .choice:hover { border-color: var(--brand); background: #fff; }
.orb-confirm .choice b { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .orb-confirm .choice b .i { width: 16px; height: 16px; } .orb-confirm .choice small { font-size: 12.5px; color: var(--g3); line-height: 1.4; }
.orb-confirm .rest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--g3); }
.orb-confirm .rest button { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--l1); background: #fff; font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--g1); } .orb-confirm .rest button:hover { border-color: var(--g1); }
.orb-flash { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--g1); color: #fff; font-size: 13.5px; box-shadow: 0 14px 30px -14px rgba(17,24,39,.6); animation: cj-in .2s ease both; }
.orb-flash.warn { background: #B45309; }
.drawer5 { position: absolute; top: 0; right: 0; bottom: 0; z-index: 7; width: min(340px, 92vw); display: flex; flex-direction: column; background: var(--p1); border-left: 1px solid var(--l1); transform: translateX(104%); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.drawer5.open { transform: none; box-shadow: -24px 0 60px -30px rgba(17,24,39,.45); }
.drawer5 .dh { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 10px 20px; } .drawer5 .dh h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.drawer5 .dh button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--g1); font-size: 18px; line-height: 1; cursor: pointer; } .drawer5 .dh button:hover { background: var(--l1); }
.drawer5 .tabs { display: flex; gap: 4px; padding: 0 12px 10px; } .drawer5 .tabs button { padding: 6px 12px; border-radius: 999px; border: 0; font-size: 13px; background: transparent; color: var(--g2); cursor: pointer; font-family: inherit; } .drawer5 .tabs button:hover { background: var(--l1); } .drawer5 .tabs button[aria-pressed="true"] { background: var(--p2); color: var(--g1); font-weight: 600; }
.drawer5 .list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 16px; } .drawer5 .list p.g { margin: 10px 12px 6px; }
.row5 { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; width: 100%; text-align: left; padding: 9px 10px; border-radius: 14px; border: 0; background: transparent; color: var(--g1); text-decoration: none; cursor: pointer; font-family: inherit; }
.row5:hover { background: var(--p2); text-decoration: none; color: var(--g1); } .row5.on { background: var(--p2); }
.row5 .glyph5 { grid-row: span 2; width: 36px; height: 36px; font-size: 14px; } .row5 .glyph5.run { animation: cj-blink 1.4s ease-in-out infinite; background: var(--p2); color: var(--g1); }
.row5 .t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row5 .w { font-size: 12px; color: var(--g3); white-space: nowrap; } .row5 .s { grid-column: 2 / span 2; font-size: 12.5px; color: var(--g3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row5.sm { grid-template-columns: 26px minmax(0, 1fr); gap: 1px 10px; padding: 7px 10px; border-radius: 12px; } .row5.sm .glyph5 { width: 26px; height: 26px; font-size: 11px; } .row5.sm .t { font-size: 13px; font-weight: 500; } .row5.sm .s { grid-column: 2; font-size: 11.5px; }
/* result layout: the answer column grows in, the orb shrinks to a side column */
.ans5 { position: relative; z-index: 2; flex: none; width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: rgba(249,250,251,.92); backdrop-filter: blur(12px); border-right: 1px solid var(--l1); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.orb-app.is-result .ans5 { width: calc(100% - max(300px, 25%)); } .orb-app.is-result .orb-col { flex: none; width: max(300px, 25%); }
.ans5-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ans5-in { width: 100%; padding: 28px 36px; display: flex; flex-direction: column; gap: 24px; opacity: 0; transition: opacity .45s .3s; } .orb-app.is-result .ans5-in { opacity: 1; }
.ans5-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--g3); }
.ans5-meta .proj { padding: 2px 8px; border-radius: 999px; background: #E0E7FF; color: #3730A3; letter-spacing: 0; text-transform: none; font-family: var(--sans); font-size: 12px; font-weight: 500; }
.ans5-claim { margin: 0; max-width: 880px; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--g2); text-wrap: pretty; }
.ans5-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
@media (max-width: 1180px) { .ans5-grid { grid-template-columns: minmax(0, 1fr); } }
.ans5-main, .ans5-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.vcard5 { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--l1); box-shadow: 0 24px 50px -36px rgba(17,24,39,.35); }
.vcard5 .top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .vcard5 .top .pill5 { font-size: 15px; padding: 6px 14px 6px 11px; } .vcard5 .top small { font-size: 13.5px; color: var(--g3); }
.vcard5 h2 { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.3; font-weight: 400; letter-spacing: -.01em; color: var(--g1); text-wrap: pretty; }
.vcard5 .detail { margin: -4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--g2); }
.vcard5 .safe5 { padding: 12px 14px; } .vcard5 .safe5 p { font-size: 15.5px; }
.vcard5 .override { display: flex; gap: 8px; font-size: 13px; color: var(--g2); background: var(--p2); border-radius: 10px; padding: 10px 12px; } .vcard5 .override .i { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.parts5 { display: flex; flex-direction: column; } .parts5 .eyebrow5 { padding-bottom: 6px; }
.parts5 .part { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--p2); }
.parts5 .part b { font-size: 14px; font-weight: 500; line-height: 1.45; display: block; } .parts5 .part span.why { font-size: 13px; line-height: 1.5; color: var(--g3); display: block; margin-top: 2px; }
.vcard5 .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding-top: 10px; border-top: 1px solid var(--p2); } .vcard5 .acts .vmeta { font-family: var(--mono); font-size: 11px; color: var(--g3); margin-right: auto; }
.sec5 { display: flex; flex-direction: column; gap: 4px; } .sec5 > .eyebrow5 { padding-bottom: 6px; display: flex; align-items: center; gap: 8px; } .sec5 > .eyebrow5 .i { width: 12px; height: 12px; color: var(--brand); }
.jur5 { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--l2); }
.jur5 .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .jur5 .name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; } .jur5 .name strong { font-weight: 600; } .jur5 .name .pill5 { font-size: 12px; padding: 2px 9px; } .jur5 .name .t { font-family: var(--mono); font-size: 11px; color: var(--g3); }
.jur5 .stood { margin: 0; font-size: 13px; font-style: italic; color: var(--g3); } .jur5 .txt { margin: 0; font-size: 14px; line-height: 1.55; color: var(--g1); text-wrap: pretty; }
.cites5 { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .cites5 .eyebrow5 { margin-right: 3px; font-size: 10.5px; letter-spacing: .06em; }
.cites5 .cite, .cites5 a.cite { padding: 2px 7px; border-radius: 6px; background: #EFF6FF; color: var(--brand); font-family: var(--mono); font-size: 11px; text-decoration: none; }
.fu5 { display: flex; gap: 12px; animation: cj-in .35s ease both; } .fu5 .av { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 600; flex: none; }
.fu5 .av.you { background: #DBEAFE; color: #1E40AF; } .fu5 .av.jev { background: #E0E7FF; color: #3730A3; }
.fu5 .b { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; } .fu5 .who { display: flex; align-items: baseline; gap: 8px; font-size: 13px; } .fu5 .who strong { font-weight: 600; } .fu5 .who .t { font-family: var(--mono); font-size: 11px; color: var(--g3); }
.fu5 .bubble { border-radius: 4px 16px 16px 16px; padding: 11px 14px; font-size: 14px; line-height: 1.55; color: var(--g1); text-wrap: pretty; } .fu5 .bubble.you { background: var(--p2); border: 1px solid var(--p2); } .fu5 .bubble.jev { background: #fff; border: 1px solid var(--l1); }
.ask5-foot { flex: none; padding: 12px 36px 18px; border-top: 1px solid var(--l2); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 40px; } @media (max-width: 1180px) { .ask5-foot { grid-template-columns: 1fr; } }
.ask5-foot form { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 7px 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--l1); transition: border-color .2s; } .ask5-foot form:focus-within { border-color: var(--brand); }
.ask5-foot input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 14px; color: var(--g1); }
.ask5-foot button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; cursor: pointer; } .ask5-foot button .i { width: 15px; height: 15px; } .ask5-foot button:disabled { background: var(--l1); color: var(--g4); }
.rev5 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--l2); } .rev5 .pill5 { font-size: 11.5px; padding: 2px 8px; white-space: nowrap; margin-top: 1px; } .rev5 p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--g1); text-wrap: pretty; }
.src5 { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--l2); } .src5 .fav5 { width: 26px; height: 26px; border-radius: 7px; }
.src5 .b { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .src5 .t { display: flex; align-items: baseline; gap: 7px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--g1); } .src5 .t .n { font-family: var(--mono); font-size: 11px; color: var(--g4); flex: none; } .src5 .t a { color: var(--g1); } .src5 .t a:hover { color: var(--brand); }
.src5 .m { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .src5 .m .d { font-family: var(--mono); font-size: 11px; color: var(--g3); } .src5 .m .pill5 { font-size: 11px; padding: 1px 8px; } .src5 .m .by { font-size: 12px; color: var(--g3); }
.src5 details { font-size: 13px; } .src5 details summary { cursor: pointer; color: var(--brand); font-size: 12.5px; list-style: none; } .src5 details summary::-webkit-details-marker { display: none; } .src5 blockquote { margin: 6px 0 0; padding: 8px 12px; border-left: 2px solid var(--l1); font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--g2); }
.src5 .flag { font-size: 12px; color: #B45309; } .src5.flash { animation: flash 1.2s ease; }
.setaside5 summary { cursor: pointer; font-size: 13px; color: var(--brand); padding: 10px 0; list-style: none; } .setaside5 summary::-webkit-details-marker { display: none; }
.setaside5 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--g2); } .setaside5 li { display: flex; justify-content: space-between; gap: 10px; } .setaside5 li span:last-child { color: var(--g3); white-space: nowrap; }
.stats5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .stats5 > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--l2); } .stats5 span { font-size: 12px; color: var(--g3); } .stats5 b { font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.trace5 summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .trace5 summary::-webkit-details-marker { display: none; } .trace5 summary i { display: inline-block; font-style: normal; transition: transform .2s; } .trace5[open] summary i { transform: rotate(90deg); }
.trace5 .log5 { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--p2); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; max-height: 360px; overflow: auto; }
.trace5 .log5 div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; } .trace5 .log5 .t { color: var(--g4); } .trace5 .log5 .m { color: var(--g2); word-break: break-word; }
.orb-panel { position: absolute; left: 0; right: 0; top: 53%; bottom: 0; display: none; flex-direction: column; gap: 12px; padding: 0 18px 18px; animation: cj-fade .5s .5s ease both; }
.orb-app.is-result .orb-panel { display: flex; }
.orb-panel .cap { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--g3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb-panel .past { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .orb-panel .past .eyebrow5 { padding: 4px 10px 6px; } .orb-panel .past .all { align-self: flex-start; margin: 4px 10px 0; padding: 0; border: 0; background: transparent; font-size: 12.5px; color: var(--brand); cursor: pointer; font-family: inherit; }
.qc5 { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid var(--l1); box-shadow: 0 18px 40px -24px rgba(17,24,39,.35); }
.qc5 .in { display: flex; align-items: center; gap: 6px; } .qc5 input { flex: 1; min-width: 0; height: 34px; border: 0; outline: none; background: transparent; font-size: 13.5px; color: var(--g1); padding: 0 4px; }
.qc5 .go { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; cursor: pointer; flex: none; } .qc5 .go .i { width: 15px; height: 15px; } .qc5 .go:disabled { background: var(--l1); color: var(--g4); }
.qc5 .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .qc5 .cost { font-family: var(--mono); font-size: 11px; color: var(--g3); white-space: nowrap; }
.pub5 { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; background: #EFF6FF; border: 1px solid #DBEAFE; } .pub5 strong { display: block; font-size: 15px; } .pub5 p { margin: 2px 0 0; font-size: 13.5px; color: var(--g2); }
.doccrumb5 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--g3); } .doccrumb5 a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } .doccrumb5 .nav { margin-left: auto; display: flex; gap: 6px; }
.fail5 { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--l1); } .fail5 .retry { display: flex; gap: 8px; flex-wrap: wrap; }
/* kind-specific bodies from checks/_result_*.html sit inside the main column */
.ans5-main .sec-title { font-size: 15px; font-weight: 600; margin: 4px 0 8px; } .ans5-main .card { border-radius: 16px; border-color: var(--l1); box-shadow: none; }
@media (max-width: 900px) {
  .orb-app { height: auto; min-height: 100vh; overflow: visible; } .orb-stage { flex-direction: column; min-height: 100vh; }
  .orb-app.is-result .orb-stage { flex-direction: column; } .orb-app.is-result .ans5 { order: 1; width: 100%; border-right: 0; } .orb-app.is-result .orb-col { order: 0; width: 100%; height: 300px; flex: none; }
  .orb-app:not(.is-result) .orb-col { min-height: 100vh; } .orb-panel { display: none !important; }
  .ans5-in { padding: 20px 16px; } .ask5-foot { padding: 12px 16px 16px; } .orb-box { --cw: calc(100vw - 40px) !important; } .orb-feed { max-width: 60%; } .orb-log { width: min(300px, 60%); }
}
@media (prefers-reduced-motion: reduce) { .mq5-row { animation: none; } }

/* ---------- Document pages in the v5 look ---------- */
.doc5 { max-width: 1000px; margin: 0 auto; padding: 28px 36px 60px; color: var(--g1); }
@media (max-width: 760px) { .doc5 { padding: 20px 16px 48px; } }
.doc5-steps { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.doc5-steps li { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--l1); background: var(--p1); font-size: 13px; color: var(--g3); }
.doc5-steps .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background: #fff; border: 1px solid var(--l1); color: var(--g3); }
.doc5-steps li.done { color: var(--g2); } .doc5-steps li.done .n { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; }
.doc5-steps li.now { background: #fff; border-color: var(--brand); color: var(--g1); font-weight: 500; box-shadow: 0 0 0 3px rgba(29,78,216,.12); } .doc5-steps li.now .n { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 760px) { .doc5-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc5 .crumbs { font-size: 13px; color: var(--g3); margin-bottom: 14px; }
.doc5 .doc-head { align-items: center; } .doc5 .doc-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #EFF6FF; color: var(--brand); } .doc5 .doc-icon .i { width: 22px; height: 22px; }
.doc5 .doc-name { font-size: 26px; font-weight: 600; letter-spacing: -.02em; } .doc5 .meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--g3); }
.doc5 .sec-title { font-size: 20px; font-weight: 600; letter-spacing: -.015em; } .doc5 .sec-head { margin: 32px 0 12px; }
.doc5 .help { color: var(--g3); }
.doc5 .card { border-radius: 18px; border: 1px solid var(--l1); box-shadow: 0 24px 50px -40px rgba(17,24,39,.3); background: #fff; }
.doc5 .btn { border-radius: 10px; font-weight: 500; } .doc5 .btn-primary { background: var(--brand); border-color: var(--brand); } .doc5 .btn-primary:hover { background: var(--brand-hover); }
.doc5 .btn-secondary { background: #fff; border-color: var(--l1); color: var(--g1); } .doc5 .btn-quiet { color: var(--brand); }
.doc5 .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--g3); background: var(--p2); border: 0; border-radius: 6px; padding: 2px 7px; }
.doc5 .callout { border-radius: 14px; } .doc5 .callout-ok { background: #F0FDF4; border-color: #BBF7D0; } .doc5 .callout-info { background: #EFF6FF; border-color: #DBEAFE; color: #1E3A8A; } .doc5 .callout-warn { background: #FFFBEB; border-color: #FDE68A; }
.doc5 .pick-row { padding: 18px 22px; border-top: 1px solid var(--l2); } .doc5 .pick-row input[type=checkbox] { width: 18px; height: 18px; border-radius: 5px; }
.doc5 .pick-claim { font-size: 17px; } .doc5 .pick-quote { font-size: 13px; color: var(--g3); }
.doc5 .pick-foot { border-radius: 16px; border-color: var(--l1); box-shadow: 0 -10px 30px -20px rgba(17,24,39,.25), 0 18px 40px -30px rgba(17,24,39,.3); padding: 10px 12px 10px 16px; gap: 12px; }
.doc5 .seg { padding: 3px; border-radius: 999px; background: var(--p2); border: 1px solid var(--l1); } .doc5 .seg span { border-radius: 999px; font-size: 12.5px; height: 26px; display: inline-flex; align-items: center; padding: 0 11px; color: var(--g2); }
.doc5 .seg input:checked + span { background: #fff; color: var(--g1); font-weight: 600; box-shadow: 0 1px 3px rgba(17,24,39,.12), 0 0 0 1px var(--l1); }
.doc5 .pick-count { font-size: 13.5px; color: var(--g2); } .doc5 .pick-foot .btn-primary { border-radius: 999px; height: 36px; padding: 0 16px; }
.doc5 .legal-note { font-size: 12.5px; color: var(--g4); } .doc5 .legal-note .i { width: 13px; height: 13px; }
.doc5 .scan-card, .doc5 .summary { border-radius: 22px; padding: 24px; }
.doc5 .summary-line { font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.doc5 .tabs button[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--g1); }
.doc5 .claim-card { border-radius: 18px; padding: 18px 22px; } .doc5 .claim-headline { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.4; } .doc5 .claim-quote { color: var(--g3); font-size: 13.5px; }
.doc5 .safe { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 12px 14px; } .doc5 .safe-head h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #15803D; } .doc5 .safe-text { font-family: var(--serif); font-size: 15px; }
.doc5 .src-filters button { border-radius: 999px; } .doc5 .src-filters button[aria-pressed="true"] { background: var(--g1); color: #fff; border-color: var(--g1); }
.doc5 .work { border-radius: 22px; }
.doc5 .doc-text { border-radius: 18px; } .doc5 .verdict { border-radius: 999px; }