/* =============================================================
   Rooby, demo direction (Oct 2026)

   Palette: one dark, one neutral, one accent.
     night  #0A1220  the first screen, the story and the ask
     paper  #F6F4EF  everything else
     red    #E5394F on night / #C21F3A on paper (Rooby red)
   Type: Familjen Grotesk for everything (it is drawn tight, so headlines
   take about half the negative tracking a typical grotesque would).
   Spectral italic only for the
   second line of the hero headline.
   The gem: Rooby's mark is a square with one corner cut away in
   facets. That cut (--cut, below) is the page's shape: buttons, panels
   and the closing field all carry it. The gem itself is the logo, the
   faceted fields on dark sections (assets/facets-night.svg). Two
   devices, used everywhere, rather than many.
   Sizes: the --fs-* scale below; nothing meant to be read under 14px.
   Surfaces are told apart by tone, never by lines, shadows or glows.
   The product screens (anything with data-ui) are placeholders while
   the app's look is being redesigned: they keep their own borders and
   shadows, and are left alone here.
   Rhythm: night, paper, night, paper, paper, night.
   ============================================================= */

:root {
  --night: #0A1220;
  --night-2: #111C30;
  --mist: rgba(226, 232, 244, .84);
  --mist-2: rgba(226, 232, 244, .62);
  --paper: #F6F4EF;
  --paper-2: #EEEBE4;
  --ink: #0E1726;
  --ink-2: #4B5263;
  --line: #DCD7CD;
  --red: #E5394F;
  --red-ink: #C21F3A;
  --green: #2F7A57;

  --sans: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* real code only: the Xero scopes. taste-skill-ignore */

  --fs-small: .875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.35vw, 1.25rem);
  --fs-h3: clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-statement: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.75rem);
  --fs-h1: clamp(2.9rem, 8.4vw, 7.4rem);

  --pad: clamp(72px, 11vw, 150px);
  --wrap: 1180px;
  --bar: 64px;
  --gem-red: #CA1B3E;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }
