/* tend.net.au: pricing only (the plans, the comparison and the "Run your own numbers"
   worksheet). Linked from pricing.html's "styles", which keeps the shared CSS inside its budget. */

/* Moved from site.css (2026-11-07): rules only this page uses, so other pages don't carry them. */
/* Accordion: questions boards ask, and FAQs. Native <details>, no JS. */
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.25; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+' / ''; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--leaf-50); color: var(--leaf-700); font-family: var(--font-body); font-size: 1.25rem; }
.qa details[open] summary::after { content: '−' / ''; }
.qa-body { display: grid; gap: var(--space-5); padding: 0 0 var(--space-6); }
@media (min-width: 960px) { .qa-body { grid-template-columns: 5fr 7fr; gap: var(--space-10); align-items: start; } }
.qa-sm summary { font-family: var(--font-body); font-size: var(--step-body); font-weight: 600; }
.qa-sm .qa-body { display: block; }
/* The questions in two columns (design 07, after Stripe's FAQs): the head on the left, the questions on the right. */
@media (min-width: 960px) {
  .faq { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: start; }
  .faq .sec-head { display: block; margin: 0; }
}


/* The plans (design 04, after Xero): three equal plans whose rows line up (subgrid). With
   plans.js the plan in focus is full size and the others sit back at 80%. Where motion is
   allowed they bounce into place, and the corner under the pointer dips. Phones: stacked, level. */
.plans { display: grid; gap: var(--space-4); }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); border-radius: var(--radius-xl); padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--rule); }
@media (min-width: 720px) { .plan { padding: var(--space-6); } } /* a card: 16, then 24 (design 08) */
.plan > * { margin: 0; }
.plan-k { font-family: var(--font-body); font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.plan-price { margin-top: var(--space-1); font: 360 clamp(3.25rem, 2.5rem + 2vw, 4.5rem)/0.95 var(--font-display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: lining-nums; }
.plan-talk { font-size: clamp(2.75rem, 2.2rem + 1.5vw, 3.5rem); }
.plan-free .plan-price { color: var(--leaf-700); }
.plan-unit { font-size: var(--step-small); line-height: 1.5; color: var(--muted); }
.plan-pitch { color: var(--ink); }
.plan-inc { padding-top: var(--space-3); border-top: 1px solid var(--rule); font-size: var(--step-small); font-weight: 600; color: var(--ink); }
.plan-list { font-size: 0.95rem; align-content: start; }
.plan-go { margin-top: auto; padding-top: var(--space-2); }
.plan.is-sel { border-color: var(--leaf-300); box-shadow: var(--shadow-lg); }
.plan-ink { background: var(--forest); color: var(--stone-200); border-color: transparent; }
.plan-ink .plan-k { color: var(--leaf-200); }
.plan-ink :is(.plan-price, .plan-pitch, .plan-inc) { color: var(--on-ink); }
.plan-ink .plan-unit { color: var(--stone-200); }
.plan-ink .plan-inc { border-top-color: var(--forest-rule); }
.plan-ink .ticks li::before { border-color: var(--leaf-300); }
.plan-ink.is-sel { border-color: transparent; }
.plans-foot { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 0; }
@media (min-width: 960px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) {
    .plans { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: var(--space-3); }
    .plan :is(.plan-price, .plan-go) { align-self: end; }
  }
  .plans.is-live .plan { scale: var(--s, .8); transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); cursor: pointer; }
  .plans.is-live .plan:not(.is-sel):hover { --s: .82; }
  .plans.is-live .plan.is-sel { --s: 1; z-index: 1; cursor: auto; }
  :is(.motion-ok, .motion-paused) .plans.is-live .plan { transition: scale .62s cubic-bezier(.3, 1.55, .5, 1), transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease; }
}

/* Phones (owner, 2026-11-07): the plans in one row you swipe, opening on 2 to 49 with Free and 50+ at the edges.
   Each snaps to the centre, and the centred plan is the one in focus (plans.js), as on desktop. JS off: it still scrolls.
   The plans either side show a strip of 40 px or more (owner: at 80vw and 12 px apart, it wasn't clear there were other
   plans), and they sit back toward the plan in focus, tops level, so the gap between them stays 8 px. */
