/* GST Register: shared design system.

   Aligned to the Online Services Mini Style Guide, 18 September 2026
   (Adobe project pvo4jgz), supplied by Juan on 21 September. That guide
   replaces the deep-blue palette this site inherited from ABN Assist, and
   supersedes the earlier standing instruction that the palette stays as it was.

   TYPOGRAPHY
     Headings   Stolzl, Medium and Bold
     Body       Instrument Sans, Regular / Italic / Medium / Semibold
     System     Arial

   WHERE THE TWO FACES COME FROM, 23 September 2026. They come from different
   places on purpose.

   Stolzl is from the ADOBE WEB PROJECT, kit pvo4jgz, which every page loads
   before this file. Adobe's terms do not permit self-hosting the files, so this
   is the only route to it, and it costs a request to use.typekit.net on every
   page. Adobe therefore receives every visitor's IP, which privacy.html
   discloses and tests/privacy-policy.mjs enforces. The kit serves Stolzl at
   weights 500 and 700 with font-display:swap, read from the kit itself rather
   than assumed.

   Instrument Sans stays SELF-HOSTED, in the @font-face blocks below, and is NOT
   taken from the kit even though the kit contains it. The kit's
   instrument-sans-variable face is font-style:normal only, and 54 of the 56
   pages here set italic. Serving the body font from Adobe would have replaced
   every italic on the site with a synthesised oblique. Keeping it here also
   means body text still paints from our own origin while only the headings wait
   on Adobe.

   An unused @font-face costs nothing: a browser downloads a face only when
   something on the page asks for it, so the kit's Instrument Sans is never
   fetched.

   HEADINGS ASK FOR 800 AND STOLZL HAS 700. CSS font matching resolves a request
   above the heaviest available face down to that face, so headings render
   Stolzl Bold with no synthetic emboldening. The declarations were left at 800
   rather than rewritten across the site for an identical result.

   COLOUR
   Five brand colours, and only five. Everything else on this page is derived
   from them and every derived value was checked for contrast rather than
   eyeballed, because the first pass produced a --muted that failed WCAG AA at
   2.78:1 and would have shipped unreadable body text.

     --navy    #091F5B  PANTONE 2757 C
     --blue    #1B0FC5  PANTONE 2736 C
     --yellow  #FCC800  PANTONE 7548 C
     --bg      #F8F8F8  secondary off-white
     --ink     #000000  secondary black

   The hero gradient is the guide's own: 2757 C to 2736 C, navy into blue.

   Measured contrast on the derived values, all clearing AA:
     ink on bg 19.77   muted on bg 4.54   blue on bg 10.29
     white on navy 15.46   on-navy on navy 4.55   yellow on navy 9.86
     navy on yellow 9.86

   FONTS ARE SELF-HOSTED, which closes G12. Instrument Sans is a variable font,
   so four files cover every weight from 400 to 700 in both styles, 66KB in
   total, and no visitor's IP reaches Google any more. The privacy policy's
   Google Fonts paragraph came out in the same change, because the two have to
   move together. */

/* Instrument Sans, variable, self-hosted. The unicode-ranges are Google's own,
   so a page with no extended-Latin characters never fetches the -ext files. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/instrument-sans-latin-normal.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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/instrument-sans-latin-ext-normal.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}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('/assets/instrument-sans-latin-italic.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:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('/assets/instrument-sans-latin-ext-italic.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}

/* The guide names three primaries, two secondaries and a gradient. Everything
   below that line is derived from them, not invented: each supporting value is
   the smallest mix that still clears WCAG AA against the lightest brand surface
   it can land on, so no combination the markup can produce falls under 4.5:1.
   Measured ratios are in the comment beside each one. */
:root{
  /* Guide, page 4. Primary. */
  --navy:#091F5B;          /* PANTONE 2757 C */
  --blue:#1B0FC5;          /* PANTONE 2736 C */
  --yellow:#FCC800;        /* PANTONE 7548 C */
  /* Guide, page 4. Secondary. */
  --bg:#F8F8F8;
  --ink:#000000;
  --card:#FFFFFF;
  /* Guide, page 4. Gradient: navy at 0%, blue at 100%. --navy2 is the far end,
     so .hero and .page-hero run the guide's own gradient unaltered. */
  --navy2:#1B0FC5;
  /* A point 22% along that same gradient. The nav bar sits directly under the
     header and needs to read as a step, not a slab of full-strength blue. */
  --navy-step:#0D1B72;
  /* Derived. */
  --bluehov:#5B52D5;       /* blue lightened for hover, 5.47 on --bg */
  --sky:#EBEAF5;           /* the one tint of --blue; --blue on it is 9.17 */
  --line:#DBDEE5;
  --edge:#D1CFF3;          /* border weight of --sky */
  --muted:#5A6991;         /* 4.56 on --sky, 5.12 on --bg, 5.43 on white */
  /* Text on a dark brand surface. hi and mid clear AA on all three darks
     (navy 9.91/6.42, step 9.51/6.16, blue 7.01/4.54); dim clears 4.5 on
     --navy only (4.55), which is why it is footer fine print and nothing else. */
  --on-navy-hi:#CACFDC;
  --on-navy:#9EA7BE;
  --on-navy-dim:#7F8BAA;
  /* Status. Outside the guide's scope: these carry meaning, not brand. */
  --green:#1B9E62;
  --red:#F15648;
  --amber:#C98A1B;
  /* Stolzl arrives from the Adobe web project, kit pvo4jgz, which every page
     loads before this file. Adobe's CSS family name is lowercase "stolzl" and
     that is the name that has to be used; "Stolzl" matches nothing.
     Instrument Sans stays SELF-HOSTED and is not taken from the kit: the kit's
     instrument-sans-variable face has font-style:normal only, and 54 of the 56
     pages here set italic. Taking the body font from Adobe would have replaced
     every italic with a synthesised oblique. */
  --font-head:'stolzl','Instrument Sans',Arial,sans-serif;
  --font-body:'Instrument Sans',Arial,sans-serif
}
*{margin:0;padding:0;box-sizing:border-box}
/* Every heading, one rule, so the day Stolzl's files arrive nothing else
   has to be touched. */
h1,h2,h3,h4,h5,h6,.btn,.hdr-cta{font-family:var(--font-head)}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6}
/* ---- The width system -----------------------------------------------------
   Measured against books.link.com.au, which the client wants the proportions of.
   It is one wide fixed-max container (1600) with a stepped gutter, full-bleed
   section backgrounds, and the reading measure set on the text rather than on
   the container. We take all of that except the stepped gutter, which jumps 93px
   narrower as the window crosses 1280, and except its reading measure, which runs
   106 characters per line.

   --shell    outer cap for bands, chrome and card rows. Above it the page centres.
   --gutter   fluid, so there is no discontinuity at a breakpoint.
   --measure  80 characters per line, the WCAG 1.4.8 ceiling. Instrument Sans
              averages 7.12px per character at 16px, so 36em lands at 81. The
              classical 45 to 75 is the target; 80 is the limit.
   --form-col the hero order form. Clamped so its inputs never balloon. */
:root{
  --shell:1600px;
  --gutter:clamp(20px,4.5vw,88px);
  --measure:36em;
  --form-col:clamp(420px,42%,560px);
}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
/* The prose tier. 53 of 56 pages put their main content in this, and it is sized
   to hug the measure plus the prose card's own 26px padding, so text fills the
   card instead of leaving a blank strip down one side. */
