/* =============================================================================
   Mandhouma — public marketing site.
   Deliberately separate from flowhub-styles.css: this file must stay small and
   load fast for first-time visitors, and it should not be affected by changes
   to the app's internal component styles. Same palette and typeface as the
   product, so the two feel like one thing.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:wght@500;600;700&display=swap');

/* These are the APP's tokens verbatim, not a warm interpretation of them.
   Two files by design (the marketing site must stay small and load fast),
   but they must describe ONE brand. The site used to run its own
   paper-and-brown palette — warm off-white canvas, brown ink, muted sage
   and plum — which made the accent read as one member of a warm family;
   in the product the canvas is a cool near-white and the accent is the
   only warm thing on screen. Visitors met one brand on the website and a
   different one a click after signing in.
   These mirror the app's default theme, which is the only one a visitor
   has not explicitly chosen.
   IF THE APP'S TOKENS CHANGE AGAIN, CHANGE THESE TO MATCH. */
:root{
  --bg:#f5f5f7; --alt:#ebebef; --panel:#ffffff; --border:#e5e5ea;
  --text:#18181b; --muted:#71717a;
  --accent:#ef5c2b; --accent-hover:#d44a1c; --accent-rgb:239,92,43;
  /* Green = internal, amber = client — the same colour language the app's
     calendar uses for internal and client meetings. There is no purple in
     the product, so the client portal no longer has one here either. */
  --green:#16a34a; --amber:#d97706; --red:#dc2626;
  --radius:10px; --shadow:0 8px 25px rgba(24,24,27,.06);
  --maxw:1120px;
}
/* NO prefers-color-scheme block, deliberately.
   The product does not follow the OS — flowhub-styles.css has no
   prefers-color-scheme rule at all; its themes are chosen explicitly by the
   person and remembered in localStorage. So a site that darkened itself on
   a dark Mac handed the visitor a dark website and a light product one
   click later: the same brand split this file exists to prevent, just in
   the other direction. If a dark marketing site is ever wanted, it belongs
   behind the same explicit toggle the app uses, not behind an OS setting
   the app ignores. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} }
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Source Serif 4',Georgia,serif;line-height:1.2;letter-spacing:-.005em;margin:0 0 12px;font-weight:600;}
h1{font-size:clamp(30px,5vw,50px);}
h2{font-size:clamp(24px,3.4vw,34px);}
h3{font-size:18px;}
p{margin:0 0 14px;color:var(--muted);}
a{color:var(--accent);}
img,svg{max-width:100%;}

/* Keyboard users must always be able to see where they are. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100;font-weight:700;}
.skip-link:focus{left:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:76px 0;}
.section.alt{background:var(--alt);}
.section-head{max-width:640px;margin:0 auto 40px;text-align:center;}
.section-head p{font-size:17px;}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800;font-size:18px;}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;}
.site-nav{display:flex;align-items:center;gap:8px;}
.site-nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border-radius:8px;}
.site-nav a:hover{color:var(--text);background:var(--alt);}
.site-nav a.btn-primary{color:#fff;}
@media(max-width:760px){ .site-nav a.nav-link{display:none;} }

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.site-nav .btn{padding:9px 16px;font-size:14px;}

/* ---- Hero ---- */
.hero{padding:84px 0 64px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
@media(max-width:880px){ .hero-grid{grid-template-columns:1fr;gap:36px;} }
.hero p.lead{font-size:19px;max-width:52ch;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
.hero-note{font-size:13.5px;color:var(--muted);margin-top:18px;}

/* A lightweight CSS mock of the product — no screenshot to load or keep current. */
.mock{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.mock-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--alt);}
.mock-dot{width:10px;height:10px;border-radius:50%;background:var(--border);}
.mock-body{display:grid;grid-template-columns:104px 1fr;min-height:250px;}
.mock-side{border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:8px;}
.mock-navitem{height:9px;border-radius:5px;background:var(--border);}
.mock-navitem.on{background:var(--accent);opacity:.85;}
.mock-main{padding:16px;display:flex;flex-direction:column;gap:12px;}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.mock-stat{border:1px solid var(--border);border-radius:9px;padding:11px;border-top:3px solid var(--accent);}
.mock-stat:nth-child(2){border-top-color:var(--amber);}
.mock-stat:nth-child(3){border-top-color:var(--green);}
.mock-stat b{display:block;font-size:19px;font-weight:800;}
.mock-stat span{font-size:10px;color:var(--muted);}
.mock-rows{display:flex;flex-direction:column;gap:7px;}
.mock-row{height:11px;border-radius:5px;background:var(--border);opacity:.75;}
.mock-row:nth-child(2){width:82%;}
.mock-row:nth-child(3){width:64%;}
.mock-row:nth-child(4){width:75%;}

/* ---- Feature cards ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:880px){ .grid-3{grid-template-columns:1fr;} }
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
.card h3{margin-bottom:8px;}
.card p{margin:0;font-size:14.5px;}
.card-icon{width:42px;height:42px;border-radius:11px;background:rgba(var(--accent-rgb),.1);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;}

/* ---- Portals ---- */
.portal-card{display:block;text-decoration:none;color:inherit;border-top:4px solid var(--accent);}
.portal-card:hover{border-color:var(--accent);transform:translateY(-2px);transition:transform .15s;}
.portal-card.employee{border-top-color:var(--green);}
.portal-card.client{border-top-color:var(--amber);}
.portal-card .go{display:inline-block;margin-top:12px;font-weight:700;font-size:14px;color:var(--accent);}
.portal-card.employee .go{color:var(--green);}
.portal-card.client .go{color:var(--amber);}

/* ---- Steps ---- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:880px){ .steps{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .steps{grid-template-columns:1fr;} }
.step{position:relative;padding-top:44px;}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.step h3{font-size:16px;}
.step p{font-size:14px;margin:0;}

/* ---- FAQ ---- */
.faq{max-width:760px;margin:0 auto;}
.faq details{border:1px solid var(--border);border-radius:10px;background:var(--panel);margin-bottom:10px;}
.faq summary{cursor:pointer;padding:16px 18px;font-weight:700;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:20px;color:var(--accent);font-weight:700;flex:none;}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 18px 16px;margin:0;font-size:15px;}

