@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/assets/fonts/PlusJakartaSans-variable.woff2") format("woff2-variations");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
/* ==================================================================
   businesstaxcalc.com.au
   Brand tokens shared with calculategst.com.au.
   Only the first three are supplied brand values. The rest are
   derived tints and neutrals read off the sister site.
   ================================================================== */
:root{
  /* supplied brand values */
  --navy:#1b2348;
  --blue:#2a53a2;
  --yellow:#f5d815;

  /* derived */
  --blue-dark:#1f3f7e;
  --blue-tint:#eef3fb;
  --wash:#e9eff8;
  --line:#dbe3f0;
  --muted:#55607a;
  --muted-light:#a9b4cc;
  --paper:#ffffff;

  /* Comparison bar segments and the inline warning colour. Referenced as
     var(--teal) and var(--amber) before they were ever declared, which left
     the legend swatches transparent and the share warnings uncoloured. */
  --teal:#6c8fd6;
  --warn:#4a3d00;

  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(27,35,72,.05), 0 14px 34px -14px rgba(27,35,72,.20);
  --sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--sans);color:var(--navy);background:var(--paper);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.3rem)}
h3{font-size:1.16rem;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1em}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* WCAG 1.4.1, use of colour. A link sitting inside a sentence cannot be marked
   out by colour alone, and link blue against the surrounding muted grey is only
   1.17:1, nowhere near the 3:1 that would let colour carry it by itself. So
   links inside prose are underlined at rest. Nav, subnav, footer and card links
   are standalone controls rather than links in a text block, and keep the
   underline-on-hover behaviour. */
section.block p a, section.block li a, details.faq div a{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin:0 0 .9em}
.small{font-size:.86rem;color:var(--muted)}
.hide{display:none !important}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:73px}
.logo{font-size:1.6rem;font-weight:800;letter-spacing:-.045em;color:var(--navy);line-height:1}
.logo:hover{text-decoration:none}
.logo b{font-weight:800;color:var(--navy)}
.logo span{font-weight:500;color:var(--blue)}
nav.main{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:.94rem}
nav.main a{color:var(--navy);font-weight:600}
nav.main a:hover{color:var(--blue);text-decoration:none}
nav.main a.cta{background:var(--blue);color:#fff;padding:11px 19px;border-radius:var(--radius-sm);font-weight:700}
nav.main a.cta:hover{background:var(--blue-dark)}
#navToggle{margin-left:auto;display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;font-size:1.1rem;cursor:pointer;color:var(--navy)}

/* ---------- hero ---------- */
.hero{background:var(--wash);padding:56px 0 64px}
.hero h1{max-width:22ch}
.hero p.lede{font-size:1.06rem;color:var(--muted);max-width:60ch;margin-bottom:34px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:start}

/* ---------- cards ---------- */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel{padding:26px}
/* Sits directly in .card, which has no padding of its own, so it needs the
   panel's inset to line up with the fields above it rather than hugging the
   card edge. */
.card-note{margin:14px 0 0;padding:0 26px 20px}
.year-pick{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 26px 0}
.year-pick label{font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap}
.year-pick select{width:auto;min-width:112px;padding:8px 12px;font-size:.88rem}
.tabs{display:inline-flex;gap:0;margin:14px 26px 0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;max-width:calc(100% - 52px)}
.tabs button{border:0;background:#fff;font-family:var(--sans);font-size:.93rem;font-weight:700;color:var(--navy);padding:11px 18px;cursor:pointer;white-space:nowrap}
.tabs button + button{border-left:1px solid var(--line)}
.tabs button[aria-selected="true"]{background:var(--blue);color:#fff}
.tabs.wide{display:flex}
.tabs.wide button{flex:1 1 0;padding:11px 10px}

/* ---------- fields ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.9rem;font-weight:700;margin-bottom:7px}
/* Not .field .hint: the same class is used inside .check labels, where it was
   matching no rule at all and running straight on from the bold text with no
   space, at full size and in body navy. */
.hint{font-size:.81rem;color:var(--muted);font-weight:400;display:block;margin-top:4px}
.money{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.money:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,83,162,.13)}
.money span{padding:0 14px;color:var(--muted);display:grid;place-items:center;font-weight:600}
.money input{border:0;outline:0;padding:13px 14px 13px 0;font-family:var(--sans);font-size:1.1rem;font-weight:600;width:100%;background:transparent;color:var(--navy)}
.pcnt{position:relative}
.pcnt input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 34px 13px 14px;font-family:var(--sans);font-size:1.02rem;font-weight:600;width:100%;outline:0;color:var(--navy)}
.pcnt input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,83,162,.13)}
.pcnt::after{content:"%";position:absolute;right:14px;top:13px;color:var(--muted);font-weight:600}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:var(--sans);font-size:.96rem;font-weight:600;background:#fff;color:var(--navy)}
select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,83,162,.13)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;margin-bottom:12px;cursor:pointer}
.check:hover{border-color:var(--blue)}
.check input{margin-top:3px;accent-color:var(--blue);flex:none}
.check b{font-weight:700}