@media (max-width: 959.98px) {
  .plans { grid-auto-flow: column; grid-auto-columns: 74vw; gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding: var(--space-4) 13vw var(--space-6); }
  .plans::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: center; scroll-snap-stop: always; }
  .plan.is-sel { scroll-initial-target: nearest; }
  .plans.is-live .plan:not(.is-sel) { scale: .94; }
  .plans.is-live .plan-free:not(.is-sel) { border-color: var(--stone-300); }
  .plans.is-live .plan.is-sel ~ .plan { transform-origin: left top; }
  .plans.is-live .plan:has(~ .is-sel) { transform-origin: right top; }
  :is(.motion-ok, .motion-paused) .plans.is-live .plan { transition: scale .3s cubic-bezier(.2, .7, .3, 1), transform-origin .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease; }
}

/* The comparison (Xero's table): every feature in every plan; with one home, the portfolio
   rows say so. The plan in focus lights its column. */
.compare { table-layout: fixed; }
.compare th[scope="col"]:first-child { width: 46%; }
.compare thead th { position: sticky; top: var(--cmp-top, 51px); z-index: 2; vertical-align: bottom; text-align: center; font-size: var(--step-body); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.compare thead th:first-child { text-align: left; }
.cmp-sub { display: block; font-size: var(--step-small); font-weight: 400; color: var(--muted); }
.compare tbody th[scope="row"] { vertical-align: middle; font-weight: 400; color: var(--ink); }
.compare td { text-align: center; vertical-align: middle; font-size: var(--step-small); }
.compare .cmp-group th { padding-top: var(--space-8); font: 400 1.3rem/1.2 var(--font-display); color: var(--ink); border-bottom-color: var(--stone-400); }
.compare td.y::before { content: ''; display: inline-block; width: 12px; height: 6px; border-left: 2px solid var(--leaf-600); border-bottom: 2px solid var(--leaf-600); transform: translateY(-3px) rotate(-45deg); }
.compare td.one { color: var(--muted); }
.compare td.one::before { display: block; margin: 0 auto var(--space-2); }
.compare td.n::before { content: ''; display: inline-block; width: 12px; vertical-align: middle; border-top: 2px solid var(--stone-400); }
.compare[data-sel="0"] :is(th, td):nth-child(2), .compare[data-sel="1"] :is(th, td):nth-child(3), .compare[data-sel="2"] :is(th, td):nth-child(4) { background-color: var(--leaf-50); }
.compare[data-sel="0"] thead th:nth-child(2), .compare[data-sel="1"] thead th:nth-child(3), .compare[data-sel="2"] thead th:nth-child(4) { box-shadow: inset 0 3px 0 var(--leaf-500), 0 1px 0 var(--rule); }
:is(.motion-ok, .motion-paused) .compare :is(th, td) { transition: background-color .3s ease; }
p.cmp-foot { margin: var(--space-4) 0 0; }
@media (min-width: 960px) { .compare { --cmp-top: calc(var(--header-h) + 51px); } }
@media (max-width: 599.98px) {
  .compare th[scope="col"]:first-child { width: 36%; }
  .compare :is(th, td) { padding: var(--space-3) var(--space-1); }
  .compare td { font-size: 0.8rem; }
  .compare :is(th, td):first-child { padding-left: 0; }
  .compare thead th { font-size: var(--step-small); }
  .compare .cmp-sub { font-size: 0.8rem; }
}
/* The worksheet: a ruled register sheet to fill in, on screen or printed. */
.sheet { background-color: var(--leaf-50); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--paper-rule) 27px, var(--paper-rule) 28px); border: 1px solid var(--leaf-100); border-radius: var(--radius-xl); padding: var(--space-3); }
@media (min-width: 720px) { .sheet { padding: var(--space-6); } }
.sheet .table { background: var(--bg-surface); border-radius: var(--radius-md); overflow: hidden; }
.sheet thead th:last-child { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.05rem; }
.fill { white-space: nowrap; }
.fill::after { content: ''; display: inline-block; width: 8em; margin-left: var(--space-1); border-bottom: 1px solid var(--stone-400); vertical-align: -2px; }
/* The worksheet, live (site.js §5): figures in ink on the drawn line, worked
   rows in tabular figures, the answer a ledger total. Gold marks the gap left. */
