/* ==========================================================================
TAP theme preview — shared stylesheet
Tokens lifted from theme-preview/d1-home.html so the guest side matches
that page. Chart marks use a deeper trio (#6C4DFF #12A594 #F0663F) which
passes CVD separation and 3:1 contrast on white; the bright cyan/coral are
UI chrome only.
========================================================================== */
:root{
--ink:#0A1230; --ink-2:#0E1A45; --ink-3:#13225A;
--violet:#6C4DFF; --violet-2:#9A7BFF;
--cyan:#27E2D4;
--coral:#FF6B57;
--blue:#2F80ED;
--paper:#F6F5FF; --paper-2:#ECEAFC;
--white:#FFFFFF;
--muted:#8C93B8;
--body-ink:#4a5079;
--line:rgba(108,77,255,.14);
--line-2:rgba(108,77,255,.22);
--line-dark:rgba(255,255,255,.10);
--shadow:0 30px 70px -30px rgba(10,18,48,.45);
--shadow-card:0 18px 50px -24px rgba(10,18,48,.30);
--r:22px; --r-md:16px; --r-sm:11px;
--display:"Bricolage Grotesque","Segoe UI",system-ui,serif;
--body:"Manrope","Segoe UI",system-ui,sans-serif;
/* chart marks — validated */
--c1:#6C4DFF; --c2:#12A594; --c3:#F0663F; --c4:#7B7B96;
--sidebar-w:264px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:hidden}
body{font-family:var(--body);color:var(--ink);background:var(--paper);
-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:15px}
a{text-decoration:none;color:inherit}
img{max-width:100%}
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin:0}
dl,ol,ul{margin-bottom:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap-max,1240px);margin:0 auto;padding:0 5%;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== reset Bootstrap component classes we also use for our own design system —
Bootstrap's own .nav/.card/.badge/.alert/.btn rules cascade in first, and any
property they set that we don't explicitly override here would otherwise leak
through (e.g. Bootstrap forces .nav/.card to display:flex, .alert gets a
default margin-bottom). Keep this block in sync whenever a new colliding
class name is introduced. ===== */
.nav,.card,.alert{display:block;margin:0}
.badge{display:inline-block;margin:0;vertical-align:baseline}
.btn{margin:0;text-align:left;vertical-align:baseline}
.row{margin:0}
.row>*:not([class*="col-"]){width:auto;max-width:none;flex-shrink:1}
.row .btn{padding:11px 20px}
.row .btn-sm{padding:8px 14px}
/* ===== buttons ===== */
.btn{font-family:var(--body);font-weight:700;font-size:14.5px;padding:11px 20px;
border-radius:13px;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
white-space:nowrap;transition:transform .15s ease,box-shadow .25s,background .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn-sm{font-size:13px;padding:8px 14px;border-radius:10px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-card)}
.btn-primary:hover{background:var(--ink);box-shadow:0 18px 40px -16px rgba(10,18,48,.6);transform:translateY(-1px)}
.btn-grad{background:linear-gradient(120deg,var(--violet),#7d5bff 55%,var(--cyan));color:#fff;
box-shadow:0 16px 34px -14px var(--violet)}
.btn-grad:hover{background:linear-gradient(120deg,var(--violet),#7d5bff 55%,var(--cyan));
transform:translateY(-1px);box-shadow:0 22px 44px -14px var(--violet)}
.btn-white{background:#fff;color:var(--ink)}
.btn-clear{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-danger{background:#fff;color:#C8442A;border:1px solid rgba(200,68,42,.3)}
.btn-danger:hover{background:#fbeceb;color:#C8442A;border-color:rgba(200,68,42,.45)}
.btn-ok{background:var(--c2);color:#fff}
.btn-ok:hover{background:#0F8779;color:#fff}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--line);
box-shadow:inset 0 0 0 0 var(--violet)}
/* Disabled state must keep each variant's own colour (dimmed), not
Bootstrap's default blue. Bootstrap's own .btn:disabled/.btn.disabled rule
carries a pseudo-class, which outranks these plain single-class overrides
regardless of source order and falls back to Bootstrap's own
--bs-btn-disabled-bg (its default blue) since none of these variants touch
that custom property — re-declaring background at matching (pseudo-class)
specificity fixes every variant at once, same fix shape as the :hover ones
above. */
.btn:disabled,.btn.disabled{opacity:.5;pointer-events:none}
.btn-ghost:disabled,.btn-ghost.disabled{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-primary:disabled,.btn-primary.disabled{background:var(--ink);color:#fff;box-shadow:none}
.btn-grad:disabled,.btn-grad.disabled{background:linear-gradient(120deg,var(--violet),#7d5bff 55%,var(--cyan));color:#fff;box-shadow:none}
.btn-white:disabled,.btn-white.disabled{background:#fff;color:var(--ink)}
.btn-clear:disabled,.btn-clear.disabled{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.btn-danger:disabled,.btn-danger.disabled{background:#fff;color:#C8442A;border-color:rgba(200,68,42,.3)}
.btn-ok:disabled,.btn-ok.disabled{background:var(--c2);color:#fff}
.btn-line:disabled,.btn-line.disabled{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--violet);color:var(--violet);background:rgba(108,77,255,.06)}
/* ===== guest nav ===== */
/* position:sticky needs every ancestor up to the scrolling viewport to have
overflow:visible on the sticky axis — body/html here both set
overflow-x:hidden, which per spec forces their own overflow-y to auto,
turning body into its own scroll container and breaking sticky. Fixed
positioning doesn't depend on ancestor overflow, so it isn't affected. */
.nav{position:fixed;top:0;left:0;right:0;z-index:999;
background:rgba(246,245,255,.78);border-bottom:1px solid var(--line)}
main{padding-top:74px}
/* The blur sits on a pseudo-element, NOT on .nav itself. A non-none
backdrop-filter (like a transform) makes the element the containing block
for its position:fixed descendants — with it on .nav, the mobile drawer's
top:0;bottom:0 resolved against the 74px header box instead of the
viewport, so the panel rendered as a short stub. z-index:-1 keeps the
pseudo behind the header's own in-flow content (logo, links) so they stay
sharp; an auto z-index would paint the filter layer over them. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
-webkit-backdrop-filter:saturate(160%) blur(18px);
backdrop-filter:saturate(160%) blur(18px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{display:block;height:42px;width:auto;max-width:100%}
.links{display:flex;align-items:center;gap:34px}
.links nav{display:flex;align-items:center;gap:30px;font-weight:600;font-size:14.5px}
.links nav>a,.subtog{position:relative;color:#3b4170;transition:color .2s;background:none;
border:0;font-family:var(--body);font-weight:600;font-size:14.5px;cursor:pointer;padding:0;
display:inline-flex;align-items:center;gap:7px}
.links nav>a:hover,.links nav>a.on,.subtog:hover,.subtog.on{color:var(--ink)}
.links nav>a::after,.subtog::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;
width:0;background:var(--violet);transition:width .25s}
.links nav>a:hover::after,.links nav>a.on::after,
.subtog:hover::after,.subtog.on::after{width:100%}
.subtog i{font-size:10px;transition:transform .25s}
.has-sub{position:relative;display:inline-flex;align-items:center;gap:4px}
/* Guest nav only: .subtog is a real link to the item's own page, and this
separate button just toggles the dropdown without eating the click. */
.subtog-caret{background:none;border:0;padding:2px;margin:0;cursor:pointer;
color:#3b4170;display:inline-flex;align-items:center}
.subtog-caret:hover{color:var(--ink)}
.subtog-caret i{font-size:10px;transition:transform .25s}
.has-sub.open .subtog i,.has-sub.open .subtog-caret i{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,8px);
min-width:226px;background:var(--white);border:1px solid var(--line);border-radius:16px;
padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .22s,
transform .22s,visibility .22s;z-index:1000}
.submenu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.has-sub.open .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.submenu a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;
font-size:14px;font-weight:600;color:#3b4170;transition:background .18s,color .18s}
.submenu a i{font-size:11px;color:var(--violet);transition:transform .18s}
.submenu a:hover{background:var(--paper-2);color:var(--ink)}
.submenu a:hover i{transform:translateX(3px)}
.submenu a.on{background:rgba(108,77,255,.1);color:var(--violet)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-login i{display:none}
.nav-burger{display:none;background:none;border:0;font-size:20px;color:var(--ink);cursor:pointer}
/* off-canvas drawer header (logo + close) — only ever visible inside the
mobile panel; the desktop header has its own logo in .nav-inner */
.mnav-head{display:none}
.mnav-logo img{display:block;height:38px;width:auto}
.mnav-close{background:none;border:0;font-size:21px;line-height:1;color:var(--ink);
cursor:pointer;padding:6px 8px;border-radius:10px;transition:background .2s,color .2s}
.mnav-close:hover{background:var(--paper-2);color:var(--violet)}
/* ===== guest hero ===== */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:
radial-gradient(60% 90% at 84% 8%,rgba(108,77,255,.16),transparent 60%),
radial-gradient(50% 80% at 6% 30%,rgba(39,226,212,.12),transparent 60%)}
.grid-bg{position:relative;overflow:hidden}
.grid-bg::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
background-image:linear-gradient(var(--line) 1px,transparent 1px),
linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
/* the pattern is a z-index:0 positioned pseudo, which paints above plain
in-flow children (CSS2.1 painting order) — lift direct-child sections so
real content isn't drawn under it, same fix as .builder-row.grid-bg>.builder-col */
.grid-bg > section{position:relative;z-index:1}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
gap:48px;align-items:center}
.hero-inner.mid{grid-template-columns:1fr;text-align:center;justify-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--white);
border:1px solid var(--line);padding:8px 14px 8px 8px;border-radius:100px;font-weight:600;
font-size:13px;color:#3b4170;box-shadow:var(--shadow-card)}
.pill b{background:var(--ink);color:#fff;padding:4px 10px;border-radius:100px;font-size:11px;
letter-spacing:.04em}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);
box-shadow:0 0 0 4px rgba(39,226,212,.25);flex-shrink:0}
h1.head{font-size:clamp(38px,5.4vw,68px);margin:22px 0 18px}
h1.head .grad,.grad{background:linear-gradient(110deg,var(--violet),var(--cyan));
-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:18px;line-height:1.6;color:var(--body-ink);max-width:540px;font-weight:500}
.lede-list{list-style:none;margin:14px 0 0;padding:0;max-width:540px;display:flex;
flex-direction:column;gap:9px;font-size:16px;line-height:1.5;color:var(--body-ink);font-weight:500}
.lede-list li{padding-left:20px;position:relative}
.lede-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
border-radius:50%;background:var(--violet)}
/* .stats rows (e.g. the home hero) sit on a dark --ink background, so lede
copy there needs to stay white instead of the default dark body-ink */
.stats .lede,.stats .lede-list{color:#fff}
.stats .lede-list li::before{background:#fff}
.hero-inner.mid .lede{margin:0 auto}
.error-page .lede{margin:0 auto 16px}
/* Reusable "Coming Soon" article block — icon/badge is pure CSS (::before), not an
empty inline element, so it survives TinyMCE save round-trips. Article body only
needs:
Title
...
...
*/
.coming-soon{text-align:center;padding:60px 20px;max-width:540px;margin:0 auto}
.coming-soon::before{content:"\f017";font-family:"Font Awesome 5 Free";font-weight:900;
display:flex;align-items:center;justify-content:center;width:72px;height:72px;
margin:0 auto 22px;border-radius:50%;font-size:28px;color:#fff;
background:linear-gradient(135deg,var(--violet) 0%,var(--cyan) 100%)}
.coming-soon h2{font-family:var(--display);font-size:26px;margin:0 0 10px}
.coming-soon .lede{margin:0 auto 6px}
.coming-soon .cs-note{color:var(--muted);font-size:14px;margin:0;background:none;border:0;padding:0}
/* Same block, checkmark badge — for post-submission "Thank You" messages
(e.g. RSForm!Pro's Confirmation field on the Contact page's form). */
.coming-soon.is-success::before{content:"\f00c"}
.error-page p{max-width:540px;margin-left:auto;margin-right:auto;margin-bottom:16px}
.hero-btns{margin-top:32px;display:flex;flex-wrap:wrap;gap:13px}
.hero-inner.mid .hero-btns{justify-content:center}
.btn-lg{padding:15px 28px;font-size:15px;border-radius:14px}
.hero-meta{margin-top:22px;display:flex;align-items:center;gap:22px;color:var(--muted);
font-weight:600;font-size:13.5px}
.avatars{display:flex}
.avatars span{width:30px;height:30px;border-radius:50%;border:2px solid var(--paper);
margin-left:-9px;background:linear-gradient(135deg,var(--violet),var(--cyan))}
.avatars span:nth-child(2){background:linear-gradient(135deg,var(--coral),#ffb199)}
.avatars span:nth-child(3){background:linear-gradient(135deg,var(--cyan),#5b7bff)}
.hero-vis{position:relative;margin:56px 0 64px}
.float-card{background:var(--ink);color:#fff;border-radius:26px;padding:26px;
box-shadow:var(--shadow);position:relative;overflow:hidden;border:1px solid var(--line-dark)}
.float-card::after{content:"";position:absolute;top:-40%;right:-20%;width:60%;height:80%;
background:radial-gradient(circle,rgba(108,77,255,.4),transparent 70%)}
.fc-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.fc-top .t{font-size:13px;color:#aeb4dd;font-weight:600}
.fc-top .v{font-family:var(--display);font-size:30px;margin-top:4px}
.fc-top .cnt{font-size:12px;color:#aeb4dd;font-weight:600;margin-top:4px}
.spark{margin-top:18px;position:relative;z-index:1}
.fc-legend{display:flex;gap:18px;margin-top:16px;position:relative;z-index:1;font-size:12px;
color:#aeb4dd;font-weight:600}
.fc-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;
vertical-align:-1px}
.chip{position:absolute;background:var(--white);color:var(--ink);border-radius:16px;
padding:12px 15px;box-shadow:var(--shadow);font-weight:700;font-size:13px;display:flex;
align-items:center;gap:10px;border:1px solid var(--line)}
.chip .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff}
.chip small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.chip.c1{bottom:-64px;left:-24px;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ===== dark stats strip ===== */
.stats{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:
radial-gradient(40% 120% at 12% 0%,rgba(108,77,255,.3),transparent 60%),
radial-gradient(40% 120% at 88% 100%,rgba(39,226,212,.18),transparent 60%)}
.stats-inner{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
gap:8px;padding:44px 0}
.stat{display:flex;align-items:center;gap:16px;padding:16px 26px;border-radius:18px;
border:1px solid transparent;transition:background .25s,border-color .25s,transform .25s}
.stat + .stat{box-shadow:inset 1px 0 0 var(--line-dark)}
.stat:hover{background:rgba(255,255,255,.05);border-color:var(--line-dark);
transform:translateY(-3px);box-shadow:none}
.stat .si{width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
font-size:18px;color:#fff;background:linear-gradient(135deg,var(--violet),#9A7BFF);
box-shadow:0 12px 26px -12px var(--violet)}
.stat .si.cy{background:linear-gradient(135deg,#12A594,var(--cyan));
box-shadow:0 12px 26px -12px #12A594}
.stat .si.co{background:linear-gradient(135deg,#F0663F,#ffb199);
box-shadow:0 12px 26px -12px #F0663F}
.stat .sv{min-width:0}
.stat .l{color:#9fa5cf;font-weight:700;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;white-space:nowrap}
.stat .n{margin-top:6px;font-family:var(--display);font-size:clamp(20px,2vw,29px);line-height:1.05;
white-space:nowrap;
font-variant-numeric:tabular-nums;
background:linear-gradient(120deg,#fff,#c9c4ff);-webkit-background-clip:text;
background-clip:text;color:transparent}
.stat .n .cur{font-family:var(--body);font-size:.5em;font-weight:800;letter-spacing:.04em;
vertical-align:.35em;color:#c9c4ff;-webkit-text-fill-color:#c9c4ff}
/* ===== section shells ===== */
/* .section{padding:40px 0} */
.section.tight{padding:0;margin:0}
.section.tight>.wrap{padding:0;margin:0;max-width:none}
.section.alt{background:linear-gradient(180deg,var(--paper),#fff);
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
color:var(--violet);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--violet)}
.sec-head{max-width:660px}
.sec-head.mid{margin:0 auto;text-align:center}
.sec-head.mid .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(28px,3.8vw,46px);margin:16px 0 12px}
.sec-head p{color:var(--body-ink);font-size:17px;line-height:1.6;font-weight:500}
/* ===== home layout builder (row/col grid rendered by builder-render.php) ===== */
.builder-row{max-width:var(--wrap-max,1240px);margin:0 auto;padding:40px 5% ;
display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.builder-row:last-child{padding-bottom:0}
.builder-row.is-fluid{max-width:none;padding-left:0;padding-right:0}
.builder-row.align-middle{align-items:center}
.builder-row.align-bottom{align-items:end}
.builder-row.has-bg-image{background-size:cover;background-position:center;background-repeat:no-repeat}
.builder-row.grid-bg>.builder-col{position:relative;z-index:1}
.builder-col{grid-column:span 12;min-width:0}
.builder-col-1{grid-column:span 1}
.builder-col-2{grid-column:span 2}
.builder-col-3{grid-column:span 3}
.builder-col-4{grid-column:span 4}
.builder-col-5{grid-column:span 5}
.builder-col-6{grid-column:span 6}
.builder-col-7{grid-column:span 7}
.builder-col-8{grid-column:span 8}
.builder-col-9{grid-column:span 9}
.builder-col-10{grid-column:span 10}
.builder-col-11{grid-column:span 11}
.builder-col-12{grid-column:span 12}
/* ===== app layout builder (row/col grid rendered by app-builder-render.php) =====
Unlike .builder-row, no max-width/centering/outer padding — .page-body already
supplies its own padding and .main is already offset/narrowed by the sidebar.
Columns reuse .builder-col/.builder-col-N above unchanged. */
.app-builder-row{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.app-builder-row.align-middle{align-items:center}
.app-builder-row.align-bottom{align-items:end}
.app-builder-row.has-bg-image{background-size:cover;background-position:center;background-repeat:no-repeat}
.app-builder-row.grid-bg>.builder-col{position:relative;z-index:1}
/* ===== cards ===== */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.feat.n4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px;
box-shadow:var(--shadow-card);position:relative;overflow:hidden;
transition:transform .25s,box-shadow .25s,border-color .25s;
/* Column flex so the "more" link can be pinned to the bottom — cards in a row
have different amounts of copy, which left the links at ragged heights. */
display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(108,77,255,.3)}
.card .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:#fff;
margin-bottom:20px;font-size:20px;box-shadow:0 12px 26px -12px var(--violet);
background:linear-gradient(135deg,var(--violet),var(--violet-2))}
.card .ic.cy{background:linear-gradient(135deg,var(--cyan),#5b7bff);
box-shadow:0 12px 26px -12px var(--cyan)}
.card .ic.co{background:linear-gradient(135deg,var(--coral),#ffb199);
box-shadow:0 12px 26px -12px var(--coral)}
.card h3{font-size:21px;margin-bottom:9px}
.card p{color:var(--body-ink);line-height:1.6;font-weight:500;font-size:14.5px}
.card ul{margin:14px 0 0;padding-left:18px;color:var(--body-ink);font-size:14px;font-weight:500;
display:flex;flex-direction:column;gap:7px}
/* margin-top:auto pushes the link to the card's bottom edge, so every card in a
row lines its link up regardless of how much text sits above it. align-self
keeps the flex item from stretching to the full card width. */
.card .more{margin-top:auto;padding-top:18px;font-weight:700;font-size:13.5px;color:var(--violet);
display:inline-flex;align-items:center;align-self:flex-start;gap:7px;transition:gap .2s}
.card:hover .more{gap:11px}
/* ===== trust band + testimonial + CTA ===== */
.trust{padding:54px 0;border-bottom:1px solid var(--line)}
.trust .lab{text-align:center;color:var(--muted);font-weight:700;font-size:12.5px;
letter-spacing:.16em;text-transform:uppercase}
.logos{display:flex;align-items:center;justify-content:center;gap:50px;margin-top:26px;
flex-wrap:wrap;opacity:.72}
.logos .lg{font-family:var(--display);font-weight:700;font-size:19px;color:#5a608c;
display:flex;align-items:center;gap:9px}
.logos .lg .sq{width:24px;height:24px;border-radius:7px;
background:linear-gradient(135deg,var(--violet),var(--cyan))}
.quote{background:var(--ink);color:#fff;border-radius:30px;padding:54px;position:relative;
overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns:1.4fr 1fr;
gap:40px;align-items:center}
.quote::before{content:"";position:absolute;inset:0;
background:radial-gradient(50% 120% at 90% 10%,rgba(108,77,255,.32),transparent 60%)}
.quote .big{position:relative;z-index:1;font-family:var(--display);
font-size:clamp(23px,2.7vw,33px);line-height:1.28;letter-spacing:-.01em}
.quote .qm{font-size:90px;font-family:var(--display);color:var(--violet-2);line-height:.4;
display:block;height:30px}
.quote .by{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-top:28px}
.quote .by .av{width:50px;height:50px;border-radius:14px;
background:linear-gradient(135deg,var(--coral),#ffb199)}
.quote .by .nm{font-weight:800}
.quote .by .ro{color:#9fa5cf;font-size:13px;font-weight:600}
.qstats{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px}
.qstat{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:18px;
padding:20px}
.qstat .qn{font-family:var(--display);font-size:34px;
background:linear-gradient(120deg,var(--cyan),#fff);-webkit-background-clip:text;
background-clip:text;color:transparent}
.qstat .ql{color:#9fa5cf;font-weight:600;font-size:13px;margin-top:4px}
.cta{padding:30px 0 100px}
.cta-card{border-radius:32px;padding:64px 54px;text-align:center;position:relative;
overflow:hidden;background:linear-gradient(120deg,var(--violet),#7d5bff 50%,var(--cyan));
box-shadow:0 40px 90px -40px var(--violet);color:#fff}
.cta-card::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
background-size:40px 40px;
-webkit-mask-image:radial-gradient(70% 100% at 50% 0%,#000,transparent);
mask-image:radial-gradient(70% 100% at 50% 0%,#000,transparent)}
.cta-card h2{position:relative;font-size:clamp(28px,4vw,50px);margin-bottom:14px}
.cta-card p{position:relative;font-size:18px;opacity:.92;max-width:520px;margin:0 auto 30px;
font-weight:500}
.cta-card .row{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
margin:0;padding:0}
.cta-card .row>*{width:auto;max-width:none;flex-shrink:1}
/* ===== footer ===== */
footer{background:var(--ink);color:#fff;padding:70px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;gap:40px}
.foot-brand .logo img{height:46px}
.foot-grid p{color:#9fa5cf;line-height:1.6;font-weight:500;font-size:14px;margin-top:16px;
max-width:300px}
.foot-col h4{font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.06em;
text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col a{display:block;color:#9fa5cf;font-weight:500;font-size:14px;margin-bottom:11px;
transition:color .2s}
.foot-col a:hover{color:var(--cyan)}
.foot-social{display:flex;align-items:center;gap:10px}
.foot-bottom .soc{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
color:#9fa5cf;border:1px solid var(--line-dark);font-size:16px;
transition:color .22s,border-color .22s,background .22s,transform .22s}
.foot-bottom .soc:hover{color:#fff;border-color:var(--violet);background:rgba(108,77,255,.22);
transform:translateY(-2px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:50px;
padding-top:24px;border-top:1px solid var(--line-dark);color:#9fa5cf;font-size:13px;
font-weight:500;flex-wrap:wrap;gap:12px}
.foot-bottom .rtl{font-family:var(--display);color:#c9c4ff;direction:rtl}
/* ===== reveal animation ===== */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{animation:rv .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rv{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}
.d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s}
/* page-enter/leave transition — BODY MUST NEVER GET A TRANSFORM.
Any non-none transform on an element makes it the containing block for
its position:fixed descendants. .side (the app sidebar) is fixed and
relies on being anchored to the real viewport, not to — if body
gets a transform (even briefly, via keyframes), .side would anchor to
body's own box instead, and since body can be taller than the screen,
that shoves the pinned profile row out of view. So body only ever
fades; the slide lives on .main instead, which is .side's SIBLING, never
its ancestor, so it can transform freely without side effects. */
body{animation:pageIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body.leaving{opacity:0;transition:opacity .22s}
body.app .main{animation:mainIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes mainIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.app.leaving .main{transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.rv,.js .rv{opacity:1;transform:none}
}
/* ==========================================================================
APP SHELL — fixed sidebar, no top bar.
The sidebar is position:fixed with its own scroller, so it stays put no
matter how far the main column scrolls. A rail toggle collapses it to
icons only; the state is persisted and re-applied in so there is
no flash on navigation. Title sits left, breadcrumb right.
========================================================================== */
.app{min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--ink);color:#fff;
display:flex;flex-direction:column;z-index:50;border-right:1px solid var(--line-dark);
transition:width .28s cubic-bezier(.2,.7,.2,1)}
.side::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(60% 40% at 0% 0%,rgba(108,77,255,.28),transparent 60%),
radial-gradient(60% 40% at 100% 100%,rgba(39,226,212,.12),transparent 60%)}
.side-top{position:relative;display:flex;align-items:center;gap:10px;padding:18px 14px 16px 18px;
border-bottom:1px solid var(--line-dark);min-height:74px}
.side-brand {
display: flex;
align-items: center;
min-width: 0;
flex: 1;
overflow: hidden;
/* padding: 2px; */
border-radius: 6px;
height: 60px;
text-align: center;
justify-content: center;
}
.side-brand img{display:block;height:54px;width:auto;transition:opacity .2s;border-radius:6px;}
.rail-toggle{flex:0 0 auto;width:32px;height:32px;border-radius:10px;border:1px solid var(--line-dark);
background:rgba(255,255,255,.05);color:#c3c7e6;cursor:pointer;display:grid;place-items:center;
font-size:13px;transition:background .2s,color .2s,border-color .2s}
.rail-toggle:hover{background:rgba(108,77,255,.28);color:#fff;border-color:var(--violet-2)}
.rail-toggle i{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.side-scroll{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
padding:14px 12px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.side-scroll::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px}
.side-sec{padding:16px 10px 7px;font-size:10px;font-weight:800;letter-spacing:.17em;
text-transform:uppercase;color:#6f76a8;white-space:nowrap}
.side-sec span{display:block}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;
border-radius:11px;font-size:14px;font-weight:600;color:#c3c7e6;white-space:nowrap;
transition:background .2s,color .2s,transform .15s}
.side-nav a i{width:18px;flex:0 0 18px;text-align:center;font-size:14.5px;color:#8f95c4;
transition:color .2s}
.side-nav a span{overflow:hidden;text-overflow:ellipsis}
.side-nav a:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(2px)}
.side-nav a:hover i{color:var(--cyan)}
.side-nav a.on{background:linear-gradient(120deg,var(--violet),#7d5bff);color:#fff;
box-shadow:0 12px 26px -14px var(--violet)}
.side-nav a.on i{color:#fff}
/* user profile — pinned in the sidebar. Clicking it opens a popover CARD that
is anchored inside .side-user-wrap, which sits inside .side (position:fixed).
The popover is therefore fixed to the LEFT PANEL, never to the body — it
scrolls and collapses with the sidebar, it cannot drift over the main column. */
.side-user-wrap{position:relative;flex:0 0 auto;border-top:1px solid var(--line-dark)}
.side-user{position:relative;width:100%;display:flex;align-items:center;gap:11px;
padding:14px;background:rgba(0,0,0,.2);border:0;cursor:pointer;
font-family:var(--body);color:#fff;text-align:left;transition:background .2s}
.side-user:hover{background:rgba(108,77,255,.2)}
.side-user .av{width:40px;height:40px;border-radius:12px;flex:0 0 40px;display:grid;
place-items:center;font-weight:800;font-size:15px;color:#fff;
background:linear-gradient(135deg,var(--violet),var(--cyan));
box-shadow:0 10px 22px -12px var(--violet)}
.side-user .su-t{min-width:0;flex:1}
.side-user .nm{display:block;font-weight:700;font-size:13.5px;line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .co{display:block;font-size:11.5px;color:#9fa5cf;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .su-go{flex:0 0 auto;font-size:11px;color:#6f76a8;transition:transform .2s,color .2s}
.side-user-wrap.open .su-go{transform:rotate(180deg);color:#fff}
/* the popover card itself */
.side-pop{position:absolute;left:10px;right:10px;bottom:calc(100% + 8px);z-index:65;
background:var(--ink-3);border:1px solid var(--line-dark);border-radius:14px;
box-shadow:var(--shadow);padding:7px;opacity:0;visibility:hidden;
transform:translateY(8px) scale(.98);transform-origin:bottom center;
transition:opacity .18s,transform .18s,visibility .18s}
.side-user-wrap.open .side-pop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sp-head{display:flex;align-items:center;gap:11px;padding:9px 9px 12px;margin-bottom:5px;
border-bottom:1px solid var(--line-dark)}
.sp-head .av{width:36px;height:36px;border-radius:11px;flex:0 0 36px;display:grid;
place-items:center;font-weight:800;font-size:13.5px;color:#fff;
background:linear-gradient(135deg,var(--violet),var(--cyan))}
.sp-head .sp-t{min-width:0}
.sp-head .nm{display:block;font-weight:700;font-size:13.5px;color:#fff}
.sp-head .em{display:block;font-size:11.5px;color:#9fa5cf;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-pop a,.side-pop button{display:flex;align-items:center;gap:11px;padding:9px 10px;
border-radius:10px;font-size:13px;font-weight:600;color:#c3c7e6;white-space:nowrap;
transition:background .18s,color .18s;width:100%;border:0;background:none;
font-family:inherit;cursor:pointer;text-align:left}
.side-pop a i,.side-pop button i{width:16px;flex:0 0 16px;text-align:center;font-size:13px;
color:#8f95c4;transition:color .18s}
.side-pop a:hover,.side-pop button:hover{background:rgba(255,255,255,.07);color:#fff}
.side-pop a:hover i,.side-pop button:hover i{color:var(--cyan)}
.sp-div{height:1px;margin:5px 8px;background:var(--line-dark)}
.side-pop .sp-out{color:#ffb3a8}
.side-pop .sp-out i{color:#ff8a76}
.side-pop .sp-out:hover{background:rgba(255,107,87,.14);color:#fff}
.side-pop .sp-out:hover i{color:#fff}
/* ---- collapsed rail ---- */
.rail{--sidebar-w:76px}
.rail .side-top{padding:18px 12px 16px;justify-content:center}
.rail .side-brand{display:none}
.rail .rail-toggle i{transform:rotate(180deg)}
.rail .side-sec{padding:16px 0 7px;text-align:center;font-size:0}
.rail .side-sec span{display:none}
.rail .side-sec::after{content:"";display:block;height:1px;margin:0 14px;
background:var(--line-dark)}
.rail .side-nav a{justify-content:center;padding:11px 0;gap:0}
.rail .side-nav a span{display:none}
.rail .side-nav a:hover{transform:none}
.rail .side-user{justify-content:center;padding:14px 0}
.rail .side-user .su-t,.rail .side-user .su-go{display:none}
.rail .side-pop{left:8px;right:auto;width:250px}
/* icon tooltips, rail only */
/* rail flyout — hovering a collapsed group shows its full menu content, not
just an icon tooltip.
This element lives OUTSIDE .side, as a direct child of .app, and is placed
by JS in viewport coordinates. That placement is deliberate: .side-scroll
has overflow-x:hidden (so the nav's vertical scrollbar never grows a
horizontal one), and .side itself is position:fixed — a flyout nested
inside it would either be clipped or fail to rasterize. Keeping it a
sibling of .side sidesteps both, and it is conceptually an overlay
anyway. */
.rail-fly{position:fixed;z-index:75;min-width:212px;max-width:260px;
background:var(--ink-3);border:1px solid var(--line-dark);border-radius:14px;
box-shadow:var(--shadow);padding:7px;opacity:0;visibility:hidden;pointer-events:none;
transform:translateX(-6px);transform-origin:left center;
transition:opacity .16s,transform .16s,visibility .16s}
.rail-fly.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}
.rail-fly .rf-t{padding:8px 10px 10px;font-size:10px;font-weight:800;letter-spacing:.16em;
text-transform:uppercase;color:#6f76a8;border-bottom:1px solid var(--line-dark);margin-bottom:4px}
.rail-fly a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;
font-size:13px;font-weight:600;color:#c3c7e6;white-space:nowrap;
transition:background .16s,color .16s}
.rail-fly a i{width:16px;flex:0 0 16px;text-align:center;font-size:13px;color:#8f95c4;
transition:color .16s}
.rail-fly a:hover{background:rgba(255,255,255,.07);color:#fff}
.rail-fly a:hover i{color:var(--cyan)}
.rail-fly a.on{background:linear-gradient(120deg,var(--violet),#7d5bff);color:#fff}
.rail-fly a.on i{color:#fff}
/* ===== app top-navigation (alternate to left sidebar) ===== */
.app-top{position:fixed;top:0;left:0;right:0;z-index:999;background:var(--ink);color:#fff;
border-bottom:1px solid var(--line-dark)}
.app-top-inner{display:flex;align-items:center;justify-content:space-between;
height:74px;gap:24px}
.app-top-inner .side-brand img{height:36px}
.app-top-links{display:flex;align-items:center;gap:26px;font-weight:600;font-size:14px}
.app-top-links .has-sub{position:relative}
.app-top-links .subtog{background:none;border:0;color:#c3c7e6;font-family:var(--body);
font-weight:600;font-size:14px;cursor:pointer;padding:0;display:inline-flex;
align-items:center;gap:7px;transition:color .2s}
.app-top-links .subtog:hover,.app-top-links .subtog.on{color:#fff}
.app-top-links .subtog i{font-size:10px;transition:transform .25s}
.app-top-links .has-sub.open .subtog i{transform:rotate(180deg)}
.app-top-links .submenu{position:absolute;top:calc(100% + 16px);left:50%;
transform:translate(-50%,8px);min-width:210px;background:var(--ink-3);
border:1px solid var(--line-dark);border-radius:14px;padding:7px;
box-shadow:var(--shadow);opacity:0;visibility:hidden;
transition:opacity .2s,transform .2s,visibility .2s;z-index:1000}
.app-top-links .has-sub.open .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.app-top-links .submenu a{display:flex;align-items:center;gap:9px;padding:9px 11px;
border-radius:10px;font-size:13.5px;font-weight:600;color:#c3c7e6;
transition:background .18s,color .18s}
.app-top-links .submenu a i{font-size:11px;color:var(--violet-2)}
.app-top-links .submenu a:hover{background:rgba(255,255,255,.07);color:#fff}
.app-top-links .submenu a.on{background:rgba(108,77,255,.22);color:#fff}
.app-top-cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.app-top-cta .side-user-wrap{position:relative}
.app-top-cta .side-pop{left:auto;right:0;bottom:auto;top:calc(100% + 8px);width:250px}
.app-top-cta .side-user{padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.05)}
.app-top-cta .nav-burger{display:none;color:#fff}
.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;
min-width:0;overflow-x:hidden;
transition:margin-left .28s cubic-bezier(.2,.7,.2,1),transform .22s,opacity .22s}
.top-nav-mode .main{margin-left:0;padding-top:74px;transition:none}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding:13px 34px 12px;background:var(--white);border-bottom:1px solid var(--line);
position:relative}
.page-head.page-head-sticky{position:sticky;top:var(--sticky-top,0);z-index:40}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,var(--violet),transparent 42%)}
/* breadcrumb sits to the RIGHT of the title; there is no description line */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0;font-size:11.5px;font-weight:600;
list-style:none;margin-left:auto;background:var(--paper);border:1px solid var(--line);
border-radius:100px;padding:5px 13px}
.crumbs li{display:flex;align-items:center;color:var(--muted)}
.crumbs li + li::before{content:"\f105";font-family:"Font Awesome 5 Free";font-weight:900;
margin:0 9px;color:#b9bed8;font-size:12px}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--violet)}
.crumbs [aria-current="page"]{color:var(--ink)}
.page-head h1{font-size:19px;letter-spacing:-.01em;text-transform:uppercase}
.page-head-actions{display:flex;align-items:center;gap:10px}
.page-head-actions:empty{display:none}
.page-body{padding:16px 20px 36px;display:flex;flex-direction:column;gap:20px;flex:1;min-width:0}
/* every direct child is a flex item in a column container — without min-width:0
a wide table refuses to shrink below its content width and pushes .main (and
the whole page) wider than the viewport, which is what was clipping the
sidebar's pinned profile out of view. Each child's own overflow-x:auto
(.tbl-wrap, .cmp-wrap) then does the actual local scrolling. */
.page-body > *{min-width:0}
.page-body.narrow > *{max-width:1000px}
.page-body.mid > *{max-width:660px;margin-left:auto;margin-right:auto}
/* index.php's shell already wraps in a .page-body —
several view templates also open their own .page-body, doubling the padding/gap.
Collapse the nested one out of the box model instead of touching every view file. */
.page-body .page-body{display:contents}
/* index.php's shell prints bare (no wrapper) as a
direct child of .page-body — with no messages queued it still renders an empty
#system-message-container div, which .page-body's flex gap counts as a real item
and pads out above whatever the view renders first. */
#system-message-container:empty{display:none}
.mobile-bar{display:none}
/* ===== app components ===== */
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
box-shadow:var(--shadow-card)}
.panel-h{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;
border-bottom:1px solid var(--line)}
.panel-h .pt{font-family:var(--display);font-size:18px;letter-spacing:-.02em}
.panel-h .ps{color:var(--muted);font-size:13px;font-weight:600;margin-top:3px}
.panel-h .acts{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
.panel-b{padding:20px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* Go/No-Go History's count block: one compact single-line strip, not stacked
tile cards — same three counts, far less vertical space (per UAT feedback). */
.tap-gnh-counts-row{background:var(--white);border:1px solid var(--line);
border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:10px 20px;
margin-bottom:20px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.tap-gnh-count-item{display:flex;align-items:center;gap:10px}
.tap-gnh-count-item .ic{width:30px;height:30px;border-radius:9px;display:grid;
place-items:center;color:#fff;font-size:12px;flex:none;
background:linear-gradient(135deg,var(--violet),var(--violet-2))}
.tap-gnh-count-item .ic.cy{background:linear-gradient(135deg,var(--cyan),#5b7bff)}
.tap-gnh-count-item .ic.nu{background:linear-gradient(135deg,#8C93B8,#b9bed8)}
.tap-gnh-count-item .n{font-family:var(--display);font-size:20px;
letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tap-gnh-count-item .l{font-weight:700;font-size:12.5px;color:var(--muted)}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;
box-shadow:var(--shadow-card);display:flex;flex-direction:column;
transition:transform .25s,box-shadow .25s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tile .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;
font-size:17px;margin-bottom:16px;background:linear-gradient(135deg,var(--violet),var(--violet-2));
box-shadow:0 12px 24px -12px var(--violet)}
.tile .ic.cy{background:linear-gradient(135deg,var(--cyan),#5b7bff)}
.tile .ic.co{background:linear-gradient(135deg,var(--coral),#ffb199)}
.tile .ic.nu{background:linear-gradient(135deg,#8C93B8,#b9bed8)}
.tile .n{font-family:var(--display);font-size:31px;letter-spacing:-.03em;line-height:1.05;
font-variant-numeric:tabular-nums}
.tile .l{margin-top:7px;font-weight:700;font-size:13.5px}
.tile .s{margin-top:3px;color:var(--muted);font-size:12.5px;font-weight:500}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* filters */
.filters{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
padding:18px 20px;box-shadow:var(--shadow-card);position:relative;margin-bottom:20px}
/* Collapsing hides only the field grid below — the title bar (h4: icon, "Filters"
label, toggle button) stays visible in both states so there's always something
to click to re-expand, instead of the whole card (title included) disappearing. */
.filters h4{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:9px;
transition:margin-bottom .35s ease}
/* Collapsed: the field grid disappears but its 14px top gap (h4's margin-bottom,
sized for the grid, not the header) shouldn't linger under a bare title bar. */
.filters.closed h4{margin-bottom:0}
/* The collapse/expand toggle sits at the far right of the title row, same
placement idiom as .faq-q .tg — tap.js's initFilterToggle relocates the
tendersajax button here; gonogohistory's own inline script has its button
in this markup position to start with. Keyed off .dt-filter (both buttons'
shared class) rather than the tendersajax-only [data-filter-toggle]
attribute so it covers either page. */
.filters h4 .dt-filter{margin-left:auto}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;
overflow:hidden;max-height:2000px;transition:max-height .35s cubic-bezier(.2,.7,.2,1)}
/* collapsed via JS setting max-height to 0/scrollHeight on THIS element (not the
whole .filters card, so its h4 title bar + toggle button stay put) — same idiom
as .faq-a. The max-height:2000px/0 fallback below covers pages whose own toggle
script only flips the .closed class on .filters (gonogohistory) without also
setting an inline max-height from scrollHeight (tendersajax, via tap.js
initFilterToggle, which sets the inline px value directly on .fgrid). */
.filters.closed .fgrid{max-height:0}
/* Apply/Reset as ordinary grid items (see tendersajax/gonogohistory default.php) —
no label above them, so row-direction + a bottom margin matching the other
fields' label+gap height keeps their buttons level with the input controls
the grid's align-items:end lines everything up against. */
.fgrid .f-actions{flex-direction:row;align-items:center;gap:10px;margin-bottom:1px}
.frow{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.frow .f{min-width:240px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-size:12.5px;font-weight:700;color:#3b4170}
.ctl{height:40px;border:1px solid var(--line);border-radius:11px;background:var(--white);
display:flex;align-items:center;gap:9px;padding:0 13px;font-size:13.5px;color:var(--body-ink);
font-weight:500;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.ctl:hover{border-color:var(--line-2)}
.ctl::after{content:"\f107";font-family:"Font Awesome 5 Free";font-weight:900;margin-left:auto;
color:var(--muted);font-size:12px}
.ctl.date::after{content:""}
.ctl.date::before{content:"\f073";font-family:"Font Awesome 5 Free";font-weight:900;
color:var(--violet);font-size:12px}
.ctl.list::after{content:""}
.ctl.ph{color:var(--muted);font-weight:400}
select.ctl{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c86b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat:no-repeat;background-position:right 13px center;background-size:12px 9px;
padding-right:32px}
select.ctl[multiple]{height:auto;min-height:110px;padding:8px 13px;background-image:none;
align-items:flex-start}
select.ctl:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(108,77,255,.08)}
.form-box .f-hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.form-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
padding:22px 24px;box-shadow:var(--shadow-card);max-width:560px}
.form-box .f{margin-bottom:18px}
.form-box .f:last-of-type{margin-bottom:22px}
.form-actions{display:flex;gap:10px}
.btn-submit{background:var(--violet);color:#fff}
.btn-submit:hover{background:#5a3ce8}
.btn-cancel{background:#C8442A;color:#fff}
.btn-cancel:hover{background:#a83a24}
.tokens{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px;padding:5px 9px;
border:1px solid var(--violet);border-radius:11px;background:#fff;flex:1;min-width:0;
box-shadow:0 0 0 3px rgba(108,77,255,.08)}
.tok{display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);color:var(--ink);
font-size:12px;font-weight:700;padding:4px 8px;border-radius:7px}
.tok b{cursor:pointer;color:var(--violet)}
.tok-more{background:var(--violet);color:#fff;font-size:11px;font-weight:800;width:22px;
height:22px;border-radius:100px;display:inline-grid;place-items:center;flex:none}
.f-row{display:flex;gap:8px;align-items:center}
.f-row>.ctl,.f-row>.tokens,.f-row>.input-group,.f-row>.select2-container{flex:1;min-width:0}
/* A bare dropped directly into .f-row (no .input-group/.ctl wrapper,
e.g. a plain text filter like Tender ID) — give it the same 40px pill as
every other filter control instead of Bootstrap's shorter default. */
.filters .f-row>input.form-control{flex:1;min-width:0;height:40px;border:1px solid var(--line);
border-radius:11px;background:var(--white);padding:0 13px;font-size:13.5px;color:var(--body-ink);
transition:border-color .2s,box-shadow .2s}
.filters .f-row>input.form-control:hover{border-color:var(--line-2)}
.filters .f-row>input.form-control:focus{outline:0;border-color:var(--violet);
box-shadow:0 0 0 3px rgba(108,77,255,.08)}
.fx-clear{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:11px;
background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer;
transition:border-color .2s,color .2s}
.fx-clear:hover{border-color:var(--line-2);color:var(--ink)}
/* Rows with a clear (X) button: merge the field + clear button into one pill,
same treatment as the password eye-toggle (.input-password-toggle) —
a single bordered box with the icon as a borderless flex column divided
only by a hairline, instead of a separate boxed button beside the field.
Opt-in via .has-clear (added only where a .fx-clear is actually present)
so plain .f-row filters without a clear button are unaffected. */
.f-row.has-clear{gap:0;align-items:stretch;border:1px solid var(--line);border-radius:11px;
overflow:hidden;background:var(--white);transition:border-color .2s,box-shadow .2s}
.f-row.has-clear:hover{border-color:var(--line-2)}
.f-row.has-clear:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px rgba(108,77,255,.08)}
.f-row.has-clear>.input-group{border:0;border-radius:0;background:transparent}
.f-row.has-clear>.input-group:hover,.f-row.has-clear>.input-group:focus-within{border-color:transparent;box-shadow:none}
.f-row.has-clear .select2-container--default .select2-selection--multiple,
.f-row.has-clear .select2-container--default .select2-selection--single{
border:0!important;border-radius:0!important;background:transparent!important}
.f-row.has-clear .fx-clear{width:36px;height:auto;align-self:stretch;border:0;
border-left:1px solid var(--line);border-radius:0;background:transparent}
.f-row.has-clear .fx-clear:hover{border-color:var(--line);color:var(--violet)}
.filters-foot{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
.btn-mute{background:#6b7280;color:#fff}
.btn-mute:hover{background:#585e70}
/* Unify every filter-row control (select2 boxes, native .ctl selects, the
raw Bootstrap input-group date pickers) to the same 40px pill so the row
doesn't zig-zag in height. */
.filters .input-group{height:40px;border:1px solid var(--line);border-radius:11px;
background:var(--white);overflow:hidden;display:flex;align-items:stretch;flex:1;min-width:0;
transition:border-color .2s,box-shadow .2s}
.filters .input-group:hover{border-color:var(--line-2)}
.filters .input-group:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px rgba(108,77,255,.08)}
.filters .input-group-text{border:0;background:transparent;color:var(--violet);
padding:0 0 0 13px;display:flex;align-items:center;cursor:pointer}
.filters .input-group .form-control{border:0!important;height:100%!important;box-shadow:none!important;
background:transparent!important;font-size:13.5px;padding:0 13px;color:var(--body-ink)}
/* tables */
.tbl-wrap{overflow-x:auto;background:var(--white);border:1px solid var(--line);
border-radius:var(--r-md);box-shadow:var(--shadow-card)}
table.tbl{border-collapse:collapse;width:100%;font-size:13.5px}
.tbl th{text-align:center;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);background:#FBFAFF;padding:10px 12px;white-space:normal;line-height:1.35;
vertical-align:middle;border-bottom:1px solid var(--line)}
/* DataTables' own stylesheet hard-sets thead alignment to left, so it has to be
overridden by name rather than relying on .tbl th above. */
table.dataTable thead th,table.dataTable thead td{text-align:center;vertical-align:middle}
.tbl th.srt::after{content:"\f0d7";font-family:"Font Awesome 5 Free";font-weight:900;
margin-left:6px;color:#b9bed8}
/* Sort arrows in the theme's violet and opaque enough to actually see; the
inactive pair stays lighter than the active one so direction stays legible. */
table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_desc:after{
color:var(--violet);opacity:.35}
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after{opacity:1}
/* Column-filter row: inputs stay full-width and left-read, not centred. */
.tbl tr.frow-th th{background:var(--white);padding:9px 12px;text-align:left}
.tbl tr.frow-th input{width:100%;min-width:100px;font:inherit;font-family:var(--body);
font-size:12.5px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;
background:#FBFAFF;color:var(--body-ink)}
.tbl tr.frow-th input:focus{outline:0;border-color:var(--violet);background:#fff}
.tbl td{padding:13px 15px;border-bottom:1px solid rgba(108,77,255,.08);vertical-align:middle;
font-weight:500}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:#FBFAFF}
.tbl.striped tbody tr:nth-child(odd){background:#FCFBFF}
.tbl.striped tbody tr:hover{background:var(--paper-2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .center{text-align:center}
.tbl th.center{text-align:center}
.tbl .ref{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--muted)}
.tbl .name{font-weight:700;color:var(--ink)}
.tbl .ar{direction:rtl;text-align:right}
.tbl .ar.name{min-width:230px}
.tbl a.ext{white-space:nowrap;color:var(--violet);font-weight:700}
.tbl a.ext:hover{text-decoration:underline}
.btn-view{display:inline-block;white-space:nowrap;background:var(--blue);color:#fff;
font-size:12.5px;font-weight:700;padding:7px 18px;border-radius:8px;transition:background .18s}
.btn-view:hover{background:#2166c4}
.star{color:var(--coral);cursor:pointer;transition:transform .15s}
.star:hover{transform:scale(1.2)}
.star.off{color:#cfd2e6}
.tfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 2px 0;
font-size:13px;color:var(--muted);font-weight:600}
.tfoot .spacer{flex:1}
.pager{display:flex;gap:5px}
.pager span{min-width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700;cursor:pointer;
font-variant-numeric:tabular-nums;transition:.2s}
.pager span:hover{border-color:var(--violet);color:var(--violet)}
.pager span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager span.off{opacity:.4;pointer-events:none;cursor:default}
.pager span.dots{border:0;cursor:default;pointer-events:none}
.pager span{cursor:pointer}
input.goto{-webkit-appearance:none;-moz-appearance:textfield;font:inherit;font-family:var(--body);
color:var(--ink);font-weight:700;outline:0}
input.goto:focus{border-color:var(--violet)}
.dt-len-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);
border-radius:9px;background:var(--white);font:inherit;font-family:var(--body);font-weight:700;
color:var(--ink);padding:4px 8px;margin:0 4px;cursor:pointer}
.dt-len-select:focus{outline:0;border-color:var(--violet)}
.goto{display:inline-grid;place-items:center;width:54px;height:32px;border:1px solid var(--line);
border-radius:9px;background:#fff;font-size:13px;font-weight:700}
.total-chip{background:var(--paper-2);color:var(--ink);font-weight:800;padding:6px 13px;
border-radius:100px;font-size:13px;font-variant-numeric:tabular-nums}
.total-chip.co{background:rgba(255,107,87,.12);color:#C8442A}
.dt-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;
color:var(--muted);font-weight:600;position:relative;z-index:5;margin-bottom:10px}
.dt-len b{color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:4px 10px;
background:#fff;font-variant-numeric:tabular-nums}
.dt-count{background:var(--violet);color:#fff;font-weight:800;font-size:13px;padding:8px 14px;
border-radius:10px;white-space:nowrap;border:0;font-variant-numeric:tabular-nums;
font-family:var(--body)}
.dt-exp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dt-max{color:var(--muted);font-size:12.5px}
.dt-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.dt-search{width:230px;height:36px;display:flex;align-items:center;gap:9px;
padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#fff}
.dt-search input{border:0;outline:0;background:transparent;font:inherit;font-family:var(--body);
font-size:13px;width:100%;color:var(--ink)}
.dt-filter{flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;
background:#fff;display:grid;place-items:center;color:var(--muted);cursor:pointer;
transition:border-color .2s,color .2s,background .2s}
.dt-filter:hover{border-color:var(--line-2);color:var(--ink)}
.dt-filter.on{background:var(--violet);color:#fff;border-color:var(--violet)}
.dt-cols-wrap{position:relative}
.dt-cols{flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;
background:#fff;display:grid;place-items:center;color:var(--muted);cursor:pointer;
transition:border-color .2s,color .2s}
.dt-cols:hover{border-color:var(--line-2);color:var(--ink)}
.dt-cols-pop{display:none;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 8px);
right:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;
box-shadow:var(--shadow-card);padding:8px;z-index:30}
.dt-cols-pop.open{display:flex}
.dt-cols-pop label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
font-size:13.5px;font-weight:600;color:var(--body-ink);cursor:pointer;transition:background .15s}
.dt-cols-pop label:hover{background:var(--paper-2)}
.dt-cols-pop input[type="checkbox"]{width:16px;height:16px;accent-color:var(--violet)}
/* ===== Select2 reskin — makes the multi-select filters (Sectors/Agency/
Competition type/Supplier) render like the mockup's plain .tokens/.tok
chip picker instead of select2's own default chrome. Scoped to .filters
so it doesn't leak into any select2 instance elsewhere. Do not edit
select2.min.css/js themselves.
NOTE: the bundled select2 is a 5.x build, not the 4.x DOM/CSS this block
originally assumed — its own rules use 2-class selectors that TIE in
specificity with some of ours, and select2's is emitted inline in
the component body (after this stylesheet's in ), so ties
go to select2, not us. Every rule below is deliberately scoped 3+ classes
deep (or !important on the couple of properties that can't be) so it wins
regardless of load order. Its choice-remove button is also
`position:absolute;left:0` by default — that pulls it out of flex flow
entirely, so `order` alone (previous attempt) had no effect; it must be
forced to `position:static` first. ===== */
.filters .select2-container{width:100%!important}
.filters .select2-container--default .select2-selection--multiple,
.filters .select2-container--default .select2-selection--single{
height:40px!important;min-height:40px;max-height:40px;border:1px solid var(--line);
border-radius:11px;background:var(--white);padding:0 30px 0 9px;display:flex!important;
align-items:center;flex-wrap:nowrap;overflow:hidden;position:relative;
transition:border-color .2s,box-shadow .2s}
.filters .select2-container--default .select2-selection--multiple:hover,
.filters .select2-container--default .select2-selection--single:hover{border-color:var(--line-2)}
.filters .select2-container--default.select2-container--focus .select2-selection--multiple,
.filters .select2-container--default.select2-container--open .select2-selection--multiple,
.filters .select2-container--default.select2-container--focus .select2-selection--single,
.filters .select2-container--default.select2-container--open .select2-selection--single{
outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(108,77,255,.08)}
.filters .select2-container--default .select2-selection--single .select2-selection__rendered{
padding:0!important;font-size:14px;font-weight:600;color:var(--ink);line-height:38px!important;
text-align:left!important;direction:ltr!important}
.filters .select2-selection--single .select2-selection__placeholder{color:var(--muted);font-weight:400}
.filters .select2-selection--single .select2-selection__arrow{height:100%!important;top:0!important;
right:8px;width:20px;display:flex!important;align-items:center;justify-content:center}
.filters .select2-selection--single .select2-selection__arrow b{display:none}
.filters .select2-selection--single .select2-selection__arrow::before{
content:"\f107";font-family:"Font Awesome 5 Free";font-weight:900;font-size:13px;color:var(--muted)}
.filters .select2-container--default .select2-selection--multiple .select2-selection__rendered{
margin:0!important;padding:0!important;display:flex!important;flex-wrap:nowrap;align-items:center;
gap:6px;overflow:hidden;justify-content:flex-start;text-align:left!important;
direction:ltr!important}
.filters .select2-selection__clear{position:absolute;right:9px;top:50%;transform:translateY(-50%);
margin:0!important;color:var(--muted);font-weight:700;z-index:2}
/* NB: no !important on `display` here — compactSelect2() (in the view's own
inline script) hides overflow chips beyond maxTags via jQuery .hide()
(an inline style="display:none"), and an !important display rule was
overriding that inline style, forcing hidden chips to render anyway and
overflow out of the box. Our 4-class selector already beats select2's own
2-class rule on specificity alone, so !important isn't needed for this
property — only for properties JS never touches inline. */
.filters .select2-container--default .select2-selection--multiple .select2-selection__choice{
display:inline-flex;align-items:center;gap:0;background:var(--paper-2);color:var(--ink);
border:0!important;border-radius:100px;padding:5px 8px 5px 10px!important;font-size:12.5px;
font-weight:700;margin:0!important;flex:none;white-space:nowrap;position:relative;
top:auto!important;left:auto!important;height:26px;max-width:160px}
.filters .select2-selection__choice__display{padding:0!important;order:1;line-height:1;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filters .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
position:static!important;top:auto!important;left:auto!important;right:auto!important;
order:2;align-self:center;margin:0 0 0 7px!important;cursor:pointer;color:#fff!important;
border:0!important;background:var(--violet)!important;font-weight:700;padding:0!important;
width:16px;height:16px;min-width:16px;border-radius:100px!important;font-size:11px;
line-height:16px!important;text-align:center;
display:inline-flex;align-items:center;justify-content:center;flex:none}
.filters .select2-selection__choice__remove span{color:inherit;line-height:1;font-size:11px}
.filters .select2-selection__choice__remove:hover{background:#5a3ce8!important;color:#fff!important}
.filters .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field{
font:inherit!important;font-family:var(--body)!important;font-size:13.5px;color:var(--ink);
margin:0!important;padding:2px 0;min-height:26px;text-align:left!important;direction:ltr!important}
.filters .select2-dropdown{
border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden}
.filters .select2-search--dropdown{padding:8px}
.filters .select2-search--dropdown .select2-search__field{
border:1px solid var(--line);border-radius:9px;padding:8px 11px;font:inherit;
font-family:var(--body);font-size:13.5px;outline:0}
.filters .select2-search--dropdown .select2-search__field:focus{border-color:var(--violet)}
.filters .select2-results__option{font-size:13.5px;font-weight:600;color:var(--body-ink);
padding:9px 13px}
/* select2 repurposes aria-selected for keyboard-highlight bookkeeping too
(it force-sets aria-selected="false" on the option being un-highlighted,
independent of real selection) — so it flickered the checkbox to
"unchecked" whenever a genuinely-selected row was merely hovered. Real
selection state only ever lives on the --selected class (toggled
exclusively by actual select/unselect), never touched by highlighting. */
.filters .select2-results__option--highlighted{
background:rgba(108,77,255,.08)!important;color:var(--ink)!important}
.filters .select2-results__option--selected{background:rgba(108,77,255,.06);
color:var(--ink)}
.filters .select2-container--default .select2-results>.select2-results__options{max-height:260px}
/* checkbox indicator in multi-select dropdowns, selected state uses the theme violet */
.filters .select2-results__options[aria-multiselectable="true"] .select2-results__option{
padding-left:38px;position:relative}
.filters .select2-results__options[aria-multiselectable="true"] .select2-results__option::before{
content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);
width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;background:#fff;
transition:background .15s,border-color .15s}
.filters .select2-results__options[aria-multiselectable="true"] .select2-results__option--selected::before{
background:var(--violet);border-color:var(--violet);content:"\f00c";
font-family:"Font Awesome 5 Free";font-weight:900;color:#fff;font-size:9px;
display:flex;align-items:center;justify-content:center}
/* status + badges */
.badge{font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:100px;
background:var(--paper-2);color:var(--ink);white-space:nowrap}
.badge.cy{background:rgba(39,226,212,.16);color:#0A7F76}
.badge.co{background:rgba(255,107,87,.12);color:#C8442A}
.badge.nu{background:#EEF0F7;color:#5a608c}
.badge.ok{background:rgba(18,165,148,.14);color:#0A7F76}
.badge.mute{background:#EEF0F7;color:#5a608c}
.days{display:inline-block;min-width:36px;padding:4px 10px;border-radius:9px;font-weight:800;
font-size:12.5px;font-variant-numeric:tabular-nums;text-align:center;
background:var(--paper-2);color:var(--violet)}
.days.soon{background:rgba(255,107,87,.13);color:#C8442A}
.alert{border-radius:var(--r-sm);padding:13px 16px;font-size:13.5px;font-weight:500;
border:1px solid}
.alert-info{background:rgba(108,77,255,.06);border-color:var(--line-2);color:#3b3a7a}
.alert-warn{background:rgba(255,107,87,.08);border-color:rgba(255,107,87,.3);color:#A33B24}
.alert-danger{background:rgba(255,107,87,.1);border-color:rgba(255,107,87,.35);color:#C8442A}
.note{background:rgba(108,77,255,.05);border:1px solid var(--line);border-left:3px solid var(--violet);
border-radius:var(--r-sm);padding:13px 16px;font-size:13.5px;color:#3b3a7a;font-weight:500}
.plans + .note{margin-top:26px}
/* charts */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:190px minmax(0,1fr) 96px;align-items:center;gap:14px}
.bar-row .bl{font-size:13px;color:#3b4170;font-weight:600;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.bar-row .bl.ar{direction:rtl;text-align:right}
.track{height:16px;background:var(--paper-2);border-radius:6px;overflow:hidden;display:flex;gap:2px}
.track i{display:block;height:100%;border-radius:0 6px 6px 0;
animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.track i:first-child{border-radius:6px}
@keyframes grow{from{width:0!important}}
.track i[data-w]{width:var(--w,auto)}
.bar-row .bv{text-align:right;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:18px;padding-top:15px;margin-top:15px;
border-top:1px solid var(--line);font-size:13px;font-weight:600}
.legend span{display:inline-flex;align-items:center;gap:8px;color:#3b4170}
.legend i{width:11px;height:11px;border-radius:4px;flex:none}
.donut-wrap{display:grid;place-items:center;padding:8px 0 2px;position:relative}
.donut-wrap svg circle{transition:stroke-dasharray 1s cubic-bezier(.2,.7,.2,1)}
.donut-mid{position:absolute;text-align:center}
.donut-mid b{display:block;font-family:var(--display);font-size:28px;line-height:1;
font-variant-numeric:tabular-nums}
.donut-mid span{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.08em}
.lgd-rows{display:flex;flex-direction:column;gap:11px;margin-top:16px;padding-top:15px;
border-top:1px solid var(--line)}
.lgd-rows > div{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600}
.lgd-rows i{width:11px;height:11px;border-radius:4px;flex:none}
.lgd-rows b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800}
/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld.wide{grid-column:1/-1}
.fld label{font-size:12.5px;font-weight:700;color:#3b4170}
.fld .in{min-height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;
display:flex;align-items:center;padding:10px 13px;font-size:14px;font-weight:500;
transition:border-color .2s,box-shadow .2s}
.fld .in:hover{border-color:var(--line-2)}
.fld .in.ph{color:var(--muted)}
.fld .hint{font-size:12px;color:var(--muted);font-weight:500}
/* Placeholders. Bootstrap paints them with --bs-secondary-color (#212529bf, i.e.
near-black at 75% alpha) and pins opacity to 1, so hint text reads as heavily as
real input. Use the theme's muted tone, matching .fld .in.ph and the select2
placeholder above. Applies site-wide, including RSForm's contact form. */
input::placeholder,textarea::placeholder,.form-control::placeholder{color:var(--muted);opacity:1}
/* real form inputs (e.g. Joomla-rendered login/register fields) not wrapped in .in */
.fld input[type=text],.fld input[type=email],.fld input[type=password],.fld input[type=tel]{
min-height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;
padding:10px 13px;font-size:14px;font-weight:500;width:100%;
transition:border-color .2s,box-shadow .2s}
.fld input[type=text]:hover,.fld input[type=email]:hover,.fld input[type=password]:hover,.fld input[type=tel]:hover{border-color:var(--line-2)}
.fld input[type=text]:focus,.fld input[type=email]:focus,.fld input[type=password]:focus,.fld input[type=tel]:focus{
outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,77,255,.12)}
/* Joomla core's password show/hide toggle — same fix as #osm-signup-page's
in osmembership.css (icon-eye/icon-eye-slash mapped to Font Awesome, the
button gets its own column in a flex .input-group instead of overlapping
the input, Edge's native reveal icon disabled). Shared with .auth-card
below since login (.fld) and registration/reset/remind (.control-group)
both render this same core field markup. */
/* No overflow:hidden: it clipped validationEngine's .formError prompt, which is
inserted as a sibling of the input and positioned outside this 44px-tall box,
so a too-short password blocked submit with no visible message. The input and
toggle carry their own radii below instead. */
.fld .password-group .input-group,.auth-card .password-group .input-group{
display:flex;flex-wrap:nowrap;align-items:stretch;
border:1px solid var(--line);border-radius:11px;background:#fff;
transition:border-color .2s,box-shadow .2s}
.fld .password-group .input-group:hover,.auth-card .password-group .input-group:hover{border-color:var(--line-2)}
.fld .password-group .input-group:focus-within,.auth-card .password-group .input-group:focus-within{
border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,77,255,.12)}
.fld .password-group input.form-control,.auth-card .password-group input.form-control{
flex:1 1 auto;min-width:0;border:0;border-radius:11px 0 0 11px;background:transparent}
.fld .password-group .input-password-toggle,.auth-card .password-group .input-password-toggle{
border-radius:0 11px 11px 0}
/* Length rule stated up front; injected by initPasswordHint() in tap.js. */
.fld .password-group .pw-hint,.auth-card .password-group .pw-hint{
margin:6px 0 0;font-size:12px;font-weight:600;color:var(--muted)}
.fld .password-group input.form-control:hover,.fld .password-group input.form-control:focus,
.auth-card .password-group input.form-control:hover,.auth-card .password-group input.form-control:focus{
border:0;box-shadow:none}
.fld .password-group input[type="password"]::-ms-reveal,.fld .password-group input[type="password"]::-ms-clear,
.auth-card .password-group input[type="password"]::-ms-reveal,.auth-card .password-group input[type="password"]::-ms-clear{
display:none!important}
.fld .input-password-toggle,.auth-card .input-password-toggle{
display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;
padding:0;border:0;border-left:1px solid var(--line);background:transparent;
color:var(--muted);cursor:pointer}
.fld .input-password-toggle:hover,.auth-card .input-password-toggle:hover{color:var(--violet)}
.fld .icon-eye,.fld .icon-eye-slash,.auth-card .icon-eye,.auth-card .icon-eye-slash{font-style:normal}
.fld .icon-eye::before,.fld .icon-eye-slash::before,
.auth-card .icon-eye::before,.auth-card .icon-eye-slash::before{
font-family:"Font Awesome 5 Free";font-weight:900;font-size:15px}
.fld .icon-eye::before,.auth-card .icon-eye::before{content:"\f06e"}
.fld .icon-eye-slash::before,.auth-card .icon-eye-slash::before{content:"\f070"}
.fld .invalid-feedback{display:none;font-size:12px;font-weight:600;color:#e5484d;margin-top:-2px}
.fld.is-invalid input{border-color:#e5484d}
.fld.is-invalid .invalid-feedback{display:block}
/* Contact page's RSForm-rendered form (Bootstrap's own .row/.col-md-* grid
already applies via bootstrap.min.css) — match the site's field/button
language instead of RSForm's generic defaults */
.rsform .form-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.rsform .formRequired{color:var(--coral);margin-left:3px;font-weight:700}
.rsform .form-control,.rsform .form-select{
width:100%;min-height:46px;border:1px solid var(--line);border-radius:11px;background-color:#fff;
padding:10px 14px;font-size:14px;font-weight:500;font-family:var(--body);color:var(--ink);
transition:border-color .2s,box-shadow .2s}
.rsform textarea.form-control{min-height:130px;resize:vertical}
.rsform select.form-select{
padding-right:36px;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23555b70' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat:no-repeat;background-position:right 12px center;background-size:14px 10px;
appearance:none;-webkit-appearance:none}
.rsform .form-control:hover,.rsform .form-select:hover{border-color:var(--line-2)}
.rsform .form-control:focus,.rsform .form-select:focus{
outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,77,255,.12)}
.rsform [data-rsfp-hashcash]{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
border-radius:11px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;
color:var(--ink);cursor:pointer}
.rsform .hashcash{width:18px;height:18px;flex:none}
.rsform button[type=submit],.rsform input[type=submit]{font-family:var(--body);font-weight:700;
font-size:14.5px;padding:13px 26px;border-radius:100px;border:0;cursor:pointer;
background:linear-gradient(120deg,var(--violet),#7d5bff 55%,var(--cyan));color:#fff}
/* osmembership register form — section headings, file picker, terms, amount */
.osm-head{font-family:var(--display);font-size:17px;letter-spacing:-.02em;margin:30px 0 16px;
padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px}
.osm-head::before{content:"";width:4px;height:18px;border-radius:100px;
background:linear-gradient(180deg,var(--violet),var(--cyan))}
.panel-b > .form-grid:first-child + .osm-head{margin-top:26px}
.ctl.multi{color:var(--muted)}
.filepick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;
border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--paper)}
.filepick .fname{font-size:13.5px;font-weight:600;color:var(--body-ink)}
.in.amount{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.in.amount .cur{font-family:var(--body);font-size:12.5px;font-weight:800;color:var(--muted);
letter-spacing:.05em;margin-right:5px;vertical-align:1px}
.terms{display:flex;align-items:center;gap:11px;margin-top:26px;padding-top:20px;
border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--body-ink)}
.terms input{width:17px;height:17px;accent-color:var(--violet);flex:none}
.terms a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.req{color:var(--coral)}
/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs a{padding:11px 18px;font-size:14px;font-weight:700;color:var(--muted);
border-radius:11px 11px 0 0;margin-bottom:-1px;border:1px solid transparent;border-bottom:0;
transition:.2s}
.tabs a:hover{color:var(--ink);background:var(--paper-2)}
.tabs a.on{color:var(--violet);background:#fff;border-color:var(--line)}
/* icon buttons + misc */
.ibtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;
display:inline-grid;place-items:center;font-size:12.5px;color:var(--muted);cursor:pointer;
transition:.2s;vertical-align:middle}
.ibtn:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-1px)}
.ibtn.danger{border-color:rgba(200,68,42,.3);color:#C8442A}
.ibtn.danger:hover{border-color:var(--coral);color:#C8442A}
.ibtn.view:hover{border-color:var(--blue);color:var(--blue)}
.kv{border-collapse:collapse;width:100%;font-size:13.5px}
.kv td{padding:11px 0;vertical-align:top;border-bottom:1px solid rgba(108,77,255,.08)}
.kv tr:last-child td{border-bottom:0}
.kv .cap{color:var(--muted);font-size:12.5px;width:200px;padding-right:12px;font-weight:600}
.kv .sep{width:14px;color:#b9bed8}
.kv .val{font-weight:600}
.kv .val.ar{direction:rtl;text-align:right}
.artlist{display:flex;flex-direction:column;gap:16px;max-width:840px}
.artitem{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px;
box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:10px;
align-items:flex-start;transition:transform .25s,box-shadow .25s}
.artitem:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.artitem h3{font-size:20px}
.artmeta{font-size:12.5px;color:var(--muted);font-weight:600}
.artitem p{color:var(--body-ink);font-size:14.5px;line-height:1.65;font-weight:500;max-width:68ch}
/* plans */
.plans{display:grid;gap:22px;align-items:start}
.plans.n3{grid-template-columns:repeat(3,1fr)}
.plans.n2{grid-template-columns:repeat(2,1fr);max-width:800px;margin:0 auto}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
display:flex;flex-direction:column;gap:16px;position:relative;box-shadow:var(--shadow-card);
transition:transform .25s,box-shadow .25s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan.feature{background:var(--ink);color:#fff;border-color:transparent}
.plan.feature::before{content:"";position:absolute;inset:0;border-radius:var(--r);
background:radial-gradient(60% 80% at 90% 0%,rgba(108,77,255,.35),transparent 60%);
pointer-events:none}
.plan > *{position:relative;z-index:1}
.plan .ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:2;
background:linear-gradient(120deg,var(--cyan),var(--violet));color:#fff;font-size:10px;
font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:6px 14px;
border-radius:100px;white-space:nowrap;box-shadow:0 10px 24px -10px var(--violet)}
.plan .phead{display:flex;align-items:center;gap:11px}
.plan .picon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
font-size:14px;color:#fff;background:linear-gradient(135deg,var(--violet),var(--violet-2))}
.plan.feature .picon{background:rgba(255,255,255,.12)}
.plan h4{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
color:var(--muted);font-family:var(--body)}
.plan.feature h4{color:#b6b1e8}
.plan .who{font-size:14px;color:var(--body-ink);font-weight:500;line-height:1.55}
.plan.feature .who{color:#a9a5d6}
.price-row{display:flex;align-items:baseline;gap:8px}
.price-row .cur{font-size:14px;color:var(--muted);font-weight:700}
.price-row .amt{font-family:var(--display);font-size:44px;letter-spacing:-.035em;
font-variant-numeric:tabular-nums}
.price-row .per{font-size:13.5px;color:var(--muted);font-weight:600}
.plan.feature .price-row .cur,.plan.feature .price-row .per{color:#a9a5d6}
.allow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:13px;
padding:12px 14px;background:#FBFAFF}
.allow b{font-family:var(--display);font-size:20px;color:var(--violet)}
.allow span{font-size:13.5px;font-weight:700;line-height:1.3}
.allow span small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.plan.feature .allow{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.plan.feature .allow b{color:var(--cyan)}
.plan.feature .allow span small{color:#a9a5d6}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;
font-size:14px;font-weight:500;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li i{color:var(--violet);font-size:12px;margin-top:4px;flex:none}
.plan.feature li i{color:var(--cyan)}
.plan li.off{color:var(--muted)}
.plan li.off i{color:#cfd2e6}
.plan .btn{justify-content:center}
/* plan tier cards + shared feature-comparison columns (bidder-plans article) —
tiers differ only by sector/user count, so the feature list below is common
to every plan rather than repeated per-card. */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan-card{display:block;border-radius:var(--r-md);overflow:hidden;position:relative;
box-shadow:var(--shadow-card);transition:transform .25s,box-shadow .25s}
.plan-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan-card-head{background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff;
text-align:center;padding:24px 20px}
.plan-card-head h3{font-size:23px;margin-bottom:6px}
.plan-card-head p{font-size:13.5px;color:#E4E7FA;font-weight:700}
.plan-card-foot{background:var(--ink);color:#C9CEE8;text-align:center;padding:20px 18px 26px}
.plan-card-foot p{font-size:13px;line-height:1.55;margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
.feature-col{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
overflow:hidden;transition:transform .25s,box-shadow .25s}
.feature-col:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.feature-col-head{background:var(--violet);color:#fff;text-align:center;font-weight:800;
font-size:13px;letter-spacing:.01em;padding:14px}
.feature-list{list-style:none;margin:0;padding:18px 18px 20px}
.feature-list li{font-size:13px;color:var(--body-ink);font-weight:500;padding-left:22px;
position:relative;margin-bottom:12px;line-height:1.5}
.feature-list li:last-child{margin-bottom:0}
.feature-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--violet);
font-weight:800}
.price-note{font-size:12.5px;color:var(--muted);margin-top:20px;text-align:center;font-style:italic}
/* comparison table */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
box-shadow:var(--shadow-card)}
table.cmp{border-collapse:collapse;width:100%;font-size:14px}
.cmp th{padding:16px;border-bottom:1px solid var(--line);vertical-align:bottom;text-align:center;
font-family:var(--display);font-size:16px}
.cmp thead th:first-child{text-align:left;font-family:var(--body);font-size:11px;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cmp .pop{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--coral);margin-bottom:4px;font-family:var(--body)}
.cmp td{padding:13px 16px;border-bottom:1px solid rgba(108,77,255,.08);text-align:center;
color:var(--body-ink);font-weight:500}
.cmp td:first-child{text-align:left;font-weight:700;color:var(--ink)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--violet)}
.cmp .no{color:#cfd2e6}
.cmp .hi{background:#FBFAFF}
.cmp tbody tr:hover td{background:var(--paper-2)}
/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:840px;margin:46px auto 0}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
box-shadow:var(--shadow-card);overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:var(--line-2)}
.faq-q{width:100%;display:flex;gap:16px;align-items:center;font-family:var(--body);
font-weight:700;font-size:15px;padding:18px 22px;background:none;border:0;cursor:pointer;
text-align:left;color:var(--ink)}
.faq-q .tg{margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;display:grid;
place-items:center;background:var(--paper-2);color:var(--muted);font-size:12px;
transition:.25s}
.faq-item.open .faq-q .tg{background:var(--violet);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.7,.2,1)}
.faq-a p{padding:0 22px 20px;color:var(--body-ink);font-size:14.5px;line-height:1.7;
font-weight:500;max-width:74ch}
/* auth / misc guest */
.auth{padding:60px 0 80px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px;
display:flex;flex-direction:column;gap:17px;width:100%;max-width:450px;
box-shadow:var(--shadow)}
.auth-card h2{font-size:27px}
.auth-card .alt{font-size:13.5px;color:var(--muted);text-align:center;font-weight:500}
.auth-card .alt a{color:var(--violet);font-weight:700}
.rowline{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;
font-weight:600}
.rowline a{color:var(--violet)}
.auth-card.wide{max-width:640px}
.auth-card p.desc{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.6;margin:0}
/* Joomla core form renderer output (reset/remind/registration) — reskinned to match .fld */
.auth-card .control-group{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.tap-back-link{display:inline-flex;align-items:center;gap:6px}
.auth-card .control-label{padding:0}
.auth-card .control-label label{font-size:12.5px;font-weight:700;color:#3b4170;display:block}
.auth-card .controls{width:100%}
.auth-card input.form-control,.auth-card select.form-control,.auth-card textarea.form-control{
min-height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;
padding:10px 13px;font-size:14px;font-weight:500;width:100%;
transition:border-color .2s,box-shadow .2s}
.auth-card select.form-control{
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c86b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat:no-repeat;background-position:right 13px center;background-size:12px 9px;
padding-right:32px}
.auth-card input.form-control:hover,.auth-card select.form-control:hover,.auth-card textarea.form-control:hover{border-color:var(--line-2)}
.auth-card input.form-control:focus,.auth-card select.form-control:focus,.auth-card textarea.form-control:focus{
outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,77,255,.12)}
.auth-card fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:17px}
.auth-card legend{display:none}
.legal{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px}
.legal-toc{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:8px;
font-size:13.5px;font-weight:600}
.legal-toc b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
margin-bottom:5px}
.legal-toc a{color:var(--muted);transition:color .2s}
.legal-toc a:hover,.legal-toc a.on{color:var(--violet)}
.prose{display:flex;flex-direction:column;gap:15px}
.prose h1{font-size:28px}
.prose h2{font-size:30px}
.prose h3{font-size:18px;margin-top:12px}
.prose p{color:var(--body-ink);font-size:15px;line-height:1.75;font-weight:500}
.prose .meta{font-size:13px;color:var(--muted)}
.prose ul,.prose ol{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.prose li{color:var(--body-ink);font-size:15px;line-height:1.6;font-weight:500}
.prose hr{border:0;border-top:1px solid var(--line);margin:0}
.prose strong,.prose b{color:var(--ink);font-weight:800}
/* component-only template (tmpl=component) — used for modal iframes like the
Terms and Conditions popup on the register form. There's no header/footer
chrome here, so the article body needs its own breathing room; .prose
already handles the typography once wrapped around it. */
.component-frame .prose{margin:0 auto;padding:16px 20px 20px}
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:26px; padding: 0 5%;}
.cline{display:flex;gap:14px;align-items:flex-start;font-size:14px;font-weight:600}
.cline .ic{width:38px;height:38px;border-radius:11px;background:var(--paper-2);color:var(--violet);
display:grid;place-items:center;flex:none}
.cline b{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);margin-bottom:2px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:46px}
.step{padding:22px 26px 22px 0;border-top:2px solid var(--line)}
.step.on{border-top-color:var(--violet)}
.step .sn{font-weight:800;font-size:12px;letter-spacing:.12em;color:var(--violet)}
.step h3{font-size:18px;margin:9px 0 8px}
.step p{font-size:14px;color:var(--body-ink);font-weight:500;line-height:1.6}
.sector-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:40px}
.sector-chips span{border:1px solid var(--line);background:#fff;border-radius:100px;
padding:8px 16px;font-size:13.5px;font-weight:600;color:#3b4170;transition:.2s}
.sector-chips span:hover{border-color:var(--violet);color:var(--violet)}
.sector-chips span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Ask TIA */
.tia{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:var(--r-md);box-shadow:var(--shadow-card);
max-height:min(680px,calc(100vh - 200px));overflow:hidden}
.tia-head{flex:none;display:flex;align-items:center;gap:13px;padding:16px 20px;color:#fff;
background:linear-gradient(120deg,var(--ink),var(--ink-3))}
.tia-mask{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;
font-size:16px;background:linear-gradient(135deg,var(--violet),var(--cyan));flex:none}
.tia-nm{font-weight:800;font-size:15.5px;display:flex;align-items:center;gap:9px;color:#fff}
.tia-ai{font-size:9.5px;font-weight:800;letter-spacing:.11em;background:var(--cyan);color:#04322E;
padding:3px 8px;border-radius:100px}
.tia-ro{font-size:12.5px;color:#9fa5cf;font-weight:600}
.tia-log{flex:0 1 auto;min-height:140px;overflow-y:auto;background:#fff;
padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;flex:none;
gap:12px;max-width:96%}
.msg.tia{width:100%}
.msg.me{margin-left:auto;flex-direction:row-reverse;max-width:76%}
.msg .av{width:36px;height:36px;border-radius:11px;flex:0 0 36px;display:grid;place-items:center;
font-size:13px;font-weight:800;color:#fff}
.msg.tia .av{background:linear-gradient(135deg,var(--violet),var(--cyan))}
.msg.me .av{background:var(--ink)}
.bub{padding:14px 18px;border-radius:16px;font-size:14px;line-height:1.6;font-weight:500;
flex:0 1 auto;min-width:0}
.msg.tia .bub{background:var(--paper-2);color:var(--ink);flex:1}
.msg.me .bub{background:var(--ink);color:#fff}
.bub table{margin-top:12px;font-size:13px;border-collapse:collapse;width:100%}
.bub th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);border-bottom:1px solid var(--line);padding:6px 8px 6px 0}
.bub td{padding:6px 8px 6px 0;border-bottom:1px solid rgba(108,77,255,.08)}
.tia-comp{flex:none;border-top:1px solid var(--line);padding:16px 20px 18px;display:flex;
flex-direction:column;gap:12px}
.tia-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tia-chips .lead{font-size:11.5px;color:var(--muted);font-weight:800;letter-spacing:.1em;
text-transform:uppercase}
.qchip{font:inherit;font-family:var(--body);font-size:13px;font-weight:600;padding:7px 14px;
border-radius:100px;cursor:pointer;border:1px solid var(--line);background:#fff;
color:#3b4170;transition:.2s}
.qchip:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-1px)}
.qchip.guided{background:var(--paper-2);border-color:var(--line-2);color:var(--violet)}
.tia-in{display:flex;gap:11px;align-items:center}
.tia-in .box{flex:1;height:46px;border:1px solid var(--line);border-radius:14px;background:#FBFAFF;
display:flex;align-items:center;padding:0 17px}
.tia-in .box input{border:0;outline:0;background:transparent;font:inherit;font-family:var(--body);
font-size:14px;width:100%;color:var(--ink)}
.tia-ph{font-size:14px;color:var(--muted)}
.tia-hint{font-size:12px;color:var(--muted);font-weight:500}
.tia-head .btn{margin-left:auto}
.tia-preview{flex:1;min-height:0}
.tia-preview img{width:100%;height:100%;display:block;box-shadow:var(--shadow-card)}
/* Ask TIA home promo (feature card + inert chat preview, side by side) */
.tia-promo{display:grid;grid-template-columns:.9fr 1.3fr;gap:28px;align-items:stretch;margin-top:46px}
.tia-promo .card{margin:0}
.tia-promo .tia{max-height:none}
/* upload logo */
.cl-wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.cl-current{background:#FBFAFF;border:1px solid var(--line);border-radius:10px;width:240px;
height:80px;display:grid;place-items:center;overflow:hidden}
.cl-current img{width:100%;height:100%;object-fit:contain}
.cl-current .lm{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
color:#fff;font-family:var(--display);font-size:20px;
background:linear-gradient(135deg,var(--violet),var(--cyan))}
.cl-meta{font-size:12.5px;color:var(--muted);margin:12px 0 16px;font-weight:600}
.cl-drop{border:2px dashed var(--line-2);border-radius:14px;background:#FBFAFF;padding:30px;
text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;
transition:border-color .2s,background .2s;cursor:pointer}
.cl-drop:hover{border-color:var(--violet);background:var(--paper-2)}
.cl-drop .bi{font-size:28px;color:var(--violet);margin-bottom:8px}
.cl-drop p{font-size:13.5px;color:var(--muted);font-weight:500}
.cl-crop{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.cl-box{background:var(--ink);border-radius:12px;height:190px;display:grid;place-items:center;
overflow:hidden}
.cl-frame{width:229px;height:124px;border:2px solid #fff;outline:9999px solid rgba(10,18,48,.6)}
.cl-bar{display:flex;align-items:center;gap:11px;margin-top:16px;flex-wrap:wrap}
.cl-size{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600}
/* tender detail */
.tender-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tender-head .rt{margin-left:auto;display:flex;align-items:center;gap:10px}
.lab-hi{background:var(--paper-2);color:var(--violet);font-size:12.5px;font-weight:800;
padding:6px 13px;border-radius:100px}
.days-left{display:inline-flex;align-items:center;gap:8px;
color:#C8442A;font-size:13px;font-weight:800;padding:6px 14px;border-radius:100px}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px 26px;
box-shadow:var(--shadow-card)}
.box .bt{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.box .st{font-size:14.5px;font-weight:800;margin:20px 0 11px}
.box .st:first-of-type{margin-top:0}
.box h2.ar{direction:rtl;text-align:right;font-size:24px}
.box p.ar{direction:rtl;text-align:right;color:var(--body-ink);font-weight:500;line-height:1.7;
margin-bottom:16px}
.tgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;align-items:start}
.tside{display:flex;flex-direction:column;gap:18px}
.dbox{background:#fff;border:1px solid var(--line);border-left:3px solid var(--violet);
border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-card)}
.dbox.hi{border-left-color:var(--coral)}
.dbox .dl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.dbox b{font-family:var(--display);font-size:20px;font-variant-numeric:tabular-nums}
.dbox .tm{margin-left:8px;font-size:13px;color:var(--muted);font-weight:600}
.figs{display:flex;flex-direction:column}
.fig{display:flex;align-items:baseline;gap:12px;padding:11px 0;
border-bottom:1px solid rgba(108,77,255,.08)}
.fig:last-child{border-bottom:0}
.fig .fl{flex:1;font-size:13px;color:var(--muted);font-weight:600}
.fig b{font-variant-numeric:tabular-nums;font-size:14px}
.dates{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px}
.dates.one{grid-template-columns:1fr;gap:16px}
.dates .cap{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin-bottom:4px}
.dates .val{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.dates .val.ar{direction:rtl;text-align:right;font-variant-numeric:normal}
.sc-id{display:flex;align-items:center;gap:20px;padding:6px 2px}
.sc-logo{width:84px;height:84px;border-radius:20px;display:grid;place-items:center;color:#fff;
font-family:var(--display);font-size:28px;flex:none;overflow:hidden;
background:linear-gradient(135deg,var(--violet),var(--cyan))}
.pdf-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);
border-radius:12px;background:#FBFAFF;font-size:14px;font-weight:600;transition:.2s}
.pdf-row:hover{border-color:var(--violet);transform:translateY(-2px)}
.pdf-ic{width:38px;height:38px;border-radius:11px;background:rgba(255,107,87,.12);color:#C8442A;
display:grid;place-items:center;font-size:16px;flex:none}
.pdf-act{margin-left:auto;color:var(--violet);font-weight:800}
.tap-scp-state{text-align:center;padding:3rem 1.5rem}
.tap-scp-state i{font-size:2.2rem;color:var(--muted);margin-bottom:.75rem;display:block}
.tap-scp-state p{color:var(--muted);margin:0;font-size:.95rem}
/* Detail pages (Tender / Subcontractor) — these stack several .box panels
directly in .page-body, so the panel-to-panel breathing room is entirely
down to .page-body's flex gap. That gap is shared by every page in the
app, so it's widened here via Joomla's own view-* body class instead of
touching it globally and disturbing pages that were already tuned at 20px. */
body.view-tender .page-body,
body.view-subcontractor .page-body{gap:28px;padding-top:24px}
/* ===== user profile — sticky left panel + tabbed main column =====
The panel is position:sticky so it holds its place while the main column
scrolls. The plan detail lives INSIDE this panel, not in the app sidebar. */
.pgrid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;align-items:start}
.pcard{position:sticky;top:22px;background:var(--white);border:1px solid var(--line);
border-radius:var(--r-md);box-shadow:var(--shadow-card);overflow:hidden}
.pc-id{position:relative;padding:30px 22px 24px;text-align:center;color:#fff;
background:linear-gradient(150deg,var(--ink-2),var(--ink-3) 55%,#2a1f6b)}
.pc-id::after{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(70% 60% at 20% 0%,rgba(108,77,255,.5),transparent 62%),
radial-gradient(60% 60% at 100% 100%,rgba(39,226,212,.22),transparent 62%)}
.pc-av{position:relative;z-index:1;width:76px;height:76px;border-radius:24px;margin:0 auto 14px;
display:grid;place-items:center;font-family:var(--display);font-size:31px;color:#fff;
background:linear-gradient(135deg,var(--violet),var(--cyan));
box-shadow:0 18px 36px -16px rgba(0,0,0,.7),0 0 0 4px rgba(255,255,255,.1)}
.pc-nm{position:relative;z-index:1;font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.pc-ro{position:relative;z-index:1;margin-top:3px;font-size:13px;font-weight:600;color:#aeb4dd}
.pc-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:13px;
padding:5px 12px;border-radius:100px;font-size:11.5px;font-weight:800;letter-spacing:.04em;
color:#5df0e0;background:rgba(39,226,212,.14);border:1px solid rgba(39,226,212,.3)}
.pc-sec{padding:18px 20px;border-top:1px solid var(--line)}
.pc-h{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);margin-bottom:12px}
.pc-list{list-style:none;display:flex;flex-direction:column;gap:11px; padding:0;}
.pc-list li{display:flex;gap:11px;font-size:13.5px;font-weight:600;color:var(--ink);
line-height:1.5;word-break:break-word}
.pc-list i{flex:0 0 18px;width:18px;text-align:center;color:var(--violet);font-size:14px;
margin-top:2px}
.pc-plan{margin:0 20px 18px;border-radius:14px;padding:16px;
background:linear-gradient(150deg,rgba(108,77,255,.1),rgba(39,226,212,.08));
border:1px solid rgba(108,77,255,.22)}
.pp-top{display:flex;align-items:center;gap:12px}
.pp-ic{width:38px;height:38px;border-radius:12px;flex:0 0 38px;display:grid;place-items:center;
color:#fff;font-size:15px;background:linear-gradient(135deg,var(--violet),#9A7BFF);
box-shadow:0 10px 22px -12px var(--violet)}
.pp-n{font-family:var(--display);font-size:17px;letter-spacing:-.02em}
.pp-t{font-size:12px;font-weight:600;color:var(--muted);margin-top:1px}
.pp-meter{height:6px;border-radius:100px;background:rgba(108,77,255,.16);margin:14px 0 12px;
overflow:hidden}
.pp-meter span{display:block;height:100%;width:0;border-radius:100px;
background:linear-gradient(90deg,var(--violet),var(--cyan));
transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.pp-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:600;
color:var(--muted);padding:5px 0}
.pp-row b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.pp-btn{margin-top:12px;width:100%;justify-content:center}
.pc-links{display:flex;flex-direction:column;padding:6px 12px 14px;border-top:1px solid var(--line)}
.pc-links a{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:10px;
font-size:13.5px;font-weight:700;color:var(--body-ink);transition:background .18s,color .18s}
.pc-links a i{width:16px;text-align:center;color:var(--muted);transition:color .18s}
.pc-links a:hover{background:var(--paper-2);color:var(--violet)}
.pc-links a:hover i{color:var(--violet)}
.pmain{display:flex;flex-direction:column;gap:18px;min-width:0}
/* Upgrade Membership + Renew Membership — same selectable-tile design,
shared between common/upgrade_options.php and common/renew_options.php
(.osm-upgrade-option / .osm-renew-option render identical .uo-* markup). */
.osm-upgrade-panel{margin-top:22px}
.osm-form-heading{font-family:var(--display);font-size:19px;letter-spacing:-.02em;
margin-bottom:16px}
.osm-upgrade-options,.osm-renew-options{list-style:none;display:flex;flex-direction:column;
gap:12px;margin:0 0 20px;padding:0}
.osm-upgrade-option,.osm-renew-option{position:relative}
.osm-upgrade-option input[type="radio"],.osm-renew-option input[type="radio"]{
position:absolute;opacity:0;width:1px;height:1px}
.osm-upgrade-option label,.osm-renew-option label{display:flex;align-items:center;gap:14px;
padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;
transition:border-color .18s,background .18s,box-shadow .18s}
.osm-upgrade-option label:hover,.osm-renew-option label:hover{border-color:rgba(108,77,255,.35)}
.osm-upgrade-option input:checked + label,.osm-renew-option input:checked + label{
border-color:var(--violet);background:rgba(108,77,255,.05);box-shadow:0 0 0 1px var(--violet) inset}
.osm-upgrade-option input:focus-visible + label,.osm-renew-option input:focus-visible + label{
outline:2px solid var(--violet);outline-offset:2px}
.uo-radio{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);
transition:border-color .18s;position:relative}
.uo-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--violet);
transform:scale(0);transition:transform .18s}
.osm-upgrade-option input:checked + label .uo-radio,
.osm-renew-option input:checked + label .uo-radio{border-color:var(--violet)}
.osm-upgrade-option input:checked + label .uo-radio::after,
.osm-renew-option input:checked + label .uo-radio::after{transform:scale(1)}
.uo-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.uo-plans{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14.5px;color:var(--ink)}
.uo-plans i{font-size:11px;color:var(--muted)}
.uo-sub{font-size:12.5px;font-weight:600;color:var(--muted)}
.uo-price{flex:0 0 auto;font-family:var(--display);font-size:17px;letter-spacing:-.02em;
color:var(--ink);white-space:nowrap}
.osm-upgrade-option input:checked + label .uo-price,
.osm-renew-option input:checked + label .uo-price{color:var(--violet)}
/* Renew Membership page — dark gradient hero (icon + title/meta + price
badge) over a white body card holding the same .osm-renew-option tiles
used above. Markup comes from templates/zudioz/html/com_osmembership/
renewmembership/default.php; had no CSS at all before this. */
.tap-renew-wrap{display:flex;flex-direction:column;gap:22px}
.tap-renew-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;
padding:26px 28px;border-radius:var(--r-md);color:#fff;
background:linear-gradient(150deg,var(--ink-2),var(--ink-3) 55%,#2a1f6b);
box-shadow:var(--shadow)}
.tap-renew-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(70% 60% at 15% 0%,rgba(108,77,255,.5),transparent 62%),
radial-gradient(60% 60% at 100% 100%,rgba(39,226,212,.22),transparent 62%)}
.tap-renew-icon{position:relative;z-index:1;flex:0 0 52px;width:52px;height:52px;border-radius:16px;
display:grid;place-items:center;font-size:20px;color:#fff;
background:linear-gradient(135deg,var(--violet),var(--cyan));
box-shadow:0 12px 26px -12px var(--violet)}
.tap-renew-info{position:relative;z-index:1;flex:1;min-width:0}
.tap-renew-title{font-family:var(--display);font-size:23px;letter-spacing:-.02em;color:#fff;
margin-bottom:8px}
.tap-renew-meta{display:flex;flex-wrap:wrap;gap:16px}
.tap-renew-meta span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
color:#c9cee8}
.tap-renew-meta i{color:var(--cyan);font-size:12px}
.tap-renew-badge{position:relative;z-index:1;flex:0 0 auto;text-align:right;padding:14px 18px;
border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.tap-renew-badge-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:#a9a5d6}
.tap-renew-badge-amount{display:block;font-family:var(--display);font-size:24px;
letter-spacing:-.02em;color:#fff;margin-top:2px}
.tap-renew-badge-period{display:block;font-size:12px;font-weight:600;color:#a9a5d6;margin-top:1px}
.tap-renew-body{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
box-shadow:var(--shadow-card);padding:24px 26px}
.tap-renew-section-title{display:flex;align-items:center;gap:9px;font-family:var(--display);
font-size:16px;letter-spacing:-.01em;margin-bottom:8px}
.tap-renew-section-title i{color:var(--violet);font-size:14px}
.tap-renew-desc{color:var(--body-ink);font-size:13.5px;font-weight:500;line-height:1.6;
margin-bottom:18px}
@media(max-width:640px){
.tap-renew-hero{flex-wrap:wrap}
.tap-renew-badge{text-align:left;width:100%}
}
/* Full-page DataTables loading backdrop — shared by every server-side
DataTables view (Tenders/Competitions was first; Subcontractors reuses
it). Moved here from tap-tendersajax.css since it's no longer specific
to one view. Markup: #tapDtLoader, toggled via .is-on on DataTables'
own `processing.dt` event. */
.tap-dt-loader{display:none;position:fixed;inset:0;z-index:20000;
background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
align-items:center;justify-content:center}
.tap-dt-loader.is-on{display:flex}
.tap-dt-loader-box{display:flex;flex-direction:column;align-items:center;gap:14px;
padding:26px 34px;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tap-dt-loader-spinner{width:38px;height:38px;border:3px solid #d9e2ec;
border-top-color:#1b5e9f;border-radius:50%;animation:tapDtSpin .7s linear infinite}
.tap-dt-loader-text{font-size:13px;font-weight:600;color:#1b5e9f;letter-spacing:.02em}
@keyframes tapDtSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tap-dt-loader-spinner{animation:none}}
/* ===== responsive ===== */
@media(max-width:1100px){
.tiles,.grid-4{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:1fr}
.fgrid{grid-template-columns:repeat(3,1fr)}
.dates{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
.hero-inner,.dash-grid,.quote,.foot-grid,.tgrid,.contact-grid,.legal{grid-template-columns:1fr}
.nav-burger{display:block}
/* .links / .app-top-links go position:fixed below, dropping out of this
flex row — with only burger, logo and the CTA left in flow,
justify-content:space-between would spread the burger away from the
logo instead of sitting next to it, so switch to grouping the pair on
the left and letting the CTA float to the right on its own margin. */
.nav-inner,.app-top-inner{justify-content:flex-start;gap:14px}
.nav-cta,.app-top-cta{margin-left:auto}
body.menu-open{overflow:hidden}
/* .nav is a stacking context (position:relative + z-index:999), so nothing
inside it can out-rank a sibling of .nav no matter how high its z-index —
a backdrop on body::after would always paint over the drawer. So the
scrim lives INSIDE .nav too, and the whole header is lifted above the
page while the menu is open; the drawer then simply out-ranks the scrim
within that shared context. */
body.menu-open .nav{z-index:1002}
.nav::after{content:"";position:fixed;inset:0;background:rgba(10,18,48,.5);
z-index:1;opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .3s,visibility .3s}
body.menu-open .nav::after{opacity:1;visibility:visible;pointer-events:auto}
.links{position:fixed;top:0;left:0;bottom:0;width:312px;max-width:85vw;
flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
padding:18px 16px 28px;background:var(--white);
box-shadow:26px 0 60px -22px rgba(10,18,48,.45);z-index:2;
overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden;
transform:translateX(-100%);
transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility .32s}
body.menu-open .links{transform:none;visibility:visible}
.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding-bottom:15px;margin-bottom:10px;border-bottom:1px solid var(--line);flex:none}
.links nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%}
.has-sub{width:100%}
/* the underline sweep is a desktop hover affordance — it renders as a stray
bar under each row in the stacked drawer */
.links nav>a::after,.links .subtog::after{display:none}
.links nav>a,.links .subtog{padding:13px 12px;width:100%;border-radius:11px;
font-size:15px;justify-content:space-between}
/* Guest nav's row is now label link + separate caret button side by side —
let the label take the remaining space instead of claiming the full row,
and give the caret a comfortable tap target for the toggle-only action. */
.links .has-sub .subtog{width:auto;flex:1 1 auto}
.links .subtog-caret{padding:13px 12px;flex:0 0 auto}
.links nav>a:active,.links .subtog:active{background:var(--paper-2)}
.links nav>a.on{background:var(--paper-2);color:var(--violet)}
/* submenu becomes a tap-to-expand accordion; JS drives max-height off
scrollHeight (same idiom as .faq-a) so the motion matches the content */
.submenu{position:static;transform:none;opacity:1;visibility:visible;
box-shadow:none;border:0;padding:0;min-width:0;background:none;
max-height:0;overflow:hidden;
transition:max-height .3s cubic-bezier(.2,.7,.2,1)}
/* The desktop rule `.has-sub.open .submenu` (3 classes) out-specifies the
bare `.submenu` above — a media query adds no specificity of its own — so
its centering transform:translate(-50%,0) leaked into the drawer and shoved
every opened submenu half its width to the left. Re-stated here at equal
specificity; this block is later in the file, so it wins on source order.
The transform stays on desktop, where left:50% depends on it for centering. */
.has-sub.open .submenu{transform:none}
/* desktop hover-bridge, meaningless in a stacked accordion */
.submenu::before{display:none}
.submenu a{padding:11px 12px 11px 24px;border-radius:9px;font-size:14.5px}
.stats-inner{grid-template-columns:repeat(2,1fr);gap:14px}
.stat + .stat{box-shadow:none}
.feat,.feat.n4,.plans.n3,.plans.n2,.grid-2,.plan-grid,.feature-grid{grid-template-columns:1fr}
.tia-promo{grid-template-columns:1fr}
.builder-row{grid-template-columns:1fr;gap:18px}
.builder-col,.builder-col-1,.builder-col-2,.builder-col-3,.builder-col-4,.builder-col-5,
.builder-col-6,.builder-col-7,.builder-col-8,.builder-col-9,.builder-col-10,.builder-col-11,
.builder-col-12{grid-column:span 1}
.hero-vis{order:-1}
.steps{grid-template-columns:1fr 1fr}
.legal-toc{position:static}
.cta-card{padding:46px 30px!important}
.quote{padding:36px 28px!important;gap:28px!important}
.builder-row{padding:30px 5%!important}
.app-top-cta .nav-burger{display:block}
/* same stacking-context fix as .nav above */
body.menu-open .app-top{z-index:1002}
.app-top::after{content:"";position:fixed;inset:0;background:rgba(10,18,48,.55);
z-index:1;opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .3s,visibility .3s}
body.menu-open .app-top::after{opacity:1;visibility:visible;pointer-events:auto}
.app-top-links{display:flex;position:fixed;top:0;left:0;bottom:0;width:312px;max-width:85vw;
flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
padding:70px 16px 28px;background:var(--ink-3);
box-shadow:26px 0 60px -22px rgba(0,0,0,.55);z-index:2;
overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden;
transform:translateX(-100%);
transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility .32s}
body.menu-open .app-top-links{transform:none;visibility:visible}
.app-top-links .has-sub{width:100%}
.app-top-links .subtog{padding:13px 12px;width:100%;border-radius:11px;
font-size:15px;justify-content:space-between}
.app-top-links .subtog:active{background:rgba(255,255,255,.07)}
.app-top-links .submenu{position:static;transform:none;opacity:1;
visibility:visible;box-shadow:none;border:0;padding:0;min-width:0;background:none;
max-height:0;overflow:hidden;
transition:max-height .3s cubic-bezier(.2,.7,.2,1)}
.app-top-links .submenu a{padding:11px 12px 11px 24px;border-radius:9px;font-size:14.5px}
}
@media(max-width:1180px){
.pgrid{grid-template-columns:1fr}
.pcard{position:static}
}
@media(max-width:860px){
.rail{--sidebar-w:264px}
.rail .side-brand,.rail .side-nav a span,.rail .side-user .su-t,
.rail .side-user .su-go,.rail .side-sec span{display:revert}
.rail .side-nav a,.rail .side-user{justify-content:flex-start}
.rail .side-pop{left:10px;right:10px;width:auto}
.rail-toggle{display:none}
.side{transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
body.nav-open .side{transform:none}
body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(10,18,48,.5);z-index:45}
.main{margin-left:0}
.mobile-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#fff;
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top-nav-mode .mobile-bar{display:none}
.mobile-bar button{background:none;border:0;font-size:20px;color:var(--ink);cursor:pointer}
.page-head,.page-body{padding-left:18px;padding-right:18px}
.tiles,.grid-4{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
/* Login becomes an icon-only round button so it doesn't crowd the burger;
the label stays in the DOM for screen readers, just visually clipped —
same technique as the .sr utility, inlined here since .sr is unscoped
and would hide the label on desktop too. */
.nav-login{width:38px;height:38px;padding:0;border-radius:50%;flex:none;
justify-content:center;gap:0}
.nav-login i{display:inline-block;font-size:14px}
.nav-login-label{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap}
.nav-cta .btn-grad{display:none}
.stats-inner{grid-template-columns:1fr}
.page-head{flex-direction:column;align-items:flex-start;gap:12px}
.crumbs{margin-left:0}
.foot-grid{grid-template-columns:1fr 1fr}
.nav-burger{display:block}
.steps{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr}
.cta-card{padding:36px 22px!important}
.cta-card h2{font-size:clamp(24px,7vw,32px)!important}
.quote{padding:28px 20px!important}
.quote .by{flex-wrap:wrap!important}
.hero-vis{margin:40px 0 52px!important}
.chip{padding:10px 12px!important;font-size:12px!important;gap:8px!important}
.chip .ic{width:28px!important;height:28px!important}
.chip.c1{left:-8px!important;bottom:-56px!important}
.builder-row{padding:24px 5%!important;gap:16px!important}
.foot-grid{grid-template-columns:1fr!important}
}
/* ---------- lightweight modal (tap.js TapModal.alert) — a designed stand-in
for alert()/confirm() so a "please do X first" prompt reads as a warning
worth noticing, not a generic OS dialog, and eases in instead of popping. ---------- */
.tap-modal-root{position:fixed;inset:0;z-index:3000;visibility:hidden;opacity:0;
transition:opacity .2s ease,visibility 0s linear .2s}
.tap-modal-root.open{visibility:visible;opacity:1;transition:opacity .2s ease}
.tap-modal-backdrop{position:absolute;inset:0;background:rgba(10,18,48,.5)}
.tap-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.94);
width:min(380px,calc(100vw - 32px));background:var(--white);border-radius:var(--r-md);
box-shadow:var(--shadow);padding:30px 26px 22px;text-align:center;
border-top:4px solid var(--coral);
transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.tap-modal-root.open .tap-modal{transform:translate(-50%,-50%) scale(1)}
.tap-modal-icon{width:48px;height:48px;border-radius:50%;background:rgba(255,107,87,.12);
color:var(--coral);display:grid;place-items:center;font-size:19px;margin:0 auto 14px}
.tap-modal-title{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 8px}
.tap-modal-msg{font-size:14px;color:var(--body-ink);line-height:1.6;margin:0 0 22px}
.tap-modal-actions{display:flex;justify-content:center}
.tap-modal-actions .tap-modal-ok{width:100%;max-width:160px;justify-content:center;
text-align:center;background:var(--coral);color:#fff;border:0;font-weight:700}
.tap-modal-actions .tap-modal-ok:hover{background:#E85A47}
body.tap-modal-open{overflow:hidden}
.flow-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 22px;
padding: 26px 20px 16px;
backdrop-filter: blur(8px);
box-shadow: 0 30px 70px rgba(5,8,26,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.box-label {
font-family: var(--sans);
font-size: 13px;
fill: #E4E7F7;
font-weight: 700;
letter-spacing: .2px;
}
.item-label {
font-family: var(--sans);
font-size: 11px;
fill: #FFFFFF;
font-weight: 600;
}