/* ============================================================
   FLOATBAR MARKETING SITE  |  css/styles.css
   DESIGN TOKENS  (edit here to re-skin; nothing below "STRUCTURE" should
   need to change).  Source: DESIGN LANGUAGE - MISZA.md, light register.
   ============================================================ */
:root{
  /* grounds: three-step ladder */
  --ground:#EEF1F5;
  --raised:#F6F8FA;
  --panel:#FFFFFF;
  /* ink and its alpha ladder */
  --ink:#222B36;
  --ink-2:rgba(34,43,54,.72);
  --ink-3:rgba(34,43,54,.66); /* was .55; raised 21-09-26 (critique item A) so small text clears AA 4.5:1 on every ground */
  --line-soft:rgba(34,43,54,.07);
  --line:rgba(34,43,54,.14);
  --line-strong:rgba(34,43,54,.42);
  /* the one accent, the one error red, the functional slots */
  --accent:#2A5D8F;
  --accent-ink:#FFFFFF;
  --crit:#B32318;
  --ok:#3E7373;
  --attn:#C24E00;
  /* lanes (desaturated category colours) */
  --lane-1:#2A5D8F; --lane-2:#7A6A55; --lane-3:#3E7373; --lane-4:#5E6B7A;
  /* type */
  --serif:"Sitka Heading","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:Consolas,"SF Mono",ui-monospace,Menlo,monospace;
  /* scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --r1:6px; --r2:10px; --r3:14px; --pill:999px;
  --shadow:0 12px 40px rgba(34,43,54,.10);
  --max:1180px;
  --ctrl:40px;
}

/* ============================================================
   STRUCTURE from here down
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;padding:0 var(--s2)}
img,svg{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,60px);line-height:1.04}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:22px}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto}
.eb{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s2);font-weight:600}
.lead{font-size:19px;color:var(--ink-2);max-width:52ch}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r1)}

/* buttons: one shape language */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--ctrl);padding:0 20px;border-radius:var(--pill);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;border:1px solid transparent;transition:border-color .16s,background-color .16s;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#244F7A}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-strong)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(238,241,245,.92);backdrop-filter:blur(8px);margin:0 calc(-1 * var(--s2));padding:0 var(--s2);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;gap:var(--s3);height:64px}
.wm{font-family:var(--serif);font-size:24px;color:var(--ink);margin-right:auto;letter-spacing:.005em}
.wm:hover{text-decoration:none}
.nav{display:flex;gap:var(--s3);align-items:center}
.nav a{color:var(--ink-2);font-size:15px}
.nav a[aria-current]{color:var(--ink)}
.nav a.btn-primary{color:var(--accent-ink)} /* .nav a outranks .btn-primary; keep the button's white text */
.nav .btn{margin-left:var(--s1)}
.menu-btn{display:none}
@media (max-width:760px){
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--panel);flex-direction:column;align-items:stretch;padding:var(--s2);gap:var(--s2);border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav .btn{margin:0}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--ctrl);height:var(--ctrl);border-radius:var(--pill);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font:inherit}
}

/* sections */
section{padding-block:var(--s6)}
@media (max-width:760px){section{padding-block:var(--s5)}}
.sec-head{max-width:60ch;margin-bottom:var(--s4)}
.sec-head p{margin-top:var(--s2)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media (max-width:960px){.grid-2{grid-template-columns:1fr;gap:var(--s4)}.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s3)}
.panel.float{box-shadow:var(--shadow)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* hero */
.hero{padding-block:var(--s5) var(--s6)}
.hero .grid-2{grid-template-columns:5fr 7fr;align-items:center}
@media (max-width:960px){.hero .grid-2{grid-template-columns:1fr}}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s3)}
.hero .fine{font-size:14px;color:var(--ink-3);margin-top:var(--s2)}
.hero-card{padding:18px 18px 12px}
@media (max-width:560px){ /* critique item C, 21-09-26: below 560px the programme keeps its designed size and the card scrolls sideways */
  .hero-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hero-card #heroGantt{min-width:560px}
}
.hero-cap{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--ink-3);min-height:20px}
.hero-cap .dd,.hero-cap #heroPC{white-space:nowrap} /* critique 21-09-26: dates were breaking mid-string at 375px and at desktop */
.hero-cap .dd{color:var(--crit);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--pill);border:1px solid var(--line);font-size:12px;color:var(--ink-2);white-space:nowrap;transition:background-color .16s,color .16s,border-color .16s}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
button.chip{font:inherit;font-size:12px;background:transparent;cursor:pointer} /* the hero Pause control (review 23/09/2026) */
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on::before{background:var(--crit)}

/* tool row */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media (max-width:960px){.tools{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tools{grid-template-columns:1fr}}
.tool{border-top:1px solid var(--line-strong);padding-top:var(--s2)}
.tool h3{margin-bottom:var(--s1)}
.tool p{color:var(--ink-2);font-size:16px}

/* feature deep dives */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center;padding-block:var(--s4)}
.feat + .feat{border-top:1px solid var(--line-soft)}
.feat.flip .copy{order:2}
@media (max-width:960px){.feat{grid-template-columns:1fr;gap:var(--s3)}.feat.flip .copy{order:0}}
.feat .copy p{color:var(--ink-2);margin-top:var(--s2);max-width:48ch}
.feat .copy .stat{margin-top:var(--s2);font-size:14px;color:var(--ink-3);max-width:48ch}
.fig{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);padding:18px;overflow:hidden}

