/* Slate Accounts landing pages: shared tokens, reset, form and footer.
   Palette and type from "Slate Accounts Brand Guide 2025". Jost stands in for Futura PT on the web,
   same as slateaccounts.com.au. Yellowtail is the brand highlight font. */
:root{
  --navy:#243746; --blue:#0076BB; --green:#76BC43;
  --sky:#C7EAFB; --lime:#D7E48A; --sand:#F0E4CC; --yellow:#FFDF4F;
  --ink:#243746; --body:#3f5160; --line:#dfe5e9; --white:#fff; --error:#b3261e;
  --font:'Jost','Futura PT',Futura,'Century Gothic',sans-serif;
  --script:'Yellowtail',cursive;
  --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:18px;line-height:1.55;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.12;letter-spacing:-.01em}
a{color:var(--blue)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.script{font-family:var(--script);font-weight:400;display:inline-block;transform:rotate(-3deg) skewX(-6deg);letter-spacing:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 30px;border:0;border-radius:999px;font:600 18px/1.2 var(--font);text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--green{background:var(--green);color:var(--navy);box-shadow:0 6px 0 #5a9a2c}
.btn--green:hover{background:#82c94d}
.btn--yellow{background:var(--yellow);color:var(--navy);box-shadow:0 6px 0 #d9b82a}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 6px 0 #14222d}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
/* Section call to action: one button per text section, same on both designs. It scrolls to the form.
   On desktop the large scroll margin lands on the top of the hero, so the headline stays in view. */
.cta-row{text-align:center;margin-top:48px;padding-bottom:6px}
#get-guide{scroll-margin-top:24px}
@media (min-width:961px){#get-guide{scroll-margin-top:440px}}

/* Lead form */
.lp-card{background:#fff;border-radius:18px;padding:28px;color:var(--body)}
.lp-form{display:grid;gap:14px;padding-bottom:12px}
.lp-form .row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.lp-field label{display:block;font-size:15px;font-weight:500;color:var(--ink);margin-bottom:6px}
.lp-field input,.lp-field select{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid #b9c4cc;border-radius:10px;background:#fff;font:400 17px/1.3 var(--font);color:var(--ink);appearance:none;-webkit-appearance:none}
.lp-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23243746' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.lp-field input:focus,.lp-field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,118,187,.2)}
.lp-field.is-bad input,.lp-field.is-bad select{border-color:var(--error)}
.lp-field .err{display:none;font-size:14px;color:var(--error);margin-top:5px}
.lp-field.is-bad .err{display:block}
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lp-fine{font-size:14px;line-height:1.45;color:#566774;text-align:center}
.lp-fine a{color:#566774;display:inline-block;padding:12px 6px;margin:-12px -6px}
.lp-fail{display:none;font-size:15px;color:var(--error);background:#fdecea;border-radius:10px;padding:12px 14px}
.lp-fail.is-on{display:block}
.lp-done{display:none;text-align:center}
.lp-card.is-done .lp-form,.lp-card.is-done .lp-card__head{display:none}
.lp-card.is-done .lp-done{display:block}
.lp-done__tick{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.lp-done h3{font-size:26px;margin-bottom:8px}
.lp-done p{margin-bottom:18px}
.lp-done .next{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:16px}

/* Footer */
.foot{background:#fff;border-top:1px solid var(--line);padding:36px 0 0;font-size:15px;color:#566774}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;padding-bottom:36px}
.foot img{width:190px}
.foot a{color:#566774}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px}
/* Market Lead credit: its own navy band under the footer. The bottom padding clears the sticky bar. */
.foot .credit{background:var(--navy);color:#fff;text-align:center;padding:12px 24px;font-size:17px;font-weight:500;letter-spacing:.02em}
.foot .credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--yellow);font-weight:600}

@media (max-width:960px){.foot .credit{padding-bottom:80px}.lp-converted .foot .credit{padding-bottom:12px}}
@media (max-width:640px){.cta-row{margin-top:36px}.cta-row .btn{width:100%}}
/* Phones and tablets: the sticky bar is the call to action, so the section buttons are hidden.
   Only the closing one stays (.end .cta-row on Design B, .final .btns on Design A). */
@media (max-width:960px){.cta-row{display:none}.end .cta-row{display:block}}
/* Sticky bar button: a short double bounce every few seconds while the bar is showing. */
.bar.is-on .btn{animation:bar-bounce 2.6s ease-in-out 1s infinite}
@keyframes bar-bounce{0%,24%,100%{transform:none}8%{transform:translateY(-9px)}15%{transform:none}20%{transform:translateY(-4px)}}
@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .lp-card{padding:22px 18px}
  .lp-form .row{grid-template-columns:1fr}
  .foot .wrap{flex-direction:column;align-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.bar.is-on .btn{animation:none}}