/* ---- CTA band ---- */
.cta{background:var(--accent);color:#fff;border-radius:16px;padding:48px 32px;text-align:center;}
.cta h2{color:#fff;}
.cta p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 24px;font-size:17px;}
.cta .btn-primary{background:#fff;color:var(--accent);}
.cta .btn-primary:hover{background:rgba(255,255,255,.9);}
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);}
.cta .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff;}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--border);padding:44px 0 30px;background:var(--alt);}
.footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:28px;}
.footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px;font-weight:800;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:8px;}
.footer-col a{color:var(--muted);text-decoration:none;font-size:14px;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);}

/* ---- Long-form legal / content pages ---- */
.doc{max-width:760px;margin:0 auto;padding:56px 0 72px;}
.doc h1{margin-bottom:6px;}
.doc .updated{font-size:14px;color:var(--muted);margin-bottom:28px;}
.doc h2{font-size:21px;margin:34px 0 10px;}
.doc h3{font-size:17px;margin:22px 0 8px;}
.doc p, .doc li{font-size:15.5px;color:var(--muted);}
.doc li{margin-bottom:7px;}
.doc strong{color:var(--text);}
.doc table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px;}
.doc th,.doc td{text-align:left;padding:10px;border:1px solid var(--border);vertical-align:top;}
.doc th{background:var(--alt);font-weight:700;color:var(--text);}
.notice{background:rgba(217,119,6,.09);border:1px solid rgba(217,119,6,.4);border-radius:10px;padding:14px 16px;margin:0 0 26px;}
.notice p{margin:0;font-size:14.5px;color:var(--text);}

