/* Trofi AI: shared base, the company home (landing, login, account screens, product hub), the admin page,
   and the report prose used by the Deal Intelligence workspace. Workspace layout lives in workspace.css.
   Light theme from the Figma design system: off-white page, white panels, ink text, blue actions, navy accents.
   The dark theme keeps the classic dark palette (near-black page, dark panels, mint accent) on the same layout and type. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--bg:#f5f7fa;--white:#fff;--line:#d6dee8;--line-hover:#b9c6d6;--ink:#0a121f;--grey:#63738a;--navy:#081729;--navy-2:#0a243b;--blue:#0f66f0;--blue-hover:#0b55cc;--blue-tint:#ebf2ff;--blue-dim:#0f66f04d;--on-blue:#fff;--cyan:#05b5d4;--green:#0fb882;--amber:#f59e0a;--red:#ed4545;--red-tint:#ffeded;--selection:#0f66f026;--sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif}
/* Dark theme: the classic palette. Chosen explicitly, or by the system setting when no choice is stored. */
:root[data-theme="dark"]{color-scheme:dark;--bg:#0b1116;--white:#111a21;--line:#2c3c48;--line-hover:#48606f;--ink:#e6edf2;--grey:#8fa2b1;--navy:#1a2733;--navy-2:#152029;--blue:#7fe8d0;--blue-hover:#a3f0df;--blue-tint:#7fe8d01f;--blue-dim:#7fe8d066;--on-blue:#0b1116;--cyan:#7fe8d0;--green:#2fd49b;--amber:#f2c26b;--red:#f28b8b;--red-tint:#f28b8b1f;--selection:#7fe8d033}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0b1116;--white:#111a21;--line:#2c3c48;--line-hover:#48606f;--ink:#e6edf2;--grey:#8fa2b1;--navy:#1a2733;--navy-2:#152029;--blue:#7fe8d0;--blue-hover:#a3f0df;--blue-tint:#7fe8d01f;--blue-dim:#7fe8d066;--on-blue:#0b1116;--cyan:#7fe8d0;--green:#2fd49b;--amber:#f2c26b;--red:#f28b8b;--red-tint:#f28b8b1f;--selection:#7fe8d033}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
button,input,select{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--selection)}
[hidden]{display:none!important}
.skip-link{position:fixed;left:20px;top:-80px;z-index:20;background:var(--blue);color:var(--on-blue);padding:10px 20px;border-radius:8px}
.skip-link:focus{top:10px}
.error{margin:30px;padding:20px 24px;border:1px solid var(--red);border-radius:10px;background:var(--red-tint);color:var(--red);font-size:14px}
#status:not(:empty){padding:15px 0;color:var(--red);font-size:14px}
.eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}