.wrap-narrow{max-width:calc(628px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* ---- Header and nav -------------------------------------------------------
   All of this used to live in two <style> blocks inlined on 55 pages, which
   outranked this file and made every rule below dead code: the nav read 13.5px
   because of an inline `#site-nav a` rule, not because of anything here. The
   inline blocks are gone and this is the only place it is declared.

   Sizing was set when the shell was 1060px wide. It is 1600 now, so a fixed
   620px nav row went from 61% of the bar to 43% and the type never grew with
   it. The nav is fluid so it keeps its share of a bar that is itself fluid, and
   its floor is set by the 44px touch target rather than by taste. */
/* Sticky, so the Register for GST button and the phone number follow you down
   every page on the site. Only the top row sticks: the nav row below it scrolls
   away, because pinning both would eat a third of a phone viewport to keep menu
   items visible that nobody is reading while they scroll. */
header.site{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);gap:20px}
header.site .wrap>a:first-child{margin-right:auto}
/* The logo is gst-register-reversed.svg from 11 November 2026, cropped tight to
   the lettering. The PNG it replaced carried padding, its lettering filling 83%
   of its height, so every logo height here is 0.83 of what it was: the
   lettering renders at the same size as before. */
header.site img{display:block;height:clamp(33px,1.33vw + 15px,40px);width:auto}
.hdr-cta{flex:none;background:var(--yellow);color:var(--navy);font-weight:800;font-size:15px;line-height:1.2;padding:13px 20px;border-radius:10px;text-decoration:none;white-space:nowrap}
.hdr-cta:hover{filter:brightness(1.05)}
.phone{font-weight:800;color:#fff;text-decoration:none;font-size:16px;text-align:right;white-space:nowrap}
.phone small{display:block;font-weight:600;font-size:11.5px;color:var(--on-navy);letter-spacing:.06em}
@media(max-width:640px){
  header.site img{height:23px}
  header.site .wrap{gap:10px;padding:12px 14px}
  /* 44px, not 39px: 12.5 x 1.2 + 24 of padding fell short of the tap target
     the kit asks for, on the one button that matters most on a phone. */
  .hdr-cta{font-size:12.5px;padding:12px 11px;min-height:44px;display:inline-flex;align-items:center}
  /* No visible change, but it takes the tap target from 21px to 39px. */
  .phone{font-size:13px;padding:9px 0;min-height:44px;display:inline-flex;flex-direction:column;justify-content:center}
  .phone small{display:none}
}
/* Below about 340 the logo, CTA and phone together are wider than the bar, so the
   page scrolls sideways. Predates the width work. 360 and 375 do not need it. */
/* Under 360px, for 320px (first-generation iPhone SE) and up. Logo, button and phone came to about
   310px against 300 of room, so the phone number sat flush on the screen edge
   (docs/todo.md, item 38). A 24px logo and a slightly tighter button win the
   10px back; min-height keeps the button a 44px tap target. It runs to 359px,
   not 340: measured, the standard header also overflowed from 341 to about
   355px, and nothing common sits in that range to lose by it. */
@media(max-width:359px){
  header.site img{height:20px}
  .hdr-cta{font-size:11.5px;padding:11px 7px;min-height:44px}
  .phone{font-size:12px}
  header.site .wrap{gap:7px;padding:12px 10px}
}

nav.site{background:var(--navy-step)}
/* Do not put transform, filter, contain, overflow or mask on nav.site: it is the
   offset parent of the fixed .dd-panel and any of them re-anchors or clips it. */
#site-nav .wrap{display:flex;gap:4px;padding:0 var(--gutter);overflow-x:auto;align-items:center;scrollbar-width:none;-ms-overflow-style:none}
#site-nav .wrap::-webkit-scrollbar{display:none}
/* 15px at the floor is not a preference: 15 x 1.25 line-height + 2 x 13px
   padding is a 44.8px box, which clears the 44px touch minimum. The explicit
   line-height also gives button.dd the same box as the links, which the UA
   stylesheet's line-height:normal was making 6px shorter. */
#site-nav a,#site-nav button.dd{color:var(--on-navy-hi);background:none;border:none;cursor:pointer;text-decoration:none;font-size:clamp(15px,12px + .25vw,16.5px);line-height:1.25;font-weight:700;padding:13px 14px;white-space:nowrap;font-family:inherit}
#site-nav a:hover,#site-nav a.on,#site-nav button.dd:hover,#site-nav button.dd[aria-expanded="true"]{color:var(--yellow)}
#site-nav a.reg{color:#fff}
#site-nav .dd-panel{display:none;position:fixed;z-index:80;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(10,20,50,.22);padding:8px;min-width:240px;max-width:calc(100vw - 16px)}
#site-nav .dd-panel a{display:block;color:var(--ink);font-size:14px;font-weight:600;padding:10px 12px;border-radius:8px}
#site-nav .dd-panel a:hover{background:var(--sky);color:var(--ink)}
#site-nav .dd-panel a small{display:block;font-weight:500;color:var(--muted);font-size:12px}
/* The bar's white-space:nowrap matches every #site-nav a, including the panel's,
   so a description longer than the panel was clipped mid-word rather than wrapped. */
#site-nav .dd-panel a{white-space:normal}
/* #site-nav a.on and #site-nav .dd-panel a are both (1,1,1) and the panel rule
   comes later, so the current row showed no state at all. */
#site-nav .dd-panel a.on{background:var(--sky)}
#site-nav button.dd.on{color:var(--yellow)}
/* Group labels, the .band-kicker eyebrow one step down, with a rule above the
   second group so the boundary is read from the surface before the word. */
#site-nav .dd-panel .eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);padding:8px 12px 4px}
#site-nav .dd-panel a + .eyebrow{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
/* The bar hides items on a phone with the scrollbar suppressed and no cue but a
   cut word. position:relative is not on nav.site's forbidden list (transform,
   filter, contain, overflow, mask), so it does not re-anchor the fixed panel. */
nav.site{position:relative}
#site-nav.cut::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;background:linear-gradient(90deg,transparent,var(--navy-step));pointer-events:none}
@media(max-width:900px){
  #site-nav .wrap{gap:2px}
  #site-nav a,#site-nav button.dd{padding:13px 10px}
}

/* 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;max-width:24em}
.page-hero h1 em{font-style:normal;color:var(--yellow)}
.page-hero .sub{color:var(--on-navy-hi);margin-top:12px;font-size:16px;max-width:var(--measure)}
.page-hero .crumbs{font-size:12.5px;color:var(--on-navy);font-weight:700;letter-spacing:.05em;margin-bottom:14px}
.page-hero .crumbs a{color:var(--on-navy);text-decoration:none}

/* 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(--ink)}
/* The answer-first sentence is the thing the page exists to say, and on an AI
   surface it is the passage most likely to be quoted. It gets the brand navy,
   not the body grey the rest of the lead used to inherit. */
.prose .lead b,.prose .lead strong{color:var(--navy)}

/* 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:var(--bg)}
.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}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{width:100%;font-family:inherit;font-size:15.5px;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:.8fr 1.4fr .8fr;gap:12px}
.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:var(--sky);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:var(--bg);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:var(--sky);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)}
.agent{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:12px 16px;max-width:440px;margin-top:20px}
.agent .badge-circle{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--navy);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;line-height:1.1;flex:none}
.agent p{font-size:12.5px;color:var(--on-navy-hi);line-height:1.45}
.agent b{color:#fff;display:block;font-size:13.5px}

/* 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:var(--on-navy-hi);font-size:14px;margin-top:4px}

/* ---- Footer ----------------------------------------------------------------
   It was a three-item flex, so the content shrank to 719px and sat hard left
   with 708px of empty navy beside it at 1920, and its eleven links were one
   undifferentiated column mixing a paid service, a free tool, a guide and two
   legal documents. Every visual property lived in inline attributes on 55
   pages, so the stylesheet had four rules and one of them had never applied.

   It is a five-column grid now, with the same vocabulary as the page body:
   a marker object and an eyebrow at the head of each group. --on-navy-hi is
   9.91 on navy, --on-navy 6.42, --on-navy-dim 4.55 and reserved for the fine
   print. The body's .band-kicker eyebrow is --blue, which is 1.41 on navy, so
   the footer overrides it. */
footer.site{background:var(--navy);color:var(--on-navy);padding:40px 0 30px;font-size:13.5px;margin-top:56px}
footer.site .wrap{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:30px 32px;align-items:start}
/* No underline on the link lists or the legal row: they are navigation, and the
   column gives them away. The two links inside the identity sentence keep theirs,
   because a link sitting inside running text needs something other than colour to
   say it is a link. */
footer.site a{color:var(--on-navy-hi);text-decoration:none}
footer.site .foot-who p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
footer.site img{margin:0}
footer.site .logo img{height:28px;width:auto;display:block}
footer.site .foot-who{display:flex;gap:16px;align-items:flex-start;margin-top:16px}
footer.site .foot-who .tpb{height:132px;display:block}
footer.site .foot-who p{font-size:12.5px;line-height:1.6;margin:0}
footer.site .band-kicker{gap:10px;margin:0 0 8px;font-family:var(--font-body)}
footer.site .band-kicker .eyebrow{color:var(--on-navy-hi)}
/* .disc.us is navy on navy here, so it needs its own surface. Same two white
   weights the footer's own dividers use. */
footer.site .disc.sm{margin-right:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--yellow)}
footer.site .foot-col ul{list-style:none;margin:0;padding:0}
footer.site .foot-col li a{display:inline-block;padding:5px 0}
footer.site .phone{display:block;text-align:left;white-space:normal;margin:6px 0 4px}
footer.site .phone small{display:block;margin-top:2px}
footer.site .foot-fees{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
footer.site .foot-fees p{margin:0;font-size:12.5px;font-weight:600;color:var(--on-navy);line-height:1.6;padding-top:4px}
footer.site .foot-fees .eyebrow{display:inline-block;margin-right:12px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-hi)}
footer.site .foot-legal{grid-column:1/-1;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;color:var(--on-navy-dim);line-height:1.6}
/* Not in columns. It is one sentence of legal text, and four newspaper columns
   make the eye travel down and back up four times to read it, with whatever falls
   last stranded alone in the fourth. One block, held to the 80-character ceiling
   of rule 14, which the full 1600px shell would otherwise blow past three times over. */
footer.site .disclaimer{max-width:80ch;margin:0}
footer.site .disclaimer a{color:var(--on-navy)}
footer.site .foot-links{margin:14px 0 0;font-size:12.5px}
footer.site .foot-links a{display:inline-block;padding:4px 0}
@media(max-width:1100px){
  footer.site .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
  footer.site .foot-id{grid-column:1/-1}
}
@media(max-width:640px){
  footer.site .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  footer.site .foot-col li a,footer.site .foot-links a{padding:8px 0}
  footer.site .phone{font-size:18px;padding:0}
  footer.site .phone small{display:block}
}

@media(max-width:880px){.steps3{grid-template-columns:1fr}.row3{grid-template-columns:1fr}.row2{grid-template-columns:1fr}.cta-band{flex-direction:column;text-align:center;align-items:center}}

/* answer-first SEO block */
.answer-first{background:var(--sky);border:1px solid var(--edge);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{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--muted);font-weight:600}
.answer-first .src a{color:var(--blue)}

/* 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:"–"}
.faq .a{padding:0 18px 15px;font-size:14px;color:var(--muted)}
.faq .a a{color:var(--blue);font-weight:700}

/* ── 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)}
.post-card:hover{transform:translateY(-3px);border-color:var(--bluehov);box-shadow:0 12px 28px rgba(56,68,202,.14)}
.post-card:hover h3{color:var(--blue)}
.post-card:hover .more{color:var(--bluehov)}
.s3:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(56,68,202,.10)}
.addon:hover{border-color:var(--bluehov);background:var(--sky)}
.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)}
.faq details:hover summary{color:var(--blue)}
table tbody tr{transition:background-color .12s ease}
table tbody tr:hover{background:var(--sky)}
footer a:hover{color:var(--yellow)}
nav.site a,#site-nav a{position:relative}
#site-nav .wrap>a::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;background:var(--yellow);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)}

/* text logo */
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1}
.logo b{color:var(--yellow);font-weight:800}
.logo small{display:block;font-size:10.5px;font-weight:600;color:var(--on-navy);letter-spacing:.09em;margin-top:2px}

