/* =====================================================================================
   public.css — the public product site: /product/** and /help/** (layout: public).
   Owner: UI Designer (G14). Loaded only by layouts/public.html, after partials/head-styles.

   Rules (04-design-system §8): tokens only — no new colours and no new font sizes; compose the
   foundation first (.btn .card .table .tag .badge .code .money .kpi-band .dl--totals .menu
   .crumbs .alert). Every class here is prefixed pub-.

   Character (03-brand §0): the public face of an accountant's instrument. Hairline structure,
   one teal action per view, figures that line up, no hero imagery, no counters, no logos wall,
   no testimonials. Product evidence is shown as small HTML excerpts of real prototype screens
   built from the same components, each labelled "Demo data".

   Honesty devices (03-brand §5): a dashed outline + flask icon means "sample, not real"
   (.pub-note, .pub-demo, the footer status line) — the same signal as the in-app demo chip.
   "Configured at go-live" renders in --e-faint where the real value will go (.pub-golive).
   ===================================================================================== */

/* ── 1. Shell ─────────────────────────────────────────────────────────────────────── */

.layout-public {
  --pub-head-h: calc(var(--topbar-h) + var(--sp-2)); /* 64 px */
  display: flex;
  flex-direction: column;
  background: var(--e-bg);
}

.pub-main {
  flex: 1 0 auto;
  /* the same query container as the app's .main, so component rules written against it apply
     here too (e.g. a .table .wrap column's 8.5 rem phone floor, 04 §6.1) */
  container: main / inline-size;
}

.pub-main:focus {
  outline: none;
}

.pub-wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
  .pub-wrap {
    padding-inline: var(--sp-8);
  }
}

/* unclassed lists inside public chrome (base.css resets only ul[class]) */
.pub-nav ul,
.pub-foot__col ul,
.pub-jump ul,
.pub-toc ul {
  padding: 0;
  list-style: none;
}

/* anchors land below the sticky header */
.layout-public :is(h2, h3, [id]) {
  scroll-margin-top: calc(var(--pub-head-h) + var(--sp-4));
}

/* header */
.pub-head {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--e-border);
  background: var(--e-raised);
}

.pub-head__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--pub-head-h);
}

.pub-lockup,
.pub-lockup:hover {
  color: var(--e-fg);
}

.pub-lockup .brand-lockup__product {
  color: var(--e-muted);
}

.pub-nav {
  margin-left: auto;
}

.pub-nav ul {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
}

.pub-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--e-muted);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.pub-nav a:hover {
  background: var(--e-surface);
  color: var(--e-fg);
}

.pub-nav a:is([aria-current="page"], [data-section="help"]:where([data-screen="pub.help-article"] *)) {
  color: var(--e-fg);
  font-weight: var(--fw-semibold);
}

/* the current page's underline sits on the header's bottom hairline */
.pub-nav a:is([aria-current="page"], [data-section="help"]:where([data-screen="pub.help-article"] *))::after {
  content: "";
  position: absolute;
  right: var(--sp-3);
  bottom: calc((var(--pub-head-h) - 36px) / -2 - 1px);
  left: var(--sp-3);
  height: 2px;
  border-radius: 1px;
  background: var(--e-primary);
}

.pub-signin {
  flex: none;
}

.pub-menu {
  display: none;
  flex: none;
}

.pub-menu > summary {
  list-style: none;
}

.pub-menu > summary::-webkit-details-marker {
  display: none;
}

.pub-menu__list {
  min-width: 14rem;
}

.pub-menu .menu__item:is([aria-current="page"], [data-section="help"]:where([data-screen="pub.help-article"] *)) {
  background: var(--e-primary-soft);
  color: var(--e-fg);
  font-weight: var(--fw-semibold);
}

@media (max-width: 959.98px) {
  .pub-nav {
    display: none;
  }

  .pub-signin {
    margin-left: auto;
  }

  .pub-menu {
    display: block;
  }
}

@media (max-width: 389.98px) {
  .pub-signin .icon {
    display: none;
  }
}

/* footer: the logo-navy band of the sidebar and the sign-in brand panel */
.pub-foot {
  --e-focus: var(--e-sidebar-fg);
  margin-top: var(--sp-12);
  background: var(--e-sidebar);
  color: var(--e-sidebar-fg);
  font-size: var(--fs-sm);
}