/* Masthead: admin page. The home page has no header; its sign-out sits in the corner of the signed-in screens. */
.masthead{height:68px;padding:0 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--white);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{display:block;height:24px;width:auto}
/* The masthead wordmark follows the theme: dark lettering on light, white lettering on dark. */
.logo-on-dark{display:none}
:root[data-theme="dark"] .logo-on-light{display:none}:root[data-theme="dark"] .logo-on-dark{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-on-light{display:none}:root:not([data-theme="light"]) .logo-on-dark{display:block}}
.breadcrumb{display:flex;align-items:center;gap:12px;margin-right:auto;margin-left:20px;padding-left:20px;border-left:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.breadcrumb [aria-current]{color:var(--ink)}
.quiet-button{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:8px;height:38px;padding:0 14px;font-size:13px;font-weight:600}
.quiet-button:hover{background:var(--bg)}
.quiet-button span{margin-left:8px;color:var(--grey)}
.signout-corner{position:fixed;top:18px;right:24px;z-index:10}
/* Theme switch: a quiet text control; on the login page it sits in the lower corner. */
.theme-toggle{background:none;border:0;padding:0;font-size:12px;font-weight:600;color:var(--grey)}.theme-toggle:hover{color:var(--blue)}
.theme-corner{position:fixed;right:24px;bottom:20px;z-index:10}

/* Landing: two halves. Left, the landing page as it was: title, slogan and the login fields in one centered column.
   Right, the explanation panel from the first page of the seed deck, on the navy the workspace sidebar uses. */
.entry{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0}
.entry-main{position:relative;display:grid;justify-items:center;align-content:center;text-align:center;padding:60px 24px 90px}
.entry h1{font:700 clamp(56px,6vw,96px)/1 var(--sans);letter-spacing:-.045em;margin:0 0 10px;color:var(--ink)}
.entry h1>span{color:var(--blue)}
.slogan{font:500 clamp(17px,1.6vw,24px)/1.3 var(--sans);color:var(--grey);margin:0 0 56px}
.entry .login-panel{width:100%;max-width:380px;text-align:left}
.entry-trial{margin:26px 0 0;font-size:13px;color:var(--grey)}.entry-trial a{margin-left:6px;color:var(--blue);font-weight:600;text-decoration:none}.entry-trial a:hover{text-decoration:underline;text-underline-offset:3px}
.entry-legal{position:absolute;left:0;right:0;bottom:22px;margin:0;font-size:12px;color:var(--line-hover,#b9c6d6)}.entry-legal a{color:var(--grey);text-decoration:none;margin:0 4px}.entry-legal a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* The panel's background follows the deck: deep navy with a soft blue glow and a faint grid. */
.entry-about{position:relative;isolation:isolate;display:grid;align-content:center;gap:40px;padding:clamp(40px,6vw,88px);color:#fff;background:radial-gradient(ellipse 70% 60% at 85% 15%,#1b3c6e 0%,#12294d 35%,transparent 70%),radial-gradient(ellipse 60% 50% at 10% 95%,#0f2a52 0%,transparent 60%),linear-gradient(165deg,#0c1d36 0%,#081729 55%,#0a2140 100%)}
.entry-about::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(160deg,#000 20%,transparent 85%);-webkit-mask-image:linear-gradient(160deg,#000 20%,transparent 85%)}
.entry-about h2{font:700 clamp(30px,3vw,46px)/1.1 var(--sans);letter-spacing:-.03em;margin:0;max-width:14em}
.entry-about-lead{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:#b2c7d9;margin:0;max-width:36em}
.phases{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.phases li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:16px;align-items:start}
.phase-mark{display:block;width:12px;height:12px;margin:8px 0 0 7px;border-radius:50%;border:2px solid #3b82f6;background:#0a243b;box-shadow:0 0 0 4px #0a243b,0 0 0 5px #1f3352}
.phases li.live .phase-mark{background:var(--cyan);border-color:var(--cyan)}
.phases h3{margin:0 0 6px;font-size:20px;font-weight:700;letter-spacing:-.01em;color:#fff}.phases h3 small{font-size:13px;font-weight:500;letter-spacing:0;color:#b2c7d9;margin-left:6px}
.phases li>div>p:last-child{margin:0;font-size:14px;line-height:1.55;color:#b2c7d9}

/* Form panel: frameless on the landing page, a card on the account screens. */
.entry-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:32px}
.entry-card.login-panel{background:none;border:0;padding:0}
.entry-card label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.entry-card input{display:block;width:100%;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:8px;height:48px;padding:0 14px;font-size:15px}
.entry-card input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-tint)}
.entry-card input{background:var(--bg)}
.entry-card input + label{margin-top:18px}
.entry-card .form-error{color:var(--red);font-size:13px;line-height:1.5;margin:14px 0 0}
.password-hint{font-size:12px;color:var(--grey);margin:6px 0 18px}
.primary-button{width:100%;display:flex;justify-content:center;align-items:center;height:46px;background:var(--blue);border:1px solid var(--blue);border-radius:8px;color:var(--on-blue);font-size:14px;font-weight:600;margin-top:20px}
.primary-button:hover{background:var(--blue-hover)}
.primary-button:disabled{opacity:.6;cursor:wait}
.account-screen{min-height:100svh;display:grid;place-items:center;padding:40px 24px}
.account-screen .entry-card{width:100%;max-width:440px}
.account-screen h1{font-size:24px;line-height:1.3;letter-spacing:-.02em;font-weight:700;margin:0 0 22px}
/* The agreement screen: a wide card with the text in its own scrolling box, the consent box and one button under it. */
.agreement-screen{align-content:start;padding-top:40px}
.agreement-screen .entry-card{max-width:860px}
.agreement-screen h1{margin-bottom:10px}
.agreement-screen .eyebrow{margin:0 0 10px}
.agreement-draft{margin:0 0 12px;padding:10px 14px;border-radius:8px;background:var(--amber-tint,#fff7e3);color:var(--amber,#b45309);font-size:13px;font-weight:600;border:1px solid var(--amber,#f59e0a)}
.agreement-meta{margin:0 0 16px;font-size:13px;color:var(--grey);line-height:1.6}
.agreement-text{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px 22px 18px;background:var(--bg);font-size:14px;line-height:1.7}
.agreement-text.prose h2{font-size:16px;margin:24px 0 10px;padding-top:14px}
.agreement-text.prose h3{font-size:14px;margin:18px 0 8px;padding-left:10px}
.agreement-text.prose p{margin:10px 0;max-width:none}
.agreement-text>ul{padding-left:22px}.agreement-text li{margin:5px 0}
.agreement-text mark,.legal mark{background:var(--amber-tint,#fff7e3);color:inherit;padding:0 3px;border-radius:3px;outline:1px dashed var(--amber,#f59e0a)}
.agreement-text .signature-party,.legal .signature-party{margin-top:22px;font-weight:700;letter-spacing:.04em}
.agreement-text .signature-line,.legal .signature-line{margin:4px 0;color:var(--grey)}
.agreement-open{margin:8px 0 0;font-size:12px}.agreement-open a{color:var(--grey)}
.entry-card .agreement-consent{display:flex;gap:12px;align-items:flex-start;margin:20px 0 16px;font-size:14px;font-weight:500;line-height:1.55;cursor:pointer}
.entry-card .agreement-consent input{width:18px;height:18px;margin:2px 0 0;padding:0;flex:none;accent-color:var(--blue)}
.agreement-screen .primary-button{width:auto;min-width:220px}
.agreement-decline{margin:16px 0 0;font-size:13px;color:var(--grey)}
.link-button{background:none;border:0;padding:0;font:inherit;color:var(--blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Product hub: shown once the catalog holds more than one product. */
.hub{max-width:1180px;margin:auto;padding:64px clamp(24px,5vw,70px) 90px}
.hub h1{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.03em;line-height:1.12;font-weight:700;margin:14px 0 8px}
.hub-slogan{font-size:15px;color:var(--grey);margin:0 0 40px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.product-card{display:flex;flex-direction:column;min-height:260px;padding:28px;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:12px;transition:border-color .15s,transform .15s}
a.product-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.product-number{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.product-card h2{font-size:24px;letter-spacing:-.02em;line-height:1.2;font-weight:700;margin:22px 0 10px}
.product-card p{color:var(--grey);font-size:14px;line-height:1.6;margin:0 0 22px}
.product-meta{margin-top:auto;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.product-open{margin-top:14px;color:var(--blue);font-size:14px;font-weight:600}
.product-card.upcoming{border-style:dashed;background:none}
.product-card.upcoming .product-number,.product-card.upcoming h2{color:var(--grey)}

/* Report prose: the rendered brief and appendix. */
.prose{font-size:15px;line-height:1.8;color:var(--ink);overflow-wrap:anywhere}
.prose>h1{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.15;font-weight:700;margin:0 0 14px;max-width:1000px}
.prose>h1+p{color:var(--grey);font-size:13px;line-height:1.7;margin:0 0 32px}
.prose h2{font-size:22px;line-height:1.35;letter-spacing:-.02em;font-weight:700;margin:44px 0 18px;border-top:1px solid var(--line);padding-top:24px}
.prose h2:first-of-type{margin-top:24px}
.prose h3{font-size:18px;line-height:1.45;font-weight:600;margin:30px 0 14px;max-width:900px;padding-left:14px;border-left:2px solid var(--blue)}
.prose p{margin:16px 0;max-width:86ch}
.prose>ul,.prose>ol{max-width:86ch;padding-left:24px}
.prose li{padding-left:6px;margin:12px 0}
.prose li::marker{color:var(--blue)}
.prose strong{font-weight:700}
.prose a{color:var(--blue);text-decoration-color:var(--blue-dim);text-underline-offset:3px}
.prose a:hover{color:var(--blue-hover);text-decoration-color:var(--blue)}
.prose a[id]{display:block;scroll-margin-top:110px}
.prose code{font:.88em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.prose pre{overflow:auto;border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--bg)}
.prose pre code{border:none;background:none}
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:8px;margin:22px 0 26px;background:var(--white);scrollbar-color:var(--line-hover) var(--white)}
.prose table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.6;min-width:900px}
.prose th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--navy);color:#fff;text-align:left;vertical-align:top;padding:14px 14px}
.prose td{vertical-align:top;padding:16px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:160px}
.prose th:first-child,.prose td:first-child{min-width:55px}
.prose td:first-child{font-weight:700;color:var(--blue)}
.prose td:last-child{border-right:0}
.prose tr:last-child td{border-bottom:0}
.prose tr:hover td{background:var(--bg)}
.prose blockquote{border-left:2px solid var(--amber);padding-left:20px;margin-left:0;color:var(--grey)}
.unavailable{color:var(--grey);text-decoration:underline dotted;text-underline-offset:3px}
.unavailable:after{content:' [internal reference unavailable]';font-size:12px;color:var(--red)}

@media(max-width:1100px){
  .masthead{padding:0 20px}
  .account-screen .entry-card{padding:26px}
}
@media(max-width:760px){
  html{scroll-padding-top:80px}
  .masthead{height:60px;padding:0 16px;gap:10px}
  .brand-logo{height:20px}
  .breadcrumb{font-size:10px;margin-left:12px;padding-left:12px}
  .quiet-button{font-size:12px;padding:0 10px;height:34px}
  .signout-corner{top:12px;right:14px}
  .theme-corner{right:14px;bottom:14px}
  .entry{grid-template-columns:minmax(0,1fr);min-height:auto}
  .entry-main{padding:56px 24px 64px;align-content:start}
  .entry h1{font-size:clamp(52px,15vw,84px)}
  .slogan{font-size:18px;margin-bottom:40px}
  .entry-about{padding:44px 24px 80px;gap:28px}
  .entry-about h2{font-size:28px}
  .account-screen .entry-card{padding:24px;max-width:520px}
  .hub{padding:40px 20px 60px}
  .prose>h1{font-size:28px}
  .prose>h1+p{font-size:12px;margin-bottom:24px}
  .prose h2{font-size:20px;margin-top:34px;padding-top:20px}
  .prose h3{font-size:17px}
  .prose td{padding:13px;min-width:150px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .product-card{transition:none}
}