/* AI Fox Box. The look comes from the analyst's desk: graph paper, a highlighter, calculator keys, a pine-green ledger. */
@font-face { font-family: Plex; src: url("/fonts/IBMPlexSansArabic-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url("/fonts/IBMPlexSansArabic-SemiBold.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: Plex; src: url("/fonts/IBMPlexSansArabic-Bold.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: Alexandria; src: url("/fonts/alexandria-arabic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: Alexandria; src: url("/fonts/alexandria-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: Alexandria; src: url("/fonts/alexandria-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  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; }
:root {
  --pine: #141413; --pine-2: #2a2a27; --ink: #141413; --text: #1a1a18; --ink-2: #45443f; --muted: #76746c;
  --sheet: #f4f2ed; --paper: #f4f2ed; --card: #ffffff; --line: #e2dfd7; --field: #d4d0c7;
  --fox: #e8590c; --fox-dark: #b8420a; --fox-edge: #9a3506; --fox-soft: #fff0e3; --marker: #ffd4b8; --marker-soft: #fdf1e8;
  --ok: #1c7c5c; --ok-edge: #0f5a41; --ok-soft: #e3f3ec; --bad: #b3261e; --bad-edge: #7d1711; --bad-soft: #fbe9e7; --warn-soft: #fff3c9;
  --display: Alexandria, Plex, system-ui, sans-serif; --radius: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Plex, system-ui, sans-serif; color: var(--text); background: var(--sheet); line-height: 1.8; font-size: 17px; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--marker); color: var(--text); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 740px; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
h1, h2, h3, legend, .brand, .btn, summary { font-family: var(--display); }
h1 { font-size: clamp(32px, 4.9vw, 56px); font-weight: 800; line-height: 1.28; margin: 10px 0 18px; text-wrap: balance; color: var(--pine); }
h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin: 0 0 8px; line-height: 1.4; color: var(--pine); }
h3 { font-weight: 700; }
[lang=en] h1, [lang=fr] h1, [lang=es] h1, [lang=pt] h1, [lang=de] h1 { letter-spacing: -.02em; line-height: 1.12; }

/* header */
header.top { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 22px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; text-decoration: none; color: var(--pine); }
.brand img { width: 36px; height: 36px; }
nav.main { display: flex; gap: 22px; margin-inline-start: auto; align-items: center; font-size: 15px; }
nav.main > a:not(.btn):not(.lang) { text-decoration: none; color: var(--ink-2); padding: 4px 0; background: linear-gradient(var(--marker), var(--marker)) no-repeat 50% 100% / 0 7px; transition: background-size .18s; }
nav.main > a:not(.btn):not(.lang):hover { color: var(--text); background-size: 100% 7px; }
nav.main a.lang { text-decoration: none; border: 1.5px solid var(--line); border-radius: 8px; padding: 2px 12px; background: var(--card); color: var(--ink-2); }
nav.main a.lang:hover { border-color: var(--pine); color: var(--pine); }

/* buttons: calculator keys. They sit on a solid edge and press down. */
.btn { display: inline-block; background: var(--fox); color: #fff !important; text-decoration: none; font-weight: 700; font-size: 16.5px; line-height: 1.5;
  padding: 12px 26px; border-radius: 10px; border: 0; cursor: pointer; box-shadow: 0 4px 0 var(--fox-edge); transition: transform .07s, box-shadow .07s, background .15s; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: #f26a1d; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--fox-edge); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
.btn.small { padding: 6px 15px; font-size: 14px; border-radius: 8px; box-shadow: 0 3px 0 var(--fox-edge); }
.btn.small:active { transform: translateY(3px); box-shadow: 0 0 0 var(--fox-edge); }
.btn.big { padding: 15px 34px; font-size: 18px; }
.btn.ghost { background: var(--card); color: var(--pine) !important; box-shadow: inset 0 0 0 1.5px var(--pine), 0 4px 0 var(--pine); }
.btn.ghost:hover { background: var(--marker-soft); }
.btn.ghost:active { box-shadow: inset 0 0 0 1.5px var(--pine), 0 0 0 var(--pine); }
.btn.small.ghost { box-shadow: inset 0 0 0 1.5px var(--pine), 0 3px 0 var(--pine); }
.btn.small.ghost:active { box-shadow: inset 0 0 0 1.5px var(--pine), 0 0 0 var(--pine); }
.btn.ok { background: var(--ok); box-shadow: 0 4px 0 var(--ok-edge); } .btn.ok:hover { background: #22916c; } .btn.ok:active { box-shadow: 0 0 0 var(--ok-edge); }
.btn.small.ok { box-shadow: 0 3px 0 var(--ok-edge); }
.btn.danger { background: var(--bad); box-shadow: 0 4px 0 var(--bad-edge); } .btn.danger:hover { background: #c93329; } .btn.danger:active { box-shadow: 0 0 0 var(--bad-edge); }
.btn.small.danger { box-shadow: 0 3px 0 var(--bad-edge); }
.btn.light { background: var(--marker); color: var(--pine) !important; box-shadow: 0 4px 0 #d98a5a; } .btn.light:hover { background: #ffe2cf; } .btn.light:active { box-shadow: 0 0 0 #d98a5a; }
button[disabled], .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }

/* hero: the headline sits on graph paper */
.hero { padding: 70px 0 76px; position: relative; background: var(--card); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(15, 61, 51, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 61, 51, .07) 1px, transparent 1px),
                    linear-gradient(rgba(15, 61, 51, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 61, 51, .11) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%); mask-image: linear-gradient(to bottom, #000 30%, transparent 96%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.kicker { color: var(--fox-dark); font-weight: 600; font-size: 15px; }
.hero p.lead { font-size: 19.5px; color: var(--ink-2); margin: 0 0 30px; max-width: 33em; }
.hero .note { display: inline-block; font-size: 14px; color: var(--text); margin-top: 20px; background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 78% / 100% 46%; padding: 0 4px; }
.hero .go { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.hero .go a.more { font-weight: 600; color: var(--pine); text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--marker); }
.hero .go a.more:hover { text-decoration-color: var(--fox); }

/* page sections */
section.band { padding: 72px 0; }
section.band.alt { background: var(--card); border-block: 1px solid var(--line); }
.sub { color: var(--muted); margin: 0 0 30px; max-width: 44em; }
/* what you get: a ledger, one ruled row per deliverable */
.ledger { border-top: 2px solid var(--pine); margin-top: 26px; }
.ledger > div { display: grid; grid-template-columns: 84px minmax(180px, 30%) 1fr; gap: 10px 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ledger h3 { margin: 0; font-size: 21px; color: var(--pine); }
.ledger p { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.tag { justify-self: start; font-family: var(--display); font-weight: 700; font-size: 12.5px; direction: ltr; color: #fff; background: var(--bad); border-radius: 5px; padding: 1px 9px; line-height: 1.9; }
.tag.xl { background: var(--ok); } .tag.src { background: var(--marker); color: var(--pine); }
/* older three-card layout, still used on inner pages */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card h3 { margin: 0 0 8px; font-size: 19px; } .card p { margin: 0; color: var(--ink-2); font-size: 16px; }
/* how it works: a real sequence, so it is numbered and joined by one line */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; margin-top: 34px; }
.step { counter-increment: s; position: relative; padding: 0 22px 0 0; padding-inline: 0 22px; }
.step::before { content: counter(s); font-family: var(--display); font-weight: 800; font-size: 20px; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: var(--pine); color: var(--marker); box-shadow: 0 4px 0 #0b0b0a; position: relative; z-index: 1; }
.step::after { content: ""; position: absolute; top: 22px; inset-inline: 46px 0; height: 2px; background: repeating-linear-gradient(90deg, var(--field) 0 6px, transparent 6px 12px); }
.step:last-child::after { display: none; }
.step h3 { margin: 18px 0 6px; font-size: 20px; color: var(--pine); }
.step p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.aside { margin-top: 30px; font-size: 15px; color: var(--muted); max-width: 60em; }
/* a note in the margin, struck with the highlighter */
.limits { background: var(--marker-soft); border-inline-start: 8px solid var(--marker); border-radius: 4px 12px 12px 4px; padding: 24px 28px; }
[dir=rtl] .limits { border-radius: 12px 4px 4px 12px; }
.limits h2 { font-size: 21px; } .limits p { margin: 0; color: #4a2a12; }
details { border-bottom: 1px solid var(--line); padding: 18px 0; }
summary { font-weight: 600; cursor: pointer; font-size: 18px; color: var(--pine); list-style: none; display: flex; gap: 14px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font-family: var(--display); font-weight: 700; color: var(--fox); width: 14px; flex: none; text-align: center; }
details[open] > summary::before { content: "−"; }
details p { margin: 10px 0 0; color: var(--ink-2); padding-inline-start: 28px; }
/* closing call: pine band, the one dark surface on the page */
.cta { background: var(--pine); color: #efede7; padding: 64px 0; }
.cta .wrap { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.cta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 4px; } .cta .sub { color: #bdb9b0; margin: 0; }
div.wrap > section.cta, .wrap section.cta { border-radius: 16px; padding: 40px 34px; margin: 46px 0 70px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
div.wrap > section.cta .sub { flex: 1 1 320px; }
footer { background: #0f0f0e; color: #b3b0a7; padding: 30px 0 44px; font-size: 14px; }
footer a { color: #efede7; text-underline-offset: 3px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }

/* forms */
.pagehead { padding: 44px 0 8px; }
form.order { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 34px 34px; margin: 18px 0 70px; box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(15, 61, 51, .35); }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
form.order fieldset { counter-increment: sec; padding: 26px 0 22px; border-bottom: 1px dashed var(--field); }
form.order { counter-reset: sec; }
form.order fieldset:last-of-type { border-bottom: 0; }
legend { font-weight: 700; font-size: 19px; padding: 0; margin-bottom: 6px; color: var(--pine); float: inline-start; width: 100%; display: flex; align-items: center; gap: 12px; }
form.order legend::before { content: counter(sec); font-size: 14px; width: 28px; height: 28px; border-radius: 7px; background: var(--marker); color: var(--pine); display: grid; place-items: center; flex: none; }
legend + * { clear: both; }
label { display: block; font-weight: 600; font-size: 15px; margin: 14px 0 5px; color: var(--text); }
.hint { font-weight: 400; color: var(--muted); font-size: 14px; display: block; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 13px; border: 1.5px solid var(--field); border-radius: 8px; background: #fff; color: var(--text); transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: #a5a299; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--pine); box-shadow: 0 0 0 3px var(--marker); }
::placeholder { color: #9aa9a2; }
textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 20px; }
.check input { margin-top: 8px; width: 18px; height: 18px; flex: none; accent-color: var(--pine); }
input[type=checkbox], input[type=radio] { accent-color: var(--pine); }
.radio { display: flex; gap: 22px; } .radio label { font-weight: 400; margin: 0; display: flex; gap: 7px; align-items: center; }
.hp { position: absolute; inset-inline-start: -9999px; }
.alert { border-radius: 10px; padding: 12px 16px; margin: 14px 0; font-size: 15.5px; border-inline-start-width: 6px !important; }
.alert.err { background: var(--bad-soft); color: #6f1712; border: 1px solid #efbdb8; }
.alert.warn { background: var(--warn-soft); color: #5b4708; border: 1px solid #f0c4a4; }
.alert.ok { background: var(--ok-soft); color: #0b4a35; border: 1px solid #a9d8c5; }
.alert ul { margin: 0; padding-inline-start: 20px; }

/* study status */
.status { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px; margin: 18px 0 70px; box-shadow: 0 18px 40px -30px rgba(15, 61, 51, .35); }
.status h2 { font-size: 24px; }
ol.track { list-style: none; padding: 0; margin: 22px 0 6px; }
ol.track li { padding: 10px 0; padding-inline-start: 38px; position: relative; color: var(--muted); }
ol.track li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 17px; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--field); background: #fff; }
ol.track li::after { content: ""; position: absolute; inset-inline-start: 11px; top: 35px; bottom: -15px; width: 2px; background: var(--line); }
ol.track li:last-child::after { display: none; }
ol.track li.done { color: var(--text); } ol.track li.done::before { background: var(--ok); border-color: var(--ok); } ol.track li.done::after { background: var(--ok); }
ol.track li.now { color: var(--pine); font-weight: 600; } ol.track li.now::before { border-color: var(--fox); background: var(--fox); animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .5); } 100% { box-shadow: 0 0 0 10px rgba(232, 89, 12, 0); } }
@media (prefers-reduced-motion: reduce) { ol.track li.now::before { animation: none; } html { scroll-behavior: auto; } .btn, nav.main a { transition: none; } }
.dl { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.prose p { color: var(--ink-2); }

/* live chat */
.chatfab { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(15, 61, 51, .28); }
.chatfab span { width: 9px; height: 9px; border-radius: 50%; background: #34d399; } .chatfab:hover { background: var(--fox-dark); }
.chatbox { background: var(--card, #fff); border: 1px solid var(--line, var(--line)); border-radius: 16px; padding: 18px; margin-bottom: 70px; }
.chatabout { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.chatlog { display: flex; flex-direction: column; gap: 8px; min-height: 180px; max-height: 52vh; overflow-y: auto; padding: 4px 2px 10px; }
.chatlog .msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; background: #eceae4; align-self: flex-end; }
.chatlog .msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .chatlog .msg small { color: var(--muted); font-size: 11.5px; }
.chatlog .msg.mine { background: var(--ink); color: #fff; align-self: flex-start; } .chatlog .msg.mine small { color: #d6d3ca; }
.chatsend { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; } .chatsend textarea { flex: 1; min-height: 0; resize: vertical; }
.chatbox input[type=text], .chatbox input[type=email], .chatbox textarea { width: 100%; font: inherit; padding: 10px 13px; border: 1.5px solid var(--field); border-radius: 10px; background: #fff; }
.chatnote { font-size: 13px; margin: 8px 0 0; } .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.unread { display: inline-block; min-width: 20px; text-align: center; background: var(--fox); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 0 6px; }
tr.unreadrow td { background: #fff5e8; } .online { color: var(--ok); font-weight: 600; }

/* review panel */
body.admin { font-size: 15px; background: var(--sheet); }
.admin .wrap { max-width: 1180px; }
.admin h1 { font-size: 24px; margin: 22px 0 14px; } .admin h2 { font-size: 18px; margin: 0 0 10px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
table.list { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
table.list th, table.list td { padding: 9px 12px; text-align: start; border-bottom: 1px solid #eceae4; vertical-align: top; }
table.list th { background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.pill { display: inline-block; padding: 1px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill.awaiting_review { background: var(--fox-soft); color: var(--fox-dark); } .pill.approved { background: var(--ok-soft); color: var(--ok); }
.pill.failed, .pill.rejected { background: var(--bad-soft); color: var(--bad); } .pill.processing, .pill.queued { background: #e2ecf7; color: #24507a; }
.pill.high { background: var(--bad-soft); color: var(--bad); } .pill.medium { background: var(--fox-soft); color: var(--fox-dark); } .pill.low { background: #eceae4; color: #475569; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.issue { border-top: 1px solid #eceae4; padding: 10px 0; } .issue:first-of-type { border-top: 0; } .issue p { margin: 3px 0; }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; direction: ltr; min-height: 360px; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .actions form { margin: 0; }
pre.research { white-space: pre-wrap; direction: ltr; text-align: left; font-size: 13px; max-height: 340px; overflow: auto; background: #f7f6f2; padding: 12px; border-radius: 8px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.tile span { color: var(--muted); font-size: 14px; } .tile b { font-size: 22px; } .tile small { color: var(--muted); font-size: 12px; }
table.plain th { background: #efede8; color: var(--ink); } table.plain tr.sum td { font-weight: 700; background: #f7f6f2; } table.plain tr.chg td { background: #fff5e8; }
.bar { display: inline-block; width: 70%; height: 8px; background: #eceae4; border-radius: 99px; overflow: hidden; vertical-align: middle; } .bar i { display: block; height: 100%; background: var(--fox); border-radius: 99px; }
table.matrix td.cell { text-align: center; white-space: nowrap; }
.timeline { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.tl { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid #eceae4; border-radius: 10px; } .tl > span:first-child { color: var(--muted); font-size: 13px; }
.tl .bar { width: 100%; } .tl.now { border-color: var(--fox); } .tl.sum { background: #f7f6f2; } .tl .muted { font-size: 12px; }
.chat { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 460px; overflow: auto; }
.msg { max-width: 82%; padding: 8px 12px; border-radius: 12px; background: #efede8; align-self: flex-end; } .msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .msg small { color: var(--muted); font-size: 11px; }
.msg.user { background: var(--ink); color: #fff; align-self: flex-start; } .msg.user small { color: #d6d3ca; }
.msg.error { background: var(--bad-soft); color: var(--bad); } .msg.note { background: none; align-self: center; color: var(--muted); font-size: 13px; padding: 0; } .msg.wait { opacity: .7; }
.draft { border: 1px solid var(--fox); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: #fffaf2; } .draft h3 { font-size: 15px; margin: 10px 0 6px; } .draft h3:first-child { margin-top: 0; }
.chatform { display: flex; gap: 10px; align-items: flex-end; } .chatform textarea { flex: 1; min-height: 0; }
.linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; padding: 6px 0; }

.chip { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--ink); padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; }
.chip.on { border-color: var(--ink); background: #fff; } form.search { display: flex; gap: 6px; margin-inline-start: auto; }
form.search input { font: inherit; font-size: 14px; padding: 6px 12px; border: 1.5px solid var(--field); border-radius: 999px; min-width: 250px; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 6px 0; } label.check input { margin-top: 6px; }
ul.checks { list-style: none; padding: 0; margin: 8px 0; } ul.checks li::before { content: "✓ "; color: var(--ok); font-weight: 700; } ul.checks li.no { color: var(--muted); } ul.checks li.no::before { content: "– "; color: var(--muted); }
.reviewnote { white-space: pre-wrap; background: #f7f6f2; border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; }
#review textarea, .teamadd input, .teamadd select, .loginform input { width: 100%; font: inherit; padding: 9px 12px; border: 1.5px solid var(--field); border-radius: 10px; background: #fff; }
.teamadd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 14px; align-items: end; } .teamadd label { margin: 6px 0; font-size: 14px; }
form.rate { display: flex; gap: 4px; align-items: center; } form.rate input { width: 70px; font: inherit; font-size: 14px; padding: 5px 8px; border: 1.5px solid var(--field); border-radius: 8px; } form.rate select { font: inherit; font-size: 13px; padding: 5px; border-radius: 8px; min-width: 68px; }

.tiles.six { grid-template-columns: repeat(6, 1fr); } .tiles.six .tile b { font-size: 20px; }
.tile.alert { border-color: var(--bad); background: var(--bad-soft); } .tile.due { border-color: var(--fox); background: #fff5e8; }
.timer { white-space: nowrap; } .timer.soon { color: var(--fox-dark); } .timer.over { color: var(--bad); font-weight: 700; }
.clockrow { gap: 22px; margin-bottom: 10px; } .clock { font-size: 18px; }
ul.how { padding-inline-start: 20px; margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; } ul.how li { margin: 4px 0; }
.teamadd.two { grid-template-columns: 1fr 1fr; }

@media (max-width: 860px) {
  .tiles.six { grid-template-columns: 1fr 1fr; } .teamadd.two { grid-template-columns: 1fr; }
  .teamadd { grid-template-columns: 1fr; } form.search { margin: 0; width: 100%; } form.search input { min-width: 0; flex: 1; }
  .tiles { grid-template-columns: 1fr 1fr; } .timeline { grid-template-columns: 1fr 1fr; } .msg { max-width: 96%; }
  body { font-size: 16px; }
  .hero { padding: 40px 0; } .hero .wrap { grid-template-columns: 1fr; gap: 34px; }
  .cards, .steps { grid-template-columns: 1fr; } .steps { gap: 22px; }
  .row, .row3, .cols { grid-template-columns: 1fr; gap: 0; }
  nav.main a.hide-s { display: none; }
  form.order, .status { padding: 20px; }
  section.band { padding: 44px 0; }
  table.list { display: block; overflow-x: auto; }
}

/* Egypt indicators */
.lead-s { font-size: 18px; color: var(--ink-2); max-width: 46em; margin: 0 0 8px; }
.small { font-size: 14px; }
section.eg { margin: 34px 0; }
section.eg h2 { font-size: 22px; margin-bottom: 4px; }
section.eg .sub { margin-bottom: 14px; font-size: 15px; }
.h-note { font-size: 14px; font-weight: 400; color: var(--muted); margin-inline-start: 8px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tiles.fx { grid-template-columns: repeat(5, 1fr); margin-bottom: 10px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.t-name { font-size: 14px; color: var(--ink-2); line-height: 1.5; min-height: 2.9em; }
.tiles.fx .t-name { min-height: 0; }
.t-val { font-size: 30px; font-weight: 700; line-height: 1.3; display: block; }
.tiles.fx .t-val { font-size: 24px; }
.t-meta { font-size: 14px; color: var(--ink-2); }
.t-src { font-size: 13px; color: var(--muted); margin-top: 6px; }
.t-stale { font-size: 12.5px; color: #92400e; background: var(--warn-soft); border-radius: 6px; padding: 1px 8px; display: inline-block; margin-top: 6px; }
.chg { white-space: nowrap; font-size: 13.5px; color: var(--ink-2); }
.chg.up span[aria-hidden], .chg.down span[aria-hidden] { color: var(--fox-dark); font-size: 11px; }
.chg.flat span[aria-hidden] { color: #a5a299; font-size: 9px; }
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th { text-align: start; font-size: 13px; font-weight: 600; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 10px 14px; border-bottom: 1px solid #eceae4; vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data .n { text-align: end; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .strong { font-weight: 700; }
table.data .fc { background: #fff5e8; }
table.data a, .t-src a { color: var(--fox-dark); }
.teaser { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.teaser h2 { font-size: 24px; } .teaser p { margin: 0; color: var(--ink-2); max-width: 40em; }
form.ind { display: grid; grid-template-columns: 1.4fr .7fr .8fr 2fr auto; gap: 12px; align-items: end; padding: 14px 0; border-top: 1px solid #eceae4; }
form.ind label { margin: 0; font-size: 13px; } form.ind input { font-size: 14px; padding: 7px 10px; }
.ind-name { font-size: 14px; line-height: 1.6; }
@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; } .tiles.fx { grid-template-columns: 1fr 1fr; }
  .t-val { font-size: 25px; } form.ind { grid-template-columns: 1fr 1fr; } .ind-name, form.ind .wide { grid-column: 1 / -1; }
}
table.data .v { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* language menu */
.langmenu { position: relative; }
.langmenu summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 2px 14px; background: var(--card); color: var(--ink-2); white-space: nowrap; }
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary::after { content: "▾"; font-size: 11px; margin-inline-start: 6px; color: var(--muted); }
.langmenu div { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px; min-width: 150px; box-shadow: 0 16px 40px -18px rgba(15, 61, 51, .45); display: grid; z-index: 10; }
.langmenu div a { padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.langmenu div a:hover, .langmenu div a[aria-current] { background: var(--fox-soft); color: var(--fox-dark); }

/* country pages */
.kicker a { color: inherit; text-decoration: none; } .kicker a:hover { text-decoration: underline; }
a.clink { font-weight: 600; color: var(--ink); text-decoration: none; } a.clink:hover { color: var(--fox-dark); text-decoration: underline; }
details.allc { margin: 10px 0 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 12px 18px; }
details.allc summary { font-size: 16px; }
details.allc div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
details.allc a { border: 1px solid var(--line); border-radius: 999px; padding: 1px 13px; font-size: 14px; text-decoration: none; color: var(--ink-2); }
details.allc a:hover, details.allc a[aria-current] { border-color: var(--fox); color: var(--fox-dark); background: var(--fox-soft); }

/* animated explainer in the hero: a 16-second loop of four scenes, CSS only */
.player { --T: 16s; background: var(--ink); color: #fff; border-radius: 20px; box-shadow: 0 24px 60px -24px rgba(15, 61, 51, .55); overflow: hidden; }
.p-top { display: flex; align-items: center; gap: 6px; padding: 12px 18px; background: rgba(255, 255, 255, .05); font-size: 13px; }
.p-top i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.p-top b { margin-inline-start: 8px; font-weight: 600; color: var(--marker); }
.p-top span { margin-inline-start: auto; color: #a5a299; font-size: 12px; }
.p-stage { position: relative; height: 290px; }
.sc { position: absolute; inset: 0; padding: 22px 24px; opacity: 0; animation: scene var(--T) infinite backwards; }
.sc2 { animation-delay: 4s; } .sc3 { animation-delay: 8s; } .sc4 { animation-delay: 12s; }
@keyframes scene { 0% { opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
.cap { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; line-height: 1.4; }
.cap i { font-style: normal; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--fox); display: grid; place-items: center; font-size: 14px; }
.pop { opacity: 0; animation: pop var(--T) infinite backwards; animation-delay: var(--d); }
@keyframes pop { 0% { opacity: 0; transform: translateY(10px); } 2.5% { opacity: 1; transform: none; } 40% { opacity: 1; transform: none; } 41% { opacity: 0; } 100% { opacity: 0; } }
.fm-r { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 14px; color: #d6d3ca; }
.fm-r b { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; height: 40px; display: flex; align-items: center; padding: 0 12px; font-weight: 400; color: #fff; font-size: 15px; overflow: hidden; }
.tw { font-style: normal; display: inline-block; white-space: nowrap; overflow: hidden; max-width: 0; animation: typew var(--T) infinite backwards; animation-delay: var(--d); }
@keyframes typew { 0% { max-width: 0; } 5% { max-width: 260px; } 40% { max-width: 260px; } 41% { max-width: 0; } 100% { max-width: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 5px 15px; font-size: 14.5px; }
.chips u { text-decoration: none; color: var(--marker); margin-inline-start: 7px; font-size: 12px; }
.calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: end; }
.calc .bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; direction: ltr; }
.calc .bars i { flex: 1; height: var(--h); background: var(--marker); border-radius: 4px 4px 0 0; transform-origin: bottom; transform: scaleY(0); animation: grow var(--T) infinite backwards; animation-delay: var(--d); }
@keyframes grow { 0% { transform: scaleY(0); } 4% { transform: scaleY(1); } 40% { transform: scaleY(1); } 41% { transform: scaleY(0); } 100% { transform: scaleY(0); } }
.kp { display: grid; gap: 8px; }
.kp div { background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 6px 13px; }
.kp span { display: block; font-size: 12px; color: #d6d3ca; line-height: 1.5; } .kp b { font-size: 20px; line-height: 1.3; }
.docs { display: grid; grid-template-columns: 92px 92px 1fr; gap: 14px; align-items: center; }
.doc { background: #fff; border-radius: 8px; height: 122px; padding: 12px 10px; display: grid; align-content: start; gap: 7px; }
.doc b { font-size: 11px; color: #fff; background: var(--bad); border-radius: 4px; padding: 0 6px; justify-self: start; line-height: 1.7; direction: ltr; }
.doc.xl b { background: var(--ok); }
.doc i { height: 5px; border-radius: 3px; background: var(--line); } .doc i:nth-child(3) { width: 80%; } .doc i:nth-child(5) { width: 60%; }
.out { display: grid; gap: 10px; }
.vd { background: rgba(232, 89, 12, .2); border-inline-start: 4px solid var(--fox); padding: 7px 13px; border-radius: 8px; font-weight: 600; font-size: 15px; }
.rv { font-size: 14px; color: #99e0d5; }
.p-prog { height: 4px; background: rgba(255, 255, 255, .12); direction: ltr; } [dir=rtl] .p-prog { direction: rtl; }
.p-prog i { display: block; height: 100%; width: 0; background: var(--fox); animation: prog var(--T) linear infinite; }
@keyframes prog { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .sc, .pop, .tw, .calc .bars i, .p-prog i { animation: none; }
  .sc4 { opacity: 1; } .sc4 .pop { opacity: 1; } .p-prog i { width: 100%; }
}
@media (max-width: 860px) {
  .p-stage { height: 300px; } .sc { padding: 18px; } .cap { font-size: 17px; }
  .docs { grid-template-columns: 76px 76px 1fr; gap: 10px; } .langmenu summary { padding: 2px 10px; }
}
.brand span { white-space: nowrap; }
.radio { flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 860px) {
  header.top .wrap { gap: 10px; } nav.main { gap: 12px; font-size: 14px; }
  header.top nav.main .btn.small { display: none; }       /* the same button sits in the hero and at the page end */
}
@media (max-width: 380px) { .brand span { display: none; } }
h1, h2, h3, .t-name, .cap, summary { overflow-wrap: break-word; hyphens: auto; }
table.idx { table-layout: fixed; min-width: 640px; } table.idx th:first-child { width: 26%; }

/* back link on inner pages */
a.back { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
a.back:hover { border-color: var(--fox); color: var(--fox-dark); }
a.back span::before { content: "←"; } [dir=rtl] a.back span::before { content: "→"; }
.pagehead { padding-top: 22px; }


/* ---------------------------------------------------------------- second pass over the shared components */
.chatfab { background: var(--pine); border-radius: 12px; padding: 11px 18px; font-family: var(--display); font-size: 14.5px; box-shadow: 0 4px 0 #0b0b0a, 0 14px 30px -12px rgba(15, 61, 51, .6); transition: transform .07s, box-shadow .07s; }
.chatfab:hover { background: var(--pine-2); } .chatfab:active { transform: translateY(4px); box-shadow: 0 0 0 #0b0b0a; }
.chatfab span { background: var(--marker); box-shadow: 0 0 0 4px rgba(255, 226, 122, .25); }
.chatlog .msg { border-radius: 14px 14px 14px 4px; } .chatlog .msg.mine { border-radius: 14px 14px 4px 14px; }
[dir=rtl] .chatlog .msg { border-radius: 14px 14px 4px 14px; } [dir=rtl] .chatlog .msg.mine { border-radius: 14px 14px 14px 4px; }
.chatbox { border-radius: 16px; box-shadow: 0 18px 40px -30px rgba(15, 61, 51, .35); }

.admin h1 { font-size: 24px; font-weight: 700; line-height: 1.5; } .admin h2 { font-size: 17px; font-weight: 700; }
.admin h1 a { color: var(--muted); text-decoration: none; } .admin h1 a:hover { color: var(--pine); text-decoration: underline; }
body.admin header.top { background: var(--pine); border-bottom: 0; } body.admin .brand { color: #fff; }
body.admin nav.main > a:not(.btn):not(.lang) { color: #cfe0d8; } body.admin nav.main > a:not(.btn):not(.lang):hover { color: #fff; background-size: 100% 3px; }
body.admin nav.main a.lang { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; } body.admin nav.main a.lang:hover { border-color: var(--marker); color: var(--marker); }
body.admin nav.main .muted { color: #b3b0a7; }
body.admin header.top .btn.ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); } body.admin header.top .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
.panel { border-radius: 12px; box-shadow: 0 1px 0 var(--line); }
table.list { border-radius: 12px; } table.list th { background: var(--pine); font-family: var(--display); font-weight: 600; font-size: 13.5px; }
table.list tr:hover td { background: #f8f7f3; } table.plain tr:hover td { background: inherit; }
table.plain th { background: #efede8; color: var(--pine); }
table.list a { color: var(--pine); text-decoration-color: var(--field); text-underline-offset: 3px; } table.list a:hover { text-decoration-color: var(--fox); }
.pill { border-radius: 6px; padding: 1px 9px; font-size: 12.5px; }
.tile { border-radius: 12px; } .tile b { font-family: var(--display); color: var(--pine); }
.bar i { background: var(--pine); } .tl.now { border-color: var(--fox); box-shadow: 0 0 0 3px var(--fox-soft); }
.msg.user { background: var(--pine); } .draft { border: 1.5px solid var(--pine); background: var(--marker-soft); }
.chip { border-radius: 8px; } .chip.on { border-color: var(--pine); box-shadow: 0 2px 0 var(--pine); }
form.search input { border-radius: 8px; }
.unread { border-radius: 6px; }
.t-val { font-family: var(--display); color: var(--pine); }
.tablewrap { border-radius: 12px; } table.data th { color: var(--pine); background: #f7f6f2; } table.data tr:hover td { background: #f8f7f3; } table.data tr:hover td.fc { background: #ffefd9; }
table.data a, .t-src a { color: var(--pine); text-decoration-color: var(--marker); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.clink { color: var(--pine); }
.teaser { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 34px; position: relative; overflow: hidden; }
.teaser::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 8px; background: repeating-linear-gradient(var(--pine) 0 10px, var(--marker) 10px 20px); }
.teaser h2 { font-size: 24px; } .teaser > div { padding-inline-start: 6px; }
.langmenu summary { border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 400; display: block; color: var(--ink-2); }
.langmenu summary::before { content: none; } .langmenu summary:hover { border-color: var(--pine); }
.langmenu div { border-radius: 10px; } .langmenu div a:hover, .langmenu div a[aria-current] { background: var(--marker-soft); color: var(--pine); }
details.allc summary::before { content: "+"; } details.allc[open] > summary::before { content: "−"; }
details.allc a { border-radius: 8px; } details.allc a:hover, details.allc a[aria-current] { border-color: var(--pine); color: var(--pine); background: var(--marker-soft); }
a.back { border-radius: 8px; border-width: 1.5px; font-weight: 600; color: var(--pine); } a.back:hover { border-color: var(--pine); background: var(--marker-soft); color: var(--pine); }

/* the explainer, drawn as a pine worksheet */
.player { background: var(--pine); border-radius: 18px; box-shadow: 0 10px 0 #0b0b0a, 0 40px 70px -30px rgba(15, 61, 51, .7); position: relative; }
.player::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 24px 24px; }
.p-top { background: rgba(0, 0, 0, .18); position: relative; } .p-top b { font-family: var(--display); } .p-top span { color: #9dbbae; }
.p-stage { position: relative; } .cap { font-family: var(--display); } .cap i { border-radius: 8px; background: var(--marker); color: var(--pine); font-weight: 800; }
.fm-r { color: #c5d9cf; } .fm-r b, .chips span, .kp div { border-radius: 8px; }
.calc .bars i { background: var(--marker); border-radius: 3px 3px 0 0; }
.kp b { font-family: var(--display); }
.vd { background: var(--marker); color: var(--pine); border: 0; border-radius: 6px; } .rv { color: #a8e3cb; }
.p-prog i { background: var(--marker); }

@media (max-width: 860px) {
  .hero { padding: 40px 0 54px; } .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .ledger > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .steps { grid-template-columns: 1fr; gap: 26px; } .step { padding: 0; padding-inline-start: 64px; min-height: 50px; }
  .step::before { position: absolute; inset-inline-start: 0; top: 0; } .step::after { top: 50px; bottom: -26px; inset-inline: 22px auto; width: 2px; height: auto; background: repeating-linear-gradient(var(--field) 0 6px, transparent 6px 12px); }
  .step h3 { margin-top: 6px; }
  section.band { padding: 48px 0; } form.order { padding: 4px 20px 24px; } .status { padding: 22px; }
  .cta { padding: 44px 0; } .teaser { padding: 24px 22px; } .btn.big { width: 100%; text-align: center; }
  body.admin header.top .wrap { height: auto; min-height: 60px; flex-wrap: wrap; padding-block: 8px; } body.admin nav.main { flex-wrap: wrap; margin-inline-start: 0; }
}
.pagehead h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.35; }
body.admin .brand img { background: #fff; border-radius: 9px; padding: 3px; }

/* plans, accounts and payment */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin-top: 8px; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 24px 24px 26px; margin: 0; font-weight: 400; }
.plan.standard { border-color: var(--pine); box-shadow: 0 6px 0 var(--pine); }
.plan h3 { margin: 0; font-size: 20px; color: var(--pine); }
.plan .price { margin: 8px 0 2px; } .plan .price b { font-family: var(--display); font-size: 38px; font-weight: 800; color: var(--pine); line-height: 1.2; } .plan .price span { color: var(--muted); font-size: 14px; }
.plan .for { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; min-height: 3.2em; }
.plan ul { list-style: none; padding: 14px 0 0; margin: 0 0 20px; border-top: 1px dashed var(--field); flex: 1; }
.plan li { padding-inline-start: 26px; position: relative; margin: 7px 0; font-size: 15.5px; }
.plan li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--ok); font-weight: 700; }
.plan li.no { color: var(--muted); } .plan li.no::before { content: "–"; color: var(--muted); }
.plan .btn { text-align: center; } .plan .soon { font-size: 14px; color: var(--muted); background: var(--sheet); border-radius: 8px; padding: 8px 12px; text-align: center; }
.plan.off { opacity: .72; }
.plans.pick .plan { cursor: pointer; padding: 18px 18px 14px; } .plans.pick .plan.off { cursor: not-allowed; }
.plans.pick input { position: absolute; inset-inline-end: 16px; top: 18px; width: 20px; height: 20px; }
.plans.pick .plan:has(input:checked) { border-color: var(--pine); background: var(--marker-soft); box-shadow: 0 5px 0 var(--pine); }
.plans.pick .plan .price b { font-size: 28px; } .plans.pick .plan .for { min-height: 0; font-size: 14px; } .plans.pick .plan li { font-size: 14px; margin: 4px 0; } .plans.pick .plan ul { margin-bottom: 6px; }
.asuser { background: var(--sheet); border-radius: 8px; padding: 9px 14px; margin: 14px 0 4px; font-size: 15px; }
.authwrap { display: grid; place-items: start center; padding-block: 34px 80px; }
.authcard { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 32px 26px; box-shadow: 0 6px 0 var(--line), 0 30px 50px -36px rgba(15, 61, 51, .5); }
.authcard h1 { font-size: 28px; margin: 0 0 8px; } .authcard .sub { margin-bottom: 8px; font-size: 15.5px; } .authcard .btn { width: 100%; text-align: center; margin-top: 8px; }
.authcard .alt { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); } .authcard .alt a { color: var(--pine); font-weight: 600; text-decoration-color: var(--marker); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pagehead.acct, .acct-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .acct-head { margin: 14px 0 12px; } .acct-head h2 { margin: 0; font-size: 22px; }
td.rowact { text-align: end; white-space: nowrap; } td.rowact .btn { margin-inline-start: 6px; }
.pill.awaiting_payment { background: var(--marker-soft); color: #6b5300; } .pill.tier { background: var(--pine); color: var(--marker); font-family: var(--display); text-transform: capitalize; }
.paybox { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px 24px; margin: 16px 0 70px; box-shadow: 0 6px 0 var(--line); }
.paybox h2 { font-size: 20px; margin: 18px 0 12px; }
.payline { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px dashed var(--field); } .payline > b { font-family: var(--display); font-size: 26px; color: var(--pine); }
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.methodbtn { display: grid; gap: 2px; text-align: start; font: inherit; cursor: pointer; background: var(--card); color: var(--text); border: 0; border-radius: 12px; padding: 16px 18px; box-shadow: inset 0 0 0 1.5px var(--pine), 0 4px 0 var(--pine); transition: transform .07s, box-shadow .07s, background .15s; }
.methodbtn:hover { background: var(--marker-soft); } .methodbtn:active { transform: translateY(4px); box-shadow: inset 0 0 0 1.5px var(--pine), 0 0 0 var(--pine); }
.methodbtn b { font-family: var(--display); font-size: 20px; color: var(--pine); } .methodbtn small { color: var(--muted); }
.invoice { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: start; margin: 18px 0 6px; }
.qr { border: 1.5px solid var(--line); border-radius: 12px; padding: 6px; background: #fff; line-height: 0; } .qr svg { width: 100%; height: auto; }
.invoice dl { margin: 0; } .invoice dt { color: var(--muted); font-size: 14px; margin-top: 12px; } .invoice dt:first-child { margin-top: 0; } .invoice dd { margin: 0; }
.amount { font-family: var(--display); font-size: 34px; font-weight: 800; color: var(--pine); background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 82% / 100% 40%; padding: 0 4px; user-select: all; }
.addr { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14.5px; background: var(--sheet); border: 1.5px dashed var(--field); border-radius: 8px; padding: 9px 12px; overflow-wrap: anywhere; user-select: all; }
.waiting { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--pine); } .waiting i { width: 12px; height: 12px; border-radius: 3px; background: var(--fox); flex: none; animation: pulse 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .waiting i { animation: none; } }
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; } .plan .for { min-height: 0; } .invoice { grid-template-columns: 1fr; } .qr { max-width: 200px; } .methods { grid-template-columns: 1fr; }
  .authcard { padding: 24px 20px; } .paybox { padding: 20px 18px; } .amount { font-size: 28px; }
}


/* ------------------------------------------------------------------ the home stage: AI intake and the live 3D model */
.hero3 { position: relative; background: radial-gradient(120% 90% at 78% 8%, #2a2a27 0%, #141413 42%, #0b0b0a 100%); color: #efede7; padding: 64px 0 72px; overflow: hidden; }
.hero3::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(90% 80% at 70% 30%, #000 0%, transparent 78%); mask-image: radial-gradient(90% 80% at 70% 30%, #000 0%, transparent 78%); }
.hero3 .wrap { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 48px; align-items: start; max-width: 1240px; }
.hero3 h1 { color: #fff; font-size: clamp(30px, 4.2vw, 50px); margin-top: 6px; }
.hero3 .lead { color: #cfccc3; font-size: 18.5px; margin: 0 0 24px; max-width: 32em; }
.hero3 .note { display: inline-block; font-size: 13.5px; color: var(--pine); background: var(--marker); border-radius: 6px; padding: 1px 10px; margin-top: 18px; font-weight: 600; }
.ai-box { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; padding: 16px 18px 18px; backdrop-filter: blur(6px); }
.ai-box label { color: #fff; margin: 0 0 8px; font-family: var(--display); font-size: 16px; }
.ai-box textarea { min-height: 0; background: rgba(4, 24, 19, .55); color: #fff; border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 10px; font-size: 16.5px; resize: none; }
.ai-box textarea::placeholder { color: #9c998f; } .ai-box textarea:hover { border-color: rgba(255, 255, 255, .4); }
.ai-box textarea:focus { border-color: var(--marker); box-shadow: 0 0 0 3px rgba(255, 226, 122, .3); }
.ai-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 14px; }
.ai-row .more { color: #fff; font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--marker); }
.ai-status { margin: 12px 0 0; font-size: 15px; } .ai-status.err { color: #ffc9b0; } .ai-status.wait { color: var(--marker); }
.ai-status.wait::after { content: ""; display: inline-block; width: 1.2em; text-align: start; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ai-result { margin-top: 16px; background: #fff; color: var(--text); border-radius: 16px; padding: 18px 20px 20px; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.ai-result b { font-family: var(--display); color: var(--pine); } .ai-summary { margin: 4px 0 10px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .ai-chips span { background: var(--marker-soft); border: 1px solid #f0c4a4; color: #4a2a12; border-radius: 6px; padding: 0 10px; font-size: 14px; }
.ai-questions ul { margin: 4px 0 10px; padding-inline-start: 20px; color: var(--ink-2); font-size: 15px; } .ai-note { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.sim { background: rgba(4, 24, 19, .55); border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; padding: 16px 18px 14px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(4px); }
.sim-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .sim-head b { font-family: var(--display); font-size: 15.5px; color: #fff; font-weight: 600; }
.verdict { font-family: var(--display); font-weight: 700; font-size: 14px; border-radius: 6px; padding: 1px 12px; white-space: nowrap; }
.verdict.feasible { background: #74ddb2; color: #06281f; } .verdict.conditional { background: var(--marker); color: var(--pine); } .verdict.not { background: #ff9c8a; color: #4a0d07; }
.sim-stage { position: relative; margin: 8px 0 4px; }
.sim-stage canvas { display: block; width: 100%; height: 340px; cursor: grab; touch-action: pan-y; border-radius: 12px; outline-offset: 2px; } .sim-stage canvas:active { cursor: grabbing; }
.sim.thinking canvas { animation: think 1.1s ease-in-out infinite; } @keyframes think { 50% { opacity: .45; } }
.sim-kpis { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 12px; }
.sim-kpis div { background: rgba(4, 24, 19, .72); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 6px 12px; }
.sim-kpis span { display: block; font-size: 12px; color: #b3b0a7; line-height: 1.5; } .sim-kpis b { font-family: var(--display); font-size: 21px; color: #fff; line-height: 1.3; } .sim-kpis small { color: #b3b0a7; margin-inline-start: 6px; }
.sim-hint { position: absolute; bottom: 4px; inset-inline-end: 8px; font-size: 12px; color: #9c998f; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sim-time { display: flex; align-items: center; gap: 12px; padding: 6px 0 10px; border-bottom: 1px dashed rgba(255, 255, 255, .16); margin-bottom: 10px; }
.sim-time label { margin: 0; font-size: 13px; color: #b3b0a7; font-weight: 400; }
.sim-time button { width: 34px; height: 30px; border-radius: 8px; border: 0; background: var(--marker); color: var(--pine); font-size: 12px; cursor: pointer; box-shadow: 0 3px 0 #d98a5a; flex: none; }
.sim-time button:active { transform: translateY(3px); box-shadow: none; }
.sim-inputs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 16px; }
.sim-inputs label { margin: 0; font-size: 12.5px; color: #b3b0a7; font-weight: 400; line-height: 1.5; } .sim-inputs output { display: block; font-family: var(--display); font-weight: 700; color: #fff; font-size: 16px; }
.sim input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; padding: 0; border: 0; --fill: 50%; direction: ltr; }
.sim input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--marker) var(--fill), rgba(255, 255, 255, .18) var(--fill)); }
.sim input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); } .sim input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--marker); }
.sim input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 5px; background: #fff; box-shadow: 0 3px 0 #a5a299; cursor: grab; }
.sim input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 5px; background: #fff; box-shadow: 0 3px 0 #a5a299; cursor: grab; }
.sim input[type=range]:focus { box-shadow: none; } .sim input[type=range]:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px; border-radius: 6px; }
.sim-foot { margin: 10px 0 0; font-size: 12px; color: #9c998f; line-height: 1.6; }
.plan[data-tilt] { transition: transform .18s ease-out, box-shadow .18s; will-change: transform; }
/* header over the dark stage */
header.top { box-shadow: 0 1px 0 var(--line); }
@media (prefers-reduced-motion: reduce) { .sim.thinking canvas, .ai-status.wait::after { animation: none; } }
@media (max-width: 980px) { .hero3 .wrap { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 860px) {
  .hero3 { padding: 34px 0 44px; } .sim { padding: 12px 12px 10px; border-radius: 16px; } .sim-stage canvas { height: 270px; }
  .sim-inputs { grid-template-columns: 1fr 1fr; } .sim-kpis b { font-size: 17px; } .ai-row .btn { width: 100%; text-align: center; }
}
.legend { margin-inline-start: auto; display: grid; align-content: center; gap: 1px; background: none !important; border: 0 !important; padding: 0 !important; }
.legend span { display: flex !important; align-items: center; gap: 7px; font-size: 12.5px !important; color: #e3e0d8 !important; }
.legend i { width: 11px; height: 11px; border-radius: 3px; } .legend i.p { background: #e8590c; } .legend i.b { background: var(--marker); } .legend i.o { background: #74ddb2; }
.legend small { margin: 2px 0 0 !important; font-size: 11.5px; }
.sim-stage canvas { height: 320px; }
.sim-hint { bottom: auto; top: 2px; }


/* header: every link and the order button sit in one bar beside the language menu; on narrow screens the bar scrolls sideways */
nav.main { min-width: 0; flex: 1; justify-content: flex-end; gap: 14px; }
.navlinks { display: flex; align-items: center; gap: 20px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 8px; white-space: nowrap; }
.navlinks::-webkit-scrollbar { display: none; }
.navlinks > a:not(.btn) { text-decoration: none; color: var(--ink-2); padding: 4px 0; flex: none; background: linear-gradient(var(--marker), var(--marker)) no-repeat 50% 100% / 0 7px; transition: background-size .18s; }
.navlinks > a:not(.btn):hover { color: var(--text); background-size: 100% 7px; }
.navlinks .btn { flex: none; }
.langmenu { flex: none; }
@media (max-width: 860px) {
  header.top .wrap { gap: 10px; padding-inline: 14px; } .brand span { display: none; }
  .navlinks { gap: 16px; font-size: 14.5px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); padding-inline: 12px; }
  header.top nav.main .navlinks .btn.small { display: inline-block; }
}

/* the sign-in link and the order button never scroll away: they stay fixed beside the language menu */
.navacts { display: flex; align-items: center; gap: 16px; flex: none; white-space: nowrap; }
.navacts > a:not(.btn) { text-decoration: none; color: var(--pine); font-weight: 600; }
.navacts > a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.langmenu .code { display: none; }
@media (max-width: 1040px) { .navlinks { gap: 16px; font-size: 14.5px; } nav.main { gap: 12px; } .navacts { gap: 12px; } }
@media (max-width: 860px) {
  header.top .wrap { gap: 8px; } .navlinks { gap: 14px; font-size: 14px; padding-inline: 10px; } .navacts { gap: 10px; font-size: 14px; }
  .navacts .btn.small { display: inline-block !important; padding: 6px 11px; font-size: 13.5px; } .langmenu summary { padding: 2px 9px; font-size: 14px; }
}
@media (max-width: 560px) { .langmenu .full { display: none; } .langmenu .code { display: inline; } header.top .wrap { padding-inline: 10px; } .brand img { width: 32px; height: 32px; } }

/* one menu button beside the language: every link of the site opens from it */
nav.main { flex: 1; justify-content: flex-end; gap: 10px; }
.navmenu { position: relative; flex: none; padding: 0; border: 0; }
.navmenu summary { list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; background: var(--pine);
  border-radius: 9px; padding: 7px 16px; box-shadow: 0 3px 0 #0b0b0a; transition: transform .07s, box-shadow .07s; user-select: none; }
.navmenu summary::-webkit-details-marker { display: none; } .navmenu summary::before { content: none; }
.navmenu summary:hover { background: var(--pine-2); } .navmenu[open] summary { transform: translateY(3px); box-shadow: 0 0 0 #0b0b0a; }
.navmenu .bars { width: 16px; height: 12px; background: linear-gradient(var(--marker) 0 0) top / 100% 2px no-repeat, linear-gradient(var(--marker) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--marker) 0 0) bottom / 100% 2px no-repeat; }
.navmenu > div { position: absolute; inset-inline-end: 0; top: calc(100% + 12px); z-index: 10; min-width: 230px; display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px;
  box-shadow: 0 6px 0 var(--line), 0 30px 50px -24px rgba(15, 61, 51, .55); }
.navmenu > div a:not(.btn) { display: block; padding: 9px 14px; border-radius: 9px; text-decoration: none; color: var(--text); font-size: 15.5px; }
.navmenu > div a:not(.btn):hover, .navmenu > div a:not(.btn):focus-visible { background: var(--marker-soft); color: var(--pine); }
.navmenu > div .btn { display: block !important; text-align: center; margin: 2px 2px 8px; padding: 9px 14px; font-size: 15px; }
.langmenu summary { padding: 6px 14px; border-radius: 9px; }
@media (max-width: 860px) { .brand span { display: inline; } .navmenu summary { padding: 7px 13px; } }
@media (max-width: 380px) { .brand span { display: none; } }
.navmenu[open] > summary::before, .langmenu[open] > summary::before { content: none; }

/* the same single menu on the owner's and reviewers' pages */
body.admin .navmenu summary { background: var(--marker); color: var(--pine); box-shadow: 0 3px 0 #d98a5a; } body.admin .navmenu summary:hover { background: #ffe2cf; }
body.admin .navmenu[open] summary { box-shadow: 0 0 0 #d98a5a; }
body.admin .navmenu .bars { background: linear-gradient(var(--pine) 0 0) top / 100% 2px no-repeat, linear-gradient(var(--pine) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--pine) 0 0) bottom / 100% 2px no-repeat; }
.navmenu .who { padding: 6px 14px 8px; color: var(--muted); font-size: 13.5px; border-bottom: 1px dashed var(--field); margin-bottom: 4px; }
.navmenu form { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--field); }
.navmenu .menuout { width: 100%; text-align: start; font: inherit; font-size: 15.5px; color: var(--bad); background: none; border: 0; border-radius: 9px; padding: 9px 14px; cursor: pointer; }
.navmenu .menuout:hover { background: var(--bad-soft); }
body.admin header.top .wrap { height: 64px; min-height: 0; flex-wrap: nowrap; padding-block: 0; } body.admin nav.main { flex-wrap: nowrap; margin-inline-start: auto; }

/* team chat */
.tchat { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.rooms { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; gap: 2px; max-height: 72vh; overflow-y: auto; }
.room { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--text); }
.room:hover { background: #f7f6f2; } .room.on { background: var(--marker-soft); box-shadow: inset 0 0 0 1.5px var(--pine); }
.rk { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 700; background: var(--pine); color: var(--marker); font-size: 14px; }
.rk.dm { background: #e3f3ec; color: var(--ok); } .rk.order { background: var(--fox-soft); color: var(--fox-dark); }
.rt { min-width: 0; flex: 1; display: grid; } .rt b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchat .chatbox { margin: 0; } .tchat .chatlog { min-height: 46vh; max-height: 56vh; }
.roomhead { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px dashed var(--field); } .roomhead b { font-family: var(--display); font-size: 17px; color: var(--pine); } .roomhead .muted { font-size: 13px; flex: 1; }
/* work board */
.board { display: grid; grid-template-columns: repeat(6, minmax(168px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.board.one { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kcol { background: #eeece6; border-radius: 12px; padding: 10px; display: grid; gap: 8px; min-height: 120px; align-content: start; }
.kcol header { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 2px 4px 4px; } .kcol header b { font-family: var(--display); font-size: 14.5px; color: var(--pine); }
.kcol header span { background: #fff; border-radius: 6px; padding: 0 8px; font-weight: 700; font-size: 13px; } .kcol header small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.kcol.assign, .kcol.decide { background: var(--marker-soft); box-shadow: inset 0 0 0 1.5px #f0c4a4; }
.kcard { display: grid; gap: 3px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-decoration: none; color: var(--text); box-shadow: 0 2px 0 var(--line); transition: transform .07s; }
.kcard:hover { transform: translateY(-2px); border-color: var(--pine); } .kcard b { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; } .kcard small { font-size: 12.5px; color: var(--ink-2); }
.kcard.late { border-color: var(--bad); box-shadow: 0 2px 0 var(--bad); } .kempty { font-size: 13px; margin: 4px; }
.rolepick { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; grid-column: 1 / -1; font-size: 14px; } .rolepick > span { font-weight: 600; } .rolepick .check { margin: 0; }
@media (max-width: 860px) { .tchat { grid-template-columns: 1fr; } .rooms { max-height: 210px; } .board { grid-template-columns: repeat(6, 78vw); } }

/* customer files and data export */
input[type=file] { display: block; width: 100%; padding: 12px; border: 1.5px dashed #c4c1b8; border-radius: 12px; background: #fff; font: inherit; }
.doc-text { max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: 12.5px; background: #f4f2ed; padding: 12px; border-radius: 10px; margin-top: 8px; }
.copyline { width: 100%; font-family: ui-monospace, monospace; font-size: 12.5px; padding: 8px 10px; }

/* finished study waiting to be collected */
.peek { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 22px 0 16px; }
.tz { background: #fff; border: 1.5px solid #e2dfd7; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-align: start; }
.tz span { font-size: 13px; color: #5f5d57; }
.tz b { font-size: 19px; color: #141413; }
.tz.shut { background: #f4f2ed; border-style: dashed; }
.tz.shut b { color: #c4c1b8; letter-spacing: 2px; filter: blur(1.5px); user-select: none; }
.tz.shut small { font-size: 11.5px; color: #96938a; }
.inside { text-align: start; background: #fbf3ea; border-radius: 12px; padding: 12px 16px; margin: 0 0 22px; line-height: 1.9; }
.pickh { margin: 26px 0 12px; }
.unlock { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; text-align: start; }
.unlock .plan { display: flex; flex-direction: column; }
.unlock .plan .btn { margin-top: auto; }

/* careers */
.jobs { margin: 0 0 44px; }
.jobs h2 { font-size: 22px; color: var(--pine); border-bottom: 2px solid var(--pine); padding-bottom: 8px; margin: 0 0 14px; }
a.job { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; margin-bottom: 12px; color: inherit; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
a.job:hover { border-color: var(--pine); box-shadow: 0 18px 36px -26px rgba(15, 61, 51, .5); }
a.job h3 { margin: 0 0 4px; font-size: 20px; color: var(--pine); }
a.job p { margin: 0 0 10px; color: var(--ink-2); }
a.job .tags i { font-style: normal; font-size: 12.5px; background: #efede7; color: var(--pine); border-radius: 999px; padding: 3px 10px; margin-inline-end: 6px; }
a.job .pay { text-align: end; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
a.job .pay b { font-size: 20px; color: var(--pine); direction: ltr; unicode-bidi: isolate; }
a.job .pay span { font-size: 13px; color: var(--ink-2); }
a.job .pay em { font-style: normal; font-size: 14px; color: #e8590c; font-weight: 600; margin-top: 6px; }
.jobbody h2 { font-size: 20px; margin: 26px 0 10px; color: var(--pine); }
.jobbody .payline b { direction: ltr; unicode-bidi: isolate; } .jobbody .payline small { font-weight: 400; font-size: 13px; }
ul.ticks { list-style: none; padding: 0; margin: 0 0 8px; }
ul.ticks li { padding: 7px 0; padding-inline-start: 26px; position: relative; border-bottom: 1px dashed var(--line); }
ul.ticks li::before { content: "✓"; position: absolute; inset-inline-start: 2px; color: #1f7a5c; font-weight: 700; }
form.stack { display: grid; gap: 10px; margin-top: 12px; } form.stack textarea { min-height: 70px; }
.dangerzone { border-color: #e7c9c2; } .dangerzone summary { cursor: pointer; color: #9a2d17; }
@media (max-width: 640px) { a.job { grid-template-columns: 1fr; } a.job .pay { text-align: start; } }
.payedit { flex-wrap: nowrap; align-items: center; } .payedit input { width: 86px; display: inline-block; padding: 6px 8px; }

/* review chain */
ol.chain { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0; margin: 6px 0 16px; }
ol.chain li { border: 1.5px solid #e2dfd7; border-radius: 12px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
ol.chain li .n { width: 22px; height: 22px; border-radius: 50%; background: #efede7; color: #141413; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
ol.chain li b { font-size: 13.5px; } ol.chain li small { font-size: 12px; color: #76746c; }
ol.chain li.done { background: #eaf5ef; border-color: #9fcdb7; } ol.chain li.done .n { background: #1f7a5c; color: #fff; }
ol.chain li.active, ol.chain li.next { border-color: #e8590c; background: #fff6ee; } ol.chain li.active .n, ol.chain li.next .n { background: #e8590c; color: #fff; }
ol.chain li.later { opacity: .6; border-style: dashed; }
.focus { background: #fbf3ea; border-radius: 10px; padding: 10px 14px; }
.ownersign { margin-top: 14px; } .ownersign summary { cursor: pointer; font-weight: 600; }
@media (max-width: 760px) { ol.chain { grid-template-columns: 1fr 1fr; } }

/* careers: the study's path */
.path { margin: 0 0 46px; } .path h2 { font-size: 24px; color: var(--pine); margin: 0 0 4px; } .path .sub { margin: 0 0 16px; }
ol.pathline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; counter-reset: none; }
ol.pathline.three { grid-template-columns: repeat(3, 1fr); }
ol.pathline li { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--pine); border-radius: 14px; padding: 16px; }
ol.pathline li .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffd4b8; color: #141413; font-weight: 800; margin-bottom: 8px; }
ol.pathline li b { display: block; color: var(--pine); margin-bottom: 4px; } ol.pathline li p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.stagetag { font-size: 12.5px; background: #ffd4b8; color: #141413; border-radius: 999px; padding: 3px 10px; vertical-align: middle; font-weight: 700; }
@media (max-width: 900px) { ol.pathline, ol.pathline.three { grid-template-columns: 1fr; } }

/* data coverage and warehouse */
.covbadge { font-size: 14px; padding: 3px 12px; border-radius: 999px; vertical-align: middle; color: #fff; background: #1f7a5c; }
.covbadge.gaps { background: #b98900; } .covbadge.limited { background: #c96a12; } .covbadge.low { background: #b3261e; }
.covbars { display: grid; gap: 8px; margin: 12px 0 14px; max-width: 620px; }
.covbars > div { display: grid; grid-template-columns: 150px 1fr 48px; gap: 10px; align-items: center; font-size: 13.5px; }
.covbars i { display: block; height: 10px; border-radius: 999px; background: #ebe9e3; overflow: hidden; }
.covbars i b { display: block; height: 100%; border-radius: 999px; background: #1f7a5c; } .covbars i b.mid { background: #d9a400; } .covbars i b.bad { background: #c0392b; }
.covbars em { font-style: normal; text-align: end; }
.covtable tr.gap td:first-child { border-inline-start: 3px solid #e0a89f; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.statrow > div { background: #f4f2ed; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.statrow b { font-size: 24px; color: #141413; } .statrow span { font-size: 12.5px; color: #5f5d57; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #1f7a5c; }
.dot.month { background: #d9a400; } .dot.old { background: #e07b1a; } .dot.verify { background: #c0392b; }
.srctable tr.cat td { background: #141413; color: #fff; font-weight: 700; }

/* ---------------------------------------------------------- AI Fox Talent */
.tnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 0; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.tnav a { padding: 8px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.tnav a:first-child { font-family: Alexandria, sans-serif; color: var(--pine); }
.tnav a.on { background: var(--pine); color: #fff; } .tnav a:hover:not(.on) { background: #efede7; }
.tnav b { background: #e8590c; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.thero { padding: 46px 0 30px; max-width: 820px; } .thero h1 { font-size: clamp(30px, 5vw, 50px); line-height: 1.25; margin: 10px 0 14px; color: var(--pine); }
.thero .dl { align-items: center; } .tbenefits { margin: 0 0 46px; } .tbenefits h3 { margin: 0 0 8px; color: var(--pine); }
.tcats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; } .tcats h3 { margin: 0 0 10px; color: var(--pine); font-size: 17px; }
.thow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .thow ol { margin: 0 0 16px; padding-inline-start: 22px; line-height: 2.1; }
.tskills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tskills i, .tskills a { font-style: normal; font-size: 13px; background: #efede7; color: var(--pine); border-radius: 999px; padding: 3px 11px; text-decoration: none; }
.tskills a:hover { background: var(--pine); color: #fff; } .tskills i.v { background: #1f7a5c; color: #fff; } .tskills.big a { font-size: 15px; padding: 7px 16px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tcard.featured { border-color: #e8590c; box-shadow: inset 0 3px 0 #e8590c; } .tcard.wide { margin-bottom: 12px; }
.tcard h3 { margin: 0; font-size: 18px; } .tcard h3 a { color: var(--pine); text-decoration: none; } .tcard p { margin: 0; }
.thead { display: flex; gap: 12px; align-items: flex-start; } .thead > div { flex: 1; min-width: 0; } .thead img, .tprofile img { border-radius: 50%; object-fit: cover; }
.tavatar { width: 56px; height: 56px; border-radius: 50%; background: var(--pine); color: #ffd4b8; display: grid; place-items: center; font-weight: 800; font-size: 22px; flex: none; }
.tavatar.big { width: 96px; height: 96px; font-size: 38px; }
.tmatch { flex: none; text-align: center; background: #141413; color: #ffd4b8; border-radius: 12px; padding: 6px 10px; font-weight: 800; font-size: 18px; line-height: 1.1; }
.tmatch small { display: block; font-size: 10.5px; font-weight: 500; color: #d9d6cd; }
.tbadge { font-size: 12px; border-radius: 999px; padding: 2px 9px; background: #eef1ef; color: #5f5d57; white-space: nowrap; }
.tbadge.ok { background: #dff3e9; color: #17694f; } .tbadge.feat { background: #ffe9d6; color: #a3410b; }
.tscore { font-size: 17px; color: var(--pine); } .tscore.pending { font-size: 12.5px; font-weight: 500; color: #96938a; }
.tfacts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0; } .tfacts dt { font-size: 12px; color: #76746c; } .tfacts dd { margin: 0; font-weight: 600; }
.tfacts.wide { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 14px 0; }
.tfoot { display: flex; justify-content: space-between; align-items: center; margin-top: auto !important; padding-top: 6px; }
.why summary, .tsection summary { cursor: pointer; font-size: 13.5px; color: #5f5d57; } .why ul, .whylist { margin: 6px 0 0; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.9; }
.why li.gap, .whylist li.gap { color: #a3410b; }
.tfilter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 0 0 12px; }
.tfilter input, .tfilter select { font: inherit; padding: 8px 10px; border: 1.5px solid #dedbd3; border-radius: 9px; background: #fff; max-width: 100%; } .tfilter input[type=search] { flex: 1; min-width: 180px; }
.tpager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 20px 0; }
.tprofile { display: flex; gap: 18px; align-items: center; margin: 26px 0 14px; flex-wrap: wrap; } .tprofile > div:nth-child(2) { flex: 1; min-width: 200px; } .tprofile h1 { margin: 0; font-size: 30px; color: var(--pine); }
.tscorebox { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 18px; } .tscorebox span { display: block; font-size: 12px; color: #76746c; } .tscorebox .tscore { font-size: 30px; }
.tsection { text-align: start; } .tsection h2 { font-size: 18px; color: var(--pine); margin: 22px 0 8px; } .tsection h2:first-child { margin-top: 0; }
.pre { white-space: pre-line; } .tmatchline { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.tpick { border: 0; padding: 0; margin: 0 0 12px; } .tpick legend { font-weight: 700; font-size: 14px; color: var(--pine); padding: 0; margin-bottom: 6px; }
.tpick label { display: inline-flex; margin: 0 0 6px; cursor: pointer; } .tpick input { position: absolute; opacity: 0; }
.tpick span { border: 1.5px solid #dedbd3; border-radius: 999px; padding: 5px 13px; font-size: 14px; background: #fff; }
.tpick input:checked + span { background: var(--pine); border-color: var(--pine); color: #fff; } .tpick input:focus-visible + span { outline: 2px solid #e8590c; outline-offset: 2px; }
.tstepbar { display: none; } .stepped .tstepbar { display: flex; gap: 6px; list-style: none; padding: 0; margin: 18px 0 4px; }
.tstepbar li { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 5px 0; border-radius: 8px; background: #ebe9e3; color: #76746c; }
.tstepbar li.done { background: #9fcdb7; color: #141413; } .tstepbar li.now { background: var(--pine); color: #ffd4b8; }
.tstepnav { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0 24px; }
.tnotes { list-style: none; padding: 0; margin: 0; } .tnotes li { padding: 8px 12px; border-bottom: 1px solid var(--line); } .tnotes li.new { background: #fbf3ea; border-radius: 8px; }
.tactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; } .tactions input { flex: 1; min-width: 180px; font: inherit; padding: 7px 10px; border: 1.5px solid #dedbd3; border-radius: 9px; }
.tai { margin: 0 0 18px; } .xreview { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line); text-align: start; } .xreview h3 { margin: 0 0 6px; color: var(--pine); }
@media (max-width: 720px) { .thow { grid-template-columns: 1fr; } .tgrid { grid-template-columns: 1fr; } .tnav a { padding: 7px 10px; font-size: 13.5px; } .tfilter > * { flex: 1 1 140px; } }

/* ───────── v3: neutral intelligence-platform layer ───────── */
@font-face { font-family: Inter; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  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: Inter; src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  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; }
:root {
  --sheet: #faf9f6; --paper: #f3f1ec; --card: #ffffff; --line: #e6e3dc; --field: #d6d2c9;
  --ink: #131312; --pine: #131312; --pine-2: #2b2b28; --text: #1c1c1a; --ink-2: #4a4944; --muted: #77756d;
  --display: Inter, Alexandria, Plex, system-ui, sans-serif; --radius: 14px;
}
body { font-family: Inter, Plex, system-ui, sans-serif; background: var(--sheet); line-height: 1.7; }
html[dir=rtl] body { line-height: 1.85; }
h1 { font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
h2 { font-weight: 650; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-weight: 600; letter-spacing: -.01em; }
html[dir=rtl] h1, html[dir=rtl] h2, html[dir=rtl] h3 { letter-spacing: 0; }
html[dir=rtl] h1 { line-height: 1.4; } html[dir=rtl] h2 { line-height: 1.5; }

/* buttons: flat, dark primary, one accent */
.btn, .btn.small, .btn.ghost, .btn.small.ghost, .btn.ok, .btn.small.ok, .btn.danger, .btn.small.danger, .btn.light {
  box-shadow: none; border-radius: 10px; font-weight: 600; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn { background: var(--ink); padding: 11px 22px; font-size: 15.5px; border: 1px solid transparent; }
.btn:hover { background: #33332f; } .btn:active, .btn.small:active, .btn.ghost:active { transform: none; box-shadow: none; }
.btn.small { padding: 7px 15px; font-size: 14px; border-radius: 9px; }
.btn.big { padding: 14px 28px; font-size: 16.5px; border-radius: 12px; }
.btn.accent { background: var(--fox); } .btn.accent:hover { background: var(--fox-dark); }
.btn.ghost, .btn.small.ghost { background: transparent; color: var(--ink) !important; border-color: var(--field); }
.btn.ghost:hover { background: var(--card); border-color: var(--ink); }
.btn.ok:hover { background: var(--ok-edge); } .btn.danger:hover { background: var(--bad-edge); }
.btn.light { background: #fff; color: var(--ink) !important; } .btn.light:hover { background: var(--paper); }

/* header */
header.top { background: rgba(250, 249, 246, .86); backdrop-filter: saturate(1.4) blur(14px); box-shadow: none; border-bottom: 1px solid var(--line); z-index: 20; }
header.top .wrap { height: 66px; gap: 18px; max-width: 1240px; }
.brand { font-weight: 700; font-size: 17px; letter-spacing: -.01em; } .brand img { width: 30px; height: 30px; }
nav.primary { display: flex; gap: 4px; margin-inline: auto; }
nav.primary a { text-decoration: none; color: var(--ink-2); font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 8px; white-space: nowrap; transition: background .15s, color .15s; }
nav.primary a:hover { background: var(--paper); color: var(--ink); }
.navright { display: flex; align-items: center; gap: 10px; flex: none; }
.signin { text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 500; padding: 7px 10px; border-radius: 8px; white-space: nowrap; } .signin:hover { background: var(--paper); }
.langmenu summary { border: 0; background: transparent; padding: 7px 10px; font-size: 14.5px; border-radius: 8px; } .langmenu summary:hover { background: var(--paper); }
.langmenu div { z-index: 30; box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .28); } .langmenu div a { display: block; }
details.mnav { display: none; border: 0; padding: 0; }
details.mnav summary { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; } details.mnav summary::before { content: none; }
details.mnav summary:hover { background: var(--paper); }
.bars, .bars::before, .bars::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; content: ""; transition: transform .2s; }
.bars { position: relative; } .bars::before { position: absolute; top: -6px; } .bars::after { position: absolute; top: 6px; }
details.mnav[open] .bars { background: transparent; } details.mnav[open] .bars::before { transform: translateY(6px) rotate(45deg); } details.mnav[open] .bars::after { transform: translateY(-6px) rotate(-45deg); }
details.mnav > div { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 66px); height: calc(100dvh - 66px); background: var(--sheet); padding: 18px 22px 40px; display: flex; flex-direction: column; overflow-y: auto; z-index: 19; }
details.mnav > div a:not(.btn) { text-decoration: none; font-family: var(--display); font-size: 22px; font-weight: 600; padding: 14px 2px; border-bottom: 1px solid var(--line); color: var(--ink); }
details.mnav > div .btn { margin-top: 22px; text-align: center; padding: 14px; font-size: 17px; }
@media (max-width: 1080px) { nav.primary { display: none; } details.mnav { display: block; } .navright { margin-inline-start: auto; } }
@media (max-width: 620px) { .signin, .navright > .btn { display: none; } }

/* sections */
.sec { padding: 96px 0; } .sec.tint { background: var(--paper); border-block: 1px solid var(--line); }
.sec.dark { background: var(--ink); color: #d9d6ce; } .sec.dark h2 { color: #fff; } .sec.dark p { color: #bdbab1; }
.sec-h { max-width: 720px; margin-bottom: 44px; } .sec-h p { margin: 12px 0 0; color: var(--ink-2); font-size: 18px; }
.sec-h.row { max-width: none; display: flex; gap: 24px; align-items: end; justify-content: space-between; flex-wrap: wrap; } .sec-h.row > div { max-width: 720px; }
.two { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.tabline { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 2; }
.tagline-pill { display: inline-block; font-size: 12px; font-weight: 600; color: var(--fox-dark); background: var(--fox-soft); border-radius: 999px; padding: 1px 11px; line-height: 1.9; }
.fine { font-size: 14px; color: #8f8c84 !important; margin-top: 22px; }

/* hero */
.hero4 { padding: 76px 0 88px; border-bottom: 1px solid var(--line); background:
  radial-gradient(900px 420px at 85% -10%, rgba(232, 89, 12, .07), transparent 70%), var(--sheet); }
html[dir=rtl] .hero4 { background: radial-gradient(900px 420px at 15% -10%, rgba(232, 89, 12, .07), transparent 70%), var(--sheet); }
.hero4 .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; max-width: 1240px; }
.eyebrow { margin: 0 0 18px; font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.hero4 h1 { font-size: clamp(36px, 5vw, 62px); margin: 0 0 22px; }
.hero4 .lead { font-size: 19px; color: var(--ink-2); max-width: 34em; margin: 0 0 30px; }
.h-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.chips { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 14.5px; }
.chips li { display: flex; align-items: center; gap: 8px; } .chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fox); }
.h-side { display: grid; gap: 16px; min-width: 0; }
.ai-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; backdrop-filter: none; box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .28); }
.ai-box label { color: var(--ink); font-size: 15px; font-weight: 600; }
.ai-box textarea { background: var(--sheet); color: var(--text); border: 1px solid var(--line); font-size: 16px; }
.ai-box textarea::placeholder { color: #9a978e; } .ai-box textarea:hover { border-color: var(--field); }
.ai-box textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(19, 19, 18, .08); }
.ai-hint { font-size: 13.5px; color: var(--muted); }
.ai-status.err { color: var(--bad); } .ai-status.wait { color: var(--fox-dark); }
.ai-result { margin: 0; border: 1px solid var(--line); box-shadow: none; }
.flow { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 10px; }
.flow figcaption { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.flow ol { list-style: none; margin: 0; padding: 0; position: relative; }
.flow ol::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 15px; width: 1px; background: var(--line); }
.flow li { position: relative; display: grid; grid-template-columns: 32px auto 1fr; gap: 12px; align-items: center; padding: 7px 0; }
.flow li span { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--field); font-size: 11.5px; font-weight: 600; color: var(--ink-2); z-index: 1;
  animation: flowdot 9s calc(var(--i) * 1.5s - 1.5s) infinite; }
.flow li b { font-family: var(--display); font-weight: 600; font-size: 15px; } .flow li small { color: var(--muted); font-size: 13.5px; text-align: end; line-height: 1.5; }
@keyframes flowdot { 0%, 14%, 100% { background: var(--card); border-color: var(--field); color: var(--ink-2); } 3%, 11% { background: var(--fox); border-color: var(--fox); color: #fff; } }

/* platform modules */
.modules { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.module { grid-column: span 2; position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.module.lead { grid-column: span 4; }
.module:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .35); }
.module .idx { align-self: flex-start; font-size: 13px; color: var(--muted); font-weight: 600; } .module .tagline-pill { position: absolute; top: 24px; inset-inline-end: 24px; }
.module h3 { margin: 14px 0 8px; font-size: 21px; } .module p { margin: 0 0 22px; color: var(--ink-2); font-size: 15.5px; flex: 1; }
.module .go { font-weight: 600; font-size: 14.5px; color: var(--ink); } .module .go i { font-style: normal; display: inline-block; transition: transform .2s; }
.module:hover .go { color: var(--fox-dark); } .module:hover .go i { transform: translateX(4px); }
html[dir=rtl] .go i, html[dir=rtl] .resources i { transform: scaleX(-1); } html[dir=rtl] .module:hover .go i { transform: scaleX(-1) translateX(4px); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: none; }
.timeline li { position: relative; padding: 26px 22px 0 0; border-top: 1px solid var(--field); } html[dir=rtl] .timeline li { padding: 26px 0 0 22px; }
.timeline li::before { content: ""; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.timeline .num { font-size: 13px; color: var(--muted); font-weight: 600; } .timeline h3 { margin: 8px 0 6px; font-size: 18px; } .timeline p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* product panel stays dark on the light page */
.sim { background: #131312; border: 1px solid #131312; border-radius: 20px; padding: 22px 24px 18px; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .55); backdrop-filter: none; }
.sim-kpis div { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.sim-time button { box-shadow: none; background: #fff; color: var(--ink); }
.sim input[type=range]::-webkit-slider-thumb { box-shadow: none; border-radius: 50%; } .sim input[type=range]::-moz-range-thumb { box-shadow: none; border-radius: 50%; }
.sim input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--fox) var(--fill), rgba(255, 255, 255, .18) var(--fill)); }
.sim input[type=range]::-moz-range-progress { background: var(--fox); }

/* human + AI */
.ticks2 { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; color: #e9e6de; font-size: 15.5px; }
.ticks2 li { display: flex; gap: 10px; align-items: baseline; } .ticks2 li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fox); transform: translateY(-2px); }
.equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.equation span { border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 22px 8px; text-align: center; color: #fff; font-family: var(--display); font-weight: 600; font-size: 16px; }
.equation i { font-style: normal; color: #8f8c84; font-size: 20px; }
.equation b { grid-column: 1 / -1; margin-top: 4px; background: var(--fox); color: #fff; border-radius: 12px; padding: 20px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 18px; }

/* bases, economy, paths, pipeline, solutions, resources */
.bases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.bases > div { padding: 24px 22px; border-inline-start: 1px solid var(--line); } .bases > div:first-child { border-inline-start: 0; }
.bases .num { font-size: 13px; font-weight: 600; color: var(--fox-dark); } .bases h3 { margin: 10px 0 6px; font-size: 16.5px; } .bases p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.ledger { border-top: 1px solid var(--field); } .ledger h3 { font-size: 19px; }
.tag { background: var(--ink); border-radius: 6px; } .tag.xl { background: var(--ink); } .tag.src { background: var(--fox-soft); color: var(--fox-dark); }
.ecogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ecogrid > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ecogrid .k { font-size: 13.5px; color: var(--muted); font-weight: 500; } .ecogrid b { font-family: var(--display); font-size: 30px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.ecogrid small { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .ecogrid small a { color: var(--ink-2); }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.paths > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; } .paths h3 { margin: 0 0 18px; font-size: 21px; } .paths .btn { margin: 0 4px 8px 0; }
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pipeline li { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 13px 18px; font-weight: 500; font-size: 15.5px; position: relative; }
.pipeline li + li::before { content: ""; position: absolute; top: -9px; inset-inline-start: 28px; width: 1px; height: 9px; background: var(--field); }
.pipeline li:last-child { background: var(--ink); border-color: var(--ink); color: #fff; }
#ai-data h2 { margin-top: 14px; } #ai-data p { color: var(--ink-2); }
.solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--field); border-inline-start: 1px solid var(--line); }
.solutions > div { padding: 26px 24px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); }
.solutions h3 { margin: 0 0 8px; font-size: 18px; } .solutions p { margin: 0; font-size: 15px; color: var(--ink-2); } .solutions .prob { color: var(--muted); margin-bottom: 6px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); } .plan.standard { border-color: var(--ink); box-shadow: none; }
.plan .price b { font-weight: 700; letter-spacing: -.02em; } .plans.pick .plan:has(input:checked) { box-shadow: none; border-color: var(--ink); background: var(--card); outline: 2px solid var(--ink); }
.enterprise { margin-top: 18px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; }
.enterprise h3 { margin: 0 0 4px; font-size: 20px; } .enterprise p { margin: 0; color: var(--ink-2); font-size: 15.5px; max-width: 44em; }
.resources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.resources a { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 50px; text-decoration: none; transition: border-color .2s, transform .2s; }
.resources a:hover { border-color: var(--ink); transform: translateY(-2px); } .resources h3 { margin: 0 0 6px; font-size: 17.5px; } .resources p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.resources i { position: absolute; bottom: 18px; inset-inline-start: 24px; font-style: normal; color: var(--muted); }
.limits { background: var(--paper); border: 1px solid var(--line); border-inline-start: 3px solid var(--fox); border-radius: 12px; } .limits p { color: var(--ink-2); }
summary::before { color: var(--muted); font-weight: 500; }
.final { background: var(--ink); color: #bdbab1; text-align: center; padding: 104px 0; }
.final h2 { color: #fff; font-size: clamp(30px, 4.4vw, 50px); margin: 0 0 12px; } .final p { margin: 0 auto 30px; max-width: 34em; font-size: 18px; }

/* footer */
footer.big { background: var(--sheet); color: var(--ink-2); border-top: 1px solid var(--line); padding: 64px 0 34px; font-size: 14.5px; }
footer.big .wrap { display: block; max-width: 1240px; } footer.big a { color: var(--ink-2); text-decoration: none; } footer.big a:hover { color: var(--ink); text-decoration: underline; }
.fcols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.fcols h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); } .fcols > div > a { display: block; padding: 4px 0; overflow-wrap: anywhere; }
.fbrand .brand { margin-bottom: 12px; color: var(--ink); } .fbrand p { margin: 0 0 8px; max-width: 26em; } .fbrand .small { font-size: 13px; color: var(--muted); }
.flangs { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; }
.flangs a[aria-current] { color: var(--ink); font-weight: 600; } .flangs span { margin-inline-start: auto; color: var(--muted); }
.chatfab { background: var(--ink); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); border-radius: 999px; } .chatfab:hover { background: #33332f; } .chatfab:active { transform: none; box-shadow: none; }
.chatfab span { background: var(--fox); box-shadow: none; }

/* dashboard cards */
.dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 30px; }
.dash > * { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; display: block; }
.dash span { display: block; font-size: 13.5px; color: var(--muted); } .dash b { font-family: var(--display); font-size: 30px; font-weight: 650; line-height: 1.3; } .dash a:hover { border-color: var(--ink); }

@media (max-width: 1000px) {
  .hero4 .wrap, .two { grid-template-columns: 1fr; gap: 40px; } .hero4 { padding: 48px 0 60px; }
  .modules { grid-template-columns: 1fr 1fr; } .module, .module.lead { grid-column: auto; } .module.lead { grid-column: 1 / -1; }
  .timeline { grid-template-columns: 1fr; } .timeline li { border-top: 0; border-inline-start: 1px solid var(--field); padding: 0 22px 26px !important; } .timeline li::before { top: 4px; inset-inline-start: -5px; }
  .bases { grid-template-columns: 1fr; } .bases > div { border-inline-start: 0; border-top: 1px solid var(--line); } .bases > div:first-child { border-top: 0; }
  .ecogrid, .resources, .dash { grid-template-columns: 1fr 1fr; } .solutions { grid-template-columns: 1fr 1fr; } .fcols { grid-template-columns: 1fr 1fr; } .fbrand { grid-column: 1 / -1; }
  .sec { padding: 64px 0; } .final { padding: 72px 0; }
}
@media (max-width: 620px) {
  .modules, .paths, .solutions, .ecogrid, .resources { grid-template-columns: 1fr; } .ticks2 { grid-template-columns: 1fr; }
  .equation { grid-template-columns: 1fr; } .equation i { text-align: center; } .flow li { grid-template-columns: 32px 1fr; } .flow li small { grid-column: 2; text-align: start; }
  .h-cta .btn { flex: 1 1 100%; text-align: center; } .sim { padding: 14px 12px; } .sec-h p, .hero4 .lead { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .flow li span { animation: none; } .module, .resources a, .btn { transition: none; } }
details.langmenu, details.mnav { border: 0; padding: 0; }

/* delete with a second click to confirm (no script) */
details.del { border: 0; padding: 0; display: inline-block; position: relative; }
details.del summary { display: inline-block; font: 600 14px/1.5 var(--display); color: var(--bad); border: 1px solid #e7c3bf; border-radius: 9px; padding: 6px 13px; background: var(--card); white-space: nowrap; }
details.del summary::before { content: none; } details.del summary:hover, details.del[open] summary { background: var(--bad-soft); border-color: var(--bad); }
details.del form { position: absolute; z-index: 8; top: calc(100% + 6px); inset-inline-end: 0; width: 250px; background: var(--card); border: 1px solid var(--bad); border-radius: 12px; padding: 12px 14px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .4); }
details.del form p { margin: 0 0 10px; padding: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; white-space: normal; }
.covline { margin: 0 0 18px; color: var(--ink-2); }
.h-copy { min-width: 0; } .hero4 h1 { overflow-wrap: anywhere; }
@media (max-width: 620px) { .hero4 h1 { font-size: clamp(30px, 9vw, 40px); } }

/* ───────── AI Fox Talent, v3 ───────── */
.wrap.wide { max-width: 1240px; }
.xnav { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.xbrand { font-family: var(--display); font-weight: 600; font-size: 16px; text-decoration: none; color: var(--ink); white-space: nowrap; } .xbrand b { color: var(--fox); font-weight: 700; }
.xtabs { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.xtabs a { text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 14.5px; padding: 7px 12px; border-radius: 8px; white-space: nowrap; }
.xtabs a:hover { background: var(--paper); color: var(--ink); } .xtabs a.on { background: var(--ink); color: #fff; }
.xtabs b { background: var(--fox); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.xacts { display: flex; gap: 8px; }
.xhero { padding: 64px 0 60px; border-bottom: 1px solid var(--line); background: radial-gradient(800px 380px at 80% -20%, rgba(232, 89, 12, .08), transparent 70%); }
html[dir=rtl] .xhero { background: radial-gradient(800px 380px at 20% -20%, rgba(232, 89, 12, .08), transparent 70%); }
.xhero h1 { font-size: clamp(34px, 5vw, 60px); max-width: 16em; margin: 0 0 18px; } .xhero .lead { font-size: 19px; color: var(--ink-2); max-width: 36em; margin: 0 0 28px; }
.xsearch { display: flex; gap: 8px; max-width: 720px; background: var(--card); border: 1px solid var(--field); border-radius: 14px; padding: 7px; box-shadow: 0 24px 60px -40px rgba(0, 0, 0, .35); }
.xsearch input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16.5px; padding: 8px 12px; outline: none; } .xsearch:focus-within { border-color: var(--ink); }
.xquick { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.xquick a, .tskills a, .tskills i { font-style: normal; font-size: 13.5px; text-decoration: none; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; }
.xquick a:hover, .tskills a:hover { border-color: var(--ink); color: var(--ink); background: var(--card); } .tskills i.v { background: var(--ok-soft); border-color: #b9dfcd; color: var(--ok-edge); }
.xstats { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.xstats b { display: block; font-family: var(--display); font-size: 34px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; } .xstats span { font-size: 14px; color: var(--muted); }
.fine.dark { color: var(--muted) !important; }
.xaud { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.xaudcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 34px; text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
.xaudcard:hover { transform: translateY(-2px); border-color: var(--ink); } .xaudcard .idx { font-size: 13px; font-weight: 600; color: var(--muted); }
.xaudcard h2 { margin: 12px 0 8px; font-size: 28px; } .xaudcard p { margin: 0 0 18px; color: var(--ink-2); }
.xaudcard ol { list-style: none; counter-reset: s; margin: 0 0 26px; padding: 0; flex: 1; }
.xaudcard li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.xaudcard li::before { content: counter(s); font-size: 12px; font-weight: 600; color: var(--muted); width: 16px; flex: none; }
.xaudcard .btn { align-self: flex-start; }
.xaudcard.dark { background: var(--ink); border-color: var(--ink); color: #d9d6ce; } .xaudcard.dark h2 { color: #fff; } .xaudcard.dark p { color: #bdbab1; }
.xaudcard.dark li { border-color: rgba(255, 255, 255, .14); } .xaudcard.dark .idx, .xaudcard.dark li::before { color: #8f8c84; }
.xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.xcard { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; transition: border-color .2s, box-shadow .2s; }
.xcard:hover { border-color: var(--field); box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .35); } .xcard.featured { border-color: var(--fox); }
.xtop { display: flex; gap: 12px; align-items: center; } .xwho { flex: 1; min-width: 0; }
.xwho h3 { margin: 0; font-size: 17px; line-height: 1.4; } .xwho h3 a { text-decoration: none; color: var(--ink); } .xwho h3 a:hover { text-decoration: underline; }
.xwho p { margin: 0; font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xav { flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-family: var(--display); font-weight: 600; }
.xav.co { width: 48px; height: 48px; border-radius: 12px; font-size: 19px; }
.ring { --v: 0; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--fox) calc(var(--v) * 1%), var(--line) 0); }
.ring b { width: 38px; height: 38px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-family: var(--display); font-size: 14.5px; font-weight: 650; }
.ring.none b { color: var(--muted); } .ring.big { width: 108px; height: 108px; margin: 0 auto; } .ring.big b { width: 90px; height: 90px; font-size: 32px; }
.xmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 0; font-size: 13.5px; color: var(--ink-2); } .xmeta b { color: var(--ink); }
.tbadge { background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); } .tbadge.ok { background: var(--ok-soft); border-color: #b9dfcd; color: var(--ok-edge); } .tbadge.feat { background: var(--fox-soft); border-color: #f5cfb3; color: var(--fox-dark); }
.tmatch { background: var(--ink); color: #fff; border-radius: 12px; } .tmatch small { color: #bdbab1; }
.xfoot { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: auto 0 0 !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.xfoot .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-inline-end: 7px; } .xfoot b { color: var(--ink); }
.xfoot .go { font-weight: 600; color: var(--ink); text-decoration: none; } .xfoot .go:hover { color: var(--fox-dark); } .xfoot .go i { font-style: normal; }
.xfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin: 0; } .xfacts dt { font-size: 12px; color: var(--muted); } .xfacts dd { margin: 0; font-weight: 600; font-size: 14.5px; }
.xcats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); gap: 1px; }
.xcats > div { background: var(--card); padding: 24px; } .xcats h3 { margin: 0 0 12px; font-size: 16.5px; }
.xtrust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .xtrust h3 { color: #fff; margin: 0 0 8px; font-size: 18px; } .xtrust p { margin: 0; font-size: 15.5px; }
.xlevels { display: grid; grid-template-columns: 1fr 2fr; gap: 28px; align-items: center; margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .14); }
.xlevels h3 { color: #fff; margin: 0 0 6px; } .xlevels p { margin: 0; font-size: 15px; }
.xlevels ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.xlevels li { border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 14px 12px; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.5; } .xlevels li span { display: block; color: var(--fox); font-size: 12.5px; font-weight: 700; }
.final.light { background: var(--paper); color: var(--ink-2); border-top: 1px solid var(--line); } .final.light h2 { color: var(--ink); } .final.light .fine { max-width: 60em; margin: 30px auto 0; }
.h-cta.center { justify-content: center; }
.xlayout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; } .xlayout.rev { grid-template-columns: minmax(0, 1fr) 320px; }
.xlayout > .xmain:only-child { grid-column: 1 / -1; }
.xside { position: sticky; top: 84px; display: grid; gap: 12px; }
.xfilter { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 18px; } .xfilter summary { font-size: 15px; font-weight: 600; } .xfilter summary::before { content: none; }
.xfilter form { display: grid; gap: 12px; margin-top: 14px; } .xfilter label { display: grid; gap: 4px; margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.xfilter label.check { display: flex; } .xfilter input:not([type=checkbox]), .xfilter select { font: inherit; font-size: 14.5px; padding: 8px 10px; border: 1px solid var(--field); border-radius: 9px; background: var(--sheet); width: 100%; }
.xclear { font-size: 13.5px; color: var(--muted); text-align: center; }
.xcount { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; } .xcount b { color: var(--ink); }
.xempty { grid-column: 1 / -1; text-align: center; border: 1px dashed var(--field); border-radius: 16px; padding: 50px 20px; color: var(--ink-2); }
.xprofile { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin: 30px 0 26px; } .xprofile > div { flex: 1; min-width: 220px; }
.xprofile h1 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); } .xprofile .sub { margin: 4px 0 10px; font-size: 18px; color: var(--ink-2); }
.xdoc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 30px; margin-bottom: 70px; }
.xdoc > section { padding: 24px 0; border-bottom: 1px solid var(--line); text-align: start; } .xdoc > section:last-of-type { border-bottom: 0; }
.xdoc h2 { font-size: 17px; margin: 0 0 10px; } .xdoc section h2 + p { margin-top: 0; } .xdoc h2:not(:first-child) { margin-top: 22px; }
.xreport { border: 0; padding: 14px 0; }
.xbox { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; } .xbox.center { text-align: center; } .xbox h3 { margin: 0 0 12px; font-size: 15.5px; }
.xbox.accent { border-color: var(--ink); } .xbox.accent p { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.xboxlab { display: block; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.xkv { margin: 0; display: grid; gap: 0; } .xkv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .xkv > div:first-child { border-top: 0; padding-top: 0; }
.xkv dt { color: var(--muted); } .xkv dd { margin: 0; font-weight: 600; text-align: end; }
.xinvite { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .xinvite span { min-width: 0; } .xinvite b { display: block; font-size: 14.5px; } .xinvite small { color: var(--muted); }
.xdash { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.xbig { display: block; font-family: var(--display); font-size: 34px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; } .xbig.sm { font-size: 20px; letter-spacing: 0; margin-top: 6px; }
.xbar { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 8px; } .xbar b { display: block; height: 100%; background: var(--fox); }
.xtodo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xtodo li a { display: inline-block; border: 1px dashed var(--field); border-radius: 999px; padding: 4px 14px; font-size: 14px; text-decoration: none; color: var(--ink-2); } .xtodo li a::before { content: "+ "; color: var(--fox); font-weight: 700; } .xtodo li a:hover { border-color: var(--ink); border-style: solid; color: var(--ink); }
.xcv { border: 1px solid var(--ink); border-radius: 16px; background: var(--card); padding: 18px 22px; margin: 0 0 22px; } .xcv summary { font-size: 17px; }
.xcv textarea { min-height: 120px; } .xcv form { margin-top: 10px; }
.tstepbar li.done { background: #d9d6ce; } .tstepbar li.now { background: var(--ink); color: #fff; } .tpick input:checked + span { background: var(--ink); border-color: var(--ink); }
@media (max-width: 980px) {
  .xaud, .xtrust, .xlevels { grid-template-columns: 1fr; } .xcats { grid-template-columns: 1fr 1fr; } .xlevels ol { grid-template-columns: 1fr 1fr; }
  .xlayout, .xlayout.rev { grid-template-columns: 1fr; } .xside { position: static; } .xlayout.rev .xside { order: -1; grid-template-columns: 1fr; }
  .xfilter:not([open]) form { display: none; } .xdash { grid-template-columns: 1fr 1fr; } .xacts { width: 100%; } .xacts .btn { flex: 1; text-align: center; }
}
@media (max-width: 620px) { .xgrid, .xcats { grid-template-columns: 1fr; } .xsearch { flex-direction: column; } .xaudcard { padding: 24px; } .xdoc { padding: 2px 18px; } .xdash { grid-template-columns: 1fr; } .xhero { padding: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .xaudcard, .xcard { transition: none; } }

/* consent for analytics */
.consent { position: fixed; z-index: 40; inset-inline: 16px; bottom: 16px; max-width: 560px; margin-inline: auto; background: var(--card); border: 1px solid var(--ink); border-radius: 16px; padding: 16px 18px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45); }
.consent p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); } .consent div { display: flex; gap: 8px; flex-wrap: wrap; }
.flangs .linkbtn { font-size: 13.5px; color: var(--ink-2); }
/* Task Studio */
.tsflow { margin: 0 0 10px; padding-inline-start: 22px; line-height: 2; font-size: 14.5px; }
.tsteps-bar { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 12px; }
.tsteps-bar li { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.tsteps-bar li.done { background: var(--ok-soft); color: var(--ok-edge); border-color: #b9dfcd; } .tsteps-bar li.now { background: var(--ink); color: #fff; border-color: var(--ink); }
.tsteps-bar li.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.tspre { white-space: pre-wrap; direction: ltr; text-align: left; font-size: 13px; line-height: 1.6; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-height: 520px; overflow: auto; }
.tsissues { margin: 6px 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.8; } .tslog { list-style: none; margin: 0; padding: 0; font-size: 13.5px; max-height: 420px; overflow: auto; }
.tslog li { padding: 4px 0; border-bottom: 1px solid var(--line); } .tslog li.err { color: var(--bad); } .tslog li.warn { color: var(--fox-dark); } .tslog li.ok { color: var(--ok-edge); }
.tsrepairs { margin: 10px 0 14px; } .tsrepairs summary { font-weight: 600; font-size: 15px; } .tsrepairs table { margin-top: 10px; } .tsrepairs td details { border: 0; padding: 4px 0 0; }
.tsfields { margin: 0; display: grid; gap: 0; } .tsfields > div { display: grid; grid-template-columns: 260px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tsfields dt { font-size: 13px; font-weight: 600; color: var(--ink-2); } .tsfields dd { margin: 0; } .tsfields dd > span:first-child { font-weight: 600; } .tsfields .linkbtn { margin-inline-start: 10px; }
.tschips { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400 !important; } .tschips i { font-style: normal; font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; color: var(--muted); }
.tschips i.on { background: var(--ink); border-color: var(--ink); color: #fff; } .tsfields .bad { color: var(--bad); }
@media (max-width: 720px) { .tsfields > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---- verification, tests and the application pipeline (talent) ---- */
.vlist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; }
.vitem { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.vitem.done { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.vhead { display: flex; align-items: center; gap: 12px; } .vhead h2 { font-size: 19px; margin: 0; flex: 1; }
.vmark { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--field); display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.done > .vhead .vmark, li.done > .vmark { background: var(--ok); border-color: var(--ok); color: #04130d; }
.vrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 10px 0; } .vrow > div { flex: 1 1 220px; } .vrow input { margin: 0; }
.vchan { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; } .vchan label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 500; }
.vchange { margin-top: 8px; } .vchange summary { cursor: pointer; font-size: 14px; }
.vchips { list-style: none; padding: 0; margin: 8px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.vchips li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 13px; font-size: 14px; color: var(--ink-2); }
.vchips li.done { border-color: var(--ok); color: var(--ok); }
.gbtn { display: inline-flex !important; align-items: center; gap: 10px; justify-content: center; } .gbtn.wide { display: flex !important; width: 100%; margin: 6px 0 4px; }
.gicon { flex: none; background: #fff; border-radius: 50%; padding: 2px; width: 22px; height: 22px; }
.orline { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 14px 0; }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.extests { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 10px; }
.extest { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.extest.mine { border-color: color-mix(in srgb, var(--fox) 40%, var(--line)); } .extest.passed { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.exhead { display: flex; gap: 8px; align-items: start; justify-content: space-between; } .exhead h2 { font-size: 17px; margin: 0; line-height: 1.4; }
.exres { margin: 0 0 6px; flex: 1; } .extest form { margin: 0; }
.exbar { position: sticky; top: 70px; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; margin: 0 0 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(12px); }
.exclock { font-size: 18px; } .exclock.soon { color: var(--fox); }
.exam { display: grid; gap: 14px; margin-top: 8px; }
.exq { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 10px; margin: 0; background: var(--card); }
.exq legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-family: inherit; font-weight: 600; line-height: 1.6; }
.exq legend .num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 8px; background: var(--fox-soft); color: var(--fox); font-size: 13px; margin-inline-end: 6px; }
.exq label { display: flex; gap: 10px; align-items: start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 8px; cursor: pointer; font-weight: 400; clear: both; }
.exq label:hover { border-color: var(--field); } .exq input { margin-top: 6px; flex: none; accent-color: var(--fox); }
.exq label:has(input:checked) { border-color: var(--fox); background: var(--fox-soft); }
.exdone { text-align: center; padding: 34px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.exdone.ok { border-color: var(--ok); } .exscore { font-size: 64px; font-weight: 800; line-height: 1; margin: 0; font-family: var(--display); }
.exdone.ok .exscore { color: var(--ok); } .exdone.no .exscore { color: var(--fox); }

.reqbox { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 6px 0 18px; background: var(--card); }
.reqbox h3 { margin: 0 0 2px; font-size: 16px; }
.reqlist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.reqlist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .reqlist li > span:not(.vmark) { flex: 1 1 220px; } .reqlist form { margin: 0; }
.ok-line { color: var(--ok); font-weight: 600; margin: 12px 0 0; }
.jfscreen { margin-top: 10px; } .jfscreen > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.jfq { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; margin: 0 0 8px; } .jfq > summary { cursor: pointer; font-size: 14.5px; }
.jfopt { display: flex; align-items: center; gap: 10px; } .jfopt input[type=text] { margin: 4px 0; } .jfright { margin: 0; display: inline-flex; }
.jfright input { accent-color: var(--ok); width: 18px; height: 18px; }

.stagebar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 16px; }
.stagebar a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; color: var(--ink-2); }
.stagebar a[aria-current] { border-color: var(--fox); color: var(--ink); background: var(--fox-soft); } .stagebar b { margin-inline-start: 4px; }
.stagestep { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 12px 0; counter-reset: st; }
.stagestep li { font-size: 12.5px; padding: 3px 10px; border-radius: 6px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.stagestep li.on { color: var(--ink-2); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.stagestep li.now { color: var(--ink); background: var(--ok-soft); border-color: var(--ok); font-weight: 700; }
.stagestep li.closed.now { background: var(--bad-soft); border-color: var(--bad); }
.appscores { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.appscores div { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; }
.appscores dt { color: var(--muted); } .appscores dd { margin: 0; font-weight: 700; } .appscores .ok { border-color: var(--ok); } .appscores .ok dd { color: var(--ok); } .appscores .no dd { color: var(--fox); }
.appinfo { margin: 6px 0; font-size: 15px; }
.appforms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .appforms details { flex: 1 1 100%; } .appforms details:not([open]) { flex: 0 0 auto; }
.appforms summary { list-style: none; } .appforms summary::-webkit-details-marker { display: none; }
.appforms form { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 8px; }
.apptime { margin-top: 10px; } .apptime summary { cursor: pointer; font-size: 14px; } .apptime ol { margin: 8px 0 0; padding-inline-start: 20px; font-size: 14px; display: grid; gap: 4px; }
.apphead { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .apphead h3 { margin: 0; }
.offerbox { border: 1px solid var(--fox); border-radius: 12px; padding: 12px 16px; margin: 10px 0; background: var(--fox-soft); } .offerbox h4 { margin: 0 0 4px; }
.appcard { scroll-margin-top: 90px; }
@media (max-width: 640px) { .exbar { top: 62px; } .exscore { font-size: 52px; } }

/* registration form: required marks, errors above fields, clickable finished steps */
.rq { color: var(--fox); font-weight: 800; margin-inline-start: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reqnote { margin: 4px 0 0; }
.ferr { color: var(--bad); font-size: 14px; font-weight: 600; margin: 2px 0 6px; display: flex; gap: 6px; align-items: baseline; }
.ferr::before { content: "!"; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 11px; flex: none; transform: translateY(2px); }
[aria-invalid="true"]:not(div) { border-color: var(--bad) !important; box-shadow: 0 0 0 3px var(--bad-soft) !important; }
label.check:has(input[aria-invalid="true"]) span { color: var(--bad); }
.grouplab { font-weight: 700; margin: 6px 0 4px; }
.needgroup { margin-bottom: 4px; }
.tstepbar li { padding: 0 !important; overflow: hidden; }
.tstepbar li button { all: unset; display: block; width: 100%; padding: 5px 0; text-align: center; font: inherit; cursor: default; }
.tstepbar li.done button { cursor: pointer; } .tstepbar li.done button:hover { text-decoration: underline; }
.tstepbar li button:focus-visible { outline: 2px solid var(--fox); outline-offset: -2px; border-radius: 8px; }
.steptitle { display: none; } .stepped .steptitle { display: block; font-size: 14px; color: var(--muted); margin: 6px 0 0; }