.pub-foot a {
  color: var(--e-sidebar-fg);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.pub-foot a:hover {
  text-decoration-color: currentColor;
}

.pub-foot__grid {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-10) var(--sp-8);
}

@media (min-width: 768px) {
  .pub-foot__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pub-foot__about {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .pub-foot__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--sp-10);
  }

  .pub-foot__about {
    grid-column: auto;
  }
}

.pub-foot__about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--sp-4);
}

.pub-foot__status {
  display: flex;
  gap: var(--sp-2);
  max-width: 44ch;
  margin: 0;
  padding: var(--sp-3);
  border: 1px dashed var(--e-sidebar-muted);
  border-radius: var(--r-md);
  color: var(--e-sidebar-fg);
  line-height: var(--lh-ui);
}

.pub-foot__status .icon {
  flex: none;
  margin-top: 2px;
  color: var(--e-sidebar-muted);
}

.pub-foot__signin {
  margin: 0;
  color: var(--e-sidebar-muted);
}

.pub-foot__signin a {
  font-weight: var(--fw-semibold);
}

.pub-foot__label {
  margin: 0 0 var(--sp-3);
  color: var(--e-sidebar-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase; /* annotation micro-label (03-brand §6.1 rule 3) */
}

.pub-foot__col ul {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
}

.pub-foot__col a {
  text-decoration: none;
}

.pub-foot__col a:hover {
  text-decoration: underline;
}

.pub-foot__facts {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
}

.pub-foot__facts div {
  display: grid;
  gap: 2px;
}

.pub-foot__facts dt {
  color: var(--e-sidebar-muted);
  font-size: var(--fs-xs);
}

.pub-foot__facts dd {
  margin: 0;
}

.pub-foot .pub-golive {
  color: var(--e-sidebar-muted);
}

/* phones and small tablets: every footer and menu link is a 44 px row (touch guidance; above the
   WCAG 2.2 24 px minimum). Height comes from padding-block, never a bigger font. */
@media (max-width: 767.98px) {
  .pub-foot__col ul {
    gap: 0;
  }

  .pub-foot__col a,
  .pub-foot__signin a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--sp-2);
  }

  .pub-menu .menu__item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--sp-2);
  }

  .pub-mode button {
    min-height: 44px;
  }
}

.pub-foot__base {
  display: flex;
  margin-inline: auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--e-sidebar-border);
}

.pub-foot .brand-owner {
  color: var(--e-sidebar-muted);
}

.pub-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}

.pub-mode__label {
  margin-right: var(--sp-2);
  color: var(--e-sidebar-muted);
  font-size: var(--fs-xs);
}

.pub-mode button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--e-sidebar-border);
  border-radius: var(--r-full);
  color: var(--e-sidebar-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.pub-mode button:hover {
  border-color: var(--e-sidebar-muted);
}

.pub-mode button[aria-pressed="true"] {
  border-color: var(--e-sidebar-fg);
  background: var(--e-sidebar-fg);
  color: var(--e-sidebar);
}

.pub-mode .icon {
  width: 14px;
  height: 14px;
}

/* ── 2. Page heads ────────────────────────────────────────────────────────────────── */

.pub-hero {
  padding-block: var(--sp-8) var(--sp-8);
}

@media (min-width: 1024px) {
  .pub-hero {
    padding-block: var(--sp-12) var(--sp-10);
  }

  .pub-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    column-gap: var(--sp-12);
  }
}

.pub-hero__text {
  display: grid;
  justify-items: start;
  gap: var(--sp-5);
  min-width: 0;
}

/* home: the hero's right column is the product itself — the invoice excerpt (the proof that this
   is GST software, not any SaaS), with its question as a small heading and the demo-data lead-in */
.pub-proof {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  min-width: 0;
  margin-top: var(--sp-8);
}

@media (min-width: 1024px) {
  .pub-proof {
    margin-top: 0;
  }
}

