/* Self-hosted Plus Jakarta Sans.

   One variable file per subset covers every weight the site uses. The axis is
   200-800 and the site uses 400-800, so a single @font-face replaces the five
   Google emitted per subset.

   Why self-hosted: the Google setup cost two third-party origins and a request
   chain, because the font URL could only be discovered after the stylesheet
   from Google's font CDN had been fetched and parsed. These load from the
   same origin as the page, on the same connection, and are preloaded in the
   head so they start immediately rather than after a stylesheet.

   unicode-range is copied verbatim from Google's own CSS, so latin-ext is
   fetched only by a page that actually uses a character in it. Do not drop it:
   without unicode-range both files download on every page. */

@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ABN Assist shared design system for inner pages.
   Extracted from the redesign homepage so every page reads as one site.
   The homepage keeps its own inline styles (delivered as a sealed file); this
   stylesheet mirrors those tokens for everything else. */

:root{--navy:#262677;--navy2:#1D1D66;--blue:#3844CA;--bluehov:#4A7BFF;--sky:#EBF8FD;--yellow:#FFD650;--ink:#150925;--muted:#5B6B82;--bg:#F6F7FD;--card:#FFFFFF;--line:#DDE1F2;--green:#1B9E62;--red:#F15648;--amber:#C98A1B}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 20px}

/* header */
header.site{background:var(--navy);color:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:14px}
header.site img{height:38px}
.phone{font-weight:800;color:#fff;text-decoration:none;font-size:15px;text-align:right}
.phone small{display:block;font-weight:600;font-size:11px;color:#9FB3C8;letter-spacing:.06em}
nav.site{background:var(--navy2)}
nav.site .wrap{display:flex;gap:4px;padding:0 20px;overflow-x:auto}
nav.site .wrap,#site-nav .wrap{scrollbar-width:none;-ms-overflow-style:none}
nav.site .wrap::-webkit-scrollbar,#site-nav .wrap::-webkit-scrollbar{display:none}

nav.site a{color:#C9D6E4;text-decoration:none;font-size:13.5px;font-weight:700;padding:11px 12px;white-space:nowrap}
nav.site a:hover,nav.site a.on{color:var(--yellow)}

/* page hero */
.page-hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;padding:44px 0 48px}
.page-hero h1{font-size:clamp(26px,4vw,38px);font-weight:800;line-height:1.15;letter-spacing:-.01em}
.page-hero h1 em{font-style:normal;color:var(--yellow)}
.page-hero .sub{color:#C9D6E4;margin-top:12px;font-size:16px;max-width:640px}
.page-hero .crumbs{font-size:12.5px;color:#9FB3C8;font-weight:700;letter-spacing:.05em;margin-bottom:14px}
.page-hero .crumbs a{color:#9FB3C8;text-decoration:none}

/* Split hero: copy left, form right. Mirrors the homepage, whose own copy of
   these rules lives inline in index.html because that page does not link this
   stylesheet. Keep the two in step. */
.page-hero .hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start}
.page-hero .hero-grid .sub{max-width:440px}
.page-hero .hero-grid .agent{margin-top:20px}
/* Breadcrumbs span the grid and come first, so they stay at the top of the page
   rather than landing under the form once the columns stack on mobile. */
.page-hero .hero-grid > .crumbs{grid-column:1 / -1;order:-1}

/* Tick list for hero proof points, as on the homepage. */
.ticks{list-style:none;margin:18px 0 26px}
.ticks li{padding:6px 0 6px 30px;position:relative;font-size:15px;color:#E7EEF6;font-weight:600}
.ticks li::before{content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:var(--yellow);color:var(--navy);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}

/* content */
main.page{padding:40px 0 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.card + .card{margin-top:18px}
.prose h2{font-size:22px;font-weight:800;margin:26px 0 8px}
.prose h3{font-size:18px;font-weight:800;margin:22px 0 6px}
.prose p{margin-bottom:12px;font-size:15.5px}
.prose ul,.prose ol{margin:0 0 14px 22px;font-size:15.5px}
.prose li{margin-bottom:6px}
.prose a{color:var(--blue);font-weight:700}
.prose .lead{font-size:17px;color:var(--muted)}

/* buttons */
.btn{display:inline-block;background:var(--yellow);color:var(--navy);border:none;font-family:inherit;font-weight:800;font-size:16px;padding:14px 28px;border-radius:12px;cursor:pointer;text-decoration:none;text-align:center}
.btn.ghost{background:#fff;border:2px solid var(--line);color:var(--muted);font-size:14px;padding:12px 18px}
.btn:disabled{opacity:.5;cursor:default}
.btn.block{display:block;width:100%}

/* forms (mirror of the homepage form card) */
.form-card{background:var(--card);color:var(--ink);border-radius:20px;box-shadow:0 24px 60px rgba(0,20,45,.18);overflow:hidden;border:1px solid var(--line)}
.form-head{padding:18px 26px 0;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.form-head h2{font-size:19px;font-weight:800}
.stepnum{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.08em}
.form-body{padding:14px 26px 24px}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 26px;border-top:1px solid var(--line);background:#FAFCFF}
.total{font-size:13px;color:var(--muted);font-weight:700}
.total b{display:block;font-size:20px;color:var(--navy)}
.field{margin-bottom:14px}
.field label,label.lab{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
label .why{font-weight:600;color:var(--muted);font-size:12px}
/* 16px is the floor - below it iOS zooms the viewport on focus */
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{width:100%;font-family:inherit;font-size:16px;font-weight:600;padding:12px 14px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
textarea{min-height:84px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:minmax(92px,.55fr) 1fr 1fr;gap:12px}
/* Address rows invert it: suburb names are long, state is three letters and
   postcode is four digits, so the flexible column belongs at the front. */
.row3.addr{grid-template-columns:1fr minmax(92px,.55fr) minmax(92px,.55fr)}
/* Mobile: the 04 every Australian mobile starts with is fixed and sits outside
   the input, so there are eight digits to fill rather than ten to get right. */
.tel-group{display:flex;align-items:center;border:2px solid var(--line);border-radius:10px;background:#fff}
.tel-group:focus-within{border-color:var(--blue)}
.tel-prefix{padding:12px 10px;border-right:1px solid var(--line);font-size:15.5px;font-weight:600;color:var(--muted);user-select:none}
.tel-group input[type=tel]{border:0;border-radius:0;padding-left:10px;background:transparent}
.tel-group input[type=tel]:focus{outline:none}
.field.invalid .tel-group{border-color:var(--red)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg label{flex:1;min-width:90px;border:2px solid var(--line);border-radius:10px;padding:11px 8px;text-align:center;cursor:pointer;font-size:14px;margin:0;font-weight:600}
.seg input{display:none}
.seg label:has(input:checked){border-color:var(--blue);background:#EFF4FF;font-weight:800}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);font-weight:600;cursor:pointer}
.check input{margin-top:3px;width:17px;height:17px;accent-color:var(--blue)}
.note{background:#F4F7FB;border-left:4px solid var(--yellow);border-radius:8px;padding:10px 14px;font-size:12.5px;color:var(--muted);margin:10px 0}
.stop{background:#FDECEA;border-left:4px solid var(--red);border-radius:8px;padding:12px 14px;font-size:13.5px;color:#8C2B22;margin:10px 0;font-weight:700}
.err{color:var(--red);font-size:12.5px;font-weight:700;margin-top:4px;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)}
.hidden{display:none!important}

/* lookup entity card (cancel form) */
.entity-card{border:2px solid var(--line);border-radius:14px;padding:18px;margin:12px 0;background:#fff}
.entity-card .entity{font-size:19px;font-weight:800;line-height:1.2}
.badges{display:flex;gap:8px;margin:10px 0 12px;flex-wrap:wrap}
.badge{font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:5px 12px;border-radius:99px}
.b-green{background:#E3F5EC;color:var(--green)}
.b-red{background:#FBE7EA;color:var(--red)}
.b-amber{background:#FBF1DD;color:var(--amber)}
.b-grey{background:#EDF1F7;color:var(--muted)}
.rows{border-top:1px solid var(--line)}
.rowline{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.rowline .k{color:var(--muted)}
.rowline .v{font-weight:700;text-align:right}

/* pricing tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:26px 0}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center}
.tile .amount{font-size:38px;font-weight:800;color:var(--navy)}
.tile .amount small{font-size:14px;color:var(--muted);font-weight:700}
.tile h3{font-size:16px;font-weight:800;margin:6px 0 8px}
.tile p{font-size:13.5px;color:var(--muted)}
.tile .btn{margin-top:14px;font-size:14px;padding:11px 20px}

/* trust strip */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:40px 0 10px}
.s3{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.s3 .n{width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--yellow);font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px}
.s3 h3{font-size:16px;font-weight:800;margin-bottom:4px}
.s3 p{font-size:13.5px;color:var(--muted)}
/* 54px, not 44px: the eight-digit agent number overflowed the smaller circle
   and rendered clipped, which is the last thing that should look broken. */
/* The Tax Practitioners Board symbol, official artwork, never redrawn.

   Sized by WIDTH, because that is how the TPB's guidelines set the minimum:
   22mm or 136px for the stacked lockup, 44.5mm or 168px for the inline one, on
   electronic media. Every placement on this site was previously under it.

   The stacked lockup is used throughout, including here where the inline one
   would fit the row better. At its own minimum width the inline version spends
   most of that width on the text beside the roundel, leaving the roundel itself
   smaller and harder to read than the stacked version at 140px. Legibility of
   the mark wins over the shape of the box around it.

   The lockup already carries "Tax Agent 26076969", so the text below it does
   not repeat the number. The block stacks so the symbol keeps clear space on
   all sides. */
/* Mark on the left, the three lines beside it, which is the arrangement Juan
   asked for. It fits now because the reversed lockup carries no white tile
   around it: the row is 136px of symbol plus a 16px gap, leaving 236px for
   text in a 420px block, and the company name sets on one line at 13.5px. */
.agent{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px;max-width:460px;margin-top:20px}
.agent .tpb-mark{width:136px;height:auto;flex:none;display:block}
/* Three lines, one fact each: who we are, the ABN, and where to check us. */
.agent p{font-size:12.5px;color:#C9D6E4;line-height:1.5}
.agent p b{color:#fff;display:block;font-size:13.5px;margin-bottom:2px}
.agent p span,.agent p a{display:block}
.agent p a{color:#fff}

/* Two files, one rule each way round.

   On navy the mark is `tpb-mark-on-dark.png`: the roundel arrives on its own
   white disc and the registration line is already reversed to white, so the
   image needs nothing behind it. That replaces the disc this stylesheet used
   to paint, which was a workaround for having only the light-background file.

   The colour lockup survives in one place, the "who you're dealing with" card
   on the contact page, which is white. The reversed file would be invisible
   there, and this one needs no help.

   Both share the same 502 by 622 canvas and the same content box, x 90..410
   and y 91..500, so they are interchangeable at any given width. */


/* blog cards */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:26px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-decoration:none;color:var(--ink);display:block}
.post-card h3{font-size:17px;font-weight:800;line-height:1.3;margin-bottom:8px}
.post-card p{font-size:13.5px;color:var(--muted)}
.post-card .more{display:inline-block;margin-top:12px;color:var(--blue);font-weight:800;font-size:13.5px}

/* CTA band */
.cta-band{background:var(--navy);color:#fff;border-radius:18px;padding:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:34px 0 8px}
.cta-band h2{font-size:22px;font-weight:800}
.cta-band h2 em{font-style:normal;color:var(--yellow)}
.cta-band p{color:#C9D6E4;font-size:14px;margin-top:4px}

/* Footer, matching the one on the live WordPress site.

   Three bands: the company block with the TPB mark beside it, the link
   columns, and a base line. Each band is its own .wrap so the columns can
   reflow independently of the block above them.

   The link columns are auto-fit rather than a fixed count. The ABN column
   carries five long guide titles and the Legals column carries two short
   ones, so a fixed grid leaves one column crowded and another mostly empty
   at every width between phone and desktop. */
footer.site{background:var(--navy);color:#9FB3C8;padding:40px 0 24px;font-size:13px;margin-top:56px}
footer.site a{color:#C9D6E4;text-decoration:none}
footer.site a:hover{color:var(--yellow)}

footer.site .f-top{display:flex;gap:24px 40px;align-items:flex-start;flex-wrap:wrap}
footer.site .f-about{flex:1 1 420px;min-width:0}
footer.site .f-about img{height:34px;margin-bottom:14px;display:block}
footer.site .f-about p{margin-bottom:2px;line-height:1.6}
footer.site .f-about .f-blurb{margin-top:14px;font-size:14px;line-height:1.65;color:#C9D6E4;max-width:560px}
footer.site .f-mark{flex:none;margin-left:auto}
footer.site .f-mark img{width:140px;height:auto;display:block}

footer.site .f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px 28px;margin-top:34px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14)}
footer.site .f-cols h3{color:#fff;font-size:15px;font-weight:800;margin-bottom:10px}
footer.site .f-cols ul{list-style:none;margin:0}
footer.site .f-cols li{margin-bottom:8px;line-height:1.45}
footer.site .f-cols small{color:#8FA3BA;font-size:11.5px;letter-spacing:.03em}

footer.site .f-base{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px}
/* Once the company block and the mark stack, the auto margin that pins the
   mark right leaves a column of dead space beside it. */
@media(max-width:700px){footer.site .f-mark{margin-left:0}}
/* Same breakpoint and same stacking order as the homepage: the form comes
   first on narrow screens, the supporting copy below it. */
@media(max-width:880px){.steps3{grid-template-columns:1fr}.row3,.row3.addr{grid-template-columns:1fr}.row2{grid-template-columns:1fr}.cta-band{flex-direction:column;text-align:center;align-items:center}.page-hero .hero-grid{grid-template-columns:1fr;gap:28px}.page-hero .hero-grid .left{order:2}.page-hero .hero-grid .form-card{order:1}.page-hero .hero-grid .sub{max-width:none}}

/* ATO/ABR/ASIC source line + dated stamp. Base rule so it renders anywhere;
   .answer-first and .faq refine it below. */
.src{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.src a{color:var(--blue)}
/* A source line sitting directly in the prose needs to breathe before the next
   paragraph. Scoped to direct children so the one inside .answer-first, which
   closes its own box, is left alone. */
.prose > .src{margin-bottom:16px}

/* answer-first SEO block */
.answer-first{background:#eef3fc;border:1px solid #cdd9f2;border-left:5px solid var(--blue);border-radius:12px;padding:18px 20px;margin:0 0 22px}
.answer-first p{font-size:16px;margin:0}
.answer-first .src{gap:12px;margin-top:10px;padding-top:0;border-top:none;font-size:12.5px}

/* FAQ accordion */
.faq details{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:10px}
.faq summary{list-style:none;cursor:pointer;padding:15px 44px 15px 18px;font-weight:700;font-size:15.5px;position:relative;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:17px;top:50%;transform:translateY(-52%);font-size:22px;font-weight:400;color:var(--blue)}
.faq details[open] summary::after{content:"–"}
/* No vertical padding on the panel: assets/motion.js animates its height, and
   padding would stop height:0 collapsing fully. The bottom gap comes from the
   last child's margin instead. */
.faq .a{padding:0 18px;font-size:14px;color:var(--muted)}
.faq .a a{color:var(--blue);font-weight:700}
.faq .a p{margin:0 0 10px}
.faq .a > *:last-child{margin-bottom:15px}
/* ATO/ABR/ASIC source line + dated stamp inside an answer */
.faq .a .src{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}

/* ── Scroll reveal ──
   assets/motion.js sets .motion on <html> before first paint. With JS off, or
   under prefers-reduced-motion, the flag is never set and nothing is hidden.
   Deliberately an animation rather than a transition: these components already
   carry a transition for their hover states below, and a second transition
   declaration would replace that list. Without animation-fill-mode the element
   reverts to its class state when the animation ends, so transform goes back
   under the hover rules' control. */
@keyframes reveal-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.motion .s3,
.motion .post-card,
.motion .answer-first,
.motion .faq details{opacity:0}
.motion .s3.is-visible,
.motion .post-card.is-visible,
.motion .answer-first.is-visible,
.motion .faq details.is-visible{opacity:1;animation:reveal-in .6s ease-out}

/* ── ATO-style interaction language (colour shift + lift on hover) ── */
a,.btn,.post-card,.s3,.addon,.faq details,.faq summary,.post-card h3,.post-card .more{transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .18s ease,transform .18s ease,filter .15s ease}
main a:hover{color:var(--bluehov,#4A7BFF)}
.post-card:hover{transform:translateY(-3px);border-color:var(--bluehov,#4A7BFF);box-shadow:0 12px 28px rgba(56,68,202,.14)}
.post-card:hover h3{color:var(--blue,#3844CA)}
.post-card:hover .more{color:var(--bluehov,#4A7BFF)}
.s3:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(56,68,202,.10)}
.addon{border:2px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;cursor:pointer;display:flex;gap:12px;align-items:flex-start}
/* The control has to sit on the first text line, not above it. flex-start plus
   a nudge lands it on the bold label whatever the description wraps to. */
.addon input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--blue)}
.addon-txt{flex:1}
.addon b{font-size:15px}
.addon small{display:block;color:var(--muted);font-weight:600;font-size:12.5px}
.addon .price{font-weight:800;color:var(--navy);white-space:nowrap;align-self:center}
.addon:has(input:checked){border-color:var(--blue);background:#EFF4FF}
.subpanel{border:2px dashed var(--line);border-radius:12px;padding:14px;margin:6px 0 14px}
.addon:hover{border-color:var(--bluehov,#4A7BFF);background:var(--sky,#EBF8FD)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 6px 18px rgba(21,9,37,.20)}
.faq details:hover{border-color:var(--bluehov,#4A7BFF)}
.faq details:hover summary{color:var(--blue,#3844CA)}
table tbody tr{transition:background-color .12s ease}
table tbody tr:hover{background:var(--sky,#EBF8FD)}
footer a:hover{color:var(--yellow,#FFD650)}
nav.site a,#site-nav a{position:relative}
nav.site a::after,#site-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--yellow,#FFD650);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
nav.site a:hover::after,nav.site a.on::after,#site-nav a:hover::after,#site-nav a.on::after{transform:scaleX(1)}

/* related links - one line at the foot of a content page */
.related{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.related b{color:var(--ink)}
.related a{color:var(--blue);font-weight:700}

/* accessibility ------------------------------------------------------- */
/* The form rules kill the default outline on focus, so every focusable
   element needs a visible replacement for keyboard users. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--yellow);outline-offset:2px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--yellow);color:var(--navy);
  font-weight:800;padding:12px 18px;border-radius:0 0 10px 0;text-decoration:none}
.skip-link:focus{left:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* Honeypot. Hidden from people and assistive tech, present in the markup so
   a bot filling every field it finds gives itself away. Deliberately not
   display:none, which some bots skip. See lib/guard.js. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}