/* BillWizard · billwizard.com.au. The app's own look: the jungle under parchment sheets, deep jungle
   green, gold for "Wizard", spirit blue for actions. Tokens are the app's (src/core/brand/palette.ts).
   No scripts; the only motion is the FAQ's native <details>. */

@font-face { font-family: "Inter"; src: url("/fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfairdisplay-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --jungle: #0f3b2a; --jungle-deep: #072416; --side-top: #0b3320; --side-bottom: #061d12;
  --card: #fbfaf1; --card-deep: #f3f1df; --ink: #10281b; --ink-soft: #2f4a3b; --muted: #5c705f; --line: #d8e2c9;
  --gold: #e8b43a; --gold-deep: #8a6410; --cream: #fbf6e4; --on-dark: #dfe9d6;
  --spirit: #1f6fe0; --spirit-deep: #1553b6; --leaf: #3d9a4e; --leaf-deep: #1f6b3a;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 32px); --radius: 22px;
  --display: "Playfair Display", Georgia, serif; --body: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--jungle-deep); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--spirit-deep); }
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.12; }
h1, h2 { font-family: var(--display); font-weight: 900; letter-spacing: -0.01em; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 900px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* The parchment sheet the app lays over the jungle */
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(3, 18, 10, 0.28); }

/* Header: the app's sidebar green */
.top { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, var(--side-top), var(--side-bottom)); border-bottom: 1px solid rgba(232, 180, 58, 0.25); }
.top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; padding-block: 8px; }
.brand { font-family: var(--display); font-weight: 900; font-size: 30px; text-decoration: none; letter-spacing: -0.01em; line-height: 1; padding-block: 4px; }
.brand__bill { color: var(--cream); }
.brand__wiz { color: var(--gold); }
.nav { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding-block: 6px; color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: 15.5px; }
.nav a:hover { color: var(--gold); }
/* Phones: the four menu items stay on one row (measured: 312px of text at 14px, 290px at 13px) */
@media (max-width: 520px) { .top__inner { padding-block: 10px; } .nav { gap: 4px 14px; } .nav a { font-size: 14px; } .brand { font-size: 27px; } }
@media (max-width: 400px) { .nav { gap: 2px 10px; } .nav a { font-size: 13px; } }
@media (max-width: 359px) { .nav { gap: 2px 6px; } .nav a { font-size: 12px; } }

