@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;550;600;650;700&display=swap");
/* ClientGate public surfaces — Ledger workspace visual language.
   This final layer aligns marketing, authentication, recovery and legal pages
   with the operational product without changing their behavior. */

:root {
    --public-ink: #202936;
    --public-muted: #667180;
    --public-faint: #8c96a3;
    --public-line: #dfe3e8;
    --public-canvas: #f4f5f7;
    --public-surface: #ffffff;
    --public-accent: #466b99;
    --public-accent-hover: #365779;
    --public-positive: #13865d;
}

:where(.auth-page, .marketing-shell, .cg-legal) :where(a, button, input, select, textarea) { touch-action: manipulation; }
:where(.auth-page, .marketing-shell, .cg-legal) :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }

/* Authentication and account recovery -------------------------------- */

body.auth-page {
    --auth-accent: var(--public-accent);
    --auth-accent-hover: var(--public-accent-hover);
    --auth-ink: var(--public-ink);
    --auth-muted: var(--public-muted);
    --auth-faint: var(--public-faint);
    --auth-line: var(--public-line);
    --auth-soft: #f1f3f6;
    background: var(--public-canvas);
}

.auth-layout { grid-template-columns: minmax(420px, 44%) minmax(0, 1fr); }
.auth-main { border-right: 1px solid var(--public-line); }
.auth-main__inner { width: min(100%, 520px); }
.auth-brand__mark { border-radius: 7px; background: var(--public-ink); }
.auth-title { max-width: 420px; font-size: clamp(34px, 3.3vw, 44px); font-weight: 680; line-height: 1.02; }
.auth-input { border-color: var(--public-line); border-radius: 8px; background: #fff; }
.auth-input:hover { background: #fff; border-color: #c8ced7; }
.auth-input:focus { border-color: var(--public-accent); box-shadow: 0 0 0 3px rgba(53,92,223,.1); }
.auth-button { border-radius: 8px; background: var(--public-accent); }
.auth-button--secondary { background: #fff; color: var(--public-ink); }
.auth-showcase { border-left: 0; background: #1d2b3d; color: #fff; }
.auth-showcase__inner { width: min(100%, 720px); }
.auth-showcase__pill { border-color: rgba(255,255,255,.11); border-radius: 5px; background: rgba(255,255,255,.06); color: #aab8f7; }
.auth-showcase__pill::before { border-radius: 1px; background: #6680ee; }
.auth-showcase__title { color: #f5f6f8; font-size: clamp(38px, 4.4vw, 56px); font-weight: 630; }
.auth-showcase__text { color: #a2abb7; }
.auth-showcase__copy::after { width: 54px; height: 3px; background: #5772e8; }
.verify-mark,
.verify-pin__cell { border-radius: 10px; }
.verify-continue { border-radius: 9px; background: var(--public-accent); }

@media (max-width: 820px) {
    .auth-main { border-right: 0; }
    body.auth-page--login .auth-brand__mark { border-radius: 9px; }
    body.auth-page--login .auth-input,
    body.auth-page--login .auth-button { border-radius: 9px; }
    body.auth-page--verify { background: var(--public-canvas); }
    .verify-pin__cell { border: 1px solid var(--public-line); border-radius: 9px; background: #fff; }
}

/* Marketing ------------------------------------------------------------ */

body.marketing-shell {
    --cg-blue: var(--public-accent);
    --cg-blue-deep: var(--public-accent-hover);
    --cg-text: var(--public-ink);
    --cg-text-soft: var(--public-muted);
    --cg-text-faint: var(--public-faint);
    --cg-line: var(--public-line);
    background: var(--public-canvas) !important;
}

.marketing-shell .canvas-glow,
.marketing-shell .product-stage::before,
.marketing-shell .feature-card::before { display: none !important; }

.marketing-shell .floating-toolbar {
    top: 0;
    width: 100%;
    max-width: none;
    border: 0;
    border-bottom: 1px solid var(--public-line);
    border-radius: 0;
    background: rgba(255,255,255,.96);
    box-shadow: none;
}
.marketing-shell .floating-toolbar.is-scrolled { top: 0; width: 100%; box-shadow: none; }
.marketing-shell .toolbar-inner { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.marketing-shell .brand { border-radius: 8px; }
.marketing-shell .brand-mark { border-radius: 7px; background: var(--public-ink); box-shadow: none; }
.marketing-shell .toolbar-links { border: 0; border-radius: 0; background: transparent; }
.marketing-shell .toolbar-links a,
.marketing-shell .toolbar-invite,
.marketing-shell .button { border-radius: 8px; box-shadow: none; }
.marketing-shell .button-primary,
.marketing-shell .button-primary:hover { background: var(--public-accent); box-shadow: none; }
.marketing-shell .hero { width: min(1240px, calc(100% - 48px)); min-height: auto; padding-top: 152px; padding-bottom: 100px; }
.marketing-shell .eyebrow { border-radius: 5px; background: #eef1ff; }
.marketing-shell .hero h1 { max-width: 660px; font-size: clamp(3.25rem, 6.3vw, 5.8rem); }
.marketing-shell .hero h1 span { background: none; color: var(--public-accent); -webkit-text-fill-color: currentColor; }
.marketing-shell .desktop-window { border-color: #ccd2da; border-radius: 11px; box-shadow: 0 24px 52px rgba(23,29,40,.15); }
.marketing-shell .preview-main,
.marketing-shell .phone-screen { background: #f5f6f8; }
.marketing-shell .preview-stats article,
.marketing-shell .preview-list-panel,
.marketing-shell .preview-focus-panel,
.marketing-shell .phone-balance,
.marketing-shell .phone-shortcuts i,
.marketing-shell .phone-activity > i { border-radius: 7px; box-shadow: none; }
.marketing-shell .preview-focus-panel,
.marketing-shell .phone-balance { background: var(--public-ink); }
.marketing-shell .phone-frame { border-radius: 24px; box-shadow: 0 24px 54px rgba(17,24,39,.22); }
.marketing-shell .phone-screen { border-radius: 18px; }
.marketing-shell .capability-strip,
.marketing-shell .feature-card,
.marketing-shell .workflow-section,
.marketing-shell .closing-section,
.marketing-shell .invite-sheet {
    border-color: var(--public-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.marketing-shell .feature-billing,
.marketing-shell .feature-portal,
.marketing-shell .feature-security { background: #fff; }
.marketing-shell .feature-card { min-height: 330px; }
.marketing-shell .feature-billing li { border-radius: 5px; background: #f6f7f9; }
.marketing-shell .invoice-card,
.marketing-shell .brand-preview,
.marketing-shell .asset-stack > div,
.marketing-shell .role-stack > div { border-radius: 8px; box-shadow: none; transform: none; }
.marketing-shell .brand-preview div span { border-radius: 6px; background: var(--public-accent); }
.marketing-shell .workflow-callout { border-radius: 8px; background: var(--public-ink); box-shadow: none; }
.marketing-shell .section-heading h2,
.marketing-shell .workflow-callout h2,
.marketing-shell .closing-section h2,
.marketing-shell .invite-sheet h2 { font-size: clamp(2.4rem, 4.5vw, 4.5rem); }

@media (max-width: 760px) {
    .marketing-shell .toolbar-inner { width: calc(100% - 24px); }
    .marketing-shell .hero { width: calc(100% - 32px); padding-top: 112px; padding-bottom: 62px; }
    .marketing-shell .hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
    .marketing-shell .capability-strip,
    .marketing-shell .platform-section,
    .marketing-shell .workflow-section,
    .marketing-shell .closing-section { width: calc(100% - 32px); }
}

/* Legal --------------------------------------------------------------- */

body.cg-legal { background: var(--public-canvas); color: var(--public-ink); }
.cg-legal > .absolute { display: none !important; }
.cg-legal-header { padding: 0 !important; border-bottom: 1px solid var(--public-line) !important; background: rgba(255,255,255,.96) !important; }
.cg-legal-header > div { height: 64px !important; max-width: 1120px !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.cg-legal-header a:first-child > div { width: 34px !important; height: 34px !important; border-radius: 7px !important; background: var(--public-ink) !important; box-shadow: none !important; }
.cg-legal-header a[href="login.php"] { min-height: 40px; border: 1px solid var(--public-line) !important; border-radius: 8px !important; background: #fff !important; color: var(--public-ink) !important; }
.legal-wrap { max-width: 760px !important; padding-top: 70px !important; }
.legal-hero > div:first-child { border-radius: 5px !important; background: #eef1ff !important; }
.legal-hero h1 { font-size: clamp(2.6rem, 6vw, 4rem) !important; }
.legal-toc,
.legal-notice { border-color: var(--public-line) !important; border-radius: 9px !important; background: #fff !important; box-shadow: none !important; backdrop-filter: none !important; }
.cg-legal .legal-content h2 { color: var(--public-ink); font-family: inherit; font-size: 1.55rem; font-weight: 680; }
.cg-legal .legal-content :where(p, ul) { color: #55606e; font-size: 1rem; line-height: 1.75; }

@media (prefers-reduced-motion: reduce) {
    .marketing-shell *,
    .marketing-shell *::before,
    .marketing-shell *::after,
    .auth-page *,
    .auth-page *::before,
    .auth-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Authentication shares the financial product's typography and depth. */
body.auth-page { font-family:"IBM Plex Sans","Segoe UI",sans-serif; }
.auth-layout { grid-template-columns:minmax(0,1fr) minmax(460px,46%); }
.auth-main { order:2;background:#fff;border:0; }
.auth-showcase { order:1;background:radial-gradient(ellipse at 5% 0,#59779680,transparent 70%),linear-gradient(145deg,#273d55,#172332); }
.auth-brand__name { display:block!important; }
.auth-title { font-weight:500!important;letter-spacing:-.04em; }
.auth-showcase__title { font-weight:450!important;letter-spacing:-.045em; }
.auth-product-ledger { margin-top:50px;border-top:1px solid #ffffff21; }
.auth-product-ledger>div { display:flex;gap:17px;align-items:center;padding:22px 0;border-bottom:1px solid #ffffff21; }
.auth-product-ledger i { color:#bbcee2;font-size:19px;width:24px; }
.auth-product-ledger span { display:flex;flex-direction:column;gap:5px; }
.auth-product-ledger strong { font-size:15px;font-weight:500;color:#edf3fa; }
.auth-product-ledger small { font-size:12px;color:#a4b7ce; }
.auth-input { min-height:50px; }
.auth-button { min-height:50px; }
@media(max-width:820px) { .auth-layout { display:block; }.auth-main { background:transparent; }.auth-product-ledger { display:none; }body.auth-page--login { background:linear-gradient(165deg,#e6edf5,#f5f7fa 50%); } }


body.marketing-shell,body.cg-legal { font-family:"IBM Plex Sans","Segoe UI",sans-serif; }
.public-workspace-map { min-height:540px!important;background:#fff;border:1px solid var(--public-line);border-radius:20px;overflow:hidden;box-shadow:0 25px 60px -40px #253b57; }
.public-workspace-map-head { display:flex;justify-content:space-between;align-items:center;background:#1c2634;color:#fff;padding:20px 26px;font-size:14px; }
.public-workspace-map-head small { font-size:11px;color:#b9c7d8; }
.public-workspace-map-main { padding:32px 28px;background:linear-gradient(115deg,#e3ebf4,#f5f7fa); }
.public-workspace-map-main p { font-size:12px;color:#5d7490; }
.public-workspace-map-main h2 { margin:14px 0;font-size:30px;letter-spacing:-.04em;line-height:1.2;color:#253b57; }
.public-workspace-map-main>span { font-size:12px;color:#64758a; }
.public-workspace-map-row { display:flex;gap:20px;align-items:center;padding:22px 28px;border-bottom:1px solid var(--public-line); }
.public-workspace-map-row>span { color:#8295ac;font-size:12px; }
.public-workspace-map-row strong { font-size:14px;font-weight:600; }
.public-workspace-map-row p { margin:5px 0 0;color:var(--public-muted);font-size:12px; }
.public-workspace-map-link { display:flex;justify-content:space-between;padding:22px 28px;color:var(--public-accent);font-size:13px; }
@media(max-width:767px) { .public-workspace-map { min-height:0!important; } .public-workspace-map-main h2 { font-size:26px; } }