body {
  margin: 0;
  background: var(--paper-2);   /* shows only in the ask's cut corner, under the FAQ */
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, h1, h2, h3, dl, dd, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

/* The gem's cut corner, taken from the logo's outline (its top-left
   facets at 0/1.02, .26/.61, .58/.27 and 1/0 of the cut), scaled by --cut. */
.btn, .intro .app, .calc, .brand, .bands, .slip, .ask, .client .win, .sole .win {
  clip-path: polygon(0 var(--cut), calc(var(--cut) * .26) calc(var(--cut) * .61), calc(var(--cut) * .58) calc(var(--cut) * .27), var(--cut) 0, 100% 0, 100% 100%, 0 100%);
}
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* ---------- buttons: flat, fully round ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  --cut: 12px;
  padding: 1em 1.5em; border: 0; border-radius: 0;
  font: 600 1rem/1 var(--sans); letter-spacing: -.01em; text-decoration: none;
  cursor: pointer;
  transition: transform .15s var(--ease), background-color .2s, color .2s;
}
.btn:active { transform: scale(.97); }
/* clip-path hides an outside outline, so the focus ring sits inside */
.btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px currentColor; } /* taste-skill-ignore: focus ring, not a resting shadow */
.btn--white { background: #fff; color: var(--night); }
.btn--white:hover { background: #DDE3EE; }
.btn--ghost { color: #fff; background: rgba(255, 255, 255, .12); }
.btn--ghost:hover { background: rgba(255, 255, 255, .22); }
.btn--red { background: var(--red-ink); color: #fff; }
.btn--red:hover { background: #a91a32; }
.btn--sm { --cut: 9px; padding: .75em 1.15em; font-size: var(--fs-small); }

/* ---------- sticky nav, after the hero: a plain bar ---------- */
.dock {
  position: fixed; z-index: 50; inset: 0 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--paper);
  transform: translateY(-100%); transition: transform .45s var(--ease);
}
.dock.is-on { transform: none; }
.dock__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; height: var(--bar); }
.dock__logo img { height: 26px; width: auto; }
.dock__right { display: flex; align-items: center; gap: 2rem; }
.dock__links { display: flex; gap: 1.75rem; }
.dock__links a { font-size: var(--fs-small); font-weight: 500; color: var(--ink); text-decoration: none; transition: color .2s; }
.dock__links a:hover { color: var(--red-ink); }

/* =============================================================
   INTRO: the first screen, with the product on it
   ============================================================= */
.intro {
  position: relative; overflow: hidden; color: #fff;
  background: var(--night) url("/assets/facets-night.svg") center / cover no-repeat;
  padding-bottom: clamp(64px, 9vw, 120px);
}
.topbar {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: max(22px, env(safe-area-inset-top, 0px));
}
.topbar__logo img { height: 30px; width: auto; }
.topbar__actions { display: flex; align-items: center; gap: 1.25rem; }
.topbar__login { font-size: var(--fs-small); font-weight: 500; color: var(--mist); text-decoration: none; }
.topbar__login:hover { color: #fff; }
.intro__text {
  display: grid; justify-items: center; text-align: center; gap: 1.5rem;
  padding-top: clamp(48px, 8vh, 96px);
}
.intro__text .hero__title { font-size: clamp(2.75rem, 7vw, 6.25rem); }

/* The work queue, with the client's phone overlapping its corner. */
.intro__shot { position: relative; margin-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(24px, 4vw, 48px); }
.intro .app { --cut: 34px; margin-right: clamp(0px, 12vw, 160px); }
.intro .app .app__bar { padding-left: 46px; }
.intro .phone { right: 0; bottom: 0; }
/* Rises into place once, as the page opens; the phone a beat later. */
.js .intro .app { animation: rise 1.1s var(--ease) .2s both; }
.js .intro .phone { animation: rise-phone 1.1s var(--ease) .6s both; }
@keyframes rise { from { opacity: 0; transform: perspective(1800px) rotateX(10deg) translateY(48px); } }
@keyframes rise-phone { from { opacity: 0; translate: 0 50px; } }
.intro .pair { margin-top: clamp(2.5rem, 5vw, 4rem); }
.intro .pair__k { color: #fff; }
.intro .pair__v { color: var(--mist); }

/* =============================================================
   HOW IT WORKS: the pinned story
   ============================================================= */
/* Height comes from main.js ("Scroll schedule"): one screen plus the
   scrolling the animation and its pauses need. 430vh matches it for the
   moment before the script runs. */
.hero { position: relative; height: 430vh; background: var(--night); color: #fff; }
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  background: var(--night);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-stage] { will-change: opacity, transform; }
/* Hidden until main.js places them, so they never flash up stacked. */
.hero__beat, .hero__result { opacity: 0; }

.hero__title {
  max-width: 13ch;
  font-size: var(--fs-h1); line-height: .94; font-weight: 600; letter-spacing: -.022em;
  text-wrap: balance;
}
.hero__title .serif-i { display: block; font-size: 1.08em; letter-spacing: -.01em; color: #fff; }

/* "before", underlined by hand: a red stroke that draws itself in once
   the page has loaded. */
.u-draw { position: relative; display: inline-block; }
.u-draw__line {
  position: absolute; left: -2%; bottom: -.06em; width: 104%; height: .2em; overflow: visible;
  fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round;
  /* No vector-effect: non-scaling-stroke here. It makes the browser read the
     pathLength-based dash in raw pixels, and the draw-in turns dotted. */
}
.u-draw__line path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line .9s cubic-bezier(.65, 0, .35, 1) .7s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.hero__sub { max-width: 38rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--mist); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.hero__micro { font-size: var(--fs-small); color: var(--mist-2); }

.hero__beat {
  position: absolute; z-index: 2; left: 50%; top: clamp(90px, 15vh, 150px);
  width: min(100% - 32px, 46rem); transform: translateX(-50%);
  text-align: center; font-size: var(--fs-statement); line-height: 1.15; font-weight: 500; letter-spacing: -.015em;
  text-wrap: balance;
}

.hero__result {
  position: absolute; z-index: 2; left: 50%; top: 64%;
  width: min(100% - 32px, 40rem); transform: translateX(-50%);
  display: grid; justify-items: center; gap: .35rem; text-align: center;
}
.result__what { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.01em; }
.result__when { font-size: var(--fs-small); color: var(--mist); }
.result__link {
  margin-top: 1rem; font-size: var(--fs-small); font-weight: 600; color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 5px;
}
.result__link:hover { text-decoration-color: #fff; }

.hero__rail {
  position: absolute; z-index: 2; left: 50%; bottom: max(28px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); display: flex; gap: 1.75rem;
  font-size: var(--fs-small); font-weight: 500; color: var(--mist-2);
  opacity: 0; transition: opacity .4s;
}
.hero__rail.is-on { opacity: 1; }
.hero__rail { pointer-events: none; }
.hero__rail.is-on { pointer-events: auto; }
.hero__rail li { position: relative; }
.hero__rail button {
  all: unset; position: relative; display: block; padding: 12px 2px 4px; cursor: pointer;
  white-space: nowrap; color: inherit; transition: color .3s;
}
.hero__rail button:hover { color: #fff; }
.hero__rail button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.hero__rail li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .14);
}
.hero__rail li::after {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; border-radius: 2px;
  width: var(--fill, 0%); background: var(--red);
}
.hero__rail li.is-active { color: #fff; }
/* Reduced motion: no pinning, no scrubbing. The finished figure, as a
   still, with its caption under it. */
.hero.is-still { height: auto; }
.hero.is-still .hero__stage { position: relative; height: auto; min-height: 100svh; }
.hero.is-still .hero__beat, .hero.is-still .hero__rail { display: none; }
.hero.is-still .hero__result { position: relative; left: auto; top: auto; transform: none; margin: 58vh auto 0; padding-bottom: 72px; }
.hero.is-still .hero__canvas { position: absolute; }

/* =============================================================
   Shared section type
   ============================================================= */
.display {
  font-size: var(--fs-h2); line-height: 1; font-weight: 600; letter-spacing: -.02em;
  text-wrap: balance;
}
.display--light { color: #fff; }
.lede { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.lede--light { color: var(--mist); }
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }

/* Reveal: fade and rise once, no bounce. Only hidden when the script
   that shows them again is running (the "js" class set in <head>). */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* =============================================================
   PRODUCT SCREENS (data-ui): built in HTML from fictional demo data
   ============================================================= */
/* Product screen placeholder (data-ui): keeps its own borders and shadows. taste-skill-ignore */
.app {
  border-radius: 0; overflow: hidden;
  background: #FAF8F4; color: #1a1a1a;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); /* taste-skill-ignore */
  font-size: 13px; line-height: 1.35;
}
.app__bar { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: #152844; color: #fff; }
.app__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.app__brand img { width: 18px; height: 18px; }
.app__brand small { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.app__crumb { font-size: 12px; opacity: .85; }
.app__firm { font-size: 12px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 7px; } /* taste-skill-ignore */
.app__body { padding: 16px; display: grid; gap: 10px; }
.app__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.app__tiles div { background: #fff; border: 1px solid #ECE7DF; border-radius: 10px; padding: 9px 11px; display: grid; gap: 2px; } /* taste-skill-ignore */
.app__tiles small { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6e675e; }
.app__tiles b { font-size: 17px; font-variant-numeric: tabular-nums; }
.app__group { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a5a16; }
.app__group em { font-style: normal; color: #6e675e; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot--red { background: #E26A50; }
.dot--green { background: var(--green); }
.t-red { color: #b4542f; }

/* The work queue: the admin's compact table (data-ui placeholder). taste-skill-ignore */
.q { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-variant-numeric: tabular-nums; }
.q th { padding: 0 12px 2px; text-align: left; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6e675e; }
.q td { padding: 9px 12px; background: #fff; border-block: 1px solid #ECE7DF; vertical-align: top; } /* taste-skill-ignore */
.q td:first-child { border-left: 1px solid #ECE7DF; border-radius: 9px 0 0 9px; } /* taste-skill-ignore */
.q td:last-child { border-right: 1px solid #ECE7DF; border-radius: 0 9px 9px 0; color: #666; } /* taste-skill-ignore */
.q td small { display: block; font-size: 10.5px; color: #666; }
.q td b { font-weight: 600; }
.q .t-red { font-size: 12px; }
.q tr.is-hot td { border-color: rgba(194, 31, 58, .45); background: #FFF9F9; } /* taste-skill-ignore */
.q--quiet td { color: #555; }
.q .app__type { display: inline-block; margin: 3px 0 0; }
.q td:first-child .app__type { display: table; margin-left: 0; }
.app__type {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #EEF1F6; color: #2F4A6E;
  font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; vertical-align: 1px;
}

/* Product screen placeholder (data-ui). */
.phone {
  position: absolute; right: clamp(14px, 6vw, 80px); bottom: clamp(-60px, -3vw, -20px);
  width: clamp(220px, 25vw, 270px); padding: 34px 20px 28px;
  border-radius: 34px; background: #FAF8F4; color: var(--ink);
  border: 7px solid #05080f;
  box-shadow: 0 40px 70px -25px rgba(0, 0, 0, .7); /* taste-skill-ignore */
  transform: rotate(3deg);
  font-size: 13px;
}
.phone__notch { position: absolute; top: 9px; left: 50%; width: 70px; height: 18px; transform: translateX(-50%); border-radius: 999px; background: #05080f; }
.phone__co { font-weight: 700; font-size: 13px; }
.phone__label { margin-top: 16px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); }
.phone__big { font-size: 34px; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.phone__sub { font-size: 12px; color: var(--ink-2); }
.phone__bar { margin-top: 14px; height: 7px; border-radius: 999px; background: #E9E4DA; overflow: hidden; }
.phone__bar span { display: block; height: 100%; border-radius: inherit; background: #152844; }
.phone__put { margin-top: 8px; font-size: 11.5px; color: var(--ink-2); }
.phone__put b { color: var(--ink); }
.phone__next { margin-top: 16px; padding-top: 12px; border-top: 1px solid #E9E4DA; } /* taste-skill-ignore */
.phone__next p:first-child { display: flex; justify-content: space-between; font-weight: 600; }
.phone__due { font-size: 11px; color: #666; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.pair__k { font-size: var(--fs-h3); line-height: 1.15; font-weight: 600; letter-spacing: -.012em; margin-bottom: .6rem; }
.pair__v { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 30rem; text-wrap: pretty; }

/* =============================================================
   ONE CLIENT and SOLE TRADERS: the client page, built in HTML
   (data-ui placeholders until the app's redesign lands)
   ============================================================= */
.client { position: relative; overflow: hidden; padding-block: var(--pad); background: var(--paper-2); }
.client__grid { position: relative; display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.client .win { margin: 0; }
.notes { display: grid; gap: 2rem; }
.notes h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 600; letter-spacing: -.012em; }
.notes p { margin-top: .5rem; font-size: var(--fs-body); }

.win {
  --cut: 34px;
  background: #FAF8F4; color: #1a1a1a; font-size: 13px; line-height: 1.35;
  box-shadow: 0 30px 70px -30px rgba(10, 18, 32, .45); /* taste-skill-ignore */
}
.win .app__bar { padding-left: 46px; }
.win__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: 16px 18px 12px; background: #fff; border-bottom: 1px solid #ECE7DF; } /* taste-skill-ignore */
.win__name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.win__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.win__tags span { padding: 2px 8px; border-radius: 999px; background: #EEF1F6; color: #3D5A80; font-size: 10.5px; font-weight: 600; }
.win__sync { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6b6b6b; }
.win__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px; align-items: start; }
.bills { display: grid; gap: 7px; }
.bills li { padding: 11px 13px; background: #fff; border: 1px solid #ECE7DF; border-radius: 10px; } /* taste-skill-ignore */
.bills li.is-open { border-color: #152844; box-shadow: 0 0 0 2px rgba(21, 40, 68, .12); } /* taste-skill-ignore */
.bills li.is-paid .bills__top b { color: #555; }

/* On the client page each bill is a button that opens its workings. */
.bills li:has(> .bills__btn) { padding: 0; transition: border-color .2s; }
.bills__btn {
  all: unset; box-sizing: border-box; display: block; width: 100%; padding: 11px 13px; border-radius: 10px; cursor: pointer;
}
.bills li:has(> .bills__btn):hover { border-color: #b9b2a6; }
.bills li.is-open:has(> .bills__btn):hover { border-color: #152844; }
.bills__btn:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }
.works .work[hidden] { display: none; }
/* With the script, the workings sit on top of one another in one cell,
   so the window keeps the height of the tallest and nothing beside or
   below it moves when another bill is picked. */
.js .works { display: grid; }
.js .works > .work { grid-area: 1 / 1; align-self: start; }
.js .works .work[hidden] { display: block; visibility: hidden; }
.work__due { color: #6b6b6b; border-top-style: solid !important; } /* taste-skill-ignore */
.bills__top { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.bills__top b { font-variant-numeric: tabular-nums; font-size: 15px; }
.bills__sub { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; font-size: 11.5px; color: #666; }
.bills__hist { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; }
.bills__hist svg { width: 64px; height: 18px; overflow: visible; }
.bills__hist polyline { fill: none; stroke: #b4542f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bills__note { display: block; margin-top: 6px; font-size: 11px; color: #6b6b6b; }
.t-green { color: var(--green); }
.flag { padding: 0 7px; border-radius: 999px; background: #FDF1D8; color: #8a5a16; font-size: 10.5px; font-weight: 700; }
.work { padding: 13px 14px 14px; background: #fff; border: 1px solid #ECE7DF; border-radius: 10px; font-variant-numeric: tabular-nums; } /* taste-skill-ignore */
.work__title { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; font-weight: 700; }
.work__title span { font-weight: 500; color: #666; }
.work dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px dashed #E3DED4; } /* taste-skill-ignore */
.work dt small { display: block; font-size: 10.5px; color: #666; }
.work dd { font-weight: 600; white-space: nowrap; }
.work__sum { border-top: 1px solid #1a1a1a !important; } /* taste-skill-ignore */
.work__total { border-top: 1px solid #1a1a1a !important; padding-top: 9px !important; } /* taste-skill-ignore */
.work__total dt { font-weight: 700; }
.work__total dd { font-size: 19px; font-weight: 700; border-bottom: 3px double #1a1a1a; }
.seen__title { margin: 14px 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6e675e; }
.seen { display: grid; gap: 5px; }
.seen li { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; padding: 8px 12px; background: #fff; border: 1px solid #ECE7DF; border-radius: 9px; font-size: 12px; } /* taste-skill-ignore */
.seen b { font-variant-numeric: tabular-nums; }
.seen em { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; color: var(--green); font-weight: 600; }

.sole { padding-block: var(--pad); background: var(--paper); }
.sole__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.sole__text .lede { margin-top: 1.5rem; }
.gems { display: grid; gap: 1rem; margin-top: 2rem; }
.gems li { font-size: var(--fs-body); }

/* =============================================================
   TRUST
   ============================================================= */
.trust { position: relative; overflow: hidden; padding-block: var(--pad); background: var(--paper-2); }
.trust__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.voices__big { font-size: var(--fs-statement); line-height: 1.2; font-weight: 500; letter-spacing: -.012em; text-wrap: balance; }
.voices__rest { margin-top: 1rem; max-width: 34rem; font-size: var(--fs-lead); line-height: 1.55; }
.voices__lead footer { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-2); }
.voices__more { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.voices__more p { font-size: var(--fs-body); line-height: 1.5; }
.voices__more span { display: block; margin-top: .5rem; font-size: var(--fs-small); color: var(--ink-2); }
.voices__score { margin-top: clamp(2.5rem, 4vw, 3.5rem); max-width: 34rem; font-size: var(--fs-body); }
.voices__score b { font-weight: 700; }

.slip { --cut: 40px; overflow: hidden; background: #fff; }
.slip__head { display: flex; justify-content: space-between; gap: 1rem; padding: 14px 20px 14px 52px; background: var(--night); color: #fff; font-size: var(--fs-small); font-weight: 600; }
.slip__head span:last-child { color: var(--red); }
.slip__list { display: grid; gap: 1rem; padding: 20px 20px 22px; }
.slip__list li { display: grid; gap: 2px; }
.slip__list span { font-size: var(--fs-body); font-weight: 600; }
.slip__list code { font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-2); } /* taste-skill-ignore: real code, Xero's scope names */
.slip__list code b { white-space: nowrap; color: var(--red-ink); }
.slip__never { padding: 14px 20px 16px; background: var(--paper); font-size: var(--fs-small); }
.slip__never b { color: var(--red-ink); margin-right: .3rem; }

.ledger { margin-top: 2.5rem; display: grid; gap: 1.1rem; }
.ledger > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
.ledger dt { font-size: var(--fs-body); font-weight: 600; }
.ledger dd { font-size: var(--fs-body); }
.ledger a { font-weight: 600; text-underline-offset: 3px; }

/* =============================================================
   PRICING
   ============================================================= */
.pricing { position: relative; overflow: hidden; padding-block: var(--pad); background: var(--paper); }
/* The three bands read as one strip, like the tax bands they copy. */
.bands { --cut: 44px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.band { padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--paper-2); position: relative; }
.band:first-child { padding-left: clamp(2.6rem, 4vw, 3.4rem); }
.band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ink); opacity: .9; }
.band:nth-child(2)::before { opacity: .55; }
.band:nth-child(3)::before { opacity: .25; }
.band__rate { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.band__per { margin-top: .6rem; font-size: var(--fs-body); }

/* Offer: the recharge calculator and the white-label card, side by side. */
.offer { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.calc__title, .brand__title, .incl__title { font-size: var(--fs-h3); line-height: 1.15; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.calc { --cut: 48px; padding: clamp(1.4rem, 3vw, 2.2rem); padding-left: clamp(2.6rem, 4vw, 3.2rem); background: var(--night) url("/assets/facets-night.svg") center / cover no-repeat; color: #fff; display: grid; gap: .55rem; align-content: start; }
.calc__title { margin-bottom: 1rem; }
.calc__label { display: flex; align-items: baseline; gap: .5rem; font-size: var(--fs-body); color: var(--mist); }
.calc__label output { margin-left: auto; font-size: var(--fs-h3); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.calc__unit { font-size: var(--fs-small); color: var(--mist-2); }
.calc input[type=range] { width: 100%; accent-color: var(--red); height: 28px; margin: 0 0 .6rem; cursor: pointer; }
.calc__sheet { margin-top: .4rem; display: grid; gap: .25rem; padding: .5rem 1rem; background: rgba(5, 9, 17, .55); font-variant-numeric: tabular-nums; }
.calc__sheet > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; }
.calc__sheet dt { font-size: var(--fs-body); color: var(--mist); }
.calc__sheet dt small { display: block; }
.calc__sheet dd { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .2rem .8rem; text-align: right; }
.calc__sheet small { font-size: var(--fs-small); color: var(--mist-2); }
.calc__sheet b { font-size: var(--fs-lead); font-weight: 600; }
.calc__keep { padding-top: .9rem !important; }
.calc__keep dt { color: #fff; font-weight: 600; }
.calc__keep b { font-size: var(--fs-h2); letter-spacing: -.02em; border-bottom: 4px double rgba(255, 255, 255, .75); line-height: 1.1; }
.calc__keep.is-short b { color: var(--red); border-color: var(--red); }
.calc__note { margin-top: .6rem; font-size: var(--fs-small); color: var(--mist); }

.brand { --cut: 48px; padding: clamp(1.4rem, 3vw, 2.2rem); padding-left: clamp(2.6rem, 4vw, 3.2rem); background: var(--paper-2); display: grid; align-content: start; gap: .9rem; }
.brand__text { font-size: var(--fs-body); line-height: 1.6; max-width: 30rem; }

/* Product screen placeholder (data-ui). */
.portal {
  --firm: #1F5A47;
  position: relative; margin-top: .6rem; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(10, 18, 32, .45); /* taste-skill-ignore */
}
.portal__url {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: 9px 12px; background: var(--paper-2); border-bottom: 1px solid var(--line); /* taste-skill-ignore */
  font-size: .78rem; color: var(--ink-2);
}
.portal__url svg { color: var(--green); }
.portal__bar { display: flex; align-items: center; gap: .6rem; padding: 12px 16px; background: var(--firm); color: #fff; font-weight: 600; font-size: .95rem; }
.portal__logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #fff; color: var(--firm); font-weight: 800; font-size: .85rem; }
.portal__body { padding: 16px 18px 20px; }
.portal__k { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--firm); }
.portal__big { font-size: 2rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.portal__sub { font-size: .85rem; color: var(--ink-2); }
.portal__meter { margin-top: 12px; height: 7px; border-radius: 999px; background: #E9E4DA; overflow: hidden; }
.portal__meter span { display: block; height: 100%; border-radius: inherit; background: var(--firm); }
.portal__tag {
  display: table; margin: -4px 18px 16px auto; padding: .2em .6em; border: 1px dashed var(--line); border-radius: 999px; /* taste-skill-ignore */
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: #fff;
}

.incl { position: relative; margin-top: clamp(3rem, 5vw, 4rem); }
.incl ul { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 2.5rem; }
.incl li { font-size: var(--fs-body); }
/* A small red square marks each item, here and in the sole trader list. */
.incl li, .gems li { position: relative; padding-left: 1.3em; }
.incl li::before, .gems li::before { content: ""; position: absolute; left: 0; top: .62em; width: .42em; height: .42em; background: var(--red-ink); }

/* =============================================================
   ASK + FOOTER
   ============================================================= */
.ask { --cut: clamp(80px, 14vw, 220px); position: relative; padding-block: calc(var(--pad) * 1.1); background: var(--night) url("/assets/facets-night.svg") center / cover no-repeat; color: #fff; text-align: center; }
.ask__gem { width: clamp(88px, 11vw, 150px); height: auto; margin-bottom: .5rem; }
.ask__inner { display: grid; justify-items: center; gap: 1.6rem; }
.ask__title { font-size: var(--fs-h1); line-height: .95; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.ask__title span { display: block; }
.ask__sub { max-width: 34rem; font-size: var(--fs-lead); color: var(--mist); text-wrap: pretty; }

/* The footer sits one tone up from the ask, so the two never run together. */
.foot { position: relative; overflow: hidden; background: var(--night-2); color: var(--mist); padding: 4.5rem 0 1.5rem; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; }
.foot__logo { height: 30px; width: auto; }
.foot__line { margin: 1rem 0 1.5rem; max-width: 22rem; font-size: var(--fs-body); }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.foot__cols div { display: grid; gap: .55rem; align-content: start; }
.foot__cols p { font-size: var(--fs-small); font-weight: 600; color: #fff; margin-bottom: .3rem; }
.foot__cols a { font-size: var(--fs-small); text-decoration: none; overflow-wrap: anywhere; }
.foot__cols a:hover { color: #fff; }
.foot__legal { margin-top: 3.5rem; padding: 1.25rem 0; font-size: var(--fs-small); color: var(--mist-2); }
.foot__ask { display: block; margin-top: .5rem; }
.foot__ask a { text-decoration: underline; text-underline-offset: 2px; }
.foot__ask a:hover { color: #fff; }

/* =============================================================
   FAQ
   ============================================================= */
.faq { padding-block: var(--pad); background: var(--paper-2); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__list { display: grid; gap: 6px; }
.faq details { background: var(--paper); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.1rem 1.35rem; cursor: pointer; list-style: none;
  font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.008em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.4em; line-height: .8; font-weight: 400; color: var(--red-ink); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--red-ink); outline-offset: -2px; }
.faq details p { padding: 0 1.35rem 1.25rem; max-width: 44rem; font-size: var(--fs-body); }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 980px) {
  .dock__links { display: none; }
  .split, .trust__grid, .foot__top, .offer, .client__grid, .sole__grid, .faq__grid { grid-template-columns: 1fr; }
  .sole__text { order: -1; }
  .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .split { align-items: start; }
  .incl ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone { position: relative; right: auto; bottom: auto; margin: -70px 0 0 auto; transform: rotate(2deg); }
  .intro .app { margin-right: 0; }
}
@media (max-width: 720px) {
  :root { --fs-body: 1rem; --bar: 60px; }
  .topbar__login { display: none; }
  .u-draw__line { stroke-width: 4.4; }   /* the line scales with the word; keep it visible when small */
  .hero__ctas { flex-direction: column; align-items: stretch; width: min(100%, 22rem); }
  .hero__ctas .btn { justify-content: center; }
  .hero__rail { gap: .9rem; font-size: .8125rem; }
  .app__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone { margin: 18px auto 0; }   /* no overlap on phones: it would hide the sole trader row */
  .pair, .voices__more, .bands, .incl ul, .notes { grid-template-columns: 1fr; }
  .win__body { grid-template-columns: 1fr; }
  /* The work queue as stacked cards: client and issue on the left, the
     next CT / SA bill on the right. */
  .q, .q tbody { display: block; }
  .q thead, .q td.q__vat, .q td.q__sync { display: none; }
  .q tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; margin-bottom: 6px; padding: 10px 12px; background: #fff; border: 1px solid #ECE7DF; border-radius: 10px; } /* taste-skill-ignore */
  .q td { display: block; padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; }
  .q td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .q td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .q td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .q tr.is-hot { border-color: rgba(194, 31, 58, .45); background: #FFF9F9; }
  .intro .app .app__bar { padding-left: 40px; }
  .band:first-child { padding-left: clamp(1.4rem, 3vw, 2.4rem); padding-top: 2.6rem; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > div { grid-template-columns: 1fr; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .intro .app, .js .intro .phone { animation: none; }
  .faq summary::after { transition: none; }
  .u-draw__line path { animation: none; stroke-dashoffset: 0; }
  .dock { transition: none; }
}