/* ---------- results ---------- */
.results{background:var(--blue-tint);border-left:4px solid var(--blue);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:6px 20px;margin-top:4px}
.res-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;font-size:.95rem;border-bottom:1px solid rgba(42,83,162,.16)}
.res-line:last-child{border-bottom:0}
.res-line .v{font-weight:700;white-space:nowrap}
.res-line.head{font-weight:800}
.res-line.head .v{font-size:1.28rem;font-weight:800}
.res-line.total{border-top:2px solid var(--navy)}
.res-line small{display:block;font-size:.79rem;color:var(--muted);font-weight:400;margin-top:2px}
.flag{display:flex;gap:10px;font-size:.86rem;background:#FFFCEB;border:1px solid #EFE08F;color:var(--warn);border-radius:var(--radius-sm);padding:11px 13px;margin-top:14px}
.flag.blue{background:#fff;border-color:var(--line);color:var(--muted)}
.flag b{font-weight:700;color:var(--navy)}

/* ---------- dark promo card ---------- */
.promo-card{background:var(--navy);color:#fff;border-radius:var(--radius);padding:32px}
.promo-card h2{color:#fff;font-size:1.85rem;margin-bottom:.5em}
.promo-card p{color:#C6D0E6;font-size:.98rem}
.promo-card ul{list-style:none;padding:0;margin:22px 0 26px}
.promo-card li{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:.94rem;color:#EDF1F9}
.tick{flex:none;width:20px;height:20px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;margin-top:1px}
.tick svg{width:11px;height:11px}
.btn{display:inline-block;font-weight:800;padding:15px 26px;border-radius:var(--radius-sm);font-size:1rem;text-align:center}
.btn:hover{text-decoration:none}
.btn.yellow{background:var(--yellow);color:var(--navy)}
.btn.yellow:hover{background:#e6ca08}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-dark)}

/* ---------- comparison strip ---------- */
.strip{padding:70px 0;background:var(--navy);color:#fff}
.strip h2{color:#fff}
.strip .eyebrow{color:var(--yellow)}
.strip .lede{color:#C6D0E6;max-width:62ch}
.strip .controls{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin:28px 0 6px;padding:20px;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);background:rgba(255,255,255,.05)}
.strip .controls .field{margin:0;min-width:188px}
.strip .controls label{color:#DDE4F2}
.strip .money{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.07)}
.strip .money span{color:#A9B4CC}
.strip .money input{color:#fff}
.strip select{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);color:#fff}
.strip select option{color:var(--navy)}
/* These two rules have to sit after .strip .money and .strip select above.
   Both of those match with the same specificity as the generic
   .money:focus-within and select:focus, so on source order they were winning
   and resetting the focus border back to its resting colour. The generic focus
   blue is only 2.07:1 against navy anyway, so the strip uses yellow at 10.66:1. */
.strip .money:focus-within,
.strip select:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(245,216,21,.30)}
.bars{margin-top:28px;display:grid;gap:2px}
.bar-row{display:grid;grid-template-columns:200px 1fr 136px;gap:18px;align-items:center;padding:15px 0;border-top:1px solid rgba(255,255,255,.13)}
.bar-row .who{font-weight:700;font-size:.96rem}
.bar-row .who small{display:block;color:#9AA6C0;font-weight:400;font-size:.79rem;line-height:1.4;margin-top:2px}
.track{height:24px;background:rgba(255,255,255,.09);border-radius:5px;overflow:hidden;display:flex}
.track .tax{background:var(--yellow);height:100%;transition:width .35s cubic-bezier(.4,0,.2,1)}
.track .net{background:var(--teal);height:100%;transition:width .35s cubic-bezier(.4,0,.2,1)}
.bar-row .num{text-align:right}
.bar-row .num b{display:block;font-weight:800;font-size:1.05rem}
.bar-row .num small{color:#9AA6C0;font-size:.77rem}
.bar-row.best .who{color:var(--yellow)}
.legend{display:flex;gap:22px;font-size:.82rem;color:#9AA6C0;margin-top:20px;flex-wrap:wrap;align-items:center}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:7px;vertical-align:middle}

/* ---------- sections ---------- */
section.block{padding:66px 0}
section.block.tint{background:var(--wash)}
section.block.lined{border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

/* ---------- ad cards ---------- */
/* auto-fit so the row balances at whatever number of cards is live, rather than
   leaving a hole in a hard coded three column grid */
.ads{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.ad{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:#fff;display:flex;flex-direction:column}
/* Partner marks, matching calculategst. alt is empty on purpose: each heading
   already names the brand, so alt text would just be announced twice. Intrinsic
   width and height are on the tags so the browser reserves the space and CLS
   stays where it is. */
.ad-logo{display:block;margin-bottom:16px}
.ad-logo.icon{width:44px;height:44px;border-radius:10px}
.ad-logo.wide{width:132px;height:auto}
.ad .tag{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:13px}
.ad h3{margin-bottom:.45em}
.ad p{font-size:.93rem;color:var(--muted)}
.ad a.go{margin-top:auto;font-weight:800}

/* ---------- about + faq ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.subnav a{font-size:.86rem;font-weight:600;padding:8px 15px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:#fff}
.subnav a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.about h3{margin-top:36px}
.about ul{padding-left:20px}
.about li{margin-bottom:7px}
table.rates{width:100%;border-collapse:collapse;font-size:.92rem;margin:16px 0 22px;background:#fff;border-radius:var(--radius-sm);overflow:hidden}
table.rates th,table.rates td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
table.rates th{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--blue-tint)}
table.rates td:last-child,table.rates th:last-child{text-align:right;font-weight:700}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;font-weight:700;padding:17px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--blue);font-size:1.4rem;line-height:.9;font-weight:600}
details.faq[open] summary::after{content:"\2013"}
details.faq div{padding-bottom:18px;color:var(--muted);font-size:.95rem}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#A9B4CC;padding:56px 0 30px;font-size:.9rem}
footer.site a{color:#DDE4F2}
footer.site .logo{color:#fff}
footer.site .logo b{color:#fff}
footer.site .logo span{color:var(--yellow)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}
footer.site h3{color:#fff;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-bottom:15px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:9px}
.rule{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:22px;font-size:.82rem;color:#8894B2}

@media (max-width:960px){
  /* minmax(0,1fr), not 1fr: a bare 1fr floors the track at min-content, and the
     four nowrap structure tabs made that 400px, so the card overflowed a 375px
     screen and the whole page scrolled sideways. The desktop rule above already
     guards against this the same way. */
  .hero-grid,.two,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .ads{grid-template-columns:minmax(0,1fr)}
  /* Four structure tabs need 324px of label and padding but only 283px is
     available inside the card at 375px, so a single row either forced the card
     wider than the screen or clipped the Trust tab. Two rows of two instead,
     with the container supplying the outer border and radius. */
  .tabs.wide{display:grid;grid-template-columns:1fr 1fr;max-width:none}
  .tabs.wide button{padding:11px 8px;white-space:normal;border:0}
  .tabs.wide button:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tabs.wide button:nth-child(odd){border-right:1px solid var(--line)}
  nav.main{display:none;position:absolute;top:73px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-bottom:1px solid var(--line)}
  nav.main a.cta{text-align:center;margin-top:14px;border:0}
  #navToggle{display:block}
  .bar-row{grid-template-columns:1fr;gap:9px}
  .bar-row .num{text-align:left}
  .row{grid-template-columns:1fr}
  .tabs{margin:20px 20px 0}
  .panel{padding:20px}
  .card-note{padding:0 20px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}html{scroll-behavior:auto}}