/* ---- 404 ---- */
.error-page{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;}
.error-code{font-size:78px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:8px;}
.error-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px;}

/* ---- Sign-in stage ----
   A separate room from the marketing site: no site header, no footer, no
   analytics. Quiet and focused, so the only decision on screen is which
   portal you're heading into. ---- */
.signin-body{background:var(--alt);}
.signin-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;gap:20px;}
.signin-card{width:min(500px,100%);background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:38px 34px;}
.signin-brand{justify-content:flex-start;margin-bottom:24px;}
.signin-card h1{font-size:27px;margin-bottom:6px;}
.signin-sub{font-size:15px;margin-bottom:26px;}
.signin-options{display:flex;flex-direction:column;gap:10px;}
.signin-option{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:12px;text-decoration:none;color:inherit;background:var(--bg);}
.signin-option:hover{border-color:var(--accent);border-left-color:var(--accent);background:var(--alt);}
.signin-option.employee{border-left-color:var(--green);}
.signin-option.client{border-left-color:var(--amber);}
.signin-icon{width:42px;height:42px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;background:rgba(var(--accent-rgb),.1);color:var(--accent);}
.signin-option.employee .signin-icon{background:rgba(22,163,74,.12);color:var(--green);}
.signin-option.client .signin-icon{background:rgba(217,119,6,.12);color:var(--amber);}
.signin-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.signin-name{font-weight:700;font-size:15.5px;}
.signin-desc{font-size:13px;color:var(--muted);}
.signin-arrow{color:var(--muted);font-size:18px;flex:none;}
.signin-option:hover .signin-arrow{color:var(--accent);}
/* "Continue where you left off" shortcut for returning visitors. */
.signin-resume-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.signin-resume-link{border-width:1px 1px 1px 4px;}
.signin-switch{display:block;width:100%;margin-top:12px;background:none;border:none;color:var(--muted);font-size:13.5px;font-family:inherit;cursor:pointer;text-decoration:underline;padding:4px;}
.signin-switch:hover{color:var(--accent);}
.signin-help{margin:26px 0 0;font-size:13.5px;line-height:1.6;}
.signin-back{margin:0;font-size:14px;}
.signin-back a{color:var(--muted);text-decoration:none;}
.signin-back a:hover{color:var(--accent);}
@media(max-width:520px){ .signin-card{padding:28px 22px;} .signin-desc{display:none;} }

/* ---- Printable portal access cards (/access) ----
   Screen: a readable stack. Print: one card per page, no site chrome. ---- */
.access-wrap{padding:44px 24px 60px;}
.access-intro{max-width:680px;margin:0 auto 36px;}
.access-intro .brand{margin-bottom:18px;}
.access-intro h1{font-size:clamp(26px,4vw,36px);}
.access-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.access-note{font-size:13.5px;color:var(--muted);margin-top:16px;}
.access-note:empty{display:none;}
.access-card{max-width:680px;margin:0 auto 22px;background:var(--panel);border:1px solid var(--border);border-top:5px solid var(--accent);border-radius:14px;padding:26px 28px;box-shadow:var(--shadow);}
.access-card.employee{border-top-color:var(--green);}
.access-card.client{border-top-color:var(--amber);}
.access-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.1);color:var(--accent);margin-bottom:10px;}
.access-card.employee .access-badge{background:rgba(22,163,74,.12);color:var(--green);}
.access-card.client .access-badge{background:rgba(217,119,6,.12);color:var(--amber);}
.access-card h2{font-size:23px;margin-bottom:6px;}
.access-role{font-size:14.5px;margin:0;}
.access-card-body{display:flex;gap:26px;align-items:flex-start;margin-top:20px;}
@media(max-width:620px){ .access-card-body{flex-direction:column;} }
.access-qr{flex:none;width:140px;height:140px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:4px;display:flex;align-items:center;justify-content:center;}
.access-qr svg{width:100%;height:100%;display:block;}
.access-details{flex:1;min-width:0;}
.access-label{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;}
.access-url{font-size:19px;font-weight:800;color:var(--accent);margin:0 0 16px;word-break:break-all;}
.access-card.employee .access-url{color:var(--green);}
.access-card.client .access-url{color:var(--amber);}
.access-steps{margin:0 0 14px;padding-left:20px;}
.access-steps li{font-size:14px;color:var(--muted);margin-bottom:6px;}
.access-help{font-size:13px;margin:0;}
.access-contact{font-weight:700;color:var(--text);}