.is-live .worksheet th[scope="row"] { width: 60%; }
.is-live .worksheet td { vertical-align: middle; }
.n-how, .n-sub, .n-unit, .n-say, .n-note { font-size: var(--step-small); font-weight: 400; color: var(--muted); }
.n-how, .n-sub { display: block; }
.n-how { margin-top: var(--space-1); }
.n-sub:empty { display: none; }
.n-in { display: inline-flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.n-line { display: inline-flex; align-items: baseline; gap: var(--space-1); width: 5.5em; padding: 0 2px 2px; border-bottom: 1px solid var(--stone-400); font: 1.375rem/1.25 var(--font-display); font-variant-numeric: lining-nums; color: var(--ink); }
.n-line input { flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.n-line input:focus-visible { outline: none; }
.n-line:focus-within { border-color: var(--leaf-700); box-shadow: 0 2px 0 var(--leaf-700); background: var(--leaf-50); }
.n-gap .n-line, .n-line.is-invalid { border-bottom: 2px solid var(--marigold-500); padding-bottom: 0; }
.n-worked th[scope="row"] { font-weight: 500; }
.n-out { display: block; font-size: 1.125rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.worksheet tfoot :is(th, td) { border-top: 3px double var(--ink); border-bottom: 0; padding-block: var(--space-6); }
p.n-scope { margin: var(--space-3) 0 0; }
/* "insert your figures here": a pencilled note above the sheet's top right,
   its arrow curling down to the figures column. Decoration only (aria-hidden). */
.sheet { position: relative; margin-top: 72px; }
.n-arrow { position: absolute; bottom: calc(100% - 14px); right: clamp(16px, 6vw, 72px); display: flex; align-items: flex-start; gap: 2px; margin: 0; pointer-events: none; color: var(--leaf-700); }
.n-arrow span { order: 2; padding-top: 2px; font: italic 400 1.2rem/1.1 var(--font-display); white-space: nowrap; transform: rotate(-4deg); }
.n-arrow svg { order: 1; flex: none; overflow: visible; transform: translateY(8px); }
.n-arrow path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media print { .n-arrow svg { display: none; } }
/* Until the visitor types, the worked figures rest on the examples: greyed. */
.sheet.is-example :is(.n-out, .n-total) { color: var(--stone-500); }
.n-line input::placeholder { color: var(--stone-400); opacity: 1; }
.n-extras { margin-top: var(--space-6); }
.n-extras h3 { margin: 0 0 var(--space-3); font-size: var(--step-body); font-weight: 600; }
@media (min-width: 720px) { .n-extras .ticks { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-8); } }
.n-result { display: grid; gap: var(--space-1) 0; }
.n-result > p { margin: 0; }
.n-result-label { font-weight: 600; color: var(--ink); }
.n-total { font: 380 clamp(2.5rem, 1.9rem + 2.2vw, 3.5rem)/1 var(--font-display); font-variant-numeric: lining-nums; letter-spacing: -0.025em; color: var(--ink); }
.is-saving .n-total { color: var(--leaf-700); }
.is-empty .n-total::after { content: ''; display: inline-block; width: 3.2em; height: 0.8em; border-bottom: 1px solid var(--stone-400); }
.n-note { margin: var(--space-3) var(--space-1) 0; }
@media (min-width: 600px) {
  .n-result { grid-template: "l t" "s t" / 60% 40%; align-items: start; }
  .n-result-label { grid-area: l; padding-right: var(--space-6); }
  .n-say { grid-area: s; padding-right: var(--space-6); }
  .n-total { grid-area: t; padding-left: var(--space-3); align-self: center; }
}
@media (max-width: 599.98px) {
  .is-live .worksheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .is-live .worksheet, .is-live .worksheet :is(tbody, tfoot, tr, th, td) { display: block; }
  .is-live .worksheet tbody tr { padding: var(--space-3); border-bottom: 1px solid var(--rule); }
  .is-live .worksheet tbody :is(th[scope], td) { width: auto; padding: 0; border: 0; }
  .is-live .worksheet tbody td { margin-top: var(--space-2); }
}