/* ── form system (exact ABN Assist form-card look) ─────────────── */
.form-card{background:var(--card);color:var(--ink);border-radius:20px;box-shadow:0 24px 60px rgba(0,20,45,.35);overflow:hidden;margin-bottom:26px}
.progress{display:flex;background:var(--sky);border-bottom:1px solid var(--line)}
.progress span{flex:1;height:6px;background:var(--sky)}
.progress span.done{background:var(--yellow)}
.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-body fieldset{border:0;margin:0 0 6px;padding:0;min-width:0}
.fs-title{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;margin:14px 0 10px}
.form-body fieldset:first-of-type .fs-title{margin-top:0}
.field{margin-bottom:14px}
/* NOT .addon OR .check. Both are labels that lay themselves out with flex, and
   at 0,1,1 this rule outranked their own 0,1,0 rules, so every add-on tile
   stacked its tick above its text and every declaration's text overlapped its
   own checkbox by 17px. Measured in a browser on 24 September 2026 after Juan
   reported both as separate cosmetic problems; they were one cascade bug. */
.form-card label:not(.addon):not(.check){display:block;font-size:13px;font-weight:700;margin-bottom:5px}
.form-card label .why{font-weight:600;color:var(--muted);font-size:12px}
.form-card input[type=text],.form-card input[type=email],.form-card input[type=tel],.form-card input[type=date],.form-card input[type=number],.form-card select,.form-card textarea{width:100%;font-family:inherit;font-size:15.5px;font-weight:600;padding:12px 14px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--blue)}
.form-card textarea{min-height:84px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:.8fr 1.4fr .8fr;gap:12px}
.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}
.seg input{display:none}
.seg label:has(input:checked){border-color:var(--blue);background:var(--sky);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:var(--bg);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}
.addon{border:2px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;cursor:pointer;display:flex;gap:13px;align-items:center}
.addon:has(input:checked){border-color:var(--blue);background:var(--sky)}
.addon input{position:absolute;opacity:0;pointer-events:none}
.addon .tick{flex:none;width:24px;height:24px;border:2px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:transparent;font-size:14px;font-weight:800;line-height:1;transition:background .15s ease,border-color .15s ease,color .15s ease}
.addon:hover .tick{border-color:var(--bluehov)}
.addon:has(input:checked) .tick{background:var(--blue);border-color:var(--blue);color:#fff}
.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;margin-left:auto}
.addon-panel{border:2px solid var(--blue);border-top:0;border-radius:0 0 12px 12px;padding:16px 16px 4px;margin:-12px 0 14px;background:var(--bg)}
.total .ongoing{display:block;font-size:12px;font-weight:700;color:var(--blue);margin-top:3px}
.subpanel{border:2px dashed var(--line);border-radius:12px;padding:14px;margin:6px 0 14px}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 26px;border-top:1px solid var(--line);background:var(--bg)}
.total{font-size:13px;color:var(--muted);font-weight:700}
.total b{display:block;font-size:20px;color:var(--navy)}
.err{display:none;color:var(--red);font-size:12.5px;font-weight:700;margin-top:5px}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)}