.pub-proof__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.pub-proof__text {
  max-width: 60ch;
  margin: 0;
  color: var(--e-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}

.pub-h1 {
  max-width: 24ch;
  margin: 0;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

@media (min-width: 768px) {
  .pub-h1 {
    font-size: var(--fs-3xl);
  }
}

.pub-lead {
  max-width: 62ch;
  margin: 0;
  color: var(--e-fg);
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
}

@media (min-width: 1024px) {
  .pub-lead {
    font-size: var(--fs-xl);
    line-height: var(--lh-ui);
  }
}

.pub-note {
  display: flex;
  gap: var(--sp-3);
  max-width: 70ch;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--e-border-strong);
  border-radius: var(--r-lg);
  background: var(--e-raised);
  color: var(--e-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-note > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--e-muted);
}

.pub-note strong {
  color: var(--e-fg);
}

.pub-note--strong {
  color: var(--e-fg);
  font-size: var(--fs-lg);
}

.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
}

/* the line under the hero buttons: what "Open the demo" opens (STA-02) */
.pub-actions__note {
  max-width: 60ch;
  margin: calc(-1 * var(--sp-2)) 0 0;
  color: var(--e-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}

.pub-note--compact {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}

/* ── 3. Sections, prose, lists ────────────────────────────────────────────────────── */

.pub-sec {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--e-border);
}

@media (min-width: 1024px) {
  .pub-sec {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: var(--sp-12);
    padding-block: var(--sp-10) var(--sp-12);
  }

  .pub-sec__title {
    position: sticky;
    top: calc(var(--pub-head-h) + var(--sp-8));
    align-self: start;
  }
}

.pub-sec__title,
.pub-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-snug);
}

.pub-sec__body {
  display: grid;
  align-content: start;
  gap: var(--sp-5);
  min-width: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
}

.pub-sec__body > * {
  max-width: 70ch;
  margin: 0;
}

.pub-sec__body > :is(figure, .table-wrap, .pub-cap, .pub-guides, .pub-faq, .pub-prices, .pub-roles, .pub-facts) {
  max-width: none;
}

.pub-sec__lead {
  color: var(--e-fg);
}

.pub-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.pub-list > li {
  position: relative;
  padding-left: var(--sp-6);
}

.pub-list > li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--e-border-strong);
  translate: 0 -50%;
}

/* onward links at the end of a section: the guide that does the task (→) and the demo screen that
   shows it (app-window icon, rel="nofollow"). Never a dead end (29 Sep 2026 review). */
.pub-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-6);
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-next a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.pub-next a:hover {
  text-decoration: underline;
}

.pub-next a > .icon {
  flex: none;
  transition: translate var(--dur-fast) var(--ease-out);
}

.pub-next a:hover > .icon-arrow-right {
  translate: 2px 0;
}

/* a demo screen, named by the screen (never by its prototype path) */
.pub-next__app,
.pub-app {
  color: var(--e-fg);
}

.pub-next__app > .icon,
.pub-app > .icon {
  color: var(--e-muted);
}

.pub-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}

.pub-app:hover {
  color: var(--e-primary-dark);
  text-decoration-color: currentColor;
}

.pub-app .icon {
  width: 14px;
  height: 14px;
}

/* in a help step, the screen link sits on its own line under the instruction */
.pub-app-line {
  display: block;
  margin-top: 2px;
}

.pub-golive {
  color: var(--e-faint);
}

/* "On this page" jump links */
.pub-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.pub-jump__label {
  margin-right: var(--sp-2);
  color: var(--e-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase; /* annotation micro-label */
}

.pub-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
}

.pub-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--e-border);
  border-radius: var(--r-full);
  background: var(--e-raised);
  color: var(--e-fg);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}

.pub-jump a:hover {
  border-color: var(--e-border-strong);
  color: var(--e-primary-dark);
}

/* ── 4. Product evidence ──────────────────────────────────────────────────────────── */

/* A framed excerpt of a real prototype screen, or a worked example: caption row + content. */
.pub-shot {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--e-border);
  border-radius: var(--r-lg);
  background: var(--e-surface);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-shot__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-inline: var(--sp-1);
  color: var(--e-muted);
  font-size: var(--fs-xs);
}

.pub-shot > .card,
.pub-shot > .table-wrap {
  margin: 0;
}

.pub-shot .card__head {
  flex-wrap: wrap;
  row-gap: var(--sp-1);
}