/* Hero: the jungle, a parchment sheet, the reading on a phone */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 22, 12, 0.55), rgba(4, 22, 12, 0.15) 60%, rgba(4, 22, 12, 0.35)); }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 32px; align-items: center; padding-block: clamp(36px, 7vw, 88px); }
@media (min-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1fr) 300px; } }
.hero__card { padding: clamp(24px, 4vw, 48px); max-width: 680px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leaf-deep); margin-bottom: 12px; }
.hero h1 { font-size: clamp(38px, 6vw, 64px); }
.hero h1 em { font-style: normal; color: var(--gold-deep); }
.lead { margin-top: 18px; font-size: clamp(17px, 2vw, 19px); color: var(--ink-soft); }
.soon { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.soon__tag { display: inline-block; background: var(--spirit); color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 999px; }
.soon__link { font-weight: 700; padding-block: 4px; text-decoration: none; }
.soon__link:hover { color: var(--spirit); }
.hero__phone { margin: 0; justify-self: center; width: min(300px, 78vw); }
.hero__phone img { border-radius: 36px; border: 10px solid #0d1a12; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.hero__phone figcaption { margin-top: 10px; font-size: 13px; color: var(--cream); text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

/* Bands: alternate the jungle's deep green and a soft leaf ground */
.band { padding-block: clamp(48px, 8vw, 96px); background: var(--jungle); }
.band--leaf { background: #e8f0df; }
.band h2 { font-size: clamp(30px, 4.4vw, 46px); color: var(--cream); text-wrap: balance; }
.band .eyebrow { color: var(--gold); }
.band--leaf h2 { color: var(--ink); }
.band--leaf .eyebrow { color: var(--leaf-deep); }
.section-lead { margin-top: 14px; color: var(--on-dark); font-size: 18px; text-wrap: pretty; }
.band--leaf .section-lead { color: var(--ink-soft); }
.fine { margin-top: 14px; font-size: 13.5px; color: var(--on-dark); }
.band--leaf .fine { color: var(--muted); }

.film { width: 100%; margin-top: 28px; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #04140b; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }

.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 26px; }
.step__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--jungle); color: var(--gold); font-family: var(--display); font-weight: 900; font-size: 22px; margin-bottom: 14px; }
.step p { margin-top: 8px; color: var(--ink-soft); }

.compare { margin-top: 32px; display: grid; gap: 18px; }
@media (min-width: 820px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { padding: 26px; }
.compare__col ul { margin: 12px 0 0; padding-left: 1.2em; color: var(--ink-soft); }
.compare__col li + li { margin-top: 6px; }
.compare__col--us { border: 2px solid var(--leaf); }
.compare__col--us h3 { color: var(--leaf-deep); }

.shots { margin-top: 32px; display: grid; gap: 18px; }
@media (min-width: 820px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shot { margin: 0; overflow: hidden; }
.shot figcaption { padding: 14px 18px 18px; font-size: 15px; color: var(--ink-soft); }
.shot strong { color: var(--ink); }

.trust { margin-top: 32px; display: grid; gap: 18px; }
@media (min-width: 820px) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust__item { padding: 26px; }
.trust__item p { margin-top: 8px; color: var(--ink-soft); }

.plans { margin-top: 32px; display: grid; gap: 18px; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { padding: 26px; }
.plan--main { border: 2px solid var(--gold); }
.plan__price { margin-top: 10px; font-family: var(--display); font-weight: 900; font-size: 40px; color: var(--ink); }
.plan__price span { font-family: var(--body); font-weight: 600; font-size: 16px; color: var(--muted); }
.plan__alt { font-weight: 600; color: var(--muted); }
.plan p:last-child { margin-top: 10px; color: var(--ink-soft); }

.qa { margin-top: 12px; padding: 0; }
.qa summary { cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--ink); list-style-position: inside; }
.qa p { padding: 0 22px 20px; color: var(--ink-soft); }
#faq .qa:first-of-type { margin-top: 28px; }

.foot { background: var(--side-bottom); color: var(--on-dark); padding-block: 40px; font-size: 14px; }
.foot p + p { margin-top: 10px; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 20px; }
.brand--foot { font-size: 26px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.foot__links a { color: var(--cream); display: inline-block; padding-block: 4px; }
.legal { margin-top: 18px; color: #a8bda9; }

/* The plain pages (privacy, not found) */
.page { background: #e8f0df; padding-block: clamp(40px, 7vw, 80px); min-height: 60vh; }
.page .sheet { padding: clamp(24px, 4vw, 44px); max-width: 760px; }
.page h1 { font-size: clamp(32px, 5vw, 46px); }
.page h2 { margin-top: 26px; font-family: var(--body); font-weight: 700; font-size: 20px; }
.page p { margin-top: 10px; color: var(--ink-soft); }

/* ================================================================ Multi-page site (19 October 2026) */
/* Brand: the app's emblem beside the wordmark */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand img { width: 40px; height: auto; }
.brand--foot img { width: 34px; }

/* Header menus: <details name="nav"> so a click opens one and closes the others, with no script */
.nav > li { position: relative; }
.dd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding-block: 6px; color: var(--on-dark); font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; opacity: .8; }
.dd[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.dd > summary:hover, .dd[open] > summary, .dd > summary.is-current { color: var(--gold); }
.dd__panel { position: absolute; top: calc(100% + 10px); left: -12px; z-index: 20; min-width: 270px; list-style: none; margin: 0; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px rgba(3, 18, 10, .4); }
.nav > li:nth-last-child(-n+2) .dd__panel { left: auto; right: -12px; }
.dd__panel a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.dd__panel a:hover { background: var(--card-deep); color: var(--leaf-deep); }
.dd__panel a[aria-current="page"] { background: #e8f0df; color: var(--leaf-deep); }
.dd__panel li:first-child a { border-bottom: 1px solid var(--line); border-radius: 10px 10px 4px 4px; margin-bottom: 4px; }
@media (max-width: 720px) {
  .top__inner { position: relative; }
  .nav > li { position: static; }
  .dd__panel, .nav > li:nth-last-child(-n+2) .dd__panel { left: var(--gutter); right: var(--gutter); top: calc(100% + 2px); min-width: 0; }
  .dd > summary::after { width: 5px; height: 5px; border-width: 1.5px; }
}
@media (max-width: 520px) { .dd > summary { font-size: 14px; gap: 4px; } }
@media (max-width: 400px) { .dd > summary { font-size: 13px; } .brand img { width: 32px; } }
@media (max-width: 359px) { .dd > summary { font-size: 12px; gap: 3px; } .dd > summary::after { display: none; } }

/* Breadcrumbs */
.crumbs-band { background: var(--side-bottom); border-bottom: 1px solid rgba(232, 180, 58, .18); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 10px 0; font-size: 13.5px; color: var(--on-dark); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--gold); }
.crumbs a { color: var(--cream); display: inline-block; padding-block: 3px; }

/* Page head: the jungle under a parchment sheet, like the hero */
.pagehead { position: relative; overflow: hidden; }
.pagehead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagehead::after { content: ""; position: absolute; inset: 0; background: rgba(4, 22, 12, .45); }
.pagehead .wrap { position: relative; z-index: 1; padding-block: clamp(32px, 6vw, 72px); }
.pagehead .sheet { padding: clamp(22px, 4vw, 44px); }
.pagehead h1 { font-size: clamp(32px, 5vw, 52px); text-wrap: balance; }
.pagehead .lead { max-width: none; }

/* Article text on the section pages */
.article { max-width: 860px; }
.article h2 { font-size: clamp(26px, 3.4vw, 36px); color: var(--ink); margin-top: 40px; text-wrap: balance; }
.article h2:first-child { margin-top: 0; }
.article h3 { margin-top: 26px; }
.article p, .article li { color: var(--ink-soft); font-size: 17.5px; }
.article p { margin-top: 12px; }
.article ul, .article ol { margin: 12px 0 0; padding-left: 1.3em; }
.article li + li { margin-top: 6px; }
.article strong { color: var(--ink); }
.article .note { margin-top: 20px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; font-size: 16px; }
.article figure { margin: 28px 0 0; }
.article figure img { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(3, 18, 10, .18); }
.article figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }
.cards2 { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 760px) { .cards2 { grid-template-columns: 1fr 1fr; } }
.cards2 > .sheet { padding: 22px; box-shadow: none; }
.cards2 h3 { margin-top: 0; }

/* Home: one summary row per section, each ending in a "Read more" link */
.summary { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .summary--flip > :first-child { order: 2; } }
.summary h2 { max-width: none; }
.summary .section-lead { max-width: none; }
.summary__pts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.summary__pts li { padding-left: 26px; position: relative; color: var(--on-dark); }
.band--leaf .summary__pts li { color: var(--ink-soft); }
.summary__pts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 11px 20px; border-radius: 999px; background: var(--spirit); color: #fff; font-weight: 700; text-decoration: none; }
.more:hover { background: var(--spirit-deep); }
.summary figure { margin: 0; }
.summary figure img { border-radius: 18px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }

/* Sliders: hidden radio buttons hold the current slide; arrows and dots are their labels. No script. */
.slider { position: relative; }
.slider__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.slider__view { overflow: hidden; border-radius: 20px; }
.slider__track { display: flex; list-style: none; margin: 0; padding: 0; transition: translate .45s ease; }
@media (prefers-reduced-motion: reduce) { .slider__track { transition: none; } }
.slider__slide { flex: 0 0 100%; min-width: 0; margin: 0; }
.slider__radio:nth-of-type(2):checked ~ .slider__view .slider__track { translate: -100% 0; }
.slider__radio:nth-of-type(3):checked ~ .slider__view .slider__track { translate: -200% 0; }
.slider__radio:nth-of-type(4):checked ~ .slider__view .slider__track { translate: -300% 0; }
.slider__radio:nth-of-type(5):checked ~ .slider__view .slider__track { translate: -400% 0; }
.slider__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.slider__dots { display: flex; gap: 6px; }
.slider__dots label { width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; }
.slider__dots label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(251, 246, 228, .45); border: 1px solid rgba(0, 0, 0, .2); }
.band--leaf .slider__dots label::before { background: #b9c8ad; }
.slider__radio:nth-of-type(1):checked ~ .slider__nav .slider__dots label:nth-child(1)::before,
.slider__radio:nth-of-type(2):checked ~ .slider__nav .slider__dots label:nth-child(2)::before,
.slider__radio:nth-of-type(3):checked ~ .slider__nav .slider__dots label:nth-child(3)::before,
.slider__radio:nth-of-type(4):checked ~ .slider__nav .slider__dots label:nth-child(4)::before,
.slider__radio:nth-of-type(5):checked ~ .slider__nav .slider__dots label:nth-child(5)::before { background: var(--gold); transform: scale(1.25); }
.slider__radio:nth-of-type(1):focus-visible ~ .slider__nav .slider__dots label:nth-child(1),
.slider__radio:nth-of-type(2):focus-visible ~ .slider__nav .slider__dots label:nth-child(2),
.slider__radio:nth-of-type(3):focus-visible ~ .slider__nav .slider__dots label:nth-child(3),
.slider__radio:nth-of-type(4):focus-visible ~ .slider__nav .slider__dots label:nth-child(4),
.slider__radio:nth-of-type(5):focus-visible ~ .slider__nav .slider__dots label:nth-child(5) { outline: 3px solid var(--gold); border-radius: 50%; }
.slider__arrows { display: none; }
.slider__arrow { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.slider__radio:nth-of-type(1):checked ~ .slider__nav .slider__arrows--1,
.slider__radio:nth-of-type(2):checked ~ .slider__nav .slider__arrows--2,
.slider__radio:nth-of-type(3):checked ~ .slider__nav .slider__arrows--3,
.slider__radio:nth-of-type(4):checked ~ .slider__nav .slider__arrows--4,
.slider__radio:nth-of-type(5):checked ~ .slider__nav .slider__arrows--5 { display: flex; gap: 10px; }
.slider__cap { margin-top: 10px; font-size: 14.5px; color: var(--on-dark); text-align: center; }
.band--leaf .slider__cap { color: var(--ink-soft); }
.slider__cap strong { color: var(--cream); }
.band--leaf .slider__cap strong { color: var(--ink); }
/* the hero's phone slider */
.hero__phone { margin: 0; justify-self: center; width: min(300px, 78vw); }
.hero__phone .slider__view { border-radius: 36px; border: 10px solid #0d1a12; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.hero__phone .slider__cap { color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
/* the big screenshots: one at a time, full width, so they can be read */
.bigshots .slider__view { border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(3, 18, 10, .25); background: var(--card); }
.bigshots { margin-top: 30px; }

/* Related pages, the launch band, the footer's map of every page */
.rel__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .rel__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel__card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; color: var(--ink); text-decoration: none; font-weight: 700; box-shadow: none; }
.rel__card:hover { border-color: var(--leaf); color: var(--leaf-deep); }
.launch .section-lead a { color: var(--gold); }
.foot__map { display: grid; gap: 20px 28px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid rgba(232, 180, 58, .2); }
@media (min-width: 560px) { .foot__map { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .foot__map { grid-template-columns: repeat(4, 1fr); } }
.foot__h { font-family: var(--body); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.foot__map ul { list-style: none; margin: 0; padding: 0; }
.foot__map a { color: var(--on-dark); display: inline-block; padding-block: 3px; text-decoration: none; }
.foot__map a:hover { color: var(--cream); text-decoration: underline; }
/* Article band, feature cards */
.band--paper { background: var(--card); }
.band--paper h2, .band--paper h3 { color: var(--ink); }
.card-link { display: block; padding: 22px; color: inherit; text-decoration: none; box-shadow: none; transition: border-color .2s; }
.card-link:hover { border-color: var(--leaf); }
.card-link h3 { color: var(--ink); }
.card-link p { margin-top: 6px; color: var(--ink-soft); font-size: 16px; }
.card-link__go { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--spirit-deep); }
.article .compare { margin-top: 20px; }
.article .plans { margin-top: 0; }
.band--paper .eyebrow { color: var(--leaf-deep); }
/* 360 to 389px: five menu items fit one row without their carets */
@media (max-width: 389px) { .dd > summary::after { display: none; } .nav { gap: 2px 12px; } }
/* Clicking an arrow or dot focuses its hidden radio; pinned inside the screen, focusing it never scrolls the page */
.slider__radio { position: fixed; top: 50%; left: 0; }
/* The big screenshots at three-quarters width on wide screens (full width on phones, so they stay readable) */
@media (min-width: 900px) { .bigshots { max-width: 75%; margin-inline: auto; } }
/* Phone slider (19 Oct, second pass): one frame, not two (the old single-image rule drew a second border);
   the screen inset in a dark bezel with small corners, so the tab bar's corners ("Dashboard") are never clipped;
   the arrows either side of the phone */
.hero__phone { position: relative; }
.hero__phone img { border: 0; border-radius: 0; box-shadow: none; }
.hero__phone .slider__view { border: 0; padding: 10px; background: #0d1a12; border-radius: 40px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.hero__phone .slider__track { border-radius: 14px; overflow: hidden; }
.hero__phone .slider__view { overflow: hidden; }
.hero__phone .slider__slide img { border-radius: 14px; }
.hero__phone .slider__arrows { position: absolute; left: -56px; right: -56px; top: calc(50% - 46px); justify-content: space-between; pointer-events: none; }
.hero__phone .slider__arrow { pointer-events: auto; width: 40px; height: 40px; font-size: 20px; }
@media (max-width: 560px) { .hero__phone .slider__arrows { left: -12px; right: -12px; } }
.hero__phone .slider__nav { min-height: 24px; }
/* the screen is its own rounded window inside the bezel, so it clips the sliding strip (the strip itself must not) */
.hero__phone .slider__track { border-radius: 0; overflow: visible; }
.hero__phone .slider__screen { overflow: hidden; border-radius: 14px; }
/* The contact form */
.form { padding: clamp(22px, 4vw, 36px); max-width: 640px; box-shadow: none; }
.form__row { display: grid; gap: 6px; margin-top: 16px; }
.form__row:first-child { margin-top: 0; }
.form label { font-weight: 700; color: var(--ink); font-size: 16px; }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid #9fb197; border-radius: 12px; padding: 11px 14px; width: 100%; }
.form textarea { resize: vertical; min-height: 150px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--leaf-deep); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__send { border: 0; cursor: pointer; font: inherit; font-weight: 700; margin-top: 20px; }
.article .form__note { font-size: 14.5px; color: var(--muted); margin-top: 14px; }
/* Restraint pass (19 Oct 2026, reviewed with Gemini): "a senior engineer's product, not an art project, still the jungle".
   One link colour (leaf green; blue stays for buttons, the app's action colour), plain ticks instead of pills,
   a serif pull-quote instead of the Wizard cut-out, white cards on the light bands, and a darker veil on the photo. */
a, .soon__link, .card-link__go { color: var(--leaf-deep); }
.soon__link:hover { color: var(--ink); }
.hero::after { background: linear-gradient(90deg, rgba(4, 22, 12, .62), rgba(4, 22, 12, .3) 60%, rgba(4, 22, 12, .5)); }
.pagehead::after { background: rgba(4, 22, 12, .58); }
.band--leaf .sheet, .page .sheet { background: #fff; box-shadow: 0 1px 2px rgba(3, 18, 10, .06); }
.ticks { display: grid; gap: 6px 18px; list-style: none; margin: 22px 0 0; padding: 0; }   /* four points: 2 x 2, stacked on phones */
@media (min-width: 560px) { .ticks { grid-template-columns: 1fr 1fr; } }
.ticks li { position: relative; padding-left: 24px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .28em; width: 6px; height: 11px; border-right: 2.5px solid var(--leaf-deep); border-bottom: 2.5px solid var(--leaf-deep); rotate: 45deg; }
.pull { margin: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--gold-deep); }
.pull p { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; color: var(--ink); }
.pull footer { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.article .pull { margin-top: 32px; }
.article .pull p { margin: 0; color: var(--ink); font-size: clamp(24px, 3vw, 32px); }
.launch__inner { max-width: 860px; }

/* The phone and tablet menu: under 1000px the sections fold behind one "Menu" button, still with no script. The button is a
   <details> with no content; while it is closed, :has() hides the nav. Where :has() is unsupported the button stays
   hidden and the menu shows as the one row it was before. */
.menu { display: none; }
@media (max-width: 999px) {
  @supports selector(:has(*)) {
    .menu { display: block; }
    .menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px;
      border: 1px solid rgba(232, 180, 58, .45); border-radius: 10px; color: var(--cream); font-weight: 700; font-size: 15px; }
    .menu > summary::-webkit-details-marker { display: none; }
    .menu > summary::before { content: ""; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
    .menu[open] > summary { color: var(--gold); border-color: var(--gold); }
    .top:has(.menu:not([open])) #main-nav { display: none; }
    #main-nav { flex-basis: 100%; max-height: calc(100dvh - 76px); overflow-y: auto; }
    .nav { flex-direction: column; flex-wrap: nowrap; gap: 0; padding-bottom: 10px; }
    .nav > li { border-top: 1px solid rgba(232, 180, 58, .15); }
    .dd > summary, .nav .nav__link { justify-content: space-between; padding-block: 12px; font-size: 16px; gap: 8px; }
    .dd > summary::after { display: block; width: 7px; height: 7px; border-width: 2px; }
    .dd__panel { position: static; min-width: 0; margin: 0 0 10px; padding: 0 0 0 10px; background: transparent; border: 0; box-shadow: none; }
    .dd__panel a { color: var(--on-dark); padding: 9px 10px; }
    .dd__panel a:hover { background: rgba(251, 246, 228, .06); color: var(--cream); }
    .dd__panel a[aria-current="page"] { background: rgba(232, 180, 58, .12); color: var(--gold); }
    .dd__panel li:first-child a { border-bottom-color: rgba(232, 180, 58, .15); }
  }
}

/* The header (19 Oct): the logo on the left, the menu centred, "Open the app" on the right. Until launch the
   button goes to the coming-soon page at app.billwizard.com.au. */
.appbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 18px; border-radius: 999px;
  background: var(--spirit); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.appbtn:hover { background: var(--spirit-deep); }
@media (min-width: 1000px) {
  .top__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .top__inner > .brand { justify-self: start; }
  #main-nav { justify-self: center; }
  .nav { flex-wrap: nowrap; }
  .top__inner > .appbtn { justify-self: end; }
}
@media (max-width: 999px) {
  .top__inner { gap: 10px 12px; }
  .top__inner > .brand { margin-right: auto; }
  .appbtn { order: 1; } .menu { order: 2; } #main-nav { order: 3; }
}
/* Under 480px there is no room for three things in a row: the button moves into the open menu */
@media (max-width: 479px) {
  @supports selector(:has(*)) {
    .appbtn { display: none; }
    .top:has(.menu[open]) .appbtn { display: flex; order: 4; flex-basis: 100%; margin-bottom: 12px; }
  }
}
/* Cards on the light bands and in articles: white, flat, the same height in a row; prices at their size inside articles */
.band--paper .sheet { background: #fff; box-shadow: 0 1px 2px rgba(3, 18, 10, .06); }
.rel__list li { display: flex; } .rel__card { flex: 1; }
.article .plan h2 { margin-top: 0; }
.article .plan__price { margin-top: 12px; font-family: var(--display); font-weight: 900; font-size: 36px; line-height: 1.15; color: var(--ink); }
.article .plan__price span { font-family: var(--body); font-weight: 600; font-size: 16px; color: var(--muted); }
.article .plan__alt { margin-top: 2px; font-weight: 600; color: var(--muted); font-size: 16px; }
.article .compare h2 { margin-top: 0; font-family: var(--body); font-weight: 700; font-size: 20px; }
/* "Coming at the end of November" is a note, not a button: blue is for things you can press */
.soon__tag { display: inline-flex; align-items: center; gap: 10px; background: none; color: var(--ink); border: 0; border-radius: 0; padding: 4px 0; }
.soon__tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-deep); }
.nav .nav__link[aria-current="page"] { color: var(--gold); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* app.billwizard.com.au's coming-soon page (Dylan's reference, 19 Oct): the jungle at sunrise, everything centred,
   a countdown to 1 December and the launch-list form. Text sits on the bright sky, or on its own panel. */
.soonpage { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; background: #dfe6dc; color: var(--ink); }
.soonpage__bg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; z-index: 0; }
.soonpage::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 58% at 50% 36%, rgba(250, 250, 244, .74), rgba(250, 250, 244, .38) 58%, rgba(250, 250, 244, 0) 82%); }
.soonpage__main { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1000px; margin-inline: auto; padding: clamp(28px, 6vh, 64px) var(--gutter) 48px;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand--soon { justify-content: center; font-size: 28px; margin-bottom: clamp(16px, 4vh, 36px); }
.brand--soon .brand__bill { color: var(--ink); }
.brand--soon .brand__wiz { color: var(--gold-deep); }
.soon__eyebrow { font-size: clamp(13px, 1.6vw, 16px); font-weight: 600; letter-spacing: .38em; margin-right: -.38em; text-transform: uppercase; color: var(--ink); }
.soon__h1 { margin-top: 12px; font-family: var(--display); font-weight: 900; font-size: clamp(54px, 10vw, 112px); line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.soon__lead { margin-top: 14px; max-width: 33em; font-size: clamp(17px, 2vw, 20px); color: var(--ink); text-wrap: balance; }
.cd { margin-top: 24px; width: min(560px, 100%); }
.cd__boxes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vw, 14px); }
.cd__box, .soon__done { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: 0 10px 30px rgba(3, 18, 10, .14); }
.cd__box { padding: 14px 6px 12px; }
.cd__n { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 6vw, 48px); line-height: 1.05; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.cd__l { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf-deep); }
.soon__act { width: min(540px, 100%); margin-top: 18px; }
.notify { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(12, 34, 22, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 30px rgba(3, 18, 10, .2); }
.notify:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.notify input[type="email"] { flex: 1; min-width: 0; min-height: 44px; padding: 8px 18px; border: 0; background: transparent; color: var(--cream); font: inherit; font-size: 16px; }
.notify input[type="email"]::placeholder { color: rgba(251, 246, 228, .78); }
.notify input[type="email"]:focus-visible { outline: none; }
.notify__go { flex: none; min-height: 44px; padding: 8px 24px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.notify__go:hover { background: #f2c656; }
.soon__fine { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .72); font-size: 14px; color: var(--ink); }
.soon__done { padding: 14px 20px; color: var(--ink); font-size: 16px; margin-bottom: 12px; }
.soon__done--error { border-left: 4px solid var(--gold-deep); }
.soon__foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px;
  padding: 12px max(var(--gutter), calc((100% - 1180px) / 2)); background: rgba(6, 29, 18, .86); color: var(--on-dark); font-size: 14px; }
.soon__foot ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.soon__foot a { display: inline-block; padding-block: 3px; color: var(--cream); }

/* The countdown. --t (seconds left) is animated by /countdown.css, which the Worker writes per visit; days, hours,
   minutes and seconds are worked out from it here and shown as counters. Registered integer properties round,
   so "- 0.5" floors. Browsers too old for this (no @property) keep the numbers the Worker wrote in. */
@property --t { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --d { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --m { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --s { syntax: "<integer>"; inherits: true; initial-value: 0; }
@supports (transition-behavior: allow-discrete) and (text-wrap: balance) {
  .cd { --d: calc(var(--t) / 86400 - .5); --h: calc((var(--t) - var(--d) * 86400) / 3600 - .5);
    --m: calc((var(--t) - var(--d) * 86400 - var(--h) * 3600) / 60 - .5); --s: calc(var(--t) - var(--d) * 86400 - var(--h) * 3600 - var(--m) * 60); }
  .cd__static { display: none; }
  .cd__n::before { content: counter(n, decimal-leading-zero); }
  .cd__n--d::before { counter-reset: n var(--d); }
  .cd__n--h::before { counter-reset: n var(--h); }
  .cd__n--m::before { counter-reset: n var(--m); }
  .cd__n--s::before { counter-reset: n var(--s); }
}
.soonpage__main { padding-bottom: 32px; }
@media (max-width: 440px) {
  .cd__l { font-size: 10.5px; letter-spacing: .06em; }
  .notify input[type="email"] { padding-inline: 14px; }
  .notify__go { padding-inline: 18px; }
}
@media (max-width: 359px) { .cd__boxes { gap: 6px; } .cd__l { font-size: 9.5px; letter-spacing: .02em; } }
/* On a computer the coming-soon page fills the window exactly, with no scroll (Dylan, 19 Oct). Everything is sized
   in rem, and rem follows the window's height (16px at about 910px tall), so the whole page scales to fit a laptop
   or a large screen. Phones, and windows too short to read at that scale, scroll as normal instead. */
@media (min-width: 760px) and (min-height: 520px) {
  .soonroot { font-size: clamp(9px, 1.75vh, 16px); height: 100%; overflow: hidden; }
  .soonroot .soonpage { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .soonroot .soonpage__main { justify-content: center; padding: 2rem var(--gutter); max-width: 64rem; }
  .soonroot .brand--soon { font-size: 1.75rem; margin-bottom: 1.5rem; }
  .soonroot .brand--soon img { width: 2.5rem; }
  .soonroot .soon__eyebrow { font-size: 1rem; }
  .soonroot .soon__h1 { margin-top: .5rem; font-size: min(7rem, 10vw); }
  .soonroot .soon__lead { margin-top: 1rem; font-size: 1.25rem; max-width: 40em; }
  .soonroot .cd { margin-top: 1.5rem; width: 35rem; }
  .soonroot .cd__boxes { gap: .875rem; }
  .soonroot .cd__box { padding: .875rem .375rem .75rem; border-radius: 1rem; }
  .soonroot .cd__n { font-size: 3rem; }
  .soonroot .cd__l { margin-top: .25rem; font-size: .75rem; }
  .soonroot .soon__act { margin-top: 1.25rem; width: 34rem; }
  .soonroot .notify { padding: .3rem; }
  .soonroot .notify input[type="email"], .soonroot .notify__go { min-height: max(2.75rem, 24px); font-size: 1rem; }
  .soonroot .notify input[type="email"] { padding: .5rem 1.15rem; }
  .soonroot .notify__go { padding: .5rem 1.5rem; }
  .soonroot .soon__fine { margin-top: .6rem; font-size: .875rem; padding: .2rem .75rem; }
  .soonroot .soon__done { font-size: 1rem; padding: .875rem 1.25rem; }
  .soonroot .soon__foot { font-size: .875rem; padding-block: .6rem; }
  .soonroot .soon__foot a { display: inline-flex; align-items: center; min-height: 24px; padding-block: 0; }
}