/* ── homepage hero grid (form card in the header, ABN Assist style) ── */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;padding:34px 0 60px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--form-col);gap:clamp(32px,4vw,72px);align-items:start}
.hero h1{font-size:clamp(28px,4.2vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.01em}
/* The homepage headline carries no highlight: it is the name of what this page is,
   said once in white. The two tiers under it do the explaining. .sub is the promise,
   in yellow, which is the one line we want read after the headline; .sub-note is the
   scope, dimmer again. Three weights, descending, so the eye has an order to follow. */
.hero .sub{color:var(--yellow);margin:14px 0 7px;font-size:17.5px;font-weight:600;line-height:1.45;max-width:var(--measure)}
.hero .sub-note{color:var(--on-navy-hi);margin:0 0 22px;font-size:15px;line-height:1.6;max-width:var(--measure)}
/* The asterisk on the turnaround promise, and the note it points at. The note
   lives in the hero rather than the footer on purpose: a qualification the
   reader has to scroll to is a qualification they will not read, and this one
   carries the "up to 24 hours" and "not guaranteed" wording from the Terms. */
.hero .ast{color:var(--yellow);text-decoration:none;font-weight:800;padding:0 3px 0 1px}
.hero .ast:hover,.hero .ast:focus-visible{text-decoration:underline}
.hero .ast-note{color:var(--on-navy);margin:18px 0 0;font-size:12.5px;line-height:1.65;max-width:var(--measure)}
/* The copy column stops at a readable width; the rest of the track becomes air
   between the pitch and the form, which is how the reference hero reads too. */
.hero .left{max-width:640px}
.ticks{list-style:none;margin-bottom:26px}
.ticks li{padding:6px 0 6px 30px;position:relative;font-size:15px;color:var(--sky);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}
.agent{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:12px 16px;max-width:430px}
.agent p{font-size:12.5px;color:var(--on-navy-hi);line-height:1.45}
.agent b{color:#fff;display:block;font-size:13.5px}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}.hero .left{order:2}.hero .form-card{order:1}.row3{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

/* The honeypot's hiding place. Off-screen rather than display:none, because a
   bot that skips hidden inputs would skip the decoy too and the field would
   catch nothing. aria-hidden and tabindex="-1" on the markup keep it away from
   screen readers and the tab order, so it costs a real person nothing.
   LIVES HERE, NOT IN A PAGE'S INLINE <style>. Every page links this file, and
   the one time this rule went missing on a page the field rendered visibly. */
.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}

/* Thank-you page. Lives here rather than in thank-you.html's own <style>, which
   is where the sister site keeps its equivalent. That is the one thing not
   copied from it: a class defined inside one page's inline styles is invisible
   to every other page that reuses the markup, and three separate bugs on that
   site came from exactly this. The verification module will want .ty-card too. */
/* NO BOX AND NO TICK. Juan, 29 October 2026, against ABN Assist: "I'd remove
   the green tick above the Thank you title. Also, don't group everything
   within one white block." .ty-card was that block and .ty-tick the tick; the
   heading keeps its size here instead of inheriting it from the box, and the
   two step cards are now the only boxes on the page, as on /verify-id. */
.ty-head h1{font-size:clamp(23px,3.4vw,30px);font-weight:800;line-height:1.18;
  letter-spacing:-.01em;color:var(--navy);margin:0 0 8px}
.ty-lede{color:var(--muted);font-size:16px;margin:0 0 22px;max-width:56ch}

/* The order detail. Two columns so the labels form a readable left edge, and
   tabular figures so the amounts line up under each other. */
.ty-meta{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:14.5px;
  padding:16px 0 4px;border-top:1px solid var(--line)}
.ty-meta dt{color:var(--muted)}
.ty-meta dd{color:var(--ink);font-weight:700;margin:0;word-break:break-word}
/* .ty-lines, .ty-next and .ty-skel lived here until 29 October 2026, when the
   receipt and the next-steps list came off /thank-you. Juan, against ABN
   Assist: the details are already in the confirmation email, and a price
   breakdown on this page is the third telling of one payment, after the Stripe
   receipt and the tax invoice. The skeleton went with them, because a skeleton
   promises something is still coming. Nothing else on the site used any of
   them, so they are gone rather than left to rot in a stylesheet every page
   loads. .ty-trouble below stays: it is what #ty-detail now exists to hold. */

.ty-foot{text-align:center;font-size:13.5px;color:var(--muted);line-height:1.7;margin:26px 0 0}
.ty-foot a{color:var(--blue);font-weight:700}

/* Shown when the summary cannot be read at all. Deliberately NOT the same panel
   as a successful order with missing detail: one says the payment worked and we
   cannot show the receipt, the other would say nothing happened. */
.ty-trouble{background:#FFF8E4;border-left:4px solid var(--amber);border-radius:0 10px 10px 0;
  padding:15px 18px;font-size:14.5px;color:var(--ink);margin:0 0 20px}

/* ---------- ID verification module ----------
   Shared by /verify-id and the thank-you page, which is why it lives here and
   not in either page's inline <style>. The same class defined inside one page's
   styles is inert on the other, and that has already cost this project a
   morning once.

   GST's own palette throughout. The cards use --blue for their border and
   headings, not the sister site's indigo, and the two status colours are the
   ones already in :root: --green for done, and the amber pair for waiting. */
.idv-head{text-align:center;margin-bottom:4px}
.idv-head h1{font-size:clamp(23px,3.4vw,28px);font-weight:800;color:var(--navy);
  margin:0 0 8px;line-height:1.22;letter-spacing:-.01em}
.idv-lede{color:var(--muted);font-size:15.5px;max-width:52ch;margin:0 auto 18px}
.idv-meta{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  font-size:13.5px;color:var(--muted)}
.idv-meta b{color:var(--ink);margin-left:6px;word-break:break-word}

/* Two cards side by side above 600px or so, stacked below. Seeing both is what
   makes "what is left" obvious at a glance, which is the whole reason for the
   two-card layout rather than a single message. */
.idv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin:26px 0 30px}
.idv-card{border:2px solid var(--blue);border-radius:14px;padding:28px 26px;
  background:var(--card);text-align:center}