.pub-demo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 var(--sp-2);
  border: 1px dashed var(--e-border-strong);
  border-radius: var(--r-full);
  background: var(--e-raised);
  color: var(--e-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.pub-demo .icon {
  width: 12px;
  height: 12px;
}

.pub-shot .dl--totals {
  max-width: 26rem;
  margin-left: auto;
}

.pub-shot__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* home: the at-a-glance fact sheet, section 2 directly under the hero (foundation .dl--grid:
   3 columns of facts at desktop, 1 on a phone) */
.pub-facts {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0 var(--sp-8);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-facts > div {
  padding-block: var(--sp-3);
  border-top: 1px solid var(--e-border);
}

.pub-facts dt {
  font-size: var(--fs-sm);
}

/* home: capabilities (icon + one line each) */
.pub-cap {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--e-border);
}

@media (min-width: 768px) {
  .pub-cap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }
}

.pub-cap > li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--e-border);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-cap__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--e-border);
  border-radius: var(--r-md);
  background: var(--e-raised);
  color: var(--e-fg);
}

.pub-cap > li > span:last-child {
  padding-top: 5px;
}

/* home: who it is for — role rows */
.pub-roles {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--e-border);
}

.pub-roles > div {
  display: grid;
  gap: 2px var(--sp-6);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--e-border);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

@media (min-width: 640px) {
  .pub-roles > div {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

.pub-roles dt {
  color: var(--e-fg);
  font-weight: var(--fw-semibold);
}

.pub-roles dd {
  margin: 0;
}

/* home: how the tax mode is chosen */
.pub-rule {
  display: grid;
  gap: var(--sp-2);
}

.pub-rule__row {
  display: grid;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--e-border);
  border-radius: var(--r-lg);
  background: var(--e-raised);
}

@media (min-width: 640px) {
  .pub-rule__row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

.pub-rule__if {
  color: var(--e-fg);
  font-weight: var(--fw-medium);
}

.pub-rule__arrow {
  color: var(--e-faint);
}

@media (max-width: 639.98px) {
  .pub-rule__arrow {
    display: none;
  }
}

.pub-rule__then {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  color: var(--e-muted);
}

/* home: the three plans in one strip */
.pub-prices {
  display: grid;
  margin: 0;
  border: 1px solid var(--e-border);
  border-radius: var(--r-lg);
  background: var(--e-raised);
}

@media (min-width: 640px) {
  .pub-prices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub-prices > div {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  border-top: 1px solid var(--e-border);
}

.pub-prices > div:first-child {
  border-top: 0;
}

@media (min-width: 640px) {
  .pub-prices > div {
    border-top: 0;
    border-left: 1px solid var(--e-border);
  }

  .pub-prices > div:first-child {
    border-left: 0;
  }
}

.pub-prices dt {
  color: var(--e-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.pub-prices dd {
  margin: 0;
}

.pub-prices__figure {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-snug);
}

.pub-prices__meta {
  color: var(--e-muted);
  font-size: var(--fs-xs);
}

/* which plans have Accounting and multi-branch, next to the price (PRC-03) */
.pub-prices__mods {
  margin-top: var(--sp-2) !important;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--e-border);
  color: var(--e-fg);
  font-size: var(--fs-sm);
}

/* pricing: the plan comparison table */
@media (min-width: 640px) {
  .pub-plans {
    min-width: 34rem;
  }
}

.pub-plans thead th {
  vertical-align: bottom;
}

.pub-plans thead th:not(:first-child) {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--e-fg);
}

.pub-plans tbody th {
  font-weight: var(--fw-medium);
  white-space: normal;
}

.pub-plans .pub-plans__price td {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-variant-numeric: tabular-nums;
}

/* every row centres its label and values, so a ✓ sits on the label's line, not 4 px above it */
.pub-plans :is(tbody th, td) {
  vertical-align: middle;
}

.pub-plans__yes,
.pub-plans__no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  vertical-align: middle;
}

.pub-plans__no {
  color: var(--e-faint);
}

.pub-plans__yes .icon {
  color: var(--e-fg);
}

/* phones: one compact 4-column matrix, not 36 stacked rows. The plan names stick under the site
   header while the rows scroll; ✓ and — carry visually hidden "Included" / "Not included". */
@media (max-width: 639.98px) {
  .pub-plans-wrap {
    overflow: visible; /* the matrix fits 358 px, and a scroll box would stop the header sticking */
  }

  .pub-plans {
    width: 100%;
    table-layout: fixed;
    font-size: var(--fs-sm);
  }

  .pub-plans :is(th, td) {
    padding: var(--sp-2) 6px;
    white-space: normal;
  }

  .pub-plans :is(th, td):first-child {
    width: 36%;
    padding-left: var(--sp-3);
  }

  .pub-plans thead th {
    position: sticky;
    top: var(--pub-head-h);
    z-index: 1;
    background: var(--e-raised);
    box-shadow: 0 1px 0 var(--e-border);
  }

  .pub-plans thead th:not(:first-child) {
    font-size: var(--fs-md);
  }

  .pub-plans tbody th {
    font-size: var(--fs-sm);
    line-height: var(--lh-ui);
  }

  .pub-plans .pub-plans__price td {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-stretch: normal;
    font-weight: var(--fw-semibold);
    letter-spacing: normal;
    white-space: nowrap;
  }

  .pub-plans__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* phones: 3+ column tables use the foundation's .table--stack (each row a labelled card);
   the row header becomes the card's first line */
@media (max-width: 639.98px) {
  .layout-public .table--stack :is(tbody, tfoot) th {
    display: block;
    width: 100%;
    padding: var(--sp-1) var(--sp-4) 2px;
    border: 0;
    color: var(--e-fg);
    font-weight: var(--fw-semibold);
    text-align: left;
    white-space: normal;
  }

  .layout-public .table--stack td:empty {
    display: none;
  }
}

/* invoice excerpt (home hero, features): the tax basis, the first lines in the invoice screen's
   narrow line layout, then the totals. Beside each other when the card is wide enough. */
.pub-inv__body {
  display: grid;
  gap: var(--sp-4);
  container: pubinv / inline-size;
}

.pub-inv__grid {
  display: grid;
  gap: var(--sp-4);
}

@container pubinv (min-width: 34rem) {
  .pub-inv__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--sp-8);
  }
}