/* dialog mock (site language) */
.dlg{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--shadow);padding:20px 22px;max-width:420px;margin:0 auto}
.dlg h4{font-family:var(--serif);font-weight:500;font-size:20px;margin:0 0 6px}
.dlg .hint{font-size:14px;color:var(--ink-2)}
.dlg .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:14px}
.dlg .field{height:32px;border:1px solid var(--line);border-radius:var(--r1);padding:0 10px;display:flex;align-items:center;min-width:90px;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums;background:var(--raised)}
.dlg .field.wide{flex:1;color:var(--ink-2);font-weight:400;height:auto;min-height:32px;padding:5px 10px;line-height:1.35} /* critique 21-09-26: the reason text wraps, so the field grows instead of overflowing */
.dlg .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.dlg .acts .btn{height:32px;font-size:14px;padding:0 14px}
.badge{display:inline-flex;align-items:center;justify-content:center;width:44px;height:22px;border-radius:var(--pill);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.badge.behind{background:rgba(179,35,24,.06);border:1px solid var(--crit);color:var(--crit)}
.badge.ahead{background:rgba(62,115,115,.08);border:1px solid var(--ok);color:var(--ok)}

/* left-out table */
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:14px 12px 14px 0;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
td:first-child{font-weight:600;width:32%}
td{color:var(--ink-2)}
td:first-child{color:var(--ink)}
.tbl-wrap{overflow-x:auto}

/* chat mock */
.chat{display:flex;flex-direction:column;gap:12px;max-width:560px}
.msg{padding:12px 16px;border-radius:var(--r3);font-size:15px;line-height:1.5;max-width:88%}
.msg.you{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:var(--r1)}
.msg.ai{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:var(--r1)}
.msg .mono{font-family:var(--mono);font-size:13px;color:var(--ink-2)}

/* pricing */
.price-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s4);max-width:460px}
.price-card .amt{font-family:var(--serif);font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.price-card .amt small{font-family:var(--sans);font-size:16px;color:var(--ink-3)}
.price-card ul{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:10px;font-size:16px;color:var(--ink-2)}
.price-card li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:12px;vertical-align:3px}
/* comparison table: product | A$ a year | US$ a year; bold = published, italic = converted */
.cmpt{width:100%;max-width:600px;border-collapse:collapse;font-size:15px}
.cmpt th,.cmpt td{padding:9px 0 9px 12px;border-bottom:1px solid var(--line);vertical-align:baseline;width:auto}
.cmpt th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:right}
.cmpt th:first-child,.cmpt td:first-child{padding-left:0;text-align:left;color:var(--ink-2);font-weight:400;width:auto}
.cmpt td.aud,.cmpt td.usd{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);width:96px}
.cmpt td i{color:var(--ink-3);font-weight:400}
.cmpt td b{font-weight:600}
.cmpt tr.us td{color:var(--ink);font-weight:600;border-bottom-color:var(--line-strong)}
.cmpt tr.us td:first-child{color:var(--ink);font-weight:600}
.cmpt td small{display:block;font-size:13px;color:var(--ink-3);font-weight:400}
.fxnote{font-size:13px;color:var(--ink-3);margin-top:12px;max-width:600px}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:400;transition:transform .16s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-2);margin-top:10px;max-width:70ch}

/* legal pages (privacy, terms): one measure, numbered h2s at the inline-h2 size, prose in ink-2 */
.legal{max-width:70ch}
.legal h2{font-size:28px;margin-top:var(--s4)}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink-2);margin-top:var(--s2)}
.legal p b{color:var(--ink)}

/* final CTA + footer */
.cta-final{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5) var(--s4);text-align:center}
.cta-final p{margin:var(--s2) auto 0;max-width:52ch;color:var(--ink-2)}
.cta-final .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--s3)}
footer{padding-block:var(--s5);color:var(--ink-3);font-size:14px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s3)}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}}
footer h5{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:var(--ink-3)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px} /* 16px links + 8px gap = the 24px clear zone WCAG 2.2 asks for */
footer a{color:var(--ink-2)}
footer .wm{font-size:20px;display:block;margin-bottom:8px}

/* scroll reveal: the hidden state applies only once the page's script has
   added .js to <html>, so content is visible without it (review 23/09/2026).
   what moves: section blocks | how far: 12px up | how long: 400ms | easing: ease-out | trigger: enters viewport */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .4s ease-out,transform .4s ease-out}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* hero animation classes (transform + opacity only) */
.g-bar{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease-out}
.g-link{transition:opacity .3s ease-out}
.g-crit{transition:opacity .3s ease-out}
.g-tip{transition:opacity .25s ease-out,transform .25s ease-out}
@media (prefers-reduced-motion:reduce){.g-bar,.g-link,.g-crit,.g-tip{transition:none}}

/* the /update capture page (decision sheet row P6, 23-10-26): one email field, one button, no script.
   Tokens only; the honeypot field sits off-screen for people and is skipped by the tab order. */
.capture .fields{display:flex;gap:12px;flex-wrap:wrap;max-width:520px;position:relative}
.capture input[type=email]{flex:1 1 220px;min-width:0;height:var(--ctrl);padding:0 16px;border:1px solid var(--line);border-radius:var(--pill);font:inherit;font-size:16px;color:var(--ink);background:var(--panel)}
.capture input[type=email]:hover{border-color:var(--line-strong)}
.capture .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.capture .fine{font-size:14px;color:var(--ink-3);margin-top:var(--s2);max-width:52ch}
.sheet-card ol{margin:0;padding-left:20px;display:grid;gap:12px;color:var(--ink-2);font-size:16px}
.sheet-card ol b{color:var(--ink)}
.sheet-card .fine{font-size:14px;color:var(--ink-3)}