.idv-step{font-size:15px;font-weight:800;color:var(--ink);text-align:left;margin-bottom:16px}
.idv-icon{width:60px;height:60px;border-radius:50%;font-size:31px;line-height:60px;margin:0 auto 14px}
.idv-icon.ok{background:#E3F5EC;color:var(--green)}
.idv-icon.wait{background:#FFF4D6;color:var(--amber)}
.idv-card h3{font-size:19px;font-weight:800;color:var(--blue);margin:0 0 12px;line-height:1.3}
.idv-card p{font-size:14.5px;color:var(--muted);margin:0 0 10px;text-align:left}
.idv-card p:last-child{margin-bottom:0}
.idv-btn{display:inline-block;background:var(--green);color:#fff;border:0;border-radius:9px;
  padding:13px 26px;font-size:15.5px;font-weight:800;font-family:inherit;cursor:pointer}
.idv-btn:hover{filter:brightness(1.08)}
.idv-btn:disabled{opacity:.6;cursor:default;filter:none}
.idv-hint{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.idv-status{font-size:13.5px;color:var(--muted);margin:12px 0 0;text-align:left}
.idv-status.bad{color:#8C2B22;font-weight:700}

/* The state machine, in CSS rather than in JavaScript. assets/identity.js sets
   one attribute on #idv and every block that does not belong to that state goes
   away. Using [data-when~=] rather than [data-when=] so a block can list several
   states, which is how "Step 2" with no suffix covers loading, unavailable,
   broken and trouble at once. */
#idv [data-when]{display:none}
#idv[data-state="loading"] [data-when~="loading"],
#idv[data-state="todo"] [data-when~="todo"],
#idv[data-state="done"] [data-when~="done"],
#idv[data-state="unavailable"] [data-when~="unavailable"],
#idv[data-state="broken"] [data-when~="broken"],
#idv[data-state="trouble"] [data-when~="trouble"]{display:block}


/* ---- The order form on a narrow phone -------------------------------------
   Measured at 390x844. Two things fail at step 4 and only at step 4, which is
   why they survived: it is the last screen anyone opens on a handset. */
@media(max-width:560px){
  /* The pay button gets its own row and the full width, rather than a third of
     350px with "Register for GST" wrapped over three lines. */
  .form-foot{flex-wrap:wrap;gap:10px 12px}
  .form-foot .total{flex:1 1 auto}
  .form-foot .btn{flex:1 1 100%;order:3;padding:14px 18px}
}
/* Add-on tiles as a grid, so the price can drop under the description instead of
   holding a nowrap column open and crushing the text to eleven short lines. */
.addon{display:grid;grid-template-columns:24px 1fr auto;column-gap:13px;align-items:center}
.addon .price{margin-left:0}
@media(max-width:560px){
  .addon{grid-template-columns:24px 1fr}
  .addon .price{grid-column:2;justify-self:start;margin-top:4px}
}
/* Prices and thresholds should line up down a column. */
.tile .amount,.rowline .v,.total b,.addon .price{font-variant-numeric:tabular-nums}
/* The border colour alone was the focus state, and it is faint against --line. */
.form-card input:focus-visible,.form-card select:focus-visible,
.form-card textarea:focus-visible{outline:3px solid rgba(27,15,197,.22);outline-offset:1px}
@media(prefers-reduced-motion:reduce){
  .btn:hover,.s3:hover,.post-card:hover,.tile:hover{transform:none}
}


/* ---- Width system, the rest ------------------------------------------------ */
/* Prose sets to the measure wherever it appears. The card around it is already
   sized to match, so this only bites on the three pages that use the full shell. */
.prose p,.prose li,.prose .lead{max-width:var(--measure)}
.prose ul,.prose ol{max-width:calc(var(--measure) + 22px)}
/* Five guide pages carry 5 to 8 column tables, which overflow a phone at any
   container width. Scroll them rather than squeezing the page. */
.prose table{display:block;overflow-x:auto;max-width:100%}
/* The footer disclaimer ran 198 characters per line at 1060 and would run 276 at
   the shell width. Three columns brings it back to 80 and takes 92px off the
   footer. The class is already on all 56 footers, so no markup changes. */
/* A wider stage wants a little more air between bands. */
main.page{padding:48px 0 72px}
@media(max-width:880px){
  .hero .left{max-width:none}
}

/* 26px of card padding each side is 14% of a 360px viewport, and it sits inside a
   20px gutter, so a phone loses 92px of 360 before a word is set. */
@media(max-width:560px){
  .card{padding:18px}
}

/* "Online GST registration form" is a longer step title than the one it replaced,
   and .form-head was shrinking it against the step counter, so it wrapped to two
   lines at phone width and cost 31px of the fold on the screen where the form
   leads. Let it keep its intrinsic width, and trim the type just enough to fit
   beside the counter at 360. */
.form-head{flex-wrap:wrap}
.form-head h2{flex:0 0 auto;min-width:0}
@media(max-width:430px){
  /* Title and counter will not sit side by side at 360 once the title is a
     sentence rather than a label, and wrapping the counter onto its own line
     below reads as a stray fragment. Stack it above as an eyebrow instead:
     shorter than the two-line version it replaces, and the reading order is
     the one people expect from a stepped form. */
  .form-head{flex-direction:column;align-items:flex-start;gap:2px}
  .form-head h2{font-size:17.5px}
  .form-head .stepnum{order:-1;font-size:10.5px}
}

@media(max-width:900px){
  #site-nav .wrap>a::after{left:10px;right:10px}
}

/* ---- Homepage explainer bands ----------------------------------------------
   The how-to prose was one 628px card, 2,444px tall at 1440, sitting in a
   1,310px wrap with 341px of empty page each side. Six H2s with identical
   rhythm and nothing to tell you where one topic ended.

   Each H2 is its own full-shell card now: the heading and its answer-first
   paragraph on the left, the table, list or panel that supports it on the
   right. Source order is untouched, H2 then the lead <p> then the rest, so a
   crawler and an extractor read the same document as before. Nothing is
   collapsed, tabbed, truncated or hidden at any width: the only <details> on
   the page are the four FAQ items that were always there. The lead never runs
   long because .prose .lead already caps it at the 36em measure. */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 56px;align-items:start}
.band h2{margin-top:0}

/* Section headings, made scannable.

   Every band used to open with a 12px blue eyebrow and an H2 at roughly body
   scale, so six different sections looked identical and the page read as one
   wall. The short label is now the large element and the keyword sentence sits
   under it, both INSIDE the h2, so the heading still carries its search terms
   while the eye gets something four words long to land on.

   The label tops out at 34px against the hero's 42px. Deliberately: a section
   heading that matches the hero gives the page two biggest things and fixes
   nothing.

   No ordinal beside the icon. A small "01" next to a 34px heading is a second,
   quieter label competing with the one that matters, and the six labels are
   distinct enough that nobody needs to be told which is third. The jump chips
   lost theirs with it: those numbers only earned a place as a pointer to the
   section number, so once that went they were decoration on a 44px target. */
.sec-h{display:block;margin:0 0 10px}
.sec-h .sec-label{display:block;font-size:clamp(25px,2.9vw,34px);line-height:1.12;
  letter-spacing:-.01em;font-weight:800;color:var(--navy)}
.sec-h .sec-sub{display:block;font-size:16.5px;line-height:1.45;font-weight:600;
  color:var(--muted);margin-top:6px;max-width:var(--measure)}
.band.tint .sec-h .sec-sub{color:var(--muted)}

/* A contextual call to action at the end of a section, placed where somebody
   has just learned the thing that would make them act. Not a banner repeated at
   intervals: each one answers the section it follows. */
.sec-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sec-cta p{margin:0;font-size:14.5px;color:var(--muted);max-width:62ch}
.sec-cta p b{color:var(--navy)}
.sec-cta .btn{flex:none;font-size:15px;padding:13px 24px}
.band.tint .sec-cta{border-top-color:var(--edge)}

/* The sticky call to action. Top on desktop, bottom on a phone, because that is
   where a thumb is. It only appears once the hero form has scrolled out of
   sight, so it never covers the thing it is pointing at. */
/* Phone only. On desktop the sticky header already carries this button, and two
   bars saying the same thing is one too many. On a phone the header button is
   small and a long way from a thumb, so the bottom bar earns its place. */
.stickcta{display:none}
.stickcta[hidden]{display:none}
.stickcta .wrap{display:flex;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.stickcta .sc-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.stickcta .sc-txt b{font-size:15px}
.stickcta .sc-txt small{font-size:12.5px;color:var(--on-navy-hi)}
.stickcta .btn{flex:none;font-size:15px;padding:12px 22px}
.stickcta .sc-tel{flex:none;color:#fff;font-weight:800;font-size:15px;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
@media(max-width:700px){
  .stickcta:not([hidden]){display:block;position:fixed;left:0;right:0;top:auto;bottom:0;z-index:40;
    background:var(--navy);color:#fff;box-shadow:0 -6px 24px rgba(0,20,45,.28)}
  .stickcta .sc-txt{display:none}
  .stickcta .wrap{gap:10px}
  .stickcta .btn{flex:1;text-align:center}
  .sec-cta .btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:no-preference){.stickcta{transition:transform .18s ease}}

/* The jump nav. Not sticky: the page already has a header, and a second bar
   pinned to a phone viewport costs more than it gives on a page this short. */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.jump a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;
  border:1px solid var(--line);border-radius:99px;background:var(--card,#fff);
  font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;line-height:1.2}
.jump a:hover,.jump a:focus-visible{border-color:var(--blue);background:var(--sky)}
/* :target styles the section you jumped to, in CSS alone, so the indicator
   works with JS off and needs no scroll listener. */
.band:target .sec-h .sec-label{color:var(--blue)}
/* Without this a jump puts the heading hard against the top of the window. */
/* Header height plus a little air. Without this a jump puts the heading
   underneath the sticky header, which is the classic way this feature annoys people. */
:target,.band[id],[id^="gst-"]{scroll-margin-top:calc(var(--hdr-h, 80px) + 18px)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media(max-width:560px){
  .jump{gap:6px}
  .jump a{font-size:13.5px;padding:0 13px}
}
.band .lead{margin-bottom:0}
.band-body>:last-child{margin-bottom:0}
.band-full{display:block}
.band-full h2{margin-bottom:16px}

/* The four-step procedure as a numbered rail, numerals from the list's own
   counter. Deliberately quieter than the navy and yellow .s3 .n discs a few
   hundred pixels above: those three are our steps, these four are the
   procedure, and in the same colours the eye reads them as one broken run. */
.band .rail{list-style:none;margin:0;padding:0;counter-reset:step;max-width:none}
.band .rail li{position:relative;padding:0 0 16px 44px;margin:0;counter-increment:step}
.band .rail li:last-child{padding-bottom:0}
.band .rail li::before{content:counter(step);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--sky);border:2px solid var(--edge);color:var(--blue);font-family:var(--font-head);font-weight:800;font-size:13.5px;line-height:24px;text-align:center}
.band .rail li:not(:last-child)::after{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:var(--line)}
.band .rail li b{color:var(--navy)}

/* The threshold table, out of inline styles. Two columns cannot overflow a
   phone, so it stays a real table rather than the scrolling block that
   .prose table makes of the wide guide tables. */
.band .who{display:table;width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 12px}
.band .who th{text-align:left;font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;padding:0 12px 8px 0;border-bottom:2px solid var(--line)}
.band .who td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.band .who th:last-child,.band .who td:last-child{padding-right:0}
.band .who td:last-child{font-variant-numeric:tabular-nums}
.band .who b{color:var(--navy)}
.band .note{font-size:13.5px;margin:0}

/* The fee panel borrows the pricing page's figure and the order summary's rows,
   so the homepage cannot drift from either. */
.fee{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 20px 6px}
.fee .fs-title,.more .fs-title{margin:0 0 6px}
.fee .amount{font-family:var(--font-head);font-size:38px;font-weight:800;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.fee .amount small{font-size:14px;color:var(--muted);font-weight:700}
.fee-inc{font-size:13.5px;color:var(--muted);font-weight:600;margin:4px 0 12px}
.fee .rowline .k{font-weight:600}
.fee .rowline .v{color:var(--navy)}
.fee .rowline:last-child{border-bottom:0}

/* Three across, left aligned and at body size, because each one carries a
   hundred-word worked example that the centred 13.5px .s3 card cannot hold. */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.choice{background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--yellow);border-radius:12px;padding:20px 22px}
.choice h3{margin:0 0 8px;font-size:17px;color:var(--navy)}
.choice p{margin:0;font-size:15px}
.choice p b{color:var(--navy)}

.more{background:var(--sky);border:1px solid var(--edge);border-radius:12px;padding:18px 20px}
.more p{margin:0;font-size:15px}

@media(max-width:880px){
  /* minmax(0,1fr), not 1fr. A grid item defaults to min-width:auto, so a
     single 1fr column cannot shrink below its widest content and the band
     pushes past a 320px viewport. The two-column rule guards this; the
     collapse rule did not. Found on ABN Assist by its layout gate. */
  .band{grid-template-columns:minmax(0,1fr);gap:12px}
  .choices{grid-template-columns:1fr}
}
@media(max-width:560px){
  .choice{padding:16px 18px}
}

/* ---- Reading aids ----------------------------------------------------------
   The bands fixed the shape of the prose and not its density: six white cards
   with nothing to tell a scanner what kind of thing each one is. 79% of people
   scan rather than read, and the pattern they use when headings and chunking
   exist is the layer cake; without cues it collapses to an F and the middle of
   every paragraph is lost. So: a category kicker on every band, worked examples
   set apart and labelled, sequences drawn as sequences, and the four numbers a
   worried reader is hunting for lifted to the top.

   Nothing here hides or replaces text. Every device either wraps sentences that
   were already there or restates a figure that is already in the prose beside
   it. */
:root{--straw:#FFF8E4}   /* the one tint of --yellow; already used by .ty-trouble */

/* Visually hidden, for the word behind a glyph. */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Icons are stroke-only, 24x24, and take their colour from the parent, so a
   palette change moves all of them and the retired-hex check can never catch
   one. Every icon sits beside text that says the same thing, so every icon is
   aria-hidden. */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.15em;flex:none}
.disc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--sky);color:var(--blue);flex:none}
.disc svg{width:22px;height:22px}
.disc.rule{background:var(--straw);color:var(--navy)}
.disc.us{background:var(--navy);color:var(--yellow)}
.disc.sm{width:30px;height:30px;margin-right:10px}
.disc.sm svg{width:17px;height:17px}

/* The kicker is the layer-cake cue: what kind of section this is, before the H2. */
.band-kicker{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.band-kicker .eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.band-kicker .rule + .eyebrow{color:var(--navy)}
/* Colour is a second, redundant channel: every bar has an eyebrow word beside
   it, so the category survives without the colour. */
.band[data-kind="rule"]{border-top:4px solid var(--yellow)}
.band[data-kind="choice"]{border-top:4px solid var(--blue)}
.band[data-kind="us"]{border-top:4px solid var(--navy)}

/* The four numbers, before any prose. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 18px;max-width:none}
.facts>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.facts dt{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:2px 0 0;font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.15}
.facts dd small{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px}
.facts dd small.unit{display:inline;font-size:14px}

/* A worked example, labelled, with the same arithmetic as a ledger beside it.
   The net figure stays navy: red on straw is 3.0:1 and fails, and the minus
   sign plus "worse off" carry the meaning without it. */
.example{background:var(--straw);border-left:4px solid var(--yellow);border-radius:0 10px 10px 0;padding:12px 16px;margin:12px 0 0}
.example .fs-title{color:var(--navy);margin:0 0 4px}
.example p{margin:0;font-size:14.5px;max-width:none}
.ledger{width:100%;max-width:none;border-collapse:collapse;font-size:14px;margin-top:10px;display:table}
.ledger td{padding:6px 0;border-bottom:1px solid var(--edge)}
.ledger td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);white-space:nowrap}
.ledger tr:last-child td{border-bottom:0;font-weight:800}

/* Two options, side by side, because that is the shape of the decision. */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;max-width:none}
.compare>div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.compare h4{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin:0 0 6px}
.compare p{margin:0;font-size:14px;max-width:none}
.compare b{color:var(--navy)}

/* One callout per band. Each carries a glyph and a hidden word, so the meaning
   survives with the glyph switched off. */
.callout{display:flex;gap:12px;align-items:flex-start;background:var(--straw);border-left:4px solid var(--yellow);border-radius:0 10px 10px 0;padding:12px 16px;font-size:14px;color:var(--ink);max-width:none}
.callout .ico{width:20px;height:20px;color:var(--navy);margin-top:2px}
.callout p{margin:0;max-width:none}
.callout.warn{border-left-color:var(--navy);font-weight:600}

/* A sequence, drawn as one. .prose ol and .prose li both carry a max-width, so
   the max-width:none here is load-bearing: without it the rail renders at half
   the card. */
.band .timeline{list-style:none;margin:0 0 16px;padding:0;counter-reset:t;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.band .timeline li{position:relative;padding:38px 14px 0 0;counter-increment:t;font-size:14px;max-width:none;margin:0}
.band .timeline li::before{content:counter(t);position:absolute;top:0;left:0;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--yellow);font-family:var(--font-head);font-weight:800;font-size:13px;line-height:28px;text-align:center}
.band .timeline li:not(:last-child)::after{content:"";position:absolute;top:13px;left:34px;right:6px;height:2px;background:var(--edge)}
.band .timeline b{display:block;color:var(--navy);margin-bottom:2px}

/* One per page. Inset text stops working when it is everywhere. */
.band .pull{border-left:4px solid var(--blue);padding:4px 0 4px 18px;margin:0 0 18px;font-size:19px;font-weight:600;color:var(--navy);line-height:1.4;max-width:var(--measure)}

/* A marker on the one row that is the exception, not on every row: repeating an
   icon down a list is what destroys its distinctiveness. */
.mark{display:inline-flex;align-items:center;gap:8px}
.mark .ico{width:18px;height:18px;color:var(--blue)}
.choice h3{display:flex;align-items:center}
.trust-ico{width:17px;height:17px;vertical-align:-.2em;margin-right:6px;opacity:.9}

@media(max-width:880px){
  .compare{grid-template-columns:1fr}
  .band .timeline{grid-template-columns:1fr}
  .band .timeline li{padding:0 0 18px 40px}
  .band .timeline li:not(:last-child)::after{top:32px;bottom:2px;left:13px;right:auto;width:2px;height:auto}
}

/* ---- Markers, status and surface -------------------------------------------
   A unit that starts with a marker object is scanned faster than one that
   starts with type. The three steps keep their numeral, because the row's job
   is sequence and a numeral says that where an icon cannot; the numeral moves
   to a badge on the tile so both read. */
.s3 .n{position:relative;width:52px;height:52px;border-radius:14px;background:var(--navy);color:var(--yellow);font-size:24px;margin-bottom:12px}
.s3 .n svg{width:24px;height:24px}
.s3 .n b{position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--yellow);color:var(--navy);font-family:var(--font-head);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}

/* One marker per row of the threshold table. These are four unlike things, which
   is the case where a marker helps; repeating one glyph down a uniform list is
   the case where it stops meaning anything. */
.who .rowk{display:flex;align-items:center;gap:10px}
.who .rowk .ico{width:30px;height:30px;border-radius:8px;background:var(--sky);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;flex:none}
.who .rowk .ico svg{width:17px;height:17px}
.who td .badge{margin-left:8px;vertical-align:middle;white-space:nowrap}

/* Every second band on the blue tint, panels inside it back to white, so a
   boundary is read from the surface before a word is. An explicit class rather
   than nth-child, because .steps3 and the hidden thank-you card are siblings. */
.band.tint{background:var(--sky);border-color:var(--edge)}
.band.tint .fee,.band.tint .choice,.band.tint .more,.band.tint .who .rowk .ico{background:var(--card)}
.band.tint .callout{background:var(--card)}
/* The default disc is --sky, which is also the tinted band's surface, so on a
   tinted band it vanishes. The straw and navy discs already carry their own. */
.band.tint .disc:not(.rule):not(.us){background:var(--card);border:1px solid var(--edge)}

/* ---------------------------------------------------------------------------
   Two fixes from Juan's run on 27 October 2026. Appended rather than edited in
   place because assets/site.css carries TWO near-identical copies of the form
   block (lines ~275 and ~463) and only the later one wins; a fix written into
   the first would have no effect and look correct in the diff. The duplication
   is a separate problem, noted in docs/todo.md.
   --------------------------------------------------------------------------- */

/* 1. SIDE BY SIDE FIELDS MUST LINE THEIR INPUTS UP.

   .row2 is a two-column grid of .field, and each .field stacks label, input and
   error. When one label wraps and the other does not, the two inputs sit at
   different heights. Date of birth carries the hint "the ATO uses it to match
   you to your ABN", runs to two lines, and sat a line lower than Email beside
   it.

   Letting the label take the slack puts every input on the row's bottom edge,
   so the fix holds for any pair of labels rather than for this one. */
.row2 .field,.row3 .field{display:flex;flex-direction:column}
.row2 .field>label,.row3 .field>label{flex:1 0 auto}

/*    ...AND AN ERROR UNDER ONE FIELD MUST NOT MOVE THE OTHER. Juan, 29 October
   2026, on /id-verification: "Enter a valid email" appeared under Email and
   pushed Your name's input down beside it. The label-takes-the-slack rule
   above lines the inputs up on the field's bottom edge, and an error makes
   that field taller, so the label beside it grew to match and its input
   dropped. Every pair on all three order forms behaves the same way.

   Subgrid is the real fix: the pair shares three rows, label, input and
   error, so labels line up with labels, inputs with inputs, and an error can
   only push down what is below it. Every field in a pair is at most those
   three things (checked across the site the same day). Gaps inside the pair
   are zero because the field's own spacing already does that job; stacked on
   a phone, the fields are separated by their margin as before.

   Inside @supports, so a browser without subgrid keeps the rule above, which
   is right for every pair until an error shows. */
@supports (grid-template-rows:subgrid){
  .row2,.row3{grid-template-rows:auto auto auto;row-gap:0}
  .row2 .field,.row3 .field{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .row2 .field>label,.row3 .field>label{flex:none}
}

/*    ...which lines the BOTTOM edges up, and that is only the whole answer when
   the two inputs are the same height. Juan, 28 October 2026, driving the
   cancellation form: date of birth still sat 2px out.

   Measured rather than guessed. Every control carries the same font, padding
   (12px), border (2px) and box-sizing, and still:

       text 47   email 47   tel 47   date 49   select 49

   The extra 2px is Chromium's own intrinsic height for the date and select
   controls, which lay their insides out themselves. line-height does not
   touch it: 1.2, 19px and a date-only rule were each tried and each measured
   49px unchanged.

   So the height is stated instead of inherited. min-height, not height,
   because it can only grow the short ones: a fixed height would squeeze the
   date control's innards on any browser needing more than we picked, and a
   clipped control is a worse bug than a 2px step. Same reason the number is
   49 and not 48.

   THE TEXT-LIKE CONTROLS ONLY, THE SAME LIST AS THE BASE RULE ABOVE. The first
   version said ".field input", which also caught every checkbox sitting inside
   a .field and stretched it to 49px tall. Juan saw it on the rideshare platform
   picker on 29 October 2026 as a row of oddly tall boxes. The picker itself
   was removed the same day, at his call; the scoping stays for the next
   checkbox anyone puts in a field. */
.form-card .field input[type=text],.form-card .field input[type=email],.form-card .field input[type=tel],.form-card .field input[type=date],.form-card .field input[type=number],.form-card .field select{min-height:49px}

/* 4. THE CANCELLATION DECLARATION IS A LIST, NOT A PARAGRAPH.
   Juan, 28 October 2026: seven clauses in one block is a wall, and a wall is
   what people tick without reading. The clauses were always separate strings
   in declarationClauses(); only the rendering ran them together.

   Lives inside a .check label, so it inherits that label's size and colour and
   only needs its own indent and rhythm. The required asterisk sits outside the
   list, which is also what keeps it out of payload.declaration_text. */
.check .decl-list{margin:0;padding-left:20px}
.check .decl-list li{margin:0 0 7px}
.check .decl-list li:last-child{margin-bottom:0}
/* The rideshare declaration's lead-in and closing line, inside the same tick
   as its list. Blocks, so each starts its own line under the authority. */
.check .decl-lead,.check .decl-close{display:block;margin-top:10px}
.check .decl-lead+.decl-list{margin-top:6px}
.check .decl-list+.decl-close{margin-top:10px}
/* The rideshare form sits inside .prose, whose ul sets 15.5px and a 22px left
   margin. The tick's text is 13.5px, so the list came out bigger than the
   sentences around it. Matched to the label it lives in. */
.prose .check .decl-list{font-size:inherit;margin:6px 0 0;max-width:none}

/* 5. THE TWO CONFIRMATION PAGES GET A WIDER COLUMN THAN A GUIDE DOES.
   Juan, 28 October 2026, against ABN Assist: the cards look too narrow.
   Measured at 1440px before this rule:

       /thank-you   wrap 628, grid 566, cards 273 each
       /verify-id   wrap 628, grid 628, cards 304 each

   .wrap-narrow is 628px and that is right for a guide, where it is holding a
   single column of prose and the measure is the point. These two pages are not
   prose. They hold a two-up grid of cards, and on /thank-you that grid is
   nested inside .ty-card, whose 30px sides and 1px borders take 62px off
   before the cards are laid out at all. That is why this page reads tighter
   than /verify-id, which puts the same grid straight into the wrapper.

   .wrap-narrow itself is on more than fifty pages, every guide and calculator
   among them, so it is not the thing to change. A modifier on the two
   confirmation pages is.

   /thank-you's grid is no longer nested in a padded card (29 October 2026), so
   both pages now give it the full column and share .idv-grid's own floor. */
.wrap-narrow.wrap-confirm{max-width:calc(740px + 2 * var(--gutter))}

/* 2. Retired 29 October 2026. /thank-you's ID cards were stacking because the
   grid was nested inside .ty-card and got 566px, 14 short of the 580 that two
   280px columns need, so the floor came down to 265px for that page only. The
   card is gone, the grid gets the full column as on /verify-id, and the
   override went with it. */

/* 3. THE /thank-you HEADER, MATCHED TO ABN ASSIST. Juan, 27 October 2026.

   Centred tick, heading and lede, with one meta row carrying the reference and
   the confirmation address above the two cards rather than below them.
   /verify-id already had this shape, which is why Juan read it as closer to the
   sister site than /thank-you was, so the row reuses .idv-meta from that page
   instead of a second class for the same thing.

   Scoped to .ty-head rather than .ty-card, because .ty-card is also the "What
   happens next" panel further down, and that one is a left-aligned list. */
.ty-head>h1,.ty-head>.ty-lede{text-align:center}
.ty-head>.ty-lede{margin-left:auto;margin-right:auto}
.ty-meta-top:empty{display:none}
.ty-meta-top{margin:0 0 2px}

/* 4. THE ADD-ON AND ITS PANEL ARE ONE SHAPE, so they have to join cleanly.

   Juan, 27 October 2026: "the lines for the top PAYG withholding registration
   block are broken in the bottom corners". They were. .addon is rounded 14px on
   all four corners and .addon-panel squares its top and rounds its bottom to
   12px, so where the two met you saw the add-on's rounded bottom corners cutting
   into the panel's square top ones, and a radius that changed from 14 to 12
   halfway down the shape.

   Squared only when the box is BOTH checked and immediately followed by a panel.
   The cancellation form's PAYG add-on has no panel, and squaring its corners on
   tick would be a defect rather than a fix. */
.addon:has(input:checked):has(+ .addon-panel){
  border-bottom-left-radius:0;border-bottom-right-radius:0}
/* Matching the add-on's 14px, so the outline keeps one radius top to bottom. */
.addon-panel{border-radius:0 0 14px 14px}

/* 5. THE HINT UNDER THE VERIFY BUTTON HAD NO ROOM, and the rule saying it
   should was being beaten rather than missing.

   Juan, 28 October 2026: "no padding between the Verify my identity button and
   the paragraph below it". Measured at a gap of exactly 0 with a computed
   margin-top of 0px, against .idv-hint{margin:12px 0 0} which plainly says 12.

   .idv-card p is (0,1,1) and .idv-hint is (0,1,0), so the element selector in
   the first one wins and the hint inherits `margin:0 0 10px` instead. Exactly
   the shape of the .form-card label bug on 24 September, which is the second
   time a .idv/.form container's element rule has quietly overridden a class
   written for one child inside it.

   Fixed by matching the container the same way rather than by reaching for
   !important, so the next person reading either rule can see which wins and
   why. 16px rather than the 12 that never applied: the button is a solid block
   and needs more air under it than a line of text does. */
.idv-card p.idv-hint{margin:16px 0 0}

/* 6. THE GUIDE TABLES HAD NO STYLE AT ALL.
   Juan, 29 October 2026, on /uber-gst-registration: "is missing a table". It
   was a table, with nothing to say so: no rule anywhere in this file set a
   border, a header or cell padding for one, so 29 tables across 28 pages
   rendered as loose columns of text. Not new: main has the same gap.

   The same look as the homepage threshold table (.band .who), so the site has
   one table style rather than two. The .table-scroll wrapper every guide table
   sits in takes the horizontal scroll that .prose table used to put on the
   table itself, which lets the table go back to being a real table that fills
   the column. A table with no wrapper keeps the older scrolling block. */
.table-scroll{overflow-x:auto;max-width:100%;margin:14px 0 22px}
.prose .table-scroll>table{display:table;width:100%;margin:0}
.prose table{border-collapse:collapse;font-size:14.5px;line-height:1.5}
.prose th{text-align:left;vertical-align:bottom;font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;padding:0 14px 8px 0;border-bottom:2px solid var(--line)}
.prose td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th:last-child,.prose td:last-child{padding-right:0}
.prose td b{color:var(--navy)}

/* 7. /id-verification, THE MANUAL ID UPLOAD. Ported from ABN Assist's
   assets/site.css on 29 October 2026, in this site's tokens: --sky is the one
   tint of --blue, so the drop zone's hover is that rather than ABN Assist's
   lighter blue.

   The drop zone is a <div> with role="button" and tabindex, not a bare label:
   the whole area has to be reachable by keyboard and by tap, because the people
   who reach this page have already had one interface fail on them. */
.idu-drop{border:2px dashed var(--line);border-radius:12px;background:#fff;padding:26px 20px;
          text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.idu-drop:hover,.idu-drop:focus,.idu-drop.over{border-color:var(--blue);background:var(--sky);outline:none}
.idu-drop .idu-arrow{display:block;font-size:22px;line-height:1;margin-bottom:8px;color:var(--blue)}
.idu-drop b{display:block;font-size:15px;color:var(--ink)}
.idu-drop small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;font-weight:600}
.idu-count{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:8px}
.idu-file{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
          background:#fff;padding:9px 12px;margin-top:8px}
.idu-name{flex:1;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idu-size{font-size:12.5px;color:var(--muted);font-weight:600}
.idu-tick{font-size:12.5px;font-weight:800;color:#1B9E62}
.idu-remove{border:0;background:none;font-family:inherit;font-size:19px;line-height:1;color:var(--muted);
            cursor:pointer;padding:0 4px}
.idu-remove:hover{color:var(--red)}
/* Per file, not per submission: four photos on mobile data is four separate
   waits, and one combined bar that stalls looks like a hang. */
.idu-bar{display:block;width:88px;height:7px;border-radius:4px;background:var(--sky);overflow:hidden}
.idu-bar i{display:block;height:100%;background:var(--blue);transition:width .2s}
.idu-status{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:12px}
.idu-status.bad{color:#8C2B22;font-weight:700}
#idu-thanks .form-body p{margin-bottom:11px}
#idu-thanks .form-body p:last-child{margin-bottom:0}
.idu-about{margin-top:26px}
.idu-about h2{font-size:19px;font-weight:800;margin-bottom:10px}
.idu-about p{font-size:14.5px;color:var(--muted);margin-bottom:10px}
.idu-about p:last-child{margin-bottom:0}

/* Service pages (scripts/build-service-pages.py). They reuse the homepage's
   hero, steps, facts, jump nav and bands as they are; these are the only
   additions. The working part of the page (order form, lookup or price card)
   sits in .svc-tool, the hero's right column, exactly where the homepage puts
   its form, and comes first on a phone for the same reason. */
.svc-hero .crumbs{font-size:12.5px;color:var(--on-navy);font-weight:700;letter-spacing:.05em;margin-bottom:14px}
.svc-hero .crumbs a{color:var(--on-navy);text-decoration:none}
.svc-hero .crumbs a:hover{text-decoration:underline}
.svc-tool{min-width:0}
.svc-tool .form-card{margin:0}
.svc-tool .form-card + .form-card,.svc-tool .err{margin-top:14px}
@media(max-width:880px){.hero .svc-tool{order:1}}
.facts-src{display:flex;gap:6px 14px;flex-wrap:wrap;margin:-6px 0 22px;font-size:12.5px;color:var(--muted);font-weight:600}
.facts-src a{color:var(--blue)}
.who-scroll{overflow-x:auto;max-width:100%}
.band[data-kind="money"]{border-top:4px solid var(--green)}
.disc.money{background:#E3F5EC;color:var(--green)}
.example-panel .total-line{border-top:2px solid var(--line);border-bottom:0}
.example-panel .total-line .v{font-size:16px}
.example-panel + .example{margin-top:12px}

/* Chatbase sits bottom right, which on a phone is where the sticky "Register"
   bar's button is. assets/analytics.js publishes the bar's visible height as
   --chat-lift (0 when the bar is hidden) and these lift the bubble and its
   greeting messages above it. !important because Chatbase sets both positions
   inline; the 16px and 85px are Chatbase's own offsets, read off the rendered
   widget on 12 November 2026. */
#chatbase-bubble-button{bottom:calc(16px + var(--chat-lift, 0px)) !important}
#chatbase-message-bubbles{bottom:calc(85px + var(--chat-lift, 0px)) !important}
@media(prefers-reduced-motion:no-preference){
  #chatbase-bubble-button,#chatbase-message-bubbles{transition:bottom .18s ease}
}