.pub-inv .dl--totals {
  max-width: none;
  margin-left: 0;
}

.pub-lines {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--e-border);
}

.pub-lines__row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  gap: 2px var(--sp-2);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--e-border);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}

.pub-lines__sl {
  grid-row: span 3;
  color: var(--e-faint);
  font-variant-numeric: tabular-nums;
}

.pub-lines__name {
  color: var(--e-fg);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.pub-lines__amt {
  color: var(--e-fg);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-align: right;
}

.pub-lines__meta,
.pub-lines__tax {
  grid-column: 2 / -1;
  color: var(--e-muted);
  font-size: var(--fs-xs);
}

.pub-lines__more {
  margin: var(--sp-2) 0 0;
  color: var(--e-muted);
  font-size: var(--fs-xs);
}

/* security: an audit entry, quoted from the entry screen */
.pub-audit {
  margin: 0;
}

.pub-audit__body {
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-audit__body > p {
  margin: 0;
}

.pub-audit__who {
  color: var(--e-muted);
  font-size: var(--fs-sm);
}

.pub-audit__note {
  display: flex;
  gap: var(--sp-2);
  color: var(--e-muted);
}

.pub-audit__note .icon {
  flex: none;
  margin-top: 2px;
}

/* help: the A4 and 80 mm prints, reduced to a header-and-totals excerpt of each sheet (the sheet
   follows the colour mode like the rest of the page; the print views themselves are the real paper) */
.pub-print {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}

@media (min-width: 640px) {
  .pub-print {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.pub-paper {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}

.pub-paper__label {
  margin: 0;
  color: var(--e-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.pub-paper__sheet {
  display: grid;
  gap: 6px;
  padding: var(--sp-4);
  border: 1px solid var(--e-border);
  border-radius: var(--r-sm);
  background: var(--e-raised);
  box-shadow: var(--shadow-1);
  color: var(--e-fg);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.pub-paper--roll .pub-paper__sheet {
  width: 100%;
  max-width: 16rem;
}

.pub-paper__sheet > * {
  margin: 0;
}

.pub-paper__co {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.pub-paper--roll :is(.pub-paper__co, .pub-paper__sub, .pub-paper__title) {
  text-align: center;
}

.pub-paper__sub {
  color: var(--e-muted);
}

.pub-paper__title {
  padding-block: 4px;
  border-block: 1px solid var(--e-border-strong);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.pub-paper__line {
  font-weight: var(--fw-semibold);
}

.pub-paper__rows {
  display: grid;
  gap: 2px;
  margin: 0;
}

.pub-paper__rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
}

.pub-paper__rows dt {
  color: var(--e-muted);
}

.pub-paper__rows dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.pub-paper__grand {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--e-border-strong);
  font-weight: var(--fw-bold);
}

.pub-paper__grand dt {
  color: var(--e-fg) !important;
}

.pub-paper__gap {
  padding-block: 2px;
  border-block: 1px dashed var(--e-border);
  color: var(--e-faint);
  text-align: center;
}

.pub-paper__words {
  color: var(--e-muted);
  font-style: italic;
}

/* features: a core flow — what it does on the left, the demo record that proves it on the right */
.pub-spot {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--e-border);
}

@media (min-width: 1024px) {
  .pub-spot {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    column-gap: var(--sp-12);
    padding-block: var(--sp-10);
  }
}

.pub-spot__text,
.pub-spot__proof {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  min-width: 0;
}

.pub-spot__text > *,
.pub-spot__proof > * {
  margin: 0;
}

.pub-spot__text {
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-spot__text .pub-sec__lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
}

.pub-spot__text .pub-list {
  gap: var(--sp-2);
}

.pub-spot__text .pub-list > li::before {
  top: 0.72em;
}

/* features: the eight sections after the four core flows, as a compact list */
.pub-feats-block {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-8) 0;
  border-top: 1px solid var(--e-border);
}

.pub-feats__label {
  margin: 0;
  color: var(--e-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase; /* annotation micro-label */
}

.pub-feats {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .pub-feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .pub-feats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub-feat {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-5);
  border: 1px solid var(--e-border);
  border-radius: var(--r-lg);
  background: var(--e-raised);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-feat > * {
  margin: 0;
}

.pub-feat__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.pub-feat__more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  cursor: pointer;
  color: var(--e-fg);
  font-weight: var(--fw-medium);
  list-style: none;
}

.pub-feat__more > summary::-webkit-details-marker {
  display: none;
}

.pub-feat__more > summary:hover {
  color: var(--e-primary-dark);
}

.pub-feat__more > summary .icon {
  color: var(--e-muted);
  transition: rotate var(--dur-fast) var(--ease-out);
}

.pub-feat__more[open] > summary .icon {
  rotate: 180deg;
}

.pub-feat__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--e-subtle);
  color: var(--e-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.pub-feat__more > .pub-list {
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.pub-feat .pub-next {
  margin-top: auto;
  font-size: var(--fs-sm);
}

/* ── 5. GST FAQ ───────────────────────────────────────────────────────────────────── */

.pub-faq {
  margin: 0;
  border-top: 1px solid var(--e-border);
}

.pub-faq__item {
  border-bottom: 1px solid var(--e-border);
}

.pub-faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-1);
  cursor: pointer;
  color: var(--e-fg);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  list-style: none;
}

.pub-faq__item > summary::-webkit-details-marker {
  display: none;
}

.pub-faq__item > summary:hover {
  color: var(--e-primary-dark);
}

.pub-faq__item > summary .icon {
  flex: none;
  margin-top: 2px;
  color: var(--e-muted);
  transition: rotate var(--dur-fast) var(--ease-out);
}

.pub-faq__item[open] > summary .icon {
  rotate: 180deg;
}

/* the question is a real H3 inside its summary, so the page outline matches the twin and FAQPage */
.pub-faq__q {
  margin: 0;
  color: inherit;
  font: inherit;
}

.pub-faq__item > p {
  max-width: 68ch;
  margin: 0;
  padding: 0 var(--sp-8) var(--sp-5) var(--sp-1);
  color: var(--e-fg);
}

.pub-faq__item > .pub-next {
  margin-top: calc(-1 * var(--sp-3));
  padding: 0 var(--sp-1) var(--sp-4);
}

/* ── 6. Help centre ───────────────────────────────────────────────────────────────── */

.pub-guides {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

@media (min-width: 768px) {
  .pub-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pub-guide {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: start;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--e-border);
  border-radius: var(--r-lg);
  background: var(--e-raised);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.pub-guide:hover {
  border-color: var(--e-border-strong);
}

.pub-guide:focus-within {
  outline: 2px solid var(--e-focus);
  outline-offset: 2px;
}

.pub-guide__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--e-primary-soft);
  color: var(--e-primary-dark);
}

.pub-guide__name {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.pub-guide__name a {
  color: var(--e-fg);
  text-decoration: none;
}

/* one link, stretched over the card */
.pub-guide__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pub-guide__name a:focus-visible {
  outline: none;
}

.pub-guide:hover .pub-guide__name a {
  color: var(--e-primary-dark);
}

.pub-guide__text {
  margin: 0;
  color: var(--e-muted);
}

/* article pages */
.pub-article {
  display: grid;
  gap: var(--sp-10);
  padding-block: var(--sp-6) var(--sp-4);
}

@media (min-width: 1024px) {
  .pub-article {
    grid-template-columns: minmax(0, 1fr) 16rem;
    column-gap: var(--sp-12);
    padding-block: var(--sp-8) var(--sp-4);
  }
}

.pub-doc {
  display: grid;
  align-content: start;
  gap: var(--sp-5);
  max-width: 46rem;
  min-width: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
}

.pub-doc > * {
  margin: 0;
}

.pub-doc .crumbs {
  font-size: var(--fs-sm);
}

/* phones: the H1 right below names the page, so the crumb trail is just the way back */
@media (max-width: 639.98px) {
  .pub-doc .crumbs li:last-child {
    display: none;
  }
}

.pub-doc__sec {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.pub-doc__sec > * {
  margin: 0;
}

.pub-doc__sec--prereq {
  padding: var(--sp-5);
  border: 1px solid var(--e-border);
  border-radius: var(--r-lg);
  background: var(--e-raised);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
}

.pub-doc__sec--prereq .pub-h2 {
  font-size: var(--fs-lg);
}

.pub-doc h3 {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

/* numbered steps */
.pub-steps {
  display: grid;
  margin: 0;
  counter-reset: pub-step;
}

.pub-steps > li {
  position: relative;
  padding: 0 0 var(--sp-5) calc(28px + var(--sp-4));
  counter-increment: pub-step;
}

.pub-steps > li::before {
  content: counter(pub-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--e-border-strong);
  border-radius: var(--r-full);
  background: var(--e-raised);
  color: var(--e-fg);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.pub-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 4px;
  left: 13.5px;
  width: 1px;
  background: var(--e-border);
}

.pub-steps > li:last-child {
  padding-bottom: 0;
}

/* related guides */
.pub-related {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--e-border);
  font-size: var(--fs-md);
}

.pub-related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-1);
  border-bottom: 1px solid var(--e-border);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.pub-related a:hover {
  background: var(--e-subtle);
}

.pub-related .icon {
  flex: none;
}

/* the guides list beside an article */
.pub-toc {
  position: sticky;
  top: calc(var(--pub-head-h) + var(--sp-8));
  display: grid;
  gap: var(--sp-3);
}

.pub-toc__label {
  margin: 0;
  color: var(--e-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase; /* annotation micro-label */
}

.pub-toc ul {
  display: grid;
  margin: 0;
  border-left: 1px solid var(--e-border);
}

.pub-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px var(--sp-3);
  border-left: 2px solid transparent;
  color: var(--e-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  text-decoration: none;
}

.pub-toc a:hover {
  color: var(--e-fg);
}

.pub-toc a[aria-current="page"] {
  border-left-color: var(--e-primary);
  color: var(--e-fg);
  font-weight: var(--fw-semibold);
}

@media (max-width: 1023.98px) {
  .pub-toc {
    position: static;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--e-border);
  }
}

/* ── 7. Paper ─────────────────────────────────────────────────────────────────────── */

@media print {
  .pub-head,
  .pub-foot__base,
  .pub-jump,
  .pub-aside {
    display: none !important;
  }

  .pub-foot {
    background: none;
    color: inherit;
  }

  .pub-sec__title,
  .pub-toc {
    position: static;
  }
}