@media print{
  @page{ margin:14mm; }
  body{background:#fff;color:#000;}
  .no-print,.skip-link{display:none !important;}
  .access-wrap{padding:0;max-width:none;}
  .access-card{break-after:page;page-break-after:always;box-shadow:none;border:1px solid #999;max-width:none;margin:0 0 10mm;}
  .access-card:last-child{break-after:auto;page-break-after:auto;}
  .access-role,.access-steps li,.access-help{color:#333;}
  .access-qr{border-color:#999;}
}

/* ---- Cookie / analytics consent ---- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(2,6,23,.22);padding:18px 20px;z-index:80;display:none;}
.consent.show{display:block;}
.consent p{font-size:14px;margin:0 0 14px;}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap;}
.consent .btn{padding:9px 16px;font-size:14px;}

/* ---------------------------------------------------------------------
   ONE SIGN-IN FORM

   The sign-in page used to be a chooser: three buttons, one per portal.
   Now it is a single form — the server works out from the username which
   account someone means and where to send them, so nobody has to know
   whether they are an "employee" or a "client" to get in.
   --------------------------------------------------------------------- */
.signin-form{display:flex;flex-direction:column;gap:14px;margin:22px 0 18px;text-align:left;}
.signin-field{display:flex;flex-direction:column;gap:6px;}
.signin-field label{font-size:12.5px;font-weight:600;color:var(--muted);}
.signin-field input{width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);font-size:14px;font-family:inherit;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;}
.signin-field input:hover:not(:focus){border-color:rgba(var(--accent-rgb),.45);}
.signin-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);}
.signin-hint{font-size:11.5px;color:var(--muted);margin:2px 0 0;}
/* Live username availability on the setup page. Green and red carry the
   same meaning they do everywhere else in the product. */
.signin-hint.sp-ok{color:var(--green);font-weight:600;}
.signin-hint.sp-bad{color:var(--red);font-weight:600;}
/* "optional" beside a label, so nobody is left wondering whether they are
   stuck without it. */
.sp-opt{font-size:11px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;}
.signin-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;}
.signin-remember input{width:auto;margin:0;cursor:pointer;}
/* Empty by default, and takes no space until it has something to say — so
   the card doesn't jump the moment a password is wrong. */
.signin-error{font-size:13px;color:var(--accent);min-height:0;}
.signin-error:not(:empty){min-height:1.4em;background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.3);border-radius:8px;padding:9px 11px;}
.signin-submit{width:100%;padding:12px;border-radius:9px;border:none;background:var(--accent);
  color:#fff;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;transition:background .15s;}
.signin-submit:hover:not(:disabled){background:var(--accent-hover);}
.signin-submit:disabled{opacity:.6;cursor:default;}

/* The two-factor step is its own screen, not a field that appears under the
   password — the first screen asks who you are, the second asks you to prove
   it, and mixing the two reads as one long form with a surprise at the end. */
.signin-code-input{text-align:center;font-size:22px;letter-spacing:.4em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:14px 12px;}
.signin-code-input::placeholder{letter-spacing:.4em;color:var(--border);}
.signin-back-link{display:block;width:100%;margin-top:4px;padding:8px;background:none;border:none;
  color:var(--muted);font-size:13px;font-family:inherit;cursor:pointer;text-align:center;}
.signin-back-link:hover{background:none;color:var(--accent);}